/* ==========================================================================
   SJABLOON KENNISBANK-ARTIKEL — Uitvaart-Platform.nl
   Archetype "Lezen". Bouwt uitsluitend op de tokens uit ontwerp-nieuw.css.
   Prefix: ka-   (kennisartikel)
   Geen enkele regel raakt bestaande klassen aan; dit sjabloon werkt
   alleen binnen .ka en vervangt de pagina-eigen CSS volledig.
   ========================================================================== */

.ka{font-family:Poppins,sans-serif;color:var(--k-inkt);background:var(--k-creme)}
.ka *{box-sizing:border-box}
.ka img{max-width:100%;height:auto;display:block}

/* koppen moeten de globale voetregel h1,h2,h3{font-weight:600!important} winnen */
.ka h1,.ka .ka-h2{font-weight:700!important;letter-spacing:-.022em}
.ka h3,.ka .ka-h3{font-weight:600!important;letter-spacing:-.012em}

/* ---------- 1. HERO ---------- */
.ka-hero{position:relative;overflow:hidden;isolation:isolate;
  border-radius:0 0 var(--rad-xl) var(--rad-xl);
  background:linear-gradient(118deg,var(--k-diep) 0%,var(--k-nacht) 46%,var(--k-pruim) 100%)}
.ka-hero-beeld{position:absolute;inset:0;z-index:-2}
.ka-hero-beeld img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.ka-hero-beeld+.ka-hero-waas{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(102deg,rgba(38,9,31,.95) 0%,rgba(38,9,31,.84) 38%,rgba(74,25,66,.55) 100%)}
.ka-hero::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  right:-190px;top:-240px;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(240,168,117,.16),transparent 68%);
  animation:kaDrift 22s ease-in-out infinite alternate}
.ka-hero-in{max-width:1200px;margin:0 auto;padding:76px 32px 84px;position:relative;z-index:1}
@media(max-width:760px){.ka-hero-in{padding:52px 20px 60px}}

.ka-crumb{font-size:13px;color:rgba(255,255,255,.62);margin:0 0 22px}
.ka-crumb a{color:rgba(255,255,255,.82);text-decoration:none}
.ka-crumb a:hover{color:var(--k-peach)}
.ka-crumb span{padding:0 7px;opacity:.55}

.ka-eyebrow{font-size:var(--t-micro);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--k-peach);margin:0 0 16px}
.ka-hero h1{font-size:clamp(30px,4.2vw,50px);line-height:1.1;color:#fff;
  margin:0;max-width:20ch}
.ka-hero h1 .ka-h1-teken{display:block;font-size:26px;line-height:1;margin:0 0 12px;opacity:.9}
.ka-hero-lead{max-width:62ch;margin:20px 0 0;font-size:var(--t-lead);line-height:1.62;
  color:rgba(255,255,255,.86)}

/* meta-strook: leestijd, onderdelen, bijgewerkt */
.ka-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin:28px 0 0;
  font-size:var(--t-small);color:rgba(255,255,255,.72)}
.ka-meta span{display:inline-flex;align-items:center;gap:8px}
.ka-meta svg{width:15px;height:15px;stroke:var(--k-peach);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* cijfers uit de oude banner, als stille vertrouwensstrook */
.ka-cijfers{display:flex;flex-wrap:wrap;gap:14px;margin:34px 0 0}
.ka-cijfer{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--rad-l);padding:14px 20px;backdrop-filter:blur(6px);min-width:120px}
.ka-cijfer b{display:block;font-size:22px;font-weight:700;color:#fff;line-height:1.2}
.ka-cijfer span{display:block;font-size:12.5px;color:rgba(255,255,255,.7);margin-top:3px}

/* ---------- 2. "IN HET KORT" ---------- */
/* De samenvatting deelt het raster van de leeskolom, zodat de linker- en
   rechterkantlijn doorlopen van de hero tot de voet. */
.ka-kort{max-width:1180px;margin:-46px auto 0;padding:0 32px;position:relative;z-index:3;
  display:grid;grid-template-columns:248px minmax(0,68ch);gap:72px;justify-content:center}
.ka-kort-kaart{grid-column:2}
@media(max-width:1180px){.ka-kort{grid-template-columns:230px minmax(0,1fr);gap:48px}}
@media(max-width:1080px){.ka-kort{grid-template-columns:minmax(0,68ch);padding:0 24px}
  .ka-kort-kaart{grid-column:1}}
@media(max-width:760px){.ka-kort{padding:0 18px;margin-top:-32px}}
.ka-kort-kaart{background:var(--k-vel);border:1px solid var(--k-rose);
  border-radius:var(--rad-xl);box-shadow:var(--sch-hoog);padding:32px 36px}
@media(max-width:760px){.ka-kort-kaart{padding:24px 22px}}
.ka-kort-kop{display:flex;align-items:center;gap:11px;margin:0 0 18px;
  font-size:var(--t-micro);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--k-oranje-tekst)}
