/* ============================================================================
   Kinderlogistiek — designsysteem "Warm daglicht"
   ----------------------------------------------------------------------------
   Eén bron van waarheid voor kleur, typografie, ruimte, vorm en de gedeelde
   componenten. Ingeladen op elke pagina. Levende referentie: /styleguide

   Uitgangspunt: licht, warm, rustig en betrouwbaar. De inhoud is klinisch
   nauwkeurig; de vormgeving is dat expres niet.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   1. TOKENS
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* Papier & vlak — warme neutralen i.p.v. koud grijs */
  --kl-paper:        #FBFAF7;
  --kl-surface:      #FFFFFF;
  --kl-surface-warm: #F4F1EA;
  --kl-surface-sink: #EFEBE2;

  /* Lijnen */
  --kl-line:         #E6E1D6;
  --kl-line-soft:    #F0ECE4;
  --kl-line-strong:  #D6CFC0;

  /* Inkt — bijna-zwart met een groene cast */
  --kl-ink:          #17211D;
  --kl-ink-2:        #3B4842;
  --kl-ink-3:        #6C7873;
  --kl-ink-4:        #7E8783;

  /* Merk: den (evolutie van #0E6B75 → groener, warmer, dieper) */
  --kl-pine-900:     #0D2621;
  --kl-pine-800:     #123A33;
  --kl-pine-700:     #17564E;
  --kl-pine-600:     #1D6B60;
  --kl-pine-400:     #5C9A8F;
  --kl-pine-100:     #DBE9E4;
  --kl-pine-50:      #EFF5F2;

  /* Warm accent: klei (evolutie van #F4A245 → minder neon, meer aarde) */
  --kl-clay-700:     #9E4E2C;
  --kl-clay-600:     #C2643C;
  --kl-clay-500:     #D9784E;
  --kl-clay-200:     #F4D8C7;
  --kl-clay-100:     #FAEBE0;

  /* Semantische categorieën — ontzadigd en warm geschoven, zodat ze
     naast elkaar kunnen staan zonder met elkaar of het merk te vechten. */
  --kl-sleep: #4A5B8C;  --kl-sleep-bg: #EAEDF5;
  --kl-eat:   #4B7A55;  --kl-eat-bg:   #E8F0E9;
  --kl-play:  #A87428;  --kl-play-bg:  #F7EEDA;
  --kl-care:  #7A5470;  --kl-care-bg:  #F2E9F0;
  --kl-alert: #A8483C;  --kl-alert-bg: #F7E6E3;

  /* Typografie. Fraunces draagt de warmte in koppen, Inter de precisie in UI.
     Monospace-zetting is gedegradeerd tot uitsluitend numerieke data. */
  --kl-font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --kl-font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --kl-fs-display: clamp(2.6rem, 1.6rem + 3.6vw, 4.25rem);
  --kl-fs-h2:      clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem);
  --kl-fs-h3:      1.125rem;
  --kl-fs-lead:    clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  --kl-fs-body:    1rem;
  --kl-fs-sm:      .875rem;
  --kl-fs-xs:      .8125rem;
  --kl-fs-label:   .75rem;

  --kl-lh-tight: 1.08;
  --kl-lh-snug:  1.3;
  --kl-lh-body:  1.65;

  /* Ruimte (8pt) */
  --kl-1: 4px;  --kl-2: 8px;  --kl-3: 12px; --kl-4: 16px; --kl-5: 24px;
  --kl-6: 32px; --kl-7: 48px; --kl-8: 64px; --kl-9: 96px; --kl-10: 128px;

  --kl-section-y: clamp(64px, 8vw, 128px);
  --kl-container: 1120px;
  --kl-measure:   680px;

  /* Vorm — klein voor chips, groot voor panelen, niets ertussenin */
  --kl-r-chip: 999px;
  --kl-r-sm:   8px;
  --kl-r-md:   12px;
  --kl-r-lg:   18px;
  --kl-r-xl:   28px;

  /* Diepte — één zachte schaduw, verder 1px randen. Geen glows. */
  --kl-shadow-sm: 0 1px 2px rgba(23,33,29,.04);
  --kl-shadow:    0 1px 2px rgba(23,33,29,.04), 0 10px 28px -14px rgba(23,33,29,.16);
  --kl-shadow-lg: 0 2px 4px rgba(23,33,29,.04), 0 24px 56px -24px rgba(23,33,29,.22);

  --kl-ease: cubic-bezier(.2,.7,.3,1);
  --kl-dur:  .18s;
}

