/* ==========================================================================
   Componenten
   Volgorde: header · knoppen · badges · kaarten · bouwstenen · footer · form
   ========================================================================== */

/* ---- Icoon ------------------------------------------------------------- */

.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;
   stroke-linecap:round;stroke-linejoin:round}
.i--sm{width:16px;height:16px}
.i--lg{width:24px;height:24px}

/* Ronde icoonchip — het terugkerende vormsignaal van het merk */
.chip-i{
  width:44px;height:44px;flex:none;display:grid;place-items:center;
  border-radius:var(--radius-circle);
  background:var(--neutral-100);color:var(--teal-500);
}
.chip-i--lime{background:var(--lime-100);color:var(--lime-600)}
.chip-i--onDark{background:rgba(255,255,255,.14);color:#fff}

/* ---- Header ------------------------------------------------------------ */

/* De header is een zwevende capsule, ingezet van de rand. Op pagina's met een
   volvlakhero staat hij fixed zodat hij over het beeld zweeft; elders sticky. */
.header{position:sticky;top:0;z-index:40;padding:14px 0}
.has-hero .header{position:fixed;left:0;right:0;top:0}

.nav{
  /* Merk links, links in het midden, knop rechts. Een grid van drie kolommen
     en geen flex: met flex hangt het midden af van de breedte van het merk en
     de knop, en dan staat de navigatie net niet in het midden. De buitenste
     kolommen zijn allebei 1fr, dus het midden is het midden van de balk. */
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-6);
  /* Rondom 9px, en de inspringing van het merk als eigen marge. De padding was
     links 24px en rechts 9px, en dan ligt het midden van de contentbox 7px
     naast het midden van de balk. Dat zie je bij een gecentreerd menu. */
  padding:9px;
  /* Vol wit, geen glas: over een donkere hero wordt translucent wit grijs. */
  background:var(--surface-card);
  border-radius:var(--radius-pill);
  box-shadow:0 1px 2px rgba(6,42,58,.05),0 12px 32px rgba(6,42,58,.10);
  transition:box-shadow var(--dur-base) var(--ease-standard);
}
.header.is-scrolled .nav{box-shadow:0 2px 6px rgba(6,42,58,.07),0 18px 44px rgba(6,42,58,.14)}

/* De drie kolommen staan expliciet toegewezen. Zonder dat schuift de knop naar
   het midden zodra .nav__links op display:none gaat: een verborgen element
   maakt geen gridcel, dus de automatische plaatsing schoof alles een kolom op
   en stond de hamburger op mobiel naast het merk in plaats van rechts. */
.nav__brand{display:flex;align-items:center;gap:12px;flex:none;
  grid-column:1;justify-self:start}
/* In de header én in de paneelkop, want die twee liggen op elkaar: de kop van
   het paneel is naar dezelfde inspringing getrokken, dus het merk moet ook
   dezelfde marge krijgen. Anders springt het logo 15px opzij op het moment dat
   je het menu opent. */
.nav__brand{margin-left:15px}
.nav__brand:hover{text-decoration:none}
.nav__brand img{height:38px;width:auto}
/* Het woordmerk als echte tekst, niet als onderdeel van de SVG — in de
   lockup van het design system is het bij deze hoogte onleesbaar klein. */
.nav__word{font:var(--weight-regular) clamp(15px,1.3vw,17px)/1.1 var(--font-display);
  color:var(--text-muted);letter-spacing:var(--tracking-tight);white-space:nowrap}
.nav__word strong{display:block;font-weight:var(--weight-bold);color:var(--text-heading)}

.nav__links{display:flex;gap:var(--space-8);grid-column:2;justify-self:center}
.nav__link{
  font:var(--weight-medium) var(--text-base)/1 var(--font-sans);
  color:var(--text-body);padding-block:8px;position:relative;
}
.nav__link:hover{color:var(--teal-500);text-decoration:none}
.nav__link[aria-current="page"]{color:var(--teal-900);font-weight:var(--weight-semibold)}
.nav__link[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--lime-300);border-radius:2px;
}
.nav__actions{display:flex;align-items:center;gap:var(--space-3);
  grid-column:3;justify-self:end}

.nav__toggle{
  display:none;width:44px;height:44px;border:0;border-radius:var(--radius-circle);
  background:var(--neutral-100);color:var(--teal-900);cursor:pointer;
  place-items:center;transition:var(--transition-control);
}
.nav__toggle:hover{background:var(--neutral-200)}
/* Op een telefoon bestaat :hover niet, dus de knop gaf bij het aantikken geen
   enkel teken dat er iets gebeurde — het paneel verscheen zonder aanloop en
   dat leest als een pagina die verspringt. Nu een indrukstand, en een open
   stand in inkt zodat de knop zelf laat zien dat het menu aan staat. */
.nav__toggle:active{background:var(--neutral-200);transform:scale(.94)}
.nav__toggle[aria-expanded="true"]{background:var(--teal-900);color:var(--neutral-0)}
.navpanel__close:active{background:var(--neutral-200);transform:scale(.94)}

@media (max-width:1100px){
  .nav__links{display:none}
  .nav__toggle{display:grid}
  .nav{padding-right:9px}
}
@media (max-width:520px){
  .nav__actions .btn{display:none}
}

/* ---- Menupaneel — schermvullend op mobiel ------------------------------ */

.navpanel{
  position:fixed;inset:0;z-index:60;
  background:var(--surface-card);
  display:none;flex-direction:column;
  padding:14px var(--page-pad) calc(var(--space-6) + env(safe-area-inset-bottom));
  overflow:auto;overscroll-behavior:contain;
}
/* display kan niet overgangen, dus de aanloop is een animatie. Zonder deze
   korte beweging knipt het paneel er in één frame overheen en weet je niet of
   je op het menu hebt gedrukt of op een link. */
.navpanel[data-open="true"]{display:flex;animation:navpanel-in .2s ease-out}
/* Alleen een fade, geen verschuiving. Met een translateY schoof de kop van het
   paneel tijdens het openen langs de header, en dan zie je het merk en de knop
   een paar pixels verspringen precies op het moment dat je kijkt. */
@keyframes navpanel-in{
  from{opacity:0}
  to{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .navpanel[data-open="true"]{animation:none}
}
body.is-locked{overflow:hidden}

/* De kop van het paneel ligt op de header. Het paneel houdt binnenin 20px aan
   (--page-pad) voor de menulijst, maar de headercapsule zit op 9px, dus deze
   rij wordt naar buiten getrokken tot dezelfde inspringing. Anders verspringen
   het merk en de knop op het moment dat je het menu opent. */
.navpanel__top{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);padding-block:10px;
  margin-inline:calc(9px - var(--page-pad))}
.navpanel__top img{height:38px;width:auto}
.navpanel__close{
  width:44px;height:44px;border:0;border-radius:var(--radius-circle);
  background:transparent;color:var(--text-heading);cursor:pointer;
  display:grid;place-items:center;transition:var(--transition-control);
}
.navpanel__close:hover{background:var(--neutral-100)}

