/* ===================================================================
   KENNISBANK ONLINE — HUISSTIJL VOOR DE KENNISBANK-PLUGIN
   -------------------------------------------------------------------
   Premium donkere merkstijl met GROEN als actiekleur, lettertype
   Manrope. Spiegelt builds/wp-kennisbank-child/assets/css/tokens.css.

   Zelfstandig opgezet: alle merkwaarden staan als --kb-* tokens binnen
   de kennisbank-wrappers, zodat de plugin óók werkt zonder het
   child-thema (bv. op een schone WordPress-installatie).

   Leeskeuze: lange artikelen krijgen een lichte "sand"-leesvlakte voor
   maximale leesbaarheid; accentblokken (CTA) zijn premium donker navy.
   Rechte, strakke blokranden — bewust geen fade-overgangen.
   =================================================================== */

.kennisbank-single,
.kennisbank-archive,
main.kennisbank-zoek {
  /* Donkerblauw-spectrum */
  --kb-navy-950: #07142B;
  --kb-navy-900: #0A1B3D;
  --kb-navy-850: #0C2150;
  --kb-navy-800: #0F2A5C;
  --kb-navy-700: #002E75;

  /* Accenten — groen = actie */
  --kb-cyan:         #00A1F1;
  --kb-cyan-bright:  #38BDF8;
  --kb-green:        #8BC53F;
  --kb-green-bright: #A6E22E;
  --kb-gold:         #FFC24B;

  /* Neutraal */
  --kb-white:     #FFFFFF;
  --kb-ink:       #0B1220;
  --kb-sand:      #F1EFEC;
  --kb-sand-deep: #E7E3DD;
  --kb-muted:     #586072;
  --kb-line:      rgba(11, 18, 32, 0.10);

  /* Typografie & vorm */
  --kb-font:        'Manrope', system-ui, -apple-system, sans-serif;
  --kb-radius:      14px;
  --kb-radius-lg:   22px;
  --kb-radius-pill: 999px;

  /* Effecten */
  --kb-shadow-card: 0 24px 60px -20px rgba(0, 0, 0, 0.18);
  --kb-glow-green:  0 0 40px rgba(139, 197, 63, 0.35);
  --kb-grad-accent: linear-gradient(120deg, var(--kb-green-bright), var(--kb-cyan));
  --kb-grad-green:  linear-gradient(135deg, var(--kb-green-bright), var(--kb-green) 55%, #5fa300);

  font-family: var(--kb-font);
  -webkit-font-smoothing: antialiased;
}

/* ── Layout ─────────────────────────────────────────────────────────
   Richting A (B-088): donkere hero-band + volle-breedte witte contentzone.
   De <main>-elementen zijn neutrale wrappers; background, max-width en
   padding zitten nu op .kennisbank-hero en .kennisbank-content (zie onder).
   Het vroegere "zwevend-wit-blok"-probleem is opgelost: beide zones zijn
   100 vw breed en sluiten naadloos aan op de donkere site-chrome. */
.kennisbank-single {
  display: block; /* layout via .kennisbank-hero / .kennisbank-content */
}

.kennisbank-archive {
  display: block; /* layout via .kennisbank-hero / .kennisbank-content */
}

/* ── Hero-zone (donkere titelbalk — B-088) ──────────────────────────
   Sluit visueel naadloos aan op de sticky nav (zelfde --kb-navy-950).
   Bevat per paginatype:
     archief/categorie — eyebrow, H1, intro, zoekbalk, populaire termen
     single            — breadcrumbs, artikel-kop (H1 + meta)
     zoekresultaten    — zoekformulier, resultatenkop (H1)
   Orbs + rastergrid: zelfde sfeertaal als .kbo-page, geen filter:blur.
   ------------------------------------------------------------------- */
.kennisbank-hero {
  background: var(--kb-navy-950);
  padding: 4.5rem 0 3.5rem;
  position: relative;
  overflow: hidden;
  overflow: clip;
  color: var(--kb-white);
}

.kennisbank-hero__container,
.kennisbank-content__container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Single-artikel: smallere leeskolom in beide zones */
.kennisbank-single .kennisbank-hero__container,
.kennisbank-single .kennisbank-content__container {
  max-width: 760px;
}

/* Zoekresultatenpagina: iets smaller voor leesbaarheid */
main.kennisbank-zoek .kennisbank-hero__container,
main.kennisbank-zoek .kennisbank-content__container {
  max-width: 860px;
}

.kennisbank-hero__inner {
  position: relative;
  z-index: 1;
}

/* Sfeer: orbs (radial-gradient, geen filter:blur) */
.kennisbank-hero__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.kennisbank-hero__orb--green {
  width: 560px; height: 560px;
  top: -200px; left: -180px;
  background: radial-gradient(circle, rgba(139, 197, 63, 0.14), transparent 65%);
}
.kennisbank-hero__orb--cyan {
  width: 480px; height: 480px;
  bottom: -160px; right: -160px;
  background: radial-gradient(circle, rgba(0, 161, 241, 0.12), transparent 65%);
}

/* Sfeer: subtiel rastergrid (top-fade via mask) */
.kennisbank-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

/* ── Content-zone (witte leesvlakte — B-088) ────────────────────────
   Volle-breedte witte vlakte; rechte overgang van de donkere hero
   (geen fade — conform merkregel "geen fades tussen secties").
   Bevat: kaartgrid, zoekresultaten, artikel-inhoud, FAQ, CTA, gerelateerd.
   ------------------------------------------------------------------- */
.kennisbank-content {
  background: var(--kb-white);
  color: var(--kb-ink);
  padding: 3.5rem 0 4.5rem;
  /* Vangnet (v1.5.1): een te breed kind (tabel, embed, afbeelding) mag de
     pagina nooit breder maken dan de viewport — body-overflow-x werkt op
     mobiel (iOS-pan) niet betrouwbaar als vangnet. clip i.p.v. hidden,
     zodat dit blok zelf geen scrollcontainer wordt. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* ── Hero-zone: kleuroverrides voor bestaande componenten ────────────
   Alle regels hieronder overschrijven de "donker-op-wit" standaard van
   de component-CSS naar "licht op donker navy".
   ------------------------------------------------------------------- */

/* Eyebrow */
.kennisbank-hero .kennisbank-eyebrow {
  color: var(--kb-cyan-bright);
  background: rgba(0, 161, 241, 0.10);
  border-color: rgba(0, 161, 241, 0.28);
}
.kennisbank-hero .kennisbank-eyebrow::before { box-shadow: 0 0 10px var(--kb-green-bright); }

/* Archief-paginakop H1 + intro */
.kennisbank-hero .kennisbank-archive__header h1 { color: var(--kb-white); }
.kennisbank-hero .kennisbank-archive__intro     { color: rgba(255, 255, 255, 0.70); }

/* Artikel-kop H1 (single-kennisbank) */
.kennisbank-hero .kennisbank-artikel__header h1 { color: var(--kb-white); }

/* Breadcrumbs */
.kennisbank-hero .kennisbank-breadcrumbs ol                         { color: rgba(255, 255, 255, 0.40); }
.kennisbank-hero .kennisbank-breadcrumbs a                          { color: rgba(255, 255, 255, 0.65); }
.kennisbank-hero .kennisbank-breadcrumbs a:hover                    { color: var(--kb-white); }
.kennisbank-hero .kennisbank-breadcrumbs li:not(:last-child)::after { color: rgba(255, 255, 255, 0.30); }
.kennisbank-hero .kennisbank-breadcrumbs li[aria-current="page"]    { color: rgba(255, 255, 255, 0.45); }

/* Categorie-chip en leestijd in de artikel-header (single) */
.kennisbank-hero .kennisbank-chip {
  color: var(--kb-cyan-bright);
  background: rgba(0, 161, 241, 0.12);
  border-color: rgba(0, 161, 241, 0.28);
}
.kennisbank-hero .kennisbank-chip::before {
  background: var(--kb-cyan);
  box-shadow: 0 0 8px var(--kb-cyan);
}
.kennisbank-hero .kennisbank-leestijd     { color: rgba(255, 255, 255, 0.50); }
.kennisbank-hero .kennisbank-leestijd svg { stroke: var(--kb-green-bright); }

/* Zoekformulier (archief-template) op donkere achtergrond */
.kennisbank-hero .kennisbank-zoek__label { color: rgba(255, 255, 255, 0.65); }
.kennisbank-hero .kennisbank-zoek__veld  {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}
.kennisbank-hero .kennisbank-zoek__icon  { stroke: rgba(255, 255, 255, 0.45); }
.kennisbank-hero .kennisbank-zoek__input { color: var(--kb-white); }
.kennisbank-hero .kennisbank-zoek__input::placeholder { color: rgba(255, 255, 255, 0.40); }
.kennisbank-hero .kennisbank-zoek__veld:focus-within {
  border-color: var(--kb-green);
  box-shadow: 0 8px 24px -12px rgba(139, 197, 63, 0.50);
}
.kennisbank-hero .kennisbank-zoek__populair-label { color: rgba(255, 255, 255, 0.40); }
.kennisbank-hero .kennisbank-zoek__term {
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
}
.kennisbank-hero .kennisbank-zoek__term::before { background: var(--kb-green); }
.kennisbank-hero .kennisbank-zoek__term:hover {
  border-color: var(--kb-green);
  box-shadow: 0 8px 20px -10px rgba(139, 197, 63, 0.50);
}

/* Zoekresultaten-formulier (search-template: aparte markup) */
.kennisbank-hero .kennisbank-zoek__formulier .kennisbank-zoek__input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--kb-white);
}
.kennisbank-hero .kennisbank-zoek__formulier .kennisbank-zoek__input::placeholder {
  color: rgba(255, 255, 255, 0.40);
}
.kennisbank-hero .kennisbank-zoek__formulier .kennisbank-zoek__input:focus {
  border-color: var(--kb-green);
  box-shadow: 0 0 0 3px rgba(139, 197, 63, 0.25);
}

