/* =========================================================
   Werken bij Milieu Service Nederland — gedeeld design-system
   Ontwerp: nieuwe recruitment-look. Merkregels: CLAUDE.md.
   Gebruikt door index / vacatures / vacature / over-ons / contact.
   ========================================================= */
:root{
  --orange:#F89501;
  --gold:#CE5C00;
  --gold-text:#A34800;   /* donkerder oranje voor kleine tekst/links (WCAG AA) */
  /* Oranje knoppen: huisstijlverloop #F89501 → #CE5C00 met witte tekst van
     16px. Bewuste keuze van Willem Gootjes (25 september 2026), in de wetenschap
     dat wit hierop 2,26:1 tot 4,07:1 haalt en dus niet aan WCAG AA (4,5:1)
     voldoet. Zie CLAUDE.md en docs/huisstijl-en-toegankelijkheid.md. */
  --orange-btn:var(--orange);
  --orange-btn-donker:var(--gold);
  --green:#009D3D;
  /* Donkergroen (30 september 2026): #004F1F is sitebreed #00652A geworden,
     optie B uit previews/header-groen.html. Warmer, zelfde groen als de
     blokken die eroverheen vallen. Wit erop 7,25:1, als tekst op wit 7,25:1,
     op #CCEBD8 5,68:1. Transparante varianten: rgba(0,101,42,...).
     Footertekst op 68% wit zakte daarop onder 4,5:1; nu 80% (5,18:1). */
  --green-deep:#00652A;
  --green-soft:#CCEBD8;
  /* Alleen voor het cijfer in de donkergroene, overlappende cijferbalk op
     /over-ons/ (.ons-stats): wit haalt op --green-deep de norm al
     (9,82:1), maar dit cijfer moet er zelf uitspringen als accent, geen
     tekstkleur-noodgreep. --blue idem: alleen voor het accent-randje van
     TH Containers in 'De bedrijven van de groep' — elders blijft groen/
     oranje de norm, blauw komt hier voor het eerst voor. */
  --green-stat:#8FE0AE;
  --blue:#126CAD;
  /* Voor de nieuwe .vac-card (homepage + /alle-vacatures/, mockup september
     2026). --green-cta is voor de 'Bekijk
     vacature'-link onderin: #007E31 op wit is 5,21:1 (AA), en welbewust
     niet --green zelf (#009D3D op wit is 3,57:1 en faalt hier: 14px vet
     is geen 'grote tekst', die grens ligt pas bij 18,66px vet). */
  --green-cta:#007E31;
  /* Meta-balk (locatie + werkvorm) van elke .vac-card, ook bij 'Snel
     nodig', en de onderkant van de waas over de foto die daar naadloos in
     overloopt. Bewust #005421 (de oorspronkelijke merkwaarde) en niet
     --green-deep: wit op #005421 is 9,17:1 (AA). */
  --vacature-bar:#005421;
  /* Koude neutralen i.p.v. de warme set (open punt, sitewide): --ink was
     #1B1810/--paper #FFFDF9/--paper-dim #F7F1E6/--line rgba(27,24,16,...),
     nu de mockup-serie se koelere set. Contrast opnieuw doorgerekend
     (WCAG-formule, 3 september 2026): --ink op --paper 15,92:1, secundaire
     tekst #5f5d5b op --paper 5,41:1, #5f5d5b als formulierrand op wit
     5,92:1 (was 3,85:1) — allemaal ruim boven de normen die er al golden. */
  --ink:#1A1A1A;
  --paper:#FAF9F6;        /* warm gebroken wit, sinds 30 september 2026 (was #f1f6f2) */
  --paper-dim:#F4F2EE;
  --deep:#00652A;        /* = --green-deep; wit erop 7,25:1 */
  --deep-2:#00742E;      /* levendiger corporate groen voor het lichtste deel van de band (5,93:1 met wit) */
  --line: #E8E8E8;
  --shadow: 0 30px 60px -30px rgba(14,42,26,0.35);

  /* Bewaakte schaal voor blok-gestuurde pagina's (CMS-velden spacing_na /
     kop_grootte, zie docs/PROJECTKENNIS.md en scripts/bouw-structuur.py).
     Vaste stappen, geen vrij pixelgetal: --space-normaal = de bestaande
     section-padding (was 104px, op verzoek verkleind naar 80px — minder
     witruimte tussen de blokken, kortere scroldiepte), de rest is
     0,5x/1,5x/2x daarvan. */
  --space-klein:40px;
  --space-normaal:80px;
  --space-groot:120px;
  --space-extra-groot:160px;

  /* Witregelschaal binnen een sectie (zie docs/huisstijl-en-toegankelijkheid.md).
     --ruimte-kop     kop (h1/h2) → eerstvolgende tekst of lijst
     --ruimte-alinea  alinea → alinea, alinea → lijst
     --ruimte-blok    tekstblok → inhoud (kaarten, knoppen, formulier, FAQ)
     --ruimte-sectie  tussen twee onderwerpen binnen één sectie, gelijk aan
                      de sectiepadding (80px; telefoon 52px) */
  --ruimte-kop:18px;
  --ruimte-alinea:20px;
  --ruimte-blok:32px;
  --ruimte-sectie:80px;
  --kop-normaal:var(--fs-h2);
  --kop-groot:var(--fs-h1);

  /* Lettertypeschaal, sitebreed (herzien 22 september 2026, op verzoek: de
     vaste maten 48/36/28/22/16/14 hieronder zijn nu leidend, ook voor
     kaart-/bloktitels — H3 was hiervoor bewust klein (16px) gehouden zodat
     jobkaarten/FAQ/stap-kaarten compact bleven; dat is losgelaten, dus
     kaartgrids sitewide zijn merkbaar groter geworden. H1/H2 houden een
     clamp() met deze waarde als bovengrens: een vaste 48px/36px op een
     telefoon van 320px breed liet paginatitels binnen enkele woorden
     afbreken en kon een hero met vaste hoogte laten overlopen.
     --fs-eyebrow/--fs-lead/--fs-micro vallen buiten deze schaal (labels/
     leadtekst/bijschriften, geen kop of body) en blijven ongewijzigd. */
  --fs-h1:clamp(32px,7vw,48px);
  --fs-h2:clamp(26px,5vw,36px);
  --fs-h3:28px;
  --fs-h4:22px;
  --fs-eyebrow:13px;
  --fs-lead:18px;
  --fs-body:16px;
  --fs-small:14px;
  --fs-micro:11px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Ubuntu',Arial,sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}

/* support.js vervangt <x-dc> bij het opstarten door <div id="dc-root"><div
   class="sc-host">…</div></div> (dc.replaceWith(hostEl) + de React-render
   daarbinnen) en zet zelf al #dc-root>.sc-host{height:100%}. .sc-host is
   dus de eigenlijke drager van header/secties/footer — .sc-host, niet
   #dc-root, krijgt de flex-column zodat de slotband/footer op korte
   pagina's (weinig secties) toch onderin het scherm belandt i.p.v.
   halverwege te blijven hangen. Ongescoped .sc-host mag niet: die class
   hangt aan élk Design Component, dus > om alleen de pagina-root te
   raken. .closer duwt zichzelf en de footer erna naar onder via
   margin-top:auto. */
#dc-root>.sc-host{display:flex;flex-direction:column;min-height:100vh;}
/* Geen enkel blok mag krimpen. .sc-host is door de runtime precies één
   venster hoog (height:100%), dus flex zou de blokken daarin laten krimpen.
   Een blok met overflow:hidden (.hero-full, .page-hero) kromp dan tot zijn
   min-height en sneed de eigen inhoud af: op laptop en telefoon viel de
   h1 van de homepage onder de header en op /contact/ e.a. de introtekst weg
   (audit 25 september 2026). */
#dc-root>.sc-host>*{flex-shrink:0;}

/* Reveal-animatie bij scrollen. site.js zet .in zodra een blok in beeld komt.

   Bewust achter .js-reveal op <html>: die class zet site.js zelf. Laadt dat
   script niet, dan bestaat de opacity:0-regel niet en blijft de inhoud gewoon
   zichtbaar. Dat is niet theoretisch: vacatures.html had geen reveal-script,
   waardoor het slot-CTA-blok daar permanent onzichtbaar was (18-08-2026).
   <html> staat buiten <x-dc> en overleeft het opnieuw opbouwen door support.js. */
@media (prefers-reduced-motion: no-preference){
  .js-reveal .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
  .js-reveal .reveal.in{opacity:1;transform:translateY(0);}
}

/* ---------- HEADER ----------
   Lichte header (mockup-serie 'Werkenbij D', september 2026): wit i.p.v.
   donkergroen. Sitebreed, niet alleen op de homepage: één header-component
   voor alle paginatypes voorkomt een zichtbaar andere balk per pagina. */
header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;max-width:1240px;margin:0 auto;gap:20px;}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0;}
/* Kruisfade tussen het complete MSN- en het complete MSG-logo (liggend,
   icoon + volledige naam als één afbeelding), om en om, elke 5 seconden.
   Eerder uit elkaar getrokken in een vast icoon+"Milieu Service" met alleen
   een wisselend laatste woord erover­heen (.logo-lockup/.logo-tail); dat gaf
   verkeerd gepositioneerde tekst in de praktijk. Teruggezet naar simpelweg
   het hele logo wisselen. CSS grid met beide img's op grid-area 1/1: ze
   stapelen zo, en de container krijgt gewoon een breedte uit de grootste
   afbeelding. prefers-reduced-motion toont overal alleen het MSN-logo,
   stilstaand. */
.logo-stack{display:grid;}
.logo-stack img{grid-area:1/1;width:auto;display:block;}
.logo-stack .logo-msn{animation:logoSwapA 10s ease-in-out infinite;}
.logo-stack .logo-msg{animation:logoSwapB 10s ease-in-out infinite;}
.logo-stack-head img{height:30px;}
.logo-stack-foot{margin-bottom:16px;}
/* Footerlogo 185px breed (7 oktober 2026, ontwerp); beide wisselende logo's.
   Het bestand heeft links 77 van de 700px lege rand (20px op deze maat):
   die schuiven we terug, zodat het logo gelijk staat met de tekst eronder. */
.logo-stack-foot img{width:185px;max-width:none;height:auto;}
.logo-stack-foot{margin-left:-20px;}
@keyframes logoSwapA{
  0%,45%{opacity:1;transform:none;}
  50%,95%{opacity:0;transform:translateX(-10px) skewX(-7deg);}
  100%{opacity:1;transform:none;}
}
@keyframes logoSwapB{
  0%,45%{opacity:0;transform:translateX(-10px) skewX(-7deg);}
  50%,95%{opacity:1;transform:none;}
  100%{opacity:0;transform:translateX(-10px) skewX(-7deg);}
}
@media (prefers-reduced-motion: reduce){
  .logo-stack .logo-msn{animation:none;opacity:1;transform:none;}
  .logo-stack .logo-msg{animation:none;opacity:0;}
}

nav.links{display:flex;align-items:center;gap:34px;}
nav.links a{font-size:15px;font-weight:500;color:var(--ink);position:relative;padding:4px 0;}
nav.links a::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--green);transition:width .25s ease;}
nav.links a:hover::after,nav.links a.active::after{width:100%;}
nav.links a.active{color:var(--green-deep);font-weight:700;}
/* Megamenu: puur CSS, hover + focus-within (toetsenbord). Geen Component
   nodig, werkt daardoor op elk paginatype. Sinds 7 oktober 2026 één paneel
   over de volle breedte van de header, zoals in het ontwerp, voor
   Afdelingen, Verhalen en Over ons. .nav-mega is daarom niet positioned:
   het paneel hangt aan de (sticky) header en niet aan de link, en valt zo
   op geen enkel scherm meer buiten beeld. */
.nav-mega{position:static;}
.nav-mega > a{display:inline-flex;align-items:center;gap:5px;}
.nav-mega > a svg{transition:transform .2s ease;}
html:not([data-touch]) .nav-mega:hover > a svg,html:not([data-touch]) .nav-mega:focus-within > a svg,
html[data-mega-open="0"] .nav-mega:nth-of-type(1) > a svg,html[data-mega-open="1"] .nav-mega:nth-of-type(2) > a svg,
html[data-mega-open="2"] .nav-mega:nth-of-type(3) > a svg{transform:rotate(180deg);}
/* Brug tussen de link en het paneel: het paneel begint pas aan de onderrand
   van de header. Zonder deze strook onder de link verliest de muis :hover
   van .nav-mega in de ruimte daartussen en klapt het paneel dicht. */
.nav-mega > a::before{content:'';position:absolute;left:-14px;right:-14px;top:100%;height:30px;}
.mega-panel{position:absolute;left:0;right:0;top:100%;display:none;z-index:60;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.nav-mega:hover .mega-panel,.nav-mega:focus-within .mega-panel{display:block;}
/* Op een laag scherm scrolt het paneel zelf, zodat de onderkant bereikbaar blijft. */
.mega-panel-inner{max-width:1240px;margin:0 auto;padding:20px 32px 28px;box-sizing:border-box;max-height:calc(100vh - 90px);overflow-y:auto;}
/* Ruimte voor de vaste (sticky) header: zonder dit komt een sectie waar een
   ankerlink (bv. #groep) naartoe springt half achter de header terecht. */
section[id]{scroll-margin-top:90px;}
/* Indeling optie E (previews/megamenu-opties.html, 7 oktober 2026): links
   een introkolom met kop, een zin en 'Bekijk alle ...' in --green-cta
   (5,21:1, 44px hoog), rechts de kaarten. */
.mega-panel-inner.mm-panel{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;}
.mm-intro{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-right:28px;border-right:1px solid var(--line);}
.mm-intro__titel{margin:0;font-weight:700;font-size:22px;line-height:1.25;color:var(--ink);}
.mm-intro__tekst{margin:0;font-size:15px;line-height:1.5;color:#5f5d5b;}
.nav-mega .mm-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;font-size:15px;padding:0;color:var(--green-cta);text-decoration:none;}
.nav-mega .mm-cta:hover{color:var(--green-deep);text-decoration:underline;text-underline-offset:3px;}
.nav-mega .mm-cta svg{transition:transform 200ms cubic-bezier(.2,.6,.2,1);}
.nav-mega .mm-cta:hover svg{transform:translateX(3px);}
.nav-mega .mm-cta:focus-visible{outline:3px solid var(--green-deep);outline-offset:2px;border-radius:5px;}
/* Kaarten in dezelfde taal als 'Overal ruimte om te groeien' en 'In hun
   eigen woorden' op de homepage. Het label is de gedeelde .dept-badge.
   'Lees meer' in --green-cta (5,21:1), de naam in #5f5d5b (6,6:1). Geen
   schaduw: een hairline rand, bij hover lichtgroen. */
.mm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-content:start;}
.mm-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:8px;color:var(--ink);text-decoration:none;transition:transform 150ms cubic-bezier(.2,.6,.2,1),border-color 150ms;}
.mm-card:hover{transform:translateY(-3px);border-color:#ccebd8;color:var(--ink);}
.mm-card:focus-visible{outline:3px solid var(--green-deep);outline-offset:2px;}
/* 'nav.links a' geeft elke link in de navigatie 4px opvulling, 15px tekst en
   bij hover een groene onderstreping (::after). Niet voor de kaarten en de
   link in het paneel. */
.nav-mega .mm-panel .mm-card{padding:0;font-size:inherit;}
.nav-mega .mm-panel a::after,.nav-mega .mm-panel a::before{content:none;}
.mm-card__media{border-radius:7px 7px 0 0;overflow:hidden;}
.mm-card__media img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
/* Label half over de onderrand van de foto, zoals op de homepage: de
   wrapper staat buiten .mm-card__media, dus niets knipt het af. */
.mm-card__badge-wrap{position:relative;z-index:1;display:flex;justify-content:center;}
/* Elke kaart heeft één regel onder het label: de naam bij Verhalen, een korte
   omschrijving bij Afdelingen en Over ons (9 oktober 2026, optie C uit
   previews/megamenu-opties.html). Zo zijn de drie panelen even hoog. */
.mm-card__body{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 12px 14px;text-align:center;flex:1;}
.mm-card__person{display:flex;align-items:center;gap:5px;font-size:14px;color:#5f5d5b;}
.mm-card__person svg{flex:none;}
.mm-card__more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--green-cta);}
.mm-card__more svg{transition:transform 200ms cubic-bezier(.2,.6,.2,1);}
.mm-card:hover .mm-card__more svg{transform:translateX(3px);}
/* Tussen 981 en 1240px is de ruimte krap: smallere introkolom en een
   kleiner label, zodat ook een lang label op de kaart past. */
@media (max-width:1240px){
  .mega-panel-inner.mm-panel{grid-template-columns:190px minmax(0,1fr);gap:24px;}
  .mm-intro{padding-right:20px;}
  .mm-intro__titel{font-size:19px;}
  .mm-panel .dept-badge{font-size:12px;letter-spacing:.06em;padding:8px 10px 6px;}
  .mm-card__person{font-size:13px;}
  .mm-card__body{padding-left:6px;padding-right:6px;}
}
@media (max-width:980px){
  .mega-panel{display:none !important;}
}
.nav-actions{display:flex;align-items:center;gap:16px;flex-shrink:0;}

/* Rond cijfer boven de CTA-knop met het live aantal vacatures (site.js zet de
   tekst en toont 'm pas dan — zo verschijnt nooit een lege of foute 0). */
.nav-cta{position:relative;}
.nav-cta-badge{position:absolute;top:-9px;right:-9px;min-width:22px;height:22px;padding:0 5px;border-radius:100px;background:#fff;color:var(--ink);border:1.5px solid var(--line);font-size:var(--fs-micro);font-weight:700;display:none;align-items:center;justify-content:center;line-height:1;}
.nav-cta-badge.on{display:flex;}
/* Korte knoptekst voor de kleinste telefoons, zie max-width:374px. Het label
   zelf komt uit het CMS (site.headerCta); 'Vacatures' is de vaste korte vorm. */
.nav-cta-kort{display:none;}
/* 'Chat met Harry' in de header: secundaire knop, zie onderaan dit bestand
   (CTA-HIËRARCHIE, 7 oktober 2026). */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;min-height:44px;border-radius:5px;
  font-weight:500;font-size:16px;font-family:'Ubuntu',Arial,sans-serif;
  background:linear-gradient(105deg,var(--orange-btn) 0%,var(--orange-btn) 45%,var(--orange-btn-donker) 100%);
  background-size:230% 100%;background-position:0% 0%;color:#fff;
  box-shadow:0 10px 24px -12px rgba(206,92,0,0.6);
  transition:background-position .3s ease, transform .2s ease, box-shadow .2s ease;
  white-space:nowrap;cursor:pointer;border:none;
}
.btn:hover{background-position:100% 0%;transform:translateY(-2px);}
.btn svg{width:16px;height:16px;}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none;}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink);filter:none;}
.btn-light{background:#fff;color:var(--ink);box-shadow:0 10px 24px -12px rgba(0,0,0,0.25);}
.btn-light:hover{background:var(--ink);color:#fff;transform:translateY(-2px);}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;text-decoration:none;-webkit-tap-highlight-color:transparent;}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;}

/* ---------- HERO (home) ----------
   Open punt: full-bleed foto i.p.v. de gesplitste tekst/fotogrid-hero.
   .hero/.hero-copy/.hero-photo/.hero-grid/.stream-chip zijn hierdoor nergens
   meer in gebruik en zijn verwijderd; .hero-actions blijft bestaan, gebruikt
   door .page-hero (regiopagina() en de losse pagina's). */
.eyebrow{display:none;}
h1.headline{font-size:var(--fs-h1);line-height:0.98;font-weight:700;letter-spacing:-0.01em;}

.hero-sub{margin-top:28px;font-size:var(--fs-lead);line-height:1.6;max-width:560px;color:rgba(255,255,255,0.92);}

/* min-height verlaagd (was 86vh): de cijferbalk (.stats-strip) hoort direct
   onder de hero in beeld te zijn, zonder scrollen — bij 86vh viel die op
   veel gangbare vensterhoogtes (± 900px) net onder de vouw. */
/* padding:0: de witruimte zit in .hero-full-content (80px/72px). Zonder
   deze regel kreeg de hero ook de algemene section-padding (80px boven en
   onder) en werd hij 160px te hoog (audit 25 september 2026). */
.hero-full{position:relative;min-height:clamp(520px,66vh,680px);display:flex;align-items:end;overflow:hidden;color:#fff;padding:0;}
/* Vaste vloer van 520px was op een kort telefoonscherm (bv. liggend, of
   een kleiner toestel) bijna het hele venster — min() i.p.v. clamp()'s
   harde vloer, zodat de hero nooit meer dan zijn eigen vh-aandeel opeist
   (op verzoek, 18 september 2026: verhoudingen op telefoon rechttrekken). */
@media (max-width:600px){.hero-full{min-height:min(480px,88vh);}}
.hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Achtergrondvideo: lokaal bestand (site/assets/video/hero-lotte.mp4, sinds
   12 oktober 2026: seconde 9 tot 19 uit de werkgeversmerkvideo met Lotte,
   onderaan bijgesneden zodat de ingebrande ondertitels wegvallen. Het logo
   linksboven: in de eerste twee shots (pand, zonnepanelen) is de bovenkant
   weggesneden; in het laatste shot blijft de bovenkant (de hele windturbine)
   en is het logo bedekt met een stuk lucht van rechts. 1280 breed, zonder
   geluid, 1,8 MB; daarvoor hero-pand.mp4,
   het hoofdkantoor in Diemen; nog eerder hero-chauffeur.mp4), geen
   YouTube-embed: de YouTube IFrame-API bleek niet betrouwbaar samen te gaan
   met de herbouw van de pagina door support.js — een gewoon <video loop>
   heeft geen JavaScript nodig en kan dus niet op die manier stuklopen.
   Gemaakt uit het origineel (1920x1080 MOV, 61 MB) naar 1280x720 H.264,
   2 Mbit/s, zonder geluid: 2,5 MB. Puur decoratief, vandaar aria-hidden;
   geen bediening nodig, dus ook geen pointer-events. De poster is het
   eerste beeld van de video zelf, zodat er bij het starten geen sprong in
   beeld zit. De <img> ernaast blijft de foto uit het CMS, voor wie
   bewegend beeld heeft uitgezet (prefers-reduced-motion). */
.hero-video-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;}
/* Uitgelijnd op de bovenkant, zodat de windturbine op het dak helemaal in
   beeld komt; op smalle schermen iets naar links, waar de turbine staat
   (12 oktober 2026, optie C uit previews/hero-video-opties.html). */
@media (max-width:980px){.hero-video-bg{object-position:22% 0%;}}
@media (prefers-reduced-motion:reduce){.hero-video-bg{display:none;}}
/* Lichter gemaakt op 29 september 2026 (was 45% → 72% → 90% van boven naar
   onder, over de hele breedte). Nu alleen donker waar tekst staat:
   - Vanaf 1181px van links naar rechts: 66-64% achter de tekstkolom, daarna
     aflopend naar helder, zodat de video rechts in zijn eigen kleur staat.
   - Tot en met 1180px beslaat de tekst (bijna) de hele breedte, dus daar een
     verloop van boven naar onder, 50% → 66% → 70%. Bij 1024px liep de
     laatste chip anders het lichte deel in.
   Gemeten over zes beelden uit hero-pand.mp4, op de lichtste pixel achter
   elk tekstblok, bij 390/800/1024/1180/1181/1240/1280/1400/1920px: lopende
   tekst en chips minimaal 4,61:1 (norm 4,5), kop minimaal 4,35:1 (norm 3).
   Sinds 12 oktober 2026 (hero-lotte.mp4, previews/hero-fade-balans.html):
   90% van de vorige laag, en vanaf 1181px smaller: even donker tot net
   voorbij de tekstkolom, dan snel naar helder, zodat er meer video te zien
   is. Gemeten op vier beelden en vier schermen (390 tot 1920px): kop
   minimaal 4,38:1 (haalt 3:1); lopende tekst minimaal 4,62:1 op telefoon
   en iPad, maar 4,26:1 op laptop en groot scherm, net onder 4,5:1.
   Bewuste keuze van Willem Gootjes (vierde uitzondering in CLAUDE.md).
   Andere video? Dan opnieuw meten, want een lichter beeld vraagt meer
   donker. */
.hero-full-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,24,16,.594) 0%,rgba(27,24,16,.576) calc(50% + 60px),rgba(27,24,16,.126) calc(50% + 220px),rgba(27,24,16,0) calc(50% + 320px));}
@media (max-width:1180px){.hero-full-overlay{background:linear-gradient(180deg,rgba(27,24,16,.45) 0%,rgba(27,24,16,.594) 30%,rgba(27,24,16,.63) 100%);}}
/* Videoknop in de hero (echte video, geopend in een modal — zie .video-modal
   hieronder). rgba(0,0,0,0.6): witte tekst moet leesbaar zijn boven om het
   even welke foto, vandaar bewust donkerder dan het overlay-verloop zelf. */
.hero-video-btn{position:absolute;top:20px;right:20px;z-index:2;display:inline-flex;align-items:center;gap:10px;background:rgba(0,0,0,0.6);color:#fff;font-family:'Ubuntu',Arial,sans-serif;font-size:14px;font-weight:700;padding:6px 18px 6px 6px;border-radius:100px;border:none;cursor:pointer;transition:background .2s ease;}
.hero-video-btn:hover{background:rgba(0,0,0,0.78);}
.hero-video-play{width:34px;height:34px;border-radius:50%;background:var(--orange-btn);display:flex;align-items:center;justify-content:center;flex:none;}
.hero-video-play svg{width:15px;height:15px;fill:#fff;margin-left:2px;}

/* ---------- VIDEOMODAL (home) ----------
   Alleen gemount zolang videoOpen waar is (sc-if): de YouTube-iframe laadt
   dus pas na een klik, niet al bij het openen van de pagina. */
.video-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:56px 24px 24px;}
.video-modal-backdrop{position:absolute;inset:0;background:rgba(10,10,8,0.85);}
.video-modal-box{position:relative;z-index:1;width:100%;max-width:960px;}
.video-modal-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,0.5);background:#000;}
.video-modal-frame iframe,.video-modal-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;}
.video-modal-close{position:absolute;top:-56px;right:0;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.15);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease;}
.video-modal-close svg{width:19px;height:19px;}
.video-modal-close:hover{background:rgba(255,255,255,0.3);}
@media (max-width:600px){
  .hero-video-label{font-size:0;}
  .hero-video-btn{padding:6px;}
  .video-modal-close{top:auto;bottom:calc(100% + 8px);}
}

/* De eigen chatknop rechtsonder is op 12 oktober 2026 vervallen: Harry is nu
   de Trengo-widget (linksonder, via GTM). */
/* width:100% is nodig omdat .hero-full-content een flex-item is (kind van
   .hero-full): anders dan een gewoon blok-element vult een flex-item niet
   automatisch de beschikbare breedte, maar krimpt het naar zijn eigen
   inhoud (hier: smaller dan de 1240px-kolom, bv. door .hero-search op
   max-width:640px). Met margin:0 auto (via .wrap) werd die te smalle box
   vervolgens gecentreerd op de pagina, waardoor de hero-tekst niet meer op
   dezelfde lijn begon als het logo in de header of de cijferbalk eronder
   (die zijn gewone blok-elementen en hadden dit niet). */
