/* =========================================================================
   Autorijschool Hans van Schaick, Makkum
   -------------------------------------------------------------------------
   Het beeldmerk van de rijschool is een blauwe ruit met een witte L. Die ruit
   is hier het terugkerende element: als logo, als favicon, als opsommings-
   teken, als nummer bij een stap en als afgeschuinde hoek op de kaarten. Het
   blauw is exact het blauw uit het oude logo (#0085c9). Daaromheen het donker
   van de haven van Makkum en een oranje accent voor alles wat een actie is,
   zodat een knop nooit verdwijnt tussen het blauw.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts -- */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/bricolage-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/publicsans-latin-var.woff2") format("woff2");
}

/* --------------------------------------------------------------- tokens -- */
:root {
  --zee: #0085c9;          /* exact het blauw van het logo */
  --zee-diep: #00628f;     /* blauw als tekstkleur op wit */
  --zee-donker: #004e73;
  --zee-licht: #e6f2fa;
  --zee-waas: #f2f8fc;

  --nacht: #0b2033;        /* donkere secties, footer, kopteksten */
  --nacht-2: #14344c;

  --zon: #ff8a1f;          /* elke actie */
  --zon-diep: #d96b00;     /* oranje als tekstkleur op wit */
  --zon-waas: #fff3e6;

  --tekst: #17222c;
  --tekst-zacht: #4d5f6d;
  --rand: #d9e5ee;
  --wit: #ffffff;
  --mist: #f3f7fa;
  --fout: #b3261e;

  --font-kop: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-tekst: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1120px;
  --radius: 14px;
  --schaduw: 0 1px 2px rgba(11, 32, 51, .06), 0 8px 24px rgba(11, 32, 51, .07);
  --schaduw-hoog: 0 2px 6px rgba(11, 32, 51, .08), 0 18px 44px rgba(11, 32, 51, .13);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--wit);
  color: var(--tekst);
  font-family: var(--font-tekst);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;      /* moet samen met max-width, anders wint het HTML
                        width/height-attribuut en rekt de foto uit */
  display: block;
}

/* Standaardmaat voor elk inline pictogram. Zonder deze regel rekt een <svg>
   zonder eigen breedte zich uit tot de volle breedte van zijn container, wat
   een pijltje in een tekstlink zo groot maakt als de hele kaart. De specifieke
   regels verderop (knoppen, ruiten, logo, sociale iconen) overschrijven dit. */
svg {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
  flex: none;
  vertical-align: -.15em;
}

h1, h2, h3, h4 {
  font-family: var(--font-kop);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--nacht);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.3rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p, ul, ol, table { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: .35em; }
li::marker { color: var(--zee); }

a { color: var(--zee-diep); }
a:hover { color: var(--nacht); }

strong { font-weight: 700; }

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--nacht);
  color: var(--wit);
  padding: 12px 18px;
  z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

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

/* ------------------------------------------------------------ het merk -- */
/* De ruit uit het logo. Overal waar iets opgesomd of genummerd wordt komt
   deze vorm terug, zodat de site één handschrift houdt. */
.ruit {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background: var(--zee);
  border-radius: 5px;
  rotate: 45deg;
  color: var(--wit);
}
.ruit > * { rotate: -45deg; }
.ruit--zon { background: var(--zon); color: var(--nacht); }
.ruit--groot { width: 42px; height: 42px; flex-basis: 42px; }

.ruit svg { width: 17px; height: 17px; fill: currentColor; }

