/* ==========================================================================
   vorm.css — de nieuwe vormtaal
   Laadt als laatste, dus overschrijft site.css en look.css waar nodig.

   Wat hier staat is nieuw ten opzichte van versie 5: de dropdowns in de balk,
   het mobiele menu in groepen, en de sectietypen die de uitgebreide sitemap
   nodig heeft (scène, sectorkaarten, feitentabel, waarden, team, vacatures).

   Geen nieuwe kleuren en geen nieuwe letters: alles komt uit tokens.css. Het
   merk blijft, de vormen worden zachter en ronder.
   ========================================================================== */

/* ---- 1 · Takken in de balk ---------------------------------------------
   De nav__link was een <a>, hij is nu een <button> die een paneel opent. De
   knopreset staat hier zodat site.css onaangeroerd blijft.
   -------------------------------------------------------------------- */

/* De panelen zijn zo breed als de balk, dus ze hangen aan .nav en niet aan de
   losse tak. Daarom krijgt .nav de positiecontext en .nav__tak juist niet. */
.nav{position:relative}
.nav__tak{position:static}

.nav__links > .nav__tak > .nav__link{
  display:inline-flex;align-items:center;gap:6px;
  border:0;background:transparent;cursor:pointer;
  font:var(--weight-medium) var(--text-base)/1 var(--font-sans);
  color:var(--text-body);padding:10px 16px;
  border-radius:var(--radius-pill);
  transition:var(--transition-control);
}
.nav__tak > .nav__link .i{
  width:15px;height:15px;color:var(--text-subtle);
  transition:transform var(--dur-fast) var(--ease-standard);
}
.nav__tak > .nav__link:hover{color:var(--teal-500);background:var(--surface-card-muted)}

/* De open tak krijgt een zacht kussen in plaats van alleen een kleurtje: hij
   moet zichtbaar bij het paneel eronder horen. Teal en geen lime: lime is de
   signaalkleur en staat een paar centimeter verderop al op de knop. Twee
   limegroene vlakken naast elkaar vechten om dezelfde aandacht. */
.nav__tak.is-open > .nav__link{
  color:var(--teal-700);background:var(--teal-50);
}
.nav__tak.is-open > .nav__link .i{transform:rotate(180deg);color:var(--teal-500)}

/* De tak waar je in zit: hetzelfde zachte kussen als de open stand. Er stond
   een limestreep onder het label, maar dat leest als een tabblad en het vecht
   met de knop rechts, die dezelfde kleur heeft. */
.nav__tak > .nav__link[data-current="true"]{
  background:var(--teal-50);color:var(--teal-700);
  font-weight:var(--weight-semibold);
}

/* Het paneel: één kaart over de volle breedte van de balk, net eronder. Een
   brug van 12px vangt de muis op weg van de knop naar het paneel. */
.drop{
  position:absolute;top:100%;left:0;right:0;
  padding-top:20px;z-index:50;
}
.drop::before{content:"";position:absolute;inset:0 0 auto;height:20px}
.drop__binnen{
  background:var(--surface-card);
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-lg),var(--shadow-inset-hairline);
  padding:clamp(28px,3vw,44px) clamp(28px,3.4vw,52px);
  display:grid;gap:var(--space-10);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  animation:drop-in var(--dur-fast) var(--ease-out);
}
@keyframes drop-in{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .drop__binnen{animation:none}
}

.drop__kolom{display:grid;align-content:start;gap:2px}

/* Kolomkop, geen eyebrow: hij staat boven een linklijst en niet boven een kop,
   en doet het werk van een kolomkop in een tabel. */
.drop__groep{
  font:var(--weight-bold) var(--text-xs)/1.2 var(--font-sans);
  color:var(--text-subtle);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  margin-bottom:var(--space-4);
}

/* 18px maakte van een dropdown met zes items een tweede pagina. Op 15px lees
   je de kolom in één blik, en dat is waar een menu voor is. */
.drop__item{
  display:block;padding:8px 12px;margin-left:-12px;
  border-radius:var(--radius-sm);
  font:var(--weight-medium) 15px/1.35 var(--font-sans);
  color:var(--text-heading);letter-spacing:var(--tracking-tight);
  transition:var(--transition-control);
}
.drop__item:hover{background:var(--surface-card-muted);color:var(--teal-500);
  text-decoration:none}

/* De pagina waar je op staat: een zacht vlak, verder niets. Er stond een
   streepje links tegenaan; dat maakte er een actieve tabblad-markering van
   terwijl dit gewoon "hier ben je" moet zeggen. */
.drop__item[aria-current="page"]{
  background:var(--teal-50);color:var(--teal-700);
  font-weight:var(--weight-semibold);
}

/* ---- 1b · De header die vastklapt --------------------------------------
   Op mobiel klapt de balk bij het scrollen van een zwevende capsule naar een
   vaste balk tegen de bovenrand. Dat gebeurde met een sprong: de padding ging
   van 9px naar 20px en de header-padding van 14px naar 0, dus het logo schoof
   11px opzij, de balk werd 6px hoger, en de bovenkant verspringt 14px. En
   omdat `transition` alleen border-radius en box-shadow dekte, klapten die
   maten er hard doorheen.

   De oplossing is de maten gelijk te houden in beide standen en de verplaatsing
   met transform te doen. Transform loopt op de compositor: geen herberekening
   van de opmaak, dus geen sprong en geen gewiebel van de pagina eronder. Wat
   nog verandert zijn de hoeken, de schaduw en de randkleur, en die lopen alle
   drie zacht mee.
   -------------------------------------------------------------------- */

