/**
 * Hedilla Park — het fundament: tokens, basis, knoppen, kop, voet, kruimelpad,
 * de bovenkant van de pagina en de oproepbalk. De secties staan in secties.css.
 *
 * De waarden komen uit de ontwerpoplevering (`tokens.css` en de inline stijlen
 * in `source/KP*.dc.html`). Waar een getal hier afwijkt van het ontwerp is dat
 * een fout, geen keuze: het ontwerp is de waarheid.
 *
 * ┌─ Twee dingen uit de gedeelde laag worden hier bewust overschreven ────────┐
 * │ 1. --inhoud-max en --marge. De gedeelde tokens zetten de marge op 48px    │
 * │    boven 1024px; dit ontwerp rekent met een gutter van 24px en een        │
 * │    container van 1280px. Zonder deze regel is élke sectie 48 pixels       │
 * │    smaller dan in het ontwerp, en dat zie je niet als fout: beelden       │
 * │    worden wat lager en teksten lopen wat eerder om.                       │
 * │ 2. Het tikdoel van 44px op knoppen, velden en navigatielinks. Dat maakt  │
 * │    de voet tientallen pixels te hoog en de onderwerpknoppen op de        │
 * │    contactpagina 44 in plaats van 42, waardoor ze op een tweede regel    │
 * │    anders uitkomen. Het tikdoel blijft gelden waar het om gaat: op een   │
 * │    aanraakscherm.                                                        │
 * └───────────────────────────────────────────────────────────────────────────┘
 */

/**
 * Zie punt 2 hierboven.
 *
 * **Niet in een `@layer`.** Dat was de eerste poging, en die deed precies het
 * omgekeerde: een regel in een laag verliest het altijd van een ongelaagde
 * regel, hoe specifiek hij ook is, en de regel in `tokens.css` is ongelaagd.
 * De voet bleef daardoor 58 pixels te hoog. Zo staat het goed: dezelfde
 * specificiteit, maar later in de volgorde — en deze stylesheet wordt na
 * tokens.css geladen.
 */
nav a,
button,
input,
select,
textarea,
.knop {
  min-height: 0;
}

/**
 * Op een aanraakscherm geldt het tikdoel van 44 pixels gewoon; daar gaat de
 * afspraak over. Met een muis telt de maat uit het ontwerp, en die haalt overal
 * ruim de 24 pixels van WCAG 2.5.8: de kleinste knop in dit ontwerp is de
 * snelkeuze bij de oppervlakte, en die is 40 hoog.
 */
@media (hover: none) and (pointer: coarse) {
  nav a,
  button,
  input,
  select,
  textarea,
  .knop {
    min-height: var(--tikdoel);
  }
}

:root {
  /* Kleur */
  --groen: #1f3b33;
  --dennen: #3e6b5a;
  --messing: #b08d57;
  --messing-donker: #86683a;
  --conversie: #d0482c;
  --conversie-tekst: #ffffff;
  --zand: #e6dfcf;
  --kalk: #f4f4ef;
  --wit: #ffffff;
  --antraciet: #1d2421;
  --muted: #5c6660;
  --lijn: #e5e6df;
  --invoer-rand: #c9ccc2;
  --tabel-lijn: #d9dad2;
  --lijn-op-donker: rgba(244, 244, 239, 0.16);
  --lijn-op-donker-sterk: rgba(244, 244, 239, 0.22);

  /* Typografie. De twee families komen uit next/font, zie layout.tsx. */
  --kop-font: var(--font-marcellus), Georgia, serif;
  --tekst-font: var(--font-jost), system-ui, sans-serif;
  --h1: clamp(44px, 6.2vw, 84px);
  --h1-aanvraag: clamp(38px, 5vw, 56px);
  --h2: clamp(30px, 3.4vw, 40px);
  --h3: clamp(24px, 2.4vw, 28px);
  --oproep-kop: clamp(44px, 6.4vw, 88px);
  --lead: 20px;
  --body: 17px;
  --small: 14px;
  --label: 13px;

  /* Maat en ruimte */
  --container: 1280px;
  --gutter: 24px;
  --gap: 24px;
  --sectie-y: clamp(72px, 9vw, 128px);
  --kop-h: 88px;
  --kop-h-aanvraag: 80px;

  /* Beweging */
  --snel: 250ms ease-out;
  --langzaam: 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --onthullen: 800ms cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Zie punt 1 hierboven: dit ontwerp rekent met een gutter van 24px. */
  --inhoud-max: 1328px;
  --marge: 24px;
}

