/* ==========================================================================
   Look — zachtgrijze pagina, witte kaarten
   Laatste laag, na site.css. Zet het ontwerp om van "witte pagina met donkere
   volvlakbanden" naar "grijze pagina waarop witte kaarten drijven".

   Drie regels die het ontwerp dragen:
     1. De pagina is grijs, de content is wit. Contrast komt van het kaartvlak,
        niet van gekleurde banden.
     2. Koppen zijn hele zinnen in één kleur. Geen tweede regel in een andere
        kleur — dat las als een reeks losse fragmenten.
     3. Cijfers staan in rijen met een label ervoor, niet in losse kolommen.
   ========================================================================== */

body{background:var(--neutral-100)}

/* Koppen: één kleur, hele zinnen, rustiger maat */
:root{
  --t-display:clamp(32px,4.4vw,56px);
  --t-h2:clamp(26px,3vw,40px);
  --t-h3:clamp(19px,1.6vw,22px);
}
h1,h2{letter-spacing:-0.025em;line-height:1.08;text-wrap:balance}
h1{line-height:1.04}
.second{display:inline;color:inherit}   /* mocht er ergens één achterblijven */
.sechead h2{max-width:26ch}
.sechead{margin-bottom:clamp(24px,3vw,40px)}

/* ---- Banden en kaarten ------------------------------------------------- */

.band{padding-block:clamp(10px,1.4vw,18px);background:transparent}
.band:first-of-type{padding-top:clamp(16px,2vw,24px)}
.band--tight{padding-block:calc(var(--header-h) + clamp(16px,2vw,28px)) clamp(10px,1.4vw,18px)}

.panel{
  background:var(--neutral-0);
  border-radius:clamp(20px,2.2vw,32px);
  padding:clamp(28px,3.6vw,64px);
  box-shadow:none;
}

/* Alle donkere varianten vervallen: alles staat op wit. */
.band--dark,.band--ink,.band--deep,.band--soft,.band--ice,.band--lime{
  background:transparent;color:var(--text-body)}
.band--dark h2,.band--ink h2,.band--deep h2,.band--lime h2{color:var(--text-heading)}

/* ---- Header: witte balk met omlijnde knop ------------------------------ */

.nav{box-shadow:none;border:1px solid var(--border-subtle)}
.header.is-scrolled .nav{box-shadow:0 6px 24px rgba(6,42,58,.08)}
.nav__actions .btn--accent{
  background:transparent;color:var(--text-heading);
  box-shadow:inset 0 0 0 1px var(--border-default);
}
.nav__actions .btn--accent:hover{background:var(--neutral-100);color:var(--text-heading)}

/* ---- Hero: beeldkaart met afgeronde hoeken ----------------------------- */

.hero-full{
  min-height:min(72vh,660px);margin-inline:var(--page-pad);
  border-radius:clamp(20px,2.2vw,32px);overflow:hidden;
  padding-block:calc(var(--header-h) + clamp(28px,4vw,56px)) clamp(32px,4vw,56px);
}
.hero-full h1{max-width:18ch}
.hero-full .lede{max-width:52ch}
.baken{display:none}

/* De eerste sectie na de hero kreeg 18px lucht, terwijl het ritme tussen de
   andere secties 36px is: de helft dus, en dat plakte de eerste witte kaart
   tegen het donkere beeld aan. Na een vlak van deze omvang mag het ruimer dan
   het gewone ritme, niet krapper. */
.hero-full + .band{padding-top:clamp(40px,4.5vw,64px)}

/* ---- De drie beloftes onder de hero -------------------------------------
   Dit zijn de USP's, en ze stonden als drie witte doosjes met grijze tekst op
   een ijsgrijze pagina, ingeklemd tussen twee witte panelen: de pagina liep
   van de donkere hero in drie keer wit door en de cijfers verdwenen daarin.

   Nu één inktvlak met drie kolommen, gescheiden door haarlijnen — één object
   in plaats van drie losse doosjes — met de cijfers in lime, want daar moet
   het oog landen. Dat herstelt meteen het wisselen van wit en donker dat de
   rest van de pagina wél doet.

   Lime staat hier als tekstkleur en niet als vlak, dus de regel "één limevlak
   per pagina" blijft bij de knop in de hero.
   ---------------------------------------------------------------------- */

.statrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(10px,1.4vw,18px);
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--teal-900);border-radius:clamp(20px,2.2vw,32px)}
/* Het chevronpatroon uit de merkexpressie als textuur, uitdovend naar rechts.
   6 % — op inkt leest 7,5 % al als een dessin in plaats van als structuur. */
.statrow::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%)}
.statrow > div{padding:clamp(26px,3vw,40px);
  border-left:1px solid rgba(255,255,255,.12)}
.statrow > div:first-child{border-left:0}
.statrow b{display:block;font:var(--weight-semibold) clamp(30px,3.4vw,46px)/1 var(--font-display);
  color:var(--lime-300);letter-spacing:-0.03em}
.statrow span{display:block;margin-top:10px;font-size:var(--text-sm);
  color:var(--text-on-inverse-muted)}
