/* ============================================================
   De Leukste Kantoorbaan
   Componenten en opbouw van baanzoeken.nl (via assemblagemedewerker.nl),
   in een eigen stijl: de markeerstift. Zoals je vroeger met een groene stift
   de leukste vacature in de krant markeerde, markeert het limoengroene
   streepje uit het logo wat ertoe doet: het woord in een kop, de stapnummers
   en groot achter de foto's. De rest is zwart-wit, als een kantoorprinter:
   inkt op warm papier. Zakelijk, en voor mannen en vrouwen even aantrekkelijk.

   Kleuren en contrast (WCAG AA):
   - --limoen #C6F26B: de stift (logo, streep, onderstreep, cirkel, markering)
     en de hoofdknoppen, altijd met inkt erop (13,9). Nooit wit op limoen en
     nooit limoen als tekst op wit.
   - --ink #171817 voor koppen en donkere knoppen; --tekst #3B3C38 voor
     lopende tekst (11,1 op wit); --nacht #151614 voor de footer en donkere
     vlakken (limoen erop: 14,2).
   - --olijf #4A7212: het limoen als tekstkleur, voor links, labels, iconen en
     focus (5,7 op wit, 5,1 op --grijs).
   - --grijs #F5F4EE: warm papier voor secties.
   Bewust anders dan de andere jobboards: geen oranje of geel (Banen zonder
   Diploma, Assemblage Medewerker), geen paars of roze (Baan Zoeken, Wekelijks
   Uitbetaald), geen blauw (Vacature Drechtsteden, Vindsalesvacatures) en geen
   natuurgroen (Vacatures in de Groenvoorziening).
   ============================================================ */

/* Nunito Sans (koppen en tekst, de gratis lettertypes die het dichtst bij de
   Avenir van het logo liggen) staat op de eigen server (assets/fonts, licentie
   in OFL.txt): geen verbinding met Google. Variabel lettertype, gewicht 400 tot
   900. inc/kop.php laadt het latin-bestand vooraf (preload). */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/nunito-sans-v19-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/nunito-sans-v19-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #171817;
  --nacht: #151614;
  --nacht-2: #20221f;
  --nacht-rand: #30332e;
  --limoen: #c6f26b;
  --limoen-hover: #b3e350;
  --limoen-licht: #f2f9dd;
  --limoen-rand: #d2e9a0;
  --olijf: #4a7212;
  /* Alleen voor meldingen en verplichte velden, niet als merkkleur. */
  --geel: #f3c34a;
  --geel-donker: #835600;
  --geel-licht: #fff7e1;
  --geel-rand: #f0d79a;
  --groen: #1f7a45;
  --groen-licht: #e4f4ea;
  --groen-rand: #b7e0c6;
  --papier: #ffffff;
  --grijs: #f5f4ee;
  --lijn: #e5e3da;
  --veld-rand: #c9c7bc;
  --tekst: #3b3c38;
  --tekst-licht: #64655e;
  /* Hoogte van zoekvelden en de zoekknop ernaast. */
  --veld-hoogte: 3.25rem;
  --mono: "Nunito Sans", "Segoe UI", Arial, sans-serif;
  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 18px;
  --schaduw: 0 18px 48px rgba(23, 24, 23, 0.12);
  --schaduw-klein: 0 6px 18px rgba(23, 24, 23, 0.08);
  --container: 1200px;
  --container-breed: 1360px;
  --kop-hoogte: 80px;
  /* De stift: het streepje uit het logo en drie losse stiftvormen, plus een
     lichte markering (salaris, Nieuw) en een olijf cirkel (veelgestelde
     vragen). Met versienummer: Cloudflare en browsers hebben de roze versies
     nog onder dezelfde naam. */
  --streep: url("../img/streep.svg?v=3");
  --onderstreep: url("../img/onderstreep.svg?v=3");
  --markeer: url("../img/markeer.svg?v=3");
  --cirkel: url("../img/cirkel.svg?v=3");
  --markeer-licht: url("../img/markeer-licht.svg");
  --cirkel-olijf: url("../img/cirkel-olijf.svg");
}

* { box-sizing: border-box; }

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

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

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

a { color: var(--olijf); }

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

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

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

.skiplink {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-s);
  text-decoration: none;
  font-weight: 700;
}
.skiplink:focus { top: 1rem; }

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

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
h3 { font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.01em; }
h4 { font-size: 1.02rem; letter-spacing: 0; }

p { margin: 0 0 1em; }

/* Klein label boven een kop: vet, in hoofdletters. */
.kicker {
  display: block;
  color: var(--olijf);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

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

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

/* Punt achter paginatitels: wordt het streepje uit het logo (laag Markeerstift). */
.punt { color: var(--limoen); }

.markeer {
  background: var(--markeer) center / 100% 100% no-repeat;
  padding: 0 0.04em;
}

/* ---------- Knoppen en links ---------- */

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

.btn-primair { background: var(--limoen); color: var(--ink); }
.btn-primair:hover { background: var(--limoen-hover); color: var(--ink); }

.btn-oranje { background: var(--geel); color: var(--ink); }
.btn-oranje:hover { background: var(--limoen); color: var(--ink); }

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

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

.btn-pil { border-radius: 999px; }
.btn-groot { padding: 1rem 2rem; font-size: 1.05rem; }
.btn-breed { width: 100%; margin-top: 0.75rem; }

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

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

/* ---------- Testbalk ---------- */

.testbalk {
  background: var(--geel);
  color: var(--ink);
  font-size: 0.88rem;
  text-align: center;
  padding: 0.45rem 0;
}

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

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

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--kop-hoogte);
}

/* Header: logo links (twee regels, zoals de andere jobboards), rechts de links. */
.logo { flex: none; display: block; line-height: 0; }
.logo img { height: 42px; width: auto; }

