/* ==========================================================================
   CrestWorks — designsysteem
   "Nuchter & Fries": aards, gedempt, degelijk.
   Vormtaal ontleend aan de bestektekening: haarlijnen, genummerde secties,
   randen in plaats van schaduwen, vlakken die tegen elkaar aan liggen.
   ========================================================================== */

:root {
  /* Kleur — afgeleid van het logo, aards vertaald */
  --inkt:        #1B2A33;
  --inkt-zacht:  #2E3F4A;
  --leiblauw:    #2A5A78;   /* spoor ICT */
  --leiblauw-op: #3E7599;
  --mosgroen:    #52703F;   /* spoor energie */
  --mosgroen-op: #6B8C54;
  --terracotta:  #B85C2E;   /* accent */
  --terracotta-op:#D07038;
  --klei:        #EDE7DC;   /* paginaachtergrond — nadrukkelijk geen #fff */
  --papier:      #F8F5F0;
  --steen:       #6B655C;
  --lijn:        rgba(27, 42, 51, 0.16);
  --lijn-zacht:  rgba(27, 42, 51, 0.08);
  --lijn-donker: rgba(237, 231, 220, 0.18);

  /* Typografie */
  --kop:   'Bricolage Grotesque', 'Helvetica Neue', Helvetica, sans-serif;
  --tekst: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, sans-serif;
  --mono:  'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  /* Ritme */
  --marge:   clamp(1.25rem, 5vw, 5.5rem);
  --sectie:  clamp(4.5rem, 11vw, 9.5rem);
  --max:     1440px;
}

/* --- Basis ---------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--klei);
  color: var(--inkt);
  font-family: var(--tekst);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

/* Filmkorrel over de hele pagina. Subtiel, maar het haalt de digitale
   vlakheid eruit die een pagina goedkoop laat lijken. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a { color: inherit; }

::selection { background: var(--terracotta); color: var(--klei); }

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

/* --- Typografie ----------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--kop);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); font-weight: 700; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.9rem, 3.9vw, 3.2rem); }
h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); letter-spacing: -0.015em; }

/* Op heel smalle schermen past een lang samengesteld woord niet meer in de kop:
   "Privacyverklaring" is bij de ondergrens van de H1 breder dan 320px. Afbreken
   levert "Privacyverklari-ng" op, want er zijn geen Nederlandse afbreekpatronen
   in de browser. Dus maken we de kop hier een slag kleiner tot het woord past.
   Op 400px komt dit precies uit op de 2.6rem van hierboven, dus de overgang is
   niet te zien. Het afbreken blijft staan als vangnet voor nog langere woorden;
   op deze site komt het niet voor. */
@media (max-width: 400px) {
  h1 { font-size: clamp(1.9rem, 10.5vw, 2.6rem); }
  h1, h2 {
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lood {
  font-size: clamp(1.1rem, 1.55vw, 1.3rem);
  line-height: 1.55;
  color: var(--inkt-zacht);
  max-width: 34ch;
}

/* De inleiding onder een paginatitel staat niet in een kolom maar over de
   volle breedte. 34ch is daar te smal: dan hangt er een kort stukje tekst
   onder een grote kop. Iets ruimer, en los van de titel. */
.paginakop .lood {
  max-width: 52ch;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
}

.mono {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
}

/* --- Indeling ------------------------------------------------------------- */

.omhulsel {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.sectie { padding-block: var(--sectie); }

/* De kopbalk blijft staan, dus ankerdoelen moeten er ruimte onder houden.
   Zonder dit schuift een sectiekop bij #contact of #ict achter de balk. */
[id] { scroll-margin-top: clamp(5rem, 9vh, 7rem); }

.regel { border-top: 1px solid var(--lijn); }

/* Sectiekop met een label in de kantlijn onder een korte streep, als het
   opschrift van een tekeningblok. Bewust géén 01/02/03: genummerde secties
   zijn inmiddels een sjabloontic. Onder 900px schuift het label boven de kop. */
.sectiekop {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0 2rem;
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.sectiekop__label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--steen);
  padding-top: 0.7em;
  border-top: 1px solid var(--inkt);
}
.sectiekop__tekst > p { margin-top: 1.35rem; }

/* --- Knoppen -------------------------------------------------------------- */
/* Rechthoekig, met rand. Geen pillen, geen schaduw, geen verloop. */

.knop {
  --knop-kleur: var(--terracotta);
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  padding: 0.95em 1.5em;
  background: var(--knop-kleur);
  color: var(--klei);
  border: 1px solid var(--knop-kleur);
  border-radius: 1px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.knop:hover { background: transparent; color: var(--knop-kleur); }
.knop__pijl { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1); }
.knop:hover .knop__pijl { transform: translateX(0.3em); }

.knop--leeg { background: transparent; color: var(--inkt); border-color: var(--lijn); }
.knop--leeg:hover { background: var(--inkt); color: var(--klei); border-color: var(--inkt); }

/* Tekstlink met oplopende onderlijn */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 0.35em;
  border-bottom: 1px solid currentColor;
  transition: gap 0.25s ease;
}
.link:hover { gap: 1em; }

/* --- Kopbalk -------------------------------------------------------------- */

.balk {
  background: var(--inkt);
  color: var(--klei);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
}
.balk__inhoud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  padding-block: 0.7rem;
}
.balk a { text-decoration: none; opacity: 0.85; }
.balk a:hover { opacity: 1; color: var(--terracotta-op); }

