@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
/* Denta Staffing — huisstijl web
   Bron van waarheid: ../../brand-context.md + config.json */

/* Kennis-sectie (2026-07-19): overzicht + artikelpagina's — zie kennis/. */
:root {
  --vel: 848px;   /* breedte van het artikel/formulier-vel op detailpagina's */
  --vel-tekst: 720px; /* tekstkolom bínnen dat vel, inclusief zijpadding */
  --creme: #FAF6F2;
  --wit: #FFFFFF;
  --ink: #10192B;
  --ink-2: #1D2B45;
  --tekst: #221D1A;
  /* TWEE dieptes oranje, en dat verschil is functioneel (24-08).

     --terra is DECORATIE: hairlines, accentranden, tijdlijnstreepjes. Die
     dragen geen tekst en hoeven alleen de 3:1 voor niet-tekstonderdelen te
     halen (3,77 op crème). Blijft het merkoranje, en matcht daarmee het logo —
     dat zit als #ED3901 in de SVG-bronnen gebakken.

     --cta is een VLAK DAT TEKST DRAAGT: knoppen, de CTA-band, focusringen. Wit
     op #ED3901 haalt maar 4,05:1 en géén van de knoppen is groot of vet genoeg
     voor de soepelere drempel (de grootste is 17px/600, de grens ligt op
     18,66px/700). Op #C42E00 wordt dat 5,62:1. Besluit Olivier 24-08. */
  --terra: #ED3901;
  --cta: #C42E00;
  /* Moest mee: de hover wás #C42E00, en dat is nu het vlak zelf —
     dan gebeurt er bij hover niets meer. Eén stap dieper, zelfde tint. */
  --cta-hover: #A32600;
  --amber: #D9A05B;
  --lijn: #E2DDD6;
  --grijs: #6B675F;

  /* ---- afgesplitst voor de donkere modus (2026-08-20) ----
     --kop is de koppen- en navigatiekleur, losgeweekt van --ink-2 (dat ook
     oppervlak en rand is). De --op-donker- en --op-oranje-reeks staan op vlakken
     die zelf al donker of oranje zijn; die kantelen daarom in GEEN van beide
     modi mee. De rest hieronder kantelt wél. */
  --kop: #1D2B45;
  /* Merkoranje als TEKST, en dat is een andere eis dan merkoranje als vlak.
     Op 20-08 is dit voor de donkere modus al rechtgezet (#FF7A45, zie onder);
     de lichte modus bleef op de merkkleur staan en haalde daar 3,77:1 tegen
     #FAF6F2 — onder de AA-drempel van 4,5. Dat raakte niet alleen de
     salarisregel op de vacaturekaarten maar élke link op de site.

     #C42E00 (5,22:1) is GEEN nieuwe kleur: de Stijlgids voert hem al als de
     donkere merkvariant en style.css kent hem als --cta-hover. Bewust die
     genomen in plaats van een eigen tint te mengen — het palet houdt zo twee
     oranjes in plaats van drie.

     --terra en --cta blijven exact #ED3901: het merkvlak verandert niet. */
  --accent-tekst: #C42E00;
  --op-wit: #221D1A;
  --op-donker: #FAF6F2;
  --op-donker-zacht: #B9C2D4;
  --op-donker-stil: #7C8AA5;
  --op-donker-lijn: #23304A;
  --op-oranje: #fff;
  --op-oranje-vlak: rgba(255,255,255,0.14);
  --op-oranje-vlak-hover: rgba(255,255,255,0.24);
  --op-oranje-rand: rgba(255,255,255,0.7);
  --tint-warm: #F6E7DF;
  --tint-koel: #E7ECF3;
  --tint-blok: #F1EBE2;
  --tint-blok-lijn: #DFD5C6;
  --taal-uit: #C9C2B6;
  /* Dezelfde rol, maar OP EEN KAARTVLAK (het taalmenu) in plaats van op de
     header. --taal-uit haalt daar 1,97:1 en is dus onleesbaar; deze waarde
     haalt ruim 3:1 en blijft toch duidelijk doffer dan --grijs. */
  --taal-uit-vlak: #8A857D;
  --header-vlak: rgba(250, 246, 242, 0.94);
  --schaduw-groot: rgba(16, 25, 43, 0.18);
  --schaduw-mid: rgba(16, 25, 43, 0.14);
  --schaduw-zacht: rgba(16, 25, 43, 0.10);
  --sluier-warm: rgba(237, 57, 0, 0.10);
  --sluier-koel: rgba(16, 25, 43, 0.12);
  color-scheme: light;
  --maxw: 1120px;
  --font-head: "Schibsted Grotesk", "Helvetica Neue", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Geen scroll-behavior:smooth op html: Chrome laat dan de sprong naar een anker bij een paginawissel vallen
   (/voor-sollicitanten#contact vanaf de homepage bleef op 0 staan; A/B gemeten 2026-09-16, zie DoulaStudio).
   scroll-padding-top: de sticky header is 69px hoog (gemeten, desktop én 375px), dus een aangesprongen kop
   landt eronder zonder deze regel. */
html { scroll-padding-top: 80px; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tekst);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--kop);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2.6rem, 6.5vw, 4.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 0.6em; }
h3 { font-size: 1.25rem; margin-bottom: 0.4em; }

p + p { margin-top: 0.9em; }

a { color: var(--accent-tekst); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.punt { color: var(--accent-tekst); }

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: -999px; top: 8px; z-index: 99;
  background: var(--ink); color: var(--op-donker); padding: 10px 18px; border-radius: 6px;
}
.skip:focus { left: 8px; }

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-vlak);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--lijn);
}
.nav {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 28px;
}
.nav .logo img { height: 34px; width: auto; }
/* 14px: acht links, de Kennismaken-knop en het trio NL/EN/thema passen op
   1280px net op één regel. Bij 16px breken "Voor praktijken" en "Beschikbare
   kandidaten" middenin af.

   flex: 1 in plaats van margin-left: auto — anders is de hele balk rechts
   uitgelijnd en schuift hij mee met de lengte van de labels. Engelse labels
   zijn korter ("Jobs" tegen "Vacatures", "About" tegen "Over ons"), waardoor
   de navigatie in het Engels een flink stuk naar rechts sprong. Nu beginnen de
   links in beide talen op dezelfde plek en zit de vrije ruimte vóór het trio. */
.nav nav { display: flex; gap: 14px; flex: 1; align-items: center; }
.nav nav .taal-toggle { margin-left: auto; }
/* Dezelfde duw naar rechts voor de taalkiezer (25-08). Zonder deze regel plakt
   de dropdown tegen de laatste navigatielink en verdwijnt de vrije ruimte die
   de balk zijn rust geeft. */
.nav nav .taal-kies { margin-left: auto; }
.nav nav a {
  color: var(--kop); font-size: 15px; font-weight: 500;
}
.nav nav a:hover { color: var(--accent-tekst); text-decoration: none; }
.nav nav a[aria-current="page"] {
  color: var(--accent-tekst);
  border-bottom: 2px solid var(--terra); padding-bottom: 2px;
}
/* De contactknop houdt in beide talen dezelfde breedte. "Let's talk" is 32px
   smaller dan "Kennismaken"; zonder deze ondergrens verspringt de rechterkant
   van de header als je van taal wisselt. 150px = de Nederlandse breedte. */
.nav .knop { margin-left: 4px; min-width: 150px; text-align: center; }

/* ---------- taalwissel NL/EN (2026-08-20, hervormd 21-08) ----------
   Staat in de navigatie LINKS van de Kennismaken-knop. NL en EN staan boven
   elkaar, met de thema-knop rechts ernaast op halve hoogte: samen een
   driehoekje. Markup uit content/taal-koppelen.mjs; dat script zet ook de
   hreflang-verwijzingen.
   NL staat altijd boven, EN altijd onder — ze wisselen niet van plek als je
   klikt, want dan springt de knop onder je muis weg. */
.taal-toggle {
  display: inline-flex; flex-direction: column; align-items: stretch; gap: 2px;
  margin-left: 8px;
}
/* Iets kleiner dan de knoppen ernaast (die staan op 14.5-15px), zodat het
   als bijzaak leest en niet als derde call-to-action. */
.nav nav .taal-toggle a,
.taal-toggle .taal-aan,
.taal-toggle .taal-uit {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px;
  font: 600 9.5px var(--font-body); letter-spacing: 0.04em;
  border: 1px solid var(--lijn); border-radius: 999px;
  text-decoration: none;
}
.taal-toggle .taal-aan { color: var(--kop); border-color: currentColor; }
.nav nav .taal-toggle a { color: var(--grijs); }
.nav nav .taal-toggle a:hover {
  color: var(--accent-tekst); border-color: var(--accent-tekst); text-decoration: none;
}
/* geen tegenhanger: zichtbaar maar dood, met uitleg in de title */
.taal-toggle .taal-uit { color: var(--taal-uit); cursor: not-allowed; }

/* ---------- taalkiezer bij meer dan twee talen (2026-08-25) ----------
   Waarom een dropdown en niet nog een pil erbij: met vier talen wordt de
   kolom 74px hoog en duwt hij de header uit elkaar. En twee letters zijn te
   weinig houvast zodra het er vier zijn — "DE" en "ES" leest een bezoeker niet
   vanzelf. Hier staan de echte namen, zonder dat de header breder wordt.
   Besluit Olivier 25-08; dit is de bewuste uitzondering op "niet aan style.css
   komen" uit BUILD-SPEC.
   Werkt zonder JavaScript (<details>/<summary>). Markup: taal-koppelen.mjs en,
   voor de serverpagina's, taalsignalen() in atlas-sync/server/lib/vertaal.php. */
/* display:flex, want een <details> is een blok en de <summary> erin is
   inline-flex: de doos werd daardoor 29,8px hoog (regelhoogte) terwijl de pil
   22px is. De balk centreerde dus de dóós, waardoor de pil 2,6px onder de
   themaknop uitkwam. Als flexdoos is de details precies zo hoog als de pil.
   Het menu is position:absolute en doet niet mee in de flexstroom. */
.taal-kies { position: relative; display: flex; margin-left: 8px; }
.taal-kies > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px;
  font: 600 10px var(--font-body); letter-spacing: 0.04em; color: var(--kop);
  border: 1px solid var(--lijn); border-radius: 999px;
}
.taal-kies > summary::-webkit-details-marker { display: none; }
.taal-kies > summary svg { width: 9px; height: 9px; opacity: 0.6; }
.taal-kies > summary:hover { color: var(--accent-tekst); border-color: var(--accent-tekst); }
.taal-kies[open] > summary { color: var(--accent-tekst); border-color: var(--accent-tekst); }
.taal-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 124px;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px;
  padding: 5px; box-shadow: 0 8px 22px var(--schaduw-mid);
}
.nav nav .taal-menu a,
.taal-menu .taal-aan,
.taal-menu .taal-uit {
  display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 6px;
  font: 500 12.5px var(--font-body); color: var(--grijs); text-decoration: none;
}
.nav nav .taal-menu a:hover {
  background: var(--tint-warm); color: var(--accent-tekst); text-decoration: none;
}
.taal-menu .taal-aan { color: var(--kop); font-weight: 600; }
.taal-menu .taal-uit { color: var(--taal-uit-vlak); cursor: not-allowed; }
/* het codepilletje vóór de naam houdt de herkenbaarheid van de oude schakelaar */
.taal-menu .taal-code {
  font: 600 9.5px var(--font-body); letter-spacing: 0.04em;
  min-width: 17px; height: 17px; border: 1px solid var(--lijn); border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}

