/* Publieke AFS-aanvraagflow.
 *
 * Eigen stylesheet, los van monitor.css: dit is een publieke pagina voor een
 * prospect, geen dashboard voor een ingelogde collega. De kleurtokens en het font
 * zijn wel dezelfde, zodat een latere wijziging aan de huisstijl hier meekomt.
 *
 * Mobiel eerst: de basisregels gelden voor smal, de media query verruimt. Een
 * publiek formulier wordt in de praktijk vaker op een telefoon ingevuld dan op
 * een desktop, dus dat is de vertreksituatie en niet het uitzonderingsgeval.
 *
 * Kleur draagt nergens alleen de betekenis: elke gekozen of foute staat heeft
 * ook tekst of een label.
 */

:root {
  --navy: #00203f;
  --green: #a9e061;

  /* De focusring en de hoverrand: de huisstijlgroene zelf.
   *
   * Hier stond eerder #4DC98A, een teal die uit een verlopen kwam en geen
   * huisstijlkleur is. Op elke focusring en elke hoverrand van het formulier gaf
   * dat een groen dat net naast het groen van de knoppen viel. Eén groen op de
   * hele pagina, en dat is #a9e061. */
  --focus: var(--green);

  --muted: #5a7080;
  --border-soft: #d6dde3;
  --surface: #ffffff;
  --surface-2: #f0f3f5;
  --track-bg: #e4e8ec;   /* het niet-gevulde deel van een schuifregelaar */
  --text: #00203f;

  /* Het gekozen en het geslaagde: een lichte wassing van de huisstijlgroene, niet
     een ander groen. --ok-bg is #a9e061 op wit vervaagd, zodat een gekozen kaart
     als een lichtere versie van de knop leest en niet als een andere kleur. De
     tekstkleur is wel donkerder: op dat lichte vlak moet ze leesbaar blijven. */
  --ok: #3d5c14;      --ok-bg: #f2fae6;    --ok-border: #a9e061;
  --warn: #8a5a00;    --warn-bg: #fff3d6;  --warn-border: #f0c060;
  --danger: #990000;  --danger-bg: #fdecec; --danger-border: #f0c0c0;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 48px rgba(0, 32, 63, .16);

  /* ── Beweging ──────────────────────────────────────────────────────────────
   *
   * Eén set curven voor de hele pagina, zodat alles hetzelfde aanvoelt. Dat is
   * wat beweging duur maakt: niet de lengte van een animatie, maar de
   * herkenbaarheid ervan.
   *
   * --soepel is de standaardcurve van Apple: hij vertrekt vinnig en remt lang
   * af, waardoor beweging traag oogt zonder traag te zijn. Een gewone ease komt
   * daarnaast altijd wat sloom over.
   * --veer overschrijdt zijn eindwaarde licht en komt terug. Enkel voor kleine
   * dingen die reageren op een tik, nooit voor iets dat van plaats verandert.
   */
  --soepel: cubic-bezier(.32, .72, 0, 1);
  --veer: cubic-bezier(.34, 1.42, .64, 1);
  --duur-snel: .2s;
  --duur-basis: .34s;
  --duur-traag: .5s;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* De navy staat op html, niet op body.
 *
 * Het deeltjescanvas hangt op z-index -1 aan body. Een negatieve z-index zakt
 * achter de achtergrond van zijn eigen stapelcontext, dus zolang body zelf een
 * achtergrondkleur had, schilderde die de animatie gewoon toe. Body blijft
 * daarom doorzichtig en html draagt de kleur. */
html {
  background: var(--navy);

  /* De ruimte voor de schuifbalk altijd vrijhouden, ook wanneer de pagina kort
     genoeg is om er geen te hebben.

     Zonder dit verschijnt en verdwijnt de schuifbalk telkens een toestelblok
     open- of dichtklapt: de pagina wordt dan even langer dan het venster. Elke
     keer verspringt de inhoud een tiental pixels opzij, en dat is precies tijdens
     de animatie het meest storend.

     scrollbar-gutter reserveert die ruimte in plaats van de balk te verbergen, dus
     scrollen blijft gewoon werken. Browsers die het niet kennen, negeren de regel
     en gedragen zich zoals voorheen. */
  scrollbar-gutter: stable;
}

/* Tijdens het open- of dichtklappen van een paneel geen paginaschuifbalk.
 *
 * De pagina wordt dan even langer dan het venster en meteen weer korter, dus de
 * balk flitst kort in beeld. JS zet deze klasse voor de duur van de animatie, zie
 * klapPaneel().
 *
 * clip en niet hidden: overflow:hidden op het documentelement zet de
 * scrollpositie terug naar boven, en dan springt de pagina bij elke klik. clip
 * verbergt enkel de balk en laat de positie met rust. De gereserveerde ruimte van
 * scrollbar-gutter blijft staan, dus er verspringt ook niets in de breedte. */
html.afs-klapt {
  overflow-y: clip;
}

body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  background: transparent;
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Het deeltjescanvas staat fixed op z-index -1, dus achter alles. De shell zelf
   krijgt bewust geen eigen achtergrondkleur: de navy komt van body, en daartussen
   zit het canvas. Zet hier dus nooit een background op, dan verdwijnt de animatie. */
.afs-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Kop en voet ─────────────────────────────────────────────────────────── */

.afs-top {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.afs-merk { text-decoration: none; display: block; line-height: 0; }
/* De SVG is intrinsiek 2331 bij 934. Zowel de hoogte als een max-width vastzetten,
   anders duwt hij op smalle schermen de rest van de kopregel weg. */
.afs-logo {
  height: 30px;
  width: auto;
  max-width: 148px;
  display: block;
}
.afs-top-meta {
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.afs-main {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 8px 16px 48px;
}

.afs-voet {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
  color: rgba(255, 255, 255, .62);
  font-size: 13px;
}
.afs-voet-links { display: flex; gap: 18px; }
.afs-voet a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.afs-voet a:hover { text-decoration: underline; }

/* ── Flow en kaarten ─────────────────────────────────────────────────────── */

.afs-flow { width: 100%; max-width: 640px; }

.afs-kaart {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px 22px;
  box-shadow: var(--shadow);
}

/* De stapovergang.
 *
 * De kaart schuift binnen langs de kant waar hij vandaan komt, zodat de beweging
 * richting heeft. De verplaatsing blijft klein en gaat samen met een lichte
 * schaal: een kaart die van ver komt aanvliegen oogt goedkoop, een kaart die
 * nauwelijks beweegt maar wel scherpstelt, oogt duur.
 *
 * De inhoud volgt in een tweede beweging, iets later en iets korter. Dat gelaagde
 * is precies wat het verschil maakt met een doos die in zijn geheel verschijnt.
 * JS zet de klasse, zie gaNaar(). */
@keyframes afs-in-vooruit {
  from { opacity: 0; transform: translate3d(16px, 0, 0) scale(.985); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes afs-in-terug {
  from { opacity: 0; transform: translate3d(-16px, 0, 0) scale(.985); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes afs-inhoud-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.afs-stap.is-in-vooruit .afs-kaart {
  animation: afs-in-vooruit var(--duur-basis) var(--soepel) both;
}
.afs-stap.is-in-terug .afs-kaart {
  animation: afs-in-terug var(--duur-basis) var(--soepel) both;
}

/* De inhoud komt na de kaart, en de eerste elementen net iets voor de laatste.
   Meer dan een handvol trappen heeft geen zin: dan wacht de bezoeker echt. */
.afs-stap.is-in-vooruit .afs-kaart > *,
.afs-stap.is-in-terug .afs-kaart > * {
  animation: afs-inhoud-in var(--duur-snel) var(--soepel) both;
}
.afs-stap .afs-kaart > *:nth-child(1) { animation-delay: .07s; }
.afs-stap .afs-kaart > *:nth-child(2) { animation-delay: .1s; }
.afs-stap .afs-kaart > *:nth-child(3) { animation-delay: .13s; }
.afs-stap .afs-kaart > *:nth-child(4) { animation-delay: .16s; }
.afs-stap .afs-kaart > *:nth-child(n+5) { animation-delay: .18s; }

.afs-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.afs-kaart h1 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.22;
  margin-bottom: 10px;
}
.afs-kaart h1:focus { outline: none; }

/* Het lime accent in de titel: de huisstijlgroene zelf, geen afgeleide tint.
 *
 * Let wel op met deze kleur als tekst op wit. #a9e061 haalt daar 1.55 op 1, waar
 * 4.5 de norm is voor gewone tekst. In een grote, vette titel valt dat mee, maar
 * op een telefoon in fel licht wordt dit woord merkbaar bleker dan de rest. Dat
 * is hier een bewuste keuze voor de huisstijl: het accent draagt geen betekenis
 * die elders ontbreekt, dus wie het slecht ziet, mist geen informatie. */
.afs-accent {
  color: var(--green);
}

.afs-inleiding { color: var(--muted); margin-bottom: 22px; }

.afs-scheiding {
  border: 0;
  height: 1px;
  background: var(--border-soft);
  margin: 24px 0 20px;
}

/* Het blok dat na de BTW-controle openschuift.
 *
 * Zelfde beweging als een categorieblok: JS zet de hoogte tijdelijk in pixels en
 * haalt ze daarna weg, zie klapPaneel(). De inhoud vervaagt iets later, zodat er
 * niets uitgerekt oogt tijdens het openen. */
/* overflow:hidden staat er enkel tijdens het openschuiven, via .is-bezig.
 *
 * Bleef het staan, dan knipt dit paneel alles af wat buiten zijn rand valt: de
 * focusring rond de bedrijfsnaam en de schaduw onder de knop Verder werden zo
 * halverwege afgesneden. Tijdens de beweging is het wel nodig, anders puilt de
 * inhoud uit een paneel dat nog geen hoogte heeft. JS zet de klasse, zie
 * klapPaneel(). */
.afs-na-btw {
  transition: height var(--duur-basis) var(--soepel);
  /* Marges van het eerste en laatste kind mogen niet door de rand van dit paneel
     heen vallen: dan tellen ze niet mee in scrollHeight en klopt de gemeten
     doelhoogte niet, met een sprongetje na de animatie als gevolg. Een flow-root
     sluit die marges in zonder iets aan de opmaak te veranderen. Zie ook de
     toelichting bij .afs-cat-details. */
  display: flow-root;
}
/* Zelfde reden als bij .afs-cat-details: clip maakt geen scrollcontainer, dus er
   flitst geen schuifbalk tijdens het openschuiven. hidden staat eerst als
   terugval voor browsers die clip niet kennen; die overschrijft clip meteen. */
.afs-na-btw.is-bezig { overflow: hidden; overflow: clip; }
.afs-na-btw > * {
  opacity: 0;
  transform: translate3d(0, -6px, 0);
  transition: opacity var(--duur-snel) var(--soepel) .08s,
              transform var(--duur-snel) var(--soepel) .08s;
}
.afs-na-btw.is-open > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ── Voortgang ───────────────────────────────────────────────────────────── */

.afs-voortgang { margin: 0 0 16px; }
.afs-voortgang ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.afs-voortgang-stap {
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
}
.afs-voortgang-stap span,
.afs-voortgang-knop {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
}
.afs-voortgang-stap.is-gezet .afs-voortgang-knop {
  color: var(--navy);
  background: var(--green);
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.afs-voortgang-stap.is-gezet .afs-voortgang-knop:hover { filter: brightness(1.06); }
.afs-voortgang-stap.is-actief span {
  background: #fff;
  color: var(--navy);
}
.afs-voortgang-teller {
  margin-left: auto;
  font-size: 12px;
  color: rgba(255, 255, 255, .72);
  font-weight: 600;
}

/* ── Velden ──────────────────────────────────────────────────────────────── */

.afs-veld { margin-bottom: 16px; }
.afs-veld label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.afs-veld input:not([type="range"]),
.afs-veld select {
  width: 100%;
  font-family: inherit;
  font-size: 16px; /* 16px voorkomt dat iOS bij focus inzoomt */
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}
.afs-veld input:not([type="range"]):focus,
.afs-veld select:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: transparent;
}
.afs-hulp { font-size: 12px; color: var(--muted); margin-top: 5px; }


.afs-veld-rij { display: flex; gap: 12px; }

/* Invoerveld met de knop ernaast, zodat de controle bij het veld hoort. */
.afs-veld-knop { display: flex; gap: 10px; align-items: stretch; }
.afs-veld-knop input { flex: 1; }
.afs-veld-knop .afs-knop { flex-shrink: 0; white-space: nowrap; }
.afs-veld-breed { flex: 2; }
.afs-veld-smal { flex: 1; }

.afs-blok-titel { font-weight: 700; margin-bottom: 4px; }
.afs-blok-sub { font-size: 13px; color: var(--muted); margin-bottom: 14px; }

/* Honeypot: onzichtbaar voor mensen, wel invulbaar voor een bot. Niet met
   display:none, want een deel van de bots slaat verborgen velden over. */
.afs-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Meldingen ───────────────────────────────────────────────────────────── */

.afs-melding {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 16px;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
}
.afs-melding.is-ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok); }
.afs-melding.is-fout { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.afs-melding.is-let-op { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }

/* ── Knoppen, altijd pilvormig ───────────────────────────────────────────── */

/* De actieknoppen staan rechts, de weg vooruit onderaan rechts zoals in elke
   wizard. Staat er ook een Terug-knop, dan duwt die zichzelf naar links met
   margin-right:auto, zodat vooruit en achteruit uit elkaar liggen. */
.afs-acties {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
  justify-content: flex-end;
}
/* Enkel de echte Terug-knop wordt naar links geduwd, niet elke knop met deze
   vorm: op het slotscherm staan twee links naast elkaar in dezelfde stijl, en die
   horen bij elkaar te blijven. */
.afs-acties button.afs-knop-terug { margin-right: auto; }

.afs-knop {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 50px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  min-height: 44px; /* tikzone op mobiel */
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--duur-snel) var(--veer),
              box-shadow var(--duur-basis) var(--soepel),
              background var(--duur-snel) var(--soepel),
              filter var(--duur-snel) var(--soepel);
}
.afs-knop:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.afs-knop:disabled { opacity: .6; cursor: default; }
/* Indrukken mag geen vertraging hebben: dit is de bevestiging dat de tik aankwam. */
.afs-knop:active:not(:disabled) { transform: scale(.97); transition-duration: .08s; }

/* De schaduw draagt de hiërarchie: de primaire knop zweeft, de andere niet. Bij
   hover komt hij een haar omhoog in plaats van van kleur te verspringen. */
.afs-knop-primair {
  background: var(--green);
  color: var(--navy);
  box-shadow: 0 1px 2px rgba(0, 32, 63, .12), 0 6px 18px rgba(169, 224, 97, .34);
}
.afs-knop-primair:hover:not(:disabled) {
  filter: brightness(1.04);
  box-shadow: 0 2px 4px rgba(0, 32, 63, .14), 0 10px 26px rgba(169, 224, 97, .42);
  transform: translateY(-1px);
}
.afs-knop-primair:active:not(:disabled) { transform: scale(.97) translateY(0); }

.afs-knop-terug { background: transparent; color: var(--navy); border-color: var(--border-soft); }
.afs-knop-terug:hover { background: var(--surface-2); }

.afs-knop-stil { background: transparent; color: var(--muted); }
.afs-knop-stil:hover { color: var(--navy); }

/* ── Categorieblokken met accessoires eronder ────────────────────────────── */

.afs-categorieen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.afs-cat {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  /* Geen overflow:hidden: de afgeronde hoeken worden al door de kop en het paneel
     zelf gerespecteerd, en clippen knipt hier de focusring van de chips af. */
  background: var(--surface);
  transition: border-color var(--duur-snel) var(--soepel),
              background var(--duur-snel) var(--soepel),
              box-shadow var(--duur-snel) var(--soepel);
}
.afs-cat:hover { box-shadow: 0 2px 10px rgba(0, 32, 63, .07); }

/* Een gekozen categorie is groen. Dat is meteen de samenvatting: er staat geen
   aparte oplijsting van de keuze meer onder. */
.afs-cat.is-gekozen {
  border-color: var(--ok-border);
  background: var(--ok-bg);
}

.afs-cat-kop {
  width: 100%;
  font-family: inherit;
  text-align: left;
  padding: 15px 17px;
  background: transparent;
  border: 0;
  /* De kop volgt zelf de ronding van de kaart, nu die niet meer clipt. Eén pixel
     minder dan de kaart, anders piept de rand van de kaart er langs. */
  border-radius: calc(var(--radius-sm) - 1px);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  transition: background var(--duur-snel) var(--soepel), transform var(--duur-snel) var(--veer);
}
/* Staat het paneel open, dan sluit de kop er vlak op aan. */
.afs-cat.is-gekozen .afs-cat-kop {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.afs-cat-kop:hover { background: rgba(0, 32, 63, .03); }
.afs-cat-kop:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.afs-cat-kop:active { transform: scale(.99); transition-duration: .08s; }

/* Icoon in een cirkel, het patroon uit de huisstijl. Decoratief: de naam staat
   ernaast in tekst. */
.afs-cat-icoon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  transition: background var(--duur-basis) var(--soepel),
              color var(--duur-basis) var(--soepel),
              transform var(--duur-basis) var(--veer);
}
.afs-cat-icoon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
}
/* De cirkel keert om bij het kiezen: dat is de duidelijkste bevestiging op het
   scherm, dus die mag een lichte veer hebben. */
.afs-cat.is-gekozen .afs-cat-icoon {
  background: var(--navy);
  color: var(--green);
  transform: scale(1.04);
}
.afs-cat-kop:hover .afs-cat-icoon { transform: scale(1.06); }

.afs-cat-tekst { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.afs-cat-titel { font-weight: 700; font-size: 15px; }
.afs-cat-sub { font-size: 13px; color: var(--muted); }

/* Het tekstlabel naast de kleur: kleur alleen mag de staat nooit dragen. */
.afs-cat-staat {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 50px;
  background: var(--surface-2);
  color: var(--muted);
  flex-shrink: 0;
  transition: background var(--duur-snel) var(--soepel), color var(--duur-snel) var(--soepel);
}
.afs-cat.is-gekozen .afs-cat-staat {
  background: var(--green);
  color: var(--navy);
}

/* Het detailpaneel klapt open op zijn echte hoogte. JS zet die hoogte tijdelijk
   in pixels en haalt ze daarna weer weg, zie klapPaneel(). De inhoud vervaagt
   iets sneller dan het paneel beweegt, zodat er niets uitgerekt oogt tijdens het
   openen. */
/* Zelfde verhaal als bij .afs-na-btw: overflow enkel tijdens de beweging, anders
   knipt dit paneel de focusring en de schaduw van de chips erin af. */
.afs-cat-details {
  border-top: 1px solid rgba(0, 32, 63, .08);
  transition: height var(--duur-snel) var(--soepel);
}
/* overflow-y op clip en niet op hidden.
 *
 * hidden maakt van het paneel een scrollbaar element, en tijdens het openklappen
 * is de inhoud even hoger dan de ingestelde hoogte. Sommige browsers tekenen daar
 * kort een schuifbalk voor, die meteen weer verdwijnt. clip knipt even hard af
 * maar maakt geen scrollcontainer, dus die balk bestaat niet. */
.afs-cat-details.is-bezig { overflow: hidden; overflow: clip; }
.afs-cat-details > * {
  opacity: 0;
  transform: translate3d(0, -4px, 0);
  transition: opacity var(--duur-snel) var(--soepel) .04s,
              transform var(--duur-snel) var(--soepel) .04s;
}
.afs-cat.is-gekozen .afs-cat-details > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Enkel om de hoogte op te meten, zie klapPaneel().
 *
 * De inhoud staat hier even op zijn eindpositie zonder overgang, zodat
 * scrollHeight de echte hoogte teruggeeft in plaats van een paar pixels te weinig.
 * Duurt één frame en is nooit zichtbaar: de hoogte van het paneel staat op dat
 * moment nog op nul. */
.afs-cat-details.is-gemeten > *,
.afs-na-btw.is-gemeten > * {
  transform: none;
  transition: none;
}
/* De padding hoort binnen het element dat meeschuift, niet op het element dat de
   hoogte animeert: anders springt het paneel bij het sluiten. */
/* De ruimte binnen het paneel als padding, niet als marge op de kinderen.
 *
 * Dit was de laatste hapering. Een marge van een eerste of laatste kind valt door
 * de rand van zijn ouder heen wanneer die ouder geen padding of rand heeft:
 * margin collapsing. Die marge telt dan niet mee in scrollHeight, dus de gemeten
 * doelhoogte was 16 pixels te klein. Zodra de animatie klaar was en de hoogte
 * terug op auto ging, kwam die ruimte er alsnog bij, en dat is het sprongetje
 * onderaan.
 *
 * Als padding kan dat niet gebeuren: padding valt nooit door de rand heen en zit
 * altijd in scrollHeight. */
.afs-cat-details { padding: 14px 17px 16px; }

.afs-cat-veld { display: flex; flex-direction: column; gap: 5px; }
.afs-cat-veld label { font-size: 12px; font-weight: 600; color: var(--muted); }

.afs-mini-select,
.afs-mini-invoer,
.afs-mini-aantal {
  font-family: inherit;
  font-size: 16px;
  padding: 9px 11px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  min-height: 42px;
  width: 100%;
}
.afs-mini-select:focus,
.afs-mini-invoer:focus,
.afs-mini-aantal:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* ── Accessoires, als chips onder het toestel ────────────────────────────── */

.afs-acc-titel {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}
.afs-acc-lijst { display: flex; flex-wrap: wrap; gap: 8px; }

/* De chip.
 *
 * Het vinkje staat er altijd in en wordt met breedte en schaal onthuld, niet met
 * JS toegevoegd of verwijderd. Dat was de oorzaak van het flikkeren: bij elke tik
 * werd het hele blok opnieuw opgebouwd. Nu verandert enkel deze knop, en groeit
 * het vinkje open terwijl de tekst opzij schuift.
 */
.afs-acc {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--duur-snel) var(--soepel),
              border-color var(--duur-snel) var(--soepel),
              color var(--duur-snel) var(--soepel),
              transform var(--duur-snel) var(--veer),
              box-shadow var(--duur-snel) var(--soepel);
}
.afs-acc:hover { border-color: var(--focus); }
.afs-acc:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* De tik zelf: kort indrukken. Dit is het enige dat de bezoeker onmiddellijk
   voelt, dus het mag niet vertraagd zijn. */
.afs-acc:active { transform: scale(.96); transition-duration: .08s; }

/* Aangevinkt: groen én een vinkje ervoor, zodat de staat niet enkel kleur is. */
.afs-acc.is-aan {
  background: var(--green);
  border-color: var(--green);
  color: var(--navy);
  box-shadow: 0 1px 2px rgba(0, 32, 63, .1), 0 4px 12px rgba(169, 224, 97, .3);
}

.afs-acc-vink {
  display: inline-flex;
  align-items: center;
  width: 0;
  margin-right: 0;
  opacity: 0;
  transform: scale(.5);
  overflow: hidden;
  flex-shrink: 0;
  transition: width var(--duur-snel) var(--soepel),
              margin-right var(--duur-snel) var(--soepel),
              opacity .14s var(--soepel),
              transform var(--duur-snel) var(--veer);
}
.afs-acc.is-aan .afs-acc-vink {
  width: 15px;
  margin-right: 7px;
  opacity: 1;
  transform: scale(1);
}
.afs-acc-vink svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  flex-shrink: 0;
}

/* ── Prijsindicatie ──────────────────────────────────────────────────────────
 *
 * Twee blokken naast elkaar, met een lijn ertussen in plaats van twee kaders:
 * ze horen bij elkaar maar mogen niet als één bedrag lezen. Bewust geen totaal
 * eronder, het zijn twee losse contracten.
 *
 * Op een smal scherm onder elkaar, met de lijn horizontaal.
 */

.afs-prijs {
  margin: 24px 0 4px;
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
}

.afs-prijs-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.afs-prijs-bedrag {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.15;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
/* Onder het minimum staat er geen bedrag maar een uitleg. Kleiner en grijzer, want
   het is geen prijs: het zou vreemd zijn als een zin de vorm van een bedrag heeft. */
.afs-prijs-bedrag.is-onder-minimum {
  font-size: 17px;
  letter-spacing: -0.2px;
  color: var(--muted);
}

.afs-prijs-eenheid {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
  margin-top: 3px;
}

.afs-prijs-tekst {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* De gedeelde disclaimer, over de volle breedte onder beide blokken. */
.afs-prijs-klein {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
}

/* ── Samenvatting in de laatste stap ─────────────────────────────────────────
 *
 * Hier staan hardware en NXT Managed wel samen, want op dit punt heeft de
 * bezoeker beide keuzes bewust gemaakt. Nog steeds twee regels en geen opgeteld
 * bedrag: het blijven twee losse contracten.
 */

.afs-samenvatting {
  margin: 0 0 24px;
  padding: 20px 22px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.afs-samenvatting-titel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.afs-samenvatting-regel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--border-soft);
}
.afs-samenvatting-regel:first-child { border-top: 0; padding-top: 0; }

.afs-samenvatting-wat {
  font-size: 14px;
  line-height: 1.45;
  color: var(--navy);
  font-weight: 600;
}

.afs-samenvatting-bedrag {
  flex-shrink: 0;
  text-align: right;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
/* De eenheid onder het bedrag. Drie stukjes ("vanaf deze prijs, per dag, per
   medewerker") passen niet op één regel naast een bedrag, dus dit blok mag
   afbreken en houdt een eigen regelhoogte. Rechts uitgelijnd zoals het bedrag. */
.afs-samenvatting-eenheid {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--muted);
  margin-top: 3px;
  max-width: 16ch;
  margin-left: auto;
}

.afs-samenvatting .afs-prijs-klein {
  margin-top: 14px;
  padding-top: 12px;
}

/* ── Schuifregelaar, aantal medewerkers ──────────────────────────────────────
 *
 * Apple-aanpak: een dunne track waarvan het gekozen deel groen kleurt, en een
 * dikkere witte thumb die met een gelaagde schaduw boven de track lijkt te
 * zweven. Wit in plaats van groen schept afstand tussen greep en track, dat oogt
 * lichter dan een volle bol in dezelfde kleur.
 *
 * Het gevulde deel komt uit een gradient met een --fill variabele. Webkit kent
 * geen ingebouwd equivalent van ::-moz-range-progress, dus JS werkt die variabele
 * bij op elke input-event. Firefox krijgt wel het echte progress-element.
 *
 * De pseudo-elementen staan per browser apart: webkit en moz kennen elkaars
 * selectors niet, en één ongeldige selector zet een hele gedeelde regel buiten
 * werking.
 */

.afs-schuif-veld { margin-top: 22px; }
.afs-optioneel {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 50px;
  background: var(--surface-2);
}

/* De hoogte van deze rij ligt vast.
 *
 * "niet ingevuld" staat op 13px en een getal op 20px, en zonder vaste hoogte
 * groeide de rij mee zodra je de regelaar voor het eerst versleepte. Alles
 * eronder schoof dan een paar pixels op, precies op het moment dat je aan het
 * slepen bent: dat is het trillen. De rij is nu even hoog als haar hoogste
 * inhoud, ongeacht wat er in staat. */
.afs-schuif-rij {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 6px 2px;
  min-height: 44px;
}

.afs-schuif {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  width: auto;
  height: 6px;
  border: 0;
  padding: 0;
  border-radius: 50px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(
    to right,
    var(--green) 0%,
    var(--green) var(--fill, 0%),
    var(--track-bg) var(--fill, 0%),
    var(--track-bg) 100%
  );
  transition: background .1s ease;
}

/* De webkit-track expliciet opmaken. Zonder deze regel valt de browser terug op
   zijn eigen track met een eigen hoogte, en dan klopt de negatieve margin op de
   thumb niet meer: die stond in de screenshot zichtbaar boven de balk. De
   gradient staat op het input-element zelf, dus de track blijft hier
   doorzichtig. */
.afs-schuif::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 50px;
  background: transparent;
  border: 0;
}

/* Thumb, Chrome, Safari en Edge.
   margin-top centreert de thumb op de track: (trackhoogte - thumbhoogte) / 2,
   dus (6 - 26) / 2 = -10px. */
.afs-schuif::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--track-bg);
  box-shadow: 0 1px 3px rgba(0, 32, 63, .15), 0 3px 8px rgba(0, 32, 63, .12);
  cursor: grab;
  margin-top: -10px;
  transition: transform .15s cubic-bezier(.34, 1.56, .64, 1), box-shadow .15s ease;
}
.afs-schuif::-webkit-slider-thumb:hover {
  box-shadow: 0 2px 5px rgba(0, 32, 63, .18), 0 4px 12px rgba(0, 32, 63, .15);
}
.afs-schuif:active::-webkit-slider-thumb {
  transform: scale(1.15);
  cursor: grabbing;
  box-shadow: 0 2px 6px rgba(0, 32, 63, .22), 0 0 0 8px rgba(169, 224, 97, .18);
}

