h1,h2,h3,h4{font-family:var(--font-heading);color:var(--text-heading);font-weight:var(--hn-weight-semibold);line-height:var(--hn-leading-tight);margin:0 0 var(--hn-s4);text-wrap:balance}
/* Grote koppen in Spectral regular — dunner oogt cleaner (v0-ronde, 2026-09-03).
   h3/h4 blijven semibold: klein serif verliest op regular zijn houvast tussen de
   leestekst. */
h1,h2{font-weight:var(--hn-weight-regular)}
/* De negatieve letterafstand hoort bij de maat: hoe groter de kop, hoe strakker.
   Zie de tabel in tokens/typography.css. */
h1{font-size:var(--hn-h1);letter-spacing:var(--hn-tracking-display);line-height:var(--hn-leading-display)}
h2{font-size:var(--hn-h2);letter-spacing:var(--hn-tracking-display);line-height:var(--hn-leading-display)}
h3{font-size:var(--hn-h3);letter-spacing:var(--hn-tracking-heading);line-height:var(--hn-leading-snug)}
h4{font-size:var(--hn-text);font-family:var(--font-body);font-weight:var(--hn-weight-bold)}
p,ul,ol{margin:0 0 var(--hn-s4);max-width:var(--hn-measure)}
li{margin-bottom:var(--hn-s2)}
strong{font-weight:var(--hn-weight-bold);color:var(--text-heading)}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--action-primary-hover);text-decoration-thickness:2px}
small,.hn-small{font-size:var(--hn-ui)}
/* Interface-onderdelen lezen niet, ze tonen: kortere regelafstand. */
.hn-product,.hn-cart,.hn-summary,.hn-notice,.hn-qty,.hn-header,.hn-breadcrumbs,.hn-input,.hn-select,.hn-textarea,.hn-check,.hn-filters,.hn-chip,.hn-tag{line-height:var(--hn-leading-ui)}
.hn-label{font-family:var(--font-body);font-size:var(--hn-label);font-weight:var(--hn-weight-bold);letter-spacing:var(--hn-tracking);text-transform:uppercase;color:var(--text-muted)}
.hn-lede{font-family:var(--font-heading);font-size:var(--hn-h3);line-height:1.5;color:var(--text-body);max-width:34em}
.hn-measure{max-width:var(--hn-measure)}
.hn-muted{color:var(--text-muted)}
/* Het sectielabel is groen, niet blauw (Ruud, 31 aug 2026). Twee redenen: het
   logogroen kwam op de hele pagina nergens terug, en het merkblauw is de kleur
   van een link — een label is niet aanklikbaar en beloofde dus iets wat het niet
   doet. Nu is de verdeling: blauw = je kunt erop klikken, groen = de merkkleur.
   Op de papiergrond haalt --hn-leaf 5.94:1. Op een donkere band kan dit groen
   niet (1.52:1); daar staat --hn-leaf-bright, zie .hn-band--inverse .hn-eyebrow. */
.hn-eyebrow{display:block;font-size:var(--hn-ui);font-weight:var(--hn-weight-bold);letter-spacing:var(--hn-tracking);text-transform:uppercase;color:var(--hn-leaf);margin-bottom:var(--hn-s3)}
/* Op een telefoon een stap kleiner (Ruud, 2026-09-11): daar stonden kicker en kop te dicht bij elkaar in maat. */
@media (width < 768px){.hn-eyebrow{font-size:var(--hn-label)}}
.hn-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}