/**
 * De blog.
 *
 * Bouwt op landing.css: alle kleuren, fonts en overgangen komen daar vandaan,
 * en de nav en de footer gebruiken letterlijk dezelfde klassen. Hier staat
 * alleen wat de blog erbij nodig heeft, met het voorvoegsel bl-.
 *
 * Eén ding moet worden teruggedraaid. landing.css verbergt de muisaanwijzer,
 * omdat runtime.js daar een eigen stip en ring tekent. Dat script hoort bij de
 * homepagina met haar scrollanimaties en draait hier niet, dus zonder deze
 * regels leest de bezoeker zonder cursor.
 */

.bl-root, .bl-root * { cursor: auto; }
.bl-root a, .bl-root button, .bl-root label, .bl-root [role="button"] { cursor: pointer; }
.bl-root input, .bl-root textarea { cursor: text; }
body:has(.bl-root) { cursor: auto; }

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

.bl-root {
  position: relative;
  z-index: 2;
  min-height: 100vh;
}

.bl-main {
  /* Onder de vaste nav door. Verder geen zijgutter hier: de hero moet
     randloos kunnen lopen, dus elke sectie draagt zijn eigen 48px gutter,
     net als in het HTML-referentieontwerp. */
  padding: 116px 0 24px;
}
/* Nav-vrijstand vóór de artikelhero. De hero zelf loopt daarna randloos door;
   de leeskolom erbinnen krijgt verderop zijn eigen (smallere) breedte. */
.bl-art-wrap { padding-top: 116px; }

/* De zoekbalk-kaart is een eigen, gecentreerd component met wat body —
   geen kop of introzin erboven, dit blok draagt zichzelf. Een negatieve
   marge trekt hem half over de hero heen, als brug tussen hero en
   overzicht. Zonder hero (bijvoorbeeld tijdens filteren) trekt diezelfde
   marge hem gewoon dichter naar de nav toe; dat blijft binnen de
   116px-vrijstand van .bl-main, dus nooit een botsing. */
.bl-zoekbalk-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -56px;
  padding: 0 48px;
  margin-bottom: 44px;
}
.bl-zoekbalk-kaart {
  /* Het kaartje zelf blijft op maat (niet de volle paginabreedte); wat wél
     de volle breedte van die kaart vult is .bl-zoekrij erbinnen — de
     zoekpil rekt zich uit tot aan Fases/Mijn lijst, zie hieronder. */
  width: 100%;
  max-width: 920px;
  padding: 26px 32px;
  border: 1px solid var(--border-hi);
  border-radius: 28px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.38);
}
.bl-zoek-resultaat { text-align: center; margin-top: 16px; }

.bl-stip {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* De navigatie hergebruikt de klassen van landing.css. Twee dingen wijken af:
   daar zijn de menu-items knoppen met een uitklap, hier zijn het links naar één
   pagina, en die krijgen van de browser een onderstreping. */
.bl-root .nav-menu-btn { text-decoration: none; }
.bl-root .nav-menu-btn.bl-nav-aan { color: var(--terra); }
.bl-root .cta-nav, .bl-root .lang-toggle { text-decoration: none; }

/* Zoeken, fases en Mijn lijst delen nu één oppervlak: één rand, één
   achtergrond, in plaats van drie los ontworpen vormen op verschillende
   hoogtes naast elkaar. De balk is een kolom: de knoppenrij vast op 44px,
   en eronder — alleen als het fasepaneel openstaat — een tweede rij binnen
   dezelfde kaart, gescheiden door een hairline. Zo blijft het filter
   onzichtbaar zolang je het niet gebruikt, maar valt het nooit los van de
   balk zodra het wel opengaat. */
.bl-zoekrij {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  transition: border-color 0.3s ease, background 0.3s ease, border-radius 0.3s ease;
}
/* Bewust geen isolation/z-index hier: dat zou een eigen stapel-context maken
   die de suggestielaag (hieronder, met z-index:20) opsluit binnen déze balk,
   zodat ze niet meer boven de rails erna uit kan komen. */
.bl-zoekrij.is-open { border-radius: 24px; }
/* De hele balk reageert op focus in het zoekveld, niet alleen het veld zelf:
   dat is wat "één systeem" hier concreet betekent. */
.bl-zoekrij:has(.bl-zoekpil-veld:focus-within) {
  border-color: color-mix(in srgb, var(--terra) 50%, transparent);
  background: color-mix(in srgb, var(--bg) 65%, transparent);
}

.bl-zoekrij-rij {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 8px 0 16px;
}
/* Een zachte terracotta gloed achter de knoppenrij, zodat de balk aansluit
   bij de warme foto's en kaarten eromheen in plaats van kille UI-chrome te
   zijn. Op de rij zelf, niet op de hele (mogelijk opengeklapte) balk, anders
   trekt de gloed mee het paneel in. */
.bl-zoekrij-rij::before {
  content: '';
  position: absolute;
  inset: -10px -16px;
  background: radial-gradient(140px 70px at 22% 50%, color-mix(in srgb, var(--terra) 12%, transparent), transparent 72%);
  pointer-events: none;
}

.bl-zoekrij-scheiding {
  width: 1px;
  height: 22px;
  flex-shrink: 0;
  background: var(--border);
}

/* De zoekpil zelf draagt geen eigen rand/achtergrond meer, die komt nu van
   de gedeelde balk. Hij vult het overgebleven deel van de rij: Fases en
   Mijn lijst houden hun eigen maat, de zoekpil rekt zich uit over de rest —
   geen losse breedte-animatie bij focus meer nodig, hij is al zo breed als
   hij kan zijn. */
.bl-zoekpil { position: relative; flex: 1 1 0; min-width: 0; }
.bl-zoekpil-veld {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.bl-zoekpil-veld input:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; border-radius: 2px; }
.bl-zoekpil-veld svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--txt-faint);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.5;
}
.bl-zoekpil-veld input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  color: var(--txt);
  font-family: var(--body);
  font-size: 14px;
}
.bl-zoekpil-veld input::placeholder { color: var(--txt-dim); }