.ka-kort-kop svg{width:20px;height:20px;fill:none;stroke:var(--k-oranje);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ka-kort ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ka-kort li{display:flex;gap:13px;align-items:flex-start;font-size:16.5px;line-height:1.62;
  color:var(--k-tekst)}
.ka-kort li::before{content:"";flex:0 0 auto;width:9px;height:9px;margin-top:9px;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--k-oranje)}

/* ---------- 3. RAAMWERK: inhoudsopgave + leeskolom ---------- */
/* Een leeskolom van 68 tekens, en alles binnen die kolom deelt dezelfde
   rechterkantlijn. Voor de meting stonden er drie kantlijnen naast elkaar
   (tekst op 68ch, rasters op de volle kolom); dat las als rommel. */
.ka-body{max-width:1180px;margin:0 auto;padding:var(--r-8) 32px 0;
  display:grid;grid-template-columns:248px minmax(0,68ch);gap:72px;
  align-items:start;justify-content:center}
@media(max-width:1180px){.ka-body{grid-template-columns:230px minmax(0,1fr);gap:48px}}
@media(max-width:1080px){.ka-body{grid-template-columns:minmax(0,68ch);gap:0;
  padding:var(--r-6) 24px 0;justify-content:center}}
@media(max-width:760px){.ka-body{padding:var(--r-5) 18px 0}}

.ka-toc{position:sticky;top:96px}
@media(max-width:1080px){.ka-toc{position:static;margin:0 0 34px}}
.ka-toc-kop{font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--k-grijs);margin:0 0 14px;padding:0 0 12px;
  border-bottom:1px solid var(--k-rose)}
.ka-toc ol{list-style:none;margin:0;padding:0;counter-reset:ka}
.ka-toc li{counter-increment:ka}
.ka-toc a{display:flex;gap:10px;align-items:baseline;text-decoration:none;
  font-size:14px;line-height:1.45;color:var(--k-tekst);padding:8px 10px 8px 0;
  border-left:2px solid transparent;padding-left:12px;margin-left:-2px;
  transition:color var(--b-micro) var(--b-curve),border-color var(--b-micro) var(--b-curve)}
.ka-toc a::before{content:counter(ka,decimal-leading-zero);font-size:11px;font-weight:700;
  letter-spacing:.06em;color:var(--k-rose-rand);flex:0 0 auto}
.ka-toc a:hover{color:var(--k-pruim);border-left-color:var(--k-rose-rand)}
.ka-toc a.actief{color:var(--k-pruim);font-weight:600;border-left-color:var(--k-oranje)}
.ka-toc a.actief::before{color:var(--k-oranje)}
/* mobiel: uitklapbaar */
.ka-toc-mob{display:none}
@media(max-width:1080px){
  .ka-toc-mob{display:block;background:var(--k-vel);border:1px solid var(--k-rose);
    border-radius:var(--rad-l);padding:4px 18px}
  .ka-toc-mob>summary{cursor:pointer;list-style:none;padding:14px 0;font-weight:600;
    font-size:15px;color:var(--k-nacht);display:flex;justify-content:space-between;align-items:center}
  .ka-toc-mob>summary::-webkit-details-marker{display:none}
  .ka-toc-mob>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--k-oranje);
    border-bottom:2px solid var(--k-oranje);transform:rotate(45deg) translateY(-2px);
    transition:transform var(--b-micro)}
  .ka-toc-mob[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
  .ka-toc-vast{display:none}
}
@media(min-width:1081px){.ka-toc-mob{display:none}}

/* ---------- 4. SECTIES ---------- */
.ka-inhoud{min-width:0}
/* Ruimte is de scheiding, niet de lijn. 96px op desktop, 64px op mobiel,
   precies zoals de blauwdruk voorschrijft. Gemeten stond dit op 0. */
.ka-sectie{scroll-margin-top:104px}
.ka-sectie+.ka-sectie{margin-top:var(--r-8)}
@media(max-width:760px){.ka-sectie+.ka-sectie{margin-top:var(--r-7)}}
.ka-inhoud>.ka-sectie:first-child{padding-top:4px}
/* Het anker: label, kop, streepje. Altijd dezelfde maat en dezelfde
   afstanden, op elke pagina van het platform. Dit is de handtekening. */
.ka-label{display:block;font-size:var(--t-micro);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--k-oranje-tekst);margin:0 0 12px}
.ka-h2{font-size:clamp(25px,2.5vw,31px);line-height:1.18;color:var(--k-nacht);margin:0}
.ka-h2::after{content:"";display:block;width:52px;height:4px;border-radius:var(--rad-pil);
  background:var(--k-oranje);margin:18px 0 0}