/* ---------- thema-knop licht/donker (2026-08-20) ----------
   Staat in de navigatie rechts van de taalknoppen. De markup komt uit
   content/thema-koppelen.mjs. Zelfde maat en toon als de taaltoggle; het
   icoon wisselt puur op CSS, zodat er geen script aan te pas komt. */
/* De knop is even hoog als de taalpil (22px) en staat er direct naast; die twee
   horen als één paar te lezen. Stond tot 26-08 op 17px, waardoor hij naast de
   pil te klein en te hoog oogde. Wijzig je de hoogte van .taal-kies > summary,
   wijzig deze dan mee — dat geldt ook voor het mobiele blok, waar beide 42px
   zijn. Tweede bewuste uitzondering op "niet aan style.css komen" uit
   BUILD-SPEC; gevraagd door Olivier 26-08. */
/* Derde uitzondering, ook 26-08: de knop kreeg een derde stand (auto) omdat een
   eenmaal gemaakte keuze de systeeminstelling permanent overrulede. De
   iconenregels hieronder sturen daarom op de stand; ze stonden tot nu toe in de
   twee donkere blokken onderaan en zijn daar weggehaald. */
.thema-knop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; margin-left: 6px;
  background: none; border: 1px solid var(--lijn); border-radius: 50%;
  color: var(--grijs); cursor: pointer; flex: none;
}
.thema-knop:hover { color: var(--accent-tekst); border-color: var(--cta); }
.thema-knop svg { width: 11px; height: 11px; }
/* Het icoon toont de GEKOZEN stand, niet de kleur die eruit volgt:
   auto (halfgevulde cirkel) → licht (zon) → donker (maan) → auto. Daarom hangt
   dit sinds 26-08 niet meer aan de media query: in auto staat er geen
   data-modus op <html>, en juist dán moet het auto-icoon te zien zijn. */
.thema-knop .icoon-zon, .thema-knop .icoon-maan { display: none; }
.thema-knop .icoon-auto { display: block; }
:root[data-modus="light"] .thema-knop .icoon-auto { display: none; }
:root[data-modus="light"] .thema-knop .icoon-zon  { display: block; }
:root[data-modus="dark"]  .thema-knop .icoon-auto { display: none; }
:root[data-modus="dark"]  .thema-knop .icoon-maan { display: block; }

/* twee logo's in de header; CSS toont er precies één. Selectie op src, zodat de
   bestaande <img> ongemoeid blijft en thema-koppelen alleen toevoegt. */
.nav .logo img[src$="logo-kort-donker.svg"] { display: none; }

.menu-knop {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--lijn); border-radius: 8px;
  padding: 8px 12px; font: 500 14px var(--font-body); color: var(--kop); cursor: pointer;
}

/* ---------- knoppen ---------- */
.knop {
  display: inline-block;
  background: var(--cta); color: var(--op-oranje);
  font-weight: 600; font-size: 15.5px;
  padding: 13px 26px; border-radius: 10px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.knop:hover { background: var(--cta-hover); text-decoration: none; transform: translateY(-1px); }
.knop.rustig {
  background: transparent; color: var(--kop);
  border: 1.5px solid var(--ink-2);
}
.knop.rustig:hover { background: var(--kop); color: var(--creme); }
.knop.groot { font-size: 17px; padding: 16px 32px; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(64px, 10vw, 128px) 0 clamp(56px, 8vw, 104px);
}
.hero .schild {
  position: absolute; right: -140px; top: -60px;
  width: clamp(380px, 44vw, 640px); opacity: 0.08;
  pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to bottom left, #000 30%, transparent 70%);
  mask-image: linear-gradient(to bottom left, #000 30%, transparent 70%);
}
.hero h1 { max-width: 20ch; }
.hero .sub {
  margin-top: 26px; max-width: 54ch;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--grijs);
}
.hero .acties { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }

/* geanimeerde intro — één keer, rustig */
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .sub, .hero .acties {
    opacity: 0; transform: translateY(14px);
    animation: opkomen 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  }
  .hero .sub { animation-delay: 0.12s; }
  .hero .acties { animation-delay: 0.22s; }
}
@keyframes opkomen { to { opacity: 1; transform: none; } }

/* ---------- secties ---------- */
section { padding: clamp(48px, 7vw, 88px) 0; }
.kicker {
  font: 600 13px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-tekst); margin-bottom: 14px;
}

/* bewijspunten */
.drie {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px;
}
.kaart {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px;
  padding: 28px 26px;
}
.kaart .nr {
  font: 600 15px var(--font-head); color: var(--accent-tekst); margin-bottom: 14px; display: block;
}
.kaart p { color: var(--grijs); font-size: 15.5px; }

/* twee paden */
.paden { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pad {
  border-radius: 16px; padding: 40px 36px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.pad.donker { background: var(--ink); }
.pad.donker h2, .pad.donker h3 { color: var(--op-donker); }
.pad.donker p { color: var(--op-donker-zacht); }
.pad.licht { background: var(--wit); border: 1px solid var(--lijn); }
.pad .knop { margin-top: auto; }

/* werkwijze stappen */
.stappen { counter-reset: stap; display: grid; gap: 0; margin-top: 10px; }
.stap {
  counter-increment: stap;
  display: grid; grid-template-columns: 72px 1fr; gap: 22px;
  padding: 26px 0; border-bottom: 1px solid var(--lijn);
}
.stap:last-child { border-bottom: none; }
.stap::before {
  content: "0" counter(stap);
  font: 600 30px var(--font-head); color: var(--accent-tekst); line-height: 1.1;
}
.stap p { color: var(--grijs); max-width: 62ch; }

/* quote / founder */
.quote {
  border-left: 3px solid var(--terra); padding-left: 26px; max-width: 60ch;
  font-family: var(--font-head); font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  color: var(--kop); line-height: 1.4;
}
.quote-bron { margin-top: 14px; font: 500 15px var(--font-body); color: var(--grijs); }

/* cta-band */
.band { background: var(--ink); position: relative; overflow: hidden; }
.band .schild {
  position: absolute; left: -110px; bottom: -140px; width: 420px; opacity: 0.07;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top right, #000 30%, transparent 72%);
  mask-image: linear-gradient(to top right, #000 30%, transparent 72%);
}
.band h2 { color: var(--op-donker); max-width: 18ch; }
.band p { color: var(--op-donker-zacht); max-width: 52ch; }
.band .tel {
  display: block; margin: 22px 0 6px;
  font: 600 clamp(1.6rem, 3.5vw, 2.4rem) var(--font-head); color: var(--op-donker);
}
.band .tel:hover { color: var(--amber); text-decoration: none; }
.band a.mail { color: var(--amber); }

/* eerlijk-blok */
.eerlijk {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 16px;
  padding: 36px; max-width: 720px;
}
.eerlijk h3 { color: var(--accent-tekst); }

/* vacatures */
.vacature-kaart {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px;
  padding: 28px; margin-top: 18px;
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline;
}
.vacature-kaart h3 { margin: 0; }
.vacature-kaart .meta { color: var(--grijs); font-size: 15px; }

/* tabellen-achtig: rollenlijst */
.rollen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 32px; margin-top: 20px; max-width: 640px; }
.rollen li {
  list-style: none; padding: 10px 0 10px 26px; position: relative;
  border-bottom: 1px solid var(--lijn); font-weight: 500; color: var(--kop);
}
.rollen li::before {
  content: ""; position: absolute; left: 0; top: 18px;
  width: 12px; height: 12px;
  background: var(--terra);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 0 72%, 44% 50%, 0 28%);
}

/* footer */
footer.site {
  background: var(--ink); padding: 56px 0 40px; margin-top: 40px;
}
footer.site .kolommen {
  display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; align-items: flex-start;
}
footer.site img { height: 40px; width: auto; }
footer.site p, footer.site a { color: var(--op-donker-zacht); font-size: 15px; }
footer.site a:hover { color: var(--op-donker); }
footer.site .klein { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--op-donker-lijn); color: var(--op-donker-stil); font-size: 13.5px; }

/* ---------- portret / persoon ---------- */
.persoon-hero {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.portret-groot { position: relative; margin: 0; }
.portret-groot img {
  width: 100%; height: auto; border-radius: 18px;
  box-shadow: 0 18px 50px var(--schaduw-groot);
}
.portret-groot figcaption {
  margin-top: 14px; font: 600 15px var(--font-body); color: var(--kop);
}
.portret-groot figcaption span {
  display: block; font-weight: 500; color: var(--grijs); font-size: 14px; margin-top: 2px;
}

.avatar {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  flex: none; box-shadow: 0 6px 18px var(--schaduw-mid);
}

/* stockbeeld met warme merkbehandeling */
.beeld-warm { position: relative; margin: 0; }
.beeld-warm img {
  width: 100%; height: auto; border-radius: 18px;
  box-shadow: 0 18px 50px var(--schaduw-groot);
  filter: saturate(0.85) sepia(0.16) contrast(0.97) brightness(1.03);
}
.beeld-warm::after {
  content: ""; position: absolute; inset: 0; border-radius: 18px;
  background: linear-gradient(160deg, var(--sluier-warm), var(--sluier-koel));
  pointer-events: none;
}
.founder { display: flex; gap: 30px; align-items: flex-start; margin-top: 26px; }
.contact-persoon { display: flex; gap: 24px; align-items: center; }

/* ---------- vacaturekaarten ---------- */
.vacature-lijst { display: grid; gap: 16px; margin-top: 30px; }
.vacature-kaart {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px;
  padding: 26px 28px; display: block;
}
.vac-top { display: flex; align-items: center; gap: 14px; justify-content: space-between; flex-wrap: wrap; }
.vac-top h3 { margin: 0; }
.vac-tag {
  font: 600 12px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-tekst); background: var(--tint-warm); border-radius: 999px; padding: 5px 12px; white-space: nowrap;
}
.vac-tag.interim { color: var(--kop); background: var(--tint-koel); }
/* Meerdere labels naast elkaar (2026-08-20): dienstvorm links van de
   beschikbaarheid. Een eigen wikkel is nodig omdat .vac-top in kaartweergave
   column-reverse is — zonder wikkel zouden de twee labels ónder elkaar komen. */
.vac-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vacature-kaart .meta { color: var(--grijs); font-size: 15px; margin-top: 8px; }
.vac-oms { margin-top: 12px; max-width: 68ch; }
.vacature-kaart .knop { margin-top: 18px; }

