/* ============================================================
   financielezaken.nl — assets/style.css
   Eén stylesheet voor de hele site. Tokens eerst, dan basis,
   dan componenten. Kleuren en typografie komen uit het ontwerp
   (Financielezaken v2), niet uit een extern design system.
   ============================================================ */
/* ---- 0. Lettertypen, op ons eigen domein -------------------------
   Negen faces, latin-subset, samen 180 kB. Een browser haalt alleen de
   faces op die een pagina echt gebruikt, en bewaart ze een jaar
   (.htaccess: ExpiresByType font/woff2 "access plus 1 year").

   Sinds 19 september 2026 is dit IBM Plex, één familie voor tekst, koppen
   en cijfers. Daarvoor stonden hier Inter, Instrument Serif en JetBrains
   Mono. Die drie samen zijn inmiddels de standaardcombinatie van elke
   automatisch gegenereerde website, en dat zag de eigenaar ook: de site
   las hierdoor als een sjabloon in plaats van als een kantoor. IBM Plex is
   ontworpen voor bedrijfscommunicatie, heeft een eigen hand (kijk naar de
   a en de g) en een serif en een mono die er echt bij horen. De oude
   bestanden staan in archief/fonts-inter-2026-09/.

   font-display: swap laat de tekst meteen zien in de fallback en
   wisselt om zodra de webfont er is. Zonder die regel blijft de tekst
   onzichtbaar tot het lettertype geladen is.

   Bron: @fontsource, dezelfde bestanden die Google Fonts serveert,
   onder de SIL Open Font License. Geen verbinding met Google meer. */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-serif-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-serif-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-serif-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

/* ---- 1. Tokens --------------------------------------------- */
:root {
  /* Basis */
  --bg:           #F6F8FB;
  --surface:      #EEF2F7;
  --border:       #DDE5EE;
  --border-2:     #C5D0DC;

  /* Tekst */
  --ink:          #061729;
  --ink-2:        #28354A;
  --ink-3:        #44546A;
  --ink-4:        #5D6B7E;   /* eis 14: 5,10 op --bg, 4,83 op --surface, 4,65 op --brand-tint */
  --ink-5:        #94A3B5;

  /* Merk (teal) */
  --brand:        #1F9E8A;
  --brand-dark:   #188674;
  --brand-ink:    #0F6B5C;
  --brand-tint:   #DDF2EE;
  /* Knopvulling: #188473 met wit label haalt 4,58:1 en voldoet daarmee aan
     WCAG AA voor tekst van 15px. Was #1F9E8A (3,32:1) en daarna kort #188674,
     dat met 4,47:1 net onder de eis bleef. Gewijzigd op verzoek van de
     eigenaar op 6 september 2026. --brand zelf blijft ongewijzigd. */
  --brand-knop:   #188473;
  --brand-knop-tekst: #FFFFFF;
  --brand-200:    #7FD6C6;
  --brand-300:    #9BCDC3;
  --brand-400:    #4DB6A3;

  /* Link (blauw) */
  --link:         #296EA5;
  --link-200:     #7FB8E0;
  --link-tint:    #E7F0F8;

  /* Signaal (fouten) */
  --signal:       #B04A42;

  /* Typografie */
  --font-ui:      'IBM Plex Sans', system-ui, sans-serif;
  --font-display: 'IBM Plex Serif', Georgia, serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Typeschaal, drie registers */
  --tekst-display:  clamp(36px, 6.5vw, 56px);   /* h1, IBM Plex Serif */
  --tekst-kop:      clamp(30px, 5vw, 44px);     /* h2, IBM Plex Serif */
  --tekst-subkop:   22px;                        /* h3, Inter 600 */
  --tekst-body:     17px;
  --tekst-klein:    14px;
  --tekst-micro:    12px;

  /* Spacingritme */
  --ruimte-1: 4px;
  --ruimte-2: 8px;
  --ruimte-3: 12px;
  --ruimte-4: 16px;
  --ruimte-5: 24px;
  --ruimte-6: 32px;
  --ruimte-7: 48px;
  --ruimte-8: 64px;
  --ruimte-9: 96px;

  /* Vorm */
  --radius-klein: 10px;
  --radius-kaart: 14px;
  --radius-pil:   999px;
}

/* ---- 2. Basis ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: var(--tekst-body);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  /* Woorden als kleineondernemersregeling passen op een telefoon niet op één
     regel en duwden de hele pagina scheef. */
  overflow-wrap: break-word;
  color: var(--ink);
  margin: 0 0 var(--ruimte-4);
  text-wrap: pretty;
}
h1 { font-size: var(--tekst-display); }
h2 { font-size: var(--tekst-kop); }
h3 { font-size: var(--tekst-subkop); font-weight: 600; color: var(--ink); margin: 0 0 var(--ruimte-2); overflow-wrap: break-word; }
/* Het opschrift van de terugbelkaart is geen sectiekop maar een formulierkop:
   als h3 sloeg hij op de homepage een niveau over. Zelfde weergave als de h3
   die hij vervangt: Inter 22px/600, --ink, 8px marge onder. */
.formulierkop {
  font-family: var(--font-ui);
  font-size: var(--tekst-subkop);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--ruimte-2);
  max-width: none;
}
/* In het CTA-blok wint .cta-blok p (witte tekst) anders op specificiteit van
   .formulierkop; op de witte terugbelkaart moet de kop gewoon --ink blijven. */
.cta-blok .terugbelblok .formulierkop { color: var(--ink); }
h4 { font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 var(--ruimte-2); }

/* Anker- en overslaan-links landen anders achter de plakkende header. De drie
   waarden volgen de hoogte van de header: 73px normaal, 137px als het menu op
   een eigen regel staat, 129px als de knoppen op een telefoon omslaan. */
[id] { scroll-margin-top: 89px; }
@media (max-width: 1220px) and (min-width: 901px) { [id] { scroll-margin-top: 153px; } }
@media (max-width: 767px) { [id] { scroll-margin-top: 145px; } }

p { margin: 0 0 var(--ruimte-4); max-width: 60ch; }
ul, ol { margin: 0 0 var(--ruimte-4); padding-left: 22px; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

strong { color: var(--ink); }

img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 40px);
  padding-right: clamp(20px, 5vw, 40px);
}

section { padding: clamp(48px, 9vw, 88px) 0; }

.oogmerk {  /* klein label boven een kop */
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-ink); /* eis 14: --link haalt op --bg net geen 4,5:1 */
  margin-bottom: var(--ruimte-3);
}

.mono { font-family: var(--font-mono); }

/* ---- 2b. Afgeleide tekststijlen (opruimactie inline styles) ---------- */
.lead { font-size: 18px; max-width: 60ch; }             /* introalinea onder de h1 */
.sectiekop { font-family: var(--font-ui); font-size: 26px; font-weight: 600; letter-spacing: 0; } /* h2 in het UI-register */
.doc-titel { font-size: clamp(30px, 5.5vw, 48px); }      /* h1 in juridische documenten */
.doc-kop { font-family: var(--font-ui); font-size: 21px; font-weight: 600; letter-spacing: 0; margin: 36px 0 12px; } /* h2 in juridische documenten */
.doc-datum { font-size: 14px; color: var(--ink-4); }    /* "laatst bijgewerkt"-regel onder een documenttitel */
.doc-tekst { font-size: 16px; max-width: 66ch; }        /* documentalinea */
.noot { font-size: 13px; color: var(--ink-3); }         /* kleine gedempte noot; eis 14: --ink-4 haalt geen AA op --bg */
.metarij { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0; max-width: none; } /* badge + datum boven een kaartkop */
.dienstkaart h3.kaartkop { font-size: 19px; line-height: 1.35; } /* artikeltitel op een kaart */
.stappenrij .nodig { margin: 8px 0 0; font-size: 14px; color: var(--ink-4); } /* "Van jou nodig"-regel */

/* ---- 3. Toegankelijkheid ------------------------------------ */
.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-klein) 0;
}
.skiplink:focus {
  left: 0;
  text-decoration: none;
}

.honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- 4. Knoppen ---------------------------------------------- */
.knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 22px;
  border: 0;
  border-radius: var(--radius-pil);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms cubic-bezier(0.22, 0.61, 0.36, 1), color 140ms;
  text-decoration: none;
}
.knop:hover { text-decoration: none; }

/* Knopvulling --brand-knop met wit label haalt 4,58:1 en voldoet aan eis 14.
   Zie de toelichting bij het token; de waarde staat daar en nergens anders.
   Hover donkerder via brightness, wat het contrast verder verhoogt. */
.knop-primair { background: var(--brand-knop); color: var(--brand-knop-tekst); }
.knop-primair:hover { background: var(--brand-knop); color: var(--brand-knop-tekst); filter: brightness(0.92); }

.knop-secundair {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--border-2);
}
.knop-secundair:hover { background: var(--surface); }

.cta-blok .knop-secundair {
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}
.cta-blok .knop-secundair:hover { background: rgba(255,255,255,0.08); }

/* ---- 5. Header en navigatie ---------------------------------- */
.site-header {
  background: rgba(246, 248, 251, 0.94);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
}
/* De kopbalk mag breder zijn dan de tekstkolom eronder (1200px). Met IBM Plex
   passen logo, zes menu-items, het belicoon en twee knoppen niet meer binnen
   1200px op één regel; in plaats van de letters kleiner te knijpen krijgt
   alleen de balk 1340px. De inhoud eronder blijft op leesbreedte staan. */