.navpanel__links{margin-top:clamp(24px,6vh,56px);flex:1}
.navpanel__links a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding-block:clamp(18px,2.6vh,24px);
  border-bottom:1px solid var(--border-subtle);
  font:var(--weight-semibold) clamp(22px,6vw,28px)/1.2 var(--font-display);
  letter-spacing:var(--tracking-tight);color:var(--text-heading);
}
.navpanel__links a:first-child{border-top:1px solid var(--border-subtle)}
.navpanel__links a:hover{color:var(--teal-500);text-decoration:none}
.navpanel__links a[aria-current="page"]{color:var(--teal-500)}
.navpanel__links .i{color:var(--text-subtle);width:22px;height:22px}

.navpanel__cta{display:grid;gap:var(--space-3);margin-top:var(--space-8);
  padding-top:var(--space-6);border-top:1px solid var(--border-subtle)}
.navpanel__cta .btn{width:100%}

/* ---- Knoppen ----------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:var(--control-h-md);padding-inline:22px;
  border:0;border-radius:var(--radius-pill);
  font:var(--weight-semibold) var(--text-sm)/1 var(--font-sans);
  cursor:pointer;white-space:nowrap;
  transition:var(--transition-control);
}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.975)}
.btn--lg{height:var(--control-h-lg);padding-inline:28px;font-size:var(--text-base)}
.btn--sm{height:var(--control-h-sm);padding-inline:16px;font-size:var(--text-xs)}

.btn--primary{background:var(--action-primary);color:#fff}
.btn--primary:hover{background:var(--action-primary-hover);color:#fff}
.btn--primary:active{background:var(--action-primary-active)}

.btn--accent{background:var(--action-accent);color:var(--text-on-accent)}
.btn--accent:hover{background:var(--action-accent-hover);color:var(--text-on-accent)}
.btn--accent:active{background:var(--action-accent-active)}

.btn--secondary{background:var(--neutral-0);color:var(--text-heading);box-shadow:var(--shadow-inset-hairline)}
.btn--secondary:hover{background:var(--neutral-50);color:var(--text-heading)}

.btn--ghost{background:transparent;color:var(--text-body)}
.btn--ghost:hover{background:var(--action-ghost-hover);color:var(--text-heading)}

/* Op donkere en lime vlakken */
.btn--onDark{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px var(--border-inverse)}
.btn--onDark:hover{background:rgba(255,255,255,.2);color:#fff}
.btn--onAccent{background:var(--teal-900);color:#fff}
.btn--onAccent:hover{background:var(--teal-800);color:#fff}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}

.link-arrow{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font:var(--type-label);color:var(--text-link);
}
.link-arrow .i{transition:transform var(--dur-fast) var(--ease-standard)}
.link-arrow:hover .i{transform:translateX(3px)}
/* Met een regelhoogte van 19px is dit met een duim nauwelijks te raken. De
   extra ruimte zit in het tikvlak, niet in de opmaak: de tekst schuift niet. */
@media (max-width:760px){
  .link-arrow{padding-block:12px;margin-block:-12px}
}

/* ---- Hero -------------------------------------------------------------- */

/* Nauwelijks zichtbare limesluier in de linkerbovenhoek. Het design system
   zet --gradient-lime-fade op 22%; dat maakt de pagina groen in plaats van
   wit. Hier een derde daarvan, en hij dooft eerder uit. */
.band--hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(170,241,73,.16) 0%,rgba(170,241,73,0) 38%);
}

/* De kop staat over de volle breedte, daaronder pas de twee kolommen. Anders
   moet de displaymaat omlaag om "Wij houden de lijn." op één regel te houden. */
.hero__title{margin-bottom:clamp(28px,3.4vw,48px);max-width:16ch}

.proof{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6)}
.proof li{display:flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-sm);color:var(--text-muted)}
.proof .i{color:var(--teal-500)}

/* ---- Op donkere en lime banden ----------------------------------------- */

.band--deep .link-arrow,.band--ink .link-arrow{color:var(--lime-300)}
.band--deep .link-arrow:hover,.band--ink .link-arrow:hover{color:var(--lime-200)}
.band--lime .link-arrow{color:var(--teal-700)}
.band--deep .rows,.band--ink .rows,
.band--deep .row,.band--ink .row{border-color:var(--border-inverse)}
.band--lime .rows,.band--lime .row{border-color:rgba(6,42,58,.16)}
.band--lime .row__n{background:rgba(6,42,58,.08);color:var(--teal-700)}
.band--lime .row:first-child .row__n{background:var(--teal-900);color:var(--lime-300)}
.band--lime .row p,.band--lime p{color:var(--teal-800)}
.band--deep .proof li,.band--ink .proof li{color:var(--text-on-inverse-muted)}
.band--deep .proof .i,.band--ink .proof .i{color:var(--lime-300)}
.band--lime .proof li,.band--lime .proof .i{color:var(--teal-700)}

/* ---- Groot citaat ------------------------------------------------------- */

.pullquote blockquote{margin:0;max-width:22ch}
.pullquote blockquote p{
  font:var(--weight-medium) clamp(24px,3.4vw,44px)/1.15 var(--font-display);
  color:var(--teal-900);letter-spacing:-0.025em;text-wrap:balance;
}
.pullquote footer{margin-top:var(--space-6);font:var(--type-label);color:var(--text-muted)}

/* Zolang er geen citaat met toestemming is. Bewust klein: een lege plek mag
   niet harder spreken dan de content eromheen. */
.placeholder--quote{
  max-width:58ch;padding:var(--space-5) var(--space-6);
  border:1px dashed var(--border-default);border-radius:var(--radius-md);
  font-size:var(--text-sm);color:var(--text-muted);
}
.placeholder--quote strong{display:block;color:var(--text-body);margin-bottom:6px}

/* ---- Badges & pills ---------------------------------------------------- */

.badge{
  display:inline-flex;align-items:center;gap:var(--space-2);
  height:30px;padding-inline:14px;border-radius:var(--radius-pill);
  font:var(--weight-semibold) var(--text-xs)/1 var(--font-sans);
  background:var(--neutral-100);color:var(--text-body);
}
.badge--lime{background:var(--lime-100);color:var(--lime-600)}
.badge--teal{background:var(--teal-50);color:var(--teal-600)}
.badge--onDark{background:rgba(255,255,255,.12);color:#fff}
.badge__dot{width:7px;height:7px;border-radius:var(--radius-circle);background:currentColor}

/* Het baken uit het logo, als statuslampje */
.badge--live .badge__dot{background:var(--lime-400);animation:baken 2.4s ease-in-out infinite}
@keyframes baken{0%,100%{opacity:1}50%{opacity:.35}}

/* ---- Kaarten ----------------------------------------------------------- */

.card{
  background:var(--surface-card);border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);padding:var(--gutter-card-lg);
}
.card--muted{background:var(--neutral-50);box-shadow:none}
.card--onDark{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--border-inverse);color:var(--text-on-inverse)}
.card--link{transition:var(--transition-surface)}
.card--link:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}
.card__head{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4)}

/* ---- Sectiekop --------------------------------------------------------- */

.sechead{margin-bottom:clamp(28px,3.5vw,48px)}
.sechead .lede{margin-top:var(--space-4)}
/* De variant met een introzin in een rechterkolom is vervallen — op donkere
   banden viel die tekst weg. Koppen staan nu alleen. */
