/* Verbeteringen op de gespiegelde casepagina's.
   Wordt als laatste stylesheet geladen, zodat het over Elementor heen gaat.
   Doel: uitlijning herstellen, langer laten lezen en de FAQ leesbaar maken. */

/* ---------------------------------------------------------------
   1. Gerelateerde berichten in de zijbalk
   De uitgelichte afbeeldingen hebben verschillende verhoudingen
   (1186x663 tegenover 1125x690), waardoor de kaarten scheef uitlijnen.
   Vaste verhouding plus object-fit lost dat op.
   --------------------------------------------------------------- */
.elementor-posts .elementor-post__thumbnail {
  /* De uitgelichte afbeeldingen lopen van 1024x1024 (vierkante portretten van
     gasten) tot 2560x1440. Een 16:9-kader snijdt bij een portret het hoofd eraf.
     3:2 ligt dicht bij de meest voorkomende verhouding, en met center top blijft
     het gezicht altijd in beeld. */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 10px;
  background: #eef4fb;
}
.elementor-posts .elementor-post__thumbnail img,
.elementor-posts .elementor-post__thumbnail__link img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block;
}

.elementor-posts .elementor-post {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.elementor-posts .elementor-post__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  text-align: left;
}
.elementor-posts .elementor-post__title,
.elementor-posts .elementor-post__title a {
  text-align: left;
  line-height: 1.34;
  display: block;
}
.elementor-posts .elementor-post__excerpt {
  text-align: left;
}
.elementor-posts .elementor-post__read-more {
  margin-top: auto;
}
.elementor-posts-container .elementor-post__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow .25s ease, transform .25s ease;
}
.elementor-posts-container .elementor-post__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -26px rgba(0, 50, 134, .5);
}

/* ---------------------------------------------------------------
   2. Leestekst links uitlijnen
   Staat twee keer als wens in de reviewdocumenten: casepagina's stonden
   gecentreerd, wat bij lopende tekst slecht leest.

   Deze regel gold eerst ook voor elk los tekstblok op elke pagina. Daarmee
   overschreef hij de uitlijning die het thema zelf zet, en dat was de reden
   dat de tekst onder De Watertoren van Datamanagement links bleef staan
   terwijl de kop erboven netjes in het midden stond. De regel geldt nu alleen
   nog voor de artikeltekst zelf, waar hij voor bedoeld was.
   --------------------------------------------------------------- */
.elementor-widget-theme-post-content,
.elementor-widget-theme-post-content p,
.elementor-widget-theme-post-content li {
  text-align: left !important;
}
/* De leesbreedte van 74 tekens klopt, maar zonder auto-marges bleef zo'n
   afgeknepen alinea links in zijn kader staan. Bij een gecentreerde sectie
   stond de tekst daardoor links van de kop erboven. */
.elementor-widget-theme-post-content p,
.elementor-widget-text-editor p {
  margin-left: auto;
  margin-right: auto;
  max-width: 74ch;
  line-height: 1.74;
}

/* ---------------------------------------------------------------
   3. De FAQ leesbaar maken
   --------------------------------------------------------------- */
.e-n-accordion-item {
  border-bottom: 1px solid #e3e9f2;
}
.e-n-accordion-item-title {
  padding: 18px 4px;
  transition: color .2s ease;
}
.e-n-accordion-item-title:hover {
  color: #0085f2;
}
.e-n-accordion-item-title-text {
  text-align: left;
  line-height: 1.4;
}
.e-n-accordion-item > div,
.e-n-accordion-item .e-con {
  text-align: left;
}

/* ---------------------------------------------------------------
   4. Vervolgblok onder de case
   --------------------------------------------------------------- */
