/* =========================================================================
   LTB Connect – components
   Eén blok per component, in de volgorde van de pagina.
   Kleuren, maten en timing via tokens.css. Mobile-first.
   Breakpoints: sm 30em (480) · md 48em (768) · lg 64em (1024) · xl 80em (1280)

   THEMA'S
   Elke sectie leest zijn kleuren uit thema-variabelen (--t-*). Standaard is
   licht; hero en call-to-action zijn donker, vacatures getint (onderaan).
   ========================================================================= */


/* =========================================================================
   Thema-variabelen (licht = standaard)
   ========================================================================= */
:root {
  --t-bg: var(--c-wit);
  --t-tekst: var(--c-navy);
  --t-zacht: var(--c-ink-zacht);
  --t-accent: var(--c-oranje-tekst);
  --t-kaart: var(--c-wit);
  --t-kaart-rand: var(--c-rand);
  --t-lijn: var(--c-rand);
  --t-berg-1: var(--c-tint);
  --t-berg-2: var(--c-tint-sterk);
}
[data-thema] { background: var(--t-bg); color: var(--t-tekst); }


/* =========================================================================
   Gedeeld: knoppen, actielink, labels, berg-vormen, voorlopig-label, invullen
   ========================================================================= */

/* ---------- Knop ---------- */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: var(--knop-h);
  padding: var(--s-4) var(--s-6);
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-tekst);
  font-size: var(--fs-s);
  font-weight: var(--fw-tekst-bold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease-uit),
    color var(--dur-1) var(--ease-uit),
    border-color var(--dur-1) var(--ease-uit),
    transform var(--dur-2) var(--ease-uit);
}
.knop--groot { min-height: var(--knop-h-groot); padding-inline: var(--s-8); font-size: var(--fs-body); }
.knop--compact { min-height: var(--klikvlak-min); padding: var(--s-3) var(--s-5); }
.knop__pijl { flex: none; transition: transform var(--dur-2) var(--ease-uit); }
.knop:hover .knop__pijl { transform: translateX(var(--s-1)); }

.knop--primair { background: var(--actie); color: var(--c-wit); }
.knop--primair:hover { background: var(--actie-hover); transform: translateY(-2px); }
.knop--primair:active { background: var(--actie-hover); transform: none; }

/* Secundair volgt het thema: navy-omlijnd op licht, wit-omlijnd op donker */
.knop--secundair { background: transparent; color: var(--t-tekst); border-color: currentColor; }
.knop--secundair:hover { background: var(--t-tekst); color: var(--t-bg); border-color: var(--t-tekst); }

.knop--op-donker { background: var(--c-wit); color: var(--c-navy); }
.knop--op-donker:hover { background: var(--c-tint); }

/* ---------- Actielink ---------- */
.actielink {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--klikvlak-min);
  color: var(--t-accent);
  font-weight: var(--fw-tekst-bold);
  text-decoration: none;
}
.actielink__pijl { flex: none; transition: transform var(--dur-2) var(--ease-uit); }
.actielink:hover { text-decoration: underline; text-decoration-thickness: var(--onderstreep); text-underline-offset: 0.25em; }
.actielink:hover .actielink__pijl { transform: translateX(var(--beweging-hover)); }

/* ---------- Label ---------- */
.label {
  display: inline-flex;
  align-items: center;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-tekst-bold);
  line-height: var(--lh-krap);
}
.label--vast { background: var(--c-tint-sterk); color: var(--c-berg-donker); }
.label--zzp  { background: var(--c-tint-oranje); color: var(--c-tint-oranje-tekst); }

/* ---------- Berg-vormen (uit het logo) ---------- */
.berg--licht  { fill: var(--t-berg-1); }
.berg--midden { fill: var(--t-berg-2); }
.berg--donker { fill: var(--t-berg-2); }

/* ---------- Berg-hoek bij een foto (rechtsonder, steekt iets uit) ---------- */
.foto-berg { position: absolute; right: calc(-1 * var(--s-4)); bottom: calc(-1 * var(--s-6)); z-index: var(--z-boven); width: 34%; max-width: 12rem; height: auto; pointer-events: none; }

/* ---------- Voorlopige foto ---------- */
.voorlopig {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: var(--z-boven);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  background: var(--c-navy);
  color: var(--c-wit);
  font-size: var(--fs-xs);
  font-weight: var(--fw-tekst-medium);
  line-height: var(--lh-krap);
}

/* ---------- Invullen (concepttekst) ---------- */
.invullen {
  padding: 0 var(--s-1);
  border-radius: var(--s-1);
  background: var(--c-tint-oranje);
  color: var(--c-tint-oranje-tekst);
  font-weight: var(--fw-tekst-medium);
}


/* =========================================================================
   1. Header + navigatie (header.php)
   ========================================================================= */
.site-header {
  --h-bg: var(--c-wit);
  --h-tekst: var(--c-navy);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--h-bg);
  color: var(--h-tekst);
  transition: background-color var(--dur-3) var(--ease-uit), box-shadow var(--dur-3) var(--ease-uit), color var(--dur-3) var(--ease-uit);
}
.site-header.is-gescrold { box-shadow: var(--schaduw-zweef); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--header-h-mobiel); }
.site-header__logo { position: relative; display: block; flex: none; }
.site-header__logo img { width: auto; height: var(--s-8); }
.site-header__logo-kleur { transition: opacity var(--dur-3) var(--ease-uit); }
.site-header__logo-wit { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-3) var(--ease-uit); }
.site-header__acties { display: flex; align-items: center; gap: var(--s-2); }
.site-header__vacatures-lang { display: none; }

.menuknop {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--klikvlak-min);
  padding: var(--s-2) var(--s-4);
  border: 2px solid currentColor;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--h-tekst);
  font-weight: var(--fw-tekst-bold);
  font-size: var(--fs-s);
  cursor: pointer;
}
.menuknop__icoon { display: grid; gap: var(--s-1); width: var(--s-4); }
.menuknop__icoon span { display: block; height: 2px; background: currentColor; border-radius: var(--r-pill); transition: transform var(--dur-2) var(--ease-uit); }
.menuknop[aria-expanded="true"] { position: relative; z-index: calc(var(--z-overlay) + 1); color: var(--c-wit); }
.menuknop[aria-expanded="true"] .menuknop__icoon span:first-child { transform: translateY(3px) rotate(45deg); }
.menuknop[aria-expanded="true"] .menuknop__icoon span:last-child { transform: translateY(-3px) rotate(-45deg); }

.hoofdnav {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-10);
  padding: calc(var(--header-h-mobiel) + var(--s-8)) var(--s-gutter) var(--s-12);
  background: var(--c-navy);
  color: var(--c-wit);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(calc(-1 * var(--s-4)));
  transition: opacity var(--dur-3) var(--ease-in-uit), transform var(--dur-3) var(--ease-in-uit), visibility 0s linear var(--dur-3);
}
.hoofdnav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity var(--dur-3) var(--ease-in-uit), transform var(--dur-3) var(--ease-in-uit), visibility 0s; }
.hoofdnav__lijst { display: grid; gap: var(--s-2); }
.hoofdnav__link { display: inline-block; padding-block: var(--s-2); color: inherit; font-family: var(--font-kop); font-size: var(--fs-h3); font-weight: var(--fw-kop-s); line-height: var(--lh-kop); text-decoration: none; }
.hoofdnav__link[aria-current="page"] { color: var(--c-oranje-licht); }
.hoofdnav__link:hover { text-decoration: underline; text-decoration-thickness: var(--onderstreep); text-underline-offset: 0.2em; }
.hoofdnav :focus-visible { outline-color: var(--c-oranje-licht); }
.hoofdnav__vacatures-mobiel { align-self: flex-start; }

