/* ===========================================================================
 *  vacatures.jobup.nl
 *
 *  Eén stylesheet voor de hele site. Geen framework, geen bundelstap: wat hier
 *  staat is wat de browser krijgt.
 *
 *  DE MATEN KOMEN UIT HET ONTWERP en staan hieronder als variabelen. Wie een
 *  kleur wil wijzigen, wijzigt hem hier en nergens anders -- in de gegenereerde
 *  HTML staat geen enkele losse kleurcode.
 *
 *  DE VOLGORDE
 *    1. Variabelen        kleuren, maten, schaduwen
 *    2. Basis             reset, typografie, hulpklassen
 *    3. Omlijsting        topbalk, header, footer
 *    4. Bouwstenen        knoppen, chips, tags, velden, de schuine titelbalk
 *    5. Overzicht         hero, filters, vacaturekaarten, paginering
 *    6. Detailpagina
 *    7. Solliciteren
 *    8. Waarom via JobUp
 *    9. Smaller scherm
 * =========================================================================== */

/* ===========================================================================
 *  1. Variabelen
 * =========================================================================== */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/open-sans-latin.woff2") format("woff2");
}

:root {
  /* Kleuren, overgenomen van jobup.nl */
  --navy:        #2f5471;
  --navy-diep:   #24415a;
  --roze:        #cb2e63;
  --roze-donker: #a52350;

  --tekst:        #3a4652;
  --tekst-stil:   #6b7680;
  --tekst-zwak:   #8a939c;

  --rand:        #dfe4ea;
  --rand-veld:   #b5c0cb;
  --vlak:        #f6f7fb;
  --vlak-blauw:  #edf2f6;
  --foto:        #c9d3dc;
  --ster:        #f2b84b;
  --wit:         #ffffff;

  /* Maten. De pagina is 1280 breed met 112 marge; daarbinnen is 1056 over. */
  --marge:   112px;
  --inhoud:  1056px;

  --r-pil:   999px;
  --r-blok:  6px;
  --r-veld:  4px;
  --r-tag:   4px;

  --schaduw:        0 1px 3px rgba(47, 84, 113, .08);
  --schaduw-hoog:   0 6px 18px rgba(47, 84, 113, .14);
  --schaduw-raster: 0 8px 22px rgba(47, 84, 113, .16);

  --vlot: 150ms ease;

  /* De schuine hoek van de roze titelbalk. Eén plek, want hij komt op vier
     pagina's terug en moet overal dezelfde helling hebben. */
  --schuin: 36px;
}

/* ===========================================================================
 *  2. Basis
 * =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* HIDDEN MOET WINNEN VAN ONZE EIGEN DISPLAY.
   Het attribuut hidden zet display:none via de browser zelf, maar elke eigen
   regel met display erin verslaat dat -- en dan verbergt app.js kaarten die
   gewoon zichtbaar blijven. Dat is precies zo lang onopgemerkt gebleven als
   het duurde om de eerste screenshot te bekijken. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Open Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--wit);
}

h1, h2, h3, h4 { margin: 0; color: var(--navy); font-weight: 700; line-height: 1.25; }
h1 { font-size: 40px; line-height: 1.15; }
h2 { font-size: 30px; }
h3 { font-size: 20px; line-height: 1.3; }
p  { margin: 0; }
ul { margin: 0; padding-left: 20px; }

a { color: var(--roze); text-decoration: none; }
a:hover { color: var(--roze-donker); text-decoration: underline; }

img { max-width: 100%; display: block; }

/* Zichtbaar waar de focus staat. Niet weghalen: zonder dit is de site met een
   toetsenbord niet te gebruiken, en dat is bij een sollicitatieformulier geen
   detail. */
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: 2px;
}

/* De breedte van de pagina. Alles wat tegen de rand aan moet lopen (foto's,
   gekleurde banen) staat buiten .wrap; de rest erin. */
.wrap {
  max-width: calc(var(--inhoud) + 2 * var(--marge));
  margin: 0 auto;
  padding: 0 var(--marge);
}

/* Alleen voor schermlezers: labels bij velden die visueel al duidelijk zijn. */
.verborgen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.overline {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.stil { color: var(--tekst-stil); }

/* ===========================================================================
 *  3. De omlijsting
 * =========================================================================== */
.topbalk {
  background: var(--navy);
  color: var(--wit);
  font-size: 12px;
  font-weight: 600;
}
.topbalk .wrap {
  display: flex;
  justify-content: flex-end;
  gap: 28px;
  padding-top: 7px;
  padding-bottom: 7px;
}
.topbalk a { color: var(--wit); }
.topbalk a:hover { color: var(--wit); text-decoration: underline; }

.kop {
  background: var(--wit);
}
.kop .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 22px;
  padding-bottom: 22px;
}

.merk { display: flex; flex-direction: column; gap: 2px; }
.merk:hover { text-decoration: none; }
.merk__woord {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .02em;
}
.merk__regel {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--navy);
  text-transform: uppercase;
  padding-left: 2px;
  white-space: nowrap;
}

.menu { display: flex; gap: 32px; align-items: center; font-size: 14px; font-weight: 600; }
.menu a { color: var(--navy); }
.menu a:hover { color: var(--roze); text-decoration: none; }
.menu a[aria-current="page"] {
  color: var(--roze);
  border-bottom: 2px solid var(--roze);
  padding-bottom: 2px;
}
.menu .menu__contact { color: var(--roze); }

/* De hamburger staat er altijd, maar pas onder 1024px in beeld. */
.menuknop {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--rand-veld);
  border-radius: var(--r-pil);
  background: var(--wit);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

.voet {
  background: var(--navy);
  color: var(--wit);
  font-size: 13px;
  line-height: 1.7;
}
.voet .wrap {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  padding-top: 40px;
  padding-bottom: 40px;
}
.voet a { color: var(--wit); }
.voet a:hover { color: var(--wit); }
.voet__merk { font-size: 22px; font-weight: 700; letter-spacing: .02em; }
.voet__over { opacity: .85; max-width: 380px; margin-top: 8px; }
.voet__kop { font-weight: 700; margin-bottom: 6px; }
.voet__lijst { display: flex; flex-direction: column; }

/* Het merkje achter een link die geen pagina opent maar een document opent of
   downloadt. Dat hoor je te weten vóór je klikt -- zeker op een telefoon, waar
   een PDF de browser verlaat en in een andere app opengaat. */
.voet__soort {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: var(--r-pil);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
  vertical-align: 1px;
}

/* ===========================================================================
 *  4. Bouwstenen
 * =========================================================================== */

/* --- Knoppen ------------------------------------------------------------ */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 24px;
  border: 0;
  border-radius: var(--r-pil);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background var(--vlot), color var(--vlot), border-color var(--vlot);
}
.knop:hover { text-decoration: none; }

.knop--roze { background: var(--roze); color: var(--wit); }
.knop--roze:hover { background: var(--roze-donker); color: var(--wit); }

.knop--rand {
  background: 0;
  border: 2px solid var(--navy);
  color: var(--navy);
  padding: 9px 22px;
}
.knop--rand:hover { background: var(--navy); color: var(--wit); }

