/* Kennisbank: overzicht en begrippen in een docs-indeling.
   Links een vaste zijbalk met zoekveld en alle begrippen per categorie,
   in het midden de inhoud, en op begrippagina's rechts "Op deze pagina". */

:root{
  --kb-ink:#0F0E0C;--kb-mag:#E8294A;--kb-mid:#4A4840;--kb-soft:#6B6866;--kb-faint:#8F8B85;
  --kb-line:#E6E3DE;--kb-line2:#D6D2CB;--kb-tint:#F6F5F2;--kb-actief:#EEECE7;
  --kb-breedte:1240px;
}

/* De menubalk volgt de bredere indeling, zodat het logo boven de zijbalk staat. */
body.kb-pagina nav.nav{--paginabreedte:var(--kb-breedte);}

.kb{max-width:var(--kb-breedte);margin:0 auto;padding:0 24px;box-sizing:border-box;
  display:grid;grid-template-columns:232px minmax(0,1fr);column-gap:56px;}
.kb--begrip{grid-template-columns:232px minmax(0,1fr) 200px;}

/* ---------- Zijbalk ---------- */
.kb-side{position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto;
  padding:40px 6px 40px 0;box-sizing:border-box;font-family:var(--ff-body);}
/* Smalle, afgeronde scrollbalk die pas donkerder wordt als je over de zijbalk beweegt. */
.kb-side::-webkit-scrollbar{width:10px;}
.kb-side::-webkit-scrollbar-track{background:transparent;margin:40px 0;}
.kb-side::-webkit-scrollbar-thumb{background:#ECE9E4;border-radius:10px;border:3px solid #fff;}
.kb-side:hover::-webkit-scrollbar-thumb{background:#D6D2CB;}
.kb-side::-webkit-scrollbar-thumb:hover{background:#B5B1AA;}
@supports not selector(::-webkit-scrollbar){.kb-side{scrollbar-width:thin;scrollbar-color:#D6D2CB transparent;}}
.kb-zoek{display:flex;align-items:center;gap:8px;height:34px;padding:0 8px 0 10px;
  border:1px solid var(--kb-line);border-radius:8px;background:#fff;
  transition:border-color .15s,box-shadow .15s;}
.kb-zoek:focus-within{border-color:var(--kb-line2);box-shadow:0 0 0 3px rgba(15,14,12,.05);}
.kb-zoek svg{width:15px;height:15px;flex:none;color:var(--kb-faint);}
.kb-zoek input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:0;
  font:inherit;font-size:14px;color:var(--kb-ink);}
.kb-zoek input::placeholder{color:var(--kb-faint);}
.kb-zoek input::-webkit-search-cancel-button{display:none;}
.kb-zoek kbd{font-family:var(--ff-mono);font-size:11px;line-height:1;color:var(--kb-faint);
  padding:3px 6px;border:1px solid var(--kb-line);border-radius:4px;background:var(--kb-tint);}

.kb-side-knop{display:none;}

.kb-nav{margin-top:14px;interpolate-size:allow-keywords;}
.kb-nav ul{list-style:none;margin:0;padding:0;}

/* Categorieën als uitklapbare groep; de begrippen staan ingesprongen eronder. */
.kb-nav-groep{margin:1px 0;}
.kb-nav-groep summary{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px;
  list-style:none;cursor:pointer;user-select:none;font-size:14px;font-weight:500;line-height:1.45;
  color:var(--kb-ink);transition:background .12s;}
.kb-nav-groep summary::-webkit-details-marker{display:none;}
.kb-nav-groep summary:hover{background:var(--kb-tint);}
.kb-nav-groep summary:focus-visible{outline:2px solid var(--kb-mag);outline-offset:-2px;}
.kb-ic{width:16px;height:16px;flex:none;color:var(--kb-mid);}
.kb-chev{width:14px;height:14px;flex:none;margin-left:auto;color:var(--kb-faint);
  transform:rotate(-90deg);transition:transform .2s ease;}
.kb-nav-groep[open] > summary .kb-chev{transform:none;}
.kb-nav-groep::details-content{block-size:0;overflow:hidden;
  transition:block-size .26s cubic-bezier(.2,.7,.2,1),content-visibility .26s allow-discrete;}
.kb-nav-groep[open]::details-content{block-size:auto;}
.kb-nav-groep ul{margin:2px 0 8px 15px;padding:0 0 0 10px;border-left:1px solid var(--kb-line);}
.kb-nav-groep a{display:block;padding:5px 8px;margin:1px 0;border-radius:6px;font-size:13.5px;
  line-height:1.45;color:var(--kb-soft);text-decoration:none;transition:background .12s,color .12s;}
.kb-nav-groep a:hover{background:var(--kb-tint);color:var(--kb-ink);}
.kb-nav-groep a[aria-current="page"]{background:var(--kb-actief);color:var(--kb-ink);font-weight:600;}
.kb-nav-groep a:focus-visible{outline:2px solid var(--kb-mag);outline-offset:-2px;}
.kb-nav-groep[hidden],.kb-nav li[hidden]{display:none;}
.kb-nav-leeg{padding:10px 8px;font-size:13px;color:var(--kb-faint);}

/* ---------- Overzicht ---------- */
.kb-main{min-width:0;padding:40px 0 96px;}
.kb-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;font-size:14px;line-height:1.4;
  color:var(--kb-soft);}
.kb-crumb a{color:var(--kb-soft);text-decoration:none;transition:color .15s;}
.kb-crumb a:hover{color:var(--kb-ink);}
.kb-crumb-sep{color:#B5B1AA;}
.kb-main h1{font-family:var(--ff-disp);font-size:clamp(30px,5vw,44px);font-weight:800;
  letter-spacing:-1px;line-height:1.1;margin:20px 0 0;color:var(--kb-ink);}
.kb-lead{font-size:17px;line-height:1.6;color:var(--kb-soft);margin:12px 0 0;max-width:600px;}

.kb-sectie{margin-top:56px;scroll-margin-top:24px;}
.kb-sectie[hidden]{display:none;}
.kb-sectie h2{font-family:var(--ff-disp);font-size:22px;font-weight:700;letter-spacing:-.4px;
  line-height:1.25;margin:0 0 16px;color:var(--kb-ink);}

.kb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.kb-kaart{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--kb-line);
  border-radius:10px;background:#fff;color:inherit;text-decoration:none;
  transition:border-color .15s,background .15s,box-shadow .15s;}
.kb-kaart:hover{border-color:var(--kb-line2);background:#FCFBF9;box-shadow:0 1px 2px rgba(15,14,12,.04);}
.kb-kaart:focus-visible{outline:2px solid var(--kb-mag);outline-offset:2px;}
.kb-kaart[hidden]{display:none;}
.kb-kaart-t{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;line-height:1.35;
  color:var(--kb-ink);}
.kb-kaart-t svg{width:16px;height:16px;flex:none;color:var(--kb-faint);}
.kb-kaart-d{font-size:14px;line-height:1.5;color:var(--kb-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* Populair: kaarten met een beeldvlak. */
.kb-kaart--pop{padding:8px 8px 14px;}
.kb-kaart--pop .kb-kaart-t,.kb-kaart--pop .kb-kaart-d{padding:0 10px;}
.kb-kaart--pop .kb-kaart-t{margin-top:8px;}
.kb-beeld{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/7;
  border-radius:7px;overflow:hidden;background:var(--kb-tint);
  background-image:linear-gradient(rgba(15,14,12,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,14,12,.045) 1px,transparent 1px);
  background-size:22px 22px;background-position:-1px -1px;}
.kb-beeld::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 50%,transparent 40%,var(--kb-tint) 100%);}
.kb-beeld b{position:relative;z-index:1;font-family:var(--ff-disp);font-size:clamp(28px,4vw,40px);
  font-weight:800;letter-spacing:-1px;color:var(--kb-ink);
  padding:10px 18px;border-radius:12px;background:#fff;border:1px solid var(--kb-line);
  box-shadow:0 8px 24px -12px rgba(15,14,12,.18);transition:transform .25s ease;}
.kb-beeld b::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--kb-mag);margin-left:4px;vertical-align:.5em;}
.kb-kaart--pop:hover .kb-beeld b{transform:translateY(-2px);}

.kb-leeg{margin:48px 0 0;font-size:15px;color:var(--kb-soft);}
.kb-leeg[hidden]{display:none;}

/* ---------- Begrippagina ---------- */
.kb main.lt{max-width:680px;width:100%;margin:0 auto;padding-left:0;padding-right:0;min-width:0;}

.kb-toc{position:sticky;top:0;align-self:start;padding:120px 0 40px;font-family:var(--ff-body);}
.kb-toc[hidden]{display:none;}
.kb-toc-kop{font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--kb-faint);margin:0 0 10px;}
.kb-toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--kb-line);}
.kb-toc a{display:block;margin-left:-1px;padding:4px 0 4px 12px;border-left:1px solid transparent;
  font-size:13px;line-height:1.45;color:var(--kb-soft);text-decoration:none;transition:color .15s,border-color .15s;}
