/* ==================================================================
   Sterren van Straks — één stylesheet voor de hele site.

   De volgorde is: tokens, basis, typografie, hulpklassen, knoppen,
   kopbalk, hero, secties, kaarten, formulier, footer, motion.
   Elk onderdeel staat één keer. Zie DESIGN.md voor het waarom.
================================================================== */

/* ==================================================================
   1. Tokens
================================================================== */
:root {
  /* --- nacht: de merkkleur van het vertrouwen --- */
  --nacht-900: #08193a;
  --nacht-800: #0e2a5e;
  --nacht-700: #16407f;
  --nacht-600: #23549b;

  /* --- ster: het goud. Op donker mag het tekst zijn, op licht nooit --- */
  --ster-300: #fbe28f;
  --ster-400: #f7ce4b;
  --ster-500: #e0b02a;
  --ster-tekst: #7a5608;
  --ster-vlak: #fdf3d6;

  /* --- papier --- */
  --papier: #ffffff;
  /* Het afwisselende vlak tussen de witte secties. Warm ivoor in plaats van
     lichtblauw: het houdt het goud warm en laat witte kaarten loskomen. */
  --papier-zacht: #fbf8f2;
  --lucht-50: #eff5fd;
  --lucht-100: #dee9f8;
  --lucht-200: #c4d6f0;

  /* --- inkt --- */
  --inkt: #0c1a31;
  --inkt-zacht: #48597a;
  --licht: #ffffff;
  --licht-zacht: #b7c7e3;

  /* --- ruimte, op 4px --- */
  --r1: 0.25rem;
  --r2: 0.5rem;
  --r3: 0.75rem;
  --r4: 1rem;
  --r5: 1.5rem;
  --r6: 2rem;
  --r7: 3rem;
  --r8: 4rem;
  --r9: 6rem;
  --r10: 8rem;

  /* Hoogte van de zwevende kopbalk. De hero's tellen dit bij hun bovenmarge
     op, want de balk staat `fixed` en neemt dus geen ruimte in. Nagemeten in
     de browser op 320, 390, 768, 1280 en 1440px. */
  --kop-hoogte: 5.2rem;

  /* De gebogen onderrand van elke hero. Staat hier omdat twee verschillende
     elementen hem moeten dragen: `.hero__vlak` bij een hero met foto, en
     `.hero--kaal::before` bij een hero zonder. */
  --hero-boog: clamp(1.25rem, 0.5rem + 2.4vw, 3rem);

  --sectie: clamp(4rem, 3rem + 5vw, 7.5rem);
  --marge: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  --breed: 1200px;
  --smal: 720px;

  /* --- vorm --- */
  --rond-s: 10px;
  --rond-m: 18px;
  --rond-l: 28px;
  --rond-xl: 40px;
  --rond-vol: 999px;

  /* --- schaduw, nachtblauw getint --- */
  --schaduw-1: 0 1px 2px rgba(8, 25, 58, 0.05), 0 4px 12px rgba(8, 25, 58, 0.05);
  --schaduw-2: 0 2px 6px rgba(8, 25, 58, 0.06), 0 14px 32px rgba(8, 25, 58, 0.09);
  --schaduw-3: 0 30px 70px rgba(8, 25, 58, 0.16);

  /* --- motion --- */
  --veer: cubic-bezier(0.16, 1, 0.3, 1);
  --snel: 180ms;
  --middel: 420ms;
  --traag: 760ms;

  /* --- typografie --- */
  --kop-font: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --tekst-font: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --hand-font: 'Caveat', 'Segoe Script', cursive;

  /* --- textuur --- */
  --liniatuur: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 33px,
    color-mix(in srgb, var(--ster-500) 9%, transparent) 33px,
    color-mix(in srgb, var(--ster-500) 9%, transparent) 34px
  );
  --ruis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  --krul: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11.5C34 4.5 78 13.5 118 7.5 145 3.4 172 6 197 10' fill='none' stroke='%23F7CE4B' stroke-width='5.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ==================================================================
   2. Basis
================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* De kopbalk is sticky; ankers moeten er niet onder verdwijnen. */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--tekst-font);
  font-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.15rem);
  line-height: 1.65;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Vangnet. De echte oplossing is dat decoratie binnen een eigen
     container met overflow blijft; dit vangt alleen afrondingen op. */
  overflow-x: clip;
}

img,
svg,
picture,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

hr {
  border: 0;
  border-top: 1px solid var(--lucht-100);
  margin: var(--r7) 0;
}

::selection {
  background: var(--ster-400);
  color: var(--nacht-900);
}

/* Eén focusstijl voor de hele site. Nooit outline:none zonder
   vervanging — zie DESIGN.md §7. */
:focus-visible {
  outline: 3px solid var(--nacht-600);
  outline-offset: 2px;
  border-radius: 4px;
}

.op-nacht :focus-visible,
.hero :focus-visible,
.voet :focus-visible,
.cta :focus-visible {
  outline-color: var(--ster-400);
}

.visueel-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.overslaan {
  position: absolute;
  left: var(--r4);
  top: var(--r4);
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--ster-400);
  color: var(--nacht-900);
  font-weight: 700;
  border-radius: var(--rond-s);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--snel) var(--veer);
}

.overslaan:focus {
  transform: translateY(0);
}

/* ==================================================================
   3. Typografie
================================================================== */
h1,
h2,
h3,
h4 {
  font-family: var(--kop-font);
  color: var(--inkt);
  margin: 0 0 var(--r4);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
  font-optical-sizing: auto;
}

h1 {
  font-size: clamp(2.15rem, 1.4rem + 3.2vw, 3.75rem);
  font-weight: 800;
  font-stretch: 88%;
}

h2 {
  font-size: clamp(1.85rem, 1.35rem + 2.1vw, 2.9rem);
  font-weight: 700;
  font-stretch: 90%;
}

h3 {
  font-size: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
  font-weight: 700;
  font-stretch: 94%;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  font-stretch: 96%;
  letter-spacing: 0;
  line-height: 1.35;
}

p {
  margin: 0 0 var(--r4);
  max-width: 68ch;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--nacht-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--snel) var(--veer);
}

a:hover {
  color: var(--nacht-600);
}

strong {
  font-weight: 700;
}

.lead {
  font-size: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  line-height: 1.55;
  color: var(--inkt-zacht);
  max-width: 58ch;
}

.zacht {
  color: var(--inkt-zacht);
}

.klein {
  font-size: 0.875rem;
  line-height: 1.55;
}

/* Het label boven elke kop. Kleinste tekst op de site, en daarom
   altijd in hoofdletters met ruime spatiëring. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 var(--r3);
  font-family: var(--tekst-font);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ster-tekst);
}

.eyebrow::before {
  content: '';
  width: 1.4rem;
  height: 2px;
  background: var(--ster-400);
  border-radius: 2px;
  flex: none;
}

.op-nacht .eyebrow,
.hero .eyebrow,
.cta .eyebrow {
  color: var(--ster-400);
}

/* De onderstreping van de docent: één woord per kop, met de hand
   getrokken, nooit rechthoekig. */
.markeer {
  position: relative;
  display: inline;
  background-image: var(--krul);
  background-repeat: no-repeat;
  background-size: 100% 0.34em;
  background-position: 0 98%;
  padding-bottom: 0.12em;
}

/* Lijsten met de ster uit het logo als bolletje. */
.sterlijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--r3);
}

.sterlijst li {
  position: relative;
  padding-left: 2rem;
  max-width: 62ch;
}

.sterlijst li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--ster-400);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

.op-nacht .sterlijst li::before {
  background: var(--ster-400);
}

/* ==================================================================
   4. Indeling
================================================================== */
.omhulsel {
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding-inline: var(--marge);
}

/* Raster- en flexkinderen krijgen standaard min-width:auto en krimpen
   daardoor niet onder hun inhoud. Op 320px duwt één lang woord — een
   e-mailadres bijvoorbeeld — dan de hele pagina breder. Dit zet die
   ondergrens uit voor alle containers die wij gebruiken. */
.raster > *,
.duo > *,
.creme > *,
.accentblok > *,
.contact-raster > *,
.feitenraster > *,
.overgang > *,
.cijfers > *,
.stappen > *,
.hero__binnen > *,
.kenmerken__lijst > *,
.voet__boven > *,
.voet__kolommen > *,
.contactrij > div,
.kenmerk > span,
.keuze > span,
.toestemming > label {
  min-width: 0;
}

/* Een lang e-mailadres in een knop of link mag afbreken in plaats van
   de layout open te duwen. */
.knop,
.contactrij a,
.voet a {
  overflow-wrap: anywhere;
}

.omhulsel--smal {
  max-width: calc(var(--smal) + var(--marge) * 2);
}

.sectie {
  position: relative;
  padding-block: var(--sectie);
}

/* De sectie draagt de kleur, de pseudo-laag de liniatuur. Anders zou het
   masker dat de lijnen laat uitdoven ook de achtergrondkleur wegnemen. */
.sectie--lucht {
  background-color: var(--papier-zacht);
}

.sectie--lucht::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--liniatuur);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  pointer-events: none;
}

.sectie--lucht > * {
  position: relative;
}

.sectie--creme {
  background: var(--ster-vlak);
}

.sectie--nacht {
  background-color: var(--nacht-900);
  color: var(--licht);
}

.sectie--nacht::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
      70% 90% at 12% 0%,
      color-mix(in srgb, var(--nacht-700) 62%, transparent),
      transparent 70%
    ),
    var(--ruis);
  background-size: auto, 200px 200px;
  opacity: 1;
  pointer-events: none;
}

.sectie--nacht > * {
  position: relative;
}

.sectie--nacht h1,
.sectie--nacht h2,
.sectie--nacht h3,
.sectie--nacht h4,
.op-nacht h1,
.op-nacht h2,
.op-nacht h3,
.op-nacht h4 {
  color: var(--licht);
}

.sectie--nacht .lead,
.sectie--nacht .zacht,
.op-nacht .lead,
.op-nacht .zacht {
  color: var(--licht-zacht);
}

.sectie--strak-boven {
  padding-top: 0;
}

/* De afsluitende oproep hoort een strook te zijn, geen hoofdstuk: ruim een
   derde van de lucht van een gewone sectie. */
.sectie--slot {
  padding-block: clamp(2.25rem, 1.5rem + 2.4vw, 4rem);
}

/* De kantlijn: een gouden haarlijn links van de inhoud, waar de
   aantekeningen in hangen. Pas vanaf 1100px, want daaronder is er
   geen marge om hem in te zetten. */
.sectie--kantlijn > .omhulsel {
  position: relative;
}

.sectiekop {
  max-width: 62ch;
  margin-bottom: var(--r7);
}

.sectiekop--midden {
  margin-inline: auto;
  text-align: center;
}

.sectiekop--midden .eyebrow {
  justify-content: center;
}

.sectiekop--midden p {
  margin-inline: auto;
}

.sectiekop p {
  margin-bottom: 0;
}

.sectiekop h2 + p,
.sectiekop h1 + p {
  margin-top: var(--r4);
}

/* Ruimte tussen twee blokken binnen dezelfde sectie. */
.ruimte-boven {
  margin-top: var(--r8);
}

.ruimte-boven-klein {
  margin-top: var(--r5);
}

/* Twee kolommen, tekst naast beeld. */
.duo {
  display: grid;
  gap: var(--r7);
  align-items: center;
}

.duo__beeld {
  position: relative;
}