.bl-zoekpil-wis {
  flex-shrink: 0;
  border: 0;
  background: none;
  color: var(--txt-dim);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  padding: 2px;
}
.bl-zoekpil-wis:hover { color: var(--txt); }
.bl-zoekpil-wis:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; border-radius: 4px; }

/* De suggestielaag hangt los onder de zoekpil, met een hoekafronding die
   dichter bij de volronde balk zelf ligt — zo leest hij als een uitvouwing
   van de pil, niet als een los zwevend kaartje. */
.bl-zoekpil-suggesties {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  z-index: 20;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.bl-zoekpil-suggesties-label {
  font-size: 12.5px;
  color: var(--txt-dim);
  margin-bottom: 10px;
}
.bl-zoekpil-suggesties .bl-chips { margin-top: 0; }

/* Het fasepaneel klapt ín de balk open, niet erboven: een tweede rij binnen
   dezelfde kaart, met een hairline als scheiding. Geen positioning-trucs
   nodig, het is gewoon het volgende blok in de kolom. */
.bl-fase-paneel {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
}
.bl-fase-paneel .bl-chips { margin-top: 0; }
.bl-fase-paneel .bl-stip,
.bl-fase-knop .bl-stip { margin-right: 0; }

/* De faseknop: in rust een grijze knop met icoon, label en pijltje. Zodra er
   een fase gekozen is verandert de knop zelf — terracotta, met de fasekleur
   als stip in plaats van het icoon — zodat een actief filter nooit
   onzichtbaar is, ook niet met het paneel dicht. */
.bl-fase-knop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--txt-dim);
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.25s var(--easing), color 0.25s var(--easing);
}
.bl-fase-knop:hover { background: color-mix(in srgb, var(--txt) 6%, transparent); color: var(--txt); }
.bl-fase-knop:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
.bl-fase-knop.is-aan { background: var(--terra); color: #fff; }
.bl-fase-knop svg {
  width: 15px; height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bl-fase-pijl { width: 13px !important; height: 13px !important; transition: transform 0.25s var(--easing); }
.bl-fase-knop.is-open .bl-fase-pijl { transform: rotate(180deg); }
.bl-fase-knop-kort { display: none; }

@media (prefers-reduced-motion: reduce) {
  .bl-zoekrij { transition: border-color 0.3s ease, background 0.3s ease; }
}

@media (max-width: 820px) {
  .bl-zoekpil-suggesties { left: 0; right: 0; min-width: 0; }
}

@media (max-width: 480px) {
  .bl-chip-lijst-tekst { display: none; }
  .bl-chip-lijst { padding: 0 8px; }
  .bl-fase-knop-vol { display: none; }
  .bl-fase-knop-kort { display: inline; }
  .bl-fase-knop { padding: 0 10px; }
}

/* Resultaatregel en lege staat, allebei onder de zoekbalk. */
.bl-zoek-resultaat {
  margin-top: 12px;
  font-size: 14px;
  color: var(--txt-dim);
}
.bl-zoek-leeg {
  max-width: 480px;
  margin: 44px 48px 0;
}
.bl-zoek-leeg-kop {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.bl-zoek-leeg-tekst {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--txt-dim);
  margin-bottom: 18px;
}

.bl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.bl-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--txt-dim);
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all 0.25s var(--easing);
}
.bl-chip:hover { border-color: var(--border-hi); color: var(--txt); }
.bl-chip.is-aan {
  border-color: transparent;
  background: var(--terra);
  color: #fff;
}
.bl-chip:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
.bl-chip svg {
  width: 13px; height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.bl-chip.is-aan svg { fill: currentColor; }
.bl-chip-tel {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  display: grid; place-items: center;
  font-size: 11px;
}

/* Mijn lijst is een "ghost"-knop binnen de gedeelde balk: geen eigen rand
   meer, die leent hij nu van .bl-zoekrij. Aan/actief blijft wel een gevulde
   terracotta achtergrond, want dat blijft de duidelijkste manier om "aan" te
   tonen, ghost of niet. */
.bl-chip-lijst {
  height: 100%;
  flex-shrink: 0;
  white-space: nowrap;
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.bl-chip-lijst:hover { background: color-mix(in srgb, var(--txt) 6%, transparent); border-color: transparent; }
.bl-chip-lijst.is-aan { background: var(--terra); }

/* -------------------------------- grote hero --------------------------------- */

/* Randloze, Netflix-achtige hero: achtergrondfoto over de volle breedte, een
   donkere gradient die van rechtsboven (foto zichtbaar) naar linksonder
   (tekst leesbaar) loopt, content onderin. Zelfde compositie als het
   HTML-referentieontwerp, opgebouwd met bestaande Livio-kleurtokens zodat
   het licht/donker-thema van de rest van de site intact blijft. */
.bl-hero-groot {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  padding: 0 48px 56px;
  margin-bottom: 44px;
  isolation: isolate;
  overflow: hidden;
}
.bl-hero-achtergrond {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--bg);
}
.bl-hero-achtergrond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.05);
  animation: bl-heroZoom 1.8s var(--easing-deep, ease-out) forwards;
}
@keyframes bl-heroZoom { to { transform: scale(1); } }
.bl-hero-achtergrond::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 82%, transparent) 0%, color-mix(in srgb, var(--bg) 32%, transparent) 46%, transparent 76%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 45%, transparent) 0%, transparent 28%, color-mix(in srgb, var(--bg) 62%, transparent) 68%, var(--bg) 100%);
}