/* Zoektitel (H1 "X resultaten" / "Geen resultaten") op donker */
.kennisbank-hero .kennisbank-zoek__titel { color: var(--kb-white); }

/* Subcategorie-chips op de taxonomy-pagina */
.kennisbank-hero .kennisbank-chip--groot {
  color: var(--kb-cyan-bright);
  background: rgba(0, 161, 241, 0.12);
  border-color: rgba(0, 161, 241, 0.28);
}
.kennisbank-hero .kennisbank-chip--groot:hover {
  border-color: var(--kb-green);
  box-shadow: 0 8px 20px -10px rgba(139, 197, 63, 0.50);
}

/* ── Eyebrow (sectielabel) ──────────────────────────────────────── */
.kennisbank-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: var(--kb-radius-pill);
  color: var(--kb-navy-700);
  background: rgba(0, 46, 117, 0.07);
  border: 1px solid rgba(0, 46, 117, 0.14);
}
.kennisbank-eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kb-green-bright);
  box-shadow: 0 0 10px var(--kb-green-bright);
}

/* ── Breadcrumbs ────────────────────────────────────────────────── */
.kennisbank-breadcrumbs ol {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--kb-muted);
}
.kennisbank-breadcrumbs a {
  color: var(--kb-navy-700);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.18s ease;
}
.kennisbank-breadcrumbs a:hover { color: #5fa300; }
.kennisbank-breadcrumbs li:not(:last-child)::after {
  content: '›';
  margin-left: 0.5rem;
  color: var(--kb-muted);
}
.kennisbank-breadcrumbs li[aria-current="page"] { color: var(--kb-muted); }

/* ── Artikelkop ─────────────────────────────────────────────────── */
.kennisbank-artikel__header { margin-bottom: 2rem; }
.kennisbank-artikel__header h1 {
  font-family: var(--kb-font);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--kb-navy-900);
}