@media (min-width: 768px) {
  :root {
    --marge: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --marge: 24px;
  }
}

/* ────────────────────────────────────────────────────────────── basis */

html {
  /* De sticky kopbalk is 88px hoog; een anker moet daaronder uitkomen. */
  scroll-padding-top: var(--kop-h);
}

body {
  margin: 0;
  background: var(--wit);
  color: var(--antraciet);
  font: 400 var(--body) / 1.7 var(--tekst-font);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--groen);
  text-decoration-color: var(--messing);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

a:hover {
  color: var(--groen);
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  font-family: var(--kop-font);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

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

/* Zolang het menu op een telefoon openstaat scrollt de pagina er niet onder door. */
html.menu-open,
html.menu-open body {
  overflow: hidden;
}

.overslaan:focus {
  background: var(--groen);
  color: var(--kalk);
}

/* ─────────────────────────────────────────────── het label met het streepje */

/**
 * Komt op bijna elke sectie terug: kapitalen met een streepje van 24×3 ervoor.
 * Op een groene achtergrond wordt de tekst zand in plaats van messing-donker.
 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font: 500 var(--label) / 1.3 var(--tekst-font);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--messing-donker);
}

.eyebrow::before {
  content: '';
  flex: none;
  width: 24px;
  height: 3px;
  background: var(--messing);
}

.op-donker .eyebrow,
.eyebrow.op-donker {
  color: var(--zand);
}

/** Het kleinere kopje boven een kolom of een lijst. */
.kolomlabel {
  display: block;
  font: 500 12px/1.3 var(--tekst-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--messing-donker);
}

.op-donker .kolomlabel {
  color: var(--zand);
}

/* ────────────────────────────────────────────────────────────── de knop */

/**
 * De knop uit het ontwerp: een vlak met de tekst links en een vierkante pil met
 * een pijl rechts. Haaks, geen radius, rand via een inset box-shadow.
 *
 * De hover-animatie van de pijl is pure CSS en geen state in React: de pijl
 * schuift één keer rechts uit beeld en komt links weer binnen. Daardoor kan de
 * knop een servercomponent blijven.
 */
@keyframes hedArrow {
  0% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(28px);
  }
  46% {
    transform: translateX(-28px);
  }
  100% {
    transform: translateX(0);
  }
}

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  height: 54px;
  min-height: 54px;
  padding: 6px 6px 6px 24px;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
  font: 500 15px/1 var(--tekst-font);
  letter-spacing: 0.03em;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    background var(--snel),
    color var(--snel);
}

.knop__pil {
  flex: none;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition:
    background var(--snel),
    color var(--snel);
}

.knop__pil svg {
  display: block;
}

