/* ==========================================================================
   page-onderwerpen.css — /nl/onderwerpen/, sjabloon page-onderwerpen.php
   Gebouwd 2026-09-18. Scope #cvonw, het id dat het sjabloon zelf uitzendt.

   Alleen tokens uit fable-tokens.css. Die staan op #cvchrome, de wrapper die
   header-fable.php opent en footer-fable.php sluit, dus ze gelden hier.
   Geen nieuwe kleuren, geen eigen lettergroottes buiten de schaal die
   page-tools-index.css al gebruikt — deze twee pagina's horen naast elkaar
   te kunnen staan zonder dat je ziet dat ze op verschillende dagen zijn
   gemaakt.
   ========================================================================== */

#cvonw *,#cvonw *::before,#cvonw *::after{box-sizing:border-box;}
#cvonw a:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:6px;}
#cvonw .wrap{max-width:1120px; margin:0 auto; padding:0 32px;}

/* ---------- kruimelpad ---------- */
#cvonw .crumb{font-size:13px; color:var(--muted); padding:26px 0 0;}
#cvonw .crumb a{color:var(--muted); text-decoration:none;}
#cvonw .crumb a:hover{color:var(--teal);}
#cvonw .crumb .cur{color:var(--ink-soft);}

/* ---------- hero ---------- */
#cvonw .hero{padding:26px 0 30px; border-bottom:1px solid var(--line);}
#cvonw .eyebrow{display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--teal-dark); text-transform:uppercase; margin-bottom:18px;}
#cvonw .eyebrow .dot{width:4px; height:4px; border-radius:50%; background:var(--copper);}
#cvonw h1{font-family:var(--serif); font-weight:400; font-size:clamp(34px,4.4vw,56px); line-height:1.04; letter-spacing:-.02em; color:var(--ink); margin:0 0 18px;}
#cvonw h1 em{font-style:italic; color:var(--teal);}
#cvonw .lede{font-size:clamp(16px,1.3vw,19px); line-height:1.6; color:var(--ink-soft); max-width:62ch; margin:0;}

/* ---------- kennisgebieden ----------
   Drie kolommen, want er zijn drie gebieden. Bloedsuiker komt bij golf 2
   terug als vierde; bij vier kaarten wordt dit 2x2 — zet de regel hieronder
   dan op repeat(2,1fr) en de 860px-media-query op 1fr. */
#cvonw .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding:30px 0 6px;}
#cvonw .area{background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; text-decoration:none; color:inherit; display:flex; flex-direction:column; box-shadow:0 2px 12px rgba(26,26,46,.05);}
@media (prefers-reduced-motion:no-preference){#cvonw .area{transition:box-shadow .2s ease, transform .2s ease;}}
#cvonw .area:hover{box-shadow:0 12px 30px rgba(26,26,46,.10); transform:translateY(-3px);}
#cvonw .area .ic{width:52px; height:52px; border-radius:13px; background:var(--teal-light); border:1px solid rgba(10,110,110,.15); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
#cvonw .area h2{font-family:var(--serif); font-weight:400; font-size:22px; line-height:1.2; letter-spacing:-.005em; margin:0 0 9px; color:var(--ink);}
#cvonw .area p{font-size:14.5px; line-height:1.55; color:var(--muted); margin:0 0 18px;}
#cvonw .area .open{margin-top:auto; font-size:14.5px; font-weight:700; color:var(--teal); display:inline-flex; align-items:center; gap:6px;}
#cvonw .area .arw{display:inline-block;}
@media (prefers-reduced-motion:no-preference){#cvonw .area .arw{transition:transform .2s ease;}}
#cvonw .area:hover .arw{transform:translateX(3px);}

/* ---------- slotnotitie ---------- */
#cvonw .note{max-width:70ch; margin:22px 0 56px; padding-top:20px; border-top:1px solid var(--line); font-size:14px; line-height:1.65; color:var(--muted);}

/* ---------- smal ---------- */
@media (max-width:860px){
  #cvonw .wrap{padding:0 20px;}
  #cvonw .grid{grid-template-columns:1fr; gap:18px;}
}