@media (max-width:760px){
  .statrow{grid-template-columns:minmax(0,1fr)}
  .statrow > div{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .statrow > div:first-child{border-top:0}
}

/* ---- Cijferrijen met staplabel ----------------------------------------- */

/* Drie kolommen (label, getal, tekst) trokken de rij over de volle bandbreedte
   uit: "24/7" vult 180px van een kolom van 450, dus er stond een gat tussen het
   getal en de tekst. Nu twee kolommen — label en getal onder elkaar als één
   blok, de tekst ernaast — en het geheel afgetopt, zodat de rij niet hoeft te
   rekken naar een breedte die de inhoud niet vult. */
.impact{border-top:1px solid var(--border-subtle);max-width:960px}
/* De linkerkolom is vast, niet fluïde: elke rij is een eigen grid, dus met een
   auto-kolom zou de tekst per rij op een andere x beginnen. De maat volgt het
   breedste getal ("30 min"). */
.impact__rij{
  display:grid;grid-template-columns:clamp(150px,17vw,232px) minmax(0,1fr);
  grid-template-areas:"label tekst" "getal tekst";
  column-gap:clamp(24px,3vw,48px);row-gap:8px;align-items:start;
  padding-block:clamp(24px,2.8vw,34px);
  border-bottom:1px solid var(--border-subtle);
}
/* Het lime vlak steekt naar buiten in plaats van de inhoud naar binnen te
   duwen, zodat alle drie de rijen op dezelfde x beginnen. */
.impact__rij--uit{background:var(--lime-100);border-radius:var(--radius-md);
  margin-inline:calc(-1 * clamp(16px,2vw,28px));
  padding-inline:clamp(16px,2vw,28px);border-bottom-color:transparent}
/* Het label noemt waar het getal vandaan komt, dus het mag gelezen worden.
   In subtielgrijs zakte het weg tot ruis naast een getal van 52px. */
.impact__stap{grid-area:label;
  font:var(--weight-semibold) var(--text-sm)/1.3 var(--font-sans);
  color:var(--teal-500)}
.impact__getal{grid-area:getal;
  font:var(--weight-semibold) clamp(34px,4.2vw,58px)/.95 var(--font-display);
  color:var(--text-heading);letter-spacing:-0.035em}
/* De tekst is hier het argument, niet een onderschrift bij het getal. */
/* De tekst hangt in het midden van de rij, niet aan de bovenkant: bij een korte
   alinea naast een getal van twee regels hoog ontstond anders een leeg vlak
   rechtsonder. */
.impact p{grid-area:tekst;align-self:center;
  font:var(--type-body);color:var(--text-body);max-width:60ch}
@media (max-width:760px){
  .impact__rij{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"label" "getal" "tekst";row-gap:6px}
  .impact p{align-self:start;margin-top:10px}
}

/* Vanaf 761px staan de drie feiten naast elkaar in plaats van onder elkaar.
   De homepage heeft twee van deze blokken, en als rijen kostten ze samen zes
   schermhoogtes lopende tekst — precies de lap waar de README voor waarschuwt
   ("per band hooguit één regel lopende tekst"). Naast elkaar is het één band
   die je in één blik leest; de uitleg staat op kb-30-minutennorm en waarom.

   Het lime vlak vervalt hier: dat brak een lange verticale lijst op, en die is
   er niet meer. Op mobiel blijft het staan, want daar stapelen ze wél. */
@media (min-width:761px){
  .impact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:none}
  .impact__rij{display:block;border-bottom:0;
    border-left:1px solid var(--border-subtle);
    padding:clamp(26px,2.8vw,36px) clamp(20px,2.2vw,32px)}
  .impact__rij:first-child{border-left:0;padding-inline-start:0}
  .impact__rij:last-child{padding-inline-end:0}
  .impact__rij--uit{background:transparent;border-radius:0;margin-inline:0}
  .impact__stap{display:block}
  .impact__getal{display:block;margin-top:8px}
  .impact p{display:block;margin-top:14px;max-width:34ch;
    font-size:var(--text-sm);color:var(--text-muted)}
}

/* ---- Kennisbank als kaartraster ---------------------------------------- */

.kbgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.4vw,20px)}
@media (max-width:900px){.kbgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.kbgrid{grid-template-columns:minmax(0,1fr)}}
.kbkaart{
  display:flex;flex-direction:column;gap:var(--space-4);
  background:var(--neutral-0);border-radius:clamp(16px,1.8vw,24px);
  padding:clamp(24px,2.4vw,32px);color:var(--text-body);
  transition:var(--transition-surface);
}
.kbkaart:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(6,42,58,.08);
  text-decoration:none;color:var(--text-body)}
.kbkaart h3{margin-top:auto}
.kbkaart p{font-size:var(--text-sm);color:var(--text-muted)}
.kbkaart .link-arrow{margin-top:var(--space-2)}

/* Artikelpagina: zijbalk als witte kaart naast de tekstkaart.
   De kolommen staan achter dezelfde mediaquery als in site.css — zonder die
   grens overschreef deze regel de mobiele instorting, en werd de tekstkolom
   op een telefoon zo smal dat er één woord per regel overbleef. */