.sechead h2{max-width:22ch}

/* ---- Genummerde rijen -------------------------------------------------- */
/* Vervangt de losse stappenkaarten. Rustiger, en op een telefoon leesbaar. */

.rows{border-top:1px solid var(--border-subtle)}
.row{
  display:grid;grid-template-columns:56px minmax(0,1fr);
  gap:var(--space-5);align-items:start;
  padding-block:clamp(20px,2.4vw,28px);
  border-bottom:1px solid var(--border-subtle);
}
.row__n{
  width:44px;height:44px;display:grid;place-items:center;
  border-radius:var(--radius-circle);
  background:var(--neutral-100);color:var(--text-muted);
  font:var(--weight-semibold) var(--text-sm)/1 var(--font-sans);
}
.row:first-child .row__n{background:var(--lime-100);color:var(--lime-600)}
.row h3{margin-bottom:6px}
.row p{color:var(--text-body)}
@media (max-width:560px){
  .row{grid-template-columns:40px minmax(0,1fr);gap:var(--space-4)}
  .row__n{width:36px;height:36px;font-size:var(--text-xs)}
}

/* ---- Vier stappen -------------------------------------------------------
   Twee bij twee, beeld boven de tekst. Een eerdere versie had een sticky kop
   met items die erachter langs scrolden; dat leverde een half leeg scherm op
   voordat het eerste beeld in zicht kwam. Dit leest in één oogopslag.
   ---------------------------------------------------------------------- */

.steps4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,3.5vw,48px)}
@media (max-width:760px){.steps4{grid-template-columns:minmax(0,1fr)}}

.steps4 figure{margin:0 0 var(--space-5);border-radius:var(--radius-lg);
  overflow:hidden;aspect-ratio:4/3;background:var(--neutral-100)}
.steps4 figure img{width:100%;height:100%;object-fit:cover}
.steps4 .report{box-shadow:none;border-radius:0}
.steps4 figure.is-report{display:grid;place-items:center;background:var(--neutral-100);
  padding:clamp(12px,1.6vw,20px)}
.steps4 figure.is-report .report{width:100%;border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm)}
/* In dit formaat past de slotregel er niet bij zonder de kaart af te snijden;
   de volledige rapportage staat in de preview-sectie. */
.steps4 figure.is-report .report__note{display:none}
.steps4 header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:8px}
.steps4__n{
  width:34px;height:34px;flex:none;display:grid;place-items:center;
  border-radius:var(--radius-circle);
  background:var(--lime-100);color:var(--lime-600);
  font:var(--weight-semibold) var(--text-xs)/1 var(--font-sans);
}

/* ---- Probleemblok ------------------------------------------------------ */

.issue{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3.5vw,56px)}
@media (max-width:860px){.issue{grid-template-columns:minmax(0,1fr);
  gap:var(--space-8)}}
.issue > div{padding-top:var(--space-6);border-top:2px solid var(--teal-900)}
.issue strong{display:block;font:var(--weight-semibold) var(--t-h3)/1.2 var(--font-display);
  color:var(--text-heading);letter-spacing:var(--tracking-tight);margin-bottom:var(--space-3)}

/* ---- Preview: rapportage en portaal naast elkaar ----------------------- */

/* De rapportage krijgt de ruimte: die krijg je elke ochtend. Het portaal is
   naslag en staat kleiner in de rechterkolom, met de uitleg erboven zodat
   die kolom zichzelf vult in plaats van onderaan leeg te lopen. */
.preview{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,3vw,40px);align-items:start}
@media (max-width:900px){.preview{grid-template-columns:minmax(0,1fr)}}
.preview figure{margin:0}
.preview__cap{margin-top:var(--space-4);font-size:var(--text-sm);color:var(--text-muted)}
.preview__zij{display:grid;gap:clamp(28px,3vw,40px)}
.preview__zij > .lede{max-width:44ch;margin:0}
@media (max-width:900px){.preview__zij > .lede{max-width:56ch}}
.preview__naslag{container-type:inline-size}

.portal{background:var(--surface-card);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden}
.portal__bar{display:flex;align-items:center;gap:var(--space-3);
  padding:14px var(--space-5);background:var(--neutral-100);
  font:var(--type-label);color:var(--text-muted)}
.portal__dots{display:flex;gap:6px}
.portal__dots span{width:9px;height:9px;border-radius:var(--radius-circle);
  background:var(--neutral-300)}
.portal__body{display:grid;grid-template-columns:116px minmax(0,1fr)}
@media (max-width:520px){.portal__body{grid-template-columns:minmax(0,1fr)}
  .portal__nav{display:none}}
/* In de smalle rechterkolom is er geen ruimte voor de navigatie naast de
   regels; zonder dit kapt "Rustige nacht, drie meldingen" af. */
@container (max-width:500px){.portal__body{grid-template-columns:minmax(0,1fr)}
  .portal__nav{display:none}
  .portal__main{padding:var(--space-4) var(--space-5)}}
.portal__nav{border-right:1px solid var(--border-subtle);padding:var(--space-4)}
.portal__nav li{display:flex;align-items:center;gap:10px;padding:9px 10px;
  border-radius:var(--radius-xs);font-size:var(--text-sm);color:var(--text-muted)}
.portal__nav li[aria-current]{background:var(--teal-50);color:var(--teal-600);
  font-weight:var(--weight-semibold)}
.portal__nav .i{width:16px;height:16px}
.portal__main{padding:var(--space-5)}
.portal__row{display:flex;align-items:center;gap:var(--space-3);
  padding-block:12px;border-top:1px solid var(--border-subtle);font-size:var(--text-sm)}
.portal__row:first-child{border-top:0}
.portal__row time{color:var(--teal-500);font-weight:var(--weight-semibold);flex:none}
.portal__row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--text-body)}

/* ---- Team --------------------------------------------------------------
   Staat klaar, maar wordt op dit moment nergens gebruikt: de sectie "De
   mensen die opnemen" is van over-ons af tot er echte portretten, namen en
   BIG-nummers zijn. `team__slot` is het lege kader voor zolang dat duurt.
   ------------------------------------------------------------------------ */

.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,32px)}
@media (max-width:820px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.team{grid-template-columns:minmax(0,1fr)}}
.team__slot{aspect-ratio:4/5;border-radius:var(--radius-lg);
  background:var(--neutral-100);display:grid;place-content:center;gap:6px;
  text-align:center;padding:var(--space-5);color:var(--text-subtle);
  box-shadow:var(--shadow-inset-hairline)}
.team__slot b{font:var(--type-label);color:var(--text-muted)}
.team__slot span{font-size:var(--text-xs);max-width:26ch}
.team figcaption{margin-top:var(--space-4)}
.team h3{margin-bottom:2px}
.team figcaption p{font-size:var(--text-sm);color:var(--text-muted)}

/* ---- Vinklijst --------------------------------------------------------- */

