/*
  MandarAIn - css/site.css (site v5, bouwronde 1: herontwerp van de
  homepage, Route Statisch)

  Voor de drie pagina's in live/: index.html, privacyverklaring.html en
  algemene-voorwaarden.html. Ontwerpwaarden komen uit tokens.css via
  var(--...); dit bestand bevat geen losse kleurwaarden (transparent en
  currentColor zijn sleutelwoorden). Letterlijk blijven alleen structurele
  waarden (0, procenten, fr, draaihoeken, de maten van pijltjes en
  aanraakdoelen) en de breakpoints, omdat custom properties niet in
  mediaqueries werken: 30em (lage vensterhoogte), 48em (tablet) en 64em
  (breed: menu in de kop, twee kolommen).

  v5: dezelfde huisstijl, strakker en meer app-achtig. Kaarten hebben een
  rand van 1 px (--rand) en een afronding van 12 px; schaduw staat alleen
  op schermbeelden. Oranje staat alleen op de hoofdknop (.knop), de
  stempel, het akkoordvinkje in een schema en de nadruk in de h1. Geen
  animatie bij het laden of scrollen; alleen knoppen en bediening wisselen
  van kleur bij hover, en alleen zonder voorkeur voor minder beweging.
  Vervallen in v5: de opening met het woordmerk, de omslag van het dossier
  in de hero met zijn demo-animatie, de dienstblokken met illustraties, de
  regels met fictieve voorbeelden, het uitklapmenu Diensten, de
  paginaovergang, het tekenen van het schemapad en de onderdelen van de
  pagina's die niet in live/ staan (deel 3 en "TIJDELIJK" van v4).

  Opbouw:
  1. GEDEELD: lettertype, basis, skiplink, kop met menu, knoppen,
     stempel, kaartbasis, footer.
  2. JURIDISCHE PAGINA'S: paginakop en het sectieraster met kantlijn.
  3. HOME: held, strook, demo's, video, prijzen, tijdlijn, gegevensroute,
     vragen, wie je spreekt en contact.
  4. BEWEGING EN AFDRUKKEN.

  Werkt zonder JavaScript: alle inhoud staat er. Alleen onder
  .is-schakelbaar (gezet door js/site.js) verbergt de schakelaar een
  schema.
*/

/* =====================================================================
   1. GEDEELD
   ===================================================================== */

/* ---------- Lettertype: de drie bestanden in ../fonts/ ---------- */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/AtkinsonHyperlegibleNext-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/AtkinsonHyperlegibleNext-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/AtkinsonHyperlegibleNext-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Basis ---------- */

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

/* Ankers, de skiplink en de toetsenbordfocus blijven vrij van de vaste kop
   (WCAG 2.4.11). De achtergrond staat op html, zodat het hele venster de
   kleur van het thema heeft. */
html {
  scroll-padding-top: calc(var(--kop-hoogte) + var(--ruimte-s));
  background-color: var(--achtergrond);
}

body {
  margin: 0;
  font-family: var(--lettertype-familie);
  font-size: var(--grootte-basis);
  font-weight: var(--gewicht-normaal);
  line-height: var(--regel-tekst);
  color: var(--tekst);
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--ruimte-s);
  line-height: var(--regel-kop);
  letter-spacing: var(--spatie-kop);
  overflow-wrap: break-word;
  text-wrap: balance;
}

h1 {
  font-size: var(--grootte-kop-1);
  font-weight: var(--gewicht-extravet);
}

h2 {
  font-size: var(--grootte-kop-2);
  font-weight: var(--gewicht-extravet);
}

h3,
h4 {
  font-size: var(--grootte-kop-3);
  font-weight: var(--gewicht-halfvet);
  line-height: var(--regel-kort);
  letter-spacing: var(--spatie-kop-klein);
}

p,
ul,
ol,
dl {
  margin: 0 0 var(--ruimte-tekst);
}

main p,
main li {
  max-width: var(--breedte-tekst);
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Links: inkt met onderstreping. Bij hover wordt de lijn dikker. */
a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 0.14em;
}

/* Nadruk in de h1: één woordgroep in oranje, alleen op --achtergrond
   (4,83 in licht, 8,21 in donker; berekend, niet gemeten). */
.nadruk {
  font-style: normal;
  color: var(--actie);
}

/* Focus: een ring in inkt, met afstand. */
:focus-visible {
  outline: var(--focus-dikte) solid var(--focus);
  outline-offset: var(--focus-afstand);
}

.container {
  width: min(100% - 2rem, var(--breedte-pagina));
  margin-inline: auto;
}

@media (min-width: 48em) {
  .container {
    width: min(100% - 4rem, var(--breedte-pagina));
  }
}

/* Kop en footer: brede binnenmaat, met een kleine zijmarge. Na
   .container, zodat deze breedte wint. */
.kop__binnen,
.site-footer__binnen {
  width: min(100% - 2rem, var(--breedte-breed));
}

