/* Expert Exact — v35 · eigen indeling per formaat (10-10-2026)
   Telefoon < 768 · tablet 768–1199 · desktop ≥ 1200 · liggende telefoon apart.
   Geladen door de kopbalk ná v34-ritme.css, op elke v34-pagina. Alleen presentatie: slot-id's,
   data-ee-*, de intake en de chat (#ee-chat-fab) werken ongewijzigd. :not(#ee-r) = specificiteit
   boven de inline sjabloonregels, zonder ze te hoeven aanpassen. */

/* ── 0. Basis die overal geldt ─────────────────────────────────────────── */
.v34-skip{position:absolute;left:12px;top:-80px;z-index:100;padding:12px 16px;background:#0c1c2e;color:#fff!important;border-radius:3px;font:700 14px/1 'Archivo',sans-serif;text-decoration:none}
.v34-skip:focus{top:12px}
.v34-telkop{display:none;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:3px;color:#1f1d1a;text-decoration:none;font:700 15px/1 'Archivo',sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto;transition:background-color .16s,color .16s}
.v34-telkop svg{color:#94561a;flex:0 0 auto}
@media(hover:hover){.v34-telkop:hover{background:#f0eae1;color:#00639a}}
.v34-menu-spoed{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;margin:6px 0 12px;border-radius:3px;background:#94561a;color:#fff!important;font:700 15px/1.2 'Archivo',sans-serif;text-decoration:none;flex-wrap:wrap;padding:8px 14px;text-align:center}
.v34-menu-spoed strong{font-variant-numeric:tabular-nums;white-space:nowrap}
body.v34-menu-open{overflow:hidden}

/* Zack in het slotblok lag over de belknoppen (klassebotsing met de kopbalk). De chatknop is de ingang. */
.v34-contact>img.v34-zack:not(#ee-r){display:none!important}

/* Lege staten: geen "Foto volgt uit het CRM" en geen lege vlakken. */
.v34-foto:not(:has(image-slot[data-filled]))::after{content:none!important}
.v34-split>.v34-foto:not(:has(image-slot[data-filled])){display:none!important}
.v34-split:has(>.v34-foto:not(:has(image-slot[data-filled]))):not(#ee-r){grid-template-columns:1fr!important}
.pj-uit>.v34-foto:not(:has(image-slot[data-filled])){display:none}
.ee-bedrag-leeg{font-size:.82em!important;font-weight:600!important;color:#57514a!important;white-space:nowrap}
.pj-uit em.in{display:inline!important;padding:0!important}
.v34-cknop-in:not(#ee-r){grid-template-columns:1fr 1fr!important}
.v34-cknop-in a.bel{grid-column:1/-1;white-space:nowrap}
.v34-cknop a[href^="tel:"]{white-space:nowrap;grid-column:1/-1}
#beoordelingen.v34-leeg{display:none!important}
.v34-grpk .foto:not(:has(image-slot[data-filled])){display:none!important}
.v34-grpk:has(.foto:not(:has(image-slot[data-filled]))):not(#ee-r){grid-template-columns:1fr!important}
@media (pointer:coarse){.v34-steden a{min-height:44px!important;min-width:44px;display:inline-flex!important;align-items:center}}

/* Vertaalmelding (EN) zonder verspringen van de pagina. */
#ee-taal-melding{position:fixed!important;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:45!important;border-radius:6px;box-shadow:0 14px 30px -18px rgba(0,0,0,.5);padding:10px 14px!important}
#ee-taal-melding a{display:inline-flex;min-height:44px;align-items:center}
@media(min-width:1200px){#ee-taal-melding{left:auto;right:96px;bottom:24px;max-width:420px}}

/* ── 1. Contrast (WCAG AA) ────────────────────────────────────────────── */
nav.v34-bar a[href*="wa.me"]{color:#18774e!important}
nav.v34-bar a[href$="spoed.html"],nav.v34-bar a[href$="spoed"]{color:#94561a!important}
.v34-spoed .v34-k:not(#ee-r),.v34-spoed [style*="color:#aa6620"]{color:#94561a!important}
.v34-urk span,p.v34-urbron,.v34-chips>span,.trk span,span.trl small,.trbaan .trx{color:#6b6358!important}
.v34-cknop .wa,.v34-cknop-in a.wa{background:#18774e!important}
@media(hover:hover){.v34-cknop-in a.wa:hover{background:#13643f!important}}

/* ── 2. Focus en toetsenbord ─────────────────────────────────────────── */
:is(.v34-hero,.v34-contact,.v34-top,.v34-cstrook) :is(a,button,summary):focus-visible{outline:2px solid #9fd0e8!important;outline-offset:3px}
.v34-btn:focus-visible{outline:2px solid currentColor;outline-offset:3px;box-shadow:0 0 0 5px rgba(0,99,154,.35)}

/* ── 3. Tikdoelen ≥ 44 px en tekst ≥ 12 px ───────────────────────────── */
footer details.v34-fdet>summary{min-height:44px;display:flex;align-items:center}
footer .v34-flist a{min-height:44px;display:flex;align-items:center}
footer span>a,footer a.v34-taal{display:inline-flex;min-height:44px;align-items:center;padding:0 4px}
.v34-chips button.v34-chip,a.v34-logo,a.v34-taal,.v34-skip{min-height:44px!important}
a.v34-taal{display:inline-flex!important;align-items:center}
.v34-vr>span[role=rowheader],.ct-status,.ct-status *,span.lbl,span.lbl *,.tf-zone .nr,.tf-zone .nr *{font-size:12px!important}
.v34-voet a.v34-taal,footer a.v34-taal,a.v34-taal.v34-taal{min-height:44px!important}
.v34-lbl,.v34-urk span,p.v34-urbron,.trk span,.trtijd,.trbaan .trx,.v34-mlbl,.v34-vr .vee,.v34-vr .vel,.v34-chips>span{font-size:12px!important}

/* ── 4. Kop en actiebalk per formaat ──────────────────────────────────── */
@media (max-width:1199px){
  .v34-top:not(#ee-r){display:none!important}
  .v34-nav:not(#ee-r),.v34-desk:not(#ee-r){display:none!important}
  .v34-mob:not(#ee-r){display:inline-flex!important}
  .v34-bar:not(#ee-r){display:grid!important}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
}
/* telefoon: chatknop in de balk gedokt, zodat hij geen inhoud meer bedekt */
@media (max-width:767px){
  .v34-head:not(#ee-r){height:64px!important}
  #v34-menu:not(#ee-r){top:64px!important}
  .v34-bar:not(#ee-r){padding-right:68px!important}
  #ee-chat-fab:not(#ee-r){bottom:calc(7px + env(safe-area-inset-bottom,0px))!important;right:8px!important;width:50px!important;height:50px!important;box-shadow:none!important}
  .v34-zbal{bottom:calc(72px + env(safe-area-inset-bottom,0px))!important}
}
/* tablet: kop met nummer, de balk als zwevende pil */
@media (min-width:768px) and (max-width:1199px){
  .v34-head:not(#ee-r){height:72px!important}
  #v34-menu:not(#ee-r){top:72px!important}
  .v34-telkop{display:inline-flex}
  .v34-head .v34-mob[href^="tel:"]:not(#ee-r){display:none!important}
  .v34-bar:not(#ee-r){left:50%!important;right:auto!important;bottom:16px!important;transform:translateX(-50%);width:min(560px,calc(100% - 48px));height:64px!important;padding:6px!important;border:1px solid #e2dcd2!important;border-radius:10px;box-shadow:0 18px 40px -22px rgba(12,28,46,.45)}
  .v34-bar a:not(#ee-r){flex-direction:row!important;gap:8px!important;font-size:14px!important}
  body{padding-bottom:104px}
  #ee-chat-fab:not(#ee-r){bottom:20px!important;right:20px!important}
}
/* liggende telefoon: compacte balk rechtsonder, kop lager */
@media (max-height:500px) and (orientation:landscape) and (pointer:coarse){
  .v34-top:not(#ee-r){display:none!important}
  .v34-head:not(#ee-r){height:56px!important}
  #v34-menu:not(#ee-r){top:56px!important}
  .v34-bar:not(#ee-r){display:grid!important;left:auto!important;right:12px!important;bottom:8px!important;transform:none;width:auto;height:52px!important;grid-template-columns:repeat(4,auto)!important;padding:4px!important;border:1px solid #e2dcd2!important;border-radius:8px}
  .v34-bar a:not(#ee-r){flex-direction:row!important;padding:0 14px;min-height:44px!important}
  #ee-chat-fab:not(#ee-r){bottom:68px!important;right:12px!important}
  body{padding-bottom:0}
}
@media (min-width:1200px){
  .v34-top a{min-height:40px!important}
  .v34-telkop{display:inline-flex}
}

/* Spoedpagina's (hero-knop is een belknop): "Bel" is de hoofdknop in de balk, "Spoed" verwijst niet naar zichzelf. */
nav.v34-bar a[href^="tel:"]{box-shadow:inset 0 0 0 1.5px #00639a}
body:has(.v34-hero a.v34-btn[href^="tel:"]) nav.v34-bar a[href^="tel:"]{background:#00639a!important;color:#fff!important;box-shadow:none}
body:has(.v34-hero a.v34-btn[href^="tel:"]) nav.v34-bar a[href$="offerteformulier.html"]{background:transparent!important;color:#1f1d1a!important;box-shadow:inset 0 0 0 1px #e2dcd2}
@media (max-width:767px){
  body:has(.v34-hero a.v34-btn[href^="tel:"]) .v34-bar:not(#ee-r){grid-template-columns:2fr 1fr 1fr!important}
  body:has(.v34-hero a.v34-btn[href^="tel:"]) .v34-bar a[href$="spoed.html"]{display:none!important}
}
/* Desktop: op spoedpagina's is de kop-CTA secundair, de belknop in de hero primair. */
body:has(.v34-hero a.v34-btn[href^="tel:"]) .v34-head .v34-btn.v34-desk{background:transparent!important;color:#00639a!important;box-shadow:inset 0 0 0 1.5px #00639a}

/* ── 5. Per sjabloon ─────────────────────────────────────────────────── */
/* Home: storingsroute eerst op de telefoon; hero compacter; USP's netjes 2×2. */
@media (max-width:767px){
  .v34-routes .v34-route[href$="spoed.html"]{order:-1;border-left:3px solid #d8852f}
  .v34-hero h1#v34-h1{font-size:clamp(32px,8.4vw,38px)!important}
  .v34-hero .v34-credit{display:none}
  .v34-hero .v34-usps:not(#ee-r){display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
  .v34-hero .v34-usps>span{border:0!important;padding:0!important;margin:0!important}
  .v34-hero .v34-usps>span::before{content:none!important}
  .v34-hero .v34-tl[href^="tel:"]{width:100%;justify-content:center;min-height:52px;border:1.5px solid rgba(255,255,255,.55);border-radius:3px}
  ul.v34-steden[style*="repeat(3"]{grid-template-columns:1fr 1fr!important}
  .v34-steden:not(#ee-r){display:grid!important;grid-template-columns:1fr 1fr;gap:0 16px!important}
  .v34-steden a{min-height:44px!important;display:flex!important;align-items:center;border-bottom:1px solid #e2dcd2!important}
  .v34-cases:not(#ee-r){display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-right:-18px;padding-right:18px;scrollbar-width:none}
  .v34-case{flex:0 0 86%;scroll-snap-align:start}
  .v34-chips{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .v34-spoed{padding-top:18px!important}
}
/* Tablet: eigen raster in plaats van een uitgerekte telefoon. */
@media (min-width:768px) and (max-width:1199px){
  .v34-btn:not(#ee-r){width:auto!important}
  .v34-hero h1:not(#ee-r){font-size:clamp(38px,5.4vw,50px)!important}
  .v34-rows:not(#ee-r){grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:32px!important}
  .v34-lijst:not(#ee-r){display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
  .v34-cases:not(#ee-r){grid-template-columns:1fr 1fr!important}
  .v34-split:has(image-slot[data-filled]):not(#ee-r){grid-template-columns:1fr 1fr!important}
  .v34-contact .v34-in:not(#ee-r){grid-template-columns:1fr 1fr!important;align-items:end}
  .v34-spoed .in:not(#ee-r){grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)!important}
  .v34-hero[style*="min-height"]{min-height:0!important}
  .v34-routes:not(#ee-r){grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (min-width:1200px){
  .v34-chips:not(#ee-r){display:flex;flex-wrap:wrap;gap:8px 18px;padding-left:0}
}

/* ── 6. Micro-animaties (transform/opacity, ≤ 260 ms; geen beweging bij reduce-motion) ── */
nav.v34-bar a{transition:transform .12s cubic-bezier(.2,.8,.2,1),background-color .12s}
nav.v34-bar a:active{transform:scale(.94)}
nav.v34-bar a[href^="tel:"] svg{transition:transform .2s}
nav.v34-bar a[href^="tel:"]:active svg{transform:rotate(-12deg)}
.v34-telkop:active,.v34-menu-spoed:active{transform:scale(.97)}
html:has(.v34-urst.open) .v34-live:not(#ee-r){display:inline-block!important;position:relative;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#1f8a5b;vertical-align:middle}
html:has(.v34-urst.open) .v34-live::after{content:'';position:absolute;inset:0;border-radius:50%;background:#1f8a5b;animation:v35puls 1.8s ease-out 3}
@keyframes v35puls{from{transform:scale(1);opacity:.55}to{transform:scale(2.6);opacity:0}}
@media(hover:none){
  .v34-row,.v34-case,.pj-uit,.v34-route{transition:transform .12s,background-color .12s}
  .v34-row:active{background-color:color-mix(in srgb,var(--acc,#00639a) 7%,transparent)}
  .v34-row:active .arr{transform:translate(3px,-3px)}
  .v34-case:active,.pj-uit:active,.v34-route:active{transform:scale(.985)}
}
details.v34-q summary::after{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
details.v34-q[open] summary::after{transform:rotate(180deg)}
details.v34-q[open]>p{animation:v35faq .22s cubic-bezier(.2,.8,.2,1)}
@keyframes v35faq{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
#v34-menu{animation:v35menu .22s cubic-bezier(.2,.8,.2,1)}
#v34-menu .v34-wrap>*{animation:v35menu .24s cubic-bezier(.2,.8,.2,1) both}
#v34-menu .v34-wrap>*:nth-child(n+5){animation-delay:.03s}
@keyframes v35menu{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.v34-chip{transition:background-color .16s,color .16s,transform .12s}
.v34-chip:active{transform:scale(.95)}
.v34-chip[aria-pressed="true"]{animation:v35chip .2s cubic-bezier(.3,1.4,.5,1)}
@keyframes v35chip{from{transform:scale(.92)}to{transform:scale(1)}}
:is(a,button,summary,input,select,textarea):focus-visible{animation:v35focus .16s ease-out}
@keyframes v35focus{from{outline-offset:6px;outline-color:transparent}to{outline-offset:3px}}
.v34-hero a.v34-btn[href^="tel:"]>span[aria-hidden]{display:inline-block;animation:v35nudge .26s ease-in-out 1.2s 2 alternate}
@keyframes v35nudge{to{transform:translateX(4px)}}
.ee80-state{border-radius:4px;background:linear-gradient(90deg,#ece8e0 0%,#f5f2ec 40%,#ece8e0 80%) 0 0/200% 100%;animation:v35skel 1.2s linear infinite}
@keyframes v35skel{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){
  nav.v34-bar a,nav.v34-bar a svg,.v34-row,.v34-case,.pj-uit,.v34-route,.v34-chip,details.v34-q summary::after{transition:none!important}
  nav.v34-bar a:active,.v34-case:active,.pj-uit:active,.v34-route:active,.v34-chip:active,.v34-telkop:active,.v34-menu-spoed:active{transform:none!important}
  html:has(.v34-urst.open) .v34-live::after,details.v34-q[open]>p,#v34-menu,#v34-menu .v34-wrap>*,.v34-chip[aria-pressed="true"],:is(a,button,summary,input,select,textarea):focus-visible,.v34-hero a.v34-btn[href^="tel:"]>span[aria-hidden],.ee80-state{animation:none!important}
}