/* Thumb en track, Firefox. */
.afs-schuif::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--track-bg);
  box-shadow: 0 1px 3px rgba(0, 32, 63, .15), 0 3px 8px rgba(0, 32, 63, .12);
  cursor: grab;
  transition: transform .15s cubic-bezier(.34, 1.56, .64, 1);
}
.afs-schuif::-moz-range-track {
  height: 6px;
  border-radius: 50px;
  background: var(--track-bg);
}
.afs-schuif::-moz-range-progress {
  height: 6px;
  border-radius: 50px;
  background: var(--green);
}
.afs-schuif:active::-moz-range-thumb {
  transform: scale(1.15);
  cursor: grabbing;
  box-shadow: 0 2px 6px rgba(0, 32, 63, .22), 0 0 0 8px rgba(169, 224, 97, .18);
}

/* Focus op de thumb zelf, niet als kader rond de hele regelaar: dat laatste oogt
   als een fout in plaats van als aandacht. */
.afs-schuif:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(169, 224, 97, .55), 0 2px 6px rgba(0, 32, 63, .22);
}
.afs-schuif:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(169, 224, 97, .55), 0 2px 6px rgba(0, 32, 63, .22);
}

/* De waarde in cijfers: de stand van de thumb is niet de enige drager.
 *
 * Het getal tikt mee bij elke wijziging: even opschalen en terug. Dat is de
 * animatie die het cijfer levend maakt zonder achter te lopen op de duim. Een
 * optellende animatie van oud naar nieuw getal zou dat wel doen, en juist daarom
 * staat ze er niet.
 *
 * tabular-nums houdt de breedte per cijfer gelijk, anders danst het getal opzij
 * tijdens het slepen. */
