/* =====================================================================
   web. T&T — stijlblad (thema: donker en exclusief)
   ---------------------------------------------------------------------
   Dit is het enige stijlbestand van de site. Bovenaan staan alle
   kleuren, lettertypes en afstanden als "variabelen". Wilt u iets
   veranderen (bijvoorbeeld de accentkleur)? Doe dat dan alleen hier
   bovenaan, dan verandert het overal op de site tegelijk.

   Let op: controleer na het wijzigen van een kleur altijd het contrast
   (minimaal 4,5:1 voor tekst, 3:1 voor randen van invoervelden),
   bijvoorbeeld met https://webaim.org/resources/contrastchecker/
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. LETTERTYPES (zelf gehost, licentie: SIL Open Font License)
   De bestanden staan in /assets/fonts/. Er wordt niets van Google of
   een ander extern domein geladen.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2");
}


/* ---------------------------------------------------------------------
   2. VARIABELEN — verander hier kleuren, lettertypes en maten
   Tussen haakjes: contrast met de achtergrond (#0E0F12).
   --------------------------------------------------------------------- */
:root {
  /* Achtergronden */
  --kleur-bg: #0E0F12;            /* hoofdachtergrond (bijna zwart) */
  --kleur-bg-2: #15171C;          /* afwisselende secties */
  --kleur-bg-3: #1C1F26;          /* kaarten, invoervelden */

  /* Tekst */
  --kleur-tekst: #F2F0EA;         /* gebroken wit (16,8:1) */
  --kleur-tekst-zacht: #A3A6AE;   /* rustige tekst (7,9:1; op kaarten 6,8:1) */

  /* Accent: verander hier de hoofdkleur */
  --kleur-accent: #C8F560;        /* limoengroen (15,2:1) */
  --kleur-accent-tekst: #0E0F12;  /* tekst op een limoen vlak (15,2:1) */
  --kleur-gloed: rgba(200, 245, 96, 0.16);   /* zachte gloed, alleen decoratief */
  --kleur-gloed-2: rgba(38, 122, 99, 0.28);  /* tweede gloed voor diepte, decoratief */

  /* Lijnen en randen */
  --kleur-rand: #6B6F79;          /* randen van invoervelden (3,8:1; op kaarten 3,3:1) */
  --kleur-lijn: rgba(242, 240, 234, 0.1);    /* decoratieve lijnen */
  --kleur-fout: #FF8A7A;          /* foutmeldingen (8,4:1) */

  /* Lettertypes: koppen (sierlijk) en lopende tekst (goed leesbaar) */
  --font-kop: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-tekst: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Tekstgroottes (vaste typografische schaal) */
  --tekst-klein: 1rem;            /* 16px, kleinste tekst op de site */
  --tekst-basis: 1.125rem;        /* 18px, lopende tekst */
  --tekst-intro: clamp(1.1875rem, 1.1rem + 0.45vw, 1.375rem);
  --kop-4: 1.25rem;
  --kop-3: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
  --kop-2: clamp(2.375rem, 1.5rem + 3.4vw, 4.5rem);
  --kop-1: clamp(2.75rem, 1.5rem + 5vw, 6.5rem);
  --kop-hero: clamp(3rem, 1.1rem + 7.6vw, 8.75rem);

  /* Afstanden in stappen van 8px */
  --r-1: 0.5rem;   /*  8px */
  --r-2: 1rem;     /* 16px */
  --r-3: 1.5rem;   /* 24px */
  --r-4: 2rem;     /* 32px */
  --r-5: 3rem;     /* 48px */
  --r-6: 4rem;     /* 64px */
  --r-7: 6rem;     /* 96px */
  --r-8: 8rem;     /* 128px */

  /* Breedtes en vormen */
  --breedte-max: 84rem;
  --breedte-tekst: 38rem;
  --rand-pagina: clamp(1rem, 4vw, 3rem);
  --radius: 1.25rem;
  --radius-klein: 0.75rem;

  /* Beweging */
  --zacht: cubic-bezier(0.22, 1, 0.36, 1);
  --overgang: 220ms var(--zacht);
  --hoogte-kop: 4.75rem;
  --hoogte-mobiele-balk: 4rem;
  --focus-kleur: var(--kleur-accent);

  color-scheme: dark;
}


/* ---------------------------------------------------------------------
   3. BASIS
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Bewust geen "scroll-behavior: smooth": met Tab springt de focus dan direct
   in beeld, in plaats van eerst een seconde door de pagina te glijden. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hoogte-kop) + var(--r-2));
  background: var(--kleur-bg);
}

body {
  margin: 0;
  background: var(--kleur-bg);
  color: var(--kleur-tekst);
  font-family: var(--font-tekst);
  font-size: var(--tekst-basis);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Fijne korrel over de hele pagina (alleen decoratief) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background-image: url("../img/ruis.svg");
  background-size: 180px 180px;
  opacity: 0.05;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  line-height: 1.02;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

h1, h2 {
  font-family: var(--font-kop);
  letter-spacing: -0.015em;
}

h3, h4 {
  font-family: var(--font-tekst);
  font-weight: 600;
  line-height: 1.25;
}

h1 { font-size: var(--kop-1); }
h2 { font-size: var(--kop-2); }
h3 { font-size: var(--kop-3); }
h4 { font-size: var(--kop-4); }

h1 em,
h2 em {
  font-style: italic;
  color: var(--kleur-accent);
}

p, ul, ol, dl, figure, blockquote {
  margin: 0;
}

p + p {
  margin-top: var(--r-2);
}

strong {
  font-weight: 600;
}

/* Houdt een samengesteld woord (zoals Excel-sheets) op één regel */
.heel {
  white-space: nowrap;
}

/* Links: onderstreept, zodat ze niet alleen aan de kleur herkenbaar zijn */
a {
  color: var(--kleur-accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--overgang), text-decoration-thickness var(--overgang);
}

a:hover {
  color: var(--kleur-tekst);
  text-decoration-thickness: 2px;
}

/* Focusstijl: altijd zichtbaar bij toetsenbordgebruik (niet weghalen!) */
:focus-visible {
  outline: 3px solid var(--focus-kleur);
  outline-offset: 3px;
}

::selection {
  background: var(--kleur-accent);
  color: var(--kleur-accent-tekst);
}

