: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; }
}

main { padding-top:clamp(2rem,6vw,3.5rem); }
main h1 { margin:0 0 .6rem; font-family:var(--serif); font-size:clamp(1.9rem,5vw,2.8rem);
     font-weight:var(--gw-vet); line-height:1.12; text-wrap:balance; }
main .inleiding { max-width:var(--maat-lopend); font-size:1.06rem; color:var(--tekst-zacht);
     text-wrap:pretty; margin:0 0 2rem; }
main h2 { font-family:var(--serif); font-size:1.32rem; font-weight:var(--gw-vet);
          line-height:1.22; text-wrap:balance; margin:var(--r6) 0 var(--r2);
 }
main h3 { font-size:1.02rem; font-weight:var(--gw-half); margin:var(--r5) 0 var(--r1); }
main p, main li { max-width:var(--maat-lopend); text-wrap:pretty; }
main ul { padding-left:1.15rem; margin:.5rem 0 1rem; }
main li { margin:.3rem 0; }
main table { border-collapse:collapse; margin:1rem 0 1.6rem; font-size:.95rem; width:100%;
     max-width:var(--maat-lopend); }
main th, main td { text-align:left; padding:.55rem .8rem .55rem 0; border-bottom:1px solid var(--lijn);
     vertical-align:top; }
main th { font-weight:var(--gw-half); }
.opengelaten { background:var(--vlak); border:1px dashed var(--lijn-bediening); border-radius:.5rem;
     padding:.7rem .9rem; font-size:.93rem; }
.bijgewerkt { font-size:.88rem; color:var(--tekst-zacht); margin-top:2.5rem;
     border-top:1px solid var(--lijn); padding-top:1rem; }
.tabelrol { overflow-x:auto; }
.contactformulier { display:grid; gap:var(--r2); max-width:var(--maat-lopend);
     margin:var(--r4) 0 var(--r6); }
.contactformulier fieldset { min-width:0; margin:0 0 var(--r2); padding:0; border:0; }
.contactformulier legend, .contactformulier > label { font-weight:var(--gw-half); }
.radiogroep { display:grid; gap:var(--r2); margin-top:var(--r2); }
.radiogroep label { display:flex; align-items:center; gap:var(--r2); min-height:44px;
     width:max-content; max-width:100%; cursor:pointer; }
.radiogroep input { width:1.15rem; height:1.15rem; margin:0; accent-color:var(--accent); }
.contactformulier > input[type="text"], .contactformulier textarea {
     width:100%; min-height:46px; box-sizing:border-box; padding:.65rem .8rem;
     font:inherit; color:var(--tekst); background:var(--bg-op);
     border:1px solid var(--lijn-bediening); border-radius:var(--radius-klein); }
.contactformulier textarea { min-height:10rem; line-height:1.55; resize:vertical; }
.contactformulier .knop { justify-self:start; margin-top:var(--r2); }
.veldhint { color:var(--tekst-zacht); font-size:var(--t-klein); margin-top:calc(-1 * var(--r1)); }
.formulierfout { padding:var(--r3); border-left:3px solid var(--signaal);
     background:var(--vlak); border-radius:0 var(--radius-klein) var(--radius-klein) 0; }
.contactval { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }