/* The Next Level — stylesheet van de website.
   Kleuren komen uit de bestaande huisstijl; typografie en ruimtegebruik zijn nieuw. */

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
  /* Huisstijl */
  --navy:        #1B3A6B;
  --navy-deep:   #10233f;
  --navy-soft:   #2a4f8a;
  --orange:      #E8812A;
  --orange-dark: #cf6d1c;

  /* Neutralen — warm getint, geen kil wit */
  --paper:   #FAF9F7;
  --surface: #FFFFFF;
  --tint:    #EEF3FA;
  --ink:     #16202E;
  --muted:   #5A6B85;
  --line:    #E2E8F1;

  /* Quick Scan-scores — vier niveaus, consistent op de hele site */
  --score-kritisch: #C0392B;  /* rood   */
  --score-aandacht: #D98324;  /* oranje */
  --score-goed:     #4A7CB5;  /* blauw — bewust lichter dan navy, anders leest het als merkkleur */
  --score-troef:    #2E7D52;  /* groen  */

  --kop: 'Libre Franklin', system-ui, 'Segoe UI', sans-serif;
  --tekst: 'Source Sans 3', system-ui, 'Segoe UI', sans-serif;

  --max: 1320px;
  --radius: 14px;
  --schaduw: 0 2px 4px rgba(16,35,63,.04), 0 12px 32px rgba(16,35,63,.07);
  --schaduw-diep: 0 4px 8px rgba(16,35,63,.06), 0 24px 60px rgba(16,35,63,.13);
  --balk-hoogte: 52px;
  --banner-hoogte: 0px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Vangnet: als één element ooit te breed is voor een smal scherm, mag dat
     nooit de hele pagina horizontaal schuifbaar maken (dan valt overal rechts
     content weg in plaats van enkel dat ene element). */
  overflow-x: clip;
  /* Geen opvulling onderaan: de footer reserveert zelf de ruimte achter de
     vaste balk. Zo blijft er geen lichte strook tussen footer en balk staan. */
  font-family: var(--tekst);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--kop);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--navy);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(34px, 5vw, 56px); letter-spacing: -.025em; }
h2 { font-size: clamp(27px, 3.4vw, 40px); letter-spacing: -.02em; }
h3 { font-size: clamp(19px, 1.6vw, 22px); }

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

