@font-face { font-family: Geist; src: url("/fonts/geist-400.woff2") format("woff2");
             font-weight: 400; font-display: swap; }
@font-face { font-family: Geist; src: url("/fonts/geist-500.woff2") format("woff2");
             font-weight: 500; font-display: swap; }
@font-face { font-family: Geist; src: url("/fonts/geist-600.woff2") format("woff2");
             font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geistmono-400.woff2") format("woff2");
             font-weight: 400; font-display: swap; }
    :root {
      --grond: #f5f5f7;
      --laag-1: #ffffff;
      --laag-2: #f4f4f5;
      --lijn: rgba(0,0,0,0.08);
      --lijn-sterk: rgba(0,0,0,0.12);
      --tekst: #18181b;
      --tekst-2: #3f3f46;
      --tekst-3: #6e6e73;
      --accent: #017a26;
      --accent-zacht: rgba(0,194,61,0.08);
      --accent-fel: #00C23D;
      --sans: Geist,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
      --mono: 'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
      --straal: 16px;
      --straal-klein: 12px;
      --straal-pil: 500px;
      --op-accent-fel: #04210d;
    }
    :root[data-theme="dark"] {
      --grond: #0a0a0a;
      --laag-1: #131316;
      --laag-2: #1c1c1f;
      --lijn: rgba(255,255,255,0.08);
      --lijn-sterk: rgba(255,255,255,0.12);
      --tekst: #fafafa;
      --tekst-2: #d4d4d8;
      --tekst-3: #a1a1aa;
      --accent: #00C23D;
      --accent-zacht: rgba(0,194,61,0.14);
      --accent-fel: #2fdc63;
    }
/* De publieke site van pemag.nl.

   Dezelfde vormen als de console: kaart op 16px, knop op 12px, rand op alfa,
   Geist zelf gehost. De tokens komen uit hetzelfde merkbestand, dus ze kunnen
   niet uit elkaar lopen -- zie de kop van site/build.py.

   Wat hier ANDERS is dan in de console, met opzet: dit is een leespagina en geen
   werkscherm. Dus wel een leesmaat op de tekst, geen sidebar, en meer lucht.

   Het ritme komt van mapemedia.com, nagemeten in hun site.css. Twee dingen die
   daar structureel zijn en hier eerder ontbraken:

   1. De sectiemaat staat in HELE PIXELS en hangt aan de breedte, nooit aan de
      hoogte. `10vh` betekent dat een laptop andere lucht krijgt dan een groot
      scherm zonder dat iemand daarom vroeg.
   2. Maat en goot zitten in een binnenwikkel (.schil), niet op de sectie zelf.
      Daardoor kan een sectie over de volle breedte een tint krijgen zonder dat
      de tekstkolom meebeweegt. Zonder die splitsing kun je alleen maar strepen
      trekken, en zeven identieke haarlijnen geven zeven identieke naden. */

:root {
  /* De ruimteladder. Hele pixels, want fractionele rem-waarden (0,6 / 0,8 /
     1,1rem werd 9,6 / 12,8 / 17,6px) stapelen tot een ritme dat niemand kan
     navertellen. */
  --r1: 8px;  --r2: 12px; --r3: 16px; --r4: 20px; --r5: 24px;
  --r6: 32px; --r7: 40px; --r8: 56px; --r9: 96px; --r10: 120px;
  --maat: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grond);
  color: var(--tekst);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  /* Bewust 0. Negatieve tracking op lopende tekst is wat de referentie juist
     niet doet; dat hoort bij display, niet bij een alinea. */
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
p { margin: 0; }

.overslaan {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: 10px 18px;
  border-radius: 0 0 var(--straal-klein) 0;
}
.overslaan:focus { left: 0; text-decoration: none; }

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

/* ---- de balk bovenaan ---------------------------------------------------- */
/* De balk draagt de achtergrond over de volle breedte, de BINNENWIKKEL draagt de
   maat. Zonder die wikkel stond het merk op 48px terwijl de kop van de pagina op
   192px begon: 144px ernaast, gemeten op 1440px, en op een breder scherm loopt
   dat verder uit elkaar. Dat was de enige harde fout in het ontwerpgat; al het
   andere was een keuze. De referentie doet dit met `.nav-in` en komt daarmee op
   1px afwijking uit. */