/* Inverse vlak: gebruikt op precies één plek per pagina (de afsluitende CTA),
   zodat donker weer nadruk betekent in plaats van de standaardtoestand. */
.kl-inverse {
  --kl-paper:        var(--kl-pine-900);
  --kl-surface:      #143029;
  --kl-surface-warm: #143029;
  --kl-line:         rgba(255,255,255,.12);
  --kl-line-soft:    rgba(255,255,255,.08);
  --kl-line-strong:  rgba(255,255,255,.18);
  --kl-ink:          #F6F4EF;
  --kl-ink-2:        rgba(246,244,239,.78);
  --kl-ink-3:        rgba(246,244,239,.68);
  --kl-ink-4:        rgba(246,244,239,.52);
  --kl-pine-600:     #6FBFAE;
  --kl-pine-700:     #8FD3C4;
  --kl-pine-100:     rgba(111,191,174,.18);
  --kl-pine-50:      rgba(111,191,174,.10);
  --kl-clay-600:     var(--kl-clay-500);
}

@media (prefers-reduced-motion: reduce) {
  :root { --kl-dur: .001s; }
  *, *::before, *::after {
    animation-duration: .001s !important;
    transition-duration: .001s !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   2. BASIS
   ───────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: 84px; }

body {
  margin: 0;
  font-family: var(--kl-font-ui);
  font-size: var(--kl-fs-body);
  line-height: var(--kl-lh-body);
  color: var(--kl-ink-2);
  background: var(--kl-paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--kl-font-display);
  color: var(--kl-ink);
  font-weight: 500;
  letter-spacing: -.022em;
  line-height: var(--kl-lh-tight);
  font-optical-sizing: auto;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--kl-fs-display); }
h2 { font-size: var(--kl-fs-h2); }
h3 { font-size: var(--kl-fs-h3); font-weight: 600; line-height: var(--kl-lh-snug); }
h4 { font-size: 1rem; font-weight: 600; line-height: var(--kl-lh-snug); }

p { margin: 0; text-wrap: pretty; }

a { color: var(--kl-pine-700); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--kl-pine-600);
  outline-offset: 2px;
  border-radius: var(--kl-r-sm);
}

.kl-wrap { width: 100%; max-width: var(--kl-container); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
.kl-measure { max-width: var(--kl-measure); }
.kl-section { padding-block: var(--kl-section-y); }
.kl-lead { font-size: var(--kl-fs-lead); color: var(--kl-ink-3); line-height: 1.6; }

/* Eyebrow — vervangt de uppercase-monospace labels van de oude site. */
.kl-eyebrow {
  display: inline-flex; align-items: center; gap: var(--kl-2);
  font-family: var(--kl-font-ui);
  font-size: var(--kl-fs-label); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--kl-clay-600);
}
.kl-eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .55; }

/* Cijfers en tijden — het enige dat nog uitgelijnd wordt gezet. */
.kl-num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ─────────────────────────────────────────────────────────────────────────
   3. ICONEN — één set: 24px, 1,5px lijn, currentColor. Geen emoji.
   ───────────────────────────────────────────────────────────────────────── */
.kl-ico {
  width: 20px; height: 20px; flex-shrink: 0;
  stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.kl-ico-lg { width: 26px; height: 26px; }
.kl-ico-sm { width: 16px; height: 16px; }
.kl-ico-badge {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--kl-pine-50); color: var(--kl-pine-600);
  border: 1px solid var(--kl-pine-100);
}