@media (min-width: 48em) {
  .kop__binnen,
  .site-footer__binnen {
    width: min(100% - 3rem, var(--breedte-breed));
  }
}

/* Onzichtbaar op het scherm, wel voorgelezen door schermlezers */
.visueel-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lijst met opsommingstekens in gewone tekst */
.lijst {
  padding-left: 1.25rem;
}

.lijst li + li {
  margin-top: var(--ruimte-xs);
}

.lijst li::marker {
  color: var(--link);
}

/* ---------- Skiplink ---------- */

.skiplink {
  position: absolute;
  top: var(--ruimte-xs);
  left: var(--ruimte-xs);
  z-index: var(--laag-skiplink);
  padding: var(--ruimte-s) var(--ruimte-tekst);
  border-radius: var(--radius);
  background-color: var(--tekst);
  color: var(--achtergrond);
  font-weight: var(--gewicht-halfvet);
  transform: translateY(-200%);
}

.skiplink:focus {
  transform: none;
}

/* ---------- Kop ---------- */

/* Compact en sticky: dekkend, met één zachte lijn eronder. Geen glas en
   geen schaduw; met en zonder JavaScript gelijk. */
.kop {
  position: sticky;
  top: 0;
  z-index: var(--laag-kop);
  border-bottom: var(--lijn-dun) solid var(--rand);
  background-color: var(--achtergrond);
}

/* Geen gap: onder 64em is de nav (met het gesloten popover-paneel) leeg en
   zou een gap de knop Menu van de rand afduwen. */
.kop__binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: var(--kop-hoogte);
}

/* Woordmerk: tekst; "AI" is de enige span erin en krijgt de merkkleur. */
.woordmerk {
  display: inline-block;
  font-size: var(--woordmerk-grootte);
  font-weight: var(--gewicht-extravet);
  line-height: var(--regel-kort);
  letter-spacing: var(--woordmerk-spatie);
  color: var(--woordmerk);
  text-decoration: none;
}

.woordmerk > span {
  color: var(--woordmerk-ai);
}

.kop .woordmerk {
  margin-right: auto;
  padding-block: var(--ruimte-2xs);
}

.kop .woordmerk:hover {
  text-decoration: underline;
}

/* Knop "Menu" (onder 64em). Aanraakdoel minimaal 44 px. */
.kop__menuknop,
.hoofdnav__sluit {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-xs);
  min-height: 2.75rem;
  padding: var(--ruimte-xs) var(--ruimte-tekst);
  border: var(--lijn-dun) solid var(--lijn);
  border-radius: var(--radius-knop);
  background-color: transparent;
  color: var(--tekst);
  font: inherit;
  font-weight: var(--gewicht-halfvet);
  line-height: var(--regel-kort);
  cursor: pointer;
}

.kop__menuknop {
  margin-left: var(--ruimte-s);
}

.kop__menuknop:hover,
.hoofdnav__sluit:hover {
  border-color: var(--tekst);
}

.kop__menuicoon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Eén menu in de HTML. Basis: een gewone lijst (ook de terugval zonder
   Popover-API). De regels hieronder heffen de standaardopmaak van een
   popover op; onder 64em toont de browser het paneel pas als het open is. */
.hoofdnav__paneel {
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  background-color: transparent;
  color: inherit;
}

.hoofdnav__sluit {
  display: none;
}

.hoofdnav__lijst {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hoofdnav__link {
  display: block;
  padding: var(--ruimte-xs) var(--ruimte-s);
  border-radius: var(--radius-knop);
  color: var(--tekst);
  font-weight: var(--gewicht-halfvet);
  line-height: 1.5;
  text-decoration: none;
}

.hoofdnav__link:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

/* Huidige pagina: dikke onderstreping in inkt; geen kleurverschil */
.hoofdnav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.4em;
}

/* Knop "Mail je vraag" in de kop: met een rand, niet oranje */
.kop__mailknop {
  min-height: 2.75rem;
  padding-block: var(--ruimte-xs);
}

/* Onder 64em, met Popover-API: het menu opent over het hele scherm */
@media (max-width: 63.99em) {
  .hoofdnav__paneel:popover-open {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ruimte-m);
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: var(--ruimte-m) 1rem var(--ruimte-l);
    overflow-y: auto;
    background-color: var(--achtergrond);
    color: var(--tekst);
  }

  .hoofdnav__paneel:popover-open .hoofdnav__sluit {
    display: inline-flex;
    align-self: flex-end;
  }

  .hoofdnav__paneel:popover-open .hoofdnav__lijst > li {
    border-bottom: var(--lijn-dun) solid var(--rand);
  }

  .hoofdnav__paneel:popover-open .hoofdnav__link {
    padding: var(--ruimte-s) var(--ruimte-xs);
    border-radius: 0;
    font-size: var(--grootte-kop-3);
    font-weight: var(--gewicht-extravet);
  }

  .hoofdnav__paneel:popover-open .hoofdnav__link:hover {
    background-color: var(--vlak);
  }

  .hoofdnav__paneel:popover-open .kop__mailknop {
    margin-top: auto;
    width: 100%;
  }
}