.site-header .wrap {
  max-width: 1340px;
  display: flex;
  align-items: center;
  gap: var(--ruimte-5);
  min-height: 72px;
  flex-wrap: wrap;
  padding-top: var(--ruimte-2);
  padding-bottom: var(--ruimte-2);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.logo:hover { text-decoration: none; }
/* Op het brede scherm blijft de knop smal en past er geen pijl bij; de
   mediaquery voor 900px zet hem aan. Deze regel staat bewust vóór die query,
   want anders wint hij op volgorde en blijft de pijl overal verborgen. */
.knop-pijl { display: none; }
/* Beeldmerk naast de naam: drie oplopende staven, zonder vlak eromheen
   (ontwerp van de eigenaar, 22 september 2026). De drie kleuren zijn uit dat
   ontwerp overgenomen: twee keer hetzelfde middenteal en een donkere voor de
   hoogste staaf. De favicon houdt wél zijn vlak: als app-icoon moet een
   beeldmerk een eigen vorm hebben, anders valt het weg op een donkere
   achtergrond. */
.logo-merk { width: 29px; height: 30px; flex: 0 0 auto; }
.logo-merk .staaf-1 { fill: #0FA18C; }
.logo-merk .staaf-2 { fill: #0A9A87; }
.logo-merk .staaf-3 { fill: #077E6E; }
/* Onderschrift onder de naam. Stond er sinds 20 september alleen op smalle
   schermen; in het ontwerp van 22 september staat het er op elke breedte, en
   het is de tagline van het kantoor geworden in plaats van de soortnaam. */
.logo-naam { display: inline-flex; flex-direction: column; line-height: 1.05; }
.logo-sub {
  display: block;
  font-family: var(--font-basis);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.145em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 4px;
}
@media (max-width: 900px) { .logo-sub { font-size: 9px; letter-spacing: 0.13em; } }

.hoofdmenu { flex: 1; }
.hoofdmenu > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.hoofdmenu > ul > li { position: relative; }
.hoofdmenu > ul > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.hoofdmenu > ul > li > a:hover { color: var(--ink); text-decoration: none; }
.hoofdmenu li.actief > a {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--brand);
}

.submenu {
  list-style: none;
  margin: 0;
  padding: var(--ruimte-2);
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-klein);
  box-shadow: 0 18px 40px rgba(6, 23, 41, 0.12);
  display: none;
  z-index: 60;
}
.hoofdmenu li:hover > .submenu,
.hoofdmenu li:focus-within > .submenu { display: block; }
.submenu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.submenu a:hover { background: var(--surface); color: var(--ink); text-decoration: none; }

.header-acties { display: flex; gap: var(--ruimte-3); align-items: center; }

/* Belknop in de balk (19 september 2026): alleen het icoon, geen cijfers. Geen
   knopvorm, want het is een derde mogelijkheid naast terugbellen en het
   intakegesprek en drie knoppen naast elkaar maken de balk onrustig. Het
   vierkant van 44 bij 44 is het aanraakvlak (WCAG 2.2, 2.5.8). */
.kop-tel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: var(--ink-2);
}
.kop-tel:hover { color: var(--brand-ink); text-decoration: none; }
.kop-tel svg { flex: 0 0 auto; }

/* Logo, zes menu-items, het belicoon en twee knoppen passen samen tot 1260px
   op één regel; daaronder zakt het menu naar een eigen regel.

   De grens stond even op 1500px, toen het telefoonnummer nog voluit in de balk
   stond en het menu daardoor zelf in tweeën brak. Sinds er alleen een belicoon
   staat (44px in plaats van ongeveer 160px) kan de grens weer omlaag; 1260 in
   plaats van de oorspronkelijke 1220, omdat IBM Plex Sans iets breder is dan
   het vorige lettertype. */
@media (max-width: 1420px) {
  .site-header .wrap { align-items: center; }
  .hoofdmenu { order: 3; flex-basis: 100%; padding-bottom: var(--ruimte-2); }
  .header-acties { margin-left: auto; }
  .knop { font-size: 14px; padding: 10px 18px; }
}
/* Menuknop: alleen zichtbaar onder 900px en alleen als JavaScript aanstaat.
   Zonder JavaScript blijft het hele menu uitgeklapt staan, zoals hiervoor, zodat
   crawlers en bezoekers zonder script alle links houden. */
.menuknop {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  font: 500 14px/1 var(--font-ui);
  cursor: pointer;
}
.menuknop:hover { color: var(--ink); border-color: var(--border-2); }
/* De korte knopteksten voor telefoons staan standaard uit; de media query op
   560px wisselt "Gratis intakegesprek" om voor "Intakegesprek", die op 380px
   voor "Intake". */
.kop-kort, .kop-mini { display: none; }
/* Het hamburgericoon: drie even dikke staven met gelijke tussenruimte. Tot
   19 september was het blokje 10px hoog met de middelste staaf op 3px, en dan
   plakken de onderste twee tegen elkaar: dat leest als een dikke veeg in plaats
   van een menu. Nu 12px hoog (border-box: 8px binnenruimte) met de middelste
   precies in het midden, dus twee gaten van 3px. */
.menuknop .streep {
  display: block; box-sizing: border-box;
  width: 18px; height: 12px; position: relative;
  border-top: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
.menuknop .streep::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  margin-top: -1px; border-top: 2px solid currentColor;
}
@media (max-width: 900px) {
  .submenu { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 0 var(--ruimte-3); min-width: 0; background: transparent; }
  /* Onder 900px is het menu een verticale lijst, geen rij die omslaat: anders
     komen Tarieven en Werkwijze naast Voor wie te staan. */
  .hoofdmenu > ul { display: block; }
  .hoofdmenu > ul > li { border-top: 1px solid var(--border); }
  .hoofdmenu > ul > li:first-child { border-top: 0; }
  .hoofdmenu > ul > li > a { display: flex; padding: 10px 0; font-weight: 600; }
  .hoofdmenu { order: 5; padding-top: var(--ruimte-2); border-top: 1px solid var(--border); }
  /* De menuknop staat rechts, als laatste in de balk. Hij stond eerst direct
     naast het logo (order 2), maar onder 900px vallen de knoppen uit
     .header-acties weg en onder 560px (19 tot 30 september) ook het belicoon; dan bleef de hamburger
     midden in de balk hangen met een gat ernaast. Nu duwt de auto-marge van
     .header-acties beide naar rechts en staat het icoon in de hoek, op dezelfde
     kantlijn als het logo links. */
  .header-acties { order: 3; margin-left: auto; }
  .menuknop { order: 4; }
  .js .menuknop { display: inline-flex; }
  /* Ronde knop met alleen het hamburgericoon, uit het mobiele ontwerp van
     20 september. 44x44 is de minimummaat voor een raakdoel (WCAG 2.5.8); de
     naam "Menu" blijft in het aria-label staan. */
  .menuknop {
    width: 46px; height: 46px; padding: 0;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(6,23,41,0.10);
  }
  .menuknop-tekst { display: none; }
  /* Het belicoon krijgt dezelfde ronde vorm en maat als de menuknop, zodat de
     twee rechts in de balk één paar vormen (eigenaar, 30 september). De
     knoppen in .header-acties zijn hier al weg, dus het icoon staat alleen in
     die cel en de cel duwt beide naar rechts. */
  .kop-tel {
    width: 46px; height: 46px;
    border: 1px solid var(--border); border-radius: 999px;
    background: #fff; color: var(--brand-ink);
    box-shadow: 0 1px 3px rgba(6,23,41,0.10);
  }
  /* Op een telefoon voert de knop in de hero de actie aan; twee knoppen in de
     balk erbij maakt drie oproepen boven elkaar. Het belicoon blijft wel
     staan: dat zette de eigenaar er op 19 september bewust in. */
  .header-acties .knop { display: none; }
  .js .hoofdmenu { display: none; }
  .js .hoofdmenu.open { display: block; }
}
/* Op een telefoon passen logo, menuknop en twee knoppen niet naast elkaar. De
   tweede knop verdwijnt uit de balk; terugbellen staat op elke pagina al in het
   formulier waar hij naar verwijst.

   Sinds 6 september staat de balk op één rij in plaats van twee (verzoek van de
   eigenaar): logo, menuknop en één knop passen samen binnen 350px doordat de
   maten krimpen en het woord "Gratis" in de knop visueel wegvalt. Het staat er
   nog wel voor schermlezers, dus de knop blijft "Gratis intakegesprek" heten.
   Dat scheelt ongeveer 55px boven de vouw. */
@media (max-width: 560px) {
  /* Belicoon op de telefoon naast de menuknop (eigenaar, 30 september: "er is
     geen bel-icon naast menu"). Tussen 19 en 30 september stond het hier
     bewust niet. De ronde vorm staat in de 900px-query hierboven. */
  .site-header .wrap { gap: 10px; min-height: 60px; flex-wrap: nowrap; }
  .header-acties .knop-secundair { display: none; }
  .header-acties { gap: 0; }
  .logo { font-size: 19px; gap: 8px; }
  .logo-merk { width: 25px; height: 26px; }
  .menuknop { padding: 9px 13px; font-size: 13px; gap: 7px; min-height: 44px; }
  .header-acties .knop { font-size: 13px; padding: 9px 14px; min-height: 44px; white-space: nowrap; }
  /* Alleen het hamburgericoon; de knop blijft "Menu" heten via aria-label. */
  .menuknop-tekst { display: none; }
  .menuknop { padding: 9px 12px; gap: 0; }
  /* De lange knoptekst blijft in de toegankelijkheidsboom staan, de korte is
     wat je ziet. Andersom zou de knop op een telefoon anders heten dan hij
     wordt voorgelezen. */
  .kop-lang {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  /* "Intake", niet "Intakegesprek": IBM Plex Sans is breder dan Inter en het
     langere woord past op een telefoon van 390px niet (gemeten met
     .tools/mobiel-check.py). Dat de balk sinds 19 september ook nog het
     belicoon droeg maakte het erger, maar zonder dat icoon past het volle
     woord er nog steeds niet bij: opnieuw gemeten na het weghalen ervan.
     De knop blijft voor schermlezers "Gratis intakegesprek" heten. */
  .kop-mini { display: inline; }
  /* Het geopende menu hangt onder de balk in plaats van ernaast: door de
     nowrap hierboven kan het geen eigen regel meer krijgen, en zonder deze
     regel wordt het een vierde item op dezelfde rij en verdwijnen de links.
     .site-header is sticky en daarmee het positioneringskader. */
  .js .hoofdmenu.open {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: var(--ruimte-3) clamp(20px, 5vw, 40px) var(--ruimte-4);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    box-shadow: 0 18px 40px rgba(6, 23, 41, 0.12);
  }
}

/* Onder 380px (oude iPhone SE, telefoons met grote systeemletters) is er voor
   logo, menuknop, telefoon en knop naast elkaar echt te weinig plek. Alles
   krimpt dan nog een slag en de knop heet alleen nog "Intake"; de
   aanraakvlakken blijven 44px hoog en de knop blijft voor schermlezers
   "Gratis intakegesprek" heten. */
@media (max-width: 380px) {
  .site-header .wrap { gap: 7px; padding-left: 12px; padding-right: 12px; }
  .logo { font-size: 17px; gap: 6px; }
  .logo-merk { width: 22px; height: 23px; }
  /* Onder 380px is er naast de naam geen ruimte meer voor een tagline van
     28 letters met spatiëring; dan wint de naam. */
  .logo-sub { display: none; }
  .menuknop { padding: 9px 10px; }
  .header-acties { gap: 6px; }
  .header-acties .knop { font-size: 12.5px; padding: 9px 11px; }
}

/* Alleen voor schermlezers: de cel is in beeld leeg, maar wordt voorgelezen. */
.visueel-verborgen {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- 6. Kruimelpad -------------------------------------------- */
.kruimelpad { border-bottom: 1px solid var(--border); background: var(--bg); }
.kruimelpad ol {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
  font-size: 13.5px;
}
.kruimelpad li { display: flex; align-items: center; gap: var(--ruimte-2); }
/* Het scheidingsteken stond op --ink-5 (#94A3B5), ongeveer 2,4:1 op --bg. Dat
   haalt WCAG 2.2 AA succescriterium 1.4.3 niet. Of een schuine streep tussen
   twee kruimels "pure decoratie" is, is een twijfelgeval, en de toetsprompt
   schrijft voor dat je bij twijfel de strengere lezing neemt. Sinds
   19 september 2026 --ink-4 (5,10:1). Dit was de enige plek waar --ink-5 werd
   gebruikt; de variabele blijft staan voor toekomstig gebruik. */
.kruimelpad li + li::before { content: "/"; color: var(--ink-4); }
.kruimelpad a { color: var(--ink-3); } /* eis 14: --ink-4 op --bg is ~4,4:1 */
.kruimelpad a:hover { color: var(--ink); }
.kruimelpad [aria-current="page"] { color: var(--ink); font-weight: 500; }

/* ---- 7. Antwoordblok ------------------------------------------ */
.antwoordblok {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-klein);
  padding: var(--ruimte-5) clamp(20px, 3vw, 28px);
  margin: 0 0 var(--ruimte-6);
  max-width: 62ch;
}
.antwoordblok p {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.antwoordblok p + p { margin-top: var(--ruimte-3); }
/* Op de mintsectie oogt het koele grijs van --surface vuil; daar staat het
   blok op wit met een randje in de merkkleur. */
.tintvlak .antwoordblok { background: #fff; border-color: var(--brand-200); }

/* ---- 7b. Inhoudsopgave (doc 06: verplicht boven 1.000 woorden) -------- */
.inhoudsopgave {
  display: block;
  border-left: 2px solid var(--brand-400);
  padding: 2px 0 2px var(--ruimte-5);
  margin: var(--ruimte-5) 0 var(--ruimte-6);
  max-width: 62ch;
}
.inhoudsopgave .titel {
  margin: 0 0 var(--ruimte-3);
  font-size: var(--tekst-micro);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.inhoudsopgave ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  counter-reset: io;
}
.inhoudsopgave li { display: flex; gap: 10px; font-size: 15.5px; counter-increment: io; }
.inhoudsopgave li::before {
  content: counter(io) ".";
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-4);
  padding-top: 2px;
}

/* ---- 7c. Paginakop met beeld ------------------------------------------
   Op de dienst-, doelgroep- en regiopagina's stond het bovenstuk (kicker, h1,
   antwoordblok, knoppen, inhoudsopgave) links en was rechts leeg: op een breed
   scherm oogde dat kaal (eigenaar, 13 september). Nu twee kolommen: rechts de
   eerste foto van de pagina, verplaatst uit de tekst, en daaronder de
   inhoudsopgave als kaart. Onder 860px stapelt het weer. */
.kop-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.kop-tekst > :last-child { margin-bottom: 0; }
.kop-zij { display: grid; gap: var(--ruimte-5); }
.kop-zij .figuur { margin: 0; }
/* Drie klassen diep, zodat dit wint van .figuur.staand en .figuur.breed uit
   sectie 28: de verplaatste foto krijgt hier altijd de kolomverhouding. */
/* 3:2 met inhoudsopgave eronder, staand zonder: zo blijft de rechterkolom
   ongeveer even hoog als de tekstkolom links en ontstaat er geen lege ruimte
   onder de knoppen (eigenaar, 13 september). */
.kop-raster .kop-zij .figuur img { aspect-ratio: 3 / 2; }
.kop-raster .kop-zij.zonder-io .figuur img { aspect-ratio: 4 / 3; } /* was 4:5 tot 29 september, zie sectie 34 */
/* Inhoudsopgave in de kaart in twee kolommen zodra er ruimte is: zeven regels
   worden er vier. */
/* Eén kolom, ook al lijkt er ruimte voor twee: zie de toelichting verderop bij
   de kaartvariant. */
.inhoudsopgave.kaart ol { grid-template-columns: 1fr; }
.inhoudsopgave.kaart li { align-items: flex-start; }
/* Variant met een formulier rechts (offerte, contact): bredere rechterkolom,
   want een select en een rij aankruisvakjes hebben meer ruimte nodig dan een
   foto. */
.kop-raster.formulier { grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); }
.kop-raster.formulier .terugbelblok { box-shadow: 0 18px 40px rgba(6,23,41,0.10), 0 4px 8px rgba(6,23,41,0.05); }
.inhoudsopgave.kaart {
  border-left: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-kaart);
  padding: var(--ruimte-5) var(--ruimte-6);
  margin: 0;
  max-width: none;
}
.inhoudsopgave.kaart .titel { color: var(--brand-ink); }
/* De rechterkolom was op 36 pagina's hoger dan de tekst links, tot 300px toe,
   en dat leest als een gat onder de knoppen (eigenaar, 13 september). De foto
   legt zijn eigen hoogte nu niet meer op: de rij mag tot 190px krimpen
   (minmax) en de foto vult wat er overblijft, met object-fit cover. De
   inhoudsopgave houdt zijn eigen hoogte. Zo bepaalt de tekst links de hoogte
   van het blok. Alleen op een breed scherm; gestapeld is er geen kolom om
   naar te schikken. */
@media (min-width: 861px) {
  /* Alleen nog voor een kop mét inhoudsopgave in de zijkolom. Een kop met
     alleen een foto (zonder-io) staat sinds 29 september verticaal gecentreerd
     met een vaste 4:3-foto, zie sectie 34. */
  .kop-raster:has(.kop-zij:not(.zonder-io) > .figuur) { align-items: stretch; }
  .kop-zij:not(.zonder-io):has(> .figuur) { grid-template-rows: minmax(190px, 1fr) auto; }
  .kop-zij > .figuur { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; min-height: 0; }
  .kop-raster .kop-zij:not(.zonder-io) > .figuur img { aspect-ratio: auto; height: 100%; object-fit: cover; }
  .kop-zij > .figuur figcaption { margin-top: 0; }
  /* Een formulier kan niet meegroeien met de tekst. Daar staat de tekst dus
     verticaal in het midden naast het formulier, zodat het wit boven en onder
     gelijk is in plaats van als gat onderaan te vallen. */
  .kop-raster.formulier { align-items: center; }
}

@media (max-width: 860px) {
  /* Ook de formuliervariant: die is specifieker en zou anders op een telefoon
     twee kolommen houden, met de tekst tot één letter per regel geknepen
     (gezien op /offerte-aanvragen/, 13 september). */
  /* minmax(0, 1fr) en niet 1fr: een rasterkolom is standaard minstens zo breed
     als het langste ondeelbare woord. "kleineondernemersregeling" in een h1
     maakte de kolom daardoor 475px op een scherm van 390 — zichtbaar sinds
     IBM Plex Serif, dat breder is dan het vorige lettertype. Met een minimum
     van 0 mag de kolom krimpen en breekt het woord af, wat de overflow-wrap
     op h1 en h2 al toestond. */
  .kop-raster, .kop-raster.formulier { grid-template-columns: minmax(0, 1fr); }
  .kop-raster .kop-zij .figuur img { aspect-ratio: 3 / 2; }
  .kop-raster .kop-zij.zonder-io .figuur img { aspect-ratio: 4 / 3; }
}

/* ---- 7d. Prijsnoot en keuzeraster (naast een formulier) -----------------
   De bedragen naast het offerteformulier, zodat je ze ziet terwijl je invult.
   Het keuzeraster zet de aankruisvakjes in twee kolommen, wat het formulier
   ruim 150px korter maakt; met acht opties onder elkaar liep het ver voorbij
   de tekst ernaast (eigenaar, 13 september). */
.prijsnoot {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-kaart);
  padding: var(--ruimte-5);
  margin: 24px 0 0;
  max-width: 46ch;
}
.prijsnoot .titel {
  margin: 0 0 12px;
  font-size: var(--tekst-micro);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.prijsnoot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.prijsnoot li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 15px;
  color: var(--ink-3);
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.prijsnoot li:last-child { border-bottom: 0; padding-bottom: 0; }
.prijsnoot li .mono { white-space: nowrap; color: var(--ink); }
.prijsnoot .noot { margin: 14px 0 0; }
@media (min-width: 861px) {
  .keuzeraster { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
}

/* ---- 8. Prijstabel --------------------------------------------- */
.prijstabel {
  width: 100%;
  max-width: 720px;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-klein);
  overflow: hidden;
  margin: 0 0 var(--ruimte-5);
}
.prijstabel th, .prijstabel td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 15.5px;
}
.prijstabel thead th {
  font-size: var(--tekst-micro);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-ink); /* eis 14 */
  background: var(--bg);
}
.prijstabel tbody tr:last-child td { border-bottom: 0; }
.prijstabel .num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
/* De kolomkop boven een cijferkolom hoort hetzelfde lettertype te hebben als
   de andere koppen in dezelfde rij; alleen de cellen eronder zijn mono. Zonder
   deze regel stond "PRIJS" of "PER MAAND" in een ander lettertype dan "WAT"
   ernaast (de pakkettabel deed dit al goed). */
.prijstabel thead th.num { font-family: var(--font-ui); }

/* Sectie 8b hield de balanstabel in de hero overeind; die is op 13 september
   op verzoek van de eigenaar van de homepage gehaald en de opmaak ervan is
   daarmee vervallen. */
/* 14,5px op --ink-3 sinds 19 september 2026. In de tabelvoet staat de nuance
   die de tabel draagt: het peiljaar, de bron en het voorbehoud bij een
   rekenvoorbeeld. Op 13,5px in --ink-4 was dat de kleinste en lichtste letter
   van de pagina, terwijl het de zwaarste inhoud is (toetsrapport
   startersaftrek). Het contrast haalde AA al; dit gaat over leesbaarheid. */
.prijstabel tfoot td { font-size: 14.5px; color: var(--ink-3); background: var(--bg); border-bottom: 0; }

