/* M-Bouw by pimvdhurk.nl. Huisstijl uit de Elementor-kit "Standaard kit" (968); maten gemeten op de Elementor-site (1440 en 375).
 * Breekpunten zoals Elementor: tablet t/m 1024px, mobiel t/m 767px. */

/* Fonts (variabel, zelf gehost; zelfde bestanden als de Elementor-site) */
@font-face { font-family: "Exo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/exo-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Exo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/exo-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/roboto-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/roboto-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/robotoslab-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/robotoslab-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
	--mb-oranje: #de8c40;
	--mb-grijsblauw: #7b8cb1;
	--mb-grijsblauw-2: #4a5668;
	--mb-lichtgrijs: #e5e5e5;
	--mb-wit: #ffffff;
	--mb-lichtblauw: #f2f3f7;
	--mb-tekst: #333333;
	--mb-font-kop: "Exo", sans-serif;
	--mb-font-tekst: "Exo", sans-serif;
	--mb-font-secundair: "Roboto Slab", serif;
	--mb-font-accent: "Roboto", sans-serif;
	--mb-breedte: 1170px;
	--mb-header: 100px;
}

/* Basis */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--mb-font-tekst); font-size: 16px; line-height: 1.5; color: var(--mb-tekst); background: var(--mb-wit); -webkit-font-smoothing: antialiased; }
body.mb-menu-open { overflow: hidden; }
/* Alleen binnen het thema, niet op het mediavenster van WordPress (Pencilino laadt dat op de site). */
:where(.mb-header, .mb-main, .mb-footer, .mb-mobielmenu, .mb-venster, .mb-cookies) img { max-width: 100%; height: auto; border: 0; }
a { color: inherit; }
.mb-wrap { max-width: var(--mb-breedte); margin: 0 auto; }
.mb-icoon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; }
.mb-skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--mb-wit); color: var(--mb-grijsblauw-2); padding: 8px 12px; }
.mb-skip:focus { left: 16px; }