/* ─────────────────────────────────────────────────────────────────────────
   4. NAVIGATIE & FOOTER
   ───────────────────────────────────────────────────────────────────────── */
.kl-nav {
  position: sticky; top: 0; z-index: 60;
  height: 68px; display: flex; align-items: center;
  background: color-mix(in srgb, var(--kl-paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--kl-line);
}
.kl-nav > .kl-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--kl-5); }
.kl-wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--kl-font-display); font-size: 1.25rem; font-weight: 600;
  letter-spacing: -.02em; color: var(--kl-ink); text-decoration: none;
}
.kl-wordmark .kl-ico { width: 24px; height: 24px; color: var(--kl-pine-600); }
.kl-nav-links { display: flex; align-items: center; gap: var(--kl-6); }
.kl-nav-links a { font-size: var(--kl-fs-sm); font-weight: 500; color: var(--kl-ink-3); text-decoration: none; transition: color var(--kl-dur); }
.kl-nav-links a:hover { color: var(--kl-ink); }
.kl-nav-links a.kl-btn { color: #fff; }
.kl-nav-links a.kl-btn-ghost { color: var(--kl-ink); }
@media (max-width: 760px) { .kl-nav-links a:not(.kl-btn) { display: none; } }

.kl-footer { border-top: 1px solid var(--kl-line); padding-block: var(--kl-7); background: var(--kl-paper); }
.kl-footer-grid { display: flex; justify-content: space-between; gap: var(--kl-6); flex-wrap: wrap; align-items: flex-start; }
.kl-footer-links { display: flex; gap: var(--kl-5); flex-wrap: wrap; }
.kl-footer a { font-size: var(--kl-fs-xs); color: var(--kl-ink-3); text-decoration: none; }
.kl-footer a:hover { color: var(--kl-ink); text-decoration: underline; }
.kl-footer-note { font-size: var(--kl-fs-xs); color: var(--kl-ink-3); margin-top: var(--kl-5); max-width: 62ch; }

/* ─────────────────────────────────────────────────────────────────────────
   5. KNOPPEN & VELDEN
   ───────────────────────────────────────────────────────────────────────── */
.kl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kl-2);
  font-family: var(--kl-font-ui); font-size: .9375rem; font-weight: 600;
  padding: 14px 22px; border-radius: var(--kl-r-md);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  white-space: nowrap; line-height: 1.2;
  transition: background var(--kl-dur) var(--kl-ease),
              border-color var(--kl-dur) var(--kl-ease),
              color var(--kl-dur) var(--kl-ease);
}
.kl-btn[disabled] { opacity: .6; cursor: default; }
.kl-btn .kl-ico { width: 16px; height: 16px; }
.kl-btn-primary { background: var(--kl-pine-600); color: #fff; }
.kl-btn-primary:hover:not([disabled]) { background: var(--kl-pine-700); }
.kl-inverse .kl-btn-primary { background: #F6F4EF; color: var(--kl-pine-900); }
.kl-inverse .kl-btn-primary:hover:not([disabled]) { background: #fff; }
.kl-btn-ghost { background: transparent; color: var(--kl-ink); border-color: var(--kl-line-strong); }
.kl-btn-ghost:hover { background: var(--kl-surface-warm); border-color: var(--kl-ink-4); }
.kl-btn-quiet { background: var(--kl-surface-warm); color: var(--kl-ink-2); border-color: var(--kl-line); }
.kl-btn-quiet:hover { background: var(--kl-surface-sink); }
.kl-btn-sm { padding: 9px 16px; font-size: var(--kl-fs-sm); }
.kl-btn-block { width: 100%; }

.kl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kl-field-label { font-size: var(--kl-fs-label); font-weight: 600; color: var(--kl-ink-3); }
.kl-input {
  width: 100%; font-family: inherit; font-size: .9375rem; color: var(--kl-ink);
  background: var(--kl-surface); border: 1px solid var(--kl-line-strong);
  border-radius: var(--kl-r-md); padding: 13px 14px; outline: none;
  transition: border-color var(--kl-dur) var(--kl-ease), box-shadow var(--kl-dur) var(--kl-ease);
}
.kl-input::placeholder { color: var(--kl-ink-4); }
.kl-input:focus { border-color: var(--kl-pine-600); box-shadow: 0 0 0 3px var(--kl-pine-100); }
.kl-inverse .kl-input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: var(--kl-ink); }
.kl-field-note { font-size: var(--kl-fs-xs); color: var(--kl-ink-3); line-height: 1.5; }
.kl-error {
  font-size: var(--kl-fs-sm); color: var(--kl-alert);
  background: var(--kl-alert-bg); border: 1px solid rgba(168,72,60,.22);
  border-radius: var(--kl-r-md); padding: 11px 14px;
}

/* ─────────────────────────────────────────────────────────────────────────
   6. KAARTEN, PANELEN, CHIPS
   ───────────────────────────────────────────────────────────────────────── */
.kl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--kl-4); }
.kl-card {
  background: var(--kl-surface); border: 1px solid var(--kl-line);
  border-radius: var(--kl-r-lg); padding: clamp(24px, 3vw, 32px);
  transition: border-color var(--kl-dur) var(--kl-ease), transform var(--kl-dur) var(--kl-ease);
}
.kl-card:hover { border-color: var(--kl-line-strong); transform: translateY(-2px); }
.kl-card h3 { margin-block: var(--kl-4) var(--kl-3); }
.kl-card p { font-size: var(--kl-fs-sm); color: var(--kl-ink-3); }

