/* ===================================================================
   KENNISBANK ONLINE: SITE.CSS (themachrome livegang, taak 1)
   Bron: builds/website-reset/assets/css/site.css (B-125/B-126), kopie
   zonder de <style>-inspringing plus twee toegevoegde paginasecties
   onderin dit bestand (contact, KBO Studio). Handle: ko-site.
   Site-breed geladen via functions.php (header/footer/subpagina's).
   =================================================================== */
:root {
  /* Merkpakket §2: bindende tokens (B-126) */
  --kbo-navy-950: #07142B;
  --kbo-navy-900: #0A1B3D;
  --kbo-navy-700: #002E75;
  --kbo-cyan: #00A1F1;
  --kbo-cyan-soft: #7dd3fc;
  --kbo-green: #A8FF00;
  --kbo-white: #FFFFFF;
  --kbo-ink: #0B1220;
  --kbo-muted-light: #586072;
  --kbo-font: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --nav-h: 67px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body { font-family: var(--kbo-font); background: var(--kbo-navy-950); color: var(--kbo-white); }
img { max-width: 100%; }
a { text-decoration: none; }

/* ===================== HEADER: live blok 01, kleur per B-126 ===================== */
/* Chrome-kleur (header + footer + banden) = navy-900, één consistente merkbeleving (PO-review 2026-07-12) */
.nav {
  position: sticky; top: 0; z-index: 100;
  /* Canoniek navy (doc 19 §1): solide --kbo-navy-950, geen transparantie/
     backdrop-filter meer — de headerkleur mag niet meer verschuiven met de
     onderliggende inhoud. Zelfde vaste kleur als footer/.sd/.band. */
  background: var(--kbo-navy-950);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.nav__container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  max-width: 1320px; margin-inline: auto;
  padding: 0.85rem 4vw;
}
.nav__logo { display: inline-flex; align-items: center; }
.nav__logo img { height: 38px; width: auto; display: block; }

.nav__toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 11px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 11px; cursor: pointer;
}
.nav__toggle-bar {
  display: block; height: 2px; width: 100%;
  background: #FFFFFF; border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__menu { display: none; }
.nav__menu.is-open {
  display: flex; flex-direction: column; gap: 2rem;
  position: absolute; top: 100%; left: 0; right: 0;
  padding: 2rem 4vw 3rem;
  /* Zelfde canonieke navy als .nav (doc 19 §1), solide. */
  background: var(--kbo-navy-950);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.nav__links { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; list-style: none; }
.nav__links a {
  font-size: 0.95rem; font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: -0.01em; white-space: nowrap;
  transition: color 0.18s ease;
}
.nav__links a:hover { color: #FFFFFF; }
.nav__links a:focus-visible, .nav__cta:focus-visible, .nav__toggle:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--kbo-cyan-soft); outline-offset: 2px;
}

.nav__cta {
  display: none;
  align-items: center; gap: 0.55rem;
  padding: 0.7rem 1.35rem; border-radius: 999px;
  font-weight: 700; font-size: 0.95rem; line-height: 1.2; white-space: nowrap;
  color: var(--kbo-navy-950) !important;
  background: var(--kbo-green);
  box-shadow: 0 10px 30px -8px rgba(168, 255, 0, 0.45);
  transition: transform 0.18s ease, box-shadow 0.25s ease;
}
.nav__cta svg { width: 1.05em; height: 1.05em; }
.nav__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -8px rgba(168, 255, 0, 0.55); }
.nav__cta:active { transform: translateY(0) scale(0.98); }
.nav__menu.is-open .nav__cta { display: inline-flex; }

@media (min-width: 880px) {
  .nav__toggle { display: none; }
  .nav__menu { display: flex; flex-direction: row; align-items: center; gap: 1.6rem; }
  .nav__links { flex-direction: row; align-items: center; gap: 1.6rem; }
  .nav__cta { display: inline-flex; }
}

/* ===================== HERO: nachtkaart-bron ae26a87, knopkleur per B-126 ===================== */
.block-hero {
  position: relative; width: 100%;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  overflow: hidden;
  background: var(--kbo-navy-950);
  display: flex; align-items: center;
}
.block-hero__bg { position: absolute; inset: 0; z-index: 0; }
.block-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%; display: block;
}
/* Zachte lokale demping links zodat de tekst leest: géén paneel, géén split-layout (bron) */
.block-hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 62% 85% at 17% 48%, rgba(6,12,26,0.74) 0%, rgba(6,12,26,0.40) 55%, rgba(6,12,26,0) 80%);
  pointer-events: none;
}
.block-hero__container {
  position: relative; z-index: 10;
  width: 100%; max-width: 1320px;
  margin: 0 auto; padding: 4rem 4vw;
}
.block-hero__content { max-width: 540px; }
.block-hero__eyebrow {
  display: inline-block;
  font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--kbo-cyan-soft);
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 12px rgba(3,8,18,0.8);
}
.block-hero__title {
  font-weight: 800;
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  line-height: 1.12;
  color: var(--kbo-white);
  margin-bottom: 2rem;
  text-shadow: 0 2px 24px rgba(3,8,18,0.85);
}
.block-hero__lead {
  font-size: 1.08rem; line-height: 1.7;
  color: rgba(255,255,255,0.88);
  margin-bottom: 3rem; max-width: 500px;
  text-shadow: 0 1px 14px rgba(3,8,18,0.85);
}
.block-hero__cta-row {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; margin-bottom: 0.9rem;
}
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--kbo-font); font-weight: 700; font-size: 1rem;
  padding: 0.95rem 1.6rem; border-radius: 999px; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn--primary {
  background: var(--kbo-green); color: var(--kbo-navy-950);
  box-shadow: 0 6px 28px rgba(168, 255, 0, 0.24);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 34px rgba(168, 255, 0, 0.32); }
.btn--primary:active { transform: translateY(0) scale(0.98); }
.btn--ghost {
  background: rgba(10,20,40,0.35); color: var(--kbo-white);
  border: 1px solid rgba(255,255,255,0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.btn--ghost:hover { border-color: rgba(255,255,255,0.8); }
.block-hero__microcopy {
  font-size: 0.88rem; color: rgba(255,255,255,0.62);
  text-shadow: 0 1px 10px rgba(3,8,18,0.8);
}

/* Pulsring over de ingebakken markering: het enige bewegende element (bron) */
.kbo-marker-pulse {
  position: absolute; z-index: 5;
  left: 57.7%; top: 63.7%;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.kbo-marker-pulse::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(110, 231, 149, 0.75);
  animation: kboPulse 4s ease-out infinite;
}
@keyframes kboPulse {
  0%   { transform: scale(1);   opacity: 0.85; }
  70%  { transform: scale(4.2); opacity: 0; }
  100% { transform: scale(4.2); opacity: 0; }
}
/* Herstelopdracht doc 15 §6.1 / doc 12 §3: bij prefers-reduced-motion blijft
   een DUIDELIJKE statische locatie-indicatie zichtbaar (voorheen: opacity 0,
   dus onzichtbaar). Animatie uit, ring blijft zichtbaar aan. */
@media (prefers-reduced-motion: reduce) {
  .kbo-marker-pulse::before { animation: none; transform: scale(2.2); opacity: 0.9; border-width: 2px; }
}

/* Tekstloze legenda (bron): rechtsonder, alleen op ruime schermen */
.kbo-legend {
  position: absolute; z-index: 5;
  right: 2.2rem; bottom: 2.2rem;
  width: 96px; padding: 1rem 0.9rem;
  border: 1px solid rgba(125, 211, 252, 0.30);
  border-radius: 12px;
  background: rgba(8, 16, 32, 0.35);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: flex; flex-direction: column; gap: 0.7rem;
  pointer-events: none;
}
.kbo-legend svg { display: block; width: 100%; height: 10px; }

/* Responsive: bronwaarden */
@media (max-width: 768px) {
  .kbo-legend { display: none; }
  .block-hero { align-items: flex-start; }
  .block-hero__container { padding-top: 3.2rem; }
  .block-hero__bg img { object-position: 52% 50%; }
  .kbo-marker-pulse { left: 55%; top: 63.7%; }
  .block-hero__bg::after {
    background: linear-gradient(to bottom,
      rgba(6,12,26,0.62) 0%, rgba(6,12,26,0.42) 46%, rgba(6,12,26,0.08) 74%, rgba(6,12,26,0) 100%);
  }
}
@media (max-width: 480px) {
  .block-hero { min-height: 640px; }
  .block-hero__content { max-width: 100%; }
  .block-hero__bg img { object-position: 64% 50%; }
  .kbo-marker-pulse { left: 73%; top: 63%; }
  .block-hero__title { font-size: 2.1rem; }
  .block-hero__lead { font-size: 1rem; }
  /* CTA's blijven naast elkaar (PO 2026-07-10); flex-wrap vangt smalle schermen op */
  .btn { justify-content: center; }
}

/* ===================== LICHTE SECTIE: test donker/licht binnen één merkfamilie ===================== */
.section-licht {
  position: relative;
  background: var(--kbo-white);
  color: var(--kbo-ink);
  padding: 7rem 4vw 7.5rem;
  overflow: clip;
}
/* Sprankeling zonder onrust: één koele zweem linksboven, statisch en heel licht */
.section-licht::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 46% 60% at 8% 0%, rgba(0, 161, 241, 0.07) 0%, rgba(0, 161, 241, 0) 70%),
    radial-gradient(ellipse 30% 42% at 100% 100%, rgba(168, 255, 0, 0.06) 0%, rgba(168, 255, 0, 0) 70%);
  pointer-events: none;
}
.section-licht__inner {
  position: relative;
  max-width: 1320px; margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 4rem; align-items: start;
}
.section-licht__eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--kbo-navy-700);
  background: rgba(0, 46, 117, 0.07);
  border: 1px solid rgba(0, 46, 117, 0.14);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  margin-bottom: 1.75rem;
}
.section-licht__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--kbo-green);
}
.section-licht__title {
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.16; letter-spacing: -0.015em;
  color: var(--kbo-navy-950);
  max-width: 21ch;
  margin-bottom: 1.6rem;
}
.section-licht__text {
  font-size: 1.08rem; line-height: 1.75;
  color: var(--kbo-muted-light);
  max-width: 58ch;
}
.section-licht__text + .section-licht__text { margin-top: 1.1rem; }
/* Rechterkolom: volwaardig uitgelicht citaat, groot, rustig, de volledige gedachte (PO-review 2026-07-12) */
.section-licht__aside { align-self: center; }
.section-licht__quote {
  position: relative;
  background: rgba(0, 46, 117, 0.045);
  border: 1px solid rgba(0, 46, 117, 0.10);
  border-left: 4px solid var(--kbo-green);
  border-radius: 14px;
  padding: 2.4rem 2.2rem 2.3rem;
}
.section-licht__quote::before {
  content: "\201C";
  display: block;
  font-size: 3.4rem; font-weight: 800; line-height: 0.6;
  color: var(--kbo-navy-700);
  margin-bottom: 1.1rem;
}
.section-licht__quote p {
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  font-weight: 700; line-height: 1.5; letter-spacing: -0.01em;
  color: var(--kbo-navy-700);
}
@media (max-width: 880px) {
  .section-licht { padding: 4.5rem 4vw 5rem; }
  .section-licht__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .section-licht__aside { align-self: start; }
}