/* Kaart met afgeschuinde hoek, hetzelfde 45-graden motief. */
.schuin {
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

/* --------------------------------------------------------------- knoppen -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  padding: 15px 24px;
  border: 2px solid transparent;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.btn:hover { transform: translateY(-1px); }

.btn--primair {
  background: var(--zon);
  color: #2b1400;
  box-shadow: 0 6px 18px rgba(255, 138, 31, .35);
}
.btn--primair:hover { background: #ffa04a; color: #2b1400; }

.btn--blauw { background: var(--zee); color: var(--wit); }
.btn--blauw:hover { background: var(--zee-donker); color: var(--wit); }

.btn--lijn {
  background: transparent;
  border-color: var(--rand);
  color: var(--nacht);
}
.btn--lijn:hover { border-color: var(--zee); color: var(--zee-diep); }

.btn--lijn-wit {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .45);
  color: var(--wit);
}
.btn--lijn-wit:hover { background: rgba(255, 255, 255, .18); color: var(--wit); }

.btn--breed { width: 100%; }

.knoprij {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 1.2em;
}

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

/* De header mag breder zijn dan de tekstkolom: met acht menu-items plus een
   belknop past het anders niet op één regel en breken de labels af. */
.site-header .wrap { max-width: 1280px; }

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

.merk {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  margin-right: auto;
}
.merk > svg { width: 40px; height: 40px; flex: none; }
.merk-tekst b {
  display: block;
  font-family: var(--font-kop);
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--nacht);
  text-transform: uppercase;
}
.merk-tekst > span {
  display: block;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--zee-diep);
  font-weight: 600;
}

.hoofdnav ul {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hoofdnav a {
  display: block;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: .93rem;
  font-weight: 600;
  color: var(--tekst);
  text-decoration: none;
  white-space: nowrap;
}
.hoofdnav a:hover { background: var(--zee-waas); color: var(--zee-diep); }
.hoofdnav a[aria-current="page"] {
  color: var(--zee-diep);
  background: var(--zee-licht);
}

.header-bel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--zon);
  color: #2b1400;
  font-family: var(--font-kop);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.header-bel:hover { background: #ffa04a; color: #2b1400; }
.header-bel svg { width: 18px; height: 18px; fill: currentColor; }

.nav-knop {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 10px 13px;
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: .95rem;
  color: var(--nacht);
  cursor: pointer;
}
.nav-knop svg { width: 20px; height: 20px; fill: currentColor; }

@media (max-width: 1120px) {
  .nav-knop { display: inline-flex; }
  .hoofdnav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--wit);
    border-bottom: 1px solid var(--rand);
    box-shadow: var(--schaduw);
    padding: 10px 20px 18px;
  }
  .hoofdnav.open { display: block; }
  .hoofdnav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .hoofdnav a { padding: 13px 10px; border-radius: 8px; font-size: 1.05rem; }
}
@media (max-width: 700px) {
  .header-bel span { display: none; }
  .header-bel { padding: 11px 13px; }
}
@media (max-width: 420px) {
  /* Alleen in de header, waar de ruimte naast Menu en de belknop op is. In de
     footer is er plek zat en hoort de ondertitel gewoon te blijven staan. */
  .site-header .merk-tekst > span { display: none; }
  .site-header .merk-tekst b { font-size: .95rem; }
  .site-header .merk { gap: 8px; }
}

/* ----------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(255, 255, 255, .38), transparent 62%),
    linear-gradient(160deg, var(--zee) 0%, #0a6ea6 42%, var(--nacht) 100%);
  color: var(--wit);
  padding: clamp(38px, 6vw, 76px) 0 clamp(44px, 6vw, 84px);
}
/* De ruit uit het logo, groot en bijna doorzichtig, als achtergrondmotief. */
.hero::after {
  content: "";
  position: absolute;
  right: -170px;
  bottom: -210px;
  width: 520px;
  height: 520px;
  background: rgba(255, 255, 255, .06);
  border-radius: 60px;
  rotate: 45deg;
  pointer-events: none;
}

.hero .wrap { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: start;
}

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

.kop-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--zee-diep);
}
.kop-label::before {
  content: "";
  width: 12px; height: 12px;
  background: currentColor;
  border-radius: 3px;
  rotate: 45deg;
}
.hero .kop-label { color: #a9dcf7; }

.hero-lead {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem);
  color: rgba(255, 255, 255, .92);
  max-width: 42ch;
}

.hero-troeven {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 10px;
}
.hero-troeven li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  color: rgba(255, 255, 255, .93);
  font-size: 1rem;
}
.hero-troeven .ruit {
  width: 22px; height: 22px; flex-basis: 22px;
  background: var(--zon); color: #2b1400;
  border-radius: 4px;
  margin-top: 3px;
}
.hero-troeven .ruit svg { width: 13px; height: 13px; }

