/* Gebouwd door site/build.py: merk/tokens.css (bron van waarheid voor kleur,
   font en maat) gevolgd door site/static/stijl.css. Niet met de hand wijzigen. */
/* Verbeter Mijn Website — huisstijl-tokens (richting C "De Meetlat", gekozen 2026-08-30)
   Bron van waarheid: merk/huisstijl.md. Elk middel (pdf, site, paneel, dashboard) laadt dit bestand.
   Fonts: Archivo (koppen) + Public Sans (tekst), Google Fonts, OFL.
   De marketingsite host ze sinds ruling 23 zélf (site/static/fonts/, @font-face
   staat in site/static/stijl.css) — geen verzoek meer naar een derde partij.
   Andere middelen die dit bestand laden regelen hun eigen fontbron. */
:root {
  /* kernkleuren */
  --vmw-kobalt:  #2447C7;  /* primair: knoppen, links, logo, nieuwe cijfers — wit erop 7,5:1 */
  --vmw-oranje:  #E8600A;  /* accent: alleen groot/grafisch (oude cijfers, meetpunt) — nooit kleine tekst (3,4:1) */
  --vmw-inkt:    #232A35;  /* alle lopende tekst — op wit 14:1 */
  --vmw-wit:     #FFFFFF;  /* achtergrond */
  --vmw-mist:    #EDF1F6;  /* rustvlakken, tabelzebra's, kaders */
  --vmw-lijn:    #DCE3EC;  /* randen, scheidingen */

  /* afgeleiden */
  --vmw-kobalt-donker: #1C38A0;  /* hover/active van kobalt */
  --vmw-gedempt:       #5B6472;  /* bijschriften, secundaire tekst — op wit 6,0:1 */
  /* Voet: inkt (#232A35) verder ingekookt tot een donkere grond, zodat de
     laatste sectie van een pagina een echte afsluiting krijgt in plaats van
     nog een wit vlak. Geen nieuwe merkkleur — een afgeleide van inkt, zoals
     kobalt-donker dat van kobalt is. Contrast nagemeten: wit erop 15,5:1,
     --vmw-voet-tekst erop 8,0:1 (beide ruim boven de 4,5:1 die WCAG AA
     vraagt). Kobalt erop haalt maar 2,1:1, dus links in de voet zijn wit. */
  --vmw-voet:          #1A2233;  /* donkere grond: de voet en de donkere banden (site en rapport) */
  --vmw-voet-tekst:    #AEB9CA;  /* secundaire tekst op de voet — 8,0:1 */
  /* Kobalt zelf haalt op de donkere grond maar 2,1:1. Voor het haalbare
     cijfer en de nadruk op de donkere banden van de site (meetlat, citaat,
     sinds 27-09-2026) dus kobalt opgelicht: op --vmw-voet 7,8:1. */
  --vmw-kobalt-licht:  #9DB2FF;

  /* statuskleuren — alleen dashboard & klantpaneel, nooit marketing */
  --vmw-inorde:  #1E7A46;  /* check geslaagd, "alles in orde" — op wit 4,9:1 */
  --vmw-letop:   #B45309;  /* waarschuwing — op wit 4,5:1 */
  --vmw-fout:    #BE2D1F;  /* storing, gezakt cijfer — op wit 5,4:1 */

  /* typografie */
  --vmw-kop:   'Archivo', 'Segoe UI', system-ui, sans-serif;
  --vmw-tekst: 'Public Sans', 'Segoe UI', system-ui, sans-serif;
  /* schaal ×1,25 (px): 13 etiket · 16 tekst · 20 tussenkop · 25 kop3 · 31 kop2 · 39 kop1 · 49 held */
  --vmw-r-13:13px; --vmw-r-16:16px; --vmw-r-20:20px; --vmw-r-25:25px;
  --vmw-r-31:31px; --vmw-r-39:39px; --vmw-r-49:49px;

  /* vorm */
  --vmw-radius: 6px;          /* knoppen, kaarten; nooit ronder dan 8px */
  --vmw-schaduw: 0 1px 3px rgba(35,42,53,.08);
}
/* basisregels */
.vmw-etiket { font: 600 var(--vmw-r-13)/1.3 var(--vmw-tekst); letter-spacing:.12em; text-transform:uppercase; color:var(--vmw-gedempt); }
.vmw-cijfer { font-family:var(--vmw-kop); font-weight:800; font-variant-numeric:tabular-nums; }
.vmw-knop   { font:600 var(--vmw-r-16)/1 var(--vmw-tekst); background:var(--vmw-kobalt); color:#fff;
              border-radius:var(--vmw-radius); padding:12px 20px; border:0; }
.vmw-knop:hover { background:var(--vmw-kobalt-donker); }

/* ============================================================================
   Marketingsite Verbeter Mijn Website — huisstijl "De Meetlat".

   Dit bestand bevat alléén opmaak; kleuren, fonts en maten komen uit
   merk/tokens.css, dat build.py hierboven plakt. Nooit een losse hexcode hier:
   staat een kleur niet in de tokens, dan hoort hij nog niet te bestaan.

   Volgorde: grond · hulpstukken · kop · secties · blokken · voet.
   Mobiel eerst; media queries verbreden, ze repareren niet.
   ============================================================================ */

