/* ==========================================================================
   MAHSEN: publiek.css
   Het stijlblad van layouts/publiek en van de splash, in de richting "Warm
   atelier" (design-system.md v3, beslissing van 24 september 2026).

   Plat en zonder bouwstap, in deze volgorde: letters, tokens, basis, layout,
   iconen en knoppen, kop, voet, held en paginakop, tekst, vragen en lijsten,
   beeld, contactblok, formulier, de home, de drie deuren, de vaste balk,
   hoog contrast, beweging, print. Een regel hoort bij de laag waar ze staat;
   wie iets zoekt, zoekt het daar. Wat maar één andere pagina draagt, staat in
   haar eigen blad onder css/pagina/, dat die pagina ernaast hangt (§10).

   Wat hier niet mag, staat in design-system.md §1 en §10, en
   OntwerpregelsTest toetst het regel voor regel: geen kleur buiten het
   tokenblok, geen hex die niet in §5.1 staat, geen gradient, geen schaduw,
   niets onder 1rem, geen breekpunt in px, geen @layer, geen nesting, geen
   color-mix(). Die laatste drie om de iPads die niet meer bijwerken: wat zij
   niet kennen, laten ze stil weg.

   Het enige stijlblad van de site, sinds site.css (De Zetterij) wegging met de
   laatste pagina die het droeg (PR 23). Wat maar één pagina draagt, staat in
   haar eigen blad onder css/pagina (design-system.md §10).
   ========================================================================== */

/* -- Letters ------------------------------------------------------------- */
/* Eén variabel bestand voor 400 tot 800: design-system.md §5.3. Gesubset op
   Latijn en Latijn-uitgebreid, met de versie van de bron in de naam, zodat een
   nieuwe versie een nieuw adres krijgt en geen oude uit een cache. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-sans-2.071.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* De terugval tot de letter binnen is, op de maat van de letter zelf, zodat de
   pagina niet verspringt als ze binnenkomt. Gemeten met fontTools (§5.3):
   de gemiddelde breedte per teken over de tekst van /privacy en /voorwaarden,
   met de verdeling van de tekens zoals ze daar staan. De gewone snit tegen
   Jakarta op 400, de vette tegen Jakarta op 800, want de koppen staan op 800
   en verspringen het meest. ascent en descent zijn die van Jakarta (1038 en
   222 op 1000), gedeeld door de size-adjust, want de browser vermenigvuldigt
   ze er weer mee. Zonder vette snit maakt font-synthesis: none van elke kop
   gewone tekst tot de letter er is. */
@font-face {
  font-family: "Jakarta terugval Segoe UI";
  src: local("Segoe UI"), local("SegoeUI");
  font-weight: 400 600;
  size-adjust: 105.44%;
  ascent-override: 98.45%;
  descent-override: 21.05%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Jakarta terugval Segoe UI";
  src: local("Segoe UI Bold"), local("SegoeUI-Bold");
  font-weight: 700 800;
  size-adjust: 102.85%;
  ascent-override: 100.92%;
  descent-override: 21.58%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Jakarta terugval Arial";
  src: local("Arial"), local("ArialMT");
  font-weight: 400 600;
  size-adjust: 104.87%;
  ascent-override: 98.98%;
  descent-override: 21.17%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Jakarta terugval Arial";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 700 800;
  size-adjust: 102.19%;
  ascent-override: 101.58%;
  descent-override: 21.72%;
  line-gap-override: 0%;
}

/* -- Tokens -------------------------------------------------------------- */
/* De kleuren woordelijk uit design-system.md §5.1, in hex en alleen hier.
   OntwerpregelsTest legt dit blok naast die tabel: een waarde die hier
   verschuift, of een kleur die alleen hier staat, valt om. De contrasten in
   die tabel zijn op precies deze waarden gerekend. */
:root {
  color-scheme: light;

  --walnoot: #3D2817;
  --walnoot-2: #5C3A21;
  --creme: #F2EBDD;
  --papier: #FBF7EF;
  --bleek: #EBDDC3;
  --veld: #FFFDF8;
  --zand: #C9A26E;
  --zand-hover: #D6B485;
  --zand-licht: #D8C6A6;
  --koper: #C57434;
  --koper-diep: #8E4A1B;
  --inkt-zacht: #6A4A30;
  --ebben: #1F140A;
  --veldrand: #7A5A3E;

  --letter: "Plus Jakarta Sans", "Jakarta terugval Segoe UI", "Jakarta terugval Arial", sans-serif;

  /* §5.4. Op een gsm de kleine maat, vanaf 56.25rem de grote (hieronder). De
     koppen schalen met clamp(); niets komt onder 1rem. */
  --t-klein: 1rem;
  --t-basis: 1.1875rem;
  --t-groot: 1.375rem;
  --t-h3: 1.5rem;
  --t-h2: clamp(2.125rem, 1.5rem + 2vw, 3.25rem);
  --t-h1: clamp(2.25rem, 1.4rem + 2.4vw, 3.5rem);

  /* §5.6. --maat is 32 keer de lopende tekst: zo'n 66 tekens op de echte
     letter, op 19 en op 20px. Als veelvoud van --t-basis en niet als em: een em
     rekent per element, en een kop kreeg zo een bredere maat dan de alinea
     eronder. */
  --breed: 77.5rem;
  --marge: 1.25rem;
  --sectie: 4.5rem;
  --blok: 4rem;
  --maat: calc(32 * var(--t-basis));

  --r-kaart: 20px;
  --r-beeld: 10px;
  --r-veld: 12px;
  --r-pil: 999px;

  --ease-uit: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 56.25rem) {
  :root {
    --t-basis: 1.25rem;
    --t-groot: 1.5rem;
    --t-h3: 1.75rem;
    --marge: 2.5rem;
    --sectie: 7.5rem;
    --blok: 6.5rem;
  }
}

/* -- Basis --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* font-synthesis: none, want er is geen cursief bestand en de browser mag er
   geen verzinnen (§1). hyphens: auto werkt omdat de pagina lang="nl-BE" is;
   koppen, knoppen en een summary breken alleen waar wij het zeggen.
   text-wrap: pretty houdt een los woord weg van de laatste regel van elke
   alinea, en erft naar p, li, het antwoord en de pijl-links; koppen en de
   onderregel houden hun balance. Niet in het tekstvak van het formulier:
   daar sprong het woord voor de cursor anders heen en weer terwijl iemand
   typte (.veld textarea). Een browser die pretty niet kent, laat het vallen.

   Een kolom over minstens de hoogte van het scherm, met main die groeit:
   anders staat er op een hoog scherm onder de voet een strook crème. 100vh
   eerst, voor wie dvh niet kent. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--creme);
  color: var(--walnoot);
  font-family: var(--letter);
  font-size: var(--t-basis);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;
  font-synthesis: none;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-wrap: pretty;
}
main { flex: 1 0 auto; }

/* Koppen in 800 en iets strakker gespatieerd: op 800 staan de letters anders
   te ver uit elkaar voor een kop van deze maat. */
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; -webkit-hyphens: manual; hyphens: manual; }
h1 { font-size: var(--t-h1); line-height: 1.05; letter-spacing: -0.018em; }
h2 { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.015em; }
h3 { font-size: var(--t-h3); line-height: 1.2; }
h4 { font-size: 1.3125rem; line-height: 1.25; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
strong, b { font-weight: 700; }
em, i { font-style: normal; }

/* Een afsluitend leesteken in een kop staat op 800 anders los van de letter
   ervoor. App\Site\Leesteken zet het in deze span; met de hand hoort het niet. */
.lt { margin-left: -0.035em; }

/* Een code-element toont in elke browser een monospace, en die staat op de
   lijst van §1. Wat erin staat (een cookienaam) is gewoon tekst. */
code { font-family: inherit; font-size: inherit; }

img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; letter-spacing: inherit; }
::placeholder { color: var(--inkt-zacht); opacity: 1; }

/* §5.5. In lopende tekst altijd onderlijnd, met een koperen lijn: de tekst
   houdt de kleur van zijn vlak, de lijn zegt dat het een link is. Bij hover
   wordt de lijn dikker, want de kleur verandert niet. Een link in een zin
   krijgt boven en onder lucht, zodat een vinger hem raakt zonder dat de
   regelafstand verschuift. In :where(), zonder gewicht: een component met een
   eigen hoogte (het menu, de kruimels, de voet) zet die lucht zelf. */
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--koper);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}
a:hover { text-decoration-thickness: 3.5px; }
:where(p a, li > a):where(:not(.knop, .pijl-link)) { padding-block: 0.75rem; }

::selection { background: var(--zand); color: var(--walnoot); }

/* De focusring is een lijn van 3px op 3px afstand, zonder schaduw: walnoot
   op licht, zand op donker. Geen radius op de focus: de lijn volgt de vorm
   van het element zelf, ook van een pil. */
:focus-visible { outline: 3px solid var(--walnoot); outline-offset: 3px; }
.op-donker :focus-visible { outline-color: var(--zand); }

.sprong {
  position: absolute;
  top: -12.5rem;
  left: 1rem;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 1.25rem;
  border-radius: var(--r-pil);
  background: var(--zand);
  color: var(--walnoot);
  font-size: 1.125rem;
  font-weight: 800;
  text-decoration: none;
}
.sprong:focus { top: 0.75rem; }
.sprong:focus-visible { outline-color: var(--zand); }

/* -- Layout -------------------------------------------------------------- */
/* Elk element in een raster krijgt min-width: 0, anders duwt één lang woord de
   pagina breder dan het scherm (§5.6). Breekpunten in rem, zodat ze
   meeschuiven als de lezer de letter groter zet. */
.omslag {
  width: 100%;
  max-width: calc(var(--breed) + 2 * var(--marge));
  margin-inline: auto;
  padding-inline: var(--marge);
}