.pb-vervolg {
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px 22px 70px;
  text-align: left;
}
.pb-vervolg h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 700;
  color: #001a6c;
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.pb-vervolg .pb-sub {
  color: #666e80;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 26px;
  max-width: 70ch;
}
.pb-ladder {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}
.pb-trede {
  position: relative;
  border: 1px solid #e3e9f2;
  border-radius: 12px;
  padding: 24px 22px 22px;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.pb-trede:hover {
  border-color: #0085f2;
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -28px rgba(0, 50, 134, .5);
}
.pb-trede .pb-nr {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #0085f2;
}
.pb-trede h3 {
  font-size: 1.06rem;
  font-weight: 700;
  color: #001a6c;
  margin: 8px 0 8px;
  line-height: 1.35;
}
.pb-trede p {
  font-size: .92rem;
  line-height: 1.62;
  color: #666e80;
  margin: 0 0 16px;
  flex: 1 1 auto;
}
.pb-trede .pb-merk {
  font-size: .72rem;
  font-weight: 700;
  color: #7a8296;
  letter-spacing: .04em;
}
.pb-trede a {
  color: #0085f2;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
}
.pb-trede a:hover {
  text-decoration: underline;
}

.pb-verder {
  border-top: 1px solid #e3e9f2;
  padding-top: 26px;
}
.pb-verder h2 {
  margin-bottom: 14px;
}
.pb-verder ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.pb-verder li a {
  display: block;
  padding: 13px 16px;
  border-radius: 9px;
  background: #f4faff;
  color: #003286;
  font-weight: 600;
  font-size: .94rem;
  line-height: 1.4;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.pb-verder li a:hover {
  background: #0085f2;
  color: #fff;
}


/* ---------------------------------------------------------------
   5. Tabellen
   Standaard krijgen ze harde lijnen rond elke cel. Zachter maakt ze
   leesbaarder: geen verticale lijnen, lichte streping, ruime celhoogte,
   en op smalle schermen horizontaal schuiven in plaats van persen.
   --------------------------------------------------------------- */
.pb-land table,
.pb-ep table,
.elementor-widget-text-editor table,
.elementor-widget-theme-post-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 6px 0 30px;
  font-size: .95rem;
  background: #fff;
  border: 1px solid #e7edf6;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px -24px rgba(4, 15, 48, .5);
}
.pb-land thead th,
.pb-ep thead th,
.elementor-widget-text-editor thead th,
.elementor-widget-theme-post-content thead th {
  background: #f7fbff;
  color: #001a6c;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid #e7edf6;
  white-space: nowrap;
}
.pb-land td,
.pb-ep td,
.elementor-widget-text-editor td,
.elementor-widget-theme-post-content td {
  padding: 15px 18px;
  border: 0;
  border-top: 1px solid #f0f4fa;
  vertical-align: top;
  line-height: 1.6;
  color: #4a5262;
}
.pb-land tbody tr:first-child td,
.pb-ep tbody tr:first-child td,
.pb-vervolg tbody tr:first-child td,
.elementor-widget-text-editor tbody tr:first-child td,
.elementor-widget-theme-post-content tbody tr:first-child td { border-top: 0; }
.pb-land tbody tr:nth-child(even),
.pb-ep tbody tr:nth-child(even),
.pb-vervolg tbody tr:nth-child(even),
.elementor-widget-text-editor tbody tr:nth-child(even),
.elementor-widget-theme-post-content tbody tr:nth-child(even) { background: #fcfdff; }
.pb-land tbody tr:hover,
.pb-ep tbody tr:hover,
.pb-vervolg tbody tr:hover,
.elementor-widget-text-editor tbody tr:hover,
.elementor-widget-theme-post-content tbody tr:hover { background: #f4faff; }
.pb-land td:first-child,
.pb-ep td:first-child,
.pb-vervolg td:first-child,
.elementor-widget-text-editor td:first-child,
.elementor-widget-theme-post-content td:first-child { color: #040f30; font-weight: 600; }
.pb-land td strong,
.pb-ep td strong,
.pb-vervolg td strong,
.elementor-widget-text-editor td strong,
.elementor-widget-theme-post-content td strong { color: #001a6c; }

/* Op smalle schermen schuiven in plaats van persen. */
/* Elke tabel schuift op smalle schermen in plaats van zich te persen, ook de
   tabellen die uit de gespiegelde pagina komen. */
.elementor-widget-text-editor table,
.elementor-widget-theme-post-content table,
.pb-vervolg table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pb-tabelwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px 0 30px; }
.pb-tabelwrap table { margin: 0; min-width: 520px; }

/* ---------------------------------------------------------------
   6. De uitgelichte afbeelding bovenaan een case
   Die varieert van vierkant tot 2560x1440. Zonder kader springt de
   pagina-indeling per case. Vast kader, gezicht boven in beeld.
   --------------------------------------------------------------- */
.elementor-widget-theme-post-featured-image img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center top;
  border-radius: 12px;
  display: block;
  background: #eef4fb;
}
@media (max-width: 767px) {
  .elementor-widget-theme-post-featured-image img { aspect-ratio: 3 / 2; }
}

/* Losse afbeeldingen in de lopende tekst netjes houden */
.elementor-widget-theme-post-content img,
.elementor-widget-text-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Kenmerken bovenaan een eigen case: branche en systemen */
.pb-kenmerk { display: flex; flex-wrap: wrap; gap: 8px; margin: -22px 0 34px; padding: 0; }
.pb-kenmerk span {
  font-size: .74rem; font-weight: 600; letter-spacing: .02em;
  background: #f4faff; color: #003286; border: 1px solid #e3e9f2;
  border-radius: 999px; padding: 6px 14px;
}

/* Eigen cover boven een case die niet uit WordPress komt */
.pb-cover {
  display: block; width: 100%; height: auto; aspect-ratio: 3/2;
  object-fit: cover; border-radius: 12px; margin: -18px 0 30px; background: #eef4fb;
}

/* De bewijstegels zijn even hoog en lijnen onderling uit: het getal boven,
   de toelichting eronder, de link altijd op dezelfde regel onderaan. */
.pb-bewijs3 .pb-trede { display: flex; flex-direction: column; }
.pb-bewijs3 .pb-trede p { flex: 1 1 auto; margin: 0 0 14px; }
.pb-bewijs3 .pb-trede a { margin-top: auto; }
.pb-pijl { color: #0085f2; margin: 0 2px; }
.pb-na { color: #0085f2; }

/* Afstand tussen de blokken onderling. Stond eerder per pagina als losse
   inline-hack, waardoor de ene pagina 44px aanhield en de andere 52px. */
.pb-vervolg > h2:not(:first-child) { margin-top: 54px; }
.pb-vervolg > h2 + h2 { margin-top: 0; }

/* Dienstenlijst. Was een kale opsomming waarin de naam en de omschrijving met
   een <br> aan elkaar plakten; nu een kaart met eigen regelafstand. */
.pb-dienstlijst { list-style: none; padding: 0; margin: 0 0 34px; display: grid; gap: 12px; }
.pb-dienstlijst li a {
  display: block; padding: 20px 22px; border: 1px solid #e3e9f2; border-radius: 12px;
  background: #fff; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.pb-dienstlijst li a:hover { border-color: #b9d8f7; box-shadow: 0 6px 20px rgba(0,26,108,.07); text-decoration: none; }
.pb-dienstlijst li strong { display: block; font-size: 1.06rem; color: #001a6c; line-height: 1.35; margin-bottom: 7px; }
.pb-dienstlijst li span { display: block; font-size: .95rem; line-height: 1.72; color: #666e80; }

/* FAQ-blok binnen een gespiegelde pagina */
/* De FAQ als gebrande kaart, net als de tabellen. Stond eerder als kale
   lijnen op de pagina, waardoor hij niet bij de rest hoorde. Geldt overal,
   ook op de casepagina's. */
.pb-faq, .pb-vervolg .pb-faq {
  border: 1px solid #e7edf6; border-radius: 12px; background: #fff; overflow: hidden;
  box-shadow: 0 10px 30px -24px rgba(4, 15, 48, .5); margin-top: 6px;
}
.pb-faq > h2 { margin: 0; padding: 16px 22px 14px; background: #f7fbff; border-bottom: 1px solid #e7edf6;
  font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: #001a6c; }
.pb-faq details, .pb-vervolg .pb-faq details {
  border-bottom: 1px solid #f0f4fa; padding: 0; transition: background .2s;
}
.pb-faq details:last-child, .pb-vervolg .pb-faq details:last-child { border-bottom: 0; }
.pb-faq details[open], .pb-vervolg .pb-faq details[open] { background: #fcfdff; }
.pb-faq summary, .pb-vervolg .pb-faq summary {
  cursor: pointer; list-style: none; font-weight: 600; color: #001a6c; font-size: 1rem;
  line-height: 1.45; padding: 17px 56px 17px 22px; position: relative; transition: color .2s;
}
.pb-faq summary:hover, .pb-vervolg .pb-faq summary:hover { color: #0085f2; }
.pb-faq summary::-webkit-details-marker, .pb-vervolg .pb-faq summary::-webkit-details-marker { display: none; }
.pb-faq summary::after, .pb-vervolg .pb-faq summary::after {
  content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; background: #f4faff; color: #0085f2;
  font-size: 1.15rem; line-height: 25px; text-align: center; font-weight: 400;
}
.pb-faq details[open] summary::after, .pb-vervolg .pb-faq details[open] summary::after {
  content: '\2013'; background: #0085f2; color: #fff;
}
.pb-faq p, .pb-vervolg .pb-faq p {
  margin: 0; padding: 0 22px 20px; font-size: .96rem; line-height: 1.74; color: #666e80; max-width: 82ch;
}
.pb-vervolg ul li strong { color: #001a6c; }
.pb-vervolg ul li a { color: #0085f2; text-decoration: none; }
.pb-vervolg ul li a:hover { text-decoration: underline; }

/* Herkomstmelding bij een podcastartikel */
.pb-ep .pb-herkomst {
  font-size: .84rem !important; line-height: 1.6 !important; color: #7a6449 !important;
  background: #fff8f0; border: 1px solid #f3e2cf; border-radius: 9px;
  padding: 12px 15px; margin: 0 0 26px !important;
}

/* YouTube levert sddefault en hqdefault als 4:3 met zwarte balken boven en
   onder. De beeldinhoud zit in het middelste 16:9-deel. Door met 1,34 op te
   schalen valt precies dat deel binnen het kader en verdwijnen de balken. */
.pb-item .beeld img.bijsnijden,
.pb-kaart img.bijsnijden {
  transform: scale(1.34);
  transform-origin: center center;
}

/* Bewijskaarten, kostenblok en risico-omkering onderaan de homepage */
.pb-cijfer { display:block; font-size:2rem; font-weight:700; color:#001a6c; letter-spacing:-.02em; line-height:1.15; margin-bottom:10px; }
.pb-cijfer .pb-pijl, .pb-cijfer .pb-na { color:#0085f2; }
.pb-tijd { display:block; font-size:.78rem; font-weight:600; color:#0085f2; margin:0 0 10px; }
.pb-kosten { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); }
.pb-kosten > div { background:#f7fbff; border:1px solid #e7edf6; border-radius:12px; padding:22px 20px; }
.pb-kosten b { display:block; font-size:1.02rem; color:#001a6c; margin-bottom:8px; }
.pb-kosten span { display:block; font-size:.92rem; line-height:1.62; color:#666e80; }
.pb-garantie { margin-top:34px; border:1px solid #e7edf6; border-left:4px solid #0085f2; border-radius:12px; background:#fff; padding:24px 26px; }
.pb-garantie b { display:block; font-size:1.06rem; color:#001a6c; margin-bottom:9px; }
.pb-garantie p { font-size:.97rem; line-height:1.68; color:#5b6273; margin:0; max-width:78ch; }
.pb-garantie strong { color:#001a6c; }

/* Herhaalde CTA-regel tussen de blokken door */
.pb-knopregel { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin:28px 0 0; }
.pb-knop-blauw { display:inline-block; background:#0085f2; color:#fff; font-weight:700; padding:13px 26px; border-radius:999px; text-decoration:none; transition:background .2s, transform .2s; }
.pb-knop-blauw:hover { background:#003286; color:#fff; transform:translateY(-2px); }
.pb-knopregel span { font-size:.9rem; color:#7a8296; }


/* ===============================================================
   Landingsscherm boven de gespiegelde homepage
   =============================================================== */
.pb-hero2 {
  position: relative;
  background: linear-gradient(124deg, #001a6c 0%, #003286 52%, #0d2674 100%);
  color: #fff;
}
/* De gloed werd eerder afgesneden door overflow:hidden op de sectie zelf.
   Dat sneed ook de bewijstegels af. De gloed knipt nu tegen zijn eigen laag,
   zodat de sectie zelf niets meer hoeft af te snijden. */
.pb-gloedlaag { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pb-gloed {
  position: absolute; right: -14%; top: -32%; width: 46rem; height: 46rem;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(0,133,242,.55) 0%, transparent 66%);
  filter: blur(18px);
}
.pb-hero2-in {
  position: relative; max-width: 1140px; margin: 0 auto;
  padding: 60px 22px 30px; text-align: left;
  display: grid; gap: 34px; align-items: center;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
}
@media (max-width: 900px) { .pb-hero2-in { grid-template-columns: 1fr; padding-top: 46px; } }

.pb-kicker {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: #ffdfb9;
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 6px 15px; margin-bottom: 18px;
}
.pb-hook {
  font-size: clamp(2.6rem, 6.4vw, 4.6rem); line-height: .99; font-weight: 700;
  letter-spacing: -.035em; color: #fff; margin: 0 0 18px;
}
.pb-hook span {
  background: linear-gradient(96deg, #7cc6ff 0%, #ffdfb9 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.pb-onder { font-size: 1.06rem; line-height: 1.6; color: rgba(255,255,255,.76); max-width: 46ch; margin: 0 0 24px; }
/* De regel onder de knop stond ernaast, en las daardoor als een tweede knop.
   Hij hoort eronder, als wat het is: wat je krijgt voordat je klikt. */
.pb-land-knoppen { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pb-knop-wit {
  display: inline-block; background: #fff; color: #001a6c; font-weight: 700;
  padding: 15px 30px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.5);
  transition: background .2s, transform .2s;
}
.pb-knop-wit:hover { background: #ffdfb9; color: #001a6c; transform: translateY(-2px); }
.pb-land-knoppen span { font-size: .9rem; color: rgba(255,255,255,.58); }
/* HET DIAGRAM IN HET LANDINGSSCHERM
   Het bouwt zichzelf op en je kunt het aanwijzen. Vijf staven zijn vijf
   bronnen die dezelfde vraag anders beantwoorden, de lijn is hetzelfde getal
   nadat er een definitie onder ligt. Bovenaan drie knoppen om van scenario te
   wisselen, zoals de paginanavigatie in een Power BI-rapport.
   De gegevens staan in src/hero-diagram.ts.

   Het diagram stond onder 901 pixels op display:none. Daardoor viel er op een
   telefoon niets te zien en dus ook niets aan te tikken. Het staat er nu wel. */
.pb-diagram {
  border-radius: 16px; padding: 14px 16px 16px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
}
.pb-hero2-beeld svg { width: 100%; height: auto; display: block; }

/* De knoppenbalk. Leest als de paginanavigatie van een rapport: de actieve
   pagina is opgelicht, de andere twee wachten. */
.pb-dia-tabs { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: nowrap; }
/* Dezelfde vormtaal als de rest van het landingsscherm: een uitgezette knop
   is een omlijnde pil zoals het labeltje boven de kop, en de actieve is een
   witte pil met donkerblauwe tekst, precies zoals de knop Plan een half uur.
   Perzik stond hier eerder als vlak, en die kleur werkt in deze hero alleen
   als tekst; als vlak wordt het beige en valt het uit de toon. */
.pb-dia-tab {
  flex: 1 1 0; min-width: 0; cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 600; line-height: 1;
  padding: 9px 6px; border-radius: 999px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  color: rgba(255,255,255,.72); background: transparent;
  border: 1px solid rgba(255,255,255,.22);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pb-dia-tab:hover { color: #fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); }
.pb-dia-tab.pb-aan {
  color: #001a6c; background: #fff; border-color: #fff;
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.5);
}
.pb-dia-tab.pb-aan:hover { background: #fff; }
.pb-dia-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.pb-dia-kop { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; flex-wrap: wrap; }
.pb-dia-titel { font-weight: 700; color: rgba(255,255,255,.9); font-size: .95rem; letter-spacing: -.01em; }
.pb-dia-sub { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); }

.pb-dia-grond { stroke: rgba(255,255,255,.14); stroke-width: 1; }
.pb-dia-legenda { fill: rgba(255,255,255,.4); font-size: 10.5px; }
.pb-dia-legenda-rechts { text-anchor: end; }

/* Het cijfer boven de staaf en de bronnaam eronder. Zonder die twee zie je
   alleen vijf blauwe blokken die ongeveer even hoog zijn, en dan valt juist
   het punt weg: dat ze niet hetzelfde zeggen. */
.pb-dia-waarde { fill: rgba(255,255,255,.72); font-size: 11.5px; font-weight: 600; text-anchor: middle; transition: fill .18s ease, opacity .18s ease; }
.pb-dia-naam { fill: rgba(255,255,255,.45); font-size: 10px; text-anchor: middle; transition: fill .18s ease, opacity .18s ease; }
.pb-diagram.pb-actief .pb-dia-waarde, .pb-diagram.pb-actief .pb-dia-naam { opacity: .3; }
.pb-diagram.pb-actief .pb-dia-waarde.pb-aan { opacity: 1; fill: #fff; }
.pb-diagram.pb-actief .pb-dia-naam.pb-aan { opacity: 1; fill: rgba(255,255,255,.8); }
.pb-cijfers text, .pb-namen text, .pb-dia-legenda { pointer-events: none; }

/* De staven. Opbouw met een groeianimatie, daarna reageren ze op aanwijzen.
   Bewust met opacity en een randje en niet met transform: transform wordt hier
   al gebruikt voor het groeien, en die twee gaan elkaar in de weg zitten. */
.pb-balken rect { transform-box: fill-box; transform-origin: bottom; animation: pbGroei .9s cubic-bezier(.2,.7,.3,1) both; }
.pb-balken rect:nth-child(1) { animation-delay: .05s } .pb-balken rect:nth-child(2) { animation-delay: .16s }
.pb-balken rect:nth-child(3) { animation-delay: .27s } .pb-balken rect:nth-child(4) { animation-delay: .38s }
.pb-balken rect:nth-child(5) { animation-delay: .49s }
@keyframes pbGroei { from { transform: scaleY(.06) } to { transform: scaleY(1) } }

.pb-balk { fill: url(#pbBalk); cursor: pointer; transition: opacity .18s ease, filter .18s ease, y .3s ease, height .3s ease; }
/* De gemodelleerde laag en de lijn delen een kleur, want het is hetzelfde
   getal. Wit, net als de knop Plan een half uur en de actieve tabknop: in
   deze hero is wit de kleur van waar je moet zijn. Perzik stond hier eerder,
   maar die kleur werkt alleen als tekst; als vlak wordt het beige. */
.pb-balk-model { fill: rgba(255,255,255,.92); }
.pb-balk:focus { outline: none; }
.pb-balk:focus-visible { stroke: #fff; stroke-width: 2.5; }
/* Kruisfiltering: zodra er een staaf gekozen is dimt de rest weg. Precies wat
   Power BI doet als je in een visual klikt. */
.pb-diagram.pb-actief .pb-balk { opacity: .22; }
.pb-diagram.pb-actief .pb-balk.pb-aan { opacity: 1; filter: drop-shadow(0 0 14px rgba(124,198,255,.55)); }
.pb-diagram.pb-actief .pb-balk-model.pb-aan { filter: drop-shadow(0 0 14px rgba(255,255,255,.55)); }

.pb-lijn { stroke: rgba(255,255,255,.85); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
           stroke-dasharray: 360; stroke-dashoffset: 360; animation: pbTeken 1.5s .5s ease forwards; }
@keyframes pbTeken { to { stroke-dashoffset: 0 } }
.pb-punt { fill: #fff; opacity: 0; transition: opacity .18s ease; }
.pb-diagram.pb-actief .pb-punt.pb-aan { opacity: 1; }

/* De uitlezing is losse tekst, geen doos, en zo laag mogelijk. Naam, soort,
   bedrag en afwijking staan op een regel, de reden eronder. In ruststand is
   hij leeg; de legenda in het diagram vertelt al wat je ziet.

   De gereserveerde hoogte is die van twee regels, gemeten en niet gegokt.
   Zonder reservering zou het aanwijzen van een staaf de bewijstegels eronder
   omlaag duwen, en met een muis gebeurt dat bij elke beweging. */
.pb-uitlees {
  min-height: 68px; margin-top: 8px; padding: 0;
  background: none; border: 0;
  font-size: .84rem; line-height: 1.45; color: rgba(255,255,255,.75);
}
.pb-uitlees-regel { margin: 0 0 2px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.pb-uitlees-naam { color: #fff; font-size: .92rem; font-weight: 700; }
.pb-uitlees-soort { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.42); }
.pb-uitlees-bedrag { color: #fff; font-weight: 700; }
.pb-uitlees-af { color: #7CC6FF; font-weight: 600; font-size: .8rem; }
.pb-uitlees-reden { margin: 0; color: rgba(255,255,255,.6); font-size: .8rem; }

@media (max-width: 900px) {
  .pb-hero2-beeld { margin-top: 8px; }
  /* Op een telefoon is de basisletter van het thema groter. Zonder deze regels
     werd de uitlezing net zo zwaar als de kop erboven. */
  .pb-uitlees { min-height: 86px; font-size: .78rem; }
  .pb-dia-tab { font-size: .72rem; padding: 8px 4px; }
  .pb-dia-titel { font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-balken rect, .pb-lijn { animation: none; stroke-dashoffset: 0; transform: none; }
  .pb-balk, .pb-punt, .pb-dia-tab { transition: none; }
}

/* Bewijs, direct onder de hook. Stond eerder met translateY half over de
   onderrand van het landingsscherm, waardoor de tegels afgesneden leken. */
.pb-bewijs-rij {
  position: relative; max-width: 1140px; margin: 0 auto; padding: 0 22px 46px;
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.pb-bewijs-rij a {
  display: block; background: #fff; border: 1px solid #e7edf6; border-radius: 13px;
  padding: 20px 20px; text-decoration: none;
  box-shadow: 0 22px 46px -30px rgba(4,15,48,.6);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.pb-bewijs-rij a:hover { transform: translateY(-4px); border-color: #0085f2; box-shadow: 0 30px 56px -30px rgba(0,50,134,.55); }
.pb-bewijs-rij b { display: block; font-size: 1.85rem; font-weight: 700; color: #001a6c; letter-spacing: -.025em; line-height: 1.12; }
.pb-bewijs-rij i, .pb-bewijs-rij em { font-style: normal; color: #0085f2; }
.pb-bewijs-rij i { margin: 0 4px; }
.pb-bewijs-rij span { display: block; margin-top: 8px; font-size: .88rem; line-height: 1.55; color: #666e80; }

/* strakker: minder lucht tussen de blokken onderaan */
.pb-vervolg { padding-top: 34px; }
.pb-vervolg h2 { margin-top: 0; }

/* ---------------------------------------------------------------
   Laagvolgorde vastzetten
   De header is een Elementor sticky en krijgt zijn z-index pas zodra
   je scrollt. Daardoor schilderde het landingsscherm eroverheen.
   Hieronder ligt de volgorde vast, altijd.
   --------------------------------------------------------------- */
.elementor-location-header,
header.elementor-location-header {
  position: relative;
  z-index: 900;
}
/* Alleen de stapelvolgorde. Eerder stond hier ook position:relative, en dat
   overschreef de position:fixed die Elementor zelf op de vastgezette balk zet.
   De balk bleef dan in de pagina staan terwijl de opvuller er wel bij kwam,
   waardoor het menu een stuk hoger reageerde dan waar de tekst stond. */
.elementor-sticky--active { z-index: 900 !important; }

.pb-hero2 { position: relative; z-index: 1; isolation: isolate; }
.pb-gloed { z-index: 0; }
.pb-hero2-in, .pb-bewijs-rij { position: relative; z-index: 2; }


/* De balk van het thema ligt bewust 70px over de sectie eronder heen: de
   headercontainer heeft --margin-bottom:-70px. Bij een foto met lucht erboven
   valt dat niet op, bij een kop die meteen begint wel.
   Eerder stond hier een script dat de overlap mat. Dat telde bij een
   vastgezette balk de scrollpositie mee, waardoor de vrijgehouden ruimte
   meegroeide met hoe ver je gescrold had en er een leeg blauw scherm ontstond.
   De waarde staat vast in het thema, dus die hoort hier gewoon te staan. */
.pb-hero2-in { padding-top: 130px; }
@media (max-width: 900px) { .pb-hero2-in { padding-top: 116px; } }

/* ankerlinks niet onder de sticky header laten vallen */
html { scroll-padding-top: 110px; }

/* Het eerste blok van de gespiegelde homepage vervalt, want ons landingsscherm
   zegt hetzelfde. Het blok daaronder had zijn bovenruimte afgestemd op de
   ronding die daar stond, dus die ruimte hangt er nu los boven. */
body.home main .e-con.e-parent:first-of-type { padding-top: 24px; }
body.home main .e-con.e-parent:first-of-type::before { display: none; }

/* De vragenlijst is gegroepeerd naar waar iemand in zijn afweging zit. Zonder
   die koppen wordt het een muur van twintig regels waarin niemand zoekt. */
.pb-vragen h3 {
  font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; text-transform: none;
  color: #001a6c; margin: 40px 0 16px; padding-left: 15px;
  position: relative; line-height: 1.3;
}
/* Een streepje in de huisstijlkleuren ervoor. De koppen stonden als klein grijs
   kapitaal boven de rij en vielen daardoor weg tussen de vragen eronder. */
.pb-vragen h3::before {
  content: ''; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px;
  border-radius: 3px; background: linear-gradient(180deg, #0085f2, #ffdfb9);
}
.pb-vragen h3:first-child { margin-top: 6px; }
.pb-vragen ul { margin: 0; }


/* ---------------------------------------------------------------
   Punt 4 en 10: de voettekst toonde het kopje Pagina's zonder links
   Het thema zet de verticale menulijst op display:none tot zijn eigen
   JavaScript hem opbouwt. Dat script draait hier niet, dus bleef de lijst
   onzichtbaar terwijl de links er wel gewoon stonden.
   --------------------------------------------------------------- */
/* Het thema verbergt elk menu met .aux-dom-unready .aux-nav-menu-element
   .aux-master-menu { display:none !important }. Die klasse staat op de body en
   wordt door het themascript weggehaald zodra de pagina klaar is. Dat script
   draait hier niet. Onderstaande regel weegt zwaarder en zet hem weer aan. */
body .elementor-location-footer .aux-nav-menu-element .aux-master-menu,
.elementor-location-footer .aux-master-menu { display: block !important; }
.elementor-location-footer .aux-master-menu > li { display: block; float: none; }
.elementor-location-footer .aux-master-menu > li > a { display: block; padding: 5px 0; }
.elementor-location-footer .aux-burger-box { display: none !important; }
.elementor-location-footer .aux-menu-label { font-size: .95rem; }

/* ---------------------------------------------------------------
   Punt 1: witruimte tussen het landingsscherm en de sectie eronder
   Het eerste blok van de gespiegelde homepage stond op wit met een eigen
   bovenruimte, afgestemd op de ronding die daar ooit stond. Nu die weg is
   bleef er een witte band over tussen het donkerblauw en het lichtblauw.
   --------------------------------------------------------------- */
body.home main,
body.home .aux-wrapper,
body.home .aux-container { background: #f4faff; }
body.home main .e-con.e-parent:first-of-type { padding-top: 0; margin-top: 0; }

/* ---------------------------------------------------------------
   Paginakop en inleiding boven een gespiegelde pagina
   Diensten, cases en contact begonnen met een leeg vlak van het thema,
   waardoor je moest scrollen voor er iets stond.
   --------------------------------------------------------------- */
.pb-paginakop {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 700; color: #001a6c;
  letter-spacing: -.025em; line-height: 1.1; margin: 0 0 12px;
}
.pb-inleiding { font-size: 1.06rem; line-height: 1.68; max-width: 68ch; margin-bottom: 30px; }
.pb-contactkop { padding-bottom: 8px; }

/* De cases als voorvertoning: de vraag boven, de context eronder. */
.pb-caselijst li strong { font-size: 1.04rem; }
.pb-caselijst li span {
  display: block; margin-top: 6px; font-size: .84rem; color: #7a8296;
  letter-spacing: .01em;
}


/* ---------------------------------------------------------------
   De reviews
   Geen schuifbalk: die hoort hier niet, en hij verraadt bovendien dat er
   iets buiten beeld staat zonder te laten zien wat. In plaats daarvan
   schuift hij vanzelf door, met stipjes eronder die de plek aangeven.
   Stilstaan zodra iemand er met de muis op komt of met de toets in springt,
   want anders schuift het weg terwijl je leest.
   --------------------------------------------------------------- */
.pb-reviewblok { padding-bottom: 46px; }
.pb-slider { position: relative; }
.pb-spoor {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 33.5%);
  gap: 16px; margin: 0; padding: 4px 2px 6px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.pb-spoor::-webkit-scrollbar { display: none; width: 0; height: 0; }
.pb-review {
  scroll-snap-align: start; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e3e9f2; border-radius: 13px; padding: 22px 22px 18px;
  box-shadow: 0 14px 34px -30px rgba(4,15,48,.55);
}
.pb-sterren { color: #ffb020; font-size: 1rem; letter-spacing: .06em; margin-bottom: 12px; }
.pb-sterren b { color: #001a6c; font-size: .84rem; margin-left: 7px; letter-spacing: 0; }
.pb-review p {
  flex: 1 1 auto; margin: 0 0 16px; font-size: .93rem; line-height: 1.7; color: #4a5262;
}
.pb-review footer { border-top: 1px solid #f0f4fa; padding-top: 13px; }
.pb-review footer strong { display: block; color: #001a6c; font-size: .96rem; }
.pb-review footer span { display: block; font-size: .82rem; color: #7a8296; margin-top: 2px; line-height: 1.45; }
.pb-review footer em {
  display: block; font-style: normal; font-size: .74rem; color: #9aa3b2;
  margin-top: 7px; letter-spacing: .02em;
}
/* de stipjes onder de rij */
.pb-stippen { display: flex; justify-content: center; gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; }
.pb-stippen button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: #cfdcec; cursor: pointer; transition: background .25s, width .25s;
}
.pb-stippen button[aria-current='true'] { background: #0085f2; width: 22px; border-radius: 4px; }

@media (max-width: 900px) {
  .pb-spoor { grid-auto-columns: minmax(258px, 84%); }
  }


/* Een eigen blok dat direct op de header volgt, valt eronder om dezelfde reden
   als het landingsscherm: de balk ligt 70px over de sectie eronder heen. */
.elementor-location-header + .pb-vervolg { padding-top: 116px; }
@media (max-width: 900px) { .elementor-location-header + .pb-vervolg { padding-top: 102px; } }


/* ---------------------------------------------------------------
   Punt 3: het uitgelichte blok
   Twee rijen, elk een aflevering met het best gelezen artikel ernaast.
   --------------------------------------------------------------- */
.pb-uitgelicht .pb-paar {
  display: grid; gap: 16px; margin-bottom: 16px;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}
.pb-uit-ep, .pb-uit-artikel {
  display: block; border: 1px solid #e3e9f2; border-radius: 13px; background: #fff;
  text-decoration: none; overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pb-uit-ep:hover, .pb-uit-artikel:hover {
  border-color: #b9d8f7; box-shadow: 0 16px 38px -28px rgba(0,26,108,.55); transform: translateY(-2px);
}
.pb-uit-ep { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: center; }
.pb-uit-ep img { width: 100%; height: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.pb-uit-tekst { padding: 18px 20px; }
.pb-uit-artikel { padding: 20px 22px; display: flex; flex-direction: column; }
.pb-uit-label {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #0085f2; margin-bottom: 8px;
}
.pb-uit-ep strong, .pb-uit-artikel strong {
  display: block; color: #001a6c; font-size: 1.02rem; line-height: 1.38; font-weight: 700;
}
.pb-uit-artikel strong { flex: 1 1 auto; }
.pb-uit-gast { display: block; margin-top: 7px; font-size: .84rem; color: #7a8296; }
.pb-uit-lees { display: block; margin-top: 14px; font-size: .86rem; font-weight: 600; color: #0085f2; }
@media (max-width: 860px) {
  .pb-uitgelicht .pb-paar { grid-template-columns: 1fr; }
  .pb-uit-ep { grid-template-columns: 1fr; }
  .pb-uit-ep img { aspect-ratio: 16/7; }
}


/* ---------------------------------------------------------------
   Punt 6, 8 en 9: te veel witruimte op de dienstenpagina
   De gespiegelde secties dragen onderruimtes tot 160px, ontworpen voor
   een pagina met veel beeld en weinig tekst. Tussen een afbeelding en de
   kop eronder viel daardoor een gat. We toppen die ruimte af in plaats
   van hem per sectie te overschrijven, zodat het blijft werken als de
   inhoud straks wijzigt.
   --------------------------------------------------------------- */
/* Elementor zet zijn ruimtes met drie klassen achter elkaar, wat zwaarder weegt
   dan een gewone regel. Daarom hier met voorrang, anders gebeurt er niets. */
body.page-id-2231 main .e-con,
body.page-id-2231 main .e-con-inner {
  padding-top: min(var(--padding-top, 0px), 44px) !important;
  padding-bottom: min(var(--padding-bottom, 0px), 52px) !important;
}
/* De boxed container van Elementor draagt zijn ruimte op de binnenste laag,
   niet op de sectie zelf. Daar stond 160px boven en onder. */
body.page-id-2231 main .e-con-inner { padding-top: 44px !important; padding-bottom: 44px !important; }
/* De golf boven een donkere sectie was zo hoog dat er een leeg vlak onder viel. */
body.page-id-2231 main .elementor-shape svg { height: 60px !important; }
body.page-id-2231 main .elementor-widget-image + .elementor-widget-heading { margin-top: -6px; }
body.page-id-2231 main .elementor-widget-heading + .elementor-widget-text-editor { margin-top: -4px; }

/* Hier stond een aftopping van de afbeeldinghoogte en van de marges. Die was
   een pleister op de verkeerde wond: de gaten kwamen van koppen die door
   elementor-invisible onzichtbaar waren en van de ruimte op de binnenste
   container. Nu die twee opgelost zijn is de aftopping niet alleen overbodig,
   hij sneed ook de casefoto's af en zette de knoppen erover heen. */


/* Twee eigen blokken onder elkaar telden hun onderruimte en bovenruimte bij
   elkaar op, waardoor er een gat van ruim honderd pixels tussen viel. Staan ze
   naast elkaar, dan draagt alleen de kop van het tweede blok de afstand. */
.pb-vervolg + .pb-vervolg { padding-top: 0 !important; }
.pb-vervolg:has(+ .pb-vervolg) { padding-bottom: 0 !important; }
.pb-vervolg + .pb-vervolg > h2:first-child,
.pb-vervolg + .pb-vervolg > h1:first-child { margin-top: 54px; }

/* Een enkele lange review rekte alle kaarten mee. Zeven regels is genoeg om te
   zien wat er staat; wie meer wil weet waar hij moet zijn. */
.pb-review p {
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical;
  overflow: hidden; flex: 0 0 auto; min-height: 0;
}



/* ---------------------------------------------------------------
   Onzichtbare koppen door een animatie die nooit start
   Elementor zet elementen met een entree-animatie op elementor-invisible,
   oftewel visibility:hidden, en haalt die klasse er met JavaScript weer af
   zodra je erlangs scrollt. Dat script draait hier niet, dus bleven die
   elementen onzichtbaar terwijl ze wel ruimte innamen. Dat verklaarde de
   ontbrekende titels boven Wat we doen en de gaten eromheen.
   --------------------------------------------------------------- */
.elementor-invisible { visibility: visible !important; animation: none !important; }


/* De knoppen naast de reviews stonden als losse rondjes half over de kaarten.
   Nu binnen de rand, met een pijl in plaats van een leesteken. */
.pb-slider { padding: 0 4px; }

/* De korte beoordelingen van losse opdrachten hebben minder tekst, dus die
   krijgen ook minder hoogte dan de uitgebreide referenties. */
.pb-kort p { -webkit-line-clamp: 5; }

/* Hier stond een regel die tekstblokken text-align:inherit gaf, om ze onder
   een gecentreerde kop te laten meelopen. Dat werkte averechts: het thema zet
   die blokken zelf al op center, en inherit haalde de uitlijning juist wéér
   weg naar links. Dit was de reden dat de tekst onder De Watertoren van
   Datamanagement links bleef staan. */


/* ---------------------------------------------------------------
   De knoppen naast de reviews
   Stonden als lege witte ovalen half over de kaarten: het thema geeft elke
   knop zijn eigen achtergrond, hoogte en tekengrootte, en dat won van de
   opmaak hier. Daarom nu alles expliciet, inclusief de vorm.
   --------------------------------------------------------------- */
.pb-reviewblok .pb-slider { position: relative; padding: 0; }
.pb-reviewblok .pb-schuif {
  position: absolute; top: 50%; z-index: 6;
  width: 42px; height: 42px; min-width: 42px; min-height: 42px; padding: 0;
  margin: 0; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  -webkit-appearance: none; appearance: none;
  background: #fff; color: #001a6c;
  border: 1px solid #dbe4f0; border-radius: 50%;
  box-shadow: 0 10px 26px -14px rgba(4, 15, 48, .55);
  cursor: pointer; font-size: 0; line-height: 0;
  transition: background .2s, color .2s, border-color .2s;
}
.pb-reviewblok .pb-schuif:hover { background: #0085f2; color: #fff; border-color: #0085f2; }
.pb-reviewblok .pb-schuif svg { display: block; width: 17px; height: 17px; }
.pb-reviewblok .pb-schuif.pb-links { left: -21px; }
.pb-reviewblok .pb-schuif.pb-rechts { right: -21px; }
@media (max-width: 900px) { .pb-reviewblok .pb-schuif { display: none; } }

/* De kaart: sterren boven, tekst er direct onder, naam onderaan. */
.pb-review { justify-content: flex-start; }
.pb-review p { flex: 1 1 auto; }
.pb-review footer { margin-top: auto; }

/* ---------------------------------------------------------------
   Het voetmenu perste elke regel in een kolom van 39 pixels
   Het thema zet de menulinks op display:table-cell met een vaste breedte.
   In een verticaal menu in de voettekst klopt dat niet: dan hoort elke
   regel gewoon onder elkaar te staan over de volle breedte.
   --------------------------------------------------------------- */
body .elementor-location-footer .aux-master-menu > li {
  display: block !important; width: 100% !important; float: none !important;
}
body .elementor-location-footer .aux-master-menu > li > a {
  display: block !important; width: auto !important; padding: 6px 0 !important;
  color: #001a6c !important; text-decoration: none;
}
body .elementor-location-footer .aux-master-menu > li > a:hover { color: #0085f2 !important; }
body .elementor-location-footer .aux-menu-label {
  display: inline !important; width: auto !important; white-space: nowrap; font-size: .97rem;
}


/* De eigen lijst onder Pagina's in de voettekst. */
.pb-voetlijst { list-style: none; margin: 0; padding: 0; }
.pb-voetlijst li { margin: 0 0 2px; }
.pb-voetlijst a {
  display: block; padding: 6px 0; color: #001a6c; font-size: .97rem;
  text-decoration: none; transition: color .2s;
}
.pb-voetlijst a:hover { color: #0085f2; text-decoration: underline; }


/* Het tekstblok stond wel gecentreerd, maar binnen een kolom die zo breed was
   als de langste regel. Daardoor lag het midden van de tekst links van het
   midden van de kop erboven. In een gestapelde sectie hoort zo'n blok de volle
   breedte te krijgen. */
body.page-id-2231 main .e-con-inner > .elementor-widget-text-editor,
body.page-id-2231 main .e-con-inner > .elementor-widget-heading {
  width: 100%; align-self: stretch;
}

/* De voet komt binnenvliegen zodra hij in beeld schuift. Dat effect hangt aan
   JavaScript van het thema, en zolang dat niet heeft gedraaid staat de voet er
   onzichtbaar of half. Op een statische site levert dat vooral een voet op die
   soms wel en soms niet verschijnt. Hij staat er nu gewoon. */
.elementor-location-footer .aux-fade-in-up,
.elementor-location-footer .aux-appear-watch-animation,
.elementor-location-footer [class*="aux-fade"],
.elementor-location-footer .elementor-invisible {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  visibility: visible !important;
}

/* Bekijk ook: drie andere cases met hun eigen cover. Het gespiegelde blok
   toonde plaatjes die nergens bij hoorden; deze komen uit de case zelf. */
.pb-ookcases { margin: 56px 0 0; }
.pb-ookcases h2 { font-size: clamp(1.25rem, 2.3vw, 1.6rem); font-weight: 700; color: #001A6C; margin: 0 0 18px; }
.pb-ookgrid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.pb-ookkaart { display: block; text-decoration: none; border: 1px solid #e3e9f2; border-radius: 12px; overflow: hidden; background: #fff; transition: box-shadow .25s, transform .25s, border-color .25s; }
.pb-ookkaart:hover { transform: translateY(-3px); border-color: #0085F2; box-shadow: 0 18px 36px -24px rgba(0,50,134,.5); }
.pb-ookkaart img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; background: #f4faff; }
.pb-ooktekst { padding: 16px 18px 18px; }
.pb-ooklabel { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #0085F2; margin-bottom: 7px; }
.pb-ooktekst strong { display: block; font-size: .98rem; line-height: 1.35; color: #001A6C; }
.pb-ooksub { display: block; margin-top: 8px; font-size: .8rem; color: #6b7385; }
.pb-ookalle { margin: 18px 0 0; }
.pb-ookalle a { color: #0085F2; text-decoration: none; font-weight: 600; }

/* De inleiding onder de kop Diensten stond gecentreerd, terwijl de kop erboven
   links begint. Daardoor liep de eerste regel niet gelijk met het woord
   erboven. De tekst lijnt nu links uit, met dezelfde maximale regellengte als
   de rest van de pagina. */
.elementor-element-9314769 .elementor-widget-container,
.elementor-element-9314769 .elementor-widget-container p {
  text-align: left !important;
}
.elementor-element-9314769 .elementor-widget-container p {
  max-width: 62ch;
  margin-left: 0;
  margin-right: auto;
}

/* De cv-pagina: lopende opdrachten als kaarten, de rest als tabel. Dezelfde
   opmaak als de tabellen elders, zodat het bij de site hoort en niet bij een
   uitgeprint document. */
.pb-cv-nu { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 16px; }
.pb-cv-nu li { border: 1px solid #e3e9f2; border-left: 4px solid #0085F2; border-radius: 10px; background: #fff; padding: 18px 20px; }
.pb-cv-nu strong { display: block; font-size: 1.05rem; color: #001A6C; }
.pb-cv-functie { display: block; margin-top: 3px; font-size: .93rem; color: #444b5c; }
.pb-cv-periode { display: block; margin-top: 6px; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #0085F2; }
.pb-cv-nu p { margin: 12px 0 0; font-size: .95rem; }
.pb-cv-tabel { width: 100%; }
.pb-cv-tabel td:first-child { white-space: nowrap; }
.pb-cv-lijst { padding-left: 20px; }
.pb-cv-lijst li { margin-bottom: 10px; }
.pb-cv-lijst strong { color: #001A6C; }
@media (max-width: 640px) {
  .pb-cv-tabel td:first-child { white-space: normal; }
}

/* Het cv als download, met een knop voor de taal. */
.pb-cvdown { border: 1px solid #e3e9f2; border-radius: 12px; background: linear-gradient(160deg, #f7fbff, #eef5ff); padding: 22px 24px; margin: 28px 0 8px; }
.pb-cvdown-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pb-cvdown-kop strong { font-size: 1.06rem; color: #001A6C; }
/* Een rond spoor met een ronde knop erin. Eerder lag er een rechthoekig
   blauw vlak in een rond kader, en dat werd aan de linkerkant afgesneden:
   overflow met een border-radius laat in elke browser een randje staan. Nu
   krijgt de knop zelf zijn ronding, dus er valt niets te knippen. */
.pb-cvtaal { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid #d7e3f3; border-radius: 999px; background: #fff; }
.pb-cvtaal button { border: 0; background: none; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600; color: #5d6472; padding: 6px 16px; border-radius: 999px; line-height: 1.35; }
.pb-cvtaal button:hover { color: #001A6C; }
.pb-cvtaal button.aan { background: #0085F2; color: #fff; }
.pb-cvtaal button:focus-visible { outline: 2px solid #0085F2; outline-offset: 2px; }
.pb-cvdown-sub { margin: 12px 0 16px !important; font-size: .93rem; color: #444b5c; }
.pb-cvdown-knoppen { margin: 0 !important; display: flex; flex-wrap: wrap; gap: 10px; }
.pb-cvknop { display: inline-block; background: #001A6C; color: #fff !important; font-weight: 700; font-size: .92rem; padding: 11px 22px; border-radius: 999px; text-decoration: none; }
.pb-cvknop:hover { background: #003286; }
.pb-cvknop-tweede { background: #fff; color: #001A6C !important; border: 1px solid #cfdcee; }
.pb-cvknop-tweede:hover { background: #f4faff; }

/* De cv-lezer onder de kop van /cv/. Pdf in de browserlezer op desktop,
   pagina's als afbeelding op telefoons. */
.pb-cvlezer { margin: 0 0 36px; }
.pb-cvlezer-kader { border: 1px solid #e3e9f2; border-radius: 12px; overflow: hidden; background: #eef3f9; box-shadow: 0 10px 30px rgba(0, 26, 108, .08); }
.pb-cvlezer-pdf { display: block; width: 100%; height: min(82vh, 1040px); border: 0; background: #eef3f9; }
.pb-cvlezer-paginas { max-height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px; display: grid; gap: 10px; }
.pb-cvlezer-paginas img { display: block; width: 100%; height: auto; background: #fff; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 26, 108, .12); }
.pb-cvlezer-pdf[hidden], .pb-cvlezer-paginas[hidden] { display: none; }
.pb-cvlezer figcaption { margin-top: 10px; text-align: right; font-size: .88rem; }
.pb-cvlezer-open { color: #0085F2; text-decoration: none; font-weight: 600; }
.pb-cvlezer-open:hover { text-decoration: underline; }

/* Een tabel is zo breed als zijn inhoud vraagt. Op een telefoon duwde dat de
   hele pagina breder dan het scherm: alles schoof dan heen en weer, ook de kop
   en de tekst eromheen. De tabel schuift nu in zijn eigen doosje. */
.pb-tabelwikkel { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.pb-tabelwikkel > table { margin-bottom: 0; }

/* Het cv leest op een smal scherm beter als rijen onder elkaar dan als tabel
   die je opzij moet duwen. Onder de 560 pixels wordt elke rij een blokje. */
@media (max-width: 560px) {
  .pb-cv-tabel, .pb-cv-tabel tbody, .pb-cv-tabel tr, .pb-cv-tabel td { display: block; width: 100%; }
  .pb-cv-tabel thead { display: none; }
  .pb-cv-tabel tr { border: 1px solid #e3e9f2; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
  .pb-cv-tabel td { border: 0 !important; padding: 2px 0 !important; }
  .pb-cv-tabel td:first-child { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #0085F2; }
}

/* Het uitklapmenu is op een toestel van 320 pixels een paar pixels breder dan
   het scherm. Dat is genoeg om de hele pagina horizontaal te laten schuiven,
   ook al zie je het menu niet eens. Op de podcastpagina's viel dat op. */
nav.elementor-nav-menu--dropdown,
nav.elementor-nav-menu--dropdown .elementor-nav-menu {
  max-width: 100vw;
  box-sizing: border-box;
}

/* De leden van een artikel in de algemene voorwaarden. Genummerd, met genoeg
   ruimte ertussen om te kunnen lezen wat er staat. */
.pb-voorwaarden { margin: 0 0 30px; padding-left: 24px; }
.pb-voorwaarden li { margin-bottom: 12px; line-height: 1.7; }
.pb-slot { font-style: italic; color: #6b7385; margin-top: 34px !important; }

/* ---------------------------------------------------------------------------
   De golven tussen de secties.

   Elementor tekent tussen twee blokken een golfvorm. De vulling van die golf
   stond op wit, maar de achtergrond achter de secties is #F4FAFF (zie de regel
   'body.home main' hierboven). Een witte golf op een lichtblauwe ondergrond
   leest niet als een overgang maar als een streep met twee harde randen.

   Een golf hoort de kleur te hebben van het vlak waar hij naartoe loopt. Op
   deze pagina is dat overal #F4FAFF, dus dat kan in een regel.
   ------------------------------------------------------------------------- */
body.home .elementor-shape .elementor-shape-fill { fill: #F4FAFF; }

/* ---------------------------------------------------------------------------
   Het brein als sectie op de homepage.

   Dezelfde gedachte als de kop van insights: geen blok tussen de tekst maar
   een laag waar de tekst op ligt. De sectie loopt over de volle breedte en
   lost aan boven- en onderkant op in de achtergrond van de pagina (#F4FAFF),
   zodat er nergens een rand te zien is.
   ------------------------------------------------------------------------- */
.pb-breinvlak {
  /* de kleur waarin de band boven en onder uitloopt; per pagina te zetten */
  --pb-vlak-rand: #F4FAFF;
  /* dezelfde kleur als losse kanalen, voor het verloop met oplopende dekking */
  --pb-vlak-rgb: 244, 250, 255;
  position: relative;
  /* eigen stapelcontext op nul, zodat niets uit dit vlak bij het scrollen
     boven de vaste menubalk uit komt */
  z-index: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 560px;
  display: flex;
  align-items: center;
  background: #040F30;
  overflow: hidden;
}
.pb-breinvlak-doek { position: absolute; inset: 0; z-index: 0; }
.pb-breinvlak-doek > * { height: 100%; }

/* Op een breed scherm staat het brein rechts en de tekst links, zodat ze
   elkaar niet in de weg zitten. Smal scherm: alles gecentreerd. */
@media (min-width: 1000px) {
  .pb-breinvlak-doek { left: 22%; }
}

/* De randen. Boven en onder een verloop naar de paginakleur, zodat de sectie
   in de pagina opgaat in plaats van erop te liggen. */
.pb-breinvlak::before,
.pb-breinvlak::after {
  content: ''; position: absolute; left: 0; right: 0; height: 230px;
  /* boven de waas, anders houdt die de bovenrand hard: de waas loopt over de
     volle hoogte en begon dus met een rechte lijn aan de linkerkant */
  pointer-events: none; z-index: 2;
}
.pb-breinvlak::before {
  top: 0;
  background: linear-gradient(rgba(var(--pb-vlak-rgb),1.00) 0%, rgba(var(--pb-vlak-rgb),0.96) 7%, rgba(var(--pb-vlak-rgb),0.88) 16%, rgba(var(--pb-vlak-rgb),0.72) 28%, rgba(var(--pb-vlak-rgb),0.54) 40%, rgba(var(--pb-vlak-rgb),0.34) 52%, rgba(var(--pb-vlak-rgb),0.16) 66%, rgba(var(--pb-vlak-rgb),0.05) 82%, rgba(var(--pb-vlak-rgb),0.00) 100%);
}
.pb-breinvlak::after {
  bottom: 0;
  background: linear-gradient(rgba(var(--pb-vlak-rgb),0.00) 0%, rgba(var(--pb-vlak-rgb),0.05) 18%, rgba(var(--pb-vlak-rgb),0.16) 34%, rgba(var(--pb-vlak-rgb),0.34) 48%, rgba(var(--pb-vlak-rgb),0.54) 60%, rgba(var(--pb-vlak-rgb),0.72) 72%, rgba(var(--pb-vlak-rgb),0.88) 84%, rgba(var(--pb-vlak-rgb),0.96) 93%, rgba(var(--pb-vlak-rgb),1.00) 100%);
}

.pb-breinvlak-tekst {
  position: relative; z-index: 3;
  max-width: 1100px; margin: 0 auto; padding: 130px 22px; width: 100%;
  pointer-events: none;
}
.pb-breinvlak > .pb-breinvlak-waas {
  position: absolute; inset: 0 auto 0 0; width: min(62%, 980px);
  z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 15, 48, .88) 0%,
              rgba(4, 15, 48, .60) 46%, rgba(4, 15, 48, 0) 100%);
}
.pb-breinvlak-tekst h2 {
  color: #F7FBFF; margin: 0 0 14px;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.02em;
  text-shadow: 0 2px 26px rgba(4, 15, 48, .85);
}
.pb-breinvlak-tekst p {
  color: rgba(247, 251, 255, .82); max-width: 54ch; margin: 0;
  font-size: 1.05rem; line-height: 1.62;
  text-shadow: 0 1px 18px rgba(4, 15, 48, .9);
}
@media (max-width: 700px) {
  .pb-breinvlak { min-height: 500px; }
  .pb-breinvlak-tekst { padding: 96px 22px; }
}

/* Een lagere variant van het breinvlak, voor een pagina waar de kop kort is en
   het echte werk eronder gebeurt, zoals de agenda op de contactpagina. */
.pb-breinvlak-kort { min-height: 460px; }
.pb-breinvlak-kort .pb-breinvlak-tekst { padding: 104px 22px 90px; }

/* Deze variant opent de pagina en begint dus direct onder de vaste menubalk.
   Het verloop aan de bovenkant valt daardoor grotendeels achter die balk, en
   wat je overhoudt is het donkere staartje: een grijze streep in plaats van
   een overgang. Weglaten dus, net als op de insights-kop. De grens tussen de
   witte balk en het donker is dan een rechte lijn, en dat hoort zo. */
.pb-breinvlak-kort::before { display: none; }
.pb-breinvlak-kort::after { height: 190px; }

/* De kop mag ook een h1 zijn: op de homepage is het een tussenkop, op een
   pagina waar dit vlak de opening is, is het de paginatitel. */
.pb-breinvlak-tekst h1 {
  color: #F7FBFF; margin: 0;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem); font-weight: 800; letter-spacing: -.02em;
  text-shadow: 0 2px 26px rgba(4, 15, 48, .85);
}

/* De contactpagina heeft wit onder de kop, niet het lichtblauw van de
   homepage. De band moet daar dus in wit uitlopen. */
/* Onder dit vlak stond eerst wit, en pas verderop begon de lichtblauwe sectie
   van de gespiegelde inhoud. Het verloop eindigde dus in wit en daarna volgde
   alsnog een harde lijn naar #F4FAFF. Nu loopt het verloop in die kleur uit en
   krijgt de inhoud eronder dezelfde achtergrond, zodat er geen tussenstuk meer
   is om een rand in te zien. */
.pb-breinvlak-kort { --pb-vlak-rand: #F4FAFF; --pb-vlak-rgb: 244, 250, 255; }
.pb-breinvlak-kort + main { background: #F4FAFF; }

/* Zoeken in het cv. Zelfde vormtaal als het downloadblok erboven, zodat de
   twee als een paar lezen: eerst meenemen, dan doorzoeken. */
.pb-cvzoek { border: 1px solid #e3e9f2; border-radius: 12px; background: #fff; padding: 18px 24px; margin: 14px 0 26px; }
.pb-cvzoek-label { display: block; font-weight: 700; color: #001A6C; font-size: 1.02rem; margin-bottom: 10px; }
.pb-cvzoek-rij { display: flex; flex-wrap: wrap; gap: 10px; }
.pb-cvzoek-rij input { flex: 1 1 240px; min-width: 0; font: inherit; font-size: .95rem; padding: 11px 16px; border: 1px solid #d7e3f3; border-radius: 999px; background: #f7fbff; color: #1c2333; }
.pb-cvzoek-rij input:focus { outline: 2px solid #0085F2; outline-offset: 1px; background: #fff; }
.pb-cvzoek-rij button { border: 1px solid #d7e3f3; background: #fff; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 600; color: #5d6472; padding: 10px 20px; border-radius: 999px; }
.pb-cvzoek-rij button:hover { border-color: #0085F2; color: #001A6C; }
.pb-cvzoek-hint { margin: 10px 0 0 !important; font-size: .86rem; color: #6b7385; }
.pb-cvzoek-stand { margin: 4px 0 0 !important; font-size: .86rem; font-weight: 600; color: #0085F2; }

.pb-cvraak { background: #FFF1A8; color: inherit; padding: 0 2px; border-radius: 3px; scroll-margin-top: 90px; }
.pb-cvraak-actief { background: #FFC93D; box-shadow: 0 0 0 2px #FFC93D; }
.pb-cvzoek-rij button[data-pb-zoek-vorige], .pb-cvzoek-rij button[data-pb-zoek-volgende] { padding: 10px 14px; font-size: 1rem; line-height: 1; }
.pb-cvterm { border: 1px solid #d7e3f3; background: #f7fbff; color: #001A6C; font: inherit; font-size: .84rem; padding: 4px 11px; margin: 0 6px 6px 0; border-radius: 999px; cursor: pointer; }
.pb-cvterm:hover { border-color: #0085F2; background: #fff; }
.pb-cvterm:focus-visible { outline: 2px solid #0085F2; outline-offset: 1px; }

/* De kaders om een treffer in het cv zelf. De laag ligt in dezelfde doos als
   het paginabeeld en werkt met percentages, zodat hij meeschaalt met elke
   schermbreedte. */
.pb-cvpagina { position: relative; display: block; }
.pb-cvpagina img { display: block; width: 100%; height: auto; }
.pb-cvvlakken { position: absolute; inset: 0; pointer-events: none; }
.pb-cvvlak { position: absolute; background: rgba(255, 201, 61, .42); outline: 1px solid rgba(214, 150, 0, .75); border-radius: 2px; scroll-margin-top: 90px; }
.pb-cvvlak-actief { background: rgba(255, 145, 0, .55); outline: 2px solid #C25E00; }
.pb-cvtip { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: #0085F2; cursor: pointer; text-decoration: underline; }
.pb-cvzoek-meer { margin: 8px 0 0 !important; font-size: .86rem; color: #444b5c; }
.pb-cvzoek-meer a { color: #0085F2; font-weight: 600; }