/* ==========================================================================
   Routekaart Gouwestroom

   De identiteit volgt de opdrachtgever. Gemeente Gouda werkt met wit, bijna
   zwart (#212121), één rood accent (#EA1017) en de letter Ubuntu; die drie zijn
   hier overgenomen als basis van de site. Daar bovenop liggen de vier
   spoorkleuren uit het onderzoek — navy, oranje, groen en cyaan — die op de A3
   van het beroepsproduct dezelfde betekenis hebben.

   Kleur draagt dus precies drie dingen:
     · zwart, wit en grijs = de site zelf
     · rood                = dit moet eerst, en hier valt een besluit
     · vier spoorkleuren   = bij welk beleidsveld een halte hoort
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --rood: #ea1017;
  --rood-diep: #b40d12;
  --inkt: #212121;
  --inkt-zacht: #4f4f4f;
  --inkt-licht: #757575;

  --papier: #ffffff;
  --grond: #f4f4f4;
  --grond-2: #ebebeb;
  --lijn: #e0e0e0;
  --lijn-hard: #c6c6c6;

  --gov: #163560;
  --en: #d9822b;
  --gr: #4f9d52;
  --mo: #2e8da8;

  --asfalt: #33383d;
  --asfalt-diep: #23272b;
  --berm: #d8d5cd;
  --streep: #f2f2f0;

  --tint-1: #f3f6fa;
  --tint-2: #fdf6ec;
  --tint-3: #f2f8f2;

  --schaduw: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px -14px rgba(0, 0, 0, 0.3);
  --schaduw-op: 0 2px 8px rgba(0, 0, 0, 0.1), 0 26px 56px -26px rgba(0, 0, 0, 0.45);

  --ui: "Ubuntu", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  --maat: 1400px;
  --gutter: clamp(14px, 3vw, 36px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --rood: #ff5a5f;
    --rood-diep: #ff7b80;
    --inkt: #ededed;
    --inkt-zacht: #b9b9b9;
    --inkt-licht: #949494;
    --papier: #1a1c1f;
    --grond: #131518;
    --grond-2: #202328;
    --lijn: #303338;
    --lijn-hard: #43474d;
    --gov: #85a4d4;
    --en: #e3a35e;
    --gr: #6fb072;
    --mo: #55aac4;
    --asfalt: #2a2e33;
    --asfalt-diep: #1b1e22;
    --berm: #34372f;
    --streep: #d8d8d4;
    --tint-1: #171b22;
    --tint-2: #201c17;
    --tint-3: #161d17;
    --schaduw: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -14px rgba(0, 0, 0, 0.9);
    --schaduw-op: 0 2px 8px rgba(0, 0, 0, 0.6), 0 26px 56px -26px rgba(0, 0, 0, 1);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --rood: #ff5a5f;
  --rood-diep: #ff7b80;
  --inkt: #ededed;
  --inkt-zacht: #b9b9b9;
  --inkt-licht: #949494;
  --papier: #1a1c1f;
  --grond: #131518;
  --grond-2: #202328;
  --lijn: #303338;
  --lijn-hard: #43474d;
  --gov: #85a4d4;
  --en: #e3a35e;
  --gr: #6fb072;
  --mo: #55aac4;
  --asfalt: #2a2e33;
  --asfalt-diep: #1b1e22;
  --berm: #34372f;
  --streep: #d8d8d4;
  --tint-1: #171b22;
  --tint-2: #201c17;
  --tint-3: #161d17;
  --schaduw: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -14px rgba(0, 0, 0, 0.9);
  --schaduw-op: 0 2px 8px rgba(0, 0, 0, 0.6), 0 26px 56px -26px rgba(0, 0, 0, 1);
}

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

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

body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--ui);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.014em;
  margin: 0;
  color: var(--inkt);
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--inkt);
  text-underline-offset: 3px;
  text-decoration-color: var(--rood);
}

a:hover {
  color: var(--rood);
}

.num {
  font-variant-numeric: tabular-nums;
}

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

.smal {
  max-width: 720px;
}

.eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rood);
  margin: 0 0 10px;
}

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

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

button:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
   AFZENDER EN KOP
   ========================================================================== */
.afzender {
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
  font-size: 13px;
  color: var(--inkt-zacht);
}

.afzender__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  min-height: 58px;
  padding-block: 8px;
}

.afzender__blok {
  display: flex;
  align-items: center;
  gap: 10px;
}

.afzender__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inkt-licht);
}

.logo {
  height: 30px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
}

.logo[hidden] {
  display: none;
}

.logo-tekst {
  font-weight: 700;
  color: var(--inkt);
  letter-spacing: -0.01em;
}

.afzender__rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.pdfknop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--inkt);
  text-decoration: none;
  border: 1px solid var(--lijn-hard);
  padding: 6px 12px;
  border-radius: 3px;
  white-space: nowrap;
}

.pdfknop:hover {
  border-color: var(--rood);
  color: var(--rood);
}

.themaknop {
  border: 1px solid var(--lijn-hard);
  background: transparent;
  color: var(--inkt-zacht);
  border-radius: 3px;
  width: 32px;
  height: 30px;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.themaknop:hover {
  color: var(--rood);
  border-color: var(--rood);
}

/* ---------- titelblok ---------- */
.titelblok {
  background: var(--papier);
  border-bottom: 4px solid var(--rood);
}

.titelblok__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: end;
  padding-block: clamp(26px, 4vw, 46px) clamp(18px, 2.6vw, 26px);
}

.titelblok h1 {
  font-size: clamp(28px, 4.4vw, 50px);
  max-width: 18ch;
  margin-bottom: 10px;
}

.titelblok__leus {
  font-size: clamp(16px, 1.9vw, 19px);
  color: var(--inkt-zacht);
  margin: 0;
  max-width: 62ch;
}

.kerncijfers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 30px;
}

.kerncijfers li {
  text-align: right;
  border-right: 3px solid var(--rood);
  padding-right: 14px;
}

.kerncijfers b {
  display: block;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--inkt);
  letter-spacing: -0.02em;
}