/* ---- 9. Dienstkaart --------------------------------------------- */
.dienstkaart {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-kaart);
  padding: var(--ruimte-6);
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-3);
}
.dienstkaart .nummer {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--brand-ink); /* eis 14: --brand haalt geen AA op wit */
}
.dienstkaart h3 { margin: 0; font-size: 20px; }
.dienstkaart p { margin: 0; font-size: 15.5px; color: var(--ink-3); }
.dienstkaart .tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
}
.dienstkaart .tags li {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--brand-ink);
  background: var(--brand-tint);
  border-radius: var(--radius-pil);
  padding: 5px 12px;
}
.dienstkaart .prijs {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--brand-ink); /* eis 14 */
}
/* auto-fit laat lege sporen instorten (auto-fill hield ze open, waardoor vier
   kaarten 3+1 gaten gaven). Sinds 5 sep 2026 rekken de sporen tot 1fr: de
   kaarten vullen de hele contentbreedte en delen hun linkerkant met de kop en
   de introtekst erboven, in plaats van als smallere gecentreerde groep los van
   het grid te zweven. */
.kaartraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ruimte-5);
  margin: 0 0 var(--ruimte-5);
}

/* ---- 10. Termijnkaart -------------------------------------------- */
.termijnkaart {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-klein);
  padding: var(--ruimte-5);
  max-width: 340px;
}
.termijnkaart time {
  display: block;
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--ink);
  margin-bottom: var(--ruimte-1);
}
.termijnkaart .termijn-label {
  display: block;
  font-size: var(--tekst-micro);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-ink); /* eis 14 */
  margin-bottom: var(--ruimte-2);
}
.termijnkaart p { margin: 0; font-size: 14.5px; color: var(--ink-4); }

/* ---- 11. Stappenrij ------------------------------------------------ */
.stappenrij {
  list-style: none;
  margin: 0 0 var(--ruimte-5);
  padding: 0;
  display: grid;
  gap: var(--ruimte-4);
  counter-reset: stap;
}
.stappenrij li {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-klein);
  padding: var(--ruimte-5);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ruimte-4);
}
.stappenrij .stap-num {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--brand-ink); /* eis 14 */
}
.stappenrij h3 { font-size: 18px; margin: 0 0 var(--ruimte-1); }
/* Tijdlabel als pill die de tekst volgt (29 september 2026, eigenaar: het
   label rekte uit tot een balk over de hele kolom). Binnen het subgrid
   hieronder is het label een grid-item en rekt het standaard uit; justify-self
   en align-self houden het compact. Ruimte boven (h3-marge 4 + 4) en onder (8)
   is gelijk. */
.stappenrij .wanneer {
  display: inline-block;
  justify-self: start;
  align-self: start;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--brand-ink);
  background: var(--brand-tint);
  border-radius: var(--radius-pil);
  padding: 4px 10px;
  margin: var(--ruimte-1) 0 var(--ruimte-2);
}
.stappenrij p { margin: 0; font-size: 15px; color: var(--ink-3); }

/* Kaarten in één rij op dezelfde hoogte laten beginnen, regel voor regel.
   Zonder dit schuift alles onder een kop van twee regels 30px omlaag ten
   opzichte van de buren, en dan staan de tijdlabels ("Dag 1", "Week 1 tot 3")
   niet meer op één lijn. Gezien door de eigenaar op 22 september 2026 en
   nagemeten met .tools/uitlijning.py: 30px op vier pagina's.

   Vier rijen, want elke kaart op de site heeft dezelfde vier onderdelen:
   icoonvlak, kop, tijdlabel, tekst. Het volgnummer links staat naast alle
   vier. De gutters van de ouder gelden ook binnen een subgrid, dus die zet ik
   hier op nul; de afstanden komen van de marges die er al waren.

   @supports eromheen: een browser zonder subgrid negeert het hele blok en
   krijgt precies de opmaak van hiervoor. */
@supports (grid-template-rows: subgrid) {
  .stappenrij { grid-template-rows: auto auto auto 1fr; }
  .stappenrij li {
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .stappenrij .stap-num { grid-row: span 4; }
  .stappenrij li > div {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

/* ---- 12. Rekentool -------------------------------------------------- */
.rekentool {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-kaart);
  padding: var(--ruimte-6);
  max-width: 480px;
  box-shadow: 0 18px 40px rgba(6, 23, 41, 0.08);
}
.rekentool h3 { margin-bottom: var(--ruimte-4); }
.rekentool .uitkomst {
  border-top: 1px solid var(--border);
  margin-top: var(--ruimte-4);
  padding-top: var(--ruimte-4);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ruimte-3);
}
.rekentool .uitkomst .bedrag {
  font-family: var(--font-mono);
  font-size: 28px;
  color: var(--ink);
}
.rekentool .uitkomst .toelichting { font-size: 13.5px; color: var(--ink-4); }

/* Tweekolomstool (doc 06 sectie 5.2): invoer links, uitkomst rechts in groot mono */
.rekentool-vlak {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-kaart);
  padding: clamp(20px, 3.4vw, 32px);
  box-shadow: 0 18px 40px rgba(6, 23, 41, 0.08);
  margin-bottom: var(--ruimte-6);
}
@media (max-width: 760px) { .rekentool-vlak { grid-template-columns: 1fr; } }
.rekentool-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: var(--ruimte-5); }
.rekentool-kop h2, .rekentool-kop h3 { margin: 0; }
.rekentool-peiljaar {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--brand-ink);
  background: var(--brand-tint);
  border-radius: var(--radius-pil);
  padding: 4px 12px;
  white-space: nowrap;
}
.rekentool-invoer { display: grid; gap: var(--ruimte-5); }
.rekentool-invoer p { margin: 0; max-width: none; }
.rekentool-uitkomst {
  background: var(--brand-tint);
  border-radius: var(--radius-klein);
  padding: var(--ruimte-5);
  display: grid;
  gap: 10px;
}
.rekentool-uitkomst .oogmerk { margin-bottom: 0; }
.rekentool-bedrag { font-family: var(--font-mono); font-size: clamp(30px, 4.2vw, 40px); line-height: 1.1; color: var(--ink); margin: 0; max-width: none; }
.rekentool-uitkomst .noot { margin: 0; }
.rekentool-regels { list-style: none; margin: 0; padding: var(--ruimte-3) 0 0; display: grid; gap: 6px; border-top: 1px solid rgba(15, 107, 92, 0.2); }
.rekentool-regels li { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--ink-2); }
.rekentool-regels .waarde { font-family: var(--font-mono); white-space: nowrap; }
.rekentool-regels .waarde-tekst { font-family: var(--font-ui); white-space: normal; text-align: right; }
.rekentool-cta { margin: var(--ruimte-3) 0 0; max-width: none; }
.rekentool-formule {
  font-family: var(--font-mono);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--surface);
  border-left: 2px solid var(--brand-400);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  padding: var(--ruimte-4) var(--ruimte-5);
  margin: 0 0 var(--ruimte-5);
  max-width: 66ch;
}
.controleren { font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; color: var(--signal); white-space: nowrap; }

/* ---- 13. Formulieren -------------------------------------------------- */
label { display: block; font-size: 14px; font-weight: 500; color: var(--ink-2); margin-bottom: 7px; }
label .optioneel { font-weight: 400; color: var(--ink-4); }

input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], select, textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-klein);
  padding: 12px 14px;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--link);
  outline-offset: 1px;
  border-color: var(--link);
}

fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-klein);
  padding: var(--ruimte-4) var(--ruimte-5);
  margin: 0 0 var(--ruimte-4);
}
legend { font-size: 15px; font-weight: 600; color: var(--ink); padding: 0 var(--ruimte-2); }
fieldset label { display: flex; align-items: center; gap: var(--ruimte-2); font-weight: 400; min-height: 44px; margin: 0; }
input[type="radio"], input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand); }

.melding { border-radius: var(--radius-klein); padding: 12px 16px; font-size: 14.5px; }
.melding-fout { background: #FBEDEB; border: 1px solid var(--signal); color: var(--signal); }
/* Gekozen pakket boven het offerteformulier (29 september 2026). */
.melding-pakket { background: var(--brand-tint); border: 1px solid var(--brand-200); color: var(--ink-2); margin: 0 0 20px; max-width: none; }
.melding-pakket a { white-space: nowrap; }

/* ---- 14. Terugbelblok -------------------------------------------------- */
.terugbelblok {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-kaart);
  padding: var(--ruimte-6);
  max-width: 480px;
}
.terugbelblok .velden { display: grid; gap: var(--ruimte-4); margin-bottom: var(--ruimte-4); }

/* Opmaak uit het ontwerp van de eigenaar, 22 september 2026
   ("Logo + formulier design.png"). Drie dingen kwamen erbij: een icoontegel
   naast de kop, een zin die vertelt wat er na het versturen gebeurt, en een
   icoon bij elk label met een invulvoorbeeld in het veld. De iconen zijn
   decoratie naast een label dat het veld al benoemt; ze staan in de svg op
   aria-hidden en voegen voor een schermlezer dus niets toe. */
.formulierkop-rij { display: flex; align-items: center; gap: var(--ruimte-3); margin-bottom: var(--ruimte-3); }
/* Rond en voller dan het vierkante icoonvlak elders op de site; zo staat het
   in het ontwerp, en op een witte kaart valt de lichtere --brand-tint weg. */
.formulierkop-rij .iconvak {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #A9E6DB;
  color: var(--brand-ink);
}
/* De kop staat in het ontwerp in de schreefletter van de naam, groter dan de
   22px die .formulierkop elders geeft. In de twee popups blijft hij kleiner:
   daar is de kaart 420px breed. */
.formulierkop-rij .formulierkop {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 27px);
  letter-spacing: -0.01em;
}
.terugbel-dialoog .formulierkop-rij .formulierkop { font-size: 22px; }
.formulier-lead { font-size: 14.5px; color: var(--ink-3); margin: 0 0 var(--ruimte-5); }
.velden label, .dialoog-vraag label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
}
.velden label svg, .dialoog-vraag label svg { flex: 0 0 auto; color: var(--ink-4); }
/* Het invulvoorbeeld staat lichter dan een ingevulde waarde, maar niet zo
   licht als in het ontwerp: --ink-5 haalt op wit maar 2,6:1 en eis 14 vraagt
   4,5. --ink-4 haalt 5,1 en blijft duidelijk lichter dan --ink. opacity terug
   naar 1, want Firefox zet er uit zichzelf 0,54 op en dan klopt de berekening
   niet meer. */
::placeholder { color: var(--ink-4); opacity: 1; }
/* Knop over de volle breedte met de pijl rechts, zoals in het ontwerp. De
   bestaande .knop-pijl is iets anders: die verschijnt alleen onder 900px in de
   hero. Deze staat er altijd. */
.knop-vol { width: 100%; justify-content: center; }
.knop-pijl-vast { display: inline-flex; align-items: center; margin-left: 10px; }
.belofte { display: flex; align-items: flex-start; gap: 9px; }
.belofte-icoon { flex: 0 0 auto; color: var(--brand-ink); margin-top: 1px; }
/* De veldparagrafen stonden tot 19 september 2026 met style="margin:0" in
   terugbelblok.php en terugbeldialoog.php. Zes inline stijlen op elke pagina
   van de site; drie toetsrapporten van die dag noemden dat onder dimensie 7
   en 15. De grid van .velden regelt de tussenruimte al, dus de marge van de
   paragraaf hoort hier op nul en niet in de opmaak. */
.velden > p { margin: 0; }
.terugbelblok > .badge { margin: 0 0 var(--ruimte-4); }
.terugbelblok .belofte { font-size: 13.5px; color: var(--ink-4); margin: var(--ruimte-3) 0 0; }
.cta-blok .terugbelblok { margin: var(--ruimte-6) auto 0; text-align: left; }

/* De popup achter de knoppen "Bel mij terug" (19 september 2026). Zelfde kaart
   als het terugbelblok, maar dan midden in beeld. Zonder JavaScript blijft
   <dialog> onzichtbaar en werken de knoppen als anker naar het formulier op de
   pagina; daarom staat hier niets dat de pagina zelf verandert. */
.terugbel-dialoog {
  /* inset + margin:auto zet hem midden in beeld. De inset moet er echt staan:
     zonder die regel houdt een fixed element zijn plek in de tekststroom (hier
     onderaan de pagina) en loopt het paneel op een telefoon rechts van het
     scherm af. */
  position: fixed;
  inset: 0;
  margin: auto;
  width: calc(100% - 32px);
  max-width: 420px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-kaart);
  padding: var(--ruimte-6);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(16, 32, 56, 0.28);
}
.terugbel-dialoog::backdrop { background: rgba(16, 32, 56, 0.45); }
/* Geen focusring om de hele kaart: showModal() legt de focus op de dialog
   zelf, en het script verplaatst hem meteen naar het eerste veld. Daar hoort
   de ring, niet om het paneel. */
.terugbel-dialoog:focus { outline: none; }
.terugbel-dialoog .velden { display: grid; gap: var(--ruimte-4); margin-bottom: var(--ruimte-4); }
.terugbel-dialoog .dialoog-lead { font-size: 14.5px; color: var(--ink-4); margin: 0 0 var(--ruimte-4); }
.terugbel-dialoog .belofte { font-size: 13.5px; color: var(--ink-4); margin: var(--ruimte-3) 0 0; }
.terugbel-dialoog .knop-primair { width: 100%; justify-content: center; }
.terugbel-dialoog .melding { margin: 0 0 var(--ruimte-4); }
/* Optioneel vraagveld, toegevoegd 19 september 2026: de FAQ-intro's op 31
   pagina's nodigen uit de vraag "in het formulier onderaan" te zetten, en dit
   is wat de bezoeker na die klik te zien krijgt. Verticaal groeien mag. */
.terugbel-dialoog .dialoog-vraag { margin: 0 0 var(--ruimte-4); }
.terugbel-dialoog textarea { resize: vertical; min-height: 64px; }
.dialoog-sluit {
  position: absolute; top: 10px; right: 12px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink-4);
}
.dialoog-sluit:hover { color: var(--ink); }

/* ---- 15. FAQ ------------------------------------------------------------ */
.faq-lijst { border-top: 1px solid var(--border); max-width: 760px; }
.faq-lijst details { border-bottom: 1px solid var(--border); }
.faq-lijst summary {
  list-style: none;
  cursor: pointer;
  padding: var(--ruimte-5) 36px var(--ruimte-5) 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  min-height: 44px;
}
.faq-lijst summary::-webkit-details-marker { display: none; }
.faq-lijst summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--brand);
}
.faq-lijst details[open] summary::after { content: "\2212"; }
.faq-lijst details p {
  margin: 0;
  padding: 0 0 var(--ruimte-5);
  font-size: 15.5px;
  color: var(--ink-3);
  max-width: 66ch;
}

/* ---- 16. Auteursblok ------------------------------------------------------ */
.auteursblok { border-top: 1px solid var(--border); background: var(--bg); }
.auteursblok .wrap { padding-top: var(--ruimte-5); padding-bottom: var(--ruimte-5); }
.auteursblok p { margin: 0; font-size: 14px; color: var(--ink-4); }
.auteursblok p strong { color: var(--ink-2); font-weight: 600; }
.auteursblok .data { margin-top: 2px; font-size: 13px; }

/* ---- 16a. Mobiele conversiebalk en schermvullend formulier (20 sep 2026) ---
   Op een telefoon scrollt één knop mee; die opent het intakeformulier over het
   hele scherm. Staat standaard uit: het script in index.php haalt `hidden`
   eraf, en alleen onder 900px. Zonder JavaScript blijft de balk dus weg en
   staat het formulier gewoon in de pagina. */