@media (min-width:901px){
  .kb{grid-template-columns:260px minmax(0,1fr);gap:clamp(12px,1.4vw,20px)}
}
.kb__nav{background:var(--neutral-0);border-radius:clamp(16px,1.8vw,24px);
  padding:var(--space-6);top:calc(var(--header-h) + 16px)}
.kb__body{background:transparent;max-width:none}
.kb > div:last-child{background:var(--neutral-0);
  border-radius:clamp(20px,2.2vw,32px);padding:clamp(28px,3.4vw,56px)}
/* De bronvermelding had hier een tint en een lime accentbalk. Die zijn weg: hij
   staat nu als voetnoot onder een haarlijn, zie .kb__bron in site.css. Een
   accentbalk in de merkkleur trok de aandacht naar het rustigste element op de
   pagina, en de kaart eromheen zat al in een kaart (.kb > div:last-child). */

/* ---- Verhaalkaart voor de pilot ---------------------------------------- */

.story{background:var(--neutral-0);border-radius:clamp(20px,2.2vw,32px);
  padding:clamp(28px,3.4vw,48px);display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,3vw,48px)}
@media (max-width:800px){.story{grid-template-columns:minmax(0,1fr)}}
.story__label{font:var(--weight-medium) var(--text-sm)/1 var(--font-sans);
  color:var(--text-subtle);margin-bottom:var(--space-4)}
.story dt{font:var(--weight-semibold) var(--text-sm)/1.4 var(--font-sans);
  color:var(--text-heading)}
.story dd{margin:4px 0 var(--space-5);font-size:var(--text-sm);color:var(--text-muted)}

/* ---- Componenten op grijs ---------------------------------------------- */

.card{box-shadow:none;background:var(--neutral-100);border-radius:clamp(16px,1.8vw,24px)}
.panel .card{background:var(--neutral-100)}
.faq__item{box-shadow:none;background:var(--neutral-100)}
.report,.portal,.dash{box-shadow:none}
.report,.portal{border:1px solid var(--border-subtle)}

/* De rapportagekaart is een voorbeeld, geen paginainhoud, maar hij liep op tot
   bijna een schermhoogte: de kop erin is een gewone h3 en die staat op de maat
   van een sectiekop. Alles een maat kleiner, zodat je hem in één blik leest. */
.report__bar{padding:12px var(--space-5)}
.report__body{padding:var(--space-5)}
.report__body h3{font-size:clamp(16px,1.5vw,19px);line-height:1.35}
.report__line{padding-block:9px;gap:var(--space-3);
  grid-template-columns:50px minmax(0,1fr)}
.report__line time,.report__line p{font-size:var(--text-xs)}
.report__note{margin-top:var(--space-3);padding:var(--space-3) var(--space-4);
  font-size:var(--text-xs)}
.cta{background:var(--teal-900);border-radius:clamp(20px,2.2vw,32px)}
.cta::after{opacity:.08}
.issue > div{border-top-color:var(--teal-900)}
.steps4 figure{background:var(--neutral-100)}
.spoed{padding-block:var(--space-8)}
.footer{background:var(--teal-900);margin-inline:var(--page-pad);
  border-radius:clamp(20px,2.2vw,32px) clamp(20px,2.2vw,32px) 0 0}
.jumpbar a{background:var(--neutral-0);box-shadow:none;border:1px solid var(--border-subtle)}
.dash__lijst,.dash__zij{background:var(--teal-900)}

/* ---- Processtrook ------------------------------------------------------
   Vier genummerde stappen. Geen beeld: vier sfeerfoto's naast elkaar zeiden
   niets over het proces en maakten de sectie zwaarder dan de inhoud.

   De stappen stonden eerst als losse tekstkolommen onder één doorlopende
   haarlijn. Op een telefoon viel dat uit elkaar: vier alinea's onder elkaar
   met veel lucht ertussen en niets dat een stap begrensde, dus je zag niet
   meer dat het één reeks was. Elke stap is nu een eigen kaartje op de witte
   kaart — ook op desktop, want daar deed de lijn hetzelfde werk minder goed
   dan een vlak. De volgorde zit in de nummers.
   ---------------------------------------------------------------------- */

.proces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.2vw,16px)}
@media (max-width:900px){.proces{grid-template-columns:repeat(2,minmax(0,1fr))}}

.proces__stap{
  background:var(--neutral-100);
  border-radius:clamp(16px,1.6vw,22px);
  padding:clamp(20px,2vw,28px);
}

.proces__n{
  display:inline-grid;place-items:center;width:38px;height:38px;flex:none;
  margin-bottom:var(--space-4);
  border-radius:var(--radius-circle);
  background:var(--neutral-0);color:var(--text-muted);
  font:var(--weight-semibold) var(--text-xs)/1 var(--font-sans);
}
.proces__stap:first-child .proces__n{background:var(--lime-300);color:var(--teal-900)}
.proces h3{margin-bottom:8px}
.proces p{font-size:var(--text-sm);color:var(--text-muted)}

/* Op één kolom stapelen de kaartjes over elkaar. Elke kaart blijft plakken
   onder de header en de volgende schuift eroverheen, iets lager, zodat de
   rand van de vorige zichtbaar blijft — een stapeltje papier in plaats van
   vier losse blokken onder elkaar. Het nummer staat naast de kop in plaats
   van erboven, anders kost elke stap een halve schermhoogte.

   `display:block` is hier geen slordigheid maar de voorwaarde: een grid-item
   kan alleen binnen zijn eigen rij plakken, dus in een grid gebeurt er niets.
   ---------------------------------------------------------------------- */

@media (max-width:640px){
  .proces{
    display:block;
    --stack-top:84px;   /* de vastgeklapte header is 70px hoog */
    --stack-step:12px;  /* wat er van de kaart eronder zichtbaar blijft */
  }
  .proces__stap{
    position:sticky;
    top:calc(var(--stack-top) + var(--i,0) * var(--stack-step));
    margin-bottom:var(--space-3);
    display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:var(--space-3);row-gap:10px;align-items:start;
    padding:18px;
    /* Alle kaarten even hoog. Een kaart die korter is dan de kaart eronder
       dekt hem niet af, en dan piept er een staartje tekst onder de stapel
       uit. Deze maat past de langste stap (02) op een telefoon; wordt die
       tekst langer, dan moet dit getal mee. */
    min-height:190px;
    /* De kaarten hebben dezelfde kleur, dus de naad moet uit de schaduw
       komen: die valt omhoog, want de kaart komt van onderen. */
    box-shadow:0 -6px 18px rgba(6,42,58,.07);
  }
  .proces__stap:nth-child(1){--i:0}
  .proces__stap:nth-child(2){--i:1}
  .proces__stap:nth-child(3){--i:2}
  .proces__stap:nth-child(4){--i:3}
  .proces__stap:last-child{margin-bottom:0}

  /* Staartruimte, als eigen blokje en niet als padding of marge. Een plakkende
     kaart wordt begrensd door de content box van zijn ouder mínus zijn eigen
     marges: padding op de lijst rekt dat bereik niet op, en een marge onder de
     laatste kaart eet precies de ruimte op die diezelfde kaart nodig heeft om
     te blijven plakken. Zonder deze ruimte loopt de lijst leeg op het moment
     dat de vierde kaart op zijn plek komt: de stapel wordt dan tegen de
     onderrand omhoog geduwd, de hoogste kaart het eerst, en het trapje klapt
     door elkaar. Nu staat de stapel eerst even compleet en schuift hij daarna
     in één keer weg. */
  .proces::after{content:"";display:block;height:clamp(56px,8vh,80px)}

  .proces__n{grid-column:1;grid-row:1;width:34px;height:34px;margin-bottom:0}
  .proces__stap h3{grid-column:2;grid-row:1;align-self:center;margin-bottom:0;
    text-wrap:pretty}
  /* De tekst loopt onder het nummer door: op 375px is een kolom van 190px te
     smal voor een alinea. */
  .proces__stap p{grid-column:1 / -1;grid-row:2}
}

/* ---- "Wat wij niet zijn" stapelt ook -----------------------------------
   Dezelfde ingreep als bij .proces hierboven, en om dezelfde reden: onder
   640px kostten deze drie kaarten drie schermhoogtes onder elkaar. Ze plakken
   nu onder de header en schuiven over elkaar heen.

   Eén verschil met .proces: daar moest de naad uit een schaduw komen omdat de
   kaarten dezelfde kleur hebben. Hier verschillen de drie tinten al, dus de
   schaduw hoeft alleen diepte te geven en mag lichter.

   Lees verder bij .proces waarom `display:block`, de `min-height` en de
   `::after` alle drie nodig zijn — dat geldt hier onverkort.
   ---------------------------------------------------------------------- */

@media (max-width:640px){
  .grid--stapel{
    display:block;
    --stack-top:84px;   /* de vastgeklapte header is 70px hoog */
    --stack-step:12px;  /* wat er van de kaart eronder zichtbaar blijft */
  }
  .grid--stapel > .stack{
    position:sticky;
    top:calc(var(--stack-top) + var(--i,0) * var(--stack-step));
    margin-bottom:var(--space-3);
    /* Dekt de langste kaart ("Geen uitzendbureau") op 375px af. Wordt die
       tekst langer, dan moet dit getal mee — anders piept er een staartje
       onder de stapel uit. */
    min-height:248px;
    box-shadow:0 -6px 18px rgba(6,42,58,.06);
  }
  .grid--stapel > .stack:nth-child(1){--i:0}
  .grid--stapel > .stack:nth-child(2){--i:1}
  .grid--stapel > .stack:nth-child(3){--i:2}
  .grid--stapel > .stack:last-child{margin-bottom:0}
  .grid--stapel::after{content:"";display:block;height:clamp(56px,8vh,80px)}
}

/* ---- De twee heroknoppen naast elkaar op een telefoon ------------------
   Op lg-maat met 28px zijpadding passen "Plan een kennismaking" en de tweede
   knop samen niet op 375px, en klapte de tweede eronder — twee knoppen op
   volle hoogte onder elkaar duwden de hero over de vouw. Smaller mag: de
   tapdoelen blijven op volle hoogte. flex-wrap blijft aan als vangnet voor
   grote lettertypes. */

