/*
 * 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}
.veld textarea{min-height:112px;line-height:1.5;resize:vertical;display:block}
.veld .optioneel{font-weight:400;color:var(--grijs)}
.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 h3{margin:0;font-size:1.22rem;line-height:1.32;color:var(--donker)}
.bk-intro{display:-webkit-box;-webkit-line-clamp:5;-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}
}
/* Op een telefoon een rustig raster van drie kolommen, zodat de logo's in
   nette rijen staan in plaats van dat elke rij anders uitvalt. Het raster heeft
   zes smalle kolommen en elk logo beslaat er twee; zo kan een losse laatste
   rij netjes in het midden staan. Grote, vierkante logo's worden iets
   ingetoomd, zodat ze niet boven de rest uitsteken. */
@media(max-width:700px){
  .logos.is-stil .slider-spoor{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
    gap:22px 12px;padding:12px 18px;align-items:center;justify-items:center}
  .logos.is-stil .slider-spoor img{grid-column:span 2;max-width:100%;
    height:min(calc(var(--logo-h,42px) * .8),42px);object-fit:contain}
  .logos.is-stil .slider-spoor img:last-child:nth-child(3n+1){grid-column:3/span 2}
  .logos.is-stil .slider-spoor img:nth-last-child(2):nth-child(3n+1){grid-column:2/span 2}
}


/* ---- 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;
	}
}

/*
 * Witruimte tussen alinea's en lijsten in een artikel. De regel bovenaan
 * deze aanvullingen zet de marge van alles in .entry-content op nul (voor de
 * secties op de pagina's); in een artikel moeten alinea's wel lucht hebben.
 */
.artikel .entry-content > p,
.artikel .entry-content > ul,
.artikel .entry-content > ol {
	margin-block-end: 1.4em;
}

/*
 * 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 .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;
}

/*
 * Tabellen in de tekst: een kaart met een donkere kopregel, een groene lijn
 * eronder en om en om een lichte rij. Op een telefoon wordt elke rij een
 * losse kaart; de kolomkoppen staan dan als label boven de cellen (die
 * labels zet inc/tabellen.php erbij). Een tabel zonder kopregel kun je op een
 * telefoon opzij schuiven.
 */
