/* Autorijschool Actief, Bolsward
 *
 * De kleuren komen uit de eigen wereld van de rijschool: het diepe
 * petrolblauw van het Friese water en de donkere lesauto, het helderblauw
 * van het L-bord op het dak, en het rood van de pompeblden uit de Friese
 * vlag als enige luide accentkleur.
 *
 * Het handtekeningelement is de wegbelijning: de onderbroken streep die
 * secties van elkaar scheidt, en het L-bord in het logo.
 *
 * Overpass is afgeleid van Highway Gothic, de letter van de bewegwijzering
 * langs de weg. Vandaar de keuze voor een rijschool.
 */

:root {
  --diep: #0b323d;
  --diep-2: #0f4453;
  --diep-3: #14576a;
  --water: #128a9e;
  --water-diep: #0d6b7c;
  --water-mist: #e7f4f6;
  --lbord: #1a6fd4;
  --pompe: #e0273b;
  --pompe-diep: #b81628;
  --wit: #ffffff;
  --mist: #f1f5f6;
  --mist-2: #e6eef0;
  --lijn: #d5e2e5;
  --tekst: #0f2429;
  --zacht: #4c6a71;
  --groen: #16794f;

  --wrap: 1180px;
  --radius: 14px;
  --radius-s: 9px;
  --radius-l: 22px;
  --schaduw: 0 1px 3px rgba(11, 50, 61, .07), 0 10px 28px rgba(11, 50, 61, .09);
  --schaduw-hoog: 0 4px 12px rgba(11, 50, 61, .12), 0 22px 50px rgba(11, 50, 61, .18);

  --kop: "Overpass", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --focus-ring: var(--diep);

  /* Tokens van lead-form.css. Zonder deze regel valt de focusring van de
     invoervelden terug op het goud uit het sjabloon, een kleur die verder
     nergens op deze site voorkomt. Petrol geeft 6,1:1 tegen wit. */
  --form-focus-ring: var(--water-diep);
  --form-border: #b9ccd1;
  --form-text: var(--tekst);
  --form-error-text: var(--pompe-diep);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tekst);
  background: var(--wit);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--kop);
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -.018em;
  margin: 0 0 .5em;
  color: var(--diep);
}

h1 { font-size: clamp(2.05rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.55rem, 3.3vw, 2.2rem); }
h3 { font-size: clamp(1.12rem, 1.9vw, 1.3rem); }
h4 { font-size: 1.02rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--water-diep); text-underline-offset: 2px; }
a:hover { color: var(--pompe-diep); }

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

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

strong { font-weight: 700; color: var(--diep); }

small { font-size: .86rem; }

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

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.wrap--smal { max-width: 820px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--pompe); color: var(--wit);
  padding: 12px 20px; font-weight: 700; border-radius: 0 0 var(--radius-s) 0;
}
.skip-link:focus { left: 0; color: var(--wit); }

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

/* ---------- handtekening: wegbelijning ---------- */

.streep {
  height: 7px;
  background:
    repeating-linear-gradient(to right,
      var(--pompe) 0, var(--pompe) 38px,
      transparent 38px, transparent 68px);
  opacity: .9;
}

.streep--water {
  background:
    repeating-linear-gradient(to right,
      var(--water) 0, var(--water) 38px,
      transparent 38px, transparent 68px);
}

/* ---------- L-bord, het merkteken ---------- */

.lbord {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.65em; height: 1.65em;
  background: var(--lbord); color: var(--wit);
  font-family: var(--kop); font-weight: 800;
  border-radius: 4px; line-height: 1;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
}

/* ---------- knoppen ---------- */

.knop {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5em;
  font-family: var(--kop); font-weight: 700; font-size: 1rem;
  padding: 14px 24px; border-radius: 999px;
  text-decoration: none; border: 2px solid transparent;
  cursor: pointer; transition: transform .12s ease, background .15s ease, color .15s ease;
  text-align: center;
}
.knop:hover { transform: translateY(-1px); }
.knop:active { transform: translateY(0); }

.knop--rood { background: var(--pompe); color: var(--wit); border-color: var(--pompe); }
.knop--rood:hover { background: var(--pompe-diep); border-color: var(--pompe-diep); color: var(--wit); }

.knop--diep { background: var(--diep); color: var(--wit); border-color: var(--diep); }
.knop--diep:hover { background: var(--diep-2); border-color: var(--diep-2); color: var(--wit); }