.balk {
  position: sticky; top: 0; z-index: 10; padding: 0;
  background: color-mix(in srgb, var(--grond) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--lijn);
}
.balkschil {
  max-width: var(--maat); margin: 0 auto;
  padding: 14px var(--r6);
  display: flex; align-items: center; gap: var(--r6);
}
.merk {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 19px; letter-spacing: -0.02em;
  color: var(--tekst); text-decoration: none;
}
.merk:hover { text-decoration: none; opacity: 0.7; }
/* Het beeldmerk staat in het merkgroen dat je moet ZIEN, niet in het groen dat
   je moet lezen. Hier ligt geen tekst op, dus dat mag. */
.teken { width: 18px; height: 18px; flex: none; fill: var(--accent-fel); }

.hoofdnav { display: flex; gap: var(--r5); flex-wrap: wrap; }
.balkacties { margin-left: auto; display: flex; align-items: center; gap: var(--r4); }
/* Inloggen is de zeldzaamste handeling op deze site en stond er als knop. Nu een
   stille link ernaast, met de trechter als knop. Twee routes, visueel één
   primair, zoals Stripe en Linear het doen. */
.stillink { font-size: 14px; color: var(--tekst-2); text-decoration: none; }
.stillink:hover { color: var(--tekst); text-decoration: none; }
.navlink {
  font-size: 14px; color: var(--tekst-2); text-decoration: none;
  padding: 4px 0; border-bottom: 1px solid transparent;
}
.navlink:hover { color: var(--tekst); text-decoration: none; }
.navlink.hier { color: var(--tekst); border-bottom-color: var(--accent); }

/* ---- knoppen: exact de vorm van de console ------------------------------- */
/* De pil zit ALLEEN op wat je kunt indrukken. Kaarten, velden en secties blijven
   op 12 tot 16px. Die tweedeling is bewust en komt uit de referentie: 162
   pil-vormige elementen daar tegen nul bij ons, en allemaal interactief.

   En de knop draagt het felle merkgroen met DONKERE tekst erop. Wit op #00C23D
   haalt 2,39:1 en is onbruikbaar; daarom weken wij uit naar het donkere accent
   en oogde de hele pagina grijs. De referentie lost het andersom op: fel vlak,
   donkere letters. Dan mag het merkgroen wel zichtbaar zijn. */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; font-family: inherit; font-size: 14px;
  font-weight: 600; line-height: 1.25rem; letter-spacing: -0.01em;
  white-space: nowrap; border: 0; cursor: pointer;
  border-radius: var(--straal-pil);
  background: var(--accent-fel); color: var(--op-accent-fel);
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Hover licht de knop juist verder OP. Met donkere tekst erop stijgt het
   contrast dan mee, dus de leesbaarheid gaat vooruit in plaats van achteruit. */