/* Donker en licht wisselen per sectie (§5.7). op-donker zet de tekst,
   de knop, de focus en de tweede tekstkleur om; het vlak zelf komt van de
   band of van het component. */
.band { padding-block: var(--sectie); }
.band--creme { background: var(--creme); }
.band--bleek { background: var(--bleek); }
.band--walnoot { background: var(--walnoot); color: var(--creme); }
.op-donker { color: var(--creme); }
.blok { margin-top: var(--blok); }
.tekst { max-width: var(--maat); }
.klein { font-size: var(--t-klein); line-height: 1.5; }
.groot { font-size: var(--t-groot); font-weight: 600; line-height: 1.45; }
.zacht { color: var(--inkt-zacht); }
.op-donker .zacht { color: var(--zand-licht); }
.heel { white-space: nowrap; }

/* Kolommen (§6): een sectie in twee kolommen van gelijke breedte vanaf
   62.5rem, links wat ze zegt en rechts wat erbij hoort (de vragen, een beeld),
   op een gsm onder elkaar in de volgorde van de markup. Een regel lucht tussen
   wat in een kolom onder elkaar staat, behalve in een kolom die zelf .vragen
   is: die heeft haar gap. Op /prijzen, /software-op-maat en
   /website-onderhoud. */
.kolommen { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
.kolommen > * { min-width: 0; }
.kolommen > :not(.vragen) > * + * { margin-top: 1.25rem; }
@media (min-width: 62.5rem) {
  .kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4.5rem; align-items: start; }
}

/* De balk achter de prijs: zand, en altijd de hele zin (§4, de prijsregel).
   Safari kent alleen de vorm met -webkit-. */
.markeer {
  padding: 0.04em 0.22em;
  border-radius: 4px;
  background: var(--zand);
  color: var(--walnoot);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* -- Iconen en knoppen ---------------------------------------------------- */
/* Alleen inline stroke-svg op een raster van 24 (§6, Iconen). De tekeningen
   staan één keer in partials/publiek/iconen, en een icoon is een <use>. */
.iconen { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--los { width: 30px; height: 30px; stroke: var(--koper-diep); stroke-width: 1.7; }
.op-donker .ico--los { stroke: var(--koper); }
.ico--groot { width: 44px; height: 44px; stroke-width: 1.5; }

/* Eén soort gevulde knop, een pil van 58px: walnoot op licht, zand op donker.
   Dat het een knop is, zegt zijn vorm; de hover draagt geen betekenis en de
   focus heeft haar eigen ring. */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.625rem;
  padding: 0 1.875rem;
  border: 0;
  border-radius: var(--r-pil);
  background: var(--walnoot);
  color: var(--creme);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  -webkit-hyphens: manual;
  hyphens: manual;
  cursor: pointer;
}
.knop:hover { background: var(--walnoot-2); }
.knop .ico { stroke: var(--zand); }
.op-donker .knop { background: var(--zand); color: var(--walnoot); }
.op-donker .knop:hover { background: var(--zand-hover); }
.op-donker .knop .ico { stroke: var(--walnoot); }
.knop-blok { margin-top: 2.5rem; }
.onder-knop { max-width: 34rem; margin-top: 1rem; font-size: 1.125rem; line-height: 1.5; }
.op-donker .onder-knop { color: var(--zand-licht); }
.pijl-link { display: inline-block; padding-block: 0.625rem; font-weight: 700; line-height: 1.45; }
.pijl-link .ico { margin-left: 0.5rem; vertical-align: -6px; stroke: var(--koper); }
@media (max-width: 31.1875rem) {
  .knop { padding: 0 1.375rem; }
  .knop-blok .knop, .held-actie .knop { width: 100%; }
}
/* "Vraag een gratis gesprek aan" met de pijl op één regel, op elke gsm
   (beslissing van 25 september 2026). De zin is in de huisletter 258px op
   18px, 234 op 17px en 220 op 16px, en de pijl met zijn tussenruimte 36, 32
   en 30px erbij. Onder 25rem daarom minder lucht in de knop, onder 23.75rem
   17px, strakker gespatieerd zoals de koppen op 800, en onder 22rem 16px, de
   bodem van §3. Zo past de zin ook naast een schuifbalk van 15px, zoals in
   een smal venster op een computer: de breekpunten meten het venster met de
   schuifbalk, de knop is 15px smaller. Op een gsm is de knop in een pagina
   over de volle breedte (hierboven), dus de lucht zie je niet; ze telt alleen
   als de zin bijna de hele knop vult. De knop in het formulier houdt haar
   eigen maat, en het blikformulier geeft zijn knop meer ruimte (.blikformulier). */
@media (max-width: 24.9375rem) {
  .knop { padding-inline: 0.875rem; }
}
@media (max-width: 23.6875rem) {
  .knop { gap: 0.5rem; font-size: 1.0625rem; letter-spacing: -0.01em; }
}
@media (max-width: 21.9375rem) {
  .knop { gap: 0.25rem; padding-inline: 0.5rem; font-size: 1rem; }
}

/* -- Kop ------------------------------------------------------------------ */
/* Walnoot, niet sticky (§3). Het merk links, dan het menu, dan "Liever
   gebeld?" en de knop. Vanaf 75rem staat alles open op één rij; daaronder
   past het niet naast het merk zonder af te breken, en dan staan de vier
   items en "Liever gebeld?" achter Menu, een <details> die zonder JavaScript
   openklapt. De knop staat vanaf 43.75rem naast Menu, en dan niet meer erin:
   daar houdt de vaste balk op, en tot 75rem stond er anders geen knop in de
   kop, op de breedte van een iPad en van een laptop met Windows-schaling.
   Op 700px staat er tussen merk en knop nog 150px, ook naast een schuifbalk
   van 15px (gemeten 27 september 2026). Menu zelf blijft tot 75rem: open
   vroeg die rij op 1000px, naast zo'n schuifbalk, 34px te veel. Het merk
   zakt onder 23.75rem naar 28px hoog: zo passen merk en Menu op 320px op één
   rij (264px, ook naast een schuifbalk van 15px die er 265 overlaat), en
   onder 28px valt het koppelteken weg (§7). Wie de letter groter zet, krijgt
   Menu op een tweede rij, rechts, in plaats van buiten beeld. Verandert een
   label, meet dan opnieuw: met "Prijzen" in de plaats van "Werk" (25
   september 2026) liep de rij op 75rem, naast een schuifbalk van 15px, 19px
   te breed, en daarom staan de items daar op 8px binnenruimte in plaats van
   11. */
.site-kop { position: relative; z-index: 5; background: var(--walnoot); }
.site-kop-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 0.5rem; min-height: 4.25rem; }
.merk { display: inline-flex; flex: none; padding-block: 0.5rem; text-decoration: none; }
.merk svg { display: block; width: auto; height: 28px; }
.merk-mah { fill: var(--zand); }
.merk-sen { fill: var(--koper); }