.kerncijfers span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inkt-licht);
  margin-top: 6px;
  max-width: 16ch;
  line-height: 1.35;
  margin-left: auto;
}

@media (max-width: 900px) {
  .titelblok__in {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .kerncijfers {
    gap: 16px;
  }

  .kerncijfers li {
    text-align: left;
    border-right: 0;
    border-left: 3px solid var(--rood);
    padding-right: 0;
    padding-left: 10px;
  }

  .kerncijfers span {
    margin-left: 0;
  }
}

/* ---------- bediening ---------- */
.bediening {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--grond) 94%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--lijn);
}

.bediening__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding-block: 9px;
}

.bediening__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inkt-licht);
  margin-right: 4px;
}

.knopje {
  font-size: 13px;
  font-weight: 500;
  padding: 5px 12px 5px 9px;
  border-radius: 3px;
  border: 1px solid var(--lijn-hard);
  background: var(--papier);
  color: var(--inkt-zacht);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.knopje .stip {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: currentColor;
  flex: 0 0 auto;
}

.knopje:hover {
  border-color: var(--inkt);
  color: var(--inkt);
}

.knopje[aria-pressed="true"] {
  color: var(--papier);
  background: var(--inkt);
  border-color: var(--inkt);
}

.knopje[data-spoor="gov"] {
  color: var(--gov);
}
.knopje[data-spoor="en"] {
  color: var(--en);
}
.knopje[data-spoor="gr"] {
  color: var(--gr);
}
.knopje[data-spoor="mo"] {
  color: var(--mo);
}

.knopje[data-spoor][aria-pressed="true"] {
  color: #fff;
}

.knopje[data-spoor][aria-pressed="true"] .stip {
  background: #fff;
}

.knopje[data-spoor="gov"][aria-pressed="true"] {
  background: var(--gov);
  border-color: var(--gov);
}
.knopje[data-spoor="en"][aria-pressed="true"] {
  background: var(--en);
  border-color: var(--en);
}
.knopje[data-spoor="gr"][aria-pressed="true"] {
  background: var(--gr);
  border-color: var(--gr);
}
.knopje[data-spoor="mo"][aria-pressed="true"] {
  background: var(--mo);
  border-color: var(--mo);
}
.knopje[data-spoor="alles"][aria-pressed="true"] {
  background: var(--inkt);
  border-color: var(--inkt);
}

.bediening__nav {
  margin-left: auto;
  display: flex;
  gap: 2px;
}

.bediening__nav a {
  font-size: 13px;
  text-decoration: none;
  color: var(--inkt-zacht);
  padding: 5px 9px;
  border-radius: 3px;
}

.bediening__nav a:hover {
  color: var(--rood);
  background: var(--papier);
}

@media (max-width: 1100px) {
  .bediening__nav {
    display: none;
  }
}

/* ==========================================================================
   DE ROUTE
   ========================================================================== */
.routesectie {
  padding-block: clamp(18px, 2.6vw, 30px) clamp(30px, 4vw, 50px);
}

.route {
  position: relative;
  padding: 10px clamp(8px, 1.4vw, 16px) 20px;
}

.route__weg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.weg__berm {
  stroke: var(--berm);
}

.weg__asfalt {
  stroke: var(--asfalt);
}

.weg__korrel {
  stroke: #ffffff;
  opacity: 0.05;
}

.weg__kant {
  stroke: var(--streep);
  opacity: 0.8;
}

.weg__binnen {
  stroke: var(--asfalt);
}

.weg__streep {
  stroke: var(--streep);
  opacity: 0.9;
}

.weg__pijl {
  fill: none;
  stroke: var(--streep);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}

.weg__poort {
  stroke: var(--rood);
}

.weg__ruit {
  fill: var(--rood);
}

.jaarpaal__vlak {
  fill: var(--papier);
  stroke: var(--inkt);
  stroke-width: 1.5;
}

.jaarpaal__tekst {
  fill: var(--inkt);
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}

/* ---------- etappes: vertrek en bestemming ---------- */
.etappe {
  position: relative;
  z-index: 2;
  padding-block: 8px 18px;
}

.etappe--doel {
  padding-top: 26px;
  display: flex;
  justify-content: flex-end;
}

.wegbord {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--inkt);
  color: #f2f2f2;
  border-radius: 6px;
  padding: 16px 20px 17px;
  box-shadow: var(--schaduw-op);
  max-width: 520px;
}

.wegbord__schild {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 62px;
  padding: 6px 10px;
  background: var(--rood);
  color: #fff;
  border-radius: 3px;
  font-weight: 700;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.wegbord__kop {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #a5a5a5;
  margin-bottom: 5px;
}

.wegbord__tekst strong {
  display: block;
  font-size: 18px;
  line-height: 1.3;
  color: #fff;
}

.wegbord__tekst p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #c9c9c9;
}

.etappe__uitleg {
  max-width: 640px;
  margin-top: 16px;
  padding-left: 20px;
  border-left: 3px solid var(--lijn-hard);
}

.etappe__uitleg p {
  font-size: 15.5px;
  color: var(--inkt-zacht);
  margin-bottom: 10px;
}

.etappe__bron {
  font-size: 14px !important;
  color: var(--inkt-licht) !important;
  margin-bottom: 0 !important;
}

/* ---------- fasezone ---------- */
.fase {
  border-radius: 10px;
  padding: 18px 0 20px;
  margin-block: 16px;
}

.fase[data-fase="1"] {
  background: var(--tint-1);
}
.fase[data-fase="2"] {
  background: var(--tint-2);
}
.fase[data-fase="3"] {
  background: var(--tint-3);
}

.fase__kop {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  align-items: flex-start;
  padding-inline: clamp(16px, 2.2vw, 26px);
  margin-bottom: 12px;
}

/* de wegwijzer: een bord met een punt, zoals langs de weg */
.wegwijzer {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--papier);
  border: 2px solid var(--inkt);
  border-radius: 4px;
  padding: 10px 30px 10px 12px;
  position: relative;
  flex: 0 0 auto;
  box-shadow: var(--schaduw);
}

