/* ===========================================================================
   FRANCHISEHUB, DE COMPOSITIE VAN /landing/werken-bij.html

   WAAROM DIT BESTAAT EN NIET MEER IN DE PAGINA ZELF STAAT
   Deze opmaak stond tot 02-09-2026 in een <style>-blok in werken-bij.html. Die
   pagina is het schoolvoorbeeld van wat er misgaat als een pagina niets deelt:
   zij bleef een half jaar op het oude indigo palet staan terwijl de rest van de
   site naar blauw was gegaan. Niemand zag het, want er was geen plek waar de
   twee bestanden elkaar raakten. In fa1db94 is het palet rechtgezet, maar niet
   de oorzaak: zolang zij haar eigen body, .knop en :focus-visible definieerde
   liep zij bij de volgende wijziging opnieuw weg.

   WAT ER UIT IS GEGAAN
   Alles wat landing-gedeeld.css al levert: de reset, body, a, h1/h2/h3, de
   focusring, het reduced-motion-blok en de kleuraliassen die alleen bestonden
   om oude namen (--primary, --surface, --border-1) te overbruggen. Die aliassen
   waren de laatste rest van het oude palet en zijn vervangen door de tokens
   zelf, zodat er geen tweede naam meer bestaat voor dezelfde kleur.

   Vier klassen zijn de gedeelde bouwsteen GEWORDEN in plaats van een eigen
   versie ervan: .knop-rustig is .knop knop-rand, .knop is .knop knop-vol,
   .merk span is .merk-naam en .eyebrow is .etiket. Dat betekent dat de knoppen
   op deze pagina voortaan even groot zijn als elders; dat is geen bijwerking
   maar precies de bedoeling.

   WAT ER IS GEBLEVEN, met een voorvoegsel
   De rest is van deze pagina alleen en heet nu wb-*. Twee ervan MOESTEN
   hernoemd: .hero en .slot zijn op de voorpagina al vergeven aan iets anders en
   zouden bij het laden van de gedeelde laag botsen. De andere krijgen hetzelfde
   voorvoegsel zodat die botsing ook in de toekomst niet kan ontstaan.

   VOLGORDE: landing-tokens.css, landing-gedeeld.css, dit bestand.
   =========================================================================== */

/* De regelafstand van deze pagina. De gedeelde body zet er geen, want de
   voorpagina regelt hem per tekstblok; hier is de hele pagina lopende tekst en
   dan is een waarde op body juist het goede antwoord. Als klasse en niet als
   body-regel, want body staat in de gedeelde laag. */
.wb{line-height:1.65}

/* De kopbalk en de voet van deze pagina waren tot 03-09-2026 een eigen, kleinere
   versie: alleen een link terug naar de voorpagina, geen menu. De gedachte was
   dat iemand die via een directe vacaturelink binnenkomt niet meteen de hele
   site aangeboden hoeft te krijgen. Op verzoek van de eigenaar is dat verschil
   opgeheven: de pagina draagt nu dezelfde .balk/.menu en .voet als elke andere
   publieke pagina (zie werken-bij.html zelf), en de .wb-balk/.wb-voet-regels
   die daarbij hoorden zijn hier verwijderd. */

.wb-wrap{max-width:940px;margin:0 auto;padding:0 var(--r-kant)}

/* ---------- De opening ---------- */
.wb-hero{padding:clamp(50px,7vw,96px) 0 clamp(30px,4vw,48px)}
.wb-hero h1{margin:var(--r5) 0 0;font-weight:600;font-size:clamp(30px,4.4vw,54px);line-height:1.04;max-width:20ch;text-wrap:balance}
.wb-hero p{margin-top:var(--r5);font-size:var(--t-lg);max-width:62ch}

/* Het overzicht bovenaan: vier regels waar je meteen op kunt klikken.
   Wie op zoek is naar een rol hoeft dan niet vier vacatures door te lezen. */
.wb-lijst{margin:clamp(28px,4vw,44px) 0 0;display:grid;gap:10px}
.wb-lijst a{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--r2) var(--r5);
  padding:var(--r4) var(--r5);border:1px solid var(--rand);border-radius:var(--rond);
  background:var(--papier);color:var(--ink-900);font-weight:600;
  transition:border-color var(--duur) var(--soepel),
             transform var(--duur) var(--soepel),
             background var(--duur) var(--soepel);
}
.wb-salaris{font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-400);font-weight:400;font-variant-numeric:tabular-nums}

/* ---------- Een vacature ---------- */
.wb-vacature{
  margin-top:clamp(30px,4vw,52px);scroll-margin-top:76px;
  border:1px solid var(--rand);border-radius:var(--rond);
  background:var(--wit);padding:clamp(24px,3.2vw,44px);
}
.wb-vacature h2{margin:var(--r3) 0 0;font-weight:600;font-size:clamp(23px,2.7vw,33px);line-height:1.15}
.wb-vacature h3{
  margin:var(--r7) 0 10px;font-size:var(--t-sm);font-weight:700;
  font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400);
}
.wb-vacature p{margin:0 0 var(--r3)}
/* De gedeelde laag zet list-style:none op elke ul, want in een compositie is
   een bolletje bijna altijd ongewenst. Hier is het dat wel: dit zijn echte
   opsommingen in lopende tekst en zonder markering lezen ze als losse regels. */
.wb-vacature ul{margin:0;padding-left:1.15rem;list-style:disc;display:grid;gap:var(--r2)}
.wb-vacature li{color:var(--ink-500)}

.wb-feiten{
  margin-top:var(--r5);display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
}
.wb-feit{border:1px solid var(--rand);border-radius:var(--rond-sm);background:var(--papier);padding:13px var(--r4)}
.wb-feit dt{font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400)}
.wb-feit dd{margin:5px 0 0;font-weight:600;color:var(--ink-900);font-size:var(--t-base)}

.wb-salaris-blok{
  margin-top:10px;border:1px solid var(--blauw-rand);border-radius:var(--rond-sm);
  background:var(--blauw-zacht);padding:var(--r4) var(--r5);
}
.wb-salaris-blok strong{color:var(--ink-900);font-size:var(--t-xl);font-family:var(--letter)}
.wb-salaris-blok span{display:block;margin-top:4px;font-size:var(--t-md);color:var(--ink-500)}

.wb-solliciteer{margin-top:var(--r6);padding-top:var(--r5);border-top:1px solid var(--rand)}

/* ---------- Het slot ---------- */
.wb-slot{
  margin:clamp(46px,6vw,80px) 0 0;border-radius:var(--rond);
  border:1px solid var(--rand);background:var(--papier);
  padding:clamp(28px,4vw,52px);text-align:center;
}
.wb-slot h2{margin:0;font-weight:600;font-size:clamp(24px,3vw,36px);line-height:1.1;text-wrap:balance}
.wb-slot p{margin:var(--r3) auto 0;max-width:54ch}
.wb-acties{margin-top:var(--r5);display:flex;flex-wrap:wrap;gap:var(--r3);justify-content:center}

/* De voet is de gedeelde .voet uit landing-gedeeld.css, dus er staat hier
   geen eigen versie meer. */

/* Hover staat achter @media (hover:hover), anders houdt een aanraakscherm de
   hoverstand vast na een tik en lijkt een knop ingedrukt te blijven. De
   focusring en de knopstanden komen uit de gedeelde laag en staan hier niet
   meer; dat was de derde plek waar ze bestonden. */
.wb-lijst a:active{transform:translateY(0) scale(.99)}
@media (hover:hover){
  .wb-lijst a:hover{border-color:var(--blauw);background:var(--blauw-zacht);transform:translateY(-1px)}
}