/* --- lettertypen (zelf gehost) --------------------------------------------
   RULING 23: geen enkel verzoek meer naar een derde partij. De site laadde
   Archivo en Public Sans eerst van fonts.googleapis.com; dat is een extra
   verbinding, een privacylek naar Google én een afhankelijkheid die je niet
   in de hand hebt. Nu staan beide in site/static/fonts/.

   Het zijn de onbewerkte latin-subsetbestanden van Google Fonts zelf (OFL),
   opgehaald op 2026-08-30 — bewust niet verder uitgedund, zodat ze
   byte-voor-byte na te maken zijn met:
     Archivo     https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.woff2
     Public Sans https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2
   (de URL's uit het css2-antwoord met een Chrome-User-Agent; latin-subset).

   Beide zijn variabele fonts met één wght-as, dus één bestand dekt alle drie
   de gewichten die de huisstijl gebruikt — vandaar de bereikvorm
   `font-weight: 600 800` in plaats van drie losse regels naar hetzelfde
   bestand. `font-display: swap` houdt de tekst zichtbaar terwijl het font
   nog onderweg is; de fallback-stack in de tokens doet dat eerste beeld. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/public-sans-latin-var.woff2') format('woff2');
}

/* --- grond ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--vmw-wit);
  color: var(--vmw-inkt);
  font: 400 var(--vmw-r-16)/1.65 var(--vmw-tekst);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--vmw-kop);
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-weight: 800; font-size: clamp(35px, 6.2vw, 49px); letter-spacing: -.025em; }
h2 { font-weight: 700; font-size: clamp(25px, 3.6vw, 31px); }
h3 { font-weight: 600; font-size: var(--vmw-r-20); }

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

a { color: var(--vmw-kobalt); text-underline-offset: .18em; }
a:hover { color: var(--vmw-kobalt-donker); }

:focus-visible {
  outline: 3px solid var(--vmw-kobalt);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- hulpstukken ---------------------------------------------------------- */
.omhulsel {
  max-width: 1060px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

.sectie { padding-block: clamp(44px, 7vw, 80px); }
.sectie--mist { background: var(--vmw-mist); }

/* De kop mag kort afbreken, de inleiding eronder niet: elk zijn eigen maat. */
.sectie-kop { max-width: 60ch; }
.sectie-kop h2 { max-width: 24ch; }
.sectie-kop .vmw-etiket { margin: 0 0 10px; }
.sectie-intro {
  margin-top: 12px;
  max-width: 60ch;
  font-size: var(--vmw-r-20);
  line-height: 1.5;
  color: var(--vmw-gedempt);
}

/* Lopende tekst blijft leesbaar: nooit breder dan ~65 tekens. */
.tekst { max-width: 65ch; }
.sectie-kop + .tekst { margin-top: 18px; }
.tekst p + p { margin-top: 16px; }

.verder { margin-top: 22px; font-weight: 600; }
.verder a::after { content: " →"; }

.ondertekening {
  margin-top: 22px;
  font-family: var(--vmw-kop);
  font-weight: 600;
  font-size: var(--vmw-r-20);
}

/* De knop uit de tokens is een <button>; als link krijgt hij hier zijn maat. */
.vmw-knop {
  display: inline-block;
  padding: 14px 24px;
  text-decoration: none;
  color: var(--vmw-wit);
  cursor: pointer;
  transition: background-color .15s ease-in-out;
}
.vmw-knop:hover { color: var(--vmw-wit); }

/* Naar de inhoud springen zonder muis. */
.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2;
  background: var(--vmw-kobalt);
  color: var(--vmw-wit);
  padding: 12px 18px;
  border-radius: 0 0 var(--vmw-radius) 0;
  font-weight: 600;
  text-decoration: none;
}
.overslaan:focus { left: 0; color: var(--vmw-wit); }

/* --- kop ------------------------------------------------------------------ */
.baken { height: 6px; background: var(--vmw-kobalt); }

.kop { border-bottom: 1px solid var(--vmw-lijn); }
.kop-binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px clamp(16px, 4vw, 32px);
  padding-block: 16px;
}

.merk { display: inline-flex; flex: none; }
.merk svg { display: block; height: 26px; width: auto; }

/* Geen uitklapmenu: zes korte woorden die op een smal scherm gewoon doorlopen
   naar de volgende regel. Werkt zonder javascript en er valt niets te breken. */
.menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px clamp(14px, 3vw, 24px);
}
.menu a {
  display: inline-block;
  padding: 5px 0;
  font-weight: 500;
  color: var(--vmw-inkt);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--vmw-kobalt); border-bottom-color: var(--vmw-lijn); }
.menu a[aria-current="page"] { color: var(--vmw-kobalt); border-bottom-color: var(--vmw-kobalt); }

@media (max-width: 719px) {
  .menu { width: 100%; }
  .menu a { font-size: var(--vmw-r-13); letter-spacing: .01em; }
}
@media (min-width: 720px) {
  .menu { margin-left: auto; }
}

