:root {
  --bg:#fbfbf8; --bg-op:#ffffff; --bg-diep:#f2f2ec;
  --tekst:#101310; --tekst-zacht:#5a6157; --lijn:#e3e4db; --lijn-sterk:#cfd1c4;
  /* Aparte lijnkleur voor alles wat een bedieningselement begrenst: WCAG 1.4.11 vraagt
     3:1 voor niet-tekst, en de haarlijn hierboven haalt 1,24:1. Die blijft voor
     scheidingslijnen, waar geen contrasteis geldt. */
  --lijn-bediening:#8d9186;
  --accent:#3f6d16; --accent-vlak:#d6f24a; --op-accent:#161c08; --accent-gloed:rgba(190,232,60,.35);
  /* Eén kleur voor voorbehoud. Het palet kende groen (goed, gekozen) en grijs
     (neutraal) en had daarmee geen manier om "dit is niet wat je zocht" te zeggen.
     Amber ligt ver genoeg van het groen om niet als variant erop te lezen. */
  --signaal:#8a5a00;
  --vinkje-acc:var(--vinkje); --focusring:var(--accent);
  --schaduw:0 1px 2px rgba(16,19,16,.05), 0 8px 24px -16px rgba(16,19,16,.25);
  --schaduw-op:0 2px 4px rgba(16,19,16,.06), 0 16px 40px -20px rgba(16,19,16,.35);
  --radius:12px; --radius-klein:8px; --radius-pil:99px;
  --balk-h:68px;
  /* Wat er bovenaan blijft staan. Het zoekblok komt er vanaf 48rem bij; zonder dat
     in deze maat parkeerde Shift+Tab het gefocuste element erachter. */
  --vast-h:calc(var(--balk-h) + .5rem);
  --maat-lopend:56ch;                    /* één maat voor lopende tekst; zie DESIGN.md */

  /* Ruimte in acht sporten. Voor deze schaal stonden er zestig losse rem-waarden in
     dit bestand, de meeste één of twee keer gebruikt, en dan is er geen ritme meer
     om tegen af te wijken. */
  --r1:.25rem; --r2:.5rem; --r3:.75rem; --r4:1rem;
  --r5:1.5rem; --r6:2rem; --r7:3rem; --r8:4.5rem;

  /* Corps in vijf sporten. Twaalf groottes tussen 12,5 en 15,2 px met stappen van één
     procent leest niet als hiërarchie maar als toeval. */
  --t-micro:.78rem; --t-klein:.88rem; --t-bediening:.93rem;
  --t-basis:1rem; --t-kaart:1.25rem;

  /* Drie vetgraden, en geen tien. Gemeten met dezelfde tekst per graad: Segoe UI
     Variable rendert 520 tot en met 640 identiek, en Helvetica Neue, Noto Sans en de
     kale sans-serif renderen 400 tot en met 520 identiek én 560 tot en met 700
     identiek. Alles daartussen bestond alleen in deze stylesheet. */
  --gw:400; --gw-half:600; --gw-vet:700;
  --serif:Charter,"Bitstream Charter",Cambria,Georgia,serif;
  --vinkje:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.4 8.6 11 1.8' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --vinkje-op:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.4 8.6 11 1.8' fill='none' stroke='%23d6f24a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pijl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235a6157' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --pijl-actief:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23161c08' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
  --bg:#0c0e0b; --bg-op:#151813; --bg-diep:#1c201a;
  --tekst:#eef1ea; --tekst-zacht:#9aa294; --lijn:#252a22; --lijn-sterk:#3a4034;
  --lijn-bediening:#6c7266;
  /* In licht liggen accenttekst en accentvlak 4,88:1 uit elkaar; in donker hadden ze
     dezelfde waarde en was het accent even luid als de hoofdtekst. Nu 8,30:1 op de
     achtergrond, en de vulkleur blijft de felle. */
  --accent:#8fb733; --accent-vlak:#c9f24d; --op-accent:#111509; --accent-gloed:rgba(143,183,51,.28);
  --signaal:#e0a33a;
  --vinkje-acc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.4 8.6 11 1.8' fill='none' stroke='%23111509' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --focusring:var(--accent);
  /* Zwart op #0c0e0b heeft geen ruimte om diepte te maken: gemeten deed de
     schaduw in donker een kwart van zijn lichte werk. Een lichtlijn wel. */
  --schaduw:inset 0 1px 0 rgba(238,241,234,.045), 0 10px 30px -18px rgba(0,0,0,.9);
  --schaduw-op:inset 0 1px 0 rgba(238,241,234,.075), 0 20px 50px -24px rgba(0,0,0,1);
  --pijl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%239aa294' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0c0e0b; --bg-op:#151813; --bg-diep:#1c201a;
    --tekst:#eef1ea; --tekst-zacht:#9aa294; --lijn:#252a22; --lijn-sterk:#3a4034;
    --lijn-bediening:#6c7266;
    /* In licht liggen accenttekst en accentvlak 4,88:1 uit elkaar; in donker hadden ze
     dezelfde waarde en was het accent even luid als de hoofdtekst. Nu 8,30:1 op de
     achtergrond, en de vulkleur blijft de felle. */
  --accent:#8fb733; --accent-vlak:#c9f24d; --op-accent:#111509; --accent-gloed:rgba(143,183,51,.28);
  --signaal:#e0a33a;
    --vinkje-acc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.4 8.6 11 1.8' fill='none' stroke='%23111509' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --focusring:var(--accent);
  --vinkje-acc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.4 8.6 11 1.8' fill='none' stroke='%23111509' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --focusring:var(--accent);
    /* Zwart op #0c0e0b heeft geen ruimte om diepte te maken: gemeten deed de
       schaduw in donker een kwart van zijn lichte werk. Een lichtlijn wel. */
    --schaduw:inset 0 1px 0 rgba(238,241,234,.045), 0 10px 30px -18px rgba(0,0,0,.9);
    --schaduw-op:inset 0 1px 0 rgba(238,241,234,.075), 0 20px 50px -24px rgba(0,0,0,1);
    --pijl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%239aa294' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}

*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none !important; }   /* wint ook van display:flex op dezelfde klasse */
html {
  -webkit-text-size-adjust:100%;
  color-scheme:light;                    /* scrollbars en systeemcontrols kleuren mee */
  touch-action:manipulation;             /* geen tikvertraging van 300 ms */
  -webkit-tap-highlight-color:transparent;
}
:root[data-theme="dark"] { color-scheme:dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme:dark; } }

body {
  margin:0; background:var(--bg); color:var(--tekst);
  font-family:"Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,
              "Helvetica Neue","Noto Sans",sans-serif;
  font-size:16px; line-height:1.55;
  font-feature-settings:"ss01","cv11","kern";
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}

/* --rand is de zijmarge van de pagina; de filterrij op een smal scherm trekt zich er
   doorheen tot de schermrand (zie .filters onder 60rem). */
.binnen { --rand:max(clamp(1rem,4vw,2rem), env(safe-area-inset-left), env(safe-area-inset-right));
          max-width:74rem; margin-inline:auto; padding-inline:var(--rand); }
.smal { max-width:46rem; }
.getal { font-variant-numeric:tabular-nums; }
.punt { color:var(--tekst-zacht); }
.label { display:inline-flex; align-items:center; padding:.1rem .55rem; font-size:.78rem;
         background:var(--bg-diep); border-radius:99px; }
/* Het enige label dat iets zegt dat de klik kan veranderen, was het enige label zonder
   vlak en daarmee het zwakste op de kaart. */
.label-let-op { background:transparent; border:1px solid var(--signaal); color:var(--signaal); }
.tag-breed, .tag-meer-breed { display:none; }
.salaris { color:var(--accent); font-weight:var(--gw-half); font-variant-numeric:tabular-nums; }