/* Op een navy ondergrond kan de navy rand niet. */
.knop--licht {
  background: 0;
  border: 2px solid rgba(255, 255, 255, .6);
  color: var(--wit);
  padding: 9px 20px;
}
.knop--licht:hover { background: rgba(255, 255, 255, .12); color: var(--wit); }

.knop--groot { font-size: 15px; padding: 13px 32px; }
.knop--breed { width: 100%; }

/* --- Chips en tags ------------------------------------------------------ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border: 1px solid var(--rand-veld);
  border-radius: var(--r-pil);
  background: var(--wit);
  font: inherit;
  font-size: 13px;
  color: var(--tekst);
  cursor: pointer;
  transition: background var(--vlot), border-color var(--vlot), color var(--vlot);
}
.chip:hover { border-color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--wit); }
.chip--roze[aria-pressed="true"] { background: var(--roze); border-color: var(--roze); }

/* Op navy: de chips onder de zoekbalk in de hero. */
.chip--licht {
  border-color: rgba(255, 255, 255, .5);
  background: 0;
  color: var(--wit);
  padding: 3px 12px;
}
.chip--licht:hover { border-color: var(--wit); background: rgba(255, 255, 255, .12); }

.tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--r-tag);
  background: var(--vlak-blauw);
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
}
.tag--rand { background: var(--wit); border: 1px solid var(--rand); }

/* --- Velden ------------------------------------------------------------- */
.veld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.veld > label, .veld__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}
.veld__nodig { color: var(--roze); }

.veld input[type="text"],
.veld input[type="email"],
.veld input[type="tel"],
.veld select,
.veld textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rand-veld);
  border-radius: var(--r-veld);
  background: var(--wit);
  font: inherit;
  font-size: 15px;
  color: var(--tekst);
}
.veld textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.veld input::placeholder, .veld textarea::placeholder { color: var(--tekst-zwak); }
.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: 0;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(47, 84, 113, .12);
}

.veld__hint { font-size: 12px; color: var(--tekst-stil); }
.veld__fout { font-size: 13px; color: var(--roze); font-weight: 600; }
.veld--fout input, .veld--fout select, .veld--fout textarea { border-color: var(--roze); }
.veld--fout input:focus { box-shadow: 0 0 0 3px rgba(203, 46, 99, .15); }

/* Een aankruisvakje dat er bij elke browser hetzelfde uitziet. */
.vink { display: flex; gap: 10px; align-items: center; font-size: 14px; cursor: pointer; }
.vink input {
  appearance: none;
  width: 16px; height: 16px;
  flex: none;
  margin: 0;
  border: 2px solid var(--rand-veld);
  border-radius: 3px;
  background: var(--wit);
  cursor: pointer;
  transition: background var(--vlot), border-color var(--vlot);
}
.vink input:checked {
  border-color: var(--roze);
  background: var(--roze) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center/13px no-repeat;
}
.vink__aantal { margin-left: auto; color: var(--tekst-zwak); font-size: 13px; }

/* --- De schuine roze titelbalk ------------------------------------------
   Het vormelement van jobup.nl: een roze vlak op navy, rechts afgeschuind. */
.titelbaan { display: flex; background: var(--navy); }

.titelbalk {
  background: var(--roze);
  color: var(--wit);
  padding: 18px calc(var(--schuin) + 44px) 18px var(--marge);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--schuin)) 100%, 0 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: none;
}
.titelbalk h1 { color: var(--wit); font-size: 30px; text-transform: uppercase; }
/* Een lang woord als FUNDERINGSTECHNIEK past in hoofdletters niet op een
   telefoon van 320 pixels: dan viel het half van het scherm. Afbreken met een
   streepje (de pagina is lang="nl"), en anders gewoon breken. */
.titelbalk { max-width: 100%; }
.titelbalk h1 { hyphens: auto; overflow-wrap: break-word; min-width: 0; }
.titelbalk__over { opacity: .9; }
.titelbalk__onder { font-size: 14px; }

.titelbaan__naast {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 var(--marge);
  color: var(--wit);
  font-size: 14px;
}

/* Een foto die er nog niet is. Wordt vervangen zodra de beelden er zijn; tot
   die tijd zie je wát er moet komen in plaats van een gat. */
.beeld {
  background: var(--foto);
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: flex-end;
  padding: 16px;
}
.beeld--breed { height: 300px; padding-left: var(--marge); padding-right: var(--marge); }

/* ===========================================================================
 *  5. Het overzicht
 * =========================================================================== */
.hero {
  position: relative;
  background: var(--navy);
  color: var(--wit);
  overflow: hidden;
}
.hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 64px;
}
.hero h1 { color: var(--wit); text-transform: uppercase; text-wrap: pretty; }
.hero__tekst { display: flex; flex-direction: column; gap: 18px; }
.hero__lead { font-size: 16px; max-width: 560px; opacity: .95; }
.hero__beeld { height: 280px; border-radius: var(--r-blok); }

/* De roze cirkel rechtsonder. Decoratie, dus aria-hidden in de HTML. */
.hero__cirkel {
  position: absolute;
  right: -60px; bottom: -140px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: var(--roze);
  opacity: .18;
}

.zoekbalk {
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: 640px;
  margin-top: 8px;
  padding: 6px 6px 6px 22px;
  border-radius: var(--r-pil);
  background: var(--wit);
}
.zoekbalk input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: 0;
  font: inherit;
  font-size: 15px;
  color: var(--tekst);
}
.zoekbalk input:focus { outline: 0; }
.zoekbalk select {
  border: 0;
  border-left: 1px solid var(--rand);
  border-radius: 0;
  background: 0;
  padding: 0 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--tekst);
  cursor: pointer;
}
.zoekbalk .knop { padding: 12px 26px; }

.hero__populair { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; opacity: .9; }

/* --- De telstrip met het aantal vacatures -------------------------------- */
.telstrip { display: flex; background: var(--vlak); }
.telstrip__aantal {
  background: var(--roze);
  color: var(--wit);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 60px 14px var(--marge);
  clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%);
}
.telstrip__sorteer {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 var(--marge);
  font-size: 14px;
}
.telstrip__sorteer select {
  border: 0;
  background: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
}

/* --- Het werkblad: filters links, vacatures rechts ----------------------- */
.overzicht { background: var(--vlak); }
.overzicht .wrap {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  padding-top: 40px;
  padding-bottom: 64px;
}

.filters { display: flex; flex-direction: column; gap: 8px; align-self: start; }
.filters__kop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--navy);
}
.filters__kop b { font-size: 17px; color: var(--navy); }
.filters__wis {
  border: 0; background: 0; padding: 0;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--roze);
  cursor: pointer;
}
.filters__wis:hover { text-decoration: underline; }