.site-nav { display: none; }
.site-nav ul, .menu-lijst ul { margin: 0; padding: 0; list-style: none; }
.site-nav ul { display: flex; gap: 0.25rem; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 0.5rem;
  border-radius: var(--r-pil);
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { background: var(--walnoot-2); }
.site-nav a[aria-current], .menu-lijst a[aria-current] { text-decoration-line: underline; text-decoration-color: var(--koper); text-decoration-thickness: 3px; }

.site-kop-hulp { display: flex; align-items: center; gap: 1rem; margin-left: auto; }

/* "Liever gebeld?" is een link en geen tweede knop: zand op walnoot (5,86:1),
   onderlijnd, 48px hoog. In de kop open vanaf 75rem, daaronder in het menu,
   en daar in crème: het menu is walnoot-2, en zand haalt daarop 4,26:1. */
.liever-gebeld {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding-block: 0;
  color: var(--zand);
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration-color: var(--zand);
  white-space: nowrap;
}
.site-kop-hulp > .liever-gebeld, .site-kop .knop--kop { display: none; }
.site-kop .knop--kop { white-space: nowrap; }

.menu { position: relative; }
.menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 0.625rem;
  border: 2px solid var(--zand);
  border-radius: var(--r-pil);
  color: var(--creme);
  font-size: 1.125rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary .ico { width: 22px; height: 22px; stroke: var(--zand); }
.menu[open] > summary { background: var(--walnoot-2); }

/* Over de pagina en niet ertussen: een kop die openklapt, duwt anders de tekst
   weg op het moment dat de lezer ze zoekt. Een eigen vlak walnoot-2, geen
   schaduw (§1). */
.menu-lijst {
  position: absolute;
  top: calc(100% + 0.625rem);
  right: 0;
  width: min(20rem, calc(100vw - 2 * var(--marge)));
  padding: 1rem;
  border-radius: var(--r-kaart);
  background: var(--walnoot-2);
}
/* Een <details> sluit niet bij Escape en niet als de focus weggaat, en dit
   paneel ligt over de kruimels: wie met Tab uit het menu ging, zette de focus
   eronder, op 320px op een "Home" die voor 0% zichtbaar was (WCAG 2.4.11, en
   §9: niets bedekt de focus). Staat de toetsenbordfocus buiten het menu, dan
   valt het paneel weg, en Shift+Tab naar Menu haalt het terug. Niet met
   :focus-within op .menu: dan hangt het paneel af van of een klik de summary
   focust. Playwright-WebKit doet dat, maar een knop focust het bij een klik
   niet, en Safari op een Mac of iPhone is niet nagemeten; waar een klik de
   summary niet focust, viel het paneel voor muis en vinger meteen weer weg.
   :focus-visible volgt het toetsenbord: een klik of tik zet het
   niet op een link of knop, en een tekstveld, dat het altijd draagt, verliest
   de focus bij een klik of tik op Menu (nagemeten in Chromium en WebKit).
   Wat blijft: de details staat nog open, dus de summary houdt haar vlak en de
   vaste balk blijft weg tot de volgende klik op Menu. */
body:has(:focus-visible:not(.menu *)) .menu-lijst { display: none; }
.menu-lijst ul a {
  display: flex;
  align-items: center;
  min-height: 3.375rem;
  padding: 0 0.5rem;
  font-size: var(--t-basis);
  font-weight: 700;
  text-decoration: none;
}
.menu-hulp { padding: 0 0.5rem; }
.menu-hulp .liever-gebeld { min-height: 3.375rem; color: var(--creme); font-size: var(--t-basis); }
.menu-lijst .knop { width: 100%; margin-top: 0.75rem; }

@media (min-width: 23.75rem) {
  .merk svg { height: 34px; }
  .site-kop-rij { column-gap: 1rem; }
  .menu > summary { padding: 0 0.875rem; }
}
@media (min-width: 30rem) {
  .site-kop-rij { column-gap: 1.5rem; }
  .menu > summary { padding: 0 1.125rem; gap: 0.625rem; }
}
@media (min-width: 43.75rem) {
  .site-kop .knop--kop { display: inline-flex; min-height: 3rem; padding: 0 1.25rem; }
  .menu-lijst .knop { display: none; }
}
@media (min-width: 75rem) {
  .merk svg { height: 42px; }
  .site-kop-rij { flex-wrap: nowrap; gap: 1rem; min-height: 5.25rem; }
  .site-nav { display: block; margin-left: 0.5rem; }
  .site-kop-hulp > .liever-gebeld { display: inline-flex; }
  .menu { display: none; }
}
@media (min-width: 85rem) {
  .merk svg { height: 46px; }
  .site-kop-rij { gap: 1.5rem; }
  .site-nav { margin-left: 1.25rem; }
  .site-nav a { padding: 0 0.875rem; }
  .site-kop-hulp { gap: 1.25rem; }
  .site-kop .knop--kop { padding: 0 1.375rem; }
}

/* -- Voet ----------------------------------------------------------------- */
/* Walnoot, met het gestapelde merk als afsluiter. De beschrijving in
   zand-licht, de wettelijke gegevens onder elkaar (partials/wettelijk), en
   de drie groepen links in crème met een koperen lijn. Op een gsm breekt geen
   link over twee regels.

   Op een gsm compact (§6, "Voet"): het merk op 140px, links van 44px (de bodem
   van §3, zoals in het ontwerp), en minder lucht, ook in de voet van de
   splash. Vanaf 23.4375rem (375px) staat "Wat wij doen" links en staan de twee
   korte groepen rechts onder elkaar: de breedste link past daar naast "Meer
   over ons", met 2px over op 375. In een venster met een schuifbalk van 15px
   past het pas vanaf 388px; smaller breekt "Website laten nakijken", maar
   schuift er niets buiten beeld (auto krimpt tot het langste woord). Vanaf
   30rem staan de twee kolommen niet meer tegen de randen maar naast elkaar,
   zoals vanaf 43.75rem. Onder 23.4375rem "Wat wij doen" over de volle breedte,
   met de twee korte groepen eronder, vanaf 22.5rem naast elkaar. Vanaf
   43.75rem drie kolommen, met de maat en de lucht van een breed scherm. */
.site-voet { padding-block: 3rem 2.5rem; background: var(--walnoot); color: var(--creme); }
.site-voet-raster { display: grid; gap: 2rem; }
.site-voet-raster > * { min-width: 0; }
.voet-logo { display: inline-flex; vertical-align: top; text-decoration: none; }
.voet-logo svg { display: block; width: 140px; height: auto; }
.voet-beschrijving { max-width: 34rem; color: var(--zand-licht); font-size: 1.125rem; line-height: 1.6; }
.voet-meta { margin-top: 1rem; font-size: 1.125rem; line-height: 1.75; }
.voet-meta a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: 0; font-weight: 700; text-decoration-color: var(--zand); overflow-wrap: anywhere; }
.voet-hulp { margin-top: 0.25rem; }
.voet-nav { display: grid; gap: 1.75rem; align-content: start; }
.voet-groep { min-width: 0; }
.voet-kop { color: var(--zand); font-size: 1.125rem; font-weight: 800; line-height: 1.3; letter-spacing: 0; }
.voet-nav ul { display: grid; margin: 0.25rem 0 0; padding: 0; list-style: none; }
.voet-nav a {
  display: inline-flex;
  align-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-block: 0;
  font-size: 1.125rem;
  line-height: 1.35;
  text-decoration-thickness: 1.5px;
}
.voet-nav a:hover, .voet-nav a[aria-current] { text-decoration-thickness: 3.5px; }
/* De voet van de splash: geen merk en geen groepen, dus links de beschrijving
   groot en rechts de wettelijke gegevens met "Liever gebeld?". */
.voet--splash .voet-beschrijving { max-width: 36rem; color: var(--creme); font-size: var(--t-groot); font-weight: 600; line-height: 1.5; }

@media (min-width: 22.5rem) {
  .voet-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voet-groep:first-child { grid-column: 1 / -1; }
}
@media (min-width: 23.4375rem) {
  .voet-nav { grid-template-columns: repeat(2, auto); justify-content: space-between; column-gap: 1rem; }
  .voet-groep:first-child { grid-column: 1; grid-row: 1 / span 2; }
}
@media (min-width: 30rem) {
  .voet-nav { justify-content: start; column-gap: 3.5rem; }
}
@media (min-width: 43.75rem) {
  .site-voet { padding-block: 4.5rem 3.5rem; }
  .site-voet-raster { gap: 2.5rem; }
  .voet-logo svg { width: 200px; }
  .voet-meta { margin-top: 1.5rem; }
  .voet-hulp { margin-top: 0.5rem; }
  .voet-nav { grid-template-columns: repeat(3, auto); justify-content: start; gap: 2rem 3.5rem; }
  .voet-nav ul { margin-top: 0.75rem; }
  .voet-nav a { min-height: 3.25rem; }
  .voet-groep:first-child { grid-column: auto; grid-row: auto; }
}
@media (min-width: 68.75rem) {
  .site-voet { padding-block: 6.5rem 5rem; }
  .site-voet-raster { grid-template-columns: 300px minmax(0, 1fr); column-gap: 6rem; row-gap: 3.5rem; align-items: start; }
  .voet-merk { grid-row: 1 / span 2; }
  .voet-logo svg { width: 300px; }
  .voet-wie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.5rem; }
  .voet-wie .voet-beschrijving { grid-row: 1 / span 2; }
  .voet-wie .voet-meta, .voet-wie .voet-hulp { grid-column: 2; }
  .voet-wie .voet-meta { margin-top: 0; }
  .voet-nav { grid-column: 2; column-gap: 4.5rem; }
  .voet--splash .site-voet-raster { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 6rem; }
  .voet--splash .voet-wie { display: block; }
  .voet--splash .voet-meta { margin-top: 0; }
  .voet--splash .voet-wie .voet-meta { margin-top: 1.5rem; }
}

/* -- Held, splash en paginakop -------------------------------------------- */
/* De held is walnoot en loopt door onder de kop. De bovenregel zegt voor wie,
   als gewone zin (§1), de onderregel zegt wat. Zand staat alleen op walnoot:
   op licht haalt het 1,99:1. */
/* clip en niet alleen hidden: hidden maakt van de held een scrollvak, en dan
   meet de tijdlijn van de vaste balk de knop hierin tegen de held en niet
   tegen het scherm, en schuift de balk nooit terug. hidden blijft staan voor
   een browser die clip niet kent. */
.held { overflow: hidden; overflow: clip; padding-block: 1.25rem 4.5rem; background: var(--walnoot); color: var(--creme); }
.bovenregel { margin-bottom: 0.75rem; color: var(--inkt-zacht); font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
.op-donker .bovenregel { color: var(--zand); }
.onderregel { color: var(--inkt-zacht); font-size: var(--t-groot); font-weight: 700; line-height: 1.35; text-wrap: balance; }
.op-donker .onderregel { color: var(--zand); }
.held-alinea { max-width: 40rem; margin-top: 2rem; color: var(--zand-licht); }
@media (min-width: 56.25rem) {
  .held { padding-block: 1.75rem 6rem; }
}

/* De splash heeft geen kop: het gestapelde merk staat naast de H1, op een
   gsm erboven. */
/* Op de 404-weg staan alleen de held en de voet, allebei walnoot. Op crème
   groeit main op een hoog scherm tot een strook crème tussen die twee, en op
   een halve pixel tekent de browser er een lichte lijn tussen. */
.splash--zonder-formulier { background: var(--walnoot); }
/* Twee walnoten vlakken na elkaar lopen anders naadloos in elkaar over, en dan
   leest de voet als het vervolg van de held. Een lijn in walnoot-2, zoals boven
   de vaste balk, en geen tweede vlak. */
.splash--zonder-formulier .site-voet { border-top: 2px solid var(--walnoot-2); }
.splash-held { padding-block: 2.5rem 5rem; }
.splash-raster { display: grid; gap: 2.5rem; }
.splash-raster > * { min-width: 0; }
.splash-merk svg { display: block; width: 180px; height: auto; }
.splash-held h1 { max-width: 11em; font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.5rem); }
.splash-tekst .onderregel { margin-top: 1.25rem; }
.splash-tekst .held-alinea { max-width: 36rem; margin-top: 1rem; }
.splash-tekst .knop-blok { margin-top: 2rem; }
.helpen-kop { max-width: 14em; }
.helpen-slot {
  margin-top: 3rem;
  padding: 1.75rem 1.5rem;
  border-radius: var(--r-kaart);
  background: var(--walnoot);
  color: var(--creme);
  font-size: clamp(1.4375rem, 1.1rem + 1.2vw, 2.125rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
}
.helpen-slot strong { font-weight: 800; }
@media (min-width: 50rem) {
  .helpen-slot { padding: 2.5rem 2.75rem; }
}
@media (min-width: 62.5rem) {
  .splash-held { padding-block: 6rem 7.5rem; }
  .splash-raster { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); column-gap: 6rem; align-items: center; }
  .splash-merk { grid-column: 2; grid-row: 1; justify-self: center; }
  .splash-merk svg { width: 400px; max-width: 100%; }
  .splash-tekst { grid-column: 1; grid-row: 1; }
}