@keyframes afs-getal-tik {
  0%   { transform: scale(1); }
  32%  { transform: scale(1.13); }
  100% { transform: scale(1); }
}
.afs-schuif-waarde {
  font-weight: 700;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  min-width: 104px;
  text-align: right;
  color: var(--navy);
  letter-spacing: -0.4px;

  /* Een vast regelvak, los van de lettergrootte erin. Zonder dit verspringt de
     eigen hoogte van dit element bij de sprong van 13px naar 20px, ook al ligt de
     hoogte van de rij vast. line-height in pixels en niet als factor, want een
     factor rekent net wél met de lettergrootte. */
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  height: 32px;
  line-height: 32px;

  transform-origin: right center;
  transition: color var(--duur-snel) var(--soepel), font-size var(--duur-snel) var(--soepel);
}
.afs-schuif-waarde.is-getikt {
  animation: afs-getal-tik .26s var(--soepel);
}
.afs-schuif-waarde.is-leeg {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--muted);
}

/* ── Contactvoorkeur, segmented control ──────────────────────────────────────
 *
 * Het patroon dat Apple en de meeste ontwerpsystemen gebruiken: één spoor met een
 * pil die naar de gekozen kant schuift, in plaats van twee losse knoppen met elk
 * een eigen rand. De pil is een aparte laag onder de labels, verschoven met een
 * transform, zodat de beweging vloeiend is en de tekst niet meebeweegt.
 *
 * De radioknoppen blijven bestaan maar zijn visueel weggehaald: zo werken de
 * pijltjestoetsen en een schermlezer zonder extra ARIA-werk. De gekozen staat
 * hangt niet aan kleur alleen, want de tekst wordt ook zwaarder en donkerder.
 */

