/* =========================================================================
   Autorijschool Koerhuis, Deventer
   Eén stylesheet, alle kleuren en maten als custom properties in :root.

   Kleur komt uit het eigen logo: de appelgroene schijf (#99C100) en de
   bijna-zwarte letters (#1B1B1F). Niets anders is toegevoegd.

   Visuele signatuur: de groene schijf uit het logo keert overal terug, als
   nummer bij een stap, als drager van een dienstpictogram en als accent
   achter de prijskaarten. Daarnaast loopt er een onderbroken groene
   wegmarkering tussen de secties door, de streep die elke leerling in
   Deventer op de weg ziet.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts -- */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/anton-400.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin-var.woff2") format("woff2");
}

/* --------------------------------------------------------------- tokens -- */
:root {
  --gras: #99c100;          /* exact het groen van het logo */
  --gras-donker: #7ea100;   /* hover op de groene knop */
  --gras-diep: #566f00;     /* groen als tekstkleur op wit, leesbaar */
  --gras-waas: #f0f6dd;     /* zeer lichte groene vulling */

  --inkt: #16181a;          /* de letterkleur van het logo, iets dieper */
  --asfalt: #22262a;        /* donkere secties en footer */
  --asfalt-licht: #31363c;
  --grijs: #545c64;         /* lopende tekst secundair */
  --lijn: #e2e6dc;
  --mist: #f5f7f1;          /* rustige sectieachtergrond */
  --wit: #ffffff;
  --error: #a4232b;

  --font-display: "Anton", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body: "Figtree", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  --maat-eyebrow: 0.78rem;
  --maat-klein: 0.9rem;
  --maat-basis: 1.02rem;
  --maat-lead: clamp(1.06rem, 1rem + 0.35vw, 1.22rem);
  --maat-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --maat-h2: clamp(1.75rem, 1.3rem + 2vw, 2.9rem);
  --maat-h1: clamp(2.1rem, 1.5rem + 3vw, 3.9rem);

  --wrap: 1140px;
  --wrap-smal: 760px;
  --radius: 14px;
  --radius-s: 9px;
  --schaduw: 0 1px 2px rgba(22, 24, 26, 0.05), 0 8px 24px rgba(22, 24, 26, 0.07);
  --schaduw-diep: 0 18px 48px rgba(22, 24, 26, 0.18);

  /* tokens van het leadformulier, zie lead-form.css in de skill */
  --form-surface: #ffffff;
  --form-text: #16181a;
  --form-placeholder: #7b838b;
  --form-border: #c9d0c2;
  --form-focus-ring: var(--gras-diep);
  --form-color-scheme: light;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--wit);
  color: var(--inkt);
  font-family: var(--font-body);
  font-size: var(--maat-basis);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;        /* hoort altijd bij max-width, anders wringt het met
                          de width/height-attributen op de <img> zelf */
  display: block;
}

a { color: var(--gras-diep); }
a:hover { color: var(--inkt); }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 0.5em;
}
h1 { font-size: var(--maat-h1); }
h2 { font-size: var(--maat-h2); }
h3 { font-size: var(--maat-h3); letter-spacing: 0.02em; }
h4 {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.02rem;
}
p { margin: 0 0 1.05em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.15rem; }
li { margin-bottom: 0.4em; }
strong { font-weight: 700; }

.wrap {
  width: min(100% - 2.4rem, var(--wrap));
  margin-inline: auto;
}
.wrap--smal { width: min(100% - 2.4rem, var(--wrap-smal)); }

.section { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; }
.section--mist { background: var(--mist); }
.section--donker { background: var(--asfalt); color: #eef0ec; }
.section--donker h2,
.section--donker h3 { color: var(--wit); }
.section--donker a { color: var(--gras); }
.section--donker a:hover { color: var(--wit); }

.overslaan {
  position: absolute;
  left: -9999px;
}
.overslaan:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: var(--gras);
  color: var(--inkt);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-s);
  font-weight: 700;
}

.visueel-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* -------------------------------------------------------------- eyebrow -- */
/* de groene schijf uit het logo, in het klein, als opmaat van een sectie */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--maat-eyebrow);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gras-diep);
  margin: 0 0 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: var(--gras);
  flex: none;
}
.section--donker .eyebrow { color: var(--gras); }

/* --------------------------------------------------------- wegmarkering -- */
/* onderbroken streep zoals op het wegdek, als scheiding tussen secties */
.markering {
  height: 6px;
  background-image: repeating-linear-gradient(
    to right,
    var(--gras) 0 34px,
    transparent 34px 62px
  );
}
.markering--dun { height: 4px; opacity: 0.75; }