/* Tekst die alleen voor schermlezers is bedoeld */
.visueel-verborgen {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* "Direct naar inhoud": verschijnt bij de eerste Tab-toets */
.overslaan {
  position: fixed;
  top: var(--r-1);
  left: var(--r-1);
  z-index: 100;
  padding: var(--r-1) var(--r-2);
  border-radius: 999px;
  background: var(--kleur-accent);
  color: var(--kleur-accent-tekst);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.overslaan:focus {
  transform: none;
  color: var(--kleur-accent-tekst);
}

.container {
  width: 100%;
  max-width: var(--breedte-max);
  margin-inline: auto;
  padding-inline: var(--rand-pagina);
}

/* Inhoud die tijdens een animatie buiten beeld schuift, mag geen horizontale scrollbalk geven */
main {
  display: block;
  overflow-x: clip;
}

main:focus {
  outline: none;
}

/* Voortgangsbalk bovenaan (hoe ver u op de pagina bent) */
.voortgang {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  height: 2px;
  background: var(--kleur-accent);
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll, 0));
  pointer-events: none;
}


/* ---------------------------------------------------------------------
   4. KNOPPEN EN LINKS MET PIJL
   --------------------------------------------------------------------- */
.knop {
  --mx: 0px;
  --my: 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.25rem;
  padding: 0.875rem 1.625rem;
  border: 1px solid var(--kleur-accent);
  border-radius: 999px;
  background: var(--kleur-accent);
  color: var(--kleur-accent-tekst);
  font-family: var(--font-tekst);
  font-size: var(--tekst-klein);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transform: translate(var(--mx), var(--my));
  transition: transform 300ms var(--zacht), box-shadow var(--overgang), background-color var(--overgang), color var(--overgang);
}

.knop:hover {
  color: var(--kleur-accent-tekst);
  text-decoration: none;
  box-shadow: 0 0 0 6px var(--kleur-gloed), 0 12px 40px -8px rgba(200, 245, 96, 0.45);
}

.knop svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  transition: transform 300ms var(--zacht);
}

.knop:hover svg {
  transform: translateX(4px);
}

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

.knop--rand:hover {
  color: var(--kleur-tekst);
  border-color: var(--kleur-tekst);
  box-shadow: none;
}

.knop--klein {
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
}

.knop[disabled] {
  cursor: progress;
  opacity: 0.75;
}

.knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--r-2) var(--r-4);
  margin-top: var(--r-5);
}

.pijllink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-weight: 600;
}

.pijllink svg {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 300ms var(--zacht);
}

.pijllink:hover svg {
  transform: translateX(5px);
}


/* ---------------------------------------------------------------------
   5. KOPTEKST EN MENU
   De balk blijft bovenaan. Bij omlaag scrollen schuift hij weg, bij
   terug scrollen komt hij terug.
   --------------------------------------------------------------------- */
.kop {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: transform 450ms var(--zacht), background-color 300ms ease, border-color 300ms ease;
  border-bottom: 1px solid transparent;
}

.kop.is-gescrold {
  background: rgba(14, 15, 18, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--kleur-lijn);
}

.kop.is-verborgen {
  transform: translateY(-100%);
}

.kop__balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r-3);
  min-height: var(--hoogte-kop);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--kleur-tekst);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.logo:hover {
  color: var(--kleur-tekst);
}

/* Het logo-icoon: browservenster met een W (bestand: assets/img/logo-icoon.svg) */
.logo__icoon {
  width: 2.5rem;
  height: auto;
  flex: none;
  transition: transform 500ms var(--zacht);
}

.logo:hover .logo__icoon {
  transform: rotate(-6deg) scale(1.06);
}

/* Het woord naast het icoon: stevig en rond, zoals in het logo */
.logo__woord {
  font-family: var(--font-tekst);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.035em;
}

/* De punt van "web." is altijd limoengroen */
.logo__punt {
  display: inline-block;
  color: var(--kleur-accent);
  transition: transform 400ms var(--zacht);
}

.logo:hover .logo__punt {
  transform: scale(1.5);
}

.menuknop {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--kleur-rand);
  border-radius: 999px;
  background: rgba(28, 31, 38, 0.6);
  color: var(--kleur-tekst);
  font: 600 var(--tekst-klein) / 1 var(--font-tekst);
  cursor: pointer;
}

.menuknop__icoon {
  display: grid;
  gap: 4px;
  width: 18px;
}

.menuknop__icoon span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 300ms var(--zacht), opacity 200ms ease;
}

.menuknop[aria-expanded="true"] .menuknop__icoon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menuknop[aria-expanded="true"] .menuknop__icoon span:nth-child(2) {
  opacity: 0;
}

.menuknop[aria-expanded="true"] .menuknop__icoon span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

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

.hoofdnav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--kleur-tekst);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--tekst-klein);
}

/* Lijntje onder menu-items: groeit bij aanwijzen, staat vast bij huidige pagina */
.hoofdnav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.45rem;
  height: 2px;
  border-radius: 2px;
  background: var(--kleur-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 350ms var(--zacht);
}

.hoofdnav a:hover {
  color: var(--kleur-tekst);
}

.hoofdnav a:hover::after,
.hoofdnav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.kop__cta {
  display: none;
}

/* Mobiel menu: uitklappen onder de balk */
@media (max-width: 63.99rem) {
  .hoofdnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--r-2) var(--rand-pagina) var(--r-4);
    background: rgba(14, 15, 18, 0.97);
    border-bottom: 1px solid var(--kleur-lijn);
  }

  .hoofdnav.is-open {
    display: block;
    animation: menuOpen 400ms var(--zacht);
  }

  .hoofdnav li + li {
    border-top: 1px solid var(--kleur-lijn);
  }

  .hoofdnav a {
    min-height: 3.5rem;
    font-family: var(--font-kop);
    font-weight: 400;
    font-size: 1.75rem;
  }

  .hoofdnav a::after {
    bottom: 0.6rem;
    right: auto;
    width: 2rem;
  }
}

@keyframes menuOpen {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* Zonder JavaScript: menu altijd zichtbaar, menuknop weg */
@media (max-width: 63.99rem) and (scripting: none) {
  .kop__balk {
    flex-wrap: wrap;
  }

  .menuknop {
    display: none;
  }

  .hoofdnav {
    display: block;
    position: static;
    width: 100%;
    padding: 0 0 var(--r-2);
    border: 0;
    background: none;
  }

  .hoofdnav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--r-3);
  }

  .hoofdnav li + li {
    border: 0;
  }

  .hoofdnav a {
    font-family: var(--font-tekst);
    font-weight: 600;
    font-size: var(--tekst-klein);
    min-height: 2.75rem;
  }
}