.bl-hero-inner {
  position: relative;
  max-width: 640px;
  opacity: 0;
  transform: translateY(16px);
  animation: bl-fadeUp 0.6s var(--easing) 0.2s forwards;
}
@keyframes bl-fadeUp { to { opacity: 1; transform: translateY(0); } }

.bl-hero-label {
  font-family: var(--body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--txt-faint);
  margin-bottom: 12px;
}
.bl-hero-fase {
  display: flex;
  align-items: center;
  font-family: var(--body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: 16px;
}
.bl-hero-artikel-titel {
  font-family: var(--display);
  font-size: clamp(32px, 4.6vw, 54px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--txt);
  margin-bottom: 16px;
}
.bl-hero-artikel-hook {
  font-size: 16px;
  line-height: 1.55;
  color: var(--txt-dim);
  max-width: 46ch;
}
.bl-hero-meta {
  margin-top: 12px;
  font-size: 13px;
  color: var(--txt-faint);
}
.bl-hero-acties {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.bl-hero-knop {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--txt);
  color: var(--bg);
  font-family: var(--body);
  font-size: 14.5px;
  font-weight: 700;
  transition: transform 0.25s var(--easing), box-shadow 0.25s var(--easing);
}
.bl-hero-knop:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.28); }
.bl-hero-voortgang {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}
.bl-hero-voortgang .bl-balk-groot { flex: 1; }
.bl-hero-resterend { flex-shrink: 0; font-size: 12px; color: var(--txt-faint); white-space: nowrap; }

/* ------------------------------------ rails --------------------------------- */

.bl-rail {
  margin: 44px 0 0;
  opacity: 0;
  transform: translateY(14px);
  animation: bl-fadeUp 0.55s var(--easing) forwards;
}

.bl-rail-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 48px;
  margin-bottom: 16px;
}

.bl-rail-titel {
  display: flex;
  align-items: center;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.bl-rail-sub {
  font-size: 13px;
  color: var(--txt-dim);
  margin-top: 4px;
  margin-left: 17px;
}

/* De faseprogressie rechts van de titel: dun, rustig, geen zwaar UI-element. */
.bl-rail-voortgang {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
  flex-shrink: 0;
}
.bl-rail-voortgang .bl-balk { flex: 1; }
.bl-rail-voortgang span:last-child {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--txt-faint);
  white-space: nowrap;
}

