/* ==========================================================================
   Digibeta: stijl voor digibeta.be
   Kleuren en fonts uit het Digibeta design system.
   Vorm (vensters, harde schaduw, bevelknoppen) volgt de nieuwe retro-stijl.
   ========================================================================== */

/* ---------- Fonts (lokaal, geen Google-servers: geen GDPR-gedoe) ---------- */
@font-face { font-family: "Newsreader"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/newsreader-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/newsreader-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/newsreader-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/lato-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 900; font-style: normal; font-display: swap; src: url("../fonts/lato-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  /* kleur: design system */
  --navy: #222B60;
  --navy-diep: #1A2250;
  --navy-lijn: #3A4380;
  --geel: #F6BF33;
  --geel-diep: #EDB421;
  --wit: #FFFFFF;
  --koelwit: #F4F7FA;
  --koelwit-diep: #E9EEF5;
  --blauw-a: #1867C6;
  --blauw-b: #64BFE2;
  --tekstgrijs: #4A4F6A;
  --lijn: #DCE3EE;
  /* kleur: nieuw in de retro-stijl */
  --papier: #FAFAF6;        /* paginabasis met stippenraster */
  --stip: #DEDED6;          /* stippen op papier */
  --geel-zacht: #FFF7E4;    /* vlak achter een uitgelicht venster */
  --lijn-sterk: #B4BACB;    /* rand van een rustig vlak (Ga naar) */
  --navy-vlak: #2A3470;     /* iets lichter navy, binnenvlak op navy */

  /* type */
  --kop: "Newsreader", Georgia, serif;
  --tekst: "Lato", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* vorm */
  --rand: 2px;
  --radius: 14px;
  --radius-klein: 10px;
  --radius-full: 999px;
  --schaduw: 8px;           /* harde schaduw van vensters en kaarten */
  --schaduw-knop: 4px;

  /* ruimte */
  --space-xs: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.25rem;
  --space-xl: 1.6rem;
  --space-3xl: 2rem;
  --space-5xl: 2.6rem;
  --space-section: 4.75rem;
  --breedte: 1200px;
  --lezen: 62ch;

  --tijd: 180ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--tekst);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tekstgrijs);
  background-color: var(--papier);
  background-image: radial-gradient(var(--stip) 1.2px, transparent 1.3px);
  background-size: 24px 24px;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 { font-family: var(--kop); color: var(--navy); margin: 0 0 0.5em; line-height: 1.15; }
h1 { font-weight: 400; font-size: clamp(2.4rem, 5vw, 3.6rem); letter-spacing: -0.01em; }
h2 { font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.01em; }
h3 { font-weight: 500; font-size: 1.5rem; }
h4 { font-weight: 500; font-size: 1.2rem; }

.lead { font-size: 1.2rem; max-width: var(--lezen); }
.klein { font-size: 0.95rem; }

.uitgelicht {
  font-family: var(--kop);
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1.35;
  color: var(--navy);
  border-left: 3px solid var(--geel);
  padding-left: 1em;
  margin: var(--space-xl) 0 0;
  max-width: 34ch;
}
.navy .uitgelicht, .uitgelicht--geel { color: var(--geel); }
.uitgelicht--los { border-left: 0; padding-left: 0; }

.ey {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 0.9em;
}
.navy .ey { color: var(--blauw-b); }

:focus-visible { outline: 3px solid var(--blauw-a); outline-offset: 3px; border-radius: 4px; }
.navy :focus-visible { outline-color: var(--geel); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 99; background: var(--geel); color: var(--navy); padding: 0.6em 1em; font-weight: 700; border-radius: var(--radius-klein); }
.skip:focus { top: 1rem; }

/* ---------- Lay-out ---------- */
.wrap { width: min(100% - 2rem, var(--breedte)); margin-inline: auto; }
.sectie { padding-block: var(--space-section); }
.sectie__kop { max-width: 48rem; margin-bottom: var(--space-5xl); }
.grid-2 { display: grid; gap: var(--space-5xl); align-items: start; }
.grid-3 { display: grid; gap: var(--space-3xl); }
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
}
@media (max-width: 640px) {
  :root { --space-section: 3.25rem; --schaduw: 6px; }
  body { font-size: 1rem; }
}