.filterblok {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rand);
}
.filterblok:last-of-type { border-bottom: 0; }
.filterblok__kop { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.filterblok__uitleg { font-size: 12px; color: var(--tekst-stil); line-height: 1.5; margin-bottom: 4px; }
.filterblok__chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* De urenschuif: twee handvatten over één baan. */
.urenschuif { padding: 8px 9px 0; }
.urenschuif__baan {
  position: relative;
  height: 4px;
  background: var(--rand);
  border-radius: 2px;
}
.urenschuif__actief { position: absolute; top: 0; bottom: 0; background: var(--roze); border-radius: 2px; }
.urenschuif input[type="range"] {
  position: absolute;
  left: -9px; right: -9px;
  top: -8px;
  width: calc(100% + 18px);
  height: 20px;
  margin: 0;
  background: 0;
  appearance: none;
  pointer-events: none;
}
.urenschuif input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--wit);
  border: 3px solid var(--roze);
  cursor: pointer;
  pointer-events: auto;
}
.urenschuif input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--wit);
  border: 3px solid var(--roze);
  cursor: pointer;
  pointer-events: auto;
}
.urenschuif__waarden {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-top: 12px;
}

.filterpaneel {
  background: var(--navy);
  color: var(--wit);
  border-radius: var(--r-blok);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.filterpaneel b { font-size: 15px; }
.filterpaneel p { font-size: 13px; line-height: 1.5; opacity: .9; }
.filterpaneel .knop { align-self: flex-start; font-size: 13px; padding: 9px 18px; }

/* --- De lijst ----------------------------------------------------------- */
.lijst { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* De kaarten zelf staan in een eigen houder, zodat app.js ze kan herordenen
   zonder de filterrij en de paginering mee te slepen. Die houder heeft dus
   zijn eigen ruimte tussen de kaarten nodig. */
[data-resultaten] { display: flex; flex-direction: column; gap: 14px; }

.actief {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  flex-wrap: wrap;
}
.actief__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid var(--roze);
  border-radius: var(--r-pil);
  background: var(--wit);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--roze);
  cursor: pointer;
}
.actief__chip:hover { background: var(--roze); color: var(--wit); }

.kaart {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 24px;
  padding: 22px 26px;
  border-radius: var(--r-blok);
  background: var(--wit);
  box-shadow: var(--schaduw);
  transition: box-shadow var(--vlot);
}
.kaart:hover { box-shadow: var(--schaduw-hoog); }

.kaart__hoofd { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kaart__bron { display: flex; align-items: center; gap: 10px; }
.kaart__org { color: var(--roze); }
.kaart__org--jobup { color: var(--navy); }
.kaart__datum { color: var(--tekst-stil); font-size: 12px; font-weight: 600; }
.kaart__punt { color: var(--rand-veld); }

/* De titel is de link, en die link dekt de hele kaart af. Zo is de kaart
   klikbaar zonder dat er een <a> omheen staat met vijf andere links erin --
   dat laatste is voor een schermlezer een doolhof. */
.kaart h3 a { color: var(--navy); }
.kaart h3 a::after { content: ""; position: absolute; inset: 0; }
.kaart:hover h3 a { color: var(--roze); text-decoration: none; }

.kaart__meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 14px;
}
.kaart__meta span { display: inline-flex; align-items: center; gap: 7px; }
.kaart__meta svg { color: var(--tekst-stil); flex: none; }

.kaart__samenvatting { font-size: 14px; line-height: 1.55; max-width: 640px; }
.kaart__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

.kaart__zij {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  text-align: right;
}
.kaart__salarislabel { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-stil); }
.kaart__salaris { font-size: 15px; font-weight: 700; color: var(--navy); }
.kaart__zij .knop { position: relative; z-index: 1; white-space: nowrap; }

.leeg {
  background: var(--wit);
  border-radius: var(--r-blok);
  padding: 48px 32px;
  text-align: center;
  box-shadow: var(--schaduw);
}
.leeg b { display: block; font-size: 18px; color: var(--navy); margin-bottom: 6px; }

.paginering {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding-top: 12px;
  font-size: 14px;
  font-weight: 600;
}
.paginering button {
  border: 0;
  background: 0;
  padding: 8px 14px;
  border-radius: var(--r-veld);
  font: inherit;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}
.paginering button:hover:not(:disabled) { background: var(--vlak-blauw); }
.paginering button[aria-current="page"] { background: var(--navy); color: var(--wit); }
.paginering button:disabled { opacity: .35; cursor: default; }

/* ===========================================================================
 *  6. De detailpagina
 * =========================================================================== */
.detail .wrap {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 56px;
  padding-top: 48px;
  padding-bottom: 64px;
  align-items: start;
}

.kruimels { font-size: 13px; color: var(--tekst-stil); margin-bottom: 24px; }
.kruimels a { color: var(--tekst-stil); }
.kruimels a:hover { color: var(--roze); }

.tekst { display: flex; flex-direction: column; gap: 32px; font-size: 15px; line-height: 1.7; }
.tekst__intro { font-size: 17px; line-height: 1.65; color: var(--navy); font-weight: 600; text-wrap: pretty; }
.tekst section { display: flex; flex-direction: column; gap: 10px; }
.tekst h2 { font-size: 22px; }
.tekst ul { display: flex; flex-direction: column; gap: 6px; }

.geschikt {
  background: var(--vlak);
  border-radius: var(--r-blok);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.geschikt b { font-size: 16px; color: var(--navy); }
.geschikt__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

.zijkolom { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; }

.paneel {
  background: var(--vlak);
  border-radius: var(--r-blok);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.paneel b { font-size: 16px; color: var(--navy); }
.paneel--rand { background: var(--wit); border: 1px solid var(--rand); }
.paneel--navy { background: var(--navy); color: var(--wit); padding: 22px 24px; gap: 8px; }
.paneel--navy b { color: var(--wit); font-size: 15px; }
.paneel--navy p { font-size: 13px; line-height: 1.5; opacity: .9; }
.paneel--navy a { color: var(--wit); font-weight: 700; font-size: 13px; text-decoration: underline; }

.kort { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14px; }
.kort dt { color: var(--tekst-stil); }
.kort dd { margin: 0; font-weight: 700; color: var(--navy); }

.contactkaart { display: flex; gap: 16px; align-items: center; }
.contactkaart__foto {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--foto);
  flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: var(--navy);
}
.contactkaart__wie { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.contactkaart__wie b { color: var(--navy); }
.contactkaart__wie a { font-weight: 600; }

.delen { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--tekst-stil); }
.delen__knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.delen__knoppen a {
  border: 1px solid var(--rand);
  border-radius: var(--r-veld);
  padding: 6px 12px;
  font-weight: 600;
  color: var(--navy);
}
.delen__knoppen a:hover { border-color: var(--navy); text-decoration: none; }

.vergelijkbaar { background: var(--vlak); }
.vergelijkbaar .wrap { padding-top: 40px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 18px; }
.vergelijkbaar h2 { font-size: 22px; }
.vergelijkbaar__rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.kaart--klein {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  border-radius: var(--r-blok);
  background: var(--wit);
  box-shadow: var(--schaduw);
  transition: box-shadow var(--vlot);
}
.kaart--klein:hover { box-shadow: var(--schaduw-hoog); }
.kaart--klein h3 { font-size: 17px; }
.kaart--klein h3 a::after { content: ""; position: absolute; inset: 0; }
.kaart--klein__meta { font-size: 13px; }
.kaart--klein__link { color: var(--roze); font-weight: 700; font-size: 14px; margin-top: 4px; }

/* ===========================================================================
 *  7. Solliciteren
 * =========================================================================== */
.formulierblad { background: var(--vlak); }
.formulierblad .wrap {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 56px;
  padding-top: 48px;
  padding-bottom: 64px;
  align-items: start;
}

.formulierkaart {
  background: var(--wit);
  border-radius: var(--r-blok);
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.stappen { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; }
.stappen__stap { display: flex; align-items: center; gap: 8px; color: var(--tekst-zwak); }
.stappen__stap--nu { color: var(--navy); }
.stappen__bol {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--rand);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  flex: none;
}
.stappen__stap--nu .stappen__bol { background: var(--roze); border-color: var(--roze); color: var(--wit); }
.stappen__lijn { flex: 1; height: 2px; background: var(--rand); }

.velden { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.velden .veld--vol { grid-column: 1 / -1; }

.upload {
  border: 2px dashed var(--rand-veld);
  border-radius: var(--r-blok);
  padding: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--vlak);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--vlot), background var(--vlot);
}
.upload:hover, .upload--over { border-color: var(--roze); background: var(--wit); }
.upload b { font-size: 14px; color: var(--navy); }
.upload span { font-size: 12px; color: var(--tekst-stil); }