@media (max-width:640px){
  .hero-full .btn-row{gap:var(--space-2)}
  .hero-full .btn-row .btn--lg{padding-inline:12px;font-size:var(--text-sm)}
  /* De pijl moet eruit om beide knoppen op 375px op één regel te krijgen: hij
     kost 16px plus 8px tussenruimte, en dat is precies wat er tekortkomt. Hij
     is decoratief — de knoptekst zegt al waar je heen gaat. De knophoogte
     blijft 54px, dus het tapdoel verandert niet.
     flex-wrap staat nog aan: op een smaller scherm of bij een groter
     systeemlettertype klappen ze alsnog netjes onder elkaar. */
  .hero-full .btn-row .btn--lg .i{display:none}
}

/* De spoedregel stond als losse zin tussen de laatste sectie en de footer.
   Hij hoort bij de contactgegevens, niet als zwevende regel op de pagina. */
.spoed{display:none}

/* ---- Header staat boven de hero, niet erover ---------------------------
   De omlijnde knop uit het referentieontwerp verdween tegen de witte balk.
   Lime is in dit merk de kleur van de één belangrijkste actie, dus die zet
   ik terug — en de header krijgt zijn eigen strook boven de heroekaart.
   ---------------------------------------------------------------------- */

.nav__actions .btn--accent{
  background:var(--action-accent);color:var(--text-on-accent);
  box-shadow:none;padding-inline:26px;
}
.nav__actions .btn--accent:hover{background:var(--action-accent-hover);color:var(--text-on-accent)}

/* Geen fixed meer: de header neemt gewoon ruimte in en de hero begint eronder. */
.has-hero .header{position:sticky}

/* ---- Op mobiel klapt de header vast tegen de bovenrand -----------------
   De capsule zweefde met 14px lucht eromheen én ingezet van de zijkanten.
   Tijdens het scrollen schoof de pagina dwars door die strook: boven en
   naast de header zag je de tekst van de sectie erachter doorlopen. Zodra
   je scrollt zet de header zich daarom vast tegen de bovenrand, over de
   volle breedte, met alleen de onderhoeken rond.
   ---------------------------------------------------------------------- */

@media (max-width:1100px){
  /* Alleen de vorm loopt zacht mee; de maten klappen om. Een overgang op
     padding laat de pagina eronder een fractie meebewegen, en dat is precies
     het gewiebel dat we hier weghalen. */
  .nav{transition:border-radius var(--dur-base) var(--ease-standard),
                  box-shadow var(--dur-base) var(--ease-standard)}

  .header.is-scrolled{padding:0}
  .header.is-scrolled .nav{
    margin-inline:0;max-width:none;
    border-radius:0 0 clamp(18px,5vw,26px) clamp(18px,5vw,26px);
    border-top-color:transparent;border-inline-color:transparent;
    padding:12px var(--page-pad);
  }
}
.hero-full{padding-block:clamp(48px,6vw,88px) clamp(32px,4vw,56px)}
.band--tight{padding-block:clamp(20px,2.4vw,32px) clamp(10px,1.4vw,18px)}

/* ---- Swipen op mobiel --------------------------------------------------
   Kaartrasters worden op een telefoon een horizontale carrousel met
   scroll-snap. Native scroll, dus geen JavaScript en geen traagheid — en de
   kaarten blijven leesbaar breed in plaats van dat je eindeloos moet
   doorscrollen langs één kolom.
   ---------------------------------------------------------------------- */

@media (max-width:760px){
  .team,.kbgrid,.profielen,.onderdelen{
    display:flex;gap:var(--space-4);
    overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--page-pad);
    margin-inline:calc(var(--page-pad) * -1);
    padding-inline:var(--page-pad);
    padding-bottom:var(--space-2);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .team::-webkit-scrollbar,.kbgrid::-webkit-scrollbar,
  .profielen::-webkit-scrollbar,.onderdelen::-webkit-scrollbar{display:none}
  .team > *,.kbgrid > *{flex:0 0 min(78%,300px);scroll-snap-align:start}
  /* Profielkaarten dragen meer tekst, dus iets breder. */
  .profielen > *{flex:0 0 min(86%,340px);scroll-snap-align:start}
  /* De vier onderdelen: even breed als de profielkaarten, want ze dragen
     evenveel tekst plus een "Lees verder". Onder elkaar kostten ze vier
     schermhoogtes voor wat één rij doorverwijzingen is. */
  .onderdelen > *{flex:0 0 min(86%,340px);scroll-snap-align:start}

  /* De hint dat er meer naast staat: de laatste kaart mag niet tegen de rand */
  .team::after,.kbgrid::after,.profielen::after,
  .onderdelen::after{content:"";flex:0 0 var(--space-2)}
}

/* ---- Vragen: witte kaarten op grijs ------------------------------------
   De vragensectie zit niet in een .panel, dus de items stonden in dezelfde
   grijstint als de pagina — daardoor zag je alleen zwevende tekst met heel
   veel lucht ertussen. Elke vraag is nu een eigen witte kaart.
   ---------------------------------------------------------------------- */

.faq{gap:var(--space-2)}
.faq__item{background:var(--neutral-0);border-radius:clamp(14px,1.4vw,18px)}
.faq__q{font-size:clamp(16px,1.4vw,18px);padding-block:var(--space-4);gap:var(--space-4)}
.faq__mark{width:32px;height:32px}
.faq__a > div{padding-bottom:var(--space-4);font-size:var(--text-sm)}

