/* 4px ritme.

   De kleine maten (s1–s6) zijn vast: dat is ruimte bínnen een onderdeel — de
   afstand tussen een icoon en zijn tekst hoort niet van de vensterbreedte af te
   hangen. s7 en s9 schalen mee, want dat is ruimte tússen onderdelen, en die is
   op een telefoon anders dan op een breed scherm. Zelfde formule als bij de
   koppen: ondergrens (360px), meegroeiend deel, bovengrens (vanaf 1440px).

      token      360px   768px   1440px
      --hn-s7     24px    33px     48px
      --hn-s8     72px    72px     72px
      --hn-s9     80px    86px     96px
      --hn-section-y-tight   72px    63px     48px

   s8, de ruimte tussen secties, is op elk scherm 72px: op een telefoon staat alles
   gestapeld en is de witruimte de enige pauze tussen twee secties. Met 40px las de
   homepage als één doorlopende tekst. De krappe sectie (werkschermen) en de
   overgang van kopband naar inhoud krimpen naar 48px op een breed scherm, maar op
   een telefoon is elke sectieafstand dezelfde 72px (Ruud, 2026-09-19). */
:root{
  --hn-s1:0.25rem; --hn-s2:0.5rem;  --hn-s3:0.75rem;
  --hn-s4:1rem;    --hn-s5:1.5rem;  --hn-s6:2rem;
  --hn-s7:clamp(1.5rem, 1rem + 2.222vw, 3rem);
  --hn-s8:4.5rem;
  --hn-s9:clamp(5rem, 4.667rem + 1.481vw, 6rem);

  --hn-gutter:var(--hn-s5);
  --hn-container:1368px;    /* de v0-breedte (Ruud, 2026-09-03); was 1200px */
  --hn-container-narrow:774px;  /* leeskolom: 68ch op 18px (726px) plus tweemaal de zijrand — dezelfde tekstbreedte als een artikel en About (Ruud, 2026-09-17) */
  --hn-tap:44px;            /* minimum hit target */
  --hn-veld:48px;           /* één hoogte voor elk invoerveld, elke keuzelijst en elke knop (Ruud, 2026-09-17, 2026-09-19) */
  --hn-knop-lg:56px;        /* de grote knop: hero, boekingskaart, koopknop */
  /* De hoogte van de sticky header (balk + onderrand). Alles wat óók sticky is —
     filterbalk, totalenkaart, zijkolom — rekent hiermee zijn top uit, anders
     verdwijnt het achter de header. */
  --hn-kop:81px;
  --hn-section-y:var(--hn-s8);
  --hn-section-y-tight:clamp(3rem, 5rem - 2.222vw, 4.5rem);
}
/* Onder 900px is de balk 64px (wordpress.css). */
@media (width < 900px){:root{--hn-kop:65px}}
/* Op een telefoon 16px zijrand, de maat van Apple HIG en Material (Ruud, 2026-09-17). */
@media (width < 560px){:root{--hn-gutter:var(--hn-s4)}}