@media (max-width:1100px){
  /* Beide standen dezelfde doos. Hierdoor staat het logo altijd op dezelfde
     plek en blijft de balk even hoog. */
  .header,
  .header.is-scrolled{padding:14px 0}
  .nav,
  .header.is-scrolled .nav{padding:12px var(--page-pad)}

  .nav{
    transition:border-radius var(--dur-base) var(--ease-standard),
               box-shadow var(--dur-base) var(--ease-standard),
               border-color var(--dur-base) var(--ease-standard),
               transform var(--dur-base) var(--ease-standard);
  }

  /* De 14px lucht boven de capsule wegdraaien in plaats van wegrekenen. */
  .header.is-scrolled .nav{transform:translateY(-14px)}
}

@media (max-width:1100px) and (prefers-reduced-motion:reduce){
  .nav{transition:none}
}

/* ---- 1c · De heroknoppen op mobiel -------------------------------------
   look.css knijpt deze knoppen op mobiel naar 12px zijruimte, zodat ze op een
   scherm van 375px allebei op één regel passen. Dat lukt, maar bij 54px hoog
   en 12px opzij wordt de pil bijna rond: de knop oogt dik terwijl er op de
   meeste telefoons ruimte zat.

   Nu groeit de zijruimte mee met het scherm — smal genoeg om op 375px nog
   naast elkaar te staan, ruimer zodra er plek is.
   -------------------------------------------------------------------- */

@media (max-width:760px){
  .hero-full .btn-row{gap:var(--space-3);margin-top:40px}
  .hero-full .btn-row .btn--lg{
    height:50px;
    padding-inline:clamp(18px,5vw,32px);
    font-size:var(--text-base);
  }
}

/* ---- 2 · Het mobiele menu als accordeon --------------------------------
   Vijf takken met elk zes pagina's zijn dertig regels. Dicht beginnen houdt de
   vijf keuzes op één scherm.
   -------------------------------------------------------------------- */

.navpanel__links{margin-top:var(--space-6)}

.navpanel__tak{border-bottom:1px solid var(--border-subtle)}
.navpanel__tak:first-child{border-top:1px solid var(--border-subtle)}

.navpanel__knop{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  width:100%;padding-block:clamp(16px,2.4vh,22px);
  border:0;background:transparent;cursor:pointer;text-align:left;
  font:var(--weight-semibold) clamp(22px,6vw,28px)/1.2 var(--font-display);
  letter-spacing:var(--tracking-tight);color:var(--text-heading);
}
.navpanel__knop .i{
  width:22px;height:22px;color:var(--text-subtle);flex:none;
  transition:transform var(--dur-base) var(--ease-standard);
}
.navpanel__tak.is-open .navpanel__knop{color:var(--teal-500)}
.navpanel__tak.is-open .navpanel__knop .i{transform:rotate(180deg);color:var(--teal-500)}

.navpanel__sub{
  overflow:hidden;
  transition:height var(--dur-base) var(--ease-standard);
}

/* De open tak ligt in een eigen getinte kaart. Zonder dat vlak loopt de
   sublijst visueel door in de takken eronder en wordt het één lap tekst. */
.navpanel__kaart{
  background:var(--surface-page-alt);
  border-radius:var(--radius-xl);
  padding:var(--space-6) var(--space-5) var(--space-5);
  margin-bottom:var(--space-5);
}
.navpanel__groep + .navpanel__groep{margin-top:var(--space-6)}

/* Kolomkop, geen eyebrow: staat boven een linklijst, niet boven een kop. */
.navpanel__groepkop{
  font:var(--weight-bold) var(--text-xs)/1.2 var(--font-sans);
  color:var(--text-subtle);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  margin-bottom:var(--space-3);
}
.navpanel__sub a{
  display:block;padding:11px 0;border:0;
  font:var(--weight-medium) clamp(17px,4.4vw,19px)/1.3 var(--font-sans);
  color:var(--text-heading);letter-spacing:var(--tracking-tight);
}
.navpanel__sub a:hover{color:var(--teal-500);text-decoration:none}
.navpanel__sub a[aria-current="page"]{color:var(--teal-500);
  font-weight:var(--weight-semibold)}

/* De onderbalk plakt aan de onderkant: de knop moet bereikbaar zijn zonder
   eerst het hele menu door te scrollen.

   De onderrandruimte zat op .navpanel zelf. Daardoor zweefde de balk een paar
   tientallen pixels boven de onderkant en schoof de menulijst in dat gat door
   — je zag menu-items onder de knop uitkomen. De ruimte hoort dus ín de balk,
   en de balk loopt tot de randen van het paneel. */
.navpanel{padding-bottom:0}
.navpanel__cta{
  position:sticky;bottom:0;margin-top:auto;
  background:var(--surface-card);
  margin-inline:calc(var(--page-pad) * -1);
  padding:var(--space-5) var(--page-pad)
          calc(var(--space-5) + env(safe-area-inset-bottom));
  border-top:1px solid var(--border-subtle);
}
.navpanel__close{
  border:1px solid var(--border-default);
  border-radius:var(--radius-circle);
}

/* ---- 2b · Ritme terug in de pagina --------------------------------------
   look.css zette alle donkere varianten uit: "alles staat op wit". Gevolg is
   dat elke sectie dezelfde witte kaart werd en de pagina één lang vlak is —
   je leest elf secties zonder ooit te merken dat je ergens anders bent.

   Hier komen twee registers terug, en niet meer dan twee. Nacht draagt de
   scène, ijs draagt de secties die iets nieuws beginnen. De rest blijft wit.
   -------------------------------------------------------------------- */