.ka-h2+*{margin-top:var(--r-4)!important}
/* De eerste alinea van het artikel draagt de intro; iets groter gezet geeft
   het stuk een redactionele opening zonder dat er tekst bij komt. */
.ka-inhoud>.ka-sectie:first-child>p:first-of-type{font-size:var(--t-lead);line-height:1.62;
  color:var(--k-tekst)}
.ka-h3{font-size:var(--t-h3);color:var(--k-nacht);margin:var(--r-5) 0 var(--r-2)}
.ka-h4{font-size:16.5px;font-weight:600!important;color:var(--k-nacht);margin:var(--r-4) 0 var(--r-1)}
.ka-lead{font-size:var(--t-lead);line-height:1.62;color:var(--k-tekst);margin:var(--r-4) 0 0}
.ka-inhoud p{font-size:var(--t-body);line-height:var(--t-lh);color:var(--k-inkt);margin:var(--r-3) 0 0}
.ka-inhoud p strong{color:var(--k-nacht);font-weight:600}
.ka-inhoud a{color:var(--k-pruim);text-decoration:underline;text-decoration-color:var(--k-rose-rand);
  text-underline-offset:3px;transition:color var(--b-micro)}
.ka-inhoud a:hover{color:var(--k-oranje-tekst);text-decoration-color:var(--k-oranje)}
.ka-h2+.ka-lead{margin-top:var(--r-4)}
.ka-scheiding{border:0;border-top:1px solid var(--k-rose);margin:var(--r-5) 0}

/* lijsten */
.ka-lijst{list-style:none;margin:var(--r-3) 0 0;padding:0;display:grid;gap:10px}
.ka-lijst li{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-body);
  line-height:1.6;color:var(--k-inkt)}
.ka-lijst li::before{content:"";flex:0 0 auto;width:6px;height:6px;margin-top:11px;
  border-radius:50%;background:var(--k-rose-rand)}
.ka-vinklijst{list-style:none;margin:var(--r-3) 0 0;padding:0;display:grid;gap:11px}
.ka-vinklijst li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.6}
.ka-vinklijst li::before{content:"";flex:0 0 auto;width:18px;height:18px;margin-top:3px;
  border-radius:50%;background:var(--k-lila);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8834a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:12px;background-repeat:no-repeat;background-position:center}
.ka-nummerlijst{list-style:none;margin:var(--r-4) 0 0;padding:0;counter-reset:kastap;display:grid;gap:16px}
.ka-nummerlijst li{counter-increment:kastap;display:flex;gap:18px;align-items:flex-start}
.ka-nummerlijst li::before{content:counter(kastap,decimal-leading-zero);flex:0 0 auto;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--k-lila);color:var(--k-pruim);font-size:13px;font-weight:700;letter-spacing:.04em}
.ka-nummerlijst li>div{min-width:0}
.ka-nummerlijst p{margin-top:4px}

/* ---------- 5. KAARTEN ---------- */
.ka-raster{display:grid;gap:20px;margin:var(--r-4) 0 0}
.ka-raster-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ka-raster-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ka-raster-4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1080px){.ka-raster-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.ka-raster-2,.ka-raster-3,.ka-raster-4{grid-template-columns:1fr}}
.ka-kaart{background:var(--k-vel);border:1px solid var(--k-rose);border-radius:var(--rad-l);
  padding:24px;box-shadow:var(--sch-vel);display:flex;flex-direction:column;gap:8px;
  min-width:0;overflow-wrap:anywhere}
.ka-raster>*{min-width:0}
.ka-kaart .ka-kaart-titel{font-size:17px;font-weight:600;color:var(--k-nacht);line-height:1.35;margin:0}
.ka-kaart p{font-size:15.5px;line-height:1.62;color:var(--k-tekst);margin:0;max-width:none}
.ka-kaart-teken{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--rad-m);background:var(--k-lila);
  font-size:19px;line-height:1;margin:0 0 4px;flex:0 0 auto}
.ka-kaart-teken svg{width:20px;height:20px}
.ka-donker .ka-kaart-teken{background:rgba(255,255,255,.12)}

/* Het bestaande emoji-naar-SVG-script maakt <svg class="up-ic"> zonder eigen
   kleurregels; die stonden in de pagina-eigen CSS die dit sjabloon vervangt.
   Zonder deze regel vullen de paden zich zwart. */
.ka .up-ic{fill:none!important;stroke:currentColor!important;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;width:1.05em;height:1.05em;
  vertical-align:-.16em;display:inline-block;flex:0 0 auto}