.duo__beeld > .ster-deco {
  z-index: 1;
}

.duo__beeld img {
  width: 100%;
  border-radius: var(--rond-l) var(--rond-xl) var(--rond-l) var(--rond-xl);
  box-shadow: var(--schaduw-2);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.duo__beeld--breed img {
  aspect-ratio: 16 / 10;
}

/* Voor een beeld dat bijna vierkant is aangeleverd. In een 16:10-uitsnede
   verdwijnt de bovenrand — en juist daar staat het whiteboard. */
.duo__beeld--staand img {
  aspect-ratio: 5 / 4;
}

/* Een illustratie op wit is geen foto: geen kaartrand, geen schaduw en geen
   vaste beeldverhouding, anders staat er een zwevend wit vlak op een witte
   sectie. Hij mag gewoon zijn eigen vorm houden. */
.duo__beeld--illustratie img {
  border-radius: 0;
  box-shadow: none;
  aspect-ratio: auto;
  object-fit: contain;
  height: auto;
}

/* ==================================================================
   5. Aantekeningen en sterdecoratie
================================================================== */
.aantekening {
  position: relative;
  display: block;
  margin: var(--r4) 0 0;
  padding-left: 2.6rem;
  max-width: 21rem;
  font-family: var(--hand-font);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.3rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ster-tekst);
  transform: rotate(-2.2deg);
  transform-origin: left center;
}

.op-nacht .aantekening,
.sectie--nacht .aantekening,
.hero .aantekening,
.cta .aantekening,
.accentblok .aantekening {
  color: var(--ster-400);
}

/* Het pijltje is met de hand getrokken en wijst naar links, naar het
   element waar de aantekening bij hoort. */
.aantekening::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 2.15rem;
  height: 1.95rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cpath d='M37 6C27 3 12 6 6 17c-1 2-1 4 0 6' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M2 14l3 10 10-4' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cpath d='M37 6C27 3 12 6 6 17c-1 2-1 4 0 6' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M2 14l3 10 10-4' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

.aantekening--rechts {
  transform: rotate(1.8deg);
  margin-left: auto;
}

/* Zwevende open sterren. Altijd binnen een container met overflow
   hidden, zodat ze nooit een horizontale schuifbalk maken. */
.ster-deco {
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  background: var(--ster-400);
  -webkit-mask: url('../images/ster-contour.svg') no-repeat center / contain;
  mask: url('../images/ster-contour.svg') no-repeat center / contain;
  pointer-events: none;
  opacity: 0.85;
}

.ster-deco--vol {
  -webkit-mask-image: none;
  mask-image: none;
  background: var(--ster-400);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

.ster-deco--klein {
  width: 2rem;
  height: 2rem;
}

.ster-deco--groot {
  width: 6rem;
  height: 6rem;
}

/* Vaste plekken, zodat er geen style-attributen in de HTML staan.
   Drie posities is genoeg; meer sterren wordt kermis. */
.ster-deco--boven {
  top: -1.1rem;
  right: 7%;
}

.ster-deco--onder {
  bottom: 11%;
  left: -1.5rem;
}

.ster-deco--zij {
  top: 26%;
  right: -1rem;
}

/* ==================================================================
   6. Knoppen
================================================================== */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.85rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--rond-s);
  font-family: var(--tekst-font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--snel) var(--veer),
    border-color var(--snel) var(--veer), color var(--snel) var(--veer),
    transform var(--snel) var(--veer), box-shadow var(--snel) var(--veer);
}

.knop svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  transition: transform var(--snel) var(--veer);
}

.knop:hover svg {
  transform: translateX(3px);
}

.knop--goud {
  background: var(--ster-400);
  color: var(--nacht-900);
  box-shadow: 0 2px 0 var(--ster-500);
}

.knop--goud:hover {
  background: var(--ster-300);
  color: var(--nacht-900);
  transform: translateY(-2px);
  box-shadow: 0 4px 0 var(--ster-500), var(--schaduw-2);
}

.knop--goud:active {
  transform: translateY(0);
  box-shadow: 0 1px 0 var(--ster-500);
}

.knop--nacht {
  background: var(--nacht-800);
  color: var(--licht);
}

.knop--nacht:hover {
  background: var(--nacht-700);
  color: var(--licht);
  transform: translateY(-2px);
  box-shadow: var(--schaduw-2);
}

.knop--lijn {
  background: transparent;
  border-color: color-mix(in srgb, var(--licht) 42%, transparent);
  color: var(--licht);
}

.knop--lijn:hover {
  border-color: var(--ster-400);
  color: var(--ster-400);
  background: color-mix(in srgb, var(--ster-400) 10%, transparent);
}

/* Op lichte secties heeft de lijnknop een nachtblauwe rand nodig. */
.knop--lijn-donker {
  background: transparent;
  border-color: var(--lucht-200);
  color: var(--nacht-800);
}

.knop--lijn-donker:hover {
  border-color: var(--nacht-700);
  color: var(--nacht-700);
  background: var(--lucht-50);
}

.knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r3);
  margin-top: var(--r6);
}

.hero .knoppen {
  margin-top: var(--r5);
}

.knoppen .knop {
  flex: 1 1 100%;
}

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

/* Tekstlink met pijl, voor 'lees verder'. */
.pijllink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--nacht-700);
  text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--ster-400) 60%, transparent);
  padding-bottom: 2px;
  transition: border-color var(--snel) var(--veer), color var(--snel) var(--veer);
}

.pijllink svg {
  width: 1.05em;
  height: 1.05em;
  transition: transform var(--snel) var(--veer);
}

.pijllink:hover {
  color: var(--nacht-600);
  border-color: var(--ster-400);
}

.pijllink:hover svg {
  transform: translateX(3px);
}

.op-nacht .pijllink {
  color: var(--ster-400);
  border-color: color-mix(in srgb, var(--ster-400) 45%, transparent);
}

.op-nacht .pijllink:hover {
  color: var(--ster-300);
  border-color: var(--ster-300);
}

/* ==================================================================
   7. Kopbalk
================================================================== */
/* De kopbalk zweeft over de hero heen: bovenaan de pagina is hij doorzichtig
   en loopt de hero er gewoon onderdoor. Pas zodra er gescrold is, komt het
   nachtblauwe vlak eronder — anders zou de tekst over de inhoud vallen.

   Omdat hij daarvoor uit de flow moet (`fixed`), compenseert elke hero die
   hoogte zelf met `--kop-hoogte`. Elke pagina begint met een donkere hero,
   dus witte tekst is bovenaan altijd leesbaar. */
.kop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  color: var(--licht);
  transition: box-shadow var(--snel) var(--veer),
    background-color var(--middel) var(--veer);
}

.kop.is-gezakt {
  background: var(--nacht-900);
}

.kop::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--ster-400) 55%, transparent),
    transparent
  );
  opacity: 0;
  transition: opacity var(--middel) var(--veer);
}

.kop.is-gezakt::after {
  opacity: 1;
}

.kop.is-gezakt {
  box-shadow: 0 10px 30px rgba(8, 25, 58, 0.28);
}

/* Logo links, menu precies in het midden, knop rechts — en alle drie dicht
   bij de rand, maar er niet tegenaan. Onder het navigatiebreekpunt is het
   een gewone flexrij met alleen het logo en de menuknop. */
.kop__binnen {
  padding: 1.05rem clamp(1.5rem, 4.2vw, 5.25rem);
  display: flex;
  align-items: center;
  gap: var(--r4);
}

.kop__logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--licht);
  margin-right: auto;
  border-radius: var(--rond-s);
}

.kop__merk {
  width: 3.5rem;
  height: auto;
  flex: none;
}

/* Het woordmerk is echte tekst, geen plaatje. Daarom moet het expliciet
   op één regel blijven: anders breekt 'Sterren van Straks' in tweeën. */
.kop__naam {
  display: block;
  font-family: var(--kop-font);
  font-size: 1.28rem;
  font-weight: 800;
  font-stretch: 88%;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--licht);
  white-space: nowrap;
}

.kop__payoff {
  display: block;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--licht-zacht);
  line-height: 1.3;
  margin-top: 2px;
  white-space: nowrap;
}

.kop__nav {
  display: none;
}

.kop__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.kop__nav a {
  display: block;
  padding: 0.62rem 0.7rem;
  border-radius: var(--rond-s);
  font-size: 1.075rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--licht);
  text-decoration: none;
  position: relative;
  transition: color var(--snel) var(--veer), background-color var(--snel) var(--veer);
}

.kop__nav a:hover {
  color: var(--licht);
  background: color-mix(in srgb, var(--licht) 8%, transparent);
}

.kop__nav a[aria-current='page'] {
  color: var(--licht);
}

.kop__nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.28rem;
  height: 2px;
  border-radius: 2px;
  background: var(--ster-400);
}

.kop__acties {
  display: none;
}

.kop__acties .knop {
  white-space: nowrap;
  padding-inline: 1.4rem;
}

/* ==================================================================
   8. Mobiel menu — een <details>, dus het werkt zonder JavaScript
================================================================== */
.menu {
  position: relative;
  margin-left: auto;
}

.menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--rond-s);
  border: 1.5px solid color-mix(in srgb, var(--licht) 24%, transparent);
  color: var(--licht);
  cursor: pointer;
  list-style: none;
  transition: border-color var(--snel) var(--veer), background-color var(--snel) var(--veer);
}

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

.menu > summary:hover {
  border-color: var(--ster-400);
  background: color-mix(in srgb, var(--ster-400) 12%, transparent);
}

.menu > summary svg {
  width: 1.5rem;
  height: 1.5rem;
}

.menu__sluit {
  display: none;
}

.menu[open] > summary .menu__open {
  display: none;
}

.menu[open] > summary .menu__sluit {
  display: block;
}

.menu__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 25, 58, 0.55);
  backdrop-filter: blur(2px);
  z-index: 1;
}

.menu[open] .menu__overlay {
  display: block;
}

.menu__paneel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(23rem, 88vw);
  z-index: 2;
  background: var(--nacht-900);
  border-left: 1px solid color-mix(in srgb, var(--ster-400) 22%, transparent);
  padding: var(--r5) var(--r5) var(--r7);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--r5);
  box-shadow: -20px 0 60px rgba(8, 25, 58, 0.45);
  animation: paneel-in var(--middel) var(--veer);
}

@keyframes paneel-in {
  from {
    transform: translateX(14%);
    opacity: 0;
  }
}

.menu__kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--r4);
}

.menu__merk {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--licht);
}

.menu__merk img {
  width: 2.4rem;
}

.menu__dicht {
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--licht) 24%, transparent);
  color: var(--licht);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--rond-s);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}

.menu__dicht svg {
  width: 1.3rem;
  height: 1.3rem;
}

.menu__dicht:hover {
  border-color: var(--ster-400);
  color: var(--ster-400);
}

.menu__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.menu__nav a {
  display: block;
  padding: 0.95rem 0.9rem;
  border-radius: var(--rond-s);
  color: var(--licht);
  text-decoration: none;
  font-family: var(--kop-font);
  font-size: 1.2rem;
  font-weight: 700;
  font-stretch: 92%;
  border-bottom: 1px solid color-mix(in srgb, var(--licht) 9%, transparent);
  transition: background-color var(--snel) var(--veer), padding-left var(--snel) var(--veer);
}

.menu__nav a:hover {
  background: color-mix(in srgb, var(--licht) 7%, transparent);
  padding-left: 1.2rem;
}

.menu__nav a[aria-current='page'] {
  color: var(--ster-400);
}