/* Meta-rij onder de titel: categorie-chip + leestijd */
.kennisbank-artikel__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.1rem;
}
.kennisbank-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--kb-radius-pill);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--kb-navy-700);
  background: linear-gradient(120deg, rgba(0,161,241,0.12), rgba(139,197,63,0.14));
  border: 1px solid rgba(0, 161, 241, 0.25);
}
.kennisbank-chip::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--kb-cyan);
  box-shadow: 0 0 8px var(--kb-cyan);
}
.kennisbank-leestijd {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--kb-muted);
}
.kennisbank-leestijd svg { width: 0.95rem; height: 0.95rem; stroke: #5fa300; }

/* ── Artikelinhoud ──────────────────────────────────────────────── */
.kennisbank-artikel__content {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #1c2536;
}
/* Lead: eerste alinea krijgt iets meer gewicht (redactioneel) */
.kennisbank-artikel__content > p:first-of-type {
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--kb-navy-900);
}
.kennisbank-artikel__content h2 {
  position: relative;
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
  padding-left: 0.9rem;
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--kb-navy-900);
}
/* Klein gekleurd accentstaafje vóór elke H2 */
.kennisbank-artikel__content h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  border-radius: 999px;
  background: var(--kb-grad-green);
}
.kennisbank-artikel__content h3 {
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--kb-navy-800);
}
.kennisbank-artikel__content p { margin-bottom: 1.25rem; }
/* Interne links: groen als actiekleur — duidelijk zichtbaar en herkenbaar (v1.2.0) */
.kennisbank-artikel__content a {
  color: #5fa300;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(95, 163, 0, 0.55);
  text-underline-offset: 3px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.kennisbank-artikel__content a:hover {
  color: #4a7e00;
  text-decoration-color: rgba(95, 163, 0, 0.9);
}
.kennisbank-artikel__content ol { margin: 0 0 1.25rem 1.25rem; }
.kennisbank-artikel__content ol li { margin-bottom: 0.4rem; }
.kennisbank-artikel__content ol::marker { color: #5fa300; font-weight: 700; }
/* Ongeordende lijst: gekleurde check-bullets als kleine visual */
.kennisbank-artikel__content ul {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}
.kennisbank-artikel__content ul li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.55rem;
}
.kennisbank-artikel__content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: rgba(139, 197, 63, 0.16);
  /* Groen vinkje */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fa300' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.75rem;
}
.kennisbank-artikel__content blockquote {
  position: relative;
  margin: 2.25rem 0;
  padding: 1.5rem 1.75rem 1.5rem 2.5rem;
  border-left: 4px solid transparent;
  border-image: var(--kb-grad-green) 1;
  background: linear-gradient(120deg, rgba(139,197,63,0.08), rgba(0,161,241,0.06));
  border-radius: 0 var(--kb-radius) var(--kb-radius) 0;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--kb-navy-900);
}
/* Decoratief aanhalingsteken in merkkleur */
.kennisbank-artikel__content blockquote::before {
  content: '\201C';
  position: absolute;
  left: 0.75rem;
  top: 0.35rem;
  font-size: 2.75rem;
  line-height: 1;
  font-weight: 800;
  color: var(--kb-green);
  opacity: 0.55;
}
.kennisbank-artikel__content img { border-radius: var(--kb-radius); }