.knop:hover .knop__pil svg {
  animation: hedArrow 0.45s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.knop--sm {
  height: 42px;
  min-height: 42px;
  padding: 5px 5px 5px 18px;
  gap: 18px;
  font-size: 14px;
}

.knop--sm .knop__pil {
  width: 32px;
  height: 32px;
}

.knop--vol {
  display: flex;
  width: 100%;
}

/* primary — in beide tonen gelijk */
.knop--primary {
  background: var(--conversie);
  color: var(--conversie-tekst);
  box-shadow: inset 0 0 0 1.5px transparent;
}

.knop--primary .knop__pil {
  background: var(--groen);
  color: var(--kalk);
}

.knop--primary:hover {
  background: color-mix(in srgb, var(--conversie) 92%, #000);
  color: var(--conversie-tekst);
}

.knop--primary:hover .knop__pil {
  background: var(--wit);
  color: var(--conversie);
}

/* secondary, lichte sectie */
.knop--secondary {
  background: var(--groen);
  color: var(--kalk);
  box-shadow: inset 0 0 0 1.5px transparent;
}

.knop--secondary .knop__pil {
  background: var(--kalk);
  color: var(--groen);
}

.knop--secondary:hover {
  background: var(--dennen);
  color: var(--kalk);
}

.knop--secondary:hover .knop__pil {
  background: var(--wit);
  color: var(--dennen);
}

/* secondary, donkere sectie */
.knop--secondary.knop--donker {
  background: var(--kalk);
  color: var(--groen);
}

.knop--secondary.knop--donker .knop__pil {
  background: var(--groen);
  color: var(--kalk);
}

.knop--secondary.knop--donker:hover {
  background: var(--wit);
  color: var(--groen);
}

.knop--secondary.knop--donker:hover .knop__pil {
  background: var(--groen);
  color: var(--wit);
}

/* outline, lichte sectie */
.knop--outline {
  background: transparent;
  color: var(--groen);
  box-shadow: inset 0 0 0 1.5px var(--groen);
}

.knop--outline .knop__pil {
  background: var(--groen);
  color: var(--kalk);
}

.knop--outline:hover {
  background: var(--groen);
  color: var(--kalk);
}

.knop--outline:hover .knop__pil {
  background: var(--wit);
  color: var(--groen);
}

/* outline, donkere sectie */
.knop--outline.knop--donker {
  color: var(--kalk);
  box-shadow: inset 0 0 0 1.5px var(--kalk);
}

.knop--outline.knop--donker .knop__pil {
  background: var(--kalk);
  color: var(--groen);
}

.knop--outline.knop--donker:hover {
  background: var(--kalk);
  color: var(--groen);
}

.knop--outline.knop--donker:hover .knop__pil {
  background: var(--groen);
  color: var(--wit);
}

/** Een link met een pijltje erachter, zonder vlak eromheen. */
.pijllink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 15px/1.3 var(--tekst-font);
  color: var(--groen);
  text-decoration: none;
}

.pijllink:hover {
  color: var(--dennen);
}

.pijllink svg {
  flex: none;
  stroke: var(--messing);
}

/* ────────────────────────────────────────────────────────── de kopbalk */

.site-kop {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--kop-h);
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
}

.kop-rij {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.kop-logo {
  display: block;
  flex: none;
  text-decoration: none;
}

.kop-logo svg {
  display: block;
  height: 44px;
  width: auto;
}

.kop-nav {
  display: flex;
  gap: 48px;
}

.kop-nav a {
  position: relative;
  padding: 10px 0;
  font: 500 15px/1 var(--tekst-font);
  color: var(--groen);
  text-decoration: none;
  white-space: nowrap;
}

/* De streep onder een menu-item schaalt van links in. */
.kop-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--messing);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--snel);
}

.kop-nav a:hover::after,
.kop-nav a:focus-visible::after,
.kop-nav a[aria-current='page']::after {
  transform: scaleX(1);
}

.kop-acties {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  margin-left: 16px;
}

/** De hamburger. Twee streepjes die naar een kruis draaien. */
.kop-schakel {
  display: none;
  width: 48px;
  height: 48px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--groen);
  cursor: pointer;
}

.kop-schakel span {
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  transition: transform var(--snel);
}

.site-kop.open .kop-schakel span:first-child {
  transform: translateY(4px) rotate(45deg);
}

.site-kop.open .kop-schakel span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

/**
 * Onder 1100px schakelt de navigatie naar een hamburger.
 *
 * Dat is geen breekpunt uit de schaal van Klubb (375/768/1024/1440) en dat is
 * met opzet: op 1024px passen het logo van 270px, vier menu-items met een gap
 * van 48px en de knop van 270px niet naast elkaar, en dan loopt de kopbalk
 * buiten het scherm. Het ontwerp rekent daarom met 1100. Zie CONVENTIES.md.
 */
