/* Start in Transport
   Alle opmaak van de site staat in dit bestand.
   Mobiel eerst. Geen externe lettertypen, geen schaduwen, geen gradients. */

:root {
  --blauw: #0f2e4a;
  --blauw-diep: #0a2138;
  --oker: #d9a441;
  --oker-zacht: #f7edd8;
  --inkt: #16212c;
  --grijs: #55626e;
  --lijn: #dde2e7;
  --zacht: #f4f6f7;
  --wit: #ffffff;

  --breed: 1080px;
  --smal: 700px;
  --rand: 20px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--wit);
  color: var(--inkt);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

h1, h2, h3 {
  color: var(--blauw);
  line-height: 1.2;
  margin: 0 0 14px;
  letter-spacing: -0.4px;
}

h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 19px; letter-spacing: -0.2px; }

p, ul, ol, table { margin: 0 0 18px; }

a { color: var(--blauw); text-underline-offset: 3px; }
a:hover { color: var(--blauw-diep); }

strong { font-weight: 700; }

.omhulsel {
  width: 100%;
  max-width: var(--breed);
  margin: 0 auto;
  padding: 0 var(--rand);
}

.smal { max-width: var(--smal); }

.overslaan {
  position: absolute;
  left: -9999px;
}
.overslaan:focus {
  left: 8px;
  top: 8px;
  z-index: 20;
  background: var(--oker);
  color: var(--blauw);
  padding: 10px 14px;
  font-weight: 700;
}

/* ---------- kop ---------- */

.kop {
  border-bottom: 1px solid var(--lijn);
  background: var(--wit);
}

.kop-binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.kop-logo { display: block; line-height: 0; }
.kop-logo img { height: 34px; width: auto; }

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-left: auto;
  list-style: none;
  padding: 0;
}

.menu a {
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  color: var(--blauw);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  display: block;
}
.menu a:hover { border-bottom-color: var(--oker); }
.menu a[aria-current="page"] { border-bottom-color: var(--oker); }

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

.knop, .knop-lijn {
  display: inline-block;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  text-decoration: none;
  padding: 14px 22px;
  border: 2px solid var(--oker);
  text-align: center;
  cursor: pointer;
}

.knop {
  background: var(--oker);
  color: var(--blauw);
}
.knop:hover { background: #c8933a; border-color: #c8933a; color: var(--blauw); }

.knop-lijn {
  background: transparent;
  color: var(--blauw);
  border-color: var(--blauw);
}
.knop-lijn:hover { background: var(--blauw); color: var(--wit); }

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

/* ---------- vlakken ---------- */

.vlak { padding: 44px 0; }
.vlak-zacht { background: var(--zacht); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.vlak-donker { background: var(--blauw); color: #e8edf2; }
.vlak-donker h2, .vlak-donker h3 { color: var(--wit); }
.vlak-donker a { color: var(--oker); }
/* Knoppen houden hun eigen kleuren. Zonder deze regel wordt de tekst van
   een .knop okergeel op een okergele achtergrond, dus onleesbaar. */
.vlak-donker .knop { color: var(--blauw); }
.vlak-donker .knop-lijn { color: var(--wit); border-color: var(--wit); }

.hero {
  padding: 40px 0 44px;
  border-bottom: 1px solid var(--lijn);
}

.hero h1 { font-size: 32px; max-width: 15ch; }

.hero-lead {
  font-size: 19px;
  color: var(--grijs);
  max-width: 46ch;
  margin-bottom: 24px;
}

.hero-onder {
  font-size: 15px;
  color: var(--grijs);
  border-left: 4px solid var(--oker);
  padding-left: 14px;
  max-width: 52ch;
  margin: 24px 0 0;
}

.inleiding {
  font-size: 18px;
  color: var(--grijs);
  max-width: 58ch;
}

/* ---------- kaarten en lijsten ---------- */

.raster {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  margin: 0 0 18px;
}

.kaart {
  border: 1px solid var(--lijn);
  background: var(--wit);
  padding: 22px;
}

.kaart h3 { margin-bottom: 8px; }
.kaart p:last-child { margin-bottom: 0; }

.stap-nr {
  display: inline-block;
  background: var(--blauw);
  color: var(--wit);
  font-weight: 800;
  font-size: 14px;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  margin-bottom: 12px;
}

.vink {
  list-style: none;
  padding: 0;
}
.vink li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
}
.vink li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 14px;
  height: 8px;
  border-left: 3px solid var(--oker);
  border-bottom: 3px solid var(--oker);
  transform: rotate(-45deg);
}

.streep {
  list-style: none;
  padding: 0;
}
.streep li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
}
.streep li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 12px;
  height: 3px;
  background: var(--oker);
}

/* ---------- examenlijst ---------- */

.examens { list-style: none; padding: 0; counter-reset: ex; }

.examens li {
  counter-increment: ex;
  border-top: 1px solid var(--lijn);
  padding: 18px 0 18px 46px;
  position: relative;
}
.examens li:last-child { border-bottom: 1px solid var(--lijn); }

.examens li::before {
  content: counter(ex);
  position: absolute;
  left: 0;
  top: 18px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: var(--zacht);
  border: 1px solid var(--lijn);
  color: var(--blauw);
  font-weight: 800;
  font-size: 14px;
}

.examens li.zwaar::before {
  background: var(--oker);
  border-color: var(--oker);
}

.examens h3 { margin-bottom: 4px; }
.examens p { margin-bottom: 0; color: var(--grijs); }