.ka .ka-kaart-teken .up-ic{width:20px;height:20px;color:var(--k-oranje-diep);vertical-align:0}
.ka-donker .ka-kaart-teken .up-ic{color:var(--k-peach)}
.ka .ka-tip .up-ic,.ka .ka-knop .up-ic{color:currentColor}
.ka .ka-label .up-ic,.ka .ka-gids-kop .up-ic{color:var(--k-oranje)}
.ka-kaart-getal{font-size:22px;font-weight:700;color:var(--k-pruim);letter-spacing:-.02em}
.ka-kaart>*+.ka-tip,.ka-kaart>*+.ka-knoppen{margin-top:auto;padding-top:6px}

/* ---------- 6. DONKER BLOK ---------- */
.ka-donker{background:linear-gradient(126deg,var(--k-diep),var(--k-pruim));
  border-radius:var(--rad-xl);padding:38px 40px;margin:var(--r-5) 0 0;position:relative;overflow:hidden}
@media(max-width:620px){.ka-donker{padding:28px 22px}}
.ka-donker::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  right:-130px;bottom:-170px;background:radial-gradient(circle,rgba(240,168,117,.14),transparent 70%);
  pointer-events:none}
.ka-donker .ka-label{color:var(--k-peach)}
.ka-donker .ka-h2,.ka-donker .ka-h3,.ka-donker .ka-kaart-titel{color:#fff;position:relative}
.ka-donker p{color:rgba(255,255,255,.85);position:relative}
.ka-donker .ka-kaart{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);
  box-shadow:none;backdrop-filter:blur(6px)}
.ka-donker .ka-kaart p{color:rgba(255,255,255,.8)}
.ka-donker a{color:var(--k-peach)}
.ka-donker .ka-kaart-getal{color:var(--k-peach)}
.ka-donker .ka-lijst li,.ka-donker .ka-vinklijst li{color:rgba(255,255,255,.85)}

/* ---------- 7. CALL-OUTS ---------- */
.ka-melding{display:flex;gap:15px;align-items:flex-start;border-radius:var(--rad-l);
  padding:20px 22px;margin:var(--r-4) 0 0;border:1px solid}