.menu__voet {
  margin-top: auto;
  display: grid;
  gap: var(--r3);
}

.menu__voet .knop {
  width: 100%;
}

.menu__voet p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--licht-zacht);
}

.menu__voet p a {
  color: var(--ster-400);
}

/* ==================================================================
   9. Hero

   De hero is één doorlopend beeld: de foto vult de hele sectie, met een
   verloop van nachtblauw eroverheen dat links dekkend is en naar rechts
   open trekt. Daardoor is de tekst leesbaar en blijft de foto te zien.

   De onderrand buigt: `--hero-vlak` draagt de afronding, de sectie zelf
   houdt de kleur van wat eronder komt. Dat kan niet op één element —
   wie de hero afrondt, snijdt ook zijn eigen achtergrond weg.
================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  /* Nacht-900, niet papier: de foto in `.hero__vlak` dekt dit vlak
     helemaal af, behalve tijdens haar eigen fade-in bij het laden
     (`hero-beeld`). Stond hier papier/papier-zacht, dan scheen dat er
     even doorheen als een lichte, blauwig ogende flits vlak boven de
     golf — precies waar geen tekst overheen zit om het te maskeren. */
  background-color: var(--nacht-900);
  color: var(--licht);
  padding-block: calc(var(--kop-hoogte) + clamp(1.5rem, 0.75rem + 2.4vw, 2.75rem))
    clamp(3rem, 2rem + 4vw, 5rem);
}

/* Het eerste scherm is hero plus kenmerkenrij samen. De wikkel houdt de
   schermhoogte vast en de hero rekt uit tot wat er overblijft, zodat de drie
   kenmerken altijd nog net boven de vouw staan. `flex: 1 0 auto` laat de hero
   wel groeien maar nooit onder zijn eigen inhoud krimpen: op een laag scherm
   wordt het geheel gewoon iets hoger dan één schermhoogte. */
.eerste-scherm {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.eerste-scherm > .hero {
  flex: 1 0 auto;
}

.hero--home {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* In een kolom-flexbox maakt `margin-inline: auto` van `.hero__binnen` geen
   gecentreerde container maar een gekrompen blok: het item valt terug op zijn
   max-content-breedte en de automarges duwen het naar het midden. De tekst
   begon daardoor midden op de foto in plaats van aan de kantlijn, waar elke
   andere sectie begint. `width: 100%` zet de stretch terug. */
.hero--home > .hero__binnen {
  width: 100%;
}

.hero__vlak {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-color: var(--nacht-900);
}

.hero__vlak picture {
  display: block;
  position: absolute;
  inset: 0;
}

.hero__vlak img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Het verloop. Links dekkend genoeg voor witte tekst, rechts open zodat de
   foto zijn werk doet. De tweede laag verdonkert de onderrand een beetje,
   zodat de ronding niet in een lichte plek verdwijnt. */
.hero__sluier {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      to right,
      color-mix(in srgb, var(--nacht-900) 97%, transparent) 0%,
      color-mix(in srgb, var(--nacht-900) 95%, transparent) 30%,
      color-mix(in srgb, var(--nacht-900) 86%, transparent) 45%,
      color-mix(in srgb, var(--nacht-900) 52%, transparent) 62%,
      color-mix(in srgb, var(--nacht-900) 18%, transparent) 82%,
      color-mix(in srgb, var(--nacht-900) 6%, transparent) 100%
    ),
    linear-gradient(
      to top,
      color-mix(in srgb, var(--nacht-900) 55%, transparent) 0%,
      transparent 38%
    ),
    /* Het menu zweeft over de foto. Zonder deze band valt het op een licht
       stuk beeld — een whiteboard, een raam — weg tegen de achtergrond. */
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--nacht-900) 82%, transparent) 0%,
      color-mix(in srgb, var(--nacht-900) 58%, transparent) 55%,
      color-mix(in srgb, var(--nacht-900) 22%, transparent) 78%,
      transparent 100%
    ),
    var(--ruis);
  background-size: auto, auto, 100% calc(var(--kop-hoogte) * 2.2), 200px 200px;
  background-repeat: repeat, repeat, no-repeat, repeat;
}

/* Is het verloop al in de foto gemengd, dan legt de sluier er op breed
   scherm niets meer overheen — alleen een lichte verdonkering onderaan,
   zodat de golf niet in een lichte plek verdwijnt. */
@media (min-width: 60em) {
  .hero--voorgemengd .hero__sluier {
    background-image: linear-gradient(
        to right,
        color-mix(in srgb, var(--nacht-900) 45%, transparent) 0%,
        color-mix(in srgb, var(--nacht-900) 43%, transparent) 34%,
        color-mix(in srgb, var(--nacht-900) 32%, transparent) 50%,
        color-mix(in srgb, var(--nacht-900) 10%, transparent) 66%,
        transparent 80%
      ),
      linear-gradient(
        to top,
        color-mix(in srgb, var(--nacht-900) 38%, transparent) 0%,
        transparent 30%
      ),
      linear-gradient(
        to bottom,
        color-mix(in srgb, var(--nacht-900) 82%, transparent) 0%,
        color-mix(in srgb, var(--nacht-900) 58%, transparent) 55%,
        color-mix(in srgb, var(--nacht-900) 22%, transparent) 78%,
        transparent 100%
      ),
      var(--ruis);
    background-size: auto, auto, 100% calc(var(--kop-hoogte) * 2.2), 200px 200px;
    background-repeat: repeat, repeat, no-repeat, repeat;
  }
}

/* Onder 60em staat de tekst over de hele foto; dan is één rustige sluier
   over het geheel veiliger dan een verloop naar opzij. */
@media (max-width: 59.999em) {
  .hero__sluier {
    background-image: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--nacht-900) 86%, transparent) 0%,
        color-mix(in srgb, var(--nacht-900) 80%, transparent) 45%,
        color-mix(in srgb, var(--nacht-900) 92%, transparent) 100%
      ),
      var(--ruis);
    background-size: auto, 200px 200px;
  }
}

.hero__binnen {
  position: relative;
  max-width: var(--breed);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.hero__tekst {
  max-width: 36rem;
}

.hero h1 {
  color: var(--licht);
  font-stretch: 86%;
}

.hero--groot h1 {
  font-size: clamp(2.35rem, 1.5rem + 3.6vw, 4rem);
}

.hero p {
  color: var(--licht-zacht);
}

.hero__tekst > .lead {
  margin-top: var(--r4);
  max-width: 32rem;
}

/* De inleiding staat over de foto en moet daar tegenop kunnen. In een
   gedempte tint haalt hij boven een lichte tafel de 4,5:1 niet; wit wel.
   De hiërarchie met de kop blijft staan via grootte en gewicht. */
.hero__tekst > .lead {
  color: var(--licht);
}

/* Het regeltje onder de knoppen dat zegt wáár de begeleiding plaatsvindt.
   Praktische informatie, dus geen aantekening in de kantlijn. */
.hero__plek {
  position: relative;
  margin-top: var(--r3);
  padding-left: 1.6rem;
  color: var(--licht-zacht);
}

.hero__plek::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 1.05rem;
  height: 1.05rem;
  background: var(--ster-400);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

/* Hero zonder foto, voor tekstpagina's zoals de privacyverklaring.

   Belangrijk: deze hero heeft geen `.hero__vlak`, en dus ook niet het
   nachtblauwe vlak dat daarin zit. Zonder de regel hieronder staat er witte
   tekst op de witte sectiekleur. Draagt hij daarom zelf. */
.hero--kaal {
  padding-block: calc(var(--kop-hoogte) + clamp(1.5rem, 1rem + 1.6vw, 2.5rem))
    clamp(3rem, 2.5rem + 3vw, 4.5rem);
}

.hero--kaal::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--nacht-900);
  background-image: radial-gradient(
      70% 90% at 10% -10%,
      color-mix(in srgb, var(--nacht-700) 72%, transparent),
      transparent 68%
    ),
    var(--ruis);
  background-size: auto, 200px 200px;
}

/* De golvende onderrand. `preserveAspectRatio="none"` in de SVG laat hem
   met elke breedte meerekken, dus de vorm blijft kloppen van 320 tot 1920px. */
.hero__golf {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(1.75rem, 0.75rem + 3vw, 3.75rem);
  display: block;
  color: var(--papier);
  pointer-events: none;
}

.hero--op-lucht .hero__golf {
  color: var(--papier-zacht);
}

.hero__golf path {
  fill: currentColor;
}

/* De open ster die over de foto valt. Onder 60em blijft hij weg: daar loopt
   de tekst tot bijna aan de rechterrand en komt hij onvermijdelijk naast een
   tekstregel te staan — net als de boog is hij daar meer ruis dan sieraad. */
.hero__ster {
  display: none;
}

@media (min-width: 60em) {
  .hero__ster {
    display: block;
    position: absolute;
    /* 50px lager en 90px verder naar links dan de kale percentages, zodat hij
       niet tegen de knop rechtsboven of de kop aan komt te staan. */
    top: calc(34% + 50px);
    right: calc(6% + 90px);
    width: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
    height: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
    opacity: 0.9;
  }
}

/* ==================================================================
   9b. Kenmerkenrij

   Stond eerst onderin de donkere hero; sinds de hero één doorlopend beeld
   is, staat hij eronder op papier. Drie kenmerken met een gouden badge,
   gescheiden door haarlijnen in plaats van door kaders.
================================================================== */
/* Op ivoor, zodat de rij loskomt van de witte sectie eronder en samen met
   de hero één eerste scherm vormt. De golf onderaan de hero loopt mee dankzij
   `hero--op-lucht`. */
.kenmerken {
  background: var(--papier-zacht);
  padding-block: clamp(1.5rem, 1rem + 1.8vw, 2.5rem);
}

.kenmerken__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--r5);
}

.kenmerk {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.kenmerk__badge {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: var(--rond-vol);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--ster-400) 26%, var(--papier));
  color: var(--ster-tekst);
}

.kenmerk__badge svg {
  width: 1.4rem;
  height: 1.4rem;
}

.kenmerk b {
  display: block;
  font-family: var(--kop-font);
  font-size: 1.0625rem;
  font-weight: 700;
  font-stretch: 94%;
  color: var(--inkt);
  line-height: 1.25;
}

.kenmerk b + span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.95rem;
  color: var(--inkt-zacht);
  line-height: 1.45;
}

/* ==================================================================
   11d. Vinkjeskaart

   De witte kaart naast "Wat wij doen": een kort lijstje met gouden
   vinkjes. Geen opsomming met bolletjes — dit zijn toezeggingen, en die
   lezen beter als afgevinkte regels.
================================================================== */
.lijstkaart {
  background: var(--papier);
  border: 1px solid var(--lucht-100);
  border-radius: var(--rond-l);
  padding: var(--r6) var(--r5);
  box-shadow: var(--schaduw-1);
}

.lijstkaart h3 {
  margin-bottom: var(--r5);
  font-size: 1.15rem;
}

.vinklijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--r4);
}

.vinklijst li {
  position: relative;
  padding-left: 2.6rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--inkt-zacht);
  max-width: 44ch;
}

.vinklijst li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: var(--rond-vol);
  background: color-mix(in srgb, var(--ster-400) 26%, var(--papier));
}