/* ── Archief: kop ───────────────────────────────────────────────── */
.kennisbank-archive__header { margin-bottom: 2rem; }
.kennisbank-archive__header h1 {
  margin: 0.9rem 0 0;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--kb-navy-900);
}
.kennisbank-archive__header h1::after {
  content: '';
  display: block;
  width: 84px;
  height: 5px;
  margin: 1rem 0 1.25rem;
  border-radius: 999px;
  background: var(--kb-grad-accent);
}
.kennisbank-archive__intro {
  max-width: 60ch;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--kb-muted);
}

/* ── Archief: zoeken + snel zoeken op populaire termen ──────────── */
.kennisbank-zoek {
  margin: 0 0 2rem;
}
.kennisbank-zoek__label {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--kb-navy-900);
}
.kennisbank-zoek__veld {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 620px;
  padding: 0.3rem 0.3rem 0.3rem 1rem;
  background: var(--kb-white);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-pill);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.kennisbank-zoek__veld:focus-within {
  border-color: var(--kb-green);
  box-shadow: 0 8px 24px -12px rgba(139, 197, 63, 0.5);
}
.kennisbank-zoek__icon {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  stroke: var(--kb-muted);
}
.kennisbank-zoek__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-family: var(--kb-font);
  font-size: 1rem;
  color: var(--kb-navy-900);
  padding: 0.6rem 0;
}
.kennisbank-zoek__input::placeholder { color: var(--kb-muted); }
.kennisbank-zoek__input:focus { outline: none; }
.kennisbank-zoek__submit {
  flex: none;
  border: none;
  cursor: pointer;
  font-family: var(--kb-font);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--kb-navy-950);
  background: var(--kb-grad-green);
  padding: 0.65rem 1.4rem;
  border-radius: var(--kb-radius-pill);
  transition: transform 0.18s ease, box-shadow 0.25s ease;
}
.kennisbank-zoek__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -8px rgba(139, 197, 63, 0.6);
}

.kennisbank-zoek__populair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.kennisbank-zoek__populair-label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--kb-muted);
}
.kennisbank-zoek__term {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--kb-radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--kb-navy-700);
  background: linear-gradient(120deg, rgba(0,161,241,0.10), rgba(139,197,63,0.12));
  border: 1px solid rgba(0, 161, 241, 0.20);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.kennisbank-zoek__term::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--kb-green);
}
.kennisbank-zoek__term:hover {
  transform: translateY(-2px);
  border-color: var(--kb-green);
  box-shadow: 0 8px 20px -10px rgba(139, 197, 63, 0.5);
}

/* ── Archief: kaartgrid ─────────────────────────────────────────── */
.kennisbank-archive__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}
.kennisbank-kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--kb-white);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-lg);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
/* Gekleurde accentbalk bovenaan — subtiel, feller bij hover */
.kennisbank-kaart::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--kb-grad-accent);
  opacity: 0.55;
  transition: opacity 0.2s ease;
  z-index: 2;
}
.kennisbank-kaart:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 197, 63, 0.55);
  box-shadow: var(--kb-shadow-card);
}
.kennisbank-kaart:hover::before { opacity: 1; }
.kennisbank-kaart a {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}
.kennisbank-kaart img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
/* Meta-rij bovenaan de kaart: categorie-tag + leestijd naast elkaar (v1.2.0) */
.kennisbank-kaart__topmeta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 1.25rem 0;
  flex-wrap: wrap;
}
.kennisbank-kaart__tag {
  padding: 0.28rem 0.7rem;
  border-radius: var(--kb-radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--kb-navy-700);
  background: rgba(0, 161, 241, 0.10);
  border: 1px solid rgba(0, 161, 241, 0.22);
}
/* Leestijd-indicator op kaarten */
.kennisbank-kaart__leestijd {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--kb-muted);
  white-space: nowrap;
}
.kennisbank-kaart h2 {
  margin: 0.75rem 0 0.5rem;
  padding: 0 1.25rem;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--kb-navy-900);
}
.kennisbank-kaart p {
  margin: 0;
  padding: 0 1.25rem 1.25rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--kb-muted);
}
/* "Lees verder" met pijl die meebeweegt bij hover */
.kennisbank-kaart a::after {
  content: 'Lees verder →';
  margin-top: auto;
  padding: 0 1.25rem 1.4rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: #5fa300;
  transition: padding-left 0.2s ease;
}
.kennisbank-kaart:hover a::after { padding-left: 1.6rem; }

/* ── Paginatie ──────────────────────────────────────────────────── */
.kennisbank-archive .pagination,
.kennisbank-archive .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 3rem;
  justify-content: center;
}
.kennisbank-archive .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: var(--kb-radius-pill);
  font-weight: 600;
  text-decoration: none;
  color: var(--kb-navy-700);
  background: var(--kb-white);
  border: 1px solid var(--kb-line);
}
.kennisbank-archive .page-numbers.current {
  background: var(--kb-navy-700);
  color: var(--kb-white);
  border-color: var(--kb-navy-700);
}