.wegwijzer::after {
  content: "";
  position: absolute;
  right: -13px;
  top: -2px;
  bottom: -2px;
  width: 26px;
  background: var(--papier);
  border: 2px solid var(--inkt);
  border-left: 0;
  clip-path: polygon(0 0, 40% 0, 100% 50%, 40% 100%, 0 100%);
}

.wegwijzer__nr {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 3px;
  background: var(--rood);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}

.wegwijzer__label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--inkt-licht);
}

.wegwijzer__tekst strong {
  display: block;
  font-size: 19px;
  line-height: 1.2;
  color: var(--inkt);
}

.wegwijzer__jaren {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--rood);
  margin-top: 2px;
}

.fase__toelichting {
  flex: 1 1 360px;
  max-width: 620px;
}

.fase__mijl {
  font-size: 14.5px;
  color: var(--inkt-zacht);
  margin: 0 0 8px;
}

.fase__poort {
  margin: 0;
  font-size: 13.5px;
  color: var(--inkt-zacht);
  border-left: 3px solid var(--rood);
  padding-left: 11px;
}

.fase__poort b {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rood);
  margin-bottom: 1px;
}

/* ---------- haltes ---------- */
.halte {
  display: contents;
}

.halte__bol {
  position: relative;
  z-index: 3;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid var(--streep);
  background: var(--spoorkleur, var(--gov));
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.halte[data-spoor="gov"] {
  --spoorkleur: var(--gov);
}
.halte[data-spoor="en"] {
  --spoorkleur: var(--en);
}
.halte[data-spoor="gr"] {
  --spoorkleur: var(--gr);
}
.halte[data-spoor="mo"] {
  --spoorkleur: var(--mo);
}

.halte__bol--must {
  box-shadow: 0 0 0 4px var(--rood);
}

.halte__bol:hover,
.halte__bol:focus-visible {
  transform: scale(1.09);
}

.halte.is-actief .halte__bol {
  box-shadow: 0 0 0 4px var(--rood), 0 0 0 9px rgba(234, 16, 23, 0.25);
}

/* ---------- kaartje ---------- */
.halte__kaart {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: 5px;
  padding: 0 14px 12px;
  box-shadow: var(--schaduw);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.halte__kaart--must {
  border-color: color-mix(in srgb, var(--rood) 35%, var(--lijn));
  box-shadow: var(--schaduw), inset 0 0 0 1px color-mix(in srgb, var(--rood) 18%, transparent);
}

.halte__kaart:hover,
.halte.is-actief .halte__kaart {
  transform: translateY(-2px);
  box-shadow: var(--schaduw-op);
}

/* het spoor als gekleurde balk bovenaan het kaartje */
.halte__spoorstreep {
  display: block;
  margin: 0 -14px 10px;
  background: var(--spoorkleur, var(--gov));
  border-radius: 4px 4px 0 0;
  padding: 3px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

.kaart__must {
  display: inline-block;
  background: var(--rood);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
  margin-bottom: 7px;
}

.kaart__titel {
  font-size: 14.5px;
  line-height: 1.25;
  margin-bottom: 8px;
  color: var(--inkt);
}

.kaart__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.kaart__jaar {
  font-weight: 700;
  font-size: 12px;
  color: var(--inkt);
  margin-right: 4px;
}

.kaart__pil {
  font-size: 10.5px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 2px;
  background: var(--grond);
  color: var(--inkt-zacht);
  border: 1px solid var(--lijn);
  white-space: nowrap;
}

.kaart__pil--gem {
  background: var(--inkt);
  color: var(--papier);
  border-color: var(--inkt);
}

/* Alleen de volgorde blijft op het kaartje staan: die bepaalt of je hier al
   kunt beginnen. Doel, instrument en geld staan in het paneel. */
.kaart__na {
  align-self: flex-start;
  font-size: 11px;
  line-height: 1.3;
  color: var(--inkt-licht);
  border-left: 2px solid var(--lijn-hard);
  padding-left: 6px;
}

/* margin-top:auto duwt de link naar de onderrand, zodat de links van alle
   kaartjes in een rij op dezelfde hoogte staan. */
.kaart__meer {
  display: block;
  margin-top: auto;
  padding-top: 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--rood);
}

.kaart__meta + .kaart__meer,
.kaart__na + .kaart__meer {
  margin-top: auto;
}

/* ---------- uitzicht langs de weg ---------- */
/* ---------- uitzicht langs de weg ----------
   Dit is geen halte maar wat je onderweg ziet: een kaart of een foto van het
   terrein. Het moet dus duidelijk minder zwaar wegen dan een kaartje. Geen
   papier, geen rand, geen schaduw — alleen het beeld met een klein bijschrift.
   Het rood blijft gereserveerd voor "dit eerst"; dit label is grijs. */
.uitzicht {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 188px;
  justify-self: center;
}

.uitzicht__beeld {
  display: block;
  width: 100%;
  border: 1px solid var(--lijn);
  border-radius: 4px;
  overflow: hidden;
  padding: 0;
  background: var(--grond);
  cursor: zoom-in;
  opacity: 0.88;
  transition: opacity 0.16s ease;
}

.uitzicht__beeld:hover,
.uitzicht__beeld:focus-visible {
  opacity: 1;
}

.uitzicht__beeld img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--grond);
}

.uitzicht__beeld--foto img {
  object-fit: cover;
}

.uitzicht figcaption {
  padding: 6px 1px 0;
}

.uitzicht__kop {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkt-licht);
  margin-bottom: 1px;
}

.uitzicht__tekst {
  display: block;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--inkt-zacht);
}

/* ==========================================================================
   BREED SCHERM: de weg slingert heen en terug
   ========================================================================== */