.kop {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(237, 231, 220, 0.94);
  backdrop-filter: saturate(1.4) blur(6px);
  border-bottom: 1px solid var(--lijn);
}
.kop__inhoud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1rem;
}
.merk { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.merk img { height: 34px; width: auto; }
.merk__naam {
  font-family: var(--kop);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
}

.menu { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); }
.menu a {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.3em;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.menu a:hover, .menu a[aria-current='page'] { border-color: currentColor; }
.menu a.spoor-ict:hover    { color: var(--leiblauw); }
.menu a.spoor-energie:hover { color: var(--mosgroen); }

/* --- Sporen (ICT blauw / energie groen) ----------------------------------- */

.spoormerk {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.spoormerk::before {
  content: '';
  width: 0.6em;
  height: 0.6em;
  background: currentColor;
}
.is-ict     { color: var(--leiblauw); }
.is-energie { color: var(--mosgroen); }

/* --- Feitenlijst in monospace --------------------------------------------- */

.feiten { list-style: none; margin: 0; padding: 0; }
.feiten li {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 1rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--lijn);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
}
.feiten li:last-child { border-bottom: 1px solid var(--lijn); }
.feiten b {
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--inkt);
}
.feiten span { color: var(--steen); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; padding-top: 0.25em; }

/* --- Kaart ---------------------------------------------------------------- */
/* Rand, geen schaduw. Vult zich bij hover van onder naar boven. */

.kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: 1px;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.25s ease;
}
.kaart::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--kaart-kleur, var(--terracotta));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.kaart:hover { border-color: var(--kaart-kleur, var(--terracotta)); }
.kaart:hover::before { transform: scaleX(1); }
.kaart--ict     { --kaart-kleur: var(--leiblauw); }
.kaart--energie { --kaart-kleur: var(--mosgroen); }

.kaart ul { list-style: none; margin: 0; padding: 0; }
.kaart ul li {
  padding-block: 0.5rem;
  border-top: 1px solid var(--lijn-zacht);
  font-size: 0.9rem;
  color: var(--inkt-zacht);
}
.kaart ul li::before {
  content: '—';
  color: var(--kaart-kleur, var(--terracotta));
  margin-right: 0.7em;
}

/* --- Donkere sectie ------------------------------------------------------- */

.donker {
  position: relative;
  background: var(--inkt);
  color: var(--klei);
  isolation: isolate;
}
.donker h2, .donker h3 { color: var(--klei); }
.donker .lood { color: rgba(237, 231, 220, 0.72); }
.donker .sectiekop__label { color: rgba(237, 231, 220, 0.55); border-top-color: var(--klei); }
.donker .feiten li { border-color: var(--lijn-donker); }
.donker .feiten b { color: var(--klei); }
.donker .feiten span { color: rgba(237, 231, 220, 0.55); }
.donker .knop--leeg { color: var(--klei); border-color: var(--lijn-donker); }
.donker .knop--leeg:hover { background: var(--klei); color: var(--inkt); border-color: var(--klei); }

/* Textuurbeeld als achtergrond van een donkere sectie */
.donker__textuur {
  position: absolute;
  inset: 0;
  z-index: -1;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.16;
  filter: grayscale(0.4);
}

/* --- Portret -------------------------------------------------------------- */
/* De beschikbare foto is 200x200. Groter tonen maakt hem zichtbaar zacht, dus
   staat hij op naamregel-formaat: 96px blijft scherp op retina. Komt er ooit
   een foto op hoge resolutie, dan kan --portret-maat gewoon omhoog. */

.naamregel {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.naamregel img {
  --portret-maat: 96px;
  width: var(--portret-maat);
  height: var(--portret-maat);
  flex: 0 0 auto;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 1px;
  border: 1px solid var(--lijn);
  filter: saturate(0.85);
}
.naamregel__naam {
  font-family: var(--kop);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.naamregel__rol {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steen);
  margin-top: 0.3rem;
}
.donker .naamregel img { border-color: var(--lijn-donker); }
.donker .naamregel__rol { color: rgba(237, 231, 220, 0.6); }

/* --- Beeld ---------------------------------------------------------------- */

.beeld {
  position: relative;
  overflow: hidden;
  background: var(--inkt-zacht);
  border-radius: 1px;
}
.beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.3, 1);
}
a:hover .beeld img, .beeld:hover img { transform: scale(1.03); }

.bijschrift {
  margin-top: 0.85rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steen);
}

/* --- Voettekst ------------------------------------------------------------ */

.voet { background: var(--inkt); color: var(--klei); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.voet a { color: rgba(237, 231, 220, 0.75); text-decoration: none; }
.voet a:hover { color: var(--terracotta-op); }
.voet__raster {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3rem;
}
.voet h4 {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237, 231, 220, 0.5);
  margin-bottom: 1.1rem;
}
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.92rem; }
.voet__onder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  padding-top: 1.75rem;
  border-top: 1px solid var(--lijn-donker);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: rgba(237, 231, 220, 0.5);
}

/* --- Beweging ------------------------------------------------------------- */

/* Onthullen gebeurt alleen als JavaScript draait. Zonder die voorwaarde staat
   alles onder de vouw op opacity 0 te wachten op een waarnemer die nooit komt:
   bij een JS-fout, in een leesmodus of op een miniatuurweergave is de pagina
   dan leeg. De klasse js-aan wordt bovenaan het document gezet. */
.js-aan [data-toon] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.3, 1);
  transition-delay: var(--wacht, 0s);
}
.js-aan [data-toon].zichtbaar { opacity: 1; transform: none; }