.afs-voorkeur { border: 0; margin: 6px 0 20px; }
.afs-voorkeur legend {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 9px;
  padding: 0;
}

.afs-voorkeur-keuze {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* gelijke breedte per segment */
  padding: 4px;
  border-radius: 50px;
  background: var(--surface-2);
  box-shadow: inset 0 1px 3px rgba(0, 32, 63, .1);
}

/* De schuivende pil, onder de labels. */
.afs-voorkeur-keuze::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 50px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 32, 63, .2), 0 3px 10px rgba(0, 32, 63, .1);
  /* 180ms: snel genoeg om als directe reactie te voelen, traag genoeg om te zien. */
  transition: transform .18s cubic-bezier(.32, .72, 0, 1);
  z-index: 0;
}
.afs-voorkeur-keuze:has(.afs-voorkeur-optie:last-child input:checked)::before {
  transform: translateX(100%);
}

.afs-voorkeur-optie {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 12px;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: var(--muted);
  min-height: 44px;
  transition: color .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.afs-voorkeur-optie input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.afs-voorkeur-optie:has(input:checked) {
  color: var(--navy);
  font-weight: 700;
}
.afs-voorkeur-optie:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Zonder :has() valt dit terug op leesbare, niet-schuivende knoppen in plaats van
   op een onbruikbare besturing. */
@supports not selector(:has(*)) {
  .afs-voorkeur-keuze::before { display: none; }
  .afs-voorkeur-optie input { position: static; opacity: 1; width: 18px; height: 18px; margin-right: 8px; }
}

/* ── Schakelaar, pro-actief IT-beheer ────────────────────────────────────────
 *
 * De iOS-schakelaar: 51 bij 31, een witte knop van 27 die 20 pixels opschuift.
 * Onderliggend gewoon een checkbox, want dat is wat het functioneel is; zo werken
 * het toetsenbord en een schermlezer zonder extra ARIA-werk.
 *
 * De staat hangt niet aan kleur alleen: er staat "nu aan" of "nu uit" naast, dat
 * JS bijwerkt. Iemand die het kleurverschil niet ziet, leest gewoon wat er staat.
 */

.afs-schakelaar-rij { margin: 4px 0 26px; }

.afs-schakelaar {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}

/* Het spoor. Vaste maat, want een schakelaar die meeschaalt met de tekst ernaast
   oogt nooit juist. */
.afs-schakelaar-spoor {
  position: relative;
  flex-shrink: 0;
  width: 51px;
  height: 31px;
  background: var(--track-bg);
  border-radius: 50px;
  transition: background .25s cubic-bezier(.4, 0, .2, 1);
}
.afs-schakelaar-knop {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 27px;
  height: 27px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 32, 63, .25), 0 3px 8px rgba(0, 32, 63, .1);
  transition: transform .25s var(--veer), width .2s var(--soepel);
}