/* De kop van een tekstpagina (de juridische): walnoot, zoals de held, met de
   kruimels, de H1 en de datum. De tekst zelf staat eronder op crème. */
.paginakop { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); background: var(--walnoot); color: var(--creme); }
.paginakop h1 { max-width: 18em; margin-top: 1.5rem; }
.paginakop-datum { margin-top: 1rem; color: var(--zand-licht); font-size: var(--t-klein); }
/* De lijst van de artikels van een juridische tekst, als vraag onder de datum
   (partials/publiek/artikels), op de breedte van een antwoord. */
.paginakop .vragen { max-width: 46rem; margin-top: 2rem; }
.paginakop + .band { padding-top: clamp(3rem, 2rem + 3vw, 5rem); }

/* Het "›" is een scheidingsteken en geen pijl (§1), en een schermlezer hoeft
   het niet voor te lezen: de tweede content-regel geeft het een lege
   alternatieve tekst, waar de browser die vorm kent. */
.kruimels { padding-top: 1.5rem; color: var(--inkt-zacht); font-size: var(--t-klein); }
.op-donker .kruimels { color: var(--zand-licht); }
.kruimels ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0; padding: 0; list-style: none; }
.kruimels li + li::before { content: "\203A"; content: "\203A" / ""; margin-right: 0.5rem; }
/* "Home" is een tikdoel van 48px, zoals elke link in een zin, maar de rij
   blijft even hoog: de negatieve marge geeft de lucht terug aan de kop. Die
   marge laat het vak 12px onder de rij uitsteken, en wat later geschilderd
   wordt, nam dat deel van het tikdoel: een gridcel van de kop eronder (het
   werkstuk, de eerste blik, /software-op-maat) of de tweede rij van de
   kruimels, en dan haalde "Home" er 36 of 40 (gemeten 27 september 2026).
   position: relative legt de link erboven; het open menu ligt er nog over,
   want de kop staat op z-index 5. */
.kruimels a { position: relative; display: inline-flex; align-items: center; min-height: 3rem; margin-block: -0.75rem; padding-block: 0; }
.op-donker .kruimels a { color: var(--creme); }

/* -- Tekst: prose en foutpagina ------------------------------------------- */
/* De juridische teksten. De h2 staat hier op de maat van een h3: een tekst
   met elf artikels leest op --t-h2 als elf sectiekoppen, en de lezer verliest
   de draad tussen de artikels. --maat rekent op de lopende tekst, dus een kop
   krijgt dezelfde breedte als de alinea eronder. Elke kop draagt een anker
   (#artikel-4, #punt-2c), en wie erheen springt, ziet er wat lucht boven. */
.prose > * { max-width: var(--maat); }
.prose h2 { margin-top: 3rem; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.01em; scroll-margin-top: 1.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol, .prose dl { margin-top: 1rem; }
.prose h2 + * { margin-top: 0.875rem; }
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose li + li { margin-top: 0.5rem; }
.prose li::marker { color: var(--koper-diep); }
/* Het blok met onze gegevens: regels onder elkaar, en een link in een zin
   krijgt hier geen lucht erboven en eronder, want die lucht legde de
   focusring over de regel erboven en die eronder. De regel is hoog genoeg. */
.gegevens a { padding-block: 0; }

/* Een opsomming van wat iets is, zoals een cookie met waarvoor en hoe lang:
   een kop per ding en een lijst eronder, en geen tabel. Drie kolommen op een
   gsm schoven buiten beeld, en wat buiten beeld schuift, leest niemand. */
.prose h3 { margin-top: 1.75rem; font-size: var(--t-basis); line-height: 1.3; }
.prose h3 + * { margin-top: 0.5rem; }
.prose dt { font-weight: 700; }
.prose dd + dt { margin-top: 0.5rem; }
@media (min-width: 30rem) {
  .prose dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.5rem 1.5rem; }
  .prose dd + dt { margin-top: 0; }
}
/* Breed hangen de koppen in de linkermarge, op de lijn van de H1, met de
   tekst ernaast: anders bleef de rechterhelft van een lange tekst leeg. Een
   float, want in een raster slaat een hoge kop een gat tussen de alinea's. */
@media (min-width: 75rem) {
  .prose { display: flow-root; padding-left: calc(var(--marge) + 21.5rem); }
  .prose h2 { float: left; clear: left; width: 17rem; margin-left: -21.5rem; }
  .prose h2 + * { margin-top: 3rem; }
  .prose h2:first-child + * { margin-top: 0; }
}

/* Een foutpagina is een wegwijzer met één knop, op crème, en heeft geen
   contactblok: een 404 buiten de web-groep rendert zonder sessie. */
.fout-pagina { padding-block: var(--sectie); }
.fout-pagina h1 { max-width: 18em; }
.fout-pagina > p:not(.bovenregel):not(.knop-blok) { max-width: var(--maat); margin-top: 1.25rem; }
/* De mislukte blik en het wachtscherm dat het opgaf: het blikformulier met het
   adres al ingevuld, in de plaats van de ene knop. */
.fout-pagina .blikformulier { max-width: 34rem; margin-top: 2rem; }

/* -- Vragen en lijsten ---------------------------------------------------- */
/* Een <details> bij de sectie waar de vraag hoort, als kaart. De plus is een
   inline svg, en haar staande streep valt weg als de vraag open staat. De
   summary krijgt de radius van de kaart: de focusring volgt de vorm van het
   element, en anders stond er een recht kader om een ronde kaart. */
.vragen { display: grid; gap: 0.75rem; align-content: start; }
.vraag { border-radius: var(--r-kaart); background: var(--papier); }
.op-donker .vraag { background: var(--walnoot-2); }
.vraag summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  min-height: 4.5rem;
  padding: 1rem 1.25rem 1rem 1.5rem;
  border-radius: var(--r-kaart);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.vraag summary::-webkit-details-marker { display: none; }
.plus { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--walnoot); }
.plus .ico { width: 20px; height: 20px; stroke: var(--zand); stroke-width: 2.2; }
.op-donker .plus { background: var(--zand); }
.op-donker .plus .ico { stroke: var(--walnoot); }
.vraag[open] .staand { display: none; }
/* Een link naar een antwoord (/prijzen#prijs-hoger) klapt de vraag open, en
   landt met de vraag zelf nog in beeld erboven. */
.vraag-antwoord { max-width: 46rem; padding: 0 1.5rem 1.625rem; scroll-margin-top: 6.5rem; }
.vraag .vraag-antwoord > * + * { margin-top: 1em; }
@media (min-width: 56.25rem) {
  .vraag summary { padding: 1.125rem 1.5rem 1.125rem 1.875rem; font-size: 1.3125rem; }
  .vraag-antwoord { padding: 0 1.875rem 1.875rem; }
}

/* Lijsten zonder vinkjes (§1): wat erin zit krijgt een koperen schijfje, wat
   er niet in zit een koperen streepje. Het streepje staat vandaag alleen op
   /prijzen, en toch hier: het is één component met de stippen, op dezelfde
   regels (KlassenBestaanTest noemt het bij naam). */
.stippen, .streepjes { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.stippen li, .streepjes li { position: relative; padding-left: 1.75rem; }
.stippen li::before { content: ""; position: absolute; top: 0.6em; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--koper); }
.streepjes li::before { content: ""; position: absolute; top: 0.78em; left: 0; width: 16px; height: 4px; border-radius: 2px; background: var(--koper); }

/* Een redactionele lijst: het icoon los in de marge, een vet begin op een
   eigen regel, en de zin eronder. */
.regelen { display: grid; row-gap: 2.25rem; margin: 2.25rem 0 0; padding: 0; list-style: none; }
.regelen li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 1.125rem; max-width: 38rem; }
.regelen .ico--los { margin-top: 2px; }
.regelen strong { display: block; margin-bottom: 0.35rem; font-size: 1.3125rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.005em; text-wrap: balance; }
@media (min-width: 62.5rem) {
  .regelen { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; row-gap: 2.75rem; margin-top: 2.75rem; }
  .regelen li { column-gap: 1.375rem; max-width: none; }
  .regelen strong { font-size: 1.4375rem; }
}

/* -- Beeld ---------------------------------------------------------------- */
/* Een scherm hangt in een warm kader (§7): bleek op licht, papier voor de
   offerte, walnoot-2 op walnoot. In het vlak walnoot-2 van het bewijs op
   /software-op-maat is het kader bleek, want een kader in de kleur van zijn
   vlak is geen kader; die regel staat in het blad van die pagina. Het
   bijschrift staat er zichtbaar onder, met een koperen stip. */
.kader { padding: 10px; border-radius: var(--r-kaart); background: var(--bleek); }
.op-donker .kader { background: var(--walnoot-2); }
.kader--papier { background: var(--papier); }
.kader img { width: 100%; border-radius: var(--r-beeld); }
.bijschrift { display: flex; align-items: baseline; gap: 0.625rem; margin-top: 1rem; color: var(--inkt-zacht); font-size: var(--t-klein); line-height: 1.5; }
.bijschrift::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--koper); transform: translateY(-1px); }
.op-donker .bijschrift { color: var(--zand-licht); }
@media (min-width: 56.25rem) {
  .kader { padding: 14px; }
}