.knop--rand { background: transparent; color: var(--diep); border-color: var(--lijn); }
.knop--rand:hover { background: var(--mist); color: var(--diep); border-color: var(--zacht); }

.knop--licht { background: rgba(255, 255, 255, .12); color: var(--wit); border-color: rgba(255, 255, 255, .55); }
.knop--licht:hover { background: var(--wit); color: var(--diep); border-color: var(--wit); }

.knop--klein { padding: 10px 18px; font-size: .93rem; }
.knop--breed { width: 100%; }

.knoppen { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- header ---------- */

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

.header-bar {
  display: flex; align-items: center; gap: 18px;
  min-height: 74px;
}

.merk {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--diep);
  font-family: var(--kop); font-weight: 800;
  font-size: 1.16rem; letter-spacing: -.02em; line-height: 1.05;
  margin-right: auto;
}
.merk .lbord { font-size: 1.16rem; }
.merk span small {
  display: block; font-size: .66rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--water-diep);
}

.nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: 9px 13px; border-radius: var(--radius-s);
  font-family: var(--kop); font-weight: 600; font-size: .95rem;
  color: var(--diep); text-decoration: none;
}
.nav a:hover { background: var(--mist); color: var(--diep); }
.nav a[aria-current="page"] { background: var(--water-mist); color: var(--water-diep); }

.nav-cta { display: none; }

.header-acties { display: flex; gap: 14px; align-items: center; }

.header-tel {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--kop); font-weight: 800; font-size: 1.02rem;
  color: var(--diep); text-decoration: none; white-space: nowrap;
}
.header-tel::before {
  content: ""; width: 9px; height: 9px; border-radius: 2px;
  background: var(--pompe); transform: rotate(45deg);
}
.header-tel:hover { color: var(--pompe-diep); }

.nav-knop {
  display: none; align-items: center; gap: 9px;
  font-family: var(--kop); font-weight: 700; font-size: .95rem;
  background: var(--mist); color: var(--diep);
  border: 1px solid var(--lijn); border-radius: var(--radius-s);
  padding: 10px 15px; cursor: pointer;
}
.nav-knop span {
  position: relative; display: block; width: 17px; height: 2px;
  background: var(--diep); border-radius: 2px;
}
.nav-knop span::before, .nav-knop span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 2px;
  background: var(--diep); border-radius: 2px;
}
.nav-knop span::before { top: -5px; }
.nav-knop span::after { top: 5px; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  background:
    radial-gradient(120% 130% at 88% -10%, var(--diep-3) 0%, transparent 55%),
    linear-gradient(160deg, var(--diep-2) 0%, var(--diep) 62%);
  color: var(--wit);
  padding: 54px 0 62px;
  overflow: hidden;
  --focus-ring: #ffffff;
}

.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
  background:
    repeating-linear-gradient(to right,
      var(--pompe) 0, var(--pompe) 38px,
      transparent 38px, transparent 68px);
}

.hero h1, .hero h2, .hero h3 { color: var(--wit); }

.hero-raster {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 46px; align-items: start;
}

.hero-tekst { max-width: 620px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--kop); font-weight: 700; font-size: .8rem;
  letter-spacing: .11em; text-transform: uppercase;
  color: #a9dbe6;
  margin: 0 0 18px;
}
.eyebrow::before {
  content: ""; width: 30px; height: 3px; border-radius: 2px;
  background: var(--pompe);
}

