/* Google Maps in plaats van een kaartafbeelding, op voorstel van Anneke
   van 15 september 2026. Zonder API-sleutel via output=embed, dus dit
   werkt meteen. In productie hoort dit achter de cookietoestemming: een
   ingesloten kaart zet cookies van een derde partij. */
.office__kaart { aspect-ratio: 16 / 10; border-radius: var(--radius-image); overflow: hidden; }
.office__kaart iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   Recruit a Student België - site.css
   Prototype, versie 1.0, 31 augustus 2026

   Leest tokens.css. Bevat geen enkele hexcode: alles loopt via de tokens,
   zodat het doelgroepspoor en de huisstijl op één plek beheerd worden.
   ========================================================================== */

/* ---------- 1. Reset en basis ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + var(--header-h) + var(--space-4));
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-link-hover); }

/* Focus is altijd zichtbaar. Nooit uitzetten. */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--space-4); top: -100px; z-index: 999;
  background: var(--ras-blue-700); color: #fff; padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-input); font-weight: var(--fw-medium); text-decoration: none;
}
.skip:focus { top: var(--space-4); color: #fff; }

/* De doelgroep- en oppervlakschakelaars zetten tokens, maar een token
   alleen verft niets. body had color al één keer opgelost naar de donkere
   inkt, en alles daarbinnen erfde die waarde. Daardoor stond elke kop op
   een gekleurde band in donkere inkt in plaats van wit: 3,6:1 in plaats
   van 8,6:1. Deze regel laat de schakelaar zijn eigen tekstkleur ook echt
   toepassen. */
[data-surface="band"],
[data-surface="accent"] { color: var(--color-text); }

/* ---------- 2. Layout ---------- */

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--container-wide); }
.wrap--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-large); }
.section--soft { background: var(--color-surface-soft); }
.section--tint { background: var(--accent-tint); }
.section--band { background: var(--color-surface-band); }
.section--accent { background: var(--color-surface-accent); }

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 40em)  { .g-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) {
  .grid { gap: var(--space-6); }
  .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- 3. Typografie-hulpklassen ---------- */

.t-display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.t-h1 { font-size: var(--fs-h1); }
.t-h2 { font-size: var(--fs-h2); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.t-h4 { font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.t-lead { font-size: var(--fs-lead); color: var(--color-text-secondary); max-width: var(--measure-lead); }
.t-small { font-size: var(--fs-small); }
.t-meta { font-size: var(--fs-meta); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--color-text-muted); }
.prose { max-width: var(--measure-prose); }
.center { text-align: center; }
.center .t-lead, .center .prose { margin-inline: auto; }

/* Het bovenkopje is géén kop, dus altijd een p of span. Anders ontstaat er
   een extra kopniveau in de structuur. */
.eyebrow {
  display: block; margin: 0 0 var(--space-3);
  font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--accent-on-tint);
}

.section__head { max-width: 46rem; margin-bottom: var(--space-8); }
.section__head.center { margin-inline: auto; }

/* ---------- 4. Knoppen ---------- */

/* De knoppenset is overgenomen van de live site, gemeten op 31 augustus 2026.
   Zelfde vullingen, zelfde tekstkleuren, zelfde radius, zelfde gewicht 500,
   geen kapitalen. Enige aanpassing: de hoogte is opgetrokken naar 44px, want
   de kleine variant op de huidige site (padding 6px 18px) haalt de
   minimale aanraakzone niet. Dat is een maatvoering, geen stijlwijziging.

   1. .btn--orange  #ff7f32 met wit    de studenten-CTA
   2. .btn--blue    #0091da met wit    de werkgevers-CTA
   3. .btn--white   wit met #0091da    tweede actie, en op donkere vlakken
   4. .btn--plain   transparant met #0091da
   5. .btn--link    tekstlink met pijl
*/
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 10px 22px;                 /* exact zoals live */
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);      /* 500, zoals live */
  line-height: 1.2;
  text-align: center; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  /* Was 26px, dus pilvormig zoals de live site. Op verzoek van
     4 september 2026 teruggebracht naar een zachte rechthoek. */
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-inout),
              border-color var(--dur-fast) var(--ease-inout),
              color var(--dur-fast) var(--ease-inout),
              transform var(--dur-fast) var(--ease-inout);
}
.btn:active { transform: translateY(1px); }

/* Wit label op het oranje vlak, op verzoek van 23 september 2026.

   Bekend punt: die combinatie haalt 2,52:1 en blijft daarmee onder de
   4,5:1 van WCAG AA, en ook onder de 3:1 voor grote tekst. Zwart op
   hetzelfde oranje haalt 8,33:1. Terugdraaien is deze ene regel.

   De rest van het oranje draagt wel donkere tekst: stapnummers, labels,
   iconen, de actieve doelgroepknop en het footerblok. */
.btn--orange { background: var(--ras-orange-500); color: var(--ras-white); }
.btn--orange:hover { background: var(--ras-orange-600); color: var(--ras-white); }

/* #0091da is een merksignaal, geen knopvulling: wit erop haalt 3,46:1.
   blue-700 haalt 7,51:1 en staat in de tokens al als knopvulling. */
.btn--blue { background: var(--ras-blue-700); color: var(--ras-white); }
.btn--blue:hover { background: var(--ras-blue-800); color: var(--ras-white); }

.btn--white { background: var(--ras-white); color: var(--ras-blue-700); border-color: var(--ras-white); }
.btn--white:hover { background: var(--ras-blue-100); color: var(--ras-blue-700); border-color: var(--ras-blue-100); }

/* Ook leesbaar op de oranje tint (#ffeee6): blue-600 haalde daar 4,25:1. */
.btn--plain { background: transparent; color: var(--ras-blue-700); }
.btn--plain:hover { background: var(--ras-blue-100); color: var(--ras-blue-700); }

/* Op een donker vlak krijgt de witte knop een rand, anders vloeit hij weg. */
[data-surface="band"] .btn--white,
[data-surface="accent"] .btn--white { border-color: var(--ras-white); }
[data-surface="band"] .btn--plain,
[data-surface="accent"] .btn--plain { color: var(--ras-white); border-color: rgba(255,255,255,.5); }
[data-surface="band"] .btn--plain:hover,
[data-surface="accent"] .btn--plain:hover { background: rgba(255,255,255,.14); color: var(--ras-white); }

/* .btn--primary volgt het doelgroepspoor: oranje op studentenpagina's,
   blauw op werkgeverspagina's. Onder water zijn dat de types 1 en 2. */
.btn--primary { background: var(--accent); color: var(--ras-white); }
.btn--primary:hover { background: var(--accent-hover); color: var(--ras-white); }

.btn--link {
  min-height: 0; padding: 0; border-radius: 3px; background: none;
  color: var(--color-link); font-weight: var(--fw-medium);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.btn--link:hover { color: var(--color-link-hover); }
.btn--link .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn--link:hover .arrow { transform: translateX(4px); }

.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--ras-grey-200); color: var(--ras-grey-600);
  border-color: transparent; cursor: not-allowed;
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.btn-row--center { justify-content: center; }

/* ---------- 5. Header ---------- */

.header {
  position: sticky; top: var(--topbar-h); z-index: var(--z-header);
  background: var(--color-surface);
  transition: box-shadow var(--dur-base) var(--ease-inout);
}
/* Geen onderrand meer sinds de vlag onder het logo erbij kwam: die lijn
   werd voor de eerste 255 pixels afgedekt en liep daarna weer door, wat
   op een fout lijkt. Bij scrollen doet de schaduw het werk, net als op
   recruitastudent.nl. */
.header.is-scrolled { box-shadow: var(--shadow-md); }
/* De hoogte verandert niet bij scrollen, want dat verschuift de layout. */

/* De vlag onder het logo, op voorstel van Anneke van 15 september 2026.
   Het witte vlak loopt onder het logo door tot onder de headerlijn. Dat
   element staat ook op de flyers en de social posts, dus het draagt
   herkenning.

   De vorm is pixel voor pixel overgetrokken van het aangeleverde bestand
   "Het witte vlak rond ons logo.png": de onderrand van het witte vlak is
   daar uitgelezen en omgezet naar een pad van 449 bij 122. De maten op de
   site volgen uit de verhouding tot het logo in dat bestand: het vlak is
   3,0 keer de logohoogte breed en 0,8 keer de logohoogte diep, en begint
   0,3 logohoogte links van het logo. Toen het logo op 17 september van
   52 naar 80 pixels ging, schoof de vlag mee: 241 bij 66 op desktop,
   145 bij 39 daaronder.

   Het staat op .header__bar en niet op .header, want de balk zit in een
   wrap met een gutter en de vorm moet met het logo meelopen, niet met de
   rand van het scherm. */
.header__bar {
  position: relative;
  display: flex; align-items: center; gap: var(--space-4);
  min-height: var(--header-h);
}
.header__bar::after {
  content: "";
  position: absolute; top: 100%; left: calc(var(--gutter) - 12px);
  width: 133px; height: 36px;
  background: var(--color-surface);
  -webkit-mask: var(--vlag) no-repeat left top / 133px 36px;
  mask: var(--vlag) no-repeat left top / 133px 36px;
  pointer-events: none;
}
@media (min-width: 64em) {
  .header__bar::after {
    left: calc(var(--gutter) - 23px);
    width: 241px; height: 66px;
    -webkit-mask-size: 241px 66px;
    mask-size: 241px 66px;
  }
}
@media (min-width: 64em) { .header__bar { min-height: var(--header-h-lg); } }

/* Het echte logobestand, aangeleverd op 31 augustus 2026. Nooit
   herkleuren, nooit vervormen: het logo heeft zijn eigen oranje (#F18E00)
   en blauw (#0071B9), die afwijken van de sitekleuren. */
/* Maat en plaatsing nagemeten op recruitastudent.be, 17 september 2026.
   Daar is het logo 178 bij 80 in een balk van 80 hoog, en hangt de
   onderkant 13 pixels onder die balk, over de witte vlag heen. Hier stond
   het op 116 bij 52 en netjes binnen de balk, en daardoor oogde de schuine
   stand van het woordmerk veel vlakker.

   Er zit op die site geen draaiing in de CSS; de helling zit in het
   logobestand zelf. Groter en lager laten hangen is dus het hele verschil.

   Het verschuiven gebeurt met position relative, niet met marge: zo
   verandert de hoogte van de balk niet mee en blijft het menu ernaast op
   zijn plek staan. */
.logo {
  display: flex; align-items: center; text-decoration: none; flex: 0 0 auto;
  /* z-index omdat de vlag een ::after op dezelfde balk is en dus ná het
     logo geschilderd wordt. Zonder deze regel dekt het witte vlak de
     onderkant van het woordmerk af. Op recruitastudent.nl staat om
     dezelfde reden z-index 3 op .rnLogo en 1 op .rnLogoShape. */
  position: relative; z-index: 2; top: 26px;
}
.logo img { height: 48px; width: auto; }
@media (min-width: 64em) {
  /* Het logo zakt tot vier tiende van zijn hoogte onder de balk, dus 32
     van de 80 pixels. Daarmee staat het mét zijn onderkant op de witte
     vlag in plaats van erboven te zweven, en blijft de bovenkant op
     dezelfde hoogte als het menu ernaast. Dieper zakken kan, maar dan
     raakt het logo los van de balk. */
  .logo { top: 52px; }
  .logo img { height: 80px; }
}

.nav { display: none; margin-left: auto; }
@media (min-width: 64em) { .nav { display: block; } }
.nav__list { display: flex; align-items: center; gap: var(--space-2); list-style: none; }
.nav__link, .nav__toggle {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: var(--tap-min); padding: var(--space-2) var(--space-3);
  font-family: inherit; font-size: var(--fs-small); font-weight: var(--fw-medium);
  color: var(--ras-ink); background: none; border: 0; border-radius: var(--radius-input);
  text-decoration: none; cursor: pointer;
}
.nav__link:hover, .nav__toggle:hover { background: var(--ras-blue-100); color: var(--ras-blue-700); }
.nav__toggle svg { transition: transform var(--dur-fast) var(--ease-inout); }
.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__item { position: relative; }
.nav__panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: var(--z-dropdown);
  min-width: 15rem; padding: var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
  list-style: none;
}
.nav__toggle[aria-expanded="false"] + .nav__panel { display: none; }
.nav__panel a {
  display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-input);
  font-size: var(--fs-small); color: var(--ras-ink); text-decoration: none;
}
.nav__panel a:hover { background: var(--ras-blue-100); color: var(--ras-blue-700); }
.nav__panel hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-2) var(--space-1); }

.header__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
@media (min-width: 64em) { .header__actions { margin-left: 0; } }

/* Taalwisselaar. De hrefs zijn plaatshouders zolang de taalprefix niet
   besloten is. In productie dragen ze hreflang en wijzen ze naar de
   werkelijke equivalente pagina, niet naar de homepage. */
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: var(--tap-min); padding: var(--space-2) var(--space-3);
  font-family: inherit; font-size: var(--fs-meta); font-weight: var(--fw-medium);
  color: var(--ras-ink); background: none;
  border: 1px solid var(--color-border); border-radius: var(--radius-button); cursor: pointer;
}
.lang__btn:hover { border-color: var(--color-border-strong); }
.lang__panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--z-dropdown);
  min-width: 11rem; padding: var(--space-2); list-style: none;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
}
.lang__btn[aria-expanded="false"] + .lang__panel { display: none; }
.lang__panel a {
  display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-input);
  font-size: var(--fs-small); color: var(--ras-ink); text-decoration: none;
}
.lang__panel a:hover { background: var(--ras-blue-100); }
.lang__panel [aria-current="true"] { font-weight: var(--fw-bold); background: var(--ras-blue-100); }

.burger {
  display: inline-grid; place-items: center;
  width: var(--tap-min); height: var(--tap-min);
  background: none; border: 1px solid var(--color-border);
  border-radius: var(--radius-button-sm); cursor: pointer; color: var(--ras-ink);
}
@media (min-width: 64em) { .burger { display: none; } }

/* De drie balken worden bij openen een kruis. Alleen transform en opacity,
   dus geen layoutverschuiving. */
.burger__bars { position: relative; display: block; width: 20px; height: 14px; }
.burger__bars span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-inout),
              opacity var(--dur-fast) linear;
}
.burger__bars span:nth-child(1) { top: 0; }
.burger__bars span:nth-child(2) { top: 6px; }
.burger__bars span:nth-child(3) { top: 12px; }

.burger[aria-expanded="true"] .burger__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.burger[aria-expanded="true"] .burger__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobiel menu. De links staan altijd in de HTML, dus Google vindt ze.

   Het paneel schuift en fadet in. Dichtgeklapt blijft het in de DOM staan
   met visibility:hidden, wat het uit de tabvolgorde haalt zonder de
   inhoud voor een crawler te verbergen.

   Zonder JavaScript blijft het hidden-attribuut staan en is het paneel
   dus gewoon dicht: de knop heeft JavaScript nodig. */
.mobile-nav {
  /* top wordt bij openen door JavaScript gezet op de werkelijke onderkant
     van de header. De waarde hier is de terugval. */
  position: fixed; inset: var(--header-h) 0 0; z-index: var(--z-overlay);
  padding: var(--space-5) var(--gutter) var(--space-10);
  background: var(--color-surface); overflow-y: auto;
  opacity: 0; visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}
.mobile-nav.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s;
}
.mobile-nav[hidden] { display: none; }

