/* letters uit het thema */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jost-400.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jost-500.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/jost-600.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/jost-700.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jost-italic-400.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jost-italic-500.woff2") format("woff2");
}

/* kern: shell-lagen, content-vlak, layout */
/* ============================================================
   Blok-motor — de vier lagen
   container → achtergrond → content-vlak → blok

   Hier staat geen enkele kleur of maat van een merk. Alles verwijst naar
   tokens die het thema levert; de fallbacks zorgen dat de motor ook zonder
   thema nog iets toonbaars oplevert.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }

/* De pagina is een kolom van drie: nav, inhoud, footer. Door de body zelf die
   kolom te laten zijn, kan de inhoud de vrije ruimte opeten en landt de footer
   altijd onderaan — ook op een pagina met weinig blokken. Zonder dit zweeft de
   footer ergens in het midden met een witte staart eronder. */
body {
  font-family: var(--sans, system-ui, sans-serif);
  color: var(--ink, #1b1b1b);

  /* De paginakleur is merk, geen motor. Stond hier #fff, dan kan een donker
     thema er niet bij: de tekstkleur komt wel uit een token maar het vlak
     eronder niet, en dan staat er witte tekst op wit. Wit blijft de terugval,
     dus een thema dat er niets over zegt verandert niet. */
  background: var(--page-bg, #fff);
  line-height: var(--lh, 1.45);

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* mobiel: houdt rekening met een in- en uitschuivende adresbalk */
}

/* Nav en footer houden hun eigen hoogte; alleen de inhoud rekt mee. */
body > * { flex-shrink: 0; }

/* ---------- pagina ---------- */
.page-container {
  width: 100%;
  background: var(--page-bg, #fff);
  flex: 1 0 auto;
  /* Scroll-reveal en hero-zoom mogen visueel bleeden, maar geen horizontale
     paginascroll veroorzaken — vooral op smalle schermen. */
  overflow-x: clip;
}
.page-stack { display: flex; flex-direction: column; }

/* Gedeeld content-vlak — de enige plek waar de maximale breedte staat */
.wrap {
  width: min(100% - (var(--pad, 24px) * 2), var(--maxw, 1280px));
  margin-inline: auto;
}

/* ============================================================
   1. CONTAINER — draagt spacing + surface-tokens
   ============================================================ */
.block-shell {
  --gutter: max(var(--pad, 24px), calc((100% - var(--maxw, 1280px)) / 2));
  --surface-bg: transparent;
  --surface-ink: var(--ink, #1b1b1b);
  --surface-muted: var(--ink-2, #5a5d63);

  position: relative;
  width: 100%;
  isolation: isolate;
  color: var(--surface-ink);
  display: flex;
  flex-direction: column;
}

/* De spacing- en surface-klassen worden uit het thema gegenereerd,
   zodat de schaal en de kleuren op één plek staan. Zie Theme::css(). */

/* Aangrenzende blokken met dezelfde surface: naad weg.
   Twee klassen, dus wint van de gegenereerde spacing-regels. */
.block-shell.is-merged-top    { padding-top: 0; }
.block-shell.is-merged-bottom { padding-bottom: 0; }

/* ============================================================
   2. ACHTERGROND
   ============================================================ */
.block-shell__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--surface-bg);
}

/* bg = contained → achtergrond blijft binnen het content-vlak (paneel) */
.block-shell--bg-contained > .block-shell__bg {
  left: var(--gutter);
  right: var(--gutter);
  border-radius: 14px;
}
.block-shell--bg-contained.is-merged-top > .block-shell__bg {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}
.block-shell--bg-contained.is-merged-bottom > .block-shell__bg {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

/* ============================================================
   3. CONTENT-VLAK
   ============================================================ */
.block-shell__content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.block-shell__content--bleed,
.block-shell__content--half { width: 100%; }

/* ============================================================
   4. BLOK
   ============================================================ */
/* flex:1 laat een blok de hoogte van zijn container vullen. Voor de meeste
   blokken verandert dat niets — die zijn zo hoog als hun inhoud. Maar een blok
   dat zelf een min-height zet (een hero met een schermvullende foto) kan zijn
   achtergrond nu tot de rand van de sectie laten lopen. */
.block { position: relative; z-index: 2; width: 100%; flex: 1; }

/* --- half-left / half-right: één helft raakt de schermrand --- */
.block--half { display: grid; gap: 0; }

.half-media {
  min-height: clamp(180px, 26vw, 320px);
  background:
    linear-gradient(160deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .25)),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .14) 0 12px, rgba(255, 255, 255, .04) 12px 24px);
  display: grid;
  place-items: center;
}
.half-tag {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11.5px;
  color: #fff;
  background: rgba(0, 0, 0, .32);
  padding: 5px 10px;
  border-radius: 999px;
}
.half-copy {
  display: grid;
  place-items: center;
  padding-block: clamp(24px, 4vw, 48px);
  padding-inline: var(--gutter);
}

@media (min-width: 900px) {
  .block--half { grid-template-columns: 1fr 1fr; align-items: stretch; }

  /* De tekst-helft is een grid-item, dus % rekent tegen de halve kolom.
     Maal twee brengt het terug naar de volle breedte, zodat de rand
     exact op dezelfde lijn valt als .wrap bij contained blokken. */
  .half-copy {
    --half-gutter: max(var(--pad, 24px), calc((100% * 2 - var(--maxw, 1280px)) / 2));
  }

  /* beeld links tot de rand, tekst rechts tegen het content-vlak */
  .block-shell--content-half-left .half-media { order: 1; }
  .block-shell--content-half-left .half-copy {
    order: 2;
    padding-left: clamp(28px, 4vw, 64px);
    padding-right: var(--half-gutter);
  }

  /* gespiegeld */
  .block-shell--content-half-right .half-copy {
    order: 1;
    padding-left: var(--half-gutter);
    padding-right: clamp(28px, 4vw, 64px);
  }
  .block-shell--content-half-right .half-media { order: 2; }
}

/* ============================================================
   Stub-weergave — hoort bij de motor, niet bij een merk.
   Vervalt per blok zodra dat blok echte markup krijgt.
   ============================================================ */
.block-shell--stub {
  outline: 1px dashed rgba(0, 0, 0, .12);
  outline-offset: -1px;
}

/* Geen vaste hoogte: de blokhoogte volgt uit de spacing, zodat het
   verticale ritme in de stub klopt met wat het straks wordt. */
.block-shell--stub .block:not(.block--half) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--own-top, 14px) 12px var(--own-bottom, 14px);
}

/* Content-vlak zichtbaar maken */
.block-shell--stub.block-shell--content-contained > .block-shell__content,
.block-shell--stub.block-shell--content-bleed::before {
  border: 1.5px dashed var(--guide, rgba(0, 0, 0, .25));
  border-radius: 10px;
}
.block-shell--stub.block-shell--content-bleed::before {
  content: "";
  position: absolute;
  top: var(--space-sm, 20px);
  bottom: var(--space-sm, 20px);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 1;
  pointer-events: none;
}
.block-shell[data-tone="dark"].block-shell--stub.block-shell--content-contained > .block-shell__content,
.block-shell[data-tone="dark"].block-shell--stub.block-shell--content-bleed::before {
  border-color: rgba(255, 255, 255, .38);
}

