@charset "utf-8";
/* ==========================================================================
   Aipplicate, designsysteem voor het redesign van september 2026.
   Eén stylesheet voor alle pagina's. De regels staan uitgelegd in stijlgids.html.

   Opbouw:
   01  Tokens
   02  Basis
   03  Typografie
   04  Lay-out
   05  Het merkteken als motief
   06  Knoppen
   07  Navigatie
   08  Secties en vlakken
   09  Kaarten en lijsten
   10  Modules
   11  Register en tabellen
   12  Formulier
   13  Accordeon
   14  Redactie
   15  Voettekst
   16  Beweging
   ========================================================================== */

/* -- 01 Tokens ------------------------------------------------------------ */

:root {
  /* Inkt. De pagina is donker; dit is de enige schaal die de diepte draagt. */
  --inkt-1000: #060A12;
  --inkt-900:  #0A101C;
  --inkt-800:  #0E1626;   /* merkkleur inkt, de basis */
  --inkt-700:  #141E31;
  --inkt-600:  #1C2840;
  --inkt-500:  #27354F;

  /* Modulekleuren. Elke module houdt zijn kleur door de hele site heen. */
  --aqua:   #00B8A0;
  --blauw:  #3D7BFF;
  --amber:  #F5A623;
  --koraal: #FF6B5A;
  --lila:   #9B8CFF;

  /* Tekst */
  --tekst:       #EDF2F8;
  --tekst-zacht: #9BAABF;
  --tekst-stil:  #6B7C93;
  --tekst-op-licht: var(--inkt-800);

  /* Lijnen. Alles wordt gescheiden met een haarlijn, nooit met een schaduw. */
  --lijn:        rgb(255 255 255 / 9%);
  --lijn-sterk:  rgb(255 255 255 / 16%);
  --lijn-licht:  rgb(14 22 38 / 12%);

  /* Typografie */
  --kop: "Sora", "Segoe UI", system-ui, sans-serif;
  --tekst-font: "Manrope", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Ruimte. Een schaal van 8, met grote sprongen erboven: de pagina moet lucht
     hebben, dus secties staan ver uit elkaar. */
  --r1: .25rem;  --r2: .5rem;   --r3: .75rem;  --r4: 1rem;
  --r5: 1.5rem;  --r6: 2rem;    --r7: 3rem;    --r8: 4rem;
  --r9: 6rem;    --r10: 8rem;   --r11: 11rem;

  --sectie: clamp(5.5rem, 11vw, 10.5rem);
  --goot: clamp(1.25rem, 4.5vw, 3.5rem);
  --breed: 1280px;
  --smal: 720px;

  --radius: 4px;
  --radius-groot: 8px;

  --duur: .75s;
  --soepel: cubic-bezier(.16, 1, .3, 1);
}

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

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--inkt-800);
  color: var(--tekst);
  font-family: var(--tekst-font);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--lijn); margin: 0; }

::selection { background: var(--aqua); color: var(--inkt-900); }

:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
  border-radius: 2px;
}

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--aqua);
  color: var(--inkt-900);
  padding: var(--r3) var(--r5);
  font-family: var(--mono);
  font-size: .8125rem;
  z-index: 200;
}
.overslaan:focus { left: var(--r4); top: var(--r4); }

.verborgen {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -- 03 Typografie -------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--kop);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0;
  text-wrap: balance;
}

.display {
  font-size: clamp(3rem, 7.6vw, 6.75rem);
  line-height: .94;
  letter-spacing: -.045em;
}

.kop-1 { font-size: clamp(2.5rem, 5.4vw, 4.5rem); letter-spacing: -.04em; }
.kop-2 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.04; }
.kop-3 { font-size: clamp(1.375rem, 2.1vw, 1.875rem); line-height: 1.15; letter-spacing: -.025em; }
.kop-4 { font-size: 1.125rem; line-height: 1.35; letter-spacing: -.015em; }

.lood {
  font-size: clamp(1.125rem, 1.45vw, 1.375rem);
  line-height: 1.58;
  color: var(--tekst-zacht);
  max-width: 34em;
  margin: 0;
}

p { margin: 0 0 var(--r4); max-width: 40em; }
p:last-child { margin-bottom: 0; }