.hero p.leid { font-size: 1.1rem; color: #cfe4e9; margin-bottom: 1.3em; }

.hero-prijs {
  display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px; padding: 9px 20px; margin-bottom: 22px;
  font-size: .97rem; color: #e4f1f4;
}
.hero-prijs b { font-family: var(--kop); font-size: 1.22rem; color: var(--wit); }

/* Loopt onder beide kolommen door, zodat de foto de ruimte vult die anders
   naast het formulier leeg zou blijven. */
.hero-bewijs {
  display: flex; gap: 30px; align-items: center; flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.foto-kaart {
  background: var(--wit); padding: 8px; border-radius: var(--radius);
  box-shadow: var(--schaduw-hoog);
  /* mag krimpen: de bronfoto's zijn 325px breed en dat past net niet meer op
     een scherm van 360px zodra de kaartrand erbij komt */
  flex: 0 1 auto; max-width: 100%;
}
.foto-kaart img { border-radius: 7px; }
.foto-kaart figcaption {
  font-size: .82rem; color: var(--zacht); padding: 8px 4px 2px; line-height: 1.4;
}

.hero-bewijs-tekst { flex: 1 1 230px; color: #cfe4e9; font-size: .96rem; }
.hero-bewijs-tekst strong { color: var(--wit); }

.hero-form-kaart {
  background: var(--wit); color: var(--tekst);
  border-radius: var(--radius-l); padding: 26px 26px 24px;
  box-shadow: var(--schaduw-hoog);
  --focus-ring: var(--diep);
}
/* De kaart is een licht vlak in een donkere hero. Zonder deze regel erft de
   kop de witte tekstkleur van .hero en wordt hij onzichtbaar op het witte
   kaartvlak. */
.hero-form-kaart h2 { font-size: 1.35rem; margin-bottom: .35em; color: var(--diep); }
.hero-form-kaart > p { color: var(--zacht); font-size: .95rem; margin-bottom: 1.2em; }

/* ---------- vertrouwensbalk ---------- */

.chips {
  background: var(--diep);
  color: #cfe4e9;
  padding: 16px 0;
}
.chips ul {
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  list-style: none; margin: 0; padding: 0;
  justify-content: center;
  font-size: .93rem;
}
.chips li { display: flex; align-items: center; gap: 9px; margin: 0; }
.chips li::before {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 2px;
  background: var(--pompe);
  transform: rotate(45deg);
}

/* ---------- secties ---------- */

.sectie { padding: 66px 0; }
.sectie--mist { background: var(--mist); }
.sectie--water { background: var(--water-mist); }
.sectie--diep { background: var(--diep); color: #cfe4e9; --focus-ring: #ffffff; }
.sectie--diep h2, .sectie--diep h3 { color: var(--wit); }
.sectie--strak { padding: 46px 0; }

.sectiekop { max-width: 720px; margin-bottom: 38px; }
.sectiekop p { color: var(--zacht); font-size: 1.05rem; margin-bottom: 0; }
.sectie--diep .sectiekop p { color: #a9c6ce; }
.sectiekop--midden { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- kaarten ---------- */

.raster { display: grid; gap: 22px; }
/* Zonder dit krijgt een rasterkolom de breedte van zijn breedste kind: de
   prijstabel heeft een min-width van 520px, en die duwde op een telefoon de
   hele pagina breder dan het scherm. Nu blijft de tabel binnen .tabelwrap
   scrollen zoals bedoeld. */
.raster > * { min-width: 0; }
.raster--2 { grid-template-columns: repeat(2, 1fr); }
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--4 { grid-template-columns: repeat(4, 1fr); }

.kaart {
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: 26px;
  display: flex; flex-direction: column;
}
.kaart h3 { margin-bottom: .45em; }
.kaart p { color: var(--zacht); font-size: .97rem; }
.kaart .kaart-link {
  margin-top: auto; padding-top: 14px;
  font-family: var(--kop); font-weight: 700; font-size: .95rem;
  text-decoration: none; color: var(--water-diep);
}
.kaart .kaart-link:hover { color: var(--pompe-diep); }
.kaart .kaart-link::after { content: " \2192"; }

a.kaart { text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .15s ease; }
a.kaart:hover { transform: translateY(-2px); box-shadow: var(--schaduw); border-color: var(--water); color: inherit; }

.kaart-nummer {
  font-family: var(--kop); font-weight: 800; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--pompe); margin-bottom: 10px;
}

/* ---------- voordelenlijst ---------- */

.vinklijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.vinklijst li {
  position: relative; padding-left: 32px; margin: 0; font-size: .99rem;
}
.vinklijst li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 16px; height: 9px;
  border-left: 3px solid var(--groen); border-bottom: 3px solid var(--groen);
  transform: rotate(-45deg);
  border-radius: 1px;
}
.vinklijst--wit li::before { border-color: #5fd8a4; }
.vinklijst--2 { grid-template-columns: repeat(2, 1fr); gap: 11px 28px; }

/* ---------- prijstabel ---------- */

.tabelwrap {
  overflow-x: auto;
  border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--wit);
  /* De tabel eronder heeft een min-width van 520px en scrolt binnen dit vlak.
     Zonder contain rekende Chrome die 520px toch mee in de scrollbreedte van
     het documentElement: de pagina schoof niet, maar een schermafdruk van de
     hele pagina werd wel 523px breed op een scherm van 390px. */
  contain: paint;
}

table.prijs {
  width: 100%; border-collapse: collapse; font-size: .97rem; min-width: 520px;
}
table.prijs caption {
  text-align: left; font-family: var(--kop); font-weight: 700;
  padding: 18px 20px 0; color: var(--diep); font-size: 1.05rem;
}
table.prijs th, table.prijs td {
  text-align: left; padding: 13px 20px; border-bottom: 1px solid var(--lijn);
  vertical-align: top;
}
table.prijs thead th {
  font-family: var(--kop); font-size: .8rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--zacht);
  background: var(--mist);
  border-bottom: 2px solid var(--lijn);
}
table.prijs tbody tr:last-child td { border-bottom: 0; }
table.prijs td.bedrag, table.prijs th.bedrag { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.prijs td.bedrag { font-family: var(--kop); font-weight: 700; color: var(--diep); }
table.prijs td small { display: block; color: var(--zacht); font-weight: 400; font-family: var(--font); }

.tabelnoot { font-size: .88rem; color: var(--zacht); margin-top: 14px; }

/* ---------- pakketten ---------- */

.pakket {
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: 28px 26px 26px;
  display: flex; flex-direction: column; position: relative;
}
.pakket--uitgelicht { border: 2px solid var(--pompe); box-shadow: var(--schaduw); }
.pakket-vlag {
  position: absolute; top: -13px; left: 26px;
  background: var(--pompe); color: var(--wit);
  font-family: var(--kop); font-weight: 700; font-size: .76rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 999px;
}
.pakket h3 { margin-bottom: .2em; }
.pakket .lessen { color: var(--zacht); font-size: .95rem; margin-bottom: 18px; }
.pakket .prijsblok { margin-bottom: 18px; }
.pakket .prijsblok .van { color: var(--zacht); font-size: .92rem; }
.pakket .prijsblok .bedrag {
  font-family: var(--kop); font-weight: 800; font-size: 2.15rem;
  color: var(--diep); line-height: 1.05;
}
.pakket .prijsblok .per { color: var(--zacht); font-size: .9rem; }
.pakket .vinklijst { margin-bottom: 22px; font-size: .95rem; }
.pakket .knop { margin-top: auto; }

/* ---------- reviews ---------- */

.review {
  background: var(--wit); border: 1px solid var(--lijn);
  border-left: 5px solid var(--pompe);
  border-radius: var(--radius); padding: 26px;
}
.review blockquote { margin: 0 0 16px; font-size: 1rem; color: var(--tekst); }
.review blockquote p:first-child::before { content: "\201C"; }
.review blockquote p:last-child::after { content: "\201D"; }
.review figcaption { font-family: var(--kop); font-weight: 700; color: var(--diep); }
.review figcaption span { display: block; font-family: var(--font); font-weight: 400; font-size: .9rem; color: var(--zacht); }

/* ---------- faq ---------- */

.faq { border-top: 1px solid var(--lijn); }
.faq details { border-bottom: 1px solid var(--lijn); }
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--kop); font-weight: 700; font-size: 1.05rem;
  color: var(--diep); padding: 19px 44px 19px 0; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 11px; height: 11px; margin-top: -8px;
  border-right: 3px solid var(--water); border-bottom: 3px solid var(--water);
  transform: rotate(45deg); transition: transform .15s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq summary:hover { color: var(--water-diep); }
.faq .antwoord { padding: 0 10px 20px 0; color: var(--zacht); }
.faq .antwoord :last-child { margin-bottom: 0; }

/* ---------- stappen ---------- */

.stappen { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; counter-reset: stap; }
.stappen li {
  position: relative; padding-left: 62px; margin: 0; counter-increment: stap;
}
.stappen li::before {
  content: counter(stap);
  position: absolute; left: 0; top: 0;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--water-mist); color: var(--water-diep);
  font-family: var(--kop); font-weight: 800; font-size: 1.12rem;
  display: flex; align-items: center; justify-content: center;
}
.stappen h3 { margin-bottom: .25em; font-size: 1.1rem; }
.stappen p { color: var(--zacht); margin-bottom: 0; font-size: .98rem; }
.sectie--diep .stappen li::before { background: rgba(255, 255, 255, .12); color: var(--wit); }
.sectie--diep .stappen p { color: #a9c6ce; }

/* ---------- paginakop ---------- */

.paginakop { background: var(--mist); padding: 38px 0 42px; border-bottom: 1px solid var(--lijn); }
.paginakop h1 { margin-bottom: .3em; }
.paginakop p { color: var(--zacht); font-size: 1.08rem; max-width: 760px; margin-bottom: 0; }

.kruimels { margin-bottom: 16px; font-size: .88rem; }
.kruimels ol { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 0; padding: 0; }
.kruimels li { margin: 0; color: var(--zacht); }
.kruimels li + li::before { content: "/"; margin-right: 7px; color: var(--lijn); }
.kruimels a { color: var(--zacht); }
.kruimels a:hover { color: var(--pompe-diep); }

/* ---------- inhoud ---------- */

.inhoud > :first-child { margin-top: 0; }
.inhoud h2 { margin-top: 1.7em; }
.inhoud h3 { margin-top: 1.5em; }
.inhoud > :last-child { margin-bottom: 0; }

.kader {
  background: var(--water-mist); border-left: 5px solid var(--water);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  padding: 20px 24px; margin: 26px 0;
}
.kader h3 { margin-top: 0; font-size: 1.08rem; }
.kader :last-child { margin-bottom: 0; }

.kader--let-op { background: #fdeef0; border-left-color: var(--pompe); }

/* ---------- fotostrip ---------- */

.fotostrip { display: flex; flex-wrap: wrap; gap: 18px; }
.fotostrip .foto-kaart { flex: 0 1 auto; max-width: 341px; }

/* ---------- cta-blok ---------- */

.cta-blok {
  background: var(--diep);
  color: #cfe4e9;
  border-radius: var(--radius-l);
  padding: 40px 42px;
  display: flex; gap: 32px; align-items: center; flex-wrap: wrap;
  --focus-ring: #ffffff;
  position: relative; overflow: hidden;
}
.cta-blok::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px;
  background:
    repeating-linear-gradient(to right,
      var(--pompe) 0, var(--pompe) 38px,
      transparent 38px, transparent 68px);
}
.cta-blok > div:first-child { flex: 1 1 330px; }
.cta-blok h2 { color: var(--wit); margin-bottom: .35em; }
.cta-blok p { margin-bottom: 0; }
.cta-blok .knoppen { flex: 0 1 auto; }

/* ---------- contactgegevens ---------- */

.nap { list-style: none; padding: 0; margin: 0; }
.nap li { display: flex; gap: 12px; margin-bottom: 14px; align-items: flex-start; }
.nap .label {
  flex: 0 0 106px; font-family: var(--kop); font-weight: 700;
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--zacht); padding-top: .18em;
}

.map-link { display: inline-block; text-decoration: none; }
.map-link img { border-radius: var(--radius); border: 1px solid var(--lijn); }
.map-link span {
  display: inline-block; margin-top: 10px;
  font-family: var(--kop); font-weight: 700; font-size: .95rem;
  color: var(--water-diep);
}
.map-link:hover span { color: var(--pompe-diep); }

/* ---------- werkgebied ---------- */

.plaatsen {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 9px;
}
.plaatsen li {
  margin: 0;
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: 999px; padding: 7px 16px; font-size: .93rem;
}
.plaatsen li.kern { background: var(--diep); border-color: var(--diep); color: var(--wit); font-weight: 600; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--diep); color: #a9c6ce;
  padding: 54px 0 26px; margin-top: 0;
  --focus-ring: #ffffff;
}
.site-footer h3 {
  color: var(--wit); font-size: .84rem; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 1.1em;
}
.site-footer a { color: #cfe4e9; text-decoration: none; }
.site-footer a:hover { color: var(--wit); text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; font-size: .95rem; }
.site-footer li { margin-bottom: .6em; }

.footer-raster {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 34px;
  padding-bottom: 34px;
}
.footer-merk .merk { color: var(--wit); margin-bottom: 16px; }
.footer-merk .merk span small { color: #8fc4d0; }
.footer-merk p { font-size: .95rem; }

.footer-socials { display: flex; gap: 10px; margin-top: 16px; }
.footer-socials a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 15px; border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px; font-size: .87rem; font-weight: 600;
}
.footer-socials a:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }

.footer-onder {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  justify-content: space-between;
  font-size: .87rem; color: #8fb3bc;
}

/* ---------- mobiele actiebalk ---------- */

.mobielbalk { display: none; }

/* ---------- responsive ---------- */

@media (max-width: 1020px) {
  .hero-raster { grid-template-columns: 1fr; gap: 34px; }
  .hero-tekst { max-width: none; }
  .raster--4 { grid-template-columns: repeat(2, 1fr); }
  .footer-raster { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 900px) {
  .nav-knop { display: inline-flex; }
  /* De proefles-knop verhuist naar het uitklapmenu; het telefoonnummer blijft
     staan, want bellen is op deze breedte de eerste actie. */
  .header-acties .knop { display: none; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--wit); border-bottom: 1px solid var(--lijn);
    box-shadow: var(--schaduw); padding: 12px 22px 18px;
  }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; gap: 2px; }
  .nav a { padding: 12px 14px; font-size: 1rem; }
  .nav-cta { display: block; margin-top: 8px; }
  .nav-cta a {
    background: var(--pompe); color: var(--wit);
    text-align: center; border-radius: 999px; font-weight: 700;
  }
  .nav-cta a:hover { background: var(--pompe-diep); color: var(--wit); }
  .site-header .wrap { position: relative; }
  .raster--3 { grid-template-columns: repeat(2, 1fr); }
  .cta-blok { padding: 32px 26px; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .sectie { padding: 48px 0; }
  .hero { padding: 38px 0 46px; }
  .raster--2, .raster--3, .raster--4 { grid-template-columns: 1fr; }
  .vinklijst--2 { grid-template-columns: 1fr; }
  .footer-raster { grid-template-columns: 1fr; gap: 28px; }
  .knoppen .knop { flex: 1 1 100%; }
  .hero-form-kaart { padding: 22px 20px 20px; }
  .cta-blok { padding: 30px 22px; }
  .nap li { flex-direction: column; gap: 2px; }
  .nap .label { flex: none; }
  /* De vaste balk onderaan neemt het bellen over, dus het nummer hoeft niet
     ook nog in de krappe header te staan. */
  .header-acties { display: none; }
  .paginakop { padding: 28px 0 32px; }

  /* vaste bel- en app-balk onderaan het scherm */
  .mobielbalk {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    box-shadow: 0 -3px 16px rgba(11, 50, 61, .22);
  }
  .mobielbalk a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 10px; text-decoration: none;
    font-family: var(--kop); font-weight: 700; font-size: 1rem; color: var(--wit);
  }
  .mobielbalk .bel { background: var(--pompe); }
  .mobielbalk .app { background: var(--groen); }
  body { padding-bottom: 56px; }
}

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