@keyframes opkomen {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.opkomen {
  animation: opkomen 0.85s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  animation-delay: var(--wacht, 0s);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
  /* Even specifiek als .js-aan [data-toon], anders wint dat en blijft de
     inhoud onzichtbaar tot de waarnemer alsnog afgaat. */
  .js-aan [data-toon] { opacity: 1; transform: none; }
}

/* --- Klein scherm --------------------------------------------------------- */

@media (max-width: 900px) {
  .sectiekop { grid-template-columns: 1fr; gap: 1.25rem; }
  .sectiekop__label { padding-top: 0.6em; justify-self: start; }
  .voet__raster { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .menu { gap: 0.9rem; }
  .menu a { font-size: 0.62rem; letter-spacing: 0.09em; }
  .merk__naam { display: none; }
  .voet__raster { grid-template-columns: 1fr; }
  .balk__inhoud { font-size: 0.6rem; }
}

/* ==========================================================================
   Componenten uit de pagina-opzet
   In de HTML-opzet stond deze CSS per pagina in een eigen <style>-blok. Hier
   staat alles bij elkaar; zeven selectors met per-pagina-verschillen zijn
   samengetrokken tot één waarde.
   ========================================================================== */


/* --- Hero ------------------------------------------------------------- */
  .hero {
  padding-top: clamp(3.5rem, 8vw, 7rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.hero__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(15rem, 0.85fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: end;
}

.hero__aanhef {
  margin-bottom: 1.75rem;
}

.hero h1 {
  max-width: 15ch;
}

.hero__lood {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  max-width: 46ch;
}

.hero__acties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.hero__zij {
  border-left: 1px solid var(--lijn);
  padding-left: clamp(1.5rem, 2.5vw, 2.5rem);
}

.hero__adres {
  margin-top: 2rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.75;
  color: var(--steen);
  font-style: normal;
}

/* Volle-breedte hero-beeld, iets uit het midden getrokken */
  .heroBeeld {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.heroBeeld .beeld {
  aspect-ratio: 21 / 8;
}

/* --- 02 Sporen -------------------------------------------------------- */
  /* Beide sporen even breed. De tussenruimte zit als padding ín elke kolom,
     aan de kant van de scheidslijn, zodat 1fr ook echt 1fr blijft. */
  .sporen {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.spoor {
  padding: clamp(2rem, 3.5vw, 3.25rem) clamp(2rem, 4vw, 4rem) clamp(2rem, 3.5vw, 3.25rem) 0;
}

.spoor + .spoor {
  border-left: 1px solid var(--lijn);
  padding-left: clamp(2rem, 4vw, 4rem);
  padding-right: 0;
}

.spoor .beeld {
  aspect-ratio: 3 / 2;
  margin-bottom: 1.75rem;
}

.spoor h3 {
  margin: 1.1rem 0 0.9rem;
}

.spoor p {
  color: var(--inkt-zacht);
  max-width: 42ch;
}

.spoor__voor {
  margin: 1.5rem 0;
  padding: 0.7rem 0;
  border-block: 1px solid var(--lijn);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--steen);
}

.spoor__lijst {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}

.spoor__lijst li {
  padding-block: 0.4rem;
  font-size: 0.95rem;
  color: var(--inkt-zacht);
}

.spoor__lijst li::before {
  content: '—';
  margin-right: 0.7em;
  opacity: 0.55;
}

/* --- 03 Vragen -------------------------------------------------------- */
  .vragen {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--lijn);
}

.vragen li {
  border-bottom: 1px solid var(--lijn);
}

.vragen a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: clamp(1rem, 1.8vw, 1.5rem) 0;
  text-decoration: none;
  transition: background 0.3s ease;
}

.vragen a > * {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.vragen a:hover {
  background: var(--papier);
}

.vragen a:hover > * {
  transform: translateX(1.15rem);
}

.vragen__vraag {
  font-family: var(--kop);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.3vw, 1.85rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.vragen__spoor {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- 04 Ron ----------------------------------------------------------- */
  .ron {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.citaat {
  margin: 0;
}

.citaat blockquote {
  margin: 0 0 1.75rem;
  font-family: var(--kop);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
  text-indent: -0.42em;
}

.citaat figcaption {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steen);
}

.citaat p {
  margin-top: 1.5rem;
  color: var(--inkt-zacht);
  max-width: 52ch;
}

/* --- 05 Wat er speelt ------------------------------------------------- */
  .agenda {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--lijn-donker);
  border-block: 1px solid var(--lijn-donker);
}

.agenda__item {
  background: var(--inkt);
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

.agenda__datum {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--terracotta-op);
}

.agenda__item h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
}

.agenda__item p {
  font-size: 0.92rem;
  color: rgba(237, 231, 220, 0.68);
  margin: 0;
}

/* --- 06 Contact ------------------------------------------------------- */
  .contact {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.contact__gegevens {
  display: grid;
  gap: 0;
}

.contact__rij {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1.5rem;
  padding-block: 1rem;
  border-top: 1px solid var(--lijn);
  align-items: baseline;
}

.contact__rij:last-child {
  border-bottom: 1px solid var(--lijn);
}

.contact__label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--steen);
}

.contact__waarde {
  font-family: var(--kop);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  letter-spacing: -0.02em;
  text-decoration: none;
}

a.contact__waarde:hover {
  color: var(--terracotta);
}

.paginakop {
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 4vw, 3.5rem);
}

.kruimel {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--steen);
  margin-bottom: 1.5rem;
}

.kruimel a {
  text-decoration: none;
}

.kruimel a:hover {
  color: var(--terracotta);
}

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.intro h1 {
  max-width: 15ch;
}

/* De tweede .heroBeeld-regel is hier weggehaald. De homepage gebruikte
   clamp(2.5rem, 5vw, 4rem) en de ICT- en energiepagina clamp(2rem, 4vw, 3.5rem).
   In de HTML-opzet stonden die in aparte stylesheets en botsten ze niet; hier
   staat alles in één bestand en won de laatste, waardoor de ruimte boven het
   hero-beeld overal 8px te krap werd. Eén waarde voor alle pagina's. */

/* Inhoudsopgave: op deze pagina staat echt veel tekst */
  .inhoud {
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
  padding-block: 1.25rem;
}

.inhoud ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}

.inhoud a {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--steen);
  border-bottom: 1px solid transparent;
  padding-bottom: 0.2em;
}

.inhoud a:hover {
  color: var(--spoor-kleur, var(--terracotta));
  border-color: currentColor;
}