.vinklijst li::after {
  content: '';
  position: absolute;
  left: 0.42rem;
  top: 0.42em;
  width: 0.8rem;
  height: 0.8rem;
  background: var(--ster-tekst);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

/* ==================================================================
   11e. Cijferkaart

   De drie cijfers stonden eerst op een nachtblauwe band. In het nieuwe
   ontwerp is het een lichte kaart met haarlijnen ertussen, zodat de
   pagina rustiger doorloopt.
================================================================== */
.cijferkaart {
  background: var(--papier);
  border: 1px solid var(--lucht-100);
  border-radius: var(--rond-l);
  padding: var(--r6) var(--r5);
  box-shadow: var(--schaduw-1);
}

.cijferkaart__kop {
  margin: 0 0 var(--r5);
  font-family: var(--kop-font);
  font-size: 1.0625rem;
  font-weight: 700;
  font-stretch: 94%;
  color: var(--inkt);
}

.cijferkaart .cijfers {
  gap: var(--r5);
  text-align: left;
}

.cijferkaart .cijfer b {
  color: var(--nacht-800);
  font-size: clamp(2.1rem, 1.6rem + 1.8vw, 2.9rem);
}

.cijferkaart .cijfer span {
  color: var(--inkt-zacht);
  margin-inline: 0;
  max-width: 30ch;
}

/* ==================================================================
   11e2. Het resultaat

   Eén nachtblauw blok in het midden van de homepage. Boven staat wat het
   oplevert naast de twee cijfers die dat staven, daaronder in drie kolommen
   waar een ouder het aan merkt. Bewust zonder foto: het blok moet compact
   blijven en de pagina even tot rust brengen.
================================================================== */
.resultaat {
  display: grid;
  gap: var(--r7);
}

@media (min-width: 60em) {
  .resultaat {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--r9);
    align-items: center;
  }
}

.resultaat__cijfers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--r5);
}

.resultaat__cijfers li {
  padding-left: var(--r5);
  border-left: 2px solid color-mix(in srgb, var(--ster-400) 55%, transparent);
}

.resultaat__cijfers b {
  display: block;
  font-family: var(--kop-font);
  font-size: clamp(2.4rem, 1.9rem + 2vw, 3.4rem);
  font-weight: 800;
  font-stretch: 86%;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ster-400);
}

.resultaat__cijfers span {
  display: block;
  margin-top: var(--r2);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--licht-zacht);
  max-width: 30ch;
}

.resultaat__winst {
  list-style: none;
  margin: var(--r8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--r5);
}

@media (min-width: 48em) {
  .resultaat__winst {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--r6);
  }
}

.resultaat__winst li {
  padding-top: var(--r4);
  border-top: 1px solid color-mix(in srgb, var(--licht) 22%, transparent);
}

.resultaat__winst b {
  display: block;
  font-family: var(--kop-font);
  font-size: 1.125rem;
  font-weight: 700;
  font-stretch: 94%;
  color: var(--licht);
}

.resultaat__winst span {
  display: block;
  margin-top: var(--r2);
  font-size: 0.975rem;
  line-height: 1.55;
  color: var(--licht-zacht);
}

/* De uitdaging-sectie draagt veel blokken onder elkaar; met de volle
   sectiemaat erbij wordt dat een pagina lucht. Hier mag het krapper. */
.sectie--uitdaging {
  padding-block: clamp(3rem, 2.25rem + 3vw, 5rem);
}

.sectie--uitdaging .sectiekop {
  max-width: 52ch;
  margin-bottom: var(--r6);
}

.sectie--uitdaging .feit__cijfer {
  margin-bottom: var(--r3);
}

.sectie--uitdaging .minitabel th,
.sectie--uitdaging .minitabel td {
  padding-block: 0.38rem;
}

.sectie--uitdaging .grafiek__tabel {
  margin-top: auto;
}

.sectie--uitdaging .ruimte-boven {
  margin-top: var(--r6);
}

/* ==================================================================
   11e3. De uitdaging-sectie op de scholenpagina

   Drie feitkaarten met een badge in de hoek, daaronder één nachtblauw blok
   waarin staat waarom wij ons ermee bemoeien, en tot slot de eigen cijfers
   met een icoon ernaast.
================================================================== */
.feit {
  position: relative;
}

.feit__badge,
.mengen__badge,
.cijfer__badge {
  display: grid;
  place-items: center;
  border-radius: var(--rond-vol);
  flex: none;
}

/* De badge staat in de hoek van de kaart, naast het cijfer. Het cijfer houdt
   ruimte vrij zodat de twee elkaar op geen enkele breedte raken. */
.feit__badge {
  position: absolute;
  top: var(--r5);
  right: var(--r5);
  width: 2.75rem;
  height: 2.75rem;
  background: color-mix(in srgb, var(--ster-400) 26%, var(--papier));
  color: var(--ster-tekst);
}

.feit__badge svg {
  width: 1.3rem;
  height: 1.3rem;
}

.feit:has(.feit__badge) .feit__cijfer {
  padding-right: 3.5rem;
}

/* Het kleine grafiekicoon voor de tabel-link. Het standaard driehoekje moet
   weg: sinds de summary een flexbox is, telt de marker als flexkind en staat
   hij als los pijltje boven de regel. */
.grafiek__tabel > summary {
  list-style: none;
  gap: 0.45rem;
}

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

.grafiek__tabel > summary::marker {
  content: '';
}

.grafiek__tabel > summary svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

/* --- Het nachtblauwe blok ------------------------------------------- */
.accentblok.accentblok--mengen {
  gap: var(--r6);
  align-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

/* De aantekening hangt in de bovenhoek. `.accentblok > *` zet elk kind op
   relative, dus deze regel heeft de kindcombinator nodig om te winnen. */
.accentblok > .aantekening--hoek {
  position: absolute;
  top: var(--r5);
  right: var(--r6);
  margin: 0;
  max-width: 10rem;
  text-align: right;
  padding-left: 0;
}

.accentblok > .aantekening--hoek::before {
  display: none;
}

.op-goud {
  color: var(--ster-400);
}

.accentblok--mengen .eyebrow {
  margin-bottom: var(--r3);
}

.accentblok--mengen h3 {
  font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.35rem);
  line-height: 1.15;
  margin-bottom: var(--r4);
}

.accentblok--mengen p {
  color: var(--licht-zacht);
  margin-bottom: 0;
  max-width: 48ch;
}

.mengen__punten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--r5);
}

.mengen__punten li {
  text-align: center;
}

.mengen__badge {
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--r3);
  background: var(--nacht-600);
  color: var(--licht);
}

.mengen__badge svg {
  width: 1.4rem;
  height: 1.4rem;
}

.mengen__punten b {
  display: block;
  font-family: var(--kop-font);
  font-size: 1.0625rem;
  font-weight: 700;
  font-stretch: 94%;
  color: var(--licht);
}

.mengen__punten b + span {
  display: block;
  margin-top: var(--r2);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--licht-zacht);
}

@media (min-width: 48em) {
  .mengen__punten {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }

  /* Haarlijnen tussen de drie punten, net als tussen de cijfers elders. */
  .mengen__punten li {
    padding-inline: var(--r4);
  }

  .mengen__punten li + li {
    border-left: 1px solid color-mix(in srgb, var(--licht) 16%, transparent);
  }
}

@media (min-width: 60em) {
  .accentblok.accentblok--mengen {
    grid-template-columns: 0.92fr 1.08fr;
    gap: var(--r7);
  }

  /* Een haarlijn tussen het verhaal en de drie punten. */
  .accentblok.accentblok--mengen .mengen__punten {
    padding-left: var(--r6);
    border-left: 1px solid color-mix(in srgb, var(--licht) 16%, transparent);
  }
}

/* --- De eigen cijfers, met een icoon ernaast ------------------------- */
.cijferkaart .cijfer {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--r4);
  align-items: center;
}

.cijfer__badge {
  grid-row: 1 / span 2;
  width: 3rem;
  height: 3rem;
  background: var(--lucht-50);
  border: 1px solid var(--lucht-100);
  color: var(--nacht-700);
}

.cijfer__badge svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* ==================================================================
   11e4. Tarieven

   Drie kaarten met elk een eigen kleurspoor voor de badge, de vinkjes en het
   prijsvlak, en rechts een foto die in de achtergrond uitvloeit. De kleuren
   zijn gedempte tinten naast het nachtblauw: ze onderscheiden de niveaus
   zonder een tweede merk te worden.
================================================================== */
.sectie--tarieven {
  overflow: hidden;
  /* Krapper dan een gewone sectie: kop, kaarten en proefles-balk horen samen
     op één schermhoogte te passen. */
  padding-block: clamp(1.25rem, 0.75rem + 1.1vw, 2rem);
  background: linear-gradient(112deg, var(--papier) 0%, #fdfbf6 42%, #f7f1e6 100%);
}

.sectie--tarieven .sectiekop {
  margin-bottom: var(--r4);
}

.sectie--tarieven .sectiekop h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
}


/* De foto hoort bij de achtergrond, niet bij de inhoud: hij vloeit naar links
   uit in het vlak en blijft onder alles liggen. Onder 78em is er geen ruimte
   naast de kaarten en blijft hij weg. */
.tarieven__beeld {
  display: none;
}

@media (min-width: 78em) {
  .tarieven__beeld {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 42%;
    pointer-events: none;
  }

  /* Een sluier van de sectiekleur over de foto. Zonder deze laag trekt het
     beeld de aandacht weg van de kaarten; met de sluier blijft het decor. */
  .tarieven__beeld::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      #fdfbf6 0%,
      rgba(253, 251, 246, 0.72) 24%,
      rgba(253, 251, 246, 0.44) 72%,
      rgba(253, 251, 246, 0.38) 100%
    );
  }

  .tarieven__beeld picture,
  .tarieven__beeld img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
  }

  .tarieven__beeld img {
    filter: saturate(0.82);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
  }

  /* De inhoud houdt afstand van de foto, zodat er geen tekst overheen valt. */
  .sectie--tarieven .omhulsel {
    position: relative;
    max-width: calc(var(--breed) - 4rem);
  }

  .sectie--tarieven .sectiekop,
  .sectie--tarieven .tariefraster,
  .sectie--tarieven .proefbalk {
    max-width: 82%;
  }
}

/* Pas hier is er marge over om het blok naar links te schuiven zonder dat de
   linkerkant krap wordt. */
@media (min-width: 82em) {
  .sectie--tarieven .omhulsel {
    translate: -2.5rem 0;
  }
}

.sectie--tarieven .sectiekop p {
  max-width: 46ch;
}

.tariefraster {
  display: grid;
  gap: var(--r5);
}

@media (min-width: 48em) {
  .tariefraster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--r4);
  }
}

/* --- Een tariefkaart ------------------------------------------------- */
.tariefkaart {
  --tarief-badge: var(--lucht-50);
  --tarief-icoon: var(--nacht-700);
  --tarief-vlak: var(--lucht-50);

  display: flex;
  flex-direction: column;
  background: var(--papier);
  border: 1px solid var(--lucht-100);
  border-radius: var(--rond-l);
  padding: 0.85rem var(--r5) var(--r4);
  box-shadow: var(--schaduw-1);
}

.tariefkaart--groen {
  --tarief-badge: #dfeee4;
  --tarief-icoon: #1f6b43;
  --tarief-vlak: #edf6f0;
}

.tariefkaart--blauw {
  --tarief-badge: #dfe9f9;
  --tarief-icoon: #1a4b91;
  --tarief-vlak: #eef4fc;
}

.tariefkaart--amber {
  --tarief-badge: #fbeacd;
  --tarief-icoon: #8a6412;
  --tarief-vlak: #fdf5e6;
}