/* Links in lopende tekst: tekstkleur met onderstreping. Het accent blijft zo schaars. */
a { color:inherit; text-underline-offset:3px; text-decoration-thickness:1px; }
a:focus-visible, input:focus-visible, button:focus-visible, select:focus-visible,
summary:focus-visible {
  outline:2px solid var(--accent); outline-offset:3px; border-radius:6px;
}
.verborgen { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Sticky balk zou anders over het doel van een skiplink of ankersprong heen staan. */
#lijst, #inhoud, #teller, li.kaart, .kaart h2 a, .kaart h3 a,
input[type="search"], .filterlade > summary, .keuzemenu > summary, .keuzepil {
  scroll-margin-top:var(--vast-h); }
.overslaan:focus { position:static; width:auto; height:auto; clip:auto;
  display:inline-block; margin:.5rem; padding:.6rem .9rem;
  background:var(--accent-vlak); color:var(--op-accent); border-radius:8px; }

/* --- merk ------------------------------------------------------------- */
.merk { display:inline-flex; align-items:center; gap:.55rem; min-height:44px;
        text-decoration:none; color:var(--tekst); }
.merk svg { width:1.75rem; height:1.75rem; flex:0 0 auto; }
.merk .naam { font-size:1.32rem; font-weight:var(--gw-vet); line-height:1.2; letter-spacing:-.028em; }

/* --- kopbalk ----------------------------------------------------------- */
.balk { position:sticky; top:0; z-index:30; min-height:var(--balk-h);
        display:flex; align-items:center;
        background:color-mix(in srgb, var(--bg) 88%, transparent);
        backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
        border-bottom:1px solid var(--lijn); padding-block:.55rem; }
.balk .binnen { position:relative; display:flex; align-items:center; gap:var(--r2); width:100%; }
.balk .merk { margin-right:auto; flex-shrink:0; }
.balk .knop { font-size:var(--t-bediening); }
/* De ruimte staat al in de HTML. Het aanzetten van bewaren/thema verplaatst niets. */
.balk button[hidden] { display:inline-flex !important; visibility:hidden; }
.balkbewaard { flex-shrink:0; width:6rem; }
.hoofdmenu { flex-shrink:0; width:4.5rem; min-height:44px; }
/* Ook vóór de parser de summary heeft gelezen reserveert details zijn uiteindelijke
   maat; zijn tijdelijke native opschrift hoeft niet in beeld te komen. */
.hoofdmenu:not(:has(> summary)) { visibility:hidden; }
.hoofdmenu > summary { display:flex; align-items:center; justify-content:center;
  min-height:44px; width:4.5rem; padding:var(--r2); gap:var(--r2);
  font-size:var(--t-bediening); cursor:pointer; list-style:none; border-radius:var(--radius-klein); }
.hoofdmenu > summary::-webkit-details-marker { display:none; }
.hoofdmenu > summary::after { content:""; width:.7rem; height:.5rem;
  background:var(--pijl) no-repeat center / contain; }
.hoofdmenu[open] > summary::after { transform:rotate(180deg); }
.hoofdmenu > summary:hover, .hoofdmenu[open] > summary { background:var(--bg-diep); }
.hoofdmenu > summary:active { background:var(--lijn); }
#navigatiePaneel { position:absolute; top:calc(100% + .55rem); right:var(--rand); left:var(--rand);
  padding:var(--r3); background:var(--bg-op); border:1px solid var(--lijn-bediening);
  border-radius:var(--radius); box-shadow:var(--schaduw-op);
  max-height:calc(100dvh - var(--balk-h) - var(--r4)); overflow-y:auto; }
.hoofdlinks { display:flex; flex-direction:column; gap:var(--r1); }
.hoofdlinks a { display:flex; align-items:center; min-height:44px; padding:var(--r2) var(--r3);
  text-decoration:none; font-size:var(--t-bediening); white-space:nowrap; border-radius:var(--radius-klein); }
.hoofdlinks a:hover { background:var(--bg-diep); }
.hoofdlinks a:active { background:var(--lijn); }
.hoofdlinks a[aria-current="page"] { font-weight:var(--gw-half); text-decoration:underline;
  text-decoration-thickness:2px; text-underline-offset:6px; }
.menuhulpen { display:flex; align-items:center; gap:var(--r2); margin-top:var(--r3);
  padding-top:var(--r3); border-top:1px solid var(--lijn); }
.balk .themaicoon { min-width:5.5rem; border-color:transparent; background:transparent;
  color:var(--tekst-zacht); }
.balk .themaicoon:hover { background:var(--bg-diep); color:var(--tekst); }
/* Op de vacaturepagina blijft Terug de hoofdweg, ook op een breed scherm. */
@supports selector(details::details-content) {
@media (min-width:60rem) {
  .balk:not(.balk-detail) .hoofdmenu { display:contents; }
  .balk:not(.balk-detail) .hoofdmenu > summary { display:none; }
  .balk:not(.balk-detail) .hoofdmenu::details-content { display:contents; content-visibility:visible; }
  .balk:not(.balk-detail) #navigatiePaneel { position:static; display:flex; align-items:center;
    flex:1; justify-content:space-between; padding:0; border:0; box-shadow:none; background:none; overflow:visible; }
  .balk:not(.balk-detail) .hoofdlinks { flex-direction:row; gap:0; }
  .balk:not(.balk-detail) .hoofdlinks a { padding-inline:var(--r2); }
  .balk:not(.balk-detail) .menuhulpen { margin:0; padding:0; border:0; }
  .balk:not(.balk-detail) .balkbewaard { order:2; }
  .balk:not(.balk-detail) .merk { margin-right:var(--r4); }
}
}
@media (max-width:23rem) {
  .balk .binnen { gap:.5rem; }
  .merk .naam { font-size:1.08rem; }
  .balk .knop { padding-inline:.6rem; font-size:.92rem; }
  .hoofdmenu, .hoofdmenu > summary { width:4rem; }
  .hoofdmenu > summary { padding-inline:var(--r1); gap:var(--r1); }
}

/* --- knoppen ---------------------------------------------------------- */
.knop {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem; text-align:center;
  min-height:44px; padding:.6rem 1rem; cursor:pointer; font:inherit; font-weight:var(--gw-half);
  color:var(--tekst); background:var(--bg-op); text-decoration:none;
  border:1px solid var(--lijn-bediening); border-radius:10px;
  transition:border-color .16s ease, color .16s ease, background-color .16s ease, transform .16s ease;
}
.knop:hover { border-color:var(--tekst-zacht); transform:translateY(-1px); }
.knop:active { transform:translateY(0); background:var(--bg-diep); }
.knop[aria-pressed="true"] { background:var(--accent-vlak); border-color:transparent; color:var(--op-accent); }
/* De vulling van deze knop haalt 1,23:1 met de paginakleur: in grijswaarden of bij fel
   licht versmelt de vorm met het papier. De rand in --accent haalt 4,88:1. */
.knop-hoofd {
  background:var(--accent-vlak); border-color:var(--accent); color:var(--op-accent);
  font-size:1.02rem; font-weight:var(--gw-half); padding:.85rem 1.5rem; border-radius:var(--radius);
  box-shadow:0 0 0 0 var(--accent-gloed);
}
.knop-hoofd:hover { box-shadow:0 0 0 6px var(--accent-gloed); transform:translateY(-1px); }
.knop-hoofd:active { transform:translateY(0); box-shadow:0 0 0 3px var(--accent-gloed); }
@media (prefers-reduced-motion: reduce) {
  .knop, .knop-hoofd, .zoekdoos .zoekknop, .keuzemenu > summary::after,
  .filterlade > summary::after { transition:none; }
  .knop:hover, .knop-hoofd:hover, .zoekdoos .zoekknop:active { transform:none; }
}

/* --- vacaturekaart ----------------------------------------------------- */
/* Staat in de gedeelde stijl omdat het overzicht en de zusterlijst op de detailpagina
   dezelfde kaart gebruiken. Titels zijn h2 op het overzicht en h3 in de zusterlijst, dus
   beide worden aangesproken. */
/* De ruimte tússen twee vacatures moet groter zijn dan de ruimte erbinnen, anders doet
   nabijheid geen groeperingswerk en moet de rand het alleen doen. Gemeten was het
   11,2 px tussen en 19,4 px binnen; nu 24 px tussen en 17 px binnen. */
