/* ============================================================
   Vacatures in de Groenvoorziening
   Zelfde stylesheet als banenzonderdiploma.nl (selectors gelijk houden, dan
   kan een verbetering met een diff over). Alleen de kleuren hieronder zijn
   anders, uit het logo: groen #68a81e, donkergroen #083309, ink #1d1d1b.
   De variabelen houden hun oude namen: --oranje is hier de groene hoofdkleur
   (knoppen, links), --geel het lichtere merkgroen (accenten). Wat alleen
   voor deze site geldt, staat in assets/css/groen.css.
   ============================================================ */

:root {
  --ink: #083309;
  --oranje: #3e7b13;
  --oranje-donker: #2f6110;
  --oranje-licht: #eef6e4;
  --geel: #68a81e;
  --geel-donker: #467d10;
  --geel-licht: #eef6e3;
  --geel-rand: #c5e0a5;
  --amber: #68a81e;
  --amber-licht: #eef6e3;
  --papier: #ffffff;
  --grijs: #f3f7ee;
  --lijn: #e0e7d8;
  --tekst: #3a4035;
  --tekst-licht: #61695a;
  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 20px;
  --schaduw: 0 14px 40px rgba(17, 17, 17, 0.10);
  --container: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

/* Na zoeken, filteren of bladeren staat #vacatures in de URL (bzd_resultaten_url).
   Dan direct bij de vacatures beginnen, zonder eerst bovenaan te laden en
   zichtbaar naar beneden te scrollen. Andere ankers blijven soepel scrollen. */
html:has(#vacatures:target) { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tekst);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--oranje-donker); }

:focus-visible {
  outline: 3px solid var(--oranje);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Typografie ---------- */

h1, h2, h3 {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-stretch: 112%;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); font-weight: 850; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
h3 { font-size: 1.2rem; line-height: 1.25; }

p { margin: 0 0 1em; }

.kicker {
  display: block;
  color: var(--oranje-donker);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.sectie-intro { max-width: 46rem; }
.sectie-intro p { color: var(--tekst-licht); }

.accent-z { color: var(--oranje); }

.ruimte-boven { margin-top: 2.5rem; }

/* ---------- Knoppen ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-s);
  padding: 0.8rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-primair { background: var(--oranje); color: #fff; }
.btn-primair:hover { background: var(--oranje-donker); color: #fff; }

.btn-donker { background: var(--ink); color: #fff; }
.btn-donker:hover { background: #000; }

.btn-omlijnd { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-omlijnd:hover { background: var(--ink); color: #fff; }

.btn-omlijnd-licht { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.btn-omlijnd-licht:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); color: #fff; }

.btn-breed { width: 100%; margin-top: 0.75rem; }

.link-meer {
  font-weight: 700;
  color: var(--oranje-donker);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 1px;
}
.link-meer:hover { color: var(--ink); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--papier);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header.is-vast {
  border-color: var(--lijn);
  box-shadow: 0 6px 24px rgba(17, 17, 17, 0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 0;
}

.logo img { height: 44px; width: auto; }

.hoofdnav { display: none; }

.header-acties { display: flex; align-items: center; gap: 0.75rem; }
.header-acties .btn { padding: 0.6rem 1.1rem; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 12px 11px;
  background: none;
  border: 1px solid var(--lijn);
  border-radius: var(--radius-s);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.mobiel-nav {
  display: none;
  border-top: 1px solid var(--lijn);
  background: var(--papier);
  padding: 0.75rem 0 1.25rem;
}
.mobiel-nav.is-open { display: block; }
.mobiel-nav ul { list-style: none; margin: 0; padding: 0; }
.mobiel-nav a {
  display: block;
  padding: 0.85rem 0.25rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--grijs);
}

/* ---------- Hero ---------- */

/* De foto als banner (.hero-podium): witte tekst op een donkere ondergrond
   en de foto aan de rechterkant tot aan de rand. Daaronder valt een witte
   zoekkaart (.zoekkaart) over de onderkant van de foto, met de zoekbalk als
   pil (.zoekpaneel-hero), de veelgezochte termen en de vinkjes.

   Leesbaarheid: de tekst staat nooit direct op de foto. Op mobiel staat de
   foto boven de tekst en loopt hij onderaan over in zwart; op brede schermen
   ligt er een zwart verloop over de linkerkant van de foto dat pas na de
   tekstkolom (--tekstrand) doorzichtig wordt. Zo blijft het contrast ook
   boven de lichtpuntjes in de foto ruim boven 4,5:1. */

.hero { position: relative; }

.hero-podium {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  padding: 17rem 0 7.5rem;
}
.hero-podium > .container { position: relative; z-index: 2; }

.hero-beeld {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 21rem;
  z-index: 1;
}
.hero-beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 22%;
}
.hero-beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0) 45%, rgba(17, 17, 17, 0.75) 72%, rgba(17, 17, 17, 0.96) 86%, var(--ink) 100%);
}