@media print {
  .site-header, .mobielbalk, .cta-blok, .hero-form-kaart { display: none; }
}
/*
 * Formulierstijl op eigen, losstaande --form-*-tokens met verstandige
 * standaardwaarden, expliciet NIET op de bestaande CSS-tokens van de site.
 * Neem over in styles.css; overschrijf alleen de tokens hieronder als het
 * ontwerp een andere kleur nodig heeft.
 *
 * Het formulier staat soms in een lichte sectie en soms in een donkere hero.
 * De invoervelden gebruiken daarom EIGEN tokens (--form-*) in plaats van de
 * omliggende tekstkleur te erven: "color: inherit" was hier precies de bug op
 * een donkere hero (het veld erfde witte tekst, terwijl de achtergrond wit
 * bleef, dus getypte tekst werd onzichtbaar). Met expliciete tokens en een
 * lichte standaardwaarde blijft het veld zelf altijd een leesbaar, in zichzelf
 * consistent lichtvlak, ongeacht de kleur van de hero eromheen.
 *
 * Tokens die deze stylesheet leest (zet ze op :root, of op een voorouder van
 * .lead-form, als de standaardwaarden niet passen bij het ontwerp):
 *   --form-surface       achtergrond van invoervelden, select, textarea en
 *                        van de succes-/foutmelding. Standaard wit.
 *   --form-text          tekstkleur die de bezoeker typt/ziet in invoerveld,
 *                        select en textarea. Standaard donkergrijs.
 *   --form-placeholder   kleur van placeholdertekst, waar die voorkomt.
 *   --form-border        randkleur van invoervelden.
 *   --form-focus-ring    kleur van de focusring (valt terug op --accent).
 *   --form-error-text    tekstkleur van de foutmelding (valt terug op
 *                        --error, en dan op een hardcoded rood).
 *   --form-success-text  tekstkleur van de succesmelding (valt terug op
 *                        --form-text).
 *   --form-color-scheme  "light" of "dark": stuurt de systeemweergave van
 *                        select-dropdown, scrollbar e.d. Zet dit op "dark"
 *                        als je bewust ook --form-surface/--form-text naar
 *                        een donker paar verandert, anders blijft het
 *                        uitklapmenu van de select met de systeemkleuren van
 *                        het besturingssysteem meekleuren.
 *   --radius             (bestaand token) randradius, hergebruikt hier.
 */