.nav-teller {
  display: inline-block;
  min-width: 1.5rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.75rem;
  font-weight: 800;
  text-align: center;
  color: var(--olijf);
  background: var(--limoen-licht);
  border-radius: 999px;
}
.nav-teller[hidden] { display: none; }

.header-acties { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }

.header-link {
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
}
.header-link:hover,
.header-link[aria-current="page"] { border-color: var(--limoen); }

.header-knop { padding: 0.55rem 1.15rem; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  background: var(--grijs);
  border: 0;
  border-radius: var(--radius-s);
  cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; 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(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

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

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

.zoekpaneel {
  background: var(--papier);
  border-radius: var(--radius-l);
  padding: 0.75rem;
  box-shadow: var(--schaduw);
}

.bz-zoekkop { padding: 1.1rem 0; background: var(--papier); border-bottom: 1px solid var(--lijn); }
.bz-zoekkop .zoekpaneel { max-width: 1040px; margin: 0 auto; padding: 0; box-shadow: none; }

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

.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;
  font-size: 1rem;
  color: var(--ink);
  background: var(--papier);
  border: 1px solid var(--veld-rand);
  border-radius: var(--radius-s);
  height: var(--veld-hoogte);
  padding: 0 1rem 0 2.8rem;
}
.veld select { appearance: none; cursor: pointer; padding-right: 2.6rem; }
.veld input:focus, .veld select:focus { outline: none; border-color: var(--olijf); box-shadow: 0 0 0 3px var(--limoen-licht); }
.veld input::placeholder { color: #6c6d66; }

.veld-select::before {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  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 { min-height: var(--veld-hoogte); padding: 0.6rem 1.8rem; font-size: 1.02rem; }

/* Zoekbalk op de homepage: een zichtbaar label (Wat, Waar, Afstand) boven
   elk veld. Symbool en pijltje staan in dezelfde rastercel als het veld, dus
   altijd precies in het midden ervan (niet in het midden van label plus
   veld). De knop staat onderaan, even hoog als de velden. */
.zoekpaneel-hero .zoekvelden { align-items: end; }
.zoekpaneel-hero .veld {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "label" "invoer";
}
.zoekpaneel-hero .veld-label {
  grid-area: label;
  margin: 0 0 0.4rem 0.1rem;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
}
.zoekpaneel-hero .veld > input,
.zoekpaneel-hero .veld > select,
.zoekpaneel-hero .veld > svg,
.zoekpaneel-hero .veld-select::before { grid-area: invoer; }
.zoekpaneel-hero .veld > svg {
  position: relative;
  z-index: 1;
  top: auto;
  left: auto;
  transform: none;
  align-self: center;
  margin-left: 15px;
}
.zoekpaneel-hero .veld-select::before {
  position: relative;
  z-index: 1;
  top: auto;
  right: auto;
  align-self: center;
  justify-self: end;
  margin: -4px 18px 0 0;
  transform: rotate(45deg);
}

.zoek-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.9rem;
  padding: 0 0.25rem;
}
.zoek-chips .chips-label { color: var(--tekst-licht); font-size: 0.92rem; }
.zoek-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: 999px;
  padding: 0.25rem 0.85rem;
  text-decoration: none;
}
.zoek-link:hover { background: var(--limoen-licht); border-color: var(--limoen-rand); }

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

.sectie { padding: 3.5rem 0; }
.sectie-eerste { padding-top: 1.75rem; }
.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: 1.75rem;
}
.sectie-kop .link-meer { margin-bottom: 0.4rem; }
.sectie-kop .sectie-intro p { margin-bottom: 0; }
.sectie-kop h2 { margin-bottom: 0.2em; }

.kruimels {
  font-size: 0.88rem;
  color: var(--tekst-licht);
  margin-bottom: 1rem;
}
.kruimels a { color: inherit; text-decoration: none; }
.kruimels a:hover { color: var(--olijf); text-decoration: underline; }
.kruimels > span { margin: 0 0.4rem; }
.kruimels > span:last-child { margin: 0; }

/* ---------- Overzicht: kop, filters, lijst en paneel ---------- */

.bz-overzicht { padding-top: 1.25rem; }

.bz-overzicht-kop { max-width: 52rem; margin-bottom: 1.25rem; }
.bz-overzicht-kop h1 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); margin-bottom: 0.35em; }
.bz-overzicht-kop p { color: var(--tekst-licht); margin: 0; }

.bz-filterbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.bz-filter { position: relative; }
.bz-filter > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--grijs);
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.bz-filter > summary::-webkit-details-marker { display: none; }
.bz-filter > summary:hover { border-color: var(--limoen-rand); }
.bz-filter[open] > summary { border-color: var(--olijf); background: var(--papier); }
.bz-filter.is-gekozen > summary { background: var(--ink); color: #fff; }
.bz-filter[open] > summary svg { transform: rotate(180deg); }

.bz-filter ul {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 230px;
  max-height: 340px;
  overflow-y: auto;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-m);
  box-shadow: var(--schaduw);
}
.bz-filter li a {
  display: block;
  padding: 0.5rem 0.7rem;
  color: var(--ink);
  text-decoration: none;
  border-radius: 6px;
}
.bz-filter li a:hover { background: var(--grijs); }
.bz-filter li a[aria-current] { font-weight: 800; color: var(--olijf); background: var(--limoen-licht); }
.bz-filter-wis { margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px solid var(--lijn); }
.bz-filter-wis a { color: var(--tekst-licht) !important; }

.bz-alles-wissen { font-size: 0.9rem; font-weight: 700; color: var(--olijf); margin-left: 0.25rem; }

.bz-resultaten-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.92rem;
}
.telling { font-weight: 700; color: var(--ink); margin: 0; }
.bz-sorteer { color: var(--tekst-licht); margin: 0; display: flex; gap: 0.35rem; align-items: baseline; }
.bz-sorteer strong { color: var(--ink); }
.bz-sorteer a { color: var(--olijf); }

.bz-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }

.bz-kaarten { display: grid; gap: 0.75rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }

/* Vacaturekaart, zoals bij Indeed: de hele kaart is klikbaar via de titel. */
.bz-kaart {
  position: relative;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-m);
  padding: 1rem 1.15rem 0.9rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bz-kaart:hover { border-color: var(--limoen-rand); box-shadow: var(--schaduw-klein); }
.bz-kaart.is-actief { border-color: var(--olijf); box-shadow: 0 0 0 1px var(--olijf); }

.bz-kaart-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }

.bz-kaart-titel { margin: 0 0 0.2rem; font-size: 1.08rem; line-height: 1.3; letter-spacing: -0.01em; }
.bz-kaart-titel a { color: var(--ink); text-decoration: none; }
.bz-kaart-titel a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.bz-kaart:hover .bz-kaart-titel a,
.bz-kaart.is-actief .bz-kaart-titel a { text-decoration: underline; text-underline-offset: 3px; }
.bz-kaart-titel a:focus-visible { outline: none; }
.bz-kaart:has(.bz-kaart-titel a:focus-visible) { outline: 3px solid var(--olijf); outline-offset: 2px; }

.bz-kaart-plaats { margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--tekst); }
.bz-afstand { margin-left: 0.35rem; color: var(--tekst-licht); font-size: 0.88rem; }
.bz-afstand::before { content: "\00B7"; margin-right: 0.35rem; }

.bz-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; padding: 0; list-style: none; }
.bz-tag {
  padding: 0.18rem 0.55rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--tekst);
  background: var(--grijs);
  border-radius: 6px;
}
.bz-tag-salaris { color: var(--olijf); background: var(--limoen-licht); }

.bz-kaart-tekst {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
  color: var(--tekst-licht);
}

.bz-kaart-voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.9rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--tekst-licht);
}
.bz-direct { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 700; color: var(--groen); }
.bz-datum { margin-left: auto; }

.bz-nieuw {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--geel-donker);
  background: var(--geel-licht);
  border-radius: 4px;
}

/* Bewaren en delen: boven de klikbare kaart. */
.bz-bewaar,
.bz-deel {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--ink);
  background: var(--papier);
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  cursor: pointer;
}
.bz-bewaar:hover,
.bz-deel:hover { background: var(--grijs); }
.bz-bewaar[aria-pressed="true"] { color: var(--olijf); }
.bz-bewaar[aria-pressed="true"] svg { fill: currentColor; }
.bz-paneel-acties .bz-bewaar,
.bz-paneel-acties .bz-deel,
.detail-acties .bz-bewaar,
.detail-acties .bz-deel { width: 46px; height: 46px; background: var(--grijs); }

.bz-deel[data-melding]::after {
  content: attr(data-melding);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  background: var(--ink);
  border-radius: 6px;
}

.bz-kaart-snel { display: flex; flex-direction: column; }
.bz-kaart-snel .snel-formulier .btn { margin-top: 0.5rem; }

/* Het paneel: alleen op een breed scherm, naast de lijst en meeschuivend. */
.bz-paneel { display: none; }

.bz-paneel-leeg {
  display: grid;
  place-items: center;
  gap: 0.75rem;
  min-height: 320px;
  padding: 2rem;
  text-align: center;
  color: var(--tekst-licht);
}
.bz-paneel-leeg p { margin: 0; max-width: 22rem; }

.bz-paneel-kop {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 1.25rem 1.5rem 1rem;
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
  box-shadow: 0 6px 12px -10px rgba(23, 24, 23, 0.25);
}
.bz-paneel-kop h2 { margin: 0 0 0.3rem; font-size: 1.45rem; line-height: 1.2; }
.bz-paneel-kop h2 a { color: var(--ink); text-decoration: none; }
.bz-paneel-kop h2 a:hover { text-decoration: underline; }
.bz-paneel-plaats { margin: 0 0 0.9rem; color: var(--tekst); }
.bz-paneel-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.bz-paneel-acties .snel-formulier { margin: 0; }
.bz-snel-uitleg { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--tekst-licht); }
.bz-al-gesolliciteerd { font-weight: 700; color: var(--groen); padding: 0.6rem 0; }

.bz-paneel-body { padding: 0 1.5rem 1.5rem; }
.bz-paneel-blok { padding: 1.25rem 0; border-bottom: 8px solid var(--grijs); margin: 0 -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
.bz-paneel-blok:last-child { border-bottom: 0; }
.bz-paneel-blok > h3 { font-size: 1.2rem; margin-bottom: 0.75rem; }
.bz-paneel-tekst .intro { font-weight: 600; color: var(--ink); }
.bz-paneel-tekst .detail-sectie { margin-bottom: 1.25rem; }
.bz-paneel-tekst h4 { margin: 1.25rem 0 0.5rem; }
.bz-paneel-tekst ul { padding-left: 1.2rem; }
.bz-paneel-tekst li { margin-bottom: 0.35rem; }
.bz-paneel-onder { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1rem; }
.bz-paneel-links a { font-size: 0.9rem; }

.bz-kenmerken { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.bz-kenmerken li { display: flex; align-items: flex-start; gap: 0.7rem; color: var(--tekst); }
.bz-kenmerken svg { flex: none; margin-top: 0.1rem; color: var(--olijf); }
.bz-kenmerken a { color: var(--olijf); font-weight: 600; }

.leeg {
  background: var(--grijs);
  border-radius: var(--radius-l);
  padding: 3rem 1.5rem;
  text-align: center;
}
.leeg p { max-width: 36rem; margin-left: auto; margin-right: auto; }
.leeg .btn { margin: 0.25rem; }

/* ---------- 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.5rem 0.8rem;
  border: 1px solid var(--lijn);
  border-radius: var(--radius-s);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.paginering a:hover { border-color: var(--olijf); color: var(--olijf); }
.paginering .huidig { background: var(--ink); border-color: var(--ink); color: #fff; }
.paginering .punten { padding: 0.5rem 0.35rem; color: var(--tekst-licht); }

/* ---------- Chips, lijsten en tegels met links ---------- */

.bz-linkgroep { margin-bottom: 2rem; }
.bz-linkgroep:last-child { margin-bottom: 0; }
.bz-linkgroep > h2,
.bz-linkgroep > h3 { font-size: 1.15rem; letter-spacing: -0.01em; margin-bottom: 0.8rem; }

.locatie-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.locatie-chips a {
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--ink);
  text-decoration: none;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.locatie-chips a span { color: var(--tekst-licht); font-weight: 500; }
.locatie-chips a:hover { border-color: var(--olijf); background: var(--limoen-licht); }

.bz-linklijst { columns: 4 12rem; column-gap: 1.5rem; }
.bz-linklijst a {
  display: block;
  padding: 0.25rem 0;
  color: var(--olijf);
  text-decoration: none;
  break-inside: avoid;
}
.bz-linklijst a:hover { text-decoration: underline; }
.bz-linklijst a span { color: var(--tekst-licht); font-size: 0.85rem; }

.bz-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.75rem; }
.bz-tegels a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.15rem;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-m);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bz-tegels a span { font-weight: 500; font-size: 0.88rem; color: var(--tekst-licht); }
.bz-tegels a:hover { border-color: var(--olijf); box-shadow: var(--schaduw-klein); }