/* -- Contactblok ---------------------------------------------------------- */
/* Onderaan elke pagina die het draagt, in dezelfde volgorde (WCAG 3.2.6): de
   kop, het formulier, en dan "Liever gebeld?" met het versturen en mailen
   (contactblok-na). Zo staat het formulier op een gsm meteen onder de kop,
   waar de knop van de held landt; vanaf 62.5rem de tekst links, het formulier
   rechts. Koper is dat ene vlak, met ebben erop (5,09:1). */
.contactblok-raster { display: grid; gap: 3rem; }
.contactblok-raster > * { min-width: 0; }
.contactblok-tekst > p { max-width: 36rem; }
.contactblok-tekst > p + p { margin-top: 1.25rem; }
.antwoord { max-width: 34rem; margin-top: 1.5rem; font-size: var(--t-groot); font-weight: 600; line-height: 1.45; }
.liever-gebeld-vlak { padding: 1.625rem 1.5rem 1.75rem; border-radius: var(--r-kaart); background: var(--koper); color: var(--ebben); }
.liever-gebeld-vlak p { margin-top: 0.6rem; font-weight: 500; }
.contactblok-tekst .liever-gebeld-vlak + p { margin-top: 2rem; }
.mailen a { overflow-wrap: anywhere; }
@media (min-width: 43.75rem) {
  .liever-gebeld-vlak { padding: 2rem 2.25rem 2.125rem; }
}
@media (min-width: 62.5rem) {
  .contactblok-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; gap: 2.5rem 4rem; align-items: start; }
  .contactblok-raster > .contact-kaart { grid-column: 2; grid-row: 1 / span 2; }
  .contactblok-na { grid-column: 1; }
}

/* -- Formulier ------------------------------------------------------------ */
/* partials/contact-kaart, dezelfde markup op elke pagina. Labels boven
   het veld in 700; velden 56px hoog met 18px tekst op elke breedte (§3), dus
   een vaste maat en geen token, en een rand die 4:1 haalt waar ze staat
   (veldrand op het veld 6,15:1). */
.contact-kaart { padding: 1.875rem 1.25rem 2rem; border-radius: 28px; background: var(--papier); color: var(--walnoot); }
.contact-kaart h3 { font-size: 1.875rem; }
.contact-kaart > p { max-width: 34rem; margin-top: 0.8rem; }
.contact-kaart form { display: grid; gap: 1.6rem; margin-top: 1.75rem; }
@media (min-width: 43.75rem) {
  .contact-kaart { padding: 2.75rem 2.5rem; }
}

/* De melding staat boven het veld (§6, Fouten), ook al staat ze in de markup
   eronder: zo stond ze toen de markup gedeeld was met layouts/site, en zo is ze
   gebleven. Ze krijgt geen focus, dus de
   volgorde van de tab verandert er niet door. */
.veld { display: flex; flex-direction: column; gap: 0.45rem; }
.veld label { order: 1; }
.veld-hulp { order: 2; }
.veld .veld-fout { order: 3; }
.veld input, .veld select, .veld textarea { order: 4; }
.veld label, .keuzeveld legend { padding: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
.veld label span, .keuzeveld legend span { color: var(--inkt-zacht); font-weight: 400; }
.veld-hulp { max-width: var(--maat); color: var(--inkt-zacht); font-size: var(--t-klein); line-height: 1.5; }
.keuzeveld .veld-hulp { margin-top: 0.35rem; }
/* Een link uit de foutsamenvatting landt op het veld zelf, met de focus
   erin, en de browser zet het dan bovenaan het scherm, met het label, de hulp
   en de melding erboven buiten beeld. De marge houdt ze erbij: op 390px breed
   staan boven het gsm-veld en de paar zinnen samen acht regels, zo'n 290px.
   Hoogstens 45vh, zodat het veld op een liggende gsm zelf in beeld blijft. */
.veld input, .veld select, .veld textarea {
  scroll-margin-top: min(19rem, 45vh);
  width: 100%;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--veldrand);
  border-radius: var(--r-veld);
  background: var(--veld);
  color: var(--walnoot);
  font-size: 1.125rem;
  line-height: 1.4;
}
.veld textarea { min-height: 10rem; resize: vertical; text-wrap: wrap; }
.veld input:focus-visible, .veld select:focus-visible, .veld textarea:focus-visible { outline-offset: 2px; border-color: var(--walnoot); }
.veld [aria-invalid="true"] { border: 3px solid var(--walnoot); }
.veld-fout { padding-left: 0.75rem; border-left: 4px solid var(--walnoot); font-weight: 700; }

/* Een keuzegroep begint met haar legend, dus een link naar de groep (de
   foutsamenvatting, en "Liever gebeld?" naar #antwoordwijze) heeft maar wat
   lucht boven die regel nodig. */
.keuzeveld { min-width: 0; margin: 0; padding: 0; border: 0; scroll-margin-top: 1.5rem; }

/* Het gsm-nummer en het belmoment staan er pas als Bel mij terug gekozen is.
   Zonder keuze was het eerste invulveld van elk formulier een gsm-nummer, en
   wie liever mailt, las daarin dat wij zijn nummer wilden. De velden
   verschijnen onder de keuze die de lezer net aanklikte, dus er verdwijnt
   niets terwijl iemand het invult. Zonder :has() valt de hele regel weg en
   staat alles er, met de hulp die zegt bij welke keuze het hoort. Bij Per
   e-mail slaat de server ze over (exclude_if in ContactRequest). */
.contact-kaart form:not(:has(input[name="antwoordwijze"][value="bellen"]:checked)) .alleen-bellen { display: none; }

/* De twee tegels voor de antwoordwijze, en de keuzes als rijen van 48px. Het
   rondje blijft zichtbaar: een tegel zonder rondje leest als een knop die
   meteen verstuurt. Het rondje is dat van de browser, in walnoot, want een
   eigen rondje vroeg een schaduw (§1). */