.bl-rail-scroller { position: relative; }

.bl-pijl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px;
  border: 1px solid var(--border-hi);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--txt);
  display: grid; place-items: center;
  transition: all 0.25s var(--easing);
}
.bl-pijl.bl-pijl-vorige { left: 14px; }
.bl-pijl.bl-pijl-volgende { right: 14px; }
.bl-pijl svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.bl-pijl:hover:not(:disabled) { border-color: var(--terra); color: var(--terra); }
.bl-pijl:disabled { opacity: 0; pointer-events: none; }

.bl-spoor {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* De schaduw van een opgetilde kaart valt buiten de rij; zonder deze lucht
     wordt hij door de overflow afgesneden. */
  padding: 6px 48px 22px;
  margin: -6px 0 -14px;
  scrollbar-width: none;
}
.bl-spoor::-webkit-scrollbar { display: none; }
.bl-spoor > * { flex: 0 0 320px; scroll-snap-align: start; }

/* Zolang er meer te scrollen valt vervaagt de rail naar rechts: een zachte hint
   dat de rij niet stopt bij de laatste zichtbare kaart. */
.bl-spoor.bl-spoor--meer {
  mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent 100%);
}

/* ------------------------------------ kaart --------------------------------- */

.bl-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

/* Kaart-easing recht van het HTML-referentieontwerp: zachter en iets trager
   inzetten dan de standaard Livio-easing, precies genoeg om premium te
   voelen zonder een veer-effect te worden. */
.bl-kaart {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--txt) 6%, transparent), color-mix(in srgb, var(--txt) 3%, transparent)), var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.bl-kaart:hover, .bl-kaart:focus-within {
  transform: translateY(-6px);
  border-color: var(--border-hi);
  box-shadow: 0 22px 48px rgba(0,0,0,0.32);
}

.bl-kaart-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.bl-kaart-beeld {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg) 70%, black);
}
.bl-kaart-beeld img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.08);
  transition: transform 0.55s ease;
}
.bl-kaart:hover .bl-kaart-beeld img { transform: scale(1.13); }
/* Zachte donkere voet onder de foto, zodat het fase-label er altijd op
   afsteekt, ongeacht hoe licht de foto zelf is. */
.bl-kaart-beeld::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, color-mix(in srgb, var(--bg) 68%, transparent));
  pointer-events: none;
}

.bl-kaart-fase {
  position: absolute;
  left: 10px; top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, #0A1612 62%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #F4EDE2;
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bl-kaart-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 18px 18px;
  flex: 1;
  min-height: 172px;
}

.bl-kaart-titel {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.bl-kaart-hook {
  font-size: 13px;
  line-height: 1.45;
  color: var(--txt-dim);
  /* Twee regels, zodat de kaarten in een rij even hoog blijven en de meta
     onderaan op één lijn staat. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bl-kaart-meta {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--txt-faint);
}
.bl-kaart-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Het balkje in de kaart: zolang je bezig bent groen, zodra het uit is
   terracotta, met een label ernaast in plaats van een los percentage. */
.bl-kaart-voortgang {
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bl-kaart-voortgang .bl-balk { flex: 1; }
.bl-kaart-voortgang-tekst {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  white-space: nowrap;
}
.bl-kaart-voortgang-tekst.is-uit { color: var(--terra); }

/* Het vinkje rechtsboven op de foto, in dezelfde hoek als het bewaarknopje.
   Staat er een vinkje, dan schuift het bewaarknopje er netjes naast in
   plaats van eroverheen. */
.bl-kaart-klaar {
  position: absolute;
  right: 10px; top: 10px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--terra);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
}
.bl-kaart-klaar svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.bl-kaart:has(.bl-kaart-klaar) .bl-bewaar { right: 44px; }

/* Het balkje: laag contrast, want het is een indicatie en geen mededeling.
   Kleurregel: groen zolang je bezig bent, terracotta zodra het artikel (of de
   fase) helemaal uit is. Terracotta is zo de kleur van "klaar", niet van
   "onderweg". */
.bl-balk {
  display: block;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  background: color-mix(in srgb, var(--txt) 10%, transparent);
}
.bl-balk-vul {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--green);
  transition: width 0.3s var(--easing);
}
.bl-balk-vul.is-uit { background: var(--terra); }
.bl-balk-groot { height: 3px; border-radius: 2px; overflow: hidden; margin: 0; max-width: 320px; }

.bl-bewaar {
  position: absolute;
  right: 10px; top: 10px;
  width: 30px; height: 30px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, #0A1612 55%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #F4EDE2;
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity 0.25s var(--easing), background 0.25s var(--easing);
}
.bl-kaart:hover .bl-bewaar,
.bl-bewaar:focus-visible,
.bl-bewaar.is-aan { opacity: 1; }
/* Op aanraakschermen bestaat hover niet; daar staat hij altijd aan. */
@media (hover: none) { .bl-bewaar { opacity: 1; } }
.bl-bewaar svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linejoin: round;
}
.bl-bewaar.is-aan { background: var(--terra); }
.bl-bewaar.is-aan svg { fill: currentColor; }

