/* MB Verwarming · merk (september 2026)
   Huidig logo, kleuren uit het logo, lettertype Outfit.
   In WordPress worden dit de globale kleuren en lettertypes van Elementor. */

@font-face { font-family: "Outfit"; src: url("fonts/outfit-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  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: "Outfit"; src: url("fonts/outfit-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  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; }

:root {
  /* Kleuren uit het logo */
  --rood: #e01b22;          /* vlam: verwarming, bellen, belangrijkste knop */
  --rood-donker: #c4151b;   /* hover en kleine rode tekst */
  --blauw: #2199d4;         /* druppel: sanitair, vlakken en iconen */
  --blauw-tekst: #11689a;   /* blauw voor tekst en links */
  --inkt: #1d2327;          /* tekst, zoals het zwart van het dak */
  --grijs: #5b6770;         /* tweede tekstkleur */
  /* Zachte vlakken */
  --blush: #fdf1ef;         /* warm vlak (verwarming) */
  --mist: #edf6fb;          /* fris vlak (sanitair) */
  --kiezel: #f4f5f6;        /* neutraal vlak */
  --lijn: #e6e8ea;
  --wit: #ffffff;

  --font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Schaal (px): 14 · 16 · 18 · 20 · 24 · 30 · 40 · 52 · 68 */
  --t-14: .875rem; --t-16: 1rem; --t-18: 1.125rem; --t-20: 1.25rem; --t-24: 1.5rem;
  --t-30: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  --t-40: clamp(1.875rem, 1.3rem + 2vw, 2.5rem);
  --t-52: clamp(2.25rem, 1.4rem + 3vw, 3.25rem);
  --t-68: clamp(2.6rem, 1.4rem + 4.4vw, 4.25rem);

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --sectie: clamp(72px, 9vw, 128px);
  --r: 28px;        /* zoals de afgeronde tegels in het logo */
  --r-klein: 16px;
  --pil: 999px;
  --schaduw: 0 24px 48px -28px rgba(29, 35, 39, .28), 0 2px 6px rgba(29, 35, 39, .04);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
body { margin: 0; background: var(--wit); color: var(--inkt); font-family: var(--font); font-size: var(--t-18); line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; max-width: 64ch; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--t-68); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: var(--t-52); }
h3 { font-size: var(--t-24); line-height: 1.2; letter-spacing: -0.01em; font-weight: 600; }
strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--blauw); outline-offset: 3px; border-radius: 8px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.lead { font-size: var(--t-20); line-height: 1.6; color: var(--grijs); }

/* Tegels zoals in het logo: rood vierkant met vlam, blauw vierkant met druppel */
.tegel { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 32%; color: var(--wit); flex: none; }
.tegel svg { width: 28px; height: 28px; }
.tegel--rood { background: var(--rood); }
.tegel--blauw { background: var(--blauw); }
.tegel--zacht { background: var(--kiezel); color: var(--inkt); }
.tegel--klein { width: 40px; height: 40px; } .tegel--klein svg { width: 20px; height: 20px; }