.zacht { color: var(--tekst-zacht); }
.stil  { color: var(--tekst-stil); }
.aqua  { color: var(--aqua); }

/* Het accentwoord in een kop. Geen verloop, één kleur: een verloop over letters
   is precies het effect dat elke gegenereerde pagina gebruikt. */
.accent { color: var(--aqua); }

/* Bovenkop: mono, klein, gespatieerd, met een ruit ervoor. */
.bovenkop {
  display: flex;
  align-items: center;
  gap: var(--r3);
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tekst-stil);
  margin: 0 0 var(--r5);
}
.bovenkop::before {
  content: "";
  width: 9px; height: 9px;
  background: var(--kleur, var(--aqua));
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  flex: none;
}
.bovenkop .nr { color: var(--kleur, var(--aqua)); }

a { color: inherit; }

.link {
  color: var(--tekst);
  text-decoration: none;
  border-bottom: 1px solid var(--lijn-sterk);
  padding-bottom: 2px;
  transition: border-color .25s, color .25s;
}
.link:hover { border-color: var(--aqua); color: var(--aqua); }

.link-pijl {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--aqua);
}
.link-pijl svg { transition: transform .3s var(--soepel); }
.link-pijl:hover svg { transform: translateX(5px); }

/* -- 04 Lay-out ----------------------------------------------------------- */

.omhulsel {
  width: min(100% - (var(--goot) * 2), var(--breed));
  margin-inline: auto;
}
.omhulsel--smal { --breed: 780px; }
.omhulsel--ruim { --breed: 1440px; }

.sectie { padding-block: var(--sectie); position: relative; }
.sectie--kort { padding-block: clamp(3.5rem, 7vw, 6rem); }

.raster { display: grid; gap: var(--r6); }
.raster--2 { grid-template-columns: repeat(2, 1fr); }
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--4 { grid-template-columns: repeat(4, 1fr); }

/* Redactionele tweekolom: kop links, tekst rechts, niet even breed.
   De asymmetrie houdt de pagina weg bij het standaard SaaS-midden. */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(var(--r6), 6vw, var(--r10));
  align-items: start;
}
.duo--omgekeerd { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }

.stapel > * + * { margin-top: var(--r5); }
.stapel-ruim > * + * { margin-top: var(--r7); }

@media (max-width: 900px) {
  .raster--3, .raster--4 { grid-template-columns: repeat(2, 1fr); }
  .duo, .duo--omgekeerd { grid-template-columns: 1fr; gap: var(--r6); }
}
@media (max-width: 620px) {
  .raster--2, .raster--3, .raster--4 { grid-template-columns: 1fr; }
}

/* -- 05 Het merkteken als motief ------------------------------------------ */

/* De ruit uit het logo is het enige decoratieve element op de hele site.
   Hij komt terug als opsommingsteken, als scheiding en op ware grootte. */
.ruit {
  width: 10px; height: 10px;
  background: var(--kleur, var(--aqua));
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  flex: none;
}
.ruit--groot { width: 18px; height: 18px; }

.trechter { width: 100%; height: auto; }
.trechter .laag { transform-origin: center; }

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

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  padding: 1.05rem 1.75rem;
  font-family: var(--tekst-font);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s, transform .25s var(--soepel);
}
.knop:active { transform: translateY(1px); }

.knop--vol {
  background: var(--aqua);
  color: var(--inkt-900);
}
.knop--vol:hover { background: #22D4BC; }

.knop--stil {
  background: transparent;
  color: var(--tekst);
  border-color: var(--lijn-sterk);
}
.knop--stil:hover { border-color: var(--tekst); background: rgb(255 255 255 / 4%); }

.knop--klein { padding: .65rem 1.1rem; font-size: .875rem; }

.knop-rij { display: flex; flex-wrap: wrap; gap: var(--r3); }

/* -- 07 Navigatie --------------------------------------------------------- */

.balk {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--inkt-800) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.balk.vast { border-bottom-color: var(--lijn); }

.balk__binnen {
  display: flex;
  align-items: center;
  gap: var(--r6);
  height: 76px;
}

.balk__logo { display: block; flex: none; }
.balk__logo img { height: 26px; width: auto; }

.balk__menu {
  display: flex;
  align-items: center;
  gap: var(--r6);
  margin-left: auto;
  list-style: none;
  padding: 0; margin-block: 0;
}
.balk__menu a {
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--tekst-zacht);
  transition: color .2s;
  position: relative;
}
.balk__menu a:hover { color: var(--tekst); }
.balk__menu a[aria-current="page"] { color: var(--tekst); }
.balk__menu a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -8px;
  width: 6px; height: 6px;
  margin-left: -3px;
  background: var(--aqua);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.balk__acties { display: flex; align-items: center; gap: var(--r4); }