/* --- lijniconen ----------------------------------------------------------- */
/* Eén vorm voor alle iconen: 2px lijn in kobalt, ronde uiteinden, geen
   vulling. currentColor houdt de kleur in de stijl in plaats van in de svg's
   zelf, zodat er geen hexcode in de HTML terechtkomt. */
.icoon {
  display: block;
  width: 32px;
  height: 32px;
  color: var(--vmw-kobalt);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icoon--klein { width: 20px; height: 20px; }

/* --- hero ----------------------------------------------------------------- */
/* Sinds 27-09-2026 op een kobalt vlak (wit erop 7,5:1), met onderaan de
   maatstreepjes van de meetlat als rand. De knop draait om: wit met kobalt. */
.hero {
  position: relative;
  padding-block: clamp(48px, 8vw, 88px) clamp(56px, 8vw, 96px);
  background: var(--vmw-kobalt);
  color: var(--vmw-wit);
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 14px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .4) 0 2px, transparent 2px 24px);
}
.hero h1 { max-width: 17ch; }
.hero .vmw-etiket { color: var(--vmw-wit); opacity: .85; margin: 0 0 12px; }
.hero-intro {
  margin-top: 20px;
  max-width: 54ch;
  font-size: clamp(var(--vmw-r-16), 2.2vw, var(--vmw-r-20));
  line-height: 1.5;
  color: rgba(255, 255, 255, .9);
}
.hero-knop { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.hero .vmw-knop, .sectie--kobalt .vmw-knop { background: var(--vmw-wit); color: var(--vmw-kobalt); }
.hero .vmw-knop:hover, .sectie--kobalt .vmw-knop:hover { background: var(--vmw-mist); color: var(--vmw-kobalt-donker); }
.hero a:not(.vmw-knop), .sectie--kobalt a:not(.vmw-knop) { color: var(--vmw-wit); font-weight: 600; }
.hero :focus-visible, .sectie--kobalt :focus-visible, .sectie--donker :focus-visible { outline-color: var(--vmw-wit); }

.hero--kort { padding-block: clamp(40px, 6vw, 64px) clamp(44px, 6vw, 60px); }
.hero--kort h1 { font-size: clamp(31px, 5vw, 39px); max-width: 20ch; }
.hero--kort .hero-intro { max-width: 58ch; }

/* --- hero met beeld ------------------------------------------------------- */
/* Mobiel: tekst, dan beeld — eerst lezen waar je bent, dan kijken. Vanaf
   900px staan ze naast elkaar. Onder de 900px zou het beeld in een halve
   kolom een postzegel worden; dan liever onder elkaar. */
.hero--beeld .hero-tekst h1 { max-width: 15ch; }
.hero-visual { margin: 36px 0 0; }
.hero-kader { position: relative; }

@media (min-width: 900px) {
  .hero-binnen {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: clamp(28px, 4vw, 52px);
  }
  .hero-visual { margin-top: 0; }
}

/* Browserkader: een balkje met drie bolletjes boven de schermafdruk. Puur
   css — een schermafdruk van een website hoort er als een website uit te
   zien, en dat kost hier geen enkele byte aan beeld. */
.kader {
  border: 1px solid var(--vmw-lijn);
  border-radius: var(--vmw-radius);
  overflow: hidden;
  background: var(--vmw-wit);
  box-shadow: var(--vmw-schaduw);
}
.hero .kader { border-color: transparent; box-shadow: 0 24px 60px rgba(10, 20, 60, .35); }
.kader-balk {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--vmw-mist);
  border-bottom: 1px solid var(--vmw-lijn);
}
.kader-balk span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vmw-lijn);
}
.kader img { display: block; width: 100%; }

/* De cijferbadge zweeft over de hoek van het kader. Het cijfer is kobalt,
   niet oranje: de cijferlogica van de huisstijl zegt nieuw/haalbaar =
   kobalt. De badge zelf is wit, want hij staat op het kobalt van de hero. */