.knop:hover { background: color-mix(in srgb, var(--accent-fel) 82%, #fff);
              text-decoration: none; transform: translateY(-1px); }
.knop:active { transform: none; }

#inhoud:focus { outline: none; }
.knop.stil {
  background: transparent; color: var(--tekst);
  border: 1px solid var(--lijn-sterk);
}
.knop.stil:hover { background: var(--laag-1); transform: none; }
.knop.groot { padding: 13px 26px; font-size: 16px; }

/* ---- opmaak: maat en goot los van de sectie ------------------------------ */
main { padding: 0; }
section { padding: var(--r9) 0; }
.schil { max-width: var(--maat); margin: 0 auto; padding: 0 var(--r6); }

/* Een getinte band in plaats van een streep. Twee banden geven de pagina een
   ritme dat je van een afstand ziet; zeven haarlijnen geven alleen naden. */
.band { background: var(--laag-1); border-top: 1px solid var(--lijn);
        border-bottom: 1px solid var(--lijn); }

/* De donkere ankersectie. Precies ÉÉN per paginatype, bevestigd door de Website
   Agent: op hun homepage is dat `.statement`, en /method en /working hebben er
   bewust geen. Het is de enige ingreep die het vlakke ritme in één klap breekt,
   en het is de reden dat hun pagina van een afstand een vorm heeft.

   Contrast: #fafafa op #101413 haalt ruim 17:1, en het merkgroen mag hier wél
   fel zijn want er ligt geen tekst op. */
.nacht {
  background: #101413; color: #fafafa;
  border-top: 0; border-bottom: 0;
  padding: clamp(80px, 9vw, 128px) 0;
}
.nacht h2 {
  font-size: clamp(2.2rem, 5.6vw, 4rem); line-height: 1.0;
  letter-spacing: -0.04em; max-width: 17ch; color: #fafafa;
}
.nacht .uitleg { color: rgba(250, 250, 250, 0.72); }
.nacht .label { color: rgba(250, 250, 250, 0.55); }
.nacht .label::after { background: linear-gradient(90deg, var(--accent-fel), transparent); }
.nacht a { color: var(--accent-fel); }
.nacht .knop.stil { color: #fafafa; border-color: rgba(255, 255, 255, 0.22); }
.nacht .knop.stil:hover { background: rgba(255, 255, 255, 0.06); }

/* De koppenladder. Bij de referentie zijn er negen trappen en zit de stap van
   h2 naar h3 op 1,55x; bij ons waren het er vier en sprong hij 2,48x. Alles wat
   geen sectiekop was viel daardoor in één hoop van 19px en kleiner.

   De trede die ontbrak zit hier: een h3 op sectieniveau rond 30px. In een kaart
   blijft h3 klein (19px), want daar is het een kaartkop en geen tussenkop. Dat
   zijn bij de referentie ook twee aparte schalen: 30,4px in lopende secties en
   17px in kaarten. */
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font-weight: 500; font-size: clamp(2.9rem, 7.2vw, 4.6rem);
     line-height: 0.97; letter-spacing: -0.038em; }
h2 { font-weight: 500; font-size: clamp(2.05rem, 4.6vw, 2.95rem);
     line-height: 1.04; letter-spacing: -0.03em; margin-top: var(--r3); }
h3 { font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 1.9rem);
     line-height: 1.18; letter-spacing: -0.024em; margin-top: var(--r7); }
.kaart h3, .filter h3 { font-size: 19px; line-height: 1.3;
                        letter-spacing: -0.01em; margin-top: 0; }

/* De leesmaat. In de console staat GEEN max-width op het scherm, want dat is een
   werkvlak. Hier wel op de TEKST, want dit is om te lezen. 37,5rem is ongeveer
   75 tekens; 65ch was bij Geist ruim 90 en dat leest als een muur. */
.lead { color: var(--tekst-2); font-size: clamp(1.05rem, 2vw, 1.3rem);
        line-height: 1.5; max-width: 34rem; margin-top: var(--r4); }
.uitleg { color: var(--tekst-2); max-width: 37.5rem; margin-top: var(--r2); }
.uitleg + .uitleg { margin-top: var(--r4); }

/* Het label krijgt de mono-stem. Onder de twaalf pixels klapt de tracking om van
   negatief naar positief; dat is wat een label van een kopje onderscheidt. */
.label {
  position: relative; display: inline-block;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--tekst-3); margin: 0 0 var(--r3); padding-bottom: var(--r1);
}
.label::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.label a { color: inherit; }

section .label + h2 { margin-top: var(--r2); }

.acties { display: flex; flex-wrap: wrap; gap: var(--r2); margin-top: var(--r6); }