/* --------------------------------------------------------------- knoppen -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn svg { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

.btn--primary {
  background: var(--gras);
  color: var(--inkt);
  border-color: var(--gras);
}
.btn--primary:hover { background: var(--gras-donker); border-color: var(--gras-donker); color: var(--inkt); }

.btn--ghost {
  background: transparent;
  color: var(--inkt);
  border-color: var(--inkt);
}
.btn--ghost:hover { background: var(--inkt); color: var(--wit); }

.btn--licht {
  background: rgba(255, 255, 255, 0.1);
  color: var(--wit);
  border-color: rgba(255, 255, 255, 0.55);
}
.btn--licht:hover { background: var(--wit); color: var(--inkt); border-color: var(--wit); }

.btn--klein { padding: 0.6rem 1.1rem; font-size: 0.92rem; }

.knoprij {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 1.4rem 0 0;
}

/* ------------------------------------------------------------------ kop -- */
.kop {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
}
.kop__binnen {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 74px;
}
.kop__logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--inkt);
  margin-right: auto;
}
.kop__logo img { width: 46px; height: 48px; }
.kop__naam {
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.kop__plaats {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gras-diep);
  text-transform: uppercase;
  margin-top: 2px;
}

.kop__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--wit);
  border: 2px solid var(--inkt);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--inkt);
  cursor: pointer;
}
.kop__toggle svg { width: 1.1em; height: 1.1em; fill: currentColor; }

.hoofdnav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.35rem;
  margin: 0;
  padding: 0;
}
.hoofdnav a {
  text-decoration: none;
  color: var(--inkt);
  font-weight: 600;
  font-size: 0.96rem;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.hoofdnav a:hover { border-bottom-color: var(--gras); }
.hoofdnav a[aria-current="page"] {
  border-bottom-color: var(--gras);
  font-weight: 800;
}
.kop__bel { margin-left: 0.4rem; }

@media (max-width: 940px) {
  .hoofdnav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--wit);
    border-bottom: 1px solid var(--lijn);
    box-shadow: var(--schaduw);
    padding: 0.8rem 1.2rem 1.4rem;
  }
  .hoofdnav.open { display: block; }
  .hoofdnav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .hoofdnav li { margin: 0; border-bottom: 1px solid var(--lijn); }
  .hoofdnav a { display: block; padding: 0.85rem 0.2rem; }
  .kop { position: relative; }
}
@media (min-width: 941px) {
  .kop__toggle { display: none; }
}
@media (max-width: 560px) {
  .kop__bel .btn-label { display: none; }
  .kop__bel { padding: 0.6rem 0.85rem; }
  /* op telefoonbreedte liep de merknaam over drie regels en werd de balk
     onnodig hoog; de plaatsnaam staat direct daaronder al in de hero */
  .kop__naam { font-size: 0.94rem; }
  .kop__plaats { display: none; }
}

/* ----------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  background: var(--asfalt) url("/assets/rijles-1920.jpg") center 38% / cover no-repeat;
  color: var(--wit);
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(16, 18, 20, 0.9) 0%,
    rgba(16, 18, 20, 0.8) 45%,
    rgba(16, 18, 20, 0.62) 74%,
    rgba(16, 18, 20, 0.5) 100%
  );
  z-index: -1;
}
.hero__binnen {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(2.6rem, 2rem + 4vw, 5rem) 0;
}
.hero h1 { color: var(--wit); margin-bottom: 0.55rem; }
.hero__lead {
  font-size: var(--maat-lead);
  color: #e6e9e3;
  max-width: 34em;
}
.hero .eyebrow { color: var(--gras); }
.hero__punten {
  list-style: none;
  padding: 0;
  margin: 1.3rem 0 0;
  display: grid;
  gap: 0.45rem;
}
.hero__punten li {
  position: relative;
  padding-left: 1.7rem;
  font-weight: 600;
  color: #e6e9e3;
}
.hero__punten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: var(--gras);
}

.hero__kaart {
  background: var(--wit);
  color: var(--inkt);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 1rem + 1.2vw, 1.9rem);
  box-shadow: var(--schaduw-diep);
}
.hero__kaart h2 {
  font-size: 1.42rem;
  margin-bottom: 0.35rem;
}
.hero__kaart-intro {
  font-size: var(--maat-klein);
  color: var(--grijs);
  margin-bottom: 1.1rem;
}

@media (max-width: 900px) {
  .hero__binnen { grid-template-columns: 1fr; }
  /* op telefoonbreedte is de grote panoramafoto nergens voor nodig */
  .hero { background-image: url("/assets/rijles-960.jpg"); }
}

