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

   Zelfde bouwstenen als page-onderwerpen.css: kruimelpad, hero, kaartraster,
   slotnotitie. Eén verschil, en dat is opzettelijk: de twee kaarten dragen
   een genummerde stap in plaats van een pictogram, omdat dit een volgorde is
   ("begin hier, lees dan dit") en geen keuzemenu. Alleen tokens uit
   fable-tokens.css.
   ========================================================================== */

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

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

/* ---------- hero ---------- */
#cvsth .hero{padding:26px 0 30px; border-bottom:1px solid var(--line);}
#cvsth .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;}
#cvsth .eyebrow .dot{width:4px; height:4px; border-radius:50%; background:var(--copper);}
#cvsth 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;}
#cvsth h1 em{font-style:italic; color:var(--teal);}
#cvsth .lede{font-size:clamp(16px,1.3vw,19px); line-height:1.6; color:var(--ink-soft); max-width:62ch; margin:0;}

/* ---------- de twee stappen ---------- */
#cvsth .grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; padding:30px 0 6px;}
#cvsth .step{background:#fff; border:1px solid var(--line); border-top:3px solid var(--teal); 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){#cvsth .step{transition:box-shadow .2s ease, transform .2s ease;}}
#cvsth .step:hover{box-shadow:0 12px 30px rgba(26,26,46,.10); transform:translateY(-3px);}
#cvsth .step .n{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--teal); color:#fff; font-size:15px; font-weight:700; margin-bottom:16px; flex:none;}
#cvsth .step h2{font-family:var(--serif); font-weight:400; font-size:23px; line-height:1.2; letter-spacing:-.005em; margin:0 0 9px; color:var(--ink);}
#cvsth .step p{font-size:15px; line-height:1.6; color:var(--muted); margin:0 0 18px;}
#cvsth .step .open{margin-top:auto; font-size:14.5px; font-weight:700; color:var(--teal); display:inline-flex; align-items:center; gap:6px;}
#cvsth .step .arw{display:inline-block;}
@media (prefers-reduced-motion:no-preference){#cvsth .step .arw{transition:transform .2s ease;}}
#cvsth .step:hover .arw{transform:translateX(3px);}

/* ---------- slotnotitie ---------- */
#cvsth .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){
  #cvsth .wrap{padding:0 20px;}
  #cvsth .grid{grid-template-columns:1fr; gap:18px;}
}