/* ===================== GEDEELDE SECTIE-BOUWSTENEN (live idioom, kleuren B-126) ===================== */
.kbo-section { position: relative; padding: 6.5rem 4vw; overflow: clip; }
.kbo-section--dark { background: var(--kbo-navy-950); color: var(--kbo-white); }
.kbo-section--divide { border-top: 1px solid rgba(255,255,255,0.08); }
.kbo-container { position: relative; z-index: 1; max-width: 1320px; margin-inline: auto; }

/* Decoratieve gloed-orbs: statisch en gedempt (live idioom) */
.kbo-orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.kbo-orb--cyan  { width: 420px; height: 420px; right: -140px; top: -120px; background: rgba(0, 161, 241, 0.14); }
.kbo-orb--green { width: 380px; height: 380px; left: -120px; bottom: -140px; background: rgba(168, 255, 0, 0.08); }

.kbo-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: 999px; padding: 0.4rem 0.9rem; margin-bottom: 1.75rem;
}
.kbo-eyebrow--dark {
  color: #38BDF8;
  background: rgba(0, 161, 241, 0.10);
  border: 1px solid rgba(0, 161, 241, 0.28);
}
.kbo-eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--kbo-green); }
.kbo-accent { color: var(--kbo-green); }

.kbo-head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: 3.5rem; }
.kbo-head__title {
  font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.16; letter-spacing: -0.015em; margin-bottom: 1.2rem;
}
.kbo-head__intro { font-size: 1.08rem; line-height: 1.7; color: rgba(255,255,255,0.72); }

.kbo-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 4rem; align-items: center; }
.kbo-split__title {
  font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.18; letter-spacing: -0.015em; margin-bottom: 1.4rem;
}
.kbo-prose p { font-size: 1.05rem; line-height: 1.75; color: rgba(255,255,255,0.78); }
.kbo-prose p + p { margin-top: 1rem; }

.kbo-arrow-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 700; color: var(--kbo-green); margin-top: 1.5rem;
  transition: gap 0.18s ease;
}
.kbo-arrow-link:hover { gap: 0.8rem; }
.kbo-arrow-link svg { width: 1.05em; height: 1.05em; }

.kbo-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px; padding: 1.75rem;
}
.kbo-card__title { font-size: 1.08rem; font-weight: 700; margin-bottom: 0.6rem; }
.kbo-card__text { font-size: 0.98rem; line-height: 1.65; color: rgba(255,255,255,0.72); }
.kbo-card__icon { display: inline-flex; margin-bottom: 1rem; color: var(--kbo-green); }
.kbo-card__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.kbo-grid--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }

/* Foto + overlappende kaart (IKON-sectie): PO-review 2026-07-12 */
.kbo-media { position: relative; }
.kbo-media__photo {
  width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; object-position: 50% 24%;
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.12);
  display: block;
}
.kbo-card--overlap {
  position: relative;
  margin-top: -3.2rem; margin-inline: 1.25rem;
  background: var(--kbo-navy-900);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.55);
}
@media (max-width: 480px) {
  .kbo-card--overlap { margin-inline: 0.6rem; }
}

.kbo-steps { display: grid; gap: 0.8rem; margin-top: 1.4rem; }
.kbo-step { display: flex; align-items: center; gap: 0.9rem; }
.kbo-step__n {
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em;
  color: var(--kbo-navy-950);
  background: var(--kbo-green);
  border-radius: 8px; padding: 0.3rem 0.55rem;
}

/* Investering-band */
.kbo-band { background: var(--kbo-navy-900); border-block: 1px solid rgba(255,255,255,0.08); padding: 3rem 4vw; }
.kbo-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.kbo-band__text { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 800; letter-spacing: -0.01em; max-width: 32ch; }

/* Lichte splitsectie (voorbeeld): zelfde lichte familie als sectie 03 */
.section-licht .kbo-split__title { color: var(--kbo-navy-950); }
.section-licht .kbo-prose p { color: var(--kbo-muted-light); }
.kbo-checks { list-style: none; display: grid; gap: 0.9rem; margin: 1.6rem 0 2rem; }
.kbo-check { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 1rem; line-height: 1.55; color: var(--kbo-ink); }
.kbo-check__mark {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: rgba(168, 255, 0, 0.18); color: #4c7a00;
}
.kbo-check__mark svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.btn--navy {
  background: var(--kbo-navy-700); color: var(--kbo-white);
  box-shadow: 0 10px 30px -12px rgba(0, 46, 117, 0.55);
}
.btn--navy:hover { transform: translateY(-1px); background: #0F2A5C; }

/* Browser-mock (live idioom) */
.kbo-browser { border: 1px solid rgba(11, 18, 32, 0.14); border-radius: 14px; overflow: hidden; background: #FFFFFF; box-shadow: 0 24px 60px -28px rgba(11, 18, 32, 0.25); }
.kbo-browser__bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.7rem 1rem; background: #Eef2f7; border-bottom: 1px solid rgba(11,18,32,0.08); }
.kbo-browser__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(11,18,32,0.18); }
.kbo-browser__url { margin-left: 0.6rem; font-size: 0.8rem; color: var(--kbo-muted-light); }
.kbo-browser__body { padding: 1.4rem; }
.kbo-browser__search {
  display: flex; align-items: center; gap: 0.6rem;
  border: 1px solid rgba(11,18,32,0.14); border-radius: 999px;
  padding: 0.65rem 1rem; font-size: 0.92rem; color: var(--kbo-muted-light);
  margin-bottom: 1.1rem;
}
.kbo-browser__search svg { width: 16px; height: 16px; stroke: currentColor; }
.kbo-browser__links { display: grid; gap: 0.6rem; }
.kbo-browser__link {
  font-size: 0.92rem; font-weight: 600; color: var(--kbo-navy-700);
  background: rgba(0, 46, 117, 0.06); border-radius: 8px; padding: 0.6rem 0.85rem;
}

/* Paginabeelden: breed beeld en kaartbeeld. Geen border/box-shadow op beelden
   (PO-regel 2026-07-17): afbeeldingen blenden in de omgeving in plaats van in een lijstje. */
.kbo-visual-wrap { max-width: 1320px; margin: 3.5rem auto 0; }
.kbo-visual {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 14px;
}
/* Vierkante merkvisual (Bedrijfsbrein, over-pagina): eigen verhouding behouden, niet bijsnijden naar 16:9.
   Bewust compact (PO-feedback 2026-07-17): een vierkant beeld op volle sectiebreedte vult meer dan een
   schermhoogte en oogt dan als ingezoomd. */
.kbo-visual--vierkant {
  aspect-ratio: auto; object-fit: contain;
  max-width: min(620px, 100%); margin: 0 auto;
  background: #fff;
}
.kbo-card__visual {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 10px;
  margin-bottom: 1.2rem;
}

/* Expertisebadges onder de browser-mock: zichtbare inrichting SEO/AI/structuur/kennisopbouw (PO-review 2026-07-12) */
.kbo-specs {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem;
  margin-top: 1rem;
}
.kbo-spec {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.9rem; font-weight: 700; color: var(--kbo-navy-950);
  background: #FFFFFF;
  border: 1px solid rgba(11, 18, 32, 0.10);
  border-radius: 10px; padding: 0.6rem 0.8rem;
  box-shadow: 0 10px 24px -18px rgba(11, 18, 32, 0.25);
}
.kbo-spec__mark {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(168, 255, 0, 0.18); color: #4c7a00;
}
.kbo-spec__mark svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 400px) { .kbo-specs { grid-template-columns: 1fr; } }

/* Scan-CTA */
.scan__lead { font-size: 1.08rem; line-height: 1.7; color: rgba(255,255,255,0.78); max-width: 56ch; margin-inline: auto; }
.scan__benefits { list-style: none; display: grid; gap: 0.9rem; margin: 2rem auto 2.5rem; max-width: 520px; text-align: left; }
.scan__benefit { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 1rem; line-height: 1.55; color: rgba(255,255,255,0.85); }
.scan__check {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: rgba(168, 255, 0, 0.16); color: var(--kbo-green);
}
.scan__check svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.scan__actions { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }

/* Formulier (Quickscan-aanvraag, gebied A): lichte sectie */
.qs-form { display: grid; gap: 1.25rem; }
.qs-row--2 { display: grid; gap: 1.25rem; }
@media (min-width: 560px) { .qs-row--2 { grid-template-columns: 1fr 1fr; } }
.qs-label { display: block; font-weight: 700; font-size: 0.95rem; color: var(--kbo-navy-950); margin-bottom: 0.4rem; }
.qs-optional { font-weight: 600; color: var(--kbo-muted-light); font-size: 0.8rem; }
.qs-input {
  width: 100%; font-family: var(--kbo-font); font-size: 1rem; color: var(--kbo-ink);
  background: #FFFFFF; border: 1px solid rgba(11, 18, 32, 0.18);
  border-radius: 10px; padding: 0.75rem 0.95rem;
}
.qs-input:focus-visible { outline: 3px solid rgba(0, 161, 241, 0.35); outline-offset: 1px; border-color: var(--kbo-navy-700); }
.qs-textarea { resize: vertical; min-height: 92px; }
.qs-help { font-size: 0.85rem; color: var(--kbo-muted-light); margin-top: 0.35rem; }
.qs-fieldset { border: 1px solid rgba(11, 18, 32, 0.10); border-radius: 12px; padding: 1.25rem; background: #FFFFFF; }
.qs-fieldset > legend { font-weight: 800; font-size: 0.95rem; color: var(--kbo-navy-950); padding: 0 0.4rem; }
.qs-consent { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.95rem; line-height: 1.5; color: var(--kbo-ink); }
.qs-consent input[type="checkbox"] { margin-top: 0.25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--kbo-navy-700); flex: none; }
.qs-privacy { font-size: 0.85rem; color: var(--kbo-muted-light); }
.qs-hp { position: absolute; left: -9999px; top: auto; }