@media (min-width: 64rem) {
  .menuknop {
    display: none;
  }

  .hoofdnav ul {
    display: flex;
    gap: var(--r-4);
  }

  .kop__cta {
    display: inline-flex;
  }
}


/* ---------------------------------------------------------------------
   6. SECTIES, LABELS EN PAGINAKOPPEN
   --------------------------------------------------------------------- */
.sectie {
  position: relative;
  padding-block: clamp(5rem, 3.5rem + 6vw, 10rem);
}

.sectie--vlak {
  background: var(--kleur-bg-2);
}

/* Label boven een sectiekop, met een limoen streepje ervoor */
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--r-3);
  font-size: var(--tekst-klein);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kleur-tekst-zacht);
}

.label::before {
  content: "";
  width: 2rem;
  height: 2px;
  border-radius: 2px;
  background: var(--kleur-accent);
}

.label a {
  color: var(--kleur-tekst-zacht);
}

.label a:hover {
  color: var(--kleur-tekst);
}

.sectie__kop {
  display: grid;
  gap: var(--r-3);
  margin-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}

.sectie__kop .label {
  margin-bottom: 0;
}

.sectie__kop p:not(.label) {
  max-width: var(--breedte-tekst);
  font-size: var(--tekst-intro);
  color: var(--kleur-tekst-zacht);
}

@media (min-width: 64rem) {
  .sectie__kop--naast {
    grid-template-columns: 7fr 5fr;
    align-items: end;
    column-gap: var(--r-6);
  }

  .sectie__kop--naast .label {
    grid-column: 1 / -1;
  }
}

.intro {
  font-size: var(--tekst-intro);
  line-height: 1.6;
  color: var(--kleur-tekst-zacht);
  max-width: var(--breedte-tekst);
}

/* Paginakop van binnenpagina's, met gloed op de achtergrond */
.paginakop {
  position: relative;
  padding-block: clamp(4rem, 2.5rem + 6vw, 9rem) clamp(4rem, 2.5rem + 4vw, 7rem);
  border-bottom: 1px solid var(--kleur-lijn);
  overflow: hidden;
  isolation: isolate;
}

.paginakop::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30%;
  right: -10%;
  width: min(60rem, 90vw);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, var(--kleur-gloed-2), transparent 70%);
  transform: translateY(calc(var(--p, 0) * 80px));
  pointer-events: none;
}

.paginakop h1 {
  max-width: 16ch;
  margin-bottom: var(--r-4);
}

.paginakop--breed h1 {
  max-width: 22ch;
}

.paginakop .gegevens {
  margin-top: var(--r-4);
  max-width: 28rem;
}

.paginakop > .container {
  position: relative;
  z-index: 1;
}

/* Zwevende illustratie rechts in de paginakop (alleen op grote schermen) */
.paginakop__beeld {
  display: none;
}

@media (min-width: 72rem) {
  .paginakop__beeld {
    display: block;
    position: absolute;
    right: max(var(--rand-pagina), calc((100% - var(--breedte-max)) / 2 + var(--rand-pagina)));
    top: 50%;
    width: min(30rem, 34vw);
    margin-top: -7rem;
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55));
    will-change: transform;
  }
}

/* Bij het laden: kop en intro van de paginakop vervagen omhoog (alleen CSS) */
@media (prefers-reduced-motion: no-preference) {
  .paginakop h1,
  .paginakop .groot-getal {
    animation: vervaagOmhoog 1100ms var(--zacht) both;
  }

  .paginakop .label,
  .paginakop .intro,
  .paginakop .gegevens,
  .paginakop .knoppen,
  .paginakop .lijst-links,
  .paginakop .bijgewerkt {
    animation: vervaagOmhoog 1100ms var(--zacht) 180ms both;
  }

  .paginakop__beeld {
    animation: vervaag 1400ms ease 250ms both;
  }
}

@keyframes vervaag {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* ---------------------------------------------------------------------
   7. HOME: HERO
   Grote typografie, een gloed die de muis volgt en een illustratie in
   lagen die bij het scrollen met verschillende snelheden bewegen.
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  margin-top: calc(var(--hoogte-kop) * -1);
  padding-top: calc(var(--hoogte-kop) + clamp(3rem, 2rem + 5vw, 7rem));
  padding-bottom: clamp(4rem, 3rem + 5vw, 8rem);
  overflow: hidden;
  isolation: isolate;
}

/* De gloed: twee zachte kleurvlekken. De positie volgt de muis (--gx, --gy) */
.hero__gloed {
  --gx: 70%;
  --gy: 35%;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38rem 38rem at var(--gx) var(--gy), var(--kleur-gloed), transparent 65%),
    radial-gradient(50rem 40rem at 15% 110%, var(--kleur-gloed-2), transparent 70%);
}

/* Fijn raster in de achtergrond, vervaagt naar de randen */
.hero__gloed::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--kleur-lijn) 1px, transparent 1px),
    linear-gradient(90deg, var(--kleur-lijn) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
  opacity: 0.5;
}

.hero__raster {
  display: grid;
  gap: var(--r-6);
  align-items: center;
}

@media (min-width: 64rem) {
  .hero__raster {
    grid-template-columns: 7fr 5fr;
    gap: var(--r-4);
  }
}

.hero__kop {
  font-size: var(--kop-hero);
  line-height: 0.96;
  letter-spacing: -0.025em;
  max-width: 12ch;
}

.hero .intro {
  margin-top: var(--r-4);
}

/* Woorden van een kop komen één voor één omhoog */
.woord {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.woord > * {
  display: inline-block;
}

/* Bij het laden van de homepage: alleen CSS, werkt dus ook zonder JavaScript */
@media (prefers-reduced-motion: no-preference) {
  .hero__kop .woord > * {
    animation: woordOmhoog 1100ms var(--zacht) both;
  }

  .hero__kop .woord:nth-child(2) > span { animation-delay: 70ms; }
  .hero__kop .woord:nth-child(3) > span { animation-delay: 140ms; }
  .hero__kop .woord:nth-child(4) > span { animation-delay: 210ms; }
  .hero__kop .woord:nth-child(5) > span { animation-delay: 280ms; }
  .hero__kop .woord:nth-child(6) > span { animation-delay: 350ms; }
  .hero__kop .woord:nth-child(7) > span { animation-delay: 420ms; }
  .hero__kop .woord:nth-child(8) > span { animation-delay: 490ms; }

  .hero__label,
  .hero__intro-anim {
    animation: vervaagOmhoog 1000ms var(--zacht) 550ms both;
  }

  .hero__label {
    animation-delay: 0ms;
  }

  .hero__beeld {
    animation: vervaagOmhoog 1400ms var(--zacht) 300ms both;
  }
}

@keyframes woordOmhoog {
  from { transform: translateY(110%) rotate(4deg); }
  to { transform: none; }
}

@keyframes vervaagOmhoog {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: none; }
}