@media (min-width: 30em) {
  .site-header__logo img { height: var(--s-10); }
  .site-header__vacatures-lang { display: inline; }
  .site-header__vacatures-kort { display: none; }
}
@media (min-width: 64em) {
  .site-header__inner { min-height: var(--header-h); gap: var(--s-8); }
  .site-header__logo img { height: var(--s-12); }
  .menuknop, .hoofdnav__vacatures-mobiel { display: none; }
  .hoofdnav { position: static; inset: auto; z-index: auto; flex-direction: row; justify-content: center; flex: 1; gap: 0; padding: 0; background: none; color: inherit; overflow: visible; visibility: visible; opacity: 1; transform: none; transition: none; }
  .hoofdnav__lijst { display: flex; gap: var(--s-1); }
  .hoofdnav__link { position: relative; padding: var(--s-3); font-family: var(--font-tekst); font-size: var(--fs-s); font-weight: var(--fw-tekst-medium); line-height: 1; }
  .hoofdnav__link::after { content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: var(--s-1); height: var(--onderstreep); background: var(--c-oranje); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-3) var(--ease-uit); }
  .hoofdnav__link:hover { text-decoration: none; }
  .hoofdnav__link:hover::after, .hoofdnav__link[aria-current="page"]::after { transform: scaleX(1); }
  .hoofdnav__link[aria-current="page"] { color: inherit; }
  .hoofdnav :focus-visible { outline-color: var(--focus); }
}


/* =========================================================================
   3. Hero (template-parts/home/hero.php)
   ========================================================================= */
.hero { position: relative; overflow: hidden; padding-block: var(--s-8) var(--s-16); isolation: isolate; }
.hero__berg { position: absolute; right: -25%; bottom: 0; z-index: -1; width: 140%; height: 70%; }
.hero__inner { display: grid; gap: var(--s-5); }
.hero__foto { position: relative; order: -1; margin: 0; width: clamp(6rem, 26vw, 11rem); }
.hero__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-foto); background: var(--t-berg-1); }
.hero__foto .voorlopig { display: none; }
.hero__img--hoofd-boven { object-position: 50% 12%; }
.hero__titel { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--ls-display); max-width: 15ch; }
.hero__subkop { margin-top: var(--s-5); font-size: var(--fs-lead); color: var(--t-zacht); max-width: 36ch; }
.vinklijst.hero__punten { margin-top: var(--s-6); font-size: var(--fs-body); gap: var(--s-3); max-width: 40ch; }
.vinklijst.hero__punten li::before { top: 0.2em; }
.hero__vraag { margin-top: var(--s-6); font-family: var(--font-kop); font-size: var(--fs-h4); font-weight: var(--fw-kop-s); line-height: var(--lh-kop-s); }
.hero__acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-8); margin-top: var(--s-6); }
.hero__boog { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(2.5rem, 7vw, 6rem); }
.hero__boog-vlak { fill: var(--boog-vlak, var(--c-wit)); }
.hero__boog-lijn { fill: none; stroke: var(--c-oranje); stroke-width: var(--boog-dikte); stroke-linecap: round; vector-effect: non-scaling-stroke; }

@media (min-width: 64em) {
  .hero { display: grid; align-items: center; min-height: min(44rem, calc(100svh - var(--header-h))); padding-block: var(--s-10) var(--s-32); }
  .hero__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: var(--s-12); }
  .hero__titel { max-width: 16ch; }
  .hero__acties { margin-top: var(--s-8); }
  .hero__foto { order: 0; width: 100%; max-width: 36rem; justify-self: end; }
  .hero__img { aspect-ratio: 5 / 4; }
  .hero__foto .voorlopig { display: inline-block; }
  .hero__berg { right: -3%; width: 78%; height: 96%; }
  /* Homepage: hoger, met ruim afstand tussen de knoppen en de overlappende routekaarten */
  .hero--home { min-height: min(54rem, calc(100svh - var(--header-h) + var(--s-24))); padding-block: var(--s-16) calc(var(--s-32) + var(--s-24)); }
  .hero--home .hero__acties { margin-top: var(--s-10); }
}

/* Laad-choreografie: kop → subkop → knoppen, foto zoomt zacht in, berg schuift op, boog tekent zich */
@media (prefers-reduced-motion: no-preference) {
  .hero__titel, .hero__subkop, .hero__acties { animation: binnenkomen var(--dur-in) var(--ease-uit) both; }
  .hero__subkop { animation-delay: var(--stagger); }
  .hero__punten, .hero__vraag { animation: binnenkomen var(--dur-in) var(--ease-uit) calc(2 * var(--stagger)) both; }
  .hero__acties { animation-delay: calc(3 * var(--stagger)); }
  .hero__foto { animation: foto-in calc(1.4 * var(--dur-in)) var(--ease-uit) both; }
  .hero__berg { animation: berg-in calc(2 * var(--dur-in)) var(--ease-uit) both; }
  .hero__boog-lijn { animation: lijn-teken calc(1.6 * var(--dur-in)) var(--ease-in-uit) calc(3 * var(--stagger)) both; }
  @keyframes foto-in { from { opacity: 0.001; transform: scale(1.04); } }
  @keyframes berg-in { from { opacity: 0.001; transform: translateY(var(--s-12)); } }
  @keyframes lijn-teken { from { clip-path: inset(-50% 100% -50% 0); } to { clip-path: inset(-50% 0 -50% 0); } }
}


/* =========================================================================
   4. Routekeuze (template-parts/home/routekeuze.php)
   Kaart = foto bovenaan + twee opties naast elkaar, elk met drie vinkjes.
   ========================================================================= */
.routekeuze { position: relative; padding-block: var(--s-2) var(--s-sectie); }
.routekeuze__panelen { display: grid; gap: var(--s-5); }

.route-paneel { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-m); background: var(--t-kaart); border: 1px solid var(--t-kaart-rand); }
.route-paneel__beeld { display: none; overflow: hidden; }
.route-paneel__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform calc(2 * var(--dur-3)) var(--ease-uit); }
.route-paneel:hover .route-paneel__beeld img { transform: scale(1.03); }
.route-paneel__body { padding: var(--s-6) var(--s-5); }
.route-paneel__titel { font-size: var(--fs-h4); color: var(--t-zacht); font-family: var(--font-tekst); font-weight: var(--fw-tekst-medium); letter-spacing: 0; }
.route-paneel__opties { display: grid; gap: var(--s-6); margin-top: var(--s-4); }