.balk__schakel {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--radius);
  color: var(--tekst);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.balk__schakel span,
.balk__schakel span::before,
.balk__schakel span::after {
  display: block;
  width: 17px; height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--soepel), opacity .2s;
}
.balk__schakel span { position: relative; }
.balk__schakel span::before,
.balk__schakel span::after { content: ""; position: absolute; left: 0; }
.balk__schakel span::before { top: -5px; }
.balk__schakel span::after  { top: 5px; }
.balk__schakel[aria-expanded="true"] span { background: transparent; }
.balk__schakel[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.balk__schakel[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1000px) {
  .balk__schakel { display: grid; margin-left: auto; }
  .balk__menu,
  .balk__acties {
    display: none;
  }
  .balk.open .balk__menu,
  .balk.open .balk__acties {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--r5);
    margin: 0;
    width: 100%;
  }
  .balk.open .balk__binnen {
    flex-wrap: wrap;
    height: auto;
    padding-bottom: var(--r6);
    row-gap: var(--r6);
  }
  .balk.open .balk__menu {
    padding-top: var(--r6);
    border-top: 1px solid var(--lijn);
  }
  .balk.open .balk__menu a { font-size: 1.375rem; font-family: var(--kop); letter-spacing: -.02em; }
  .balk.open .balk__menu a[aria-current="page"]::after { display: none; }
  .balk.open .knop { width: 100%; }
}

/* -- 08 Secties en vlakken ------------------------------------------------ */

.vlak-dieper  { background: var(--inkt-900); }
.vlak-diepst  { background: var(--inkt-1000); }
.vlak-hoger   { background: var(--inkt-700); }

/* De enige lichte sectie op de site. Bewust schaars ingezet: één helder vlak
   tussen de donkere door geeft de pagina ritme zonder een tweede thema. */
.vlak-licht {
  background: #F3F5F8;
  color: var(--inkt-800);
}
.vlak-licht .lood,
.vlak-licht .zacht { color: #4A5768; }
.vlak-licht .stil  { color: #6D7A8B; }
.vlak-licht .bovenkop { color: #6D7A8B; }
.vlak-licht hr,
.vlak-licht .kaart { border-color: var(--lijn-licht); }
.vlak-licht .kaart { background: #FFF; }
.vlak-licht .knop--stil { color: var(--inkt-800); border-color: rgb(14 22 38 / 22%); }
.vlak-licht .knop--stil:hover { background: rgb(14 22 38 / 5%); border-color: var(--inkt-800); }

.rand-boven { border-top: 1px solid var(--lijn); }
.rand-onder { border-bottom: 1px solid var(--lijn); }

/* Haarlijn met een aqua kopje: kleine signatuur die op elke sectiegrens
   terugkomt en de pagina laat voelen als één systeem. */
.streep {
  height: 1px;
  background: var(--lijn);
  position: relative;
}
.streep::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 56px; height: 1px;
  background: var(--kleur, var(--aqua));
}

/* -- 09 Kaarten en lijsten ------------------------------------------------ */

.kaart {
  background: var(--inkt-700);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-groot);
  padding: var(--r6);
  display: flex;
  flex-direction: column;
  gap: var(--r4);
}
.kaart--vlak { background: transparent; }
.kaart--klik { text-decoration: none; transition: border-color .3s, background .3s, transform .4s var(--soepel); }
.kaart--klik:hover { border-color: var(--lijn-sterk); background: var(--inkt-600); transform: translateY(-3px); }

.kaart__nr {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .18em;
  color: var(--kleur, var(--aqua));
}

.lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--r3); }
/* Geen grid op het item zelf: dan belandt losse tekst naast een <strong> in de
   kolom van het opsommingsteken en breekt hij op elk woord af. */