.band--nacht > .wrap > .panel{
  background:var(--gradient-teal);
  color:var(--text-on-inverse);
  box-shadow:var(--shadow-lg);
}
.band--nacht h2,.band--nacht h3{color:var(--text-on-inverse)}
.band--nacht p{color:var(--text-on-inverse-muted)}
.band--nacht .sechead h2{color:var(--text-on-inverse)}
.band--nacht .link-arrow{color:var(--lime-300)}
.band--nacht .link-arrow:hover{color:var(--lime-200)}

/* --gradient-ice loopt van wit naar #E7F2F1, en de pagina is al bijna wit. Op
   een scherm zag je het verschil niet: elf secties lang stond alles op
   hetzelfde vlak. Nu een vlakke tint die je wél ziet. */
.band--ijs > .wrap > .panel{
  background:var(--teal-100);
  box-shadow:none;
}
.band--ijs .card,.band--ijs .punt,.band--ijs .rol,.band--ijs .feiten{
  background:var(--neutral-0);
}

/* look.css geeft kaarten in een grid een tint volgens een cyclus van drie:
   teal-50, lime-50, teal-100. Die kleuren blijven — ze maken de rij levendig en
   dat is precies de bedoeling.

   Alleen botst de derde tint met deze band, want die is óók teal-100. Daar
   verdween de derde kaart in. Dus niet de hele cyclus vervangen, alleen die ene
   kaart wit maken zodat hij weer uit de band komt.

   De chipregel moet even specifiek zijn als `.grid > .stack .chip-i` in
   look.css, anders wint die en blijft de chip wit op wit. */
.band--ijs .grid > .stack:nth-child(3n+3),
.band--ijs .grid > .card:nth-child(3n+3){
  background:var(--neutral-0);
  box-shadow:var(--shadow-card);
}
.band--ijs .grid > .stack:nth-child(3n+3) .chip-i,
.band--ijs .grid > .card:nth-child(3n+3) .chip-i{
  background:var(--teal-100);color:var(--teal-600);
}

/* Een derde register: zacht limegroen. Voor de sectie die iets vraagt of iets
   aanbiedt, tegenover ijs dat uitlegt en nacht dat vertelt. */
.band--lime > .wrap > .panel{
  background:var(--lime-100);
  box-shadow:none;
}
.band--lime .link-arrow{color:var(--teal-700)}
.band--lime .card,.band--lime .punt{background:var(--neutral-0)}

/* De panelen kregen box-shadow:none, waardoor een witte kaart op een witte
   pagina geen kaart meer is. Een haarlijn is genoeg om de rand terug te geven
   zonder dat het weer een doos wordt. */
.panel{box-shadow:var(--shadow-inset-hairline)}
.band--nacht > .wrap > .panel{border:0}

/* ---- 3 · De scène -------------------------------------------------------
   De sectie direct onder de hero. Eén moment, één antwoord. Donker, want hij
   speelt zich 's avonds af en hij moet duidelijk een ander register zijn dan
   de argumentatie die eronder komt.
   -------------------------------------------------------------------- */

/* Vraag links, antwoord rechts — op desktop. Op mobiel onder elkaar.

   Dit blok is een paar keer heen en weer gegaan. Twee kolommen werkten niet
   zolang er drie losse alinea's rechts stonden: dan las je een kolom vol tekst
   naast een kop. Met één samengevoegde alinea klopt de verhouding wel. */
.scene{display:grid;gap:var(--space-8)}
@media (min-width:900px){
  .scene{grid-template-columns:1.1fr 1fr;gap:var(--space-16);align-items:start}
}

/* De dubbele klasse is nodig: `.band--nacht p` hierboven is specifieker dan een
   losse klasse, en zette vraag en merknaam allebei op 72% wit. */
.scene .scene__vraag{
  font:var(--weight-semibold) var(--t-display)/1.05 var(--font-display);
  letter-spacing:var(--tracking-tighter);color:var(--text-on-inverse);
  text-wrap:balance;
}

/* Wit, niet lime. De merknaam is hier het antwoord op de vraag ernaast en moet
   even hard staan als die vraag; lime maakte er een bijschrift van. */
.scene .scene__ons{
  font:var(--weight-semibold) var(--t-h3)/1.3 var(--font-sans);
  color:var(--text-on-inverse);letter-spacing:var(--tracking-tight);
}
.scene__uitleg{
  margin-top:var(--space-4);max-width:46ch;
  color:var(--text-on-inverse-muted);font:var(--type-body-lg);
}
.scene__uitleg strong{color:var(--text-on-inverse);font-weight:var(--weight-semibold)}

.scene__tijd{
  display:inline-flex;align-items:center;gap:8px;
  font:var(--weight-bold) var(--text-sm)/1 var(--font-mono);
  color:var(--lime-300);letter-spacing:var(--tracking-wide);
  margin-bottom:var(--space-5);
}
.scene__tijd::before{
  content:"";width:8px;height:8px;border-radius:var(--radius-circle);
  background:var(--lime-300);
}

/* De drie beelden rechts: opnemen, beoordelen, overdragen. */

/* De regel die de taalregel bewaakt: 22:00 mag niet als nachtdienst lezen. */