a { color: var(--navy); }
a:hover { color: var(--orange-dark); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
/* Zelfde breedte als .wrap — bewust gelijkgetrokken zodat de linkerkant van
   élk blok (ook de kop met het logo) op precies dezelfde lijn valt, op elke
   schermbreedte. Rasterinhoud (kaarten, citaten, prijzen, teamfoto's) krijgt
   zijn extra ademruimte niet meer via een bredere container, maar simpelweg
   omdat lopende tekst toch al smal blijft dankzij de ch-grenzen op .lead en
   .sectiekop — die groeien niet mee, dus het contrast met een raster blijft
   voelbaar zonder de linker- en rechterrand te laten verspringen. */
.wrap--breed { max-width: var(--max); }

.sectie { padding: clamp(60px, 7.5vw, 104px) 0; }
.sectie--laag { padding: clamp(30px, 3.75vw, 52px) 0; }
/* Halve top-ruimte voor de sectie die meteen op de paginakop volgt — enkel
   daar, niet tussen secties onderling en niet op de homepage (die heeft geen
   .paginakop). Anders blijft er te veel lucht tussen de navy kop en de
   eerste inhoud. */
.paginakop + .sectie { padding-top: clamp(30px, 3.75vw, 52px); }
/* Zelfde halvering, maar dan op "Onze aanpak": daar zit het ankermenu nog
   tussen de paginakop en de eerste sectie. */
.paginakop + .ankermenu + .sectie { padding-top: clamp(30px, 3.75vw, 52px); }
.sectie--tint { background: var(--tint); }
.sectie--wit { background: var(--surface); }
.sectie--navy { background: var(--navy); color: #fff; }
.sectie--navy h2, .sectie--navy h3 { color: #fff; }

/* Sectiekop */
.kicker {
  font-family: var(--kop);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 14px;
}
.sectie--navy .kicker { color: #F0A868; }

.lead {
  font-size: clamp(18px, 1.5vw, 20.5px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}
.sectie--navy .lead { color: rgba(255,255,255,.82); }

.sectiekop { max-width: 68ch; margin-bottom: clamp(32px, 4vw, 52px); }
.sectiekop--laag { margin-bottom: clamp(16px, 2vw, 26px); }
.titel-eenlijn { white-space: nowrap; }
@media (max-width: 700px) { .titel-eenlijn { white-space: normal; } }

/* ---------- Knoppen ---------- */
.knop {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--kop);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 9px;
  border: 1.5px solid transparent;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.knop:hover { transform: translateY(-1px); }
.knop--primair { background: var(--orange); color: #fff; }
.knop--primair:hover { background: var(--orange-dark); color: #fff; }
.knop--rand { border-color: rgba(255,255,255,.45); color: #fff; }
.knop--rand:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }
.knop--rand-navy { border-color: var(--line); background: var(--surface); color: var(--navy); }
.knop--rand-navy:hover { border-color: var(--navy); color: var(--navy); }

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

.tekstlink {
  font-family: var(--kop);
  font-weight: 600;
  font-size: 16px;
  color: var(--navy);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
}
.tekstlink:hover { color: var(--orange-dark); gap: 11px; transition: gap .18s ease; }

/* ---------- Header ----------
   Start doorzichtig bovenop de hero-foto, wordt wit zodra je scrolt
   (zie het scriptje onderaan elke pagina). */
header.site {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
header.site.vast {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
  box-shadow: 0 2px 20px rgba(16,35,63,.06);
}
/* Doorzichtige toestand: logo op een wit plaatje, menu in wit */
.merk img { background: #fff; border-radius: 8px; padding: 5px 11px; }
header.site.vast .merk img { background: none; }
header.site .merk .baseline { color: rgba(255,255,255,.82); text-shadow: 0 1px 6px rgba(0,0,0,.5); }
header.site.vast .merk .baseline { color: var(--muted); text-shadow: none; }
header.site nav.hoofd a:not(.knop) { color: rgba(255,255,255,.88); text-shadow: 0 1px 6px rgba(0,0,0,.45); }
header.site nav.hoofd a:not(.knop):hover { color: #fff; }
header.site nav.hoofd a.actief { color: #fff; border-bottom-color: var(--orange); }
header.site.vast nav.hoofd a:not(.knop) { color: var(--muted); text-shadow: none; }
header.site.vast nav.hoofd a:not(.knop):hover { color: var(--navy); }
header.site.vast nav.hoofd a.actief { color: var(--navy); }
/* De CTA-knop blijft in beide toestanden identiek */
header.site nav.hoofd a.knop--primair,
header.site.vast nav.hoofd a.knop--primair { background: var(--orange); color: #fff; text-shadow: none; }
header.site nav.hoofd a.knop--primair:hover { background: var(--orange-dark); }
header.site .wrap {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  min-height: 78px;
  max-width: 1320px;
}
.merk { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; }
.merk img { height: 46px; width: auto; }
.merk .baseline {
  font-family: var(--kop);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
  max-width: 220px;
}
nav.hoofd { margin-left: auto; display: flex; align-items: center; gap: clamp(12px, 1.25vw, 20px); }
nav.hoofd a {
  font-family: var(--kop);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
nav.hoofd a:hover { color: var(--navy); }
nav.hoofd a.actief { color: var(--navy); border-bottom-color: var(--orange); }
header.site .wrap > .knop { font-size: 13.5px; padding: 10px 17px; white-space: nowrap; }

/* Hamburgermenu: enkel zichtbaar onder de mobiele grens hieronder. */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: #fff;
}
header.site.vast .nav-toggle { color: var(--navy); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--navy-deep);
  color: #fff;
  overflow: hidden;
}
/* Foto over de volle breedte, onbewerkt. De leesbaarheid komt van het verloop
   hieronder, niet van een lichter gemaakt beeldbestand. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('beeld/hero-consult.jpg') 22% 45% / 140% auto no-repeat;
}
/* Donker links waar de tekst staat, volledig helder rechts waar de mensen zitten */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(16,35,63,1) 0%,
      rgba(16,35,63,.96) 22%,
      rgba(16,35,63,.7) 40%,
      rgba(16,35,63,.28) 56%,
      rgba(16,35,63,.06) 72%,
      rgba(16,35,63,0) 100%),
    linear-gradient(180deg, rgba(16,35,63,.35) 0%, rgba(16,35,63,0) 22%);
}
.hero .wrap {
  position: relative;
  z-index: 2;
  min-height: clamp(180px, 26vh, 280px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(78px + clamp(12px, 1.6vw, 20px));
  padding-bottom: clamp(12px, 1.6vw, 20px);
}
.hero h1 { color: #fff; max-width: none; margin-bottom: 0; font-size: clamp(23px, 2.8vw, 34px); text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.hero-regel { white-space: nowrap; }
.hero-logo { width: clamp(350px, 40.5vw, 518px); height: auto; display: block; margin: 26px 0 23px; }
.hero .lead { color: rgba(255,255,255,.9); max-width: 52ch; margin-bottom: 0; font-size: clamp(20px, 2.2vw, 28px); text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.hero-tekst { max-width: 620px; }

/* Het voorbeeldrapport: scores, spinnenwebben en de geschreven analyse naast
   elkaar in drie kolommen — samen moet het lezen als een volwaardig rapport,
   niet als een teaser. */
.rapport-kolommen { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.45fr); gap: 10px; align-items: stretch; }
.rapport-links, .rapport-midden { display: grid; gap: 7px; align-content: start; }
.rapport-links img, .rapport-midden img { width: 100%; border: 1px solid var(--line); border-radius: 4px; }
/* Eén kaart in deze kolom: laat ze de volledige, gestretchte kolomhoogte
   vullen in plaats van boven te blijven hangen — anders piept de foto
   erachter door onder de kaart. */
.rapport-links { grid-template-rows: 1fr; }
.rapport-links .scorepaneel { height: 100%; box-sizing: border-box; }
.rapport-rechts { overflow: hidden; border: 1px solid var(--line); border-radius: 4px; display: flex; background: var(--surface); }
/* Volledige tekst tonen, niet bijsnijden: contain in plaats van cover, anders
   valt het antwoord halverwege een zin weg. De achtergrond vult wat contain
   openlaat, zodat daar geen foto doorheen piept. */
.rapport-rechts img { width: 100%; height: 100%; object-fit: contain; object-position: top center; }
/* Dit rapportvoorbeeld heeft drie kolommen i.p.v. twee, en de tekstkolom heeft
   ruimte nodig om zonder bijsnijden tot onderaan te komen — daarom breder dan
   een gewone lightbox. */
#rapport-groot .lightbox-binnen { max-width: min(1320px, 94vw); }
.hero .knoprij { margin-bottom: 30px; }
.hero-onder {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: 15px;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.hero-onder span { display: inline-flex; align-items: center; gap: 8px; }
.hero-onder svg { flex-shrink: 0; color: var(--orange); }

/* ---------- Paginakop (binnenpagina's) ----------
   Twee keer 20% minder hoog dan de eerste opzet (~36% in totaal): bij korte
   tekst (bv. Contact) nam dit blok te veel van het scherm in, waardoor de
   eerstvolgende sectie pas na scrollen zichtbaar werd. */
.paginakop {
  background: var(--navy);
  color: #fff;
  padding-top: calc(78px + clamp(28px, 3.5vw, 50px));
  padding-bottom: clamp(28px, 3.5vw, 50px);
}
/* min-height = 2 regels: sommige koppen (bv. "Dat begrijpen we") passen op
   één regel, andere op twee — zonder dit reserveren die pagina's minder
   hoogte en springt de paginakop zichtbaar mee met de koplengte. */
.paginakop h1 { color: #fff; max-width: 20ch; font-size: clamp(30px, 4vw, 46px); min-height: 2.3em; }
.paginakop .lead { color: rgba(255,255,255,.85); max-width: 62ch; }
.paginakop .kicker { color: #F0A868; }
/* Links op donkere achtergronden: standaard blauw (var(--navy)) is er zo
   goed als onzichtbaar tot je erover hovert. Hier altijd goed leesbaar. */
.paginakop a:not(.knop), .sectie--navy a:not(.knop), .cta-blok a:not(.knop) {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.paginakop a:not(.knop):hover, .sectie--navy a:not(.knop):hover, .cta-blok a:not(.knop):hover {
  color: var(--orange);
}

/* ---------- Bezwaren (vraag → weerlegging) ---------- */
.bezwaren { display: grid; gap: 8px; }
.bezwaar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(6px, 0.65vw, 8px) clamp(20px, 2.2vw, 28px);
  box-shadow: var(--schaduw);
}
.bezwaar .vraag {
  font-family: var(--kop);
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
  margin: 0 0 10px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
.bezwaar .vraag svg { flex-shrink: 0; margin-top: 4px; color: var(--orange); }
.bezwaar p { margin: 0; color: var(--muted); font-size: 16px; }

/* ---------- Prijzen ---------- */
.prijskaart {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--schaduw);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: baseline;
}
.prijskaart .naam { font-family: var(--kop); font-weight: 600; font-size: 16.5px; color: var(--navy); flex: 1 1 260px; }
.prijskaart .prijs { font-family: var(--kop); font-weight: 800; font-size: 19px; color: var(--navy); white-space: nowrap; }
.prijskaart .duur { font-size: 14.5px; color: var(--muted); white-space: nowrap; }
.prijskaart .binnenkort { font-family: var(--kop); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--tint); padding: 4px 11px; border-radius: 100px; }
a.prijskaart { text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
a.prijskaart:hover { border-color: var(--orange); box-shadow: var(--schaduw-diep); transform: translateY(-2px); }
.prijskaart--rooster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 95px 150px 170px;
  align-items: baseline;
  gap: 6px 18px;
}
.prijskaart--rooster .naam { flex: none; }
.prijskaart--rooster .prijs { text-align: right; }
.prijskaart--rooster .duur { text-align: right; white-space: normal; }
.prijskaart--rooster .eigen-tijd {
  text-align: right;
  font-family: var(--kop); font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em; color: var(--muted);
}
@media (max-width: 700px) {
  .prijskaart--rooster { grid-template-columns: minmax(0, 1fr); }
  .prijskaart--rooster .prijs, .prijskaart--rooster .duur, .prijskaart--rooster .eigen-tijd { text-align: left; }
}

/* ---------- Perron-detail (lightbox, zelfde :target-techniek als het teammetroplan) ---------- */
.perron-lightbox-binnen {
  max-width: 620px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 40px);
}
.perron-lightbox-binnen .kaart-nr { margin-bottom: 6px; }
.perron-lightbox-binnen h3 { margin-bottom: 10px; }
.perron-lightbox-binnen .perron-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin: 0 0 18px;
  font-family: var(--kop); font-weight: 700; font-size: 15px; color: var(--navy);
}
.perron-lightbox-binnen .perron-meta .scheiding { color: var(--line); }
.perron-lightbox-binnen p { color: var(--muted); margin: 0 0 14px; }
.perron-lightbox-binnen p:last-child { margin-bottom: 0; }
.perron-lightbox-binnen ul.deliverables { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.perron-lightbox-binnen ul.deliverables li { display: flex; gap: 9px; font-size: 14.5px; color: var(--ink); line-height: 1.45; }
.perron-lightbox-binnen ul.deliverables li svg { flex-shrink: 0; margin-top: 3px; color: var(--orange); }
.lijngroep { font-family: var(--kop); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin: 15px 0 12px; }
.lijngroep:first-of-type { margin-top: 0; }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.persoon { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schaduw); }
.persoon img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--tint); }
.persoon .info { padding: 15px 17px 18px; }
.persoon .naam { font-family: var(--kop); font-weight: 700; font-size: 16px; color: var(--navy); margin: 0 0 3px; }
.persoon .rol { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.4; }

/* ---------- Plaatshouder (nog aan te leveren) ---------- */
.plaatshouder {
  border: 2px dashed var(--border, #CBD6E6);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 38px);
  background: rgba(255,255,255,.5);
}
.plaatshouder .label {
  font-family: var(--kop);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 10px;
}
.plaatshouder p { color: var(--muted); font-size: 15.5px; }
.plaatshouder p:last-child { margin-bottom: 0; }

/* ---------- Contactformulier ---------- */
.contactformulier { display: grid; gap: 18px; }
.contactformulier .rij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Honeypot tegen spambots: onzichtbaar voor mensen (ook niet via zoom/focus
   bereikbaar), maar gewoon aanwezig in de DOM zodat simpele bots hem invullen. */
.hp-veld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.veld { display: flex; flex-direction: column; gap: 7px; }
.veld label {
  font-family: var(--kop);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.veld label .verplicht { color: var(--orange); margin-left: 2px; }
.veld input, .veld textarea {
  font-family: var(--tekst);
  font-size: 15.5px;
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 9px;
  padding: 11px 13px;
  background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.veld input:focus, .veld textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(27,58,107,.12);
}
.veld textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.contactformulier .verstuur-rij { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.contactformulier .form-hint { font-size: 13px; color: var(--muted); margin: 0; }
.contactformulier .form-status { font-size: 14px; font-weight: 600; color: var(--navy); margin: 0; display: none; }
.contactformulier .form-status.zichtbaar { display: block; }
.contactformulier .form-status.fout { color: var(--score-kritisch); }
@media (max-width: 620px) { .contactformulier .rij { grid-template-columns: 1fr; } }

/* ---------- Quick Scan-blok ---------- */
.qs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.metroplan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 3vw, 40px); align-items: stretch; }
.metroplan-grid .kaart-stapel { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
.metroplan-grid .kaart-stapel .kaart { padding: clamp(7px, 0.8vw, 10px) clamp(22px, 2.4vw, 30px); }
.kaart-stapel .kaart-koprij { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 3px; }
.kaart-stapel .kaart-koprij .kaart-nr { font-size: 21px; letter-spacing: .02em; margin-bottom: 0; }
.kaart-stapel .kaart-koprij h3 { font-size: 15px; margin-bottom: 0; text-align: right; }
.kaart-stapel .kaart p { font-size: 13px; }
.qs-beeld {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schaduw-diep);
  background: var(--surface);
  border: 1px solid var(--line);
}
.qs-beeld img { width: 100%; }

/* ---------- Eerste scherm: hero + QuickScan altijd samen zichtbaar ----------
   Zelfde techniek als de live site: de wrapper vult exact het beeldscherm
   (de header staat fixed en telt dus niet mee), de QuickScan-band houdt een
   vaste minimumhoogte, en de hero-foto krimpt of groeit met wat overblijft.
   Zo hoeft een bezoeker nooit te scrollen om de QuickScan te zien. */
.eerste-scherm { min-height: calc(100vh - var(--balk-hoogte) - var(--banner-hoogte)); display: flex; flex-direction: column; }
.eerste-scherm .hero { flex: 1 1 auto; display: flex; min-height: 260px; }
.eerste-scherm .hero .wrap { flex: 1; min-height: 0; }
.qs-eerste-scherm { flex: none; padding: clamp(14px, 2vw, 24px) 0; }
.qs-eerste-scherm .qs-grid { gap: clamp(24px, 3vw, 40px); }
.qs-eerste-scherm .kicker { margin-bottom: 8px; }
.qs-eerste-scherm h2 { font-size: clamp(21px, 2.4vw, 30px); margin-bottom: .3em; }
.qs-eerste-scherm .lead { margin-bottom: 12px; max-width: 54ch; }
.qs-eerste-scherm .scorelegende { margin-bottom: 0; }

/* Het voorbeeldrapport als klein, schuin "neergelegd" kaartje — dezelfde
   inhoud als op de Quick Scan-pagina, gewoon verkleind. Erop klikken brengt
   je naar het volledige rapport. */
.qs-voorbeeld { display: block; text-decoration: none; }
.qs-voorbeeld-kader {
  height: 230px;
  border: 3px solid var(--orange);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--schaduw-diep);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
}
.qs-voorbeeld:hover .qs-voorbeeld-kader { transform: scale(1.03); box-shadow: 0 22px 44px rgba(16,35,63,.2); }
/* Het echte rapportblok op ware grootte getekend, dan verkleind tot kaartje:
   zo blijft de tegel altijd gelijk met wat je te zien krijgt na het klikken.
   Pas op volle grootte (in de lightbox) leesbaar — hier is het een miniatuur. */
.qs-mini-rapport {
  width: 1160px;
  transform: scale(.414);
  transform-origin: top left;
  pointer-events: none;
}
@media (max-width: 640px) {
  .qs-voorbeeld-kader { height: 210px; max-width: 320px; }
  .qs-mini-rapport { transform: scale(.276); }
}

.lightbox { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(16,35,63,.85); padding: 40px 20px; align-items: center; justify-content: center; }
.lightbox:target { display: flex; }
.lightbox-binnen { position: relative; max-width: min(1100px, 94vw); max-height: 90vh; overflow: auto; }
.lightbox-binnen img { width: 100%; border-radius: var(--radius); display: block; }
.lightbox-terug {
  position: sticky; top: 0; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 12px; padding: 8px 18px;
  border-radius: 100px; background: var(--surface); color: var(--navy);
  font-family: var(--kop); font-weight: 600; font-size: 14.5px;
  text-decoration: none; box-shadow: var(--schaduw-diep);
}
.qs-voorbeeld-hint {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--navy);
}

/* ---------- Interactief teammetroplan (Wie zijn wij) ---------- */
.metroplan-team { position: relative; max-width: 1200px; margin: 0 auto; }
.metroplan-team > img { width: 100%; display: block; border-radius: var(--radius); border: 1px solid var(--line); }
.metroplan-team-stip {
  position: absolute;
  width: 10.2%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: block;
  z-index: 1;
}
.metroplan-team-stip:hover,
.metroplan-team-stip:focus { z-index: 20; }
.metroplan-team-stip img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--orange);
  box-shadow: var(--schaduw);
  display: block;
  transition: transform .15s ease, box-shadow .15s ease;
  background: var(--surface);
}
.metroplan-team-stip:hover img,
.metroplan-team-stip:focus img { transform: scale(1.15); box-shadow: var(--schaduw-diep); }
.metroplan-team-stip .tip {
  position: absolute;
  bottom: 112%; left: 50%;
  transform: translate(-50%, 4px);
  background: var(--navy);
  color: #fff;
  padding: 7px 13px;
  border-radius: 8px;
  font-family: var(--kop);
  font-size: 12.5px;
  line-height: 1.35;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 5;
}
.metroplan-team-stip .tip strong { display: block; font-size: 13.5px; }
.metroplan-team-stip:hover .tip,
.metroplan-team-stip:focus .tip { opacity: 1; transform: translate(-50%, 0); }
.metroplan-team-hint { text-align: center; margin-top: 16px; font-size: 13.5px; color: var(--muted); }

.persoon-lightbox-binnen {
  max-width: 760px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 40px);
  transition: max-width .3s ease;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(24px, 4vw, 36px);
  grid-template-areas:
    "terug terug"
    "foto foto"
    "naam naam"
    "rol rol"
    "tekst1 metroplan"
    "meer meer"
    "linkedin linkedin";
}
.persoon-lightbox-binnen:has(.meer-toggle[open]) {
  max-width: 1100px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "terug terug terug"
    "foto foto foto"
    "naam naam naam"
    "rol rol rol"
    "tekst1 metroplan tekst2"
    "meer meer meer"
    "linkedin linkedin linkedin";
}
.persoon-lightbox-binnen .profiel-links { display: contents; }
.persoon-lightbox-binnen .lightbox-terug { grid-area: terug; }
.persoon-lightbox-binnen .profiel-rechts { display: none; }
.persoon-lightbox-binnen:has(.meer-toggle[open]) .profiel-rechts { display: block; grid-area: tekst2; align-self: start; }
.profiel-links > p:not(.rol) { grid-area: tekst1; align-self: start; }
.profiel-metroplan-blok { grid-area: metroplan; margin-bottom: 12px; align-self: start; }
.persoon-lightbox-binnen .meer-toggle { grid-area: meer; }
.persoon-lightbox-binnen .linkedin { grid-area: linkedin; }
.profiel-metroplan-blok img.mini-metroplan {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.persoon-lightbox-binnen .meer-toggle summary .pijl { transform: rotate(-90deg); }
.persoon-lightbox-binnen .meer-toggle[open] summary .pijl { transform: rotate(0deg); }
.persoon-lightbox-binnen img.persoon-foto-groot {
  grid-area: foto;
  width: 220px; height: 220px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--orange);
  display: block;
  margin: 0 auto 16px;
}
.persoon-lightbox-binnen h3 { grid-area: naam; text-align: center; margin-bottom: 4px; }
.persoon-lightbox-binnen .rol {
  grid-area: rol;
  text-align: center;
  color: var(--orange);
  font-family: var(--kop);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 18px;
}
.persoon-lightbox-binnen p { margin: 0 0 12px; color: var(--muted); }
.persoon-lightbox-binnen details summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--kop);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--orange);
}
.persoon-lightbox-binnen details summary::-webkit-details-marker { display: none; }
.persoon-lightbox-binnen details summary .pijl { transition: transform .2s ease; }
.persoon-lightbox-binnen details[open] summary .pijl { transform: rotate(180deg); }
.persoon-lightbox-binnen details p { margin-top: 10px; }
.persoon-lightbox-binnen .linkedin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-top: 16px;
  border-radius: 50%; background: var(--navy); color: #fff;
  font-family: var(--kop); font-weight: 700; font-size: 13px;
  text-decoration: none;
}
@media (max-width: 640px) {
  .metroplan-team-stip { width: 13%; }
  .metroplan-team-stip .tip { display: none; }
}
.qs-voorbeeld-hint svg { color: var(--orange); }

.qs-voet {
  margin-top: 18px;
  font-size: 14.5px;
  color: var(--muted);
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.qs-voet svg { flex-shrink: 0; margin-top: 3px; color: var(--groen); }

.scorelegende { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.scorelegende li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: var(--kop);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 6px 15px 6px 11px;
}
.stip { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }

/* ---------- Vertrouwensbalk ---------- */
.vertrouwen { background: var(--surface); border-block: 1px solid var(--line); padding: 17px 0; }
.vertrouwen .wrap { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.vertrouwen .claim {
  font-family: var(--kop);
  font-size: 16px;
  font-weight: 600;
  color: #8A94A6;
  line-height: 1.4;
}
.logostrip { display: flex; flex-wrap: wrap; gap: 12px; flex: 1; min-width: 260px; }
.logovak {
  flex: 1 1 96px;
  height: 46px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: #9AA8BD;
  font-family: var(--kop);
  letter-spacing: .04em;
}
/* Rollende klantenlogo's: toont ca. 4 stuks, schuift elke 2s één plaats op.
   Altijd in kleur; band staat stil zolang de muis erover hovert. */
.logoband { width: 100%; max-width: 1200px; overflow: hidden; }
.logoband-track { display: flex; align-items: center; gap: 40px; width: max-content; }
.logoband-item { flex: 0 0 auto; width: 260px; height: 92px; display: flex; align-items: center; justify-content: center; }
.logoband-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ---------- Kaarten ---------- */
.kaarten { display: grid; gap: clamp(16px, 2vw, 24px); }
.kaarten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kaarten--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kaarten--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.kaart {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 2.4vw, 30px);
  box-shadow: var(--schaduw);
}
.kaart h3 { margin-bottom: 8px; }
.kaart p { font-size: 15.5px; color: var(--muted); margin: 0; }

.kaart-nr {
  font-family: var(--kop);
  font-size: 13px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: .1em;
  margin-bottom: 12px;
}

/* ---------- Vergelijking ---------- */
.vergelijk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.vergelijk .kolom {
  border-radius: var(--radius);
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line);
  background: var(--surface);
}
.vergelijk .kolom--wij {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: var(--schaduw-diep);
}
.vergelijk .kolom--wij h3 { color: #fff; }
.vergelijk h3 { font-size: 18px; margin-bottom: 16px; }
.vergelijk ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.vergelijk li { font-size: 15.5px; color: var(--muted); display: flex; gap: 10px; line-height: 1.5; }
.vergelijk .kolom--wij li { color: rgba(255,255,255,.86); }
.vergelijk li svg { flex-shrink: 0; margin-top: 4px; }

/* ---------- Pijnpunten ---------- */
.citaten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* In een brede sectie passen er drie naast elkaar — dat scheelt fors in lengte
   zonder de leesbaarheid te schaden: elk citaat heeft toch al korte regels. */
@media (min-width: 1120px) { .wrap--breed .citaten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.citaat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: 4px 12px 12px 4px;
  padding: 10px 24px;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  min-height: 75px;
  position: relative;
  cursor: default;
}
/* Oplossing verschijnt als pop-up bij hover/focus op de tegel, en
   verdwijnt zodra de muis (of focus) de tegel weer verlaat. Test: enkel
   op de eerste tegel ingevuld, de rest volgt zodra de teksten klaar zijn. */
.citaat-popup {
  position: absolute;
  left: -20px;
  right: -20px;
  bottom: calc(100% + 10px);
  background: var(--navy-deep);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 16px 36px rgba(16,35,63,.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 40;
  text-align: left;
  pointer-events: none;
}
.citaat:hover .citaat-popup,
.citaat:focus .citaat-popup,
.citaat:focus-within .citaat-popup {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.citaat-popup-label {
  font-family: var(--kop);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--orange);
  margin: 0 0 4px;
}
.citaat-popup p { font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.92); margin: 0 0 14px; }
.citaat-popup p:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════
   METROPLAN ALS VORMTAAL
   Het metroplan is het eigen idee van dit merk. Het is hier geen
   plaatje in een kader, maar de vormtaal zelf: elke reeks stappen
   is een lijn, elk stapnummer een station.
   ══════════════════════════════════════════════════════════════ */

/* Sectiescheiding: een stuk metrolijn */
.metrolijn { display: flex; align-items: center; gap: 0; margin: 6px 0 34px; }
.metrolijn .halte {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--surface); border: 4px solid var(--orange);
  flex-shrink: 0; box-sizing: content-box;
}
.metrolijn .spoor { height: 4px; background: var(--orange); opacity: .32; flex: 1; }
.sectie--navy .metrolijn .halte { background: var(--navy); }

/* ---------- Verticale route: stappen als stations op één lijn ---------- */
.stappen { display: grid; gap: 22px; position: relative; }
.stappen::before {
  content: '';
  position: absolute;
  left: 18px; top: 20px; bottom: 20px;
  width: 4px;
  background: var(--orange);
  opacity: .3;
  border-radius: 2px;
}
.stap { display: flex; gap: 20px; align-items: flex-start; position: relative; }
.stap-nr {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--paper);
  border: 4px solid var(--orange);
  color: var(--navy);
  font-family: var(--kop);
  font-weight: 700;
  font-size: 14px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}