.checks{display:grid;gap:var(--space-4)}
.checks li{display:flex;gap:var(--space-3);align-items:flex-start}
.checks .i{margin-top:3px;color:var(--teal-500)}
.checks strong{color:var(--text-heading)}
.band--deep .checks .i,.band--ink .checks .i,.card--onDark .checks .i{color:var(--lime-300)}
.band--deep .checks strong,.band--ink .checks strong{color:#fff}
.band--deep .checks li,.band--ink .checks li{color:var(--text-on-inverse-muted)}

/* ---- Kerncijfers ------------------------------------------------------- */

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,3vw,40px)}
.stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat__v{
  font:var(--weight-semibold) var(--t-num)/.92 var(--font-display);
  color:var(--teal-900);letter-spacing:-0.04em;
}
.stats--3 .stat__v,.stat__v--sm{font-size:var(--t-num-sm)}
.stat__u{font-size:.38em;font-weight:var(--weight-medium);color:var(--text-muted);
  margin-left:.12em;letter-spacing:0}
.stat__l{margin-top:var(--space-4);font-size:var(--text-sm);color:var(--text-muted);
  line-height:1.45;max-width:30ch}
.band--lime .stat__v{color:var(--teal-900)}
.band--lime .stat__u,.band--lime .stat__l{color:var(--teal-700)}
.band--deep .stat__v,.band--ink .stat__v{color:#fff}
.band--deep .stat__u,.band--deep .stat__l,.band--ink .stat__u,.band--ink .stat__l{color:var(--text-on-inverse-muted)}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}}

/* ---- Rapportagekaart --------------------------------------------------- */

.report{
  background:var(--surface-card);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.report__bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:16px var(--space-6);background:var(--teal-900);color:#fff;
  font:var(--type-label);
}
.report__body{padding:var(--space-6)}
.report__line{display:grid;grid-template-columns:58px minmax(0,1fr);gap:var(--space-4);
  padding-block:12px;border-top:1px solid var(--border-subtle)}
.report__line:first-of-type{border-top:0}
.report__line time{font:var(--weight-semibold) var(--text-sm)/1.5 var(--font-sans);color:var(--teal-500)}
.report__line p{font-size:var(--text-sm)}
.report__note{
  margin-top:var(--space-4);padding:var(--space-4);
  background:var(--lime-50);border-radius:var(--radius-md);
  font-size:var(--text-sm);
}
.report__note strong{color:var(--teal-900)}

/* ---- Tijdlijn ---------------------------------------------------------- */

.timeline{display:grid;gap:var(--space-6)}
.tl{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--space-6);align-items:start}
.tl__t{
  height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);background:var(--teal-50);color:var(--teal-600);
  font:var(--weight-semibold) var(--text-sm)/1 var(--font-sans);
}
.tl--key .tl__t{background:var(--lime-300);color:var(--teal-900)}
.tl__b h3{margin-bottom:8px}
.tl__tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
@media (max-width:640px){
  .tl{grid-template-columns:minmax(0,1fr);gap:var(--space-3)}
  .tl__t{justify-self:start;padding-inline:18px}
}

/* ---- Citaat ------------------------------------------------------------ */

.quote{background:var(--lime-300);border-radius:var(--radius-lg);padding:clamp(24px,3vw,40px)}
.quote p{font:var(--weight-medium) clamp(19px,2.2vw,26px)/1.35 var(--font-display);
  color:var(--teal-900);letter-spacing:var(--tracking-tight)}
.quote footer{margin-top:var(--space-5);font:var(--type-label);color:var(--teal-700)}

/* Placeholder zolang er geen klantcitaat met toestemming is */
.placeholder{
  border:2px dashed var(--lime-300);border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,40px);color:var(--text-on-inverse-muted);
}
.placeholder strong{display:block;color:#fff;font-size:var(--text-md);margin-bottom:var(--space-2)}

/* ---- Beeldkaart --------------------------------------------------------
   Foto met een label­chip eroverheen. Zolang er geen fotografie is, toont het
   slot wat er moet komen in plaats van te doen alsof.
   ---------------------------------------------------------------------- */

.imgcard{position:relative;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:4/3;background:var(--gradient-ice);display:grid}
.imgcard img{width:100%;height:100%;object-fit:cover;grid-area:1/1}
.imgcard__slot{
  grid-area:1/1;display:grid;place-content:center;gap:6px;text-align:center;
  padding:var(--space-6);color:var(--teal-400);
  box-shadow:inset 0 0 0 1px var(--border-subtle);
}
.imgcard__slot b{font:var(--type-label);color:var(--teal-500)}
.imgcard__slot span{font-size:var(--text-xs);max-width:30ch}
.imgcard__chip{
  position:absolute;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);
  display:flex;align-items:center;gap:var(--space-3);
  padding:12px var(--space-4);border-radius:var(--radius-md);
  background:rgba(255,255,255,.92);backdrop-filter:var(--blur-glass);
  box-shadow:var(--shadow-sm);
}
.imgcard__chip strong{font:var(--weight-semibold) var(--text-md)/1.2 var(--font-display);
  color:var(--text-heading)}
.imgcard__chip small{display:block;margin-top:2px;color:var(--text-muted)}

/* ---- Afsluitend paneel -------------------------------------------------- */

.cta{
  position:relative;overflow:hidden;
  background:var(--gradient-teal);color:var(--text-on-inverse-muted);
  border-radius:var(--radius-2xl);padding:clamp(36px,5vw,80px);
}
.cta h2{color:#fff}
.cta::after{
  content:"";position:absolute;right:-8%;top:50%;translate:0 -50%;
  width:min(46vw,520px);aspect-ratio:1;pointer-events:none;
  background:url("watermark-mark.svg") no-repeat center/contain;opacity:.09;
}

/* ---- Vragen ------------------------------------------------------------ */

/* Elke vraag is een eigen witte kaart; daarom staat deze band op --neutral-50. */
.faq{display:grid;gap:var(--space-3)}
.faq__item{background:var(--surface-card);border-radius:var(--radius-md);
  box-shadow:var(--shadow-xs);padding-inline:var(--space-6)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  padding-block:var(--space-5);background:none;border:0;cursor:pointer;text-align:left;
  font:var(--weight-semibold) clamp(17px,1.6vw,19px)/1.35 var(--font-display);
  color:var(--text-heading);letter-spacing:var(--tracking-tight);
}
.faq__q:hover{color:var(--teal-500)}
.faq__mark{
  width:36px;height:36px;flex:none;display:grid;place-items:center;
  border-radius:var(--radius-circle);background:var(--neutral-100);color:var(--teal-900);
  transition:var(--transition-control);
}
.faq__q[aria-expanded="true"] .faq__mark{background:var(--lime-300);transform:rotate(180deg)}
/* Zonder JS staan alle antwoorden open — dat is de juiste terugval. */
.faq__a{overflow:hidden;transition:height var(--dur-base) var(--ease-standard)}
.faq__a > div{padding-bottom:var(--space-5);max-width:62ch;color:var(--text-body)}
.faq__a p+p{margin-top:var(--space-3)}

/* ---- Bron- en waarschuwingsblokken ------------------------------------- */

.note{
  padding:var(--space-5) var(--space-6);background:var(--neutral-50);
  border-radius:var(--radius-md);font-size:var(--text-sm);
}
.note strong{color:var(--text-heading)}
.note--lime{background:var(--lime-50)}
/* De oranje `note--todo` is weg. Dat was een briefje aan onszelf — wat nog
   ontbreekt hoort in het plan te staan, niet op de pagina. */

/* Beeldplaatshouder zolang er geen merkfotografie is */
.ph{
  display:grid;place-items:center;border-radius:var(--radius-lg);
  background:var(--teal-50);color:var(--teal-300);
  font:var(--weight-semibold) var(--text-xs)/1 var(--font-sans);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;
  min-height:220px;
}

/* ---- Spoedregel & footer ----------------------------------------------- */

.spoed{
  display:flex;align-items:center;justify-content:center;gap:var(--space-3);
  padding-block:var(--space-5);
  font:var(--type-label);color:var(--teal-700);
}
.spoed .i{color:var(--danger-500)}

.footer{background:var(--teal-900);color:var(--text-on-inverse-muted);padding-block:var(--space-20) var(--space-8)}
/* Vier kolommen. Het waren er twee met tot 80px ertussen, en dan staat er een
   gat van een derde van de breedte in het midden terwijl "Meer weten" zeven
   links onder elkaar draagt. */
.footer__grid{display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,3.5vw,56px)}
.footer__contact{margin-top:var(--space-6)}
.footer__contact li+li{margin-top:var(--space-2)}
.footer img{height:36px;width:auto}