.cijferbadge {
  position: absolute;
  right: -10px;
  bottom: -18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 84px;
  padding: 12px 14px 10px;
  border-radius: var(--vmw-radius);
  background: var(--vmw-wit);
  color: var(--vmw-gedempt);
  box-shadow: 0 14px 36px rgba(10, 20, 60, .3);
}
.cijferbadge .vmw-cijfer { font-size: var(--vmw-r-39); line-height: 1; color: var(--vmw-kobalt); }
.cijferbadge-bij {
  font: 600 11px/1.2 var(--vmw-tekst);
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* 34px: de badge steekt 18px onder het kader uit, dus daar moet het
   bijschrift onderdoor kunnen zonder ertegenaan te lopen. */
.hero-bijschrift {
  margin-top: 34px;
  max-width: 46ch;
  font-size: var(--vmw-r-13);
  color: rgba(255, 255, 255, .85);
}

@media (max-width: 479px) {
  /* Op de smalste telefoons zou de badge over de schermafdruk heen vallen en
     hem juist onleesbaar maken; daar hangt hij netjes binnen de hoek. */
  .cijferbadge { right: 8px; bottom: 8px; min-width: 68px; padding: 8px 10px; }
  .cijferbadge .vmw-cijfer { font-size: var(--vmw-r-25); }
}

/* --- kaarten -------------------------------------------------------------- */
.kaarten {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  margin-top: 32px;
}
.kaart {
  background: var(--vmw-mist);
  border-radius: var(--vmw-radius);
  padding: 24px 22px 26px;
}
.sectie--mist .kaart { background: var(--vmw-wit); }
/* Maatstreepje: het beeldmerk in het klein, als aanhef van elke kaart. */
.kaart::before {
  content: "";
  display: block;
  width: 26px;
  height: 4px;
  margin-bottom: 16px;
  border-radius: 2px;
  background: var(--vmw-kobalt);
}
/* Met een icoon is dát de aanhef van de kaart; twee merktekens boven elkaar
   is er één te veel. */
.kaart--icoon::before { display: none; }
.kaart--icoon .icoon { margin-bottom: 14px; }
.kaart p { margin-top: 8px; color: var(--vmw-gedempt); }

/* Kaart met een kerngetal: wit, met een kobalt bovenrand in plaats van het
   maatstreepje, en het getal groot als aanhef. */
.kaart--getal { background: var(--vmw-wit); border-top: 4px solid var(--vmw-kobalt); box-shadow: 0 10px 30px rgba(20, 40, 90, .08); }
.kaart--getal::before { display: none; }
.kaart .kerngetal { margin: 0 0 12px; color: var(--vmw-gedempt); }
.kerngetal .vmw-cijfer { font-size: var(--vmw-r-39); line-height: 1; color: var(--vmw-kobalt); }
.kerngetal small { font-size: var(--vmw-r-13); font-weight: 600; }

/* --- stappen (de meetlat) ------------------------------------------------- */
.stappen { margin-top: 32px; counter-reset: stap; }
.stap {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  column-gap: clamp(14px, 3vw, 22px);
  padding: 18px 0;
  border-top: 1px solid var(--vmw-lijn);
}
.stap:last-child { border-bottom: 1px solid var(--vmw-lijn); }
.stap::before {
  counter-increment: stap;
  content: counter(stap);
  grid-row: 1 / span 2;
  font-family: var(--vmw-kop);
  font-weight: 800;
  font-size: var(--vmw-r-31);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--vmw-kobalt);
}
.stap p { margin-top: 4px; max-width: 62ch; color: var(--vmw-gedempt); }

/* Het icoon staat rechts in de rij, in een rustvlakje, en het volgnummer
   blijft links de hoofdzaak. Zo vormen de zeven iconen een rail langs de
   rechterkant zonder met de nummers te concurreren. */
.stap--icoon { grid-template-columns: 2.4rem 1fr auto; }
.stap--icoon .icoon {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  box-sizing: content-box;
  padding: 10px;
  border-radius: var(--vmw-radius);
  background: var(--vmw-mist);
}
.sectie--mist .stap--icoon .icoon { background: var(--vmw-wit); }

/* --- uitgelichte prijs ---------------------------------------------------- */
/* Eén rij uit de tabel getild. Kobalt kader met een mist-grond: de kleur die
   de huisstijl voor "dit is de hoofdweg" heeft, en geen oranje — die blijft
   voor cijfers en de ene markering per pagina. */
.uitgelicht {
  max-width: 48rem;
  margin-top: 32px;
  padding: 22px 24px 24px;
  border: 2px solid var(--vmw-kobalt);
  border-radius: var(--vmw-radius);
  background: var(--vmw-mist);
}
.sectie--mist .uitgelicht { background: var(--vmw-wit); }
.uitgelicht .vmw-etiket { color: var(--vmw-kobalt); margin: 0 0 8px; }
.uitgelicht-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 20px;
}
.uitgelicht-kop h3 { font-size: var(--vmw-r-25); font-weight: 700; }
.uitgelicht-prijs { line-height: 1.2; white-space: nowrap; }
.uitgelicht-prijs .vmw-cijfer {
  font-size: var(--vmw-r-31);
  line-height: 1;
  color: var(--vmw-kobalt);
}
.uitgelicht-btw { font-size: var(--vmw-r-13); color: var(--vmw-gedempt); }
.uitgelicht-kern { margin-top: 10px; max-width: 52ch; color: var(--vmw-gedempt); }
/* De belofte waar het bij deze prijs om draait, zwaarder dan de rest. */
.uitgelicht-belofte {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--vmw-lijn);
  font-weight: 600;
  color: var(--vmw-inkt);
}
.sectie--mist .uitgelicht-belofte { border-top-color: var(--vmw-mist); }

