/* Ludendo v3 · de kennispagina's: /overstappen/, /bewaartermijnen/ en /archief/ (en hun Engelse versie).
   Waarom eigen pagina's (SEO-ronde, 12 nov 2026): hier zoeken scholen echt op. Ze volgen de vorm van /scholen/:
   grote kop, rustige secties met haarlijnen, de vragen onderaan. Geen toestel in de opening: er is geen eigen scherm
   dat hier iets toevoegt, en een half leeg toestel mag niet. In de plaats daarvan een kaart "In het kort".
   Alleen tokens uit style.css, geen eigen kleuren. */

/* Opening: rechts de kaart "In het kort" */
.kennis-held .rol-held-in { align-items: start; }
@media (min-width: 960px) { .kennis-held .rol-held-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.kennis-held .moment-noot { margin-top: 20px; }
.kennis-kort { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 20px; padding: 28px clamp(20px, 3vw, 32px); }
@media (min-width: 960px) { .kennis-kort { margin-top: 56px; } }
.kennis-kort h2 { font-size: var(--letter-groot); letter-spacing: -0.01em; }
.kennis-kort dl { margin-top: 12px; }
.kennis-kort dl > div { padding: 14px 0; border-bottom: 1px solid var(--lijn); }
.kennis-kort dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.kennis-kort dt { font-weight: 600; }
.kennis-kort dd { margin: 2px 0 0; color: var(--grijs); line-height: 1.5; }

/* Een stand achter een functie, zoals op /scholen/ */
.label-stil { display: block; margin-top: 10px; font-size: var(--letter-klein); color: var(--grijs); }
.label-stil strong { font-weight: 600; color: var(--inkt); }
.kennis-kort .label-stil { margin-top: 4px; }

/* Twee kolommen: links een tijdlijn of lijst, rechts een blok */
.kennis-raster { display: grid; gap: var(--gat); margin-top: 56px; }
@media (min-width: 960px) { .kennis-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.kennis-blok h3 { margin-bottom: 8px; }

/* Lijsten met een haarlijn per regel */
.kennis-lijst { list-style: none; border-top: 1px solid var(--lijn); max-width: 40em; }
.kennis-lijst li { padding: 14px 0; border-bottom: 1px solid var(--lijn); line-height: 1.5; color: var(--grijs); }
.kennis-lijst b { color: var(--inkt); font-weight: 600; }

/* Genummerde stappen */
.kennis-stappen { list-style: none; counter-reset: stap; margin-top: 40px; max-width: 46em; border-top: 1px solid var(--lijn); }
.kennis-stappen li { counter-increment: stap; position: relative; padding: 16px 0 16px 44px; border-bottom: 1px solid var(--lijn); line-height: 1.5; color: var(--grijs); }
.kennis-stappen li::before { content: counter(stap); position: absolute; left: 0; top: 14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-zacht); color: var(--accent-tekst); font-size: var(--letter-klein); font-weight: 700; }
.kennis-stappen b { color: var(--inkt); font-weight: 600; }

/* Een rustig tekstblok met uitleg onder drie kolommen */
.kennis-noot { margin-top: var(--gat); max-width: 46em; display: grid; gap: 16px; }
.kennis-noot p { color: var(--grijs); line-height: 1.6; }
.kennis-noot b { color: var(--inkt); font-weight: 600; }
.kennis-bronnen { margin-top: 24px; font-size: var(--letter-noot); line-height: 1.5; color: var(--grijs); max-width: 46em; }

/* De tabel met bewaartermijnen. Op de telefoon wordt elke rij een blok: geen horizontaal scrollen. */
.kennis-tabel-vak { margin-top: 48px; }
.kennis-tabel { width: 100%; border-collapse: collapse; font-size: var(--letter-tekst); line-height: 1.5; }
.kennis-tabel th, .kennis-tabel td { text-align: left; vertical-align: top; padding: 16px 20px 16px 0; border-bottom: 1px solid var(--lijn); }
.kennis-tabel thead th { font-size: var(--letter-noot); font-weight: 600; color: var(--grijs); border-bottom-color: color-mix(in srgb, var(--grijs) 45%, var(--lijn)); }
.kennis-tabel tbody th { font-weight: 600; width: 38%; }
.kennis-tabel td { color: var(--grijs); }
.kennis-tabel td b { color: var(--inkt); font-weight: 600; }
.kennis-tabel td:last-child { width: 26%; font-size: var(--letter-noot); padding-right: 0; }
@media (max-width: 719px) {
  .kennis-tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .kennis-tabel, .kennis-tabel tbody, .kennis-tabel tr, .kennis-tabel th, .kennis-tabel td { display: block; width: auto !important; }
  .kennis-tabel tr { padding: 16px 0; border-bottom: 1px solid var(--lijn); }
  .kennis-tabel tbody th, .kennis-tabel td { border: 0; padding: 0; }
  .kennis-tabel td { margin-top: 6px; }
}

/* Bronnen onderaan */
#bronnen { padding-top: 0; }
.kennis-bronkop { font-size: var(--letter-groot); letter-spacing: -0.01em; }
.kennis-bronlijst { margin-top: 16px; padding-left: 1.2em; max-width: 52em; font-size: var(--letter-noot); color: var(--grijs); line-height: 1.5; }
.kennis-bronlijst li + li { margin-top: 8px; }

/* Na de kritiekronde (12 nov 2026) */
/* Bronnen is een kleine kop, geen sectiekop: de gedeelde h2-regel won eerst */
#bronnen .kennis-bronkop { font-size: var(--letter-groot); line-height: 1.3; letter-spacing: -0.01em; }
/* Stappen rustig: grijze cijfers in plaats van blauwe rondjes, even breed als de intro */
.kennis-stappen { max-width: 40em; }
.kennis-stappen li { padding-left: 36px; }
.kennis-stappen li::before { background: none; width: auto; height: auto; top: 16px; display: block; color: var(--grijs); font-size: var(--letter-tekst); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Kaart In het kort: rustiger labels, en op een tablet niet als brede strook */
.kennis-kort dl > div { padding: 12px 0; }
.kennis-kort .label-stil strong { color: var(--grijs); }
@media (min-width: 600px) and (max-width: 959px) { .kennis-kort { max-width: 36rem; } }
/* Breed: de opening even ruim als op /scholen/; het blok naast de tijdlijn op één lijn met de eerste kop en het blijft in beeld */
@media (min-width: 960px) {
  .kennis-held .rol-held-in { min-height: 560px; align-items: center; }
  .kennis-held .kennis-kort { margin-top: 0; }
  .kennis-raster > .kennis-blok { padding-top: calc(var(--letter-klein) * 1.4 + 4px); position: sticky; top: 96px; align-self: start; }
}
/* Telefoon: lijn boven de eerste rij, en de termijn zelf donker (dat is het antwoord) */
@media (max-width: 719px) {
  .kennis-tabel tbody { display: block; border-top: 1px solid var(--lijn); }
  .kennis-tabel td:nth-child(2) { color: var(--inkt); }
  .kennis-tabel td:last-child { margin-top: 4px; }
}
.kennis-blok-tekst { color: var(--grijs); line-height: 1.6; max-width: 34em; }