.tariefkaart__kop {
  display: flex;
  align-items: center;
  gap: var(--r3);
  margin-bottom: var(--r3);
}

.tariefkaart__badge {
  flex: none;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: var(--rond-vol);
  display: grid;
  place-items: center;
  background: var(--tarief-badge);
  color: var(--tarief-icoon);
}

.tariefkaart__badge svg {
  width: 1.5rem;
  height: 1.5rem;
}

.tariefkaart h3 {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.2;
}

.tariefkaart__fase {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  color: var(--inkt-zacht);
}

.tariefkaart__tekst {
  margin: 0 0 var(--r3);
  padding-bottom: var(--r3);
  border-bottom: 1px solid var(--lucht-100);
  font-size: 0.975rem;
  line-height: 1.45;
  color: var(--inkt-zacht);
}

.tariefkaart__punten {
  list-style: none;
  margin: 0 0 var(--r4);
  padding: 0;
  display: grid;
  gap: var(--r2);
  /* Duwt het prijsvlak naar de onderrand, zodat de drie prijzen op één lijn
     staan ook als de ene kaart een regel meer tekst heeft dan de andere. */
  flex-grow: 1;
  align-content: start;
}

.tariefkaart__punten li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--inkt);
}

.tariefkaart__vink {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--rond-vol);
  display: grid;
  place-items: center;
  background: var(--tarief-badge);
  color: var(--tarief-icoon);
}

.tariefkaart__vink svg {
  width: 0.85rem;
  height: 0.85rem;
}

.tariefkaart__prijs {
  margin: 0;
  padding: 0.65rem var(--r3);
  border-radius: var(--rond-m);
  background: var(--tarief-vlak);
  text-align: center;
}

.tariefkaart__prijs b {
  display: block;
  font-family: var(--kop-font);
  font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.05rem);
  font-weight: 800;
  font-stretch: 92%;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--nacht-900);
}

.tariefkaart__prijs span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.95rem;
  color: var(--inkt-zacht);
}

/* --- De proefles-balk eronder ---------------------------------------- */
.proefbalk {
  display: flex;
  align-items: center;
  gap: var(--r4);
  margin-top: var(--r4);
  padding: 0.65rem var(--r5);
  background: var(--papier);
  border: 1px solid var(--lucht-100);
  border-radius: var(--rond-l);
  box-shadow: var(--schaduw-1);
  text-decoration: none;
  transition: transform var(--middel) var(--veer), box-shadow var(--middel) var(--veer),
    border-color var(--middel) var(--veer);
}

.proefbalk:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ster-400) 55%, transparent);
  box-shadow: var(--schaduw-2);
}

.proefbalk__badge {
  flex: none;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: var(--rond-vol);
  display: grid;
  place-items: center;
  background: var(--lucht-50);
  color: var(--nacht-700);
}

.proefbalk__badge svg {
  width: 1.5rem;
  height: 1.5rem;
}

.proefbalk__tekst {
  flex-grow: 1;
  min-width: 0;
}

.proefbalk__tekst b {
  display: block;
  font-family: var(--kop-font);
  font-size: 1.0625rem;
  font-weight: 700;
  font-stretch: 94%;
  color: var(--inkt);
}

.proefbalk__tekst span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.975rem;
  color: var(--inkt-zacht);
}

.proefbalk__pijl {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--nacht-700);
  transition: transform var(--middel) var(--veer);
}

.proefbalk:hover .proefbalk__pijl {
  transform: translateX(4px);
}

/* ==================================================================
   11f. Afsluitend blok op ivoor

   Geen nachtblauwe band maar een warme kaart met een portret, de vraag
   en de twee manieren om te reageren.
================================================================== */
.slotkaart {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--r5);
  align-items: center;
  padding: var(--r5);
  background: color-mix(in srgb, var(--ster-400) 15%, var(--papier));
  border: 1px solid color-mix(in srgb, var(--ster-400) 34%, transparent);
  border-radius: var(--rond-l);
}

.slotkaart__portret {
  border-radius: var(--rond-m);
  overflow: hidden;
  max-width: 13rem;
}

/* Vanaf drie kolommen mag het portret kleiner: de kaart wordt daardoor breder
   verdeeld en een stuk lager — precies de rustige strook die hij moet zijn. */
@media (min-width: 60em) {
  .slotkaart__portret {
    max-width: 8.5rem;
  }

  .slotkaart h2 {
    font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
  }

  .slotkaart p {
    max-width: 62ch;
  }
}

.slotkaart__portret img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.slotkaart h2 {
  margin-bottom: var(--r3);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
}

.slotkaart p {
  margin: 0;
  color: var(--inkt-zacht);
  max-width: 46ch;
}

.slotkaart__acties {
  display: grid;
  gap: var(--r3);
  justify-items: start;
}

.slotkaart__bel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--nacht-800);
  text-decoration: none;
}

.slotkaart__bel svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--ster-tekst);
}

.slotkaart__bel:hover {
  color: var(--nacht-600);
  text-decoration: underline;
}

.slotkaart .ster-deco {
  top: -0.6rem;
  left: 10.5rem;
}

/* ==================================================================
   9c. De hero op een laag scherm

   De hero en de kenmerkenrij horen samen op het eerste scherm te passen.
   Op een ruime monitor mag alles genereus zijn; op een laptop van 768 of
   720 pixels hoog moet het krimpen. Daarom kijken we hier naar de
   schermhóógte in plaats van alleen naar de breedte — een breed maar laag
   scherm is precies het geval dat misging.
================================================================== */
@media (min-width: 60em) and (max-height: 880px) {
  .hero {
    padding-block: calc(var(--kop-hoogte) + 1.6rem) 3.25rem;
  }

  .hero--groot h1 {
    font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.4rem);
  }

  .hero__tekst > .lead {
    margin-top: 0.85rem;
    font-size: 1.1rem;
  }

  .hero .knoppen {
    margin-top: 1.4rem;
  }

  .hero .aantekening {
    margin-top: 0.85rem;
  }

  .kenmerken {
    padding-block: 1.5rem;
  }
}

/* Nog korter scherm — een kleine laptop. Dan gaat er nog een slag af. */
@media (min-width: 60em) and (max-height: 700px) {
  .hero {
    padding-block: calc(var(--kop-hoogte) + 1.1rem) 2.5rem;
  }

  .hero--groot h1 {
    font-size: clamp(2rem, 1.1rem + 2.4vw, 2.9rem);
  }

  .hero__tekst > .lead {
    font-size: 1.0625rem;
  }

  .kenmerken {
    padding-block: 1.15rem;
  }
}

/* ==================================================================
   10. Kaarten
================================================================== */
.raster {
  display: grid;
  gap: var(--r5);
}

.kaart {
  position: relative;
  background: var(--papier);
  border: 1px solid var(--lucht-100);
  border-radius: var(--rond-m);
  padding: var(--r5);
  box-shadow: var(--schaduw-1);
  transition: transform var(--middel) var(--veer), box-shadow var(--middel) var(--veer),
    border-color var(--middel) var(--veer);
}

.kaart:hover {
  transform: translateY(-3px);
  box-shadow: var(--schaduw-2);
  border-color: color-mix(in srgb, var(--ster-400) 45%, transparent);
}

.kaart h3 {
  margin-bottom: var(--r2);
}

.kaart p {
  margin-bottom: 0;
  color: var(--inkt-zacht);
  font-size: 1rem;
}

.kaart__badge {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: var(--rond-vol);
  display: grid;
  place-items: center;
  background: var(--lucht-50);
  border: 1px solid var(--lucht-100);
  color: var(--nacht-700);
  margin-bottom: var(--r4);
  transition: background-color var(--middel) var(--veer), color var(--middel) var(--veer),
    transform var(--middel) var(--veer), border-color var(--middel) var(--veer);
}

.kaart__badge svg {
  width: 1.5rem;
  height: 1.5rem;
}

.kaart:hover .kaart__badge {
  background: var(--ster-400);
  border-color: var(--ster-500);
  color: var(--nacht-900);
  transform: rotate(-6deg);
}

.kaart__link {
  margin-top: var(--r4);
  display: inline-flex;
}

/* Een kaart die in zijn geheel klikbaar is: de link spant zich over de
   hele kaart, maar de tekst blijft selecteerbaar. */
/* De uitgelichte kaart: geen zoveelste witte kaart maar het gouden vlak van
   het merk. Alles erin wordt nachtblauw, want goud draagt alleen donkere
   tekst — een witte letter haalt er nooit 4,5:1 op. */
.kaart--goud {
  background: var(--ster-400);
  border-color: color-mix(in srgb, var(--ster-500) 70%, transparent);
  box-shadow: var(--schaduw-2);
}

.kaart--goud h3 {
  color: var(--nacht-900);
}

.kaart--goud p {
  color: var(--nacht-800);
}

.kaart--goud .kaart__badge {
  background: var(--nacht-900);
  border-color: var(--nacht-900);
  color: var(--ster-400);
}

.kaart--goud .pijllink {
  color: var(--nacht-900);
  border-bottom-color: color-mix(in srgb, var(--nacht-900) 45%, transparent);
}

.kaart--goud:hover .kaart__badge {
  background: var(--nacht-800);
}

.kaart--klikbaar .kaart__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Ruimere variant voor pagina's waar een kaart de hele uitleg draagt
   en er dus meer tekst in staat dan op de home. */
.kaart--ruim {
  padding: var(--r6);
}

.kaart--ruim h3 {
  margin-bottom: var(--r3);
}

.kaart--ruim p {
  font-size: 1.0625rem;
}

.kaart--nacht {
  background: var(--nacht-800);
  border-color: color-mix(in srgb, var(--ster-400) 20%, transparent);
  color: var(--licht);
}

.kaart--nacht h3 {
  color: var(--licht);
}

.kaart--nacht p {
  color: var(--licht-zacht);
}

.kaart--nacht .kaart__badge {
  background: color-mix(in srgb, var(--ster-400) 15%, transparent);
  border-color: color-mix(in srgb, var(--ster-400) 34%, transparent);
  color: var(--ster-400);
}

/* Doelgroepkaart: groter, met een cijfer of pictogram bovenaan. */
.doelgroep {
  display: flex;
  flex-direction: column;
  gap: var(--r3);
  padding: var(--r6) var(--r5);
  background: var(--papier);
  border: 1px solid var(--lucht-100);
  border-radius: var(--rond-l);
  box-shadow: var(--schaduw-1);
  transition: transform var(--middel) var(--veer), box-shadow var(--middel) var(--veer);
}

.doelgroep:hover {
  transform: translateY(-3px);
  box-shadow: var(--schaduw-2);
}

.doelgroep__badge {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: var(--rond-m);
  display: grid;
  place-items: center;
  background: var(--lucht-50);
  border: 1px solid var(--lucht-100);
  color: var(--nacht-700);
}

.doelgroep__badge svg {
  width: 1.7rem;
  height: 1.7rem;
}

.doelgroep h3 {
  margin: 0;
}

.doelgroep p {
  margin: 0;
  color: var(--inkt-zacht);
  font-size: 1rem;
}

.doelgroep__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ster-tekst);
  letter-spacing: 0.02em;
}

/* Pillenrij, zoals in de mockup onder de introductie. */
.pillen {
  list-style: none;
  margin: var(--r5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--r2);
}

.pil {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--rond-vol);
  background: var(--lucht-50);
  border: 1px solid var(--lucht-100);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--nacht-800);
}