/* De groepen komen trapsgewijs binnen, 50ms na elkaar. */
.mnav__group { opacity: 0; transform: translateY(-8px); }
.mobile-nav.is-open .mnav__group {
  opacity: 1; transform: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.mobile-nav.is-open .mnav__group:nth-of-type(1) { transition-delay: 40ms; }
.mobile-nav.is-open .mnav__group:nth-of-type(2) { transition-delay: 90ms; }
.mobile-nav.is-open .mnav__group:nth-of-type(3) { transition-delay: 140ms; }
.mobile-nav.is-open .mnav__group:nth-of-type(4) { transition-delay: 190ms; }

/* Elke groep start ingeklapt. Eén tik opent hem. */
.mobile-nav h2 { margin: 0; }
.mnav__toggle {
  width: 100%; min-height: var(--tap-min);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) 0;
  background: none; border: 0; border-bottom: 1px solid var(--color-border);
  font-family: inherit;
  font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--ras-grey-700); text-align: left; cursor: pointer;
}
.mnav__toggle:hover { color: var(--ras-blue-700); }
.mnav__toggle svg { flex: 0 0 auto; transition: transform var(--dur-base) var(--ease-inout); }
.mnav__toggle[aria-expanded="true"] { color: var(--ras-ink); border-bottom-color: var(--accent); }
.mnav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* De status staat op de groep, niet op de knop. De knop zit in een h2, dus
   de lijst is geen broer van de knop maar van die h2. Een +-selector op de
   knop raakt de lijst daarom nooit. */
.mnav__group > ul { display: none; }
.mnav__group.is-open > ul { display: block; }

.mobile-nav ul { list-style: none; }
.mobile-nav ul a {
  display: block; padding: var(--space-3) 0; min-height: var(--tap-min);
  font-size: var(--fs-body); font-weight: var(--fw-medium);
  color: var(--ras-ink); text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}
.mobile-nav ul a:hover { color: var(--ras-blue-700); }

/* ---------- 5a. Doelgroepschakelaar ----------

   Twee eigen homepages, met bovenaan een schakelaar ertussen. Dit is
   de structurele oplossing voor het door elkaar lopen van de twee
   doelgroepen: de scheiding zit nu in de sitestructuur en niet in een
   sectie halverwege de pagina.

   Drie eisen die hier gelden:
   - Het zijn echte links, geen JavaScript-toggle. Anders volgt Google
     ze niet en kan er maar één van de twee homepages ranken.
   - De actieve kant krijgt aria-current="page".
   - De balk is niet sticky. De sticky header zou anders 128px hoog
     worden op desktop, en dat is te veel weggenomen leesruimte.
*/

/* De bovenbalk blijft bij het scrollen staan, samen met de header
   eronder. De doelgroepschakelaar is de belangrijkste keuze op de site en
   hoort dus altijd binnen bereik te blijven. De header zakt precies onder
   de hoogte van deze balk, anders schuiven ze over elkaar heen. */
.topbar {
  position: sticky; top: 0; z-index: calc(var(--z-header) + 1);
  background: var(--ras-blue-100);
  border-bottom: 1px solid rgba(52, 115, 195, .18);
}
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 3.5rem; }

.aud { display: flex; gap: 2px; }

/* De schakelaar staat in een eigen kader, zodat de twee kanten als één
   keuze lezen en niet als losse links in de balk. Wit vlak met een rand
   in het blauw van de balk; de actieve kant vult zijn helft. */
.topbar .aud {
  padding: 3px;
  background: var(--ras-white);
  border: 1px solid rgba(52, 115, 195, .38);
  border-radius: calc(var(--radius-button-sm) + 3px);
  box-shadow: 0 1px 2px rgba(17, 37, 64, .06);
}
.topbar .aud a {
  min-height: 2.5rem; padding: 0 var(--space-5);
  font-size: var(--fs-small); font-weight: var(--fw-bold);
}
.topbar .aud a:hover { background: var(--ras-blue-100); }
.topbar .aud a[aria-current="page"]:hover { background: var(--ras-orange-500); }
[data-audience="employer"] .topbar .aud a[aria-current="page"]:hover { background: var(--ras-blue-500); }
.aud a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 2.25rem; padding: 0 var(--space-4);
  font-size: var(--fs-meta); font-weight: var(--fw-medium);
  color: var(--ras-blue-700); text-decoration: none;
  border-radius: var(--radius-button-sm);
}
.aud a:hover { background: rgba(255, 255, 255, .7); color: var(--ras-blue-700); }

/* De actieve kant krijgt de kleur van zijn eigen spoor: oranje voor
   studenten, blauw voor werkgevers. */
/* Wit label, net als de oranje knoppen. Zelfde bekende punt: 2,52:1. */
.aud a[aria-current="page"] { background: var(--ras-orange-500); color: var(--ras-white); font-weight: var(--fw-bold); }
.aud a[aria-current="page"]:hover { background: var(--ras-orange-500); color: var(--ras-white); }
[data-audience="employer"] .aud a[aria-current="page"],
.aud a[aria-current="page"].is-employer { background: var(--ras-blue-500); color: #fff; }
[data-audience="employer"] .aud a[aria-current="page"]:hover { background: var(--ras-blue-500); color: #fff; }

.topbar__contact { display: none; gap: var(--space-5); align-items: center; }
@media (min-width: 48em) { .topbar__contact { display: flex; } }
.topbar__contact a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-meta); font-weight: var(--fw-medium);
  color: var(--ras-blue-700); text-decoration: none;
}
.topbar__contact a:hover { text-decoration: underline; }

/* In het mobiele menu staat de schakelaar bovenaan, want daar is de
   topbalk weggescrold. */
.mobile-nav .aud { margin-bottom: var(--space-5); }
.mobile-nav .aud a { flex: 1; justify-content: center; border: 1px solid var(--color-border); }
.mobile-nav .aud a[aria-current="page"] { border-color: transparent; }

/* ---------- 5b. Overstapstrook ----------
   Eén regel onderaan de homepage die naar de andere kant wijst. Dit is
   geen doelgroepvermenging: het is een wegwijzer van één regel, niet
   een halve pagina werkgeverscontent op de studentenhomepage. */

.crossover { border-top: 1px solid var(--color-border); background: var(--color-surface); }
.crossover__in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding-block: var(--space-6);
}
.crossover p { margin: 0; font-size: var(--fs-lead); font-weight: var(--fw-medium); }
.crossover span { display: block; font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--color-text-muted); margin-top: 2px; }

/* ---------- 6. Hero ---------- */

.hero { position: relative; padding-block: var(--space-8) 0; overflow: hidden; }
@media (min-width: 64em) { .hero { padding-block: var(--space-10) var(--space-7); } }

.hero__grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 64em) { .hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-9); } }

.hero__title { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }

/* De kleur van de nadruk staat verderop, in blok 22. Hier alleen het
   uitzetten van de cursief. */
.hero__title em { font-style: normal; }
.hero__lead { margin-top: var(--space-5); font-size: var(--fs-lead); color: var(--color-text-secondary); max-width: 34rem; }
.hero__cta { margin-top: var(--space-6); }

/* Hero: wit tekstvlak links, diagonaal gesneden foto rechts, met een
   oranje wig langs de snede. Gekozen op 20 september 2026 uit zeven
   voorstellen, opzet geinspireerd op unitemps.com maar met onze eigen
   kleuren.

   De foto krijgt géén filter en géén overlay. Dat was de vorige poging en
   die maakte het beeld dof. Het oranje ligt er nu naast: hetzelfde
   diagonale vlak, 28 pixels naar links geschoven, zodat er een wig van
   #ff7f32 langs de hele snede loopt.

   Kleuren komen alle uit de merklijst van recruitastudent.be:
     #ff7f32  accentColor        wig, streep, knop
     #112540  secondaryDarkest   titel, 15,4:1 op wit
     #364349  baseDarkestColor   inleidende zin, 9,4:1 op wit
     #e2e7e9  baseLightestColor  rand van het paneel

   De diagonaal staat alleen vanaf 64em aan. Daaronder stapelt alles en
   zou een schuine snede het halve beeld opeten. */
.hero--dia { position: relative; background: var(--ras-white); }
.hero--dia__grid { display: grid; }
@media (min-width: 64em) {
  .hero--dia__grid { grid-template-columns: 1.02fr 1fr; align-items: center; }
}

/* De tekstkolom lijnt links uit op dezelfde gutter als het logo en het
   paneel, niet op het midden van de kolom. */
.hero--dia__tekst { padding: var(--space-9) var(--gutter); }
@media (min-width: 64em) {
  .hero--dia__tekst {
    padding-left: max(var(--gutter), calc((100vw - var(--container-wide)) / 2 + var(--gutter)));
    padding-right: var(--space-9);
    padding-block: calc(var(--space-9) + var(--space-6)) calc(var(--space-9) + var(--space-7));
  }
}
.hero--dia__tekst h1 {
  font-size: var(--fs-display-xl); line-height: 1.04; letter-spacing: -0.022em;
  /* Zwart, gekozen op 20 september 2026 uit zes opties. Staat in de live
     CSS van recruitastudent.be als --blackColor. 21:1 op wit. Het eerdere
     #112540 gaf de kop een blauwzweem naast het oranje. */
  color: #000; max-width: 13ch;
}
.hero--dia__tekst .hero__lead { max-width: 31rem; color: var(--ras-grey-800); }
/* Oranje bovenkopje haalde 2,79:1 op wit. Blauw 700 haalt 7,51:1. */
.hero--dia__tekst .eyebrow { color: var(--ras-blue-700); }
.hero--dia__streep {
  display: block; width: 4.5rem; height: .3rem; border-radius: 2px;
  background: var(--ras-orange-500); margin: var(--space-6) 0;
}

/* De diagonale snede is op 21 september 2026 vervangen. Die liep met een
   scherpe punt de boven- en onderrand in, en dat was het enige harde
   hoekpunt op de hele site: knoppen, kaarten, panelen en het logolint zijn
   allemaal afgerond. De foto is nu een afgeronde kaart met dezelfde straal
   als de groepsfoto bij "Je praat met een vast gezicht", en het oranje
   accent is hetzelfde vlak dat er naar linksonder achter uit steekt. */

.hero--dia__beeldwrap { position: relative; padding: 0 var(--gutter); }
.hero--dia__beeld {
  position: relative; z-index: 1; min-height: 20rem;
  border-radius: var(--radius-panel); overflow: hidden;
}
.hero--dia__beeld img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: none;
}

/* Het oranje vlak: zelfde vorm en zelfde straal, 22 pixels naar
   linksonder.

   Op smalle schermen kan dat niet dezelfde kant op: de gutter is daar
   20 pixels, dus links past er maar 14 pixels bij, en onder schuift het
   zoekpaneel er overheen. Daarom steekt het daar linksboven uit, waar
   wel ruimte is. */
.hero--dia__beeldwrap::before {
  content: ""; position: absolute; z-index: 0;
  background: var(--ras-orange-500);
  border-radius: var(--radius-panel);
  inset: -14px calc(var(--gutter) + 14px) 14px 6px;
}

@media (min-width: 64em) {
  .hero--dia__beeldwrap {
    padding: var(--space-8) var(--gutter) var(--space-8) var(--space-7);
  }
  .hero--dia__beeld { min-height: 30rem; }
  .hero--dia__beeldwrap::before {
    inset: calc(var(--space-8) + 22px) calc(var(--gutter) + 22px)
           calc(var(--space-8) - 22px) calc(var(--space-7) - 22px);
  }
}

/* Het zoekpaneel zweeft over de onderrand van de hero. */
.hero--dia__paneel {
  position: relative; z-index: 3;
  margin-top: calc(var(--space-7) * -1);
  padding: var(--space-6);
  background: var(--ras-white);
  border: 1px solid var(--ras-grey-200);
  border-radius: var(--radius-panel);
  box-shadow: 0 28px 64px -26px rgba(17, 37, 64, .42),
              0 8px 20px -12px rgba(17, 37, 64, .22);
}
.hero--dia__velden { display: grid; gap: var(--space-4); align-items: end; }
@media (min-width: 48em) { .hero--dia__velden { grid-template-columns: 1fr 1fr auto; } }

/* De knop "Bekijk jobs" lijnde niet uit met de twee keuzelijsten. Twee
   oorzaken: de alinea's in het paneel hielden hun ondermarge van 16 px,
   waardoor de lijsten hoger eindigden dan hun eigen vak, en de knop is met
   10 px binnenruimte lager dan een keuzelijst met 12 px. Nu staan alle drie
   de vakken op dezelfde onderlijn en zijn de knop en de lijsten even hoog.

   Op smalle schermen staat alles onder elkaar; daar loopt de knop over de
   volle breedte, zodat hij niet als restje rechts blijft hangen. */
.hero--dia__velden p { margin: 0; }
.hero--dia__velden .btn { width: 100%; min-height: 3.25rem; }
@media (min-width: 48em) {
  .hero--dia__velden .btn { width: auto; }
}
.hero--dia__paneel label {
  display: block; margin-bottom: var(--space-2);
  font-size: var(--fs-meta); font-weight: var(--fw-medium);
}
/* Op de werkgeverspagina staan er beloftes in plaats van velden. */
.hero--dia__paneel .proofbar { margin-top: 0; padding-top: 0; border-top: 0; }

/* Binnenkomst van de hero, gekozen op 20 september 2026 uit drie varianten.

   Eenmalig bij het laden, verder niets: geen scroll-trigger, geen herhaling
   en geen JavaScript. Draait dus ook als site.js niet laadt.

   De foto zelf gaat nooit van doorzichtig naar zichtbaar. Dat is opzet: het
   beeld is het LCP-element van deze pagina, en een fade vanaf opacity 0 zou
   het moment van schilderen naar achteren schuiven en de gemeten laadtijd
   verslechteren. Alleen transform beweegt, en dat draait op de compositor,
   dus het kost geen layout en geen herschildering.

   De wig start verder naar rechts dan de foto en komt iets later aan. Zo
   loopt hij zichtbaar achter de foto vandaan in plaats van er als blok naast
   te verschijnen.

   Bij animatie-voorkeur uit staat alles meteen op zijn eindpositie: zie de
   blok onderaan deze sectie. */