/* --- prijstabel ----------------------------------------------------------- */
.tabel {
  width: 100%;
  /* Niet breder dan de leesbreedte: anders staat de prijs een halve meter van
     de dienst waar hij bij hoort. */
  max-width: 48rem;
  margin-top: 32px;
  border-collapse: collapse;
  text-align: left;
}
.tabel th, .tabel td { padding: 14px 12px; }
.tabel thead th {
  padding-block: 0 10px;
  font: 600 var(--vmw-r-13)/1.3 var(--vmw-tekst);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vmw-gedempt);
  border-bottom: 1px solid var(--vmw-lijn);
}
.tabel tbody th {
  font: 600 var(--vmw-r-16)/1.4 var(--vmw-tekst);
  vertical-align: top;
}
.tabel tbody tr { border-bottom: 1px solid var(--vmw-lijn); }
.tabel tbody tr:nth-child(odd) { background: var(--vmw-mist); }
.sectie--mist .tabel tbody tr:nth-child(odd) { background: var(--vmw-wit); }
.tabel .kern {
  display: block;
  margin-top: 4px;
  max-width: 46ch;
  font-size: var(--vmw-r-13);
  font-weight: 400;
  line-height: 1.45;
  color: var(--vmw-gedempt);
}
.tabel .prijs {
  text-align: right;
  white-space: nowrap;
  vertical-align: top;
  font-family: var(--vmw-kop);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tabel thead .prijs { font-family: var(--vmw-tekst); }
.tabel-noot { margin-top: 14px; font-size: var(--vmw-r-13); color: var(--vmw-gedempt); }

/* --- case ----------------------------------------------------------------- */
.case { margin-top: 32px; display: grid; gap: clamp(20px, 4vw, 36px); }
.case + .case { margin-top: clamp(36px, 6vw, 56px); }
.case-tekst p { margin-top: 12px; max-width: 62ch; }
.case-adres { font-weight: 600; }
.case-beeld {
  border: 1px solid var(--vmw-lijn);
  border-radius: var(--vmw-radius);
  overflow: hidden;
  background: var(--vmw-wit);
}
.case-beeld img { display: block; width: 100%; }
@media (min-width: 860px) {
  .case { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  /* Een voor/na-vergelijking wil de volle breedte: in een halve kolom is er
     niets meer te zien, laat staan te vergelijken. */
  .case--breed { grid-template-columns: 1fr; }
  /* Vangnet: een case zonder beeld hield een lege rechterkolom over, en dat
     zag je alleen op desktop (gemeld in de eindgate van golf 3). De home
     heeft nu wél beeld, maar de volgende case die zonder wordt toegevoegd
     mag dat gat niet opnieuw laten vallen. `:only-child` klopt hier precies:
     is de tekst het enige kind, dan is er geen beeld. */
  .case-tekst:only-child { grid-column: 1 / -1; }
}

/* --- tweeluik: stil voor/na, zonder schuif ---------------------------------- */
/* De oude site boven de nieuwe, elk met zijn etiket. Alleen op de home; de
   echte vergelijking van dichtbij staat op /voorbeelden/. */
.tweeluik { margin: 0; display: grid; gap: 12px; }
.tweeluik-laag {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--vmw-lijn);
  border-radius: var(--vmw-radius);
  background: var(--vmw-wit);
}
.tweeluik-laag img { display: block; width: 100%; height: auto; }
.tweeluik-laag--oud .vergelijk-etiket { left: 12px; }
.tweeluik-laag--nieuw .vergelijk-etiket { left: 12px; }
.tweeluik-bijschrift {
  margin-top: 4px;
  font-size: var(--vmw-r-13);
  color: var(--vmw-gedempt);
}

/* --- voor/na-vergelijking -------------------------------------------------- */
/* Twee toestanden. Kaal (zonder javascript) staan de screenshots onder elkaar,
   elk met zijn etiket: gewoon twee plaatjes, niets kapot. Zodra slider.js
   `vergelijk--actief` toevoegt, schuiven ze over elkaar en verschijnt de
   scheidslijn. De bediening blijft de range-input eronder. */
.vergelijk { margin: 0; }

.vergelijk-beeld { display: grid; gap: 12px; }
/* Slepen is schuiven, geen selecteren of een plaatje verslepen. */
.vergelijk--actief .vergelijk-beeld, .vergelijk--kader .vergelijk-beeld { -webkit-user-select: none; user-select: none; }
.vergelijk-beeld img { -webkit-user-drag: none; }

.vergelijk-laag {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--vmw-lijn);
  border-radius: var(--vmw-radius);
}
.vergelijk-laag img { display: block; width: 100%; }

.vergelijk-etiket {
  position: absolute;
  top: 12px;
  padding: 5px 11px;
  border-radius: var(--vmw-radius);
  background: var(--vmw-inkt);
  color: var(--vmw-wit);
  font: 600 var(--vmw-r-13)/1.3 var(--vmw-tekst);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vergelijk-laag--oud .vergelijk-etiket { left: 12px; }
.vergelijk-laag--nieuw .vergelijk-etiket { right: 12px; }

/* Zonder schuif doet de range niets; dan hoort hij er ook niet te staan. */
.vergelijk-bediening, .vergelijk-greep { display: none; }

.vergelijk-bijschrift {
  margin-top: 12px;
  max-width: 70ch;
  font-size: var(--vmw-r-13);
  color: var(--vmw-gedempt);
}

/* --- vergelijking, mét javascript ----------------------------------------- */
.vergelijk--actief .vergelijk-beeld {
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--vmw-lijn);
  border-radius: var(--vmw-radius);
  cursor: ew-resize;
  /* Horizontaal slepen is van de schuif, verticaal blijft van de pagina. */
  touch-action: pan-y;
}
.vergelijk--actief .vergelijk-laag { border: 0; border-radius: 0; }

/* De nieuwe site ligt onderop en bepaalt de hoogte; de oude ligt eroverheen en
   wordt vanaf links weggeknipt. clip-path in plaats van breedte, want anders
   krimpt het beeld mee en lopen de twee lagen niet meer gelijk. */