.bl-leeg {
  padding: 34px 0;
  color: var(--txt-dim);
  font-size: 14px;
}

.bl-wis {
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 999px;
  height: 34px;
  padding: 0 14px;
  color: var(--txt-dim);
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 600;
  transition: all 0.25s var(--easing);
  flex-shrink: 0;
}
.bl-wis:hover { border-color: var(--terra); color: var(--terra); }

/* ----------------------------------- artikel -------------------------------- */

.bl-leesbalk {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* Zelfde dikte als het balkje op de kaart, zodat het overduidelijk dezelfde
     voortgangstaal is en niet toevallig een andere maat. */
  height: 3px;
  z-index: 101;
  background: transparent;
}
.bl-leesbalk-vul {
  height: 100%;
  background: var(--green);
  transition: width 0.1s linear;
}
.bl-leesbalk-vul.is-uit { background: var(--terra); }

/* Randloze artikelhero, zelfde compositie als de grote hero op het overzicht:
   foto vol breed, donkere gradient naar onderen, de leeskolom trekt met een
   negatieve marge omhoog het beeld in zodat titel en foto in elkaar overlopen. */
.bl-art-hero {
  position: relative;
  height: 46vh;
  min-height: 320px;
  overflow: hidden;
}
.bl-art-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.bl-art-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 40%, transparent) 0%,
    transparent 34%,
    color-mix(in srgb, var(--bg) 62%, transparent) 72%,
    var(--bg) 100%);
}

.bl-artikel {
  position: relative;
  max-width: 680px;
  margin: -100px auto 0;
  padding: 0 24px 80px;
}

.bl-terug {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-dim);
  text-decoration: none;
  margin-bottom: 18px;
  transition: color 0.25s var(--easing), gap 0.25s var(--easing);
}
.bl-terug:hover { color: var(--terra); gap: 12px; }

.bl-art-fase {
  display: flex;
  align-items: center;
  font-family: var(--body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: 14px;
}

.bl-art-titel {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--txt);
  margin-bottom: 14px;
}

.bl-art-hook {
  font-size: 17px;
  line-height: 1.5;
  color: var(--txt-dim);
  margin-bottom: 22px;
}

.bl-art-acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
}

.bl-tag {
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--terra-soft);
  color: var(--terra);
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* De leesmaat. Rond de 68 tekens per regel, en 17px is op een telefoon het
   verschil tussen doorlezen en wegklikken. */
.bl-art-tekst {
  font-size: 17px;
  line-height: 1.72;
  color: color-mix(in srgb, var(--txt) 88%, transparent);
}
.bl-art-tekst p { margin-bottom: 22px; }
.bl-art-tekst h2 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--txt);
  margin: 34px 0 12px;
}
/* Alleen binnen een h2-sectie, dus lichter en dichter op de tekst eronder dan
   de h2 zelf. */
.bl-art-tekst h3 {
  font-family: var(--display);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--txt);
  margin: 24px 0 10px;
}
.bl-art-tekst blockquote {
  margin: 30px 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--terra);
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--txt);
}
/* De globale reset (Tailwind preflight, via globals.css) zet list-style op
   none voor elke ul/ol in de app. Zonder deze regel terug te zetten oogt een
   lijst hier als losse ingesprongen tekst, zonder bolletje of cijfer. */
.bl-art-tekst ul, .bl-art-tekst ol {
  margin: 0 0 22px;
  padding-left: 22px;
}
.bl-art-tekst ul { list-style: disc; }
.bl-art-tekst ol { list-style: decimal; }
.bl-art-tekst li { margin-bottom: 8px; }
.bl-art-tekst li::marker { color: var(--txt-faint); }
.bl-art-tekst li:last-child { margin-bottom: 0; }
.bl-art-tekst strong { font-weight: 700; color: var(--txt); }