ol.lijst { list-style:none; margin:0; padding:0; display:grid; gap:var(--r5); }
li.kaart {
  position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--r2) var(--r5);
  padding:var(--r4) var(--r5); background:var(--bg-op);
  border:1px solid var(--lijn-sterk); border-radius:var(--radius);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
li.kaart:hover { border-color:var(--lijn-bediening); box-shadow:var(--schaduw-op); transform:translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  li.kaart { transition:none; }
  li.kaart:hover { transform:none; }
}
.kaart h2, .kaart h3 { margin:0; font-size:var(--t-kaart); font-weight:var(--gw-half); line-height:1.28;
     letter-spacing:-.015em; overflow-wrap:anywhere; text-wrap:pretty;
     padding-right:2.6rem; }
/* line-height 1.32 op 1.1rem gaf een raakvlak van 23 px, één onder de 24 die WCAG 2.5.8
   vraagt. De uitzondering voor doelen met ruimte eromheen gaat hier niet op, want de
   bewaarknop staat ernaast. */
.kaart h2 a, .kaart h3 a { color:inherit; text-decoration:none;
                           display:inline-block; min-height:24px; }
/* De hele kaart is klikbaar, maar de link blijft de link: goed voor Cmd-klik en toetsenbord. */
.kaart h2 a::after, .kaart h3 a::after { content:""; position:absolute; inset:0;
     border-radius:var(--radius); }
.kaart h2 a:hover, .kaart h3 a:hover { color:var(--accent); }

.meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--r1) var(--r2); margin:.3rem 0 0;
        color:var(--tekst-zacht); font-size:var(--t-bediening); min-width:0; }
/* Feiten zijn geen filterknoppen. Eén corps en middots vervangen de losse pilvormen.
   De kleur voor een tussenpersoon of ontbrekende tekst blijft een voorbehoud. */
.kaart .meta { display:block; margin-top:var(--r2); }
.kaart .meta > span { display:inline; white-space:nowrap; }
.kaart .meta > span + span::before { content:"\00b7"; padding-inline:.4em; color:var(--tekst-zacht); }
.kaart .meta .punt { display:none; }
.kaart .label { font:inherit; background:none; border:0; border-radius:0; padding:0; }
/* Een kenmerk schuift als geheel door, nooit midden in "32-40 uur per week" (gezien op
   375 px, 14 oktober 2026). Alleen de werkgeversnaam op zijn eigen regel mag breken. */