/* De pagina scrolt niet mee terwijl het mobiele menu open is */
html:has(.hoofdnav__paneel:popover-open) {
  overflow: hidden;
}

/* Zonder Popover-API: geen knop Menu; de lijst staat gewoon in de kop */
@supports not selector(:popover-open) {
  .kop__menuknop {
    display: none;
  }

  .hoofdnav {
    flex-basis: 100%;
  }

  .hoofdnav__lijst {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--ruimte-2xs);
  }

  .hoofdnav__paneel .kop__mailknop {
    margin-bottom: var(--ruimte-s);
  }
}

/* Vanaf 64em: het menu staat in de kop */
@media (min-width: 64em) {
  .kop__menuknop {
    display: none;
  }

  .hoofdnav {
    flex-basis: auto;
    margin-left: var(--ruimte-m);
  }

  .hoofdnav__paneel {
    display: flex;
    align-items: center;
    gap: var(--ruimte-m);
  }

  .hoofdnav__lijst {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--ruimte-2xs);
  }

  .hoofdnav__paneel .kop__mailknop {
    margin-bottom: 0;
  }
}

/* Lage vensters (liggend scherm, zoom 400 %): de kop blijft niet staan */
@media (max-height: 30em) {
  .kop {
    position: relative;
    top: 0;
  }

  html {
    scroll-padding-top: 0;
  }
}

/* ---------- Knoppen ---------- */

/* Links met knopopmaak. Aanraakdoel minimaal 48 px hoog. De hoofdknop is
   het enige oranje vlak. De rand heeft de kleur van de knop, zodat de knop
   in het Contrastthema een omlijning houdt. Bij hover wisselt alleen de
   kleur. */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: var(--ruimte-s) var(--ruimte-m);
  border: var(--lijn-dun) solid var(--actie);
  border-radius: var(--radius-knop);
  background-color: var(--actie);
  color: var(--actie-tekst);
  font-weight: var(--gewicht-halfvet);
  line-height: var(--regel-kort);
  text-align: center;
  text-decoration: none;
}

.knop:hover {
  border-color: var(--actie-hover);
  background-color: var(--actie-hover);
}

/* Tweede knop, en de mailknop in de kop: een rand, geen vulling */
.knop--rand,
.knop--rand:hover {
  background-color: transparent;
  color: var(--tekst);
}

.knop--rand {
  border-color: var(--lijn);
}

.knop--rand:hover {
  border-color: var(--tekst);
}

.knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-s);
  max-width: none;
}

/* ---------- Stempel ---------- */

/* Het signatuurelement: een rechthoekige kantoorstempel met het
   mandarijn-icoon. De vormen staan één keer per pagina in een sprite direct
   na <body>; elk gebruik is <svg><use href="#stempel"/></svg>, decoratief
   (aria-hidden).
   - De sprite heeft width="0" height="0" en geen display: none, omdat
     maskers in een verborgen SVG niet in elke browser werken.
   - Kleur: de sprite tekent met currentColor; .stempel zet --actie. Alleen
     op --achtergrond of --kaart (oranje als tekst: 4,83 en 5,18 in licht).
     Bij afdrukken inkt. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.stempel {
  display: block;
  width: min(100%, var(--breedte-stempel));
  height: auto;
  color: var(--actie);
  transform: rotate(-4deg);
}

/* De twee tekstregels in de sprite, in eenheden van de viewBox (264 bij
   96). textLength in de SVG houdt de eerste regel binnen de rand als het
   weblettertype nog niet geladen is. */
.stempel__tekst {
  font-size: 18px;
  font-weight: var(--gewicht-extravet);
  letter-spacing: 0.12em;
}

/* ---------- Kaart (basis) ---------- */

/* Rand van 1 px, afronding van 12 px, geen schaduw. */
.kaart {
  padding: var(--ruimte-m);
  border: var(--lijn-dun) solid var(--rand);
  border-radius: var(--radius-kaart);
  background-color: var(--kaart);
}

.kaart > :last-child {
  margin-bottom: 0;
}

@media (min-width: 48em) {
  .kaart {
    padding: 2rem;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  padding-block: var(--ruimte-xl) var(--ruimte-m);
  border-top: var(--lijn-dun) solid var(--rand);
  background-color: var(--vlak);
}

.site-footer__raster {
  display: grid;
  gap: var(--ruimte-l);
}

.site-footer p {
  margin-bottom: var(--ruimte-xs);
}

.site-footer .woordmerk {
  display: block;
}

.site-footer__tekst {
  max-width: 24rem;
  color: var(--tekst-zacht);
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--ruimte-m) var(--ruimte-l);
}

.site-footer__kop {
  margin: 0 0 var(--ruimte-xs);
  font-size: var(--grootte-klein);
  font-weight: var(--gewicht-halfvet);
  line-height: var(--regel-kort);
  letter-spacing: normal;
  color: var(--tekst-zacht);
}