.block-stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  max-width: 100%;
}
.block-stub__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px 12px;
}
.block-stub__type {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: clamp(13px, 2.2vw, 16px);
  font-weight: 700;
  color: var(--accent, #0b57d0);
  background: color-mix(in srgb, var(--accent, #0b57d0) 8%, #fff);
  padding: 5px 11px;
  border-radius: 8px;
}
.block-stub__label { font-size: 14px; color: var(--surface-muted); }
.block-stub__id { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; color: var(--surface-muted); }
.block-stub__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

.block-shell[data-tone="dark"] .block-stub__type {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}
/* Vaste kleur, geen token: dit is een waarschuwing in de ontwikkelweergave en
   geen merkonderdeel. Een thema mag zijn eigen rood hier niet overheen zetten. */
.block-stub--warn .block-stub__type { background: #fdecea; color: #c0392b; }

.pill {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  color: var(--ink-2, #5a5d63);
  border: 1px solid var(--line, #d9dce3);
}
.pill--bg { border-color: #b7c9e0; color: #14508f; }
.pill--content { border-color: #c9b295; color: #7a5c3a; }
.pill--space { border-color: #b3ccb8; color: #2f6b45; }
.pill--own { border-color: #c8bde0; color: #5a3f8a; }

.block-shell[data-tone="dark"] .pill {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
}

@media (max-width: 679.98px) {
  .block-stub__row { flex-direction: column; gap: 4px; }
}

/* ============================================================
   Gedeelde bouwstenen

   Het handjevol dingen dat in bijna elk blok terugkomt: een knop, een
   bovenkopje, een inleidende zin, een vinkje in een lijst. Die horen niet in
   één blok thuis — dan zou het volgende blok ze overschrijven — en ook niet in
   één thema, want dan werkt een blok niet meer als je van merk wisselt.

   Elke waarde hieronder komt uit een token. Er staat dus geen kleur en geen
   maat in dit bestand; wissel van thema en de knoppen wisselen mee.
   ============================================================ */

/* ---------- knop ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 52px;
  padding: 0 26px;
  border-radius: var(--r-btn, 8px);
  font-family: var(--sans, system-ui, sans-serif);
  font-size: var(--fs-xl);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform .18s var(--ease, ease), background .18s, color .18s, border-color .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #0b57d0) 28%, transparent);
}

.btn--cta    { background: var(--cta, #c00); color: #fff; }
.btn--cta:hover { background: var(--cta-strong, #a00); }

.btn--accent { background: var(--accent, #0b57d0); color: #fff; }
.btn--accent:hover { background: var(--accent-strong, #084298); }

/* De groene knop. Niet Fieten-Electric: `--ok` is een stand, en een leadformulier
   of een stappenplan op een andere site mag hem ook. */
.btn--ok { background: var(--ok, #2f7d4f); color: #fff; }
.btn--ok:hover { background: color-mix(in srgb, var(--ok, #2f7d4f) 82%, #000); }

/* Voor donkere vlakken: wit blok, tekst in de merkkleur. */
.btn--light  { background: #fff; color: var(--accent, #0b57d0); }
.btn--light:hover { background: color-mix(in srgb, var(--accent, #0b57d0) 8%, #fff); }

/* Erft de tekstkleur van de surface, dus werkt op licht én donker. */
.btn--ghost {
  background: transparent;
  color: var(--surface-ink, currentColor);
  border-color: color-mix(in srgb, currentColor 42%, transparent);
}
.btn--ghost:hover { background: color-mix(in srgb, currentColor 12%, transparent); }

.btn--sm { height: 42px; padding: 0 18px; font-size: var(--fs-md); }

.btn .arr { transition: transform .2s var(--ease, ease); }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- tekstonderdelen ---------- */
.eyebrow {
  margin: 0 0 18px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cta, #c00);
}
/* Op een donkere band valt het accentrood weg; daar wint leesbaarheid. */
.block-shell[data-tone="dark"] .eyebrow { color: var(--surface-muted, rgba(255, 255, 255, .6)); }

/* De inleidende alinea: groter dan lopende tekst, rustiger van kleur.

   Hier stond ook `font-style: italic`, en dat was een ontwerpkeuze van één merk
   die elk volgend merk erbij kreeg. Een tweede site liet dat meteen zien: daar
   stond de introzin cursief zonder dat iemand daarom had gevraagd, en er was
   geen knop om hem recht te zetten — de klasse is niet .b-<blok>, dus een blok
   mag hem niet aanpassen.

   Wat er nu staat is de vorm van een lead. Wíl een merk hem cursief, dan zet
   het thema dat in theme.css. */
.lede {
  font-family: var(--display, serif);
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--surface-muted, #5a5d63);
}

/* Het cursieve accentwoord in een kop. */
.acc {
  font-family: var(--display, serif);
  font-style: italic;
  font-weight: 500;
  color: var(--head-acc, currentColor);
}
.block-shell[data-tone="dark"] .acc { color: currentColor; }

.h-sec {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.015em;
  text-wrap: balance;
}

/* ---------- lijst met vinkjes ---------- */
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.checks li { display: flex; gap: 13px; align-items: flex-start; font-size: var(--fs-xl); }
.checks .ck {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--cta, #c00);
  display: grid;
  place-items: center;
}
.checks .ck svg { width: 13px; height: 13px; color: #fff; }

/* ---------- label ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 27px;
  padding: 0 13px;
  border-radius: var(--r-tag, 999px);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--line, #d9dce3);
  color: var(--ink-2, #5a5d63);
  background: #fff;
}
.tag--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Twee standen naast de neutrale. Ze kleuren alleen de tekst en de rand, niet
   het vlak: een rij labels waarvan er drie een eigen achtergrond hebben, leest
   als drie knoppen. */
.tag--ok {
  color: var(--ok, #f0f);
  border-color: color-mix(in srgb, var(--ok, #f0f) 35%, transparent);
}
.tag--accent {
  color: var(--accent, #0b57d0);
  border-color: color-mix(in srgb, var(--accent, #0b57d0) 35%, transparent);
}

/* ---------- overslaan-link ---------- */
/* Hoort bij system/skip.twig. Buiten beeld tot hij focus krijgt.

   Let op de manier waarop hij verstopt zit: verplaatst, niet display:none en
   niet visibility:hidden. Die twee halen een element uit de tabvolgorde, en dan
   kan het nooit focus krijgen — waarmee de link precies zijn enige functie
   kwijt is. Dit is de klassieke manier waarop een skip-link stukgaat zonder dat
   iemand het merkt. */
.skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 200;

  padding: 12px 20px;
  border-radius: var(--r-btn, 8px);
  background: var(--accent, #0b57d0);
  color: #fff;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  text-decoration: none;

  transform: translateY(calc(-100% - 12px));
  transition: transform .15s var(--ease, ease);
}

.skip:focus { transform: translateY(0); }

/* ---------- voorvertoningsbalk ---------- */
/* Hoort bij system/preview.twig: hij verschijnt alleen als concepten meekomen.

   Geen themakleuren hier, met opzet. Deze balk moet er in élk project hetzelfde
   uitzien en overal even hard opvallen — hij is geen onderdeel van de site maar
   een mededeling erover. Zou hij het thema volgen, dan gaat hij op een site met
   een oranje huisstijl vanzelf op in de pagina, en dan mist hij zijn doel. */
.voorvertoning {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 300;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;

  padding: 10px 16px;
  background: #1c1917;
  color: #fafaf9;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  border-top: 3px solid #f59e0b;
  box-shadow: 0 -6px 24px rgb(0 0 0 / .18);
}

.voorvertoning__punt {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: #f59e0b;
}

.voorvertoning__tekst { flex: 1 1 auto; }
.voorvertoning strong { color: #fbbf24; }

.voorvertoning__uit {
  flex: none;
  padding: 6px 12px;
  border: 1px solid #57534e;
  border-radius: 6px;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.voorvertoning__uit:hover,
.voorvertoning__uit:focus-visible { background: #292524; border-color: #a8a29e; }

/* De balk ligt over de onderkant van de pagina heen. Zonder dit valt de laatste
   regel van een lange pagina eronder, en dan is de voorvertoning van dat stuk
   precies datgene wat je niet kunt zien. */
body:has(.voorvertoning) { padding-bottom: 64px; }

/* ---------- alleen voor schermlezers ---------- */
/* Zichtbaar voor wie voorleest, weg voor wie kijkt. Niet display:none: dat haalt
   het uit de voorleesvolgorde en dan is het er voor niemand meer. */
.visueel-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- formulier ---------- */
/* Hoort bij system/form.twig, dus gedeeld door elk formulierblok. De opmaak
   staat hier en niet in de blokken, want een site waarin twee formulieren er
   anders uitzien is een site waarin iemand er één is vergeten. */
.formulier__velden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px 20px;
}

.formulier__veld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.formulier__veld--breed { grid-column: 1 / -1; }

.formulier__label {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink, #16181d);
}

.formulier__nodig { color: var(--cta, #c00); }

.formulier__invoer {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line, #d9dce3);
  border-radius: var(--r-btn, 8px);
  background: #fff;
  color: var(--ink, #16181d);
  font: inherit;
  font-size: var(--fs-lg);
  transition: border-color .15s var(--ease, ease), box-shadow .15s var(--ease, ease);
}

.formulier__invoer:focus-visible {
  outline: none;
  border-color: var(--accent, #0b57d0);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #0b57d0) 22%, transparent);
}

textarea.formulier__invoer { resize: vertical; min-height: 120px; }

/* De rand alleen is niet genoeg: wie kleuren slecht onderscheidt ziet er niets
   van. Vandaar dat er bij een fout altijd ook tekst onder het veld staat. */
.formulier__invoer[aria-invalid="true"] { border-color: var(--cta, #c00); }

.formulier__fout {
  margin: 0;
  color: var(--cta, #c00);
  font-size: var(--fs-md);
  font-weight: 500;
}

.formulier__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--ink-2, #5a5d63);
  cursor: pointer;
}

.formulier__vink {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent, #0b57d0);
}

.formulier__onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 22px;
}

.formulier__notitie {
  margin: 0;
  flex: 1 1 240px;
  font-size: var(--fs-sm);
  color: var(--ink-2, #5a5d63);
}

.formulier__gelukt {
  padding: 26px 28px;
  border-radius: var(--r-card, 14px);
  background: color-mix(in srgb, var(--accent, #0b57d0) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent, #0b57d0) 25%, transparent);
}

.formulier__geluktKop {
  margin: 0 0 6px;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink, #16181d);
}

.formulier__gelukt p:last-child { margin: 0; color: var(--ink-2, #5a5d63); }

/* Het lokvakje. Buiten beeld en niet display:none — een bot die de CSS leest
   slaat een verborgen veld over, een bot die dat niet doet vult het in. Dat
   laatste is precies wat we willen weten. */
.formulier__lokvak {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ============================================================
   Beweging

   Eén laag voor het handjevol animaties dat elk blok nodig heeft: iets dat
   opkomt als je erlangs scrolt, een foto die invaagt zodra hij geladen is, en
   een getal dat optelt. Blokken schrijven daar geen CSS voor — ze zetten een
   attribuut in de markup en zijn klaar.

       <div data-reveal>…</div>              opkomen van onder
       <div data-reveal="fade">…</div>       alleen invagen
       <div data-reveal="zoom">…</div>       licht uitzoomen — voor beeld
       <div data-reveal="left">…</div>       van links (of "right")
       <div data-reveal-stagger>…</div>      kinderen komen na elkaar op
       <span data-count>109</span>           telt op zodra hij in beeld komt
       <img data-fade …>                     vaagt in zodra hij geladen is

   Alles hangt onder [data-motion="on"], en dat attribuut zet motion.js in de
   <head>. Dat is met opzet: zonder die regel is er niets verborgen. Draait het
   script niet — een fout, een oude browser, een blocker — dan staat de pagina
   er gewoon, in plaats van dat de halve inhoud onzichtbaar blijft.
   ============================================================ */

/* Let op: hier staat `translate` en `scale`, niet `transform`.
   Dat is geen smaak maar noodzaak. Een kaart die opkomt heeft vaak zelf al een
   `transform` voor zijn hover-effect. Zouden we die ook gebruiken, dan wint de
   regel met de meeste gewichten en verliest het blok zijn hover — of andersom.
   `translate` en `scale` zijn eigen eigenschappen die vóór `transform` worden
   toegepast, dus de twee stapelen op elkaar in plaats van elkaar te slopen. */
[data-motion="on"] [data-reveal] {
  opacity: 0;
  transition:
    opacity   var(--motion-dur, .7s) var(--ease, ease) var(--motion-delay, 0s),
    translate var(--motion-dur, .7s) var(--ease, ease) var(--motion-delay, 0s),
    scale     var(--motion-dur, .7s) var(--ease, ease) var(--motion-delay, 0s);

  /* De trap komt uit --reveal-i, die het script op elk kind zet. Zo staat de
     tel-logica op één plek en hoeft een blok geen d1/d2/d3-klassen te bedenken. */
  --motion-delay: calc(var(--reveal-i, 0) * var(--motion-step, .08s));
}

[data-motion="on"] [data-reveal]         { translate: 0 var(--motion-rise, 26px); }
[data-motion="on"] [data-reveal="fade"]  { translate: none; }
[data-motion="on"] [data-reveal="zoom"]  { translate: none; scale: 1.06; }
[data-motion="on"] [data-reveal="left"]  { translate: calc(var(--motion-rise, 26px) * -1) 0; }
[data-motion="on"] [data-reveal="right"] { translate: var(--motion-rise, 26px) 0; }

[data-motion="on"] [data-reveal].is-in {
  opacity: 1;
  translate: none;
  scale: none;
}

/* ---------- beeld ---------- */
[data-motion="on"] img[data-fade] {
  opacity: 0;
  transition: opacity var(--motion-dur, .7s) var(--ease, ease);
}
[data-motion="on"] img[data-fade].is-loaded { opacity: 1; }

/* ---------- optellend getal ---------- */
/* Cijfers even breed, anders danst het getal heen en weer tijdens het tellen. */
[data-count] { font-variant-numeric: tabular-nums; }

/* ---------- wie er niet om vraagt, krijgt het niet ---------- */
/* Horizontale reveals stoten op smalle schermen tegen de rand; verticaal is
   daar genoeg beweging en voorkomt een scrollbalk tijdens de animatie. */
@media (max-width: 767px) {
  [data-motion="on"] [data-reveal="left"],
  [data-motion="on"] [data-reveal="right"] {
    translate: 0 var(--motion-rise, 26px);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-motion="on"] [data-reveal],
  [data-motion="on"] img[data-fade] {
    opacity: 1;
    translate: none;
    scale: none;
    transition: none;
  }
}


/* ============================================================
   Toestemmingsbalk — hoort bij system/consent.twig en consent.js

   Geen eigen kleuren: alles komt uit het thema, net als bij de blokken. Zet een
   site een ander merk op, dan gaat deze balk mee zonder dat hier iets wijzigt.

   Onderin en niet bovenin: bovenin duwt hij de pagina naar beneden of legt hij
   zich over de nav heen, en dat laatste is precies waar een bezoeker heen wil
   als hij de balk niet wil beantwoorden.
   ============================================================ */

.consent {
  position: fixed;
  z-index: 100;
  inset-inline: 0;
  bottom: 0;

  background: var(--page-bg, #fff);
  border-top: 1px solid var(--line, #d9dce3);
  box-shadow: var(--shadow-lg, 0 -12px 40px rgba(8, 28, 64, .12));
}

/* Zonder dit blijft de balk staan wanneer consent.js niet aankomt — en dan zit
   er een dialoog op de pagina die niemand weg kan klikken. */
.consent[hidden] { display: none; }

.consent__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);

  /* Dezelfde marge als het content-vlak van een blok, zodat de tekst in de
     balk uitlijnt met de tekst erboven. */
  width: min(100% - (var(--pad, 24px) * 2), var(--maxw, 1280px));
  margin-inline: auto;
  padding-block: 16px;
}

.consent__kop {
  margin: 0 0 4px;
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1.2;
}

.consent__uitleg {
  margin: 0;
  max-width: 68ch;
  font-size: var(--fs-lg);
  color: var(--ink-2, #5a5d63);
}

.consent__uitleg a { color: inherit; }

.consent__knoppen {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.consent__knoppen .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #0b57d0) 28%, transparent);
}

/* Op smal scherm past tekst naast knoppen niet meer. De knoppen gaan dan onder
   de tekst staan en worden even breed — dat houdt ze gelijkwaardig, wat hier
   niet alleen een ontwerpkeuze is maar ook een juridische. */
@media (max-width: 679.98px) {
  .consent__inner {
    flex-direction: column;
    align-items: stretch;
    padding-block: 18px;
  }

  .consent__knoppen { flex-direction: column; }
  .consent__knoppen .btn { justify-content: center; }
}

/* De balk schuift op. Beweging op iets wat de aandacht vraagt is precies waar
   prefers-reduced-motion over gaat, dus daar valt hij weg. */
@media (prefers-reduced-motion: no-preference) {
  .consent { animation: consent-in .32s var(--ease, cubic-bezier(.2, .7, .3, 1)) both; }

  @keyframes consent-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
}


/* thema: Fieten Olie */
/* Gegenereerd uit het thema — niet met de hand aanpassen. */
:root {
  --ink: #1b1b1b;
  --ink-2: #5a5d63;
  --ink-3: #8a8d93;
  --line: #d9dce3;
  --line-2: #ededf1;
  --cream: #faf9f5;
  --blue: #004289;
  --blue-band: #0d3f7e;
  --blue-deep: #06305f;
  --red: #db2f1c;
  --panel: #f4f2ec;
  --accent: #004289;
  --accent-strong: #003874;
  --cta: #db2f1c;
  --cta-strong: #be2614;
  --head-acc: #db2f1c;
  --ok: #1e8a4c;
  --el: #27a85e;
  --el-2: #1f8a4d;
  --el-deep: #0a4a36;
  --el-soft: #e8f6ee;
  --el-acc: #bdebcd;
  --sans: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --display: "Jost", "Futura", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-card: 12px;
  --r-btn: 8px;
  --r-tag: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 6px 24px rgba(8, 28, 64, .08);
  --shadow-lg: 0 24px 60px rgba(8, 28, 64, .14);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --pad: clamp(16px, 4vw, 48px);
  --maxw: 1320px;
  --space-none: 0px;
  --space-sm: clamp(16px, 2.5vw, 28px);
  --space-md: clamp(28px, 4.5vw, 56px);
  --space-lg: clamp(40px, 7vw, 96px);
  --space-xl: clamp(64px, 11vw, 152px);
  --fs-2xs: 12px;
  --fs-xs: 12.5px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 15px;
  --fs-xl: 16px;
  --fs-2xl: 17px;
  --fs-3xl: 20px;
  --fs-4xl: 22px;
  --fs-5xl: 24px;
  --fs-lede: clamp(17px, 1.5vw, 21px);
  --fs-stat: clamp(34px, 3.4vw, 46px);
  --fs-h4: clamp(24px, 2.5vw, 34px);
  --fs-h3: clamp(32px, 3.8vw, 52px);
  --fs-h2: clamp(34px, 4.4vw, 56px);
  --fs-h1: clamp(40px, 5.6vw, 90px);
  --bp-sm: 576px;
  --bp-md: 680px;
  --bp-lg: 900px;
  --bp-xl: 1100px;
  --bp-xxl: 1240px;
}

.block-shell--top-none { padding-top: var(--space-none); }
.block-shell--bottom-none { padding-bottom: var(--space-none); }
.block--own-top-none { --own-top: var(--space-none); }
.block--own-bottom-none { --own-bottom: var(--space-none); }
.block-shell--top-sm { padding-top: var(--space-sm); }
.block-shell--bottom-sm { padding-bottom: var(--space-sm); }
.block--own-top-sm { --own-top: var(--space-sm); }
.block--own-bottom-sm { --own-bottom: var(--space-sm); }
.block-shell--top-md { padding-top: var(--space-md); }
.block-shell--bottom-md { padding-bottom: var(--space-md); }
.block--own-top-md { --own-top: var(--space-md); }
.block--own-bottom-md { --own-bottom: var(--space-md); }
.block-shell--top-lg { padding-top: var(--space-lg); }
.block-shell--bottom-lg { padding-bottom: var(--space-lg); }
.block--own-top-lg { --own-top: var(--space-lg); }
.block--own-bottom-lg { --own-bottom: var(--space-lg); }
.block-shell--top-xl { padding-top: var(--space-xl); }
.block-shell--bottom-xl { padding-bottom: var(--space-xl); }
.block--own-top-xl { --own-top: var(--space-xl); }
.block--own-bottom-xl { --own-bottom: var(--space-xl); }

.block-shell--surface-none { --surface-bg: transparent; }
.block-shell--surface-white { --surface-bg: #fff; }
.block-shell--surface-cream { --surface-bg: var(--cream); }
.block-shell--surface-blue { --surface-bg: var(--blue); }
.block-shell--surface-band { --surface-bg: var(--blue-band); }
.block-shell--surface-deep { --surface-bg: var(--blue-deep); }
.block-shell--surface-red { --surface-bg: var(--red); }
.block-shell--surface-electric { --surface-bg: linear-gradient(160deg, #06305f 0%, #0a4a36 78%); }
.block-shell--surface-image { --surface-bg: linear-gradient(160deg, rgba(6, 48, 95, .88), rgba(0, 66, 137, .72)), repeating-linear-gradient(-45deg, #0a3a70 0 14px, #0d4a8a 14px 28px); }

.block-shell[data-tone="light"] { --surface-ink: var(--ink); --surface-muted: var(--ink-2); }
.block-shell[data-tone="dark"] { --surface-ink: #ffffff; --surface-muted: rgba(255, 255, 255, .78); }

/* Merk-CSS die niet uit theme.json te genereren valt.
   Tokens, letters, surfaces en de ruimteschaal staan daar; hier alleen het
   restje. Zet hier geen @import neer: het laden van een letter hoort in de
   `fonts`-sectie van theme.json, want daar staat ook al wélke letter we willen. */

:root {
  --guide: rgba(0, 66, 137, .3);
}

/* De introzin is in dit ontwerp cursief en iets zwaarder — dat is Jost in
   italic, en het is een van de dingen die de export een eigen stem geven.

   Het stond eerst in de gedeelde componenten van de kern, maar daar hoort het
   niet: elk volgend merk kreeg de schuine letter er dan gratis bij. De vorm van
   een lead zit in de kern, de smaak zit hier. */
.lede {
  font-style: italic;
  font-weight: 500;
}


/* ---- app-promo ---- */
/* App-promotie — herkomst: .app-sec / .app-grid / .app-media uit styles.css

   Het gekleurde vlak is hier een kaart binnen het content-vlak, niet de surface
   van de shell: er moet witruimte omheen blijven staan. */

.b-app-promo__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 56px 46px;
  background: var(--panel);
  border-radius: 26px;
}

.b-app-promo__title {
  margin: 0 0 18px;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.b-app-promo__lede { margin: 0; }

.b-app-promo__points { margin: 24px 0 30px; gap: 13px; }

.b-app-promo__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* De twee schermen liggen over elkaar en waaieren uit vanaf het midden. */
.b-app-promo__media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 560px;
}

.b-app-promo__screen {
  position: absolute;
  width: min(300px, 72%);
  height: auto;
  filter: drop-shadow(0 30px 50px rgba(8, 28, 64, .22));
}

.b-app-promo__screen:first-child { transform: rotate(4deg) translateX(29%); z-index: 1; }
.b-app-promo__screen:last-child  { transform: rotate(-5deg) translateX(-29%); z-index: 2; }

/* Onder xl wordt twee kolommen te krap voor de tekst plus de winkelknoppen.
   De schermen gaan dan in de normale flow staan, zodat de hoogte uit het beeld
   komt in plaats van uit een gegokte min-height. */
@media (max-width: 1099.98px) {
  .b-app-promo__card {
    grid-template-columns: 1fr;
    padding: 44px 34px 48px;
  }

  .b-app-promo__media {
    min-height: 0;
    align-items: flex-end;
    margin-top: 26px;
  }

  .b-app-promo__screen {
    position: relative;
    width: min(268px, 44%);
  }

  .b-app-promo__screen:first-child { transform: rotate(4deg) translateX(-6%); }
  .b-app-promo__screen:last-child  { transform: rotate(-5deg) translateX(6%); }
}

@media (max-width: 899.98px) {
  .b-app-promo__card { padding: 38px 26px 40px; border-radius: 20px; }
}

/* ---- article-header ---- */
/* Artikelkop — herkomst: .art-hero. Eigen hoogte, dus spacing none. */

.b-article-header__hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: max(380px, min(560px, 62vh));
  color: #fff;
  overflow: hidden;
}

.b-article-header__media {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--accent-strong), var(--accent));
}

.b-article-header__placeholder {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 100%;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
}

.b-article-header__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.b-article-header__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 30, 65, .35) 0%, rgba(3, 24, 52, .78) 100%);
}

.b-article-header__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--space-xl) var(--gutter) var(--space-md);
}

.b-article-header__crumbs {
  margin: 0 0 18px;
  font-size: var(--fs-sm);
}

.b-article-header__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.b-article-header__crumbs li + li::before {
  content: "/";
  margin-right: 10px;
  opacity: .6;
}

.b-article-header__crumbs a {
  color: inherit;
  text-decoration: none;
}

.b-article-header__crumbs a:hover { text-decoration: underline; }

.b-article-header__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  font-size: var(--fs-lg);
  font-weight: 600;
}

.b-article-header__title {
  margin: 0;
  max-width: 22ch;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
}

/* ---- contact-form ---- */
/* Beslisboom + contactformulier — alle selectors staan onder .b-contact-form
   Zo kan dit blok nooit een ander blok raken. Zie bin/lint-css.php.

   De vakjes zelf staan hier niet in: die komen uit system/form.twig en worden
   opgemaakt in de gedeelde componenten. Wat hier staat is de indeling eromheen —
   beslisboom bovenaan, formulier links en direct contact rechts. */

/* ---------- beslisboom ---------- */

.b-contact-form__beslis {
  margin-bottom: 34px;
  padding: 30px 34px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.b-contact-form__beslisTitel {
  margin: 0 0 18px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.b-contact-form__keuzes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.b-contact-form__keuzeLink {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  padding: 11px 18px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  font-size: var(--fs-md);
  font-weight: 600;

  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}

.b-contact-form__keuzeLink--stil {
  background: var(--cream-2, #f7f4ef);
  border-style: dashed;
}

.b-contact-form__keuzeLink:not(.b-contact-form__keuzeLink--stil):hover,
.b-contact-form__keuzeLink:not(.b-contact-form__keuzeLink--stil):focus-visible {
  border-color: var(--accent);
  background: #eef4fb;
  color: var(--accent);
}

.b-contact-form__keuzeIc {
  flex: none;
  display: grid;
  place-items: center;
}

.b-contact-form__keuzeIc svg {
  width: 19px;
  height: 19px;
  color: var(--accent);
}

.b-contact-form__keuzeLabel { line-height: 1.2; }

/* ---------- formulier + zijbalk ---------- */

.b-contact-form__layout {
  display: grid;
  gap: 28px 40px;
  align-items: start;
}

@media (min-width: 900px) {
  .b-contact-form__layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }
}

.b-contact-form__kaart {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 900px) {
  .b-contact-form__kaart { padding: 36px 38px; }
}

.b-contact-form__kaartKop {
  margin: 0 0 6px;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.b-contact-form__kaartIntro {
  margin: 0 0 28px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* Vaste twee kolommen in de kaart — zoals design-export .fields */
.b-contact-form__kaart .formulier__velden {
  grid-template-columns: 1fr 1fr;
}

.b-contact-form__kaart .formulier__onder {
  gap: 20px;
  margin-top: 26px;
}

.b-contact-form__kaart .formulier__notitie {
  flex: none;
  font-size: 13.5px;
  color: var(--ink-3);
}

@media (max-width: 679.98px) {
  .b-contact-form__kaart .formulier__velden { grid-template-columns: 1fr; }
}

/* ---------- zijbalk direct contact ---------- */

.b-contact-form__zij {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 900px) {
  .b-contact-form__zij {
    position: sticky;
    top: 120px;
  }
}

.b-contact-form__info {
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.b-contact-form__infoKop {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 700;
}

.b-contact-form__infoLijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.b-contact-form__infoItem {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.b-contact-form__infoIc {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--cream-2, #f7f4ef);
  color: var(--accent);
}

.b-contact-form__infoIc svg { width: 19px; height: 19px; }

.b-contact-form__infoLbl {
  display: block;
  margin-bottom: 3px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.b-contact-form__infoWaarde {
  display: block;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.b-contact-form__infoWaarde:hover { color: var(--accent); }

.b-contact-form__infoSub {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink-3);
}

.b-contact-form__adres {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}

.b-contact-form__route {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}

.b-contact-form__route svg {
  width: 15px;
  height: 15px;
  transition: transform .2s var(--ease);
}

.b-contact-form__route:hover svg { transform: translate(2px, -2px); }

.b-contact-form__uren {
  list-style: none;
  margin: 0;
  padding: 0;
}

.b-contact-form__uren li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-2, #eceef2);
  font-size: 15px;
}

.b-contact-form__uren li:last-child { border-bottom: none; }

.b-contact-form__uren li span:first-child { color: var(--ink-2); }
.b-contact-form__uren li span:last-child { font-weight: 600; }

.b-contact-form__urenRij--accent {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  border-bottom: none;
}

.b-contact-form__urenAccent { color: #1f8a4d; }

.b-contact-form__cta {
  padding: 26px 28px;
  border-radius: 16px;
  background: var(--accent);
  color: #fff;
}

.b-contact-form__ctaKop {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
}

.b-contact-form__ctaTekst {
  margin: 0 0 18px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .78);
}

.b-contact-form__cta .btn--accent {
  background: #fff;
  color: var(--accent);
}

.b-contact-form__cta .btn--accent:hover { background: var(--cream-2, #f7f4ef); }

@media (max-width: 899.98px) {
  .b-contact-form__zij { position: static; top: auto; }
  .b-contact-form__beslis { padding: 24px 26px; }
  .b-contact-form__keuzes { gap: 8px; }
  .b-contact-form__keuze { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .b-contact-form__keuzeLink {
    width: 100%;
    justify-content: flex-start;
    padding: 10px 14px;
    font-size: var(--fs-sm);
  }
  .b-contact-form__keuzeLabel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 679.98px) {
  .b-contact-form__beslis { padding: 22px; }
  .b-contact-form__keuze { flex: 1 1 calc(50% - 4px); }
  .b-contact-form__keuzeLink { width: 100%; justify-content: flex-start; }
  .b-contact-form__kaart { padding: 26px 22px; }
  .b-contact-form__kaart .formulier__onder .btn { width: 100%; justify-content: center; }
}

@media (max-width: 575.98px) {
  .b-contact-form__keuze { flex: 1 1 100%; }
  .b-contact-form__keuzeLink { padding: 12px 16px; font-size: var(--fs-md); }
  .b-contact-form__keuzeLabel { white-space: normal; }
}

/* ---- cta-red ---- */
/* Afsluitende oproep — herkomst: .cta-red uit styles.css */

.b-cta-red__inner { text-align: center; }

.b-cta-red__title {
  margin: 0 0 30px;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.b-cta-red__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* ---- faq-accordion ---- */
/* Veelgestelde vragen — herkomst: .faq-sec / .faq-item uit de export.
   Geen JavaScript: details/summary doet het openen, en het plusje is CSS. */

.b-faq-accordion__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 40px 60px;
  align-items: start;
}

.b-faq-accordion__head .lede {
  margin-bottom: 22px;
  color: var(--ink-2);
}

.b-faq-accordion__telefoon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--cta);
  text-decoration: none;
}

.b-faq-accordion__telefoon svg {
  width: 20px;
  height: 20px;
}

.b-faq-accordion__item {
  border-bottom: 1px solid var(--line);
}

.b-faq-accordion__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0;
  font-size: var(--fs-2xl);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.b-faq-accordion__q::-webkit-details-marker { display: none; }

.b-faq-accordion__q::after {
  content: "+";
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: transform .2s var(--ease), background .2s, color .2s;
}

.b-faq-accordion__item[open] .b-faq-accordion__q::after {
  content: "–";
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.b-faq-accordion__q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.b-faq-accordion__a {
  padding: 0 40px 22px 0;
  font-size: var(--fs-xl);
  line-height: 1.65;
  color: var(--ink-2);
}

.b-faq-accordion__a p { margin: 0 0 0.8em; }
.b-faq-accordion__a p:last-child { margin: 0; }

.b-faq-accordion__a a { color: var(--accent); }

@media (max-width: 1099.98px) {
  .b-faq-accordion__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ---- form-lead ---- */
/* Aanvraagformulier — herkomst: .el-lead-grid uit pages.css */

.b-form-lead .eyebrow { color: var(--el, var(--ok)); }
.b-form-lead .acc { color: var(--el, var(--ok)); }
.b-form-lead .ck { background: var(--el-2, var(--ok)); }

.b-form-lead__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: start;
}

.b-form-lead__intro { position: sticky; top: 120px; }

.b-form-lead__lede {
  margin: 6px 0 26px;
  max-width: 42ch;
}

.b-form-lead__contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.b-form-lead__contact li {
  display: flex;
  align-items: center;
  gap: 13px;
}

.b-form-lead__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--el-soft, color-mix(in srgb, var(--ok) 12%, #fff));
  color: var(--el, var(--ok));
}

.b-form-lead__ic svg { width: 19px; height: 19px; }

.b-form-lead__contact a {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.b-form-lead__contact a:hover { color: var(--el, var(--ok)); }

.b-form-lead__kaart {
  padding: 34px 36px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

.b-form-lead__kaartKop {
  margin: 0 0 20px;
  font-size: var(--fs-2xl);
  font-weight: 700;
}

@media (max-width: 1099.98px) {
  .b-form-lead__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .b-form-lead__intro { position: static; }
}

@media (max-width: 679.98px) {
  .b-form-lead__kaart { padding: 26px 22px; }
}

/* ---- form-tankbon ---- */
/* Tankbon — zijbalk + formulier in één blok, niet twee naast elkaar. */

.b-form-tankbon__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: start;
}

.b-form-tankbon__kolom {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.b-form-tankbon__bon {
  margin-bottom: 30px;
}

.b-form-tankbon__bon-inner {
  position: relative;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  transform: rotate(-1.4deg);
}

.b-form-tankbon__bon-foto {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.b-form-tankbon__bon-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 320px;
  padding: 20px;
  text-align: center;
  background: var(--cream-2, #f7f4ef);
  border-radius: 12px;
}

.b-form-tankbon__bon-placeholder svg {
  width: 100%;
  max-width: 220px;
  height: auto;
}

.b-form-tankbon__bon-placeholder span {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

.b-form-tankbon__tape {
  position: absolute;
  top: -13px;
  left: 50%;
  width: 120px;
  height: 26px;
  transform: translateX(-50%) rotate(-2deg);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 3px;
}

.b-form-tankbon__asidekop { margin: 0 0 12px; }

.b-form-tankbon__asidetekst {
  font-size: var(--fs-xl);
  line-height: 1.65;
  color: var(--ink-2);
}

.b-form-tankbon__stappen {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.b-form-tankbon__stappen li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.b-form-tankbon__nr {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.b-form-tankbon__stappen h3 {
  margin: 2px 0 4px;
  font-size: var(--fs-xl);
}

.b-form-tankbon__stappen p {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ink-2);
}

.b-form-tankbon__kaart {
  padding: 34px 36px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.b-form-tankbon__title { margin: 0 0 8px; }

.b-form-tankbon__scheiding {
  margin: 24px 0 16px;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.b-form-tankbon__optioneel .formulier__label .formulier__nodig { display: none; }

.b-form-tankbon__bedrag-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.b-form-tankbon__bedrag-wrap::before {
  content: '€';
  font-weight: 600;
  color: var(--ink-2);
}

.b-form-tankbon__bedrag-wrap .formulier__invoer { flex: 1; }

.b-form-tankbon__trust {
  flex: 1 1 100%;
  margin-top: 4px;
}

.b-form-tankbon__trust p {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.b-form-tankbon__trust svg {
  width: 16px;
  height: 16px;
  color: var(--ok);
  flex-shrink: 0;
}

.b-form-tankbon__overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 30, 60, .55);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease);
}

.b-form-tankbon__overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.b-form-tankbon__sheet {
  width: min(480px, 100%);
  padding: 30px 34px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  transform: translateY(14px);
  transition: transform .28s var(--ease);
}

.b-form-tankbon__overlay.is-open .b-form-tankbon__sheet { transform: none; }

.b-form-tankbon__sheet h3 {
  margin: 0 0 8px;
  font-size: var(--fs-4xl);
}

.b-form-tankbon__rev-sub {
  margin: 0 0 18px;
  font-size: var(--fs-lg);
  color: var(--ink-2);
}

.b-form-tankbon__rev {
  margin: 0 0 22px;
  padding: 0;
}

.b-form-tankbon__rev div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-2);
}

.b-form-tankbon__rev dt {
  font-size: var(--fs-md);
  color: var(--ink-3);
}

.b-form-tankbon__rev dd {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  text-align: right;
}

.b-form-tankbon__rev-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.b-form-tankbon__sheet :focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

.b-form-tankbon__foot {
  margin: 18px 0 0;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink-2);
}

.b-form-tankbon__foot a {
  color: var(--accent);
  font-weight: 700;
}

.b-form-tankbon__done {
  animation: form-tankbon-fade-up .4s var(--ease);
}

@keyframes form-tankbon-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.b-form-tankbon__done-ic {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 14%, #fff);
}

.b-form-tankbon__done-ic svg {
  width: 30px;
  height: 30px;
  color: var(--ok);
}

.b-form-tankbon__done-kop {
  margin: 0 0 12px;
  font-size: var(--fs-4xl);
}

.b-form-tankbon__done-text {
  margin: 0 0 26px;
  max-width: 46ch;
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--ink-2);
}

.b-form-tankbon__done-text strong {
  color: var(--ink);
  font-weight: 700;
}

.b-form-tankbon__done-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.b-form-tankbon__pas-sheet {
  position: relative;
  text-align: left;
}

.b-form-tankbon__pas-ic {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  color: var(--accent);
}

.b-form-tankbon__pas-ic svg {
  width: 26px;
  height: 26px;
}

.b-form-tankbon__pas-sheet p {
  margin: 0 0 20px;
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--ink-2);
}

.b-form-tankbon__pas-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 22px;
  color: var(--ink-3);
  background: none;
  border: none;
  border-radius: 9px;
  cursor: pointer;
}

.b-form-tankbon__pas-close:hover {
  background: var(--cream-2, #f7f4ef);
  color: var(--ink);
}

@media (max-width: 899.98px) {
  .b-form-tankbon__grid { grid-template-columns: 1fr; }
  .b-form-tankbon__kaart { padding: 26px 22px; }
  .b-form-tankbon__bon-inner { transform: none; max-width: 420px; }
  .b-form-tankbon__bon-placeholder { min-height: 280px; }
}

/* ---- form-tankpas ---- */
/* Tankpas-aanvraag — herkomst: .apply-grid / .stepper */

.b-form-tankpas [hidden] { display: none !important; }

.b-form-tankpas__grid {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 320px);
  gap: 48px;
  align-items: start;
}

.b-form-tankpas__title { margin: 0 0 28px; }

.b-form-tankpas__stepper {
  display: flex;
  gap: 8px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.b-form-tankpas__s {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-3);
}

.b-form-tankpas__s.is-aan,
.b-form-tankpas__s.is-klaar { color: var(--ink); }

.b-form-tankpas__n {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  font-size: var(--fs-2xs);
}

.b-form-tankpas__s.is-aan .b-form-tankpas__n { border-color: var(--accent); color: var(--accent); }
.b-form-tankpas__s.is-klaar .b-form-tankpas__n {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.b-form-tankpas__kaart {
  padding: 38px 40px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.b-form-tankpas__nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}

.b-form-tankpas__aside {
  position: sticky;
  top: 120px;
  padding: 28px 26px;
  background: var(--panel);
  border-radius: 16px;
}

.b-form-tankpas__asidekop { margin: 0 0 18px; font-size: var(--fs-3xl); }

.b-form-tankpas__rij {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-lg);
}

.b-form-tankpas__note {
  margin: 18px 0 0;
  font-size: var(--fs-md);
  color: var(--ink-2);
}

.b-form-tankpas__stapkop { margin: 0 0 8px; font-size: var(--fs-2xl); }
.b-form-tankpas__staptekst { margin: 0 0 20px; color: var(--ink-2); font-size: var(--fs-md); }

.b-form-tankpas__zoek {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.b-form-tankpas__zoek .btn { grid-column: 1 / -1; justify-self: start; }

.b-form-tankpas__kvk-status { font-size: var(--fs-md); color: var(--ink-2); margin: 0 0 12px; }

.b-form-tankpas__kvk-resultaten {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.b-form-tankpas__kvk-kies {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  cursor: pointer;
  font: inherit;
}

.b-form-tankpas__kvk-kies:hover { border-color: var(--accent); }

.b-form-tankpas__kvk-kies:focus-visible,
.b-form-tankpas__radio-card:focus-visible,
.b-form-tankpas__qty-knop:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

.b-form-tankpas__kvk-gekozen {
  padding: 14px;
  background: var(--panel);
  border-radius: 10px;
  margin-bottom: 16px;
}

.b-form-tankpas__kvk-adres { margin: 4px 0 0; color: var(--ink-2); font-size: var(--fs-md); }

.b-form-tankpas .formulier__veld:has([name="bedrijf_id"]),
.b-form-tankpas .formulier__veld:has([name="passen_json"]) {
  display: none;
}

.b-form-tankpas__pas {
  padding: 16px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.b-form-tankpas__pas h4 { margin: 0 0 10px; }

.b-form-tankpas__producten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 10px;
}

.b-form-tankpas__prod { font-size: var(--fs-sm); }

.b-form-tankpas__review-box {
  padding: 16px;
  background: var(--panel);
  border-radius: 12px;
  margin-bottom: 16px;
}

.b-form-tankpas__review-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-md);
}

.b-form-tankpas__trust {
  margin-top: 20px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.b-form-tankpas__trust p {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 6px 0 0;
}

.b-form-tankpas__trust svg {
  width: 16px;
  height: 16px;
  color: var(--ok);
  flex-shrink: 0;
}

.b-form-tankpas__radio-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 4px;
}

.b-form-tankpas__radio-card {
  position: relative;
  padding: 18px 20px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color .15s, box-shadow .15s;
}

.b-form-tankpas__radio-card:hover { border-color: var(--accent); }

.b-form-tankpas__radio-card.is-sel {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}

.b-form-tankpas__rc-t {
  display: block;
  font-size: var(--fs-xl);
  font-weight: 700;
}

.b-form-tankpas__rc-d {
  display: block;
  margin-top: 5px;
  font-size: var(--fs-md);
  color: var(--ink-2);
}

.b-form-tankpas__rc-check {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
}

.b-form-tankpas__radio-card.is-sel .b-form-tankpas__rc-check {
  background: var(--accent);
  border-color: var(--accent);
}

.b-form-tankpas__rc-check svg {
  width: 11px;
  height: 11px;
  color: #fff;
  opacity: 0;
}

.b-form-tankpas__radio-card.is-sel .b-form-tankpas__rc-check svg { opacity: 1; }

.b-form-tankpas__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  overflow: hidden;
}

.b-form-tankpas__qty-knop {
  width: 46px;
  height: 48px;
  border: none;
  background: #fff;
  color: var(--accent);
  font-size: 20px;
  cursor: pointer;
}

.b-form-tankpas__qty-knop:hover { background: var(--panel); }

.b-form-tankpas__qty .formulier__invoer {
  width: 64px;
  height: 48px;
  padding: 0;
  border: none;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: 0;
  text-align: center;
  font-weight: 700;
}

.b-form-tankpas__qty-hint {
  margin: 8px 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

.b-form-tankpas__done {
  grid-column: 1 / -1;
  max-width: 560px;
  margin: 0 auto;
  padding: 30px 0;
  text-align: center;
  animation: form-tankpas-fade-up .4s var(--ease);
}

@keyframes form-tankpas-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.b-form-tankpas__done-ic {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: var(--ok);
}

.b-form-tankpas__done-ic svg {
  width: 38px;
  height: 38px;
  color: #fff;
}

.b-form-tankpas__done-kop {
  margin: 0 0 14px;
  font-size: var(--fs-4xl);
}

.b-form-tankpas__done-text {
  margin: 0 auto 8px;
  max-width: 48ch;
  color: var(--ink-2);
  font-size: var(--fs-lg);
  line-height: 1.6;
}

.b-form-tankpas__ref {
  display: inline-block;
  margin: 22px 0 28px;
  padding: 10px 20px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  font-size: var(--fs-xl);
}

.b-form-tankpas__ref strong {
  font-weight: 700;
  color: var(--ink);
}

.b-form-tankpas__done-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

@media (max-width: 899.98px) {
  .b-form-tankpas__grid { grid-template-columns: 1fr; }
  .b-form-tankpas__aside { position: static; }
  .b-form-tankpas__kaart { padding: 26px 22px; }
  .b-form-tankpas__stepper { gap: 4px; }
  .b-form-tankpas__s {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
  }
  .b-form-tankpas__n { margin-right: 0; }
  .b-form-tankpas__lbl {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    cursor: help;
  }
  .b-form-tankpas__radio-cards { grid-template-columns: 1fr; }
}

@media (max-width: 679.98px) {
  .b-form-tankpas__zoek { grid-template-columns: 1fr; }
}

/* ---- hero ---- */
/* Hero — herkomst: .hero / .hero-bg / .hero-scrim / .hero-inner uit styles.css

   De foto zit hier en niet in de surface van de shell, omdat de hero er drie
   lagen overheen legt (beeld, langzame zoom, scrim). Een surface is één
   background-waarde; dat is hier te weinig. */

/* De hoogte staat op de sectie, niet op het blok: de foto moet tot de randen
   van de sectie lopen, dus alles binnenin rekt mee. */
.b-hero {
  min-height: max(700px, min(880px, 92vh));
  overflow: hidden;
  color: #fff;
}

/* content staat op 'bleed', dus het blok vult de volle breedte en de foto ook.
   De tekst haalt de marge daarna zelf terug met var(--gutter). */
.b-hero .block--hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
}

.b-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: scale(1.04);
  transform-origin: center 40%;
  animation: hero-ken 22s ease-in-out infinite alternate;
}

.b-hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.b-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

@keyframes hero-ken {
  from { transform: scale(1.04); }
  to   { transform: scale(1.16) translateY(-1.5%); }
}

/* Twee verlopen over elkaar: verticaal voor leesbaarheid boven- en onderaan,
   horizontaal zodat de tekst links altijd op een donkere ondergrond staat. */
.b-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 30, 65, .62) 0%, rgba(4, 30, 65, .12) 26%, rgba(4, 30, 65, .05) 50%, rgba(3, 24, 52, .78) 100%),
    linear-gradient(90deg, rgba(3, 24, 52, .55) 0%, rgba(3, 24, 52, 0) 60%);
}

/* De hero regelt zijn eigen verticale ruimte, want het beeld moet tot de rand
   van de sectie lopen. Zou de shell de padding geven, dan stopt de foto bij de
   binnenrand en zie je een witte strook. Vandaar spacing 'none' in block.json
   en 'own' als documentatie daarvan.

   Horizontaal is --gutter de enige goede maat: dat is precies de afstand van de
   sectierand tot het content-vlak, dezelfde die .wrap voor alle contained blokken
   gebruikt. Zelf uitrekenen met max-width plus padding gaat mis zodra het venster
   breder is dan --maxw: dan komt de padding bóvenop de centrering en staat de
   tekst een --pad verder naar binnen dan de rest van de pagina. */
.b-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: var(--space-lg) var(--space-md);
  padding-inline: var(--gutter);
}

.b-hero__kicker {
  margin: 0 0 18px;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}

.b-hero__title {
  margin: 0 0 22px;
  max-width: 24ch;
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.015em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}

.b-hero__lede {
  margin: 0 0 30px;
  max-width: 54ch;
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

.b-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

@media (min-width: 680px) {
  .b-hero__scrim {
    background:
      linear-gradient(180deg, rgba(4, 30, 65, .68) 0%, rgba(4, 30, 65, .18) 28%, rgba(4, 30, 65, .08) 50%, rgba(3, 24, 52, .82) 100%),
      linear-gradient(90deg, rgba(3, 24, 52, .72) 0%, rgba(3, 24, 52, .38) 48%, rgba(3, 24, 52, 0) 72%);
  }

  .b-hero__kicker { text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }

  .b-hero__title {
    text-shadow:
      0 2px 28px rgba(0, 0, 0, .45),
      0 1px 3px rgba(0, 0, 0, .35);
  }

  .b-hero__lede {
    text-shadow:
      0 1px 16px rgba(0, 0, 0, .5),
      0 1px 2px rgba(0, 0, 0, .3);
  }
}

@media (max-width: 679.98px) {
  .b-hero { min-height: 720px; }
}

/* De zoom is sfeer, geen informatie — dus uit als iemand daarom vraagt. */
@media (prefers-reduced-motion: reduce) {
  .b-hero__media { animation: none; transform: none; }
}

/* ---- hero-electric ---- */
/* Electric hero — herkomst: .el-hero uit pages.css.
   Het verloop komt van de surface `electric`; wat hier staat is de gloed
   eroverheen en de typografie die bij die donkere band hoort. */

.b-hero-electric {
  position: relative;
  overflow: hidden;
  color: #fff;
}

/* Gloed op de shell, niet in .block. Die is position:relative, dus
   inset:0 bleef in de inhoud hangen en de spacing erboven toonde
   alleen het vlakke verloop — een lauwe rand onder de nav. */
.b-hero-electric::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 82% 14%, color-mix(in srgb, var(--el, var(--ok)) 42%, transparent), transparent 60%),
    radial-gradient(50% 50% at 12% 90%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 62%);
}

/* content is bleed zodat de gloed tot de randen loopt. De tekst haalt
   dezelfde --gutter terug als .wrap, anders staat hij naast de rest. */
.b-hero-electric__inner {
  position: relative;
  width: 100%;
  padding-inline: var(--gutter);
}

.b-hero-electric__kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--el-acc, #bdebcd);
}

.b-hero-electric__bolt {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  color: var(--el, var(--ok));
  background: color-mix(in srgb, var(--el, var(--ok)) 22%, transparent);
}

.b-hero-electric__bolt svg { width: 15px; height: 15px; }

.b-hero-electric__title {
  margin: 0;
  max-width: 16ch;
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.025em;
}

/* .acc is elders cursief + op donkere surfaces wit. De class zit
   óp de shell, dus zonder .block-shell.b-hero-electric wint die
   witte regel. Zelfde groene woord als .el-acc in de export. */
.b-hero-electric .acc {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: var(--el, var(--ok));
}

.b-hero-electric__lede {
  margin: 24px 0 0;
  max-width: 56ch;
  color: rgba(255, 255, 255, .82);
}

.b-hero-electric__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.b-hero-electric__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  margin-top: 56px;
  padding-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.b-hero-electric__stat {
  display: block;
  font-size: var(--fs-stat);
  font-weight: 800;
  letter-spacing: -.02em;
}

.b-hero-electric__statlbl {
  display: block;
  margin-top: 4px;
  max-width: 20ch;
  font-size: var(--fs-md);
  color: rgba(255, 255, 255, .7);
}

@media (max-width: 899.98px) {
  .b-hero-electric__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 24px;
  }

  .b-hero-electric__statlbl { max-width: none; }
}

@media (max-width: 679.98px) {
  .b-hero-electric__stats { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- intro-text ---- */
/* Introtekst + doelgroepen — herkomst: .el-intro-grid uit pages.css */

.b-intro-text .eyebrow { color: var(--el, var(--ok)); }
.b-intro-text .acc { color: var(--el, var(--ok)); }

.b-intro-text__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px 60px;
  align-items: start;
}

.b-intro-text__body {
  margin: 0 0 22px;
  font-size: var(--fs-2xl);
  line-height: 1.7;
  color: var(--ink-2);
}

.b-intro-text__body p { margin: 0 0 1em; }
.b-intro-text__body p:last-child { margin: 0; }

.b-intro-text__aud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.b-intro-text__chip {
  padding: 8px 16px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--el-2, var(--ok));
  background: var(--el-soft, color-mix(in srgb, var(--ok) 12%, #fff));
  border: 1px solid color-mix(in srgb, var(--el-2, var(--ok)) 20%, transparent);
  border-radius: var(--r-tag);
}

@media (max-width: 1099.98px) {
  .b-intro-text__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ---- news-featured ---- */
/* Uitgelicht artikel — herkomst: .news-feature op de nieuwspagina.
   Licht vlak, anders dan news-grid op de donkere homepageband. */

.b-news-featured__card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: box-shadow .22s var(--ease), transform .22s var(--ease);
}

.b-news-featured__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.b-news-featured__media {
  position: relative;
  min-height: 320px;
  background: var(--panel);
  display: grid;
  place-items: center;
}

.b-news-featured__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.b-news-featured__placeholder {
  padding: 20px;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  color: var(--ink-3);
}

.b-news-featured__flag {
  position: absolute;
  z-index: 2;
  left: 18px;
  top: 18px;
  padding: 6px 13px;
  border-radius: var(--r-tag);
  background: var(--cta);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
}

.b-news-featured__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 40px;
}

.b-news-featured__meta {
  margin: 0 0 10px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-3);
}

.b-news-featured__title {
  margin: 0 0 14px;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
}

.b-news-featured__excerpt {
  margin: 0 0 22px;
  font-size: var(--fs-xl);
  line-height: 1.6;
  color: var(--ink-2);
}

.b-news-featured__more {
  font-weight: 700;
  color: var(--accent);
}

@media (max-width: 899.98px) {
  .b-news-featured__card { grid-template-columns: 1fr; }
  .b-news-featured__media { min-height: 220px; }
  .b-news-featured__body { padding: 26px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .b-news-featured__card:hover { transform: none; }
}

/* ---- news-grid ---- */
/* Nieuws — herkomst: .news-head / .news-feat / .nsl-track / .news-card

   Het blok staat op een donkere band, dus de vlakken zijn doorschijnend wit in
   plaats van een vaste kleur. Zo blijft het werken op elke donkere surface. */

.b-news-grid__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 46px;
}

.b-news-grid__title {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.b-news-grid__intro {
  margin: 0;
  max-width: 34ch;
  font-size: var(--fs-lg);
  color: var(--surface-muted);
}

/* ---------- uitgelicht ---------- */
.b-news-grid__feature {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  overflow: hidden;
  margin-bottom: 40px;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 20px;
  transition: background .25s var(--ease);
}

.b-news-grid__feature:hover { background: rgba(255, 255, 255, .11); }

.b-news-grid__feature-media {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  display: grid;
  place-items: center;
}

.b-news-grid__placeholder {
  padding: 0 20px;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  color: var(--surface-muted);
}

.b-news-grid__feature-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.b-news-grid__flag {
  position: absolute;
  z-index: 2;
  left: 18px;
  top: 18px;
  padding: 6px 13px;
  border-radius: var(--r-tag);
  background: var(--cta);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.b-news-grid__feature-body {
  align-self: center;
  padding: 44px 46px;
}

.b-news-grid__feature-title {
  margin: 0 0 14px;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.1;
}

/* ---------- kaartenrij ---------- */
.b-news-grid__label {
  margin: 0 0 18px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--surface-muted);
}

.b-news-grid__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.b-news-grid__card {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 26px 24px;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-card);
  transition: background .25s, transform .25s;
}

.b-news-grid__card:hover {
  background: rgba(255, 255, 255, .11);
  transform: translateY(-4px);
}

.b-news-grid__card-title {
  margin: 14px 0 0;
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1.2;
}

.b-news-grid__meta {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--surface-muted);
}

/* Drie regels, daarna afkappen — anders trekken langere berichten de rij scheef */
.b-news-grid__excerpt {
  margin: 12px 0 0;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--surface-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.b-news-grid__feature-body .b-news-grid__excerpt {
  -webkit-line-clamp: 4;
  font-size: var(--fs-xl);
  line-height: 1.6;
  max-width: 46ch;
}

.b-news-grid__more {
  margin-top: auto;
  padding-top: 18px;
  font-size: var(--fs-md);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.b-news-grid__more .arr { transition: transform .2s var(--ease); }
.b-news-grid__feature:hover .b-news-grid__more .arr,
.b-news-grid__card:hover .b-news-grid__more .arr { transform: translateX(4px); }

.b-news-grid__all {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

@media (max-width: 1099.98px) {
  .b-news-grid__feature { grid-template-columns: 1fr; }
  .b-news-grid__feature-media { min-height: 240px; }
  .b-news-grid__feature-body { padding: 34px 30px 38px; }
  .b-news-grid__row { grid-template-columns: 1fr; }
  .b-news-grid__head { margin-bottom: 34px; }
}

/* ---- news-page-grid ---- */
/* Nieuwsoverzicht — herkomst: .news-page-grid */

.b-news-page-grid__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.b-news-page-grid__card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 28px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}

.b-news-page-grid__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.b-news-page-grid__card[hidden] { display: none; }

.b-news-page-grid__meta {
  margin: 0 0 10px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-3);
}

.b-news-page-grid__title {
  margin: 0 0 10px;
  font-size: var(--fs-4xl);
  font-weight: 700;
  letter-spacing: -.015em;
}

.b-news-page-grid__excerpt {
  margin: 0 0 18px;
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--ink-2);
}

.b-news-page-grid__more {
  margin-top: auto;
  font-weight: 700;
  color: var(--accent);
}

.b-news-page-grid__empty {
  margin: 24px 0 0;
  color: var(--ink-3);
}

@media (max-width: 1099.98px) {
  .b-news-page-grid__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 679.98px) {
  .b-news-page-grid__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .b-news-page-grid__card:hover { transform: none; }
}

/* ---- news-toolbar ---- */
/* Nieuwstoolbar — herkomst: .news-toolbar / .news-chip */

.b-news-toolbar__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.b-news-toolbar__title {
  margin: 0;
  font-size: var(--fs-4xl);
  font-weight: 700;
}

.b-news-toolbar__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.b-news-toolbar__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 44px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
}

.b-news-toolbar__search svg {
  width: 18px;
  height: 18px;
  color: var(--ink-3);
}

.b-news-toolbar__search input {
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-lg);
  min-width: 16ch;
}

.b-news-toolbar__search input:focus { outline: none; }
.b-news-toolbar__search:focus-within { border-color: var(--accent); }

.b-news-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.b-news-toolbar__chip {
  padding: 8px 16px;
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-tag);
  cursor: pointer;
}

.b-news-toolbar__chip:hover { border-color: var(--accent); color: var(--accent); }

.b-news-toolbar__chip.is-aan,
.b-news-toolbar__chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ---- newsletter ---- */
/* Nieuwsbriefband — herkomst: .news-sub */

.b-newsletter__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}

.b-newsletter__title {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
}

.b-newsletter__lede {
  margin: 12px 0 0;
  max-width: 46ch;
  font-size: var(--fs-xl);
}

.b-newsletter__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---- page-header ---- */
/* Paginakop — herkomst: .page-head uit de design-export.

   De export rekent 148px boven omdat de nav daar over de pagina zweeft. Bij ons
   zit de nav in de stroom; de ruimte staat als spacing op de schil (lg/md). */

/* Let op: .b-page-header is de shell zelf en die is zo breed als het scherm.
   Een max-width hoort daarom op de binnenlaag, anders krimpt het crème vlak
   mee met de tekst. */
.b-page-header__inner {
  max-width: 62ch;
}

.b-page-header__crumbs {
  margin: 0 0 18px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.b-page-header__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Het scheidingsteken hoort bij de weergave en niet bij de tekst: als het in de
   HTML staat, leest een schermlezer "Home slash Contact" voor. */
.b-page-header__crumbs li + li::before {
  content: "/";
  margin-right: 10px;
  color: var(--ink-3);
}

.b-page-header__crumbs a {
  color: inherit;
  text-decoration: none;
}

.b-page-header__crumbs a:hover,
.b-page-header__crumbs a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.b-page-header__eyebrow {
  margin: 0 0 12px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--head-acc);
}

.b-page-header__title {
  margin: 0;

  /* Een stap kleiner dan de hero-kop. Een paginakop die net zo groot schreeuwt
     als de homepage laat elke subpagina aanvoelen als een landingspagina. */
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.b-page-header__lede {
  margin: 20px 0 0;
  max-width: 54ch;
}

/* Sectiesprongen — herkomst: .ts-jump in Tankstations.html */
.b-page-header__jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.b-page-header__jumps a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-tag);
  transition: border-color .18s, box-shadow .18s;
}

.b-page-header__jumps a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cta);
}

.b-page-header__jumps a:hover,
.b-page-header__jumps a:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 899.98px) {
  .b-page-header__inner { max-width: none; }
}

@media (max-width: 575.98px) {
  .b-page-header__jumps { gap: 8px; }
  .b-page-header__jumps a { padding: 9px 14px; font-size: 13.5px; }
}

/* ---- price-table ---- */
/* Prijzentabel — herkomst: .prices-sec / .ptable / .fuel-avg */

.b-price-table[id="prijzen"] {
  scroll-margin-top: 96px;
}

.b-price-table__date {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 26px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.b-price-table__quick { display: flex; gap: 8px; }
.b-price-table__status { margin: 0 0 0 auto; text-align: right; }

.b-price-table__dag {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
}

.b-price-table__dag::first-letter { text-transform: uppercase; }

.b-price-table__note {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.b-price-table__chip {
  padding: 8px 14px;
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-tag);
  cursor: pointer;
}

.b-price-table__chip.is-aan,
.b-price-table__chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.b-price-table__avgs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 30px;
}

.b-price-table__avg {
  padding: 18px 20px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
}

.b-price-table__avg.is-aan { border-color: var(--accent); }

.b-price-table__avgk {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.b-price-table__avgv {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-5xl);
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.b-price-table__wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.b-price-table__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line-2);
}

.b-price-table__title {
  margin: 0;
  font-size: var(--fs-4xl);
  font-weight: 700;
}

.b-price-table__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.b-price-table__tools input,
.b-price-table__tools select {
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  font: inherit;
  font-size: var(--fs-md);
  background: #fff;
}

.b-price-table__flags { display: flex; gap: 6px; }

.b-price-table__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.b-price-table__tabel {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.b-price-table__tabel th,
.b-price-table__tabel td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}

.b-price-table__tabel th {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-3);
  cursor: pointer;
}

.b-price-table__tabel th.is-aan { color: var(--accent); }

.b-price-table__tabel td.is-laag {
  color: var(--accent);
  font-weight: 700;
}

.b-price-table__tabel td.is-sort { background: rgba(0, 66, 137, .035); }

.b-price-table__tabel tbody tr:hover { background: var(--panel); }

.b-price-table__tabel th:first-child,
.b-price-table__tabel td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  box-shadow: 2px 0 6px rgba(0, 0, 0, .04);
}

.b-price-table__tabel th:first-child { z-index: 2; }

.b-price-table__tabel tbody tr:hover td:first-child { background: var(--panel); }

.b-price-table__link {
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}

.b-price-table__foot {
  margin: 22px 0 0;
  font-size: var(--fs-lg);
  color: var(--ink-2);
}

@media (max-width: 1099.98px) {
  .b-price-table__avgs { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 679.98px) {
  .b-price-table__avgs { grid-template-columns: 1fr 1fr; }
  .b-price-table__status { margin-left: 0; width: 100%; }
  .b-price-table__tools input { width: 100%; }
  .b-price-table__scroll {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 44px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 44px), transparent 100%);
  }
  .b-price-table__wrap::after {
    content: 'Scroll voor meer kolommen →';
    display: block;
    padding: 12px 22px 16px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-2);
    text-align: right;
    border-top: 1px solid var(--line-2);
    background: linear-gradient(to right, transparent 0%, var(--panel) 40%);
    pointer-events: none;
  }
}

/* ---- rich-text ---- */
/* ============================================================
   Lopende tekst

   De opmaak van kale HTML: koppen, alinea's, lijsten, tabellen, citaten, code.
   Dit is de enige plek in het systeem waar naar elementen wordt gekeken in
   plaats van naar klassen, en dat mag hier omdat de HTML uit een tekstveld
   komt — daar zitten geen klassen op.

   Kleuren komen uit de surface, niet uit een token, zodat dezelfde tekst zowel
   op wit als op een donkere band leesbaar blijft.
   ============================================================ */

.b-rich-text {
  color: var(--surface-ink);
  font-size: var(--fs-lg);
  line-height: 1.65;
}

/* Lopende tekst leest slecht over de volle breedte van een groot scherm. */
.b-rich-text--narrow {
  max-width: 72ch;
}

.b-rich-text > :first-child { margin-top: 0; }
.b-rich-text > :last-child  { margin-bottom: 0; }

/* ---------- koppen ---------- */
.b-rich-text h1,
.b-rich-text h2,
.b-rich-text h3,
.b-rich-text h4,
.b-rich-text h5,
.b-rich-text h6 {
  margin: 1.6em 0 .5em;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.b-rich-text h1 { font-size: var(--fs-h2); }
.b-rich-text h2 { font-size: var(--fs-h3); }
.b-rich-text h3 { font-size: var(--fs-h4); }
.b-rich-text h4 { font-size: var(--fs-5xl); }
.b-rich-text h5 { font-size: var(--fs-3xl); }
.b-rich-text h6 {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--surface-muted);
}

/* ---------- tekst ---------- */
.b-rich-text p { margin: 0 0 1.1em; }

.b-rich-text a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s var(--ease);
}
.b-rich-text a:hover { color: var(--cta); }

.b-rich-text strong { font-weight: 700; }
.b-rich-text em     { font-style: italic; }
.b-rich-text small  { font-size: var(--fs-sm); color: var(--surface-muted); }
.b-rich-text del    { color: var(--surface-muted); }

.b-rich-text mark {
  padding: 0 .2em;
  background: var(--panel);
  color: var(--ink);
  border-radius: 2px;
}

.b-rich-text abbr {
  text-decoration: underline dotted;
  cursor: help;
}

.b-rich-text sub,
.b-rich-text sup {
  font-size: .72em;
  line-height: 0;
}

.b-rich-text kbd {
  padding: .15em .45em;
  font-family: var(--mono);
  font-size: .85em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
}

/* ---------- lijsten ---------- */
.b-rich-text ul,
.b-rich-text ol {
  margin: 0 0 1.1em;
  padding-left: 1.4em;
}
.b-rich-text li { margin: .35em 0; }
.b-rich-text li::marker { color: var(--cta); }

/* Geneste lijsten hebben geen eigen witruimte nodig — die zit al in de li. */
.b-rich-text li > ul,
.b-rich-text li > ol { margin: .35em 0 0; }

.b-rich-text dl { margin: 0 0 1.1em; }
.b-rich-text dt { font-weight: 600; }
.b-rich-text dd {
  margin: 0 0 .7em;
  padding-left: 1.4em;
  color: var(--surface-muted);
}

/* ---------- citaat ---------- */
.b-rich-text blockquote {
  margin: 1.6em 0;
  padding: .2em 0 .2em 1.2em;
  border-left: 3px solid var(--cta);
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-lede);
  color: var(--surface-muted);
}
.b-rich-text blockquote p:last-child { margin-bottom: 0; }

.b-rich-text figcaption {
  margin-top: .6em;
  font-size: var(--fs-sm);
  color: var(--surface-muted);
}

/* ---------- code ---------- */
.b-rich-text code {
  padding: .15em .4em;
  font-family: var(--mono);
  font-size: .88em;
  background: var(--panel);
  color: var(--ink);
  border-radius: 4px;
}

.b-rich-text pre {
  margin: 1.4em 0;
  padding: 18px 20px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: var(--fs-md);
  line-height: 1.55;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

/* In een blok code is elke regel al code — een tweede achtergrond eromheen
   maakt het alleen maar drukker. */
.b-rich-text pre code {
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: inherit;
}

/* ---------- media ---------- */
.b-rich-text img,
.b-rich-text video {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-card);
}

.b-rich-text figure { margin: 1.6em 0; }

.b-rich-text hr {
  margin: 2.2em 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* ---------- tabel ---------- */
/* De omhulling scrolt, niet de tabel zelf: anders duwt een brede tabel de hele
   pagina uit haar voegen op een telefoon. */
.b-rich-text table {
  width: 100%;
  margin: 1.4em 0;
  border-collapse: collapse;
  font-size: var(--fs-md);
}

.b-rich-text caption {
  margin-bottom: .6em;
  font-size: var(--fs-sm);
  color: var(--surface-muted);
  text-align: left;
}

.b-rich-text th,
.b-rich-text td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.b-rich-text th {
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--surface-muted);
  border-bottom-color: var(--surface-ink);
}

.b-rich-text tbody tr:last-child td { border-bottom: 0; }

/* ---- section-header ---- */
/* Sectiekop — herkomst: .sec-head. Alleen de leesbreedte; de ruimte komt van de shell. */

.b-section-header__inner { max-width: 62ch; }

/* ---- services-grid ---- */
/* Diensten — herkomst: .sec-head + .diensten-grid + .dienst-card uit styles.css */

.b-services-grid__head {
  max-width: 1487px;
  margin-bottom: 54px;
}

.b-services-grid__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.b-services-grid__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition:
    transform .22s var(--ease),
    box-shadow .22s var(--ease),
    border-color .22s;
}

.b-services-grid__card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.b-services-grid__media {
  position: relative;
  height: 230px;
  overflow: hidden;
  background: var(--line);
}

.b-services-grid__placeholder {
  padding: 0 20px;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  color: var(--ink-3);
}

.b-services-grid__media picture,
.b-services-grid__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.b-services-grid__media img {
  object-fit: cover;
}

.b-services-grid__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px 26px 28px;
}

.b-services-grid__title {
  margin: 0 0 10px;
  font-size: var(--fs-5xl);
  font-weight: 700;
  letter-spacing: -.015em;
}

.b-services-grid__text {
  margin: 0;
  font-size: var(--fs-xl);
  line-height: 1.55;
  color: var(--surface-muted);
}

/* Duwt de link naar de onderkant, zodat de kaarten uitlijnen ook als de
   ene tekst een regel langer is dan de andere. */
.b-services-grid__more {
  margin-top: auto;
  padding-top: 22px;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--cta);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.b-services-grid__more .arr { transition: transform .2s var(--ease); }
.b-services-grid__card:hover .b-services-grid__more .arr { transform: translateX(4px); }

@media (max-width: 1099.98px) {
  .b-services-grid__grid { grid-template-columns: repeat(2, 1fr); }
  .b-services-grid__head { margin-bottom: 42px; }
}

@media (max-width: 679.98px) {
  .b-services-grid__grid { grid-template-columns: 1fr; }
}

/* ---- showcase ---- */
/* Uitgelicht met beeld — herkomst: .el-show-grid uit pages.css */

.b-showcase .eyebrow { color: var(--el, var(--ok)); }
.b-showcase .acc { color: var(--el, var(--ok)); }

.b-showcase__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}

.b-showcase__media {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  background: var(--panel);
  border-radius: 18px;
}

.b-showcase__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.b-showcase__placeholder {
  padding: 24px;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  color: var(--ink-3);
}

.b-showcase__badge {
  position: absolute;
  z-index: 2;
  left: -14px;
  bottom: -18px;
  margin: 0;
  padding: 16px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}

.b-showcase__kw {
  display: block;
  font-size: var(--fs-5xl);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--el, var(--ok));
}

.b-showcase__sub {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.b-showcase__lede {
  margin: 0;
  max-width: 50ch;
}

.b-showcase__feats {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.b-showcase__feat {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.b-showcase__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: var(--el-soft, color-mix(in srgb, var(--ok) 12%, #fff));
  color: var(--el, var(--ok));
}

.b-showcase__ic svg { width: 23px; height: 23px; }

.b-showcase__feattitle {
  margin: 2px 0 3px;
  font-size: var(--fs-xl);
  font-weight: 700;
}

.b-showcase__feattext {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ink-2);
}

@media (max-width: 1099.98px) {
  .b-showcase__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .b-showcase__media { min-height: 340px; }

  .b-showcase__badge { left: 16px; bottom: 16px; }
}

/* ---- site-footer ---- */
/* Sitefooter — herkomst: .footer / .footer-top / .footer-col uit styles.css

   De kleur komt uit de surface `deep`, niet uit dit bestand. Daarom blijft de
   footer kloppen in een ander thema: alle tekstkleuren hangen aan
   --surface-ink, met wit als accent voor wat eruit mag springen. */

.b-site-footer { color: var(--surface-ink); }

.b-site-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
  gap: 32px;
}

/* ---------- linkerkolom ---------- */
.b-site-footer__brand {
  display: inline-block;
  margin-bottom: 20px;
}

.b-site-footer__brand img {
  display: block;
  width: auto;
  height: 28px;
}

.b-site-footer__text {
  margin: 0 0 22px;
  max-width: 30ch;
  font-size: var(--fs-lg);
  line-height: 1.6;
  opacity: .82;
}

.b-site-footer__apps {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.b-site-footer__app {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  transition: background .2s var(--ease);
}

.b-site-footer__app:hover { background: rgba(255, 255, 255, .1); }

.b-site-footer__app svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* ---------- linkkolommen ---------- */
.b-site-footer__col-title {
  margin: 0 0 18px;
  font-size: var(--fs-lg);
  font-weight: 700;
}

.b-site-footer__col-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.b-site-footer__col-list a {
  display: block;
  padding: 7px 0;
  font-size: var(--fs-lg);
  color: inherit;
  text-decoration: none;
  opacity: .68;
  transition: opacity .18s;

  /* De e-mailadressen in de klantenservice-kolom zijn breder dan de kolom. */
  overflow-wrap: anywhere;
}

.b-site-footer__col-list a:hover { opacity: 1; }

/* ---------- onderbalk ---------- */
.b-site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 20px;
  margin-top: 54px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  font-size: var(--fs-sm);
}

.b-site-footer__legal {
  margin: 0;
  opacity: .58;
}

.b-site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.b-site-footer__legal-links a {
  color: inherit;
  text-decoration: none;
  opacity: .58;
  transition: opacity .18s;
}

.b-site-footer__legal-links a:hover { opacity: 1; }

/* ============================================================
   Vijf kolommen halen het niet op een smaller scherm.
   ============================================================ */
@media (max-width: 1099.98px) {
  .b-site-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
  }

  /* De tekstkolom mag de volle breedte, anders breekt de zin op elk woord. */
  .b-site-footer__about { grid-column: 1 / -1; }
}

@media (max-width: 679.98px) {
  .b-site-footer__top {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .b-site-footer__bottom {
    margin-top: 38px;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .b-site-footer__app,
  .b-site-footer__col-list a,
  .b-site-footer__legal-links a { transition: none; }
}

/* ---- site-nav ---- */
/* Sitenavigatie — herkomst: .nav / .nav-inner / .nav-links uit styles.css

   Twee standen. Zonder vlag schuift de balk mee boven de inhoud: wit, in de
   flow, dus er kan niets onder verdwijnen. Met `overlay` ligt hij vast bovenin
   en over een hero heen, doorzichtig tot je gaat scrollen. De pagina kiest,
   want alleen de pagina weet of zijn eerste blok een foto is. */

.b-site-nav {
  --nav-h: 78px;

  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

/* Vast bovenin en uit de flow, zodat de hero eronderdoor loopt. Doorzichtig,
   met een donkere waas eronder zodat witte tekst leesbaar blijft op een
   willekeurige foto. */
.b-site-nav--overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(3, 24, 52, .42), rgba(3, 24, 52, 0));
  border-bottom-color: transparent;
}

/* JS zet dit zodra je van de bovenkant af bent. Zonder JS blijft de balk
   doorzichtig — leesbaar, want de hero is donker, alleen minder mooi. */
.b-site-nav--overlay.is-solid {
  background: #fff;
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.b-site-nav__bar {
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--nav-h, 78px);
  padding-inline: var(--gutter);
}

/* ---------- merk ---------- */
.b-site-nav__brand {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
}

/* Beide logo's blijven in de DOM en kruisvervagen. Wisselen met display laat
   het merk bij elke standwissel opnieuw inladen en dus knipperen. */
.b-site-nav__logo {
  display: block;
  width: auto;
  height: 26px;
  transition: opacity .22s var(--ease);
}

.b-site-nav__logo--light {
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  opacity: 0;
}

.b-site-nav--overlay .b-site-nav__logo--dark { opacity: 0; }
.b-site-nav--overlay .b-site-nav__logo--light { opacity: 1; }
.b-site-nav--overlay.is-solid .b-site-nav__logo--dark { opacity: 1; }
.b-site-nav--overlay.is-solid .b-site-nav__logo--light { opacity: 0; }

/* ---------- menu ---------- */
/* Het menu vult de balk tussen merk en hamburger, zodat de acties erbinnen naar
   rechts geduwd kunnen worden in plaats van een eigen groep ernaast te zijn. */
.b-site-nav__menu {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
}

.b-site-nav__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  padding-left: 20px;
}

.b-site-nav__list {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.b-site-nav__item { position: static; }

.b-site-nav__top {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 2px;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* Onderstreping die vanaf links uitrolt.

   Rood, niet blauw. In de export is dit `background: var(--red)`, en dat is geen
   detail: het is de enige plek in de balk waar de merkkleur zit. Blauw valt hier
   weg tegen de rest van de navigatie, en dan is er geen zichtbaar verschil meer
   tussen "ik zweef hier overheen" en "hier staat een menu open".

   Wij schrijven --cta in plaats van --red: dat is dezelfde kleur, maar dan als
   rol. Een merk zonder rood houdt zo een werkende navigatie. */
.b-site-nav__top::after {
  content: "";
  position: absolute;
  left: 2px;
  right: calc(100% - 2px);
  bottom: 2px;
  height: 2px;
  background: var(--cta);
  transition: right .25s var(--ease);
}

.b-site-nav__top:hover::after,
.b-site-nav__top[aria-expanded="true"]::after { right: 2px; }

/* De kop kleurt mee. In de export gebeurt dat op twee momenten: zweven boven de
   witte balk, en een groep die openstaat. Alleen de streep verkleuren is te
   weinig — die is 2px hoog en zit onder de tekst, dus op een breed scherm met
   zes items zie je hem pas als je hem zoekt. */
.b-site-nav__top:hover,
.b-site-nav__top[aria-expanded="true"] { color: var(--cta); }

.b-site-nav__chev {
  width: 8px;
  height: 8px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate .25s var(--ease);
}

.b-site-nav__top[aria-expanded="true"] .b-site-nav__chev {
  rotate: 225deg;
  translate: 0 2px;
}

/* ---------- uitklapper ---------- */
.b-site-nav__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

.b-site-nav__panel[hidden] { display: none; }

.b-site-nav__panel-inner {
  padding-block: 34px 38px;
  padding-inline: var(--gutter);
}

/* Met uitgelichte kaart: kolommen links, kaart rechts — zoals in het ontwerp.
   Zonder kaart blijven het gewoon drie kolommen. */
.b-site-nav__panel-inner--feat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 52px;
  align-items: start;
}

.b-site-nav__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 26px;
}

.b-site-nav__col-title {
  margin: 0 0 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.b-site-nav__col-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.b-site-nav__link {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 10px;
  margin-inline: -10px;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  transition: background .15s;
}

.b-site-nav__link:hover {
  background: var(--cream, #faf9f5);
}

.b-site-nav__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: #f6ddd7;
  color: var(--ink);
}

.b-site-nav__ic svg {
  width: 22px;
  height: 22px;
}

.b-site-nav__txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.b-site-nav__link-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.2;
}

.b-site-nav__link-sub {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  color: var(--ink-2);
}

.b-site-nav__badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--ok, #1e8a4c);
  background: #e7f5ec;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.b-site-nav__feat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--cream, #faf9f5);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}

.b-site-nav__feat:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.b-site-nav__feat-media {
  display: block;
  height: 190px;
  background: #e7eef5;
  overflow: hidden;
}

.b-site-nav__feat-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.b-site-nav__feat-body {
  display: flex;
  flex-direction: column;
  padding: 18px 22px 22px;
}

.b-site-nav__feat-eyebrow {
  margin-bottom: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cta);
}

.b-site-nav__feat-title {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.05;
}

.b-site-nav__feat-sub {
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
}

.b-site-nav__feat-cta {
  align-self: flex-start;
  margin-top: 16px;
}

.b-site-nav__top.is-current {
  color: var(--cta);
}

.b-site-nav__top.is-current::after {
  right: 2px;
}

.b-site-nav__cta { white-space: nowrap; }

/* ---------- taalkeuze ---------- */
.b-site-nav__lang { position: relative; }

.b-site-nav__lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--r-btn);
  background: none;
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}

.b-site-nav__lang-btn:hover { background: var(--line-2); }

/* Een vlag is een plaatje van 21 bij 15 en geen vierkant icoon. Het randje is
   er voor de Nederlandse: die is voor tweederde wit en verdwijnt anders in de
   witte balk. */
.b-site-nav__flag {
  width: 21px;
  height: 15px;
  flex: none;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

.b-site-nav__lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  min-width: 190px;
  margin: 0;
  padding: 7px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}

.b-site-nav__lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease);
}

.b-site-nav__lang-item:hover {
  background: var(--cream, #f6f6f4);
  color: var(--accent);
}

.b-site-nav__lang-item.is-current {
  font-weight: 700;
  color: var(--accent);
}

.b-site-nav__lang-code { display: none; }

/* ---------- hamburger ---------- */
.b-site-nav__burger {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.b-site-nav__burger span,
.b-site-nav__burger span::before,
.b-site-nav__burger span::after {
  display: block;
  width: 20px;
  height: 2px;
  margin-inline: auto;
  background: currentColor;
  transition: translate .25s var(--ease), rotate .25s var(--ease), opacity .2s;
}

.b-site-nav__burger span { position: relative; }

.b-site-nav__burger span::before,
.b-site-nav__burger span::after {
  content: "";
  position: absolute;
  left: 0;
}

.b-site-nav__burger span::before { top: -6px; }
.b-site-nav__burger span::after  { top: 6px; }

.b-site-nav__burger[aria-expanded="true"] span { background: transparent; }
.b-site-nav__burger[aria-expanded="true"] span::before { translate: 0 6px; rotate: 45deg; }
.b-site-nav__burger[aria-expanded="true"] span::after  { translate: 0 -6px; rotate: -45deg; }

/* In de doorzichtige stand is alles wit; zodra de balk dichtslaat weer donker. */
.b-site-nav--overlay .b-site-nav__top,
.b-site-nav--overlay .b-site-nav__lang-btn,
.b-site-nav--overlay .b-site-nav__burger { color: rgba(255, 255, 255, .94); }

.b-site-nav--overlay .b-site-nav__lang-btn:hover { background: rgba(255, 255, 255, .16); }

/* Boven de foto blijft zweven wít oplichten en niet rood: rood op een donkere
   foto is slecht leesbaar, en de streep eronder draagt daar het accent al.
   Een groep die openstaat kleurt wél rood — dan staat het paneel eronder toch
   op wit. Zo staat het ook in de export. */
.b-site-nav--overlay .b-site-nav__top:hover { color: #fff; }
.b-site-nav--overlay .b-site-nav__top[aria-expanded="true"],
.b-site-nav--overlay .b-site-nav__top.is-current { color: var(--cta); }

.b-site-nav--overlay.is-solid .b-site-nav__top,
.b-site-nav--overlay.is-solid .b-site-nav__lang-btn,
.b-site-nav--overlay.is-solid .b-site-nav__burger { color: var(--ink); }

.b-site-nav--overlay.is-solid .b-site-nav__lang-btn:hover { background: var(--line-2); }

.b-site-nav--overlay.is-solid .b-site-nav__top:hover,
.b-site-nav--overlay.is-solid .b-site-nav__top[aria-expanded="true"],
.b-site-nav--overlay.is-solid .b-site-nav__top.is-current { color: var(--cta); }

/* ============================================================
   Onder xl: hamburger + fullscreen lade (design-export).
   ============================================================ */
@media (max-width: 1099.98px) {
  .b-site-nav__burger {
    display: block;
    margin-left: auto;
  }

  /* Het desktopmenu verdwijnt; de lade is een aparte overlay. */
  .b-site-nav__menu { display: none; }
}

/* ---------- mobiele lade ---------- */
.b-site-nav__drawer {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(3, 18, 40, .62);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  backdrop-filter: blur(2px);
  overflow: hidden;
}

.b-site-nav__drawer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.b-site-nav__drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100vw;
  max-width: 100vw;
  background: linear-gradient(180deg, #083463 0%, #04264c 100%);
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.4, 0, .15, 1);
  padding: 26px clamp(22px, 6vw, 64px) calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: -16px 0 60px rgba(2, 12, 28, .5);
}

.b-site-nav__drawer.is-open .b-site-nav__drawer-panel { transform: none; }

.b-site-nav__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.b-site-nav__drawer-brand {
  display: flex;
  align-items: center;
  height: 44px;
  text-decoration: none;
}

.b-site-nav__drawer-logo {
  display: block;
  height: 26px;
  width: auto;
}

.b-site-nav__drawer-close {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  color: #eaf1fb;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.b-site-nav__drawer-close svg {
  width: 20px;
  height: 20px;
}

.b-site-nav__drawer-close:hover {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

/* rijen verschijnen gestaggerd zodra het paneel inschuift */
.b-site-nav__drawer-panel > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.b-site-nav__drawer.is-open .b-site-nav__drawer-panel > * {
  opacity: 1;
  transform: none;
}

.b-site-nav__drawer.is-open .b-site-nav__drawer-panel > *:nth-child(1) { transition-delay: .04s; }
.b-site-nav__drawer.is-open .b-site-nav__drawer-panel > *:nth-child(2) { transition-delay: .08s; }
.b-site-nav__drawer.is-open .b-site-nav__drawer-panel > *:nth-child(3) { transition-delay: .12s; }
.b-site-nav__drawer.is-open .b-site-nav__drawer-panel > *:nth-child(4) { transition-delay: .16s; }
.b-site-nav__drawer.is-open .b-site-nav__drawer-panel > *:nth-child(5) { transition-delay: .20s; }
.b-site-nav__drawer.is-open .b-site-nav__drawer-panel > *:nth-child(6) { transition-delay: .24s; }
.b-site-nav__drawer.is-open .b-site-nav__drawer-panel > *:nth-child(n+7) { transition-delay: .28s; }

/* accordion + links */
.b-site-nav__dw-acc { border-bottom: 1px solid rgba(255, 255, 255, .1); }

.b-site-nav__dw-accbtn,
.b-site-nav__dw-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 10px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.b-site-nav__dw-link {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  border-radius: 0;
}

.b-site-nav__dw-accbtn:hover,
.b-site-nav__dw-link:hover { background: rgba(255, 255, 255, .08); }

.b-site-nav__dw-acclabel {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.b-site-nav__dw-ic {
  flex: none;
  display: grid;
  place-items: center;
  color: #dbe8fa;
}

.b-site-nav__dw-ic-lg {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .12);
}

.b-site-nav__dw-ic-lg svg {
  width: 21px;
  height: 21px;
}

.b-site-nav__dw-chev {
  flex: none;
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, .55);
  transition: transform .28s var(--ease);
}

.b-site-nav__dw-acc.is-open .b-site-nav__dw-chev { transform: rotate(180deg); }

.b-site-nav__dw-arrow {
  flex: none;
  width: 19px;
  height: 19px;
  color: rgba(255, 255, 255, .55);
  transition: transform .2s var(--ease), color .2s var(--ease);
}

.b-site-nav__dw-link:hover .b-site-nav__dw-arrow {
  transform: translateX(4px);
  color: #fff;
}

.b-site-nav__dw-link.is-current {
  color: #ff6a52;
}

.b-site-nav__dw-link.is-current .b-site-nav__dw-ic-lg {
  background: rgba(255, 106, 82, .2);
}

.b-site-nav__dw-link.is-current .b-site-nav__dw-ic-lg svg { color: #ffb3a4; }

.b-site-nav__dw-accpanel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .34s var(--ease);
}

.b-site-nav__dw-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 10px 11px 8px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background .15s;
}

.b-site-nav__dw-item:hover { background: rgba(255, 255, 255, .07); }

.b-site-nav__dw-item .b-site-nav__dw-ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
}

.b-site-nav__dw-item .b-site-nav__dw-ic svg {
  width: 19px;
  height: 19px;
  color: #8fbaf0;
}

.b-site-nav__dw-item:hover .b-site-nav__dw-ic { background: rgba(255, 255, 255, .18); }

.b-site-nav__dw-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.b-site-nav__dw-t {
  font-size: 15.5px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}

.b-site-nav__dw-s {
  font-size: 14px;
  color: rgba(255, 255, 255, .55);
  margin-top: 2px;
}

.b-site-nav__dw-group {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  padding: 22px 10px 4px;
}

.b-site-nav__dw-lang {
  display: flex;
  gap: 8px;
  margin-top: 0;
}

.b-site-nav__dw-lang-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .86);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}

.b-site-nav__dw-lang-opt.is-current {
  background: #fff;
  color: var(--accent);
  border-color: #fff;
}

.b-site-nav__dw-cta {
  margin-top: 22px;
  justify-content: center;
  height: 54px;
  min-height: 54px;
  font-size: 16px;
}

.b-site-nav.is-drawer-open .b-site-nav__burger { color: rgba(255, 255, 255, .94); }

@media (min-width: 1100px) {
  .b-site-nav__drawer { display: none; }
}

@media (max-width: 679.98px) {
  .b-site-nav { --nav-h: 64px; }
  .b-site-nav__logo { height: 22px; }
}

/* Wie beweging uitzet wil ook geen uitrollende streepjes. */
@media (prefers-reduced-motion: reduce) {
  .b-site-nav__logo,
  .b-site-nav__top::after,
  .b-site-nav__chev,
  .b-site-nav__burger span,
  .b-site-nav__burger span::before,
  .b-site-nav__burger span::after,
  .b-site-nav__drawer,
  .b-site-nav__drawer-panel,
  .b-site-nav__drawer-panel > *,
  .b-site-nav__dw-chev,
  .b-site-nav__dw-arrow,
  .b-site-nav__dw-accpanel { transition: none; }
}

/* ---- site-notice ---- */
/* Meldingsbalk boven de nav.

   Hij ligt in de stroom en niet vast bovenaan. Dat scheelt de hele dans die de
   export ervoor nodig heeft — de nav omlaag duwen, de balk bij het scrollen weer
   omhoog schuiven, en bij ankerlinks de hoogte terugrekenen. Scrollen doet dat
   hier vanzelf: de balk loopt het beeld uit en de plakkende nav blijft op nul.

   De achtergrondkleur komt uit surface 'deep' in de shell, dus die staat hier
   niet. Wat hier staat is de maatvoering. */
.b-site-notice {
  --notice-h: 46px;

  position: relative;
  z-index: 101;
  font-size: var(--fs-md);
}

.b-site-notice__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--notice-h);
  overflow: hidden;
}

.b-site-notice__pill {
  flex: none;
  padding: 4px 11px;
  border-radius: var(--r-tag);
  background: var(--cta, #c00);
  color: #fff;
  font-family: var(--display, serif);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* De berichten liggen op elkaar in plaats van naast elkaar: dan bepaalt het
   langste bericht de hoogte niet en verspringt er niets bij het wisselen. */
.b-site-notice__track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.b-site-notice__item {
  display: none;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.b-site-notice__item.is-on {
  display: flex;
  width: 100%;
  overflow: hidden;
  animation: site-notice-in .5s var(--ease);
}

@keyframes site-notice-in {
  from { opacity: 0; translate: 0 4px; }
  to   { opacity: 1; translate: 0; }
}

.b-site-notice__cat {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--surface-muted);
}

/* Eén regel, en te lang wordt afgekapt. Een balk die op smalle schermen twee
   regels wordt duwt de hele pagina omlaag en dat is een melding niet waard. */
.b-site-notice__text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  color: var(--surface-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.b-site-notice__more {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--surface-ink);
}

.b-site-notice__arrow { transition: translate .2s var(--ease); }
.b-site-notice__item:hover .b-site-notice__arrow { translate: 4px 0; }

.b-site-notice__dots {
  flex: none;
  display: flex;
  gap: 7px;
}

.b-site-notice__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  cursor: pointer;
  transition: background .2s var(--ease), scale .2s var(--ease);
}

.b-site-notice__dot:hover { background: rgba(255, 255, 255, .6); }

.b-site-notice__dot.is-on {
  background: var(--surface-ink);
  scale: 1.25;
}

.b-site-notice__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--surface-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}

.b-site-notice__close:hover {
  background: rgba(255, 255, 255, .12);
  color: var(--surface-ink);
}

@media (max-width: 679.98px) {
  .b-site-notice { --notice-h: 42px; }

  /* Categorie en 'Lees meer' gaan eraf voordat het bericht zelf moet inleveren.
     De hele regel is een link, dus de pijl was hier toch al een herhaling. */
  .b-site-notice__cat,
  .b-site-notice__more { display: none; }

  .b-site-notice__inner { gap: 12px; }
}

/* Wie beweging heeft uitgezet krijgt geen automatische wissel — dat regelt het
   script — maar ook niet het invloepen bij een handmatige. */
@media (prefers-reduced-motion: reduce) {
  .b-site-notice__item.is-on { animation: none; }
}

/* ---- split-band ---- */
/* Tekst + beeld naast elkaar — herkomst: .split / .split-copy / .split-media */

.b-split-band__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
}

.b-split-band__title {
  margin: 0 0 20px;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.b-split-band__lede {
  margin: 0 0 28px;
  max-width: 48ch;
}

.b-split-band__points {
  margin-bottom: 30px;
  color: var(--surface-ink);
}

.b-split-band__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.b-split-band__panel {
  padding: 8px 0;
}

.b-split-band__panelkop {
  margin: 0 0 8px;
  font-size: var(--fs-4xl);
  font-weight: 700;
}

.b-split-band__rate {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.b-split-band__ratev {
  font-size: var(--fs-3xl);
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.b-split-band__ratev em {
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 500;
  opacity: .6;
  margin-left: 4px;
}

.b-split-band__ratenote {
  margin: 18px 0 0;
  font-size: var(--fs-lg);
  line-height: 1.55;
  opacity: .72;
}

.b-split-band__media img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1099.98px) {
  .b-split-band__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Gestapeld is de kolom ineens het hele contentvlak, en `width: 100%` betekent
     dan "zo breed als de pagina" terwijl het beeld daar nooit om vroeg. Net
     boven dit breekpunt is het 452 px breed, net eronder 979 — ruim twee keer
     zo groot, waardoor het blok van 448 naar 1124 px hoog schiet en de plaat het
     verhaal overstemt.

     Een bovengrens houdt het beeld op ongeveer de maat die het hiervoor al had.
     Bijsnijden met object-fit is hier geen optie: dit is geen losse foto maar een
     compositie, met de pas in het midden en het vinkje 'Geactiveerd' in de
     linkeronderhoek. Precies die twee zou je eraf snijden. */
  .b-split-band__media {
    max-width: 560px;
    margin-inline: auto;
  }
}

/* ---- split-card ---- */
/* Donkere kaart + beeld — herkomst: .split.split-card in de Electric-pagina.
   De diepblauwe achtergrond komt van de surface; dit is de indeling erin.

   De kaart is contained + diepblauw. Schil-spacing zou die kleur in de
   marge trekken; margin laat het wit van de pagina eromheen. */
.b-split-card {
  /* De schil tekent een contained achtergrond met een vaste radius van 14px.
     --r-card is 12px en zou onder de hoeken van het beeld dus een randje
     diepblauw laten zien; de kaart volgt hier de schil. */
  --card-radius: 14px;

  margin-block: var(--space-lg);
}

.b-split-card__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 420px;
}

/* Bij een blok met een bleed-surface valt de linkerrand van de tekst samen met
   de paginamarge en is binnenruimte aan die kant overbodig. Deze kaart houdt
   zijn kleur juist binnen de contentbreedte, dus loopt die marge niet mee: de
   tekst heeft hier rondom zijn eigen ruimte nodig. */
.b-split-card__copy {
  padding: clamp(32px, 3.6vw, 52px);
  align-self: center;
}

.b-split-card__title {
  margin: 8px 0 18px;
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.b-split-card__lede {
  margin: 0 0 28px;
  max-width: 46ch;
}

.b-split-card__points { margin-bottom: 30px; }

.b-split-card .ck {
  background: var(--el-2, var(--ok));
}

.b-split-card__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.b-split-card__media {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  background: var(--el-deep, #0a4a36);
  border-radius: 0 var(--card-radius) var(--card-radius) 0;
}

.b-split-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.b-split-card__placeholder {
  padding: 20px;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  color: rgba(255, 255, 255, .55);
}

@media (max-width: 1099.98px) {
  .b-split-card__grid { grid-template-columns: 1fr; }

  .b-split-card__media {
    min-height: 260px;
    order: -1;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
  }
}

/* ---- station-detail ---- */
.b-station-detail__inner {
  max-width: 720px;
}

.b-station-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.b-station-detail__addr {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ink);
}

.b-station-detail__prov {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.b-station-detail__block + .b-station-detail__block {
  margin-top: 28px;
}

.b-station-detail__lbl {
  margin: 0 0 12px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.b-station-detail__prices {
  display: grid;
  gap: 10px;
}

.b-station-detail__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-1, #fff);
}

.b-station-detail__amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.b-station-detail__hours {
  display: grid;
  gap: 8px;
}

.b-station-detail__hours-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-1, #fff);
}

.b-station-detail__hours-time--always {
  font-weight: 700;
  color: var(--ok, #1f8a4d);
}

.b-station-detail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.b-station-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

/* ---- station-finder ---- */
/* Stationszoeker — één op één overgenomen uit styles.css (sectie FINDER).

   Twee dingen zijn wél aangepast, en allebei uit noodzaak:

   1. Elke selector staat nu onder .b-station-finder, zodat dit blok niets
      buiten zichzelf kan raken. Dat is de enige regel die blokken bij elkaar
      houdt.
   2. Merkgebonden tokens zijn vervangen door rolnamen: --blue werd --accent,
      --red werd --cta, --cream werd --panel. Anders werkt het blok alleen bij
      dit ene merk.

   De maten, verhoudingen en het gedrag van de layout zijn onveranderd. */

.b-station-finder__head {
  max-width: 1487px;
  margin-bottom: 54px;
}

.b-station-finder__intro {
  margin: 18px 0 0;
  max-width: 760px;
}

.b-station-finder__finder {
  display: grid;
  grid-template-columns: 320px 1fr;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
}

/* ---------- lijst ---------- */
.b-station-finder__list {
  display: flex;
  flex-direction: column;
  min-height: 560px;
  border-right: 1px solid var(--line);
}

.b-station-finder__search {
  position: relative;
  padding: 20px 22px 14px;
}

.b-station-finder__search input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 44px;
  font-family: inherit;
  font-size: var(--fs-lg);
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.b-station-finder__search input:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
}

.b-station-finder__search svg {
  position: absolute;
  left: 38px;
  top: calc(50% + 3px);
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--ink-3);
}

.b-station-finder__lhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 22px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-2);
}

.b-station-finder__hint { font-weight: 500; opacity: .75; }

.b-station-finder__scroll {
  flex: 1;
  max-height: 520px;
  overflow-y: auto;
}

/* Een <button> en geen <div>: aanklikbaar hoort in de tabvolgorde. Daarom
   moeten hier wel de knop-eigenschappen uit de browser worden weggehaald. */
.b-station-finder__item {
  display: block;
  width: 100%;
  padding: 18px 22px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-left: 3px solid transparent;
  transition: background .18s, border-left-color .18s;
}

.b-station-finder__item:hover { background: var(--panel); }

/* De regels vliegen in nadat het filter veranderde. Alleen dán: de klasse wordt
   per filterwijziging opnieuw gezet en staat er bij het aanklikken van een
   station niet, want dan verandert er één regel van kleur.

   Vier vertragingen en daarna niet meer. Een lijst van honderd waarbij de
   laatste na drie seconden binnenkomt is geen animatie meer maar wachttijd. */
.b-station-finder__scroll.is-gefilterd .b-station-finder__item {
  animation: station-finder-in .32s var(--ease, ease) both;
}

.b-station-finder__scroll.is-gefilterd .b-station-finder__item:nth-child(2) { animation-delay: .03s; }
.b-station-finder__scroll.is-gefilterd .b-station-finder__item:nth-child(3) { animation-delay: .06s; }
.b-station-finder__scroll.is-gefilterd .b-station-finder__item:nth-child(4) { animation-delay: .09s; }
.b-station-finder__scroll.is-gefilterd .b-station-finder__item:nth-child(n+5) { animation-delay: .12s; }

@keyframes station-finder-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.b-station-finder__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.b-station-finder__item.is-active {
  background: color-mix(in srgb, var(--accent) 7%, #fff);
  border-left-color: var(--accent);
}

.b-station-finder__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.b-station-finder__name {
  display: block;
  margin: 0 0 3px;
  font-size: var(--fs-2xl);
  font-weight: 700;
}

.b-station-finder__empty {
  margin: 0;
  padding: 30px 22px;
  font-size: var(--fs-md);
  color: var(--ink-3);
}

.b-station-finder__link {
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}

.b-station-finder__dist {
  flex: none;
  padding: 2px 9px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  border-radius: 999px;
}

.b-station-finder__addr {
  display: block;
  margin-bottom: 10px;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

.b-station-finder__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* ---------- kaart ---------- */
.b-station-finder__map {
  position: relative;
  display: flex;
  min-height: 560px;
  overflow: hidden;
  background: radial-gradient(120% 120% at 60% 10%, #f3f6fa, #e7eef5);
}

.b-station-finder__stage {
  position: relative;
  flex: 1;
  padding: 20px;
  overflow: hidden;
}

.b-station-finder__frame { position: absolute; inset: 20px; }

.b-station-finder__holder {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.b-station-finder__nl {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

.b-station-finder__nl:active { cursor: grabbing; }

/* De omtrek van Nederland. Het bronbestand komt met een eigen groen mee; dat
   staat los van welk merk dan ook de kaart gebruikt, dus wordt het hier
   overschreven met een tint van de accentkleur. Zo blijft de kaart bij het
   thema horen in plaats van bij het bestand. */
.b-station-finder__prov {
  fill: color-mix(in srgb, var(--accent) 18%, #fff);
  stroke: #fff;
  stroke-width: 1.6;
  transition: fill .2s;
}

.b-station-finder__prov:hover { fill: color-mix(in srgb, var(--accent) 26%, #fff); }

/* ---------- speldjes ----------
   Alle speldjes blijven staan, ook de weggefilterde. Ze verdwijnen laten is
   sneller te maken, maar dan verlies je waar het bij een kaart om gaat: zien
   dát er daar iets is, en dat het net niet aan je filter voldoet. */
.b-station-finder__spot { cursor: pointer; }

.b-station-finder__spot-dot {
  fill: var(--accent);
  stroke: #fff;
  stroke-width: 2;
  /* Het middelpunt van de cirkel en niet dat van de laag: zonder dit groeit een
     speldje bij hover schuin weg in plaats van op zijn plek. */
  transform-origin: center;
  transform-box: fill-box;
  transition: transform .16s var(--ease, ease), fill .16s;
}

.b-station-finder__spot-halo {
  fill: color-mix(in srgb, var(--accent) 22%, transparent);
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity .15s, transform .2s var(--ease, ease);
  transform: scale(.6);
}

.b-station-finder__spot:hover .b-station-finder__spot-halo,
.b-station-finder__spot:focus-visible .b-station-finder__spot-halo {
  opacity: 1;
  transform: scale(1);
}

.b-station-finder__spot:hover .b-station-finder__spot-dot { transform: scale(1.25); }

/* Bemand of onbemand, op een speldje van veertien pixels. Een tweede blauwtint
   is op die maat niet te zien, dus het verschil zit in de vorm: een station met
   shop is een ring, een onbemand station een volle stip. */
.b-station-finder__spot.has-shop .b-station-finder__spot-dot {
  fill: #fff;
  stroke: var(--accent);
  stroke-width: 4;
}

.b-station-finder__spot.is-uit {
  pointer-events: none;
}

.b-station-finder__spot.is-uit .b-station-finder__spot-dot {
  fill: var(--ink-3);
  opacity: .18;
  /* Wegzakken en niet wegknippen. Zo zie je bij het aanzetten van een filter
     wélke speldjes afvallen; bij een harde omslag zie je alleen dat het beeld
     anders is. */
  transition: transform .16s var(--ease, ease), fill .3s, opacity .3s;
}

/* Het gekozen station is altijd een volle rode stip, ook als het een shop
   heeft. Twee kenmerken tegelijk op één speldje leest niet; dat het gekozen is,
   gaat op dat moment voor. */
.b-station-finder__spot.is-active .b-station-finder__spot-dot {
  fill: var(--cta);
  stroke: #fff;
  stroke-width: 3;
}

.b-station-finder__spot.is-active .b-station-finder__spot-halo {
  fill: color-mix(in srgb, var(--cta) 25%, transparent);
  opacity: 1;
  transform: scale(1);
}

/* Even opveren bij het aanwijzen. De kaart vliegt tegelijk naar dit punt toe,
   dus zonder dit zie je aan het eind van die vlucht wel een ander stukje land
   maar niet welk speldje de reden was. */
.b-station-finder__spot.is-active .b-station-finder__spot-dot {
  animation: station-finder-op .42s var(--ease, ease) both;
}

@keyframes station-finder-op {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.55); }
  100% { transform: scale(1.2); }
}

.b-station-finder__ring {
  fill: color-mix(in srgb, var(--accent) 8%, transparent);
  stroke: var(--accent);
}

.b-station-finder__me circle {
  fill: var(--accent);
  stroke: #fff;
  stroke-width: 4;
}

.b-station-finder__me-dot { fill: #fff; stroke: none; }

/* De hartslag onder "u bent hier". Dit is de enige animatie die blijft lopen,
   en dat is met opzet: het is het enige punt op de kaart dat niet bij Fieten
   hoort maar bij de bezoeker, en daar mag hij het steeds op terugvinden. */
.b-station-finder__me-pulse {
  fill: color-mix(in srgb, var(--accent) 45%, transparent);
  stroke: none;
  transform-origin: center;
  transform-box: fill-box;
  animation: station-finder-hart 2.2s var(--ease, ease) infinite;
}

@keyframes station-finder-hart {
  0%        { opacity: .5; transform: scale(.55); }
  70%, 100% { opacity: 0;  transform: scale(1.5); }
}

/* ---------- filterbalk boven de kaart ---------- */
.b-station-finder__filters {
  position: absolute;
  z-index: 5;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.b-station-finder__mfbtn,
.b-station-finder__loc,
.b-station-finder__recent,
.b-station-finder__reset {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  transition: background .15s, border-color .15s, color .15s;
}

.b-station-finder__mfbtn { color: var(--ink); }
.b-station-finder__loc { color: var(--accent); }
.b-station-finder__reset { color: var(--cta); }

.b-station-finder__mfbtn:hover,
.b-station-finder__loc:hover,
.b-station-finder__recent:hover,
.b-station-finder__reset:hover { background: var(--panel); }

.b-station-finder__loc svg { width: 16px; height: 16px; flex: none; }

.b-station-finder__chev {
  width: 13px;
  height: 13px;
  color: var(--ink-3);
  transition: transform .2s var(--ease);
}

.b-station-finder__dd { position: relative; }

.b-station-finder__dd.is-gekozen .b-station-finder__mfbtn {
  color: var(--accent);
  border-color: var(--accent);
}

.b-station-finder__mfbtn[aria-expanded="true"] .b-station-finder__chev {
  transform: rotate(180deg);
}

/* `hidden` wint niet vanzelf van een display-waarde in dezelfde selector, en
   dat is precies de val: het attribuut staat er, de knop is er nog steeds. */
.b-station-finder__badge[hidden],
.b-station-finder__reset[hidden] { display: none; }

.b-station-finder__badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
}

.b-station-finder__loc.is-aan {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.b-station-finder__loc.is-aan:hover { background: var(--accent-strong); }

.b-station-finder__recent { color: var(--ok, #1f8a4d); }

.b-station-finder__recent-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ok, #1f8a4d);
  flex: none;
}

.b-station-finder__recent.is-aan {
  color: #166b3b;
  background: #f0f8f3;
  border-color: var(--ok, #1f8a4d);
}

.b-station-finder__new {
  display: inline-block;
  margin-left: 9px;
  padding: 2px 8px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: #166b3b;
  vertical-align: middle;
  background: #e8f5ed;
  border-radius: 999px;
}

.b-station-finder__dnew {
  display: inline-block;
  margin: 4px 0 0;
  padding: 2px 8px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: #166b3b;
  background: #e8f5ed;
  border-radius: 999px;
}

.b-station-finder__dnew[hidden] { display: none; }

.b-station-finder__spot-ring {
  fill: none;
  stroke: var(--ok, #1f8a4d);
  stroke-width: 2;
}

/* ---------- uitklappaneel ---------- */
.b-station-finder__panel {
  position: absolute;
  z-index: 10;
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: max-content;
  max-width: min(340px, 76vw);
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}

.b-station-finder__panel[hidden] { display: none; }

.b-station-finder__chip {
  height: 32px;
  padding: 0 12px;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background .15s, color .15s, border-color .15s;
}

.b-station-finder__chip:hover { border-color: var(--accent); }

.b-station-finder__chip[aria-pressed="true"] {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* ---------- knoppen en bijschriften op de kaart ---------- */
.b-station-finder__zoom {
  position: absolute;
  z-index: 5;
  right: 16px;
  bottom: 16px;
  display: flex;
  gap: 6px;
}

.b-station-finder__zoom button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: var(--fs-4xl);
  line-height: 1;
  color: var(--accent);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
  transition: background .15s;
}

.b-station-finder__zoom button:hover { background: var(--panel); }

.b-station-finder__hintbar {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 5px 12px;
  font-size: var(--fs-2xs);
  white-space: nowrap;
  pointer-events: none;
  color: var(--ink-2);
  background: rgba(255, 255, 255, .82);
  border-radius: 999px;
}

.b-station-finder__legend {
  position: absolute;
  z-index: 3;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  padding: 7px 14px;
  font-size: var(--fs-2xs);
  pointer-events: none;
  color: var(--ink-2);
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.b-station-finder__mlitem {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

/* Zelfde twee vormen als op de kaart, anders legt de legenda niets uit. */
.b-station-finder__pin {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
}

.b-station-finder__pin--shop {
  background: #fff;
  border: 3px solid var(--accent);
}

/* ---------- detailkaart ----------
   Naast de kaart en niet eroverheen. De export laat hem zweven, en dan verdwijnt
   het station dat je net koos onder het paneel dat erover gaat — precies in de
   noordoosthoek waar de meeste locaties liggen.

   Ernaast kost bovendien niets: het land is in de hoogte begrensd en niet in de
   breedte, dus wat de kaart inlevert is de lege marge ernaast. De kaart blijft
   even groot, het speldje blijft in beeld. */
.b-station-finder__detail {
  position: relative;
  z-index: 8;
  flex: none;
  width: min(330px, 40%);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 16px 16px 16px 0;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  /* Van opzij binnenschuiven, want de kaart maakt op dat moment plaats: de
     beweging laat zien waar de ruimte vandaan komt. */
  animation: station-finder-detail .3s var(--ease, ease) both;
}

@keyframes station-finder-detail {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}

.b-station-finder__detail[hidden] { display: none; }

.b-station-finder__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--ink-3);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
}

.b-station-finder__close:hover { color: var(--ink); background: var(--panel); }
.b-station-finder__close svg { width: 15px; height: 15px; }

.b-station-finder__dhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-right: 26px;
  margin-bottom: 18px;
}

.b-station-finder__dname {
  margin: 0;
  font-size: var(--fs-3xl);
  font-weight: 700;
}

/* De kop krijgt focus als je met het toetsenbord een station kiest. Zonder
   deze regel is dat een sprong zonder zichtbare aanleiding. */
.b-station-finder__dname:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.b-station-finder__daddr {
  margin: 3px 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

.b-station-finder__dblock { margin-bottom: 18px; }
.b-station-finder__dblock[hidden] { display: none; }

.b-station-finder__dlbl {
  margin: 0 0 8px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.b-station-finder__price {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: var(--fs-md);
  border-bottom: 1px solid var(--line-2);
}

.b-station-finder__price:last-child { border-bottom: 0; }

.b-station-finder__amount {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.b-station-finder__hours {
  display: grid;
  gap: 6px;
}

.b-station-finder__hours-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: var(--fs-md);
  border-bottom: 1px solid var(--line-2);
}

.b-station-finder__hours-row:last-child { border-bottom: 0; }

.b-station-finder__hours-time--always {
  font-weight: 700;
  color: var(--ok, #1f8a4d);
}

.b-station-finder__dactions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.b-station-finder__foot {
  margin-top: 24px;
  font-size: var(--fs-lg);
  color: var(--surface-muted);
}

/* Onder lg past de kaart niet meer naast de lijst. De kaart wordt dan een blok
   met een vaste hoogte en de filterbalk schuift erboven in de normale flow —
   zwevend over een lage kaart zou hij de halve kaart afdekken. */
@media (max-width: 899.98px) {
  .b-station-finder__finder { grid-template-columns: 1fr; }

  .b-station-finder__list {
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .b-station-finder__scroll { max-height: 300px; }

  .b-station-finder__map { display: block; min-height: auto; overflow: visible; }
  .b-station-finder__stage { display: block; padding: 0; }

  .b-station-finder__filters {
    position: relative;
    inset: auto;
    z-index: 30;
    padding: 14px 16px 4px;
  }

  .b-station-finder__frame {
    position: relative;
    inset: auto;
    height: min(60vh, 430px);
    margin: 12px 16px 16px;
  }

  .b-station-finder__zoom { right: 14px; bottom: 14px; flex-direction: column; }
  .b-station-finder__legend { left: 14px; bottom: 14px; }
  .b-station-finder__head { margin-bottom: 42px; }

  /* Naast de kaart past hier niet meer: 40% van een telefoonscherm is geen
     kolom. De detailkaart gaat onder de kaart staan, over de volle breedte. */
  .b-station-finder__detail {
    width: auto;
    margin: 0 16px 16px;
    /* Hij komt hier van onderen en niet van opzij: de ruimte ontstaat onder de
       kaart, dus daar hoort de beweging vandaan te komen. */
    animation-name: station-finder-detail-onder;
  }

  @keyframes station-finder-detail-onder {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Zodra de kaart smaller wordt, botst de gecentreerde hint op de legenda.
   De hint is een tip, de legenda is uitleg — dus de hint gaat weg.

   Dat gebeurt op twee manieren: bij een smal venster, en bij een breed venster
   waar de detailkaart een derde van de ruimte inneemt. Die tweede is niet met
   een mediaquery te vangen, want het venster verandert niet. */
@media (max-width: 1239.98px) {
  .b-station-finder__hintbar { display: none; }
}

.b-station-finder__finder:has([data-detail]:not([hidden])) .b-station-finder__hintbar {
  display: none;
}

/* Wie beweging heeft uitgezet, krijgt hier alleen eindstanden. De hover-schaal
   van een speldje blijft staan — dat is geen beweging die je overkomt maar een
   antwoord op je eigen muis, en zonder dat antwoord is niet te zien welk
   speldje je te pakken hebt. De kaart springt in dat geval meteen naar zijn
   eindstand; dat regelt station-finder.js. */
@media (prefers-reduced-motion: reduce) {
  .b-station-finder__scroll.is-gefilterd .b-station-finder__item,
  .b-station-finder__spot.is-active .b-station-finder__spot-dot,
  .b-station-finder__me-pulse,
  .b-station-finder__detail {
    animation: none;
  }
}

/* ---------- sticky toolbar (Tankstations-pagina) ----------
   Herkomst: .ts-toolbar in styles.css */
.b-station-finder.is-toolbar {
  scroll-margin-top: 96px;
}

.b-station-finder__toolbar {
  position: sticky;
  top: var(--nav-h, 78px);
  z-index: 60;
  margin: 0 calc(50% - 50vw) 28px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.b-station-finder__toolbar-in {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
}

.b-station-finder__ttlabel {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.b-station-finder__ttsearch {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  max-width: 520px;
}

.b-station-finder__ttsearch svg {
  position: absolute;
  left: 13px;
  width: 17px;
  height: 17px;
  color: var(--ink-3);
  pointer-events: none;
}

.b-station-finder__ttsearch input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 40px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
}

.b-station-finder__ttsearch input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 66, 137, .12);
}

.b-station-finder__ttcount {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}

.b-station-finder__ttactions {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.b-station-finder__ttbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}

.b-station-finder__ttbtn:hover,
.b-station-finder__ttbtn:focus-visible {
  border-color: var(--accent);
  background: #f4f8fd;
}

.b-station-finder__ttbtn svg { width: 17px; height: 17px; }

.b-station-finder__ttpdf {
  color: var(--cta);
  text-decoration: none;
}

.b-station-finder__ttpdf:hover,
.b-station-finder__ttpdf:focus-visible {
  border-color: var(--cta);
  background: #fdf3f1;
}

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

@media (max-width: 899.98px) {
  .b-station-finder__toolbar-in { flex-wrap: wrap; row-gap: 10px; }
  .b-station-finder__ttsearch { order: 2; flex: 1 1 100%; max-width: none; }
  .b-station-finder__ttactions { order: 3; flex: 1 1 100%; margin-left: 0; }
  .b-station-finder__ttbtn { flex: 1; justify-content: center; }
  .b-station-finder__ttcount { order: 1; margin-left: auto; }
}

@media (max-width: 679.98px) {
  .b-station-finder__toolbar { top: var(--nav-h, 64px); }
}

/* ---- stations-overview ---- */
/* Stationsoverzicht — herkomst: Tankstations overzicht.html */

.b-stations-overview__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 6px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--accent);
}

.b-stations-overview__title {
  margin: 10px 0 4px;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--accent);
}

.b-stations-overview__lede {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ink-2);
}

.b-stations-overview__meta {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-3);
  text-align: right;
}

.b-stations-overview__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 14px 0 18px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.b-stations-overview__legend b { color: var(--ink); font-weight: 600; }

.b-stations-overview__prov {
  margin: 20px 0 8px;
  padding-bottom: 5px;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--accent);
  border-bottom: 1px solid var(--line);
}

.b-stations-overview__count { font-weight: 500; color: var(--ink-3); }

.b-stations-overview__table {
  width: 100%;
  margin-bottom: 8px;
  font-size: var(--fs-sm);
  border-collapse: collapse;
}

.b-stations-overview__table thead th {
  padding: 0 8px 5px 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.b-stations-overview__table td {
  padding: 6px 8px 6px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--line-2);
}

.b-stations-overview__town { width: 20%; font-weight: 600; }
.b-stations-overview__addr { width: 26%; color: var(--ink-2); }
.b-stations-overview__hours { width: 22%; white-space: nowrap; }
.b-stations-overview__fac { color: var(--ink-2); }

.b-stations-overview__h24 { font-weight: 600; color: #166b3b; }

.b-stations-overview__note {
  margin-top: 22px;
  padding-top: 12px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  border-top: 1px solid var(--line);
}

@media (max-width: 679.98px) {
  .b-stations-overview__head { flex-direction: column; align-items: flex-start; }
  .b-stations-overview__meta { text-align: left; }
  .b-stations-overview__table { display: block; overflow-x: auto; }
}

@media print {
  .b-stations-overview__head { break-after: avoid; }
  .b-stations-overview__prov { break-after: avoid; }
  .b-stations-overview__table tr { break-inside: avoid; }
}

/* ---- stats ---- */
/* Cijfers — herkomst: .stats / .stats-inner / .stat uit styles.css
   Afspraak: elke selector begint met .b-stats. Controleer met php bin/lint.php */

.b-stats {
  border-bottom: 1px solid var(--line);
}

.b-stats__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.b-stats__item {
  position: relative;
  padding: 30px 8px;
}

/* Scheidingslijntje tussen de cijfers, niet ervoor of erna */
.b-stats__item + .b-stats__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 26px;
  bottom: 26px;
  width: 1px;
  background: var(--line);
}

.b-stats__value {
  font-size: var(--fs-stat);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  /* --accent, niet --blue: een blok verwijst naar de rol van een kleur,
     niet naar de naam die één merk eraan geeft. */
  color: var(--accent);
}

.b-stats__label {
  margin-top: 8px;
  font-size: var(--fs-md);
  font-weight: 500;
  /* Volgt de surface, zodat het blok ook op een donkere band leesbaar blijft */
  color: var(--surface-muted);
}

@media (max-width: 679.98px) {
  .b-stats__row {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Op twee kolommen valt het lijntje bij elk oneven item verkeerd */
  .b-stats__item:nth-child(odd)::before {
    display: none;
  }
}

/* ---- steps ---- */
/* Stappenplan — herkomst: .el-steps / .el-step uit pages.css */

.b-steps .eyebrow { color: var(--el, var(--ok)); }
.b-steps .acc { color: var(--el, var(--ok)); }

.b-steps__head { margin-bottom: 48px; }

.b-steps__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.b-steps__item {
  padding: 30px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform .22s var(--ease), box-shadow .22s, border-color .22s;
}

.b-steps__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.b-steps__n {
  display: inline-block;
  margin-bottom: 18px;
  padding: 5px 11px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--el, var(--ok));
  background: var(--el-soft, color-mix(in srgb, var(--ok) 12%, #fff));
  border-radius: 8px;
}

.b-steps__title {
  margin: 0 0 10px;
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: -.01em;
}

.b-steps__text {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--ink-2);
}

@media (max-width: 1099.98px) {
  .b-steps__list { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 679.98px) {
  .b-steps__list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .b-steps__item:hover { transform: none; }
}

/* ---- styleguide ---- */
/* ============================================================
   Stijlgids

   Bewust sober: dit blok moet het thema laten zien, niet zichzelf. Alles wat
   hier eigen opmaak heeft — de kaders, de sleutels, de raster — is grijs en
   klein, zodat het merk het enige is dat opvalt.
   ============================================================ */

.b-styleguide {
  color: var(--surface-ink);
}

.b-styleguide__intro {
  max-width: 60ch;
  margin-bottom: var(--space-md);
}

.b-styleguide__lead {
  margin: 0 0 14px;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.b-styleguide__alarm {
  margin-bottom: var(--space-md);
  padding: 16px 20px;
  background: #fdecea;
  color: #7a2118;
  border-left: 3px solid #c0392b;
  border-radius: var(--r-btn);
  font-size: var(--fs-md);
  line-height: 1.55;
}
.b-styleguide__alarm code {
  font-family: var(--mono);
  font-size: .92em;
}

/* ---------- secties ---------- */
.b-styleguide__section {
  padding-top: var(--space-md);
  margin-top: var(--space-md);
  border-top: 1px solid var(--line);
}

.b-styleguide__head {
  margin: 0 0 6px;
  font-size: var(--fs-4xl);
  font-weight: 700;
  letter-spacing: -.01em;
}

.b-styleguide__note {
  max-width: 68ch;
  margin: 0 0 24px;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--surface-muted);
}
.b-styleguide__note code {
  font-family: var(--mono);
  font-size: .92em;
}

/* Sleutels en waarden: het etiket bij een monster, nooit de hoofdrol. */
.b-styleguide__key {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--surface-muted);
}

.b-styleguide__val {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--surface-muted);
  overflow-wrap: anywhere;
}

/* ---------- kleuren ---------- */
.b-styleguide__swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px;
}

.b-styleguide__chip {
  display: block;
  height: 56px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
}

/* ---------- achtergronden ---------- */
.b-styleguide__surfaces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.b-styleguide__surface {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  min-height: 116px;
  padding: 16px;
  /* --sg-bg zet de template per monster inline; dit is geen themataken. */
  background: var(--sg-bg, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

/* De toon uit het thema bepaalt of tekst op dit vlak licht of donker wordt.
   Hier benaderd, want een los monster hangt niet in een echte block-shell. */
.b-styleguide__surface[data-tone="dark"] { color: #fff; }
.b-styleguide__surface[data-tone="light"] { color: var(--ink); }

.b-styleguide__surface-label {
  font-weight: 600;
  font-size: var(--fs-lg);
}

.b-styleguide__surface-meta {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  opacity: .7;
}

/* ---------- letters ---------- */
.b-styleguide__fonts {
  display: grid;
  gap: 22px;
}

.b-styleguide__specimen {
  margin: 6px 0;
  font-size: var(--fs-3xl);
  line-height: 1.25;
}

/* ---------- tekstschaal ---------- */
.b-styleguide__scale {
  display: grid;
  gap: 14px;
}

.b-styleguide__step {
  display: grid;
  grid-template-columns: 110px 1fr 150px;
  gap: 16px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line-2);
}

.b-styleguide__sample {
  margin: 0;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 679.98px) {
  .b-styleguide__step {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .b-styleguide__sample { white-space: normal; }
}

/* ---------- ruimte ---------- */
.b-styleguide__spacing {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-end;
}

.b-styleguide__space {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.b-styleguide__bar {
  display: block;
  width: 44px;
  background: var(--accent);
  border-radius: 3px;
}

/* ---------- tabellen ---------- */
.b-styleguide__table {
  width: 100%;
  margin: 8px 0 0;
  border-collapse: collapse;
  font-size: var(--fs-md);
}

.b-styleguide__table th,
.b-styleguide__table td {
  padding: 9px 14px 9px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-2);
}

.b-styleguide__table th {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--surface-muted);
}

.b-styleguide__table code {
  font-family: var(--mono);
  font-size: .92em;
  color: var(--surface-muted);
}

/* ---------- bouwstenen ---------- */
.b-styleguide__demo {
  display: grid;
  gap: 10px;
  padding: 20px;
  margin-bottom: 14px;
  background: var(--panel);
  border-radius: var(--r-card);
}

.b-styleguide__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* ---------- formulier ---------- */
.b-styleguide__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  align-items: start;
  max-width: 720px;
}

.b-styleguide__form label {
  display: grid;
  gap: 6px;
  font-size: var(--fs-md);
}

.b-styleguide__wide { grid-column: 1 / -1; }

.b-styleguide__inline {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ---------- beweging ---------- */
.b-styleguide__motion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.b-styleguide__mover {
  display: grid;
  place-items: center;
  min-height: 88px;
  padding: 10px;
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.b-styleguide__count {
  font-size: var(--fs-3xl);
  color: var(--accent);
}