@keyframes hero-beeld-in {
  from { transform: translateX(3.5rem); }
  to   { transform: none; }
}
@keyframes hero-wig-in {
  from { transform: translateX(4rem); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes hero-tekst-in {
  from { transform: translateY(.75rem); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.hero--dia__beeld { animation: hero-beeld-in .72s var(--ease-hero) both; }

.hero--dia__beeldwrap::before { animation: hero-wig-in .82s var(--ease-hero) both; }

/* De tekst schuift niet mee met het beeld. Hij komt een klein stukje
   omhoog, per regel 40 milliseconden na de vorige, zodat het oog de kop
   eerst leest. Het zoekpaneel sluit de rij. */
.hero--dia__tekst > * { animation: hero-tekst-in .5s var(--ease-out) both; }
.hero--dia__tekst > *:nth-child(2) { animation-delay: .06s; }
.hero--dia__tekst > *:nth-child(3) { animation-delay: .10s; }
.hero--dia__tekst > *:nth-child(4) { animation-delay: .14s; }
.hero--dia__tekst > *:nth-child(5) { animation-delay: .18s; }
.hero--dia__paneel { animation: hero-tekst-in .5s .22s var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .hero--dia__beeld,
  .hero--dia__beeldwrap::before,
  .hero--dia__tekst > *,
  .hero--dia__paneel { animation: none !important; }
}

/* 3. De header was bij het scrollen doorschijnend met een waas erachter.
      Op verzoek van 23 september 2026 is dat eruit: de balk blijft
      dekkend wit, ook tijdens het scrollen. Alleen de schaduw komt erbij,
      zodat zichtbaar blijft dat de inhoud eronder doorloopt. */

/* 4. Lichtlijn langs de bovenrand van een kaart, die oplicht bij aanwijzen. */
.card--hover { position: relative; }
.card--hover::before {
  content: "";
  position: absolute; left: var(--space-5); right: var(--space-5); top: 0; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.card--hover:hover::before,
.card--hover:focus-within::before { opacity: 1; }

/* 5. Kaart kantelt licht mee met de muis. Alleen op een toestel met een
      echte aanwijzer, en hoogstens vier graden: meer wordt een truc in
      plaats van diepte. De hoek komt uit JavaScript, blok 9 in site.js. */
@media (hover: hover) and (pointer: fine) {
  .tilt {
    transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateZ(0);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
    will-change: transform;
  }
  .tilt:hover { box-shadow: var(--shadow-lg); }
}

.hero__media { position: relative; }
/* Eén verhouding voor alle schermen. Het bronbeeld is 16:9 en is
   symmetrisch naar 3:2 gecropt, zodat beide gezichten ook op mobiel
   volledig in beeld blijven. */
.hero__media img {
  width: 100%; border-radius: var(--radius-panel);
  aspect-ratio: 3 / 2; object-fit: cover;
}


/* ---------- 7. Zoekbalk vacatures ---------- */

.jobsearch {
  margin-top: var(--space-8);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-md);
}
/* Geen negatieve marge. Het paneel staat als broer ná de hero-grid, dus
   omhoog trekken betekent per definitie overlap met de onderkant van de
   tekstkolom. Die truc hoort bij een full-bleed heroafbeelding. */
@media (min-width: 64em) { .jobsearch { margin-top: var(--space-6); } }

.jobsearch__form { display: grid; gap: var(--space-4); }
@media (min-width: 48em) { .jobsearch__form { grid-template-columns: 1fr 1fr auto; align-items: end; } }
.jobsearch label { display: block; font-size: var(--fs-meta); font-weight: var(--fw-medium); margin-bottom: var(--space-2); }

/* ---------- 8. Formuliervelden ---------- */

.input, .select {
  width: 100%; min-height: var(--tap-min);
  padding: var(--space-3) var(--space-4);
  font-family: inherit; font-size: var(--fs-body); color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-input);
  transition: border-color var(--dur-fast) var(--ease-inout), box-shadow var(--dur-fast) var(--ease-inout);
}
/* Placeholder is tekst en valt dus onder dezelfde eis: grey-600 haalde
   3,8:1, grey-700 haalt 6,8:1. */
.input::placeholder { color: var(--ras-grey-700); }
.input:focus-visible, .select:focus-visible {
  outline: none; border-color: var(--ras-blue-500);
  box-shadow: 0 0 0 3px rgba(0, 145, 218, .28);
}

/* ---------- 9. Kaarten ---------- */

.card {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.card--hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* USP */
.usp__icon {
  width: 3rem; height: 3rem; margin-bottom: var(--space-4);
  display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent-on-tint);
  border-radius: var(--radius-input);
}

/* Stappen */
.step { position: relative; }
.step__n {
  width: 2.5rem; height: 2.5rem; margin-bottom: var(--space-4);
  display: grid; place-items: center;
  font-weight: var(--fw-bold); font-size: 1.125rem;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 50%;
}

/* Cijfer */
.figure__n {
  font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: 1;
  letter-spacing: var(--ls-display); color: var(--accent-on-tint);
  font-variant-numeric: tabular-nums;
}
.figure__l { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--color-text-secondary); }

/* Tegel voor stad en sector */
.tile {
  position: relative; display: flex; align-items: flex-end;
  aspect-ratio: 4 / 3; padding: var(--space-5);
  border-radius: var(--radius-image); overflow: hidden;
  text-decoration: none; color: #fff;
  background: var(--ras-blue-600);
}
.tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.tile:hover img { transform: scale(1.02); }
.tile::after { content: ""; position: absolute; inset: 0; background: var(--overlay-ink); }
.tile__txt { position: relative; z-index: 1; }
.tile__txt h3 { color: #fff; font-size: var(--fs-h3); }
.tile__txt span { display: block; margin-top: var(--space-1); font-size: var(--fs-meta); color: rgba(255,255,255,.85); }

/* Vacaturekaart. De link zit op de titel, de kaart is het vergrote
   klikgebied. Zo hoort een schermlezer één zinvolle link. */
.vac { position: relative; gap: var(--space-3); }
.vac__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.tag {
  display: inline-block; padding: 4px 10px;
  font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  border-radius: var(--radius-pill);
  background: var(--accent-tint); color: var(--accent-on-tint);
}
.tag--new { background: var(--accent); color: var(--accent-ink); }
.vac__title { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.vac__title a { color: inherit; text-decoration: none; }
.vac__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.vac__title a:hover { color: var(--ras-blue-700); }
.vac__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; }
.vac__facts li { display: flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--color-text-muted); }
.vac__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--color-border);
}
.vac__pay { font-size: var(--fs-small); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* Blogkaart */
.post { position: relative; padding: 0; overflow: hidden; }
.post img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.post:hover img { transform: scale(1.02); }
.post__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.post__title { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.post__title a { color: inherit; text-decoration: none; }
.post__title a::after { content: ""; position: absolute; inset: 0; }
.post__title a:hover { color: var(--ras-blue-700); }
.post__meta { margin-top: auto; font-size: var(--fs-meta); color: var(--color-text-muted); }

/* ---------- 10. Video ---------- */

.video { position: relative; border-radius: var(--radius-panel); overflow: hidden; }
.video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video::after { content: ""; position: absolute; inset: 0; background: var(--overlay-ink); pointer-events: none; }
.video__play {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center; gap: var(--space-4);
  background: none; border: 0; cursor: pointer; color: #fff;
  font-family: inherit; font-size: var(--fs-h3); font-weight: var(--fw-bold);
}
.video__ring {
  width: 4.5rem; height: 4.5rem; display: grid; place-items: center;
  background: var(--ras-orange-500); color: var(--color-on-accent); border-radius: 50%;
  transition: transform var(--dur-base) var(--ease-out);
}
.video__play:hover .video__ring { transform: scale(1.06); }

/* ---------- 11. Werkgeversband ---------- */

.employer { position: relative; overflow: hidden; }
.employer__grid { position: relative; display: grid; gap: var(--space-7); }
@media (min-width: 64em) { .employer__grid { grid-template-columns: 1.15fr 1fr; gap: var(--space-9); align-items: center; } }

/* Staccato-opsomming, zoals in de LinkedIn-posts */
.staccato { list-style: none; margin-top: var(--space-5); }
.staccato li {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding-block: var(--space-2); font-size: var(--fs-lead);
  color: var(--color-text);
}
.staccato svg { flex: 0 0 auto; margin-top: .35em; color: var(--ras-orange-500); }

/* ---------- 12. App-promo ---------- */

.app { display: flex; flex-direction: column; gap: var(--space-4); }
/* .app__mock was het gradiëntvlak dat als plaatshouder diende voor de
   app-mockups. Alle vier de plekken hebben nu een echte afbeelding, dus
   die opmaak is verwijderd. */

/* ---------- 13. Logo's ---------- */

/* In het prototype staan de klantnamen als tekst. In productie is elk logo
   een img met een alt met de bedrijfsnaam, nooit een achtergrondafbeelding,
   want dan staat er niets in de HTML. */
.logos { position: relative; overflow: hidden; }
.logos::before, .logos::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 5rem; z-index: 2; pointer-events: none;
}
.logos::before { left: 0; background: linear-gradient(90deg, var(--color-surface-soft), transparent); }
.logos::after { right: 0; background: linear-gradient(270deg, var(--color-surface-soft), transparent); }
.logos__track { display: flex; gap: var(--space-8); width: max-content; animation: marquee 42s linear infinite; }
.logos:hover .logos__track, .logos:focus-within .logos__track { animation-play-state: paused; }
.logos__item {
  font-size: 1.25rem; font-weight: var(--fw-bold); letter-spacing: -0.01em;
  color: var(--ras-grey-500); white-space: nowrap;
  transition: color var(--dur-base) var(--ease-inout);
}
.logos__item:hover { color: var(--ras-blue-700); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logos__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: var(--space-5) var(--space-7); }
  /* Alles wat op 17 september 2026 aan beweging is toegevoegd, gaat hier
     uit. De gloed en de lichtlijnen blijven staan: dat is kleur, geen
     beweging, en daar heeft niemand last van. */
  .tilt { transform: none !important; transition: none; }
  .card--hover::before { transition: none; }
}

/* ---------- 14. FAQ ---------- */

/* De inhoud staat altijd in de HTML, nooit inladen op klik. Dit is het
   component dat AI-systemen citeren en waar FAQPage-schema op zit. */
.faq { border-top: 1px solid var(--color-border); }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0; min-height: var(--tap-min);
  font-family: inherit; font-size: var(--fs-h4); font-weight: var(--fw-bold);
  line-height: var(--lh-snug); color: var(--color-text); text-align: left;
  background: none; border: 0; cursor: pointer;
}
.faq__q:hover { color: var(--ras-blue-700); }
.faq__ico { flex: 0 0 auto; color: var(--accent-on-tint); transition: transform var(--dur-base) var(--ease-inout); }
.faq__q[aria-expanded="true"] .faq__ico { transform: rotate(45deg); }
.faq__a { padding-bottom: var(--space-5); }
.faq__a p { color: var(--color-text-secondary); max-width: var(--measure-prose); }
/* De toestand staat op .faq__item, niet op de knop. De knop zit in een
   <h3>, dus het antwoord is de buur van die <h3> en niet van de knop:
   een broertjesselector vanaf de knop matcht daardoor nooit. Zelfde
   valkuil als eerder bij de groepen in het mobiele menu.

   Zonder JavaScript staan alle antwoorden open. Dat is hier de juiste
   afloop: de tekst is dan gewoon leesbaar. */
.faq__item[data-open="false"] .faq__a { display: none; }

/* ---------- 15. CTA-band ---------- */

/* De CTA-kaart volgde het doelgroepspoor en was daardoor blauw op de
   werkgeverspagina. Op verzoek van 4 september 2026 vast oranje op beide
   homepages, want dat is het belangrijkste conversieblok en daar mag de
   merkkleur staan. De knop erin volgt het spoor wél: oranje bij
   studenten, blauw bij werkgevers. */
.cta {
  padding: var(--space-9) var(--space-6);
  border-radius: var(--radius-panel);
  background: var(--ras-orange-100);
  text-align: center;
}
.cta--band { background: var(--color-surface-band); }
.cta p { margin-inline: auto; max-width: 42rem; color: var(--color-text-secondary); }

/* ---------- 16. Footer ---------- */

/* Opbouw overgenomen van de live site: een oranje blok met de linkkolommen,
   daaronder een blauwe balk met de socials en de juridische links. Geen
   marineblauwe footer, want die kleur staat nergens op de site. */

.footer__top { background: var(--color-surface-accent); padding-block: var(--space-9) var(--space-8); }
.footer__bar { background: var(--color-surface-band); padding-block: var(--space-6); }

.footer__grid { display: grid; gap: var(--space-7); }
@media (min-width: 40em) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .footer__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } }

.footer h2 {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: #fff; margin-bottom: var(--space-4);
}
.footer ul { list-style: none; display: grid; gap: var(--space-2); }
.footer a { color: #fff; text-decoration: none; font-size: var(--fs-small); }
.footer a:hover { text-decoration: underline; }
.footer address { font-style: normal; font-size: var(--fs-small); color: #fff; line-height: var(--lh-body); }

/* Het bovenblok is oranje. Wit haalde daar 2,52:1, dus daar staat de
   tekst in zwart. De blauwe balk eronder houdt wit: 4,79:1. */
.footer__top h2,
.footer__top a,
.footer__top address { color: var(--color-on-accent); }

.footer__bar-in {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6);
  align-items: center; justify-content: space-between;
}
/* Het logo stond hier op een wit blok, omdat de blauwe studentenmuts
   (#0071B9) op de blauwe footerbalk (#3473C3) wegvalt: 1,08:1. Nu een wit
   uitgespaard logo in plaats van een wit blok.

   brightness(0) maakt elke zichtbare pixel zwart, invert(1) maakt daar wit
   van. De alfa blijft ongemoeid, dus de vorm van het woordmerk én de muts
   blijft precies intact. Het logobestand zelf wordt niet aangepast.

   Zodra er een officiële negatieve logoversie is, vervang je de img en
   haal je deze filterregel weg. */
.footer__logo { flex: 0 0 auto; }
.footer__logo img {
  height: 40px; width: auto;
  filter: brightness(0) invert(1);
}

.footer ul.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; }
.footer__legal a { font-size: var(--fs-meta); color: #fff; }

.footer ul.footer__social { display: flex; gap: var(--space-2); list-style: none; }
.footer__social a {
  width: var(--tap-min); height: var(--tap-min); display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: #fff;
}
.footer__social a:hover { background: rgba(255,255,255,.16); border-color: #fff; }

.footer__note {
  width: 100%; font-size: var(--fs-meta); color: rgba(255,255,255,.85);
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,.28);
}

/* ---------- 17. Cookiebanner ---------- */

.cookie {
  position: fixed; z-index: var(--z-modal);
  left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  max-width: 34rem; padding: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-xl);
}
.cookie[hidden] { display: none; }
.cookie h2 { font-size: var(--fs-h4); font-weight: var(--fw-bold); margin-bottom: var(--space-2); }
.cookie p { font-size: var(--fs-small); color: var(--color-text-secondary); }

/* ---------- 18. Scroll-reveal ---------- */

/* De klasse .reveal doet zelf niets. JavaScript zet .js-reveal op de body,
   en pas dán wordt er iets verborgen. Zonder JavaScript is de hele pagina
   dus gewoon zichtbaar. */
.js-reveal .reveal { opacity: 0; transform: translateY(var(--reveal-shift)); }
.js-reveal .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--d, 0ms);
}

/* ---------- 19. Prototypelabel ---------- */

.proto {
  background: var(--ras-blue-700); color: #fff;
  padding: var(--space-2) 0; font-size: var(--fs-meta); text-align: center;
}
.proto strong { color: var(--ras-orange-300); }

/* ---------- 20. Correcties op de gekleurde band ---------- */

/* De vinkjes in de staccato-lijst zijn oranje op wit, maar op de blauwe
   band levert oranje op blauw te weinig verschil. Daar worden ze wit. */
[data-surface="band"] .staccato svg,
[data-surface="accent"] .staccato svg,
[data-surface="band"] .proofbar svg,
[data-surface="accent"] .proofbar svg { color: #fff; }

/* Kaarten op een gekleurde band hebben geen witte vulling nodig. */
[data-surface="band"] .card { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); }

/* ---------- 21. Aanraakzones op mobiel ----------
   Gemeten op 375px. WCAG 2.2 vraagt minimaal 24px (2.5.8), wij houden 44px
   aan voor alles wat een echte bedieningszone is. Inline tekstlinks in een
   lopende alinea zijn uitgezonderd, losstaande CTA-links niet. */