.mobiele-balk { display: none; }
@media (max-width: 900px) {
  .mobiele-balk:not([hidden]) {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    background: rgba(255,255,255,0.94);
    border-top: 1px solid var(--border);
    padding: 10px clamp(20px, 5vw, 40px);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  @supports (backdrop-filter: blur(8px)) {
    .mobiele-balk:not([hidden]) { backdrop-filter: blur(8px); }
  }
  .mobiele-balk .knop { width: 100%; justify-content: space-between; gap: 16px; }
  .mobiele-balk .knop-pijl { display: inline-flex; align-items: center; }
  /* Kleur van de balkknop: helder groen #16883F met witte tekst (4,54:1),
     door de eigenaar gekozen uit drie varianten op 30 september. Alleen de
     kleur wijkt af van .knop-primair; vorm en balk zijn gelijk gebleven. Een
     lichtgroene, blokkige knop op een donkere balk stond die dag kort live en
     is teruggezet ("lelijk"): niet opnieuw proberen zonder voorbeeld. */
  .mobiele-balk .knop-primair,
  .mobiele-balk .knop-primair:hover { background: #16883F; color: #FFFFFF; }
  /* Ruimte onderaan, anders legt de balk de laatste regels van de voettekst
     toe en kun je er niet meer bij. */
  body.heeft-mobiele-balk { padding-bottom: 84px; }

  .intake-dialoog[open] {
    width: 100%; max-width: none;
    height: 100%; max-height: none;
    margin: 0;
    border: 0; border-radius: 0;
    padding: 20px clamp(20px, 5vw, 40px) 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .intake-dialoog::backdrop { background: rgba(6,23,41,0.65); }
  /* Het tweede formulier, onderaan in het CTA-blok, klapt op een telefoon ook
     in: naast een meescrollende balk is het dubbelop en maakt het de pagina
     onnodig lang (eigenaar, 20 september).

     Aangehaakt aan `body.heeft-mobiele-balk`, en die klasse zet alleen de
     homepage. Op de andere pagina's bestaat de balk niet, en daar zou dit het
     enige formulier op een telefoon weghalen. De kop, de zin en de knop
     blijven staan; alleen de uitgeklapte velden gaan weg. */
  body.heeft-mobiele-balk .cta-blok .terugbelblok { display: none; }
  body.heeft-mobiele-balk .cta-blok .wrap { display: block; }
  /* In de dialog heeft het blok geen eigen kaartrand nodig: het vult al het
     scherm. */
  .intake-dialoog .terugbelblok { box-shadow: none; border: 0; padding: 0; margin: 0; }
}
/* Boven 900px komt de dialog nooit open; deze regel houdt hem ook weg als een
   browser hem toch zou tonen. */
.intake-dialoog { display: none; }
.intake-dialoog[open] { display: block; }

/* ---- 16b. Vertrouwensblok (20 september 2026) ------------------------------
   De groene streep links komt uit het mobiele ontwerp van de eigenaar. Geen
   eigen achtergrond: het blok staat al in een .tintvlak. */
.vertrouwensblok {
  border-left: 3px solid var(--brand-knop);
  padding-left: clamp(16px, 4vw, 28px);
  max-width: 62ch;
}
.vertrouwensblok p { margin: 0; color: var(--ink-2); }

/* ---- 17. Regiolijst -------------------------------------------------------- */
.regiolijst {
  list-style: none;
  margin: 0 0 var(--ruimte-5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
}
.regiolijst a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-pil);
  font-size: 14px;
  color: var(--ink-2);
}
.regiolijst a:hover { border-color: var(--brand-400); color: var(--ink); text-decoration: none; }

/* ---- 18. CTA-blok ------------------------------------------------------------ */
.cta-blok { background: var(--ink); color: #fff; text-align: center; }
.cta-blok h2 { color: #fff; }
.cta-blok p { color: rgba(255, 255, 255, 0.8); margin-left: auto; margin-right: auto; }
.cta-blok .knoppen {
  display: flex;
  gap: var(--ruimte-3);
  justify-content: center;
  flex-wrap: wrap;
  margin: var(--ruimte-5) 0 0;
}
.cta-blok a:not(.knop) { color: var(--brand-200); } /* eis 14: knoppen behouden hun eigen tekstkleur */
.cta-blok .terugbelblok { color: var(--ink-2); }
.cta-blok .terugbelblok .belofte { color: var(--ink-4); }
/* met-formulier: het terugbelformulier rendert in het CTA-blok (elke pagina
   behalve waar het al eerder staat). Tekst links, formulier rechts, zoals de
   hero op de homepage; gecentreerde tekst boven een linksuitgelijnd formulier
   oogde verweesd. De losse "Bel mij terug"-knop vervalt hier in footer.php,
   want het formulier staat er direct naast. */
.cta-blok.met-formulier { text-align: left; }
.cta-blok.met-formulier .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: clamp(40px, 7vw, 120px);
  align-items: center;
}
.cta-blok.met-formulier p { margin-left: 0; margin-right: 0; }
.cta-blok.met-formulier .knoppen { justify-content: flex-start; }
.cta-blok.met-formulier .terugbelblok { margin: 0; max-width: none; box-shadow: 0 18px 40px rgba(6, 23, 41, 0.35); }
@media (max-width: 940px) {
  .cta-blok.met-formulier .wrap { grid-template-columns: minmax(0, 1fr); }
  .cta-blok.met-formulier .terugbelblok { max-width: 480px; }
}

/* ---- 19. Footer -------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.8); }
.site-footer .kolommen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ruimte-6);
  padding-top: var(--ruimte-8);
  padding-bottom: var(--ruimte-7);
}
.site-footer h2 {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-200);
  margin-bottom: var(--ruimte-3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-footer a { color: rgba(255, 255, 255, 0.8); font-size: 14.5px; }
.site-footer .footer-tekst { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); margin: 0 0 var(--ruimte-3); max-width: 32ch; }
.site-footer a:hover { color: #fff; }
.site-footer .onderbalk {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: var(--ruimte-5);
  padding-bottom: var(--ruimte-6);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.site-footer .onderbalk p { max-width: none; margin: 0 0 var(--ruimte-2); }
.site-footer .onderbalk a { font-size: 13px; color: rgba(255, 255, 255, 0.7); }

/* ---- 21. Fotohero (homepage) ---------------------------------- */
.hero {
  /* Foto sinds 20 september: een eigen banner van de eigenaar, uitzicht over
     een Amsterdamse gracht vanaf een bureau. Verving hero-overleg.webp.

     Twee lagen, afgeleid uit het voorbeeldbeeld van de eigenaar
     ("Banner voorbeeld.png") met `python .tools/overlay-afleiden.py --raster`.
     Die meting liet zien dat het geen verloop over de breedte is maar een
     donkere vlek áchter de tekst: 0,80 tot 0,96 op het vak van de kop, 0,25
     tot 0,42 aan de linkerrand waar de plant staat, en vrijwel niets vanaf
     58% breedte waar de gracht ligt. Een enkel horizontaal verloop maakte de
     plant en het bureaublad even donker als de tekstachtergrond; vandaar de
     ellips.

     Doc 08 eis 14 hield een vaste ondergrens van 65% dekking aan. Die is hier
     losgelaten ten gunste van een gemeten grens: `python .tools/hero-contrast.py --ellips`
     haalt de echte tekstvakken op bij de browser (/_herotekst in router.php),
     legt beide lagen over de foto en zoekt het lichtste punt achter de tekst.
     Uitkomst: **8,62:1**, ruim boven de 4,5:1 van R-451. Wijzig je de foto of
     een van de twee lagen, draai dat script dan opnieuw en houd de waarden in
     ELLIPS en WASSING daar gelijk aan deze. */
  background:
    radial-gradient(ellipse 42% 60% at 26% 36%,
      rgba(6,23,41,0.90) 0%,
      rgba(6,23,41,0.84) 55%,
      rgba(6,23,41,0.50) 82%,
      rgba(6,23,41,0.10) 95%,
      rgba(6,23,41,0) 100%),
    linear-gradient(90deg,
      rgba(6,23,41,0.34) 0%,
      rgba(6,23,41,0.26) 20%,
      rgba(6,23,41,0.10) 45%,
      rgba(6,23,41,0.02) 60%,
      rgba(6,23,41,0) 100%),
    url('/assets/img/hero-amsterdam-gracht.webp') center/cover;
  border-bottom: 1px solid var(--border);
  padding: 0;
}
/* Onder 900px stapelt het herorooster: de tekst loopt over de volle breedte
   en het formulier staat eronder, dus een ellips heeft hier geen zin. Gemeten
   met `hero-contrast.py --breedte 390 --mobiel`: op een telefoon is maar 23%
   van de herobak vrije foto (op 1440px is dat 52%), en die 23% bestaat uit
   randen van twintig tot tachtig pixels rond de tekst en de kaart.

   Wat wel kan is de laag als geheel lichter zetten. Was 0,92 → 0,80 → 0,65
   met 6,89:1; nu 0,80 → 0,72 → 0,60 met **5,80:1**, nog steeds boven de
   4,5:1 van R-451. Lager dan dit wordt krap: 0,74 → 0,54 gaf 4,84:1.
   Tegelijk laadt een telefoon de kleine variant; 1200px dekt elk scherm tot
   en met een tablet. */
/* De korte alinea en de haal onder "Dat is het verschil." staan alleen op een
   telefoon; op het brede scherm staat daar de lange alinea, het formulier
   ernaast en eronder de twee knoppen. Net als bij .knop-pijl staan deze regels
   bewust vóór de media query hieronder: een media query telt niet mee voor
   specificiteit, dus zouden ze erna staan, dan winnen ze op volgorde en blijft
   alles overal verborgen. */
.hero-kort { display: none; }
.kop-streep { display: none; }
/* Mobiel ontwerp van de eigenaar, 20 september ("Homepage mobiel.png"):
   de foto loopt door tot onder de knop en het formulier staat daaronder op
   wit, niet meer op de foto. Daardoor is er wél een vlak foto te zien en
   heeft een ellips hier zin, net als op het brede scherm.

   De tweede laag loopt hier verticaal (180deg), niet horizontaal: op een
   telefoon vult de tekst de volle breedte, dus opklaren kan alleen naar
   beneden. Gemeten met:
     python .tools/hero-contrast.py --breedte 390 --mobiel \
       --ellips 0.34,0.30,0.95,0.62 \
       --estops 0.66,0,0.62,0.52,0.37,0.80,0.09,0.94,0,1
   Uitkomst **5,47:1 op 360px, 5,41 op 430px, 5,11 op 760px**, boven de 4,5:1
   van R-451. Twee andere waarden zijn geprobeerd en afgevallen: de eerste
   versie gaf 8,2:1 maar liet van de foto niets zien, en een lichtere gaf op
   760px nog maar 4,55:1 en dat is te weinig speling voor een foto die per
   schermbreedte anders wordt uitgesneden. */
@media (max-width: 900px) {
  .hero {
    background-image:
      radial-gradient(ellipse 118% 72% at 30% 32%,
        rgba(6,23,41,0.78) 0%,
        rgba(6,23,41,0.72) 48%,
        rgba(6,23,41,0.46) 76%,
        rgba(6,23,41,0.16) 92%,
        rgba(6,23,41,0.04) 100%),
      linear-gradient(180deg, rgba(6,23,41,0.24) 0%, rgba(6,23,41,0.18) 60%, rgba(6,23,41,0.10) 100%),
      url('/assets/img/hero-amsterdam-gracht-1200.webp');
  }
  /* Het formulier uit de foto halen: eigen wit vlak over de volle breedte,
     direct onder de hero. De negatieve marge is precies de zijrand van .wrap,
     zodat het vlak doorloopt tot de schermrand. */
  .hero-raster { padding-bottom: 0; gap: 0; }
  .hero-raster > div:last-child {
    background: #fff;
    margin: 32px calc(clamp(20px, 5vw, 40px) * -1) 0;
    padding: 28px clamp(20px, 5vw, 40px) 40px;
  }
  /* Draait het script, dan is het formulier naar de dialog verhuisd en blijft
     hier een leeg wit vlak over. Dat weghalen, en de hero zijn onderrand
     teruggeven die hij anders aan het formulier ontleende. */
  body.heeft-mobiele-balk .hero-raster > div:last-child { display: none; }
  body.heeft-mobiele-balk .hero-raster { padding-bottom: 56px; }
  /* Eén oproep in de hero, zoals het ontwerp laat zien. "Bel mij terug" blijft
     bestaan: de knop staat in het formulier eronder en in de voettekst. */
  .hero .knoppenrij { margin-bottom: 0; }
  .hero .knoppenrij .knop-omlijnd { display: none; }
  .hero .knoppenrij .knop-primair {
    width: 100%;
    justify-content: space-between;
    gap: 16px;
  }
  .hero .knoppenrij .knop-primair .knop-pijl { display: inline-flex; align-items: center; }

  /* Geen knop in de hero: onderaan scrollt dezelfde oproep al mee, dus die
     stond er twee keer, en in "Banner homepage 2.0 mobiel" staat hij er ook
     niet. Alleen weghalen als die balk er werkelijk staat: zonder JavaScript
     is er geen balk en blijft de knop de enige oproep in de hero. */
  body.heeft-mobiele-balk .hero .knoppenrij { display: none; }
  /* Minder tekst in de hero (eigenaar, 21 september): de lange alinea maakt
     plaats voor de twee zinnen uit het ontwerp. Het antwoordblok van 44 tot 56
     woorden dat daarmee wegvalt staat onder "Daarom kiezen ondernemers"
     hieronder; zonder dat zou de mobiele pagina, en dus de pagina die Google
     indexeert, geen citeerbaar antwoord meer hebben. */
  .hero-lead { display: none; }
  .hero-kort {
    display: block;
    margin: 24px 0 0;
    font-size: 15.5px;
    line-height: 1.55;
    color: rgba(255,255,255,0.92);
    max-width: 44ch;
  }
  .hero-kort strong { font-weight: 600; color: #fff; }
  /* De haal onder "Dat is het verschil.". Een gevulde vorm en geen stroke: in
     het ontwerp is het een penseelstreek die in het midden dikker is dan aan
     de uiteinden, en een gevulde vorm mag ook ongelijk geschaald worden
     (preserveAspectRatio none) zonder dat de dikte scheefloopt.
     position:relative op de em zelf, zodat de streep meeschuift als de kop op
     een andere breedte anders afbreekt. In het ontwerp loopt hij niet onder de
     hele zin door maar tot ongeveer de helft; vandaar 56% en geen 107% zoals
     bij het kortere "op orde" in 2.0. */
  .hero h1 em { position: relative; display: inline-block; }
  .kop-streep {
    display: block;
    position: absolute;
    left: -3px;
    top: calc(100% + 1px);
    width: 56%;
    height: 14px;
    color: var(--brand-200);
    overflow: visible;
  }
}
.hero-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  padding-top: clamp(44px, 8vw, 72px);
  padding-bottom: 80px;
}
/* De kicker boven de h1 is er op 20 september uit gehaald op verzoek van de
   eigenaar; de regel hieronder staat er niet meer omdat .hero alleen op de
   homepage voorkomt en er dus geen .hero .oogmerk meer bestaat. */
/* 56px en niet meer de 64px van vóór 3.0: de kop is langer geworden ("Een
   boekhouder die wél met je meedenkt. Dat is het verschil."). Op 64px viel
   "Dat is het verschil." op een breed scherm in tweeën; op 56px past die zin
   op één regel, zoals in het ontwerp. */
.hero h1 { color: #fff; font-size: clamp(38px, 7vw, 56px); line-height: 1.06; }
/* De twee zinnen van de kop onder elkaar, zoals in "Banner homepage 3.0
   mobiel": de eerste zin is een blok, dus "Dat is het verschil." begint altijd
   op een eigen regel in plaats van achter "meedenkt" aan te schuiven. */
.hero h1 .kop-zin { display: block; }
/* De tweede zin houdt de accentkleur maar staat niet schuin (eigenaar,
   20 september, toen nog "op orde"). */
.hero h1 em { font-style: normal; color: var(--brand-200); }
.hero-lead { font-size: 18px; color: rgba(255,255,255,0.85); max-width: 52ch; }
/* "Bij Financiële Zaken" staat in het ontwerp vet. Zonder deze regel wint de
   algemene `strong { color: var(--ink) }` en staat er donkerblauwe tekst op een
   donkere foto: op het brede scherm was die eerste zin daardoor onleesbaar. */
.hero-lead strong { font-weight: 600; color: #fff; }
/* De maten voor de telefoon staan hier en niet in de media query hierboven,
   want een media query telt niet mee voor specificiteit: daarboven zouden de
   twee regels hierboven ze op volgorde overrulen. Uit "Banner homepage 3.0
   mobiel".

   De kop moest prominenter (eigenaar, 21 september) en ging van 5,5vw naar
   6,5vw: op 390px van 21,5 naar 25,4px. De grens ligt bij de slotzin, die op
   één regel hoort te blijven: "Dat is het verschil." is ongeveer 13,5 keer de
   lettergrootte breed en er is schermbreedte min 40px beschikbaar, dus de maat
   mag hoogstens (breedte - 40) / 13,5 zijn — 23,7px op 360, 25,9 op 390 en
   28,9 op 430. Bij 6,5vw blijft hij daar net onder. De eerste zin breekt nu
   zelf af ("Een boekhouder die" / "wél met je meedenkt"); op 5,5vw paste die
   nog in één regel en stond de breuk vast. Wordt de kop langer, reken dit dan
   opnieuw na. */
@media (max-width: 900px) {
  .hero h1 { font-size: clamp(24px, 8vw, 40px); line-height: 1.12; }
}
/* De hero-lead is inhoudelijk het antwoordblok van de h1 en draagt die klasse ook,
   maar zonder de componentopmaak: in de hero blijft het gewone tekst. */
.hero .antwoordblok { background: none; border: 0; padding: 0; margin: 0; }
.hero .vinkenlijst { color: rgba(255,255,255,0.92); }
.hero .vink { color: var(--brand-400); }
.knop-omlijnd {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 24px;
  border-radius: var(--radius-pil);
  border: 1px solid rgba(255,255,255,0.55); /* 3:1 niet-tekstcontrast */
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: background 140ms;
}
.knop-omlijnd:hover { background: rgba(255,255,255,0.12); text-decoration: none; }
.vinkenlijst { list-style: none; margin: 0 0 var(--ruimte-6); padding: 0; display: grid; gap: 12px; font-size: 16px; }
.vinkenlijst li { display: flex; gap: 12px; align-items: baseline; }
.vink { color: var(--brand-ink); font-weight: 600; }

/* In het ontwerp van 22 september is de kaart in de hero ronder en ruimer dan
   de rest van de kaarten op de site: hij ligt op een foto en moet daar als een
   apart paneel op liggen, niet als een vlak dat erin wegvalt. De rand vervalt,
   de schaduw doet het werk. */
.hero .terugbelblok {
  max-width: none;
  border-color: transparent;
  border-radius: 22px;
  padding: clamp(22px, 2.4vw, 30px);
  box-shadow: 0 18px 40px rgba(6,23,41,0.12), 0 4px 8px rgba(6,23,41,0.06);
}
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand-tint);
  border-radius: var(--radius-pil);
  padding: 6px 13px;
  font-size: 12px; font-weight: 600;
  color: var(--brand-ink);
  white-space: nowrap;
  max-width: 100%;
}
/* Op een telefoon past een lange badge niet op één regel; dan mag hij afbreken
   in plaats van de pagina scheef te duwen. */
@media (max-width: 560px) {
  .badge { white-space: normal; }
}

/* ---- 21b. Waarom-kaart met de twee vergelijkingskaarten ---------------
   De witte kaart met de kop "Daarom kiezen ondernemers voor Financiële Zaken"
   komt uit "Banner homepage 2.0 mobiel", de twee kolommen erin uit 3.0; de
   eigenaar vroeg om die twee te mengen. Op een telefoon schuift de kaart met
   zijn bovenrand over de foto heen en neemt hij de overgang van foto naar wit
   over van de golfrand; op een breed scherm is het een gewone sectie op de
   paginakleur. */
.waarom { position: relative; z-index: 2; padding: clamp(40px, 6vw, 72px) 0 0; }
.waarom-kaart {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(6, 23, 41, 0.10);
  padding: clamp(22px, 4vw, 40px);
}
/* Twee kleuren in één kop, zoals in het ontwerp: de eerste helft in de
   tekstkleur, de tweede in de merkkleur. Op een eigen regel, ook op een breed
   scherm: laat je de kop vrij afbreken, dan komt "Zaken." los onderaan te
   hangen en staat de naam van het kantoor over twee regels. */
.waarom-kaart h2 span { color: var(--brand-ink); display: block; }
/* In het ontwerp staat hier gewone grijze tekst, geen kaderblok. De klasse
   blijft wel staan: dit is het citeerbare antwoord van de pagina voor wie hem
   op een telefoon leest, en meet.py zoekt ernaar op de klasse. */
.waarom-kaart .antwoordblok {
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 var(--ruimte-5);
  max-width: 62ch;
}
.waarom-kaart .antwoordblok p { font-size: 16.5px; color: var(--ink-3); }

/* De twee kolommen delen hun rijen, zodat de kop, het onderschrift en de drie
   scheidingslijnen links en rechts op precies dezelfde hoogte staan. Zonder
   dit staan de lijnen scheef zodra een regel links anders afbreekt dan rechts,
   en dat gebeurt hier bij elke schermbreedte: de teksten zijn niet even lang.
   Vijf gedeelde rijen (kop, onderschrift, drie punten): de kolommen spannen ze
   alle vijf en nemen ze met subgrid over, en de ul staat op display:contents
   zodat de li's zelf de rasteritems zijn.

   Kent een browser subgrid niet, dan valt hij terug op auto-rijen: dan staat
   het er scheef maar leesbaar.

   minmax(0, 1fr) en niet 1fr: anders duwt de langste ononderbroken tekst een
   kolom breder dan de andere. */
.vergelijk {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto auto;
  column-gap: clamp(22px, 5.6vw, 40px);
  row-gap: 0;
}
.vergelijk-kolom {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  align-content: start;
  border-radius: 16px;
  padding: clamp(11px, 2.6vw, 26px) clamp(9px, 2vw, 24px) clamp(9px, 2.2vw, 22px);
}
.vergelijk-kolom ul { display: contents; list-style: none; margin: 0; padding: 0; }
.vergelijk-kolom.nu  { background: var(--surface); }
.vergelijk-kolom.wij { background: var(--brand-tint); }
/* De koppen van de twee kolommen zijn h3: ze horen onder de h2 van de kaart,
   en zo vraagt meet.py er ook geen eigen antwoordblok van 44 tot 56 woorden
   bij. In het ontwerp staan ze in de schreefletter, net als de kop erboven. */
.vergelijk-kolom h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(14px, 3.9vw, 24px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.vergelijk-kolom.nu  h3 { color: var(--ink-3); }
.vergelijk-kolom.wij h3 { color: var(--brand-ink); }
/* Het onderschrift staat op één regel, zoals in het ontwerp. Dat is krap: op
   360px is "DOEN WIJ HET ANDERS" bij 9px en 0,11em letterruimte ongeveer 118px
   in een kolom die er binnenwerks net zoveel heeft, en dan valt hij in tweeën.
   Een maat die met het scherm meeloopt en een kleinere letterruimte houden hem
   heel van 360px af. Wordt de tekst langer, meet dan opnieuw. */
.vergelijk-sub {
  margin: 5px 0 0;
  font-family: var(--font-ui);
  font-size: clamp(8.6px, 2.35vw, 13px);
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-transform: uppercase;
}
.vergelijk-kolom.nu  .vergelijk-sub { color: var(--ink-4); }
.vergelijk-kolom.wij .vergelijk-sub { color: var(--brand-ink); }
/* Een punt is het teken met de regel ernaast, meer niet: de toelichting is er
   op 21 september uit gehaald (eigenaar: te veel tekst). align-items center
   zet het teken en de regel op dezelfde hoogte, ook als die regel over drie
   regels loopt en de gedeelde rij hoger is dan de inhoud zelf. */
.vergelijk-kolom li {
  display: flex;
  gap: clamp(7px, 1.8vw, 14px);
  align-items: center;
  padding: clamp(9px, 2.2vw, 16px) 0;
  font-size: clamp(11.5px, 3vw, 15px);
  line-height: 1.3;
  font-weight: 600;
}
.vergelijk-kolom.nu  li { color: var(--ink); }
.vergelijk-kolom.wij li { color: var(--brand-ink); }
.vergelijk-kolom li + li { border-top: 1px solid rgba(6, 23, 41, 0.10); }
.vergelijk-kolom.wij li + li { border-top-color: rgba(15, 107, 92, 0.18); }
/* Het vinkje en het kruisje staan in het ontwerp in een gevulde rondel met een
   wit teken. Het grijs is donkerder dan in het ontwerp (#8096A6 geeft 3,07:1
   met wit, net op de grens van de 3:1 voor niet-tekst); dit geeft 3,6:1. */
.vergelijk-kolom .merk {
  /* flex: 0 0 auto is hier geen franje: zonder die regel krimpt de rondel in
     de flexrij mee met de tekst ernaast en wordt hij een ovaal. */
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(19px, 4.8vw, 32px);
  height: clamp(19px, 4.8vw, 32px);
  border-radius: 50%;
  color: #fff;
}
.vergelijk-kolom .merk svg { display: block; width: 58%; height: 58%; }
.vergelijk-kolom.nu  .merk { background: #77889A; }
.vergelijk-kolom.wij .merk { background: var(--brand-knop); }
/* De pijl ligt in het gat tussen de twee kaarten, midden op de hoogte. Absoluut
   en niet als derde rasterkolom: dan zou hij breedte van de kaarten afsnoepen.
   Het gat is met opzet ruimer dan in het ontwerp (daar raken de kaarten elkaar
   bijna), zodat de rondel op een telefoon niet over de tekst valt. */
.vergelijk-pijl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(30px, 7.6vw, 54px);
  height: clamp(30px, 7.6vw, 54px);
  border-radius: 50%;
  background: var(--brand-knop);
  color: #fff;
}
.vergelijk-pijl svg { display: block; width: 56%; height: 56%; }
@media (max-width: 400px) {
  .waarom-kaart { padding: 18px; }
  /* Alleen de vergelijking mag iets buiten de kaartrand komen; de kop en de
     alinea houden hun gewone binnenmarge. Dat scheelt twaalf pixels die de
     twee kolommen hard nodig hebben nu ze binnen de witte kaart staan. */
  .vergelijk { margin-left: -6px; margin-right: -6px; }
}
@media (max-width: 900px) {
  /* De kaart neemt de overgang over: de golfrand eronder zou er dwars
     doorheen lopen. De hero krijgt onderaan extra foto zodat de kaart iets
     heeft om overheen te schuiven. Allebei alleen als de meescrollende balk
     er is: zonder JavaScript staat het formulier nog in de hero en is er geen
     ruimte om in te schuiven. */
  body.heeft-mobiele-balk .hero-raster { padding-bottom: 104px; }
  body.heeft-mobiele-balk .waarom { margin-top: -56px; padding-top: 0; }
  body.heeft-mobiele-balk .golf { display: none; }
  /* 23px, niet de 30px van --tekst-kop: bij die maat breekt "Daarom kiezen
     ondernemers" op een telefoon in drieën en het ontwerp houdt die regel
     heel, met "voor Financiële Zaken." eronder. */
  .waarom-kaart h2 { font-size: 23px; line-height: 1.15; }
  .waarom-kaart .antwoordblok p { font-size: 15.5px; }
}
/* Onder 380px past "Daarom kiezen ondernemers" op 23px niet meer op één regel
   (nodig 283px, beschikbaar 284px binnen de kaart) en valt de kop in drieën.
   In het ontwerp staat hij op twee regels. */
@media (max-width: 380px) {
  .waarom-kaart h2 { font-size: 21px; }
}

/* ---- 22. Cijferstrook ------------------------------------------ */
.cijferstrook { background: #fff; border-bottom: 1px solid var(--border); padding: 0; }
.cijferstrook .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 28px clamp(28px, 4vw, 64px);
  padding-top: clamp(14px, 2.5vw, 26px);
  padding-bottom: clamp(32px, 4.5vw, 44px);
}
.stat { display: flex; flex-direction: column; gap: 9px; padding: 4px 0; }

/* De drie blokken komen omhoog zweven zodra de strook in beeld komt, één voor
   één, en blijven daarna staan.

   Ze bewogen eerst doorlopend op en neer (eigenaar, 19 september). Dat is op
   19 september vervangen: doorlopend deinende blokjes onder een hero staan in
   `toetsprompt-webpagina.md` bij dimensie 15 als kenmerk van de generieke
   AI-look, en beweging die nooit ophoudt leidt af van de tekst ernaast. Eén
   keer binnenkomen leest als een ontwerp, eeuwig deinen als een sjabloon.

   Alleen opacity en transform bewegen, dus de tekst blijft scherp en de
   layout verschuift niet. De beginstand staat achter .js: zonder JavaScript
   komt de klasse in-beeld nooit en moeten de blokken gewoon zichtbaar zijn.
   Wie in zijn systeem minder beweging heeft ingesteld, krijgt ze meteen: voor
   een deel van de bezoekers is beweging misselijkmakend. */
.js .cijferstrook .stat { opacity: 0; transform: translateY(14px); }
.js .cijferstrook.in-beeld .stat {
  opacity: 1;
  transform: none;
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js .cijferstrook.in-beeld .stat:nth-child(2) { transition-delay: 90ms; }
.js .cijferstrook.in-beeld .stat:nth-child(3) { transition-delay: 180ms; }
/* Het icoonvlak licht op van de achtergrond, zodat de rij ook stilstaand
   diepte heeft in plaats van een platte regel te zijn. */
.cijferstrook .iconvak { box-shadow: 0 6px 16px rgba(6, 23, 41, 0.10); }
@media (prefers-reduced-motion: reduce) {
  .js .cijferstrook .stat { opacity: 1; transform: none; transition: none; }
}
.stat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--brand-ink); }
.stat-waarde { font-family: var(--font-mono); font-size: clamp(24px, 2.6vw, 29px); color: var(--ink); line-height: 1; }
.stat-sub { font-size: 14.5px; color: var(--ink-4); line-height: 1.45; max-width: 24ch; }

/* Op een telefoon staat elke stat in een eigen kaart, naar het ontwerp van de
   eigenaar ("Afbeelding 9", 20 september). De iconen blijven de bestaande uit
   icoon.php: euro, wissel en telefoon.

   Het getal staat hier niet in de monospace maar in de gewone letter, zoals in
   het ontwerp. Op een breed scherm blijft het mono: daar staan de drie naast
   elkaar en lijnen de cijfers dan netjes uit. Wil je het overal hetzelfde,
   dan is dat één regel. */
@media (max-width: 900px) {
  .cijferstrook .wrap { gap: 14px; }
  .cijferstrook .stat {
    background: var(--brand-tint);
    border-radius: 16px;
    padding: 22px;
    gap: 12px;
  }
  .cijferstrook .stat-waarde {
    font-family: var(--font-basis);
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.01em;
  }
  .cijferstrook .stat-sub { max-width: none; }
  /* Het icoonvlak heeft op de kaart geen slagschaduw nodig: de kaart geeft de
     diepte al. Wel een eigen, vollere tint, anders valt het tegel-effect uit
     het ontwerp weg tegen de kaart van dezelfde kleur. */
  .cijferstrook .iconvak {
    box-shadow: none;
    background: #CBEAE3;
  }
}

/* ---- 23. Sectiekoppen en kaarten --------------------------------- */
.sectiekop-rij { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: 40px; flex-wrap: wrap; }
.sectiekop-rij h2, .sectiekop-rij h3 { margin: 0; }
/* Geen nowrap: een lange ankertekst duwde de pagina op een telefoon scheef.
   text-wrap: pretty houdt het laatste woord met de pijl bij elkaar waar de
   browser dat ondersteunt. */
.linkpijl { font-size: 15px; font-weight: 600; color: var(--brand-ink); white-space: normal; text-wrap: pretty; }
.iconvak {
  width: 44px; height: 44px;
  background: var(--brand-tint);
  border-radius: var(--radius-klein);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-ink);
}
.dienstkaart .iconvak + h3 { margin-top: 6px; }

/* ---- 24. Pakketkaarten -------------------------------------------- */
.pakketkaart {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-kaart);
  padding: clamp(22px, 4vw, 36px);
  display: flex;
  flex-direction: column;
}
.pakketkaart.uitgelicht { box-shadow: 0 18px 40px rgba(6,23,41,0.12), 0 4px 8px rgba(6,23,41,0.06); }
.pakketkaart h2, .pakketkaart h3 { font-family: var(--font-ui); font-size: 20px; font-weight: 600; letter-spacing: 0; margin: 0 0 6px; }
.pakketkaart .doelgroep { font-size: 15px; color: var(--ink-4); margin: 0 0 24px; }
.pakket-prijs { font-family: var(--font-mono); font-size: clamp(32px, 5vw, 42px); color: var(--ink); line-height: 1; }
.pakket-sub { font-size: 14px; color: var(--ink-4); margin: 8px 0 28px; }
.pakketkaart .vinkenlijst { font-size: 15px; }
.pakketkaart .knop { margin-top: auto; justify-content: center; }
.badge-omkeer {
  display: inline-flex;
  background: var(--brand-ink);
  color: #fff;
  border-radius: var(--radius-pil);
  padding: 5px 12px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
.pakketkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ---- 24b. Pakkettabel (eis 6): pakketvergelijking als echte tabel ------- */
.tabelscroll { overflow-x: auto; margin: 0 0 var(--ruimte-5); }
.pakkettabel {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-kaart);
  overflow: hidden;
  margin: 0;
}
.pakkettabel th, .pakkettabel td {
  text-align: left;
  vertical-align: top;
  padding: 22px 24px;
  border-bottom: 1px solid var(--border);
  font-size: 15.5px;
}
.pakkettabel thead th {
  font-size: var(--tekst-micro);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-ink); /* eis 14 */
  background: var(--bg);
  padding-top: 14px;
  padding-bottom: 14px;
}
.pakkettabel tbody th { font-family: var(--font-ui); font-size: 18px; font-weight: 600; color: var(--ink); }
.pakkettabel tbody th .badge-omkeer { display: block; width: fit-content; margin-top: 8px; }
.pakkettabel tbody td { color: var(--ink-3); }
.pakkettabel .vinkenlijst { margin: 0; gap: 8px; font-size: 14.5px; }
.pakkettabel td.num, .pakkettabel th.num { text-align: right; }
.pakkettabel tbody td.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; /* eis 6 */
  font-size: 17px;
  color: var(--ink);
  white-space: nowrap;
}
.pakkettabel tbody tr.uitgelicht { background: var(--brand-tint); }
.pakkettabel tbody tr:last-child th, .pakkettabel tbody tr:last-child td { border-bottom: 0; }
.pakkettabel tfoot td { font-size: 13.5px; color: var(--ink-4); background: var(--bg); border-top: 1px solid var(--border); border-bottom: 0; padding-top: 14px; padding-bottom: 14px; }
/* Op een telefoon (audit 5 sep 2026, bevinding 4.1): de pakkettabel is 640px
   breed en de prijskolom stond buiten beeld. Onder 720px wordt elke rij een
   kaart: pakketnaam, dan de prijs groot, dan de rest. Semantiek blijft een
   echte table (eis 6); alleen de weergave stapelt. */