/* ── FAQ-accordion ──────────────────────────────────────────────── */
.kennisbank-faq {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid var(--kb-line);
}
.kennisbank-faq > h2 {
  margin: 0 0 1rem;
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--kb-navy-900);
}
.kennisbank-faq__lijst { margin: 0; }
.kennisbank-faq__vraag { border-bottom: 1px solid var(--kb-line); }
.kennisbank-faq__vraag button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--kb-font);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--kb-navy-900);
  padding: 1.1rem 0;
  transition: color 0.18s ease;
}
.kennisbank-faq__vraag button:hover { color: #5fa300; }
.kennisbank-faq__vraag button::after {
  content: '+';
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(139, 197, 63, 0.14);
  color: #5fa300;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  transition: transform 0.2s ease, background 0.2s ease;
}
.kennisbank-faq__vraag button[aria-expanded="true"]::after {
  content: '–';
  transform: rotate(0deg);
  background: var(--kb-green);
  color: var(--kb-navy-950);
}
.kennisbank-faq__antwoord {
  padding: 0 0 1.25rem;
  color: #1c2536;
  line-height: 1.7;
}
.kennisbank-faq__antwoord[hidden] { display: none; }

/* ── CTA-blok (premium donker accentpaneel) ─────────────────────── */
.kennisbank-cta {
  position: relative;
  margin-top: 3rem;
  padding: 2.5rem;
  border-radius: var(--kb-radius-lg);
  background:
    radial-gradient(120% 120% at 0% 0%, var(--kb-navy-800), var(--kb-navy-950) 60%);
  color: var(--kb-white);
  overflow: hidden;
  box-shadow: 0 24px 60px -22px rgba(7, 20, 43, 0.6);
}
.kennisbank-cta::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(139, 197, 63, 0.28);
  filter: blur(90px);
  pointer-events: none;
}
.kennisbank-cta p {
  position: relative;
  margin: 0;
  max-width: 46ch;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
/* CTA-blok v2 (B-108): de kop erft de bestaande p-styling hierboven; de
   ondertitel is de rustiger hulptekstregel die uitlegt wat er na de klik gebeurt. */
.kennisbank-cta p.kennisbank-cta__ondertitel {
  max-width: 58ch;
  margin-top: 0.85rem;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  opacity: 0.85;
}
.kennisbank-cta__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 0.95rem 1.7rem;
  border-radius: var(--kb-radius-pill);
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  color: var(--kb-navy-950);
  background: var(--kb-grad-green);
  box-shadow: 0 10px 30px -8px rgba(139, 197, 63, 0.55);
  transition: transform 0.18s ease, box-shadow 0.25s ease;
}
.kennisbank-cta__button::after { content: '→'; font-size: 1.05em; }
.kennisbank-cta__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -8px rgba(139, 197, 63, 0.7), var(--kb-glow-green);
}

/* Het oude type-systeem (kennisbank-cta--type-5) is vervallen in v1.3.0 (B-108). */

/* ── Signaalblok / bronnoot ─────────────────────────────────────── */
.kennisbank-signaalblok {
  margin-top: 2.5rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--kb-green);
  background: var(--kb-sand);
  border-radius: 0 var(--kb-radius) var(--kb-radius) 0;
  font-size: 0.9rem;
  color: var(--kb-muted);
}
.kennisbank-signaalblok p { margin: 0; }

/* ── Gerelateerde artikelen ─────────────────────────────────────── */
.kennisbank-gerelateerd { margin-top: 3rem; }
.kennisbank-gerelateerd > h2 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--kb-navy-900);
}
.kennisbank-gerelateerd__lijst {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.kennisbank-gerelateerd__lijst li {
  border-bottom: 1px solid var(--kb-line);
}
.kennisbank-gerelateerd__lijst a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  font-weight: 600;
  color: var(--kb-navy-800);
  text-decoration: none;
  transition: color 0.18s ease, padding-left 0.18s ease;
}
.kennisbank-gerelateerd__lijst a::after {
  content: '→';
  color: #5fa300;
  transition: transform 0.18s ease;
}
.kennisbank-gerelateerd__lijst a:hover {
  color: #5fa300;
  padding-left: 0.35rem;
}
.kennisbank-gerelateerd__lijst a:hover::after { transform: translateX(4px); }

/* ===================================================================
   EPIC 11 — ZOEKEN & VINDBAARHEID
   Zoekresultatenpagina, categorie-archief, autocomplete-suggesties.
   =================================================================== */

/* ── Zoekresultatenpagina (main.kennisbank-zoek) ────────────────── */
main.kennisbank-zoek {
  display: block; /* layout via .kennisbank-hero / .kennisbank-content — B-088 */
}

.kennisbank-zoek__formulier-sectie { margin-bottom: 2.25rem; }