.route-optie { display: flex; flex-direction: column; gap: var(--s-4); }
.route-optie + .route-optie { padding-top: var(--s-6); border-top: 1px solid var(--t-lijn); }
.route-optie__link {
  display: grid;
  align-content: space-between;
  gap: var(--s-3);
  color: inherit;
  text-decoration: none;
  border-radius: var(--r-s);
}
.route-optie__keuze { font-family: var(--font-kop); font-size: var(--fs-h3); font-weight: var(--fw-kop-l); line-height: var(--lh-kop); letter-spacing: var(--ls-kop); max-width: 9ch; text-wrap: balance; }
.route-optie__bestemming { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--t-accent); font-weight: var(--fw-tekst-bold); font-size: var(--fs-s); }
.route-optie__pijl { flex: none; transition: transform var(--dur-2) var(--ease-uit); }
.route-optie__link:hover .route-optie__keuze { text-decoration: underline; text-decoration-thickness: var(--onderstreep); text-decoration-color: var(--c-oranje); text-underline-offset: 0.15em; }
.route-optie__link:hover .route-optie__pijl { transform: translateX(var(--beweging-hover)); }

/* Vinkjes */
.vinklijst { display: grid; align-content: start; gap: var(--s-2); font-size: var(--fs-s); color: var(--t-zacht); line-height: var(--lh-krap); }
.vinklijst li { position: relative; padding-left: var(--s-6); }
.vinklijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: var(--s-4);
  height: var(--s-4);
  border-radius: var(--r-pill);
  background: var(--c-tint-oranje) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.9' fill='none' stroke='%237A3E0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

@media (min-width: 48em) {
  .route-paneel__beeld { display: block; height: clamp(11rem, 16vw, 15rem); }
  .route-paneel__body { padding: var(--s-8); }
  /* Subgrid: keuze-blokken en vinklijsten van beide opties staan op één lijn */
  .route-paneel__opties { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; column-gap: var(--s-8); row-gap: var(--s-4); }
  .route-optie { display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: var(--s-4); }
  .route-optie + .route-optie { padding-top: 0; border-top: 0; padding-left: var(--s-8); border-left: 1px solid var(--t-lijn); }
}
@media (min-width: 64em) {
  .routekeuze { z-index: var(--z-boven); margin-top: calc(-1 * var(--s-24)); padding-top: 0; }
  .routekeuze__panelen { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .route-paneel__body { padding: var(--s-8) var(--s-8) var(--s-10); }
}


/* =========================================================================
   5. USP – "Wat LTB Connect doet" (template-parts/home/usp.php)
   ========================================================================= */
.usp { padding-block: var(--s-sectie); }
.usp__inner { display: grid; gap: var(--s-12); }
.usp__beeld { position: relative; margin: 0; }
.usp__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-m); }

.usp__titel { font-size: var(--fs-h2); max-width: 16ch; }
.usp__alinea { margin-top: var(--s-6); font-size: var(--fs-lead); color: var(--t-zacht); }
.usp__alinea--vervolg { margin-top: var(--s-5); font-size: var(--fs-body); }
.usp__beeld--merk img { width: clamp(9rem, 45vw, 14rem); aspect-ratio: auto; object-fit: contain; border-radius: 0; }
.usp__punten { display: grid; gap: var(--s-8); margin-top: var(--s-12); }
.usp-punt { padding-top: var(--s-5); border-top: 2px solid var(--t-tekst); }
.usp-punt__titel { font-size: var(--fs-h3); }
.usp-punt__tekst { margin-top: var(--s-3); color: var(--t-zacht); }

.prijs { display: grid; gap: var(--s-2); max-width: none; margin-top: var(--s-12); padding: var(--s-8); border-radius: var(--r-m); background: var(--c-navy); color: var(--c-wit); --focus: var(--c-oranje-licht); }
.prijs__label { font-size: var(--fs-body); color: var(--c-ink-op-donker); }
.prijs__bedrag { font-family: var(--font-kop); font-size: var(--fs-h1); font-weight: var(--fw-kop-l); line-height: 1; letter-spacing: var(--ls-display); }
.prijs__link { color: var(--c-oranje-licht); justify-self: start; }

@media (min-width: 48em) {
  .usp__punten { grid-template-columns: 1fr 1fr; column-gap: var(--s-12); row-gap: var(--s-10); }
  .prijs { grid-template-columns: 1fr auto; align-items: end; column-gap: var(--s-10); }
  .prijs__link { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}
@media (min-width: 64em) {
  .usp__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-20); align-items: start; }
  .usp__beeld { position: sticky; top: calc(var(--header-h) + var(--s-8)); }
  .usp__beeld img { aspect-ratio: 4 / 5; }
  .usp__beeld--merk img { width: 100%; max-width: 24rem; aspect-ratio: auto; }
}


/* =========================================================================
   6. Vacatures (template-parts/home/vacatures.php + vacature-kaart.php)
   ========================================================================= */
.vacatures { padding-block: var(--s-sectie); }
.vacatures__kop { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-6) var(--s-10); margin-bottom: var(--s-12); }
.vacatures .sectie-kop__intro { color: var(--t-zacht); }
.vacatures__lijst { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.vacatures__lijst > li { display: grid; }

.vacature-kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 15rem;
  padding: var(--s-8) var(--s-6) var(--s-6);
  border: 1px solid var(--t-kaart-rand);
  border-radius: var(--r-m);
  background: var(--t-kaart);
  color: var(--t-tekst);
  transition: transform var(--dur-2) var(--ease-uit), background-color var(--dur-2) var(--ease-uit), color var(--dur-2) var(--ease-uit);
}
.vacature-kaart:hover { transform: translateY(calc(-1 * var(--s-1))); background: var(--t-kaart-hover, var(--c-navy)); color: var(--t-kaart-hover-tekst, var(--c-wit)); }
.vacature-kaart__labels { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); max-width: none; }
.vacature-kaart__voorbeeld { font-size: var(--fs-xs); }
.vacature-kaart__titel { margin-top: var(--s-3); font-size: var(--fs-h4); }
.vacature-kaart__link { color: inherit; text-decoration: none; }
.vacature-kaart__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.vacature-kaart__link:focus-visible { outline: none; }
.vacature-kaart:has(.vacature-kaart__link:focus-visible) { outline: var(--focus-breedte) solid var(--focus); outline-offset: var(--focus-breedte); }
.vacature-kaart__organisatie { font-size: var(--fs-s); }
.vacature-kaart__meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: auto; padding-top: var(--s-4); padding-right: var(--s-12); font-size: var(--fs-xs); font-weight: var(--fw-tekst-medium); }
.vacature-kaart__meta li + li::before { content: "·"; margin-right: var(--s-3); }
.vacature-kaart__pijl { position: absolute; right: var(--s-5); bottom: var(--s-5); display: grid; place-items: center; width: var(--s-10); height: var(--s-10); border-radius: var(--r-pill); background: var(--actie); color: var(--c-wit); transition: transform var(--dur-2) var(--ease-uit); }
.vacature-kaart:hover .vacature-kaart__pijl { transform: translateX(var(--s-1)); }


/* =========================================================================
   7. Oprichter (template-parts/home/oprichter.php)
   ========================================================================= */
