@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
:root{
 --bm-font-body:'Inter',sans-serif;
 --bm-font-menu:'Inter',sans-serif;
 --bm-font-h1:'Inter',sans-serif;
 --bm-font-h2:'Inter',sans-serif;
 --bm-font-h3:'Inter',sans-serif;
 --bm-font-hero:'Inter',sans-serif;
 --bm-font-archive-title:'Inter',sans-serif;
 --bm-single-font-body:'Inter',sans-serif;
 --bm-single-font-h1:'Inter',sans-serif;
 --bm-single-font-h2:'Inter',sans-serif;
 --bm-single-font-h3:'Inter',sans-serif;
}
body{font-family:var(--bm-font-body)!important;font-size:18px!important;line-height:1.3!important;letter-spacing:0px!important;color:#334155!important;font-weight:400!important}
body > header nav,body > header nav a,#mobileNav,#mobileNav a{font-family:var(--bm-font-menu)!important;font-size:18px!important;letter-spacing:0px!important;color:#0f172a!important;font-weight:500!important}
body > header nav a:hover,#mobileNav a:hover{color:#059669!important}
#top .hero-max{max-width:700px!important}
#top .hero-max>h2{font-family:var(--bm-font-hero)!important;font-size:50px!important;line-height:1.1!important;letter-spacing:-0.6px!important;color:#0f172a!important;font-weight:800!important}
h1:not(.bm-single-title){font-family:var(--bm-font-h1)!important;font-size:50px!important;line-height:1.06!important;letter-spacing:-0.6px!important;color:#0f172a!important;font-weight:800!important}
.heroWrap h1{font-size:50px!important}
/* Hero-fade: homepage (#top) krijgt exact dezelfde overgang als de subpagina's (.heroWrap) */
#top>div:first-child{background:radial-gradient(760px 380px at 14% 16%, rgba(16,185,129,0.10), rgba(16,185,129,0) 60%),linear-gradient(120deg, #f4faf6 0%, #eaf5ef 55%, #e3f2ea 100%)!important}
#top>div:first-child>div{background:transparent!important}
.heroWrap{background:radial-gradient(760px 380px at 14% 16%, rgba(16,185,129,0.10), rgba(16,185,129,0) 60%),linear-gradient(120deg, #f4faf6 0%, #eaf5ef 55%, #e3f2ea 100%)!important}
/* Hero-foto vloeit in de fade i.p.v. harde rand (homepage .hero-image-right + subpagina .heroPhoto) */
.hero-image-right img,.heroPhoto img{-webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,0.12) 17.68%, rgba(0,0,0,0.45) 32.42%, rgba(0,0,0,0.8) 44.21%, #000 56%)!important;mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,0.12) 17.68%, rgba(0,0,0,0.45) 32.42%, rgba(0,0,0,0.8) 44.21%, #000 56%)!important}
.hero-image-right{position:absolute}
.hero-image-right::after,.heroPhoto::after{content:""!important;position:absolute;inset:0;background:linear-gradient(to right, rgba(16,185,129,0) 6%, rgba(16,185,129,0.08) 38%, rgba(16,185,129,0) 70%)!important;pointer-events:none}
/* Semi-transparante sticky header; inner-container transparant zodat de doorkijk zichtbaar wordt */
body > header{background:rgba(255,255,255,0.85)!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important}
body > header>div{background:transparent!important}
/* Doorkijk-fix: als de header semi-transparant is, mag de body er niet massief wit achter zitten.
   Homepage-hero (#top) heeft eigen fade; op andere pagina's zorgt dit dat de eerste sectie erdoor schemert. */
body.bg-white{background-color:transparent!important}
main>section:first-of-type.bg-white,body>section:first-of-type.bg-white{background-color:transparent!important}
/* Homepage: verwijder de vaste witte laag achter de hero (die overschrijft de kleur-fade). */
#top>div:first-child>div.bg-white{background:transparent!important}
/* Header-lijnen (boven/onder), zichtbaar bovenop alles */
body > header{position:sticky!important;top:0!important;z-index:60!important;border-top:0!important;border-bottom:0!important;box-shadow:none!important}
/* Hero-pill tooltips openen boven de pill en zijn breder (dus lager) */
.pill-tip{top:auto!important;bottom:100%!important;margin-top:0!important;margin-bottom:.5rem!important;width:24rem!important;max-width:min(24rem,80vw)!important}
h2:not(.bm-content h2){font-family:var(--bm-font-h2)!important;line-height:1.1!important;letter-spacing:-0.3px!important;color:#0f172a!important;font-weight:800!important}
h3:not(.bm-content h3):not(.bm-card-title){font-family:var(--bm-font-h3)!important;line-height:1.1!important;letter-spacing:-0.3px!important;color:#0f172a!important;font-weight:700!important}
.bm-list-head h2,.bm-shell h2:not(.bm-card-title){font-size:24px!important}
.bm-card h2.bm-card-title,.bm-card h3.bm-card-title{font-family:var(--bm-font-archive-title)!important;font-size:24px!important;line-height:1.3!important;letter-spacing:-0.2px!important;color:#15221c!important;font-weight:700!important}
.bm-card-title a{color:inherit!important;font-weight:inherit!important}.bm-card p{color:#65736c!important;font-weight:400!important}.bm-card time{color:#65736c!important;font-weight:400!important}.bm-read{color:#18b77a!important;font-weight:700!important}
.bm-shell{width:min(100%,1300px)!important;margin-left:auto!important;margin-right:auto!important}.bm-grid{gap:24px!important}.bm-card{border-radius:18px!important}
/* Alleen de echte websiteheader mag sticky zijn. De artikelheader blijft normale inhoud. */
.bm-article-header{position:static!important;top:auto!important;z-index:auto!important;background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;box-shadow:none!important}
.bm-article{width:min(100%,850px)!important;max-width:850px!important;margin-left:auto!important;margin-right:auto!important;font-family:var(--bm-single-font-body)!important;color:#333333!important;font-weight:400!important}
.bm-article>.bm-article-header>h1.bm-single-title{font-family:var(--bm-single-font-h1)!important;font-size:50px!important;line-height:1.06!important;letter-spacing:-0.56px!important;margin:28px 0 18px!important;color:#0f172a!important;font-weight:800!important}
.bm-content{width:min(100%,820px)!important;max-width:820px!important;font-family:var(--bm-single-font-body)!important;font-size:18px!important;line-height:1.7!important;letter-spacing:0px!important;color:#333333!important;font-weight:400!important}
.bm-content h2{font-family:var(--bm-single-font-h2)!important;font-size:32px!important;line-height:1.1!important;letter-spacing:0px!important;color:#0f172a!important;font-weight:700!important}.bm-content h3{font-family:var(--bm-single-font-h3)!important;font-size:24px!important;line-height:1.1!important;letter-spacing:0px!important;color:#333333!important;font-weight:600!important}
.bm-meta{color:#65736c!important;font-weight:400!important}
/* Hyperlinks erven de volledige body-opmaak. Alleen kleur, gewicht en onderstreping zijn apart instelbaar. */
.bm-content a{
  font-family:inherit!important;
  font-size:inherit!important;
  line-height:inherit!important;
  letter-spacing:inherit!important;
  color:#333333!important;
  font-weight:400!important;
  text-decoration:underline!important;
  text-underline-offset:2px!important;
}
.bm-back{color:#333333!important;font-weight:400!important}
/* Opsommingen in blogartikelen tonen: reset ergens overschrijft anders de bullets/nummers */
.bm-content ul,.bm-content ol{margin:1em 0!important;padding-left:1.6em!important;list-style-position:outside!important}
.bm-content ul{list-style:disc!important}
.bm-content ol{list-style:decimal!important}
.bm-content ul ul{list-style:circle!important}
.bm-content ul ul ul{list-style:square!important}
.bm-content li{display:list-item!important;margin:.35em 0!important;padding-left:.15em!important}.bm-hero{border-radius:22px!important}
nav[aria-label="Breadcrumb"],nav[aria-label="breadcrumb"],.breadcrumbs,.breadcrumb,[data-breadcrumbs]{font-size:18px!important;color:#64748b!important;font-weight:400!important;}
nav[aria-label="Breadcrumb"] a,nav[aria-label="breadcrumb"] a,.breadcrumbs a,.breadcrumb a,[data-breadcrumbs] a{color:#64748b!important;font-weight:inherit!important}

.site-topbar,[data-site-topbar]{width:100%;padding:8px 0;font-family:var(--bm-font-body)!important;font-size:12px!important;line-height:1.35!important;position:relative;z-index:60}
.site-topbar-inner,[data-site-topbar]>.container,[data-site-topbar]>div{width:min(100%,1280px);margin:0 auto;padding-left:16px;padding-right:16px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.site-topbar p,[data-site-topbar] p{margin:0!important;color:inherit!important;font:inherit!important}
.site-topbar a,[data-site-topbar] a{color:inherit!important;text-decoration:underline;text-underline-offset:2px;font:inherit!important;white-space:nowrap}
@media(max-width:767px){.site-topbar-inner,[data-site-topbar]>.container,[data-site-topbar]>div{justify-content:center;text-align:center}.site-topbar a,[data-site-topbar] a{display:none}}

@media(max-width:620px){
 #top .hero-max>h2{font-size:33px!important}
 .heroWrap h1{font-size:33px!important}
 .bm-card h2.bm-card-title,.bm-card h3.bm-card-title{font-size:20px!important}
 .bm-article>.bm-article-header>h1.bm-single-title{font-size:38px!important}
 .bm-content{font-size:min(18px,17px)!important}
}