/* De kennisbank deelt het papierthema van de landingspagina, maar niet zijn
   bundel: deze pagina's laden geen JavaScript en geen Tailwind, alleen dit
   bestand. Zie scripts/bouw-kennisbank.mjs. */
:root {
  --papier: #f6f3ee;
  --papier-licht: #fbf9f5;
  --papier-diep: #f1ece3;
  --lijn: #e5e0d6;
  --inkt: #1b1f23;
  --inkt-zacht: #3c4248;
  --inkt-licht: #6b7178;
  --bordeaux: #8a2727;
  color-scheme: light;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--bordeaux); }
a:hover { color: #691c1c; }
.balk {
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
  padding: 14px clamp(18px, 4vw, 56px); border-bottom: 1px solid var(--lijn); background: var(--papier-licht);
}
.merk { font: 600 20px/1 Georgia, "Times New Roman", serif; color: var(--inkt); text-decoration: none; letter-spacing: 0.04em; }
.balk-nav { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; font-size: 14px; }
.balk-nav a { text-decoration: none; }
.knop { background: var(--bordeaux); color: var(--papier-licht); padding: 9px 18px; border-radius: 2px; }
.knop:hover { background: #691c1c; color: var(--papier-licht); }
.kruimels {
  padding: 12px clamp(18px, 4vw, 56px); font-size: 13px; color: var(--inkt-licht);
  border-bottom: 1px solid var(--lijn); background: var(--papier-licht);
}
.kruimels a { color: var(--inkt-licht); }
.kruimels .scheiding { padding: 0 8px; }
main { max-width: 1100px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) clamp(18px, 4vw, 56px); }
.bovenkop { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--inkt-licht); }
h1 { font: 400 clamp(28px, 3.6vw, 46px)/1.12 Georgia, "Times New Roman", serif; margin: 0 0 18px; }
h2 { font: 400 clamp(21px, 2.2vw, 28px)/1.2 Georgia, "Times New Roman", serif; margin: 40px 0 12px; }
h3 { font: 600 17px/1.3 inherit; margin: 26px 0 8px; }
p { margin: 0 0 14px; max-width: 74ch; }
.lead { font-size: 17px; color: var(--inkt-zacht); }
.velden { margin: 0 0 20px; border-top: 1px solid var(--lijn); }
.velden > div { padding: 12px 0; border-bottom: 1px solid var(--lijn); display: grid; gap: 4px 24px; }
@media (min-width: 720px) { .velden > div { grid-template-columns: 220px 1fr; } }
.velden dt { font-size: 13px; letter-spacing: 0.04em; color: var(--inkt-licht); }
.velden dd { margin: 0; color: var(--inkt-zacht); max-width: 74ch; }
.kaarten, .koppelingen { list-style: none; margin: 0 0 24px; padding: 0; }
.kaarten { display: grid; gap: 1px; background: var(--lijn); border: 1px solid var(--lijn); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.kaarten > li { background: var(--papier-licht); }
.kaarten a { display: block; padding: 18px 20px; text-decoration: none; color: inherit; height: 100%; }
.kaarten a:hover { background: var(--papier-diep); }
.kaart-titel { display: block; font: 400 19px/1.25 Georgia, "Times New Roman", serif; color: var(--inkt); margin-bottom: 6px; }
.kaart-regel { display: block; font-size: 14px; color: var(--inkt-zacht); }
.kaart-meta { display: block; margin-top: 8px; font-size: 12.5px; letter-spacing: 0.04em; color: var(--inkt-licht); }
.koppelingen { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.koppelingen li { list-style: none; }
.koppelingen a { display: inline-block; border: 1px solid var(--lijn); background: var(--papier-licht); padding: 6px 12px; border-radius: 2px; font-size: 14px; text-decoration: none; }
.koppelingen a:hover { background: var(--papier-diep); }
table { border-collapse: collapse; width: 100%; margin: 0 0 24px; font-size: 14.5px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
th { font-weight: 600; color: var(--inkt-licht); font-size: 13px; letter-spacing: 0.04em; }
.tabelomhulsel { overflow-x: auto; }
footer { border-top: 1px solid var(--lijn); background: var(--papier-licht); padding: 28px clamp(18px, 4vw, 56px); font-size: 13px; color: var(--inkt-licht); }
footer p { max-width: 90ch; }
.talen { display: flex; gap: 10px; letter-spacing: 0.08em; }
.telling { font-size: 13px; color: var(--inkt-licht); margin-bottom: 20px; }