.hero-kop { max-width: 34rem; }
.hero-kop h1 {
  color: #fff;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  letter-spacing: -0.03em;
  margin-bottom: 0.35em;
}
.hero-punt { color: var(--geel); }
.hero-sub {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.86);
  max-width: 30rem;
  margin: 0;
}
.hero-acties { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

.hero-ballon { display: none; }

.zoekkaart {
  position: relative;
  z-index: 3;
  margin-top: -5rem;
  background: #fff;
  border-radius: var(--radius-l);
  box-shadow: 0 18px 50px rgba(17, 17, 17, 0.14);
  padding: 1.5rem 1rem 1.75rem;
}
.zoekkaart-titel {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-align: center;
  margin: 0 0 1.25rem;
}
.zoekkaart-aantal {
  background: linear-gradient(to top, var(--geel) 0.34em, transparent 0.34em);
  padding: 0 0.05em;
}

.hero-vertrouwen {
  display: grid;
  gap: 1.25rem;
  justify-content: center;
  margin: 2rem auto 0;
}
.hero-vinkjes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.hero-vinkjes li { display: flex; align-items: center; gap: 0.65rem; color: var(--tekst); }
.hero-vinkjes strong { color: var(--ink); }
.hero-vinkjes svg { color: var(--geel-donker); flex: none; }
.hero-werkgever { margin: 0; color: var(--tekst); }
.hero-werkgever a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.hero-werkgever a:hover { text-decoration-color: var(--geel); }

@media (min-width: 720px) {
  .hero-podium { padding-top: 22rem; }
  .hero-beeld { height: 26rem; }
  .hero-vertrouwen { grid-template-columns: auto auto; gap: 0; }
  .hero-vinkjes { padding-right: 3rem; }
  .hero-werkgever {
    display: flex;
    align-items: center;
    gap: 0.35em;
    padding-left: 3rem;
    border-left: 1px solid var(--lijn);
  }
}

@media (min-width: 900px) {
  .zoekkaart { margin-top: -6.5rem; padding: 2.25rem 2.5rem 2.5rem; }
}

/* Brede schermen: tekst links, foto rechts tot aan de rand. De foto begint
   op 30% van de breedte, zodat het gezicht rechts van de tekstkolom valt.
   --tekstrand is de rechterkant van de tekstkolom; tot daar is het verloop
   (bijna) zwart, daarna wordt het in 18rem doorzichtig. */
@media (min-width: 1024px) {
  .hero-podium {
    --tekstrand: calc(max(1.25rem, (100% - 1180px) / 2 + 1.25rem) + 36rem);
    padding: 6.5rem 0 11rem;
    min-height: 40rem;
  }
  .hero-beeld { left: 30%; height: auto; bottom: 0; }
  .hero-beeld img { object-position: 25% 30%; }
  .hero-podium::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(90deg, var(--ink) 0, rgba(17, 17, 17, 0.94) var(--tekstrand), rgba(17, 17, 17, 0) calc(var(--tekstrand) + 18rem)),
      linear-gradient(0deg, rgba(17, 17, 17, 0.45), rgba(17, 17, 17, 0) 35%);
  }
  .hero-beeld::after { display: none; }
}