/* ------------------------------------------------------------ vertrouwen -- */
.vertrouwen {
  background: var(--gras);
  color: var(--inkt);
}
.vertrouwen ul {
  list-style: none;
  margin: 0;
  padding: 1.15rem 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem 1.6rem;
}
.vertrouwen li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
}
.vertrouwen svg { width: 1.5rem; height: 1.5rem; fill: var(--inkt); flex: none; }
@media (max-width: 820px) { .vertrouwen ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .vertrouwen ul { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- sectiekoppen -- */
.sectiekop { max-width: 46rem; margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }
.sectiekop p { color: var(--grijs); font-size: var(--maat-lead); margin-bottom: 0; }
.section--donker .sectiekop p { color: #c9cfc6; }

/* -------------------------------------------------------------- rooster -- */
.rooster {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.rooster--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.rooster--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); }

/* ---------------------------------------------------------------- kaart -- */
.kaart {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.kaart h3 { margin-bottom: 0.5rem; }
.kaart p { color: var(--grijs); margin-bottom: 1rem; }
.kaart p:last-of-type { margin-bottom: 1rem; }
.kaart__link {
  margin-top: auto;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.kaart__link::after { content: "\2192"; transition: transform 0.15s ease; }
.kaart__link:hover::after { transform: translateX(3px); }

/* de groene schijf uit het logo als drager van het pictogram */
.schijf {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: var(--gras);
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  flex: none;
}
.schijf svg { width: 1.65rem; height: 1.65rem; fill: var(--inkt); }
.schijf--klein { width: 2.4rem; height: 2.4rem; margin-bottom: 0; }
.schijf--klein svg { width: 1.25rem; height: 1.25rem; }

/* --------------------------------------------------------------- stappen -- */
.stappen {
  list-style: none;
  counter-reset: stap;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.stappen li {
  position: relative;
  padding-top: 3.9rem;
  margin: 0;
}
.stappen li::before {
  counter-increment: stap;
  content: counter(stap);
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--gras);
  color: var(--inkt);
  font-family: var(--font-display);
  font-size: 1.35rem;
  display: grid;
  place-items: center;
}
.stappen h3 { margin-bottom: 0.4rem; }
.stappen p { color: var(--grijs); margin-bottom: 0; }
.section--donker .stappen p { color: #c9cfc6; }

/* --------------------------------------------------------------- prijzen -- */
.pakket {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 1.5rem 1.3rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.pakket::before {
  /* de groene schijf, half buiten beeld, als accent achter de prijs */
  content: "";
  position: absolute;
  top: -46px;
  right: -46px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: var(--gras-waas);
}
.pakket > :not(.pakket__tag) { position: relative; }
.pakket h3 { margin-bottom: 0.15rem; font-size: 1.1rem; }
.pakket__prijs {
  font-family: var(--font-display);
  font-size: 2.35rem;
  line-height: 1;
  margin: 0.35rem 0 0.9rem;
}
.pakket ul { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.pakket li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--maat-klein);
  color: var(--grijs);
}
.pakket li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--gras);
}
.pakket .btn { margin-top: auto; }
.pakket--uitgelicht { border-color: var(--gras); border-width: 2px; }
/* Het label staat absoluut in de hoek, niet in de kolom. In de stroom duwde
   het de titel en de prijs van juist deze kaart omlaag, waardoor de vier
   prijzen niet meer op één lijn stonden en de kaarten niet te vergelijken
   waren. */
.pakket__tag {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  background: var(--gras);
  color: var(--inkt);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: 0 var(--radius) 0 var(--radius);
}

.prijstabel {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4rem;
  font-size: var(--maat-klein);
}
.prijstabel caption {
  text-align: left;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.15rem;
  padding-bottom: 0.6rem;
}
.prijstabel th,
.prijstabel td {
  text-align: left;
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid var(--lijn);
  vertical-align: top;
}
.prijstabel th { font-weight: 700; }
.prijstabel td:last-child,
.prijstabel th:last-child {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.prijstabel tbody tr:last-child th,
.prijstabel tbody tr:last-child td { border-bottom: 0; }
.tabelblok {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem 0.6rem;
}

/* ------------------------------------------------------------- portret -- */
.portret {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
}
.portret img { border-radius: var(--radius); width: 100%; }
.portret__figuur { margin: 0; }
.portret__figuur figcaption {
  font-size: var(--maat-klein);
  color: var(--grijs);
  margin-top: 0.6rem;
}
.section--donker .portret__figuur figcaption { color: #c9cfc6; }
@media (max-width: 800px) { .portret { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ faq -- */
.faq { display: grid; gap: 0.7rem; }
.faq details {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-s);
  padding: 0.15rem 1.2rem;
}
.faq summary {
  cursor: pointer;
  font-weight: 800;
  padding: 0.95rem 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--gras-diep);
  flex: none;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > p { margin: 0 0 1rem; color: var(--grijs); }

/* -------------------------------------------------------------- contact -- */
.contactgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 860px) { .contactgrid { grid-template-columns: 1fr; } }

.gegevens { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: 1rem; }
.gegevens li { display: flex; gap: 0.9rem; align-items: flex-start; margin: 0; }
.gegevens a { font-weight: 700; }
.gegevens__label {
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--grijs);
}
.section--donker .gegevens__label { color: #a9b0a6; }

.map-link {
  display: block;
  text-decoration: none;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--lijn);
  background: var(--wit);
}
.map-link img { width: 100%; }
.map-link span {
  display: block;
  padding: 0.8rem 1rem;
  font-weight: 800;
  color: var(--gras-diep);
}
.map-link:hover span { color: var(--inkt); }

/* ----------------------------------------------------------------- cta -- */
.cta {
  background: var(--gras);
  color: var(--inkt);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 1.4rem + 2vw, 3rem);
  text-align: center;
}
.cta h2 { margin-bottom: 0.5rem; }
.cta p { max-width: 46ch; margin-inline: auto; font-weight: 600; }
.cta .knoprij { justify-content: center; }
.cta .btn--ghost { border-color: var(--inkt); }

/* ------------------------------------------------------------- kruimels -- */
.kruimels {
  font-size: var(--maat-klein);
  color: var(--grijs);
  padding: 0.9rem 0 0;
}
.kruimels ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.kruimels li { margin: 0; }
.kruimels li + li::before { content: "/"; margin-right: 0.4rem; color: var(--lijn); }

/* ------------------------------------------------------------ paginakop -- */
.paginakop { background: var(--mist); padding: clamp(1.6rem, 3vw, 2.6rem) 0 clamp(2rem, 3vw, 3rem); }
.paginakop h1 { margin-bottom: 0.4rem; }
.paginakop p { font-size: var(--maat-lead); color: var(--grijs); max-width: 46rem; margin-bottom: 0; }

/* ---------------------------------------------------------------- proza -- */
.proza { max-width: 42rem; }
.proza h2 { margin-top: 2.2rem; }
.proza h2:first-child { margin-top: 0; }
.proza h3 { margin-top: 1.8rem; }
.proza ul li { color: var(--grijs); }

/* ----------------------------------------------------------------- voet -- */
.voet {
  background: var(--asfalt);
  color: #cdd3c9;
  padding: clamp(2.6rem, 4vw, 3.8rem) 0 1.6rem;
  font-size: var(--maat-klein);
}
.voet a { color: #cdd3c9; text-decoration: none; }
.voet a:hover { color: var(--gras); text-decoration: underline; }
.voet__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  gap: 1.8rem;
}
@media (max-width: 880px) { .voet__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .voet__grid { grid-template-columns: 1fr; } }
.voet h2, .voet h3 {
  color: var(--wit);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  margin-bottom: 0.9rem;
}
.voet ul { list-style: none; padding: 0; margin: 0; }
.voet li { margin-bottom: 0.45rem; }
.voet__logo { width: 62px; height: 65px; margin-bottom: 0.9rem; }
.voet__slot {
  border-top: 1px solid var(--asfalt-licht);
  margin-top: 2.2rem;
  padding-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  justify-content: space-between;
  color: #98a094;
}
.voet__slot p { margin: 0; }

/* ------------------------------------------------------- leadformulier -- */
/* Overgenomen uit assets/lead-form.css van de skill. De velden gebruiken
   eigen --form-*-tokens, zodat het formulier ook op de donkere hero een
   leesbaar lichtvlak blijft. */
.lead-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.lead-form { display: grid; gap: 0.85rem; color-scheme: var(--form-color-scheme, light); }
.lead-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
@media (max-width: 420px) { .lead-form__row { grid-template-columns: 1fr; } }
.lead-form__field { display: grid; gap: 0.3rem; }
.lead-form__field > span {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.lead-form input[type="text"],
.lead-form input[type="tel"],
.lead-form input[type="email"],
.lead-form select,
.lead-form textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--form-border);
  border-radius: var(--radius-s);
  background: var(--form-surface);
  color: var(--form-text);
}
.lead-form textarea { resize: vertical; }
.lead-form input::placeholder,
.lead-form textarea::placeholder { color: var(--form-placeholder); }
.lead-form :focus-visible {
  outline: 3px solid var(--form-focus-ring);
  outline-offset: 1px;
}
.lead-form__submit { width: 100%; margin-top: 0.2rem; }
.lead-form__note {
  font-size: 0.82rem;
  color: var(--grijs);
  margin: 0;
}
.lead-form__status {
  margin: 0;
  font-size: 0.92rem;
  color: var(--error);
}
.lead-form__status:empty { display: none; }
.lead-form__status--done {
  color: var(--inkt);
  background: var(--gras-waas);
  border-radius: var(--radius-s);
  padding: 1rem 1.1rem;
}
.lead-form--full {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 1rem + 1vw, 1.8rem);
}

/* ------------------------------------------------------------ beweging -- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}