/* ---- 4 · Sectorkaarten --------------------------------------------------
   Groeit mee met SECTOREN. Auto-fit, dus een zesde sector breekt niets.
   -------------------------------------------------------------------- */

/* Swipebaar in plaats van afbrekend. Vijf kaarten in een raster werden 3 + 2
   met een gat rechtsonder; als strook lees je ze als één reeks en schuif je
   verder. Scroll-snap zorgt dat je nooit tussen twee kaarten blijft hangen. */
.sectoren{
  display:grid;grid-auto-flow:column;grid-auto-columns:300px;
  gap:var(--space-5);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-bottom:var(--space-4);
  /* Ruimte voor de schaduw van de kaarten, anders wordt die afgesneden. */
  margin-inline:-4px;padding-inline:4px;
}
.sectoren > *{scroll-snap-align:start;min-width:0}

/* Hier stond een uitzondering die boven 1280px terugviel op gelijke kolommen.
   Vijf kaarten in de breedte persen gaf 230px per kaart: koppen braken midden
   in een woord, "Gehandicaptenzorg" liep buiten zijn kaart, en de knoppen
   stonden niet meer op één lijn. Een strook blijft een strook. */

.sectorkaart{
  display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-8);
  background:var(--surface-card);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card),var(--shadow-inset-hairline);
  transition:var(--transition-surface);
}
.sectorkaart:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px);
  text-decoration:none}
.sectorkaart h3{
  font:var(--weight-semibold) var(--t-h3)/1.25 var(--font-display);
  color:var(--text-heading);letter-spacing:var(--tracking-tight);
}
.sectorkaart p{color:var(--text-body);font-size:var(--text-sm);
  line-height:var(--leading-relaxed);flex:1}
.sectorkaart__wet{
  align-self:flex-start;
  padding:5px 12px;border-radius:var(--radius-pill);
  background:var(--surface-accent-soft);color:var(--teal-700);
  font:var(--weight-semibold) var(--text-xs)/1 var(--font-sans);
}
.sectorkaart__meer{
  display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-2);
  color:var(--text-link);font:var(--weight-semibold) var(--text-sm)/1 var(--font-sans);
}
.sectorkaart:hover .sectorkaart__meer{color:var(--text-link-hover)}
.sectorkaart__meer .i{width:16px;height:16px;
  transition:transform var(--dur-fast) var(--ease-standard)}
.sectorkaart:hover .sectorkaart__meer .i{transform:translateX(3px)}

/* ---- 5 · De feitentabel op een sectorpagina -----------------------------
   Vijf velden, altijd dezelfde vijf. Ze dwingen af dat elke sector klopt in
   plaats van dat het een sjabloon met een andere kop wordt.
   -------------------------------------------------------------------- */

.feiten{
  display:grid;gap:0;
  background:var(--surface-card);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card),var(--shadow-inset-hairline);
  overflow:hidden;
}
.feiten__rij{
  display:grid;gap:var(--space-2);
  padding:var(--space-6) var(--space-8);
}
.feiten__rij + .feiten__rij{border-top:1px solid var(--border-subtle)}
@media (min-width:720px){
  .feiten__rij{grid-template-columns:15rem 1fr;gap:var(--space-8);align-items:baseline}
}
.feiten__l{
  font:var(--weight-semibold) var(--text-sm)/1.3 var(--font-sans);
  color:var(--text-muted);
}
.feiten__v{color:var(--text-heading);font:var(--type-body);
  line-height:var(--leading-relaxed)}

/* ---- 6 · Waarden --------------------------------------------------------
   Waar wij voor staan. Genummerd, niet met iconen: zes iconen naast elkaar
   worden zes plaatjes die niemand leest.
   -------------------------------------------------------------------- */