/* Tekstballon naast het gezicht, alleen als er naast het hoofd ruimte is. */
@media (min-width: 1280px) {
  .hero-ballon {
    display: block;
    position: absolute;
    z-index: 2;
    right: 3%;
    top: 16%;
    max-width: 12rem;
    margin: 0;
    padding: 1rem 1.25rem;
    background: #fff;
    color: var(--ink);
    border-radius: 1.4rem;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.3;
    text-align: center;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  }
  .hero-ballon strong {
    display: block;
    font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
  }
  .hero-ballon::after {
    content: "";
    position: absolute;
    left: 1.4rem;
    bottom: -11px;
    border-style: solid;
    border-width: 12px 14px 0 0;
    border-color: #fff transparent transparent transparent;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-kop, .zoekpaneel, .zoekkaart, .hero-ballon { animation: instap 0.6s ease both; }
  .zoekkaart { animation-delay: 0.1s; }
  .hero-ballon { animation-delay: 0.3s; }

  @keyframes instap {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ---------- Zoekpaneel ---------- */

.zoekpaneel {
  background: var(--ink);
  border-radius: var(--radius-l);
  padding: 1.5rem;
  margin-top: 2.25rem;
  box-shadow: var(--schaduw);
}

.sectie .zoekpaneel { margin-top: 0; margin-bottom: 2rem; }

.zoekvelden { display: grid; gap: 0.75rem; }

.veld { position: relative; }
.veld > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tekst-licht);
  pointer-events: none;
}

.veld input,
.veld select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 2px solid transparent;
  border-radius: var(--radius-s);
  padding: 0.95rem 1rem 0.95rem 2.8rem;
}
.veld select { appearance: none; cursor: pointer; }
.veld input:focus, .veld select:focus { outline: none; border-color: var(--amber); }
.veld input::placeholder { color: #9a948b; }

.veld-select::before {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid var(--tekst-licht);
  border-bottom: 2.5px solid var(--tekst-licht);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.zoekvelden .btn { padding: 0.95rem 1.75rem; font-size: 1.05rem; }

.zoek-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.zoek-chips .chips-label { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; }
.chip {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 0.35rem 0.95rem;
  cursor: pointer;
}
.chip:hover { background: var(--oranje); border-color: var(--oranje); }

/* Zoekbalk op de homepage: witte pil met korte labels (Wat, Waar, Afstand)
   en een ronde zoekknop. Op mobiel een afgeronde kaart met de velden onder
   elkaar en een brede knop. */
.zoekpaneel-hero {
  position: relative;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0;
  background: none;
  box-shadow: none;
  animation: none;
}
.zoekpaneel-hero .zoekvelden {
  grid-template-columns: 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid var(--lijn);
  border-radius: var(--radius-l);
  box-shadow: 0 14px 36px rgba(17, 17, 17, 0.10);
  padding: 0.4rem;
}
.zoekpaneel-hero .zoekvelden:focus-within { border-color: var(--geel); }
.zoekpaneel-hero .veld { padding: 0.75rem 1rem; }
.zoekpaneel-hero .veld + .veld { border-top: 1px solid var(--lijn); }
.zoekpaneel-hero .veld > svg { display: none; }
.zoekpaneel-hero .veld-labels { display: block; }
.veld-label {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink);
  margin-bottom: 0.15rem;
}
.zoekpaneel-hero .veld input,
.zoekpaneel-hero .veld select {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0.1rem 1.75rem 0.1rem 0;
  font-size: 1.02rem;
}
.zoekpaneel-hero .veld-select::before { top: auto; bottom: 1.35rem; right: 1.25rem; transform: rotate(45deg); }

.zoekpaneel-hero .zoekknop {
  margin-top: 0.4rem;
  width: 100%;
  border-radius: var(--radius-m);
  background: linear-gradient(135deg, #f06a3c, var(--oranje-donker));
  box-shadow: 0 8px 18px rgba(229, 78, 38, 0.30);
}
.zoekpaneel-hero .zoekknop:hover { background: var(--oranje-donker); }

.zoekpaneel-hero .zoek-chips { justify-content: center; margin-top: 1.5rem; }
.zoekpaneel-hero .zoek-chips .chips-label { color: var(--tekst-licht); }
.zoekpaneel-hero .chip { color: var(--ink); background: #fff; border-color: var(--lijn); }

@media (min-width: 900px) {
  .zoekpaneel-hero .zoekvelden {
    grid-template-columns: 1.35fr 1fr 0.75fr auto;
    align-items: center;
    border-radius: 999px;
    padding: 0.45rem 0.45rem 0.45rem 1.1rem;
  }
  .zoekpaneel-hero .veld { padding: 0.45rem 1.4rem; }
  .zoekpaneel-hero .veld + .veld { border-top: 0; border-left: 1px solid var(--lijn); }
  .zoekpaneel-hero .veld-select::before { bottom: 1.05rem; right: 1.5rem; }
  .zoekpaneel-hero .zoekknop {
    margin: 0 0 0 0.5rem;
    width: 60px;
    height: 60px;
    padding: 0;
    border-radius: 50%;
  }
  .zoekpaneel-hero .zoekknop-tekst {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---------- Secties ---------- */

.sectie { padding: 4.5rem 0; }
.sectie-eerste { padding-top: 2.5rem; }
.sectie-grijs { background: var(--grijs); }

.sectie-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 2.25rem;
}
.sectie-kop .link-meer { margin-bottom: 0.4rem; }

.overzicht-kop { margin-bottom: 1.75rem; }

.kruimels {
  font-size: 0.92rem;
  color: var(--tekst-licht);
  margin-bottom: 1.25rem;
}
.kruimels a { color: inherit; text-decoration: none; }
.kruimels a:hover { color: var(--oranje-donker); }
.kruimels span { margin: 0 0.4rem; }

/* ---------- Beroepen ---------- */

/* minmax(0, 1fr) in plaats van 1fr: anders wordt een kolom nooit smaller dan
   het langste woord (zoals Productiemedewerker) en loopt het raster buiten beeld. */
.beroepen-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
}

.beroep-kaart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-m);
  padding: 1.4rem 1.25rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.beroep-kaart:hover { border-color: var(--oranje); transform: translateY(-3px); }

.beroep-icoon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--oranje-licht);
  color: var(--oranje-donker);
  border-radius: 12px;
  margin-bottom: 0.4rem;
}

.beroep-kaart strong {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}
.beroep-kaart small { color: var(--tekst-licht); font-size: 0.95rem; }

.beroep-kaart.alle {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  justify-content: center;
}
.beroep-kaart.alle .beroep-icoon { background: rgba(255, 255, 255, 0.12); color: var(--amber); }
.beroep-kaart.alle small { color: rgba(255, 255, 255, 0.7); }

/* Tot 1100px zijn de kolommen te smal voor lange namen als Productiemedewerker.
   Daarom compacte rijen: op een telefoon onder elkaar, daarboven in twee
   kolommen. Op de homepage staat het icoon links met naam en aantal ernaast,
   op het banenoverzicht (zonder icoon) de naam met het aantal eronder. */
@media (max-width: 1099px) {
  .beroepen-grid { gap: 0.6rem; }

  .beroep-kaart {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 0.9rem;
    row-gap: 0.1rem;
    padding: 0.85rem 1rem;
  }
  .beroep-icoon { grid-row: 1 / 3; width: 42px; height: 42px; margin-bottom: 0; }
  .beroep-kaart strong, .beroep-kaart small { grid-column: 2; }

  .beroepen-grid-breed .beroep-kaart { display: flex; align-items: flex-start; justify-content: center; gap: 0.1rem; }
}

/* ---------- Vacatures ---------- */

.vacature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

.vacature-kaart {
  display: flex;
  flex-direction: column;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-m);
  padding: 1.5rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.vacature-kaart:hover { border-color: var(--oranje); transform: translateY(-3px); }