.sectie--wit .stap-nr { background: var(--surface); }
.sectie--tint .stap-nr { background: var(--tint); }
.sectie--navy .stap-nr { background: var(--navy); color: #fff; }
.cta-blok .stap-nr { background: var(--navy); color: #fff; }
.stap h3 { font-size: 17.5px; margin-bottom: 3px; }
.stap p { font-size: 15.5px; color: var(--muted); margin: 0; }
.sectie--navy .stap p, .cta-blok .stap p { color: rgba(255,255,255,.78); }

/* ---------- Horizontale route: een traject als metrolijn ---------- */
.route {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  position: relative;
  gap: 0;
}
.route::before {
  content: '';
  position: absolute;
  left: 16px; right: 16px; top: 15px;
  height: 4px;
  background: var(--orange);
  opacity: .3;
}
.route .halte { position: relative; padding: 52px 22px 0 0; display: flex; flex-direction: column; }
.route .halte-nr {
  position: absolute;
  top: 0; left: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--paper);
  border: 4px solid var(--orange);
  display: grid;
  place-items: center;
  font-family: var(--kop);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--navy);
}
.sectie--wit .route .halte-nr { background: var(--surface); }
.sectie--tint .route .halte-nr { background: var(--tint); }
.sectie--navy .route .halte-nr { background: var(--navy); color: #fff; }
.route h3 { font-size: 17px; margin-bottom: 6px; }
.route p { font-size: 15px; color: var(--muted); margin: 0; }
.sectie--navy .route p { color: rgba(255,255,255,.78); }
.cta-blok .route .halte-nr { background: var(--navy); color: #fff; }
.cta-blok .route h3 { color: #fff; }
.cta-blok .route p { color: rgba(255,255,255,.78); }

/* Altijd-verticale variant (los van schermbreedte), voor korte routes van 2-3 stappen. */
.route--verticaal { grid-auto-flow: row; gap: 26px; }
.route--verticaal::before { left: 15px; right: auto; top: 18px; bottom: 18px; width: 4px; height: auto; }
.route--verticaal .halte { padding: 0 0 0 54px; }
.route--verticaal .halte-nr { top: -2px; }

.route .halte details { margin-top: auto; padding-top: 10px; }
.route .halte summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--kop);
  font-weight: 700;
  font-size: 13px;
  color: var(--orange);
}
.route .halte summary::-webkit-details-marker { display: none; }
.route .halte summary .pijl { transition: transform .2s ease; flex-shrink: 0; }
.route .halte details[open] summary .pijl { transform: rotate(180deg); }

/* Uitgeklapte 'meer'-tekst loopt door over de resterende breedte rechts van de
   stap (--span kolommen), zodat lange tekst niet in één smalle kolom staat. */
.route .halte details { position: relative; }
.route .halte details .meer-tekst {
  position: absolute;
  z-index: 3;
  top: 100%;
  left: 0;
  width: calc(var(--span, 1) * 100%);
  padding: 8px 22px 22px 0;
  background: var(--paper);
}
.sectie--wit .route .halte details .meer-tekst { background: var(--surface); }
.sectie--tint .route .halte details .meer-tekst { background: var(--tint); }
.sectie--navy .route .halte details .meer-tekst,
.cta-blok .route .halte details .meer-tekst { background: var(--navy); }
.route .halte details .meer-tekst p + p { margin-top: 12px; }

/* Ruimte onderaan de lijn reserveren zodat de uitgeklapte tekst niet over de
   volgende sectie valt. Smallere stappen klappen open in een smallere kolom,
   dus die tekst loopt hoger op en heeft meer gereserveerde ruimte nodig. */
.route:has(#proces-1[open]) { padding-bottom: 140px; }
.route:has(#proces-2[open]) { padding-bottom: 190px; }
.route:has(#proces-3[open]) { padding-bottom: 160px; }
.route:has(#proces-4[open]) { padding-bottom: 340px; }
.route:has(#proces-5[open]) { padding-bottom: 420px; }
.route:has(#proces-6[open]) { padding-bottom: 460px; }

/* ---------- Scorebalken in code, niet als schermafdruk ---------- */
.scorepaneel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 20px 22px 22px;
}
.scorepaneel-kop {
  font-family: var(--kop);
  font-size: 11px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}
.scoregroep {
  font-family: var(--kop);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--navy);
  margin: 18px 0 9px;
}
.scoregroep:first-of-type { margin-top: 14px; }
/* De balk krijgt een harde minimumbreedte: zonder die minmax duwen de naam,
   de score en de badge de balk tot nul in een smalle kolom. */
.scorerij {
  display: grid;
  grid-template-columns: minmax(64px, .9fr) minmax(54px, 2.2fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 11.5px;
}
.scorenaam { font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scorebalk { height: 8px; border-radius: 4px; background: #EDF1F7; overflow: hidden; }
/* Vaste breedte, geen animatie: de balk moet er altijd staan, ook zonder
   JavaScript en ook wanneer animaties uitstaan. Beweging voegt hier niets toe. */
.scorebalk i { display: block; height: 100%; border-radius: 4px; width: var(--w); }
.scorewaarde { font-family: var(--kop); font-weight: 700; font-size: 11.5px; color: var(--navy); text-align: right; white-space: nowrap; }
.scorebadge {
  font-size: 9.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 100px;
  white-space: nowrap;
}
.badge--kritisch { background: #FBE9E7; color: #A93226; }
.badge--aandacht { background: #FDF0E0; color: #A9651A; }
.badge--goed     { background: #E9F0F9; color: #3A6796; }
.badge--troef    { background: #E7F4EC; color: #266845; }
.scorelegende--klein { margin: 16px 0 0; font-size: 11.5px; gap: 6px; }
.scorelegende--klein li { padding: 3px 10px 3px 8px; font-size: 11.5px; font-weight: 500; }
.scorelegende--klein .stip { width: 8px; height: 8px; }

/* ---------- Geschreven analyse (rapport-rechts): tekst in code, niet als
   schermafdruk — zelfde reden en patroon als de scorebalken hierboven. ---------- */
.analysepaneel { flex: 1 1 auto; min-width: 0; padding: 17px 18px 18px; font-size: 12px; line-height: 1.48; }
.analyse-item { padding-bottom: 11px; margin-bottom: 11px; border-bottom: 1px solid var(--line); }
.analyse-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.analyse-kop { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.analyse-kop h4 { margin: 0; font-size: 13.5px; color: var(--navy); flex: 1 1 auto; }
.analyse-waarde { font-family: var(--kop); font-weight: 700; font-size: 11px; color: var(--muted); white-space: nowrap; }
.analysepaneel .scorebadge { font-size: 9px; padding: 1.5px 6px; }
.analyse-bar { height: 5px; border-radius: 3px; background: #EDF1F7; overflow: hidden; margin-bottom: 9px; }
.analyse-bar i { display: block; height: 100%; border-radius: 3px; width: var(--w); }
.analyse-tekst { margin: 0 0 6px; color: var(--ink); }
.analyse-toggle { margin: 0; font-size: 11px; font-weight: 600; color: var(--navy); }
.analyse-sub { margin-top: 10px; }
.analyse-sub-kop { font-family: var(--kop); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 3px; }
.analyse-sub p { margin: 0 0 7px; font-size: 11.5px; color: var(--ink); }

/* ---------- Wat het oplevert ---------- */
.winst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 36px; list-style: none; margin: 0; padding: 0; }
.winst li { display: flex; gap: 13px; font-size: 17px; line-height: 1.5; }
.winst svg { flex-shrink: 0; margin-top: 5px; color: var(--score-troef); }

/* ---------- Cijfers ---------- */
.cijfers { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 64px); }
/* Eén groot cijfermoment per pagina breekt het ritme van de kaartjes */
.cijfers--groot { gap: clamp(32px, 6vw, 88px); }
.cijfers--groot .getal { font-size: clamp(52px, 7vw, 88px); letter-spacing: -.04em; }
.cijfers--groot .label { font-size: 16px; margin-top: 10px; }
.cijfer .getal {
  font-family: var(--kop);
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 800;
  line-height: 1;
  color: var(--navy);
  letter-spacing: -.03em;
}
.sectie--navy .cijfer .getal { color: #fff; }
.cijfer .label { font-size: 15px; color: var(--muted); margin-top: 8px; }
.sectie--navy .cijfer .label { color: rgba(255,255,255,.75); }

/* ---------- Afsluitende CTA ---------- */
.cta-blok {
  background: var(--navy);
  border-radius: clamp(16px, 2vw, 22px);
  color: #fff;
  padding: clamp(34px, 5vw, 64px);
  box-shadow: var(--schaduw-diep);
}
.cta-blok h2 { color: #fff; }
.cta-blok .lead { color: rgba(255,255,255,.82); }

/* ---------- Footer ----------
   Een echte footer onder de vaste balk: hier hoort wat nergens anders past —
   volledige sitemap, bedrijfsgegevens, juridische links. */
.voet {
  background: var(--navy-deep);
  color: rgba(255,255,255,.72);
  /* De onderste ruimte loopt door tot achter de vaste balk, anders blijft daar
     een lichte strook zichtbaar tussen footer en balk. */
  padding: clamp(44px, 5vw, 68px) 0 calc(clamp(28px, 3vw, 40px) + var(--balk-hoogte));
  font-size: 15px;
}
.voet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.voet h3 {
  font-family: var(--kop);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #F0A868;
  margin: 0 0 14px;
}
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.voet a { color: rgba(255,255,255,.78); text-decoration: none; }
.voet a:hover { color: #fff; }
.voet-merk img { height: 42px; width: auto; background: #fff; border-radius: 8px; padding: 5px 12px; margin-bottom: 16px; }
.i-depot-logo { height: 52px; width: auto; margin-top: 6px; filter: url(#verwijderWit); }
.voet-merk p { font-size: 14.5px; line-height: 1.6; max-width: 34ch; margin: 0; }
.voet-slot {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  padding-top: 22px;
  font-size: 13.5px;
  color: rgba(255,255,255,.55);
}
.voet-slot .rechts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 20px; }
@media (max-width: 860px) {
  .voet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .voet-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Ankermenu binnen een lange pagina ---------- */
.ankermenu {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 22px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  background: rgba(250,249,247,.94);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 78px;
  z-index: 20;
  font-size: 14.5px;
}
/* De vaste header (78px) + deze sticky balk (~53px) bedekken samen de
   bovenkant van het scherm; elk ankerdoel moet daarom een stuk lager
   uitkomen dan zijn eigen bovenkant, anders verdwijnt de titel eronder. */
#metroplan, #valencia, #principes, #proces, #diagnose, #versnellers, #ai, #niet-werkt {
  scroll-margin-top: 135px;
}
.ankermenu .op-deze-pagina {
  font-family: var(--kop); font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.ankermenu a {
  color: var(--navy); text-decoration: none; font-weight: 600;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.ankermenu a:hover { border-bottom-color: var(--orange); }

/* ---------- Uitklapbare vraag (accordeon zonder JavaScript) ---------- */
.bezwaar details > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--kop);
  font-weight: 700;
  font-size: 17.5px;
  color: var(--navy);
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.bezwaar details > summary::-webkit-details-marker { display: none; }
.bezwaar details > summary .pijl {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--orange);
  transition: transform .2s ease;
}
.bezwaar details[open] > summary .pijl { transform: rotate(180deg); }
.bezwaar details > summary .stationstip {
  flex-shrink: 0; margin-top: 5px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--surface); border: 4px solid var(--orange);
  box-sizing: content-box;
}
.bezwaar details p { margin: 14px 0 0 30px; color: var(--muted); font-size: 16px; }

/* ---------- Vaste onderbalk ---------- */
.onderbalk {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 60;
  height: var(--balk-hoogte);
  background: var(--navy);
  color: rgba(255,255,255,.9);
  display: flex;
  align-items: center;
  font-size: 14px;
}
.onderbalk .wrap {
  max-width: 1320px;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 30px);
  width: 100%;
  flex-wrap: wrap;
}
.onderbalk a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.onderbalk a:hover { color: var(--orange); }
.onderbalk .naam { font-weight: 600; }
.onderbalk .rechts { margin-left: auto; display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); color: rgba(255,255,255,.6); font-size: 13px; }

/* ---------- Cookiebanner ---------- */
.cookiebanner {
  position: fixed;
  left: 0; right: 0;
  bottom: var(--balk-hoogte);
  z-index: 70;
  background: var(--navy-deep);
  color: rgba(255,255,255,.92);
  box-shadow: 0 -6px 20px rgba(0,0,0,.18);
}
.cookiebanner .wrap {
  max-width: 1320px;
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 30px);
  flex-wrap: wrap;
}
.cookiebanner p { margin: 0; font-size: 14px; flex: 1 1 320px; }
.cookiebanner a { color: #fff; text-decoration: underline; }
.cookiebanner-knoppen { display: flex; gap: 10px; flex: 0 0 auto; }
.cookiebanner .knop { padding: 9px 18px; font-size: 14px; }

/* ---------- Bouwnotities (hoort niet bij het ontwerp) ---------- */
.notities {
  background: #1d2634;
  color: #C6D0DE;
  padding: clamp(40px, 5vw, 64px) 0;
  font-size: 15px;
}
.notities h2 { color: #fff; font-size: 24px; }
.notities h3 { color: #F0A868; font-size: 15px; text-transform: uppercase; letter-spacing: .08em; margin: 28px 0 10px; }
.notities .waarschuwing {
  border-left: 3px solid var(--orange);
  padding: 4px 0 4px 16px;
  margin: 0 0 22px;
  color: #E4EAF3;
}
.notities ul { margin: 0; padding-left: 0; display: grid; gap: 8px; list-style: none; }
.notities ul li { display: flex; gap: 10px; align-items: baseline; }
.notities code {
  background: rgba(255,255,255,.09);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 13.5px;
}
.notities .beslissing { color: #FFC98A; font-weight: 600; }

/* Vinkjes-balk, toegevoegd via bouwnotities.js */
.notities-balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 22px;
  padding: 10px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  font-size: 13.5px;
}
.notities-telling { color: #9FB0C6; margin-right: auto; }
.notities-balk button {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #1d2634;
  background: var(--orange);
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}
.notities-balk button:hover { background: #FFC98A; }
.notities-balk .notities-wis {
  background: transparent;
  color: #C6D0DE;
  border: 1px solid rgba(255,255,255,.25);
}
.notities-balk .notities-wis:hover { border-color: var(--orange); color: var(--orange); }
.notities-vink {
  flex: 0 0 auto;
  margin-top: 3px;
  width: 15px;
  height: 15px;
  accent-color: var(--orange);
  cursor: pointer;
}
.notities li.klaar { opacity: .45; text-decoration: line-through; text-decoration-color: rgba(198,208,222,.6); }

/* ---------- Responsief ---------- */
/* Acht menu-items plus de knop: de baseline naast het logo moet eerder wijken. */
@media (max-width: 1340px) {
  .merk .baseline { display: none; }
}
@media (max-width: 1120px) {
  nav.hoofd { gap: 11px; }
  nav.hoofd a { font-size: 12.5px; }
}
@media (max-width: 1000px) {
  /* Op smallere schermen zou de tekst over de mensen vallen: dan een egaal
     donker vlak over de hele foto in plaats van een verloop naar rechts. */
  .hero::after {
    background: linear-gradient(180deg, rgba(16,35,63,.88) 0%, rgba(16,35,63,.8) 100%);
  }
  .hero::before { background-position: 28% 26%; }
  .hero h1, .hero .lead { max-width: none; }
  .rapport-kolommen { grid-template-columns: minmax(0, 1fr); }
  .rapport-rechts { max-height: 340px; }
}
@media (max-width: 900px) {
  .qs-grid, .metroplan-grid { grid-template-columns: minmax(0, 1fr); }
  .kaarten--4, .kaarten--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vergelijk { grid-template-columns: minmax(0, 1fr); }
  .citaten { grid-template-columns: minmax(0, 1fr); }
  /* De "Gratis Quick Scan"-knop blijft altijd zichtbaar in de balk (staat nu
     los van nav.hoofd, als rechtstreeks kind van .wrap); nav.hoofd zelf wordt
     het uitklapbare menu met de gewone links, dicht tot je op het
     hamburgericoon tikt. */
  header.site .wrap > .knop { margin-left: auto; }
  .nav-toggle { display: flex; }
  nav.hoofd {
    position: fixed;
    top: 78px;
    left: 0;
    right: 0;
    z-index: 49;
    margin-left: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px clamp(20px, 4vw, 40px) 20px;
    background: var(--navy-deep);
    max-height: calc(100vh - 78px);
    overflow-y: auto;
    display: none;
  }
  nav.hoofd.open { display: flex; }
  nav.hoofd a:not(.knop) {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  nav.hoofd a:not(.knop):last-of-type { border-bottom: none; }
  /* Het paneel is altijd donkerblauw, ongeacht of de header zelf transparant
     of wit (".vast") staat — de linktekst moet dus altijd licht blijven. */
  header.site nav.hoofd a:not(.knop),
  header.site.vast nav.hoofd a:not(.knop) { color: rgba(255,255,255,.88); text-shadow: none; }
  header.site nav.hoofd a.actief,
  header.site.vast nav.hoofd a.actief { color: #fff; border-bottom-color: var(--orange); }
}
@media (max-width: 900px) {
  /* De horizontale route klapt naar een verticale lijn */
  .route { grid-auto-flow: row; gap: 22px; }
  .route::before { left: 15px; right: auto; top: 18px; bottom: 18px; width: 4px; height: auto; }
  .route .halte { padding: 0 0 0 54px; }
  .route .halte-nr { top: -2px; }
}
@media (max-width: 700px) {
  .winst { grid-template-columns: minmax(0, 1fr); }
  .scorerij { grid-template-columns: minmax(76px, 1fr) minmax(0, 1.6fr) 36px; }
  .scorebadge { display: none; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .kaarten--3, .kaarten--4, .kaarten--5 { grid-template-columns: minmax(0, 1fr); }
  .onderbalk { font-size: 12.5px; }
  .onderbalk .rechts { display: none; }
}
/* Op echte telefoonbreedte (bv. 390px) is logo + "Gratis Quick Scan"-knop
   samen te breed voor de header — allebei verkleinen tot ze weer naast
   elkaar passen zonder over de rand te lopen. */
/* Kon niet visueel geverifieerd worden (headless Chrome rendert op dit
   toestel nooit smaller dan ±492px, ook al vraag je minder) — zuiver
   rekenkundige voorzorg voor echte smalle telefoons (bv. 375-390px), waar
   logo + knop anders krap tegen elkaar zouden komen. Test dit ooit op een
   echt toestel of via DevTools-responsive-modus vóór je hier blind op
   vertrouwt. */
@media (max-width: 430px) {
  header.site .wrap { gap: 10px; }
  .merk img { height: 34px; }
  nav.hoofd .knop { font-size: 12px; padding: 8px 12px; }
}