/* ---- De vragensectie ---------------------------------------------------
   Zes witte kaartjes met lucht ertussen op een grijze pagina vielen weg: het
   verschil tussen wit en de paginakleur is te klein om een kaartrand te zien,
   dus je zag alleen zwevende regels tekst. De vragen staan nu als één blok
   met haarlijnen ertussen — één object in plaats van zes, en de lijnen dragen
   de structuur in plaats van de kaartranden.

   De kop houdt daarnaast zijn eigen kolom, maar smaller dan eerst, zodat de
   lege ruimte onder de knop niet het halve scherm beslaat.
   ---------------------------------------------------------------------- */

.vragen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,4vw,72px);align-items:start}
.vragen__kop{position:sticky;top:calc(var(--header-h,72px) + var(--space-6))}
.vragen__kop h2{margin-bottom:var(--space-4)}
.vragen__kop p{color:var(--text-muted);max-width:34ch;margin-bottom:var(--space-6)}

.faq--lijst{display:block;border-top:1px solid var(--border-subtle)}
.faq--lijst .faq__item{background:none;border-radius:0;padding-inline:0;
  box-shadow:none;border-bottom:1px solid var(--border-subtle)}
/* padding-inline op nul: de knop had er 6px en het antwoord niet, dus de vraag
   begon zes pixels verder naar rechts dan het antwoord eronder. Nu staan de
   vraag, het antwoord en de haarlijn op dezelfde x. */
.faq--lijst .faq__q{padding-block:var(--space-5);padding-inline:0;
  font-size:clamp(17px,1.5vw,19px);font-weight:var(--weight-semibold)}
.faq--lijst .faq__mark{background:var(--neutral-100);color:var(--teal-900)}
.faq--lijst .faq__q[aria-expanded="true"] .faq__mark{background:var(--lime-300)}
.faq--lijst .faq__a > div{padding-bottom:var(--space-5);max-width:60ch}

@media (max-width:900px){
  .vragen{grid-template-columns:minmax(0,1fr);gap:var(--space-7)}
  .vragen__kop{position:static}
}

/* ---- Iconenrail met gestapelde kaarten ---------------------------------
   Links een kolom ronde iconen, rechts één kaart tegelijk. De andere kaarten
   liggen eronder — vandaar de twee randen die onder de actieve kaart uitsteken.
   Zonder JS staan alle kaarten gewoon onder elkaar.
   ---------------------------------------------------------------------- */

.rail{display:grid;grid-template-columns:64px minmax(0,1fr);
  gap:clamp(20px,2.4vw,36px);align-items:start}
@media (max-width:760px){
  .rail{grid-template-columns:minmax(0,1fr)}
  .rail__nav{flex-direction:row !important;overflow-x:auto;scrollbar-width:none}
  .rail__nav::-webkit-scrollbar{display:none}
}

.rail__nav{display:flex;flex-direction:column;gap:var(--space-3)}
.rail__btn{
  width:56px;height:56px;flex:none;border:0;cursor:pointer;
  border-radius:var(--radius-circle);
  background:var(--neutral-100);color:var(--text-muted);
  display:grid;place-items:center;
  transition:var(--transition-control);
}
.rail__btn:hover{background:var(--neutral-200);color:var(--text-heading)}
.rail__btn.is-active{background:var(--teal-900);color:var(--lime-300)}

/* De stapel: twee randen die onder de actieve kaart uitsteken */
.rail__kaarten{position:relative;display:grid}
.js .rail__kaarten::before,.js .rail__kaarten::after{
  content:"";position:absolute;left:18px;right:18px;top:100%;
  height:14px;border-radius:0 0 clamp(16px,1.8vw,24px) clamp(16px,1.8vw,24px);
  background:var(--neutral-0);pointer-events:none;
}
.js .rail__kaarten::before{margin-top:-8px;opacity:.7}
.js .rail__kaarten::after{left:34px;right:34px;margin-top:2px;opacity:.45}

.rail__kaart{
  grid-area:1/1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(20px,2.6vw,40px);align-items:center;
  background:var(--neutral-0);border-radius:clamp(16px,1.8vw,24px);
  padding:clamp(24px,2.8vw,44px);
}
@media (max-width:860px){.rail__kaart{grid-template-columns:minmax(0,1fr)}}
/* Alle vier de kaarten lagen in dezelfde gridcel, dus de hoogte van de rij
   volgde de langste kaart (die met de rapportage). Bij de eerste kaart, die
   drie regels tekst heeft, stond er daardoor een half scherm leegte onder.
   De inactieve kaarten staan nu absoluut en tellen niet mee voor de hoogte;
   alleen de actieve kaart bepaalt hem. De hoogte verspringt bij het wisselen,
   en dat is beter dan een gat dat er altijd staat. */
.js .rail__kaart{position:absolute;top:0;left:0;width:100%;
  visibility:hidden;opacity:0;
  transition:opacity var(--dur-base) var(--ease-standard),visibility 0s linear var(--dur-base)}
.js .rail__kaart.is-active{position:relative;visibility:visible;opacity:1;
  transition-delay:0s,0s}