.nakijken { background: #fff1a8; color: #4a3b00; border-radius: 6px; padding: 0 6px; font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* MB Verwarming · huisstijl voor WordPress en Elementor
   Eén lettertype (Outfit), veel wit, eigen beeld groot en zonder kaders.
   Kleur alleen als signaal: rood voor de actie en verwarming, blauw voor sanitair. */

:root { --papier: #fdfcfa; --steen: #f2f0ec; --lijn5: #e7e3dd; --r5: 6px; }
body { background: var(--papier); font-weight: 400; }
::selection { background: var(--rood); color: var(--wit); }
:focus-visible { outline: 2px solid var(--blauw-tekst); outline-offset: 4px; border-radius: 2px; }
.wrap { width: min(100% - 2 * var(--gutter), 1240px); }
h1, h2, h3 { font-weight: 400; }

/* Knoppen: klein afgerond, geen pil */
.knop5 { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: var(--r5); background: var(--rood); color: var(--wit); font: 500 1.0625rem/1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s; }
.knop5:hover { background: var(--rood-donker); }
.knop5 svg { width: 18px; height: 18px; }
.knop5--rand { background: none; color: var(--inkt); box-shadow: inset 0 0 0 1.5px var(--inkt); }
.knop5--rand:hover { background: var(--inkt); color: var(--wit); }
.link5 { color: var(--inkt); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; white-space: nowrap; }
.link5:hover { color: var(--rood); }

/* Kop */
.kop5 { position: sticky; top: 0; z-index: 40; background: rgba(253, 252, 250, .94); backdrop-filter: blur(12px) saturate(1.4); }
.kop5.is-gescrold { box-shadow: 0 1px 0 var(--lijn5); }
.kop5 .wrap { display: flex; align-items: center; gap: 40px; min-height: 84px; }
.kop5 .logo img { height: 40px; width: auto; }
.kop5 nav { margin-left: auto; }
.kop5 nav ul { display: flex; gap: 30px; }
.kop5 nav a { font-size: 1rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.kop5 nav a:hover, .kop5 nav a[aria-current="page"] { color: var(--rood); }
.kop5 .acties { display: flex; align-items: center; gap: 24px; }
.kop5 .tel { font-weight: 500; text-decoration: none; white-space: nowrap; }
.kop5 .tel:hover { color: var(--rood); }
.kop5 .knop5 { min-height: 44px; padding: 0 18px; font-size: 1rem; }
.menuknop5 { display: none; margin-left: auto; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--inkt); border-radius: var(--r5); background: none; font: 500 1rem var(--font); color: var(--inkt); cursor: pointer; }
@media (max-width: 1080px) {
  .kop5 nav { display: none; }
  .menuknop5 { display: inline-flex; align-items: center; }
  .kop5.menu-open nav { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--papier); padding: 4px var(--gutter) 20px; box-shadow: 0 16px 24px -20px rgba(29, 35, 39, .35); }
  .kop5.menu-open nav ul { flex-direction: column; gap: 0; }
  .kop5.menu-open nav a { display: block; padding: 15px 0; border-bottom: 1px solid var(--lijn5); font-size: var(--t-20); }
}
@media (max-width: 720px) { .kop5 .acties .knop5 { display: none; } .kop5 .wrap { min-height: 70px; gap: 16px; } .kop5 .logo img { height: 34px; } }
@media (max-width: 420px) { .kop5 .tel { display: none; } }

/* Grote letter */
.d5 { margin-left: -0.035em; font-size: clamp(3.1rem, 1rem + 6.6vw, 7rem); font-weight: 300; line-height: .94; letter-spacing: -0.05em; text-wrap: balance; }

/* ---------- De zin bovenaan ---------- */
.hero5a { padding: clamp(40px, 7vw, 104px) 0 0; }
.hero5a h1 { font-size: clamp(2.5rem, .9rem + 5vw, 5.2rem); }
.zin5 { margin-top: clamp(30px, 4vw, 54px); font-size: clamp(1.65rem, 1rem + 2.3vw, 2.9rem); line-height: 1.3; letter-spacing: -0.03em; }
.zin5 label { margin-right: .25em; }
.zin5 select { field-sizing: content; display: inline-block; vertical-align: baseline; width: auto; max-width: 100%; font: inherit; color: var(--inkt); background: none; border: 0; border-bottom: 1.5px solid var(--inkt); border-radius: 0; padding: 0 1.2em 4px 0; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%231d2327' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; background-size: .8em; }
.zin5 select:hover { border-bottom-color: var(--rood); }
.zin5 select:focus-visible { outline: 3px solid var(--blauw); outline-offset: 4px; }
.lead5 { margin: 28px 0 0; max-width: 46ch; font-size: var(--t-20); line-height: 1.55; color: var(--grijs); }
.antwoord5 { margin: 26px 0 0; max-width: 48ch; color: #3e4952; font-size: var(--t-20); line-height: 1.55; }
.acties5 { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; }
.band5 { margin: clamp(60px, 8vw, 116px) 0 0; }
.band5 img { display: block; width: 100%; height: clamp(300px, 46vw, 660px); object-fit: cover; object-position: 50% 62%; }
.band5 figcaption { margin: 12px auto 0; width: min(100% - 2 * var(--gutter), 1240px); font-size: var(--t-14); color: var(--grijs); }

/* ---------- Secties ---------- */
.s5 { padding: clamp(88px, 11vw, 150px) 0; }
.s5--steen { background: var(--steen); }
.s5--lijn { padding-top: 0; }
.s5--lijn > .wrap { padding-top: clamp(88px, 11vw, 150px); border-top: 1px solid var(--lijn5); }
.s5 h2 { font-size: clamp(2.4rem, 1.2rem + 3.4vw, 4.25rem); font-weight: 300; line-height: 1; letter-spacing: -0.042em; }
.s5-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 56px; margin-bottom: clamp(40px, 5vw, 72px); }
.s5-kop h2 { max-width: 15ch; }
.s5-kop p { margin: 0; max-width: 42ch; color: var(--grijs); }
.uitleg5 { margin: 22px 0 26px; max-width: 52ch; color: var(--grijs); }
.klein5 { font-size: var(--t-14); color: var(--grijs); }

/* Diensten als een rustige index */
.index5 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px clamp(40px, 6vw, 96px); }
.index5 figure { margin: 0 0 24px; }
.index5 figure img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r5); }
.index5 h3 { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--inkt); font-size: var(--t-18); font-weight: 500; letter-spacing: 0; }
.index5 h3 .tegel { width: 26px; height: 26px; border-radius: 30%; }
.index5 h3 .tegel svg { width: 14px; height: 14px; }
.index5 a { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; align-items: center; margin-inline: -10px; padding: 22px 10px; border-bottom: 1px solid var(--lijn5); border-radius: 4px; text-decoration: none; transition: background-color .15s; }
.index5 a:hover { background: rgba(29, 35, 39, .035); }
.index5 b { font-size: clamp(1.3rem, 1.05rem + .8vw, 1.7rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; transition: color .15s; }
.index5 small { grid-column: 1; font-size: var(--t-16); color: var(--grijs); }
.index5 a svg { grid-row: 1 / span 2; grid-column: 2; width: 22px; height: 22px; color: var(--grijs); transition: transform .2s, color .2s; }
.index5 a:hover b { color: var(--rood); }
.index5 > div + div a:hover b { color: var(--blauw-tekst); }
.index5 a:hover svg { transform: translateX(4px); color: var(--inkt); }
@media (max-width: 860px) { .index5 { grid-template-columns: 1fr; } }

/* Onderhoudscheck: dezelfde zin-vorm als bovenaan */
.check5 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.zin5--klein { margin-top: 0; font-size: clamp(1.45rem, 1rem + 1.4vw, 2.1rem); line-height: 1.5; }
.uitkomst5 { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 24px; margin-top: 36px; padding-top: 28px; border-top: 1px solid #d5d9dc; }
.label5 { font-size: var(--t-14); color: var(--grijs); }
.label5, .uitkomst5 strong, .uitkomst5 p { grid-column: 1; }
.uitkomst5 strong { font-size: clamp(2.6rem, 1.5rem + 3.2vw, 4.25rem); font-weight: 300; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.uitkomst5 p { margin: 6px 0 0; font-weight: 500; }
.uitkomst5 p[data-toon="dringend"] { color: var(--rood-donker); }
.uitkomst5 p[data-toon="rustig"] { color: var(--blauw-tekst); }
.uitkomst5 .knop5 { grid-column: 2; grid-row: 2 / span 2; }
@media (max-width: 960px) { .check5 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .uitkomst5 { grid-template-columns: 1fr; } .uitkomst5 .knop5 { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 16px; } }

/* Werfverslag */
.werf5 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.werf5-beeld, .over5-beeld { margin: 0; }
.werf5-beeld { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.werf5-beeld img { display: block; width: 100%; object-fit: cover; border-radius: var(--r5); }
.werf5-beeld img:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.werf5-beeld img + img + img, .werf5-beeld img + img { aspect-ratio: 1; }
.werf5-beeld figcaption { grid-column: 1 / -1; }
.werf5-beeld figcaption, .over5-beeld figcaption { margin-top: 2px; font-size: var(--t-14); color: var(--grijs); }
.s5 .werf5 h2 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.1rem); }
.feiten5 { margin: 0; border-top: 1px solid var(--lijn5); }
.feiten5 div { display: grid; grid-template-columns: 3.2rem 1fr; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--lijn5); }
.feiten5 dt { font-size: var(--t-30); font-weight: 300; font-variant-numeric: tabular-nums; }
.feiten5 dd { margin: 0; }
@media (max-width: 960px) { .werf5 { grid-template-columns: 1fr; } }

/* Over Moussa */
.over5 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.s5 .citaat5 { max-width: 22ch; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.08; letter-spacing: -0.04em; }
.wie5 { margin: 24px 0 0; font-weight: 500; }
.gegevens5 { max-width: 560px; margin: 0 0 18px; border-top: 1px solid var(--lijn5); }
.gegevens5 div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--lijn5); font-size: var(--t-16); }
.s5--steen .gegevens5, .s5--steen .gegevens5 div { border-color: #d5d9dc; }
.gegevens5 dt { color: var(--grijs); }
.gegevens5 dd { margin: 0; }
.over5-beeld img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r5); }
.over5-beeld figcaption { margin-top: 12px; }
@media (max-width: 960px) { .over5 { grid-template-columns: 1fr; } .over5-beeld { max-width: 440px; } }