@media (max-width: 63.99em) {
  /* De doelgroepschakelaar is primaire navigatie, geen sierelement. */
  .aud a { min-height: var(--tap-min); padding-inline: var(--space-3); flex: 1; justify-content: center; white-space: nowrap; }
  .topbar__in { min-height: 3.5rem; }

  /* Losstaande tekstlinks met pijl. */
  .btn--link { min-height: var(--tap-min); padding-block: var(--space-3); }

  /* Linklijsten in de footer en in het mobiele menu. */
  .footer ul:not(.footer__legal):not(.footer__social) a { display: inline-block; padding-block: 6px; }
  .footer ul.footer__legal a { display: inline-block; padding-block: var(--space-2); }

  .logo img { height: 44px; }
}

/* ---------- 22. Onderdelen uit de tweede reviewronde ---------- */

/* Nadruk in de H1 staat vast op het merkoranje, ook op de
   werkgeverspagina. Op verzoek van 4 september 2026. Volgde eerder het
   doelgroepspoor en was daardoor blauw op de werkgeverskant.

   LET OP: #ff7f32 op de warme tint haalt 2,2:1. Voor grote tekst is de
   grens 3:1, dus dit is onder de norm. Bewuste keuze, in lijn met het
   eerdere besluit over wit op oranje. Het merkoranje --ras-orange-800
   (#ff4c32) haalt hier wél 3,0:1 en blijft binnen het palet, mocht het
   team dat later willen. Zie STYLEGUIDE-BE.md 2.4. */
/* Het accentwoord stond in oranje en haalde 2,52:1, ook voor grote
   tekst te weinig. Het woord blijft nu in inkt en houdt het accent via
   een oranje onderstreping, die als vorm geen contrasteis kent. */
.hero__title em {
  color: inherit;
  box-shadow: inset 0 -0.14em 0 var(--ras-orange-500);
}

/* De twee routes uit "Zo werkt het". Even hoog, want het is een keuze
   tussen twee gelijkwaardige opties, geen rangorde. */
.route { border-left: 3px solid var(--accent); }
.route__tag {
  display: inline-block; margin-bottom: var(--space-3);
  font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--accent-on-tint);
}

/* De open-inschrijfkaart in de vacaturerij. Onderscheidt zich met een
   streepjesrand, zodat het duidelijk geen echte vacature is. */
.vac--open {
  background: var(--accent-tint);
  border: 1px dashed var(--accent);
  justify-content: flex-start;
  gap: var(--space-3);
}
.vac--open .vac__foot { border-top-color: var(--accent); }
.vac--open .vac__title a { color: var(--accent-on-tint); }

/* De drie USP-blokken zijn even hoog doordat het raster ze uitrekt. Dit
   maakt dat expliciet, zodat het ook klopt als de tekst later wijzigt. */
.usp-row > .card, .route-row > .card { height: 100%; }

/* Nederlandse samenstellingen als "Schoonmaakmedewerker" zijn lang. In
   kaarttitels mogen ze afbreken, zodat de kolombreedte niet meebeweegt. */
.vac__title, .post__title { overflow-wrap: break-word; hyphens: auto; }

/* ---------- 23. Opsomming met vinkjes ----------
   Voor de app-blokken. Het merkgeheugen wil lopende tekst boven
   opsommingen, maar hier is de opsomming juist de vorm die de bestaande
   site gebruikt en die het snelst leest. */

.ticks { list-style: none; margin-top: var(--space-4); display: grid; gap: var(--space-2); }
.ticks li {
  position: relative; padding-left: 1.75rem;
  font-size: var(--fs-small); line-height: var(--lh-snug);
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.28em;
  width: 1.125rem; height: 1.125rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .95;
}
/* Op wit vlak krijgen de vinkjes de accentkleur, op de blauwe band erven
   ze de witte tekstkleur. */
.ticks--dark li::before { color: var(--accent); }

/* ---------- 24. Overstapstrook onder de CTA ----------
   De CTA zelf gebruikt nu de bestaande .cta-kaart, dezelfde als op de
   werkgeverspagina. De klassen .closing, .closing__main en
   .closing__slogan zijn daarmee overbodig en verwijderd. Alleen de
   overstap naar de andere doelgroep heeft nog eigen opmaak, en die staat
   nu op wit in plaats van op de tint. */

.closing__cross {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}
.closing__cross p { margin: 0; font-size: var(--fs-lead); font-weight: var(--fw-medium); }
.closing__cross span {
  display: block; margin-top: 2px;
  font-size: var(--fs-small); font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}
@media (max-width: 47.99em) {
  .closing__cross { flex-direction: column; align-items: flex-start; }
  .closing__cross .btn { width: 100%; }
}

/* ---------- 25. (vrijgekomen) ----------
   Hier stond de zoekbalk met de sectorchips. Die is uit de hero gehaald,
   dus alle bijbehorende opmaak is verwijderd. De iconenset in de sprite
   blijft, want de sectortegels op de werkgeverspagina gebruiken die nog. */

/* ---------- 26. Iconbadge op de sectortegels ----------
   Zelfde iconen als de chips, zodat de filter en de tegels herkenbaar bij
   elkaar horen. */

.tile__ico {
  position: absolute; z-index: 1; top: var(--space-4); left: var(--space-4);
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .94); color: var(--ras-blue-700);
  border-radius: var(--radius-input);
}
.tile__ico svg { width: 20px; height: 20px; }

/* ---------- 27. Statbalk (punt 5) ----------
   Eén balk met scheidingslijnen in plaats van vier losse kaarten, zodat
   de cijfers als set gelezen worden. */

.statbar {
  display: grid;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  overflow: hidden;
}
@media (min-width: 60em) { .statbar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stat {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.stat:last-child { border-bottom: 0; }
@media (min-width: 60em) {
  .stat { flex-direction: column; border-bottom: 0; border-right: 1px solid var(--color-border); }
  .stat:last-child { border-right: 0; }
}
.stat__ico {
  width: 2.75rem; height: 2.75rem; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent-on-tint);
  border-radius: var(--radius-input);
}
.stat__ico svg { width: 24px; height: 24px; }
.stat__n {
  display: block;
  font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: 1.05;
  letter-spacing: var(--ls-display); font-variant-numeric: tabular-nums;
}
.stat__l {
  display: block; margin-top: var(--space-2);
  font-size: var(--fs-small); line-height: var(--lh-snug);
  color: var(--color-text-secondary);
}

/* ---------- 28. Video met quote ernaast ----------
   De videosectie staat nu op de lichte tint in plaats van op de blauwe
   band, dus de quote is omgezet van een doorzichtig vlak op blauw naar
   een witte kaart met een rand. */

.videorow { display: grid; gap: var(--space-5); }
@media (min-width: 64em) { .videorow { grid-template-columns: 1.6fr 1fr; align-items: stretch; gap: var(--space-6); } }

.quote {
  margin: 0; padding: var(--space-6);
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
}
.quote__mark {
  font-size: 3.5rem; line-height: .8; font-weight: var(--fw-bold);
  color: var(--ras-orange-500);
}
.quote__txt {
  margin: var(--space-4) 0 0; padding: 0; border: 0;
  font-size: var(--fs-h3); font-weight: var(--fw-medium);
  line-height: var(--lh-snug); color: var(--color-text);
}
.quote__by {
  margin-top: auto; padding-top: var(--space-5);
  font-size: var(--fs-meta); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--accent-on-tint);
}
/* Zolang de quote voorbeeldtekst is, moet dat zichtbaar blijven staan. */
.quote__by span {
  display: block; margin-top: 4px;
  font-size: var(--fs-meta); font-weight: var(--fw-regular);
  letter-spacing: 0; text-transform: none;
  color: var(--color-text-muted);
}

/* ---------- 29. Teamsectie ----------
   Groepsfoto naast twee portretten met naam en vestiging. Reinforceert de
   belofte "Eén vast aanspreekpunt" die al in de hero staat. */

.team { display: grid; gap: var(--space-6); }
@media (min-width: 64em) {
  .team { grid-template-columns: 1.15fr 1fr; align-items: center; gap: var(--space-9); }
}

.team__group { margin: 0; }
.team__group img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-panel);
}

.team__people { list-style: none; display: grid; gap: var(--space-5); margin-top: var(--space-6); }
@media (min-width: 40em) { .team__people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.team__person { display: flex; align-items: center; gap: var(--space-4); }
.team__person img {
  width: 4.5rem; height: 4.5rem; flex: 0 0 auto;
  border-radius: 50%; object-fit: cover;
  /* Lichte rand, zodat het portret ook op wit een contour houdt. */
  box-shadow: 0 0 0 1px var(--color-border);
}
.team__name { display: block; font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: 1.2; }
.team__role { display: block; margin-top: 2px; font-size: var(--fs-meta); color: var(--color-text-muted); }

/* ---------- 30. Beloftestrook onder de zoekbalk ----------
   De drie beloftes stonden eerder in de tekstkolom van de hero en vielen
   daar over twee regels uiteen. Nu een rustige strook over de volle
   breedte: geen kader en geen schaduw, want de zoekbalk erboven is al een
   witte kaart en twee kaarten op elkaar was precies het drukke effect. */

.proofbar {
  list-style: none;
  display: grid; gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(22, 27, 29, .12);
}
@media (min-width: 48em) {
  .proofbar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
}
.proofbar li {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--fs-body); font-weight: var(--fw-medium);
}
/* Het vinkje is decoratief en staat naast zijn eigen label. Het volgt het
   doelgroepspoor: oranje op de studentenkant, blauw op de werkgeverskant. */
.proofbar svg { flex: 0 0 auto; color: var(--accent); }

/* ---------- 31. (vervallen) ----------
   Hier stond het kruimelpad. Op 20 september 2026 verwijderd: de paden
   waren op de meeste pagina's maar één stap diep en gaven niets dat de
   navigatie niet al toont. Het BreadcrumbList-schema blijft wel staan,
   dat is voor de zoekresultaten en niet voor de pagina zelf. */

/* ---------- 32. Verhaalsectie met zijkolom ----------
   Lopende tekst links, een compacte feitenlijst rechts. Het merkgeheugen
   wil lopende tekst boven opsommingen, dus het verhaal staat links en de
   opsomming is de ritmebreker ernaast. */

.story { display: grid; gap: var(--space-6); }
@media (min-width: 64em) {
  .story { grid-template-columns: 1.4fr 1fr; gap: var(--space-9); align-items: start; }
}
.story__body p { max-width: var(--measure-prose); }
/* 16-10-2026: meer lucht tussen de kop en de eerste alinea */
.story__body > .t-h2 + *, .prose > .t-h2 + p { margin-top: var(--space-5); }
.story__aside {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
}

/* ---------- 33. Teamraster ----------
   Vier kaarten, één keer in de HTML. De huidige site zet het team drie
   keer in de DOM door de carrousel, wat twaalf H3's voor vier mensen
   oplevert en dus dubbele inhoud. */

.people .person { gap: 0; }
.person img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius-card);
  margin-bottom: var(--space-4);
}
/* Liggende variant, voor de contactpagina. Daar staan maar twee mensen
   naast elkaar, en dan wordt een vierkante foto op volle kaartbreedte
   een portret van ruim 500 pixels hoog. De foto gaat dus naast de tekst
   in plaats van erboven. */
@media (min-width: 40em) {
  .person--row {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--space-5);
    align-items: start;
  }
  .person--row img { grid-row: 1 / -1; margin-bottom: 0; }
  .person--row > :not(img) { grid-column: 2; }
}

.person__name { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.person__role {
  margin: 4px 0 var(--space-3);
  font-size: var(--fs-meta); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--accent-on-tint);
}

.teamcta {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(22, 27, 29, .12);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}
.teamcta p { margin: 0; font-size: var(--fs-lead); font-weight: var(--fw-medium); }
.teamcta span {
  display: block; margin-top: 2px;
  font-size: var(--fs-small); font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}

/* Onder 960px valt het teamraster terug op één kolom, en dan wordt de
   vierkante portretfoto zo breed als de pagina: kaarten van 835px hoog.
   Daarom twee kolommen in het tussengebied. Begrensd met max-width, zodat
   deze regel niet met .g-4 op desktop vecht. */
@media (min-width: 30em) and (max-width: 59.99em) {
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 34. Contactgegevens per teamlid ----------
   Telefoon en e-mail onder elke persoon. Het nummer is voor alle vier
   hetzelfde, het mailadres is persoonlijk. */

.person__contact {
  list-style: none; display: grid; gap: var(--space-2);
  margin-top: auto; padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.person__contact a {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 1.75rem;
  font-size: var(--fs-meta); font-weight: var(--fw-medium);
  color: var(--color-link); text-decoration: none;
  /* Lange mailadressen mogen afbreken, anders rekken ze de kolom op. */
  overflow-wrap: anywhere;
}
.person__contact a:hover { color: var(--color-link-hover); text-decoration: underline; }
.person__contact svg { flex: 0 0 auto; color: var(--accent-on-tint); }

/* ---------- 35. Vestigingskaarten ----------
   Foto over de volle kaartbreedte, daaronder naam, adres en contact. De
   huidige site zet de plaatsnamen niet als kop op, waardoor 23
   vestigingen daar zonder koppenstructuur staan. Hier is elke vestiging
   een H3 met een echt address-element. */

.offices .office { padding: 0; overflow: hidden; }
.office img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.office__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.office__name { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.office__adres {
  font-style: normal;
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--fs-small); line-height: var(--lh-body);
  color: var(--color-text-secondary);
}
.office__contact {
  list-style: none; display: grid; gap: var(--space-2);
  margin-top: auto; padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.office__contact a {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 1.75rem;
  font-size: var(--fs-meta); font-weight: var(--fw-medium);
  color: var(--color-link); text-decoration: none;
  overflow-wrap: anywhere;
}
.office__contact a:hover { color: var(--color-link-hover); text-decoration: underline; }
/* Deze svg's krijgen hun maat uit de CSS, want een use-verwijzing zonder
   width valt anders terug op 100 procent van de omgeving. */
.office__contact svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--accent-on-tint); }

/* ---------- 36. Werkregio's zonder kantoor ----------
   Gent, Brussels Airport en Zeeland staan apart van de vestigingen, zodat
   er geen kantoor gesuggereerd wordt waar er geen is. */

.region__ico {
  width: 3rem; height: 3rem; margin-bottom: var(--space-4);
  display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent-on-tint);
  border-radius: var(--radius-input);
}
.region__ico svg { width: 24px; height: 24px; }

/* ---------- 37. Compacte vestigingenlijst ----------
   Voor de 21 Nederlandse vestigingen. Geen foto's en geen adressen, want
   die staan alleen op de losse vestigingspagina's. Elk item is één link
   naar zo'n pagina, zodat een schermlezer één zinvolle link hoort in
   plaats van een plaatsnaam plus een telefoonnummer plus een pijl. */

