/* Clavect-site v3, laag 1 en 2: verhaal en vormtaal, nog bijna zonder beweging.
   Vormregel: alles haaks (knoppen, kaarten, velden, beelden); alleen stapnummers, pulsen, het statusteken, de logotegel en toestellen zijn rond.
   Iconen: eigen set in stijl A, lijn 1,5, haaks, in inkt en los zonder tegel.
   Mint alleen voor knoppen, het merkstreepje en kleine accenten; nooit als tekstkleur op licht. */
/* Clavect-lettertypes (OFL): Host Grotesk variabel 300 tot 800 en Fragment Mono, alleen Latijnse tekens. Bron in Media/Merk/Clavect. */
@font-face { font-family: "Host Grotesk"; src: url("/font/host-grotesk-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
/* Fragment Mono heeft alleen gewicht 400; zwaardere mono komt er niet in, en de browser maakt geen nep-vet (zie body). */
@font-face { font-family: "Fragment Mono"; src: url("/font/fragment-mono-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* Tekstbreedtes staan in em in plaats van ch: ch hangt af van de "0" van het geladen font en zou bij de fallback een andere regelval geven. */
/* Systeemfonts met dezelfde breedte en hoogte als Host Grotesk en Fragment Mono, zodat de tekst niet verspringt als de echte font binnenkomt (A10, gemeten met fontTools) */
@font-face { font-family: "Grotesk Fallback"; src: local("Arial"); size-adjust: 105.3%; ascent-override: 96.4%; descent-override: 29.9%; line-gap-override: 0%; }
@font-face { font-family: "Mono Fallback"; src: local("Menlo"), local("Courier New"); size-adjust: 102.6%; ascent-override: 92.5%; descent-override: 24.4%; line-gap-override: 0%; }

:root { --curve: cubic-bezier(.2, .7, .2, 1); --snel: .2s; --normaal: .4s; --traag: .7s;
  --inkt: #1F2A36; --gedempt: #4F5C6A; --zacht: #5E6A78;
  --vlak: #F4F6F9; --vlak-2: #EAEEF3; --wit: #FFFFFF;
  --lijn: rgba(31, 42, 54, .1); --lijn-sterk: rgba(31, 42, 54, .18);
  --mint: #00D68F; --mint-diep: #00A870; --mint-zacht: rgba(0, 214, 143, .12);
  --rand: 0;
  --nav: 4.25rem;
  --breedte: 73.75rem;
  --blad: 72.5rem;
  --schaduw: 0 1px 2px rgba(31,42,54,.05), 0 1.5rem 3.75rem -1.75rem rgba(31,42,54,.28);
  --mono: "Fragment Mono", "Mono Fallback", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
/* Grote schermen: tot 1440 is 1rem 16px. Daarboven groeit alles mee tot 120% (19.2px) bij 2560,
   en de inhoud wordt breder van 1180 tot 1728. */
@media (min-width: 1440px) {
  html { font-size: clamp(16px, 0.285714vw + 11.885714px, 19.2px); }
  :root { --breedte: clamp(1180px, 48.93vw + 475.4px, 1728px); --blad: calc(var(--breedte) - 1.25rem); }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--vlak); color: var(--inkt); font-family: "Host Grotesk", "Grotesk Fallback", ui-sans-serif, system-ui, sans-serif; font-size: 1rem; line-height: 1.65; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* Pijl-cursor in plaats van het tekststreepje; selecteren en kopiëren blijft mogelijk.
   Met een muis een eigen pijl en hand met een strakke mint schaduw (PNG, 1x en 2x),
   zodat hij op Mac en Windows gelijk is; anders de gewone cursor van het systeem. */
:root { --pijl: default; --hand: pointer; }
@media (hover: hover) and (pointer: fine) {
  :root { --pijl: url("/beeld/cursor-pijl.png?v=2") 3 2, default; --hand: url("/beeld/cursor-hand.png?v=2") 9 2, pointer; }
  @supports (cursor: -webkit-image-set(url("/beeld/cursor-pijl.png?v=2") 1x) 3 2, default) {
    :root {
      --pijl: -webkit-image-set(url("/beeld/cursor-pijl.png?v=2") 1x, url("/beeld/cursor-pijl@2x.png?v=2") 2x) 3 2, default;
      --hand: -webkit-image-set(url("/beeld/cursor-hand.png?v=2") 1x, url("/beeld/cursor-hand@2x.png?v=2") 2x) 9 2, pointer;
    }
  }
  @supports (cursor: image-set(url("/beeld/cursor-pijl.png?v=2") 1x) 3 2, default) {
    :root {
      --pijl: image-set(url("/beeld/cursor-pijl.png?v=2") 1x, url("/beeld/cursor-pijl@2x.png?v=2") 2x) 3 2, default;
      --hand: image-set(url("/beeld/cursor-hand.png?v=2") 1x, url("/beeld/cursor-hand@2x.png?v=2") 2x) 9 2, pointer;
    }
  }
}
body { cursor: var(--pijl); }
a[href], button, summary, label { cursor: var(--hand); }
input, textarea, select, [contenteditable] { cursor: text; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.ic { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: butt; stroke-linejoin: miter; }

.sla-over { position: absolute; left: 1rem; top: -3.75rem; z-index: 50; padding: .625rem 1rem; border-radius: 0; background: var(--inkt); color: var(--wit); text-decoration: none; }
.sla-over:focus { top: .75rem; }
:focus-visible { outline: .1875rem solid var(--inkt); outline-offset: .1875rem; }

.binnen { width: min(100% - 2rem, var(--breedte)); margin: 0 auto; }

/* ---------- Tekstbouwstenen ---------- */
/* label: monospace, met het mint streepje uit het logo ervoor */
.label { display: inline-flex; align-items: center; gap: .625rem; margin: 0 0 1.125rem; font: 500 .7812rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gedempt); }
.label::before { content: ""; width: 1.125rem; height: .1875rem; border-radius: 2px; background: var(--mint); }
.kop { margin: 0 0 .875rem; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.12; font-weight: 600; letter-spacing: -.035em; max-width: 16.63em; }
.inleiding { margin: 0 0 2.5rem; max-width: 43.09em; font-size: 1.0625rem; color: var(--gedempt); }
/* definitiezin bovenaan "Zo werkt het": de kern in één alinea */
.definitie { margin: 0 0 1.125rem; max-width: 38em; padding-left: 1.125rem; border-left: .1875rem solid var(--mint); font-size: 1.1562rem; line-height: 1.55; color: var(--inkt); }
.bijschrift { margin: .875rem 0 0; font: 400 .7812rem/1.4 var(--mono); color: var(--zacht); }

/* ---------- Knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  min-height: 3rem; padding: 0 1.5rem; border: 0; border-radius: 0;
  background: var(--mint); color: var(--inkt);
  font: 600 .9375rem/1 "Host Grotesk", "Grotesk Fallback", sans-serif; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap; cursor: var(--hand);
  box-shadow: 0 0 0 var(--inkt);
  transition: transform var(--snel) var(--curve), box-shadow var(--snel) var(--curve), background var(--snel);
}
.knop:hover { transform: translate(-2px, -2px); box-shadow: 2px 2px 0 var(--inkt); }
.knop:active { transform: translate(0, 0); box-shadow: 0 0 0 var(--inkt); }
.knop--klein { min-height: 2.75rem; padding: 0 1.125rem; font-size: .875rem; }
.knop--rand { background: var(--wit); box-shadow: inset 0 0 0 1px rgba(31,42,54,.34), 0 0 0 var(--inkt); font-weight: 500; }
.knop--rand:hover { box-shadow: inset 0 0 0 1px var(--inkt), 2px 2px 0 var(--inkt); }
.knop--rand:active { box-shadow: inset 0 0 0 1px var(--inkt), 0 0 0 var(--inkt); }
.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; }
.knoppen--midden { justify-content: center; }
.pijl { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; margin-top: 2px; font-weight: 600; text-decoration: none; text-decoration-line: underline; text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: .375rem; }
.pijl .ic { width: 1.125rem; height: 1.125rem; transition: transform var(--snel); }
.pijl:hover .ic { transform: translateX(.1875rem); }

/* ---------- Navigatie ---------- */
.nav { position: sticky; top: 0; z-index: 30; height: var(--nav); background: rgba(244,246,249,.86); border-bottom: 1px solid var(--lijn); -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); }
.nav__binnen { height: 100%; width: min(100% - 2rem, var(--breedte)); margin: 0 auto; display: flex; align-items: center; gap: 2rem; }
.nav__merk { display: flex; margin-right: auto; }
.nav__merk img { height: 2.125rem; width: auto; }
.nav__links { display: flex; gap: 1rem; }
.nav__links a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .375rem; font-size: .9062rem; font-weight: 500; color: var(--gedempt); text-decoration: none; }
.nav__links a:hover { color: var(--inkt); }
.nav__links .nav__mobiel { display: none; }
.nav__links a[aria-current] { color: var(--inkt); text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: .5rem; }
/* Tweede rij op een productpagina: de onderdelen van die pagina */
.subnav { position: sticky; top: var(--nav); z-index: 29; height: 2.75rem; background: rgba(244,246,249,.86); border-bottom: 1px solid var(--lijn); -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); }
.subnav__binnen { height: 100%; width: min(100% - 2rem, var(--breedte)); margin: 0 auto; display: flex; align-items: center; gap: .25rem; }
.subnav a { flex: none; display: inline-flex; align-items: center; height: 100%; padding: 0 .625rem; font: 400 .7812rem/1 var(--mono); letter-spacing: .04em; color: var(--zacht); text-decoration: none; box-shadow: inset 0 -2px 0 transparent; transition: color var(--snel), box-shadow var(--snel); }
.subnav a:first-child { margin-left: -.625rem; }
.subnav a:hover { color: var(--inkt); }
.subnav a[aria-current] { color: var(--inkt); box-shadow: inset 0 -2px 0 var(--mint); }
html:has(.subnav) { --subnav: 2.75rem; scroll-padding-top: calc(var(--nav) + 3.75rem); }

/* ---------- Gloed achter de kop ----------
   site.js zet een zachte mint gloed vast achter de kop bovenaan de pagina (vermenigvuldigd, dus tekst blijft even donker).
   Met een muis is er geen gloed: daar draagt de cursor zelf de mint schaduw. */
.gloed { position: absolute; left: -11.25rem; top: calc(var(--nav) - 12.5rem); z-index: 60; width: min(40rem, calc(100vw + 10rem)); height: 32.5rem; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,214,143,.24), rgba(0,214,143,.09) 60%, transparent); mix-blend-mode: multiply; }
@media (hover: hover) and (pointer: fine) { .gloed, .held__gloed { display: none; } }