.ka-melding svg{width:21px;height:21px;flex:0 0 auto;margin-top:2px;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ka-melding p{margin:0!important;font-size:15.5px;line-height:1.62}
.ka-melding .ka-melding-titel{display:block;font-weight:600;margin:0 0 4px}
.ka-let{background:var(--k-let-bg);border-color:#f2d8be}
.ka-let svg{stroke:var(--k-let)}.ka-let .ka-melding-titel{color:var(--k-let)}
.ka-info{background:var(--k-info-bg);border-color:#dbe3ed}
.ka-info svg{stroke:var(--k-info)}.ka-info .ka-melding-titel{color:var(--k-info)}
.ka-goed{background:var(--k-succes-bg);border-color:var(--k-succes-rand)}
.ka-goed svg{stroke:var(--k-succes)}.ka-goed .ka-melding-titel{color:var(--k-succes)}

.ka-quote{margin:var(--r-5) 0 0;padding:4px 0 4px 26px;border-left:4px solid var(--k-oranje)}
.ka-quote p{font-size:20px;line-height:1.5;color:var(--k-nacht);font-weight:500;margin:0!important}
.ka-quote cite{display:block;font-style:normal;font-size:14px;color:var(--k-grijs);margin-top:10px}

/* ---------- 8. TABELLEN ---------- */
.ka-tabel-wrap{margin:var(--r-4) 0 0;overflow-x:auto;border:1px solid var(--k-rose);
  border-radius:var(--rad-l);background:var(--k-vel);-webkit-overflow-scrolling:touch}
.ka-tabel{width:100%;border-collapse:collapse;font-size:15.5px;min-width:520px}
.ka-tabel th{background:var(--k-pruim);color:#fff;font-weight:600;text-align:left;
  padding:14px 18px;font-size:14px;letter-spacing:.01em;white-space:nowrap}
.ka-tabel td{padding:14px 18px;border-top:1px solid var(--k-rose);color:var(--k-inkt);
  font-variant-numeric:tabular-nums;vertical-align:top;line-height:1.55}
.ka-tabel tbody tr:nth-child(even){background:var(--k-lila)}
.ka-tabel a{color:var(--k-pruim)}

/* ---------- 9. KNOPPEN EN CHIPS ---------- */
.ka-knoppen{display:flex;flex-wrap:wrap;gap:12px;margin:var(--r-4) 0 0}
.ka-knop{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;
  padding:12px 20px;border-radius:var(--rad-m);text-decoration:none!important;
  min-height:44px;transition:transform var(--b-micro) var(--b-curve),box-shadow var(--b-micro),
  background var(--b-micro),color var(--b-micro)}
.ka-knop svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.ka-knop-vol{background:linear-gradient(145deg,var(--k-peach),var(--k-oranje) 58%,var(--k-oranje-diep));
  color:var(--knop-tekst)!important;box-shadow:var(--sch-knop)}
.ka-knop-vol:hover{transform:translateY(-2px);box-shadow:var(--sch-knop-h);color:var(--knop-tekst)!important}
.ka-knop-zacht{background:var(--k-vel);color:var(--k-pruim)!important;border:1px solid var(--k-rose-rand)}
.ka-knop-zacht:hover{border-color:var(--k-oranje);color:var(--k-oranje-diep)!important;transform:translateY(-2px)}
.ka-donker .ka-knop-zacht{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);
  color:#fff!important}
.ka-donker .ka-knop-zacht:hover{background:rgba(255,255,255,.18);color:#fff!important}

.ka-tip{display:inline-flex;align-items:center;gap:8px;background:var(--k-lila);
  color:var(--k-pruim)!important;font-size:13.5px;font-weight:500;padding:8px 14px;
  border-radius:var(--rad-pil);text-decoration:none!important;line-height:1.4;
  transition:background var(--b-micro),color var(--b-micro)}
.ka-tip:hover{background:var(--k-tag-bg);color:var(--k-tag-tekst)!important}
.ka-chips{display:flex;flex-wrap:wrap;gap:9px;margin:var(--r-3) 0 0}

/* ---------- 10. FAQ ---------- */
/* Vijf losse kaders onder elkaar lezen als ruis. Een blok met haarfijne
   scheidingen is rustiger en laat de vragen als een reeks lezen. */
.ka-faq{border:1px solid var(--k-rose);background:var(--k-vel);margin:0;
  border-radius:0;border-bottom:0;transition:background var(--b-micro)}
.ka-faq:first-of-type{border-radius:var(--rad-l) var(--rad-l) 0 0;margin-top:var(--r-4)}
.ka-faq:last-of-type{border-radius:0 0 var(--rad-l) var(--rad-l);border-bottom:1px solid var(--k-rose)}
.ka-faq:only-of-type{border-radius:var(--rad-l);border-bottom:1px solid var(--k-rose)}
.ka-faq[open]{background:var(--k-lila)}
.ka-faq>summary{cursor:pointer;list-style:none;padding:18px 54px 18px 22px;position:relative;
  font-size:16.5px;font-weight:600;color:var(--k-nacht);line-height:1.45}
.ka-faq>summary::-webkit-details-marker{display:none}
.ka-faq>summary::after{content:"";position:absolute;right:22px;top:24px;width:12px;height:12px;
  background:
    linear-gradient(var(--k-oranje),var(--k-oranje)) center/12px 2px no-repeat,
    linear-gradient(var(--k-oranje),var(--k-oranje)) center/2px 12px no-repeat;
  transition:transform var(--b-onthul) var(--b-curve)}
.ka-faq[open]>summary::after{transform:rotate(135deg)}
.ka-faq>summary:hover{color:var(--k-pruim)}
.ka-faq-antwoord{padding:0 22px 20px;font-size:16px;line-height:1.68;color:var(--k-tekst)}
.ka-faq-antwoord p{font-size:16px!important;margin:0 0 10px!important;max-width:none!important}
.ka-faq-antwoord p:last-child{margin-bottom:0!important}

/* ---------- 11. BEELD ---------- */
.ka-beeld{margin:var(--r-5) 0 0;border-radius:var(--rad-l);overflow:hidden;
  box-shadow:var(--sch-vel);background:var(--k-lila)}
.ka-beeld img{width:100%;aspect-ratio:16/9;object-fit:cover}
.ka-beeld figcaption{font-size:13.5px;color:var(--k-grijs);padding:12px 16px;background:var(--k-vel)}
.ka-beeld-paar{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:var(--r-5) 0 0}
@media(max-width:620px){.ka-beeld-paar{grid-template-columns:1fr}}
.ka-beeld-paar .ka-beeld{margin:0}

/* ---------- 12. GIDSVERWIJZING ---------- */
.ka-gids{background:var(--k-lila);border:1px solid var(--k-rose);border-radius:var(--rad-xl);
  padding:30px 32px;margin:var(--r-5) 0 0}
@media(max-width:620px){.ka-gids{padding:24px 20px}}
.ka-gids-kop{font-size:var(--t-micro);font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--k-oranje-tekst);margin:0 0 16px}
.ka-gids-lijst{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.ka-gids-lijst a{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--k-vel);border:1px solid var(--k-rose);border-radius:var(--rad-m);
  padding:14px 18px;font-size:15px;font-weight:600;color:var(--k-pruim)!important;
  text-decoration:none!important;min-height:44px;
  transition:transform var(--b-micro) var(--b-curve),border-color var(--b-micro)}
.ka-gids-lijst a::after{content:"";width:8px;height:8px;flex:0 0 auto;
  border-top:2px solid var(--k-oranje);border-right:2px solid var(--k-oranje);
  transform:rotate(45deg);transition:transform var(--b-micro)}
.ka-gids-lijst a:hover{transform:translateY(-2px);border-color:var(--k-oranje)}

/* ---------- 13. RUSTMARKERING (de vlinder) ---------- */
.ka-rust{display:flex;justify-content:center;padding:var(--r-6) 0 var(--r-5)}
.ka-rust svg{width:38px;height:30px;fill:none;stroke:var(--k-rose-rand);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- 14. VOLGENDE STAP ---------- */
.ka-volgende{max-width:1200px;margin:0 auto;padding:0 32px var(--r-7)}
@media(max-width:760px){.ka-volgende{padding:0 20px var(--r-6)}}
.ka-volgende-kop{font-size:var(--t-micro);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--k-grijs);margin:0 0 18px}
.ka-volgende-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.ka-stap{display:block;background:var(--k-vel);border:1px solid var(--k-rose);
  border-radius:var(--rad-l);padding:24px 26px;text-decoration:none!important;
  box-shadow:var(--sch-vel);position:relative;overflow:hidden;
  transition:transform var(--b-micro) var(--b-curve),box-shadow var(--b-micro)}
.ka-stap::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--k-oranje);transform:scaleX(0);transform-origin:left;
  transition:transform var(--b-onthul) var(--b-curve)}
.ka-stap:hover{transform:translateY(-4px);box-shadow:var(--sch-hoog)}
.ka-stap:hover::before{transform:scaleX(1)}
.ka-stap b{display:block;font-size:17px;font-weight:600;color:var(--k-nacht);margin:0 0 7px}
.ka-stap span{display:block;font-size:14.5px;line-height:1.6;color:var(--k-grijs)}
.ka-stap em{display:inline-flex;align-items:center;gap:7px;font-style:normal;font-weight:600;
  font-size:14px;color:var(--k-pruim);margin-top:14px}
.ka-stap em::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;
  border-right:2px solid currentColor;transform:rotate(45deg);
  transition:transform var(--b-micro)}