.nloffices { list-style: none; display: grid; gap: var(--space-3); }
@media (min-width: 40em) { .nloffices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .nloffices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.nloffice {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--tap-min);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  text-decoration: none; color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease-inout),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.nloffice:hover {
  border-color: var(--accent); color: var(--color-text);
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.nloffice__naam { display: block; font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1.3; }
.nloffice__tel {
  display: block; margin-top: 2px;
  font-size: var(--fs-meta); color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.nloffice__pijl { flex: 0 0 auto; color: var(--accent-on-tint); font-size: var(--fs-h4); }
.nloffice:hover .nloffice__pijl { color: var(--accent); }

/* ---------- 38. Warm sectievlak ----------
   Oranje tint als sectie-achtergrond, naast de blauwe tint die er al was.
   Op verzoek van 4 september 2026 meer oranje in de opmaak. De regel dat
   er nooit twee gekleurde secties naast elkaar staan blijft gelden: op de
   dienstenpagina's wisselt warm, wit, blauwe tint, wit. */

.section--warm { background: var(--ras-orange-100); }

/* ---------- 39. Voordeelkaart met icoon ----------
   Solide oranje badge met een wit icoon. Dat is dezelfde combinatie als
   de knoppen, dus consequent met het besluit van 31 augustus over wit op
   oranje. Het icoon is decoratief: de kop ernaast zegt hetzelfde. */

.benefit__ico {
  width: 3rem; height: 3rem; margin-bottom: var(--space-4);
  display: grid; place-items: center;
  background: var(--ras-orange-500); color: var(--color-on-accent);
  border-radius: var(--radius-input);
}
.benefit__ico svg { width: 24px; height: 24px; }

/* ---------- 40. Kaart naar een andere dienst ----------
   De hele kaart is één link, met een oranje streep links als accent. Op
   de live site linken de dienstenpagina's niet naar elkaar. */

.service {
  border-left: 3px solid var(--ras-orange-500);
  text-decoration: none; color: var(--color-text);
}
.service:hover { color: var(--color-text); }
.service__meer {
  margin-top: auto; padding-top: var(--space-4);
  font-size: var(--fs-meta); font-weight: var(--fw-medium);
  color: var(--color-link);
}
.service__meer .arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.service:hover .service__meer .arrow { transform: translateX(4px); }

/* Het stapnummer en de vinkjes stonden al op --accent, dus die zijn op
   deze pagina's automatisch oranje. */

/* ---------- 41. Aangeleverde beelden ----------
   Drie vormen die afwijken van de plaatshouders die ze vervangen. */

/* De eerdere headerfoto was een uitsnede van 400x428 op een lichtblauwe
   achtergrond, en die werd met contain heel gelaten in een gevuld kader.
   Vervangen op 4 september 2026 door een foto van 1247x838 die precies 3:2
   is, dus cover volstaat en .hero__shot is niet meer nodig. */

/* De blogbeelden zijn 552x312, dus 16:9 en niet 3:2. Op hun eigen
   verhouding tonen voorkomt dat er een strook afgesneden wordt. Ze zijn
   klein aangeleverd, dus ze worden bewust niet opgeschaald: bij drie
   kolommen is een kaart circa 370px breed en het bestand 552px. */
.post img { aspect-ratio: 16 / 9; }

/* De app-mockups zijn 2000x1414. Op hun eigen verhouding, zodat de
   telefoons en het browservenster niet aangesneden worden. */
.app__shot {
  width: 100%;
  aspect-ratio: 1000 / 707;
  object-fit: cover;
  border-radius: var(--radius-card);
}

/* ---------- 42. Sectorkaart met icoon ----------
   De aangeleverde sectoriconen waren 512x512 JPEG met een ingebakken
   lichtblauwe achtergrond (#e5f6fe). Op een witte kaart leverde dat een
   zichtbaar blauw vierkant op.

   Omgezet naar transparante PNG: de helderheid van het bronbeeld is het
   alfakanaal geworden, dus de zwarte lijn blijft staan en het lichtblauw
   valt weg. De antialiasing aan de lijnranden loopt netjes mee, want die
   grijstinten worden halftransparant in plaats van hard afgekapt.

   Bijkomend voordeel: 43 KB in totaal in plaats van 84 KB. */

.sectorcard { text-decoration: none; color: var(--color-text); }
.sectorcard:hover { color: var(--color-text); }
.sectorcard img {
  width: 4rem; height: 4rem;
  margin-bottom: var(--space-4);
}
.sectorcard .t-small { margin-top: var(--space-2); color: var(--color-text-secondary); }

/* ---------- 40. Formulierfeedback ----------
   Toegevoegd op 23 september 2026. De fout staat onder het veld waar hij
   over gaat, de samenvatting staat boven het formulier en krijgt de focus
   na een mislukte verzending. Rood is niet het enige signaal: er staat
   tekst, en het veld krijgt aria-invalid. */

.veldfout {
  margin-top: var(--space-2);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--ras-error);
}
.veldfout::before { content: "\26A0\FE0E"; margin-right: var(--space-2); }

.input[aria-invalid="true"],
.select[aria-invalid="true"] { border-color: var(--ras-error); }

.formfout {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--ras-error);
  border-left-width: 4px;
  border-radius: var(--radius-card);
  background: var(--ras-error-bg);
  color: var(--ras-error);
}
.formfout__kop { font-weight: var(--fw-bold); }
.formfout ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.formfout a { color: var(--ras-error); }

.formklaar {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-soft);
}
.formklaar__kop {
  font-size: var(--fs-h4); font-weight: var(--fw-bold);
  margin-bottom: var(--space-2);
}
.formklaar__kop::before { content: "\2713"; margin-right: var(--space-2); color: var(--ras-success); }

/* ---------- 41. Aanraakvlakken ----------
   Op een toestel met een vinger in plaats van een muis is 44 bij 44 het
   minimum. De voettekstlinks en de doelgroepschakelaar zaten daaronder. */
@media (pointer: coarse) {
  .footer a,
  .footer__bar-in a {
    display: inline-flex; align-items: center; min-height: var(--tap-min);
  }
  .aud a { min-height: var(--tap-min); }
}

/* ---------- 42. Links op de oranje tint ----------
   #ffeee6 is lichter dan wit-adjacent grijs, maar niet licht genoeg: de
   standaard linkkleur haalt daar 4,25:1. Op die vlakken een stap donkerder,
   dan is het 6,66:1. */
.section--warm,
.hero.section--warm { --color-link: var(--ras-blue-700); }

/* ---------- 43. Stappenkiezer "Zo werkt het" ----------
   Gekozen op 23 september 2026 uit drie bewegende varianten. Het blok
   stond eerder als twee kaarten met daaronder drie losse nummers: twee
   vormtalen in één blok, en de telling begon pas halverwege.

   Nu vier stappen als lijst, met rechts steeds één stap open. De
   beweging komt op verzoek van de bezoeker, er gaat niets vanzelf lopen.

   Zonder JavaScript staan alle vier de panelen gewoon onder elkaar: de
   knoppen worden dan niet geactiveerd en niets wordt verborgen. */

.stapkiezer { display: grid; gap: var(--space-6); }
@media (min-width: 64em) {
  .stapkiezer { grid-template-columns: 21rem 1fr; gap: var(--space-8); align-items: start; }
}

.stapkiezer__lijst { display: grid; gap: var(--space-2); }

.stapkiezer__knop {
  display: flex; align-items: center; gap: var(--space-4);
  width: 100%; padding: var(--space-4); min-height: var(--tap-min);
  background: transparent; border: 0; border-radius: var(--radius-card);
  font-family: inherit; font-size: var(--fs-small); font-weight: var(--fw-bold);
  color: var(--ras-grey-800); text-align: left; cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.stapkiezer__knop:hover { background: var(--color-surface); }
.stapkiezer__knop[aria-selected="true"] {
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm);
}

.stapkiezer__n {
  width: 2rem; height: 2rem; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--ras-grey-300); color: var(--color-text);
  font-weight: var(--fw-bold); font-size: 1rem;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.stapkiezer__knop[aria-selected="true"] .stapkiezer__n {
  background: var(--accent); color: var(--accent-ink);
}

.stapkiezer__paneel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-panel); padding: var(--space-7);
}
.stapkiezer__paneel + .stapkiezer__paneel { margin-top: var(--space-4); }
.js-stapkiezer .stapkiezer__paneel + .stapkiezer__paneel { margin-top: 0; }

/* Het grote cijfer is decoratief (aria-hidden): hetzelfde nummer staat in
   de knop ernaast. Daarom mag het licht blijven. */
.stapkiezer__paneel p.stapkiezer__grootn {
  font-size: 3.5rem; line-height: 1; font-weight: var(--fw-bold);
  color: var(--ras-orange-300); margin: 0 0 var(--space-3);
}
.stapkiezer__paneel h3 { font-size: var(--fs-h3); }
.stapkiezer__paneel p { color: var(--ras-grey-800); margin-top: var(--space-3); }

.stapkiezer__balk {
  height: 3px; border-radius: 2px; background: var(--ras-grey-200);
  margin-top: var(--space-6); overflow: hidden;
}
.stapkiezer__balk span {
  display: block; height: 100%; background: var(--accent);
  transition: width var(--dur-slow) var(--ease-out);
}

/* De inhoud schuift binnen bij het wisselen. Alleen transform en
   opacity, dus dit kost geen layout. */
.stapkiezer__in { animation: stap-in .45s var(--ease-hero) both; }
@keyframes stap-in {
  from { opacity: 0; transform: translateX(1rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stapkiezer__in { animation: none; }
  .stapkiezer__balk span { transition: none; }
}

/* ---------- 44. Plaatshouder voor beeld dat nog moet komen ----------
   Zichtbaar als gat, met de beschrijving van wat er hoort te staan. Geen
   grijze doos zonder uitleg: dan weet niemand wat er mist. De opdruk
   staat in inkt op de oranje tint, dus hij is ook leesbaar. */
.fotoplek {
  display: grid; align-content: center; gap: var(--space-2);
  min-height: 14rem; padding: var(--space-6);
  background: repeating-linear-gradient(
    -45deg, var(--ras-orange-100), var(--ras-orange-100) 14px,
    #fff6f0 14px, #fff6f0 28px);
  border: 2px dashed var(--ras-orange-300);
  border-radius: var(--radius-panel);
  color: var(--color-text);
}
.fotoplek p { font-size: var(--fs-small); color: var(--ras-grey-800); }
.fotoplek__kop {
  font-size: var(--fs-h4); font-weight: var(--fw-bold);
  color: var(--color-text) !important;
}

/* ---------------------------------------------------------------------------
   45. FEITENLIJST
   Kerngegevens van een vacature in het zijpaneel: term links, waarde rechts.
   --------------------------------------------------------------------------- */
.feiten { margin: var(--space-4) 0 0; }
.feiten > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.feiten > div:last-child { border-bottom: 0; }
.feiten dt { font-size: var(--fs-small); color: var(--ras-grey-800); }
.feiten dd { margin: 0; font-weight: var(--fw-bold); text-align: right; }

/* ---------------------------------------------------------------------------
   46. LINKLIJST
   Kale lijst met links, gebruikt op de sitemap. Tapdoel van 44 px op aanraak.
   --------------------------------------------------------------------------- */
.lijst { list-style: none; display: grid; gap: var(--space-2); margin: 0; padding: 0; }
.lijst a { color: var(--color-link); text-decoration: none; }
.lijst a:hover { text-decoration: underline; }

@media (pointer: coarse) {
  .lijst a { display: inline-block; padding-block: var(--space-2); }
}

/* ---------------------------------------------------------------------------
   47. LANGE TEKST
   Juridische teksten en blogartikelen: kopjes, alinea's en lijsten die van de
   live site komen. Eén regel per elementsoort, zodat overgenomen HTML zonder
   klassen er toch uitziet als de rest van de site.
   --------------------------------------------------------------------------- */
.langetekst > * + * { margin-top: var(--space-5); }
.langetekst h2 {
  margin-top: var(--space-9);
  font-size: var(--fs-h3); line-height: var(--lh-snug);
}
.langetekst h3 {
  margin-top: var(--space-7);
  font-size: var(--fs-h4); line-height: var(--lh-snug);
}
.langetekst h2:first-child, .langetekst h3:first-child { margin-top: 0; }
.langetekst p, .langetekst li { line-height: var(--lh-body); }
.langetekst ul, .langetekst ol { padding-left: var(--space-6); display: grid; gap: var(--space-2); }
.langetekst li::marker { color: var(--ras-orange-500); }
.langetekst a { color: var(--color-link); }
.langetekst table { width: 100%; border-collapse: collapse; }
.langetekst th, .langetekst td {
  padding: var(--space-3); text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--color-border); font-size: var(--fs-small);
}

/* ---------------------------------------------------------------------------
   48. FORMULIERVELDEN NAAST ELKAAR
   Velden in een rij van twee stonden niet gelijk: de eerste alinea in de rij
   kreeg een ondermarge, waardoor de tweede kolom uitrekte en het invoerveld
   omlaag schoof. Binnen een formulier regelt de gap de afstand.
   --------------------------------------------------------------------------- */
.contactform p { margin: 0; align-content: start; }

/* ---------------------------------------------------------------------------
   49. VACATUREOVERZICHT, MODEL A
   Gekozen op 15 oktober 2026: zoekbalk in de kop, filterkolom links en de
   vacatures als brede rijen onder elkaar in plaats van kaarten naast elkaar.
   Op een smal scherm klapt de filterkolom in tot een uitklapbaar blok boven
   de lijst.
   --------------------------------------------------------------------------- */
.ico { flex: 0 0 auto; }

.vkop .section__head { margin-bottom: var(--space-6); }
.vzoek {
  display: grid; gap: var(--space-2);
  max-width: 60rem; padding: var(--space-3);
  background: var(--ras-white); border-radius: var(--radius-image);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 48em) { .vzoek { grid-template-columns: 2fr 1.2fr auto; align-items: stretch; } }
.vzoek__veld {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-input);
}
.vzoek__veld:focus-within { background: var(--ras-grey-100); }
@media (min-width: 48em) {
  .vzoek__veld + .vzoek__veld { border-left: 1px solid var(--ras-grey-200); border-radius: 0; }
}
.vzoek__label { font-size: var(--fs-meta); font-weight: var(--fw-bold); color: var(--ras-grey-700); }
.vzoek input, .vzoek select {
  width: 100%; padding: 2px 0; border: 0; background: transparent;
  font: inherit; font-size: var(--fs-lead); color: var(--ras-ink);
}
.vzoek input:focus, .vzoek select:focus { outline: none; }
.vzoek input::placeholder { color: var(--ras-grey-600); }
.vzoek__knop { min-height: 3.5rem; padding-inline: var(--space-6); font-weight: var(--fw-bold); }

.vbak { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 64em) { .vbak { grid-template-columns: 17.5rem minmax(0, 1fr); gap: var(--space-7); } }

.vfilter { display: grid; gap: var(--space-5); }
@media (min-width: 64em) { .vfilter { position: sticky; top: calc(var(--header-h-lg) + 4.5rem); } }
.vfilter__kop {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--tap-min); padding: 0 var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-button);
  font-weight: var(--fw-bold); cursor: pointer; list-style: none;
}
.vfilter__kop::-webkit-details-marker { display: none; }
.vfilter__kop::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--ras-blue-700); }
.vfilter[open] .vfilter__kop::after { content: "\2212"; }
@media (min-width: 64em) {
  .vfilter__kop { padding: 0; border: 0; pointer-events: none; }
  .vfilter__kop::after, .vfilter[open] .vfilter__kop::after { content: none; }
  .vfilter__kop .t-h4 { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
}
.vfilter__inhoud { display: grid; gap: var(--space-6); margin-top: var(--space-4); }
.vfilter__groep { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.vfilter__groep legend {
  margin-bottom: var(--space-3); padding: 0;
  font-size: var(--fs-meta); font-weight: var(--fw-bold); color: var(--ras-grey-700);
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
}
.vfilter__optie { display: flex; align-items: center; gap: var(--space-3); min-height: 2rem; cursor: pointer; }
.vfilter__optie input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--ras-blue-700); }
.vfilter__optie.is-leeg { color: var(--ras-grey-600); cursor: default; }
.vfilter__aantal { margin-left: auto; font-size: var(--fs-meta); color: var(--ras-grey-700); font-variant-numeric: tabular-nums; }
.vfilter__wis { justify-self: start; min-height: 0; padding: 0; }
.vfilter__alert {
  display: grid; gap: var(--space-3); padding: var(--space-5);
  border-radius: var(--radius-card); background: var(--ras-blue-100);
}
.vfilter__alert p { margin: 0; font-size: var(--fs-small); color: var(--ras-grey-800); }
.vfilter__alert .vfilter__alertkop {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--ras-blue-700);
}
.vfilter__alert .btn { white-space: normal; }