.salaris-tag {
  align-self: flex-start;
  background: var(--amber-licht);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.92rem;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  margin-bottom: 0.9rem;
}

.vacature-kaart h3 { margin-bottom: 0.4rem; }
.vacature-kaart h3 a { color: inherit; text-decoration: none; }
.vacature-kaart h3 a:hover { color: var(--oranje-donker); }

.vacature-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  color: var(--tekst-licht);
  font-size: 0.97rem;
  margin-bottom: 0.75rem;
}
.meta-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.meta-item svg { color: var(--oranje); flex: none; }

.vacature-tekst {
  color: var(--tekst-licht);
  font-size: 0.98rem;
  margin-bottom: 1.1rem;
}

.vacature-kaart .link-meer { margin-top: auto; align-self: flex-start; }

.telling { font-weight: 600; color: var(--tekst-licht); margin-bottom: 1.25rem; }

.actieve-filters { margin-bottom: 0.75rem; color: var(--tekst-licht); }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--oranje-licht);
  color: var(--ink);
  font-weight: 600;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
}
.filter-chip a { color: var(--oranje-donker); text-decoration: none; font-size: 1.1rem; line-height: 1; }

.leeg {
  background: var(--grijs);
  border-radius: var(--radius-m);
  padding: 3rem 1.5rem;
  text-align: center;
}

/* ---------- Paginering ---------- */

.paginering {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
}
.paginering a,
.paginering .huidig {
  display: inline-block;
  min-width: 44px;
  text-align: center;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--lijn);
  border-radius: var(--radius-s);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.paginering a:hover,
.paginering .huidig {
  background: var(--oranje);
  border-color: var(--oranje);
  color: #fff;
}
.paginering .punten { padding: 0.55rem 0.35rem; color: var(--tekst-licht); }

/* ---------- Locaties ---------- */

.locatie-groep { margin-bottom: 2rem; }
.locatie-groep:last-child { margin-bottom: 0; }
.locatie-groep h3 { margin-bottom: 1rem; }