.ka-stap:hover em{color:var(--k-oranje-diep)}
.ka-stap:hover em::after{transform:rotate(45deg) translate(2px,-2px)}

/* ---------- 15. SLOTBAND ---------- */
.ka-slot{background:linear-gradient(122deg,var(--k-diep),var(--k-nacht) 55%,var(--k-pruim));
  position:relative;overflow:hidden}
.ka-slot::after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;
  left:-160px;bottom:-260px;background:radial-gradient(circle,rgba(240,168,117,.13),transparent 70%);
  pointer-events:none}
.ka-slot-in{max-width:1200px;margin:0 auto;padding:56px 32px;position:relative;z-index:1;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px}
@media(max-width:760px){.ka-slot-in{padding:40px 20px}}
.ka-slot h2{font-size:clamp(22px,2.4vw,28px);font-weight:700!important;color:#fff;margin:0 0 10px;
  letter-spacing:-.02em}
.ka-slot p{margin:0;max-width:58ch;font-size:16px;line-height:1.65;color:rgba(255,255,255,.82)}
.ka-slot .ka-knoppen{margin:0}

/* ---------- 16. BEWEGING EN TOEGANKELIJKHEID ---------- */
@keyframes kaDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(-60px,44px) scale(1.12)}}
.ka a:focus-visible,.ka summary:focus-visible,.ka button:focus-visible{
  outline:0!important;box-shadow:var(--focus)!important;border-radius:var(--rad-s)}
@media (prefers-reduced-motion:reduce){
  .ka-hero::after{animation:none}
  .ka *{transition:none!important}
}

/* avondmodus: de donkere blokken mogen niet zwarter worden dan de pagina */
[data-thema="avond"] .ka-kort-kaart,[data-thema="avond"] .ka-kaart,
[data-thema="avond"] .ka-faq,[data-thema="avond"] .ka-stap,
[data-thema="avond"] .ka-tabel-wrap{background:var(--k-vel);border-color:var(--k-vel-rand)}
[data-thema="avond"] .ka-gids{background:var(--k-lila);border-color:var(--k-vel-rand)}
[data-thema="avond"] .ka-tabel tbody tr:nth-child(even){background:var(--k-lila)}
[data-thema="avond"] .ka-tabel td{border-color:var(--k-vel-rand)}
[data-thema="avond"] .ka-melding{background:var(--k-lila);border-color:var(--k-vel-rand)}
[data-thema="avond"] .ka-melding p,[data-thema="avond"] .ka-melding-titel{color:var(--k-tekst)}

