/* Kantumruy Pro, lokaal, met een gemeten Arial-terugval (zelfde waarden als next/font op de statische site). */
@font-face {
  font-family: kantumruy;
  src: url(../fonts/kantumruy-pro-latijn.woff2) format("woff2");
  font-display: swap;
  font-weight: 300 700;
  font-style: normal;
}

@font-face {
  font-family: "kantumruy Fallback";
  src: local("Arial");
  ascent-override: 85.86%;
  descent-override: 24.26%;
  line-gap-override: 0%;
  size-adjust: 107.16%;
}

:root {
  --font-kantumruy: "kantumruy", "kantumruy Fallback", Arial, "Helvetica Neue", sans-serif;
}

/*
 * Rijschool BVO, artdirection "Kwartslag" (ARTDIRECTION.md). Eigen CSS zonder framework, in lagen: basis, onderdelen en
 * paginaonderdelen. De focusring staat bewust buiten de lagen, zodat geen onderdeel hem kan wegzetten.
 */
@layer basis, onderdelen, delen;

:root {
  --indigo: #260ecc;
  --indigo-diep: #1b0a9e;
  --inkt: #15123d;
  --inkt-zacht: #3f3b6e;
  --cyaan: #48d0ff;
  --cyaan-licht: #e3f7ff;
  --mist: #f2f4fc;
  --lavendel: #ece9ff;
  --nacht: #120a58;
  --wit: #ffffff;
  --lijn: #d6d9ef;
  --ster: #fbbc04;
  --fout: #b0153a;
  --fout-licht: #fdecef;
  --goed: #0d6b47;
  --goed-licht: #e4f6ee;
  --font: var(--font-kantumruy), Arial, "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rand: clamp(1rem, 3.4vw, 3rem);
  --radius: 22px;
  --kwart: 72px;
  --schaduw: 0 10px 12px -8px rgb(21 18 61 / 0.22), 0 2px 4px rgb(21 18 61 / 0.06);
  --schaduw-hoog: 0 16px 12px -10px rgb(21 18 61 / 0.28), 0 4px 8px rgb(21 18 61 / 0.08);
  --kop-hoogte: 4rem;
}

@media (min-width: 64rem) {
  :root {
    --kop-hoogte: 4.75rem;
  }
}

/* ---------- Basis ---------- */
@layer basis {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Geen globale smooth scroll: de focusscroll bij tabben moet direct zijn, anders valt focus even achter de actiebalk. */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--kop-hoogte) + 1rem);
  }

  body {
    margin: 0;
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--inkt);
    background: var(--wit);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  html[data-menu-open] body {
    overflow: hidden;
  }

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

  img {
    height: auto;
  }

  h1,
  h2,
  h3,
  h4 {
    margin: 0;
    font-weight: 700;
    color: var(--inkt);
    text-wrap: balance;
  }

  h1 {
    font-size: clamp(2rem, 1.15rem + 3.3vw, 4rem);
    line-height: 1.06;
    letter-spacing: -0.022em;
  }

  h2 {
    font-size: clamp(1.625rem, 1.2rem + 1.55vw, 2.625rem);
    line-height: 1.12;
    letter-spacing: -0.016em;
  }

  h3 {
    font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.375rem);
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -0.006em;
  }

  p,
  figure {
    margin: 0;
  }

  address {
    font-style: normal;
  }

  a {
    color: var(--indigo);
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1.5px;
  }

  a:hover {
    color: var(--indigo-diep);
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
  }

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

  strong {
    font-weight: 650;
  }

  main {
    display: block;
    outline: none;
  }

  [hidden] {
    display: none !important;
  }
}

/* ---------- Onderdelen ---------- */
@layer onderdelen {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .kader {
    width: 100%;
    max-width: calc(87.5rem + 2 * var(--rand));
    margin-inline: auto;
    padding-inline: var(--rand);
  }

  .overslaan {
    position: absolute;
    left: 1rem;
    top: 0.75rem;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    background: var(--indigo);
    color: var(--wit);
    font-weight: 600;
    transform: translateY(-160%);
  }

  .overslaan:focus-visible {
    transform: none;
  }

  /* Knoppen: altijd rond, nooit een pijl of chevron. */
  .knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 3rem;
    padding: 0.8rem 1.6rem;
    border-radius: 999px;
    border: 2px solid transparent;
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.38;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition:
      translate 220ms var(--ease),
      scale 160ms var(--ease),
      background-color 220ms var(--ease),
      color 220ms var(--ease),
      box-shadow 220ms var(--ease),
      border-color 220ms var(--ease);
  }

  .knop:hover {
    translate: 0 -2px;
  }

  .knop:active {
    translate: 0 0;
    scale: 0.98;
  }

  .knop-primair {
    background: var(--indigo);
    color: var(--wit);
  }

  .knop-primair:hover {
    background: var(--indigo-diep);
    color: var(--wit);
    box-shadow: var(--schaduw);
  }

  .knop-secundair {
    background: var(--wit);
    color: var(--indigo);
    border-color: var(--indigo);
  }

  .knop-secundair:hover {
    background: var(--cyaan-licht);
    color: var(--indigo-diep);
  }

  .knop-licht {
    background: var(--wit);
    color: var(--indigo);
  }

  .knop-licht:hover {
    background: var(--cyaan-licht);
    color: var(--indigo-diep);
  }

  .knop-rij {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .tekstlink {
    font-weight: 600;
    color: var(--indigo);
  }

  /* Ring */
  .ring {
    flex: none;
  }

  /* Secties */
  .sectie {
    padding-block: clamp(3.5rem, 2.4rem + 4.6vw, 7rem);
  }

  .sectie-mist {
    background: var(--mist);
  }

  .sectie-cyaan {
    background: var(--cyaan-licht);
  }

  .sectie-lavendel {
    background: var(--lavendel);
  }

  /* Witte sectie die inhoudelijk een witte sectie erboven voortzet: geen tweede bovenmaat, dus één sectiemaat wit. */
  .sectie-vervolg {
    padding-top: 0;
  }

  .sectiekop {
    display: grid;
    gap: 0.9rem;
    max-width: 56rem;
    margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  }

  .sectiekop > p {
    max-width: 34rem;
    color: var(--inkt-zacht);
    font-size: 1.125rem;
  }

  .label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--indigo);
  }

  .label .ring {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Kaart met de kwarthoek rechtsboven */
  .kaart {
    position: relative;
    background: var(--wit);
    border-radius: var(--radius) var(--kwart) var(--radius) var(--radius);
    box-shadow: var(--schaduw);
    padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  }

  /* Leesmaat voor een losse alinea buiten .tekst */
  .maat {
    max-width: 66ch;
  }

  /* Tekstpagina's */
  .tekst {
    display: grid;
    gap: 1.1rem;
    max-width: 66ch;
  }

  /* Privacy en voorwaarden: tekst over de volle breedte van het kader, net als kop- en voettekst (verzoek gebruiker 15
     oktober 2026). */
  .tekst-breed {
    max-width: none;
  }

  /* Een telefoonnummer in lopende tekst niet over twee regels breken. */
  .tekst a[href^="tel:"] {
    white-space: nowrap;
  }

  .tekst h2 {
    margin-top: 1.4rem;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  }

  .tekst h3 {
    margin-top: 0.6rem;
  }

  .tekst ul,
  .tekst ol {
    display: grid;
    gap: 0.55rem;
    padding-left: 1.3rem;
  }

  .tekst li::marker {
    color: var(--indigo);
  }

  .bron {
    max-width: 66ch;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--inkt-zacht);
  }

  /* Notitie (bijvoorbeeld de verplichte zin over de tussentijdse toets) */
  .notitie {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    border-radius: 18px;
    background: var(--cyaan-licht);
    color: var(--inkt);
    line-height: 1.5;
  }

  .notitie svg {
    flex: none;
    margin-top: 0.1rem;
    color: var(--indigo);
  }

  .notitie .merkicoon {
    margin-top: 0;
  }

  .notitie strong {
    color: var(--inkt);
  }

  /* Sterren */
  .sterren {
    display: inline-flex;
    gap: 0.1rem;
    vertical-align: middle;
  }

  /* Badges */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.05rem;
    border-radius: 18px;
    background: var(--wit);
    color: var(--inkt);
    text-decoration: none;
    box-shadow: var(--schaduw);
    line-height: 1.38;
    transition:
      translate 220ms var(--ease),
      box-shadow 220ms var(--ease);
  }

  .badge:hover {
    translate: 0 -2px;
    box-shadow: var(--schaduw-hoog);
    color: var(--inkt);
  }

  .badge-logo {
    flex: none;
  }

  .badge-logo-breed {
    width: 5.5rem;
    height: auto;
  }

  .badge-tekst {
    display: grid;
    gap: 0.05rem;
  }

  .badge-score {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9375rem;
  }

  .badge-score strong {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.1;
  }

  .badge-onder {
    font-size: 0.875rem;
    color: var(--inkt-zacht);
  }

  .badge-compact {
    padding: 0.55rem 0.85rem;
    gap: 0.6rem;
    box-shadow: none;
  }

  .badge-compact .badge-score strong {
    font-size: 1.125rem;
  }

  .badge-compact .badge-logo-breed {
    width: 4.4rem;
  }
}