/* Tekst, links en veelgestelde vragen onder de SEO-pagina's. */
.bz-seo { display: grid; gap: 2.5rem; }
.bz-seo-tekst > h2 { font-size: 1.35rem; }
.bz-seo-tekst > p { max-width: 46rem; margin-bottom: 2rem; }
.bz-seo-faq h2 { font-size: 1.35rem; }

/* ---------- Vacaturekaarten in een raster (homepage, vergelijkbaar) ---------- */

.vacature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  margin-bottom: 1rem;
}

/* ---------- Kennisbank ---------- */

.artikel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}
.artikel-kaart {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-m);
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.artikel-kaart:hover { box-shadow: var(--schaduw-klein); border-color: var(--limoen-rand); }
.artikel-kaart-beeld {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--limoen-licht);
}
.artikel-kaart-beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.artikel-kaart:hover .artikel-kaart-beeld img { transform: scale(1.03); }
/* Zonder afbeelding: licht vlak met de categorie, zoals de kop van de homepage. */
.artikel-kaart-beeld.is-leeg {
  display: flex;
  align-items: flex-end;
  padding: 1rem 1.25rem;
  background: var(--nacht);
  border-bottom: 4px solid var(--limoen);
}
.artikel-kaart-beeld.is-leeg span { color: #fff; font-weight: 900; font-size: 1.5rem; letter-spacing: -0.03em; }
.artikel-kaart-beeld.is-leeg span::after { content: "."; color: var(--limoen); }
.artikel-kaart-inhoud { display: flex; flex-direction: column; flex: 1; padding: 1.15rem 1.3rem 1.3rem; }
.artikel-kaart .kicker { font-size: 0.85rem; }
.artikel-kaart h2,
.artikel-kaart h3 { margin-bottom: 0.5rem; font-size: 1.08rem; }
.artikel-kaart p { color: var(--tekst-licht); font-size: 0.93rem; margin-bottom: 1rem; }
.artikel-kaart .link-meer { margin-top: auto; align-self: flex-start; }

.kb-kop { margin: 2.25rem 0 1rem; font-size: 1.35rem; }
.kb-dossiers { display: grid; gap: 0.75rem; }
.kb-dossier {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.1rem 1.25rem;
  background: var(--limoen-licht);
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  text-decoration: none;
  color: var(--tekst);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.kb-dossier:hover { border-color: var(--olijf); background: var(--papier); }
.kb-dossier strong { color: var(--ink); font-size: 1.08rem; }
.kb-dossier strong::after { content: " \2192"; color: var(--olijf); }
.kb-dossier span { font-size: 0.92rem; color: var(--tekst-licht); }
.kb-dossier small { font-weight: 700; color: var(--olijf); }

.kb-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.5rem; }
.kb-filters a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  text-decoration: none;
  background: var(--papier);
}
.kb-filters a span { font-size: 0.8rem; font-weight: 700; color: var(--tekst-licht); }
.kb-filters a:hover { border-color: var(--olijf); color: var(--olijf); }
.kb-filters a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.kb-filters a[aria-current="page"] span { color: rgba(255, 255, 255, 0.75); }

.sectie-rand { border-top: 1px solid var(--lijn); }

/* ---------- 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.02rem;
  color: var(--ink);
  padding: 1rem 0.25rem;
}
.faq-lijst summary::-webkit-details-marker { display: none; }
.faq-lijst summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--limoen-licht);
  color: var(--olijf);
  font-size: 1.25rem;
  font-weight: 600;
}
.faq-lijst summary:hover { color: var(--olijf); }
.faq-lijst details[open] summary::after { content: "\2212"; }
.faq-lijst details p { padding: 0 3rem 1.2rem 0.25rem; margin: 0; color: var(--tekst-licht); }

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

/* Licht, zodat het logo in zijn eigen kleuren blijft. */
.site-footer {
  background: var(--grijs);
  color: var(--tekst);
  border-top: 4px solid var(--olijf);
  padding: 3rem 0 1.5rem;
  font-size: 0.93rem;
}

.footer-boven {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding-bottom: 2rem;
  margin-bottom: 2.25rem;
  border-bottom: 1px solid var(--lijn);
}
.footer-logo img { height: 30px; width: auto; }
.footer-boven p { max-width: 44rem; margin: 0; color: var(--tekst-licht); }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.5rem;
  margin-bottom: 2.25rem;
}

.site-footer h2 { color: var(--ink); font-size: 0.95rem; letter-spacing: 0; margin-bottom: 0.8rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.5rem; overflow-wrap: anywhere; }
.site-footer a { color: var(--tekst); text-decoration: none; }
.site-footer a:hover { color: var(--olijf); text-decoration: underline; }

.footer-zusters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  padding: 1rem 0;
  border-top: 1px solid var(--lijn);
  font-size: 0.88rem;
  color: var(--tekst-licht);
}

.footer-balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  border-top: 1px solid var(--lijn);
  padding-top: 1.25rem;
  font-size: 0.88rem;
}
.footer-onder,
.footer-service { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; }

/* Cookie-instellingen: een knop die eruitziet als de links ernaast. */
.footer-knop {
  padding: 0;
  font: inherit;
  color: var(--tekst);
  background: none;
  border: 0;
  cursor: pointer;
}
.footer-knop:hover { color: var(--olijf); text-decoration: underline; }

/* ---------- 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(23, 24, 23, 0.22);
}
.cookiebanner[hidden] { display: none; }
.cookiebanner:focus { outline: none; }
.cookiebanner h2 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.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(--olijf); }

.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(--groen);
}

/* 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: #d6d5cc;
  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(23, 24, 23, 0.3);
  transition: transform 0.2s ease;
}
.cookie-optie input:checked { background: var(--olijf); }
.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(--olijf); 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; }
}

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

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

.detail-kop { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--lijn); }
.detail-kop h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: 0.35rem; }
.detail-kop .intro { font-size: 1.08rem; color: var(--tekst); max-width: 42rem; }
.detail-plaats { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.85rem; font-size: 1.02rem; }
.detail-plaats a { color: var(--tekst); }
.detail-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.25rem; }

.detail-sectie { margin-bottom: 2.25rem; }
.detail-sectie h2 { font-size: 1.4rem; }
.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.4rem;
  margin-bottom: 1.25rem;
}
.blok h2 { font-size: 1.15rem; }
.blok .bz-kenmerken { margin-bottom: 1rem; }
.blok-contact { background: var(--limoen-licht); }

/* ---------- Formulieren ---------- */

.formulier { max-width: 34rem; }
.formulier-groot { max-width: 100%; }
.formulier-rij { margin-bottom: 1rem; }
.formulier label:not(.keuze):not(.checkbox):not(.upload) {
  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 input[type="number"],
.formulier input[type="url"],
.formulier select,
.formulier textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  border: 1px solid var(--veld-rand);
  border-radius: var(--radius-s);
  padding: 0.75rem 0.9rem;
  background: var(--papier);
}
.formulier input:focus,
.formulier select:focus,
.formulier textarea:focus { outline: none; border-color: var(--olijf); box-shadow: 0 0 0 3px var(--limoen-licht); }

.formulier-rij-dubbel,
.formulier-rij-drie { display: grid; gap: 0 1rem; }

.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(--limoen);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 800;
  flex: none;
}

.honeypot { position: absolute; left: -9999px; }
.verplicht { color: var(--geel-donker); }
.hulp { display: block; color: var(--tekst-licht); font-size: 0.9rem; margin-top: 0.3rem; }
.hulp-inline { color: var(--tekst-licht); font-weight: 400; font-size: 0.9rem; }

.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: var(--papier);
  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(--limoen-rand); }
.keuze input { margin-top: 0.25rem; accent-color: var(--olijf); }
.keuze strong { display: block; color: var(--ink); }
.keuze small { color: var(--tekst-licht); }
.keuze:has(input:checked) { border-color: var(--olijf); background: var(--limoen-licht); }

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

.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(--olijf); }

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

.som { max-width: 14rem; }
.som input { text-align: center; font-weight: 700; }

.melding {
  border-radius: var(--radius-m);
  padding: 1.1rem 1.35rem;
  margin-bottom: 1.5rem;
}
.melding p { margin: 0.25rem 0 0; }
.melding-goed { background: var(--groen-licht); border: 1px solid var(--groen-rand); }
.melding-fout { background: var(--geel-licht); border: 1px solid var(--geel-rand); }

.sollicitatie { padding-top: 2rem; border-top: 1px solid var(--lijn); }
.sollicitatie .formulier { max-width: 38rem; }
.sollicitatie-intro { color: var(--tekst-licht); max-width: 38rem; }

/* Uploadzone */

.upload {
  position: relative;
  display: block;
  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(--olijf); background: var(--limoen-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(--papier);
  border: 1px solid var(--limoen-rand);
  color: var(--olijf);
}
.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(--olijf); 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: var(--papier);
  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; }

/* 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; }

.snel-blok {
  background: var(--groen-licht);
  border: 1px solid var(--groen-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; }

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

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

/* ---------- Artikelen en tekstpagina's ---------- */

.tekstblok { max-width: 46rem; }
.tekstblok h2 { margin-top: 2rem; }
.tekstblok h2:first-child { margin-top: 0; }
.tekstblok h3 { margin-top: 1.5rem; font-size: 1.1rem; }
.tekstblok ul, .tekstblok ol { padding-left: 1.2rem; }
.tekstblok li { margin-bottom: 0.45rem; }

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

.artikel { max-width: 48rem; min-width: 0; }

/* Artikel met zijbalk: de zijbalk alleen op brede schermen. */
.artikel-opzet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
.artikel-zij { display: none; }
.artikel-zij .blok + .blok { margin-top: 1rem; }
.artikel-zij .btn-breed + .btn-breed { margin-top: 0.5rem; }
.artikel-kop { margin-bottom: 2rem; }
.artikel-meta { color: var(--tekst-licht); font-size: 0.93rem; }
.artikel .intro { font-size: 1.12rem; color: var(--tekst); }

.inhoudsopgave {
  background: var(--grijs);
  border-left: 4px solid var(--olijf);
  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(--olijf); border-color: currentColor; }

