/* ===========================================================================
   site.css — de complete opmaak van de site.
   Geen Bootstrap, geen framework. Alles wat hier staat, staat hier omdat het
   gebruikt wordt.
   Mobile-first: de basisregels gelden voor een telefoon. Pas in de media
   queries onderaan komt er iets bij voor grotere schermen. Dat is de goede
   volgorde — een telefoon hoeft dan geen regels te verwerken die hij toch
   overschrijft.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Instellingen
   Custom properties (de --namen) zijn variabelen. De merkkleur staat één keer
   vast; wil je hem veranderen, dan hoef je niet de hele stylesheet door.
   De kleuren komen uit het huidige thema, niet uit de duim.
--------------------------------------------------------------------------- */
:root {
  /* Deze waarden komen ALLEMAAL uit de bron. Ze staan in het blok dat de
     themabouwer (Redux) in de pagina schrijft, of in het thema zelf.
     Niets hiervan is verzonnen — waar het vandaan komt staat erbij. */

  --merk:        #1CA9EA;   /* .header, links, actief menu-item, selectie   */
  --tekst:       #5C5C5C;   /* body { color:#5C5C5C }                       */
  --gedempt:     #777777;   /* Bootstrap .text-muted                        */
  --menu:        #818181;   /* .navbar-default .navbar-nav > li > a         */
  --menu-hover:  #333333;   /* idem :hover, :focus                          */
  --wit:         #FFFFFF;   /* body en footer.page-footer                   */
  --grijs-licht: #f1f1f1;
  --grijs-lijn:  #C2C2C2;   /* .nav-pills > li > a, .form-control:focus     */
  --groen:       #2FB215;   /* .color-green — het groene paginasjabloon     */
  --geel:        #FFD700;   /* .color-yellow — het gele sjabloon (Blockchain) */

  /* Uit de bron:
        body { font-family:'Open Sans', Arial, sans-serif;
               font-weight:300; font-size:16px; line-height:1.7 }
     Die 300 is de LICHTE snit van Open Sans. Dat maakt het verschil: bij
     gewicht 400 oogt dezelfde tekst zwaarder en groter. */
  --maat-tekst:    16px;
  --regelhoogte:   1.7;
  --tekst-gewicht: 300;

  /* Bootstrap: .container { width:1170px; padding: 0 15px }
     De tekst is dus 1140px breed, met 15px lucht aan weerszijden. */
  --breedte:          1170px;
  --container-ruimte: 15px;

  --ruimte:      1.5rem;      /* algemene tussenruimte, niet uit de bron */
  --radius:      4px;         /* Bootstrap .btn border-radius            */
}

/* ---------------------------------------------------------------------------
   2. Basis
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Uit de bron: body, html { overflow-x: hidden }
   Nodig voor de volle-breedte vlakken. Die rekenen met 50vw, en vw telt de
   breedte van de schuifbalk mee — zonder deze regel zou daardoor een
   horizontale schuifbalk verschijnen van een paar pixels.

   LET OP — hier staat clip en NIET hidden, en dat verschil is essentieel.

   Met `hidden` maakt de browser van html/body een SCROLLGEBIED. En zodra een
   voorouder een scrollgebied is, gaat `position: sticky` van .site-kop dáárin
   plakken in plaats van in het venster. Dat gebied scrolt zelf niet, dus het
   menu heeft niets om aan vast te houden en schuift gewoon mee weg.

   `clip` knipt de overflow óók af, maar maakt géén scrollgebied. Daardoor
   blijft het menu plakken én blijft de horizontale schuifbalk weg.
   (clip werkt in Chrome 90+, Firefox 81+ en Safari 16+.) */
body, html { overflow-x: clip; }

body {
  margin: 0;
  background: var(--wit);
  color: var(--tekst);
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: var(--maat-tekst);
  font-weight: var(--tekst-gewicht);
  line-height: var(--regelhoogte);
  -webkit-text-size-adjust: 100%;
}

strong {
  font-weight: 600;
}

/* Uit de bron:
      h1..h6 { font-family:'Montserrat', Arial, sans-serif; font-weight:700;
               line-height:1.3 }
      h1 55px · h2 45px · h3 35px · h4 30px
      @media (max-width:767px) → h1 35px · h2 30px · h3 20px · h4 18px

   Let op: dit is de enige plek waar ik van mobile-first afwijk. De bron zet de
   grote maten als basis en verkleint ze in een max-width-query. Ik neem die
   volgorde over, want anders wijken de omslagpunten af van het origineel. */
h1, h2, h3, h4 {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 700;
  line-height: 1.3;
  /* voorkomt één los woord op de laatste regel */
  text-wrap: balance;
}

/* De marges van de bron, letterlijk uit Bootstrap:
       h1, h2, h3 { margin-top: 20px; margin-bottom: 10px }
       h4, h5, h6 { margin-top: 10px; margin-bottom: 10px }
   Hier stond overal `0 0 0.6em`: geen ruimte bóven een kop en, afhankelijk van
   de maat, 14 tot 21px eronder. Daardoor stonden koppen te los van hun eigen
   tekst en te dicht op wat eraan voorafging. */
h1, h2, h3 { margin: 20px 0 10px; }
h4         { margin: 10px 0 10px; }
/* DE ECHTE SCHAAL VAN DE BRON. Niet uit het themabestand — daar staat
   55/45/35/30 — maar uit het blok <style id="wp-custom-css"> dat de pagina zelf
   meestuurt en dat er ná het thema overheen gaat:

       h1 { font-size: 35px }   h4 { font-size: 18px }
       h2 { font-size: 24px }   h5 { font-size: 17px; font-weight: bold }
       h3 { font-size: 20px }   h6 { font-size: 17px; font-weight: bold }

   Er staat geen mediaquery omheen, dus deze maten gelden op élke breedte —
   ook op mobiel. Nagemeten in de gerenderde bron: de kop "Boost jouw LEAN
   dienstverlening met de LCB toolbox" is daar 672px breed; bij 28px was hij
   bij ons 784px. */
h1 { font-size: 35px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5, h6 { font-size: 17px; font-weight: bold; }

/* Een sectiekop die kleiner moet ogen dan een gewone h2.
   Op zeven pagina's (trainersupport, certificeringen, leanmeter, lean-trainingen,
   de toolbox, freshers-lean en de circulariteitmeter) stonden deze koppen eerder
   als <h3>. Dat zag er goed uit, maar sloeg een niveau over: de pagina ging van
   <h1> in de blauwe balk direct naar <h3>. Google en een schermlezer lezen de
   koppen als een inhoudsopgave, en daar ontbrak dan een trede.

   Nu is het weer een <h2> — de trap klopt — met deze klasse voor de maat.
   Het NIVEAU zegt wat een kop is, de font-size zegt hoe groot hij oogt; dat
   zijn twee verschillende dingen en die hoor je niet met hetzelfde gereedschap
   te regelen. */
/* Nu de echte schaal van de bron is toegepast, is een h2 al 24px en doet
   deze klasse niets meer. Hij blijft staan omdat hij in veertien pagina's
   gebruikt wordt; weghalen zou die allemaal moeten aanpassen. */
.kop--klein { font-size: 24px;  margin-bottom: 35px;}

a {
  text-decoration: none;
}

/* ul{
  list-style: none;

} */

/* In de bron staat op elke <h2> van de homepage style="text-align: center",
   net als op de zes <h4> boven de blokken en op de intro-alinea. Dat is dus
   geen eigenschap van h2 in het algemeen — het hoort bij deze secties.
   Daarom een klasse, geen regel op het element zelf: op de contactpagina
   staan de koppen links en die moeten dat blijven. */
/* Alleen de kop en de intro-alinea, NIET de hele sectie. Zou hier
   .sectie--gecentreerd zelf tussen staan, dan erven alle alinea's de
   centrering — en die zijn in de bron links uitgelijnd. */
.sectie--gecentreerd h2,
.sectie--gecentreerd .sectie__intro { text-align: center; }

@media (max-width: 767px) {
  /* Geen eigen koppenmaten op mobiel: het blok wp-custom-css van de bron
     staat buiten elke mediaquery, dus daar zijn de maten op elk scherm gelijk. */
}

/* Uit de bron (Bootstrap): p { margin: 0 0 10px }. Hier stond 1em, en dat is
   bij 16px tekst 16px — ruim de helft meer ruimte onder elke alinea dan de
   bron heeft. Over een pagina met tien alinea's telt dat flink op. */
p { margin: 0 0 10px; }

a { color: var(--merk); }
a:hover { color: var(--merk); }

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

/* Zichtbare focus. NOOIT weghalen: wie met Tab navigeert is zonder deze rand
   volledig kwijt waar hij is. */
:focus-visible {
  outline: 3px solid var(--merk);
  outline-offset: 2px;
}

/* Respecteer de systeeminstelling "minder beweging". */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------
   3. Hulpklassen
--------------------------------------------------------------------------- */

/* Onzichtbaar voor het oog, wél voorgelezen door een schermlezer.
   Gebruik dit in plaats van display:none — dat verbergt het voor iedereen. */
.visueel-verborgen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* De skip-link: onzichtbaar tot hij focus krijgt. */
.skip-link {
  position: absolute;
  left: 0; top: -60px;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--merk);
  color: var(--wit);
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus { top: 0; color: var(--wit); }

/* Het equivalent van Bootstrap's .container uit de bron. */
/* De .container van de bron: alleen ruimte links en rechts, niets onderaan.
   Hier stond een extra padding-bottom van 10px; die kwam bij ELKE sectie
   bovenop de sectiemarges. */
.inner {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 0 var(--container-ruimte);
  /* flow-root houdt de ondermarge van de laatste alinea BINNEN de container.
     Zonder dit klapt die 10px samen met de 25px marge van de volgende sectie
     tot één keer 25px; in de bron zit er een wrapper omheen die precies dat
     voorkomt, en tellen ze op tot 35px. */
  display: flow-root;
}

.icon { width: 1.25em; height: 1.25em; }

/* ---------------------------------------------------------------------------
   4. Navigatie
--------------------------------------------------------------------------- */
.site-kop {
  position: sticky; top: 0; z-index: 50;
  background: var(--wit);
  border-bottom: 1px solid var(--grijs-lijn);
}

.nav__inner {
  max-width: var(--breedte);
  margin: 0 auto;
  /* De balk is in de bron 73px hoog: 43px logo plus 15px boven en onder.
     Hier stond 0,6rem (9,6px), waardoor de balk 62px werd. */
  padding: 15px var(--container-ruimte);
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* De bron toont het logo op width="200". Het bestand is 2176x466, dus de
   verhouding is 4,67 : 1 en de hoogte wordt 43px. */
/* Geen binnenruimte: in de bron staat het logo tegen de linkerrand van de
   container (nagemeten x131, en de container begint op x130). Met 15px padding
   stond het bij ons op x146. */
.nav__logo { margin-right: auto; padding: 0; }
.nav__logo img { width: 200px; height: auto; }

.nav__toggle {
  display: grid; place-items: center;
  width: 44px; height: 44px;          /* 44px: het minimum voor een vingerdoel */
  background: none; border: 0; padding: 0;
  color: var(--tekst); cursor: pointer;
}
.nav__toggle .icon { width: 26px; height: 26px; }
.nav__toggle-close { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-open  { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-close { display: block; }

/* Op mobiel: menu dicht tenzij de knop het opent.
   We gebruiken hier het attribuut aria-expanded van de KNOP als schakelaar —
   via de klasse .nav--open op de lijst. Zo is er één bron van waarheid. */
.nav__lijst {
  display: none;
  list-style: none;
  margin: 0; padding: 0;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--wit);
  border-bottom: 1px solid var(--grijs-lijn);
  box-shadow: 0 8px 16px -12px rgba(0,0,0,.4);
}
.nav__lijst.is-open { display: block; }

.nav__link {
  display: flex; align-items: center; gap: 0.35rem;
  width: 100%;
  padding: 0.85rem var(--ruimte);
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  /* Uit de bron: .navbar-default .navbar-nav > li > a { color:#818181 } */
  color: var(--menu);
  text-decoration: none;
  background: none; border: 0;
  text-align: left;
  cursor: pointer;
  text-transform: uppercase;

}
/* Uit de bron: :hover en :focus geven #333333, geen blauw. */
.nav__link:hover,
.nav__link:focus { background: var(--grijs-licht); color: var(--menu-hover); }

/* Waar je nu bent. Uit de bron:
      .navbar-default .navbar-nav > .active > a { color:#FFFFFF; background-color:#1CA9EA } */
.nav__link[aria-current="page"],
.nav__sublink[aria-current="page"],
.nav__link--ouder {
  color: var(--wit);
  background: var(--merk);
  font-weight: 700;
}

/* Anders wint de hover-regel hierboven en wordt de knop bij aanwijzen weer
   grijs, terwijl je nog steeds op die pagina staat. */
.nav__link--ouder:hover,
.nav__link--ouder:focus {
  color: var(--wit);
  background: var(--merk);
}

.nav__sub {
  display: none;
  list-style: none; margin: 0; padding: 0;
  background: var(--grijs-licht);
}
.nav__sub.is-open { display: block; }

.nav__sublink {
  display: block;
  padding: 0.7rem var(--ruimte) 0.7rem 2.5rem;
  font-size: 0.9rem;
  /* Bootstrap-uitklapmenu's: .dropdown-menu > li > a { color:#333 } */
  color: var(--menu-hover);
  text-decoration: none;
}
.nav__sublink:hover,
.nav__sublink:focus { color: var(--merk); }

/* De vlaggetjes van de taalwisselaar. 18x12 px, zoals de bestanden zelf. */
.vlag {
  display: inline-block;
  width: 18px; height: 12px;
  vertical-align: baseline;
}
.nav__sublink { display: flex; align-items: center; gap: 0.5rem; }

.nav__knop .icon { transition: transform 0.15s; }
.nav__knop[aria-expanded="true"] .icon { transform: rotate(180deg); }

/* ---------------------------------------------------------------------------
   5. Hero
--------------------------------------------------------------------------- */
/* Uit de bron: .header, .sub-header { color:#FFF; background-color:#1CA9EA }
   Dat blauwe vlak ligt ONDER de foto. Je ziet het terwijl de foto nog laadt,
   en langs de randen als de verhoudingen niet precies uitkomen. */
.hero {
  position: relative;
  background-color: var(--merk);
  color: var(--wit);
}

/* De hoogte van de hero komt in de bron NIET uit een vaste maat, maar uit de
   binnenruimte om de tekst heen:
        .vc_custom_1586265354578 { padding-top: 150px; padding-bottom: 150px }
   Daarom staat de foto hier absoluut op de achtergrond en bepaalt het
   tekstblok de hoogte — precies zoals in het origineel. */
/* De foto staat als ACHTERGROND en niet als <img>, omdat de bron dat ook doet
   én omdat het verschil zichtbaar is:

       .slider-bg { background: url(...) no-repeat center top;
                    background-size: cover;
                    background-attachment: fixed; }

   Die `fixed` is het punt. Daarmee schaalt de browser de foto op het VENSTER
   in plaats van op het hero-vlak. Bij een venster van 1400x2400 wordt de foto
   dus 3200x2400 en zie je het middenstuk sterk uitvergroot; met een gewone
   <img> op object-fit:cover werd hij 1400x1050 en zag je veel meer van de
   foto. Dat was het zichtbare verschil met de bron.

   De bron zet `fixed` alleen op grote schermen terug naar normaal:
       @media (max-width: 767px) { .header.slider-bg { background-attachment: initial } }
   Op mobiel is `fixed` namelijk traag en op iOS onbetrouwbaar. Zelfde grens hier.

   De foto is puur decoratief (in de bron staat er geen alt-tekst bij), dus er
   gaat niets verloren door hem uit de HTML te halen.

   HET FORMAAT VAN DE FOTO
   Hier stond eerst de 1024x768-versie, om het gewicht van de pagina laag te
   houden. Dat was zichtbaar: door `fixed` schaalt de browser de foto op het
   venster, en op een scherm van 1400px wordt een foto van 1024px 1,4x
   uitgerekt — op een Retina-scherm bijna 3x. Hij oogde dus zacht terwijl de
   bron scherp bleef.

   De bron gebruikt het ORIGINEEL (4032x3024):
       .vc_custom_1604407966718 { background-image:
             url(.../toolboxvoordienstverlening.jpg?id=3660) !important }
   WordPress heeft van deze foto geen tussenmaat gemaakt — 150, 300, 768 en
   1024 bestaan, 1536 en 2048 niet — dus daar viel niets tussen te kiezen.

   LET OP: dat bestand is 6,4 MB. Op een trage verbinding blijft de balk dus
   even leeg. Dat is de prijs van precies dezelfde scherpte als de bron; een
   eigen tussenmaat van 1920px zou ongeveer 460 kB zijn. */
.hero__beeld {
  position: absolute; inset: 0;
  background-image: url('/wp-content/uploads/2018/12/toolboxvoordienstverlening.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

@media (max-width: 767px) {
  .hero__beeld { background-attachment: scroll; }
}

.hero__tekst {
  position: relative;                 /* boven de foto */
  /* Nagemeten in de bron: de hero is 293px hoog, met 106px boven de koptekst
     en 156px eronder. Bij 150px boven én onder werd hij 347px. De bron geeft
     zelf 150px op (.vc_custom_1586265354578), maar rendert asymmetrisch —
     waarschijnlijk door de regelhoogte van de h1 daar. Deze maten volgen het
     GERENDERDE resultaat, want dat is wat je ziet. */
  padding: 96px var(--container-ruimte) 150px;
  /* De bron legt hier een egale donkere laag overheen:
        .background-opacity { background: rgba(0, 0, 0, 0.3); }
     Dat is één vlakke laag over het hele beeld, geen verloop. */
  background: rgba(0, 0, 0, 0.3);
}
.hero__tekst h1 {
  max-width: 16em;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  font-size: 35px;
  max-inline-size: var(--breedte);
  color: var(--wit);
  /* Geen text-shadow: die heeft de bron ook niet. */
}

/* ---------------------------------------------------------------------------
   5b. Titelbalk van binnenpagina's
   Uit de bron: .header, .sub-header { color:#FFF; background-color:#1CA9EA }
--------------------------------------------------------------------------- */
/* Nagemeten in de bron: de zichtbare balk is 144px hoog. Met 40px boven kwamen
   wij op 148. De bron geeft zelf 80px op (.sub-header { padding: 80px 0 30px }),
   maar daar ligt de vaste menubalk overheen; wat je ziet is het verschil. */
.sub-kop {
  background-color: var(--merk);
  color: var(--wit);
  padding: 36px 0 30px;
}
.sub-kop__titel { margin: 0px; color: var(--wit);font-size: 35px;   }
@media (max-width: 768px) {
  .sub-kop__titel { font-size:20px }
}

/* De titel komt binnenzakken, net als in de bron. Daar staat er:

       <h1 class="page-title wow fadeInDown">

   en doet WOW.js het werk, met animate.css erachter:

       .animated { animation-duration: 1s; animation-fill-mode: both }
       @keyframes fadeInDown {
           0%   { opacity: 0; transform: translate3d(0, -100%, 0) }
           100% { opacity: 1; transform: none }
       }

   Bij ons kan dat zonder JavaScript. WOW.js is er om te wachten tot een element
   in beeld scrollt, maar deze titel staat bij het laden altijd al in beeld — er
   valt dus niets af te wachten. Dat scheelt een bibliotheek, en het werkt ook
   als er iets misgaat met het script; in de bron verbergt WOW.js de titel juist
   met JavaScript en laat hem pas bij het animeren weer zien.

   De titel schuift van één titelhoogte hoger naar zijn plek. Onderweg gaat hij
   achter de menubalk langs: die is sticky, heeft een witte achtergrond en een
   hogere z-index, dus je ziet hem er netjes onderuit komen. */
@keyframes in-omlaag {   /* fadeInDown uit animate.css */
  from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to   { opacity: 1; transform: none; }
}
.sub-kop__titel { animation: in-omlaag 1s both; }

/* De bron zet de animaties uit op telefoons en tablets:

       new WOW({ animateClass: 'animated', offset: 100, mobile: false })

   Dat is daar een controle op het apparaat via de user-agent. In CSS bestaat
   die controle niet; dit is de dichtstbijzijnde vertaling: een scherm zonder
   muisaanwijzer dat je met je vinger bedient. Een laptop met aanraakscherm
   valt er buiten, want die meldt nog steeds een fijne aanwijzer. */
@media (hover: none) and (pointer: coarse) {
  .sub-kop__titel { animation: none; }
}

/* LET OP — bewuste keuze, in overleg gemaakt: hier staat GEEN
   @media (prefers-reduced-motion: reduce), terwijl alle andere animaties op
   deze site die wel hebben. De bron houdt geen rekening met die voorkeur en
   hier volgen we de bron. Omdraaien is één blok:

       @media (prefers-reduced-motion: reduce) {
         .sub-kop__titel { animation: none; }
       } */

.kruimels { margin-top: 0.5rem; font-size: 0.9rem; }
.kruimels ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
/* Het scheidingsteken via CSS, niet als los tekstteken in de HTML. Zo leest
   een schermlezer geen losse ">" voor tussen elke stap. */
/* Uit de bron (Bootstrap):
      .breadcrumb > li + li:before { padding: 0 5px; color:#ccc; content:"/\00a0" }
   Dus een schuine streep, geen chevron. */
.kruimels li + li::before { content: '/'; padding: 0 5px; opacity: 0.7; }
.kruimels a { color: var(--wit); }
.kruimels [aria-current="page"] { font-weight: 700; }

/* Een <h2> die eruitziet als een <h1>. Gebruikt waar de bron twee <h1>-en op
   één pagina heeft: visueel gelijk, technisch één hoofdkop per pagina. */
.kop--groot { font-size: 35px; text-align: center; }

/* ---------------------------------------------------------------------------
   6. Secties
--------------------------------------------------------------------------- */
/* Uit de bron: elke sectie heeft padding-top: 25px. De sectie met de zes
   blokken heeft daarnaast 25px onder en 25px marge boven en onder. */
.sectie { padding: 45px 0 0; }
.sectie--ruim   {  padding: 25px 0; }
.sectie--accent { background: var(--grijs-licht); }
/* In de bron staan de kop en de intro in twee aparte blokken, en het KOPBLOK
   heeft 25px binnenruimte onderaan (.vc_custom_1714027698294). Samen met de
   10px ondermarge van de h2 geeft dat 35px tussen de twee.

   Padding en geen margin: twee aangrenzende marges klappen samen tot de
   grootste van de twee, terwijl padding erbij optelt.

   En de kop verliest zijn eigen ondermarge: in de bron is hij het LAATSTE
   element in zijn blok, en dan valt die marge weg. De 25px komt dus puur van
   de blokvulling. Nagemeten in de bron: 34px tussen de onderkant van de
   koptekst en de bovenkant van de introtekst. */
.sectie__intro { color: var(--tekst); padding-top: 25px; }
h1:has(+ .sectie__intro),
h2:has(+ .sectie__intro),
h3:has(+ .sectie__intro) { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   7. Toolbox

   De bron gebruikt vc_col-sm-4: dat is Bootstrap's 12-koloms raster, 4/12 per
   blok. Dus precies DRIE kolommen vanaf 768px, en één daaronder. Eerder had ik
   auto-fit staan; die kiest zelf en kan er ook 2 of 4 maken.
--------------------------------------------------------------------------- */
.toolbox {
  list-style: none; padding: 0;
  /* De blokken van de tweede rij hebben in de bron 25px marge onder zich
     (.vc_custom_1680168901371 en .vc_custom_1697030450804). Die ruimte telt mee
     onder de laatste rij. */
  margin: 0 0 25px;
  display: grid;
  /* 30px tussen de kolommen: dat is de Bootstrap-afstand (row -15px, kolom
     +15px). Verticaal 35px, want de bron bouwt de rijafstand op uit marges op
     losse blokken (vc_custom_1680168901371 en 1697030450804, elk 25px) boven
     op de hoogte van de vorige rij. Nagemeten in de bron: 51px tussen de
     onderkant van rij 1 en de bovenkant van rij 2; met 30px kwamen wij op 46. */
  gap: 35px 30px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .toolbox { grid-template-columns: repeat(3, 1fr); 
}
}


#kop-voordelen{
  padding-top:25px;
}
/* GELIJKE HOOGTES — dit is een wijziging, geen eigenschap van de bron.
   De bron gebruikt float-kolommen (.vc_col-sm-4) zonder vc_row-flex; daar is
   elk blok zo hoog als zijn eigen inhoud en lopen de randen dus niet gelijk.

   Hoe het hier werkt, in drie stappen:
   1. Een grid maakt alle cellen in een rij standaard even hoog (align-items
      staat op stretch). Het <li> is dus al even hoog als zijn buren.
   2. Het <li> wordt een flex-kolom, zodat de knop en de tekst die hoogte
      onder elkaar kunnen verdelen.
   3. De tekst krijgt flex: 1 — "neem alle ruimte die overblijft". Daardoor
      eindigen alle grijze vlakken op dezelfde lijn.                        */
.toolbox__item {
  display: flex;
  flex-direction: column;
}
.sectie-tekst-box{
  padding-bottom: 20px;
}
.sectie__intro-l{
  text-align: center;
}
.toolbox__kop { margin: 0; }

/* De omschrijving onder de knop. Uit de bron:
      .vc_custom_1662630735644 { padding: 10px; background-color: #f1f1f1 }
   Elk van de zes blokken heeft dat grijze vlak met 10px binnenruimte. */
.toolbox__tekst {
  flex: 1;                            /* vult de resterende hoogte — stap 3 */
  margin: 0;
  padding: 10px;
  background-color: var(--grijs-licht);
}

/* Het blauwe vlak. Overgenomen uit de bron:
      .btn      { padding: 6px 12px; font-size: 14px; border: 1px solid transparent;
                  border-radius: 4px; text-align: center }
      .btn-lg   { padding: 10px 16px; font-size: 18px; border-radius: 6px }
      .btn-block{ display: block; width: 100% }
      .btn-success       { background-color: #1CA9EA; border-color: #1CA9EA; color: #fff }
      .btn-success:hover { background-color: #FFF; border-color: #1CA9EA; color: #1CA9EA }
   Alle maten zijn die van het origineel. */

   .blokknop_container{
    display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
  padding-top:35;
   }
  

.blokknop {
  /* flex in plaats van block, zodat de tekst verticaal gecentreerd staat
     wanneer de knop hoger is dan één regel. */
  display: flex;
  align-items: center;
  justify-content: center;
  /* De maten van de bron, opgeteld uit de cascade:
         .btn      { border-radius: 3px; font-weight: 600; padding: 7px 20px;
                     border-width: 0 }
         .btn-lg   { padding: 10px 16px; font-size: 18px; line-height: 1.3333333 }
         .btn-success { border-width: 2px }        ← komt ná .btn, wint dus
     Hoogte: 18 × 1,3333 = 24, plus 2 × 10 binnenruimte, plus 2 × 2 rand = 48px.
     Nagemeten in de bron: 48px.

     Hier stond een min-height van 70px — een eigen toevoeging om de zes
     knoppen op de homepage even hoog te houden als een lang label over twee
     regels breekt. Dat maakte elke knop 22px te hoog. Weg. */
  width: 100%;
  padding: 10px 16px;
  background-color: var(--merk);
  border: 2px solid var(--merk);
  border-radius: 3px;
  color: var(--wit);
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 18px;
  /* In de bron staat font-weight: 600, maar daar wordt Montserrat alleen in 400
     en 700 geladen (Google Fonts: Montserrat:400,700). Een gevraagde 600 komt
     dan uit op de 700 die er wél is. Wij laden een variabel bestand met álle
     gewichten, en dan is 600 ook echt 600 — een slag dunner dan de bron.
     Vandaar hier 700: dat is wat je in de bron ziet. */
  font-weight: 700;
  line-height: 1.3333333;
  text-align: center;
  text-decoration: none;
  /* LET OP: dit is GEEN eigenschap van de bron. Daar staat nergens een
     text-transform en in de HTML staat letterlijk "trainersupport" met kleine
     letter. Dit is een bewuste wijziging op verzoek. Weghalen = deze regel. */
  text-transform: uppercase;
  /* De omkering bij aanwijzen laten we zacht verlopen. */
  transition: background-color 0.15s, color 0.15s;
}

/* Een <strong> in een knop maakt de tekst DUNNER, niet dikker: de algemene
   regel strong { font-weight: 600 } wint dan van de 700 van de knop zelf. */
.blokknop strong { font-weight: inherit; }

/* Bij aanwijzen én bij toetsenbordfocus keert het vlak om: wit met blauwe
   tekst. Alleen :hover zou betekenen dat wie met Tab navigeert niets ziet
   gebeuren. */
.blokknop:hover,
.blokknop:focus-visible {
  background-color: var(--wit);
  border-color: var(--merk);
  color: var(--merk);
}

/* De voettekst gebruikt dezelfde knop, maar zónder btn-block: hij loopt daar
   niet over de volle breedte. */
/* De knop in de voettekst deelt de opmaak, maar niet de volle breedte en niet
   de minimumhoogte: die twee horen bij de toolbox-blokken. In de bron heeft
   deze knop dan ook geen btn-block. */
.blokknop--inline {
  display: inline-flex;
  width: auto;
  min-height: 0;
}


/* ---------------------------------------------------------------------------
   8. Referenties
--------------------------------------------------------------------------- */
.referenties {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.referentie {
  display: flex; flex-direction: column;
  padding: 1.5rem;
  background: var(--grijs-licht);
  border-radius: var(--radius);
}

.referentie__citaat { margin: 0 0 1.25rem; padding: 0; flex: 1; }
.referentie__citaat p {
  margin: 0;
  font-size: 0.97rem;
  color: var(--tekst);
}
.referentie__citaat p::before { content: '\201C'; }
.referentie__citaat p::after  { content: '\201D'; }

/* .referentie__persoon en .referentie__bedrijf stonden hier; die hoorden bij
   de oude kaartopmaak van de homepage en worden nergens meer gebruikt. De
   kaart zelf (.referentie met grijs vlak) blijft in gebruik op de homepage.
   De citaten op de trainingspagina's zijn een ánder component in de bron
   (.cth_testi) en staan daarom apart, bij .citaten verderop. */

/* De referentie op de HOMEPAGE. Daar zet de bron alles in één doorlopende
   alinea, met de foto eronder:

       <p><a><strong>Albert Abbing</strong></a> | &#8220;citaat&#8221;</p>
       <div class="slide-img"><img width="200" height="200"></div>

   Geen kaart, geen grijs vlak, geen rond fotootje. De citaten op de
   trainingspagina's zijn in de bron een ander component (.cth_testi) en houden
   daarom de kaartopmaak hierboven — vandaar deze modifier. */
/* De afstand tussen de kop en de eerste referentie, opgebouwd zoals in de bron:
       .vc_custom_1680169612997 { padding-bottom: 25px }   op het kopblok
       .slide-item              { margin: 50px 0 }          op de slide zelf
   Samen 75px. De kop verliest daarbij zijn eigen ondermarge, want hij is in de
   bron het laatste element in zijn blok. Nagemeten: 85px tussen de onderkant
   van de koptekst en de bovenkant van de eerste regel. */
/* De bron zet 50px onder de slide (.slide-item { margin: 50px 0 }). Hier is
   het 23px, en dat verschil is geen slordigheid: de slidertrack is zo hoog als
   de LANGSTE referentie, en die valt bij ons 27px hoger uit omdat de tekst op
   deze breedte anders afbreekt. Die 27px zit dus al onder de foto van de eerste
   slide. Samen met de 40px hieronder komt de afstand foto→bolletjes op 90px,
   precies als in de bron. */
.referenties--doorlopend { grid-template-columns: 1fr; gap: 0; margin: 0 0 23px; }
/* De lijst zit in een .slider-div, dus de afstand hoort daarop en niet op de
   lijst zelf — anders grijpt de + hieronder niet. */
h2:has(+ .slider) { margin-bottom: 0; padding-bottom: 25px; }
h2 + .slider { margin-top: 50px; }

.referentie--doorlopend {
  display: block;
  padding: 0;
  background: none;
  border-radius: 0;
}

.referentie__regel { margin: 0 0 1.5rem; }

/* De naam is in de bron een gewone link, dus in de merkkleur, met <strong>. */
.referentie__naam { font-weight: 700; }

.referentie__streep { color: var(--tekst); }

/* <q> zet zelf aanhalingstekens, maar wélke hangt af van de taal van de
   pagina: een browser kiest voor nl-NL soms lage komma's. De bron gebruikt
   overal de ronde dubbele, dus die leggen we vast. */
.referentie__tekst { quotes: none; }
.referentie__tekst::before { content: '\201C'; }
.referentie__tekst::after  { content: '\201D'; }

.referentie__foto { margin: 0; }
.referentie__foto img { width: 200px; height: auto; }

/* ---------------------------------------------------------------------------
   8b. De referentie-slider

   Let op de klasse .is-actief: die zet site.js erop. Alles hieronder werkt dus
   alleen als het JavaScript draait. Zonder JS blijft .referenties het gewone
   raster van hierboven en staan alle zeven referenties onder elkaar.
--------------------------------------------------------------------------- */
.slider { position: relative; }

/* Het kijkvenster. Wat buiten dit vlak valt, is onzichtbaar — zo zie je één
   referentie tegelijk terwijl ze in werkelijkheid naast elkaar staan. */
.slider__venster { overflow: hidden; }

.slider.is-actief .referenties {
  display: flex;                    /* van raster naar één rij */
  grid-template-columns: none;
  gap: 0;
  transition: transform 0.5s ease;
}

/* flex: 0 0 100% = niet groeien, niet krimpen, precies de volle breedte.
   Zeven slides zijn samen dus 700% breed; we schuiven met transform. */
.slider.is-actief .referentie { flex: 0 0 100%; min-width: 0; }

/* De bediening onder de slider. Uit de bron:
       .flex-control-nav    { width: 100%; text-align: center }
       .flex-control-nav li { margin: 0 6px; display: inline-block }
   Geen pijlen: die maakt de bron wel aan maar verbergt ze met
   .flex-direction-nav { display: none }. Zie de toelichting in site.js. */
.slider__bediening {
  display: flex; align-items: center; justify-content: center;
  /* De bron hangt de bolletjes 40px onder de slider:
         .flex-control-nav { position: absolute; bottom: -40px }
     Samen met de 50px onder de slide is dat 90px onder de foto. */
  margin-top: 40px;
}

.slider__bolletjes { display: flex; list-style: none; margin: 0; padding: 0; }

/* In de bron hangen de bolletjes BUITEN de slider (position: absolute;
   bottom: -40px), waardoor het grijze vlak er nog 46px onder doorloopt. Bij
   ons staan ze gewoon in de tekststroom, dus die ruimte komt hier als
   binnenruimte onder de sectie. */
.sectie:has(.slider) { padding-bottom: 36px; }

/* Uit de bron:
       .flex-control-paging li a            { width:11px; height:11px;
                                              border-radius:20px;
                                              background: rgba(255,255,255,.5) }
       .flex-control-paging li a.flex-active{ background: rgba(255,255,255,.9) }
   Het zijn dus witte bolletjes met doorzichtigheid, op het grijze vlak. Het
   actieve bolletje is nauwelijks lichter dan de rest — dat is hoe de bron het
   doet. Voor wie met het toetsenbord navigeert staat er wél een zichtbare
   focusrand omheen (zie de :focus-visible-regel onderaan dit bestand). */
.slider__bolletje {
  display: block;
  width: 11px; height: 11px;
  padding: 0;
  background: rgba(255, 255, 255, 0.5);
  border: 0; border-radius: 20px;
  box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.3);
  cursor: pointer;
}
.slider__bolletje:hover { background: rgba(255, 255, 255, 0.7); }
.slider__bolletje[aria-current="true"] {
  background: rgba(255, 255, 255, 0.9);
  cursor: default;
}

/* 6px aan weerszijden, precies zoals .flex-control-nav li in de bron. */
.slider__bolletjes li { display: flex; margin: 0 6px; }

/* Het aanraakvlak groter maken dan het bolletje, zónder de rij breder te maken.
   Een onzichtbaar vlak op ::before steekt buiten de knop uit en vangt de tik;
   het telt niet mee voor de indeling, dus de bolletjes blijven op hun plek.
   Zonder dit is het doel 11px — te klein om met een vinger te raken. */
.slider__bolletje { position: relative; }
.slider__bolletje::before {
  content: '';
  position: absolute;
  top: -9px; right: -6px; bottom: -9px; left: -6px;
}

/* Bij "minder beweging" schuift er niets meer — het wisselen gebeurt dan
   ineens in plaats van met een animatie. */
@media (prefers-reduced-motion: reduce) {
  .slider.is-actief .referenties { transition: none; }
}

/* ---------------------------------------------------------------------------
   9. Voettekst
--------------------------------------------------------------------------- */
/* Uit de bron:
      footer.page-footer { background:#FFFFFF }
      footer             { text-align:center; padding:40px 0 30px }
   De tekstkleur staat er niet apart bij; die erft van body (#5C5C5C). */
/* De maten komen uit de bron, nagemeten op 1440px. Daar is de voettekst een
   rij widgets zonder eigen ruimte; alle lucht komt van de marges van de blokken
   zelf. Van de bovenkant van de voettekst af:

       40px  binnenruimte boven
       10px  marge boven de CONTACT-knop
       48px  de knop
       37px  tot de icoontjes  (10px margin-bottom + een lege regel van 27px)
       53px  de icoontjes
       21px  tot de keurmerken
      150px  de keurmerken
       27px  de regel met de twee links
       27px  de copyrightregel
       10px  marge eronder
       30px  binnenruimte onder
      -----
      453px  totaal

   Vandaar gap:0 op de grid: elk blok regelt zijn eigen afstand, want ze zijn
   alle vier verschillend. Met één gemeenschappelijke gap kwam de voettekst
   99px te hoog uit. */
/* De 50px erboven zit in de bron niet in de voettekst zelf maar in de wrapper
   om de pagina-inhoud: .cth-page { margin: 50px 0 }. Het resultaat is
   hetzelfde — een witte strook tussen het laatste vlak en de CONTACT-knop — en
   zo hoeft niet elke pagina er zelf aan te denken.

   Uitzondering: /contact/. Daar loopt het grijze vlak in de bron door tot tegen
   de voettekst. Die pagina zet .zonder-voetruimte op <main>. */
.site-voet {
  background: var(--wit);
  color: var(--tekst);
  margin-top: 50px;
  padding: 40px 0 30px;
  text-align: center;
}
.zonder-voetruimte + .site-voet { margin-top: 0; }
.site-voet__inner {
  max-width: var(--breedte); margin: 0 auto; padding: 0 var(--container-ruimte);
  display: grid; gap: 0; justify-items: center;
}

.site-voet__contact { margin: 10px 0 37px; }

/* Uit de bron:
      .social-icons        { padding-bottom: 20px }
      .social-icons a      { display:inline-block; padding: 0 5px }
      .social-icons a i    { background-color: rgba(0,0,0,.1); color: rgba(0,0,0,.2);
                             font-size: 1.55em; width: 2.15em; height: 2.15em;
                             line-height: 2.15em; border-radius: 50% }
      .social-icons a:hover{ opacity: .8 }
   De maten zijn in em ten opzichte van 1.55em, dus 2.15 × 1.55em ≈ 3.33em. */
/* De tussenruimte van 18,67px is nagemeten: in de bron staat tussen twee
   icoonlinks een leeg <a> van 10px plus de spaties eromheen. Vier icoontjes van
   63px komen zo op een rij van 308px uit. */
.site-voet__iconen {
  list-style: none; margin: 0 0 21px; padding: 0;
  display: flex; gap: 18.67px;
}
.site-voet__iconen li { padding: 0 5px; }
.site-voet__iconen a {
  display: grid; place-items: center;
  width: 3.33em; height: 3.33em;
  background-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
}
.site-voet__iconen a:hover { opacity: 0.8; }
.site-voet__iconen .icon { width: 1.55em; height: 1.55em; }

/* De bron toont deze op width="150" en width="175". */
.site-voet__keurmerken {
  list-style: none; margin: 0; padding: 0;
  /* 5px, niet 20px: in de bron staan de twee beelden bijna tegen elkaar aan
     (nagemeten x555+150 en x710). */
  display: flex; gap: 5px; align-items: center; flex-wrap: wrap;
  justify-content: center;
}
.site-voet__keurmerken img { height: auto; }

.site-voet__links { margin: 0; }
.site-voet__klein { margin: 0 0 10px; }
/* Bootstrap: small { font-size: 85% }. De browser zelf houdt 83,33% aan, en
   dan wordt de copyrightregel net iets te klein. */
.site-voet__klein small { font-size: 85%; }

/* Bootstrap: .text-muted { color:#777 } */
.tekst-gedempt { color: var(--gedempt); }

/* ---------------------------------------------------------------------------
   10. Vanaf tablet: het menu wordt een horizontale balk
--------------------------------------------------------------------------- */
@media (min-width: 62rem) {         /* 992px */
  .nav__toggle { display: none; }

  .nav__lijst {
    display: flex;
    position: static;
    border: 0; box-shadow: none;
    background: none;
    align-items: center;
    gap: 0.15rem;
    /* De binnenruimte van het laatste menu-item buiten de container trekken,
       zodat de TEKST tegen de rechterrand uitkomt in plaats van de knop.
       Bootstrap doet dat in de bron met .navbar-right { margin-right: -15px }.
       Nagemeten: de bron eindigt op x1269, precies de containerrand. */
    margin-right: -0.85rem;
  }

  .nav__item { position: relative; }

  .nav__link {
    width: auto;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius);
  }
  /* Op desktop is het actieve item in de bron een blauw vlak met witte tekst
     (zie de basisregel hierboven). Geen extra streepje dus. */

  .nav__sub {
    position: absolute; top: 100%; left: 0;
    min-width: 260px;
    background: var(--wit);
    border: 1px solid var(--grijs-lijn);
    border-radius: var(--radius);
    box-shadow: 0 10px 24px -14px rgba(0,0,0,.5);
    padding: 0.35rem 0;
  }
  .nav__sublink { padding: 0.55rem 1rem; }

  .site-voet__inner { justify-items: center; }
}


/* ---------------------------------------------------------------------------
   11. Contactpagina
--------------------------------------------------------------------------- */
/* De contactpagina gebruikt 50px sectieruimte, niet de 25px van de homepage.
   Uit de bron: .vc_custom_1592812339532 { padding: 50px 0 } */
.sectie--50 { padding: 50px 0; }

/* Telefoon / E-mail / Bericht.
   In de bron zijn dit drie gewone kolommen (vc_col-sm-4) met platte tekst.
   GEEN kaart, geen rand, geen eigen achtergrond — de sectie eromheen is al
   grijs. Eerder had ik hier witte kaartjes met randen van gemaakt; dat stond
   nergens in de bron. */
.contactkolommen {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 30px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .contactkolommen { grid-template-columns: repeat(3, 1fr); }
}
.contactkolommen h2,
.contactkolommen h3 { margin-top: 20; font-size: 24px; }
.contactkolommen p:last-child { margin-bottom: 0; }

/* Definitielijst voor de bedrijfsgegevens: <dt> is de term, <dd> de waarde.
   Dat is precies wat KvK-nummer / 64800423 is — een tabel zou hier te veel
   zijn, twee losse <p>'s zouden het verband niet vastleggen. */
.gegevens {
  display: grid;
  grid-template-columns: max-content 2fr;
  gap: 0.35rem 1.5rem;
  margin: 0;
}
.gegevens dt { font-weight: 700; }
.gegevens dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   13. De voordelen-sectie

   Uit de bron:
      .vc_custom_1680170580223 { margin-right:45px; margin-bottom:25px; margin-left:15px }
      .vc_custom_1673969720779 { padding-bottom:25px }   ← onder de kop
      .vc_custom_1678878752151 { padding-bottom:-25px }  ← negatieve padding
                                  bestaat niet; browsers negeren dit. Niet
                                  overgenomen.
--------------------------------------------------------------------------- */
/* LET OP: deze marges horen op een blok BINNEN de container, niet op de
   container zelf. De container centreert met "margin: 0 auto"; zou je daar
   vaste marges op zetten, dan overschrijven die de auto en staat het blok
   niet meer in het midden. In de bron zijn het dan ook twee elementen:
   .container (centreert) en .vc_column-inner (heeft de marges). */
.voordelen {
  margin-right: 45px;
  margin-bottom: 25px;
  margin-left: 15px;
}
/* Uit de bron: .vc_custom_1673969720779 { padding-bottom: 25px } op het
   kopblok. De kop zelf is daar het laatste element in dat blok en verliest
   zijn eigen ondermarge; anders zou het 35px worden in plaats van 25px. */
.voordelen h2 { padding-bottom: 25px; margin-bottom: 0; }

/* Op een smal scherm zou 45px rechts en 15px links de tekst scheef trekken.
   Daar valt hij terug op de gewone binnenruimte van de container. */
@media (max-width: 767px) {
  .voordelen { margin-right: 0; margin-left: 0; }
}

/* De gecentreerde paginakop, zoals op /lcb/, /trainersupport/ en
   /certificeringen/. In de bron staat die inhoud in een wrapper met
   .cth-page { margin: 50px 0 }, boven op de 25px binnenruimte van de sectie.
   Nagemeten in de bron: 75px tussen de blauwe balk en de koptekst, en 68px
   tussen de kop en de eerste alinea. */
.title{
  text-align: center;
  /* 30px boven een kop midden op de pagina. De EERSTE kop krijgt 45px: in de
     bron zit de hele pagina-inhoud in .cth-page { margin: 50px 0 }, en die
     extra ruimte geldt één keer, bovenaan — niet bij elke sectie. */
  margin-top: 30px;
  /* 35px onder de kop. Nagemeten in de bron op /trainersupport/: 39px tussen
     de onderkant van de koptekst en de eerste regel eronder. */
  margin-bottom: 35px;
}

/* Op /lcb/ is dat gat 68px in plaats van 39px. Het verschil zit in de wrapper
   van het VOLGENDE blok: daar volgt een tweede .wpb_text_column, en die brengt
   zijn eigen ondermarge mee. Op /trainersupport/ volgt geen tekstblok maar een
   kolom in dezelfde rij, en dan valt die marge weg. */
.lcb-intro .title { margin-bottom: 35px; }
.lcb-intro--kop-apart .title { margin-bottom: 60px; }

/* De eerste kop op de pagina, met de 50px van .cth-page erbij.
   Nagemeten in de bron: 75px tussen de blauwe balk en de koptekst. */
main > .sectie:first-of-type .title { margin-top: 45px; }

/* Dezelfde 45px voor een eerste kop die géén .title-klasse heeft, zoals op
   /lean-trainingen/. De ruimte komt in de bron van .cth-page om de hele
   pagina-inhoud heen, niet van de kop zelf — dus hij hoort er ook te staan als
   de kop toevallig anders heet. */
main > .sectie:first-of-type > .inner > h2:first-child { margin-top: 45px; }



/* ---------------------------------------------------------------------------
   14. Onderdelen van de binnenpagina's
--------------------------------------------------------------------------- */

/* Een afbeelding die naast de tekst zweeft (pagina LCB). Op smalle schermen
   staat hij gewoon boven de tekst — zwevende beelden knellen daar. */
/* .lcb-list{
  list-style: circle;
} */

   .beeld-zwevend { margin: 0 0 1rem; }
@media (min-width: 600px) {
  .beeld-zwevend { float: right; margin: 0 0 1rem 1.5rem; max-width: 300px; }
}

/* Keurmerk: logo links, uitleg rechts. */
.keurmerk {
  display: flex; align-items: flex-start; gap: 1.25rem;
  margin: 1.5rem 0;
  clear: both;                       /* onder het zwevende beeld door */
}
.keurmerk img { flex: none; width: 80px; height: auto; }
.keurmerk p { margin: 0; }

/* De boekenpagina: omslag naast de tekst. */
.boeken { list-style: none; margin: 0; padding: 0; display: grid; gap: 3rem; }
/* 4/12 voor de omslag en 8/12 voor de tekst, met dezelfde Bootstrap-rekensom
   als bij .tekst-beeld: de rij is 30px breder dan de container en elke kolom
   heeft 15px links en rechts, dus van 1170 blijft 360 over voor de omslag en
   750 voor de tekst. Hier stond een vaste kolom van 212px — precies de breedte
   van het plaatje — waardoor de tekst te dicht op de omslag begon. */
.boek { display: grid; gap: 30px; }
@media (min-width: 600px) {
  .boek { grid-template-columns: 360fr 750fr; align-items: start; }
}

/* De omslag staat gecentreerd in zijn kolom (vc_align_center in de bron) en
   heeft een grijs kadertje:
       .vc_box_border      { padding: 6px }
       .vc_box_border_grey { background-color: #EBEBEB } */
.boek__omslag {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 6px;
  background: #ebebeb;
}
.boek__omslag img { display: block; width: 212px; height: auto; }
/* De boektitel is in de bron een <h3>, maar op deze pagina staat er geen <h2>
   boven — dat zou een niveau overslaan. Hier is het daarom een <h2>.

   De MAAT blijft wel die van de bron: 20px, de h3-maat uit het blok
   wp-custom-css. Zonder die regel pakte hij de h2-maat van 24px en stond de
   boektitel zichtbaar groter dan in de bron. Dezelfde oplossing als bij de
   koppen in een bericht: het niveau klopt voor een schermlezer, het beeld
   klopt met de bron. */
/* Géén margin-top: 0. In de bron heeft die kop gewoon de 20px bovenmarge van
   een h1-h3, en daardoor begint de titel 24px onder de bovenkant van de rij in
   plaats van gelijk met de omslag. */
/* 35px onder de titel, niet de 10px van een gewone kop: in de bron staat de
   titel in een eigen tekstblok (.wpb_text_column) en dat blok heeft 35px
   onderruimte. Nagemeten: 63px tussen de titel en de eerste regel tekst. */
.boek__tekst h2 { font-size: 20px; margin-bottom: 35px; }
.boek__tekst h2 a { color: var(--tekst); text-decoration: none; }
.boek__tekst h2 a:hover { color: var(--merk); text-decoration: underline; }

/* De kop binnen een belt-blok op /lean-trainingen/. Die staat in het grijze
   vlak, dus kleiner dan een gewone h4 (30px) — anders drukt hij het blok uit
   elkaar. */
.belt__kop { font-size: 20px; margin: 0 0 0.5em; }
.toolbox__tekst p:last-child { margin-bottom: 0; }

/* De vraag boven elk blok op /trainersupport/. In de bron staat die als
   losse alinea; hier krijgt hij nadruk zodat de opbouw vraag → antwoord
   zichtbaar blijft. */


/* ---------------------------------------------------------------------------
   15. Onderdelen van certificeringen, circulariteitmeter en Freshers Lean
--------------------------------------------------------------------------- */

/* Een blauw vlak dat GEEN link is (de drie certificeringsniveaus). Zelfde
   uiterlijk als .blokknop, maar zonder hover-omkering — er valt niets te
   klikken, dus mag het er ook niet klikbaar uitzien. */
.blokknop--vlak { cursor: default; }
.blokknop--vlak:hover { background-color: var(--merk); color: var(--wit); }

.inhoudslijst { margin: 0; padding-left: 1.15em; }
.inhoudslijst li { margin: 0 0 0.35rem; }
.inhoudslijst li:last-child { margin-bottom: 0; }

/* Een beeld dat gecentreerd boven de tekst staat. */
.beeld-midden { margin: 3rem 0 1.5rem; }
.beeld-midden img { margin: 0 auto; }

/* Een knop die in de bron gecentreerd staat (daar met text-align: center op de
   <h4> eromheen). */
.knop-midden { text-align: center; }
.knop-midden .blokknop { margin: 0 auto; }

/* Eén tekstblok van WPBakery: .wpb_text_column heeft in de bron 35px
   onderruimte. Onze pagina's schrijven die blokken meestal niet uit — de
   afstanden zitten dan in de losse regels — maar op
   /leanmeter/stimuleer-lean-werken-met-de-leanmeter/ staan er zes van die
   blokken achter elkaar en dan wordt het verschil zichtbaar: zonder de
   indeling kruipt alles 25px naar elkaar toe. */
.tekstblok { margin-bottom: 35px; }
.tekstblok > :last-child { margin-bottom: 0; }

/* De twee afbeeldingen op die pagina: 25px erboven en 35px eronder, nagemeten.
   De algemene .beeld-midden gebruikt 3rem/1,5rem en staat op drie andere
   pagina's; die blijft zoals hij is. */
/* 50px tussen de gekleurde balk en de afbeelding, net als in de bron: de
   sectie brengt zelf 25px mee en de figuur de rest. */
.sectie--bijeenkomst .beeld-midden { margin: 7px 0 35px; }

/* De vier meetgebieden van de Circulariteitmeter. Uit de bron in hoofdletters;
   hier via CSS, zodat de tekst zelf leesbaar in de HTML staat — een schermlezer
   spelt "MINDSET" anders soms letter voor letter. */
.gebieden {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.gebieden li {
  padding: 0.4rem 0.9rem;
  background: var(--grijs-licht);
  border-radius: var(--radius);
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* De drie stappen van de Circulariteitmeter. */
.stappen {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 30px; grid-template-columns: 1fr;
}
@media (min-width: 768px) { .stappen { grid-template-columns: repeat(3, 1fr); } }
/* 35px bovenaan, 20px opzij en onderaan. De 35 is de binnenruimte die
   WPBakery elke kolom in een gevulde rij geeft; nagemeten in de bron staat de
   kop van een kaart 39px onder de bovenrand van het witte vlak. */
.stap {
  display: flex; flex-direction: column;
  padding: 35px 15px 20px;
  background: var(--grijs-licht);
  border-radius: var(--radius);
}
.stap h3 { font-size: 20px; margin-top: 0; }
/* In de bron is dit een gewone lijst boven in een kolom: een opsomming met
   bolletjes (disc), 40px ingesprongen — de Bootstrap-maat. Bij ons hangt de
   lijst ín een lijst (.stappen > .stap > ul), en dan kiest de browser vanzelf
   het cirkeltje van het tweede niveau. Vandaar dat de opsommingstekens hier
   expliciet staan. */
.stap > ul { flex: 1; margin: 0; padding-left: 40px; list-style: disc; }
.stap > ul ul { list-style: circle; }
.stap figure { margin: 1.25rem 0 0; }


/* De twee boekomslagen naast elkaar.
   In de bron staat elke omslag in een eigen kolom (vc_col-sm-4 of -sm-6). Die
   kolommen hebben 15px binnenruimte links en rechts, dus tussen twee omslagen
   zit 30px en de buitenste staan strak tegen de rand van de container.
   Nagemeten in de bron: 71px boven de rij (onder de introzin) en 80px eronder
   (boven de bestelknop). */
.boek-beelden {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 30px;
  margin: 71px 0 80px;
}

.boek-beelden  img {  height: auto; }

.lean {
  width: 555px; 
}

.dienstverlening{
width: 360px;
}
/* De vier auteurs.
   Dezelfde kolommaat als de omslagen: 30px tussenruimte, zodat de foto's op
   dezelfde x-posities uitkomen als in de bron (230, 620, 1010 bij drie
   auteurs). 35px boven de rij — dat is de ondermarge van de kop erboven. */
.auteurs {
  list-style: none; margin: 35px 0 0; padding: 0;
  display: grid; gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
/* De naam staat in de bron in een <h4> van 18px, 35px onder de foto, en is een
   link — dus in de merkkleur, net als elke andere link. Geen eigen color hier:
   die komt van de a-regel bovenaan. */
.auteur a {
  display: grid; justify-items: center; gap: 35px;
  text-decoration: none;
  font-family: 'Montserrat', Arial, sans-serif; font-weight: 700;
  font-size: 18px; line-height: 1.3;
}
/* Vierkant, niet rond. De bron gebruikt de standaard vc_single_image van
   WPBakery en die is vierkant — border-radius:50% komt op geen enkele bronpagina
   voor. De bestanden zijn zelf 200x200 en worden op ware grootte getoond.

   height: auto en niet 200px. De algemene regel img { max-width: 100% } mag de
   BREEDTE inperken als de kolom smaller is dan de foto. Stond de hoogte dan
   vast op 200, dan werd de foto platgedrukt. Nu schaalt de hoogte mee. */
.auteur img { width: 200px; max-width: 100%; height: auto; }

/* OP EEN TELEFOON ONDER ELKAAR.

   Een kolom wordt in dit rooster nooit smaller dan zijn inhoud, en de foto is
   200px. Twee kolommen plus 30px ertussen hebben dus 430px nodig; pas vanaf
   ongeveer 460px vensterbreedte passen die. Daaronder stak de rij buiten het
   scherm — nagemeten op 320, 360 en 390px begon de tweede foto steeds op x=255
   en liep hij door tot 455, ruim voorbij de rechterrand. De pagina schoof
   daardoor zijwaarts.

   Vandaar hieronder één kolom. justify-items centreert de foto's, want de
   kolom is dan breder dan de 200px van het beeld. */
@media (max-width: 479px) {
  .auteurs { grid-template-columns: 1fr; justify-items: center; }
}

/* De webshop-logo's.
   De bron zet ze in een rij van drie gelijke kolommen (vc_col-sm-4) en toont elk
   logo gecentreerd op zijn eigen breedte. Een vaste max-height paste ze alle drie
   in hetzelfde hokje en maakte ze daardoor klein; nu vult elk logo zijn kolom en
   bepaalt de eigen verhouding de hoogte. De drie bestanden zijn toevallig alle
   drie ongeveer 3,5:1, dus ze komen vanzelf op gelijke hoogte uit.
   auto-fit en niet repeat(3,...): /de-toolbox-voor-dienstverlening/ gebruikt
   dezelfde lijst met vier logo's. Met auto-fit worden dat vanzelf vier kolommen. */
.webshops {
  list-style: none; margin: 35px 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: center; gap: 30px;
}
.webshops li { display: flex; justify-content: center; }
/* De link moet zelf de kolom vullen. Zonder deze regel is de <a> een inline
   doosje dat pas breedte krijgt zodra het logo binnen is — en omdat de logo's
   lazy laden, stond de hele rij tot dat moment op nul hoog. */
.webshops a { display: block; width: 100%; }
/* Ware grootte, en niet groter dan de kolom. In de bron staat elk logo op zijn
   eigen breedte midden in zijn kolom: op /de-toolbox-voor-dienstverlening/ zijn
   de kolommen smaller dan de bestanden en vullen ze de kolom, op
   /freshers-lean/ zijn ze breder en blijft een logo van 300px ook 300px. Met
   een vaste width:100% werd dat laatste logo uitgerekt of juist afgeknepen. */
.webshops img { width: auto; max-width: 100%; height: auto; margin: 0 auto; }

/* Op een smal scherm onder elkaar; naast elkaar zouden ze onleesbaar klein zijn. */
@media (max-width: 767px) {
  .webshops { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------------
   De boekpagina — het ritme van de rijen

   De klasse staat op <main> van /de-toolbox-voor-dienstverlening/. Die pagina
   is in de bron één lange reeks vc_row's zonder eigen binnenruimte: alle lucht
   komt van .wpb_content_element { margin-bottom: 35px }. Nagemeten in de bron
   (viewport 1440px) komt dat neer op:

       35px  boven en onder in elke rij
       55px  van de rand van de rij tot de koptekst (35 + 20 kopmarge)
       35px  tussen de kop en het eerste blok eronder

   De algemene .sectie doet 45px boven en niets onder; dat klopt voor de andere
   pagina's, maar niet voor deze. Vandaar dat het hier apart staat en niet in
   .sectie zelf — dat zou alle 116 pagina's verschuiven.
--------------------------------------------------------------------------- */
.boekpagina .sectie { padding: 35px 0; }

/* 20px in plaats van de 30px van .title: samen met de 35px van de rij is dat
   de 55px uit de bron. */
.boekpagina .sectie .title { margin-top: 20px; }

/* De ondermarge van het laatste blok telt in de bron niet mee — daar sluit de
   rij op 35px af, ongeacht wat er als laatste in staat. */
.boekpagina .sectie > .inner > :last-child { margin-bottom: 0; }

/* De eerste rij begint lager: in de bron zit om de hele pagina-inhoud
   .cth-page { margin: 50px 0 }. Nagemeten: 105px tussen de blauwe balk en de
   koptekst — 60px hier plus de 45px die de eerste kop al meekrijgt. */
main.boekpagina > .sectie:first-of-type { padding-top: 60px; }

/* De introzin staat in de bron 10px onder de kop, niet 25px. Op
   /freshers-lean/ heet die zin .sectie__intro-l en heeft hij geen eigen
   binnenruimte; daar komt de 10px van de kop erboven. */
.boekpagina .sectie__intro { padding-top: 10px; }
.boekpagina .sectie__intro-l { margin-top: 0; }
.boekpagina h2:has(+ .sectie__intro-l) { margin-bottom: 10px; }

/* De video vult zijn rij; er staat geen kop boven, dus de 35px van de rij is
   meteen de ruimte erboven. De ondermarge moet weg, anders plakt de speler
   tegen de onderrand van het grijze vlak. */
.boekpagina .video-insluiting { margin: 0; }

/* 35px boven de bestelknop, en de binnenruimte eronder weg: die 20px kwam er
   in de bron niet bij. */
.boekpagina .blokknop_container { margin-top: 35px; padding-bottom: 0; }

/* Bootstrap zet in de bron ul { margin: 0 0 10px }. Zonder die regel pakt de
   browser zijn eigen 1em (16px) boven én onder, en werd de opsomming in de
   samenvatting 12px te hoog. Alleen de lijsten in de lopende tekst: .auteurs
   en .webshops hebben een klasse en regelen hun eigen marges. */
.boekpagina ul:not([class]) { margin: 0 0 10px; }

/* Een kop die in de bron in hetzelfde tekstblok staat als de alinea eronder:
   dan telt alleen de eigen ondermarge van de kop mee, 10px in plaats van 35px.
   Komt voor op /en/freshers-lean/ bij "Meet the authors"; de Nederlandse
   versie van diezelfde pagina heeft daar wél twee losse blokken. */
.boekpagina .kop--aansluitend { margin-bottom: 10px; }

/* De alinea boven de video in het grijze vlak. In de bron staat de speler 35px
   onder de laatste tekstregel; de 20px binnenruimte van .sectie-tekst-box komt
   daar niet bij. */
.boekpagina .sectie-tekst-box { padding-bottom: 0; margin-bottom: 35px; }


/* ---------------------------------------------------------------------------
   16. De kaart op /contact/ — direct geladen

   Overgenomen uit de bron:
      .wpb_gmaps_widget .wpb_wrapper    { background-color:#f7f7f7; padding:5px }
      .wpb_gmaps_widget .wpb_map_wraper { padding-bottom:56.25%; height:0 }
      .wpb_gmaps_widget iframe          { width:100%; border:none }

   Die 56,25% is de truc voor een vaste beeldverhouding: 9 ÷ 16 = 0,5625.
   De hoogte staat op 0 en de padding-bottom rekent mee met de BREEDTE, dus
   het vlak houdt altijd 16:9 — ongeacht de schermgrootte. Zo verspringt de
   pagina niet zodra de kaart binnenkomt.
--------------------------------------------------------------------------- */
.kaart {
  background-color: #f7f7f7;
  padding: 5px;
}
.kaart__vlak {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.kaart__vlak iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}

/* ---------------------------------------------------------------------------
   17. /lcb/ — de twee blokken uit de bron
--------------------------------------------------------------------------- */
/* Nagemeten in de bron (venster 1440px, vanaf de onderkant van de blauwe balk):

                            /lcb/   /en/lcb/
       balk   → kop           70px     70px
       kop    → alinea        60px     35px
       alinea → lijst         11px     11px
       lijst  → grijs vlak    74px     34px

   Het verschil tussen de twee talen zit in de bron zelf: op de Nederlandse
   pagina staat de kop in een EIGEN tekstblok en de tekst in het volgende, en
   elk blok brengt zijn eigen 35px marge mee. Op de Engelse pagina staan kop en
   tekst in hetzelfde blok. Vandaar de modifier --kop-apart. */
main > .sectie:first-of-type .lcb-intro .title { margin-top: 25px; }

/* Plus de 10px ondermarge van de lijst: 34px voor Engels, 74px voor Nederlands. */
.lcb-intro { padding-bottom: 24px; }
.lcb-intro--kop-apart { padding-bottom: 64px; }
.lcb-intro h2 { text-align: center; }   /* de bron: style="text-align: center" */

/* Alleen op de Nederlandse pagina: de tekst staat daar 15px verder naar rechts
   dan de kop, want het losse tekstblok heeft zijn eigen kolombinnenruimte. */
.lcb-intro--kop-apart p,
.lcb-intro--kop-apart ul { margin-left: 15px; }

/* Bootstrap in de bron: ul { margin: 0 0 10px }. De browser doet uit zichzelf
   16px boven én onder, en dan zakt het grijze vlak eronder te ver weg. Als
   losse marges genoteerd, want de Nederlandse pagina zet hier zijn eigen
   margin-left op en een verkorte notatie zou die weer wissen. */
.lcb-intro ul { margin-top: 0; margin-bottom: 10px; }

/* Het grijze vlak loopt in de bron over de VOLLE breedte van het venster, niet
   alleen over de container. In WPBakery heet dat een "full width row"; je ziet
   het aan de <div class="vc_row-full-width"> die er direct achteraan staat.

   De truc hieronder: het vlak breekt uit .inner door links en rechts precies
   de helft van de vensterbreedte te pakken en die met een negatieve marge weer
   terug te schuiven. 50vw is de halve vensterbreedte, 50% de halve
   containerbreedte — het verschil is exact de ruimte die overblijft. */
.lcb-persoon-vlak {
  background-color: var(--grijs-licht);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Nagemeten in de bron: 35px grijs boven de tekst, niet 40px. */
  padding: 35px 0;
}

/* De inhoud binnen dat vlak blijft wél netjes in de container. */
.lcb-persoon {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 0 var(--container-ruimte);
  display: grid; gap: 30px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 768px) {
  /* De bron gebruikt vc_col-sm-3 voor de foto: 3/12 van de rij van 1170px is
     292,5px, min 2x15px gootruimte = 262,5px beeld. Nagemeten: 263px breed.
     De goot ertussen is de gewone kolomgoot van 30px (15 + 15), niet 72:
     nagemeten begint de tekst in de bron op x443, dus 150 + 263 + 30. */
  .lcb-persoon { grid-template-columns: 23.07% 1fr; gap: 30px; }
}
.lcb-persoon p:last-child { margin-bottom: 0; }

.lcb-persoon img{
  margin: 0 auto;
}
/* De twee keurmerken: eerst beide logo's naast elkaar, daaronder beide
   teksten naast elkaar. In de bron zijn dat vier kolommen van 6/12 achter
   elkaar; een raster met twee kolommen geeft precies dezelfde volgorde.
   Uit de bron: .vc_custom_1733930431361 { margin-right:50px; margin-left:50px } */
.lcb-keurmerken {
  /* Nagemeten in de bron, van de onderkant van het grijze vlak af:
         35px  tot de logo's
        150px  de logo's
         35px  tot de tekst eronder
         35px  onder de tekst

     Opzij 65px: de bron zet 50px marge op de rij (vc_custom_1733930431361) en
     daar komt dezelfde 15px kolombinnenruimte bij als bij de intro. Zo komen de
     twee kolommen op x215 en x735 uit, elk 490 breed met 30px ertussen. */
  margin: 35px 65px 0;
  padding-bottom: 35px;
  display: grid; gap: 35px 30px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .lcb-keurmerken { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .lcb-keurmerken { margin: 0; }
}
.lcb-keurmerken img { width: 150px; height: auto; margin: 0 auto; }  /* vc_align_center */
.lcb-keurmerken p { margin: 0; }

@media(max-width:768px){
  .lcb-keurmerken p { max-width: 260px; margin: 0 auto;}
}

/* ---------------------------------------------------------------------------
   18. /trainersupport/ — tekst links, beeld rechts

   Uit de bron: vc_col-sm-8 voor de tekst, vc_col-sm-4 voor het beeld.
   Dat is 8/12 en 4/12 van het raster, dus 2:1.
--------------------------------------------------------------------------- */

/* Nagemeten in de bron: 51px tussen de blauwe balk en de meter, en 41px tussen
   de meter en de kop eronder. Met 35px onderaan kwamen wij op 61. */
.lcs-img{
  display: flex;
  justify-content: center;
  margin-top: 25px;
  padding-bottom: 15px;
}
.tekst-beeld {
  display: grid; gap: 30px;
  grid-template-columns: 1fr;
  align-items: start;
  /* Nagemeten in de bron: de eerste witte sectie is 355px hoog (van de
     titelbalk tot het grijze vlak). Met 25px kwamen wij op 344. */
  padding-bottom: 38px;
}
@media (min-width: 768px) {
  /* Niet 8fr 4fr. Bootstrap rekent met een rij die 30px BREDER is dan de
     container (.row { margin: 0 -15px }) en geeft elke kolom 15px links en
     rechts. Van 1170 blijft dan 750 over voor de tekst en 360 voor het beeld,
     met 30px ertussen. Met 8fr/4fr kwamen we op 740 en 370, en dan is het
     beeld 3% te groot. */
  .tekst-beeld { grid-template-columns: 750fr 360fr; }
}
/* WPBakery geeft elke kolom in een GEVULDE rij (een rij met een eigen
   achtergrondkleur) 35px extra binnenruimte bovenaan:
       .vc_row-has-fill > .vc_column_container > .vc_column-inner { padding-top: 35px }
   Op /trainersupport/ staat de kop in de ene kolom en de tekst in de andere;
   beide schuiven daardoor omlaag. De kop hebben we al goed staan, de tekst
   niet — vandaar deze regel. */
.sectie--accent .tekst-beeld { padding-top: 35px; }

.tekst-beeld > div > *:last-child { margin-bottom: 0; }
.tekst-beeld figure { margin: 0; }

/* Het tweede blok binnen hetzelfde grijze vlak op /trainersupport/. */

.blok-vervolg figure { margin: 1.5rem 0 0; }
.blok-vervolg figure img { width: 212px; height: auto; }


/* ---------------------------------------------------------------------------
   19. LEANmeter-artikelen

   Uit de bron: .col-md-9 voor het artikel, .col-md-3 voor de zijbalk.
   Dat is 9/12 en 3/12 van het raster.
--------------------------------------------------------------------------- */
.artikel-indeling {
  display: grid; gap: 30px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 992px) {
  /* Niet 9fr 3fr. Net als bij .tekst-beeld rekent Bootstrap met een rij die
     30px breder is dan de container (.row { margin: 0 -15px }) en met 15px
     binnenruimte per kolom. Van 1170 blijft dan 847,5 over voor het artikel en
     262,5 voor de zijbalk, met 30px ertussen. Met 9fr/3fr werd de zijbalk
     15px te breed en begon hij 30px te vroeg. */
  .artikel-indeling { grid-template-columns: 847.5fr 262.5fr; }
}

/* Uit de bron: .entry-image { margin-bottom: 40px }. */
.artikel__beeld { width: 100%; height: auto; margin-bottom: 40px; }

/* Uit de bron: .post-meta { font-size: 13px }, verder een gewone alinea en dus
   10px eronder. Hier stond 0,9rem (14,4px) met 24px eronder. */
.artikel__cats { font-size: 13px; color: var(--gedempt); margin-bottom: 10px; }

/* De afbeeldingen binnen de tekst staan in de bron gecentreerd
   (class="aligncenter"). Die klasse is bij het opschonen weggehaald, dus
   regelen we het hier voor elk beeld in de artikeltekst. */
/* Nagemeten in de bron: 15px tussen de alinea en het beeld eronder. */
.artikel__inhoud img { margin: 10px auto; }
/* De koppen in de tekst zijn hier h2/h3 omdat de bron met h3/h4 begint en
   daarmee een niveau overslaat (zie artikel.php). De MAAT blijft die van de
   bron: het blok wp-custom-css daar zet h3 op 20px en h4 op 18px. Hier stond
   24 en 20, en daardoor waren de tussenkoppen een maat te groot. */
.artikel__inhoud h2 { font-size: 20px; margin-top: 20px; }
.artikel__inhoud h3 { font-size: 18px; margin-top: 10px; }
/* Uit de bron (Bootstrap): ul { margin: 0 0 10px; padding-left: 40px }. Hier
   stond 1,15em (18px) met de standaardmarge van de browser erboven. */
.artikel__inhoud ul { margin: 0 0 10px; padding-left: 40px; }

/* Vorige en volgende bericht. */
.artikel__pager {
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--grijs-lijn);
}
@media (min-width: 600px) {
  .artikel__pager { grid-template-columns: 1fr 1fr; }
  .pager__volgende { text-align: right; }
}
.artikel__pager a { display: block; text-decoration: none; }
.pager__label {
  display: block; font-size: 0.8rem; color: var(--gedempt);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.pager__titel {
  display: block;
  font-family: 'Montserrat', Arial, sans-serif; font-weight: 700;
  color: var(--merk);
}
.artikel__pager a:hover .pager__titel { text-decoration: underline; }

/* Het reactieblok onder een artikel. Nagemeten in de bron:

       article              margin-bottom: 50px
       section.comments     padding-top: 30px   — een leeg blok, puur ruimte
       .comment-reply-title margin-top: 20px, Montserrat 25px/400
       .not-empty           margin-left: 15px

   Tussen de onderkant van het artikel en de koptekst zit zo 101px; hier is dat
   één marge van 100px op het blok zelf. De inspringing van 15px op de zin
   eronder komt wél uit de bron. */
.reacties { margin-top: 100px; }
.reacties h2 {
  margin: 0 0 10px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 25px; font-weight: 400;
}
.reacties p { margin: 0 0 10px 15px; }

/* De zijbalk. */
.zijbalk__blok { margin-bottom: 2rem; }
/* "Recente berichten" is in de bron een h3 (.widget-title) van 20px. */
.zijbalk__blok h2 { font-size: 20px; margin-bottom: 0.75rem; }

/* Het promoblok is in de bron een Bootstrap .well met een h4 erin:
       .well { padding: 19px; background-color: #f5f5f5; border: 1px solid #e3e3e3;
               border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0,0,0,.05) }
   Wij hadden een vlak grijs blok zonder rand met 20px binnenruimte, en de kop
   stond op 20px in plaats van de 18px van een h4. */
.zijbalk__promo {
  padding: 19px;
  background: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: var(--radius);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
/* Een h4 heeft in de bron 10px marge boven en onder zich (Bootstrap); onze
   h2 brengt er 20 boven mee. */
.zijbalk__promo h2 {
  font-size: 18px;
  margin: 10px 0;
  /* Onze koppen breken uitgebalanceerd af (text-wrap: balance). Hier levert
     dat een andere regelval op dan de bron: daar staat "LEANmeter - De juiste"
     op de eerste regel en "impuls" op de tweede. */
  text-wrap: wrap;
}
/* In de bron houdt de laatste alinea in een .well zijn ondermarge van 10px;
   samen met de 19px binnenruimte is dat 29px onder de laatste regel. */
.zijbalk__promo p:last-child { margin-bottom: 10px; }
.zijbalk__lijst { list-style: none; margin: 0; padding: 0; }
.zijbalk__lijst li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--grijs-lijn);
}
/* De bron laat de lijn ONDER het laatste bericht gewoon staan; die hadden we
   hier weggehaald. */


/* ---------------------------------------------------------------------------
   20. De categorie-overzichten (/category/…)

   Hiervoor stond nog geen enkele regel in dit bestand. De lijst viel daardoor
   terug op de standaard van de browser: opsommingstekens, een beeld over de
   volle breedte en de titel als blauwe link eronder.

   Uit de bron, per bericht:

       .content-content.post-entry    margin-bottom: 40px
         .row
           .col-md-4 .col-sm-4        het beeld
           .col-md-8 .col-sm-8        kop, categorieën, samenvatting, knop
       h5.post-heading                17px vet, margin: 0 0 5px
       .post-heading a                color: #5C5C5C, geen onderstreping
       p.post-meta                    font-size: 13px
       a.btn.btn-outline              de omlijnde knop — dat is .knop-omlijnd

   Die 4/8-verdeling zit BINNEN de kolom van 847,5px van .artikel-indeling.
   Bootstrap rekent daar weer met een rij die 30px breder is (row margin 0 -15px)
   en met 15px binnenruimte per kolom: 4/12 van 877,5 = 292,5 en 8/12 = 585.
   Zichtbaar blijft er dus 262,5px beeld, 30px ruimte en 555px tekst over —
   dezelfde rekensom als bij .tekst-beeld en .artikel-indeling.
--------------------------------------------------------------------------- */
.berichtenlijst { list-style: none; margin: 0; padding: 0; }

/* Uit de bron: .post-entry { margin-bottom: 40px }. */
.bericht { margin-bottom: 40px; }

/* Bootstrap zet .col-sm-* om vanaf 768px; boven die breedte staan beeld en
   tekst dus naast elkaar, eronder onder elkaar. */
@media (min-width: 768px) {
  .bericht {
    display: grid;
    grid-template-columns: 262.5fr 555fr;
    gap: 30px;
    align-items: start;
  }
}
@media (max-width: 767px) {
  /* Onder elkaar heeft het beeld wél ruimte nodig; naast elkaar niet. */
  .bericht__beeld { margin-bottom: 15px; }
}

/* .img-responsive uit de bron: het beeld vult zijn kolom. Zonder deze regel
   blijft het staan op zijn eigen breedte van 1200px en wordt het alleen door
   max-width teruggeschaald — dat scheelt niets zolang de kolom smaller is,
   maar op een breed scherm wel. */
.bericht__beeld { display: block; }
.bericht__beeld img { width: 100%; }

/* h5.post-heading: 17px vet, 0 boven en 5 onder. Onze <h2> brengt uit
   Bootstrap 20px marge boven zich mee; die moet eraf. */
.bericht__titel {
  margin: 0 0 5px;
  font-size: 17px;
  /* Onze koppen breken uitgebalanceerd af (text-wrap: balance). De bron doet
     dat niet, en dan valt de regelovergang anders. */
  text-wrap: wrap;
}
/* De titel is in de bron geen blauwe link: hij staat in de gewone tekstkleur
   en blijft dat ook bij aanwijzen. */
.bericht__titel a,
.bericht__titel a:hover { color: var(--tekst); text-decoration: none; }

/* Uit de bron: .post-meta { font-size: 13px }. Het woord "categorie" ervoor
   staat in de tekstkleur, alleen de categorieën zelf zijn links. */
.bericht__cats { font-size: 13px; }

@media (max-width: 767px) {
  .bericht__titel { font-size: 16px; }
}


/* ---------------------------------------------------------------------------
   21. Het blograster op /leanmeter/

   Hier stond nog helemaal geen opmaak voor — de lijst viel daardoor terug op
   de standaard van de browser: opsommingstekens, afbeeldingen onder elkaar op
   volle breedte en de titel als losse tekst eronder.

   Uit de bron:
      .vc_grid-item     → vc_col-sm-4        (3 kolommen vanaf 768px)
      .vc_grid-gutter-30px                   (30px tussenruimte)
      elke tegel toont ALLEEN de afbeelding; de titel is een tooltip
--------------------------------------------------------------------------- */
.bloglijst {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .bloglijst { grid-template-columns: repeat(3, 1fr); }
}

/* De animatie van de bron. WPBakery noemt hem scaleRotateIn:

       .vc_gitem-zone-a               { transform: scale(1);
                                        transition: transform .3s ease-in-out }
       .vc_is-hover .vc_gitem-zone-a  { transform: scale(1.5) rotate(10deg) }
       .vc_gitem-zone-b               { position:absolute; inset:0; opacity:0;
                                        transition: all 1s ease }
       .vc_is-hover .vc_gitem-zone-b  { opacity: 1 }
       .vc_custom_1730725542323       { background-color: rgba(0,0,0,0.3) }

   Het beeld schaalt dus naar 1,5 en draait 10 graden, terwijl er een zwarte
   laag van 30% overheen komt met de titel erin. */
.bloglijst a {
  display: block;
  position: relative;
  line-height: 0;                    /* geen witruimte onder de afbeelding */
  background: #f9f9f9;               /* uit de bron: .vc_custom_1419240595465 */
  /* Zonder dit steekt het vergrote beeld buiten de tegel uit en overlapt het
     de buren. */
  overflow: hidden;
}

.bloglijst img {
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform 0.3s ease-in-out;
}
.bloglijst a:hover img,
.bloglijst a:focus-visible img { transform: scale(1.5) rotate(10deg); }

.blogtegel__laag {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 1s ease;
}
.bloglijst a:hover .blogtegel__laag,
.bloglijst a:focus-visible .blogtegel__laag { opacity: 1; }

/* De titel schuift van boven naar binnen, zoals .vc_post-title in de bron:
       transform: translate3d(0,-100%,0) → translate3d(0,0,0) */
.blogtegel__titel {
  color: var(--wit);
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  transform: translate3d(0, -100%, 0);
  transition: transform 1s cubic-bezier(0, .275, .125, 1),
              opacity 0.5s cubic-bezier(0, .275, .125, 1);
}
.bloglijst a:hover .blogtegel__titel,
.bloglijst a:focus-visible .blogtegel__titel {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Wie "minder beweging" aan heeft staan krijgt alleen de laag, geen schuiven,
   draaien of schalen. De informatie blijft, de beweging gaat eruit. */
@media (prefers-reduced-motion: reduce) {
  .bloglijst img,
  .blogtegel__laag,
  .blogtegel__titel { transition: opacity 0.2s; }
  .bloglijst a:hover img,
  .bloglijst a:focus-visible img { transform: none; }
  .blogtegel__titel { transform: none; }
}


/* ---------------------------------------------------------------------------
   22. Productvideo en het interesse-formulier
--------------------------------------------------------------------------- */
.productvideo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 848 / 477;      /* de maten uit de bron; voorkomt verspringen */
  background: #000;
}

.taalnoot { color: var(--gedempt); font-style: italic; }

/* Het interesseformulier staat in de bron in de rechterzijbalk, als widget:

       .sidebar { margin: 50px 0 }
       <h3 class="widget-title">Interesse?</h3>

   Die h3 is 20px (uit het blok wp-custom-css), en de verzendknop is daar
   btn-block: die vult de hele kolombreedte.

   LET OP de bovenmarge. In de bron staat er 50px boven de zijbalk, maar dat is
   geen extra ruimte: de kolom met de video krijgt diezelfde 50px van
   .cth-page { margin: 50px 0 }, en zo komen ze op gelijke hoogte uit. Bij ons
   beginnen beide kolommen van het raster al op dezelfde hoogte, dus die 50px
   er hier nog eens bij optellen zou de zijbalk 50px te laag zetten. Nagemeten:
   de kop staat in de bron 6px onder de bovenkant van de video. */
.zijkolom { margin: 0 0 50px; }

.interesse h2 { font-size: 20px; margin-top: 0; }

/* .form heeft normaal een max-width van 34rem, zodat een invulveld op een brede
   pagina niet belachelijk lang wordt. In deze kolom is dat niet nodig — die is
   zelf al smal — en het zou de knop van de bron te smal maken. */
.zijkolom .form { max-width: none; }
.zijkolom .form button { width: 100%; }

/* De velden zijn in de bron Bootstrap-velden: .form-control is padding 6px 12px
   met een letter van 14px en regelhoogte 1,42857 — samen precies 34px hoog. Elk
   veld zit daar in een <p> met 10px ondermarge, met het label er direct boven
   (<label>Naam<br><input>). Onze eigen velden zijn ruimer; op deze smalle kolom
   zou dat het formulier 20px per veld langer maken dan in de bron. */
.zijkolom .form { gap: 10px; }
.zijkolom .form__veld { gap: 8px; }
.zijkolom .form__veld input {
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
}

/* De melding dat het formulier nog niet werkt. Opvallend genoeg om niet over
   het hoofd te zien, maar geen foutkleur — er is niets misgegaan. */
.form__melding {
  padding: 0.9rem 1.1rem;
  background: var(--grijs-licht);
  border-left: 4px solid var(--merk);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.form { display: grid; gap: 1rem; max-width: 34rem; }
.form__veld { display: grid; gap: 0.35rem; }
.form__veld label { font-weight: 600; font-size: 0.92rem; }
.form__veld input {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--radius);
  font: inherit;
  background: var(--wit);
}

/* .form--inactief stond hier: de opmaak van een uitgeschakeld formulier.
   De formulieren werken nu, dus die regels zijn weg. */

.form__veld textarea {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--radius);
  font: inherit;
  background: var(--wit);
  resize: vertical;
}

/* Een veld waar iets mis mee is. De rand is niet het enige signaal — er staat
   ook een regel tekst onder. Kleur alleen is te weinig: wie kleurenblind is of
   op een fel scherm kijkt, ziet het verschil niet. */
.form__veld [aria-invalid="true"] { border-color: #C0392B; border-width: 2px; }

.form__fout { color: #C0392B; font-size: 0.88rem; }

/* De twee keuzerondjes naast elkaar in plaats van onder elkaar. */
.form__veld.form__veld,
fieldset.form__veld { border: 0; margin: 0; padding: 0; }
fieldset.form__veld legend { padding: 0; font-weight: 600; font-size: 0.92rem; }
.form__keuze {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-right: 1.25rem;
  font-weight: 400;
}

/* De melding boven het formulier: gelukt of er ontbreekt iets. Ook hier niet
   alleen kleur, maar ook een randje links, zodat het verschil zichtbaar blijft
   als de kleuren wegvallen. */
.form__melding {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border-left: 4px solid var(--grijs-lijn);
  background: var(--grijs-licht);
}
.form__melding--goed { border-left-color: #2FB215; }
.form__melding--fout { border-left-color: #C0392B; }

/* Het honeypot-veld. NIET met display:none — sommige bots slaan verborgen
   velden over. Zo staat het buiten beeld maar bestaat het wel. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}


/* ---------------------------------------------------------------------------
   23. Het zoekformulier in de zijbalk

   Uit de bron: een invoerveld met een donkergrijze knop ernaast
   (Bootstrap .input-group-lg met .btn-primary, dat is #5c5c5c in dit thema).
--------------------------------------------------------------------------- */
.zoekform { display: flex; }

.zoekform__veld {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--grijs-lijn);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  font: inherit;
  background: var(--wit);
}

/* .btn-primary uit de bron: background #5c5c5c, hover #3b3b3b. */
.zoekform__knop {
  display: grid; place-items: center;
  width: 48px;
  padding: 0;
  background: #5c5c5c;
  border: 1px solid #5c5c5c;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--wit);
  cursor: pointer;
}
.zoekform__knop:hover { background: #3b3b3b; border-color: #3b3b3b; }
.zoekform__knop .icon { width: 20px; height: 20px; }

/* ---------------------------------------------------------------------------
   24. Volle-breedte vlakken

   In WPBakery heet dit een "full width row" (vc_row-has-fill met
   data-vc-full-width). Het gekleurde vlak loopt van vensterrand tot
   vensterrand, terwijl de inhoud in de container blijft.

   Dezelfde truc als bij .lcb-persoon-vlak: 50vw is de halve vensterbreedte,
   50% de halve containerbreedte; het verschil is precies de ruimte die
   overblijft. De overflow-x guard bovenaan dit bestand vangt de schuifbalk af.
--------------------------------------------------------------------------- */
.volvlak {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.volvlak--grijs { background-color: var(--grijs-licht); }

/* Nagemeten op /lean-trainingen/: 66px grijs boven de kop "Lean trainingen op
   maat"; met de gewone 25px kwamen wij op 56. Op /leanmeter/ en
   /circulariteitmeter/ is dat gat wél 25px, dus dit geldt alleen voor het
   grijze vlak dat direct op de blokkenrij (.sectie--ruim) volgt. */
.sectie--ruim + .volvlak--grijs > .sectie { padding-top: 35px; padding-bottom: 25px;}

/* ---------------------------------------------------------------------------
   25. De drie certificeringsniveaus op /certificeringen/

   Uit de bron: drie kolommen van vc_col-sm-4, met een gewone kop en een
   opsomming eronder. Geen blauw vlak, geen kader.
--------------------------------------------------------------------------- */
.niveaus {
  list-style: none;
  /* Nagemeten in de bron: 63px tussen de inleidende alinea en de kop van het
     eerste belt-blok. Met 2rem (32px) kwamen wij op 41. */
  margin: 54px 0 0;
  padding-bottom: 25px;
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
  text-align: left;              /* de sectiekop is gecentreerd, deze niet */
}
@media (min-width: 768px) {
  .niveaus { grid-template-columns: repeat(3, 1fr); }
}
.niveaus > li > h3 { font-size: 20px; margin: 0 0 0.6rem; }
/* list-style: disc, want deze lijst zit genest in .niveaus en dan kiest de
   browser vanzelf open rondjes voor het tweede niveau. In de bron is het een
   losse lijst met gewone gevulde stippen. */
.niveaus ul { margin: 0; padding-left: 1.15em; list-style: disc; }
.niveaus ul li { margin-bottom: 0.35rem; }


/* ---------------------------------------------------------------------------
   26. De vier meetgebieden op /leanmeter/

   Uit de bron: vier kolommen (vc_col-sm-3) met een icoon in #1ca9ea en een
   gecentreerd label eronder in hoofdletters.

   LET OP: deze regels overschrijven de eerdere .gebieden — dat waren grijze
   pillen. Zo staat het niet in de bron.
--------------------------------------------------------------------------- */
/* De maten hieronder zijn opgemeten in de bron (venster 1440px breed), op
   /leanmeter/ én /circulariteitmeter/ — daar staan exact dezelfde waarden.

   In de bron staat het icoon in een vakje van 60×60 met de letter zelf op
   30px in het midden. Dat vakje is bij ons weggelaten (er zit geen vlak of
   rand omheen), dus de 15px lege ruimte erboven en eronder moet in de marges
   terug. Van de INKT gerekend:

       alinea → icoon   50px   = 35px blokmarge + 15px lege ruimte
       icoon  → label   25px   = 15px lege ruimte + 10px van het label
       label  → vlak    35px   = 10px alineamarge + 25px onder de lijst

   De kolomtussenruimte is 30px: de vier kolommen zijn in de bron 263px breed
   met een steek van 292,5px, en (1140 − 3 × 30) / 4 komt daar op 0,25px na op
   uit. Met de eerdere 1,5rem stonden de labels een paar pixels te ver naar
   binnen. */
.gebieden {
  list-style: none;
  margin: 50px 0 25px;
  padding: 0;
  display: grid;
  gap: 25px 30px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .gebieden { grid-template-columns: repeat(4, 1fr); }
}
.gebieden li {
  display: grid;
  justify-items: center;
  gap: 25px;
  padding: 0;
  background: none;
  border-radius: 0;
  text-align: center;
  /* De pilstijl hierboven (blok 12) zette hier Montserrat op 0,85rem met
     letterspatiëring. Dat bleef staan toen de pillen vervielen, en daardoor
     stond het label 2px kleiner en smaller dan in de bron. In de bron is het
     een gewone alinea: Open Sans, 16px, geen letterspatiëring. */
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
}
.gebieden .gebied__icoon { color: var(--merk); line-height: 0; }
/* 30px, want zo groot is het Font Awesome-teken in de bron: font-size 30,1px
   en een regelhoogte van 30,1px. De 34px hier was de breedte van het bréédste
   teken (fa-brain), niet de maat waarop ze allemaal staan. */
.gebieden .icon { width: 30px; height: 30px; }
/* In de bron is dit label een alinea met een <strong> erin:
       <p style="text-align:center"><strong>KLANT FOCUS</strong></p>
   Die erft het lettertype van body — Open Sans — en de bron laadt daarvan
   precies twee snitten: 300 en 600. Het label staat dus op 600, een stuk
   steviger dan de 300 van de lopende tekst.

   Hier stond die 600 op een selector `.gebieden strong`, maar in onze HTML zit
   helemaal geen <strong>: er staat een kale <p>. De regel raakte dus niets en
   het label bleef op de 300 van de body staan — zichtbaar dunner dan de bron.

   Opgelost op de alinea zelf. Een <strong> toevoegen zou hetzelfde beeld geven,
   maar <strong> betekent "belangrijk" en dat is een label niet; het is puur
   opmaak, en opmaak hoort in de CSS.

   De hoofdletters komen ook uit de CSS: in de HTML staat "Mindset" met kleine
   letters, omdat een schermlezer een volledig gekapitaliseerd woord soms letter
   voor letter spelt. */
.gebieden p {
  margin: 0 0 10px;               /* de gewone 10px ondermarge van een alinea */
  font-weight: 600;
  text-transform: uppercase;
}

/* De drie rapportagebeelden, als eigen rij onder de kaarten. */
.rapportages {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
  padding-bottom:30px;
}
@media (min-width: 768px) {
  .rapportages { grid-template-columns: repeat(3, 1fr); }
}
.rapportages img {
  width: 100%;
  height: auto;
  background: var(--wit);
}

/* De kaarten binnen het grijze vlak zijn wit — anders vallen ze weg. */
.volvlak--grijs .stap { background: var(--wit); }

/* Een ingesloten video die meteen laadt (Vimeo). 16:9, zodat de pagina niet
   verspringt terwijl hij binnenkomt. */
.video-insluiting {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.video-insluiting iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}

/* Een grijs vlak BINNEN de container — anders dan .volvlak--grijs, dat
   doorloopt tot de vensterranden. Gebruikt op het kopblok van de
   trainingspagina's, waar de bron het ook zo doet. */
.blok--grijs { background: var(--grijs-licht); }

/* De inhoud staat in de bron 15px verder naar rechts dan het grijze vlak zelf.
   Dat is geen ontwerpkeuze maar een gevolg van de opbouw daar: in het grijze
   vlak staat nóg een .container van 1170px, terwijl er maar 1140px ruimte is.
   Bootstrap 3 geeft .container een VASTE breedte, dus die past niet en steekt
   30px naar rechts uit. Het gevolg: de tekst begint 15px later en de kop staat
   14px rechts van het midden. Nagemeten in de bron en hier nagedaan. */
.blok__inner {
  padding: 25px 15px;
  margin-right: -15px;
}


/* ---------------------------------------------------------------------------
   27. De tarieven op /lcb-praktijkopdracht/

   Vier kolommen van 3/12 met een blauwe rand. De beltnaam en het bedrag staan
   in de merkkleur; de rest is gewone tekst.
--------------------------------------------------------------------------- */
/* De grijze baan met de tarieven staat in de bron NIET op de gewone 50px maar
   op de 35px die WPBakery elke kolom in een gevulde rij geeft:

       .vc_row-has-fill > .vc_column_container > .vc_column-inner { padding-top: 35px }

   Met 50px stond de kop "Investering" 15px te laag in de baan. Onderaan is het
   38px: de kaarten hebben in de bron zelf nog margin-bottom: 25px. */
.sectie--tarieven { padding-top: 35px; padding-bottom: 35px; }

.tarieven {
  list-style: none;
  /* 70px tussen de kop en de kaarten — nagemeten in de bron. */
  margin: 70px 0 0;
  padding: 0;
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .tarieven { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .tarieven { grid-template-columns: repeat(4, 1fr); } }

/* Dit is in de bron hetzelfde component als het investeringsblok op de
   trainingspagina's — .pricing-item.highlighted-plan. Dus ook dezelfde maten:

       .pricing-item     { padding: 25px; border: solid 3px; border-radius: 5px;
                           text-align: center }
       .plan-name        { text-transform: uppercase; font-weight: 600 }
       .price            { font-size: 60px; font-weight: 700; margin: 10px 0;
                           font-family: Montserrat; line-height: 1.4 }
       .highlighted-plan { border-color: #1CA9EA }

   Hier stond een eigen maatvoering (2px rand, 1,75rem binnenruimte, bedrag van
   2,25rem); daardoor was de kaart 232px hoog tegen 264px in de bron. */
.tarief {
  display: flex;
  flex-direction: column;
  padding: 25px;
  border: 3px solid var(--merk);
  border-radius: 5px;
  text-align: center;
}

/* Geen ondermarge: in de bron is de beltnaam een <div> zonder marge, en de
   ruimte eronder komt van de bovenste alinea. Met 10px erbij werd de kaart
   precies die 10px te hoog. */
.tarief__belt {
  margin: 0;
  color: var(--merk);
  font-weight: 600;
  text-transform: uppercase;
}

.tarief__regel { margin: 0 0 10px; }

/* HET BEDRAG OP ÉÉN LIJN.
   De bron doet dat met de botte bijl: in de twee korte kaarten staat een lege
   <p>&nbsp;</p> als opvulling, zodat elke kaart evenveel regels heeft. Wij
   hebben die kunstgreep niet nodig — de kaart is een flex-kolom, dus een
   automatische bovenmarge duwt het bedrag naar de onderkant. Dat houdt ook
   stand als een regel op een ander schermformaat anders afbreekt.

   LET OP: hier stond .tarief__regel:last-of-type { flex: 1 } met dezelfde
   bedoeling. Dat werkte niet, en dat is makkelijk over het hoofd te zien:
   :last-of-type kijkt naar het ELEMENT, niet naar de klasse. De laatste <p> in
   de kaart is het bedrag, en dat heeft de klasse .tarief__regel niet — dus de
   regel raakte niets.

   Het bedrag staat in de bron op 30pt (40px) in een blok dat zelf 60px/1.4 is;
   die 84px bepaalt de regelhoogte. Zie ook .prijsblok__bedrag. */
.tarief__bedrag {
  margin: auto 0 0;
  color: var(--merk);
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  /* 60px op het blok en 40px op de span, net als in de bron. De 60px is niet
     zichtbaar — er staat geen tekst op die maat — maar hij bepaalt wél waar de
     basislijn in de regel valt. Met alleen 40px stond het bedrag 7px hoger. */
  font-size: 60px;
  line-height: 1.4;                   /* = 84px */
}
.tarief__bedrag span { font-size: 40px; }


/* ---------------------------------------------------------------------------
   28. Het inzoom-effect

   In de bron dragen twee dingen class="wow zoomIn": de vier voettekst-iconen
   (data-wow-delay="0.4s") en de tariefkaarten op /lcb-praktijkopdracht/
   (data-wow-delay="0.3s" data-wow-duration="2s").
   Dat is WOW.js plus animate.css: zodra ze in beeld scrollen, komen ze op met
   een zoom. Letterlijk uit animate.css:

       @keyframes zoomIn { 0% { opacity:0; transform:scale3d(.3,.3,.3) }
                           50% { opacity:1 } }
       .animated { animation-duration: 1s; animation-fill-mode: both }

   Hier zonder bibliotheek: dezelfde keyframes, en site.js zet de klasse zodra
   de voettekst in beeld komt.
--------------------------------------------------------------------------- */
@keyframes zoomIn {
  0%   { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  50%  { opacity: 1; }
}

/* fadeIn uit animate.css — de eenvoudigste van de drie. */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Onzichtbaar ZOLANG de animatie nog niet is gestart — let op de :not().
   Dat is essentieel, en de reden is niet vanzelfsprekend:

   De keyframes hierboven stoppen bij 50%. Er is geen 100%. Wat de animatie op
   100% moet tonen, haalt de browser dan uit de eigen stijl van het element.
   Stond daar opacity:0, dan zou de animatie ná de zoom weer naar onzichtbaar
   lopen — en met animation-fill-mode:both blijft hij daar staan. De iconen
   komen dan op en verdwijnen weer.

   Met :not(.is-zichtbaar) geldt de regel alleen vóór de animatie. Zodra de
   klasse erop staat is de eigen waarde opacity:1, en dus eindigt de animatie
   daar ook. Precies zoals animate.css het doet.

   Dit hangt aan .js-animatie, een klasse die site.js zelf op <html> zet.
   Zonder JavaScript wordt die nooit gezet en blijven de iconen gewoon staan —
   anders zou een bezoeker zonder scripts vier onzichtbare links overhouden. */
.js-animatie .site-voet__iconen a:not(.is-zichtbaar) { opacity: 0; }

.js-animatie .site-voet__iconen a.is-zichtbaar {
  animation-name: zoomIn;
  animation-duration: 1s;
  animation-delay: 0.4s;          /* data-wow-delay="0.4s" uit de bron */
  animation-fill-mode: both;
}

/* Wie "minder beweging" heeft ingesteld, krijgt geen zoom maar meteen het
   eindbeeld. De algemene regel bovenin zet animaties al uit; deze regel zorgt
   dat de iconen dan niet op opacity:0 blijven staan. */
@media (prefers-reduced-motion: reduce) {
  .js-animatie .site-voet__iconen a:not(.is-zichtbaar) { opacity: 1; }
}

/* De tariefkaarten op /lcb-praktijkopdracht/. Zelfde animatie, andere timing:
   in de bron staat er data-wow-delay="0.3s" data-wow-duration="2s" op, en die
   duur overschrijft de 1s van .animated. Twee seconden is lang voor een zoom,
   maar dat is wat de bron doet.

   Dezelfde :not(.is-zichtbaar) als hierboven, en om dezelfde reden: de
   keyframes stoppen bij 50%, dus de eigen opacity van het element bepaalt waar
   de animatie eindigt. */
.js-animatie .tarief:not(.is-zichtbaar) { opacity: 0; }

.js-animatie .tarief.is-zichtbaar {
  animation-name: zoomIn;
  animation-duration: 2s;         /* data-wow-duration="2s" uit de bron */
  animation-delay: 0.3s;          /* data-wow-delay="0.3s"              */
  animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
  .js-animatie .tarief:not(.is-zichtbaar) { opacity: 1; }
}

/* De vier geanimeerde blokken van de trainingspagina's. Uit de bron:

       <h3 class="headline-support wow fadeInDown">                 —
       <h1 class="headline wow fadeInDown" data-wow-delay="0.1s">
       <div class="when_where wow fadeIn"  data-wow-delay="0.4s">
       <div class="pricing-item … wow zoomIn" data-wow-delay="0.3s"
                                              data-wow-duration="2s">

   De eerste drie staan bovenaan de pagina en dus meteen in beeld; ze komen op
   zodra de pagina er is. Het investeringsblok staat lager en wacht tot je
   erbij bent — dat is precies wat de waarnemer in site.js regelt. */
.js-animatie .sectie--trainingkop .vraag:not(.is-zichtbaar),
.js-animatie .sectie--trainingkop .kop--groot:not(.is-zichtbaar),
.js-animatie .training__wanneer:not(.is-zichtbaar),
.js-animatie .prijsblok:not(.is-zichtbaar) { opacity: 0; }

.js-animatie .sectie--trainingkop .vraag.is-zichtbaar,
.js-animatie .sectie--trainingkop .kop--groot.is-zichtbaar {
  animation: in-omlaag 1s both;
}
.js-animatie .sectie--trainingkop .kop--groot.is-zichtbaar {
  animation-delay: 0.1s;
}

.js-animatie .training__wanneer.is-zichtbaar {
  animation: fadeIn 1s both;
  animation-delay: 0.4s;
}

.js-animatie .prijsblok.is-zichtbaar {
  animation: zoomIn 2s both;      /* data-wow-duration="2s" */
  animation-delay: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .js-animatie .sectie--trainingkop .vraag:not(.is-zichtbaar),
  .js-animatie .sectie--trainingkop .kop--groot:not(.is-zichtbaar),
  .js-animatie .training__wanneer:not(.is-zichtbaar),
  .js-animatie .prijsblok:not(.is-zichtbaar) { opacity: 1; }
}


/* ---------------------------------------------------------------------------
   29. Het groene paginasjabloon

   De bron heeft drie gekleurde sjablonen: page-fullcontent-green, -yellow en
   -orange. Alleen groen wordt gebruikt, op /circulariteitmeter/ (NL en EN).
   Daar zet de bron <div class="color-green"> om alles vanaf de titelbalk en
   overschrijft precies dit:

       .color-green .sub-header             { background-color: #2fb215 }
       .color-green a                       { color: #2fb215 }
       .color-green a.bread-link            { color: white }
       .color-green .btn.btn-success.btn-lg { groen, omgekeerd bij hover }

   Let op waar de regels NIET op staan. Het hoofdmenu valt in de bron buiten
   die div en blijft dus blauw. Daarom hangen de regels hieronder aan #inhoud
   en aan de voettekst, en niet aan "body a". Het kruimelpad zit binnen
   .sub-kop en blijft daardoor vanzelf wit, net als in de bron.
--------------------------------------------------------------------------- */
.kleur-groen .sub-kop { background-color: var(--groen); }

/* LET OP de :not(). Zonder die uitzondering ving deze regel ook de knoppen,
   en dan won hij het van .kleur-groen .blokknop verderop: die selector heeft
   twee klassen, deze een ID plus twee klassen — en een ID weegt zwaarder,
   ongeacht de volgorde in het bestand. Gevolg was groene tekst op een groen
   vlak. De knoppen halen hun kleur uit hun eigen regels hieronder. */
.kleur-groen #inhoud a:not(.blokknop):not(.knop-omlijnd),
.kleur-groen .site-voet__links a { color: var(--groen); }

/* De icoontjes in de voettekst blijven grijs — die staan in de bron los van
   de a-regel en veranderen daar ook niet mee. */
.kleur-groen .blokknop {
  background-color: var(--groen);
  border-color: var(--groen);
  color: var(--wit);
}

/* Dezelfde twee toestanden als de blauwe knop hierboven: :hover én
   :focus-visible, en ook de randkleur mee — anders bleef er bij aanwijzen een
   blauwe rand om een groene knop staan. */
.kleur-groen .blokknop:hover,
.kleur-groen .blokknop:focus-visible {
  background-color: var(--wit);
  border-color: var(--groen);
  color: var(--groen);
}

.kleur-groen .gebieden .gebied__icoon { color: var(--groen); }

/* ---------------------------------------------------------------------------
   30. De zoekresultatenpagina

   Alle maten hieronder komen uit de stylesheet van de bron
   (wp-content/themes/gather/style.css):

       .post-entry     { margin-bottom: 40px }
       .post-heading   { margin-top: 0; margin-bottom: 5px }
       .post-heading a { color: #5c5c5c; text-decoration: none }
       .post-meta      { font-size: 13px }
       h5              { font-size: 25px }
       .btn            { border-radius:3px; font-size:14px; font-weight:600;
                         text-transform:uppercase; padding:7px 20px }
       .btn-outline    { border-width:2px; border-color:#CACACA; color:#8C8C8C }
--------------------------------------------------------------------------- */
.zoektreffer { margin-bottom: 40px; }

/* Mét beeld: twee kolommen, 4/12 en 8/12 — de col-md-4 / col-md-8 van de bron.
   Zonder beeld staat er geen tweede kolom en loopt de tekst over de volle
   breedte; dat gebeurt vanzelf, want dan ontbreekt de modifier.
   Onder 768px zet de bron alle kolommen onder elkaar (col-md), dus hier ook. */
@media (min-width: 768px) {
  .zoektreffer--beeld {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 30px;
    align-items: start;
  }
}

.zoektreffer__beeld img { width: 100%; height: auto; }

.zoektreffer__titel {
  margin: 0 0 5px;
  font-size: 17px;
}
/* De bron zet de titel in de gewone tekstkleur, niet in het blauw van een
   link — pas bij aanwijzen verandert er iets. */
.zoektreffer__titel a,
.zoektreffer__titel a:hover { color: var(--tekst); }

.zoektreffer__meta {
  margin: 0 0 10px;
  font-size: 13px;
}

/* De omlijnde knop van de bron: geen vlak, alleen een rand. */
.knop-omlijnd {
  display: inline-block;
  padding: 7px 20px;
  border: 2px solid #CACACA;
  border-radius: 3px;
  background: none;
  color: #8C8C8C;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}
.knop-omlijnd:hover,
.knop-omlijnd:focus-visible {
  border-color: #818181;
  color: #8C8C8C;
}

@media (max-width: 767px) {
  .zoektreffer__titel { font-size: 16px; }
}

/* De paginering onder de zoekresultaten en onder de categorie-overzichten.
   In de bron is dit de .pagination van Bootstrap: een rij vierkantjes met een
   rand, waarbij de huidige pagina een gevuld vlak is. Deze regels ontbraken —
   de categoriepagina's toonden de nummers tot nu toe als kale tekst. */
.paginering { margin-top: 30px; }
.paginering ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.paginering a,
.paginering span {
  display: block;
  margin-left: -1px;            /* randen van buren vallen samen, één lijn dik */
  padding: 6px 12px;
  border: 1px solid var(--grijs-lijn);
  color: var(--merk);
  line-height: 1.42857143;
  text-decoration: none;
}
.paginering li:first-child a,
.paginering li:first-child span { margin-left: 0; border-radius: 3px 0 0 3px; }
.paginering li:last-child a,
.paginering li:last-child span { border-radius: 0 3px 3px 0; }

.paginering a:hover,
.paginering a:focus-visible { background-color: var(--grijs-licht); }

/* De pagina waar je nu bent is geen link, dus ook geen linkkleur. */
.paginering [aria-current="page"] {
  background-color: var(--merk);
  border-color: var(--merk);
  color: var(--wit);
}

/* De belt-blokken op /lean-trainingen/ staan in de bron ZONDER grijs vlak: die
   rij heeft daar geen vc_custom op de tekstkolommen. Het grijze vlak dat
   .toolbox__tekst standaard krijgt hoort bij de blokken op de HOMEPAGE
   (.vc_custom_1662630735644). Vandaar deze modifier — hij haalt alleen het
   vlak weg en laat de rest van de opbouw intact. */
.toolbox--vlak .toolbox__tekst {
  /* 20px en niet 10: nagemeten in de bron is er 24px tussen de onderkant van de
     blauwe knop en de kop eronder; met 10px kwamen wij op 14. */
  padding: 20px 0 0;
  background: none;
}

/* De kop boven de drie belt-blokken staat in de bron 75px onder de gekleurde
   balk, niet 95. De algemene regel geeft een eerste kop 45px bovenmarge (zie
   /lean-trainingen/ in het commentaar daar); hier moet dat 25px zijn. Even
   "zwaar" opgeschreven als die regel, anders wint hij. */
main > .sectie--trainingenkop:first-of-type > .inner > h2:first-child { margin-top: 25px; }

/* En 20px eronder in plaats van de 35px die .kop--klein elders geeft: nagemeten
   is er 48px tussen de koptekst en de bovenkant van de eerste blauwe knop. */
.sectie--trainingenkop .kop--klein { margin-bottom: 20px; }

/* En onder de drie blokken 3px in plaats van de 18px van .sectie--ruim:
   nagemeten is er 43px tussen "Lees verder" en de rand van het grijze vlak. */
.sectie--belts { padding-bottom: 8px; }


/* De vier vragen op /leanmeter/ en /circulariteitmeter/.
   In de bron zijn dit vier losse alinea's met style="padding-left: 40px" —
   dus ingesprongen, zónder bolletje. Hier blijft het een <ul>, want het ís een
   opsomming en dat hoort een schermlezer te horen; alleen de bolletjes gaan
   weg en de regelafstand volgt die van gewone alinea's. */
.vragen {
  list-style: none;
  /* De vier vragen staan in de bron in een eigen tekstblok, en dat brengt zijn
     eigen marge mee. Nagemeten: 47px tussen de inleidende zin en de eerste
     vraag, en 46px tussen de laatste vraag en de zin eronder. Met alleen de
     alineamarge van 10px kwamen wij op 21. */
  margin: 35px 0;
  padding-left: 40px;
}
/* Dezelfde afstand als een gewone alinea in de bron: p { margin: 0 0 10px }.
   Nagemeten geeft dat 37px van vraag tot vraag, en dat is ook wat de bron
   tussen de tweede, derde en vierde vraag laat zien. */
.vragen li { margin: 0 0 10px; }


/* ---------------------------------------------------------------------------
   31. Terug naar boven

   Uit de bron:
       .back_to_top { display: none; text-align: center; padding: 10px;
                      position: fixed; right: 20px; bottom: 20px;
                      opacity: 0.3; transition: opacity 0.3s ease }
   Het thema toont hem met JavaScript zodra je meer dan 1000px hebt gescrold.

   Hier staat hij standaard verborgen met opacity en pointer-events in plaats
   van display:none. Reden: zo kan hij zacht verschijnen, en zonder JavaScript
   is hij nog steeds bereikbaar met Tab — dan brengt :focus-visible hem terug
   in beeld.
--------------------------------------------------------------------------- */
.omhoog {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 60;
  padding: 10px;
  line-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.omhoog.is-zichtbaar {
  opacity: 0.3;
  pointer-events: auto;
}
.omhoog:hover { opacity: 1; }

/* Wie met het toetsenbord navigeert moet hem kunnen zien én bedienen, ook als
   de pagina nog niet ver genoeg gescrold is om hem te tonen. */
.omhoog:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

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


/* ---------------------------------------------------------------------------
   32. De belt-pagina's: leerdoelen en het investeringsblok
--------------------------------------------------------------------------- */

/* Drie kolommen, zoals de vc_col-sm-4 van de bron. Het icoon staat daar inline
   vóór de kop, met 40px inspringing op zowel de kop als de alinea eronder. */
.leerdoelen {
  list-style: none;
  margin: 57px 0 0;
  padding: 0;
  display: grid;
  gap: 55px 0;                        /* de bron heeft geen tussenruimte links/rechts:
                                         de kolommen dragen hun eigen 15px padding */
  grid-template-columns: 1fr;
}

/* Vanaf 768px drie kolommen naast elkaar, net als vc_col-sm-4 in de bron.

   De rij van de bron (vc_row-fluid) staat daar 15px buiten de container; samen
   met de 15px van de kolommen begint de eerste kolom precies op de rand van de
   container. Op een smal scherm mag dat NIET: daar zou de tekst dan buiten het
   scherm vallen, want er is geen ruimte om uit te steken. */
@media (min-width: 768px) {
  .leerdoelen {
    grid-template-columns: repeat(3, 1fr);
    margin-left: -15px;
    margin-right: -15px;
  }
}

.leerdoelen li { padding: 0 15px; }   /* het 15px-gootje van Bootstrap */

/* Geen flexbox maar gewone tekst met een plaatje ertussen, precies zoals in de
   bron: <h4><img …/>Historie</h4>. Dat is niet alleen dichter bij de bron, het
   is ook zichtbaar anders zodra de kop over twee regels loopt — met flexbox
   staat die tweede regel naast het icoon, in de bron eronder. */
.leerdoelen h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 10px;
  padding-left: 40px;
  font-size: 18px;                    /* de bron gebruikt hier een h4 */
}
/* display expliciet: de basisregels van de site zetten img op block, en dan
   zou de tekst onder het icoon terechtkomen in plaats van ernaast. */
.leerdoelen h3 img {
  display: inline-block;
  width: 64px;
  height: 64px;
  vertical-align: middle;
}
.leerdoelen p { padding-left: 40px; margin: 0; }

/* Het omkaderde blok met het bedrag. Uit de bron:
       .pricing-item     { padding:25px; border:3px solid #F2F2F2;
                           border-radius:5px; text-align:center }
       .plan-name        { text-transform:uppercase; font-weight:600 }
       .price            { font-size:60px; font-weight:700; font-family:Montserrat }
       .highlighted-plan { border-color:#1CA9EA }
       .highlighted-plan .price, .highlighted-plan .plan-name { color:#1CA9EA }
   Het bedrag staat in de bron op een eigen font-size van 30pt (= 40px), dus
   niet op de 60px van .price.

   De breedte is 4/12 van de container, gecentreerd — in de bron met een lege
   kolom ervoor, hier met marges. */
.prijsblok {
  max-width: 358px;                   /* nagemeten in de bron: 4/12 van de rij */
  margin: 69px auto 71px;
  padding: 25px;
  border: 3px solid var(--merk);
  border-radius: 5px;
  text-align: center;
}
.prijsblok dt {
  text-transform: uppercase;
  font-weight: 600;
  color: var(--merk);
}
.prijsblok dd { margin: 0; }
.prijsblok__bedrag {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  /* In de bron staat het bedrag (30pt = 40px) in een <span> binnen een blok
     dat zelf 60px/1.4 is. Die 60px is nergens te zien — er staat geen tekst op
     die maat — maar hij bepaalt twee dingen: de regelhoogte van 84px én waar
     de basislijn binnen die regel valt. Stond hier alleen 40px, dan klopte de
     hoogte wel maar stond het bedrag 7px te hoog in het kader. */
  font-size: 60px;
  line-height: 1.4;                   /* = 84px */
  color: var(--merk);
  margin: 10px 0 !important;
}
.prijsblok__bedrag span { font-size: 40px; }
.prijsblok__btw { color: var(--tekst); }

/* De slotzin van de belt-pagina's staat in de bron in een <p class="lead">.
   Bootstrap geeft die op schermen vanaf 768px 21px mee. */
.lead { font-size: 16px; font-weight: 300; margin-bottom: 20px; }
@media (min-width: 768px) { .lead { font-size: 21px; } }

/* De vier banen van een belt-pagina. De maten zijn nagemeten op
   /lean-trainingen/black-belt/ in de bron; ze staan hier per sectie omdat de
   bron ze daar ook per rij zet (elke vc_row heeft zijn eigen vc_custom_…). */

/* 1. de kop met de lesuren — 25px onder de intro, net als in de bron */
.sectie--belt-kop { padding-bottom: 25px; }

/* 2. het grijze vlak met de leerdoelen. 35px boven de kop (de 35px die
      WPBakery aan elke kolom in een gevulde rij geeft) en 60px onder. */
.sectie--leerdoelen { padding-top: 10px; padding-bottom: 60px; }

/* 3. de witte baan met het bedrag */
.sectie--inschrijving { padding-top: 35px; padding-bottom: 26px; }

/* 4. het grijze vlak met de slotzin */
.sectie--slot { padding-top: 35px; padding-bottom: 16px; }

/* De eerste kop staat op een belt-pagina 75px onder de blauwe balk, niet 95:
   de rij is daar een gewone vc_row, zonder de extra ruimte die de eerste rij
   op /lean-trainingen/ wél heeft. Nagemeten in de bron. */
/* Even "zwaar" opgeschreven als de regel hierboven (main > .sectie:first-of-type
   > .inner > h2:first-child), anders wint die en blijft de kop 45px staan. */
main > .sectie.sectie--belt-kop > .inner > h2:first-child { margin-top: 25px; }

/* En de intro hangt in de bron in HETZELFDE blok als de kop: geen 25px extra
   erboven, alleen de gewone 10px ondermarge van de kop. */
.sectie--belt-kop .sectie__intro { padding-top: 0; }
.sectie--belt-kop > .inner > h2 { margin-bottom: 10px; }

/* In de bron staat op deze twee alinea's style="text-align: center". */
.sectie--inschrijving > .inner > p,
.sectie--slot .lead { text-align: center; }

/* Twee afwijkingen van de Yellow Belt-pagina, allebei nagemeten in de bron.

   1. Kop en intro staan daar in TWEE aparte tekstblokken (wpb_text_column) in
      plaats van in één, en zo'n blok brengt zijn eigen ondermarge mee. Op de
      green- en black-belt-pagina staan ze wél in één blok. */
.sectie--belt-kop.sectie--kop-los .sectie__intro { padding-top: 27px; }

/* 2. De leerdoelen springen daar 80px in in plaats van 40px. Dat lijkt een
      slordigheid van de bron, maar we volgen de bron. */
.leerdoelen--diep h3,
.leerdoelen--diep p { padding-left: 80px; }


/* ---------------------------------------------------------------------------
   33. /leanmeter/ — de eerste witte sectie

   Nagemeten in de bron (venster 1400px breed, afstand tussen de inkt):
       blauwe balk  → meter          50px
       meter        → kop            41px
       kop          → eerste regel   48px

   Wij kwamen op 70 en 93. Dat komt doordat kop en intro bij ons in twee losse
   secties staan die allebei 45px binnenruimte meebrengen, terwijl ze in de
   bron in één kolom onder elkaar hangen.
--------------------------------------------------------------------------- */

/* .lcs-img brengt 25px van zichzelf mee — die is nagemeten op /trainersupport/,
   waar het beeld MIDDEN op de pagina staat. Bovenaan komt de 45px van .sectie
   er nog bij; dan is 25 te veel. */
.sectie--meterkop .lcs-img { margin-top: 5px; }

/* Hetzelfde voor de metersnelheidsmeter op /circulariteitmeter/: 50px onder de
   groene balk, 35px boven de kop. .beeld-midden brengt van zichzelf 3rem/1,5rem
   mee — die maten zijn nagemeten op /certificeringen/, waar het beeld MIDDEN op
   de pagina staat en er geen sectieruimte boven zit. */
.sectie--meterkop .beeld-midden { margin: 5px 0 35px; }

/* De sectie die direct op de kopsectie volgt, hoort geen eigen ruimte bovenaan
   te hebben: de 35px ondermarge van de kop is de hele tussenruimte. */
.sectie--aansluitend { padding-top: 0; }


/* ---------------------------------------------------------------------------
   34. De gele Blockchain-pagina's

   Zelfde opzet als .kleur-groen hierboven: de bron zet <div class="color-yellow">
   om alles vanaf de titelbalk. Het hoofdmenu valt daarbuiten en blijft blauw,
   dus hangen deze regels aan #inhoud en aan de voettekst.
--------------------------------------------------------------------------- */
.kleur-geel .sub-kop { background-color: var(--geel); }

/* De :not() om dezelfde reden als bij groen: zonder die uitzondering vangt
   deze regel ook de knoppen, en dan staat er gele tekst op een geel vlak. */
.kleur-geel #inhoud a:not(.blokknop):not(.knop-omlijnd),
.kleur-geel .site-voet__links a { color: var(--geel); }

.kleur-geel .blokknop {
  background-color: var(--geel);
  border-color: var(--geel);
  color: var(--wit);
}
.kleur-geel .blokknop:hover,
.kleur-geel .blokknop:focus-visible {
  background-color: var(--wit);
  border-color: var(--geel);
  color: var(--geel);
}

/* LET OP: het investeringsblok blijft BLAUW, ook op deze gele pagina's. In de
   bron raken de .color-yellow-regels alleen de balk, de links en de knoppen —
   .pricing-item heeft zijn eigen kleur en staat daarbuiten. Nagekeken in de
   bron: blauwe rand, blauw bedrag, gele knop. */


/* ---------------------------------------------------------------------------
   35. De trainingspagina's (includes/training.php)

   Zes banen, afwisselend wit en grijs. Alle maten komen uit de vc_custom-regels
   van de bron: elke rij daar heeft padding-top/bottom 25px, en de kolom met de
   kop nog eens 25px onder.
--------------------------------------------------------------------------- */

/* De uitgelichte afbeelding boven de kop (alleen de Blockchain-pagina's). */
.training__beeld {
  max-width: var(--breedte);
  /* 50px onder de gekleurde balk (.cth-page heeft in de bron margin: 50px 0)
     en 46px eronder — nagemeten. */
  margin: 50px auto 46px;
  padding: 0 var(--container-ruimte);
}
.training__beeld img { width: 200px; height: 200px; }

/* Het kopblok. Het LCB-keurmerk staat erachter als achtergrondbeeld:
       background-position: center; background-repeat: no-repeat;
       background-size: contain
   Contain en niet cover: het zegel moet heel blijven, ook als het blok hoger
   wordt dan het beeld breed is. */
.sectie--trainingkop {
  padding-top: 25px;
  padding-bottom: 25px;
  background-image: url('/wp-content/uploads/2020/10/lcb-keurmerk.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
/* .sectie--gecentreerd centreert alleen de h2; in dit blok staat álles
   gecentreerd, want in de bron heeft elke regel style="text-align: center". */
/* GEEN zegel op de Blockchain-pagina's (/15-sep-2023/ en
   /bc-data-op-aanvraag/, in beide talen).

   LET OP — dit is een BEWUSTE AFWIJKING. Nagemeten: de bron zet het zegel daar
   wél achter de kop, met exact dezelfde regel als op de andere zes
   trainingspagina's (vc_custom_1604324632491). Op verzoek staat het hier uit:
   op die pagina's is de tekst grijs op een lichtgrijs zegel en dat leest
   slecht. Terugzetten = dit blok weghalen.

   De koppeling loopt via .kleur-geel omdat dat precies dezelfde vier pagina's
   zijn — geel is in de bron het sjabloon van de Blockchain-trainingen. */
.kleur-geel .sectie--trainingkop { background-image: none; }

.sectie--trainingkop .vraag,
.sectie--trainingkop .lead,
.sectie--trainingkop .training__knop,
.sectie--trainingkop .training__meta { text-align: center; }
/* De regel boven de titel is in de bron een h3 met class="headline-support":
       font-weight: 600; color: #818181
   en de h3-maat van 20px uit het blok wp-custom-css. */
.sectie--trainingkop .vraag {
  font-size: 20px;
  font-weight: 600;
  color: #818181;
  margin: 20px 0 16px;                /* 16 en niet 10: nagemeten in de bron */
}
.sectie--trainingkop .kop--groot { margin-top: 0; }   /* .headline in de bron */

/* .when_where in de bron: 30px lucht boven en onder de twee dikke regels. */
.training__wanneer { padding: 30px 0; }
.training__wanneer .lead { margin: 0 0 20px; line-height: var(--regelhoogte); }

/* De knop hangt in de bron 25px omhoog (.sign-up heeft margin-top: -25px). */
/* De knop hangt in de bron 25px omhoog (.sign-up heeft margin-top: -25px) en
   het blok eronder heeft de gewone 35px ondermarge van WPBakery. */
.training__knop { margin: -25px 0 52px; }
.training__meta { text-align: center; }

/* De leerdoelen staan hier krapper dan op de belt-pagina's. Daar is de rij een
   vc_row-has-fill en geeft WPBakery elke kolom 35px extra bovenruimte; hier is
   de rij niet gevuld en valt die 35px weg. Vandaar 20px in plaats van 55px
   tussen de twee regels, en 36px in plaats van 57px onder de kop. */
.sectie--doelen .leerdoelen { margin-top: 36px; gap: 20px 0; }

/* De vier gekleurde banen. .blok--grijs is het grijze vlak binnen de container;
   de sectie eromheen levert alleen de ruimte ervoor en erna. */
.sectie--doelen,
.sectie--interactie,
.sectie--trainer,
.sectie--investering,
.sectie--citaten { padding-top: 0; padding-bottom: 0; }

/* Alleen in de interactiebaan zit ÁLLES in dezelfde kolom, en die kolom heeft
   in de bron nog eens 25px onderruimte (.vc_custom_1601890396925) boven op de
   25px van de rij. Bij de trainer en de citaten hangt die 25px aan de kolom
   met de kop, dus daar valt hij middenin het blok en niet onderaan. */
.sectie--interactie .blok__inner,
.sectie--investering .blok__inner { padding-bottom: 50px; }

.sectie--doelen  .blok--grijs { margin-bottom: 25px; }

/* De lead-alinea van de interactiebaan staat in de bron gecentreerd
   (class="lead text-center"); de gewone alinea eronder niet. De regelhoogte is
   daar 36px — nagemeten aan de twee regels van de belt-pagina's. */
.lead--gecentreerd { text-align: center; }
.sectie--interactie .lead { line-height: 36px; }

/* Op de belt-pagina's staat de hele interactietekst in ÉÉN lead-alinea; daar
   heeft de rij in de bron 25px minder bovenruimte dan op de Blockchain-
   pagina's, waar het twee losse alinea's zijn. Nagemeten: 34px boven de eerste
   regel tegen 59px daar. De :only-child herkent precies dat verschil. */
.sectie--interactie .blok__inner:has(> .lead:only-child) { padding-top: 0; }

/* Het laatste element in een blok verliest zijn ondermarge: in de bron zit er
   een wrapper omheen die dat ook doet. Zonder deze regel telt die marge op bij
   de binnenruimte van het blok en wordt elk blok een paar pixels te hoog. */
.blok__inner > :last-child { margin-bottom: 0; }

/* De trainer: beschrijving links, dan de ronde foto en de naam gecentreerd. */
.trainer__tekst { text-align: left; }
.trainer__foto,
.trainer__naam  { text-align: center; }
.trainer__foto  { margin: 25px 0 0; }
/* De foto is een link; die mag geen onderstreping of kleur van de link erven. */
.trainer__foto a { display: inline-block; text-decoration: none; }
.trainer__foto img {
  width: 150px;
  height: 150px;
  display: inline-block;
  border-radius: 50%;                 /* vc_box_shadow_circle in de bron */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  /* block en niet inline: een inline plaatje staat op de tekstregel en laat
     daaronder nog een paar pixels ruimte voor staartletters staan. */
  display: block;
  margin: 0 auto;
}
.trainer__naam { margin: 0; }

/* De kop van dit blok heeft in de bron GEEN bovenmarge: hij is het eerste
   element in de kolom en die kolom heeft alleen onderruimte
   (.vc_custom_1601890396925), geen bovenruimte. Bij de leerdoelen en de trainer
   heeft de kolom die wél, vandaar dat het daar anders ligt. */
.sectie--citaten .blok__inner h2 { margin-top: 0; }

/* De reacties: drie kolommen van 4/12, zonder naam eronder. De 25px boven de
   lijst is de onderruimte van de kopkolom in de bron. */
.citaten {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 30px 0;
  grid-template-columns: 1fr;
  text-align: left;
}
@media (min-width: 768px) {
  .citaten {
    grid-template-columns: repeat(3, 1fr);
    margin-left: -15px;
    margin-right: -15px;
  }
  .citaten > li { padding: 0 15px; }
}
/* Precies het .testblock van de bron:
       padding: 20px; background: #F6F6F6; border-radius: 5px;
       font-family: Georgia; font-style: italic;
       font-size: 16px; line-height: 28px
   met een driehoekje eronder op 20% van links (.testblock:after). */
.citaten blockquote {
  position: relative;
  margin: 0 0 25px;
  padding: 20px 20px 30px;
  background: #f6f6f6;
  border-radius: 5px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: 16px;
  line-height: 28px;
  /* 30px onder in plaats van 20: in de bron staat onder de tekst nog een leeg
     .clientblock (daar horen normaal de foto en de naam van de spreker, maar
     die zijn hier niet ingevuld). De 25px eronder is de ruimte die dat blokje
     buiten het vlak inneemt; het driehoekje heeft hem ook nodig. Nagemeten. */
}
.citaten blockquote p { margin: 0 0 10px; }   /* de alinea-marge van de bron */

/* De aanhalingstekens staan in de bron in de tekst zelf. Hier zet de opmaak ze
   erbij, zodat ze niet in de gegevens hoeven te staan. */
.citaten blockquote p::before { content: '\201C'; }
.citaten blockquote p::after  { content: '\201D'; }

/* Het driehoekje onder het blokje. Puur versiering, dus content: '' — een
   schermlezer hoort er niets van. */
.citaten blockquote::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 20%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top-color: #f6f6f6;
}

/* De aanmeldknop staat in de bron IN het investeringsblok, onder het bedrag. */
.sectie--investering .prijsblok { margin: 0 auto; }
.prijsblok__gegevens { margin: 0; }
.prijsblok__knop { margin: 10px 0 0; }

/* WPBakery geeft elke kolom in een VOLLE-BREEDTE rij 35px binnenruimte
   bovenaan — zie ook de regel bij .tekst-beeld. Onze .sectie brengt er 45 mee;
   in het grijze vlak op /leanmeter/ zijn dat er 35, net als in de bron.

   De regel hing eerst aan .volvlak--grijs, alsof het aan de vulkleur lag. Dat
   is niet zo: op /circulariteitmeter/ staat de slotsectie ("zelf inzetten?")
   in de bron in een volle-breedte rij zónder kleur en heeft die kolom
   dezelfde 35px. Vandaar dat de klasse nu op zichzelf staat. */
.sectie--vulling { padding-top: 35px; }

/* ---------------------------------------------------------------------------
   34. /contact/

   Nagemeten in de bron (venster 1400px breed, afstand tussen de inkt):
       blauwe balk → "We helpen je graag!"   78px   (bij ons 103)
       intro       → grijze balk             55px   (bij ons 65)
       werkgebied  → kaart                  110px   (bij ons 120)
--------------------------------------------------------------------------- */

/* De eerste sectie brengt hier zelf al 50px mee (.sectie--50), precies zoals
   .cth-page in de bron. De 45px die main > .sectie:first-of-type aan een
   eerste kop geeft, telt daar dus dubbel; de kop hoeft alleen zijn eigen 20px. */
main > .sectie--50:first-of-type > .inner > .kop--groot:first-child,
main > .sectie--whitepaper:first-of-type > .inner > h2:first-child,
main > .sectie--boeklancering:first-of-type > .inner > h2:first-child { margin-top: 20px; }

/* In de bron staat elk tekstblok in een .wpb_text_column, en daar geldt
       .wpb_text_column p:last-child { margin-bottom: 0 }
   De 10px ondermarge van de laatste alinea komt dus NIET bovenop de 50px
   binnenruimte van de sectie. Bij ons wel — vandaar deze regel. */
.sectie--tekstblok > .inner > p:last-child { margin-bottom: 0; }


/* ---------------------------------------------------------------------------
   36. /circulariteitmeter/ — de kaarten met hun rapportagebeeld

   In de bron zit elk beeld IN de kolom van zijn kaart, direct onder het witte
   vlak, en niet in een eigen rij eronder. Dat is zichtbaar: de drie witte
   vlakken zijn niet even hoog (de bron zet per kolom een eigen binnenruimte
   onderaan — 135, 27 en 55px) en dus beginnen de drie beelden ook niet op
   dezelfde hoogte. Het linker beeld staat er 40px hoger dan de andere twee.

   Waarom een modifier en niet gewoon .stap? Omdat /leanmeter/ dezelfde
   .stappen gebruikt met de beelden nog wél in een aparte rij (.rapportages).
   Die pagina blijft zo staan zoals hij stond; hij kan later dezelfde vorm
   krijgen door de klasse over te nemen.
--------------------------------------------------------------------------- */

/* Twee smaken van dezelfde kolomopbouw:

     --metbeeld   met een rapportagebeeld onder elke kaart (/circulariteitmeter/).
                  align-items:start, want anders rekt het raster elke cel tot de
                  hoogte van de langste — en dan beginnen de beelden weer wél
                  op dezelfde hoogte.

     --gelijk     zonder beeld (/en/circulariteitmeter/). Daar staan de drie
                  witte vlakken in de bron juist wél even hoog: nagemeten
                  eindigen ze op 1558, 1559 en 1560px, dat is één rij. De
                  binnenruimte per kolom blijft de ondergrens; het langste vlak
                  bepaalt de hoogte en de andere twee rekken mee.

   De tussenruimte is 31px: de bron heeft kolommen van 359px met een steek van
   390,7px, en (1140 − 2 × 31) / 3 komt daar op een halve pixel na op uit. */
.stappen--metbeeld,
.stappen--gelijk {
  gap: 31px;
}
.stappen--metbeeld { align-items: start; }

/* Het <li> is nu de KOLOM en niet meer de kaart: geen vlak, geen binnenruimte.
   Het witte vlak erin neemt dat over. */
.stappen--metbeeld .stap,
.stappen--gelijk .stap {
  display: block;
  padding: 0;
  background: none;
  border-radius: 0;
}

/* De kolom is even hoog als de langste van de drie (dat doet het raster al);
   met flex rekt het witte vlak daarin mee tot dezelfde onderrand. */
.stappen--gelijk .stap { display: flex; }
.stappen--gelijk .stap__kaart { flex: 1; }

/* Het witte vlak. In de bron: padding 15px opzij en bovenaan, onderaan per
   kolom apart ingesteld — die waarde komt als --kaart-onder uit de HTML mee.
   Geen ronde hoeken: de vlakken van WPBakery zijn recht.
   35px eronder is dezelfde blokmarge als overal op deze pagina. */
.stap__kaart {
  padding: 15px 15px var(--kaart-onder, 27px);
  margin-bottom: 35px;
  background: var(--wit);
}
/* De kop staat in de bron 35px onder de bovenrand van het vlak: 15px
   binnenruimte plus de 20px bovenmarge die elke h3 meebrengt. .stap h3 zette
   die bovenmarge op 0, want dáár zit de ruimte in de binnenruimte van de kaart
   zelf. */
.stap__kaart h3 { margin-top: 20px; }
/* 40px ingesprongen, net als elke lijst in de bron (de Bootstrap-maat). */
.stap__kaart ul { margin: 0; padding-left: 40px; list-style: disc; }
.stap__kaart ul ul { list-style: circle; }

/* Het beeld vult zijn kolom en houdt zijn eigen verhouding; geen rand, want
   die heeft de bron ook niet. */
.stap > .stap__beeld { margin: 0 0 35px; }
.stap__beeld img { display: block; width: 100%; height: auto; }

/* Een gewone opsomming met de maten van Bootstrap uit de bron:
       ul { margin: 0 0 10px; padding-left: 40px }
   De browser doet uit zichzelf 16px boven én onder; daardoor stond de lijst
   onder "Interesse?" te laag en de knop eronder te ver weg. */
.opsomming { margin: 0 0 10px; padding-left: 40px; }

/* De knop is in de bron het laatste blok van de rij, en daar hoort dezelfde
   35px onder als onder elk ander blok. .blokknop_container brengt 20px mee plus
   de 10px alineamarge — samen 30. Alleen hier bijgesteld, want die klasse staat
   op negen andere pagina's ook. */
.sectie--meterslot .blokknop_container { padding-bottom: 25px; }


/* ---------------------------------------------------------------------------
   36. Het inschrijfvenster

   Het formulier staat in de HTML gewoon onderaan de pagina; site.js verplaatst
   het naar een <dialog>. Zonder JavaScript komt dit blok dus nooit in beeld en
   valt de site terug op het formulier op de pagina zelf.

   <dialog> regelt zelf dat het venster bovenop alles staat, dat de rest van de
   pagina onbereikbaar wordt en dat Escape sluit. Hier staat alleen hoe het
   eruitziet.
--------------------------------------------------------------------------- */
.venster {
  position: relative;
  width: min(44rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  padding: 0;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.28);
  background: var(--wit);
  color: var(--tekst);
  overflow: auto;
}

/* ::backdrop is het vlak achter het venster. Alleen een <dialog> die met
   showModal() is geopend heeft er een. */
.venster::backdrop { background: rgba(0, 0, 0, 0.55); }

/* Het blok dat hierheen verhuisde is een gewone paginasectie: die brengt zijn
   grijze vlak en zijn containerbreedte mee. Binnen het venster hoort dat niet. */
.venster > .sectie {
  padding: 2.25rem;
  background: none;
}
.venster > .sectie > .inner {
  max-width: none;
  padding: 0;
}
.venster h3 { margin-top: 0; }

.venster__sluit {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--tekst);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.venster__sluit:hover,
.venster__sluit:focus-visible { background: var(--grijs-licht); }

/* Op een breed scherm staan naam en e-mail naast elkaar, net als in de popup
   van de bron. Alles wat breed is — de keuzevraag, het tekstvak, de knop en de
   meldingen — loopt over beide kolommen. */
@media (min-width: 34rem) {
  .venster .form {
    max-width: none;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
  }
  .venster .form > fieldset,
  .venster .form > button,
  .venster .form > .form__melding,
  .venster .form > .form__veld:has(textarea) { grid-column: 1 / -1; }
}

/* De twee keuzerondjes naast elkaar, zoals in de popup van de bron. Op de
   pagina zelf staan ze onder elkaar; daar is de kolom smaller. */
.venster .form fieldset { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.venster .form fieldset legend { flex: 0 0 100%; }

.venster .form button { justify-self: start; }

/* Het venster schuift open. Wie bewegingen liever niet ziet, krijgt hem
   gewoon meteen. */
@media (prefers-reduced-motion: no-preference) {
  .venster[open] { animation: venster-in 0.18s ease-out; }
  @keyframes venster-in {
    from { opacity: 0; transform: translateY(0.75rem); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------------------------------------------------------------------------
   35. /privacy-statement/ — de tussenkoppen

   In de bron is "Ons gebruik van verzamelde gegevens" een <h6> van 17px vet
   (uit het blok wp-custom-css van de bron) en zijn de kopjes daaronder geen
   koppen maar <strong> in de alinea zelf: 16px, gewicht 600, in de tekstletter.

   Bij ons zijn het echte koppen (h2 en h3) — dat blijft zo, want de
   kopstructuur hoort te kloppen met wat je ziet — maar ze krijgen hier het
   formaat van de bron. Visueel gelijk, technisch juist.
--------------------------------------------------------------------------- */
/* Een <h6> krijgt in de bron (Bootstrap) 10px marge boven zich, waar een h2
   er 20 heeft. Nagemeten: 35px tussen de laatste regel van de alinea en deze
   kop, en nog eens 35px tussen de kop en het eerste kopje eronder. */
.sectie--privacy h2 { font-size: 17px; margin-top: 10px; }

/* Een tussenkop staat in de bron ín de alinea, met een <br> erachter. Hij
   loopt dus mee in de regelafstand van de tekst: dezelfde letter, 16px, en
   geen ruimte tussen de kop en de regel eronder. */
.sectie--privacy h3,
.sectie--privacy h4 {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: inherit;
  margin: 10px 0 0;
}

/* "Functionele cookies" en "Analytische cookies" staan een niveau dieper. De
   bron zet die twee niet vet maar onderstreept ze:
       <span style="text-decoration: underline;">Functionele cookies</span>
   Zo blijven de twee niveaus ook zonder verschil in lettergrootte te zien. */
.sectie--privacy h4 { font-weight: inherit; text-decoration: underline; }

/* ---------------------------------------------------------------------------
   36. /algemene-voorwaarden/

   Nagemeten in de bron (venster 1400px breed):
       alinea → knop                    50px   (bij ons 15)
       knop   → de CONTACT-knop         136px  (bij ons 81)
         in de bron opgebouwd uit: 35px ondermarge van het tekstblok,
         50px van .cth-page om de pagina-inhoud, 40px binnenruimte boven in de
         voettekst en 10px marge boven de knop daar.
--------------------------------------------------------------------------- */

/* .cth-page { margin: 50px 0 } om de pagina-inhoud heen. Onze .sectie heeft er
   45 boven; hier moeten het er 50 zijn. De 50px ONDER de inhoud staat al op de
   voettekst zelf (.site-voet { margin-top: 50px }), dus die hoort hier niet
   nog een keer. */
.sectie--voorwaarden { padding-top: 50px; }

/* Een knopblok is in de bron een gewoon tekstblok en heeft dus 35px marge
   boven en onder zich. LET OP: de algemene .blokknop_container hierboven zegt
   "padding-top:35" zonder eenheid; dat is geen geldige CSS en doet dus niets.
   Hier staat het wél goed. De 25px onder plus de 10px alineamarge maken samen
   de 35px van de bron. */
.sectie--voorwaarden .blokknop_container {
  padding-top: 35px;
  padding-bottom: 25px;
}

/* ---------------------------------------------------------------------------
   37. De homepage

   Om de inhoud van de homepage staat in de bron GEEN .cth-page — dat is de
   wrapper die op alle andere pagina's 50px boven en onder meebrengt. Elke
   sectie heeft daar dus alleen zijn eigen 25px:

       .vc_custom_1662633241752 { padding-top: 25px }                 kop + intro
       .vc_custom_1662618251745 { margin: 25px 0; padding: 25px 0 }   de zes tegels
       .vc_custom_1673970255545 { padding-top: 25px }                 de voordelen
       .vc_custom_1680169373264 { padding-top: 25px }                 het grijze vlak

   Onze .sectie brengt 45px mee. Dat is op elke sectie van deze pagina 20px te
   veel. Nagemeten in de bron (venster 1400px breed):

       hero        → "Boost your LEAN services"    51px   (bij ons 71)
       intro       → de tegels                     65px   (bij ons 40)
       tegels      → "Use the complete toolbox"   115px   (bij ons 160)
       grijze rand → "LCB believes in ..."         50px   (bij ons 70)
       citaat      → de foto                       15px   (bij ons 29)
--------------------------------------------------------------------------- */
main:has(> .hero) > .sectie { padding-top: 25px; }

/* De tegelsectie heeft in de bron 25px marge bovenop zijn eigen 25px
   binnenruimte. Samen met de ondermarge van de introtekst is dat 65px. */
main:has(> .hero) > .sectie--ruim { margin-top: 25px; }

/* De Nederlandse bron heeft boven dit kopblok 25px extra (een eigen marge op
   de kolom); de Engelse niet. Vandaar dat de regel hierboven op taal staat. */
html[lang^="en"] #kop-voordelen { padding-top: 0; }

/* De alinea met de referentie is in de bron een gewone <p> met 10px eronder,
   niet 1,5rem. Dat scheelde 14px tussen het citaat en de foto. */
.referentie__regel { margin: 0 0 10px; }

/* De 50px boven de voettekst hoort bij .cth-page, en die wrapper staat NIET om
   de homepage heen (zie hierboven). Wat er in de bron onder het grijze vlak
   overblijft is 35px: de bolletjes van de slider hangen daar buiten de sectie
   (position: absolute; bottom: -40px) en houden die ruimte vrij.
   Nagemeten in de bron: 86px tussen de onderrand van het grijze vlak en de
   CONTACT-knop; bij ons waren dat er 101. */
main:has(> .hero) + .site-voet { margin-top: 35px; }

/* ---------------------------------------------------------------------------
   38. /trainersupport/

   De inhoud van deze pagina staat in de bron in volle-breedte secties
   (.gather_sec), net als op de homepage: geen .cth-page eromheen, alleen 25px
   binnenruimte boven en onder per sectie. Onze .sectie heeft er 45 boven en
   niets onder.

   Nagemeten in de bron (venster 1400px breed):
       blauwe balk → eerste kop            76px   (bij ons 96)
       grijze rand → de kop erin           60px   (bij ons 80)
       tekst+beeld → onderkant sectie      41px   (bij ons 43)
       laatste regel → onderkant grijs     39px   (bij ons 14)
       alinea → het trainercertificaat     60px   (bij ons 48)
       certificaat → het grijze vlak       40px   (bij ons 20)
--------------------------------------------------------------------------- */
main.trainerpagina > .sectie { padding: 25px 0; }

/* De 38px onderaan ving eerder op dat de sectie zelf niets meebracht. Nu de
   sectie zijn eigen 25px heeft, blijft hier de rest over. */
main.trainerpagina .tekst-beeld { padding-bottom: 11px; }

/* Het trainercertificaat is in de bron een eigen tekstblok en heeft dus 35px
   marge boven zich. */
main.trainerpagina .lcs-img { margin-top: 35px; padding-bottom: 10px; }


/* ---------------------------------------------------------------------------
   37. De whitepaperpagina

   De bron zet het beeld links (4/12) en de tekst rechts (8/12), verticaal op
   elkaars midden (vc_row-o-content-middle). Daaronder een grijze baan over de
   volle vensterbreedte met de tweede kop en de knop.
--------------------------------------------------------------------------- */

/* Dezelfde Bootstrap-rekensom als bij .tekst-beeld, maar omgedraaid: 4/12 voor
   het beeld en 8/12 voor de tekst. Bootstrap rekent met een rij die 30px
   BREDER is dan de container (.row { margin: 0 -15px }) en geeft elke kolom
   15px links en rechts. Van 1170 blijft dan 360 over voor het beeld en 750
   voor de tekst, met 30px ertussen. */
.beeld-tekst {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
  align-items: center;                /* vc_row-o-content-middle */
  text-align: left;                   /* de sectie is gecentreerd, dit blok niet */
  /* De ruimte onder de kop komt in de bron van het tekstblok eromheen
     (.wpb_content_element { margin-bottom: 35px }), niet van de kop zelf.
     Nagemeten: 37px tussen de onderkant van de koptekst en de bovenkant van
     het beeld. */
  margin-top: 35px;
}
@media (min-width: 768px) {
  .beeld-tekst { grid-template-columns: 360fr 750fr; }
}

/* Het beeld staat in de bron gecentreerd in zijn eigen kolom
   (wpb_single_image vc_align_center). */
.beeld-tekst figure {
  margin: 0;
  text-align: center;
}
.beeld-tekst figure img { width: 150px; height: 150px; }
.beeld-tekst p { margin: 0; }

/* De grijze baan. Nagemeten in de bron: 60px boven de kop en 35px onder de
   knop; de sectie zelf brengt daar 25px van mee. */
.sectie--download { padding-top: 35px; padding-bottom: 25px; }

/* En de witte baan erboven sluit met 35px af, niet met de 50px van
   .sectie--50. Nagemeten onder de onderkant van het beeld. Hetzelfde geldt
   voor /de-toolbox-voor-dienstverlening-editie-2/, dat dezelfde twee rijen
   heeft. */
.sectie--whitepaper,
.sectie--boeklancering { padding-bottom: 35px; }

/* De knop staat gecentreerd; .sectie--gecentreerd doet alleen de kop. */
/* 62px tussen de onderkant van de kop en de bovenkant van de knop: in de bron
   staan ze in twee losse tekstblokken, elk met hun eigen ondermarge. */
.download__knop { text-align: center; margin-top: 36px; }
.download__knop .blokknop { margin: 0 auto; }

/* De taalnoot hoort ONDER de knop, niet links ernaast. Dit staat hier en niet
   op .taalnoot zelf, want op de drie videopagina's staat diezelfde noot juist
   wél links — daar begint de kolom links en niet in het midden. */
.sectie--download .taalnoot {
  text-align: center;
  /* Wat lucht tussen de knop en de noot. Dit is een eigen keuze: de bron heeft
     deze regel helemaal niet — hij staat er omdat de Engelse pagina anders
     zwijgt over het feit dat de whitepaper Nederlandstalig is. */
  margin-top: 32px;
}


/* ---------------------------------------------------------------------------
   38. De grijze baan met de video op /de-toolbox-voor-dienstverlening-editie-2/

   Nagemeten in de bron: 35px boven de video en 37px eronder — dat is de 35px
   die WPBakery elke kolom in een gevulde rij geeft. De video zelf loopt over de
   volle containerbreedte (1138px) in 16:9.
--------------------------------------------------------------------------- */
.sectie--video { padding-top: 35px; padding-bottom: 37px; }


/* ---------------------------------------------------------------------------
   39. /power4talent/

   Twee rijen: een witte met het logo en de inleiding, en een grijze over de
   volle vensterbreedte met de vier tussenkoppen. Alle maten nagemeten in de
   bron.
--------------------------------------------------------------------------- */

/* Het logo staat direct onder de 50px van de sectie, zonder de 3rem die
   .beeld-midden elders meebrengt. */
.sectie--p4t .beeld-midden { margin: 0 0 37px; }

/* De witte baan sluit met 25px af, niet met de 50px van .sectie--50; de grijze
   begint met 35px — dat is de ruimte die WPBakery aan een gevulde rij geeft. */
.sectie--p4t { padding-bottom: 25px; }
.sectie--p4t-grijs { padding-top: 35px; padding-bottom: 25px; }


/* De twee boekenrijen op /boeken/. Elke gevulde rij krijgt in de bron 35px
   binnenruimte (de vaste regel van WPBakery), en de EERSTE rij daarbovenop de
   50px van .cth-page om de hele pagina-inhoud heen. Nagemeten: 85px boven de
   eerste omslag, 35px boven de tweede. */
/* 35px boven, 25px onder. Die 25 in plaats van 35 is nagemeten: onze laatste
   alinea brengt 10px meer ondermarge mee dan die van de bron. */
.sectie--boek { padding: 35px 0 25px; }
main > .sectie--boek:first-of-type { padding-top: 85px; }