/* Het woordmerk als echte tekst, net als in de header. Het stond als <text>
   binnen de SVG, en een <img> is een eigen document dat de webfont van de
   pagina niet krijgt: in de footer viel het merk daardoor terug op Arial
   terwijl het bovenin in Urbanist staat. */
.footer__merk{display:inline-flex;align-items:center;gap:12px}
.footer__merk:hover{text-decoration:none}
.footer__merk img{height:44px;width:auto}
.footer__word{font:var(--weight-regular) 17px/1.15 var(--font-display);
  color:var(--text-on-inverse-muted);letter-spacing:var(--tracking-tight);
  white-space:nowrap}
.footer__word strong{display:block;font-weight:var(--weight-bold);color:#fff}
.footer h2{font:var(--weight-semibold) var(--text-sm)/1.3 var(--font-sans);
  color:var(--lime-300);letter-spacing:0;margin-bottom:var(--space-4)}
.footer li+li{margin-top:var(--space-3)}
.footer a{color:var(--text-on-inverse-muted);font-size:var(--text-sm)}
.footer a:hover{color:#fff}
/* De chevron uit het logo als sectiescheiding, conform de merkexpressie */
.footer__rule{
  height:64px;margin-top:var(--space-16);
  background:url("pattern-chevrons.svg") repeat-x center/64px 64px;
  opacity:.4;
}
.footer__bottom{
  display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-8);
  margin-top:var(--space-8);padding-top:var(--space-6);
  border-top:1px solid var(--border-inverse);font-size:var(--text-xs);
}
@media (max-width:900px){.footer__grid{grid-template-columns:minmax(0,1fr) repeat(2,minmax(0,1fr))}
  .footer__brand{grid-column:1/-1}}
@media (max-width:760px){.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
  .footer__brand{grid-column:1/-1;margin-bottom:var(--space-4)}
  /* Zelfde reden als bij .link-arrow: 17px tekst met 20px ertussen is te
     krap om te raken. Het tikvlak groeit, de lijstafstand blijft gelijk. */
  .footer a{display:inline-block;padding-block:10px;margin-block:-10px}
  .footer li+li{margin-top:var(--space-2)}}
@media (max-width:400px){.footer__links{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}}

/* ---- Jumpbar ----------------------------------------------------------- */

.jumpbar{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-2);
  scrollbar-width:none}
.jumpbar::-webkit-scrollbar{display:none}
/* Witte pillen op een witte band zijn onzichtbaar; ze hebben een eigen
   ondergrond en een rand nodig. */
.jumpbar a{
  flex:none;height:38px;display:inline-flex;align-items:center;padding-inline:18px;
  border-radius:var(--radius-pill);background:var(--neutral-100);
  box-shadow:inset 0 0 0 1px var(--border-subtle);
  font:var(--type-label);color:var(--text-body);
}
.jumpbar a:hover{background:var(--teal-500);color:#fff;
  box-shadow:inset 0 0 0 1px var(--teal-500);text-decoration:none}

.crumb{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-muted)}
.crumb .i{color:var(--text-subtle)}
@media (max-width:760px){.crumb a{padding-block:11px;margin-block:-11px}}
/* Een pad van drie of meer kruimels past op een telefoon niet op één regel: de
   labels persen zich dan tot twee of drie regels tekst. Daar blijven de laatste
   twee van staan — waar je bent en waar je vandaan komt — met een beletselteken
   voor de kop van het pad die wegvalt. Het vijfde kind bestaat pas vanaf drie
   kruimels (label, chevron, label, chevron, label), dus korte paden blijven
   heel. */
@media (max-width:560px){
  .crumb{flex-wrap:wrap}
  .crumb:has(> :nth-child(5))::before{content:"…";color:var(--text-subtle)}
  .crumb:has(> :nth-child(5)) > :not(:nth-last-child(-n+4)){display:none}
}

/* ---- Tabel ------------------------------------------------------------- */

.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
th,td{padding:14px var(--space-4);text-align:left;vertical-align:top;
  border-top:1px solid var(--border-subtle)}
tr:first-child th,tr:first-child td{border-top:0}
th{color:var(--text-heading);font-weight:var(--weight-semibold)}

/* ---- Formulier --------------------------------------------------------- */

.fieldset{border:0;padding:0;margin:0 0 var(--space-12)}
.fieldset legend{
  display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2);
  font:var(--weight-semibold) var(--t-h3)/1.2 var(--font-display);
  color:var(--text-heading);letter-spacing:var(--tracking-tight);
}
.fieldset__n{
  width:36px;height:36px;flex:none;display:grid;place-items:center;
  border-radius:var(--radius-circle);background:var(--teal-500);color:#fff;
  font:var(--weight-semibold) var(--text-sm)/1 var(--font-sans);
}
.fieldset__hint{margin-bottom:var(--space-6);font-size:var(--text-sm);color:var(--text-muted)}

.fields{display:grid;gap:var(--space-5)}
.fields--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.field--wide{grid-column:1/-1}
@media (max-width:640px){.fields--2{grid-template-columns:minmax(0,1fr)}}

.field label{display:block;margin-bottom:var(--space-2);font:var(--type-label);color:var(--text-heading)}
.field .opt{font-weight:var(--weight-regular);color:var(--text-muted)}
.field .hint{display:block;margin-top:6px;font-size:var(--text-xs);color:var(--text-muted)}

input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;font:var(--type-body);color:var(--text-heading);
  background:var(--neutral-0);
  border:1px solid var(--border-default);border-radius:var(--radius-field);
  padding:0 var(--space-4);height:var(--control-h-md);
  transition:var(--transition-control);
}
textarea{height:auto;padding-block:12px;resize:vertical;line-height:1.5}
select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23748A91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:42px}
input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--focus-ring)}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--danger-500)}
::placeholder{color:var(--text-subtle)}

