.wb-tp-sectie { width: 100%; min-width: 0; background: var(--wb-canvas, #000); padding: 110px 24px 0;
    font-family: "Inter Tight", sans-serif; }
  .wb-tp-sectie:first-of-type { padding-top: 190px; }
  .wb-tp-sectie:last-of-type { padding-bottom: 40px; }
  .wb-tp-inner { width: 100%; max-width: 1200px; margin: 0 auto; }
  .wb-tp-hero { max-width: 840px; margin: 0 auto; text-align: center; }
  .wb-tp-hero h1 { margin: 0; color: var(--wb-text, #fff); font-size:var(--wb-fs-hero);
    font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; text-shadow: 0 0 32px rgba(255,255,255,.35); }
  .wb-tp-hero-intro { margin: 22px auto 0; max-width: 640px; color: var(--wb-text-body, #92969f);
    font: 500 var(--wb-fs-body)/1.65 "Inter Tight", sans-serif; }
  .wb-tp-pil { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
    border: 1px solid var(--wb-border, #2a2d31); border-radius: 999px; padding: 9px 16px;
    color: var(--wb-text-muted, #777d87); font: 500 var(--wb-fs-label)/1 "Inter Tight", sans-serif; }
  .wb-tp-prose { max-width: 760px; margin: 0 auto; }
  .wb-tp-prose > :first-child { margin-top: 0; }
  .wb-tp-prose h2 { margin: 40px 0 0; padding-top: 32px; border-top: 1px solid var(--wb-border, #2a2d31);
    color: var(--wb-text, #fff); font: 600 var(--wb-fs-kaartkop)/1.35 "Inter Tight", sans-serif; }
  .wb-tp-prose > h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
  .wb-tp-prose h3 { margin: 26px 0 0; color: var(--wb-text, #fff); font: 600 var(--wb-fs-subkop)/1.4 "Inter Tight", sans-serif; }
  .wb-tp-prose p { margin: 14px 0 0; color: var(--wb-text-body, #92969f); font: 500 var(--wb-fs-tekst)/1.65 "Inter Tight", sans-serif; }
  .wb-tp-prose > p:first-child em { color: var(--wb-text-muted, #777d87); }
  .wb-tp-prose ul, .wb-tp-prose ol { margin: 14px 0 0; padding-left: 22px; }
  .wb-tp-prose li { margin-top: 9px; color: var(--wb-text-body, #92969f); font: 500 var(--wb-fs-tekst)/1.65 "Inter Tight", sans-serif; }
  .wb-tp-prose li::marker { color: var(--wb-text-faint, #6b707a); }
  .wb-tp-prose strong { color: var(--wb-text, #fff); font-weight: 600; }
  .wb-tp-prose code { background: var(--wb-surface-4, #1c1e20); border-radius: 6px; padding: 2px 7px;
    color: var(--wb-text-nav, #adb0b7); font: 500 var(--wb-fs-label)/1.4 "Roboto Mono", monospace; }
  .wb-tp-prose a { color: var(--wb-text-nav, #adb0b7); text-decoration: underline; text-underline-offset: 2px; }
  .wb-tp-prose a:hover { color: var(--wb-text, #fff); }
.wb-sm-kop { margin: 0 0 22px; color: var(--wb-text, #fff);
    font: 700 var(--wb-fs-sectie)/1.2 "Inter Tight", sans-serif; letter-spacing: -0.01em; }
     TWEE kolommen en niet drie, en dat is gemeten (2026-08-29, 1440px). De
     inner is op 1200px gekapt, dus een derde kolom haalt geen extra ruimte
     binnen maar deelt dezelfde 1200 in smallere stroken. Bij drie bleef er
     272px onder de kortste kolom leeg, bij twee 65px; en de uitlegregel
     wikkelde bij drie kolommen naar een tweede regel, bij twee geen enkele
     keer (0 van de 34). Zes groepen van 3 tot 10 items verdelen zich nu
     eenmaal niet in drie gelijke stapels. */
  .wb-sm-groepen { columns: 1; column-gap: 28px; }
  @media (min-width: 760px)  { .wb-sm-groepen { columns: 2; } }
  .wb-sm-groep { break-inside: avoid; margin: 0 0 30px; }
  .wb-sm-groep h3 { margin: 0 0 6px; padding: 0 0 10px 10px; color: var(--wb-text, #fff);
    border-bottom: 1px solid var(--wb-border, #2a2d31);
    font: 600 var(--wb-fs-kaartkop)/1.4 "Inter Tight", sans-serif; }
  .wb-sm-rij { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px;
    text-decoration: none; transition: background-color .15s ease; }
  .wb-sm-rij:hover { background: var(--wb-surface-hover, var(--wb-surface-2, rgba(255,255,255,.075))); }
  .wb-sm-rij:focus-visible { outline: 2px solid var(--wb-text, #fff); outline-offset: 1px;
    background: var(--wb-surface-hover, var(--wb-surface-2, rgba(255,255,255,.075))); }
  .wb-sm-ic { width: 40px; height: 40px; flex-shrink: 0; }
  .wb-sm-ic svg { width: 100%; height: 100%; display: block; }
  .wb-sm-txt { display: block; min-width: 0; }
  .wb-sm-titel { display: block; color: var(--wb-text, #fff); font: 600 var(--wb-fs-tekst)/1.4 "Inter Tight", sans-serif; }
  .wb-sm-uitleg { display: block; color: var(--wb-text-nav, #adb0b7); font: 500 var(--wb-fs-label)/1.4 "Inter Tight", sans-serif; }
  .wb-sm-proj { display: grid; grid-template-columns: minmax(0,1fr); gap: 2px 16px; }
  @media (min-width: 640px)  { .wb-sm-proj { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (min-width: 1000px) { .wb-sm-proj { grid-template-columns: repeat(3, minmax(0,1fr)); } }
  .wb-sm-proj-beeld { display: block; width: 44px; height: auto; aspect-ratio: 1 / 1; flex-shrink: 0;
    object-fit: cover; border-radius: 10px; background: var(--wb-surface-2, #131315); }
  .wb-sm-blog { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wb-border, #2a2d31); }
  .wb-sm-blog li { border-bottom: 1px solid var(--wb-border, #2a2d31); }
  .wb-sm-blog a { display: grid; grid-template-columns: minmax(0,1fr); gap: 2px 20px;
    padding: 14px 10px; text-decoration: none; transition: background-color .15s ease; }
  @media (min-width: 640px) { .wb-sm-blog a { grid-template-columns: 130px minmax(0,1fr); align-items: baseline; } }
  .wb-sm-blog a:hover { background: var(--wb-surface-hover, var(--wb-surface-2, rgba(255,255,255,.075))); }
  .wb-sm-blog time { color: var(--wb-text-nav, #adb0b7); font: 500 var(--wb-fs-label)/1.5 "Inter Tight", sans-serif;
    font-variant-numeric: tabular-nums; white-space: nowrap; }
  .wb-sm-blog span { color: var(--wb-text, #fff); font: 500 var(--wb-fs-tekst)/1.45 "Inter Tight", sans-serif; }
  .wb-sm-cta { max-width: 640px; margin: 0 auto; text-align: center; }
  .wb-sm-cta h2 { margin: 0; color: var(--wb-text, #fff); font-size:var(--wb-fs-sectie); font-weight: 700;
    line-height: 1.15; letter-spacing: -0.01em; text-shadow: 0 0 28px rgba(255,255,255,.3); }
  .wb-sm-cta p { margin: 16px 0 0; color: var(--wb-text-body, #92969f); font: 500 var(--wb-fs-body)/1.6 "Inter Tight", sans-serif; }
  .wb-sm-cta-knoppen { margin-top: 28px; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
  .wb-sm-primair { display: inline-flex; align-items: center; justify-content: center;
    background: var(--wb-text, #fff); color: var(--wb-canvas, #000); font: 600 var(--wb-fs-tekst)/1 "Inter Tight", sans-serif;
    padding: 15px 22px; border-radius: 12px; text-decoration: none; }
  .wb-sm-primair:hover { opacity: .88; }
  .wb-sm-secundair { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid var(--wb-border, #2a2d31); color: var(--wb-text-nav, #adb0b7); font: 600 var(--wb-fs-tekst)/1 "Inter Tight", sans-serif;
    padding: 14px 20px; border-radius: 12px; text-decoration: none; transition: background .15s; }
  .wb-sm-secundair:hover { background: var(--wb-surface-hover, #26282b); color: var(--wb-text, #fff); }