/* Formulier — taak 3: nonce/Turnstile-aansluiting, ROI-checkboxgroep, activatiemeldingen */
.qs-fieldset--nested { margin-top: 0.25rem; }
.qs-checks { display: grid; gap: 0.6rem; margin-top: 0.5rem; }
.qs-check { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.5; color: var(--kbo-ink); }
.qs-check input[type="checkbox"] { margin-top: 0.25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--kbo-navy-700); flex: none; }
.qs-turnstile:empty { display: none; }
.qs-turnstile:not(:empty) { margin-top: 0.25rem; }
.qs-error {
  font-size: 0.9rem; line-height: 1.55; color: #8a2c2c;
  background: rgba(214, 69, 69, 0.10); border: 1px solid rgba(214, 69, 69, 0.35);
  border-radius: 10px; padding: 0.85rem 1rem;
}
.qs-form.is-submitting { opacity: 0.75; pointer-events: none; }
.qs-notice {
  font-size: 0.95rem; line-height: 1.6; border-radius: 10px;
  padding: 0.9rem 1.1rem; margin-bottom: 1.5rem;
}
.qs-notice--success { color: #2f5c14; background: rgba(139, 197, 63, 0.14); border: 1px solid rgba(139, 197, 63, 0.4); }
.qs-notice--warning { color: #7a5200; background: rgba(255, 194, 75, 0.18); border: 1px solid rgba(255, 194, 75, 0.45); }
.qs-notice--danger { color: #8a2c2c; background: rgba(214, 69, 69, 0.10); border: 1px solid rgba(214, 69, 69, 0.35); }

/* Juridische pagina's: rustige tekstopmaak op licht */
.kbo-legal { max-width: 760px; margin-inline: auto; }
.kbo-legal h2 { font-weight: 800; font-size: 1.35rem; color: var(--kbo-navy-950); margin: 2.4rem 0 0.8rem; }
.kbo-legal p, .kbo-legal li { font-size: 1rem; line-height: 1.75; color: var(--kbo-muted-light); }
.kbo-legal ul { padding-left: 1.2rem; margin: 0.6rem 0 1rem; }
.kbo-legal .kbo-invullen { background: rgba(255, 194, 75, 0.18); border-radius: 4px; padding: 0 0.3rem; color: #7a5200; font-weight: 700; }

/* Footer: live blok 12. Kleurstelling per herstelopdracht doc 12 §3 / F5-
   teststop 3 doc 15 §1 (PO-correctie: egaal groen, geen gradient):
   achtergrond = header-navy (--kbo-navy-950, niet meer -900), accentlijn
   bovenaan hertokend van het vervallen groen (#A6E22E→#00A1F1) naar een
   egale streep in het geldende groen, linktekst opgehoogd naar 0.85 op
   basis (was 0.72/0.6) met wit op hover en een zichtbare focusring.
   Structuur (footer.php) blijft ongewijzigd. */
.footer {
  position: relative;
  background: var(--kbo-navy-950);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 4rem 4vw 0;
}
.footer::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 3px;
  background: var(--kbo-green); opacity: 0.9;
}
.footer .kbo-container { max-width: 1320px; }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem; padding-bottom: 3rem; }
.footer__logo img { height: 36px; width: auto; }
.footer__tagline { margin-top: 1rem; font-size: 0.98rem; color: rgba(255,255,255,0.72); }
.footer__nav-list { list-style: none; display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer__nav-list a { font-size: 0.95rem; font-weight: 600; color: rgba(255,255,255,0.85); transition: color 0.18s ease; }
.footer__nav-list a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.8rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.2rem 0;
}
.footer__legal-list { list-style: none; display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer__legal-list a { font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.85); transition: color 0.18s ease; }
.footer__legal-list a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.footer__gegevens { font-size: 0.8rem; color: rgba(255,255,255,0.55); }
.footer__gegevens a { color: rgba(255,255,255,0.85); }
.footer__gegevens a:hover { color: #FFFFFF; }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.4rem 0 1.6rem; font-size: 0.85rem; color: rgba(255,255,255,0.55);
}
.footer a:focus-visible { outline: 3px solid var(--kbo-cyan-soft); outline-offset: 3px; }

@media (max-width: 880px) {
  .kbo-section { padding: 4.5rem 4vw; }
  .kbo-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .kbo-grid--3 { grid-template-columns: 1fr; }
  .kbo-band__inner { justify-content: center; text-align: center; }
  .kbo-head { margin-bottom: 2.5rem; }
}
@media (min-width: 560px) and (max-width: 880px) {
  .kbo-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===================== SUBPAGINA-COMPONENTEN (live idioom, kleuren B-126) ===================== */
/* Pagina-hero: compacter dan de nachtkaart-hero; split met foto of gecentreerd zonder */
.kbo-hero { padding-top: 5.5rem; padding-bottom: 5.5rem; }
.kbo-hero__title {
  font-weight: 800; font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.14; letter-spacing: -0.015em; margin-bottom: 1.4rem;
}
.kbo-hero__lead { font-size: 1.08rem; line-height: 1.7; color: rgba(255,255,255,0.78); max-width: 54ch; margin-bottom: 2.2rem; }
.kbo-hero--center { text-align: center; }
.kbo-hero--center .kbo-hero__lead, .kbo-hero--center .kbo-hero__ctas { margin-inline: auto; }
.kbo-hero--center .kbo-hero__ctas { justify-content: center; }
.kbo-hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.kbo-photo { width: 100%; height: auto; border-radius: 14px; display: block; }
/* Compacte portretfoto (over-pagina): kleiner dan de tekstkolom ernaast (PO-feedback 2026-07-17) */
.kbo-photo--klein { max-width: min(400px, 100%); margin: 0 auto; }

.kbo-grid--4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 1080px) { .kbo-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .kbo-grid--4 { grid-template-columns: 1fr; } }

.kbo-card__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  font-weight: 800; font-size: 1rem;
  color: var(--kbo-navy-950); background: var(--kbo-green);
  margin-bottom: 1rem;
}
/* Op lichte vlakken: kaartvariant licht */
.section-licht .kbo-card, .kbo-card--light {
  background: #FFFFFF; border-color: rgba(11, 18, 32, 0.10);
  box-shadow: 0 14px 34px -22px rgba(11, 18, 32, 0.18);
}
.section-licht .kbo-card__title, .kbo-card--light .kbo-card__title { color: var(--kbo-navy-950); }
.section-licht .kbo-card__text, .kbo-card--light .kbo-card__text { color: var(--kbo-muted-light); }
.section-licht .kbo-head__title { color: var(--kbo-navy-950); }
.section-licht .kbo-head__intro { color: var(--kbo-muted-light); }
.section-licht .kbo-head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: 3.5rem; }
.section-licht .kbo-head .kbo-head__title { max-width: none; margin-inline: auto; }

.kbo-band__sub { font-size: 1rem; line-height: 1.6; color: rgba(255,255,255,0.68); max-width: 52ch; }

/* Fasenlijst (werkwijze): nummerchip + titel + tekst, twee kolommen op ruim scherm */
.kbo-steps--fasen { display: grid; gap: 1.6rem; margin-top: 0; }
@media (min-width: 880px) { .kbo-steps--fasen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; } }
.kbo-step { align-items: flex-start; }
.kbo-step__title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.35rem; }
.kbo-step__text { font-size: 0.98rem; line-height: 1.65; color: rgba(255,255,255,0.72); }

.kbo-quote { max-width: 820px; margin-inline: auto; text-align: center; }
.kbo-quote__text {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 700;
  line-height: 1.45; letter-spacing: -0.01em;
}
.kbo-quote__cite { display: block; margin-top: 1.4rem; font-style: normal; font-size: 0.95rem; color: var(--kbo-green); font-weight: 700; }

/* CTA-afsluiter */
.kbo-cta__inner { max-width: 680px; margin-inline: auto; text-align: center; }
.kbo-cta__title { font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -0.015em; color: var(--kbo-navy-950); margin-bottom: 1rem; }
.section-licht .kbo-cta__title { margin-bottom: 1rem; }
.kbo-cta__text { font-size: 1.08rem; line-height: 1.7; color: var(--kbo-muted-light); margin-bottom: 2rem; }
.kbo-cta__buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* Prose op licht */
.section-licht .kbo-prose p { color: var(--kbo-muted-light); }

/* Over-pagina: byline, tijdlijn; CTA-afsluiter op donker */
.kbo-hero__byline { font-size: 0.95rem; color: rgba(255,255,255,0.62); }
.kbo-muted { color: rgba(255,255,255,0.62); }
.kbo-section--dark .kbo-cta__title { color: var(--kbo-white); }
.kbo-section--dark .kbo-cta__text { color: rgba(255,255,255,0.72); }
.kbo-section--dark .kbo-check { color: rgba(255,255,255,0.85); }
.kbo-section--dark .kbo-check__mark { background: rgba(168, 255, 0, 0.16); color: var(--kbo-green); }

.kbo-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; }
@media (max-width: 880px) { .kbo-timeline { grid-template-columns: 1fr; } }
.kbo-tl {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px; padding: 1.75rem;
}
.kbo-tl--future { border-color: rgba(0, 161, 241, 0.35); }
.kbo-tl__when {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #38BDF8; margin-bottom: 0.9rem;
}
.kbo-tl__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--kbo-green); }
.kbo-tl__head { font-size: 1.08rem; font-weight: 700; margin-bottom: 0.5rem; }
.kbo-tl__text { font-size: 0.98rem; line-height: 1.65; color: rgba(255,255,255,0.72); }

/* Voorbeelden-pagina: 2-koloms grid, omgekeerde split, browser-mock-uitbreiding */
.kbo-grid--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 880px) { .kbo-grid--2 { grid-template-columns: 1fr; } }
@media (min-width: 881px) { .kbo-split--reverse > div:first-child { order: 2; } .kbo-split--reverse > div:last-child { order: 1; } }
.kbo-section--dark .kbo-card .kbo-check { color: rgba(255,255,255,0.85); }
.kbo-browser__cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 1.1rem; }
.kbo-browser__cat {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.88rem; font-weight: 700; color: var(--kbo-navy-950);
  background: rgba(0, 46, 117, 0.06); border-radius: 8px; padding: 0.55rem 0.75rem;
}
.kbo-browser__cat > span:first-child { width: 8px; height: 8px; border-radius: 50%; background: var(--kbo-green); flex: none; }
.kbo-browser__link { display: flex; align-items: center; gap: 0.5rem; }
.kbo-browser__link svg, .kbo-browser__cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.kbo-browser__cta {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 1.1rem;
  font-size: 0.92rem; font-weight: 700; color: var(--kbo-navy-950);
  background: var(--kbo-green); border-radius: 999px; padding: 0.6rem 1rem;
  justify-content: center;
}