.vergelijk--actief .vergelijk-laag--oud {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: inset(0 calc(100% - var(--onthul, 50%)) 0 0);
}

.vergelijk--actief .vergelijk-greep {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--onthul, 50%);
  z-index: 2;
  width: 3px;
  margin-left: -1.5px;
  /* Kobalt met een witte rand eromheen: zo blijft de scheidslijn zichtbaar op
     een witte kop én op het donkerblauwe vlak van de nieuwe site. */
  background: var(--vmw-kobalt);
  box-shadow: 0 0 0 1px var(--vmw-wit);
}
.vergelijk--actief .vergelijk-greep::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border: 3px solid var(--vmw-wit);
  border-radius: 50%;
  background: var(--vmw-kobalt);
  box-shadow: var(--vmw-schaduw);
}

.vergelijk--actief .vergelijk-bediening { display: block; margin-top: 16px; }
.vergelijk-schuif { width: 100%; margin: 0; accent-color: var(--vmw-kobalt); }

/* Eén rustige wenk dat je aan de knop kunt trekken — drie keer, dan stil. */
@keyframes vergelijk-wenk {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.14); }
}
.vergelijk--actief .vergelijk-greep::after {
  animation: vergelijk-wenk 1.8s ease-in-out 3;
}
@media (prefers-reduced-motion: reduce) {
  .vergelijk--actief .vergelijk-greep::after { animation: none; }
}

/* --- vergelijking in het kader van de hero -------------------------------- */
/* In de hero liggen de lagen altijd over elkaar, ook zonder javascript: dan
   staat de streep stil op de helft. Het kader zelf is de rand, en de range
   blijft onzichtbaar tot hij toetsenbordfocus krijgt. */
.vergelijk--kader .vergelijk-beeld {
  display: block;
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  container-type: inline-size;
}
.vergelijk--kader .vergelijk-laag { border: 0; border-radius: 0; }
.vergelijk--kader .vergelijk-laag--oud {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: inset(0 calc(100% - var(--onthul, 50%)) 0 0);
}
.vergelijk--kader.vergelijk--actief .vergelijk-beeld { border: 0; border-radius: 0; }
.vergelijk--kader .vergelijk-greep { display: block; }
/* De streep schuift met transform (100cqw = de breedte van het beeld), niet
   met left: een verschuiving via left telt Lighthouse als verspringen. */
.vergelijk--kader .vergelijk-greep, .vergelijk--kader .vergelijk-greep::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  transform: translateX(calc(var(--onthul-deel, .5) * 100cqw));
  z-index: 2;
  width: 3px;
  margin-left: -1.5px;
  background: var(--vmw-wit);
  box-shadow: 0 0 0 1px rgba(35, 42, 53, .2);
}
.vergelijk--kader .vergelijk-greep::after {
  content: "";
  top: 50%;
  bottom: auto;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: 0;
  transform: translate(-50%, -50%);
  border: 3px solid var(--vmw-wit);
  border-radius: 50%;
  background: var(--vmw-kobalt);
  box-shadow: 0 4px 14px rgba(10, 20, 60, .35);
}
.vergelijk--kader.vergelijk--actief .vergelijk-bediening { display: block; }
.vergelijk--kader .vergelijk-bediening {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.hero-kader:has(.vergelijk-schuif:focus-visible) .kader { outline: 3px solid var(--vmw-wit); outline-offset: 3px; }
.vergelijk--kader .vergelijk-etiket { top: 10px; padding: 4px 9px; font-size: 11px; }

/* --- donkere banden (meetlat, citaat) -------------------------------------- */
/* Dezelfde grond als de voet. Kobalt haalt daarop de contrasteis niet, dus
   nadruk en het haalbare cijfer zijn --vmw-kobalt-licht (7,8:1). */
.sectie--donker { background: var(--vmw-voet); color: var(--vmw-wit); }
.sectie--donker p { color: var(--vmw-voet-tekst); }
.sectie--donker .vmw-etiket { color: var(--vmw-voet-tekst); margin: 0 0 10px; }
.sectie--donker a { color: var(--vmw-wit); }

/* --- meetlat ------------------------------------------------------------- */
.meetlat-binnen { display: grid; gap: 36px; align-items: center; }
.meetlat-tekst p { margin-top: 12px; max-width: 46ch; }
@media (min-width: 860px) {
  .meetlat-binnen { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; }
}
.meetlat-schaal { position: relative; height: 124px; margin-inline: 14px; }
.meetlat-baan {
  position: absolute;
  inset: 66px 0 auto;
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .12);
}
.meetlat-baan::after {
  content: "";
  position: absolute;
  inset: 16px 0 auto;
  height: 10px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .45) 0 1px, transparent 1px 10%);
}
.meetlat-vul {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--haalbaar) * 1%);
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .3) calc(var(--nu) / var(--haalbaar) * 100%), var(--vmw-kobalt-licht) 0);
  transform-origin: left;
  transition: transform 1.3s cubic-bezier(.2, .7, .2, 1);
}
.meetlat-punt {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  text-align: center;
  line-height: 1;
  transition: opacity .4s ease 1s;
}
.meetlat-punt::after {
  content: "";
  position: absolute;
  top: 63px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border: 3px solid var(--vmw-voet);
  border-radius: 50%;
  background: currentColor;
}
.meetlat-punt .vmw-cijfer { display: block; font-size: var(--vmw-r-39); color: inherit; }
.meetlat-punt small {
  display: block;
  margin-top: 4px;
  font: 600 11px/1 var(--vmw-tekst);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vmw-voet-tekst);
}
.meetlat-schaal .meetlat-oud { left: calc(var(--nu) * 1%); color: var(--vmw-oranje); }
.meetlat-schaal .meetlat-nieuw { left: calc(var(--haalbaar) * 1%); color: var(--vmw-kobalt-licht); }
/* Elk getal onder zijn eigen streepje; met space-between stond 50 ernaast. */
.sectie--donker .meetlat-tal {
  position: absolute;
  inset: 102px 0 auto;
  height: 14px;
  font-size: 11px;
  color: var(--vmw-voet-tekst);
}
.meetlat-tal span { position: absolute; top: 0; transform: translateX(-50%); }
.meetlat-tal span:nth-child(2) { left: 50%; }
.meetlat-tal span:nth-child(3) { left: 100%; }