.hero__label {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: var(--r-4);
  padding: 0.375rem 0.875rem 0.375rem 0.625rem;
  border: 1px solid var(--kleur-lijn);
  border-radius: 999px;
  background: rgba(28, 31, 38, 0.6);
  font-size: var(--tekst-klein);
  font-weight: 600;
  color: var(--kleur-tekst-zacht);
}

.hero__label::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--kleur-accent);
  box-shadow: 0 0 0 4px var(--kleur-gloed);
}

/* Illustratie in lagen */
.hero__beeld {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  aspect-ratio: 520 / 460;
}

.laag {
  position: absolute;
  will-change: transform;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55));
}

.laag--browser { left: 0; top: 6%; width: 82%; }
.laag--sheet { right: 0; top: 44%; width: 58%; }
.laag--telefoon { left: 64%; top: 0; width: 22%; }
.laag--grafiek { left: 4%; bottom: 0; width: 40%; }

/* Scroll-hint onderaan de hero */
.hero__hint {
  display: none;
}

@media (min-width: 64rem) {
  .hero__hint {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: var(--r-6);
    font-size: var(--tekst-klein);
    color: var(--kleur-tekst-zacht);
  }

  .hero__hint::before {
    content: "";
    width: 1px;
    height: 3rem;
    background: linear-gradient(var(--kleur-accent), transparent);
  }
}


/* ---------------------------------------------------------------------
   8. BAND MET WOORDEN (beweegt mee met scrollen, niet vanzelf)
   --------------------------------------------------------------------- */
.band {
  overflow: hidden;
  padding-block: var(--r-4);
  border-block: 1px solid var(--kleur-lijn);
  background: var(--kleur-bg);
}

.band__spoor {
  display: flex;
  gap: var(--r-5);
  width: max-content;
  font-family: var(--font-kop);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
  line-height: 1.1;
  white-space: nowrap;
  color: var(--kleur-tekst-zacht);
  transform: translateX(calc(var(--p, 0.5) * -30%));
  will-change: transform;
}

.band__spoor span {
  display: inline-flex;
  align-items: center;
  gap: var(--r-5);
}

.band__spoor span::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--kleur-accent);
}

.band__spoor em {
  font-style: italic;
  color: var(--kleur-tekst);
}


/* ---------------------------------------------------------------------
   9. KAARTEN (diensten, afspraken) met lichtvlek die de muis volgt
   --------------------------------------------------------------------- */
.raster-2,
.raster-3 {
  display: grid;
  gap: var(--r-3);
}

@media (min-width: 48rem) {
  .raster-2,
  .raster-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .raster-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.kaart {
  --mx: 50%;
  --my: 0%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--r-2);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  background:
    radial-gradient(28rem circle at var(--mx) var(--my), rgba(200, 245, 96, 0.07), transparent 45%),
    linear-gradient(180deg, var(--kleur-bg-3), var(--kleur-bg-2));
  transition: border-color 300ms ease;
  isolation: isolate;
  overflow: hidden;
}

.kaart:hover,
.kaart:focus-within {
  border-color: rgba(200, 245, 96, 0.45);
}

.kaart__nummer {
  font-size: var(--tekst-klein);
  font-weight: 600;
  color: var(--kleur-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.kaart h3 {
  font-size: var(--kop-3);
}

.kaart--dienst h3 {
  font-family: var(--font-kop);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
  line-height: 1;
}

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

.kaart .pijllink {
  margin-top: auto;
  padding-top: var(--r-2);
}

/* Illustratie bovenin een dienstkaart */
.kaart__beeld {
  margin: calc(clamp(1.5rem, 1rem + 2vw, 2.75rem) * -1) calc(clamp(1.5rem, 1rem + 2vw, 2.75rem) * -1) var(--r-2);
  padding: var(--r-4) var(--r-4) 0;
  background: radial-gradient(80% 90% at 50% 100%, var(--kleur-gloed-2), transparent 70%);
  border-bottom: 1px solid var(--kleur-lijn);
  overflow: hidden;
}

.kaart__beeld img {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  transform: translateY(12px);
  transition: transform 700ms var(--zacht);
}

.kaart:hover .kaart__beeld img {
  transform: translateY(0) scale(1.03);
}

/* De hele kaart klikbaar maken via de link erin */
.kaart--klikbaar .pijllink::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.vinklijst {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}

.vinklijst li {
  position: relative;
  padding-left: 2rem;
}

.vinklijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--kleur-gloed);
}

.vinklijst li::after {
  content: "";
  position: absolute;
  left: 0.36rem;
  top: 0.62em;
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid var(--kleur-accent);
  border-bottom: 2px solid var(--kleur-accent);
  transform: rotate(-45deg);
}


/* ---------------------------------------------------------------------
   10. PROJECTEN EN PLAATSHOUDERS
   --------------------------------------------------------------------- */
.project {
  display: flex;
  flex-direction: column;
  gap: var(--r-2);
}

.project__beeld {
  position: relative;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  background: var(--kleur-bg-3);
  overflow: hidden;
}

.project__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform: scale(calc(1.14 - var(--p, 0.5) * 0.14));
  transition: transform 800ms var(--zacht);
}

.project h3 {
  font-size: var(--kop-3);
  margin-top: var(--r-1);
}

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

.project__meta {
  font-size: var(--tekst-klein);
  font-weight: 600;
  color: var(--kleur-accent);
  letter-spacing: 0.02em;
}

/* Duidelijk gemarkeerde plaatshouder voor nog aan te leveren beeld */
.plaatshouder {
  display: grid;
  place-items: center;
  height: 100%;
  padding: var(--r-3);
  text-align: center;
  font-size: var(--tekst-klein);
  font-weight: 600;
  color: var(--kleur-tekst);
  background:
    radial-gradient(60% 80% at 30% 20%, var(--kleur-gloed-2), transparent 70%),
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(242, 240, 234, 0.05) 14px 15px),
    var(--kleur-bg-3);
}