.locatie-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.locatie-chips a {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.locatie-chips a span { color: var(--tekst-licht); font-weight: 500; }
.locatie-chips a:hover { border-color: var(--oranje); background: var(--oranje); color: #fff; }
.locatie-chips a:hover span { color: rgba(255, 255, 255, 0.8); }

/* ---------- Stappen ---------- */

.stappen { display: grid; gap: 2rem; counter-reset: stap; }
.stap { counter-increment: stap; }
.stap::before {
  content: counter(stap, decimal-leading-zero);
  display: block;
  font-stretch: 112%;
  font-weight: 850;
  font-size: 3rem;
  line-height: 1;
  color: var(--oranje);
  margin-bottom: 0.75rem;
}
.stap h2, .stap h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.stap p { color: var(--tekst-licht); margin: 0; }

/* ---------- Donkere band ---------- */

.band-donker {
  background: var(--ink);
  color: #fff;
  clip-path: polygon(0 2.5rem, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
  padding: 7rem 0;
}
.band-donker h2 { color: #fff; }
.band-donker p { color: rgba(255, 255, 255, 0.75); max-width: 38rem; }

.band-inner { display: grid; gap: 2rem; align-items: center; }
.band-acties { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ---------- Contact ---------- */

.contact-grid { display: grid; gap: 2.5rem; align-items: center; }

.contact-foto { position: relative; max-width: 380px; margin: 0; }
.contact-foto img {
  border-radius: var(--radius-l);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}
.contact-foto::after {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  border-radius: var(--radius-l);
  background: var(--oranje);
  z-index: -1;
}
.contact-foto figcaption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  background: var(--papier);
  border-radius: var(--radius-s);
  padding: 0.5rem 1rem;
  font-weight: 700;
  color: var(--ink);
  box-shadow: var(--schaduw);
}
.contact-foto figcaption small { display: block; font-weight: 500; color: var(--tekst-licht); }

.contact-acties { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.5rem; }

/* ---------- FAQ ---------- */

.faq-lijst { max-width: 52rem; border-top: 1px solid var(--lijn); }
.faq-lijst details { border-bottom: 1px solid var(--lijn); }
.faq-lijst summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  padding: 1.25rem 0.25rem;
}
.faq-lijst summary::-webkit-details-marker { display: none; }
.faq-lijst summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--oranje-licht);
  color: var(--oranje-donker);
  font-size: 1.3rem;
  font-weight: 600;
}
.faq-lijst details[open] summary::after { content: "\2212"; }
.faq-lijst details p { padding: 0 3.5rem 1.4rem 0.25rem; margin: 0; color: var(--tekst-licht); }

/* ---------- Detailpagina ---------- */

.detail-grid { display: grid; gap: 2.5rem; }

.detail-kop { margin-bottom: 2rem; }
.detail-kop .intro { font-size: 1.1rem; color: var(--tekst-licht); max-width: 42rem; }

.detail-sectie { margin-bottom: 2.5rem; }
.detail-sectie h2 { font-size: 1.5rem; }
.detail-sectie ul { padding-left: 1.2rem; }
.detail-sectie li { margin-bottom: 0.45rem; }
.detail-sectie p { max-width: 42rem; }

.blok {
  background: var(--grijs);
  border-radius: var(--radius-m);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.blok h2 { font-size: 1.2rem; }
.blok dl { margin: 0; }
.blok dt { font-weight: 700; color: var(--ink); margin-top: 0.9rem; }
.blok dd { margin: 0; color: var(--tekst-licht); }
.blok-contact { background: var(--amber-licht); }

/* ---------- Formulier ---------- */

.formulier { max-width: 34rem; }
.formulier-rij { margin-bottom: 1rem; }
.formulier label {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.formulier input[type="text"],
.formulier input[type="email"],
.formulier input[type="tel"],
.formulier textarea {
  width: 100%;
  font: inherit;
  border: 1px solid var(--lijn);
  border-radius: var(--radius-s);
  padding: 0.75rem 0.9rem;
  background: #fff;
}
.formulier input:focus, .formulier textarea:focus { outline: none; border-color: var(--oranje); }

.honeypot { position: absolute; left: -9999px; }

.melding {
  border-radius: var(--radius-m);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.melding p { margin: 0.25rem 0 0; }
.melding-goed { background: var(--amber-licht); }
.melding-fout { background: var(--oranje-licht); }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.75);
  padding: 4rem 0 2rem;
  font-size: 0.98rem;
}

.footer-grid { display: grid; gap: 2.5rem; margin-bottom: 3rem; }

.footer-merk .logo-doos {
  display: inline-block;
  background: #fff;
  border-radius: var(--radius-s);
  padding: 0.6rem 0.9rem;
  margin-bottom: 1.1rem;
}
.footer-merk img { height: 40px; width: auto; }
.footer-merk p { max-width: 22rem; }

.site-footer h2 { color: #fff; font-size: 1.02rem; margin-bottom: 0.9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.55rem; }
.site-footer a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.site-footer a:hover { color: var(--amber); }

.footer-onder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  font-size: 0.92rem;
  font-weight: 400;
}

/* ---------- Breekpunten ---------- */

@media (min-width: 640px) {
  .zoekvelden { grid-template-columns: 1fr 1fr; }
  .zoekvelden .veld-wat { grid-column: 1 / -1; }
  .vacature-grid { grid-template-columns: repeat(2, 1fr); }
  .stappen { grid-template-columns: repeat(3, 1fr); }
  .beroepen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .hoofdnav {
    display: flex;
    gap: 1.9rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .hoofdnav a {
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    padding: 0.4rem 0;
    border-bottom: 2px solid transparent;
  }
  .hoofdnav a:hover,
  .hoofdnav a[aria-current="page"] { border-color: var(--oranje); }
  .nav-toggle, .mobiel-nav { display: none !important; }


  .zoekvelden { grid-template-columns: 1.4fr 1fr 0.7fr auto; }
  .zoekvelden .veld-wat { grid-column: auto; }

  .vacature-grid { grid-template-columns: repeat(3, 1fr); }

  .band-inner { grid-template-columns: 1.4fr 1fr; }
  .band-acties { justify-content: flex-end; }

  .contact-grid { grid-template-columns: 5fr 7fr; }

  .detail-grid { grid-template-columns: 7fr 4fr; gap: 3.5rem; align-items: start; }
  .detail-zij { position: sticky; top: 6rem; }

  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* Pas vanaf deze breedte zijn vier beroepen naast elkaar breed genoeg. */
@media (min-width: 1100px) {
  .beroepen-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   Aanvullingen: artikelen, landingspagina's en sollicitatieformulier
   ============================================================ */

.tekstblok { max-width: 46rem; }
.tekstblok h2 { margin-top: 2rem; }
.tekstblok h3 { margin-top: 1.75rem; font-size: 1.15rem; }
.tekstblok ul { padding-left: 1.2rem; }
.tekstblok li { margin-bottom: 0.45rem; }

.bron { font-size: 0.92rem; color: var(--tekst-licht); }

/* Artikelen */

.artikel { max-width: 48rem; }
.artikel-kop { margin-bottom: 2rem; }
.artikel-meta { color: var(--tekst-licht); font-size: 0.95rem; }
.artikel .intro { font-size: 1.12rem; color: var(--tekst); }

.inhoudsopgave {
  background: var(--grijs);
  border-radius: var(--radius-m);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.inhoudsopgave h2 { font-size: 1.05rem; margin-bottom: 0.6rem; }
.inhoudsopgave ul { margin: 0; padding-left: 1.1rem; }
.inhoudsopgave li { margin-bottom: 0.35rem; }
.inhoudsopgave a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--lijn); }
.inhoudsopgave a:hover { color: var(--oranje-donker); border-color: currentColor; }

.artikel-tekst h2 { margin-top: 2.25rem; scroll-margin-top: 6rem; }
.artikel-tekst ul { padding-left: 1.2rem; }
.artikel-tekst li { margin-bottom: 0.45rem; }
.artikel-tekst p { max-width: 42rem; }

/* Blogs van de oude WordPress-site: tabellen, citaten en afbeeldingen */
.artikel-tekst h3 { margin-top: 1.75rem; font-size: 1.15rem; }
.artikel-tekst ol { padding-left: 1.3rem; }
.artikel-tekst li > p { margin: 0; }
.artikel-tekst img { border-radius: var(--radius-s); margin: 1rem 0; }
.artikel-tekst hr { border: 0; border-top: 1px solid var(--lijn); margin: 2rem 0; }
.artikel-tekst blockquote {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  background: var(--grijs);
  border-left: 3px solid var(--oranje);
  border-radius: var(--radius-s);
}
.artikel-tekst blockquote p:last-child { margin-bottom: 0; }
.artikel-tekst .btn { margin: 0.25rem 0.5rem 0.25rem 0; }
.tabel-scroll { overflow-x: auto; margin: 1.25rem 0; }
.tabel-scroll table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tabel-scroll th,
.tabel-scroll td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--lijn); text-align: left; vertical-align: top; }
.tabel-scroll th { background: var(--grijs); font-weight: 600; }

.linklijst { list-style: none; margin: 0; padding: 0; }
.linklijst li { margin-bottom: 0.5rem; }
.linklijst a { font-weight: 600; color: var(--oranje-donker); }

.artikel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.artikel-kaart {
  display: flex;
  flex-direction: column;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-m);
  padding: 1.5rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.artikel-kaart:hover { border-color: var(--oranje); transform: translateY(-3px); }
.artikel-kaart h3 { margin-bottom: 0.5rem; }
.artikel-kaart p { color: var(--tekst-licht); font-size: 0.97rem; margin-bottom: 1rem; }
.artikel-kaart .link-meer { margin-top: auto; align-self: flex-start; }

/* Sollicitatieformulier */

.sollicitatie .formulier { max-width: 38rem; }
.sollicitatie-intro { color: var(--tekst-licht); max-width: 38rem; }

.formulier-rij-dubbel { display: grid; gap: 0 1rem; }
.verplicht { color: var(--oranje); }
.hulp { display: block; color: var(--tekst-licht); font-size: 0.9rem; margin-top: 0.3rem; }

.keuzeblok {
  border: 0;
  padding: 0;
  margin: 1.5rem 0;
}
.keuzeblok legend {
  font-weight: 700;
  color: var(--ink);
  padding: 0;
  margin-bottom: 0.6rem;
}

.keuze {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: #fff;
  border: 2px solid var(--lijn);
  border-radius: var(--radius-s);
  padding: 0.9rem 1rem;
  margin-bottom: 0.6rem;
  cursor: pointer;
  font-weight: 400;
}
.keuze:hover { border-color: var(--oranje); }
.keuze input { margin-top: 0.25rem; accent-color: var(--oranje); }
.keuze strong { display: block; color: var(--ink); }
.keuze small { color: var(--tekst-licht); }
.keuze:has(input:checked) { border-color: var(--oranje); background: var(--oranje-licht); }

.blok-cv, .blok-vragen {
  border-left: 3px solid var(--amber);
  padding-left: 1rem;
  margin-bottom: 1.25rem;
}
.blok-cv[hidden], .blok-vragen[hidden] { display: none; }

.formulier input[type="file"] {
  width: 100%;
  font: inherit;
  border: 1px dashed var(--lijn);
  border-radius: var(--radius-s);
  padding: 0.9rem;
  background: #fff;
}

.akkoord { margin-top: 1.25rem; }
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 400;
  color: var(--tekst);
}
.checkbox input { margin-top: 0.3rem; accent-color: var(--oranje); }

.veilig {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tekst-licht);
  font-size: 0.94rem;
  margin-top: 1rem;
}
.veilig svg { color: var(--oranje); flex: none; }