/* Prijzen-pagina: prijskaarten, vergelijkingstabel, FAQ */
.btn--lg { padding: 1.1rem 2rem; font-size: 1.125rem; }
.kbo-price-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px; padding: 2rem;
}
.kbo-price-card--light {
  background: #FFFFFF; border-color: rgba(11, 18, 32, 0.10);
  box-shadow: 0 14px 34px -22px rgba(11, 18, 32, 0.18);
}
.kbo-price-card--hi {
  background: #FFFFFF;
  border: 2px solid var(--kbo-green);
  box-shadow: 0 18px 44px -22px rgba(11, 18, 32, 0.22);
}
.kbo-price-card__ribbon {
  position: absolute; top: -0.85rem; right: 1.5rem;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--kbo-navy-950); background: var(--kbo-green);
  border-radius: 999px; padding: 0.35rem 0.85rem;
}
.kbo-price-card__name { display: block; font-size: 1.15rem; font-weight: 800; margin-bottom: 0.4rem; }
.kbo-price-card--light .kbo-price-card__name, .kbo-price-card--hi .kbo-price-card__name { color: var(--kbo-navy-950); }
.kbo-price-card__tagline { font-size: 0.98rem; line-height: 1.6; color: rgba(255,255,255,0.72); margin-bottom: 1.2rem; }
.kbo-price-card--light .kbo-price-card__tagline, .kbo-price-card--hi .kbo-price-card__tagline { color: var(--kbo-muted-light); }
.kbo-price__amount { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.01em; }
.kbo-price-card--light .kbo-price__amount, .kbo-price-card--hi .kbo-price__amount { color: var(--kbo-navy-950); }
.kbo-price__suffix { font-size: 0.9rem; color: rgba(255,255,255,0.62); }
.kbo-price-card--light .kbo-price__suffix, .kbo-price-card--hi .kbo-price__suffix { color: var(--kbo-muted-light); }
/* Witte prijskaarten in een donkere sectie: checklist-tekst en notitie blijven donker leesbaar */
.kbo-section--dark .kbo-price-card--light .kbo-check, .kbo-section--dark .kbo-price-card--hi .kbo-check { color: var(--kbo-ink); }
.kbo-section--dark .kbo-price-card--light .kbo-check__mark, .kbo-section--dark .kbo-price-card--hi .kbo-check__mark { background: rgba(168, 255, 0, 0.18); color: #4c7a00; }
.kbo-section--dark .kbo-price-card--light .kbo-price__note, .kbo-section--dark .kbo-price-card--hi .kbo-price__note { color: var(--kbo-muted-light); }
.kbo-price__note { font-size: 0.85rem; color: rgba(255,255,255,0.55); margin-top: 0.7rem; margin-bottom: 1.4rem; }
.kbo-price-card .kbo-checks { margin: 1.4rem 0 1.8rem; }
/* Knop altijd op de kaartonderkant, ook bij ongelijke kaartinhoud (flex column) */
.kbo-price-card .btn { margin-top: auto; }
.kbo-footnote { text-align: center; font-size: 0.88rem; color: var(--kbo-muted-light); margin-top: 2rem; }

.kbo-compare-wrap { overflow-x: auto; }
.kbo-compare table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.95rem; }
.kbo-compare th, .kbo-compare td { padding: 0.85rem 1rem; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.10); }
.kbo-compare thead th { font-weight: 800; }
.kbo-compare tbody th { text-align: left; font-weight: 600; color: rgba(255,255,255,0.85); }
.kbo-compare .kbo-col-hi { background: rgba(168, 255, 0, 0.06); }
.kbo-tick { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(168, 255, 0, 0.16); color: var(--kbo-green); }
.kbo-tick svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kbo-dash::before { content: "—"; color: rgba(255,255,255,0.35); }
.kbo-num { font-weight: 800; color: var(--kbo-green); }

.kbo-faq { max-width: 760px; margin-inline: auto; display: grid; gap: 0.8rem; }
.kbo-faq__item {
  background: #FFFFFF; border: 1px solid rgba(11, 18, 32, 0.10);
  border-radius: 12px; padding: 0 1.25rem;
}
.kbo-faq__q { cursor: pointer; font-weight: 700; color: var(--kbo-navy-950); padding: 1.05rem 0; list-style-position: inside; }
.kbo-faq__a { padding: 0 0 1.1rem; font-size: 0.98rem; line-height: 1.65; color: var(--kbo-muted-light); }
.kbo-section__more { text-align: center; margin-top: 2rem; }
.section-licht .kbo-arrow-link { color: var(--kbo-navy-700); }

/* ===================================================================
   CONTACTPAGINA (/contact/): structuurregels, voorheen inline <style>
   op contact.html. Uitsluitend layout, geen eigen kleuren of fonts;
   gebruikt overal de bestaande var(--kbo-...) tokens hierboven.
   =================================================================== */
.ct-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 4rem;
  align-items: start;
}
@media (max-width: 880px) {
  .ct-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.ct-items {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.ct-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.ct-item__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--kbo-navy-700);
}
.ct-item__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ct-item__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kbo-muted-light);
  margin-bottom: 0.2rem;
}
.ct-item__value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--kbo-navy-950);
}
a.ct-item__value {
  color: var(--kbo-navy-700);
}
a.ct-item__value:hover {
  color: var(--kbo-cyan);
}

.ct-photo-wrap { margin-top: 1.5rem; }

.ct-mt-sm { margin-top: 1rem; }
.ct-mt-md { margin-top: 1.5rem; }

.btn--block {
  width: 100%;
  display: flex;
  justify-content: center;
}

.ct-footnote {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--kbo-muted-light);
  text-align: center;
}

/* ===================================================================
   KBO STUDIO-PAGINA (/kbo-studio/): structuurregel, voorheen inline
   <style> op kbo-studio.html. SVG styling voor inline links met
   aangepaste stroke-width; flex-context is al gedefinieerd hierboven.
   =================================================================== */
.kbo-browser__link svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ===================================================================
   JURIDISCHE PAGINA'S: tabelstyling en AV-structuurklassen (taak 6,
   carried-over gap). Voorheen alleen als inline <style> aanwezig op
   builds/website-reset/privacy.html (.kbo-legal table, .adreskaart) en
   builds/website-reset/algemene-voorwaarden.html (.av-toc, .av-aanhef,
   .uitstapformule); privacy-v3.html/cookies-v3.html/algemene-
   voorwaarden-v3.html gebruiken deze klassen al, maar de regels
   ontbraken hier nog. De .concept-balk-regel uit die bronbestanden komt
   bewust NIET mee: die balk hoort niet bij de v3-fragmenten.
   =================================================================== */