@media (min-width: 1001px) {
  .fase__baan {
    display: grid;
    grid-template-rows: auto 88px auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: 16px;
    padding-inline: 112px;
    align-items: center;
  }

  .halte__bol {
    grid-column: var(--kolom);
    grid-row: 2;
    justify-self: center;
    align-self: center;
  }

  .halte__kaart,
  .uitzicht {
    grid-column: var(--kolom);
  }

  .halte__kaart {
    grid-row: 1;
    align-self: end;
    margin-bottom: 10px;
  }

  .halte[data-kant="onder"] .halte__kaart {
    grid-row: 3;
    align-self: start;
    margin-bottom: 0;
    margin-top: 10px;
  }

  .uitzicht[data-kant="boven"] {
    grid-row: 1;
    align-self: end;
    margin-bottom: 10px;
  }

  .uitzicht[data-kant="onder"] {
    grid-row: 3;
    align-self: start;
    margin-top: 10px;
  }

  /* het paaltje van de halte naar het kaartje */
  .halte__kaart::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    height: 11px;
    background: var(--lijn-hard);
  }

  .halte[data-kant="boven"] .halte__kaart::after {
    bottom: -11px;
  }

  .halte[data-kant="onder"] .halte__kaart::after {
    top: -11px;
  }

  .etappe--start {
    padding-bottom: 30px;
  }
}

/* ==========================================================================
   SMAL SCHERM: dezelfde weg, verticaal
   ========================================================================== */
@media (max-width: 1000px) {
  .route {
    padding-inline: 2px;
  }

  .fase__baan {
    display: block;
    padding-inline: clamp(8px, 2vw, 16px);
  }

  .halte {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 14px;
  }

  .halte__bol {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: 48px;
    height: 48px;
    font-size: 18px;
    border-width: 3px;
  }

  .halte__kaart {
    grid-column: 2;
    grid-row: 1;
  }

  .uitzicht {
    margin: 0 0 18px 78px;
  }

  .fase__kop {
    padding-left: 78px;
  }

  .etappe {
    padding-left: 78px;
  }

  .etappe--doel {
    justify-content: flex-start;
  }

  .wegbord {
    max-width: none;
  }

  .etappe__uitleg {
    padding-left: 14px;
  }
}

/* ==========================================================================
   PANEEL
   ========================================================================== */
.paneel {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
}

.paneel.is-open {
  display: block;
}

.paneel__waas {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.55);
}

.paneel__doos {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(580px, 100%);
  background: var(--papier);
  box-shadow: var(--schaduw-op);
  display: flex;
  flex-direction: column;
  animation: schuif 0.2s ease;
}

@keyframes schuif {
  from {
    transform: translateX(22px);
    opacity: 0;
  }
}

.paneel__kop {
  padding: 22px var(--gutter) 16px;
  border-bottom: 1px solid var(--lijn);
  border-top: 6px solid var(--spoor, var(--gov));
  position: relative;
}

.paneel__nr {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkt-licht);
  margin-bottom: 10px;
}

.paneel__kop h3 {
  font-size: 23px;
  line-height: 1.2;
  padding-right: 44px;
}

.paneel__sluit {
  position: absolute;
  top: 16px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--lijn-hard);
  background: var(--papier);
  color: var(--inkt-zacht);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.paneel__sluit:hover {
  color: var(--rood);
  border-color: var(--rood);
}

.paneel__body {
  padding: 8px var(--gutter) 24px;
  overflow-y: auto;
  flex: 1;
}

.merkje {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 9px;
  background: var(--rood);
  color: #fff;
  border-radius: 2px;
  margin: 14px 0 0;
}

.veld {
  padding: 12px 0;
  border-bottom: 1px solid var(--lijn);
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
}

.veld:last-child {
  border-bottom: 0;
}

.veld dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inkt-licht);
}

.veld dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--inkt);
}

.veld--bron dd {
  font-size: 13.5px;
  color: var(--inkt-licht);
}

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

.paneel__voet {
  border-top: 1px solid var(--lijn);
  padding: 12px var(--gutter);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  background: var(--grond);
}

.paneel__nav {
  font-weight: 500;
  font-size: 13px;
  padding: 8px 13px;
  border-radius: 3px;
  border: 1px solid var(--lijn-hard);
  background: var(--papier);
  color: var(--inkt);
  cursor: pointer;
}

.paneel__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.paneel__nav:not(:disabled):hover {
  border-color: var(--rood);
  color: var(--rood);
}

@media (max-width: 620px) {
  .paneel__doos {
    top: auto;
    bottom: 0;
    height: min(88%, 100%);
    width: 100%;
    border-radius: 10px 10px 0 0;
    animation: omhoog 0.2s ease;
  }

  @keyframes omhoog {
    from {
      transform: translateY(26px);
      opacity: 0;
    }
  }
}

/* ==========================================================================
   NA DE ROUTE
   ========================================================================== */
section[id] {
  scroll-margin-top: 70px;
}

.sectie {
  padding-block: clamp(42px, 5.5vw, 72px);
  border-top: 1px solid var(--lijn);
}

.sectie--papier {
  background: var(--papier);
}

.sectie__kop {
  max-width: 760px;
  margin-bottom: clamp(22px, 3.2vw, 36px);
}

.sectie__kop h2 {
  font-size: clamp(24px, 3vw, 32px);
}

.sectie__kop p {
  color: var(--inkt-zacht);
  margin-top: 12px;
  margin-bottom: 0;
}

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

.lopend p:last-child {
  margin-bottom: 0;
}

.kolommen2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(22px, 4vw, 50px);
}

.tussenkop {
  font-size: clamp(18px, 2.2vw, 22px);
  margin-top: clamp(34px, 4.5vw, 50px);
}

.bijschrift {
  font-size: 13px;
  color: var(--inkt-licht);
  margin-top: 8px;
  max-width: 84ch;
}

/* ---------- tabellen ---------- */
.tabelwrap {
  overflow-x: auto;
  border: 1px solid var(--lijn);
  border-radius: 4px;
  background: var(--papier);
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 600px;
}

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

table.data thead th {
  background: var(--inkt);
  color: var(--papier);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  position: sticky;
  top: 0;
}