@media (max-width: 1099px) {
  .kop-schakel {
    display: flex;
  }

  .kop-menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--kop-h);
    z-index: 40;
    background: var(--wit);
    flex-direction: column;
    padding: 8px var(--gutter) 32px;
    overflow-y: auto;
    display: none;
  }

  .site-kop.open .kop-menu {
    display: flex;
  }

  .kop-nav {
    flex-direction: column;
    gap: 0;
  }

  .kop-nav a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--lijn);
    font: 400 32px/1.1 var(--kop-font);
  }

  /* In het mobiele menu staat rechts een streepje in plaats van een
     onderstreping die inschuift. */
  .kop-nav a::after {
    content: '';
    position: static;
    width: 24px;
    height: 3px;
    flex: none;
    transform: none;
  }

  .kop-acties {
    margin: auto 0 0;
    padding-top: 40px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .kop-acties .knop {
    display: flex;
    width: 100%;
  }
}

@media (min-width: 1100px) {
  .kop-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    flex: 1;
  }
}

/**
 * Onder 375 pixels past het logo van 270 bij 44 niet meer naast de hamburger.
 *
 * 375 is de kleinste breedte waarop wij ontwerpen en het ontwerp rekent vanaf
 * 390, dus hieronder gaat het er niet om dat het mooi is maar dat de pagina
 * niet opzij schuift. Het logo houdt zijn verhouding en krimpt mee; op een
 * iPhone SE van de eerste generatie scheelt dat vijf pixels horizontale scroll.
 */
@media (max-width: 374px) {
  .kop-logo {
    flex: 0 1 auto;
    min-width: 0;
  }

  .kop-logo svg {
    height: auto;
    max-width: 100%;
  }

  .aanvraag-kop__rechts {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 28px;
  }
}

/* ───────────────────────────────────── de kale kopbalk van de aanvraag */

.aanvraag-kop {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--kop-h-aanvraag);
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
}

.aanvraag-kop .kop-rij {
  gap: 24px;
}

.aanvraag-kop .kop-logo svg {
  height: 40px;
}

.aanvraag-kop__rechts {
  display: flex;
  align-items: center;
  gap: 28px;
}

.aanvraag-kop__tel {
  font: 500 15px/1 var(--tekst-font);
  color: var(--groen);
  text-decoration: none;
}

.aanvraag-kop__tel:hover {
  text-decoration: underline;
  text-decoration-color: var(--messing);
}

.aanvraag-kop__terug {
  font: 500 15px/1.4 var(--tekst-font);
  color: var(--groen);
  text-decoration: underline;
  text-decoration-color: var(--messing);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: text-underline-offset 0.2s;
}

.aanvraag-kop__terug:hover {
  text-underline-offset: 8px;
}

@media (max-width: 767px) {
  .aanvraag-kop__tel {
    display: none;
  }
}

/* ──────────────────────────────────────────────────────── het kruimelpad */

.kruimels {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: var(--small);
  color: var(--muted);
  margin-bottom: clamp(32px, 4vw, 56px);
}

.kruimels a {
  color: var(--muted);
  text-decoration: none;
}

.kruimels a:hover {
  color: var(--groen);
}

.kruimels span[aria-hidden] {
  width: 12px;
  height: 1px;
  background: var(--messing);
  flex: none;
}

.kruimels [aria-current='page'] {
  color: var(--groen);
}

/* ────────────────────────────────────────── de bovenkant van de pagina */

/** Homepage: een foto over de volle hoogte met de tekst eronderin. */
.hero--home {
  position: relative;
  background: var(--groen);
  color: var(--kalk);
}

.hero--home .hero-doek {
  position: relative;
  width: 100%;
  min-height: clamp(560px, calc(100vh - var(--kop-h)), 880px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--groen);
}

/* Het beeld is 112% hoog en staat 6% hoger, zodat het kan meebewegen zonder
   dat er een rand onderuit komt. */