.pil--nacht {
  background: var(--nacht-800);
  border-color: var(--nacht-700);
  color: var(--licht);
}

.pil::before {
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  flex: none;
  background: var(--ster-400);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

/* ==================================================================
   11. Stappen
================================================================== */
.stappen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--r6);
  counter-reset: stap;
}

.stap {
  position: relative;
  counter-increment: stap;
  padding-left: 4.25rem;
}

.stap__nummer {
  position: absolute;
  left: 0;
  top: 0;
  width: 3rem;
  height: 3rem;
  border-radius: var(--rond-vol);
  display: grid;
  place-items: center;
  background: var(--ster-400);
  color: var(--nacht-900);
  font-family: var(--kop-font);
  font-size: 1.2rem;
  font-weight: 800;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ster-400) 16%, transparent);
}

.stap h3 {
  margin-bottom: var(--r2);
}

.stap p {
  margin-bottom: 0;
  color: var(--inkt-zacht);
}

.sectie--nacht .stap p,
.op-nacht .stap p {
  color: var(--licht-zacht);
}

/* De verbindingslijn tussen de stappen. */
.stap::before {
  content: '';
  position: absolute;
  left: 1.5rem;
  top: 3.4rem;
  bottom: -2.2rem;
  width: 2px;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--ster-400) 55%, transparent),
    transparent
  );
}

.stap:last-child::before {
  display: none;
}

/* ==================================================================
   11b. Overgang: van ondersteuning naar groei

   Twee blokken met een pijl ertussen. De pijl staat op mobiel onder
   elkaar (naar beneden gedraaid) en op desktop ertussen.
================================================================== */
.overgang {
  display: grid;
  gap: var(--r4);
  align-items: stretch;
}

.overgang__blok {
  background: var(--papier);
  border: 1px solid var(--lucht-100);
  border-radius: var(--rond-l);
  padding: var(--r6) var(--r5);
}

.overgang__blok h3 {
  margin-bottom: var(--r4);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  font-family: var(--tekst-font);
}

.overgang__blok--goud {
  background: var(--ster-vlak);
  border-color: color-mix(in srgb, var(--ster-400) 40%, transparent);
}

.overgang__blok--goud h3 {
  color: var(--ster-tekst);
}

.overgang__pijl {
  display: grid;
  place-items: center;
  color: var(--ster-500);
}

.overgang__pijl svg {
  width: 2rem;
  height: 2rem;
  transform: rotate(90deg);
}

/* ==================================================================
   12. Crèmeblok en accentblok
================================================================== */
.creme {
  background: var(--ster-vlak);
  border: 1px solid color-mix(in srgb, var(--ster-400) 35%, transparent);
  border-radius: var(--rond-l);
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  display: grid;
  gap: var(--r6);
  align-items: center;
}

.creme h2,
.creme h3 {
  margin-top: 0;
}

.creme p {
  color: var(--inkt-zacht);
}

.creme__beeld img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--rond-m);
  box-shadow: var(--schaduw-1);
}

/* Donker accentblok, zoals het 'persoonlijke aandacht'-blok in de mockup. */
.accentblok {
  position: relative;
  overflow: hidden;
  background-color: var(--nacht-900);
  color: var(--licht);
  border-radius: var(--rond-l);
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  display: grid;
  gap: var(--r5);
  align-items: center;
}

.accentblok::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
      60% 100% at 4% 0%,
      color-mix(in srgb, var(--nacht-700) 75%, transparent),
      transparent 70%
    ),
    var(--ruis);
  background-size: auto, 200px 200px;
  pointer-events: none;
}

.accentblok > * {
  position: relative;
}

.accentblok h2,
.accentblok h3 {
  color: var(--licht);
  margin-top: 0;
}

.accentblok p {
  color: var(--licht-zacht);
}

.accentblok__ster {
  width: 3.5rem;
  height: auto;
  flex: none;
}

/* ==================================================================
   11c. Feiten en de grafiek

   Drie panelen naast elkaar: een cijfer, de reeks over de tijd, en de
   regiotabel. Zie de opmerking in voor-scholen.html voor de kleurkeuze
   in de grafiek.
================================================================== */
.feitenraster {
  display: grid;
  gap: var(--r5);
  /* Even hoog. Bij `start` bepaalde elke kaart zijn eigen hoogte en stonden er
     gaten van honderden pixels tussen de onderranden. */
  align-items: stretch;
}

.feit,
.grafiek {
  display: flex;
  flex-direction: column;
}

/* De bronregel zakt naar de onderrand, zodat de drie kaarten ook vanbinnen
   op dezelfde lijn eindigen. */
.feit__bron {
  margin-top: auto;
  padding-top: var(--r4);
  margin-bottom: 0;
}

.feit,
.grafiek {
  background: var(--papier);
  border: 1px solid var(--lucht-100);
  border-radius: var(--rond-l);
  padding: var(--r6) var(--r5);
  box-shadow: var(--schaduw-1);
}

.feit p {
  margin-bottom: var(--r3);
  font-size: 1rem;
  color: var(--inkt-zacht);
}

.feit p:last-child {
  margin-bottom: 0;
}

.feit__cijfer {
  display: block;
  font-family: var(--kop-font);
  font-size: clamp(2.6rem, 2.1rem + 2vw, 3.4rem);
  font-weight: 800;
  font-stretch: 86%;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--nacht-800);
  margin-bottom: var(--r4);
}

.grafiek {
  margin: 0;
  display: grid;
  gap: var(--r4);
}

.grafiek__titel {
  order: -1;
  font-family: var(--tekst-font);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  line-height: 1.45;
}

.grafiek__svg {
  width: 100%;
  height: auto;
}

.grafiek__tabel > summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nacht-700);
}

.grafiek__tabel > summary:hover {
  color: var(--nacht-600);
}

.grafiek__tabel table,
.minitabel {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--r3);
  font-size: 0.95rem;
}

.grafiek__tabel caption,
.minitabel caption {
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  padding-bottom: var(--r2);
}

.grafiek__tabel th,
.grafiek__tabel td,
.minitabel th,
.minitabel td {
  text-align: left;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--lucht-100);
  font-weight: 400;
  color: var(--inkt);
}

.grafiek__tabel td,
.minitabel td {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.minitabel {
  margin-bottom: var(--r4);
}

/* ==================================================================
   12b. Ervaringen van ouders

   Een spoor dat horizontaal schuift. Op een breed scherm passen alle drie de
   kaarten naast elkaar; smaller wordt het een veegbare rij. De grafische
   franje — een gele vorm rechts, streepjes links, twee pijlknoppen — is eruit:
   de citaten dragen de sectie zelf, en zonder die ballast kan de sectie ook
   flink strakker staan.
================================================================== */
.ervaringen {
  position: relative;
  overflow: hidden;
  background: var(--papier-zacht);
  /* Onderaan iets minder, want het spoor draagt zelf al 1,5rem binnenruimte
     zodat de schaduw van de kaarten niet door de overflow wordt afgesneden. */
  padding-block: clamp(3rem, 2.25rem + 3vw, 5rem) clamp(2rem, 1.25rem + 2.4vw, 3.5rem);
}

.ervaringen > * {
  position: relative;
}

.ervaringen__kop {
  display: grid;
  gap: var(--r5);
  align-items: end;
  margin-bottom: var(--r6);
}

.ervaringen__kop .sectiekop {
  margin-bottom: 0;
}

.spoor {
  list-style: none;
  /* Ruimte zodat de schaduw van de kaarten niet door de overflow wordt
     afgesneden, met een negatieve marge die hem weer opheft. De
     scroll-padding hoort erbij: zonder die regel telt scroll-snap de
     binnenruimte mee en begint het spoor 14px verschoven. */
  margin: -1.5rem -0.85rem 0;
  padding: 1.5rem 0.85rem var(--r5);
  scroll-padding-inline: 0.85rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(21rem, 82vw), 1fr);
  gap: var(--r5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

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

.spoor > li {
  display: flex;
  scroll-snap-align: start;
}

.spoor > li > .quote {
  flex: 1;
}

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--r4);
  margin: 0;
  padding: var(--r6) var(--r5) var(--r5);
  background: var(--papier);
  border-radius: var(--rond-l);
  box-shadow: var(--schaduw-2);
}

.quote__teken {
  font-family: var(--kop-font);
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 0.6;
  color: var(--ster-400);
  height: 2rem;
}

.quote blockquote {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--inkt);
}

.quote blockquote p {
  margin: 0;
}

.quote__sterren {
  margin: auto 0 0;
}

/* De sterren zaten als inline-spans in een geneste span; inline-elementen
   negeren breedte en hoogte, dus ze waren er wel maar onzichtbaar. */
.quote__sterrij {
  display: flex;
  gap: 0.2rem;
}

.quote__ster {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  background: var(--ster-400);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

.quote figcaption {
  font-size: 0.95rem;
  color: var(--inkt-zacht);
  line-height: 1.45;
}

.quote figcaption b {
  display: block;
  font-family: var(--kop-font);
  font-size: 1.05rem;
  font-weight: 700;
  font-stretch: 94%;
  color: var(--inkt);
}

/* ==================================================================
   12c. Cijferstrook
================================================================== */
.cijfers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--r6);
  text-align: center;
}

.cijfer b {
  display: block;
  font-family: var(--kop-font);
  font-size: clamp(2.6rem, 2rem + 2.4vw, 3.75rem);
  font-weight: 800;
  font-stretch: 86%;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ster-400);
}

.cijfer span {
  display: block;
  margin-top: var(--r3);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--licht-zacht);
  max-width: 24ch;
  margin-inline: auto;
}

/* ==================================================================
   13. Team en waarden
================================================================== */
.teamkaart {
  background: var(--papier);
  border: 1px solid var(--lucht-100);
  border-radius: var(--rond-l);
  overflow: hidden;
  box-shadow: var(--schaduw-1);
  display: flex;
  flex-direction: column;
  transition: transform var(--middel) var(--veer), box-shadow var(--middel) var(--veer);
}

.teamkaart:hover {
  transform: translateY(-3px);
  box-shadow: var(--schaduw-2);
}

.teamkaart__portret {
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, var(--lucht-50), var(--lucht-100));
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--lucht-100);
}

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

/* De plaatshouder zolang er geen portret is: het merkteken op papier,
   niet een grijze silhouetfoto van iemand die hier niet werkt. */
.teamkaart__leeg {
  width: 4.5rem;
  height: auto;
  opacity: 0.55;
}

.teamkaart__tekst {
  padding: var(--r5);
  display: grid;
  gap: var(--r2);
}

.teamkaart h3 {
  margin: 0;
}

.teamkaart__rol {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ster-tekst);
  letter-spacing: 0.02em;
}

.teamkaart p {
  margin: 0;
  font-size: 1rem;
  color: var(--inkt-zacht);
}

.waarde {
  display: grid;
  gap: var(--r3);
}

.waarde__badge {
  width: 3rem;
  height: 3rem;
  border-radius: var(--rond-vol);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--ster-400) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--ster-400) 36%, transparent);
  color: var(--ster-400);
}

.waarde__badge svg {
  width: 1.4rem;
  height: 1.4rem;
}

.waarde h3 {
  margin: 0;
}

.waarde p {
  margin: 0;
  font-size: 1rem;
}

/* ==================================================================
   14. Veelgestelde vragen — <details>, dus ook zonder JavaScript
================================================================== */
.vragen {
  display: grid;
  gap: var(--r3);
  max-width: var(--smal);
}