.akkoord { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.5; }
.akkoord input { margin-top: 2px; }

.formulier__voet {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--vlak-blauw);
}

.stap {
  display: flex;
  gap: 12px;
  font-size: 13px;
  line-height: 1.5;
}
.stap__nr {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--roze);
  color: var(--wit);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex: none;
}

.melding {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--r-blok);
  font-size: 14px;
  line-height: 1.55;
}
.melding--goed { background: var(--vlak-blauw); color: var(--navy); }
.melding--fout { background: #fdeef2; color: var(--roze-donker); }

/* ===========================================================================
 *  8. Waarom via JobUp
 * =========================================================================== */
.stempel {
  position: absolute;
  left: var(--marge); top: 60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--wit);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  gap: 4px;
  transform: rotate(-8deg);
}
.stempel span { white-space: nowrap; font-size: 13px; }
.stempel .stempel__groot { font-size: 15px; font-weight: 700; }

.twee .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding-top: 64px;
  padding-bottom: 64px;
}
.twee h2 { text-wrap: pretty; line-height: 1.2; }
.twee__tekst { display: flex; flex-direction: column; gap: 16px; }
.twee__tekst p { font-size: 16px; line-height: 1.7; text-wrap: pretty; }
.twee__knoppen { display: flex; gap: 10px; flex-wrap: wrap; }

.stappenrij { display: flex; flex-direction: column; gap: 22px; }
.stappenrij__stap { display: flex; gap: 20px; align-items: flex-start; }
.stappenrij__icoon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--vlak-blauw);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.stappenrij__stap b { color: var(--navy); font-size: 16px; }
.stappenrij__stap p { font-size: 14px; line-height: 1.6; }

.cijfers { background: var(--vlak); }
.cijfers .wrap { padding-top: 56px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 28px; }
.cijfers__rij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.cijfer {
  background: var(--vlak-blauw);
  border-radius: var(--r-blok);
  padding: 26px 28px;
}
.cijfer b { display: block; font-size: 26px; color: var(--roze); }
.cijfer span { font-size: 14px; font-weight: 600; color: var(--navy); }