.kbo-legal table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 0.9rem; }
.kbo-legal table th,
.kbo-legal table td { text-align: left; padding: 0.5rem 0.75rem; border: 1px solid #d0cdc9; vertical-align: top; }
.kbo-legal table th { font-weight: 600; background: #f5f3f0; }
.kbo-legal table tr:nth-child(even) td { background: #faf9f7; }
.kbo-legal .adreskaart td:first-child { font-weight: 600; width: 11rem; }

.kbo-legal .av-aanhef { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(0,0,0,0.12); }
.kbo-legal .av-toc { margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(0,0,0,0.12); }
.kbo-legal .av-toc ol { padding-left: 1.5rem; columns: 2; column-gap: 2rem; }
.kbo-legal .av-toc li { margin-bottom: 0.3rem; font-size: 0.9rem; break-inside: avoid; }
.kbo-legal .av-toc a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.kbo-legal .av-toc a:hover { opacity: 0.75; }
.kbo-legal .uitstapformule { border-left: 3px solid #002E75; padding: 0.75rem 1rem; margin: 1rem 0; background: rgba(0,46,117,0.05); }

/* Horizontale scroll voor tabellen op smalle schermen (QA RS3) */
@media (max-width: 560px) {
  .kbo-legal table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 600px) {
  .kbo-legal .av-toc ol { columns: 1; }
}

/* ===================================================================
   V3-DEFINITIEF-SYSTEEM — websiteconcept B, F5-teststop 3 (doc 15 §6.1)
   ===================================================================
   Bron 1-op-1: builds/website-b-preview/assets/css/site.css (gedeelde
   preview-laag) + builds/website-b-preview/herstel/definitief/
   stijl-definitief.css, MINUS de site-kop/menu- en site-voet-secties (de
   live nav/footer hierboven — .nav/.footer — blijven de bron; de nieuwe
   pluginfragmenten bevatten geen eigen header/footer). Token-aliassen
   hieronder mappen de ongeprefixte namen uit de preview (--groen, --ink,
   --navy-950, …) op de bestaande --kbo-*-tokens zodat er precies één
   bindende kleurbron blijft. Alleen op pagina's met v3-definitief-
   fragmenten (plugin kbo-website-v2 4.0.0) komen deze klassen voor.
   =================================================================== */
:root {
  --ink: var(--kbo-ink);
  --muted: var(--kbo-muted-light);
  --tekst-sec: #3A4A6B;
  --navy-800: #0F2A5C;
  --cyan-bright: #38BDF8;
  --cyan-soft: var(--kbo-cyan-soft);
  --groen: var(--kbo-green);
  --leesgroen: #4C7A00;
  --fout: #B42318;
  --focus: #005CA8;
  --werkvlak: var(--kbo-white);
  --omgeving: #F4F3EF;
  --inzet: #F7F6F3;
  --hairline: #E4E2DC;
  --rand-decor: #C9CFDD;
  --veldrand: #767F95;
  --wit: var(--kbo-white);
  --wit-72: rgba(255,255,255,0.72);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --r-veld: 6px; --r-pill: 999px;
  --t-micro: 120ms; --t-moment: 260ms; --t-wissel: 240ms; --ease: cubic-bezier(0.2,0,0,1);
  --balk: 52px;
  --electric: var(--kbo-cyan);
  --blok-blauw: #0066B8;
}

/* ---------- Focus (aanvullend op de bestaande focus-regels hierboven) ---------- */
.sd :focus-visible, .band :focus-visible, .hero :focus-visible { outline: 3px solid var(--cyan-bright); outline-offset: 2px; }

/* ---------- Reveal-hulpjes (functionele micro-animatie, basis.css) ---------- */
/* Fail-safe herstel (hotfix 0.3.1, doc 16): .rv/.teken zijn STANDAARD
   volledig zichtbaar. Alleen wanneer assets/js/kbo-anim.js vroeg de klasse
   html.kbo-anim heeft gezet (dus: JS draait EN geen reduced-motion EN
   IntersectionObserver bestaat) krijgen ze de verborgen startstaat en de
   overgang naar .zichtbaar. Zonder JS, bij een scriptfout of bij
   prefers-reduced-motion blijft elke sectie zichtbaar — vóór deze fix
   ontbrak de tegenhanger die .zichtbaar toevoegt, waardoor secties met
   .rv/.teken permanent onzichtbaar bleven (opacity: 0 zonder terugweg). */
.rv, .teken { opacity: 1; translate: 0 0; }
html.kbo-anim .rv,
html.kbo-anim .teken {
  opacity: 0; translate: 0 18px;
  transition: opacity 0.6s var(--ease), translate 0.6s var(--ease);
}
html.kbo-anim .rv.zichtbaar,
html.kbo-anim .teken.zichtbaar { opacity: 1; translate: 0 0; }
.rv--laat { transition-delay: 0.15s; }
@media (prefers-reduced-motion: reduce) {
  html.kbo-anim .rv,
  html.kbo-anim .teken { opacity: 1; translate: none; transition: none; }
}
.sectie-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .sectie-inner { padding: 0 24px; } }

/* ---------- Woordbreuk: alleen op URL's/e-mail ---------- */
.u-breek { overflow-wrap: anywhere; }

/* ============================================================
   KNOPPEN EN LINKS (preview-vocabulaire .pill/.tlink/.microcopy)
   ============================================================ */
.pill {
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1rem;min-height:48px;
  padding:0.95rem 1.6rem;border-radius:var(--r-pill);
  text-decoration:none;text-align:center;white-space:normal;
  /* Centraal knop-reset (doc 19 §1): .pill wordt zowel op <a> als op echte
     <button>-elementen (formulierverzendknoppen) gebruikt. <a> heeft van
     zichzelf geen UA-rand, maar <button> wel (default "2px outset") — zonder
     deze reset bleef dat een permanente, niet-canonieke rand op elke
     verzendknop staan. border/appearance/achtergrond/lettertype hier één
     keer neutraliseren; de kleurvarianten (.pill--groen/--navy/--ghost)
     zetten zelf een expliciete achtergrond en winnen op gelijke specificiteit
     door bestandsvolgorde. */
  border:0;background:none;appearance:none;-webkit-appearance:none;
  font-family:inherit;cursor:pointer;
  transition:transform var(--t-micro) var(--ease),box-shadow var(--t-micro) var(--ease),background var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease);
}
.pill:focus{outline:none;}
.pill:focus-visible{outline:3px solid var(--cyan-bright);outline-offset:2px;}
.pill--groen{background:var(--groen);color:var(--navy-950);box-shadow:0 6px 28px rgba(168,255,0,0.24);}
.pill--groen:hover{transform:translateY(-1px);box-shadow:0 10px 34px rgba(168,255,0,0.32);}
.pill--groen:active{transform:scale(0.98);}
.pill--ghost{background:rgba(10,20,40,0.35);color:var(--wit);border:1px solid rgba(255,255,255,0.45);}
.pill--ghost:hover{border-color:rgba(255,255,255,0.8);}
.pill--navy{background:var(--navy-700);color:var(--wit);}
.pill--navy:hover{transform:translateY(-1px);background:var(--navy-800);}
.pill--navy:active{transform:scale(0.98);}
.pill--klein{min-height:44px;padding:0.6rem 1.25rem;font-size:0.95rem;box-shadow:none;}
.pill--groot{padding:1.1rem 2rem;font-size:1.125rem;}
.tlink{
  color:var(--focus);font-weight:600;font-size:0.98rem;
  text-decoration:underline;text-underline-offset:3px;
  min-height:44px;display:inline-flex;align-items:center;
}
.tlink--donker{color:var(--cyan-soft);}
.microcopy{font-size:0.875rem;color:var(--wit-72);margin-top:0.9rem;}
.microcopy--licht{color:var(--muted);}

/* ============================================================
   SECTIEFAMILIES
   ============================================================ */
.inner{max-width:1200px;margin:0 auto;}
.sd{background:var(--navy-950);color:var(--wit);padding:3rem 20px;}
.band{background:var(--navy-900);color:var(--wit);padding:2.5rem 20px;}
.sl{background:var(--omgeving);color:var(--ink);padding:3rem 20px;}
@media (min-width:768px){
  .sd,.sl{padding:4rem 24px;}
  .band{padding:3rem 24px;}
}
@media (min-width:1024px){
  .sd,.sl{padding:5.5rem 4vw;}
  .band{padding:4.25rem 4vw;}
}
.kicker{
  display:block;
  font-size:0.78rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;
  margin-bottom:1.1rem;
  color:var(--blok-blauw);
}
.sd .kicker,.band .kicker{color:var(--cyan-bright);}
/* F5-restpunt 2 (doc 18): kickeraudit site-breed. .v3-ikon-kop en .sl leunden
   op --cyan-bright/--muted terwijl hun secties licht zijn; nu overal dezelfde
   regel (--blok-blauw op licht, --cyan-bright op donker/band). */
.h-hero{font-size:clamp(1.7rem,6vw,3.2rem);font-weight:800;line-height:1.16;letter-spacing:-0.015em;max-width:24ch;}
.h-sectie{font-size:clamp(1.5rem,5vw,2.6rem);font-weight:800;line-height:1.2;letter-spacing:-0.015em;max-width:26ch;}
.h-band{font-size:clamp(1.2rem,3.4vw,1.6rem);font-weight:800;line-height:1.3;max-width:32ch;}
.sl .h-sectie{color:var(--navy-950);}
.lead{margin-top:1.3rem;font-size:1.05rem;line-height:1.7;max-width:62ch;}
.sd .lead,.band .lead{color:var(--wit-72);}
.sl .lead{color:var(--tekst-sec);}
.prose p{margin-top:1rem;font-size:1rem;line-height:1.7;max-width:66ch;}
.sl .prose p{color:var(--tekst-sec);}
.sd .prose p{color:var(--wit-72);}
.cta-rij{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem;align-items:center;}
.cta-rij .pill{min-width:0;}

/* Panelen en inzet */
.paneel{background:var(--werkvlak);border:1px solid var(--hairline);min-width:0;}
.inzet{background:var(--inzet);border:1px solid var(--hairline);min-width:0;}

/* Vinkjeslijsten */
.checks{display:grid;gap:0.6rem;margin-top:1.4rem;list-style:none;}
.checks li{position:relative;padding-left:26px;font-size:0.98rem;line-height:1.6;}
.checks li::before{
  content:"";position:absolute;left:0;top:6px;width:14px;height:14px;
  background-color:var(--leesgroen);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.2 12.4 2.3 8.5l1.4-1.4 2.5 2.5 6-6 1.4 1.4z"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.2 12.4 2.3 8.5l1.4-1.4 2.5 2.5 6-6 1.4 1.4z"/></svg>') center/contain no-repeat;
}
.sl .checks li{color:var(--tekst-sec);}
.sd .checks li{color:var(--wit);}
.sd .checks li::before{background-color:var(--groen);}

/* Split (twee kolommen vanaf 1024) */
.split{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:start;}
.split > *{min-width:0;}
/* F5-restpunt 6 (doc 18): voorbeelden-v3 gebruikte kbo-split--reverse om de
   browsermockup visueel links te tonen; .split kreeg nog geen reverse-variant. */
@media (min-width:881px){
  .split--reverse > *:first-child{order:2;}
  .split--reverse > *:last-child{order:1;}
}
@media (min-width:1024px){
  .split{grid-template-columns:1.05fr 0.95fr;gap:3.5rem;}
}
.quote{padding:1.6rem 1.8rem;font-size:1.1rem;font-weight:700;line-height:1.55;color:var(--navy-950);}
.figuur img{width:100%;height:auto;}
.figuur figcaption{display:none;}

/* Genummerde blokken */
.blokraster{display:grid;grid-template-columns:1fr;gap:0;margin-top:2.5rem;border-top:1px solid var(--hairline);}
@media (min-width:768px){.blokraster{grid-template-columns:repeat(2,1fr);gap:0 2.5rem;}}
@media (min-width:1024px){.blokraster{grid-template-columns:repeat(3,1fr);}}
.blokraster--2{grid-template-columns:1fr;}
@media (min-width:768px){.blokraster--2{grid-template-columns:repeat(2,1fr);}}
.blok{padding:1.6rem 0 1.8rem;border-bottom:1px solid var(--hairline);min-width:0;}
.blok .num{font-size:0.875rem;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:0.06em;}
.blok h3{font-size:1.05rem;font-weight:800;color:var(--navy-950);margin-top:0.5rem;}
.blok p{margin-top:0.5rem;font-size:0.95rem;line-height:1.65;color:var(--tekst-sec);}

/* ============================================================
   AANBODPAGINA
   ============================================================ */
.abokaarten{display:grid;grid-template-columns:1fr;gap:var(--s5);margin-top:2.5rem;align-items:start;}
/* Gedeelde rijstructuur (doc 19 §3): vanaf 768px staan beide abokaarten op
   hetzelfde grid en delen ze via subgrid vijf rijen (kop, prijs, checks,
   looptijd, knop). Elke rij wordt zo hoog als de langste inhoud van de twee
   kaarten; kortere inhoud laat wit over binnen die rij in plaats van de
   volgende rij te verschuiven. Geen losse vaste marges per kaart nodig. */
@media (min-width:768px){
  .abokaarten{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto auto auto;
    align-items:stretch;
  }
  .abokaart{display:grid;grid-template-rows:subgrid;grid-row:1 / -1;}
}
.abokaart{position:relative;background:var(--werkvlak);border:1px solid var(--hairline);border-top:3px solid var(--hairline);padding:var(--s6) var(--s5) var(--s5);min-width:0;box-shadow:0 18px 40px -28px rgba(7,20,43,0.32);}
.abokaart:not(.abokaart--autoriteit)::before{
  content:"";position:absolute;top:-1px;left:0;
  width:44px;height:4px;background:var(--groen);z-index:1;
}
.abokaart .ribbon{position:absolute;top:-0.8rem;right:1.2rem;font-size:0.72rem;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--navy-950);background:var(--groen);border:1px solid var(--navy-900);border-radius:var(--r-pill);padding:0.3rem 0.85rem;z-index:2;}
.abokaart .naam{font-size:1.2rem;font-weight:800;color:var(--navy-950);}
.abokaart .tagline{margin-top:0.4rem;font-size:0.95rem;line-height:1.65;color:var(--muted);max-width:44ch;}
.abokaart .prijsregel{margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--hairline);}
.abokaart .bedrag{font-size:clamp(1.6rem,6vw,2.1rem);font-weight:800;color:var(--navy-950);font-variant-numeric:tabular-nums;}
.abokaart .suffix{font-size:0.9rem;color:var(--muted);margin-left:6px;}
.abokaart .note{margin-top:0.7rem;font-size:0.9rem;color:var(--ink);}
.abokaart .note--licht{color:var(--muted);font-variant-numeric:tabular-nums;}
.abokaart .checks{gap:0.5rem;}
.abokaart .checks li{font-size:0.92rem;}
.abokaart .kaart-cta{margin-top:1.5rem;}
.abokaart .kaart-cta .pill{width:100%;}
/* Autoriteit: navy kopvlak binnen de kaart. PO-correctie (doc 16 §9.10):
   het "geen tab"-bleed-effect uit doc 15 §1.4 (navy tot de kaart-bovenrand,
   32px hoger kopvlak dan Groei) vervalt. Het kopvlak deelt nu dezelfde
   verticale positie/hoogte als Groei's kopvlak (subgrid-rij 1, gelijke
   card-padding-top); Autoriteit onderscheidt zich alleen nog door de navy
   achtergrondkleur (nog wel edge-to-edge links/rechts) en de badge. */
.abokaart--autoriteit{overflow:hidden;}
.abokaart--autoriteit .abokaart-kop{
  background:var(--navy-950);color:var(--wit);
  margin:0 calc(-1 * var(--s5));padding:0 var(--s5) 1.4rem;
}
.abokaart--autoriteit .abokaart-kop .naam{color:var(--wit);}
.abokaart--autoriteit .abokaart-kop .tagline{color:rgba(255,255,255,0.78);}
.abokaart--autoriteit .ribbon{top:calc(var(--s6) - 0.8rem);}
.voetnoot{margin-top:1.6rem;font-size:0.9rem;color:var(--muted);}
.sd .voetnoot{color:var(--wit-72);}

/* Vergelijkingstabel */
.tabelvlak{margin-top:2.5rem;padding:0;}
.tabel-scroll,.tabelscroll{overflow-x:auto;}
.tabelvlak table{width:100%;border-collapse:collapse;min-width:620px;}
.tabelvlak th,.tabelvlak td{text-align:left;padding:0.85rem 1.2rem;border-bottom:1px solid var(--hairline);font-size:0.95rem;line-height:1.5;vertical-align:top;}
.tabelvlak thead th{font-size:0.78rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--navy-950);border-bottom:1px solid var(--veldrand);}
.tabelvlak tbody th{font-weight:700;color:var(--ink);}
.tabelvlak td{color:var(--tekst-sec);font-variant-numeric:tabular-nums;}
.tabelvlak .kolom-hi{background:var(--inzet);}
/* F5-restpunt 4 (doc 18): kolomkoppen Groei en Autoriteit gelijkwaardig, elk
   met naam + korte omschrijving (doc 14 §2.3-kaartteksten). */
.tabelvlak thead th .th-naam{display:block;font-size:0.92rem;letter-spacing:0.02em;}
.tabelvlak thead th .th-omschrijving{
  display:block;margin-top:0.4rem;font-size:0.76rem;font-weight:500;
  letter-spacing:normal;text-transform:none;color:var(--tekst-sec);line-height:1.4;
}
.tabelvlak tbody tr:last-child th,.tabelvlak tbody tr:last-child td{border-bottom:none;}