/* Avondmodus: de donkere merkvlakken mogen niet met de pagina versmelten,
   en tekst op die vlakken blijft altijd wit. */
[data-thema="avond"] .ka-hero,[data-thema="avond"] .ka-slot,
[data-thema="avond"] .ka-donker{background:linear-gradient(122deg,#2a1526,#3d1c37 60%,#4d2444)}
[data-thema="avond"] .ka-hero h1,[data-thema="avond"] .ka-slot h2,
[data-thema="avond"] .ka-donker .ka-h2,[data-thema="avond"] .ka-donker .ka-h3,
[data-thema="avond"] .ka-donker .ka-kaart-titel,[data-thema="avond"] .ka-cijfer b{color:#fff}
[data-thema="avond"] .ka-donker p,[data-thema="avond"] .ka-slot p,
[data-thema="avond"] .ka-hero-lead{color:rgba(255,255,255,.86)}
[data-thema="avond"] .ka-tip{background:var(--k-tag-bg);color:var(--k-tag-tekst)!important}
[data-thema="avond"] .ka-knop-zacht{background:var(--k-vel);color:var(--k-pruim)!important;
  border-color:var(--k-vel-rand)}
[data-thema="avond"] .ka-gids-lijst a{background:var(--k-vel);border-color:var(--k-vel-rand);
  color:var(--k-pruim)!important}
[data-thema="avond"] .ka-nummerlijst li::before{background:var(--k-lila);color:var(--k-pruim)}
[data-thema="avond"] .ka-kaart-teken{background:var(--k-lila)}
[data-thema="avond"] .ka-tabel th{background:#3d1c37}
[data-thema="avond"] .ka-quote p{color:var(--k-inkt)}

/* Vette tekst binnen donkere vlakken erfde de donkere kopkleur en viel
   daardoor weg tegen de ondergrond (gemeten: 1.05:1). */
.ka-donker strong,.ka-donker b,.ka-slot strong,.ka-hero strong{color:#fff}
.ka-donker li,.ka-donker span,.ka-donker cite,.ka-donker td,.ka-donker th{color:rgba(255,255,255,.86)}
.ka-donker .ka-tabel th{background:rgba(255,255,255,.12)}
.ka-donker .ka-tabel-wrap{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.ka-donker .ka-tabel tbody tr:nth-child(even){background:rgba(255,255,255,.05)}
.ka-donker .ka-tabel td{border-color:rgba(255,255,255,.14)}
.ka-donker .ka-melding{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.ka-donker .ka-melding p,.ka-donker .ka-melding-titel{color:rgba(255,255,255,.88)}
.ka-donker .ka-melding svg{stroke:var(--k-peach)}
.ka-donker .ka-tip{background:rgba(255,255,255,.14);color:#fff!important}
.ka-donker .ka-vinklijst li::before{background:rgba(255,255,255,.16)}
.ka-hero .ka-cijfer span{color:rgba(255,255,255,.78)}

/* De skip-link is alleen bij toetsenbordfocus zichtbaar, maar moet dan wel
   voldoen. */
.ka .skip-link{background:var(--k-diep);color:#fff!important}

/* Twee correcties na meting:
   1. .ka-inhoud p strong (0,1,2) won van .ka-donker strong (0,1,1), waardoor
      vette tekst in donkere vlakken alsnog donkerpaars bleef.
   2. Cijferblokken buiten de hero stonden als wit-op-creme in de leeskolom. */
.ka-donker p strong,.ka-donker li strong,.ka-slot p strong{color:#fff}
.ka-inhoud .ka-cijfers{gap:14px}
.ka-inhoud .ka-cijfer{background:var(--k-lila);border-color:var(--k-rose)}
.ka-inhoud .ka-cijfer b{color:var(--k-pruim)}
.ka-inhoud .ka-cijfer span{color:var(--k-tekst)}
.ka-donker .ka-cijfer{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}
.ka-donker .ka-cijfer b{color:#fff}
.ka-donker .ka-cijfer span{color:rgba(255,255,255,.8)}

/* ---------- Correcties na de geometrie-audit ---------- */
/* Lange woorden en brede kaarten duwden de kolom op mobiel buiten beeld. */
.ka-inhoud,.ka-sectie,.ka-lijst,.ka-vinklijst,.ka-nummerlijst,.ka-toc{min-width:0}
.ka-inhoud p,.ka-inhoud li,.ka-kaart-titel,.ka-h2,.ka-h3,.ka-lead,
.ka-faq>summary,.ka-kort li{overflow-wrap:break-word;hyphens:auto}
.ka-toc-mob>summary{overflow-wrap:break-word}

/* Raakdoelen: alles wat je aanraakt is minstens 44 pixels hoog. */
.ka-tip{min-height:40px}
@media(max-width:900px){
  .ka-tip{min-height:44px;padding:11px 16px}
  .ka-toc a{padding-top:11px;padding-bottom:11px}
  .ka-gids-lijst a{min-height:48px}
  .ka-faq>summary{padding-top:20px;padding-bottom:20px}
}

/* Mobiel: de hero mag korter, de inhoudsopgave dichter op de tekst. */
@media(max-width:760px){
  .ka-hero-in{padding:44px 20px 52px}
  .ka-hero h1{font-size:clamp(27px,7.4vw,34px);max-width:none}
  .ka-hero-lead{font-size:17px}
  .ka-meta{gap:8px 18px;font-size:13.5px}
  .ka-cijfers{gap:10px}
  .ka-cijfer{padding:12px 16px;min-width:0;flex:1 1 auto}
  .ka-kort{margin-top:-26px}
  .ka-kort-kaart{padding:22px 20px}
  .ka-kort li{font-size:16px}
  .ka-toc{margin-bottom:var(--r-5)}
  .ka-donker{padding:26px 20px}
  .ka-gids{padding:22px 18px}
  .ka-slot-in{padding:38px 20px}
}

/* De pijl in de mobiele inhoudsopgave duwde de regel 4 pixels buiten beeld. */
.ka-toc-mob>summary>span,.ka-toc-mob>summary{min-width:0}
@media(max-width:1080px){
  .ka-toc-mob>summary{gap:14px}
  .ka-toc-mob>summary::after{flex:0 0 auto}
}
.ka-hero h1{max-width:17ch}
@media(max-width:1080px){.ka-hero h1{max-width:22ch}}

/* De inhoudsopgave krijgt een doorlopende lijn waarop de actieve sectie
   zichtbaar wordt. Een leesliniaal, geen versiering. */
.ka-toc-vast ol{border-left:1px solid var(--k-rose);padding-left:2px}
.ka-toc-vast a{border-left:2px solid transparent;margin-left:-2px}

/* Mobiele inhoudsopgave: tekst krimpt, teller en pijl houden hun maat. */
.ka-toc-mob>summary>span{flex:1 1 auto;min-width:0}
.ka-toc-mob>summary>b{flex:0 0 auto;font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--k-oranje-tekst);background:var(--k-lila);border-radius:var(--rad-pil);
  padding:3px 10px}
.ka-toc-mob>summary{gap:12px}

/* Losse bronvermeldingen en cijfers die de omzetter uit de oude opmaak haalt,
   staan als een rustige regel onder de tekst in plaats van als zwevende
   blokjes. */
.ka-bron{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  font-size:var(--t-small)!important;color:var(--k-grijs)!important;
  margin:var(--r-3) 0 0!important;line-height:1.5}
.ka-bron a{color:var(--k-pruim)!important}
.ka-bron .ka-knop,.ka-bron .ka-tip{margin:0}

/* De pijl telde zijn randen bij de breedte op en duwde de regel 4 pixels
   buiten de kolom. */
.ka-toc-mob>summary::after,.ka-gids-lijst a::after,.ka-stap em::after{box-sizing:border-box}

/* De pijl uit de flow halen; dan kan hij de regel niet meer verbreden. */
@media(max-width:1080px){
  .ka-toc-mob>summary{position:relative;padding-right:26px}
  .ka-toc-mob>summary::after{position:absolute;right:2px;top:50%;margin-top:-6px}
}

/* Raakdoelen: de inhoudsopgave en losse links in kaarten halen de 44 pixels. */
@media(max-width:1080px){
  .ka-toc a{padding-top:13px;padding-bottom:13px}
  .ka-kaart>a{min-height:44px;display:inline-flex;align-items:center}
}

/* ---------- Sitewide blokken die door script worden ingevoegd ----------
   De opleidingsband en het rustslot zijn al sitebreed vormgegeven als
   donkere merkband. Dat is precies de slotband uit de blauwdruk, dus het
   sjabloon laat ze met rust en regelt alleen de breedte en de ademruimte. */
body.ka .up-reclame,body.ka .up-rustslot{max-width:1180px;margin-left:auto;margin-right:auto;
  margin-top:var(--r-8)}
@media(max-width:760px){body.ka .up-reclame,body.ka .up-rustslot{margin-top:var(--r-7)}}
body.ka .up-reclame h2::after,body.ka .up-rustslot h2::after{display:none}
body.ka .up-rustslot-knop{min-height:44px;display:inline-flex;align-items:center;
  color:var(--knop-tekst)}