/* ==========================================================================
   Buy Back Your Week — Kennisbank.

   Geen nieuwe stijlwereld: de kennisbank erft de tokens van nl-site.css
   (Graphite Console) en voegt alleen het leesidioom toe dat een kennisnetwerk
   nodig heeft — een leeskolom, een kennisnavigatie ernaast, en blokken voor
   direct antwoord, stappen, vergelijking, fouten en begrippen.

   Eén afwijking is bewust: de leesregel is smaller dan op de verkooppagina's
   (68 tekens) en de regelafstand ruimer. Dit is de enige plek op de site waar
   mensen minuten achter elkaar lezen in plaats van scannen.
   ========================================================================== */

.kbwrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* ---------------------------------------------------------------- kop --- */
.kbhero{border-bottom:1px solid var(--seam);padding:54px 0 38px}
.kbhero .crumb{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--faint);margin:0 0 18px}
.kbhero .crumb a{color:var(--muted);text-decoration:none}
.kbhero .crumb a:hover{color:var(--ink)}
.kbhero .crumb span{opacity:.5;padding:0 6px}
.kbhero h1{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(30px,4.4vw,50px);margin:0 0 16px;max-width:19ch}
.kbhero.wide h1{max-width:26ch}
.kbhero .lede{font-size:clamp(17px,1.5vw,19.5px);color:var(--ink-2);max-width:62ch;margin:0}
.kbhero .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.kbhero .meta b{font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--seam);
  padding:5px 9px;border-radius:var(--r)}
.kbhero .meta b.t{color:var(--graphite);background:var(--live);border-color:var(--live)}

/* ------------------------------------------------------------- zoeken --- */
.kbsearch{display:flex;gap:8px;margin-top:26px;max-width:540px}
.kbsearch input{flex:1;background:var(--panel);border:1px solid var(--seam);color:var(--ink);
  font:inherit;font-size:15px;padding:12px 14px;border-radius:var(--r)}
.kbsearch input:focus{outline:none;border-color:var(--live)}
.kbsearch button{background:var(--live);color:var(--graphite);border:0;font-family:var(--mono);
  font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;padding:0 18px;
  border-radius:var(--r);cursor:pointer}
.kbsearch button:hover{filter:brightness(1.08)}
#kbres{margin-top:14px;max-width:540px}
#kbres a{display:block;border:1px solid var(--seam);border-top:0;background:var(--panel);
  padding:11px 14px;text-decoration:none}
#kbres a:first-child{border-top:1px solid var(--seam)}
#kbres a:hover{background:var(--panel-2)}
#kbres b{display:block;font-size:14.5px;font-weight:500}
#kbres i{display:block;font-style:normal;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-top:3px}

/* ------------------------------------------------------------- layout --- */
.kbcols{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(28px,4vw,56px);
  padding:44px 0 64px;align-items:start}
.kbmain{min-width:0;max-width:68ch}
.kbside{position:sticky;top:78px;font-size:14.5px}

/* --------------------------------------------------------- leestekst --- */
.kbmain h2{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.3vw,26px);
  letter-spacing:-.01em;line-height:1.25;margin:44px 0 12px}
.kbmain h2:first-child{margin-top:0}
.kbmain h3{font-family:var(--display);font-weight:600;font-size:18px;margin:30px 0 8px}
.kbmain p{margin:0 0 16px;color:var(--ink-2);line-height:1.72}
.kbmain a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(200,255,77,.42)}
.kbmain a:hover{border-bottom-color:var(--live)}
.kblist{list-style:none;margin:0 0 18px;padding:0}
.kblist li{position:relative;padding:0 0 0 22px;margin:0 0 9px;color:var(--ink-2);line-height:1.62}
.kblist li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:1px;background:var(--live)}

/* ------------------------------------------------- direct antwoord ----- */
.kbanswer{border:1px solid var(--seam);border-left:2px solid var(--live);background:var(--panel);
  padding:22px 24px;margin:0 0 34px;border-radius:var(--r)}
.kbanswer .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--live);margin-bottom:9px}
.kbanswer p{margin:0;color:var(--ink);font-size:17.5px;line-height:1.66}

/* ------------------------------------------------------------ stappen -- */
.kbsteps{list-style:none;margin:0 0 20px;padding:0;counter-reset:s}
.kbsteps li{counter-increment:s;position:relative;padding:0 0 0 46px;margin:0 0 20px}
.kbsteps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--mono);font-size:12px;color:var(--live);border:1px solid var(--seam);
  width:32px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:var(--r)}
.kbsteps b{display:block;font-weight:600;font-size:16.5px;margin-bottom:4px}
.kbsteps p{margin:0}

/* -------------------------------------------------------- vergelijking - */
.kbvs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 24px}
.kbvs>div{border:1px solid var(--seam);background:var(--panel);padding:18px;border-radius:var(--r)}
.kbvs>div:first-child{border-top:2px solid var(--delegate)}
.kbvs>div:last-child{border-top:2px solid var(--automate)}
.kbvs h4{font-family:var(--display);font-size:16px;margin:0 0 12px}
.kbvs ul{list-style:none;margin:0;padding:0}
.kbvs li{position:relative;padding-left:18px;margin-bottom:8px;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.kbvs li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:1px;background:var(--muted)}
.kbtable{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:14.5px}
.kbtable th,.kbtable td{border:1px solid var(--seam);padding:10px 12px;text-align:left;vertical-align:top}
.kbtable th{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:400;background:var(--panel)}
.kbtable td:first-child{color:var(--ink);font-weight:500}
.kbtable td{color:var(--ink-2)}