.site-footer__lijst {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Aanraakdoel circa 34 px hoog */
.site-footer__lijst a {
  display: inline-block;
  padding-block: 0.375rem;
  line-height: var(--regel-kort);
  text-decoration: none;
}

.site-footer__lijst a:hover {
  text-decoration: underline;
}

.site-footer__onder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ruimte-xs) var(--ruimte-m);
  margin-top: var(--ruimte-l);
  padding-top: var(--ruimte-m);
  border-top: var(--lijn-dun) solid var(--lijn);
  font-size: var(--grootte-klein);
  color: var(--tekst-zacht);
}

.site-footer__gegevens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2xs) var(--ruimte-m);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-wrap: anywhere;
}

.site-footer__gegevens a {
  display: inline-block;
  padding-block: var(--ruimte-2xs);
}

.site-footer .site-footer__copy {
  margin: 0;
}

@media (min-width: 64em) {
  .site-footer__raster {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }
}

/* =====================================================================
   2. JURIDISCHE PAGINA'S (privacyverklaring, algemene voorwaarden)
   ===================================================================== */

.paginakop {
  padding-block: var(--ruimte-l) var(--ruimte-xl);
}

.paginakop__tekst {
  max-width: var(--breedte-paginakop);
}

.paginakop__tekst > :last-child {
  margin-bottom: 0;
}

.paginakop h1 {
  margin-bottom: var(--ruimte-tekst);
}

.paginakop__intro {
  font-size: var(--grootte-intro);
  color: var(--tekst-zacht);
}

.paginakop__versie {
  font-size: var(--grootte-klein);
  color: var(--tekst-zacht);
}

/* Het sectieraster: elke sectie begint met een lijn van 2px in inkt. Vanaf
   64em staat de h2 in de kantlijn links en de inhoud rechts ervan. */
.sectie {
  padding-bottom: var(--ruimte-sectie);
}

.sectie > .container {
  padding-top: var(--ruimte-m);
  border-top: var(--lijn-dik) solid var(--tekst);
}

.sectie__kop {
  margin-bottom: var(--ruimte-m);
}

.sectie__kop > :last-child {
  margin-bottom: 0;
}

@media (min-width: 64em) {
  .paginakop {
    padding-block: var(--ruimte-l) 5rem;
  }

  .sectie > .container {
    display: grid;
    grid-template-columns: var(--kantlijn) minmax(0, 1fr);
    column-gap: var(--ruimte-l);
    align-items: start;
  }

  .sectie > .container > * {
    grid-column: 1 / -1;
  }

  /* De kop beslaat twaalf rijen, zodat zijn hoogte de eerste rij van de
     inhoud niet oprekt. */
  .sectie > .container > .sectie__kop {
    grid-column: 1;
    grid-row: span 12;
    margin-bottom: 0;
  }

  .sectie > .container > .sectie__kop ~ * {
    grid-column: 2;
  }

  .sectie__kop > h2 {
    font-size: var(--grootte-kop-kantlijn);
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

/* =====================================================================
   3. HOME
   ===================================================================== */

/* ---------- Secties op home ---------- */

/* Ruime witruimte, geen lijnen tussen de secties. De kop en de intro
   staan boven de inhoud, met een korte regellengte. */
.deel {
  padding-block: var(--ruimte-sectie);
}

.deel + .deel {
  padding-top: 0;
}

.deel__kop {
  max-width: var(--breedte-kop-deel);
  margin-bottom: var(--ruimte-l);
}

.deel__kop > :last-child {
  margin-bottom: 0;
}

.deel__intro {
  font-size: var(--grootte-intro);
  color: var(--tekst-zacht);
}

.deel__slot {
  margin: var(--ruimte-l) 0 0;
  font-size: var(--grootte-intro);
}

/* ---------- Held ---------- */

/* Twee kolommen vanaf 64em: links de tekst, rechts het offertescherm in
   een vensterframe, met de stempel over de linkeronderhoek. Daaronder één
   kolom, tekst eerst. */
.held {
  padding-block: var(--ruimte-l) var(--ruimte-sectie);
}

.held__raster {
  display: grid;
  gap: var(--ruimte-l);
  align-items: center;
}

.held h1 {
  max-width: var(--breedte-kop-held);
  margin-bottom: var(--ruimte-tekst);
}

.held__regel {
  font-size: var(--grootte-intro);
  color: var(--tekst-zacht);
}

.held__knoppen {
  margin: var(--ruimte-m) 0;
}

.held__prijs {
  margin: 0;
  font-size: var(--grootte-klein);
  color: var(--tekst-zacht);
}

/* Ruimte onder het beeld voor het deel van de stempel dat eronder uitsteekt */
.held__beeld {
  position: relative;
  margin-bottom: var(--ruimte-l);
}

/* De stempel ligt op een eigen vlak in --achtergrond, zodat de oranje
   tekst nooit op het schermbeeld staat. Het vlak draait mee met de
   stempel. Decoratief. */
.held__stempel {
  position: absolute;
  bottom: calc(-1 * var(--ruimte-l));
  left: var(--ruimte-s);
  z-index: var(--laag-stempel);
  width: var(--breedte-stempel-held);
  padding: var(--ruimte-2xs);
  border-radius: var(--radius-knop);
  background-color: var(--achtergrond);
  transform: rotate(-4deg);
}

.held__stempel .stempel {
  width: 100%;
  transform: none;
}

@media (min-width: 64em) {
  .held {
    padding-top: var(--ruimte-xl);
  }

  .held__raster {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--ruimte-xl);
  }

  .held__stempel {
    left: calc(-1 * var(--ruimte-m));
  }
}

/* ---------- Schermbeeld in een vensterframe ---------- */

/* Een echt schermbeeld van een demo: bovenaan een balk met drie stippen
   (decoratief) en het label "Echte demo · fictieve gegevens", daaronder
   het beeld als link naar de @2x-versie. Alleen hier staat een schaduw.
   Geen overflow: hidden, zodat de focusring van de link zichtbaar blijft;
   het beeld krijgt zelf de afronding onderaan. */
.scherm {
  margin: 0;
  border: var(--lijn-dun) solid var(--rand);
  border-radius: var(--radius-kaart);
  background-color: var(--kaart);
  box-shadow: var(--schaduw-beeld);
}

.scherm__balk {
  display: flex;
  align-items: center;
  gap: var(--ruimte-s);
  min-height: 2.25rem;
  padding: var(--ruimte-2xs) var(--ruimte-s);
  border-bottom: var(--lijn-dun) solid var(--rand);
  font-size: var(--grootte-klein);
  line-height: var(--regel-kort);
  color: var(--tekst-zacht);
}

/* Drie stippen van een venster: één element met twee schaduwkopieën */
.scherm__balk::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 1.75rem;
  border-radius: 50%;
  background-color: var(--rand);
  box-shadow:
    0.875rem 0 0 var(--rand),
    1.75rem 0 0 var(--rand);
}