.vlijst { display: grid; gap: var(--space-4); min-width: 0; }
.vlijst__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border);
}
.vlijst__aantal { margin: 0; font-size: var(--fs-lead); }
.vlijst__aantal span { color: var(--ras-grey-700); }
.vlijst__sort { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: var(--ras-grey-700); }
.vlijst__sort select {
  min-height: 2.75rem; padding: 0 var(--space-3);
  border: 1px solid var(--ras-grey-300); border-radius: var(--radius-input);
  background: var(--ras-white); font: inherit; color: var(--ras-ink);
}
.vlijst__rijen { display: grid; gap: var(--space-4); }
.vlijst__leeg {
  margin: 0; padding: var(--space-5);
  border: 1px dashed var(--ras-grey-300); border-radius: var(--radius-card);
  color: var(--ras-grey-800);
}

.vrij {
  position: relative;
  display: grid; gap: var(--space-5);
  padding: var(--space-5);
  background: var(--ras-white);
  border: 1px solid var(--color-border); border-radius: var(--radius-image);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-inout), box-shadow var(--dur-fast) var(--ease-inout),
              transform var(--dur-fast) var(--ease-inout);
}
.vrij:hover { border-color: var(--ras-blue-300); box-shadow: var(--shadow-md); }
.vrij[hidden] { display: none; }
@media (min-width: 48em) {
  .vrij { grid-template-columns: minmax(0, 1fr) 13.5rem; gap: var(--space-6); padding: var(--space-6) var(--space-6); }
}
.vrij__body { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.vrij__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag--zacht { background: var(--ras-grey-100); color: var(--ras-grey-800); }
.vrij__title { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: var(--fw-bold); overflow-wrap: break-word; hyphens: auto; }
.vrij__title a { color: var(--ras-ink); text-decoration: none; }
.vrij__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-image); }
.vrij__title a:hover { color: var(--ras-blue-700); }
.vrij__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin: 0; padding: 0; }
.vrij__facts li { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--ras-grey-800); }
.vrij__facts .ico { color: var(--ras-blue-600); }
.vrij__tekst { margin: 0; font-size: var(--fs-small); color: var(--ras-grey-800); line-height: var(--lh-body); }
.vrij__actie { display: grid; gap: var(--space-3); align-content: center; }
@media (min-width: 48em) { .vrij__actie { padding-left: var(--space-6); border-left: 1px solid var(--color-border); } }
.vrij__loon { margin: 0; line-height: 1.2; }
.vrij__loon span { display: block; font-size: var(--fs-meta); font-weight: var(--fw-bold); color: var(--ras-grey-700); }
.vrij__loon strong { font-size: 1.5rem; font-weight: 800; color: var(--ras-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vrij__knoppen { display: flex; gap: var(--space-2); }
.vrij__knoppen .btn { position: relative; z-index: 2; flex: 1; }

.vopen {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5);
  margin-top: var(--space-3); padding: var(--space-6);
  border-radius: var(--radius-image); background: var(--ras-blue-700); color: var(--ras-white);
}
.vopen__tekst { flex: 1 1 22rem; display: grid; gap: var(--space-2); }
.vopen__tekst p { margin: 0; color: rgba(255, 255, 255, 0.9); }
.vopen .vopen__kop { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--ras-white); }
.vopen .btn--link { color: var(--ras-white); }
.vopen .btn--link:hover { color: var(--ras-blue-100); }

/* ---------------------------------------------------------------------------
   50. VACATUREDETAIL, MODEL A
   Gekozen op 15 oktober 2026: kop met de kerngegevens als chips, de tekst
   links en rechts een sollicitatiekaart die meeschuift. Op een smal scherm
   staat de kaart tussen de kop en de tekst, zodat uurloon en knop meteen
   in beeld zijn.
   --------------------------------------------------------------------------- */
.vdkop { padding-bottom: var(--space-8); }
.vdkop .wrap { display: grid; justify-items: start; gap: var(--space-4); }
.vdkop__terug {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--ras-blue-700); text-decoration: none;
}
.vdkop__terug:hover { text-decoration: underline; }
.vdkop__tag { background: var(--ras-white); color: var(--ras-blue-700); }
.vdkop__titel {
  max-width: 52rem;
  font-size: var(--fs-display); line-height: var(--lh-heading); font-weight: 800; letter-spacing: -0.01em;
  overflow-wrap: break-word; hyphens: auto;
}
.vdkop__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.vdkop__chips li {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-button); background: var(--ras-white);
  font-weight: var(--fw-medium);
}
.vdkop__chips .ico { color: var(--ras-blue-600); }

.vdet { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 64em) { .vdet { grid-template-columns: minmax(0, 1fr) 23rem; gap: var(--space-9); } }
.vdet__zij { display: grid; gap: var(--space-4); }
@media (max-width: 63.99em) { .vdet__zij { order: -1; } }
@media (min-width: 64em) { .vdet__zij { position: sticky; top: calc(var(--header-h-lg) + 4.5rem); } }