.plaatshouder p {
  max-width: 24ch;
  padding: var(--r-1) var(--r-2);
  border: 1px dashed var(--kleur-rand);
  border-radius: var(--radius-klein);
  background: var(--kleur-bg);
}


/* ---------------------------------------------------------------------
   11. TABELLEN ("Standaard in elke website", cookies, testresultaten)
   --------------------------------------------------------------------- */
.tabel-wrapper {
  overflow-x: auto;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  background: var(--kleur-bg-2);
}

.blad {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tekst-klein);
  line-height: 1.55;
}

.blad caption {
  padding: var(--r-3) var(--r-3) var(--r-2);
  text-align: left;
  font-weight: 600;
  color: var(--kleur-tekst-zacht);
  letter-spacing: 0.04em;
}

.blad th,
.blad td {
  padding: 1.125rem var(--r-3);
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--kleur-lijn);
}

.blad thead th {
  font-weight: 600;
  color: var(--kleur-tekst-zacht);
  white-space: nowrap;
}

.blad tbody th {
  font-weight: 600;
  min-width: 11rem;
}

.blad td {
  color: var(--kleur-tekst-zacht);
}

.blad .blad__rij {
  width: 4rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--kleur-accent);
}

.blad tbody tr {
  transition: background-color 250ms ease;
}

.blad tbody tr:hover {
  background: rgba(200, 245, 96, 0.04);
}

@media (max-width: 40rem) {
  .blad .blad__rij {
    display: none;
  }

  .blad th,
  .blad td {
    padding: 0.875rem;
  }

  .blad tbody th {
    min-width: 0;
    width: 38%;
  }

  .blad thead th {
    white-space: normal;
  }
}


/* ---------------------------------------------------------------------
   12. WERKWIJZE: TIJDLIJN DIE ZICH VULT BIJ HET SCROLLEN
   --------------------------------------------------------------------- */
.stappen {
  --p: 0;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: stap;
  display: grid;
  gap: var(--r-5);
}

/* De lijn (grijs) en de vulling (limoen) naast de stappen */
.stappen::before,
.stappen::after {
  content: "";
  position: absolute;
  left: calc(1.5rem - 1px);
  top: 1.5rem;
  bottom: 1.5rem;
  width: 2px;
  border-radius: 2px;
  background: var(--kleur-lijn);
  transform-origin: 50% 0;
}

.stappen::after {
  background: linear-gradient(var(--kleur-accent), rgba(200, 245, 96, 0.4));
  transform: scaleY(var(--p));
}

.stappen > li {
  counter-increment: stap;
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--r-1) var(--r-3);
}

.stappen > li::before {
  content: counter(stap);
  position: relative;
  z-index: 1;
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--kleur-rand);
  border-radius: 50%;
  background: var(--kleur-bg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease, box-shadow 400ms ease;
}

.stappen > li.is-bereikt::before {
  background: var(--kleur-accent);
  border-color: var(--kleur-accent);
  color: var(--kleur-accent-tekst);
  box-shadow: 0 0 0 6px var(--kleur-gloed);
}

.stappen h3 {
  font-size: var(--kop-3);
  padding-top: 0.625rem;
}

.stappen p {
  grid-column: 2;
  color: var(--kleur-tekst-zacht);
  max-width: var(--breedte-tekst);
}

.stap__icoon {
  display: none;
}

/* Groot scherm: horizontale tijdlijn voor de compacte versie (homepage) */
@media (min-width: 64rem) {
  .stappen--compact {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--r-3);
  }

  .stappen--compact::before,
  .stappen--compact::after {
    left: 1.5rem;
    right: 1.5rem;
    top: calc(1.5rem - 1px);
    bottom: auto;
    width: auto;
    height: 2px;
    transform-origin: 0 50%;
  }

  .stappen--compact::after {
    background: linear-gradient(90deg, var(--kleur-accent), rgba(200, 245, 96, 0.4));
    transform: scaleX(var(--p));
  }

  .stappen--compact > li {
    grid-template-columns: 1fr;
    align-content: start;
  }

  .stappen--compact > li::before {
    grid-row: auto;
  }

  .stappen--compact h3,
  .stappen--compact p {
    grid-column: 1;
  }

  .stappen--compact h3 {
    padding-top: 0;
    font-size: var(--kop-4);
  }

  .stappen--compact p {
    font-size: var(--tekst-klein);
  }

  .stap__icoon {
    display: block;
    width: 2rem;
    height: 2rem;
    margin-top: var(--r-3);
    color: var(--kleur-accent);
  }
}

/* Groot scherm, volledige werkwijze-pagina: kop links, tekst rechts */
@media (min-width: 64rem) {
  .stappen:not(.stappen--compact) > li {
    grid-template-columns: 3rem 5fr 7fr;
    align-items: start;
  }

  .stappen:not(.stappen--compact) > li::before {
    grid-row: auto;
  }

  .stappen:not(.stappen--compact) p {
    grid-column: 3;
    padding-top: 0.625rem;
  }
}


/* ---------------------------------------------------------------------
   13. TWEEKOLOMS TEKSTBLOKKEN, CASUS, GEGEVENS
   --------------------------------------------------------------------- */
.tweekoloms {
  display: grid;
  gap: var(--r-5);
}

@media (min-width: 64rem) {
  .tweekoloms {
    grid-template-columns: 5fr 7fr;
    gap: var(--r-7);
  }
}

.tweekoloms > div > h2 + .intro {
  margin-top: var(--r-3);
}

.blok + .blok {
  margin-top: var(--r-5);
}

.blok h2 {
  font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
  margin-bottom: var(--r-3);
}

.blok h3 {
  margin-bottom: var(--r-2);
}

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

.blok ul:not(.vinklijst),
.blok ol:not(.stappen) {
  padding-left: 1.25rem;
  display: grid;
  gap: var(--r-1);
}

.blok ul + p,
.blok p + ul,
.blok p + ol,
.blok ol + p,
.blok h3 + ul,
.blok .intro + ul {
  margin-top: var(--r-3);
}

.blok p + h3,
.blok ul + h3,
.blok ol + h3,
.blok .tabel-wrapper + h3 {
  margin-top: var(--r-5);
}

.blok .tabel-wrapper {
  margin-top: var(--r-3);
}