.kennisbank-zoek__formulier {
  position: relative;
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
}

.kennisbank-zoek__formulier .kennisbank-zoek__input {
  flex: 1;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  font-family: var(--kb-font);
  font-size: 1rem;
  color: var(--kb-ink);
  background: var(--kb-white);
}

.kennisbank-zoek__formulier .kennisbank-zoek__input:focus {
  outline: none;
  border-color: var(--kb-green);
  box-shadow: 0 0 0 3px rgba(139, 197, 63, 0.25);
}

.kennisbank-zoek__knop {
  padding: 0.9rem 1.6rem;
  border: none;
  border-radius: var(--kb-radius-pill);
  font-family: var(--kb-font);
  font-weight: 700;
  font-size: 1rem;
  color: var(--kb-navy-950);
  background: var(--kb-grad-green);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.25s ease;
}

.kennisbank-zoek__knop:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px -8px rgba(139, 197, 63, 0.55);
}

.kennisbank-zoek__header { margin-bottom: 1.75rem; }

.kennisbank-zoek__titel {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--kb-navy-900);
}

/* Resultatenlijst */
.kennisbank-zoek__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.kennisbank-zoek__item {
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  background: var(--kb-white);
  transition: border-color 0.18s ease, box-shadow 0.25s ease;
}

.kennisbank-zoek__item:hover {
  border-color: var(--kb-green);
  box-shadow: var(--kb-shadow-card);
}

.kennisbank-zoek__artikel { padding: 1.25rem 1.4rem; }

.kennisbank-zoek__artikel-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.kennisbank-zoek__artikel-titel {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
}

.kennisbank-zoek__artikel-link {
  color: var(--kb-navy-900);
  text-decoration: none;
}

.kennisbank-zoek__artikel-link:hover { color: #5fa300; }

.kennisbank-zoek__snippet {
  margin: 0.65rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--kb-muted);
}

/* Zoekterm-highlight — subtiel groen, geen standaard browser-geel */
main.kennisbank-zoek mark {
  background: rgba(139, 197, 63, 0.28);
  color: inherit;
  border-radius: 3px;
  padding: 0 0.1em;
}

.kennisbank-zoek__artikel-meta { margin-top: 0.75rem; }

.kennisbank-zoek__lees-meer {
  font-size: 0.9rem;
  font-weight: 700;
  color: #5fa300;
  text-decoration: none;
}

.kennisbank-zoek__lees-meer:hover { text-decoration: underline; }

/* Nul-resultaat + "bedoelde je" */
.kennisbank-zoek__bedoelde-je {
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.2rem;
  border-left: 4px solid var(--kb-green);
  background: var(--kb-sand);
  border-radius: 0 var(--kb-radius) var(--kb-radius) 0;
}

.kennisbank-zoek__bedoelde-je p { margin: 0; font-size: 1rem; }

.kennisbank-zoek__bedoelde-je a {
  font-weight: 700;
  color: var(--kb-navy-800);
  text-decoration-color: var(--kb-green);
}

.kennisbank-zoek__nul-resultaat p { color: var(--kb-muted); }

.kennisbank-zoek__categorie-lijst {
  list-style: none;
  margin: 1rem 0 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.kennisbank-zoek__alle-artikelen {
  font-weight: 700;
  color: #5fa300;
  text-decoration: none;
}

.kennisbank-zoek__alle-artikelen:hover { text-decoration: underline; }

/* Grote chip-variant (browse-fallback + subcategorie-navigatie) */
.kennisbank-chip--groot {
  font-size: 0.95rem;
  padding: 0.55rem 1.1rem;
}

.kennisbank-chip__count {
  font-weight: 500;
  color: var(--kb-muted);
}

/* ── Autocomplete-suggesties (ARIA-listbox) ─────────────────────── */
.kennisbank-zoek__suggesties {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  z-index: 40;
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  background: var(--kb-white);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  box-shadow: var(--kb-shadow-card);
}

.kennisbank-zoek__suggesties[hidden] { display: none; }

/* Positioneringscontext voor de zwevende lijst */
.kennisbank-zoek__formulier,
.kennisbank-zoek__veld { position: relative; }

.kennisbank-zoek__suggestie {
  padding: 0.6rem 0.85rem;
  border-radius: calc(var(--kb-radius) - 6px);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--kb-navy-800);
  cursor: pointer;
}

.kennisbank-zoek__suggestie:hover,
.kennisbank-zoek__suggestie.is-actief {
  background: var(--kb-sand);
  color: #5fa300;
}

/* ── Categorie-archiefpagina ────────────────────────────────────── */
.kennisbank-categorie__subnav { margin-bottom: 2rem; }

.kennisbank-categorie__subnav-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.kennisbank-categorie__leeg {
  padding: 2rem 0;
  color: var(--kb-muted);
}

.kennisbank-categorie__leeg a {
  font-weight: 700;
  color: #5fa300;
  text-decoration: none;
}

.kennisbank-categorie__leeg a:hover { text-decoration: underline; }

