/* ==========================================================================
   Tekstpagina's — over ons, vacatures, vacatureberichten en de juridische
   pagina's.

   Gemeten op het origineel (1905px venster): de tekst loopt over de volle
   containerbreedte van 1140px en staat links uitgelijnd; koppen ook links.

     over-ons        kop Inter Tight 56/600
     vacatures       kop Inter Tight 56/600
     vacatureberichten kop 40/500

   Ik had hier eerder een max-width van 75ch en een gecentreerde kop van 38px
   staan. Dat leest op zichzelf prettig, maar het wijkt af van het origineel:
   de tekstkolom was 765px in plaats van 1140px breed.
   ========================================================================== */
.tekstpagina { padding: var(--ruimte-lg) var(--rand-zij) var(--ruimte-xl); }
.tekstpagina h1 { margin-bottom: var(--ruimte-lg); text-align: start; }

/* Gemeten: 56px/600, links — op over-ons en vacatures */
.kop--pagina {
  font-family: var(--font-kop);
  font-size: var(--tekst-hero-h1);
  font-weight: 600;
  line-height: 1;
}
/* Gemeten: 40px/500 op de vacatureberichten */
.kop--bericht {
  font-family: var(--font-kop);
  font-size: var(--tekst-h2-groot);
  font-weight: 500;
  line-height: 1.2;
}

.tekstblok { max-width: none; }
.tekstblok p { font-size: var(--tekst-body); line-height: 1.5; }   /* gemeten 25,5px */
.tekstblok p + p { margin-top: var(--ruimte-md); }
.tekstblok strong { font-weight: 700; }
/* Gemeten: links in lopende tekst zijn zwart met onderstreping, niet bruin */
.tekstblok a { color: inherit; text-decoration: underline; }
@media (hover: hover) and (min-width: 1025px) {
  .tekstblok a:hover { color: var(--kleur-bruin); }
}

/* De juridische teksten bestaan uit losse paragrafen met genummerde artikelen;
   iets krappere regelafstand houdt ze leesbaar. */
.tekstblok--juridisch p + p { margin-top: var(--ruimte-sm); }
.tekstblok--juridisch strong { display: inline-block; margin-top: var(--ruimte-md); }

/* --- Vacatures ----------------------------------------------------------
   Gemeten op het origineel (1905px): een raster van drie kolommen van 360px
   met 30px ertussen, waarvan er twee gevuld zijn. Geen kaartachtergrond, geen
   binnenruimte; titel Inter Tight 26/700 en "Lees verder »" als gewone
   tekstlink. Ik had hier crème kaarten met knoppen van gemaakt — dat was een
   eigen ontwerp, niet het origineel.
   ------------------------------------------------------------------------ */
.vacaturelijst {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.vacaturekaart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ruimte-sm);
}
.vacaturekaart__titel {
  font-family: var(--font-kop);
  font-size: 26px;
  font-weight: 700;
  line-height: 46px;              /* gemeten */
}
.vacaturekaart__titel a { text-decoration: none; }
.vacaturekaart__tekst { font-size: var(--tekst-body); line-height: 1.5; }
/* Gemeten: Roboto 16/700 in hoofdletters, zwart, zonder onderstreping */
.vacaturekaart__meer {
  font-family: var(--font-accent);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--kleur-zwart);
  text-decoration: none;
}
@media (hover: hover) and (min-width: 1025px) {
  .vacaturekaart__titel a:hover,
  .vacaturekaart__meer:hover { color: var(--kleur-bruin); }
}
@media (max-width: 767px) {
  .vacaturelijst { grid-template-columns: 1fr; gap: var(--ruimte-lg); }
}

.kruimels { margin-bottom: var(--ruimte-md); font-size: var(--tekst-klein); }
.kruimels a { color: var(--kleur-bruin); text-decoration: none; }

/* Gemeten op het origineel: tussenkoppen 32/500 (lh 38,4) en lopende tekst
   16px met regelhoogte 24. De vacatureberichten zijn WordPress-berichten en
   staan buiten de Elementor-opmaak; het origineel valt daar terug op het
   systeemfont in #333. De rebuild houdt de huisletters aan — een systeemfont
   zou deze twee pagina's zichtbaar uit de pas laten lopen. Maten en
   regelhoogtes zijn wél 1-op-1 overgenomen. */
.vacature h2 {
  margin-top: var(--ruimte-lg);
  margin-bottom: var(--ruimte-sm);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
}
.vacature p,
.vacature li { font-size: 16px; line-height: 1.5; }
.vacature h2:first-child { margin-top: 0; }
/* De regel met functie, uren en plaats bovenaan een vacature */
.vacature__kenmerken {
  font-family: var(--font-accent);
  font-size: var(--tekst-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--kleur-bruin);
  margin-bottom: var(--ruimte-lg);
}
.vacature ul {
  list-style: disc;
  padding-inline-start: 20px;
  margin-top: var(--ruimte-sm);
}
.vacature li { margin-top: 4px; }
.vacature__actie { margin-top: var(--ruimte-lg); }

.vacaturekaart__kenmerken {
  font-family: var(--font-accent);
  font-size: var(--tekst-klein);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--kleur-bruin);
}