@media (max-width: 720px) {
  .pakkettabel { min-width: 0; }
  .pakkettabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pakkettabel tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
  .pakkettabel tbody tr:last-child { border-bottom: 0; }
  .pakkettabel tbody th, .pakkettabel tbody td { display: block; padding: 0; border: 0; }
  .pakkettabel tbody th { grid-column: 1; grid-row: 1; font-size: 17px; }
  .pakkettabel tbody td.num { grid-column: 2; grid-row: 1; align-self: center; font-size: 20px; }
  .pakkettabel tbody td:not(.num) { grid-column: 1 / -1; font-size: 14.5px; }
  .pakkettabel tbody td:not(.num):first-of-type { color: var(--ink-4); }
  .pakkettabel tfoot tr, .pakkettabel tfoot td { display: block; }
}
/* Raster met een vaste minimumkolom van 300px, zodat zes kaarten 3+3 vallen
   in plaats van 4+2 (homepage). */
.kaartraster.drie { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* ---- 29. Terugkerende layout als klassen (audits 6 sep 2026) --------------
   De pagina's zetten dezelfde grid- en flexdefinities telkens inline. Hier de
   benoemde varianten, zodat inline style beperkt blijft tot marges. */
.knoppenrij { display: flex; gap: 12px; flex-wrap: wrap; max-width: none; margin: 28px 0 16px; }
.cta-noot { font-size: 13px; line-height: 1.7; color: var(--ink-3); margin: 0; max-width: 60ch; }
.faq-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 5vw, 64px); align-items: start; }
.termijnraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--ruimte-4); margin: 0 0 var(--ruimte-5); }
.termijnraster .termijnkaart { max-width: none; }
.stappenrij.vier { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.stappenrij.drie { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.tweekolom { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(28px, 6vw, 80px); align-items: start; }
/* De sectie direct onder de golfrand moet daar bovenop liggen, anders valt de
   svg over de bovenrand van de cijferstrook heen. */
.boven-golf { position: relative; z-index: 2; }
/* Rij losse linkpijlen onder elkaar op een telefoon, naast elkaar op desktop. */
.linkrij { display: flex; gap: 24px; flex-wrap: wrap; max-width: none; }
/* Introtekst boven een FAQ-lijst: iets kleiner dan de bodytekst. */
.faq-intro { font-size: 16px; }

/* De tabel draagt zijn eigen ondermarge, en het scrollgebied eromheen ook.
   Samen gaf dat een lege witte band binnen de container die als weergavefout
   leest (audit 6 september). De marge hoort bij de container, niet bij beide. */
.tabelscroll > table { margin-bottom: 0; }

/* Scrollgebied voor brede tabellen: een schaduw aan de rechterrand maakt
   zichtbaar dat er meer kolommen zijn (audits: prijskolom buiten beeld). */
.tabelscroll {
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat,
    linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right / 40px 100% no-repeat,
    linear-gradient(to right, rgba(6,23,41,0.10), rgba(6,23,41,0)) left / 14px 100% no-repeat,
    linear-gradient(to left, rgba(6,23,41,0.10), rgba(6,23,41,0)) right / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
/* De witte afdeklagen hierboven staan aan de randen van de container. Is die
   breder dan de tabel erin (een prijstabel is hooguit 720px, de container
   liep tot de kolomrand), dan tekent de rechterlaag een losse witte baan op de
   pagina (gezien op /bedrijf-oprichten/, 13 september; op andere pagina's
   per stuk gemaskeerd met een inline max-width). De container krimpt daarom
   tot de tabel, met dezelfde 720px als ondergrens zodat geen tabel smaller
   wordt dan hij was. Pakkettabellen vullen altijd de volle breedte en houden
   hun gedrag. */
.tabelscroll:has(> .prijstabel) {
  width: fit-content;
  min-width: min(100%, 720px);
  max-width: 100%;
}
@media (max-width: 480px) {
  .cta-noot { font-size: 12.5px; }
}

/* Prijstabel op een telefoon (audits 6 sep 2026: de rechterkolom viel buiten
   beeld zonder dat iets liet zien dat de tabel schoof, precies de kolom met de
   bedragen of de termijnen). Onder 620px wordt elke rij een kaartje: de th van
   de rij als kop, daaronder elke cel op een eigen regel. Staat er een
   data-label op de cel, dan komt de kolomkop er als klein label voor te staan.
   De tabel blijft semantisch een table, alleen de weergave verandert.
   Een tabel die dit niet moet doen krijgt de klasse breed. */
@media (max-width: 620px) {
  .prijstabel:not(.breed) { min-width: 0; border-radius: var(--radius-klein); }
  .prijstabel:not(.breed) thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .prijstabel:not(.breed) tbody tr {
    display: block; padding: 16px 18px; border-bottom: 1px solid var(--border);
  }
  .prijstabel:not(.breed) tbody tr:last-child { border-bottom: 0; }
  .prijstabel:not(.breed) tbody th,
  .prijstabel:not(.breed) tbody td {
    display: block; padding: 0; border: 0; font-size: 15px;
  }
  .prijstabel:not(.breed) tbody th {
    font-family: var(--font-ui); font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 6px;
  }
  .prijstabel:not(.breed) tbody td { color: var(--ink-3); margin-top: 6px; }
  .prijstabel:not(.breed) tbody td.num {
    text-align: left; font-size: 18px; color: var(--ink); white-space: normal;
  }
  .prijstabel:not(.breed) tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-ui);
    font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 2px;
  }
  .prijstabel:not(.breed) tbody td:empty { display: none; }
  .prijstabel:not(.breed) tfoot tr, .prijstabel:not(.breed) tfoot td { display: block; padding: 14px 18px; }
  .prijstabel.breed th, .prijstabel.breed td { padding: 10px 12px; font-size: 14px; }
}

/* ---- 31. Rapportkaart (werkwijze): wat een klant van ons te zien krijgt --
   Een kaart die leest als de voorkant van een stuk: een band met het soort
   document en de frequentie, de titel, en wat erin zit. Geen bedragen, want
   voorbeeldcijfers zouden als tarief gelezen worden. */
.rapportraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--ruimte-4);
  margin: 0 0 var(--ruimte-5);
}
.rapportkaart {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-kaart);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rapportkaart .kop { background: var(--brand-tint); padding: 14px 20px; border-bottom: 1px solid var(--border); }
.rapportkaart .kop .label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--brand-ink); }
.rapportkaart h3 { margin: 4px 0 0; font-size: 19px; }
.rapportkaart ul { list-style: none; margin: 0; padding: 16px 20px; display: grid; gap: 10px; flex: 1; }
.rapportkaart li { display: flex; gap: 10px; font-size: 15px; color: var(--ink-3); }
.rapportkaart li svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 4px; color: var(--brand-ink); }
.rapportkaart .voet { padding: 12px 20px; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--ink-4); background: var(--bg); margin: 0; }