.waarden{display:grid;gap:var(--space-6);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.waarde{
  padding:var(--space-8);border-radius:var(--radius-xl);
  background:var(--surface-page-alt);
  border:1px solid var(--border-subtle);
}
.waarde__n{
  font:var(--weight-bold) var(--text-sm)/1 var(--font-mono);
  color:var(--teal-400);
}
.waarde h3{
  margin-top:var(--space-4);
  font:var(--weight-semibold) var(--t-h3)/1.25 var(--font-display);
  color:var(--text-heading);letter-spacing:var(--tracking-tight);
}
.waarde p{margin-top:var(--space-3);color:var(--text-body);font-size:var(--text-sm);
  line-height:var(--leading-relaxed)}

/* ---- 7 · Team -----------------------------------------------------------
   Rollen, geen portretten. Zolang er geen foto's, namen en BIG-nummers zijn,
   staat hier wat er wél waar is: welke disciplines dienst draaien. Lege
   portretkaders zijn een aankondiging van een team, geen team.
   -------------------------------------------------------------------- */

.rollen{display:grid;gap:var(--space-4)}

/* Op de telefoon een swipestrook, net als de kernwaarden: drie disciplines die
   je naast elkaar wilt kunnen leggen. Onder elkaar waren het drie schermen. */
@media (max-width:760px){
  .rollen{
    grid-auto-flow:column;grid-template-columns:none;
    grid-auto-columns:84%;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    padding-bottom:var(--space-4);
    margin-inline:-4px;padding-inline:4px;
  }
  .rollen > *{scroll-snap-align:start;margin:0}
  .rollen::-webkit-scrollbar{height:4px}
  .rollen::-webkit-scrollbar-thumb{
    background:var(--border-default);border-radius:4px;
  }
}
.rol{
  display:grid;gap:var(--space-4);align-items:start;
  padding:var(--space-8);
  border-radius:var(--radius-xl);
  background:var(--surface-card);
  box-shadow:var(--shadow-card),var(--shadow-inset-hairline);
}
@media (min-width:820px){
  .rol{grid-template-columns:auto 16rem 1fr;gap:var(--space-8);align-items:center}
}
.rol__chip{
  width:52px;height:52px;border-radius:var(--radius-circle);
  display:grid;place-items:center;
  background:var(--surface-accent-soft);color:var(--teal-500);
}
.rol__chip .i{width:24px;height:24px}
.rol h3{
  font:var(--weight-semibold) var(--t-h3)/1.25 var(--font-display);
  color:var(--text-heading);letter-spacing:var(--tracking-tight);
}
.rol__eis{margin-top:4px;font-size:var(--text-sm);color:var(--text-muted)}
.rol p.rol__wat{color:var(--text-body);line-height:var(--leading-relaxed)}

/* ---- 7b · Het omgekeerde van een reguliere baan -------------------------
   Vier punten op Werken bij ons. Geen nummers en geen iconen: het zijn geen
   stappen en geen categorieën, het zijn vier keer hetzelfde argument vanuit
   een andere hoek.
   -------------------------------------------------------------------- */

.punten{display:grid;gap:var(--space-5);
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}

/* ---- Kaartenrijen stapelen op de telefoon ------------------------------
   Elke rij van drie of vier kaarten werd op mobiel een stapel van drie tot
   vier schermen hoog waar je doorheen scrolt zonder dat er iets gebeurt.

   Nu blijft elke kaart plakken net onder de header, iets lager dan de vorige,
   zodat de volgende eroverheen schuift en er een echte stapel ontstaat. De
   randjes van de kaarten eronder blijven zichtbaar, dus je ziet hoeveel er nog
   komen en hoeveel je gehad hebt.

   Alleen kaartenrijen. `.grid--split` blijft met rust: dat is kop naast tekst
   en dat hoort gewoon onder elkaar te vallen. De sectorkaarten blijven een
   swipestrook — vijf stuks stapelen is er te veel van het goede.
   -------------------------------------------------------------------- */

@media (max-width:760px){
  /* .waarden staat hier niet bij: die kaarten swipen (zie hieronder). */
  .punten,
  .grid--3,
  .grid--4{
    display:grid;grid-template-columns:1fr;
    gap:var(--space-4);
    /* Sticky werkt niet als een voorouder overflow afkapt. */
    overflow:visible;
    /* Een sticky kaart plakt alleen binnen zijn eigen container. Zonder deze
       ruimte eronder duwt de onderrand van de rij de hele stapel meteen weer
       omhoog, en dan zie je de kaarten wel over elkaar schuiven maar nooit
       stilstaan. Dit is de loopruimte die de stapel nodig heeft.

       32vh was te veel: na de laatste kaart bleef er een half leeg scherm
       staan voordat de volgende sectie begon. 10vh ook nog — samen met de marge
       van de tekst eronder werd het gat 188px. Een vaste maat houdt het gat
       gelijk op elke schermhoogte. */
    padding-bottom:var(--space-6);
  }

  .punten > *,
  .grid--3 > *,
  .grid--4 > *{
    position:sticky;
    border-radius:var(--radius-xl);
    /* Een kaart die je doorheen kunt kijken is geen stapel. */
    background:var(--neutral-0);
    box-shadow:var(--shadow-md),var(--shadow-inset-hairline);
    padding:var(--space-6);
    margin:0;
  }

  /* De getinte varianten houden hun eigen kleur; alleen doorzichtige kaarten
     krijgen wit. */
  .punt--teal{background:var(--teal-100)}
  .punt--lime{background:var(--lime-100)}
  .punt--diep{background:var(--teal-900)}
  .waarde{background:var(--surface-page-alt)}

  /* Header (70px) plus wat lucht, en per kaart 14px lager zodat de rand van
     de vorige zichtbaar blijft. */
  .punten > *:nth-child(1),
  .grid--3 > *:nth-child(1),.grid--4 > *:nth-child(1){top:100px}
  .punten > *:nth-child(2),
  .grid--3 > *:nth-child(2),.grid--4 > *:nth-child(2){top:114px}
  .punten > *:nth-child(3),
  .grid--3 > *:nth-child(3),.grid--4 > *:nth-child(3){top:128px}
  .punten > *:nth-child(4),
  .grid--3 > *:nth-child(4),.grid--4 > *:nth-child(4){top:142px}
  .punten > *:nth-child(5),
  .grid--3 > *:nth-child(5),.grid--4 > *:nth-child(5){top:156px}
}

/* Wie beweging heeft uitgezet krijgt gewoon kaarten onder elkaar. Plakken is
   op zichzelf geen animatie, maar het verschuift wél wat je verwacht. */
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .punten > *,.grid--3 > *,.grid--4 > *{position:static}
}
.punt{
  padding:var(--space-8);border-radius:var(--radius-xl);
  background:var(--surface-card);
  box-shadow:var(--shadow-card),var(--shadow-inset-hairline);
}
/* Vier routes, vier tinten. Zonder dat waren het vier identieke witte kaarten
   en moest je ze alle vier lezen om te zien welke van jou was. */