/* ---------- Paginaonderdelen ---------- */
@layer delen {
  /* Kopbalk */
  .kopbalk {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgb(255 255 255 / 0.96);
    transition: box-shadow 260ms var(--ease);
  }

  @supports (backdrop-filter: blur(8px)) {
    .kopbalk {
      background: rgb(255 255 255 / 0.88);
      backdrop-filter: blur(10px) saturate(1.2);
    }
  }

  .kopbalk[data-gescrold] {
    box-shadow: 0 6px 12px -10px rgb(21 18 61 / 0.3);
  }

  .kopbalk-rij {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.6vw, 1.75rem);
    min-height: var(--kop-hoogte);
  }

  .kop-logo {
    display: block;
    flex: none;
    border-radius: 8px;
  }

  .kop-logo-vol {
    width: auto;
    height: 2.55rem;
  }

  .kop-logo-mark {
    display: none;
    width: auto;
    height: 2.15rem;
  }

  @media (max-width: 23.99rem) {
    .kop-logo-vol {
      display: none;
    }

    .kop-logo-mark {
      display: block;
    }
  }

  @media (min-width: 64rem) {
    .kop-logo-vol {
      height: 2.95rem;
    }
  }

  .menu-groot {
    display: none;
  }

  @media (min-width: 72rem) {
    .menu-groot {
      display: block;
      margin-left: clamp(0.5rem, 1.5vw, 2rem);
    }
  }

  .menu-lijst {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    list-style: none;
  }

  .menu-groep {
    position: relative;
  }

  /*
   * Menu-hover "ringstreep" (15 oktober 2026, verzoek gebruiker: het lichte vlak vond hij niet mooi): onder het label
   * tekent een streep zich van links in, eerst drie kwart indigo, dan klikt het laatste kwart in cyaan erbij, zoals de
   * ring met het cyaan kwart in de O van het logo. Bij weggaan trekt de streep naar rechts terug. Alleen transform; de
   * strepen vangen geen klikken. Actieve pagina en open uitklapmenu houden de streep.
   */
  .menu-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: none;
    white-space: nowrap;
    padding: 0.6rem 1rem;
    border: 0;
    /* Alleen voor de vorm van de focusring. */
    border-radius: 0.6rem;
    background: none;
    color: var(--inkt);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.38;
    text-decoration: none;
    cursor: pointer;
    transition: color 200ms var(--ease);
  }

  .menu-item::before,
  .menu-item::after {
    content: "";
    position: absolute;
    bottom: 0.3rem;
    height: 3px;
    border-radius: 3px;
    transform: scaleX(0);
    transform-origin: right;
    pointer-events: none;
  }

  .menu-item::before {
    left: 1rem;
    right: calc(1rem + (100% - 2rem) * 0.25 + 2px);
    background: var(--indigo);
    transition: transform 220ms var(--ease) 60ms;
  }

  .menu-item::after {
    right: 1rem;
    width: calc((100% - 2rem) * 0.25);
    background: var(--cyaan);
    transition: transform 160ms var(--ease);
  }

  .menu-item:hover,
  .menu-item:focus-visible,
  .menu-item[aria-expanded="true"],
  .menu-item[aria-current="page"],
  .menu-item[data-actief="ja"] {
    color: var(--indigo-diep);
  }

  .menu-item:hover::before,
  .menu-item:focus-visible::before,
  .menu-item[aria-expanded="true"]::before,
  .menu-item[aria-current="page"]::before,
  .menu-item[data-actief="ja"]::before {
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 240ms var(--ease);
  }

  .menu-item:hover::after,
  .menu-item:focus-visible::after,
  .menu-item[aria-expanded="true"]::after,
  .menu-item[aria-current="page"]::after,
  .menu-item[data-actief="ja"]::after {
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 180ms var(--ease) 190ms;
  }

  .menu-kwart {
    color: var(--cyaan);
    transition: transform 260ms var(--ease);
  }

  .menu-paneel {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: -0.5rem;
    z-index: 5;
    min-width: 21rem;
    padding: 0.6rem;
    border-radius: 18px 48px 18px 18px;
    background: var(--wit);
    box-shadow: 0 14px 12px -10px rgb(21 18 61 / 0.3), 0 2px 6px rgb(21 18 61 / 0.1);
  }

  .menu-paneel ul {
    display: grid;
    gap: 0.15rem;
    list-style: none;
  }

  .menu-paneel-link {
    display: grid;
    gap: 0.05rem;
    padding: 0.65rem 0.9rem;
    border-radius: 12px;
    color: var(--inkt);
    text-decoration: none;
    line-height: 1.38;
    transition: background-color 200ms var(--ease);
  }

  .menu-paneel-link:hover,
  .menu-paneel-link[aria-current="page"] {
    background: var(--mist);
    color: var(--inkt);
  }

  .menu-paneel-titel {
    font-weight: 600;
  }

  .menu-paneel-uitleg {
    font-size: 0.875rem;
    color: var(--inkt-zacht);
  }

  /*
   * Megamenu (14 oktober 2026, naar een voorbeeld van de gebruiker): een paneel over de volle breedte direct onder de
   * kopbalk (die sticky is en dus het bevattende blok), met links de titel, twee kolommen met kopjes en onder een lijn
   * een korte tekst, en rechts een eigen foto met de kwartslaghoek.
   */
  .menu-groep-mega {
    position: static;
  }

  .menu-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    background: var(--wit);
    border-top: 1px solid var(--lijn);
    box-shadow: 0 28px 40px -30px rgb(21 18 61 / 0.5);
  }

  .menu-mega-binnen {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: clamp(2.5rem, 5vw, 6rem);
    align-items: center;
    padding-block: 2.5rem 2.75rem;
  }

  .menu-mega-titel {
    font-size: clamp(1.625rem, 1.2rem + 0.8vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--inkt);
  }

  .menu-mega-kolommen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 1.75rem;
  }

  .menu-mega-kop {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--inkt);
  }

  .menu-mega-kolom ul {
    display: grid;
    gap: 0.1rem;
    margin-top: 0.7rem;
    list-style: none;
  }

  /* Hover: een cyaan lijn groeit van links onder de tekst (alleen transform). */
  .menu-mega-link {
    position: relative;
    display: inline-block;
    padding-block: 0.4rem;
    color: var(--inkt-zacht);
    font-size: 1.0625rem;
    line-height: 1.38;
    text-decoration: none;
    transition: color 200ms var(--ease);
  }

  .menu-mega-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.2rem;
    height: 2px;
    border-radius: 2px;
    background: var(--cyaan);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms var(--ease);
    pointer-events: none;
  }

  .menu-mega-link:hover,
  .menu-mega-link[aria-current="page"] {
    color: var(--indigo-diep);
  }

  .menu-mega-link:hover::after,
  .menu-mega-link[aria-current="page"]::after {
    transform: scaleX(1);
  }

  .menu-mega-intro {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lijn);
    color: var(--inkt-zacht);
    line-height: 1.55;
  }

  .menu-mega-beeld {
    display: block;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    border-radius: var(--radius) var(--kwart) var(--radius) var(--radius);
    background: var(--mist);
  }

  .menu-mega-beeld img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .kop-acties {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
  }

  .kop-bel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.5rem;
    border-radius: 999px;
    color: var(--indigo);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }

  .kop-bel:hover {
    background: var(--cyaan-licht);
  }

  .kop-bel-nummer {
    display: none;
  }

  @media (min-width: 86rem) {
    .kop-bel {
      padding-inline: 0.85rem;
    }

    .kop-bel-nummer {
      display: inline;
    }
  }

  .kop-cta {
    display: none;
    flex: none;
    white-space: nowrap;
    min-height: 2.85rem;
    padding: 0.6rem 1.3rem;
  }

  @media (min-width: 48rem) {
    .kop-cta {
      display: inline-flex;
    }
  }

  .kop-menuknop {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.95rem;
    border: 2px solid var(--lijn);
    border-radius: 999px;
    background: var(--wit);
    color: var(--inkt);
    font-weight: 600;
    line-height: 1.38;
    cursor: pointer;
  }

  @media (min-width: 72rem) {
    .kop-menuknop {
      display: none;
    }
  }

  /*
   * Mobiel menu. De kopbalk heeft backdrop-filter en is daardoor het bevattende blok, ook voor position: fixed; een
   * fixed paneel met inset werd zo 53 px hoog (14 oktober 2026). Nu absoluut direct onder de kopbalk, met een hoogte
   * tot de onderkant van het scherm (--menu-top zet Kop.tsx bij openen op de onderkant van de kopbalk). De groepen
   * klappen uit, de groep van de huidige pagina staat open.
   */
  .mobielmenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 49;
    height: calc(100vh - var(--menu-top, var(--kop-hoogte)));
    height: calc(100dvh - var(--menu-top, var(--kop-hoogte)));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--wit);
    border-top: 1px solid var(--lijn);
    padding-block: 0.5rem 2rem;
  }

  @media (min-width: 72rem) {
    .mobielmenu {
      display: none !important;
    }
  }

  .mobielmenu-binnen {
    display: grid;
    gap: 1.5rem;
  }

  .mobielmenu-groepen {
    display: grid;
    list-style: none;
  }

  .mobielmenu-groep {
    border-bottom: 1px solid var(--lijn);
  }

  .mobielmenu-kop,
  .mobielmenu-los {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.6rem 0;
    border: 0;
    background: none;
    color: var(--inkt);
    font-size: 1.1875rem;
    font-weight: 650;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .mobielmenu-kop[aria-expanded="true"] {
    color: var(--indigo-diep);
  }

  .mobielmenu-kop .menu-kwart {
    width: 0.875rem;
    height: 0.875rem;
  }

  .mobielmenu-kop[aria-expanded="true"] .menu-kwart {
    transform: rotate(90deg);
  }

  .mobielmenu-los[aria-current="page"] {
    color: var(--indigo);
  }

  .mobielmenu-groep ul {
    display: grid;
    gap: 0.1rem;
    padding: 0 0 0.75rem 1rem;
    list-style: none;
  }

  .mobielmenu-groep ul a {
    display: block;
    padding: 0.6rem 0;
    color: var(--inkt-zacht);
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.38;
    text-decoration: none;
  }

  .mobielmenu-groep ul a[aria-current="page"] {
    color: var(--indigo);
  }

  .mobielmenu-acties {
    display: grid;
    gap: 0.75rem;
  }

  @media (min-width: 40rem) {
    .mobielmenu-acties {
      grid-template-columns: repeat(3, auto);
      justify-content: start;
    }
  }

  /* Hero */
  /* Hero: foto over de volle breedte met rechts het proeflesformulier (14 oktober 2026, naar een voorbeeld van de
     gebruiker). Onder 48rem de staande foto, daarboven de brede versie (components/HeroBeeld.tsx). Onder 80rem staat de
     tekst onderaan op de foto (de foto is de band erboven) en het formulier eronder op het donkere vlak; vanaf 80rem
     tekst links, formulier rechts en de geslaagde ertussen. De geslaagde met het bord staat in de brede foto op
     44,4 tot 62,6 procent van de breedte (midden 53,5%): de middenkolom van 21vw houdt de tekst links van 43% en het
     formulier rechts van 63% op ieder scherm van 1280 tot 2560 px. */
  .hero-vol {
    --hero-inkt: 21 18 61;
    /* Fotoband boven de tekst onder 80rem; op 320 x 640 zo laag dat de knop in het eerste scherm blijft. */
    --band: clamp(8rem, min(58vw, 100svh - 32rem), 26rem);
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: var(--rand) minmax(0, 1fr) var(--rand);
    overflow: clip;
    background: rgb(var(--hero-inkt));
    color: var(--wit);
  }

  .hero-vol-beeld,
  .hero-vol-waas {
    grid-area: 1 / 1 / 2 / -1;
  }

  /* Onder 80rem dekt de foto alleen de band plus een stuk onder de tekst; daarna loopt het waas over in het vlak. */
  .hero-vol-beeld {
    position: relative;
    z-index: -2;
    display: block;
    align-self: start;
    height: calc(var(--band) + 9rem);
  }

  /* Absoluut: een img met eigen hoogte zou de gridrij oprekken. */
  .hero-vol-beeld img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 44% 15%;
  }

  .hero-vol-waas {
    z-index: -1;
    align-self: start;
    height: calc(var(--band) + 9rem);
    background: linear-gradient(
      180deg,
      rgb(var(--hero-inkt) / 0) 0,
      rgb(var(--hero-inkt) / 0.08) calc(var(--band) - 5rem),
      rgb(var(--hero-inkt) / 0.86) calc(var(--band) + 3rem),
      rgb(var(--hero-inkt)) 100%
    );
  }

  .hero-vol .hero-tekst {
    grid-area: 1 / 2;
    padding-block: var(--band) clamp(2rem, 1.5rem + 2vw, 3rem);
  }

  .hero-formulier-plek {
    grid-area: 2 / 2;
    padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
  }

  @media (min-width: 48rem) {
    .hero-vol .hero-vol-beeld img {
      object-position: 53.5% 0%;
    }

    .hero-vol .hero-tekst {
      max-width: 40rem;
    }

    .hero-formulier-plek {
      max-width: 34rem;
    }
  }

  @media (min-width: 80rem) {
    .hero-vol {
      grid-template-columns: minmax(var(--rand), 1fr) minmax(0, 34rem) 21vw minmax(0, 26rem) minmax(var(--rand), 1fr);
      grid-template-rows: minmax(clamp(44rem, 39vw, 62rem), auto);
      align-items: center;
    }

    .hero-vol .hero-vol-beeld img {
      object-position: 53.5% 30%;
    }

    .hero-vol-beeld,
    .hero-vol-waas {
      align-self: stretch;
      height: auto;
    }

    .hero-vol-waas {
      background:
        linear-gradient(90deg, rgb(var(--hero-inkt) / 0.9) 0, rgb(var(--hero-inkt) / 0.8) 30%, rgb(var(--hero-inkt) / 0.3) 43%, rgb(var(--hero-inkt) / 0) 52%),
        linear-gradient(270deg, rgb(var(--hero-inkt) / 0.45) 0, rgb(var(--hero-inkt) / 0) 34%),
        linear-gradient(0deg, rgb(var(--hero-inkt) / 0.35) 0, rgb(var(--hero-inkt) / 0) 30%);
    }

    .hero-vol .hero-tekst {
      grid-area: 1 / 2;
      max-width: none;
      padding-block: 3rem;
    }

    .hero-formulier-plek {
      grid-area: 1 / 4;
      max-width: none;
      padding-block: 2.5rem;
    }

    .hero-naar-formulier {
      display: none;
    }
  }

  .hero-tekst {
    display: grid;
    gap: 1.35rem;
    justify-items: start;
  }

  .hero-vol h1 {
    color: var(--wit);
  }

  @media (min-width: 80rem) {
    .hero-vol h1 {
      font-size: clamp(3rem, 1rem + 2.5vw, 3.75rem);
    }
  }

  .hero-vol .label {
    --ring-basis: var(--wit);
    color: var(--wit);
  }

  .hero-lead {
    max-width: 52ch;
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    color: rgb(255 255 255 / 0.9);
  }

  /* Vanaf 64rem vaste maat en breedte, zodat de tekst op drie regels staat met een gevulde laatste regel (gemeten op
     de oude hero, 92%). Bij een andere breedte of lettergrootte opnieuw meten. */
  @media (min-width: 64rem) {
    .hero-lead {
      max-width: 31rem;
      font-size: 1.25rem;
    }
  }

  .hero-bewijs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1.5rem;
    margin-top: 0.4rem;
  }

  .hero-feit {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: rgb(255 255 255 / 0.9);
  }

  .hero-feit .merkicoon {
    color: var(--wit);
  }

  /* Proeflesformulier in de hero */
  .hero-formulier {
    position: relative;
    display: grid;
    gap: 0.6rem;
    padding: clamp(1.4rem, 1rem + 1.2vw, 1.9rem);
    border-radius: var(--radius) var(--kwart) var(--radius) var(--radius);
    background: var(--wit);
    color: var(--inkt);
  }

  /* Op het donkere vlak geen schaduwen (die lezen daar als gloed); het witte vlak staat vanzelf los. */
  .hero-vol .badge {
    box-shadow: none;
  }

  .hero-formulier h2 {
    font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem);
  }

  .hero-formulier-intro {
    color: var(--inkt-zacht);
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .hero-formulier .formulier {
    gap: 1rem;
    margin-top: 0.4rem;
  }

  .hero-formulier .velden {
    gap: 0.8rem 0.75rem;
  }

  .hero-formulier .veld label {
    font-size: 0.9375rem;
  }

  .hero-formulier .invoer {
    min-height: 2.9rem;
    padding-block: 0.55rem;
  }

  .hero-formulier select.invoer {
    padding-inline: 0.7rem 0.4rem;
    font-size: 0.9375rem;
  }

  .hero-formulier .vinkje {
    font-size: 0.875rem;
    font-weight: 400;
  }

  .hero-formulier-knop {
    width: 100%;
  }

  /* Lege statusregio blijft in de toegankelijkheidsboom (live region), maar telt niet mee in de rasterafstand. */
  .hero-formulier .status-houder:empty {
    position: absolute;
  }

  .hero-formulier-voet {
    font-size: 0.875rem;
    text-align: center;
    color: var(--inkt-zacht);
  }

  .hero-formulier-voet a {
    color: var(--indigo);
    font-weight: 600;
  }

  /* Stappen in de ring */
  .stappen {
    display: grid;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: center;
  }

  @media (min-width: 64rem) {
    .stappen {
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    }
  }

  .stappen-ring {
    position: relative;
    width: clamp(14rem, 62vw, 22rem);
    margin-inline: auto;
    aspect-ratio: 1;
  }

  .stappen-ring svg {
    width: 100%;
    height: 100%;
  }

  .stappen-nummer {
    position: absolute;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--wit);
    color: var(--indigo);
    font-weight: 700;
    box-shadow: var(--schaduw);
    translate: -50% -50%;
  }

  .stappen-midden {
    position: absolute;
    inset: 22%;
    display: grid;
    place-content: center;
    text-align: center;
    gap: 0.15rem;
  }

  .stappen-midden strong {
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    line-height: 1.15;
    color: var(--indigo);
  }

  .stappen-midden span {
    font-size: 0.9375rem;
    line-height: 1.38;
    color: var(--inkt-zacht);
  }

  .stappen-lijst {
    display: grid;
    gap: 1rem;
    list-style: none;
    counter-reset: stap;
  }

  @media (min-width: 48rem) {
    .stappen-lijst {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .stap {
    display: grid;
    gap: 0.55rem;
    align-content: start;
  }

  .stap-kop {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .stap-nr {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--indigo);
    color: var(--wit);
    font-weight: 700;
    line-height: 1;
  }

  .stap[data-accent="cyaan"] .stap-nr {
    background: var(--cyaan);
    color: var(--inkt);
  }

  .stap[data-accent="licht"] .stap-nr {
    background: var(--lavendel);
    color: var(--indigo);
  }

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

  /* Pakketten (26 oktober 2026): Pakket 10, Pakket 25 en de losse tarieven. Vanaf 48rem de twee pakketten naast elkaar met
     de losse tarieven eronder over de volle breedte, vanaf 64rem drie kaarten naast elkaar. */
  .pakketten {
    display: grid;
    gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
    list-style: none;
  }

  @media (min-width: 48rem) {
    .pakketten {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pakket-los {
      grid-column: 1 / -1;
    }
  }

  @media (min-width: 64rem) {
    .pakketten {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pakket-los {
      grid-column: auto;
    }
  }

  .pakket {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    transition:
      translate 260ms var(--ease),
      box-shadow 260ms var(--ease);
  }

  .pakket:hover {
    translate: 0 -4px;
    box-shadow: var(--schaduw-hoog);
  }

  .pakket[data-examen="ja"] {
    background: var(--lavendel);
  }

  /* De aanrader van de rijschool (Pakket 10): een indigo rand en een label boven de kop. */
  .pakket[data-aanrader="ja"] {
    box-shadow:
      inset 0 0 0 2px var(--indigo),
      var(--schaduw);
  }

  .pakket[data-aanrader="ja"]:hover {
    box-shadow:
      inset 0 0 0 2px var(--indigo),
      var(--schaduw-hoog);
  }

  /* Als tabje op de bovenrand, zodat de koppen van beide pakketten op dezelfde hoogte blijven. */
  .pakket-aanrader {
    position: absolute;
    top: 0;
    left: clamp(1.4rem, 1.1rem + 1vw, 2rem);
    translate: 0 -50%;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: var(--indigo);
    color: var(--wit);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .pakket-naam {
    display: grid;
    gap: 0.2rem;
  }

  .pakket-naam > span {
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--inkt-zacht);
  }

  /* Losse tarieven als nette lijst met de bedragen rechts. */
  .pakket-tarieven {
    display: grid;
    margin: 0;
  }

  .pakket-tarieven > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.7rem;
    border-top: 1px solid var(--lijn);
  }

  .pakket-tarieven dt {
    font-weight: 650;
    line-height: 1.35;
  }

  .pakket-tarieven dt small {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--inkt-zacht);
  }

  .pakket-tarieven dd {
    margin: 0;
    font-weight: 700;
    font-size: 1.125rem;
    white-space: nowrap;
  }

  .pakketten-voet {
    max-width: 66ch;
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--inkt-zacht);
  }

  /* Vergelijking Pakket 10 en Pakket 25, vanaf 64rem met de foto van een geslaagde ernaast (even hoog als de tabel). */
  .vergelijktabel-kader {
    max-width: 52rem;
  }

  .vergelijk-raster {
    display: grid;
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  }

  @media (min-width: 64rem) {
    .vergelijk-raster {
      grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
      align-items: stretch;
    }

    .vergelijk-raster .vergelijktabel-kader {
      max-width: none;
    }

    /* Dubbele klasse: .fotokader (4:3) staat verderop in dit bestand en zou anders de breedte uit de hoogte afleiden. */
    .fotokader.vergelijk-foto {
      min-width: 0;
      aspect-ratio: auto;
      min-height: 20rem;
    }

    /* Hoogte uit de tabel, niet uit de foto: anders duwt de eigen breedte van het beeld de kolom op. */
    .fotokader.vergelijk-foto > picture {
      position: relative;
    }

    .fotokader.vergelijk-foto img {
      position: absolute;
      inset: 0;
    }
  }

  /* Dubbele klasse: de algemene .prijstabel-regels staan verderop in dit bestand. */
  .prijstabel.vergelijktabel thead th,
  .prijstabel.vergelijktabel thead th:last-child {
    text-align: left;
    color: var(--inkt);
    font-weight: 700;
    font-size: 1rem;
  }

  .prijstabel.vergelijktabel thead td {
    border-top: 0;
  }

  /* Geen woordbreuk midden in een woord (op 390 px brak "Praktijkexamen"); de pakketnamen blijven heel. */
  .prijstabel.vergelijktabel th,
  .prijstabel.vergelijktabel td {
    overflow-wrap: normal;
    hyphens: auto;
  }

  .prijstabel.vergelijktabel thead th {
    white-space: nowrap;
  }

  @media (max-width: 39.99rem) {
    .prijstabel.vergelijktabel th,
    .prijstabel.vergelijktabel td {
      padding-inline: 0.5rem;
      font-size: 0.9375rem;
    }
  }

  /* Onder 24rem (320 en 375 px) past de tabel niet: iedere rij wordt een blokje met het label boven de twee waarden.
     De rollen in de markup houden het voor schermlezers een tabel. */
  @media (max-width: 23.99rem) {
    .prijstabel.vergelijktabel,
    .prijstabel.vergelijktabel thead,
    .prijstabel.vergelijktabel tbody {
      display: block;
    }

    .prijstabel.vergelijktabel tr {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 0.75rem;
      padding: 0.65rem 0.5rem;
      border-top: 1px solid var(--lijn);
    }

    .prijstabel.vergelijktabel thead tr {
      border-top: 0;
    }

    .prijstabel.vergelijktabel thead td {
      display: none;
    }

    .prijstabel.vergelijktabel th,
    .prijstabel.vergelijktabel td {
      padding: 0;
      border-top: 0;
    }

    .prijstabel.vergelijktabel tbody th {
      grid-column: 1 / -1;
      margin-bottom: 0.2rem;
    }
  }

  .prijstabel.vergelijktabel tbody th {
    font-weight: 400;
    color: var(--inkt-zacht);
  }

  .prijstabel.vergelijktabel td {
    font-weight: 600;
  }

  .prijstabel.vergelijktabel tr[data-totaal="ja"] th,
  .prijstabel.vergelijktabel tr[data-totaal="ja"] td {
    font-weight: 700;
    color: var(--inkt);
    font-size: 1.0625rem;
  }

  .pakket-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .pakket-ring {
    position: relative;
    flex: none;
    width: 4.25rem;
    height: 4.25rem;
  }

  .pakket-ring .ring {
    width: 100%;
    height: 100%;
  }

  .pakket-ring span {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1;
    color: var(--indigo);
  }

  .pakket-ring small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--inkt-zacht);
  }

  .pakket-prijs {
    display: grid;
    gap: 0.2rem;
  }

  .pakket-totaal {
    font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--inkt);
  }

  .pakket-eenheid {
    font-size: 0.9375rem;
    color: var(--inkt-zacht);
    line-height: 1.45;
  }

  .pakket-lijst {
    display: grid;
    gap: 0.55rem;
    list-style: none;
    font-size: 0.9875rem;
    line-height: 1.45;
  }

  .pakket-lijst li {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
  }

  .pakket-lijst svg {
    flex: none;
    margin-top: 0.1rem;
    color: var(--indigo);
  }

  .pakket-examen {
    font-weight: 600;
  }

  .pakket-knop {
    margin-top: auto;
    width: 100%;
    padding-inline: 1rem;
  }

  /* Algemene voorwaarden: inhoudsopgave in kolommen en genummerde leden zoals in de pdf van de rijschool. */
  .voorwaarden-inhoud {
    display: grid;
    gap: 1rem;
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
  }

  .voorwaarden-inhoud h2 {
    margin: 0;
    font-size: 1.25rem;
  }

  .voorwaarden-inhoud ol {
    list-style: none;
    columns: 15rem auto;
    column-gap: 2rem;
  }

  .voorwaarden-inhoud li {
    break-inside: avoid;
    padding-block: 0.25rem;
  }

  .voorwaarden-inhoud a {
    display: inline-flex;
    gap: 0.6rem;
    color: var(--inkt);
    text-decoration: none;
  }

  .voorwaarden-inhoud a:hover {
    color: var(--indigo);
    text-decoration: underline;
  }

  .voorwaarden-nr {
    flex: none;
    min-width: 2.75rem;
    font-weight: 700;
    color: var(--indigo);
    font-variant-numeric: tabular-nums;
  }

  .voorwaarden-inhoud .voorwaarden-nr {
    min-width: 1.6rem;
  }

  .voorwaarden-artikel {
    display: grid;
    gap: 0.75rem;
    scroll-margin-top: calc(var(--kop-hoogte) + 1.5rem);
  }

  #lesovereenkomst {
    scroll-margin-top: calc(var(--kop-hoogte) + 1.5rem);
  }

  .voorwaarden-hoofdstuk {
    display: grid;
    gap: 1.25rem;
  }

  .voorwaarden-lid {
    display: flex;
    gap: 0.5rem;
  }

  .voorwaarden-akkoord {
    margin: 0;
    padding: 1.1rem 1.4rem;
    border-radius: var(--radius);
    background: var(--lavendel);
    font-weight: 600;
  }

  .voorwaarden-velden {
    display: grid;
    gap: 1.5rem;
  }

  @media (min-width: 48rem) {
    .voorwaarden-velden {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Examens en toetsen */
  .examens {
    display: grid;
    gap: 1rem;
    list-style: none;
  }

  @media (min-width: 48rem) {
    .examens {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .examen {
    display: grid;
    grid-template-rows: auto 1fr;
    align-content: start;
    overflow: hidden;
    border-radius: 18px;
    background: var(--wit);
    border: 2px solid var(--lijn);
  }

  /* Foto over de volle breedte boven de kaarttekst (12 oktober 2026). */
  .examen-beeld {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--lijn);
  }

  .examen-beeld img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .examen-tekst {
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding: 1.25rem 1.4rem;
  }

  .examen-kop {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
  }

  .examen-prijs {
    font-size: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--indigo);
  }

  .examen p {
    color: var(--inkt-zacht);
    font-size: 0.9875rem;
    line-height: 1.5;
  }

  /* Geslaagdenrol: doorlopende rij foto's met voornaam, alleen CSS (14 oktober 2026). */
  .rol {
    margin-top: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%);
  }

  .rol-spoor {
    display: flex;
    width: max-content;
    list-style: none;
    animation: rol-door 80s linear infinite;
  }

  .rol:hover .rol-spoor,
  .rol:focus-visible .rol-spoor {
    animation-play-state: paused;
  }

  /* Foto en naam in hetzelfde rastervak (geen absolute positionering binnen de clippende rol). */
  .rol-item {
    display: grid;
    flex: none;
    width: clamp(11.5rem, 9rem + 6vw, 15rem);
    margin-right: clamp(0.75rem, 0.5rem + 0.6vw, 1.1rem);
  }

  .rol-foto,
  .rol-naam {
    grid-area: 1 / 1;
  }

  .rol-foto {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 18px 48px 18px 18px;
    background: var(--mist);
  }

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

  .rol-naam {
    align-self: end;
    justify-self: start;
    margin: 0 0 0.75rem 0.75rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: var(--wit);
    color: var(--inkt);
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.3;
  }

  @keyframes rol-door {
    to {
      transform: translateX(-50%);
    }
  }

  /* Zonder beweging: zelf scrollen, zonder de herhaalde rij. */
  @media (prefers-reduced-motion: reduce) {
    .rol {
      overflow-x: auto;
      mask-image: none;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--rand);
      padding-inline: var(--rand);
    }

    .rol-spoor {
      animation: none;
    }

    .rol-item {
      scroll-snap-align: start;
    }

    .rol-item[aria-hidden="true"] {
      display: none;
    }
  }

  /* Tegenover: wat je liever niet hebt tegenover Rijschool BVO (14 oktober 2026); eigen klassen, los van de faalangstpagina. */
  .doorgestreept {
    text-decoration-line: line-through;
    text-decoration-color: var(--cyaan);
    text-decoration-thickness: 0.12em;
  }

  .kleuraccent {
    color: var(--indigo);
  }

  .tegenover {
    position: relative;
    display: grid;
    gap: 1.25rem;
    margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  }

  @media (min-width: 64rem) {
    .tegenover {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
      gap: 2rem;
      align-items: stretch;
    }
  }

  .tegenover-kaart {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
    border-radius: var(--radius) var(--kwart) var(--radius) var(--radius);
  }

  .tegenover-kaart h3 {
    font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.375rem);
  }

  .tegenover-kaart ul {
    display: grid;
    gap: 0.85rem;
    list-style: none;
  }

  .tegenover-kaart li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    line-height: 1.45;
  }

  .tegenover-kaart li svg {
    flex: none;
    margin-top: 0.15rem;
  }

  /* De sectie staat op wit (onder de tarieven); de linkerkaart is het rustige mist-vlak. */
  .tegenover-niet {
    background: var(--mist);
    color: var(--inkt-zacht);
  }

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

  .tegenover-niet li span {
    text-decoration-line: line-through;
    text-decoration-color: rgb(21 18 61 / 0.4);
  }

  .tegenover-bvo {
    background: var(--inkt);
    color: var(--wit);
  }

  .tegenover-bvo h3 {
    color: var(--wit);
  }

  /* Lichte tint in plaats van cyaan: cyaan op inkt leest als neon (ontwerpdetector). */
  .tegenover-bvo li svg {
    color: var(--cyaan-licht);
  }

  .tegenover-citaat {
    margin: 0.35rem 0 0;
    padding: 1.1rem 1.3rem;
    border-radius: 16px 40px 16px 16px;
    background: rgb(255 255 255 / 0.08);
  }

  .tegenover-citaat blockquote {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.5;
  }

  .tegenover-citaat figcaption {
    margin-top: 0.45rem;
    font-size: 0.875rem;
    color: rgb(255 255 255 / 0.78);
  }

  .tegenover-knop {
    width: 100%;
    margin-top: 0.35rem;
  }

  /* Onderaan de linkerkaart, zodat die bij gelijke kaarthoogte niet leeg eindigt. */
  .tegenover-voet {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--lijn);
  }

  /* "vs": op mobiel tussen de gestapelde kaarten, vanaf 64rem op de naad tussen de kolommen. */
  .tegenover-vs {
    z-index: 1;
    display: grid;
    place-items: center;
    justify-self: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-block: -2.25rem;
    border: 4px solid var(--wit);
    border-radius: 50%;
    background: var(--cyaan);
    color: var(--inkt);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1;
  }

  @media (min-width: 64rem) {
    .tegenover-vs {
      position: absolute;
      top: 50%;
      left: calc((100% - 2rem) / 2.12 + 1rem);
      margin: 0;
      translate: -50% -50%;
    }
  }

  /* Rekenhulp */
  .rekenhulp {
    display: grid;
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  }

  @media (min-width: 64rem) {
    .rekenhulp {
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
      align-items: start;
    }
  }

  .rekenhulp-invoer {
    display: grid;
    gap: 1.1rem;
  }

  .rekenhulp-uren {
    display: grid;
    gap: 0.6rem;
  }

  .rekenhulp-uren output {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--indigo);
  }

  .schuif {
    width: 100%;
    accent-color: var(--indigo);
    height: 2rem;
  }

  .vinkje {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    line-height: 1.45;
    cursor: pointer;
  }

  .vinkje input {
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.1rem;
    accent-color: var(--indigo);
  }

  .rekenhulp-uitkomst {
    display: grid;
    gap: 0.6rem;
    list-style: none;
  }

  .rekenregel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 1rem;
    align-items: baseline;
    padding: 1rem 1.2rem;
    border-radius: 16px;
    background: var(--wit);
    border: 2px solid var(--lijn);
  }

  .rekenregel[data-laagste="ja"] {
    border-color: var(--indigo);
    background: var(--lavendel);
  }

  .rekenregel-naam {
    font-weight: 600;
    line-height: 1.38;
  }

  .rekenregel-bedrag {
    font-size: 1.375rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .rekenregel-uitleg {
    grid-column: 1 / -1;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--inkt-zacht);
  }

  /* Reviews als carousel */
  .reviews-kop {
    display: grid;
    gap: 1.5rem;
    margin-bottom: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  }

  @media (min-width: 88rem) {
    .reviews-kop {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
    }
  }

  .reviews-kop .sectiekop > p {
    max-width: 32rem;
  }

  .reviews-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
  }

  .carousel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
  }

  .carousel-bediening {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
  }

  .carousel-knoppen {
    display: flex;
    gap: 0.6rem;
  }

  .carousel-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.5rem 1.15rem;
    border-radius: 999px;
    border: 2px solid var(--indigo);
    background: var(--wit);
    color: var(--indigo);
    font-weight: 600;
    line-height: 1.38;
    cursor: pointer;
    transition:
      background-color 200ms var(--ease),
      translate 200ms var(--ease);
  }

  .carousel-knop:hover:not(:disabled) {
    background: var(--cyaan-licht);
    translate: 0 -2px;
  }

  .carousel-knop:disabled {
    opacity: 0.45;
    cursor: default;
  }

  .carousel-stippen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
  }

  .carousel-stip {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
  }

  .carousel-stip::before {
    content: "";
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--lijn);
    transition:
      background-color 200ms var(--ease),
      transform 200ms var(--ease);
  }

  .carousel-stip[aria-current="true"]::before {
    background: var(--indigo);
    transform: scale(1.25);
  }

  .carousel-spoor {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    align-items: start;
    gap: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0.25rem 0.625rem 1.25rem;
    margin: -0.25rem -0.625rem 0;
    scroll-padding-inline: 0.625rem;
    list-style: none;
    border-radius: 18px;
  }

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

  .carousel-spoor[data-slepen="ja"] {
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
  }

  @media (min-width: 48rem) {
    .carousel-spoor {
      grid-auto-columns: calc((100% - 1 * clamp(1rem, 0.6rem + 1.2vw, 1.5rem)) / 2);
    }
  }

  @media (min-width: 80rem) {
    .carousel-spoor {
      grid-auto-columns: calc((100% - 2 * clamp(1rem, 0.6rem + 1.2vw, 1.5rem)) / 3);
    }
  }

  .review {
    position: relative;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: var(--kaarthoogte, 100%);
    margin: 0;
    padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
    border-radius: var(--radius) 56px var(--radius) var(--radius);
    background: var(--wit);
    box-shadow: var(--schaduw);
  }

  /* Eigen achtergrond: slides buiten beeld in het spoor tellen zo niet als tekst tegen de schermrand. */
  .review-tekst p {
    background: var(--wit);
  }

  .review-tekst {
    display: grid;
    gap: 0.8rem;
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    background: var(--wit);
  }

  .review-voet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1px solid var(--lijn);
    font-size: 0.9375rem;
    line-height: 1.45;
  }

  .review-naam {
    font-weight: 650;
  }

  .review-bron {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--inkt-zacht);
  }

  .review-bron img {
    width: 1.1rem;
    height: 1.1rem;
  }

  /* Geslaagdenwand */
  .wand {
    display: grid;
    gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
  }

  @media (min-width: 64rem) {
    .wand {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .wand-foto {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: 18px 48px 18px 18px;
    background: var(--mist);
    transition: translate 260ms var(--ease);
  }

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

  .wand li:hover .wand-foto {
    translate: 0 -4px;
  }

  /* Grote foto vooraan: absoluut in het vak, zodat de beeldhoogte de gridrijen niet oprekt. */
  .wand-groot {
    position: relative;
    grid-column: span 2;
    aspect-ratio: 4 / 5;
  }

  .wand-groot .wand-foto {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }

  @media (min-width: 64rem) {
    .wand-groot {
      grid-row: span 2;
      aspect-ratio: auto;
    }
  }

  /* Fotokader in tekstpagina's en blokken */
  .fotokader {
    display: block;
    overflow: hidden;
    border-radius: var(--radius) 80px var(--radius) var(--radius);
    background: var(--mist);
    aspect-ratio: 4 / 3;
  }

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

  .fotokader > picture,
  .hero-foto > picture,
  .wand-foto > picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Twee kolommen: tekst en beeld of tekst en kaart */
  .tweeluik {
    display: grid;
    gap: clamp(2rem, 1.2rem + 3vw, 4rem);
    align-items: center;
  }

  @media (min-width: 64rem) {
    .tweeluik {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .tweeluik[data-verhouding="breed"] {
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    }
  }

  .tweeluik .sectiekop > p {
    max-width: 28rem;
  }

  /* Uitgesneden foto (transparante achtergrond) met een neutrale grondschaduw, zodat auto en leerling op de sectie staan
     in plaats van te zweven. */
  .uitsnede {
    position: relative;
    max-width: 26rem;
    margin-top: 0.75rem;
  }

  .uitsnede::before {
    content: "";
    position: absolute;
    left: 1%;
    right: 3%;
    bottom: -0.55rem;
    height: 1.5rem;
    background: radial-gradient(closest-side, rgb(21 18 61 / 0.2), transparent);
  }

  .uitsnede img {
    position: relative;
    width: 100%;
  }

  .feitenlijst {
    display: grid;
    gap: 0.9rem;
    list-style: none;
  }

  .feit {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    line-height: 1.5;
  }

  .feit svg {
    flex: none;
    margin-top: 0.15rem;
    color: var(--indigo);
  }

  /* Merkicoon van 28 px: midden op de eerste regel (24 px) van de vetgedrukte titel. */
  .feit .merkicoon {
    margin-top: -0.125rem;
  }

  .feit strong {
    display: block;
  }

  /* Tijden */
  .tijden {
    display: grid;
    gap: 0.4rem;
    margin: 0;
  }

  .tijden div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1.5rem;
    padding-block: 0.5rem;
    border-bottom: 1px solid var(--lijn);
  }

  .tijden dt {
    font-weight: 600;
  }

  .tijden dd {
    margin: 0;
  }

  /* Veelgestelde vragen */
  .faq-raster > .sectiekop > p {
    max-width: 22rem;
  }

  @media (min-width: 64rem) {
    .faq-raster {
      display: grid;
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
      gap: clamp(2.5rem, 1rem + 3vw, 5rem);
      align-items: start;
    }

    .faq-raster > .sectiekop {
      position: sticky;
      top: 7.5rem;
      margin-bottom: 0;
    }
  }

  .vragen {
    display: grid;
    gap: 0.75rem;
    max-width: 58rem;
    list-style: none;
  }

  .vraag {
    border-radius: 18px;
    background: var(--wit);
    box-shadow: var(--schaduw);
  }

  .vraag summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
    border-radius: 18px;
  }

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

  .vraag-teken {
    position: relative;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--cyaan-licht);
  }

  .vraag-teken::before,
  .vraag-teken::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.8rem;
    height: 2px;
    border-radius: 2px;
    background: var(--indigo);
    translate: -50% -50%;
    transition: transform 240ms var(--ease);
  }

  .vraag-teken::after {
    transform: rotate(90deg);
  }

  .vraag[open] .vraag-teken::after {
    transform: rotate(0deg);
  }

  .vraag:not([open]) > .vraag-antwoord {
    display: none;
  }

  .vraag-antwoord {
    display: grid;
    gap: 0.75rem;
    padding: 0 1.35rem 1.25rem;
    max-width: 68ch;
    color: var(--inkt-zacht);
  }

  /* Slotblok: na een witte sectie geen dubbele witruimte. */
  /* Slotblok: evenveel wit boven als onder het lavendel vlak (14 oktober 2026). Na een gekleurde sectie dezelfde
     sectiemaat boven en onder; na een witte sectie geen eigen bovenmaat, want de onderkant van die sectie levert
     dan al precies die sectiemaat aan wit. */
  .sectie:not(.sectie-mist, .sectie-cyaan, .sectie-lavendel) + .sectie-slot {
    padding-top: 0;
  }

  .slot {
    display: grid;
    gap: 1.75rem;
    padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
    border-radius: 28px 120px 28px 28px;
    background: var(--lavendel);
  }

  @media (min-width: 64rem) {
    .slot {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
    }
  }

  .slot-tekst {
    display: grid;
    gap: 0.8rem;
    max-width: 52ch;
  }

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

  .slot-opties {
    display: grid;
    gap: 0.75rem;
  }

  @media (min-width: 40rem) {
    .slot-opties {
      grid-template-columns: repeat(2, minmax(0, auto));
    }
  }

  .contactkeuze {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.25rem;
    padding: 0.75rem 1.15rem;
    border-radius: 16px;
    background: var(--wit);
    color: var(--inkt);
    font-weight: 600;
    line-height: 1.38;
    text-decoration: none;
    transition: translate 220ms var(--ease);
  }

  .contactkeuze:hover {
    translate: 0 -2px;
    color: var(--indigo-diep);
  }

  .contactkeuze svg {
    flex: none;
    color: var(--indigo);
  }

  .contactkeuze small {
    display: block;
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--inkt-zacht);
  }

  /* Paginakop */
  .paginakop {
    padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.75rem) clamp(2rem, 1.4rem + 2vw, 3.25rem);
    background: var(--mist);
  }

  .paginakop-raster {
    display: grid;
    gap: 1.1rem;
    justify-items: start;
  }

  .kruimel {
    font-size: 0.9375rem;
    line-height: 1.45;
  }

  .kruimel ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
  }

  .kruimel li + li::before {
    content: "/";
    margin-right: 0.35rem;
    color: var(--inkt-zacht);
  }

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

  .kruimel [aria-current="page"] {
    color: var(--inkt);
  }

  .paginakop h1 {
    max-width: 24ch;
    font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  }

  /* Inleidingen: vaste breedte, zodat de regelval op iedere desktopbreedte gelijk is (hooguit twee regels). */
  .paginakop-intro {
    max-width: 36rem;
    font-size: 1.125rem;
    color: var(--inkt-zacht);
  }

  /* Formulieren */
  .formulier {
    display: grid;
    gap: 1.25rem;
  }

  .velden {
    display: grid;
    gap: 1.1rem 1.25rem;
  }

  @media (min-width: 40rem) {
    .velden {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .veld-breed {
      grid-column: 1 / -1;
    }
  }

  .veld {
    display: grid;
    gap: 0.4rem;
    align-content: start;
    min-width: 0;
  }

  .veld label,
  .veld legend,
  .veldlabel {
    font-weight: 600;
    line-height: 1.4;
  }

  .veld-hulp {
    max-width: 62ch;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--inkt-zacht);
  }

  .invoer {
    width: 100%;
    min-height: 3.1rem;
    padding: 0.7rem 0.95rem;
    border: 2px solid #8f8bb8;
    border-radius: 14px;
    background: var(--wit);
    color: var(--inkt);
    line-height: 1.4;
    transition: border-color 200ms var(--ease);
  }

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

  select.invoer {
    appearance: auto;
  }

  .invoer:hover {
    border-color: var(--indigo);
  }

  .invoer[aria-invalid="true"] {
    border-color: var(--fout);
    background: var(--fout-licht);
  }

  .veld-fout {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
    font-size: 0.9375rem;
    line-height: 1.45;
    font-weight: 600;
    color: var(--fout);
  }

  .datumvelden {
    display: grid;
    grid-template-columns: minmax(0, 4.6rem) minmax(0, 4.6rem) minmax(0, 6.4rem);
    gap: 0.6rem;
  }

  .datumvelden .veld label {
    font-weight: 500;
    font-size: 0.9375rem;
  }

  fieldset.veld {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
  }

  fieldset.veld legend {
    padding: 0;
    margin-bottom: 0.4rem;
  }

  .keuzes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .keuze {
    position: relative;
  }

  .keuze input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
  }

  .keuze span {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 2px solid var(--lijn);
    border-radius: 999px;
    background: var(--wit);
    font-weight: 500;
    line-height: 1.38;
    transition:
      border-color 200ms var(--ease),
      background-color 200ms var(--ease);
  }

  .keuze input:checked + span {
    border-color: var(--indigo);
    background: var(--lavendel);
    color: var(--indigo-diep);
    font-weight: 600;
  }

  .keuze input:hover + span {
    border-color: var(--indigo);
  }

  .lokker {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .status {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1.1rem 1.25rem;
    border-radius: 16px;
    line-height: 1.5;
  }

  .status svg {
    flex: none;
    margin-top: 0.1rem;
  }

  .status[data-soort="gelukt"] {
    background: var(--goed-licht);
    color: var(--goed);
  }

  .status[data-soort="fout"] {
    background: var(--fout-licht);
    color: var(--fout);
  }

  .status[data-soort="fout"] a,
  .status[data-soort="gelukt"] a {
    color: inherit;
    font-weight: 650;
  }

  .formulier-voet {
    display: grid;
    gap: 1rem;
    justify-items: start;
  }

  .formulierkaart {
    max-width: 52rem;
  }

  .formulierkaart > h2 {
    font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
  }

  .formulier-zij {
    display: grid;
    gap: 1.25rem;
    align-content: start;
  }

  .formulier-raster {
    display: grid;
    gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  }

  @media (min-width: 64rem) {
    .formulier-raster {
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
      align-items: start;
    }
  }

  /* Tegels (subpagina-overzichten) */
  .tegels {
    display: grid;
    gap: 1rem;
    list-style: none;
  }

  @media (min-width: 40rem) {
    .tegels {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 72rem) {
    .tegels[data-kolommen="3"] {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .tegel {
    display: grid;
    gap: 0.4rem;
    height: 100%;
    padding: 1.25rem 1.4rem;
    border-radius: 18px 48px 18px 18px;
    background: var(--wit);
    box-shadow: var(--schaduw);
    color: var(--inkt);
    text-decoration: none;
    transition:
      translate 240ms var(--ease),
      box-shadow 240ms var(--ease);
  }

  .tegel:hover {
    translate: 0 -3px;
    box-shadow: var(--schaduw-hoog);
    color: var(--inkt);
  }

  .tegel-kop {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    font-weight: 650;
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--indigo);
  }

  .tegel-kop svg {
    flex: none;
  }

  .tegel p {
    color: var(--inkt-zacht);
    line-height: 1.5;
  }

  /* Stappen als kaarten op inhoudspagina's */
  .stapkaarten {
    display: grid;
    gap: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
    list-style: none;
  }

  @media (min-width: 48rem) {
    .stapkaarten {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 80rem) {
    .stapkaarten[data-kolommen="3"] {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .stapkaarten[data-kolommen="4"] {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .stapkaarten > li {
    gap: 0.7rem;
  }

  .stapkaarten ul {
    display: grid;
    gap: 0.4rem;
    padding-left: 1.2rem;
    color: var(--inkt-zacht);
  }

  .stapkaarten li li::marker {
    color: var(--indigo);
  }

  /* Feiten als losse kaarten (icoon naast de kop, niet erboven) */
  .feitenraster {
    display: grid;
    gap: 1rem;
    list-style: none;
  }

  @media (min-width: 40rem) {
    .feitenraster {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 72rem) {
    .feitenraster {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .feitenraster[data-kolommen="3"] {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .feitenraster > li {
    display: grid;
    gap: 0.45rem;
    align-content: start;
    padding: 1.25rem 1.4rem;
    border-radius: 18px 48px 18px 18px;
    background: var(--wit);
    box-shadow: var(--schaduw);
  }

  .feit-kop {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    font-size: 1.125rem;
    font-weight: 650;
    line-height: 1.3;
  }

  .feit-kop svg {
    flex: none;
    color: var(--indigo);
  }

  .feitenraster p {
    color: var(--inkt-zacht);
    line-height: 1.5;
  }

  /* Inhoudspagina: lopende tekst met een zijkolom */
  .inhoud-raster {
    display: grid;
    gap: clamp(2rem, 1.2rem + 3vw, 4rem);
  }

  @media (min-width: 64rem) {
    .inhoud-raster {
      grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
      align-items: start;
    }

    .inhoud-zij {
      position: sticky;
      top: 7.5rem;
    }
  }

  .inhoud-zij {
    display: grid;
    gap: 1.25rem;
    align-content: start;
  }

  .zijkaart {
    display: grid;
    gap: 0.75rem;
  }

  .zijkaart h2 {
    font-size: 1.375rem;
    line-height: 1.25;
  }

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

  /* Uitgelicht gegeven, zoals het rijschoolnummer */
  .uitgelicht {
    display: grid;
    gap: 0.25rem;
    justify-items: start;
    padding: 1.1rem 1.35rem;
    border-radius: 18px 40px 18px 18px;
    background: var(--lavendel);
  }

  .uitgelicht strong {
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: var(--indigo);
  }

  .uitgelicht span {
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--inkt-zacht);
  }

  .zijvlak {
    padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
    border-radius: var(--radius) var(--kwart) var(--radius) var(--radius);
    background: var(--lavendel);
  }

  .zijvlak .tijden div {
    border-bottom-color: rgb(21 18 61 / 0.14);
  }

  /* Contactkaarten op de contactpagina */
  .contactkaarten {
    display: grid;
    gap: 1rem;
    list-style: none;
  }

  @media (min-width: 48rem) {
    .contactkaarten {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .contactkaarten .contactkeuze {
    height: 100%;
    box-shadow: var(--schaduw);
  }

  /* Prijstabel op de tarievenpagina */
  .prijstabel-kader {
    max-width: 46rem;
    border-radius: 18px;
    background: var(--wit);
    box-shadow: var(--schaduw);
    padding: 0.5rem;
  }

  .prijstabel {
    width: 100%;
    border-collapse: collapse;
  }

  .prijstabel th,
  .prijstabel td {
    overflow-wrap: anywhere;
  }

  .prijstabel tbody th {
    font-weight: 650;
  }

  .prijstabel tbody th small,
  .prijstabel td small {
    display: block;
    font-weight: 400;
    font-size: 0.9375rem;
    color: var(--inkt-zacht);
  }

  .prijstabel td.bedrag,
  .prijstabel thead th:last-child {
    text-align: right;
  }

  /* Vergelijking gewoon praktijkexamen en faalangstexamen */
  .vergelijking {
    display: grid;
    gap: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
  }

  @media (min-width: 48rem) {
    .vergelijking {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .vergelijkkaart {
    display: grid;
    gap: 1rem;
    align-content: start;
  }

  .vergelijkkaart[data-accent="ja"] {
    background: var(--lavendel);
  }

  .vergelijkkaart dl {
    display: grid;
    margin: 0;
  }

  .vergelijkkaart dl > div {
    display: grid;
    gap: 0.1rem;
    padding-block: 0.7rem;
    border-top: 1px solid var(--lijn);
  }

  .vergelijkkaart dt {
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--inkt-zacht);
  }

  .vergelijkkaart dd {
    margin: 0;
    font-weight: 600;
    line-height: 1.45;
  }

  /* Genummerde voorwaarden in een kaart */
  .voorwaardenlijst {
    display: grid;
    gap: 0.9rem;
    padding-left: clamp(2.6rem, 2.2rem + 1vw, 3.2rem);
    line-height: 1.55;
  }

  .voorwaardenlijst li {
    padding-left: 0.25rem;
  }

  .voorwaardenlijst li::marker {
    color: var(--indigo);
    font-weight: 700;
  }

  .prijstabel caption {
    text-align: left;
    padding: 0.75rem 0.9rem;
    font-weight: 650;
  }

  .prijstabel th,
  .prijstabel td {
    padding: 0.8rem 0.9rem;
    text-align: left;
    border-top: 1px solid var(--lijn);
    vertical-align: top;
    line-height: 1.45;
  }

  .prijstabel thead th {
    border-top: 0;
    font-size: 0.9375rem;
    color: var(--inkt-zacht);
    font-weight: 600;
  }

  .prijstabel td.bedrag {
    white-space: nowrap;
    font-weight: 700;
  }

  /* Voettekst */
  .voet {
    background: var(--nacht);
    color: var(--wit);
    padding-block: clamp(3rem, 2rem + 4vw, 5rem) 6.5rem;
  }

  @media (min-width: 64rem) {
    .voet {
      padding-bottom: 2.5rem;
    }
  }

  .voet a {
    color: var(--wit);
  }

  /* Facebook in de voettekst (14 oktober 2026): rond, wit beeldmerk, bij hover het cyaan van het logo. */
  .voet .voet-sociaal {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-top: 1.1rem;
    border: 1px solid rgb(255 255 255 / 0.35);
    border-radius: 50%;
    color: var(--wit);
    transition:
      color 200ms var(--ease),
      border-color 200ms var(--ease);
  }

  .voet .voet-sociaal:hover {
    color: var(--cyaan);
    border-color: var(--cyaan);
  }

  .voet-raster {
    display: grid;
    gap: 2.5rem;
  }

  @media (min-width: 64rem) {
    .voet-raster {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) minmax(0, 1fr);
    }
  }

  .voet-merk {
    display: grid;
    gap: 1.1rem;
    align-content: start;
  }

  .voet-logo {
    width: min(17rem, 100%);
    height: auto;
  }

  .voet-zin {
    max-width: 40ch;
    line-height: 1.55;
  }

  .voet-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .voet-badges .badge {
    color: var(--inkt);
  }

  .voet-menu {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  }

  .voet-kop {
    margin-bottom: 0.6rem;
    font-weight: 650;
    font-size: 1.0625rem;
  }

  .voet-kop-tijden {
    margin-top: 1.5rem;
  }

  .voet ul {
    display: grid;
    gap: 0.35rem;
    list-style: none;
  }

  .voet-menu a,
  .voet-juridisch a {
    display: inline-block;
    padding-block: 0.2rem;
    text-decoration: none;
    line-height: 1.45;
  }

  .voet-menu a:hover,
  .voet-juridisch a:hover {
    text-decoration: underline;
    color: var(--wit);
  }

  .voet-contactlijst a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding-block: 0.3rem;
    text-decoration: none;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .voet-contactlijst a:hover {
    text-decoration: underline;
    color: var(--wit);
  }

  .voet-tijden {
    display: grid;
    gap: 0.35rem;
    margin: 0;
  }

  .voet-tijden div {
    display: grid;
    gap: 0.05rem;
  }

  .voet-tijden dt {
    font-weight: 600;
  }

  .voet-tijden dd {
    margin: 0;
  }

  .voet-onder {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.75rem;
    align-items: center;
    margin-top: 2.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgb(255 255 255 / 0.28);
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .voet-juridisch {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
  }

  .voet-demo {
    max-width: 62ch;
  }

  /* Mobiele actiebalk */
  .actiebalk {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 999px;
    background: var(--wit);
    box-shadow: 0 10px 12px -6px rgb(21 18 61 / 0.3), 0 2px 6px rgb(21 18 61 / 0.12);
    transition:
      transform 300ms var(--ease),
      opacity 300ms var(--ease);
  }

  .actiebalk[data-zichtbaar="nee"] {
    transform: translateY(140%);
    opacity: 0;
    pointer-events: none;
  }

  @media (min-width: 64rem) {
    .actiebalk {
      display: none;
    }
  }

  .actiebalk-cta {
    flex: 1;
    min-height: 2.9rem;
    padding: 0.5rem 1rem;
  }

  .actiebalk-icoon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    background: var(--cyaan-licht);
    color: var(--indigo);
  }

  /* Kaart lesgebied: zie components/Kaartillustratie.tsx */
  .lesgebied {
    display: grid;
    gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
    container-type: inline-size;
  }

  /* Vanaf 80rem tekst en kaart naast elkaar: tekstkolom van 40rem, breed genoeg voor de veertien lesplaatsen op drie
     regels (verzoek gebruiker 15 oktober 2026), de kaart midden in de ruimte ernaast en de tekst verticaal gecentreerd.
     De kaart is niet meer aan de hoogte van de tekstkolom gekoppeld ("map iets groter"). Smaller staat de kaart onder de
     tekst: naast elkaar zouden de knoppen daar over vier regels lopen. */
  @media (min-width: 80rem) {
    .lesgebied {
      grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
      align-items: center;
    }
  }

  .lesgebied-tekst {
    display: grid;
    gap: 2rem;
    align-content: start;
  }

  .lesgebied .sectiekop > p {
    max-width: 23rem;
  }

  .lesgebied-tekst > p {
    color: var(--inkt-zacht);
  }

  /* Plaatsen als knoppen in twee groepen, de kaart toont de gekozen plaats als stip. */
  .plaatsgroep {
    display: grid;
    gap: 0.8rem;
  }

  .plaatsgroep h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--inkt);
  }

  .plaatsen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .plaats {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.95rem;
    border: 1.5px solid rgb(21 18 61 / 0.42);
    border-radius: 999px;
    background: transparent;
    color: var(--inkt);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition:
      border-color 200ms var(--ease),
      background-color 200ms var(--ease),
      color 200ms var(--ease);
  }

  .plaats:hover,
  .plaats[data-actief="ja"] {
    border-color: var(--indigo);
    background: var(--wit);
    color: var(--indigo);
  }

  .plaats[aria-pressed="true"] {
    border-color: var(--indigo);
    background: var(--indigo);
    color: var(--wit);
  }

  .plaats-examen svg {
    flex: none;
    color: var(--indigo);
  }

  .plaats-examen[aria-pressed="true"] svg {
    color: var(--cyaan);
  }

  /*
   * Stippenkaart (15 oktober 2026): Nederland als raster van stippen, het lesgebied als cirkel met stippen in indigo,
   * grote steden als oriëntatie. Vlak op de sectie, geen kaartvel of schaduw.
   */
  .kaart-figuur {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    margin: 0;
  }

  /* Het kaartvel is de container voor stippen en labels (cqw), zodat die met de kaart meeschalen. */
  .kaart-vel {
    position: relative;
    width: 100%;
    max-width: min(100%, 30rem, calc((100svh - 8rem) * var(--kaart-a)));
    aspect-ratio: var(--kaart-a);
    container-type: inline-size;
  }

  /* Vanaf 64rem vast 32rem breed (± 605 px hoog), smaller als de kolom of de schermhoogte dat vraagt. */
  @media (min-width: 64rem) {
    .kaart-vel {
      max-width: min(100%, 32rem, calc((100svh - 9rem) * var(--kaart-a)));
    }
  }

  .kaart-vel > svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .kaart-stippen {
    fill: none;
    stroke: #a3a8d1;
    stroke-width: 2.5;
    stroke-linecap: round;
  }

  .kaart-stippen-gebied {
    stroke: var(--indigo);
  }

  .kaart-cirkel {
    fill: rgb(38 14 204 / 0.07);
  }

  .kaart-cirkel-rand,
  .kaart-golf {
    fill: none;
    stroke: var(--indigo);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
  }

  /* Rustige golf vanuit de cirkel, alleen met beweging (JavaScript en geen voorkeur voor minder beweging). */
  .kaart-golf {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
  }

  .beweging .kaart-golf {
    animation: kaart-golf 3.6s var(--ease) infinite;
  }

  @keyframes kaart-golf {
    from {
      opacity: 0.5;
      transform: scale(1);
    }

    to {
      opacity: 0;
      transform: scale(1.6);
    }
  }

  /* Geen pointer-events: none: dan raakt elementFromPoint (ontwerpdetector, QA) de SVG eronder en lijken de labels bedekt. */
  .kaart-markers {
    position: absolute;
    inset: 0;
    font-size: clamp(0.6875rem, 2.9cqw, 0.875rem);
  }

  .kaart-stad {
    position: absolute;
    width: 0;
    height: 0;
    color: var(--inkt);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
  }

  .kaart-stip {
    position: absolute;
    left: 0;
    top: 0;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--inkt);
    translate: -50% -50%;
  }

  .kaart-naam {
    position: absolute;
    top: 0;
    left: 0.5rem;
    translate: 0 -50%;
  }

  .kaart-stad[data-kant="links"] .kaart-naam {
    left: auto;
    right: 0.5rem;
  }

  .kaart-stad[data-kant="onder"] .kaart-naam {
    top: 0.5rem;
    left: 0;
    translate: -50% 0;
  }

  .kaart-gebiedlabel {
    position: absolute;
    color: var(--indigo);
    font-size: 1.15em;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    translate: 0.5rem -50%;
  }

  /* Gekozen plaats: witte stip met indigo rand in de cirkel; verborgen tot een knop actief is. */
  .kaart-plaats {
    position: absolute;
    width: clamp(0.75rem, 2.8cqw, 1rem);
    aspect-ratio: 1;
    border: 3px solid var(--indigo);
    border-radius: 50%;
    background: var(--wit);
    opacity: 0;
    translate: -50% -50%;
    scale: 0.3;
    transition:
      opacity 200ms var(--ease),
      scale 260ms var(--ease);
  }

  .kaart-plaats[data-actief="ja"] {
    opacity: 1;
    scale: 1;
  }

  /* Heel kleine kaart: kleinere letters, zodat de namen in het westen niet tegen elkaar lopen. */
  @container (max-width: 20rem) {
    .kaart-markers {
      font-size: 0.625rem;
    }
  }

  /* Binnenkomst: alleen met de klasse `beweging` (JavaScript en geen voorkeur voor minder beweging). */
  .beweging [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
  }

  .beweging [data-reveal].zichtbaar {
    opacity: 1;
    transform: none;
    transition:
      opacity 520ms var(--ease) calc(var(--i, 0) * 80ms),
      transform 520ms var(--ease) calc(var(--i, 0) * 80ms);
  }

  /* Eerste scherm: CSS-intro vanaf 35% dekking, zodat het grootste element meteen meetelt. */
  @keyframes intro {
    from {
      opacity: 0.35;
      transform: translateY(10px);
    }
  }

  @keyframes kwartslag {
    from {
      transform: rotate(-90deg);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .intro {
      animation: intro 620ms var(--ease) backwards;
      animation-delay: calc(var(--i, 0) * 80ms);
    }

    .ring-segment {
      animation: kwartslag 700ms var(--ease) 200ms backwards;
    }
  }

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

/* Focus: buiten de lagen, zodat geen onderdeel hem kan wegzetten. */
:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 3px;
}

.voet :focus-visible {
  outline-color: var(--wit);
}

.invoer:focus,
.invoer:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 2px;
  border-color: var(--indigo);
}

.keuze input:focus-visible + span,
.vinkje input:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 2px;
}

.carousel-spoor:focus-visible {
  outline-offset: 4px;
}

/* ---------- WordPress: aanvullingen op de oorspronkelijke stijl ---------- */
@layer delen {
  /* Gravity Forms: het lokveld tegen spam, net als .lokker buiten beeld. */
  .gform_validation_container {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* Geen tekenteller en geen eigen laadicoon; de knop toont dat het formulier bezig is. */
  .ginput_counter,
  .gform_ajax_spinner,
  .gform-loader {
    display: none;
  }

  .gform_wrapper fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
  }

  .gform_wrapper legend {
    padding: 0;
  }

  .gform_wrapper .gfield_required {
    color: inherit;
  }

  /* Gravity Forms zet het tekstvak in een eigen blok; zonder dit ontstaat er een regelrest onder het vak. */
  .ginput_container_textarea textarea {
    display: block;
  }

  /* De regel onder het heroformulier staat in de formuliervoet en blijft gecentreerd. */
  .hero-formulier .formulier-voet {
    justify-items: stretch;
  }

  /* Ingelogd staat de beheerbalk boven de pagina: de kopbalk blijft eronder plakken. */
  .admin-bar .kopbalk {
    top: 32px;
  }

  @media (max-width: 782px) {
    .admin-bar .kopbalk {
      top: 46px;
    }
  }

  /* Tekstpagina's uit de standaardeditor: de eerste kop zonder marge boven, zoals op de statische site. */
  .tekst-pagina > h2:first-child {
    margin-top: 0;
  }
}