/* ── Inhoudsopgave (TOC — herstijl v1.5.0, PO-review 2026-07-13) ── */
/* Zichtbaar bij 3+ koppen; statisch (PHP-gegenereerd, geen JS). Licht,
   rondom omkaderd blok met genummerde links — bewust GEEN groene
   linkerlijn: die opmaak is gereserveerd en het citaat ("Kort gezegd")
   en de inhoudsopgave moeten duidelijk van elkaar verschillen. */
.kennisbank-toc {
  margin: 0 0 2.5rem;
  padding: 1.4rem 1.6rem;
  background: var(--kb-white);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
}
.kennisbank-toc__kop {
  margin: 0 0 0.85rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kb-muted);
}
.kennisbank-toc__lijst {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: kb-toc;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 2.25rem;
}
.kennisbank-toc__lijst li { counter-increment: kb-toc; }
.kennisbank-toc__lijst a {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--kb-navy-800);
  text-decoration: none;
  transition: color 0.18s ease;
}
.kennisbank-toc__lijst a::before {
  content: counter(kb-toc, decimal-leading-zero);
  font-size: 0.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #5fa300;
  flex-shrink: 0;
}
.kennisbank-toc__lijst a:hover { color: #5fa300; }
@media (max-width: 640px) {
  .kennisbank-toc__lijst { grid-template-columns: 1fr; }
}

/* ── Gerelateerde artikelen: "Verder lezen" kaartgrid (v1.2.0) ──── */
/* Vervangt de eenvoudige tabelrij-lijst uit v1.1.x. */
.kennisbank-gerelateerd {
  margin-top: 3.5rem;
  padding-top: 2.25rem;
  border-top: 2px solid var(--kb-line);
}
.kennisbank-gerelateerd__header {
  margin-bottom: 1.5rem;
}
.kennisbank-gerelateerd__kop {
  margin: 0 0 0.3rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--kb-navy-900);
}
.kennisbank-gerelateerd__subtekst {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--kb-muted);
}
.kennisbank-gerelateerd__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.kennisbank-gerelateerd__item {
  display: flex;
}
.kennisbank-gerelateerd__kaart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  text-decoration: none;
  color: inherit;
  background: var(--kb-white);
  transition: border-color 0.18s ease, box-shadow 0.2s ease, transform 0.18s ease;
  position: relative;
}
.kennisbank-gerelateerd__kaart::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--kb-radius) var(--kb-radius) 0 0;
  background: var(--kb-grad-accent);
  opacity: 0.45;
  transition: opacity 0.18s ease;
}
.kennisbank-gerelateerd__kaart:hover {
  border-color: rgba(139, 197, 63, 0.55);
  box-shadow: 0 8px 28px -12px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
}
.kennisbank-gerelateerd__kaart:hover::before { opacity: 1; }
.kennisbank-gerelateerd__kaart-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.kennisbank-chip--sm {
  font-size: 0.7rem;
  padding: 0.22rem 0.6rem;
  letter-spacing: 0.02em;
}
.kennisbank-gerelateerd__leestijd {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--kb-muted);
  white-space: nowrap;
}
.kennisbank-gerelateerd__titel {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--kb-navy-900);
  transition: color 0.18s ease;
}
.kennisbank-gerelateerd__kaart:hover .kennisbank-gerelateerd__titel {
  color: #5fa300;
}
.kennisbank-gerelateerd__snippet {
  display: block;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--kb-muted);
  flex: 1;
}
.kennisbank-gerelateerd__pijl {
  display: block;
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #5fa300;
  transition: padding-left 0.18s ease;
}
.kennisbank-gerelateerd__kaart:hover .kennisbank-gerelateerd__pijl {
  padding-left: 0.25rem;
}

/* Verwijder de verouderde list-stijlen (vervangen door kaartgrid) */
.kennisbank-gerelateerd__lijst { display: none; }

/* ── Toegankelijkheid — beweging beperken ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .kennisbank-single *,
  .kennisbank-archive *,
  main.kennisbank-zoek * {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Responsief ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .kennisbank-hero    { padding: 3rem 0 2.5rem; }
  .kennisbank-content { padding: 2.5rem 0 3rem; }
  .kennisbank-hero__container,
  .kennisbank-content__container { padding-inline: 1.1rem; }
  .kennisbank-zoek__formulier { flex-direction: column; }
  .kennisbank-cta { padding: 1.75rem; }
  .kennisbank-cta p { font-size: 1.1875rem; }
  /* Kaarten stapelen op small */
  .kennisbank-gerelateerd__grid {
    grid-template-columns: 1fr;
  }
  /* TOC iets compacter */
  .kennisbank-toc { padding: 1rem 1rem 1rem 1.25rem; }
}

/* ===================================================================
   E-E-A-T-LAAG (v1.4.0, B-131): byline, artikelbeeld, auteursblok
   =================================================================== */

/* ── Byline in de donkere hero: auteur + datums onder de artikelkop ── */
.kennisbank-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
}
.kennisbank-byline__auteur { color: var(--kb-white); }
.kennisbank-byline__scheiding { opacity: 0.45; }
.kennisbank-byline time { font-variant-numeric: tabular-nums; }

