@import url("/v46-iconen.css?v=51");
/* Expert Exact — v37 afwerking (11-10-2026, Claude, op feedback van Nitien).
   Eén laag bovenop de v34/v35-stijl: uitlijning, typografie en rustige micro-animaties.
   Geen nieuwe kleuren of lettertypen: alleen het bestaande palet (navy #0c1c2e, blauw #00639a,
   oranje #aa6620, groen #1f8a5b, crème #fffefa/#faf8f4) en Archivo / IBM Plex Sans / IBM Plex Mono.
   Selectors beginnen met `html body` zodat deze laag wint van de later geladen v34-ritme/-formaat. */

/* ── Basis: animatie-tokens en in-beeld-onthulling ───────────────────────────────── */
html body{--v37-ease:cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:no-preference){
  html body .v37-op{opacity:0;transform:translateY(14px);transition:opacity .6s var(--v37-ease),transform .6s var(--v37-ease);transition-delay:var(--v37-d,0s)}
  html body .v37-op.v37-in{opacity:1;transform:none}
}

/* ── 1. Kopbalk: telefoonnummer trekt rustig de aandacht ──────────────────────────── */
html body .v34-telkop{position:relative;transition:color .2s}
html body .v34-telkop svg{transform-origin:50% 60%}
html body .v34-telkop::after{content:'';position:absolute;left:30px;right:0;bottom:-6px;height:2px;background:#aa6620;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--v37-ease)}
@media (hover:hover){html body .v34-telkop:hover{color:#aa6620}html body .v34-telkop:hover::after{transform:scaleX(1)}}
@media (prefers-reduced-motion:no-preference){
  html body .v34-telkop svg{animation:v37bel 7s ease-in-out 2.5s infinite}
  html body .v34-telkop:hover svg{animation:v37bel-kort .6s ease-in-out}
}
@keyframes v37bel{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(-14deg)}90%{transform:rotate(12deg)}92%{transform:rotate(-10deg)}94%{transform:rotate(8deg)}96%{transform:rotate(-4deg)}98%{transform:rotate(0)}}
@keyframes v37bel-kort{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(4deg)}}

/* ── 2. Hero: kenmerken met vinkjes, rechtsonder leesbaar en verzorgd ─────────────── */
html body .v34-hero .v34-usps{align-items:center;padding:24px 0 28px;font:600 15px/1.3 'IBM Plex Sans',sans-serif;gap:0}
html body .v34-hero .v34-usps>span:not(.v34-credit){display:inline-flex;align-items:center;gap:10px}
html body .v34-hero .v34-usps>span:not(.v34-credit)::before{content:'';flex:0 0 18px;width:18px;height:18px;border-radius:50%;background:rgba(195,224,238,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c3e0ee' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center/11px no-repeat;box-shadow:inset 0 0 0 1px rgba(195,224,238,.45)}
html body .v34-hero .v34-usps>span+span:not(.v34-credit){margin-left:24px;padding-left:24px}
html body .v34-hero .v34-usps .v34-credit{opacity:1;font:600 12.5px/1 'IBM Plex Mono',monospace!important;letter-spacing:.22em;color:#c3e0ee;display:inline-flex;align-items:center;gap:12px;padding:10px 16px;border:1px solid rgba(195,224,238,.32)!important;border-radius:999px;background:rgba(12,28,46,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media (max-width:1024px){html body .v34-hero .v34-usps{font-size:13.5px;padding:18px 0 22px}html body .v34-hero .v34-usps>span+span:not(.v34-credit){margin-left:14px;padding-left:14px}}

/* ── 3. "Waar kunnen wij u mee helpen?" — echte kop, grotere keuzes, levende iconen ── */
html body .v37-hulpkop{font:700 clamp(19px,1.6vw,22px)/1.2 'Archivo',sans-serif!important;letter-spacing:-.015em;color:#1f1d1a!important;margin:6px 0 16px!important}
html body .v34-routes{gap:14px}
html body .v34-route{padding:18px 22px;border:1px solid #e2dcd2;border-radius:10px;background:#fffefa;gap:16px;transition:transform .25s var(--v37-ease),box-shadow .25s,border-color .25s,background .25s}
html body .v34-route+.v34-route{border-left:1px solid #e2dcd2}
html body .v34-route>svg{box-sizing:content-box;width:24px;height:24px;padding:12px;border-radius:12px;background:color-mix(in srgb,var(--acc) 10%,#fffefa);transition:transform .35s var(--v37-ease),background .25s}
html body .v34-route strong{font-size:18.5px!important}
html body .v34-route small{font-size:14.5px!important;color:#57514a!important}
html body .v34-route .v34-arr{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);font-size:16px;transition:transform .25s var(--v37-ease),background .25s,color .25s,border-color .25s}
@media (hover:hover){
  html body .v34-route:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--acc) 40%,#e2dcd2);box-shadow:0 18px 34px -24px rgba(12,28,46,.45);background:#fff}
  html body .v34-route:hover>svg{transform:translateY(-2px) rotate(-6deg);background:color-mix(in srgb,var(--acc) 16%,#fffefa)}
  html body .v34-route:hover .v34-arr{background:var(--acc);color:#fff;border-color:var(--acc);transform:translateX(3px)}
}
@media (prefers-reduced-motion:no-preference){
  html body .v34-route[href*="spoed"]>svg{animation:v37wekker 6s ease-in-out 3s infinite;transform-origin:50% 55%}
  html body .v34-route[href*="offerte"]>svg{animation:v37dak 6s ease-in-out 1s infinite}
  html body .v34-route[href*="zakelijk"]>svg{animation:v37dak 6s ease-in-out 2s infinite}
}
@keyframes v37wekker{0%,88%,100%{transform:rotate(0)}90%{transform:rotate(-10deg)}92%{transform:rotate(10deg)}94%{transform:rotate(-8deg)}96%{transform:rotate(6deg)}98%{transform:rotate(0)}}
@keyframes v37dak{0%,90%,100%{transform:translateY(0)}94%{transform:translateY(-4px)}97%{transform:translateY(0)}}
@media (max-width:1024px){html body .v34-routes{gap:10px}html body .v34-route+.v34-route{border-top:1px solid #e2dcd2}html body .v34-route{padding:14px 16px}html body .v34-route strong{font-size:17px!important}html body .v34-route small{font-size:13.5px!important}}

/* ── 4. Storingsdienst: kicker, kop en tekst in balans ─────────────────────────────── */
html body #spoed .v34-k{font-size:13px!important;letter-spacing:.16em}
html body #spoed .v34-spoed h2{font-size:clamp(24px,2.3vw,31px)!important;line-height:1.18!important;letter-spacing:-.02em;margin-top:6px}
html body #spoed .v34-spoed h2+p{font-size:17px!important;line-height:1.6;color:#3f3a33;margin-top:14px!important}

html body #spoed .v34-spoed>div:first-child{align-self:center}
/* ── 5. Uurtarief: waarom dit tarief nu geldt, en een rustige puls ─────────────────── */
html body .trr.is-nu strong[data-nu]::before{content:attr(data-nu)}
@media (prefers-reduced-motion:no-preference){
  html body .trr.is-nu strong::before{animation:v37nu 2.6s ease-out infinite}
  html body .v34-tar .trnu-m{animation:v37gloed 2.6s ease-out infinite}
}
@keyframes v37nu{0%{box-shadow:0 0 0 0 rgba(232,163,90,.55)}70%{box-shadow:0 0 0 8px rgba(232,163,90,0)}100%{box-shadow:0 0 0 0 rgba(232,163,90,0)}}
@keyframes v37gloed{0%{box-shadow:0 0 0 0 rgba(216,133,47,.5)}70%{box-shadow:0 0 0 7px rgba(216,133,47,0)}100%{box-shadow:0 0 0 0 rgba(216,133,47,0)}}

/* ── 6. Vakgebieden: kop en intro gelijk uitgelijnd, voetregel leesbaar ─────────────── */
html body #diensten .v34-split{display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)!important;gap:32px 56px!important;align-items:end!important}
html body #diensten .v34-split>p{justify-self:end!important;font-size:17px!important;line-height:1.6!important;max-width:44ch!important;margin:0 0 6px!important;padding-left:18px;border-left:2px solid #00639a}
@media (max-width:1024px){html body #diensten .v34-split{grid-template-columns:1fr!important;gap:14px!important}html body #diensten .v34-split>p{justify-self:start!important}}
html body .v37-noot{display:inline-flex!important;align-items:center;gap:10px;font:600 15.5px/1.35 'Archivo',sans-serif!important;color:#1f1d1a!important;letter-spacing:-.005em}
html body .v37-noot::before{content:'';width:22px;height:2px;background:#00639a;flex:0 0 auto}

/* ── 7. Pijltjes: één verzorgde vorm (cirkel), animeert bij hover ──────────────────── */
html body :is(.v34-d,.v34-tools a,.v34-bizl a) .v34-arr,html body .v34-bizl a .bz-arr{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:1px solid color-mix(in srgb,var(--acc,#00639a) 30%,transparent);color:var(--acc,#00639a);font-size:14px!important;line-height:1;transition:transform .25s var(--v37-ease),background .25s,color .25s,border-color .25s}
html body .v34-bizl a .bz-arr{--acc:#00639a}
@media (hover:hover){
  html body :is(.v34-d,.v34-tools a,.v34-bizl a):hover :is(.v34-arr,.bz-arr){background:var(--acc,#00639a);border-color:var(--acc,#00639a);color:#fff;transform:translate(2px,-2px)}
  html body .v34-tools a:hover .v34-arr[style*="→"],html body .v34-tools a[href*="laadpaal"]:hover .v34-arr{transform:translateX(3px)}
}

/* ── 8. Snelkoppelingen onder de vakgebieden: tegels i.p.v. losse regel ─────────────── */
html body .v34-tools{gap:12px!important;border-top:0!important;padding:8px 0 24px!important}
html body .v34-tools a{justify-content:flex-start;gap:12px!important;padding:14px 16px;border:1px solid #e2dcd2!important;border-radius:10px;background:#fffefa;font:600 14.5px/1.25 'Archivo',sans-serif!important;transition:transform .25s var(--v37-ease),box-shadow .25s,border-color .25s}
html body .v34-tools a .v34-arr{margin-left:auto!important}
html body .v34-tools a>svg{transition:transform .35s var(--v37-ease)}
@media (hover:hover){html body .v34-tools a:hover{transform:translateY(-2px);box-shadow:0 14px 28px -22px rgba(12,28,46,.45);border-color:#cfc5b6!important}html body .v34-tools a:hover>svg{transform:scale(1.1) rotate(-6deg)}}
@media (max-width:1024px){html body .v34-tools{gap:10px!important}html body .v34-tools a{min-height:56px;border-bottom:1px solid #e2dcd2!important}}

/* ── 9. Zakelijk: kaarten met lucht, iconen en pijl die meebewegen ──────────────────── */
html body .v34-bizl a{transition:transform .25s var(--v37-ease),box-shadow .25s,background .25s}
html body .v34-bizl a .bz-ico{transition:transform .35s var(--v37-ease)}
@media (hover:hover){html body .v34-bizl a:hover{transform:translateY(-3px);box-shadow:0 18px 34px -24px rgba(12,28,46,.45)}html body .v34-bizl a:hover .bz-ico{transform:translateY(-2px) rotate(-6deg)}}

/* ── 10. Exact-methode: label in de foto, accentwoord en 1-2-3 ──────────────────────── */
html body .v34-mlbl{display:inline-flex;align-items:center;gap:10px;padding:9px 14px 9px 12px;border-radius:999px;background:rgba(12,28,46,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 22px -12px rgba(0,0,0,.55);color:#fff!important;font:600 12px/1 'IBM Plex Mono',monospace!important;letter-spacing:.16em}
html body .v34-mlbl::before{content:'';width:8px;height:8px;border-radius:50%;background:#7fc4e6;box-shadow:0 0 0 3px rgba(127,196,230,.25)}
/* accentwoord in koppen: overal dezelfde rustige onderstreping die bij in beeld komen intekent */
html body main h2 em:is(.v34-em-a,.v34-em-b,.v34-em-c){color:var(--acc,#00639a);font-style:normal;background:linear-gradient(90deg,color-mix(in srgb,var(--acc,#00639a) 85%,#fff),color-mix(in srgb,var(--acc,#00639a) 45%,#fff)) 0 92%/0 .11em no-repeat;padding-bottom:.02em;transition:background-size .7s var(--v37-ease) .15s}
html body main h2 em:is(.v34-em-a,.v34-em-b,.v34-em-c):is(.in,.v37-in){background-size:100% .11em}
html body main :is(.v34-contact,.v34-hero) h2 em:is(.v34-em-a,.v34-em-b,.v34-em-c){color:#9fd0e8;background-image:linear-gradient(90deg,#9fd0e8,rgba(159,208,232,.45))}
@media (prefers-reduced-motion:reduce){html body main h2 em:is(.v34-em-a,.v34-em-b,.v34-em-c){background-size:100% .11em;transition:none}}
/* 1-2-3: bij in beeld komen tikken de cijfers één voor één aan; hover laat de stap oplichten */
html body .v34-tijd li{transition:transform .3s var(--v37-ease)}
html body .v34-tijd .tn{position:relative}
html body .v34-tijd .tn::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--acc);opacity:0}
@media (prefers-reduced-motion:no-preference){
  html body .v34-tijd.aan li .tn::after{animation:v37ring 1.1s ease-out both}
  html body .v34-tijd.aan li:nth-child(2) .tn::after{animation-delay:.35s}
  html body .v34-tijd.aan li:nth-child(3) .tn::after{animation-delay:.7s}
}
@keyframes v37ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
@media (hover:hover){html body .v34-tijd li:hover{transform:translateX(4px)}html body .v34-tijd li:hover .tn{transform:scale(1.08)}}

/* ── 11. Case-blok: eigen ruimte en een verzorgde kaart ─────────────────────────────── */
html body #praktijk{border-top:1px solid #ece6db}
html body #praktijk>.v34-wrap{padding-top:64px!important;padding-bottom:72px!important}
html body #praktijk .v34-work{border-radius:14px;border:1px solid #e6ddcf;box-shadow:0 30px 60px -44px rgba(12,28,46,.45);background:linear-gradient(135deg,#f3ece2,#efe7dc)}
html body #praktijk .v34-work image-slot{transition:transform .9s var(--v37-ease)}
@media (hover:hover){html body #praktijk .v34-work:hover image-slot{transform:scale(1.03)}}
@media (max-width:1024px){html body #praktijk>.v34-wrap{padding-top:36px!important;padding-bottom:40px!important}}

/* ── 12. Waarom + vergelijker: verticaal gecentreerd, onthulling en hover ───────────── */
@media (min-width:1025px){
  html body #waarom .v34-split{display:grid!important;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;gap:64px!important;align-items:center!important}
  html body #waarom .v34-split>*:last-child{justify-self:stretch!important;max-width:none!important}
}
html body #waarom>.v34-wrap{padding-top:72px!important;padding-bottom:72px!important}
html body #waarom ul li{align-items:flex-start}
html body #waarom ul li>span:first-child{display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:rgba(31,138,91,.12);font-size:13px;margin-top:1px}
html body .v34-dverg{border-radius:12px!important;overflow:hidden;box-shadow:0 34px 70px -48px rgba(12,28,46,.55);transition:transform .35s var(--v37-ease),box-shadow .35s}
@media (hover:hover){
  html body .v34-dverg:hover{transform:translateY(-4px);box-shadow:0 40px 80px -46px rgba(12,28,46,.6)}
  html body .v34-dverg .v34-vr:not(.v34-vh){transition:background .2s}
  html body .v34-dverg .v34-vr:not(.v34-vh):hover{background:#fbf8f2}
}
html body .v34-dverg .v34-vr span[role=rowheader]{font-size:14px!important}
html body .v34-dverg .v34-vr :is(.vee,.vel){font-size:14.5px!important}
@media (prefers-reduced-motion:no-preference){
  html body .v34-dverg .v34-vr{opacity:0;transform:translateX(18px);transition:opacity .5s var(--v37-ease),transform .5s var(--v37-ease)}
  html body .v34-dverg.v37-in .v34-vr{opacity:1;transform:none}
  html body .v34-dverg.v37-in .v34-vr:nth-child(2){transition-delay:.08s}
  html body .v34-dverg.v37-in .v34-vr:nth-child(3){transition-delay:.16s}
  html body .v34-dverg.v37-in .v34-vr:nth-child(4){transition-delay:.24s}
  html body .v34-dverg.v37-in .v34-vr:nth-child(5){transition-delay:.32s}
  html body .v34-dverg.v37-in .v34-vr:nth-child(6){transition-delay:.4s}
}

/* ── 13. Kosten vooraf: velden en knop op één lijn, pijl van de keuzelijst netjes ────── */
html body #kosten .ks-grid{align-items:center}
html body #kosten .ks-kaart{border-radius:12px;padding:30px 30px 28px;box-shadow:0 30px 60px -46px rgba(12,28,46,.5)}
html body #kosten .ks-form{grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr) auto;gap:14px;align-items:end}
html body #kosten .ks-veld{gap:8px;align-content:end}
html body #kosten .ks-veld>span{font:600 13.5px/1.2 'Archivo',sans-serif;color:#3f3a33;min-height:16px}
html body #kosten .ks-veld :is(select,input){height:54px;min-height:54px;border-radius:8px;border-color:#cfc6b8;padding:0 16px;transition:border-color .2s,box-shadow .2s}
html body #kosten .ks-veld select{-webkit-appearance:none;appearance:none;padding-right:46px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2300639a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center/18px no-repeat;cursor:pointer}
html body #kosten .ks-veld :is(select,input):hover{border-color:#00639a}
html body #kosten .ks-veld :is(select,input):focus{box-shadow:0 0 0 4px rgba(0,99,154,.14)}
html body #kosten .ks-form .v34-btn{height:54px;min-height:54px;border-radius:8px;padding:0 24px;white-space:nowrap}
@media (max-width:620px){html body #kosten .ks-form{grid-template-columns:1fr}html body #kosten .ks-form .v34-btn{width:100%;justify-content:center}}
/* de merkenregel staat nu sitebreed als carrousel boven de voet */
html body #projecten .v34-merken{display:none!important}

/* ── 14. Merkencarrousel (sitebreed, boven de voet) ─────────────────────────────────── */
html body .v37-merken{background:#fffefa;border-top:1px solid #e2dcd2;padding:22px 0}
html body .v37-merken .v34-wrap{display:flex;align-items:center;gap:28px}
html body .v37-merken .v37-mk{flex:0 0 auto;font:600 12px/1 'IBM Plex Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:#57514a;display:inline-flex;align-items:center;gap:10px}
html body .v37-merken .v37-mk::before{content:'';width:22px;height:2px;background:#00639a}
html body .v37-merken .v37-band{position:relative;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:4px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
html body .v37-merken .v37-rail{display:flex;width:max-content;gap:12px}
html body .v37-merken .v37-merk{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 20px;border:1px solid #e2dcd2;border-radius:999px;background:#fff;color:#3f3a33;font:700 15px/1 'Archivo',sans-serif;letter-spacing:.01em;white-space:nowrap;text-decoration:none;transition:color .2s,border-color .2s,transform .2s}
html body .v37-merken .v37-merk img{height:22px;width:auto;max-width:96px;object-fit:contain;filter:grayscale(1);opacity:.85;transition:filter .2s,opacity .2s}
@media (hover:hover){html body .v37-merken .v37-merk:hover{color:#00639a;border-color:#9fc3d8}html body .v37-merken .v37-merk:hover img{filter:none;opacity:1}}
@media (prefers-reduced-motion:no-preference){
  html body .v37-merken .v37-rail.v37-loopt{animation:v37merken var(--v37-duur,40s) linear infinite}
  html body .v37-merken .v37-band:hover .v37-rail,html body .v37-merken .v37-band:focus-within .v37-rail,html body .v37-merken.v37-stil .v37-rail{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){html body .v37-merken .v37-rail{flex-wrap:wrap;width:auto}html body .v37-merken .v37-rail [aria-hidden="true"]{display:none}}
@keyframes v37merken{from{transform:translateX(0)}to{transform:translateX(var(--v37-schuif,calc(-50% - 6px)))}}
@media (max-width:720px){html body .v37-merken .v34-wrap{flex-direction:column;align-items:flex-start;gap:14px}html body .v37-merken .v37-band{width:100%}}

/* ── 15. Afsluitende CTA: knoppen in een strak raster met beweging ─────────────────── */
html body .v34-contact .v34-in{align-items:center!important}
html body .v34-contact .v34-cslot{width:100%;max-width:520px;justify-self:end;gap:14px!important}
html body .v34-contact .v34-cslot>.v34-btn{width:100%;justify-content:space-between;min-height:58px;border-radius:10px;font-size:16px;box-shadow:0 18px 36px -22px rgba(0,0,0,.6);transition:transform .25s var(--v37-ease),filter .25s,box-shadow .25s}
html body .v34-contact .v34-cslot>.v34-btn span[aria-hidden]{transition:transform .25s var(--v37-ease)}
@media (hover:hover){html body .v34-contact .v34-cslot>.v34-btn:hover{transform:translateY(-2px);filter:brightness(1.07)}}
html body .v34-contact .v34-cknop{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px!important;width:100%;position:relative;padding-top:30px}
html body .v34-contact .v34-cknop::before{content:attr(data-l);position:absolute;left:0;top:0;font:600 12px/1 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#b3d5e5}
html body .v34-contact .v34-cknop a{justify-content:center;min-height:54px;border-radius:10px;padding:0 14px;font-size:14.5px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html body .v34-contact .v34-cknop .bel{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.4);color:#fff}
html body .v34-contact .v34-cknop .ml{grid-column:auto!important}
@media (max-width:620px){html body .v34-contact .v34-cknop{grid-template-columns:1fr 1fr}html body .v34-contact .v34-cknop .bel{grid-column:1/-1!important}html body .v34-contact .v34-cknop :is(.wa,.ml,[href*="wa.me"],[href^="mailto"]){grid-column:auto!important}}

/* ── 16. Voet: meer lucht tussen de kolommen en een eigen kaart voor openingstijden ── */
@media (min-width:1025px){html body .v34-voet .v34-fgrid{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,.95fr)!important;gap:72px!important}}
html body .v34-voet .v34-uren{max-width:360px!important;width:100%;box-sizing:border-box;margin-top:22px;padding:18px 20px 16px;border:1px solid #e2dcd2;border-radius:12px;background:#fffefa;box-shadow:0 18px 40px -34px rgba(12,28,46,.45)}
html body .v34-voet .v34-urk{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
html body .v34-voet .v34-urk>span:first-child{font:600 12px/1 'IBM Plex Mono',monospace!important;letter-spacing:.18em;text-transform:uppercase;color:#57514a!important}
html body .v34-voet .v34-urst:not(:empty){display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;font:600 12px/1 'IBM Plex Sans',sans-serif!important;background:#f1ece4;color:#57514a!important}
html body .v34-voet .v34-urst.open{background:rgba(31,138,91,.12);color:#1a7a50!important}
html body .v34-voet .v34-urst::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
@media (prefers-reduced-motion:no-preference){html body .v34-voet .v34-urst.open::before{animation:v37nu 2.4s ease-out infinite}}
html body .v34-voet .v34-ur24{margin:12px -20px 0!important;padding:14px 20px!important;background:linear-gradient(90deg,rgba(170,102,32,.1),rgba(170,102,32,.03));border-top:1px solid #efe1cf;align-items:center}
html body .v34-voet .v34-ur24>span{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:#1f1d1a}
html body .v34-voet .v34-ur24>span::before{content:'';width:18px;height:18px;flex:0 0 18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23aa6620' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat}
html body .v34-voet .v34-ur24 strong,html body .v34-voet .v34-ur24 strong a{color:#aa6620!important;font-weight:700}
html body .v34-voet p.v34-urbron{margin:12px 0 0!important}

/* ── 17. Chatballon bij Zack ────────────────────────────────────────────────────────── */
html body .v37-zb{position:fixed;z-index:96;visibility:hidden;max-width:min(270px,calc(100vw - 110px));padding:12px 34px 12px 15px;border-radius:14px 14px 4px 14px;background:#0c1c2e;color:#fff;font:500 14.5px/1.35 'IBM Plex Sans',sans-serif;box-shadow:0 18px 40px -16px rgba(12,28,46,.6);cursor:pointer;opacity:0;transform:translateY(8px) scale(.96);transform-origin:100% 100%;pointer-events:none;transition:opacity .35s var(--v37-ease),transform .35s var(--v37-ease),visibility 0s linear .35s}
html body .v37-zb.v37-toon{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
html body .v37-zb button:focus-visible{outline:2px solid #9fd0e8;outline-offset:2px}
html body .v37-zb::after{content:'';position:absolute;right:-6px;bottom:10px;width:12px;height:12px;background:#0c1c2e;transform:rotate(45deg);border-radius:2px}
html body .v37-zb.v37-boven{border-radius:14px 14px 4px 14px;max-width:min(290px,calc(100vw - 32px))}
html body .v37-zb.v37-boven::after{right:16px;bottom:-6px}
html body .v37-zb strong{display:block;font:700 14.5px/1.3 'Archivo',sans-serif;color:#9fd0e8;margin-bottom:2px}
html body .v37-zb button{position:absolute;top:-4px;right:-4px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;z-index:0;color:#fff;font:600 14px/1 'IBM Plex Sans',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center}
html body .v37-zb button::before{content:'';position:absolute;inset:10px;border-radius:50%;background:rgba(255,255,255,.1);z-index:-1;transition:background .2s}
html body .v37-zb button:hover::before{background:rgba(255,255,255,.22)}
@media (prefers-reduced-motion:reduce){html body .v37-zb{transition:none}}

/* ── 17. Mobiel en tablet: niets breder dan het scherm, rustige opbouw ─────────────── */
html body #spoed .v34-spoed>*,html body .v34-tools>*{min-width:0}
@media (max-width:820px){
  html body .v34-hero .v34-usps .v34-credit{display:none!important}
  html body .v34-hero .v34-usps{display:flex!important;flex-direction:column;align-items:flex-start;gap:9px}
  html body .v34-hero .v34-usps>span+span:not(.v34-credit){margin-left:0!important;padding-left:0!important;border-left:0!important}
  html body .v34-hero .v34-usps>span:not(.v34-credit)::before{content:''!important;display:block!important}
}
@media (max-width:620px){
  html body .v34-tools{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body .v34-tools a{padding:12px 12px;gap:10px!important;font-size:14px!important;min-height:64px}
  html body .v34-tools a .v34-arr{display:none!important}
  html body .v34-tar .trr{flex-wrap:wrap;row-gap:8px}
  html body .v34-tar .trr .trl{flex:1 1 0;min-width:0}
  html body .v34-tar .trr strong{white-space:normal;margin-left:auto;text-align:right}
  html body .v34-tar .trr strong.ee-bedrag-leeg{flex:1 0 100%;margin-left:0;text-align:left;display:flex;align-items:center;flex-wrap:wrap;gap:4px 0}
  html body .v34-tar .trr strong.ee-bedrag-leeg .ee-bedrag-bel{padding:0!important;display:inline-flex!important;align-items:center;min-height:40px}
}
html body .v37-merken .v37-merk:focus-visible{outline:2px solid #00639a;outline-offset:2px}
html body .v37-merken .v37-stop{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid #e2dcd2;background:#fff;color:#3f3a33;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s}
html body .v37-merken .v37-stop::before{content:'';width:10px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
html body .v37-merken.v37-stil .v37-stop::before{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor;margin-left:3px}
@media (hover:hover){html body .v37-merken .v37-stop:hover{border-color:#00639a;color:#00639a}}
@media (max-width:720px){html body .v37-merken .v37-stop{position:absolute;right:18px;top:11px}html body .v37-merken{position:relative}}

/* ── 18. Telefoon: sectiekoppen gecentreerd (kicker, titel, korte intro); kaarten en lijsten blijven links ── */
@media (max-width:620px){
  html body main section:not(#spoed) .v34-k:has(+ h2){display:flex!important;justify-content:center;text-align:center;margin-left:auto;margin-right:auto}
  html body main section:not(#spoed) .v34-k:has(+ h2)::after{content:'';width:22px;height:2px;background:currentColor;flex:0 0 auto}
  html body main section:not(#spoed) .v34-k + h2{text-align:center;margin-left:auto;margin-right:auto}
  html body main section:not(#spoed) p.v37-intro:not(#ee-r){text-align:center!important;margin-left:auto!important;margin-right:auto!important}
  html body main section:not(#spoed) p.v37-intro + a.v34-tl{display:flex!important;justify-content:center;width:fit-content;margin-left:auto;margin-right:auto}
  html body #diensten .v34-split>p:not(#ee-r){text-align:center!important;justify-self:center!important;border-left:0!important;padding-left:0!important;margin-left:auto;margin-right:auto}
  html body main p.v37-hulpkop:not(#ee-r){text-align:center!important}
  html body main p.v37-noot:not(#ee-r){display:flex!important;justify-content:center;text-align:center!important}
  html body .v37-noot::after{content:'';width:22px;height:2px;background:#00639a;flex:0 0 auto}
  html body .v34-contact .v34-cslot>.v34-btn{justify-content:center}
  html body .v34-contact .v34-cknop::before{left:0;right:0;text-align:center}
}

/* ── 19. Pijlen: micro-animaties (knoppen, tekstlinks en pijlcirkels) ────────────────── */
html body .v37-pi{display:inline-block;font-style:normal;line-height:1;transition:transform .25s var(--v37-ease)}
html body .v37-ring{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  html body :is(a,button):is(:hover,:focus-visible) .v37-pi[data-r="r"]{animation:v37pijl-r .55s var(--v37-ease)}
  html body :is(a,button):is(:hover,:focus-visible) .v37-pi[data-r="ru"]{animation:v37pijl-ru .55s var(--v37-ease)}
  html body :is(a,button):is(:hover,:focus-visible) .v37-pi[data-r="rd"]{animation:v37pijl-rd .55s var(--v37-ease)}
  html body :is(a,button):is(:hover,:focus-visible) .v37-pi[data-r="d"]{animation:v37pijl-d .55s var(--v37-ease)}
  html body :is(a,button):active .v37-pi[data-r="r"]{transform:translateX(5px);transition-duration:.08s}
  html body :is(a,button):active .v37-pi[data-r="ru"]{transform:translate(3px,-3px);transition-duration:.08s}
  html body :is(a,button):active .v37-pi[data-r="d"]{transform:translateY(4px);transition-duration:.08s}
  /* hoofdknoppen: elke 7 s een klein duwtje naar rechts, stopt zodra de muis erop staat */
  html body .v37-pi.v37-duw{animation:v37duw 7s ease-in-out 3s infinite}
  html body :is(a,button):is(:hover,:focus-visible) .v37-pi.v37-duw{animation:v37pijl-r .55s var(--v37-ease)}
}
/* het pijltje schuift eruit en komt aan de andere kant weer binnen */
@keyframes v37pijl-r{0%{transform:none;opacity:1}45%{transform:translateX(12px);opacity:0}46%{transform:translateX(-12px);opacity:0}100%{transform:none;opacity:1}}
@keyframes v37pijl-ru{0%{transform:none;opacity:1}45%{transform:translate(10px,-10px);opacity:0}46%{transform:translate(-10px,10px);opacity:0}100%{transform:none;opacity:1}}
@keyframes v37pijl-rd{0%{transform:none;opacity:1}45%{transform:translate(10px,10px);opacity:0}46%{transform:translate(-10px,-10px);opacity:0}100%{transform:none;opacity:1}}
@keyframes v37pijl-d{0%{transform:none;opacity:1}45%{transform:translateY(10px);opacity:0}46%{transform:translateY(-10px);opacity:0}100%{transform:none;opacity:1}}
@keyframes v37duw{0%,82%,100%{transform:none}86%{transform:translateX(6px)}90%{transform:none}94%{transform:translateX(3px)}97%{transform:none}}


/* ── v38 (21-10-2026) ─────────────────────────────────────────────────────────────────── */
/* Home: de projectstrook toont alleen iets als het CRM vrijgegeven cases levert. Zonder cases
   bleef er een lege band van ~100 px over (de merkenregel staat sitebreed in de carrousel). */
html body #projecten:not(:has(.v34-case)){display:none}
/* Telefoon: een lang woord in een gemarkeerde kop (EN "sustainable", "sustainability") liep
   rechts buiten beeld; op smalle schermen mag de markering afbreken. */
@media (max-width:480px){html body :is(h1,h2) :is(.v34-em-a,.v34-em-b,.v34-em-c){white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}}

/* ── v39 (21-10-2026): mobiel en tablet als app, desktop ongewijzigd ─────────────────────── */
/* Tablet (768–1199): telefoonnummer en menuknop samen rechts in de kop, i.p.v. midden in de balk. */
@media (min-width:768px) and (max-width:1199px){html body .v34-head .v34-telkop{margin-left:auto}}
/* Pijlcirkels nooit laten indeuken tot een ovaal als de kaart krap is. */
html body .v34-route .v34-arr{flex:0 0 auto}
/* Tablet: de drie keuzes ("Waar kunnen wij u mee helpen?") als tegels — icoon en pijl boven, tekst over
   de volle breedte eronder. Op 768–1199 px werd de tekst anders in smalle kolommen van 3–4 regels geperst. */
@media (min-width:768px) and (max-width:1199px){
  html body .v34-route{position:relative;flex-direction:column;align-items:flex-start;gap:12px;padding:16px 18px 18px}
  html body .v34-route>.v34-arr{position:absolute;top:16px;right:16px}
}
/* Offerteformulier op tablet: de hulpballon van Zack zat over de knop "Verder"; nu erboven. */
@media (min-width:768px) and (max-width:1199px){html body #ee-zack-assist{bottom:calc(108px + env(safe-area-inset-bottom,0px))!important}}
/* Als geïnstalleerde app (v37.js zet .v39-app en viewport-fit=cover): inhoud en actiebalk blijven
   buiten de inkeping en de thuisbalk van de telefoon. */
html.v39-app body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
@media (max-width:767px){html.v39-app body nav.v34-bar:not(#ee-r){padding-left:max(10px,env(safe-area-inset-left,0px))!important;padding-right:calc(68px + env(safe-area-inset-right,0px))!important}}
@media (max-height:500px) and (orientation:landscape) and (pointer:coarse){html.v39-app body nav.v34-bar:not(#ee-r){right:calc(12px + env(safe-area-inset-right,0px))!important}html.v39-app body #ee-chat-fab:not(#ee-r){right:calc(12px + env(safe-area-inset-right,0px))!important}}
/* Koppen: een accentmarkering (nowrap) of een heel lang woord liep buiten zijn kolom — op de EN-
   verduurzamingspagina's zelfs op desktop over de vragenlijst heen. v37.js zet .v39-breek alléén op
   een kop die echt te breed is; dan mag de markering afbreken (op telefoon krimpt de letter zo nodig iets). */
html body .v39-breek :is(.v34-em-a,.v34-em-b,.v34-em-c,em){white-space:normal!important;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Aanraakschermen: elk tikdoel minstens 44 × 44 px (Apple/WCAG 2.5.5). Muis en trackpad: niets verandert. */
@media (pointer:coarse){
  html body a.v34-logo{min-width:44px}
  html body footer.v34-voet a:has(>img){min-height:44px}
  html body .v34-voet .v34-ur24 strong a{display:inline-flex;align-items:center;min-height:44px}
  html body .v34-tar .ee-bedrag-bel,html body .v34-tar .trr strong.ee-bedrag-leeg .ee-bedrag-bel{display:inline-flex!important;align-items:center;min-height:44px}
  html body button.v34-chip{min-width:44px}
  /* anti-beunhaas */
  html body .text-link,html body .footer-layout a{display:inline-flex;align-items:center;min-height:44px}
  /* oudere projectpagina-sjabloon (Starbucks-case, noindex) */
  html body footer:not(.v34-voet) a{display:flex;align-items:center;min-height:44px}
  html body footer:not(.v34-voet) span>a{display:inline-flex}
  html body header[style*="sticky"] a{display:inline-flex;align-items:center;min-height:44px}
  /* Mijn omgeving / portaal: tekstknop midden in een zin — groter tikvlak zonder dat de regel verspringt */
  html body p>button[data-ee-press]{padding-top:14px!important;padding-bottom:14px!important;margin-top:-14px;margin-bottom:-14px}
  html body [data-mwrap]>a[href="projecten.html"]{display:inline-flex;align-items:center;min-height:44px}
}
/* Oudere projectpagina: twee onderbalken over elkaar (ee-mobcta en ee-mjscta) — alleen de bovenste tonen. */
html body:has(.ee-mjscta) .ee-mobcta{display:none!important}
/* Chatvenster (ee-chat.js komt uit het CRM via site-build, dus hier bijgesteld): het invoerveld had
   een ongeldige font-shorthand ("15px/1.3 inherit") en viel terug op 13,3 px — iOS zoomt dan in bij
   tikken. Bedoeld was 15 px; op aanraakschermen 16 px. Sluitknop en tekstknoppen 44 px hoog. */
html body #ee-chat-fab + div input:not([type=file]){font-family:inherit;font-size:15px;line-height:1.3}
@media (pointer:coarse){
  html body #ee-chat-fab + div input:not([type=file]){font-size:16px!important}
  html body #ee-chat-fab + div button{min-height:44px}
}

/* ── v40 (22-10-2026): spoedknop, mobiel centreren, banners uit het CRM — desktop ongewijzigd ──────── */
/* 1. Spoedknop in de vaste actiebalk (telefoon, tablet, liggend): vol vlak in de bestaande spoedkleur,
      witte tekst en icoon (contrast 5,8 : 1, WCAG AA), tikvlak ≥ 52 px. Aandacht: een zachte gloed die
      na binnenkomst een paar keer uitdijt en een klein "live"-stipje (24/7). Uit bij reduced-motion.
      De belangrijkste knop van de balk; Opname blijft blauw, Bel/WhatsApp blijven rustig. */
html body nav.v34-bar a:is([href$="spoed.html"],[href$="spoed"]):not(#ee-r),
html body :is(.ee-mobcta,.ee-mjscta) a:is([href$="spoed.html"],[href$="spoed"]):not(#ee-r){position:relative;background:#94561a!important;color:#fff!important;font-weight:700!important;box-shadow:0 0 0 0 rgba(216,133,47,0);min-height:52px}
html body nav.v34-bar a:is([href$="spoed.html"],[href$="spoed"]):not(#ee-r) svg{color:#fff}
html body nav.v34-bar a:is([href$="spoed.html"],[href$="spoed"]):not(#ee-r)::after{content:'';position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:#fff;pointer-events:none}
html body nav.v34-bar a:is([href$="spoed.html"],[href$="spoed"]):not(#ee-r):focus-visible{outline:2px solid #00639a;outline-offset:2px}
html body nav.v34-bar a:is([href$="spoed.html"],[href$="spoed"]):not(#ee-r):active{filter:brightness(.92)}
@media (hover:hover){html body nav.v34-bar a:is([href$="spoed.html"],[href$="spoed"]):not(#ee-r):hover{filter:brightness(1.08)}}
@media (prefers-reduced-motion:no-preference){
  html body nav.v34-bar a:is([href$="spoed.html"],[href$="spoed"]):not(#ee-r){animation:v40gloed 3.2s ease-out 1.2s 5}
  html body nav.v34-bar a:is([href$="spoed.html"],[href$="spoed"]):not(#ee-r)::after{animation:v40stip 2.4s ease-in-out 1.2s 6}
}
@keyframes v40gloed{0%{box-shadow:0 0 0 0 rgba(216,133,47,.55)}70%,100%{box-shadow:0 0 0 9px rgba(216,133,47,0)}}
@keyframes v40stip{0%,55%,100%{opacity:1}75%{opacity:.35}}
/* 1b. De andere spoedknop op telefoon en tablet: "Storing? Bel 24/7" in de hero (home NL/EN) was een
       doorzichtige omlijnde knop; nu vol in dezelfde spoedkleur met witte tekst. Desktop (≥ 1200 px) blijft. */
@media (max-width:1199px){
  html body .v34-hero a.v34-tl[href^="tel:"]:not(.v34-btn):not(#ee-r){background:#94561a!important;border-color:#94561a!important;color:#fff!important;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 8px 22px rgba(0,0,0,.35);min-height:52px;padding-left:20px!important;padding-right:20px!important}
  html body .v34-hero a.v34-tl[href^="tel:"]:not(.v34-btn):not(#ee-r) *{color:#fff!important}
  html body .v34-hero a.v34-tl[href^="tel:"]:not(.v34-btn):not(#ee-r):focus-visible{outline:2px solid #fff;outline-offset:3px}
}

/* 2. Telefoon (< 768 px): koppen, intro's, knoppen en korte kaarten gecentreerd. Lopende tekst, lijsten,
      FAQ-antwoorden, formuliervelden en tabellen blijven links. Een intro die langer is dan 5 regels
      krijgt van v37.js de klasse .v40-links en blijft dan ook links. */
@media (max-width:767px){
  /* hero: kicker, kop, intro, knoppen en kenmerken */
  html body .v34-hero :is(.v34-kop,.v34-wrap>div:has(>h1)){text-align:center;margin-left:auto;margin-right:auto}
  html body .v34-hero :is(.v34-kop,.v34-wrap>div:has(>h1))>.v34-k{display:flex!important;justify-content:center;text-align:center}
  html body .v34-hero :is(.v34-kop,.v34-wrap>div:has(>h1))>.v34-k::after{content:'';width:22px;height:2px;background:currentColor;flex:0 0 auto}
  html body .v34-hero :is(.v34-kop,.v34-wrap>div:has(>h1))>p:not(#ee-r){text-align:center!important;margin-left:auto;margin-right:auto}
  html body .v34-hero :is(.v34-kop,.v34-wrap>div:has(>h1))>div:has(>a){justify-content:center}
  html body .v34-hero :is(.v34-kop,.v34-wrap>div:has(>h1)) a.v34-tl{justify-content:center}
  html body .v34-hero .v34-feit:not(#ee-r){justify-content:center}
  html body .v34-hero .v34-usps:not(#ee-r){width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;border-top-color:transparent}
  /* sectiekoppen + korte intro (v37 deed dit al tot 620 px; nu tot 768 px, en ook in het storingsblok) */
  html body main section .v34-k:has(+ h2){display:flex!important;justify-content:center;text-align:center;margin-left:auto;margin-right:auto}
  html body main section .v34-k:has(+ h2)::after{content:'';width:22px;height:2px;background:currentColor;flex:0 0 auto}
  html body main section .v34-k + h2{text-align:center;margin-left:auto;margin-right:auto}
  html body main section p.v37-intro:not(#ee-r){text-align:center!important;margin-left:auto!important;margin-right:auto!important}
  html body main section p.v37-intro + a.v34-tl{display:flex!important;justify-content:center;width:fit-content;margin-left:auto;margin-right:auto}
  html body #spoed .v34-spoed>div:first-child>p:not(.v40-links):not(#ee-r){text-align:center!important}
  html body #spoed .v34-spoed a.v34-tl:not(.v34-btn){justify-content:center;width:100%}
  html body main p.v37-hulpkop:not(#ee-r){text-align:center!important}
  /* zakelijk: korte kaarten — icoon en tekst in het midden, pijl blijft rechtsboven */
  html body .v34-bizl a:not(#ee-r){text-align:center}
  html body .v34-bizl a .bz-ico{grid-column:1/-1!important;justify-self:center}
  html body .v34-bizl a .bz-arr{justify-self:end}
  html body .v34-bizl a .bz-t{justify-items:center}
  /* anti-beunhaas */
  html body .ab-kaart .ab-tekst{text-align:center}
  html body .ab-kaart :is(.ab-k,.ab-kop,.ab-lead,.ab-status):not(.v40-links):not(#ee-r){text-align:center!important}
  html body .ab-kaart .ab-k:not(#ee-r){justify-content:center}
  html body .ab-kaart .ab-lead:not(.v40-links){margin-left:auto;margin-right:auto}
  html body .ab-kaart .ab-acties{justify-content:center}
  html body .ab-kaart .ab-cta{width:100%;justify-content:center}
  html body .ab-kaart .ab-status{justify-items:center;text-align:center}
  html body .ab-kaart .ab-haas{justify-self:center;margin-left:auto;margin-right:auto}
  /* afsluitende CTA */
  html body .v34-contact .v34-in>div:first-child{text-align:center}
  /* voet: logo, korte tekst, contact, social, anti-beunhaas-badge en de onderste regel gecentreerd;
     de openingstijdenkaart en de uitklaplijsten houden hun eigen indeling */
  html body footer.v34-voet .v34-fgrid>div:first-child>a:first-child:not(#ee-r){display:flex!important;width:fit-content;margin-left:auto!important;margin-right:auto!important}
  html body footer.v34-voet .v34-fgrid>div:first-child>p:not([class]):not(#ee-r){text-align:center!important;margin-left:auto!important;margin-right:auto!important}
  html body footer.v34-voet .v34-socs:not(#ee-r){justify-content:center}
  html body footer.v34-voet .v34-socs:not(#ee-r)::before{flex-basis:100%!important;margin:0 0 4px!important;text-align:center}
  html body .v37-merken .v34-wrap:not(#ee-r){align-items:center}
  html body footer .ab-bwrap:not(#ee-r){justify-content:center!important;padding-left:18px!important;padding-right:18px!important}
  html body footer .v34-legal:not(#ee-r){justify-content:center;text-align:center}
  html body footer .v34-legal>span:not(#ee-r){justify-content:center;text-align:center;flex-wrap:wrap}
  /* intro's die te lang zijn voor gecentreerd lezen */
  html body :is(.v34-hero,main,footer) p.v40-links:not(#ee-r):not(#ee-q){text-align:left!important;margin-left:0!important;margin-right:0!important}
}

/* 3. Banners uit het CRM (v37.js, blok "v40"). Alleen zichtbaar als het CRM een actieve banner levert. */
/* a. dunne strook boven de voet (slot "strip"): in de pagina, niet vast; wegklikbaar */
html body .v40-strip{background:#eaf0f2;border-top:1px solid #d0dce2;border-bottom:1px solid #d0dce2}
html body .v40-strip-in:not(#ee-r){display:flex;align-items:center;gap:8px;padding-top:4px;padding-bottom:4px}
html body .v40-strip-link{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-height:48px;padding:6px 0;color:#1f1d1a;text-decoration:none;font:600 15px/1.35 'Archivo',sans-serif}
html body .v40-strip-sub{font:400 15px/1.45 'IBM Plex Sans',sans-serif;color:#57514a}
html body .v40-strip-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-left:auto;color:#00639a;font-weight:700;white-space:nowrap}
html body .v40-strip-x{flex:0 0 auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:3px;background:transparent;color:#57514a;font:400 24px/1 'Archivo',sans-serif;cursor:pointer}
html body .v40-strip :is(a,button):focus-visible{outline:2px solid #00639a;outline-offset:2px}
@media (hover:hover){html body a.v40-strip-link:hover .v40-strip-t{text-decoration:underline;text-underline-offset:3px}html body .v40-strip-x:hover{color:#1f1d1a;background:#d0dce2}}
html body .v40-prijs{display:inline-block;padding:3px 8px;border:1px solid #d0dce2;border-radius:3px;background:#fffefa;color:#00639a;font:700 14px/1.25 'Archivo',sans-serif;white-space:nowrap}
/* b. compacte kaart aan het eind van de veelgestelde vragen (slot "faq_kaart") */
html body .v40-faqkaart{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:center;margin-top:28px;padding:18px;background:#fffefa;border:1px solid #e2dcd2;border-radius:6px}
html body .v40-faqkaart.v40-zonder-beeld{grid-template-columns:minmax(0,1fr)}
html body .v40-faqkaart-beeld{position:relative;width:96px;border-radius:4px;overflow:hidden;background:#f0eae1}
html body .v40-faqkaart-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
html body main .v40-faqkaart-titel:not(#ee-r){margin:0;font:700 18px/1.3 'Archivo',sans-serif;color:#1f1d1a}
html body main .v40-faqkaart-sub:not(#ee-r){margin:6px 0 0;font-size:15px;line-height:1.55;color:#57514a}
html body :is(.v40-faqkaart,.v40-promo) .v40-prijs{display:block;width:fit-content}
html body .v40-faqkaart .v40-prijs{margin-top:10px}
html body .v40-faqkaart-cta{margin-top:14px}
@media (max-width:767px){
  html body .v40-strip-link{justify-content:center;text-align:center;padding:8px 0}
  html body .v40-strip-cta{margin-left:0}
  html body .v40-strip-in:not(#ee-r){padding-right:4px}
}
@media (max-width:559px){
  html body .v40-strip-sub{display:none}
  html body .v40-faqkaart:not(#ee-r){grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;padding:20px 18px}
  html body main .v40-faqkaart :is(.v40-faqkaart-titel,.v40-faqkaart-sub):not(#ee-r){text-align:center!important}
  html body .v40-faqkaart-cta{width:100%;justify-content:center}
  html body :is(.v40-faqkaart,.v40-promo) .v40-prijs{margin-left:auto;margin-right:auto}
}
@media print{html body .v40-strip,html body .v40-promo,html body .v40-faqkaart{display:none!important}}
/* c. promokaart tussen de blokken (ruimte ontstaat alleen onder de onderrand van het scherm) */
html body .v40-promo{padding:44px 0}
html body .v40-promo-kaart{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:stretch;background:#fffefa;border:1px solid #e2dcd2;border-radius:6px;overflow:hidden;box-shadow:0 16px 34px -28px rgba(31,16,10,.45)}
html body .v40-promo-kaart.v40-vierkant{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
html body .v40-promo-kaart.v40-zonder-beeld{grid-template-columns:minmax(0,1fr)}
html body .v40-promo-beeld{position:relative;background:#f0eae1;min-height:100%}
html body .v40-promo-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
html body .v40-promo-tekst{align-self:center;padding:34px 40px 36px}
html body .v40-promo-titel{margin:12px 0 0;font:700 clamp(23px,2.2vw,30px)/1.15 'Archivo',sans-serif;letter-spacing:-.02em;color:#1f1d1a}
html body .v40-promo-sub{margin:12px 0 0;font-size:16px;line-height:1.6;color:#57514a;max-width:52ch}
html body .v40-promo .v40-prijs{margin-top:16px;margin-bottom:0;padding:6px 10px;font-size:15px}
html body .v40-promo-cta{margin-top:22px}
html body .v40-pijl{display:inline-block;font-style:normal;line-height:1}
@media (max-width:767px){
  html body .v40-promo{padding:30px 0}
  html body .v40-promo-kaart:not(#ee-r){grid-template-columns:minmax(0,1fr)}
  html body .v40-promo-beeld{min-height:0}
  html body .v40-promo-tekst{padding:22px 20px 24px;text-align:center}
  html body main .v40-promo-tekst p:not(#ee-r){text-align:center!important}
  html body .v40-promo-sub{margin-left:auto;margin-right:auto}
  html body .v40-promo-cta{width:100%}
}
/* 4. Taalmelding ("This page is still being translated", ee-i18n.js) en de chatballon van Zack stonden op de telefoon
      soms over elkaar boven de actiebalk (ook al in v39, afhankelijk van timing). Is de melding er, dan wacht de ballon. */
html:not([data-ee-en-vooraf]) body:has(#ee-taal-melding) .v34-zbal{display:none!important}
/*    Op Engelse pagina's die vooraf vertaald zijn (<html data-ee-en-vooraf>, bv. /en/privacy en /en/voorwaarden) is die
      melding een vals alarm: de tekst staat niet in het woordenboek omdat hij al Engels is. Daar wordt hij niet getoond. */
html[data-ee-en-vooraf] #ee-taal-melding{display:none!important}

/* ── v41 (23-10-2026): laadverschuiving, app-knop, toegankelijkheid — desktop ongewijzigd ─────────── */
/* 1. Laadverschuiving (CLS). De kopbalk is een component met een tijdelijke plaatshouder van 112 px
      (hint-size, desktop: 32 + 80 + 1 px). Op telefoon is de kop 65 px, op tablet 73 px: de inhoud schoof
      dus 47 resp. 39 px omhoog zodra de kop verscheen. De plaatshouder krijgt nu per formaat de echte hoogte.
      (v34-formaat.css en v34-ritme.css staan sinds v41 ook in de <head>, zodat kop, skip-link en actiebalk
      meteen goed staan; de kopbalk voegt zijn eigen kopie nog steeds toe — zelfde URL, uit de cache — zodat
      de volgorde van de stijlregels precies gelijk blijft.) */
@media (max-width:767px){html body .sc-placeholder[title="V34 Kop"]{height:65px!important}}
@media (min-width:768px) and (max-width:1199px){html body .sc-placeholder[title="V34 Kop"]{height:73px!important}}
@media (max-height:500px) and (orientation:landscape) and (pointer:coarse){html body .sc-placeholder[title="V34 Kop"]{height:57px!important}}
@media (min-width:1200px){html body .sc-placeholder[title="V34 Kop"]{height:113px!important}}
/* 2. "Installeer als app" (v37.js, blok v41): knop onderaan de voet en in het menu. Alleen op telefoon en tablet,
      alleen als de browser installeren kan (Android/Chrome) of op iPhone/iPad in Safari (uitleg klapt uit). */
html body .v41-app{display:none}
@media (max-width:1199px){
  html body .v41-app-voet{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:4px;padding-bottom:6px}
  html body .v41-app-menu{display:block;margin-top:6px}
  html body .v41-app-knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid #e2dcd2;border-radius:3px;background:#fffefa;color:#1f1d1a;font:700 13.5px/1 'Archivo',sans-serif;cursor:pointer;transition:border-color .16s,color .16s}
  html body .v41-app-menu .v41-app-knop{width:100%;min-height:50px;font-size:14px}
  html body .v41-app-knop svg{color:#00639a;flex:0 0 auto}
  html body .v41-app-knop:focus-visible{outline:2px solid #00639a;outline-offset:2px}
  html body .v41-app-knop:active{transform:scale(.98)}
  html body .v41-app-knop[aria-expanded="true"]{border-color:#00639a;color:#00639a}
  html body .v41-app-uitleg:not(#ee-r){margin:8px auto 0;max-width:42ch;font:400 13.5px/1.5 'IBM Plex Sans',sans-serif;color:#57514a;text-align:center}
  html body .v41-app-uitleg[hidden]{display:none}
}
@media (hover:hover){html body .v41-app-knop:hover{border-color:#00639a;color:#00639a}}
@media (prefers-reduced-motion:reduce){html body .v41-app-knop{transition:none}html body .v41-app-knop:active{transform:none}}
/* 3. Sluitknop (×) van de Zack-ballon: 46 px in plaats van 44, zodat hij ook tijdens het verschijnen (de ballon
      schaalt 0,35 s van 96 % naar 100 %) nooit onder de 44 px komt. Onzichtbaar verschil: de knop is transparant. */
html body .v37-zb button{width:46px;height:46px;top:-5px;right:-5px}
html body .v37-zb button::before{inset:11px}
/* 4. Tablet (768–1199): de reserve-chatballon van Zack (.v34-zbal uit v34-iconen.js, op pagina's zonder de echte chat,
      bv. /privacy) stond met bottom 34 px over de zwevende actiebalk-pil (bottom 16 + 64 px). Nu erboven. */
@media (min-width:768px) and (max-width:1199px){html body .v34-zbal:not(#ee-r){bottom:100px!important}}

/* ── v43 (23-10-2026): telefoon — kenmerken in de hero over de volle breedte ─────────────────────────────
   Nitien over v41: alles gecentreerd is mooi, alleen de drie kenmerken onder de knoppen ("Eén aanspreekpunt" …)
   stonden als smal blokje in het midden met veel lege ruimte links en rechts. Nu: gelijke kolommen over de
   hele breedte van de knoppen, vinkje boven de tekst, dunne scheidingslijnen. De vinkjesrij op de dienstpagina's
   en de voet blijven bewust zoals in v41 (Nitien vond die zo mooier). Tablet en desktop (≥ 768 px) ongewijzigd. */
@media (max-width:767px){
  html body .v34-hero .v34-usps:not(#ee-r):not(#ee-q){display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:start;width:auto;max-width:none;margin-left:0;margin-right:0;gap:0!important;padding:18px 0 16px;border-top:1px solid rgba(244,241,236,.2)!important}
  html body .v34-hero .v34-usps:not(#ee-r):not(#ee-q)>span:not(.v34-credit){display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;text-align:center;font-size:13px;line-height:1.3;padding:0 6px!important;margin:0!important;text-wrap:balance}
  html body .v34-hero .v34-usps:not(#ee-r):not(#ee-q)>span:not(.v34-credit)+span:not(.v34-credit){border-left:1px solid rgba(195,224,238,.2)!important}

  /* spoedknop in de hero: past de tekst niet op één regel (Engels, smalle telefoons), dan het nummer netjes
     gecentreerd eronder — de knop blijft vol #94561a */
  html body .v34-hero a.v34-tl[href^="tel:"]:not(.v34-btn):not(#ee-r){flex-wrap:wrap;justify-content:center;text-align:center;column-gap:6px;row-gap:2px}
  html body .v34-hero a.v34-tl[href^="tel:"]:not(.v34-btn):not(#ee-r) strong{white-space:nowrap}
}

/* ══ v44 (24-10-2026) — "afdelingen", rustiger kenmerken, nettere kaarten ═══════════════════════════════════
   Nitien: iconen en kleuren van de vakgebieden kunnen beter; elke vakgebied-pagina in dezelfde stijl zodat je
   ziet dat je bij een andere "afdeling" bent; minder vinkjes overal; mooiere kaarten en tariefkaart; het
   vakgebied-menu op /diensten plakte als tekst aan elkaar op de telefoon.
   Alleen bestaande kleuren: de tien vakgebiedkleuren (--acc, uit de pagina zelf) en de huistinten. */

/* 1. Afdeling in de hero: dienst- en vakgebiedpagina's zetten zelf --acc op <main>. Daarvan: een kleurbalk
      boven de hero, kicker en accentwoord in een lichte tint van de vakgebiedkleur. Overal (alle schermen). */
html body main[style*="--acc"] .v34-hero:not(#ee-r){border-top:4px solid var(--acc)}
html body main[style*="--acc"] .v34-hero .v34-k:not(#ee-r){color:color-mix(in srgb,var(--acc) 50%,#fff)!important}
html body main[style*="--acc"] .v34-hero h1 em:not(#ee-r){color:color-mix(in srgb,var(--acc) 40%,#fff)!important}

/* 2. Icoontegels van vakgebieden en diensten: getint in de eigen kleur, ronder, duidelijker */
html body :is(.v34-d .v34-ico,.v34-row .ico,.v34-grp .ico):not(#ee-r){border-radius:12px!important;background:color-mix(in srgb,var(--acc,#00639a) 10%,#fff)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc,#00639a) 22%,transparent);color:var(--acc,#00639a)!important}
html body .v34-grp.donker .tekst .ico:not(#ee-r){background:color-mix(in srgb,var(--acc) 22%,#0c1c2e)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 45%,transparent);color:color-mix(in srgb,var(--acc) 45%,#fff)!important}

/* 3. Kenmerken als labels in plaats van vinkjes: hero-rij van dienstpagina's (.v34-feit) en de punten in de
      vakgebiedkaarten op /diensten. Bolletje in de vakgebiedkleur. */
html body .v34-hero .v34-feit:not(#ee-r):not(#ee-q){gap:8px!important;border-top-color:rgba(244,241,236,.18)}
html body .v34-hero .v34-feit:not(#ee-r):not(#ee-q)>span{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid rgba(244,241,236,.24);border-radius:999px;background:rgba(255,255,255,.06);font:500 13px/1.25 'IBM Plex Sans',sans-serif;color:#f4f1ec}
html body .v34-hero .v34-feit:not(#ee-r):not(#ee-q)>span::before{content:''!important;flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--acc,#c3e0ee) 45%,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc,#c3e0ee) 30%,transparent)}
html body .v34-grp .v34-usps:not(#ee-r):not(#ee-q){display:flex!important;flex-wrap:wrap;gap:8px!important;flex-direction:row!important}
html body .v34-grp .v34-usps:not(#ee-r):not(#ee-q)>span{display:inline-flex!important;align-items:center;gap:8px;margin:0!important;padding:6px 12px!important;border:1px solid #e2dcd2!important;border-radius:999px;background:#fffefa;font:500 13px/1.25 'IBM Plex Sans',sans-serif;color:#1f1d1a}
html body .v34-grp .v34-usps:not(#ee-r):not(#ee-q)>span::before{content:''!important;flex:0 0 7px;width:7px!important;height:7px!important;border-radius:50%;background:var(--acc)!important;-webkit-mask:none!important;mask:none!important}
html body .v34-grp.donker .v34-usps:not(#ee-r):not(#ee-q)>span{border-color:rgba(244,241,236,.24)!important;background:rgba(255,255,255,.06);color:#f4f1ec}
html body .v34-grp.donker .v34-usps:not(#ee-r):not(#ee-q)>span::before{background:color-mix(in srgb,var(--acc) 45%,#fff)!important}

/* 4. Vakgebied-filter op /diensten: echte labels die je opzij veegt, nooit tekst op tekst */
@media (max-width:1199px){
  html body .v34-chips:not(#ee-r):not(#ee-q){display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:8px!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 18px!important;margin-left:-18px!important;margin-right:-18px!important;scroll-padding-left:18px}
  html body .v34-chips:not(#ee-r):not(#ee-q)::-webkit-scrollbar{display:none}
  html body .v34-chips:not(#ee-r):not(#ee-q)>span{flex:0 0 auto;margin-right:2px}
}
html body .v34-chips:not(#ee-r):not(#ee-q) button.v34-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-height:42px!important;padding:0 16px!important;border:1px solid #e2dcd2!important;border-radius:999px!important;background:#fff!important;color:#1f1d1a!important;font:600 14px/1 'Archivo',sans-serif!important;letter-spacing:0;box-shadow:none}
html body .v34-chips:not(#ee-r):not(#ee-q) button.v34-chip *{white-space:nowrap}
html body .v34-chips:not(#ee-r):not(#ee-q) button.v34-chip .dot{flex:0 0 8px;width:8px!important;height:8px!important;border-radius:50%!important;background:var(--acc)!important;margin:0!important}
html body .v34-chips:not(#ee-r):not(#ee-q) button.v34-chip[aria-pressed="true"]{background:var(--acc)!important;border-color:var(--acc)!important;color:#fff!important}
html body .v34-chips:not(#ee-r):not(#ee-q) button.v34-chip[aria-pressed="true"] .dot{background:#fff!important}
@media (hover:hover){html body .v34-chips:not(#ee-r):not(#ee-q) button.v34-chip:not([aria-pressed="true"]):hover{border-color:var(--acc)!important}}

/* 5. Vakgebiedkaarten op /diensten (telefoon): één kolom over de volle breedte, alles in het midden,
      knop over de hele breedte — geen tekst meer in een smal kolommetje */
@media (max-width:767px){
  html body .v34-grp .v34-grpk:not(#ee-r):not(#ee-q){grid-template-columns:1fr!important}
  html body .v34-grp .v34-grpk>.tekst:not(#ee-r){padding:24px 18px 22px!important;text-align:center;align-items:center}
  html body .v34-grp .v34-grpk>.tekst>div:first-child:not(#ee-r){flex-direction:column;gap:12px!important;align-items:center;text-align:center}
  html body .v34-grp .v34-grpk>.tekst .ico:not(#ee-r){width:52px!important;height:52px!important;display:grid;place-items:center}
  html body .v34-grp .v34-grpk>.tekst .v34-k:not(#ee-r){justify-content:center!important;text-align:center}
  html body .v34-grp .v34-grpk>.tekst h2:not(#ee-r){text-align:center;text-wrap:balance}
  html body .v34-grp .v34-grpk>.tekst p.intro:not(#ee-r){text-align:center!important;margin-left:auto;margin-right:auto}
  html body .v34-grp .v34-usps:not(#ee-r):not(#ee-q){justify-content:center}
  html body .v34-grp .acties:not(#ee-r){display:flex!important;flex-direction:column;align-items:stretch;gap:12px!important;width:100%}
  html body .v34-grp .acties .v34-btn:not(#ee-r){width:100%!important;justify-content:center;white-space:nowrap}
  html body .v34-grp .acties .v34-tl:not(#ee-r){justify-content:center;white-space:nowrap}
}

/* 6. Kenmerken onder de knoppen op home: per punt een eigen icoon in plaats van overal een vinkje
      (persoon = één aanspreekpunt, document = heldere begroting, sleutel = oplevering). Ook EN. */
html body .v34-hero .v34-usps>span:not(.v34-credit):nth-child(1)::before{background:rgba(195,224,238,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c3e0ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 21a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E") center/58% no-repeat!important}
html body .v34-hero .v34-usps>span:not(.v34-credit):nth-child(2)::before{background:rgba(195,224,238,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c3e0ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5M10 13h6M10 17h4'/%3E%3C/svg%3E") center/58% no-repeat!important}
html body .v34-hero .v34-usps>span:not(.v34-credit):nth-child(3)::before{background:rgba(195,224,238,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c3e0ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m10.9 12.1 9.1-9.1M16.5 6.5l3 3M14 9l2 2'/%3E%3C/svg%3E") center/58% no-repeat!important}
@media (max-width:767px){
  html body .v34-hero .v34-usps>span:not(.v34-credit)::before{flex:0 0 30px!important;width:30px!important;height:30px!important}
}

/* 7. Spoedknop in de hero (telefoon/tablet): telefoon-icoon ervoor, nog duidelijker een knop */
@media (max-width:1199px){
  html body .v34-hero a.v34-tl[href^="tel:"]:not(.v34-btn):not(#ee-r){background:#94561a url("data:image/svg+xml,%3Csvg fill='%23ffffff' xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M795-120q-116 0-236.5-56T335-335Q232-438 176-558.5T120-795q0-19.29 12.86-32.14Q145.71-840 165-840h140q14 0 24 10t14 25l26.93 125.64Q372-665 369.5-653.5t-10.73 19.73L259-533q26 44 55 82t64 72q37 38 78 69.5t86 55.5l95-98q10-11 23.15-15 13.15-4 25.85-2l119 26q15 4 25 16.04 10 12.05 10 26.96v135q0 19.29-12.86 32.14Q814.29-120 795-120ZM229-588l81-82-23-110H180q2 42 13.5 88.5T229-588Zm369 363q41 19 89 31t93 14v-107l-103-21-79 83ZM229-588Zm369 363Z'/%3E%3C/svg%3E") 16px center/20px no-repeat!important;padding-left:46px!important}
}

/* 8. Tariefkaart (overdag / avond & weekend): twee tegels naast elkaar, de tegel van NU uitgelicht,
      een duidelijke tijdbalk en de voorrijkosten eronder. Dag = zandtint, avond = navy (zoals het was). */
html body .v34-tar:not(#ee-r):not(#ee-q){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:16px!important;border-radius:16px!important}
html body .v34-tar:not(#ee-r):not(#ee-q)>div{padding:0}
html body .v34-tar:not(#ee-r):not(#ee-q) .trk{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:2px 2px 4px}
html body .v34-tar:not(#ee-r):not(#ee-q) .trtijd{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;background:rgba(216,133,47,.12);font-variant-numeric:tabular-nums}
html body .v34-tar:not(#ee-r):not(#ee-q) .trtijd::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
html body .v34-tar:not(#ee-r):not(#ee-q) .trr{position:relative;display:flex!important;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;margin:0!important;padding:14px!important;border:1px solid #e2dacd;border-radius:12px!important;background:rgba(255,255,255,.55)!important;opacity:1!important;flex-wrap:nowrap!important;row-gap:10px}
html body .v34-tar:not(#ee-r):not(#ee-q) .trr::before{display:none!important}
html body .v34-tar:not(#ee-r):not(#ee-q) .trr:not(.is-nu) :is(.trl,strong){opacity:.72}
html body .v34-tar:not(#ee-r):not(#ee-q) .trr.is-nu{border-color:#aa6620;background:rgba(216,133,47,.08)!important;box-shadow:0 6px 18px rgba(170,102,32,.12)}
html body .v34-tar:not(#ee-r):not(#ee-q) .trr .trl{flex:0 0 auto!important;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding-right:0}
html body .v34-tar:not(#ee-r):not(#ee-q) .trr .trl small{display:block;font-size:12.5px!important;line-height:1.3}
html body .v34-tar:not(#ee-r):not(#ee-q) .trr strong{margin:auto 0 0 0!important;text-align:left!important;white-space:normal!important;font-size:21px}
html body .v34-tar:not(#ee-r):not(#ee-q) .trr.is-nu{padding-top:42px!important}
html body .v34-tar:not(#ee-r):not(#ee-q) .trr.is-nu strong::before{position:absolute;top:13px;left:14px;margin:0!important}
html body .v34-tar:not(#ee-r):not(#ee-q) .trr .trl small{white-space:normal}
html body .v34-tar:not(#ee-r):not(#ee-q) .trr strong.ee-bedrag-leeg{flex:0 0 auto!important;width:100%;font-size:14px}
html body .v34-tar:not(#ee-r):not(#ee-q) .trr strong.ee-bedrag-leeg .ee-bedrag-bel{min-height:40px;padding:0!important;font-size:13.5px!important;font-weight:600}
html body .v34-tar:not(#ee-r):not(#ee-q) .trbaan{grid-column:1/-1;height:8px!important;border-radius:4px!important;margin:12px 6px 26px!important}
html body .v34-tar:not(#ee-r):not(#ee-q) .trdag{border-radius:4px!important;opacity:1!important}
html body .v34-tar:not(#ee-r):not(#ee-q) .trnu-m{top:-5px!important;width:18px!important;height:18px!important;border-radius:50%;transform:translateX(-9px)!important;border:3px solid #fffefa;box-sizing:border-box}
html body .v34-tar:not(#ee-r):not(#ee-q) .trx{top:16px!important}
html body .v34-tar:not(#ee-r):not(#ee-q) .trv{grid-column:1/-1;padding:12px 2px 0!important}
html body .v34-tar.is-avond:not(#ee-r):not(#ee-q) .trr{border-color:#24405a;background:rgba(255,255,255,.03)!important}
html body .v34-tar.is-avond:not(#ee-r):not(#ee-q) .trr.is-nu{border-color:#e9b77a;background:rgba(233,183,122,.08)!important;box-shadow:0 6px 18px rgba(0,0,0,.25)}
html body .v34-tar.is-avond:not(#ee-r):not(#ee-q) .trtijd{background:rgba(233,183,122,.12)}
html body .v34-tar.is-avond:not(#ee-r):not(#ee-q) .trnu-m{border-color:#13263a}
html body .v34-tar.is-avond:not(#ee-r):not(#ee-q) .ee-bedrag-bel{color:#e9b77a!important}
/* 9. /diensten: hero net als de rest gecentreerd op de telefoon, kenmerken als labels; label "Vakgebied"
      weg op de telefoon zodat de eerste knoppen direct zichtbaar zijn */
html body .v34-hero .v34-hero-feiten:not(#ee-r){display:flex;flex-wrap:wrap;gap:8px}
html body .v34-hero .v34-hero-feiten:not(#ee-r)>span{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid rgba(244,241,236,.24);border-radius:999px;background:rgba(255,255,255,.06);font:500 13px/1.25 'IBM Plex Sans',sans-serif;color:#f4f1ec;margin:0!important}
html body .v34-hero .v34-hero-feiten:not(#ee-r)>span::before{content:''!important;flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:#c3e0ee;box-shadow:0 0 0 3px rgba(195,224,238,.25);-webkit-mask:none!important;mask:none!important}
@media (max-width:767px){
  html body .v34-hero .v34-wrap:has(>h1):not(#ee-r){text-align:center}
  html body .v34-hero .v34-wrap:has(>h1)>.v34-k:not(#ee-r){display:flex!important;justify-content:center;align-items:center;gap:12px}
  html body .v34-hero .v34-wrap:has(>h1)>.v34-k:not(#ee-r)::after{content:'';width:22px;height:2px;background:currentColor;flex:0 0 auto}
  html body .v34-hero .v34-wrap:has(>h1)>h1:not(#ee-r){margin-left:auto!important;margin-right:auto!important;text-wrap:balance}
  html body .v34-hero .v34-wrap:has(>h1)>p:not(#ee-r){margin-left:auto!important;margin-right:auto!important;text-align:center!important}
  html body .v34-hero .v34-hero-feiten:not(#ee-r){justify-content:center}
  html body .v34-chips:not(#ee-r):not(#ee-q)>span{display:none!important}
}

/* ══ v45 (24-10-2026) — kenmerk-labels met een icoon dat past bij de tekst ══════════════════════════════════
   Nitien: "dat vinkje of puntje moet echt wat anders zijn wat toepasselijk is voor wat erachter staat".
   v37.js zet per label data-v44i (euro, keurmerk, rapport, klok, pin, helm, …); hier staat per naam het icoon
   als masker, getekend in de vakgebiedkleur (op donker een lichte tint). Zonder passend woord: bolletje (v44). */
html body .v34-hero .v34-feit:not(#ee-r):not(#ee-q)>span[data-v44i]::before,
html body .v34-grp .v34-usps:not(#ee-r):not(#ee-q)>span[data-v44i]::before,
html body .v34-hero .v34-hero-feiten:not(#ee-r)>span[data-v44i]::before{content:''!important;flex:0 0 16px!important;width:16px!important;height:16px!important;border-radius:0!important;box-shadow:none!important;-webkit-mask:var(--v44m) center/contain no-repeat!important;mask:var(--v44m) center/contain no-repeat!important}
html body .v34-hero .v34-feit:not(#ee-r):not(#ee-q)>span[data-v44i],
html body .v34-grp .v34-usps:not(#ee-r):not(#ee-q)>span[data-v44i],
html body .v34-hero .v34-hero-feiten:not(#ee-r)>span[data-v44i]{padding-left:11px!important;gap:7px!important}
html body .v34-grp:not(.donker) .v34-usps:not(#ee-r):not(#ee-q)>span[data-v44i]::before{background:var(--acc)!important}
/* lijsten met iconen (v37.js zet data-v45l alleen als élk punt een passend icoon heeft) */
html body #waarom ul[data-v45l] li>span[data-v44i]{flex:0 0 22px;width:22px;height:22px;margin-top:1px;font-size:0!important;color:transparent!important;background:#1f8a5b;-webkit-mask:var(--v44m) center/contain no-repeat;mask:var(--v44m) center/contain no-repeat}
html body :is(ul.v34-lijst,ul.tf-regels)[data-v45l] li[data-v44i]::before{content:''!important;justify-self:center;width:22px;height:22px;margin-top:1px;font-size:0;background:var(--acc,#00639a);-webkit-mask:var(--v44m) center/contain no-repeat;mask:var(--v44m) center/contain no-repeat}

/* v46 (24-10-2026) — iconen uit Material Symbols (Google, Apache 2.0) i.p.v. zelf getekend; ook de drie
   kenmerken op home (aanspreekpunt, begroting, oplevering) en het telefoon-icoon in de spoedknop. */
html body .v34-hero .v34-usps:not(#ee-r)>span:not(.v34-credit)[data-v44i]::before{background:#c3e0ee!important;border-radius:0!important;box-shadow:none!important;-webkit-mask:var(--v44m) center/contain no-repeat!important;mask:var(--v44m) center/contain no-repeat!important;flex:0 0 20px!important;width:20px!important;height:20px!important}
@media (max-width:767px){html body .v34-hero .v34-usps:not(#ee-r)>span:not(.v34-credit)[data-v44i]::before{flex:0 0 26px!important;width:26px!important;height:26px!important}}
html body .v34-hero .v34-feit:not(#ee-r):not(#ee-q)>span[data-v44i]::before,
html body .v34-grp .v34-usps:not(#ee-r):not(#ee-q)>span[data-v44i]::before,
html body .v34-hero .v34-hero-feiten:not(#ee-r)>span[data-v44i]::before{flex:0 0 18px!important;width:18px!important;height:18px!important}
html body :is(ul.v34-lijst,ul.tf-regels)[data-v45l] li[data-v44i]::before{width:24px;height:24px;margin-top:0}

/* v47 (24-10-2026) — iconen in de lijsten duidelijker: elk icoon in een eigen getinte tegel (vakgebiedkleur),
   zoals bij grote dienstverleners; het icoon zelf blijft Material Symbols. */
html body :is(ul.v34-lijst,ul.tf-regels)[data-v45l] li[data-v44i]{position:relative;grid-template-columns:40px 1fr!important;column-gap:14px}
html body :is(ul.v34-lijst,ul.tf-regels)[data-v45l] li[data-v44i]::before{width:40px!important;height:40px!important;margin-top:-2px!important;border-radius:11px;background:color-mix(in srgb,var(--acc,#00639a) 11%,#fff)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc,#00639a) 20%,transparent);-webkit-mask:none!important;mask:none!important}
html body :is(ul.v34-lijst,ul.tf-regels)[data-v45l] li[data-v44i]::after{content:'';position:absolute;left:9px;top:23px;width:22px;height:22px;background:var(--acc,#00639a);-webkit-mask:var(--v44m) center/contain no-repeat;mask:var(--v44m) center/contain no-repeat;pointer-events:none}
html body #waarom ul[data-v45l] li>span[data-v44i]{flex:0 0 34px!important;width:34px!important;height:34px!important;margin-top:-5px;border-radius:10px;background:color-mix(in srgb,#1f8a5b 12%,#fff)!important;-webkit-mask:none!important;mask:none!important;position:relative}
html body #waarom ul[data-v45l] li>span[data-v44i]::after{content:'';position:absolute;inset:7px;background:#1f8a5b;-webkit-mask:var(--v44m) center/contain no-repeat;mask:var(--v44m) center/contain no-repeat}

/* ══ v48 (24-10-2026) — iPhone gelijk aan Android, iconen met een eigen "plint", rustige animaties ══════════════
   Nitien (video's iPhone en Android): op de iPhone moet alles er net zo goed uitzien. Gevonden:
   · ↗ werd op de iPhone een blauw emoji-vierkantje (Safari valt terug op Apple Color Emoji) → alle pijltjes zijn
     nu een Material-icoon als masker, overal gelijk;
   · Safari maakt van telefoonnummers in tekst zelf een blauwe, onderstreepte link → die nemen nu de tekststijl over;
   · invoervelden < 16 px laten de iPhone inzoomen → op aanraakschermen 16 px.
   Iconen: in de lijsten gevuld (duidelijker) op een getinte tegel met een "plint" in de vakgebiedkleur — een
   eigen Expert Exact-detail, zoals een sokkel onder een gevel. */
html body .v37-pi[data-r]{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.17em;overflow:hidden;text-indent:200%;white-space:nowrap;background-color:currentColor;-webkit-mask:var(--v48p) center/contain no-repeat;mask:var(--v48p) center/contain no-repeat}
html body a[x-apple-data-detectors]{color:inherit!important;text-decoration:inherit!important;font:inherit!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (pointer:coarse){html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){font-size:16px!important}}

/* icoontegels in lijsten: gevuld icoon + plint */
html body :is(ul.v34-lijst,ul.tf-regels)[data-v45l] li[data-v44i]::before{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc,#00639a) 18%,transparent),inset 0 -3px 0 color-mix(in srgb,var(--acc,#00639a) 70%,transparent)!important}
html body :is(ul.v34-lijst,ul.tf-regels)[data-v45l] li[data-v44i]::after{-webkit-mask-image:var(--v44f,var(--v44m))!important;mask-image:var(--v44f,var(--v44m))!important;top:22px}
html body #waarom ul[data-v45l] li>span[data-v44i]{box-shadow:inset 0 -3px 0 rgba(31,138,91,.7)}
html body #waarom ul[data-v45l] li>span[data-v44i]::after{-webkit-mask-image:var(--v44f,var(--v44m))!important;mask-image:var(--v44f,var(--v44m))!important;inset:7px 7px 9px 7px}
/* vakgebied- en dienstregels: dezelfde plint */
html body :is(.v34-d .v34-ico,.v34-row .ico,.v34-grp .tekst .ico):not(#ee-r){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc,#00639a) 20%,transparent),inset 0 -3px 0 color-mix(in srgb,var(--acc,#00639a) 70%,transparent)!important}

/* animatie: tegels "landen" zodra ze in beeld komen (v37.js zet .v48-in); niet bij verminderde beweging */
@media (prefers-reduced-motion:no-preference){
  html body :is(ul.v34-lijst,ul.tf-regels)[data-v45l] li[data-v44i]:not(.v48-in)::before,
  html body :is(ul.v34-lijst,ul.tf-regels)[data-v45l] li[data-v44i]:not(.v48-in)::after{opacity:0;transform:translateY(6px) scale(.85)}
  html body :is(ul.v34-lijst,ul.tf-regels)[data-v45l] li[data-v44i]::before,
  html body :is(ul.v34-lijst,ul.tf-regels)[data-v45l] li[data-v44i]::after{transition:opacity .45s var(--v37-ease,ease),transform .55s cubic-bezier(.2,1.4,.4,1);transition-delay:calc(var(--v48i,0) * 70ms)}
  html body .v34-hero :is(.v34-feit,.v34-hero-feiten)>span[data-v44i]{animation:v48label .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.25s + var(--v48i,0) * 80ms)}
  @keyframes v48label{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @media (hover:hover){html body :is(ul.v34-lijst,ul.tf-regels)[data-v45l] li[data-v44i]:hover::after{transform:translateY(-2px)}}
}

/* ── v49 (25-10-2026): "Nu in uitvoering" + projecttijdlijn (v37.js blok v49) ──────────────────────────── */
html body .v49i{display:inline-block;flex:none;width:1em;height:1em;background:currentColor;-webkit-mask:var(--v49m) center/contain no-repeat;mask:var(--v49m) center/contain no-repeat;vertical-align:-.14em}
html body .v49-lopend{background:#faf8f4;border-top:1px solid #e2dcd2}
html body .v49-wrap{padding-top:52px;padding-bottom:52px}
html body .v49-kop{max-width:640px;margin-bottom:26px}
html body .v49-k{display:inline-flex;align-items:center;gap:8px;color:#94561a}
html body .v49-h{margin:14px 0 0;font:700 clamp(28px,3vw,36px)/1.14 'Archivo',sans-serif;letter-spacing:-.02em;color:#1f1d1a}
html body .v49-h em{font-style:italic;color:#94561a}
html body .v49-lead{margin:12px 0 0;font-size:16px;line-height:1.6;color:#57514a;max-width:56ch}
html body .v49-puls{position:relative;display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:#d9822b}
html body .v49-puls::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #d9822b;opacity:0}
@media (prefers-reduced-motion:no-preference){
  html body .v49-puls::after{animation:v49puls 1.8s cubic-bezier(.2,.6,.3,1) infinite}
  @keyframes v49puls{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}
  html body .v49-kaart{animation:v49in .55s cubic-bezier(.2,.8,.2,1) backwards}
  html body .v49-kaart:nth-child(2){animation-delay:.07s}html body .v49-kaart:nth-child(3){animation-delay:.14s}html body .v49-kaart:nth-child(n+4){animation-delay:.2s}
  @keyframes v49in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  html body .v49-kaart-beeld img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
  html body .v49-kaart:hover .v49-kaart-beeld img{transform:scale(1.04)}
  html body .v49-dlg.v49-open .v49-dlg-vel{animation:v49op .38s cubic-bezier(.2,.9,.25,1) both}
  @keyframes v49op{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
}
html body .v49-strook{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
html body .v49-kaart{position:relative;min-width:0;display:flex;flex-direction:column;background:#fffefa;border:1px solid #e2dcd2;border-radius:6px;overflow:hidden;box-shadow:0 16px 34px -28px rgba(31,16,10,.45);transition:border-color .2s,box-shadow .2s,transform .2s;cursor:pointer}
html body .v49-kaart-knop{all:unset;cursor:pointer;color:inherit;font:inherit}
html body .v49-kaart-knop::after{content:"";position:absolute;inset:0;z-index:1;border-radius:6px}
html body .v49-kaart:hover{border-color:color-mix(in srgb,var(--acc) 45%,#e2dcd2);box-shadow:0 22px 40px -26px rgba(31,16,10,.5)}
html body .v49-kaart:has(.v49-kaart-knop:focus-visible){outline:3px solid var(--acc);outline-offset:3px}
html body .v49-kaart:active{transform:scale(.99)}
html body .v49-kaart-beeld{position:relative;aspect-ratio:4/3;background:#f0eae1;overflow:hidden}
html body .v49-kaart-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
html body .v49-kaart-beeld.v49-geen{display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 12%,#fffefa);color:var(--acc)}
html body .v49-groot{width:56px;height:56px;opacity:.85}
html body .v49-badge{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:rgba(255,254,250,.95);box-shadow:0 4px 14px -6px rgba(31,16,10,.35);font:700 12.5px/1 'IBM Plex Sans',sans-serif;letter-spacing:.01em;white-space:nowrap;color:#1f1d1a}
html body .v49-badge .v49i{font-size:15px}
html body .v49-badge.v49-uit{color:#7a4511}html body .v49-badge.v49-bin{color:#00639a}html body .v49-badge.v49-opg{color:#1e6b46}
html body .v49-fototel{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;background:rgba(31,29,26,.72);color:#fff;font:600 12px/1 'IBM Plex Sans',sans-serif}
html body .v49-fototel .v49i{font-size:14px}
html body .v49-kaart-tekst{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;flex:1}
html body .v49-disc{font:700 12px/1.2 'IBM Plex Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
html body .v49-kaart-titel{margin:0;font:700 19px/1.25 'Archivo',sans-serif;letter-spacing:-.02em;color:#1f1d1a}
html body .v49-meta{margin:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;line-height:1.35;color:#57514a}
html body .v49-plaats{display:inline-flex;align-items:center;gap:5px;min-width:0}
html body .v49-plaats .v49i{font-size:16px;color:var(--acc)}
html body .v49-laatste{margin:2px 0 0;font-size:15px;line-height:1.45;color:#3f3a33;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html body .v49-volg{margin-top:auto;padding-top:8px;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font:700 15px/1.2 'IBM Plex Sans',sans-serif;color:var(--acc)}
html body .v49-aantal{font-weight:600;font-size:13px;color:#57514a;padding:3px 8px;border-radius:999px;background:#f0eae1}
html body .v49-volg .v37-pi{margin-left:auto}
html body .v49-solo{grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){
  html body .v49-solo .v49-kaart{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  html body .v49-solo .v49-kaart-beeld{aspect-ratio:auto;min-height:300px}
  html body .v49-solo .v49-kaart-tekst{padding:32px 36px;justify-content:center}
  html body .v49-solo .v49-kaart-titel{font-size:clamp(22px,2.2vw,28px)}
}
/* telefoon: één veegstrook, kaart ~82 % breed, de volgende kaart piept erachter; aan het eind volledig in beeld */
@media (max-width:767px){
  html body .v49-wrap{padding-top:36px;padding-bottom:38px}
  html body .v49-kop{text-align:center;margin-left:auto;margin-right:auto;margin-bottom:20px}
  html body main .v49-kop p:not(#ee-r){text-align:center!important;margin-left:auto;margin-right:auto}
  html body .v49-strook:not(.v49-solo){display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:18px;margin:0 -18px;padding:4px 18px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  html body .v49-strook::-webkit-scrollbar{display:none}
  html body .v49-strook:not(.v49-solo)::after{content:"";flex:0 0 4px}
  html body .v49-strook:not(.v49-solo) .v49-kaart{flex:0 0 min(82%,330px);scroll-snap-align:start}
  html body .v49-strook:not(.v49-solo) .v49-kaart:last-of-type{scroll-snap-align:end}
  html body .v49-kaart-tekst{padding:16px 16px 18px}
  html body .v49-kaart-titel{font-size:18px}
}
/* de tijdlijn: telefoon = blad van onderen, groter scherm = paneel in het midden */
html.v49-vast,html.v49-vast body{overflow:hidden}
html body .v49-dlg{position:fixed;inset:0;z-index:2147483000;margin:0;padding:0;border:0;width:100%;max-width:none;height:100%;max-height:none;background:transparent;display:none;align-items:flex-end;justify-content:center;color:#1f1d1a}
html body .v49-dlg[open],html body .v49-dlg.v49-open{display:flex}
html body .v49-dlg:not(dialog).v49-open{background:rgba(31,29,26,.55)}
html body .v49-dlg::backdrop{background:rgba(31,29,26,.55)}
html body .v49-dlg-vel:focus{outline:none}
html body .v49-dlg-vel{position:relative;box-sizing:border-box;width:100%;max-width:720px;max-height:min(92dvh,100%);overflow-y:auto;overscroll-behavior:contain;background:#fffefa;border-radius:16px 16px 0 0;padding:16px 20px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -20px 50px -20px rgba(31,16,10,.4)}
@media (min-width:768px){
  html body .v49-dlg{align-items:center;padding:4vh 24px}
  html body .v49-dlg-vel{border-radius:10px;padding:26px 34px 32px;max-height:88vh}
}
html body .v49-dlg-kop{position:sticky;top:-16px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-16px -20px 6px;padding:14px 12px 10px 20px;background:linear-gradient(#fffefa 78%,rgba(255,254,250,0))}
@media (min-width:768px){html body .v49-dlg-kop{top:-26px;margin:-26px -34px 6px;padding:20px 22px 10px 34px}}
html body .v49-dlg-kop .v49-badge{position:static;box-shadow:none;background:color-mix(in srgb,var(--acc) 10%,#fffefa);border:1px solid color-mix(in srgb,var(--acc) 22%,#e2dcd2)}
html body .v49-dlg-x{all:unset;box-sizing:border-box;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#3f3a33;background:#f0eae1;font-size:22px}
html body .v49-dlg-x:hover{background:#e7dfd3}html body .v49-dlg-x:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
html body .v49-dlg-titel{margin:4px 0 0;font:700 clamp(24px,3vw,32px)/1.15 'Archivo',sans-serif;letter-spacing:-.02em}
html body .v49-dlg .v49-meta{margin-top:10px}
html body .v49-dlg-sam{margin:14px 0 0;font-size:16px;line-height:1.6;color:#3f3a33}
html body .v49-leeg{margin:20px 0 0;padding:14px 16px;border-radius:6px;background:#f6f2eb;color:#57514a;font-size:15px}
html body .v49-tl{list-style:none;margin:26px 0 0;padding:0;position:relative}
html body .v49-tl::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--acc),#e2dcd2 40%)}
html body .v49-tl-item{position:relative;padding:0 0 26px 34px}
html body .v49-tl-item:last-child{padding-bottom:4px}
html body .v49-tl-dot{position:absolute;left:1px;top:3px;width:16px;height:16px;border-radius:50%;background:#fffefa;border:3px solid var(--acc);box-sizing:border-box}
html body .v49-tl-nieuw .v49-tl-dot{background:var(--acc);box-shadow:0 0 0 5px color-mix(in srgb,var(--acc) 18%,transparent)}
html body .v49-tl-datum{display:block;font:700 12.5px/1.2 'IBM Plex Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}
html body .v49-tl-titel{margin:6px 0 0;font:700 18px/1.3 'Archivo',sans-serif;letter-spacing:-.01em;color:#1f1d1a}
html body .v49-tl-tekst{margin:6px 0 0;font-size:15.5px;line-height:1.6;color:#3f3a33;white-space:pre-line}
html body .v49-tl-fotos{margin-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
html body .v49-tl-fotos.v49-een{grid-template-columns:minmax(0,1fr)}
@media (max-width:479px){html body .v49-tl-fotos:not(.v49-een){grid-template-columns:repeat(2,minmax(0,1fr))}html body .v49-tl-fotos>.v49-tl-foto:first-child:nth-last-child(odd){grid-column:1/-1;aspect-ratio:16/10}}
@media (min-width:480px){html body .v49-tl-fotos>.v49-tl-foto:first-child:nth-last-child(2){grid-column:span 1}html body .v49-tl-fotos:has(>.v49-tl-foto:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
html body .v49-tl-foto{all:unset;box-sizing:border-box;display:block;position:relative;aspect-ratio:4/3;border-radius:5px;overflow:hidden;background:#f0eae1;cursor:zoom-in}
html body .v49-een .v49-tl-foto{aspect-ratio:16/10}
html body .v49-tl-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
html body .v49-tl-foto:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
html body .v49-dlg-voet{margin-top:26px;padding-top:20px;border-top:1px solid #e2dcd2;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
html body .v49-dlg-cta{margin:0;flex:1 1 100%;font:700 17px/1.3 'Archivo',sans-serif}
html body .v49-dlg-knop{flex:1 1 0;min-width:0;justify-content:center}
html body .v49-deel{all:unset;box-sizing:border-box;min-height:48px;padding:0 18px;border-radius:4px;border:1px solid #cfc6b8;display:inline-flex;align-items:center;justify-content:center;font:600 15px/1 'IBM Plex Sans',sans-serif;color:#3f3a33;cursor:pointer;white-space:nowrap}
html body .v49-deel:hover{border-color:#a89e8f}html body .v49-deel:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
html body .v49-lb{position:fixed;inset:0;z-index:2147483001;background:rgba(17,16,14,.94);display:flex;align-items:center;justify-content:center;padding:56px 12px calc(56px + env(safe-area-inset-bottom))}
html body .v49-lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px}
html body :is(.v49-lb-x,.v49-lb-v,.v49-lb-n){all:unset;box-sizing:border-box;position:absolute;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;font-size:26px;cursor:pointer}
html body .v49-lb-x{top:calc(10px + env(safe-area-inset-top));right:10px}
html body .v49-lb-v{left:10px;top:50%;transform:translateY(-50%)}html body .v49-lb-n{right:10px;top:50%;transform:translateY(-50%)}
html body .v49-lb-tel{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);color:#fff;font:600 14px/1 'IBM Plex Sans',sans-serif;opacity:.85}
@media print{html body .v49-lopend,html body .v49-dlg{display:none!important}}

/* ── v49: tekst netjes op elk scherm (Nitien: "zinnen die per regel niet mooi afbreken", "tekst buiten de knop",
      "in een horizontaal menu zie je net niet de laatste letters") ──
   · koppen en knoppen: gelijk verdeelde regels (geen kop met één los woord eronder);
   · lopende tekst: geen weeswoord op de laatste regel; lange woorden breken binnen hun vak af;
   · text-wrap-style i.p.v. de verkorting text-wrap: die zou ook de wrap-modus zetten en `nowrap` overschrijven. */
@supports (text-wrap-style:balance){
  html body :where(h1,h2,h3,h4,.v34-k,.v34-btn,button,summary,figcaption,blockquote){text-wrap-style:balance}
  html body :where(p,li,dd,td,label){text-wrap-style:pretty}
}
@supports not (text-wrap-style:balance){html body :where(h1,h2,h3,h4){text-wrap:balance}}
html body :where(h1,h2,h3,h4,p,li,a,button,summary,label){overflow-wrap:break-word}

/* ── v50 (26-10-2026): iPhone — merkencarrousel schuift met scrollLeft (v37.js) en is te vegen ── */
html body .v37-merken .v37-band::-webkit-scrollbar{display:none}
html body .v37-merken .v37-rail.v37-loopt{animation:none!important}
html body .v41-ios-icoon{font-size:18px;margin:0 3px;vertical-align:-.2em}
html body .v41-app-knop .v41-ios-icoon{margin:0}
html body .v49-deel{gap:8px}html body .v49-deel .v49i{font-size:18px}
/* v50: terugval voor browsers zonder color-mix() (Safari < 16.2): een declaratie met color-mix(var(...)) maakt de
   eigenschap daar ongeldig bij berekenen (dan geen achtergrond/rand). Hier dezelfde regels met een vaste kleur. */
@supports not (color:color-mix(in srgb,red,red)){
html body .v34-route>svg{background:#fffefa}
html body .v34-route .v34-arr{border:1px solid transparent}
@media (hover:hover){html body .v34-route:hover{border-color:#e2dcd2}}
@media (hover:hover){html body .v34-route:hover>svg{background:#fffefa}}
html body :is(.v34-d,.v34-tools a,.v34-bizl a) .v34-arr,html body .v34-bizl a .bz-arr{border:1px solid transparent}
html body main h2 em:is(.v34-em-a,.v34-em-b,.v34-em-c){background:linear-gradient(90deg,var(--acc,#00639a),#fff) 0 92%/0 .11em no-repeat}
html body main[style*="--acc"] .v34-hero .v34-k:not(#ee-r){color:#fff!important}
html body main[style*="--acc"] .v34-hero h1 em:not(#ee-r){color:#fff!important}
html body :is(.v34-d .v34-ico,.v34-row .ico,.v34-grp .ico):not(#ee-r){background:#fff!important;box-shadow:inset 0 0 0 1px transparent}
html body .v34-grp.donker .tekst .ico:not(#ee-r){background:#0c1c2e!important;box-shadow:inset 0 0 0 1px transparent;color:#fff!important}
html body .v34-hero .v34-feit:not(#ee-r):not(#ee-q)>span::before{background:#fff;box-shadow:0 0 0 3px transparent}
html body .v34-grp.donker .v34-usps:not(#ee-r):not(#ee-q)>span::before{background:#fff!important}
html body :is(ul.v34-lijst,ul.tf-regels)[data-v45l] li[data-v44i]::before{background:#fff!important;box-shadow:inset 0 0 0 1px transparent}
html body #waarom ul[data-v45l] li>span[data-v44i]{background:#fff!important}
html body :is(ul.v34-lijst,ul.tf-regels)[data-v45l] li[data-v44i]::before{box-shadow:inset 0 0 0 1px transparent,inset 0 -3px 0 var(--acc,#00639a)!important}
html body :is(.v34-d .v34-ico,.v34-row .ico,.v34-grp .tekst .ico):not(#ee-r){box-shadow:inset 0 0 0 1px transparent,inset 0 -3px 0 var(--acc,#00639a)!important}
html body .v49-kaart:hover{border-color:#e2dcd2}
html body .v49-kaart-beeld.v49-geen{background:#fffefa}
html body .v49-dlg-kop .v49-badge{background:#fffefa;border:1px solid #e2dcd2}
html body .v49-tl-nieuw .v49-tl-dot{box-shadow:0 0 0 5px transparent}
}

/* ── v51 (27-10-2026) — footer als schermbrede band, nette uren-kaart, iPhone-details ──
   Nitien: "de footer is niet full web breed/scherm breed vullend". De footer had dezelfde kleur als de pagina, dus hij
   las als een smal blok in het midden. Nu: eigen zandtint over de volle breedte en een donkere onderbalk van rand tot rand. */
html body footer.v34-voet{background:#f1ece4!important;border-top:1px solid #e2dcd2}
html body footer.v34-voet .v34-legal{position:relative;background:#0c1c2e;box-shadow:0 0 0 100vmax #0c1c2e;clip-path:inset(0 -100vmax -100vmax);padding-top:18px!important;padding-bottom:18px!important}
html body footer.v34-voet .v34-legal,html body footer.v34-voet .v34-legal *{color:#f4f1ec!important}
html body footer.v34-voet .v34-legal a{opacity:.88;text-underline-offset:3px}
html body footer.v34-voet .v34-legal a:hover,html body footer.v34-voet .v34-legal a:focus-visible{opacity:1;text-decoration:underline}
html body footer.v34-voet .v34-legal a:focus-visible{outline:2px solid #c3e0ee;outline-offset:3px}
/* uren-kaart: label en status-pil mogen onder elkaar, de storingsregel breekt netjes in plaats van te overlappen */
html body footer.v34-voet .v34-urk{flex-wrap:wrap;row-gap:8px}
html body footer.v34-voet .v34-urst:not(:empty){max-width:100%;letter-spacing:.01em!important;line-height:1.25!important}
html body footer.v34-voet .v34-ur24{display:flex!important;flex-wrap:wrap;justify-content:space-between;column-gap:12px;row-gap:4px}
/* iPhone: herkende telefoonnummers in koppen niet blauw onderstreept (Safari-nummerdetectie) */
html body a[x-apple-data-detectors]{color:inherit!important;text-decoration:inherit!important;font:inherit!important}
/* pijltjes altijd als tekst, nooit als emoji-tegel (iOS tekende ↗ als blauw vierkantje) */
html body{font-variant-emoji:text}

/* ── v52 (28-10-2026): minder flikkeren en haperen, vooral op iPhone ─────────────────────────────────────────
   Nitien: "af en toe glitcht het beeld heel snel zwart en dan weer normaal". Drie bekende WebKit-oorzaken weg:
   (1) backdrop-filter binnen blokken die invallen (opacity/translate) → zwart frame; (2) oneindige animaties
   die elke frame de opmaak laten herberekenen; (3) de full-bleed-truc met box-shadow + clip-path op de voetbalk. */
@media (max-width:820px){
  html body .v34-contact .v34-cknop a,html body .v34-mlbl,html body .v34-hero .v34-usps .v34-credit{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html body .v34-mlbl{background:rgba(12,28,46,.78)}
}
html body .v34-telkop svg,html body .v34-route[href*="spoed"]>svg,html body .v34-route[href*="offerte"]>svg,
html body .v34-route[href*="zakelijk"]>svg,html body .trr.is-nu strong::before,html body .v34-tar .trnu-m,
html body .v34-voet .v34-urst.open::before,html body .v37-pi.v37-duw,html body .v49-puls::after{animation-iteration-count:3!important}
html body footer.v34-voet .v34-legal{box-shadow:none!important;clip-path:none!important;border-image:linear-gradient(#0c1c2e 0 0) fill 0/0/0 100vmax}
/* hero: de voorgeladen foto staat al als achtergrond, dus geen leeg donker vlak terwijl de foto-slot nog laadt */
html body .v34-hero:has(#dnst-hero){background:linear-gradient(rgba(12,28,46,.5),rgba(12,28,46,.5)),#0c1c2e url(/img/opt/laadpunt.webp) center 45%/cover no-repeat}
html body .v34-hero:has(#hub-el){background:linear-gradient(rgba(12,28,46,.5),rgba(12,28,46,.5)),#0c1c2e url(/img/opt/laadpunt.webp) center 50%/cover no-repeat}
html body .v34-hero:has(#home-hero){background:linear-gradient(rgba(12,28,46,.5),rgba(12,28,46,.5)),#0c1c2e url(/img/opt/hero-renovatie.webp) center 53%/cover no-repeat}
html body .v34-hero:has(#laadpaal-hero){background:linear-gradient(rgba(12,28,46,.5),rgba(12,28,46,.5)),#0c1c2e url(/img/opt/laadpunt.webp) center 50%/cover no-repeat}

/* ── v55 (30-10-2026): cookiemelding en -instellingen (hoort bij v37.js §v55) ── */
.v55-ck{position:fixed;left:16px;right:16px;bottom:16px;z-index:10000;max-width:560px;background:#0c1c2e;color:#f4f1ec;border-radius:14px;padding:20px 22px;box-shadow:0 18px 50px rgba(12,28,46,.35);font-size:15px;line-height:1.5}
@media (min-width:720px){.v55-ck{right:auto}}
.v55-ck .v55-ck-kop{margin:0 0 6px;font-weight:700;font-size:16px;color:#fff}
.v55-ck .v55-ck-tekst{margin:0;color:#f4f1ec;opacity:.92}
.v55-ck .v55-ck-link{display:inline-block;margin-top:8px;color:#c3e0ee;text-decoration:underline;min-height:32px;line-height:32px}
.v55-ck .v55-ck-knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.v55-ck .v55-ck-knop{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(244,241,236,.45);background:transparent;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.v55-ck .v55-ck-knop.v55-ck-primair{background:#d8852f;border-color:#d8852f;color:#0c1c2e}
.v55-ck .v55-ck-knop:hover,.v55-ck .v55-ck-knop:focus-visible{outline:2px solid #c3e0ee;outline-offset:2px}
.v55-ck .v55-ck-lijst{margin-top:12px;display:grid;gap:8px}
.v55-ck .v55-ck-cat{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;padding:10px 12px;border:1px solid rgba(244,241,236,.25);border-radius:10px;cursor:pointer}
.v55-ck .v55-ck-cat input{width:20px;height:20px;margin:2px 0 0;accent-color:#d8852f}
.v55-ck .v55-ck-cat strong{display:block;color:#fff}
.v55-ck .v55-ck-cat small{display:block;color:#f4f1ec;opacity:.85;font-size:13px}
@media (max-width:480px){.v55-ck{padding:16px;bottom:12px;left:12px;right:12px}.v55-ck .v55-ck-knop{flex:1 1 auto;justify-content:center}}
@media (prefers-reduced-motion:no-preference){.v55-ck{animation:v55-ck-in .25s ease-out}}
@keyframes v55-ck-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* v57 (07-11-2026): prijslijst per m² en per klus op /tarieven */
.ee57-lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px;margin-top:28px}
.ee57-groep{background:#fff;border:1px solid #e2dcd2;border-radius:14px;padding:18px 18px 8px}
.ee57-groep h3{font-size:17px;margin:0 0 10px;color:#0c1c2e}
.ee57-item{padding:10px 0;border-top:1px solid #efe9df}
.ee57-item:first-of-type{border-top:0}
.ee57-rij{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.ee57-rij strong{white-space:nowrap;color:#0c1c2e}
.ee57-item p{margin:4px 0 0;font-size:13.5px;color:#57514a;line-height:1.45}
.ee57-opt{font-size:13px;color:#57514a;margin-top:4px}
.ee57-leeg{color:#57514a;font-size:14.5px}
.ee57-dag-prijs{margin-top:22px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.ee57-dag-prijs strong{font-size:clamp(30px,4vw,40px);color:#0c1c2e;line-height:1}
.ee57-dag-prijs span{font-weight:600;color:#3f3a33}
.ee57-dag-prijs small{flex-basis:100%;font-size:14px;color:#57514a}
/* v59: locatiekiezer en "niet inbegrepen" in de prijslijst */
.ee59-kiezer{background:#fff;border:1px solid #d0dce2;border-radius:14px;padding:16px 18px;margin-top:28px}
.ee59-kiezer label{display:block;font-size:13px;font-weight:700;color:#0c1c2e;margin-bottom:6px}
.ee59-kiezer select{width:100%;max-width:560px;min-height:44px;border:1px solid #c9c2b6;border-radius:10px;padding:0 12px;font:inherit;font-size:15px;background:#faf8f4;color:#0c1c2e}
.ee59-zone-tekst{margin:10px 0 4px;font-size:14px;color:#3f3a33;line-height:1.5}
.ee59-pc{font-size:13.5px;color:#00639a;font-weight:600}
.ee57-lijst-in{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px;margin-top:16px}
.ee57-lijst{display:block}
.ee59-niet{font-size:13px!important;color:#8a4b14!important}
.ee59-voor{font-size:13px;color:#00639a;font-weight:600;margin-top:4px}