/* ---------- Venster ---------- */
.venster {
  background: var(--wit);
  border: var(--rand) solid var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--schaduw) var(--schaduw) 0 var(--venster-schaduw, var(--navy));
  overflow: hidden;
}
.venster__balk {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7em 1.1em;
  background: var(--papier);
  border-bottom: var(--rand) solid var(--navy);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
}
.venster__titel { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.venster__lijnen {
  flex: 1;
  height: 12px;
  min-width: 2rem;
  background: repeating-linear-gradient(to bottom, currentColor 0 2px, transparent 2px 4px);
  opacity: 0.55;
}
.venster__knopjes { display: flex; gap: 6px; margin-left: auto; flex: none; }
.venster__knopjes span {
  width: 14px; height: 14px;
  border: 2px solid var(--navy);
  border-radius: 3px;
  background: var(--wit);
}
.venster__knopjes span:first-child { background: var(--geel); }
.venster__inhoud { padding: var(--space-xl); }

/* donkere titelbalk op een licht venster (digibeta.exe) */
.venster--donkerebalk .venster__balk { background: var(--navy); color: var(--geel); }
.venster--donkerebalk .venster__lijnen { color: var(--blauw-b); opacity: 0.9; }
.venster--donkerebalk .venster__knopjes span { border-color: var(--blauw-b); background: transparent; }
.venster--donkerebalk .venster__knopjes span:first-child { background: var(--geel); }

/* volledig navy venster (sessie.exe) */
.venster--navy { background: var(--navy); --venster-schaduw: var(--geel); }
.venster--navy .venster__balk { background: var(--navy-diep); color: var(--geel); border-bottom-color: var(--navy-lijn); }
.venster--navy .venster__lijnen { color: var(--blauw-b); }
.venster--navy .venster__knopjes span { border-color: var(--blauw-b); background: transparent; }
.venster--navy .venster__knopjes span:first-child { background: var(--geel); }
.venster--navy, .venster--navy p { color: var(--blauw-b); }
.venster--navy h2, .venster--navy h3 { color: var(--wit); }
.venster--navy .uitgelicht { color: var(--geel); }

/* klein venster (labels in hoofdletters, geen lijnen) */
.venster--klein .venster__balk { font-family: var(--tekst); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.55em 0.9em; }
.venster--klein .venster__knopjes span { width: 11px; height: 11px; border-width: 1.5px; }

/* ---------- Knoppen ---------- */
.knop {
  --knop-bg: var(--navy);
  --knop-kleur: var(--wit);
  --knop-schaduw: var(--geel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.6em;
  font-family: var(--tekst);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  text-decoration: none;
  color: var(--knop-kleur);
  background: var(--knop-bg);
  border: var(--rand) solid var(--navy);
  border-radius: var(--radius-klein);
  box-shadow:
    var(--schaduw-knop) var(--schaduw-knop) 0 var(--knop-schaduw),
    inset 2px 2px 0 rgba(255, 255, 255, 0.28),
    inset -2px -3px 0 rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: transform var(--tijd) var(--ease), box-shadow var(--tijd) var(--ease), background-color var(--tijd) var(--ease);
}
.knop:hover {
  transform: translate(-1px, -1px);
  box-shadow:
    calc(var(--schaduw-knop) + 1px) calc(var(--schaduw-knop) + 1px) 0 var(--knop-schaduw),
    inset 2px 2px 0 rgba(255, 255, 255, 0.28),
    inset -2px -3px 0 rgba(0, 0, 0, 0.22);
}
.knop:active {
  transform: translate(3px, 3px);
  box-shadow:
    1px 1px 0 var(--knop-schaduw),
    inset 2px 2px 0 rgba(0, 0, 0, 0.15);
}
.knop:hover { background: var(--knop-bg-hover, var(--navy-diep)); }

.knop--geel { --knop-bg: var(--geel); --knop-bg-hover: var(--geel-diep); --knop-kleur: var(--navy); --knop-schaduw: var(--navy); }
.navy .knop--geel, .venster--navy .knop--geel { --knop-schaduw: var(--wit); }
.knop--lijn { --knop-bg: var(--wit); --knop-bg-hover: var(--koelwit); --knop-kleur: var(--navy); --knop-schaduw: var(--navy); }
.knop--lijn { box-shadow: var(--schaduw-knop) var(--schaduw-knop) 0 var(--navy), inset -2px -3px 0 var(--lijn); }
.knop--lijn:hover { box-shadow: calc(var(--schaduw-knop) + 1px) calc(var(--schaduw-knop) + 1px) 0 var(--navy), inset -2px -3px 0 var(--lijn); }
.knop--breed { width: 100%; }
.knop--groot { font-size: 1.3rem; padding: 0.9em 1.6em; }
.knoppen { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-xl); }

/* ---------- Pill ---------- */
.pil {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.35em 1em;
  border: var(--rand) solid var(--navy);
  border-radius: var(--radius-full);
  font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--navy);
  background: var(--wit);
}
.pil::before { content: ""; width: 0.75em; height: 0.75em; border-radius: 50%; background: var(--geel); border: 1.5px solid var(--navy); }
.navy .pil { background: transparent; border-color: var(--blauw-b); color: var(--blauw-b); border-width: 1.5px; font-size: 0.78rem; }
.navy .pil::before { border: 0; }