.scherm__link {
  display: block;
  border-radius: 0 0 var(--radius-kaart) var(--radius-kaart);
}

.scherm__link img {
  width: 100%;
  border-radius: 0 0 calc(var(--radius-kaart) - var(--lijn-dun)) calc(var(--radius-kaart) - var(--lijn-dun));
}

/* ---------- Strook met drie feiten ---------- */

.strook {
  padding-block: var(--ruimte-l);
  border-block: var(--lijn-dun) solid var(--rand);
}

.strook__lijst {
  display: grid;
  gap: var(--ruimte-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.strook__lijst > li {
  max-width: none;
}

.strook__kop {
  margin: 0 0 var(--ruimte-2xs);
  font-weight: var(--gewicht-extravet);
  line-height: var(--regel-kort);
}

.strook__tekst {
  margin: 0;
  font-size: var(--grootte-klein);
  color: var(--tekst-zacht);
}

@media (min-width: 48em) {
  .strook__lijst {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ruimte-l);
  }
}

/* ---------- Demo's ---------- */

.demo + .demo {
  margin-top: var(--ruimte-sectie);
}

.demo__kop {
  max-width: var(--breedte-kop-deel);
  margin-bottom: var(--ruimte-m);
}

.demo__kop > :last-child {
  margin-bottom: 0;
}

.demo__soort {
  margin: 0 0 var(--ruimte-2xs);
  font-size: var(--grootte-klein);
  font-weight: var(--gewicht-halfvet);
  color: var(--tekst-zacht);
}

.demo__kop h3 {
  font-size: var(--grootte-kop-2);
  font-weight: var(--gewicht-extravet);
  line-height: var(--regel-kop);
  letter-spacing: var(--spatie-kop);
}

.demo__kop p:last-child {
  color: var(--tekst-zacht);
}

/* De stappen van de offertedemo: per stap links de tekst en rechts het
   beeld (vanaf 64em), met een nummer uit een CSS-counter. De tweede
   content-regel geeft lege alternatieve tekst: de <ol> nummert al. */
.demostappen {
  display: grid;
  gap: var(--ruimte-m);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: demostap;
}

.demostap {
  display: grid;
  gap: var(--ruimte-m);
  max-width: none;
  counter-increment: demostap;
}

.demostap__tekst::before {
  content: counter(demostap);
  content: counter(demostap) / "";
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--maat-nummer);
  height: var(--maat-nummer);
  margin-bottom: var(--ruimte-s);
  border: var(--lijn-dun) solid var(--tekst);
  border-radius: 50%;
  font-size: var(--grootte-klein);
  font-weight: var(--gewicht-extravet);
  line-height: 1;
}

.demostap__tekst > :last-child {
  margin-bottom: 0;
}

.demostap__tekst p {
  color: var(--tekst-zacht);
}