/* Casus: opdracht -> uitdaging -> oplossing -> materialen -> resultaat */
.casus {
  display: grid;
  border-top: 1px solid var(--kleur-lijn);
}

.casus__stap {
  display: grid;
  gap: var(--r-2);
  padding-block: var(--r-6);
  border-bottom: 1px solid var(--kleur-lijn);
}

.casus__stap h2 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
}

@media (min-width: 64rem) {
  .casus__stap {
    grid-template-columns: 4fr 8fr;
    gap: var(--r-6);
  }
}

/* Definitielijst (bedrijfsgegevens, feiten) */
.gegevens {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: var(--r-1) var(--r-3);
}

.gegevens dt {
  font-weight: 600;
}

.gegevens dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 22rem) {
  .gegevens {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .gegevens dd + dt {
    margin-top: var(--r-1);
  }
}

/* Uitgelichte opmerking (bijvoorbeeld bij concept-teksten) */
.notitie {
  max-width: var(--breedte-tekst);
  padding: var(--r-3);
  border: 1px solid rgba(200, 245, 96, 0.35);
  border-radius: var(--radius-klein);
  background: rgba(200, 245, 96, 0.06);
}

.notitie + * {
  margin-top: var(--r-4);
}

* + .notitie {
  margin-top: var(--r-4);
}


/* ---------------------------------------------------------------------
   14. AFSLUITER: CALL-TO-ACTION AAN HET EINDE VAN ELKE PAGINA
   De kop "vult" zich met licht terwijl u scrolt.
   --------------------------------------------------------------------- */
.sectie--uitgelicht {
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--kleur-lijn);
}

.sectie--uitgelicht::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -40%;
  width: min(70rem, 120vw);
  aspect-ratio: 2 / 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200, 245, 96, 0.18), rgba(38, 122, 99, 0.18) 45%, transparent 75%);
  transform: translateX(-50%) scale(calc(0.7 + var(--p, 0.5) * 0.5));
  pointer-events: none;
}

.afsluiter__raster {
  display: grid;
  gap: var(--r-5);
}

/* Tekst vult zich van links naar rechts van zacht grijs naar wit */
.afsluiter h2 {
  max-width: 14ch;
  font-size: clamp(2.75rem, 1.5rem + 5vw, 6.5rem);
  color: var(--kleur-tekst);
  background: linear-gradient(90deg, var(--kleur-tekst) 0 50%, var(--kleur-tekst-zacht) 50% 100%);
  background-size: 200% 100%;
  background-position: calc(100% - var(--p, 1) * 100%) 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.afsluiter p {
  max-width: var(--breedte-tekst);
  font-size: var(--tekst-intro);
  color: var(--kleur-tekst-zacht);
}

@media (min-width: 64rem) {
  .afsluiter__raster {
    grid-template-columns: 7fr 5fr;
    align-items: end;
    gap: var(--r-6);
  }
}


/* ---------------------------------------------------------------------
   15. FORMULIER
   --------------------------------------------------------------------- */
.formulier {
  display: grid;
  gap: var(--r-4);
  max-width: 40rem;
}

.veld {
  display: grid;
  gap: 0.5rem;
}

.veld label,
.veld legend {
  font-weight: 600;
}

.veld__status {
  font-weight: 400;
  color: var(--kleur-tekst-zacht);
}

.veld__hint {
  font-size: var(--tekst-klein);
  color: var(--kleur-tekst-zacht);
}

.veld input,
.veld textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-klein);
  background: var(--kleur-bg-3);
  color: var(--kleur-tekst);
  font: inherit;
  font-size: var(--tekst-basis);
  transition: border-color var(--overgang), box-shadow var(--overgang);
}

.veld textarea {
  min-height: 10rem;
  resize: vertical;
}

.veld input:hover,
.veld textarea:hover {
  border-color: var(--kleur-tekst-zacht);
}

.veld input:focus-visible,
.veld textarea:focus-visible {
  border-color: var(--kleur-accent);
  box-shadow: 0 0 0 4px var(--kleur-gloed);
  outline-offset: 2px;
}

.veld [aria-invalid="true"] {
  border-color: var(--kleur-fout);
}

/* Foutmelding: gekleurde tekst met een uitroepteken, dus niet alleen kleur */
.veld__fout {
  display: flex;
  gap: 0.5rem;
  font-size: var(--tekst-klein);
  font-weight: 600;
  color: var(--kleur-fout);
}

.veld__fout::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  border-radius: 50%;
  background: var(--kleur-fout);
  color: var(--kleur-bg);
  font-size: 0.8125rem;
  line-height: 1;
}

.veld__fout[hidden] {
  display: none;
}

.keuzes {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.keuzes legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.keuzes__opties {
  display: grid;
  gap: var(--r-1);
}

@media (min-width: 30rem) {
  .keuzes__opties {
    grid-template-columns: repeat(2, 1fr);
  }
}

.keuze {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-klein);
  background: var(--kleur-bg-3);
  cursor: pointer;
  transition: border-color var(--overgang), box-shadow var(--overgang);
}

.keuze:hover {
  border-color: var(--kleur-tekst-zacht);
}

.keuze:has(input:checked) {
  border-color: var(--kleur-accent);
  box-shadow: 0 0 0 4px var(--kleur-gloed);
}

.keuze input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex: none;
  accent-color: var(--kleur-accent);
}

.keuzes[aria-invalid="true"] .keuze {
  border-color: var(--kleur-fout);
}

.veldgroep {
  display: grid;
  gap: var(--r-3);
}

/* Anti-spamveld: onzichtbaar voor mensen, bots vullen het wel in */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulier__melding {
  padding: var(--r-2) var(--r-3);
  border: 1px solid var(--kleur-fout);
  border-radius: var(--radius-klein);
  background: rgba(255, 138, 122, 0.08);
  font-weight: 600;
}

.formulier__melding:empty {
  padding: 0;
  border: 0;
}

.formulier__melding ul {
  margin-top: var(--r-1);
  padding-left: 1.25rem;
  font-weight: 400;
}

.formulier__privacy {
  font-size: var(--tekst-klein);
  color: var(--kleur-tekst-zacht);
  max-width: var(--breedte-tekst);
}

/* Contactpagina: formulier links, gegevens rechts */
.contact-raster {
  display: grid;
  gap: var(--r-6);
}

@media (min-width: 64rem) {
  .contact-raster {
    grid-template-columns: 7fr 5fr;
    gap: var(--r-7);
  }
}