/* ---- 32. Jaartabel (werkwijze): het jaarritme als tijdlijn ------------
   Een gewone tabel met in de eerste kolom een stip en een doorlopende lijn,
   zodat de rijen als momenten in het jaar lezen. Op een telefoon stapelt de
   tabel tot kaartjes en vervalt de lijn. */
.jaartabel { max-width: 960px; }
.jaartabel tbody th {
  position: relative;
  padding-left: 46px;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  vertical-align: top;
}
.jaartabel tbody th .sub { display: block; font-weight: 400; font-size: 13px; color: var(--ink-4); margin-top: 2px; white-space: normal; }
.jaartabel tbody th::before {
  content: "";
  position: absolute; left: 18px; top: 20px; z-index: 1;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand-knop);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.jaartabel tbody th::after {
  content: "";
  position: absolute; left: 22px; top: 0; bottom: 0; width: 2px;
  background: var(--brand-tint);
}
.jaartabel tbody tr:first-child th::after { top: 20px; }
.jaartabel tbody tr:last-child th::after { bottom: auto; height: 20px; }
.jaartabel tbody td { vertical-align: top; }
.jaartabel tbody td:last-child { color: var(--ink-4); white-space: nowrap; }
@media (max-width: 620px) {
  .jaartabel tbody th { padding-left: 0; white-space: normal; }
  .jaartabel tbody th::before, .jaartabel tbody th::after { display: none; }
  .jaartabel tbody td:last-child { white-space: normal; }
}

