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

.ai-blok{margin:0 0 2rem}
.ai-samenvatting{font-size:1.08rem;line-height:1.6;margin:0 0 1.4rem}
.ai-blok h2{font-size:1rem;letter-spacing:.02em;text-transform:uppercase;
  margin:1.6rem 0 .5rem;color:var(--tekst-zacht,#5b6670)}
.ai-punten{margin:0 0 .4rem;padding-left:1.15rem}
.ai-punten li{margin:.3rem 0;line-height:1.5}
.ai-kenmerken{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:.1rem 1.5rem;margin:.4rem 0 0}
.ai-kenmerk{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;
  border-bottom:1px solid var(--rand,#e3e6e8)}
.ai-kenmerk dt{color:var(--tekst-zacht,#5b6670)}
.ai-kenmerk dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.ai-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0 0}
.ai-tag{background:var(--bg-diep,#f0f2f4);padding:.2rem .6rem;border-radius:999px;
  font-size:.92rem}

/* De kopbalk krijgt dezelfde kolom als het artikel, anders staat de titelbalk uit
   register met de tekst eronder. */
.balk .binnen { max-width:46rem; }
/* Terug is de hoofdweg en de themaschakelaar bijzaak; twee gelijke pillen naast elkaar
   maakten dat onduidelijk. Terug krijgt daarom de omranding, thema wordt een tekstknop. */
.terug { display:inline-flex; align-items:center; gap:.4rem; min-height:44px; padding:.3rem .9rem;
         color:var(--tekst); text-decoration:none; font-size:var(--t-bediening); font-weight:var(--gw-half);
         border:1px solid var(--lijn-bediening); border-radius:99px; }
.terug:hover { border-color:var(--tekst-zacht); background:var(--bg-op); }
/* Op een smal scherm brak "← Alle vacatures" in tweeën en werd de kopbalk 57 px hoog
   (gemeten op 375 px; eigenaar 9 september 2026). De link draagt daarom twee opschriften
   en toont onder 28rem het korte. Onder 21rem wijkt de merknaam; het beeldmerk blijft. */
.terug { white-space:nowrap; }
.terug-kort { display:none; }
@media (max-width:27.99rem) {
  .terug-lang { display:none; }
  .terug-kort { display:inline; }
}
@media (max-width:20.99rem) {
  /* Het beeldmerk houdt ook zonder de zichtbare naam een naam voor schermlezers. */
  .merk .naam { position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; }
}
.themaicoon { border-color:transparent; background:transparent; color:var(--tekst-zacht);
              font-size:.9rem; padding-inline:.6rem; }
.themaicoon:hover { border-color:transparent; background:var(--bg-diep); color:var(--tekst); }

article { padding-top:clamp(2rem,6vw,3.2rem); }
article h1 { margin:0 0 .7rem; font-family:var(--serif); font-size:clamp(1.8rem,5vw,2.7rem);
             font-weight:var(--gw-vet); line-height:1.12; text-wrap:balance;
             overflow-wrap:anywhere; }
.kenmerken { display:flex; flex-wrap:wrap; gap:.4rem .6rem; align-items:center;
             color:var(--tekst-zacht); margin:0 0 1.8rem; font-size:.98rem; }
.kenmerken .werkgever { color:var(--tekst); font-weight:var(--gw-half); font-size:1.04rem; }
.kenmerken .domein { font-variant-numeric:tabular-nums; }

/* De sollicitatieknop stond in een eigen omkaderde bak met schaduw, twee keer op de
   pagina. Dat las als een widget náást de vacature in plaats van als de vervolgstap ván
   de vacature. Nu: geen kader en geen schaduw, wel een haarlijn erboven die hem aan de
   tekst hangt, en de toelichting eronder in plaats van ernaast. */
.solliciteer { padding:1.1rem 0 0; margin:0 0 2.4rem;
               border-top:1px solid var(--lijn); }
.solliciteer .let-op { display:block; margin:.7rem 0 0; color:var(--tekst-zacht);
                       font-size:.88rem; max-width:38rem; }
/* De onderste knop had dezelfde bestemming en dezelfde tekst maar een lichtere vorm, en
   werd juist aangeboden aan wie het verst gelezen had. Eén daad, één gewicht: het verschil
   zit nu in het ritme, niet in de stijl. Hij blijft staan voor wie geen van beide
   vervangers krijgt. */
.solliciteer-onder { margin:2.6rem 0 0; }

/* Het overzicht is een redactionele feitenlijst, geen nieuw kaartcomponent. De haarlijnen
   scheiden de negen vaste antwoorden en blijven ook in donker thema rustig leesbaar. */
.oogopslag { margin:0 0 2rem; padding:1.15rem 0; border-block:1px solid var(--lijn); }
.oogopslag > h2 { margin:0 0 .8rem; font-family:var(--serif); font-size:1.3rem; }
.oogopslag dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
                gap:.15rem 1.5rem; margin:0; }
.oogopslag-rij { min-width:0; padding:.45rem 0; }
.oogopslag dt { color:var(--tekst-zacht); font-size:.78rem; text-transform:uppercase;
                letter-spacing:.04em; }
.oogopslag dd { margin:.08rem 0 0; overflow-wrap:anywhere; }
@media (max-width:34rem) { .oogopslag dl { grid-template-columns:1fr; } }

.tekst { font-size:1.02rem; }
.tekst p, .tekst ul, .tekst ol, .tekst h2, .tekst h3 { max-width:38rem; }
.tekst p, .tekst li, .tekst h3 { overflow-wrap:anywhere; }
.tekst p { margin:0 0 1.15rem; text-wrap:pretty; }
.tekst h3 { font-size:1.06rem; font-weight:var(--gw-half); margin:var(--r5) 0 var(--r2); }
.tekst ul, .tekst ol { margin:0 0 1.15rem; padding-inline-start:1.4rem; }
.tekst li { margin-bottom:.35rem; }
.geen-tekst { color:var(--tekst-zacht); font-style:italic; }

/* De zusterlijst gebruikt dezelfde kaart als het overzicht; de kaartstijl staat in de
   gedeelde STIJL. Hier alleen de kop en de bredere kolom die de kaarten nodig hebben. */
.zusters { margin-top:2.8rem; }
.zusters > h2 { font-size:.8rem; letter-spacing:.09em; text-transform:uppercase;
                margin:0 0 .8rem; color:var(--tekst); }

/* Het blok "ter vergelijking": dezelfde cijfers als op de landingspagina, dus ook dezelfde
   cijferstijl (.landcijfers in de gedeelde STIJL), en dezelfde kop als de zusterlijst. */
.markt { margin-top:2.8rem; }
.markt > h2 { font-size:.8rem; letter-spacing:.09em; text-transform:uppercase;
              margin:0 0 .8rem; color:var(--tekst); }
.markt > .landuitleg:first-of-type { margin-top:0; }

.bronblok { margin-top:2.6rem; padding:1.2rem 1.35rem; background:var(--bg-diep);
            border-radius:var(--radius); }
.bronblok h2 { font-size:.8rem; letter-spacing:.09em; text-transform:uppercase; margin:0 0 .5rem; }
.bronblok p { margin:0 0 .6rem; font-size:.9rem; color:var(--tekst-zacht); max-width:var(--maat-lopend); }
.bronblok a { overflow-wrap:anywhere; }
@media (min-width:52rem) { body { font-size:17px; } }

.vacature-intro { margin:0 0 var(--r5); max-width:var(--maat-lopend); color:var(--tekst);
  font-size:clamp(1rem,2.2vw,1.08rem); text-wrap:pretty; }

/* Vanaf 68rem twee kolommen: de tekst links op leesbreedte, en rechts de kolom waarin de
   bezoeker beslist. Daarvoor stond alles in 672 px met 768 px leegte ernaast, en zakte de
   sollicitatieknop na 355 px scrollen voorgoed uit beeld. */
/* De feiten en de knop zitten in één vak. Een aparte rechterkolom hield een halve
   paginabreedte bezet voor één bedieningselement; de knop hoort waar de feiten staan, want
   die feiten zijn waarop je besluit. Vanaf 44rem staat de knop rechts ín het vak, daaronder
   eronder over de volle breedte. */
.beslisvak { margin:0 0 var(--r6); padding:var(--r5); background:var(--bg-diep);
             border-radius:var(--radius); }
.beslisvak .oogopslag { margin:0; padding:0; border-block:0; }
.beslisvak .solliciteer { margin:var(--r5) 0 0; padding:var(--r5) 0 0;
                          border-top:1px solid var(--lijn-sterk); }
.beslisvak .knop-hoofd { width:100%; justify-content:center; text-wrap:balance;
                         padding-inline:var(--r3); }
.beslisvak .let-op { margin-top:.6rem; }

/* De knop staat onder de feiten, niet ernaast: hij is de vervolgstap ván het overzicht en
   leest daarom het beste als afsluiting ervan. Op een breed scherm houdt hij zijn eigen maat
   in plaats van de hele vakbreedte te vullen; een lime balk van 848 px is geen knop meer. */
@media (min-width:44rem) {
  .beslisvak .knop-hoofd { width:auto; }
  .beslisvak .solliciteer { display:flex; flex-wrap:wrap; align-items:center;
                            gap:var(--r2) var(--r5); }
  .beslisvak .let-op { margin-top:0; flex:1 1 18rem; }
}
/* Onder 44rem staan hoofdknop, bewaarknop en toelichting onder elkaar, elk met eigen
   ruimte. De bewaarknop plakte tegen de hoofdknop (0 px, gemeten op 375 px; eigenaar
   9 september 2026): het blok was daar geen flex en een inline-flex knop neemt geen
   eigen regelafstand. Beide knoppen over de volle breedte, zoals de vaste onderbalk, en
   het vak zelf met de marge van een kaart (16 px) in plaats van 24, zodat de knop op
   375 px 311 px krijgt in plaats van 295. */
@media (max-width:43.99rem) {
  .beslisvak .solliciteer { display:grid; gap:var(--r2); }
  .beslisvak #bewaarDetail { width:100%; }
  .beslisvak .let-op { margin-top:var(--r1); }
}
@media (max-width:34rem) {
  .beslisvak { padding:var(--r4); }
  .beslisvak .solliciteer { margin-top:var(--r4); padding-top:var(--r4); }
}
@media (min-width:60rem) {
  main.binnen.smal, .balk .binnen { max-width:60rem; }
  .beslisvak .oogopslag dl { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Op de telefoon neemt een vaste onderbalk de rol van de knop over zodra die uit beeld is.
   Gemeten op 390 px lag er tussen de knop bovenaan en de knop onderaan 1.780 px tekst: ruim
   twee schermen waarin iemand overtuigd kan raken zonder iets te kunnen doen. Op een groot
   scherm is een vaste balk te zwaar; daar staat de tweede knop onder de tekst. */
.balk-solliciteer { display:none; }
@media (max-width:43.99rem) {
  .balk-solliciteer { position:fixed; inset:auto 0 0 0; z-index:60; display:flex;
    padding:var(--r2) var(--r4) calc(var(--r2) + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--bg-op) 94%, transparent);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--lijn-bediening); }
  .balk-solliciteer .knop-hoofd { width:100%; justify-content:center; }
  article > .solliciteer-onder { display:none; }
  body { padding-bottom:calc(5rem + env(safe-area-inset-bottom)); }
}