/* ---------- Kaart (prijs) ---------- */
.kaart {
  display: flex; flex-direction: column;
  background: var(--wit);
  border: var(--rand) solid var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--schaduw) var(--schaduw) 0 var(--navy);
  overflow: hidden;
}
.kaart__label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.6em 1.1em;
  border-bottom: var(--rand) solid var(--navy);
  font-family: var(--kop); font-size: 1.15rem; color: var(--navy);
  background: var(--koelwit);
}
.kaart__label small { font-family: var(--mono); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.kaart--geel .kaart__label { background: var(--geel); }
.kaart--zacht .kaart__label { background: var(--geel-zacht); }
.kaart__inhoud { display: flex; flex-direction: column; flex: 1; padding: var(--space-3xl) var(--space-xl) var(--space-xl); }
.kaart__inhoud .icoon { width: 3.2rem; height: 3.2rem; margin-bottom: var(--space-lg); color: var(--navy); }
.kaart__inhoud h3 { font-size: 1.6rem; }
.kaart__extra {
  font-size: 0.85rem; line-height: 1.55;
  background: var(--koelwit); border: 1px solid var(--lijn); border-radius: 6px;
  padding: 0.7em 0.9em; margin-top: 0.4em;
}
.kaart__inhoud .knop { margin-top: auto; }
.kaart__inhoud > p + .knop, .kaart__extra + .knop { margin-top: auto; }
.kaart__ruimte { flex: 1; min-height: var(--space-xl); }

.balk {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg);
  margin-top: var(--space-5xl);
  padding: var(--space-xl) var(--space-3xl);
  background: var(--wit);
  border: var(--rand) solid var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--schaduw) var(--schaduw) 0 var(--navy);
}
.balk p { margin: 0; max-width: 60ch; color: var(--navy); }

/* ---------- Icoon ---------- */
.icoon { width: 2.5rem; height: 2.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Navy paneel (Waar Digibeta past) ---------- */
.paneel {
  background-color: var(--navy);
  background-image: radial-gradient(rgba(100, 191, 226, 0.14) 1.2px, transparent 1.3px);
  background-size: 22px 22px;
  border-radius: var(--radius);
  box-shadow: var(--schaduw) var(--schaduw) 0 var(--navy-diep);
  padding: clamp(1.6rem, 4vw, 3.5rem);
  color: var(--blauw-b);
}
.paneel h2 { color: var(--wit); }
.paneel .grid-2 { align-items: center; }

.lagen { display: grid; gap: 0.9rem; }
.laag {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.9em 1.1em;
  background: var(--wit);
  border-radius: 8px;
  border: 1px solid var(--navy-lijn);
}
.laag strong { display: block; font-family: var(--kop); font-weight: 500; font-size: 1.15rem; color: var(--navy); }
.laag span { font-size: 0.92rem; color: var(--tekstgrijs); }
.laag--digibeta { background: var(--geel); margin-inline: -0.5rem; padding-block: 1.2em; }
.laag--digibeta span { color: var(--navy); }
.laag--basis { background: var(--navy-diep); border-color: var(--navy-lijn); }
.laag--basis strong { color: var(--wit); }
.laag--basis span { color: var(--blauw-b); }
.laag__tag {
  flex: none; font-weight: 900; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--navy); background: var(--wit); border: 1.5px solid var(--navy); border-radius: 4px; padding: 0.3em 0.7em;
}

/* ---------- Tools (Copilot en Claude) ---------- */
.tool { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 640px) { .tool { grid-template-columns: 8.5rem 1fr; } }
.diskette { width: 8.5rem; }
.tool p:not(.uitgelicht) { color: var(--tekstgrijs); }
.vraag-antwoord { margin-top: 0; }
.vraag-antwoord h3 { font-weight: 400; font-size: 1.7rem; }
.vraag-antwoord strong { color: var(--navy); }

/* ---------- Sessie ---------- */
.sessie__kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: var(--space-xl); }
.sessie__kop h2 { margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.duur {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--mono); font-weight: 700; font-size: 0.8rem; color: var(--blauw-b);
  border: 1.5px solid var(--navy-lijn); border-radius: 6px; padding: 0.4em 0.8em; background: var(--navy-diep);
}
.duur__balk { width: 6.5rem; height: 0.7rem; background: repeating-linear-gradient(to right, var(--geel) 0 5px, transparent 5px 7px); }
.duur__tijd { color: var(--geel); font-size: 1rem; }
.stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl); }
.stappen li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1.1rem; align-items: start; }
.stappen .icoon { color: var(--blauw-b); width: 2.6rem; height: 2.6rem; }

/* chat.exe illustratie */
.chat { display: grid; gap: 1.4rem; padding: var(--space-xl); }
.bel { border: var(--rand) solid var(--navy); border-radius: 22px; padding: 0.9rem 1.1rem; background: var(--papier); display: grid; gap: 0.5rem; max-width: 80%; }
.bel i { display: block; height: 0.65rem; border-radius: 99px; background: #B8BBC8; }
.bel--rechts { justify-self: end; background: var(--geel-zacht); border-bottom-right-radius: 6px; }
.bel--links { border-bottom-left-radius: 6px; }
.bel__bestand { display: flex; align-items: center; gap: 0.7rem; border: var(--rand) solid var(--navy); border-radius: 10px; background: var(--wit); padding: 0.45rem 0.7rem; }
.bel__bestand .icoon { width: 1.4rem; height: 1.4rem; color: var(--navy); }
.bel__bestand i { flex: 1; min-width: 6rem; }
.bel--typt { display: flex; gap: 0.35rem; width: max-content; padding: 0.8rem 1rem; }
.bel--typt b { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #9497AE; }
.invoer { display: flex; align-items: center; justify-content: space-between; border: var(--rand) solid var(--navy); border-radius: 999px; padding: 0.4rem 0.45rem 0.4rem 1.1rem; }
.invoer__cursor { width: 2px; height: 1.4rem; background: var(--navy); }
.invoer__knop { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--geel); border: var(--rand) solid var(--navy); color: var(--navy); }
.invoer__knop .icoon { width: 1.2rem; height: 1.2rem; stroke-width: 2.5; }

/* ---------- Over (foto-venster) ---------- */
.portret { aspect-ratio: 3 / 4; max-width: 22rem; }
.portret .venster__inhoud { height: calc(100% - 2.4rem); background: var(--koelwit-diep); display: grid; place-items: center; padding: 0; }
.portret .icoon { width: 3rem; height: 3rem; color: var(--blauw-a); opacity: 0.7; }

/* ---------- Ga naar / Hero-venster ---------- */
.uitgelicht-blok { background: var(--geel-zacht); border: var(--rand) solid var(--navy); border-radius: var(--radius-klein); padding: var(--space-xl); }
.uitgelicht-blok h2 { font-size: 2rem; margin-top: 0.6em; }
.gaan {
  margin-top: var(--space-lg);
  background: var(--koelwit); border: var(--rand) solid var(--lijn-sterk); border-radius: var(--radius-klein);
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
}
.gaan ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.gaan a {
  display: block; padding: 0.6em 0.9em;
  background: var(--wit); border: var(--rand) solid var(--navy); border-radius: 6px;
  font-weight: 700; color: var(--navy); text-decoration: none;
  transition: background-color var(--tijd) var(--ease), transform var(--tijd) var(--ease);
}
.gaan a:hover { background: var(--geel-zacht); transform: translateY(-1px); }
.contactblok { margin-top: var(--space-lg); background: var(--navy); border-radius: var(--radius-klein); padding: var(--space-xl); }
.contactblok .ey { color: var(--blauw-b); }
.contactblok p:not(.ey) { font-family: var(--kop); font-style: italic; font-size: 1.35rem; color: var(--wit); }
.feiten { margin: var(--space-xl) 0 0; display: grid; }
.feiten div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6em 0; border-bottom: 1.5px solid var(--lijn); font-family: var(--mono); font-size: 0.92rem; }
.feiten div:last-child { border-bottom: 0; }
.feiten dt { color: var(--tekstgrijs); }
.feiten dd { margin: 0; font-weight: 700; color: var(--navy); text-align: right; }