.kl-panel { background: var(--kl-surface); border: 1px solid var(--kl-line); border-radius: var(--kl-r-lg); overflow: hidden; }
.kl-panel-hd { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--kl-line-soft); }
.kl-panel-hd .kl-ico { width: 18px; height: 18px; color: var(--kl-pine-600); }
.kl-panel-hd span { font-size: var(--kl-fs-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--kl-ink-3); }
.kl-panel-bd { padding: var(--kl-4) 18px; }

.kl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--kl-r-chip); padding: 6px 13px;
  font-size: var(--kl-fs-xs); font-weight: 600; line-height: 1.4;
  background: var(--kl-pine-50); color: var(--kl-pine-700);
  border: 1px solid var(--kl-pine-100);
}
.kl-chip-warm  { background: var(--kl-surface-warm); border-color: var(--kl-line); color: var(--kl-ink-2); font-weight: 400; }
.kl-chip-soon  { background: var(--kl-clay-100); border-color: var(--kl-clay-200); color: var(--kl-clay-700); font-weight: 400; }
.kl-chip-daily { font-weight: 400; }

.kl-tag { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: var(--kl-r-chip); letter-spacing: .02em; }
.kl-tag-eat   { background: var(--kl-eat-bg);   color: var(--kl-eat); }
.kl-tag-sleep { background: var(--kl-sleep-bg); color: var(--kl-sleep); }
.kl-tag-play  { background: var(--kl-play-bg);  color: var(--kl-play); }
.kl-tag-care  { background: var(--kl-care-bg);  color: var(--kl-care); }

/* ─────────────────────────────────────────────────────────────────────────
   7. RAPPORTCOMPONENTEN
   ───────────────────────────────────────────────────────────────────────── */
/* Stat-tegel — grote serif-cijfers voor kleding- en luiermaat */
.kl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--kl-3); }
.kl-stat { background: var(--kl-surface-warm); border-radius: var(--kl-r-lg); padding: 18px 20px; }
.kl-stat-k { font-size: var(--kl-fs-label); font-weight: 600; color: var(--kl-ink-3); margin-bottom: 4px; }
.kl-stat-v { font-family: var(--kl-font-display); font-size: 1.875rem; color: var(--kl-ink); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 7px; }
.kl-stat-n { font-size: var(--kl-fs-xs); color: var(--kl-ink-3); line-height: 1.5; }