/* Onderwerp: tekst links, aanvullend blok rechts */
  .onderwerp {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.onderwerp__tekst p {
  max-width: 62ch;
  color: var(--inkt-zacht);
}

.onderwerp h2 {
  margin-bottom: 1.5rem;
}

.onderwerp h3 {
  margin: 2rem 0 0.75rem;
}

/* Vragen die je jezelf moet stellen */
  .checklist {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--lijn);
}

.checklist li {
  padding: 0.85rem 0 0.85rem 2rem;
  border-bottom: 1px solid var(--lijn);
  position: relative;
  color: var(--inkt-zacht);
}

.checklist li::before {
  content: '?';
  position: absolute;
  left: 0;
  top: 0.85rem;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--leiblauw);
}

/* Zijblok met feit of waarschuwing.
     Bewust geen gekleurde balk langs de zijkant: dat is het patroon dat op de
     designsysteem-pagina onder "niet doen" staat. De kleur zit in het vierkantje
     bij het label, net als bij .spoormerk elders op de site. */
  .zijblok {
  --merk-kleur: var(--leiblauw);
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: 1px;
  padding: clamp(1.25rem, 2.2vw, 1.85rem);
  position: sticky;
  top: 6.5rem;
}

.zijblok h3 {
  font-size: 1.05rem;
  margin: 0 0 0.75rem;
}

.zijblok p {
  font-size: 0.92rem;
  color: var(--inkt-zacht);
  margin: 0;
}

.zijblok--let {
  --merk-kleur: var(--terracotta);
}

.zijblok__label {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--steen);
  margin-bottom: 0.85rem;
}

.zijblok__label::before {
  content: '';
  width: 0.62em;
  height: 0.62em;
  background: var(--merk-kleur);
  flex: 0 0 auto;
}

.slot {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.inhoud {
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
  padding-block: 1.25rem;
}

.onderwerp {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* Zijblok: kleur zit in het vierkantje bij het label, niet in een zijbalk */
  .zijblok {
  --merk-kleur: var(--mosgroen);
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: 1px;
  padding: clamp(1.25rem, 2.2vw, 1.85rem);
  position: sticky;
  top: 6.5rem;
}

/* De terugverdientijd: het belangrijkste getal op de pagina */
  .rekensom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  border-block: 1px solid var(--lijn-donker);
  padding-block: clamp(2rem, 4vw, 3rem);
}

.rekensom__zij {
  text-align: center;
}

.rekensom__wanneer {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(237,231,220,.6);
}

.rekensom__getal {
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  margin: 0.75rem 0 0.5rem;
}

.rekensom__nu  .rekensom__getal {
  color: var(--mosgroen-op);
}

.rekensom__dan .rekensom__getal {
  color: var(--terracotta-op);
}

.rekensom__eenheid {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(237,231,220,.6);
}

.rekensom__pijl {
  font-size: 1.5rem;
  color: rgba(237,231,220,.4);
}

.doelgroepen {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.doelgroep {
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 3vw, 2.5rem) 0;
}

.doelgroep + .doelgroep {
  border-left: 1px solid var(--lijn);
  padding-left: clamp(1.5rem, 3vw, 3rem);
  padding-right: 0;
}

.doelgroep h3 {
  margin: 0.9rem 0 0.75rem;
}

.doelgroep p {
  color: var(--inkt-zacht);
}

.paginakop__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(14rem, 0.9fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}

/* Springlinks naar de twee sporen */
  .spring {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--lijn);
}

.spring a {
  flex: 1 1 14rem;
  display: grid;
  gap: 0.35rem;
  padding: 1.4rem 0;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: border-color 0.25s ease;
}

.spring a + a {
  border-left: 1px solid var(--lijn);
  padding-left: clamp(1.25rem, 2.5vw, 2.5rem);
}

.spring a:hover {
  border-bottom-color: var(--spring-kleur);
}

.spring__titel {
  font-family: var(--kop);
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: -0.02em;
}

.spring__bij {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--steen);
}

/* Spoorbanner met beeld */
  .spoorbanner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.spoorbanner .beeld {
  aspect-ratio: 3 / 2;
}

.spoorbanner h2 {
  margin-block: 0.9rem;
}

.spoorbanner p {
  color: var(--inkt-zacht);
  max-width: 46ch;
}

.rooster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
}

.kaart__kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.kaart h3 {
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
}

.kaart__prijsje {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--steen);
  white-space: nowrap;
}

.kaart__actie {
  margin-top: auto;
  padding-top: 0.5rem;
}

/* Partnerregel */
  .partners {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

/* Profiel: beeld en naamregel links, verhaal rechts */
  .profiel {
  display: grid;
  grid-template-columns: minmax(15rem, 0.85fr) minmax(0, 1.5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.sociaal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin-top: 1rem;
}

.sociaal a {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--steen);
  border-bottom: 1px solid transparent;
  padding-bottom: 0.2em;
}

.sociaal a:hover {
  color: var(--terracotta);
  border-color: currentColor;
}

.verhaal p {
  max-width: 58ch;
  color: var(--inkt-zacht);
}

.verhaal p.eerste {
  font-family: var(--kop);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--inkt);
  max-width: 26ch;
  margin-bottom: 1.75rem;
}

/* Tijdlijn van twee vakgebieden */
  .tijdlijn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

/* Tussenruimte als padding ín de kolom, zodat beide banen even breed blijven. */
  .baan {
  padding: 1.25rem clamp(1.5rem, 4vw, 3.5rem) 0 0;
  border-top: 3px solid var(--baan-kleur);
}

.baan + .baan {
  padding-left: clamp(1.5rem, 4vw, 3.5rem);
  padding-right: 0;
  border-left: 1px solid var(--lijn);
}

.baan__jaren {
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--baan-kleur);
  margin: 0.6rem 0 0;
}

.baan__eenheid {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--steen);
  margin: 0.6rem 0 0;
}

/* Alleen de beschrijving, niet elke <p> in .baan: een selector op
     .baan p is specifieker dan .baan__jaren en sloopt daar kleur en marge. */
  .baan__tekst {
  margin: 1.25rem 0 0;
  color: var(--inkt-zacht);
  max-width: 34ch;
}