/* Reviews */
.score5 { display: flex; align-items: center; gap: 12px; margin: 0; font-weight: 500; color: var(--inkt) !important; }
.sterren5 { display: inline-flex; gap: 2px; color: var(--rood); }
.sterren5 svg { width: 18px; height: 18px; }
.reviews5 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(32px, 4vw, 64px); }
.reviews5 figure { margin: 0; padding-top: 22px; border-top: 1px solid var(--inkt); }
.reviews5 blockquote { margin: 0; }
.reviews5 p { margin: 0; font-size: var(--t-20); font-weight: 300; line-height: 1.55; text-indent: -0.42em; }
.reviews5 figcaption { margin-top: 18px; font-size: var(--t-16); color: var(--grijs); }
@media (max-width: 900px) { .reviews5 { grid-template-columns: 1fr; } }

/* Contact */
.contact5 { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.nummer5 { display: inline-block; margin: 18px 0 0 -0.03em; font-size: clamp(3rem, 1.4rem + 5.8vw, 6.6rem); font-weight: 300; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.nummer5:hover { color: var(--rood); }
.form5 { padding: clamp(24px, 3vw, 40px); border-radius: var(--r5); background: var(--wit); }
.form5 .veld { margin-bottom: 18px; }
.form5 label { display: block; margin-bottom: 8px; font-size: var(--t-16); font-weight: 500; }
.form5 input, .form5 textarea, .form5 select { width: 100%; min-height: 52px; padding: 13px 14px; border: 1px solid #cfd5d9; border-radius: var(--r5); background: var(--wit); font: 400 var(--t-16) var(--font); color: var(--inkt); }
.form5 textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.form5 input:focus, .form5 textarea:focus, .form5 select:focus { outline: none; border-color: var(--inkt); box-shadow: 0 0 0 1px var(--inkt); }
.form5 .twee { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form5 .knop5 { width: 100%; }
.form5 .klein5 { margin: 14px 0 0; }
.melding5 { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r5); background: var(--steen); font-size: var(--t-16); }
@media (max-width: 960px) { .contact5 { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .form5 .twee { grid-template-columns: 1fr; } }

/* Voet */
.voet5 { padding: 84px 0 36px; background: var(--inkt); color: #c3cad0; font-size: var(--t-16); }
.voet5 .raster { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 32px; }
.voet5 img { height: 44px; width: auto; }
.voet5 h3 { margin-bottom: 12px; font-size: var(--t-16); font-weight: 500; letter-spacing: 0; color: var(--wit); }
.voet5 li { margin-bottom: 8px; }
.voet5 a { color: #c3cad0; text-decoration: none; }
.voet5 a:hover { color: var(--wit); text-decoration: underline; }
.voet5 .onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 20px; border-top: 1px solid #353d43; font-size: var(--t-14); }
@media (max-width: 900px) { .voet5 .raster { grid-template-columns: 1fr 1fr; } .voet5 .raster > :first-child { grid-column: 1 / -1; } }

/* ---------- Dienstpagina ---------- */
.dienst5 { padding: clamp(40px, 6vw, 88px) 0 clamp(88px, 11vw, 150px); }
.dienst5 .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.kruimels5 { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 28px; font-size: var(--t-14); color: var(--grijs); }
.kruimels5 a { color: inherit; text-underline-offset: 3px; }
.kruimels5 [aria-current] { color: var(--inkt); }
.dienst5 h1 { max-width: 12ch; margin-left: -0.035em; font-size: clamp(2.9rem, 1.2rem + 5vw, 5.8rem); font-weight: 300; line-height: .96; letter-spacing: -0.05em; }
.foto5 { margin: 0; }
.foto5-beeld { position: relative; }
.foto5-beeld img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 4px; }
/* genummerde aanduiding, zoals in een technische handleiding */
.merk5 { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--wit); color: var(--inkt); display: grid; place-items: center; font-size: var(--t-14); font-weight: 500; box-shadow: 0 0 0 1.5px var(--inkt), 0 4px 10px -4px rgba(0, 0, 0, .5); }
.foto5 figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 14px; font-size: var(--t-14); color: var(--grijs); }
.legende5 { display: flex; flex-wrap: wrap; gap: 4px 18px; counter-reset: l; }
.legende5 li { counter-increment: l; color: var(--inkt); }
.legende5 li::before { content: counter(l) " "; color: var(--grijs); }
@media (max-width: 960px) { .dienst5 .wrap { grid-template-columns: 1fr; } .foto5 { max-width: 460px; } }

.regels5 { margin: 0; border-top: 1px solid var(--inkt); }
.regels5 > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); gap: 8px 32px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid #d5d9dc; }
.regels5 dt { font-weight: 500; }
.regels5 dd { margin: 0; color: var(--grijs); }
.regels5 .termijn { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem); font-weight: 300; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--inkt); }
@media (max-width: 800px) { .regels5 > div { grid-template-columns: 1fr; gap: 6px; } }