/* ---- 30. Print ------------------------------------------------------------- */
@media print {
  .site-header, .kruimelpad, .cta-blok, .site-footer .kolommen, .terugbelblok, .knop, .skiplink, .menuknop, .golf { display: none !important; }
  body { background: #fff; color: #000; }
  main { padding: 0; }
  a { color: #000; text-decoration: underline; }
  a[href^="/"]::after { content: " (financielezaken.nl" attr(href) ")"; font-size: 0.85em; color: #444; }
  .tabelscroll { overflow: visible; background: none; }
  .pakkettabel, .prijstabel { min-width: 0; }
  details { display: block; }
  details > summary { list-style: none; }
  details:not([open]) > *:not(summary) { display: block; }
  .auteursblok { border-top: 1px solid #000; }
}

/* ---- 25. Tintvlak en stapkaarten ----------------------------------- */
.tintvlak { background: var(--brand-tint); }
/* ---- 27. Golfrand ------------------------------------------------------ */
.golf { display: block; width: 100%; height: clamp(34px, 5.5vw, 64px); margin-top: calc(clamp(34px, 5.5vw, 64px) * -1); position: relative; z-index: 2; }

/* ---- 28. Beeld en iconen (site_v2, 5 sep 2026) --------------------------
   Vier componenten in de stijl van het ontwerp: een figuur met onderschrift,
   een tekst-naast-beeld-rij, een lijst met een icoon per regel en een raster
   van kenmerken. Iconen komen uit includes/icoon.php als inline SVG (eis 15).
   Foto's zijn WebP met width en height in de HTML (eis 15, geen CLS). */
.figuur { margin: 0 0 var(--ruimte-6); max-width: none; }
.figuur img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-kaart);
  filter: saturate(.85);
  background: var(--surface);
}
.figuur.staand img { aspect-ratio: 4 / 5; }
.figuur.breed img { aspect-ratio: 21 / 9; }
.figuur figcaption { font-size: 13.5px; color: var(--ink-4); margin-top: 10px; line-height: 1.5; }

.beeldrij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.beeldrij .figuur { margin: 0; }
.beeldrij.beeld-links .figuur { order: -1; }
@media (max-width: 720px) { .beeldrij .figuur { order: -1; } }

.iconlijst { list-style: none; margin: 0 0 var(--ruimte-5); padding: 0; display: grid; gap: 14px; max-width: 66ch; }
.iconlijst li { display: flex; gap: 14px; align-items: flex-start; }
.iconlijst .iconvak { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; }
.iconlijst li > div p, .iconlijst li > p { margin: 0; }
.iconlijst strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.iconlijst li > div > span, .iconlijst .toelichting { font-size: 15px; color: var(--ink-3); }

.kenmerken {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--ruimte-5);
  margin: 0 0 var(--ruimte-5);
}
.kenmerk { display: flex; flex-direction: column; gap: 10px; }
.kenmerk h3 { font-size: 17px; margin: 0; }
.kenmerk p { margin: 0; font-size: 15px; color: var(--ink-3); }

.iconvak.klein { width: 36px; height: 36px; border-radius: 9px; }
.iconvak.omkeer { background: var(--brand-ink); color: #fff; }
.iconvak.wit { background: #fff; border: 1px solid var(--border); }
/* Op een mintvlak is een minttegel onzichtbaar: het icoon lijkt dan los te
   zweven, terwijl dezelfde lijst op de gewone achtergrond wel tegels heeft.
   Alleen lijsten die direct op het vlak staan; tegels in witte kaarten
   (stappenrij, dienstkaart) staan al op wit. */
.tintvlak .iconlijst .iconvak, .tintvlak .kenmerken .iconvak { background: #fff; border: 1px solid var(--border); }
.hero .iconvak { background: rgba(255,255,255,0.12); color: var(--brand-200); }
.cta-blok .iconvak { background: rgba(255,255,255,0.12); color: var(--brand-200); }
.stat .iconvak { margin-bottom: 2px; }
.dienstkaart .iconvak, .kenmerk .iconvak { flex: 0 0 auto; }
.pakketkaart .iconvak { margin-bottom: 14px; }
.knop svg { flex: 0 0 auto; }
.linkpijl svg { vertical-align: -3px; margin-left: 4px; }

/* Inhoudsopgave in de kaart: kolommen lopen van boven naar beneden (1-5 links,
   6-9 rechts), zodat labels van twee regels geen gaten in de andere kolom maken.
   Onder circa 330px valt dit vanzelf terug naar een kolom. */
/* De inhoudsopgave in de kaart stond in twee kolommen. Dat leek zuinig met
   ruimte, maar de kaart is hooguit 420px breed en dus elke kolom ongeveer
   180px: bijna elk item brak middenin ("Wat levert het netto / op?"), de twee
   kolommen liepen daardoor niet meer gelijk en het geheel las rommelig
   (eigenaar, 19 september). Nu één kolom: alle nummers onder elkaar, de
   vervolgregel netjes uitgelijnd op de tekst erboven.

   De nummers staan rechts uitgelijnd in een vaste breedte, zodat een lijst met
   meer dan negen punten niet verspringt. */
.inhoudsopgave.kaart ol { display: grid; grid-template-columns: 1fr; gap: 10px; }
.inhoudsopgave.kaart li { break-inside: avoid; }
.inhoudsopgave.kaart li::before { min-width: 1.7em; flex: none; text-align: right; }

/* ---- 21. Hulpklassen in plaats van herhaalde inline stijlen --------------
   Toegevoegd 19 september 2026. Er stonden 887 style-attributen in de
   paginabestanden, waarvan zes patronen samen 580 keer. Vijf toetsrapporten
   noemden dat onder dimensie 15 ("inline styles"), en het maakte een
   opmaakwijziging aan een paginatype een bewerking in elk bestand.
   Deze klassen vervangen exact die zes waarden, niets meer: de gerenderde
   opmaak blijft identiek. */
.leesbreed      { max-width: 66ch; }
.kopbreed       { max-width: 24ch; }
.sectie-ruim    { margin-top: 56px; }
.geen-topmarge  { margin-top: 0; }
.strak-onder    { padding-bottom: 0; }
.kaartlink      { margin-top: auto; font-size: 14px; }
.inktlink       { color: var(--ink); }
.tabel-900      { max-width: 900px; }
.beeldrij-ruim  { margin-top: 32px; }
/* Specificiteit: .tabelscroll:has(> .prijstabel) zet zelf max-width: 100%,
   dus een klasse van één niveau verliest daarvan. Vandaar .tabelscroll ervoor. */
.tabelscroll.tabel-smal { max-width: 760px; }
.tabelscroll.tabel-breed { max-width: 780px; }
.tabelscroll.tabel-ruim { max-width: 820px; }
.knoppenrij-onder { margin: 40px 0 0; }

/* ---- 33. Tarievenpagina volgens het ontwerp van de eigenaar ---------------
   29 september 2026, Tarievenpagina.png in de projectmap. Maten en kleuren
   zijn uit de png gemeten (schaal 1,15 ten opzichte van de 1200px-kolom),
   niet geschat: kop met een grote foto rechts, daaronder op een iets
   koelere ondergrond twee prijskaarten met rechts, achter een dunne lijn,
   drie zekerheden met een rond icoon. */
.kop-tarieven { padding: clamp(40px, 6vw, 56px) 0 clamp(32px, 4vw, 48px); }
.kop-raster.groot-beeld {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 6vw, 88px);
}
.kop-raster.groot-beeld .figuur img { border-radius: 12px; }
.kop-tarieven h1 { font-size: clamp(36px, 4.6vw, 54px); line-height: 1.08; }
/* In het ontwerp staat het antwoord als gewone alinea onder de kop, zonder
   het grijze kader dat het antwoordblok elders heeft (net als in de hero). */
.kop-tarieven .antwoordblok { background: none; border: 0; padding: 0; margin: 0 0 var(--ruimte-5); }
.kop-tarieven .antwoordblok p { font-size: 16.5px; color: var(--ink-3); }
/* Hier volgt de foto niet de hoogte van de tekst (sectie 7c) maar houdt hij
   de liggende verhouding uit het ontwerp, verticaal gecentreerd. */
@media (min-width: 861px) {
  .kop-raster.groot-beeld { align-items: center; }
  .kop-raster.groot-beeld .kop-zij { grid-template-rows: auto; }
  .kop-raster.groot-beeld .kop-zij > .figuur img { aspect-ratio: 3 / 2; height: auto; }
}

/* Oogmerk met een kort lijntje erachter, zoals boven de h1 in het ontwerp. */
.oogmerk.met-lijn { display: flex; align-items: center; gap: 14px; }
.oogmerk.met-lijn::after { content: ""; width: 38px; height: 1px; background: var(--brand-300); }

/* h2 in de schreefletter maar op sectiekopmaat: dit zijn tussenkoppen boven
   kaarten, geen vraagkoppen met een antwoordblok eronder. */
.sectiekop.serif { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3vw, 34px); letter-spacing: -0.01em; margin-bottom: var(--ruimte-5); }

.tarievenblok { background: #F2F6FA; padding: clamp(40px, 6vw, 48px) 0 clamp(48px, 7vw, 64px); border-top: 1px solid var(--border); }
/* Tarievenoverzicht direct onder de kop (eigenaar, 29 september: de
   tarieven moeten meteen duidelijk zijn, met een knop per pakket). In de
   prijscel staat het bedrag groot in de schreefletter met de knop eronder;
   op een telefoon wordt die cel de voet van het pakketkaartje. */
.tarievenoverzicht { border-top: 1px solid var(--border); padding: clamp(32px, 4vw, 48px) 0 clamp(40px, 6vw, 64px); }
.pakkettabel td.prijscel { min-width: 236px; }
.prijscel .prijs-vanaf, .prijscel .prijs-per { display: block; font-family: var(--font-ui); font-size: 13px; color: var(--ink-4); }
.prijscel .prijs-groot { display: block; font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1.1; color: var(--ink); letter-spacing: -0.01em; }
.prijscel .prijs-groot.prijs-tekst { font-size: 22px; padding-top: 4px; }
.prijscel .knop-pakket { display: flex; justify-content: center; margin-top: 14px; font-family: var(--font-ui); white-space: nowrap; text-align: center; }
.pakkettabel tbody tr.uitgelicht .knop-secundair { background: #fff; }
@media (max-width: 720px) {
  .pakkettabel tbody td.prijscel { grid-column: 1 / -1; grid-row: auto; text-align: left; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
  .prijscel .prijs-vanaf, .prijscel .prijs-per { display: inline; }
  /* "per maand · € 57,85 zonder btw" op één regel (29 september 2026). */
  .prijscel .prijs-per + .prijs-per::before { content: "· "; }
  .prijscel .prijs-groot { display: inline; font-size: 28px; margin: 0 4px; }
  .prijscel .prijs-groot.prijs-tekst { font-size: 20px; margin: 0; }
}

/* Drie zekerheden als brede strook: kop erboven, de punten naast elkaar
   over de volle breedte (naast de kop werden ze te smal en braken de
   titels af). Tot 29 september stonden hier ook twee prijskaarten; die zijn
   op verzoek van de eigenaar weggehaald, de pakkettabel draagt de pakketten. */
.zekerband { display: grid; gap: var(--ruimte-5); }
.zekerband .sectiekop { margin-bottom: 0; }
.zekerband .zekerlijst { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ruimte-5) clamp(24px, 4vw, 48px); }
.zekerlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.zekerlijst li { display: flex; align-items: center; gap: 20px; }
.zeker-icoon {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.zekerlijst strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); line-height: 1.3; }
.zekerlijst li span:not(.zeker-icoon) { display: block; font-size: 14px; line-height: 1.45; color: var(--ink-4); }

/* Vraagblokken onder de prijskaarten (eigenaar, 29 september: "de tekst
   beneden oogt los en random op desktop"). Alles stond in één smalle kolom
   links, elk element met een eigen breedte, en rechts was het leeg. Nu per
   vraag twee even brede kolommen: links de h2 met het antwoordblok
   (.vraagkop), rechts de uitwerking (.vraaginhoud); .vol loopt over beide.
   Een dunne lijn scheidt de vragen. Onder 860px één kolom, in de volgorde
   van de broncode. */
.vraagblok {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ruimte-6) clamp(32px, 6vw, 72px);
  align-items: start;
}
.vraagblok + .vraagblok { border-top: 1px solid var(--border); margin-top: 56px; padding-top: 56px; }
.vraagblok .vol { grid-column: 1 / -1; }
.vraagblok h2 { font-size: clamp(28px, 3vw, 38px); }
.vraagblok h3 { margin-top: 0; }
.vraagkop > :last-child, .vraaginhoud > :last-child { margin-bottom: 0; }
.vraagkop .antwoordblok { margin-bottom: var(--ruimte-5); }
.vraagkop .antwoordblok:last-child { margin-bottom: 0; }
/* De uitwerking begint op de hoogte van de kop, niet van het antwoordblok:
   8px lager, zodat de eerste regel met de bovenkant van de kopletters
   gelijk loopt. */
.vraaginhoud { padding-top: 8px; }
.vraaginhoud p, .vraagkop p { max-width: none; }
.vraaginhoud .iconlijst { max-width: none; }
.vraaginhoud .figuur { margin: 0; }
.vraaginhoud .knoppenrij { margin: var(--ruimte-5) 0 var(--ruimte-4); }
.vraaginhoud .linkrij, .vraagkop .linkrij { flex-direction: column; gap: 8px; }
.vraagblok .tabelscroll { margin: 0; max-width: none; }
.vraagblok > .noot.vol { max-width: 90ch; margin: 0; }
/* Het tarievenblok bovenaan: kop, antwoord en tabel onder elkaar, in de
   tekstbreedte van de rest van de pagina (--maat). Tot 29 september stonden
   kop en antwoord naast elkaar, kop onderaan uitgelijnd; naast het hogere
   antwoordblok bleef links dan ~130px leeg onder de kop van de pagina
   (eigenaar: "grote dode witruimte"). */
.tarievenkop { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.tarievenkop :is(.vraagkop, .vraaginhoud) { max-width: var(--maat); }
.tarievenkop .vraagkop h2 { margin-bottom: 0; }
.tarievenkop .vraaginhoud { padding-top: 0; }
.tarievenkop > .tabelscroll { margin-top: var(--s2); }

/* Twee klassen, dus de stapelregel uit 7c (.kop-raster) wint hier niet vanzelf. */
@media (max-width: 860px) {
  .kop-raster.groot-beeld { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .zekerband .zekerlijst { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 860px) {
  .vraagblok { grid-template-columns: minmax(0, 1fr); }
  .vraagblok + .vraagblok { margin-top: 40px; padding-top: 40px; }
  .vraaginhoud { padding-top: 0; }
}

/* ---- 34. Inhoudssjabloon: één tekstsysteem ------------------------------
   29 september 2026, opdracht eigenaar, voor alle dienst-, doelgroep- en
   kennisbankpagina's (includes/inhoud.php, .tools/inhoud-sjabloon.py).

   Gemeten op /boekhouder-vof/ bij 1278px had elk blok een eigen breedte
   (antwoordblok 575, alinea 612, lijst 673, tabel 870, h2 1120px), vier
   lettergroottes die net van elkaar afweken en losse margeklassen per
   sectie. Nu:
   - één leesbreedte --maat voor alle lopende inhoud; alleen tabellen mogen
     breder, tot de volle tekstkolom, op elke pagina even breed;
   - één typeschaal (body 17, tabel 15, klein 13,5, tabelkop 12, h2 40,
     h3 20);
   - één verticaal ritme met --s1 tot --s5, via de lobotomized owl
     (* + *) in plaats van marges per element.
   Alles hangt onder .inhoud, zodat pagina's die nog niet op het sjabloon
   staan (homepage, stadspagina's) niet verschuiven. Tarieven staat er sinds
   29 september op, onder de pakkettabel. */
:root {
  /* 68ch bodytekst, vastgelegd in rem zodat een kop van 40px dezelfde
     rechterrand krijgt als een alinea van 17px (ch rekent met de letter van
     het element zelf). */
  --maat: 40rem;
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 72px;
  --tekst-tabel: 15px;
  --tekst-klein-vast: 13.5px;
  --kop-hoogte: 73px;   /* plakkende header; 137px als het menu op een eigen regel staat */
}
@media (max-width: 1220px) and (min-width: 901px) { :root { --kop-hoogte: 137px; } }

/* Kop: alleen de foto met bijschrift rechts, verticaal gecentreerd, 4:3.
   Zo is de rechterkolom nooit hoger dan de tekst en valt het lege vlak onder
   de knoppen weg. */
@media (min-width: 861px) {
  .kop-raster:has(.kop-zij.zonder-io > .figuur) { align-items: center; }
}
.kop-raster .kop-zij.zonder-io > .figuur img { height: auto; object-fit: cover; }
/* Kop zonder foto (rekentools, 29 september avond): rechts stond alleen de
   inhoudsopgave; die staat nu in de zijbalk, dus de kop is één kolom, even
   breed als de tekstkolom eronder. */
.kop-raster.enkel { grid-template-columns: minmax(0, 1fr); }
.kop-raster.enkel .kop-tekst { max-width: 46rem; }
.kop-tekst .cta-noot { font-size: var(--tekst-klein-vast); }

/* Raster: tekstkolom en, vanaf 1024px, de zijbalk. */
.inhoud {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: var(--s5);
  padding-bottom: var(--s5);
}
.inhoud-hoofd { min-width: 0; font-size: 17px; line-height: 1.65; }

/* "Op deze pagina": onder 1024px een inklapbaar blok direct onder de kop. */
.io-zij {
  margin: 0 0 var(--s4);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-kaart);
}
.io-zij summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s2) var(--s3);
  font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--brand-ink);
}
.io-zij summary::-webkit-details-marker { display: none; }
.io-zij summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--brand-ink); }
.io-zij[open] summary::after { content: "\2212"; }
.io-zij nav { padding: 0 var(--s3) var(--s3); }
.io-zij ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.io-zij li { margin: 0; }
.io-zij a {
  display: block;
  margin-left: -1px;
  padding: 6px 0 6px var(--s2);
  border-left: 2px solid transparent;
  font-size: var(--tekst-tabel);
  line-height: 1.45;
  color: var(--ink-3);
  text-wrap: pretty;
}
.io-zij a:hover { color: var(--ink); text-decoration: none; border-left-color: var(--border-2); }
.io-zij a[aria-current="true"] { color: var(--ink); font-weight: 600; border-left-color: var(--brand); }