/* De checkbox zelf is weg uit beeld maar blijft bereikbaar voor het toetsenbord. */
.afs-schakelaar-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.afs-schakelaar-input:checked + .afs-schakelaar-spoor { background: var(--green); }
.afs-schakelaar-input:checked + .afs-schakelaar-spoor .afs-schakelaar-knop {
  transform: translateX(20px);
}
/* Ingedrukt rekt de knop een beetje uit, net als op iOS. */
.afs-schakelaar-input:active + .afs-schakelaar-spoor .afs-schakelaar-knop { width: 31px; }
.afs-schakelaar-input:focus-visible + .afs-schakelaar-spoor {
  box-shadow: 0 0 0 4px rgba(169, 224, 97, .45);
}

.afs-schakelaar-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}

/* ── Wat pro-actief beheer inhoudt ───────────────────────────────────────────
 *
 * Een opsomming met een vinkje per regel. Het vinkje is decoratief: het staat bij
 * elke regel, dus het onderscheidt niets en hoort niet in de voorleesvolgorde.
 */

.afs-beheer-lijst {
  list-style: none;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.afs-beheer-lijst li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.afs-beheer-vink {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--ok-bg);
  color: var(--ok);
  display: flex;
  align-items: center;
  justify-content: center;
}
.afs-beheer-vink svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
}
.afs-beheer-lijst strong {
  color: var(--navy);
  font-weight: 700;
}