.merk-zwaar {
  display: inline-block;
  background: var(--oker);
  color: var(--blauw);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  margin-left: 8px;
  vertical-align: 2px;
}

/* ---------- tabel ---------- */

.tabelhuls { overflow-x: auto; margin: 0 0 12px; }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-size: 16px;
}

th, td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--lijn);
}

caption {
  caption-side: bottom;
  text-align: left;
  font-size: 15px;
  color: var(--grijs);
  padding: 10px 0 0;
}

thead th {
  background: var(--blauw);
  color: var(--wit);
  font-size: 14px;
  letter-spacing: 0.3px;
}

tbody tr:nth-child(even) { background: var(--zacht); }

td.getal, th.getal { text-align: right; white-space: nowrap; }
.uit { color: var(--grijs); }
.beter { font-weight: 700; color: var(--blauw); }

/* ---------- prijzen ---------- */

.prijzen {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.prijs {
  border: 1px solid var(--lijn);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.prijs.uitgelicht {
  border: 2px solid var(--blauw);
}

.prijs h3 { margin-bottom: 6px; }

.prijs .bedrag {
  font-size: 30px;
  font-weight: 800;
  color: var(--blauw);
  line-height: 1.1;
  margin: 6px 0 2px;
}

.prijs .per {
  font-size: 14px;
  color: var(--grijs);
  margin: 0 0 14px;
}

.prijs p { color: var(--grijs); font-size: 16px; }
.prijs .knop, .prijs .knop-lijn { margin-top: auto; }

.btw {
  font-size: 15px;
  color: var(--grijs);
  margin-top: 16px;
}

/* ---------- formulier ---------- */

.formulier {
  border: 1px solid var(--lijn);
  background: var(--wit);
  padding: 24px;
}

.veld { margin-bottom: 16px; }

label {
  display: block;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 6px;
  color: var(--blauw);
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  width: 100%;
  font: inherit;
  font-size: 17px;
  color: var(--inkt);
  padding: 12px 14px;
  border: 1px solid #b9c2cb;
  background: var(--wit);
  border-radius: 0;
}

input:focus, textarea:focus, select:focus {
  outline: 3px solid var(--oker);
  outline-offset: 1px;
  border-color: var(--blauw);
}

textarea { min-height: 130px; resize: vertical; }

button.knop { border: 2px solid var(--oker); width: 100%; }

.hulp { font-size: 15px; color: var(--grijs); margin: 8px 0 0; }

.pot { position: absolute; left: -9999px; }

/* ---------- voet ---------- */

.voet {
  background: var(--blauw);
  color: #c9d4de;
  padding: 40px 0 30px;
  font-size: 16px;
  margin-top: 0;
}

.voet h2 { font-size: 17px; color: var(--wit); margin-bottom: 10px; }
.voet a { color: var(--wit); }

.voet-raster {
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
  margin-bottom: 26px;
}

.voet ul { list-style: none; padding: 0; margin: 0; }
.voet li { margin-bottom: 7px; }

/* Registratiegegevens: verplicht op de site, maar bewust onopvallend
   onderaan de kleine lettertjes. */
.voet-registratie {
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #5f7488;
}

.kleine-lettertjes {
  border-top: 1px solid #24455f;
  padding-top: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #a9b8c6;
}
.kleine-lettertjes p { margin-bottom: 10px; }
.kleine-lettertjes p:last-child { margin-bottom: 0; }

/* ---------- breder scherm ---------- */

@media (max-width: 619px) {
  .knoppen { flex-direction: column; align-items: stretch; }
  .knoppen .knop, .knoppen .knop-lijn { width: 100%; }
}

@media (min-width: 620px) {
  h1 { font-size: 38px; }
  .hero h1 { font-size: 42px; }
  h2 { font-size: 28px; }
  .raster { grid-template-columns: repeat(2, 1fr); }
  .prijzen { grid-template-columns: repeat(2, 1fr); }
  .voet-raster { grid-template-columns: repeat(2, 1fr); }
  button.knop { width: auto; }
}

@media (min-width: 900px) {
  body { font-size: 18px; }
  .vlak { padding: 60px 0; }
  .hero { padding: 60px 0 64px; }
  .hero h1 { font-size: 50px; }
  .raster-3 { grid-template-columns: repeat(3, 1fr); }
  .prijzen { grid-template-columns: repeat(3, 1fr); }
  /* Vier kaarten in drie kolommen geeft een losse kaart op de tweede rij.
     Met deze variant staan ze twee bij twee. */
  .prijzen.paren { grid-template-columns: repeat(2, 1fr); }
  .voet-raster { grid-template-columns: 2fr 1fr 1fr; }
  .kop-logo img { height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- afdrukken ---------- */

@media print {
  .kop, .voet, .knoppen, .formulier { display: none; }
  body { font-size: 12pt; color: #000; }
}

/* ---------- kennisbank ---------- */

.kruimel {
  font-size: 15px;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}
.kruimel a { color: var(--grijs); text-decoration: none; }
.kruimel a:hover { color: var(--blauw); }

.artikel h2 {
  margin-top: 38px;
  padding-top: 4px;
}
.artikel h2:first-child { margin-top: 0; }
.artikel h3 { margin-top: 26px; }
.artikel > p:first-child { font-size: 19px; }
.artikel ol { padding-left: 22px; }
.artikel ol li { margin-bottom: 8px; }
.artikel table { min-width: 380px; }

.kaart h3 a { text-decoration: none; }
.kaart h3 a:hover { text-decoration: underline; }