.punt--teal{background:var(--teal-100);box-shadow:none}
.punt--teal .rol__chip{background:var(--teal-500);color:#fff}
.punt--lime{background:var(--lime-100);box-shadow:none}
.punt--lime .rol__chip{background:var(--lime-300);color:var(--teal-900)}
/* Wit mét haarlijn. Op neutral-100 was deze kaart bijna niet te onderscheiden
   van het witte paneel eronder: dan zweeft de tekst en is het geen kaart meer. */
.punt--ijs{background:var(--neutral-0);
  box-shadow:var(--shadow-card),var(--shadow-inset-hairline)}
.punt--ijs .rol__chip{background:var(--teal-100);color:var(--teal-600)}

.punt--diep{background:var(--teal-900);box-shadow:none}
.punt--diep .rol__chip{background:rgba(255,255,255,.12);color:var(--lime-300)}
/* Dubbele klasse, want `.punt h3` staat verderop met dezelfde specificiteit en
   won daardoor: de kop kreeg inktblauw op een inktblauwe kaart. */
.punt.punt--diep h3{color:var(--text-on-inverse)}
.punt.punt--diep p{color:var(--text-on-inverse-muted)}

.punt h3{
  font:var(--weight-semibold) var(--t-h3)/1.25 var(--font-display);
  color:var(--text-heading);letter-spacing:var(--tracking-tight);
}
.punt p{margin-top:var(--space-3);color:var(--text-body);font-size:var(--text-sm);
  line-height:var(--leading-relaxed)}

/* De waarde waar een belofte uit volgt, onderaan de kaart. Onder en niet boven
   de kop: boven zou het een label zijn dat de kop categoriseert, en die staan
   wij niet toe. */
.punt__bron{
  margin-top:var(--space-5);padding-top:var(--space-4);
  border-top:1px solid var(--border-subtle);
  font-size:var(--text-xs);color:var(--text-muted);
}
.punt__bron strong{color:var(--teal-600);font-weight:var(--weight-semibold)}

/* ---- 7c · Het spoedblok op Contact --------------------------------------
   Rood en niet lime. Dit is de enige plek op de site waar wij iets uitsluiten
   dat levensbedreigend kan zijn; dat mag niet dezelfde kleur hebben als een
   knop waar je op klikt om kennis te maken.
   -------------------------------------------------------------------- */

.urgent{
  display:grid;gap:var(--space-5);align-items:start;
  padding:var(--space-8);
  border-radius:var(--radius-xl);
  background:var(--danger-100);
  box-shadow:inset 0 0 0 1px rgba(150,34,43,.18);
}
@media (min-width:720px){
  .urgent{grid-template-columns:auto 1fr;gap:var(--space-6)}
}
.urgent__chip{
  width:52px;height:52px;border-radius:var(--radius-circle);
  display:grid;place-items:center;
  background:var(--danger-500);color:#fff;
}
.urgent__chip .i{width:26px;height:26px}
.urgent h2{
  font:var(--weight-semibold) var(--t-h3)/1.25 var(--font-display);
  color:var(--danger-700);letter-spacing:var(--tracking-tight);
}
.urgent p{margin-top:var(--space-3);color:var(--teal-900);
  line-height:var(--leading-relaxed);max-width:62ch}

/* De uitsluitingslijst gebruikt kruisjes in plaats van vinkjes. */
.band--ijs .checks .i,.checks li .i{flex:none}
#nietpermail .checks .i{color:var(--danger-500)}

/* ---- 7c2 · De stellingenlijst -------------------------------------------
   Zes stellingen op 18px werden zes koppen: elke regel las als een uitspraak
   waar je even bij moest stilstaan, terwijl je ze juist snel wilt afvinken.
   Op 16px is het weer een lijst.
   -------------------------------------------------------------------- */

.check__tekst{font-size:var(--text-base);line-height:1.5}
.check__item{padding:clamp(13px,1.4vw,17px) clamp(16px,1.8vw,22px)}
.check__vink{width:24px;height:24px}

/* ---- 7d · Citaat ---------------------------------------------------------
   Een citaat is bewijs, geen tweede kop. Hij stond op --t-h2, precies de maat
   van de sectiekop erboven, en vocht daar dus mee: op desktop las je twee
   koppen achter elkaar en op mobiel viel de sectiekop helemaal weg achter de
   quote.

   Nu een getint vlak met de tekst op 24px. Groot genoeg om op te vallen tussen
   lopende tekst, klein genoeg om onder de kop te blijven staan. Het vlak doet
   het werk dat de grootte eerst deed.
   -------------------------------------------------------------------- */

.citaat{
  margin:0;
  background:var(--teal-50);
  border-radius:var(--radius-xl);
  padding:clamp(24px,3vw,40px);
}
.citaat blockquote{
  margin:0;max-width:46ch;
  font:var(--weight-medium) clamp(18px,1.9vw,24px)/1.45 var(--font-sans);
  color:var(--text-heading);letter-spacing:var(--tracking-tight);
  text-wrap:pretty;
}
.citaat blockquote::before{content:"“"}
.citaat blockquote::after{content:"”"}
.citaat figcaption{
  margin-top:var(--space-5);max-width:52ch;
  font-size:var(--text-sm);color:var(--text-muted);
  line-height:var(--leading-relaxed);
}
.citaat figcaption::before{content:"— "}

/* ---- 8 · Vacatures ------------------------------------------------------
   VACATURES is nu leeg, en dan toont de pagina de open inschrijving. Zodra er
   echte vacatures zijn vult de lijst zich en verschijnen deze kaarten.
   -------------------------------------------------------------------- */

.vacs{display:grid;gap:var(--space-4)}
.vac{
  display:grid;gap:var(--space-4);
  padding:var(--space-8);border-radius:var(--radius-xl);
  background:var(--surface-card);
  box-shadow:var(--shadow-card),var(--shadow-inset-hairline);
}
@media (min-width:820px){
  .vac{grid-template-columns:1fr auto;align-items:center}
}
.vac h3{
  font:var(--weight-semibold) var(--t-h3)/1.25 var(--font-display);
  color:var(--text-heading);letter-spacing:var(--tracking-tight);
}
.vac__meta{margin-top:6px;color:var(--text-muted);font-size:var(--text-sm)}

/* ---- 8b · Meer lime ------------------------------------------------------
   Lime was tot nu toe alleen de knopkleur, en daardoor stond de accentkleur
   van het merk op precies één plek per scherm. Hier krijgt hij werk te doen:
   een streep onder elke sectiekop, de vinkjes, de nummers en de iconen.

   Let op de tint. --lime-300 is de merkkleur en die is bedoeld voor vlakken,
   niet voor tekst: op wit haalt hij geen enkele contrastnorm. Waar lime tekst
   of een dun lijntje wordt, gebruiken we --lime-600.
   -------------------------------------------------------------------- */

/* Geen decoratieve accentstreep. Hier stond een kort limebalkje onder elke
   sectiekop en een limerand over de bovenkant van elke kaart. Allebei weg: het
   leest als AI-sjabloon en het draagt niets bij aan de hiërarchie, want de kop
   en de witruimte doen dat werk al. Lime blijft, maar alleen waar hij werk
   doet — knop, chip, vinkje, cijfer, icoonvlak, actieve stand.

   Vinkjes. Stonden in teal en verdwenen daardoor in de tekst ernaast. */
.checks .i{color:var(--lime-600)}

/* De genummerde waarden op Over ons. */
.waarde__n{color:var(--lime-600)}

/* De rol van een kernwaarde — "de norm", "de vorm", "de toon". Die stond in
   .waarde__n, en die klasse is gemaakt voor cijfers en staat dus in monospace.
   Met woorden erin las het als broncode in plaats van als merktaal. */
.waarde__rol{
  font:var(--weight-semibold) var(--text-sm)/1 var(--font-sans);
  color:var(--teal-500);letter-spacing:var(--tracking-tight);
}

/* Drie waarden, drie tinten. Als witte kaarten op een witte band waren het drie
   lappen tekst die je stuk voor stuk moest lezen om te zien dat het een drietal
   was; met kleur zie je dat in één blik. */
.waarde{border:0;box-shadow:none}
.waarde--teal{background:var(--teal-100)}
.waarde--teal .waarde__rol{color:var(--teal-600)}
.waarde--lime{background:var(--lime-100)}
.waarde--lime .waarde__rol{color:var(--lime-600)}
.waarde--diep{background:var(--teal-900)}
.waarde--diep .waarde__rol{color:var(--lime-300)}
.waarde--diep h3{color:var(--text-on-inverse)}
.waarde--diep p{color:var(--text-on-inverse-muted)}
.waarde--diep .waarde__concreet strong{color:var(--text-on-inverse)}

/* De naam van de waarde is waar het om gaat en mag de maat van een kop hebben. */
.waarde h3{font:var(--weight-semibold) var(--t-h3)/1.2 var(--font-display)}

/* Het concrete voorbeeld staat los van de definitie, met een haarlijn ertussen
   in plaats van een tweede alinea die eraan vast plakt. */
/* Geen scheidingslijn: het voorbeeld staat los door de ruimte erboven, en een
   lijntje is precies het soort decoratie dat hier niet hoort. */
.waarde__concreet{margin-top:var(--space-6);font-size:var(--text-sm)}
.waarde{border-color:var(--border-subtle)}
.waarde:hover{border-color:var(--lime-300)}

/* De ronde iconen bij rollen en contactwegen: gevuld lime met inkt erop, in
   plaats van lichtgroen met teal. Dat is de combinatie uit het logo. */
.rol__chip{background:var(--lime-300);color:var(--teal-900)}

/* Het wetlabel op een sectorkaart. */
.sectorkaart__wet{background:var(--lime-100);color:var(--teal-800)}
.sectorkaart:hover .sectorkaart__wet{background:var(--lime-200)}

/* Hier stond `.sectorkaart,.punt{position:relative}`. Dat was nodig voor de
   accentbalken over de bovenrand, en die zijn eruit. De regel bleef staan en
   won op mobiel van `position:sticky` — gelijke specificiteit, maar later in
   het bestand — waardoor de kaarten niet meer stapelden. */

/* ---- 8c · De sprongbalk ------------------------------------------------
   De balk is een horizontale scroller met een verborgen scrollbalk. Dat werkt
   bij vier pillen op een telefoon, maar de privacypagina heeft er negen: op
   een breed scherm liepen ze het beeld uit zonder dat iets liet zien dat je
   kon schuiven. Vanaf tablet dus gewoon afbreken naar een tweede regel.
   -------------------------------------------------------------------- */

@media (min-width:760px){
  .jumpbar{flex-wrap:wrap;overflow-x:visible;row-gap:var(--space-2)}
}

/* ---- 8d · De footer -----------------------------------------------------
   Drie gelijke kolommen van vier, en de kleine lettertjes op één regel
   onderaan in plaats van als vierde kolom met een eigen kop.
   -------------------------------------------------------------------- */

/* site.css zet `.footer a` op gedempt wit. Dat gold ook voor de knop, dus die
   stond met witte letters op limegroen — onleesbaar. Een knop is geen
   footerlink en moet zijn eigen kleuren houden. */
.footer .btn{font-size:var(--text-sm)}
.footer .btn--accent,
.footer .btn--accent:hover{color:var(--text-on-accent)}
.footer .btn--accent .i{color:var(--text-on-accent)}

/* De kennismaakknop stond ook in de footer. Die is uit de markup gehaald: hij
   staat op elke pagina al bovenin de balk én onderaan in de CTA-sectie, en op
   mobiel brak hij bovendien over twee regels. Het mailadres blijft. */

.footer__bottom{flex-wrap:wrap;gap:var(--space-3) var(--space-6)}
.footer__klein{
  display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);
  margin-left:auto;
}
.footer__klein a{color:var(--text-on-inverse-muted)}
.footer__klein a:hover{color:var(--text-on-inverse)}