/* --- Tabel ---
   Celtekst breekt af binnen de kolom, zodat de tabel altijd in de pagina past.
   Hier stond `white-space: nowrap` op elke cel, met een scrollbare wrapper
   eromheen als opvang. Dat kwam neer op: de kop "Extra leenruimte bij aankoop
   in 2026" mag niet afbreken, dus de tabel wordt breder dan het scherm en je
   ziet de rechterkolom half. Scrollen in een tabel is bovendien iets wat je op
   een telefoon pas ontdekt als je er per ongeluk overheen veegt.

   De wrapper houdt zijn overflow als laatste redmiddel, voor een tabel die ooit
   te veel kolommen krijgt. Bij twee kolommen komt hij niet in actie: de
   browser geeft elke kolom minstens de breedte van haar langste ondeelbare
   woord, en dat past. */
.bl-tabel-wrap {
  margin: 0 0 22px;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-inner);
}
.bl-tabel { width: 100%; border-collapse: collapse; font-size: 15px; }
.bl-tabel th, .bl-tabel td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  /* Afbreken binnen de cel; een enkel heel lang woord breekt desnoods zelf,
     zodat het de kolom nooit uit de pagina duwt. */
  white-space: normal;
  overflow-wrap: break-word;
  border-bottom: 1px solid var(--border);
}
.bl-tabel th {
  font-family: var(--display);
  font-weight: 600;
  color: var(--txt);
  background: var(--surface);
}
.bl-tabel td { color: var(--txt-dim); }
.bl-tabel tr:last-child td { border-bottom: 0; }

/* Op een telefoon telt elke pixel in de kolombreedte. Minder padding en een
   iets kleinere letter schelen genoeg om de bedragen op één regel te houden. */
@media (max-width: 520px) {
  .bl-tabel { font-size: 14px; }
  .bl-tabel th, .bl-tabel td { padding: 9px 10px; }
}

/* --- Toolplek ---
   Een duidelijk gemarkeerde plek voor een interactieve tool die nog niet
   gebouwd is, zodat de tekst er niet zomaar om heen breekt en de plek niet
   stilzwijgend verdwijnt tot de tool er wél staat. */
.bl-toolplek {
  margin: 0 0 22px;
  padding: 18px 20px;
  border: 1px dashed var(--border-hi);
  border-radius: var(--radius-nested);
  background: var(--surface-lo);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bl-toolplek-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terra);
}
.bl-toolplek-naam { font-family: var(--display); font-size: 16px; color: var(--txt); }
.bl-toolplek-omschrijving { margin: 0; font-size: 14px; line-height: 1.55; color: var(--txt-dim); }
/* Interne links (naar andere artikelen) en externe bronnen delen dezelfde
   terracotta lijn als de rest van de blog, met een onderstreping zodat een
   link ook zonder kleur herkenbaar blijft. */
.bl-art-tekst a {
  color: var(--terra);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s var(--easing);
}
.bl-art-tekst a:hover { color: var(--terra-deep); }

/* --------------------------------- lees ook ----------------------------------- */

/* Verwijst naar precies één ander artikel: dezelfde herkenning als een kaart
   op het overzicht (fasekleur, titel, leestijd), maar liggend en zonder foto
   zodat hij in de smalle leeskolom past.
   .bl-art-tekst a (terracotta, onderstreept) is specifieker dan een kale
   .bl-leesook-klasse zou zijn — daarom hier expliciet onder .bl-art-tekst
   genest, en op elk tekstkind text-decoration:none herhaald. Zonder dat wint
   de gewone linkstijl en oogt de hele kaart als lopende tekst met een
   toevallig kader eromheen. */
.bl-art-tekst .bl-leesook {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg) 45%, transparent);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s var(--easing), background 0.25s var(--easing);
}
.bl-art-tekst .bl-leesook:hover { border-color: var(--terra); background: var(--terra-soft); }
.bl-leesook-icoon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 12px;
}
.bl-leesook-icoon svg {
  width: 19px; height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bl-leesook-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bl-leesook-label {
  font-family: var(--body);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-faint);
  text-decoration: none;
}
.bl-leesook-titel { font-family: var(--display); font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--txt); text-decoration: none; }
.bl-leesook-meta { font-size: 12px; color: var(--txt-faint); text-decoration: none; }
.bl-leesook-pijl {
  flex-shrink: 0;
  width: 17px; height: 17px;
  fill: none;
  stroke: var(--txt-faint);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s var(--easing), stroke 0.25s var(--easing);
}
.bl-leesook:hover .bl-leesook-pijl { transform: translateX(3px); stroke: var(--terra); }