/* FAQ */
.faq{margin-top:2rem;border-top:1px solid var(--hairline);}
.faq details{border-bottom:1px solid var(--hairline);background:transparent;}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 0.25rem;min-height:44px;font-size:1.02rem;font-weight:700;color:var(--navy-950);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";flex:none;font-size:1.5rem;font-weight:400;color:var(--muted);line-height:1;transition:transform var(--t-micro) var(--ease);}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{padding:0 0.25rem 1.3rem;max-width:70ch;font-size:0.98rem;line-height:1.7;color:var(--tekst-sec);}

/* ============================================================
   KENNISBANKHOOFDPAGINA
   ============================================================ */
.kb-werkbalk{margin-top:2rem;display:flex;flex-direction:column;gap:1rem;}
.kb-zoekveld{display:flex;flex-direction:column;gap:6px;max-width:520px;}
.kb-zoekveld label{font-size:0.85rem;font-weight:700;color:var(--ink);}
.kb-zoekveld input{
  font:inherit;font-size:0.95rem;color:var(--ink);background:var(--werkvlak);
  border:1px solid var(--veldrand);border-radius:var(--r-veld);
  min-height:48px;padding:0.6rem 14px;width:100%;
}
.kb-zoekveld input:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.kb-chips{display:flex;flex-wrap:wrap;gap:8px;}
.kb-chip{
  font-size:0.85rem;font-weight:700;color:var(--tekst-sec);
  background:var(--werkvlak);border:1px solid var(--veldrand);border-radius:var(--r-pill);
  padding:8px 14px;min-height:44px;display:inline-flex;align-items:center;
  transition:background var(--t-micro) var(--ease),color var(--t-micro) var(--ease);
}
.kb-chip[aria-pressed="true"]{background:var(--navy-950);color:var(--wit);border-color:var(--navy-950);}
.kb-werkbalk-rij{display:flex;flex-wrap:wrap;align-items:center;gap:0.8rem 1.2rem;}
.kb-wissen{font-size:0.9rem;font-weight:700;color:var(--focus);text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center;}
.kb-teller{font-size:0.9rem;color:var(--muted);font-variant-numeric:tabular-nums;}

.kb-uitgelicht{margin-top:2.5rem;}
.kb-uitgelicht .label{font-size:0.78rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:1rem;}
.kb-chip-uitgelicht{
  display:inline-block;font-size:0.72rem;font-weight:800;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--blok-blauw);
  background:var(--inzet);border:1px solid var(--hairline);
  padding:3px 8px;margin-bottom:0.6rem;
}
.kb-grid-uitgelicht{display:grid;grid-template-columns:1fr;gap:1.2rem;}
@media (min-width:768px){.kb-grid-uitgelicht{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.kb-grid-uitgelicht{grid-template-columns:repeat(4,1fr);}}

.kb-grid{margin-top:1.5rem;display:grid;grid-template-columns:1fr;gap:1.2rem;}
@media (min-width:768px){.kb-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.kb-grid{grid-template-columns:repeat(3,1fr);}}
@media (min-width:1280px){.kb-grid{grid-template-columns:repeat(4,1fr);}}

/* Elke kb-kaart is een geneste kaart in het artikelraster: korte tab i.p.v.
   volle streep (doc 15 §1.2/§1.5). De eerder exclusieve cornerstone-
   kleurcodering vervalt daarmee; de Uitgelicht-chip blijft (doc 15 §1.5). */
.kb-kaart{
  position:relative;
  background:var(--werkvlak);border:1px solid var(--hairline);border-top-width:1px;border-top-color:var(--hairline);
  padding:1.4rem 1.3rem;display:flex;flex-direction:column;gap:0.6rem;min-width:0;height:100%;
  box-shadow:0 14px 30px -24px rgba(7,20,43,0.3);
}
.kb-kaart::before{
  content:"";position:absolute;top:-1px;left:0;
  width:44px;height:4px;background:var(--groen);z-index:1;
}
.kb-kaart.is-test::before{background:var(--cyan-bright);}
.kb-kaart .kb-cat{font-size:0.72rem;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--navy-950);background:var(--inzet);border:1px solid var(--hairline);border-radius:var(--r-veld);padding:4px 8px;align-self:flex-start;}
.kb-kaart.is-test .kb-cat{background:rgba(56,189,248,0.12);color:var(--focus);border-color:var(--cyan-soft);}
.kb-kaart .kb-titel{font-size:1.02rem;font-weight:800;color:var(--navy-950);text-decoration:none;line-height:1.35;overflow-wrap:break-word;}
.kb-kaart a.kb-titel:hover{text-decoration:underline;text-underline-offset:3px;}
.kb-kaart .kb-omschrijving{font-size:0.92rem;line-height:1.6;color:var(--tekst-sec);overflow-wrap:break-word;min-width:0;}
.kb-kaart .kb-auteur{margin-top:auto;padding-top:0.6rem;border-top:1px solid var(--hairline);font-size:0.82rem;color:var(--muted);}

.kb-leeg{margin-top:2.5rem;padding:2.5rem;text-align:center;}
.kb-leeg p{font-size:1rem;color:var(--tekst-sec);margin-bottom:1.2rem;}

.kb-paginering{margin-top:2.5rem;margin-bottom:4rem;display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;justify-content:center;}
.kb-paginaknop{
  min-width:44px;min-height:44px;padding:0 12px;
  border:1px solid var(--veldrand);border-radius:var(--r-veld);
  font-size:0.92rem;font-weight:700;color:var(--navy-950);background:var(--werkvlak);
}
.kb-paginaknop:hover{border-color:var(--navy-900);}
.kb-paginaknop[aria-current="page"]{background:var(--navy-950);color:var(--wit);border-color:var(--navy-950);}
.kb-paginaknop:disabled{opacity:0.4;cursor:not-allowed;}

/* ============================================================
   STUDIO-MOCKUPKAART (kbo-studio.html hero)
   ============================================================ */
.studio-mockup{background:var(--wit);border:1px solid rgba(255,255,255,0.14);overflow:hidden;min-width:0;}
.studio-mockup__bar{display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--navy-950);}
.studio-mockup__dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.28);flex:none;}
.studio-mockup__url{margin-left:10px;font-size:0.8rem;color:var(--wit-72);background:rgba(255,255,255,0.08);border-radius:var(--r-pill);padding:4px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.studio-mockup__body{padding:var(--s5);}
.studio-mockup__search{display:flex;align-items:center;gap:10px;font-size:0.92rem;font-weight:700;color:var(--navy-950);padding-bottom:var(--s4);border-bottom:1px solid var(--hairline);margin-bottom:var(--s4);}
.studio-mockup__search svg{width:20px;height:20px;flex:none;stroke:var(--focus);fill:none;}
.studio-mockup__links{display:grid;gap:12px;}
.studio-mockup__link{display:flex;align-items:center;gap:10px;font-size:0.9rem;color:var(--tekst-sec);}
.studio-mockup__link svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--veldrand);stroke-width:2;}
.studio-mockup__link--done{color:var(--navy-950);font-weight:700;}
.studio-mockup__link--done svg{stroke:var(--leesgroen);}

/* ============================================================
   KENNISBANK-PREVIEWKAART (home, "Bewijs, geen belofte")
   Wortel-oorzaak (doc 19 §3): .preview/.zoek/.tags/.links/.specs hadden
   nooit eigen regels — alleen de generieke .paneel (witte kaart + rand)
   matchte, de rest rendere als ongestylede platte tekst (bevestigd op
   staging: geen enkele van deze klassen kwam voor in een CSS-selector).
   ============================================================ */
.preview{padding:var(--s5);overflow:hidden;}
.preview .url{
  font-size:0.8rem;color:var(--tekst-sec);
  background:var(--omgeving);border:1px solid var(--hairline);border-radius:var(--r-pill);
  padding:0.5rem 1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.preview .zoek{
  margin-top:0.9rem;font-size:0.92rem;color:var(--muted);
  background:var(--wit);border:1px solid var(--hairline);border-radius:10px;
  padding:0.8rem 1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.preview .tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1.1rem;}
.preview .tags span{
  display:inline-block;font-size:0.82rem;font-weight:700;color:var(--blok-blauw);
  background:var(--omgeving);border:1px solid var(--hairline);border-radius:var(--r-pill);
  padding:0.35rem 0.8rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.preview .links{display:grid;gap:0.7rem;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--hairline);}
.preview .links span{display:block;font-size:0.92rem;font-weight:600;color:var(--navy-950);overflow-wrap:break-word;}
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:0.6rem 1rem;margin-top:1.2rem;list-style:none;}
@media (max-width:479px){.specs{grid-template-columns:1fr;}}
.specs li{position:relative;padding-left:22px;font-size:0.88rem;line-height:1.5;color:var(--tekst-sec);}
.specs li::before{
  content:"";position:absolute;left:0;top:4px;width:12px;height:12px;
  background-color:var(--leesgroen);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.2 12.4 2.3 8.5l1.4-1.4 2.5 2.5 6-6 1.4 1.4z"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.2 12.4 2.3 8.5l1.4-1.4 2.5 2.5 6-6 1.4 1.4z"/></svg>') center/contain no-repeat;
}

/* ============================================================
   QUICKSCANPAGINA (formulier op het werkvlak) — bevroren fragment,
   stijllaag werkt door (doc 15 §5)
   ============================================================ */