.contact-zij {
  display: grid;
  gap: var(--r-4);
  align-content: start;
}

.contact-zij > div {
  padding: var(--r-4);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  background: var(--kleur-bg-2);
}

.contact-zij h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  margin-bottom: var(--r-3);
}

/* "Wat gebeurt er na uw aanvraag?" */
.na-aanvraag {
  list-style: none;
  padding: 0;
  counter-reset: na;
  display: grid;
  gap: var(--r-3);
}

.na-aanvraag li {
  counter-increment: na;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--r-2);
  color: var(--kleur-tekst-zacht);
}

.na-aanvraag li::before {
  content: counter(na);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--kleur-gloed);
  color: var(--kleur-accent);
  font-weight: 600;
}

.na-aanvraag strong {
  display: block;
  color: var(--kleur-tekst);
}

.lijst-links {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--r-1);
}


/* ---------------------------------------------------------------------
   16. REKENVOORBEELD (Excel-pagina)
   --------------------------------------------------------------------- */
.rekenblad {
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  background: var(--kleur-bg-2);
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(200, 245, 96, 0.08);
}

.rekenblad__kop {
  display: flex;
  justify-content: space-between;
  gap: var(--r-2);
  padding: 0.875rem var(--r-3);
  border-bottom: 1px solid var(--kleur-lijn);
  font-size: var(--tekst-klein);
  font-weight: 600;
  color: var(--kleur-tekst-zacht);
}

.rekenblad__velden {
  display: grid;
  gap: var(--r-3);
  padding: var(--r-3);
}

@media (min-width: 40rem) {
  .rekenblad__velden {
    grid-template-columns: repeat(3, 1fr);
  }
}

.rekenblad .veld input {
  font-variant-numeric: tabular-nums;
}

.rekenblad__uitkomst {
  display: grid;
  border-top: 1px solid var(--kleur-lijn);
}

.rekenblad__uitkomst div {
  display: flex;
  justify-content: space-between;
  gap: var(--r-2);
  padding: 0.875rem var(--r-3);
  border-bottom: 1px solid var(--kleur-lijn);
  font-variant-numeric: tabular-nums;
  color: var(--kleur-tekst-zacht);
}

.rekenblad__uitkomst div:last-child {
  border-bottom: 0;
  font-weight: 600;
  font-size: var(--kop-4);
  color: var(--kleur-accent-tekst);
  background: var(--kleur-accent);
}

.rekenblad__uitkomst dt,
.rekenblad__uitkomst dd {
  margin: 0;
}

.bijgewerkt {
  margin-top: var(--r-2);
  font-size: var(--tekst-klein);
  color: var(--kleur-tekst-zacht);
}


/* ---------------------------------------------------------------------
   17. VOETTEKST
   --------------------------------------------------------------------- */
.voet {
  position: relative;
  padding-block: var(--r-7) var(--r-4);
  background: var(--kleur-bg-2);
  border-top: 1px solid var(--kleur-lijn);
  overflow: hidden;
}

.voet a {
  color: var(--kleur-tekst);
}

.voet a:hover {
  color: var(--kleur-accent);
}

.voet__raster {
  display: grid;
  gap: var(--r-5);
}

@media (min-width: 48rem) {
  .voet__raster {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 72rem) {
  .voet__raster {
    grid-template-columns: 4fr 5fr 2fr 3fr;
  }
}

.voet__merk p:not(.logo) {
  margin-top: var(--r-3);
  max-width: 28ch;
  color: var(--kleur-tekst-zacht);
}

.voet__kop {
  margin-bottom: var(--r-2);
  font-family: var(--font-tekst);
  font-size: var(--tekst-klein);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kleur-tekst-zacht);
}

.voet .gegevens {
  font-size: var(--tekst-klein);
}

.voet .gegevens dt {
  color: var(--kleur-tekst-zacht);
  font-weight: 400;
}

.voet ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.voet ul a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  font-size: var(--tekst-klein);
}

/* Groot merkteken onderaan (icoon + woord), schuift omhoog bij het scrollen (decoratief) */
.voet__woordmerk {
  display: flex;
  align-items: center;
  gap: 0.2em;
  margin-top: var(--r-6);
  font-family: var(--font-tekst);
  font-weight: 600;
  font-size: clamp(2.5rem, 0.5rem + 12vw, 12rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  white-space: nowrap;
  transform: translateY(calc((1 - var(--p, 1)) * 35%));
  user-select: none;
}

/* Het woord: zachte verloop-vulling (decoratief logo, voor schermlezers verborgen) */
.voet__woordmerk > span {
  color: transparent;
  background: linear-gradient(180deg, rgba(242, 240, 234, 0.1), rgba(242, 240, 234, 0.03));
  -webkit-background-clip: text;
  background-clip: text;
}

.voet__woordmerk img {
  width: 1.15em;
  height: auto;
  flex: none;
  opacity: 0.22;
}

.voet__woordmerk .voet__punt {
  color: var(--kleur-accent);
  -webkit-text-fill-color: var(--kleur-accent);
}

.voet__onder {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--r-2);
  margin-top: var(--r-4);
  padding-top: var(--r-3);
  font-size: var(--tekst-klein);
  color: var(--kleur-tekst-zacht);
}

.voet__onder::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--rand-pagina);
  right: var(--rand-pagina);
  border-top: 1px solid var(--kleur-lijn);
}


/* ---------------------------------------------------------------------
   18. MOBIELE ACTIEBALK (Bellen / Offerte aanvragen)
   Alleen op kleine schermen. De pagina krijgt onderaan extra ruimte,
   zodat de balk nooit tekst of de focus bedekt.
   --------------------------------------------------------------------- */
.mobiele-balk {
  display: none;
}

@media (max-width: 47.99rem) {
  html {
    scroll-padding-bottom: calc(var(--hoogte-mobiele-balk) + var(--r-2));
  }

  body {
    padding-bottom: var(--hoogte-mobiele-balk);
  }

  .mobiele-balk {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: var(--hoogte-mobiele-balk);
    background: rgba(14, 15, 18, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--kleur-lijn);
  }

  .mobiele-balk a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--kleur-tekst);
    font-weight: 600;
    font-size: var(--tekst-klein);
    text-decoration: none;
  }

  .mobiele-balk a + a {
    background: var(--kleur-accent);
    color: var(--kleur-accent-tekst);
  }

  .mobiele-balk a:focus-visible {
    outline-offset: -4px;
  }

  .mobiele-balk a + a:focus-visible {
    outline-color: var(--kleur-accent-tekst);
  }

  .mobiele-balk svg {
    width: 1.125rem;
    height: 1.125rem;
  }
}