/* Dagritme */
.kl-tl { display: flex; gap: 14px; align-items: flex-start; padding-block: 13px; border-bottom: 1px solid var(--kl-line-soft); }
.kl-tl:last-child { border-bottom: none; }
.kl-tl-time { font-size: var(--kl-fs-xs); font-weight: 600; color: var(--kl-ink-3); font-variant-numeric: tabular-nums; min-width: 88px; flex-shrink: 0; padding-top: 2px; }
.kl-tl-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 7px; background: var(--kl-pine-600); }
.kl-tl-dot.eat { background: var(--kl-eat); } .kl-tl-dot.sleep { background: var(--kl-sleep); }
.kl-tl-dot.play { background: var(--kl-play); } .kl-tl-dot.care { background: var(--kl-care); }
.kl-tl-body { min-width: 0; }
.kl-tl-act { font-size: .9375rem; font-weight: 600; color: var(--kl-ink); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 3px; }
.kl-tl-desc { font-size: var(--kl-fs-sm); color: var(--kl-ink-3); line-height: 1.55; }
.kl-tl-dev { margin-top: 7px; font-size: var(--kl-fs-xs); color: var(--kl-pine-700); background: var(--kl-pine-50); border-left: 2px solid var(--kl-pine-400); padding: 6px 11px; border-radius: 0 6px 6px 0; line-height: 1.5; }

/* Weekstructuur */
.kl-tier { font-size: var(--kl-fs-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--kl-ink-3); margin-bottom: 9px; padding-bottom: 7px; border-bottom: 1px solid var(--kl-line-soft); }
.kl-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: var(--kl-4); }
.kl-chips:last-child { margin-bottom: 0; }

/* Do / don't */
.kl-dd { display: flex; gap: 11px; align-items: flex-start; padding-block: 10px; border-bottom: 1px solid var(--kl-line-soft); font-size: var(--kl-fs-sm); line-height: 1.55; }
.kl-dd:last-child { border-bottom: none; }
.kl-dd .kl-ico { width: 17px; height: 17px; margin-top: 2px; }
.kl-dd-do .kl-ico { color: var(--kl-eat); }
.kl-dd-dont .kl-ico { color: var(--kl-alert); }

/* Producten */
.kl-prod { display: grid; grid-template-columns: 1fr auto; gap: var(--kl-4); align-items: center; padding-block: 14px; border-bottom: 1px solid var(--kl-line-soft); }
.kl-prod:last-child { border-bottom: none; }
.kl-prod-name { display: block; font-size: .9375rem; font-weight: 600; color: var(--kl-ink); }
.kl-prod-meta { display: block; font-size: var(--kl-fs-xs); color: var(--kl-ink-3); margin-top: 2px; }
.kl-advies { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: var(--kl-r-chip); white-space: nowrap; }
.kl-advies-tweedehands { background: var(--kl-eat-bg);   color: var(--kl-eat); }
.kl-advies-nieuw       { background: var(--kl-sleep-bg); color: var(--kl-sleep); }
.kl-advies-beide       { background: var(--kl-surface-warm); color: var(--kl-ink-3); }