.hero--home .hero-beeld {
  position: absolute;
  left: 0;
  top: -6%;
  width: 100%;
  height: 112%;
  object-fit: cover;
  will-change: transform;
}

.hero--home .hero-sluier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(29, 36, 33, 0.82) 0%,
      rgba(29, 36, 33, 0.45) 45%,
      rgba(29, 36, 33, 0.12) 100%
    ),
    linear-gradient(to right, rgba(31, 59, 51, 0.55) 0%, rgba(31, 59, 51, 0) 65%);
}

.hero--home .hero-inhoud {
  position: relative;
  width: 100%;
  max-width: var(--inhoud-max);
  margin: 0 auto;
  padding: clamp(120px, 14vw, 200px) var(--gutter) clamp(56px, 7vw, 104px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.hero--home h1 {
  max-width: 16ch;
  font-size: var(--h1);
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--kalk);
}

.hero--home .hero-intro p {
  margin: 0;
  max-width: 46ch;
  font: 400 var(--lead) / 1.6 var(--tekst-font);
  color: var(--kalk);
}

.hero--home .knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

/**
 * Subpagina: de titel links, de introtekst rechts.
 *
 * Geen marge aan de bovenkant: die zit al in `.kruimelbalk`, de strook met het
 * kruimelpad die er direct boven staat. Stond hij hier ook, dan telde hij twee
 * keer en begon elke subpagina 72 pixels te laag.
 */
.hero--sub {
  background: var(--wit);
  padding: 0;
}

.hero--sub .hero-rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 24px 64px;
  align-items: end;
}

.hero--sub .hero-titel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero--sub h1 {
  font-size: var(--h1);
  line-height: 1.02;
  color: var(--groen);
}

.hero--sub .hero-intro p {
  margin: 0;
  font: 400 var(--lead) / 1.6 var(--tekst-font);
  color: var(--muted);
  max-width: 44ch;
}

/**
 * De brede foto onder de intro, alleen op de historiepagina.
 *
 * `width: 100%` staat er bewust bij, en niet in het ontwerp.
 * `aspect-ratio` met een `min-height` erbij werkt twee kanten op: zodra de
 * hoogte van 280 wint, rekent de browser de bréédte terug uit de verhouding en
 * wordt het vlak 653 pixels. Onder 640 pixels liep de pagina daardoor buiten
 * het scherm — ook in het prototype van de oplevering, daar al vanaf 677
 * pixels scrollbreedte op een scherm van 500. Met een vaste breedte blijft de
 * verhouding 21:9 zolang die hoger uitkomt dan 280, en wordt het vlak op een
 * telefoon gewoon wat hoger.
 */
.hero--sub .hero-breed {
  margin-top: clamp(48px, 6vw, 80px);
  width: 100%;
  aspect-ratio: 21 / 9;
  min-height: 280px;
  overflow: hidden;
  background: var(--zand);
}

.hero--sub .hero-breed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/**
 * De ruimte onder de hero hoort bij de sectie die erop volgt, want die staat in
 * dit ontwerp in dezelfde witte strook: de pluspunten op Mogelijkheden, de
 * plattegrond op Wie zit waar. Daarom hier niets, en de maat bij het blok zelf.
 *
 * Alleen met een brede foto eronder sluit de hero zijn eigen strook af, zoals
 * op de historiepagina.
 */
.hero--sub.hero--met-beeld {
  padding-bottom: clamp(56px, 7vw, 96px);
}

/** Aanvraagpagina: eigen maat, geen kruimelpad. */
.hero--aanvraag {
  background: var(--kalk);
  padding: clamp(40px, 6vw, 80px) 0 0;
}

.hero--aanvraag .hero-titel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hero--aanvraag h1 {
  font-size: var(--h1-aanvraag);
  line-height: 1.1;
  color: var(--groen);
}

.hero--aanvraag .hero-intro p {
  margin: 0;
  max-width: 50ch;
  font: 400 var(--lead) / 1.6 var(--tekst-font);
  color: var(--antraciet);
}