/* Uitgelichte afbeelding: render bewust verwijderd (PO-besluit 2026-07-13,
   geen artikelbeelden op de leespagina); featured image werkt alleen nog
   door in OG-tags en Article-schema via includes/seo.php. */

/* ── Auteursblok onder het artikel (witte zone) ─────────────────────── */
.kennisbank-auteur {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  margin-top: 2.5rem;
  padding: 1.35rem 1.5rem;
  background: var(--kb-white);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
}
.kennisbank-auteur__foto {
  margin: 0;
  flex-shrink: 0;
}
.kennisbank-auteur__foto img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  border: 2px solid var(--kb-sand-deep);
}
.kennisbank-auteur__naam {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  color: var(--kb-ink);
}
.kennisbank-auteur__naam strong { font-weight: 800; }
.kennisbank-auteur__functie {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--kb-muted);
  margin-top: 0.1rem;
}
.kennisbank-auteur__bio {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #1c2536;
}
.kennisbank-auteur__link {
  display: inline-block;
  margin-top: 0.55rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--kb-navy-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 640px) {
  .kennisbank-auteur { flex-direction: column; }
  .kennisbank-auteur__foto img { width: 72px; height: 72px; }
}

/* ===================================================================
   ARTIKELOPENING & LEESHULP (v1.5.0, PO-review 2026-07-13)
   Elk artikel opent met: voorleesspeler → "Kort gezegd"-citaat →
   inhoudsopgave → tekst. Citaat = donker kader met groen tekstlabel;
   inhoudsopgave = licht, rondom omkaderd blok. Bewust géén twee
   groene linkerlijnen boven elkaar.
   =================================================================== */

/* ── "Kort gezegd"-citaat (donker kader, geen linkerlijn) ─────────── */
.kennisbank-kortgezegd {
  margin: 0 0 1.75rem;
  padding: 1.6rem 1.9rem;
  background: #050E1F;
  border-radius: var(--kb-radius);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 44px rgba(5, 14, 31, 0.16);
}
.kennisbank-kortgezegd__label {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #A8FF00;
}
.kennisbank-kortgezegd p {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.65;
}

/* ── Tabellen in de artikelcontent: altijd kaders ─────────────────── */
.kennisbank-artikel__content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.75rem 0 2rem;
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  overflow: hidden;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.kennisbank-artikel__content thead th {
  background: #050E1F;
  color: var(--kb-white);
  text-align: left;
  font-weight: 700;
  padding: 0.85rem 1.1rem;
}
.kennisbank-artikel__content thead th + th { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.kennisbank-artikel__content tbody td {
  padding: 0.8rem 1.1rem;
  border-top: 1px solid var(--kb-line);
  vertical-align: top;
}
.kennisbank-artikel__content tbody td + td { border-left: 1px solid var(--kb-line); }
.kennisbank-artikel__content tbody tr:nth-child(even) { background: rgba(5, 14, 31, 0.035); }

/* Smalle schermen: tabel scrolt binnen zijn eigen kader (QA RS3-patroon,
   v1.5.1). Een tabel kan niet smaller worden dan de langste woorden in
   zijn kolommen; zonder eigen scrollcontainer duwt hij dan de hele
   pagina breder dan de viewport (navy balk rechts, artikel wegschuifbaar). */
@media (max-width: 640px) {
  .kennisbank-artikel__content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Voorleesspeler (browser-TTS, B-132/B-143) ────────────────────── */
.kennisbank-voorlees {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin: 0 0 1.6rem;
  padding: 0.75rem 1rem;
  background: var(--kb-white);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
}
.kennisbank-voorlees__knop {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: #050E1F;
  color: var(--kb-white);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kennisbank-voorlees__knop:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(5, 14, 31, 0.25);
}
.kennisbank-voorlees__icoon {
  width: 0.85rem;
  height: 0.85rem;
  color: #A8FF00;
}
/* Het hidden-attribuut werkt niet op SVG-elementen in elke browser */
.kennisbank-voorlees__icoon[hidden] { display: none; }
.kennisbank-voorlees__status {
  font-size: 0.8438rem;
  font-weight: 600;
  color: var(--kb-muted);
}
.kennisbank-voorlees__snelheid {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--kb-line);
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--kb-navy-800);
  cursor: pointer;
}
.kennisbank-voorlees__snelheid:hover { border-color: var(--kb-navy-800); }
.kennisbank-voorlees__tip {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--kb-muted);
}
@media (max-width: 760px) {
  .kennisbank-voorlees__tip { margin-left: 0; flex-basis: 100%; }
}

/* ── Luistermededeling op overzichts-/categoriepagina's (donkere hero) ── */
.kennisbank-voorlees-mededeling {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.1rem 0 0;
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}
.kennisbank-voorlees-mededeling svg {
  width: 0.95rem;
  height: 0.95rem;
  color: #A8FF00;
  flex-shrink: 0;
}