@media (max-width: 520px) {
  .bl-leesook { padding: 14px 16px; gap: 12px; }
  .bl-leesook-icoon { width: 36px; height: 36px; }
}

/* ------------------------------------- Noa ---------------------------------- */

.bl-noa {
  margin: 34px 0;
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--terra) 25%, transparent);
  border-left: 3px solid var(--terra);
  border-radius: 18px;
  background: linear-gradient(90deg, var(--terra-soft), transparent 70%), var(--surface);
  /* Net genoeg diepte om als eigen, premium blokje te lezen, niet als een
     banner die over de tekst heen schreeuwt. */
  box-shadow: 0 14px 32px rgba(0,0,0,0.10);
  font-size: 15px;
  line-height: 1.6;
}

.bl-noa-kop {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}
.bl-noa-foto {
  position: relative;
  width: 38px; height: 38px;
  flex-shrink: 0;
}
.bl-noa-foto img {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
  border: 1.5px solid color-mix(in srgb, var(--terra) 55%, transparent);
}
.bl-noa-dot {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--bg);
}
.bl-noa-wie { display: flex; flex-direction: column; line-height: 1.25; }
.bl-noa-wie strong { font-size: 14px; font-weight: 700; color: var(--txt); }
.bl-noa-wie em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--txt-faint);
  letter-spacing: 0.04em;
}

.bl-noa-zin { color: var(--txt-dim); margin-bottom: 16px; }

.bl-noa-label {
  font-family: var(--body);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--txt-faint);
  margin-bottom: 8px;
}

.bl-noa-lijst { list-style: none; display: flex; flex-direction: column; gap: 6px; }

.bl-noa-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 45%, transparent);
  text-decoration: none;
  color: var(--txt);
  transition: border-color 0.25s var(--easing), background 0.25s var(--easing);
}
.bl-noa-item:hover { border-color: var(--terra); background: var(--terra-soft); }
.bl-noa-item-titel { font-size: 14px; font-weight: 600; line-height: 1.3; }
.bl-noa-item-meta {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-faint);
}

/* Zelfde knop als .btn-primary in de tool (globals.css, voor Noa-flows:
   terracotta gradient, crème tekst). Bewust hier herhaald in plaats van de
   klasse .btn-primary zelf te hergebruiken: landing.css heeft toevallig ook
   al een heel andere, uitgebreidere .btn-primary (de site-brede hero-knop
   met cursor:none en een eigen hover-pseudo-element), en die zou deze knop
   ongemerkt overschrijven. Verandert het echte .btn-primary-recept ooit,
   dan moet dit blokje mee. */
.bl-noa-actie {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 14px;
  padding: 13px 22px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--terra) 0%, var(--terra-light, var(--terra)) 100%);
  color: var(--on-accent, #FDF8F0);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bl-noa-actie svg { width: 14px; height: 14px; flex-shrink: 0; }
.bl-noa-actie:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(194,107,69,0.35); }
.bl-noa-actie:active { transform: translateY(0); box-shadow: none; }

/* ------------------------------- slot-cta ------------------------------------
   De afsluitende oproep na de tekst, in dezelfde kadervorm als het Noa-blok
   hierboven maar groen: dit is geen kasmoment of Noa-moment maar een
   uitkomst. Niet te verwarren met .bl-slot hieronder, dat is het bredere
   beloftepaneel in de footer. */
.bl-slotcta {
  margin: 34px 0 0;
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--green) 28%, transparent);
  border-left: 3px solid var(--green);
  border-radius: 18px;
  background: linear-gradient(90deg, var(--green-soft), transparent 70%), var(--surface);
  box-shadow: 0 14px 32px rgba(0,0,0,0.10);
  font-size: 15px;
  line-height: 1.6;
}
.bl-slotcta-eyebrow {
  font-family: var(--body);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green-light);
  margin-bottom: 8px;
}
.bl-slotcta-titel {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--txt);
  margin: 0 0 8px;
}
.bl-slotcta-tekst { color: var(--txt-dim); margin: 0 0 16px; }
/* Zelfde vorm als .bl-noa-actie, maar terracotta blijft hier de rand en de
   tekst in plaats van een gevuld vlak: het kader draagt al het groen, een
   tweede volle kleur ernaast zou om aandacht gaan concurreren. */
.bl-slotcta-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 13px 22px;
  border: 1px solid color-mix(in srgb, var(--terra) 45%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--terra);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.bl-slotcta-knop svg, .bl-slotcta-knop span { flex-shrink: 0; }