/* De slagzin, als afsluiter onder de opsomming.
 *
 * Geen kader met een streep ernaast: die streep botste met de afgeronde hoek en
 * liet links bovenaan een gaatje open, en het bleke vlak eromheen maakte er een
 * melding van in plaats van een uitspraak. Nu draagt de tekst zichzelf, met een
 * korte lijn erboven als scheiding van de opsomming. */
.afs-slagzin {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.3px;
  color: var(--navy);
  margin: 26px 0 24px;
  padding-top: 20px;
  position: relative;
}
.afs-slagzin::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 3px;
  border-radius: 50px;
  background: var(--green);
}

/* Link naar de volledige uitleg op de website. Een tekstlink en geen knop: de
   keuze op dit scherm is de schakelaar, en een tweede knop zou daarmee
   concurreren. De pijl schuift mee bij hover, zodat het "naar buiten" leest. */
.afs-meer { margin: -8px 0 22px; }
.afs-meer a {
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 2px solid var(--green);
  padding-bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.afs-meer a:hover { border-bottom-color: var(--navy); }
.afs-meer a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.afs-meer-pijl { transition: transform var(--duur-snel) var(--soepel); }
.afs-meer a:hover .afs-meer-pijl { transform: translateX(3px); }

/* ── Akkoord ─────────────────────────────────────────────────────────────── */

.afs-akkoord {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14px;
  line-height: 1.55;
  cursor: pointer;
  margin-bottom: 8px;
}
.afs-akkoord input {
  accent-color: var(--green);
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
}
.afs-akkoord a { color: var(--navy); font-weight: 600; }

/* ── Bevestiging ─────────────────────────────────────────────────────────── */

.afs-kaart-klaar { text-align: center; }
.afs-kaart-klaar .afs-acties { justify-content: center; }

/* ── Tekstpagina, privacybeleid ──────────────────────────────────────────── */

.afs-tekst h1 { margin-bottom: 14px; }
.afs-tekst h2 {
  font-size: 17px;
  font-weight: 700;
  margin: 26px 0 8px;
}
.afs-tekst p { margin-bottom: 12px; }
.afs-tekst ul { margin: 0 0 14px 20px; }
.afs-tekst li { margin-bottom: 6px; }
.afs-tekst a { color: var(--navy); font-weight: 600; }
.afs-tekst-meta { color: var(--muted); font-size: 13px; }
.afs-terug { margin-top: 26px; }

/* ── Ruimer scherm ───────────────────────────────────────────────────────── */

@media (min-width: 620px) {
  .afs-top { padding: 22px 32px; }
  .afs-main { padding: 12px 24px 64px; }
  .afs-kaart { padding: 36px 40px; }
  .afs-kaart h1 { font-size: 30px; }
  .afs-voet { flex-direction: row; justify-content: space-between; text-align: left; }
  .afs-logo { height: 36px; max-width: 178px; }

}

/* Wie beweging liever beperkt houdt, krijgt geen vloeiend scrollen. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}