.lead-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lead-form { display: grid; gap: .75rem; }

/* lead-form.js zet [hidden] op de velden na een geslaagde inzending. Zonder
   deze regel wint de "display: grid" hieronder van de standaard UA-regel
   voor [hidden], en blijven de velden zichtbaar. */
.lead-form [hidden] { display: none; }

.lead-form__row { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 32rem) { .lead-form__row { grid-template-columns: 1fr; } }

.lead-form__field { display: grid; gap: .25rem; font-size: .95rem; }
.lead-form__field input,
.lead-form__field select,
.lead-form__field textarea {
  font: inherit;
  padding: .6rem .7rem;
  border: 1px solid var(--form-border, rgba(0,0,0,.25));
  border-radius: var(--radius, 6px);
  background: var(--form-surface, #fff);
  color: var(--form-text, #1a1a1a);
  width: 100%;
  /* Pin native chrome (vooral het uitklapmenu van select) aan het
     kleurenschema dat bij --form-surface/--form-text past, zodat het niet
     meekleurt met een donkere systeem- of pagina-modus. */
  color-scheme: var(--form-color-scheme, light);
}
.lead-form__field input::placeholder,
.lead-form__field textarea::placeholder {
  color: var(--form-placeholder, rgba(26,26,26,.6));
  opacity: 1; /* sommige browsers dimmen placeholders extra; laat de kleur het werk doen */
}
/* Best-effort: niet elke browser laat de pagina de kleur van de opties in
   het opengeklapte menu bepalen, maar waar het wel kan (o.a. Firefox, Chrome)
   voorkomt dit dat de opties in een ander kleurenschema getekend worden dan
   de gesloten select-box hierboven. */
.lead-form__field select option {
  color: var(--form-text, #1a1a1a);
  background: var(--form-surface, #fff);
}
.lead-form__field :focus-visible {
  outline: 3px solid var(--form-focus-ring, var(--accent, #ffc733));
  outline-offset: 2px;
}

.lead-form__submit { justify-self: start; }
/* Dim uniform in plaats van te vertrouwen op de standaard :disabled-kleur van
   de browser: die overschrijft soms de eigen kleuren van .btn--primary met
   een systeemgrijs dat op een donkere knop onleesbaar kan worden. Opacity
   verdunt voor- en achtergrond samen, dus de contrastverhouding blijft gelijk. */
.lead-form__submit:disabled { opacity: .65; cursor: not-allowed; }

.lead-form__note { font-size: .85rem; opacity: .8; margin: 0; }
.lead-form__status:empty { display: none; }
/* Foutmelding: eigen kader met --form-surface als achtergrond in plaats van
   kale tekst op de omliggende (mogelijk donkere) achtergrond, zodat de
   foutkleur altijd tegen een voorspelbaar lichtvlak leest. */
.lead-form__status {
  font-size: .9rem;
  color: var(--form-error-text, var(--error, #b3261e));
  background: var(--form-surface, #fff);
  padding: .6rem .8rem;
  border-radius: var(--radius, 6px);
}

/* Succesmelding: dezelfde regio als de foutmelding, maar niet in de
   foutkleur. tabindex maakt de regio programmatisch focusbaar (zie
   lead-form.js), zonder hem in de normale taborde op te nemen. */
.lead-form__status--done {
  color: var(--form-success-text, var(--form-text, #1a1a1a));
  padding: 1rem;
  border-radius: var(--radius, 6px);
  background: var(--form-surface, #fff);
}
.lead-form__status--done:focus {
  outline: 3px solid var(--form-focus-ring, var(--accent, #ffc733));
  outline-offset: 2px;
}