/* ─────────────────────────────────────────────────────── de oproepbalk */

.oproepbalk {
  position: relative;
  background: var(--groen);
  color: var(--kalk);
  overflow: hidden;
}

.oproepbalk .binnen {
  padding-block: clamp(72px, 9vw, 128px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 40px 64px;
  align-items: end;
}

.oproepbalk h2 {
  font-size: var(--oproep-kop);
  line-height: 1;
  color: var(--kalk);
}

.oproepbalk__rechts {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.oproepbalk__rechts p {
  margin: 0;
  font: 400 var(--lead) / 1.6 var(--tekst-font);
  color: var(--zand);
  max-width: 40ch;
}

/* ──────────────────────────────────────────────────────────── de voet */

.site-voet {
  position: relative;
  background: var(--groen);
  color: var(--kalk);
  overflow: hidden;
}

.site-voet .binnen {
  padding-block: clamp(72px, 8vw, 104px) 32px;
  border-top: 1px solid var(--lijn-op-donker);
}

.voet-boven {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 48px var(--gap);
}

.voet-merk {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.voet-merk svg {
  height: 44px;
  width: auto;
  max-width: 100%;
  display: block;
  align-self: flex-start;
}

.voet-merk p {
  margin: 0;
  color: var(--zand);
  font-size: 16px;
  max-width: 30ch;
}

.voet-kolom {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.voet-kolom nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.voet-kolom a,
.voet-kolom address a {
  color: var(--kalk);
  font-size: 16px;
  text-decoration: none;
}

.voet-kolom a:hover {
  color: var(--kalk);
  text-decoration: underline;
  text-decoration-color: var(--messing);
}

.voet-kolom address {
  font-size: 16px;
  line-height: 1.6;
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.voet-adres {
  display: block;
}

.voet-onder {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--lijn-op-donker);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--small);
  color: var(--zand);
}

.voet-onder a {
  color: var(--zand);
  text-decoration: none;
}

.voet-onder a:hover {
  color: var(--kalk);
}

.voet-onder nav {
  display: flex;
  gap: 24px;
}

/** De voet van de aanvraagpagina is één regel. */
.aanvraag-voet {
  background: var(--groen);
  color: var(--kalk);
}

.aanvraag-voet .binnen {
  padding-block: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  font-size: var(--small);
  color: var(--zand);
}

.aanvraag-voet a {
  color: var(--kalk);
  text-decoration: none;
}

.aanvraag-voet a:hover {
  text-decoration: underline;
  text-decoration-color: var(--messing);
}

.aanvraag-voet nav {
  display: flex;
  gap: 24px;
}

.aanvraag-voet nav a {
  color: var(--zand);
}

.aanvraag-voet nav a:hover {
  color: var(--kalk);
  text-decoration: none;
}

/* ──────────────────────────────────────────────── 404 en losse pagina's */

.niet-gevonden {
  background: var(--wit);
  padding-block: clamp(80px, 10vw, 160px);
}

.niet-gevonden .binnen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.niet-gevonden h1 {
  font-size: var(--h2);
  line-height: 1.15;
  color: var(--groen);
}

.niet-gevonden p {
  margin: 0;
  font: 400 var(--lead) / 1.6 var(--tekst-font);
  color: var(--muted);
  max-width: 50ch;
}

/* ───────────────────────────────────────────────────── scroll-onthulling */

/**
 * Elementen die onder de vouw staan komen omhoog in beeld. De klasse wordt
 * door een clientcomponent gezet; zonder JavaScript staat alles gewoon zichtbaar,
 * en dat is met opzet.
 */
[data-onthul='wacht'] {
  opacity: 0;
  transform: translateY(28px);
}

[data-onthul='aan'] {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--onthullen),
    transform var(--onthullen);
}

@media (prefers-reduced-motion: reduce) {
  [data-onthul] {
    opacity: 1 !important;
    transform: none !important;
  }
}