/* Vragenblok */
  /* Lijnen komen van de cellen zelf, niet van een gekleurde ondergrond met
     gaten erin. Anders kleurt de lege ruimte in de laatste rij mee. */
  .vragenblok {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  border-top: 1px solid var(--lijn);
  border-left: 1px solid var(--lijn);
}

.vragenblok div {
  padding: clamp(1.25rem, 2.2vw, 2rem);
  border-right: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
}

.vragenblok p {
  font-family: var(--kop);
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0;
}

.vragenblok span {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

/* Direct bellen of mailen staat vóór het formulier: sneller voor de bezoeker */
  .direct {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--lijn);
}

.direct a {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem) 0;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.direct a + a {
  border-left: 1px solid var(--lijn);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  padding-right: 0;
}

.direct a:hover {
  border-bottom-color: var(--terracotta);
  background: var(--papier);
}

.direct__label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--steen);
}

.direct__waarde {
  font-family: var(--kop);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  letter-spacing: -0.025em;
}

.direct__bij {
  font-size: 0.9rem;
  color: var(--inkt-zacht);
}

/* Formulier links, gegevens rechts */
  .contactraster {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

/* Het contactblok is een volledige sectie: het brengt zijn eigen ruimte boven
   en onder mee, en een lijn erboven. Over de volle breedte van de voorpagina
   klopt dat. In de rechterkolom van de contactpagina niet: daar levert het een
   gat op tussen de kop van de sectie en de gegevens, en een lijn die maar over
   een deel van de breedte loopt. Binnen dit raster halen we dat er dus af. */
.contactraster .sectie { padding-block: 0; }
.contactraster .regel { border-top: 0; }

.veld {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.veld label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--steen);
}

.veld label .verplicht {
  color: var(--terracotta);
}

.veld input, .veld textarea, .veld select {
  font-family: var(--tekst);
  font-size: 1rem;
  color: var(--inkt);
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: 1px;
  padding: 0.85em 1em;
  width: 100%;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.veld textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.6;
}

.veld input:focus, .veld textarea:focus, .veld select:focus {
  outline: none;
  border-color: var(--terracotta);
  background: #fff;
}

.veld input::placeholder, .veld textarea::placeholder {
  color: rgba(107, 101, 92, 0.6);
}

.veldpaar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.teller {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: var(--steen);
  text-align: right;
}

.teller.vol {
  color: var(--terracotta);
}

/* Onderwerpkeuze stuurt de vraag meteen naar het juiste spoor */
  .keuze {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* De radioknop zelf is onzichtbaar maar blijft bereikbaar met toetsenbord en
     schermlezer. Niet met width/height 0 of position:absolute alleen: die erven
     hierboven width:100% en rekenen dat af tegen het venster, wat de pagina
     honderd pixels breder maakt dan het scherm. */
  .keuze input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.keuze label {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  border: 1px solid var(--lijn);
  border-radius: 1px;
  padding: 0.65em 1em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.keuze label::before {
  content: '';
  width: 0.6em;
  height: 0.6em;
  background: var(--merk-kleur, var(--steen));
}

.keuze input:checked + label {
  border-color: var(--merk-kleur, var(--inkt));
  color: var(--inkt);
  background: var(--papier);
}

.keuze input:focus-visible + label {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.melding {
  border: 1px solid var(--lijn);
  border-radius: 1px;
  background: var(--papier);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: 1.5rem;
}

.melding h3 {
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
}

.melding p {
  margin: 0;
  color: var(--inkt-zacht);
  font-size: 0.95rem;
}

.gegevens {
  border-top: 1px solid var(--lijn);
}

.gegevens__rij {
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--lijn);
  display: grid;
  gap: 0.35rem;
}

.gegevens__label {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--steen);
}

.gegevens__waarde {
  font-size: 1rem;
  font-style: normal;
  line-height: 1.6;
}

.gegevens a {
  text-decoration: none;
  border-bottom: 1px solid var(--lijn);
}

.gegevens a:hover {
  color: var(--terracotta);
  border-color: currentColor;
}

.kaartje {
  margin-top: 2rem;
  border: 1px solid var(--lijn);
  border-radius: 1px;
  overflow: hidden;
}

.kaartje img {
  width: 100%;
  display: block;
  filter: grayscale(0.35) saturate(0.8);
}

.kaartje figcaption {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steen);
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--lijn);
}

.staal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.25rem;
}

.staal__vak {
  border: 1px solid var(--lijn);
  border-radius: 1px;
  overflow: hidden;
  background: var(--papier);
}

.staal__kleur {
  height: 6.5rem;
}

.staal__info {
  padding: 0.85rem 1rem 1rem;
  display: grid;
  gap: 0.2rem;
}

.staal__naam {
  font-family: var(--kop);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.staal__code, .staal__rol {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  color: var(--steen);
}

.staal__rol {
  text-transform: uppercase;
}

.schaal > * {
  margin: 0 0 1.5rem;
}

.schaal__label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steen);
  display: block;
  margin-bottom: 0.4rem;
}