.choices{display:grid;gap:var(--space-2)}
.choice{
  display:flex;align-items:center;gap:var(--space-3);
  padding:12px var(--space-4);border-radius:var(--radius-field);
  background:var(--neutral-50);cursor:pointer;font-size:var(--text-sm);
  transition:var(--transition-control);
}
.choice:hover{background:var(--neutral-100)}
.choice input{width:20px;height:20px;flex:none;accent-color:var(--teal-500);margin:0}
input[type=checkbox]{border-radius:var(--radius-xs)}

.consent{display:flex;gap:var(--space-4);align-items:flex-start;font-size:var(--text-sm)}
.consent input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--teal-500)}

.formerrors{
  margin-bottom:var(--space-8);padding:var(--space-5) var(--space-6);
  background:var(--danger-100);border-radius:var(--radius-md);font-size:var(--text-sm);
}
.formerrors strong{display:block;color:var(--danger-700);margin-bottom:var(--space-2)}
.formerrors a{color:var(--danger-700);text-decoration:underline}
.formerrors li+li{margin-top:6px}

/* De melding hoort onder het veld waar hij over gaat. Het rode blok bovenaan
   met een lijst links (.formerrors) wordt niet meer gevuld; het staat er nog
   voor het geval JavaScript uitvalt. */
.field__fout{
  display:flex;align-items:flex-start;gap:6px;
  margin-top:6px;font-size:var(--text-sm);color:var(--danger-700);
}
.field__fout::before{content:"";flex:none;width:4px;align-self:stretch;
  border-radius:2px;background:var(--danger-700);opacity:.55}
.field [aria-invalid="true"]{border-color:var(--danger-700)}

/* Na verzenden vervangt dit het formulier. Een groen regeltje onder een nog
   volledig ingevuld formulier laat je twijfelen of het gelukt is. */
.bedankt{
  background:var(--neutral-0);border-radius:clamp(20px,2.2vw,32px);
  padding:clamp(32px,4vw,56px);max-width:60ch;outline:none;
}
.bedankt__vink{
  display:grid;place-items:center;width:56px;height:56px;
  border-radius:var(--radius-circle);
  background:var(--lime-300);color:var(--teal-900);margin-bottom:var(--space-6);
}
/* Het honeypotveld. Niet display:none en niet hidden: een bot die de DOM leest
   slaat verborgen velden over, en dan werkt de val niet. Het staat buiten
   beeld en buiten de tabvolgorde, dus een bezoeker komt er nooit langs. */
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Nog niet verstuurd, dus geen lime vinkje: dat leest als "klaar". */
.bedankt__vink--wacht{background:var(--neutral-100);color:var(--teal-500)}
.bedankt h2{margin-bottom:var(--space-4)}
.bedankt .lede{margin-bottom:var(--space-5)}
.bedankt .small{color:var(--text-muted)}

.formnote{margin-top:var(--space-4);padding:var(--space-4) var(--space-5);
  background:var(--success-100);border-radius:var(--radius-md);
  font-size:var(--text-sm);color:var(--success-700)}
.formnote[data-state="error"]{background:var(--danger-100);color:var(--danger-700)}

/* ---- Bewijsstrook onder in de hero ------------------------------------- */

.hero-proof{
  margin-top:clamp(36px,5vw,56px);padding-top:clamp(24px,3vw,32px);
  border-top:1px solid rgba(255,255,255,.2);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);
}
@media (max-width:760px){
  .hero-proof{grid-template-columns:minmax(0,1fr);gap:var(--space-4);
    margin-top:var(--space-8);padding-top:var(--space-6)}
}
.hero-proof li{display:flex;align-items:flex-start;gap:var(--space-3);
  color:rgba(255,255,255,.82);font-size:var(--text-sm);line-height:1.45}
.hero-proof .i{color:var(--lime-300);margin-top:2px}

/* ==========================================================================
   Donkere banden — componenten in nachtmodus
   De site wisselt wit en donker af. Alles wat op een donkere band kan staan,
   krijgt hier zijn tegenhanger. Scoped op .band--dark zodat het witte ontwerp
   ongemoeid blijft.
   ========================================================================== */

