/* Erfverhaal, het publieke oppervlak van erfverhaal.nl. Mobiel eerst.
   Geen zwarte achtergrond, geen lijnen, geen kaders.

   DIT BESTAND IS DE BRON EN STAAT DAAROM IN HET ONTWERPSYSTEEM. Tot 10
   september 2026 lag het als web/soon/css/soon.css naast de winkel, en dat is
   precies de val die web/deploy.sh in zijn kop beschrijft: een kopie naast het
   systeem loopt achter zonder dat het opvalt. web/deploy.sh kopieert hem, net
   als tokens.css, en design/system/check.py leest zijn klassen mee. */

@font-face { font-family: "Libre Caslon Display"; src: url("../fonts/LibreCaslonDisplay-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }

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

body {
  margin: 0;
  background: var(--ev-paper);
  color: var(--ev-ink);
  font-family: var(--ev-text);
  font-size: var(--ev-t-body);
  line-height: var(--ev-t-body-lh);
  text-wrap: pretty;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--ev-accent); text-decoration: none; }
a:hover { color: var(--ev-ink); text-decoration: underline; }

.ev-wrap { max-width: 440px; margin: 0 auto; padding: 0 var(--ev-s5) var(--ev-s8); }
@media (min-width: 900px) { .ev-wrap { max-width: 720px; } }

.ev-label { font-size: var(--ev-t-label); font-weight: 700;
  letter-spacing: var(--ev-t-label-ls); text-transform: uppercase;
  color: var(--ev-ink-faint); }
.ev-label--accent { color: var(--ev-accent); }

/* Het raster is een band met lucht eromheen, nooit een achtergrond onder tekst.
   Zoals in het boek zet je hier het aantal kolommen en rijen, geen hoogte: de
   tegel is breedte gedeeld door kolommen en daarmee vierkant, en er valt aan
   geen enkele rand een bolletje af. De hoogte volgt uit het aantal rijen. */
.ev-band, .ev-omslag__band {
  width: 100%;
  aspect-ratio: var(--ev-kol) / var(--ev-rij);
  background-size: calc(100% / var(--ev-kol)) calc(100% / var(--ev-rij));
  flex: none;
}
.ev-band { --ev-kol: 44; --ev-rij: 3; margin: var(--ev-s7) 0; }

h1 { font-family: var(--ev-display); font-size: var(--ev-t-hero);
  line-height: var(--ev-t-hero-lh); font-weight: 400; margin: 0 0 var(--ev-s4); }
@media (min-width: 900px) { h1 { font-size: 54px; } }
/* EEN MAAT VOOR DE BROODTEKST, en dat is 17px. Regel van Ernst, 10 september
   2026; check.py controle 10 dwingt hem af. Tot die dag droeg .ev-lead 17px en
   een gewone <p> de 15px van --ev-t-body, en op de voorpagina stonden die twee
   onder elkaar in dezelfde kolom. Wat overblijft aan maatverschil is bewust en
   is geen broodtekst: .ev-fine is het kleine lettertje en .ev-label is een
   kapitaaltje boven een blok. */
p { margin: 0 0 var(--ev-s4); color: var(--ev-ink-soft);
  font-size: 17px; line-height: 1.5; }
li { font-size: 17px; line-height: 1.5; }
.ev-lead { color: var(--ev-ink); }

/* Invoer. Het veld is een vlak, niet een omlijning. */
.ev-field { background: var(--ev-tint); border: 0; border-radius: var(--ev-radius);
  padding: var(--ev-s4) 18px; width: 100%;
  font-family: var(--ev-display); font-size: 22px; color: var(--ev-ink); }
.ev-field::placeholder { color: var(--ev-ink-faint); }
.ev-field:focus { outline: 2px solid var(--ev-accent); outline-offset: 2px; }

.ev-btn { display: block; width: 100%; border: 0; border-radius: var(--ev-radius);
  background: var(--ev-ink); color: var(--ev-on-ink);
  font-family: var(--ev-text); font-size: 16px; font-weight: 700;
  padding: 17px; margin-top: var(--ev-s3); text-align: center; cursor: pointer; }
.ev-btn:hover { background: #0F1C29; }
.ev-btn[disabled] { opacity: .55; cursor: default; }
/* Dezelfde knop, maar als link. De voorpagina stuurt naar /maak/ en verstuurt
   daar geen formulier; een <a> die eruitziet als de knop is dan eerlijker dan
   een knop die een pagina opent. */
.ev-btn--link { text-decoration: none; box-sizing: border-box; }

.ev-fine { font-size: var(--ev-t-fine); line-height: var(--ev-t-fine-lh);
  color: var(--ev-ink-mute); margin-top: var(--ev-s3); }
.ev-foot { margin-top: var(--ev-s8); font-family: var(--ev-mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ev-ink-faint); }

/* Bevestiging na aanmelding. Een vlak, geen kader. */
.ev-done { background: var(--ev-tint); border-radius: var(--ev-radius);
  padding: var(--ev-s5) 18px; }
.ev-done p { margin: 0; }
.ev-done__t { font-family: var(--ev-display); font-size: 22px; color: var(--ev-ink); }
.ev-err { color: var(--ev-accent); font-size: var(--ev-t-small); margin-top: var(--ev-s2); }
[hidden] { display: none !important; }

/* Breed scherm: de regel blijft leesbaar en het veld blijft een veld.
   Een invoerveld van 720px breed leest als een fout, niet als ruimte. */
@media (min-width: 900px) {
  .ev-lead { max-width: 560px; }
  #ev-form, .ev-done { max-width: 420px; }
}



/* --- Het omslag. Het enige in kleur, precies als bij het boek. ---
   Grond is --ev-ink, nooit zwart. De band staat op de dichte steek in okergeel
   en loopt over de volle breedte, dus zonder zijpadding; de verhouding 95 bij 25
   is die van het echte omslag, hier op een grovere steek zodat een bolletje op
   een telefoon een bolletje blijft. */
.ev-omslag { background: var(--ev-ink); color: var(--ev-on-ink); }
.ev-omslag__in { max-width: 440px; margin: 0 auto; padding: var(--ev-s7) 0 var(--ev-s8); }
@media (min-width: 900px) { .ev-omslag__in { max-width: 720px;
  padding: var(--ev-s8) 0; } }

.ev-omslag__head { display: flex; justify-content: space-between;
  padding: 0 var(--ev-s5); font-size: var(--ev-t-label); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: #8FA3B6; }
.ev-omslag__head span:last-child { color: var(--ev-accent-lt); }

.ev-omslag__band { --ev-kol: 63; --ev-rij: 24; margin: var(--ev-s6) 0 var(--ev-s7); }
/* Op een breed scherm groeit de steek mee terwijl de stip gelijk blijft, en dan
   wordt de band ijl. Vanaf hier de 95 bij 25 van het echte omslag, waarmee de
   tegel op 720px weer rond de 7,6px uitkomt: de dichte steek van het boek. */
@media (min-width: 900px) { .ev-omslag__band { --ev-kol: 95; --ev-rij: 34; } }

.ev-omslag__titel { font-family: var(--ev-display); font-weight: 400;
  font-size: clamp(38px, 11vw, 62px); line-height: 1.08;
  padding: 0 var(--ev-s5); margin: 0 0 var(--ev-s4); }
.ev-omslag__voor { padding: 0 var(--ev-s5); margin: 0;
  font-size: 17px; line-height: 1.5; color: var(--ev-on-ink-alt); }
.ev-omslag__voor b { color: var(--ev-accent-lt); font-weight: 400; }

/* De pagina begint na het omslag, dus het eerste stuk tekst krijgt lucht. */
.ev-wrap { padding-top: var(--ev-s8); }

.ev-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ev-fine--lead { margin-top: 2px; margin-bottom: var(--ev-s4); }

/* Toestemming. Een vlak onderaan het scherm; geen kader, geen lijn erboven. */
.ev-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--ev-tint); }
.ev-consent__in { max-width: 440px; margin: 0 auto;
  padding: var(--ev-s5) var(--ev-s5) var(--ev-s6); }
@media (min-width: 900px) { .ev-consent__in { max-width: 720px;
  padding-bottom: var(--ev-s5); } }
.ev-consent__t { font-family: var(--ev-display); font-size: 20px;
  color: var(--ev-ink); margin: 0 0 var(--ev-s2); }
.ev-consent__p { color: var(--ev-ink-soft); margin: 0 0 var(--ev-s4); max-width: 520px; }
.ev-consent__btns { display: flex; flex-wrap: wrap; gap: var(--ev-s3); }
.ev-btn--sm { width: auto; padding: 12px 22px; font-size: 14px; }
/* Weigeren moet net zo makkelijk zijn als akkoord gaan, dus het is een knop
   van hetzelfde formaat. Alleen de kleur verschilt. */
.ev-btn--quiet { background: var(--ev-paper); color: var(--ev-ink); }
.ev-btn--quiet:hover { background: #F2EFE9; }

/* Ruimte onder de pagina zodat de balk niets afdekt zolang hij er staat. */
body:has(.ev-consent:not([hidden])) .ev-wrap { padding-bottom: 220px; }

/* De band is nu een tijdlijn: het canvas tekent de punten, het CSS-raster blijft
   staan als er geen JavaScript is. Het canvas ligt er precies overheen. */
.ev-omslag__band { position: relative; }
/* Het doek ligt LOS in de band en mag hem nooit hoger maken. Stond het als
   gewoon blok in de stroom, dan duwde zijn eigen hoogte de band groter dan zijn
   aspect-ratio en werd de tegel rechthoekig: de bolletjes werden ovaal. De band
   haalt zijn hoogte uit zijn breedte, en het doek volgt. */
.ev-omslag__band > canvas { position: absolute; inset: 0;
  display: block; width: 100%; height: 100%; }



/* ================================================================
   HET OPPERVLAK VAN VEERTIEN PAGINA'S, fase 4, 10 september 2026.
   Alles hierboven droeg een pagina. Alles hieronder draagt een site:
   een kop die op elke pagina staat, een kruimelpad, een voettekst, en
   de vier vormen die de pagina's zelf nodig hebben (een tabel, een
   spread, een vraag met antwoord, en een lap juridische tekst).
   ================================================================ */

/* --- De kop. Drie items en een knop, plat, zonder uitklap. ---
   De hamburger is een <details> en geen JavaScript: de CSP van deze host
   staat geen inline script toe en een menu hoort niet aan een bestand te
   hangen dat nog moet laden. Een laag diep, dus <details> is genoeg. */
.ev-kop { background: var(--ev-ink); color: var(--ev-on-ink); }
.ev-kop__in { max-width: 440px; margin: 0 auto; padding: var(--ev-s4) var(--ev-s5);
  display: flex; align-items: center; gap: var(--ev-s4); }
@media (min-width: 900px) { .ev-kop__in { max-width: 1100px; padding: var(--ev-s4) var(--ev-s5); } }

.ev-kop__merk { font-family: var(--ev-text); font-size: var(--ev-t-label);
  font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ev-on-ink); text-decoration: none; margin-right: auto; }
.ev-kop__merk:hover { color: var(--ev-accent-lt); text-decoration: none; }

.ev-kop__nav { display: none; }
@media (min-width: 900px) { .ev-kop__nav { display: flex; align-items: center; gap: var(--ev-s5); } }
.ev-kop__link { color: var(--ev-on-ink-alt); text-decoration: none; font-size: 14px; }
.ev-kop__link:hover { color: var(--ev-accent-lt); text-decoration: none; }
.ev-kop__link[aria-current="page"] { color: var(--ev-accent-lt); }

/* De twee knoppen in de kop. Klein, en de zoek is de stillere van de twee:
   hij opent geen koopreis maar een vraag. */
/* TEKST OP OKER IS WIT, ALTIJD. Regel van Ernst, 10 september 2026, en
   design/system/check.py controle 9 dwingt hem af op elk stylesheet in het
   systeem. Dit stond op --ev-ink: donkerblauw op oker is te weinig verschil om
   als contrast te lezen en te veel om als een kleurpaar te lezen. Wit op
   #A8712A haalt 4,6:1 en dat is genoeg voor een knoptekst van 13px vet.
   De grond is --ev-accent-vlak en niet --ev-accent: wit op de gewone oker
   haalt 3,98:1 en dat is te weinig. Zie de opmerking bij dat token. */
.ev-kop__knop { display: inline-block; border-radius: var(--ev-radius);
  background: var(--ev-accent-vlak); color: var(--ev-paper);
  font-size: 13px; font-weight: 700; padding: 10px 16px;
  text-decoration: none; white-space: nowrap; }
.ev-kop__knop:hover { background: #855924; color: var(--ev-paper); text-decoration: none; }
.ev-kop__zoek { display: inline-block; color: var(--ev-on-ink-alt); font-size: 13px;
  text-decoration: none; padding: 10px 0; white-space: nowrap; }
.ev-kop__zoek:hover { color: var(--ev-accent-lt); text-decoration: none; }

.ev-kop__meer { display: block; }
@media (min-width: 900px) { .ev-kop__meer { display: none; } }
.ev-kop__meer > summary { list-style: none; cursor: pointer;
  font-size: var(--ev-t-label); font-weight: 700; letter-spacing: var(--ev-t-label-ls);
  text-transform: uppercase; color: var(--ev-on-ink-alt); padding: 10px 0; }
.ev-kop__meer > summary::-webkit-details-marker { display: none; }
.ev-kop__meer[open] > summary { color: var(--ev-accent-lt); }
.ev-kop__uit { position: absolute; left: 0; right: 0; z-index: 15;
  background: var(--ev-ink); padding: var(--ev-s2) var(--ev-s5) var(--ev-s5);
  display: flex; flex-direction: column; gap: var(--ev-s4); }
.ev-kop { position: relative; }

/* --- Het kruimelpad. Op elke pagina behalve de wortel en de flow. --- */
.ev-kruimel { max-width: 440px; margin: 0 auto; padding: var(--ev-s4) var(--ev-s5) 0;
  font-size: var(--ev-t-fine); color: var(--ev-ink-mute); }
@media (min-width: 900px) { .ev-kruimel { max-width: 720px; } }
.ev-kruimel a { color: var(--ev-ink-mute); }
.ev-kruimel a:hover { color: var(--ev-accent); }
.ev-kruimel__nu { color: var(--ev-ink); }
.ev-kruimel__streep { color: var(--ev-ink-faint); padding: 0 var(--ev-s1); }

/* --- De voettekst. Vier kolommen op breed, onder elkaar op smal. --- */
.ev-voet { background: var(--ev-tint); margin-top: var(--ev-s8); }
.ev-voet__in { max-width: 440px; margin: 0 auto; padding: var(--ev-s7) var(--ev-s5); }
@media (min-width: 900px) { .ev-voet__in { max-width: 1100px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ev-s6); } }
.ev-voet__kol { margin-bottom: var(--ev-s6); }
@media (min-width: 900px) { .ev-voet__kol { margin-bottom: 0; } }
.ev-voet__t { font-size: var(--ev-t-label); font-weight: 700;
  letter-spacing: var(--ev-t-label-ls); text-transform: uppercase;
  color: var(--ev-ink-faint); margin: 0 0 var(--ev-s3); }
.ev-voet__lijst { list-style: none; margin: 0; padding: 0; }
/* Geen marge: de lucht tussen de regels komt van de padding op de link,
   en die is er om het raakvlak op 24px te krijgen (WCAG 2.5.8). */
.ev-voet__lijst li { margin-bottom: 0; }
.ev-voet__lijst a { color: var(--ev-ink-soft); font-size: var(--ev-t-small); }
.ev-voet__lijst a:hover { color: var(--ev-accent); }
.ev-voet__slot { max-width: 440px; margin: 0 auto;
  padding: 0 var(--ev-s5) var(--ev-s7); font-family: var(--ev-mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ev-ink-faint); }
@media (min-width: 900px) { .ev-voet__slot { max-width: 1100px; } }

/* --- De tekstvormen die de pagina's zelf vragen. --- */
h2 { font-family: var(--ev-display); font-size: var(--ev-t-h1);
  line-height: var(--ev-t-h1-lh); font-weight: 400;
  margin: var(--ev-s7) 0 var(--ev-s4); }
h3 { font-family: var(--ev-text); font-size: var(--ev-t-h2);
  line-height: var(--ev-t-h2-lh); font-weight: 700;
  margin: var(--ev-s6) 0 var(--ev-s3); }
ul, ol { color: var(--ev-ink-soft); margin: 0 0 var(--ev-s4); padding-left: var(--ev-s5); }
li { margin-bottom: var(--ev-s2); }

/* Een vlak in plaats van een kader, want de site heeft geen lijnen. */
.ev-vlak { background: var(--ev-tint); border-radius: var(--ev-radius);
  padding: var(--ev-s5); margin: var(--ev-s5) 0; }
.ev-vlak > :last-child { margin-bottom: 0; }
.ev-vlak__t { font-family: var(--ev-display); font-size: 22px;
  color: var(--ev-ink); margin: 0 0 var(--ev-s3); }

/* De vork op de voorpagina: twee wegen naar hetzelfde naamvak. */
.ev-vork { display: grid; gap: var(--ev-s4); margin: var(--ev-s5) 0; }
@media (min-width: 700px) { .ev-vork { grid-template-columns: 1fr 1fr; } }
.ev-vork__t { font-family: var(--ev-display); font-size: 20px;
  color: var(--ev-ink); margin: 0 0 var(--ev-s2); }
.ev-vork p { margin: 0; font-size: var(--ev-t-small);
  line-height: var(--ev-t-small-lh); }

/* De prijstabel en de vergelijking. WIJDE INHOUD SCHUIFT IN ZIJN EIGEN DOOS
   en nooit het document: `overflow-x: auto` hier houdt de pagina zelf smal op
   360px, en dat is wat de poort op clippedPx meet. */
.ev-tabel { overflow-x: auto; margin: var(--ev-s5) 0; }
.ev-tabel table { border-collapse: collapse; width: 100%; min-width: 460px;
  font-size: var(--ev-t-small); }
.ev-tabel th, .ev-tabel td { text-align: left; vertical-align: top;
  padding: var(--ev-s3) var(--ev-s4) var(--ev-s3) 0; color: var(--ev-ink-soft); }
.ev-tabel th { font-size: var(--ev-t-label); font-weight: 700;
  letter-spacing: var(--ev-t-label-ls); text-transform: uppercase;
  color: var(--ev-ink-faint); }
.ev-tabel tbody tr { background: transparent; }
.ev-tabel tbody tr:nth-child(odd) { background: var(--ev-tint); }
.ev-tabel tbody td:first-child { padding-left: var(--ev-s3); }
.ev-tabel tbody td:last-child { padding-right: var(--ev-s3); }
.ev-tabel thead th:first-child { padding-left: var(--ev-s3); }
/* Een bedrag is een cijfer en hoort rechts, in de mono. */
.ev-getal { font-family: var(--ev-mono); font-size: 12.5px;
  white-space: nowrap; text-align: right; }
.ev-wij td { color: var(--ev-ink); font-weight: 700; }

/* Het beeld van het boek. Geen kader eromheen, alleen lucht. */
.ev-beeld { margin: var(--ev-s6) 0; }
.ev-beeld img { display: block; width: 100%; height: auto;
  border-radius: var(--ev-radius); }
.ev-beeld__bij { font-size: var(--ev-t-fine); line-height: var(--ev-t-fine-lh);
  color: var(--ev-ink-mute); margin: var(--ev-s3) 0 0; }
.ev-beelden { display: grid; gap: var(--ev-s4); }
@media (min-width: 700px) { .ev-beelden { grid-template-columns: 1fr 1fr; } }

/* Een vraag met een antwoord. Open, want een dichtgeklapt antwoord telt in een
   AI-antwoordmachine niet mee en de FAQ staat er juist voor om geciteerd te
   worden. */
.ev-vraag { margin: 0 0 var(--ev-s6); }
.ev-vraag__v { font-family: var(--ev-text); font-size: 17px; font-weight: 700;
  color: var(--ev-ink); margin: 0 0 var(--ev-s2); }
.ev-vraag__a { margin: 0; }
.ev-vraag__a p:last-child { margin-bottom: 0; }

/* De zoek. Het veld staat boven de uitslag en blijft staan als er niets is. */
.ev-zoekvak { display: flex; gap: var(--ev-s3); margin: var(--ev-s5) 0; }
.ev-zoekvak .ev-field { font-size: 18px; }
.ev-zoekvak .ev-btn { width: auto; margin-top: 0; padding: 17px var(--ev-s5); }
.ev-uitslag { list-style: none; margin: var(--ev-s5) 0; padding: 0; }
.ev-uitslag li { margin-bottom: var(--ev-s5); }
.ev-uitslag__t { font-family: var(--ev-display); font-size: 20px; margin: 0 0 var(--ev-s1); }
.ev-uitslag__u { font-family: var(--ev-mono); font-size: 11px;
  color: var(--ev-ink-faint); margin: 0 0 var(--ev-s2); }
.ev-uitslag__o { margin: 0; }

/* De juridische lap. Smaller dan de rest, want het is doorlopende tekst en
   verder niets. */
.ev-jur { max-width: 34rem; }
.ev-jur h2 { font-size: var(--ev-t-h2); font-family: var(--ev-text);
  font-weight: 700; margin-top: var(--ev-s7); }
.ev-jur h3 { font-size: 16px; margin-top: var(--ev-s5); }
.ev-jur table { border-collapse: collapse; width: 100%; font-size: var(--ev-t-small); }
.ev-jur td, .ev-jur th { text-align: left; vertical-align: top;
  padding: var(--ev-s2) var(--ev-s4) var(--ev-s2) 0; color: var(--ev-ink-soft); }
.ev-datum { font-family: var(--ev-mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--ev-ink-faint); margin-top: var(--ev-s7); }

/* De 404. Kort, dus hij krijgt een eigen indeling en verder niets eigens.
   Stond tot 10 september 2026 als <style> in 404.html zelf, en dat is precies
   wat controle 1 van design/system/check.py verbiedt. */
.ev-vierhonderdvier { min-height: 52vh; display: flex; flex-direction: column;
  justify-content: center; gap: var(--ev-s5); max-width: 34rem; }
.ev-vierhonderdvier h1 { margin: 0; }
.ev-vierhonderdvier p { margin: 0; }

/* De onderkant van elke pagina behalve de wortel: dezelfde knop, altijd. */
.ev-slot { margin-top: var(--ev-s8); }
.ev-slot .ev-btn { max-width: 320px; }

/* --- Raakvlakken van 24px, WCAG 2.5.8. ---
   De sweep met web-audit op 10 september 2026 gaf vijftien raakvlakken van 16px
   hoog: elke link in de kop en in de voettekst. Een link midden in een zin is
   vrijgesteld omdat de regelhoogte hem begrenst, maar deze staan op zichzelf in
   een lijst en zijn dus een doel. Ze groeien met lucht en niet met letters, dus
   het beeld verandert niet. */
.ev-voet__lijst a { display: inline-block; padding: 4px 0; }
.ev-kop__link, .ev-kop__zoek { display: inline-block; padding: 5px 0; }
.ev-kop__merk { padding: 5px 0; }

/* --- De oproep, en dat is een blok en geen knop op een kale regel. ---
   De voorpagina vraagt niets meer (besluit Ernst, 10 september 2026), dus wat
   de bezoeker naar de flow brengt is een blok met een reden erin en een knop
   eronder. Vlak, geen kader, zoals alles hier. */
.ev-oproep { background: var(--ev-tint); border-radius: var(--ev-radius);
  padding: var(--ev-s6) var(--ev-s5); margin: var(--ev-s7) 0; }
.ev-oproep__t { font-family: var(--ev-display); font-size: 26px; line-height: 1.15;
  color: var(--ev-ink); margin: 0 0 var(--ev-s3); }
.ev-oproep .ev-btn { max-width: 320px; margin-top: var(--ev-s4); }
.ev-oproep > p { margin-bottom: 0; }

/* Het merkteken in de kop. Een hoogte en verder niets: de svg draagt zijn eigen
   inktvlak, dus hij valt weg tegen de balk. */
.ev-kop__merk img { display: block; height: 34px; width: auto; }
@media (min-width: 900px) { .ev-kop__merk img { height: 38px; } }

/* Het aanmeldveld in de voettekst. Het staat in de eerste kolom op breed, onder
   de vier lijstjes op smal, en het is het enige in de voettekst met een knop. */
.ev-voet__melden { max-width: 440px; margin: 0 auto;
  padding: 0 var(--ev-s5) var(--ev-s6); }
@media (min-width: 900px) { .ev-voet__melden { max-width: 1100px;
  padding: var(--ev-s6) var(--ev-s5) var(--ev-s6); } }
@media (min-width: 900px) { .ev-voet__melden #ev-form,
  .ev-voet__melden .ev-done { max-width: 420px; } }

/* --- De bladen. ---
   Een blad tegelijk, gecentreerd in de sectie, en de pijlen zijn zachte
   overlays aan de zijkanten van de sectie zelf: geen knop met een rand, een
   schaduw en een cirkel, maar een verloop vanaf de rand met een dunne punt
   erin. Ernst noemde de vorige ronde clunky en lelijk, en dat was hij: een
   ronde knop midden op het beeld is een bedieningselement dat om aandacht
   vraagt, terwijl het beeld de aandacht hoort te krijgen.

   Het schuiven doet scroll-snap en geen javascript, dus vegen werkt altijd.
   /js/bladeren.js zet alleen de pijlen en de puntjes aan. */
.ev-bladen { position: relative; margin: var(--ev-s6) 0 0;
  /* Een vaste hoogte voor het beeldvlak, zodat de pagina niet verspringt als
     een blad iets anders van verhouding is en de pijlen altijd even hoog staan. */
  --blad-h: min(62vh, 500px); }

.ev-bladen__spoor { display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* GEEN scroll-snap-stop: always. Die dwingt een stop bij elk blad, en dan
     voelt een veeg stroef in plaats van soepel: je kunt er niet doorheen
     vliegen. Zonder hem loopt een flinke veeg door naar het volgende blad en
     klikt hij daar in. */
  -webkit-overflow-scrolling: touch; }
.ev-bladen__spoor::-webkit-scrollbar { display: none; }

.ev-blad { flex: 0 0 100%; scroll-snap-align: center; margin: 0;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; }
.ev-blad img { display: block; width: auto; max-width: 100%;
  height: var(--blad-h); object-fit: contain;
  box-shadow: 0 1px 2px rgba(27, 42, 58, .10), 0 14px 30px rgba(27, 42, 58, .11); }
.ev-blad__bij { font-size: var(--ev-t-fine); line-height: var(--ev-t-fine-lh);
  color: var(--ev-ink-mute); margin: var(--ev-s5) 0 0; text-align: center;
  max-width: 40ch; }

/* DE PIJLEN. Een verloop vanaf de rand van de sectie, over de volle hoogte van
   het beeld, met een dunne punt erin. Ze liggen over het beeld heen en niet
   ernaast, want de sectie is even breed als de tekstkolom en ernaast is geen
   ruimte. */
.ev-bladen__pijl { position: absolute; top: 0; height: var(--blad-h);
  width: clamp(48px, 12%, 88px); z-index: 2;
  border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center;
  color: var(--ev-ink);
  transition: opacity .2s ease;
  opacity: .55; }
.ev-bladen__pijl:hover:not([disabled]) { opacity: 1; }
.ev-bladen__pijl:focus-visible { opacity: 1; outline: 2px solid var(--ev-accent);
  outline-offset: -4px; }
.ev-bladen__pijl[disabled] { opacity: 0; pointer-events: none; }
.ev-bladen__pijl--terug { left: 0; justify-content: flex-start;
  padding-left: var(--ev-s2);
  background: linear-gradient(to right, var(--ev-paper) 12%, rgba(251, 250, 247, 0) 100%); }
.ev-bladen__pijl--verder { right: 0; justify-content: flex-end;
  padding-right: var(--ev-s2);
  background: linear-gradient(to left, var(--ev-paper) 12%, rgba(251, 250, 247, 0) 100%); }
.ev-bladen__pijl svg { display: block; width: 28px; height: 28px;
  filter: drop-shadow(0 1px 2px rgba(251, 250, 247, .9)); }

/* De puntjes. Ze zeggen hoeveel bladen er zijn, en dat is wat een pijl niet
   zegt. Het raakvlak is 24px; wat je ziet is de stip erbinnen. */
.ev-bladen__stippen { display: flex; justify-content: center; gap: var(--ev-s1);
  margin-top: var(--ev-s5); }
.ev-bladen__stip { width: 24px; height: 24px; padding: 0; border: 0;
  background: none; cursor: pointer; position: relative;
  -webkit-appearance: none; appearance: none; }
.ev-bladen__stip::after { content: ""; position: absolute; inset: 10px;
  border-radius: 50%; background: var(--ev-ink-faint);
  transition: background .2s ease; }
.ev-bladen__stip[aria-current="true"]::after { background: var(--ev-accent); }

/* --- Raakvlakken van 24px, WCAG 2.5.8. ---
   De sweep met web-audit op 10 september 2026 gaf vijftien raakvlakken van 16px
   hoog: elke link in de kop en in de voettekst. Een link midden in een zin is
   vrijgesteld omdat de regelhoogte hem begrenst, maar deze staan op zichzelf in
   een lijst en zijn dus een doel. Ze groeien met lucht en niet met letters, dus
   het beeld verandert niet. */
.ev-voet__lijst a { display: inline-block; padding: 4px 0; }
.ev-kop__link, .ev-kop__zoek { display: inline-block; padding: 5px 0; }
.ev-kop__merk { padding: 5px 0; }

/* --- De oproep, en dat is een blok en geen knop op een kale regel. ---
   De voorpagina vraagt niets meer (besluit Ernst, 10 september 2026), dus wat
   de bezoeker naar de flow brengt is een blok met een reden erin en een knop
   eronder. Vlak, geen kader, zoals alles hier. */
.ev-oproep { background: var(--ev-tint); border-radius: var(--ev-radius);
  padding: var(--ev-s6) var(--ev-s5); margin: var(--ev-s7) 0; }
.ev-oproep__t { font-family: var(--ev-display); font-size: 26px; line-height: 1.15;
  color: var(--ev-ink); margin: 0 0 var(--ev-s3); }
.ev-oproep .ev-btn { max-width: 320px; margin-top: var(--ev-s4); }
.ev-oproep > p { margin-bottom: 0; }

/* Het merkteken in de kop. Een hoogte en verder niets: de svg draagt zijn eigen
   inktvlak, dus hij valt weg tegen de balk. */
.ev-kop__merk img { display: block; height: 34px; width: auto; }
@media (min-width: 900px) { .ev-kop__merk img { height: 38px; } }

/* Het aanmeldveld in de voettekst. Het staat in de eerste kolom op breed, onder
   de vier lijstjes op smal, en het is het enige in de voettekst met een knop. */
.ev-voet__melden { max-width: 440px; margin: 0 auto;
  padding: 0 var(--ev-s5) var(--ev-s6); }
@media (min-width: 900px) { .ev-voet__melden { max-width: 1100px;
  padding: var(--ev-s6) var(--ev-s5) var(--ev-s6); } }
@media (min-width: 900px) { .ev-voet__melden #ev-form,
  .ev-voet__melden .ev-done { max-width: 420px; } }



/* --- Raakvlakken van 24px, WCAG 2.5.8. ---
   De sweep met web-audit op 10 september 2026 gaf vijftien raakvlakken van 16px
   hoog: elke link in de kop en in de voettekst. Een link midden in een zin is
   vrijgesteld omdat de regelhoogte hem begrenst, maar deze staan op zichzelf in
   een lijst en zijn dus een doel. Ze groeien met lucht en niet met letters, dus
   het beeld verandert niet. */
.ev-voet__lijst a { display: inline-block; padding: 4px 0; }
.ev-kop__link, .ev-kop__zoek { display: inline-block; padding: 5px 0; }
.ev-kop__merk { padding: 5px 0; }

/* --- De oproep, en dat is een blok en geen knop op een kale regel. ---
   De voorpagina vraagt niets meer (besluit Ernst, 10 september 2026), dus wat
   de bezoeker naar de flow brengt is een blok met een reden erin en een knop
   eronder. Vlak, geen kader, zoals alles hier. */
.ev-oproep { background: var(--ev-tint); border-radius: var(--ev-radius);
  padding: var(--ev-s6) var(--ev-s5); margin: var(--ev-s7) 0; }
.ev-oproep__t { font-family: var(--ev-display); font-size: 26px; line-height: 1.15;
  color: var(--ev-ink); margin: 0 0 var(--ev-s3); }
.ev-oproep .ev-btn { max-width: 320px; margin-top: var(--ev-s4); }
.ev-oproep > p { margin-bottom: 0; }

/* Het merkteken in de kop. Een hoogte en verder niets: de svg draagt zijn eigen
   inktvlak, dus hij valt weg tegen de balk. */
.ev-kop__merk img { display: block; height: 34px; width: auto; }
@media (min-width: 900px) { .ev-kop__merk img { height: 38px; } }

/* Het aanmeldveld in de voettekst. Het staat in de eerste kolom op breed, onder
   de vier lijstjes op smal, en het is het enige in de voettekst met een knop. */
.ev-voet__melden { max-width: 440px; margin: 0 auto;
  padding: 0 var(--ev-s5) var(--ev-s6); }
@media (min-width: 900px) { .ev-voet__melden { max-width: 1100px;
  padding: var(--ev-s6) var(--ev-s5) var(--ev-s6); } }
@media (min-width: 900px) { .ev-voet__melden #ev-form,
  .ev-voet__melden .ev-done { max-width: 420px; } }



/* --- Het rooster van de productlijst, 10 september 2026. ---
   Een lijstpagina die zich onder elkaar leest is een artikel; een webshop toont
   een rooster van kaarten. Besluit Ernst: alle tien de catalogusregels erop, en
   dan in deze vorm.

   Een kolom op een telefoon, twee vanaf 600 en drie vanaf 900. Drie op 900 geeft
   in de brede wrap van 1100 een kaart van ongeveer 340px, en dat is dezelfde maat
   die .ev-beelden al aanhoudt.

   GEEN font-size op .ev-kaart__onder EN NIET OP .ev-kaart p: die vallen onder
   BROOD in design/system/check.py en de broodtekst heeft een maat. Wat kleiner
   moet mag, maar dan met een eigen klasse die geen broodtekst is. */
.ev-rooster { display: grid; grid-template-columns: 1fr; gap: var(--ev-s6);
  margin: var(--ev-s6) 0 var(--ev-s8); list-style: none; padding: 0; }
@media (min-width: 600px) { .ev-rooster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ev-rooster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* De kaart is een vlak en geen kader, net als overal op deze site. */
/* `height: 100%` en niet alleen de stretch van het rooster: zonder deze regel
   bleef een kaart met weinig tekst korter dan zijn buurman en stonden de
   'Bekijk'-regels op drie hoogtes in een rij. In een rooster is dat het eerste
   wat je ziet. Met de volle hoogte duwt .ev-kaart__slot de link naar onderen. */
.ev-kaart { display: flex; flex-direction: column; margin: 0; height: 100%;
  list-style: none; }
.ev-kaart__vlak { background: var(--ev-tint); border-radius: var(--ev-radius);
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: var(--ev-s4); }
.ev-kaart__vlak img { display: block; max-width: 100%; max-height: 100%;
  width: auto; height: auto; }

/* Wat geen beeld heeft krijgt geen lege doos maar een tegel met zijn naam. Dat
   is een keuze en geen plaatshouder: van zes van de tien regels bestaat geen
   afbeelding, en zes grijze vlakken naast elkaar leest als een storing. */
.ev-kaart__naamtegel { background: var(--ev-ink); color: var(--ev-on-ink);
  width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: var(--ev-s5);
  font-family: var(--ev-display); font-size: 24px; line-height: 1.15; }

.ev-kaart__kop { font-family: var(--ev-display); font-size: var(--ev-t-h2);
  line-height: var(--ev-t-h2-lh); margin: var(--ev-s4) 0 var(--ev-s1); }
.ev-kaart__kop a { color: var(--ev-ink); }
.ev-kaart__kop a:hover { color: var(--ev-accent); text-decoration: none; }
.ev-kaart__prijs { font-family: var(--ev-mono); font-size: 13px;
  color: var(--ev-ink-mute); margin: 0 0 var(--ev-s2); }
.ev-kaart p { margin: 0 0 var(--ev-s3); }
/* De beschrijving neemt de speling op, zodat de 'Bekijk'-regels van een rij op
   dezelfde hoogte eindigen. `height: 100%` op de kaart alleen was niet genoeg:
   de kaart werd wel even hoog, maar de tekst erin verdeelde de ruimte niet en
   de links stonden op drie hoogtes. In een rooster is dat het eerste wat opvalt. */
.ev-kaart__onder { flex: 1 0 auto; }
.ev-kaart__slot { margin-top: auto; padding-top: var(--ev-s2); }

/* Wat het boek nodig heeft draagt dat zichtbaar. Los bestellen kan echt niet,
   dus een kaart die dat niet zegt verkoopt iets dat niet bestaat. */
.ev-kaart__bij { font-size: var(--ev-t-label); font-weight: 700;
  letter-spacing: var(--ev-t-label-ls); text-transform: uppercase;
  color: var(--ev-ink-faint); display: block; margin-bottom: var(--ev-s2); }