.kb-toc a:hover{color:var(--kb-ink);}
.kb-toc a.is-actief{color:var(--kb-ink);border-left-color:var(--kb-ink);font-weight:500;}

/* Kopjes met een link naar die plek. */
.kb-anker-kop{position:relative;scroll-margin-top:24px;}
.kb-anker{position:absolute;left:-22px;top:50%;transform:translateY(-50%);width:18px;
  font-family:var(--ff-body);font-size:.75em;font-weight:500;color:var(--kb-faint);
  text-decoration:none;opacity:0;transition:opacity .15s,color .15s;}
.kb-anker-kop:hover .kb-anker,.kb-anker:focus-visible{opacity:1;}
.kb-anker:hover{color:var(--kb-mag);}
.kb-anker.is-gekopieerd::after{content:attr(data-ok);position:absolute;left:22px;top:50%;
  transform:translateY(-50%);white-space:nowrap;font-size:12px;font-weight:500;color:var(--kb-mid);
  background:#fff;border:1px solid var(--kb-line);border-radius:6px;padding:2px 6px;}

/* Vorige en volgende begrip. */
.kb-pv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:48px 0 0;
  font-family:var(--ff-body);}
.kb-pv a{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--kb-line);
  border-radius:10px;text-decoration:none;color:inherit;transition:border-color .15s,background .15s;}