/* Twee beelden naast elkaar in stap 3 (vanaf 48em) */
.demostap__beelden {
  display: grid;
  gap: var(--ruimte-m);
  align-items: start;
}

@media (min-width: 48em) {
  .demostap__beelden {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .demostappen {
    gap: var(--ruimte-xl);
  }

  .demostap {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--ruimte-xl);
    align-items: center;
  }
}

/* De aanvraag in stap 1: gewone tekst in een kaart, geen beeld */
.mailkaart {
  margin: 0;
}

.mailkaart__kop {
  margin: 0 0 var(--ruimte-tekst);
  padding-bottom: var(--ruimte-s);
  border-bottom: var(--lijn-dun) solid var(--rand);
  font-size: var(--grootte-klein);
  color: var(--tekst-zacht);
}

.mailkaart__onderwerp {
  display: block;
  font-size: var(--grootte-basis);
  font-weight: var(--gewicht-halfvet);
  color: var(--tekst);
}

.mailkaart__tekst > :last-child {
  margin-bottom: 0;
}

/* De meetzin: een kaart op het vlak */
.meting {
  max-width: none;
  margin: var(--ruimte-l) 0 0;
  padding: var(--ruimte-m);
  border: var(--lijn-dun) solid var(--rand);
  border-radius: var(--radius-kaart);
  background-color: var(--vlak);
  font-weight: var(--gewicht-halfvet);
}

/* De mailagent: tekst en schermbeeld naast elkaar vanaf 64em */
.demo__raster {
  display: grid;
  gap: var(--ruimte-m);
}

.demo__tekst > :last-child {
  margin-bottom: 0;
}

.demo__tekst > p:not(.meting) {
  color: var(--tekst-zacht);
}

@media (min-width: 64em) {
  .demo__raster {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--ruimte-xl);
    align-items: center;
  }
}

/* ---------- Video ---------- */

/* Geen autoplay en geen herhaling (in de HTML). De achtergrond is het vlak:
   die zie je naast de poster als de verhoudingen verschillen. */
.video {
  margin: var(--ruimte-l) 0 0;
}

.video__speler {
  width: 100%;
  border: var(--lijn-dun) solid var(--rand);
  border-radius: var(--radius-kaart);
  background-color: var(--vlak);
  box-shadow: var(--schaduw-beeld);
}

.video__bijschrift {
  margin-top: var(--ruimte-s);
  font-size: var(--grootte-klein);
  color: var(--tekst-zacht);
}

.video + .faq {
  margin-top: var(--ruimte-m);
}

/* ---------- Prijzen ---------- */