/* ---- kaarten: zelfde voorwerp als in de console -------------------------- */
.rooster { display: grid; gap: var(--r3); margin-top: var(--r8);
           grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
/* Een kaart is GETEKEND, niet zwevend. De rand stond op rgba(0,0,0,0.04) en dat
   haalt ongeveer 1,1:1 op wit: je ziet hem niet, dus de kaart hing op zijn
   schaduw. In een getinte band verdween hij dan helemaal. Rand zichtbaar,
   schaduw eraf, zoals de referentie het doet. */
.kaart {
  padding: 26px 24px; background: var(--laag-1);
  border-radius: var(--straal);
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: none;
}
.band .kaart { background: var(--grond); }
.nacht .kaart {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.12);
}
.nacht .kaart p, .nacht .kaart li { color: rgba(250, 250, 250, 0.72); }
.nacht .kaart h3 { color: #fafafa; }
.kaart h3 { margin-bottom: 11px; }
.kaart p { color: var(--tekst-2); font-size: 14.5px; line-height: 1.55; }
/* Het label boven een kaartkop, met het icoon ervoor in plaats van erboven. Het
   mono-label werkte al; een icoon eronder zou een tweede regel kleingoed zijn.
   Zo staat er één rij die je in één oogopslag leest. */
.kaart .nummer {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px;
}
.nacht .kaart .nummer { color: var(--accent-fel); }
.icoon { width: 16px; height: 16px; flex: none; }

/* ---- de voet ------------------------------------------------------------- */
/* De voet is een PLAAT, geen streep. Een streep is de zoveelste identieke naad;
   een plaat sluit de pagina af. De negatieve marge laat hem onder de sectie
   erboven schuiven, zodat de overgang geen lijn is maar een vlakwissel. */
.voet {
  background: var(--laag-2); border-top: 0;
  padding: clamp(72px, 8vw, 120px) clamp(20px, 4vw, 48px) 44px;
  color: var(--tekst-3); font-size: 14px;
}
.voetraster {
  max-width: var(--maat); margin: 0 auto;
  display: grid; gap: var(--r7);
  grid-template-columns: 1.6fr repeat(3, 1fr);
}
/* Kolomkopjes op h4 en niet op h2. Ze waren h2 en dus stonden er op elke pagina
   drie koppen van hetzelfde niveau als de sectiekoppen, visueel 12px, kleiner
   dan de bodytekst. Dat is een koppenhierarchie die wij bij een klant zouden
   aanmerken. En gewone letters in plaats van kapitalen, zoals de referentie. */
/* h2 en niet h4: dit zijn de kopjes van de voet-sectie, en met h4 sprong elke
   pagina van h2 naar h4. De maat is een stijlkwestie, het niveau niet. */
.voet h2 { font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
           color: var(--tekst); margin: 0 0 var(--r2); }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li { margin-bottom: var(--r1); }
.voet a { color: var(--tekst-2); }
.voetmerk .merk { display: block; margin-bottom: var(--r1); font-size: 17px; }
.voetmerk p { max-width: 24rem; }

@media (max-width: 860px) {
  .voetraster { grid-template-columns: 1fr 1fr; gap: var(--r6); }
}
@media (max-width: 760px) {
  /* De navigatie NIET verbergen. Een hamburgerknop vraagt javascript en een
     tweede toestand; een rij die horizontaal schuift doet hetzelfde werk met
     nul regels script. Wat er niet is, kan ook niet stuk. */
  .balkschil { flex-wrap: wrap; padding: 12px 20px; gap: 10px var(--r4); }
  .merk { order: 1; }
  .balkacties { order: 2; margin-left: auto; }
  .hoofdnav {
    order: 3; width: 100%; flex-wrap: nowrap; gap: var(--r4);
    overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px; margin-bottom: -2px;
  }
  .hoofdnav::-webkit-scrollbar { display: none; }
  .navlink { font-size: 13px; white-space: nowrap; }
}

@media (max-width: 640px) {
  section { padding: 72px 0; }
  .schil { padding: 0 20px; }
  .voetraster { grid-template-columns: 1fr; }
}
@media (min-width: 900px) { section { padding: var(--r10) 0; } }

/* ---- de hero -------------------------------------------------------------
   Wat een pagina als deze laat werken is niet beweging maar CONTRAST: een kop
   die echt groot is, veel wit eromheen, en daaronder tekst die echt klein is.
   Zit daar te weinig verschil tussen, dan leest alles als middelmaat, hoeveel
   animatie je er ook overheen gooit. */
.hero { padding-top: clamp(80px, 12vw, 160px); padding-bottom: clamp(64px, 8vw, 112px); }
/* Onze kop was niet te klein maar te GROOT: 104px tegen hun 73,6px, en zonder
   leesmaat liep hij over 1056px van een kolom van 1120px. Een kop die de hele
   kolom vult leest als een banner en niet als een uitspraak. Nu dezelfde
   bovengrens als de referentie, met 17ch eromheen. */
.hero h1 { font-size: clamp(2.9rem, 7.2vw, 4.6rem); line-height: 0.97;
           letter-spacing: -0.038em; margin-top: var(--r4); max-width: 17ch; }
.hero .lead { font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.4;
              letter-spacing: -0.011em; max-width: 32rem; margin-top: 26px; }
.hero .acties { margin-top: var(--r7); }

/* De kopsectie van een binnenpagina: kleiner dan de hero, maar nog steeds
   duidelijk display. */
.kopsectie { padding-top: clamp(64px, 8vw, 108px); padding-bottom: var(--r8); }
.kopsectie h1 { font-size: clamp(2.3rem, 5.4vw, 3.4rem); max-width: 19ch; }
.kopsectie .lead { margin-top: var(--r4); }

/* De slotsectie krijgt de tint mee, zodat het einde van de pagina niet
   wegvalt maar afsluit. */
.slot > .schil {
  border-radius: var(--straal); background: var(--laag-1);
  border: 1px solid var(--lijn);
  padding: clamp(56px, 7vw, 88px) clamp(24px, 4vw, 48px);
  margin-bottom: var(--r9);
}
.slot h2 { max-width: 15ch; margin-top: 0; }

/* ---- de bewijsregel ------------------------------------------------------
   Nog geen klantlogo's: één site, en die is van onszelf. Een rij verzonnen
   logo's is de goedkoopste manier om vertrouwen te verliezen zodra iemand
   doorklikt. Hier staat daarom geen schaal maar methode, en die is waar. */
.bewijsregel {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--r6);
  margin-top: var(--r7); padding-top: var(--r6); border-top: 1px solid var(--lijn);
}
.bewijsregel strong {
  display: block; font-size: 2.05rem; font-weight: 500; line-height: 1;
  letter-spacing: -0.032em; color: var(--tekst); margin-bottom: 6px;
}
.bewijsregel span { font-size: 13.5px; line-height: 1.45; color: var(--tekst-3); }
@media (max-width: 700px) { .bewijsregel { grid-template-columns: 1fr; gap: var(--r5); } }

