/* ==========================================================================
   kennisbank.css — het overzicht en het artikel
   Laadt na vorm.css, dus als laatste. Een eigen laag en geen regels verspreid
   over site.css en look.css: de kennisbank is één component met één ontwerp,
   en die stond hiervoor over drie bestanden verdeeld met regels die elkaar
   over en weer terugdraaiden.
   ========================================================================== */

/* ---- 1 · Onderwerpen ---------------------------------------------------
   Kleur draagt hier informatie en geen versiering: dezelfde tint staat op de
   filterknop, op het icoon van de kaart en op het label boven het artikel.
   Daarom is de vijfkleurenreeks van de oude kaarten weg — die gaf de eerste
   kaart teal en de tweede lime zonder dat dat iets betekende.

   De klasse komt uit de plek van het onderwerp in de lijst (zie dra_kb_kleur),
   niet uit zijn naam. Een zesde onderwerp begint dus weer bij k1 en staat nooit
   zonder kleur.
   -------------------------------------------------------------------- */
.kb-ond      {--tint:var(--neutral-100);--op:var(--teal-900)}
.kb-ond--k1  {--tint:var(--teal-500);--op:var(--neutral-0)}
.kb-ond--k2  {--tint:var(--lime-300);--op:var(--teal-900)}
.kb-ond--k3  {--tint:var(--teal-100);--op:var(--teal-500)}
.kb-ond--k4  {--tint:var(--teal-900);--op:var(--lime-300)}
.kb-ond--k5  {--tint:var(--teal-200);--op:var(--teal-900)}

/* ---- 2 · De filterbalk -------------------------------------------------
   Zonder JavaScript staan alle artikelen er gewoon; dan heeft een knop die
   niets doet ook geen zin. Vandaar dat de balk aan .js hangt.
   -------------------------------------------------------------------- */
.kbfilter{display:none}
.js .kbfilter{
  display:flex;flex-wrap:wrap;gap:var(--space-2);
  margin-bottom:clamp(20px,2.4vw,32px);
}
.kbfilter__pill{
  display:inline-flex;align-items:center;gap:8px;
  min-height:var(--control-h-sm);padding:0 16px;
  border:0;box-shadow:inset 0 0 0 1px var(--border-subtle);
  background:var(--neutral-0);border-radius:var(--radius-pill);
  font:var(--weight-medium) var(--text-sm)/1 var(--font-sans);
  color:var(--text-body);cursor:pointer;
  transition:var(--transition-control);
}
.kbfilter__pill:hover{color:var(--text-heading);box-shadow:inset 0 0 0 1px var(--border-default)}
.kbfilter__pill[aria-pressed="true"]{
  background:var(--teal-900);color:var(--neutral-0);
  box-shadow:none;font-weight:var(--weight-semibold);
}
.kbfilter__pill:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.kbfilter__dot{
  width:9px;height:9px;border-radius:var(--radius-circle);flex:none;
  background:var(--tint);box-shadow:inset 0 0 0 1px rgba(6,42,58,.12);
}
.kbfilter__n{font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-subtle)}
.kbfilter__pill[aria-pressed="true"] .kbfilter__n{color:rgba(255,255,255,.6)}
.kbfilter__leeg{margin-top:var(--space-6);color:var(--text-muted);font-size:var(--text-sm)}

/* ---- 3 · De kaarten ----------------------------------------------------
   Icoon, onderwerp, kop, samenvatting, link onderaan — de volgorde van een
   artikelindex. De pijl zakt naar de onderkant zodat de kaarten in een rij op
   dezelfde lijn afsluiten, ook als de ene kop twee regels telt.
   -------------------------------------------------------------------- */
.kbgrid{gap:clamp(14px,1.6vw,20px)}
.kbkaart{
  gap:var(--space-3);padding:clamp(22px,2.2vw,28px);
  background:var(--neutral-0);
  box-shadow:inset 0 0 0 1px var(--border-subtle);
}
.kbkaart:hover{box-shadow:inset 0 0 0 1px var(--border-default),0 14px 36px rgba(6,42,58,.09)}
.kbkaart .chip-i{
  width:44px;height:44px;border-radius:var(--radius-md);
  background:var(--tint);color:var(--op);margin-bottom:var(--space-2);
}
.kbkaart .chip-i .i{width:21px;height:21px}
.kbkaart__tag{font:var(--weight-semibold) var(--text-xs)/1 var(--font-sans);color:var(--text-muted)}
.kbkaart h3{
  margin-top:0;font-size:var(--t-h3);color:var(--text-heading);
  letter-spacing:-0.015em;line-height:1.2;
}
.kbkaart p{
  margin:0;font-size:var(--text-sm);line-height:var(--leading-relaxed);
  color:var(--text-muted);
}
.kbkaart .link-arrow{margin-top:auto;padding-top:var(--space-4)}

/* Uitgefilterd: weg uit de opmaak én uit de tabvolgorde. Alleen doorzichtig
   maken zou een onzichtbare kaart aanklikbaar laten. */
.kbkaart[hidden]{display:none}

/* ---- 4 · Het artikel ---------------------------------------------------
   Eén leeskolom, gecentreerd op de kaart.
   -------------------------------------------------------------------- */