.hero-foto {
  position: relative;
  margin: 26px 0 0;
  max-width: 300px;
}
.hero-foto img {
  border-radius: 16px;
  border: 4px solid rgba(255, 255, 255, .85);
  box-shadow: var(--schaduw-hoog);
}
.hero-foto figcaption {
  margin-top: 10px;
  font-size: .9rem;
  color: rgba(255, 255, 255, .85);
}

.hero-kaart {
  background: var(--wit);
  color: var(--tekst);
  border-radius: 18px;
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--schaduw-hoog);
}
.hero-kaart h2 {
  font-size: 1.32rem;
  margin-bottom: .35em;
}
.hero-kaart > p {
  font-size: .96rem;
  color: var(--tekst-zacht);
  margin-bottom: 1.1em;
}
.hero-kaart .of {
  margin: 16px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--rand);
  font-size: .92rem;
  color: var(--tekst-zacht);
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-foto { max-width: 220px; }
}

/* --------------------------------------------------------------- balken -- */
.balk {
  background: var(--nacht);
  color: rgba(255, 255, 255, .9);
  padding: 16px 0;
  font-size: .95rem;
}
.balk ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.balk li {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}
.balk .ruit { width: 20px; height: 20px; flex-basis: 20px; border-radius: 4px; }
.balk .ruit svg { width: 12px; height: 12px; }
@media (max-width: 760px) {
  /* Gecentreerde regels die over twee regels afbreken lezen rommelig, dus op
     smalle schermen wordt dit een linkslijnende lijst. */
  .balk ul { flex-direction: column; justify-content: flex-start; gap: 12px; }
  .balk li { align-items: flex-start; }
  .balk .ruit { margin-top: 3px; }
}

/* -------------------------------------------------------------- secties -- */
.sectie { padding: clamp(46px, 5.5vw, 82px) 0; }
.sectie--mist { background: var(--mist); }
.sectie--zee { background: var(--zee-waas); }
/* Iets lichter dan de footer, anders lopen het contactblok en de footer als
   één donkere lap in elkaar over. */
.sectie--nacht {
  background: var(--nacht-2);
  color: rgba(255, 255, 255, .88);
}
.sectie--nacht h2, .sectie--nacht h3 { color: var(--wit); }
.sectie--nacht a { color: #9ed8f5; }
.sectie--nacht .kop-label { color: #9ed8f5; }

.sectie-kop { max-width: 62ch; margin-bottom: clamp(26px, 3vw, 40px); }
.sectie-kop p { color: var(--tekst-zacht); font-size: 1.06rem; margin-bottom: 0; }
.sectie--nacht .sectie-kop p { color: rgba(255, 255, 255, .78); }

.rooster {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.rooster--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* Vier kaarten met veel tekst lezen beter als 2x2 dan als vier smalle kolommen;
   zes kaarten vullen een rij van drie precies. */
.rooster--duo { grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); }
.rooster--trio { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* --------------------------------------------------------------- kaarten -- */
.kaart {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 24px;
}
.kaart h3 { margin-bottom: .4em; }
.kaart p:last-child { margin-bottom: 0; }
.kaart .ruit { margin-bottom: 16px; }

a.kaart {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.kaart:hover {
  border-color: var(--zee);
  box-shadow: var(--schaduw);
  transform: translateY(-2px);
  color: inherit;
}
.kaart-meer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-family: var(--font-kop);
  font-weight: 700;
  color: var(--zee-diep);
}
.kaart-meer svg { width: 16px; height: 16px; fill: currentColor; }
a.kaart:hover .kaart-meer { color: var(--zon-diep); }

.sectie--nacht .kaart {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .86);
}

/* --------------------------------------------------------------- stappen -- */
.stappen {
  list-style: none;
  counter-reset: stap;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.stappen li {
  counter-increment: stap;
  position: relative;
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 24px 22px 22px;
  margin: 0;
}
/* Ruitvorm via clip-path in plaats van een gedraaide box: het cijfer moet
   rechtop blijven staan, en bij "rotate" draait de tekst mee. */
.stappen li::before {
  content: counter(stap);
  position: absolute;
  top: -19px;
  left: 18px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--zee);
  color: var(--wit);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  font-family: var(--font-kop);
  font-weight: 800;
  font-size: 1rem;
}
.stappen li > * { position: relative; }
.stappen h3 { margin-top: 10px; font-size: 1.12rem; }
.stappen p:last-child { margin-bottom: 0; }
.stappen p { font-size: .97rem; color: var(--tekst-zacht); }

/* ------------------------------------------------------------- werkgebied -- */
.plaatsen {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.plaatsen li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 16px;
  background: var(--zee-waas);
  border: 1px solid var(--rand);
  border-radius: 10px;
  font-family: var(--font-kop);
  font-weight: 700;
  color: var(--nacht);
}
.plaatsen .ruit { width: 24px; height: 24px; flex-basis: 24px; border-radius: 4px; }
.plaatsen .ruit svg { width: 14px; height: 14px; }

/* -------------------------------------------------------------- tarieven -- */
.tarief-tabel {
  width: 100%;
  border-collapse: collapse;
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
}
.tarief-tabel caption {
  text-align: left;
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--nacht);
  padding: 0 0 12px;
}
.tarief-tabel th, .tarief-tabel td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rand);
  vertical-align: top;
}
.tarief-tabel thead th {
  background: var(--zee-licht);
  font-family: var(--font-kop);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--zee-donker);
}
.tarief-tabel tbody tr:last-child th,
.tarief-tabel tbody tr:last-child td { border-bottom: 0; }
.tarief-tabel td:last-child, .tarief-tabel th:last-child {
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-kop);
  font-weight: 700;
  color: var(--nacht);
}
.tarief-tabel tbody th { font-weight: 400; font-family: var(--font-tekst); }