@media (min-width: 640px) {
  .artikel-grid { grid-template-columns: repeat(2, 1fr); }
  .formulier-rij-dubbel { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .artikel-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Geel accent (#f9be02) door de hele site
   ============================================================ */

/* Knop: inschrijven en andere gele acties */
.btn-geel {
  background: var(--geel);
  color: var(--ink);
}
.btn-geel:hover { background: var(--geel-donker); color: var(--ink); }

/* Teller in het menu: hoeveel vacatures staan er online */
.nav-teller {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  margin-left: 0.45rem;
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  background: var(--oranje);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: middle;
}
.hoofdnav a:hover .nav-teller { background: var(--oranje-donker); }
.mobiel-nav .nav-teller { background: var(--oranje); }

/* Header: gele inschrijfknop naast het menu */
.header-acties .btn-geel { box-shadow: 0 2px 0 var(--geel-donker); }

/* Gele onderstreping bij belangrijke woorden */
.markeer {
  background: linear-gradient(to top, var(--geel) 0.34em, transparent 0.34em);
  padding-bottom: 0.05em;
}

/* Salaris blijft geel, nu in de nieuwe tint */
.salaris-tag {
  background: var(--geel-licht);
  border: 1px solid var(--geel-rand);
}

/* Kaarten: gele hoeklijn bij hover naast de oranje rand */
.vacature-kaart { border-top: 3px solid transparent; }
.vacature-kaart:hover { border-top-color: var(--geel); }
.beroep-kaart { border-top: 3px solid transparent; }
.beroep-kaart:hover { border-top-color: var(--geel); }
.artikel-kaart { border-top: 3px solid transparent; }
.artikel-kaart:hover { border-top-color: var(--geel); }

/* Stappen: nummers in geel met oranje accent */
.stap::before { color: var(--geel-donker); }

/* Sectiekicker krijgt een geel streepje */
.kicker::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--geel);
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* Zoekpaneel: gele focus en gele zoekknop-hover */
.veld input:focus, .veld select:focus { border-color: var(--geel); }
.zoek-chips .chip:hover { background: var(--geel); border-color: var(--geel); color: var(--ink); }

/* Donkere band: gele knop en gele lijn */
.band-donker { border-top: 4px solid var(--geel); }
.band-donker .btn-primair { background: var(--geel); color: var(--ink); }
.band-donker .btn-primair:hover { background: var(--geel-donker); color: var(--ink); }

/* FAQ: gele plus */
.faq-lijst summary::after { background: var(--geel-licht); color: var(--geel-donker); }
.faq-lijst summary:hover { color: var(--oranje-donker); }

/* Formulier: gele accenten op keuzes en vinkjes */
.keuze input { accent-color: var(--geel-donker); }
.checkbox input { accent-color: var(--geel-donker); }
.keuze:has(input:checked) { border-color: var(--geel); background: var(--geel-licht); }
.blok-cv, .blok-vragen { border-left-color: var(--geel); }
.veilig svg { color: var(--geel-donker); }

/* Meldingen */
.melding-goed { background: var(--geel-licht); border: 1px solid var(--geel-rand); }

/* Kennisbank: gele leeslijn */
.inhoudsopgave { border-left: 4px solid var(--geel); }

/* Footer: gele hoverkleur en gele scheidingslijn */
.site-footer { border-top: 4px solid var(--geel); }
.site-footer a:hover { color: var(--geel); }

/* Werkgeversband */
.band-werkgever { background: var(--geel); padding: 3.5rem 0; }
.band-werkgever h2 { margin-bottom: 0.6rem; }
.band-werkgever p { color: var(--ink); margin-bottom: 0; }

@media (min-width: 900px) {
  .band-werkgever { padding: 4.5rem 0; }
}

/* ============================================================
   Topbalk en headerindeling
   ============================================================ */

.topbalk {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.88rem;
}
.topbalk-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
.topbalk-ervaringen {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
}
.topbalk-ervaringen:hover { color: #fff; text-decoration: underline; }
.sterren { display: inline-flex; gap: 2px; color: var(--geel); }

/* Header: logo links, menu in het midden, acties rechts */

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
}
.header-acties { justify-content: flex-end; }

/* Mobiel: logo iets kleiner en de knop plus het menu netjes rechts */
@media (max-width: 719px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
  .header-inner { grid-template-columns: auto auto; justify-content: space-between; gap: 0.75rem; }
  .logo img { height: 38px; }
  .header-acties { gap: 0.5rem; }
  .header-acties .btn { padding: 0.65rem 1rem; font-size: 0.97rem; }
}

@media (max-width: 400px) {
  .header-acties .btn { padding: 0.6rem 0.8rem; font-size: 0.92rem; }
  .logo img { height: 34px; }
}
.hoofdnav-wrap { display: none; justify-content: center; }
.hoofdnav { justify-content: center; }

@media (min-width: 1040px) {
  .hoofdnav-wrap { display: flex; }
}

/* ============================================================
   Bestand uploaden: nette dropzone
   ============================================================ */

.upload {
  border: 2px dashed var(--lijn);
  border-radius: var(--radius-m);
  background: var(--grijs);
  padding: 2rem 1.25rem;
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
}
.upload:hover, .upload.sleep { border-color: var(--geel); background: var(--geel-licht); }
.upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.upload-icoon {
  width: 52px;
  height: 52px;
  margin: 0 auto 0.75rem;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--geel-licht);
  border: 1px solid var(--geel-rand);
  color: var(--geel-donker);
}
.upload.sleep .upload-icoon { background: #fff; }
.upload-titel { font-weight: 700; color: var(--ink); margin: 0 0 0.2rem; }
.upload-sub { color: var(--tekst-licht); font-size: 0.95rem; margin: 0; }
.upload-sub .kies {
  color: var(--oranje-donker);
  text-decoration: underline;
  font-weight: 600;
}
.upload-bestand {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
  padding: 0.6rem 0.9rem;
  background: #fff;
  border: 1px solid var(--lijn);
  border-radius: var(--radius-s);
  font-weight: 600;
  color: var(--ink);
}
.upload-bestand.toon { display: inline-flex; }
.upload-bestand button {
  background: none;
  border: 0;
  color: var(--tekst-licht);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}
.upload-voorwaarden { color: var(--tekst-licht); font-size: 0.88rem; margin: 0.6rem 0 0; }

/* Somcontrole tegen spam */

.som { max-width: 14rem; }
.som input { text-align: center; font-weight: 700; }
.hulp-inline { color: var(--tekst-licht); font-weight: 400; font-size: 0.9rem; }

/* Tussen 900 en 1040 pixels past het volledige menu niet naast het logo en de
   knop. Daar hoort dus het hamburgermenu te staan. */
@media (min-width: 900px) and (max-width: 1039px) {
  .nav-toggle { display: inline-flex !important; }
  .mobiel-nav { display: none !important; }
  .mobiel-nav.is-open { display: block !important; }
}

/* Footer: vijf kolommen en een servicebalk met de algemene pagina's */
/* Servicelinks links, copyright en Irys Vacaturelab rechts op dezelfde regel */
.footer-balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 1.5rem;
}
.footer-service {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  font-weight: 600;
}
.footer-service a { color: rgba(255, 255, 255, 0.85); }
.footer-service a:hover { color: var(--geel); }

/* Cookie-instellingen: een knop die eruitziet als de links ernaast. */
.footer-knop {
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background: none;
  border: 0;
  cursor: pointer;
}
.footer-knop:hover { color: var(--geel); }

/* ---------- Cookiebanner (inc/cookies.php, assets/js/cookies.js) ---------- */

/* Zwevende kaart linksonder, geen muur over de pagina: de site blijft
   bruikbaar, ook zonder keuze. Weigeren is net zo groot als accepteren. */
.cookiebanner {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 200;
  width: min(460px, calc(100% - 2.5rem));
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  padding: 1.5rem;
  color: var(--tekst);
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-l);
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.22);
}
.cookiebanner:focus { outline: none; }
.cookiebanner h2 { margin: 0 0 0.5rem; font-size: 1.2rem; color: var(--ink); }
.cookiebanner p { margin: 0 0 1.1rem; font-size: 0.93rem; line-height: 1.55; }