table.data td.r,
table.data th.r {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

table.data tbody tr:nth-child(even) {
  background: var(--grond);
}

table.data tfoot td {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--rood) 8%, var(--papier));
  border-bottom: 0;
  border-top: 2px solid var(--rood);
}

/* ---------- musts ---------- */
.mustlijst {
  border-top: 3px solid var(--rood);
}

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

.must__kop {
  width: 100%;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 24px;
  align-items: baseline;
  gap: 12px;
  padding: 19px 4px;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.must__nr {
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--rood);
  font-variant-numeric: tabular-nums;
}

.must__kop h3 {
  font-size: 19px;
  line-height: 1.25;
}

.halteverwijzing {
  display: block;
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--inkt-licht);
  margin-top: 6px;
}

.must__pijl {
  color: var(--inkt-licht);
  transition: transform 0.2s ease;
  justify-self: end;
  font-size: 16px;
  line-height: 1;
}

.must__kop[aria-expanded="true"] .must__pijl {
  transform: rotate(180deg);
}

.must__body {
  padding: 0 4px 18px 66px;
}

.must__body[hidden] {
  display: none;
}

@media (max-width: 620px) {
  .must__body {
    padding-left: 4px;
  }

  .must__kop {
    grid-template-columns: 38px minmax(0, 1fr) 20px;
  }

  .must__nr {
    font-size: 23px;
  }
}

.stappen {
  counter-reset: stap;
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 16px;
  max-width: 70ch;
}

.stappen li {
  counter-increment: stap;
  position: relative;
  padding-left: 46px;
  color: var(--inkt-zacht);
  line-height: 1.55;
}

.stappen li::before {
  content: counter(stap);
  position: absolute;
  left: 0;
  top: 1px;
  width: 28px;
  height: 28px;
  border-radius: 3px;
  background: var(--rood);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: grid;
  place-items: center;
}

/* ---------- matrix ---------- */
.matrix {
  overflow-x: auto;
  border: 1px solid var(--lijn);
  border-radius: 4px;
  background: var(--papier);
}

table.mx {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
  font-size: 13.5px;
}

table.mx th,
table.mx td {
  border: 1px solid var(--lijn);
  padding: 7px 9px;
  text-align: center;
}

table.mx thead th {
  background: var(--inkt);
  color: var(--papier);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  vertical-align: bottom;
  min-width: 80px;
}

table.mx thead th.kern {
  background: var(--rood);
  color: #fff;
}

table.mx thead th small {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}

table.mx thead th:first-child,
table.mx tbody th {
  text-align: left;
  min-width: 210px;
}

table.mx tbody th {
  background: var(--grond);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--inkt);
}

table.mx td.sc {
  font-weight: 700;
  font-size: 14px;
  cursor: help;
}

td.sc[data-s="++"] {
  background: color-mix(in srgb, var(--gr) 26%, var(--papier));
  color: var(--inkt);
}

td.sc[data-s="+"] {
  background: color-mix(in srgb, var(--gr) 11%, var(--papier));
  color: var(--inkt-zacht);
}

td.sc[data-s="~"],
td.sc[data-s="–"] {
  color: var(--inkt-licht);
}

table.mx tfoot td,
table.mx tfoot th {
  background: var(--grond);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--inkt);
}

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--inkt-licht);
}

.legenda b {
  color: var(--inkt);
  margin-right: 5px;
}

/* ---------- moscow ---------- */
.moscowfilter {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 18px;
}

.moscowlijst {
  border-top: 3px solid var(--rood);
}

.mrij {
  display: grid;
  grid-template-columns: 30px 84px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 14px 2px;
  border-bottom: 1px solid var(--lijn);
}

.mrij[hidden] {
  display: none;
}

.mrij__nr {
  font-size: 13px;
  font-weight: 700;
  color: var(--inkt-licht);
  font-variant-numeric: tabular-nums;
}

.mtag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 0;
  text-align: center;
  border-radius: 2px;
  border: 1px solid var(--lijn-hard);
  color: var(--inkt-licht);
}

.mtag[data-u="Must"] {
  background: var(--rood);
  border-color: var(--rood);
  color: #fff;
}

.mtag[data-u="Should"] {
  border-color: var(--inkt);
  color: var(--inkt);
}

.mrij h4 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 4px;
  color: var(--inkt);
}

.mrij p {
  margin: 0;
  font-size: 14px;
  color: var(--inkt-zacht);
}

.mrij .voorwaarden {
  font-size: 12.5px;
  color: var(--inkt-licht);
  margin-top: 4px;
}

@media (max-width: 620px) {
  .mrij {
    grid-template-columns: 26px minmax(0, 1fr);
  }

  .mtag {
    grid-column: 2;
    justify-self: start;
    padding-inline: 12px;
  }

  .mrij > div:last-child {
    grid-column: 2;
  }
}

/* ---------- energie ---------- */
.energielijst {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  counter-reset: en;
  border-top: 3px solid var(--rood);
}

.energielijst li {
  counter-increment: en;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--lijn);
}

.energielijst li::before {
  content: counter(en);
  font-weight: 700;
  font-size: 19px;
  color: var(--rood);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.energielijst b {
  display: block;
  font-size: 16px;
  margin-bottom: 2px;
  color: var(--inkt);
}

.energielijst span {
  color: var(--inkt-zacht);
  font-size: 15px;
}

/* ---------- index ---------- */
table.index {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 660px;
}

table.index th,
table.index td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--lijn);
  vertical-align: baseline;
}

table.index thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--inkt-licht);
  border-bottom: 3px solid var(--rood);
}

table.index tbody tr {
  cursor: pointer;
}

table.index tbody tr:hover {
  background: var(--grond);
}

table.index tbody tr.fasestart td {
  border-top: 2px solid var(--lijn-hard);
}

.indexnr {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--spoorkleur, var(--gov));
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

tr[data-spoor="gov"] .indexnr {
  --spoorkleur: var(--gov);
}
tr[data-spoor="en"] .indexnr {
  --spoorkleur: var(--en);
}
tr[data-spoor="gr"] .indexnr {
  --spoorkleur: var(--gr);
}
tr[data-spoor="mo"] .indexnr {
  --spoorkleur: var(--mo);
}