/* Checklist */
.kl-check { display: flex; gap: 12px; align-items: flex-start; padding-block: 11px; border-bottom: 1px solid var(--kl-line-soft); font-size: var(--kl-fs-sm); }
.kl-check:last-child { border-bottom: none; }
.kl-check input {
  appearance: none; -webkit-appearance: none;
  width: 19px; height: 19px; flex-shrink: 0; margin: 1px 0 0;
  border: 1.5px solid var(--kl-line-strong); border-radius: 6px;
  background: var(--kl-surface); cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s, border-color .15s;
}
.kl-check input:checked { background: var(--kl-pine-600); border-color: var(--kl-pine-600); }
.kl-check input:checked::after {
  content: ""; width: 9px; height: 5px;
  border-left: 1.75px solid #fff; border-bottom: 1.75px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.kl-check input:checked + span { color: var(--kl-ink-4); text-decoration: line-through; }

/* ─────────────────────────────────────────────────────────────────────────
   8. PROZA (juridische pagina's, lange tekst)
   ───────────────────────────────────────────────────────────────────────── */
.kl-prose { font-size: var(--kl-fs-body); color: var(--kl-ink-2); }
.kl-prose > * + *, .kl-prose section > * + * { margin-top: var(--kl-4); }
.kl-prose section + section { margin-top: var(--kl-7); }
.kl-prose h2 { font-size: 1.375rem; margin-top: var(--kl-7); }
.kl-prose h3 { font-size: 1.0625rem; margin-top: var(--kl-5); }
.kl-prose ul, .kl-prose ol { margin: 0; padding-left: 1.25em; display: flex; flex-direction: column; gap: var(--kl-2); }
.kl-prose li::marker { color: var(--kl-pine-400); }
.kl-prose a { color: var(--kl-pine-700); text-underline-offset: 2px; }
.kl-prose strong { color: var(--kl-ink); font-weight: 600; }
.kl-src { border-left: 2px solid var(--kl-pine-400); padding-left: var(--kl-4); }
.kl-src strong { color: var(--kl-ink); font-weight: 600; }
.kl-src span { font-size: var(--kl-fs-xs); color: var(--kl-ink-3); }
.kl-page-head { padding-block: var(--kl-8) 0; }
.kl-page-head h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); margin-block: var(--kl-4) var(--kl-3); }
.kl-page-meta { font-size: var(--kl-fs-sm); color: var(--kl-ink-3); }

.kl-callout {
  background: var(--kl-pine-50); border: 1px solid var(--kl-pine-100);
  border-radius: var(--kl-r-lg); padding: 18px 20px;
  font-size: var(--kl-fs-sm); color: var(--kl-ink-2);
}

/* ─────────────────────────────────────────────────────────────────────────
   9. WELKOMSTMODAL (cookie-consent.js)
   ───────────────────────────────────────────────────────────────────────── */
.kl-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(13,38,33,.62); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  font-family: var(--kl-font-ui);
}
.kl-modal-card {
  background: var(--kl-surface); border: 1px solid var(--kl-line);
  border-radius: var(--kl-r-xl); box-shadow: var(--kl-shadow-lg);
  max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto;
  padding: clamp(24px, 4vw, 34px);
}
.kl-modal-card h2 { font-size: 1.5rem; margin-block: var(--kl-3) var(--kl-3); }
.kl-modal-card hr { border: none; border-top: 1px solid var(--kl-line); margin-block: var(--kl-5); }
.kl-modal-intro { font-size: var(--kl-fs-sm); color: var(--kl-ink-3); }
.kl-modal-section-title {
  font-size: var(--kl-fs-label); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--kl-ink-3); margin-bottom: var(--kl-3);
}
.kl-modal-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--kl-3); }
.kl-modal-list li { display: flex; gap: 11px; align-items: flex-start; font-size: var(--kl-fs-sm); color: var(--kl-ink-2); line-height: 1.55; }
.kl-modal-list .kl-ico { width: 17px; height: 17px; margin-top: 3px; color: var(--kl-pine-600); }
.kl-modal-list strong { color: var(--kl-ink); font-weight: 600; }
.kl-modal-fields { display: flex; flex-direction: column; gap: 10px; }
.kl-modal-actions { display: flex; flex-direction: column; gap: var(--kl-2); align-items: center; }
.kl-modal-actions .kl-btn { width: 100%; max-width: 340px; }
.kl-link-quiet {
  background: none; border: none; padding: 4px 8px; cursor: pointer;
  font-family: inherit; font-size: var(--kl-fs-xs); color: var(--kl-ink-3); text-decoration: underline;
}
.kl-link-quiet:hover { color: var(--kl-ink); }

/* ─────────────────────────────────────────────────────────────────────────
   10. AFDRUKKEN — het rapport wordt regelmatig geprint of als PDF bewaard
   ───────────────────────────────────────────────────────────────────────── */
@media print {
  .kl-nav, .kl-footer, .kl-no-print { display: none !important; }
  body { background: #fff; }
  .kl-panel, .kl-card { break-inside: avoid; box-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #666; }
}