.stappen5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 28px; counter-reset: stap; }
.stappen5 li { counter-increment: stap; padding-top: 18px; border-top: 1px solid var(--inkt); }
.stappen5 li::before { content: counter(stap); display: block; margin-bottom: 28px; font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); font-weight: 300; line-height: 1; color: var(--grijs); }
.stappen5 h3 { font-size: var(--t-18); font-weight: 500; letter-spacing: 0; }
.stappen5 p { margin: 8px 0 0; font-size: var(--t-16); color: var(--grijs); }
@media (max-width: 1000px) { .stappen5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .stappen5 { grid-template-columns: 1fr; } .stappen5 li::before { margin-bottom: 14px; } }

.prijs5 { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.prijs5-blok { padding: clamp(24px, 3vw, 36px); border-radius: var(--r5); background: var(--steen); }
.prijs5-regel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; font-size: var(--t-20); }
.prijs5-regel strong { font-size: var(--t-30); font-weight: 400; }
.prijs5-blok .klein5 { margin: 6px 0 0; }
.inbegrepen5 { margin: 22px 0 26px; border-top: 1px solid #d5d9dc; }
.inbegrepen5 li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #d5d9dc; font-size: var(--t-16); }
.inbegrepen5 svg { width: 18px; height: 18px; flex: none; color: var(--rood); }
@media (max-width: 900px) { .prijs5 { grid-template-columns: 1fr; } }

.faq5 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.vragen5 { border-top: 1px solid var(--inkt); }
.vragen5 details { border-bottom: 1px solid var(--lijn5); }
.vragen5 summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; font-size: clamp(1.2rem, 1rem + .6vw, 1.45rem); line-height: 1.3; }
.vragen5 summary::-webkit-details-marker { display: none; }
.vragen5 summary::after { content: ""; flex: none; width: 18px; height: 18px; background: linear-gradient(var(--inkt), var(--inkt)) center / 100% 1.5px no-repeat, linear-gradient(var(--inkt), var(--inkt)) center / 1.5px 100% no-repeat; transition: background-size .2s; }
.vragen5 details[open] summary::after { background-size: 100% 1.5px, 1.5px 0; }
.vragen5 summary:hover { color: var(--rood); }
.vragen5 p { margin: -4px 0 24px; color: var(--grijs); }
@media (max-width: 900px) { .faq5 { grid-template-columns: 1fr; } }