.bl-slotcta-knop:hover { transform: translateY(-1px); background: var(--terra-soft); box-shadow: 0 6px 18px rgba(194,107,69,0.2); }
.bl-slotcta-knop:active { transform: translateY(0); box-shadow: none; }

/* ------------------------------- bronnen --------------------------------------
   Verantwoording om te checken, geen opsomming om te scannen: geen bolletjes,
   kleiner en gedempt, één regel per bron. */
.bl-bronnen { margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; }
.bl-bronnen-item {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--txt-faint);
}
.bl-bronnen-item a { color: var(--txt-dim); }

.bl-verwant { margin-top: 48px; }
.bl-verwant .bl-rail-titel { margin-bottom: 18px; }

/* ---------------------------- belofte & slot-cta ----------------------------- */

/* Eén paneel: de belofte (links) en de afsluitende oproep (rechts) delen
   hetzelfde kader in plaats van twee losse volle-breedte secties na elkaar.
   Zonder CTA (op een artikelpagina) blijft het paneel gewoon overeind met
   alleen de belofte erin. */
.bl-footer-paneel {
  max-width: 1360px;
  margin: 56px auto 0;
  padding: 48px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  display: flex;
  align-items: flex-start;
  gap: 56px;
}

.bl-footer-belofte { flex: 1.3; min-width: 0; }
.bl-belofte-kop {
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 10px;
}
.bl-belofte-sub {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--txt-dim);
  max-width: 52ch;
  margin-bottom: 28px;
}
.bl-belofte-lijst {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bl-belofte-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.bl-belofte-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--terra-soft);
  color: var(--terra);
  flex-shrink: 0;
}
.bl-belofte-icon svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.bl-belofte-item h3 {
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 3px;
}
.bl-belofte-item p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--txt-dim);
}

/* De afsluitende oproep staat als eigen kolom in hetzelfde paneel, met een
   dunne rand ervoor als scheiding in plaats van een eigen kader. */
.bl-slot {
  flex: 1;
  min-width: 0;
  padding-left: 56px;
  border-left: 1px solid var(--border);
}
.bl-slot-kop {
  font-family: var(--display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 10px;
}
.bl-slot-tekst {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--txt-dim);
  margin-bottom: 20px;
}
.bl-slot-knop {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--terra);
  color: #fff;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.3s var(--easing), box-shadow 0.3s var(--easing);
}
.bl-slot-knop:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.2); }
.bl-slot-voordelen {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--txt-faint);
}
.bl-slot-voordelen li { display: flex; align-items: center; gap: 6px; }
.bl-slot-voordelen li::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .bl-footer-paneel { flex-direction: column; gap: 32px; padding: 32px 24px; border-radius: 20px; }
  .bl-slot { padding-left: 0; border-left: 0; padding-top: 28px; border-top: 1px solid var(--border); }
}

.bl-footer { position: relative; z-index: 2; margin-top: 40px; }

/* --------------------------------- responsive ------------------------------- */

@media (max-width: 920px) {
  .bl-main { padding: 96px 0 20px; }
  .bl-art-wrap { padding-top: 96px; }
  .bl-art-hero { height: 38vh; min-height: 260px; }
  .bl-artikel { margin-top: -60px; padding: 0 20px 40px; }
  /* Ruimte voor de vaste footerbalk die landing.css vanaf hier toont. */
  .bl-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .bl-zoekbalk-wrap { margin-top: -40px; padding: 0 20px; margin-bottom: 32px; }
  .bl-zoekbalk-kaart { padding: 20px 18px; border-radius: 22px; }
  .bl-hero-groot { padding: 0 20px 40px; min-height: 60vh; }
  .bl-hero-inner { max-width: 100%; }
  .bl-rail-kop { padding: 0 20px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .bl-rail-voortgang { min-width: 0; width: 100%; }
  .bl-spoor { padding: 6px 20px 20px; }
  .bl-spoor > * { flex-basis: 264px; }
  .bl-kaart-beeld { height: 150px; }
  .bl-pijl { display: none; }
  .bl-art-tekst { font-size: 16.5px; }
  .bl-noa { padding: 18px 16px; border-radius: 16px; }
  .bl-slotcta { padding: 18px 16px; border-radius: 16px; }
}

@media (max-width: 520px) {
  .bl-raster { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .bl-kaart, .bl-kaart-beeld img, .bl-balk-vul, .bl-leesbalk-vul, .bl-hero-achtergrond img {
    transition: none;
    animation: none;
  }
  .bl-kaart:hover { transform: none; }
  .bl-hero-achtergrond img { transform: none; }
  .bl-hero-inner, .bl-rail { opacity: 1; transform: none; animation: none; }
}