.kaart .meta .werkgever { display:block; white-space:normal; }
.kaart .meta .werkgever + span::before { content:none; }
.werkgever { color:var(--tekst); font-weight:var(--gw); overflow-wrap:anywhere; }
.samenvatting { margin:.45rem 0 0; color:var(--tekst-zacht); font-size:var(--t-bediening);
                grid-column:1; max-width:var(--maat-lopend); overflow-wrap:anywhere;
                text-wrap:pretty;
                display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* De rand van de kaart draagt de twee gegevens die je van boven naar beneden wilt kunnen
   aflopen zonder te lezen: waar het is en wanneer het geplaatst is. Daarvóór stond hier
   alleen de plaats, op 9 van de 40 kaarten leeg, en gemeten 315 px van de rest van de
   kenmerken vandaan. Onder 46rem staan beide gewoon in de metaregel mee. */
.rand { display:none; }
/* Onder 46rem is er geen rand en is de samenvatting het enige wat de kaart nog vertelt.
   Op 390 px werd 39 van de 40 samenvattingen op twee regels afgekapt; drie regels op de
   leesmaat die voor een telefoon geldt maakt er weer een zin van. */
@media (max-width:45.99rem) {
  li.kaart { padding:var(--r4); }
  .samenvatting { -webkit-line-clamp:3; font-size:1rem; }
  .meta { font-size:.95rem; }
}
/* Onder 46rem is de kaart eenkoloms; een knop in de rasterstroom kreeg daar een eigen
   regel tussen de kenmerken en de samenvatting, rekte over de volle breedte en zette
   het icoon in het midden. Vandaar absoluut in de hoek, de plek waar een bladwijzer
   hoort. Vanaf 46rem neemt het raster het weer over (zie hieronder). */
.bewaar { position:absolute; top:.5rem; right:.5rem; z-index:1;
          align-self:start; min-width:44px; min-height:44px;
          display:grid; place-items:center; background:none; border:1px solid transparent;
          border-radius:10px; cursor:pointer; color:var(--tekst-zacht); }
.kaart .bewaar[hidden] { display:grid !important; visibility:hidden; }
.bewaar:hover { color:var(--accent); background:var(--bg-diep); }
.bewaar svg { width:1.15rem; height:1.15rem; fill:none; stroke:currentColor; stroke-width:1.8; }
.bewaar[aria-pressed="true"] { color:var(--accent); }
.bewaar[aria-pressed="true"] svg { fill:currentColor; }

@media (min-width:46rem) {
  li.kaart { grid-template-columns:minmax(0,1fr) auto; align-items:start; }
  .kaart > .inhoud { grid-column:1; grid-row:1; }
  .rand { display:block; grid-column:2; grid-row:1; justify-self:end; text-align:right;
          min-width:6rem; padding-top:.2rem; color:var(--tekst-zacht);
          font-size:var(--t-bediening); font-variant-numeric:tabular-nums; }
  .rand .plek { display:block; color:var(--tekst); overflow-wrap:anywhere; }
  .rand .datum { display:block; margin-top:.1rem; font-size:var(--t-klein); }
  .samenvatting { grid-column:1; grid-row:2; }
  .bewaar { position:static; grid-column:2; grid-row:2; justify-self:end; }
  .kaart h2, .kaart h3 { padding-right:0; }
  .kaart .meta .plaats, .kaart .meta .datumregel { display:none; }
  .kaart .meta .plaats + span::before, .kaart .meta .datumregel + span::before { content:none; }
  .tag-breed, .tag-meer-breed { display:inline-flex; }
  .tag-meer-smal { display:none; }
}

/* De paginering had geen enkele regel: "Pagina 1 van 212" stond als kale alinea onder
   de lijst met de knop eronder op een eigen regel. */
.paginering { display:flex; flex-wrap:wrap; align-items:center; gap:var(--r3);
              margin:var(--r6) 0 0; padding-top:var(--r5);
              border-top:1px solid var(--lijn); }
.paginering p { margin:0; margin-right:auto; color:var(--tekst-zacht);
                font-size:var(--t-klein); font-variant-numeric:tabular-nums; }

footer { border-top:1px solid var(--lijn); margin-top:4rem; padding:2.5rem 0 4rem; color:var(--tekst-zacht); }
footer p { max-width:var(--maat-lopend); font-size:.92rem; }
/* De links naar de verplichte pagina's. Rij met wrap in plaats van een lijst, want het zijn
   er vier en ze horen op mobiel naast elkaar te blijven passen. De regelhoogte houdt het
   raakvlak op 44 px zonder een expliciete hoogte, ook waar twee links onder elkaar vallen. */
.kruimels { font-size:.9rem; color:var(--tekst-zacht); margin-bottom:1.2rem; }
.kruimels a { padding:.4rem 0; }
.kruimels span[aria-hidden] { margin:0 .35rem; opacity:.6; }
.voetlinks { display:flex; flex-wrap:wrap; gap:.35rem 1.4rem; margin-top:1.6rem; }
.voetlinks a:hover, .kruimels a:hover { color:var(--tekst); text-decoration-thickness:2px; }
.merk:hover .naam { text-decoration:underline; text-underline-offset:4px; }
.voetlinks a { font-size:var(--t-bediening); padding:.6rem 0; text-decoration-thickness:1px;
               text-underline-offset:.2em; }
/* --- zoekdoos ----------------------------------------------------------- */
/* Staat in de gedeelde stijl en niet in het overzichtssjabloon, want de 404, de 410 en de
   500 dragen dezelfde doos. Zonder deze regels rendert het loepje daar als een zwarte
   cirkel van 544 px en is het invoerveld een kaal browserveld. */
.zoekdoos { display:flex; flex-wrap:wrap; gap:var(--r2); padding:.45rem; background:var(--bg-op);
            border:1px solid var(--lijn-bediening); border-radius:16px; box-shadow:var(--schaduw); }
/* Het functieveld weegt dubbel: de vraag is bijna altijd langer dan de plaatsnaam. */
.veld { position:relative; flex:2 1 16rem; min-width:0; }
.veld + .veld { flex:1 1 10rem; }
/* De zoekknop hoort in de doos en niet eronder: samen zijn het één bediening. Hij krimpt
   niet mee, want een knop die smaller wordt dan zijn opschrift is geen knop meer. */
.zoekdoos .zoekknop { flex:0 0 auto; align-self:stretch; min-height:46px; padding:.65rem 1.5rem;
  font:inherit; font-size:var(--t-bediening); font-weight:var(--gw-half); cursor:pointer;
  color:var(--op-accent); background:var(--accent-vlak); border:0; border-radius:var(--radius);
  transition:box-shadow .15s ease, transform .15s ease; }
.zoekdoos .zoekknop:hover { box-shadow:0 0 0 5px var(--accent-gloed); }
.zoekdoos .zoekknop:active { transform:translateY(1px); }
.veld svg { position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
            width:1.05rem; height:1.05rem; stroke:var(--tekst-zacht); fill:none; stroke-width:1.9;
            pointer-events:none; }
input[type="search"] {
  width:100%; min-height:46px; padding:.65rem .9rem .65rem 2.6rem;
  font:inherit; font-size:1rem; color:var(--tekst); background:transparent;
  border:0; border-radius:var(--radius); -webkit-appearance:none; appearance:none;
}
input[type="search"]:focus { background:var(--bg-diep); }
input[type="search"]:focus:not(:focus-visible) { outline:none; }
input[type="search"]::placeholder { color:var(--tekst-zacht); opacity:1; }
/* Twee raakvlakken van bijna 500 px zonder zichtbare grens laten je gokken waar je klikt.
   Zodra de doos op één regel staat, scheidt een haarlijn in de bedieningskleur ze. */
@media (min-width:48rem) {
  .zoekdoos .veld + .veld::before { content:""; position:absolute; left:calc(-1 * var(--r2) / 2);
    top:.55rem; bottom:.55rem; width:1px; background:var(--lijn-bediening); }
}
/* Op de smalste schermen valt de knop toch al op een eigen regel; dan mag hij die vullen. */
@media (max-width:23rem) { .zoekdoos .zoekknop { flex:1 1 100%; } }

.vierdoos { max-width:34rem; margin:var(--r5) 0; }
footer h2 { font-size:.85rem; letter-spacing:.09em; text-transform:uppercase;
            color:var(--tekst); margin:0 0 .5rem; }

/* --- landingspagina --------------------------------------------------- */

/* Een landingspagina staat in de zoekstand, want er is een filter actief, maar hij houdt
   zijn kop: dat is de hele reden dat de pagina bestaat. */
/* Twee klassen, en dat is geen slordigheid. `body.zoekt .hero { display:none }` staat in
   het eigen stijlblok van INDEX en komt dus ná deze regel; bij gelijke specificiteit wint
   de laatste. Met een klasse erbij wint deze, waar hij ook staat. */
body.zoekt.landing .hero { display:block; padding-bottom:var(--r4); }

/* De H1 van het overzicht is een leus van twee woorden en staat op `max-width:16ch` in een
   corps tot 3,4rem. Een landingskop is een zin: "Techniek & engineering in Rotterdam" liep
   daardoor over drie regels en duwde de eerste vacature van het scherm. Een klasse wint van
   een elementselector, dus deze regel overschrijft die van h1 waar hij ook staat. */
.landkop { margin:0 0 var(--r3); font-size:clamp(1.55rem,3.6vw,2.3rem); max-width:26ch; }
.landintro { margin:0; max-width:var(--maat-lopend); color:var(--tekst-zacht);
  font-size:clamp(1rem,2.2vw,1.08rem); text-wrap:pretty; }

/* De cijfers die deze pagina eigen maken. Tabulaire cijfers zodat de getallen onder
   elkaar uitlijnen; dat is dezelfde keuze als bij het salaris op een kaart. */
.landcijfers { display:flex; flex-wrap:wrap; gap:var(--r3) var(--r6);
  margin:var(--r5) 0 0; padding:0; list-style:none; }
.landcijfers div { min-width:8rem; }
.landcijfers b { display:block; font-variant-numeric:tabular-nums;
  font-size:clamp(1.15rem,2.6vw,1.45rem); font-weight:var(--gw-vet); line-height:1.15; }
.landcijfers span { display:block; font-size:var(--t-klein); color:var(--tekst-zacht); }

.landuitleg { margin:var(--r4) 0 0; max-width:var(--maat-lopend);
  font-size:var(--t-bediening); color:var(--tekst-zacht); }
.landuitleg strong { color:var(--tekst); font-weight:var(--gw-half); }

/* De buurpagina's. Pillen en geen lijst: het zijn navigatieknoppen en geen zinnen. */
.landlinks { display:flex; flex-wrap:wrap; gap:var(--r2); margin:var(--r4) 0 0;
  padding:0; list-style:none; }
.landlinks a { display:inline-block; padding:.3rem .7rem; border:1px solid var(--lijn-sterk);
  border-radius:var(--radius-pil); font-size:var(--t-klein); text-decoration:none;
  color:var(--tekst); }
.landlinks a:hover { border-color:var(--accent); color:var(--accent); }
.landlinks a:focus-visible { outline:2px solid var(--focusring); outline-offset:2px; }
.landlinks .getal { color:var(--tekst-zacht); font-variant-numeric:tabular-nums; }

/* Redactionele inhoud: dezelfde leesmaat, haarlijnen en cijfers als de vacaturelijst. */
.redactie { min-width:0; max-width:100%; overflow-wrap:anywhere; }
#over-dit-werk, #over-deze-werkgever { margin:var(--r7) 0; padding-top:var(--r6); border-top:1px solid var(--lijn);
  scroll-margin-top:var(--vast-h); }
.redactie h2 { font-family:var(--serif); font-size:1.5rem; line-height:1.25;
  margin:var(--r6) 0 var(--r3); }
.redactie h3 { font-size:1.08rem; line-height:1.35; margin:var(--r5) 0 var(--r2); }
.redactie p, .redactie li { max-width:var(--maat-lopend); }
.redactie p { margin:var(--r3) 0; }
.redactie ul, .redactie ol { padding-left:var(--r5); }
.redactie-tabelrol { min-width:0; max-width:100%; overflow-x:auto; margin:var(--r5) 0;
  overscroll-behavior-inline:contain; }
.redactie-tabelrol:focus-visible { outline:2px solid var(--focusring); outline-offset:3px; }
.redactie-tabelrol table { border-collapse:collapse; width:100%; min-width:32rem;
  max-width:none; margin:0; font-size:var(--t-klein); font-variant-numeric:tabular-nums; }
.redactie-tabelrol th, .redactie-tabelrol td { padding:var(--r3); text-align:left;
  overflow-wrap:normal;
  vertical-align:top; border-bottom:1px solid var(--lijn); }
.redactie-tabelrol th { font-weight:var(--gw-half); }
.redactie-tabelrol .getal { text-align:right; }
.redactie-tabelrol caption { text-align:left; padding-bottom:var(--r3); color:var(--tekst-zacht); }
.redactie-datum { font-size:var(--t-klein); color:var(--tekst-zacht); font-variant-numeric:tabular-nums; }
.incijfers { max-width:var(--maat-lopend); }
.incijfers dl { margin:0; }
.incijfers dl > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--r3);
  padding:var(--r3) 0; border-bottom:1px solid var(--lijn); }