.spoorcel {
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--inkt-licht);
  white-space: nowrap;
}

.jaarcel {
  font-variant-numeric: tabular-nums;
  color: var(--inkt-zacht);
  white-space: nowrap;
}

.mustcel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--rood);
  white-space: nowrap;
}

/* ---------- lichtbak ---------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(15, 15, 15, 0.92);
  display: none;
  place-items: center;
  padding: 24px;
  margin: 0;
}

.lb.is-open {
  display: grid;
}

.lb img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  object-fit: contain;
  background: #fff;
  border-radius: 3px;
}

.lb figcaption {
  color: #d9d9d9;
  font-size: 14px;
  margin-top: 12px;
  text-align: center;
  max-width: 70ch;
}

.lb__sluit {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  font-size: 19px;
  cursor: pointer;
}

/* ---------- voet ---------- */
.voet {
  background: var(--inkt);
  color: #c6c6c6;
  padding-block: 44px 34px;
  font-size: 14.5px;
  border-top: 4px solid var(--rood);
}

[data-theme="dark"] .voet,
:root:not([data-theme="light"]) .voet {
  background: #0d0e10;
}

.voet__rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px 44px;
  align-items: start;
}

.voet strong {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 8px;
}

.voet p {
  max-width: 52ch;
}

.voet__klein {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13px;
  color: #969696;
}

.voet a {
  color: #fff;
}

/* ---------- zonder javascript ---------- */
.geenjs {
  background: var(--inkt);
  color: #e4e4e4;
  padding-block: 32px;
}

.geenjs h2 {
  color: #fff;
  font-size: 22px;
  margin-bottom: 12px;
}

.geenjs ol {
  max-width: 70ch;
  padding-left: 22px;
}

.geenjs li {
  margin-bottom: 10px;
}

.geenjs b {
  color: #ff8a8e;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- print ---------- */
@media print {
  .bediening,
  .paneel,
  .lb,
  .themaknop,
  .kaart__meer {
    display: none !important;
  }

  body {
    background: #fff;
    font-size: 10pt;
  }

  .sectie {
    break-inside: avoid;
  }
}

/* ==========================================================================
   OVERZICHT — de hele route in één balk, blijft in beeld tijdens het scrollen
   ========================================================================== */
.overzichtbalk {
  position: sticky;
  top: 0;
  z-index: 55;
  background: color-mix(in srgb, var(--papier) 96%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--lijn);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

.overzicht {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding-block: 9px 10px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.ovpunt {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 14px 0 0;
  border-right: 2px solid var(--inkt);
  margin-right: 12px;
}

.ovpunt--doel {
  border-right: 0;
  border-left: 2px solid var(--inkt);
  padding: 0 0 0 14px;
  margin: 0 0 0 12px;
}

.ovpunt b {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.ovpunt span {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inkt-licht);
}

.ovfase {
  flex: 1 1 auto;
  min-width: 190px;
  padding: 2px 12px 0;
  border-radius: 5px;
}

.ovfase.is-hier {
  background: var(--grond);
}

.ovfase__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
  white-space: nowrap;
}

.ovfase__label b {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--inkt);
}

.ovfase__label .num {
  font-size: 10.5px;
  color: var(--inkt-licht);
}

.ovstops {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.ovstops::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--asfalt);
  border-radius: 2px;
}

.ovstip {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--papier);
  background: var(--spoorkleur, var(--gov));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}

.ovstip[data-spoor="gov"] {
  --spoorkleur: var(--gov);
}
.ovstip[data-spoor="en"] {
  --spoorkleur: var(--en);
}
.ovstip[data-spoor="gr"] {
  --spoorkleur: var(--gr);
}
.ovstip[data-spoor="mo"] {
  --spoorkleur: var(--mo);
}

.ovstip--must {
  box-shadow: 0 0 0 2px var(--rood);
}

.ovstip:hover {
  transform: scale(1.15);
}

.ovstip.is-hier {
  box-shadow: 0 0 0 3px var(--rood), 0 0 0 6px rgba(234, 16, 23, 0.2);
}

.ovpoort {
  flex: 0 0 auto;
  align-self: center;
  color: var(--rood);
  font-size: 12px;
  padding: 0 4px;
  margin-top: 14px;
}

@media (max-width: 1000px) {
  .overzicht {
    padding-block: 8px;
  }

  .ovfase {
    min-width: 168px;
  }

  .ovpunt span,
  .ovfase__label .num {
    display: none;
  }
}

/* ==========================================================================
   HOOFDSTUKKEN — één ritme voor de hele pagina
   ========================================================================== */
.hoofdstuk {
  padding-block: clamp(34px, 4.6vw, 62px);
  border-top: 1px solid var(--lijn);
}

.hoofdstuk--papier {
  background: var(--papier);
}

.hoofdstuk__kop {
  margin-bottom: clamp(22px, 3vw, 34px);
  padding-bottom: 16px;
  border-bottom: 2px solid var(--inkt);
}

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

.hoofdstuk__nr {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 4px;
  background: var(--rood);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hoofdstuk__kop h2 {
  font-size: clamp(24px, 3vw, 33px);
  margin-bottom: 8px;
}

.hoofdstuk__kop p {
  color: var(--inkt-zacht);
  margin: 10px 0 0;
  max-width: 74ch;
}

.hoofdstuk__bediening {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

@media (max-width: 620px) {
  .hoofdstuk__kop {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
  }

  .hoofdstuk__nr {
    width: 36px;
    height: 36px;
    font-size: 19px;
  }
}

.tussenkop--eerste {
  margin-top: 0;
}

/* ---------- uitvoeringsagenda ---------- */
.agenda {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 3px solid var(--rood);
}

.agenda__rij {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 20px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--lijn);
}

.agenda__wanneer b {
  display: block;
  font-size: 15px;
  color: var(--inkt);
  line-height: 1.3;
}

.agenda__halte {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rood);
  background: none;
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 2px 7px;
  cursor: pointer;
}