.oprichter { padding-block: var(--s-sectie); }
.oprichter__inner { display: grid; gap: var(--s-12); align-items: center; }
.oprichter__foto { position: relative; margin: 0; width: 100%; max-width: 22rem; }
.oprichter__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-foto); }
.oprichter__titel { font-size: var(--fs-h3); }
.oprichter__titel-groot { display: block; margin-bottom: var(--s-2); font-size: var(--fs-display); font-weight: var(--fw-kop-l); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.oprichter__verhaal { margin-top: var(--s-8); font-size: var(--fs-lead); }
.oprichter__alinea { margin-top: var(--s-5); color: var(--t-zacht); }
.oprichter__naam { margin-top: var(--s-6); color: var(--t-zacht); }
.oprichter__naam strong { color: var(--t-tekst); }
.oprichter__tekst .actielink { margin-top: var(--s-4); }
@media (min-width: 64em) {
  .oprichter__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-20); }
  .oprichter__foto { max-width: 30rem; justify-self: start; }
}


/* =========================================================================
   8. Afsluitende call-to-action (template-parts/cta-kennismaken.php)
   ========================================================================= */
.cta { position: relative; overflow: hidden; padding-block: var(--s-sectie); }
.cta__inner { display: grid; gap: var(--s-10); align-items: center; }
.cta__symbool { width: clamp(9rem, 40vw, 16rem); height: auto; }
.cta h2 { font-size: var(--fs-h1); max-width: 14ch; }
.cta__tekst { margin-top: var(--s-5); font-size: var(--fs-lead); color: var(--t-zacht); }
.cta__acties { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
.knop__icoon { flex: none; }
@media (min-width: 64em) {
  .cta__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-20); }
  .cta__symbool { width: 100%; max-width: 26rem; justify-self: center; }
}


/* =========================================================================
   9. Footer (footer.php)
   ========================================================================= */
.site-footer { --focus: var(--c-oranje-licht); background: var(--c-navy); color: var(--c-wit); border-top: 1px solid var(--c-rand-op-donker); }
.site-footer__inner { display: grid; gap: var(--s-10); padding-block: var(--s-16) var(--s-12); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.site-footer__logo { width: auto; height: var(--s-12); }
.site-footer__zin { margin-top: var(--s-4); color: var(--c-ink-op-donker); font-size: var(--fs-s); }
.site-footer__titel { margin-bottom: var(--s-3); font-family: var(--font-tekst); font-size: var(--fs-s); font-weight: var(--fw-tekst-bold); letter-spacing: 0; color: var(--c-wit); }
.site-footer__lijst { display: grid; gap: var(--s-2); font-size: var(--fs-s); color: var(--c-ink-op-donker); }
.site-footer__adres { font-style: normal; }
.site-footer a:not(.knop) { color: var(--c-wit); text-decoration: none; }
.site-footer a:not(.knop):hover { text-decoration: underline; }
.site-footer__nadruk { font-weight: var(--fw-tekst-bold); }
.site-footer__tekst { margin-bottom: var(--s-4); color: var(--c-ink-op-donker); font-size: var(--fs-s); }
.site-footer__onder { background: var(--c-berg-donker); }
.site-footer__onder-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-6); padding-block: var(--s-4); font-size: var(--fs-xs); color: var(--c-ink-op-donker); }
.site-footer__juridisch { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
.site-footer__onder a:not(.knop) { text-decoration: underline; text-decoration-color: var(--c-rand-op-donker); }
.site-footer .invullen { background: transparent; color: var(--c-oranje-licht); outline: 1px dashed currentColor; outline-offset: 1px; }
@media (min-width: 64em) { .site-footer__juridisch { margin-left: auto; } }


/* =========================================================================
   10. Paginakop subpagina's (template-parts/paginakop.php)
   Kleiner broertje van de hero: navy, berg rechts, boog als overgang.
   ========================================================================= */
.paginakop { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--s-10) var(--s-24); }
.paginakop__berg { position: absolute; right: -30%; bottom: 0; z-index: -1; width: 120%; height: 55%; opacity: 0.7; }
.paginakop__titel { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--ls-display); max-width: 15ch; }
.paginakop__titel-regel { display: block; }
.paginakop__intro { margin-top: var(--s-6); font-size: var(--fs-lead); color: var(--t-zacht); max-width: 54ch; }
.paginakop__belofte { display: grid; gap: var(--s-2); margin-top: var(--s-8); font-family: var(--font-kop); font-size: var(--fs-h4); font-weight: var(--fw-kop-s); line-height: var(--lh-kop-s); }
.paginakop__belofte li { display: flex; align-items: center; gap: var(--s-3); }
.paginakop__belofte li::before { content: ""; flex: none; width: var(--s-2); height: var(--s-2); border-radius: var(--r-pill); background: var(--c-oranje); }
.paginakop__acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-8); margin-top: var(--s-10); }

@media (min-width: 48em) {
  .paginakop__belofte { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
  .paginakop__belofte li:first-child::before { display: none; }
  .paginakop__belofte li { gap: var(--s-4); }
}
@media (min-width: 64em) {
  .paginakop { padding-block: var(--s-16) var(--s-32); }
  .paginakop__titel { max-width: none; }
  .paginakop__inner { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .paginakop__inner > * { grid-column: 1; }
  .paginakop__berg { right: -2%; width: 52%; height: 92%; opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .paginakop__titel, .paginakop__intro, .paginakop__belofte, .paginakop__acties { animation: binnenkomen var(--dur-in) var(--ease-uit) both; }
  .paginakop__intro { animation-delay: var(--stagger); }
  .paginakop__belofte { animation-delay: calc(2 * var(--stagger)); }
  .paginakop__acties { animation-delay: calc(3 * var(--stagger)); }
  .paginakop__berg { animation: berg-in calc(2 * var(--dur-in)) var(--ease-uit) both; }
}


/* =========================================================================
   11. Werkgevers: zorgfocus (template-parts/werkgevers/zorg.php)
   ========================================================================= */
.zorg { padding-block: var(--s-sectie) var(--s-sectie-krap); }
.zorg__inner { display: grid; gap: var(--s-12); align-items: center; }
.zorg__foto { position: relative; margin: 0; }
.zorg__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-foto); }
.zorg__titel { font-size: var(--fs-h2); max-width: 16ch; }
.zorg__lead { margin-top: var(--s-6); font-size: var(--fs-lead); }
.zorg__tekst > p + p { margin-top: var(--s-5); }
.zorg__tekst > p:not(.zorg__lead) { color: var(--t-zacht); }
.zorg__tekst > .zorg__ook { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--t-lijn); font-size: var(--fs-s); }
@media (min-width: 64em) {
  .zorg__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-20); }
  .zorg__foto img { aspect-ratio: 4 / 5; object-position: 52% center; }
}


/* =========================================================================
   12. Werkgevers: diensten (bouwt op .route-paneel van de homepage)
   ========================================================================= */