.band--dark .card{background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.band--dark .chip-i{background:rgba(255,255,255,.1);color:var(--lime-300)}
.band--dark .chip-i--lime{background:var(--lime-300);color:var(--teal-900)}
.band--dark .issue > div{border-top-color:var(--lime-300)}
.band--dark .issue strong{color:#fff}
.band--dark .issue p{color:rgba(255,255,255,.68)}
.band--dark .steps4 figure{background:rgba(255,255,255,.06)}
.band--dark .steps4 p{color:rgba(255,255,255,.68)}
.band--dark .steps4__n{background:rgba(170,241,73,.16);color:var(--lime-300)}
.band--dark .steps4 figure.is-report{background:rgba(255,255,255,.06)}
.band--dark .checks .i{color:var(--lime-300)}
.band--dark .checks strong{color:#fff}
.band--dark .checks li{color:rgba(255,255,255,.72)}
.band--dark .link-arrow{color:var(--lime-300)}
.band--dark .rows,.band--dark .row{border-color:rgba(255,255,255,.14)}
.band--dark .row__n{background:rgba(255,255,255,.1);color:rgba(255,255,255,.7)}
.band--dark .row:first-child .row__n{background:var(--lime-300);color:var(--teal-900)}
.band--dark .row p{color:rgba(255,255,255,.68)}
.band--dark .note{background:rgba(255,255,255,.06);color:rgba(255,255,255,.72)}
.band--dark .note strong{color:#fff}
.band--dark .stat__v{color:#fff}
.band--dark .stat__u,.band--dark .stat__l{color:rgba(255,255,255,.6)}
.band--dark table{color:rgba(255,255,255,.72)}
.band--dark th,.band--dark td{border-top-color:rgba(255,255,255,.14)}
.band--dark th,.band--dark td strong{color:#fff}
.band--dark .btn--secondary{background:rgba(255,255,255,.1);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.band--dark .btn--secondary:hover{background:rgba(255,255,255,.18);color:#fff}
.band--dark .placeholder--quote{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.55)}
.band--dark .placeholder--quote strong{color:rgba(255,255,255,.85)}
.band--dark .crumb{color:rgba(255,255,255,.55)}
.band--dark .jumpbar a{background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);
  box-shadow:none}
.band--dark .jumpbar a:hover{background:rgba(255,255,255,.16);color:#fff}

/* Rapportage, portaal en vragen in nachtmodus */
.band--dark .report,.band--dark .portal{background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.band--dark .report__bar,.band--dark .portal__bar{background:rgba(0,0,0,.28)}
.band--dark .report__bar{color:#fff}
.band--dark .report__body h3{color:#fff}
.band--dark .report__line{border-top-color:rgba(255,255,255,.1)}
.band--dark .report__line p{color:rgba(255,255,255,.7)}
.band--dark .report__line time,.band--dark .portal__row time{color:var(--lime-300)}
.band--dark .report__note{background:rgba(170,241,73,.1);color:rgba(255,255,255,.78)}
.band--dark .report__note strong{color:#fff}
.band--dark .portal__bar{color:rgba(255,255,255,.6)}
.band--dark .portal__dots span{background:rgba(255,255,255,.25)}
.band--dark .portal__nav{border-right-color:rgba(255,255,255,.12)}
.band--dark .portal__nav li{color:rgba(255,255,255,.55)}
.band--dark .portal__nav li[aria-current]{background:rgba(170,241,73,.14);color:var(--lime-300)}
.band--dark .portal__row{border-top-color:rgba(255,255,255,.1)}
.band--dark .portal__row span{color:rgba(255,255,255,.72)}
.band--dark .preview__cap{color:rgba(255,255,255,.5)}
.band--dark .badge{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8)}
.band--dark .badge--lime{background:rgba(170,241,73,.16);color:var(--lime-300)}
.band--dark .faq__item{background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.band--dark .faq__q{color:#fff}
.band--dark .faq__q:hover{color:var(--lime-300)}
.band--dark .faq__mark{background:rgba(255,255,255,.1);color:#fff}
.band--dark .faq__q[aria-expanded="true"] .faq__mark{background:var(--lime-300);color:var(--teal-900)}
.band--dark .faq__a > div{color:rgba(255,255,255,.7)}
.band--dark .tl__t{background:rgba(255,255,255,.1);color:var(--lime-300)}
.band--dark .tl--key .tl__t{background:var(--lime-300);color:var(--teal-900)}

/* Het baken uit het logo, als staand licht in de hero */
.baken{
  position:absolute;right:clamp(24px,6vw,96px);top:50%;translate:0 -50%;
  width:clamp(8px,1.1vw,14px);height:clamp(140px,22vw,280px);
  border-radius:999px;background:var(--lime-300);
  box-shadow:0 0 60px 12px rgba(170,241,73,.32);
  animation:baken-pulse 4.2s ease-in-out infinite;
}
@keyframes baken-pulse{
  0%,100%{opacity:1;box-shadow:0 0 60px 12px rgba(170,241,73,.32)}
  50%{opacity:.55;box-shadow:0 0 34px 6px rgba(170,241,73,.16)}
}
@media (max-width:900px){.baken{display:none}}
@media (prefers-reduced-motion:reduce){.baken{animation:none}}

/* ==========================================================================
   Dashboard — klikbare preview van het portaal
   Vier tabbladen, per tabblad een lijst en een detailvenster. Zonder JS zijn
   alle panelen en details zichtbaar; JS klapt ze dicht en maakt ze klikbaar.
   ========================================================================== */

.dash{border-radius:var(--radius-lg);overflow:hidden;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.dash__bar{display:flex;align-items:center;gap:var(--space-3);
  padding:14px var(--space-5);background:rgba(0,0,0,.28);
  font:var(--type-label);color:rgba(255,255,255,.6)}

.dash__tabs{display:flex;gap:4px;padding:var(--space-3) var(--space-3) 0;
  overflow-x:auto;scrollbar-width:none}
.dash__tabs::-webkit-scrollbar{display:none}
.dash__tab{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:10px 16px;border:0;border-radius:var(--radius-md) var(--radius-md) 0 0;
  background:transparent;color:rgba(255,255,255,.6);cursor:pointer;
  font:var(--weight-semibold) var(--text-sm)/1 var(--font-sans);
  transition:var(--transition-control);
}
.dash__tab:hover{background:rgba(255,255,255,.06);color:#fff}
.dash__tab.is-active{background:rgba(255,255,255,.1);color:#fff}
.dash__tab.is-active .i{color:var(--lime-300)}

.dash__panel{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:1px;background:rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12)}
.js .dash__panel{display:none}
.js .dash__panel.is-active{display:grid}
@media (max-width:760px){.dash__panel,.js .dash__panel.is-active{grid-template-columns:minmax(0,1fr)}}

.dash__lijst,.dash__zij{background:#08222E;padding:var(--space-4)}
.dash__row{
  width:100%;display:flex;align-items:center;gap:var(--space-3);
  padding:14px var(--space-4);border:0;border-radius:var(--radius-xs);
  background:transparent;color:rgba(255,255,255,.72);cursor:pointer;text-align:left;
  font:var(--type-body);font-size:var(--text-sm);
  transition:var(--transition-control);
}
.dash__row:hover{background:rgba(255,255,255,.06)}
.dash__row.is-active{background:rgba(170,241,73,.12)}
.dash__row.is-active .dash__k{color:var(--lime-300)}
.dash__k{flex:none;width:62px;font-weight:var(--weight-semibold);
  color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.dash__t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#fff}

.dash__detail{padding:var(--space-4)}
.js .dash__detail{display:none}
.js .dash__detail.is-active{display:block}
.dash__detail h4{color:#fff;margin-bottom:10px}
.dash__detail p{color:rgba(255,255,255,.72);font-size:var(--text-sm)}

/* Kleiner cijfer in een smalle kolom */
.stat__v--sm{font-size:clamp(28px,3vw,38px)}

/* ---- Contrast op het afsluitende paneel -------------------------------- */
/* .lede erft anders de donkere bodykleur en wordt onleesbaar op teal. */
.cta .lede,.cta p{color:rgba(255,255,255,.82)}
.cta .btn--onDark{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}

/* ==========================================================================
   Kennisbank — helpcentrum
   Zijbalk met alle artikelen, huidige gemarkeerd. Zo zie je meteen wat er nog
   meer is en hoef je niet terug naar het overzicht.
   ========================================================================== */

.kb{display:grid;grid-template-columns:280px minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:900px){.kb{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}}

.kb__nav{position:sticky;top:calc(var(--header-h) + 24px)}
/* Op één kolom staat de zijbalk vóór het artikel in de bronvolgorde. Daar
   scroll je dan eerst langs zes links heen; het artikel gaat voor. */
@media (max-width:900px){.kb__nav{position:static;order:2}}
.kb__nav h2{font:var(--weight-semibold) var(--text-sm)/1.3 var(--font-sans);
  color:var(--text-muted);letter-spacing:0;margin-bottom:var(--space-4)}
.kb__nav a{
  display:block;padding:12px var(--space-4);border-radius:var(--radius-sm);
  font:var(--weight-medium) var(--text-sm)/1.4 var(--font-sans);
  color:var(--text-body);
}
.kb__nav a:hover{background:var(--neutral-100);color:var(--text-heading);text-decoration:none}
.kb__nav a[aria-current="page"]{background:var(--teal-500);color:#fff;
  font-weight:var(--weight-semibold)}
.kb__nav a[aria-current="page"]:hover{background:var(--teal-600);color:#fff}

.kb__body{max-width:70ch}
.kb__body h2{font-size:var(--t-h3);margin-top:clamp(36px,4vw,52px)}
.kb__body h2:first-child{margin-top:0}
.kb__body > * + *{margin-top:var(--space-4)}
.kb__body ul.checks{margin-top:var(--space-4)}
/* De bronvermelding als citatie, niet als callout. De vorige versie was een
   getinte kaart met een gekleurde accentbalk en een documenticoon: de opmaak
   van een waarschuwing, gebruikt voor het rustigste element op de pagina — en
   het icoon droeg geen informatie die "Bron" niet al gaf. Nu draagt een
   haarlijn de scheiding en zet een hangende inspring het woord naast de tekst
   in plaats van erboven. */
.kb__bron{margin-top:clamp(36px,4vw,52px);padding-top:var(--space-5);
  border-top:1px solid var(--border-subtle);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:0 var(--space-5);align-items:baseline;
  font-size:var(--text-sm);line-height:var(--leading-normal);
  color:var(--text-muted)}
.kb__bron-m{font:var(--weight-semibold) var(--text-xs)/var(--leading-normal) var(--font-sans);
  color:var(--text-subtle)}
.kb__bron p{margin:0}
.kb__bron p + p{margin-top:var(--space-3)}
/* Onder de 560px is er geen ruimte voor twee kolommen; dan stapelt het, maar
   blijft het een voetnoot en geen kop met tekst eronder. */
@media (max-width:560px){
  .kb__bron{grid-template-columns:minmax(0,1fr);gap:8px}
}

.kb__vervolg{display:flex;flex-wrap:wrap;gap:var(--space-4);
  margin-top:clamp(40px,5vw,64px);padding-top:var(--space-6);
  border-top:1px solid var(--border-subtle)}

/* ==========================================================================
   Formulier in stappen
   Zonder JS staan alle stappen onder elkaar en werkt het als één formulier.
   ========================================================================== */

/* ---- Aanmelden: formulier met een zijkolom -----------------------------
   Het formulier stond als één smalle kolom onder een rij kaartjes, en dan is
   het vijf schermen velden achter elkaar zonder dat je weet waar je aan
   begint. Nu draagt de zijkolom het antwoord op "en dan?" terwijl je invult,
   en staat de uitwerking van die vier momenten onder de aanmelding in plaats
   van erboven: eerst doen, dan lezen.
   ---------------------------------------------------------------------- */

.aanmeld{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(24px,3vw,48px);align-items:start}
.aanmeld__form{background:var(--neutral-0);
  border-radius:clamp(20px,2.2vw,32px);padding:clamp(24px,3vw,48px)}
.aanmeld__zij{display:grid;gap:var(--space-4);position:sticky;
  top:calc(var(--header-h,72px) + var(--space-6))}

.zijkaart{background:var(--neutral-0);border-radius:clamp(16px,1.8vw,24px);
  padding:clamp(20px,2.2vw,28px)}
.zijkaart h2{font:var(--weight-semibold) clamp(17px,1.5vw,19px)/1.3 var(--font-display);
  color:var(--text-heading);margin-bottom:var(--space-4)}
.zijkaart ol,.zijkaart ul{display:grid;gap:var(--space-3);
  font-size:var(--text-sm);color:var(--text-body)}
.zijkaart ol{counter-reset:z;list-style:none}
.zijkaart ol li{counter-increment:z;display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px}
.zijkaart ol li::before{content:counter(z) ".";color:var(--teal-500);
  font-weight:var(--weight-semibold)}
.zijkaart ul{list-style:none}
.zijkaart ul li{display:grid;grid-template-columns:8px minmax(0,1fr);gap:12px}
.zijkaart ul li::before{content:"";width:6px;height:6px;margin-top:8px;
  border-radius:50%;background:var(--lime-400)}
.zijnoot{font-size:var(--text-xs);line-height:var(--leading-normal);
  color:var(--text-muted);padding-inline:clamp(4px,1vw,10px)}

@media (max-width:900px){
  .aanmeld{grid-template-columns:minmax(0,1fr)}
  /* Het formulier eerst. De zijkolom erboven zetten duwt de aanmelding een
     scherm naar beneden, en wat er daarna gebeurt staat al in de lede boven
     de pagina en nog een keer in de donkere band eronder. */
  .aanmeld__zij{position:static}
  .aanmeld__form{padding:clamp(20px,4vw,32px)}
}

/* ---- De vier momenten na de aanmelding ---------------------------------
   Een eigen donker vlak, zoals de CTA en de cijferrij. De klasse band--dark
   bestaat nog wel als selector maar heeft in deze vormtaal geen achtergrond
   meer: elke sectie is een kaart op de grijze pagina, dus het donker zit op
   de kaart en niet op de band. */

.momentenblok{background:var(--teal-900);color:var(--text-on-inverse-muted);
  border-radius:clamp(20px,2.2vw,32px);padding:clamp(28px,3.6vw,56px);
  position:relative;isolation:isolate;overflow:hidden}
.momentenblok::before{content:"";position:absolute;inset:0;z-index:-1;
  pointer-events:none;
  background:url("pattern-chevrons.svg") repeat;background-size:44px 44px;
  opacity:.06;mask-image:linear-gradient(105deg,#000 0%,transparent 62%)}
.momentenblok h2{color:#fff}
/* .lede zet zijn eigen donkere kleur en erft dus niet van het blok. Op inkt
   gaf dat 1,7:1 en was de zin onleesbaar. */
.momentenblok .lede{color:var(--text-on-inverse-muted)}

.momenten{list-style:none;margin-top:clamp(32px,4vw,48px);display:grid;
  gap:clamp(20px,2.4vw,32px);position:relative}
.moment{display:grid;grid-template-columns:44px minmax(0,1fr);
  gap:clamp(16px,2vw,28px);align-items:start}
.moment__n{width:36px;height:36px;display:grid;place-items:center;
  border-radius:var(--radius-circle);
  background:rgba(255,255,255,.12);color:#fff;
  font:var(--weight-semibold) var(--text-sm)/1 var(--font-sans)}
.moment:first-child .moment__n{background:var(--lime-300);color:var(--teal-900)}
.moment h3{color:#fff}
.moment__wanneer{margin-top:4px;font-size:var(--text-xs);
  color:var(--lime-300);font-weight:var(--weight-semibold)}
.moment > div > p:last-child{margin-top:10px;color:var(--text-on-inverse-muted);
  font-size:var(--text-sm);max-width:62ch}

.js .wizard__stap{display:none}
.js .wizard__stap.is-active{display:block}

.wizard__balk{display:flex;gap:4px;margin-bottom:clamp(28px,3.5vw,44px)}
.wizard__balk li{flex:1;display:grid;gap:8px}
.wizard__balk span{display:block;height:4px;border-radius:2px;background:var(--border-subtle)}
.wizard__balk li.is-done span,.wizard__balk li.is-active span{background:var(--lime-300)}
.wizard__balk b{font:var(--weight-semibold) var(--text-xs)/1.3 var(--font-sans);
  color:var(--text-subtle)}
.wizard__balk li.is-active b{color:var(--text-heading)}
.wizard__balk li.is-done b{color:var(--text-muted)}
@media (max-width:640px){.wizard__balk b{display:none}}

.wizard__nav{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;
  margin-top:var(--space-8);padding-top:var(--space-6);
  border-top:1px solid var(--border-subtle)}
/* De teller staat bovenaan, boven de balk, zoals je hem verwacht: je wilt
   weten hoe ver je bent vóór je begint, niet pas bij de knoppen onderaan. */
.wizard__tel{font:var(--weight-semibold) var(--text-sm)/1 var(--font-sans);
  color:var(--text-muted);margin-bottom:var(--space-3)}
.wizard__tel--oud{margin-left:auto;font-size:var(--text-sm);color:var(--text-muted);
  font-variant-numeric:tabular-nums}
.js .wizard__slot{display:none}

/* [hidden] verliest van display:inline-flex op .btn — expliciet terugzetten. */
[hidden]{display:none !important}