.demo {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.demo--vlak {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: 1px;
}

.regels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.regels ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.regels li {
  padding-block: 0.7rem;
  border-top: 1px solid var(--lijn);
  font-size: 0.95rem;
  color: var(--inkt-zacht);
}

.regels h3 {
  margin-bottom: 1rem;
}

.ja::before {
  content: '✓';
  color: var(--mosgroen);
  margin-right: 0.75em;
  font-weight: 600;
}

.nee::before {
  content: '✕';
  color: var(--terracotta);
  margin-right: 0.75em;
  font-weight: 600;
}

@media (max-width: 700px) {
  .heroBeeld .beeld { aspect-ratio: 3 / 2; }
  .rekensom { grid-template-columns: 1fr; gap: 1.5rem; }
  .rekensom__pijl { transform: rotate(90deg); }
  .direct { grid-template-columns: 1fr; }
  .direct a { padding-right: 0; }
  .direct a + a { border-left: 0; border-top: 1px solid var(--lijn); padding-left: 0; }
  .regels { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .vragen a { grid-template-columns: 1fr; gap: 0.4rem; }
  .vragen__spoor { justify-self: start; }
}

@media (max-width: 820px) {
  .agenda { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .hero__raster, .ron, .contact { grid-template-columns: 1fr; }
  .hero__zij { border-left: 0; border-top: 1px solid var(--lijn); padding-left: 0; padding-top: 2rem; }
  .sporen { grid-template-columns: 1fr; }
  .spoor { padding-right: 0; }
  .spoor + .spoor { border-left: 0; border-top: 1px solid var(--lijn); padding-left: 0; }
  .intro, .onderwerp, .slot { grid-template-columns: 1fr; }
  .zijblok { position: static; }
  .paginakop__raster, .spoorbanner, .partners { grid-template-columns: 1fr; }
  .spring a + a { border-left: 0; border-top: 1px solid var(--lijn); padding-left: 0; }
  .intro, .profiel, .tijdlijn, .slot { grid-template-columns: 1fr; }
  .baan { padding-right: 0; }
  .baan + .baan { padding-left: 0; border-left: 0; margin-top: 2.5rem; }
  .intro, .contactraster { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .doelgroepen { grid-template-columns: 1fr; }
  .doelgroep { padding-right: 0; }
  .doelgroep + .doelgroep { border-left: 0; border-top: 1px solid var(--lijn); padding-left: 0; }
}

@media (max-width: 560px) {
  .veldpaar { grid-template-columns: 1fr; gap: 0; }
}

/* ==========================================================================
   Blokken van WordPress

   Het thema laadt wp-block-library niet; zie inc/assets.php voor het waarom.
   Dat betekent dat de blokken die we gebruiken hier hun opmaak krijgen. Het is
   een korte lijst, want de patronen gebruiken maar een handvol blokken.

   Gebruik je later een blok dat hier niet staat (galerij, tabel, insluiting),
   voeg de opmaak dan hier toe. Niet de blok-CSS van WordPress terugzetten:
   dan komen alle gevechten om de specificiteit terug.
   ========================================================================== */

/* Groep — een gewone div. Onze eigen klassen doen het werk. */
.wp-block-group { box-sizing: border-box; }

/* Kolommen. Standaard naast elkaar; een eigen klasse mag er een raster van
   maken zonder dat er iets overheen komt, want er is geen concurrerende regel. */
/* De standaardafstand staat in :where(), en dat heeft specificiteit nul. Elke
   componentklasse hierboven wint er dus altijd van, ongeacht de volgorde in
   dit bestand. Zonder die truc eet deze gap 40px uit .sporen, dat zijn
   tussenruimte juist als padding ín de kolommen heeft staan. */
.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  align-items: normal;
  box-sizing: border-box;
}
:where(.wp-block-columns) { gap: clamp(1.5rem, 3vw, 2.5rem); }
.wp-block-column {
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
  word-break: break-word;
  box-sizing: border-box;
}
.wp-block-column[style*="flex-basis"] { flex-grow: 0; }

@media (max-width: 780px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-direction: column; }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; }
}

/* De marges van de blokken staan in :where(), met specificiteit nul.

   Dat is hier geen stijlkwestie maar noodzaak. Een componentklasse als
   .heroBeeld zet een marge boven het beeld; een kale .wp-block-image met
   margin:0 heeft precies dezelfde specificiteit en staat verderop in dit
   bestand, dus die won en de ruimte boven de hero verdween. Met :where()
   wint elke componentklasse altijd, waar hij ook staat. */

:where(.wp-block-heading) { margin: 0; }
:where(.wp-block-list) { margin: 0; padding-left: 1.2em; }
:where(.wp-block-image) { margin: 0; }
:where(.wp-block-buttons) { margin: 0; }

.wp-block-list.spoor__lijst,
.wp-block-list.kaart__lijst { padding-left: 0; list-style: none; }

/* Beeld */
.wp-block-image img { max-width: 100%; height: auto; vertical-align: middle; }
.wp-block-image.beeld img { width: 100%; height: 100%; object-fit: cover; }
.wp-block-image figcaption { margin-top: 0.85rem; }

/* Knoppen */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  background: var(--terracotta);
  color: var(--klei);
  border: 1px solid var(--terracotta);
  border-radius: 1px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95em 1.5em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible { background: transparent; color: var(--terracotta); }

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--inkt);
  border-color: var(--lijn);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  background: var(--inkt);
  color: var(--klei);
  border-color: var(--inkt);
}

/* Uitlijning. Een sectie op volle breedte breekt uit de tekstkolom naar de
   volle vensterbreedte. Geen zijbalk om rekening mee te houden, dus dit werkt
   altijd. */
.entry-content > .alignfull {
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}
.entry-content > .alignwide {
  margin-inline: calc(50% - 50vw + var(--marge));
  width: auto;
  max-width: calc(100vw - var(--marge) * 2);
}

/* Kleuren uit het palet, voor als iemand in de editor een blok inkleurt. */
.has-inkt-color        { color: var(--inkt); }
.has-leiblauw-color    { color: var(--leiblauw); }
.has-mosgroen-color    { color: var(--mosgroen); }
.has-terracotta-color  { color: var(--terracotta); }
.has-steen-color       { color: var(--steen); }
.has-klei-color        { color: var(--klei); }
.has-papier-color      { color: var(--papier); }
.has-inkt-background-color       { background-color: var(--inkt); }
.has-leiblauw-background-color   { background-color: var(--leiblauw); }
.has-mosgroen-background-color   { background-color: var(--mosgroen); }
.has-terracotta-background-color { background-color: var(--terracotta); }
.has-steen-background-color      { background-color: var(--steen); }
.has-klei-background-color       { background-color: var(--klei); }
.has-papier-background-color     { background-color: var(--papier); }