.prijskaarten {
  display: grid;
  gap: var(--ruimte-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.prijskaarten > li {
  max-width: none;
}

.prijskaart {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.prijskaart h3 {
  margin-bottom: var(--ruimte-2xs);
}

.prijskaart__bedrag {
  margin-bottom: var(--ruimte-tekst);
  font-size: var(--grootte-prijs);
  font-weight: var(--gewicht-extravet);
  line-height: var(--regel-kop);
  letter-spacing: var(--spatie-kop);
}

.prijskaart__btw {
  font-size: var(--grootte-klein);
  color: var(--tekst-zacht);
}

/* De knop staat onderaan de kaart, ook bij verschillende tekstlengtes */
.prijskaart__actie {
  margin: auto 0 0;
  padding-top: var(--ruimte-s);
}

.prijzen__noot {
  margin: var(--ruimte-m) 0 0;
  color: var(--tekst-zacht);
}

@media (min-width: 48em) {
  .prijskaarten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Werkwijze als tijdlijn ---------- */

/* Vijf akkoordmomenten. Onder 64em verticaal, met een lijn links langs de
   nummers; vanaf 64em horizontaal, met een lijn bovenlangs. Het nummer
   komt uit een CSS-counter met lege alternatieve tekst; de lijn is
   decoratief. */
.tijdlijn {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: moment;
}

.tijdlijn > li {
  position: relative;
  max-width: none;
  padding: 0 0 var(--ruimte-m) calc(var(--maat-nummer) + var(--ruimte-tekst));
  counter-increment: moment;
}

.tijdlijn > li::before {
  content: counter(moment);
  content: counter(moment) / "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--maat-nummer);
  height: var(--maat-nummer);
  border: var(--lijn-dun) solid var(--tekst);
  border-radius: 50%;
  background-color: var(--achtergrond);
  font-size: var(--grootte-klein);
  font-weight: var(--gewicht-extravet);
  line-height: 1;
}

.tijdlijn > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: var(--maat-nummer);
  bottom: 0;
  left: calc(var(--maat-nummer) / 2);
  border-left: var(--lijn-dun) solid var(--rand);
}

.tijdlijn__titel {
  margin: 0.25rem 0 var(--ruimte-2xs);
}

.tijdlijn__akkoord {
  margin: 0;
  color: var(--tekst-zacht);
}

@media (min-width: 64em) {
  .tijdlijn {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--ruimte-m);
  }

  .tijdlijn > li {
    padding: calc(var(--maat-nummer) + var(--ruimte-s)) 0 0;
  }

  .tijdlijn > li:not(:last-child)::after {
    top: calc(var(--maat-nummer) / 2);
    right: calc(-1 * var(--ruimte-m));
    bottom: auto;
    left: var(--maat-nummer);
    border-top: var(--lijn-dun) solid var(--rand);
    border-left: 0;
  }

  .tijdlijn__titel {
    margin-top: 0;
  }

  .tijdlijn__akkoord {
    font-size: var(--grootte-klein);
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

/* ---------- Gegevensroute: schakelaar en schema's ---------- */

/* Zonder JavaScript of zonder :has() blijft de schakelaar verborgen
   (hidden) en staan beide schema's onder elkaar. js/site.js haalt hidden
   weg en zet daarna .is-schakelbaar; pas dan verbergt de CSS het niet-
   gekozen schema, en alleen op het scherm. Beide schema's staan dan in
   dezelfde rastercel; het niet-gekozen schema krijgt visibility: hidden,
   zodat de hoogte niet verspringt. De gekozen route is omgekeerd
   (achtergrond op inkt) en heeft een vinkje. Geen oranje. */
.schakelaar {
  min-inline-size: 0;
  margin: 0 0 var(--ruimte-m);
  padding: 0;
  border: 0;
}

.schakelaar__legenda {
  margin-bottom: var(--ruimte-xs);
  padding: 0;
  font-weight: var(--gewicht-halfvet);
}

.schakelaar__opties {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2xs);
  padding: var(--ruimte-2xs);
  border: var(--lijn-dun) solid var(--lijn);
  border-radius: var(--radius-knop);
}

.schakelaar__optie {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-xs);
  min-height: 2.75rem;
  padding: var(--ruimte-xs) var(--ruimte-m) var(--ruimte-xs) var(--ruimte-tekst);
  border-radius: calc(var(--radius-knop) - var(--ruimte-2xs));
  color: var(--tekst);
  font-weight: var(--gewicht-halfvet);
  line-height: var(--regel-kort);
  cursor: pointer;
}

/* De radioknop ligt onzichtbaar over het hele label */
.schakelaar__keuze {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* Vinkje bij de gekozen route, zodat de keuze niet alleen van kleur
   afhangt */
.schakelaar__optie::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.75rem;
  margin: -0.25rem 0.125rem 0 0.25rem;
  border-right: 2px solid var(--achtergrond);
  border-bottom: 2px solid var(--achtergrond);
  transform: rotate(45deg);
  visibility: hidden;
}

.schakelaar__optie:hover {
  background-color: var(--vlak);
}

.schakelaar__optie:has(.schakelaar__keuze:checked) {
  background-color: var(--tekst);
  color: var(--achtergrond);
}

.schakelaar__optie:has(.schakelaar__keuze:checked)::before {
  visibility: visible;
}

.schakelaar__optie:has(.schakelaar__keuze:focus-visible) {
  outline: var(--focus-dikte) solid var(--focus);
  outline-offset: var(--focus-afstand);
}

.schemas {
  display: grid;
  gap: var(--ruimte-l);
}

/* Een schema: de tekening in een kader, de uitleg eronder */
.schema {
  display: grid;
  gap: var(--ruimte-m);
  margin: 0;
}

.schema__tekst > :last-child {
  margin-bottom: 0;
}

.schema__stappen {
  padding-left: 1.5rem;
}

.schema__stappen li + li {
  margin-top: var(--ruimte-xs);
}

.schema__stappen li::marker {
  color: var(--tekst);
  font-weight: var(--gewicht-halfvet);
}

.schema__legenda {
  font-size: var(--grootte-klein);
  color: var(--tekst-zacht);
}

@media screen {
  .is-schakelbaar .schemas > .schema {
    grid-area: 1 / 1;
  }

  .is-schakelbaar:has(.schakelaar__keuze[value="lokaal"]:checked) .schema--cloud,
  .is-schakelbaar:has(.schakelaar__keuze[value="cloud"]:checked) .schema--lokaal {
    visibility: hidden;
  }
}

/* De tekening van een schema: eigen inline-SVG, decoratief (aria-hidden).
   Kleur alleen via klassen; de klassen verwijzen naar de rollen en volgen
   licht en donker. Oranje staat alleen op .ill__akkoord: het vinkje bij
   "een medewerker controleert" (4,83 op --achtergrond, berekend). */
.ill {
  display: block;
  width: 100%;
  max-width: var(--breedte-schema);
  height: auto;
  border: var(--lijn-dun) solid var(--rand);
  border-radius: var(--radius-kaart);
  background-color: var(--achtergrond);
  fill: none;
  stroke: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ill .ill__vul-vlak {
  fill: var(--achtergrond);
}

.ill .ill__vul-tint {
  fill: var(--vlak);
}

.ill .ill__vul-accent {
  fill: var(--lijn);
}

.ill .ill__lijn,
.ill .ill__lijn-accent {
  stroke: var(--tekst);
}

.ill .ill__akkoord {
  stroke: var(--actie);
}

.ill .ill__grens {
  stroke: var(--tekst-zacht);
  stroke-width: 2;
  stroke-dasharray: 6 6;
}

/* Blok "De grenzen van lokaal": een kaart op het vlak */
.grenzen {
  margin-top: var(--ruimte-l);
  padding: var(--ruimte-m);
  border: var(--lijn-dun) solid var(--rand);
  border-radius: var(--radius-kaart);
  background-color: var(--vlak);
}

.grenzen > :last-child {
  margin-bottom: 0;
}

@media (min-width: 48em) {
  .grenzen {
    padding: 2rem;
  }
}

/* ---------- Uitklapbare vragen (<details>) ---------- */

/* Eén kaart met regels; een dunne lijn tussen de vragen. display: block op
   de summary, omdat flex op <summary> in oudere Safari-versies niet werkt.
   Het pijltje is decoratief. */
.faq {
  border: var(--lijn-dun) solid var(--rand);
  border-radius: var(--radius-kaart);
  background-color: var(--kaart);
}

.faq__item + .faq__item {
  border-top: var(--lijn-dun) solid var(--rand);
}

.faq__vraag {
  position: relative;
  display: block;
  padding: var(--ruimte-tekst) 3rem var(--ruimte-tekst) var(--ruimte-m);
  border-radius: var(--radius-kaart);
  font-size: var(--grootte-intro);
  font-weight: var(--gewicht-halfvet);
  line-height: var(--regel-kort);
  cursor: pointer;
  list-style: none;
}

.faq__vraag::-webkit-details-marker {
  display: none;
}

.faq__vraag::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--ruimte-m);
  width: 0.625rem;
  height: 0.625rem;
  margin-top: -0.4375rem;
  border-right: 2px solid var(--tekst);
  border-bottom: 2px solid var(--tekst);
  transform: rotate(45deg);
}

.faq__item[open] > .faq__vraag::after {
  margin-top: -0.125rem;
  transform: rotate(-135deg);
}

.faq__vraag:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.faq__antwoord {
  padding: 0 var(--ruimte-m) var(--ruimte-m);
}

.faq__antwoord > :last-child {
  margin-bottom: 0;
}

/* De ondertitels van de video als genummerde lijst */
.ondertitels {
  padding-left: 1.5rem;
}

.ondertitels li + li {
  margin-top: var(--ruimte-2xs);
}

/* ---------- Wie je spreekt en contact ---------- */

.over > :last-child {
  margin-bottom: 0;
}

.cta {
  display: grid;
  gap: var(--ruimte-m);
}

.cta__tekst p {
  color: var(--tekst-zacht);
}

.cta__tekst > :last-child {
  margin-bottom: 0;
}

.cta__actie > * {
  margin: 0;
}

.cta__actie > * + * {
  margin-top: var(--ruimte-s);
}

.cta__alternatief {
  font-size: var(--grootte-klein);
  color: var(--tekst-zacht);
}

@media (min-width: 48em) {
  .cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ruimte-l);
  }
}