.antwoord-keuzes { display: grid; gap: 0.75rem; margin-top: 0.9rem; }
.antwoord-keuze {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  align-content: start;
  padding: 1.125rem 1.125rem 1.25rem;
  border: 2px solid var(--veldrand);
  border-radius: 16px;
  background: var(--veld);
  cursor: pointer;
}
.antwoord-keuze input { grid-row: 1 / span 2; margin-top: 0.2rem; }
.antwoord-keuze-titel { font-size: 1.1875rem; font-weight: 800; line-height: 1.35; }
.antwoord-keuze-uitleg { grid-column: 2; color: var(--inkt-zacht); font-size: var(--t-klein); line-height: 1.5; }
.antwoord-keuze:has(input:checked) { padding: 1.0625rem 1.0625rem 1.1875rem; border-width: 3px; border-color: var(--walnoot); background: var(--bleek); }
.type-keuzes { display: grid; gap: 0.25rem; margin-top: 0.75rem; }
.type-keuzes label { display: flex; align-items: center; gap: 0.875rem; min-height: 3rem; font-size: 1.125rem; line-height: 1.35; cursor: pointer; }
.type-keuzes input, .antwoord-keuze input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--walnoot); }
@media (min-width: 43.75rem) {
  .antwoord-keuzes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* De ring op de hele tegel en niet alleen op het rondje. Alleen waar :has()
   bestaat: zonder :has() houdt het rondje zijn eigen ring, anders staat er
   nergens een. */
.antwoord-keuze:has(:focus-visible), .type-keuzes label:has(:focus-visible) { outline: 3px solid var(--walnoot); outline-offset: 3px; }
@supports selector(:has(*)) {
  .antwoord-keuze input:focus-visible, .type-keuzes input:focus-visible { outline: 0; }
}

/* Het ingeklapte formulier (elke pagina met het contactblok, behalve de
   splash): de vier vragen die mogen leeg blijven, achter een summary van 72px
   in 700 zoals een vraag, met een plus in een schijf (in 400, zo dun als de
   plus van een vraag) die een min wordt als ze open staat. Zonder eigen
   klasse, onder .contact-kaart; het teken heeft een lege alternatieve tekst. */
.contact-kaart details > summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
  padding: 0.75rem 1rem 0.75rem 1.25rem;
  border: 2px solid var(--veldrand);
  border-radius: 16px;
  background: var(--veld);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.contact-kaart details > summary::-webkit-details-marker { display: none; }
.contact-kaart summary > span { flex: 1; }
.contact-kaart summary span span { color: var(--inkt-zacht); font-weight: 400; }
.contact-kaart summary::after { content: "+"; content: "+" / ""; display: grid; flex: none; place-items: center; width: 40px; height: 40px; padding-bottom: 4px; border-radius: 50%; background: var(--walnoot); color: var(--zand); font-size: 1.625rem; font-weight: 400; line-height: 1; }
.contact-kaart details[open] > summary::after { content: "\2212"; content: "\2212" / ""; }
.contact-kaart details > div { display: grid; gap: 1.6rem; padding-top: 1.6rem; }
.contact-kaart .knop { width: 100%; min-height: 3.875rem; font-size: 1.1875rem; }
.formulier-voet { max-width: var(--maat); color: var(--inkt-zacht); font-size: var(--t-klein); line-height: 1.55; }

/* De foutsamenvatting bovenaan het formulier, en de bevestiging. Er is geen
   foutkleur: de vorm en het woord "Fout:" dragen het. */
.flash-fout, .flash-succes { padding: 1rem 1.25rem; border-radius: var(--r-veld); background: var(--veld); }
.flash-fout { border: 3px solid var(--walnoot); }
.flash-fout ul { margin-top: 0.5rem; padding-left: 1.25rem; }
.flash-succes { border-left: 6px solid var(--koper); font-weight: 700; }
.contact-kaart .flash-fout, .contact-kaart .flash-succes { margin-top: 1.5rem; }
.honing { position: absolute; top: -999px; left: -999px; width: 1px; height: 1px; overflow: hidden; }

/* partials/blik-formulier, op de landingspagina van de eerste blik (in de
   paginakop, op walnoot) en op /website-vernieuwen (op bleek). Het heette
   .werkbon tot de eerste blik overging, en droeg toen nog een opschrift met
   een nummer. Opzij minder lucht op een smal scherm, van 20px vanaf 450px
   breed tot 12px op 350 en smaller: zo staat "Start de gratis websitecheck"
   op één regel, ook naast een schuifbalk. De zin is even lang als die van het
   gratis gesprek, in een knop die door het kader 40px smaller is.
   De kaart is papier, ook op een walnoten vlak, en dan horen de knop en de
   focusring bij de kaart en niet bij het vlak eromheen: zand op papier haalt
   1,99:1, en een knop of een ring die niet afsteekt, is er niet (§5.1 en
   §5.5). Na .op-donker in dit blad, zodat bij gelijk gewicht de kaart wint. */
.blikformulier { display: grid; gap: 1rem; padding: 1.875rem clamp(0.75rem, 8vw - 1rem, 1.25rem) 2rem; border-radius: var(--r-kaart); background: var(--papier); color: var(--walnoot); }
.blikformulier .knop { background: var(--walnoot); color: var(--creme); }
.blikformulier .knop:hover { background: var(--walnoot-2); }
.blikformulier :focus-visible { outline-color: var(--walnoot); }
.blikformulier-uitleg { max-width: var(--maat); color: var(--inkt-zacht); font-size: var(--t-klein); }

/* -- De home -------------------------------------------------------------- */
/* De componenten die alleen pages/home draagt (§6, kolom "Stand"), in de
   volgorde van de pagina. Een regel per component waar het past: dit blok is
   het grootste van het blad, en de grens van §10 telt bytes. Wat met versie 3
   van de home wegging, ging hier mee weg; de drie deuren en het streepje
   kwamen terug met /prijzen, de betaalbalk in het blad van die pagina. */
main p + p { margin-top: 1em; }

/* Held: op een gsm de tekst en daaronder de waaier; vanaf 75rem een kolom van
   810px, waarin de H1 op 56px drie regels telt, gebalanceerd zoals elke kop:
   met text-wrap: wrap hing "de" aan het eind van de eerste regel. Het werk
   staat rechts, vanaf de bovenkant van de H1 en tot 96px de marge in (§5.6). */
.held-raster { display: grid; }
.held-raster > * { min-width: 0; }
.held-tekst { margin-top: 1rem; }
.prijskaart { margin-top: 1.25rem; padding: 18px 18px 16px; border-radius: var(--r-kaart); background: var(--creme); color: var(--walnoot); }
.prijskaart p + p { margin-top: 0.7rem; }
.prijskaart .klein { color: var(--inkt-zacht); }
/* Dezelfde kaart als antwoord onder de H1 van /prijzen en /website-onderhoud:
   smaller dan de kop, met lucht erboven, en ná .prijskaart, zodat haar marge
   wint. Tot /website-onderhoud ze ook droeg, stond ze in het blad van
   /prijzen. */
.prijskaart--kop { max-width: 46rem; margin-top: 2rem; }
.prijsregel { font-size: 1.25rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.012em; }
.doorloop { display: flex; align-items: flex-start; gap: 0.75rem; margin-top: 0.9rem; }
.doorloop .ico { margin-top: 3px; stroke: var(--koper); }
.held-actie { margin-top: 1.1rem; }
.held-actie .onder-knop { margin-top: 0.9rem; }
.waaier { margin-top: 3rem; }
.waaier-podium { position: relative; width: 94%; margin-inline: auto; aspect-ratio: 1 / 0.92; }
.waaier .kader { position: absolute; width: 86%; }
.waaier-achter { top: 0; right: 0; transform: rotate(4deg); transform-origin: 70% 30%; }
.waaier-voor { bottom: 0; left: 0; transform: rotate(-3deg); transform-origin: 30% 70%; }
/* Op 320px staat de regel op 20px: zo staat "Een startwebsite kost vanaf € 123
   excl. btw." (drie cijfers) op twee regels, en op 24px op drie. Tot 27 september
   2026 brak het bedrag nergens af en was het op 24px breder dan de kaart;
   sindsdien breekt het vóór "excl. btw" (§4, Prijs::vanafRegel). */
@media (min-width: 23.75rem) {
  .prijsregel { font-size: 1.5rem; }
}
@media (min-width: 56.25rem) {
  .prijskaart { padding: 20px 26px 18px; }
  .prijsregel { font-size: 1.875rem; }
  .held-actie { display: flex; align-items: center; gap: 1.75rem; }
  .held-actie .onder-knop { max-width: 22rem; margin-top: 0; }
}
@media (min-width: 75rem) {
  .held-raster { grid-template-columns: minmax(0, 810px) minmax(0, 1fr); column-gap: 3rem; }
  .held .bovenregel, .held h1, .held-tekst { grid-column: 1; }
  .held .waaier { grid-column: 2; grid-row: 2 / span 2; align-self: start; margin-top: 0.5rem; }
  .waaier-podium { width: calc(100% + min(96px, max(32px, (100vw - 1240px) / 2 - 28px))); margin-inline: 0; aspect-ratio: 1 / 1.1; }
  .waaier .kader { width: 100%; }
  .waaier .bijschrift { margin-top: 1.5rem; }
}

/* Wat regelen wij voor u: de kop met het antwoord, twee kaarten (papier,
   radius 20) met elk een lijst en een link, wat u zelf doet, en de vraag met de
   tekst over een bestaande site ernaast; de link onderaan de kaart. In de kaart
   van de startwebsite staat onder de lijst ook een pijl-link naar /inspiratie,
   zonder kaart-link, en de kaart-link blijft onderaan. */
.kaarten { display: grid; gap: 1rem; margin-top: 3rem; }
.kaarten > * { min-width: 0; }
.kaart { display: flex; flex-direction: column; padding: 28px 24px 30px; border-radius: var(--r-kaart); background: var(--papier); }
.kaart h3 + * { margin-top: 1.1rem; }
.kaart-link { margin-top: auto; padding-top: 1.25rem; }
.zelf-band { margin-top: 3.5rem; padding: 30px 24px; border-radius: var(--r-kaart); background: var(--walnoot); }
.zelf-band ol { display: grid; gap: 1.25rem; margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: zelf; }
.zelf-band li { position: relative; padding-left: 3.5rem; counter-increment: zelf; }
.zelf-band li::before { content: counter(zelf); position: absolute; top: -2px; left: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--zand); color: var(--walnoot); font-size: 1.125rem; font-weight: 800; }
.zelf-band li:nth-child(2)::before { background: var(--koper); color: var(--ebben); }
.alles { margin-top: 1.5rem; color: var(--zand); font-size: var(--t-groot); font-weight: 800; }
.na-band { display: grid; gap: 1.75rem; margin-top: 3rem; }
.na-band > * { min-width: 0; }
@media (min-width: 56.25rem) {
  .kaart { padding: 36px 36px 38px; }
}
@media (min-width: 62.5rem) {
  .kaarten--gelijk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zelf-band { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 3.5rem; margin-top: 4.5rem; padding: 48px 52px; }
  .zelf-band h3 { grid-column: 1; grid-row: 1; font-size: 2rem; }
  .zelf-band ol { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; margin-top: 0; }
  .zelf-band li { padding: 60px 0 0; }
  .zelf-band li::before { top: 0; width: 44px; height: 44px; }
  .alles { grid-column: 1; grid-row: 2; align-self: end; }
  .na-band { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; column-gap: 4rem; margin-top: 4rem; }
  .na-band .tekst { padding-top: 0.5rem; }
}

/* De prijs, op bleek. Het bedrag in een walnoten vlak, met "vanaf" en "excl.
   btw" erin, even groot en in dezelfde kleur (§4). Daaronder de afspraken als
   gewone alinea's, de garantie groot in 800, en de knop; vanaf 62.5rem staan
   garantie en knop rechts ernaast, anders bleef de helft van de band leeg.
   Op een gsm breekt het bedrag alleen vóór "excl. btw", vanaf 62.5rem nergens:
   daar stond het maandbedrag anders in twee walnoten vlakken, en de kolom is
   er op haar smalst breed genoeg. De alinea naast de demo staat bovenaan, op
   de lijn van het beeld, en niet in het midden, 170px onder de datum. */
.prijs-kop { display: grid; gap: 2rem; }
.prijs-kop > * { min-width: 0; }
.prijs-zin { max-width: 38rem; margin-top: 1.5rem; font-size: var(--t-groot); font-weight: 500; line-height: 1.5; }
.prijs-kop .klein { margin-top: 0.9rem; }
.bedrag { padding: 0.02em 0.28em; border-radius: 6px; background: var(--walnoot); color: var(--creme); font-weight: 800; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.uurtarief { display: grid; align-content: start; gap: 1.25rem; padding: 30px 28px; border-radius: var(--r-kaart); background: var(--walnoot); }
.uurtarief p { font-size: clamp(1.4375rem, 1.1rem + 1vw, 2rem); font-weight: 800; line-height: 1.25; letter-spacing: -0.015em; }
.uitleg-raster { display: grid; align-items: start; gap: 2rem; margin-top: 2.5rem; }
.uitleg-raster > * { min-width: 0; }
.prijs-uitleg { max-width: 46rem; }
.afspraken { margin-top: 3rem; }
.afspraken > p { max-width: var(--maat); }
.garantie { max-width: 30em; margin-top: 2.5rem; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
.afspraken .knop-blok { margin-top: 1.75rem; }
@media (min-width: 62.5rem) {
  .prijs-kop { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; column-gap: 4rem; }
  .bedrag { white-space: nowrap; }
  .uurtarief { padding: 40px 40px 44px; }
  .uitleg-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 4rem; }
  .afspraken { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); column-gap: 4rem; align-items: start; margin-top: 4rem; }
  .afspraken > p { grid-column: 1; }
  .afspraken > .garantie { grid-column: 2; grid-row: 1; margin-top: 0; }
  .afspraken > .knop-blok { grid-column: 2; grid-row: 2; }
}