.pakketten {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.pakket {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}
.pakket--uitgelicht {
  border: 2px solid var(--zee);
  box-shadow: var(--schaduw);
}
.pakket__vlag {
  display: inline-block;
  align-self: flex-start;
  background: var(--zon-waas);
  color: var(--zon-diep);
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 6px;
  margin-bottom: 12px;
}
.pakket h3 { margin-bottom: .15em; }
.pakket__prijs {
  font-family: var(--font-kop);
  font-weight: 800;
  font-size: 2.35rem;
  line-height: 1.05;
  color: var(--nacht);
  margin: 8px 0 2px;
}
.pakket__vanaf {
  font-size: .95rem;
  color: var(--tekst-zacht);
  margin-bottom: 16px;
}
.pakket__vanaf s { color: var(--tekst-zacht); }
.pakket ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.pakket li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .98rem;
}
.pakket li svg {
  width: 18px; height: 18px; flex: none; margin-top: 4px;
  fill: var(--zee);
}
.pakket .btn { margin-top: auto; }

.notitie {
  background: var(--zon-waas);
  border-left: 4px solid var(--zon);
  border-radius: 0 10px 10px 0;
  padding: 18px 20px;
}
.notitie :last-child { margin-bottom: 0; }
.notitie h3 { font-size: 1.05rem; }

/* ------------------------------------------------------------- tekstblok -- */
.tekst { max-width: 68ch; }
.tekst h2 { margin-top: 1.5em; }
.tekst h2:first-child { margin-top: 0; }
.tekst h3 { margin-top: 1.4em; }
.tekst ul li { margin-bottom: .5em; }

.tekst-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 880px) {
  .tekst-grid { grid-template-columns: 1fr; }
}

.zijkaart {
  background: var(--zee-waas);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 22px;
  position: sticky;
  top: 96px;
}
.zijkaart h2, .zijkaart h3 { font-size: 1.12rem; }
.zijkaart p { font-size: .96rem; }
.zijkaart :last-child { margin-bottom: 0; }
@media (max-width: 880px) { .zijkaart { position: static; } }

.beeld-schuin {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rand);
  background: var(--wit);
}