/* =====================================================================
   4. BEWEGING EN AFDRUKKEN
   ===================================================================== */

/* Alleen zonder voorkeur voor minder beweging: zacht scrollen naar een
   anker en de kleurwissel van knoppen en bediening (150 ms). Met
   prefers-reduced-motion: reduce wisselen de kleuren direct. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .knop,
  .kop__menuknop,
  .hoofdnav__sluit,
  .schakelaar__optie {
    transition:
      background-color var(--duur-kort) ease,
      border-color var(--duur-kort) ease,
      color var(--duur-kort) ease;
  }

  .faq__vraag::after {
    transition: transform var(--duur-kort) ease;
  }
}

/* Afdrukken gebruikt altijd de lichte kleurset (tokens.css). Menu, knop
   Menu en schakelaar vallen weg; beide schema's staan op papier. Oranje
   wordt inkt. Geen schaduw. */
@media print {
  .skiplink,
  .kop__menuknop,
  .hoofdnav,
  .schakelaar,
  .video {
    display: none;
  }

  .kop {
    position: static;
  }

  .nadruk {
    color: inherit;
  }

  .site-footer,
  .grenzen,
  .meting,
  .faq,
  .kaart {
    background-color: transparent;
  }

  .scherm {
    box-shadow: none;
  }

  .knop {
    border-color: var(--tekst);
    background-color: transparent;
    color: var(--tekst);
  }

  .stempel {
    color: var(--tekst);
  }

  .ill .ill__akkoord {
    stroke: var(--tekst);
  }

  .scherm,
  .demostap,
  .prijskaart,
  .schema,
  .faq__item,
  .tijdlijn > li {
    break-inside: avoid;
  }
}