/* Heel smalle telefoons: icoontjes weg, zodat de tekst op één regel past */
@media (max-width: 22.5rem) {
  .mobiele-balk svg {
    display: none;
  }
}


/* ---------------------------------------------------------------------
   19. JURIDISCHE PAGINA'S (lange lopende tekst) EN 404
   --------------------------------------------------------------------- */
.document {
  max-width: 44rem;
}

.document h2 {
  margin-top: var(--r-6);
  margin-bottom: var(--r-3);
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);
}

.document h2:first-child {
  margin-top: 0;
}

.document h3 {
  margin-top: var(--r-4);
  margin-bottom: var(--r-1);
  font-size: var(--kop-4);
}

.document p,
.document li {
  color: var(--kleur-tekst-zacht);
}

.document strong {
  color: var(--kleur-tekst);
}

.document p + ul,
.document p + ol,
.document ul + p,
.document ol + p,
.document .tabel-wrapper + p,
.document p + .tabel-wrapper {
  margin-top: var(--r-2);
}

.document ul,
.document ol {
  padding-left: 1.25rem;
  display: grid;
  gap: var(--r-1);
}

.document .gegevens {
  margin-top: var(--r-2);
}

.document .gegevens dd {
  color: var(--kleur-tekst-zacht);
}

.groot-getal {
  font-family: var(--font-kop);
  font-style: italic;
  font-size: clamp(7rem, 4rem + 18vw, 18rem);
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px var(--kleur-accent);
  margin-bottom: var(--r-3);
}


/* ---------------------------------------------------------------------
   20. SCROLL-ANIMATIES
   JavaScript zet de klasse "js-anim" op <html> en "is-in" op elk
   element zodra het in beeld komt. Gaat het weer uit beeld, dan gaat
   "is-in" eraf, zodat de animatie bij terug scrollen opnieuw speelt.
   Bij terug scrollen komt een element van boven ("van-boven").
   Zonder JavaScript of met "beweging beperken" is alles gewoon zichtbaar.
   --------------------------------------------------------------------- */
.js-anim [data-anim] {
  transition:
    opacity 900ms var(--zacht) var(--vertraging, 0ms),
    transform 1100ms var(--zacht) var(--vertraging, 0ms),
    clip-path 1200ms var(--zacht) var(--vertraging, 0ms),
    filter 900ms var(--zacht) var(--vertraging, 0ms);
}

.js-anim [data-anim="omhoog"]:not(.is-in) {
  opacity: 0;
  transform: translateY(56px);
}

.js-anim [data-anim="links"]:not(.is-in) {
  opacity: 0;
  transform: translateX(-72px);
}

.js-anim [data-anim="rechts"]:not(.is-in) {
  opacity: 0;
  transform: translateX(72px);
}

@media (max-width: 47.99rem) {
  .js-anim [data-anim="links"]:not(.is-in) {
    transform: translateX(-32px);
  }

  .js-anim [data-anim="rechts"]:not(.is-in) {
    transform: translateX(32px);
  }
}

.js-anim [data-anim="schaal"]:not(.is-in) {
  opacity: 0;
  transform: scale(0.9);
  filter: blur(6px);
}

.js-anim [data-anim="clip"] {
  clip-path: inset(0 0 0 0 round var(--radius));
}

.js-anim [data-anim="clip"]:not(.is-in) {
  clip-path: inset(100% 0 0 0 round var(--radius));
}

/* Bij terug scrollen: van boven in plaats van van onder */
.js-anim [data-anim="omhoog"].van-boven:not(.is-in) {
  transform: translateY(-56px);
}

.js-anim [data-anim="clip"].van-boven:not(.is-in) {
  clip-path: inset(0 0 100% 0 round var(--radius));
}

/* Kinderen van een "stagger"-container verschijnen na elkaar */
.js-anim [data-stagger] > * {
  transition: opacity 800ms var(--zacht), transform 1000ms var(--zacht);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.js-anim [data-stagger]:not(.is-in) > * {
  opacity: 0;
  transform: translateY(40px);
}

.js-anim [data-stagger].van-boven:not(.is-in) > * {
  transform: translateY(-40px);
}

/* Koppen die per woord omhoog komen (JavaScript splitst de woorden) */
.js-anim [data-anim="woorden"] .woord > * {
  transition: transform 1000ms var(--zacht);
  transition-delay: calc(var(--i, 0) * 55ms);
}

.js-anim [data-anim="woorden"]:not(.is-in) .woord > * {
  transform: translateY(110%) rotate(3deg);
}

.js-anim [data-anim="woorden"].van-boven:not(.is-in) .woord > * {
  transform: translateY(-110%) rotate(-3deg);
}

/* Beweging beperken: geen animaties, alles direct zichtbaar */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .knop,
  .band__spoor,
  .project__beeld img,
  .voet__woordmerk,
  .laag {
    transform: none !important;
  }
}


/* ---------------------------------------------------------------------
   21. AFDRUKKEN (bijvoorbeeld de privacyverklaring)
   --------------------------------------------------------------------- */
@media print {
  .kop,
  .voet,
  .mobiele-balk,
  .afsluiter,
  .overslaan,
  .voortgang,
  .band,
  .hero__gloed {
    display: none !important;
  }

  body {
    background: #FFFFFF;
    color: #000000;
    padding: 0;
  }

  body::before {
    display: none;
  }

  .js-anim [data-anim],
  .js-anim [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}


/* ---------------------------------------------------------------------
   22. TIJDLIJN ZONDER JAVASCRIPT OF MET "BEWEGING BEPERKEN"
   Dan is de lijn helemaal gevuld en zijn alle stappen gemarkeerd.
   --------------------------------------------------------------------- */
.stappen:not(.is-actief) {
  --p: 1;
}

.stappen:not(.is-actief) > li::before {
  background: var(--kleur-accent);
  border-color: var(--kleur-accent);
  color: var(--kleur-accent-tekst);
}

@media (prefers-reduced-motion: reduce) {
  .stappen {
    --p: 1 !important;
  }

  .stappen > li::before {
    background: var(--kleur-accent) !important;
    border-color: var(--kleur-accent) !important;
    color: var(--kleur-accent-tekst) !important;
  }
}