/* Vanaf 1024px: plakkende zijbalk rechts, net onder de vaste header. */
@media (min-width: 1024px) {
  .inhoud {
    grid-template-columns: minmax(0, 1fr) 256px;
    column-gap: var(--s5);
    align-items: start;
  }
  .io-zij {
    grid-column: 2; grid-row: 1;
    position: sticky;
    top: calc(var(--kop-hoogte) + var(--s3));
    max-height: calc(100vh - var(--kop-hoogte) - var(--s4));
    overflow: auto;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .inhoud-hoofd { grid-column: 1; grid-row: 1; }
  .io-zij summary { cursor: default; padding: 0 0 var(--s2); pointer-events: none; }
  .io-zij summary::after, .io-zij[open] summary::after { content: none; }
  .io-zij nav { padding: 0; }
}
/* Tussen 1024 en 1200px een smallere zijbalk, zodat de tekstkolom de volle
   --maat houdt (was 616px, nu 640px; met 616px liepen vier koppen over drie
   regels). */
@media (min-width: 1024px) and (max-width: 1199px) {
  .inhoud { grid-template-columns: minmax(0, 1fr) 216px; column-gap: var(--s4); }
}

/* Secties binnen de tekstkolom: geen eigen vlak of opvulling meer, één
   ritme. Het mintvlak viel binnen een kolom half achter de zijbalk; de
   afwisseling zit nu in het FAQ-vlak onder de tekst. */
.inhoud-hoofd > section { padding: 0; background: none; }
.inhoud-hoofd > section + section { margin-top: var(--s5); }
.inhoud-hoofd .wrap { max-width: none; margin: 0; padding: 0; }

/* Flow: elk blok zet zijn afstand tot het vorige, niets zet een ondermarge. */
.inhoud-hoofd :is(.wrap, .beeldrij > div, .antwoordblok) > * { margin-top: 0; margin-bottom: 0; }
.inhoud-hoofd :is(.wrap, .beeldrij > div, .antwoordblok) > * + * { margin-top: var(--flow-space, var(--s2)); }
.inhoud-hoofd .wrap > h2 { --flow-space: var(--s5); }
.inhoud-hoofd :is(h2, h3) + * { --flow-space: var(--s3); }
.inhoud-hoofd h3 + * { --flow-space: var(--s1); }
.inhoud-hoofd :is(.wrap, .beeldrij > div) > h3 { --flow-space: var(--s4); }
.inhoud-hoofd :is(.wrap, .beeldrij > div) > :is(.tabelscroll, table, ul, ol, .iconlijst, .beeldrij, figure, .kenmerken, .stappenrij, .kaartraster, .termijnraster, .rapportraster, .knoppenrij, .linkrij, .cijferstrook),
.inhoud-hoofd :is(.wrap, .beeldrij > div) > :is(.tabelscroll, table, ul, ol, .iconlijst, .beeldrij, figure, .kenmerken, .stappenrij, .kaartraster, .termijnraster, .rapportraster, .knoppenrij, .linkrij, .cijferstrook) + * { --flow-space: var(--s3); }
.inhoud-hoofd h2 + .antwoordblok { --flow-space: var(--s3); }
/* Een oogmerk boven een h2 (overzichtspagina's, sinds 29 september avond op
   het sjabloon) hoort bij die kop: de sectieruimte komt erboven, niet ertussen. */
.inhoud-hoofd .wrap > .oogmerk { display: block; --flow-space: var(--s5); }
.inhoud-hoofd .wrap > .oogmerk:first-child + h2 { --flow-space: var(--s1); }
.inhoud-hoofd .wrap > .oogmerk + h2 { --flow-space: var(--s1); }

/* Eén breedte voor alle lopende inhoud. */
.inhoud-hoofd :is(.wrap, .beeldrij > div) > :not(.tabelscroll):not(table) { max-width: var(--maat); }
.inhoud-hoofd :is(p, ul, ol, .antwoordblok, .iconlijst, h2, h3) { max-width: var(--maat); }
.inhoud-hoofd .beeldrij { display: block; }
.inhoud-hoofd .beeldrij > * + * { margin-top: var(--s3); }
.inhoud-hoofd :is(.kaartraster, .stappenrij, .termijnraster, .kenmerken, .rapportraster) { width: 100%; }

/* Typeschaal. */
.inhoud-hoofd h2 {
  /* 40px vanaf 1000px breed; op een telefoon 26px, anders lopen lange
     vraagkoppen in een kolom van 350px over vier regels. */
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.12;
  text-wrap: balance;
}
.inhoud-hoofd h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-wrap: balance;
}
.inhoud-hoofd p, .inhoud-hoofd li { text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; }
.inhoud-hoofd p { font-size: 17px; line-height: 1.65; text-align: left; }
.inhoud-hoofd .antwoordblok { width: 100%; }
.inhoud-hoofd .antwoordblok p { font-size: 17px; line-height: 1.65; }
.inhoud-hoofd .tintvlak .antwoordblok { background: var(--surface); border-color: var(--border); }
.inhoud-hoofd :is(.noot, figcaption) { font-size: var(--tekst-klein-vast); }

/* Tabellen: over de volle tekstkolom, overal even breed. */
.inhoud-hoofd .tabelscroll { max-width: none; width: 100%; }
.inhoud-hoofd :is(.prijstabel, .pakkettabel) { width: 100%; max-width: none; }
.inhoud-hoofd :is(.prijstabel, .pakkettabel) :is(td, tbody th) { font-size: var(--tekst-tabel); line-height: 1.55; }
.inhoud-hoofd :is(.prijstabel, .pakkettabel) thead th { font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; }
.inhoud-hoofd :is(.prijstabel, .pakkettabel) tfoot td { font-size: var(--tekst-klein-vast); }
.inhoud-hoofd :is(.prijstabel, .pakkettabel) td.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Een tekstwaarde in een prijskolom ("in je offerte") is geen getal. */
.inhoud-hoofd :is(.prijstabel, .pakkettabel) td.num.num-tekst { font-family: var(--font-ui); }

/* De icoontegels volgden binnen een mintvlak de witte variant; het vlak is
   in de tekstkolom weg, dus weer de gewone mintegel. */
.inhoud-hoofd .tintvlak :is(.iconlijst, .kenmerken) .iconvak { background: var(--brand-tint); border: 0; }

/* Lijst met icoon, titel en zin: één raster, titel en zin op dezelfde
   linkerlijn, samen --maat breed. */
.inhoud-hoofd .iconlijst { display: grid; gap: var(--s3); padding: 0; }
.inhoud-hoofd .iconlijst li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: var(--s2);
  align-items: start;
}
.inhoud-hoofd .iconlijst li > div { min-width: 0; }
.inhoud-hoofd .iconlijst strong { font-size: 17px; line-height: 1.4; margin-bottom: 2px; }
.inhoud-hoofd .iconlijst .toelichting,
.inhoud-hoofd .iconlijst li > div > span { display: block; font-size: 17px; line-height: 1.65; color: var(--ink-3); }

/* ---- 35. Witte achtergrond ------------------------------------------------
   29 september 2026, eigenaar: "is wit niet levendiger?" De pagina stond op
   --bg (#F6F8FB, koel lichtgrijs). Nu wit: de pagina zelf, de plakkende
   header, het kruimelpad en het uitklapmenu op mobiel. --bg zelf blijft
   bestaan als subtiele tint voor tabelkoppen, tabelvoeten, invoervelden,
   rapportkaartvoeten en het auteursblok; daar hoort een verschil met wit.
   Witte kaarten vielen op wit weg (alleen hun dunne rand bleef over) en
   krijgen daarom een zachte schaduw. Contrast: de grijstinten voor tekst zijn
   op --bg afgesteld en halen op wit iets meer, niet minder.
   Terugdraaien = deze sectie weghalen. */
body { background: #fff; }
.site-header { background: rgba(255, 255, 255, 0.94); }
.kruimelpad { background: #fff; }
/* Het uitgeklapte menu op mobiel (zie sectie 5). */
.js .hoofdmenu.open { background: #fff; }
.dienstkaart,
.stappenrij li,
.rapportkaart,
.inhoudsopgave.kaart,
.terugbelblok {
  box-shadow: 0 1px 2px rgba(6, 23, 41, 0.04), 0 6px 16px rgba(6, 23, 41, 0.05);
}
/* ---- 36. Waarom-kaart over de onderkant van de hero ----------------------
   29 september 2026, opdracht eigenaar: de kaart "Daarom kiezen ondernemers"
   moet over de onderkant van de hero vallen, zodat een bezoeker de bovenkant
   meteen ziet. Overlap 80px op desktop, 56px op tablet, 40px onder 768px
   (eerst 140/80/40 met 24px lucht; eigenaar dezelfde avond: "staat iets te hoog",
   daarom ook 56px lucht onder het formulier).

   Het formulier rechts in de hero mag niet worden overlapt. Daarom krijgt de
   hero onderaan precies de overlap plus --hero-lucht aan extra foto: de kaart
   begint dan altijd --hero-lucht onder het formulier, hoe lang dat ook is.
   De bovenpadding ging op het brede scherm van 72 naar 48px, zodat alles
   24px hoger staat.

   Gemeten (hero-meet.py, /_label in router.php): op 1440x900 begint de kaart
   binnen het eerste scherm. Op 1280x800 niet: daar staat het menu op twee
   regels (kopbalk 137px) en loopt het formulier zelf al tot voorbij de vouw;
   de kaart kan daar alleen hoger door het formulier te overlappen, en dat
   is uitgesloten.

   Onder 900px staat het formulier niet in de hero maar in de dialog achter de
   meescrollende balk; daar schoof de kaart al 56px over de foto (sectie 21b)
   en die regels gebruiken nu dezelfde variabele. Zonder JavaScript blijft het
   formulier in de hero staan en is er op een telefoon geen overlap. */
:root { --hero-overlap: 80px; --hero-lucht: 56px; }
@media (max-width: 1024px) { :root { --hero-overlap: 56px; } }
@media (max-width: 767px)  { :root { --hero-overlap: 40px; } }
@media (min-width: 901px) {
  .hero-raster {
    padding-top: 48px;
    padding-bottom: calc(var(--hero-overlap) + var(--hero-lucht));
  }
  .waarom {
    margin-top: calc(var(--hero-overlap) * -1);
    padding-top: 0;
    z-index: 3;
  }
  /* Op de donkere foto viel de lichte schaduw weg; iets dieper. */
  .waarom-kaart { box-shadow: 0 24px 56px rgba(6, 23, 41, 0.22), 0 4px 10px rgba(6, 23, 41, 0.08); }
}
@media (max-width: 900px) {
  body.heeft-mobiele-balk .hero-raster { padding-bottom: calc(var(--hero-overlap) + 48px); }
  body.heeft-mobiele-balk .waarom { margin-top: calc(var(--hero-overlap) * -1); z-index: 3; }
}
/* ---- 37. Zachte hero op tarieven, kennisbank, over ons, werkwijze en de
   voor wie-pagina's ---------------------------------------------------------
   29 september 2026, eigenaar: "een subtiele, onopvallende hero". Sinds de
   pagina wit is (sectie 35) liep de kop zonder overgang door in de tekst.
   Nu een band achter de kop: een heel lichte mint die naar bijna wit
   verloopt, een vleugje merkkleur rechtsboven en een dunne lijn eronder.
   Geen foto op de achtergrond en geen donkere laag: het blijft een kop, geen
   tweede homepagehero. Aan- en uitzetten met de klasse kop-zacht op de
   kopsectie. */
.kop-zacht {
  background:
    radial-gradient(ellipse 55% 85% at 100% 0%, rgba(15, 161, 140, 0.07), rgba(15, 161, 140, 0) 70%),
    linear-gradient(180deg, #F3F9F7 0%, #FAFCFC 100%);
  border-bottom: 1px solid var(--border);
}
/* strak-onder zet de onderpadding op 0; met een eigen vlak moet de foto niet
   tegen de lijn aan liggen. */
.kop-zacht.strak-onder { padding-bottom: clamp(40px, 6vw, 64px); }
/* Het grijze antwoordblok oogt op mint vuil (zie ook sectie 7); hier wit.
   Niet op tarieven: daar staat het antwoord zonder kader (sectie 33) en werd
   het een wit vlak achter de tekst. */
.kop-zacht:not(.kop-tarieven) .antwoordblok { background: #fff; }

/* ---- 38. Cookiemelding ------------------------------------------------------
   30 september 2026, eigenaar: "een subtiele cookiemelding". Een klein wit
   kaartje linksonder, kleine tekst, één knop; geen balk over de hele breedte
   en geen donkere laag, want er valt niets te kiezen. Onder 600px over de
   volle breedte met een marge, en op de homepage boven de mobiele balk
   (sectie 16a) in plaats van eroverheen. Markup en script:
   includes/cookiemelding.php. */
.cookiemelding:not([hidden]) {
  position: fixed;
  left: var(--ruimte-5);
  bottom: calc(var(--ruimte-5) + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: var(--ruimte-4);
  padding: var(--ruimte-3) var(--ruimte-3) var(--ruimte-3) var(--ruimte-4);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-kaart);
  box-shadow: 0 6px 24px rgba(6, 23, 41, 0.08);
  animation: cookiemelding-in 0.3s ease-out;
}
.cookiemelding p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.cookiemelding a { color: var(--ink-3); text-decoration: underline; white-space: nowrap; }
.cookiemelding a:hover { color: var(--brand-ink); }
.cookiemelding-knop {
  flex: none;
  font: 600 13px/1 var(--font-ui);
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pil);
  padding: 9px 16px;
  cursor: pointer;
}
.cookiemelding-knop:hover { background: var(--brand-tint); border-color: var(--brand-300); color: var(--brand-ink); }
.cookiemelding-knop:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
/* Met Google Ads (config.php): tekst boven, Akkoord en Weigeren eronder,
   even groot en in dezelfde stijl. Weigeren mag niet moeilijker zijn dan
   toestemmen, dus geen primaire knop voor Akkoord. */
.cookiemelding.met-keuze:not([hidden]) { flex-direction: column; align-items: stretch; gap: var(--ruimte-3); padding: var(--ruimte-4); }
.cookiemelding-knoppen { display: flex; gap: var(--ruimte-2); margin: 0; }
.cookiemelding-knoppen .cookiemelding-knop { flex: 1; }
/* Beter zichtbaar (eigenaar, 30 september): een melding die over het hoofd
   wordt gezien, levert geen keuze op en telt dus als geen toestemming. Groter
   kaartje met kop, grotere tekst en knoppen, en een merkkleurige rand links.
   De knoppen blijven gelijk van vorm en kleur: Weigeren mag niet minder
   opvallen dan Akkoord (Autoriteit Persoonsgegevens). */
.cookiemelding.met-keuze:not([hidden]) {
  max-width: 440px;
  padding: var(--ruimte-5);
  border-left: 4px solid var(--brand);
  box-shadow: 0 12px 40px rgba(6, 23, 41, 0.16);
}
.cookiemelding.met-keuze p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.cookiemelding.met-keuze a { color: var(--ink-2); }
.cookiemelding-kop { display: block; margin-bottom: var(--ruimte-1); font-size: 17px; font-weight: 600; color: var(--ink); }
.cookiemelding.met-keuze .cookiemelding-knop { font-size: 15px; padding: 13px 18px; }
@media (max-width: 600px) {
  /* Op de telefoon als strook over de volle breedte tegen de onderkant, en op
     de homepage direct boven de mobiele balk (sectie 16a). */
  .cookiemelding.met-keuze:not([hidden]) {
    left: 0; right: 0; bottom: 0;
    max-width: none;
    border-left: 0; border-top: 4px solid var(--brand);
    border-radius: var(--radius-kaart) var(--radius-kaart) 0 0;
    padding: var(--ruimte-5) var(--ruimte-5) calc(var(--ruimte-5) + env(safe-area-inset-bottom, 0px));
  }
  body.heeft-mobiele-balk .cookiemelding.met-keuze:not([hidden]) { bottom: 84px; border-radius: var(--radius-kaart); }
}
@keyframes cookiemelding-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .cookiemelding:not([hidden]) { animation: none; } }
@media (max-width: 600px) {
  .cookiemelding:not([hidden]) {
    left: var(--ruimte-3); right: var(--ruimte-3);
    bottom: calc(var(--ruimte-3) + env(safe-area-inset-bottom, 0px));
    max-width: none;
  }
}
@media (max-width: 900px) {
  body.heeft-mobiele-balk .cookiemelding:not([hidden]) { bottom: calc(84px + var(--ruimte-2) + env(safe-area-inset-bottom, 0px)); }
}