/* --- verhaal: stappen met beeld ---------------------------------------------- */
.verhaal-stappen { counter-reset: verhaal; margin-top: 16px; }
.verhaal-stap { display: grid; gap: 28px; align-items: center; margin-top: clamp(40px, 7vw, 72px); }
.verhaal-tekst::before {
  counter-increment: verhaal;
  content: counter(verhaal);
  display: block;
  margin-bottom: 8px;
  font: 800 64px/1 var(--vmw-kop);
  color: var(--vmw-kobalt);
  opacity: .2;
}
.verhaal-tekst h3 { font-size: var(--vmw-r-25); font-weight: 700; }
.verhaal-tekst p { margin-top: 12px; max-width: 46ch; font-size: 17px; color: var(--vmw-gedempt); }
@media (min-width: 860px) {
  .verhaal-stap { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 72px); }
  .verhaal-stap:nth-child(even) .verhaal-beeld { order: -1; }
}
.verhaal-beeld img { display: block; width: 100%; height: auto; }
.verhaal-beeld--rapport img {
  width: 62%;
  margin: 12px auto;
  border: 1px solid var(--vmw-lijn);
  border-radius: var(--vmw-radius);
  box-shadow: 0 20px 50px rgba(20, 40, 90, .18);
  transform: rotate(-2.5deg);
}
.ontwerpen { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ontwerpen figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--vmw-lijn);
  border-radius: var(--vmw-radius);
  background: var(--vmw-wit);
  box-shadow: 0 10px 30px rgba(20, 40, 90, .1);
}
.ontwerpen figcaption { padding: 9px 12px; font-size: var(--vmw-r-13); font-weight: 600; }
.apparaten { position: relative; padding-bottom: 12%; }
.apparaat-laptop {
  width: 86%;
  overflow: hidden;
  border: 10px solid var(--vmw-voet);
  border-bottom-width: 16px;
  border-radius: 10px 10px 4px 4px;
  box-shadow: 0 20px 50px rgba(20, 40, 90, .2);
}
.apparaat-telefoon {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 27%;
  overflow: hidden;
  border: 7px solid var(--vmw-voet);
  border-radius: 20px;
  background: var(--vmw-wit);
  box-shadow: 0 20px 40px rgba(20, 40, 90, .3);
}
.verhaal-bijschrift { margin-top: 14px; font-size: var(--vmw-r-13); color: var(--vmw-gedempt); }

/* --- citaat -------------------------------------------------------------- */
.citaat-kop { max-width: 24ch; font-size: clamp(28px, 4.4vw, 39px); font-weight: 800; line-height: 1.2; }
.citaat-kop em { font-style: normal; color: var(--vmw-kobalt-licht); }
.citaat .tekst { margin-top: 24px; }
.citaat .ondertekening { color: var(--vmw-wit); }

/* --- beweging (beweging.js) ------------------------------------------------ */
/* `wacht` zet alleen het script, en alleen op wat bij het laden nog buiten
   beeld is. Zonder script staat alles in de eindstand. */