/* De werkwijze (partials/publiek/werkwijze): vijf schijven, afwisselend zand
   en koper, op één koperen lijn van 6px, met de weekrij erboven. Op een gsm
   staat de lijn verticaal tussen de schijven; vanaf 62.5rem een rij van drie
   en een van twee, vanaf 75rem één rij van vijf. */
.werk-kop { max-width: 14em; }
.stappen { margin: 3rem 0 0; padding: 0; list-style: none; counter-reset: stap; }
.stap { position: relative; min-width: 0; padding: 0 0 2.5rem 3.5rem; counter-increment: stap; }
.stap::before { content: counter(stap); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--zand); color: var(--walnoot); font-size: 1.1875rem; font-weight: 800; }
.stap:nth-child(even)::before { background: var(--koper); color: var(--ebben); }
.stap::after { content: ""; position: absolute; top: 40px; bottom: 0; left: 17px; width: 6px; background: var(--koper); }
.stap:last-child { padding-bottom: 0; }
.stap:last-child::after { display: none; }
.week { min-height: 24px; padding-top: 8px; color: var(--zand); font-size: var(--t-klein); font-weight: 700; line-height: 1.5; }
.stap h3 { margin-top: 0.3rem; font-size: 1.375rem; }
.stap h3 + p { max-width: 36rem; margin-top: 0.6rem; color: var(--zand-licht); }
.u-doet { width: fit-content; max-width: 100%; margin-top: 0.9rem; padding: 8px 16px; border-radius: 14px; background: var(--walnoot-2); font-size: 1.125rem; line-height: 1.45; }
.u-doet strong { color: var(--zand-licht); }
.uitloop p { max-width: 46rem; margin-top: 1.25rem; color: var(--zand-licht); }
@media (min-width: 62.5rem) {
  .stappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.5rem 1.75rem; margin-top: 4rem; }
  .stap { display: flex; flex-direction: column; padding: 0; }
  .stap .week { height: 24px; min-height: 0; padding-top: 0; }
  .stap::before { position: static; order: 1; width: 56px; height: 56px; margin-top: 14px; font-size: 1.5rem; }
  .stap h3, .stap p:not(.week) { order: 2; }
  .stap h3 { margin-top: 1.25rem; font-size: 1.3125rem; }
  .stap h3 + p { font-size: 1.125rem; }
  .stap::after { top: 63px; right: -1.75rem; bottom: auto; left: 56px; width: auto; height: 6px; }
  .stap:nth-child(3)::after { display: none; }
}
@media (min-width: 75rem) {
  .stappen { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stap:nth-child(3)::after { display: block; }
  .stap:last-child::after { display: none; }
}

/* De administratie, met de keten: vijf walnoten schijven op een koperen lijn,
   verticaal op een gsm en horizontaal vanaf 62.5rem. Daaronder stuk voor stuk,
   en het bewijs in walnoot met het scherm in zijn kader ernaast, zonder eigen
   vlak: twee vlakken in elkaar lieten op een gsm een tekstkolom van 245px
   over (§5.7). Het vlak echt-grens staat nog alleen op /software-op-maat, in
   het blad van die pagina. */
.admin-kop { display: grid; gap: 2rem; }
.admin-kop > * { min-width: 0; }
.verhaal p { max-width: 38rem; }
.keten { display: grid; margin: 3rem 0 0; padding: 0; list-style: none; counter-reset: keten; }
.keten li { position: relative; min-width: 0; min-height: 40px; padding: 0 0 2rem 3.5rem; counter-increment: keten; }
.keten li::before { content: counter(keten); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--walnoot); color: var(--zand); font-size: 1.1875rem; font-weight: 800; }
.keten li::after { content: ""; position: absolute; top: 40px; bottom: 0; left: 17px; width: 6px; background: var(--koper); }
.keten li:last-child::after { display: none; }
.keten strong { display: block; padding-top: 4px; font-size: 1.3125rem; font-weight: 800; }
.keten-slot { max-width: 38rem; margin-top: 2rem; }
.echt { display: grid; gap: 2rem; padding: 36px 24px; border-radius: 28px; background: var(--walnoot); }
.echt > * { min-width: 0; }
.echt h3 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.625rem); }
.echt h3 + p { margin-top: 1.25rem; }
.echt figure { margin-top: 1.5rem; }
.link-na { margin-top: 1rem; }
@media (min-width: 62.5rem) {
  .admin-kop { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 4.5rem; }
  .verhaal { padding-top: 0.6rem; }
  .keten { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 1.75rem; }
  .keten li { padding: 88px 0 0; }
  .keten li::before { width: 64px; height: 64px; font-size: 1.5rem; }
  .keten li::after { top: 29px; right: -1.75rem; bottom: auto; left: 64px; width: auto; height: 6px; }
  .keten strong { padding-top: 0; }
  .echt { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 3.5rem; padding: 64px; }
}

/* Wie wij zijn: twee kaarten in walnoot-2 met het koppelteken van het merk
   ertussen, 20px zand en 20px koper, 8px dik, op de hoogte van de namen. Op
   een gsm staan de kaarten onder elkaar, en staat het koppelteken rechtop
   tussen de twee. Tot de fotodag staan er de naam, de rol en het adres als
   tekst, zonder kader; met een portret (oprichter--portret) staat het links
   op een gsm en erboven vanaf 43.75rem. --koppel is de plaats van het
   rechtopstaande koppelteken: onder de naam, of onder het portret. Het duo
   staat links op de lijn van de kop (gecentreerd las het als een fout), de
   namen op --t-h3 en niet kleiner dan de zin erboven. Op /over-ons is de
   naam een h2 (de pagina gaat over hen), met dezelfde opmaak als de strong
   op de home. */
.wie-kop h2 { max-width: 20em; }
.wie-kop .groot { max-width: 42rem; margin-top: 1.5rem; color: var(--zand-licht); font-weight: 500; }
.duo { display: grid; gap: 28px; margin: 3rem 0 0; padding: 0; list-style: none; }
.oprichter { --koppel: 34px; position: relative; padding: 14px 16px; border-radius: var(--r-kaart); background: var(--walnoot-2); }
.oprichter--portret { --koppel: calc(12px + (100% - 24px) * 0.18 - 3px); display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); align-items: start; column-gap: 1rem; padding: 12px; }
.portret img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-beeld); }
.naamkaart { padding: 6px 4px 8px; color: var(--zand-licht); font-size: 1.125rem; line-height: 1.5; }
.naamkaart strong, .naamkaart h2 { display: block; margin-bottom: 0.35rem; color: var(--creme); font-size: var(--t-h3); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.naamkaart a { display: block; width: fit-content; max-width: 100%; margin-top: 0.15rem; padding-block: 10px; color: var(--creme); font-weight: 700; text-decoration-color: var(--zand); overflow-wrap: anywhere; }
.oprichter + .oprichter::before, .oprichter + .oprichter::after { content: ""; position: absolute; left: var(--koppel); width: 6px; height: 14px; }
.oprichter + .oprichter::before { top: -28px; background: var(--zand); }
.oprichter + .oprichter::after { top: -14px; background: var(--koper); }
.samen { margin-top: 1.75rem; color: var(--zand); font-size: var(--t-groot); font-weight: 700; }
.wie-onder { display: grid; gap: 3rem; }
.wie-onder > * { min-width: 0; }
.wie-onder .vragen { margin-top: 2rem; }
.van-u h3 + p { max-width: 38rem; margin-top: 1.25rem; font-size: var(--t-groot); font-weight: 600; line-height: 1.45; }
.briefje { align-self: start; padding: 36px 26px 34px; border-top: 10px solid var(--koper); border-radius: 6px; background: var(--papier); color: var(--walnoot); font-size: 1.25rem; line-height: 1.6; }
.briefje p:first-child { font-size: 1.5rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.012em; }
.briefje .handtekening { margin-top: 1.6em; font-size: 1.375rem; font-weight: 800; }
@media (min-width: 43.75rem) {
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; max-width: 840px; margin-top: 4rem; }
  .oprichter { display: block; padding: 14px; }
  .naamkaart { padding: 14px 10px; }
  .oprichter + .oprichter::before, .oprichter + .oprichter::after { display: none; }
  .oprichter + .oprichter .naamkaart { position: relative; }
  .oprichter + .oprichter .naamkaart::before, .oprichter + .oprichter .naamkaart::after { content: ""; position: absolute; top: 24px; width: 20px; height: 8px; }
  .oprichter + .oprichter .naamkaart::before { left: -54px; background: var(--zand); }
  .oprichter + .oprichter .naamkaart::after { left: -34px; background: var(--koper); }
}
@media (min-width: 62.5rem) {
  .wie-onder { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4.5rem; }
  .briefje { margin-top: 0.4rem; padding: 52px 52px 48px; }
}

/* -- De drie deuren ------------------------------------------------------- */
/* partials/publiek/drie-deuren: 1,7/1/1, het gewone geval draagt het gewicht,
   in walnoot, en de drie even hoog, zodat het smalste niet boven het brede
   uitsteekt; het voorbeeld staat dan onderaan de kaart. Drie gelijke kaarten
   naast elkaar staan op de lijst van §1. Hier en niet in het blad van
   /prijzen: een partial onder partials/publiek hoort bij dit blad, ook als
   vandaag maar één pagina het insluit (/website-onderhoud zegt de drie
   gevallen kort, als lijst). Wat alleen /prijzen draagt (de betaalbalk,
   alleen-breed), staat in css/pagina/prijzen.css (§10). */