.incijfers small { display:block; font-size:var(--t-klein); color:var(--tekst-zacht); }
.incijfers dd { margin:0; font-weight:var(--gw-half); font-variant-numeric:tabular-nums; }
/* Een vraag met meer antwoorden (opleiding, werktijden) zet de reeks onder de kop. */
.incijfers dl > div.groep { grid-template-columns:minmax(0,1fr); gap:var(--r1); }
.redactie-faq { max-width:var(--maat-lopend); }
.redactie-faq details { border-bottom:1px solid var(--lijn); }
.redactie-faq summary { min-height:44px; padding:var(--r3) 0; cursor:pointer; font-weight:var(--gw-half); }
.redactie-faq summary:hover { text-decoration:underline; }
.redactie-faq details p:last-child { margin-bottom:var(--r5); }
/* Een of twee vervolglinks zijn geen opsomming; zonder bolletje, naast elkaar. */
.redactie-links { list-style:none; padding:0; margin:var(--r4) 0 0; display:flex;
  flex-wrap:wrap; gap:0 var(--r5); }
.redactie-links a { display:inline-block; min-height:44px; padding-block:var(--r2); }
/* Bedragen breken nooit tussen het euroteken en het getal. */
.redactie-tabelrol td.getal { white-space:nowrap; }
/* De salarismonitor op een telefoon: vijf kolommen passen niet in 375 px, en een tabel
   die opzij schuift toonde er drie. Onder 40rem wordt elke rij een blokje met de
   kolomnaam per cel; de ARIA-rollen in de HTML houden het voor een schermlezer een tabel. */
@media (max-width:40rem) {
  .redactie-tabelrol .monitortabel { min-width:0; }
  .redactie-tabelrol .monitortabel thead { position:absolute; width:1px; height:1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .redactie-tabelrol .monitortabel, .redactie-tabelrol .monitortabel tbody,
  .redactie-tabelrol .monitortabel tr, .redactie-tabelrol .monitortabel th,
  .redactie-tabelrol .monitortabel td, .redactie-tabelrol .monitortabel caption { display:block; }
  .redactie-tabelrol .monitortabel tr { padding:var(--r3) 0; border-bottom:1px solid var(--lijn); }
  .redactie-tabelrol .monitortabel th, .redactie-tabelrol .monitortabel td {
    border-bottom:0; padding:var(--r1) 0; }
  .redactie-tabelrol .monitortabel td { display:flex; justify-content:space-between;
    gap:var(--r3); }
  .redactie-tabelrol .monitortabel td::before { content:attr(data-label);
    color:var(--tekst-zacht); white-space:normal; text-align:left; }
}
.gidsenlijst { list-style:none; padding:0; }
.gidsenlijst > li { max-width:var(--maat-lopend); padding-bottom:var(--r5); border-bottom:1px solid var(--lijn); }

/* Het overzicht van alle landingspagina's. */
.landgroep { margin:0 0 var(--r6); }
.landgroep h2 { font-family:var(--serif); font-size:1.3rem; margin:0 0 var(--r3); }
/* /vakgebieden: gewone lijsten op alfabet in kolommen, steden per beginletter
   (eigenaar, 14 oktober 2026). Geen pillen: dit is een register, geen filter. */
.landgroep h3 { font-size:1rem; margin:var(--r5) 0 var(--r1); padding-bottom:var(--r1);
  border-bottom:1px solid var(--lijn); scroll-margin-top:calc(var(--vast-h, 4.5rem) + var(--r3)); }
.alfalijst { list-style:none; padding:0; margin:var(--r3) 0 0; columns:3 15rem;
  column-gap:var(--r6); }
/* Naam links, aantal rechts op dezelfde regel: een lange naam breekt, het getal
   blijft in zijn kolom staan. */
.alfalijst li { display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--r3); break-inside:avoid; padding:.15rem 0; }
.alfalijst li .getal { flex-shrink:0; }
.alfalijst a { display:inline-block; min-height:24px; line-height:1.6; }
.werkgeversregister .alfalijst a { min-height:44px; overflow-wrap:anywhere; }
.werkgeversregister h2 { scroll-margin-top:calc(var(--vast-h, 4.5rem) + var(--r3)); }
.werkgeversregister .letterrij a { min-width:44px; min-height:44px; }
.alfalijst .getal { color:var(--tekst-zacht); font-size:var(--t-klein);
  font-variant-numeric:tabular-nums; }
.letterrij { display:flex; flex-wrap:wrap; gap:var(--r1); margin:var(--r3) 0 0; }
.letterrij a { display:inline-flex; align-items:center; justify-content:center;
  min-width:2.25rem; min-height:2.25rem; border:1px solid var(--lijn-sterk);
  border-radius:var(--radius-klein); text-decoration:none; }
.letterrij a:hover { border-color:var(--accent); color:var(--accent); }
.letterrij a:focus-visible { outline:2px solid var(--focusring); outline-offset:2px; }

/* --- colofon en advertentie ------------------------------------------- */

/* Het identiteitsblok onder de tekstpagina's: naam, adres, KvK, btw-id. Een
   definitielijst en geen tabel, want het zijn paren en geen raster. */
.colofon { display:grid; grid-template-columns:max-content 1fr; gap:.35rem var(--r4);
  margin:var(--r4) 0 0; max-width:var(--maat-lopend); font-size:var(--t-klein); }
.colofon dt { color:var(--tekst-zacht); }
.colofonregel { max-width:var(--maat-lopend); }
/* Het e-mailadres onderaan de voorwaarden: er voor wie het zoekt, verder onopvallend. */
.mailregel { margin-top:var(--r5); max-width:var(--maat-lopend); font-size:var(--t-klein);
  color:var(--tekst-zacht); }
.colofon dd { margin:0; }
@media (max-width:26rem) {
  .colofon { grid-template-columns:1fr; gap:0; }
  .colofon dt { margin-top:var(--r3); }
}

/* Een knop die eruitziet als een link. Alleen in lopende tekst, waar een echte knop het
   ritme van de zin zou breken maar het element wel een knop moet zijn. */
.tekstknop { background:none; border:0; padding:0; font:inherit; color:var(--accent);
  text-decoration:underline; cursor:pointer; }
.tekstknop:focus-visible { outline:2px solid var(--focusring); outline-offset:2px; }

/* De advertentie staat in een eigen kader met een opschrift erboven. Reclame moet
   herkenbaar zijn (art. 6:194 BW), en Google's beleid vraagt hetzelfde: een advertentie
   mag niet voor inhoud kunnen doorgaan.

   De hoogte is vooraf gereserveerd. Zonder die reservering springt de pagina op het
   moment dat het blok binnenkomt, en dat is precies de layoutverschuiving waar de rest
   van dit bestand zorgvuldig in is. */
.advertentie { margin:var(--r6) auto var(--r2); max-width:var(--maat-lopend);
  padding-top:var(--r2); border-top:1px solid var(--lijn); }
.advertentie-kop { display:block; font-size:var(--t-micro); letter-spacing:.09em;
  text-transform:uppercase; color:var(--tekst-zacht); margin-bottom:var(--r2); }
.advertentie ins { display:block; min-height:100px; }
@media (min-width:48rem) { .advertentie ins { min-height:250px; } }
/* Een blok dat Google niet vult (tijdens de beoordeling, of zonder aanbod) meldt zich met
   data-ad-status="unfilled"; dan valt het hele vak weg in plaats van een lege ruimte met het
   opschrift "Advertentie" erboven te laten staan. De reservering blijft voor het geval dat er
   wel iets komt: die is er om het verspringen bij het laden te voorkomen. */
.advertentie:has(> ins[data-ad-status="unfilled"]) { display:none; }