/* ---- de cijferrij --------------------------------------------------------
   De plek waar elke B2B-site zijn klantlogo's zet. Wij hebben er geen en
   verzinnen er geen, dus staat er capaciteit in plaats van sociale bewijskracht:
   wat er draait en sinds wanneer. Ahrefs doet dat op /big-data met de omvang van
   hun eigen cluster, en het werkt omdat het narekenbaar is.

   Groot-tegen-klein op één plek: het cijfer op 2,05rem, het label op 13,5px.
   Factor 2,4, dezelfde verhouding als de bewijsregel onder de hero. */
.cijferrij {
  display: grid; gap: var(--r6); margin-top: var(--r8);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.cijferrij strong {
  display: block; font-size: 2.05rem; font-weight: 500; line-height: 1;
  letter-spacing: -0.032em; color: var(--tekst); margin-bottom: 10px;
}
.cijferrij span { display: block; font-size: 13.5px; line-height: 1.5;
                  color: var(--tekst-3); max-width: 22rem; }

/* ---- het filter ----------------------------------------------------------
   Twee kolommen: voor wie dit wel is en voor wie niet. Het werkt omdat het de
   enige sectie is die iemand wegstuurt, en dat maakt de rest geloofwaardiger. */
.filter { display: grid; gap: var(--r3); margin-top: var(--r8);
          grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.filter .kaart li { margin: 10px 0; color: var(--tekst-2); font-size: 14.5px;
                    position: relative; padding-left: 26px; list-style: none; }
.filter .kaart ul { margin: var(--r2) 0 0; padding-left: 0; }
.filter .niet h3 { color: var(--tekst-3); }

/* Het merkgroen stond twee keer zichtbaar op de hele homepage, allebei dezelfde
   knop. Bij de referentie staat het er vierentwintig keer: op statusstippen, op
   vinkjes, op accenten. Hier zijn de vinkjes, met de hand getekend in CSS zodat
   er geen extra beeld bij hoeft. Op een vinkje ligt geen tekst, dus het felle
   groen mag. */
.filter .wel li::before {
  content: ""; position: absolute; left: 2px; top: 4px;
  width: 13px; height: 7px;
  border-left: 2px solid var(--accent-fel);
  border-bottom: 2px solid var(--accent-fel);
  border-radius: 1px;
  transform: rotate(-45deg);
}
.filter .niet li::before {
  content: ""; position: absolute; left: 2px; top: 10px;
  width: 12px; height: 2px; border-radius: 1px;
  background: var(--lijn-sterk);
}
.nacht .filter .niet li::before { background: rgba(255, 255, 255, 0.28); }

/* Een statusstip, voor waar iets loopt of stilstaat. */
.stip {
  display: inline-block; width: 8px; height: 8px; border-radius: 500px;
  background: var(--accent-fel); margin-right: 8px; vertical-align: 1px;
}
.stip.stil { background: var(--lijn-sterk); }

/* ---- lijst met stukken (blog, cases) ------------------------------------- */
.stukken { display: grid; gap: var(--r3); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.stuk {
  display: block; padding: var(--r5); background: var(--laag-1);
  border: 1px solid var(--lijn); border-radius: var(--straal);
  color: inherit; text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.stuk:hover { text-decoration: none; transform: translateY(-2px);
              box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.stuk h2 { font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.022em;
           margin: var(--r2) 0; }
.stuk p { color: var(--tekst-2); font-size: 14.5px; line-height: 1.55; }
.stuk .datum, .stuk .leesduur, .meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tekst-3);
}
.stuk .leesduur { display: block; margin-top: var(--r3); }

/* ---- een artikel --------------------------------------------------------- */
.artikel .kopsectie h1 { max-width: 22ch; }
.artikel .meta { display: block; margin-top: var(--r4); }
.tekst { padding-top: 0; }
.tekst .schil { max-width: 41rem; }
.tekst p, .tekst ul, .tekst ol { color: var(--tekst-2); margin-top: var(--r4); }
.tekst h2 { font-size: clamp(1.5rem, 2.8vw, 1.9rem); line-height: 1.18;
            letter-spacing: -0.024em; margin: var(--r8) 0 var(--r3); }
.tekst h3 { margin: var(--r7) 0 var(--r2); }
.tekst li { margin: var(--r1) 0; }
.tekst hr { border: 0; border-top: 1px solid var(--lijn); margin: var(--r8) 0; }
.tekst blockquote { margin: var(--r7) 0; padding-left: var(--r5);
                    border-left: 2px solid var(--accent); }
.tekst code { font-family: var(--mono); font-size: 0.9em; background: var(--laag-2);
              padding: 2px 6px; border-radius: 5px; }
.tekst em { color: var(--tekst-3); }

.tabelrol { overflow-x: auto; margin-top: var(--r7); }
.tekst table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.tekst th, .tekst td { text-align: left; padding: 11px 14px;
                       border-bottom: 1px solid var(--lijn); }
.tekst th { font-size: 11px; font-family: var(--mono); letter-spacing: 0.1em;
            text-transform: uppercase; color: var(--tekst-3); font-weight: 500; }
.tekst td { color: var(--tekst-2); font-variant-numeric: tabular-nums; }

/* ---- onthullen bij binnenkomst -------------------------------------------
   Zelfde mechaniek als de console: IntersectionObserver, geen bibliotheek.
   Elementen beginnen onzichtbaar en iets lager, en komen binnen op een veer.
   Alleen opacity leest als inladen; met verschuiving erbij leest het als
   aankomen. Wie beweging heeft uitgezet, ziet alles meteen. */
.onthul {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.onthul.zichtbaar { opacity: 1; transform: none; }
.geen-js .onthul  { opacity: 1; transform: none; }
.onthul:nth-child(2) { transition-delay: 70ms; }
.onthul:nth-child(3) { transition-delay: 140ms; }
.onthul:nth-child(4) { transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  .onthul { opacity: 1 !important; transform: none !important; }
  * { transition: none !important; animation: none !important; }
}

/* ---- het meetblok --------------------------------------------------------
   Fase drie van de klantreis is "hoe ziet het eruit als het af is". De
   referentie zet daar een schermafdruk van het echte product; wij mogen dat nog
   niet, want een nagetekend dashboard is op 31 juli afgekeurd en het klantscherm
   ziet er nog niet zo uit.

   Wat wel mag is de meting zelf, met echte cijfers en een datum eronder. Twaalf
   blokjes, vijf groen. Dat is geen illustratie maar de stand. */
.meting { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--r8); }
.vak {
  width: 46px; height: 46px; border-radius: var(--straal-klein);
  background: var(--laag-2); border: 1.5px solid var(--lijn-sterk);
}
.vak.raak { background: var(--accent-fel); border-color: transparent; }
.metingbij {
  display: flex; flex-wrap: wrap; gap: 8px var(--r6);
  margin-top: var(--r4); font-size: 13.5px; color: var(--tekst-3);
}
@media (max-width: 640px) { .vak { width: 38px; height: 38px; } }

/* De cijferrij op een donkere sectie. Zonder deze twee regels erft hij
   `var(--tekst)` (#18181b) op #101413 en dat is 1,06:1 -- feitelijk onzichtbaar.
   Het stond op /ons-eigen-cijfer, uitgerekend de pagina die het bewijs moet
   dragen. Gevonden door het na te rekenen en niet door ernaar te kijken; op een
   schermafdruk zie je een leeg vlak en denk je dat het zo hoort. */
.nacht .cijferrij strong { color: #fafafa; }
.nacht .cijferrij span   { color: rgba(250, 250, 250, 0.72); }

/* De mobiele navigatie schuift horizontaal en had geen enkele aanwijzing dat er
   meer staat: geen scrollbalk (die is verborgen) en geen rand die afkapt. Een
   vervaging op de rechterkant is één regel en lost precies dat op. */
@media (max-width: 760px) {
  /* Geen vervaging op de rechterrand. Die hing aan de container in plaats van
     aan de scrollpositie, dus het laatste menu-item bleef er permanent in staan,
     ook zonder iets te scrollen. Wie de rij wil zien, sleept hem; de voettekst
     draagt bovendien elke link. */
  .hoofdnav { scroll-padding-inline-end: var(--r4); }
}

/* De meetblokjes verschilden ALLEEN in kleur, en dat is precies wat WCAG 1.4.1
   verbiedt: wie kleur niet of anders waarneemt, ziet twaalf identieke vierkanten.
   De groene krijgen daarom een vinkje erin, getekend met dezelfde twee randen als
   in de wel-lijsten. Nu is het verschil ook zonder kleur te zien. */
.vak { position: relative; }
.vak.raak::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 15px; height: 8px; margin: -7px 0 0 -8px;
  border-left: 2.5px solid var(--op-accent-fel);
  border-bottom: 2.5px solid var(--op-accent-fel);
  border-radius: 1px; transform: rotate(-45deg);
}

/* De focusring gebruikt het donkere accent, en dat haalt op de nachtsectie maar
   3,33:1. Dat voldoet net aan de eis van 3:1 voor een niet-tekstelement, maar
   "net" is voor een focusring te weinig: dat is het enige waaraan een
   toetsenbordgebruiker ziet waar hij is. Op donker daarom het felle groen. */
.nacht :focus-visible { outline-color: var(--accent-fel); }

/* De routelijst op de foutpagina. Twee kolommen zodra er ruimte is, want
   veertien regels onder elkaar leest als een sitemap en niet als hulp. */
.allepaginas {
  list-style: none; padding: 0; margin: var(--r5) 0 0;
  columns: 2; column-gap: var(--r7); max-width: 34rem;
}
.allepaginas li { margin: 0 0 10px; break-inside: avoid; }
@media (max-width: 560px) { .allepaginas { columns: 1; } }

/* Afdrukken. Iemand die dit op papier zet wil de tekst, niet onze balk, en
   zeker niet een knop die niets doet op papier. De adressen achter links komen
   erbij, want een link is op papier onbruikbaar zonder zijn doel. */
@media print {
  .balk, .voet, .overslaan, .acties, .knop { display: none !important; }
  .onthul { opacity: 1 !important; transform: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band, .nacht { background: #fff !important; color: #000 !important; }
  .nacht h2, .nacht h3, .nacht .uitleg, .nacht .label,
  .nacht .kaart p, .nacht .kaart li, .nacht .cijferrij span { color: #000 !important; }
  .schil { max-width: none; padding: 0; }
  section { padding: 0 0 12pt; break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .kaart { border: 1px solid #999; break-inside: avoid; }
  a[href^="/"]::after, a[href^="http"]::after {
    content: " (" attr(href) ")"; font-size: 9pt; color: #444;
  }
}

/* De legenda toont nu hetzelfde teken als de meting erboven: een blokje met
   dezelfde rand, en het groene met hetzelfde vinkje erin. Daarvoor stonden er
   stippen zonder vinkje, en dan leunt de legenda weer alleen op kleur -- juist
   wat de blokjes hierboven vermijden. Een legenda die anders tekent dan wat hij
   verklaart, is geen legenda maar een tweede notatie. */
.metingbij .vak {
  display: inline-block; width: 14px; height: 14px; border-width: 1px;
  margin-right: 8px; vertical-align: -2px; flex: none;
}
.metingbij .vak.raak::after {
  width: 6px; height: 3px; margin: -3px 0 0 -3px;
  border-left-width: 1.5px; border-bottom-width: 1.5px;
}

/* ---- het productbeeld in de hero ----------------------------------------
   Punt 10 uit het ontwerpdocument. De site verkocht een scherm en liet er geen
   zien. Wat hier staat is geen verzonnen dashboard maar onze eigen meting,
   dezelfde die op /ons-eigen-cijfer staat en die tegen de database wordt
   gehouden. Getekend in HTML, niet als plaatje: dan is er niets om te laden,
   schaalt het mee met de lettergrootte, en kan het niet verouderen los van de
   cijfers eronder. */
.scherm {
  margin-top: var(--r7); border: 1px solid var(--lijn-sterk);
  border-radius: var(--straal); background: var(--laag-1); overflow: hidden;
  max-width: 32rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.schermbalk {
  display: flex; align-items: center; gap: 8px;
  padding: 10px var(--r4); background: var(--laag-2);
  border-bottom: 1px solid var(--lijn);
  font-family: var(--mono); font-size: 11px; color: var(--tekst-3);
}
.schermbalk .stip { width: 7px; height: 7px; margin-right: 2px; }
.schermbalk .site { margin-left: auto; }
.schermlijf { padding: var(--r4); }
.schermkop { font-size: 15px; color: var(--tekst-2); margin-bottom: var(--r3); }
.schermkop strong { color: var(--tekst); }
.schermlijst { list-style: none; margin: 0; padding: 0; }
.schermlijst li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--lijn);
  font-size: 13.5px; color: var(--tekst-2);
}
.schermlijst .vraag {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.schermlijst .teller { font-family: var(--mono); font-size: 11.5px; color: var(--tekst-3); }
.schermlijst .teken {
  flex: none; width: 16px; height: 16px; border-radius: var(--straal-klein);
  background: var(--accent-fel); position: relative;
}
.schermlijst .mis .teken { background: var(--laag-2); border: 1px solid var(--lijn-sterk); }
/* Hetzelfde vinkje als in de meetblokjes, zodat kleur niet het enige verschil is. */
.schermlijst .raak .teken::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 3.5px; margin: -3px 0 0 -3.5px;
  border-left: 1.6px solid var(--op-accent-fel);
  border-bottom: 1.6px solid var(--op-accent-fel);
  transform: rotate(-45deg);
}
.schermvoet {
  margin-top: var(--r3); padding-top: var(--r3); border-top: 1px solid var(--lijn);
  font-size: 11.5px; color: var(--tekst-3); line-height: 1.5;
}
@media (max-width: 560px) {
  .schermlijst .teller { display: none; }
  .schermbalk .adres { display: none; }
}

/* De herkomstregel onder aan een pagina. Wie bij elk getal een meetdatum eist,
   hoort ook te zeggen wanneer de pagina zelf voor het laatst is nagelopen. */
.herkomst {
  display: flex; flex-wrap: wrap; gap: 6px var(--r4);
  max-width: var(--maat); margin: 0 auto; padding: var(--r5) var(--r6) var(--r7);
  font-size: 12.5px; color: var(--tekst-3);
  border-top: 1px solid var(--lijn);
}
.herkomst span:first-child { font-weight: 500; color: var(--tekst-2); }

/* Het bijschrift onder het productbeeld. Buiten de kaart, want het gaat over de
   kaart en staat er niet in. */
.schermbij {
  max-width: 32rem; margin: var(--r3) 0 0;
  font-size: 13px; line-height: 1.55; color: var(--tekst-3);
}