.deuren { display: grid; gap: 0.875rem; margin-top: 2rem; }
.deur { min-width: 0; padding: 1.75rem 1.5rem; border-radius: var(--r-kaart); background: var(--papier); }
.deur h3 { font-size: 1.3125rem; }
.deur p { margin-top: 0.9rem; }
.deur-voorbeeld { color: var(--inkt-zacht); font-size: 1.125rem; line-height: 1.5; }
.deur--eerst { background: var(--walnoot); color: var(--creme); }
.deur--eerst h3 { font-size: 1.625rem; }
.deur--eerst .deur-voorbeeld { color: var(--zand-licht); }
@media (min-width: 62.5rem) {
  .deuren { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); }
  .deur { display: flex; flex-direction: column; padding: 2.125rem 1.875rem; }
  .deur .deur-voorbeeld { margin-top: auto; padding-top: 0.9rem; }
  .deur--eerst { padding: 2.5rem 2.375rem; }
  .deur--eerst p:not(.deur-voorbeeld) { font-size: 1.3125rem; line-height: 1.5; }
}

/* De vaste balk op een gsm (§6, "Vaste balk"), op elke pagina met het
   contactblok onderaan (de layout zet hem daar) en op de splash, het enige
   wat blijft staan. Alleen op een scherm van minstens 26rem hoog: op een gsm
   die liggend onder 43.75rem breed blijft, en bij 200% zoom op een laptop,
   nam hij een vijfde tot een derde van het scherm (WCAG 1.4.10, techniek
   C34), en elke gsm rechtop houdt hem, ook de kleinste met de werkbalken van
   Safari erbij.
   Waar de browser scroll-gestuurde animaties kent, is hij weg zolang de knop
   van de held of de paginakop in beeld staat en zodra het contactblok in
   beeld komt. Een browser die ze niet kent (Firefox, en Safari vóór 26: elke
   iPhone die nog op iOS 18 of ouder staat) toont hem altijd, ook over die
   knop en, na een tik op de balk, over de eerste vraag van het formulier. Of
   hij daar wegvalt, beslissen de oprichters; tot dan staat hij er. Een pagina
   zonder zo'n knop (de juridische) heeft geen tijdlijn --actie, en dan staat
   hij er van bij het openen tot het contactblok komt: een tijdlijn zonder
   element is inactief, en een animatie erop doet niets. Eén knop per pagina
   in .held-actie, want twee elementen met dezelfde naam maken de tijdlijn ook
   inactief (NavigatieTest). Waar hij blijft staan, krijgt de voet ruimte,
   zodat de balk haar laatste regel niet bedekt; waar hij weggaat, niet, want
   onderaan is het contactblok al voorbij en de balk dus weg, en dan bleef er
   84px leeg walnoot staan.

   Wie minder beweging vraagt, krijgt geen schuivende balk, maar wel een die
   wegspringt, op dezelfde twee plaatsen: zolang de knop van de held of de
   paginakop in beeld staat (balk-stil), en zodra het contactblok komt
   (balk-weg). Allebei alleen visibility, voor iedereen; wie beweging
   toelaat, krijgt er het blok daarna voor in de plaats. Zonder de eerste
   sprong stond hij bij het openen over die knop, op 390 bij 844 bijna
   helemaal over die van /website-laten-maken-antwerpen; zonder de tweede lag
   hij na een tik op de balk over de tegels "Bel mij terug" en "Per e-mail",
   en bracht een tweede tik de lezer terug naar de top van het blok, om
   dezelfde reden als op /contact (Navigatie::metBalk()). Wegspringen is geen
   beweging (§5.8, en de uitzondering in Ontwerpregels).

   Weg is helemaal weg: zodra de knop van de held boven de balk uitkomt,
   springt hij weg (op 0,1% van de tijdlijn), want een balk die meeschoof,
   stond op 390 bij 844 bij het openen half over die knop. Boven de balk, want
   op 393 bij 852 stond de knop 6px in beeld en was de balk al weg: een eerste
   scherm zonder knop. Met het menu open ook weg. scroll-padding houdt wat
   focus krijgt boven de balk (WCAG 2.4.11); verder geen inset op de
   tijdlijnen, want anders meten ze tegen dat kortere scherm.

   Weg is ook onzichtbaar: een balk die alleen buiten beeld geschoven is,
   houdt zijn knop in de tabvolgorde, en dan staat de focus op iets wat niemand
   ziet (WCAG 2.4.7, nagemeten op 390 bij 664: de 13e Tab op de splash). Daarom
   visibility: hidden in de standen waarin hij weg is, en dat ook uit de
   keyframes: een regel zou de animatie niet volgen. Twee animaties die
   dezelfde eigenschap zetten, overschrijven elkaar, dus balk-wijk verbergt de
   balk en balk-weg de knop. balk-stil en balk-weg kunnen wel samen op de
   balk: balk-weg zet alleen een eindstand, en tot het contactblok komt, laat
   hij door wat balk-stil zegt (nagemeten in Chromium en WebKit). Alleen in
   de verborgen stand en nooit "visible", anders zet de animatie de balk terug
   die het open menu verbergt. */
.balk { display: none; }
@media (max-width: 43.6875rem) and (min-height: 26rem) {
  html { scroll-padding-bottom: calc(3.5rem + 40px + env(safe-area-inset-bottom)); }
  .balk { position: fixed; right: 0; bottom: 0; left: 0; z-index: 20; display: block; padding: 12px var(--marge) calc(12px + env(safe-area-inset-bottom)); border-top: 2px solid var(--walnoot-2); background: var(--walnoot); }
  .balk .knop { width: 100%; min-height: 3.5rem; }
  .balk + .site-voet { padding-bottom: calc(2.5rem + 84px); }
  body:has(.menu[open]) .balk { visibility: hidden; }
  @supports (animation-timeline: view()) {
    body { timeline-scope: --actie, --contact; }
    .held-actie .knop, .splash-tekst .knop { view-timeline: --actie block; view-timeline-inset: 0 calc(3.5rem + 26px); }
    .contactblok { view-timeline: --contact block; view-timeline-inset: 0; }
    .balk { animation: balk-stil linear both, balk-weg linear both; animation-timeline: --actie, --contact; animation-range: cover 0% cover 100%, entry 0% entry 30%; }
    .balk + .site-voet { padding-bottom: 2.5rem; }
  }
}
@media (max-width: 43.6875rem) and (min-height: 26rem) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .balk { animation: balk-wijk linear both, balk-uit linear both; animation-timeline: --actie, --contact; animation-range: cover 0% cover 100%, entry 0% entry 30%; }
    .balk .knop { animation: balk-weg linear both; animation-timeline: --contact; animation-range: entry 0% entry 30%; }
  }
}
@keyframes balk-wijk { 0% { translate: 0 0; } 0.1%, 90% { translate: 0 110%; visibility: hidden; } 100% { translate: 0 0; } }
@keyframes balk-uit { from { transform: translateY(0); } to { transform: translateY(110%); } }
@keyframes balk-weg { to { visibility: hidden; } }
@keyframes balk-stil { 0.1%, 90% { visibility: hidden; } }

/* -- Hoog contrast -------------------------------------------------------- */
/* In Windows-hoogcontrast vallen de vlakken weg. Het merk krijgt de kleur van
   de tekst, de knop wordt een knop van het systeem, en wat een vlak was (het
   koperen blok, de schijven, de tegels) houdt een rand. In systeemkleuren, en
   die houdt deze modus zoals ze zijn. */
@media (forced-colors: active) {
  .merk-mah, .merk-sen { fill: CanvasText; }
  .knop { border: 3px solid ButtonText; background: ButtonFace; color: ButtonText; }
  .site-kop, .site-voet, .paginakop, .held { border-block: 2px solid CanvasText; }
  .liever-gebeld-vlak, .vraag, .contact-kaart, .blikformulier, .kader, .prijskaart, .zelf-band, .uurtarief, .kaart, .echt, .oprichter, .briefje, .u-doet, .balk, .deur { border: 2px solid CanvasText; }
  .plus, .contact-kaart summary::after, .stap::before, .keten li::before, .zelf-band li::before { border: 2px solid CanvasText; }
  .antwoord-keuze:has(input:checked) { border-color: Highlight; }
}

/* -- Beweging ------------------------------------------------------------- */
/* Niets beweegt vanzelf (§5.8). Alleen de hover van links en knoppen, kort,
   en alleen voor wie geen minder beweging vraagt. */
@media (prefers-reduced-motion: no-preference) {
  a, .knop {
    transition: background-color 140ms var(--ease-uit), text-decoration-thickness 140ms var(--ease-uit);
  }
}

/* -- Print ---------------------------------------------------------------- */
/* Kop, menu, knoppen en het contactblok vallen weg; zwart op wit mag hier, en
   alleen hier (§5.9). De voet houdt wie wij zijn, zonder de navigatie. Wat op
   walnoot zand-licht is (de kruimels, de beschrijving in de voet), wordt
   zwart: op wit papier haalde het 1,7:1, en het rapport van de eerste blik
   gaat vaak op papier. */
@media print {
  body, .site-voet, .paginakop, .held, .band--walnoot { background: white; color: black; }
  a, .site-voet a, .op-donker .kruimels, .op-donker .kruimels a, .voet-beschrijving { color: black; }
  .merk-mah, .merk-sen { fill: black; }
  .sprong, .site-kop, .knop, .contactblok, .voet-nav, .voet-hulp, .balk { display: none; }
  .site-voet { padding-block: 1.5rem 0; }
}