.cookie-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.cookie-knoppen .btn { width: 100%; padding: 0.75rem 1rem; }

.cookie-meer {
  margin-top: 0.85rem;
  padding: 0;
  font: inherit;
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--ink);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cookie-meer:hover { color: var(--oranje-donker); }

.cookie-opties {
  display: grid;
  gap: 0.9rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--lijn);
}
.cookie-opties[hidden] { display: none; }

.cookie-optie { display: flex; align-items: flex-start; gap: 0.85rem; }
.cookie-optie label { display: grid; gap: 0.15rem; font-size: 0.9rem; line-height: 1.5; cursor: pointer; }
.cookie-optie strong { color: var(--ink); }
.cookie-optie strong span { margin-left: 0.4rem; font-size: 0.78rem; font-weight: 600; color: var(--tekst-licht); }

/* Schakelaar in plaats van een los vinkje. */
.cookie-optie input {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  margin: 0.1rem 0 0;
  appearance: none;
  background: #d5d3ce;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cookie-optie input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--papier);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(17, 17, 17, 0.3);
  transition: transform 0.2s ease;
}
.cookie-optie input:checked { background: var(--oranje); }
.cookie-optie input:checked::before { transform: translateX(18px); }
.cookie-optie input:disabled { cursor: not-allowed; opacity: 0.6; }
.cookie-optie input:focus-visible { outline: 3px solid var(--oranje); outline-offset: 2px; }