/* Lijstweergave (2026-08-20, verzoek Olivier). Drie ingrepen:
   1. titel, locatie en salaris in dezelfde maat, zodat de drie kerngegevens als
      één blok lezen. De kleuren blijven verschillen — die dragen betekenis
      (titel inkt, locatie grijs, salaris oranje).
   2. locatie → salaris strak tegen elkaar; zonder deze regel erft de salarisregel
      `p + p { margin-top: 0.9em }` (~16px) uit de basis.
   3. ruimte boven de knoppen. Die was 0: `.vacature-kaart .knop { margin-top: 18px }`
      wordt teruggezet door `.vac-acties .knop { margin-top: 0 }`, en `.vac-acties`
      zelf had buiten de kaartweergave geen marge.
   Scoping op :not(.kaart-grid), want de weergaveschakelaar zet die klasse op
   dezelfde container — zo lekt er niets naar de blokweergave. */
.vacature-lijst:not(.kaart-grid) .vac-top h3,
.vacature-lijst:not(.kaart-grid) .meta,
.vacature-lijst:not(.kaart-grid) .vac-salaris-regel { font-size: 1.1rem; }
.vacature-lijst:not(.kaart-grid) .vac-salaris-regel { margin-top: 4.5px; }
.vacature-lijst:not(.kaart-grid) .vac-acties { margin-top: 20px; }

/* ---------- formulier ---------- */
.formulier { max-width: 620px; margin-top: 8px; }
.veld { margin-bottom: 18px; }
.veld label { display: block; font-weight: 600; font-size: 15px; color: var(--kop); margin-bottom: 6px; }
.veld input, .veld textarea {
  width: 100%; font: 400 16px var(--font-body); color: var(--tekst);
  background: var(--wit); border: 1.5px solid var(--lijn); border-radius: 10px; padding: 12px 14px;
}
.veld input:focus, .veld textarea:focus { outline: none; border-color: var(--cta); }
.veld textarea { min-height: 130px; resize: vertical; }
.veld input[type="file"] { padding: 10px 12px; background: var(--creme); cursor: pointer; }
.veld .hint { font-size: 13.5px; color: var(--grijs); margin-top: 6px; }
.veld-readonly input { background: var(--creme); color: var(--grijs); }
.formulier .knop { margin-top: 8px; }
.form-klein { font-size: 13.5px; color: var(--grijs); margin-top: 16px; max-width: 60ch; }
.form-fout { color: var(--accent-tekst); font-weight: 500; font-size: 14.5px; margin-top: 14px; max-width: 60ch; }

/* ---------- responsief ---------- */
/* zes tabs + knop passen niet meer onder ~1080px: eerder naar het menu */
@media (max-width: 1080px) {
  .drie { grid-template-columns: 1fr; }
  .paden { grid-template-columns: 1fr; }
  .rollen { grid-template-columns: 1fr; }
  .nav nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--creme); border-bottom: 1px solid var(--lijn);
    padding: 8px 24px 18px;
  }
  .nav nav.open { display: flex; }
  .nav nav a { padding: 12px 0; font-size: 16px; }
  .nav .knop { margin: 10px 0 0; }
  .taal-toggle { margin: 14px 0 2px; }
  /* het driehoekje is duimonvriendelijk klein; in het uitgeklapte menu is
     ruimte genoeg, dus daar gaat alles terug naar een fatsoenlijk raakvlak */
  .nav nav { flex: none; }
  .taal-toggle { flex-direction: row; gap: 8px; }
  .nav nav .taal-toggle { margin-left: 0; }
  .nav nav .taal-kies { margin-left: 0; }
  .nav nav .taal-toggle a,
  .taal-toggle .taal-aan,
  .taal-toggle .taal-uit { min-width: 42px; height: 34px; font-size: 12px; }
  /* Blijft ook hier een dropdown — een <details> verbergt zijn inhoud zolang
     hij dicht is, dus de knop wegnemen zou de lijst onbereikbaar maken. Wel
     alles op duimformaat, en de lijst schuift het menu open in plaats van
     eroverheen te zweven. */
  .taal-kies { margin: 14px 0 2px; }
  .taal-kies > summary { height: 42px; font-size: 13px; padding: 0 14px; }
  .taal-kies > summary svg { width: 11px; height: 11px; }
  .taal-menu { position: static; margin-top: 6px; min-width: 0; }
  .nav nav .taal-menu a,
  .taal-menu .taal-aan,
  .taal-menu .taal-uit { min-height: 42px; font-size: 15px; }
  .thema-knop { width: 42px; height: 42px; margin: 6px 0 2px; }
  .thema-knop svg { width: 18px; height: 18px; }
  .menu-knop { display: block; }
  .stap { grid-template-columns: 52px 1fr; gap: 14px; }
  .hero .schild { right: -200px; opacity: 0.06; }
  .persoon-hero { grid-template-columns: 1fr; }
  .portret-groot { max-width: 420px; margin-top: 6px; }
  .founder { gap: 20px; }
  .avatar { width: 76px; height: 76px; }
}

/* ---------- faq ---------- */
.faq-intro-acties { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.faq-groep { max-width: 780px; }
.faq { border-bottom: 1px solid var(--lijn); }
.faq summary {
  font: 600 1.06rem/1.4 var(--font-body);
  color: var(--kop);
  padding: 18px 44px 18px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  font: 700 1.5rem/1 var(--font-head);
  color: var(--accent-tekst);
}
.faq[open] summary::after { content: "\2013"; color: var(--accent-tekst); }
.faq summary:hover { color: var(--accent-tekst); }
.faq .antwoord { padding: 0 0 20px; max-width: 66ch; }
.faq .antwoord p + p { margin-top: 0.8em; }
.faq-cta { margin-top: 10px; font-weight: 500; }

/* ================================================================
   v2 — nieuwe componenten (2026-07-07)
   ================================================================ */

/* ---------- vacature-filters ---------- */
/* Twee kolommen: de filtergroep die zelf mag afbreken, en de wisknop ernaast. Toen
   alles in één flex-rij zat, viel "Wis filters" er bij bepaalde breedtes net buiten en
   kwam hij alleen op een volgende regel te staan. */
.vac-filters {
  display: flex; gap: 14px; align-items: flex-end;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px;
  padding: 18px 20px; margin-top: 30px;
}
.vac-filter-groep {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  flex: 1 1 auto; min-width: 0;
}
/* De keuzelijsten houden hun eigen breedte — anders wordt "Alle vakgebieden" onder
   het pijltje afgekapt. Alleen het zoekveld rekt mee en levert ruimte in als de rij
   krap wordt. */
.vac-filter { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.vac-filter.groei { flex: 1 1 150px; min-width: 0; }
.vac-filter > label {
  font: 600 12px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--grijs);
}
.vac-filters select,
.vac-filters input[type="search"] {
  font: 400 15px var(--font-body); color: var(--tekst);
  background: var(--creme); border: 1.5px solid var(--lijn); border-radius: 10px;
  padding: 11px 13px; min-width: 152px; cursor: pointer;
}
/* alleen het zoekveld vult zijn kolom; de selects blijven op hun eigen maat */
.vac-filters input[type="search"] { width: 100%; min-width: 0; cursor: text; }
.vac-filters select:focus,
.vac-filters input[type="search"]:focus { outline: none; border-color: var(--cta); }
.vac-filter-reset {
  background: none; border: none; color: var(--accent-tekst); font: 600 14px var(--font-body);
  cursor: pointer; padding: 12px 6px; text-decoration: underline; text-underline-offset: 3px;
  flex: 0 0 auto; white-space: nowrap;
}
.vac-filter-reset:hover { color: var(--cta-hover); }
@media (max-width: 640px) {
  .vac-filters { flex-direction: column; align-items: stretch; }
  .vac-filter-reset { align-self: flex-end; }
}
.vac-teller { margin-top: 18px; font: 500 15px var(--font-body); color: var(--grijs); }
.vac-teller b { color: var(--kop); font-weight: 700; }
.vac-salaris { color: var(--accent-tekst); font-weight: 600; }
.vac-leeg {
  background: var(--wit); border: 1px dashed var(--lijn); border-radius: 14px;
  padding: 34px; margin-top: 18px; text-align: center; color: var(--grijs);
}
.vac-leeg a { font-weight: 600; }
.vacature-kaart[hidden] { display: none; }

/* ---------- sollicitatieformulier ---------- */
.form-kaart {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 18px;
  box-shadow: 0 18px 50px var(--schaduw-zacht);
  padding: clamp(26px, 4vw, 40px); max-width: 620px; margin: 10px auto 0; position: relative;
}
.form-chip {
  display: inline-flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  background: var(--tint-warm); border-radius: 999px; padding: 9px 17px;
  font: 500 15px var(--font-body); color: var(--kop); margin-bottom: 26px;
}
.form-chip span {
  color: var(--grijs); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em;
}
.form-chip b { color: var(--accent-tekst); font-weight: 700; }
.form-groep { margin-bottom: 28px; }
.form-groep:last-of-type { margin-bottom: 4px; }
.form-groep-titel {
  font: 600 13px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grijs); margin-bottom: 16px; padding-bottom: 9px; border-bottom: 1px solid var(--lijn);
}
.upload-veld input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload-knop {
  display: flex; align-items: center; gap: 12px;
  background: var(--creme); border: 1.5px dashed var(--lijn); border-radius: 12px;
  padding: 16px 18px; cursor: pointer; color: var(--kop); font-weight: 500;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.upload-knop:hover { border-color: var(--cta); background: var(--wit); }
.upload-knop svg { flex: none; }
.upload-naam { color: var(--grijs); font-size: 14px; margin-top: 8px; }

/* ---------- partnerbalk op de homepage ----------
   Volle breedte en rechte randen, tussen twee crème blokken. Bewust géén kaart
   in de wrap: zo gedroeg hij zich als "nog een tekstblok" naast het blok erboven.
   Let op: het blogblok eronder legt een witte boog van ~56px over wat erboven
   staat. Bij een gevulde balk hapt die uit de onderrand — dat is bedoeld; zet er
   extra bodemruimte onder zodra hier tekst tot onderaan komt. */
.partner-strip { background: var(--ink); padding: clamp(30px, 4vw, 44px) 0; }
.partner-strip .partner-strip-binnen {
  display: grid; grid-template-columns: minmax(260px, 0.9fr) 1.1fr; gap: 20px 48px; align-items: center;
}
/* de kicker staat hier groter dan elders: op 11,5px viel hij in deze balk weg */
.partner-strip .kicker { color: var(--amber); margin: 0 0 10px; font-size: 20px; letter-spacing: 0.05em; }
.partner-strip h2 { color: var(--op-donker); margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.85rem); max-width: 20ch; }
.partner-strip .punt { color: var(--amber); }
.partner-strip-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.partner-strip-rechts p { color: var(--op-donker-zacht); margin: 0; max-width: 46ch; flex: 1 1 300px; }
.partner-strip-rechts strong { color: var(--op-donker); }
.partner-strip-rechts .knop { flex: none; }
@media (max-width: 900px) { .partner-strip .partner-strip-binnen { grid-template-columns: 1fr; } }