.artikel-tekst h2 { margin-top: 2.25rem; scroll-margin-top: 6rem; }
.artikel-tekst h3 { margin-top: 1.75rem; font-size: 1.15rem; scroll-margin-top: 6rem; }
.artikel-tekst h4 { margin-top: 1.5rem; }
.artikel-tekst ul, .artikel-tekst ol { padding-left: 1.2rem; }
.artikel-tekst li { margin-bottom: 0.45rem; }
.artikel-tekst p { max-width: 42rem; }
.artikel-tekst a:not(.btn) { color: var(--olijf); text-underline-offset: 2px; }
.artikel-tekst a:not(.btn):hover { color: var(--ink); }
.artikel-tekst .btn { margin: 0.25rem 0.5rem 0.25rem 0; }
.artikel-tekst img { border-radius: var(--radius-m); }
.artikel-tekst hr { border: 0; border-top: 1px solid var(--lijn); margin: 2rem 0; }
.artikel-tekst blockquote {
  margin: 1.5rem 0;
  padding: 0.9rem 1.25rem;
  border-left: 4px solid var(--geel);
  background: var(--grijs);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
}
.artikel-tekst blockquote p:last-child { margin-bottom: 0; }

/* Tabellen uit de WordPress-artikelen: scrollen op een smal scherm. */
.tabel-scroll { overflow-x: auto; margin: 1.25rem 0 1.5rem; -webkit-overflow-scrolling: touch; }
.artikel-tekst table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.artikel-tekst th,
.artikel-tekst td { padding: 0.6rem 0.75rem; border: 1px solid var(--lijn); text-align: left; vertical-align: top; }
.artikel-tekst thead th,
.artikel-tekst thead td,
.artikel-tekst tr:first-child th { background: var(--limoen-licht); color: var(--ink); font-weight: 700; }

/* Hoofdbeeld van een artikel: breed, bijgesneden zoals op de oude site. */
.artikel-hoofdbeeld { margin: 0 0 2rem; }
.artikel-hoofdbeeld img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-l);
  background: var(--grijs);
}
.artikel-beeld { margin: 1.5rem 0 2rem; }
.artikel-beeld img { max-height: 460px; width: auto; max-width: 100%; }
.artikel .intro.artikel-tekst p { font-size: 1.08rem; }

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

/* ---------- Werkgevers ---------- */

.wg-kaarten { display: grid; gap: 1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.wg-kaarten li {
  padding: 1.35rem 1.4rem;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-m);
}
.wg-kaarten strong { display: block; margin-bottom: 0.35rem; font-size: 1.08rem; color: var(--ink); }
.wg-kaarten p { margin: 0; color: var(--tekst-licht); }

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

@media (max-width: 719px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
  .header-inner { gap: 0.75rem; min-height: 64px; }
  .logo img { height: 36px; }
  .header-acties { gap: 0.6rem; }
  .header-werkgevers { display: none; }
  .header-knop { padding: 0.5rem 0.85rem; font-size: 0.92rem; }
  .sectie { padding: 2.75rem 0; }
  .bz-datum { margin-left: 0; }
}

