/*
 * mPower — sitestijl.
 *
 * Dit bestand is de CSS uit mpower-demo.html, één op één overgenomen zodat het
 * ontwerp identiek blijft. De kleuren, fonts en breedte komen nu uit theme.json:
 * hieronder worden de demo-variabelen daaraan gekoppeld, zodat een beheerder ze
 * op één plek kan wijzigen zonder deze CSS aan te raken.
 */

:root {
	--groen: var(--wp--preset--color--groen);
	--groen-d: var(--wp--preset--color--groen-donker);
	--donker: var(--wp--preset--color--donker);
	--donker-2: var(--wp--preset--color--donker-2);
	--mint: var(--wp--preset--color--mint);
	--mint-l: var(--wp--preset--color--mint-licht);
	--mint-r: var(--wp--preset--color--mint-rand);
	--oranje: var(--wp--preset--color--oranje);
	--wit: var(--wp--preset--color--wit);
	--grijs: var(--wp--preset--color--grijs);
	--kop: var(--wp--preset--font-family--kop);
	--txt: var(--wp--preset--font-family--txt);
	--wrap: 1140px;

	/*
	 * Terugvalkleur voor de gloed over de herofoto, voor browsers die
	 * color-mix() nog niet kennen. Als losse RGB-waarden, omdat de
	 * doorzichtigheid per stop in het kleurverloop verschilt.
	 * rgb(22, 59, 101) is #163B65.
	 */
	--gloed: 22, 59, 101;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--mint-l);color:var(--donker);font-family:var(--txt);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--oranje);outline-offset:3px}
[hidden]{display:none!important}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
h1,h2{margin:0;font-family:var(--kop);font-weight:900;line-height:1.06;letter-spacing:-.005em}
h1{font-size:clamp(2rem,4.4vw,3.3rem)}
h2{font-size:clamp(1.6rem,3vw,2.3rem)}
h3{margin:0;font-family:var(--kop);font-weight:600;font-size:1.1rem;line-height:1.3}
p{margin:0 0 1em}
section{padding:76px 0}
@media(max-width:760px){section{padding:48px 0}}
/* Introteksten onder een sectiekop. 95 tekens houdt een intro van een paar
   zinnen op twee regels, in plaats van een smalle kolom van vier. */
.mx{max-width:95ch}
.todo{background:#FFF0CC;color:#8A5A00;border-bottom:2px solid var(--oranje);padding:0 .3em;font-weight:700;font-size:.95em;white-space:nowrap}

.btn{display:inline-block;font-weight:700;font-size:1rem;padding:15px 30px;border-radius:110px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:opacity .15s,background .15s}
.btn:hover{opacity:.9}
.b-oranje{background:var(--oranje);color:var(--donker)}
.b-groen{background:var(--groen);color:#fff}
.b-lijn{border-color:var(--donker);color:var(--donker)}
.b-lijn:hover{background:var(--donker);color:#fff;opacity:1}
.b-licht{border-color:rgba(255,255,255,.5);color:#fff}
.b-licht:hover{background:#fff;color:var(--donker);opacity:1}

/* demo-balk */

/* nav */
.nav{background:var(--donker)}
.nav.op-hero{position:absolute;top:26px;left:0;right:0;background:transparent;z-index:20}
/* De meelopende balk: zodra je scrolt plakt hij aan de bovenrand. Het script
   zet de klasse; hier staat hoe hij er dan uitziet. */
/* Twee klassen, want ".nav.op-hero" hierboven is even specifiek: met alleen
   ".nav-vast" wint die absolute positionering en blijft de balk staan.
   Bewust zonder inschuifanimatie: die verplaatst de balk met een transform, en
   blijft die animatie ergens halverwege hangen, dan staat het blauw niet tegen
   de bovenrand. De balk houdt ook dezelfde hoogte als in rust, zodat het logo
   evenveel lucht houdt. */
.nav.nav-vast{position:fixed;top:0;left:0;right:0;z-index:70;background:var(--donker);
  box-shadow:0 6px 26px rgba(22,59,101,.22)}
.nav-in{display:flex;align-items:center;gap:24px;height:78px}
.logo{font-family:var(--kop);font-weight:900;font-size:1.4rem;color:#fff;text-decoration:none}
.logo span{color:var(--groen)}
.nav ul{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{color:#fff;text-decoration:none;font-size:.94rem;font-weight:600;padding:5px 0;border-bottom:2px solid transparent}
.nav ul a:hover,.nav ul a.actief{border-bottom-color:var(--groen)}
@media(max-width:1040px){.nav ul,.nav .btn{display:none}.nav-in{height:64px}}
/* De knop in het uitgeklapte mobiele menu staat binnen de <ul>, en
   .nav ul a is specifieker dan .b-oranje. Zonder deze twee regels houdt
   die knop de witte menukleur en valt hij weg op het oranje. */
.nav ul a.b-oranje{color:var(--donker)}
.nav ul a.b-groen{color:var(--wit)}

/* hero home */
.hero{position:relative;background:var(--donker);color:#fff;min-height:620px;display:flex;align-items:center;overflow:hidden}
.hero-img{position:absolute;inset:0;background-image:var(--hero-beeld,url('../images/hero-achtergrond.jpg'));background-size:cover;background-position:right 12%;background-repeat:no-repeat}
/* De gloed over de herofoto. Twee keer opgeschreven: de eerste regel is de
   terugval, de tweede volgt de themakleur "Donker" zodat de hero meekleurt als
   die in Weergave > Editor > Stijlen wordt aangepast. */
.hero-mask{position:absolute;inset:0;background:linear-gradient(100deg,rgba(var(--gloed),.96) 0%,rgba(var(--gloed),.9) 34%,rgba(var(--gloed),.45) 56%,rgba(var(--gloed),.1) 78%)}
.hero-mask{background:linear-gradient(100deg,color-mix(in srgb,var(--donker) 96%,transparent) 0%,color-mix(in srgb,var(--donker) 90%,transparent) 34%,color-mix(in srgb,var(--donker) 45%,transparent) 56%,color-mix(in srgb,var(--donker) 10%,transparent) 78%)}
.hero-in{position:relative;z-index:2;padding:150px 0 110px;width:100%}
.hero h1{max-width:16ch}
.hero h1 em{font-style:normal;color:var(--groen)}
.hero .sub{margin-top:22px;font-size:1.14rem;color:#DDE6DA;max-width:40ch}
.acties{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero .trust{margin-top:26px;font-size:.92rem;color:#B9C4B6}
.hero .trust b{color:#fff}
@media(max-width:860px){
  /* Op een smal scherm staat de foto niet achter de tekst maar eronder, als
     eigen beeldband. Zo blijft hij helder en zijn beide personen te zien,
     terwijl de tekst op de rustige donkere achtergrond leesbaar blijft. */
  .hero{min-height:auto;flex-direction:column;align-items:stretch}
  /* De menubalk staat op mobiel gewoon in de pagina en niet meer over de hero
     heen. De ruime bovenmarge die daarvoor nodig was kan er dus af. */
  .hero-in{order:1;padding:24px 0 40px}
  .hero-mask{display:none}
  .hero-img{order:2;position:relative;inset:auto;width:100%;height:min(78vw,320px);opacity:1;
    background-image:var(--hero-beeld-mobiel,var(--hero-beeld,url('../images/hero-achtergrond.jpg')));
    background-position:center 18%}
  .hero h1{max-width:none}
  .hero .sub{max-width:none}
  .hero .acties .btn{flex:1 1 100%;text-align:center}
}
@media(max-width:520px){
  .hero-in{padding:16px 0 34px}
}
.golf{position:absolute;bottom:-1px;left:0;width:100%;z-index:3;display:block}

/* paginakop (binnenpagina's) */
.pkop{background:var(--donker);color:#fff;padding:54px 0 74px;position:relative}
.kruimel{font-size:.87rem;color:#9AA497;margin-bottom:18px}
.kruimel a{color:#9AA497;text-decoration:none}
.kruimel a:hover{color:var(--groen)}
.pkop-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
@media(max-width:880px){.pkop-grid{grid-template-columns:1fr;gap:28px}}
.pkop h1 em{font-style:normal;color:var(--groen)}
.pkop .sub{margin-top:18px;color:#D5DED2;font-size:1.08rem;max-width:44ch}
.pkaart{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:28px;padding:26px 24px}
.pkaart h3{color:#fff;margin-bottom:14px}
.pkaart ul{list-style:none;padding:0;margin:0}
.pkaart li{padding:9px 0 9px 28px;position:relative;font-size:.95rem;color:#D5DED2;border-bottom:1px solid rgba(255,255,255,.12)}
.pkaart li:last-child{border-bottom:0}
.pkaart li::before{content:"✓";position:absolute;left:0;color:var(--groen);font-weight:800}

/* logostrip */
.logos{background:var(--wit);padding:28px 0;border-bottom:1px solid var(--mint-r)}
.logos .lbl{font-size:.87rem;color:var(--grijs);font-weight:600;margin:0 0 12px}
.logo-rij{display:flex;flex-wrap:wrap;gap:10px 30px;align-items:center}
.logo-mark{font-family:var(--kop);font-weight:600;font-size:1rem;color:#8A9187}

/* kaartroosters */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:36px}
@media(max-width:940px){.grid4{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid4,.grid3,.grid2{grid-template-columns:1fr}}
.kaart{display:flex;flex-direction:column;text-decoration:none;background:var(--wit);border:1px solid var(--mint-r);border-radius:26px;padding:26px 24px;transition:transform .15s,border-color .15s}
a.kaart:hover{transform:translateY(-3px);border-color:var(--groen)}
.kaart p{font-size:.95rem;color:var(--grijs);margin:10px 0 0}
.kaart .meer{margin-top:auto;padding-top:14px;font-weight:700;font-size:.93rem;color:var(--oranje)}

/* herkenbaar */
.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:28px}}
.checks{list-style:none;padding:0;margin:0}
.checks li{padding:15px 0 15px 32px;border-bottom:1px solid var(--mint-r);position:relative;font-size:1rem}
.checks li:first-child{border-top:1px solid var(--mint-r)}
.checks li::before{content:"";position:absolute;left:0;top:23px;width:16px;height:2px;background:var(--oranje)}
.vinkjes{list-style:none;padding:0;margin:20px 0 26px}
.vinkjes li{padding:11px 0 11px 30px;position:relative;font-size:1rem;border-bottom:1px solid var(--mint-r)}
.vinkjes li::before{content:"✓";position:absolute;left:0;color:var(--groen-d);font-weight:800}

/* resultaten donker */
.res{background:var(--donker);color:#fff}
.res h2{color:#fff;max-width:18ch}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:42px;border-top:1px solid #3B3742}
@media(max-width:820px){.res-grid{grid-template-columns:1fr}}
.res-item{padding:28px 30px 28px 0;border-right:1px solid #3B3742;border-bottom:1px solid #3B3742}
.res-item:last-child{border-right:0;padding-right:0}
/* Twee resultaten: twee even brede vakken in plaats van twee van drie. */
.res-grid:has(> .res-item:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.res-grid:has(> .res-item:nth-child(2):last-child){grid-template-columns:1fr}}
.res-tekst{margin:16px 0 0;color:#C7CFC4;max-width:70ch}

/* Een logo in het fotoblok: heel, op wit, met lucht eromheen. */
.pers-foto.is-passend{background-color:#fff;background-size:contain;background-repeat:no-repeat;
  background-position:center;background-origin:content-box;padding:14%;box-sizing:border-box;
  border:1px solid var(--mint-r)}

/* Vier resultaten: vier naast elkaar in plaats van drie plus één los. */
.res-grid:has(> .res-item:nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){
  .res-grid:has(> .res-item:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
  .res-grid:has(> .res-item:nth-child(4):last-child) > .res-item:nth-child(2n){border-right:0;padding-right:0}
}
@media(max-width:820px){.res-grid:has(> .res-item:nth-child(4):last-child){grid-template-columns:1fr}}
@media(max-width:820px){.res-item{border-right:0;padding-right:0}}
.res-item .n{font-family:var(--kop);font-weight:900;font-size:clamp(2.2rem,4.4vw,3.1rem);color:var(--groen);line-height:1}
.res-item .w{margin-top:12px;color:#C7CFC4;font-size:.97rem;max-width:26ch}
.res-item .k{margin-top:16px;font-weight:700;font-size:.9rem}

/* case-strook */
.caseband{background:var(--mint)}
.case-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:46px;align-items:center}
@media(max-width:860px){.case-grid{grid-template-columns:1fr;gap:22px}}
.case-grid .n{font-family:var(--kop);font-weight:900;font-size:clamp(2.8rem,6.5vw,4.4rem);color:var(--groen-d);line-height:1}
.case-grid .n small{display:block;font-family:var(--txt);font-size:.94rem;font-weight:600;color:var(--grijs);margin-top:10px;line-height:1.4}
.case-grid q{display:block;font-size:1.06rem;font-style:italic}
.case-grid .wie{margin-top:16px;font-weight:700;font-size:.92rem}
.case-grid .wie span{display:block;font-weight:400;color:var(--grijs)}

/* persoonlijk */
.pers{background:var(--mint)}
.pers-foto{border-radius:36px;background-image:url('../images/hero-achtergrond.jpg');background-size:cover;background-position:center 30%;aspect-ratio:4/3}

/* stappen */
.stap{background:var(--wit);border:1px solid var(--mint-r);border-radius:26px;padding:28px 24px;counter-increment:s}
.stappen{counter-reset:s}
.stap::before{content:counter(s);display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--donker);color:#fff;font-family:var(--kop);font-weight:900;margin-bottom:16px}
.stap p{font-size:.95rem;color:var(--grijs);margin:10px 0 0}

/* audit */
.audit .kick{font-weight:700;color:var(--groen-d);font-size:.95rem;margin-bottom:10px}
.audit ol{margin:22px 0 0;padding:0;list-style:none;counter-reset:a}
.audit ol li{counter-increment:a;padding:12px 0 12px 42px;position:relative;border-bottom:1px solid var(--mint-r);font-size:.97rem}
.audit ol li::before{content:counter(a);position:absolute;left:0;top:11px;width:26px;height:26px;border-radius:50%;background:var(--donker);color:#fff;font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.hand{margin-top:22px;background:var(--mint);border-radius:20px;padding:18px 20px;font-size:.94rem;color:var(--grijs)}
.form{background:var(--wit);border:1px solid var(--mint-r);border-radius:30px;padding:30px 28px}
.veld{margin-bottom:14px}
.veld label{display:block;font-size:.86rem;font-weight:700;margin-bottom:6px}
.veld input,.veld select,.veld textarea{width:100%;padding:14px;border:1px solid rgba(0,0,0,.18);border-radius:6px;font-family:var(--txt);font-size:1rem;background:#fff}
.rij2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.rij2{grid-template-columns:1fr}}
.akk{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--grijs);margin:4px 0 18px}
.akk input{margin-top:3px;width:auto}
.teller{margin-top:14px;font-size:.9rem;color:var(--grijs)}
/* Onzichtbaar veld tegen spam, en de meldingen van het formulier. */
.mp-extra{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-melding{margin:0 0 16px;padding:12px 14px;border-radius:8px;font-size:.92rem}
.form-melding.is-fout{background:#fdecea;color:#8a1f11}
.form-klaar{text-align:center;padding:44px 28px}
/* De medewerkers onder het aanvraagformulier. */
.audit-team{margin-top:26px}
/* Op een breed scherm hoort de rij onder het formulier, dus in de rechterkolom.
   Daaronder staat alles onder elkaar en klopt de volgorde vanzelf. */
@media(min-width:861px){
  .audit .split{row-gap:30px}
  .audit .split > .audit-team{grid-column:2;margin-top:0}
}
.audit-team-kop{margin:0 0 14px;font-size:.86rem;font-weight:700;color:var(--grijs)}
.audit-team-rij{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:22px 30px}
.audit-team-rij li{display:flex;flex-direction:column;align-items:center;text-align:center;width:104px;gap:8px}
.audit-team-rij .naam{font-weight:700;font-size:.88rem;line-height:1.25}
.audit-team-rij .rol{font-size:.8rem;color:var(--grijs);line-height:1.25}
.audit-team-rij .avatar.groot{width:72px;height:72px}
@media(max-width:520px){.audit-team-rij{gap:18px 20px}.audit-team-rij li{width:92px}.audit-team-rij .avatar.groot{width:64px;height:64px}}
.form-klaar h3{margin:0 0 10px}
.form-klaar p{margin:0;color:var(--grijs)}

/* garantie */
.gar{background:var(--donker);color:#fff}
.gar h2{color:#fff;max-width:20ch}
.gar-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:46px;align-items:center}
@media(max-width:820px){.gar-grid{grid-template-columns:1fr;gap:24px}}
.gar p{color:#D3E0EF}
.gar-badge{background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.5);border-radius:30px;padding:28px;text-align:center}
.gar-badge .n{font-family:var(--kop);font-weight:900;font-size:2.9rem;line-height:1}
.gar-badge p{margin:10px 0 0;color:#fff;font-size:.97rem}

/* reviews */
.rev{background:var(--wit);border:1px solid var(--mint-r);border-radius:26px;padding:26px 24px}
.rev .st{color:var(--oranje);font-size:.9rem;margin-bottom:12px}
.rev p{font-size:.95rem;color:var(--grijs)}
.rev .wie{font-weight:700;font-size:.9rem}
.rev .wie span{display:block;font-weight:400;color:var(--grijs)}

/* faq */
.faq{max-width:820px;margin:34px auto 0;border-top:1px solid var(--mint-r)}
.faq details{border-bottom:1px solid var(--mint-r)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-family:var(--kop);font-weight:600;font-size:1.05rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--groen-d);font-size:1.5rem}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 22px;color:var(--grijs);font-size:.96rem;max-width:66ch}
.faq .a p:last-child{margin:0}

/* slot */
.slot{background:var(--mint);color:var(--donker);text-align:center}
.slot h2{color:var(--donker);max-width:22ch;margin:0 auto}
.slot p{color:var(--grijs);max-width:44ch;margin:16px auto 28px}

/* team */
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:36px}
@media(max-width:700px){.team-grid{grid-template-columns:1fr}}
.tk{background:var(--wit);border:1px solid var(--mint-r);border-radius:28px;padding:26px 24px}
.tk .rol{font-size:.85rem;color:var(--groen-d);font-weight:700;margin-bottom:6px}
.tk p{font-size:.95rem;color:var(--grijs);margin:10px 0 0}
.tk-kop{display:flex;align-items:center;gap:18px}
.tk-naam{min-width:0}
.tk-kop .rol{margin-bottom:4px}
.tk-kop h3{margin:0;font-size:1.22rem}
.tk-kop + p{margin-top:16px}
.tk-links{display:flex;gap:10px;margin-top:18px}
.tk-link{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
	border-radius:50%;background:var(--mint-l);border:1px solid var(--mint-r);color:var(--groen-d);
	text-decoration:none;transition:background .15s,border-color .15s,color .15s,transform .15s}
.tk-link svg{width:20px;height:20px;display:block}
.tk-link:hover{background:var(--groen);border-color:var(--groen);color:var(--wit);transform:translateY(-2px)}
.tk-link:focus-visible{outline:2px solid var(--donker);outline-offset:2px}
.tk-foto{flex:0 0 auto;width:96px;height:96px;border-radius:50%;overflow:hidden;
	background:var(--mint);border:4px solid var(--mint);box-shadow:0 8px 22px rgba(22,59,101,.12)}
.tk-foto img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;margin:0}
@media(max-width:560px){.tk-foto{width:74px;height:74px;border-width:3px}.tk-kop{gap:14px}}

/* blog */
.blog-grid{gap:24px}
.bk{display:flex;flex-direction:column;text-decoration:none;color:var(--donker);background:var(--wit);border:1px solid var(--mint-r);border-radius:26px;overflow:hidden;transition:border-color .15s,transform .15s,box-shadow .15s}
.bk:hover{border-color:var(--groen);transform:translateY(-3px);box-shadow:0 14px 34px rgba(22,59,101,.10)}
.bk-beeld{display:block;aspect-ratio:16/10;background:var(--mint);overflow:hidden}
.bk-beeld img{display:block;width:100%;height:100%;object-fit:cover;margin:0;border-radius:0;transition:transform .3s}
.bk:hover .bk-beeld img{transform:scale(1.04)}
.bk-leeg{display:flex;align-items:center;justify-content:center;height:100%;color:var(--groen)}
.bk-leeg svg{width:56px;height:56px}
.bk-tekst{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.bk .cat{display:block;font-size:.8rem;font-weight:700;color:var(--groen-d);margin-bottom:10px}
.bk h3{margin:0;font-size:1.22rem;line-height:1.32;color:var(--donker)}
.bk-intro{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:12px;font-size:.95rem;line-height:1.55;color:var(--grijs)}
.bk .datum{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:20px;font-size:.85rem;color:var(--grijs)}
.bk .datum .lees{font-weight:700;color:var(--groen-d);white-space:nowrap}
.grid4 .bk h3{font-size:1.08rem}
@media(max-width:600px){.bk-tekst{padding:20px}}

/* contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:28px}}
.cgeg{list-style:none;padding:0;margin:22px 0 0}
.cgeg li{padding:14px 0;border-bottom:1px solid var(--mint-r)}
.cgeg .l{font-size:.84rem;color:var(--grijs);font-weight:700;margin-bottom:2px}

/* footer */
footer{background:var(--donker-2);color:#98A195;padding:54px 0 26px;font-size:.92rem}
.f-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
@media(max-width:860px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.f-grid{grid-template-columns:1fr}}
footer h4{font-family:var(--txt);font-size:.88rem;color:#fff;margin:0 0 12px;font-weight:700}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:8px}
footer a{color:#9FD48F;text-decoration:none}
footer a:hover{text-decoration:underline}
.f-onder{margin-top:38px;padding-top:20px;border-top:1px solid #322E38;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.85rem}
.f-logo{font-family:var(--kop);font-weight:900;font-size:1.3rem;color:#fff}
.f-logo span{color:var(--groen)}
.f-logo-beeld{line-height:0}
.f-logo-beeld a{display:inline-block}
.f-logo-beeld img{display:block;width:auto;max-width:100%;margin:0}

.wa{position:fixed;bottom:20px;right:20px;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.2);z-index:100;color:#fff;font-weight:700;text-decoration:none;font-size:.78rem}

/* ---- dropdown-navigatie ---- */
.nav-in{position:relative}
.hoofdmenu{align-items:center}
.sub-ouder{position:relative}
.pijl{display:inline-block;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);margin-left:5px;opacity:.75;transition:transform .15s}
.nav .sub{
  position:absolute;top:100%;left:-18px;min-width:266px;
  background:var(--donker);border:1px solid rgba(255,255,255,.14);
  border-radius:20px;padding:10px;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .15s,transform .15s,visibility .15s;
  box-shadow:0 18px 40px rgba(0,0,0,.3);z-index:40;
}
.sub-ouder:hover .sub,.sub-ouder:focus-within .sub,.sub-ouder.open .sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub-ouder:hover .pijl,.sub-ouder.open .pijl{transform:rotate(-135deg) translate(-3px,-3px)}
.nav .sub a{display:block;padding:11px 14px;border-radius:12px;border-bottom:0!important;font-size:.93rem;font-weight:600;color:#DDE6DA}
.nav .sub a:hover{background:rgba(93,185,74,.16);color:#fff}
.nav .sub .sub-alles{margin-top:6px;border-top:1px solid rgba(255,255,255,.14)!important;border-radius:0 0 12px 12px;color:var(--groen);font-weight:700}
.nav .sub::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}

/* ---- hamburger + mobiel menu ---- */
.hamb{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.hamb span{display:block;width:26px;height:2px;background:#fff;margin:5px 0;transition:transform .2s,opacity .2s}
.hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.alleen-mobiel{display:none}

@media(max-width:1040px){
  .hamb{display:block}
  .nav-cta{display:none}
  /* Let op de .nav ervoor: zonder dat is ".nav ul" hierboven specifieker en
     verliest dit blok zijn padding en zijn gap. De menuregels stonden daardoor
     tegen de linkerrand in plaats van onder het logo. */
  .nav ul.hoofdmenu{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--donker);border-top:1px solid rgba(255,255,255,.14);
    margin:0;padding:6px 22px 22px;z-index:60;
    max-height:78vh;overflow-y:auto;
  }
  .nav ul.hoofdmenu.open{display:flex}
  .nav ul.hoofdmenu > li > a{display:block;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.1)!important;font-size:1.02rem}
  .alleen-mobiel{display:block}
  .alleen-mobiel a{border-bottom:0!important;text-align:center}
  .nav .sub{
    position:static;opacity:1;visibility:visible;transform:none;
    background:transparent;border:0;box-shadow:none;
    padding:0 0 8px 14px;min-width:0;display:none;border-radius:0;
  }
  .sub-ouder.open .sub{display:flex}
  .nav .sub a{padding:11px 0;border-radius:0;color:#B9C4B6}
  .nav .sub .sub-alles{margin-top:4px;padding-top:10px}
  .nav.op-hero{background:var(--donker);position:static;top:auto}
  .nav.op-hero .hoofdmenu{background:var(--donker)}
}


/* ---- klantenslider ---- */
.logos{padding:20px 0 24px}
.slider{overflow:hidden;position:relative;margin-top:6px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.slider-spoor{display:flex;align-items:center;gap:56px;width:max-content;
  padding:14px 0;animation:schuif 80s linear infinite}
.slider:hover .slider-spoor{animation-play-state:paused}
.slider-spoor img{height:var(--logo-h,42px);width:auto;max-width:none;flex:0 0 auto;
  opacity:1;transform:translateY(var(--logo-y,0px));transition:transform .2s}
.slider-spoor img:hover{opacity:1;
  transform:translateY(var(--logo-y,0px)) scale(1.06)}
@keyframes schuif{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:700px){.slider-spoor{gap:38px;padding:10px 0;animation-duration:58s}
  .slider-spoor img{height:calc(var(--logo-h,42px) * .8)}}
@media(prefers-reduced-motion:reduce){
  .slider{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .slider-spoor{animation:none}
}

/* Stilstaande logobalk: gecentreerd, zonder vervaagde randen, en op een smal
   scherm netjes over meerdere regels. */
.logos.is-stil .lbl{text-align:center}
.logos.is-stil .slider{overflow:visible;-webkit-mask-image:none;mask-image:none}
.logos.is-stil .slider-spoor{animation:none;width:auto;max-width:var(--wrap);margin:0 auto;
  padding:14px 22px;flex-wrap:wrap;justify-content:center;gap:26px 56px}
.logos.is-stil .slider-spoor img:hover{transform:translateY(var(--logo-y,0px))}
/* Op een computer en tablet altijd op één regel: past het niet, dan worden alle
   logo's evenveel kleiner in plaats van dat er één naar een tweede regel gaat.
   object-fit houdt ze daarbij in verhouding. Op een telefoon zouden ze dan te
   klein worden om te lezen; daar mogen ze wel over twee regels. */
@media(min-width:701px){
  .logos.is-stil .slider-spoor{flex-wrap:nowrap;gap:clamp(20px,3vw,56px)}
  .logos.is-stil .slider-spoor img{flex:0 1 auto;min-width:0;object-fit:contain}
}
@media(max-width:700px){.logos.is-stil .slider-spoor{gap:20px 32px}}


/* ---- portretten bij reviews ---- */
.rev-wie{display:flex;align-items:center;gap:12px;margin-top:16px}
.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:2px solid var(--mint-r);background:var(--mint)}
.avatar.groot{width:60px;height:60px}
.avatar.leeg{display:flex;align-items:center;justify-content:center;
  font-family:var(--kop);font-weight:900;font-size:1.15rem;color:var(--groen-d)}
.avatar.leeg.groot{font-size:1.4rem}
.rev .wie{font-weight:700;font-size:.92rem}
.rev .wie span{display:block;font-weight:400;color:var(--grijs)}
.caseband .rev-wie{margin-top:14px}


/* ---- iconen bij de krachtblokken ---- */
.ico{display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:18px;
  background:var(--mint);color:var(--groen-d);margin-bottom:18px;flex:0 0 auto}
.ico svg{width:30px;height:30px}
a.kaart:hover .ico{background:var(--groen);color:#fff}
.ico-licht{background:rgba(255,255,255,.9);color:var(--groen-d)}
.ico-donker{background:rgba(93,185,74,.18);color:var(--groen);margin-bottom:20px}

/* de zesde kaart: uitnodiging in plaats van dienst */
.kaart-cta{background:var(--mint);border-color:var(--mint-r)}
.kaart-cta h3{max-width:20ch}
.kaart-cta p{margin-top:10px}

/* iets ruimer bij het krachtenblok */
.kracht .kaart{padding:30px 26px}


/* ============================================================
 * Aanvullingen voor WordPress
 * De demo was één statische pagina; dit is wat WordPress erbij
 * nodig heeft. Alles hierboven is ongewijzigd uit de demo.
 * ============================================================ */

/* Blokken renderen hun eigen <section>/<header>; de wrapper van WordPress
   mag daar geen ruimte tussen zetten. Zonder dit staat er 24px tussen elke
   sectie, wat tussen twee gekleurde vlakken een streep oplevert. */
.wp-site-blocks > *,
.entry-content > *,
.wp-block-post-content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* De editor toont blokken zonder de <body> van de site. Zorg dat de
   secties daar ook op volle breedte staan. */
.editor-styles-wrapper {
	background: var(--mint-l);
}

.editor-styles-wrapper .wp-block-mpower-hero,
.editor-styles-wrapper .wp-block-mpower-paginakop {
	margin-top: 0;
}

/* WordPress-menu in de header: dezelfde opmaak als de demo-navigatie. */
.hoofdmenu .sub-ouder > a {
	display: flex;
	align-items: center;
}

/* Berichtenlijst en losse berichten (blog) */
.artikel {
	max-width: 1040px;
	margin: 0 auto;
	padding: 60px 22px 20px;
}

/*
 * De tekst in een artikel is groter dan elders op de site. Dat hoort bij de
 * bredere kolom: zonder die grotere letter worden de regels te lang om
 * comfortabel te lezen.
 */
.artikel .entry-content,
.artikel .entry-content p,
.artikel .entry-content li {
	font-size: 20px;
	line-height: 1.62;
}

@media (max-width: 600px) {
	.artikel .entry-content,
	.artikel .entry-content p,
	.artikel .entry-content li {
		font-size: 18px;
	}
}

/*
 * Titel, tekst en afbeeldingen houden dezelfde breedte en dezelfde linkerlijn.
 * De afbeeldingen vullen die kolom helemaal, zodat ze niet smaller ogen dan de
 * tekst erboven.
 */
.artikel > .wp-block-post-featured-image img,
.artikel .entry-content > figure img,
.artikel .entry-content > .wp-block-image img {
	width: 100%;
}

.artikel h1 {
	margin-bottom: 14px;
}

.artikel .meta {
	color: var(--grijs);
	font-size: .9rem;
	margin-bottom: 30px;
}

.artikel h2 {
	margin: 36px 0 12px;
}

.artikel img {
	border-radius: 20px;
	margin: 26px 0;
}

.artikel ul,
.artikel ol {
	padding-left: 22px;
	margin: 0 0 1em;
}

.artikel li {
	margin-bottom: 8px;
}

/* Het blokje met de schrijver onder een artikel */
.auteurblok {
	position: relative;
	display: flex;
	gap: 26px;
	align-items: flex-start;
	max-width: 1040px;
	margin: 0 auto;
	background: var(--wit);
	border: 1px solid var(--mint-r);
	border-radius: 28px;
	padding: 34px 34px 30px;
}

.auteur-foto {
	flex: 0 0 auto;
	width: 112px;
	height: 112px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--mint);
	border: 4px solid var(--mint);
	box-shadow: 0 8px 22px rgba(22, 59, 101, .12);
}

.auteur-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	margin: 0;
}

.auteur-tekst {
	min-width: 0;
}

.auteur-tekst h2 {
	font-size: clamp(1.4rem, 2.2vw, 1.9rem);
}

.auteur-rol {
	margin: 8px 0 0;
	font-weight: 700;
	color: var(--groen-d);
}

.auteur-tekst p {
	margin: 12px 0 0;
	color: var(--grijs);
}

.auteurblok .tk-links {
	margin-top: 20px;
}

@media (max-width: 640px) {
	.auteurblok {
		flex-direction: column;
		gap: 18px;
		padding: 26px 22px 24px;
	}

	.auteur-foto {
		width: 88px;
		height: 88px;
	}
}

/* Paginering onder een berichtenlijst */
.pagineer {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 36px;
	font-weight: 700;
}

.pagineer a,
.pagineer span {
	padding: 10px 16px;
	border-radius: 110px;
	border: 1px solid var(--mint-r);
	text-decoration: none;
	background: var(--wit);
}

.pagineer .current {
	background: var(--donker);
	color: var(--wit);
	border-color: var(--donker);
}

/* De WordPress-adminbalk mag de vaste navigatie op de homepage niet raken. */
.admin-bar .nav.op-hero {
	top: calc(26px + 32px);
}

@media (max-width: 782px) {
	.admin-bar .nav.op-hero {
		top: calc(26px + 46px);
	}
}

/*
 * En dezelfde correctie voor de meelopende balk. Die moet onder de adminbalk
 * beginnen in plaats van erachter. Deze regel staat bewust ná die hierboven en
 * is even specifiek, anders houdt de balk de 26 pixels van de hero vast en
 * blijft er een strook pagina boven de balk zichtbaar.
 */
.admin-bar .nav.nav-vast {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .nav.nav-vast {
		top: 46px;
	}
}

/* ============================================================
 * Klassen die de blokken gebruiken
 * ============================================================ */

/* Achtergrond van een sectie, gekozen door de redacteur. */
.sec-mint-licht { background: var(--mint-l); }
.sec-wit        { background: var(--wit); }
.sec-mint       { background: var(--mint); }
.sec-donker     { background: var(--donker); color: #fff; }
.sec-groen      { background: var(--groen); color: #fff; }

.sec-donker h2,
.sec-groen h2 { color: #fff; }

/* Elk sectieblok krijgt dezelfde verticale ruimte als <section> in de demo. */
.sectie { padding: 76px 0; }
@media (max-width: 760px) { .sectie { padding: 48px 0; } }

.sectie-intro { margin-top: 16px; color: var(--grijs); }
.sec-donker .sectie-intro,
.sec-groen .sectie-intro { color: #D5DED2; }

.gecentreerd h2,
.gecentreerd .sectie-intro { text-align: center; }
.gecentreerd .sectie-intro { margin-left: auto; margin-right: auto; }

/* Roosters staan los van een kop: geef ze de marge die de demo ze gaf. */
.sectie > .wrap > .grid2,
.sectie > .wrap > .grid3,
.sectie > .wrap > .grid4,
.sectie > .wrap > .team-grid { margin-top: 36px; }

/* Paginakop zonder kaart ernaast. */
.pkop-grid-enkel { grid-template-columns: 1fr; }
.pkaart-cijfer { font-family: var(--kop); font-weight: 900; font-size: 3rem; color: var(--groen); line-height: 1; }
.pkaart-cijfer-tekst,
.pkaart-tekst { color: #D5DED2; margin-top: 10px; font-size: .95rem; }
.pkaart-knop { margin-top: 6px; }

/* Kaarten met een cijfer erin, zoals op het overzicht van succesverhalen. */
.kaart-cijfer { font-family: var(--kop); font-weight: 900; font-size: 2.3rem; color: var(--groen-d); line-height: 1; }
.kaart-cijfer-tekst { margin-top: 8px; }
.kaart-knop { margin-top: 18px; align-self: flex-start; }

/* Losse onderdelen van de blokken. */
.res-actie { margin-top: 34px; }
.split-midden { align-items: center; }
.tekstblok-tekst { margin: 16px 0 0; color: var(--grijs); }
.tekstblok-tekst + .tekstblok-tekst { margin-top: 14px; }
.sec-donker .tekstblok-tekst,
.sec-groen .tekstblok-tekst { color: #D5DED2; }
.tekstblok .vinkjes { margin-top: 18px; }

/*
 * Een knop die direct op een alinea volgt plakte er tegenaan. Staat er een
 * vinkjeslijst tussen, dan zorgt die al voor ruimte; vandaar alleen deze
 * combinatie.
 */
.tekstblok-tekst + .btn { margin-top: 24px; }
.audit-tekst { margin-top: 16px; color: var(--grijs); }
.audit-knop { width: 100%; border: 0; }
.gar-tekst { margin-top: 16px; }
.slot-na { margin-top: 20px; font-size: 1rem; color: var(--donker); }
.faq-kop { text-align: center; }
.caseband-tekst { margin-top: 14px; color: var(--grijs); }
.caseband-actie { margin-top: 20px; }
.blogs-na { margin-top: 24px; color: var(--grijs); font-size: .93rem; }
.geen-berichten { color: var(--grijs); }
.f-adres { margin-top: 12px; max-width: 32ch; }
.f-contact { margin: 0; }

/* De tweede kopregel in de editor: op de site is dit <em> in dezelfde h1. */
.hero-accent,
.pkop .hero-accent { font-style: normal; color: var(--groen); }

/* ============================================================
 * Alleen in de editor
 * ============================================================ */

.mpower-hint {
	font-size: .85rem;
	color: var(--grijs);
	background: rgba(0, 0, 0, .04);
	border-radius: 10px;
	padding: 10px 14px;
	margin: 12px 0;
}

/* De gekozen logo's, in de zijbalk als lijst en op het blok als rij. */
.mpower-logolijst {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.mpower-logolijst li {
	padding: 8px 0 2px;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

/* De naam met de knoppen; de schuifregelaars staan eronder. */
.mpower-logoregel {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mpower-logolijst .components-base-control {
	margin-bottom: 0;
}

.mpower-logolijst .components-range-control__wrapper {
	margin-right: 0;
}

.mpower-logolijst img {
	width: 42px;
	height: 26px;
	object-fit: contain;
	flex: 0 0 auto;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 4px;
}

.mpower-logolijst span {
	flex: 1 1 auto;
	min-width: 0;
	font-size: .82rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mpower-teamlijst{list-style:none;margin:12px 0 0;padding:0}
.mpower-teamlijst li{padding:10px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.mpower-teamregel{display:flex;gap:10px;align-items:flex-start}
.mpower-teamvelden{flex:1 1 auto;min-width:0}
.mpower-teamvelden .components-base-control{margin-bottom:6px}
.mpower-teamfoto{width:52px;height:52px;flex:0 0 auto;border-radius:50%;overflow:hidden;border:1px solid rgba(0,0,0,.15);background:#f0f0f0;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:#555}
.mpower-teamfoto img{width:100%;height:100%;object-fit:cover}
.mpower-teamknoppen{display:flex;align-items:center;gap:2px;margin-top:4px}

.mpower-logorij {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 26px;
	margin-top: 10px;
}

.mpower-logorij img {
	height: var( --logo-h, 38px );
	width: auto;
	max-width: none;
	transform: translateY( var( --logo-y, 0px ) );
}

/*
 * Elke afbeelding in de editor is een knop: erop klikken opent de
 * mediabibliotheek. Alleen zichtbaar in de editor, want deze klasse staat niet
 * in de weergave op de site.
 */
.mpower-beeldknop {
	cursor: pointer;
	transition: outline-color .15s;
	outline: 2px solid transparent;
	outline-offset: 3px;
}

.mpower-beeldknop:hover,
.mpower-beeldknop:focus-visible {
	outline-color: var(--groen);
}

/* De portretcirkel is in de editor een knop: erop klikken kiest een foto. */
.tk-foto-leeg,
.tk-foto-kies {
	cursor: pointer;
}

.tk-foto-leeg {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.2;
	background: var(--mint-l);
	border: 2px dashed var(--mint-r);
	color: var(--groen-d);
	font-size: .76rem;
	font-weight: 700;
	box-shadow: none;
}

/* Zonder foto zou de cirkel in het auteursblok geen hoogte hebben. */
.auteur-foto.tk-foto-leeg {
	width: 112px;
	height: 112px;
	flex: 0 0 auto;
}

.tk-foto-leeg:hover {
	border-color: var(--groen);
	background: var(--mint);
}

.tk-foto-kies:hover {
	outline: 2px solid var(--groen);
	outline-offset: 2px;
}

.mpower-hint-licht {
	color: #B9C4B6;
	background: rgba(255, 255, 255, .08);
}

.mpower-lijstregel {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.mpower-lijstregel > span:first-child { flex: 1; }

.editor-styles-wrapper .mpower-lijstweg {
	opacity: .45;
	flex: 0 0 auto;
}

.editor-styles-wrapper .mpower-lijstweg:hover { opacity: 1; }

.editor-styles-wrapper .mpower-lijsterbij { margin-top: 10px; }

.mpower-knop-blok { display: block; margin-top: 8px; }

/* Een vraag is in de editor altijd uitgeklapt, anders kun je hem niet bewerken. */
.mpower-faq-bewerk {
	border-bottom: 1px solid var(--mint-r);
	padding: 16px 0;
}

.mpower-faq-vraag {
	font-family: var(--kop);
	font-weight: 600;
	font-size: 1.05rem;
	margin-bottom: 8px;
}

/* De WhatsApp-knop bevat een pictogram in plaats van de letters uit de demo. */
.wa svg { display: block; }

/* Logo als afbeelding in plaats van tekst. De hoogte staat in het blok zelf,
   zodat een redacteur hem kan bijstellen zonder aan de CSS te komen. */
.logo-beeld {
	display: flex;
	align-items: center;
}

.logo-beeld img {
	width: auto;
	max-width: 100%;
	display: block;
}

@media (max-width: 1040px) {
	.logo-beeld img {
		height: 34px !important;
	}
}

/* De blokafstand staat op nul zodat secties tegen elkaar aan sluiten. Losse
   alinea's direct onder een sectiekop raakten daardoor die kop; die krijgen
   hun ruimte hier terug. */
.sectie > .wrap > h2 + p,
.sectie > .wrap > h3 + p,
.sectie > .wrap > h2 + ul,
.sectie > .wrap > h2 + ol {
	margin-top: 18px;
}

/* Foto naast het auditformulier. */

/* De auteursregel onder de titel van een artikel: "Geschreven door Naam · datum". */
.artikel .meta {
	gap: 0 .35em;
	align-items: baseline;
}

.artikel .meta p,
.artikel .meta .wp-block-post-author-name,
.artikel .meta .wp-block-post-date {
	margin: 0;
	font-size: .9rem;
	color: var(--grijs);
}

.artikel .meta .wp-block-post-author-name {
	font-weight: 700;
	color: var(--donker);
}