.vraag {
  background: var(--papier);
  border: 1px solid var(--lucht-100);
  border-radius: var(--rond-m);
  overflow: hidden;
  transition: border-color var(--snel) var(--veer), box-shadow var(--snel) var(--veer);
}

.vraag[open] {
  border-color: color-mix(in srgb, var(--ster-400) 45%, transparent);
  box-shadow: var(--schaduw-1);
}

.vraag > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r4);
  padding: var(--r4) var(--r5);
  cursor: pointer;
  list-style: none;
  font-family: var(--kop-font);
  font-size: 1.0625rem;
  font-weight: 700;
  font-stretch: 94%;
  color: var(--inkt);
}

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

.vraag > summary:hover {
  background: var(--lucht-50);
}

.vraag__teken {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: var(--rond-vol);
  background: var(--lucht-50);
  border: 1px solid var(--lucht-100);
  transition: transform var(--middel) var(--veer), background-color var(--middel) var(--veer);
}

.vraag__teken svg {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--nacht-700);
}

.vraag[open] .vraag__teken {
  transform: rotate(45deg);
  background: var(--ster-400);
  border-color: var(--ster-500);
}

.vraag__antwoord {
  padding: 0 var(--r5) var(--r5);
  color: var(--inkt-zacht);
}

/* ==================================================================
   15. CTA-blok
================================================================== */
.cta {
  position: relative;
  overflow: hidden;
  background-color: var(--nacht-900);
  color: var(--licht);
  padding-block: var(--sectie);
}

.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
      60% 110% at 50% 120%,
      color-mix(in srgb, var(--nacht-700) 85%, transparent),
      transparent 70%
    ),
    radial-gradient(
      40% 70% at 88% -10%,
      color-mix(in srgb, var(--ster-400) 14%, transparent),
      transparent 70%
    ),
    var(--ruis);
  background-size: auto, auto, 200px 200px;
  pointer-events: none;
}

.cta__binnen {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}

.cta h2 {
  color: var(--licht);
}

.cta p {
  color: var(--licht-zacht);
  margin-inline: auto;
}

.cta .eyebrow {
  justify-content: center;
}

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

/* ==================================================================
   16. Contact
================================================================== */
.contact-raster {
  display: grid;
  gap: var(--r6);
  align-items: start;
}

/* De aantekening en het formulier staan samen in de rechterkolom, zodat de
   notitie boven het formulier hangt in plaats van onderaan de contactgegevens
   ernaast. */
.contact-raster__kolom {
  display: grid;
  gap: var(--r4);
}

.aantekening--boven-formulier {
  margin-top: 0;
}

.contactkaart {
  background: var(--papier);
  border: 1px solid var(--lucht-100);
  border-radius: var(--rond-l);
  padding: var(--r6);
  box-shadow: var(--schaduw-1);
  display: grid;
  gap: var(--r5);
}

.contactrij {
  display: flex;
  align-items: flex-start;
  gap: var(--r4);
}

.contactrij__badge {
  flex: none;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: var(--rond-m);
  display: grid;
  place-items: center;
  background: var(--lucht-50);
  border: 1px solid var(--lucht-100);
  color: var(--nacht-700);
}

.contactrij__badge svg {
  width: 1.4rem;
  height: 1.4rem;
}

.contactrij b {
  display: block;
  font-family: var(--kop-font);
  font-size: 1.05rem;
  font-weight: 700;
  font-stretch: 94%;
  line-height: 1.3;
}

.contactrij p,
.contactrij span:not(.contactrij__badge) {
  display: block;
  margin: 0.15rem 0 0;
  font-size: 0.97rem;
  color: var(--inkt-zacht);
  line-height: 1.5;
}

.contactrij a {
  color: var(--nacht-700);
  font-weight: 600;
}

/* ==================================================================
   17. Formulier
================================================================== */
.formulier {
  background: var(--papier);
  border: 1px solid var(--lucht-100);
  border-radius: var(--rond-l);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  box-shadow: var(--schaduw-2);
  display: grid;
  gap: var(--r5);
}

.formulier__kop h2 {
  margin-bottom: var(--r2);
}

.formulier__kop p {
  margin: 0;
  color: var(--inkt-zacht);
  font-size: 1rem;
}

.veldgroep {
  display: grid;
  gap: var(--r4);
}

.veldgroep__titel {
  font-family: var(--tekst-font);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ster-tekst);
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: grid;
  gap: var(--r4);
}

.veld {
  display: grid;
  gap: 0.4rem;
}

.veld > label,
.veld__label {
  font-size: 0.925rem;
  font-weight: 600;
  color: var(--inkt);
}

.veld__hint {
  font-size: 0.85rem;
  color: var(--inkt-zacht);
}

.veld input,
.veld select,
.veld textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  background: var(--papier);
  border: 1.5px solid var(--lucht-100);
  border-radius: var(--rond-s);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--snel) var(--veer), box-shadow var(--snel) var(--veer);
}

.veld input:hover,
.veld select:hover,
.veld textarea:hover {
  border-color: var(--lucht-200);
}

.veld input:focus,
.veld select:focus,
.veld textarea:focus {
  outline: none;
  border-color: var(--nacht-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nacht-600) 22%, transparent);
}

.veld textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.veld select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348597A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.15rem;
  padding-right: 2.6rem;
}

.veld__fout {
  font-size: 0.875rem;
  font-weight: 600;
  color: #a4161a;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.veld__fout:empty {
  display: none;
}

.veld__fout::before {
  content: '';
  width: 1rem;
  height: 1rem;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 5a1.2 1.2 0 0 1 1.2 1.2v5.1a1.2 1.2 0 0 1-2.4 0V8.2A1.2 1.2 0 0 1 12 7Zm0 9.2a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8Z'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 5a1.2 1.2 0 0 1 1.2 1.2v5.1a1.2 1.2 0 0 1-2.4 0V8.2A1.2 1.2 0 0 1 12 7Zm0 9.2a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8Z'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

.veld--fout input,
.veld--fout select,
.veld--fout textarea {
  border-color: #a4161a;
}

.veld--fout input:focus,
.veld--fout select:focus,
.veld--fout textarea:focus {
  box-shadow: 0 0 0 3px rgba(164, 22, 26, 0.2);
}

/* De keuzelijst voor het type begeleiding: zelfstandige, grote
   raakvlakken in plaats van kleine vinkjes. */
.keuzes-veld {
  display: grid;
  gap: 0.5rem;
}

.keuzes-veld > .veld__label {
  font-size: 0.925rem;
  font-weight: 600;
  color: var(--inkt);
}

.keuzes-veld.veld--fout .keuze {
  border-color: #d98a8c;
}

.keuzes {
  display: grid;
  gap: var(--r2);
}

.keuze {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.8rem 0.95rem;
  border: 1.5px solid var(--lucht-100);
  border-radius: var(--rond-s);
  cursor: pointer;
  font-size: 0.97rem;
  line-height: 1.4;
  transition: border-color var(--snel) var(--veer), background-color var(--snel) var(--veer);
}

.keuze:hover {
  border-color: var(--lucht-200);
  background: var(--lucht-50);
}

.keuze input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  accent-color: var(--nacht-700);
  flex: none;
}

.keuze:has(input:checked) {
  border-color: var(--nacht-600);
  background: var(--lucht-50);
}

.keuze:has(input:focus-visible) {
  outline: 3px solid var(--nacht-600);
  outline-offset: 2px;
}

.toestemming {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.925rem;
  line-height: 1.5;
  color: var(--inkt-zacht);
}

.toestemming input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  accent-color: var(--nacht-700);
  flex: none;
}

/* Het honeypot-veld van Formspree: onzichtbaar voor mensen, wel invulbaar
   voor bots. Niet display:none — dat slaan sommige bots juist over. */
.honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.formulier__verzend {
  display: grid;
  gap: var(--r3);
}

.formulier__verzend .knop {
  width: 100%;
}

.knop[aria-busy='true'],
.knop:disabled {
  opacity: 0.72;
  cursor: progress;
  transform: none;
}

.knop__spinner {
  display: none;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid color-mix(in srgb, var(--nacht-900) 30%, transparent);
  border-top-color: var(--nacht-900);
  border-radius: 50%;
  animation: draai 700ms linear infinite;
}

.knop[aria-busy='true'] .knop__spinner {
  display: block;
}

.knop[aria-busy='true'] .knop__pijl {
  display: none;
}

@keyframes draai {
  to {
    transform: rotate(360deg);
  }
}

/* De statusmelding. Leeg is onzichtbaar; er verschijnt nooit een
   succesmelding zonder dat er echt iets verstuurd is. */
.melding {
  display: none;
  gap: 0.75rem;
  align-items: flex-start;
  padding: var(--r4);
  border-radius: var(--rond-m);
  font-size: 0.97rem;
  line-height: 1.55;
}

.melding.is-zichtbaar {
  display: flex;
}

.melding__teken {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.1rem;
}

.melding--goed {
  background: #eaf6ee;
  border: 1px solid #a8d5b8;
  color: #17502c;
}

.melding--fout {
  background: #fdecec;
  border: 1px solid #f0b4b4;
  color: #8a1215;
}

.melding a {
  color: inherit;
  font-weight: 700;
}

/* ==================================================================
   18. Footer
================================================================== */
.voet {
  position: relative;
  background-color: var(--nacht-900);
  color: var(--licht-zacht);
  padding-top: var(--r9);
  padding-bottom: var(--r6);
  overflow: hidden;
}

.voet::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
      55% 80% at 90% 0%,
      color-mix(in srgb, var(--nacht-700) 60%, transparent),
      transparent 70%
    ),
    var(--ruis);
  background-size: auto, 200px 200px;
  pointer-events: none;
}

.voet__binnen {
  position: relative;
  z-index: 1;
  max-width: var(--breed);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.voet__boven {
  display: grid;
  gap: var(--r6);
  padding-bottom: var(--r6);
  border-bottom: 1px solid color-mix(in srgb, var(--licht) 12%, transparent);
}

.voet__merk {
  max-width: 24rem;
}

.voet__merk-rij {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  margin-bottom: var(--r4);
}

.voet__merk-rij img {
  width: 2.9rem;
}

.voet__merk p {
  font-size: 0.97rem;
  color: var(--licht-zacht);
}

/* Op een smal scherm staan 'Begeleiding' en 'Sterren van Straks' naast
   elkaar; ze hebben allebei maar drie korte links, dus dat scheelt een flinke
   lap hoogte. Contact heeft langere regels en krijgt de volle breedte. Vanaf
   78em gaat het weer naar drie kolommen. */
.voet__kolommen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--r5) var(--r5);
}

.voet__kolommen > :last-child {
  grid-column: 1 / -1;
}

/* 'Sterren van Straks' loopt in een smalle kolom over twee regels en 'Contact'
   niet; zonder ondergrens beginnen de lijsten ernaast dan op verschillende
   hoogtes. Twee regels ruimte reserveren houdt ze op één lijn. */
.voet h2,
.voet__titel {
  min-height: 2.2em;
  font-family: var(--kop-font);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ster-400);
  margin: 0 0 var(--r4);
}

/* In twee kolommen naast elkaar is 'STERREN VAN STRAKS' met de volle
   letterafstand net te breed voor één regel; dan staan de twee lijsten
   ernaast niet meer op dezelfde hoogte. Iets krapper past het wel. */
@media (max-width: 30em) {
  .voet__titel {
    font-size: 0.75rem;
    letter-spacing: 0.07em;
  }
}