@media (min-width: 640px) {
  .zoekvelden { grid-template-columns: 1fr 1fr; }
  .zoekvelden .veld-wat { grid-column: 1 / -1; }
  .vacature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .artikel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formulier-rij-dubbel { grid-template-columns: 1fr 1fr; }
  .formulier-rij-drie { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wg-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-dossiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .zoekvelden { grid-template-columns: 1.5fr 1fr minmax(9.5rem, 0.6fr) auto; }
  .zoekvelden .veld-wat { grid-column: auto; }

  .vacature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .artikel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wg-kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kb-dossiers { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .detail-grid { grid-template-columns: 7fr 4fr; gap: 3.5rem; align-items: start; }

  .artikel-opzet { grid-template-columns: minmax(0, 48rem) minmax(0, 330px); justify-content: space-between; align-items: start; }
  .artikel-zij { display: block; position: sticky; top: calc(var(--kop-hoogte) + 1.5rem); }
  .detail-zij { position: sticky; top: calc(var(--kop-hoogte) + 1.5rem); }

  .bz-seo { grid-template-columns: 1.35fr 1fr; gap: 3.5rem; align-items: start; }
}

/* Lijst en paneel naast elkaar, zoals bij Indeed. */
@media (min-width: 1024px) {
  .bz-split { grid-template-columns: minmax(340px, 0.82fr) minmax(0, 1.18fr); gap: 1.5rem; }

  .bz-paneel {
    display: block;
    position: sticky;
    top: calc(var(--kop-hoogte) + 1rem);
    height: calc(100vh - var(--kop-hoogte) - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--papier);
    border: 1px solid var(--lijn);
    border-radius: var(--radius-m);
    box-shadow: var(--schaduw-klein);
  }

  .bz-paneel::before {
    content: "";
    position: sticky;
    top: 0;
    z-index: 3;
    display: block;
    height: 3px;
    margin-bottom: -3px;
    background: linear-gradient(90deg, var(--limoen), var(--olijf));
    transform: scaleX(0);
    transform-origin: left;
  }
  .bz-paneel.is-laden::before { animation: bz-laden 0.9s ease-in-out infinite; }
  .bz-paneel.is-laden .bz-paneel-inhoud { opacity: 0.5; transition: opacity 0.15s ease 0.1s; }

}

/* Pagina's met lijst en paneel: header en footer even breed als de lijst,
   zodat logo en inhoud netjes onder elkaar staan. */
.volle-breedte .site-header .container,
.volle-breedte .site-footer .container { max-width: var(--container-breed); }

@keyframes bz-laden {
  0% { transform: scaleX(0); }
  60% { transform: scaleX(0.75); }
  100% { transform: scaleX(1); opacity: 0; }
}

@media (min-width: 1040px) {
  .footer-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2rem; }
}

/* Vanaf 1000 pixels past het hoofdmenu naast het logo: geen menuknop. */
@media (min-width: 1000px) {
  .nav-toggle { display: none; }
  .mobiel-nav,
  .mobiel-nav.is-open { display: none; }
}

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

/* ============================================================
   Markeerstift: de eigen stijl van De Leukste Kantoorbaan
   Bovenop de componenten hierboven. Alles wat hier staat, geldt op elke
   pagina; de homepage heeft daarnaast assets/css/home.css.

   De stift (assets/img):
   - streep.svg: het limoengroene streepje uit het logo, precies dat pad. Groot
     achter foto's en als einde van elke paginatitel (.punt).
   - onderstreep.svg: een losse stiftstreep onder een woord (.gemarkeerd,
     het actieve menu-item, links bij aanwijzen).
   - markeer.svg: een markeervlak achter korte tekst (salaris, Nieuw, de
     namen op de vakgebiedtegels).
   - cirkel.svg: een met de stift omcirkeld cijfer (.omcirkeld).
   ============================================================ */

/* ---------- Koppen ---------- */

h1, h2, h3, h4 { font-weight: 850; letter-spacing: -0.025em; }
h1 { font-weight: 900; letter-spacing: -0.03em; }

/* Een woord in een kop, gemarkeerd met de stift (zoals in het logo staat het
   limoen achter de letters). Werkt ook als de kop over twee regels loopt. */
.gemarkeerd {
  color: var(--ink);
  background-image: var(--onderstreep);
  background-repeat: no-repeat;
  background-size: 100% 0.78em;
  background-position: 0 96%;
  padding: 0 0.06em;
  margin: 0 -0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* De punt achter een paginatitel wordt het streepje uit het logo, schuin
   achter de laatste letters: elke pagina eindigt zoals het logo. De punt zelf
   blijft in de tekst staan (voor schermlezers), maar is onzichtbaar. */
h1:has(.punt),
h2:has(.punt) { position: relative; isolation: isolate; }
.punt {
  position: relative;
  display: inline-block;
  width: 0.3em;
  color: transparent;
}
.punt::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -0.2em;
  bottom: -0.02em;
  width: 2.5em;
  height: 1.05em;
  background: var(--streep) center / 100% 100% no-repeat;
  pointer-events: none;
}

.kicker {
  color: var(--olijf);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.09em;
}

.markeer {
  background: var(--markeer) center / 100% 100% no-repeat;
  color: var(--ink);
  padding: 0 0.2em;
}

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

/* Knoppen met strakke hoeken (geen pil): zakelijk, de stift zorgt voor het
   leuke. Chips en labels blijven rond. */
.btn { border-radius: 12px; font-weight: 800; }
.btn-groot { padding: 1rem 2.1rem; }

/* De knoppen in de blogs van de oude site (btn-orange): inkt, naast de
   limoen knoppen (btn-primair) in dezelfde blogs. */
.btn-oranje { background: var(--ink); color: #fff; }
.btn-oranje:hover { background: var(--limoen); color: var(--ink); }

/* Op een foto of donker vlak. */
.btn-licht { background: #fff; color: var(--ink); }
.btn-licht:hover { background: var(--limoen); color: var(--ink); }

.btn-donker:hover { background: var(--limoen); color: var(--ink); }

.link-meer {
  color: var(--olijf);
  border-bottom: 0;
  padding-bottom: 0.1em;
  background: var(--onderstreep) 0 100% / 100% 0.42em no-repeat;
}
.link-meer:hover { color: var(--ink); background-size: 100% 0.62em; }

:focus-visible { outline-color: var(--olijf); }

/* ---------- Testbalk ---------- */

.testbalk { background: var(--limoen-licht); color: var(--ink); border-bottom: 1px solid var(--limoen-rand); }

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

.site-header { border-bottom: 1px solid var(--lijn); }
.site-header.is-vast { box-shadow: 0 6px 22px rgba(23, 24, 23, 0.08); }

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

.header-nav { display: none; gap: 1.75rem; margin-left: 2.5rem; }
.header-nav a,
.header-link {
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.35rem 0.1rem;
  border-bottom: 0;
  background: var(--onderstreep) 0 88% / 0 0.5em no-repeat;
  transition: background-size 0.2s ease;
}
.header-nav a:hover,
.header-nav a[aria-current="page"],
.header-link:hover,
.header-link[aria-current="page"] { background-size: 100% 0.5em; }

.header-bewaard { display: inline-flex; align-items: center; gap: 0.4rem; }
.header-bewaard svg { color: var(--olijf); }
.nav-teller { color: var(--ink); background: var(--limoen); }
.header-knop { padding: 0.6rem 1.3rem; }

@media (min-width: 1000px) {
  .header-nav { display: flex; }
}
@media (max-width: 1099px) {
  .header-bewaard-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Tussen 1000 en 1200 pixels is het krap: iets minder ruimte tussen de
   menu-items, zodat Over ons op een regel blijft. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .header-nav { gap: 1.25rem; margin-left: 1.75rem; }
  .header-acties { gap: 1.1rem; }
}
@media (max-width: 719px) {
  .logo img { height: 44px; }
  .header-bewaard { display: none; }
}

/* ---------- Footer: nacht (bijna zwart), met het streepje als watermerk ---------- */

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--nacht);
  color: #d2d3cb;
  border-top: 0;
  padding-top: 4rem;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -120px;
  width: 640px;
  height: 270px;
  background: var(--streep) center / contain no-repeat;
  opacity: 0.09;
  transform: rotate(-8deg);
  pointer-events: none;
}
.site-footer .container { position: relative; }
.footer-boven { align-items: flex-start; gap: 1.5rem 3rem; }
.footer-boven,
.footer-zusters,
.footer-balk { border-color: var(--nacht-rand); }
.footer-logo img { height: 74px; }
.footer-verhaal { flex: 1; min-width: 16rem; max-width: 44rem; }
.footer-verhaal p { color: #d2d3cb; margin-bottom: 1rem; }
.footer-kanalen { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin: 0; padding: 0; list-style: none; }
.footer-kanalen a { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; }
.footer-kanalen svg { color: var(--limoen); flex: none; }
.site-footer h2 {
  color: var(--limoen);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.site-footer a,
.footer-knop { color: #eeeee8; }
.site-footer a:hover,
.footer-knop:hover { color: #fff; text-decoration-color: var(--limoen); text-decoration-thickness: 2px; }
.footer-zusters { color: #a8a99f; }

/* ---------- Vacaturekaart: het salaris gemarkeerd (lichte limoen stift) ---------- */

.bz-kaart { border-radius: var(--radius-m); }
.bz-kaart:hover { border-color: var(--limoen-rand); }
.bz-kaart.is-actief { border-color: var(--olijf); box-shadow: 0 0 0 1px var(--olijf); }
.bz-kaart:hover .bz-kaart-titel a,
.bz-kaart.is-actief .bz-kaart-titel a {
  text-decoration: none;
  background: var(--onderstreep) 0 92% / 100% 0.45em no-repeat;
}
.bz-kaart:has(.bz-kaart-titel a:focus-visible) { outline-color: var(--olijf); }
.bz-tag { border-radius: 999px; padding: 0.2rem 0.65rem; }
.bz-tag-salaris {
  color: var(--ink);
  background: var(--markeer-licht) center / 100% 100% no-repeat;
  border-radius: 0;
  padding: 0.2rem 0.6rem;
}
.bz-nieuw {
  color: var(--ink);
  background: var(--markeer-licht) center / 100% 100% no-repeat;
  border-radius: 0;
  padding: 0.05rem 0.5rem;
}
.bz-bewaar[aria-pressed="true"] { color: var(--olijf); }

/* ---------- Chips en tegels ---------- */

.locatie-chips a:hover { border-color: var(--limoen-rand); background: var(--limoen-licht); }
.bz-tegels a:hover { border-color: var(--limoen-rand); }
.bz-linklijst a { color: var(--olijf); }

/* ---------- FAQ: de plus omcirkeld met een olijf pen ---------- */

.faq-lijst summary::after {
  width: 34px;
  height: 30px;
  border-radius: 0;
  color: var(--olijf);
  font-weight: 800;
  background: var(--cirkel-olijf) center / 100% 100% no-repeat;
}
.faq-lijst summary:hover { color: var(--olijf); }

/* ---------- Kennisbank ---------- */

.artikel-kaart { border-radius: var(--radius-m); }
.artikel-kaart:hover { border-color: var(--limoen-rand); }
.artikel-kaart .kicker { color: var(--olijf); }
.artikel-kaart:hover h2,
.artikel-kaart:hover h3 { background: var(--onderstreep) 0 92% / 100% 0.42em no-repeat; display: inline; }
.artikel-kaart-beeld { background: var(--grijs); }
.artikel-kaart-beeld.is-leeg {
  background: var(--streep) 115% 120% / 85% auto no-repeat, var(--nacht);
  border-bottom: 0;
}
.artikel-kaart-beeld.is-leeg span::after { color: var(--limoen); }
.kb-filters a:hover { border-color: var(--olijf); color: var(--olijf); }
.kb-filters a[aria-current="page"] { background: var(--ink); border-color: var(--ink); }

.inhoudsopgave { border-left-color: var(--olijf); background: var(--grijs); }
.artikel-tekst blockquote { border-left-color: var(--limoen); }
.artikel-tekst ul li::marker { color: var(--olijf); }
.artikel-tekst thead th,
.artikel-tekst thead td,
.artikel-tekst tr:first-child th { background: var(--limoen-licht); }
.artikel-hoofdbeeld img { border-radius: var(--radius-l); }

/* ---------- Formulieren en blokken ---------- */

.blok { border-radius: var(--radius-m); }
.blok-contact { background: var(--limoen-licht); }
.upload:hover, .upload.sleep { background: var(--limoen-licht); }

/* ---------- Paneel: laadbalk in de stiftkleuren ---------- */

@media (min-width: 1024px) {
  .bz-paneel::before { background: linear-gradient(90deg, var(--limoen), var(--olijf)); }
}

/* ---------- Pagina's van deze site: Over ons en Kantoorwerk ---------- */

.pagina-kop { max-width: 48rem; margin-bottom: 2rem; }
.pagina-kop h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.pagina-kop .intro { font-size: 1.15rem; color: var(--tekst); }

.over-raster { display: grid; gap: 2.5rem; align-items: center; }
/* De tekst altijd boven het streepje achter de foto. */
.over-raster > div { position: relative; z-index: 1; }
.over-beeld { position: relative; margin: 0; isolation: isolate; }
.over-beeld::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -16%;
  right: -10%;
  top: 42%;
  bottom: -22%;
  background: var(--streep) center / 100% 100% no-repeat;
  transform: rotate(-7deg);
}
.over-beeld img { width: 100%; border-radius: var(--radius-l); aspect-ratio: 1 / 1; object-fit: cover; }

.waarden { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.waarden li {
  padding: 1.4rem 1.5rem;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-m);
}
.waarden strong {
  display: inline;
  font-size: 1.15rem;
  font-weight: 850;
  color: var(--ink);
  background: var(--onderstreep) 0 92% / 100% 0.5em no-repeat;
}
.waarden p { margin: 0.5rem 0 0; color: var(--tekst-licht); }

.missie { display: grid; gap: 1.25rem; }
.missie > div {
  padding: 1.75rem;
  border-radius: var(--radius-l);
  background: var(--nacht);
  color: #d9dad2;
}
.missie h2 { color: #fff; font-size: 1.35rem; }
.missie h2 .gemarkeerd { color: var(--ink); background-size: 100% 100%; background-position: center; background-image: var(--markeer); }

@media (min-width: 640px) {
  .waarden { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .over-raster { grid-template-columns: 1.2fr 0.8fr; gap: 4.5rem; }
  .missie { grid-template-columns: 1fr 1fr; }
  .waarden { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}