/* --- print ------------------------------------------------------------ */
@media print {
  :root, :root[data-theme="dark"] {
    --bg:#ffffff; --bg-op:#ffffff; --bg-diep:#ffffff;
    --tekst:#111111; --tekst-zacht:#444444; --lijn:#cccccc; --lijn-sterk:#aaaaaa;
    --lijn-bediening:#999999;
    --accent:#1a3a08; --accent-vlak:#ffffff; --op-accent:#111111;
    --schaduw:none; --schaduw-op:none;
  }
  .balk, .zoek, .solliciteer, .bewaar, .meer, .overslaan, .allelijst,
  .advertentie { display:none !important; }
  body { background:#ffffff; color:#111111; }
}


/* De overzichtspagina staat in een smallere kolom dan de 74rem van .binnen. Op 74rem
   was de kaart 1120 px breed en droeg hij 51 % inkt: een samenvatting van 587 px met
   512 px leegte ernaast. Op 62rem draagt dezelfde inhoud de kolom wel. De kopbalk en de
   voet lopen mee, anders staat het merk 96 px links van de zoekdoos. */
.balk .binnen, .hero .binnen, .zoek .binnen, main.binnen, footer .binnen { max-width:62rem; }

.hero { padding:clamp(.8rem,2.5vw,1.6rem) 0 clamp(.4rem,1.2vw,.8rem); }
/* Zodra er gezocht of gefilterd is, is de propositie beantwoord en staat de uitleg tussen
   de vraag en het antwoord in. Op 390 px kostte de hero 145 px vóór het eerste zoekveld. */
body.zoekt .hero { display:none; }
body.zoekt .zoek { padding-top:var(--r4); }
h1 { margin:0 0 .8rem; font-family:var(--serif); font-size:clamp(2rem,6vw,3.4rem);
     font-weight:var(--gw-vet); line-height:1.05; text-wrap:balance; max-width:16ch; }
h1 em { font-style:italic; color:var(--accent); }
.pitch { margin:0; max-width:52ch; color:var(--tekst-zacht); font-size:clamp(1rem,2.2vw,1.1rem); text-wrap:pretty; }

/* --- zoeken ----------------------------------------------------------- */
/* Het zoekblok scrolt overal gewoon mee. Het was op brede schermen sticky, maar met de
   filterlade open bleef er dan nauwelijks scherm over voor de vacatures zelf; besluit
   eigenaar 26 augustus 2026. Alleen de dunne kopbalk blijft staan. */
.zoek { padding:.8rem 0 .3rem; }
/* Op een telefoon staat de zoekbalk boven de kop. Gemeten op 375 px kostten kop en intro
   samen ruim 300 px vóór het eerste zoekveld, en filteren begon daardoor onder de vouw
   (eigenaar, 5 september 2026). Alleen op de startpagina: op een landingspagina is de
   kop de inhoud, en zodra er gefilterd is staat de kop toch al uit (body.zoekt). De
   volgorde wisselt met flex-order, zodat de HTML-volgorde voor de zoekmachine en voor
   een lezer zonder opmaak dezelfde blijft: eerst de kop, dan het zoeken. */
@media (max-width:47.99rem) {
  body:not(.landing) { display:flex; flex-direction:column; }
  body:not(.landing) > * { order:3; }
  body:not(.landing) > .overslaan, body:not(.landing) > .balk { order:0; }
  body:not(.landing) > .zoek { order:1; }
  body:not(.landing) > .hero { order:2; }
  body:not(.landing) > .hero { padding-top:var(--r5); }
  /* De bronvolgorde blijft kop, zoeken. Bij een tussentijdse paint terwijl het
     formulier nog binnenkomt, zou de kop eerst bovenaan en daarna onder het zoeken
     staan. Beide zijn zichtbaar zodra <main> volgt: dan is hun HTML compleet.
     Dit werkt ook zonder JavaScript en verandert hun uiteindelijke ruimte niet. */
  body:not(.landing):not(:has(> main)) > :is(.hero, .zoek) { visibility:hidden; }
}

/* De server zet de pillen meteen in het zicht, zonder disclosure ervoor (eigenaar,
   8 september 2026: "je moet gewoon de filters al zien"). Ze stonden tot dan achter "Meer
   filters", omdat zes bedieningselementen vóór het eerste resultaat de lijst onder de vouw
   duwden; op een telefoon is de rij nu 62 px hoog en scrolt hij zijwaarts, en dat weegt
   niet meer op tegen een klik. .filterlade hieronder is de lade van de statische bouw,
   die zijn selects wel achter een disclosure houdt. */
.filterbalk { margin:.6rem 0 0; }
.filterlade { margin:.7rem 0 0; }
.filterlade > summary { display:inline-flex; align-items:center; gap:.45rem; min-height:44px;
  padding:.35rem .9rem; cursor:pointer; font:inherit; font-size:var(--t-bediening); font-weight:var(--gw-half);
  color:var(--tekst); background:var(--bg-op); border:1px solid var(--lijn-bediening);
  border-radius:99px; list-style:none; width:max-content; }
.filterlade > summary::-webkit-details-marker { display:none; }
.filterlade > summary::after { content:""; width:.7rem; height:.5rem; flex:0 0 auto;
  background:var(--pijl) no-repeat center / contain; }
.filterlade[open] > summary::after { transform:rotate(180deg); }
.filterlade > summary:hover { border-color:var(--tekst-zacht); }
.filterlade[open] > summary { background:var(--bg-diep); }
.filterlade > .filters { padding-top:var(--r3); }
.filterlade .aantalactief { font-variant-numeric:tabular-nums; color:var(--accent); font-weight:var(--gw-vet); }

/* Native selects, want die werken op mobiel beter dan elk eigen menu en zijn met
   toetsenbord en schermlezer meteen goed. */
.filters { display:flex; gap:.65rem .5rem; flex-wrap:wrap; align-items:center; padding:.2rem 0 .1rem; }
.filters select {
  min-height:44px; padding:.35rem 2rem .35rem .8rem; font:inherit; font-size:.9rem;
  color:var(--tekst); background-color:var(--bg-op); border:1px solid var(--lijn-bediening);
  border-radius:99px; cursor:pointer; -webkit-appearance:none; appearance:none;
  background-image:var(--pijl);
  background-repeat:no-repeat; background-position:right .8rem center; background-size:.7rem;
}
.filters select:hover { border-color:var(--tekst-zacht); }
.filters select.actief { background-color:var(--accent-vlak); color:var(--op-accent);
                         border-color:transparent; background-image:var(--pijl-actief); }
.filters .schakel {
  min-height:44px; padding:.35rem .9rem; font:inherit; font-size:.9rem; cursor:pointer;
  color:var(--tekst); background:var(--bg-op); border:1px solid var(--lijn-bediening); border-radius:99px;
}
.filters .schakel:hover { border-color:var(--tekst-zacht); }
.filters .schakel[aria-pressed="true"] { background:var(--accent-vlak); color:var(--op-accent); border-color:transparent; }

/* --- meervoudige keuzemenu's ------------------------------------------- */
/* Een <details> per filter in plaats van een select, omdat een select maar één waarde
   aankan en <select multiple> op elk platform onbruikbaar is. Details geeft gratis wat
   een eigen menu anders met ARIA en toetsafhandeling moet naspelen: openen en sluiten
   met toetsenbord, en het werkt zonder JavaScript. De pilvorm blijft die van de selects
   hierboven, zodat de balk één ding blijft. */
.keuzemenu { position:relative; }
.keuzemenu > summary {
  display:inline-flex; align-items:center; gap:.4rem; min-height:44px;
  padding:.35rem .8rem; cursor:pointer; font:inherit; font-size:var(--t-bediening); font-weight:var(--gw);
  color:var(--tekst); background:var(--bg-op); border:1px solid var(--lijn-bediening);
  border-radius:99px; list-style:none; white-space:nowrap;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease;
}
.keuzemenu > summary::-webkit-details-marker { display:none; }
.keuzemenu > summary::after { content:""; width:.7rem; height:.5rem; flex:0 0 auto;
  background:var(--pijl) no-repeat center / contain; transition:transform .15s ease; }
.keuzemenu[open] > summary::after { transform:rotate(180deg); }
.keuzemenu > summary:hover { border-color:var(--tekst-zacht); }
/* Gevuld zodra er iets gekozen is. Het accent blijft daarmee schaars: het staat alleen
   op wat de bezoeker zelf heeft aangezet. */
.keuzemenu.gekozen > summary { background:var(--accent-vlak); color:var(--op-accent);
                               border-color:transparent; font-weight:var(--gw-half); }
.keuzemenu.gekozen > summary::after { background-image:var(--pijl-actief); }
.keuzemenu .telling { font-variant-numeric:tabular-nums; font-weight:var(--gw-vet);
                      font-size:.82rem; }

.keuzemenu > .paneel {
  position:absolute; z-index:40; top:calc(100% + .4rem); left:0; min-width:15rem;
  max-width:min(22rem, 92vw); max-height:min(24rem, 60vh); overflow-y:auto;
  /* --lijn-bediening en niet --lijn-sterk: dit paneel begrenst een bedieningselement en
     valt dus onder WCAG 1.4.11 (3:1). --lijn-sterk haalt op wit 1,96:1. */
  padding:.3rem; background:var(--bg-op); border:1px solid var(--lijn-bediening);
  border-radius:var(--radius); box-shadow:var(--schaduw-op);
  scrollbar-width:thin; overscroll-behavior:contain;
}
/* Elk menu opent dezelfde kant op: naar rechts, onder de eigen pil. De vroegere
   rechts-uitlijning voor de laatste pillen leek willekeurig ("soms links, soms
   rechts", eigenaar 2026-08-28) en is weg; in plaats daarvan blijven alle panelen
   behalve het plaatsenpaneel compact eenkoloms, zodat ze overal passen. Alleen de
   plaatsenlijst van tachtig verdient drie kolommen, en die pil staat vooraan links
   waar de ruimte is. */
@media (min-width:60rem) {
  /* Raster en geen columns: multicol laat bij een vaste hoogte de overige kolommen
     horizontaal buiten het paneel vallen, en die zijn met overflow-y niet te bereiken.
     width en niet max-width, want een absoluut gepositioneerd element krimpt anders
     naar zijn inhoud. */
  .keuzemenu[data-open-veld="plaats"] > .paneel {
    width:min(42rem, 92vw); max-width:none;
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
    gap:0 .3rem; align-content:start; }
}
/* Op een smal scherm staan de pillen in één rij die zijwaarts scrolt, zoals indeed en
   nationalevacaturebank dat op een telefoon doen. Geen apart scherm: de eigenaar wees het
   schermvullende venster van 5 september 2026 af ("gewoon weer pillen horizontaal, en dat
   je horizontaal kan scrollen naar de volgende filter"). De rij loopt tot de schermrand
   door, zodat een half zichtbare pil laat zien dat er meer volgt. Uitlijnen op de pil is
   hier zinloos: gemeten op 375 px schoten Opleiding en Salaris 118 px buiten beeld. Het
   paneel hangt daarom onder de hele rij, over de volle breedte van het zoekformulier. Het
   ankerpunt is het formulier en niet de rij: een absoluut kind van een scrollende rij wordt
   door die rij afgesneden, een kind dat zich op een voorouder van de rij richt niet. */
@media (max-width:60rem) {
  /* Het ankerpunt is het zoekformulier en niet de balk: dan begint het paneel onder de
     rij met chips in plaats van eroverheen te hangen. Gemeten op 14 september 2026: met
     het paneel open kwam een tik op het kruisje van een chip terecht op de optie die er
     toevallig onder lag. De chips blijven zo zichtbaar en aantikbaar terwijl een paneel
     openstaat. Zonder chips is het formulier even hoog als de balk en verandert er niets. */
  .zoek form { position:relative; }
  .filterbalk, .filterlade { position:static; }
  /* Geen zichtbare schuifbalk onder de pillen (eigenaar, 14 september 2026): de rij scrolt
     met een veeg, en de half zichtbare pil aan de rand zegt al dat er meer volgt. */
  /* iOS scrolt sinds versie 13 vanzelf vloeiend. De oude WebKit touch-scrolloptie
     maakt op iPhone een extra stacking context en kan het uitklapmenu afsnijden. */
  .filters { flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:none;
    margin-inline:calc(-1 * var(--rand)); padding:.3rem var(--rand) .4rem;
    scroll-padding-inline:var(--rand); }
  .filters::-webkit-scrollbar { display:none; }
  .filters > * { flex:0 0 auto; }
  .keuzemenu { position:static; }
  .keuzemenu > .paneel { left:0; right:0; width:auto; min-width:0; max-width:none;
    max-height:min(50vh, 22rem); }
}

/* Het aantal per optie komt via het script binnen zodra een paneel opent. Gedempt en
   rechts, zodat het opschrift blijft dragen; een optie zonder treffers dempt als geheel
   maar blijft klikbaar, want de lijst hoort niet onder je te verschuiven. */
.keuzemenu .optie .aantal { margin-left:auto; padding-left:.6rem; font-size:.78rem;
  color:var(--tekst-zacht); font-variant-numeric:tabular-nums; }
.keuzemenu .optie.nul { opacity:.5; }
/* Het zoekveldje boven de lange plaatsenlijst; alleen zichtbaar met JavaScript. Zelfde
   maten en lijnen als de opties eronder, zodat het paneel één geheel blijft. */
/* In het brede plaatsenpaneel (3 kolommen) spant het zoekveld alle kolommen. */
.keuzemenu > .paneel > .paneelzoek { grid-column:1 / -1; }
.paneelzoek {
  width:100%; min-height:40px; margin-bottom:.3rem; padding:.25rem .55rem;
  font:inherit; font-size:.9rem; color:var(--tekst); background:var(--bg);
  border:1px solid var(--lijn-bediening); border-radius:calc(var(--radius) - 6px);
}
.keuzemenu .optie {
  display:flex; align-items:center; gap:.6rem; min-height:44px; padding:.25rem .55rem;
  border-radius:calc(var(--radius) - 6px); cursor:pointer; font-size:.9rem;
  color:var(--tekst); text-decoration:none; line-height:1.3;
}
.keuzemenu .optie:hover { background:var(--bg-diep); }
.keuzemenu .optie:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
/* Zonder script laadt een filterklik de hele pagina opnieuw, en met script duurt het
   ophalen ook een moment. Zonder indruk-state en met de tap-highlight uit gebeurt er dan
   zichtbaar niets, en tikt iemand een tweede keer. */
.keuzemenu .optie:active { background:var(--accent-vlak); color:var(--op-accent); }
.keuzemenu > summary:active, .keuzepil:active, .filterlade > summary:active,
.facetten button:active { background:var(--bg-diep); }
.kaart h2 a:active, .kaart h3 a:active { color:var(--accent); }
.gekozenlijst .chip a:active { background:rgba(0,0,0,.2); }
.keuzemenu .optie.aan { font-weight:var(--gw-half); }
/* Een eigen vinkje in plaats van een selectievakje, want de optie is een link: klikken
   filtert meteen. Een echt vakje zou suggereren dat er nog een knop achteraan komt. */
/* Geen doos in de uit-stand. Een leeg vakje van 16,8 px met een radius van 5 px is de
   vorm van een selectievakje, en dat belooft dat er nog een knop "Toon resultaten" komt.
   Elke klik navigeert hier meteen, dus alleen wat aanstaat draagt een vorm. */
.vink { flex:0 0 auto; width:1.05rem; height:1.05rem; border-radius:99px;
  border:1.5px solid transparent; background:transparent;
  transition:background-color .12s ease, border-color .12s ease; }
.optie:hover .vink, .keuzepil:hover .vink { border-color:var(--lijn-bediening); }
.optie.aan .vink, .keuzepil.gekozen .vink {
  background:var(--accent) var(--vinkje-acc) no-repeat center / .72rem; border-color:var(--accent); }

/* Thuiswerken: één keuze, dus geen menu, maar wel dezelfde pil als de menu's ernaast. */
.keuzepil { display:inline-flex; align-items:center; gap:.45rem; min-height:44px;
  padding:.35rem .8rem; font-size:var(--t-bediening); font-weight:var(--gw); color:var(--tekst);
  background:var(--bg-op); border:1px solid var(--lijn-bediening); border-radius:99px;
  text-decoration:none; white-space:nowrap;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease; }
.keuzepil:hover { border-color:var(--tekst-zacht); }
.keuzepil.gekozen { background:var(--accent-vlak); color:var(--op-accent);
                    border-color:transparent; font-weight:var(--gw-half); }
.keuzepil.gekozen .vink { background-color:var(--op-accent); border-color:var(--op-accent);
                          background-image:var(--vinkje-op); }

/* Een kopje boven een groep opties. */
.keuzemenu .groep { padding:.6rem .55rem .2rem; font-size:var(--t-micro); font-weight:var(--gw-vet);
                    letter-spacing:.06em; text-transform:uppercase;
                    color:var(--tekst-zacht); }
.keuzemenu .groep:first-child { padding-top:.25rem; }


/* De gekozen waarden onder de balk, zodat je ze ziet staan zonder elk menu te openen. */
.gekozenlijst { display:flex; flex-wrap:wrap; gap:.35rem; align-items:center;
                padding:.6rem 0 0; }
.gekozenlijst .chip { display:inline-flex; align-items:center; gap:.35rem; min-height:32px;
  padding:.15rem .3rem .15rem .7rem; font-size:.84rem; color:var(--op-accent);
  background:var(--accent-vlak); border-radius:99px; }
/* Het kruisje is de enige weg terug uit een verkeerd gezet filter en had met 24 bij
   24 px het kleinste raakvlak van de pagina. De vorm blijft 24, het raakvlak wordt 44. */
.gekozenlijst .chip a::before { content:""; position:absolute; inset:-10px; }
.gekozenlijst .chip a { position:relative;
                        display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:99px; color:inherit; text-decoration:none;
  font-size:1rem; line-height:1; }
.gekozenlijst .chip a:hover { background:rgba(0,0,0,.12); }
/* De chip draagt zelf de accentkleur, dus een focusring in diezelfde kleur is
   onzichtbaar: gemeten 1,00:1 in het donkere thema. Op een accentvlak hoort de
   ring de tegenkleur te zijn. */
.gekozenlijst .chip a:focus-visible, .keuzepil.gekozen:focus-visible {
  outline:2px solid var(--op-accent); outline-offset:2px; }
.gekozenlijst .alles:hover { color:var(--tekst); text-decoration-thickness:2px; }
.gekozenlijst .alles { display:inline-flex; align-items:center; min-height:44px;
  padding:0 .3rem; font-size:.84rem; color:var(--tekst-zacht);
  text-decoration:underline; margin-left:.2rem; }

.facetten { display:flex; gap:.4rem; overflow-x:auto; padding:.55rem .35rem .3rem;
            scroll-padding-inline:.35rem; scrollbar-width:thin; }
.facetten button { flex:0 0 auto; cursor:pointer; font:inherit; font-size:.9rem; min-height:44px;
  padding:.3rem .85rem; color:var(--tekst); background:var(--bg-op);
  border:1px solid var(--lijn-bediening); border-radius:99px; white-space:nowrap;
  transition:color .15s ease, border-color .15s ease, background-color .15s ease; }
.facetten button:hover { border-color:var(--tekst-zacht); }
.facetten button[aria-pressed="true"] { background:var(--accent-vlak); color:var(--op-accent); border-color:transparent; }
.facetten .telling { margin-left:.4rem; font-variant-numeric:tabular-nums; color:var(--tekst-zacht); }
.facetten button[aria-pressed="true"] .telling { color:inherit; }

/* --- teller ------------------------------------------------------------ */
.teller { display:flex; justify-content:space-between; gap:var(--r2) var(--r4); flex-wrap:wrap;
          align-items:center; color:var(--tekst-zacht); padding:var(--r4) 0 var(--r3); font-size:var(--t-bediening); }
.teller strong { color:var(--accent); font-size:var(--t-basis); font-weight:var(--gw-half);
                 font-variant-numeric:tabular-nums; }
/* Nul treffers is geen resultaat om te vieren; het accent betekent gevonden. */
.teller.niets strong { color:var(--tekst); }
.telregel { margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .6rem; }
.totaal { margin:0; color:var(--tekst-zacht); font-size:var(--t-klein);
          font-variant-numeric:tabular-nums; }
.bijwerkgevers { color:var(--tekst-zacht); font-size:var(--t-bediening); }
/* De volgorde stond als losse woorden achter de teller en las niet als bediening.
   Eigen regel, een label ervoor, en de actieve keuze zwaarder dan de links. */
.sorteerregel { margin:0; display:flex; flex-wrap:wrap; align-items:baseline;
                gap:.15rem .5rem; font-size:var(--t-bediening); color:var(--tekst-zacht); }
.sorteerlabel { font-weight:var(--gw-half); color:var(--tekst); }
.sorteerregel strong { font-weight:var(--gw-half); color:var(--tekst); }
/* Wissen is een uitweg, geen doel. Het accent blijft voor toestand (aan, gekozen,
   gevonden) en draagt geen handeling meer. */
.wissen { background:none; border:0; padding:.4rem; font:inherit; font-size:var(--t-bediening); cursor:pointer;
          min-height:44px; color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.wissen:hover { text-decoration-thickness:2px; }
/* Wat een filter wegsnijdt omdat het veld leeg is, hoort bij het getal te staan; anders
   leest de bezoeker een dataleemte als een lege arbeidsmarkt. */
.weggelaten { margin:0 0 .8rem; padding:.6rem .85rem; background:var(--bg-diep);
              border-radius:10px; color:var(--tekst-zacht); font-size:.88rem;
              max-width:var(--maat-lopend); }
/* Actieve keuzes als verwijderbare chips. Zonder deze rij moet je op mobiel de lade
   openen om te zien waarop je filtert, want de gekozen waarden staan daarbinnen. */
.keuzes { display:flex; flex-wrap:wrap; gap:.4rem; padding:0 0 .9rem; }
.keuzes button {
  display:inline-flex; align-items:center; gap:.45rem; min-height:36px;
  padding:.25rem .5rem .25rem .8rem; cursor:pointer; font:inherit; font-size:.88rem;
  color:var(--op-accent); background:var(--accent-vlak); border:1px solid transparent;
  border-radius:99px;
}
.keuzes button::after { content:"\00d7"; font-size:1.15rem; line-height:1;
  opacity:.75; padding-inline:.15rem; }
.keuzes button:hover::after { opacity:1; }

/* --- lijst ------------------------------------------------------------- */
.meer { display:block; width:100%; margin:1.6rem 0; padding:.9rem; min-height:48px; cursor:pointer;
        font:inherit; font-weight:var(--gw-half); color:var(--tekst); background:var(--bg-op);
        border:1px solid var(--lijn-bediening); border-radius:10px;
        transition:border-color .16s ease, background-color .16s ease; }
.meer:hover { border-color:var(--tekst-zacht); }
.meer:active { background:var(--bg-diep); }
.leeg { padding:3rem 1rem; text-align:center; color:var(--tekst-zacht); }
.leeg strong { display:block; font-family:var(--serif); font-size:1.4rem; color:var(--tekst);
               margin-bottom:.4rem; }
.leeg p { max-width:46ch; margin:0 auto 1.2rem; }
.noscript-melding { margin:1rem 0 0; padding:.9rem 1.1rem; background:var(--bg-diep);
                    border-radius:10px; color:var(--tekst-zacht); font-size:.93rem;
                    max-width:var(--maat-lopend); }

/* Verwijzing naar de linklijst, zodat geen detailpagina zonder inkomende link staat. De
   lijst zelf staat op alle-vacatures.html: bij 7.539 vacatures woog hij hier 900 KB. */
.allelijst { margin:2.5rem 0 0; border-top:1px solid var(--lijn); padding-top:1.2rem;
             color:var(--tekst-zacht); font-size:.93rem; max-width:var(--maat-lopend); }

/* --- laadstand bij in-place filteren ------------------------------------ */
/* De lijst dempt zolang de nieuwe lijst wordt opgehaald en houdt zijn hoogte (script);
   zo verandert er boven de vouw niets terwijl er onder de vouw gewisseld wordt. */
#lijst.bezig { opacity:.55; transition:opacity .15s ease; }
@media (prefers-reduced-motion: reduce) { #lijst.bezig { transition:none; } }

@media (min-width:52rem) { body { font-size:17px; } }