.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.quote {
  background: var(--navy);
  color: var(--wit);
  border-radius: var(--r-blok);
  padding: 30px 34px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quote__sterren { color: var(--ster); font-size: 14px; letter-spacing: .1em; }
.quote p { font-size: 15px; line-height: 1.7; }
.quote b { font-size: 14px; }

/* ===========================================================================
 *  9. Smaller scherm
 *
 *  Het ontwerp is voor 1280 gemaakt. Hieronder staat wat er gebeurt als het
 *  scherm smaller is -- en dat is bij een vacaturesite de helft van het
 *  verkeer, dus het is geen bijzaak.
 * =========================================================================== */
@media (max-width: 1100px) {
  :root { --marge: 40px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 32px; }
  .hero__beeld { height: 220px; }
  .detail .wrap,
  .formulierblad .wrap { grid-template-columns: 1fr; gap: 36px; }
  .zijkolom { position: static; }
  .titelbalk { width: 100% !important; }
  .titelbaan { flex-direction: column; }
  .titelbaan__naast { justify-content: flex-start; padding: 16px var(--marge); }
}

@media (max-width: 1024px) {
  .menu {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 20;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px var(--marge) 16px;
    background: var(--wit);
    border-bottom: 1px solid var(--rand);
    box-shadow: var(--schaduw-hoog);
  }
  .menu a { display: block; width: 100%; padding: 10px 0; }
  .menu a[aria-current="page"] { border-bottom: 0; }
  .menu--open { display: flex; }
  .menuknop { display: inline-flex; }
  .kop .wrap { position: relative; }

  /* De filters gaan in een uitklappaneel. Op een telefoon wil je eerst
     vacatures zien, niet eerst twintig vinkjes. */
  .overzicht .wrap { grid-template-columns: 1fr; gap: 20px; }
  .filters { display: none; }
  .filters--open { display: flex; }
  .filterknop { display: inline-flex; }

  .vergelijkbaar__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cijfers__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .twee .wrap { grid-template-columns: 1fr; gap: 36px; }
  .quotes { grid-template-columns: 1fr; }
  .voet .wrap { grid-template-columns: 1fr 1fr; }
}

.filterknop { display: none; }

@media (max-width: 720px) {
  :root { --marge: 24px; --schuin: 20px; }
  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  .topbalk .wrap { justify-content: flex-start; gap: 16px; overflow-x: auto; white-space: nowrap; }
  .kaart { grid-template-columns: 1fr; }
  .kaart__zij { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; text-align: left; }
  .zoekbalk { flex-wrap: wrap; border-radius: var(--r-blok); padding: 12px; }
  .zoekbalk input { flex-basis: 100%; padding: 4px 6px; }
  .zoekbalk select { border-left: 0; padding-left: 6px; }
  .zoekbalk .knop { flex: 1; }
  .velden { grid-template-columns: 1fr; }
  .formulierkaart { padding: 24px 22px; }
  .vergelijkbaar__rij { grid-template-columns: 1fr; }
  .cijfers__rij { grid-template-columns: 1fr 1fr; }
  .voet .wrap { grid-template-columns: 1fr; gap: 24px; }
  .stempel { width: 150px; height: 150px; left: 24px; top: 30px; }
  .stempel span { font-size: 11px; }
  .stempel .stempel__groot { font-size: 12px; }
  .formulier__voet { flex-direction: column-reverse; align-items: stretch; }
}

/* Wie liever geen beweging ziet, krijgt geen beweging. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===========================================================================
   Nagekomen, na het bekijken van de eerste schermen
   =========================================================================== */

/* De knoppen naast de titelbalk hebben weinig ruimte; zonder dit breekt
   "Solliciteer direct" over twee regels. */
.titelbaan__naast .knop { white-space: nowrap; }

/* De titel van een kleine kaart is navy zoals elke vacaturetitel, en pas roze
   als je erover gaat. Zonder deze regel wint de standaardkleur van een link. */
.kaart--klein h3 a { color: var(--navy); }
.kaart--klein:hover h3 a { color: var(--roze); text-decoration: none; }

/* Een chip die een aankruisvakje verbergt (de situatievragen op het
   sollicitatieformulier) kleurt mee als hij aanstaat. */
.chip:has(input:checked) { background: var(--navy); border-color: var(--navy); color: var(--wit); }

/* ===========================================================================
   Het logo
   =========================================================================== */

/* Staat het echte bestand in assets/img/, dan is dit een <img>. De hoogte
   bepaalt de maat; de breedte volgt, zodat een logo met andere verhoudingen
   niet vervormt. */
.merk__logo { height: 52px; width: auto; }

/* De nagetekende versie: JOB in navy, UP in het lichtere blauwgrijs uit het
   logo, met de drie chevrons ertussen. */
.merk__up { color: #7a8fa3; }
.merk__woord svg { margin: 0 2px; }

/* In de footer staan ze op navy. Daar is de witte ondergrond van het favicon
   niet nodig: de drie kleuren staan alle drie op navy. */
.voet__merk { display: inline-flex; align-items: center; gap: 2px; }
.voet__merk svg { display: block; }

/* ===========================================================================
   De filters die de bezoeker echt moeten helpen
   =========================================================================== */

/* Het eerste blok is het belangrijkste blok. Het krijgt geen kader en geen
   kleur -- alleen wat meer lucht, zodat het oog er begint zonder dat het
   schreeuwt. */
.filterblok--eerst { padding-top: 4px; }

/* Een vinkje met een regel uitleg eronder. De uitleg staat er voor wie het
   woord niet meteen plaatst: "prikkelarm" is vakjargon totdat er "rustig,
   weinig geluid en drukte" onder staat. */
.vink { align-items: flex-start; gap: 10px; padding: 3px 0; }
.vink input { margin-top: 3px; }
.vink__tekst { display: flex; flex-direction: column; line-height: 1.4; }
.vink__uitleg { font-size: 12px; color: var(--tekst-stil); margin-top: 1px; }
.vink__aantal { margin-left: auto; padding-left: 8px; padding-top: 1px; }

/* Een optie die met de huidige filters niets meer oplevert. Niet verbergen:
   dan springt de lijst rond terwijl je aan het kiezen bent, en zie je niet
   waarom iets weg is. Grijs en niet aanklikbaar is duidelijker. */
.is-leeg { opacity: .42; }
.is-leeg input, .is-leeg.chip { pointer-events: none; }
.chip.is-leeg { opacity: .42; }

.chip__aantal { font-size: 12px; color: var(--tekst-stil); }
.chip__aantal:not(:empty)::before { content: "("; }
.chip__aantal:not(:empty)::after { content: ")"; }
.chip[aria-pressed="true"] .chip__aantal { color: rgba(255, 255, 255, .8); }

/* De balk boven de lijst: de filterknop op smal scherm, en de bewaarde. */
.lijst__balk { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.chip--bewaard { padding: 7px 14px; font-weight: 600; }
.chip--bewaard svg { color: var(--roze); }
.chip--bewaard[aria-pressed="true"] { background: var(--roze); border-color: var(--roze); color: var(--wit); }
.chip--bewaard[aria-pressed="true"] svg { color: var(--wit); fill: var(--wit); }

/* ===========================================================================
   Bewaren
   =========================================================================== */

/* Het hartje op een kaart. Staat rechtsboven en ligt bovenop de kaartlink,
   zodat een klik erop niet de vacature opent. */
.bewaarknop {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--rand);
  border-radius: 50%;
  background: var(--wit);
  color: var(--tekst-zwak);
  cursor: pointer;
  transition: color var(--vlot), border-color var(--vlot), background var(--vlot);
}
.bewaarknop:hover { border-color: var(--roze); color: var(--roze); }
.bewaarknop[aria-pressed="true"] { border-color: var(--roze); color: var(--roze); }
.bewaarknop[aria-pressed="true"] svg { fill: var(--roze); }

/* Op de vacaturepagina is het een knop met tekst, op de navy balk. */
.knop[data-bewaar][aria-pressed="true"] { background: rgba(255, 255, 255, .16); }
.knop[data-bewaar][aria-pressed="true"] svg { fill: currentColor; }

.kaart__zij { align-items: flex-end; }

/* ===========================================================================
   Het zoekveld met suggesties
   =========================================================================== */
/* De lijst hangt onder het invoerveld, zodat hij begint waar je typt. Op een
   smal scherm vult de zoekbalk de hele breedte en is dat hetzelfde; op een
   breed scherm staan het regioveld en de knop ernaast en zou de lijst daar
   anders onnodig onder doorlopen. Ankerpunt is daarom .zoekbalk__veld. */
.zoekbalk { position: relative; }
.zoekbalk__veld { flex: 1; min-width: 0; }
.zoekbalk__veld input { width: 100%; }

.suggesties {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--r-blok);
  box-shadow: var(--schaduw-raster);
  max-height: 320px;
  overflow-y: auto;
}

.suggestie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--r-veld);
  font-size: 15px;
  color: var(--tekst);
  cursor: pointer;
}
.suggestie b { color: var(--navy); }
.suggestie:hover,
.suggestie--aan { background: var(--vlak-blauw); }
.suggestie__soort { font-size: 12px; color: var(--tekst-zwak); white-space: nowrap; }

/* ===========================================================================
   Wat de werkplek biedt, op de kaart en op de vacaturepagina
   =========================================================================== */
.tag--meer { background: 0; border: 1px dashed var(--rand-veld); color: var(--tekst-stil); }

/* Het lijstje met vinkjes op de vacaturepagina. Geen opsommingstekens maar
   groene vinkjes: dit is wat de werkplek wél biedt. */