:is(.entry-content, .editor-styles-wrapper) .wp-block-table {
	margin: 32px 0 36px;
	overflow-x: auto;
	background: var(--wit);
	border: 1px solid var(--mint-r);
	border-radius: 20px;
	box-shadow: 0 14px 32px -22px rgba(22, 59, 101, .45);
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-table table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 17px;
	line-height: 1.5;
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-table :is(th, td) {
	padding: 16px 22px;
	border: 0;
	text-align: left;
	vertical-align: top;
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-table :is(th, td) p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-table thead {
	border: 0;
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-table thead th {
	padding-block: 18px;
	background: var(--donker);
	color: var(--wit);
	font-family: var(--kop);
	font-size: 16px;
	font-weight: 700;
	border-bottom: 4px solid var(--groen);
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-table tbody tr + tr > * {
	border-top: 1px solid var(--mint-r);
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-table tbody tr:nth-child(odd) {
	background: none;
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-table tbody tr:nth-child(even) {
	background: var(--mint-l);
}

/* De stijl Strepen van WordPress zelf: zelfde streep, geen extra rand. */
:is(.entry-content, .editor-styles-wrapper) .wp-block-table.is-style-stripes {
	border-bottom: 1px solid var(--mint-r);
}

/* De eerste kolom benoemt de rij. */
:is(.entry-content, .editor-styles-wrapper) .wp-block-table tbody :is(td:first-child, th) {
	color: var(--donker);
	font-weight: 700;
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-table figcaption {
	margin: 0;
	padding: 12px 22px 14px;
	border-top: 1px solid var(--mint-r);
	color: var(--grijs);
	font-size: 15px;
}

@media (max-width: 640px) {
	.entry-content .wp-block-table table {
		font-size: 16px;
	}

	.entry-content .wp-block-table :is(th, td) {
		padding: 13px 16px;
	}

	/* Zonder kaarten: opzij schuiven in plaats van onleesbaar smal. */
	.entry-content .wp-block-table:not(.mpower-tabel-kaarten) table {
		min-width: 540px;
	}

	/* Met kaarten: elke rij een eigen blok. */
	.entry-content .wp-block-table.mpower-tabel-kaarten {
		overflow: visible;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.entry-content .mpower-tabel-kaarten :is(table, tbody, tr, td, th) {
		display: block;
		width: auto;
	}

	/* De kopregel is niet te zien, maar blijft er voor schermlezers. */
	.entry-content .mpower-tabel-kaarten thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.entry-content .mpower-tabel-kaarten tbody tr {
		margin-bottom: 14px;
		overflow: hidden;
		background: var(--wit);
		border: 1px solid var(--mint-r);
		border-radius: 18px;
		box-shadow: 0 12px 26px -20px rgba(22, 59, 101, .45);
	}

	.entry-content .mpower-tabel-kaarten tbody tr:nth-child(n) {
		background: var(--wit);
	}

	.entry-content .mpower-tabel-kaarten tbody tr + tr > :is(:first-child, :nth-child(2)) {
		border-top: 0;
	}

	.entry-content .mpower-tabel-kaarten tbody tr > :first-child {
		background: var(--donker);
		color: var(--wit);
		font-family: var(--kop);
		border-bottom: 3px solid var(--groen);
	}

	.entry-content .mpower-tabel-kaarten tbody tr > * + * + * {
		border-top: 1px solid var(--mint-r);
	}

	.entry-content .mpower-tabel-kaarten [data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 2px;
		color: var(--grijs);
		font-size: 13px;
		font-weight: 700;
		letter-spacing: .04em;
		text-transform: uppercase;
	}

	.entry-content .mpower-tabel-kaarten figcaption {
		padding: 0 4px;
		border: 0;
	}
}

/* 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);
}

/*
 * De audit-pop-up op de blogs (inc/popup.php en assets/js/popup.js).
 * Rechtsonder op een computer, onderaan over de volle breedte op een
 * telefoon. Geen donkere laag over de pagina: lezen kan gewoon door.
 */
.mp-popup {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 110;
	width: 380px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
	box-sizing: border-box;
	padding: 26px 26px 20px;
	background: var(--mint-l);
	border: 1px solid var(--mint-r);
	border-radius: 24px;
	box-shadow: 0 22px 50px -18px rgba(22, 59, 101, .45);
	color: var(--donker);
	font-size: 15px;
	line-height: 1.5;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .3s ease, transform .3s ease;
}

.mp-popup[hidden] {
	display: none;
}

.mp-popup.is-open {
	opacity: 1;
	transform: none;
}

/* De WhatsApp-knop staat op dezelfde plek; even weg zolang de pop-up open is. */
.mp-popup-open .wa {
	opacity: 0;
	pointer-events: none;
}

.mp-popup-sluit {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--donker);
	cursor: pointer;
}

.mp-popup-sluit:hover {
	background: var(--mint);
}

.mp-popup-sluit:focus-visible,
.mp-popup a:focus-visible,
.mp-popup-knop:focus-visible {
	outline: 3px solid var(--donker);
	outline-offset: 2px;
}

.mp-popup-kick {
	margin: 0 0 6px;
	padding-right: 36px;
	color: var(--groen-d);
	font-size: .88rem;
	font-weight: 700;
}

.mp-popup-kop {
	margin: 0 0 10px;
	padding-right: 20px;
	font-family: var(--kop);
	font-size: 1.45rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.005em;
}

.mp-popup-tekst {
	margin: 0 0 14px;
	color: var(--grijs);
}

.mp-popup-tekst a {
	color: var(--donker);
	font-weight: 700;
}

.mp-popup-stappen {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	counter-reset: pp;
}

.mp-popup-stappen li {
	position: relative;
	padding: 9px 0 9px 36px;
	border-bottom: 1px solid var(--mint-r);
	counter-increment: pp;
	font-size: .93rem;
	line-height: 1.4;
}

.mp-popup-stappen li::before {
	content: counter(pp);
	position: absolute;
	top: 8px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--donker);
	color: var(--wit);
	font-size: .78rem;
	font-weight: 700;
}

.mp-popup-garantie {
	margin: 0 0 16px;
	padding: 12px 14px;
	background: var(--wit);
	border-radius: 14px;
	color: var(--grijs);
	font-size: .9rem;
	line-height: 1.4;
}

.mp-popup-garantie strong {
	display: block;
	color: var(--donker);
}

.mp-popup-form .veld {
	margin-bottom: 10px;
}

.mp-popup-form .veld label {
	margin-bottom: 4px;
	font-size: .82rem;
}

.mp-popup-form .veld input {
	padding: 11px 12px;
	font-size: 1rem;
}

.mp-popup-form .akk {
	margin: 2px 0 14px;
	font-size: .82rem;
}

.mp-popup-form .akk a {
	color: inherit;
}

.mp-popup-knop {
	width: 100%;
	padding: 14px 20px;
	text-align: center;
}

.mp-popup .form-melding {
	margin-bottom: 12px;
	font-size: .86rem;
}

.mp-popup-voet {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
	color: var(--grijs);
	font-size: .84rem;
	line-height: 1.35;
}

.mp-popup-voet p {
	margin: 0;
}

.mp-popup-voet strong {
	color: var(--donker);
}

.mp-popup-team {
	display: flex;
	flex: none;
}

.mp-popup-team .avatar {
	width: 36px;
	height: 36px;
	margin: 0;
	border: 2px solid var(--mint-l);
	border-radius: 50%;
	object-fit: cover;
}

.mp-popup-team .avatar + .avatar {
	margin-left: -10px;
}

/* Een laag scherm: de stappen en de garantie vallen weg, het formulier blijft. */
@media (max-height: 780px) {
	.mp-popup-stappen {
		display: none;
	}
}

@media (max-height: 640px) {
	.mp-popup-garantie {
		display: none;
	}
}

/* Telefoon: onderaan over de volle breedte, compact. */
@media (max-width: 640px) {
	.mp-popup {
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		max-width: none;
		max-height: 82vh;
		padding: 20px 18px 16px;
		border-width: 1px 0 0;
		border-radius: 22px 22px 0 0;
	}

	.mp-popup-kop {
		font-size: 1.22rem;
	}

	.mp-popup-tekst {
		margin-bottom: 12px;
		font-size: .92rem;
	}

	.mp-popup-stappen,
	.mp-popup-garantie {
		display: none;
	}

	.mp-popup-voet {
		margin-top: 10px;
	}
}

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

/*
 * Lokale en andere binnenpagina's: de vertrouwensregel onder de knoppen van
 * de paginakop (zoals op de homepage), kaarten met tussenkopjes en knoppen op
 * één lijn onderaan.
 */
.pkop .trust {
	margin-top: 22px;
	color: #B9C4B6;
	font-size: .92rem;
}

.pkop .trust strong,
.pkop .trust b {
	color: var(--wit);
}

.kaart .kaart-punt {
	margin-top: 14px;
}

.kaart .kaart-punt strong {
	display: block;
	margin-bottom: 2px;
	color: var(--donker);
	font-size: .95rem;
}

.kaart .kaart-knop {
	margin-top: auto;
}

.kaart:has(.kaart-knop) > p:last-of-type {
	margin-bottom: 20px;
}

/*
 * Een logobalk binnen een sectie, zoals op de lokale pagina's van vóór de
 * knop "Lokale pagina's bijwerken": dezelfde brede witte balk als op de
 * homepage, over de volle breedte in plaats van in een kader. De sectie knipt
 * wat buiten beeld valt af, zodat er geen horizontale scrollbalk komt.
 */
.sectie:has(> .wrap > .logos) {
	overflow-x: clip;
	padding-bottom: 0;
}

.sectie > .wrap > .logos {
	margin: 28px calc(50% - 50vw) 0;
	border-top: 1px solid var(--mint-r);
}