/* ------------------------------------------------------------------ faq -- */
.faq { display: grid; gap: 10px; max-width: 76ch; align-content: start; }
@media (min-width: 900px) {
  /* Op een breed scherm laat één kolom vragen de halve pagina leeg; twee
     kolommen vullen de sectie zonder de regels te lang te maken. */
  .faq {
    max-width: none;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    align-items: start;
  }
}
.faq details {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 4px 20px;
}
.faq details[open] { border-color: var(--zee); }
.faq summary {
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--nacht);
  cursor: pointer;
  padding: 15px 34px 15px 0;
  position: relative;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 11px; height: 11px;
  margin-top: -9px;
  border-right: 2.5px solid var(--zee);
  border-bottom: 2.5px solid var(--zee);
  rotate: 45deg;
  transition: rotate .18s ease;
}
.faq details[open] summary::after { rotate: -135deg; margin-top: -3px; }
.faq details > p, .faq details > ul { margin-bottom: 1em; }
.faq details > :last-child { margin-bottom: 18px; }

/* -------------------------------------------------------------- contact -- */
.contact-lijst {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.contact-lijst li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0;
}
.contact-lijst .ruit { margin-top: 2px; }
.contact-lijst b {
  display: block;
  font-family: var(--font-kop);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
}
.sectie--nacht .contact-lijst b { color: rgba(255, 255, 255, .62); }
.contact-lijst a { font-weight: 600; }
.contact-lijst span { font-size: 1.06rem; }

/* De zijkolom van de contactpagina is smal; daar zijn de gewone h2-groottes
   veel te zwaar. */
.contact-zij h2 { font-size: 1.12rem; margin-bottom: .6em; }
.contact-zij ul { font-size: .98rem; }

.kaart-link {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rand);
  background: var(--wit);
  text-decoration: none;
  color: var(--zee-diep);
}
.kaart-link img { width: 100%; }
.kaart-link span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  font-family: var(--font-kop);
  font-weight: 700;
}
.kaart-link svg { width: 17px; height: 17px; fill: currentColor; }
.kaart-link:hover { border-color: var(--zee); }

.sociaal {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sociaal li { margin: 0; }
.sociaal a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid var(--rand);
  color: var(--zee-diep);
}
.sociaal a:hover { border-color: var(--zee); background: var(--zee-licht); }
.sociaal svg { width: 21px; height: 21px; fill: currentColor; }
.sectie--nacht .sociaal a {
  border-color: rgba(255, 255, 255, .28);
  color: var(--wit);
}
.sectie--nacht .sociaal a:hover { background: rgba(255, 255, 255, .12); }

/* --------------------------------------------------------- kruimelpaden -- */
.kruimels {
  font-size: .9rem;
  color: var(--tekst-zacht);
  padding: 14px 0 0;
}
.kruimels ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 0;
  margin: 0;
}
.kruimels li { margin: 0; }
.kruimels li + li::before { content: "› "; color: var(--zee); }

/* -------------------------------------------------------------- footer -- */
.site-footer {
  background: var(--nacht);
  color: rgba(255, 255, 255, .78);
  padding: 52px 0 26px;
  font-size: .96rem;
}
.site-footer h2 {
  color: var(--wit);
  font-size: 1.05rem;
  margin-bottom: .8em;
}
.footer-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1.3fr 1fr 1fr;
}
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer a { color: rgba(255, 255, 255, .84); text-decoration: none; }
.site-footer a:hover { color: var(--wit); text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .45em; }
.site-footer .merk b { color: var(--wit); }
.site-footer .merk span { color: #8ecbeb; }
/* Op het donkerblauw van de footer valt een blauwe ruit weg, dus daar staat
   het beeldmerk omgekeerd: witte ruit met een blauwe L. */
.site-footer .merk svg rect { fill: var(--wit); }
.site-footer .merk svg path { fill: var(--zee); }

.footer-onder {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: .88rem;
  color: rgba(255, 255, 255, .6);
}

/* ------------------------------------------------------------------ 404 -- */
.leeg { text-align: center; padding: clamp(60px, 9vw, 120px) 0; }
.leeg .knoprij { justify-content: center; }

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

/* ------------------------------------------------------------------ print */
@media print {
  .site-header, .site-footer, .hero-kaart, .knoprij { display: none; }
  body { font-size: 12pt; color: #000; }
}

/* ==========================================================================
   Leadformulier. Overgenomen uit assets/lead-form.css van de skill; het
   formulier kleurt zichzelf via eigen --form-*-tokens, zodat het zowel in de
   witte contactsectie als in de donkerblauwe hero leesbaar blijft.
   ========================================================================== */
/*
 * 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;
}