.hero-full-content{position:relative;z-index:1;padding:80px 32px 72px;min-width:0;width:100%;}
.hero-search{background:#fff;border-radius:5px;padding:10px;display:flex;gap:10px;align-items:center;max-width:640px;box-shadow:0 18px 44px rgba(0,0,0,0.28);margin-top:30px;}
.hero-search svg{width:20px;height:20px;stroke:#5f5d5b;flex:none;margin-left:8px;}
.hero-search input{flex:1;border:0;outline:0;font-family:'Ubuntu',Arial,sans-serif;font-size:16px;color:var(--ink);background:transparent;min-width:0;}
/* Zoekknop in de hero: corporate groen i.p.v. de oranje recruitment-gradient
   van .btn — .btn-search wint op specificiteit (twee klassen) van .btn.
   --green-deep i.p.v. --green: wit op #009D3D is 3,57:1 en faalt bij deze
   tekstgrootte (14,5px vet, telt niet als 'grote tekst'); wit op --green-deep
   is 9,82:1 (WCAG-formule, 4 september 2026). */
.btn-search.btn{background:var(--green-deep);color:#fff;box-shadow:none;}
.btn-search.btn:hover{background:#00390F;transform:translateY(-2px);}
.hero-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;align-items:center;}
.hero-chip{font-family:'Ubuntu',Arial,sans-serif;font-weight:700;font-size:13.5px;padding:8px 15px;border-radius:5px;border:1.5px solid rgba(255,255,255,0.5);background:rgba(255,255,255,0.1);color:#fff;transition:all .2s ease;}
.hero-chip:hover{background:rgba(255,255,255,0.28);border-color:#fff;color:#fff;}
.hero-chip-solid{background:#fff;border-color:#fff;color:var(--ink);}
.hero-chip-solid:hover{background:#fff;color:var(--ink);}
/* Losse band onder de hero (i.p.v. een balk die half over de hero-foto heen
   viel — foto's variëren te veel in helderheid op die plek om altijd
   leesbaar te blijven). Horizontaal verloop, links lichter (var(--deep-2))
   naar rechts de bestaande donkergroene kleur (var(--deep), ongewijzigd).
   Zelfde tokens als .cta-soft/.values/.page-hero elders op de site, daar als
   radial-gradient; wit op --deep-2 is 5,93:1 (AA), zie
   docs/huisstijl-en-toegankelijkheid.md. Dun oranje randje onderaan, zoals
   ook bij .job-alert-band. */
.stats-strip{background:linear-gradient(90deg, var(--deep-2), var(--deep));border-bottom:5px solid var(--orange);padding:0;}
.badge-row{display:flex;gap:32px;flex-wrap:wrap;align-items:center;padding:26px 0;}
/* De vier cijfers in een eigen, breedte-begrensde rij: even breed als
   .hero-search (max-width:640px) hierboven, zodat de cijferbalk precies
   even ver doorloopt als het zoekblok/de filterchips, niet verder. Gelijk
   verdeeld (flex:1) i.p.v. hun eigen tekstbreedte, dus ook gelijke afstand
   tot elkaar. .badge-slogan blijft los, met zijn eigen margin-left:auto. */
.badge-stats{display:flex;gap:32px;width:100%;max-width:640px;}
.badge-stats>div{flex:1 1 0;min-width:0;font-size:var(--fs-small);color:rgba(255,253,249,0.86);}
.badge-row strong{display:block;font-family:'Ubuntu Mono',monospace;color:#fff;font-size:20px;margin-bottom:3px;}
.badge-slogan{margin-left:auto;font-size:19px;font-weight:700;color:var(--green-soft);}

/* ---------- SECTION GENERIC ---------- */
section{padding:80px 0;}
.section-head{max-width:640px;margin-bottom:52px;}
.section-head .eyebrow{color:var(--green-deep);}
h2{font-size:var(--fs-h2);font-weight:700;line-height:1.08;letter-spacing:-0.01em;}
.section-head p{margin-top:18px;font-size:var(--fs-lead);line-height:1.65;color:#5f5d5b;max-width:560px;}

/* Per-blok witruimte en kopgrootte (CMS: spacing_na / kop_grootte). Hogere
   specificiteit dan 'section{padding:80px 0}' hierboven door het attribuut,
   dus geen !important nodig. */
section[data-spacing-na="klein"]{padding:var(--space-klein) 0;}
section[data-spacing-na="normaal"]{padding:var(--space-normaal) 0;}
section[data-spacing-na="groot"]{padding:var(--space-groot) 0;}
section[data-spacing-na="extra-groot"]{padding:var(--space-extra-groot) 0;}
h2[data-kop-grootte="groot"]{font-size:var(--kop-groot);}
/* Uitlijning van bijgesneden foto's (object-fit:cover elders), via het CMS
   in te stellen naast het beeldveld zelf. Geen regel voor "midden": dat is
   het browserstandaard (object-position:center), dus geen override nodig. */
img[data-foto-positie="boven"]{object-position:center top;}
img[data-foto-positie="onder"]{object-position:center bottom;}
img[data-foto-positie="links"]{object-position:left center;}
img[data-foto-positie="rechts"]{object-position:right center;}

/* ---------- INTRO (home) ---------- */
.intro-photo{position:relative;border-radius:5px;overflow:hidden;box-shadow:var(--shadow);}
.intro-photo img{width:100%;display:block;}

.intro-text p{font-size:var(--fs-body);line-height:1.6;color:#414042;margin-bottom:20px;}
.intro-text p strong{color:var(--ink);}

/* ---------- WAAROM-BLOK v2 (home): checklist + fotocollage ----------
   Mockup-serie 'Werkenbij D', september 2026. .intro-text/.intro-photo
   hierboven blijven ongewijzigd in gebruik op andere pagina's (over-ons,
   binnenkijken, functiepagina's) — deze regels zijn nieuw en eigen aan de
   homepage, vandaar de losse klassen (.intro-v2, .intro-photo-main/-sub).

   #over/#afdelingen/.jobs/#verhalen-home krijgen om en om een huisstijl-
   groen vlak (i.p.v. bijna-onzichtbaar verschil tussen --paper en
   --paper-dim): op verzoek, 18 september 2026, zodat opeenvolgende
   blokken op de homepage duidelijker van elkaar te onderscheiden zijn.
   Eerste versie begon bij groen (#over/.jobs); op verzoek daarna
   omgedraaid (#over/.jobs --paper, #afdelingen/#verhalen-home
   --green-soft). Op verzoek, 25 september 2026: #afdelingen en
   #verhalen-home puur wit, zodat het lichtgroene --paper van #over/.jobs
   om en om wisselt met wit. */
#over{background:var(--paper);}
.intro-v2{display:grid;grid-template-columns:1fr 0.85fr;gap:70px;align-items:center;}
.intro-v2 h2{margin-bottom:20px;}
.intro-checklist{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:20px;}
/* Kernwaarden (30 september 2026, optie A uit previews/kernwaarden.html):
   vinkje in een groter rondje in het groene verloop, wit vinkje. */
.intro-checklist li{display:flex;gap:16px;align-items:flex-start;}
.intro-checklist .ic{flex:none;width:36px;height:36px;border-radius:50%;background:linear-gradient(90deg,var(--green) 0%,var(--deep-2) 100%);display:flex;align-items:center;justify-content:center;}
.intro-checklist .ic svg{width:18px;height:18px;stroke:#fff;}
.intro-checklist h3{font-size:var(--fs-h3);font-weight:700;color:var(--ink);margin-bottom:4px;}
.intro-checklist p{font-size:var(--fs-body);line-height:1.55;color:#5f5d5b;}
.intro-link{display:inline-flex;align-items:center;gap:7px;margin-top:30px;font-weight:700;color:var(--green-deep);font-size:15px;}
.intro-link svg{width:15px;height:15px;transition:transform .2s ease;}
.intro-link:hover svg{transform:translateX(4px);}
.intro-collage{position:relative;}
.intro-photo-main{border-radius:12px;overflow:hidden;aspect-ratio:4/3.3;box-shadow:var(--shadow);}
.intro-photo-main img{width:100%;height:100%;object-fit:cover;display:block;}
.intro-photo-sub{position:absolute;left:-8%;bottom:-12%;width:48%;border-radius:12px;overflow:hidden;border:4px solid var(--paper);box-shadow:0 20px 40px -16px rgba(27,24,16,0.35);}
.intro-photo-sub img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.intro-stat{position:absolute;top:20px;left:20px;z-index:2;background:#fff;border-radius:8px;box-shadow:0 14px 30px -12px rgba(27,24,16,0.3);padding:12px 16px;display:flex;align-items:center;gap:10px;}
.intro-stat .ic-spin{flex:none;width:30px;height:30px;border-radius:50%;background:var(--green-soft);display:flex;align-items:center;justify-content:center;}
.intro-stat .ic-spin svg{width:16px;height:16px;stroke:var(--green-deep);}
.intro-stat strong{display:block;font-size:18px;font-weight:700;color:var(--ink);line-height:1.1;}
.intro-stat span{font-size:var(--fs-micro);color:#5f5d5b;}
.intro-tag{position:absolute;right:-10px;bottom:22px;z-index:2;background:var(--green-deep);color:#fff;border-radius:8px;padding:14px 20px;box-shadow:0 14px 30px -12px rgba(27,24,16,0.4);max-width:200px;}
.intro-tag strong{display:block;font-size:15px;font-weight:700;margin-bottom:2px;}
.intro-tag span{font-size:var(--fs-small);color:rgba(255,255,255,0.85);}
@media (max-width:600px){
  .intro-photo-sub{left:0;bottom:-8%;width:52%;}
  .intro-tag{right:0;max-width:160px;padding:12px 16px;}
}

/* ---------- VIND JOUW PLEK (home): horizontaal scrollende kaarten ----------
   Mockup september 2026: dezelfde kaarttaal als .vac-card/.verhalen-card/
   .afd-card elders (foto+scrim boven, witte tekstvoet onder), i.p.v. de
   eerdere volledige-foto-met-tekst-erop opmaak. .afd-grid (elders, niet-
   scrollend 2x2) is de aparte opmaak van de losse /afdelingen/-pagina.

   #afdelingen is wit, afwisselend met het lichtgroene --paper van #over
   en .jobs (zie #over hierboven voor de toelichting). */
#afdelingen{background:#fff;}
.dept-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:32px;}
.scroll-arrows{display:flex;gap:10px;flex:none;}
/* .dept-nav-btn ook op de vacatureknoppen hierbeneden ('zelfde slider-
   mechanisme', mockup) — één knopstijl voor beide sliders. */
.dept-nav-btn{width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:all 150ms ease;}
.dept-nav-btn:hover{border-color:var(--green);color:var(--green);}
.dept-nav-btn svg{width:17px;height:17px;}
/* cursor:grab/.is-dragging: het slepen zelf zit in site.js (generieke
   [data-drag-scroll]-handler, zie de toelichting daar) — hier alleen de
   cursor-feedback. scroll-snap uit tijdens het slepen, anders vecht de
   snap tegen de sleepbeweging. */
.dept-slider{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px;cursor:grab;}
.dept-slider::-webkit-scrollbar{display:none;}
.dept-slider.is-dragging{cursor:grabbing;scroll-snap-type:none;}
.dept-card{flex:0 0 min(31%,380px);min-width:300px;scroll-snap-align:start;position:relative;display:flex;flex-direction:column;background:#fff;border-radius:8px;box-shadow:0 2px 14px rgba(0,0,0,0.08);overflow:hidden;text-decoration:none;color:var(--ink);transition:box-shadow 150ms ease, transform 150ms ease;}
.dept-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.14);transform:translateY(-2px);}
.dept-card__photo{position:relative;aspect-ratio:4/3;overflow:hidden;}
.dept-card__photo img{width:100%;height:100%;object-fit:cover;transition:transform 500ms cubic-bezier(0.2,0.6,0.2,1);}
.dept-card:hover .dept-card__photo img{transform:scale(1.045);}
.dept-card__scrim{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,101,42,0.55) 0%, rgba(0,101,42,0) 45%);}
/* Het afdelingslabel is de titel van de kaart: dezelfde .dept-badge als
   bij de verhalen, half over de onderrand van de foto. De wrapper staat
   boven de foto (z-index) en knipt niets af; de 36px bovenin de voet
   houdt de omschrijving vrij van het label. */
.dept-card__badge-wrap{position:relative;z-index:1;display:flex;justify-content:center;}
.dept-card__body{padding:36px 24px 24px;display:flex;flex-direction:column;align-items:center;flex:1;text-align:center;}
/* Kaarttekst (29 september 2026, optie C uit previews/kaart-typografie.html):
   de omschrijving hier en de kop op .story-card delen dezelfde opmaak,
   18px Medium in #414042 (10,4:1). Foto en label dragen de kaart. */
.dept-card__desc{color:#414042;font-size:18px;font-weight:500;line-height:1.5;margin:0 0 20px;text-align:center;}
/* --green-cta i.p.v. --green: #009D3D op wit is 3,57:1 en faalt bij 15px
   vet (geen 'grote tekst'); --green-cta (#007E31) is 5,21:1 (AA). */
.dept-card__cta{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--green-cta);font-weight:700;font-size:15px;}
.dept-card__cta svg{width:15px;height:15px;transition:transform 200ms cubic-bezier(0.2,0.6,0.2,1);}
.dept-card:hover .dept-card__cta svg{transform:translateX(4px);}
@media (max-width:600px){.dept-card{flex-basis:280px;}}

/* ---------- AFDELINGEN-PAGINA: breadcrumb, hero, intro, kaarten ----------
   Mockup september 2026. Eigen, niet-scrollend 2x2-rooster; de homepage
   gebruikt sinds de 'Werkenbij D'-hero-vernieuwing de horizontaal
   scrollende .dept-slider hierboven (zie 'VIND JOUW PLEK'). Alleen op
   /afdelingen/ — header/footer/job-alert-band/chatwidget blijven de
   gedeelde, sitewide componenten. */
.breadcrumb-bar{padding:14px 36px;background:var(--green-soft);}
.breadcrumb-bar p{max-width:1280px;margin:0 auto;font-size:14px;display:flex;align-items:center;gap:8px;color:var(--green-deep);}
.breadcrumb-bar a{color:var(--green-deep);font-weight:700;}

/* ---------- INGEKADERDE PAGINA-HERO (subpagina's) ----------
   Gedeeld door /afdelingen/, /onze-verhalen/ en /over-ons/ (voorheen drie
   losse, bijna identieke kopieën onder .afd-hero/.verhalen-hero —
   samengevoegd toen een derde pagina 'm nodig had). Brede, ingekaderde
   foto (320px hoog, tot 1280px breed) met groene scrim en kicker/titel/
   tekst linksonder. Vervangt op deze drie pagina's het gedeelde,
   tekst-op-verloop .page-hero hierboven. */
/* min-height i.p.v. height (25 september 2026): sinds alle subpagina's deze
   kop hebben, soms met tekst en knoppen, groeit hij mee als de inhoud niet
   in 320px past. Past de inhoud wel, dan is hij precies als voorheen. */
/* Oranje lijnen: sitebreed 5px (28 september 2026), ook op .stats-strip,
   .job-alert-band, .ons-stats en de #groep-kaarten.
   Oranje lijn onderaan het fotoblok (28 september 2026), op elke pagina
   met deze header; de homepage heeft een eigen hero (.hero-full) en krijgt
   hem dus niet. Op het blok zelf, zodat hij de afgeronde onderhoek volgt. */
.page-hero-framed{position:relative;max-width:1280px;margin:0 auto;min-height:320px;overflow:hidden;border-radius:8px;display:flex;flex-direction:column;border-bottom:5px solid var(--orange);}
.page-hero-framed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%;}
/* Gespiegelde bannerfoto (CMS-veld 'spiegelen', 9 oktober 2026): de mensen
   komen rechts in beeld, naast het groene vlak. */
.page-hero-framed--spiegel img{transform:scaleX(-1);object-position:40% 30%;}
/* Verloop aangescherpt op 25 september 2026: tot 55% van de breedte (waar de
   tekst maximaal komt, zie max-width hieronder) nog minstens 0,85 groen. Zo
   haalt witte tekst ook op een witte foto 6,6:1 en de 92%-witte introtekst
   5,9:1. Het oude verloop (0,55 op 42%) liet de introtekst op lichte foto's
   zakken tot 1,5:1. */
.page-hero-framed__scrim{position:absolute;inset:0;background:linear-gradient(100deg, rgba(0,101,42,0.92) 0%, rgba(0,101,42,0.85) 55%, rgba(0,101,42,0) 85%);}
.page-hero-framed__content{position:relative;z-index:2;flex:1 0 auto;display:flex;flex-direction:column;justify-content:flex-end;padding:40px 36px 40px;
  /* Tekst blijft binnen het donkerste deel van de scrim (0-42%): bij een
     verlopend vlak toets je het contrast op het lichtste punt (CLAUDE.md),
     en dat punt ligt hier tegen de kale foto aan (68%+, vrijwel geen tint
     meer). min() houdt dit ook op smalle vensters binnen die zone. */
  max-width:min(600px,55%);}
.page-hero-framed__kicker{font-size:13px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--green-soft);margin:0 0 10px;}
.page-hero-framed__title{font-size:clamp(38px,3.5vw,48px);font-weight:700;color:#fff;margin:0 0 12px;}
.page-hero-framed__body{font-size:var(--fs-lead);color:rgba(255,255,255,0.92);margin:0;max-width:64ch;line-height:1.6;}
.page-hero-framed__body em{font-style:italic;}
/* --roomy: eerst alleen /over-ons/ — de introtekst daar is langer (4 regels
   i.p.v. 2), waardoor de tekst bij de standaard 320px/padding-bottom:40px
   tegen de onderrand van de foto kwam, precies waar de cijferbalk overheen
   valt (margin-top:-28px, zie .ons-stats). Meer hoogte en meer
   padding-bottom houden de laatste regel los van die overlap. Sinds het
   herontwerp van /o/<slug> (september 2026) ook daar: die hero heeft met
   kicker/titel/subtitel/knoppen nog meer inhoud dan /over-ons/. Salaris/
   locatie/werkplek/kenmerk stonden hier eerst ook als badges/meta-rij, en
   daarna in een "Voorwaarden"-kaart naast de tekst. Sinds 29 september 2026
   staan ze in de balk onder de banner (.vac-locbar hieronder). */
/* --afdeling: de vier afdelingpagina's (pijler_hero() in bouw-structuur.py),
   28 september 2026. Iets hoger en één knop met het
   aantal openstaande vacatures. Het verloop laat de foto rechts meer zien;
   de tekst staat links, waar het groen nog minstens 60% dekt (wit op de
   lichtste plek daar ongeveer 4:1, genoeg voor de kop als grote tekst). */
.page-hero-framed--afdeling{min-height:360px;}
.page-hero-framed--afdeling .page-hero-framed__scrim{background:linear-gradient(100deg,rgba(0,101,42,.92) 0%,rgba(0,101,42,.55) 42%,rgba(0,101,42,.05) 68%);}
.page-hero-framed--afdeling .page-hero-framed__title{margin-bottom:10px;}
.page-hero-framed--afdeling .page-hero-framed__ctas{margin-top:14px;}
.page-hero-framed__cta{font-weight:700;}
.page-hero-framed__ctas .page-hero-framed__cta svg{width:17px;height:17px;flex:none;}
/* Telefoon: zelfde egale verloop als de andere framed-hero's (zie de
   max-width:600px-regel hieronder), want daar loopt de tekst over de volle
   breedte en zou het lichte schuine verloop te weinig dekken. */
@media (max-width:600px){
  .page-hero-framed.page-hero-framed--afdeling{min-height:300px;}
  .page-hero-framed--afdeling .page-hero-framed__scrim{background:linear-gradient(0deg, rgba(0,101,42,0.92) 0%, rgba(0,101,42,0.82) 100%);}
}
/* --vacaturegroep: H1 "Vacature <Functie>" groot en wit, daaronder de
   recruitmentslogan van de afdeling, kleiner en in recruitment-oranje
   (vg_hero() in bouw-structuur.py). #F89501 haalt op het groene vlak 3,5:1:
   genoeg voor grote tekst, dus minimaal 24px vet. Op de telefoon is het
   verloop lichter (0,82) en zou dat 2,7:1 worden; daarom daar een egaal
   donkerder vlak (0,92). */
.page-hero-framed--vacaturegroep .page-hero-framed__title{margin-bottom:8px;}
.page-hero-framed__slogan{font-size:24px;font-weight:700;line-height:1.25;color:var(--orange);margin:0;}
@media (max-width:600px){
  .page-hero-framed--vacaturegroep .page-hero-framed__scrim{background:rgba(0,101,42,0.92);}
  /* Afbreking: zie .page-hero-framed__title in de 600px-regel hieronder;
     "Commercieel" blijft daar heel, "Vrachtwagenchauffeur" breekt netjes. */
}
/* Locatiestrook onder de header van een vacaturegroep (vg_locbar() in
   bouw-structuur.py): valt 22px over de onderkant van de foto, links gelijk
   met de tekst in de header (36px, de padding van __content), zoals de
   cijferbalk op /over-ons/ (.ons-stats). Oranje lijn 5px, gelijk aan alle
   andere oranje lijnen op de site. Label: zie 'Blokken die over een ander blok vallen' onderaan. */
.vg-locbar{position:relative;z-index:3;width:fit-content;max-width:720px;margin:-22px 0 0 36px;background:#00652A;border-radius:8px;border-bottom:5px solid var(--orange);box-shadow:0 12px 28px rgba(0,101,42,.22);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,auto);}
.vg-locbar__item{display:flex;align-items:center;gap:10px;padding:8px 20px;border-right:1px solid rgba(255,255,255,.14);}
.vg-locbar__item:last-child{border-right:0;}
.vg-locbar__item svg{width:16px;height:16px;flex:none;fill:none;stroke:#8FE0AE;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.vg-locbar__text{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.vg-locbar__label{font-size:13px;color:rgba(255,255,255,.75);}
.vg-locbar__value{font-size:15px;font-weight:700;color:#fff;}
@media (max-width:767px){
  .vg-locbar{margin:-18px 16px 8px;width:auto;max-width:none;grid-auto-flow:row;}
  .vg-locbar__item{border-right:0;border-bottom:1px solid rgba(255,255,255,.14);}
  .vg-locbar__item:last-child{border-bottom:0;}
}
.page-hero-framed--roomy{min-height:400px;}
/* --met-cijferbalk: /over-ons/. De cijferbalk (.ons-stats) schuift daar over
   de onderkant van de foto en heeft zelf de oranje lijn; die van de header
   zou alleen als twee hoekjes naast de balk uitsteken. */
.page-hero-framed--met-cijferbalk{border-bottom:0;}
.page-hero-framed--roomy .page-hero-framed__content{padding-bottom:64px;}
.page-hero-framed__ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:26px;position:relative;z-index:2;}
/* Iets groter dan de standaard .btn (elders op de site): dit zijn de twee
   hoofd-CTA's van de hele pagina, mogen duidelijker uitspringen dan een
   knop in de lopende tekst. */
.page-hero-framed__ctas .btn{padding:16px 30px;font-size:16px;}
.page-hero-framed__ctas .btn svg{width:19px;height:19px;}
@media (max-width:600px){
  .page-hero-framed{min-height:280px;border-radius:0;}
  /* Op de telefoon loopt de tekst over de volle breedte, ook over het deel
     waar het schuine verloop hierboven bijna doorzichtig is. Daarom hier een
     egaal verloop van onder naar boven, op het lichtste punt nog 0,82: ook
     op een witte foto haalt wit 5,4:1 en de kicker (#CCEBD8) 4,7:1. */
  .page-hero-framed__scrim{background:linear-gradient(0deg, rgba(0,101,42,0.92) 0%, rgba(0,101,42,0.82) 100%);}
  .page-hero-framed__content{max-width:none;padding:28px 20px 28px;}
  /* Lange samenstellingen ("Vrachtwagenchauffeur") passen niet op een
     telefoon en werden door overflow:hidden afgesneden. hyphens:auto breekt
     ze volgens de Nederlandse regels (lang="nl"), maar alleen woorden van 12
     letters of meer, met minstens 6 letters aan elke kant: "Minipers" en
     "Commercieel" blijven heel (was "Mini-pers", feedback C7, 7 oktober
     2026). Titel iets kleiner (34 in plaats van 38px), zodat de meeste
     woorden heel passen. overflow-wrap is het vangnet. */
  .page-hero-framed__title{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 6 6;-webkit-hyphenate-limit-before:6;-webkit-hyphenate-limit-after:6;overflow-wrap:break-word;font-size:clamp(28px,8.4vw,34px);line-height:1.12;}
  .page-hero-framed--roomy{min-height:280px;}
  .page-hero-framed--roomy .page-hero-framed__content{padding-bottom:28px;}
}

.afd-intro__title{font-size:var(--fs-h2);font-weight:700;margin:0 0 14px;}
.afd-intro__sub{color:#5f5d5b;font-size:var(--fs-lead);margin:0 0 36px;max-width:64ch;line-height:1.6;}

.afd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
.afd-card{position:relative;display:flex;aspect-ratio:16/9;border-radius:8px;overflow:hidden;color:#fff;text-decoration:none;}
.afd-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 500ms cubic-bezier(0.2,0.6,0.2,1);}
.afd-card:hover img{transform:scale(1.045);}
.afd-card__scrim{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,101,42,0.85) 0%, rgba(0,101,42,0.05) 55%);}
/* --green-cta i.p.v. --green: #009D3D op wit is 3,57:1 en faalt bij 13px
   vet (geen 'grote tekst'); --green-cta (#007E31) is 5,21:1 (AA). */
.afd-card__count{position:absolute;top:18px;left:18px;background:#fff;color:var(--green-cta);font-size:13px;font-weight:700;padding:8px 16px;border-radius:999px;box-shadow:0 2px 10px rgba(0,0,0,0.15);}
.afd-card__body{position:relative;margin-top:auto;padding:26px;width:100%;display:flex;align-items:end;justify-content:space-between;gap:16px;}
/* --fs-h4 i.p.v. --fs-h3 hier bewust: .afd-card heeft een vaste
   aspect-ratio (16/9) met overflow:hidden en de titel wordt met
   margin-top:auto tegen de onderrand gedrukt — bij --fs-h3 (28px) zou een
   iets langere afdelingsnaam de vaste kaarthoogte kunnen overschrijden en
   afgekapt worden. */
.afd-card__name{font-weight:700;font-size:var(--fs-h4);margin:0 0 4px;}
.afd-card__tagline{font-size:15px;color:rgba(255,255,255,0.9);margin:0;}
.afd-card__arrow{width:38px;height:38px;border-radius:999px;background:#fff;display:grid;place-items:center;flex:none;transition:transform 200ms cubic-bezier(0.2,0.6,0.2,1);}
.afd-card__arrow svg{width:16px;height:16px;stroke:var(--green-deep);}
.afd-card:hover .afd-card__arrow{transform:translateX(4px);}
@media (max-width:980px){.afd-grid{grid-template-columns:1fr;}}

/* ---------- MATCHER (home) ---------- */
.matcher{background:#fff;border:1.5px dashed rgba(27,24,16,0.18);border-radius:5px;padding:32px clamp(20px,4vw,44px);margin-bottom:48px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;}

/* ---------- JOB CARDS (home + vacatures) ---------- */
.jobs{background:var(--paper);}
.jobs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px;}
.source-label{display:inline-flex;align-items:center;gap:9px;font-family:'Ubuntu Mono',monospace;font-size:var(--fs-small);color:#5f5d5b;}
.source-label i{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block;}
.job-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
/* Kleiner dan de andere afdelingslabels, zoals voorheen. */
.job-dept.dept-badge{position:static;font-size:var(--fs-small);padding:6px 10px 4px;border-bottom-width:2px;box-shadow:none;}
.job-type{color:#5f5d5b;font-family:'Ubuntu Mono',monospace;font-size:var(--fs-small);}
.jobs-foot{display:flex;justify-content:center;margin-top:36px;}
.jobs-head-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--green-deep);font-size:15px;flex:none;}
.jobs-head-link svg{width:15px;height:15px;transition:transform .2s ease;}
.jobs-head-link:hover svg{transform:translateX(4px);}

/* ---------- VACATUREKAART v3 (home + /alle-vacatures/) ----------
   Mockup september 2026. Vervangt op de homepage het 2-koloms .vac-grid/
   .vac-card-grid-rooster, en op /alle-vacatures/ de verticale .vac-list/
   .vac-row-lijst — die laatste twee klassen blijven ongewijzigd in gebruik
   op elke pijler-/functiepagina en op de vacaturepagina zelf (site/o/),
   vandaar hier een eigen, nieuwe klasse i.p.v. .vac-row hergebruiken.
   Twee toepassingen van dezelfde .vac-card: .job-scroll (home, horizontaal
   scrollend, zie .dept-slider hierboven) en .vac-cards-grid (/alle-
   vacatures/, met de zijbalk-filter ernaast een vaste 2-koloms grid,
   herontwerp september 2026 — was hiervoor auto-fit, wrappend naar
   meerdere rijen). */
.jobs-head-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
/* .job-scroll i.p.v. het eerdere .vac-scroll: alleen de naam, zelfde
   mechanisme. cursor:grab/.is-dragging, zie de toelichting bij
   .dept-slider hierboven — het slepen zelf zit in site.js. */
.job-scroll{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px;cursor:grab;}
.job-scroll::-webkit-scrollbar{display:none;}
.job-scroll.is-dragging{cursor:grabbing;scroll-snap-type:none;}
.job-scroll .vac-card{flex:0 0 min(31.5%,400px);min-width:300px;scroll-snap-align:start;}
.vac-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:22px;}
@media (max-width:700px){.vac-cards-grid{grid-template-columns:1fr;}}
/* #interessant ("Ook interessant voor jou", site/o/index.html): altijd
   precies 3 kaarten, dus een eigen kolomaantal i.p.v. de 2 van
   /alle-vacatures/ hierboven. */
#interessant .vac-cards-grid{grid-template-columns:repeat(3,1fr);}
@media (max-width:980px){#interessant .vac-cards-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:700px){#interessant .vac-cards-grid{grid-template-columns:1fr;}}
.vac-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;text-decoration:none;color:var(--ink);transition:box-shadow .15s ease, transform .15s ease;}
.vac-card:hover{box-shadow:0 6px 20px rgba(27,24,16,0.1);transform:translateY(-2px);}
.vac-card__photo{position:relative;aspect-ratio:4/3;overflow:hidden;}
.vac-card__photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(0.2,0.6,0.2,1);}
.vac-card:hover .vac-card__photo img{transform:scale(1.05);}
/* Neutraal donkere waas (30 september 2026, optie A uit
   previews/vacaturekaart-verloop.html): net genoeg voor de witte titel, zodat
   de foto zijn eigen kleuren houdt. Het groen zit in de balk eronder. */
.vac-card__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 28%,rgba(0,0,0,0) 55%);pointer-events:none;}
/* --gold-text i.p.v. --orange/--gold als vlak: wit op --orange (#F89501) is
   2,26:1 en faalt altijd, en op --gold (#CE5C00) bij deze tekstgrootte
   (11px, geen 'grote tekst') nog maar 4,01:1. Wit op --gold-text is 5,93:1
   (AA), zie docs/huisstijl-en-toegankelijkheid.md. */
.vac-card__badge{position:absolute;top:14px;left:14px;z-index:2;background:var(--gold-text);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:5px 10px;border-radius:5px;}
/* --fs-h4 i.p.v. --fs-h3 hier bewust: dit is een absoluut gepositioneerde
   titel over een foto met vaste aspect-ratio (4/3, overflow:hidden) — bij
   --fs-h3 (28px) zou een langere functietitel over de rand van de foto
   kunnen lopen en afgekapt worden. */
.vac-card__title{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;color:#fff;font-weight:700;font-size:var(--fs-h4);line-height:1.25;}
.vac-card__strip{display:flex;gap:16px;padding:10px 20px;background:linear-gradient(90deg,var(--green) 0%,var(--deep-2) 100%);color:#fff;font-size:13px;font-weight:600;}
.vac-card__strip span{display:flex;align-items:center;gap:6px;}
.vac-card__strip svg{width:14px;height:14px;flex:none;color:#fff;stroke:currentColor;}
.vac-card__body{padding:16px 20px 20px;display:flex;flex-direction:column;}
.vac-card__dept{display:block;font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--green);margin:0 0 6px;}
.vac-card__salary{color:var(--ink);font-weight:700;font-size:var(--fs-body);margin:0 0 14px;}
.vac-card__cta{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:2px solid var(--orange);font-weight:700;color:var(--green-cta);}
.vac-card__cta svg{width:15px;height:15px;transition:transform .2s cubic-bezier(0.2,0.6,0.2,1);}
.vac-card:hover .vac-card__cta svg{transform:translateX(4px);}
@media (max-width:600px){.job-scroll .vac-card{flex-basis:280px;}}

/* ---------- VACATURES: zijbalk-filter (herontwerp, september 2026)
   .vac-aside blijft ook gebruikt op site/o/index.html (eigen, andere
   inhoud); de rest hieronder is specifiek voor /alle-vacatures/. .vac-layout
   was hier al als naam gereserveerd (zie de @media-override verderop in dit
   bestand, die stond al klaar op een lege class), nu weer in gebruik als de
   260px/1fr-grid zelf. ---------- */
.vac-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:26px;}
.vac-layout{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:start;}
.filter-search{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:5px;padding:0 18px;height:50px;background:#fff;}
.filter-search svg{width:18px;height:18px;stroke:#5f5d5b;flex-shrink:0;}
.filter-search input{flex:1;min-width:0;border:0;outline:0;font-family:'Ubuntu',Arial,sans-serif;font-size:15px;color:var(--ink);background:transparent;height:100%;}
.filter-search-clear{flex:none;display:flex;border:0;background:none;color:#5f5d5b;padding:4px;border-radius:4px;cursor:pointer;transition:background 150ms cubic-bezier(0.2,0.6,0.2,1), color 150ms cubic-bezier(0.2,0.6,0.2,1);}
.filter-search-clear:hover{color:var(--ink);background:var(--paper);}
.filter-groep-label{font-size:13px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#5f5d5b;margin:0 0 10px;}
.filter-lijst{display:flex;flex-direction:column;gap:2px;}
.filter-opt{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:none;color:var(--ink);font-weight:500;font-size:14.5px;font-family:'Ubuntu',Arial,sans-serif;padding:9px 10px;border-radius:5px;cursor:pointer;transition:background 150ms cubic-bezier(0.2,0.6,0.2,1);}
.filter-opt:hover{background:var(--paper);}
/* Actieve keuze in de zijbalk van /alle-vacatures/ (29 september 2026):
   donkergroen --vacature-bar, dezelfde kleur als de balk op de
   vacaturekaarten ernaast, met witte tekst (9,17:1). Het aantal in #CCEBD8
   (7,18:1) in plaats van met opacity, want wit op 65% zou hier te zwak
   worden. Deze regel staat na :hover, dus een actieve keuze blijft donker. */
.filter-opt.actief{background:linear-gradient(90deg,var(--green) 0%,var(--deep-2) 100%);color:#fff;font-weight:700;}
.filter-opt .n{opacity:.65;}
.filter-opt.actief .n{opacity:1;color:#CCEBD8;}
.filter-wis{border:1px solid var(--green);background:none;color:var(--green);font-weight:700;font-size:14px;cursor:pointer;font-family:'Ubuntu',Arial,sans-serif;padding:10px 14px;border-radius:5px;transition:background 150ms cubic-bezier(0.2,0.6,0.2,1), color 150ms cubic-bezier(0.2,0.6,0.2,1);}
.filter-wis:hover{background:var(--green);color:#fff;}
.vac-listhead{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--line);}
.vac-listhead .rl{font-size:18px;font-weight:700;color:var(--ink);}
.vac-list{display:flex;flex-direction:column;gap:14px;margin-top:22px;}
.vac-row{display:flex;align-items:center;gap:20px;border:1px solid var(--line);border-radius:5px;padding:20px 24px;background:#fff;transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;}
.vac-row:hover{border-color:var(--green);transform:translateY(-1px);box-shadow:0 20px 36px -28px rgba(27,24,16,0.5);}
/* Optionele foto vooraan de rij (alleen homepage; de meeste vac-row's op de
   site tonen geen foto, deze regel doet dan simpelweg niets). */

.vac-row .rmain{flex:1 1 auto;display:flex;flex-direction:column;gap:9px;min-width:0;}
.vac-row h2{font-size:var(--fs-h3);font-weight:700;color:var(--ink);line-height:1.2;letter-spacing:0;}
.vac-row .rmeta{display:flex;gap:22px;flex-wrap:wrap;font-size:var(--fs-body);color:#5f5d5b;}
.vac-row .rmeta span{display:flex;align-items:center;gap:7px;}
.vac-row .rmeta svg{width:16px;height:16px;stroke:var(--green);}
.vac-row .rgo{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;color:var(--gold-text);font-size:14.5px;font-weight:700;}
.vac-row .rgo svg{width:15px;height:15px;}
.vac-empty{border:1.5px dashed var(--line);border-radius:5px;padding:44px;text-align:center;margin-top:22px;}
.vac-empty p{font-size:var(--fs-body);line-height:1.6;color:#5f5d5b;margin-bottom:18px;}
/* Korte melding op een vacaturegroeppagina zonder open vacatures (optie C
   uit previews/geen-vacatures.html). Wijst naar de job-alertband onderaan.
   Tekst #414042 (10,4:1), links --green-cta (5,21:1). */
.vg-leeg{background:#fff;border-radius:8px;box-shadow:0 2px 14px rgba(0,0,0,.06);padding:22px 26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
/* .ms staat verderop in dit bestand en zet display:inline-block; vandaar
   de dubbele klasse, zodat het icoon in het rondje gecentreerd blijft. */
.vg-leeg__icoon.ms{flex:none;width:44px;height:44px;border-radius:50%;background:var(--green-soft);color:var(--green-deep);display:flex;align-items:center;justify-content:center;font-size:24px;}
.vg-leeg p{margin:0;flex:1 1 320px;color:#414042;font-size:var(--fs-body);line-height:1.6;}
.vg-leeg p strong{display:block;}
.vg-leeg__links{display:flex;gap:4px 24px;flex-wrap:wrap;}
.vg-leeg__link{display:inline-flex;align-items:center;gap:7px;min-height:44px;color:var(--green-cta);font-weight:700;font-size:15px;text-decoration:none;}
.vg-leeg__link .ms{font-size:18px;transition:transform 200ms cubic-bezier(.2,.6,.2,1);}
.vg-leeg__link:hover .ms{transform:translateX(4px);}
.vg-leeg__link:focus-visible{outline:3px solid var(--green-deep);outline-offset:2px;border-radius:5px;}

/* Rijkere lege-staat, alleen /alle-vacatures/: i.p.v. het sobere .vac-empty
   hierboven (nog wel in gebruik op de pijler-/functiepagina's en de
   Achterhoek-regiopagina) een jobalert- en een contact-paneel naast elkaar,
   zodat iemand die zichzelf filtert naar nul resultaten meteen twee
   alternatieven ziet. .job-alert-form binnenin is de bestaande, generieke
   listener uit site.js (submit op elk .job-alert-form-element op de
   pagina), geen aparte koppeling nodig. */
.vac-empty-rich{background:#fff;border:1px solid var(--line);border-radius:5px;padding:48px;box-shadow:0 20px 40px -24px rgba(27,24,16,0.25);margin-top:22px;}
.vac-empty-rich h2{font-size:var(--fs-h2);font-weight:700;margin:0 0 10px;}
.vac-empty-rich>p{color:#5f5d5b;margin:0 0 32px;max-width:60ch;line-height:1.6;}
.vac-empty-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.vac-empty-panel{border-radius:5px;padding:28px;}
.vac-empty-panel--green{background:linear-gradient(105deg,var(--green) 0%,var(--green-deep) 100%);}
.vac-empty-panel--green h3{color:#fff;font-size:var(--fs-h3);margin:0 0 14px;}
.vac-empty-panel--paper{background:var(--paper);}
.vac-empty-panel--paper h3{font-size:var(--fs-h3);margin:0 0 10px;color:var(--ink);}
.vac-empty-panel--paper p{color:#5f5d5b;font-size:var(--fs-body);line-height:1.6;margin:0 0 18px;}
@media (max-width:700px){.vac-empty-grid{grid-template-columns:1fr;}}

/* ---------- VACATUREPAGINA (/o/<slug>) ----------
   Herontwerp september 2026: fotohero (.page-hero-framed, i.p.v. de eigen
   .vac-back/.vac-tags/.vac-hero-meta-opmaak van hiervoor) en een groen
   sollicitatiepaneel i.p.v. het vlakke witte .apply-card-formulier. */
.vac-detail{display:grid;grid-template-columns:1fr 380px;gap:56px;align-items:start;}
/* Voorwaardenbalk onder de banner (29 september 2026): .vg-locbar van de
   vacaturegroeppagina's, maar met flex-wrap, zodat vier waarden met een lang
   salaris op een smaller scherm netjes doorlopen. Vervangt de kaart
   "Voorwaarden" die hier eerst in de zijbalk stond. De knop "Chat met Harry"
   in de banner alleen op mobiel/tablet: op desktop staat de kaart
   'Snel solliciteren' (.vg-harry) ernaast. */
.vg-locbar.vac-locbar{display:flex;flex-wrap:wrap;max-width:calc(100% - 72px);}
/* Vanaf 1101px één regel: een lange locatie ("Eindhoven · S-Hertogenbosch ·
   Tilburg · Breda") loopt dan binnen zijn eigen vakje door, in plaats van dat
   het laatste vakje los op een tweede regel valt. */
@media (min-width:1101px){.vg-locbar.vac-locbar{flex-wrap:nowrap;}.vac-locbar .vg-locbar__item{min-width:0;}}
@media (max-width:767px){.vg-locbar.vac-locbar{flex-direction:column;max-width:none;}}
.vac-body{max-width:760px;font-size:var(--fs-body);line-height:1.6;color:#414042;}
.vac-body h2{font-size:var(--fs-h2);font-weight:700;margin:34px 0 12px;color:var(--ink);line-height:1.25;}
.vac-body h3{font-size:var(--fs-h3);font-weight:700;margin:34px 0 12px;color:var(--ink);line-height:1.2;}
.vac-body h4{font-size:var(--fs-h4);font-weight:500;margin:28px 0 10px;color:var(--ink);line-height:1.3;}
.vac-body p{margin:0 0 16px;}
.vac-body ul,.vac-body ol{margin:0 0 18px;}
.vac-body ol{padding-left:22px;}
/* Recruitee levert de vacaturetekst als kale <ul>/<li>, standaard bolletjes.
   Zelfde vinkje (task_alt) als ul.tick elders op de site, via ::before i.p.v.
   een los icoon-element: dit is doorgezette Recruitee-HTML
   (dangerouslySetInnerHTML), daar kan geen <span class="ms"> in. */
.vac-body ul{list-style:none;padding-left:0;}
.vac-body ul li{position:relative;padding-left:30px;}
.vac-body ul li::before{content:'task_alt';position:absolute;left:0;top:1px;font-family:'Material Symbols Outlined';font-feature-settings:'liga';font-size:19px;line-height:1;color:var(--green);}
.vac-body li{margin-bottom:8px;}
.vac-body img{max-width:100%;height:auto;border-radius:5px;}
.vac-body a:not(.btn){color:var(--gold-text);font-weight:700;}  /* :not(.btn): een knop in de tekst houdt zijn witte tekst */
/* "Eerst een dag meelopen?", alleen in de eerste accordion-sectie. */
.vac-tip{background:var(--green-soft);border-radius:5px;padding:18px 22px;display:flex;gap:14px;align-items:center;margin-top:18px;max-width:65ch;}
.vac-tip svg{flex:none;stroke:var(--green-deep);}
.vac-tip p{margin:0;font-size:var(--fs-body);line-height:1.6;color:var(--green-deep);}
/* "Over [bedrijf]": zelfde groene verloop als .apply-panel hieronder, twee
   verschillende toepassingen van dezelfde merkkleuren. */
.bedrijf-blok{background:linear-gradient(105deg,var(--green) 0%,var(--green-deep) 100%);border-radius:5px;padding:32px;color:#fff;margin-bottom:48px;}
.bedrijf-blok h2{font-size:var(--fs-h2);font-weight:700;margin:0 0 10px;color:#fff;}
.bedrijf-blok p{font-size:var(--fs-body);line-height:1.6;color:rgba(255,255,255,0.9);margin:0 0 20px;max-width:62ch;}
.bedrijf-blok p strong{color:#fff;}
.bedrijf-cijfers{display:flex;gap:40px;flex-wrap:wrap;}
.bedrijf-cijfers .c{font-size:26px;font-weight:700;margin:0;color:#fff;}
.bedrijf-cijfers .l{font-size:13px;color:rgba(255,255,255,0.8);margin:2px 0 0;}

/* Sollicitatieblok: de aankondigingstekst boven het groene paneel i.p.v.
   ernaast (was een 2-koloms grid, oogde met de kortere tekst links en het
   veel hogere paneel rechts onevenwichtig). */
.apply-layout{display:flex;flex-direction:column;}
.apply-intro{max-width:70ch;margin-bottom:28px;}
.apply-layout .apply-panel{max-width:760px;}
.apply-sent{max-width:640px;margin:0 auto;border:1px solid var(--line);border-radius:5px;background:#fff;padding:56px 34px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.apply-sent .chk{width:60px;height:60px;border-radius:50%;background:var(--green-soft);display:flex;align-items:center;justify-content:center;}
.apply-sent .chk svg{width:30px;height:30px;stroke:var(--green-deep);}
.apply-sent h3{font-size:var(--fs-h3);font-weight:700;color:var(--ink);}
.apply-sent p{font-size:var(--fs-body);line-height:1.6;color:#5f5d5b;max-width:460px;}
.apply-panel{background:linear-gradient(120deg,var(--green) 0%,var(--green-deep) 100%);border-radius:12px;padding:36px;box-shadow:0 24px 56px rgba(0,101,42,0.25);}
.apply-panel-head{margin:0 0 22px;}
.apply-panel-head strong{display:block;font-weight:700;font-size:22px;color:#fff;letter-spacing:-0.01em;}
.apply-panel .field label{color:#fff;}
/* (verplicht)/(optioneel) achter de labels: wit zoals het label, alleen dunner
   (was 75% wit, dat haalde op het lichtste groen te weinig contrast). */
.apply-panel .field label .opt,.apply-upload .t .opt{color:#fff;font-weight:400;}
.apply-panel .field label .req{color:#fff;}
.apply-panel .apply-form input:not([type="checkbox"]),
.apply-panel .apply-form textarea{border:0;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.apply-panel .apply-form input:focus-visible,
.apply-panel .apply-form textarea:focus-visible{box-shadow:0 0 0 3px rgba(0,0,0,0.28);}
.apply-uploads{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.apply-upload{display:block;border:1.5px dashed rgba(255,255,255,0.4);border-radius:5px;padding:16px;text-align:center;cursor:pointer;background:rgba(255,255,255,0.08);transition:background 150ms cubic-bezier(0.2,0.6,0.2,1), border-color 150ms cubic-bezier(0.2,0.6,0.2,1);}
.apply-upload:hover{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.6);}
.apply-upload input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.apply-upload .t{display:block;font-weight:700;font-size:14px;color:#fff;margin-bottom:3px;}
.apply-upload .s{display:block;font-size:12px;color:rgba(255,255,255,0.7);}

.apply-panel .apply-form .err{display:flex;align-items:flex-start;gap:11px;background:rgba(255,255,255,0.92);border:1px solid #f3b8b8;border-radius:5px;padding:14px 16px;font-size:15px;line-height:1.5;color:var(--ink);}
.apply-panel .apply-form .err svg{width:20px;height:20px;stroke:#c0392b;flex-shrink:0;}
.apply-panel .apply-consent{color:rgba(255,255,255,0.85);}
.apply-panel .apply-consent a{color:#fff;}
.apply-panel .apply-submit-row{justify-content:center;}
.apply-panel .apply-privacy{color:rgba(255,255,255,0.7);text-align:center;margin-top:4px;}
.apply-panel .apply-privacy a{color:#fff;}
.apply-form{display:flex;flex-direction:column;gap:20px;}
.apply-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.apply-consent{display:flex;align-items:flex-start;gap:11px;font-size:var(--fs-body);line-height:1.5;color:#5f5d5b;}
.apply-consent input{width:19px;height:19px;accent-color:var(--orange);margin-top:2px;flex:0 0 auto;}
.apply-privacy{font-size:var(--fs-small);line-height:1.5;color:#5f5d5b;}
.apply-privacy a{color:var(--gold-text);font-weight:700;text-decoration:underline;}
.apply-submit-row{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;}
@media (max-width:600px){
  .apply-uploads{grid-template-columns:1fr;}
}

/* ---------- VALUES (dark band) ---------- */
.values{background:radial-gradient(1200px 500px at 15% 0%, var(--deep-2), var(--deep) 60%);color:#fff;position:relative;overflow:hidden;}
.values::before{content:'';position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(248,149,1,0.18),transparent 70%);}
.values .section-head .eyebrow{color:var(--green-soft);}
.values h2{color:#fff;}
.values .section-head p{color:rgba(255,253,249,0.86);}

/* ---------- STORIES (home): 'Verhalen van collega's' ----------
   Statisch 3-koloms rooster (geen slider), zelfde kaarttaal als .dept-card
   hierboven en .verhalen-card op /onze-verhalen/: foto+scrim boven, witte
   tekstvoet onder, met een overlappend badge-pilletje op de rand tussen
   foto en voet. Titel = de verhaalkop, naam-rij (met icoon) en citaat
   staan er los onder, allebei altijd zichtbaar (geen hover-reveal meer). */
.stories{background:var(--paper-dim);}
/* .stories is ook in gebruik op /contact/, /over-ons/ (Locaties) en site/o/
   ("Ook interessant voor jou") — die blijven --paper-dim. Alleen de homepage
   krijgt hier de witte stap in de blok-om-blok-afwisseling (zie #over
   hierboven), vandaar dit eigen id i.p.v. de klasse aanpassen. */
#verhalen-home{background:#fff;}
.stories-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:44px;}
.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.story-card{display:flex;flex-direction:column;background:#fff;border-radius:8px;box-shadow:0 2px 14px rgba(0,0,0,0.08);text-decoration:none;color:var(--ink);transition:box-shadow 150ms ease, transform 150ms ease;}
.story-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.14);transform:translateY(-2px);}
.story-card__photo{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:8px 8px 0 0;}
.story-card__photo img{width:100%;height:100%;object-fit:cover;transition:transform 400ms cubic-bezier(0.2,0.6,0.2,1);}
.story-card:hover .story-card__photo img{transform:scale(1.04);}
.story-card__scrim{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,101,42,0.55) 0%, rgba(0,101,42,0) 45%);}
.story-card__badge-wrap{position:relative;display:flex;justify-content:center;}
/* Afdelingslabel op verhaalkaarten (28 september 2026, tweede versie):
   rechthoekig, donkergroen met witte hoofdletters en een oranje lijn,
   gecentreerd over de onderrand van de foto (.story-card, .verhalen-card,
   .vg-tale-card). Eén gedeelde klasse; de wrappers (__badge-wrap) zorgen
   voor het centreren. Achtergrond: zie 'Blokken die over een ander blok vallen' onderaan.
   "Binnenkort" (--soon): #CE5C00 met wit, 4,01:1, onder de norm voor 13px.
   Bewuste keuze van Willem Gootjes, zie CLAUDE.md. Niet "repareren" zonder
   overleg. */
.dept-badge{position:absolute;top:-16px;display:inline-flex;align-items:center;background:#00652A;color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;line-height:1;padding:9px 16px 7px;border-radius:3px;border-bottom:3px solid var(--orange);box-shadow:0 4px 12px rgba(0,0,0,.16);white-space:nowrap;}
/* 'Binnenkort' gespiegeld aan de groene labels (30 september 2026, optie A uit
   previews/binnenkort-label.html): oranje verloop van licht naar donker met een
   lijn in het groene verloop. Staat na de :not(.dept-badge--soon)-regel niet in
   de weg, want die slaat dit label over. Wit op #F89501 is 2,26:1: bewuste
   keuze, zie CLAUDE.md. */
.dept-badge--soon{background:linear-gradient(90deg,var(--orange) 0%,var(--gold) 100%);border-bottom:3px solid;border-image:linear-gradient(90deg,var(--green),var(--deep-2)) 1;}
.story-card__body{padding:30px 24px 26px;display:flex;flex-direction:column;flex:1;}
/* Zelfde opmaak als .dept-card__desc, zie daar. */
.story-card__title{font-weight:500;font-size:18px;line-height:1.5;margin:0 0 14px;text-align:center;color:#414042;}
/* Naam en "Lees meer" optisch centreren: het icoon (15px) plus de gap (7px)
   telt mee bij justify-content:center, waardoor de tekst 11px uit het midden
   staat. 22px opvulling aan de andere kant zet de tekst zelf onder de kop.
   Zelfde correctie op .verhalen-card en .vg-tale. */
/* #5f5d5b (secundaire tekstkleur, 6,6:1) in Regular: de naam is een
   bijregel onder de kop; het groen blijft voor label en "Lees meer". */
.story-card__name{display:flex;padding-right:22px;align-items:center;justify-content:center;gap:7px;margin-bottom:16px;color:#5f5d5b;font-weight:400;font-size:14px;}
.story-card__name svg{width:15px;height:15px;flex:none;}
.story-card__desc{color:#5f5d5b;font-size:var(--fs-body);line-height:1.6;margin:0 0 20px;}
.story-card__cta{margin-top:auto;padding-left:22px;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--green-cta);font-weight:700;font-size:15px;}
.story-card__cta svg{width:15px;height:15px;transition:transform 200ms cubic-bezier(0.2,0.6,0.2,1);}
.story-card:hover .story-card__cta svg{transform:translateX(4px);}

/* ---------- STAPPEN ---------- */
.steps{background:var(--paper);}
/* Stapnummer komt uit een CSS-counter, niet uit vaste tekst: zo blijft de
   nummering kloppen als het aantal stappen wijzigt (toevoegen/verwijderen
   in het CMS op /over-ons/, of een ander aantal op /o/<slug>). */
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:stepnum;}
.step-card{background:var(--paper-dim);border-radius:5px;padding:34px 30px;display:flex;flex-direction:column;gap:12px;}
.step-card .sn{width:44px;height:44px;border-radius:50%;background:var(--green-soft);color:var(--green-deep);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:19px;margin-bottom:6px;}
.step-card .sn::before{counter-increment:stepnum;content:counter(stepnum);}
.step-card h3{font-size:var(--fs-h3);font-weight:700;color:var(--ink);}
.step-card p{font-size:var(--fs-body);line-height:1.6;color:#5f5d5b;}

/* ---------- VERHALEN-KAART, gedeeld blok op functiepagina's ----------
   Niet meer voor /onze-verhalen/ zelf (die heeft sinds de 'Onze verhalen'-
   herbouw zijn eigen .verhalen-card, zie verderop) — wel nog voor
   verhalenblok() in scripts/bouw-structuur.py, de "Zo ziet dat er in het
   echt uit"-sectie op vacaturegroeppagina's. */

.tale-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:5px;overflow:hidden;transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;}
.tale-card:hover{transform:translateY(-4px);border-color:var(--orange);box-shadow:0 24px 40px -26px rgba(27,24,16,0.4);}

.tale-card h3{font-size:var(--fs-h3);font-weight:700;line-height:1.25;color:var(--ink);}

/* ---------- ONZE VERHALEN (/onze-verhalen/) ----------
   Hero-blok: zie .page-hero-framed hierboven (gedeeld met /afdelingen/ en
   /over-ons/). Hier alleen de eigen kaart .verhalen-card, los van
   .tale-card hierboven (die blijft in gebruik op vacaturegroeppagina's). */
/* Uitgelicht verhaal (28 september 2026): compact blok boven de filters,
   alleen zichtbaar als beide filters op "Alle" staan. Welk verhaal: het
   vinkje "Uitgelicht" in het CMS, zie verhaalkaart() in bouw-structuur.py. */
/* Uitgelicht verhaal: de achtergrond hieronder wordt overschreven door
   'Blokken die over een ander blok vallen' onderaan dit bestand (#009D3D). */
.vh-featured{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));background:#00732E;color:#fff;border-radius:8px;overflow:hidden;margin-bottom:28px;border-bottom:5px solid #f89501;box-shadow:0 14px 36px rgba(0,101,42,.24);text-decoration:none;}
.vh-featured:hover{color:#fff;}
/* Uitgelicht verhaal valt 56px over de onderkant van de header, 36px
   ingesprongen (alleen /onze-verhalen/). De header krijgt dan extra ruimte
   onderin, zodat de tekst vrij blijft; .has-featured zet het sjabloon
   van de pagina alleen als het blok zichtbaar is (beide filters op Alle).
   De header zelf blijft even hoog als op /afdelingen/ (320px, telefoon
   280px); alleen de tekst schuift omhoog.
   Marge: de sectiepadding (= --ruimte-sectie, 80px of 52px) plus 56px
   overlap; onder 768px 32px overlap. */
.verhalen-hero.has-featured .page-hero-framed__content{padding-bottom:100px;}
.verhalen-sectie .vh-featured{position:relative;z-index:3;margin:calc(-1 * (var(--ruimte-sectie) + 56px)) 36px 20px;box-shadow:0 20px 44px rgba(0,101,42,.30);}
@media (min-width:768px){.verhalen-sectie .vh-featured__body{padding-top:28px;padding-bottom:28px;}}
.vh-featured:focus-visible{outline:3px solid #f89501;outline-offset:3px;}
.vh-featured__media{position:relative;min-height:260px;overflow:hidden;}
.vh-featured__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform 500ms cubic-bezier(.2,.6,.2,1);}
.vh-featured:hover .vh-featured__media img{transform:scale(1.04);}
.vh-featured__body{padding:32px 40px;display:flex;flex-direction:column;justify-content:center;gap:12px;box-sizing:border-box;}
/* Oranje met wit (2,26:1): bewuste uitzondering, zie CLAUDE.md. Zelfde
   strakke vorm als .dept-badge, maar zonder lijn en niet over een fotorand. */
.vh-featured__dept{align-self:flex-start;background:#f89501;color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;line-height:1;padding:9px 16px 7px;border-radius:3px;}
.vh-featured__title{font-size:clamp(24px,2.4vw,32px);font-weight:700;font-style:normal;line-height:1.15;margin:0;color:#fff;text-wrap:balance;}
.vh-featured__who{margin:0;font-size:16px;font-weight:700;color:#CCEBD8;}
.vh-featured__cta{align-self:flex-start;margin-top:6px;display:inline-flex;align-items:center;gap:8px;min-height:44px;box-sizing:border-box;background:#fff;color:#00652A;font-weight:700;font-size:15px;padding:13px 20px;border-radius:5px;}
.vh-featured__cta svg{width:1em;height:1em;display:block;transition:transform 200ms cubic-bezier(.2,.6,.2,1);}
.vh-featured:hover .vh-featured__cta svg{transform:translateX(4px);}

/* Filterbalk: afdeling en type in één witte balk, elk met een label.
   Rustiger ontwerp (29 september 2026, optie A uit
   previews/verhalen-filters.html): tabs zonder randen of vlakken. De balk
   heeft een hairline in plaats van een schaduw, de labels staan in gewone
   tekst in plaats van hoofdletters. */
.vh-filters{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;background:#fff;border:1px solid #e6e6e7;border-radius:8px;padding:6px 22px;margin-bottom:18px;}
.vh-filters__group{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.vh-filters__label{font-size:15px;font-weight:500;color:#5f5d5b;margin-right:6px;}
.vh-filters__divider{width:1px;align-self:stretch;background:#E8E8E8;}
/* min-height 44px: de tikmaat uit de toegankelijkheidsregels. De actieve
   keuze is donkergroen en vet (9,82:1) met een lijn in huisstijloranje
   #F89501. Die lijn haalt op wit 2,26:1, maar is niet de enige drager: de
   vette tekst en aria-pressed geven de stand ook aan. Niet-actief #414042
   (10,4:1), telling #5f5d5b (6,6:1). */
.vh-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;box-sizing:border-box;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:#414042;padding:12px 12px 9px;font-family:'Ubuntu',Arial,sans-serif;font-size:15px;font-weight:500;line-height:1;cursor:pointer;transition:all 150ms;}
.vh-chip__icon{width:16px;height:16px;display:block;flex:none;}
.vh-chip__count{font-size:13px;font-weight:400;color:#5f5d5b;}
.vh-chip:hover{background:transparent;color:#00652A;border-bottom-color:#CCEBD8;}
.vh-chip:focus-visible{outline:3px solid #00652A;outline-offset:2px;}
.vh-chip.is-active{background:transparent;color:#00652A;font-weight:700;border-bottom-color:#F89501;}
.vh-chip.is-active .vh-chip__count{color:#00652A;}

/* Teller */
.vh-count{margin:0 0 32px;font-size:15px;color:#5f5d5b;}
.vh-count strong{color:#00652A;}

@media (max-width:767px){
  .vh-featured{grid-template-columns:1fr;}
  .verhalen-hero.has-featured .page-hero-framed__content{padding-bottom:72px;}
  .verhalen-sectie .vh-featured{margin:calc(-1 * (var(--ruimte-sectie) + 32px)) 12px 24px;}
  .vh-featured__media{min-height:200px;}
  .vh-featured__body{padding:24px 22px 26px;}
  .vh-filters__divider{display:none;}
  .vh-filters__group{width:100%;}
}

.verhalen-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.verhalen-card{display:flex;flex-direction:column;background:#fff;border-radius:8px;box-shadow:0 2px 14px rgba(0,0,0,0.08);color:var(--ink);text-decoration:none;transition:box-shadow 150ms ease, transform 150ms ease;}
.verhalen-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.14);transform:translateY(-2px);}
.verhalen-card__photo{aspect-ratio:16/10;overflow:hidden;border-radius:8px 8px 0 0;position:relative;}
.verhalen-card__photo img{width:100%;height:100%;object-fit:cover;transition:transform 400ms cubic-bezier(0.2,0.6,0.2,1);}
.verhalen-card:hover .verhalen-card__photo img{transform:scale(1.04);}
/* Zelfde groene verloop onderin de foto als .story-card__scrim op de
   homepage. Het label (.verhalen-card__badge-wrap) staat sinds 25 september
   2026 ook net als daar tussen foto en tekst, niet meer in de foto: die
   heeft overflow:hidden en sneed het label doormidden. */
.verhalen-card__scrim{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,101,42,0.55) 0%, rgba(0,101,42,0) 45%);}
.verhalen-card__badge-wrap{position:relative;display:flex;justify-content:center;}
.verhalen-card__body{padding:30px 24px 26px;display:flex;flex-direction:column;flex:1;}
/* Zelfde opmaak als .story-card__title op de homepage (optie C, zie
   .dept-card__desc): 18px Medium in #414042. */
.verhalen-card__title{font-weight:500;font-size:18px;line-height:1.5;margin-bottom:14px;text-align:center;color:#414042;}
/* Zelfde als .story-card__name: #5f5d5b in Regular (6,6:1). */
.verhalen-card__name{display:flex;padding-right:22px;align-items:center;justify-content:center;gap:7px;margin-bottom:16px;color:#5f5d5b;font-weight:400;font-size:14px;}
.verhalen-card__name svg{width:15px;height:15px;flex:none;}

.verhalen-card__cta{margin-top:auto;padding-left:22px;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--green-cta);font-weight:700;font-size:15px;}
.verhalen-card__cta svg{width:15px;height:15px;transition:transform 200ms cubic-bezier(0.2,0.6,0.2,1);}
.verhalen-card:hover .verhalen-card__cta svg{transform:translateX(4px);}

/* Podcast-placeholder: nog geen aflevering, dus geen link (cursor:default,
   pointer-events:none — de gedempte CTA-tekst hieronder mag daardoor onder
   de AA-norm blijven, WCAG zondert tekst in een inactief onderdeel uit). */
.verhalen-card.is-placeholder{cursor:default;opacity:0.85;pointer-events:none;}
.verhalen-card__photo-overlay{position:absolute;inset:0;background:rgba(0,101,42,0.55);display:flex;align-items:center;justify-content:center;}
.verhalen-card__photo-overlay svg{width:40px;height:40px;color:#fff;}
.verhalen-card.is-placeholder .verhalen-card__cta{color:#8A8A8A;}
@media (max-width:980px){.verhalen-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.verhalen-grid{grid-template-columns:1fr;}}

/* ---------- GALLERY (home) ---------- */

.g2{grid-column:3/5;grid-row:1/2;}

/* ---------- SLOTBAND: job-alert + footer (elke pagina) ----------
   Zoals het ontwerp (7 oktober 2026, optie C uit previews/jobalert-opties.html):
   de groene kaart valt 92px over de footer (margin-bottom:-92px, z-index:2).
   Achter het bovenste deel loopt de kleur van het blok erboven door; de
   onderste 92px is doorzichtig, daar zie je de donkergroene footer. Welke
   kleur erboven staat, volgt uit het om-en-om-ritme (ACHTERGRONDRITME
   hieronder: even secties #F1F6F2): staat .closer op een oneven plek, dan is
   het blok erboven gekleurd, anders wit. De footer heeft 148px ruimte
   bovenaan, zodat zijn inhoud onder de kaart begint. Geen schaduw.
   Lokaal-only formulier, zie site.js voor de TODO (nog geen echte
   bestemming/mailtool). */
.closer{position:relative;z-index:2;padding:48px 0 0;margin-top:auto;margin-bottom:-92px;}
section.closer{background:linear-gradient(to bottom,#fff calc(100% - 92px),transparent calc(100% - 92px)) !important;}
.hero-full ~ section.closer:nth-of-type(odd),
section:has(.page-hero-framed) ~ section.closer:nth-of-type(even){background:linear-gradient(to bottom,#F1F6F2 calc(100% - 92px),transparent calc(100% - 92px)) !important;}
section:has(.page-hero-framed) ~ section.cta-band + section.closer,.hero-full ~ section.cta-band + section.closer{background:linear-gradient(to bottom,#fff calc(100% - 92px),transparent calc(100% - 92px)) !important;}
/* Doel van "Stel job alert in" in .vg-leeg: niet onder de vaste header. */
#job-alert{scroll-margin-top:96px;}
/* Alleen zichtbaar op een pagina met de melding .vg-leeg (vacaturegroep
   zonder open vacatures), zie vg_vacatures_sectie() in bouw-structuur.py. */
.job-alert-open{display:none;align-items:center;gap:7px;min-height:44px;color:#fff;font-weight:700;font-size:15px;text-decoration:none;}
body:has(.vg-leeg) .job-alert-open{display:inline-flex;}
.job-alert-form.verstuurd .job-alert-open{display:none;}
.job-alert-open .ms{font-size:18px;transition:transform 200ms cubic-bezier(.2,.6,.2,1);}
.job-alert-open:hover .ms{transform:translateX(4px);}
.job-alert-open:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:5px;}
.job-alert-band{background:linear-gradient(90deg, var(--deep-2), var(--deep));border-radius:12px;border-bottom:5px solid var(--orange);padding:56px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:56px;color:#fff;}
/* Op desktop op één regel. */
.job-alert-band h2{font-size:clamp(28px,2.8vw,38px);white-space:nowrap;color:#fff;margin:0 0 10px;}
.job-alert-band .sub{font-size:var(--fs-body);color:rgba(255,253,249,0.86);margin-top:10px;max-width:420px;}
.job-alert-form{display:flex;flex-direction:column;gap:10px;min-width:min(280px,100%);}  /* min(): op 320px was 280px 2px te breed */
.job-alert-row{display:flex;gap:8px;background:#fff;border-radius:5px;padding:8px;}
.job-alert-row input{flex:1;border:0;outline:0;font-family:'Ubuntu',Arial,sans-serif;font-size:15px;color:var(--ink);background:transparent;padding-left:12px;min-width:0;}
.job-alert-row .btn{flex:none;}
.job-alert-note{font-size:var(--fs-small);color:rgba(255,253,249,0.7);}
.job-alert-success{font-size:14px;font-weight:700;color:#fff;background:rgba(255,255,255,0.15);border-radius:100px;padding:12px 20px;margin:0;}
.job-alert-form .job-alert-success{display:none;}
.job-alert-form.verstuurd .job-alert-row,.job-alert-form.verstuurd .job-alert-note{display:none;}
.job-alert-form.verstuurd .job-alert-success{display:block;}

/* ---------- PROSE / OVER ONS ---------- */
.prose{max-width:760px;}
.prose p{font-size:var(--fs-lead);line-height:1.65;color:#414042;margin-top:18px;margin-bottom:22px;}
.prose p strong{color:var(--ink);}

/* .ons-stats: de cijferbalk op /over-ons/, direct onder de hero (dunner
   gemaakt 28 september 2026: getal en label op één regel, schuift 28px over
   de headerfoto). De cijfers komen uit het CMS (overons.cijfers). Het
   verborgen data-cms-item-sjabloon is het eerste kind en telt in het grid
   niet mee. Label: wit op 85% op --green-deep haalt ruim 4,5:1. */
.ons-stats{
  max-width:1160px;
  margin:-28px auto 0;
  position:relative;
  z-index:3;
  background:#00652A;
  border-radius:8px;
  border-bottom:5px solid #f89501;
  box-shadow:0 12px 28px rgba(0,101,42,.22);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
}
.ons-stats__item{
  padding:14px 24px;
  display:flex;
  align-items:baseline;
  gap:10px;
  border-right:1px solid rgba(255,255,255,.14);
}
.ons-stats__item:last-child{border-right:none}
.ons-stats__value{
  font-size:24px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.01em;
  color:#8FE0AE;
}
.ons-stats__label{
  font-size:14px;
  color:rgba(255,255,255,.85);
}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.split .photo{border-radius:5px;overflow:hidden;box-shadow:var(--shadow);}
.split .photo img{width:100%;display:block;}
/* .tilted: alleen de foto bij 'Afval is bij ons grondstof voor iets
   nieuws' op /over-ons/ — .split zelf blijft ongewijzigd in gebruik op de
   pijlerpagina's. Geen overflow:hidden op de container (in tegenstelling
   tot .split .photo hierboven): de badge moet erbuiten kunnen hangen, dus
   de afronding staat direct op de <img> (die knipt zichzelf ook zonder
   overflow:hidden). .photo-badge draait tegen de kanteling van de foto in,
   zodat het label zelf recht blijft staan. */
.split .photo.tilted{position:relative;overflow:visible;box-shadow:none;transform:rotate(-2deg);}
.split .photo.tilted img{border-radius:10px;box-shadow:var(--shadow);}
/* Groen verloop met oranje onderlijn (30 september 2026, optie D uit
   previews/foto-label.html), zoals de afdelingslabels. Wit 3,57:1 op het lichtste
   punt: valt onder de uitzondering voor de groene blokken, zie CLAUDE.md. */
.photo-badge{position:absolute;left:-16px;bottom:-16px;background:linear-gradient(90deg,var(--green) 0%,var(--deep-2) 100%);color:#fff;border-bottom:3px solid var(--orange);font-weight:700;font-size:14px;padding:12px 20px;border-radius:8px;box-shadow:0 10px 24px -8px rgba(27,24,16,0.35);transform:rotate(2deg);}
@media (max-width:600px){.photo-badge{left:12px;bottom:-14px;padding:10px 16px;font-size:13px;}}

/* ---------- FORMULIERVELDEN ----------
   Geldt voor elk formulier op de site. Stond eerder alleen onder .form, een class
   die nergens werd gebruikt: het sollicitatieformulier (.apply-form) had daardoor
   helemaal geen opmaak en toonde kale browservelden.

   Randkleur is #5f5d5b en niet var(--line): een invulveld moet als element
   herkenbaar zijn met 3:1 contrast (WCAG 1.4.11). var(--line) haalt 1,26:1,
   #5f5d5b haalt 3,79:1. */
.form{background:var(--paper-dim);border-radius:5px;padding:36px clamp(24px,4vw,40px);}
.field{margin-bottom:20px;}
.apply-form .field{margin-bottom:0;}

.form label,.field label{display:block;font-size:16px;font-weight:500;color:var(--ink);margin-bottom:8px;}
/* toelichting in een label, bijvoorbeeld "(pdf of Word)" */
.field label .opt{font-weight:400;color:#5f5d5b;}
.field label .req{color:var(--gold-text);}

.form input,.form textarea,
.apply-form input:not([type="checkbox"]),.apply-form textarea{
  width:100%;font-family:'Ubuntu',Arial,sans-serif;font-size:16px;line-height:1.4;
  color:var(--ink);background:#fff;border:1.5px solid #5f5d5b;border-radius:5px;
  padding:12px 16px;min-height:48px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.form textarea,.apply-form textarea{min-height:132px;resize:vertical;padding-top:13px;}
.form input::placeholder,.apply-form input::placeholder,
.form textarea::placeholder,.apply-form textarea::placeholder{color:#5f5d5b;}

.form input:hover,.apply-form input:not([type="checkbox"]):hover,
.form textarea:hover,.apply-form textarea:hover{border-color:var(--ink);}
.form input:focus-visible,.apply-form input:focus-visible,
.form textarea:focus-visible,.apply-form textarea:focus-visible{
  outline:none;border-color:var(--gold-text);
  box-shadow:0 0 0 3px rgba(163,72,0,0.22);
}

/* bestandsveld: de eigen knop van de browser in de huisstijl */
.apply-form input[type="file"]{padding:8px 10px;cursor:pointer;}
.apply-form input[type="file"]::file-selector-button{
  font-family:'Ubuntu',Arial,sans-serif;font-size:14px;font-weight:700;
  color:var(--ink);background:var(--paper-dim);border:1.5px solid #5f5d5b;
  border-radius:5px;padding:8px 16px;min-height:44px;margin-right:14px;cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}
.apply-form input[type="file"]::file-selector-button:hover{background:#fff;border-color:var(--ink);}

.form .hint{font-size:13px;color:#5f5d5b;margin-top:14px;}

/* alleen voor schermlezers */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- ICONEN (Material Symbols) ---------- */
.ms{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;display:inline-block;white-space:nowrap;font-feature-settings:'liga';}

/* ---------- INFO CARDS (subpaginas) ---------- */
.info-grid{display:grid;gap:20px;}
.info-grid.c4{grid-template-columns:repeat(4,1fr);}

/* .c4-vrij: extra klasse (i.p.v. .c4 zelf aan te passen) voor info-grids waarvan
   het aantal kaarten nu uit een data-cms-lijst komt en dus kan wijzigen (bv.
   over-ons: bedrijven, arbeidsvoorwaarden, locaties). .c4 blijft overal elders
   op vier vaste kolommen staan; alleen kaarten met deze extra klasse schuiven
   automatisch mee bij een ander aantal. */
.info-grid.c4-vrij{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.info-card{border:1px solid var(--line);border-radius:5px;padding:28px;display:flex;flex-direction:column;gap:10px;background:#fff;}
.info-card .ms{font-size:28px;color:var(--green);}
.info-card h3{font-size:var(--fs-h3);font-weight:700;color:var(--ink);}
.info-card h2{font-size:var(--fs-h2);font-weight:700;color:var(--ink);}
.info-card p{font-size:var(--fs-body);line-height:1.6;color:#5f5d5b;}
.info-card a{color:var(--gold-text);font-weight:700;font-size:15px;margin-top:auto;padding-top:8px;}

/* ---------- OVER ONS: blok-om-blok-afwisseling ----------
   Zelfde patroon als op de homepage (zie #over/#afdelingen/.jobs/
   #verhalen-home hierboven): de vijf inhoudssecties na de cijferbalk
   wisselen om en om van achtergrond, beginnend bij wit. #locaties heeft
   ook de gedeelde klasse .stories (--paper-dim); het eigen id wint. */
#doen{background:var(--paper);}
/* Ritme gelijk aan de homepage (30 september 2026): --paper en wit om en om. */
#groep{background:#fff;}
#locaties{background:var(--paper);}
#arbeidsvoorwaarden{background:#fff;}
#sollicitatieproces{background:var(--paper);}

/* ---------- OVER ONS: kaart-varianten per sectie ----------
   .info-card/.info-grid blijven hierboven ongewijzigd (in gebruik op
   /contact/, /arbeidsvoorwaarden/, alle pijlerpagina's...); deze drie
   secties krijgen elk hun eigen kaart-opmaak via het (bewezen unieke)
   sectie-id, i.p.v. de gedeelde klassen aan te passen. */
#groep .info-card{background:var(--paper);border:none;border-top:5px solid transparent;border-radius:10px;box-shadow:0 2px 14px rgba(0,0,0,0.06);text-decoration:none;color:inherit;transition:transform 200ms ease, box-shadow 200ms ease;}
#groep .info-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 22px 44px rgba(0,0,0,0.16);}
#groep .info-card[data-accent="green"]{border-top-color:var(--green);--accent:var(--green);}
#groep .info-card[data-accent="blue"]{border-top-color:var(--blue);--accent:var(--blue);}
#groep .info-card[data-accent="orange"]{border-top-color:var(--orange);--accent:var(--orange);}
#groep .info-card[data-accent="deep"]{border-top-color:var(--green-deep);--accent:var(--green-deep);}
#groep .info-card .cta{margin-top:auto;padding-top:8px;font-weight:700;font-size:15px;color:var(--accent);}

#locaties .info-card{border:none;border-radius:10px;box-shadow:0 2px 14px rgba(27,24,16,0.08);}

/* Icoon in een ronde --green-soft-badge i.p.v. los glyph. */
#arbeidsvoorwaarden .info-card{border-radius:10px;}
/* 'Dit krijg jij' (30 september 2026, optie B uit previews/voorwaarden-iconen.html):
   icoon wit in een rondje in het groene verloop; kaart zonder grijze rand, met een
   zachte schaduw en een oranje onderlijn, zoals de kaarten bij 'Ook interessant'. */
#arbeidsvoorwaarden .info-card .ms{width:48px;height:48px;font-size:24px;background:linear-gradient(90deg,var(--green) 0%,var(--deep-2) 100%);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;}
#arbeidsvoorwaarden .info-card{background:#fff;border:0;border-bottom:3px solid var(--orange);border-radius:8px;box-shadow:0 2px 14px rgba(0,0,0,.06);}

/* 5 stappen op één rij, verbonden door een gestippelde lijn achter de
   cirkels (::before, achter de kaarten via z-index). Geen kaart-vlak meer
   eromheen: bewust een tijdlijn-opzet i.p.v. losse, beklede kaarten —
   past bij 'verbonden door een lijn'. .step-grid/.step-card zelf blijven
   ook in gebruik op /o/<slug>: dezelfde tijdlijn, met daar een eigen
   tekst bij stap 3 voor chauffeursfuncties (1 oktober 2026). */
#sollicitatieproces .step-grid{grid-template-columns:repeat(5,1fr);gap:16px;position:relative;}
#sollicitatieproces .step-grid::before{content:'';position:absolute;top:23px;left:5%;right:5%;height:0;border-top:2px dashed var(--line);z-index:0;}
#sollicitatieproces .step-card{background:transparent;padding:0;position:relative;z-index:1;}
#sollicitatieproces .step-card .sn{width:46px;height:46px;background:var(--green);color:#fff;font-size:19px;box-shadow:0 8px 18px -6px rgba(0,157,61,0.55);}
@media (max-width:1240px){#sollicitatieproces .step-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:980px){
  #sollicitatieproces .step-grid{grid-template-columns:repeat(2,1fr);}
  #sollicitatieproces .step-grid::before{display:none;}
}
@media (max-width:600px){#sollicitatieproces .step-grid{grid-template-columns:1fr;}}

/* ---------- FAQ (functiepagina's) ---------- */
.faq-list{display:flex;flex-direction:column;gap:2px;background:var(--line);border-radius:5px;overflow:hidden;}
.faq-item{background:#fff;padding:22px 26px;}
/* --fs-h4 (22px) i.p.v. --fs-h3: lange vragen werden in 28px vet erg zwaar (25 september 2026). */
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:var(--fs-h4);font-weight:700;color:var(--ink);cursor:pointer;list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .ms{color:var(--gold-text);flex-shrink:0;transition:transform .2s ease;}
.faq-item[open] summary .ms{transform:rotate(180deg);}
.faq-item p{margin-top:14px;font-size:var(--fs-body);line-height:1.6;color:#5f5d5b;}

.cta-band{background:linear-gradient(120deg,var(--orange),var(--gold));color:var(--ink);}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.cta-band h2{color:var(--ink);max-width:640px;}
.cta-band p{margin-top:14px;font-size:var(--fs-lead);line-height:1.5;color:#3a2200;max-width:560px;}
.cta-band .acts{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- FOOTER ---------- */
footer{background:var(--deep);color:rgba(255,253,249,0.75);padding:148px 0 30px;}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,0.1);}
.foot-brand p{font-size:var(--fs-body);line-height:1.65;max-width:280px;color:rgba(255,253,249,0.8);}
/* Kolomkoppen in Ubuntu Bold, zoals de rest van de site (9 oktober 2026, optie C uit
   previews/footer-opties.html). Eerder Ubuntu Mono in hoofdletters: een ander
   lettertype en een label in kapitalen, wat de huisstijl niet wil. */
footer h4{font-family:Ubuntu,Arial,sans-serif;font-size:var(--fs-body);font-weight:700;color:#fff;margin-bottom:18px;}
footer ul{list-style:none;}
footer li{margin-bottom:11px;font-size:var(--fs-body);}
footer li a{color:rgba(255,253,249,0.75);}
footer li a:hover{color:#fff;}
/* Alleen de rij zelf (>), niet de tekst-span erin: die kreeg ook 11px marge
   en daarmee stond Contact op dubbele regelafstand. */
.foot-contact > span{display:flex;align-items:flex-start;gap:9px;margin-bottom:11px;font-size:var(--fs-body);color:rgba(255,253,249,0.75);}
.foot-contact svg{width:16px;height:16px;stroke:var(--orange);flex-shrink:0;margin-top:2px;}
/* 0,6 dekking haalt 6,34:1 op #0E2A1A; de eerdere 0,45 bleef op 4,18:1 steken */
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;flex-wrap:wrap;gap:14px;font-size:13px;color:rgba(255,253,249,0.8);}
.foot-legal{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;}
/* 0,75 dekking haalt 9,05:1; onderstreept, zodat kleur niet de enige aanwijzing is */
.foot-legal a{color:rgba(255,253,249,0.75);text-decoration:underline;}
.foot-legal a:hover{color:#fff;}
.socials{display:flex;gap:14px;}
.socials a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,0.18);display:flex;align-items:center;justify-content:center;transition:background .2s ease;}
.socials a:hover{background:rgba(255,255,255,0.12);}
.socials svg{width:15px;height:15px;fill:rgba(255,253,249,0.8);}

/* ---------- LAPTOP/TABLET-TUSSENLAAG (981-1240px) ----------
   Zonder deze laag sprong het ontwerp rechtstreeks van de volle
   desktop-opmaak (.wrap, max-width 1240px) naar de mobiele opmaak bij
   980px: op een laptop-brede vensterbreedte (vaak 1000-1280px, minder
   dan een volledig scherm) kregen 3- en 4-kolomsroosters daardoor geen
   kans om kolommen te laten vallen — ze werden alleen steeds smaller
   geknepen i.p.v. herschikt (op verzoek, 18 september 2026). */
@media (max-width:1240px){
  .info-grid.c4{grid-template-columns:repeat(2,1fr);}
  
.step-grid{grid-template-columns:repeat(2,1fr);}
  .story-grid,.verhalen-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .intro-v2,.split,.contact-grid{grid-template-columns:1fr;gap:40px;}
  .intro-photo-sub{left:0;}
  
.step-grid{grid-template-columns:1fr;}
  .story-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto;}
  
.g1,.g2,.g3,.g4,.g5,.g6{grid-column:auto;grid-row:auto;height:220px;}
  
.foot-top{grid-template-columns:1fr;}
  
.vac-layout{grid-template-columns:1fr;}
  .vac-detail{grid-template-columns:1fr;}
  .vac-aside{position:static;}
  .info-grid.c4{grid-template-columns:repeat(2,1fr);}
  

nav.links{display:none;}
  .nav-cta-harry{display:none;}
}
@media (max-width:700px){.matcher{grid-template-columns:1fr;}}
@media (max-width:600px){
  .wrap{padding:0 20px;}
  /* Na .wrap, dat anders ook de boven- en onderruimte van de hero op 0
     zette: de kop plakte dan tegen de header. 52px = de sectieruimte op
     de telefoon, onder in dezelfde verhouding als 80/72 op desktop. */
  .hero-full-content{padding:52px 20px 48px;}
  .hero-search{flex-wrap:wrap;max-width:none;}
  .hero-search input{flex:1 1 100%;padding:6px 0;}
  .hero-search .btn{flex:1 1 100%;justify-content:center;}
  section{padding:52px 0;}
  :root{--ruimte-sectie:52px;}
  section[data-spacing-na="klein"]{padding:26px 0;}
  section[data-spacing-na="normaal"]{padding:52px 0;}
  section[data-spacing-na="groot"]{padding:78px 0;}
  section[data-spacing-na="extra-groot"]{padding:104px 0;}
  /* Herhaald na de max-width:1240px-regel hierboven, die .verhalen-grid
     anders ook op de telefoon op twee kolommen hield. */
  .verhalen-grid{grid-template-columns:1fr;}
  .badge-row{gap:20px;}
  
.foot-top{grid-template-columns:1fr;}
  
.job-alert-band{padding:32px 24px;}
  /* 20px, gelijk aan .wrap hierboven: het logo staat zo op dezelfde lijn
     als de inhoud eronder (was 16px, 4px verschoven). */
  .nav{padding:14px 20px;gap:12px;}
  /* Lange knopteksten ("Bekijk klantenservicevacatures") mogen op de
     telefoon naar een tweede regel in plaats van buiten beeld te lopen. */
  .btn{white-space:normal;text-align:center;}
  .nav-actions .btn{white-space:nowrap;}
  .logo img{height:30px;}
  .nav-actions{gap:12px;}
  .vac-row{flex-direction:column;align-items:flex-start;gap:14px;}
  .apply-grid{grid-template-columns:1fr;}
  .apply-form,.apply-head{padding:26px 20px;}
  .info-grid.c4{grid-template-columns:1fr;}
}
/* Kleinste telefoons (tot 374px): logo, 'Bekijk vacatures' en menuknop zijn
   samen 386px breed. Daar 'Vacatures', iets minder tussenruimte en een iets
   kleiner logo. Na het 600px-blok, dat deze waarden zelf ook zet. */
@media (max-width:374px){
  .nav-cta-lang{display:none;}
  .nav-cta-kort{display:inline;}
  .nav,.nav-actions{gap:8px;}
  .nav-actions .btn.nav-cta{padding-left:14px;padding-right:14px;}
  .logo img{height:26px;}
}

/* ---------- MOBIEL MENU ----------
   nav.links verdwijnt onder 980px; dit neemt het over.

   Bewust zonder JavaScript, met de :target-techniek. support.js bouwt de inhoud
   binnen <x-dc> opnieuw op en wist daarbij classes en attributen die JS zet: een
   onclick verdween volledig uit de DOM en een class op het paneel werd direct na
   de klik weer weggehaald. Een href en het :target-mechanisme zijn native en
   kunnen daar niet door sneuvelen. Openen: #mobnav. Sluiten: elke andere hash. */
.menu-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;padding:6px;text-decoration:none;-webkit-tap-highlight-color:transparent;}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;}
.mobnav{display:none;border-top:1px solid var(--line);background:var(--paper);}
.mobnav:target{display:block;}
.mobnav ul{list-style:none;margin:0;padding:8px 0 14px;}
.mobnav a{display:flex;align-items:center;min-height:48px;padding:4px 32px;font-size:16.5px;font-weight:500;color:var(--ink);}
.mobnav a.active{color:var(--gold-text);font-weight:700;}
.mobnav .mobnav-phone{border-top:1px solid var(--line);margin-top:8px;padding-top:10px;}
.mobnav-close{justify-content:flex-end;font-family:'Ubuntu Mono',monospace;font-size:13px;color:#5f5d5b !important;min-height:44px;padding-right:32px !important;}

@media (max-width:980px){
  .menu-toggle{display:inline-flex;}
}
@media (max-width:600px){
  .mobnav a{padding:4px 20px;}
  .mobnav-close{padding-right:20px !important;}
}

/* tekst in de afdelingskaarten (pagina Afdelingen) */

@media (max-width:980px){
  .menu-toggle{display:inline-flex;}
}
@media (max-width:600px){
  .mobnav a{padding:4px 20px;}
}

/* --- Kruimelpad, sinds de mapstructuur uit sectie 05 van de SEO-review --- */
.crumbs{padding:18px 0 0;font-size:14px;}
.crumbs .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.crumbs a{color:var(--gold-text);text-decoration:none;padding:6px 2px;}
.crumbs a:hover{text-decoration:underline;}
.crumbs a + a::before,.crumbs a + span::before{content:'/';color:#5f5d5b;margin-right:8px;}
.crumbs span[aria-current]{color:#5f5d5b;padding:6px 2px;}
.crumbs a:focus-visible,.crumbs span:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}

/* Opsomming met vinkjes op de functiepagina's */
ul.tick{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:13px;}
ul.tick li{display:flex;align-items:flex-start;gap:11px;font-size:16px;line-height:1.55;color:#5f5d5b;}
ul.tick li .ms{font-size:20px;line-height:1.4;color:var(--green-deep);flex:0 0 auto;}

/* De vacaturekaarten staan op pijler- en functiepagina's onder een h2, dus daar is
   de vacaturetitel een h3. Zelfde opmaak als de h2 op het vacatureoverzicht. */
.vac-row h3{font-size:var(--fs-h3);font-weight:700;color:var(--ink);line-height:1.2;letter-spacing:0;}

/* ---------- BAND-ANIMATED ----------
   Langzaam heen-en-weer schuivend verloop, alleen op de homepage toegepast
   op .stats-strip (cijferbalk onder de hero) en .job-alert-band ('Jouw
   droombaan in je inbox'): beide krijgen naast hun eigen klasse ook
   band-animated, en deze regel staat bewust helemaal onderaan het bestand
   zodat de background hier wint van de statische achtergrond die beide
   klassen zelf al declareren (gelijke specificiteit, dus telt de volgorde).
   Andere pagina's met .job-alert-band (via scripts/_frame.py) hebben geen
   band-animated en houden hun statische verloop.

   --green/--green-deep zoals gevraagd zijn hier vervangen door
   --deep-2/--deep: wit op --green (#009D3D) is 3,57:1 en faalt voor de
   kleinere tekst die op deze twee blokken staat (.badge-stats>div 13,5px,
   .job-alert-band .sub 15px, .job-alert-note 13px) — geen van drieën is
   'grote tekst' naar de WCAG-definitie. --deep-2 geeft visueel dezelfde
   lichtgroene tint en is met wit 5,93:1 (AA), ook op het lichtste punt van
   het verloop (docs/huisstijl-en-toegankelijkheid.md).

   prefers-reduced-motion: animeert alleen als de bezoeker geen voorkeur
   voor minder beweging heeft aangegeven, zelfde aanpak als .js-reveal. */
.band-animated{background:linear-gradient(105deg, var(--deep-2) 0%, var(--deep) 50%, var(--deep-2) 100%);background-size:250% 100%;}
/* Alleen het laatste blok op de homepage (.job-alert-band) krijgt de
   steilere, diagonalere hoek (135deg i.p.v. 105deg) — op verzoek, 18
   september 2026, als duidelijkere kleurovergang. .stats-strip houdt de
   bestaande 105deg. Twee klassen samen = hogere specificiteit dan de
   kale .band-animated hierboven, dus geen aparte plek onderaan nodig. */
.job-alert-band.band-animated{background:linear-gradient(135deg, var(--deep-2) 0%, var(--deep) 50%, var(--deep-2) 100%);background-size:250% 100%;}
@media (prefers-reduced-motion: no-preference){
  @keyframes bandShift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
  .band-animated{animation:bandShift 14s ease-in-out infinite;}
}

/* =========================================================
   VACATUREGROEP-PAGINA'S (herontwerp, september 2026)
   Alleen voor functiepagina()/scripts/bouw-structuur.py: de elf pagina's
   uit site/content-vacaturegroepen/. Hergebruikt zoveel mogelijk bestaande
   klassen (.page-hero-framed, .vac-card, .tick, .faq-item, .btn, .info-card)
   voor kleur/typografie/hover-gedrag; hier alleen het nieuwe layout-skelet:
   de smalle sticky zijbalk en de eigen kaartvarianten voor verhalen en
   vacatures. ========================================================= */
/* Ritme van de hele vacaturegroeppagina (28 september 2026): tussen twee
   onderwerpen altijd --ruimte-sectie (80px, telefoon 52px), gemeten tussen
   de zichtbare inhoud. De secties hieronder hebben dezelfde achtergrond,
   dus hun paddings mogen niet optellen (was 160px boven Openstaande
   vacatures en boven de jobalert). Kop → kaarten of vragen --ruimte-blok. */
.vg-layout{display:flex;flex-wrap:wrap;gap:var(--ruimte-sectie) 56px;align-items:flex-start;}
.vg-vacatures-sectie{padding-top:0;}
.vg-verwant-sectie + .closer{padding-top:var(--ruimte-sectie);}
.vg-main{flex:1 1 560px;min-width:0;}
.vg-side{flex:1 1 300px;max-width:380px;position:sticky;top:96px;}
.vg-side-card{background:#fff;border:1px solid var(--line);border-radius:5px;padding:28px;box-shadow:0 20px 40px -22px rgba(27,24,16,0.35);}
.vg-side-card p{font-weight:700;font-size:var(--fs-lead);line-height:1.4;margin:0;color:var(--ink);}
.vg-side-card .btn{display:flex;width:100%;justify-content:center;margin-top:18px;}
/* 'Chat met Harry' in de zijbalk als vacaturekaart (29 september 2026,
   optie C uit previews/harry-kaart.html): balk in --vacature-bar met wit
   (9,17:1), vinkjes in --green-cta, oranje lijn boven de knop zoals op
   .vac-card. .ms staat verderop in dit bestand, vandaar de dubbele klasse
   waar de weergave van het icoon ertoe doet. */
.vg-side-card.vg-harry{padding:0;overflow:hidden;border-radius:8px;}
.vg-side-card .vg-harry__balk{display:flex;align-items:center;gap:10px;margin:0;background:var(--vacature-bar);color:#fff;font-weight:700;font-size:17px;line-height:1.3;padding:16px 24px;}
.vg-harry__balk .ms{font-size:22px;}
.vg-harry__romp{padding:20px 24px 24px;}
.vg-harry__lijst{list-style:none;margin:0;padding:0 0 18px;display:flex;flex-direction:column;gap:10px;border-bottom:2px solid var(--orange);}
.vg-harry__lijst li{display:flex;align-items:center;gap:10px;color:#414042;font-size:var(--fs-body);line-height:1.4;}
.vg-harry__lijst .ms{flex:none;color:var(--green-cta);font-size:22px;}
.vg-side-card .vg-harry__knop{align-items:center;gap:8px;margin-top:18px;}
.vg-harry__knop .ms{font-size:20px;}
/* Ritme van de hoofdkolom gelijk aan /over-ons/ (op verzoek, 25 september
   2026): tussen twee onderwerpen (intro, USP's, Locaties, verhalen, vragen)
   --ruimte-sectie, zoals tussen twee secties daar; kop → tekst of lijst
   --ruimte-kop (18px); kop → kaarten of vragen --ruimte-blok (32px). */
/* H2 boven de intro op de vacaturegroeppagina's (optie C uit
   previews/h2-vacaturegroep.html): zwarte kop zoals de andere H2's, met
   een korte lijn in huisstijloranje erboven. Oranje als vorm, niet als
   tekstkleur: #F89501 haalt als tekst op --paper maar 2,05:1. */
.vg-kop{font-size:var(--fs-h2);font-weight:700;line-height:1.2;color:var(--ink);margin:0 0 var(--ruimte-kop);max-width:28ch;}
.vg-kop::before{content:'';display:block;width:56px;height:4px;border-radius:2px;background:var(--orange);margin:0 0 16px;}
.vg-intro{font-size:17px;line-height:1.65;color:#5f5d5b;margin:0;max-width:65ch;}
/* 'Over de functie' (vg_functie() in bouw-structuur.py): Wat ga je doen en
   Wat vragen we naast elkaar, op een smal scherm onder elkaar. De lijstjes
   zijn ul.tick, zelfde vinkje als elders op de site. */
.vg-functie{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--ruimte-blok) 32px;}
.vg-functie__kop{font-size:var(--fs-h3);font-weight:700;color:var(--ink);line-height:1.25;margin:0;}
/* Ook interessant: verwante functies, open sollicitatie, procedure. */
.vg-verwant-sectie{padding-top:0;padding-bottom:0;background:var(--paper);}
.vg-verwant__kop{font-size:var(--fs-h3);font-weight:700;color:var(--ink);margin:0 0 var(--ruimte-kop);}
/* Linkkaarten (29 september 2026, optie A uit previews/ook-interessant.html):
   een vast raster van drie witte kaarten, dezelfde kaarttaal als de vacature-
   en verhaalkaarten. Tekst #414042 (10,4:1), icoon #00652A op #CCEBD8,
   pijl --green-cta. */
.vg-verwant__lijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
@media (max-width:980px){.vg-verwant__lijst{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.vg-verwant__lijst{grid-template-columns:1fr;}}
.vg-verwant__lijst a{display:flex;align-items:center;gap:14px;min-height:72px;box-sizing:border-box;padding:14px 18px;background:#fff;border-radius:8px;box-shadow:0 2px 14px rgba(0,0,0,.06);color:#414042;font-size:16px;font-weight:500;text-decoration:none;transition:box-shadow 150ms ease,transform 150ms ease;}
.vg-verwant__lijst a:hover{box-shadow:0 8px 24px rgba(0,0,0,.12);transform:translateY(-2px);}
.vg-verwant__lijst a:focus-visible{outline:3px solid var(--green-deep);outline-offset:2px;}
.vg-verwant__icoon{flex:none;width:40px;height:40px;border-radius:50%;background:var(--green-soft);color:var(--green-deep);display:flex;align-items:center;justify-content:center;font-size:22px;}
.vg-verwant__tekst{flex:1;}
.vg-verwant__pijl{flex:none;color:var(--green-cta);font-size:20px;transition:transform 200ms cubic-bezier(.2,.6,.2,1);}
.vg-verwant__lijst a:hover .vg-verwant__pijl{transform:translateX(4px);}
/* Kleuren (30 september 2026, optie B uit previews/ook-interessant-kleur.html):
   witte kaart met oranje onderlijn en een icoon-rondje in het groene verloop;
   bij hover kleurt de hele kaart in het verloop, tekst en pijl wit. */
.vg-verwant__lijst a{border-bottom:3px solid var(--orange);transition:box-shadow 150ms ease,transform 150ms ease,background 150ms ease,color 150ms ease;}
.vg-verwant__icoon.ms{background:linear-gradient(90deg,var(--green) 0%,var(--deep-2) 100%);color:#fff;}
.vg-verwant__lijst a:hover{background:linear-gradient(90deg,var(--green) 0%,var(--deep-2) 100%);color:#fff;}
.vg-verwant__lijst a:hover .vg-verwant__icoon.ms{background:#fff;color:var(--deep);}
.vg-verwant__lijst a:hover .vg-verwant__pijl{color:#fff;}
.vg-main > .vg-functie,.vg-main > .vg-duo,.vg-main > .vg-tale-head,.vg-main > .vg-faq{margin-top:var(--ruimte-sectie);}
.vg-main > :first-child{margin-top:0;}
.vg-tale-head h2{font-size:var(--fs-h2);margin:0 0 var(--ruimte-kop);}

/* USP-blok over de volle breedte met de tegels twee bij twee, Locaties
   eronder (herontwerp 28 september 2026, optie C: naast elkaar werden de
   tegels te smal voor de langere USP's). Op een telefoon één kolom. Geen schaduwen (huisstijl); kleuren uit :root. Het
   witte icoon op --orange haalt 2,26:1, maar is decoratief: de tekst ernaast
   draagt de betekenis (aria-hidden). */
.vg-duo{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;}
.vg-usp{background:var(--green-deep);border-radius:12px;padding:28px;border-bottom:5px solid var(--orange);}
.vg-usp__title{font-size:26px;font-weight:700;margin:0 0 var(--ruimte-blok);color:#fff;}
.vg-usp__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.vg-usp__tile{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0;transition:background 150ms,transform 150ms cubic-bezier(.2,.6,.2,1);}
.vg-usp__tile:hover{background:rgba(255,255,255,.14);transform:translateY(-2px);}
.vg-usp__icon{width:40px;height:40px;border-radius:8px;background:var(--orange);display:grid;place-items:center;flex:none;}
.vg-usp__icon svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.vg-usp__text{color:#fff;font-weight:700;font-size:16px;line-height:1.4;text-wrap:pretty;min-width:0;overflow-wrap:break-word;}

/* Veelgestelde vragen: genummerde kaarten, de open kaart donkergroen.
   Bediening in site/site.js (FAQ-ACCORDEON). Dichte kaart wit, niet
   --paper: dat is al de achtergrond van de pagina. Link naar Harry in
   --gold-text (#ce5c00 haalt op --paper maar 3,73:1 bij 15px). De focusrand
   staat binnen de kaart (offset -3px), anders knipt overflow:hidden hem af;
   op de open kaart wit, want groen op --green-deep haalt maar 2,75:1. */
.vg-faq__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 var(--ruimte-blok);}
.vg-faq__title{font-size:26px;font-weight:700;margin:0;}
.vg-faq__list{display:flex;flex-direction:column;gap:10px;}
.vg-faq__item{border-radius:10px;overflow:hidden;background:#fff;color:var(--ink);transition:background 250ms cubic-bezier(.2,.6,.2,1);}
.vg-faq__item.is-open{background:var(--green-deep);color:#fff;}
.vg-faq__q{width:100%;min-height:44px;display:flex;align-items:center;gap:20px;background:none;border:0;border-radius:10px;padding:20px 22px;cursor:pointer;font:inherit;text-align:left;color:inherit;}
.vg-faq__q:focus-visible{outline:2px solid var(--green);outline-offset:-3px;}
.vg-faq__item.is-open .vg-faq__q:focus-visible{outline-color:#fff;}
.vg-faq__num{width:40px;flex:none;font-size:26px;font-weight:700;line-height:1;color:var(--green);}
.vg-faq__item.is-open .vg-faq__num{color:var(--orange);}
.vg-faq__question{flex:1;min-width:0;font-size:18px;font-weight:700;line-height:1.35;overflow-wrap:break-word;}
.vg-faq__icon{width:36px;height:36px;border-radius:999px;flex:none;display:grid;place-items:center;background:var(--paper);color:var(--green);transition:transform 250ms cubic-bezier(.2,.6,.2,1),background 250ms;}
.vg-faq__icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;}
.vg-faq__item.is-open .vg-faq__icon{background:var(--orange);color:#fff;transform:rotate(45deg);}
/* Dicht = display:none via de klasse, niet alleen via [hidden]: de herbouw
   door support.js liet het attribuut niet staan, waardoor het (witte)
   antwoord als leeg vlak in de dichte kaart zichtbaar bleef. */
.vg-faq__a{display:none;}
.vg-faq__item.is-open .vg-faq__a{display:block;}
.vg-faq__a p{margin:0;padding:0 22px 24px 82px;font-size:16px;line-height:1.6;color:#fff;max-width:65ch;}
@media (max-width:600px){.vg-faq__a p{padding-left:22px;}.vg-usp__grid{grid-template-columns:minmax(0,1fr);}}
@media (prefers-reduced-motion: reduce){
  .vg-usp__tile,.vg-faq__item,.vg-faq__icon{transition:none;}
  .vg-usp__tile:hover{transform:none;}
}
.vg-tale-head{margin-bottom:var(--ruimte-blok);}
.vg-tale-head h2{margin-bottom:0;}
.vg-tale-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:0;}
/* Verhaalkaart op de vacaturegroeppagina's: sinds 28 september 2026 in maat,
   kleur en gedrag gelijk aan .verhalen-card op /onze-verhalen/ en .story-card
   op de homepage (geen citaat, zelfde kop, schaduw en hover). Wijzig je er
   één, doe het dan bij alle drie. */
.vg-tale-card{display:flex;flex-direction:column;background:#fff;border-radius:8px;box-shadow:0 2px 14px rgba(0,0,0,0.08);color:var(--ink);text-decoration:none;transition:box-shadow 150ms ease, transform 150ms ease;}
.vg-tale-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.14);transform:translateY(-2px);}
.vg-tale-photo{position:relative;overflow:hidden;border-radius:8px 8px 0 0;aspect-ratio:16/10;}
.vg-tale-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 400ms cubic-bezier(0.2,0.6,0.2,1);}
.vg-tale-card:hover .vg-tale-photo img{transform:scale(1.04);}
.vg-tale-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(to top, rgba(0,101,42,0.55) 0%, rgba(0,101,42,0) 45%);}
.vg-tale-badge-row{position:relative;display:flex;justify-content:center;}
.vg-tale-body{padding:30px 24px 26px;display:flex;flex-direction:column;flex:1;text-align:center;}
/* Zelfde opmaak als .story-card__title op de homepage (optie C, zie
   .dept-card__desc): 18px Medium in #414042. */
.vg-tale-body h3{font-weight:500;font-size:18px;line-height:1.5;margin:0 0 14px;color:#414042;}
/* Zelfde als .story-card__name: #5f5d5b in Regular (6,6:1). */
.vg-tale-naam{display:flex;padding-right:22px;align-items:center;justify-content:center;gap:7px;margin-bottom:16px;color:#5f5d5b;font-weight:400;font-size:14px;}
.vg-tale-naam svg{width:15px;height:15px;flex:none;}
.vg-tale-more{margin-top:auto;padding-left:22px;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--green-cta);font-weight:700;font-size:15px;}
.vg-tale-more svg{width:15px;height:15px;transition:transform 200ms cubic-bezier(0.2,0.6,0.2,1);}
.vg-tale-card:hover .vg-tale-more svg{transform:translateX(4px);}
.vg-jobs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.vg-jobs-more{margin-top:24px;}
.vg-jobs-more summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--green-deep);font-size:15px;}
.vg-jobs-more summary::-webkit-details-marker{display:none;}
.vg-jobs-more[open] summary .ms{transform:rotate(180deg);}
.vg-jobs-more summary .ms{transition:transform .2s ease;}
.vg-jobs-more-grid{margin-top:24px;}
@media (max-width:980px){
  /* minmax(0,1fr), niet 1fr: een 1fr-kolom wordt nooit smaller dan zijn
     breedste inhoud, en op een telefoon van 375px liep de hele kolom
     daardoor 27px buiten beeld (audit 25 september 2026). */
  .vg-side{position:static;}
  .vg-jobs-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .vg-tale-grid{grid-template-columns:1fr;}
  .vg-jobs-grid{grid-template-columns:1fr;}
}

/* =========================================================
   AFDELINGPAGINA'S / PIJLERPAGINA'S (herontwerp, september 2026)
   pijlerpagina() in scripts/bouw-structuur.py. De rol-kaarten zelf zijn
   gewoon .vac-card (zie hierboven): alleen het grid eromheen is nieuw. Twee
   varianten: een vaste 3-koloms grid (Logistiek/Sales/Service, elk twee
   rollen) en, bij meer dan 3 rollen (nu alleen Hoofdkantoor, vijf
   vacaturegroepen), een horizontale, sleepbare rij op dezelfde generieke
   data-drag-scroll-listener als elders (zie site.js) — een eigen breedte
   (320px) i.p.v. de bestaande .job-scroll-maat, want dat is voor de
   bredere .vac-card met salarisregel op de homepage. ========================================================= */
.afd-rollen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:980px){.afd-rollen-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.afd-rollen-grid{grid-template-columns:1fr;}}
.afd-rollen-scroll{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:8px;scrollbar-width:none;cursor:grab;}
.afd-rollen-scroll::-webkit-scrollbar{display:none;}
.afd-rollen-scroll.is-dragging{cursor:grabbing;scroll-snap-type:none;}
.afd-rollen-scroll .vac-card{flex:0 0 320px;scroll-snap-align:start;}

/* ---------- BLOKKEN DIE OVER EEN ANDER BLOK VALLEN (30 september 2026) ----------
   Uitgelicht verhaal (/onze-verhalen/), cijferbalk (/over-ons/), de balk onder
   de banner (.vg-locbar, ook .vac-locbar op /o/<slug>) en de job-alertband
   boven de footer: in huisstijlgroen --green (#009D3D), zodat ze afwijken
   van de donkergroene header en footer (#00652A). Alle tekst erin wit.
   Staat bewust onderaan dit bestand: het overschrijft de kleuren die bij de
   blokken zelf staan.
   Bewuste keuze van Willem Gootjes (30 september 2026, optie A uit
   previews/overlap-groen.html): wit op #009D3D is 3,57:1. Koppen en grote
   cijfers halen de norm voor grote tekst (3:1), kleinere tekst (labels,
   waarden, de regels in de job alert) niet (4,5:1). Derde uitzondering naast
   de oranje knoppen en de twee oranje labels, zie CLAUDE.md. Niet
   "repareren" zonder overleg. */
/* Verloop van links naar rechts (30 september 2026, variant 2 uit
   previews/verloop-groen.html): van --green (#009D3D) naar --deep-2
   (#00742E). Bij het uitgelichte verhaal staat links de foto, dus daar
   loopt het verloop alleen over het tekstdeel. De animatie van de
   job-alertband op de homepage staat uit: een bewegend verloop wordt onrustig. */
.ons-stats,.vg-locbar,.job-alert-band,.job-alert-band.band-animated,.stats-strip,.stats-strip.band-animated{background:linear-gradient(90deg,var(--green) 0%,var(--deep-2) 100%);background-size:100% 100%;animation:none;}
/* Cijferbalk onder de hero op de homepage (.stats-strip) sinds 30 september 2026 ook in dit verloop; de bewegende overgang staat uit. Tekst wit, zoals in de andere blokken. */
.stats-strip .badge-stats>div,.stats-strip .badge-slogan{color:#fff;}
.vh-featured{background:var(--deep-2);}
.vh-featured__body{background:linear-gradient(90deg,var(--green) 0%,var(--deep-2) 100%);}
/* Afdelingslabel (.dept-badge, op elke kaart met een afdeling) in hetzelfde
   verloop. Het oranje 'Binnenkort' (.dept-badge--soon) blijft zoals het is.
   Wit haalt links 3,57:1 bij deze 13px tekst: zelfde bewuste keuze. */
.dept-badge:not(.dept-badge--soon){background:linear-gradient(90deg,var(--green) 0%,var(--deep-2) 100%);}
/* Zelfde verloop (30 september 2026) op: de balk van 'Snel solliciteren',
   de knop 'Zoek vacatures' in de hero van de
   homepage en het blokje 'Werk met impact'. Hover een stap donkerder. De
   hover-lijn onder de filters op /onze-verhalen/ in hetzelfde verloop (de
   actieve oranje lijn blijft). Witte tekst: zelfde bewuste keuze als hierboven. */
.vg-side-card .vg-harry__balk,.btn-search.btn,.intro-tag{background:linear-gradient(90deg,var(--green) 0%,var(--deep-2) 100%);}
.btn-search.btn:hover{background:linear-gradient(90deg,var(--deep-2) 0%,var(--deep) 100%);}
.intro-tag span{color:#fff;}
.vh-chip:not(.is-active):hover{border-image:linear-gradient(90deg,var(--green),var(--deep-2)) 1;}
.vh-featured__who,.vg-locbar__label,.ons-stats__value,.ons-stats__label,.job-alert-band .sub,.job-alert-note{color:#fff;}
.vg-locbar__item svg{stroke:#fff;}
.vg-locbar__item,.ons-stats__item{border-color:rgba(255,255,255,.28);}

/* ---------- KRUIMELPAD (30 september 2026) ----------
   Beide soorten kruimelpad in één balk: .breadcrumb-bar (Afdelingen en
   Over ons) en .crumbs (alle andere pagina's). Huisstijlgroen --green met
   witte tekst, gekozen uit previews/kruimelpad.html. De tekst staat recht
   onder de inhoud van de pagina (zelfde breedte en opvulling als .wrap).
   Valt onder dezelfde bewuste keuze als het blok hierboven: wit op #009D3D
   is 3,57:1, onder de 4,5:1 voor deze 14px tekst. Zie CLAUDE.md. */
.breadcrumb-bar,.crumbs{background:var(--green);padding:10px 0;margin:0;}
.breadcrumb-bar p{max-width:1240px;margin:0 auto;padding:0 32px;color:#fff;}
@media (max-width:600px){.breadcrumb-bar p{padding:0 20px;}}
.breadcrumb-bar a,.crumbs a{color:#fff;font-weight:700;}
.breadcrumb-bar a:hover{text-decoration:underline;}
/* zelfde opvulling als .crumbs a, zodat beide balken even hoog zijn */
.breadcrumb-bar a,.breadcrumb-bar [aria-current]{padding:6px 2px;}
.breadcrumb-bar [aria-current],.crumbs span[aria-current]{color:#fff;font-weight:400;}
.breadcrumb-bar span[aria-hidden],.crumbs a + a::before,.crumbs a + span::before{color:rgba(255,255,255,.8);}
.breadcrumb-bar a:focus-visible,.crumbs a:focus-visible{outline:2px solid #fff;outline-offset:2px;}

/* ---------- CONTACT (30 september 2026, optie C uit previews/contact.html) ----------
   Vragen eerst naar Harry (brede groene kaart, zelfde verloop als de andere
   groene blokken), Recruitment als tweede keus ernaast. Daaronder de
   veelgestelde vragen (.vg-faq) en 'Kom gerust een keer langs'. */
.ct-sectie{padding-bottom:0;}
#recruitment{scroll-margin-top:110px;}
.ct-keuze{display:grid;grid-template-columns:2fr 1fr;gap:20px;}
.ct-harry{background:linear-gradient(90deg,var(--green) 0%,var(--deep-2) 100%);color:#fff;border-radius:12px;border-bottom:5px solid var(--orange);padding:40px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.ct-harry .ms.ct-rond{width:52px;height:52px;border-radius:50%;background:#fff;color:var(--deep);display:flex;align-items:center;justify-content:center;font-size:28px;}
.ct-harry h2{font-size:var(--fs-h2);color:#fff;margin:0;}
.ct-harry p{margin:0;color:#fff;line-height:1.6;max-width:48ch;}
.ct-harry .btn,.page-hero-framed__ctas .btn{align-items:center;gap:8px;}
.ct-harry .btn .ms,.page-hero-framed__ctas .btn .ms{font-size:20px;}
.ct-recruitment{background:#fff;border-radius:12px;box-shadow:0 2px 14px rgba(0,0,0,.06);padding:32px;}
.ct-recruitment h2{font-size:var(--fs-h3);margin:0 0 6px;color:#414042;}
.ct-recruitment p{margin:0 0 16px;color:#5f5d5b;line-height:1.6;}
.ct-recruitment ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.ct-recruitment a{display:flex;align-items:center;gap:10px;min-height:44px;color:#414042;font-weight:500;}
.ct-recruitment a:hover{color:var(--deep);}
.ct-recruitment .ms{color:var(--green-cta);font-size:22px;}
.ct-adres a{color:var(--green-cta);font-weight:700;}
.ct-langs{display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 14px rgba(0,0,0,.06);border-bottom:5px solid var(--orange);}
.ct-langs img{width:100%;height:100%;min-height:280px;object-fit:cover;display:block;}
.ct-langs__tekst{padding:40px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}
.ct-langs__tekst h2{font-size:var(--fs-h2);margin:0 0 var(--ruimte-kop);}
.ct-langs__tekst p{color:#5f5d5b;line-height:1.6;margin:0 0 var(--ruimte-alinea);}
.ct-langs__tekst .ct-adres{display:flex;align-items:center;flex-wrap:wrap;gap:6px;color:#414042;}
.ct-adres .ms{color:var(--green-cta);font-size:20px;}
@media (max-width:760px){
  .ct-keuze,.ct-langs{grid-template-columns:1fr;}
  .ct-harry,.ct-langs__tekst{padding:28px 22px;}
  .ct-recruitment{padding:24px 22px;}
}

/* ---------- VERHAALPAGINA (30 september 2026, optie C uit previews/verhaalpagina.html) ----------
   Header alleen met de titel; daaronder 'Alle verhalen' terug, het artikel met
   de foto erboven en rechts een meeschuivende zijbalk 'Meer verhalen'. Foto en
   zijbalk beginnen op dezelfde hoogte. */
.page-hero-framed--verhaal{min-height:220px;}
/* Afdeling boven en naam onder de titel; titel kleiner zodat de header even hoog blijft. */
.page-hero-framed--verhaal .page-hero-framed__title{font-size:clamp(28px,2.6vw,36px);line-height:1.15;margin:0 0 12px;}
.page-hero-framed--verhaal .vp-kop-label{position:static;display:table;margin:0 0 14px;letter-spacing:.1em;font-size:13px;line-height:1;}
@media (min-width:768px){.page-hero-framed--verhaal .page-hero-framed__content{max-width:min(760px,68%);}}
.vp-kop-naam{display:flex;align-items:center;gap:8px;margin:0;color:#fff;font-size:16px;font-weight:500;}
.vp-kop-naam svg{width:17px;height:17px;flex:none;}
.vp-sectie{padding-top:32px;padding-bottom:0;}
.vp-terug{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 0 12px;color:var(--green-cta);font-weight:700;font-size:15px;text-decoration:none;}
.vp-terug svg{width:16px;height:16px;transition:transform 200ms;}
.vp-terug:hover svg{transform:translateX(-3px);}
.vp-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start;}
.vp-foto{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:12px;display:block;margin:0 0 var(--ruimte-blok);}
.vp-lead{font-size:var(--fs-lead);font-weight:500;color:#414042;}
.vp-artikel .vac-body{max-width:70ch;}
.vp-zij{position:sticky;top:96px;background:#fff;border-radius:8px;box-shadow:0 2px 14px rgba(0,0,0,.06);overflow:hidden;}
.vp-zij__balk{margin:0;background:linear-gradient(90deg,var(--green) 0%,var(--deep-2) 100%);color:#fff;font-weight:700;font-size:17px;line-height:1.3;padding:16px 22px;}
.vp-zij__lijst{list-style:none;margin:0;padding:8px 14px;}
.vp-zij__lijst a{display:flex;gap:12px;align-items:center;min-height:44px;padding:10px 8px;border-radius:6px;color:#414042;text-decoration:none;}
.vp-zij__lijst a:hover{background:var(--paper);}
.vp-zij__lijst a:focus-visible{outline:3px solid var(--deep);outline-offset:2px;}
.vp-zij__lijst img{width:64px;height:48px;object-fit:cover;border-radius:5px;flex:none;}
.vp-zij__lijst strong{display:block;font-size:15px;font-weight:500;line-height:1.35;}
.vp-zij__lijst span span{display:block;font-size:13px;color:#5f5d5b;margin-top:2px;}
.vp-zij__voet{margin:0 22px;padding:0 0 20px;border-top:2px solid var(--orange);}
.vp-zij__voet .jobs-head-link{display:flex;justify-content:center;margin-top:10px;}
@media (max-width:980px){.vp-grid{grid-template-columns:1fr;}.vp-zij{position:static;}}

/* ---------- ACHTERGRONDRITME SITEBREED (7 oktober 2026, optie B uit previews/achtergrond-opties.html) ----------
   De inhoudsblokken wisselen om en om van achtergrond, zoals in het
   oorspronkelijke ontwerp: wit en lichtgroen-grijs #F1F6F2. Op volgorde van
   de secties op de pagina (nth-of-type): het kopblok is de eerste, dus het
   eerste inhoudsblok daarna is wit, het tweede gekleurd, enzovoort. Zo
   klopt het ritme op elke pagina vanzelf. Uitgezonderd: de foto-hero op de
   homepage, de groene cijferbalk, de oranje CTA-band en de afsluitende
   job-alertsectie. !important omdat een paar secties hun achtergrond inline
   of op id zetten. Was sinds 30 september een zacht verloop van wit naar
   #FAF9F6 per sectie (D2), waardoor alles wit leek.
   Tekst op #F1F6F2: #414042 9,4:1, #5f5d5b 5,4:1, #007E31 4,8:1. */
body{background:#fff;}
section:not(.hero-full):not(.stats-strip):not(.cta-band):not(.closer){background:#fff !important;}
/* 8 oktober 2026: na de kop altijd eerst wit, dan lichtgroen, om en om, zoals
   op de homepage. Op de homepage staan twee secties voor de inhoud (foto-hero
   en cijferbalk), dus daar zijn de even secties gekleurd; op de andere
   pagina's staat er één (het kopblok), dus daar de oneven secties vanaf de
   derde. Een pagina met één inhoudsblok blijft daardoor helemaal wit. De
   job-alertsectie neemt de kleur over van het blok erboven (zie SLOTBAND). */
.hero-full ~ section:not(.stats-strip):not(.cta-band):not(.closer):nth-of-type(even),
section:has(.page-hero-framed) ~ section:not(.stats-strip):not(.cta-band):not(.closer):nth-of-type(odd){background:#F1F6F2 !important;}

/* ---------- CIJFERBALK HOMEPAGE (30 september 2026, optie B uit previews/cijferbalk.html) ----------
   Cijfer boven het label, dunne witte scheidingslijnen, even breed als de
   zoekbalk erboven (640px). Gewone Ubuntu in plaats van Mono. Op de telefoon
   alle vier op één rij met kleinere tekst, zodat de balk dun blijft. */
.badge-row{padding:20px 0;}
.badge-stats{gap:0;max-width:640px;}
.badge-stats>div{flex:1 1 0;padding:0 18px;border-left:1px solid rgba(255,255,255,.3);font-size:14px;line-height:1.3;}
.badge-stats>div:first-child{padding-left:0;border-left:0;}
.badge-stats>div:last-child{padding-right:0;}
.badge-stats>div span{white-space:nowrap;}
.badge-row strong{font-family:'Ubuntu',Arial,sans-serif;font-weight:700;font-size:22px;line-height:1.15;margin-bottom:2px;}
@media (max-width:760px){
  .badge-row{padding:14px 0;gap:10px;}
  .badge-stats>div{padding:0 10px;font-size:11.5px;}
  .badge-stats>div span{white-space:normal;}
  .badge-row strong{font-size:17px;margin-bottom:1px;}
  .badge-slogan{margin-left:0;font-size:15px;}
}

/* ---------- HOMEPAGE-HERO (30 september 2026, optie E uit previews/hero-varianten.html) ----------
   Grote kop onderaan de video, de filterknoppen erboven en de zoekbalk breed
   over de onderrand heen, met een oranje lijn zoals de balken op de andere
   pagina's. Variant F1 uit previews/hero-e2-varianten.html: 210px ruimte
   bovenaan voor meer video, zoekbalk tot 880px breed.
   De groene laag loopt van onder (donker, achter de tekst) naar boven (licht). */
.hero-full{overflow:visible;min-height:0;}
.hero-full-overlay{background:linear-gradient(0deg,rgba(0,40,18,.78) 0%,rgba(0,40,18,.4) 50%,rgba(0,40,18,.12) 100%);}
@media (max-width:1180px){.hero-full-overlay{background:linear-gradient(0deg,rgba(0,40,18,.82) 0%,rgba(0,40,18,.55) 55%,rgba(0,40,18,.3) 100%);}}
.hero-full-content{display:flex;flex-direction:column;align-items:flex-start;padding-top:210px;padding-bottom:0;}
h1.headline{font-size:clamp(44px,5.5vw,72px);}
.hero-sub{color:#fff;margin-top:16px;}
.hero-chips{order:5;margin:20px 0 16px;}
.hero-chip:not(.hero-chip-solid){background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.7);}
.hero-search{order:10;position:relative;z-index:5;width:100%;max-width:880px;box-sizing:border-box;margin:0 0 -36px;padding:10px;border-bottom:5px solid var(--orange);}
.stats-strip .badge-row{padding-top:58px;}
@media (max-width:760px){
  .hero-full-content{padding-top:150px;}
  .hero-search{margin-bottom:-28px;padding:10px;}
  .stats-strip .badge-row{padding-top:44px;}
}

/* ---------- VEELGESTELDE VRAGEN (30 september 2026, optie A uit previews/faq.html) ----------
   Contactpagina en vacaturegroeppagina's. Elke vraag een witte kaart met een
   zachte schaduw en een oranje onderlijn, het plusje in een groen rondje. Een
   geopende vraag wordt groen (verloop #009D3D naar #00742E) met een oranje
   kruisje; alle tekst dan wit. */
.vg-faq__item{background:#fff;border-radius:8px;box-shadow:0 2px 14px rgba(0,0,0,.07);border-bottom:3px solid var(--orange);}
.vg-faq__icon{background:linear-gradient(90deg,var(--green) 0%,var(--deep-2) 100%);color:#fff;}
.vg-faq__item.is-open{background:linear-gradient(90deg,var(--green) 0%,var(--deep-2) 100%);color:#fff;}
.vg-faq__item.is-open .vg-faq__num{color:#fff;}
.vg-faq__item.is-open .vg-faq__icon{background:var(--orange);color:#fff;}

/* ---------- MENUKNOP MOBIEL (30 september 2026, optie D uit previews/menuknop.html) ----------
   Vierkante knop (44px) in het groene verloop met drie witte streepjes onder
   elkaar. Eerder stonden de streepjes naast elkaar (inline-flex zonder
   kolomrichting), waardoor het één streep leek. */
.menu-toggle{flex-direction:column;gap:5px;background:linear-gradient(90deg,var(--green) 0%,var(--deep-2) 100%);border-radius:5px;}
.menu-toggle span{margin:0;width:22px;background:#fff;}
.menu-toggle:focus-visible{outline:3px solid var(--deep);outline-offset:2px;}

/* ---------- MENUBALK (1 oktober 2026, optie 1 uit previews/menubalk.html) ----------
   Menulinks 16px Medium (was 15px). Menu 'Over ons': Medium in donkergrijs in
   plaats van vet, bij hover groen op een licht vlak met een pijltje dat
   inschuift. Mobiel menu 17px; de huidige pagina groen met een groen streepje
   links (was bruinoranje), 'Sluiten' in Ubuntu in plaats van Mono. */
nav.links a{font-size:16px;}
.mobnav a{font-size:17px;}
.mobnav a.active{color:var(--deep);box-shadow:inset 4px 0 0 var(--green);}
.mobnav-close{font-family:'Ubuntu',Arial,sans-serif;}

/* ---------- VACATUREPAGINA UITLIJNING (1 oktober 2026) ----------
   De voorwaardenbalk loopt vanaf 1101px tot de rechterrand van de banner
   (min 36px, gelijk aan links), met de vakjes gelijk verdeeld, zodat hij
   ergens op aansluit in plaats van halverwege op te houden. De eerste
   alinea begint op dezelfde hoogte als de kaart 'Snel solliciteren'. */
@media (min-width:1101px){
  .vg-locbar.vac-locbar{width:auto;max-width:none;margin-right:36px;}
  .vac-locbar .vg-locbar__item{flex:1 1 auto;justify-content:center;}
  .vac-locbar .vg-locbar__item:first-child{justify-content:flex-start;}
  .vac-locbar .vg-locbar__item:last-child{justify-content:flex-end;}
}
.vac-detail > div:first-child > .vac-body:first-child > div > :first-child{margin-top:0;}


/* ---------- FILTERKNOPPEN IN DE HERO (1 oktober 2026, optie C uit previews/hero-filters.html) ----------
   Bij hover of toetsenbordfocus: 2px omhoog, witte rand, donkerder vlak en een
   oranje onderlijn, zoals de kaarten. De actieve knop (wit) komt ook omhoog. */
.hero-chip{transition:transform 150ms,background 150ms,border-color 150ms,box-shadow 150ms;}
.hero-chip:not(.hero-chip-solid):hover,.hero-chip:not(.hero-chip-solid):focus-visible{background:rgba(0,0,0,.5);border-color:#fff;color:#fff;box-shadow:inset 0 -3px 0 var(--orange);transform:translateY(-2px);}
.hero-chip.hero-chip-solid:hover,.hero-chip.hero-chip-solid:focus-visible{box-shadow:inset 0 -3px 0 var(--orange);transform:translateY(-2px);}
.hero-chip:focus-visible{outline:2px solid #fff;outline-offset:2px;}
@media (prefers-reduced-motion:reduce){.hero-chip:hover,.hero-chip:focus-visible{transform:none !important;}}

/* Tijdlijn 'Solliciteren in 5 stappen' (Over ons en /o/<slug>, 1 oktober 2026):
   gelijke kolommen, ook als een kop een lang woord heeft (Arbeidsovereenkomst),
   en koppen op 22px zodat ze op een regel blijven. */
#sollicitatieproces .step-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
#sollicitatieproces .step-card h3{font-size:var(--fs-h4);overflow-wrap:break-word;hyphens:auto;}
@media (max-width:1240px){#sollicitatieproces .step-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:980px){#sollicitatieproces .step-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){#sollicitatieproces .step-grid{grid-template-columns:minmax(0,1fr);}}

/* ---------- Socials (1 oktober 2026, previews/socials.html) ----------
   Kaarten (bedankpagina, Over ons), een regel onder elk verhaal (.soc-regel) en
   de footerkolom 'Volg ons' (.foot-socials). Iconen in de kleur van het kanaal
   zelf, op keuze van Willem Gootjes; wit icoon op die kleur is geen tekst, dus
   de norm is 3:1 (LinkedIn 5,7, Facebook 4,2, YouTube 4,0). Een
   kanaal zonder link in het CMS staat verborgen via [hidden]. */
[data-cms-if][hidden]{display:none !important;}
.soc--linkedin{--soc:#0A66C2;--soc-vlak:#0A66C2;}
.soc--instagram{--soc:#D62976;--soc-vlak:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%);}
.soc--facebook{--soc:#1877F2;--soc-vlak:#1877F2;}
.soc--youtube{--soc:#FF0000;--soc-vlak:#FF0000;}
.soc-sectie{background:#fff;}
.soc-kop{margin:0 0 var(--ruimte-kop,12px);}
.soc-tekst{margin:0 0 var(--ruimte-blok,28px);color:#5f5d5b;font-size:var(--fs-body);line-height:1.6;max-width:65ch;}
/* flex i.p.v. een vast raster: een verborgen kanaal laat zo geen gat achter */
.soc-kaarten{display:flex;flex-wrap:wrap;gap:14px;margin:0;padding:0;list-style:none;}
.soc-kaarten li{display:flex;flex:1 1 190px;}
.soc-kaart{flex:1;display:flex;flex-direction:column;gap:10px;background:#fff;border-radius:8px;border-bottom:3px solid var(--orange);box-shadow:0 2px 14px rgba(0,0,0,.06);padding:20px;text-decoration:none;color:var(--ink) !important;transition:transform .2s ease;}
.soc-kaart:hover{transform:translateY(-4px);}
.soc-kaart:focus-visible,.soc-pil:focus-visible,.foot-socials a:focus-visible{outline:3px solid var(--orange);outline-offset:3px;}
.soc-ic{width:44px;height:44px;border-radius:50%;background:var(--soc-vlak);display:flex;align-items:center;justify-content:center;}
.soc-ic svg{width:20px;height:20px;fill:#fff;}
.soc-kaart strong{font-size:18px;}
.soc-sub{font-size:14px;color:#5f5d5b;line-height:1.4;}
.soc-regel{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;background:var(--green-soft,#ccebd8);border-radius:8px;padding:16px 20px;margin-top:28px;}
.soc-regel > span{font-weight:700;color:var(--green-deep);margin-right:4px;}
.soc-pil{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:5px;background:#fff;color:var(--green-deep) !important;font-weight:700;font-size:15px;text-decoration:none;transition:background .2s ease;}
.soc-pil svg{width:16px;height:16px;fill:var(--soc);}
.soc-pil:hover{background:var(--green-deep);color:#fff !important;}
.soc-pil:hover svg{fill:#fff;}
/* Contactkolom iets breder, zodat elk adres op één regel past (9 oktober 2026). */
.foot-top{grid-template-columns:1.3fr 0.9fr 1.35fr 0.8fr;}
.foot-socials a{display:inline-flex;align-items:center;gap:10px;}
.foot-socials svg{width:16px;height:16px;fill:currentColor;flex-shrink:0;}
@media (max-width:980px){.foot-top{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){
  .soc-kaarten{gap:10px;}
  .soc-kaarten li{flex-basis:100%;}
  .soc-kaart{display:grid;grid-template-columns:44px 1fr;column-gap:14px;row-gap:2px;padding:14px 16px;}
  .soc-kaart .soc-ic{grid-row:span 2;align-self:center;}
  .soc-kaart strong{font-size:17px;}
  .foot-top{grid-template-columns:1fr;}
}

/* ---------- CTA-HIËRARCHIE IN DE HEADER (7 oktober 2026) ----------
   'Bekijk vacatures' blijft de oranje hoofdknop. 'Chat met Harry' is de
   secundaire knop, in hetzelfde groene verloop als de balken en de
   afdelings- en bloglabels (#009D3D naar #00742E); hover een stap donkerder.
   Wit haalt op het lichtste punt 3,57:1, onder AA voor 16px: bewuste keuze
   van Willem Gootjes (7 oktober 2026), valt onder de derde uitzondering in
   CLAUDE.md. Zelfde maat als .btn, geen schaduw. */
.nav-actions .btn.nav-cta-harry{background:linear-gradient(90deg,var(--green) 0%,var(--deep-2) 100%);color:#fff;box-shadow:none;}
.nav-actions .btn.nav-cta-harry:hover{background:linear-gradient(90deg,var(--deep-2) 0%,var(--deep) 100%);color:#fff;}
.nav-actions .btn.nav-cta-harry:focus-visible{outline:3px solid var(--deep);outline-offset:2px;}

/* ---------- HEADER BIJ SCROLLEN (7 oktober 2026) ----------
   support.js geeft de container om de pagina (.sc-host) height:100%. De
   sticky header bleef daardoor maar één schermhoogte staan en scrolde daarna
   mee weg. Met height:auto loopt de container mee met de inhoud en blijft de
   header de hele pagina sticky. Optie C uit previews/header-opties.html:
   altijd zichtbaar, en lager zodra je van de bovenkant af bent (site.js zet
   dan .kop-klein op <html>). De knoppen blijven 44px hoog. */
.sc-host{height:auto !important;min-height:100%;}
.nav,.logo-stack-head img{transition:padding .25s ease,height .25s ease;}
html.kop-klein .nav{padding-top:6px;padding-bottom:6px;}
html.kop-klein .logo-stack-head img{height:24px;}
@media (prefers-reduced-motion:reduce){.nav,.logo-stack-head img{transition:none;}}

/* ---------- MOBIEL MENU: UITKLAPPEN EN KRUISJE (7 oktober 2026) ----------
   Afdelingen, Verhalen en Over ons klappen uit (<details>) met dezelfde
   links als het megamenu. Open je het menu, dan wordt de menuknop een
   kruisje op dezelfde plek (.menu-dicht, linkt naar #menu-dicht en sluit zo
   het :target-menu). Browsers zonder :has() houden de oude link 'Sluiten'. */
.menu-dicht{display:none;position:relative;width:44px;height:44px;border-radius:5px;background:linear-gradient(90deg,var(--green) 0%,var(--deep-2) 100%);-webkit-tap-highlight-color:transparent;}
.menu-dicht span{position:absolute;left:11px;top:21px;width:22px;height:2px;background:#fff;border-radius:2px;transform:rotate(45deg);}
.menu-dicht span + span{transform:rotate(-45deg);}
.menu-dicht:focus-visible{outline:3px solid var(--deep);outline-offset:2px;}
@supports selector(:has(*)){
  .mobnav-close{display:none !important;}
  header:has(#mobnav:target) .menu-toggle{display:none;}
  header:has(#mobnav:target) .menu-dicht{display:inline-block;}
}
.mobnav-groep summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:4px 32px;font-size:17px;font-weight:500;color:var(--ink);cursor:pointer;list-style:none;}
.mobnav-groep summary::-webkit-details-marker{display:none;}
.mobnav-groep summary svg{color:var(--green-cta);transition:transform .2s ease;flex-shrink:0;}
.mobnav-groep[open] summary svg{transform:rotate(180deg);}
.mobnav-groep summary.active{color:var(--deep);font-weight:700;box-shadow:inset 4px 0 0 var(--green);}
.mobnav-groep summary:focus-visible{outline:3px solid var(--deep);outline-offset:-3px;}
.mobnav-groep ul{list-style:none;margin:0 0 6px;padding:0;}
.mobnav .mobnav-groep ul a{min-height:44px;padding:4px 32px 4px 48px;font-size:16px;color:var(--ink);}
.mobnav .mobnav-groep ul a.mobnav-alles{font-weight:700;color:var(--green-cta);}
@media (max-width:600px){
  .mobnav-groep summary{padding:4px 20px;}
  .mobnav .mobnav-groep ul a{padding:4px 20px 4px 36px;}
}

/* Mobiel menu met fotootjes (optie D uit previews/header-opties.html): een
   kleine foto bij elk subitem, zoals de kaarten in het megamenu. Decoratief
   (alt=""), de tekst ernaast is de link. */
.mobnav .mobnav-groep ul a{gap:12px;}
.mobnav-foto{width:44px;height:33px;object-fit:cover;border-radius:4px;flex-shrink:0;}

/* ---------- HOMEPAGE-HERO RUSTIGER (7 oktober 2026, optie C1 uit previews/hero-opties-c.html) ----------
   Feedback J1: de hero oogde propvol. De vijf filterknoppen zijn weg; onder
   de zoekbalk staat één link naar alle vacatures (de afdelingen komen
   verderop op de pagina terug). De zoekbalk valt niet meer over de
   cijferbalk, er is meer ruimte tussen de blokken en de intro is één zin
   (content-home.json, heroText). Link wit op de donkere onderkant van de
   foto (overlay .78, ruim boven 4,5:1). */
.hero-full-content{padding-top:150px;padding-bottom:88px;}
.hero-sub{margin-top:22px;}
.hero-search{max-width:720px;margin:36px 0 0;}
.hero-alle{order:11;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:12px;font-weight:700;font-size:16px;color:#fff;text-decoration:none;}
.hero-alle__tekst{text-decoration:underline;text-underline-offset:4px;}
.hero-alle:hover{color:#fff;}
.hero-alle:hover .hero-alle__tekst{text-decoration-thickness:2px;}
.hero-alle:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:3px;}
.stats-strip .badge-row{padding-top:20px;}
@media (max-width:760px){
  .hero-full-content{padding-top:130px;padding-bottom:52px;}
  .hero-search{margin-bottom:0;}
  /* Vergrootglas en zoekveld samen op de eerste regel, de knop eronder. */
  .hero-search input{flex:1 1 calc(100% - 48px);}
  .hero-search .btn-search{flex:1 1 100%;}
  .stats-strip .badge-row{padding-top:14px;}
}

/* ---------- HOOFDKOP HOMEPAGE (7 oktober 2026) ----------
   De H1 is 'Werken bij Milieu Service Nederland' (content-home.json,
   heroSubline), zonder wisselende woorden eronder: rustiger, en meteen
   duidelijk waar de pagina over gaat. */
h1.headline{font-size:clamp(34px,4vw,56px);line-height:1.05;max-width:14ch;}
/* Waas over de video: neutraal donker (geen groene filter) en alleen waar
   de tekst staat; het eindigt net na de tekst en vloeit dan weg, zodat de
   rest van de video helder blijft. De tekst eindigt rond 50% + 160px (of
   780px op smallere schermen). Gemeten op het lichtste stukje beeld achter
   de tekst: kop 4,6:1 of meer, intro 4,6:1 of meer, link 5,6:1 of meer.
   Telefoon: de tekst loopt over de hele breedte, dus één vlak waas (56%):
   kop 5,0:1, intro 5,2:1. */
.hero-full-overlay{background:linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.5) max(780px, calc(50% + 160px)),rgba(0,0,0,0) max(1080px, calc(50% + 460px)));}
@media (max-width:760px){.hero-full-overlay{background:rgba(0,0,0,.56);}}


/* ---------- BULLETS EN LINK ONDER 'WERK DAT ERTOE DOET' (7 oktober 2026, optie B uit previews/werk-dat-ertoe-doet-opties.html) ----------
   Zoals het ontwerp: de bullet-koppen zo groot als de lopende tekst (17px),
   vet en donkergroen (#00652A op wit 7,25:1), de uitleg 15px in de
   tekstkleur, kleine vinkjes (26px). De link eronder 16px groen (#007E31,
   5,21:1). Eerst 28px koppen en een link van 15px. */
.intro-checklist{gap:18px;}
.intro-checklist li{gap:14px;}
.intro-checklist .ic{width:26px;height:26px;margin-top:1px;}
.intro-checklist .ic svg{width:14px;height:14px;}
.intro-checklist h3{font-size:17px;line-height:1.35;color:var(--deep);margin-bottom:2px;}
.intro-checklist p{font-size:15px;line-height:1.5;color:var(--ink);margin:0;}
.intro-link{font-size:16px;color:var(--green-cta);gap:8px;}
.intro-link:hover{color:var(--deep);}
.intro-link svg{width:18px;height:18px;}

/* ---------- KOP EN TEKST GELIJK GETROKKEN (7 oktober 2026) ----------
   Maatstaf is het blok 'Werk dat ertoe doet' op de homepage: blokkop
   --fs-h2 (36px), tekst eronder --fs-body (16px) met regelhoogte 1,6.
   Teksten onder een blokkop die 17 of 18px waren, en blokkoppen die 26 of
   28px waren, volgen dat nu. Koppen binnen een kaart of kolom ('Wat bieden
   we', 'Wat ga je doen', 'Recruitment', 'Meer verhalen') blijven kleiner. */
.section-head p,.afd-intro__sub,.cta-band p,.vg-intro,.job-alert-band .sub{font-size:var(--fs-body);line-height:1.6;}
.vg-faq__title,.vg-verwant__kop{font-size:var(--fs-h2);line-height:1.08;}

/* ---------- VERHALEN OP DE HOMEPAGE: ÉÉN UITGELICHT (7 oktober 2026, optie C3 uit previews/afdelingen-verhalen-c.html) ----------
   'In hun eigen woorden' week te weinig af van 'Overal ruimte om te
   groeien' (zelfde kaart met foto en label). Nu: het eerste verhaal groot,
   foto en citaat naast elkaar, met de korte omschrijving (cms.js geeft
   'text' door); de andere twee als smalle rij ernaast, foto links. Alleen
   CSS: de kaarten blijven a.story-card uit het CMS; :first-of-type telt
   alleen de a-elementen, dus het verborgen sjabloon (een div) telt niet mee.
   Het afdelingslabel staat klein linksonder in de foto, waar meestal geen
   gezicht zit. Geen schaduw, een hairline rand. */
@media (min-width:981px){
  .story-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px 24px;max-width:none;margin:0;}
  .story-grid > a.story-card{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);grid-column:2;box-shadow:none;border:1px solid var(--line);overflow:hidden;}
  .story-grid > a.story-card:first-of-type{grid-column:1;grid-row:span 3;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:12px;}
  /* Staan er rechts twee kaarten (homepage, Over ons), dan beslaat de grote
     kaart twee rijen in plaats van drie. Anders bleef er een lege derde rij
     met tussenruimte over en eindigde de kaart rechtsonder hoger dan de grote
     kaart links (9 oktober 2026). De kaarten rechts rekken mee tot dezelfde
     onderkant. */
  .story-grid:not(:has(> a.story-card:nth-of-type(4))) > a.story-card:first-of-type{grid-row:span 2;}
  .story-grid > a.story-card:hover{box-shadow:none;border-color:var(--licht,#ccebd8);}
  .story-grid .story-card__photo{aspect-ratio:auto;height:100%;min-height:150px;border-radius:0;}
  .story-grid > a.story-card:first-of-type .story-card__photo{min-height:340px;}
  .story-grid .story-card__photo img{position:absolute;inset:0;}
  .story-grid .story-card__badge-wrap{position:absolute;left:10px;bottom:10px;z-index:2;}
  .story-grid .story-card__badge-wrap .dept-badge{position:static;font-size:11px;letter-spacing:.08em;padding:7px 10px 5px;border-bottom-width:2px;box-shadow:none;}
  .story-grid > a.story-card:first-of-type .story-card__badge-wrap{left:14px;bottom:14px;}
  .story-grid .story-card__body{padding:16px 18px;justify-content:center;}
  .story-grid .story-card__title{text-align:left;font-weight:700;font-size:16px;line-height:1.35;margin:0 0 8px;color:#1d1d1f;}
  .story-grid .story-card__name{justify-content:flex-start;padding-right:0;margin:0;}
  .story-grid .story-card__desc,.story-grid .story-card__cta{display:none;}
  .story-grid > a.story-card:first-of-type .story-card__body{padding:32px 28px;gap:0;}
  .story-grid > a.story-card:first-of-type .story-card__title{font-size:24px;line-height:1.3;margin-bottom:14px;}
  .story-grid > a.story-card:first-of-type .story-card__title::before{content:'\201C';}
  .story-grid > a.story-card:first-of-type .story-card__title::after{content:'\201D';}
  .story-grid > a.story-card:first-of-type .story-card__desc{display:block;font-size:15px;line-height:1.55;color:var(--ink);margin:0 0 14px;}
  .story-grid > a.story-card:first-of-type .story-card__name{margin-bottom:14px;}
  .story-grid > a.story-card:first-of-type .story-card__cta{display:flex;justify-content:flex-start;padding-left:0;margin-top:0;}
}
/* Telefoon en tablet: het eerste verhaal als volle kaart (foto boven, label
   zoals op de andere kaarten over de onderrand), de andere twee als rij met
   de foto links en het label linksonder in de foto. */
@media (max-width:980px){
  .story-grid{grid-template-columns:1fr;max-width:560px;gap:14px;}
  .story-grid > a.story-card:not(:first-of-type){position:relative;display:grid;grid-template-columns:120px minmax(0,1fr);box-shadow:none;border:1px solid var(--line);overflow:hidden;}
  .story-grid > a.story-card:first-of-type{box-shadow:none;border:1px solid var(--line);}
  .story-grid > a.story-card:not(:first-of-type) .story-card__photo{aspect-ratio:auto;height:100%;min-height:120px;border-radius:0;}
  .story-grid > a.story-card:not(:first-of-type) .story-card__photo img{position:absolute;inset:0;}
  .story-grid > a.story-card:not(:first-of-type) .story-card__badge-wrap{position:absolute;left:8px;bottom:8px;z-index:2;}
  .story-grid > a.story-card:not(:first-of-type) .dept-badge{position:static;font-size:10.5px;letter-spacing:.06em;padding:6px 8px 4px;border-bottom-width:2px;box-shadow:none;}
  .story-grid > a.story-card:not(:first-of-type) .story-card__body{padding:14px 16px;justify-content:center;}
  .story-grid > a.story-card:not(:first-of-type) .story-card__title{text-align:left;font-weight:700;font-size:16px;line-height:1.35;margin:0 0 6px;}
  .story-grid > a.story-card:not(:first-of-type) .story-card__name{justify-content:flex-start;padding-right:0;margin:0;}
  .story-grid > a.story-card:not(:first-of-type) .story-card__desc,.story-grid > a.story-card:not(:first-of-type) .story-card__cta{display:none;}
  .story-grid > a.story-card:first-of-type .story-card__desc{text-align:center;}
}

/* ---------- BLOKKOPPEN ZOALS 'WERK DAT ERTOE DOET' (7 oktober 2026) ----------
   Tekst onder een blokkop in dezelfde kleur als in dat blok (#414042, op
   wit 12,2:1, op #F1F6F2 11,2:1). De groene link 'Bekijk alle ... vacatures'
   zoals 'Dit is werken bij ons': 16px vet #007E31 met een pijl van 18px;
   de woorden staan in losse spans, vandaar een gap ter breedte van een
   spatie en extra ruimte voor de pijl. De scrollknoppen van de kaartrijen
   krijgen dezelfde pijl in het groen (op wit 5,21:1). */
.section-head p{color:#414042;}
.jobs-head-link{font-size:16px;color:var(--green-cta);gap:.28em;min-height:44px;}
.jobs-head-link:hover{color:var(--deep);}
.jobs-head-link svg{width:18px;height:18px;margin-left:calc(8px - .28em);}
.dept-nav-btn{color:var(--green-cta);}
.dept-nav-btn:hover{color:var(--deep);border-color:var(--green-cta);}
.dept-nav-btn svg{width:18px;height:18px;}

/* Slotband op tablet en telefoon (7 oktober 2026): kaart in één kolom, kop
   mag afbreken, footer 132px ruimte bovenaan. */
@media (max-width:900px){
  .closer{padding-top:32px;}
  .job-alert-band{grid-template-columns:1fr;gap:24px;padding:32px 24px;}
  .job-alert-band h2{white-space:normal;}
  footer{padding-top:132px;}
}

/* ---------- AFDELINGEN ALS RASTER (7 oktober 2026, feedback C6) ----------
   'Overal ruimte om te groeien' was een carrousel met pijltjes voor maar
   vier afdelingen. Nu alle vier naast elkaar, op tablet twee bij twee, zonder
   pijltjes en slepen (die zijn uit site/index.html gehaald). Op de telefoon
   (tot 560px) blijft het een rij om opzij te vegen: vier volle kaarten onder
   elkaar worden te lang, en vegen kost daar geen extra klik. */
#afdelingen .dept-slider{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;overflow:visible;scroll-snap-type:none;cursor:auto;padding-bottom:0;}
#afdelingen .dept-card{min-width:0;}
@media (max-width:980px){#afdelingen .dept-slider{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){
  #afdelingen .dept-slider{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-right:-20px;padding-right:20px;}
  #afdelingen .dept-card{flex:0 0 78%;}
}


/* Placeholder zoekveld hero (7 oktober 2026, feedback C7): 'Zoek op functie,
   bijv. chauffeur' past vanaf 340px; op de kleinste telefoons (320px) is de
   letter 15px in plaats van 16, zodat hij ook daar niet wordt afgekapt. */
@media (max-width:340px){.hero-search input{font-size:15px;}}

/* ---------- FILTERS ALLE VACATURES: ZIJBALK SCROLT ZELF (7 oktober 2026, optie B uit previews/filters-proberen.html) ----------
   De vaste zijbalk was hoger dan een laptopscherm, waardoor Werkplek pas in
   beeld kwam na het hele overzicht. Nu is hij nooit hoger dan het scherm
   (min de header) en scrolt hij zelf, met een dunne lichtgroene scrollbalk.
   Alleen de zijbalk met filters (:has(.filter-search)), niet die op de
   vacaturepagina (sinds 7 oktober ook de kolom met .sd-sam op de
   vacaturepagina, die met samenvatting en recruiter hoger werd dan een
   laptopscherm); en alleen naast de vacatures (vanaf 981px), daaronder
   staan de filters gewoon boven de lijst. */
@media (min-width:981px){
  .vac-aside:has(.filter-search),.vac-aside:has(.sd-sam){max-height:calc(100vh - 112px);overflow-y:auto;overscroll-behavior:contain;padding-right:10px;scrollbar-width:thin;scrollbar-color:#ccebd8 transparent;}
  .vac-aside:has(.filter-search)::-webkit-scrollbar,.vac-aside:has(.sd-sam)::-webkit-scrollbar{width:6px;}
  .vac-aside:has(.filter-search)::-webkit-scrollbar-thumb,.vac-aside:has(.sd-sam)::-webkit-scrollbar-thumb{background:#ccebd8;border-radius:3px;}
  .vac-aside:has(.filter-search) > *,.vac-aside:has(.sd-sam) > *{flex-shrink:0;}
}

/* ---------- FILTERS ALLE VACATURES OP MOBIEL: INKLAPBAAR (7 oktober 2026, optie C uit previews/filters-mobiel-proberen.html) ----------
   Tot 980px stonden alle filtergroepen uitgeklapt boven de lijst; de eerste
   vacature begon pas na ruim 1.500px. Nu is elke groep een knop die zijn
   lijst open- en dichtklapt, standaard dicht. Welke groep open is, staat op
   <html> (data-filter-open-<groep>), omdat support.js de inhoud na elke
   filterklik opnieuw opbouwt; site.js zet de stand en aria-expanded terug.
   Een gekozen filter staat achter de groepsnaam ('Locatie · Diemen'),
   zodat een actief filter ook dichtgeklapt zichtbaar blijft. Op desktop
   blijft alles zoals het was (de knop is daar verborgen). */
.filter-groep-knop{display:none;}
@media (max-width:980px){
  .vac-aside{gap:0;}
  .vac-aside > .filter-search{margin-bottom:12px;}
  .vac-aside .filter-groep-label{display:none;}
  .filter-groep-knop{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 2px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:700 16px 'Ubuntu',Arial,sans-serif;text-align:left;cursor:pointer;}
  .filter-groep-keuze{font-weight:500;color:var(--green-cta);}
  .filter-groep-keuze:not(:empty)::before{content:' \00B7  ';color:var(--ink);}
  .filter-groep-pijl{flex:none;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007E31' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center/18px;transition:transform .2s ease;}
  .filter-groep-knop[aria-expanded="true"] .filter-groep-pijl{transform:rotate(180deg);}
  .filter-groep-knop:focus-visible{outline:3px solid var(--deep);outline-offset:2px;}
  html:not([data-filter-open-afdeling]) #filters-afdeling,
  html:not([data-filter-open-locatie]) #filters-locatie,
  html:not([data-filter-open-werkplek]) #filters-werkplek{display:none;}
  .vac-aside .filter-lijst{padding:8px 0 12px;}
  .vac-aside .filter-wis{margin-top:12px;}
}
@media (prefers-reduced-motion:reduce){.filter-groep-pijl{transition:none;}}


/* ---------- OVERZICHT ALLE VACATURES: 3 KOLOMMEN, LAGERE FOTO (7 oktober 2026, optie C uit previews/vacaturelijst-proberen.html) ----------
   Twee brede kaarten per rij maakten de pagina lang (23 vacatures: bijna
   6.000px). Nu drie per rij met een foto van 16:9 in plaats van 4:3
   (ruim 2.600px). Alleen naast de filters op Alle vacatures (.vac-layout);
   onder 1180px is de ruimte naast de filters te smal voor drie, dan twee. */
.vac-layout .vac-card__photo{aspect-ratio:16/9;}
@media (min-width:1180px){.vac-layout .vac-cards-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}}

/* ---------- MEGAMENU: WAAS, VERTRAGING EN RAND (7 oktober 2026, optie B uit previews/megamenu-proberen.html) ----------
   Het paneel viel over de pagina zonder dat duidelijk was dat het een losse
   laag is. Nu:
   - de rest van de pagina wordt 40% donkerder zolang het menu open is
     (html::after, z-index 40: onder de header en het paneel, z-index 50/60);
   - het paneel opent na 150ms en blijft 150ms staan na het weggaan, zodat
     het niet openklapt als je er langs beweegt en niet dichtklapt als je
     even buiten het paneel komt. Daarvoor staat het altijd in de pagina en
     wisselt alleen visibility/opacity in plaats van display;
   - met het toetsenbord (:focus-within) opent het meteen, anders zou Tab de
     links in een nog onzichtbaar paneel overslaan;
   - een oranje lijn onder het paneel, zoals onder de andere vlakken.
   Alleen vanaf 981px; daaronder is er geen megamenu. */
@media (min-width:981px){
  .mega-panel{display:block;visibility:hidden;opacity:0;border-bottom:3px solid var(--orange);transition:opacity .15s ease .15s,visibility 0s linear .3s;}
  html:not([data-touch]) .nav-mega:hover .mega-panel{visibility:visible;opacity:1;transition:opacity .15s ease .15s,visibility 0s linear .15s;}
  html:not([data-touch]) .nav-mega:focus-within .mega-panel{visibility:visible;opacity:1;transition:none;}
  /* Aanraakscherm (iPad, 12 oktober 2026): geen hover, dus opent een tik het
     paneel. site.js zet dan data-touch en data-mega-open (0, 1 of 2) op <html>;
     <html> overleeft de herbouw door support.js. */
  html[data-mega-open="0"] .nav-mega:nth-of-type(1) .mega-panel,
  html[data-mega-open="1"] .nav-mega:nth-of-type(2) .mega-panel,
  html[data-mega-open="2"] .nav-mega:nth-of-type(3) .mega-panel{visibility:visible;opacity:1;transition:none;}
  html::after{content:'';position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease .15s,visibility 0s linear .35s;}
  html:not([data-touch]):has(.nav-mega:is(:hover,:focus-within))::after,html[data-mega-open]::after{opacity:1;visibility:visible;transition:opacity .2s ease .15s,visibility 0s linear .15s;}
}
@media (min-width:981px) and (prefers-reduced-motion:reduce){
  .mega-panel,.nav-mega:hover .mega-panel,html::after,html:has(.nav-mega:is(:hover,:focus-within))::after{transition-property:visibility;}
}

/* ---------- OPEN SOLLICITATIE ALS LAATSTE KAART (7 oktober 2026, optie D uit previews/open-sollicitatie-proberen.html) ----------
   Op Alle vacatures stond 'Niets voor jou erbij?' rechtsboven, nog voor de
   eerste vacature. Nu de laatste kaart in de lijst, even groot als een
   vacature. Verloop #00742E naar #00652A (zoals de footer): wit haalt op het
   lichtste punt 5,93:1, ook voor de tekst van 16px. Verborgen als er geen
   vacatures zijn; dan biedt de melding 'Geen vacatures gevonden' de opties. */
.vac-os-laatste{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:28px 24px;border-radius:8px;background:linear-gradient(90deg,var(--deep-2) 0%,var(--deep) 100%);border-bottom:3px solid var(--orange);color:#fff;text-decoration:none;transition:transform .15s ease;}
.vac-os-laatste:hover{color:#fff;transform:translateY(-2px);}
.vac-os-laatste:focus-visible{outline:3px solid var(--deep);outline-offset:3px;}
.vac-os-laatste__ic.ms{width:48px;height:48px;border-radius:50%;background:#fff;color:var(--deep-2);display:flex;align-items:center;justify-content:center;font-size:24px;}
.vac-os-laatste__kop{font-size:22px;font-weight:700;line-height:1.25;}
.vac-os-laatste__tekst{font-size:16px;line-height:1.6;}
.vac-os-laatste__cta{display:inline-flex;align-items:center;gap:8px;font-weight:700;margin-top:4px;}
.vac-os-laatste__cta svg{transition:transform .2s ease;}
.vac-os-laatste:hover .vac-os-laatste__cta svg{transform:translateX(3px);}
.vac-cards-grid:not(:has(.vac-card)) .vac-os-laatste{display:none;}

/* ---------- TEKSTKLEUR GELIJKGETROKKEN (7 oktober 2026, feedback J1 vacaturepagina) ----------
   Lopende tekst stond in vier kleuren (#646464, #3A3527, #1A1A1A, #414042).
   Nu volgens de huisstijl: lopende tekst #414042 (op wit 10,3:1, op #F1F6F2
   9,4:1), ondersteunende tekst #5F5D5B (6,6:1 en 6,0:1). #3A3527 en #646464
   zijn in de hele CSS, de pagina's en de build vervangen; hieronder de
   plekken die --ink (#1A1A1A, bedoeld voor koppen) als tekstkleur hadden.
   De donkere tekst op de oranje CTA-band (#3A2200) blijft, die hoort bij
   oranje. */
.intro-checklist p,.story-card__desc,.story-grid > a.story-card:first-of-type .story-card__desc,.vg-verwant__lijst li,.vp-zij__lijst li,.intro-text p strong{color:#414042;}

/* ---------- RECRUITER OP DE VACATUREPAGINA (7 oktober 2026, optie D uit previews/recruiter-proberen.html; opmaak optie B uit previews/recruiter-blok-proberen.html) ----------
   Onderaan de kaart 'Snel solliciteren': 'Liever iemand spreken?' met foto,
   naam en functie, en Bel, WhatsApp en Mail als drie even brede knoppen,
   zodat alles aan beide kanten uitlijnt. Harry blijft de eerste keus.
   .vg-side-card ervoor: '.vg-side-card p' zet anders de marge op 0.
   Tekst #1d1d1f/#5f5d5b, links #007E31 (5,21:1). */
.vg-side-card .rc-in{margin-top:24px;padding-top:24px;border-top:1px solid var(--line);}
.vg-side-card .rc-in__vraag{margin:0 0 18px;font-size:17px;font-weight:700;color:#1d1d1f;}
.rc-wie{display:flex;align-items:center;gap:16px;}
.rc-foto{width:60px;height:60px;border-radius:50%;background:#ccebd8;color:var(--deep);display:flex;align-items:center;justify-content:center;flex:none;border:3px solid #fff;outline:2px solid #ccebd8;object-fit:cover;}
.rc-foto .ms{font-size:30px;}
.rc-naam{display:block;font-size:17px;font-weight:700;color:#1d1d1f;margin-bottom:2px;}
.rc-functie{display:block;font-size:14.5px;color:#5f5d5b;}
.rc-links{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px;}
.rc-links a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;border:1.5px solid #ccebd8;border-radius:5px;color:var(--green-cta);font-weight:700;font-size:13.5px;text-decoration:none;}
.rc-links a:hover{background:#F1F6F2;color:var(--deep);}
.rc-links a:focus-visible{outline:3px solid var(--deep);outline-offset:2px;}
.rc-links .ms{font-size:20px;}

/* ---------- SOLLICITEER DIRECT OP DE VACATUREPAGINA (7 oktober 2026, optie D uit previews/solliciteer-knop-proberen.html) ----------
   Solliciteren is de hoofdactie. Bovenaan de rechterkolom (die blijft staan
   tijdens het scrollen) een samenvatting met de oranje knop; 'Chat met
   Harry' in de kaart eronder wordt secundair (wit, groene rand, #007E31
   5,21:1). De knoppen in de banner zijn weg. Op de telefoon staat de kolom
   onder de tekst; daar een vaste balk onderaan met de knop en Harry. De
   ronde chatknop rechtsonder is dan verborgen: de balk heeft Harry al. */
.sd-sam{background:#fff;border:1px solid var(--line);border-bottom:3px solid var(--orange);border-radius:8px;padding:22px 24px;margin-bottom:20px;}
.sd-sam__titel{margin:0 0 10px;font-size:19px;font-weight:700;line-height:1.3;color:#1d1d1f;}
.sd-sam__lijst{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:6px;font-size:15px;color:#414042;}
.sd-sam__lijst li{display:flex;align-items:center;gap:8px;}
.sd-sam__lijst .ms{font-size:18px;color:var(--green-cta);}
.sd-knop{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;font-size:17px;font-weight:700;box-sizing:border-box;}
.vac-aside .vg-harry .vg-harry__knop{background:#fff;color:var(--green-cta);border:1.5px solid var(--green-cta);box-shadow:none;}
.vac-aside .vg-harry .vg-harry__knop:hover{background:#F1F6F2;color:var(--deep);}
.sd-balk{display:none;}
@media (max-width:980px){
  .sd-balk{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;gap:10px;align-items:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);}
  .sd-balk .btn{flex:1;justify-content:center;min-height:48px;}
  .sd-harry{flex:none;width:48px;height:48px;border-radius:5px;border:1.5px solid var(--green-cta);color:var(--green-cta);display:flex;align-items:center;justify-content:center;}
  .sd-harry:focus-visible{outline:3px solid var(--deep);outline-offset:2px;}
  body:has(.sd-balk){padding-bottom:76px;}
  .vac-aside .sd-sam{display:none;}
}


/* ---------- UPLOADVELDEN SOLLICITATIEFORMULIER (7 oktober 2026, bug 'solliciteren zonder cv') ----------
   Het echte bestandsveld (cv, motivatiebrief) zat verborgen onder het
   uploadvak, maar '.apply-form input' maakte het 100% breed: het stak 1.440px
   rechts uit de pagina. Verstuurde je zonder cv, dan sprong de browser naar
   dat veld en schoof de hele pagina opzij. Nu ligt het onzichtbaar precies
   over het eigen vak: klikken werkt zoals voorheen, de melding staat bij het
   vak en er steekt niets meer uit. Focusrand op het vak voor het toetsenbord. */
.apply-upload{position:relative;}
.apply-form .apply-upload input[type="file"]{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;opacity:0;clip:auto;overflow:hidden;cursor:pointer;}
.apply-upload:focus-within{outline:3px solid #fff;outline-offset:2px;}

/* ---------- BEDANKPAGINA: CONTACTPERSOON (7 oktober 2026) ----------
   'Vragen in de tussentijd?' met de standaard contactpersoon uit het CMS,
   in dezelfde opmaak als het blok op de vacaturepagina. */
.bedankt-contact__kaart{max-width:520px;background:#fff;border:1px solid var(--line);border-bottom:3px solid var(--orange);border-radius:8px;padding:28px 28px 24px;}
.bedankt-contact__kop{font-size:22px;line-height:1.25;margin:0 0 18px;color:#1d1d1f;}


/* ---------- AFDELINGSPAGINA ALS ETALAGE (8 oktober 2026, previews/afdeling-etalage.html) ----------
   Rustige kop (naam, slogan, twee knoppen), dan een tekstblok met het verhaal
   van de afdeling (CMS: Afdelingspagina's > Tekstblok), de verhalen, de
   functies en de actuele vacatures. Tekst #414042/#1d1d1f, links #007E31. */
.page-hero-framed__slogan-afd{margin:0 0 22px;font-size:22px;font-weight:700;color:#fff;}
.page-hero-framed--afdeling .page-hero-framed__ctas{display:flex;gap:12px;flex-wrap:wrap;}
.afd-overtuig{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px;align-items:start;}
.afd-overtuig__tekst h2{margin:0 0 18px;}
.afd-overtuig__tekst p{font-size:17px;line-height:1.7;margin:0 0 18px;max-width:62ch;color:#414042;}
.afd-overtuig__tekst p:first-of-type{font-size:19px;color:#1d1d1f;}
.afd-zij{background:#fff;border:1px solid var(--line);border-bottom:3px solid var(--orange);border-radius:8px;padding:24px;}
.afd-zij h3{margin:0 0 14px;font-size:18px;color:#1d1d1f;}
.afd-stappen{list-style:none;margin:0;padding:0;}
.afd-stappen li{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line);}
.afd-stappen li:first-child{border-top:0;padding-top:0;}
.afd-stap__nr{width:34px;height:34px;border-radius:50%;background:var(--deep);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;}
.afd-stappen b{display:block;color:#1d1d1f;}
.afd-stap__tekst{display:block;font-size:14.5px;line-height:1.45;color:#5f5d5b;}
.afd-citaat{margin:18px 0 0;padding:16px 18px;background:#F1F6F2;border-left:4px solid var(--orange);border-radius:0 8px 8px 0;font-size:16px;line-height:1.45;font-weight:500;color:#1d1d1f;}
.afd-citaat span{display:block;margin-top:8px;font-size:14px;font-weight:400;color:#5f5d5b;}
.afd-kop-rij{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px;}
.afd-kop-rij h2{margin:0 0 12px;}
.afd-kop-rij p{margin:0;font-size:16px;line-height:1.6;color:#414042;}
@media (max-width:900px){.afd-overtuig{grid-template-columns:1fr;gap:28px;}}
/* Verhalen op de afdelingspagina: dezelfde kaarten als op de
   vacaturegroeppagina's, maar over de volle breedte drie naast elkaar. */
.afd-tale-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:980px){.afd-tale-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.afd-tale-grid{grid-template-columns:1fr;}}
.afd-verhalen .vg-tale-head h2{margin:0;}
/* Vacatures op de afdelingspagina: op de vacaturegroeppagina's sluit deze
   sectie zonder ruimte aan op de layout erboven, hier is het een eigen blok. */
.vg-vacatures-sectie.afd-vacatures-sectie{padding-top:var(--ruimte-sectie,80px);}

/* ---------- RUIMTE BIJ ELKE KLEUROVERGANG (8 oktober 2026) ----------
   Eerst de overgang, dan ruimte, dan pas tekst. Blokken die eerder tegen
   elkaar aan lagen (padding 0), krijgen de gewone sectieruimte. */
section.vg-vacatures-sectie,
section.vg-verwant-sectie,
section.ct-sectie{padding-top:var(--ruimte-sectie,80px) !important;padding-bottom:var(--ruimte-sectie,80px) !important;}

/* ---------- VACATUREGROEPPAGINA'S GELIJK AAN DE REST (8 oktober 2026, feedback J1) ----------
   Lopende tekst in de hoofdkolom #414042, zoals op de vacaturepagina en de
   homepage (was #5F5D5B). De slogan in de header wit, zoals op de
   afdelingspagina's en de vacaturepagina (was oranje #F89501). */
.vg-main .vg-intro,.vg-main ul.tick li{color:#414042;}
.page-hero-framed__slogan{color:#fff;}

/* ---------- TWEE KAARTEN IN HET MIDDEN (8 oktober 2026, feedback C4, optie B uit previews/twee-kaarten.html) ----------
   Rollen en verhalen op de afdelingspagina's staan in een raster van drie.
   Zijn er precies twee kaarten (Sales, Service), dan staan ze in het midden,
   even breed als bij drie kaarten, in plaats van links met rechts een lege
   plek. Kop en link blijven links en rechts. Onder 981px niet nodig: daar is
   het raster al twee kolommen of één. */
@media (min-width:981px){
  .afd-rollen-grid:has(> :nth-child(2):last-child),
  .afd-tale-grid:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,calc((100% - 48px) / 3));justify-content:center;}
}

/* ---------- SOCIALS IN DE ZIJBALK VAN EEN VERHAAL (8 oktober 2026, feedback 2, optie C uit previews/socials-plekken.html) ----------
   Onder 'Meer verhalen' en de knop 'Alle verhalen': een korte regel met de
   vier officiële logo's in hun eigen vorm en kleur (_soc_logo() in
   scripts/_frame.py). Tikvlak 44 x 44, logo 32px. Vervangt het lichtgroene
   vlak met witte knoppen onder het verhaal (.soc-regel). */
.vp-zij__volg{padding:18px 22px 20px;border-top:1px solid var(--line,#e6e6e7);}
.vp-zij__volg p{margin:0 0 10px;font-size:15px;font-weight:700;color:#1d1d1f;}
.soc-logos{display:flex;flex-wrap:wrap;gap:6px;margin-left:-6px;}
.soc-logo{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;transition:background .2s ease;}
.soc-logo svg{width:32px;height:32px;display:block;}
.soc-logo:hover{background:#F1F6F2;}
.soc-logo:focus-visible{outline:3px solid var(--orange);outline-offset:2px;}

/* ---------- VERHAALPAGINA ZONDER BANNER (8 oktober 2026, feedback J3, optie B uit previews/verhaal-zonder-banner.html) ----------
   Bovenaan de tekstkolom: afdelingslabel, titel (H1) en naam; daaronder de
   foto van het verhaal en de tekst. De zijbalk staat ernaast. Titel #1d1d1f
   op wit, naam #5f5d5b (6,6:1). */
.vp-kop{margin:0 0 24px;}
.vp-kop .vp-kop-label{position:static;display:table;margin:0 0 14px;font-size:13px;letter-spacing:.1em;line-height:1;}
.vp-titel{font-size:clamp(30px,3.4vw,44px);line-height:1.12;margin:0 0 12px;color:#1d1d1f;text-wrap:balance;}
.vp-kop .vp-kop-naam{color:#5f5d5b;}

/* ---------- OVER ONS, NIEUWE OPBOUW (8 oktober 2026, feedback Joey, previews/over-ons-vergelijk.html) ----------
   Eerst de mensen, dan wat je krijgt, waar we werken en hoe je solliciteert.
   Kop met cijferbalk (bestaande .page-hero-framed en .ons-stats), video, drie
   kernwaarden met foto, verhalen (.vg-tale-card), voordelen per soort
   functie en het sollicitatieproces. De kaart met vestigingen staat sinds
   dezelfde dag op /contact/ (KOM LANGS MET KAART hieronder).
   Tekst #414042 en #5f5d5b, links #007E31. Geen schaduwen. */
.oo-kop .page-hero-framed__content{padding-bottom:60px;}
.oo-video{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px;align-items:center;}
.oo-video h2{margin:0 0 14px;}
.oo-video__speler{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:12px;overflow:hidden;background:#000;cursor:pointer;font:inherit;}
.oo-video__speler img{width:100%;height:100%;object-fit:cover;opacity:.85;display:block;}
.oo-video__speler:focus-visible{outline:3px solid var(--orange);outline-offset:3px;}
.oo-video__speler.is-speelt{cursor:auto;}
.oo-video__speler iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.oo-video__knop{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;background:linear-gradient(180deg,#F89501 0%,#CE5C00 100%);display:flex;align-items:center;justify-content:center;transition:transform .2s ease;}
.oo-video__speler:hover .oo-video__knop{transform:scale(1.06);}
.oo-video__knop svg{width:34px;height:34px;fill:#fff;margin-left:5px;}
.oo-tekst{margin:0;color:#414042;font-size:var(--fs-body);line-height:1.6;max-width:65ch;}
.oo-noot{margin:14px 0 0;color:#5f5d5b;font-size:15px;line-height:1.5;}
.oo-waarden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px;}
.oo-waarde{margin:0;}
.oo-waarde img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block;}
.oo-waarde figcaption{border-top:3px solid var(--orange);margin-top:18px;padding-top:14px;}
.oo-waarde h3{margin:0 0 6px;font-size:20px;}
/* Elke kernwaarde een eigen kleur lijn (8 oktober 2026): oranje, groen, donkergroen. */
.oo-waarde:nth-of-type(2) figcaption{border-top-color:#009D3D;}
.oo-waarde:nth-of-type(3) figcaption{border-top-color:#00652A;}
.oo-waarde p{margin:0;color:#414042;line-height:1.6;}
@media (max-width:980px){
  .oo-video{grid-template-columns:minmax(0,1fr);gap:28px;}
  .oo-waarden{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:980px){.oo-kop .page-hero-framed__content{padding-bottom:40px;}}

/* ---------- DIT KRIJG JIJ: BASIS + TABBLADEN (9 oktober 2026, optie C1 uit previews/dit-krijg-jij-optie-c.html) ----------
   Bovenaan wat iedereen krijgt, daaronder per soort functie een tabblad. Het
   gekozen tabblad staat op <html data-vw-keuze> (site.js); <html> overleeft de
   herbouw door support.js. Zonder JS of vóór de eerste klik: het eerste
   tabblad. Plaats 2, 3 en 4 omdat het eerste kind het CMS-sjabloon is. */
.vw-basis{background:#fff;border:1px solid var(--line,#e6e6e7);border-radius:12px;padding:24px 28px;margin-top:28px;}
.vw-basis h3{margin:0 0 16px;font-size:20px;}
.vw-basis__lijst{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;}
.vw-basis__punt{display:flex;flex-direction:column;gap:2px;}
.vw-basis__punt .ms{color:var(--green,#009d3d);font-size:28px;margin-bottom:6px;}
.vw-basis__punt strong{font-size:24px;line-height:1.15;color:#1d1d1f;}
.vw-basis__punt span:last-child{color:#414042;font-size:15px;}
.vw-sub{margin:36px 0 14px;font-size:20px;}
.vw-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.vw-tab{min-height:44px;padding:0 18px;border-radius:5px;border:1.5px solid #ccebd8;background:#fff;font:inherit;font-weight:700;color:#00652A;cursor:pointer;}
.vw-tab:hover{border-color:#009d3d;}
.vw-tab:focus-visible{outline:3px solid #00652A;outline-offset:2px;}
.vw-panelen > .vw-paneel{display:none;grid-template-columns:320px minmax(0,1fr);gap:28px;align-items:center;background:#fff;border:1px solid var(--line,#e6e6e7);border-radius:12px;padding:16px;}
.vw-paneel__foto{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;display:block;}
.vw-punten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;margin:0 0 14px;}
.vw-punten p{display:flex;align-items:center;gap:10px;margin:0;font-size:16px;line-height:1.5;color:#414042;}
.vw-punten .ms{color:var(--green,#009d3d);font-size:22px;flex:none;}
html:not([data-vw-keuze]) .vw-panelen > .vw-paneel:nth-child(2),
html[data-vw-keuze="0"] .vw-panelen > .vw-paneel:nth-child(2),
html[data-vw-keuze="1"] .vw-panelen > .vw-paneel:nth-child(3),
html[data-vw-keuze="2"] .vw-panelen > .vw-paneel:nth-child(4){display:grid;}
html:not([data-vw-keuze]) .vw-tabs > .vw-tab:nth-child(2),
html[data-vw-keuze="0"] .vw-tabs > .vw-tab:nth-child(2),
html[data-vw-keuze="1"] .vw-tabs > .vw-tab:nth-child(3),
html[data-vw-keuze="2"] .vw-tabs > .vw-tab:nth-child(4){background:#00652A;border-color:#00652A;color:#fff;}
@media (max-width:980px){.vw-basis__lijst{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:700px){
  .vw-basis{padding:20px;}
  .vw-basis__lijst{grid-template-columns:repeat(2,minmax(0,1fr));}
  .vw-panelen > .vw-paneel{grid-template-columns:minmax(0,1fr);gap:18px;}
  .vw-punten{grid-template-columns:minmax(0,1fr);}
}

/* ---------- KOM LANGS MET KAART (8 oktober 2026, feedback Joey J1 Contact) ----------
   Op /contact/: links de kaart van Nederland met de drie vestigingen (eigen
   SVG in de huisstijl, omtrek uit Natural Earth, geen externe kaartdienst),
   rechts de tekst, de vestigingen met een routelink en de knop. Vervangt de
   foto in dit blok. Stond eerst op /over-ons/. */
.ct-langs__kaart{background:#F1F6F2;display:flex;align-items:center;justify-content:center;padding:28px;}
.vest-kaart__nl{width:100%;max-width:400px;height:auto;display:block;}
.vest-lijst{list-style:none;margin:4px 0 24px;padding:0;display:grid;gap:14px;width:100%;}
.vest-loc{display:flex;gap:10px;align-items:flex-start;}
.vest-loc .ms{color:var(--green-cta);font-size:20px;flex:none;margin-top:1px;}
.vest-loc b{display:block;color:#1d1d1f;}
.vest-loc span:not(.ms){display:block;color:#5f5d5b;font-size:15px;line-height:1.5;}
.vest-loc a{display:inline-flex;align-items:center;min-height:44px;color:var(--green-cta);font-weight:700;font-size:15px;}
@media (max-width:980px){.ct-langs__kaart{padding:20px;}}

/* ---------- ÉÉN KOPHOOGTE (8 oktober 2026, feedback J1 banners) ----------
   Alle koppen met foto (.page-hero-framed) even hoog: 360px op desktop, 340px
   op een tablet, 300px op een telefoon. Eerst varieerde dat van 320 tot 400px
   (--afdeling 360, --roomy 400, losse pagina's 320). De inhoud past erin;
   wat langer was (Achterhoek, Over ons) is ingekort. */
.page-hero-framed,
.page-hero-framed.page-hero-framed--afdeling,
.page-hero-framed.page-hero-framed--roomy,
.page-hero-framed.page-hero-framed--vacaturegroep{min-height:360px;}
@media (max-width:980px){
  .page-hero-framed,
  .page-hero-framed.page-hero-framed--afdeling,
  .page-hero-framed.page-hero-framed--roomy,
  .page-hero-framed.page-hero-framed--vacaturegroep{min-height:340px;}
}
@media (max-width:600px){
  .page-hero-framed,
  .page-hero-framed.page-hero-framed--afdeling,
  .page-hero-framed.page-hero-framed--roomy,
  .page-hero-framed.page-hero-framed--vacaturegroep{min-height:300px;}
}

/* ---------- COMPACTE PAGINAKOP (8 oktober 2026, feedback J1 banners, optie D uit previews/paginakop.html) ----------
   Functionele pagina's (Alle vacatures, Onze verhalen, Contact, Open
   sollicitatie, Bedankt) krijgen geen fotobanner maar een groen vlak met
   witte tekst en de oranje lijn: sneller bij de inhoud en geen steeds
   terugkerende foto. Pagina's die moeten verleiden houden de foto (ÉÉN
   KOPHOOGTE hierboven). Wit op het donkerste punt #00652A 7,25:1, op
   #00742E 5,9:1: haalt overal de norm. Geen label boven de titel. */
.page-hero-framed.page-hero-framed--compact{min-height:0;background:linear-gradient(90deg,#00652A 0%,#00742E 100%);border-radius:12px;}
.page-hero-framed--compact .page-hero-framed__kicker{display:none;}
.page-hero-framed--compact .page-hero-framed__content{position:relative;padding:40px 44px;max-width:none;}
.page-hero-framed--compact .page-hero-framed__title{font-size:clamp(30px,3.2vw,44px);line-height:1.12;margin:0 0 12px;}
.page-hero-framed--compact .page-hero-framed__title:last-child{margin-bottom:0;}
.page-hero-framed--compact .page-hero-framed__body{max-width:62ch;font-size:17px;line-height:1.6;margin:0;}
.page-hero-framed--compact .page-hero-framed__ctas{margin-top:22px;}
@media (max-width:600px){
  .page-hero-framed.page-hero-framed--compact{border-radius:0;}
  .page-hero-framed--compact .page-hero-framed__content{padding:28px 22px;}
}

/* ---------- ÉÉN STIJL VOOR KAARTEN (8 oktober 2026, feedback J2) ----------
   Verhaal- en afdelingskaarten stonden op de ene pagina gecentreerd
   (.verhalen-card op Onze verhalen, .vg-tale-card op de afdelings- en
   vacaturegroeppagina's, .dept-card op de homepage) en op de andere links
   uitgelijnd (.story-card, .afd-card). Nu overal links: label linksboven op
   de rand van de foto, titel, naam en 'Lees meer' links eronder. */
.dept-card__badge-wrap,.verhalen-card__badge-wrap,.vg-tale-badge-row{justify-content:flex-start;padding-left:24px;}
.dept-card__body,.verhalen-card__body,.vg-tale-body{align-items:stretch;text-align:left;}
.dept-card__desc,.verhalen-card__title,.vg-tale-body h3{text-align:left;}
.verhalen-card__name,.vg-tale-naam{justify-content:flex-start;padding-right:0;}
.dept-card__cta,.verhalen-card__cta,.vg-tale-more{justify-content:flex-start;padding-left:0;}

/* ---------- CONTACT: RECRUITER VOORAAN, UITGEBREIDE FAQ (9 oktober 2026, feedback Joey, previews/contact-vergelijk.html) ----------
   Kaart met foto, naam en functie van de recruiter (site.recruiters.0 in
   content-algemeen.json), bereikbaarheid en WhatsApp, bellen en mailen.
   FAQ in twee groepen naast elkaar, de eerste vraag van elke groep open.
   WhatsApp-knop in het groene verloop (wit 3,57:1 op het lichtste punt,
   derde uitzondering in CLAUDE.md). */
.cv-wie .cv-naam{font-weight:700;color:#1d1d1f;}
.cv-contact{display:block;}
.cv-adinda{display:grid;grid-template-columns:240px minmax(0,1fr);background:#fff;border:1px solid #e6e6e7;border-radius:12px;overflow:hidden;}
.cv-adinda__foto{position:relative;background:#F1F6F2;}
.cv-adinda__foto img{width:100%;height:100%;object-fit:cover;display:block;}
.cv-adinda__tekst{padding:32px 32px 28px;display:flex;flex-direction:column;}
.cv-adinda__tekst h2{margin:0 0 10px;font-size:28px;line-height:1.2;}
.cv-adinda__tekst p{margin:0 0 6px;color:#414042;line-height:1.6;}
.cv-wie{display:flex;align-items:center;gap:8px;margin:0 0 16px;font-weight:700;color:#1d1d1f}
.cv-wie span{font-weight:400;color:#5f5d5b}
.cv-tijden{display:flex;align-items:center;gap:8px;color:#5f5d5b;font-size:15px;margin:10px 0 20px}
.cv-tijden .ms{color:#009D3D;font-size:20px}
.cv-knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.cv-knoppen a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:5px;font-weight:700;text-decoration:none;font-size:15px}
.cv-knoppen a.cv-wa{background:linear-gradient(90deg,#009D3D 0%,#00742E 100%);color:#fff}
.cv-knoppen a.cv-sec{border:1.5px solid #ccebd8;color:#007E31;background:#fff}
.cv-knoppen a.cv-sec:hover{background:#F1F6F2}
.cv-knoppen .ms{font-size:20px}
.cv-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:28px;align-items:start}
.cv-faq-groep h3{margin:0 0 14px;font-size:20px}
.cv-faq-groep .vg-faq__list{display:grid;gap:10px}
.cv-faq .vg-faq__item{border:1px solid #e6e6e7}
@media (max-width:980px){.cv-faq{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.cv-adinda{grid-template-columns:minmax(0,1fr)}.cv-adinda__foto{height:240px}.cv-adinda__foto img{object-position:50% 25%}.cv-adinda__tekst{padding:24px 20px}}

/* Video-blok Over ons (9 oktober 2026, optie C uit previews/over-ons-video.html):
   video en een lichtgroen tekstvlak even hoog, samen één blok met de oranje
   lijn eronder, zoals 'Kom gerust een keer langs' op Contact. */
.oo-video{gap:0;align-items:stretch;}
.oo-video > *{border-bottom:5px solid var(--orange);}
.oo-video__speler{border-radius:12px 0 0 12px;height:100%;aspect-ratio:auto;min-height:340px;}
.oo-video > div:not(.oo-video__speler){background:#F1F6F2;border-radius:0 12px 12px 0;padding:40px 44px;display:flex;flex-direction:column;justify-content:center;}
.oo-video__speler.is-speelt{background:#000;}
@media (max-width:980px){
  .oo-video{gap:0;}
  .oo-video__speler{min-height:0;aspect-ratio:16/9;border-radius:12px 12px 0 0;border-bottom:0;}
  .oo-video > div:not(.oo-video__speler){border-radius:0 0 12px 12px;padding:28px 22px;}
}

/* Video-blok zonder video (9 oktober 2026): zolang er geen YouTube-code in
   Sveltia staat, is het blok gewoon een foto, zonder afspeelknop. */
.oo-video__speler{cursor:default;}
.oo-video__speler img{opacity:1;}
.oo-video__knop{display:none;border:0;padding:0;cursor:pointer;}
.oo-video__speler[data-video-youtube] {cursor:pointer;}
.oo-video__speler[data-video-youtube] img{opacity:.85;}
.oo-video__speler[data-video-youtube] .oo-video__knop{display:flex;}
.oo-video__knop:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.oo-video__speler img{position:absolute;inset:0;}
.oo-video__speler img{object-position:50% 60%;}
.oo-video__speler:not([data-video-youtube]){background:#F1F6F2;}

/* ---------- VERHAAL IN VAST FORMAT (9 oktober 2026, feedback C4 Onze verhalen, previews/drie-vragen.html) ----------
   In het kort (functie, afdeling, locatie), tussenkoppen als vraag, een
   uitgelichte quote na de tweede vraag en een afsluiter met de knop naar de
   vacatures. Tekst #414042/#5f5d5b/#1d1d1f; quote op #F1F6F2 (#1d1d1f 15:1);
   afsluiter in het groene verloop met witte tekst van 19px vet (3,57:1 op
   het lichtste punt, grote tekst; derde uitzondering in CLAUDE.md). */
.vp-kort{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:8px 0 32px;border:1px solid var(--line,#e6e6e7);border-radius:8px;overflow:hidden;}
.vp-kort div{padding:14px 18px;border-right:1px solid var(--line,#e6e6e7);}
.vp-kort div:last-child{border-right:0;}
.vp-kort dt{font-size:13px;color:#5f5d5b;margin:0 0 2px;}
.vp-kort dd{margin:0;font-weight:700;color:#1d1d1f;}
.vac-body .vp-vraag{font-size:22px;line-height:1.3;margin:32px 0 10px;color:#1d1d1f;}
.vac-body .vp-kort + .vp-vraag{margin-top:0;}
.vp-quote{margin:32px 0;padding:20px 24px;border-left:4px solid var(--orange);background:#F1F6F2;border-radius:0 8px 8px 0;}
.vp-quote p{margin:0;font-size:22px;font-weight:700;line-height:1.35;color:#1d1d1f;}
.vp-quote p::before{content:'\201C';}
.vp-quote p::after{content:'\201D';}
.vp-afsluiter{margin-top:36px;padding:22px 24px;border-radius:8px;background:linear-gradient(90deg,#009D3D 0%,#00742E 100%);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
.vp-afsluiter p{margin:0;color:#fff;font-size:19px;font-weight:700;}
@media (max-width:600px){.vp-kort div{border-right:0;border-bottom:1px solid var(--line,#e6e6e7);}.vp-kort div:last-child{border-bottom:0;}.vp-quote p{font-size:19px;}}


/* ---------- VRAGEN?-BALK MET DE RECRUITER (9 oktober 2026, feedback site-breed J3, optie B uit previews/vragen-blok.html) ----------
   Boven de job-alertband, binnen de afsluitende sectie (.closer), zodat het
   achtergrondritme niet verschuift. Niet op pagina's waar de recruiter al in
   beeld staat: vacaturepagina en Open sollicitatie (.rc-in), vacaturegroep-
   pagina's (.vg-side .rc-in), Contact (.cv-adinda) en Bedankt (.bedankt-contact).
   Tekst #1d1d1f/#5f5d5b op wit; belknop in het groene verloop met witte
   tekst van 15px vet (derde uitzondering in CLAUDE.md); mailknop #007E31. */
.vragen-balk{display:flex;align-items:center;gap:20px;flex-wrap:wrap;border:1px solid var(--line,#e6e6e7);border-radius:12px;background:#fff;padding:18px 22px;margin:0 0 48px;}
.vragen-balk img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 25%;flex:none;border:3px solid #fff;outline:2px solid #ccebd8;}
.vragen-balk__tekst{flex:1 1 300px;margin:0;}
.vragen-balk__tekst b{display:block;font-size:19px;color:#1d1d1f;}
.vragen-balk__tekst > span{color:#5f5d5b;font-size:15px;}
.vragen-balk__functie{text-transform:lowercase;}
.vragen-balk__knoppen{display:flex;gap:10px;flex-wrap:wrap;}
.vragen-balk__knoppen a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:5px;font-weight:700;text-decoration:none;font-size:15px;}
.vragen-balk__bel{background:linear-gradient(90deg,#009D3D 0%,#00742E 100%);color:#fff !important;}
.vragen-balk__mail{border:1.5px solid #ccebd8;color:#007E31 !important;background:#fff;}
.vragen-balk__mail:hover{background:#F1F6F2;}
.vragen-balk__knoppen a:focus-visible{outline:3px solid var(--deep);outline-offset:2px;}
body:has(.rc-in, .cv-adinda, .bedankt-contact) .vragen-balk{display:none;}
@media (max-width:600px){.vragen-balk{padding:16px;margin-bottom:32px;}}

/* ---------- OPEN SOLLICITATIE, MIDDENWEG (9 oktober 2026, optie C uit previews/open-sollicitatie.html) ----------
   Geen lege kenmerken (Alle locaties, Alle werkplekken, In overleg) en een
   afdelingskeuze bovenaan het formulier. Wit op het groene paneel. */
.vac-locbar.is-verborgen,.sd-sam__lijst.is-verborgen{display:none !important;}
.apply-afd{border:0;margin:0 0 18px;padding:0;min-width:0;}
.apply-afd legend{font-weight:700;color:#fff;margin:0 0 8px;font-size:15px;padding:0;}
.apply-afd legend .opt{font-weight:400;color:rgba(255,255,255,.88);}
.apply-afd div{display:flex;flex-wrap:wrap;gap:8px;}
.apply-afd label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1.5px solid #ccebd8;border-radius:5px;background:#fff;font-weight:700;color:#00652A;cursor:pointer;}
.apply-afd input{width:18px;height:18px;accent-color:#009D3D;margin:0;}
.apply-afd label:focus-within{outline:3px solid var(--orange);outline-offset:2px;}

/* ---------- FUNCTIEGROEPEN ALS COMPACTE RIJ (12 oktober 2026, optie B uit previews/rolkaarten-opties.html) ----------
   'Welke rol ... past bij jou?' op de afdelingspagina's en 'Ook interessant'
   op de vacaturegroeppagina's. Eerder hadden de rolkaarten de opmaak van een
   vacaturekaart, waardoor een functiegroep op een losse vacature leek. Nu een
   witte rij met een kleine foto, de naam, het aantal vacatures en een pijl;
   de vacaturekaart blijft alleen voor echte vacatures. */
.rol-rijen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.rol-rij{display:flex;align-items:center;gap:16px;min-width:0;min-height:96px;box-sizing:border-box;padding:10px 18px 10px 10px;background:#fff;border:1px solid var(--line,#e6e6e7);border-radius:8px;color:#1d1d1f;text-decoration:none;transition:border-color 150ms ease;}
.rol-rij img{width:110px;height:76px;object-fit:cover;border-radius:5px;flex:none;display:block;}
.rol-rij__tekst{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;}
.rol-rij__naam{font-size:17px;font-weight:700;line-height:1.3;overflow-wrap:break-word;hyphens:manual;}
.rol-rij__aantal{font-size:14px;color:#5f5d5b;min-height:1.4em;}
.rol-rij__pijl{width:20px;height:20px;flex:none;color:var(--green-cta);transition:transform 200ms cubic-bezier(.2,.6,.2,1);}
.rol-rij:hover{border-color:var(--green,#009d3d);}
.rol-rij:hover .rol-rij__pijl{transform:translateX(4px);}
.rol-rij:focus-visible{outline:3px solid var(--green-deep);outline-offset:2px;}
.vg-verwant__links{display:flex;flex-wrap:wrap;gap:4px 32px;margin:20px 0 0;}
.vg-verwant .rol-rijen{margin-top:0;}
@media (max-width:980px){.rol-rijen{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.rol-rijen{grid-template-columns:minmax(0,1fr);}.rol-rij img{width:88px;height:64px;}}
@media (prefers-reduced-motion:reduce){.rol-rij__pijl{transition:none;}}

/* ---------- VACATURES ALS KAARTEN OF ALS LIJST (12 oktober 2026, optie B1 uit previews/weergave-b-opties.html) ----------
   Boven de vacatures op Alle vacatures, de afdelingspagina's en de
   vacaturegroeppagina's twee knoppen: kaarten (standaard) of lijst. site.js
   zet de keuze op <html data-weergave="lijst"> en onthoudt hem per bezoeker.
   De lijst is één wit vlak met dunne lijnen: kleine foto, functie, in grijs
   locatie · werkplek, rechts het salaris en een pijl. Zelfde kaart-HTML, alleen
   andere CSS, dus er hoeft niets dubbel in de pagina te staan. */
.wg-schakel{display:inline-flex;flex:none;border:1.5px solid #ccebd8;border-radius:5px;overflow:hidden;background:#fff;}
.wg-schakel button{display:inline-flex;align-items:center;justify-content:center;width:44px;min-height:44px;padding:0;border:0;background:#fff;color:#00652A;cursor:pointer;}
.wg-schakel button + button{border-left:1.5px solid #ccebd8;}
.wg-schakel button svg{width:18px;height:18px;}
.wg-schakel button:focus-visible{outline:3px solid #00652A;outline-offset:-3px;}
html:not([data-weergave="lijst"]) .wg-schakel [data-weergave-knop="kaart"],
html[data-weergave="lijst"] .wg-schakel [data-weergave-knop="lijst"]{background:#00652A;color:#fff;}
.wg-kop-acties{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
html[data-weergave="lijst"] :is(.vac-cards-grid,.vg-jobs-grid){display:flex !important;flex-direction:column;gap:0;background:#fff;border:1px solid var(--line,#e6e6e7);border-radius:8px;overflow:hidden;}
html[data-weergave="lijst"] .vg-jobs-more-grid{margin-top:12px;}
html[data-weergave="lijst"] :is(.vac-cards-grid,.vg-jobs-grid) > a.vac-card{display:grid;grid-template-columns:72px minmax(0,1fr) auto 24px;grid-template-rows:auto auto;column-gap:18px;row-gap:2px;align-items:center;min-height:0;padding:12px 20px 12px 12px;border:0;border-top:1px solid #eeeeef;border-radius:0;background:#fff;box-shadow:none;transform:none;}
html[data-weergave="lijst"] :is(.vac-cards-grid,.vg-jobs-grid) > a.vac-card:first-of-type{border-top:0;}
html[data-weergave="lijst"] :is(.vac-cards-grid,.vg-jobs-grid) > a.vac-card:hover{background:#f6faf7;box-shadow:none;transform:none;}
html[data-weergave="lijst"] :is(.vac-cards-grid,.vg-jobs-grid) .vac-card__photo{display:contents;}
html[data-weergave="lijst"] :is(.vac-cards-grid,.vg-jobs-grid) .vac-card__photo img{grid-column:1;grid-row:1 / span 2;position:static;width:72px;height:54px;object-fit:cover;border-radius:4px;}
html[data-weergave="lijst"] :is(.vac-cards-grid,.vg-jobs-grid) .vac-card__scrim,html[data-weergave="lijst"] :is(.vac-cards-grid,.vg-jobs-grid) .vac-card__badge,html[data-weergave="lijst"] :is(.vac-cards-grid,.vg-jobs-grid) .vac-card__dept{display:none;}
html[data-weergave="lijst"] :is(.vac-cards-grid,.vg-jobs-grid) .vac-card__title{grid-column:2;grid-row:1;align-self:end;position:static;padding:0;background:none;text-shadow:none;color:#1d1d1f;font-size:17px;}
html[data-weergave="lijst"] :is(.vac-cards-grid,.vg-jobs-grid) .vac-card__strip{grid-column:2;grid-row:2;align-self:start;display:flex;flex-wrap:wrap;gap:0;padding:0;background:none;color:#5f5d5b;font-size:15px;font-weight:400;}
html[data-weergave="lijst"] :is(.vac-cards-grid,.vg-jobs-grid) .vac-card__strip svg{display:none;}
html[data-weergave="lijst"] :is(.vac-cards-grid,.vg-jobs-grid) .vac-card__strip > span + span::before{content:'\00b7';margin:0 8px;color:#9a9a9a;}
html[data-weergave="lijst"] :is(.vac-cards-grid,.vg-jobs-grid) .vac-card__body{display:contents;}
html[data-weergave="lijst"] :is(.vac-cards-grid,.vg-jobs-grid) .vac-card__salary{grid-column:3;grid-row:1 / span 2;margin:0;font-weight:500;color:#414042;font-size:15px;}
html[data-weergave="lijst"] :is(.vac-cards-grid,.vg-jobs-grid) .vac-card__cta{grid-column:4;grid-row:1 / span 2;margin:0;padding:0;border:0;}
html[data-weergave="lijst"] :is(.vac-cards-grid,.vg-jobs-grid) .vac-card__cta > span{display:none;}
html[data-weergave="lijst"] :is(.vac-cards-grid,.vg-jobs-grid) .vac-card__cta svg{width:20px;height:20px;color:var(--green-cta);}
html[data-weergave="lijst"] .vac-cards-grid .vac-os-laatste{flex-direction:row;align-items:center;gap:14px;padding:14px 20px;border-radius:0;transform:none;}
html[data-weergave="lijst"] .vac-cards-grid .vac-os-laatste__ic.ms{width:40px;height:40px;font-size:20px;flex:none;}
html[data-weergave="lijst"] .vac-cards-grid .vac-os-laatste__kop{font-size:17px;}
html[data-weergave="lijst"] .vac-cards-grid .vac-os-laatste__tekst{display:none;}
html[data-weergave="lijst"] .vac-cards-grid .vac-os-laatste__cta{margin:0 0 0 auto;}
@media (max-width:700px){
  html[data-weergave="lijst"] :is(.vac-cards-grid,.vg-jobs-grid) > a.vac-card{grid-template-columns:60px minmax(0,1fr) 20px;grid-template-rows:auto auto auto;column-gap:12px;padding:12px;}
  html[data-weergave="lijst"] :is(.vac-cards-grid,.vg-jobs-grid) .vac-card__photo img{grid-row:1 / span 3;width:60px;height:60px;}
  html[data-weergave="lijst"] :is(.vac-cards-grid,.vg-jobs-grid) .vac-card__salary{grid-column:2;grid-row:3;}
  html[data-weergave="lijst"] :is(.vac-cards-grid,.vg-jobs-grid) .vac-card__cta{grid-column:3;grid-row:1 / span 3;}
  L .vac-cards-grid .vac-os-laatste{flex-wrap:wrap;}
}

/* ---------- SOLLICITEER EENVOUDIG IN TWEE KOLOMMEN (12 oktober 2026, optie C uit previews/solliciteer-opties.html) ----------
   Het formulier op de vacaturepagina en Open sollicitatie was maximaal 760px
   breed met alles onder elkaar (ruim 1000px hoog). Vanaf 981px loopt het
   paneel over de hele breedte: links naam, telefoon en e-mail, rechts de
   motivatie en de uploads, onderaan het akkoord en de knop op één regel.
   Ruimte via margin in plaats van row-gap, zodat een lege rij (geen
   afdelingskeuze, geen foutmelding) geen witruimte geeft. Op de telefoon
   blijft alles onder elkaar. */
@media (min-width:981px){
  #solliciteer .apply-layout .apply-panel{max-width:none;}
  #solliciteer .apply-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;row-gap:0;align-items:start;
    grid-template-areas:"afd afd" "naam motivatie" "tel motivatie" "mail uploads" "fout fout" "akkoord knop" "priv priv";}
  #solliciteer .apply-form > *{margin-bottom:20px;}
  #solliciteer .apply-form > .apply-grid{display:contents;}
  #solliciteer .apply-form .apply-grid > .field{margin-bottom:20px;}
  #solliciteer .apply-form > .apply-afd{grid-area:afd;}
  #solliciteer .apply-form .field:has(#veld-naam){grid-area:naam;}
  #solliciteer .apply-form .field:has(#veld-telefoon){grid-area:tel;}
  #solliciteer .apply-form > .field:has(#veld-email){grid-area:mail;}
  #solliciteer .apply-form > .field:has(#veld-motivatie){grid-area:motivatie;align-self:stretch;display:flex;flex-direction:column;}
  #solliciteer .apply-form > .field:has(#veld-motivatie) textarea{flex:1;min-height:0;}
  #solliciteer .apply-form > .apply-uploads{grid-area:uploads;align-self:end;}
  #solliciteer .apply-form .apply-upload{padding:12px;}
  #solliciteer .apply-form > .err{grid-area:fout;}
  #solliciteer .apply-form > .apply-consent{grid-area:akkoord;align-self:center;}
  #solliciteer .apply-form > .apply-submit-row{grid-area:knop;justify-self:end;align-self:center;}
  #solliciteer .apply-form > .apply-privacy{grid-area:priv;margin-bottom:0;}
}

/* ---------- 404-PAGINA (13 oktober 2026) ---------- */
.nf-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 32px;}
@media (max-width:980px){.nf-links{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.nf-links{grid-template-columns:minmax(0,1fr);}}