/* ---------- Kop en navigatie ---------- */
.kop { padding-block: 1.1rem; }
.kop .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.merk { display: inline-flex; align-items: center; text-decoration: none; }
.merk img { width: 226px; height: auto; } /* logo nooit smaller dan 226px */
.voet__logo { width: 226px; height: auto; margin-bottom: var(--space-xl); }
@media (max-width: 560px) { .kop .knop { display: none; } } /* naast het logo is er op gsm geen plaats; de gele knop staat in het venster */
.merk__tekst { font-family: var(--mono); font-weight: 700; font-size: 1.15rem; color: var(--navy); }
.nav { display: none; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav a { font-weight: 700; color: var(--navy); text-decoration: none; background: linear-gradient(var(--geel), var(--geel)) left bottom / 0 3px no-repeat; transition: background-size var(--tijd) var(--ease); padding-bottom: 2px; }
.nav a:hover { background-size: 100% 3px; }
@media (min-width: 900px) { .nav { display: flex; } }
.kop .knop { font-size: 0.95rem; padding: 0.65em 1.2em; }

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-3xl) var(--space-section); }
.hero .grid-2 { align-items: center; }
.hero h1 { margin-top: 0.5em; }
.hero__venster { max-width: 30rem; width: 100%; justify-self: center; }

/* ---------- FAQ ---------- */
.faq .venster__inhoud { padding-block: 0.4rem; }
.faq details { border-bottom: 1.5px solid var(--lijn); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1em 0; cursor: pointer; list-style: none;
  font-family: var(--kop); font-size: 1.3rem; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem; border: 1.5px solid var(--navy); border-radius: 50%;
  font-family: var(--tekst); font-size: 1.1rem; line-height: 1;
  transition: background-color var(--tijd) var(--ease), transform var(--tijd) var(--ease);
}
.faq details[open] summary::after { content: "\00D7"; background: var(--geel); }
.faq details > div { padding: 0 0 1.2em; max-width: var(--lezen); }

/* ---------- Voettekst ---------- */
.voet { background: var(--navy); color: var(--blauw-b); padding-block: var(--space-5xl) var(--space-3xl); margin-top: var(--space-section); }
.voet a { color: var(--wit); text-decoration: none; }
.voet a:hover { text-decoration: underline; text-decoration-color: var(--geel); text-underline-offset: 4px; }
.voet__boven { display: grid; gap: var(--space-3xl); }
@media (min-width: 900px) { .voet__boven { grid-template-columns: 2fr 1fr 1fr; } }
.voet h2 { color: var(--wit); font-size: 1.6rem; }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.voet__onder { margin-top: var(--space-5xl); padding-top: var(--space-lg); border-top: 1px solid var(--navy-lijn); font-family: var(--mono); font-size: 0.82rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }

/* ---------- Beweging ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}