/* Wat WordPress verder nog uitspuugt en wat we netjes willen houden. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ==========================================================================
   De pagina zelf
   ========================================================================== */

/* De inhoud van een pagina krijgt dezelfde container als de rest van het
   ontwerp: dezelfde maximumbreedte en dezelfde zijmarge als .omhulsel. Zonder
   dit lopen gewone blokken tot de rand van het scherm, terwijl de kopbalk en
   de contactbalk erboven wél inspringen.

   Een sectie op volle breedte breekt hier weer uit met de alignfull-regel
   hierboven. Die rekenverhouding klopt met deze padding: 50% van de inhoud
   min 50vw levert precies de marge die nodig is om tot de vensterrand te
   komen, bij elke schermbreedte. */
.entry-content {
  display: flow-root;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--marge);
}

/* Een sectie brengt zijn eigen omhulsel mee, dus die hoeft niet nog eens
   in te springen. */
.entry-content > .alignfull > .omhulsel {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--marge);
}

/* Overslaan-link voor toetsenbordgebruikers. Onzichtbaar tot hij focus krijgt. */
.overslaan {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 0.85em 1.25em;
  background: var(--inkt);
  color: var(--klei);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
}
.overslaan:focus { left: var(--marge); top: 0.5rem; }

/* --- Menu ---------------------------------------------------------------- */

.menu__lijst {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu__lijst a {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.3em;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.menu__lijst a:hover,
.menu__lijst .current-menu-item > a,
.menu__lijst .current_page_item > a { border-color: currentColor; }
.menu__lijst .spoor-ict a:hover     { color: var(--leiblauw); }
.menu__lijst .spoor-energie a:hover { color: var(--mosgroen); }

/* Uitklap */
.menu__lijst li { position: relative; }
.menu__lijst ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 14rem;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: 1px;
  display: none;
}
.menu__lijst li:hover > ul,
.menu__lijst li:focus-within > ul { display: block; }
.menu__lijst ul a { padding: 0.6em 1em; display: block; }

.menuknop {
  display: none;
  background: transparent;
  border: 1px solid var(--lijn);
  border-radius: 1px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--inkt);
  padding: 0.6em 1em;
  cursor: pointer;
}

@media (max-width: 860px) {
  .menuknop { display: inline-block; }
  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--klei);
    border-top: 1px solid var(--lijn);
    border-bottom: 1px solid var(--lijn);
    padding: var(--marge);
  }
  .menu.open { display: block; }
  .kop__inhoud { position: relative; }
  .menu__lijst { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__lijst > li { border-bottom: 1px solid var(--lijn-zacht); }
  .menu__lijst > li:last-child { border-bottom: 0; }
  .menu__lijst a { padding: 0.9em 0; display: block; }
  .menu__lijst ul { position: static; display: block; border: 0; background: transparent; padding-left: 1rem; }
}

/* --- Voettekst ----------------------------------------------------------- */