.rail__n{display:inline-block;margin-bottom:var(--space-4);
  font:var(--weight-medium) var(--text-sm)/1 var(--font-sans);color:var(--text-subtle)}
.rail__tekst h3{margin-bottom:10px}
.rail__tekst p{color:var(--text-muted);margin-bottom:var(--space-6);max-width:38ch}
.rail__beeld{border-radius:var(--radius-md);overflow:hidden}
.rail__beeld .report,.rail__beeld .portal{border:1px solid var(--border-subtle)}

/* Compacte lijstjes als beeld in de kaart */
.mini{background:var(--neutral-100);border-radius:var(--radius-md);
  padding:var(--space-5)}
.mini__rij{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--space-4);
  padding-block:11px;border-top:1px solid var(--border-subtle);font-size:var(--text-sm)}
.mini__rij:first-child{border-top:0}
.mini__rij time,.mini__rij b{color:var(--teal-600);font-weight:var(--weight-semibold);
  font-variant-numeric:tabular-nums}
.mini__rij span{color:var(--text-muted)}
@media (max-width:520px){.mini__rij{grid-template-columns:minmax(0,1fr);gap:2px}}

/* De kaarten liggen op elkaar in één rasterveld, dus de hoogte is die van de
   grootste kaart. Bovenaan uitlijnen, anders zweeft de kleinste kaart midden
   in een leeg vlak en loopt hij niet meer gelijk met de iconenrail. */
.rail__kaart{align-self:start;align-items:start}
.rail__beeld{width:100%}

/* ---- Profielkaarten bij "voor wie" -------------------------------------
   Geen foto's: een woonkamer zegt niets over de vraag of dit bij jouw
   organisatie past. Het aantal locaties, de nachtbezetting en de betaalbron
   wel — dus die staan er als feitenrijen in.

   Elk profiel heeft een eigen tint en een gekleurde kaartrand bovenaan. Twee
   grijze kaarten naast elkaar lezen als één blok tekst; twee kleuren maken in
   een oogopslag zichtbaar dat hier twee verschillende kanten staan.
   ---------------------------------------------------------------------- */

.profiel{
  --tint:var(--neutral-100);
  --accent:var(--teal-500);
  --lijn:var(--neutral-200);
  background:var(--tint);border-radius:clamp(16px,1.8vw,24px);
  padding:clamp(24px,2.6vw,36px);
}

.profiel--teal{--tint:var(--teal-50);--accent:var(--teal-500);--lijn:var(--teal-200)}
.profiel--lime{--tint:var(--lime-50);--accent:var(--lime-400);--lijn:var(--lime-200)}

.profiel .chip-i{background:var(--accent);color:var(--neutral-0);
  margin-bottom:var(--space-5)}
.profiel--lime .chip-i{color:var(--teal-900)}

.profiel h3{margin-bottom:8px}
.profiel > p{color:var(--text-muted);margin-bottom:var(--space-6)}
.profiel dl{margin:0;border-top:1px solid var(--lijn)}
.profiel dl > div{display:grid;grid-template-columns:130px minmax(0,1fr);
  gap:var(--space-4);padding-block:12px;border-bottom:1px solid var(--lijn)}
.profiel dl > div:last-child{border-bottom:0;padding-bottom:0}
.profiel dt{font:var(--weight-semibold) var(--text-sm)/1.4 var(--font-sans);
  color:var(--text-heading)}
.profiel dd{margin:0;font-size:var(--text-sm);color:var(--text-muted)}

@media (max-width:520px){
  .profiel dl > div{grid-template-columns:minmax(0,1fr);gap:2px}
}

/* De hint staat alleen op mobiel, waar de kaarten naast elkaar liggen. */
.swipehint{display:none}
@media (max-width:760px){
  .swipehint{display:block;margin-top:var(--space-4);
    font-size:var(--text-sm);color:var(--text-muted)}
}

/* ---- Kennisbankkaarten in kleur ----------------------------------------
   Vijf witte kaarten in een raster op een grijze pagina lezen als één vlak:
   het contrast tussen wit en de paginakleur is te klein om de kaarten los te
   zien. Elke kaart krijgt daarom een eigen tint. Dat maakt het raster ook
   navigeerbaar — je onthoudt "de groene" sneller dan "de derde".
   ---------------------------------------------------------------------- */

.kbkaart{--tint:var(--neutral-0);--chip:var(--neutral-100);--op:var(--teal-900)}
.kbkaart{background:var(--tint)}
.kbkaart .chip-i{background:var(--chip);color:var(--op)}

.kbkaart--teal{--tint:var(--teal-50);--chip:var(--teal-500);--op:var(--neutral-0)}
.kbkaart--lime{--tint:var(--lime-50);--chip:var(--lime-300);--op:var(--teal-900)}
.kbkaart--ijs {--tint:var(--teal-100);--chip:var(--neutral-0);--op:var(--teal-500)}
.kbkaart--vol {--tint:var(--teal-500);--chip:var(--neutral-0);--op:var(--teal-500)}
.kbkaart--diep{--tint:var(--teal-900);--chip:var(--lime-300);--op:var(--teal-900)}