/* ---------- Bovenkant ---------- */
.held { position: relative; padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6.5rem); overflow: hidden; }
/* lijnenraster als technische ondergrond; het hokje onder de muis licht mint op (site.js zet --cx/--cy) */
.held { --start: 0s; --mx: 72%; --my: 45%; --dx: 0; --dy: 0; --cx: -6.25rem; --cy: -6.25rem; }
.held__raster { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(31,42,54,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(31,42,54,.07) 1px, transparent 1px); background-size: 2rem 2rem;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 72% 45%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse 60% 70% at 72% 45%, #000 15%, transparent 72%); }
.held__raster::after { content: ""; position: absolute; left: var(--cx); top: var(--cy); width: 2.0625rem; height: 2.0625rem; background: var(--mint-zacht); box-shadow: inset 0 0 0 1px rgba(0,168,112,.35); transition: left var(--snel), top var(--snel); }
.held__gloed { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(28.75rem circle at var(--mx) var(--my), rgba(0,214,143,.22), transparent 70%); }

@keyframes teken { to { stroke-dashoffset: 0; } }
@keyframes verschijn { to { opacity: 1; translate: 0 0; } }
@keyframes tegel { to { opacity: 1; scale: 1; } }

/* Intro bij elk bezoek: het Clavect-icoon bouwt zich groot op in het midden en krimpt na 1,5 s naar het midden van het schema.
   De tekst staat al in de HTML; de intro ligt er alleen even overheen. Zonder JavaScript of bij minder beweging: geen intro. */
.intro { display: none; }
html.met-intro .held { --start: 1.6s; }
html.met-intro .intro { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; overflow: hidden; pointer-events: none;
  background: var(--vlak); animation: intro-open .5s var(--curve) 1.5s forwards, intro-klaar 0s linear 2.15s forwards; }
.intro__logo { width: clamp(7rem, 12vw, 9.75rem); height: auto; overflow: visible; transform-origin: 0 0; }
/* site.js meet het doel en zet dan deze klasse (om 1,5 s) */
.intro__logo.krimp { animation: intro-naar .6s var(--curve) forwards; }
.intro__hulp { fill: none; stroke: rgba(31,42,54,.16); stroke-width: .35; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: teken .7s var(--curve) calc(var(--n, 0) * .06s) forwards, intro-uit .25s var(--curve) 1.45s forwards; }
.intro__tegel { fill: #E6EDF3; stroke: var(--inkt); stroke-width: 1.26; transform-box: fill-box; transform-origin: center; opacity: 0; scale: .6; animation: tegel .55s var(--curve) .3s forwards; }
.intro__letters { fill: none; stroke: #1F2A36; stroke-width: 6.5; stroke-dasharray: 1; stroke-dashoffset: 1; animation: teken .45s var(--curve) .55s forwards; }
.intro__streep { stroke: var(--mint); stroke-width: 6.5; stroke-dasharray: 1; stroke-dashoffset: 1; animation: teken .35s var(--curve) .9s forwards; }
/* Woordmerk als vaste vorm (zelfde pad als Media/Merk/Clavect/clavect-logo-licht.svg) */
.intro__naam { fill: var(--inkt); opacity: 0; animation: verschijn .4s var(--curve) 1.05s forwards, intro-uit .2s var(--curve) 1.45s forwards; }
.intro__cursor { fill: var(--mint); }
@keyframes intro-naar { to { transform: translate(var(--naar-x), var(--naar-y)) scale(var(--naar-s)); } }
@keyframes intro-open { to { background-color: transparent; } }
@keyframes intro-uit { to { opacity: 0; } }
@keyframes intro-klaar { to { visibility: hidden; } }

/* Minder beweging: meteen de eindstand */
@media (prefers-reduced-motion: reduce) {
  .held__raster::after { transition: none; }
}

/* ---------- Secties ---------- */
.sectie { padding: clamp(4rem, 9vw, 7.5rem) 0; }

/* Zo werkt het: tabs links, nagespeeld portaal rechts. Zonder JavaScript staan alle stappen open. */
.demo { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.5fr); gap: 2rem; align-items: start; }
.demo__tabs { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.demo__tab { position: relative; display: grid; grid-template-rows: auto 1fr; padding: 1rem 1.125rem 1rem 1.375rem; border-radius: 0; transition: background var(--normaal), box-shadow var(--normaal), grid-template-rows var(--normaal) var(--curve); }
.demo__tab::before, .demo__voortgang { content: ""; position: absolute; left: 0; top: 1rem; bottom: 1rem; width: 2px; border-radius: 2px; background: var(--lijn-sterk); }
.demo__tab h3 { margin: 0; }
/* de hele tabkaart is klikbaar (tikvlak), niet alleen de kopregel */
.demo.is-live .demo__knop::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.demo__knop { display: flex; align-items: center; gap: .625rem; width: 100%; padding: 0; border: 0; background: none; font-family: inherit; font-size: 1.0312rem; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; color: var(--inkt); text-align: left; }
/* Tikdoel minimaal 44 px zonder dat de kaart groeit (WCAG 2.5.8); de hele kaart is al klikbaar via ::after. */
button.demo__knop { cursor: var(--hand); padding-block: .75rem; margin-block: -.75rem; }
.demo__tab .ic { color: var(--inkt); }
.demo__nr { font: 500 .7188rem var(--mono); color: var(--zacht); }
.demo__nr::before { content: attr(data-nr); }
.demo__tab p { margin: 0; padding-top: .5rem; min-height: 0; overflow: hidden; color: var(--gedempt); font-size: .9688rem; }
.demo__voortgang { background: var(--mint-diep); transform: scaleY(0); transform-origin: top; }
.demo.is-live .demo__tab { grid-template-rows: auto 0fr; }
.demo.is-live .demo__tab:not(.is-actief) .demo__knop { color: var(--gedempt); }
.demo.is-live .demo__tab:not(.is-actief):hover { background: rgba(255,255,255,.6); }
.demo.is-live .demo__tab.is-actief { grid-template-rows: auto 1fr; background: var(--wit); box-shadow: 0 0 0 1px var(--lijn); }
.demo.is-live .is-actief .demo__voortgang { animation: vul var(--duur, 7s) linear forwards; }
.demo.is-pauze .demo__voortgang { animation-play-state: paused; }
/* stilgezet (tik op een stap of pauzeknop): geen voortgangsbalk meer, er gebeurt niets vanzelf */
.demo.is-live.is-stil .is-actief .demo__voortgang { animation: none; }
/* de actieve tekst krijgt de hoogte van de langste, zodat de lijst niet verspringt (site.js zet --p-max) */
.demo.is-live .demo__tab.is-actief p { min-height: var(--p-max, 0px); }
.demo__onder { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: .875rem; }
.demo__onder .bijschrift { margin: 0; }
.demo__pauze { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .875rem; border: 1px solid var(--lijn-sterk); border-radius: 0; background: var(--wit); font-family: inherit; font-size: .8438rem; font-weight: 500; color: var(--inkt); cursor: var(--hand); }
.demo__pauze .ic { width: .875rem; height: .875rem; }
.demo__pauze:hover { border-color: var(--inkt); }
@keyframes vul { to { transform: scaleY(1); } }
.markeer { background: linear-gradient(transparent 52%, rgba(0,214,143,.32) 52% 90%, transparent 90%) no-repeat 0 0 / 100% 100%; color: var(--inkt); font-weight: 600; }
.demo.is-live .markeer { background-size: 0% 100%; transition: background-size var(--traag) var(--curve) .35s; }
.demo.is-live .is-actief .markeer { background-size: 100% 100%; }

.demo__podium { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 2.75rem 9.75rem; align-items: center; padding: 1.875rem 1.5rem 2.75rem; border-radius: var(--rand); background: var(--wit) linear-gradient(rgba(31,42,54,.045) 1px, transparent 1px) 0 0 / 2rem 2rem; box-shadow: 0 0 0 1px var(--lijn); }
.demo__podium::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, rgba(31,42,54,.045) 1px, transparent 1px) 0 0 / 2rem 2rem; }
.direct, .direct * { transition: none !important; }

/* portaalvenster */
.pv { position: relative; z-index: 1; border-radius: .75rem; background: var(--wit); box-shadow: 0 0 0 1px var(--lijn), var(--schaduw); font-size: .75rem; }
.pv__balk { display: flex; gap: .3125rem; padding: .625rem .75rem; border-bottom: 1px solid var(--lijn); }
.pv__balk i { width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--vlak-2); }
.pv__lijf { display: grid; grid-template-columns: 7.25rem minmax(0, 1fr); }
.pv__menu { display: grid; align-content: start; gap: 2px; padding: .625rem .5rem; border-right: 1px solid var(--lijn); }
.pv__menu span { display: flex; align-items: center; gap: .4375rem; padding: .4375rem .5rem; border-radius: .4375rem; color: var(--zacht); font-size: .7188rem; transition: background var(--normaal), color var(--normaal); }
.pv__menu .ic { width: .875rem; height: .875rem; }
.pv__menu b { font-weight: 500; }
.pv__menu .is-actief { background: var(--vlak); color: var(--inkt); }
.pv__menu .is-actief .ic { color: var(--inkt); }
.pv__venster { height: 15.75rem; overflow: hidden; }
.pv__spoor { display: flex; height: 100%; transform: translateX(calc(var(--n, 0) * -100%)); transition: transform var(--traag) var(--curve); }
.sc { flex: 0 0 100%; display: flex; flex-direction: column; align-items: flex-start; gap: .625rem; padding: 1rem 1.125rem; transition: opacity var(--normaal); }
.demo.is-live .sc { opacity: .3; }
.demo.is-live .sc.is-actief { opacity: 1; }
.sc__titel { font-weight: 600; font-size: .875rem; letter-spacing: -.01em; }
.sc__uitleg { color: var(--gedempt); font-size: .7188rem; }
.code { display: flex; gap: .375rem; }
.code span { display: grid; place-items: center; width: 1.875rem; height: 2.375rem; border-radius: .4375rem; box-shadow: 0 0 0 1px var(--lijn-sterk); font: 400 1rem var(--mono); transition: box-shadow var(--snel); }
.code span.focus, .pv__veld.focus { box-shadow: 0 0 0 1.5px var(--mint-diep), 0 0 0 .25rem var(--mint-zacht); }
.pv__rij { display: grid; grid-template-columns: 1.625rem 1fr auto; align-items: center; gap: .5rem; width: 100%; padding: .4375rem; border-radius: .5rem; background: var(--vlak); }
.pv__rij small { display: block; color: var(--zacht); font-size: .6562rem; }
.pv__rij--stil { opacity: .65; }
.pv__foto { width: 1.625rem; height: 1.625rem; border-radius: .375rem; background: linear-gradient(135deg, #CFE9F6, #8FC7E4); }
.pv__foto.pv__foto--b, .km__foto.km__foto--b { background: linear-gradient(135deg, #FBE7C4, #F2C27E); }
.pv__veld { min-width: 4rem; padding: .25rem .5rem; border-radius: .375rem; background: var(--wit); box-shadow: 0 0 0 1px var(--lijn-sterk); font-family: var(--mono); transition: box-shadow var(--snel); }
.pv__veld.focus::after { content: ""; display: inline-block; width: 1px; height: .75rem; margin-left: 1px; vertical-align: -2px; background: var(--inkt); animation: knipper 1s steps(1) infinite; }
@keyframes knipper { 50% { opacity: 0; } }
.pv__knop { margin-top: .25rem; padding: .375rem .8125rem; border-radius: 62.4375rem; background: var(--inkt); color: var(--wit); font-size: .7188rem; font-weight: 500; transition: background var(--snel); }
.pv__knop.ok { background: var(--mint-diep); }
.fotos { display: flex; gap: .5625rem; }
.fotos span { width: 1.75rem; height: 1.75rem; border-radius: .375rem; background: var(--f); box-shadow: 0 0 0 1px rgba(31,42,54,.12); transition: box-shadow var(--snel); }
.fotos .is-gekozen { box-shadow: 0 0 0 2px var(--wit), 0 0 0 .2188rem var(--inkt); }
.mini { display: grid; gap: .3125rem; width: 9.375rem; padding: .4375rem; border-radius: .5rem; background: var(--vlak); }
.mini i { height: 1.875rem; border-radius: .25rem; background: var(--wit); box-shadow: 0 0 0 1px var(--lijn); }
.mini i:first-child { height: 2.375rem; box-shadow: none; background: var(--mf, linear-gradient(135deg, #CFE9F6, #8FC7E4)); transition: background var(--normaal); }
.mini i:nth-child(2) { width: 40%; height: .375rem; justify-self: center; box-shadow: none; background: var(--inkt); }
.mini i:nth-child(3) { height: .625rem; border-radius: 62.4375rem; box-shadow: none; background: var(--inkt); }
.vak { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 4.125rem; align-items: center; gap: .625rem; width: 100%; font-size: .7188rem; color: var(--gedempt); }
.vak i { position: relative; height: .5rem; border-radius: .25rem; background: var(--vlak-2); overflow: hidden; }
.vak i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: var(--mint-diep); transition: width 1.6s var(--curve), background var(--normaal); }
.vak em { font: normal 500 .625rem var(--mono); color: #A35A14; text-align: right; opacity: 0; transition: opacity var(--normaal); }
.vak.laag i::before { background: #C9731F; }
.vak.laag em { opacity: 1; }
.cursor { display: none; position: absolute; z-index: 5; left: 0; top: 0; width: 1.125rem; height: 1.125rem; pointer-events: none; transform: translate(16.25rem, 9.375rem); transition: transform var(--traag) var(--curve), opacity var(--normaal); }
.demo.is-live .cursor { display: block; }
.cursor.weg { opacity: 0; }
.cursor::after { content: ""; position: absolute; left: -.5rem; top: -.5rem; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--mint); opacity: 0; }
.cursor.klik::after { animation: rimpel .45s var(--curve); }
@keyframes rimpel { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(1.8); } }

/* draad met vonk */
.draad { position: relative; height: 2px; background: var(--lijn-sterk); }
.draad i { position: absolute; top: -.1875rem; left: 0; width: .5rem; height: .5rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 .625rem var(--mint); opacity: 0; }
.draad i.reis { animation: reis .8s var(--curve) forwards; }
@keyframes reis { 0% { left: 0; opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - .5rem); opacity: 0; } }
@keyframes reis-v { 0% { top: 0; opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - .5rem); opacity: 0; } }

/* automaat en telefoon, wisselen bij stap 4 */
.toestel { position: relative; display: grid; place-items: center; height: 18.75rem; }
.km, .tel { grid-area: 1 / 1; transition: opacity var(--normaal), transform var(--normaal) var(--curve); }
.km { width: 9.25rem; padding: .4375rem; border-radius: .875rem; background: linear-gradient(160deg, #34414F, #1F2A36); box-shadow: 0 1.5rem 3rem -1.5rem rgba(31,42,54,.55); }
.km__scherm { position: relative; min-height: 13.375rem; padding: .5625rem .5rem; border-radius: .5rem; background: #F4F6F9; color: #1F2A36; overflow: hidden; }
.km__koppel { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; gap: .25rem; text-align: center; background: #F4F6F9; transition: opacity var(--normaal); }
.km__koppel small { font: 500 .4688rem var(--mono); letter-spacing: .1em; color: #5F6B79; }
.km__koppel b { font: 400 1rem var(--mono); }
.km__koppel.weg { opacity: 0; }
.km__kop { height: .875rem; margin-bottom: .5rem; border-radius: .25rem; background: var(--merk, #1F2A36); transition: background var(--normaal); }
.km__tegels { display: grid; grid-template-columns: 1fr 1fr; gap: .375rem; }
.km__tegel { padding: .3125rem; border-radius: .4375rem; background: #fff; box-shadow: 0 0 0 1px rgba(31,42,54,.1); transition: box-shadow var(--normaal); }
.km__tegel.flits { box-shadow: 0 0 0 2px #00D68F, 0 0 1rem rgba(0,214,143,.5); }
.km__foto { height: 2.5rem; margin-bottom: .3125rem; border-radius: .3125rem; background: linear-gradient(135deg, #CFE9F6, #8FC7E4); }
.km__naam { font-size: .5rem; line-height: 1.25; }
.km__prijs { font: 400 .6562rem var(--mono); }
.km__betaal { margin-top: .625rem; padding: .375rem; border-radius: 62.4375rem; background: var(--merk, #1F2A36); color: #fff; font-size: .5312rem; font-weight: 600; text-align: center; transition: background var(--normaal); }
.km__chip { position: absolute; z-index: 3; left: 50%; bottom: .625rem; display: flex; align-items: center; gap: .3125rem; padding: .25rem .5rem; border-radius: 62.4375rem; background: #fff; box-shadow: 0 .375rem 1rem -.375rem rgba(31,42,54,.35); font: 500 .5312rem var(--mono); white-space: nowrap; opacity: 0; transform: translate(-50%, .375rem); transition: opacity var(--normaal), transform var(--normaal); }
/* Wachtscherm, alleen in stap 03: daar kiest de klant nu logo en foto's (eigen kleuren op het verkoopscherm volgen met laag B). */
.km__wacht { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; gap: .5rem; padding: .5625rem .5rem; background: #F4F6F9; opacity: 0; transition: opacity var(--normaal); }
.demo__podium[data-stap="2"] .km__wacht { opacity: 1; }
.km__beeld { flex: 1; border-radius: .375rem; background: var(--beeld, linear-gradient(135deg, #CFE9F6, #8FC7E4)); }
.km__logo { display: flex; align-items: center; justify-content: center; gap: .3125rem; font-size: .5312rem; font-weight: 600; }
.km__logo i { width: .75rem; height: .75rem; border-radius: 50%; background: #1F2A36; }
.km__tik { padding: .375rem; border-radius: 62.4375rem; background: #1F2A36; color: #fff; font-size: .5312rem; font-weight: 600; text-align: center; }
.km__chip::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: #00D68F; }
.km__chip.zie { opacity: 1; transform: translate(-50%, 0); }
.tel { width: 8.625rem; aspect-ratio: 9 / 19.2; padding: .375rem; border-radius: 1.625rem; background: linear-gradient(150deg, #3A4756, #1F2A36); box-shadow: 0 0 0 1px rgba(31,42,54,.4), 0 1.5rem 3rem -1.5rem rgba(31,42,54,.55); opacity: 0; transform: translateY(.75rem) scale(.96); }
.tel__scherm { position: relative; height: 100%; border-radius: 1.3125rem; overflow: hidden; background: linear-gradient(170deg, #26394B, #0F1720); }
.tel__tijd { margin-top: 1.875rem; text-align: center; color: #fff; font-size: 1.625rem; font-weight: 300; letter-spacing: -.02em; }
.melding { position: absolute; top: 4.75rem; left: .375rem; right: .375rem; padding: .4375rem .5rem .5rem; border-radius: .75rem; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(.75rem); backdrop-filter: blur(.75rem); color: #1F2A36; font-size: .5312rem; line-height: 1.35; box-shadow: 0 .625rem 1.5rem -.625rem rgba(0,0,0,.5); opacity: 0; transform: translateY(-1.5rem) scale(.96); transition: opacity var(--normaal), transform var(--normaal) var(--curve); }
.melding.zie { opacity: 1; transform: none; }
.melding__kop { display: flex; align-items: center; gap: .3125rem; margin-bottom: .25rem; font: 500 .4688rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #6B7785; }
.melding__kop span { margin-left: auto; text-transform: none; letter-spacing: 0; }
.melding__app { width: .8125rem; height: .8125rem; border-radius: .2188rem; box-shadow: 0 0 0 1px var(--inkt); }
.melding b { display: block; font-size: .5938rem; }
.demo__podium[data-stap="3"] .km { opacity: 0; transform: scale(.94); }
.demo__podium[data-stap="3"] .tel { opacity: 1; transform: none; }
.voorbeeld { position: absolute; right: 1rem; bottom: .875rem; font: 500 .6562rem var(--mono); letter-spacing: .06em; color: var(--zacht); text-transform: uppercase; }

/* overstapper: spotlight-kaarten, mint gloed volgt de muis (--mx, --my uit site.js) */
.pluspunten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pluspunten li { position: relative; display: flex; flex-direction: column; gap: .875rem; padding: 1.625rem 1.5rem 1.75rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rand); overflow: hidden; isolation: isolate; transition: box-shadow var(--normaal) var(--curve), translate var(--normaal) var(--curve), border-color var(--normaal) var(--curve); }
.pluspunten li::before, .pluspunten li::after { content: ""; position: absolute; pointer-events: none; opacity: 0; transition: opacity var(--normaal) var(--curve); }
/* puntenraster dat rond de muis oplicht, loopt door over de kaarten heen */
.pluspunten li::before { inset: 0; z-index: -1; background: radial-gradient(circle, rgba(0,168,112,.6) 1.1px, transparent 1.7px) 0 0 / .875rem .875rem;
  -webkit-mask: radial-gradient(10.625rem circle at var(--mx, 50%) var(--my, 50%), #000, transparent 72%); mask: radial-gradient(10.625rem circle at var(--mx, 50%) var(--my, 50%), #000, transparent 72%); }
.pluspunten.spot li:hover { translate: 0 -.1875rem; border-color: var(--lijn-sterk); box-shadow: 0 1px 2px rgba(31,42,54,.05), 0 1.125rem 2.5rem -1.125rem rgba(31,42,54,.28), 0 0 0 .25rem rgba(0,214,143,.08); }
.pluspunten li::after { inset: -1px; border-radius: inherit; padding: 1px; background: radial-gradient(15rem circle at var(--mx, 50%) var(--my, 50%), rgba(0,214,143,.75), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.pluspunten.spot:hover li::before, .pluspunten.spot:hover li::after { opacity: 1; }
.pluspunten .ic { width: 1.375rem; height: 1.375rem; color: var(--inkt); }
.pluspunten h3 { margin: 0 0 .25rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; }
.pluspunten p { margin: 0; color: var(--gedempt); }

/* hardware */
.past { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.past__tekst p { margin: 0 0 .875rem; max-width: 34.18em; font-size: 1.0625rem; color: var(--gedempt); }
.past__tekst .past__nog { margin: .875rem 0 0; font-size: .9375rem; }
.past__nog a { font-weight: 600; color: var(--inkt); text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: .25rem; }
.past__beeld { margin: 0; justify-self: center; width: min(100%, 18.75rem); }
.past__beeld img { padding: .5rem; border-radius: 1.375rem; background: var(--inkt); box-shadow: var(--schaduw); }

/* prijs */
.prijs { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.regels { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.125rem; }
.regels li { display: flex; gap: .875rem; align-items: flex-start; }
.regels .ic { margin-top: .1875rem; color: var(--inkt); }
.founding { position: relative; padding: 2rem; border-radius: var(--rand); background: var(--vlak); box-shadow: inset 0 0 0 1px var(--lijn); overflow: hidden; }
.founding::before { content: ""; position: absolute; inset: 0 0 auto 0; height: .25rem; background: var(--mint); }
.founding h3 { margin: 0 0 .625rem; font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.15; font-weight: 600; letter-spacing: -.03em; }
.founding p:not(.label) { margin: 0 0 1.375rem; color: var(--gedempt); }
/* zekerheden vlak boven de knop */
.founding__zeker { list-style: none; margin: 0 0 1.625rem; padding: 0; display: grid; gap: .625rem; }
.founding__zeker li { display: flex; align-items: center; gap: .625rem; font-size: .9375rem; font-weight: 500; color: var(--inkt); }
.founding__zeker .ic { width: 1.125rem; height: 1.125rem; color: var(--inkt); }

/* vragen: kaarten met nummer, filter per onderwerp (A30, naar Dribbble "Tourism FAQ UI" met een technisch randje) */
.vragen { display: grid; gap: 0; }
.vragen__filter, .vragen__lijst { width: 100%; max-width: 55rem; margin-inline: auto; }
.vragen__filter { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.75rem; }
.vragen__filter[hidden] { display: none; }
.vragen__knop { display: inline-flex; align-items: center; gap: .5625rem; min-height: 2.75rem; padding: 0 1rem; border: 0; border-radius: 0; background: var(--vlak-2); font-family: inherit; font-size: .9062rem; font-weight: 500; color: var(--gedempt); cursor: var(--hand); transition: background var(--snel), color var(--snel), box-shadow var(--snel); }
.vragen__knop span { font: 500 .7188rem var(--mono); color: var(--zacht); }
.vragen__knop:hover { color: var(--inkt); background: #E1E6EC; }
.vragen__knop[aria-pressed="true"] { background: var(--mint); color: var(--inkt); }
.vragen__knop[aria-pressed="true"] span { color: var(--inkt); }
.vragen__knop:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }
.vragen__lijst { margin-top: 2rem; counter-reset: vraag; }
.vragen__groep { margin: 1.75rem 0 .625rem; font: 500 .75rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gedempt); }
.vragen__groep:first-child { margin-top: 0; }
.vragen__groep::before { content: ""; display: inline-block; width: .875rem; height: 2px; margin: 0 .625rem .1875rem 0; border-radius: 2px; background: var(--mint); vertical-align: middle; }
.vragen__lijst.met-filter .vragen__groep { display: none; }
.vragen__lijst.met-filter.is-alles .vragen__groep { display: block; }
.vragen__lijst [data-uit] { display: none; }
.vragen details { --hoek: rgba(31,42,54,.28); position: relative; margin-bottom: .75rem; border-radius: 0; background: var(--vlak-2); counter-increment: vraag; transition: background var(--snel), box-shadow var(--snel); }
.vragen details:hover { background: #E3E8EE; }
.vragen details[open] { background: var(--wit); box-shadow: 0 0 0 1px var(--lijn), var(--schaduw); }
/* mint streep links en hoekmarkeringen zoals op een bouwtekening, alleen op de open kaart */
.vragen details::before { content: ""; position: absolute; left: 0; top: 1.5rem; bottom: 1.5rem; width: .1875rem; border-radius: 0 .1875rem .1875rem 0; background: var(--mint); transform: scaleY(0); transition: transform var(--normaal) var(--curve); }
.vragen details[open]::before { transform: scaleY(1); }
.vragen details::after { content: ""; position: absolute; inset: .4375rem; pointer-events: none; opacity: 0; transition: opacity var(--normaal) var(--curve);
  background:
    linear-gradient(var(--hoek), var(--hoek)) left top / .625rem 1px, linear-gradient(var(--hoek), var(--hoek)) left top / 1px .625rem,
    linear-gradient(var(--hoek), var(--hoek)) right top / .625rem 1px, linear-gradient(var(--hoek), var(--hoek)) right top / 1px .625rem,
    linear-gradient(var(--hoek), var(--hoek)) left bottom / .625rem 1px, linear-gradient(var(--hoek), var(--hoek)) left bottom / 1px .625rem,
    linear-gradient(var(--hoek), var(--hoek)) right bottom / .625rem 1px, linear-gradient(var(--hoek), var(--hoek)) right bottom / 1px .625rem;
  background-repeat: no-repeat; }
.vragen details[open]::after { opacity: 1; }
.vragen summary { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 2.25rem; align-items: center; gap: 1rem; padding: 1.375rem 1.5rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; cursor: var(--hand); list-style: none; border-radius: .75rem; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::before { content: counter(vraag, decimal-leading-zero); font: 500 1.625rem/1 var(--mono); letter-spacing: -.04em; color: rgba(31,42,54,.22); transition: color var(--snel); }
.vragen details[open] summary::before { color: var(--mint); }
.vragen summary:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }
.vragen__ic { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0; background: rgba(255,255,255,.75); color: var(--inkt); transition: background var(--snel); }
.vragen__ic .ic { width: 1.125rem; height: 1.125rem; transition: transform var(--normaal) var(--curve); }
.vragen details[open] .vragen__ic { background: rgba(0,214,143,.14); }
.vragen details[open] .vragen__ic .ic { transform: rotate(45deg); }
.vragen details p { margin: -.375rem 0 0; padding: 0 4.75rem 1.5rem 6rem; color: var(--gedempt); }
@media (prefers-reduced-motion: no-preference) {
  .vragen__lijst.is-gefilterd details { animation: vraag-in .3s var(--curve) both; }
  @supports selector(::details-content) {
    .vragen details { interpolate-size: allow-keywords; }
    .vragen details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--normaal) var(--curve), content-visibility var(--normaal) allow-discrete; }
    .vragen details[open]::details-content { block-size: auto; }
  }
}
@keyframes vraag-in { from { opacity: 0; transform: translateY(.375rem); } }

/* contact: persoonskaart links, aanvraag in drie stappen rechts */
.contact__binnen { display: grid; grid-template-columns: minmax(0, 18.75rem) minmax(0, 1fr); gap: 2.5rem 3rem; align-items: stretch; }
.contact__kop { grid-column: 1 / -1; }
.contact__kop .inleiding { margin-bottom: 0; }

/* /contact/: kaart en aanvraag op een tekenblad, met inktlijnen in plaats van schaduw */
.blad .contact__kop p:not(.pad) { margin: 0; max-width: 34em; font-size: 1.0625rem; color: var(--gedempt); }
.blad .contact__kop .blad__kop { margin-bottom: 1rem; }
.blad .persoon, .blad .aanvraag { border: 1px solid var(--inkt); border-radius: 0; box-shadow: none; }
.persoon { display: flex; flex-direction: column; background: var(--wit); border-radius: var(--rand); box-shadow: var(--schaduw); overflow: hidden; }
.persoon__foto { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--vlak-2); }
.persoon__tekst { flex: 1; display: flex; flex-direction: column; padding: .25rem 1.375rem 1.25rem; }
.persoon__tekst > p { margin: 0 0 1.125rem; color: var(--gedempt); font-size: .9688rem; }
.persoon .persoon__naam { display: grid; gap: 2px; margin-bottom: .625rem; color: var(--inkt); }
.persoon__naam strong { font-size: 1.1875rem; }
.persoon__naam span { font-family: var(--mono); font-size: .7812rem; color: var(--zacht); }
.kanalen { list-style: none; margin: 0; padding: .875rem 0 0; border-top: 1px solid var(--lijn); display: grid; gap: .25rem; margin-top: auto; }
.kanalen a { display: grid; grid-template-columns: 2.5rem 1fr 1.125rem; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .375rem .625rem .375rem .375rem; margin: 0 -.375rem; border-radius: 0; color: var(--inkt); text-decoration: none; transition: background var(--snel); }
.kanalen a:hover { background: var(--vlak); }
.kanalen__ic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0; background: none; color: var(--inkt); }
.kanalen b { display: block; font-size: .9375rem; }
.kanalen__waarde { display: block; font-family: var(--mono); font-size: .7812rem; color: var(--gedempt); overflow-wrap: anywhere; }
.kanalen__pijl { width: 1.125rem; height: 1.125rem; color: var(--zacht); transition: transform var(--snel), color var(--snel); }
.kanalen a:hover .kanalen__pijl { transform: translateX(.1875rem); color: var(--inkt); }

.aanvraag { scroll-margin-top: calc(var(--nav) + 3.5rem); position: relative; background: var(--wit); border-radius: var(--rand); box-shadow: var(--schaduw); padding: 1.75rem; display: flex; flex-direction: column; }
/* actieve stap vult de kaart, knoppen onderaan: beide kaarten even hoog */
.met-stappen .aanvraag__stap.is-actief { flex: 1; display: flex; flex-direction: column; }
.aanvraag__klaar:not([hidden]) { margin: auto 0; }
.aanvraag__balk { list-style: none; margin: 0 0 1.75rem; padding: 0; display: none; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .5rem; }
.met-stappen .aanvraag__balk { display: grid; }
.is-verstuurd .aanvraag__balk { display: none; }
.met-stappen.is-verstuurd .aanvraag__stap { display: none; } /* wint van de flex van de actieve stap */
.aanvraag__balk li { padding-bottom: .625rem; border-bottom: .1875rem solid var(--vlak-2); font-size: .8438rem; font-weight: 500; color: var(--zacht); transition: border-color var(--normaal), color var(--normaal); }
.aanvraag__balk span { display: block; font-family: var(--mono); font-size: .75rem; margin-bottom: 2px; }
.aanvraag__balk .is-actief, .aanvraag__balk .is-klaar { color: var(--inkt); border-color: var(--mint); }
.aanvraag__stap { border: 0; margin: 0; padding: 0; min-width: 0; }
.aanvraag__stap + .aanvraag__stap { margin-top: 2.25rem; }
.met-stappen .aanvraag__stap + .aanvraag__stap { margin-top: 0; }
.met-stappen .aanvraag__stap:not(.is-actief) { display: none; }
.aanvraag legend { padding: 0; margin-bottom: 1.125rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; }
.aanvraag__hint { margin: -.625rem 0 1rem; font-size: .9062rem; color: var(--gedempt); }
.keuzes { display: grid; grid-template-columns: 1fr; gap: .625rem; }
.keuzes--drie { grid-template-columns: repeat(3, 1fr); }
.keuzes--twee { grid-template-columns: repeat(2, 1fr); } /* vier keuzes in twee rijen, zodat het blad niet hoger wordt dan nodig */
/* in de stap-kaart vullen de keuzes de vrije hoogte, zodat er geen lege vlakte onder staat */
.met-stappen .aanvraag__stap.is-actief .keuzes { flex: 1; grid-auto-rows: minmax(min-content, 1fr); }
.keuzes--drie .keuze { align-content: center; justify-items: center; text-align: center; }
.met-stappen .keuzes--drie .keuze__ic { width: 4rem; height: 4rem; border-radius: 0; }
.met-stappen .keuzes--drie .keuze__ic .ic { width: 1.75rem; height: 1.75rem; }
.met-stappen .keuzes--drie .keuze__tekst b { font-size: 1.1875rem; }
.keuze { position: relative; display: grid; grid-template-columns: 3rem 1fr; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: 0; background: var(--wit); box-shadow: inset 0 0 0 1px var(--lijn-sterk); cursor: var(--hand); transition: box-shadow var(--snel), background var(--snel); }
.keuze:hover { background: var(--vlak); }
.keuze input:is([type="radio"], [type="checkbox"]) { position: absolute; opacity: 0; width: 1px; height: 1px; } /* sterker dan .veld input, anders steekt het rondje rechts buiten de pagina (demo, 390) */
.keuze__ic { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 0; background: none; color: var(--gedempt); transition: color var(--snel); }
.keuze__ic .ic { width: 1.375rem; height: 1.375rem; }
.keuze__tekst b { display: block; font-size: 1.0625rem; line-height: 1.3; }
.keuze__tekst small { display: block; margin-top: .1875rem; font-size: .9062rem; color: var(--gedempt); line-height: 1.4; }
.keuze--rij { grid-template-columns: 1fr; justify-items: start; gap: .75rem; }
.keuze:has(input:checked) { background: var(--mint-zacht); box-shadow: inset 0 0 0 2px var(--mint-diep); }
.keuze:has(input:checked) .keuze__ic { color: var(--inkt); }
.keuze:has(input:focus-visible) { outline: 2px solid var(--inkt); outline-offset: 2px; }
.aanvraag__melding, .veld__fout { margin: .75rem 0 0; font-size: .875rem; font-weight: 500; color: #B42318; }
.aanvraag__acties { display: flex; justify-content: flex-end; gap: .75rem; margin-top: auto; padding-top: 1.75rem; }
.aanvraag__acties [data-terug] { margin-right: auto; }
.aanvraag__acties [data-volgende], .aanvraag__acties [data-terug] { display: none; }
.met-stappen .aanvraag__acties [data-volgende], .met-stappen .aanvraag__acties [data-terug] { display: inline-flex; }
.aanvraag__acties .ic { width: 1.125rem; height: 1.125rem; }

.velden { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.veld--breed { grid-column: 1 / -1; }
.veld label { display: block; margin-bottom: .375rem; font-size: .9062rem; font-weight: 600; }
.veld label span { font-weight: 400; color: var(--zacht); }
.veld__hint { margin: -2px 0 .5rem; font-size: .875rem; color: var(--gedempt); }
.veld textarea { display: block; width: 100%; min-height: 6.5rem; padding: .75rem .875rem; border: 0; border-radius: 0; background: var(--wit); box-shadow: inset 0 0 0 1px var(--lijn-sterk); font: inherit; font-size: 1rem; line-height: 1.5; color: var(--inkt); resize: vertical; transition: box-shadow var(--snel); }
.veld textarea::placeholder { color: var(--zacht); }
.veld textarea:hover { box-shadow: inset 0 0 0 1px rgba(31,42,54,.34); }
.veld textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--mint-diep), 0 0 0 .25rem var(--mint-zacht); }
.veld input { width: 100%; height: 3.125rem; padding: 0 .875rem; border: 0; border-radius: 0; background: var(--wit); box-shadow: inset 0 0 0 1px var(--lijn-sterk); font: inherit; font-size: 1rem; color: var(--inkt); transition: box-shadow var(--snel); }
.veld input:hover { box-shadow: inset 0 0 0 1px rgba(31,42,54,.34); }
.veld input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--mint-diep), 0 0 0 .25rem var(--mint-zacht); }
.veld input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #B42318; }
.veld__fout { margin-top: .375rem; }
.aanvraag__pot { position: absolute; left: -624.9375rem; width: 1px; height: 1px; overflow: hidden; }
.aanvraag__privacy { margin: 1.125rem 0 0; font-size: .8438rem; color: var(--gedempt); }
.aanvraag__privacy a, .aanvraag__fout a { color: inherit; }
.aanvraag__fout { margin: .875rem 0 0; padding: .75rem .875rem; border-radius: 0; background: #FEF3F2; color: #B42318; font-size: .875rem; }
.aanvraag [type="submit"][disabled] { opacity: .6; cursor: progress; }
.aanvraag__klaar { padding: 1.5rem 0 .5rem; text-align: center; outline: none; }
.aanvraag__vink { display: inline-grid; place-items: center; width: 4rem; height: 4rem; border-radius: 0; background: none; color: var(--inkt); margin-bottom: 1rem; }
.aanvraag__vink .ic { width: 1.875rem; height: 1.875rem; }
.aanvraag__klaar h2 { margin: 0 0 .5rem; font-size: 1.375rem; }
.aanvraag__klaar p { margin: 0 auto; max-width: 29.72em; color: var(--gedempt); }
.aanvraag__klaar p + p { margin-top: .875rem; }
/* Vaste hoogte (SITE, 2026-11-10): alle stappen liggen op dezelfde plek en de hoogste bepaalt het blad, zodat het niet per stap verspringt.
   Niet op de telefoon: daar is de gegevensstap veel hoger dan de keuzes en zou er een lege vlakte ontstaan. */
@media (min-width: 761px) {
  .met-stappen.aanvraag { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .met-stappen .aanvraag__balk { grid-area: 1 / 1; }
  .met-stappen .aanvraag__stap { grid-area: 2 / 1; }
  .met-stappen .aanvraag__stap:not(.is-actief), .met-stappen.is-verstuurd .aanvraag__stap { display: flex; flex-direction: column; visibility: hidden; }
  .met-stappen.is-verstuurd .aanvraag__balk { display: grid; visibility: hidden; }
  .met-stappen .aanvraag__klaar { grid-area: 1 / 1 / 3 / 2; align-self: center; margin: 0; }
}
.aanvraag__klaar p a:not(.pijl) { color: inherit; text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: .1875rem; }
@media (prefers-reduced-motion: no-preference) {
  .met-stappen .aanvraag__stap.is-actief, .aanvraag__klaar:not([hidden]) { animation: vraag-in .3s var(--curve) both; }
}

.voet { padding: 4rem 0 1.75rem; border-top: 1px solid var(--lijn); font-size: .875rem; color: var(--gedempt); }
.voet p { margin: 0; line-height: 1.6; }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet__binnen { display: grid; grid-template-columns: minmax(13.75rem, 1fr) minmax(0, 1.6fr); gap: 3rem; align-items: start; }
.voet__merk { display: flex; flex-direction: column; align-items: flex-start; gap: .625rem; }
.voet__merk a { display: inline-flex; }
.voet__merk span { font: 400 .75rem/1.4 var(--mono); color: var(--zacht); }
.voet__kolommen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.voet__kop { margin-bottom: .375rem !important; font: 400 .7188rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); }
.voet__kolommen a { display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--inkt); text-decoration: none; overflow-wrap: anywhere; }
.voet__kolommen a:hover { text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: .3125rem; }
.voet__onder { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--lijn); font-size: .7812rem; color: var(--zacht); }
.voet__sociaal { display: flex; gap: .5rem; }
.voet__sociaal a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--lijn-sterk); border-radius: 0; background: var(--wit); color: var(--inkt); transition: border-color var(--snel), box-shadow var(--snel); }
.voet__sociaal a:hover { border-color: var(--mint); box-shadow: 2px 2px 0 var(--mint); }
.voet__sociaal svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: butt; stroke-linejoin: miter; }

/* ---------- Onder de motorkap: lijntekening, signaallijnen en logpaneel ---------- */
/* Zonder JavaScript staat alles getekend; met .is-live tekent het pas als het in beeld komt (.getekend) */
.motorkap { position: relative; border-top: 1px solid var(--lijn); overflow: hidden; }
.motorkap::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(31,42,54,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(31,42,54,.06) 1px, transparent 1px);
  background-size: 2rem 2rem;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 40% 60%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse 75% 65% at 40% 60%, #000 25%, transparent 80%); }
.motorkap .binnen { position: relative; }
.motorkap__vlak { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.motorkap__schema { margin: 0; }
.mk { display: block; width: 100%; height: auto; overflow: visible; }
.mk__automaat *, .mk__lijn { fill: none; stroke: var(--inkt); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.mk__automaat .dun { stroke: var(--zacht); stroke-width: .8; }
.mk__automaat .mk__scherm { stroke: var(--mint-diep); stroke-width: 1.6; fill: rgba(0,214,143,.07); }
.mk__automaat .mk__luik, .mk__automaat .mk__deel, .mk__automaat .mk__deel * { transition: stroke var(--normaal), fill var(--normaal); }
.mk__automaat .is-aan, .mk__automaat .is-aan * { stroke: var(--mint-diep); fill: var(--mint-zacht); }
.mk__as { transform-box: fill-box; transform-origin: center; }
.mk__motor.is-aan .mk__as { animation: draai-as .9s linear; }
@keyframes draai-as { to { rotate: 360deg; } }
.mk__lijn { stroke: var(--lijn-sterk); stroke-width: 1.5; }
.mk__stroom { fill: none; stroke: var(--mint); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: .16 2; stroke-dashoffset: .16; opacity: 0; filter: drop-shadow(0 0 .25rem rgba(0,214,143,.85)); }
.mk__stroom.heen { animation: stroom-heen .75s var(--curve) forwards; }
.mk__stroom.terug { animation: stroom-terug .75s var(--curve) forwards; }
@keyframes stroom-heen { from { stroke-dashoffset: .16; opacity: 1; } to { stroke-dashoffset: -1; opacity: 1; } }
@keyframes stroom-terug { from { stroke-dashoffset: -1; opacity: 1; } to { stroke-dashoffset: .16; opacity: 1; } }
.mk__tegel { fill: #E6EDF3; stroke: var(--inkt); stroke-width: 1.1; transition: filter var(--normaal); }
.mk__letters { fill: none; stroke: var(--inkt); stroke-width: 6.5; }
.mk__streep { fill: var(--mint); }
.mk__kern.is-aan .mk__tegel { filter: drop-shadow(0 0 .625rem rgba(0,214,143,.55)); }
.mk__knoop rect { fill: var(--wit); stroke: var(--lijn-sterk); stroke-width: 1.2; transition: stroke var(--normaal), fill var(--normaal); }
.mk__knoop use { color: var(--gedempt); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: butt; stroke-linejoin: miter; transition: color var(--normaal); }
.mk__knoop.is-aan rect { stroke: var(--mint-diep); fill: #F2FCF8; }
.mk__knoop.is-aan use { color: var(--inkt); }
.mk__namen text { font: 500 .5938rem var(--mono); letter-spacing: .08em; fill: var(--zacht); }
.mk__namen .mk__fig { fill: var(--gedempt); }
.motorkap.is-live .mk__automaat :is(polygon, line, path), .motorkap.is-live .mk__lijn { stroke-dasharray: 1 2; stroke-dashoffset: 1.01; }
.motorkap.is-live .mk__kern, .motorkap.is-live .mk__knoop, .motorkap.is-live .mk__namen { opacity: 0; }
.motorkap.is-live .mk__automaat .mk__scherm { fill: transparent; }
.motorkap.getekend .mk__automaat :is(polygon, line, path) { animation: teken 1.4s var(--curve) forwards; animation-delay: calc(var(--i, 0) * 110ms); }
.motorkap.getekend .mk__automaat .mk__scherm { animation: teken 1.4s var(--curve) forwards, scherm-aan .6s var(--curve) 1.5s forwards; animation-delay: calc(var(--i) * 110ms), 1.5s; }
.motorkap.getekend .mk__lijn { animation: teken 1s var(--curve) 1.2s forwards; }
.motorkap.getekend .mk__kern, .motorkap.getekend .mk__knoop, .motorkap.getekend .mk__namen { animation: mk-op .6s var(--curve) forwards; animation-delay: 1.7s; }
.motorkap.getekend .mk__kern { animation-delay: 1.4s; }
@keyframes scherm-aan { to { fill: rgba(0,214,143,.07); } }
@keyframes mk-op { to { opacity: 1; } }

.log { position: relative; padding: 1rem; border-radius: var(--rand); background: var(--wit); box-shadow: 0 0 0 1px var(--lijn), var(--schaduw); font: 400 .7812rem/1.4 var(--mono); }
/* Rondgang: een groot vierkant met een conic-gradient draait achter een masker dat alleen de rand doorlaat.
   Draaien via transform loopt op de compositor; zonder JavaScript of bij minder beweging is er geen rand. */
.log__rand { position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; pointer-events: none; overflow: hidden; opacity: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.log__rand::before { content: ""; position: absolute; left: 50%; top: 50%; width: 200%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(transparent 0 70%, rgba(0,214,143,.15) 80%, var(--mint) 92%, transparent 100%); }
.motorkap.is-live .log__rand { opacity: 1; }
.motorkap.is-live .log__rand::before { animation: rondgang 4.5s linear; } /* rust S3: één rondje */
@keyframes rondgang { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.log__kop { display: flex; justify-content: space-between; margin-bottom: .625rem; padding: 0 .5625rem; color: var(--zacht); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; }
.log ol { margin: 0; padding: 0; list-style: none; }
.log li { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .5rem .5625rem; border-radius: 0; color: var(--gedempt); transition: background var(--normaal), color var(--normaal); }
.log__st { flex: none; display: inline-flex; align-items: center; gap: .375rem; font-size: .625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gedempt); }
.log__st::after { content: attr(data-st); }
.log li.wacht { color: var(--zacht); }
.log li.wacht .log__st { color: var(--zacht); }
.log li.bezig .log__st { color: var(--inkt); }
.log li.bezig { background: var(--mint-zacht); color: var(--inkt); }

.motorkap__punten { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2.5rem; }
.motorkap__punten li { padding-top: 1.25rem; border-top: 1px solid var(--lijn-sterk); }
.motorkap__punten h3 { display: flex; align-items: center; gap: .625rem; margin: 0 0 .375rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; }
.motorkap__punten .ic { color: var(--inkt); }
.motorkap__punten p { margin: 0; color: var(--gedempt); }

/* Tekst per woord: alleen als JavaScript de kop heeft opgeknipt (.woorden) */
.woorden .woord { display: inline-block; opacity: 0; filter: blur(.625rem); translate: 0 .25em; }
.woorden.zie .woord { animation: woord-in .8s var(--curve) forwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes woord-in { to { opacity: 1; filter: blur(0); translate: 0 0; } }

/* ---------- Tablet en telefoon ---------- */
@media (max-width: 960px) {
  .contact__binnen { grid-template-columns: 1fr; }
  /* één kolom: eerst het formulier, Finn eronder */
  .aanvraag { order: 1; }
  .persoon { order: 2; }
  .persoon { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .persoon { align-items: center; }
  .persoon__tekst { padding: 1.5rem; }
  .pluspunten { grid-template-columns: repeat(2, 1fr); }
  .past, .prijs { grid-template-columns: 1fr; }
  .demo { grid-template-columns: 1fr; gap: 1.5rem; }
  .motorkap__vlak { grid-template-columns: 1fr; }
  .log { width: 100%; max-width: 30rem; justify-self: center; }
}
@media (max-width: 760px) {
  .contact__binnen { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .aanvraag__acties { gap: .5rem; }
  .aanvraag__acties [data-volgende], .aanvraag__acties [type="submit"] { flex: 1; justify-content: center; padding-inline: 1rem; }
  .aanvraag__acties [data-terug] { margin-right: 0; padding-inline: 1rem; }
  /* Finn als compacte strook onder het formulier: kleine ronde foto, naam, dan de kanalen */
  .persoon { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0 .875rem; padding: 1.125rem 1.25rem .75rem; }
  .persoon__foto { width: 3.5rem; height: 3.5rem; border-radius: 50%; }
  .persoon__tekst { display: contents; }
  .persoon .persoon__naam { margin: 0; }
  .persoon__tekst > p:not(.persoon__naam), .kanalen { grid-column: 1 / -1; }
  .persoon__tekst > p:not(.persoon__naam) { margin: .875rem 0 .75rem; font-size: .9375rem; }
  .founding { padding: 1.75rem 1.25rem 1.5rem; }
  .founding .knop { width: 100%; padding-block: .8125rem; white-space: normal; text-align: center; line-height: 1.25; }
  .aanvraag { padding: 1.375rem 1rem; }
  .keuzes, .velden { grid-template-columns: 1fr; }
  .keuzes--drie { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .keuzes--drie .keuze { padding: .75rem; }
  .met-stappen .aanvraag__stap.is-actief .keuzes--drie { grid-auto-rows: auto; }
  .met-stappen .keuzes--drie .keuze__ic { width: 3rem; height: 3rem; border-radius: 0; }
  .met-stappen .keuzes--drie .keuze__ic .ic { width: 1.375rem; height: 1.375rem; }
  .met-stappen .keuzes--drie .keuze__tekst b { font-size: 1rem; }
  .aanvraag legend { font-size: 1.25rem; }
  .vragen__filter { flex-wrap: nowrap; justify-content: flex-start; width: auto; margin: 1.25rem -1rem 0; padding: 2px 1rem .25rem; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.75rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.75rem), transparent); }
  .vragen__filter::-webkit-scrollbar { display: none; }
  .vragen__knop { flex: none; }
  .vragen__lijst { margin-top: 1.5rem; }
  .vragen summary { grid-template-columns: 2.125rem minmax(0, 1fr) 2rem; gap: .75rem; padding: 1.125rem 1rem; font-size: 1rem; }
  .vragen summary::before { font-size: 1.1875rem; }
  .vragen__ic { width: 2rem; height: 2rem; }
  .vragen details p { padding: 0 1rem 1.25rem 3.875rem; }
  /* menu als smalle tweede regel onder de kopbalk */
  :root { --nav: 6.5rem; }
  .nav__binnen { flex-wrap: wrap; align-content: flex-start; gap: 0 1rem; }
  .nav__merk { height: 3.6875rem; align-items: center; }
  .nav__links { order: 3; width: calc(100% + 1rem); height: 2.8125rem; margin-inline: -.5rem; align-items: stretch; justify-content: space-between; gap: 0; border-top: 1px solid var(--lijn); }
  .nav__links a { min-height: 0; padding: 0 .5rem; font-size: .8438rem; }
  .nav__links .nav__mobiel { display: inline-flex; }
  .nav__links .nav__breed { display: none; }
  .definitie { font-size: 1.0625rem; padding-left: .875rem; }
  .pluspunten { grid-template-columns: 1fr; }
  .pluspunten li { flex-direction: row; gap: 1.125rem; padding: 1.375rem 1.25rem; }
  .pluspunten .ic { margin-top: .1875rem; flex: none; }
  .voet { padding-top: 3rem; }
  .voet__binnen { grid-template-columns: 1fr; gap: 2rem; }
  .voet__kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .voet__kolommen a { min-height: 2.75rem; }
  .voet__onder { flex-direction: column; align-items: flex-start; margin-top: 2rem; }
  .subnav { position: static; }
  html:has(.subnav) { scroll-padding-top: calc(var(--nav) + 1rem); }
  .subnav__binnen { overflow-x: auto; scrollbar-width: none; }
  .demo__podium { grid-template-columns: 1fr; padding: 1rem .875rem 2.5rem; }
  .pv__lijf { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .pv__menu b { display: none; }
  .pv__menu span { justify-content: center; padding: .5rem 0; }
  .pv__venster { height: 13.875rem; }
  .sc { padding: .875rem; }
  .draad { width: 2px; height: 1.875rem; margin: 0 auto; }
  .draad i { top: 0; left: -.1875rem; }
  .draad i.reis { animation-name: reis-v; }
  .toestel { height: 15.75rem; }
  .km { width: 8.5rem; }
  .km__scherm { min-height: 12.25rem; }
  .tel { width: 7.375rem; }
  .melding { top: 3.875rem; }
  .motorkap__punten { grid-template-columns: 1fr; gap: 1.5rem; }
  .mk__namen text { font-size: .875rem; }
}
@media (max-width: 420px) {
  /* A16: Prijs en Vragen in beeld op een telefoon; Contact schuift. */
  .subnav a { padding: 0 .4375rem; }
  .subnav a:first-child { margin-left: -.4375rem; }
  .nav__merk img { height: 1.875rem; }
  .knop--klein { padding: 0 .875rem; font-size: .8438rem; }
}

/* Buiten beeld (A9): site.js zet .rust op de hero en de motorkap, dan staan hun oneindige animaties stil */
.rust, .rust *, .rust *::before, .rust *::after { animation-play-state: paused !important; }

/* Minder beweging: de demo speelt niet vanzelf, tabs wisselen direct naar de eindstand */
@media (prefers-reduced-motion: reduce) {
  .demo__tab, .pv__spoor, .sc, .km, .km__wacht, .tel, .melding, .vak i::before, .km__koppel, .markeer { transition: none !important; }
  .demo__voortgang { display: none; }
}

/* Bouwlijnen (A29): de hulplijnen uit de intro blijven daarna licht staan en glijden trager mee met scrollen.
   site.js tekent ze op de plek van de intro en zet --reis. Ze liggen achter alles en zijn alleen te zien op de grijze vlakken.
   Zonder scroll-gedreven animatie of bij minder beweging staan ze stil; zonder JavaScript zijn ze er niet. */
.bouwlijnen { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
html.met-intro .bouwlijnen { opacity: 0; animation: verschijn-laag .6s var(--curve) 1.45s forwards; }
@keyframes verschijn-laag { to { opacity: 1; } }
.bouwlijnen svg { position: absolute; left: 0; top: 0; display: block; overflow: visible; }
.bouwlijnen__lijn { fill: none; stroke: rgba(31,42,54,.04); stroke-width: 1; }
.bouwlijnen__rail { stroke: rgba(31,42,54,.035); }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .bouwlijnen svg { animation: glij linear both; animation-timeline: scroll(root); }
  }
}
@keyframes glij { to { transform: translateY(calc(var(--reis, 0px) * -1)); } }

/* ---------- Thema van de browser zelf: selectie en schuifbalk in de huiskleuren ---------- */
::selection { background: rgba(0, 214, 143, .28); color: var(--inkt); }
html { scrollbar-color: rgba(31, 42, 54, .35) var(--vlak); }

/* ---------- Startpagina (2026-10-27) ----------
   Bovenkant open, met het raster, muishokje, gloed en de intro van /kioskos/ (.held). Tekst links, plattegrond rechts.
   Daaronder vijf witte tekenbladen met dubbele kaderlijn en een bladcode rechtsonder. Mint alleen voor signaal, nummers en knoppen.
   Opbouw van de plattegrond (CSS): hulplijnen, kaders 01 tot 06, lijnen vanuit de kern. Daarna loopt een verkoop rond (SMIL in de SVG). */
/* Bovenkant: past op het eerste scherm, ook op een laptop van 780 px hoog */
.held--start { display: grid; align-items: center; min-height: min(calc(100svh - var(--nav) - var(--subnav, 0px)), 51.25rem); padding: clamp(1.25rem, 3vw, 2.5rem) 0; }
.start { --kader: clamp(.625rem, 1.6vw, 1.5rem); position: relative; display: grid; grid-template-columns: minmax(21.25rem, 38fr) 62fr; gap: clamp(1.5rem, 3.4vw, 3.5rem); align-items: center; width: min(100% - 1.5rem, 87rem); margin: 0 auto; padding-inline: calc(var(--kader) + clamp(.5rem, 3vw, 3rem)); }
.start__tekst h1 { margin: 0 0 1.125rem; max-width: 10em; font-size: clamp(2.25rem, 3.5vw, 3.25rem); line-height: 1.06; font-weight: 600; letter-spacing: -.04em; }
/* Lange kop op /kioskos/: kleiner, zodat "Je verkoopautomaat," op één regel past (twee regels, zoals op de telefoon). */
.start--kiosk .start__tekst h1 { font-size: clamp(2.25rem, 2.9vw, 2.5625rem); }
.start__tekst > p { margin: 0 0 1.75rem; max-width: 30em; font-size: 1.0625rem; line-height: 1.6; color: var(--gedempt); }
.start__tekst .start__feit { display: flex; align-items: center; gap: .625rem; margin: 1.5rem 0 0; max-width: none; font: 400 .7812rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--zacht); }
.start__feit a { color: inherit; text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: .25rem; }

/* de plattegrond ligt open op het raster; de intro bouwt zich op in dit vlak, dus de tekst staat er meteen */
.plattegrond { position: relative; z-index: 3; display: grid; justify-items: center; gap: .375rem; margin: 0; }
.plattegrond figcaption { justify-self: end; font: 400 .75rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--zacht); }
html.met-intro .held--start .intro { background: none; overflow: visible; }
.plat { display: block; width: 100%; height: auto; overflow: visible; }
.plat--breed { max-width: 51.25rem; max-height: max(26.25rem, calc(100svh - var(--nav) - 7.5rem)); }
.plat--smal { display: none; max-width: 26.25rem; }
.plat__hulp { fill: none; stroke: rgba(31,42,54,.1); stroke-width: 1px; opacity: .6; }
.plat__lijn { fill: none; stroke: var(--aan-lijn, var(--inkt)); stroke-width: var(--aan-dik, 1.5px); transition: stroke var(--snel), stroke-width var(--snel); }
.plat__lijn--sig { stroke: var(--mint); stroke-width: .1875rem; }
.start:has([data-s]:hover) .plat__lijn--sig, .plattegrond[data-aan] .plat__lijn--sig { stroke: var(--inkt); stroke-width: 1.5px; }
.plat__punt { fill: var(--wit); stroke: var(--inkt); stroke-width: 1.5px; }
.plat__systeem { cursor: var(--pijl); }
.plat__klik { transform-box: fill-box; transform-origin: center; }
.plat__vak { fill: var(--aan-vul, var(--wit)); stroke: var(--aan-rand, var(--inkt)); stroke-width: var(--aan-dik, 1.5px); transition: fill var(--snel), stroke var(--snel), stroke-width var(--snel); }
.plat__aan { fill: rgba(0, 214, 143, .1); stroke: var(--mint-diep); stroke-width: .1562rem; }
.plat__ic { fill: none; stroke: var(--inkt); stroke-width: 1.5px; stroke-linecap: butt; stroke-linejoin: miter; }
.plat__naam { font: 400 .8438rem var(--mono); letter-spacing: .06em; fill: var(--inkt); }
.plat__nr { transform-box: fill-box; transform-origin: center; }
.plat__nr circle { fill: var(--mint); }
.plat__nr text { font: 400 .75rem var(--mono); fill: var(--inkt); text-anchor: middle; dominant-baseline: central; }
.plat__ring { fill: var(--mint-zacht); }
.plat__flits { fill: none; stroke: var(--mint); stroke-width: 2px; }
.plat__tegel { fill: #E6EDF3; stroke: var(--inkt); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.plat__c { fill: none; stroke: var(--inkt); stroke-width: .4062rem; }
.plat__streep { fill: none; stroke: var(--mint); stroke-width: .4062rem; }
.plat__log { font: 400 .7812rem var(--mono); letter-spacing: .06em; text-anchor: middle; dominant-baseline: central; fill: var(--gedempt); }
.plat__log-sleutel { fill: var(--inkt); }
.plat__log-vlak { fill: var(--vlak); }
.plat__spoor { fill: none; stroke: var(--mint); stroke-width: .1875rem; stroke-linecap: round; }
.plat__puls circle { fill: var(--mint); }
.plat__puls .plat__halo { opacity: .25; }
.plat--smal .plat__naam { font-size: .8125rem; }
.plat__kernnaam { font-weight: 500; letter-spacing: .14em; }

/* wijs een kader aan (muis, of een tik via data-aan uit site.js): het kader en zijn lijn lichten op, de lens geeft de uitleg */
.start:has([data-s="1"]:hover) [data-s="1"], .start:has([data-s="2"]:hover) [data-s="2"], .start:has([data-s="3"]:hover) [data-s="3"],
.start:has([data-s="4"]:hover) [data-s="4"], .start:has([data-s="5"]:hover) [data-s="5"], .start:has([data-s="6"]:hover) [data-s="6"],
.plattegrond[data-aan="1"] [data-s="1"], .plattegrond[data-aan="2"] [data-s="2"], .plattegrond[data-aan="3"] [data-s="3"],
.plattegrond[data-aan="4"] [data-s="4"], .plattegrond[data-aan="5"] [data-s="5"], .plattegrond[data-aan="6"] [data-s="6"] {
  --aan-rand: var(--mint-diep); --aan-vul: #F2FDF8; --aan-lijn: var(--mint-diep); --aan-dik: .1562rem;
}

/* Blauwdruklens (site.js): een cirkel van tekenpapier die laat zien wat een systeem echt is; buiten een kader de coördinaten */
.plattegrond.met-lens .plat, .plattegrond.met-lens .plat * { cursor: none; }
.lens { --maat: 12.25rem; position: absolute; left: 0; top: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: .375rem;
  width: var(--maat); height: var(--maat); padding: 1.875rem; border-radius: 50%; text-align: center; pointer-events: none;
  background: linear-gradient(rgba(31,42,54,.07) 1px, transparent 1px) center / .5rem .5rem, linear-gradient(90deg, rgba(31,42,54,.07) 1px, transparent 1px) center / .5rem .5rem, rgba(255,255,255,.95);
  border: 1.5px solid var(--inkt); box-shadow: 0 0 0 .375rem var(--mint-zacht), 0 1.125rem 2.75rem rgba(31,42,54,.14);
  opacity: 0; scale: .7; transition: opacity var(--snel) var(--curve), scale var(--snel) var(--curve); }
.lens.is-open { opacity: 1; scale: 1; }
/* binnenring en dradenkruis, zoals in een zoeker */
.lens::before { content: ""; position: absolute; inset: .5625rem; border-radius: 50%; border: 1px dashed rgba(31,42,54,.28); }
.lens::after { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 1; transition: opacity var(--snel);
  background: linear-gradient(var(--mint-diep), var(--mint-diep)) center / 1.5px 1.375rem no-repeat, linear-gradient(var(--mint-diep), var(--mint-diep)) center / 1.375rem 1.5px no-repeat; }
.lens.is-info::after { opacity: 0; }
.lens__kop, .lens__tekst, .lens__xy { position: relative; display: none; }
.lens__kop { max-width: 9.375rem; text-wrap: balance; font: 400 .75rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--zacht); }
.lens__tekst { max-width: 8.5rem; text-wrap: balance; font-size: .9375rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--inkt); }
.lens__xy { margin-top: 4rem; font: 400 .75rem/1 var(--mono); letter-spacing: .06em; color: var(--zacht); white-space: pre; }
.lens.is-info .lens__kop, .lens.is-info .lens__tekst { display: block; }
.lens:not(.is-info) .lens__xy { display: block; }
@media (max-width: 760px) { .lens { --maat: 10.75rem; padding: 1.5rem; } .lens__tekst { font-size: .875rem; max-width: 7.375rem; } }
@media (prefers-reduced-motion: reduce) { .lens { transition: none; scale: 1; } }

/* Opbouw, na de intro (--start is 1,6 s met intro, anders 0): hulplijnen, kaders klikken één voor één op hun plek,
   lijnen tekenen zich vanuit de kern naar buiten, dan de punten en de logregel. De eerste puls volgt via de SMIL-klok. */
@media (prefers-reduced-motion: no-preference) {
  .plat__hulp > * { stroke-dasharray: 1; animation: lijn-in .7s var(--curve) calc(var(--start) + var(--n, 0) * .05s) backwards; }
  .plat__klik { animation: klik .42s var(--curve) calc(var(--start) + .35s + var(--i) * .08s) backwards; }
  .plat__nr { animation: klik .32s var(--curve) calc(var(--start) + .5s + var(--i) * .08s) backwards; }
  .plat__lijn { stroke-dasharray: 1; animation: lijn-uit .6s var(--curve) calc(var(--start) + .95s + var(--i) * .06s) backwards; }
  .plat__punt, .plat__log--rust { animation: blad-in .35s var(--curve) calc(var(--start) + 1.45s) backwards; }
  .plat__kern { animation: blad-in .5s var(--curve) .05s backwards; }
  .plat__c { stroke-dasharray: 1; animation: lijn-in 1s var(--curve) .2s backwards; }
  .plat__streep { stroke-dasharray: 1; animation: lijn-in .5s var(--curve) .9s backwards; }
  /* met intro: de kern verschijnt pas als het grote logo erin landt (2,1 s) */
  html.met-intro .plat__kern { animation: blad-in 0s linear 2.1s backwards; }
  html.met-intro .plat__c, html.met-intro .plat__streep { animation: none; }
}
@keyframes lijn-in { from { stroke-dashoffset: 1; } }
@keyframes lijn-uit { from { stroke-dashoffset: -1; } }
@keyframes klik { from { opacity: 0; scale: .86; } }
@keyframes blad-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .plat__leven { display: none; } }

/* De draad: site.js tekent één mintlijn vanuit de kern die bij het scrollen meegroeit, bij elk tekenblad aanhaakt op de hoek
   en bij Contact op de knop uitkomt. Ligt onder het schema (z 3), zodat de logregel hem afdekt, en boven de tekenbladen. */
.leidraad { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.leidraad__lijn { fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; }
.leidraad__haak path { fill: none; stroke: var(--mint); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--normaal) var(--curve); }
.leidraad__haak circle { fill: var(--wit); stroke: var(--inkt); stroke-width: 1.5; transition: fill var(--normaal) var(--curve), stroke var(--normaal) var(--curve); }
.leidraad__haak.is-aan path { stroke-dashoffset: 0; }
.leidraad__haak.is-aan circle { fill: var(--mint); stroke: var(--mint-diep); }
.blad .knop.is-aangesloten { box-shadow: 0 0 0 .375rem var(--mint-zacht); }
@media (prefers-reduced-motion: reduce) { .leidraad__haak path, .leidraad__haak circle { transition: none; } }
@media print { .leidraad { display: none; } }

/* Tekenbladen */
.bladen { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; background-image: linear-gradient(var(--vlak), transparent 12.5rem), linear-gradient(rgba(31,42,54,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(31,42,54,.05) 1px, transparent 1px); background-size: auto, 2rem 2rem, 2rem 2rem; gap: clamp(1rem, 2vw, 1.75rem); padding: clamp(.75rem, 1.6vw, 1.5rem) 0 clamp(2.5rem, 5vw, 4.5rem); }
.blad { --kader: clamp(.625rem, 1.6vw, 1.5rem); position: relative; width: min(100% - 1.5rem, 87rem); padding: var(--kader); background: var(--wit); border: 1.5px solid var(--inkt); scroll-margin-top: calc(var(--nav) + .75rem); }
.blad__vel { position: relative; height: 100%; border: 1px solid var(--inkt); padding: clamp(1.75rem, 4.4vw, 4rem) clamp(1.25rem, 4.4vw, 4rem) calc(clamp(1.75rem, 4.4vw, 4rem) + 2.75rem); }
.blad__kop { margin: 0 0 clamp(1.75rem, 3.5vw, 3rem); max-width: 18em; font-size: clamp(1.875rem, 3.4vw, 2.875rem); line-height: 1.08; font-weight: 600; letter-spacing: -.035em; }
/* bladcode: het stempeltje rechtsonder in het binnenkader */
.blad__code { position: absolute; right: var(--kader); bottom: var(--kader); display: flex; margin: 0; border-top: 1px solid var(--inkt); border-left: 1px solid var(--inkt); background: var(--wit); font: 400 .75rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--zacht); }
.blad__code span { padding: .6875rem 1rem; }
.blad__code span + span { border-left: 1px solid var(--lijn-sterk); color: var(--inkt); }
/* zone-indeling in de bovenrand van elk blad: 1 tot 4, met streepjes op de grenzen */
.blad__zone { position: absolute; left: var(--kader); right: var(--kader); top: 0; height: var(--kader); display: grid; grid-template-columns: repeat(4, 1fr); }
.blad__zone i { position: relative; display: grid; place-items: center; font: 400 .75rem/1 var(--mono); font-style: normal; color: var(--zacht); }
.blad__zone i + i::before { content: ""; position: absolute; left: 0; bottom: 0; height: .375rem; border-left: 1px solid var(--inkt); }

/* KioskOS-bladen: demo, motorkap en je automaat op tekenbladen */
.blad .definitie { margin-bottom: clamp(2rem, 4vw, 3rem); }
.blad__vel.motorkap > * { position: relative; }
.blad .past { align-items: start; }
.past .blad__kop { margin-bottom: 1.25rem; }
.blad .pluspunten h3 { text-wrap: balance; }
/* pluspunten op een blad: vakken in lijnen zoals de rest van de tekening, geen losse kaarten.
   De lijnen zijn achtergrondstreepjes, zodat site.js ze bij inscrollen kan laten uitgroeien (klasse wacht) */
.blad .pluspunten { gap: 0; padding: 1px 0 0 1px; background: linear-gradient(var(--inkt), var(--inkt)) left top / 100% 1px no-repeat, linear-gradient(var(--inkt), var(--inkt)) left top / 1px 100% no-repeat; transition: background-size var(--traag) var(--curve); }
.blad .pluspunten li { border: 0; border-radius: 0; padding: clamp(1.375rem, 2.6vw, 2.125rem); background: linear-gradient(var(--inkt), var(--inkt)) right top / 1px 100% no-repeat, linear-gradient(var(--inkt), var(--inkt)) left bottom / 100% 1px no-repeat, var(--wit); transition: background-size var(--traag) var(--curve) calc(var(--i, 0) * 90ms); }
.blad .pluspunten li > * { transition: opacity var(--normaal) var(--curve) calc(.6s + var(--i, 0) * 90ms), translate var(--normaal) var(--curve) calc(.6s + var(--i, 0) * 90ms); }
.blad .pluspunten.spot li:hover { translate: none; box-shadow: none; }
.blad .pluspunten.wacht { background-size: 0 1px, 1px 0; }
.blad .pluspunten.wacht li { background-size: 1px 0, 0 1px, auto; }
.blad .pluspunten.wacht li > * { opacity: 0; translate: 0 .375rem; }
.past__sub { margin: clamp(3rem, 6vw, 5rem) 0 1.5rem; padding-top: 1.75rem; border-top: 1px solid var(--inkt); font-size: 1.3125rem; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; }
/* Blad 04 en 05: prijs en vragen. Het founding-blok krijgt een inktlijn in plaats van schaduw, het filter lijnt links uit met de kop */
.blad .prijs .blad__kop { margin-bottom: 1.25rem; }
.blad .founding { border: 1px solid var(--inkt); border-radius: 0; box-shadow: none; }
.blad .vragen__filter, .blad .vragen__lijst { margin-inline: 0; }
.blad .vragen__filter { justify-content: flex-start; margin-top: 0; }
.blad .vragen__knop { border-radius: 0; }
.blad .vragen details { border-radius: 0; background: var(--wit); box-shadow: inset 0 0 0 1px var(--lijn-sterk); }
.blad .vragen details:hover { background: var(--vlak); }
.blad .vragen details[open] { background: var(--wit); box-shadow: inset 0 0 0 1px var(--inkt); }
.blad .vragen__ic { border-radius: 0; background: none; box-shadow: inset 0 0 0 1px var(--lijn-sterk); }
/* /kioskos/ passend (SITE-14): elk blad ongeveer één scherm hoog, net als de bladen op de startpagina */
.bladen--kort .blad__kop { margin-bottom: clamp(1rem, 1.6vw, 1.375rem); max-width: 30em; font-size: clamp(1.625rem, 2.5vw, 2.25rem); }
.bladen--kort .definitie { margin-bottom: clamp(1.25rem, 2vw, 1.625rem); max-width: 52em; font-size: 1.0625rem; }
.bladen--kort .inleiding { margin-bottom: 1.25rem; }
.bladen--kort .motorkap__punten { margin-top: 1.5rem; }
.bladen--kort .motorkap__punten li { padding-top: .875rem; }
.bladen--kort .past__tekst p { max-width: 46em; }
.bladen--kort .past__beeld { width: 11.875rem; }
.bladen--kort .past__sub { margin: 1.75rem 0 1rem; padding-top: 1.125rem; font-size: 1.1875rem; }
.bladen--kort .pluspunten li { gap: .625rem; padding: 1.125rem 1.25rem; }
.bladen--kort .pluspunten p { font-size: .9375rem; }
.bladen--kort .kennis__gesprek { margin-top: 2rem; padding-top: 1.5rem; }
.bladen--kort .kennis__verkopers { margin-top: 1.5rem; padding-top: 1.125rem; }
/* Prijs en Vragen als twee halve bladen naast elkaar (SITE-15); onder 960px vallen ze terug in de gewone rij */
.bladen__paar { display: contents; }
@media (min-width: 961px) {
  .bladen__paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: inherit; width: min(100% - 1.5rem, 87rem); }
  .bladen__paar .blad { width: auto; }
  .bladen--kort .motorkap__vlak { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .bladen--kort .past { grid-template-columns: minmax(0, 1fr) auto; }
  .bladen--kort .demo__podium { padding: 1rem 1.125rem 1.5rem; }
  .bladen--kort .blad__vel { padding: clamp(1.375rem, 2.3vw, 2.125rem) clamp(1.25rem, 3.4vw, 3.25rem) calc(clamp(1.375rem, 2.3vw, 2.125rem) + 2.5rem); }
  .bladen--kort .over { grid-template-columns: minmax(9.375rem, 11.875rem) minmax(0, 1fr); gap: 2.25rem; padding-right: clamp(2rem, 4vw, 3.5rem); }
  /* blad 06: het belgesprek staat naast Finn in plaats van eronder, zodat de lege strook rechts verdwijnt */
  .bladen--kort .blad__vel.kennis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 26.25rem); align-items: stretch; }
  .bladen--kort .kennis__gesprek { grid-template-columns: 1fr; align-content: start; gap: 1.5rem; margin: 0; padding: 0 0 0 clamp(2rem, 4vw, 3.5rem); border-top: 0; border-left: 1px solid var(--inkt); }
  .bladen--kort .kennis__gesprek p { margin-bottom: 1.25rem; }
  .bladen--kort .kennis__verkopers { grid-column: 1 / -1; }
}
/* /kioskos/ rustig op een laptop (SITE-16): het blad blijft een vel op het raster, met lucht eromheen zoals op een groot scherm.
   Smaller vel, kleinere koppen en marges, lopende tekst 1rem, en elk blad past onder de navigatie */
@media (min-width: 961px) {
  .bladen--kort { gap: 2rem; padding-top: 1.75rem; }
  .bladen--kort .blad, .bladen--kort .bladen__paar { width: min(100% - 6rem, var(--blad)); }
  .bladen--kort .bladen__paar .blad { width: auto; }
  .bladen--kort .blad { --kader: clamp(.625rem, .8vw, .75rem); border-width: 1px; scroll-margin-top: -.25rem; }
  .bladen--kort .blad__vel { padding: 1.75rem clamp(1.75rem, 3vw, 2.75rem) 3.625rem; }
  .bladen--kort .blad__code { font-size: .6875rem; }
  .bladen--kort .blad__code span { padding: .5rem .75rem; }
  .bladen--kort .blad__zone i { font-size: .6875rem; }
  .bladen--kort .blad__kop { margin-bottom: .875rem; font-size: clamp(1.5rem, 2vw, 1.875rem); }
  .bladen--kort :is(.definitie, .inleiding, .past__tekst p, .over__tekst > p) { font-size: 1rem; }
  .bladen--kort .kennis__kop { margin-bottom: .75rem; font-size: clamp(1.3125rem, 1.7vw, 1.5625rem); }
  .bladen--kort .past { gap: 3rem; }
  .bladen--kort .past__beeld { width: 10.5rem; }
  .bladen--kort .erbij .blad__kop { margin-bottom: 1.5rem; }
  .bladen--kort .pluspunten h3 { font-size: 1rem; }
  .bladen--kort .over { grid-template-columns: 9.375rem minmax(0, 1fr); gap: 2rem; }
  .bladen--kort .over .over__naam { margin-top: 1.125rem; padding-top: .875rem; }
  .bladen--kort .over__naam strong { font-size: 1.0625rem; }
  .bladen--kort .blad__vel.kennis { grid-template-columns: minmax(0, 1fr) minmax(18.75rem, 22.5rem); }
  .bladen--kort .kennis__verkopers { margin-top: 1.25rem; padding-top: 1rem; }
  .bladen--kort .blad__vel { padding-top: 1.375rem; padding-bottom: 3rem; }
  /* blad 01 en 02: de beelden iets kleiner, de inleiding in minder regels */
  .bladen--kort .definitie { max-width: 62em; }
  .bladen--kort .demo__podium { padding: .75rem 1rem .75rem; }
  .bladen--kort .demo__onder { margin-top: .375rem; }
  .bladen--kort .motorkap__vlak { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
  .bladen--kort .motorkap__punten { margin-top: 1.125rem; }
  .bladen--kort .motorkap__punten li { padding-top: .75rem; }
  .bladen--kort .motorkap__punten p { font-size: .9375rem; }
  /* prijs en vragen: halve bladen, dus alles een maat dichter */
  .bladen--kort .bladen__paar { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); }
  .bladen--kort .bladen__paar .blad__vel { padding-inline: 2rem; }
  /* de drie zekerheden vullen de kaart als regels boven een brede knop, zodat er geen lege strook tussen zit */
  .bladen--kort .blad .founding { display: flex; flex-direction: column; }
  .bladen--kort .founding__zeker { flex: 1; grid-auto-rows: 1fr; gap: 0; margin-bottom: 1rem; }
  .bladen--kort .founding__zeker li + li { border-top: 1px solid var(--lijn); }
  .bladen--kort .blad .founding .knop { min-height: 2.75rem; width: 100%; justify-content: center; text-align: center; }
  .bladen--kort .blad .prijs .inleiding { margin-bottom: .75rem; }
  .bladen--kort .blad .founding .label { margin-bottom: .375rem; }
  .bladen--kort .blad .founding h3 { margin-bottom: .375rem; }
  .bladen--kort .blad .prijs .regels { gap: .375rem; }
  .bladen--kort .blad .prijs .regels li { font-size: .9375rem; line-height: 1.5; }
  .bladen--kort .blad .founding { padding: 1.125rem 1.375rem 1.25rem; }
  .bladen--kort .blad .founding h3 { font-size: 1.25rem; }
  .bladen--kort .blad .founding p:not(.label) { margin-bottom: .875rem; font-size: .9375rem; }
  .bladen--kort .blad .vragen__knop { min-height: 2.25rem; }
  .bladen--kort .blad .vragen__lijst { margin: 1rem 0 1.25rem; }
  .bladen--kort .blad .vragen summary { padding: .6875rem 1rem; font-size: .9688rem; }
  .bladen--kort .blad .hulpregel { padding-top: 1rem; }
  /* kennismaken: het belgesprek krijgt een bredere kolom, zodat de tekst in minder regels past */
  .bladen--kort .blad__vel.kennis { grid-template-columns: minmax(0, 1fr) minmax(20rem, 25rem); }
  .bladen--kort .over__tekst > p { margin-bottom: .75rem; }
  .bladen--kort .kennis__gesprek p { margin-bottom: 1rem; font-size: 1rem; }
  .bladen--kort .slot .kanalen a { min-height: 3rem; padding: .5rem .875rem; }
}
/* lagere laptopschermen: het hele blad schaalt in stappen mee met de schermhoogte, zodat het onder de navigatie blijft passen */
@media (min-width: 961px) and (max-height: 780px) { .bladen--kort > .blad, .bladen--kort .bladen__paar { zoom: .93; } }
@media (min-width: 961px) and (max-height: 740px) { .bladen--kort > .blad, .bladen--kort .bladen__paar { zoom: .87; } }
@media (min-width: 961px) and (max-height: 700px) { .bladen--kort > .blad, .bladen--kort .bladen__paar { zoom: .81; } }
@media (min-width: 961px) and (max-height: 660px) { .bladen--kort > .blad, .bladen--kort .bladen__paar { zoom: .75; } }
.blad .prijs { grid-template-columns: 1fr; gap: 1.25rem; }
.blad .prijs .inleiding { margin-bottom: 1rem; }
.blad .regels { gap: .625rem; }
.blad .founding { padding: 1.5rem 1.625rem; }
.blad .founding h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.blad .founding p:not(.label) { margin-bottom: 1.125rem; }
.blad .founding .label { margin-bottom: .625rem; }
.blad .prijs .regels li { font-size: .9688rem; line-height: 1.55; }
.blad__vel.vragen { display: flex; flex-direction: column; }
.blad .vragen__filter { gap: .375rem; }
.blad .vragen__knop { min-height: 2.5rem; padding: 0 .75rem; font-size: .875rem; }
.blad .vragen__lijst { margin: 1.25rem 0 1.5rem; }
.blad .vragen details { margin-bottom: .5rem; }
.blad .vragen summary { grid-template-columns: 2.25rem minmax(0, 1fr) 1.875rem; gap: .75rem; padding: .9375rem 1.125rem; font-size: 1rem; }
.blad .vragen summary::before { font-size: 1.1875rem; }
.blad .vragen__ic { width: 1.875rem; height: 1.875rem; }
.blad .vragen details p { padding: 0 3.375rem 1.125rem 4.125rem; }
/* hulpregel onder de vragen, met de grendel-C in lichtgrijs */
.hulpregel { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 2px 1.125rem; align-items: center; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--lijn-sterk); }
.hulpregel__c { grid-row: span 2; width: 3.25rem; height: 3.25rem; fill: none; }
.hulpregel__c path { stroke: var(--lijn-sterk); stroke-width: 6.5; }
.hulpregel__c rect { fill: var(--mint); opacity: .45; }
.hulpregel p { margin: 0; color: var(--gedempt); }
.hulpregel strong { font-weight: 600; color: var(--inkt); }
.hulpregel__links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
/* Blad 06: kennismaken. Finn, dan het belgesprek met de kanalen, onderaan de verkopersregel */
.kennis__gesprek { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--inkt); }
.kennis__kop { margin: 0 0 1rem; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
.kennis__verkopers { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--lijn-sterk); }
.kennis__verkopers p { margin: 0; max-width: 40em; color: var(--gedempt); }
.kennis__verkopers strong { font-weight: 600; color: var(--inkt); }
@media (max-width: 760px) {
  .kennis__verkopers .knop { width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
}

/* Blad 2: wat we bouwen, drie aanzichten gescheiden door lijnen */
.werk { display: grid; grid-template-columns: 7fr 5fr; border: 1px solid var(--inkt); }
.werk > article { padding: clamp(1.375rem, 3vw, 2.5rem); }
.werk h3 { margin: 0 0 .625rem; font-size: 1.3125rem; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; }
.werk p { margin: 0 0 1.125rem; max-width: 34em; color: var(--gedempt); }
.werk__kiosk { grid-row: span 2; display: grid; grid-template-columns: minmax(0, 1fr) clamp(10.625rem, 17vw, 14.375rem); gap: clamp(1.5rem, 3vw, 2.75rem); align-items: center; border-right: 1px solid var(--inkt); }
.werk__kiosk h3 { font-size: clamp(1.75rem, 2.8vw, 2.25rem); letter-spacing: -.035em; }
.werk__kiosk .knop .ic, .slot .knop .ic { width: 1.125rem; height: 1.125rem; }
.werk__beeld { margin: 0; }
.werk__beeld img { display: block; width: 100%; height: auto; border: 1.5px solid var(--inkt); border-radius: var(--rand); }
.werk__beeld figcaption, .over__foto figcaption { margin-top: .75rem; font: 400 .75rem/1.4 var(--mono); letter-spacing: .04em; color: var(--zacht); }
.werk__case { border-bottom: 1px solid var(--inkt); }
.werk__case p:last-child, .werk__ander p { margin-bottom: .625rem; }
.werk__status { display: flex; align-items: center; gap: .625rem; margin: 1.125rem 0 0 !important; padding-top: .75rem; border-top: 1px solid var(--lijn-sterk); font: 400 .7812rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--inkt) !important; }
.vinkjes { display: grid; gap: .625rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }
.vinkjes li { display: flex; align-items: flex-start; gap: .625rem; }
.vinkjes .ic { width: 1.125rem; height: 1.125rem; margin-top: .25rem; color: var(--inkt); }

/* Blad 3: vier stappen op één lijn, met een pijlpunt aan het eind */
.stappen { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 1.125rem 0 0; list-style: none; }
.stappen::before { content: ""; position: absolute; left: 0; right: .625rem; top: 1.125rem; border-top: 1px solid var(--inkt); }
.stappen::after { content: ""; position: absolute; right: 0; top: .8125rem; border: .3438rem solid transparent; border-left: .625rem solid var(--inkt); border-right: 0; }
.stappen li { position: relative; padding: 2.375rem clamp(1rem, 2.4vw, 2.25rem) 0 0; }
.stappen__nr { position: absolute; left: 0; top: -1.125rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--inkt); border-radius: 50%; background: var(--wit); font: 400 .7812rem/1 var(--mono); }
.stappen li:first-child .stappen__nr { background: var(--mint); border-color: var(--mint); }
.stappen h3 { margin: 0 0 .5rem; font-size: 1.1875rem; font-weight: 600; letter-spacing: -.02em; }
.stappen p { margin: 0; max-width: 24em; font-size: .9688rem; color: var(--gedempt); }

/* Blad 4: techniek als stuklijst */
.techniek { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.techniek__tekst p { margin: 0 0 1.125rem; max-width: 30em; font-size: 1.0312rem; color: var(--gedempt); }
.techniek__tekst .blad__kop { margin-bottom: 1.25rem; }
.techniek__ai { padding: .875rem 1rem; border: 1px solid var(--lijn-sterk); background: var(--vlak); color: var(--inkt) !important; }
.stuklijst { width: 100%; border-collapse: collapse; border: 1px solid var(--inkt); font-size: .9688rem; }
.stuklijst caption { padding: .6875rem 1rem; border: 1px solid var(--inkt); border-bottom: 0; text-align: left; font: 400 .75rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--zacht); }
.stuklijst th, .stuklijst td { padding: .9375rem 1rem; border-top: 1px solid var(--lijn-sterk); text-align: left; vertical-align: top; }
.stuklijst thead th { border-top: 0; border-bottom: 1px solid var(--inkt); background: var(--vlak); font: 400 .75rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gedempt); }
.stuklijst tbody td:first-child { width: 4rem; font-family: var(--mono); font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--gedempt); }
.stuklijst tbody th { font-weight: 600; white-space: nowrap; }
.stuklijst__merk { display: inline-flex; align-items: center; gap: .625rem; }
.stuklijst__logo { width: 1.375rem; height: 1.375rem; flex: none; fill: currentColor; color: var(--inkt); }
.stuklijst tbody td:last-child { color: var(--gedempt); }

/* Blad 5: wie we zijn */
.over { display: grid; grid-template-columns: minmax(12.5rem, 18.75rem) minmax(0, 1fr); gap: clamp(1.75rem, 5vw, 4.5rem); align-items: start; }
.over__foto { margin: 0; }
.over__foto img { display: block; width: 100%; height: auto; border: 1.5px solid var(--inkt); border-radius: 0; }
.over__tekst > p { margin: 0 0 1.125rem; max-width: 36em; font-size: 1.0625rem; color: var(--gedempt); }
.over .over__naam { display: grid; gap: 2px; margin: 1.625rem 0 0; padding-top: 1.125rem; border-top: 1px solid var(--lijn-sterk); color: var(--inkt); }
.over__naam strong { font-size: 1.1875rem; }
.over__naam span { font: 400 .7812rem/1.4 var(--mono); color: var(--zacht); }

/* Blad 6: contact */
.slot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18.75rem, 25rem); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.slot p { margin: 0 0 1.75rem; max-width: 32em; font-size: 1.0625rem; color: var(--gedempt); }
.slot .blad__kop { margin-bottom: 1rem; }
.slot .slot__verder { margin: 1rem 0 0; }
.erbij .erbij__intro { margin: 0 0 1.75rem; max-width: 40em; font-size: 1.0625rem; color: var(--gedempt); }
.slot .kanalen { margin-top: 0; padding: 0; gap: 0; border: 1px solid var(--inkt); }
.slot .kanalen li + li { border-top: 1px solid var(--lijn-sterk); }
.slot .kanalen a { grid-template-columns: 1.375rem 1fr 1.125rem; gap: .875rem; min-height: 3.625rem; margin: 0; padding: .75rem 1rem; border-radius: 0; }
.slot .kanalen__ic { width: 1.375rem; height: 1.375rem; border-radius: 0; background: none; }

/* Casepagina (werk/eigen-automaat): tekst met metaregel naast het kioskscherm */
.case { display: grid; grid-template-columns: minmax(0, 1fr) clamp(12.5rem, 22vw, 18.75rem); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.case__tekst > p { margin: 0 0 1.125rem; max-width: 36em; font-size: 1.0625rem; color: var(--gedempt); }
.case .blad__kop { font-size: clamp(2.125rem, 4.2vw, 3.5rem); margin-bottom: 1.5rem; }
.pad { display: flex; flex-wrap: wrap; gap: .625rem; margin: 0 0 1.375rem; font: 400 .7812rem/1.4 var(--mono); letter-spacing: .04em; color: var(--zacht); }
.pad a { display: inline-flex; align-items: center; min-height: 2.75rem; margin: -.875rem 0; color: var(--inkt); text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: .3125rem; }
.case__meta { max-width: 36em; margin: 1.875rem 0 0; border: 1px solid var(--inkt); background: var(--wit); font-size: 1.0625rem; } /* even breed als de tekst erboven (36em op 17px) */
.case__meta div { display: grid; grid-template-columns: 7.5rem 1fr; }
.case__meta div + div { border-top: 1px solid rgba(31, 42, 54, .3); }
.case__meta dt { padding: .8125rem 1rem; border-right: 1px solid rgba(31, 42, 54, .3); font: 500 .75rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--inkt); }
.case__meta dd { margin: 0; padding: .75rem 1rem; font-size: .9688rem; font-weight: 500; }
.case__meta div:first-child dd { display: flex; align-items: center; gap: .625rem; } /* alleen de statusrij: statusteken naast de tekst */
.stappen--drie { grid-template-columns: repeat(3, 1fr); }
/* Ander werk (SITE-61): voorbeelden als herkenbare problemen, systemen als kleine monoregel */
.voorbeelden { display: grid; gap: .375rem; margin: 0 0 .875rem; padding: 0; list-style: none; }
.voorbeelden li { position: relative; padding-left: 1.125rem; color: var(--gedempt); }
.voorbeelden li::before { content: ""; position: absolute; left: 0; top: .72em; width: .5rem; border-top: 1.5px solid var(--inkt); }
.werk p.systemen, .problemen .systemen { margin: 0 0 1rem; font: 400 .75rem/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--zacht); }
.problemen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0 0 clamp(2rem, 4vw, 3rem); padding: 0; list-style: none; border: 1px solid var(--inkt); background: var(--inkt); }
.problemen li { padding: clamp(1.125rem, 2.4vw, 1.75rem); background: var(--wit); }
.problemen h3 { margin: 0 0 .5rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; }
.problemen p { margin: 0 0 .75rem; max-width: 30em; font-size: .9688rem; color: var(--gedempt); }
.problemen .systemen { margin: 0; }
.koppel__sub { margin: 0 0 1.75rem; font-size: 1.1875rem; font-weight: 600; letter-spacing: -.02em; }
@media (max-width: 760px) { .problemen { grid-template-columns: 1fr; } }
.koppel .koppel__intro { margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); max-width: 40em; font-size: 1.0625rem; color: var(--gedempt); }
.ervaring__kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
.ervaring h3 { margin: 0 0 .625rem; font-size: 1.1875rem; font-weight: 600; letter-spacing: -.02em; }
.ervaring__kolommen p { margin: 0; max-width: 32em; font-size: 1.0625rem; color: var(--gedempt); }
.ervaring .ervaring__naam { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; font: 400 .7812rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--zacht); }

/* Werkpagina (SITE-3): thumbnails naast elkaar, beeld op een rastervlak, tekst eronder */
.werk__alles { margin: 1.375rem 0 0; }
/* scheidingslijn als gap op een inktvlak: beide kolommen exact even breed, dus de beeldvakken eindigen op dezelfde hoogte */
.duimen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--inkt); background: var(--inkt); }
.duim { display: flex; flex-direction: column; background: var(--wit); }
.duim__beeld { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--inkt); background-color: var(--vlak); background-image: linear-gradient(var(--lijn) 1px, transparent 1px), linear-gradient(90deg, var(--lijn) 1px, transparent 1px); background-size: 2rem 2rem; background-position: center; }
.duim__beeld img { position: absolute; top: 7%; left: 50%; width: auto; height: 86%; border: 1.5px solid var(--inkt); border-radius: var(--rand); transform: translateX(-50%); transition: transform var(--normaal) var(--curve); }
.duim__schema { width: 86%; height: auto; transition: transform var(--normaal) var(--curve); }
.duim:hover .duim__beeld img { transform: translate(-50%, -.25rem); }
.duim:hover .duim__schema { transform: translateY(-.25rem); }
.duim__vak rect { fill: var(--wit); stroke: var(--inkt); stroke-width: 1.5px; }
.duim__vak text { font: 400 .6875rem var(--mono); letter-spacing: .06em; fill: var(--inkt); text-anchor: middle; dominant-baseline: central; }
.duim__lijn { fill: none; stroke: var(--lijn-sterk); stroke-width: 1.5px; }
.duim__lijn--aan { stroke: var(--mint); stroke-width: 2px; }
.duim__tegel { fill: #E6EDF3; stroke: var(--inkt); stroke-width: 1.5px; }
.duim__c { fill: none; stroke: var(--inkt); stroke-width: .4062rem; }
.duim__streep { fill: var(--mint); }
.duim__tekst { display: flex; flex-direction: column; flex: 1; padding: clamp(1.375rem, 3vw, 2.5rem); }
.duim__tekst h2 { margin: 0 0 .625rem; font-size: clamp(1.625rem, 2.6vw, 2.125rem); line-height: 1.1; font-weight: 600; letter-spacing: -.035em; }
.duim__tekst > p:not(.duim__meta) { margin: 0 0 1.5rem; max-width: 32em; color: var(--gedempt); }
.duim__meta { display: flex; align-items: center; gap: .625rem; margin: 0 0 .875rem; font: 400 .7812rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--zacht); }
.duim__acties { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: auto; }
.duim__acties .knop .ic { width: 1.125rem; height: 1.125rem; }
@media (prefers-reduced-motion: reduce) { .duim__beeld img, .duim__schema { transition: none; } }
@media (max-width: 760px) {
  .duimen { grid-template-columns: 1fr; }
  .ervaring__kolommen { grid-template-columns: 1fr; gap: 1.75rem; }
}

@media (max-width: 960px) {
  .case { grid-template-columns: 1fr; }
  .case__beeld { max-width: 16.25rem; }
  .stappen--drie { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  /* één kolom: eerst de tekst, dan het schema */
  .held--start { min-height: 0; padding: 2rem 0 1.5rem; }
  .start { grid-template-columns: 1fr; row-gap: 2rem; }
  .start__tekst h1 { max-width: 12em; }
  .plat--breed { max-height: none; }
  .plattegrond figcaption { margin-top: .875rem; }
  .werk, .techniek, .slot { grid-template-columns: 1fr; }
  .werk__kiosk { grid-row: auto; border-right: 0; border-bottom: 1px solid var(--inkt); }
  .stappen { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .stappen::before, .stappen::after { display: none; }
  .stappen li { border-top: 1px solid var(--inkt); }
}
@media (max-width: 760px) {
  /* rust S1 en S2 (2026-11-10, alleen telefoon): één kader per blad, geen stempel, geen ruitjes achter de bladen */
  .bladen { background-image: none; }
  .blad { --kader: .5rem; width: calc(100% - 1rem); padding: 0; border: 0; }
  .blad__zone, .blad__code { display: none; }
  .plat--breed { display: none; }
  .plat--smal { display: block; }
  .blad__vel { padding: 1.75rem 1.125rem; }
  .werk__kiosk { grid-template-columns: 1fr; }
  .werk__beeld { max-width: 13.75rem; }
  .stappen { grid-template-columns: 1fr; row-gap: 0; padding: 0 0 0 1.125rem; }
  .stappen li { border-top: 0; border-left: 1px solid var(--inkt); padding: 0 0 1.875rem 2.125rem; }
  .stappen li:last-child { padding-bottom: .25rem; }
  .stappen__nr { left: -1.125rem; top: -.25rem; }
  .over { grid-template-columns: 1fr; }
  .over__foto { max-width: 12.5rem; }
  .stuklijst { font-size: .9062rem; }
  .stuklijst th, .stuklijst td { padding: .75rem .625rem; }
  .stuklijst tbody td:first-child { width: 2.5rem; }
  .stuklijst tbody th { white-space: normal; }
}
@media (max-width: 480px) {
  .start__tekst .knoppen .knop { width: 100%; justify-content: center; }
}

/* één geheel (SITE-19): alle pagina's op de maat van /kioskos/ (bladen--kort, 1160 breed). Ritme per lange pagina:
   één getint vel en één open blad, de rest wit. Het getinte vel is licht grijsblauw in plaats van donker (vervangt het
   donkere vel van SITE-17); alleen de vlakken schuiven een tint op, inkt en mint blijven gelijk. */
.blad--tint { --wit: #E9EEF4; --vlak: #F4F6F9; --vlak-2: #DDE4EC; }
.blad--tint .blad__code { background: #E9EEF4; }

/* open kop (SITE-19): op Werk, de case en Contact staan kruimelpad en kop los op het raster, zoals op de start en /kioskos/ */
.held--sub { padding: clamp(1.75rem, 4vw, 3.5rem) 0 clamp(1rem, 2vw, 1.75rem); }
.sub { position: relative; width: min(100% - 1.5rem, var(--blad)); margin: 0 auto; padding-inline: 3.625rem; }
.sub h1 { margin: 0 0 1.125rem; max-width: 14em; font-size: clamp(2.25rem, 3.5vw, 3.25rem); line-height: 1.06; font-weight: 600; letter-spacing: -.04em; text-wrap: balance; }
.sub > p { margin: 0; max-width: 40em; font-size: 1.0625rem; color: var(--gedempt); }
.sub > p + p { margin-top: .75rem; }
.sub--case { display: grid; grid-template-columns: minmax(0, 1fr) clamp(16rem, 25vw, 21rem); gap: 3.5rem; align-items: center; }
.sub--case h1 { max-width: 16em; }
.held--sub + .bladen { padding-top: 0; }
/* kop even breed als het blad eronder: van buitenlijn tot buitenlijn (zie .bladen--kort) */
@media (min-width: 961px) { .sub { width: min(100% - 6rem, var(--blad)); padding-inline: 0; } }
@media (max-width: 960px) {
  .sub--case { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .sub--case .case__beeld { max-width: 18rem; }
  .bladen--kort h1.blad__kop { font-size: 2.125rem; line-height: 1.08; }
}
@media (max-width: 760px) {
  .held--sub { padding-top: 1.75rem; }
  .sub { width: calc(100% - 1rem); padding-inline: 1.6875rem; }
  .sub h1 { font-size: 2.125rem; }
}

/* één geheel (SITE-19): de bovenkant even breed als de bladen, en elk blad compact genoeg voor één laptopscherm */
@media (min-width: 961px) {
  .start { width: min(100% - 6rem, var(--blad)); padding-inline: 3.625rem; }
  .bladen--kort h1.blad__kop { margin-bottom: 1rem; max-width: 20em; font-size: clamp(2rem, 2.8vw, 2.625rem); line-height: 1.08; }
  .bladen--kort .pad { margin-bottom: .875rem; }

  /* start: wat we bouwen, stappen, techniek en slot */
  .bladen--kort .werk > article { padding: 1.5rem 1.75rem; }
  .bladen--kort .werk__kiosk { grid-template-columns: minmax(0, 1fr) 10.5rem; gap: 2rem; }
  .bladen--kort .werk__kiosk h3 { font-size: clamp(1.5rem, 2.1vw, 1.875rem); }
  .bladen--kort .werk h3 { font-size: 1.1875rem; }
  .bladen--kort .werk p { margin-bottom: .875rem; font-size: .9688rem; }
  .bladen--kort .stappen h3 { font-size: 1.0625rem; }
  .bladen--kort .stappen p, .bladen--kort .slot p { font-size: .9688rem; }
  .bladen--kort .techniek { gap: 3rem; }
  .bladen--kort .techniek__tekst p { margin-bottom: .875rem; font-size: 1rem; }
  .bladen--kort .stuklijst { font-size: .9375rem; }
  .bladen--kort .stuklijst th, .bladen--kort .stuklijst td { padding: .6875rem .875rem; }
  .bladen--kort .slot { gap: 3rem; }
  .bladen--kort .slot .kanalen a { min-height: 3.125rem; }

  /* werk: beelden liggend in plaats van 4:3 */
  .bladen--kort .duim__beeld { aspect-ratio: 2 / 1; }
  .bladen--kort .duim__tekst { padding: 1.375rem 1.75rem 1.625rem; }
  .bladen--kort .duim__tekst h2 { font-size: clamp(1.375rem, 1.9vw, 1.75rem); }
  .bladen--kort .duim__tekst > p:not(.duim__meta) { margin-bottom: 1.125rem; font-size: .9688rem; }

  /* case: foto naast de tekst, verticaal gecentreerd */
  .bladen--kort .case { grid-template-columns: minmax(0, 1fr) 14.5rem; gap: 3.5rem; align-items: center; }
  .bladen--kort .case__tekst > p { margin-bottom: .875rem; font-size: 1rem; }
  .bladen--kort .case__meta { margin-top: 1.375rem; }
  .bladen--kort .case__meta dd { padding: .625rem 1rem; font-size: .9375rem; }
  .bladen--kort .case__meta dt { padding: .6875rem 1rem; }

  /* contact: kaart van Finn zoals op mobiel (ronde foto naast de naam), zodat de keuzes niet uitrekken */
  .bladen--kort .contact__binnen { grid-template-columns: 20.25rem minmax(0, 1fr); gap: 1.5rem 2rem; }
  .bladen--kort .persoon { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; align-content: start; gap: 0 1rem; padding: 1.375rem 1.375rem .875rem; }
  .bladen--kort .persoon__foto { width: 4.5rem; height: 4.5rem; aspect-ratio: 1; border-radius: 50%; }
  .bladen--kort .persoon__tekst { display: contents; }
  .bladen--kort .persoon .persoon__naam { margin: 0; }
  .bladen--kort .persoon__tekst > p:not(.persoon__naam), .bladen--kort .persoon .kanalen { grid-column: 1 / -1; }
  .bladen--kort .persoon__tekst > p:not(.persoon__naam) { margin: 1.125rem 0 1rem; font-size: .9375rem; }
  .bladen--kort .persoon .kanalen { margin-top: 0; }
  .bladen--kort .persoon .kanalen a { min-height: 3rem; }
  .bladen--kort .met-stappen .aanvraag__stap.is-actief .keuzes { grid-auto-rows: auto; flex: 0 0 auto; }
  .bladen--kort .aanvraag { padding: 1.375rem 1.625rem; }
  /* minder hoogte: strakkere ruimte rond balk, vraag en knoppen */
  .bladen--kort .aanvraag__balk { margin-bottom: 1.25rem; }
  .bladen--kort .aanvraag legend { margin-bottom: .875rem; }
  .bladen--kort .aanvraag__acties { padding-top: 1.25rem; }
  .bladen--kort .aanvraag__privacy { margin-top: .75rem; }
  .bladen--kort .velden { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bladen--kort .veld--mail { grid-column: auto; }
  .bladen--kort .contact__kop p:not(.pad) { font-size: 1rem; }
}

/* open blad: geen kader en geen vel, de kop en de zes pluspunten liggen los op het raster; de bladcode hangt onder het raster van pluspunten */
.blad--open { padding: 0; background: none; border: 0; }
.blad--open .blad__zone { display: none; }
.blad--open .blad__vel { border: 0; padding: clamp(.5rem, 1.4vw, 1.25rem) 0 0; }
.blad--open .blad__code { position: static; width: max-content; margin-left: auto; border: 1px solid var(--inkt); border-top: 0; background: var(--wit); }
/* de bladcode hangt direct aan het witte blok: bij de pluspunten eronder, bij de Werkwijze onder het podium (met het bijschrift daar weer onder) */
.blad--open .erbij { height: auto; }
.ww__podium .blad__code { position: absolute; top: 100%; right: 0; bottom: auto; margin: 0; }

@media (min-width: 961px) {
  .bladen--kort .blad--open .blad__vel { padding: .75rem 0 0; }
  .bladen--kort .blad--open .erbij .blad__kop, .bladen--kort .blad--open .blad__kop { margin-bottom: 1.25rem; }

  /* prijs en vragen elk als breed blad onder elkaar (gekozen uit drie mockups). Prijs: kop en inleiding, de regels
     achter een lijn, het founding-blok rechts. Vragen: kop en filter op één rij, de hulpregel op één regel.
     site.js reserveert de hoogte van de hoogste groep met één antwoord open, zodat openklappen niets verschuift */
  .bladen--kort .bladen__paar { grid-template-columns: minmax(0, 1fr); }
  .bladen--kort .bladen__paar .blad__vel { padding: 1.5rem 2.5rem 3rem; }
  .bladen--kort .blad .prijs { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 2rem; align-items: stretch; }
  .bladen--kort .blad .prijs__regels { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr; column-gap: 2rem; align-content: start; }
  .bladen--kort .blad .prijs__regels .blad__kop, .bladen--kort .blad .prijs__regels .inleiding { grid-column: 1; }
  .bladen--kort .blad .prijs .inleiding { margin: 0; font-size: 1rem; }
  .bladen--kort .blad .prijs .regels { grid-column: 2; grid-row: 1 / span 2; gap: .625rem; padding-left: 1.75rem; border-left: 1px solid var(--lijn-sterk); }
  .bladen--kort .blad .founding { display: flex; flex-direction: column; padding: 1.25rem 1.5rem; }
  .bladen--kort .blad .founding .knop { margin-top: auto; align-self: flex-start; }
  .bladen--kort .blad__vel.vragen { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1.5rem; }
  .bladen--kort .blad__vel.vragen .blad__kop { margin: 0; }
  .bladen--kort .blad .vragen__lijst, .bladen--kort .blad .hulpregel { grid-column: 1 / -1; }
  .bladen--kort .blad .vragen__filter { flex-wrap: nowrap; gap: .25rem; }
  .bladen--kort .blad .vragen__knop { flex: none; min-height: 2.125rem; padding: 0 .625rem; gap: .4375rem; font-size: .8438rem; }
  .bladen--kort .blad .vragen__knop span { font-size: .6875rem; }
  .bladen--kort .blad .vragen__knop[data-filter="alles"] { display: none; }
  .bladen--kort .blad .vragen__lijst { max-width: none; margin: 1.125rem 0 1rem; }
  .bladen--kort .blad .vragen details { margin-bottom: .375rem; }
  .bladen--kort .blad .vragen summary { grid-template-columns: 1.875rem minmax(0, 1fr) 1.75rem; gap: .625rem; padding: .6875rem .875rem; font-size: .9688rem; }
  .bladen--kort .blad .vragen summary::before { font-size: 1.0625rem; }
  .bladen--kort .blad .vragen__ic { width: 1.75rem; height: 1.75rem; }
  .bladen--kort .blad .vragen details p { max-width: calc(68ch + 3.375rem); padding: 0 1.25rem .875rem 3.375rem; font-size: .9375rem; line-height: 1.55; }
  .bladen--kort .blad .hulpregel { grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: 0 .875rem; padding-top: .75rem; }
  .bladen--kort .blad .hulpregel__c { grid-row: auto; width: 1.75rem; height: 1.75rem; }
  .bladen--kort .blad .hulpregel p { margin: 0; font-size: .9375rem; }
  .bladen--kort .blad .hulpregel__links .pijl { min-height: 2.25rem; }
}
/* meten zonder animatie: site.js klapt elke vraag even open om de hoogte te bepalen */
.vragen__lijst.is-meten details, .vragen__lijst.is-meten details::details-content { animation: none !important; transition: none !important; }

/* Werkwijze (SITE-20): de stappen werken als de tabs van Zo werkt het; rechts één automaat die van gesprek tot live meegroeit.
   Rustig naar Apple-maat: veel lucht, één wit vlak zonder rand, de kaart erin plat en lichtgrijs. */
.ww__podium { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 9.25rem; gap: 2rem; align-items: center; min-height: 18.75rem; padding: 2.5rem 2rem 1.75rem; border-radius: 0; background: var(--wit); box-shadow: 0 1px 2px rgba(31,42,54,.04), 0 1.125rem 3rem -.75rem rgba(31,42,54,.10); }
.ww__bijschrift { margin-top: .75rem; text-align: right; }
.demo.ww.is-live .demo__tab.is-actief { box-shadow: 0 1px 2px rgba(31,42,54,.04), 0 .625rem 1.75rem -.625rem rgba(31,42,54,.12); }

/* De scroll is de tijdlijn (SITE-43): site.js zet per onderdeel --p, --q of --r tussen 0 en 1, afgeleid van hoe ver je door de vier stappen bent.
   Zo loopt alles precies mee met de scroll, ook terug. Zonder script of met minder beweging staat het eindbeeld. */
.ww__podium { --p: 0; --q: 0; --r: 0; --wis: 1; }

/* kaarten: per stap één, ze liggen op elkaar. --wis is de korte vervaging bij terugscrollen, als alle stappen al af zijn */
.ww__kaarten { position: relative; z-index: 1; display: grid; opacity: var(--wis); }
.wk { grid-area: 1 / 1; align-self: center; padding: 1rem 1.125rem 1.125rem; border-radius: 0; background: var(--vlak); font-size: .8438rem; opacity: var(--p); transform: translateY(calc((1 - var(--p)) * .625rem)); }
.ww:not(.is-live) .wk--0 { --p: 1; }
.wk__kop { display: flex; align-items: center; gap: .5rem; margin: 0 0 .625rem; font: 500 .6875rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gedempt); }
.wk__kop .ic { width: .875rem; height: .875rem; color: var(--mint-diep); }
.wk__lijn { display: inline-flex; align-items: center; gap: .375rem; margin-left: auto; letter-spacing: .02em; text-transform: none; color: var(--zacht); }

/* notities typen zich in; vinkjes komen een voor een */
.wk__notities { display: grid; margin: 0; }
.wk__notities div { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: .75rem; padding: .5625rem 0; border-top: 1px solid rgba(31,42,54,.07); }
.wk__notities dt { padding-top: 2px; font: 400 .6875rem/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--zacht); }
.wk__notities dd { margin: 0; color: var(--inkt); clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
.ww:not(.is-live) .wk__notities dd { --p: 1; }

.wk__lijst { display: grid; margin: 0; padding: 0; list-style: none; }
.wk__lijst li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-top: 1px solid rgba(31,42,54,.07); color: color-mix(in srgb, var(--inkt) calc(var(--p) * 100%), var(--zacht)); }
.wk__lijst .ic { width: 1rem; height: 1rem; color: var(--mint-diep); opacity: var(--p); transform: scale(calc(.4 + .6 * var(--p))); }

.wk__stempel { display: inline-flex; align-items: center; gap: .375rem; margin: .75rem 0 0; padding: .375rem .75rem; border-radius: 0; background: var(--mint-zacht); font: 500 .7188rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--inkt); opacity: var(--p); transform: scale(calc(.85 + .15 * var(--p))); }
.wk__stempel .ic { width: .875rem; height: .875rem; color: var(--mint-diep); }

.wk__balk { height: .25rem; margin: .75rem 0 0; border-radius: .25rem; background: var(--vlak-2); overflow: hidden; }
.wk__balk i { display: block; width: calc(var(--p) * 100%); height: 100%; background: var(--mint-diep); }
.wk__chip { display: inline-flex; align-items: center; gap: .4375rem; margin: .75rem 0 0; padding: .375rem .625rem; border-radius: 0; background: var(--wit); font-size: .7812rem; color: var(--inkt); opacity: var(--p); transform: translateY(calc((1 - var(--p)) * .25rem)); }
.wk__chip .ic { width: .875rem; height: .875rem; color: var(--mint-diep); }

/* de automaat: grijs en onbekend bij het gesprek, onderdelen lichten op bij de check (--p), het scherm vult zich bij bouwen (--q) en gaat aan bij live (--r) */
.ww__automaat { position: relative; z-index: 1; opacity: calc((.5 + .5 * var(--p)) * (.35 + .65 * var(--wis))); }
.aut { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 .75rem 1.75rem rgb(0 168 112 / calc(var(--p) * .18))); }
.aut rect { stroke-width: 1.4; }
.aut__kast { fill: var(--wit); stroke: color-mix(in srgb, var(--mint-diep) calc(var(--p) * 100%), var(--inkt)); }
.aut__scherm { fill: color-mix(in srgb, var(--mint-zacht) calc(var(--p) * 100%), color-mix(in srgb, var(--wit) calc(var(--q) * 100%), var(--vlak-2))); stroke: color-mix(in srgb, var(--mint-diep) calc(max(var(--p), var(--r)) * 100%), var(--inkt)); }
.aut__kop { fill: color-mix(in srgb, var(--mint) calc(var(--r) * 100%), color-mix(in srgb, var(--vlak-2) calc(var(--q) * 100%), transparent)); stroke: none; }
.aut__tegels rect { fill: var(--vlak); stroke: var(--lijn-sterk); stroke-width: 1; opacity: var(--p); }
.aut__terminal { fill: color-mix(in srgb, var(--mint-zacht) calc(var(--p) * 100%), var(--vlak)); stroke: color-mix(in srgb, var(--mint-diep) calc(var(--p) * 100%), var(--inkt)); }
.aut__terminal-scherm { fill: color-mix(in srgb, var(--mint-zacht) calc(var(--r) * 100%), var(--vlak-2)); stroke: none; }
.aut__bak { fill: color-mix(in srgb, var(--mint-zacht) calc(var(--p) * 100%), var(--vlak)); stroke: color-mix(in srgb, var(--mint-diep) calc(var(--p) * 100%), var(--inkt)); }
.aut__voet { fill: var(--inkt); stroke: none; }

/* label boven de automaat: Voorbeeld tijdens bouwen, Live daarna */
.ww__label { position: absolute; left: 0; right: 0; top: -1.625rem; height: 1.125rem; margin: 0; font: 500 .6875rem/1.125rem var(--mono); letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.ww__label span { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; gap: .375rem; opacity: var(--p); }
.ww__label-vb { color: var(--zacht); }
.ww__label-live { color: var(--inkt); }

/* de voortgangslijn loopt mee met de stap die afspeelt en blijft daarna vol staan */
.ww.is-live .demo__tab.is-actief .demo__voortgang { animation: none; transform: scaleY(var(--t, 0)); }

@media (min-width: 961px) {
  .bladen--kort #werkwijze .blad__vel { padding: 6.5rem 0 5.5rem; }
  .bladen--kort #werkwijze .blad__kop { margin-bottom: 3.5rem; }
  .ww { grid-template-columns: minmax(0, .78fr) minmax(0, 1.3fr); gap: 4.5rem; align-items: center; }
  .ww .demo__tabs { gap: .625rem; }
  .ww .demo__tab { padding: 1.25rem 1.5rem 1.25rem 1.75rem; border-radius: 0; }
  .ww .demo__tab::before, .ww .demo__voortgang { top: 1.25rem; bottom: 1.25rem; }
  .ww .demo__knop { font-size: 1.125rem; }
  .ww .demo__tab p { padding-top: .625rem; font-size: 1.0625rem; line-height: 1.55; }
  .ww__podium { grid-template-columns: minmax(0, 1fr) 10.5rem; gap: 3rem; min-height: 28.75rem; padding: 4rem 3rem 3.5rem; }
  .wk { padding: 1.375rem 1.5rem 1.5rem; font-size: .9375rem; }
  .wk__kop { margin-bottom: .875rem; }
  .wk__notities div { grid-template-columns: 5.5rem minmax(0, 1fr); padding: .8125rem 0; }
  .wk__lijst li { padding: .75rem 0; }
  .wk__stempel, .wk__balk, .wk__chip { margin-top: 1.125rem; }
  .ww__label { top: -2rem; }
  .ww__bijschrift { margin-top: 2.75rem; }
}
@media (max-width: 960px) {
  .ww__podium { order: -1; margin-bottom: 2.0625rem; }
}
@media (max-width: 760px) {
  #werkwijze .blad__vel { padding-top: 3rem; padding-bottom: 2.5rem; }
  #werkwijze .blad__kop { margin-bottom: 1.75rem; }
  .ww__podium { grid-template-columns: minmax(0, 1fr) 5.25rem; gap: 1rem; min-height: 0; padding: 2.5rem 1rem 1.375rem; border-radius: 0; }
  .wk { padding: .75rem .75rem .875rem; border-radius: 0; font-size: .7812rem; }
  .wk__notities div { grid-template-columns: 1fr; gap: 2px; padding: .4375rem 0; }
  .wk__lijn { display: none; }
  .ww__bijschrift { text-align: left; }
  /* klikbare stappen op de telefoon: compact, zodat de automaat en de open stap dicht bij elkaar staan */
  .ww.is-live { gap: .75rem; }
  .ww.is-live .ww__podium { padding: 1.75rem .875rem .75rem; }
  .ww.is-live .wk { padding: .625rem .75rem .75rem; }
  .ww.is-live .wk__lijst li { padding: .3125rem 0; }
  .ww.is-live .wk__notities div { padding: .3125rem 0; }
  .ww.is-live .wk__kop { margin-bottom: .5rem; }
  .ww.is-live .wk__stempel, .ww.is-live .wk__balk, .ww.is-live .wk__chip { margin-top: .5rem; }
  .ww.is-live .ww__label { top: -1.5rem; }
  .ww.is-live .demo__tab { padding-block: .625rem; }
  .ww.is-live .demo__tab::before, .ww.is-live .demo__voortgang { top: .625rem; bottom: .625rem; }
  .ww.is-live .demo__tab p { padding-top: .375rem; font-size: .9062rem; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) {
  .ww__podium, .ww__podium * { transition: none !important; }
}

/* Beweging (SITE-21): één curve en drie duren staan op :root, alle overgangen gebruiken die. Hieronder de ruimte tussen de bladen, de overgang tussen pagina's
   en het zacht verschijnen van de bladen. */

/* ruimte tussen de bladen op de pagina's zonder open blad ertussen; de bladen zelf blijven even groot */
.bladen--ruim { gap: 2rem; }
@media (min-width: 961px) { .bladen--kort.bladen--ruim { gap: 4.5rem; } }

/* bladen: het kader staat er al, de inhoud komt één keer rustig in beeld (site.js zet .verschijn alleen onder de vouw) */
.blad.verschijn > * { opacity: 0; translate: 0 .875rem; }
.blad.verschijn.zichtbaar > * { opacity: 1; translate: none; transition: opacity var(--traag) var(--curve), translate var(--traag) var(--curve); }

/* overgang tussen pagina's: de navigatie blijft staan, de inhoud vervaagt kort */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .nav { view-transition-name: nav; }
  ::view-transition-old(root) { animation: pagina-uit var(--snel) var(--curve) both; }
  ::view-transition-new(root) { animation: pagina-in var(--normaal) var(--curve) both; }
  ::view-transition-group(nav) { animation: none; }
}
@keyframes pagina-uit { to { opacity: 0; } }
@keyframes pagina-in { from { opacity: 0; translate: 0 .5rem; } }

/* blokken die je aanwijst krijgen een zachte schaduw eronder; de lijnen van de tekening blijven staan */
@media (hover: hover) {
  .blad .pluspunten li { transition: background-size var(--traag) var(--curve) calc(var(--i, 0) * 90ms), box-shadow var(--normaal) var(--curve); }
  .blad .pluspunten li:hover, .blad .pluspunten.spot li:hover { z-index: 1; box-shadow: 0 1px 2px rgba(31,42,54,.05), 0 1.125rem 2.5rem -1.125rem rgba(31,42,54,.28); }
  .blad .founding { transition: box-shadow var(--normaal) var(--curve); }
  .blad .founding:hover { box-shadow: 0 1px 2px rgba(31,42,54,.05), 0 1.125rem 2.5rem -1.125rem rgba(31,42,54,.28); }
}
/* prijsregels: meer lucht tussen de punten met iconen */
.bladen--kort .blad .prijs .regels { gap: 1.125rem; }

/* Statusteken (SITE-48): de grendel-C uit het logo in plaats van een bolletje. Klaar: de C en daarna de balk laden een keer in en staan dan stil.
   Bezig: alleen de balk knippert. Wacht: grijs, balk eruit. site.js houdt klaar op is-straks tot het teken in beeld is. */
.gr { flex: none; width: 1.05rem; height: .875rem; overflow: hidden; }
.wk__lijn .gr, .ww__label-live .gr, .log__st .gr { width: .9rem; height: .75rem; }
.gr path { fill: none; stroke-width: 6.5; }
.gr__spoor { stroke: none; }
.gr__c { stroke: var(--inkt); stroke-dasharray: 101; }
.gr__b { fill: var(--mint); transform-box: fill-box; transform-origin: left center; }
.gr--klaar .gr__spoor, .log li.klaar .gr__spoor { stroke: rgba(31,42,54,.16); }
.gr--klaar .gr__c, .log li.klaar .gr__c { animation: gr-c .9s linear both; }
.gr--klaar .gr__b, .log li.klaar .gr__b { animation: gr-b .4s var(--curve) .9s both; }
.log li.bezig .gr__b { animation: knipper 1.1s steps(1) infinite; }
.log li.wacht .gr__c { stroke: rgba(31,42,54,.32); }
.log li.wacht .gr__b { fill: rgba(31,42,54,.32); transform: translateX(9px); }
.gr.is-straks .gr__c { animation: none; stroke-dashoffset: 101; }
.gr.is-straks .gr__b { animation: none; transform: scaleX(0); }
@keyframes gr-c { from { stroke-dashoffset: 101; } to { stroke-dashoffset: 0; } }
@keyframes gr-b { from { transform: scaleX(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .gr__c, .gr__b, .gr--klaar .gr__c, .gr--klaar .gr__b, .log li .gr__c, .log li .gr__b { animation: none; }
}

/* Demo (SITE-54 t/m 57, 2026-11-09): verborgen pagina /demo/ met de demovideo en "Past dit op mijn automaat?" */
.demo__film { margin: 0; }
.demo__beeld { border: 1px solid var(--inkt); background: var(--inkt); aspect-ratio: 16 / 9; }
.demo__beeld video { display: block; width: 100%; height: 100%; object-fit: contain; }
.demo__film figcaption { margin-top: .75rem; font-size: .875rem; color: var(--gedempt); }
.demo__rij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 17rem); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.demo__legenda { border-top: 1px solid var(--inkt); }
.demo__legenda-kop { margin: 0; padding: .875rem 0; border-bottom: 1px solid var(--lijn-sterk); font-size: .9062rem; font-weight: 600; }
.demo__legenda ul { margin: 0; padding: 0; list-style: none; }
.demo__legenda li { display: grid; grid-template-columns: .5rem 1fr; gap: .875rem; align-items: baseline; padding: .875rem 0; border-bottom: 1px solid var(--lijn-sterk); font-size: 1rem; line-height: 1.4; }
.demo__legenda li::before { content: ""; width: .5rem; height: .5rem; background: var(--mint); box-shadow: inset 0 0 0 1px var(--mint-diep); translate: 0 -.0625rem; }
.demo__legenda-voet { margin: .875rem 0 0; font-size: .875rem; color: var(--gedempt); }
.pasvraag__kop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem 3rem; align-items: end; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.pasvraag__kop .blad__kop { margin: 0; }
.pasvraag__kop p { margin: 0; max-width: 40em; color: var(--gedempt); }
.pasvraag__groepen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--inkt); border-bottom: 1px solid var(--inkt); }
.pasvraag__groep { display: grid; gap: 1.125rem; align-content: start; margin: 0; min-width: 0; padding: 1.5rem clamp(1.25rem, 2.6vw, 2.25rem) 1.75rem 0; border: 0; }
.pasvraag__groep + .pasvraag__groep { padding-left: clamp(1.25rem, 2.6vw, 2.25rem); padding-right: 0; border-left: 1px solid var(--lijn-sterk); }
.pasvraag__groep > legend { float: left; width: 100%; margin: 0; padding: 0; font-size: 1.1875rem; font-weight: 600; letter-spacing: -.02em; }
.pasvraag__groep > legend + * { clear: both; }
.pasvraag__aantal { margin: 0; padding: 0; border: 0; min-width: 0; }
.pasvraag__aantal legend { padding: 0; margin-bottom: .375rem; font-size: .9062rem; font-weight: 600; }
.pasvraag__aantal .keuze { padding: .75rem 1rem; }
.pasvraag__slot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 1.5rem; }
.pasvraag__slot p { margin: 0; max-width: 32em; font-size: .875rem; color: var(--gedempt); }
.pasvraag__slot a { color: var(--inkt); text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: .1875rem; }
.pasvraag__form.is-verstuurd > :not(.aanvraag__klaar) { display: none; }
@media (max-width: 860px) {
  .demo__rij, .pasvraag__kop, .pasvraag__groepen { grid-template-columns: minmax(0, 1fr); }
  .pasvraag__groep, .pasvraag__groep + .pasvraag__groep { padding-inline: 0; border-left: 0; }
  .pasvraag__groep + .pasvraag__groep { border-top: 1px solid var(--lijn-sterk); }
}