.lijst li {
  position: relative;
  padding-left: 1.375rem;
  color: var(--tekst-zacht);
  font-size: .9688rem;
  line-height: 1.6;
}
.lijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px; height: 8px;
  background: var(--kleur, var(--aqua));
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.lijst--kruis li::before {
  clip-path: none;
  background: none;
  border-top: 1.5px solid var(--tekst-stil);
  height: 0; width: 10px;
  top: .85em;
}
/* Een opsomming waarin elk punt een eigen zin met een vetgezette kop heeft. */
.lijst--breed li { font-size: 1rem; line-height: 1.65; }
.lijst--breed strong { display: block; color: var(--tekst); font-weight: 600; margin-bottom: .15em; }

/* Feitenstrook onder de hero. Mono cijfers, tabellarisch uitgelijnd. */
.feiten {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--lijn);
}
.feiten__item {
  padding: var(--r6) var(--r5) var(--r6) 0;
  border-right: 1px solid var(--lijn);
  padding-left: var(--r5);
}
.feiten__item:first-child { padding-left: 0; }
.feiten__item:last-child { border-right: 0; }
.feiten__cijfer {
  font-family: var(--kop);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: var(--r3);
}
.feiten__label { font-size: .875rem; color: var(--tekst-zacht); line-height: 1.45; }
@media (max-width: 800px) {
  .feiten { grid-template-columns: repeat(2, 1fr); }
  .feiten__item:nth-child(2n) { border-right: 0; }
  .feiten__item:nth-child(-n+2) { border-bottom: 1px solid var(--lijn); }
  .feiten__item:nth-child(odd) { padding-left: 0; }
}

/* -- 10 Modules ----------------------------------------------------------- */

/* Elke module krijgt een eigen band over de volle breedte. De kleur zit in de
   achtergrondwas, de ruit en de lijn; nooit in de tekst, want dan wordt het
   onleesbaar en gaat het rammelen. */
.band {
  --kleur: var(--aqua);
  border-top: 1px solid var(--lijn);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--kleur) 13%, transparent) 0%,
      color-mix(in srgb, var(--kleur) 4%, transparent) 42%,
      transparent 72%),
    var(--inkt-800);
  padding-block: clamp(3.5rem, 6.5vw, 6rem);
  position: relative;
  overflow: hidden;
}
.band:last-of-type { border-bottom: 1px solid var(--lijn); }

.band__binnen {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
  gap: clamp(var(--r5), 4vw, var(--r8));
  align-items: center;
}
.band__titel { display: flex; align-items: center; gap: var(--r4); }
.band__titel .ruit { width: 22px; height: 22px; }
.band__meta {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kleur);
  text-align: right;
}
.band__stip { display: inline-flex; gap: 5px; justify-content: flex-end; margin-top: var(--r3); }
.band__stip i { width: 6px; height: 6px; background: var(--kleur); opacity: .35;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.band__stip i.aan { opacity: 1; }

@media (max-width: 900px) {
  .band__binnen { grid-template-columns: 1fr; gap: var(--r5); }
  .band__meta { text-align: left; }
  .band__stip { justify-content: flex-start; }
}

/* -- 11 Register en tabellen ---------------------------------------------- */

.paneel {
  background: var(--inkt-900);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-groot);
  overflow: hidden;
}
.paneel__kop {
  display: flex;
  align-items: center;
  gap: var(--r4);
  padding: var(--r4) var(--r5);
  border-bottom: 1px solid var(--lijn);
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tekst-stil);
}
.paneel__leven {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--aqua);
}
.paneel__leven i {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: pols 2.4s ease-in-out infinite;
}
@keyframes pols { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

.log { width: 100%; border-collapse: collapse; font-size: .875rem; }
.log th {
  text-align: left;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tekst-stil);
  padding: var(--r3) var(--r5);
  border-bottom: 1px solid var(--lijn);
  white-space: nowrap;
}
.log td {
  padding: var(--r4) var(--r5);
  border-bottom: 1px solid var(--lijn);
  color: var(--tekst-zacht);
  vertical-align: middle;
}
.log tr:last-child td { border-bottom: 0; }
.log .tijd { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--tekst-stil); }
.log .wie { color: var(--tekst); font-weight: 500; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .28em .65em;
  border: 1px solid var(--lijn-sterk);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--tekst-zacht);
  white-space: nowrap;
}
.chip .ruit { width: 7px; height: 7px; }
.chip--eu { color: var(--aqua); border-color: color-mix(in srgb, var(--aqua) 40%, transparent); }