/* ------------------------------------------------ voorbeeld & fouten --- */
.kbex{border-left:2px solid var(--seam);padding:2px 0 2px 18px;margin:0 0 20px}
.kbex b{display:block;font-size:15.5px;margin-bottom:5px}
.kbex p{margin:0;font-size:15.5px}
.kbmis{list-style:none;margin:0 0 20px;padding:0}
.kbmis li{position:relative;padding:0 0 0 26px;margin:0 0 11px;color:var(--ink-2);line-height:1.6}
.kbmis li::before{content:"×";position:absolute;left:4px;top:-1px;color:var(--eliminate);font-size:17px;line-height:1.5}

/* --------------------------------------------------------------- faq --- */
.kbfaq{margin:0 0 8px;border-top:1px solid var(--seam)}
.kbfaq details{border-bottom:1px solid var(--seam)}
.kbfaq summary{cursor:pointer;list-style:none;padding:15px 30px 15px 0;position:relative;
  font-weight:500;font-size:16px}
.kbfaq summary::-webkit-details-marker{display:none}
.kbfaq summary::after{content:"+";position:absolute;right:4px;top:13px;color:var(--live);font-size:18px}
.kbfaq details[open] summary::after{content:"–"}
.kbfaq p{margin:0 0 16px;font-size:15.5px}

/* ----------------------------------------------------------- bronnen --- */
.kbsrc{border-top:1px solid var(--seam);margin-top:34px;padding-top:18px}
.kbsrc h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:400;margin:0 0 10px}
.kbsrc ol{margin:0;padding-left:18px;font-size:14px;color:var(--muted)}
.kbsrc li{margin-bottom:6px}
.kbsrc a{color:var(--ink-2)}

/* ---------------------------------------------------------------- cta --- */
.kbcta{border:1px solid var(--seam);background:var(--panel-2);border-radius:var(--r);
  padding:clamp(22px,3vw,32px);margin:40px 0 0}
.kbcta .k{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--live);display:block;margin-bottom:10px}
.kbcta h3{font-family:var(--display);font-size:clamp(19px,2.2vw,23px);margin:0 0 10px;letter-spacing:-.01em}
.kbcta p{margin:0 0 18px;color:var(--ink-2)}
.kbcta .row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.kbcta .fine{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--faint);margin:0}

/* --------------------------------------------------------------- zij --- */
.kbside section{border-top:1px solid var(--seam);padding:16px 0}
.kbside section:first-child{border-top:0;padding-top:0}
.kbside h4{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);font-weight:400;margin:0 0 10px}
.kbside a{display:block;color:var(--ink-2);text-decoration:none;padding:5px 0;line-height:1.45}
.kbside a:hover{color:var(--ink)}
.kbside a.on{color:var(--live)}
.kbside .term{display:block;padding:7px 0;border-bottom:1px solid var(--seam-soft)}
.kbside .term:last-child{border-bottom:0}
.kbside .term b{display:block;font-weight:500;color:var(--ink);font-size:14.5px}
.kbside .term span{display:block;color:var(--faint);font-size:13px;line-height:1.45;margin-top:2px}
.kbtoc a{font-size:14px}

/* -------------------------------------------------------- overzichten -- */
.kbdomains{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1px;
  background:var(--seam);border:1px solid var(--seam);margin:0 0 44px}
.kbdomains a{background:var(--graphite);padding:24px;text-decoration:none;display:block;transition:background .12s}
.kbdomains a:hover{background:var(--panel)}
.kbdomains .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;color:var(--live)}
.kbdomains h3{font-family:var(--display);font-size:20px;margin:8px 0 8px;letter-spacing:-.01em}
.kbdomains p{margin:0 0 12px;color:var(--muted);font-size:14.5px;line-height:1.55}
.kbdomains .c{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}

.kbgroup{margin:0 0 40px}
.kbgroup>h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:400;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--seam)}
.kbitems{list-style:none;margin:0;padding:0}
.kbitems li{border-bottom:1px solid var(--seam-soft)}
.kbitems a{display:flex;gap:16px;align-items:baseline;padding:14px 0;text-decoration:none;color:var(--ink)}
.kbitems a:hover .t{color:var(--live)}
.kbitems .ty{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);min-width:96px;flex-shrink:0}
.kbitems .t{font-weight:500;font-size:16px;display:block;line-height:1.35}
.kbitems .d{display:block;color:var(--muted);font-size:14px;margin-top:3px;line-height:1.5}

/* ------------------------------------------------------------ begrip --- */
.kbdef{border:1px solid var(--seam);background:var(--panel);padding:22px 24px;border-radius:var(--r);margin:0 0 28px}
.kbdef p{margin:0;font-size:17.5px;color:var(--ink);line-height:1.6}
.kbrel{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.kbrel a{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-2);
  text-decoration:none;border:1px solid var(--seam);padding:6px 11px;border-radius:var(--r)}
.kbrel a:hover{border-color:var(--live);color:var(--ink)}

/* ----------------------------------------------------------- responsive */
@media (max-width:960px){
  .kbcols{grid-template-columns:1fr;gap:34px;padding-top:32px}
  .kbside{position:static;border-top:1px solid var(--seam);padding-top:8px}
  .kbvs{grid-template-columns:1fr}
  .kbtable{display:block;overflow-x:auto;white-space:nowrap}
}
@media (max-width:560px){
  .kbhero{padding:34px 0 26px}
  .kbitems a{flex-direction:column;gap:2px}
  .kbitems .ty{min-width:0}
}