.diensten { padding-block: var(--s-sectie-krap) var(--s-sectie); }
.diensten__titel { margin-bottom: var(--s-10); }
.diensten__panelen { display: grid; gap: var(--s-5); }
.dienst { scroll-margin-top: calc(var(--header-h) + var(--s-6)); }
.dienst__body { display: flex; flex: 1; flex-direction: column; }
.dienst__titel { font-size: var(--fs-h3); font-weight: var(--fw-kop-l); line-height: var(--lh-kop); }
.dienst__voor { display: block; margin-top: var(--s-2); font-family: var(--font-tekst); font-size: var(--fs-body); font-weight: var(--fw-tekst-medium); letter-spacing: 0; color: var(--t-zacht); }
.dienst__tekst { margin-top: var(--s-5); }
.dienst__vinkjes { margin-top: var(--s-6); font-size: var(--fs-body); color: var(--t-tekst); gap: var(--s-3); }
.dienst__vinkjes li::before { top: 0.2em; }
.dienst__link { margin-top: auto; padding-top: var(--s-6); align-self: flex-start; }
@media (min-width: 64em) {
  .diensten__panelen { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
}


/* =========================================================================
   13. Werkgevers: tarieven (template-parts/werkgevers/tarieven.php)
   Echte tabellen; bedragen in tabelcijfers zodat ze recht onder elkaar staan.
   ========================================================================= */
.tarieven { padding-block: var(--s-sectie); scroll-margin-top: var(--header-h); }
.tarieven__kop { display: grid; gap: var(--s-4); margin-bottom: var(--s-12); }
.tarieven__intro { font-size: var(--fs-lead); color: var(--t-zacht); }
.tarieven__panelen { display: grid; gap: var(--s-5); align-items: start; }
.tarief-paneel { padding: var(--s-6) var(--s-5) var(--s-5); border-radius: var(--r-m); background: var(--c-wit); scroll-margin-top: calc(var(--header-h) + var(--s-6)); }

.tarief-tabel { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.tarief-tabel__titel { caption-side: top; padding-bottom: var(--s-6); text-align: left; font-family: var(--font-kop); font-size: var(--fs-h3); font-weight: var(--fw-kop-l); line-height: var(--lh-kop); letter-spacing: var(--ls-kop); }
.tarief-tabel thead th { padding: 0 0 var(--s-3); border-bottom: 2px solid var(--c-navy); font-size: var(--fs-xs); font-weight: var(--fw-tekst-medium); line-height: var(--lh-krap); color: var(--c-ink-zacht); text-align: left; vertical-align: bottom; }
.tarief-tabel th + th, .tarief-tabel td { text-align: right; padding-left: var(--s-4); }
.tarief-tabel tbody th { padding-block: var(--s-5); font-weight: var(--fw-tekst-bold); text-align: left; line-height: var(--lh-krap); }
.tarief-tabel tbody tr + tr { border-top: 1px solid var(--c-rand); }
.tarief-tabel td { padding-block: var(--s-5); white-space: nowrap; }
.tarief-tabel__bedrag { font-family: var(--font-kop); font-size: var(--fs-h4); font-weight: var(--fw-kop-l); letter-spacing: var(--ls-kop); }
.tarief-tabel__bedrag--week { font-weight: var(--fw-kop-s); color: var(--c-berg-licht); }

.voorwaarden { display: grid; gap: var(--s-5); margin-top: var(--s-12); }
.voorwaarden__titel { font-size: var(--fs-h4); }
.voorwaarden__lijst { display: grid; gap: var(--s-3); max-width: var(--maat-tekst); color: var(--t-zacht); }
.voorwaarden__lijst li { position: relative; padding-left: var(--s-6); }
.voorwaarden__lijst li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: var(--s-3); height: 2px; border-radius: var(--r-pill); background: var(--c-navy); }

@media (min-width: 48em) {
  .tarief-paneel { padding: var(--s-8); }
  .tarief-tabel__bedrag { font-size: var(--fs-h3); }
}
@media (min-width: 64em) {
  .tarieven__kop { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; column-gap: var(--s-20); }
  .tarieven__panelen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); }
  .tarief-paneel { padding: var(--s-10); }
  .voorwaarden { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-20); margin-top: var(--s-16); }
}


/* =========================================================================
   14. Werkgevers: waarom LTB Connect (hergebruikt .usp-punt)
   ========================================================================= */
.waarom { padding-block: var(--s-sectie); }
.waarom__inner { display: grid; gap: var(--s-12); }
.waarom__titel { font-size: var(--fs-h2); max-width: 12ch; }
.waarom__beeldmerk { width: clamp(8rem, 34vw, 13rem); height: auto; margin-top: var(--s-8); }
.waarom__punten { display: grid; gap: var(--s-8); }
@media (min-width: 48em) {
  .waarom__punten { grid-template-columns: 1fr 1fr; column-gap: var(--s-12); row-gap: var(--s-10); }
  .waarom__punten > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .waarom__punten > :last-child:nth-child(odd) .usp-punt__tekst { max-width: 52ch; }
}
@media (min-width: 64em) {
  .waarom__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-20); align-items: start; }
  .waarom__kop { position: sticky; top: calc(var(--header-h) + var(--s-8)); }
  .waarom__beeldmerk { width: 100%; max-width: 20rem; margin-top: var(--s-12); }
}


/* =========================================================================
   15. Werkgevers: zorgvuldige controle (template-parts/werkgevers/controle.php)
   ========================================================================= */
.controle { padding-block: var(--s-sectie); }
.controle__inner { display: grid; gap: var(--s-10); align-items: center; }
.controle__titel { font-size: var(--fs-h2); max-width: 16ch; }
.controle__sub { display: block; margin-top: var(--s-4); font-size: var(--fs-h4); font-weight: var(--fw-kop-s); line-height: var(--lh-kop-s); letter-spacing: 0; color: var(--t-zacht); }
.controle__lead { margin-top: var(--s-8); font-size: var(--fs-lead); }
.controle__slot { margin-top: var(--s-6); color: var(--t-zacht); }

.controlelijst { padding: var(--s-6) var(--s-5); border-radius: var(--r-m); background: var(--c-wit); }
.controlelijst__intro { font-weight: var(--fw-tekst-medium); }
.controlelijst__items { margin: var(--s-6) 0 0; }
.controlelijst__item { position: relative; padding: var(--s-5) 0 var(--s-5) var(--s-12); border-top: 1px solid var(--c-rand); }
.controlelijst__item:last-child { padding-bottom: 0; }
.controlelijst__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--s-5);
  width: var(--s-8);
  height: var(--s-8);
  border-radius: var(--r-pill);
  background: var(--c-tint-oranje) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.9' fill='none' stroke='%237A3E0A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.controlelijst dt { font-family: var(--font-kop); font-size: var(--fs-h4); font-weight: var(--fw-kop-s); line-height: var(--lh-kop-s); }
.controlelijst dd { margin: var(--s-1) 0 0; color: var(--c-ink-zacht); }
@media (min-width: 48em) {
  .controlelijst { padding: var(--s-10); }
}
@media (min-width: 64em) {
  .controle__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-20); }
}


/* =========================================================================
   16. Werkwijze: vier stappen als klim naar de top (template-parts/werkwijze.php)
   Desktop: elke stap staat een tree hoger; één oranje lijn verbindt de nummers
   en tekent zich eenmalig als het blok in beeld komt. Mobiel: verticale lijn.
   ========================================================================= */
.werkwijze { padding-block: var(--s-sectie); }
.werkwijze__titel { font-size: var(--fs-h2); max-width: 20ch; margin-bottom: var(--s-12); }
.werkwijze__sub { display: block; margin-top: var(--s-4); font-size: var(--fs-h4); font-weight: var(--fw-kop-s); line-height: var(--lh-kop-s); letter-spacing: 0; color: var(--t-zacht); }

.stappen { --nummer: 2.75rem; --klim: var(--s-12); --kolom-gap: var(--s-8); position: relative; }
.stappen__lijn { display: none; }
.stappen__lijst { display: grid; gap: var(--s-10); }
.stap { position: relative; padding-left: calc(var(--nummer) + var(--s-5)); }
.stap__nummer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: var(--z-boven);
  display: grid;
  place-items: center;
  width: var(--nummer);
  height: var(--nummer);
  border-radius: var(--r-pill);
  background: var(--c-navy);
  color: var(--c-wit);
  font-family: var(--font-kop);
  font-size: var(--fs-s);
  font-weight: var(--fw-kop-l);
  font-variant-numeric: lining-nums;
}
.stap:last-child .stap__nummer { background: var(--actie); }
.stap:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--nummer) / 2 - 1px); top: var(--nummer); bottom: calc(-1 * var(--s-10)); width: 2px; background: var(--c-rand); }
.stap__titel { padding-top: var(--s-2); font-size: var(--fs-h4); }
.stap__tekst { margin-top: var(--s-2); color: var(--t-zacht); }

@media (min-width: 64em) {
  .stappen__lijst { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kolom-gap); align-items: start; }
  .stap { padding-left: 0; }
  .stap:not(:last-child)::after { display: none; }
  .stap:nth-child(1) { margin-top: calc(3 * var(--klim)); }
  .stap:nth-child(2) { margin-top: calc(2 * var(--klim)); }
  .stap:nth-child(3) { margin-top: var(--klim); }
  .stap__nummer { position: relative; margin-bottom: var(--s-5); }
  .stap__titel { padding-top: 0; }
  /* Lijn van het midden van nummer 1 naar het midden van nummer 4 */
  .stappen__lijn {
    display: block;
    position: absolute;
    left: calc(var(--nummer) / 2);
    top: calc(var(--nummer) / 2);
    width: calc(3 * ((100% - 3 * var(--kolom-gap)) / 4 + var(--kolom-gap)));
    height: calc(3 * var(--klim));
    overflow: visible;
  }
  .stappen__lijn path { fill: none; stroke: var(--c-oranje); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
}
@media (min-width: 64em) and (prefers-reduced-motion: no-preference) {
  .stappen.is-in { animation: none; }
  .stappen.is-in .stappen__lijn { animation: stappen-lijn calc(2 * var(--dur-in)) var(--ease-in-uit) var(--stagger) both; }
  .stappen.is-in .stap { animation: binnenkomen var(--dur-in) var(--ease-uit) both; animation-delay: calc(var(--i) * 2 * var(--stagger)); }
  .stap:nth-child(1) { --i: 0; } .stap:nth-child(2) { --i: 1; } .stap:nth-child(3) { --i: 2; } .stap:nth-child(4) { --i: 3; }
  @keyframes stappen-lijn { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% 0 -10% 0); } }
}


/* =========================================================================
   17. Call-to-action met foto (variant op 8, voor subpagina's)
   ========================================================================= */
.cta__foto { position: relative; margin: 0; }
.cta__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 30% center; border-radius: var(--r-foto); }
.cta__tekst--vervolg { margin-top: var(--s-4); font-size: var(--fs-body); }
.cta__noot { margin-top: var(--s-6); font-size: var(--fs-s); color: var(--t-zacht); }
@media (min-width: 64em) {
  .cta--foto .cta__foto img { aspect-ratio: 4 / 5; }
}


/* =========================================================================
   18. Kandidaten: assessment (template-parts/kandidaten/assessment.php)
   ========================================================================= */
.assessment { padding-block: var(--s-sectie); }
.assessment__inner { display: grid; gap: var(--s-8); }
.assessment__titel { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--ls-display); max-width: 11ch; }
.assessment__lead { font-size: var(--fs-lead); }
.assessment__tekst > p + p { margin-top: var(--s-5); color: var(--t-zacht); }
.assessment__tekst .knop { margin-top: var(--s-8); }
@media (min-width: 64em) {
  .assessment__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-20); align-items: start; }
}


/* =========================================================================
   19. Oprichter-variant met gewone kop + CTA met extra links
   ========================================================================= */
.oprichter__titel--normaal { font-size: var(--fs-h2); font-weight: var(--fw-kop-l); line-height: var(--lh-kop); max-width: 16ch; }
.cta__links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-8); margin-top: var(--s-6); }
.paginakop__tagline { margin-top: var(--s-6); font-family: var(--font-kop); font-size: var(--fs-h4); font-weight: var(--fw-kop-s); line-height: var(--lh-kop-s); }
.paginakop__acties--contact { gap: var(--s-3); }
.paginakop__links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-8); margin-top: var(--s-4); }
.paginakop--compact { padding-block: var(--s-10) var(--s-20); }
@media (min-width: 64em) { .paginakop--compact { padding-block: var(--s-12) var(--s-24); } }


/* =========================================================================
   20. Over: betekenis van de naam (template-parts/over/betekenis.php)
   ========================================================================= */
.betekenis { padding-block: var(--s-sectie); }
.betekenis__inner { display: grid; gap: var(--s-10); align-items: center; }
.betekenis__logo { margin: 0; padding: var(--s-10) var(--s-8); border-radius: var(--r-m); background: var(--c-wit); }
.betekenis__logo img { width: 100%; max-width: 30rem; margin-inline: auto; }
.betekenis__titel { font-size: var(--fs-h2); max-width: 14ch; }
.betekenis__tekst > p { margin-top: var(--s-5); }
.betekenis__tekst > p:first-of-type { margin-top: var(--s-6); font-size: var(--fs-lead); }
.betekenis__letter { color: var(--c-oranje-tekst); font-weight: var(--fw-tekst-bold); }
.handtekening { margin-top: var(--s-8); font-family: var(--font-kop); font-size: var(--fs-h4); font-weight: var(--fw-kop-s); line-height: var(--lh-kop-s); }
@media (min-width: 64em) {
  .betekenis__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-20); }
  .betekenis__logo { padding: var(--s-16) var(--s-12); }
}


/* =========================================================================
   21. Over: het verhaal (lange tekst, rustig zetwerk)
   ========================================================================= */
.verhaal { padding-block: var(--s-sectie); }
.verhaal__inner { display: grid; gap: var(--s-8); }
.verhaal__titel { font-size: var(--fs-h2); max-width: 14ch; }
.verhaal__tekst > p + p { margin-top: var(--s-5); }
.verhaal__tekst > p:first-child { font-size: var(--fs-lead); }
.verhaal__tekst > p:not(:first-child):not(.handtekening) { color: var(--t-zacht); }
@media (min-width: 64em) {
  .verhaal__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-20); align-items: start; }
  .verhaal__kop { position: sticky; top: calc(var(--header-h) + var(--s-8)); }
}


/* =========================================================================
   22. Formulieren (contact, inschrijven) – DESIGN-SYSTEM §7.9
   ========================================================================= */
.formulier { display: grid; gap: var(--s-6); }
.formulier__groep { display: grid; gap: var(--s-6); margin: 0; padding: 0; border: 0; min-width: 0; }
.formulier__groep + .formulier__groep { padding-top: var(--s-4); }
fieldset.veld { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.veld > legend { padding: 0; margin-bottom: var(--s-2); }
.formulier__groep-titel { padding: 0; margin-bottom: var(--s-1); font-family: var(--font-kop); font-size: var(--fs-h4); font-weight: var(--fw-kop-s); }
.formulier__rij { display: grid; gap: var(--s-6); }
.veld { display: grid; gap: var(--s-2); }
.veld__label { font-weight: var(--fw-tekst-medium); font-size: var(--fs-s); }
.veld__optioneel { font-weight: var(--fw-tekst); color: var(--c-ink-zacht); }
.veld__hint { font-size: var(--fs-xs); color: var(--c-ink-zacht); }
.veld__invoer {
  width: 100%;
  min-height: var(--knop-h);
  padding: var(--s-3) var(--s-4);
  border: var(--rand-veld);
  border-radius: var(--r-s);
  background: var(--c-wit);
  color: var(--c-navy);
  font: inherit;
  font-size: var(--fs-body);
  line-height: var(--lh-krap);
  transition: border-color var(--dur-1) var(--ease-uit), box-shadow var(--dur-1) var(--ease-uit);
  caret-color: var(--c-oranje-actie);
}
.veld__invoer::placeholder { color: var(--c-ink-zacht); }
textarea.veld__invoer { min-height: 9rem; resize: vertical; }
.veld__invoer:hover { border-color: var(--c-navy); }
.veld__invoer:focus-visible { border-color: var(--c-navy); box-shadow: inset 0 0 0 1px var(--c-navy); }
.veld__invoer[type="file"] { padding: var(--s-2); cursor: pointer; }
.veld__invoer[type="file"]::file-selector-button { margin-right: var(--s-4); padding: var(--s-2) var(--s-4); border: 2px solid var(--c-navy); border-radius: var(--r-pill); background: transparent; color: var(--c-navy); font: inherit; font-weight: var(--fw-tekst-bold); font-size: var(--fs-s); cursor: pointer; }
.veld__invoer[type="file"]::file-selector-button:hover { background: var(--c-navy); color: var(--c-wit); }
.veld__fout { display: none; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); font-weight: var(--fw-tekst-medium); color: var(--c-fout); }
.veld__fout::before { content: ""; flex: none; width: var(--s-4); height: var(--s-4); border-radius: var(--r-pill); background: var(--c-fout) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.5v4.2M8 11.2v.1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.is-ongeldig > .veld__fout, .is-ongeldig .veld__fout { display: flex; }
.is-ongeldig .veld__invoer { border-color: var(--c-fout); }

.keuzes { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.keuze { position: relative; }
.keuze input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.keuze span { display: inline-flex; align-items: center; min-height: var(--klikvlak-min); padding: var(--s-2) var(--s-5); border: var(--rand-veld); border-radius: var(--r-pill); font-size: var(--fs-s); font-weight: var(--fw-tekst-medium); transition: background-color var(--dur-1) var(--ease-uit), color var(--dur-1) var(--ease-uit), border-color var(--dur-1) var(--ease-uit); }
.keuze input:hover + span { border-color: var(--c-navy); }
.keuze input:checked + span { background: var(--c-navy); border-color: var(--c-navy); color: var(--c-wit); }
.keuze input:focus-visible + span { outline: var(--focus-breedte) solid var(--focus); outline-offset: var(--focus-breedte); }
.is-ongeldig .keuze span { border-color: var(--c-fout); }

.akkoord { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; font-size: var(--fs-s); }
.akkoord input { width: 1.375rem; height: 1.375rem; margin: 0.1em 0 0; accent-color: var(--c-navy); cursor: pointer; }
.akkoord .veld__fout { grid-column: 2; }
.formulier__voet { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); }
.formulier__noot { font-size: var(--fs-xs); color: var(--c-ink-zacht); }
.formulier__melding { display: none; gap: var(--s-2); padding: var(--s-5) var(--s-6); border-radius: var(--r-s); background: var(--c-tint); color: var(--c-navy); }
.formulier__melding.is-zichtbaar { display: grid; }
.formulier__melding strong { color: var(--c-succes); }
@media (min-width: 48em) {
  .formulier__rij--twee { grid-template-columns: 1fr 1fr; }
}


/* =========================================================================
   23. Contactpagina: formulier + gegevens
   ========================================================================= */
.contactblok { padding-block: var(--s-sectie); }
.contactblok__inner { display: grid; gap: var(--s-8); align-items: start; }
.formulier-kaart { padding: var(--s-6) var(--s-5); border: 1px solid var(--c-rand); border-radius: var(--r-m); background: var(--c-wit); }
.formulier-kaart__titel { font-size: var(--fs-h3); margin-bottom: var(--s-2); }
.formulier-kaart__intro { margin-bottom: var(--s-8); color: var(--c-ink-zacht); }
.gegevens { display: grid; gap: var(--s-6); }
.gegevens__foto { position: relative; margin: 0; }
.gegevens__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-foto); }
.gegevens__lijst { display: grid; gap: 0; margin: 0; }
.gegevens__item { display: grid; gap: var(--s-1); padding-block: var(--s-4); border-top: 1px solid var(--c-rand); }
.gegevens__item dt { font-size: var(--fs-xs); font-weight: var(--fw-tekst-medium); color: var(--c-ink-zacht); }
.gegevens__item dd { margin: 0; font-weight: var(--fw-tekst-bold); }
.gegevens__item a { color: var(--c-navy); text-decoration-color: var(--c-rand-veld); }
@media (min-width: 48em) { .formulier-kaart { padding: var(--s-10); } }
@media (min-width: 64em) {
  .contactblok__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-16); }
  .gegevens { position: sticky; top: calc(var(--header-h) + var(--s-8)); }
}


/* =========================================================================
   24. Inschrijven: formulier + wat er daarna gebeurt
   ========================================================================= */
.inschrijven { padding-block: var(--s-sectie); }
.inschrijven__inner { display: grid; gap: var(--s-10); align-items: start; }
.vervolg { padding: var(--s-6); border-radius: var(--r-m); background: var(--c-tint); }
.vervolg__titel { font-size: var(--fs-h4); margin-bottom: var(--s-5); }
.vervolg__lijst { display: grid; gap: var(--s-4); counter-reset: vervolg; }
.vervolg__lijst li { position: relative; padding-left: var(--s-10); font-size: var(--fs-s); color: var(--c-ink-zacht); counter-increment: vervolg; }
.vervolg__lijst li::before { content: counter(vervolg); position: absolute; left: 0; top: -0.1em; display: grid; place-items: center; width: var(--s-8); height: var(--s-8); border-radius: var(--r-pill); background: var(--c-navy); color: var(--c-wit); font-family: var(--font-kop); font-size: var(--fs-xs); font-weight: var(--fw-kop-l); }
.vervolg__lijst strong { display: block; color: var(--c-navy); }
.vervolg__contact { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--c-rand); font-size: var(--fs-s); }
@media (min-width: 64em) {
  .inschrijven__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-16); }
  .vervolg { position: sticky; top: calc(var(--header-h) + var(--s-8)); padding: var(--s-8); }
}


/* =========================================================================
   25. Vacature-overzicht met filter (template archive-vacature.php)
   ========================================================================= */
.overzicht { padding-block: var(--s-sectie-krap) var(--s-sectie); }
.filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-8); margin-bottom: var(--s-8); }
.filter__knoppen { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filter__knop { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--klikvlak-min); padding: var(--s-2) var(--s-5); border: 2px solid var(--c-navy); border-radius: var(--r-pill); background: transparent; color: var(--c-navy); font-size: var(--fs-s); font-weight: var(--fw-tekst-bold); cursor: pointer; transition: background-color var(--dur-1) var(--ease-uit), color var(--dur-1) var(--ease-uit); }
.filter__knop:hover { background: var(--c-tint); }
.filter__knop[aria-pressed="true"] { background: var(--c-navy); color: var(--c-wit); }
.filter__aantal { font-size: var(--fs-xs); font-weight: var(--fw-tekst-medium); font-variant-numeric: tabular-nums; opacity: 0.75; }
.filter__status { font-size: var(--fs-s); color: var(--c-ink-zacht); }
.overzicht__lijst { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.overzicht__lijst > li { display: grid; }
.overzicht__lijst > li[hidden] { display: none; }
.overzicht .vacature-kaart { --t-kaart-hover: var(--c-navy); }
.leeg { display: grid; gap: var(--s-4); justify-items: start; padding: var(--s-10) var(--s-8); border: 1px dashed var(--c-rand-veld); border-radius: var(--r-m); }
.leeg[hidden] { display: none; }
.leeg__titel { font-size: var(--fs-h4); }
.leeg p { color: var(--c-ink-zacht); }


/* =========================================================================
   26. Vacature-detail (template single-vacature.php)
   ========================================================================= */
.vacature-detail { padding-block: var(--s-sectie-krap) var(--s-sectie); }
.vacature-detail__inner { display: grid; gap: var(--s-10); align-items: start; }
.terug { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--klikvlak-min); margin-bottom: var(--s-4); color: var(--t-accent); font-weight: var(--fw-tekst-bold); text-decoration: none; }
.terug:hover { text-decoration: underline; }
.paginakop__labels { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
.paginakop__labels .vacature-kaart__voorbeeld { color: var(--c-ink-op-donker); }
.paginakop__meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); margin-top: var(--s-5); font-weight: var(--fw-tekst-medium); color: var(--t-zacht); }
.paginakop__meta li + li::before { content: "·"; margin-right: var(--s-5); }
.prozatekst > * + * { margin-top: var(--s-5); }
.prozatekst h2 { margin-top: var(--s-12); font-size: var(--fs-h3); }
.prozatekst h2:first-child { margin-top: 0; }
.prozatekst h3 { margin-top: var(--s-8); font-size: var(--fs-h4); }
.prozatekst ul:not([role]) { padding-left: var(--s-6); }
.prozatekst ul:not([role]) li + li { margin-top: var(--s-2); }
.prozatekst ul:not([role]) li::marker { color: var(--c-oranje); }
.prozatekst table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.prozatekst th, .prozatekst td { padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--c-rand); text-align: left; vertical-align: top; }
.prozatekst thead th { border-bottom: 2px solid var(--c-navy); font-size: var(--fs-xs); font-weight: var(--fw-tekst-medium); color: var(--c-ink-zacht); }
.prozatekst code { font-family: inherit; font-weight: var(--fw-tekst-bold); }
.tabel-scroll { overflow-x: auto; }
.reageer-kaart { display: grid; gap: var(--s-5); padding: var(--s-6); border-radius: var(--r-m); background: var(--c-tint); }
.reageer-kaart__titel { font-size: var(--fs-h4); }
.reageer-kaart__kenmerken { display: grid; margin: 0; }
.reageer-kaart__kenmerken div { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-3); border-top: 1px solid var(--c-rand); font-size: var(--fs-s); }
.reageer-kaart__kenmerken dt { color: var(--c-ink-zacht); }
.reageer-kaart__kenmerken dd { margin: 0; font-weight: var(--fw-tekst-bold); text-align: right; }
.reageer-kaart .knop { width: 100%; }
.reageer-kaart__persoon { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: center; padding-top: var(--s-5); border-top: 1px solid var(--c-rand); font-size: var(--fs-s); }
.reageer-kaart__persoon img { width: var(--s-16); height: var(--s-16); border-radius: var(--r-pill); object-fit: cover; object-position: 50% 20%; }
.reageer-kaart__persoon a { color: var(--c-navy); }
@media (min-width: 64em) {
  .vacature-detail__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-20); }
  .reageer-kaart { position: sticky; top: calc(var(--header-h) + var(--s-8)); padding: var(--s-8); }
}


/* =========================================================================
   27. Tekstpagina's (privacy, voorwaarden, 404)
   ========================================================================= */
.tekstpagina { padding-block: var(--s-sectie-krap) var(--s-sectie); }
.tekstpagina .prozatekst { max-width: var(--maat-tekst); }
.tekstpagina__datum { color: var(--t-zacht); }


/* =========================================================================
   28. Kleine varianten voor subpagina's
   ========================================================================= */
.oprichter--tint, .waarom--tint { --t-bg: var(--c-tint); }
.hero__subkop--vervolg { margin-top: var(--s-4); font-size: var(--fs-body); }
.zorg--over { padding-block: var(--s-sectie); }
@media (min-width: 64em) {
  .zorg--over .zorg__foto img { aspect-ratio: 3 / 2; }
}


/* =========================================================================
   Donkere secties: hero en call-to-action (gekozen variant 1 · Navy hero)
   ========================================================================= */
.hero,
.paginakop,
.cta {
  --t-bg: var(--c-navy);
  --t-tekst: var(--c-wit);
  --t-zacht: var(--c-ink-op-donker);
  --t-accent: var(--c-oranje-licht);
  --t-kaart: var(--c-berg-donker);
  --t-kaart-rand: transparent;
  --t-lijn: var(--c-rand-op-donker);
  --t-berg-1: var(--c-berg-donker);
  --t-berg-2: var(--c-berg-midden);
  --focus: var(--c-oranje-licht);
}
.cta .invullen { background: transparent; color: var(--c-oranje-licht); outline: 1px dashed currentColor; outline-offset: 1px; }
.vacatures { --t-bg: var(--c-tint); --t-kaart-rand: transparent; }
.tarieven,
.controle { --t-bg: var(--c-tint); }

/* Header op de navy hero: navy bovenaan, wit na het scrollen */
.site-header:not(.is-gescrold) { --h-bg: var(--c-navy); --h-tekst: var(--c-wit); --focus: var(--c-oranje-licht); }
.site-header:not(.is-gescrold) .site-header__logo-wit { opacity: 1; }
.site-header:not(.is-gescrold) .site-header__logo-kleur { opacity: 0; }

/* Routekaarten overlappen op desktop de onderkant van de hero */
@media (min-width: 64em) {
  .routekeuze { background: linear-gradient(to bottom, transparent var(--s-24), var(--t-bg) var(--s-24)); }
}