/* MJA Allround Bouw: huisstijl uit het logo (grijs #414042, oranje #f7941d, blauw #27aae1) en hun eigen site (navy #102b3c, creme #f6f3ed). */
:root{
  --ink:#3f4042;--petrol:#102b3c;--accent:#f7941d;--tint:#f6f3ed;--tint2:#eeebe3;--tint3:#e4e1d8;--salie:#b9c3c8;--bg:#fbfaf7;
  --accent-donker:#e07f0a;--petrol-donker:#0a1e2b;--ink-donker:#2c2d2f;--tekst:#55585b;--op-accent:#102b3c;
  --accent-rgb:247,148,29;--petrol-rgb:16,43,60;--ink-rgb:63,64,66;--blauw:#27aae1;--blauw-tekst:#0c6f9e;
}
body{background:var(--bg)}
.sla-over{position:absolute;left:-999px;top:0;background:#fff;color:var(--ink);padding:10px 14px;z-index:999}
.sla-over:focus{left:8px;top:8px}
/* header: over de hero doorzichtig, na scrollen eigen donkere achtergrond (Simon 14-10-2026) */
.header.geschrompeld{background-color:rgba(16,43,60,.96)!important;background-image:none!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.logo-plateau{min-width:0;width:clamp(190px,17vw,260px)}
.logo-plateau .logo-beeld{height:118px;max-width:100%}
.header.geschrompeld .logo-plateau .logo-beeld{height:88px}
@media(max-width:1100px){.logo-plateau .logo-beeld{height:80px}.header.geschrompeld .logo-plateau .logo-beeld{height:70px}}
@media(max-width:640px){.logo-plateau{width:auto;padding:0 12px}.logo-plateau .logo-beeld{height:68px;max-width:none}.header.geschrompeld .logo-plateau .logo-beeld{height:60px}}
.taal-knop{color:#fff;font-weight:600;font-size:14px;text-decoration:none;border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:5px 11px;line-height:1.2;white-space:nowrap}
.taal-knop:hover{background:rgba(255,255,255,.14)}
@media(max-width:1200px){.nav .taal-knop{display:none}}
.knop-accent,.calc-volgende,.zwevend-knop,.menu-offerte{color:var(--op-accent)!important;font-weight:600}
.zwevend-knop svg{stroke:var(--op-accent)}
.knop-accent:hover{background:var(--accent-donker)}
/* eyebrows overal dezelfde pill (vaste regel) */
.eyebrow,.eyebrow-pill{display:inline-block;background:transparent;border:1px solid var(--accent);color:var(--ink);border-radius:999px;padding:8px 20px;text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:600;margin-bottom:14px}
h2,h3,.kop-blok h2{color:var(--ink)}
a.sleutelterm,.artikel-inhoud a.sleutelterm{color:var(--blauw-tekst);text-decoration-color:rgba(39,170,225,.55)}
a.sleutelterm:hover{color:var(--petrol)}
.tekstlink{color:var(--blauw-tekst)}
.pagina-hero,.product-hero,.over-hero{background-color:var(--petrol)}
.over-hero{background-color:var(--tint)}
.over-hero h1,.over-hero p{color:var(--ink)}
.tip-tag{background:var(--tint2);color:var(--ink)}
.tip-overlay .tip-tag{background:rgba(255,255,255,.2);color:#fff}
/* dienst- en SEO-hero: eigen foto als achtergrond op desktop, op mobiel de fotokaart */
.product-sub{color:rgba(255,255,255,.92);font-size:18px;line-height:1.5;margin:10px 0 16px;max-width:620px}
.product-score{margin-top:16px}
.product-hero h1{text-transform:none}
@media(min-width:1024px){
  .dienst-met-form>.product-hero{position:relative;z-index:1;background-color:var(--petrol);background-image:linear-gradient(100deg,rgba(16,43,60,.86) 0%,rgba(16,43,60,.6) 46%,rgba(16,43,60,.16) 100%),var(--hf);background-size:cover;background-position:center 40%}
  .dienst-met-form>.product-hero h1{font-size:clamp(30px,3vw,42px);text-align:left}
  .dienst-met-form>.product-hero .spec-lijst{justify-items:start;text-align:left;width:auto}
  .dienst-met-form>.product-hero .product-sub{text-align:left}
}
/* hero: lage schermen, kop en knop blijven boven de vouw */
.hero-dia{background-position:center}
@media(max-width:900px){
  .hero-baan .hero-dia:nth-child(1){background-image:url('/assets/img/hero-1-m.webp')!important}
  .hero-baan .hero-dia:nth-child(2){background-image:url('/assets/img/hero-2-m.webp')!important}
  .hero-baan .hero-dia:nth-child(3){background-image:url('/assets/img/hero-3-m.webp')!important}
}
.hero::after{background:linear-gradient(180deg,rgba(16,43,60,.62),rgba(16,43,60,.5) 50%,rgba(16,43,60,.72))}
@media(min-width:1024px){
  .hero-met-form>#offerte-samenstellen .calc-kaart{box-shadow:0 60px 90px -44px rgba(0,0,0,.55)}
  .hero-met-form>#offerte-samenstellen .kop-blok{box-shadow:none}
  .hero-met-form>#offerte-samenstellen .kop-blok .eyebrow-pill{display:none}
  .hero-met-form>#offerte-samenstellen{padding-top:calc(var(--header-h) + 14px)!important}
}
@media(min-width:1024px) and (max-height:800px){
  .hero-met-form .calc-stap .calc-tegels{min-height:0}
  .hero-met-form .calc-tegel{padding:9px 6px;font-size:12.5px}
  .hero-met-form>#offerte-samenstellen .kop-blok{padding-top:14px}
  .hero-met-form>#offerte-samenstellen .calc{padding:8px 24px 14px}
  .eerste-scherm .hero-met-form>.hero,.dienst-met-form>.product-hero{min-height:640px}
}
/* tellers en keurmerken */
.keurmerk-vak{background:#fff}
.keurmerk-vak img{max-height:46px}
/* kort samengevat */
.smal-tekst{max-width:860px;margin-inline:auto}
.kortblok{background:#fff;border-left:0;border-radius:var(--r-kaart);box-shadow:var(--schaduw);padding:clamp(20px,3vw,32px);text-align:center;border-top:4px solid var(--accent)}
.kortblok b{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.kortblok p{font-size:17px;line-height:1.6;color:var(--ink)}
.bijgewerkt{display:block;margin-top:10px;font-size:13px;color:var(--tekst)}
.kruimels{font-size:13.5px;color:var(--tekst);margin-bottom:14px;text-align:center}
.kruimels a{color:var(--tekst);text-decoration:underline;text-underline-offset:3px}
.kruimels i{font-style:normal;margin:0 4px;opacity:.6}
/* artikel */
.artikel-inhoud h2{margin-top:30px;margin-bottom:10px;font-size:26px;line-height:1.3}
.artikel-inhoud h2:first-child{margin-top:0}
.tekst-blok p{margin-bottom:12px;color:var(--tekst);font-size:16.5px;line-height:1.65}
.tekst-blok ul{margin:0 0 14px 0;padding:0;list-style:none}
.tekst-blok li{position:relative;padding:3px 0 3px 28px;color:var(--tekst);font-size:16.5px}
.tekst-blok li::before{content:"";position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:50%;background:#2e9e5b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat}
.artikel-foto{margin:22px 0;border-radius:var(--r-kaart);overflow:hidden;background:var(--tint)}
.artikel-foto img{width:100%;height:auto;max-height:520px;object-fit:cover;display:block}
.artikel-foto figcaption{padding:10px 16px;font-size:14px;color:var(--tekst);text-align:center}
.tekst-blok table,.bron-pagina table{width:100%;border-collapse:collapse;margin:14px 0 18px;font-size:15px;background:#fff}
.tekst-blok th,.bron-pagina th{background:var(--petrol);color:#fff;text-align:left;padding:10px 12px;font-weight:600}
.tekst-blok td,.bron-pagina td{padding:10px 12px;border-bottom:1px solid var(--tint2);color:var(--ink);text-align:left}
.bron-pagina tr.tot td{font-weight:700;background:var(--tint)}
.tabelwrap{overflow-x:auto}
@media(max-width:640px){
  table.stapel,table.stapel tbody,table.stapel tr,table.stapel td{display:block;width:100%}
  table.stapel tr:has(th){display:none}
  table.stapel tr{border:1px solid var(--tint2);border-radius:12px;margin-bottom:10px;background:#fff;padding:8px 12px}
  table.stapel td{border:0;padding:4px 0;display:flex;justify-content:space-between;gap:14px;text-align:right}
  table.stapel td.kop{font-weight:700;text-align:left;display:block}
  table.stapel td[data-label]::before{content:attr(data-label);color:var(--tekst);text-align:left;font-weight:500}
  .tekst-blok,.artikel-inhoud{overflow-wrap:anywhere}
}
/* silo */
.silo-kolommen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);text-align:center}
.silo-kolommen h3{margin-bottom:10px;font-size:18px}
.silo-kolommen ul{list-style:none;padding:0}
.silo-kolommen a{display:inline-block;padding:6px 0;color:var(--blauw-tekst);text-decoration:none;font-size:15.5px}
.silo-kolommen a:hover{text-decoration:underline}
@media(max-width:760px){.silo-kolommen{grid-template-columns:1fr}}
.combi-lijst{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.combi-lijst a{display:inline-block;padding:9px 16px;background:#fff;border:1px solid var(--tint3);border-radius:999px;color:var(--ink);text-decoration:none;font-size:15px}
.combi-lijst a:hover{border-color:var(--accent)}
.kb-kop{margin-top:clamp(36px,5vw,60px)}
.regio-kernen{font-size:14.5px;margin:6px 0 10px;color:var(--tekst)}
.regio-kernen a{color:var(--blauw-tekst)}
.vest-kaartbeeld{max-width:1000px;margin:18px auto 0;text-align:center}
.vest-kaartbeeld img{width:100%;height:auto;border-radius:var(--r-kaart)}
.vest-kaartbeeld figcaption{font-size:14px;color:var(--tekst);margin-top:8px}
.stappen-vier{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.stappen-vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.stappen-vier{grid-template-columns:1fr}}
/* footer */
.footer-logo-pill{display:inline-flex;background:#fff;border-radius:18px;padding:10px 14px}
.footer .footer-logo .logo-beeld-donker{height:92px;width:auto}
.foot-mail{overflow-wrap:anywhere}
.c-mail{overflow-wrap:anywhere;font-size:clamp(14px,1.2vw,17px)}
@media(max-width:640px){.footer-boven>div:first-child ul{grid-template-columns:1fr!important}.footer-boven>div:first-child ul li{white-space:normal}}
/* video in het uniek-blok */
.video-staand{position:relative;max-width:420px;margin-inline:auto;aspect-ratio:9/13;background:var(--petrol);border-radius:var(--r-kaart);overflow:hidden}
.video-staand video{width:100%;height:100%;object-fit:cover;display:block}
.video-speel{position:absolute;inset:0;margin:auto;width:66px;height:66px;border-radius:50%;background:var(--accent);color:var(--op-accent);font-size:22px;border:0;cursor:pointer}
.project-hoofdfoto{aspect-ratio:3/4;max-height:640px}
.project-hoofdfoto img{width:100%;height:100%;object-fit:cover}
.vn-los{max-width:620px;margin:18px auto 0;border-radius:var(--r-kaart);overflow:hidden}
.vn-los .voorna{min-height:520px}
.review-noot{text-align:center;font-size:14px;color:var(--tekst);margin-top:10px}
.ster-leeg{color:#d9d6cf}
.foto-knop{display:block;text-align:center;cursor:pointer;background:var(--tint);border:2px dashed var(--tint3);border-radius:12px;padding:18px;color:var(--ink);font-weight:600}
.foto-knop input{display:block;margin:10px auto 0;max-width:100%;font-size:14px}
a.g-score{text-decoration:none;color:inherit}
a.google-badge{text-decoration:none;color:#fff}
a.google-badge b{color:#fff}
.sm-lijst{list-style:none;columns:2;padding:0;margin:8px 0 22px}
.sm-lijst a{color:var(--blauw-tekst);display:inline-block;padding:3px 0}
.juridisch.sm h2{margin-top:18px}
@media(max-width:560px){.sm-lijst{columns:1}}
/* bronpagina */
.bron-pagina h2{margin-top:30px;margin-bottom:10px;font-size:26px;text-align:center}
.bron-pagina>p{color:var(--tekst);font-size:16.5px;line-height:1.65;text-align:center}
.sw-grafiek{margin:18px auto;max-width:700px}
.sw-rij{display:grid;grid-template-columns:44px 1fr 44px;gap:10px;align-items:center;margin-bottom:6px}
.sw-m{font-size:14px;color:var(--tekst);text-transform:capitalize}
.sw-b{position:relative;height:20px;background:var(--tint);border-radius:6px;overflow:hidden}
.sw-b i{position:absolute;inset:0 auto 0 0;background:rgba(247,148,29,.45);border-radius:6px}
.sw-b em{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:6px}
.sw-rij b{font-size:14px;text-align:right}
.sw-leg{text-align:center!important;font-size:14px}
.sw-leg i,.sw-leg em{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin:0 4px 0 12px}
.sw-leg i{background:rgba(247,148,29,.45)}.sw-leg em{background:var(--accent)}
.citeer{margin-top:26px;background:var(--tint);border-radius:var(--r-kaart);padding:22px;text-align:center}
.citeer p{margin:8px 0;overflow-wrap:anywhere;font-size:15px}
/* tijdschuif (wow) */
.ts-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,3vw,44px);align-items:center;margin-top:10px}
.ts-beeld{position:relative;border-radius:var(--r-kaart);overflow:hidden;box-shadow:0 26px 60px -30px rgba(16,43,60,.55)}
.ts-svg{display:block;width:100%;height:auto}
.ts-verf-wit{fill:#fdfcf8}
.ts-dof{fill:#8b8778;opacity:0;mix-blend-mode:multiply}
.ts-deur{fill:#1d3d30}
.ts-glans,.ts-scheur,.ts-bladder,.ts-rot,.ts-steiger,.ts-roller{opacity:0;transition:opacity .25s linear}
.ts-jaar-badge{position:absolute;left:14px;top:14px;background:rgba(16,43,60,.92);color:#fff;border-radius:999px;padding:7px 15px;font-size:15px;font-weight:600}
.ts-jaar-badge b{font-size:21px;margin-right:2px;font-variant-numeric:tabular-nums}
.ts-paneel{text-align:center}
.ts-wissel{display:inline-flex;background:var(--tint);border-radius:999px;padding:4px;margin-bottom:18px;max-width:100%}
.ts-w{border:0;background:none;border-radius:999px;padding:10px 16px;font:inherit;font-weight:600;font-size:15px;color:var(--ink);cursor:pointer;transition:background .3s,color .3s}
.ts-w.actief{background:var(--petrol);color:#fff}
.ts-label{display:block;font-weight:600;margin-bottom:6px}
.ts-schuif{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:999px;background:linear-gradient(90deg,var(--accent) var(--p,0%),var(--tint2) var(--p,0%));outline-offset:4px;cursor:pointer}
.ts-schuif::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#000;border:4px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.ts-schuif::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#000;border:4px solid #fff}
.ts-as{display:flex;justify-content:space-between;font-size:13px;color:var(--tekst);margin-top:6px}
.ts-staat{min-height:178px;margin-top:16px}
.ts-staat h3{font-size:21px;margin:10px 0 6px;color:var(--ink)}
.ts-staat p{color:var(--tekst);font-size:16px}
.ts-pill{display:inline-block;border-radius:999px;padding:4px 13px;font-size:13px;font-weight:700;color:#fff}
.ts-goed{background:#2e9e5b}.ts-let{background:#b9770a}.ts-actie{background:#c8590c}.ts-rot.ts-pill,.ts-pill.ts-rot{background:#7a3e16;opacity:1}
.ts-noot{font-size:13px;color:var(--tekst);margin-top:12px}
@media(max-width:900px){.ts-grid{grid-template-columns:1fr}.ts-staat{min-height:172px}.ts-w{padding:9px 12px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.ts-glans,.ts-scheur,.ts-bladder,.ts-rot,.ts-steiger,.ts-roller{transition:none}}
@media print{.ts-paneel .ts-knop,.hero-met-form form{display:none}}
/* ---- kwaliteitscontrole ronde 1 (30-10-2026) ---- */
/* header past op 1366: telefoonnummer pas vanaf 1461px, knop en taalknop compacter */
@media(min-width:1201px) and (max-width:1460px){
  .nav-tel{display:none!important}
  :root{--nav-gap:14px;--nav-vrij:20px}
  .nav-links>a,.nav .heeft-sub>a{font-size:15px}
  .nav .knop{padding:11px 16px 12px;font-size:15px}
  .taal-knop{padding:4px 9px;font-size:13px}
}
@media(min-width:1201px) and (max-width:1300px){.nav-links>a,.nav .heeft-sub>a{font-size:14px}:root{--nav-gap:11px}}
/* zwevende knoppen dekken de footer en de offertekop nooit af */
.footer-onder{padding-right:96px}
@media(max-width:900px){.footer-onder{padding-right:0;padding-bottom:84px}}
.bel-knoppen{transition:opacity .4s cubic-bezier(.22,.61,.36,1),transform .4s cubic-bezier(.22,.61,.36,1)}
.bel-knoppen.is-weg{opacity:0;transform:translateY(12px);pointer-events:none}
/* mobiel menu: logo past in het plateau, waardering op twee rustige regels */
@media(max-width:640px){.logo-plateau .logo-beeld,.header.geschrompeld .logo-plateau .logo-beeld{height:56px}}
.menu-score .gs-rij{flex-wrap:wrap;justify-content:center;font-size:14px}
.menu-score .g-score span{white-space:nowrap}
/* offerte-kop op mobiel: zinnen onder elkaar */
@media(max-width:640px){.pagina-hero .artikel-meta{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}}
/* juridische tabellen */
.juridisch .tabelwrap,.juridisch table{width:100%}
.juridisch table{border-collapse:collapse;margin:14px 0 20px;font-size:14.5px;table-layout:auto}
.juridisch th,.juridisch td{padding:9px 10px;border-bottom:1px solid var(--tint2);text-align:left;vertical-align:top;word-break:normal;overflow-wrap:break-word;hyphens:auto}
.juridisch th{background:var(--petrol);color:#fff}
@media(max-width:700px){.juridisch table{display:block;overflow-x:auto}.juridisch th,.juridisch td{min-width:120px}}
/* kopgewicht overal gelijk */
.over-hero h1,.pagina-hero h1,.product-hero h1{font-weight:700}
/* CTA-band: rustig donker vlak met oranje hoofdknop en witte tweede knop */
.cta-blok{background:var(--petrol)!important}
.cta-blok h2,.cta-blok p{color:#fff}
.cta-blok .knop-ink{background:var(--accent);color:var(--op-accent);border-color:var(--accent)}
.cta-blok .knop-ink:hover{background:var(--accent-donker)}
.cta-blok .knop-licht{background:#fff;color:var(--petrol);border-color:#fff}
/* tijdschuif-hendel in de huisstijl */
.ts-schuif::-webkit-slider-thumb{background:var(--accent);border-color:#fff}
.ts-schuif::-moz-range-thumb{background:var(--accent);border-color:#fff}
/* Instagram-icoon zichtbaar in knop en tegels */
.ig-knop{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.ig-knop svg{width:18px;height:18px;stroke:#dc2743;flex:none}
.ig-over svg{stroke:#fff;width:30px;height:30px}

/* ==== KWALITEITSRONDE 03-11-2026 ==== */
/* lichte over-hero (Over MJA): de header heeft daar meteen de donkere dekkende achtergrond,
   anders valt het witte menu weg tegen het crème vlak */
body:has(.over-hero) .header{background-color:rgba(16,43,60,.96);background-image:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* homepage op lage desktopschermen: hero-inhoud vrij onder het logoplateau (146px) */
@media(min-width:1024px) and (max-height:800px){
  .hero-met-form>.hero .hero-inhoud{padding-top:calc(146px + 26px)}
  .hero-met-form>.hero .hero-label{margin-bottom:14px}
  .hero-met-form>.hero .hero-titel{min-height:0;margin-bottom:6px}
}
/* voor/na-schuif: duidelijk handvat met pijlen in plaats van een kale zwarte bol */
.voorna .greep::after{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/24px no-repeat;
  border:3px solid #fff;width:48px;height:48px;box-shadow:0 4px 14px rgba(0,0,0,.4)}
/* projectpagina's: foto boven in beeld naast de lange tekst en meelopend tijdens het lezen */
@media(min-width:861px){
  .split:has(>.project-hoofdfoto){align-items:start!important}
  .split>.project-hoofdfoto{position:sticky!important;top:calc(var(--header-h) + 28px)}
}
/* projectkaarten: titel goed leesbaar op drukke gevels */
.projectkaart::after{background:linear-gradient(rgba(var(--petrol-rgb),0) 25%,rgba(var(--petrol-rgb),.6) 55%,rgba(var(--petrol-rgb),.94) 100%)}
.projectkaart .binnen{padding:0 24px 22px}
.projectkaart h3{text-shadow:0 1px 8px rgba(0,0,0,.45)}
/* dienstkaarten: titels op één hoogte, lange woorden passen in de kaart */
.kaart h3{min-height:2.6em;display:flex;align-items:center;justify-content:center;overflow-wrap:anywhere;hyphens:auto}
@media(min-width:1025px){.kaart-grid:has(> :nth-child(4)) .kaart h3{font-size:clamp(17px,1.35vw,20px)}}
/* menuknop: geen focusrand bij laden of klikken, wel bij toetsenbord */
.hamburger:focus:not(:focus-visible){outline:none}
.hamburger:focus,.hamburger:focus-visible{outline:none}
/* mobiel menu in de donkere huisstijlkleur, gelijk aan de gescrolde header */
.mobiel-menu{background:var(--petrol)}
.hamburger{background:transparent!important}
/* hero: Google-waardering op dezelfde linkerlijn als de hero-tekst (hero-inhoud is 1220 breed, 40px binnenmarge) */
@media(min-width:1024px){.hero-met-form>.hero .google-badge{left:calc(max(0px,(100% - 1220px)/2) + 40px)}}
/* CTA-blok met foto: knop in de donkere huisstijlkleur, verfblikken in beeld */
.advies .knop-ink{background:var(--petrol);color:#fff}
.advies .knop-ink:hover{background:var(--petrol-donker)}
.advies .beeld{background-position:72% 62%}