/* Gemaskeerd veld: een blok, geen sterretjes. Sterretjes suggereren dat er
   iets te raden valt; een blok laat zien dat er niets meer staat. */
.masker {
  display: inline-block;
  height: .72em;
  width: 4.5em;
  background: repeating-linear-gradient(90deg,
    var(--inkt-500) 0 .62em, transparent .62em .82em);
  vertical-align: baseline;
}

@media (max-width: 760px) {
  .log-schuif { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .log { min-width: 620px; }
}

/* -- 12 Formulier --------------------------------------------------------- */

.formulier { display: grid; gap: var(--r5); }
.formulier__rij { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--r5); }
@media (max-width: 620px) { .formulier__rij { grid-template-columns: 1fr; } }

.veld { display: grid; gap: var(--r2); }
.veld > span {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tekst-stil);
}
.veld input,
.veld select,
.veld textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--tekst);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--lijn-sterk);
  padding: .7rem 0;
  transition: border-color .25s;
  width: 100%;
  border-radius: 0;
}
.veld select { appearance: none; cursor: pointer; }
.veld textarea { resize: vertical; min-height: 5rem; }
.veld input:focus,
.veld select:focus,
.veld textarea:focus {
  outline: none;
  border-bottom-color: var(--aqua);
}
.veld select option { background: var(--inkt-700); color: var(--tekst); }

/* -- 13 Accordeon --------------------------------------------------------- */

.vraag { border-bottom: 1px solid var(--lijn); }
.vraag summary {
  display: flex;
  align-items: center;
  gap: var(--r5);
  padding: var(--r5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--kop);
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  font-weight: 500;
  letter-spacing: -.02em;
  transition: color .2s;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary:hover { color: var(--aqua); }
.vraag summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 11px; height: 11px;
  background: var(--tekst-stil);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: transform .35s var(--soepel), background .2s;
}
.vraag[open] summary::after { transform: rotate(180deg) scale(.75); background: var(--aqua); }
.vraag__antwoord { padding: 0 0 var(--r6); max-width: 58ch; color: var(--tekst-zacht); }

/* -- 14 Redactie ---------------------------------------------------------- */

.redactie { max-width: 68ch; }
.redactie > * + * { margin-top: var(--r5); }
.redactie h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: var(--r8); }
.redactie h3 { font-size: 1.25rem; margin-top: var(--r7); }
.redactie p { font-size: 1.0938rem; line-height: 1.75; color: var(--tekst-zacht); max-width: none; }
.redactie strong { color: var(--tekst); font-weight: 600; }
.redactie ul { padding-left: 0; }

.citaat {
  border-left: 2px solid var(--aqua);
  padding-left: var(--r5);
  font-family: var(--kop);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.025em;
  color: var(--tekst);
}

.meta-regel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r4);
  align-items: center;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tekst-stil);
}

/* -- 15 Voettekst --------------------------------------------------------- */

.voet { background: var(--inkt-1000); border-top: 1px solid var(--lijn); padding-block: var(--r9) var(--r6); }
.voet__boven {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: var(--r7);
  padding-bottom: var(--r8);
}
.voet__kolom h4 {
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tekst-stil);
  margin-bottom: var(--r4);
}
.voet__kolom ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--r3); }
.voet__kolom a { text-decoration: none; color: var(--tekst-zacht); font-size: .9375rem; transition: color .2s; }
.voet__kolom a:hover { color: var(--aqua); }
.voet__onder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r4);
  justify-content: space-between;
  padding-top: var(--r5);
  border-top: 1px solid var(--lijn);
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--tekst-stil);
}
@media (max-width: 860px) {
  .voet__boven { grid-template-columns: repeat(2, 1fr); }
}

/* -- 16 Beweging ---------------------------------------------------------- */

/* Eén beweging op de hele site: inhoud komt van 14 pixels onderaf omhoog.
   Geen parallax, geen meebewegende achtergronden, geen tellers. */
.op {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--duur) var(--soepel), transform var(--duur) var(--soepel);
  transition-delay: var(--vertraag, 0ms);
}
.op.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .op { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}