/* ---------- partner: statement + spelregels ---------- */
.statement-tegel {
  background: var(--ink); border-radius: 18px; padding: clamp(32px, 5vw, 52px); padding-bottom: clamp(26px, 3.4vw, 34px); margin-top: 34px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 44px;
}
.statement-tegel .groot {
  font: 700 clamp(2.6rem, 7vw, 4.4rem) var(--font-head); color: var(--op-donker);
  line-height: 1; letter-spacing: -0.02em;
}
.statement-tegel .groot em { color: var(--amber); font-style: normal; }
.statement-tegel p { color: var(--op-donker-zacht); max-width: 42ch; margin: 0; }

.regels-tabel { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 15.5px; }
.regels-tabel th {
  text-align: left; font: 600 12px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grijs); padding: 0 20px 12px 0; border-bottom: 2px solid var(--lijn);
}
.regels-tabel td { padding: 16px 20px 16px 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.regels-tabel td:first-child { font-weight: 600; color: var(--kop); }
.regels-tabel td:last-child { color: var(--grijs); }

/* ---------- probleem-blok ---------- */
.probleem {
  background: var(--wit); border: 1px solid var(--lijn); border-left: 4px solid var(--terra);
  border-radius: 14px; padding: clamp(28px, 4vw, 44px);
}
.probleem h2 { color: var(--kop); }
.probleem p { color: var(--grijs); max-width: 62ch; }
.probleem .oplossing { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--lijn); color: var(--tekst); }
.probleem .oplossing strong { color: var(--accent-tekst); }

/* ---------- v2 responsief ---------- */
@media (max-width: 720px) {
  .vac-filters { flex-direction: column; align-items: stretch; }
  .vac-filter, .vac-filters select { width: 100%; }
  .statement-tegel { flex-direction: column; align-items: flex-start; gap: 16px; }
  .regels-tabel, .regels-tabel tbody, .regels-tabel tr, .regels-tabel td { display: block; width: 100%; }
  .regels-tabel thead { display: none; }
  .regels-tabel tr { border-bottom: 1px solid var(--lijn); padding: 14px 0; }
  .regels-tabel td { border: none; padding: 3px 0; }
  .regels-tabel td:first-child { padding-top: 6px; font-size: 16px; }
}

/* drag-over staat voor cv-upload */
.upload-knop.sleep-over { border-color: var(--cta); background: var(--wit); }
.upload-veld { position: relative; }

/* ---- Kennis-sectie (2026-07-19) ---- */
.kennis-lijst { display: grid; gap: 20px; max-width: 780px; }
.kennis-kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; padding: 26px 30px; }
.kennis-kaart h3 { margin: 0 0 6px; }
.kennis-kaart h3 a { text-decoration: none; color: var(--kop); }
.kennis-kaart h3 a:hover { color: var(--accent-tekst); }
.kennis-kaart p { margin: 0; color: var(--grijs); }
.kennis-meta { color: var(--grijs); font-size: 14px; margin: 0 0 10px; }
.kennis-meta .thema { color: var(--accent-tekst); font-weight: 600; }

.artikel { max-width: 720px; }
.artikel h2 { margin-top: 44px; }
.artikel p, .artikel li { font-size: 17px; line-height: 1.65; }
.artikel .intro { font-size: 19px; color: var(--kop); }
.artikel ul, .artikel ol { padding-left: 1.3em; }
.artikel li { margin: 0.35em 0; }

.tijdlijn { list-style: none; padding: 0; margin: 24px 0; }
.tijdlijn li { border-left: 3px solid var(--terra); padding: 2px 0 20px 18px; margin: 0; }
.tijdlijn li:last-child { padding-bottom: 4px; }
.tijdlijn .wanneer { display: block; font-weight: 600; color: var(--kop); font-size: 15px; }

.artikel-bronnen { border-top: 1px solid var(--lijn); margin-top: 44px; padding-top: 18px; font-size: 15px; color: var(--grijs); }
.artikel-bronnen a { color: inherit; word-break: break-all; }
.disclaimer { background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px; padding: 14px 18px; font-size: 15px; color: var(--grijs); margin-top: 32px; }
.terug-kennis { display: inline-block; margin-bottom: 18px; font-size: 15px; }

/* ================================================================
   STIJL A — REDACTIONEEL
   Vlak, hairlines i.p.v. kaders, mono labels, groot en strak gezet.
   ================================================================ */
:root {
  --lijn: #DBD3C7;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

/* typografie: groter, strakker, meer contrast tussen niveaus */
h1 { font-size: clamp(2.9rem, 7.6vw, 5.4rem); letter-spacing: -0.038em; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: -0.022em; }
h3 { font-size: 1.1rem; letter-spacing: -0.01em; }
.hero .sub { font-size: clamp(1.08rem, 1.5vw, 1.22rem); max-width: 48ch; color: var(--tekst); }
.hero h1 { max-width: 22ch; }

/* mono voor alle labels, tags en meta */
.kicker, .vac-tag, .form-groep-titel, .vac-filter > label, .regels-tabel th,
.vac-teller, .kennis-meta, .portret-groot figcaption span, .quote-bron {
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.kicker { color: var(--grijs); }
.kicker::before { content: "— "; color: var(--accent-tekst); }
.kaart .nr, .stap::before { font-family: var(--mono); font-weight: 500; }
.stap::before { font-size: 22px; letter-spacing: 0.02em; }

/* header: vlak, geen blur-glas */
header.site { background: var(--creme); backdrop-filter: none; border-bottom: 1px solid var(--ink-2); }
.nav nav a { font-size: 14.5px; }

/* kaarten worden hairline-blokken */
.kaart, .eerlijk, .vacature-kaart, .kennis-kaart, .vac-leeg, .probleem, .form-kaart, .vac-filters, .pad.licht, .disclaimer {
  background: transparent; border: none; border-radius: 0; box-shadow: none;
  border-top: 1px solid var(--ink-2);
  padding: 26px 0 8px;
}
.vac-filters { border-bottom: 1px solid var(--lijn); padding-bottom: 22px; align-items: flex-end; }
.probleem { border-left: none; border-top: 3px solid var(--terra); padding-top: 24px; }
.form-kaart { max-width: 560px; margin-inline: 0; }
.vac-leeg { text-align: left; border-style: solid; }
.drie { gap: 34px; }
.paden { gap: 34px; }
.pad { border-radius: 0; padding: 34px 0 0; }
.pad.donker { background: var(--ink); padding: 40px 36px; }
.eerlijk { max-width: 640px; }

/* invoervelden: vlak, alleen onderlijn */
.veld input, .veld textarea, .vac-filters select, .vac-filters input[type="search"] {
  background: transparent; border: none; border-bottom: 1.5px solid var(--ink-2);
  border-radius: 0; padding: 10px 2px;
}
.veld input:focus, .veld textarea:focus { border-bottom-color: var(--terra); }
.upload-knop { background: transparent; border: 1px solid var(--ink-2); border-radius: 0; }
.form-chip { background: transparent; border-radius: 0; border-left: 3px solid var(--terra); padding: 4px 0 4px 14px; }

/* knoppen: hoekig, ink als hoofdkleur, oranje als accent */
.knop { background: var(--ink-2); border-radius: 2px; font-weight: 600; letter-spacing: 0.01em; }
.knop:hover { background: var(--terra); transform: none; }
.knop.rustig { border: 1px solid var(--ink-2); background: transparent; border-radius: 2px; }
.vac-tag { background: transparent; border: 1px solid var(--lijn); border-radius: 0; color: var(--grijs); }
.vac-tag.interim { background: transparent; color: var(--accent-tekst); border-color: var(--terra); }

/* beeld: rustig, ontkleurd, geen ronding of schaduw */
.beeld-warm img, .portret-groot img { border-radius: 1px; box-shadow: none; filter: saturate(0.62) contrast(1.03); }
.beeld-warm::after { background: none; }
.avatar { border-radius: 1px; box-shadow: none; }

/* statement + quote */
.statement-tegel { border-radius: 0; }
.statement-tegel .groot { font-family: var(--mono); font-weight: 600; letter-spacing: -0.04em; }
.quote { border-left: none; padding-left: 0; border-top: 1px solid var(--ink-2); padding-top: 22px; font-size: clamp(1.3rem, 2.4vw, 1.75rem); }

.faq summary { font-size: 1rem; }
footer.site { margin-top: 0; }

/* fix: nav-CTA erfde de linkkleur van .nav nav a → tekst werd onleesbaar */
.nav .knop { color: var(--op-oranje); }
.nav .knop:hover { color: var(--op-oranje); }
/* op de eigen pagina won de aria-current-regel het van de knopkleur:
   oranje tekst op een oranje knop = onleesbaar */
/* de aria-current-regel hierboven zet padding-bottom op 2px; op een knop
   knipt dat de onderkant af. Terug naar de eigen padding van .knop. */
.nav nav a.knop[aria-current="page"] { color: var(--op-oranje); border-bottom: none; padding-bottom: 13px; }

/* ================================================================
   Kaarten naast elkaar (2026-08-07)
   Voor de uitgelichte blokken op de home en de kandidatenlijst.
   ================================================================ */
.kaart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; margin-top: 30px; }
.kaart-grid .vacature-kaart { display: flex; flex-direction: column; height: 100%; margin-top: 0; padding: 22px 0 24px; }
/* uitgefilterde kaarten blijven verborgen, ook in kaartweergave —
   anders wint de regel hierboven van [hidden] en blijft alles staan */
.kaart-grid .vacature-kaart[hidden] { display: none; }
.kaart-grid .vac-top { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
.kaart-grid .vac-top h3 { font-size: 1.15rem; }
.kaart-grid .vac-oms { flex: 1 1 auto; }
.kaart-grid .knop { align-self: flex-start; }
/* alle labels in dezelfde kleur: vast, interim en beschikbaarheid.
   Het onderscheid zit in het woord, niet in de kleur. */
.vac-tag, .vac-tag.interim, .vac-tag.beschikbaar {
  color: var(--accent-tekst); border-color: var(--terra); background: transparent;
}

/* salarisregel onderaan de kaart, tussen tekst en knop */
.kaart-grid .vac-salaris-regel {
  display: flex; align-items: baseline; gap: 10px;
  margin: 18px 0 18px; font-size: 15px; font-weight: 600; color: var(--kop);
}
.kaart-grid .vac-salaris-regel::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--terra); transform: translateY(-2px);
}
@media (max-width: 980px) { .kaart-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px)  { .kaart-grid { grid-template-columns: 1fr; } }

/* Rijen uitlijnen over de kaarten heen: label, meta, tekst, salaris en knop
   staan in elke kaart op dezelfde hoogte, ook als een tekst afbreekt.
   VOORWAARDE: elke kaart heeft dezelfde vijf blokken in deze volgorde —
   .vac-top · .meta · .vac-salaris-regel · .vac-oms · .vac-acties
   Sinds 20-08 volgen vacature- én kandidaatkaarten dit contract echt: de
   "Vraagt €…"-regel stond bij kandidaten ná de omschrijving en is verplaatst.
   Oude opgeslagen kaarten worden bijgetrokken door
   kaart_kandidaat_salaris_migreren() in server/lib/publiceer.php.
   Laat je er één weg, dan schuift die kaart uit het raster.
   Browsers zonder subgrid vallen terug op de flex-opmaak hierboven. */
@supports (grid-template-rows: subgrid) {
  .kaart-grid { grid-template-rows: repeat(5, auto); row-gap: 0; }
  /* row-gap 0 op de kaart zelf (2026-08-20): de kaart erfde in kaartweergave de
     10px uit `.vacature-kaart { gap: 10px 24px }`, bovenop de marges hieronder.
     Elke afstand kwam dus 10px hoger uit dan de CSS suggereerde. Nu staat elke
     tussenruimte exact in de marge die je hier leest. */
  .kaart-grid .vacature-kaart { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
  .kaart-grid .meta { margin-top: 18px; }
  .kaart-grid .vac-oms { margin-top: 22px; margin-bottom: 0; }
  /* Salaris staat direct ONDER de locatieregel en hoort daar strak tegenaan.
     4,5px in beide weergaven (keuze Olivier 20-08). De uitzondering voor
     kandidaatkaarten (:not([data-beschikbaar]), 9px) is vervallen: hun
     "Vraagt €…"-regel staat nu op dezelfde plek als bij vacatures. */
  .kaart-grid .vac-salaris-regel { margin: 4.5px 0 0; align-self: start; }
  .kaart-grid .vac-acties, .kaart-grid .knop { margin-top: 28px; align-self: end; justify-self: start; }
}

/* Actiebalk op de kaart (2026-08-19): de primaire knop en "Bekijk …" naast
   elkaar. Zonder deze wikkel belanden beide knoppen in dezelfde subgrid-rij
   en liggen ze over elkaar heen. */
/* Detailpagina's dragen géén headerbeeld (besluit Olivier 19-08): het donkere
   kopblok sluit dan zelf af en heeft onderaan gewone ruimte nodig. */
.artikel-kop.kop-zonder-beeld { padding-bottom: clamp(30px, 4vw, 48px); }

.vac-acties { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
/* Kaartactie (2026-08-20): nog één actie per kaart, als vetgedrukte tekstlink met
   een oranje streep eronder in plaats van een gevulde knop. Solliciteren en een
   profiel opvragen gebeurt op de detailpagina. */
.kaart-link {
  display: inline-block;
  font: 700 16px var(--font-body);
  color: var(--kop);
  text-decoration: none;
  border-bottom: 2px solid var(--cta);
  padding-bottom: 5px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.kaart-link:hover { color: var(--accent-tekst); }
.kaart-link:focus-visible { outline-offset: 4px; }
.vac-acties .knop { margin-top: 0; }

/* ---------- footer in kolommen ---------- */
footer.site .kolom-kop {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--op-donker-stil); margin-bottom: 12px;
}
footer.site .kolommen > div { min-width: 150px; }
footer.site .kolommen p { margin-top: 0; line-height: 1.9; }

/* Het beeldmerk in de hero loopt door tot onder de sectiegrens en vaagt daar
   uit, in plaats van hard afgesneden te worden door de hero.
   z-index -1 houdt het achter alle tekst; overflow-x: clip voorkomt dat de
   uitstekende rechterkant een horizontale schuifbalk geeft. */
html { overflow-x: clip; }
.hero { overflow: visible; }
.hero .schild {
  z-index: -1;
  width: clamp(420px, 50vw, 760px);
  -webkit-mask-image: linear-gradient(to bottom left, #000 34%, transparent 88%);
  mask-image: linear-gradient(to bottom left, #000 34%, transparent 88%);
}

/* ================================================================
   Scheiding tussen secties — site-breed (2026-08-07)
   Vanaf de derde sectie wisselen de vlakken crème/wit, en het witte vlak
   komt met een boog omhoog. De hero (1) en de sectie erna (2) blijven crème,
   zodat de pagina rustig begint. Werkt op elke pagina, ongeacht het aantal
   secties: 3, 5, 7 … zijn wit.
   ================================================================ */
main > section { padding-top: clamp(44px, 5.8vw, 76px); padding-bottom: clamp(44px, 5.8vw, 76px); }

main > section:nth-of-type(2n+3) { background: var(--wit); position: relative; }
main > section:nth-of-type(2n+3)::before {
  content: ""; position: absolute; left: 0; right: 0; top: -54px; height: 56px;
  background: var(--wit); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* De contactbanden zijn overal weg; de footer sluit de pagina af met een boog. */
footer.site { position: relative; margin-top: 56px; }
footer.site::before {
  content: ""; position: absolute; left: 0; right: 0; top: -54px; height: 56px;
  background: var(--ink); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* de twee paden: allebei een echt blok, even hoog, knop onderaan uitgelijnd */
.paden { align-items: stretch; }
.pad { height: 100%; }
/* het donkere blok krijgt dezelfde randdikte, anders scheelt de binnenmaat 1px */
.pad.donker { border: 1px solid transparent; padding: 40px 36px; }
.pad.licht {
  background: var(--wit);
  border: 1px solid var(--lijn); border-top: 1px solid var(--lijn);
  padding: 40px 36px;
}
.pad .knop { margin-top: auto; }
/* gevulde en omlijnde knop even hoog: de omlijnde heeft een rand van 1,5px,
   dus krijgt de gevulde een onzichtbare rand van dezelfde dikte */
.knop { border: 1.5px solid transparent; }

/* ---------- zoekzin (kandidatenpagina) ----------
   Leest als een zin in plaats van als een formulier. Werkt samen met de
   filterbalk eronder: de zin vult dezelfde filters aan. */
.zoekzin {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 16px;
  padding: clamp(22px, 3vw, 32px); margin-top: 8px;
  /* mobiele browsers schalen tekst soms op; dan kloppen de berekende veldbreedtes niet meer */
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.zoekzin .zin p {
  margin: 0; color: var(--kop); font-weight: 500;
  font-size: clamp(1.02rem, 1.6vw, 1.22rem); line-height: 2.2;
}
.zoekzin select, .zoekzin input {
  font: inherit; color: var(--accent-tekst); background: transparent;
  border: none; border-bottom: 1.5px solid var(--lijn); padding: 2px 2px 4px;
  max-width: 100%;   /* een lang ingetypt woord mag de zin niet uit het blok duwen */
}
/* eigen pijltje: het systeempijltje van de browser tekent over de laatste
   letters heen, waardoor de meegroeiende breedte niet klopt */
.zoekzin select {
  appearance: none; -webkit-appearance: none;
  padding-right: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ED3901' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 9px 6px;
}   /* ruimte voor het pijltje van de browser */
.zoekzin input::placeholder { color: var(--grijs); font-weight: 400; }
.zoekzin select:focus, .zoekzin input:focus { outline: none; border-bottom-color: var(--cta); }
.zin-acties { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.zin-alert { border-top: 1px solid var(--lijn); margin-top: 26px; padding-top: 24px; max-width: 540px; }
.zin-alert-uitleg { color: var(--grijs); font-size: 15px; margin: 0 0 18px; }
.zin-alert .veld input { border: 1.5px solid var(--lijn); border-radius: 8px; padding: 11px 13px; color: var(--tekst); }
.zin-gelukt { color: var(--kop); font-weight: 600; }

/* ---------- weergaveschakelaar op de vacaturepagina ----------
   Wis filters staat direct naast de filters; de schakelaar staat rechts,
   met de twee keuzes onder elkaar. */
/* de schakelaar staat in de filterbalk, direct rechts van Wis filters */
.vac-filters .weergave-schakel { flex-direction: row; align-self: flex-end; }
.vac-filters .weergave-schakel button + button { border-top: none; border-left: 1.5px solid var(--lijn); }
/* strakkere filterbalk: alles op één regel, smallere velden */
.vac-filters { padding: 16px 0; gap: 12px; }
.vac-filters select { min-width: 118px; padding: 9px 4px 9px 0; }
.vac-filters input[type="search"] { padding: 9px 2px; }
.vac-filter.groei { flex: 1 1 140px; }
.vac-filter-reset { padding: 9px 4px; }

/* Filterbalk prominenter (2026-08-20, keuze Olivier — variant A): zelfde open
   strook, maar zwaarder. Veldtekst van 15px grijs naar 18px vetgedrukt inkt met
   een massieve onderstreep eronder; labels donker in plaats van grijs.
   min-width: 0 op de velden is nodig omdat flex-items standaard niet kleiner
   worden dan hun inhoud — zonder dat kapt het zoekveld zijn placeholder af en
   wordt de weergaveschakelaar naar een tweede regel geduwd. */
.vac-filters { padding: 22px 0 24px; gap: 14px 20px; }
.vac-filter { min-width: 0; }
.vac-filter.groei { flex: 1 1 210px; }
.vac-filter > label {
  font: 700 12.5px var(--font-body); letter-spacing: 0.07em;
  color: var(--kop); margin-bottom: 2px;
}
.vac-filters select,
.vac-filters input[type="search"] {
  font: 700 18px var(--font-body); color: var(--kop);
  background: transparent; border: none; border-bottom: 2px solid var(--ink-2);
  border-radius: 0; padding: 9px 2px; min-width: 0;
}
.vac-filters input[type="search"] { width: 100%; }
.vac-filters input[type="search"]::placeholder { color: var(--grijs); font-weight: 600; }
.vac-filters select:focus,
.vac-filters input[type="search"]:focus { border-bottom-color: var(--cta); }
.vac-filter-reset { font: 700 15px var(--font-body); white-space: nowrap; }
/* het aantal staat rechts, op een eigen regel zonder extra lijn;
   even veel lucht boven als onder */
.vac-teller { text-align: right; margin-top: 14px; }
.vac-teller + .vacature-lijst, .vac-teller + .kaart-grid { margin-top: 14px; }

/* Teller en weergaveschakelaar op één regel (2026-08-20). De schakelaar stond in
   de filterbalk, maar met de zwaardere velden van variant A paste hij daar niet
   meer bij op één regel — en hij hoort inhoudelijk bij de resultatenlijst, niet
   bij het filteren. Buiten .vac-filters staat de schakelaar standaard verticaal;
   vandaar de flex-direction hier. */
.lijst-balk {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 16px; margin-top: 14px;
}
.lijst-balk .vac-teller { margin-top: 0; }
.lijst-balk .weergave-schakel { flex-direction: row; }
.lijst-balk .weergave-schakel button + button { border-top: none; border-left: 1.5px solid var(--lijn); }
.lijst-balk + .vacature-lijst, .lijst-balk + .kaart-grid { margin-top: 14px; }

/* Beeldmerk afsnijden op de paginarand (2026-08-20). De .schild-watermerken staan
   bewust deels buiten hun sectie (right/left negatief). Er stond al
   `html { overflow-x: clip }` hierboven, maar dat bleek niet genoeg: de body groeit
   dan alsnog mee en de pagina kon 140px horizontaal schuiven — op elke pagina.
   Met deze regel erbij is scrollWidth gelijk aan de viewport.
   clip en niet hidden: hidden maakt een scrollcontainer aan en breekt daarmee de
   sticky header (header.site). clip klemt alleen, zonder scrollcontainer.
   De band-schilden blijven bewust ongeklemd binnen hun sectie: die vagen met een
   mask uit en horen door te lopen tot de paginarand. */
body { overflow-x: clip; }
.vacature-lijst > .vacature-kaart:first-child { margin-top: 0; }
.weergave-schakel {
  display: inline-flex; flex-direction: column;
  border: 1.5px solid var(--lijn); border-radius: 8px; overflow: hidden;
}
.weergave-schakel button {
  background: transparent; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 12px; color: var(--grijs); line-height: 0;
}
.weergave-schakel svg { width: 18px; height: 18px; display: block; }
.weergave-schakel button + button { border-top: 1.5px solid var(--lijn); }
.weergave-schakel button:hover { color: var(--kop); }
.weergave-schakel button.aan { background: var(--kop); color: var(--creme); }

/* (vervallen 2026-08-20) De 'vier'-variant bestond zolang vacaturekaarten geen
   losse salarisregel hadden. Sinds die er is, hebben vacature- en kandidaatkaarten
   allebei vijf blokken en volstaat het standaard vijf-rijen-raster hierboven. */

/* ---------- oproepblok onder de vacatures ---------- */
.vac-oproep .wrap { text-align: center; }
.vac-oproep p { max-width: 54ch; margin: 0 auto; color: var(--grijs); }
.vac-oproep .knop { margin-top: 28px; }

/* onderste balk: links de bedrijfsgegevens, rechts contact */
footer.site .onderbalk {
  display: flex; flex-wrap: wrap; gap: 6px 24px;
  justify-content: space-between; align-items: baseline;
}
footer.site .onderbalk p { margin: 0; }
footer.site .onderbalk a { color: inherit; }
footer.site .onderbalk a:hover { color: var(--op-donker); }

/* ================================================================
   A1 — ZACHT REDACTIONEEL
   Zelfde structuur, maar warmer: kleur terug in het beeld,
   oranje knoppen, lichtere lijnen, meer lucht, iets kleinere kop.
   ================================================================ */
:root { --lijn: #E4DACB; }

h1 { font-size: clamp(2.7rem, 6.4vw, 4.4rem); letter-spacing: -0.03em; }
body { font-size: 17.5px; line-height: 1.7; }
section { padding: clamp(56px, 8vw, 104px) 0; }
.hero .sub { color: var(--grijs); max-width: 52ch; }

/* lijnen zachter: hairlines in warm zand i.p.v. hard inktblauw */
.kaart, .eerlijk, .vacature-kaart, .kennis-kaart, .vac-leeg, .form-kaart, .vac-filters, .pad.licht, .disclaimer {
  border-top-color: var(--lijn);
}
.vac-filters { border-top-color: var(--lijn); }

/* oranje als knop- en labelkleur */
.knop { background: var(--cta); }
.knop:hover { background: var(--cta-hover); }
.kicker { color: var(--accent-tekst); }
.kicker::before { content: ""; }
/* de zachte zandrand verdween op witte vlakken (contrast 1,3:1); terug naar
   de eigen inktkleur, zodat een secundaire knop overal als knop leest */
.knop.rustig { border-color: currentColor; color: var(--kop); }
.knop.rustig:hover { border-color: currentColor; }

/* beeld houdt zijn eigen kleur, lichte ronding terug */
.beeld-warm img, .portret-groot img { filter: saturate(0.95) contrast(1.0) brightness(1.02); border-radius: 6px; }
.avatar { border-radius: 50%; }

/* velden iets zachter */
.veld input, .veld textarea, .vac-filters select, .vac-filters input[type="search"] { border-bottom-color: var(--lijn); }
.veld input:focus, .veld textarea:focus { border-bottom-color: var(--cta); }
.upload-knop { border-color: var(--lijn); border-radius: 6px; }

/* ================================================================
   H2 — ZACHT GETINTE BLOKKEN
   Geen harde omslag naar donker: de kernblokken krijgen een zacht
   getint vlak met een stevige inktlijn ernaast. Gewicht zonder
   dat de pagina zijn lucht verliest.
   ================================================================ */
.probleem, .eerlijk {
  background: var(--tint-blok); border: none; border-top: none;
  border-left: 3px solid var(--ink-2);
  border-radius: 0 10px 10px 0; padding: clamp(26px, 3.6vw, 40px);
}
.probleem h2 { color: var(--kop); }
.probleem p, .eerlijk p { color: var(--grijs); }
.probleem .oplossing { border-top: 1px solid var(--tint-blok-lijn); color: var(--tekst); }
.probleem .oplossing strong { color: var(--accent-tekst); }
.eerlijk h3 { color: var(--accent-tekst); }

/* ================================================================
   I2 — GETINT MET ACCENT BOVEN
   Zelfde zachte tint als H2, maar het accent verhuist naar boven:
   een oranje lijn over de volle breedte, en de conclusie krijgt
   een eigen amber lijn. Nadruk via ritme, niet via kleurdiepte.
   ================================================================ */
.probleem, .eerlijk {
  background: var(--tint-blok);
  border-left: none; border-top: 3px solid var(--terra);
  border-radius: 0 0 10px 10px;
  padding: clamp(30px, 4vw, 46px);
}
.probleem h2 { font-size: clamp(1.65rem, 3vw, 2.25rem); }
.probleem .oplossing {
  border-top: none; border-left: 3px solid var(--amber);
  padding: 4px 0 4px 18px; margin-top: 26px;
}


/* ================================================================
   Afsluitend blok in Denta-oranje (2026-08-18)
   REGEL: de hoekjes naast een boog tonen de kleur van het blok
   erbóven, nooit de pagina-achtergrond. Het vlak zelf krijgt die
   kleur; het oranje wordt er met ::after overheen getekend.
   De :nth-of-type-varianten volgen de crème/wit-wissel hierboven.
   ================================================================ */
/* GEEN z-index hier: die maakt een stapelcontext waardoor het oranje vlak
   over de donkere footerboog heen komt te liggen en de overgang een rechte
   lijn wordt. Zonder z-index tekent de footer (later in de DOM) zijn boog
   netjes over het oranje, en klimt alleen het watermerk er met z-index
   bovenuit — dat is de overloop die we willen. */
main > section.band { position: relative; overflow: visible; background: var(--creme); }
main > section.band:nth-of-type(2n+4) { background: var(--wit); }
main > section.band::before { content: none; }
main > section.band::after {
  content: ""; position: absolute; inset: 0;
  background: var(--cta);
  border-radius: 50% 50% 0 0 / 56px 56px 0 0;
}
.band .schild { z-index: 3; }   /* boven de footerboog uit, zodat het logo doorloopt */
.band .wrap { position: relative; z-index: 2; }
.band h2, .band p { color: var(--op-oranje); }
.band .punt { color: var(--op-oranje); }  /* anders staat het leesteken oranje op oranje */
.band p { font-size: 19px; font-weight: 700; max-width: 46ch; }
.band .acties { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; align-items: center; }
.band .acties .knop { font-size: 16px; padding: 15px 30px; line-height: 1.25; text-align: center; }
.band .knop, .band .knop.rustig { background: var(--op-oranje); color: var(--cta); border: 1px solid var(--op-oranje); }
.band .knop:hover, .band .knop.rustig:hover { background: var(--op-donker); color: var(--cta); }

/* zelfde regel voor de footerboog: de strook erboven krijgt de kleur
   van het laatste blok, zodat er geen crème hoekjes overblijven */
main > section:last-of-type { position: relative; }
main > section:last-of-type:not(.band)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -56px; height: 56px;
  background: var(--creme);
}
main > section:nth-of-type(2n+3):last-of-type:not(.band)::after { background: var(--wit); }


/* ================================================================
   Hero sluit dichter aan (2026-08-18)
   De afstand hero -> eerstvolgende blok was padding-bottom van de hero
   (max 104px) plus padding-top van de sectie erna (max 112px). Beide
   gehalveerd. De homepage zet dit in de eigen <style> weer terug.
   ================================================================ */
.hero { padding-bottom: clamp(24px, 4vw, 40px); }
main > section.hero + section { padding-top: clamp(26px, 4.2vw, 44px); }


/* ================================================================
   Vier plekken waar de lucht binnen een sectie te ruim was (2026-08-18)
   ================================================================ */
/* filterbalk sluit aan op de introzin i.p.v. een halve scroll later */
.vac-filters { margin-top: 14px; }
/* formulier begint direct onder de intro */
.form-kaart { margin-top: 18px; }
/* eerste artikel sluit aan op de subtitel */
.kennis-lijst, .kennis-kaart:first-child { margin-top: 0; }


/* ================================================================
   Lucht bínnen de blokken die de grootste gaten veroorzaakten
   (index en partner, 2026-08-18). De sectiepadding was al terug naar
   76px; deze blokken legden daar hun eigen 40-52px bovenop.
   ================================================================ */
.pad.donker, .pad.licht { padding-top: 30px; padding-bottom: 40px; }
.probleem { padding-top: 28px; padding-bottom: 28px; }
.statement-tegel { padding-top: clamp(28px, 3.6vw, 38px); margin-top: 26px; }
.stap { padding-bottom: 18px; }


/* ================================================================
   Ruimte vóór een boog (2026-08-18)
   De boog van een wit blok hangt 54px omhoog in de ruimte van het blok
   erboven. Bij 76px padding blijft daar maar 22px zichtbaar van over,
   waardoor de witte lijn tegen de vlakken aan komt. Alleen de secties
   die door zo'n boog gevolgd worden krijgen hun ruimte terug.
   ================================================================ */
main > section:has(+ section:nth-of-type(2n+3)) { padding-bottom: clamp(64px, 8vw, 106px); }
/* zelfde verhaal voor de donkere footerboog */
main > section:last-of-type:not(.band) { padding-bottom: clamp(64px, 8vw, 106px); }


/* ================================================================
   Bogen op smalle schermen (2026-08-18)
   De boog is altijd 54px hoog, maar de sectiepadding kromp op mobiel
   tot 44px — inhoud stond dus óp de boog. Padding is nu opgebouwd als
   booghoogte + gewenste zichtbare marge, zodat het op elke breedte klopt.
   ================================================================ */
main > section.band { padding-bottom: calc(54px + clamp(36px, 4vw, 52px)); }
main > section:has(+ section:nth-of-type(2n+3)) { padding-bottom: calc(54px + clamp(30px, 4vw, 52px)); }
main > section:last-of-type:not(.band) { padding-bottom: calc(54px + clamp(30px, 4vw, 52px)); }


/* ================================================================
   Watermerk binnen het scherm op mobiel (2026-08-18)
   Op desktop mag het beeldmerk bewust buiten de hero vallen (het vervaagt
   over de sectiegrens). Op smalle schermen stak het 200px buiten het
   scherm: de documentbreedte werd 575px op een viewport van 375px.
   Zichtbaar effect: je kon de pagina uitzoomen naar lege ruimte.
   ================================================================ */
@media (max-width: 700px) {
  /* op mobiel klopt de doorloop-fade toch niet meer: gewoon clippen op de
     hero, dan is de documentbreedte exact de schermbreedte */
  .hero { overflow: hidden; }
  .hero .schild { right: -40px; width: min(280px, 72vw); }
  .band .schild { left: -80px; width: min(280px, 72vw); }
}

/* ================================================================
   Blog-artikelpagina's (2026-08-19)
   Artikelvel met headerbeeld, duidelijke terugknop, verder-lezen-
   kaarten onder de bronnen en thumbnails op het blogoverzicht.
   ================================================================ */

/* terugknop: los van de tekst, leest als knop */
.terug-knop {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--kop); border: 1px solid var(--ink-2); border-radius: 2px;
  padding: 9px 14px 8px; margin-bottom: 26px;
}
.terug-knop:hover { background: var(--kop); color: var(--creme); text-decoration: none; }

/* het artikel als wit vel op de crème pagina */
.artikel-vel {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 4px;
  max-width: var(--vel); overflow: hidden;
  /* stond linksgelijnd in een .wrap van 1120px: ruim 200px uit het midden.
     Geldt voor blog, vacatures en kandidaten — die delen deze wikkel. */
  margin-inline: auto;
}
/* de terugknop is een losse link boven het vel; die moet met de linkerrand
   van het vel meelopen, niet met de rand van de wrap. */
.kop-sectie .wrap > .terug-knop { margin-left: max(0px, (100% - var(--vel)) / 2); }
.artikel-held { margin: 0; border-bottom: 1px solid var(--lijn); background: var(--ink); }
.artikel-held img { width: 100%; height: auto; aspect-ratio: 1200 / 480; object-fit: cover; }
.artikel-vel .artikel { padding: clamp(28px, 5vw, 52px) clamp(20px, 5vw, 64px) clamp(36px, 5vw, 56px); }
/* .artikel is 720px breed in een vel van 848px en hing daardoor links; de
   tekstkolom stond zo'n 70px uit het midden van zijn eigen kaart. */
.artikel-vel .artikel { max-width: var(--vel-tekst); margin-inline: auto; }
.artikel-vel .artikel h2:first-of-type { margin-top: 36px; }
.artikel-vel .terug-kennis { display: none; } /* oude inline-link vervalt; knop staat boven het vel */

/* Blokritme in de detailtekst (2026-08-20, naar gruzzy.works). Elke <h2>-sectie
   staat in een eigen .vacblok; de even blokken krijgen een crème vlak. Bij
   300-450 woorden leest één plat wit vel als een muur.
   De wikkel komt uit secties_in_blokken() in server/lib/detail.php. */
/* padding: 0 is nodig — .vacblok is een <section> en zou anders de globale
   sectiepadding van ruim 100px erven, wat gaten in het artikel gaf. */
.artikel .vacblok { padding: 0; margin-top: 30px; }
.artikel .vacblok:first-of-type { margin-top: 26px; }
/* de kop staat al bovenaan het blok; de basismarge van 44px zou er bovenop komen */
.artikel .vacblok > h2:first-child { margin-top: 0; }
/* Het crèmevlak loopt breder dan de tekstkolom, zodat de tekst links uitlijnt met
   de platte blokken. Zou het vlak alleen padding krijgen, dan springt die tekst in
   en oogt de rechterrand rafelig. */
.artikel .vacblok-kaart {
  background: var(--creme);
  border-radius: 4px;
  margin-inline: calc(-1 * clamp(16px, 2.6vw, 26px));
  padding: clamp(18px, 2.6vw, 26px);
}
.artikel .vacblok > p:last-child,
.artikel .vacblok > ul:last-child,
.artikel .vacblok > ol:last-child { margin-bottom: 0; }

/* ================================================================
   Sollicitatieformulier in de oranje band (2026-08-20, variant A)
   Het formulier stond eerst in een eigen wit vel onder het artikel; dat vel
   was 1123px hoog, deze band is er ~380. Kop links, vier velden rechts in
   twee rijen. De kennismaakknoppen vervallen op vacaturepagina's — die band
   staat nu in detail_kennismaakband() en geldt alleen voor kandidaten.
   ================================================================ */
.band.band-solli { padding: clamp(40px, 5vw, 60px) 0 clamp(52px, 5vw, 74px); }
/* .band .wrap centreert bewust; een formulier leest links uitgelijnd. */
.band.band-solli .wrap { text-align: left; }
/* Op dezelfde 848px als het artikelvel erboven, anders steekt de band er aan
   beide kanten 112px buiten en loopt de linkerrand niet door. */
.band-solli .band-binnen {
  max-width: var(--vel); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(26px, 3.2vw, 46px); align-items: start;
}
.band.band-solli h2, .band.band-solli p { margin-left: 0; margin-right: 0; }
.band-solli h2 { max-width: 15ch; }
.band-solli .band-kolom p { font-size: 17px; font-weight: 500; opacity: 0.92; max-width: 34ch; }

.band-form { margin-top: 2px; }
.band-form .rij { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 13px; }
.band-form .knoprij { grid-template-columns: auto; justify-content: start; margin-bottom: 0; }
.band-form label {
  display: block; font: 500 13.5px var(--font-body); color: var(--op-oranje);
  margin-bottom: 5px; opacity: 0.9;
}
.band-form label .opt { font-weight: 400; opacity: 0.7; }
.band-form input[type=text], .band-form input[type=email], .band-form input[type=tel],
.band-form input:not([type]) {
  width: 100%; font: 400 15.5px var(--font-body); color: var(--op-wit);
  background: var(--op-oranje); border: 1px solid var(--op-oranje); border-radius: 10px; padding: 11px 13px;
}
.band-form input:focus, .band-form textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
/* Alleen de open sollicitatie heeft een tekstvak: daar is "waar zoek je" de
   enige context die we krijgen. Op een vacaturepagina is de vacature dat al. */
.band-form textarea {
  width: 100%; font: 400 15.5px var(--font-body); color: var(--op-wit);
  background: var(--op-oranje); border: 1px solid var(--op-oranje); border-radius: 10px;
  padding: 11px 13px; resize: vertical; min-height: 62px;
}
/* de vacaturenaam als je van een vacaturepagina komt (?functie=) */
.band-solli .band-vacature {
  font: 500 13.5px var(--mono); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--op-oranje); opacity: 0.85; margin-top: 14px;
}
/* dezelfde bestandskiezer als op solliciteren.html, maar wit-op-oranje */
.band-form .upload-veld { position: relative; }
.band-form .upload-veld input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.band-form .upload-knop {
  display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 0;
  background: var(--op-oranje-vlak); border: 1.5px dashed var(--op-oranje-rand);
  border-radius: 10px; padding: 10px 13px; color: var(--op-oranje); font: 500 15px var(--font-body);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.band-form .upload-knop:hover, .band-form .upload-knop.sleep-over {
  background: var(--op-oranje-vlak-hover); border-color: var(--op-oranje);
}
.band-form .upload-knop svg { flex: none; }
.band-form .knop {
  background: var(--op-oranje); color: var(--cta); border: 1px solid var(--op-oranje);
  font: 600 16px var(--font-body); padding: 12px 28px; cursor: pointer; white-space: nowrap;
}
.band-form .knop:disabled { opacity: 0.7; cursor: default; }
/* het bericht-veld op de profielband loopt over de volle kolom */
.band-form .rij.breed { grid-template-columns: 1fr; }
/* een veld naast de verzendknop (partnerintroductie): de knop lijnt onderaan
   uit met het invoerveld, en krijgt dezelfde hoogte zodat de rij één lijn houdt */
.band-form .rij.veldknoprij { grid-template-columns: 1fr auto; align-items: end; margin-bottom: 0; }
.band-form .veldknoprij .knop { padding-top: 11px; padding-bottom: 11px; }
/* bevestiging in de band: het formulier maakt plaats voor de bedankregel */
.band-solli p.band-dank { font: 700 clamp(1.05rem, 1.7vw, 1.3rem)/1.2 var(--font-head); color: var(--op-oranje); margin: 0 0 8px; }
.band-solli p.band-dank-tekst { font-size: 15.5px; font-weight: 400; color: var(--op-oranje); opacity: 0.9; max-width: 56ch; margin: 0; }
.band-solli p.band-dank-tekst a { color: var(--op-oranje); text-decoration: underline; text-underline-offset: 2px; }
/* .band p is 19px vet en .form-fout is oranje: allebei onbruikbaar op oranje. */
.band-solli p.band-klein { font-size: 13px; font-weight: 400; opacity: 0.82; margin-top: 12px; max-width: 66ch; }
.band-solli p.upload-naam { font-size: 13.5px; font-weight: 400; color: var(--op-oranje); opacity: 0.85; margin-top: 8px; }
.band-solli p.form-fout { font-size: 14.5px; font-weight: 500; color: var(--op-oranje); margin-top: 12px; max-width: 60ch; }
.band-solli p.form-fout a { color: var(--op-oranje); }
/* links in de kleine regel erfden de oranje linkkleur: oranje op oranje. */
.band-solli p.band-klein a { color: var(--op-oranje); text-decoration: underline; text-underline-offset: 2px; }
.band-solli p.band-klein a:hover { text-decoration-thickness: 2px; }
.band-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 900px) {
  .band-solli .band-binnen { grid-template-columns: 1fr; }
  .band-form .rij { grid-template-columns: 1fr; }
  /* ook de rij met een veld náást de knop stapelt; naast elkaar bleef het
     telefoonveld op een telefoon maar 106px breed */
  .band-form .rij.veldknoprij { grid-template-columns: 1fr; }
  .band-form .knop { width: 100%; }
}

/* verder lezen: drie kaarten naast elkaar onder het artikel */
.verder-lezen { padding-top: 0; }
.verder-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.verder-kop h2 { margin-bottom: 0; }
.alle-artikelen {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--kop);
}
.alle-artikelen:hover { color: var(--accent-tekst); text-decoration: none; }
.verder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 26px; }
.verder-kaart { display: block; border-top: 1px solid var(--lijn); padding-top: 20px; color: inherit; }
.verder-kaart:hover { text-decoration: none; }
.verder-thumb {
  display: block; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--lijn); background: var(--ink);
}
.verder-thumb img { width: 100%; height: auto; aspect-ratio: 1200 / 480; object-fit: cover; display: block; }
.verder-kaart .kennis-meta { display: block; margin: 16px 0 0; }
.verder-titel {
  display: block; margin-top: 8px;
  font-family: var(--font-head); font-weight: 700; font-size: 1.1rem;
  line-height: 1.25; letter-spacing: -0.01em; color: var(--kop);
}
.verder-kaart:hover .verder-titel { color: var(--accent-tekst); }

/* blogoverzicht: thumbnail naast elke kaart */
.kennis-lijst { max-width: 880px; }
.kennis-kaart { display: grid; grid-template-columns: 248px minmax(0, 1fr); column-gap: 30px; }
.kennis-thumb {
  grid-column: 1; grid-row: 1 / span 3; align-self: start;
  display: block; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--lijn); background: var(--ink);
}
.kennis-thumb img { width: 100%; height: auto; aspect-ratio: 1200 / 480; object-fit: cover; display: block; }
.kennis-kaart .kennis-meta, .kennis-kaart h3, .kennis-kaart > p { grid-column: 2; }

@media (max-width: 900px) {
  .verder-grid { grid-template-columns: 1fr; gap: 0; }
  .verder-kaart { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 20px; padding: 18px 0; }
  .verder-thumb { grid-row: 1 / span 2; align-self: start; }
  .verder-kaart .kennis-meta { margin-top: 0; grid-column: 2; }
  .verder-titel { grid-column: 2; }
}
/* kaarttitels linken naar hun detailpagina (2026-08-19): zelfde gedrag als
   de blogkaarten — inkt, terra bij hover, geen onderstreping in rust */
.vacature-kaart h3 a { text-decoration: none; color: var(--kop); }
.vacature-kaart h3 a:hover { color: var(--accent-tekst); text-decoration: none; }

@media (max-width: 660px) {
  .kennis-kaart { grid-template-columns: 1fr; }
  .kennis-thumb { grid-row: auto; margin-bottom: 16px; }
  .kennis-kaart .kennis-meta, .kennis-kaart h3, .kennis-kaart > p { grid-column: 1; }
}

/* Artikelkop op het vel (2026-08-19, keuze Olivier: donker kopblok):
   de kop-sectie vervangt hero én navigatiebalk; het ink-blok loopt naadloos
   over in het donkere headerbeeld. Lost ook de mobiele dubbelruimte op. */
.kop-sectie { padding-top: clamp(32px, 5vw, 56px); }
.kop-sectie .terug-knop { margin-bottom: 24px; }
.artikel-kop { background: var(--ink); padding: clamp(34px, 5vw, 58px) clamp(20px, 5vw, 64px) 4px; }
.artikel-kop .kicker { color: var(--amber); }
.artikel-kop h1 { color: var(--op-donker); font-size: clamp(2.1rem, 4.2vw, 3.4rem); max-width: 24ch; }
.artikel-kop .sub { margin-top: 16px; max-width: 60ch; color: var(--op-donker-zacht); font-size: clamp(1.02rem, 1.4vw, 1.18rem); }
/* Salaris op een eigen regel onder de meta, zoals op de kaart (2026-08-20).
   Op het donkere kopblok gebruikt de huisstijl amber als accent — de kicker doet
   dat ook. Het oranje van de kaart haalt hier 4,34:1 tegen de inktachtergrond en
   zakt daarmee onder de AA-drempel voor deze tekstgrootte; amber haalt 7,63:1. */
.artikel-kop .detail-salaris { margin-top: 6px; font-size: clamp(1.02rem, 1.4vw, 1.18rem); }
/* "Geanonimiseerd profiel · geplaatst … · bijgewerkt …" onder het bedrag. Bij een
   kandidaat telt versheid: staat deze persoon er nog? (naar gruzzy.works) */
.artikel-kop .detail-datum {
  margin-top: 14px; color: var(--op-donker-stil); font-size: 14px;
  font-family: var(--mono); letter-spacing: 0.02em;
}
.artikel-kop .detail-salaris .vac-salaris { color: var(--amber); font-weight: 600; }
@media (max-width: 700px) {
  .artikel-vel .artikel { padding-top: 22px; }
}

/* ================================================================
   Band-CTA's gecentreerd (2026-08-19, keuze Olivier)
   Kop, tekst en knoppen van elke oranje band staan in het midden.
   Kaarten in de band (zoekzin, aanmeldformulier) centreren als blok
   maar houden hun eigen tekst links — een invulzin of formulier
   gecentreerd zetten leest niet.
   ================================================================ */
.band .wrap { text-align: center; }
.band h2, .band p { margin-left: auto; margin-right: auto; }
.band .acties { justify-content: center; }
.band .zoekzin, .band .form-kaart { margin-left: auto; margin-right: auto; text-align: left; }


/* =============================================================================
   DONKERE MODUS (2026-08-20)

   Twee blokken met dezelfde inhoud, en dat is bewust:
     · het @media-blok volgt de systeeminstelling van de bezoeker, tenzij die
       zelf expliciet voor licht heeft gekozen;
     · het [data-modus="dark"]-blok is die eigen keuze, gezet door de knop in
       de navigatie en onthouden in localStorage.

   light-dark() zou het in één regel doen, maar valt op oudere Safari terug op
   een ongeldige waarde — en dan breekt de héle pagina in plaats van alleen de
   donkere modus. Om dezelfde reden staat hier geen CSS-nesting: elke selector
   is voluit geschreven. De test in test-lokaal.php bewaakt dat de twee blokken
   gelijk blijven.

   Beide wortelselectoren zijn specifieker dan het kale :root hierboven, dus ze
   verslaan ook de latere stijlrondes die --lijn opnieuw zetten (r. 614, 976).
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="light"]) {
  /* pagina het donkerst, blokken erboven, kaarten daar weer boven —
     omgekeerd aan licht, waar de pagina juist het lichtst is */
  --creme: #0B121F;          /* paginavlak */
  --ink:   #10192B;          /* blokken en artikelkoppen (gelijk aan licht) */
  --wit:   #1D2B45;          /* kaarten, vellen, tweede sectievlak */
  --ink-2: #1D2B45;          /* oppervlak en rand (gelijk aan licht) */

  --kop:   #FAF6F2;
  --tekst: #C9D2E0;
  --grijs: #94A3B8;         /* #7C8AA5 haalde op het kaartvlak maar 4,07:1 */
  --lijn:  #33415E;         /* #23304A was op het kaartvlak 1,07:1 — onzichtbaar */
  --accent-tekst: #FF7A45;  /* merkoranje als tékst haalt hier 3,50:1, dit 5,47 */

  --tint-warm: #351A0C;
  --tint-koel: #2A3A57;
  --tint-blok: #22304A;
  --tint-blok-lijn: #2E3E5C;
  --taal-uit: #4A5871;
  --taal-uit-vlak: #7E8CA6;   /* 4,09:1 op --wit; --taal-uit haalde er 1,97 */
  --header-vlak: rgba(11, 18, 31, 0.94);

  /* schaduwen moeten op donker zwart zijn, niet marine — anders zie je ze niet */
  --schaduw-groot: rgba(0, 0, 0, 0.45);
  --schaduw-mid:   rgba(0, 0, 0, 0.38);
  --schaduw-zacht: rgba(0, 0, 0, 0.32);

  color-scheme: dark;
  }

  /* het lichte logo verdwijnt, het lichte-op-donker logo komt ervoor in de plaats */
  :root:not([data-modus="light"]) .nav .logo img[src$="logo-kort.svg"] { display: none; }
  :root:not([data-modus="light"]) .nav .logo img[src$="logo-kort-donker.svg"] { display: block; }


  /* de partnerbalk is in licht het donkerste vlak van de pagina: dat is precies
     wat hem laat opvallen. In donker klapt dat om — inkt (#10192B) is dan bijna
     de paginakleur, en het getinte blok erboven (#22304A) is zelfs lichter. De
     balk krijgt daarom een eigen, hogere laag, zodat hij in beide modi het meest
     opgetilde element blijft. */
  :root:not([data-modus="light"]) .partner-strip { background: var(--tint-koel); }
:root:not([data-modus="light"]) .statement-tegel { background: var(--tint-koel); }

  /* foto's zijn hoog-key opgenomen en knallen er anders uit; de SVG's blijven
     onaangeraakt, die zijn al voor een donkere grond getekend */
  :root:not([data-modus="light"]) .beeld-warm img, :root:not([data-modus="light"]) .portret-groot img { filter: saturate(0.88) brightness(0.88); }
  :root:not([data-modus="light"]) .avatar { filter: brightness(0.9); }
  :root:not([data-modus="light"]) footer.site::before { border-top: 1px solid var(--lijn); box-sizing: border-box; }
}

:root[data-modus="dark"] {
  /* pagina het donkerst, blokken erboven, kaarten daar weer boven —
     omgekeerd aan licht, waar de pagina juist het lichtst is */
  --creme: #0B121F;          /* paginavlak */
  --ink:   #10192B;          /* blokken en artikelkoppen (gelijk aan licht) */
  --wit:   #1D2B45;          /* kaarten, vellen, tweede sectievlak */
  --ink-2: #1D2B45;          /* oppervlak en rand (gelijk aan licht) */

  --kop:   #FAF6F2;
  --tekst: #C9D2E0;
  --grijs: #94A3B8;         /* #7C8AA5 haalde op het kaartvlak maar 4,07:1 */
  --lijn:  #33415E;         /* #23304A was op het kaartvlak 1,07:1 — onzichtbaar */
  --accent-tekst: #FF7A45;  /* merkoranje als tékst haalt hier 3,50:1, dit 5,47 */

  --tint-warm: #351A0C;
  --tint-koel: #2A3A57;
  --tint-blok: #22304A;
  --tint-blok-lijn: #2E3E5C;
  --taal-uit: #4A5871;
  --taal-uit-vlak: #7E8CA6;   /* 4,09:1 op --wit; --taal-uit haalde er 1,97 */
  --header-vlak: rgba(11, 18, 31, 0.94);

  /* schaduwen moeten op donker zwart zijn, niet marine — anders zie je ze niet */
  --schaduw-groot: rgba(0, 0, 0, 0.45);
  --schaduw-mid:   rgba(0, 0, 0, 0.38);
  --schaduw-zacht: rgba(0, 0, 0, 0.32);

  color-scheme: dark;
}