.formvlak{padding:var(--s5) var(--s4);}
@media (min-width:768px){.formvlak{padding:var(--s6);}}
.formvlak h2{font-size:1.35rem;font-weight:800;color:var(--navy-950);}
.qsform{display:grid;gap:var(--s5);margin-top:var(--s5);}
.veldrij{display:grid;grid-template-columns:1fr;gap:var(--s4) var(--s5);}
@media (min-width:768px){.veldrij{grid-template-columns:1fr 1fr;}}
.veld{display:flex;flex-direction:column;gap:6px;min-width:0;}
.veld label,.veldwrap legend{font-size:0.85rem;font-weight:700;color:var(--ink);}
.veld .optioneel{font-weight:600;color:var(--muted);}
.veld input,.veld select,.veld textarea{
  font:inherit;font-size:0.95rem;color:var(--ink);
  background:var(--werkvlak);
  border:1px solid var(--veldrand);border-radius:var(--r-veld);
  min-height:48px;padding:0.6rem 14px;width:100%;
  transition:border-color var(--t-micro) var(--ease);
}
.veld textarea{resize:vertical;min-height:96px;}
.veld input::placeholder,.veld textarea::placeholder{color:var(--veldrand);}
.veld input:hover,.veld select:hover,.veld textarea:hover{border-color:var(--navy-900);}
.veld input:focus-visible,.veld select:focus-visible,.veld textarea:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;border-color:var(--focus);
}
.veld input[aria-invalid="true"]{border-color:var(--fout);border-width:2px;}
.veld .hulp{font-size:0.85rem;color:var(--muted);}
.veld .melding{font-size:0.875rem;color:var(--fout);font-weight:600;min-height:1.35em;visibility:hidden;}
.veld .melding.zichtbaar{visibility:visible;}
.qs-honeypot{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.veldwrap{border:1px solid var(--hairline);background:var(--inzet);padding:var(--s5);}
.veldwrap legend{padding:0 8px;background:var(--werkvlak);border:1px solid var(--hairline);}
.veldwrap .binnen{display:grid;gap:var(--s4);margin-top:var(--s2);}
.veldwrap--nest{background:var(--werkvlak);}
/* F5-restpunt 5b (doc 18): optionele verdieping standaard ingeklapt, native
   details/summary (toetsenbordtoegankelijk zonder JS) met chevron-indicatie. */
.qs-optioneel{border:1px solid var(--hairline);background:var(--inzet);}
.qs-optioneel summary{
  list-style:none;cursor:pointer;position:relative;
  display:flex;flex-direction:column;gap:0.25rem;
  padding:var(--s4) 2.6rem var(--s4) var(--s5);
  min-height:44px;
}
.qs-optioneel summary::-webkit-details-marker{display:none;}
.qs-optioneel__titel{font-size:0.95rem;font-weight:700;color:var(--ink);}
.qs-optioneel__sub{font-size:0.85rem;color:var(--muted);}
.qs-optioneel summary::after{
  content:"";position:absolute;right:var(--s5);top:50%;
  width:9px;height:9px;margin-top:-7px;
  border-right:2px solid var(--navy-700);border-bottom:2px solid var(--navy-700);
  transform:rotate(45deg);transition:transform var(--t-micro) var(--ease);
}
.qs-optioneel[open] summary::after{transform:rotate(225deg);margin-top:-3px;}
.qs-optioneel summary:hover{background:rgba(0,0,0,0.03);}
.qs-optioneel summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;}
.qs-optioneel .binnen{padding:0 var(--s5) var(--s5);display:grid;gap:var(--s4);}
.checkrooster{display:grid;grid-template-columns:1fr;gap:0.4rem 1.5rem;margin-top:var(--s2);}
@media (min-width:768px){.checkrooster{grid-template-columns:1fr 1fr;}}
.checkrij{
  display:flex;align-items:center;gap:12px;
  min-height:44px;cursor:pointer;
  font-size:0.92rem;color:var(--ink);font-weight:600;
}
.checkrij input{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;flex:none;
  border:1.5px solid var(--navy-900);border-radius:4px;background:var(--werkvlak);
  display:inline-grid;place-content:center;cursor:pointer;
  transition:background var(--t-micro) var(--ease);
}
.checkrij input::before{
  content:"";width:11px;height:11px;transform:scale(0);
  transition:transform var(--t-micro) var(--ease);
  background-color:var(--navy-950);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.2 12.4 2.3 8.5l1.4-1.4 2.5 2.5 6-6 1.4 1.4z"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.2 12.4 2.3 8.5l1.4-1.4 2.5 2.5 6-6 1.4 1.4z"/></svg>') center/contain no-repeat;
}
.checkrij input:checked{background:var(--groen);}
.checkrij input:checked::before{transform:scale(1);}
.checkrij input:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.qs-privacy{font-size:0.875rem;line-height:1.65;color:var(--muted);max-width:70ch;}
.qs-privacy a{color:var(--focus);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.qs-stappen{display:grid;gap:1.6rem;margin-top:1.6rem;}
.qs-stap{display:flex;gap:16px;align-items:flex-start;}
.qs-stap .num{
  flex:none;width:34px;height:34px;
  display:grid;place-content:center;
  border:1px solid var(--veldrand);border-radius:var(--r-veld);
  font-size:0.9rem;font-weight:800;color:var(--navy-950);
  background:var(--werkvlak);font-variant-numeric:tabular-nums;
}
.qs-stap h3{font-size:1rem;font-weight:800;color:var(--navy-950);}
.qs-stap p{margin-top:0.35rem;font-size:0.95rem;line-height:1.65;color:var(--tekst-sec);max-width:52ch;}

/* ============================================================
   KENNISARTIKEL (op de lichte lagen) — leesvlak/toc/auteur/kortgezegd
   ============================================================ */
.artikelzone{padding:2.5rem 20px 3.5rem;}
@media (min-width:768px){.artikelzone{padding:2.5rem 24px 4rem;}}
@media (min-width:1024px){.artikelzone{padding:3.5rem 4vw 5.5rem;}}
.kruimel{font-size:0.85rem;color:var(--muted);}
.kruimel ol{display:flex;flex-wrap:wrap;gap:0.35rem 0;align-items:center;}
.kruimel a{color:var(--focus);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.kruimel li+li::before{content:"\203A";margin:0 0.55rem;color:var(--rand-decor);}
.artkop{margin-top:1.6rem;max-width:820px;}
.artkop h1{font-size:clamp(1.5rem,5vw,2.4rem);font-weight:800;line-height:1.25;letter-spacing:-0.01em;color:var(--navy-950);}
.artmeta{display:flex;flex-wrap:wrap;align-items:center;gap:0.6rem 1rem;margin-top:1.1rem;}
.chip{
  display:inline-flex;align-items:center;
  font-size:0.78rem;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--navy-950);background:var(--werkvlak);
  border:1px solid var(--veldrand);border-radius:var(--r-veld);
  padding:5px 10px;text-decoration:none;
}
a.chip:hover{border-color:var(--navy-900);}
.leestijd{font-size:0.875rem;font-weight:700;color:var(--tekst-sec);}
.byline{margin-top:0.7rem;font-size:0.875rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:0.3rem 0.6rem;}
.byline .scheiding{color:var(--rand-decor);}
/* Artikelpagina: het leesvlak is het sectie-openende vel (volle streep); TOC-/
   auteursvel en kortgezegd zijn geneste subvellen (korte tab, doc 15 §1.2). */
.leesvlak{margin-top:2rem;max-width:860px;padding:1.4rem 20px;border-top:4px solid var(--groen);background:var(--werkvlak);position:relative;}
@media (min-width:768px){.leesvlak{padding:2rem 24px;}}
@media (min-width:1024px){.leesvlak{padding:clamp(1.5rem,4vw,3.5rem);}}
.leesvlak > *{max-width:68ch;}
.voorlees{display:flex;flex-wrap:wrap;align-items:center;gap:0.6rem 1.1rem;padding:0.9rem 1.2rem;margin-bottom:1.6rem;}
.voorlees .knop{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 1rem;background:var(--navy-900);color:var(--wit);border-radius:var(--r-veld);font-size:0.9rem;font-weight:700;transition:background var(--t-micro) var(--ease);white-space:normal;}
.voorlees .knop:hover{background:var(--navy-800);}
.voorlees .knop .driehoek{width:0;height:0;flex:none;border-left:9px solid var(--wit);border-top:6px solid transparent;border-bottom:6px solid transparent;}
.voorlees .status{font-size:0.875rem;font-weight:600;color:var(--tekst-sec);}
.voorlees .tip{font-size:0.82rem;color:var(--muted);width:100%;}
.toc, .toc-mobiel, .auteur, .kortgezegd{border-top:1px solid var(--hairline);position:relative;}
.toc::before, .toc-mobiel::before, .auteur::before, .kortgezegd::before{
  content:"";position:absolute;top:-1px;left:0;
  width:44px;height:4px;background:var(--groen);z-index:1;
}
.kortgezegd{padding:1.1rem 1.3rem;margin-bottom:1.6rem;background:var(--inzet);}
.kortgezegd .label{display:block;font-size:0.75rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--blok-blauw);}
.kortgezegd p{margin-top:0.5rem;font-size:0.95rem;line-height:1.65;color:var(--tekst-sec);}
.toc, .toc-mobiel{background:var(--werkvlak);padding:1.1rem 1.3rem;margin-bottom:2rem;}
.toc .kop, .toc-mobiel .kop{font-size:0.75rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--blok-blauw);}
.toc ol{margin-top:0.6rem;display:grid;gap:2px;counter-reset:toc;}
.toc li{counter-increment:toc;}
.toc a{display:inline-flex;align-items:baseline;gap:0.6rem;font-size:0.92rem;font-weight:600;color:var(--focus);text-decoration:underline;text-underline-offset:3px;padding:0.35rem 0;}
.toc a::before{content:counter(toc,decimal-leading-zero);font-size:0.78rem;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums;text-decoration:none;}
.toc-mobiel{display:block;margin-bottom:2rem;}
.toc-mobiel summary{list-style:none;cursor:pointer;padding:1.1rem 1.3rem;font-size:0.85rem;font-weight:800;letter-spacing:0.04em;color:var(--navy-950);display:flex;align-items:center;justify-content:space-between;min-height:44px;}
.toc-mobiel summary::-webkit-details-marker{display:none;}
.toc-mobiel summary::after{content:"+";font-size:1.3rem;font-weight:400;color:var(--muted);}
.toc-mobiel[open] summary::after{transform:rotate(45deg);display:inline-block;}
.toc-mobiel .toc{margin-bottom:0;border-top:1px solid var(--hairline);}
.toc-desktop{display:none;}
@media (min-width:1024px){
  .toc-mobiel{display:none;}
  .toc-desktop{display:block;}
}
/* Subtiele sectiemarkering in de artikelbody: leesrust blijft leidend. */
.artbody h2{position:relative;padding-left:0.9rem;font-size:1.35rem;font-weight:800;line-height:1.3;letter-spacing:-0.01em;color:var(--navy-950);margin-top:2.4rem;scroll-margin-top:90px;}
.artbody h2::before{content:"";position:absolute;left:0;top:0.2em;bottom:0.2em;width:3px;background:var(--blok-blauw);border-radius:2px;}
@media (min-width:1024px){.artbody h2{font-size:1.45rem;}}
.artbody p{margin-top:1rem;font-size:1rem;line-height:1.75;color:var(--tekst-sec);}
.artbody p strong{color:var(--ink);}
.artbody ul{margin-top:1rem;display:grid;gap:0.6rem;padding-left:0;}
.artbody ul li{position:relative;padding-left:22px;font-size:1rem;line-height:1.7;color:var(--tekst-sec);}
.artbody ul li::before{content:"";position:absolute;left:0;top:0.62em;width:6px;height:6px;background:var(--navy-900);}
.artbody ul li strong{color:var(--ink);}
.artbody a{color:var(--focus);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.artbody hr{border:none;border-top:1px solid var(--hairline);margin:2.4rem 0 0;}
.artbody code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:0.9em;background:var(--inzet);border:1px solid var(--hairline);padding:1px 6px;border-radius:4px;color:var(--navy-950);}
.arttabel{overflow-x:auto;margin-top:1.4rem;border:1px solid var(--hairline);}
.arttabel table{width:100%;border-collapse:collapse;min-width:560px;background:var(--werkvlak);}
.arttabel th,.arttabel td{text-align:left;padding:0.75rem 1rem;border-bottom:1px solid var(--hairline);font-size:0.92rem;line-height:1.55;vertical-align:top;color:var(--tekst-sec);}
.arttabel thead th{font-size:0.78rem;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--navy-950);background:var(--inzet);border-bottom:1px solid var(--veldrand);}
.arttabel tbody th{font-weight:700;color:var(--ink);}
.arttabel tbody tr:last-child th,.arttabel tbody tr:last-child td{border-bottom:none;}
.artfaq{margin-top:3rem;}
.artfaq h2{font-size:1.35rem;font-weight:800;color:var(--navy-950);}
.auteur{display:flex;flex-direction:column;gap:1.1rem;margin-top:3rem;padding:1.5rem 1.6rem;background:var(--werkvlak);}
@media (min-width:640px){.auteur{flex-direction:row;gap:1.3rem;align-items:flex-start;}}
.auteur img{width:96px;height:96px;object-fit:cover;flex:none;}
.auteur .naam{font-size:1.02rem;font-weight:800;color:var(--navy-950);}
.auteur .functie{display:block;font-size:0.85rem;font-weight:600;color:var(--muted);margin-top:2px;}
.auteur .bio{margin-top:0.6rem;font-size:0.95rem;line-height:1.65;color:var(--tekst-sec);}
.artcta{margin-top:3rem;padding:2rem 20px;background:var(--navy-950);color:var(--wit);}
@media (min-width:768px){.artcta{padding:2.2rem 2rem;}}
.artcta .kop{font-size:1.2rem;font-weight:800;line-height:1.35;max-width:30ch;}
.artcta p{margin-top:0.8rem;font-size:0.98rem;line-height:1.7;color:var(--wit-72);max-width:58ch;}
.artcta .pill{margin-top:1.4rem;}
.verder{margin-top:3rem;}
.verder h2{font-size:1.35rem;font-weight:800;color:var(--navy-950);}
.verder .sub{margin-top:0.4rem;font-size:0.95rem;color:var(--muted);}
.verder ul{margin-top:1.4rem;border-top:1px solid var(--hairline);display:grid;}
.verder li{border-bottom:1px solid var(--hairline);padding:1.3rem 0.2rem;}
.verder .meta{display:flex;align-items:center;gap:0.8rem;flex-wrap:wrap;}
.verder .leestijd{font-size:0.82rem;}
.verder .titel{display:block;margin-top:0.6rem;font-size:1.02rem;font-weight:800;color:var(--navy-950);max-width:52ch;}
.verder .snippet{display:block;margin-top:0.35rem;font-size:0.92rem;line-height:1.6;color:var(--muted);max-width:64ch;}
.verder .tlink{margin-top:0.3rem;font-size:0.92rem;}