.voet__merk {
  font-family: var(--kop);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
}
.voet__zin { font-size: 0.92rem; color: rgba(237, 231, 220, 0.7); max-width: 30ch; }
.voet__adres { color: rgba(237, 231, 220, 0.7); }
.voet__sociaal { display: flex; flex-wrap: wrap; gap: 0 1.25rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.voet__sociaal a { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.11em; text-transform: uppercase; }
.voet__menu ul, .voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.92rem; }
.voet__juridisch { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.voet__cookieknop {
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(237, 231, 220, 0.35);
  color: rgba(237, 231, 220, 0.75);
  font: inherit;
  padding: 0;
  cursor: pointer;
}
.voet__cookieknop:hover { color: var(--terracotta-op); border-color: currentColor; }

/* --- Paginering ---------------------------------------------------------- */

.paginering, .navigation.pagination { margin-top: 2.5rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.page-numbers {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  border: 1px solid var(--lijn);
  border-radius: 1px;
  padding: 0.6em 0.9em;
}
.page-numbers.current, .page-numbers:hover { background: var(--inkt); color: var(--klei); border-color: var(--inkt); }

/* ==========================================================================
   Contactformulier
   ========================================================================== */

.contactformulier { margin-top: 2rem; }

.veld { display: grid; gap: 0.5rem; margin-bottom: 1.25rem; }
.veld label,
.veld__label {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--steen);
}
.veld .verplicht { color: var(--terracotta); }
.veld input, .veld textarea {
  font-family: var(--tekst); font-size: 1rem; color: var(--inkt);
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: 1px;
  padding: 0.85em 1em;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.veld textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.veld input:focus, .veld textarea:focus {
  outline: none; border-color: var(--terracotta); background: #fff;
}
.veld input::placeholder, .veld textarea::placeholder { color: rgba(107, 101, 92, 0.6); }
.veldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 560px) { .veldpaar { grid-template-columns: 1fr; gap: 0; } }

.teller { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; color: var(--steen); text-align: right; }
.teller.vol { color: var(--terracotta); }

/* De keuzeknoppen voor het onderwerp. De radio zelf is onzichtbaar maar
   bereikbaar met toetsenbord en schermlezer. Niet met width/height 0: die
   erven hierboven width:100% en maken de pagina breder dan het scherm. */
.keuze { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.keuze input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.keuze label {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--inkt-zacht);
  border: 1px solid var(--lijn); border-radius: 1px;
  padding: 0.65em 1em; cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.keuze label::before { content: ''; width: 0.6em; height: 0.6em; background: var(--merk-kleur, var(--steen)); }
.keuze input:checked + label { border-color: var(--merk-kleur, var(--inkt)); color: var(--inkt); background: var(--papier); }
.keuze input:focus-visible + label { outline: 2px solid var(--terracotta); outline-offset: 3px; }

/* Het honeypot-veld. Weg van het scherm in plaats van display:none, want
   sommige bots slaan velden over die echt verborgen zijn. */
.honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.melding {
  border: 1px solid var(--lijn);
  border-radius: 1px;
  background: var(--papier);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-bottom: 1.75rem;
}
.melding:focus { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.melding h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.melding p { margin: 0; color: var(--inkt-zacht); font-size: 0.95rem; }
.melding--goed { border-left: 3px solid var(--mosgroen); }
.melding--fout { border-left: 3px solid var(--terracotta); }

.contactformulier__klein {
  font-size: 0.85rem; color: var(--steen); margin-top: 1.5rem; max-width: 52ch;
}

/* ==========================================================================
   Cookiemelding
   ========================================================================== */

.cookiemelding {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 200;
  background: var(--inkt);
  color: var(--klei);
  border-top: 3px solid var(--terracotta);
  animation: cookie-op 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@keyframes cookie-op { from { transform: translateY(100%); } to { transform: none; } }

.cookiemelding__inhoud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  padding-block: 1.25rem;
}
.cookiemelding__tekst { max-width: 62ch; }
.cookiemelding__tekst p { margin: 0; font-size: 0.92rem; color: rgba(237, 231, 220, 0.78); }
.cookiemelding__tekst p + p { margin-top: 0.4rem; }
.cookiemelding__tekst strong { color: var(--klei); font-weight: 600; }
.cookiemelding__tekst a { color: var(--terracotta-op); }

/* Weigeren moet even makkelijk zijn als accepteren: zelfde maat, zelfde plek,
   geen grijs knopje naast een gekleurde. */
.cookiemelding__knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cookiemelding .knop--leeg { color: var(--klei); border-color: rgba(237, 231, 220, 0.35); }
.cookiemelding .knop--leeg:hover { background: var(--klei); color: var(--inkt); border-color: var(--klei); }

@media (prefers-reduced-motion: reduce) {
  .cookiemelding { animation: none; }
}

/* De sporen verdelen hun tussenruimte als padding ín de kolommen, aan de kant
   van de scheidslijn, zodat beide kolommen even breed blijven. Ze declareren
   daarom zelf geen gap — en zonder deze regel vallen ze terug op de standaard
   van :where(.wp-block-columns), die er 40px tussenuit haalt. */
.wp-block-columns.sporen,
.wp-block-columns.doelgroepen,
.wp-block-columns.tijdlijn { gap: 0; }

/* ==========================================================================
   Kolommenblokken die eigenlijk een raster zijn

   De patronen en pagina's gebruiken wp:columns, omdat dat in de editor prettig
   werkt: kolommen zijn zichtbaar en versleepbaar. Maar een kolommenblok is
   flex met wrap, en onze componenten zetten breedtes die samen op 100% uitkomen.
   Met de tussenruimte erbij past dat niet, dus wipt de tweede kolom naar de
   volgende regel — precies wat er misging met de zijblokken op de ICT-pagina.

   Door beide klassen te combineren staat het raster vast.
   ========================================================================== */

.wp-block-columns.hero__raster,
.wp-block-columns.sporen,
.wp-block-columns.onderwerp,
.wp-block-columns.ron,
.wp-block-columns.sectiekop,
.wp-block-columns.intro,
.wp-block-columns.paginakop__raster,
.wp-block-columns.spoorbanner,
.wp-block-columns.profiel,
.wp-block-columns.tijdlijn,
.wp-block-columns.doelgroepen,
.wp-block-columns.contactraster,
.wp-block-columns.contact,
.wp-block-columns.partners,
.wp-block-columns.slot {
  display: grid;
}

/* De hero-figuur draagt beide klassen op hetzelfde element, dus de
   afstammelingsselector .heroBeeld .beeld raakt hem niet. Zonder deze regel
   heeft het beeld geen hoogteverhouding en wordt het torenhoog. */
.beeld.heroBeeld { aspect-ratio: 21 / 8; }

@media (max-width: 700px) {
  .beeld.heroBeeld { aspect-ratio: 3 / 2; }
}

/* Onder de omslagbreedte stapelt alles weer netjes. */
@media (max-width: 860px) {
  .wp-block-columns.hero__raster,
  .wp-block-columns.onderwerp,
  .wp-block-columns.ron,
  .wp-block-columns.intro,
  .wp-block-columns.profiel,
  .wp-block-columns.contactraster,
  .wp-block-columns.slot,
  .wp-block-columns.partners { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Juridische pagina's

   Een privacyverklaring is lopende tekst, geen opgemaakte pagina. Hij hoeft
   niet mooi te zijn maar wel goed leesbaar, en dat betekent vooral: geen
   regels van 1300 pixels breed.
   ========================================================================== */

.juridisch { max-width: 70ch; }
.juridisch h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--lijn);
}
.juridisch h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.juridisch p { margin-bottom: 1.15em; color: var(--inkt-zacht); }
.juridisch .wp-block-list { margin-bottom: 1.5em; }
.juridisch strong { color: var(--inkt); font-weight: 600; }

.cookietabel {
  width: 100%;
  border-collapse: collapse;
  margin-block: 1.75rem;
  font-size: 0.92rem;
}
.cookietabel th,
.cookietabel td {
  text-align: left;
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--lijn);
  vertical-align: top;
}
.cookietabel th {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--steen);
  font-weight: 500;
  border-bottom-color: var(--inkt);
}
.cookietabel td:first-child { font-family: var(--mono); font-size: 0.82rem; white-space: nowrap; padding-right: 1.5rem; }
.cookietabel td:last-child { white-space: nowrap; }
@media (max-width: 620px) {
  .cookietabel, .cookietabel tbody, .cookietabel tr, .cookietabel td { display: block; width: 100%; }
  .cookietabel thead { display: none; }
  .cookietabel tr { border-bottom: 1px solid var(--lijn); padding-block: 0.85rem; }
  .cookietabel td { border: 0; padding: 0.15rem 0; white-space: normal; }
}