.cookie-opslaan { width: 100%; padding: 0.7rem 1rem; }

@media (max-width: 559px) {
  .cookiebanner {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    width: auto;
    max-height: calc(100vh - 1.5rem);
    padding: 1.25rem;
  }
  .cookie-knoppen { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 2rem; }
}

/* Voorwaardelijke formulierblokken en bredere formulieren */
.voorwaardelijk[hidden] { display: none; }
.formulier-groot { max-width: 100%; }
.formulier-kop {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 2rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lijn);
  font-size: 1.2rem;
}
.formulier-kop:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.stapnummer {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--geel);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 800;
  flex: none;
}
.formulier-rij-drie { display: grid; gap: 0 1rem; }
.formulier select {
  width: 100%;
  font: inherit;
  border: 1px solid var(--lijn);
  border-radius: var(--radius-s);
  padding: 0.75rem 0.9rem;
  background: #fff;
  color: var(--ink);
}
.formulier input[type="number"],
.formulier input[type="url"] {
  width: 100%;
  font: inherit;
  border: 1px solid var(--lijn);
  border-radius: var(--radius-s);
  padding: 0.75rem 0.9rem;
  background: #fff;
}

@media (min-width: 640px) {
  .formulier-rij-drie { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Reviews
   ============================================================ */

.review-lijst { display: grid; gap: 1.25rem; max-width: 46rem; }
.review {
  margin: 0;
  padding: 1.5rem;
  background: var(--grijs);
  border-left: 4px solid var(--geel);
  border-radius: var(--radius-m);
}
.review blockquote { margin: 0 0 1rem; color: var(--ink); font-size: 1.1rem; }
.review blockquote p:last-child { margin-bottom: 0; }
.review .sterren { display: flex; margin-bottom: 0.75rem; }
.review figcaption { color: var(--tekst-licht); font-size: 0.95rem; }
.review figcaption strong { display: block; color: var(--ink); }

/* ============================================================
   Snel solliciteren en bedanktpagina (inc/profiel.php)
   ============================================================ */

.profiel-balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  background: var(--grijs);
  border-radius: var(--radius-s);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}
.profiel-balk p { margin: 0; overflow-wrap: anywhere; }
.profiel-balk form { margin: 0; }

.link-knop {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--oranje-donker);
  text-decoration: underline;
  cursor: pointer;
}
.link-knop:hover { color: var(--ink); }

.snel-blok {
  background: var(--geel-licht);
  border: 1px solid var(--geel-rand);
  border-radius: var(--radius-m);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.snel-blok > strong { display: block; color: var(--ink); font-size: 1.1rem; }
.snel-blok p { margin: 0.25rem 0 0; }
.snel-formulier { margin: 0; }
.snel-akkoord { color: var(--tekst-licht); font-size: 0.9rem; margin-top: 0.75rem; }

.vacature-kaart .snel-formulier { margin-top: 1rem; }
.vacature-kaart .snel-formulier .btn { width: 100%; }

.formulier-uitklap { margin-bottom: 1rem; }
.formulier-uitklap > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--oranje-donker);
  margin-bottom: 1rem;
}
.formulier-uitklap > summary:hover { color: var(--ink); }

.bedankt-kop { margin-bottom: 1.5rem; }