.vdet__tekst { min-width: 0; max-width: var(--measure-prose); }
.vdet__tekst.langetekst > * + * { margin-top: var(--space-7); }
.vdet__lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ras-grey-800); }
.vdet__blok > * + * { margin-top: var(--space-3); }
.vdet__blok h2 { margin-top: 0; font-weight: 800; }
.vdet__panelen { display: grid; gap: var(--space-4); }
@media (min-width: 40em) { .vdet__panelen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vdet__paneel {
  display: grid; align-content: start; gap: var(--space-3);
  padding: var(--space-5); border-radius: var(--radius-image); background: var(--ras-grey-100);
}
.vdet__paneel h2 { margin: 0; font-weight: 800; }
.vdet__paneel--aanbod { background: var(--ras-blue-100); }
.vdet__paneel ul { list-style: none; padding: 0; gap: var(--space-3); }
.vdet__paneel li { position: relative; padding-left: 1.875rem; }
.vdet__paneel li::before {
  content: ""; position: absolute; left: 0; top: 0.3em;
  width: 1.125rem; height: 1.125rem;
  background: var(--ras-blue-700);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.vdet__paneel--aanbod li::before { background: var(--ras-orange-600); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.langetekst .chips { padding: 0; display: flex; }
.chips li {
  padding: 6px 14px; border: 1px solid var(--ras-grey-300); border-radius: var(--radius-pill);
  font-size: var(--fs-small); line-height: 1.4;
}
.chips .chips__taal { border-color: var(--ras-blue-300); background: var(--ras-blue-100); color: var(--ras-blue-700); }

.vkaart {
  display: grid; gap: var(--space-4);
  padding: var(--space-6);
  background: var(--ras-white);
  border: 1px solid var(--color-border); border-radius: 1.25rem;
  box-shadow: var(--shadow-lg);
}
.vkaart__loon { margin: 0; line-height: 1.15; }
.vkaart__loon span { display: block; font-size: var(--fs-meta); font-weight: var(--fw-bold); color: var(--ras-grey-700); }
.vkaart__loon strong { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.vkaart__feiten { margin: 0; }
.vkaart__feiten > div {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 0; border-top: 1px solid var(--color-border);
}
.vkaart__feiten dt { color: var(--ras-grey-700); }
.vkaart__feiten dd { margin: 0; font-weight: var(--fw-medium); text-align: right; }
.vkaart__knop { min-height: 3.375rem; font-size: var(--fs-lead); font-weight: var(--fw-bold); }
.vkaart__noot { margin: 0; text-align: center; font-size: var(--fs-meta); color: var(--ras-grey-700); }

.vcontact {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5); border-radius: var(--radius-image); background: var(--ras-grey-100);
}
.vcontact p { margin: 0; }
.vcontact__foto {
  flex: 0 0 auto; width: 3.75rem; height: 3.75rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ras-blue-700); color: var(--ras-white);
  font-size: 1.25rem; font-weight: var(--fw-bold); letter-spacing: 0.02em;
}
.vcontact__label { font-size: var(--fs-meta); color: var(--ras-grey-700); }
.vcontact__naam { font-weight: var(--fw-bold); }
.vcontact a { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--ras-blue-700); }

.vandere { display: grid; gap: var(--space-3); margin: var(--space-5) 0 var(--space-7); }
.vlink {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5);
  padding: var(--space-5) var(--space-6);
  border-radius: 0.875rem; background: var(--ras-white); color: var(--ras-ink); text-decoration: none;
  border: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-inout), box-shadow var(--dur-fast) var(--ease-inout);
}
.vlink:hover { border-color: var(--ras-blue-300); box-shadow: var(--shadow-md); color: var(--ras-ink); }
.vlink__tekst { flex: 999 1 18rem; display: grid; }
.vlink__tekst strong { font-size: var(--fs-h4); color: var(--ras-blue-700); }
.vlink__tekst span { font-size: var(--fs-small); color: var(--ras-grey-800); }
.vlink__loon { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   51. SOLLICITATIEFORMULIER, MODEL A
   Gekozen op 15 oktober 2026: links de vacature waarop iemand solliciteert
   en wat er daarna gebeurt, rechts het formulier in een witte kaart met een
   vak om het cv te slepen. Op een smal scherm staat de vacature boven het
   formulier en de stappen eronder.
   --------------------------------------------------------------------------- */
.vsol { background: var(--ras-grey-100); }
.vsol__bak { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 64em) { .vsol__bak { grid-template-columns: 22rem minmax(0, 1fr); gap: var(--space-7); } }
.vsol__zij { display: contents; }
@media (min-width: 64em) { .vsol__zij { display: grid; gap: var(--space-4); position: sticky; top: calc(var(--header-h-lg) + 4.5rem); } }
@media (max-width: 63.99em) { .vsol__stappen { order: 2; } }

.vsol__vac, .vsol__stappen { display: grid; gap: var(--space-3); padding: var(--space-6); border-radius: 1.25rem; }
.vsol__vac { background: var(--ras-white); }
.vsol__vac p { margin: 0; }
.vsol__vac .eyebrow { margin: 0; color: var(--ras-blue-700); }
.vsol__titel { font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: 800; overflow-wrap: break-word; hyphens: auto; }
.vsol__lead { color: var(--ras-grey-800); }
.vsol__feiten { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; color: var(--ras-grey-800); }
.vsol__feiten[hidden] { display: none; }
.vsol__feit { position: relative; padding-left: 1.75rem; }
.vsol__feit::before {
  content: ""; position: absolute; left: 0; top: 0.2em; width: 1.125rem; height: 1.125rem;
  background: var(--ras-blue-600);
  -webkit-mask: var(--vsol-ico) center / contain no-repeat; mask: var(--vsol-ico) center / contain no-repeat;
}
.vsol__feit--plaats { --vsol-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.vsol__feit--uren { --vsol-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.vsol__feit--loon { --vsol-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M17 6a6 6 0 1 0 0 12M5 10h8M5 14h8'/%3E%3C/svg%3E"); }

.vsol__stappen { background: var(--ras-blue-100); }
.vsol__stappen h2 { font-weight: var(--fw-bold); }
.vsol__stappen ol { display: grid; gap: var(--space-4); margin: var(--space-2) 0 0; padding: 0; list-style: none; counter-reset: stap; }
.vsol__stappen li { position: relative; padding-left: 2.75rem; min-height: 1.875rem; counter-increment: stap; }
.vsol__stappen li::before {
  content: counter(stap);
  position: absolute; left: 0; top: -0.1em;
  width: 1.875rem; height: 1.875rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ras-blue-700); color: var(--ras-white); font-weight: var(--fw-bold); font-size: var(--fs-small);
}

.vsol__formkaart {
  display: grid; gap: var(--space-6); min-width: 0;
  padding: var(--space-6); border-radius: 1.25rem;
  background: var(--ras-white); box-shadow: var(--shadow-lg);
}
@media (min-width: 48em) { .vsol__formkaart { padding: var(--space-7) var(--space-8); } }
.vsol__kop { display: grid; gap: var(--space-1); }
.vsol__kop .t-h2 { font-weight: 800; }
.vsol__kop p { margin: 0; color: var(--ras-grey-700); }
.vsol__form { display: grid; gap: var(--space-5); }
.vsol__rij { display: grid; gap: var(--space-4); }
@media (min-width: 40em) { .vsol__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vsol__veld { display: grid; gap: var(--space-2); margin: 0; align-content: start; }
.vsol__label { font-size: var(--fs-meta); font-weight: var(--fw-bold); color: var(--ras-grey-800); }
.vsol__optie { font-weight: var(--fw-regular); color: var(--ras-grey-700); }
.vsol__veld .input { min-height: 3.125rem; }

.vdrop {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  padding: var(--space-5);
  border: 2px dashed var(--ras-blue-300); border-radius: var(--radius-card);
  background: var(--ras-blue-100); color: var(--ras-blue-700);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-inout), background-color var(--dur-fast) var(--ease-inout);
}
.vdrop:hover, .vdrop.is-boven { border-color: var(--ras-blue-600); background: var(--ras-blue-050); }
.vdrop.is-gekozen { border-style: solid; border-color: var(--ras-blue-600); }
.vdrop:has(+ .vdrop__input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.vdrop:has(+ .vdrop__input[aria-invalid="true"]) { border-color: var(--ras-error); }
.vdrop__tekst { flex: 1 1 14rem; display: grid; }
.vdrop__tekst span { font-size: var(--fs-small); color: var(--ras-grey-700); }
.vdrop__tekst .vdrop__bestand { margin-top: var(--space-1); font-weight: var(--fw-bold); color: var(--ras-ink); overflow-wrap: anywhere; }
.vdrop__input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.vsol__akkoord { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0; font-size: var(--fs-small); color: var(--ras-grey-800); }
.vsol__akkoord input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: 2px 0 0; accent-color: var(--ras-blue-700); }
.vsol__knop { min-height: 3.375rem; padding-inline: var(--space-7); font-size: var(--fs-lead); font-weight: var(--fw-bold); }

/* ---------------------------------------------------------------------------
   52. HEADER OP EEN SMAL TOESTEL
   Op 375 pixels breed liep de pagina zijwaarts uit: in het Frans is de
   doelgroepschakelaar langer, en op werkgeverspagina's is de knop
   "Offerte aanvragen" breder dan "Inschrijven". Onder 26em worden de
   binnenruimtes kleiner, zodat alles weer binnen het scherm past.
   --------------------------------------------------------------------------- */
@media (max-width: 26em) {
  .topbar .aud a { padding: 0 var(--space-3); font-size: var(--fs-meta); }
  .header__bar { gap: var(--space-2); }
  .header__actions { gap: var(--space-1); }
  .header__actions .btn { padding-inline: var(--space-3); font-size: var(--fs-meta); }
  .header__actions .lang__btn { padding-inline: var(--space-2); }
}

/* ---------------------------------------------------------------------------
   53. LANGE KNOPPEN EN TABELLEN OP EEN SMAL TOESTEL
   Gevonden bij het nameten van alle 302 pagina's op 375 pixels breed, op
   15 oktober 2026. Een knop breekt nooit af (white-space: nowrap), dus een
   lange Franse knoptekst duwde de kolom breder dan het scherm. En brede
   tabellen in blogs liepen het scherm uit. Knoppen mogen op een smal scherm
   over twee regels; een tabel schuift binnen zijn eigen vak.
   --------------------------------------------------------------------------- */
@media (max-width: 30em) {
  .btn { white-space: normal; }
}
@media (max-width: 47.99em) {
  .langetekst table, .prose table {
    display: block; max-width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------------------------------------------------------------------------
   54. LOGO BOVEN HET OPEN MOBIELE MENU
   Het logo hangt onder de headerbalk uit, over de witte vlag. Het mobiele
   menu begint op de onderkant van de balk en dekte daardoor de onderste
   helft van het woordmerk af. Het menu staat in de header, dus het logo
   krijgt zolang het menu open is een hogere laag dan het menu.
   --------------------------------------------------------------------------- */
body:has(.mobile-nav.is-open) .logo { z-index: calc(var(--z-overlay) + 1); }

/* ---------------------------------------------------------------------------
   55. ZOEKBALK MET TWEE VRIJE VELDEN
   15 oktober 2026: op de homepages en de vacatureoverzichten. Eén witte balk
   met een veld voor functie of trefwoord, een scheidingslijn, een veld voor
   plaats, provincie of postcode, en de zoekknop. Vrij in te vullen in plaats
   van keuzelijsten. Op een smal scherm staan de velden onder elkaar.
   --------------------------------------------------------------------------- */
.zoekbalk {
  display: grid; gap: var(--space-2);
  max-width: 60rem; padding: var(--space-2);
  background: var(--ras-white);
  border: 1px solid var(--ras-grey-300); border-radius: 1.25rem;
  box-shadow: 0 18px 40px -18px rgba(17, 37, 64, .35);
}
@media (min-width: 48em) {
  .zoekbalk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 0; }
}
.zoekbalk__veld {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 3.25rem; padding: 0 var(--space-4);
  border-radius: .875rem; cursor: text;
}
.zoekbalk__veld:focus-within { background: var(--ras-grey-100); }
@media (max-width: 47.99em) { .zoekbalk__veld { background: var(--ras-grey-100); } }
@media (min-width: 48em) {
  .zoekbalk__veld + .zoekbalk__veld { position: relative; }
  .zoekbalk__veld + .zoekbalk__veld::before {
    content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
    width: 1px; background: var(--ras-grey-300);
  }
}
.zoekbalk__ico { flex: 0 0 auto; color: var(--ras-ink); }
.zoekbalk input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  padding: 0; border: 0; background: transparent;
  font: inherit; font-size: var(--fs-body); color: var(--ras-ink);
  text-overflow: ellipsis;
}
.zoekbalk input:focus { outline: none; }
.zoekbalk input::placeholder { color: var(--ras-grey-700); opacity: 1; }
.zoekbalk input::-webkit-search-cancel-button { cursor: pointer; }
.zoekbalk__knop { min-height: 3.25rem; padding-inline: var(--space-6); font-weight: var(--fw-bold); border-radius: .875rem; }
@media (min-width: 48em) { .zoekbalk__knop { margin-left: var(--space-2); } }

/* In de hero van de homepage neemt de balk de plaats in van het paneel. */
.zoekbalk.hero--dia__paneel { max-width: none; padding: var(--space-2); border: 1px solid var(--ras-grey-300); }
.v2 .zoekbalk.hero--dia__paneel { padding: var(--space-2); border: 1px solid var(--ras-grey-300); border-radius: 1.25rem; }
.vkop .zoekbalk { margin-top: 0; }
/* De labelregel van het oude paneel (display block, ondermarge) mag de
   velden van de zoekbalk niet raken. */
.zoekbalk .zoekbalk__veld,
.v2 .hero--dia__paneel .zoekbalk__veld { display: flex; margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }

/* ---------------------------------------------------------------------------
   56. BEWIJSBLOK OP DE HOMEPAGES
   15 oktober 2026. De cijfers lazen als losse getallen. Nu staat bij elke
   kaart waar het cijfer vandaan komt (Google-beoordelingen), de sterren in
   verhouding tot de score, voor welke vestiging het geldt en op hoeveel
   beoordelingen het rust. Onder de kaarten de datum van ophalen en een link
   naar de bron. De klantnamen staan als rij labels, niet als lopende zin.
   Bewust geen AggregateRating-schema: zie het commentaar in de HTML.
   --------------------------------------------------------------------------- */
.bewijs { display: grid; gap: var(--space-5); }
@media (min-width: 48em) { .bewijs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bewijs__kaart {
  display: grid; align-content: start; justify-items: center; gap: var(--space-2);
  padding: var(--space-7) var(--space-6); text-align: center;
  background: var(--ras-white); border-radius: 1.5rem;
  box-shadow: 0 1px 2px rgba(17, 37, 64, .05), 0 18px 40px -18px rgba(17, 37, 64, .28);
}
.bewijs__kaart p { margin: 0; }
.bewijs__bron {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px 4px 8px; margin-bottom: var(--space-3) !important;
  border-radius: 999px; background: var(--ras-blue-100); color: var(--ras-blue-700);
  font-size: var(--fs-meta); font-weight: var(--fw-bold);
}
.bewijs__score { display: flex; align-items: baseline; gap: var(--space-2); line-height: 1; }
.bewijs__score strong { font-size: clamp(3rem, 2.4rem + 2.4vw, 4.25rem); font-weight: var(--fw-bold); color: var(--ras-ink); letter-spacing: -0.02em; }
.bewijs__score span { font-size: var(--fs-lead); color: var(--ras-grey-700); }

/* Vijf sterren: een grijze rij met daarover een oranje rij die zo breed is
   als de score. De oranje rij loopt vol als de kaart in beeld komt. */
.bewijs__sterren {
  --ster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cg fill='black'%3E%3Cpath id='s' d='M12 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.6l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z'/%3E%3Cuse href='%23s' x='24'/%3E%3Cuse href='%23s' x='48'/%3E%3Cuse href='%23s' x='72'/%3E%3Cuse href='%23s' x='96'/%3E%3C/g%3E%3C/svg%3E");
  position: relative; width: 9rem; height: 1.8rem; margin: var(--space-2) 0 var(--space-3) !important;
  background: var(--ras-grey-200);
  -webkit-mask: var(--ster) left center / 100% 100% no-repeat; mask: var(--ster) left center / 100% 100% no-repeat;
}
.bewijs__sterren::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--vul, 100%);
  background: var(--ras-orange-500);
  transition: width 1.1s var(--ease-out) .25s;
}
.js-reveal .reveal:not(.is-in) .bewijs__sterren::after,
.js-reveal .bewijs__kaart.reveal:not(.is-in) .bewijs__sterren::after { width: 0; }
.bewijs__wie { font-weight: var(--fw-bold); color: var(--ras-ink); }
.bewijs__aantal { font-size: var(--fs-small); color: var(--ras-grey-700); }

.bewijs__kaart--klanten { justify-items: center; }
.bewijs__sinds {
  font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3rem); font-weight: var(--fw-bold); line-height: 1.05;
  color: var(--ras-blue-700); margin: var(--space-6) 0 var(--space-3) !important;
}
.bewijs__klanten { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.bewijs__klanten li {
  padding: 6px 14px; border-radius: 999px;
  background: var(--ras-grey-100); color: var(--ras-grey-800);
  font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: .02em;
}

.bewijs__noot {
  position: relative; z-index: 1;
  max-width: 46rem; margin: var(--space-6) auto 0; text-align: center;
  font-size: var(--fs-small); color: var(--ras-grey-800);
}
.bewijs__noot > svg { display: inline-block; vertical-align: -3px; margin-right: 6px; color: var(--ras-blue-700); }
.bewijs__noot a { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-bold); color: var(--ras-blue-700); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .bewijs__sterren::after { transition: none; } }
/* 15 oktober 2026, op verzoek: het blok "Sinds 2016" is eruit, de twee
   Google-kaarten staan samen in het midden, met het Google-logo bovenaan. */
.bewijs--twee { max-width: 48rem; margin-inline: auto; }
@media (min-width: 48em) { .bewijs--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bewijs__bron { background: none; padding: 0; color: var(--ras-grey-800); font-size: var(--fs-small); gap: var(--space-2); }
.bewijs__g { flex: 0 0 auto; }
/* 15 oktober 2026: alleen de kaart van de Belgische vestiging blijft over. */
.bewijs--een { max-width: 24rem; margin-inline: auto; grid-template-columns: 1fr !important; }
.office__name a { color: inherit; text-decoration: none; }
.office__name a:hover { color: var(--ras-blue-700); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   57. BEWIJSKAART, VORMGEVING
   15 oktober 2026. Zelfde inhoud en volgorde, meer uitstraling: het
   Google-label zweeft als pil op de bovenrand, het cijfer is groot, de
   sterren lopen vol, de kaart heeft een rand die van oranje naar blauw
   verloopt en staat licht schuin, met bogen en een gloed erachter.
   --------------------------------------------------------------------------- */
.bewijs--een { position: relative; isolation: isolate; max-width: 27rem; padding-top: var(--space-5); }
/* bogen en gloed achter de kaart */
.bewijs--een::before {
  content: ""; position: absolute; z-index: -2; pointer-events: none;
  width: 34rem; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -46%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 72%);
}
.bewijs--een::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 23rem; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -54%);
  border-radius: 50%;
  border: 3px solid var(--ras-orange-300);
  -webkit-mask: linear-gradient(115deg, #000 30%, transparent 30%, transparent 62%, #000 62%);
          mask: linear-gradient(115deg, #000 30%, transparent 30%, transparent 62%, #000 62%);
}
@media (max-width: 30em) {
  .bewijs--een::before { width: 24rem; }
  .bewijs--een::after { width: 20rem; }
}

.bewijs--een .bewijs__kaart {
  position: relative;
  padding: calc(var(--space-8) + var(--space-2)) var(--space-7) var(--space-7);
  gap: var(--space-3);
  border: 2px solid transparent; border-radius: 2rem;
  background:
    linear-gradient(var(--ras-white), var(--ras-white)) padding-box,
    linear-gradient(135deg, var(--ras-orange-300), var(--ras-blue-300)) border-box;
  box-shadow: 0 2px 4px rgba(17, 37, 64, .06), 0 34px 70px -30px rgba(17, 37, 64, .45);
  transform: rotate(-1.5deg);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.bewijs--een .bewijs__kaart:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 2px 4px rgba(17, 37, 64, .06), 0 44px 80px -30px rgba(17, 37, 64, .5); }
.js-reveal .bewijs--een .bewijs__kaart.reveal.is-in { transform: rotate(-1.5deg); }
.js-reveal .bewijs--een .bewijs__kaart.reveal.is-in:hover { transform: rotate(0deg) translateY(-6px); }

/* het Google-label als zwevende pil op de bovenrand */
.bewijs--een .bewijs__bron {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  margin: 0 !important; padding: 10px 20px 10px 14px;
  background: var(--ras-white); border-radius: 999px;
  box-shadow: 0 10px 26px -10px rgba(17, 37, 64, .4), 0 0 0 1px var(--ras-grey-200);
  font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--ras-ink); white-space: nowrap;
}
.bewijs--een .bewijs__g { width: 24px; height: 24px; }

.bewijs--een .bewijs__score { gap: var(--space-3); align-items: center; }
.bewijs--een .bewijs__score strong { font-size: clamp(4.5rem, 3.6rem + 3.6vw, 6.5rem); line-height: .9; }
.bewijs--een .bewijs__score span {
  padding: 4px 12px; border-radius: 999px;
  background: var(--ras-orange-100); color: var(--ras-grey-800);
  font-size: var(--fs-small); font-weight: var(--fw-bold);
}
.bewijs--een .bewijs__sterren { width: 13rem; height: 2.6rem; margin: var(--space-1) 0 var(--space-2) !important; }

.bewijs--een .bewijs__wie {
  display: inline-flex; align-items: center; gap: 6px;
  padding-top: var(--space-4); border-top: 1px dashed var(--ras-grey-300);
  font-size: var(--fs-lead);
}
.bewijs--een .bewijs__wie svg { color: var(--ras-orange-500); }

@media (prefers-reduced-motion: reduce) {
  .bewijs--een .bewijs__kaart { transition: none; }
}

/* ---------------------------------------------------------------------------
   58. BLOGARTIKEL (15 oktober 2026)
   Template voor alle blogartikels, opgebouwd door _bouw/blog_layout.py.
   Twee kolommen vanaf 1024px: links de tekst (720px, ca. 70 à 75 tekens per
   regel), rechts een sticky zijkolom met leestijd, inhoudstafel en een kaart
   voor werkgevers. De kop gebruikt hetzelfde raster, zodat de titel recht
   boven de tekst staat, en is lager dan voorheen. Daaronder één kolom, met de
   inhoudstafel als inklapbaar blok bovenaan het artikel.
   --------------------------------------------------------------------------- */
.blog-raster { max-width: 80rem; }
@media (min-width: 64em) {
  .blog-raster {
    display: grid; grid-template-columns: minmax(0, 45rem) 18.75rem;
    column-gap: clamp(var(--space-8), 5vw, var(--space-10));
    justify-content: center;
  }
}

/* Kop: lager, titel in de tekstkolom, geen losse versiering */
.blog-kop.section { padding-block: var(--space-8) var(--space-7); }
@media (min-width: 64em) { .blog-kop.section { padding-block: calc(var(--space-9) + var(--space-2)) var(--space-8); } }
.v2 main > .blog-kop::after, .v2 main > .blog-kop::before { display: none; }
.blog-kop__in { min-width: 0; }
.blog-kop .t-h1 { max-width: 30ch; letter-spacing: -0.02em; line-height: 1.12; }
.blog-kop .eyebrow a { text-decoration: none; }
.blog-kop .eyebrow a::before { content: "\2190\00a0"; }
.blog-kop .eyebrow a:hover { text-decoration: underline; }
@keyframes blog-binnen { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.blog-kop__in > * { animation: blog-binnen .55s cubic-bezier(.16, 1, .3, 1) both; }
.blog-kop__in > *:nth-child(2) { animation-delay: .06s; }
.blog-kop__in > *:nth-child(3) { animation-delay: .12s; }

/* Artikel */
.blog-body.section { padding-top: var(--space-8); }
.blog-art { min-width: 0; }
.blog-art .langetekst { max-width: none; }
.blog-art .langetekst h2 {
  position: relative;
  margin-top: var(--space-10);
  padding-top: var(--space-4);
  font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); line-height: 1.2; letter-spacing: -0.015em;
  scroll-margin-top: calc(var(--topbar-h) + var(--header-h-lg) + var(--space-5));
}
.blog-art .langetekst h2::before {      /* klein oranje accentlijntje */
  content: ""; position: absolute; top: 0; left: 0;
  width: 2.5rem; height: 4px; border-radius: 2px; background: var(--ras-orange-500);
}
.blog-art .langetekst > h2:first-child { margin-top: var(--space-6); }
.blog-art .langetekst h3 { margin-top: var(--space-7); }
.blog-art .langetekst p, .blog-art .langetekst li { font-size: 1.0625rem; }
.blog-art .langetekst a {
  color: var(--ras-blue-700);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(39, 85, 145, .45);
  transition: text-decoration-color .2s ease, text-decoration-thickness .2s ease, color .2s ease;
}
.blog-art .langetekst a:hover { color: var(--ras-blue-800); text-decoration-color: currentColor; text-decoration-thickness: 2px; }

/* Inhoudstafel, gedeelde opmaak */
.blog-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.blog-toc a {
  display: block; padding: 6px 0 6px var(--space-4);
  border-left: 2px solid var(--ras-grey-200);
  font-size: var(--fs-small); line-height: 1.4; color: var(--ras-grey-800); text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.blog-toc a:hover { color: var(--ras-blue-700); border-left-color: var(--ras-blue-300); }
.blog-toc a.is-actief { color: var(--ras-ink); font-weight: var(--fw-bold); border-left-color: var(--ras-orange-500); }

/* Mobiel en tablet: inklapbaar blok bovenaan het artikel */
.blog-toc--mobiel {
  margin-bottom: var(--space-7);
  border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--ras-white);
}
.blog-toc--mobiel summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--tap-min); padding: var(--space-3) var(--space-4);
  font-weight: var(--fw-bold); cursor: pointer; list-style: none;
}
.blog-toc--mobiel summary::-webkit-details-marker { display: none; }
.blog-toc--mobiel summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--ras-blue-700); }
.blog-toc--mobiel[open] summary::after { content: "\2212"; }
.blog-toc__tijd { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: var(--fs-meta); font-weight: var(--fw-regular); color: var(--ras-grey-700); }
.blog-toc--mobiel ol { padding: 0 var(--space-4) var(--space-4); }

/* Zijkolom */
.blog-zij { display: none; }
@media (min-width: 64em) {
  .blog-toc--mobiel { display: none; }
  .blog-zij { display: block; }
  .blog-zij__plak {
    position: sticky; top: calc(var(--topbar-h) + var(--header-h-lg) + var(--space-5));
    display: grid; gap: var(--space-6);
    max-height: calc(100vh - var(--topbar-h) - var(--header-h-lg) - var(--space-7)); overflow-y: auto;
    padding-bottom: var(--space-2);
  }
}
.blog-leestijd {
  display: inline-flex; align-items: center; gap: var(--space-2); margin: 0;
  font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--ras-grey-800);
}
.blog-leestijd svg { color: var(--ras-blue-600); }
.blog-toc__kop {
  margin: 0 0 var(--space-3); font-size: var(--fs-meta); font-weight: var(--fw-bold);
  color: var(--ras-grey-700); text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
}
.blog-cta {
  display: grid; gap: var(--space-2);
  padding: var(--space-5); border-radius: var(--radius-image);
  background: var(--ras-blue-100);
}
.blog-cta p { margin: 0; font-size: var(--fs-small); color: var(--ras-grey-800); }
.blog-cta .blog-cta__kop { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--ras-ink); }
.blog-cta .btn { justify-self: start; margin-top: var(--space-2); transition: background-color .2s ease, transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease; }
.blog-cta .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(255, 110, 50, .7); }

/* Leesvoortgang: een oranje balk bovenaan die meegroeit */
.blog-voortgang {
  position: fixed; top: 0; left: 0; right: 0; z-index: calc(var(--z-header) + 5);
  height: 4px; background: var(--ras-orange-500);
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* Inloop van de tekst bij scrollen; alleen als JavaScript draait */
.js-blog .blog-art .langetekst > * { opacity: 0; transform: translateY(14px); transition: opacity .55s cubic-bezier(.16, 1, .3, 1), transform .55s cubic-bezier(.16, 1, .3, 1); }
.js-blog .blog-art .langetekst > .is-zichtbaar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .blog-kop__in > * { animation: none; }
  .js-blog .blog-art .langetekst > * { opacity: 1; transform: none; transition: none; }
  .blog-voortgang { display: none; }
  .blog-toc a, .blog-cta .btn, .blog-art .langetekst a { transition: none; }
}
.js-blog .blog-art .langetekst > .is-meteen { transition: none; }

/* ---------------------------------------------------------------------------
   59. BLOGOVERZICHT EN "LEES OOK" (15 oktober 2026)
   Zelfde aanpak als het blogtemplate: lagere kop, ruimer raster, het
   nieuwste artikel groot bovenaan, leestijd op elke kaart. Een kaart zonder
   foto krijgt een plaatshouder in de tint van de doelgroep (de blogfoto's
   staan nog op de aanleverlijst). Opgebouwd door _bouw/blog_overzicht.py.
   --------------------------------------------------------------------------- */
.blog-kop--overzicht .t-h1 { max-width: 24ch; }
.blog-kop--overzicht .section__head { margin-bottom: var(--space-6); }
.blog-filter .btn { gap: var(--space-2); }
.filter__n {
  display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 6px;
  border-radius: 999px; font-size: var(--fs-meta); font-weight: var(--fw-bold); line-height: 1;
  background: var(--ras-blue-100); color: var(--ras-blue-700);
}
.btn--orange .filter__n { background: rgba(255, 255, 255, .25); color: var(--ras-white); }

/* Raster: ruimer dan de standaardinhoud */
.blog-raster-overzicht { gap: var(--space-5); }
.blog-raster-overzicht .post { overflow: hidden; }

/* Plaatshouder voor een artikel zonder foto */
.post__plaats {
  display: grid; place-items: center; align-content: center; gap: var(--space-2);
  aspect-ratio: 3 / 2; width: 100%;
  font-size: var(--fs-meta); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
}
.post__plaats--student { background: var(--ras-orange-100); color: var(--ras-grey-800); }
.post__plaats--werkgever { background: var(--ras-blue-100); color: var(--ras-blue-700); }
.post__plaats svg { opacity: .8; }

/* Het nieuwste artikel groot, over de volle breedte */
.post__label {
  align-self: flex-start; padding: 4px 12px; border-radius: 999px;
  background: var(--ras-orange-500); color: var(--ras-white);
  font-size: var(--fs-meta); font-weight: var(--fw-bold);
}
.post__meer {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2);
  font-weight: var(--fw-bold); color: var(--ras-blue-700);
}
.post__meer svg { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.post--groot:hover .post__meer svg { transform: translateX(4px); }
@media (min-width: 48em) {
  .blog-raster-overzicht .post--groot { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; align-items: stretch; }
  .blog-raster-overzicht .post--groot > img,
  .blog-raster-overzicht .post--groot > .post__plaats { height: 100%; aspect-ratio: auto; min-height: 20rem; object-fit: cover; }
  .blog-raster-overzicht .post--groot .post__body { justify-content: center; padding: var(--space-8) var(--space-7); gap: var(--space-4); }
  .blog-raster-overzicht .post--groot .post__title { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.1rem); line-height: 1.15; letter-spacing: -0.015em; }
  .blog-raster-overzicht .post--groot .post__plaats svg { width: 64px; height: 64px; }
}

/* Zachte overgang bij filteren */
@keyframes post-terug { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.post.is-terug { animation: post-terug .45s cubic-bezier(.16, 1, .3, 1) both; }

/* "Lees ook" onder elk artikel */
.blog-ook { border-top: 1px solid var(--color-border); }
.blog-ook__kop {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.blog-ook__kop .t-h2 { letter-spacing: -0.02em; }
/* In de compacte kaarten van de bento staat de plaatshouder klein naast de tekst */
.v2 .grid.g-3:has(> .post:nth-child(3):last-child) > .post:not(:first-child) .post__plaats { aspect-ratio: 16 / 9; border-radius: .75rem; }
.v2 .grid.g-3:has(> .post:nth-child(3):last-child) > .post:not(:first-child) .post__plaats svg { width: 28px; height: 28px; }

@media (prefers-reduced-motion: reduce) {
  .post.is-terug { animation: none; }
  .post__meer svg { transition: none; }
}
/* Mobiel: filters op één rij die zijwaarts schuift, en een lage plaatshouder */
@media (max-width: 47.99em) {
  .blog-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) var(--space-2); }
  .blog-filter::-webkit-scrollbar { display: none; }
  .blog-filter .btn { flex: 0 0 auto; padding-inline: var(--space-4); }
  .post__plaats { aspect-ratio: 3 / 1; }
}

/* ===========================================================================
   60. LOGOBAND (15 oktober 2026)
   De band staat binnen dezelfde breedte als de inhoud erboven en eronder,
   zodat hij links en rechts op één lijn begint en eindigt. De randen
   vervagen met een masker (werkt op elke achtergrondkleur). Elk logo heeft
   zijn ruimte rechts in plaats van een gap: zo past de lus van -50% exact.
   site.js (blok 15) vult de band aan tot elke helft breder is dan de band.
   =========================================================================== */
.logos {
  width: min(100% - 2 * var(--gutter), var(--container) - 2 * var(--gutter));
  margin-inline: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}
.logos::before, .logos::after { content: none; }
.logos__track { gap: 0; }
.logos__item { padding-right: var(--space-8); }
@media (prefers-reduced-motion: reduce) {
  .logos { -webkit-mask-image: none; mask-image: none; }
  .logos__item { padding-right: 0; }
  .logos__item[aria-hidden="true"] { display: none; }
}

/* ===========================================================================
   61. VACATUREFOTO'S (16 oktober 2026)
   Elke vacature met een foto (vacatures_bouwen.py, FOTO) toont die bovenaan
   het kaartje, links in de rij op het overzicht en breed in de kop van de
   detailpagina. Overal dezelfde verhouding 3:2, object-fit: cover zodat
   niets vervormt. Zonder foto: een effen vlak in blauw-100 met een
   pictogram, even groot als een foto, zodat de kaartjes gelijk blijven.
   =========================================================================== */
.vac__beeld, .vrij__beeld {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--ras-blue-100); color: var(--ras-blue-600);
}
.vac__beeld img, .vrij__beeld img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.vac__beeld--leeg, .vrij__beeld--leeg { display: grid; place-items: center; }

/* Kaartje: de foto loopt tot de randen, met de ronde hoeken van de kaart. */
.vac { --vac-pad: var(--space-5); }
.v2 .vac { --vac-pad: var(--space-6); }   /* v2.css geeft .vac deze padding */
.vac__beeld {
  margin: calc(var(--vac-pad, var(--space-5)) * -1) calc(var(--vac-pad, var(--space-5)) * -1) var(--space-1);
  border-radius: var(--v2-kaart, var(--radius-card)) var(--v2-kaart, var(--radius-card)) 0 0;
}
.vac:hover .vac__beeld img { transform: scale(1.04); }

/* Rij op het overzicht: de foto vult de linkerkant van de rij over de
   volle hoogte (bijgesneden met object-fit), met de ronde hoeken van de
   rij. Op mobiel bovenaan over de volle breedte, in 3:2. */
.vrij { --vrij-pad: var(--space-5); }
.vrij__beeld {
  margin: calc(var(--vrij-pad) * -1) calc(var(--vrij-pad) * -1) 0;
  border-radius: var(--v2-kaart, var(--radius-image)) var(--v2-kaart, var(--radius-image)) 0 0;
}
.vrij:hover .vrij__beeld img { transform: scale(1.04); }
@media (min-width: 48em) {
  .vrij { --vrij-pad: var(--space-6); }
  .vrij:has(> .vrij__beeld) { grid-template-columns: 12rem minmax(0, 1fr) 13.5rem; }
  .vrij__beeld {
    align-self: stretch; aspect-ratio: auto; min-height: 100%;
    margin: calc(var(--vrij-pad) * -1) 0 calc(var(--vrij-pad) * -1) calc(var(--vrij-pad) * -1);
    border-radius: var(--v2-kaart, var(--radius-image)) 0 0 var(--v2-kaart, var(--radius-image));
  }
  .vrij__beeld img { position: absolute; inset: 0; }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .vrij:has(> .vrij__beeld) { grid-template-columns: 10rem minmax(0, 1fr); }
  .vrij:has(> .vrij__beeld) .vrij__beeld { grid-row: 1 / span 2; }
  .vrij:has(> .vrij__beeld) .vrij__actie { grid-column: 2; padding-left: 0; border-left: 0; }
}

/* Waar het onderwerp staat, zodat een smalle of hoge uitsnede het gezicht
   houdt: de schoonmaakster staat links van het midden, de check-in agent en
   de service agent rechts. */
.vrij__beeld img[src*="schoonmaakmedewerker-cadzand"], .vac__beeld img[src*="schoonmaakmedewerker-cadzand"] { object-position: 45% 40%; }
.vrij__beeld img[src*="check-in-agent-zaventem"], .vac__beeld img[src*="check-in-agent-zaventem"] { object-position: 66% 40%; }
.vrij__beeld img[src*="service-agent-car-sharing"], .vac__beeld img[src*="service-agent-car-sharing"] { object-position: 78% 40%; }

/* Detailpagina: de foto staat naast de titel (vanaf 64em), anders onder
   de titel in een lage strook. */
.vdkop__beeld {
  justify-self: stretch; margin: var(--space-2) 0 0;
  aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--v2-kaart, var(--radius-card));
  background: var(--ras-blue-100);
  box-shadow: var(--shadow-md);
}
.vdkop__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
@media (min-width: 64em) {
  .vdkop .wrap:has(> .vdkop__beeld) { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); column-gap: var(--space-8); align-items: center; }
  .vdkop .wrap:has(> .vdkop__beeld) > * { grid-column: 1; }
  .vdkop .wrap > .vdkop__beeld { grid-column: 2; grid-row: 1 / span 4; margin: 0; aspect-ratio: 4 / 3; align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .vac__beeld img, .vrij__beeld img { transition: none; }
  .vac:hover .vac__beeld img, .vrij:hover .vrij__beeld img { transform: none; }
}

/* ===========================================================================
   62. ICONEN BIJ DE REGELS (16 oktober 2026)
   Elke vraag in "Loon, uren en de regels" op de sectorpagina's heeft links
   een klein lijnicoon in een wit vlak (_bouw/regel_iconen.py). Beweging,
   alleen transform en opacity: het icoon komt zacht op net na het blok, en
   tilt een paar pixels op wanneer je het blok aanwijst.
   =========================================================================== */
.prose:has(> .regel__ico) {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: var(--space-4); align-content: start;
}
.prose:has(> .regel__ico) > :not(.regel__ico) { grid-column: 2; }
.regel__ico {
  grid-column: 1; grid-row: 1 / span 8; align-self: start;
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border-radius: .75rem; background: var(--ras-white); color: var(--ras-blue-600);
  box-shadow: 0 8px 18px -12px rgba(17, 37, 64, .45);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.prose:hover > .regel__ico { transform: translateY(-3px); }
.js-reveal .reveal > .regel__ico { opacity: 0; transform: scale(.7); transition: opacity .5s ease .25s, transform .7s cubic-bezier(.16, 1, .3, 1) .25s; }
.js-reveal .reveal.is-in > .regel__ico { opacity: 1; transform: scale(1); }
.js-reveal .reveal.is-in:hover > .regel__ico { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .regel__ico, .js-reveal .reveal > .regel__ico { opacity: 1; transform: none; transition: none; }
}