/* ---- 8e · Het dienstenlogboek -------------------------------------------
   Eén blok in plaats van twee losse panelen: links de rapportage, rechts de
   diensten. Klikken op een dienst wisselt de rapportage.
   -------------------------------------------------------------------- */

.dienstlog{
  background:var(--neutral-0);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card),var(--shadow-inset-hairline);
  overflow:hidden;
}
.dienstlog__bar{
  display:flex;align-items:center;gap:var(--space-3);
  padding:14px var(--space-6);
  background:var(--neutral-100);
  border-bottom:1px solid var(--border-subtle);
  font:var(--weight-semibold) var(--text-sm)/1 var(--font-sans);
  color:var(--text-muted);
}

/* De vier diensten als rij knoppen. Auto-fit, dus een vijfde dienst breekt
   niets en op een telefoon vallen ze onder elkaar. */
.dienstlog__tabs{
  display:grid;gap:var(--space-3);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  padding:var(--space-5) var(--space-5) 0;
}
.dienstkaart{
  display:grid;gap:6px;justify-items:start;
  padding:14px 16px;text-align:left;cursor:pointer;
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  background:var(--neutral-0);font:inherit;color:inherit;
  transition:var(--transition-control);
}
.dienstkaart time{
  font:var(--weight-bold) var(--text-md)/1 var(--font-sans);
  color:var(--text-heading);
}
.dienstkaart__wat{font-size:var(--text-sm);color:var(--text-muted);line-height:1.3}
.dienstkaart:hover{border-color:var(--teal-300);background:var(--teal-50)}
.dienstkaart.is-active{
  border-color:var(--teal-500);background:var(--teal-50);
  box-shadow:inset 0 0 0 1px var(--teal-500);
}
.dienstkaart.is-active time{color:var(--teal-700)}