.werkplek { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin-top: 4px; }
.werkplek div { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.werkplek svg { color: #76bc21; flex: none; margin-top: 3px; }

@media (max-width: 720px) {
  .werkplek { grid-template-columns: 1fr; }
  .suggesties { left: 0; right: 0; }
}

/* De beschrijving zoals hij uit de feed van Van Waarde komt: één blok met
   alinea's, lijsten en tussenkopjes. De maten zijn gelijk aan die van de
   handgeschreven secties, zodat het niet uitmaakt waar een tekst vandaan komt. */
.tekst__vrij { display: block; }
.tekst__vrij h3 { font-size: 22px; margin: 26px 0 10px; }
.tekst__vrij h3:first-child { margin-top: 0; }
.tekst__vrij h4 { font-size: 17px; margin: 22px 0 8px; }
.tekst__vrij p { margin: 0 0 14px; }
.tekst__vrij ul, .tekst__vrij ol { margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
.tekst__vrij > *:last-child { margin-bottom: 0; }

/* ===========================================================================
   De echte beelden
   =========================================================================== */

/* Een foto vult zijn band helemaal, ongeacht de verhoudingen van het bestand.
   Zonder object-fit zou een liggende foto in een band van 260 pixels worden
   uitgerekt, en dat zie je meteen aan de gezichten. */
.beeld { overflow: hidden; position: relative; padding: 0; }
.beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* De band op de detailpagina en de hero hebben ronde hoeken waar dat hoort. */
.hero__beeld { border-radius: var(--r-blok); }
.beeld--rond { border-radius: var(--r-blok); }

/* Het grijze vlak met een omschrijving is er nog voor de plekken waar nog geen
   beeld is. Die houdt zijn tekst en zijn ruimte. */
.beeld:not(:has(img)) { display: flex; align-items: flex-end; padding: 16px; }
.beeld--breed:not(:has(img)) { padding-left: var(--marge); padding-right: var(--marge); }

/* De foto van de contactpersoon is rond, net als het grijze rondje dat er
   stond. */
img.contactkaart__foto { object-fit: cover; }

/* Afwerking van de zoek- en sollicitatieroute. */
.skiplink { position: fixed; top: 8px; left: 8px; transform: translateY(-160%); z-index: 100; padding: 12px 20px; background: var(--wit); box-shadow: var(--schaduw-hoog); font-weight: 700; }
.skiplink:focus { transform: none; }
main:focus { outline: none; }
button, input, select, textarea { font: inherit; }
button:disabled { cursor: wait; opacity: .65; }
.menu__bewaard { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.menu__bewaard span { background: var(--vlak-blauw); border-radius: 50%; padding: 1px 7px; font-size: 12px; }
/* DE HERO LIGT BOVEN ALLES WAT ERONDER STAAT, en dat is nodig voor de
   suggestielijst van het zoekveld: die hangt uit de hero naar beneden, tot
   over de roze telbalk en de eerste vacaturekaart heen. Zonder deze z-index
   verdween hij daar half achter -- de telbalk maakt door zijn clip-path een
   eigen stapelcontext, en die wordt later getekend dan de hero.
   De z-index doet meteen wat isolation hier eerst deed: hij maakt van de hero
   een stapelcontext, zodat .hero__cirkel met z-index -1 achter de inhoud maar
   vóór de navy achtergrond blijft in plaats van eronder te verdwijnen.
   Twee is bewust laag: het mobiele menu (20) en het filterpaneel (70) horen er
   nog steeds overheen te kunnen. */
.hero { overflow: visible; position: relative; z-index: 2; }
.hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); gap: 26px 48px; padding-top: 42px; padding-bottom: 36px; }
.hero h1 { font-size: clamp(32px, 3.2vw, 44px); text-transform: none; letter-spacing: -.035em; line-height: 1.15; }
.hero__tekst { gap: 18px; min-width: 0; }
.hero__overline { color: #dfecf5; }
.hero__lead { line-height: 1.75; }
.hero__beeld { border-radius: 8px 48px 8px 8px; box-shadow: 0 10px 30px #142b402b; }
.hero__zoeken { grid-column: 1 / -1; position: relative; z-index: 3; }
.hero__zeker { display: flex; gap: 8px; align-items: center; font-size: 13px; margin-top: 14px; }
.hero__cirkel { right: 0; bottom: 0; width: 300px; height: 300px; border-radius: 100% 0 0 0; z-index: -1; }
.zoekbalk { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .75fr) auto; gap: 12px; border-radius: 8px; padding: 8px 8px 8px 20px; margin-top: 0; }
.zoekbalk__veld { min-width: 0; position: relative; }
.zoekbalk input { min-height: 44px; }
/* WAAR DE FOCUS STAAT IN DE ZOEKBALK, om de balk heen en niet om het losse
   veld. Een hoekige navy rechthoek midden in een ronde witte balk ziet eruit
   als een vergissing, en hij stond er twee keer: om het zoekveld en om de
   regiokeuze. Zo volgt de ring de vorm van de balk zelf.
   Wit, want de balk staat op navy en dat is de enige kleur die daar genoeg
   contrast tegen geeft -- roze haalt de 3:1 van de richtlijnen niet.
   :focus-within en niet :has(:focus-visible): dit werkt in elke browser, en
   dat iemand die met de muis klikt de ring ook ziet is geen bezwaar.
   Welk van de twee velden het is, blijft zichtbaar: in het zoekveld knippert
   de cursor, en de regiokeuze krijgt hieronder een eigen vlak. */
.zoekbalk:focus-within { outline: 2px solid var(--wit); outline-offset: 3px; }
.zoekbalk input:focus-visible { outline: 0; }
.zoekbalk select:focus-visible { outline: 0; background: var(--vlak-blauw); border-radius: var(--r-veld); }
.zoekbalk select { width: 100%; min-width: 0; height: 44px; }
.zoekbalk .knop { white-space: nowrap; }
.hero__populair { margin-top: 15px; opacity: 1; }
/* Acht pixels onder de balk in plaats van onder het veld: het veld houdt zelf
   nog acht pixels over tot de rand van de balk, en anders zou de lijst dwars
   door de witte focusring heen beginnen. */
.suggesties { top: calc(100% + 16px); min-width: 100%; width: max(100%, 360px); max-width: calc(100vw - 48px); }
.telstrip { align-items: center; }
.telstrip__aantal { padding-left: max(var(--marge), calc((100vw - var(--inhoud)) / 2)); }
.telstrip__sorteer { padding-right: max(var(--marge), calc((100vw - var(--inhoud)) / 2)); }
.lijst__intro { margin-bottom: 4px; }
.lijst__intro h2 { font-size: 25px; letter-spacing: -.025em; }
.lijst__intro p { margin-top: 6px; font-size: 14px; color: var(--tekst-stil); }
.lijst__bewaarhint { font-size: 12px; color: var(--tekst-stil); }
[data-resultaten] { scroll-margin-top: 24px; }
[data-resultaten]:focus { outline: none; }
.kaart { border: 1px solid var(--rand); padding: 24px; gap: 20px; }
.kaart:hover { border-color: var(--rand-veld); }
.kaart:focus-within { outline: 2px solid var(--navy); outline-offset: 3px; }
.kaart h3 { font-size: 21px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.kaart__samenvatting { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kaart__meta { gap: 6px 16px; font-size: 13px; }
.kaart__zij .knop { pointer-events: none; font-size: 13px; padding: 10px 15px; }
.kaart__zij { min-width: 152px; }
.bewaarknop { min-width: 44px; min-height: 44px; }
.leeg > .ico { color: var(--roze); margin-bottom: 14px; }
.leeg h2 { font-size: 22px; margin-bottom: 12px; }
.leeg__knoppen { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.filters__sluit, .filters__voet { display: none; }
.filters__kop { flex-wrap: wrap; }
.filterknop { min-height: 44px; }
.filterknop [data-filteraantal] { border-radius: 50%; background: var(--navy); color: white; min-width: 22px; font-size: 12px; }
.solliciteerbalk { display: none; }
.formulier__intro { display: flex; align-items: flex-start; gap: 10px; padding: 16px; background: var(--vlak-blauw); border-radius: var(--r-blok); color: var(--navy); font-size: 14px; }
.formulier__intro .ico { flex: none; margin-top: 2px; }
.situatie { border: 0; padding: 0; margin: 0; min-width: 0; }
.situatie .chip:has(input:focus-visible) { outline: 2px solid var(--navy); outline-offset: 3px; }
.upload { position: relative; cursor: pointer; }
.upload input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload:focus-within { outline: 2px solid var(--navy); outline-offset: 3px; }
.upload [data-bestandsnaam] { color: var(--navy); font-weight: 600; overflow-wrap: anywhere; }
.upload__verwijder { border: 0; background: none; padding: 10px 0; text-decoration: underline; text-align: left; color: var(--roze); cursor: pointer; align-self: flex-start; }
.akkoord { flex-wrap: wrap; }
.akkoord > span { flex: 1; }
.akkoord .veld__fout { flex-basis: 100%; }
.melding--fout:focus { outline: 2px solid var(--roze); outline-offset: 3px; }
.tekst__vrij, .contactkaart__wie { overflow-wrap: anywhere; }
html:not(.js) .menu { display: flex; position: static; box-shadow: none; }
html:not(.js) .menuknop, html:not(.js) .zoekbalk, html:not(.js) .hero__populair, html:not(.js) .filters,
html:not(.js) .telstrip__sorteer, html:not(.js) [data-bewaar] { display: none; }
html:not(.js) .overzicht .wrap { grid-template-columns: 1fr; }

@media (max-width: 1100px) {
  .hero .wrap { gap: 28px; }
  .hero__beeld { height: 240px !important; }
}
@media (max-width: 1024px) {
  .js .filterknop { display: inline-flex; }
  .js .filters { display: none; }
  .js .filters--open { display: flex; position: fixed; inset: 0; align-self: stretch; z-index: 70; overflow-y: auto; overscroll-behavior: contain; background: var(--wit); padding: 0 24px; gap: 10px; }
  .filters-open { overflow: hidden; }
  .filters__kop { position: sticky; top: 0; z-index: 2; background: var(--wit); padding: 16px 0; gap: 12px; border-bottom: 1px solid var(--rand); }
  .filters__kop b { margin-right: auto; }
  .filters__sluit { display: inline-flex; align-items: center; justify-content: center; background: var(--vlak-blauw); border: 0; border-radius: 50%; width: 44px; height: 44px; color: var(--navy); cursor: pointer; }
  .filters__voet { display: block; position: sticky; bottom: 0; background: var(--wit); padding: 14px 0 max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--rand); margin-top: auto; }
  .filters .filterpaneel { display: none; }
  .lijst__balk { position: sticky; top: 0; z-index: 5; background: var(--vlak); padding: 12px 0; }
}
@media (max-width: 720px) {
  :root { --marge: 20px; }
  .titelbaan__naast { flex-wrap: wrap; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); padding-top: 30px; padding-bottom: 26px; gap: 24px; }
  .hero h1 { font-size: 34px; }
  .hero__lead { font-size: 15px; line-height: 1.7; }
  .hero__beeld { display: none; }
  .hero__overline { font-size: 10px; }
  .zoekbalk { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 6px; }
  .zoekbalk__veld { border-bottom: 1px solid var(--rand); }
  .zoekbalk input, .zoekbalk select { font-size: 16px; padding-left: 6px; }
  .zoekbalk .knop { width: 100%; min-height: 46px; }
  .suggesties { width: 100%; }
  .telstrip { display: block; }
  .telstrip__aantal { clip-path: none; padding: 12px var(--marge); font-size: 14px; }
  .telstrip__sorteer { padding: 16px var(--marge) 0; justify-content: flex-start; }
  .overzicht .wrap { padding-top: 24px; }
  .kaart { padding: 20px; }
  .kaart__zij { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
  .kaart__zij .knop { padding: 10px 12px; font-size: 12px; }
  .kaart__salaris { font-size: 13px; }
  .kaart__salarislabel { font-size: 10px; }
  .kaart__zij > div:empty { min-width: 0; }
  .kaart__bron { flex-wrap: wrap; gap: 6px; }
  .kaart h3 { font-size: 20px; }
  .lijst__intro h2 { font-size: 23px; }
  .telstrip__sorteer select { min-height: 44px; }
  .veld input, .veld select, .veld textarea { font-size: 16px; }
  .formulierkaart { padding: 24px 18px; }
  .solliciteerbalk { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: fixed; bottom: 0; left: 0; right: 0; padding: 12px var(--marge) max(12px, env(safe-area-inset-bottom)); z-index: 30; background: var(--wit); border-top: 1px solid var(--rand); box-shadow: 0 -3px 20px #24415a14; }
  .solliciteerbalk b { font-size: 12px; color: var(--navy); display: block; }
  .solliciteerbalk span { font-size: 11px; color: var(--tekst-stil); }
  .solliciteerbalk .knop { font-size: 13px; padding: 12px 16px; white-space: nowrap; }
  body:has(.solliciteerbalk) { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  body:has(.solliciteerbalk) :focus-visible { scroll-margin-bottom: 100px; }
  .leeg { padding: 32px 22px; }
}
@media (max-width: 380px) {
  .kaart__zij { grid-template-columns: 44px minmax(0, 1fr); }
  .kaart__zij .knop { grid-column: 1 / -1; text-align: center; }
  .solliciteerbalk > div { display: none; }
  .solliciteerbalk .knop { width: 100%; }
}

/* ===========================================================================
   De vacaturehulp

   Een gesprek over de vacatures, voor wie niet weet waar hij op moet filteren.
   Het paneel hangt rechtsonder en dekt op een telefoon het hele scherm.

   RUSTIG, want de bezoekers hier zijn niet gebaat bij een chatwidget die
   springt, piept of vanzelf opengaat. Hij staat er, hij wacht, en hij gaat
   alleen open als je erop klikt.
   =========================================================================== */

/* Zonder JavaScript werkt hier niets, dus dan staat er ook niets. */
html:not(.js) .chatknop, html:not(.js) .chat { display: none; }

.chatknop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border: 0;
  border-radius: var(--r-pil);
  background: var(--roze);
  color: var(--wit);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 24px #24415a2e;
  transition: background var(--vlot), transform var(--vlot);
}
.chatknop:hover { background: var(--roze-donker); }
.chatknop:active { transform: translateY(1px); }
.chatknop[aria-expanded="true"] { display: none; }

.chat {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 65;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 40px));
  max-height: min(620px, calc(100vh - 40px));
  border-radius: 14px;
  background: var(--wit);
  box-shadow: 0 14px 50px #14283c33;
  overflow: hidden;
}

.chat__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--navy);
  color: var(--wit);
}
.chat__kop b { display: block; font-size: 16px; }

/* DIT IS GEEN KLEINE LETTER. Wie hier typt hoort te weten dat er geen mens
   meeleest -- niet halverwege, maar voordat hij begint. */
.chat__soort { display: block; font-size: 12px; opacity: .85; margin-top: 1px; }

.chat__sluit {
  display: inline-flex;
  padding: 6px;
  border: 0;
  border-radius: 50%;
  background: 0;
  color: var(--wit);
  cursor: pointer;
}
.chat__sluit:hover { background: #ffffff24; }

.chat__loop {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--vlak);
}

.chat__bericht {
  max-width: 88%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.chat__bericht--bot { align-self: flex-start; background: var(--wit); border: 1px solid var(--rand); }
.chat__bericht--jij { align-self: flex-end; background: var(--navy); color: var(--wit); }
.chat__bericht--fout { align-self: stretch; max-width: none; background: #fdecf1; border: 1px solid var(--roze); }

/* De vacatures onder een antwoord. Deze kaartjes bouwt de server uit onze
   eigen gegevens; de titel en het adres komen nooit van het taalmodel. */
.chat__kaarten { display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.chat__kaart {
  display: block;
  padding: 11px 14px;
  border: 1px solid var(--rand);
  border-left: 3px solid var(--roze);
  border-radius: var(--r-blok);
  background: var(--wit);
  color: var(--tekst);
}
.chat__kaart:hover { border-color: var(--rand-veld); border-left-color: var(--roze); text-decoration: none; }
.chat__kaart b { display: block; color: var(--navy); font-size: 14.5px; line-height: 1.35; }
.chat__kaart span { font-size: 12.5px; color: var(--tekst-stil); }

/* De startvragen. Niet iedereen weet wat je aan zoiets kunt vragen, en een
   leeg veld met een knipperende cursor is dan geen uitnodiging. */
.chat__tips { display: flex; flex-wrap: wrap; gap: 7px; align-self: stretch; }
.chat__tip {
  padding: 8px 13px;
  border: 1px solid var(--rand-veld);
  border-radius: var(--r-pil);
  background: var(--wit);
  font: inherit;
  font-size: 13px;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}
.chat__tip:hover { border-color: var(--roze); color: var(--roze); }

.chat__bezig { display: inline-flex; gap: 4px; align-self: flex-start; padding: 14px; }
.chat__bezig i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rand-veld);
  animation: chatstip 1.2s infinite ease-in-out;
}
.chat__bezig i:nth-child(2) { animation-delay: .15s; }
.chat__bezig i:nth-child(3) { animation-delay: .3s; }
@keyframes chatstip { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

.chat__voet { padding: 12px 16px 14px; border-top: 1px solid var(--rand); background: var(--wit); }

.chat__regel { display: flex; gap: 8px; align-items: center; }
.chat__regel input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--rand-veld);
  border-radius: var(--r-pil);
  background: var(--wit);
  font: inherit;
  font-size: 15px;
  color: var(--tekst);
}
.chat__regel input:focus { outline: 0; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(47, 84, 113, .12); }

.chat__stuur {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--roze);
  color: var(--wit);
  cursor: pointer;
}
.chat__stuur:hover { background: var(--roze-donker); }
.chat__stuur[disabled] { background: var(--rand-veld); cursor: default; }

@media (max-width: 560px) {
  .chat { right: 0; bottom: 0; width: 100%; max-height: none; inset: 0; border-radius: 0; }
  .chatknop { right: 14px; bottom: 14px; padding: 12px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .chat__bezig i { animation: none; opacity: .5; }
}

/* ===========================================================================
   Vindbaarheid en de stap naar solliciteren
   ---------------------------------------------------------------------------
   De blokken die erbij kwamen om beter gevonden te worden en om van lezen
   sneller naar solliciteren te gaan: de regio- en vakgebiedpagina's
   (tools/pagina-landing.mjs), de links daarheen, en het blok "Zo gaat het als
   je solliciteert" onder elke vacaturetekst.
   =========================================================================== */

/* --- Zo gaat het als je solliciteert ------------------------------------ */
.vervolg {
  border: 1px solid var(--rand);
  border-left: 4px solid var(--roze);
  border-radius: var(--r-blok);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--wit);
}
.tekst .vervolg { gap: 16px; }
.vervolg__stappen {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: stap;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vervolg__stappen li {
  counter-increment: stap;
  position: relative;
  padding-left: 40px;
  font-size: 14px;
  line-height: 1.6;
}
.vervolg__stappen li::before {
  content: counter(stap);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--wit);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vervolg__stappen b { color: var(--navy); }
.vervolg__knoppen { display: flex; gap: 12px 20px; flex-wrap: wrap; align-items: center; }
.vervolg__bel { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--navy); }
.vervolg__zeker { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tekst-stil); margin: 0; }
.vervolg__zeker .ico { color: var(--roze); flex: none; }