.kb-pv a:hover{border-color:var(--kb-line2);background:#FCFBF9;}
.kb-pv a:focus-visible{outline:2px solid var(--kb-mag);outline-offset:2px;}
.kb-pv-l{font-size:12px;color:var(--kb-faint);}
.kb-pv-t{font-size:15px;font-weight:600;color:var(--kb-ink);line-height:1.35;}
.kb-pv-volg{grid-column:2;text-align:right;align-items:flex-end;}

/* ---------- Schermbreedtes ---------- */
@media (max-width:1199px){
  .kb--begrip{grid-template-columns:232px minmax(0,1fr);}
  .kb-toc{display:none;}
}
@media (max-width:959px){
  .kb,.kb--begrip{grid-template-columns:minmax(0,1fr);column-gap:0;}
  .kb-side{position:static;max-height:none;overflow:visible;padding:28px 0 0;}
  .kb-zoek{height:40px;}
  .kb-zoek kbd{display:none;}
  .kb-side-knop{display:flex;align-items:center;justify-content:space-between;width:100%;
    margin-top:10px;padding:10px 12px;border:1px solid var(--kb-line);border-radius:8px;background:#fff;
    font:inherit;font-size:14px;font-weight:500;color:var(--kb-ink);cursor:pointer;}
  .kb-side-knop svg{width:16px;height:16px;color:var(--kb-faint);transition:transform .2s;}
  .kb-side-knop[aria-expanded="true"] svg{transform:rotate(180deg);}
  .kb-nav{display:none;margin-top:6px;padding:4px 6px 8px;border:1px solid var(--kb-line);border-radius:8px;}
  .kb-side.is-open .kb-nav,.kb-side.is-zoekend .kb-nav{display:block;}
  .kb-main{padding-top:28px;}
  /* Op een begrip blijft de zijbalk weg; het kruimelpad leidt terug. */
  .kb--begrip .kb-side{display:none;}
  .kb-anker{display:none;}
}
@media (max-width:640px){
  .kb-grid{grid-template-columns:minmax(0,1fr);}
  .kb-pv{grid-template-columns:minmax(0,1fr);}
  .kb-pv-volg{grid-column:1;}
}