/* De twee donkere kaarten draaien de tekstkleuren om. */
.kbkaart--diep h3,.kbkaart--vol h3{color:var(--neutral-0)}
.kbkaart--diep p,.kbkaart--vol p{color:rgba(255,255,255,.75)}
.kbkaart--diep .link-arrow,.kbkaart--vol .link-arrow{color:var(--lime-300)}

/* ---- Past dit bij ons: aanvinkbare stellingen --------------------------
   Was een genummerde lijst met de instructie "wie er drie of meer met ja
   beantwoordt, heeft een gesprek nodig" eronder. Dat vraagt van de lezer om
   te turven tijdens het lezen. Nu vink je aan en telt de pagina mee.
   ---------------------------------------------------------------------- */

.check{display:grid;gap:var(--space-3);margin-top:clamp(28px,3vw,40px)}
.check__item{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--space-4);align-items:start;
  padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);
  background:var(--neutral-0);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-standard),
             background var(--dur-fast) var(--ease-standard);
}
.check__item input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.check__vink{
  width:26px;height:26px;border-radius:8px;
  border:2px solid var(--border-subtle);background:var(--neutral-0);
  display:grid;place-items:center;color:transparent;
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard);
}
.check__vink .i{width:15px;height:15px}
.check__tekst{font-size:var(--text-md);color:var(--text-heading);line-height:1.45}
.check__item:hover{border-color:var(--teal-300)}
/* :has voor de versie zonder JavaScript, .is-aan zet het script erbij */
.check__item:has(input:checked),.check__item.is-aan{
  background:var(--lime-50);border-color:var(--lime-400)}
.check__item:has(input:checked) .check__vink,.check__item.is-aan .check__vink{
  background:var(--teal-900);border-color:var(--teal-900);color:var(--lime-300)}
.check__item:focus-within{outline:2px solid var(--teal-500);outline-offset:2px}

.check__uitslag{
  margin-top:clamp(24px,2.6vw,32px);max-width:60ch;
  font:var(--type-body-lg);color:var(--text-muted);
}
.check__uitslag[data-state="bezig"]{color:var(--text-body)}
.check__uitslag[data-state="raak"]{
  color:var(--text-heading);font-weight:var(--weight-semibold)}

/* ---- Kaartrasters in kleur ---------------------------------------------
   Dezelfde redenering als bij de kennisbank: drie of vier kaarten in dezelfde
   grijstint lezen als één vlak, want het verschil met de paginakleur is te
   klein om een kaartrand te zien. De tint hangt aan de plek in het raster en
   niet aan de aanroep, zodat elke kaartsectie op elke pagina meekomt zonder
   dat er per sectie een klasse bij moet.

   Alleen lichte tinten: deze kaarten dragen willekeurige inhoud (lijsten,
   pijllinks, definitielijsten) en op een donkere kaart moet je die allemaal
   apart bijkleuren. Het accent zit in de icoonchip.
   ---------------------------------------------------------------------- */

.grid > .card,.grid > .stack{
  --tint:var(--neutral-100);--chip:var(--neutral-0);--op:var(--teal-900);
}
.grid > .card:nth-child(3n+1),.grid > .stack:nth-child(3n+1){
  --tint:var(--teal-50);--chip:var(--teal-500);--op:var(--neutral-0)}
.grid > .card:nth-child(3n+2),.grid > .stack:nth-child(3n+2){
  --tint:var(--lime-50);--chip:var(--lime-300);--op:var(--teal-900)}
.grid > .card:nth-child(3n+3),.grid > .stack:nth-child(3n+3){
  --tint:var(--teal-100);--chip:var(--neutral-0);--op:var(--teal-500)}

.grid > .card{background:var(--tint)}
.grid > .card .chip-i,.grid > .stack .chip-i{background:var(--chip);color:var(--op)}

/* De losse blokjes in een grid--4 hebben geen kaartvlak; die krijgen het hier,
   zodat "vier delen" en "wat je ermee kunt" als hetzelfde soort ding lezen. */
.grid > .stack{
  background:var(--tint);border-radius:clamp(16px,1.8vw,24px);
  padding:clamp(20px,2.2vw,28px);
}

/* Op een donkere band werkt een lichte tint niet: daar blijft de kaart de
   doorzichtige variant die er al was. */
.band--deep .grid > .card,.band--ink .grid > .card,.band--dark .grid > .card,
.band--deep .grid > .stack,.band--ink .grid > .stack,.band--dark .grid > .stack{
  background:rgba(255,255,255,.06)}
.band--deep .grid > .card .chip-i,.band--ink .grid > .card .chip-i,
.band--dark .grid > .card .chip-i,.band--deep .grid > .stack .chip-i,
.band--ink .grid > .stack .chip-i,.band--dark .grid > .stack .chip-i{
  background:rgba(255,255,255,.12);color:var(--lime-300)}

/* Bijschriften staan op --text-muted (neutral-500). Op 12px haalt dat de
   4,5:1 van WCAG AA niet — ook niet op de oude grijze kaart. Binnen deze
   kaarten dus --text-body; dat komt op ruim 8:1 uit. */
.grid > .card .caption,.grid > .stack .caption{color:var(--text-body)}