[data-beweeg="onthul"] { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
[data-beweeg="onthul"].wacht { opacity: 0; transform: translateY(22px); }
.kaarten > :nth-child(2) { transition-delay: .1s; }
.kaarten > :nth-child(3) { transition-delay: .2s; }
.wacht .meetlat-vul { transform: scaleX(0); }
.wacht .meetlat-punt { opacity: 0; }

/* --- formulier ------------------------------------------------------------ */
.formulier-noscript {
  max-width: 30rem;
  margin: 20px 0 0;
  padding: 12px 14px;
  background: var(--vmw-mist);
  border-radius: var(--vmw-radius);
  color: var(--vmw-inkt);
}
.formulier-noscript a { color: var(--vmw-kobalt); }
.formulier { margin-top: 32px; max-width: 30rem; }

/* Formulier links, het voorbeeldrapport rechts (vanaf 860px). Het beeld staat
   ná het formulier in de bron, dus op een telefoon begint iemand meteen bij
   de velden en scrolt hij niet eerst langs een plaatje. */
@media (min-width: 860px) {
  .formulier-binnen--beeld {
    display: grid;
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    align-items: start;
    gap: clamp(28px, 5vw, 56px);
  }
  .formulier-binnen--beeld .voorbeeldbeeld { margin-top: 32px; }
}
.voorbeeldbeeld { margin: 36px 0 0; max-width: 520px; }
.voorbeeldbeeld img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--vmw-lijn);
  border-radius: var(--vmw-radius);
  box-shadow: var(--vmw-schaduw);
}
.voorbeeldbeeld figcaption {
  margin-top: 12px;
  font-size: var(--vmw-r-13);
  color: var(--vmw-gedempt);
}
.voorbeeld-pdf { margin: 8px 0 0; font-size: var(--vmw-r-13); font-weight: 600; }
.veld + .veld { margin-top: 18px; }
.veld label { display: block; margin-bottom: 6px; font-weight: 600; }
.veld .hint { font-weight: 400; color: var(--vmw-gedempt); }

.formulier input[type="text"],
.formulier input[type="email"],
.formulier input[type="tel"] {
  width: 100%;
  padding: 12px 14px;
  /* 16px voorkomt dat een iPhone bij het aantikken inzoomt. */
  font: 400 var(--vmw-r-16)/1.4 var(--vmw-tekst);
  color: var(--vmw-inkt);
  background: var(--vmw-wit);
  border: 1px solid var(--vmw-lijn);
  border-radius: var(--vmw-radius);
}
.formulier input:hover { border-color: var(--vmw-gedempt); }
.formulier input:focus-visible { border-color: var(--vmw-kobalt); }

.toestemming { display: flex; align-items: flex-start; gap: 10px; margin-top: 24px; }
.toestemming input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--vmw-kobalt);
}
.toestemming label { margin: 0; font-weight: 400; }

/* Lokaas voor robots: uit beeld, uit de voorleesvolgorde, niet display:none —
   dat laatste vullen sommige robots juist wél in. */
.honing {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.formulier button { margin-top: 26px; }
.formulier button:disabled { opacity: .6; cursor: not-allowed; }
.formulier-noot { margin-top: 16px; font-size: var(--vmw-r-13); color: var(--vmw-gedempt); }

/* Melding bij een geweigerde aanvraag (?fout=1, gezet door formulier.js). */
.formulier-fout {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--vmw-fout);
  border-radius: var(--vmw-radius);
  color: var(--vmw-fout);
  font-weight: 600;
}

/* --- oproep --------------------------------------------------------------- */
.sectie--kobalt { background: var(--vmw-kobalt); color: var(--vmw-wit); }
.cta { max-width: 46ch; }
.cta h2 { font-size: clamp(28px, 4.4vw, 39px); font-weight: 800; }
.cta-tekst { margin-top: 12px; color: rgba(255, 255, 255, .9); font-size: var(--vmw-r-20); line-height: 1.5; }
.cta-knop { margin-top: 26px; }

/* --- voet ----------------------------------------------------------------- */
/* Donker (--vmw-voet, een afgeleide van inkt). Was wit met een haarlijn; dat
   liet elke pagina uitlopen in nóg een wit vlak zonder afsluiting. Donker
   geeft de pagina een bodem, en lost meteen op dat de laatste sectie meestal
   een oproep op mist is: mist tegen inktdonker scheidt zichzelf, dus de
   haarlijn is niet meer nodig.
   Kobalt haalt op deze grond maar 2,1:1 — links in de voet zijn dus wit, met
   een onderstreping als aanwijzing dat het links zijn. Contrastwaarden staan
   bij de tokens. */
.voet {
  background: var(--vmw-voet);
  color: var(--vmw-voet-tekst);
  padding-block: 40px 48px;
}
.voet-merk { margin: 0 0 26px; }
.voet-merk svg { display: block; height: 24px; width: auto; }
.voet-menu ul { display: flex; flex-wrap: wrap; gap: 8px clamp(16px, 4vw, 28px); }
.voet-menu a { font-weight: 500; color: var(--vmw-wit); text-decoration: none; }
.voet-menu a:hover { color: var(--vmw-wit); text-decoration: underline; }
.voet-contact {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-weight: 500;
  color: var(--vmw-wit);
}
.voet-contact a { color: var(--vmw-wit); }
.voet-contact a:hover { color: var(--vmw-wit); }
.voet-juridisch { margin-top: 6px; font-size: var(--vmw-r-13); color: var(--vmw-voet-tekst); }
.voet :focus-visible { outline-color: var(--vmw-wit); }

/* --- afdruk --------------------------------------------------------------- */
@media print {
  .baken, .menu, .voet-menu, .overslaan { display: none; }
  body { font-size: 12pt; }
  .sectie--mist { background: none; }
  /* Een inktdonker vlak over een halve pagina kost een patroon toner en
     levert op papier niets op. */
  .voet { background: none; color: var(--vmw-inkt); }
  .voet-merk, .cijferbadge { display: none; }
  .voet-contact, .voet-contact a, .voet-juridisch { color: var(--vmw-inkt); }
}