/* ============================================================
   VARIANT 3 "WERKVLAK" — vellen, korte tab, chips-rail (stijl-definitief.css)
   ============================================================ */
/* Vervolgvel binnen dezelfde sectie: geen eigen bloktitel, dus geen volle streep. */
.v3-vel--vervolg{border-top:1px solid var(--hairline);}
/* Korte groene tab voor geneste kaarten en subvellen (doc 15 §1.2). */
.tab-kort{position:relative;}
.tab-kort::before{
  content:"";position:absolute;top:-1px;left:0;
  width:44px;height:4px;background:var(--groen);z-index:1;
}
/* Hotfix 0.3.1 (doc 16): color:var(--ink) ontbrak hier terwijl .sl (dezelfde
   --omgeving-achtergrond) dat wel zet. Zonder deze regel erven .h-sectie,
   .lead en andere ongestylede tekst de witte body-tekstkleur, wat op deze
   lichte achtergrond onleesbare witte koppen gaf (bv. "Zo bouwt je kennis
   aan online autoriteit"). Geen ontwerpwijziging: herstelt de bedoelde
   donkere leestekst op deze lichte sectiefamilie. */
.v3-werkvlak{background:var(--omgeving);color:var(--ink);padding:5rem 0 5.5rem;position:relative;}
.v3-vel{
  background:var(--werkvlak);
  border:1px solid var(--hairline);
  border-top:4px solid var(--groen);
  box-shadow:0 22px 50px -30px rgba(7,20,43,0.35);
  padding:2.4rem 1.4rem;
  position:relative;
}
.v3-probleem{max-width:820px;}
.v3-oplossing{max-width:820px;margin-top:2.5rem;}
.v3-uitspraak{padding:4.5rem 0;}
.v3-uitspraak blockquote{margin:0;border:0;padding:0;background:none;}
.v3-uitspraak p{
  font-size:clamp(1.45rem,3.2vw,2.2rem);font-weight:800;line-height:1.4;
  color:var(--ink);max-width:26ch;text-wrap:balance;margin:0;
}
/* Zelfde fail-safe-principe als .rv hierboven: het onderstreepteken staat
   standaard al "getekend" (scaleX(1)). Alleen binnen html.kbo-anim begint
   het verborgen en tekent de IntersectionObserver het bij (.zichtbaar). */
.v3-marker{position:relative;white-space:nowrap;display:inline-block;}
.v3-marker::before{
  content:"";position:absolute;inset:0.12em -0.14em -0.02em;
  background:var(--groen);opacity:0.35;z-index:-1;
  transform:rotate(-0.6deg) scaleX(1);
  transform-origin:left center;
}
.v3-marker:nth-of-type(2)::before{transform:rotate(0.45deg) scaleX(1);}
.v3-marker:nth-of-type(3)::before{transform:rotate(-0.35deg) scaleX(1);}
html.kbo-anim .v3-marker::before{
  transform:rotate(-0.6deg) scaleX(0);
  transition:transform 0.55s var(--ease);
}
html.kbo-anim .v3-marker:nth-of-type(2)::before{transform:rotate(0.45deg) scaleX(0);transition-delay:0.25s;}
html.kbo-anim .v3-marker:nth-of-type(3)::before{transform:rotate(-0.35deg) scaleX(0);transition-delay:0.5s;}
html.kbo-anim .zichtbaar .v3-marker::before{transform:rotate(-0.6deg) scaleX(1);}
html.kbo-anim .zichtbaar .v3-marker:nth-of-type(2)::before{transform:rotate(0.45deg) scaleX(1);}
html.kbo-anim .zichtbaar .v3-marker:nth-of-type(3)::before{transform:rotate(-0.35deg) scaleX(1);}
@media (prefers-reduced-motion: reduce){
  html.kbo-anim .v3-marker::before{transform:rotate(-0.6deg) scaleX(1);transition:none;}
  html.kbo-anim .v3-marker:nth-of-type(2)::before{transform:rotate(0.45deg) scaleX(1);}
  html.kbo-anim .v3-marker:nth-of-type(3)::before{transform:rotate(-0.35deg) scaleX(1);}
}
.v3-ikon{position:relative;margin-top:2rem;z-index:1;}
.v3-ikon-kop{background:var(--navy-950);color:var(--wit);padding:1.8rem 1.4rem;}
.v3-ikon-kop .kicker{margin-bottom:0.5rem;}
.v3-ikon-kop p{margin:0 0 0.9rem;color:rgba(255,255,255,0.85);max-width:70ch;}
.v3-ikon-kop p:last-child{margin-bottom:0;}
.v3-rail{
  list-style:none;margin:0;padding:1.1rem 1.4rem;display:flex;flex-direction:column;gap:0.8rem;
  background:var(--navy-950);border-top:1px solid rgba(125,211,252,0.25);position:relative;
}
.v3-rail::before{content:"";position:absolute;left:1.4rem;right:1.4rem;top:50%;height:2px;background:rgba(125,211,252,0.35);display:none;}
.v3-chip{
  display:inline-flex;align-items:center;gap:0.6rem;
  background:rgba(8,16,32,0.85);color:var(--wit);
  border:1px solid rgba(125,211,252,0.45);
  padding:0.55rem 0.95rem;font-size:0.92rem;font-weight:700;
  box-shadow:0 0 18px -6px rgba(56,189,248,0.55);
  position:relative;z-index:1;
}
.v3-chip .num{color:var(--groen);font-weight:800;}
.v3-waarden{padding:4.5rem 0 0;}
.v3-waarden .lead{max-width:56ch;}
.v3-wgrid{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:2.4rem;}
.v3-wvel{
  background:var(--werkvlak);border:1px solid var(--hairline);
  box-shadow:0 14px 34px -24px rgba(7,20,43,0.35);
  padding:1.4rem 1.4rem 1.5rem;position:relative;
}
.v3-wvel::before{content:"";position:absolute;top:-1px;left:0;width:44px;height:4px;background:var(--groen);z-index:1;}
.v3-wvel .num{color:var(--electric);font-weight:800;font-size:0.95rem;}
.v3-wvel h3{margin:0.35rem 0 0.4rem;font-size:1.05rem;}
.v3-wvel p{margin:0;color:var(--tekst-sec);}
@media (min-width:900px){
  .v3-vel{padding:3rem 3.2rem;}
  .v3-probleem{margin-right:auto;}
  .v3-oplossing{
    margin:1.5rem 0 0 auto;position:relative;z-index:2;
    display:grid;grid-template-columns:7fr 5fr;gap:2.5rem;align-items:start;
    max-width:1040px;
  }
  .v3-oplossing-foto{margin:-5.5rem -5rem 0 0;position:relative;z-index:2;}
  .v3-oplossing-foto img{display:block;width:100%;height:auto;box-shadow:14px 24px 54px -26px rgba(7,20,43,0.5);}
  .v3-oplossing-foto figcaption{font-size:0.82rem;color:var(--muted);padding:0.6rem 0 0;}
  .v3-ikon{margin-top:-3rem;max-width:1120px;margin-left:auto;margin-right:0;}
  .v3-ikon-kop{padding:4.5rem 3rem 1.8rem;}
  .v3-rail{flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:1.3rem 2rem;}
  .v3-rail::before{display:block;}
  .v3-wgrid{grid-template-columns:repeat(3,1fr);gap:1.6rem;}
}
@media (min-width:900px) and (max-width:1199px){
  .v3-oplossing-foto{margin-right:-2rem;}
}
@media (max-width:899px){
  .v3-oplossing-foto{margin:1.6rem 0 0;}
  .v3-oplossing-foto img{width:100%;height:auto;display:block;}
  .v3-oplossing-foto figcaption{font-size:0.82rem;color:var(--muted);padding:0.6rem 0 0;}
}
.ww-fasen-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem;margin-top:2.4rem;}
@media (min-width:768px){.ww-fasen-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;}}
@media (min-width:1024px){.ww-fasen-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.ww-fase-vel{
  background:var(--werkvlak);border:1px solid var(--hairline);
  box-shadow:0 14px 34px -24px rgba(7,20,43,0.35);
  padding:1.4rem 1.4rem 1.5rem;position:relative;min-width:0;
}
.ww-fase-vel .num{color:var(--electric);font-weight:800;font-size:0.95rem;font-variant-numeric:tabular-nums;}
.ww-fase-vel h3{margin:0.35rem 0 0.4rem;font-size:1.02rem;font-weight:800;color:var(--navy-950);}
.ww-fase-vel p{margin:0;color:var(--tekst-sec);font-size:0.95rem;line-height:1.6;}
.v3-werkvlak--pagina{padding:3.5rem 0 4rem;}
.v3-werkvlak--pagina .v3-vel + .v3-vel{margin-top:1.8rem;}
.v3-werkvlak--pagina .v3-vel{max-width:1200px;margin-left:auto;margin-right:auto;padding:2.2rem 1.4rem;}
@media (min-width:900px){.v3-werkvlak--pagina .v3-vel{padding:2.8rem 3rem;}}

/* ============================================================
   VERMINDERDE BEWEGING (site-breed vangnet, aanvullend op de
   selectieve regels hierboven)
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .rv, .v3-marker, .v3-marker::before { transition-duration: 0.01ms !important; }
}