.agenda__halte:hover {
  background: var(--rood);
  color: #fff;
}

.agenda__wat p {
  margin: 0;
  color: var(--inkt-zacht);
}

.agenda__onder {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 8px !important;
  font-size: 13px;
}

.agenda__wie {
  font-weight: 700;
  color: var(--inkt);
}

.agenda__beslis {
  color: var(--inkt-licht);
}

@media (max-width: 720px) {
  .agenda__rij {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ---------- afvinklijst ---------- */
.checklist__kop {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inkt-licht);
  margin: 14px 0 8px;
}

.checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  border: 1px solid var(--lijn);
  border-radius: 4px;
  background: var(--grond);
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--lijn);
}

.checklist li:last-child {
  border-bottom: 0;
}

.checklist input {
  margin-top: 4px;
  width: 17px;
  height: 17px;
  accent-color: var(--rood);
  flex: 0 0 auto;
}

.checklist label {
  font-size: 14.5px;
  color: var(--inkt-zacht);
  cursor: pointer;
}

.checklist input:checked + label {
  color: var(--inkt-licht);
  text-decoration: line-through;
}

/* ---------- validatie ---------- */
.validatie {
  border-top: 3px solid var(--rood);
}

.validatie__rij {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 24px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--lijn);
}

.validatie__merk {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.validatie__vraag .validatie__merk {
  color: var(--inkt-licht);
}

.validatie__antwoord .validatie__merk {
  color: var(--rood);
}

.validatie__vraag p {
  margin: 0;
  font-size: 15.5px;
  color: var(--inkt);
  font-style: italic;
}

.validatie__antwoord p {
  margin: 0;
  font-size: 15px;
  color: var(--inkt-zacht);
}

.validatie__antwoord {
  border-left: 3px solid var(--lijn);
  padding-left: 20px;
}

@media (max-width: 760px) {
  .validatie__rij {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .validatie__antwoord {
    border-left: 3px solid var(--rood);
  }
}

/* ---------- ontwerpverantwoording ---------- */
.ontwerp {
  margin: 8px 0 0;
  border-top: 1px solid var(--lijn);
}

.ontwerp dt {
  font-weight: 700;
  font-size: 15.5px;
  color: var(--inkt);
  margin-top: 14px;
}

.ontwerp dd {
  margin: 4px 0 14px;
  font-size: 14.5px;
  color: var(--inkt-zacht);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lijn);
}

/* ---------- QR naar het bijlagenboek ---------- */
.meerweten__in {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.meerweten__qr {
  flex: 0 0 auto;
  display: block;
  background: #fff;
  border-radius: 4px;
  padding: 5px;
  line-height: 0;
}

.meerweten__qr img {
  width: 108px;
  height: 108px;
}

.meerweten__adres {
  font-size: 13px;
  color: #fff;
  word-break: break-all;
}



.teken--eerst {
  color: var(--inkt-licht);
}


/* ==========================================================================
   HET ANTWOORD IN HET KORT, INHOUDSOPGAVE EN VERANKERING
   ========================================================================== */
.kern {
  border-top: 1px solid var(--lijn);
  padding-top: clamp(20px, 2.6vw, 28px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}

.kern__kop {
  grid-column: 1;
  font-size: clamp(19px, 2.2vw, 24px);
  margin-bottom: 10px;
}

.kern__tekst {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  color: var(--inkt-zacht);
  font-size: 15.5px;
  max-width: 60ch;
}

/* De kop van de rechterkolom staat op dezelfde regel als de kop links, zodat
   de twee kolommen als een paar lezen en niet als twee losse blokken. */
.kern__mustkop {
  grid-column: 2;
  grid-row: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rood);
  align-self: end;
  margin-bottom: 10px;
}

.kern__musts {
  grid-column: 2;
  grid-row: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  align-content: start;
}

.kern__must {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--rood);
  border-radius: 3px;
  padding: 11px 14px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.kern__must:hover {
  border-color: var(--rood);
  border-left-color: var(--rood);
}

.kern__nr {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rood);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-top: 1px;
}

.kern__tekstblok {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--inkt-zacht);
}

.kern__tekstblok b {
  color: var(--inkt);
}

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

  .kern__kop,
  .kern__tekst,
  .kern__mustkop,
  .kern__musts {
    grid-column: 1;
    grid-row: auto;
  }

  .kern__mustkop {
    align-self: start;
    margin-top: 22px;
  }
}

/* inhoudsopgave */
.inhoud {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 4px;
  padding: 16px 0 18px;
  margin-top: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--lijn);
}

.inhoud__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inkt-licht);
  margin-right: 10px;
}

.inhoud a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 14px;
  text-decoration: none;
  color: var(--inkt-zacht);
  padding: 4px 10px;
  border-radius: 3px;
}

.inhoud a b {
  color: var(--rood);
  font-weight: 700;
}

.inhoud a:hover {
  background: var(--grond);
  color: var(--inkt);
}

/* genummerde tussenkoppen */
.tussenkop__nr {
  display: inline-block;
  min-width: 42px;
  color: var(--rood);
  font-weight: 700;
}

/* Gouwestroom-specifiek */
.specifiek {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 34px;
  border-top: 1px solid var(--lijn);
}

.specifiek dt {
  font-weight: 700;
  font-size: 15px;
  color: var(--inkt);
  margin-top: 14px;
}

.specifiek dd {
  margin: 4px 0 14px;
  font-size: 14.5px;
  color: var(--inkt-zacht);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lijn);
}

/* validatie als tabel */
table.valtabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 700px;
}

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

table.valtabel thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inkt-licht);
  border-bottom: 2px solid var(--inkt);
  white-space: nowrap;
}

table.valtabel tbody tr:nth-child(even) {
  background: var(--grond);
}

.valtabel__nr {
  width: 38px;
  color: var(--inkt-licht);
  font-size: 13px;
}

.valtabel__vraag {
  width: 40%;
  font-style: italic;
  color: var(--inkt);
}