/* het lichte logo verdwijnt, het lichte-op-donker logo komt ervoor in de plaats */
:root[data-modus="dark"] .nav .logo img[src$="logo-kort.svg"] { display: none; }
:root[data-modus="dark"] .nav .logo img[src$="logo-kort-donker.svg"] { display: block; }

/* de partnerbalk is in licht het donkerste vlak van de pagina: dat is precies
   wat hem laat opvallen. In donker klapt dat om — inkt (#10192B) is dan bijna
   de paginakleur, en het getinte blok erboven (#22304A) is zelfs lichter. De
   balk krijgt daarom een eigen, hogere laag, zodat hij in beide modi het meest
   opgetilde element blijft. */
:root[data-modus="dark"] .partner-strip { background: var(--tint-koel); }
:root[data-modus="dark"] .statement-tegel { background: var(--tint-koel); }

/* foto's zijn hoog-key opgenomen en knallen er anders uit; de SVG's blijven
   onaangeraakt, die zijn al voor een donkere grond getekend */
:root[data-modus="dark"] .beeld-warm img, :root[data-modus="dark"] .portret-groot img { filter: saturate(0.88) brightness(0.88); }
:root[data-modus="dark"] .avatar { filter: brightness(0.9); }
:root[data-modus="dark"] footer.site::before { border-top: 1px solid var(--lijn); box-sizing: border-box; }