/* --- Door naar de regio en het vakgebied -------------------------------- */
.vergelijkbaar__verder { display: flex; gap: 10px 28px; flex-wrap: wrap; font-size: 14px; font-weight: 700; }
.vergelijkbaar__verder a { display: inline-flex; align-items: center; gap: 6px; }

/* --- Vacatures per regio en vakgebied ----------------------------------- */
.gebieden { border-top: 1px solid var(--rand); }
.gebieden .wrap { padding-top: 40px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 16px; }
.gebieden h2 { font-size: 22px; }
.gebieden__rij { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: start; }
.gebieden__soort { font-size: 13px; font-weight: 700; color: var(--tekst-stil); padding-top: 8px; }
.gebieden__links { display: flex; gap: 8px; flex-wrap: wrap; }
a.chip { color: var(--navy); text-decoration: none; }
a.chip:hover { text-decoration: none; }
.chip--hier { background: var(--navy); border-color: var(--navy); color: var(--wit); }
.chip--hier .chip__aantal { color: inherit; opacity: .8; }

/* --- De tekst en vragen op een regio- of vakgebiedpagina ---------------- */
.landing { background: var(--vlak); }
.landing .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  padding-top: 48px;
  padding-bottom: 56px;
  align-items: start;
}
.landing__over { display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: 1.7; }
.landing__over h2 { font-size: 24px; line-height: 1.25; text-wrap: pretty; }
.landing__over a:not(.knop) { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }

.vragen { display: flex; flex-direction: column; gap: 10px; }
.vragen h2 { font-size: 22px; margin-bottom: 4px; }
.vraag { background: var(--wit); border-radius: var(--r-blok); box-shadow: var(--schaduw); }
.vraag summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 48px 16px 20px;
  font-weight: 700;
  color: var(--navy);
  position: relative;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--roze);
}
.vraag[open] summary::after { content: "–"; }
.vraag p { padding: 0 20px 18px; font-size: 14px; line-height: 1.65; margin: 0; }

@media (max-width: 1024px) {
  .landing .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 720px) {
  .vervolg { padding: 22px 20px; }
  .vervolg__knoppen .knop { width: 100%; }
  .gebieden__rij { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .gebieden__soort { padding-top: 0; }
}

/* ===========================================================================
 *  Leesblad — een pagina die vooral tekst is (/privacy/).
 *
 *  Smal gehouden: een regel van meer dan zo'n 75 tekens leest slecht, en wie
 *  hier komt wil iets precies weten, niet scannen.
 * =========================================================================== */
.leesblad { padding: 56px 0 72px; background: var(--wit); }
.leesblad__tekst { max-width: 720px; display: flex; flex-direction: column; gap: 14px; }
.leesblad__tekst h2 { font-size: 22px; margin-top: 22px; }
.leesblad__tekst p,
.leesblad__tekst li { font-size: 16px; line-height: 1.7; text-wrap: pretty; }
.leesblad__tekst ul { display: flex; flex-direction: column; gap: 8px; }
.leesblad__tekst a { color: var(--roze); text-decoration: underline; }
.leesblad__kort { font-size: 18px !important; color: var(--navy); }

@media (max-width: 720px) {
  .leesblad { padding: 32px 0 48px; }
  .leesblad__tekst h2 { font-size: 20px; margin-top: 14px; }
  .leesblad__kort { font-size: 17px !important; }
}