/* JDI Blogs 4.1 · blogs.css = designer/blogs.css (richting A) + werkbank/plugin-4.1.css (gedrag van de plugin).
   Gemaakt door team/webdesigner/werkbank/bouw.py: pas de bronnen aan, niet dit bestand. */
/* JDI Blogs v5 · richting A (proef, niet online) */
/* ---------------------------------------------------------------- pijler en leestijd (de pil staat in de PTB, ongewijzigd) */
.jdi-blog-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.jdi-blog-pil{display:inline-flex;align-items:center;min-height:30px;padding:5px 14px;box-sizing:border-box;border-radius:999px;background:#65cdb4;
  color:#1d2c33;font-family:"Ambit Semi-Bold",sans-serif;font-size:13px;line-height:1.2;letter-spacing:.18px;white-space:nowrap}
.jdi-blog-tijd{font-family:"Ambit Regular",sans-serif;font-size:14px;line-height:1.4;color:#c9d6d8;white-space:nowrap}
.jdi-blog-boven p,.jdi-blog-kaart-onder p,.jdi-blog-kaart-zin p{margin:0}

/* ---------------------------------------------------------------- de kaart (Post Card 719): een lichtlijn, de titel, de zin
   Overal dezelfde kaart: op Inzichten en in "Meer inzichten". Bovenaan het beeld (een abstracte lichtlijn uit een reeks
   van zes, de plugin kiest het volgens de plaats van de kaart), daaronder de titel in Ultra-Bold, de korte zin in Light
   en pijler en leestijd als gewone tekst. Geen label boven de titel, geen knop, geen lijn. De hele kaart is de link. */
.jdi-blog-kaart{position:relative}
.jdi-blog-kaart>.fusion-column-wrapper{display:flex!important;flex-direction:column!important;justify-content:flex-start!important;
  background:transparent!important;border-radius:0!important;padding:0!important;margin:0!important}
/* het beeld: 2:1, hoek 30 zoals elk beeld op de site. Reeks 3 (ronde3.md) is een foto met haar eigen donker en korrel; ze
   mengt niet (geen lighten) en houdt haar hoeken, ook in de kop van Inzichten, waar ze als foto zichtbaar is. De inkt
   achter het beeld is enkel wat je ziet tot het geladen is. */
.jdi-blog-kaart .jdi-blog-kaart-beeld{position:relative;margin:0 0 28px!important;aspect-ratio:2/1;border-radius:30px;overflow:hidden;
  background:#1d2c33}
.jdi-blog-kaart .jdi-blog-kaart-beeld p{margin:0}
.jdi-blog-kaart .jdi-blog-kaart-beeld img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transform:scale(1.001);transition:transform .6s ease-in-out}
.jdi-blog-kaart .jdi-blog-kaart-titel{margin:0!important}
html body .jdi-blog-kaart .jdi-blog-kaart-titel h3.fusion-title-heading{font-family:"Ambit Ultra-Bold",sans-serif!important;font-weight:400!important;
  font-size:32px!important;line-height:1.12!important;letter-spacing:-.5px!important;color:#1d2c33;text-wrap:balance;
  hyphens:manual!important;-webkit-hyphens:manual!important}
.jdi-blog-kaart-titel a{color:inherit!important;text-decoration:none}
.jdi-blog-kaart .jdi-blog-kaart-zin{margin:14px 0 0!important}
.jdi-blog-kaart-zin p{max-width:560px;text-wrap:pretty;font-family:"Ambit Light",sans-serif!important;font-size:20px!important;line-height:1.55!important;color:#1d2c33}
.jdi-blog-kaart .jdi-blog-kaart-onder{margin:18px 0 0!important}
/* pijler en leestijd: gewone tekst, "Team & organisatie · 5 min lezen" (geen pil op een kaart) */
.jdi-blog-kaart .jdi-blog-meta{gap:0}
.jdi-blog-kaart .jdi-blog-pil{min-height:0;padding:0;border-radius:0;background:none;font-family:"Ambit Regular",sans-serif;font-size:15px;letter-spacing:0;color:#4c5a60}
.jdi-blog-kaart .jdi-blog-tijd{font-size:15px;color:#4c5a60}
.jdi-blog-kaart .jdi-blog-pil+.jdi-blog-tijd::before{content:"\00b7";margin:0 8px}
/* de hele kaart is de link; hover zoals de kaarten op /werk/: het beeld zoomt 3 % in 0,6 s (zacht in en uit), de titel
   krijgt meteen zijn onderlijn van 2 px */
.jdi-blog-kaart-titel a::after{content:"";position:absolute;inset:0;z-index:20;cursor:pointer;border-radius:30px}
.jdi-blog-kaart:hover .jdi-blog-kaart-beeld img{transform:scale(1.03)}
.jdi-blog-kaart:hover .jdi-blog-kaart-titel a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
/* focus: twee ringen, binnen papier en buiten inkt, zodat hij te zien is op papier en op de inkt van de kop (de nieuwste
   staat half in de kop). Geen schaduw: twee gewone outlines op de twee pseudo-elementen van de link; een outline volgt
   de hoek van 30 vanzelf op zijn afstand. */
.jdi-blog-kaart-titel a:focus-visible{outline:none}
.jdi-blog-kaart-titel a:focus-visible::after{outline:3px solid #1d2c33;outline-offset:11px;border-radius:30px}
.jdi-blog-kaart-titel a:focus-visible::before{content:"";position:absolute;inset:0;z-index:19;border-radius:30px;outline:3px solid #f9f9fb;outline-offset:8px;pointer-events:none}

/* ---------------------------------------------------------------- de lijst: Avada-raster opruimen */
.jdi-blogs .fusion-grid{display:grid!important;margin:0!important;padding:0!important;width:auto!important;height:auto!important;list-style:none}
html body .fusion-post-cards.jdi-blogs .fusion-grid>li.fusion-layout-column{width:auto!important;max-width:none!important;margin:0!important;padding:0!important;
  float:none!important;position:relative!important;left:auto!important;top:auto!important;transform:none!important}

/* ---------------------------------------------------------------- Inzichten: de lijst begint in de kop
   Twee kolommen die verspringen, zoals de casebanden ("niet zo clean naast elkaar"). De nieuwste staat rechts bovenaan en
   schuift met haar beeld de donkere kop in, op de plaats waar de kop nu leeg is; de tweede staat links, 288 px lager; zo
   verder om en om. Afwisseling vanzelf: plaats (links of rechts, hoog of laag) en beeld (zes lichtlijnen om de beurt).
   Werkt met elk aantal: de linkerkolom begint altijd op de ontworpen verspringing, de onderkant mag ongelijk eindigen. */
/* maten volgen de hoogte van het beeld (h = kolom / 2, de nieuwste h1 = kolom x 0,36 in 25:9): de nieuwste staat voor de
   helft in de kop, de linkerkolom zakt 70 % van h (tablet 92 %). --w is de breedte van de inhoud (Avada: 90 % tot 1440 px),
   --kol de kolom. Op 1440: kolom 624, h 312, h1 225, in de kop 112, verspringen 218: zo valt ook de lichtlijn van de
   tweede kaart in het eerste scherm (met 92 % stond daar 211 px lege inkt). */
html{--w:min(90vw,1440px);--gap:48px;--kol:calc((var(--w) - var(--gap)) / 2);--h:calc(var(--kol) / 2);--h1:calc(var(--kol) * .36)}
.jdi-blogs-alle .fusion-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);row-gap:120px;grid-auto-flow:row dense}
html body .fusion-post-cards.jdi-blogs-alle .fusion-grid>li.fusion-layout-column:nth-child(odd){grid-column:2}
html body .fusion-post-cards.jdi-blogs-alle .fusion-grid>li.fusion-layout-column:nth-child(even){grid-column:1;translate:0 calc(var(--h) * var(--zak,.7))}
/* de onderkant: geen regel die de twee kolommen gelijk laat eindigen. Die liet bij een oneven aantal de linkerkolom 262 tot
   324 px zakken, en dan bleef links onder de kop het eerste scherm leeg; de onderkant mag ongelijk eindigen (CEO, bijsturing
   na ronde 3, deel 5). */
/* staat de laatste kaart in de lage kolom, dan krijgt ze haar verschuiving als marge: zo is de lucht voor de footer altijd
   dezelfde, bij een even en een oneven aantal (zonder :has) */
html body .fusion-post-cards.jdi-blogs-alle .fusion-grid>li.fusion-layout-column:nth-child(even):last-child{margin-bottom:calc(var(--h) * var(--zak,.7))!important}

/* de kop van Inzichten (ronde3.md): zelfde inktband, zelfde H1 (Ultra-Bold 68 op x 72), geen knop meer. De nieuwste staat
   rechts als zichtbare foto met haar hoeken: ze begint op de hoogte van de H1 en schuift over de rand van de kop, zoals de
   foto van een blog, en op elke breedte op een lijn met de rechterkolom van de lijst. Tussen de H1 en de foto ligt overal
   minstens 48 px (CEO na ronde 3): vanaf 1200 px blijft de H1 binnen de linkerkolom van de lijst (plus de halve
   tussenruimte tot 1409), op drie regels. Komt een H1-regel tot op 48 px van de kolom van de foto, dan begint de foto 48 px
   onder die regel (het script van de plugin, zie --kop-in: van 1025 tot 1247 onder "strategie, teams"). De inleiding was al
   smal genoeg. */
.fusion-fullwidth.jdi-inzichten-kop{padding-bottom:24px!important}
@media (min-width:1200px){.jdi-inzichten-kop .fusion-title{max-width:calc(var(--kol) + var(--gap) * .5)!important}}
/* vanaf 1410 px (CEO, beslissing over de H1 na ronde 4, opstelling van copywriter/r5/lijn.css): de H1 houdt haar woorden en
   krijgt de breedte van de linkerkolom, op drie regels; de nieuwste staat op een lijn met de rechterkolom en is even breed als
   de kaarten eronder (geen 3/5 en 2/5 meer). */
@media (min-width:1410px){.jdi-inzichten-kop .fusion-title{max-width:var(--kol)!important}}
/* klik en hover op het deel van de nieuwste dat in de kop staat. Avada zet .fusion-row op z-index 10: die rij van de kop
   ligt boven de lijst (z-index 2) en ving de klik en de hover (1440: 6 van 18 punten op de kaart; gevonden door de
   webdesigner). De rij laat de muis door, dus de kaart krijgt ze (18 van 18), en de H1 blijft bovenop liggen. Niet de kop
   een eigen laag onder de lijst geven (z-index:1): dan dekt het vak van de nieuwste op 1280 tot 1399 px het einde van de
   tweede regel van de H1 af (1366: de staart van de g in "marketing"). Een link in de kop blijft klikbaar. */
.jdi-inzichten-kop .fusion-row{pointer-events:none}
.jdi-inzichten-kop .fusion-row a{pointer-events:auto}
.jdi-inzichten-kop .jdi-tekst{max-width:min(600px,calc(min(45vw,720px) - 56px))!important}
.jdi-inzichten-kop .jdi-tekst p{text-wrap:pretty} /* geen weeswoord in de inleiding (1200: "te / lezen.") */
/* geen woord alleen op de laatste regel van de H1 (zonder: "marketing" alleen op 1100, 1199 en 1440, en het beeld begint
   dan een regel lager). Vanaf 1025, waar het beeld naast de H1 staat; zat eerst in plugin-4.1.css, mag daar weg. */
@media (min-width:1025px){.jdi-inzichten-kop .fusion-title .fusion-title-heading{text-wrap:balance}}
/* de container van de lijst blijft papier (#main is op deze pagina inkt); enkel het raster schuift 220 px omhoog de kop in */
.fusion-fullwidth.jdi-inzichten-lijst{position:relative;z-index:2;padding-top:0!important;padding-bottom:128px!important;overflow:visible!important;
  background-color:#f9f9fb!important;--awb-background-color:#f9f9fb!important}
/* de nieuwste (vanaf 1025 px): haar beeld (2:1, hetzelfde als op haar kaart) begint op de hoogte van de H1. --kop-in is de
   afstand van de bovenkant van de H1 tot de onderkant van de kop, gemeten door het script van de plugin (na het laden van
   de letters en bij resize, op <html>). Zonder script valt het terug op 0,32 kolom (64 % van het vak in de kop). */
html body .fusion-post-cards.jdi-blogs-alle .fusion-grid>li.fusion-layout-column:first-child{margin-top:calc(var(--h1) * .5 - var(--kop-in, calc(var(--kol) * .32)))!important}
/* het vak van de nieuwste is zo hoog als nodig om van de hoogte van de H1 tot 96 px onder de rand van de kop te reiken
   (zoals de foto bovenaan een blog over de rand schuift); dezelfde foto, gesneden zoals object-fit: cover het doet */
html body .fusion-post-cards.jdi-blogs-alle .fusion-grid>li.fusion-layout-column:first-child .jdi-blog-kaart-beeld{aspect-ratio:auto;height:calc(var(--kop-in, calc(var(--kol) * .32)) + 96px)}
.jdi-inzichten-lijst .jdi-blogs-alle .fusion-grid{margin-top:calc(var(--h1) * -.5)!important}
/* ---------------------------------------------------------------- onder de blog: "Meer inzichten" (richting A)
   Op papier (het beeld is donker; op inkt zou het wegvallen). Drie kaarten naast elkaar, verspringend zoals de casebanden:
   de tweede 112 px lager, de derde 48 px. Zelfde kaart, titel 28 px omdat de kolom smaller is. */
.fusion-fullwidth.jdi-meer-inzichten{background-color:#f9f9fb!important;--awb-background-color:#f9f9fb!important;padding-top:120px!important;padding-bottom:208px!important}
.jdi-meer-inzichten .jdi-titel .fusion-title-heading{font-family:"Ambit Ultra-Bold",sans-serif!important;font-weight:400!important;color:#1d2c33!important}
.jdi-blog-verwant .fusion-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px;row-gap:64px}
html body .fusion-post-cards.jdi-blog-verwant .fusion-grid>li.fusion-layout-column:nth-child(3n+2){translate:0 112px}
html body .fusion-post-cards.jdi-blog-verwant .fusion-grid>li.fusion-layout-column:nth-child(3n+3){translate:0 48px}
html body .jdi-blog-verwant .jdi-blog-kaart .jdi-blog-kaart-titel h3.fusion-title-heading{font-size:28px!important}

/* ---------------------------------------------------------------- breedtes: kaart en lijst (richting A) */
@media (max-width:1279px){
  html body .jdi-blog-kaart .jdi-blog-kaart-titel h3.fusion-title-heading{font-size:28px!important}
  .jdi-blog-kaart-zin p{font-size:19px!important}
  /* "Meer inzichten" tot 1279 px: dezelfde twee verspringende kolommen als Inzichten (rechts, links lager, rechts). In drie
     kolommen (298 px op 1100) kromp het script de lange CEOxHR-titels tot 22 px om ze op drie regels te houden (kompas 4:
     minstens 24); in twee kolommen (471 px op 1100) staan ze op 28 px. Tussenruimte en verspringen volgen Inzichten. */
  .jdi-blog-verwant .fusion-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);row-gap:88px;grid-auto-flow:row dense}
  html body .fusion-post-cards.jdi-blog-verwant .fusion-grid>li.fusion-layout-column:nth-child(even):last-child{margin-bottom:calc(var(--h) * var(--zak,.7))!important}
  html body .fusion-post-cards.jdi-blog-verwant .fusion-grid>li.fusion-layout-column:nth-child(n){translate:none}
  html body .fusion-post-cards.jdi-blog-verwant .fusion-grid>li.fusion-layout-column:nth-child(odd){grid-column:2}
  html body .fusion-post-cards.jdi-blog-verwant .fusion-grid>li.fusion-layout-column:nth-child(even){grid-column:1;translate:0 calc(var(--h) * var(--zak,.7))}
}
@media (max-width:1024px){
  /* tablet: de kop staat over de volle breedte, dus de nieuwste begint onder de inleiding; de helft van haar beeld in de kop */
  html{--gap:24px;--zak:.92}
  html body .fusion-post-cards.jdi-blogs-alle .fusion-grid>li.fusion-layout-column:first-child{margin-top:0!important}
  html body .fusion-post-cards.jdi-blogs-alle .fusion-grid>li.fusion-layout-column:first-child .jdi-blog-kaart-beeld{aspect-ratio:2/1;height:auto}
  .jdi-inzichten-kop .fusion-title{max-width:none!important}
  .fusion-fullwidth.jdi-inzichten-kop{padding-bottom:96px!important}
  .jdi-inzichten-kop .jdi-tekst{max-width:none!important}
  .jdi-inzichten-lijst .jdi-blogs-alle .fusion-grid{margin-top:calc(var(--h) * -.5)!important;row-gap:88px}
  html body .jdi-blog-kaart .jdi-blog-kaart-titel h3.fusion-title-heading{font-size:24px!important;letter-spacing:-.3px!important}
  .jdi-blog-kaart-zin p{font-size:18px!important}
  .jdi-blog-kaart .jdi-blog-kaart-beeld{border-radius:24px;margin-bottom:22px!important}
  html body .jdi-blog-verwant .jdi-blog-kaart .jdi-blog-kaart-titel h3.fusion-title-heading{font-size:24px!important}
  .fusion-fullwidth.jdi-meer-inzichten{padding-bottom:120px!important}
}
@media (max-width:767px){
  /* gsm en smalle tablet: één kolom; de nieuwste schuift 96 px de kop in, zoals de foto bovenaan een blog, en volgt meteen op
     de inleiding (kompas: geen lege inktband van meer dan 48 px; was 80 px met 136 px opvulling). Tot 767 px en niet tot 640:
     in twee kolommen kromp een lange kaarttitel daar onder 24 px (kompas 4), en pas vanaf 747 px niet meer (gemeten met de
     langste titel; criticus ronde 5, punt 4). */
  .fusion-fullwidth.jdi-inzichten-kop{padding-bottom:88px!important}
  .fusion-fullwidth.jdi-inzichten-lijst{padding-bottom:120px!important} /* de footer schuift er 24 px over: 96 px lucht */
  .jdi-inzichten-lijst .jdi-blogs-alle .fusion-grid{margin-top:-96px!important}
  .jdi-blogs-alle .fusion-grid{grid-template-columns:minmax(0,1fr);row-gap:56px}
  html body .fusion-post-cards.jdi-blogs-alle .fusion-grid>li.fusion-layout-column:nth-child(n):last-child,
  html body .fusion-post-cards.jdi-blog-verwant .fusion-grid>li.fusion-layout-column:nth-child(n):last-child{margin-bottom:0!important}
  html body .fusion-post-cards.jdi-blogs-alle .fusion-grid>li.fusion-layout-column:nth-child(n),
  html body .fusion-post-cards.jdi-blog-verwant .fusion-grid>li.fusion-layout-column:nth-child(n){grid-column:1;translate:none}
  .jdi-blog-verwant .fusion-grid{grid-template-columns:minmax(0,1fr);padding-bottom:0!important}
  html body .jdi-blog-kaart .jdi-blog-kaart-titel h3.fusion-title-heading{font-size:26px!important;line-height:1.14!important}
  .jdi-blog-kaart .jdi-blog-kaart-beeld{margin-bottom:20px!important}
  .jdi-blog-kaart .jdi-blog-kaart-zin{margin-top:12px!important}
  .jdi-blog-kaart .jdi-blog-kaart-onder{margin-top:14px!important}
  .jdi-blog-kaart-titel a:focus-visible::after,.jdi-blog-kaart-titel a:focus-visible::before{border-radius:24px}
  .jdi-blog-kaart-titel a:focus-visible::after{outline-offset:9px}
  .jdi-blog-kaart-titel a:focus-visible::before{outline-offset:6px}
  .fusion-fullwidth.jdi-meer-inzichten{padding-top:72px!important;padding-bottom:80px!important}
  .jdi-blog-verwant .fusion-grid{row-gap:56px}
}
@media (prefers-reduced-motion:reduce){
  .jdi-blog-kaart .jdi-blog-kaart-beeld img{transition:none}
  .jdi-blog-kaart:hover .jdi-blog-kaart-beeld img{transform:none}
}
/* ---------------------------------------------------------------- de blog: donkere kop, foto over de rand (ongewijzigd) */
/* geen witte strook boven de kop (Avada zet 60 px boven #main als er een layout is) */
body.jdi-blog-pagina #main{padding-top:0!important;padding-bottom:0!important;background-color:var(--awb-color2)!important}
.jdi-blog-titel .fusion-title-heading{text-wrap:balance}
.jdi-blog-lead p{text-wrap:pretty}
.jdi-blog-hero .jdi-blog-boven{margin-top:32px!important}
.fusion-fullwidth.jdi-blog-cover{position:relative;z-index:2;margin-top:-232px!important;background:transparent!important;--awb-background-color:transparent!important}
.jdi-blog-coverbeeld{display:block!important;border-radius:30px!important;overflow:hidden;background:#1d2c33}
.jdi-blog-coverbeeld img{display:block;width:100%!important;height:auto;aspect-ratio:16/9!important;object-fit:cover}
/* Thijs (19-10): "op de blog zelf mag de foto veeeeel minder hoog 25/9 ofzo". Vanaf 641 px dus 25:9 (op 1440 467 px hoog in
   plaats van 729), uitgesneden op 30 % van boven: zo blijven de hoofden in beeld (gemeten op de tien blogs; in het midden
   vielen ze weg bij zwijgkost en employer branding). Op de gsm blijft het 16:9, anders wordt het een strook van 123 px. */
@media (min-width:641px){.jdi-blog-coverbeeld img{aspect-ratio:25/9!important;object-position:50% 30%!important}}
/* ---------------------------------------------------------------- "In dit artikel" (vanaf 1025 px)
   Ronde 4: een lichte kaart, niet meer in inkt: zacht mint #D4EAE8 voor 60 % op papier, #E3F0F0 (L 0,85). Wat de
   inktkaart oploste, blijft: in rust zie je de lijst meteen als eigen vlak bovenaan de blog (1,11:1 tegen papier; in v4
   grijze regels op papier, het blad van 4.1 stond op 1,00:1), en achter de lijst ligt op elke scrollpositie één kleur.
   Tijdens het lezen is de tekst de held: de kaart is lichter dan de mistbanden (L 0,81), de foto's en de balk, dus nooit het
   donkerste vlak naast een band of een foto. Zacht mint zelf (L 0,79) was op 34 van 43 posities donkerder dan de band.
   Opschrift inkt Ultra-Bold 18 (12,3:1), punten grijs #4C5A60 Regular 16 (6,1:1), het punt dat je leest een inktpil met
   witte letters (pil tegen kaart 12,3:1, tekst 14,38:1), zoals de gekozen filter op /werk/. Hover: de tekst wordt inkt,
   nooit een vlak. Focus: 2 px inkt, 2 px buiten de pil. Geen streep, geen nummer, geen mint als tekst.
   Maat: de tekst van de lijst staat op de inhoudsrand (x 72 op 1440, de lijn van de foto en de titel); de kaart steekt
   28 px links buiten die lijn (tot 1180: 26), zodat de pil 16 px van de rand blijft (CEO: twee rondingen niet in elkaar)
   zonder dat de tekst smaller wordt. Rechts stopt de kaart 48 px voor de blogtekst (uxer L9); de pil 16 px voor de rand.
   De blogtekst begint op inhoudsrand + 0,34653 x de inhoudsbreedte (gemeten van 1025 tot 1920). De tekst van een punt is
   zo 373 px breed op 1440, 323 op 1280, 265 op 1025: breder dan in ronde 3 (363, 313, 255), dus nergens een regel meer.
   Boven en onder zoals in ronde 3; de kaart begint op de hoogte van de eerste regel van de blog, en bij het meelopen blijft
   er 24 px tussen de balk (onderkant 80) en de kaart (104). Tot 1180 px schuift de tekstkolom 19 px op (uxer L3).
   Avada zet body op overflow-x:hidden en overflow-y:scroll; dan is body zelf een scrollvak en loopt er niets mee. Op een
   blog mag body gewoon zichtbaar zijn: html heeft overflow-x:clip, dus zijwaarts scrollen kan nog altijd niet. */
html body.jdi-blog-pagina{overflow:visible!important}
.jdi-blog-inhoud-kolom{align-self:stretch!important;position:relative;z-index:3}
.jdi-blog-inhoud-kolom>.fusion-column-wrapper{position:sticky;top:104px;height:auto!important;align-self:flex-start!important}
.jdi-blog-inhoud{--q:12px;--m:16px;--p:calc(var(--q) + var(--m));box-sizing:border-box;
  width:calc(min(90vw,1440px) * .34653 - 48px + var(--p) + var(--schuif,0px));margin:0 0 0 calc(var(--p) * -1);
  padding:26px var(--m) 22px var(--p);border-radius:30px;background:#e3f0f0;font-family:"Ambit Regular",sans-serif}
.jdi-blog-inhoud-kop{margin:0 0 10px;font-family:"Ambit Ultra-Bold",sans-serif;font-weight:400;font-size:18px;line-height:1.3;letter-spacing:-.1px;color:#1d2c33}
.jdi-blog-inhoud ol{list-style:none;margin:0;padding:0}
.jdi-blog-inhoud li{margin:0;padding:0}
.jdi-blog-inhoud a{display:block;margin:0 0 0 calc(var(--q) * -1);padding:6px var(--q);border-radius:999px;font-size:16px;line-height:1.4;color:#4c5a60!important;
  text-decoration:none!important;background-color:transparent;transition:color .2s ease-in-out,background-color .2s ease-in-out}
.jdi-blog-inhoud a:hover{color:#1d2c33!important}
.jdi-blog-inhoud a.is-actief,.jdi-blog-inhoud a.is-actief:hover{color:#fff!important;background-color:#1d2c33}
.jdi-blog-inhoud a:focus-visible{outline:2px solid #1d2c33;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.jdi-blog-inhoud a{transition:none}}
/* tot 1180 px: iets strakker, zodat de langste lijst (zwijgkost, negen punten) ook op 1025 x 768 meeloopt, en de
   tekstkolom 19 px later (alles in die kolom schuift mee: tekst, foto's, video's, citaten) */
@media (max-width:1180px){
  .jdi-blog-inhoud{--q:10px;--schuif:19px;padding-top:22px;padding-bottom:18px}
  .jdi-blog-inhoud a{padding-top:5px;padding-bottom:5px}
  .fusion-layout-column:has(>.fusion-column-wrapper>.fusion-text.jdi-blog-tekst)>.fusion-column-wrapper{padding-left:19px!important}
}
/* ---------------------------------------------------------------- de tekst */
.fusion-text.jdi-blog-tekst{max-width:760px;font-synthesis:none}
.fusion-text.jdi-blog-tekst>*{margin:0 0 20px}
.fusion-text.jdi-blog-tekst>*:last-child{margin-bottom:0}
/* de opstap: begint de blog met een korte alinea (de plugin zet de klasse tot 50 woorden), dan staat die in Light 22.
   Een lange eerste alinea blijft gewone tekst: anders wordt het een muur van lichte letters. */
.fusion-text.jdi-blog-tekst>p.jdi-blog-opstap{font-family:"Ambit Light",sans-serif;font-size:22px;line-height:1.6;letter-spacing:-.1px;text-wrap:pretty}
/* tussenkop: Ultra-Bold, zoals de koppen op de pijlerpagina en op jdi.be (daar Ambit Black). 160 px erboven: de helft
   is de onderrand van het vorige hoofdstuk, de andere helft de bovenrand van dit (zie hoofdstukken) */
.fusion-text.jdi-blog-tekst h2{margin:160px 0 20px;scroll-margin-top:120px;font-family:"Ambit Ultra-Bold",sans-serif!important;font-weight:400!important;
  font-size:38px!important;line-height:1.12!important;letter-spacing:-.6px!important;color:#1d2c33!important;text-wrap:balance}
.fusion-text.jdi-blog-tekst>h2:first-child{margin-top:0}
/* een tekstblok na een video of foto (die hebben 64 px onder zich): samen weer 160 */
.fusion-column-wrapper>*+.fusion-text.jdi-blog-tekst>h2:first-child{margin-top:96px}
.fusion-text.jdi-blog-tekst h3{margin:36px 0 8px;font-family:"Ambit Bold",sans-serif!important;font-weight:400!important;font-size:21px!important;
  line-height:1.3!important;letter-spacing:0!important;color:#1d2c33!important}
.fusion-text.jdi-blog-tekst h2+p,.fusion-text.jdi-blog-tekst h3+p,.fusion-text.jdi-blog-tekst h2+ul,.fusion-text.jdi-blog-tekst h3+ul{margin-top:0}
.jdi-blog-tekst a{color:#1d2c33;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.jdi-blog-tekst a:hover{color:#1d2c33;text-decoration-thickness:2px}
.jdi-blog-tekst a:focus-visible{outline:2px solid #1d2c33;outline-offset:3px;border-radius:2px}
.jdi-blog-tekst strong{font-family:"Ambit Bold",sans-serif;font-weight:400}
/* Ambit heeft geen schuine: nadruk in een zin (em, i) wordt Bold in plaats van een nagemaakte schuine letter. Een alinea die
   helemaal schuin stond ("Een voorbeeld uit eigen winkel:", de plugin zet jdi-blog-noot) blijft gewone tekst: in het vet
   leest ze als een label boven de kop eronder. */
.jdi-blog-tekst em,.jdi-blog-tekst i{font-style:normal;font-family:"Ambit Bold",sans-serif;font-weight:400}
.jdi-blog-tekst p.jdi-blog-noot em,.jdi-blog-tekst p.jdi-blog-noot i{font-family:"Ambit Regular",sans-serif}
.jdi-blog-tekst ul,.jdi-blog-tekst ol{padding-left:1.3em}
.jdi-blog-tekst li{margin:0 0 8px;padding-left:.2em}
.jdi-blog-tekst li::marker{color:#1d2c33}

/* ---------------------------------------------------------------- hoofdstukken: om en om een ander vlak
   Een hoofdstuk is een tussenkop (h2) en alles eronder tot de volgende. De plugin geeft elke tweede h2 de klasse jdi-band
   en de container met de tekst de klasse jdi-blog-lijf. Elke h2 legt onder zich een vlak over de volle breedte, 80 px boven
   de kop tot onderaan de container: mist bij jdi-band, papier bij de andere. De volgende h2 legt er zijn eigen vlak over,
   zo stopt elk vlak waar het volgende hoofdstuk begint: 80 px onder het laatste blok, 80 px boven de nieuwe kop.
   De container knipt af wat eronder of opzij uitsteekt (geen zijwaartse scroll) en is een eigen laag, zodat de vlakken
   achter de tekst en achter "In dit artikel" liggen. Niemand hoeft iets te doen in Avada of in de tekst: een nieuwe
   tussenkop schuift het ritme vanzelf mee. Geen kader, geen hoek, geen tweede vlak in een hoofdstuk. */
.fusion-fullwidth.jdi-blog-lijf{isolation:isolate;overflow:hidden!important;overflow:clip!important}
.jdi-blog-lijf .jdi-blog-tekst h2{position:relative}
.jdi-blog-lijf .jdi-blog-tekst h2::before{content:"";position:absolute;z-index:-1;top:-80px;left:-100vw;right:-100vw;height:100000px;
  background:#f9f9fb;pointer-events:none}
.jdi-blog-lijf .jdi-blog-tekst h2.jdi-band::before{background:#e1eaea}

/* ---------------------------------------------------------------- het citaat
   Wat de redacteur doet: een alinea selecteren en op Citaat klikken (blockquote). Wie het zei: een nieuwe regel onderaan in
   het citaat, in het vet; de plugin maakt daar de naam van (p.jdi-blog-bron) en laat getypte aanhalingstekens weg.
   Wat het ontwerp doet, naar de citaten op jdi.be: licht en iets groter dan de tekst (22-10: JDI vond 32 px te groot, nu 26), met een groot aanhalingsteken toon op toon erachter
   (mint op 28 %: op papier en op mist telkens een tint donkerder dan het vlak, nooit als letter op licht). Geen eigen vlak
   en geen streep: het vlak is al van het hoofdstuk. Rechtop: Avada zet font-style italic op elke blockquote en Ambit heeft
   geen schuine. Geldt voor elk tekstblok op een blog, ook een dat niet als blogtekst gemaakt is. */
.jdi-blog-pagina .fusion-text blockquote{position:relative;margin:96px 0 72px;padding:0;border:0;background:none;box-shadow:none;quotes:none;
  font-family:"Ambit Light",sans-serif;font-weight:400;font-style:normal;font-size:26px;line-height:1.35;letter-spacing:-.1px;color:#1d2c33;
  text-wrap:pretty}
.jdi-blog-pagina .fusion-text>blockquote:first-child{margin-top:64px}
.jdi-blog-pagina .fusion-text blockquote::before{content:"\201C";content:"\201C" / "";position:absolute;left:-.1em;top:-.36em;
  font-family:"Ambit Ultra-Bold",sans-serif;font-style:normal;font-size:170px;line-height:1;letter-spacing:0;color:rgba(101,205,180,.28);
  pointer-events:none}
.jdi-blog-pagina .fusion-text blockquote>*{position:relative}
.jdi-blog-pagina .fusion-text blockquote p{margin:0;font:inherit;color:inherit}
.jdi-blog-pagina .fusion-text blockquote p+p{margin-top:16px}
.jdi-blog-pagina .fusion-text blockquote strong{font-family:"Ambit Bold",sans-serif;font-weight:400}
.jdi-blog-pagina .fusion-text blockquote p.jdi-blog-bron{margin-top:20px;font-family:"Ambit Regular",sans-serif;font-size:16px;line-height:1.45;
  letter-spacing:0;color:#4c5a60}
.jdi-blog-pagina .fusion-text blockquote p.jdi-blog-bron strong{font-family:inherit}
.jdi-blog-pagina .fusion-text blockquote p.jdi-blog-bron a{color:inherit}
/* beweging: een citaat dat nog onder het scherm staat, komt zacht omhoog als het in beeld komt (script in de plugin).
   Zacht vertrekken en zacht landen; wat bij het laden al in beeld staat, beweegt niet. */
@media (prefers-reduced-motion:no-preference){
  .jdi-blog-pagina .fusion-text blockquote{transition:opacity .8s cubic-bezier(.45,0,.55,1),transform .8s cubic-bezier(.45,0,.55,1)}
  .jdi-blog-pagina .fusion-text blockquote.jdi-wacht{opacity:0;transform:translateY(24px)}
}

/* ---------------------------------------------------------------- een foto of video tussen de tekst (ongewijzigd) */
.jdi-blog-foto{display:block!important;border-radius:24px!important;overflow:hidden;margin:32px 0 64px!important}
.jdi-blog-foto img{display:block;width:100%!important;height:auto;aspect-ratio:3/2!important;object-fit:cover}
.fusion-image-element:has(.jdi-blog-foto){max-width:760px}
.jdi-blog-video,.jdi-blog-video .video-shortcode,.jdi-blog-video iframe{border-radius:24px;overflow:hidden}
/* Avada zet de video op max-width 1600 en marge 16/40 (inline, via --awb-max-width): zo liep hij 87 px buiten de tekst.
   Nu even breed als de tekst en de foto (760), met dezelfde lucht als een foto. */
.fusion-video.jdi-blog-video{max-width:760px!important;margin-top:32px!important;margin-bottom:64px!important}

/* ---------------------------------------------------------------- breedtes: de blog (ongewijzigd uit 4.0.1) */
@media (max-width:1024px){
  .jdi-blog-hero .jdi-blog-titel .fusion-title-heading{font-size:52px!important}
  .fusion-fullwidth.jdi-blog-cover{margin-top:-160px!important}
  .fusion-text.jdi-blog-tekst h2{margin-top:136px}
  .fusion-column-wrapper>*+.fusion-text.jdi-blog-tekst>h2:first-child{margin-top:72px}
  .jdi-blog-lijf .jdi-blog-tekst h2::before{top:-68px}
  .jdi-blog-pagina .fusion-text blockquote{font-size:25px}
}
@media (max-width:640px){
  .jdi-blog-hero .jdi-blog-titel .fusion-title-heading{font-size:34px!important;line-height:1.1!important;letter-spacing:-.5px!important}
  .jdi-blog-hero .jdi-blog-boven{margin-top:24px!important}
  .fusion-fullwidth.jdi-blog-cover{margin-top:-96px!important}
  .jdi-blog-coverbeeld{border-radius:20px!important}
  .fusion-text.jdi-blog-tekst{font-size:17px!important}
  .fusion-text.jdi-blog-tekst>p.jdi-blog-opstap{font-size:19px}
  .fusion-text.jdi-blog-tekst h2{margin-top:112px;font-size:28px!important;line-height:1.14!important;letter-spacing:-.4px!important}
  .fusion-column-wrapper>*+.fusion-text.jdi-blog-tekst>h2:first-child{margin-top:48px}
  .jdi-blog-lijf .jdi-blog-tekst h2::before{top:-56px}
  .jdi-blog-pagina .fusion-text blockquote{margin:80px 0 56px;font-size:21px;line-height:1.4}
  .jdi-blog-pagina .fusion-text>blockquote:first-child{margin-top:56px}
  .jdi-blog-pagina .fusion-text blockquote::before{font-size:120px}
  .jdi-blog-foto,.jdi-blog-video,.jdi-blog-video .video-shortcode,.jdi-blog-video iframe{border-radius:20px!important}
}
@media (max-width:360px){
  .fusion-text.jdi-blog-tekst h2{hyphens:auto!important;-webkit-hyphens:auto!important}
}
@media (prefers-reduced-motion:reduce){
  .jdi-blog-inhoud a{transition:none}
  .jdi-blog-pagina .fusion-text blockquote{transition:none;opacity:1;transform:none}
}

/* werkbank/plugin-4.1.css · wat de plugin 4.1 aan de css van de designer toevoegt: het gedrag van "In dit artikel" en de
   ankers. bouw.py zet het achter designer/blogs.css in jdi-blogs/blogs.css, de css van de plugin. */
/* een tussenkop in een ander tekstblok of een Titel-element op H2 staat ook in "In dit artikel": ook die komt na een
   klik (zonder JavaScript) vrij onder de nav */
.jdi-blog-pagina .fusion-text h2[id],.jdi-blog-pagina .fusion-title h2[id]{scroll-margin-top:120px}
/* gedrag (inhoud.js, ux.md): past de lijst niet in het venster, dan loopt ze niet mee (I19); na een klik heeft de kop de
   focus, zonder rand (I14); de knop naar boven is weg zolang de lijst in beeld is, zacht in 200 ms (I22) */
.jdi-blog-inhoud-kolom>.fusion-column-wrapper.jdi-inhoud-los{position:static!important}
.jdi-blog-pagina h2[tabindex="-1"]:focus{outline:none}
html.jdi-inhoud-in-beeld .to-top-container{opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  transition:opacity .2s ease-in-out,visibility .2s ease-in-out!important}
@media (prefers-reduced-motion:reduce){html.jdi-inhoud-in-beeld .to-top-container{transition:none!important}}
/* de kop van Inzichten: de rij laat de muis door (designer), zodat het deel van de nieuwste in de kop klik en hover krijgt.
   De H1 en de inleiding blijven selecteerbaar (werkbank/kop.js, 320 tot 1920). */
.jdi-inzichten-kop .jdi-tekst,.jdi-inzichten-kop .jdi-titel{pointer-events:auto}
/* behalve waar het vak van de H1 over het beeld reikt (titels.js, nu 1025 tot 1199 px): daar krijgt de kaart de klik */
.jdi-inzichten-kop .jdi-titel.jdi-over-beeld{pointer-events:none}
/* zonder beeld geen beeldvak (CEO na ronde 3), ook niet bij de nieuwste. Dat gebeurt enkel als de reeks leeg is en de blog
   geen eigen beeld heeft. Heeft de nieuwste geen beeld, dan schuift ze ook niet de kop in (haar tekst zou op de inkt staan):
   de lijst begint 96 px onder de kop, en de kop krijgt onder de inleiding 96 px lucht, zoals op tablet. */
.jdi-blog-kaart .jdi-blog-kaart-beeld:not(:has(img)){display:none}
html body .fusion-post-cards.jdi-blogs-alle .fusion-grid:not(:has(>li:first-child .jdi-blog-kaart-beeld img)){margin-top:0!important}
html body .fusion-post-cards.jdi-blogs-alle .fusion-grid>li.fusion-layout-column:first-child:not(:has(.jdi-blog-kaart-beeld img)){margin-top:0!important}
body:not(:has(.jdi-blogs-alle .fusion-grid>li:first-child .jdi-blog-kaart-beeld img)) .fusion-fullwidth.jdi-inzichten-kop{padding-bottom:96px!important}
body:not(:has(.jdi-blogs-alle .fusion-grid>li:first-child .jdi-blog-kaart-beeld img)) .fusion-fullwidth.jdi-inzichten-lijst{padding-top:96px!important}
/* "Meer inzichten" in twee kolommen (768 tot 1279 px): twee kaarten, geen derde alleen onderaan met een gat ernaast
   (kritiek pagina's 8: 425 px op 820). Ze eindigen zo hoogstens de verspringing uit elkaar. Tot 767 px: een kolom, alle drie. */
@media (min-width:768px) and (max-width:1279px){
  html body .fusion-post-cards.jdi-blog-verwant .fusion-grid>li.fusion-layout-column:nth-child(n+3){display:none!important}
}
/* "In dit artikel" (uxer ronde 3, L4): gebalanceerd, samen met de harde spaties die de plugin in elk punt zet (jdi_blogs_lijm):
   geen woord alleen op de laatste regel, geen gebroken woord of groep, geen laatste regel korter dan een derde */
.jdi-blog-inhoud a{text-wrap:balance}
/* de foto bovenaan een blog staat op Standaard (30 % van boven) op elke breedte, ook op de gsm (uxer ronde 3); vanaf 641 px
   zet blogs.css dat al. Avada zet anders zijn brandpunt (--awb-object-position, 50 % 50 %). Een gekozen stand (Hoger, Lager)
   zet de plugin in wp_head, met een sterkere regel. */
.jdi-blog-coverbeeld img{object-position:50% 30%!important}

/* ================================================================================================================
   JDI Blogs 5.0 (24-10-2026). Thijs: het overzicht "staat raar, allemaal links en niet centraal, de eerste zo wat
   langs boven", "labeltjes mogen beter", "foto's iets meer variatie"; in de blog "geen streepje" in de titel, de foto
   "iets minder breed", en "in de blog zelf designwerk: meer kleur, iconen bij opsommingen, de stappen met bolletjes en
   een animatie". Dit blok komt na alles hierboven en wint dus. Bron: werk/36-blogs-v5 (niet meer bouw.py).
   ================================================================================================================ */

/* ---------------------------------------------------------------- Inzichten: de nieuwste breed, dan drie kolommen */
.fusion-fullwidth.jdi-inzichten-kop{padding-bottom:112px!important}
.fusion-fullwidth.jdi-inzichten-lijst{padding-top:64px!important}
html body .fusion-post-cards.jdi-blogs-alle .fusion-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:40px!important;
  row-gap:80px!important;margin-top:0!important}
html body .fusion-post-cards.jdi-blogs-alle .fusion-grid>li.fusion-layout-column,
html body .fusion-post-cards.jdi-blogs-alle .fusion-grid>li.fusion-layout-column:nth-child(odd),
html body .fusion-post-cards.jdi-blogs-alle .fusion-grid>li.fusion-layout-column:nth-child(even){grid-column:auto!important;translate:none!important;
  margin:0!important}
html body .fusion-post-cards.jdi-blogs-alle :is(.fusion-grid:not(.is-gefilterd)>li.fusion-layout-column:first-child,.fusion-grid.is-gefilterd>li.fusion-layout-column.jdi-eerste){grid-column:1/-1!important;margin:0 0 16px!important}
.jdi-blogs-alle :is(.fusion-grid:not(.is-gefilterd)>li:first-child,.fusion-grid.is-gefilterd>li.jdi-eerste)>.fusion-column-wrapper{display:grid!important;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  grid-template-rows:1fr auto auto auto 1fr;column-gap:64px}
.jdi-blogs-alle :is(.fusion-grid:not(.is-gefilterd)>li:first-child,.fusion-grid.is-gefilterd>li.jdi-eerste) .jdi-blog-kaart-beeld{grid-column:1;grid-row:1/-1;margin:0!important;aspect-ratio:16/10!important;height:auto!important}
.jdi-blogs-alle :is(.fusion-grid:not(.is-gefilterd)>li:first-child,.fusion-grid.is-gefilterd>li.jdi-eerste) .jdi-blog-kaart-titel{grid-column:2;grid-row:2}
.jdi-blogs-alle :is(.fusion-grid:not(.is-gefilterd)>li:first-child,.fusion-grid.is-gefilterd>li.jdi-eerste) .jdi-blog-kaart-zin{grid-column:2;grid-row:3}
.jdi-blogs-alle :is(.fusion-grid:not(.is-gefilterd)>li:first-child,.fusion-grid.is-gefilterd>li.jdi-eerste) .jdi-blog-kaart-onder{grid-column:2;grid-row:4}
html body .jdi-blogs-alle :is(.fusion-grid:not(.is-gefilterd)>li:first-child,.fusion-grid.is-gefilterd>li.jdi-eerste) .jdi-blog-kaart-titel h3.fusion-title-heading{font-size:44px!important;line-height:1.08!important;letter-spacing:-1px!important}
.jdi-blogs-alle :is(.fusion-grid:not(.is-gefilterd)>li:first-child,.fusion-grid.is-gefilterd>li.jdi-eerste) .jdi-blog-kaart-zin p{font-size:21px!important}
/* de kaarten: beeld 3:2, het label van de pijler op het beeld, de leestijd onder de zin */
.jdi-blog-kaart .jdi-blog-kaart-beeld{aspect-ratio:3/2;border-radius:24px;margin-bottom:24px!important}
html body .jdi-blog-kaart .jdi-blog-kaart-titel h3.fusion-title-heading{font-size:26px!important;line-height:1.15!important;letter-spacing:-.3px!important}
.jdi-blog-kaart-zin p{font-size:18px!important;line-height:1.55!important}
.jdi-blog-kaart .jdi-blog-pil{position:absolute;top:16px;left:16px;z-index:21;pointer-events:none;min-height:0;padding:7px 14px;border-radius:999px;
  background:#65cdb4;color:#1d2c33;font-family:"Ambit Semi-Bold",sans-serif;font-size:13px;line-height:1.2;letter-spacing:.2px;
  box-shadow:0 4px 14px rgba(0,0,0,.18)}
.jdi-blog-kaart .jdi-blog-pil.jdi-pil-team-organisatie{background:#d4eae8}
.jdi-blog-kaart .jdi-blog-pil.jdi-pil-marketing-communicatie{background:#fff}
.jdi-blog-kaart .jdi-blog-pil+.jdi-blog-tijd::before{content:none}
.jdi-blog-kaart .jdi-blog-tijd{display:inline-flex;align-items:center;gap:8px}
.jdi-blog-kaart .jdi-blog-tijd::after{content:none}
/* filteren op pijler (de knoppen maakt v5.js; zonder script staan alle blogs er gewoon) */
.jdi-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 48px}
.jdi-filter button{appearance:none;border:1.5px solid #1d2c33;background:transparent;color:#1d2c33;border-radius:999px;padding:10px 20px;
  font-family:"Ambit Semi-Bold",sans-serif;font-size:15px;line-height:1.2;cursor:pointer;transition:background .2s,color .2s}
.jdi-filter button:hover{background:#d4eae8}
.jdi-filter button[aria-pressed="true"]{background:#1d2c33;color:#fff}
.jdi-filter button:focus-visible{outline:3px solid #65cdb4;outline-offset:2px}
.jdi-filter button span{opacity:.6;margin-left:6px;font-family:"Ambit Regular",sans-serif}
html body .fusion-post-cards.jdi-blogs-alle .fusion-grid>li.fusion-layout-column.jdi-verborgen{display:none!important}
.jdi-blogs-alle .fusion-grid>li.jdi-kom{animation:jdi-kom .45s ease both}
@keyframes jdi-kom{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (max-width:1024px){
  html body .fusion-post-cards.jdi-blogs-alle .fusion-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:64px!important;column-gap:32px!important}
  .jdi-blogs-alle :is(.fusion-grid:not(.is-gefilterd)>li:first-child,.fusion-grid.is-gefilterd>li.jdi-eerste)>.fusion-column-wrapper{display:flex!important}
  .jdi-blogs-alle :is(.fusion-grid:not(.is-gefilterd)>li:first-child,.fusion-grid.is-gefilterd>li.jdi-eerste) .jdi-blog-kaart-beeld{margin-bottom:28px!important}
  html body .jdi-blogs-alle :is(.fusion-grid:not(.is-gefilterd)>li:first-child,.fusion-grid.is-gefilterd>li.jdi-eerste) .jdi-blog-kaart-titel h3.fusion-title-heading{font-size:36px!important}
}
@media (max-width:640px){
  .fusion-fullwidth.jdi-inzichten-kop{padding-bottom:72px!important}
  .fusion-fullwidth.jdi-inzichten-lijst{padding-top:40px!important}
  html body .fusion-post-cards.jdi-blogs-alle .fusion-grid{grid-template-columns:minmax(0,1fr)!important;row-gap:56px!important}
  html body .jdi-blogs-alle :is(.fusion-grid:not(.is-gefilterd)>li:first-child,.fusion-grid.is-gefilterd>li.jdi-eerste) .jdi-blog-kaart-titel h3.fusion-title-heading{font-size:28px!important}
  .jdi-blogs-alle :is(.fusion-grid:not(.is-gefilterd)>li:first-child,.fusion-grid.is-gefilterd>li.jdi-eerste) .jdi-blog-kaart-zin p{font-size:18px!important}
  .jdi-filter{gap:8px;margin-bottom:36px}
  .jdi-filter button{padding:9px 16px;font-size:14px}
}

/* ---------------------------------------------------------------- de blog: titel zonder streepje, foto smaller */
.jdi-blog-pagina h1,.jdi-blog-pagina h1 .fusion-title-heading,.fusion-text.jdi-blog-tekst h2,.fusion-text.jdi-blog-tekst h3,.fusion-text.jdi-blog-tekst h4{
  hyphens:manual!important;-webkit-hyphens:manual!important;overflow-wrap:normal}
@media (min-width:768px){
  .fusion-image-element:has(.jdi-blog-coverbeeld){margin-left:calc(100% / 3 + 19px)!important;width:auto!important}
  .jdi-blog-coverbeeld img{aspect-ratio:16/10!important}
}

/* ---------------------------------------------------------------- bouwstenen in de tekst
   Een opsomming krijgt bolletjes in mint die na elkaar binnenkomen. Een opsomming met klasse jdi-tegels wordt tegels met
   een icoon (jdi-tegels--let-op, --plus, --gevolg, --vraag). div.jdi-stappen met div.jdi-stap: genummerde bolletjes op een
   lijn die meegroeit als je leest. p.jdi-definitie: een begrip in mint. div.jdi-duo: twee kaarten naast elkaar (waarom /
   wat doen). div.jdi-kleuren: de vier Insights-kleuren. div.jdi-drie: drie kaarten. div.jdi-conclusie: het besluit op inkt.
   p.jdi-kern: een zin die eruit springt. De animaties: v5.js zet .is-in zodra iets in beeld komt. */
.fusion-text.jdi-blog-tekst ul:not(.jdi-tegels){list-style:none;padding-left:0}
.fusion-text.jdi-blog-tekst ul:not(.jdi-tegels)>li{position:relative;padding-left:34px;margin-bottom:12px}
.fusion-text.jdi-blog-tekst ul:not(.jdi-tegels)>li::before{content:"";position:absolute;left:4px;top:.5em;width:12px;height:12px;border-radius:50%;
  background:#65cdb4;box-shadow:0 0 0 5px rgba(101,205,180,.25)}
/* tegels */
.fusion-text.jdi-blog-tekst ul.jdi-tegels{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:28px 0 32px}
.jdi-tegels>li{margin:0!important;padding:20px 22px 20px 76px!important;position:relative;background:#fff;border-radius:20px;
  box-shadow:0 8px 28px rgba(29,44,51,.08);font-family:"Ambit Semi-Bold",sans-serif;line-height:1.4;min-height:84px;display:flex;align-items:center}
.jdi-tegels>li::before{content:"";position:absolute;left:20px;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:50%;background:#1d2c33}
.jdi-tegels>li::after{content:"";position:absolute;left:30px;top:50%;width:20px;height:20px;margin-top:-10px;background:#65cdb4;
  -webkit-mask:var(--icoon) center/contain no-repeat;mask:var(--icoon) center/contain no-repeat}
.jdi-tegels{--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.jdi-tegels--let-op{--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='6' x2='12' y2='13'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E")}
.jdi-tegels--gevolg{--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 17 13.5 8.5 8.5 13.5 2 7'/%3E%3Cpolyline points='16 17 22 17 22 11'/%3E%3C/svg%3E")}
.jdi-tegels--plus{--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E")}
.jdi-tegels--vraag{--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E")}
.jdi-tegels.jdi-tegels--drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.jdi-tegels.jdi-tegels--drie>li{padding:76px 22px 22px!important;display:block}
.jdi-tegels.jdi-tegels--drie>li::before{top:20px;margin-top:0}
.jdi-tegels.jdi-tegels--drie>li::after{top:30px;margin-top:0}
/* stappen */
.jdi-stappen{position:relative;counter-reset:jdi-stap;margin:40px 0 48px;padding-left:84px}
.jdi-stappen::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:rgba(29,44,51,.14)}
.jdi-stappen::after{content:"";position:absolute;left:27px;top:28px;width:2px;height:calc((100% - 56px) * var(--groei,0));background:#65cdb4;
  transition:height .15s linear}
.jdi-stap{position:relative;counter-increment:jdi-stap;margin:0 0 40px}
.jdi-stap:last-child{margin-bottom:0}
.jdi-stap::before{content:counter(jdi-stap);position:absolute;left:-84px;top:-4px;width:56px;height:56px;border-radius:50%;background:#fff;
  border:2px solid rgba(29,44,51,.18);color:#1d2c33;font-family:"Ambit Ultra-Bold",sans-serif;font-size:22px;line-height:52px;text-align:center;
  z-index:1;transition:background .4s,border-color .4s,color .4s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.jdi-stap.is-aan::before{background:#1d2c33;border-color:#1d2c33;color:#65cdb4;transform:scale(1.08)}
.fusion-text.jdi-blog-tekst .jdi-stap>h3,.fusion-text.jdi-blog-tekst .jdi-stap>h4{margin:0 0 10px!important;font-family:"Ambit Ultra-Bold",sans-serif!important;
  font-size:26px!important;line-height:1.15!important;letter-spacing:-.3px}
.jdi-stap>*:last-child{margin-bottom:0}
.jdi-stap p.jdi-label{margin:16px 0 6px;font-family:"Ambit Semi-Bold",sans-serif;font-size:14px;letter-spacing:.3px;color:#4c5a60}
/* chips: een korte rij namen */
p.jdi-chips{display:flex;flex-wrap:wrap;gap:10px}
p.jdi-chips>span{display:inline-flex;align-items:center;gap:10px;padding:9px 18px 9px 10px;border-radius:999px;background:#fff;
  box-shadow:0 4px 16px rgba(29,44,51,.08);font-family:"Ambit Semi-Bold",sans-serif;font-size:16px;line-height:1.2}
p.jdi-chips>span::before{content:attr(data-n);display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  background:#65cdb4;color:#1d2c33;font-family:"Ambit Ultra-Bold",sans-serif;font-size:14px}
/* definitie */
.fusion-text.jdi-blog-tekst p.jdi-definitie{background:#65cdb4;color:#1d2c33;border-radius:20px;padding:22px 26px;margin:24px 0;font-family:"Ambit Regular",sans-serif}
.jdi-definitie strong{font-family:"Ambit Ultra-Bold",sans-serif}
/* duo: waarom en wat doen */
.jdi-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:28px 0 8px}
.jdi-duo-vak{border-radius:24px;padding:28px 28px 30px;background:#fff;box-shadow:0 8px 28px rgba(29,44,51,.08)}
.jdi-duo-vak.jdi-duo-doen{background:#1d2c33;color:#fff;box-shadow:none}
.fusion-text.jdi-blog-tekst .jdi-duo-vak h3{margin:0 0 10px!important;font-size:18px!important;display:flex;align-items:center;gap:12px}
.jdi-duo-vak h3::before{content:"";flex:none;width:32px;height:32px;border-radius:50%;background:#d4eae8 var(--icoon) center/16px no-repeat}
.jdi-duo-waarom h3::before{--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2c33' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='13'/%3E%3Cline x1='12' y1='19' x2='12.01' y2='19'/%3E%3C/svg%3E")}
.jdi-duo-doen h3{color:#65cdb4!important}
.jdi-duo-doen h3::before{background-color:#65cdb4;--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2c33' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E")}
.jdi-duo-vak p{margin:0}
.jdi-duo-doen a{color:#fff!important}
/* de vier Insights-kleuren */
.jdi-kleuren{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:32px 0 40px}
.jdi-kleur{border-radius:24px;padding:26px 26px 22px;color:#fff}
.jdi-kleur--blauw{background:#2f6fb5}.jdi-kleur--rood{background:#c8423b}.jdi-kleur--groen{background:#2f8f5b}.jdi-kleur--geel{background:#f2c230;color:#1d2c33}
.fusion-text.jdi-blog-tekst .jdi-kleur h3{margin:0 0 14px!important;color:inherit!important;font-family:"Ambit Ultra-Bold",sans-serif!important;font-size:22px!important}
.fusion-text.jdi-blog-tekst .jdi-kleur ul>li{padding-left:22px;margin-bottom:6px}
.fusion-text.jdi-blog-tekst .jdi-kleur ul>li::before{left:0;width:8px;height:8px;top:.6em;background:currentColor;box-shadow:none;opacity:.85}
.jdi-kleur ul{margin:0}
/* drie kaarten */
.jdi-drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:28px 0}
.jdi-drie>div{background:#fff;border-radius:24px;padding:26px;box-shadow:0 8px 28px rgba(29,44,51,.08)}
.jdi-drie>div:nth-child(2){background:#65cdb4}
.jdi-drie>div:nth-child(3){background:#1d2c33;color:#fff}
.jdi-drie>div:nth-child(3) a{color:#fff!important}
.fusion-text.jdi-blog-tekst .jdi-drie h3{margin:0 0 10px!important;font-size:20px!important;color:inherit!important}
.jdi-drie p{margin:0;font-size:16px;line-height:1.6}
/* het besluit op inkt */
.jdi-conclusie{background:#1d2c33;color:#fff;border-radius:30px;padding:36px 40px;margin:8px 0 0}
.jdi-conclusie p{margin:0 0 16px}.jdi-conclusie p:last-child{margin:0}
.jdi-conclusie a{color:#fff!important}
.jdi-conclusie strong{color:#65cdb4}
/* een zin die eruit springt */
.fusion-text.jdi-blog-tekst p.jdi-kern{font-family:"Ambit Light",sans-serif;font-size:28px;line-height:1.35;letter-spacing:-.3px;margin:40px 0;color:#1d2c33;text-wrap:balance}
.jdi-kern mark{background:linear-gradient(transparent 58%,rgba(101,205,180,.55) 58%);color:inherit;padding:0 2px}
/* binnenkomen */
.jdi-anim{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.jdi-anim:not(.is-in){opacity:0;transform:translateY(18px)}
.jdi-anim-lijst>li{transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
.jdi-anim-lijst:not(.is-in)>li{opacity:0;transform:translateX(-10px)}
.jdi-anim-lijst:not(.is-in)>li::before{transform:scale(0)}
.fusion-text.jdi-blog-tekst ul>li::before{transition:transform .4s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i,0) * 70ms + 120ms)}
@media (prefers-reduced-motion:reduce){
  .jdi-anim,.jdi-anim-lijst>li,.jdi-anim-lijst>li::before{transition:none!important;opacity:1!important;transform:none!important}
}
@media (max-width:767px){
  .fusion-text.jdi-blog-tekst ul.jdi-tegels,.jdi-tegels.jdi-tegels--drie,.jdi-duo,.jdi-kleuren,.jdi-drie{grid-template-columns:minmax(0,1fr)}
  .jdi-stappen{padding-left:64px}
  .jdi-stappen::before,.jdi-stappen::after{left:21px;top:22px}
  .jdi-stap::before{left:-64px;width:44px;height:44px;line-height:40px;font-size:18px}
  .fusion-text.jdi-blog-tekst .jdi-stap>h3,.fusion-text.jdi-blog-tekst .jdi-stap>h4{font-size:22px!important}
  .jdi-conclusie{padding:28px 24px;border-radius:24px}
  .fusion-text.jdi-blog-tekst p.jdi-kern{font-size:23px}
}
.fusion-text.jdi-blog-tekst .jdi-conclusie h3,.fusion-text.jdi-blog-tekst .jdi-conclusie h4{color:#65cdb4!important;margin:0 0 12px!important;font-size:22px!important}
.fusion-text.jdi-blog-tekst .jdi-duo-doen h3{color:#65cdb4!important}
.fusion-text.jdi-blog-tekst .jdi-kleur--geel h3{color:#1d2c33!important}

/* "Meer inzichten" onder een blog: drie kaarten op een rij, niet meer verspringend (zoals Inzichten) */
html body .fusion-post-cards.jdi-blog-verwant .fusion-grid>li.fusion-layout-column:nth-child(n){translate:none!important;grid-column:auto!important;margin-bottom:0!important}
html body .fusion-post-cards.jdi-blog-verwant .fusion-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:40px!important;row-gap:56px!important}
html body .jdi-blog-verwant .jdi-blog-kaart .jdi-blog-kaart-titel h3.fusion-title-heading{font-size:24px!important}
@media (min-width:1025px) and (max-width:1279px){html body .fusion-post-cards.jdi-blog-verwant .fusion-grid>li.fusion-layout-column:nth-child(n+3){display:block!important}}
@media (max-width:1024px){html body .fusion-post-cards.jdi-blog-verwant .fusion-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:32px!important}}
@media (max-width:767px){html body .fusion-post-cards.jdi-blog-verwant .fusion-grid{grid-template-columns:minmax(0,1fr)!important}}

/* tegels in drie: sterker dan de gewone tegelregel */
.fusion-text.jdi-blog-tekst ul.jdi-tegels.jdi-tegels--drie{grid-template-columns:repeat(3,minmax(0,1fr))}
/* drie kaarten: onder elkaar, de kop links en de tekst rechts (drie smalle kolommen werden te lange torens) */
.jdi-drie{grid-template-columns:minmax(0,1fr)!important;gap:14px}
.jdi-drie>div{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);column-gap:28px;align-items:start;padding:26px 30px}
.fusion-text.jdi-blog-tekst .jdi-drie h3{margin:0!important}
@media (max-width:767px){
  .fusion-text.jdi-blog-tekst ul.jdi-tegels.jdi-tegels--drie{grid-template-columns:minmax(0,1fr)}
  .jdi-drie>div{grid-template-columns:minmax(0,1fr);row-gap:8px;padding:24px}
}

/* ================================================ 5.0.2 (24-10, na de criticus) */
/* een icoon per punt: li.jdi-i-<naam> in een tegellijst (lucide, als masker) */
.jdi-tegels>li.jdi-i-praten{--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-doel{--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-lijst{--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 17 2 2 4-4'/%3E%3Cpath d='m3 7 2 2 4-4'/%3E%3Cpath d='M13 6h8'/%3E%3Cpath d='M13 12h8'/%3E%3Cpath d='M13 18h8'/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-kompas{--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76'/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-slot{--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-euro{--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12'/%3E%3Cpath d='M4 14h9'/%3E%3Cpath d='M19 6a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2'/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-klok{--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-mensen{--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-fout{--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-wissel{--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18h1.4c1.3 0 2.5-.6 3.3-1.7l6.1-8.6c.7-1.1 2-1.7 3.3-1.7H22'/%3E%3Cpath d='m18 2 4 4-4 4'/%3E%3Cpath d='M2 6h1.9c1.5 0 2.9.9 3.6 2.2'/%3E%3Cpath d='M22 18h-5.9c-1.3 0-2.6-.7-3.3-1.8l-.5-.8'/%3E%3Cpath d='m18 14 4 4-4 4'/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-award{--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-oog{--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-hart{--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E")}
/* de nieuwste staat ook na een filter breed bovenaan (v5.js zet jdi-eerste op de eerste zichtbare) */
/* labels: drie duidelijk verschillende pillen */
.jdi-blog-kaart .jdi-blog-pil.jdi-pil-team-organisatie{background:#fff}
.jdi-blog-kaart .jdi-blog-pil.jdi-pil-marketing-communicatie{background:#1d2c33;color:#65cdb4;box-shadow:inset 0 0 0 1.5px #65cdb4,0 4px 14px rgba(0,0,0,.18)}
.fusion-fullwidth.jdi-inzichten-lijst{padding-bottom:72px!important}
/* drie kaarten: de kop krijgt genoeg plaats (Persoonlijkheidsanalyse) */
.jdi-drie>div{grid-template-columns:minmax(0,270px) minmax(0,1fr)}
.fusion-text.jdi-blog-tekst .jdi-drie h3{font-size:19px!important;overflow-wrap:anywhere}
.jdi-kleur--groen{background:#23774a}
/* de foto bovenaan: enkel smaller waar de inhoud links ernaast staat (vanaf 1025 px), daaronder over de volle breedte */
@media (min-width:768px) and (max-width:1024px){.fusion-image-element:has(.jdi-blog-coverbeeld){margin-left:0!important}.jdi-blog-coverbeeld img{aspect-ratio:16/9!important}}
/* duo: de waarom-kaart is korter, ze hoeven niet even hoog te zijn */
.jdi-duo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
/* chips zijn links naar de stappen */
p.jdi-chips>a{display:inline-flex;align-items:center;gap:10px;padding:9px 18px 9px 10px;border-radius:999px;background:#fff;
  box-shadow:0 4px 16px rgba(29,44,51,.08);font-family:"Ambit Semi-Bold",sans-serif;font-size:16px;line-height:1.2;color:#1d2c33!important;
  text-decoration:none!important;transition:background .2s}
p.jdi-chips>a:hover{background:#d4eae8}
p.jdi-chips>a::before{content:attr(data-n);display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  background:#65cdb4;color:#1d2c33;font-family:"Ambit Ultra-Bold",sans-serif;font-size:14px}
.jdi-stap{scroll-margin-top:120px}
@media (max-width:767px){p.jdi-chips{gap:8px}p.jdi-chips>a{font-size:14px;padding:7px 14px 7px 8px}.jdi-duo{grid-template-columns:minmax(0,1fr)}.jdi-drie>div{grid-template-columns:minmax(0,1fr)}}

/* 5.1.0 (25-10, Thijs) · JDI-iconen: lijnen zoals de lichtlijn, allemaal dezelfde stijl, NOOIT een achtergrond.
   Op een witte kaart in inkt (mint is daar niet leesbaar), op de donkere kaart in mint. Bron: werk/40-blog-iconen/iconen.py */
.jdi-tegels>li{padding-left:66px!important}
.jdi-tegels>li::before{content:none!important;display:none!important}
.jdi-tegels>li::after{left:22px!important;width:28px!important;height:28px!important;margin-top:-14px!important;background:#1d2c33!important}
.jdi-tegels{--icoon:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 12.5 9.5 18 20 6.5%27/%3E%3C/svg%3E")}
.jdi-tegels--let-op{--icoon:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 4.5v9.5M12 19.2v.1%27/%3E%3C/svg%3E")}
.jdi-tegels--gevolg{--icoon:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2.5 17.5c5 0 6-7 10-7s4.5-4 8.5-4M16.5 5.5l4.5 1-1 4.5%27/%3E%3C/svg%3E")}
.jdi-tegels--plus{--icoon:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 5v14M5 12h14%27/%3E%3C/svg%3E")}
.jdi-tegels--vraag{--icoon:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M9 9.2a3 3 0 1 1 4.6 2.5c-1 .7-1.6 1.3-1.6 2.6M12 19v.1%27/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-praten{--icoon:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M7.6 19.4 3.5 20.8l1.1-4A8.5 8.5 0 1 1 7.6 19.4Z%27/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-doel{--icoon:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20.6 9.6A9 9 0 1 1 14.4 3.3M16.3 11.2a4.5 4.5 0 1 1-3.5-3.6M12 12l8-8M16.8 3.9h3.3v3.3%27/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-lijst{--icoon:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m3.8 6.6 1.6 1.6 3-3.2M12 6.5h8.5M3.8 13.1l1.6 1.6 3-3.2M12 13h8.5M12 19.5h8.5M5.4 19.5v.1%27/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-kompas{--icoon:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 3a9 9 0 1 1 0 18 9 9 0 0 1 0-18ZM15.5 8.5l-2.1 4.9-4.9 2.1 2.1-4.9Z%27/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-slot{--icoon:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 11h12v9.5H6ZM8.5 11V8a3.5 3.5 0 0 1 7 0v3M12 14.8v2.2%27/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-euro{--icoon:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M18 6.6a7 7 0 1 0 0 10.8M4 10.5h9M4 13.5h8%27/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-klok{--icoon:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 3a9 9 0 1 1 0 18 9 9 0 0 1 0-18ZM12 7.5V12l3.2 2%27/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-mensen{--icoon:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M9 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM2.5 20.5c0-3.6 2.9-6.2 6.5-6.2s6.5 2.6 6.5 6.2M16 4.3a3.5 3.5 0 0 1 0 6.4M18.5 14.7c1.8.9 3 2.9 3 5.8%27/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-fout{--icoon:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 3.5 21.5 20h-19ZM12 9.5v4.8M12 17.2v.1%27/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-wissel{--icoon:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 8h14M14.5 4.5 18 8l-3.5 3.5M20 16H6M9.5 12.5 6 16l3.5 3.5%27/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-award{--icoon:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 14.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11ZM8.6 13.4 7 21l5-2.5 5 2.5-1.6-7.6%27/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-oog{--icoon:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2.5 12C5 7 8.5 5 12 5s7 2 9.5 7c-2.5 5-6 7-9.5 7s-7-2-9.5-7ZM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z%27/%3E%3C/svg%3E")}
.jdi-tegels>li.jdi-i-hart{--icoon:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 20s-8-4.7-8-10.2a4.3 4.3 0 0 1 8-2.2 4.3 4.3 0 0 1 8 2.2C20 15.3 12 20 12 20Z%27/%3E%3C/svg%3E")}
.jdi-duo-vak h3::before{width:26px!important;height:26px!important;border-radius:0!important;background:none!important;-webkit-mask:var(--icoon) center/contain no-repeat;mask:var(--icoon) center/contain no-repeat}
.jdi-duo-waarom h3::before{--icoon:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 4.5v9.5M12 19.2v.1%27/%3E%3C/svg%3E");background-color:#1d2c33!important}
.jdi-duo-doen h3::before{--icoon:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 12h15M13.5 6.5 19 12l-5.5 5.5%27/%3E%3C/svg%3E");background-color:#65cdb4!important}