/* De rapportages liggen op elkaar; alleen de actieve is zichtbaar. Zonder JS
   staat de eerste op is-active, dus er is altijd één te lezen. */
.dienstlog__rap{display:grid;padding:var(--space-5)}
.dienstlog__rap > .report{grid-area:1/1;display:none}
.dienstlog__rap > .report.is-active{display:block}

/* ---- 9 · Zachtere vormen -----------------------------------------------
   De ronding van kaarten gaat van 24px naar 32px, en beeld krijgt dezelfde
   ronding als de kaarten eromheen. Dit is het verschil dat je ziet zonder te
   kunnen benoemen: de site oogt minder als een formulier.
   -------------------------------------------------------------------- */

.card{border-radius:var(--radius-xl)}
.imgcard{border-radius:var(--radius-xl);overflow:hidden}
.imgcard img{border-radius:inherit}
.kbkaart{border-radius:var(--radius-xl)}
.cta{border-radius:var(--radius-2xl)}


/* ---- De kernwaarden swipen op de telefoon ------------------------------
   Drie kaarten die je naast elkaar wilt kunnen vergelijken — waardigheid,
   verbondenheid, compassie horen bij elkaar. Als stapel lees je ze los van
   elkaar; als strook zie je dat het een drietal is.
   -------------------------------------------------------------------- */

@media (max-width:760px){
  .waarden{
    display:grid;grid-auto-flow:column;grid-template-columns:none;
    grid-auto-columns:84%;
    gap:var(--space-4);
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    padding-bottom:var(--space-4);
    margin-inline:-4px;padding-inline:4px;
  }
  .waarden > *{scroll-snap-align:start;margin:0;position:static}
  .waarden::-webkit-scrollbar{height:4px}
  .waarden::-webkit-scrollbar-thumb{
    background:var(--border-default);border-radius:4px;
  }
}

/* De tekst die onder een gestapelde kaartenrij staat, hoeft er op mobiel niet
   ook nog eens 40px vanaf te houden: de loopruimte van de stapel zit er al. */
@media (max-width:760px){
  .punten + .lede,
  .grid--3 + .lede,
  .grid--4 + .lede{margin-top:var(--space-4) !important}
}

/* ---- 10 · Ruimte boven een sectie zonder kaart --------------------------
   Een `.band` geeft zelf maar 18px; de rest van de ruimte boven een sectiekop
   komt uit de padding van `.panel`. Secties zonder paneel hadden die dus niet
   en hun kop stond 18px onder de vorige sectie in plaats van 64px.

   Deze regel geeft ze dezelfde maat, zodat elke sectiekop op de site op gelijke
   hoogte begint — met of zonder kaart eromheen.
   -------------------------------------------------------------------- */

.band--open > .wrap{padding-top:clamp(28px,3.6vw,46px)}