/* gewone opsomming in plaats van een afvinklijst */
ol.checklist {
  margin: 0 0 18px;
  padding-left: 20px;
  border: 0;
  background: none;
  list-style: decimal;
}

ol.checklist li {
  display: list-item;
  padding: 4px 0;
  border: 0;
  font-size: 14.5px;
  color: var(--inkt-zacht);
}

/* ==========================================================================
   OPSCHONEN: uitlijning en leesbaarheid
   ========================================================================== */

/* de filterbalk met uitleg erboven */
.bedieningblok {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--lijn);
}

.bedieningblok__uitleg {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--inkt-licht) !important;
  max-width: 76ch;
}

.hoofdstuk__bediening {
  margin-top: 0;
}

/* uitklappen van een must: een echte knop in plaats van een pijltje */
.must__open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--inkt-zacht);
  border: 1px solid var(--lijn-hard);
  border-radius: 3px;
  padding: 5px 10px;
}

.must__kop:hover .must__open {
  border-color: var(--rood);
  color: var(--rood);
}

.must__kop {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
}

.must__pijl {
  font-size: 11px;
  justify-self: auto;
}

/* kerncijfers: één rustige groep in plaats van drie losse blokjes */
.kerncijfers {
  gap: 0;
  border-left: 2px solid var(--lijn);
}

.kerncijfers li {
  border-right: 0;
  border-left: 0;
  padding: 0 22px;
  text-align: left;
  position: relative;
}

.kerncijfers li + li {
  border-left: 1px solid var(--lijn);
}

.kerncijfers b {
  color: var(--inkt);
}

.kerncijfers span {
  margin-left: 0;
  max-width: 14ch;
}

@media (max-width: 900px) {
  .kerncijfers {
    border-left: 0;
    flex-wrap: wrap;
    gap: 16px 0;
  }

  .kerncijfers li {
    padding-left: 0;
    padding-right: 26px;
  }

  .kerncijfers li + li {
    border-left: 0;
  }
}

/* het antwoord in het kort: beide kolommen beginnen op dezelfde hoogte */
.kern {
  align-items: start;
}

.kern__kop {
  margin-bottom: 14px;
}

.kern__must {
  align-items: center;
  border-left-width: 3px;
  padding: 12px 16px;
}

.kern__nr {
  margin-top: 0;
}

/* de titel en de leus staan op één maat */
.titelblok__leus {
  max-width: 54ch;
}

/* rustiger ritme tussen de blokken bovenaan */
.titelblok__in {
  padding-block: clamp(24px, 3.4vw, 40px) clamp(16px, 2.2vw, 22px);
  align-items: end;
}

.kern {
  padding-top: clamp(18px, 2.2vw, 24px);
}

.inhoud {
  padding: 14px 0 16px;
  margin-top: clamp(14px, 2vw, 20px);
}


/* de drie logo's in de afzenderbalk, op één ooghoogte */
.logo {
  height: 26px;
  max-width: 210px;
}

#logo-hr {
  height: 22px;
  max-width: 230px;
}

#logo-gouda {
  height: 30px;
}

#logo-campus {
  height: 30px;
}

/* de kerncijfers krijgen ruimte, zodat het bijschrift niet in drie regels breekt */
.kerncijfers span {
  max-width: none;
  white-space: nowrap;
}

.kerncijfers li {
  padding: 0 20px;
}

@media (max-width: 1100px) {
  .kerncijfers span {
    white-space: normal;
    max-width: 15ch;
  }
}

/* ==========================================================================
   KLAPBARE HOOFDSTUKKEN
   De routekaart is het product; hoofdstuk 3, 4 en 5 zijn de onderbouwing
   eronder. Die staan er wel, maar dichtgeklapt, zodat de pagina begint met
   waar het om gaat en niemand zich door negen schermen verantwoording heen
   hoeft te lezen om de route te vinden.
   ========================================================================== */
.hfstuk > summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 168px;
}

.hfstuk > summary::-webkit-details-marker {
  display: none;
}

.hfstuk > summary:hover h2,
.hfstuk > summary:focus-visible h2 {
  color: var(--rood);
}

.hfstuk > summary:focus-visible {
  outline: 2px solid var(--rood);
  outline-offset: 4px;
}

/* dichtgeklapt hoeft de inleiding niet mee te tellen als leesvoer */
.hfstuk:not([open]) > summary {
  border-bottom-width: 1px;
  border-bottom-color: var(--lijn-hard);
}

.hoofdstuk__klap {
  position: absolute;
  right: 0;
  top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--rood);
  white-space: nowrap;
}

.hoofdstuk__klap::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s ease;
}

.hfstuk[open] > summary .hoofdstuk__klap::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.hoofdstuk__klap-in {
  display: none;
}

.hfstuk[open] > summary .hoofdstuk__klap-uit {
  display: none;
}

.hfstuk[open] > summary .hoofdstuk__klap-in {
  display: inline;
}

@media (max-width: 720px) {
  .hfstuk > summary {
    padding-right: 0;
    padding-bottom: 44px;
  }

  .hoofdstuk__klap {
    top: auto;
    bottom: 14px;
    right: auto;
    left: 0;
  }
}

@media print {
  .hfstuk > summary {
    padding-right: 0;
  }

  .hoofdstuk__klap {
    display: none;
  }
}

/* ==========================================================================
   AFZENDERBALK OP EEN SMAL SCHERM
   De drie logo's stonden op een telefoon buiten beeld. Ze krimpen mee en het
   label mag onder het logo vallen, zodat er niets wordt afgesneden.
   ========================================================================== */
@media (max-width: 720px) {
  .afzender__in {
    gap: 8px 16px;
    padding-block: 10px;
  }

  .afzender__blok {
    flex-wrap: wrap;
    gap: 4px 8px;
    min-width: 0;
  }

  .afzender__label {
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .logo,
  #logo-hr,
  #logo-gouda,
  #logo-campus {
    height: 22px;
    max-width: min(60vw, 190px);
  }

  .afzender__rechts {
    margin-left: 0;
    width: 100%;
    gap: 10px;
  }
}