.voet ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.voet a {
  color: var(--licht-zacht);
  text-decoration: none;
  font-size: 0.97rem;
  transition: color var(--snel) var(--veer);
}

.voet a:hover {
  color: var(--ster-400);
}

.voet__regel {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.97rem;
  line-height: 1.5;
}

.voet__regel svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  margin-top: 0.2em;
  color: var(--ster-400);
}

.voet__onder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--r5);
  font-size: 0.875rem;
}

.voet__onder p {
  margin: 0;
  color: var(--licht-zacht);
}

.voet__onder ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r4);
}

/* De bouwerregel hoort bij de kleine lettertjes: een tint doffer dan de rest
   van de onderste balk, zodat hij er staat zonder aandacht te vragen. Doffer
   dan dit kan niet: hier haalt hij nog net 4,5:1 op het nachtblauw. */
.voet__bouwer {
  color: color-mix(in srgb, var(--licht-zacht) 62%, transparent);
}

.voet__bouwer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--licht-zacht) 24%, transparent);
  transition: color var(--snel) var(--veer), border-color var(--snel) var(--veer);
}

.voet__bouwer a:hover {
  color: var(--ster-400);
  border-bottom-color: color-mix(in srgb, var(--ster-400) 55%, transparent);
}

/* ==================================================================
   19. Tikdoelen op een aanraakscherm

   Vier links en knoppen halen op hun eigen regelhoogte de 44px niet die een
   vinger nodig heeft. Ze krijgen daarom een ondergrens zonder dat het beeld
   verandert: de tekst blijft staan waar hij stond, het raakvlak groeit.
   Alleen op een grof aanwijsapparaat, zodat de muisweergave niet oprekt.
================================================================== */
@media (pointer: coarse), (max-width: 59.999em) {
  .pijllink,
  .slotkaart__bel,
  .menu__merk {
    min-height: 2.75rem;
  }

  .grafiek__tabel > summary {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
  }
}

/* ==================================================================
   20. Tekstpagina (privacyverklaring)
================================================================== */
.tekstpagina h2 {
  margin-top: var(--r7);
}

.tekstpagina h3 {
  margin-top: var(--r6);
}

.tekstpagina ul {
  margin: 0 0 var(--r4);
  padding-left: 1.3rem;
  max-width: 68ch;
}

.tekstpagina li {
  margin-bottom: 0.45rem;
}

/* ==================================================================
   21. Motion — reveals
   .onthul verbergt alleen iets als JavaScript draait. De klasse js
   wordt door een inline script in de <head> gezet, dus vóór de eerste
   verf: geen flits, en zonder JS staat alles gewoon zichtbaar.
================================================================== */
.js .onthul {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--middel) var(--veer), transform var(--middel) var(--veer);
  transition-delay: var(--vertraging, 0ms);
  will-change: opacity, transform;
}

.js .onthul.is-zichtbaar {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ==================================================================
   22. Motion — de hero bij het laden
   Vier bewegingen, één orkestratie, samen 1,1 seconde. Daarna is het
   stil. Zie DESIGN.md §8.
================================================================== */
@keyframes hero-beeld {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
}

@keyframes hero-op {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes hero-kop {
  from {
    opacity: 0;
    transform: translateY(26px);
    font-stretch: 82%;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    font-stretch: 86%;
  }
}

@keyframes hero-ster {
  from {
    opacity: 0;
    transform: rotate(-18deg) scale(0.7);
  }
}

/* De inzoom hoort op de fóto, niet op het vlak eromheen. Stond hij op
   `.hero__vlak`, dan schaalde dat nachtblauwe vlak mee en stak het tijdens de
   animatie een paar tientallen pixels ónder de hero uit: een blauwe balk die
   over de sectie eronder viel en daarna weer weg klapte. De foto zit binnen de
   `overflow: hidden` van het vlak en wordt dus netjes bijgesneden. */
.js .hero__vlak picture {
  animation: hero-beeld var(--traag) var(--veer) both;
}

.js .hero .eyebrow {
  animation: hero-op var(--middel) var(--veer) 90ms both;
}

.js .hero h1 {
  animation: hero-kop var(--traag) var(--veer) 160ms both;
}

.js .hero__tekst > .lead {
  animation: hero-op var(--middel) var(--veer) 260ms both;
}

.js .hero .knoppen .knop:nth-child(1) {
  animation: hero-op var(--middel) var(--veer) 340ms both;
}

.js .hero .knoppen .knop:nth-child(2) {
  animation: hero-op var(--middel) var(--veer) 420ms both;
}

.js .hero .aantekening {
  animation: hero-op var(--middel) var(--veer) 520ms both;
}

.js .hero .ster-deco {
  animation: hero-ster var(--traag) var(--veer) 500ms both;
}

/* De kenmerkenrij hoort bij de hero. Hij komt daarom mee op bij het laden
   en wacht niet tot er gescrold is — ook niet als hij onder de vouw staat. */
.js .kenmerk:nth-child(1) {
  animation: hero-op var(--middel) var(--veer) 480ms both;
}

.js .kenmerk:nth-child(2) {
  animation: hero-op var(--middel) var(--veer) 550ms both;
}

.js .kenmerk:nth-child(3) {
  animation: hero-op var(--middel) var(--veer) 620ms both;
}

/* ==================================================================
   23. Breekpunten
================================================================== */
@media (min-width: 40em) {
  .knoppen .knop {
    flex: 0 0 auto;
  }

  .raster--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .raster--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .raster--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .raster--5 {
    grid-template-columns: repeat(2, 1fr);
  }

  .formulier__verzend {
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .formulier__verzend .knop {
    width: auto;
  }

  .veldgroep--twee {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 60em) {
  .raster--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .raster--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .raster--5 {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--r4);
  }

  .cijferkaart .cijfers {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }

  .cijferkaart .cijfer {
    padding-inline: var(--r5);
  }

  .cijferkaart .cijfer:first-child {
    padding-left: 0;
  }

  .cijferkaart .cijfer:last-child {
    padding-right: 0;
  }

  .cijferkaart .cijfer + .cijfer {
    border-left: 1px solid var(--lucht-100);
  }

  .slotkaart {
    grid-template-columns: auto 1fr auto;
    gap: var(--r7);
    padding: var(--r6);
  }

  .raster--5 .kaart {
    padding: var(--r4);
  }

  .raster--5 .kaart h3 {
    font-size: 1.0625rem;
    line-height: 1.3;
  }

  .raster--5 .kaart p {
    font-size: 0.925rem;
  }

  .raster--5 .kaart__badge {
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: var(--r3);
  }

  .raster--5 .kaart__badge svg {
    width: 1.3rem;
    height: 1.3rem;
  }

  .raster--5 .pijllink {
    font-size: 0.9rem;
  }

  .cijfers {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--r7);
  }

  .kenmerken__lijst {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }

  .ervaringen__kop {
    gap: var(--r6);
  }

  .spoor {
    grid-auto-columns: minmax(0, 1fr);
  }

  .kenmerk {
    padding-inline: var(--r5);
    justify-content: center;
  }

  .kenmerk + .kenmerk {
    border-left: 1px solid var(--lucht-100);
  }

  .kenmerken__lijst {
    align-items: stretch;
  }

  .feitenraster {
    grid-template-columns: 0.92fr 1.22fr 1.02fr;
    gap: var(--r5);
  }

  .duo {
    grid-template-columns: 1fr 1fr;
    gap: var(--r8);
  }

  .duo--omgekeerd .duo__beeld {
    order: -1;
  }

  .duo--breed-beeld {
    grid-template-columns: 1fr 1fr;
  }

  .duo--kaart {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }

  .creme {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .accentblok {
    grid-template-columns: auto 1fr auto;
    gap: var(--r6);
  }

  .overgang {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--r5);
  }

  .overgang__pijl svg {
    transform: none;
  }

  .stappen--horizontaal,
  .stappen--vier {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--r5);
  }

  .stappen--vier {
    grid-template-columns: repeat(4, 1fr);
  }

  .stappen--horizontaal .stap,
  .stappen--vier .stap {
    padding-left: 0;
    padding-top: 4.25rem;
  }

  .stappen--vier .stap::before,
  .stappen--horizontaal .stap::before {
    left: 3.4rem;
    right: -1.5rem;
    top: 1.5rem;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(
      to right,
      color-mix(in srgb, var(--ster-400) 55%, transparent),
      transparent
    );
  }

  .contact-raster {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--r8);
  }
}

@media (min-width: 78em) {
  .voet__boven {
    grid-template-columns: 1fr 1.3fr;
    gap: var(--r8);
  }

  .voet__kolommen {
    grid-template-columns: 1fr 1fr 1.7fr;
    gap: var(--r6);
  }

  .voet__kolommen > :last-child {
    grid-column: auto;
  }
}

@media (min-width: 82em) {
  .kop__nav {
    display: block;
  }

  .kop__acties {
    display: flex;
    align-items: center;
    gap: var(--r3);
  }

  .menu {
    display: none;
  }

  /* Drie kolommen met gelijke buitenranden: daardoor staat het menu exact
     in het midden van de balk, los van hoe breed het logo of de knop is. */
  .kop__binnen {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--r4);
  }

  .kop__logo {
    justify-self: start;
    margin-right: 0;
  }

  .kop__nav {
    justify-self: center;
  }

  .kop__acties {
    justify-self: end;
  }
}

/* De kantlijn. Pas hier is er marge om hem in te zetten. */
@media (min-width: 69em) {
  .sectie--kantlijn > .omhulsel::before {
    content: '';
    position: absolute;
    top: calc(var(--sectie) * -0.5);
    bottom: calc(var(--sectie) * -0.5);
    left: calc(var(--marge) - 2.25rem);
    width: 1px;
    background: linear-gradient(
      to bottom,
      transparent,
      color-mix(in srgb, var(--ster-400) 55%, transparent) 12%,
      color-mix(in srgb, var(--ster-400) 55%, transparent) 88%,
      transparent
    );
    pointer-events: none;
  }
}

@media (min-width: 90em) {
  .hero__binnen,
  .omhulsel,
  .kop__binnen,
  .voet__binnen {
    padding-inline: var(--marge);
  }
}

/* ==================================================================
   24. prefers-reduced-motion
   Geen afgeslankte versie maar een tweede, volwaardige uitvoering:
   alles verschijnt, niets beweegt.
================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .onthul {
    opacity: 0;
    transform: none;
    transition: opacity 200ms linear;
  }

  .js .onthul.is-zichtbaar {
    opacity: 1;
  }

  .js .hero__vlak,
  .js .hero .eyebrow,
  .js .hero h1,
  .js .hero__tekst > .lead,
  .js .hero .knoppen .knop,
  .js .hero .aantekening,
  .js .hero .ster-deco,
  .js .kenmerk {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .knop__spinner {
    animation: none;
    border-top-color: transparent;
  }

  .aantekening,
  .aantekening--rechts {
    transform: none;
  }
}

/* ==================================================================
   25. Afdrukken
================================================================== */
@media print {
  .kop,
  .menu,
  .cta,
  .voet__boven,
  .overslaan,
  .ster-deco {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
    font-size: 11pt;
  }

  .hero,
  .sectie--nacht,
  .accentblok {
    background: #fff !important;
    color: #000 !important;
  }

  .hero h1,
  .sectie--nacht h2,
  .accentblok h2 {
    color: #000 !important;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    word-break: break-all;
  }
}