/* Kennisbank: scanbaarheid-laag (19 jul, Daan-feedback).
   Prijzen en conclusies moeten eruit springen zonder het verhaal te slopen:
   prijs-ankers in de hero, een inhoudsopgave die meesticky't, een rekenblok
   in mono, en tags + een uitgelicht artikel op de hub. */

/* Prijs-ankers in de artikel-hero */
.kb-prijzen { display: flex; flex-wrap: wrap; gap: 12px 34px; margin-top: 24px; }
.kb-prijs { display: flex; flex-direction: column; gap: 3px; }
.kb-prijs b {
  font-family: var(--font-kop); font-weight: 800;
  font-size: clamp(24px, 3vw, 34px); line-height: 1.04;
  color: var(--navy); letter-spacing: -.02em;
  transition: color .2s ease;
}
.kb-prijs b i { font-style: normal; font-family: var(--font-mono); font-weight: 500; font-size: .5em; color: var(--tekst-muted); letter-spacing: 0; }
.kb-prijs small { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--label); }
a.kb-prijs:hover b { color: var(--koper); }
.kb-prijzen-noot { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--label); margin-top: 12px; }

/* Op deze pagina: inhoudsopgave, sticky onder de hoofdnav op desktop */
.kb-toc {
  position: sticky; top: 64px; z-index: 40;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--haarlijn);
  border-bottom: 1px solid var(--haarlijn);
  padding: 10px max(var(--maat), calc((100% - 1080px) / 2 + var(--maat)));
  display: flex; align-items: center; gap: 6px 20px; flex-wrap: wrap;
}
@supports not (backdrop-filter: blur(8px)) { .kb-toc { background: rgba(255,255,255,.98); } }
.kb-toc-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--label); }
.kb-toc a { font-family: var(--font-mono); font-size: 12.5px; color: var(--tekst-muted); transition: color .2s ease; }
.kb-toc a:hover { color: var(--koper); }
@media (max-width: 760px) { .kb-toc { position: static; } }
.kb-anker { scroll-margin-top: 118px; }

/* Rekenblok: de som die anders midden in een alinea verdwijnt */
.kb-som {
  background: var(--navy);
  border: 1px solid #22314A;
  border-radius: 14px;
  padding: 22px 26px;
  margin: 20px 0 6px;
  max-width: 560px;
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-mono);
}
.kb-som-regel { font-size: 14px; color: rgba(232,238,248,.75); }
.kb-som-uitkomst {
  font-size: clamp(17px, 2vw, 21px); font-weight: 600; color: #fff;
  border-top: 1px solid rgba(232,238,248,.18);
  padding-top: 10px; margin-top: 6px;
}
.kb-som-uitkomst em { font-style: normal; color: var(--mk-groen, #4CAF7D); }
.kb-subkop { font-family: var(--font-kop); font-weight: 600; font-size: clamp(18px, 2.2vw, 22px); color: var(--navy); margin-top: clamp(26px, 3.4vw, 42px); }

/* Hub: uitgelicht artikel + type-tags op de rijen */
.kb-featured {
  display: flex; align-items: flex-start; gap: 18px;
  background: var(--navy);
  border: 1px solid #22314A;
  border-radius: 16px;
  padding: clamp(22px, 3vw, 30px) clamp(22px, 3.2vw, 32px);
  margin: 30px 0 20px;
}
.kb-featured .kbf-body { flex: 1; }
.kbf-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(232,238,248,.55); }
.kb-featured h3 { font-family: var(--font-kop); font-weight: 800; font-size: clamp(22px, 2.8vw, 31px); color: #fff; margin-top: 8px; transition: color .2s ease; }
.kb-featured p { color: rgba(232,238,248,.78); font-size: 15.5px; line-height: 1.65; margin-top: 10px; max-width: 72ch; }
.kb-featured p b { color: #fff; font-weight: 600; }
.kb-featured .pijl { font-size: 24px; color: var(--koper); align-self: center; transition: transform .2s ease; }
a.kb-featured:hover h3 { color: var(--koper); }
a.kb-featured:hover .pijl { transform: translateX(6px); }
@media (max-width: 560px) { .kb-featured { flex-direction: column; } .kb-featured .pijl { align-self: flex-start; } }

/* .row-tag staat sinds 25 jul 2026 in site.css: de rij-component wordt ook buiten de
   kennisbank-hub gebruikt (verwante gidsen onder een artikel), en die pagina's laden
   kennisbank.css niet. */