/* Gsm: bellen en afspraak altijd in beeld */
.actiebalk5 { display: none; }
@media (max-width: 760px) {
  .actiebalk5 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); box-shadow: 0 -1px 0 var(--lijn5); }
  .actiebalk5 .knop5 { min-height: 50px; font-size: var(--t-16); }
  body { padding-bottom: 76px; }
}

/* Eén rustige beweging: de bovenkant komt zacht in beeld bij het laden */
@media (prefers-reduced-motion: no-preference) {
  .hero5a > .wrap > *, .hero5a > .band5 { animation: opkomen .7s cubic-bezier(.22, .8, .3, 1) both; }
  .hero5a > .wrap > :nth-child(2) { animation-delay: .07s; }
  .hero5a > .wrap > :nth-child(3) { animation-delay: .12s; }
  .hero5a > .wrap > :nth-child(4) { animation-delay: .17s; }
  .hero5a > .band5 { animation-delay: .22s; animation-duration: .9s; }
  @keyframes opkomen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ---------- WordPress en Elementor ---------- */
.mb-overslaan { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 18px; background: var(--inkt); color: var(--wit); }
.mb-overslaan:focus { left: 0; }
body.elementor-page .site-header, body.elementor-page .site-footer { display: none; }
.elementor-widget-text-editor p:last-child, .mb-lijst + p { margin-bottom: 0; }

/* Kolommen in een rij mogen krimpen. Anders komt de tussenruimte bovenop de
   percentages (42 + 58 + 64 px) en wordt de pagina breder dan het scherm.
   Krimpen gebeurt naar verhouding, dus de kolombreedtes blijven kloppen. */
.elementor .e-con > .e-con, .elementor .e-con-inner > .e-con { flex-shrink: 1; min-width: 0; }

/* Secties bouwen we met Elementor-containers; deze klassen doen de rest. */
.mb-sectie { padding-block: clamp(88px, 11vw, 150px); }
.mb-sectie--steen { background: var(--steen); }
.mb-lijn { border-top: 1px solid var(--lijn5); }
.mb-hero { padding-block: clamp(40px, 7vw, 104px) 0; }
.mb-hero h1, .dienst5 h1 { font-size: clamp(2.5rem, .9rem + 5vw, 5.2rem); }
.mb-vol > .e-con-inner, .mb-vol { padding-inline: 0 !important; }
.mb-beeld img, .mb-vol img { display: block; width: 100%; border-radius: var(--r5); }
.mb-vol img { height: clamp(300px, 46vw, 660px); object-fit: cover; object-position: 50% 62%; border-radius: 0; }
.mb-bijschrift { margin: 12px 0 0; font-size: var(--t-14); color: var(--grijs); }

/* Dienstenlijst (tekstblok met eigen opmaak) */
.mb-lijst { margin: 0; padding: 0; list-style: none; }
.mb-lijst li { margin: 0; }
.mb-lijst a { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; align-items: center; margin-inline: -10px; padding: 22px 10px; border-bottom: 1px solid var(--lijn5); border-radius: 4px; text-decoration: none; transition: background-color .15s; }
.mb-lijst a:hover { background: rgba(29, 35, 39, .035); }
.mb-lijst b { grid-row: 1; font-size: clamp(1.3rem, 1.05rem + .8vw, 1.7rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; transition: color .15s; }
.mb-lijst small { grid-row: 2; grid-column: 1; font-size: var(--t-16); color: var(--grijs); }
.mb-lijst a::after { content: ""; grid-row: 1 / span 2; grid-column: 2; width: 22px; height: 22px; background: currentColor; opacity: .55; transition: transform .2s, opacity .2s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.mb-lijst a:hover::after { transform: translateX(4px); opacity: 1; }
.mb-lijst--warm a:hover b { color: var(--rood); }
.mb-lijst--koud a:hover b { color: var(--blauw-tekst); }
.mb-kolomkop { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--inkt); font-size: var(--t-18); font-weight: 500; }
.mb-kolomkop .tegel { width: 26px; height: 26px; border-radius: 30%; }
.mb-kolomkop .tegel svg { width: 14px; height: 14px; }

/* Lange tekst: artikels */
.mb-artikel { max-width: 64ch; }
.mb-artikel h2 { margin: 2.2em 0 .5em; font-size: var(--t-30); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; }
.mb-artikel h2:first-child { margin-top: 0; }
.mb-artikel p, .mb-artikel li { color: #3e4952; }
.mb-artikel ul { margin: 0 0 1.2em; padding-left: 1.2em; }
.mb-artikel li { margin: 0 0 .5em; }
.mb-artikel li::marker { color: var(--rood); }
.mb-artikel a { color: var(--blauw-tekst); text-underline-offset: 3px; }
.mb-artikel a:hover { color: var(--rood); }
.mb-artikel .mb-kader { margin: 1.6em 0; padding: 22px 26px; border-left: 3px solid var(--rood); background: var(--steen); border-radius: 0 var(--r5) var(--r5) 0; }
.vragen5 a { color: var(--blauw-tekst); text-underline-offset: 3px; }

/* Blokken uit het plugin */
.mb-honing { position: absolute; left: -9999px; }
.melding5--ok { background: #e9f5ec; }
.melding5--fout { background: #fdecec; }
.mb-icoon svg { width: 20px; height: 20px; }

/* Kop en voet werken met de menu's van WordPress */
.kop5 nav ul, .voet5 ul { margin: 0; padding: 0; list-style: none; }
.kop5 nav li, .voet5 li { margin: 0; }
.voet5 .raster > div > ul li { margin-bottom: 8px; }
.kop5 nav .menu-item a { display: inline-block; }

/* Eén rustige beweging bij het openen van de startpagina */
@media (prefers-reduced-motion: no-preference) {
  .mb-hero > .e-con-inner > *, .mb-vol { animation: opkomen .7s cubic-bezier(.22, .8, .3, 1) both; }
  .mb-hero > .e-con-inner > :nth-child(2) { animation-delay: .07s; }
  .mb-hero > .e-con-inner > :nth-child(3) { animation-delay: .12s; }
  .mb-hero > .e-con-inner > :nth-child(4) { animation-delay: .17s; }
  .mb-vol { animation-delay: .22s; animation-duration: .9s; }
  @keyframes opkomen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}