/* Header */
.mb-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--mb-header); padding: 0 30px; background-color: transparent; transition: background-color .3s ease-in-out, box-shadow .3s ease-in-out; }
.admin-bar .mb-header { top: 32px; }
.mb-header.is-gescrold { background-color: var(--mb-grijsblauw-2); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
/* Zonder foto bovenaan meteen donker (geen overgang), alleen de schaduw komt erbij na scrollen. */
body:not(.mb-fotokop) .mb-header { background-color: var(--mb-grijsblauw-2); transition: box-shadow .3s ease-in-out; }
.mb-header__binnen { display: flex; align-items: center; justify-content: space-between; max-width: var(--mb-breedte); height: 100%; margin: 0 auto; }
.mb-headerstrook { height: var(--mb-header); background: var(--mb-grijsblauw-2); }
.mb-fotokop .mb-headerstrook { background: transparent; }
.mb-onder-header { margin-top: calc(-1 * var(--mb-header)); }

.mb-logo { display: block; flex: 0 0 auto; width: 200px; line-height: 0; }
.mb-logo .pencil-image, .mb-logo img, .mb-logo__img { display: block; width: 100%; height: auto; }

.mb-header__rechts { display: flex; align-items: center; justify-content: flex-end; gap: 30px; flex: 0 1 82%; }

.mb-nav__lijst { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.mb-nav__lijst > li { position: relative; margin: 0 12.5px; }
.mb-nav__lijst > li:first-child { margin-left: 0; }
.mb-nav__lijst > li:last-child { margin-right: 0; }
.mb-nav__lijst > li > a { display: flex; align-items: center; font-family: var(--mb-font-kop); font-size: 16px; font-weight: 800; line-height: 20px; text-transform: uppercase; color: var(--mb-wit); text-decoration: none; transition: color .3s; }
.mb-nav__lijst > li > a:hover, .mb-nav__lijst > li > a:focus-visible,
.mb-nav__lijst > .current-menu-item > a, .mb-nav__lijst > .current-menu-ancestor > a, .mb-nav__lijst > .current-menu-parent > a { color: var(--mb-oranje); }
.mb-nav__pijl { display: inline-flex; padding-left: 10px; font-size: 16px; }
.mb-nav__pijl .mb-icoon { width: .625em; }
.mb-nav .sub-menu { position: absolute; top: 100%; left: 0; z-index: 10; display: none; width: 12em; margin: 0; padding: 0; list-style: none; background: var(--mb-wit); font-size: 13px; }
.mb-nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 40px; } /* Brug, zodat het menu open blijft onderweg naar de items. */
.mb-nav__lijst > li:hover > .sub-menu, .mb-nav__lijst > li:focus-within > .sub-menu, .mb-nav__lijst > li.is-open > .sub-menu { display: block; }
.mb-nav .sub-menu a { display: flex; align-items: center; padding: 13px 20px; font-family: var(--mb-font-accent); font-size: 13px; font-weight: 500; line-height: 20px; color: #33373d; text-decoration: none; }
.mb-nav .sub-menu a:hover, .mb-nav .sub-menu a:focus-visible, .mb-nav .sub-menu .current-menu-item > a { background: #55595c; color: var(--mb-wit); }

.mb-belknop { display: inline-flex; align-items: center; gap: 5px; padding: 12px 20px; border: 1px solid var(--mb-wit); border-radius: 5px; background: transparent; font-family: var(--mb-font-kop); font-size: 16px; font-weight: 700; line-height: 1; color: var(--mb-wit); text-decoration: none; white-space: nowrap; transition: background-color .3s, color .3s; }
.mb-belknop:hover, .mb-belknop:focus-visible { background: var(--mb-wit); color: var(--mb-grijsblauw-2); }
.mb-belknop__icoon { width: .625em; vertical-align: 0; }

.mb-hamburger { display: none; justify-content: center; width: 22px; padding: 0; border: 0; background: none; color: var(--mb-wit); font-size: 22px; line-height: 1; cursor: pointer; }
.mb-hamburger .mb-icoon { width: .875em; height: 1em; vertical-align: top; }

/* Mobiel menu: wit, volledig scherm, schuift van rechts in */
.mb-mobielmenu { position: fixed; inset: 0; z-index: 200; }
.mb-mobielmenu[hidden] { display: none; }
.mb-mobielmenu__achtergrond { position: absolute; inset: 0; background: rgba(0, 0, 0, .8); opacity: 0; transition: opacity .3s; }
.mb-mobielmenu__paneel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 30px; background: var(--mb-wit); overflow-y: auto; opacity: 0; transform: translateX(40px); transition: opacity .3s, transform .3s; outline: none; }
.mb-mobielmenu.is-open .mb-mobielmenu__achtergrond, .mb-mobielmenu.is-open .mb-mobielmenu__paneel { opacity: 1; transform: none; }
.mb-mobielmenu__sluit { position: absolute; top: 34px; right: 30px; width: 20px; height: 20px; padding: 0; border: 0; background: none; color: #707070; cursor: pointer; }
.mb-mobielmenu__sluit .mb-icoon { width: 20px; height: 20px; vertical-align: top; }
.mb-mobielmenu__lijst { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; margin: 0; padding: 0; list-style: none; }
.mb-mobielmenu__lijst > li > a { display: flex; align-items: center; font-family: var(--mb-font-kop); font-size: 26px; font-weight: 700; line-height: 1; text-transform: uppercase; color: var(--mb-grijsblauw-2); text-decoration: none; }
.mb-mobielmenu__lijst > li > a:hover, .mb-mobielmenu__lijst > .current-menu-item > a, .mb-mobielmenu__lijst > .current-menu-ancestor > a { color: var(--mb-oranje); }
.mb-mobielmenu__lijst .mb-nav__pijl { font-size: 26px; }
.mb-mobielmenu__lijst .sub-menu { display: none; margin: 18px 0 0; padding: 0 0 0 15px; list-style: none; }
.mb-mobielmenu__lijst li.is-open > .sub-menu { display: grid; gap: 14px; }
.mb-mobielmenu__lijst .sub-menu a { font-family: var(--mb-font-kop); font-size: 18px; font-weight: 600; color: var(--mb-grijsblauw-2); text-decoration: none; }
.mb-mobielmenu__lijst .sub-menu .current-menu-item > a { color: var(--mb-oranje); }
.mb-belknop--menu { margin-top: 30px; padding: 12px 20px; border: 2px solid var(--mb-oranje); font-size: 18px; font-weight: 800; color: var(--mb-oranje); }
.mb-belknop--menu:hover, .mb-belknop--menu:focus-visible { background: var(--mb-oranje); color: var(--mb-wit); }

/* Zwevende knop rechtsonder */
.mb-zwevend { position: fixed; right: 50px; bottom: 0; z-index: 50; display: inline-block; padding: 12px 24px; border-radius: 6px 6px 0 0; background: var(--mb-oranje); font-family: var(--mb-font-accent); font-size: 18px; font-weight: 700; line-height: 1; color: var(--mb-wit); text-decoration: none; animation: mb-wiebel 4s ease-in-out infinite; }
.mb-zwevend:hover, .mb-zwevend:focus-visible { background: #c97a31; }
@keyframes mb-wiebel {
	0%, 85%, 100% { transform: translateX(0); }
	88% { transform: translateX(-3px); }
	91% { transform: translateX(3px); }
	94% { transform: translateX(-3px); }
	97% { transform: translateX(3px); }
}

/* Footer: scorebalk */
.mb-score { position: relative; display: flex; align-items: center; justify-content: center; gap: 30px; min-height: 100px; padding: 0 50px; overflow: hidden; background: var(--mb-grijsblauw); color: var(--mb-wit); text-decoration: none; }
.mb-score__tekst { font-family: var(--mb-font-kop); font-size: 18px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.mb-score__rond { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 120px; min-height: 119px; margin: -15px 0; border-radius: 200px; background: var(--mb-oranje); }
.mb-score__cijfer { font-family: var(--mb-font-kop); font-size: 40px; font-weight: 800; line-height: 1; text-align: center; }
.mb-score__decimaal { font-size: 22px; }

/* Footer: hoofdblok */
.mb-footer__hoofd { position: relative; padding: 60px 50px; background: var(--mb-grijsblauw-2) url(../img/footer-lijnen.png) no-repeat 100% 100% / contain; color: var(--mb-wit); }
.mb-footer__binnen { display: flex; flex-direction: column; gap: 60px; max-width: var(--mb-breedte); margin: 0 auto; }
.mb-footer__kolommen { display: flex; }
.mb-footer__kolom { display: flex; flex-direction: column; gap: 30px; width: 50%; }
.mb-footer__kop { margin: 0; font-family: var(--mb-font-kop); font-size: 22px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.mb-footer__lijst, .mb-footer__lijst ul { margin: 0; padding: 0; list-style: none; }
.mb-footer__lijst li, .mb-footer__lijst a { font-family: var(--mb-font-tekst); font-size: 16px; font-weight: 500; line-height: 24px; color: var(--mb-wit); text-decoration: none; }
.mb-footer__lijst li + li { margin-top: 5px; }
.mb-footer__lijst a:hover, .mb-footer__lijst a:focus-visible { text-decoration: underline; }
/* Diensten (menu) en bedrijfsgegevens in twee kolommen van 3 regels, zoals de twee lijsten op de Elementor-site. */
ul.mb-footer__lijst--twee { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; row-gap: 5px; }
ul.mb-footer__lijst--twee li + li { margin-top: 0; }
div.mb-footer__lijst--twee { display: flex; }
div.mb-footer__lijst--twee > ul { width: 50%; }
.mb-footer__onder { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-family: var(--mb-font-tekst); font-size: 14px; font-weight: 400; line-height: 21px; color: var(--mb-wit); }
.mb-footer__onder li { display: inline-flex; align-items: center; }
.mb-footer__onder li + li::before { content: "\00b7"; margin: 0 13.5px; font-size: 14px; }
.mb-footer__onder a { color: var(--mb-wit); text-decoration: none; }
.mb-footer__onder a:hover, .mb-footer__onder a:focus-visible { text-decoration: underline; }

/* Tablet en kleiner */
@media (max-width: 1024px) {
	.mb-nav { display: none; }
	.mb-hamburger { display: inline-flex; }
	.mb-footer__kolommen { flex-direction: column; gap: 40px; }
	.mb-footer__kolom { width: 100%; }
	.mb-footer__kop { font-size: 18px; }
	.mb-footer__binnen { gap: 40px; }
	.mb-score__tekst { font-size: 12px; }
}

/* Mobiel */
@media (max-width: 767px) {
	.mb-header { padding: 0 20px; }
	.mb-logo { width: calc((100vw - 40px) * .45); max-width: 200px; }
	.mb-header__rechts { flex-basis: 52%; gap: 20px; }
	.mb-belknop { padding: 9px 10px; font-size: 12px; }
	.mb-mobielmenu__lijst > li > a, .mb-mobielmenu__lijst .mb-nav__pijl { font-size: 26px; }
	.mb-belknop--menu { padding: 10px 12px; font-size: 20px; }

	.mb-zwevend { right: auto; left: 29px; }

	.mb-score { gap: 10px; min-height: 70px; padding: 0 30px; }
	.mb-score__tekst { flex: 1 1 0; text-align: center; }
	.mb-score__rond { width: 80px; min-height: 90px; }

	.mb-footer__hoofd { padding: 50px 20px 80px; }
	/* Op de Elementor-site twee lijsten onder elkaar: 5px tussen regels, 7px tussen de lijsten. */
	ul.mb-footer__lijst--twee, div.mb-footer__lijst--twee > ul { display: flex; flex-direction: column; gap: 5px; }
	ul.mb-footer__lijst--twee li:nth-child(4) { margin-top: 2px; }
	div.mb-footer__lijst--twee { display: flex; flex-direction: column; gap: 7px; }
	div.mb-footer__lijst--twee li + li { margin-top: 0; }
	div.mb-footer__lijst--twee > ul { width: 100%; }
	.mb-footer__onder { row-gap: 3px; }
	.mb-footer__onder li + li::before { margin: 0 9px; }
	.mb-footer__door { order: 9; flex-basis: 100%; margin-top: 18px; }
	.mb-footer__onder .mb-footer__door::before { display: none; }
}

/* ===== Fase 3: gedeelde onderdelen ===== */
.mb-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mb-main { display: block; }

/* Koppen (Exo 800, 60/60, op mobiel 40) */
.mb-kop { margin: 0; font-family: var(--mb-font-kop); font-size: 60px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.mb-kop--oranje { color: var(--mb-oranje); }
.mb-kop--blauw { color: var(--mb-grijsblauw); }
.mb-kop--gewoon { text-transform: none; }
.mb-koppen { display: flex; flex-direction: column; gap: 4px; }
.mb-koppen--midden { gap: 10px; text-align: center; }

/* Lopende tekst (Exo 16, grijsblauw 2) */
.mb-tekst { font-family: var(--mb-font-tekst); font-size: 16px; line-height: 1.4; color: var(--mb-grijsblauw-2); }
.mb-tekst p { margin: 0 0 14.4px; }
/* Elementor houdt ook na de laatste alinea 14.4px ruimte; dat bepaalt de afstand tot knoppen. */
.mb-tekst a { color: var(--mb-oranje); text-decoration: none; }
.mb-tekst a:hover { text-decoration: underline; }
.mb-tekst--kolommen { column-count: 2; column-gap: 22px; }
.mb-tekst--midden { text-align: center; }

/* Linkknop: Roboto 300, oranje, onderrand, pijl */
.mb-linkknop { display: inline-flex; align-items: center; gap: 12px; padding: 0 0 7px; border-bottom: 1px solid var(--mb-oranje); font-family: var(--mb-font-accent); font-size: 16px; font-weight: 300; line-height: 1; color: var(--mb-oranje); text-decoration: none; transition: color .3s, border-color .3s; }
.mb-linkknop:hover, .mb-linkknop:focus-visible { color: var(--mb-grijsblauw-2); border-color: var(--mb-grijsblauw-2); }
.mb-linkknop__pijl { width: 14px; height: 16px; }

/* Blokknop: oranje, hoofdletters, hoekje */
.mb-knop { display: inline-flex; align-items: center; gap: 5px; padding: 12px 24px; border-radius: 3px; background: var(--mb-oranje); font-family: var(--mb-font-kop); font-size: 17px; font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--mb-wit); text-decoration: none; transition: background-color .3s; }
.mb-knop:hover, .mb-knop:focus-visible { background: var(--mb-grijsblauw-2); }
.mb-knop__icoon { width: .6em; height: 1em; }
/* Iconen in Pencilino-knoppen als masker (kleur via currentColor). */
.mb-masker { display: inline-block; flex: none; background-color: currentColor; -webkit-mask: var(--mb-masker) center / contain no-repeat; mask: var(--mb-masker) center / contain no-repeat; }
.mb-masker--pijl-rechts-vol { --mb-masker: url(../icons/pijl-rechts-vol.svg); }
.mb-masker--chevron-rechts { --mb-masker: url(../icons/chevron-rechts.svg); }
.mb-masker--hoek-rechts { --mb-masker: url(../icons/hoek-rechts.svg); }
.mb-knop-vol { display: inline-block; padding: 12px 24px; border: 2px solid var(--mb-oranje); border-radius: 3px; background: var(--mb-oranje); font-family: var(--mb-font-accent); font-size: 16px; font-weight: 500; line-height: 1; color: var(--mb-wit); text-decoration: none; transition: background-color .3s, color .3s; }
.mb-knop-vol:hover, .mb-knop-vol:focus-visible { background: transparent; color: var(--mb-oranje); }

/* USP-balk */
.mb-usps { display: flex; align-items: center; min-height: 140px; padding: 0 50px; background: var(--mb-grijsblauw-2); }
.mb-usps__binnen { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--mb-breedte); margin: 0 auto; }
.mb-usp { display: flex; flex: 0 1 343px; align-items: center; gap: 15px; }
.mb-usp__icoon { flex: 0 0 auto; width: 50px; height: 50px; color: var(--mb-oranje); }
.mb-usp__tekst { margin: 0; font-family: var(--mb-font-kop); font-size: 16px; font-weight: 600; line-height: 22px; text-transform: uppercase; color: var(--mb-wit); }

/* Slider met projecten (home) */
.mb-slider { position: relative; height: 800px; overflow: hidden; background: var(--mb-grijsblauw-2); }
.mb-slider__baan { display: flex; height: 100%; transition: transform .5s ease; will-change: transform; }
.mb-slide { position: relative; display: flex; flex: 0 0 100%; min-width: 0; align-items: center; height: 100%; padding: 0 50px; color: var(--mb-wit); text-decoration: none; }
.mb-slide::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .5); }
.mb-slide__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.mb-slide__vak { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 20px; width: 560px; max-width: 100%; margin-left: max(0px, calc((100% - var(--mb-breedte)) / 2)); padding: 120px 60px 60px; border: 3px solid var(--mb-wit); border-radius: 8px; }
.mb-slide__tags { display: flex; flex-wrap: wrap; gap: 0 10px; }
.mb-slide__tag { padding: 2px 10px; border-radius: 4px; background: var(--mb-oranje); font-family: var(--mb-font-kop); font-size: 14px; font-weight: 700; line-height: 21px; text-transform: uppercase; color: var(--mb-wit); }
.mb-slide__titel { font-family: var(--mb-font-kop); font-size: 60px; font-weight: 700; line-height: 1; text-transform: uppercase; }
.mb-slide__link { display: inline-flex; align-items: flex-end; gap: 8px; font-family: var(--mb-font-kop); font-size: 16px; font-weight: 400; line-height: 1; }
.mb-slide__pijl { width: 13px; height: 13px; }
.mb-slider__pijl { position: absolute; bottom: 25px; z-index: 3; display: inline-flex; width: 25px; height: 25px; padding: 0; border: 0; background: none; color: rgba(238, 238, 238, .9); cursor: pointer; }
.mb-slider__pijl .mb-icoon { width: 25px; height: 25px; }
.mb-slider__pijl--vorige { left: calc(50% - 570px - 12.5px); }
.mb-slider__pijl--volgende { left: calc(50% + 570px - 12.5px); }

/* Tekst + foto naast elkaar (home intro, diensten) */
.mb-split { padding: 120px 50px; background: var(--mb-wit); }
.mb-split__binnen { display: flex; align-items: center; gap: 50px; max-width: var(--mb-breedte); margin: 0 auto; }
.mb-split__tekst { display: flex; flex-direction: column; gap: 40px; flex: 1 1 0; min-width: 0; }
.mb-split__lijf { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.mb-split__foto { flex: 1 1 0; min-width: 0; line-height: 0; }
.mb-split__foto img, .mb-split__img { display: block; width: 100%; height: 500px; object-fit: cover; }
.mb-split--dienst { padding: 50px; }
.mb-split--dienst .mb-split__tekst { flex: 587 1 0; }
.mb-split--dienst .mb-split__foto { flex: 533 1 0; }
.mb-split--totaalverbouwing .mb-split__foto { flex: 585 1 0; }
.mb-split--totaalverbouwing .mb-split__tekst { flex: 475 1 0; margin-right: 60px; }

/* Paginakop (diensten) */
.mb-paginatitel { padding: 100px 50px 0; text-align: center; }

/* Onze klanten */
.mb-klanten { padding: 120px 50px; background: var(--mb-lichtblauw); }
.mb-klanten__kop { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 750px; margin: 0 auto 50px; text-align: center; }
.mb-klanten__klant { display: flex; justify-content: space-between; max-width: var(--mb-breedte); margin: 0 auto; }
.mb-klanten__foto { flex: 0 0 650px; max-width: 56%; line-height: 0; }
.mb-klanten__foto img, .mb-klanten__img { display: block; width: 100%; height: 460px; object-fit: cover; }
.mb-klanten__inhoud { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 40px; width: 37%; }
.mb-klanten__naam { margin: 0; font-family: var(--mb-font-kop); font-size: 16px; font-weight: 700; line-height: 1; color: var(--mb-grijsblauw-2); }
.mb-klanten__citaat { line-height: 24px; }
.mb-klanten__ref { display: flex; flex-direction: column; gap: 40px; }
.mb-klanten__fotovak { height: 100%; }

/* Gewone pagina met zijblok (diensten, privacy, regio's) */
.mb-pagina { padding: 50px; background: var(--mb-wit); }
.mb-pagina__binnen { display: flex; align-items: flex-start; gap: 50px; max-width: var(--mb-breedte); margin: 0 auto; }
.mb-pagina__hoofd { flex: 1 1 0; min-width: 0; }
.mb-pagina__titel { margin: 0 0 20px; font-family: var(--mb-font-kop); font-size: 60px; font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--mb-oranje); }
.mb-lopend { font-family: var(--mb-font-tekst); font-size: 16px; line-height: 24px; color: var(--mb-grijsblauw-2); }
.mb-lopend p { margin: 0 0 14.4px; }
.mb-lopend h2, .mb-lopend h3, .mb-lopend h4 { margin: 40px 0 16px; font-family: var(--mb-font-kop); font-size: 40px; font-weight: 800; line-height: 48px; text-transform: uppercase; color: var(--mb-grijsblauw); }
.mb-lopend h3 { font-size: 28px; line-height: 34px; }
.mb-lopend h4 { font-size: 20px; line-height: 26px; }
.mb-lopend a { color: var(--mb-oranje); }
.mb-lopend img { max-width: 100%; height: auto; }
.mb-lopend ul, .mb-lopend ol { margin: 0 0 14.4px; padding-left: 20px; }
.mb-lopend > :first-child { margin-top: 0; }
.mb-pagina__onder { margin-top: 26px; }

.mb-zijblok { display: flex; flex-direction: column; gap: 20px; flex: 0 0 336px; }
.mb-zijblok__vak { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; background: var(--mb-lichtblauw); }
.mb-zijblok__vak .mb-tekst { line-height: 24px; }
.mb-zijblok__titel { margin: 0; font-family: var(--mb-font-kop); font-size: 20px; font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--mb-grijsblauw-2); }
.mb-zijblok__knoppen { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.mb-vinklijst { margin: 0; padding: 0 0 0 20px; list-style: none; }
.mb-vinklijst li { display: flex; align-items: flex-start; gap: 12px; font-family: var(--mb-font-tekst); font-size: 16px; line-height: 24px; color: var(--mb-grijsblauw); }
.mb-vinklijst li + li { margin-top: 19px; }
.mb-vinklijst__icoon { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 3px; color: var(--mb-oranje); }

/* Over ons */
.mb-overons { padding: 0 50px; background: var(--mb-wit); }
.mb-overons__foto { height: 360px; margin: 0 -50px; line-height: 0; }
.mb-overons__foto img, .mb-overons__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mb-overons__vak { position: relative; display: flex; flex-direction: column; gap: 50px; max-width: var(--mb-breedte); margin: -160px auto 0; padding: 60px 40px; background: var(--mb-wit); }
.mb-overons__tekst { line-height: 24px; }

/* Contact */
.mb-contact { padding: 100px 50px; background: var(--mb-wit); }
.mb-contact__binnen { display: flex; align-items: flex-start; justify-content: space-between; gap: 50px; max-width: var(--mb-breedte); margin: 0 auto; }
.mb-contact__hoofd { flex: 0 1 749px; min-width: 0; }
.mb-contact__hoofd .mb-lopend p { margin: 0; }
.mb-contact__hoofd > .mb-lopend:first-of-type { margin-bottom: 14px; }
.mb-contact__adres { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 0 0 339px; padding: 20px; background: #f7f7f7; }
.mb-contact__adreskop { margin: 0; font-family: var(--mb-font-kop); font-size: 30px; font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--mb-grijsblauw-2); }
.mb-contact__adrestekst { line-height: 24px; }

/* Formulier */
.mb-form__velden { display: flex; flex-direction: column; gap: 20px; }
.mb-form__veld input, .mb-form__veld textarea { display: block; width: 100%; padding: 8px 16px; border: 1px solid #d3d3d3; border-radius: 3px; background: var(--mb-wit); font-family: var(--mb-font-tekst); font-size: 16px; line-height: 36px; color: var(--mb-grijsblauw-2); }
.mb-form__veld textarea { min-height: 156px; padding: 5px 14px; resize: vertical; }
.mb-form__veld input::placeholder, .mb-form__veld textarea::placeholder { color: #7f8692; opacity: 1; }
.mb-form__veld input:focus, .mb-form__veld textarea:focus { outline: 2px solid var(--mb-oranje); outline-offset: 0; border-color: var(--mb-oranje); }
.mb-form__veld.is-fout input, .mb-form__veld.is-fout textarea { border-color: #c0392b; }
.mb-form__hp { position: absolute; left: -9999px; }
.mb-form__verstuur { margin-top: 20px; }
.mb-form__knop { display: block; width: 100%; padding: 20px; border: 0; border-radius: 3px; background: var(--mb-oranje); font-family: var(--mb-font-accent); font-size: 15px; font-weight: 500; line-height: 1; color: var(--mb-wit); cursor: pointer; transition: background-color .3s; }
.mb-form__knop:hover, .mb-form__knop:focus-visible { background: var(--mb-grijsblauw-2); }
.mb-form__knop:disabled { opacity: .6; cursor: wait; }
.mb-form__melding { margin: 14px 0 0; font-family: var(--mb-font-tekst); font-size: 16px; line-height: 24px; color: var(--mb-grijsblauw-2); }
.mb-form__melding--fout { color: #c0392b; }
.mb-form + .mb-lopend { margin-top: 20px; }

/* Fase 3: tablet */
@media (max-width: 1199px) {
	.mb-slider__pijl { display: none; }
}
@media (max-width: 1024px) {
	.mb-usps { padding: 0 20px; }
	.mb-split__binnen, .mb-klanten__klant, .mb-pagina__binnen, .mb-contact__binnen { flex-direction: column; align-items: stretch; }
	.mb-split__tekst, .mb-split__foto, .mb-split--dienst .mb-split__tekst, .mb-split--dienst .mb-split__foto { flex: 0 0 auto; width: 100%; margin-right: 0; }
	.mb-klanten__foto { flex: 0 0 auto; max-width: none; }
	.mb-klanten__foto img, .mb-klanten__img { height: 350px; }
	.mb-klanten__inhoud { width: 100%; margin-top: 40px; }
	.mb-zijblok, .mb-contact__adres { flex: 0 0 auto; }
	.mb-contact__hoofd { flex: 0 0 auto; }
}

/* Fase 3: mobiel */
@media (max-width: 767px) {
	.mb-kop { font-size: 40px; }
	.mb-tekst--kolommen { column-count: 1; }
	.mb-usps { padding: 40px 20px; }
	.mb-usps__binnen { flex-direction: column; align-items: flex-start; gap: 40px; }
	.mb-usps--klein .mb-usp__tekst { font-size: 14px; }

	.mb-slider { height: 500px; }
	.mb-slide { padding: 0 20px; }
	.mb-slide__vak { padding: 30px; }
	.mb-slide__titel { font-size: 40px; }

	.mb-split, .mb-split--dienst { padding: 50px 20px; }
	.mb-split__foto img, .mb-split__img { height: 232px; }

	.mb-klanten { padding: 50px 20px; }
	.mb-klanten--gewoon .mb-kop { font-size: 32px; }
	.mb-klanten__foto img, .mb-klanten__img { height: 200px; }
	.mb-klanten__naam { font-size: 12px; }

	.mb-pagina { padding: 50px 20px; }
	.mb-pagina__titel { font-size: 32px; line-height: 38.4px; }
	.mb-zijblok__titel { font-size: 18px; line-height: 21.6px; }

	.mb-overons { padding: 0; }
	.mb-overons__foto { height: 200px; margin: 0; }
	.mb-overons__vak { gap: 20px; margin-top: 0; padding: 40px 20px; }
	.mb-overons .mb-kop { font-size: 32px; }

	.mb-contact { padding: 50px 20px 0; }
	.mb-contact__binnen { gap: 0; }
	.mb-contact__kop { font-size: 30px; }
}
.mb-slider { touch-action: pan-y; }
@media (max-width: 767px) {
	.mb-usp { flex-basis: auto; }
}
@media (max-width: 767px) {
	/* In één kolom valt de marge onder de laatste alinea weg, zoals bij Elementor. */
	.mb-tekst--kolommen { column-count: auto; }
	.mb-tekst--kolommen p:last-child { margin-bottom: 0; }
}
/* Zijblok scrolt op desktop mee, 130px onder de bovenkant (Elementor: sticky top, offset 130, binnen de pagina). */
@media (min-width: 1025px) {
	.mb-zijblok { position: sticky; top: 130px; }
	.admin-bar .mb-zijblok { top: 162px; }
}
.mb-contact__adrestekst p { margin: 0; }
@media (max-width: 767px) {
	.mb-overons .mb-koppen--midden, .mb-overons .mb-tekst--midden { text-align: left; }
	.mb-contact { padding-bottom: 50px; }
	.mb-contact__hoofd > .mb-lopend:first-of-type { margin-bottom: 58px; }
}

/* ===== Totaalverbouwing ===== */
.mb-knop-vol--wit { border-color: var(--mb-wit); background: transparent; }
.mb-knop-vol--wit:hover, .mb-knop-vol--wit:focus-visible { background: var(--mb-wit); color: var(--mb-grijsblauw-2); }
.mb-knop-vol--donker { border-color: var(--mb-grijsblauw-2); background: transparent; color: var(--mb-grijsblauw-2); }
.mb-knop-vol--donker:hover, .mb-knop-vol--donker:focus-visible { background: var(--mb-grijsblauw-2); color: var(--mb-wit); }
.mb-tv-knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; }
.mb-tv-knoppen--links { justify-content: flex-start; }

.mb-tv-kop { margin: 0; font-family: var(--mb-font-kop); font-size: 32px; font-weight: 800; line-height: 1; color: var(--mb-grijsblauw-2); }
.mb-tv-kop__accent { color: var(--mb-oranje); }
.mb-tv-tekst { font-family: var(--mb-font-tekst); font-size: 16px; line-height: 24px; color: var(--mb-grijsblauw-2); }
.mb-tv-tekst p { margin: 0 0 14.4px; }
.mb-tv-tekst ul { margin: 0; padding-left: 40px; }
.mb-tv-kopblok { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: var(--mb-breedte); margin: 0 auto 71px; text-align: center; }
.mb-tv-kopblok--smal { max-width: 503px; margin-bottom: 80px; }
.mb-tv-kopblok--links { align-items: flex-start; margin-bottom: 40px; text-align: left; }
.mb-tv-sectie { padding: 120px 50px; background: var(--mb-wit); }

/* 1. Kop met foto */
.mb-tv-held { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 750px; padding: 50px 50px 0; overflow: hidden; color: var(--mb-wit); }
.mb-tv-held__foto { position: absolute; inset: 0; line-height: 0; }
.mb-tv-held__foto img, .mb-tv-held__img { width: 100%; height: 100%; object-fit: cover; }
.mb-tv-held::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .57); }
.mb-tv-held__inhoud { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 42px; width: 100%; max-width: var(--mb-breedte); }
.mb-tv-held__tekst { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.mb-tv-held__kop { margin: 0; font-family: var(--mb-font-kop); font-size: 60px; font-weight: 800; line-height: 1; color: var(--mb-wit); }
.mb-tv-held__kop .mb-tv-kop__accent { color: var(--mb-oranje); }
.mb-tv-held__intro { font-family: var(--mb-font-tekst); font-size: 20px; line-height: 30px; }
.mb-tv-held__intro p { margin: 0 0 14px; }
.mb-tv-held__vinken { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 40px; justify-items: center; align-items: center; width: 75%; margin: 0; padding: 0; list-style: none; }
.mb-tv-held__vinken li { display: flex; align-items: center; gap: 10px; font-family: var(--mb-font-tekst); font-size: 16px; line-height: 20px; text-align: center; }
.mb-tv-held__vink { flex: 0 0 auto; width: 30px; height: 30px; color: var(--mb-oranje); }

/* 2. Complete vernieuwing (en 8. werkgebied) */
.mb-tv-twee { display: flex; align-items: center; gap: 70px; max-width: var(--mb-breedte); margin: 0 auto; }
.mb-tv-twee__beeld { flex: 0 0 550px; max-width: 100%; }
.mb-tv-twee__tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; flex: 1 1 0; min-width: 0; }

/* Voor/na-schuifje */
.mb-voorna { position: relative; overflow: hidden; border-radius: 12px; line-height: 0; user-select: none; touch-action: pan-y; }
.mb-voorna__na, .mb-voorna__voor { position: absolute; inset: 0; }
.mb-voorna__voor { clip-path: inset(0 calc(100% - var(--mb-voorna)) 0 0); }
.mb-voorna__img, .mb-voorna .pencil-image img, .mb-voorna img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mb-voorna__label { position: absolute; top: 5px; z-index: 2; padding: 4px 12px; font-family: var(--mb-font-tekst); font-size: 16px; line-height: 18px; color: var(--mb-wit); pointer-events: none; }
.mb-voorna__label--voor { left: 5px; background: rgba(0, 0, 0, .7); }
.mb-voorna__label--na { right: 5px; background: var(--mb-grijsblauw); }
.mb-voorna__lijn { position: absolute; top: 0; bottom: 0; left: var(--mb-voorna); z-index: 2; width: 3px; margin-left: -1.5px; background: var(--mb-wit); pointer-events: none; }
.mb-voorna__greep { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; gap: 2px; width: 40px; height: 40px; transform: translate(-50%, -50%); background: var(--mb-oranje); color: var(--mb-wit); }
.mb-voorna__greep .mb-icoon { width: 14px; height: 14px; }
.mb-voorna__schuif { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.mb-voorna__schuif:focus-visible + .mb-voorna__lijn, .mb-voorna:focus-within .mb-voorna__greep { outline: 2px solid var(--mb-wit); outline-offset: 2px; }

/* 3. Citaat over brede foto */
.mb-tv-citaat { padding: 0 50px; background: var(--mb-wit); }
.mb-tv-citaat__vak { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto -95px; padding: 40px; border-radius: 18px; background: var(--mb-lichtblauw); }
.mb-tv-citaat__tekst { max-width: 736px; margin: 0 auto; font-family: var(--mb-font-tekst); font-size: 18px; font-style: italic; font-weight: 500; line-height: 27px; text-transform: uppercase; color: var(--mb-grijsblauw-2); }
.mb-tv-citaat__tekst p { margin: 0 0 14px; }
.mb-tv-citaat__foto { height: 630px; margin: 0 -50px; line-height: 0; }
.mb-tv-citaat__foto img, .mb-tv-citaat__img { width: 100%; height: 100%; object-fit: cover; }

/* 4. Realiseren: tabbladen */
.mb-tv-realiseren .mb-tv-kop { max-width: 445px; }
.mb-tv-realiseren { padding-bottom: 100px; }
.mb-tabs { display: flex; align-items: center; justify-content: space-between; gap: 40px; max-width: var(--mb-breedte); margin: 0 auto; }
.mb-tabs__lijst { display: flex; flex-direction: column; gap: 4px; flex: 0 0 374px; }
.mb-tabs__tab { padding: 12px 20px; border: 0; border-radius: 4px; background: var(--mb-wit); font-family: var(--mb-font-accent); font-size: 16px; font-weight: 500; line-height: 24px; color: var(--mb-grijsblauw-2); text-align: left; cursor: pointer; transition: background-color .3s; }
.mb-tabs__tab:hover, .mb-tabs__tab[aria-selected="true"] { background: var(--mb-lichtblauw); }
.mb-tabs__panelen { flex: 0 1 636px; min-width: 0; line-height: 0; }
.mb-tabs__paneel img, .mb-tabs__img { display: block; width: 100%; height: 424px; border-radius: 12px; object-fit: cover; }
.mb-tv-realiseren__knoppen { gap: 10px 32px; margin-top: 100px; }

/* 5. Partner: zes voordelen */
.mb-tv-partner { background: var(--mb-lichtblauw); }
.mb-tv-voordelen { display: grid; grid-template-columns: repeat(3, 250px); justify-content: center; gap: 80px 200px; margin: 0; padding: 0; list-style: none; }
.mb-tv-voordeel { display: flex; flex-direction: column; align-items: center; gap: 15px; font-family: var(--mb-font-tekst); font-size: 16px; line-height: 24px; color: var(--mb-grijsblauw-2); text-align: center; }
.mb-tv-voordeel__icoon { width: 70px; height: 70px; }

/* Reactie Lotte & Frans */
.mb-tv-reactie { padding: 0 50px 120px; background: linear-gradient(var(--mb-lichtblauw) 64%, var(--mb-wit) 64%); }
.mb-tv-reactie__binnen { display: flex; align-items: flex-end; max-width: var(--mb-breedte); margin: 0 auto; }
.mb-tv-reactie__beeld { flex: 0 1 851px; min-width: 0; }
.mb-tv-reactie__kaart { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 24px; flex: 0 0 439px; margin: 0 0 -100px -120px; padding: 26px; border-radius: 20px; background: var(--mb-grijsblauw); color: var(--mb-wit); }
.mb-tv-reactie__citaat { font-family: var(--mb-font-tekst); font-size: 16px; font-style: italic; line-height: 24px; }
.mb-tv-reactie__citaat p { margin: 0 0 14px; }
.mb-tv-reactie__onder { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.mb-tv-reactie__naam { margin: 0; font-family: var(--mb-font-tekst); font-size: 16px; line-height: 24px; }

/* 6. Stappen */
.mb-tv-stappen { padding: 40px 50px; }
.mb-stappen { position: relative; max-width: var(--mb-breedte); margin: 0 auto; }
.mb-stappen__rij { --mb-zichtbaar: 5; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--mb-zichtbaar) - 1) * 10px) / var(--mb-zichtbaar)); gap: 10px; margin: 0; padding: 0 0 74px; list-style: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.mb-stappen__rij::-webkit-scrollbar { display: none; }
.mb-stap { position: relative; scroll-snap-align: start; }
.mb-stap__kaart { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 15px; min-height: 165px; padding: 20px 12px; border-radius: 6px; background: var(--mb-lichtblauw); text-align: center; }
.mb-stap__icoon { width: 70px; height: 70px; }
.mb-stap__titel { font-family: var(--mb-font-tekst); font-size: 16px; font-weight: 600; line-height: 20px; color: var(--mb-grijsblauw-2); }
.mb-stap__extra { position: absolute; top: calc(100% + 4px); left: 30px; padding: 10px; background: var(--mb-grijsblauw); }
.mb-stap__extra::before { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -8px; border: 8px solid transparent; border-bottom-color: var(--mb-grijsblauw); border-top: 0; }
.mb-stappen__pijlen { position: absolute; top: 180px; right: 0; display: flex; gap: 8px; }
.mb-stappen__pijl { display: inline-flex; width: 16px; height: 16px; padding: 0; border: 0; background: none; color: var(--mb-grijsblauw-2); cursor: pointer; }
.mb-stappen__pijl .mb-icoon { width: 16px; height: 16px; }
.mb-stappen__pijl:disabled { opacity: .3; cursor: default; }

/* 7. Waarom */
.mb-tv-waarom { padding: 40px 50px 120px; }
.mb-tv-waarom > .mb-tv-kop, .mb-tv-waarom__lijsten { max-width: var(--mb-breedte); margin-left: auto; margin-right: auto; }
.mb-tv-waarom > .mb-tv-kop { margin-bottom: 40px; }
.mb-tv-waarom__lijsten { display: flex; }
.mb-tv-vinklijst { flex: 0 0 515px; margin: 0; padding: 0; list-style: none; }
.mb-tv-vinklijst li { display: flex; align-items: flex-start; gap: 13px; font-family: var(--mb-font-tekst); font-size: 16px; line-height: 24px; color: var(--mb-grijsblauw-2); }
.mb-tv-vinklijst li + li { margin-top: 14px; }
.mb-tv-vinklijst__icoon { flex: 0 0 25px; width: 25px; height: 20px; margin-top: 2px; color: var(--mb-oranje); }

/* 8. Werkgebied */
.mb-tv-werkgebied { padding: 80px 50px 200px; }
.mb-tv-werkgebied__img, .mb-tv-werkgebied .mb-tv-twee__beeld img { display: block; width: 100%; height: auto; border-radius: 12px; }

/* 9. Formulier */
.mb-tv-formulier { padding: 0 50px 120px; background: linear-gradient(var(--mb-wit) 80px, var(--mb-lichtblauw) 80px); scroll-margin-top: 40px; }
.mb-tv-formulier__kaart { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 900px; margin: -80px auto 0; padding: 50px 50px 30px; border-radius: 10px; background: var(--mb-grijsblauw); color: var(--mb-wit); }
.mb-tv-kopblok--wit { max-width: 552px; margin: 0; }
.mb-tv-kopblok--wit .mb-tv-tekst { color: var(--mb-wit); }
.mb-tv-formulier__kop { font-size: 50px; color: var(--mb-wit); }
.mb-tv-formulier .mb-form { width: 100%; max-width: 800px; }
.mb-form--labels .mb-form__velden { gap: 20px; }
.mb-form__label { display: block; margin: 0 0 5px; padding-left: 0; font-family: var(--mb-font-tekst); font-size: 16px; font-weight: 300; line-height: 16px; color: var(--mb-wit); }
.mb-form__ster { color: var(--mb-oranje); }
.mb-form--labels .mb-form__veld input, .mb-form--labels .mb-form__veld textarea { height: 60px; padding: 8px 12px; border: 0; border-radius: 2px; line-height: 20.8px; }
.mb-form--labels .mb-form__veld textarea { height: 136px; min-height: 0; line-height: 24px; }
.mb-form--labels .mb-form__verstuur { margin-top: 30px; }
.mb-form--labels .mb-form__knop { height: 70px; padding: 10px; border-radius: 0; font-family: var(--mb-font-tekst); font-size: 16px; font-weight: 400; }
.mb-form--labels .mb-form__melding { color: var(--mb-wit); }
.mb-tv-formulier .mb-form { margin-bottom: 45px; }

@media (max-width: 1024px) {
	.mb-tv-held { align-items: flex-start; }
	.mb-tv-held__inhoud, .mb-tv-held__tekst { align-items: flex-start; text-align: left; }
	.mb-tv-held__vinken { justify-items: start; }
	.mb-tv-held .mb-tv-knoppen { justify-content: flex-start; }
	.mb-tv-twee { flex-direction: column; align-items: stretch; gap: 40px; }
	.mb-tv-twee__beeld { flex: 0 0 auto; }
	.mb-tv-citaat__foto { height: 500px; }
	.mb-tabs { flex-direction: column; align-items: stretch; }
	.mb-tabs__lijst { flex: 0 0 auto; }
	.mb-tabs__panelen { flex: 0 0 auto; }
	.mb-tv-voordelen { grid-template-columns: repeat(2, 250px); gap: 60px 80px; }
	.mb-tv-reactie { background: linear-gradient(var(--mb-lichtblauw) 70%, var(--mb-wit) 70%); }
	.mb-tv-reactie__binnen { flex-direction: column; align-items: stretch; gap: 20px; }
	.mb-tv-reactie__beeld { flex: 0 0 auto; }
	.mb-tv-reactie__kaart { flex: 0 0 auto; margin: 0; }
	.mb-stappen__rij { --mb-zichtbaar: 3; }
	.mb-tv-formulier__kaart { margin-top: 0; }
}

@media (max-width: 767px) {
	.mb-tv-sectie { padding: 50px 20px; }
	.mb-tv-held { justify-content: flex-end; min-height: 800px; padding: 0 20px 100px; }
	.mb-tv-held__kop { font-size: 37.5px; line-height: 1; }
	.mb-tv-held__intro { font-size: 18px; line-height: 27px; }
	.mb-tv-held__vinken { grid-template-columns: 1fr; gap: 14px; width: 100%; }
	.mb-tv-held__vinken li { text-align: left; }
	.mb-tv-held .mb-tv-knoppen, .mb-tv-knoppen--links, .mb-tv-realiseren__knoppen { flex-direction: column; align-items: flex-start; gap: 10px; }
	.mb-tv-realiseren__knoppen { align-items: center; gap: 0; margin-top: 100px; }
	.mb-stap__kaart { min-height: 0; height: 100%; }

	.mb-tv-vernieuwing .mb-tv-twee { flex-direction: column-reverse; gap: 60px; }
	.mb-tv-kopblok { margin-bottom: 70px; }

	.mb-tv-citaat { padding: 0 20px; }
	.mb-tv-citaat__vak { padding: 20px; }
	.mb-tv-citaat__tekst { font-size: 16px; line-height: 24px; }
	.mb-tv-citaat__foto { height: 350px; margin: 0 -20px; }

	.mb-tabs__paneel img, .mb-tabs__img { height: 223px; }

	.mb-tv-kopblok--smal { margin-bottom: 61px; }
	.mb-tv-voordelen { grid-template-columns: 250px; gap: 40px; }

	.mb-tv-reactie { padding: 50px 20px; }

	.mb-tv-stappen { padding: 20px 20px; }
	.mb-stappen__rij { --mb-zichtbaar: 1; gap: 30px; grid-auto-columns: 100%; }
	.mb-stappen__pijlen { top: 160px; }

	.mb-tv-waarom { padding: 20px 20px 50px; }
	.mb-tv-waarom__lijsten { flex-direction: column; gap: 14px; }
	.mb-tv-vinklijst { flex: 0 0 auto; }

	.mb-tv-werkgebied { padding: 0 20px 50px; }
	.mb-tv-werkgebied .mb-tv-twee__tekst { gap: 10px; }

	.mb-tv-formulier { padding: 0; background: var(--mb-lichtblauw); }
	.mb-tv-formulier__kaart { padding: 40px 20px; border-radius: 0; }
	.mb-tv-formulier__kop { font-size: 37.5px; }
}
@media (max-width: 767px) {
	.mb-tv-kopblok--links { margin-bottom: 40px; }
	.mb-tv-kopblok--wit { margin-bottom: 0; }
	.mb-tv-werkgebied .mb-tv-knoppen { gap: 0; margin-top: 30px; }
}
@media (max-width: 767px) {
	.mb-tv-realiseren .mb-tv-kopblok, .mb-tv-kopblok--wit { align-items: flex-start; text-align: left; }
	.mb-tabs__tab { text-align: center; }
	.mb-tv-reactie { background: var(--mb-wit); }
	.mb-stap__extra { left: 50%; transform: translateX(-50%); }
}

/* ===== Fase 4: projecten en referenties ===== */
/* Projectenoverzicht */
.mb-projectenkop { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 100px 50px; text-align: center; }
.mb-projectenkop__titel { line-height: 1; }
.mb-projectenkop__intro { max-width: 680px; line-height: 24px; }
.mb-projectraster { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.mb-projectkaart { position: relative; display: flex; min-height: 340px; overflow: hidden; background: var(--mb-grijsblauw-2); color: var(--mb-lichtgrijs); text-decoration: none; }
.mb-projectkaart__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mb-projectkaart__over { position: relative; z-index: 1; display: none; flex: 1 1 auto; padding: 20px; background: rgba(0, 0, 0, .57); }
.mb-projectkaart:hover .mb-projectkaart__over, .mb-projectkaart:focus-visible .mb-projectkaart__over { display: flex; }
.mb-projectkaart__kader { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 30px; min-height: 300px; padding: 20px; border: 4px solid var(--mb-wit); border-radius: 6px; text-align: center; }
.mb-projectkaart__tags { display: flex; flex-wrap: wrap; justify-content: center; }
.mb-projectkaart__tag { margin: 0 3px; padding: 2px 10px; border-radius: 5px; background: var(--mb-oranje); font-family: var(--mb-font-tekst); font-size: 12px; line-height: 18px; color: var(--mb-lichtgrijs); }
.mb-projectkaart__titel { font-family: var(--mb-font-kop); font-size: 35px; font-weight: 800; line-height: 1; }
.mb-projectkaart__link { font-family: var(--mb-font-tekst); font-size: 16px; line-height: 1; }

/* Projectpagina */
.mb-project__foto { height: 46vh; line-height: 0; background: var(--mb-lichtblauw); }
.mb-project__foto img, .mb-project__img { width: 100%; height: 100%; object-fit: cover; }
.mb-project { display: flex; flex-direction: column; align-items: center; gap: 150px; margin: 100px 0 200px; padding: 0 50px; }
.mb-project__kop { display: flex; flex-direction: column; gap: 36px; width: 100%; max-width: var(--mb-breedte); }
.mb-project__titel { margin: 0; font-family: var(--mb-font-kop); font-size: 60px; font-weight: 800; line-height: 1; color: var(--mb-oranje); }
.mb-project__intro, .mb-project__intro > div:not(.mb-project__details) { display: flex; flex-direction: column; gap: 36px; }
.mb-project .mb-voorna { border-radius: 0; }
.mb-project__details { display: flex; flex-direction: column; gap: 15px; font-family: var(--mb-font-tekst); font-size: 18px; line-height: 1; color: var(--mb-grijsblauw-2); }
.mb-project__details p { margin: 0; }
.mb-project__detailskop { font-weight: 800; }
.mb-project__type { display: flex; gap: 30px; font-weight: 500; }
.mb-project__tags { font-weight: 300; text-transform: capitalize; }
.mb-galerijvak { width: 80%; }
.mb-galerij { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 4px; column-gap: 8px; margin: 0; padding: 0; list-style: none; }
.mb-galerij li { grid-row-end: span var(--mb-rijen, 61); padding-bottom: 8px; }
.mb-galerij__link { display: block; height: 100%; line-height: 0; }
.mb-galerij__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.mb-galerij__link:hover .mb-galerij__img { opacity: .85; }

/* Foto groot (lichtbak) */
.mb-lichtbak { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, .9); }
.mb-lichtbak[open] { display: flex; align-items: center; justify-content: center; }
.mb-lichtbak::backdrop { background: rgba(0, 0, 0, .9); }
.mb-lichtbak__img { max-width: 90vw; max-height: 85vh; object-fit: contain; }
.mb-lichtbak__knop { position: absolute; display: inline-flex; padding: 12px; border: 0; background: none; color: var(--mb-wit); cursor: pointer; }
.mb-lichtbak__knop .mb-icoon { width: 28px; height: 28px; }
.mb-lichtbak__knop--sluit { top: 16px; right: 16px; }
.mb-lichtbak__knop--sluit .mb-icoon { width: 22px; height: 22px; }
.mb-lichtbak__knop--vorige { top: 50%; left: 16px; transform: translateY(-50%); }
.mb-lichtbak__knop--volgende { top: 50%; right: 16px; transform: translateY(-50%); }

/* Referenties */
.mb-referenties__hoofd { display: flex; flex-direction: column; gap: 20px; }
.mb-koppen--los { gap: 0; }
.mb-reacties { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; }
.mb-reactie { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; background: var(--mb-lichtblauw); font-family: var(--mb-font-tekst); font-size: 16px; line-height: 24px; color: var(--mb-grijsblauw-2); }
.mb-reactie p { margin: 0; }
.mb-reactie__velden { display: flex; flex-direction: column; gap: 10px; }
.mb-reactie__naam { font-family: var(--mb-font-kop); font-size: 20px; font-weight: 800; line-height: 20px; text-transform: uppercase; }
.mb-reactie__sterren { display: flex; line-height: 0; }
.mb-reactie__ster { width: 19px; height: 19px; color: var(--mb-oranje); }
.mb-reactie__ster.is-leeg { color: #ccd6df; }
.mb-reactie__tekst p { margin: 0 0 14.4px; }
.mb-reactie__link { display: inline-flex; align-items: center; gap: 5px; padding: 4.5px 0; font-family: var(--mb-font-kop); font-size: 15px; font-weight: 800; line-height: 15px; text-transform: uppercase; color: var(--mb-oranje); text-decoration: none; }
.mb-reactie__link:hover, .mb-reactie__link:focus-visible { color: var(--mb-grijsblauw-2); }
.mb-reactie__pijl { width: 9px; height: 15px; }

@media (max-width: 1024px) {
	.mb-projectraster { grid-template-columns: repeat(2, 1fr); }
	.mb-projectenkop { padding: 50px; }
	.mb-project__foto { height: 34vh; }
	.mb-galerijvak { width: 100%; }
	.mb-referenties__kop { font-size: 40px; }
}
@media (max-width: 767px) {
	.mb-projectenkop { align-items: flex-start; padding: 50px 20px; text-align: left; }
	.mb-projectenkop .mb-kop { font-size: 32px; }
	.mb-projectraster { grid-template-columns: 1fr; }
	.mb-project { gap: 100px; padding: 0 20px; }
	.mb-project__titel { font-size: 32px; }
	.mb-galerij { display: block; }
	.mb-galerij li { padding-bottom: 8px; }
	.mb-galerij__img { height: auto; }
	.mb-referenties__kop { font-size: 32px; line-height: 1.2; }
	.mb-reactie__naam { line-height: 24px; }
	.mb-reactie__link { font-size: 16px; line-height: 19.2px; padding: 2.4px 0; }
}

/* ===== Fase 5: vensters ===== */
.mb-venster { max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--mb-grijsblauw-2); }
.mb-venster::backdrop { background: rgba(0, 0, 0, .8); }
.mb-venster[open] { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.mb-venster__paneel { position: relative; width: 640px; max-width: 100%; max-height: 100%; overflow-y: auto; background: var(--mb-lichtblauw); }
.mb-venster__sluit { position: absolute; top: 14px; right: 14px; z-index: 1; display: inline-flex; padding: 6px; border: 0; background: none; color: var(--mb-grijsblauw-2); cursor: pointer; }
.mb-venster__sluit .mb-icoon { width: 15px; height: 15px; }
.mb-venster__sluit:hover, .mb-venster__sluit:focus-visible { color: var(--mb-oranje); }

/* Gratis adviesgesprek: paneel over de volle hoogte */
.mb-venster--advies .mb-venster__paneel { padding: 40px; } /* Zo hoog als de inhoud, gecentreerd; past het niet, dan scrolt het paneel. */
.mb-venster__koppen { display: flex; flex-direction: column; margin: 0 0 30px; }
.mb-venster__kop { font-size: 50px; line-height: 1; }
.mb-venster--advies .mb-form__velden { gap: 13px; }
.mb-venster--advies .mb-form__label { margin: 0; padding-bottom: 15px; font-weight: 400; color: var(--mb-grijsblauw-2); }
.mb-venster--advies .mb-form__verstuur { margin-top: 44px; }
.mb-venster--advies .mb-form__knop { display: inline-block; width: auto; height: 40px; padding: 0 24px; }
.mb-venster__onder { margin-top: 20px; }
.mb-venster__onder p { margin: 0; }

/* Ontvang brochure: gecentreerd */
.mb-venster--brochure .mb-venster__paneel { padding: 60px; }
.mb-venster__brochurekop { margin: 0 0 30px; font-family: var(--mb-font-kop); font-size: 28px; font-weight: 800; line-height: 1; color: var(--mb-grijsblauw-2); }
.mb-venster--brochure .mb-form__velden { gap: 20px; }
.mb-venster--brochure .mb-form__label { margin: 0; font-weight: 400; color: var(--mb-grijsblauw-2); }
.mb-venster--brochure .mb-form__veld input { height: 58px; border: 0; }
.mb-venster--brochure .mb-form__knop { height: 40px; padding: 0 24px; }
.mb-venster .mb-form__melding { color: var(--mb-grijsblauw-2); }
.mb-venster .mb-form__melding--fout { color: #c0392b; }

/* Bedankt (onder Totaalverbouwing) */
.mb-bedankt { display: flex; justify-content: center; padding: 200px 50px; background: var(--mb-wit); }
.mb-bedankt__binnen { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 585px; }
.mb-bedankt .mb-tv-tekst p { margin: 0 0 14px; }

@media (max-width: 767px) {
	.mb-venster--advies .mb-venster__paneel { padding: 40px 20px 30px; }
	/* Op de Elementor-site viel "ADVIESGESPREK" op 50px buiten beeld; hier past het. */
	.mb-venster__kop { font-size: 36px; }
	.mb-venster--brochure .mb-venster__paneel { padding: 40px 20px 20px; }
	.mb-venster--brochure .mb-venster__brochurekop { font-size: 28px; }
	.mb-bedankt { padding: 100px 20px; }
}
/* Velden en knoppen in de vensters zoals de Elementor-formulieren (rand en hoogte als op Contact, knop in Roboto). */
.mb-venster--advies .mb-form__veld input { height: auto; padding: 8px 16px; border: 1px solid #d3d3d3; border-radius: 3px; line-height: 36px; }
.mb-venster--advies .mb-form__veld textarea { height: 156px; padding: 5px 14px; border: 1px solid #d3d3d3; border-radius: 3px; line-height: 36px; }
.mb-venster .mb-form__knop { border-radius: 3px; font-family: var(--mb-font-accent); font-size: 15px; font-weight: 500; }
/* Beheerdersbalk van WordPress is tot 782px breed 46px hoog. */
@media (max-width: 782px) {
	.admin-bar .mb-header { top: 46px; }
}

/* ===== Cookiebanner (inc/cookies.php): zwevende kaart linksonder ===== */
.mb-cookies { position: fixed; left: 24px; bottom: 24px; z-index: 150; width: min(440px, calc(100vw - 48px)); }
.mb-cookies[hidden] { display: none; }
.mb-cookies__kaart { padding: 26px 26px 20px; border-top: 4px solid var(--mb-oranje); border-radius: 6px; background: var(--mb-wit); box-shadow: 0 12px 40px rgba(0, 0, 0, .2); color: var(--mb-grijsblauw-2); opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .3s; }
.mb-cookies.is-open .mb-cookies__kaart { opacity: 1; transform: none; }
.mb-cookies__titel { margin: 0 0 8px; font-family: var(--mb-font-kop); font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--mb-grijsblauw-2); }
.mb-cookies__tekst { font-family: var(--mb-font-tekst); font-size: 14px; line-height: 22px; }
.mb-cookies__tekst p { margin: 0; }
.mb-cookies__voorkeuren { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--mb-lichtgrijs); }
.mb-cookies__voorkeuren[hidden] { display: none; }
.mb-cookies__optie { display: flex; align-items: flex-start; gap: 12px; font-family: var(--mb-font-tekst); font-size: 14px; line-height: 21px; cursor: pointer; }
.mb-cookies__optie input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--mb-oranje); }
.mb-cookies__optie strong { display: block; color: var(--mb-grijsblauw-2); }
.mb-cookies__knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.mb-cookies__knoppen .mb-knop-vol { flex: 1 1 auto; padding: 11px 18px; font-size: 15px; cursor: pointer; }
.mb-cookies__knoppen .mb-knop-vol[hidden] { display: none; }
.mb-cookies__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 14px 0 0; font-family: var(--mb-font-tekst); font-size: 13px; line-height: 20px; }
.mb-cookies__link { padding: 0; border: 0; background: none; color: var(--mb-grijsblauw-2); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mb-cookies__link:hover, .mb-cookies__link:focus-visible { color: var(--mb-oranje); }
@media (max-width: 767px) {
	.mb-cookies { left: 12px; right: 12px; bottom: 12px; width: auto; }
	.mb-cookies__kaart { padding: 22px 20px 18px; }
	.mb-cookies__knoppen .mb-knop-vol { flex-basis: 100%; }
}

/* Sitemap */
.mb-sitemap { padding: 50px; background: var(--mb-wit); }
.mb-sitemap__binnen { max-width: var(--mb-breedte); margin: 0 auto; }
.mb-sitemap__titel { margin: 0 0 50px; font-family: var(--mb-font-kop); font-size: 40px; font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--mb-oranje); }
.mb-sitemap__kolommen { display: flex; flex-wrap: wrap; gap: 40px 50px; }
.mb-sitemap__kolom { min-width: 240px; }
.mb-sitemap__kop { margin: 0 0 20px; font-family: var(--mb-font-kop); font-size: 26px; font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--mb-grijsblauw-2); }
.mb-sitemap__lijst { margin: 0; padding-left: 40px; font-family: var(--mb-font-tekst); font-size: 16px; font-weight: 300; line-height: 24px; color: var(--mb-grijsblauw-2); }
.mb-sitemap__lijst a { color: inherit; text-decoration: none; }
.mb-sitemap__lijst a:hover, .mb-sitemap__lijst a:focus-visible { color: var(--mb-oranje); }
@media (max-width: 767px) {
	.mb-sitemap { padding: 50px 20px; }
	.mb-sitemap__titel, .mb-sitemap__kop { font-size: 32px; line-height: 1.2; }
}
/* Venster adviesgesprek compacter, zodat het op een gewoon scherm in zijn geheel past (zo hoog als de inhoud). */
.mb-venster--advies .mb-venster__paneel { max-height: calc(100% - 40px); }
.mb-venster--advies .mb-venster__koppen { margin-bottom: 24px; }
.mb-venster--advies .mb-form__label { padding-bottom: 8px; }
.mb-venster--advies .mb-form__veld input { line-height: 28px; }
.mb-venster--advies .mb-form__veld textarea { height: 120px; line-height: 24px; }
.mb-venster--advies .mb-form__verstuur { margin-top: 24px; }
.mb-venster--advies .mb-venster__onder { margin-top: 16px; }
@media (max-width: 767px) {
	.mb-venster--advies .mb-venster__paneel { max-height: 100%; }
}