.kbart{max-width:none}
.kbart__kolom{max-width:72ch;margin-inline:auto}
.kbart h1{
  font-size:clamp(38px,5.4vw,68px);line-height:1.02;letter-spacing:-0.032em;
  /* Geen maximumbreedte: op 15 tekens afknijpen brak "Wat de inspectie toetst"
     in tweeën terwijl hij op één regel past. Langere koppen lopen door en
     worden door text-wrap:balance over twee regels verdeeld. */
  max-width:none;
}
.kbart .lede{
  margin-top:clamp(18px,2vw,24px);max-width:60ch;
  font-size:clamp(18px,1.5vw,21px);line-height:1.5;
}
.kbart__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);
  margin-top:clamp(24px,2.6vw,32px);padding-top:var(--space-5);
  border-top:1px solid var(--border-subtle);
  font-size:var(--text-sm);color:var(--text-muted);
}
.kbart__tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px 5px 10px;border-radius:var(--radius-pill);
  background:var(--neutral-100);
  font:var(--weight-semibold) var(--text-xs)/1.2 var(--font-sans);
  color:var(--text-heading);
}
.kbart__tag::before{
  content:"";width:9px;height:9px;border-radius:var(--radius-circle);flex:none;
  background:var(--tint);
}

/* De lopende tekst. De tussenkoppen stonden op --t-h3 (22px) naast een body van
   16px: te weinig verschil om een stuk van vier hoofdstukken te ordenen. */
.kbart .kb__body{
  max-width:none;margin-top:clamp(36px,4vw,52px);
  font-size:clamp(17px,1.35vw,19px);line-height:1.72;color:var(--text-body);
}
.kbart .kb__body h2{
  font-size:clamp(24px,2.2vw,31px);line-height:1.16;letter-spacing:-0.022em;
  color:var(--text-heading);margin-top:clamp(44px,4.6vw,68px);
}
.kbart .kb__body h2:first-child{margin-top:0}
.kbart .kb__body > * + *{margin-top:var(--space-5)}
.kbart .kb__body h2 + p{margin-top:var(--space-4)}
.kbart .kb__body strong{color:var(--text-heading);font-weight:var(--weight-semibold)}

/* Opsommingen in de lopende tekst. `.checks` zet elk item als flexrij neer met
   het vetgedrukte deel in een eigen kolom; in een sectie met vinkjes klopt dat,
   maar in een artikel breekt het "Norm 3.1.4." af van de zin die erachter
   hoort. Hier is het weer een gewone lijst met een punt ervoor. */
.kbart .kb__body ul{display:block;margin-left:0;padding-left:0;list-style:none}
.kbart .kb__body ul li{display:block;position:relative;padding-left:26px}
.kbart .kb__body ul li + li{margin-top:var(--space-4)}
.kbart .kb__body ul li::before{
  content:"";position:absolute;left:4px;top:.66em;
  width:7px;height:7px;border-radius:var(--radius-circle);background:var(--teal-300);
}

/* ---- 5 · Verder lezen --------------------------------------------------
   Drie tinten naast elkaar. Op het overzicht zijn de kaarten wit: daar is de
   lijst de hoofdzaak en wijst kleur alleen het onderwerp aan. Hier zijn het
   drie losse uitnodigingen aan het eind van een lap tekst, en dan mag de rij
   zelf het werk doen.
   -------------------------------------------------------------------- */
.kbverder .sechead h2{font-size:var(--t-h3);color:var(--text-heading);max-width:none}
.kbverder .kbkaart{box-shadow:none}
.kbverder .kbkaart:hover{box-shadow:0 14px 36px rgba(6,42,58,.09)}
/* Het icoonvlak draagt de onderwerpkleur en kan dus dezelfde tint krijgen als
   de kaart eronder — een haarlijn houdt het vierkant zichtbaar. */
.kbverder .kbkaart .chip-i{box-shadow:inset 0 0 0 1px rgba(6,42,58,.10)}
.kbverder .kbkaart p{color:var(--text-body)}

/* De inktkaart staat vooraan en niet achteraan: onder deze rij volgen de
   donkere oproep en de donkere voettekst, en drie inktvlakken op een rij maakt
   van het einde van de pagina één zwart blok.
   teal-50 zat hier eerst op de eerste kaart en viel weg tegen de grijze pagina:
   die tint scheelt één stap met #EFF4F5, en zonder haarlijn zag je er geen
   kaart meer staan. */
.kbverder .kbkaart:nth-child(1){background:var(--teal-900)}
.kbverder .kbkaart:nth-child(1) h3{color:var(--neutral-0)}
.kbverder .kbkaart:nth-child(1) p,
.kbverder .kbkaart:nth-child(1) .kbkaart__tag{color:rgba(255,255,255,.72)}
.kbverder .kbkaart:nth-child(1) .link-arrow{color:var(--lime-300)}
.kbverder .kbkaart:nth-child(1) .chip-i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.20)}
.kbverder .kbkaart:nth-child(2){background:var(--teal-100)}
.kbverder .kbkaart:nth-child(3){background:var(--lime-100)}

.kbverder__alles{margin-top:clamp(20px,2.4vw,28px)}