/* ============================================================
   3HTS SITE-TUNE v2 · 3 september 2026
   Laadt als allerlaatste stylesheet en overschrijft bewust.
   1. Maximale sitebreedte + normale typografie-normen
   2. Proces-blok compact zonder scroll-animatie
   3. Telefoonnummers niet klikbaar op apparaten met muis
   4. Popup compact (1 kolom) + WhatsApp-chatvenster
   ============================================================ */

/* ---------- 1. BREEDTE + TYPOGRAFIE ---------- */
:root{
  --pad-y-sm:clamp(32px,3.4vw,48px);
  --pad-y-md:clamp(44px,4.6vw,68px);
  --pad-y-lg:clamp(56px,5.6vw,84px);
}
.wrap{max-width:1400px;margin-left:auto;margin-right:auto}
.contact-wrap{max-width:1680px;margin:0 auto}

.h-display{font-size:clamp(34px,2.6vw,52px)}
.h-hero{font-size:clamp(30px,2.3vw,44px)}
.h-section{font-size:clamp(22px,1.7vw,32px)!important}
.h-sub{font-size:clamp(17px,1.2vw,21px)}
.lead{font-size:clamp(14px,.95vw,16px)}
.hero-v3 h1{font-size:clamp(32px,2.6vw,50px)}
.hero-v3-lead{font-size:clamp(14px,.9vw,15px);max-width:480px}
.contact-left h1{font-size:clamp(30px,2.4vw,46px)}
.cform-title{font-size:clamp(22px,1.6vw,30px)}
.map-info h3{font-size:clamp(22px,1.6vw,30px)}
.cta-big h2{font-size:clamp(24px,1.9vw,34px);margin-bottom:14px}
.btn-lg{padding:12px 22px;font-size:13px}
.sector{padding:22px 20px;min-height:0;gap:10px}
.sector h3{font-size:17px}
.sector p{font-size:13px}
@media(min-width:1025px){.svc-grid{grid-template-rows:300px 180px 220px}}
.svc-card-title{font-size:clamp(16px,1vw,19px)}
.svc-card--cta .svc-card-no{font-size:32px}
.legal-hero h1{font-size:clamp(28px,2.2vw,42px)}
.legal-body h2{font-size:clamp(19px,1.4vw,26px)}
.faq-q{padding:16px 0}
.faq-q-text{font-size:16px}
.faq-a p{font-size:14px}

/* ---------- 2. PROCES-BLOK COMPACT ---------- */
.proc-lite{background:#0d1117;color:#fff;padding:44px 0 52px}
.proc-lite .h-section{color:#fff;margin-bottom:32px}
.proc-lite .h-section em{color:var(--orange,#E8641A)}
.proc-lite-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:28px;position:relative}
.proc-lite-grid::before{content:"";position:absolute;top:14px;left:1%;right:1%;height:1px;background:rgba(255,255,255,.14)}
.proc-lite-grid li{position:relative;padding-top:40px}
.proc-lite-no{position:absolute;top:0;left:0;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;background:#0d1117;border:1px solid rgba(232,100,26,.65);
  color:var(--orange,#E8641A);font-family:var(--f-mono,monospace);font-size:11px;letter-spacing:.04em}
.proc-lite h3{font-family:var(--f-display,sans-serif);font-weight:700;font-size:18px;line-height:1.1;
  text-transform:uppercase;letter-spacing:-.005em;color:#fff;margin:0 0 6px}
.proc-lite h3 em{font-family:var(--f-italic,serif);font-style:italic;font-weight:400;color:var(--orange-2,#ffb07a);text-transform:none}
.proc-lite p{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.62);margin:0;max-width:34ch}
@media(max-width:960px){
  .proc-lite-grid{grid-template-columns:repeat(2,1fr);gap:22px}
  .proc-lite-grid::before{display:none}
}
@media(max-width:560px){.proc-lite-grid{grid-template-columns:1fr}}

/* ---------- 3. TELEFOON NIET KLIKBAAR MET MUIS ---------- */
@media(hover:hover) and (pointer:fine){
  a[href^="tel:"]{pointer-events:none;cursor:default}
}

/* ---------- 4. POPUP COMPACT ---------- */
.kn-modal-card{grid-template-columns:1fr;max-width:540px}
.kn-modal-aside{display:none}

/* ---------- Klantportaal / customer portal compacter ---------- */
.kw{font-size:clamp(36px,6.5vw,96px)}
.kw.row2{font-size:clamp(18px,2.8vw,44px)}
.hero-lead{font-size:clamp(13px,.95vw,15px)}

/* ---------- WhatsApp-chatvenster ---------- */
.kn-chat{position:fixed;right:24px;bottom:122px;width:320px;max-width:calc(100vw - 48px);
  background:#10141b;border:1px solid rgba(255,255,255,.12);border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);z-index:1001;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .2s ease-out,transform .2s ease-out}
.kn-chat.is-open{opacity:1;transform:none;pointer-events:auto}
.kn-chat-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.kn-chat-head b{color:#fff;font-family:var(--f-display,sans-serif);font-size:16px;letter-spacing:.04em}
.kn-chat-head span{color:rgba(255,255,255,.55);font-size:10px;font-family:var(--f-mono,monospace);letter-spacing:.06em;text-transform:uppercase}
.kn-chat-x{margin-left:auto;background:none;border:0;color:rgba(255,255,255,.6);font-size:18px;cursor:pointer;line-height:1;padding:4px}
.kn-chat-x:hover{color:#fff}
.kn-chat-bubble{margin:14px 16px 0;background:rgba(255,255,255,.06);border-radius:10px 10px 10px 2px;padding:10px 12px;color:rgba(255,255,255,.85);font-size:13px;line-height:1.5}
.kn-chat-input{margin:12px 16px 0;width:calc(100% - 32px);min-height:64px;resize:none;display:block;
  background:#0d1117;border:1px solid rgba(255,255,255,.14);border-radius:8px;color:#fff;
  font:400 13px/1.5 var(--f-body,sans-serif);padding:9px 11px}
.kn-chat-input:focus{outline:none;border-color:var(--orange,#E8641A)}
.kn-chat-send{margin:10px 16px 0;width:calc(100% - 32px);display:flex;align-items:center;justify-content:center;gap:8px;
  background:#25D366;border:0;border-radius:8px;color:#0b2b17;
  font:700 12px/1 var(--f-mono,monospace);letter-spacing:.08em;text-transform:uppercase;padding:12px;cursor:pointer}
.kn-chat-send:hover{filter:brightness(1.06)}
.kn-chat-alt{margin:8px 16px 14px;width:calc(100% - 32px);background:none;border:0;color:rgba(255,255,255,.55);
  font-size:12px;cursor:pointer;text-decoration:underline;padding:4px}
.kn-chat-alt:hover{color:#fff}
@media(max-width:560px){.kn-chat{right:12px;bottom:112px}}

/* ---------- chat-hulpje met mascotte ---------- */
.kn-chat{display:flex;flex-direction:column;width:340px}
.kn-chat-head img{border-radius:50%;flex:none}
.kn-msgs{max-height:280px;overflow-y:auto;padding:12px 14px 4px;display:flex;flex-direction:column;gap:8px}
.kn-msg{display:flex;gap:8px;align-items:flex-end}
.kn-msg img{border-radius:50%;flex:none;margin-bottom:2px}
.kn-msg p{margin:0;padding:8px 11px;font-size:13px;line-height:1.45;max-width:85%}
.kn-msg.is-bot p{background:rgba(255,255,255,.07);color:rgba(255,255,255,.88);border-radius:10px 10px 10px 2px}
.kn-msg.is-u{justify-content:flex-end}
.kn-msg.is-u p{background:var(--orange,#E8641A);color:#fff;border-radius:10px 10px 2px 10px}
.kn-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px 2px}
.kn-chip{background:none;border:1px solid rgba(255,255,255,.22);border-radius:99px;color:rgba(255,255,255,.85);
  font:500 12px/1 var(--f-body,sans-serif);padding:8px 12px;cursor:pointer}
.kn-chip:hover{border-color:var(--orange,#E8641A);color:#fff}
.kn-chip.is-wa{background:#25D366;border-color:#25D366;color:#0b2b17;font-weight:700}
.kn-chip.is-alt{border-style:dashed}
.kn-chat-foot{display:flex;gap:8px;padding:10px 14px 14px;align-items:flex-end}
.kn-chat-foot .kn-chat-input{margin:0;flex:1;min-height:38px;width:auto}
.kn-chat-go{flex:none;width:38px;height:38px;border-radius:8px;background:var(--orange,#E8641A);border:0;color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.kn-chat-go:hover{filter:brightness(1.08)}
.kn-fab--mascotte .kn-fab-btn{width:84px;height:84px;padding:0;background:#10141b;
  border:3px solid #ff7a2f;border-radius:50%;overflow:visible;position:relative;
  box-shadow:0 12px 32px rgba(0,0,0,.5),0 0 14px rgba(255,122,47,.85),0 0 34px rgba(232,100,26,.5);
  animation:knGloed 2.2s ease-in-out infinite}
.kn-fab--mascotte .kn-fab-btn img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.kn-fab--mascotte .kn-fab-btn::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:3px solid #ff7a2f;box-shadow:0 0 12px rgba(255,122,47,.9);
  animation:knPulse 2.2s ease-out infinite;pointer-events:none}
.kn-fab--mascotte .kn-fab-btn:hover{transform:scale(1.06);transition:transform .2s ease-out}
@keyframes knPulse{0%{transform:scale(1);opacity:.95}70%{transform:scale(1.55);opacity:0}100%{transform:scale(1.55);opacity:0}}
@keyframes knGloed{0%,100%{box-shadow:0 12px 32px rgba(0,0,0,.5),0 0 12px rgba(255,122,47,.7),0 0 26px rgba(232,100,26,.4)}
  50%{box-shadow:0 12px 32px rgba(0,0,0,.5),0 0 22px rgba(255,122,47,1),0 0 46px rgba(232,100,26,.65)}}
.kn-teaser{position:fixed;right:30px;bottom:132px;z-index:1001;background:#fff;color:#0d1117;
  border-radius:18px;padding:11px 12px 11px 18px;
  font:600 14px/1.2 var(--f-body,sans-serif);display:flex;gap:8px;align-items:center;
  box-shadow:0 12px 34px rgba(0,0,0,.35);animation:knTeaserIn .35s ease-out,knTeaserWiebel .9s ease-in-out .9s 2}
.kn-teaser::after{content:"";position:absolute;right:24px;bottom:-11px;width:20px;height:13px;
  background:#fff;clip-path:polygon(0 0,100% 0,82% 100%);filter:drop-shadow(0 4px 6px rgba(0,0,0,.15))}
.kn-teaser span{cursor:pointer}
.kn-teaser button{background:none;border:0;color:rgba(13,17,23,.45);cursor:pointer;font-size:15px;line-height:1;padding:2px}
.kn-teaser button:hover{color:#0d1117}
@keyframes knTeaserIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
@keyframes knTeaserWiebel{0%,100%{transform:rotate(0)}25%{transform:rotate(-2.5deg) scale(1.04)}75%{transform:rotate(2deg) scale(1.02)}}
@media(max-width:560px){.kn-teaser{right:12px;bottom:118px}}

/* ---------- terug naar boven, midden onderaan ---------- */
.kn-top{position:fixed;left:50%;bottom:22px;z-index:999;width:42px;height:42px;border-radius:50%;
  background:#10141b;border:1px solid rgba(255,255,255,.22);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transform:translateX(-50%) translateY(70px);
  transition:opacity .25s ease-out,transform .25s ease-out}
.kn-top.is-zichtbaar{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.kn-top:hover{border-color:var(--orange,#E8641A);color:var(--orange,#E8641A)}


/* ---------- typ-indicator ---------- */
.kn-typing p{display:flex;gap:4px;align-items:center;min-width:38px}
.kn-typing i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);animation:knTyp 1s ease-in-out infinite}
.kn-typing i:nth-child(2){animation-delay:.15s}
.kn-typing i:nth-child(3){animation-delay:.3s}
@keyframes knTyp{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* De chat-aandachtstrekkers bewegen ook bij bewegingsvermindering (bewuste
   uitzondering, kleine en trage animaties; zelfde keuze als de hero-video). */
@media(prefers-reduced-motion:reduce){
  .kn-fab--mascotte .kn-fab-btn{animation:knGloed 2.2s ease-in-out infinite !important}
  .kn-fab--mascotte .kn-fab-btn::after{animation:knPulse 2.2s ease-out infinite !important}
  .kn-teaser{animation:knTeaserIn .35s ease-out,knTeaserWiebel .9s ease-in-out .9s 2 !important}
  .kn-typing i{animation:knTyp 1s ease-in-out infinite !important}
}


/* ---------- hover op het hondje: geen tekstlabel, wel leven ---------- */
.kn-fab--mascotte .kn-fab-label{display:none !important}
.kn-fab--mascotte .kn-fab-btn{transition:transform .22s ease-out}
.kn-fab--mascotte .kn-fab-btn:hover{transform:scale(1.14);
  box-shadow:0 14px 38px rgba(0,0,0,.55),0 0 26px rgba(255,122,47,1),0 0 56px rgba(232,100,26,.7)}
.kn-fab--mascotte .kn-fab-btn:hover img{animation:knHondje .5s ease-in-out}
@keyframes knHondje{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}60%{transform:rotate(7deg)}80%{transform:rotate(-3deg)}}
@media(prefers-reduced-motion:reduce){
  .kn-fab--mascotte .kn-fab-btn:hover img{animation:knHondje .5s ease-in-out !important}
}


/* ---------- downloadknop in de chatkop ---------- */
.kn-chat-dl{margin-left:auto;background:none;border:0;color:rgba(255,255,255,.55);cursor:pointer;padding:4px;display:flex}
.kn-chat-dl:hover{color:#25D366}
.kn-chat-dl + .kn-chat-x{margin-left:4px}


/* ---------- FAQ-blok homepage (stapelt op mobiel) ---------- */
.faq-blok{display:grid;grid-template-columns:1fr 1.8fr;gap:48px;align-items:start;max-width:1160px;margin:0 auto}
@media(max-width:900px){.faq-blok{grid-template-columns:1fr;gap:24px}}

/* ---------- mobiele leesbaarheid en tikdoelen ---------- */
.map-meta-row,.legal-meta,.feat-card-meta-val{font-size:12px}
.kn-avg a{display:inline-block;padding:5px 2px}
.svc-hero-x-breadcrumb a,.svc-hero-breadcrumb a{display:inline-block;padding:9px 2px}
.cta-big-contact-item a{display:inline-block;padding:7px 0}
@media(max-width:600px){
  h1{font-size:clamp(28px,8.5vw,38px)!important}
}


/* ---------- popup- en QA-fixes 3 sep avond ---------- */
.kn-modal-card{overflow:hidden auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media(max-width:780px){.kn-modal-card{max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px)}}
.kn-avg{color:#b8c0cc}
.kn-avg a{color:#ff9a5a}
.kn-teaser[hidden]{display:none!important}
html:has(body.kn-modal-locked){overflow:hidden}
html,body{overflow-x:clip}
.vac-notfound p{color:#b8c0cc}


/* ---------- mobiele polijstronde 3 sep (iPhone-test Jeffrey) ---------- */
/* zwevende knoppen verdwijnen zodra menu of popup openstaat */
body.is-locked .kn-fab,body.is-locked .kn-teaser,body.is-locked .kn-top,
body.kn-modal-locked .kn-fab,body.kn-modal-locked .kn-teaser,body.kn-modal-locked .kn-top,
body.is-locked .fb-fab,body.kn-modal-locked .fb-fab,
body.is-locked .fb-pin,body.kn-modal-locked .fb-pin{display:none!important}

/* mobiel menu compacter en rustiger */
@media(max-width:960px){
  .nav-mobile{padding:92px 22px 32px}
  .nav-mobile-list a{font-size:19px;padding:12px 0;letter-spacing:.01em}
  .nav-mobile-list a small{font-size:10px;margin-top:2px}
  .nav-mobile-list a[href^="tel:"]{color:var(--orange,#E8641A)}
}

/* kleinere mascotte en pijl op telefoonformaat */
@media(max-width:560px){
  .kn-fab--mascotte .kn-fab-btn{width:64px;height:64px}
  .kn-teaser{bottom:96px}
  .svc-card--cta .svc-card-no{font-size:44px!important;line-height:1}
  .proc-lite-grid{gap:10px}
  .proc-lite-grid li{padding-top:34px}
  .proc-lite p{max-width:none}
}

/* popupkaart houdt rekening met de iOS-balken */
.kn-modal-card{max-height:min(92vh,calc(100svh - 24px))}
@media(max-width:780px){.kn-modal-card{max-height:calc(100svh - 24px)}}

/* AVG-link inline zodat de punt achter de zin blijft staan */
.kn-avg a{display:inline}


/* ---------- mobiel menu-en-kaarten-ronde (feedback Jeffrey 19.14) ---------- */
/* portaalknop in de bovenbalk, alleen mobiel */
.nav-portal-m{display:none}
@media(max-width:960px){
  .nav-portal-m{display:inline-flex;align-items:center;margin-left:auto;margin-right:14px;
    padding:8px 14px;border:1px solid rgba(232,100,26,.6);border-radius:999px;
    background:rgba(232,100,26,.14);color:#fff;
    font-family:var(--f-mono,monospace);font-size:11px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
  .nav-burger{margin-left:0}
}

/* dienstenkaarten op telefoon: compact, vaste hoogte, geen overlap */
@media(max-width:600px){
  .svc-grid{grid-template-rows:none;gap:10px}
  .svc-c1,.svc-c2,.svc-c2r1,.svc-c2r2,.svc-c3,.svc-wide,.svc-c3r3{min-height:0;height:170px}
  .svc-card--cta{height:150px}
  .svc-card:not(.svc-card--cta) .svc-card-no{font-size:56px!important}
  .svc-card-title{font-size:17px}
}


/* ---------- dienstenpagina's op telefoon: strakke hero en compacte kaarten ---------- */
@media(max-width:600px){
  /* kruimelpad: alleen 3HTS / Diensten, huidige pagina staat er direct onder als kop */
  .svc-hero-x-breadcrumb{font-size:10px;letter-spacing:.14em;gap:6px;padding:6px 12px}
  .svc-hero-x-breadcrumb span:nth-last-child(-n+2){display:none}

  /* knoppen: volle breedte, netjes gecentreerd, zichtbare rand op de tweede */
  .svc-hero-x-actions{flex-direction:column;align-items:stretch;gap:10px}
  .svc-hero-x-actions .btn{justify-content:center;text-align:center}
  .svc-hero-x-actions .btn-outline{border:1px solid rgba(255,255,255,.35)}

  /* cijferrij: drie rustige regels in plaats van een wees-item */
  .svc-hero-x-stats{display:grid;grid-template-columns:1fr;gap:8px;padding-top:14px}
  .svc-hero-x-stat{flex-direction:row;align-items:baseline;gap:10px}
  .svc-hero-x-stat-num{font-size:17px}
  .svc-hero-x-stat-lbl{font-size:10px;letter-spacing:.12em}

  /* discipline-kaarten: icoon klein in de hoek, alles compact */
  .svc-flow-step{padding:18px 16px 16px;gap:8px}
  .svc-flow-icon{width:34px!important;height:34px!important;position:absolute;top:14px;right:20px}
  .svc-flow-icon svg{width:16px!important;height:16px!important}
  .svc-flow-step h4{font-size:18px!important;margin:0!important}
  .svc-flow-step p{font-size:14px!important;line-height:1.5!important}
  .svc-flow-num{font-size:10px}
}


/* ---------- omlijnde knoppen op donkere secties: witte tekst, zichtbare rand ---------- */
.cta-big,.faq-hero-x,.about-hero-x,.about-certs-x,.car-hero-x,.sectoren-hero-x,.svc-hero-x,.car-vac-empty{
  --knop-rand-inkt:#fff;--knop-rand:rgba(255,255,255,.4);
}

/* ---------- maximale-effort mobiele ronde (diepe studie 3 sep) ---------- */
@media(max-width:600px){
  /* knoppen mogen afbreken, niets steekt meer buiten beeld */
  .btn{white-space:normal!important;text-align:center}

  /* zwevende knoppen: vrije strook onderaan de footer, terugknop uit de leeskolom */
  .footer{padding-bottom:120px}
  .kn-top{left:auto;right:104px;transform:translateY(70px)}
  .kn-top.is-zichtbaar{transform:translateY(0)}
  .kn-fab--mascotte .kn-fab-btn::after{inset:-3px}

  /* cijferrijen in hero's: rustige regels in plaats van zwevende wezen */
  .sectoren-hero-x-stats,.faq-hero-x-stats,.car-hero-x-stats,.about-hero-x-stats{
    display:grid;grid-template-columns:1fr;gap:8px;justify-items:start;justify-content:start;text-align:left}
  .sectoren-hero-x-stat,.faq-hero-x-stat,.car-hero-x-stat,.about-hero-x-stat{
    display:flex;flex-direction:row;align-items:baseline;gap:10px;text-align:left}
  .sectoren-hero-x-stat-num,.faq-hero-x-stat-num,.car-hero-x-stat-num,.about-hero-x-stat-num{font-size:18px}
  .sectoren-hero-x-stat-lbl,.faq-hero-x-stat-lbl,.car-hero-x-stat-lbl,.about-hero-x-stat-lbl{font-size:10px}

  /* rust en maat */
  :root{--pad-y-sm:44px;--pad-y-md:56px;--pad-y-lg:64px}
  .hero-scroll-hint{display:none}
  .cta-big{padding:32px 20px 30px!important}
  .map-meta-row{font-size:13px}
  .nav-mobile-list a small{font-size:11px}
  .nav-back{white-space:nowrap;font-size:10px;padding:8px 14px;letter-spacing:.1em}
  .car-vac-empty{padding:30px 18px}
  .svc-card-cta{opacity:1;transform:none}
  .kn-avg input{width:18px;height:18px;accent-color:#E8641A}
}


/* ---------- EN-studieronde: sectoren-witruimte en kicker-pilletjes ---------- */
@media(max-width:640px){
  .sectoren-kort{padding:56px 24px}
  [class*="hero-x-kicker"]{font-size:9px;letter-spacing:.12em}
}


/* ---------- eindronde: laatste voorrangs- en inline-winnaars getemd ---------- */
@media(max-width:600px){
  .footer{padding-bottom:120px!important}
}
@media(max-width:640px){
  .sectoren-kort{padding:56px 24px!important}
  .faq-hero-x,.about-hero-x,.contact-hero-x{padding:84px 0 44px!important}
  .faq-cat-x,.faq-empty-x,.about-values-x,.about-certs-x,.contact-channels-x,.contact-form-x{padding:52px 0!important}
  .about-letter-x{padding:56px 0!important}
  .nav-back-txt{display:none}
  .nav-back{padding:10px;border-radius:50%}
}


/* ---------- webshop in de navigatie: zelfde stijl als klantportaal, oranje bij klik ---------- */
.nav-items .nav-winkel-li{margin-left:26px}
.nav-items a.nav-winkel{background:transparent!important;border:0!important;clip-path:none!important;
  box-shadow:none!important;animation:none!important;padding:11px 4px!important;transition:color .2s ease-out}
.nav-items a.nav-shop:hover,.nav-items a.nav-shop:active,.nav-items a.nav-shop:focus,
.nav-items a.nav-winkel:hover,.nav-items a.nav-winkel:active,.nav-items a.nav-winkel:focus{
  color:var(--orange,#E8641A)!important;background:transparent!important;
  transform:none!important;box-shadow:none!important;filter:none!important}
.nav-items a.nav-winkel::after{display:none}


/* ------------------------------------------------------------------
   Toen de beschrijvingen uit de drie sectortegels op de startpagina
   gingen, bleef er een smal balkje over met alleen een naam erin.
   Hieronder krijgen ze weer de verhoudingen van een echte kaart, met
   de naam onderin en het pijltje in de andere hoek. Geen foto, dat
   wacht op eigen beeldmateriaal. Toegevoegd 16-09-2026.
   ------------------------------------------------------------------ */
.sector-grid .sector{
  min-height:180px !important;
  padding:34px 30px !important;
  justify-content:flex-end !important;
}
.sector-grid .sector h3{
  font-size:clamp(20px,1.8vw,26px) !important;
  line-height:1.1 !important;
}
.sector-grid .sector::after{
  top:auto !important; bottom:30px !important; right:30px !important;
  font-size:20px !important;
}


/* ------------------------------------------------------------------
   Banners onder de menubalk. Toegevoegd 17-09-2026.
   Het menu staat vast bovenin en de banner begint erachter. Elke soort
   banner raadde zelf hoeveel ruimte hij bovenaan moest houden, en dat was
   overal te weinig. Onder de tekst zat 32 tot 64 pixels lucht, erboven
   maar 11 tot 35. Daardoor leek de banner onder het menu door te schuiven.
   Nu rekent iedere banner met dezelfde menuhoogte, plus precies evenveel
   lucht als hij onder de tekst al had. Op een telefoon met een inkeping
   telt die inkeping mee, want het menu wordt daar ook zoveel hoger.
   De dienstpagina's, vacatures en voorwaarden hadden op een computer al
   genoeg ruimte en blijven daar zoals ze waren.
   ------------------------------------------------------------------ */
:root{ --hts-menu-hoogte: calc(81px + env(safe-area-inset-top, 0px)); }
@media (max-width:1200px){
  :root{ --hts-menu-hoogte: calc(73px + env(safe-area-inset-top, 0px)); }
}

.hero-v3,
.cases-hero,
.contact-hero-x   { padding-top: calc(var(--hts-menu-hoogte) + 50px) !important; }
.about-hero-x,
.faq-hero-x,
.sectoren-hero-x  { padding-top: calc(var(--hts-menu-hoogte) + 60px) !important; }
.car-hero-x       { padding-top: calc(var(--hts-menu-hoogte) + 64px) !important; }

@media (max-width:960px){
  .hero-v3,
  .cases-hero,
  .svc-hero-x     { padding-top: calc(var(--hts-menu-hoogte) + 40px) !important; }
}
@media (max-width:640px){
  .contact-hero-x,
  .about-hero-x,
  .faq-hero-x     { padding-top: calc(var(--hts-menu-hoogte) + 44px) !important; }
  .car-hero-x     { padding-top: calc(var(--hts-menu-hoogte) + 48px) !important; }
}


/* ------------------------------------------------------------------
   Contact en Sectoren waren na het weghalen van tekst en cijfers nog maar
   een strookje, 121 tot 207 pixels hoog onder het menu. Ze krijgen een
   minimale hoogte met de kop precies in het midden van wat je ziet.
   Toegevoegd 17-09-2026.
   ------------------------------------------------------------------ */
.contact-hero-x,
.sectoren-hero-x{
  display:flex; flex-direction:column; justify-content:center;
  min-height: calc(var(--hts-menu-hoogte) + 340px);
}
@media (max-width:960px){
  .contact-hero-x,
  .sectoren-hero-x{ min-height: calc(var(--hts-menu-hoogte) + 280px); }
}
@media (max-width:640px){
  .contact-hero-x,
  .sectoren-hero-x{ min-height: calc(var(--hts-menu-hoogte) + 240px); }
}
/* de draaiende tekeningen op Contact beginnen onder het menu, niet erachter */
.contact-hero-x-shapes{ top: var(--hts-menu-hoogte); }


/* ------------------------------------------------------------------
   De zwevende lijntekeningen in de banners uit. Toegevoegd 17-09-2026.
   Het zonnetje op Werken bij, de vergrootglazen en bogen rechts, de
   telefoon en envelop op Contact, en dezelfde tekeningen op FAQ en de
   dienstpagina's. Ze staan nog wel in de pagina's, want de opmaak kiest
   ze op volgorde en knippen zou de kleuren laten verspringen. Wil je ze
   terug, haal dan dit blok weg.
   ------------------------------------------------------------------ */
.about-hero-x-shapes,
.car-hero-x-shapes,
.contact-hero-x-shapes,
.faq-hero-x-shapes,
.svc-hero-x-shapes,
.process-x-shapes,
/* de draaiende zon op de vacaturepagina, toegevoegd 17-09-2026 */
.vac-detail-hero-shape{ display:none !important; }


/* ------------------------------------------------------------------
   Over ons hoort bij de banners met een vaste minimale hoogte. Er staat
   sinds vandaag alleen nog een kop in, dus zonder deze regel wordt het
   weer een strookje onder het menu. Toegevoegd 17-09-2026.
   ------------------------------------------------------------------ */
.about-hero-x{
  display:flex; flex-direction:column; justify-content:center;
  min-height: calc(var(--hts-menu-hoogte) + 340px);
}
@media (max-width:960px){
  .about-hero-x{ min-height: calc(var(--hts-menu-hoogte) + 280px); }
}
@media (max-width:640px){
  .about-hero-x{ min-height: calc(var(--hts-menu-hoogte) + 240px); }
}


/* ------------------------------------------------------------------
   De onderste rij van de dienstentegels. De tegel Storingsdienst is er
   op 17-09-2026 uitgegaan, dat is een activiteit onder Onderhoud en
   beheer en geen losse dienst. Project ondersteuning vult nu de hele
   rij, anders blijft er rechtsonder een gat staan.
   ------------------------------------------------------------------ */
@media (min-width:1025px){ .svc-wide{ grid-column:1/4 !important; } }
/* 18-09-2026: de regel hierboven gold eerst op elk formaat. Op de telefoon
   (1 kolom) maakte hij er 3 kolommen van, de eerste 0 px breed, en daarmee
   was de tegel Onderhoud & beheer onzichtbaar. Op tablet nu 2 bij 2. */
@media (min-width:601px) and (max-width:1024px){ .svc-wide{ grid-column:auto !important; min-height:260px; } }


/* ------------------------------------------------------------------
   De banner van Cases in dezelfde stijl als Over ons, Werken bij,
   Contact en Sectoren. Hij was als enige licht en week af.
   Toegevoegd 17-09-2026.
   ------------------------------------------------------------------ */
.cases-hero{
  position:relative;
  background:linear-gradient(180deg,#0d1117 0%,#161b22 60%,#0d1117 100%) !important;
  color:#fff !important;
  display:flex;flex-direction:column;justify-content:center;
  min-height:calc(var(--hts-menu-hoogte) + 340px);
  padding:calc(var(--hts-menu-hoogte) + 60px) 0 60px !important;
  text-align:center;
}
.cases-hero-inner{max-width:1100px;width:100%;margin:0 auto;padding:0 var(--pad-x)}
.cases-hero h1{color:#fff !important}
.cases-hero-lead{
  max-width:62ch;margin:22px auto 0 !important;
  color:rgba(255,255,255,.75) !important;
}
@media (max-width:960px){
  .cases-hero{ min-height:calc(var(--hts-menu-hoogte) + 280px);
    padding:calc(var(--hts-menu-hoogte) + 44px) 0 44px !important; }
}
@media (max-width:640px){
  .cases-hero{ min-height:calc(var(--hts-menu-hoogte) + 240px); }
}


/* ------------------------------------------------------------------
   De twinkelende puntjes in de banners uit. Jeffrey op 18-09-2026 over
   Contact, en het is overal hetzelfde soort versiering, dus overal uit.
   Toegevoegd 18-09-2026.
   ------------------------------------------------------------------ */
.about-hero-x-sparkles,
.car-hero-x-sparkles,
.contact-hero-x-sparkles,
.faq-hero-x-sparkles,
.svc-hero-x-sparkles,
.vac-detail-hero-sparkles,
.vac-cta-sparkles,
.process-x-sparkles{ display:none !important; }


/* ------------------------------------------------------------------
   Responsief ronde 1. Toegevoegd 18-09-2026 na een meting van alle
   pagina's op 17 schermformaten.
   ------------------------------------------------------------------ */

/* Zijmarge. Op een iPhone in liggende stand valt inhoud anders onder de
   inkeping, dus die telt mee. Zonder inkeping verandert er niets. */
:root{ --pad-x: max(clamp(24px, calc((100vw - 1440px) / 2 + 40px), 64px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
/* 18-09-2026: de bovengrens van 64 px uit layout-fix.css hoort erbij, zonder die
   grens eet de marge op brede schermen de tekstkolom op. */

/* Menu op tablet en telefoon dezelfde zijmarge als de inhoud eronder. In
   nav-pro.css stond hiervoor 24 px, maar een sterkere regel gaf 36 px. */
@media (max-width:1200px){
  .nav, .nav:not(.scrolled), .nav.scrolled{
    padding-left: var(--pad-x) !important;
    padding-right: var(--pad-x) !important;
  }
}
/* Heel smalle telefoons: logo, portaalknop en menuknop pasten niet naast
   elkaar, de menuknop viel buiten beeld. */
@media (max-width:374px){
  .nav, .nav:not(.scrolled), .nav.scrolled{ gap:10px !important; }
  .nav-logo .logo-mark img{ height:36px !important; }
  .nav-portal-m{ margin-right:0; padding:7px 10px; font-size:10.5px; letter-spacing:.1em; }
}


/* ------------------------------------------------------------------
   Responsief ronde 2, chat. Toegevoegd 18-09-2026.
   De tekstballon Kan ik u helpen? lag bij binnenkomst over de knoppen en
   koppen in het eerste scherm. Op telefoon en liggende telefoon nu geen
   ballon en een kleinere ronde knop. Op tablet en computer verdwijnt de
   ballon na 8 seconden vanzelf, de knop blijft.
   ------------------------------------------------------------------ */
@media (max-width:640px), (max-height:500px) and (orientation:landscape){
  html body .kn-teaser{ display:none !important; }
  .kn-fab--mascotte .kn-fab-btn{ width:56px !important; height:56px !important; }
  .kn-fab{ right:14px !important; bottom:14px !important; }
}
@keyframes knTeaserWeg{ to{ opacity:0; visibility:hidden; transform:translateY(6px); } }
html body .kn-teaser{
  animation:knTeaserIn .35s ease-out, knTeaserWiebel .9s ease-in-out .9s 2, knTeaserWeg .5s ease-in 8s forwards !important;
}


/* ==================================================================
   RESPONSIEF RONDE 2. Toegevoegd 18-09-2026.
   Na een visuele beoordeling van 40 pagina's op 17 formaten. Per
   onderdeel onderzocht en proefgedraaid (A dienstpagina's, B homepagina,
   D contact, E juridische pagina's, F werken bij, vacature, cases en
   over ons, G FAQ en sectoren, H binnenkort-pagina's en 404, C de
   gezamenlijke kantlijn op laptop en groot scherm, bewust als laatste).
   ================================================================== */

/* ------------------------------------------------------------------
   Responsief ronde 2, onderdeel A: de dienstpagina's (diensten/*.html
   en en/services/*.html). Toegevoegd 18-09-2026.
   ------------------------------------------------------------------ */

/* Het dunne oranje lijntje tegen de linkerrand van de banner. Dat zijn de
   twee lichtbundels uit svc-hero-x.css. Hun plaats en draaiing hangen aan
   :nth-of-type(1) en (2), maar het zijn de derde en vierde div in de
   banner, dus die regels raakten nooit. Ze stonden daardoor recht op x 0.
   Ze waren nooit zichtbaar zoals bedoeld, dus uit in plaats van alsnog aan,
   net als de tekeningen en puntjes eerder in dit bestand. */
.svc-hero-x-beam{ display:none !important; }

/* Bannerfoto op liggende telefoon en staande tablet. Hier staat de banner
   in een kolom en de foto was staand, hooguit 520 breed en gecentreerd, dus
   tot 650 hoog en los van de kantlijn. Nu een liggende uitsnede over de
   volle inhoudsbreedte, links op de kantlijn, en nooit hoger dan 60 procent
   van het scherm. De foto's zelf zijn liggend (1480 of 1600 bij 894). */
@media (min-width:561px) and (max-width:960px){
  .svc-hero-x-img-wrap{ max-width:none; margin:0; aspect-ratio:16/9; max-height:60vh; }
}

/* Het groene fotolabel lag binnen de oranje hoekhaak linksonder en op
   telefoon ook tegen de haak rechtsonder. Nu staat het boven de haak
   linksonder, lijnt links met de haak uit en blijft binnen de foto. Op
   telefoon iets kleiner zodat het op een regel past. */
.svc-hero-x-badge{ left:14px; bottom:56px; max-width:calc(100% - 28px); }
@media (max-width:600px){
  .svc-hero-x-badge{ font-size:10px; letter-spacing:.1em; padding:8px 12px; gap:8px;
    border-radius:18px; text-wrap:balance; }
}
@media (max-width:360px){
  .svc-hero-x-badge{ letter-spacing:.06em; padding:7px 10px; gap:7px; max-width:calc(100% - 24px); }
}

/* Kerncijfers in de banner. Ze stonden in een rij die mocht omslaan, dus
   bij een smalle tekstkolom (liggende tablet) viel het derde cijfer los
   naar een tweede rij. Nu blijven ze op een rij en breekt zo nodig alleen
   de kleine onderregel. Waar alles past staan ze precies als voorheen, met
   16 px ertussen. Op telefoon blijven de drie regels onder elkaar. */
@media (min-width:601px){
  .svc-hero-x-stats{ display:grid; grid-auto-flow:column; grid-auto-columns:auto;
    justify-content:start; column-gap:16px; align-items:start; }
}

/* Bannerkop op tablet een stap groter dan op telefoon, hij was daar even
   groot (30 px). Vanaf 961 staat de kop weer in de smallere linkerkolom. */
@media (min-width:601px) and (max-width:960px){
  .svc-hero-x-left h1{ font-size:clamp(36px,4.8vw,44px); }
}

/* Sectiekoppen groeien mee met het scherm. Ze bleven 22 tot 24 px tot
   1440 breed en waren daar kleiner dan de kaarttitels van Andere diensten
   (28 px) en de kop van het belblok (33 px). Op telefoon blijft 22 px. */
.svc-page .h-section{ font-size:clamp(22px, calc(12px + 1.75vw), 40px) !important; }

/* Kaarten met een voetregel (vormen, stappen, rollen, niveaus). Naast
   elkaar deelt een rij kaarten nu dezelfde rijen, zodat label, titel,
   tekst en de scheidingslijn van de voetregel in een rij op dezelfde
   hoogte staan, ook als een titel of tekst langer is. */
@supports (grid-template-rows:subgrid){
  @media (min-width:641px){
    .svc-page .feat-card{ display:grid; grid-template-rows:subgrid; grid-row:span 4;
      row-gap:18px; align-content:start; }
    .svc-page .feat-card-meta{ margin-top:0; align-self:stretch; align-content:flex-start; }
  }
}
/* De voetregel zelf. Het waardevakje was hooguit 60 procent breed en
   rechts uitgelijnd, dus lange woorden liepen eruit (Onderhoudsbesluiten,
   Maand/kwartaal/jaar) en andere braken slordig. Nu staat het vakje
   rechts naast het kopje als het past, en anders links eronder over de
   volle breedte. Het kopje zelf breekt niet meer en is beter leesbaar
   (contrast van ongeveer 3,7 naar 6,6 op 1). De langste waarde, de scope
   op Keuring & inspectie, past nergens op een regel. Daarvoor staat in de
   HTML een harde spatie na elk puntje, zodat een puntje nooit aan het eind
   van een regel komt. */
.svc-page .feat-card-meta{ flex-wrap:wrap; column-gap:10px; row-gap:8px; }
.svc-page .feat-card-meta-key{ flex:1 0 auto; white-space:nowrap; color:rgba(255,255,255,.58); }
.svc-page .feat-card-meta-val{ margin-left:0; max-width:100%; text-align:left; flex:0 1 auto; }
/* telefoon: altijd kopje boven de waarde, elke kaart dezelfde opbouw */
@media (max-width:640px){
  .svc-page .feat-card-meta{ flex-direction:column; align-items:flex-start; }
}
/* telefoon: het grote sierlijke cijfer schaalt mee en blijft uit de schuine hoek */
@media (max-width:600px){
  .svc-page .feat-card-num{ font-size:62px !important; top:8px !important; right:26px; }
}
/* kleinste telefoons: minder binnenmarge, de tekstkolom was maar 205 px */
@media (max-width:400px){
  .svc-page .feat-card{ padding:34px 22px 24px; }
}

/* Andere diensten. Drie kaarten in twee kolommen lieten op liggende
   telefoon en tablet een leeg vak naast de derde kaart. Nu drie naast
   elkaar, zoals vanaf 961, met een kop die in de smallere kaart past. */
@media (min-width:561px) and (max-width:960px){
  .svc-cross-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .svc-cross-card-inner{ padding:20px 18px; }
  .svc-cross-card-bot h3{ font-size:clamp(20px,2.9vw,26px); }
  .svc-cross-card-bot p{ font-size:14px; }
}
/* Het label DIENST 01 stond lichtgrijs op een lichte lucht. Een donkere
   band bovenin elke foto en een lichter label, zodat het op elke foto
   even goed leesbaar is. Het verloop onderin blijft zoals het was. */
.svc-cross-card-overlay{
  background:
    linear-gradient(180deg, rgba(10,11,14,.8) 0, rgba(10,11,14,.55) 44px, rgba(10,11,14,0) 110px),
    linear-gradient(to top, rgba(10,11,14,.94) 0%, rgba(10,11,14,.5) 50%, rgba(10,11,14,.08) 100%);
}
.svc-cross-card-no{ color:rgba(255,255,255,.92); }

/* Belblok op telefoon. Het blok had 20 px zijmarge tegen 24 px voor de
   rest van de pagina, dus de knoppen staken aan beide kanten uit. De twee
   knoppen onder elkaar waren ongelijk breed, nu allebei de volle breedte
   net als in de banner. */
@media (max-width:600px){
  .svc-page .cta-big{ padding-left:var(--pad-x) !important; padding-right:var(--pad-x) !important; }
  .svc-page .cta-big-actions{ flex-direction:column; align-items:stretch; }
  .svc-page .cta-big-actions .btn{ justify-content:center; }
}

/* Geen los woord op de laatste regel van koppen en vragen. */
.svc-page :is(h1,h2,h3,h4,.faq-v2-q-text){ text-wrap:pretty; }

/* ------------------------------------------------------------------
   Startpagina NL en EN, dienstentegels, sectortegels en vragen.
   Responsief ronde 2, onderdeel B. Toegevoegd 18-09-2026.
   ------------------------------------------------------------------ */

/* Dienstentegels op laptop en groter. De rijhoogtes 300 + 180 uit de
   regel hierboven maakten de bovenste drie tegels 490 px hoog en staand.
   Op een laptop van 768 px hoog viel de titel daardoor onder de vouw.
   Nu 145 + 10 + 145 = 300 px, liggend zoals op de tablet. De brede tegel
   Project ondersteuning blijft 220 px. Alleen de startpagina heeft
   #diensten (NL) of #services (EN) met dit raster. */
@media (min-width:1025px){
  :is(#diensten,#services) .svc-grid{ grid-template-rows:145px 145px 220px; }
}

/* Op aanraakschermen bestaat geen muis-over, dus de knop Meer lezen bleef
   op tablet en liggende telefoon onzichtbaar. Daar staat hij nu altijd,
   net als op de telefoon staand. Tot 1024 px (de indeling 2 bij 2) ook
   met muis, daarboven verschijnt hij met een muis zoals voorheen pas bij
   aanwijzen. */
@media (hover:none), (max-width:1024px){
  :is(#diensten,#services) .svc-card-cta{ opacity:1; transform:none; }
}

/* Sectortegels, alleen op de startpagina. Vanaf 561 px drie tegels in een
   rij, zo blijft er op tablet en liggende telefoon geen lege vierde cel over.
   Het kader is nu rondom dicht. Het raster krijgt een lijn boven en links,
   elke tegel een lijn rechts en onder. Eerder had het raster geen lijn
   boven (layout-fix.css) en ook een lijn rechts en onder, die samenviel
   met de lijn van de tegel en dubbel werd. */
@media (min-width:561px){
  .sector-grid{ grid-template-columns:repeat(3,1fr); }
}
.section .sector-grid{
  border:0 !important;
  border-top:1px solid var(--line-2) !important;
  border-left:1px solid var(--line-2) !important;
}
.section .sector-grid .sector{
  border-right:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
}

/* Tegels compact, naam en pijl op dezelfde hoogte in het midden van de
   tegel. Het lege vlak van 110 tot 120 px boven de naam verdwijnt. De
   naam begint 24 px binnen de tegel, net als de titels in de
   dienstentegels erboven (1 px lijn plus 23 px). */
.section .sector-grid .sector{
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  min-height:104px !important;
  padding:24px 23px !important;
}
.section .sector-grid .sector::after{
  position:static !important;
  flex:none;
  line-height:1;
  margin-bottom:4px;          /* pijl op het midden van de hoofdletters */
  color:var(--ink-2);         /* was lichtgrijs, dunne pijl viel weg */
}
.section .sector-grid .sector:hover::after{ color:var(--orange); }  /* oranje bij aanwijzen blijft */
@media (max-width:560px){
  .section .sector-grid .sector{ min-height:84px !important; }
}
@media (min-width:1025px){
  .section .sector-grid .sector{ min-height:112px !important; }
}

/* Veelgestelde vragen op de startpagina, telefoon. De nummerkolom nam
   70 px in, vraag en antwoord kregen een smalle strook van 144 tot
   214 px. Nu 34 px, het antwoord begint op dezelfde lijn als de vraag. */
@media (max-width:600px){
  .faq-blok .faq-q{ gap:12px; }
  .faq-blok .faq-q-no{ width:22px; }
  .faq-blok .faq-item.open .faq-a{ padding-left:34px; }
}
/* geen los woord op de laatste regel waar de browser dat kan */
.faq-blok p{ text-wrap:pretty; }

/* ------------------------------------------------------------------
   Contact (NL en EN), responsief ronde 1, onderdeel D. Toegevoegd 18-09-2026.
   Alle selectors hieronder bestaan alleen op contact.html en en/contact.html.
   ------------------------------------------------------------------ */

/* 1. Formulier schoof over de introtekst en de vinkjes (ongeveer 781 tot 980
   breed), en op de computer stond de introtekst 120 px lager dan het
   formulier. Oorzaak: de intro heeft position:sticky; top:120px, maar de
   sectie eromheen heeft overflow:hidden. Daardoor plakt de intro niet aan
   het scherm maar aan de sectie zelf, en schuift hij vast 120 px omlaag,
   op elk formaat en bij elke scrollstand. Tussen 781 en 980 (1 kolom) kwam
   hij zo onder het formulier te liggen, met 200 px leeg erboven. Het
   meelopen heeft dus nooit gewerkt; de intro staat nu gewoon op zijn plek,
   bovenkant gelijk met het formulier. */
.contact-form-x-intro{ position:static; }
@media (max-width:980px){
  /* in 1 kolom dezelfde linker- en rechterlijn als kaarten en voettekst,
     in plaats van een smallere gecentreerde kolom van 780 px */
  .contact-form-x-inner{ max-width:none; }
}

/* 2. Drie contactkaarten. Tussen 561 en 980 breed stonden ze 2 plus 1, met
   een gat naast WhatsApp. Nu drie naast elkaar, iets compacter. */
@media (min-width:561px) and (max-width:980px){
  .contact-channels-x-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
  .contact-chn-card{ padding:26px 18px 22px; gap:12px; }
  .contact-chn-label{ letter-spacing:.14em; }
}

/* De belkaart verbergt "Bel nu" op apparaten met muis (wens Tim). Dat
   gebeurde met display:none, waardoor de pagina 31 px korter werd zodra de
   browser een muis meldt. Met visibility houdt de kaart dezelfde opbouw en
   hoogte, zichtbaar blijft er niets van. */
@media (hover:hover) and (pointer:fine){
  .contact-chn-card[href^="tel:"] .contact-chn-arrow{ display:inline-flex; visibility:hidden; }
}

/* 3. Kaart van Google. Het vak had een vaste verhouding 4:3. Op telefoon was
   het te laag voor de inhoud: het speldje werd tot 0 px samengedrukt en de
   link onderin viel op of over de rand. Op de staande tablet was het juist
   531 px hoog met 145 px leeg boven en onder. Nu groeit het vak mee met de
   inhoud en is het in 1 kolom zo hoog als de inhoud. Zodra de kaart geladen
   is, geldt weer 4:3. */
.map-visual:not(.is-geladen){ display:grid; aspect-ratio:auto; }
/* onzichtbare vulling die het vak minstens 4:3 houdt (75% van de breedte) */
.map-visual:not(.is-geladen)::after{ content:""; grid-area:1/1; padding-bottom:75%; }
.map-visual:not(.is-geladen) .map-consent{ position:relative; inset:auto; grid-area:1/1; }
.map-consent-pin{ flex:none; }
@media (max-width:800px){
  .map-visual:not(.is-geladen)::after{ display:none; }
}

/* Dunne oranje lijn langs de linkerrand van de banner. Dat waren de twee
   lichtbundels uit contact-x.css. Hun plaatsregels gebruiken :nth-of-type(1)
   en (2), maar het zijn de 3e en 4e div in de banner, dus die regels raakten
   nooit. Beide bundels stonden daardoor op 0 px van links, recht omlaag. Net
   als de tekeningen en puntjes in de banner (17 en 18-09) nu uit. */
.contact-hero-x-beam{ display:none !important; }

/* 4. Blok Kom langs. Zijmarge gelijk aan de rest van de pagina op telefoon
   en tablet (was 30 of 50 px tegen 24 px elders). Vanaf 1201 regelt
   onderdeel C de uitlijning. */
@media (max-width:1200px){
  .map-panel{ padding-left:var(--pad-x); padding-right:var(--pad-x); }
}

/* Label Werkplaats · Krimpen aan den IJssel op 1 regel op smalle telefoons.
   Zelfde maat als de andere labeltjes op telefoon (9 px). */
@media (max-width:380px){
  .map-info .kicker{ font-size:9px !important; letter-spacing:.12em !important; padding:5px 10px !important; gap:8px; }
}

/* Kop Kom langs even groot als Drie manieren om contact te maken. */
.map-info h3{ font-size:clamp(22px,2.2vw,34px); }

/* Gegevenstabel. Waarden op elk formaat 14 px (was 12 op tablet en computer,
   13 op telefoon), labels iets groter en lichter. Op telefoon het label boven
   de waarde, zodat adres en openingstijden de volle breedte krijgen. */
.map-meta-row{ font-size:14px; }
.map-meta-row span:first-child{ font-size:11px; color:rgba(255,255,255,.62); }
@media (max-width:560px){
  .map-meta-row{ flex-direction:column; align-items:flex-start; gap:4px; }
  .map-meta-row span:first-child{ width:auto; }
}

/* Kleine grijze regels beter leesbaar. */
.cx-form-note{ font-size:13px; color:rgba(255,255,255,.62); }
.map-consent-alt{ font-size:13px; color:rgba(255,255,255,.62); }

/* 5. Verstuurknop op 1 regel op de smalste telefoons. */
@media (max-width:380px){
  .contact-form-x-card{ padding:30px 20px; }
  .cx-submit{ padding:16px 22px; letter-spacing:.12em; }
}

/* 6. Akkoord-vinkje in de stijl van het formulier, 10 px van de tekst,
   midden op de eerste regel, en geen ruimte meer voor de punt. */
.contact-form-x-card .kn-avg{ display:flex; align-items:flex-start; gap:10px; line-height:1.55; }
.contact-form-x-card .kn-avg input{
  -webkit-appearance:none; appearance:none; flex:none;
  width:18px; height:18px; margin:3px 0 0; padding:0;
  border:1px solid rgba(232,100,26,.65); border-radius:0;
  background:rgba(255,255,255,.04);
  display:grid; place-content:center; cursor:pointer;
}
.contact-form-x-card .kn-avg input::before{
  content:""; width:9px; height:5px; margin-top:-2px;
  border-left:2px solid var(--orange,#E8641A); border-bottom:2px solid var(--orange,#E8641A);
  transform:rotate(-45deg); opacity:0;
}
.contact-form-x-card .kn-avg input:checked::before{ opacity:1; }
.contact-form-x-card .kn-avg input:focus-visible{ outline:2px solid var(--orange,#E8641A); outline-offset:2px; }
.contact-form-x-card .kn-avg a{ padding:5px 0; }

/* Keuzeveld: zolang er niets gekozen is dezelfde grijze voorbeeldtekst als
   de andere velden. */
.cx-field select:has(option:first-child:checked){ color:rgba(255,255,255,.5); }

/* Geen los woord op de laatste regel van de intro en de beloftes. */
.contact-form-x-intro p, .contact-form-x-promises li{ text-wrap:pretty; }

/* ------------------------------------------------------------------
   Responsief ronde 2, onderdeel E. Juridische pagina's, de omlijnde knop
   en de plaatsregel in de voettekst. Toegevoegd 18-09-2026.
   ------------------------------------------------------------------ */

/* Cookietabel op en/cookies.html. Bij de omzetting van vandaag verdween het
   eigen stijlblok van die pagina en daarmee alle regels voor .cookie-grid.
   Hieronder de oude regels terug, met een kopregel die als kop leest (zelfde
   letter als de tabelkoppen op de Nederlandse pagina) en een lijn eronder. */
.cookie-grid{border-top:1px solid var(--line-2);margin:8px 0 22px}
.cookie-head,.cookie-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,.7fr);gap:20px}
.cookie-head{padding:12px 0;border-bottom:1px solid var(--line-2);font-family:var(--f-mono);font-size:11px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);font-weight:600}
.cookie-row{padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.cookie-row .cr-name{font-family:var(--f-mono);font-size:13px;line-height:1.55;color:var(--ink);font-weight:500}
.cookie-row .cr-desc{font-size:15px;line-height:1.55;color:var(--ink-2)}
.cookie-row .cr-life{font-family:var(--f-mono);font-size:11px;line-height:1.55;letter-spacing:.06em;color:var(--mute);text-transform:uppercase}
/* Telefoon, elke cookie als blokje onder elkaar. De kopregel valt weg, dus
   doel en bewaartermijn krijgen elk hun eigen label, gelijk aan de kopregel. */
@media (max-width:640px){
  .cookie-head{display:none}
  .cookie-row{grid-template-columns:minmax(0,1fr);gap:10px}
  .cookie-row .cr-life{font-family:inherit;font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink-2)}
  :lang(en) .cookie-row .cr-desc::before{content:"Purpose"}
  :lang(en) .cookie-row .cr-life::before{content:"Lifetime"}
}

/* Tabellen op cookies.html en privacy.html worden op de telefoon kaartjes en
   de kolomkoppen verdwijnen. Elke cel had het label al in data-label staan,
   nu komt het ook in beeld, in de letter van de tabelkoppen. */
@media (max-width:640px){
  .legal-table td[data-label]::before,
  .cookie-row .cr-desc::before,
  .cookie-row .cr-life::before{
    display:block;margin:0 0 3px;
    font-family:var(--f-mono);font-size:11px;line-height:1.4;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink);font-weight:600;
  }
  .legal-table td[data-label]::before{content:attr(data-label)}
}

/* Kader met icoon (cookies 04, privacy 08). Het icoon stond in een eigen
   kolom met ruime binnenrand, op 320 bleef er 175 px voor de tekst over.
   Op de telefoon staat het icoon nu klein naast de eerste regel en loopt de
   tekst eronder door over de volle breedte van het kader. */
@media (max-width:640px){
  .legal-callout{display:flow-root;padding:18px 18px 18px 16px}
  .legal-callout svg{float:left;width:20px;height:20px;margin:3px 10px 0 0}
}

/* Omlijnde knop met afgeschuinde hoeken, overal op de site. btn-pro.css
   knipt de hoeken weg met clip-path, en daarmee ook de rand, zodat de
   omlijning op twee hoeken open lag. Een gedraaid vlak tekent nu de twee
   schuine randen. Het neemt dikte en kleur over van de eigen rand van de
   knop (inherit), dus ook de witte rand op donkere banners, de losse
   kleuren in style-attributen en de oranje rand bij aanwijzen kloppen
   vanzelf. De randen liggen precies op de knipranden van clip-path, zodat
   er alleen binnen de knop getekend wordt. Alleen op pagina's die
   btn-pro.css laden, de binnenkort-pagina's hebben rechte knoppen. contain zorgt dat het gedraaide
   vlak nergens een schuifbalk kan veroorzaken. */
html:has(link[href*="btn-pro.css"]) .btn-outline:not(.nav-cta .btn-outline){contain:paint}
html:has(link[href*="btn-pro.css"]) .btn-outline:not(.nav-cta .btn-outline)::after{
  content:"";position:absolute;left:50%;top:50%;
  box-sizing:content-box;
  width:calc(100% + 60px);
  height:70.711%;
  padding:calc(70.711% - 18.5px) 0 0;
  border:0 solid;
  border-top-width:inherit;border-bottom-width:inherit;
  border-color:inherit;
  transform:translate(-50%,-50%) rotate(45deg);
  pointer-events:none;
}


/* Voorwaarden en terms, de twee knoppen onder de kaart op de telefoon even
   breed als de kaart erboven. */
@media (max-width:640px){
  .vw-acties .btn{flex:1 1 100%;justify-content:center}
}

/* Datum blijft bij elkaar, geen los jaartal op de tweede regel (regel
   bovenaan op privacy en cookies, regel onder de knoppen op voorwaarden). */
.legal-body .legal-meta b{white-space:nowrap}
.legal-body .vw-versie{text-wrap:balance}
/* Koppen die afbreken verdelen zich over twee gelijke regels, geen los schuin woord. */
.legal-body .legal-sec h2{text-wrap:balance}
/* en/privacy, de tabellen waren smaller dan de kaders en sectielijnen (76ch). */
div.legal-table{max-width:none}
/* en/privacy, een sectie die op een tabel eindigt kreeg twee lijnen vlak
   onder elkaar. De laatste tabelregel is nu de sectielijn. */
.legal-sec:has(> div.legal-table:last-child){padding-bottom:0;border-bottom-color:transparent}
.legal-sec > div.legal-table:last-child{margin-bottom:0}
/* Inhoudsopgave in twee kolommen leest van boven naar beneden (01 tot 05
   links, 06 tot 10 rechts) in plaats van per rij. Rijhoogte blijft gelijk. */
@media (min-width:641px){
  .legal-toc ol{display:block;columns:2;column-gap:30px}
  .legal-toc li{break-inside:avoid;margin-bottom:2px}
}
/* privacy.html, de kolomscheiding van de twee tabellen onder elkaar op één lijn. */
.legal-table th:first-child:nth-last-child(2){width:44%}

/* ==================================================================
   Onderdeel F. Werken bij, vacature, Cases en Over ons (NL en EN).
   Responsief ronde 2, 18-09-2026.
   ================================================================== */

/* ---------- F1. Omlijnde knop met een dichte rand ----------
   De knop krijgt schuine hoeken door hem bij te knippen, maar zo werd ook
   de rand weggeknipt. Rechtsboven en linksonder ontbrak daardoor een stuk
   lijn. Hier tekenen we precies die twee schuine stukjes erbij, in de
   kleur die de rand op dat moment heeft (ook oranje bij aanwijzen).
   Die rand zelf staat verderop bij onderdeel E, voor de hele site. */
/* Twee knoppen onder elkaar op de telefoon even breed, recht onder elkaar */
@media (max-width:560px){
  .car-hero-x-actions,.about-hero-x-actions{
    display:grid;grid-template-columns:minmax(0,max-content);justify-content:center;gap:12px}
  .car-hero-x-actions .btn,.about-hero-x-actions .btn{justify-content:center}
}

/* ---------- F2. Zijmarge op telefoon en tablet ----------
   Het menu en de voettekst staan op de vaste paginamarge. De blokken op
   Werken bij en de vacaturepagina gebruikten een eigen marge (20 px op een
   telefoon, 38 tot 51 px op een tablet). Nu dezelfde marge als het menu. */
@media (max-width:1200px){
  .car-hero-x-inner,.car-why-inner,.car-vac-inner,.car-apply-inner,
  .vac-detail-hero-inner,.vac-detail-grid{padding-left:var(--pad-x);padding-right:var(--pad-x)}
}

/* ---------- F3. Werken bij: vacaturekaarten ----------
   Het raster vroeg minstens 320 px per kolom. Op een telefoon van 320 breed
   is er maar 272 px, dus liep de kaart rechts buiten beeld. Nu nooit breder
   dan de ruimte die er is. Past de labelrij niet, dan gaat VOORBEELD eronder. */
.car-vac-grid{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.car-vac-card-top{flex-wrap:wrap;row-gap:8px}
/* plaats en uren in elke kaart onder elkaar, zodat de kaarten gelijk lopen */
.car-vac-meta{flex-direction:column;align-items:flex-start;gap:6px}
/* gele melding even breed als de rij kaarten (breedte stond in de pagina) */
#vacNotice{max-width:none !important}

/* ---------- F4. Werken bij: rangorde van de koppen ----------
   Op telefoon en tablet waren de sectiekoppen (22 px) kleiner dan de
   kaarttitels (25 px). Sectiekop nu minstens 26 px, kaarttitel (20 px) en
   tussenkop (17 px) kleiner. Vanaf 1366 px breed verandert er niets. */
.car-why-head h2,.car-vac-head h2,.car-apply-aside h2{font-size:clamp(26px,2.2vw,34px)}
.car-vac-card h3{font-size:clamp(20px,1.83vw,25px)}
.car-tekst h3{font-size:clamp(17px,1.7vw,25px)}
/* Bannertitel. Op een telefoon geeft site-tune 33 tot 38 px, op een staande
   tablet viel hij terug naar 30 px. Vanaf 601 px nu minstens 38 px en
   daarna geleidelijk tot 48 px, op 1366 px blijft hij vrijwel gelijk. */
@media (min-width:601px){ .car-hero-x h1{font-size:clamp(38px,calc(1.6vw + 22px),48px)} }
/* kop Wat wij zoeken dichter op zijn eigen tekst (was 52 px lucht) */
.car-why-head{margin-bottom:24px}
/* tussen vacatures en Geen passende vacature geen dubbele sectieruimte meer */
.car-apply{padding-top:0}

/* ---------- F5. Werken bij: sollicitatieformulier ----------
   Op de telefoon staan de velden onder elkaar. Binnen een rij kwam er 16 px
   rijafstand bovenop de 18 px veldmarge, daardoor 34 en 18 px om en om. */
@media (max-width:520px){ .car-apply-row{row-gap:0} }
/* het tekstvak stond op de tekstregel en kreeg 7 px extra ruimte eronder */
.car-field textarea{display:block}
/* Uploadvak. Het vak is zelf een label en erfde daardoor de gespatieerde
   monoletter in hoofdletters, maar dan op 15 px. Oproep nu in de gewone
   letter, hulpregel in de maat van de labels. */
.car-file-text{font-family:var(--f-mono,monospace);font-size:11px;line-height:1.5;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.car-file-text b{font-family:var(--f-body,'Barlow',sans-serif);font-size:15px;font-weight:600;
  letter-spacing:0;text-transform:none;color:#fff}
@media (max-width:374px){
  .car-apply-form{padding:22px 18px}
  .car-file{gap:12px;padding:12px 14px}
}

/* ---------- F6. Vacaturepagina ----------
   Grote cijfers 01 02 03. Ze stonden 20 px boven de kaart, waardoor op een
   telefoon de bovenkant wegviel en ze tegen de schuine hoek liepen. Nu
   helemaal binnen de kaart, vrij van de hoek en boven de eerste lijstregel.
   Op een smalle telefoon is naast het label geen plek, daar vallen ze weg
   (het zijn watermerken, er gaat geen informatie verloren). */
.vac-block-num{top:8px;right:28px;font-size:clamp(64px,7vw,96px)}
@media (max-width:420px){ .vac-block-num{display:none} }
/* label VOORBEELD op een eigen regel, op dezelfde lijn als de titel,
   met ongeveer evenveel ruimte erboven als eronder */
.vac-voorbeeld-badge{display:table;margin:24px 0 0;line-height:1.3}
/* Zijkaart Snel overzicht. De sectie eromheen had overflow hidden, waardoor
   de plakregel (top 96 px) niet het scherm maar de sectie als maat nam, plus
   diens 96 px binnenruimte. De kaart stond daardoor altijd 96 px lager dan
   de eerste kaart en bleef bij scrollen niet staan. Met clip wordt de gloed
   nog steeds afgeknipt, maar werkt het plakken weer zoals bedoeld. */
.vac-detail-body{overflow:clip}
/* titel op tablet en computer breder, niet meer in drie smalle regels */
@media (min-width:768px){ .vac-detail-hero h1{max-width:26ch} }
/* kleine regel onder de knop leesbaar */
.vac-card-note{font-size:13px;color:rgba(255,255,255,.72)}
@media (max-width:640px){
  /* minder lege ruimte tussen de blokken op een telefoon */
  .vac-detail-hero{padding-bottom:44px}
  .vac-detail-body{padding-top:28px;padding-bottom:36px}
  .vac-cta{padding-top:44px}
}
@media (max-width:900px){
  /* schuine sierlijnen liepen dwars door titel en labels */
  .vac-detail-hero-beam{display:none}
}
@media (max-width:374px){
  .vac-block{padding:26px 20px 22px}
  .vac-card{padding:24px 20px}
}

/* ---------- F7. Cases ---------- */
/* Gegevensrijen. Op een telefoon hield het label 84 px breedte, waardoor de
   waarde in een smalle strook afbrak. Label nu klein boven de waarde. */
@media (max-width:640px){
  .ref-regel{grid-template-columns:minmax(0,1fr);gap:2px}
}
.ref-regel{align-items:baseline}
.ref-regel dd{overflow-wrap:break-word}
/* Tablet en liggende telefoon (641 tot 1023 px). De foto werd op een
   staande tablet een strook van 720 bij 200 px die het hoofd van de monteur
   wegsneed, en de tekst liep 100 tekens per regel. Nu foto links en
   gegevens rechts, en de omschrijving over de volle kaartbreedte eronder.
   Zo blijft het fotovak ongeveer zo breed als de foto zelf (hij wordt
   nauwelijks bijgesneden) en blijven de tekstregels rond 75 tekens. */
@media (min-width:641px) and (max-width:1023px){
  .ref-kaart{grid-template-columns:minmax(0,46%) minmax(0,1fr);grid-template-rows:auto 1fr auto;
    container-type:inline-size}
  /* fotovak minstens zo hoog als de foto bij zijn eigen verhouding (5 bij 3) */
  .ref-foto{grid-column:1;grid-row:1 / 3;min-height:160px;min-height:max(160px,27.6cqw)}
  .ref-info{display:contents}
  .ref-voorbeeld{grid-column:2;grid-row:1;justify-self:start;align-self:start;margin:22px 24px 0}
  .ref-velden{grid-column:2;grid-row:2;align-self:start;margin:14px 24px 20px}
  .ref-omschrijving{grid-column:1 / -1;grid-row:3;margin:0;padding:18px 24px 22px;max-width:calc(72ch + 48px)}
}
/* Telefoon: foto in de verhouding 3 bij 2 in plaats van een strook van 200 px */
@media (max-width:640px){
  .ref-foto{min-height:0;aspect-ratio:3/2}
}
/* Rangorde. REFERENTIE PROJECTEN is de kop, de drie soorten opdracht
   eronder staan op elk formaat ongeveer 0,7 keer zo groot. */
.ref-groep-kop h3{font-size:clamp(16px,1.22vw,23px)}
/* gele melding even breed als de kaarten */
.ref-melding{max-width:none}
/* label VOORBEELD iets groter en donkerder */
.ref-voorbeeld{font-size:11px;color:#6b5400}
/* paginakop groeit geleidelijk mee in plaats van tot 805 px gelijk te blijven */
.cases-hero h1{font-size:clamp(29px,calc(1.9vw + 23px),53px) !important}

/* ---------- F8. Over ons ---------- */
/* Groot aanhalingsteken. De bovenste punten vielen op computers buiten de
   sectie. Nu staat de bovenkant van het teken altijd 14 px onder de rand. */
.about-letter-x-quote.tl{top:calc(14px + .06em)}
/* op een telefoon kleiner, zodat het teken niet op de kop Twee broers rust,
   en het sluitteken onderaan zo verschoven dat het binnen de sectie blijft */
@media (max-width:640px){
  .about-letter-x-quote{font-size:140px}
  .about-letter-x-quote.br{bottom:-76px}
}

/* Vinkjeslijsten met hangende inspringing. Elk vinkje en zijn tekst worden
   een eigen rij, zodat een afgebroken regel onder de tekst verder gaat. */
.about-value-card p:has(> span:first-child){display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:.3em;align-items:baseline;align-content:start}
.about-value-card p:has(> span:first-child) br{display:none}

/* Kaarten naast elkaar vanaf 700 px in plaats van een voor een over de
   volle breedte. Werkgebieden in drie kolommen. */
@media (min-width:700px) and (max-width:980px){
  .about-values-x-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .about-value-card{padding:36px 22px 24px}
}
/* Certificaten. Vijf kaarten in drie kolommen lieten rechtsonder een gat.
   De bedrijfskaart staat nu breed bovenaan, de vier persoonlijke eronder
   (twee bij twee op tablet, vier naast elkaar vanaf 1100 px). */
@media (min-width:700px){
  .about-certs-x-lijst{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-certs-x-lijst > .about-value-card:first-child{grid-column:1 / -1}
  /* in de brede kaart staan de punten naast elkaar, anders blijft hij leeg */
  .about-certs-x-lijst > .about-value-card:first-child p:has(> span:first-child){
    grid-template-columns:auto auto auto auto;justify-content:start}
  .about-certs-x-lijst > .about-value-card:first-child p > span ~ span{margin-left:1.6em}
}
@media (min-width:1100px){
  .about-certs-x-lijst{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .about-certs-x-lijst > .about-value-card{padding:40px 24px 28px}
}
/* kaarttitels een duidelijke stap kleiner dan de sectiekop */
.about-value-card h4{font-size:clamp(18px,1.3vw,22px)}
@media (max-width:374px){ .about-value-card{padding:36px 20px 24px} }

/* ---------- F9. Sierlijnen in de banners van Werken bij en Over ons ----------
   De opmaak zocht de twee schuine lijnen met nth-of-type. Dat telt alle
   div's in de banner, dus werden ze nooit gevonden en stonden beide lijnen
   recht op de linkerrand. Dat is het dunne oranje lijntje links langs de
   banner. Uit, net als op de dienstpagina's, Contact en FAQ, en zoals
   eerder met de andere bewegende versiering in de banners. */
.car-hero-x-beam,.about-hero-x-beam{display:none !important}

/* ---------- F10. Geen los woord op de laatste regel ----------
   Browsers die het kennen (Chrome, Edge, Safari) verdelen de laatste regels
   van korte teksten zo dat er geen enkel woord alleen blijft staan. Andere
   browsers breken af zoals nu. */
.car-tekst p,.car-tekst li,.car-apply-aside p,.car-apply-points li,.car-apply-note,
.car-vac-card p,.vac-detail-lead,.vac-list li,.vac-card-note,.vac-cta p,
.ref-omschrijving,.ref-regel dd,.about-letter-x-body p,.about-value-card p{text-wrap:pretty}

/* ------------------------------------------------------------------
   Responsief ronde 2, onderdeel G. FAQ en Sectoren (NL en EN).
   Toegevoegd 18-09-2026.
   ------------------------------------------------------------------ */

/* ===== FAQ, vraagkaarten ===== */

/* Het raster van een categorie had kolommen van "1fr". Zo'n kolom wordt
   nooit smaller dan het langste woord erin, dus "werkvergunningssystemen?"
   duwde op 320 breed de hele categorie 9 px breder dan de rest.
   minmax(0,1fr) houdt alle kaarten even breed. Past een woord echt niet,
   dan breekt het af in plaats van de kaart op te rekken. */
.faq-cat-x-inner{ grid-template-columns:minmax(0,1fr); }
.faq-x-q-text{ min-width:0; overflow-wrap:anywhere; }

/* Telefoon. Nummer, vraag en knop stonden naast elkaar, voor de vraag bleef
   maar 138 px over (op 320) en ze liep over drie regels. Het nummer staat
   nu als klein label boven de vraag, de knop blijft rechts. De vraag was
   15 px in de smalle koppenletter en oogde kleiner dan het antwoord eronder
   (15 px gewone letter), nu 17 px. Antwoord lijnt uit met de vraag. */
@media (max-width:640px){
  .faq-x-q{
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    column-gap:14px; row-gap:5px; align-items:center;
    padding:16px 16px 16px 18px;
  }
  .faq-x-q-no{ grid-column:1; grid-row:1; min-width:0; font-size:11px; line-height:1; }
  .faq-x-q-text{ grid-column:1; grid-row:2; font-size:17px; line-height:1.25; }
  .faq-x-q-toggle{ grid-column:2; grid-row:1 / span 2; }
  .faq-x-a-inner{ padding:16px 18px 20px 18px; }
}

/* ===== FAQ, categoriekop ===== */

/* Laptop en groot scherm. De linkerkolom was vast 340 px terwijl de kop
   meegroeit tot 34 px, daardoor braken "Team, kwaliteit & verzekering."
   en "Veiligheid & werkvergunningen." af. De kolom groeit nu mee met de
   kop, tot 420 px. Tot 1214 breed blijft hij 340 px zoals nu. */
@media (min-width:961px){
  .faq-cat-x-inner{ grid-template-columns:clamp(340px, 28vw, 420px) minmax(0,1fr); }
}
/* De categorieband was 1200 px inclusief zijmarge. Omdat de zijmarge op
   brede schermen groeit (24 naar 64 px) werd de inhoud juist smaller op
   een groter scherm (752 px op 1366, 672 px op 2560). Nu blijft de
   inhoud zelf 1200 px en groeit de marge eromheen. De vraagkaarten zijn
   dan 758 px op 1366 en vanaf 1500 vast 720 px, ook op 2560.
   LET OP. Als onderdeel C een gezamenlijke paginabreedte kiest die ook
   .faq-cat-x-inner meeneemt, vervalt deze ene regel. */
.faq-cat-x-inner{ max-width:calc(1200px + 2 * var(--pad-x)); }

/* Telefoon en tablet. Het grote sierlijke cijfer was 80 tot 101 px, groter
   dan elke kop op de pagina, terwijl het label eronder hetzelfde zegt.
   De intro liep in een smal blok van 38 tekens met rechts veel leegte, de
   antwoorden juist over 100 tekens. Beide nu op een rustige regellengte. */
@media (max-width:960px){
  .faq-cat-x-mega{ font-size:clamp(56px, 9vw, 80px); }
  .faq-cat-x-head p{ max-width:62ch; }
  .faq-x-a p{ max-width:62ch; }
}

/* ===== FAQ, openingsband ===== */

/* Kop evenwichtig over twee regels in plaats van een los laatste woord.
   Het schuine deel blijft bij elkaar. */
.faq-hero-x-inner h1{ text-wrap:balance; }
.faq-hero-x-inner h1 em{ white-space:nowrap; }

/* Twee dunne lijnen stonden los tegen de linkerrand van de band. De opmaak
   zocht ze met nth-of-type, maar dat telt alle div's, dus hun plaats en
   draaiing werden nooit toegepast. Weg, net als de andere versiering. */
.faq-hero-x-beam{ display:none !important; }

/* Telefoon. Knoppen onder elkaar even breed, zoals op de dienstpagina's. */
@media (max-width:600px){
  .faq-hero-x-actions,
  .faq-cat-x ~ .cta-big .cta-big-actions{
    flex-direction:column; align-items:stretch; width:100%;
  }
  .faq-hero-x-inner .faq-hero-x-actions a.btn.btn-lg,
  .faq-cat-x ~ .cta-big .cta-big-actions a.btn.btn-lg{ justify-content:center; text-align:center; }

  /* Kerncijfers als gecentreerd blok, cijfers en labels elk in een eigen
     kolom zodat de labels op een lijn beginnen. */
  .faq-hero-x-stats{
    grid-template-columns:auto auto; justify-content:center; justify-items:start;
    column-gap:12px; row-gap:8px; align-items:baseline;
  }
  .faq-hero-x-stat{ display:contents; }
  .faq-hero-x-stat-num{ justify-self:end; }
}
/* Smalste telefoons. "Mijn vraag staat er niet bij" en de belknop met
   nummer pasten net niet op een regel, iets minder letterafstand en
   binnenmarge. */
@media (max-width:374px){
  .faq-hero-x-inner .faq-hero-x-actions a.btn.btn-lg,
  .faq-cat-x ~ .cta-big .cta-big-actions a.btn.btn-lg{
    padding-left:14px !important; padding-right:14px !important; letter-spacing:.08em !important;
  }
  /* EN-label "Breakdown, question or project" brak af met het stipje los */
  .faq-cat-x ~ .cta-big .kicker{ letter-spacing:.08em !important; }
}

/* ===== FAQ en Sectoren, openingskop ===== */

/* Onder 600 px geldt clamp(28px,8.5vw,38px) uit het telefoonblok, daarboven
   clamp(30px,3.2vw,48px). Bij 601 px viel de kop daardoor terug van 38
   naar 30 px, op een tablet was hij kleiner dan op een telefoon. Nu begint
   de tabletmaat waar de telefoonmaat ophoudt en groeit dan door. */
@media (min-width:601px){
  .sectoren-hero-x-inner h1,
  .faq-hero-x-inner h1{ font-size:clamp(38px, 3.2vw, 48px); }
}

/* ===== FAQ en Sectoren, afsluitende band ===== */

/* De kop stond via layout-fix.css tot 875 px breed op 21 px, kleiner dan de
   categoriekoppen (22 px) en sectortitels (24 px) erboven. Nu minstens
   28 px en vanaf 550 px dezelfde 33 px als op de computer. */
.faq-cat-x ~ .cta-big h2,
.sectoren-kort ~ .cta-big h2{
  font-size:clamp(28px, calc(2vw + 22px), 33px) !important;
  text-wrap:balance;
}

/* ===== Sectoren ===== */

/* Boven de intro stond de sectieruimte (100 px) plus een oude bovenmarge
   van de alinea (24 px), bijna het dubbele van de ruimte tussen intro en
   tegels (56 px). De sectie gebruikt nu dezelfde zijmarge als menu en
   voettekst, dat was 30 tegen 24 px. */
.sectoren-kort .sectoren-kort-lead{ margin-top:0; }
@media (min-width:641px){
  section.sectoren-kort{ padding:clamp(56px, 5vw, 72px) var(--pad-x); }
}

/* Tablet. De drie tegels stonden onder elkaar, 700 tot 780 px breed met
   een foto als lage strook en een witte balk die voor 70% leeg was.
   Vanaf 700 px naast elkaar, net als op 1024. */
@media (min-width:700px) and (max-width:980px){
  .sectoren-kort .sectoren-kort-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* ------------------------------------------------------------------
   Responsief ronde 2, onderdeel H. Toegevoegd 18-09-2026.
   Binnenkort-pagina's (klantportaal, infohub, webshop, ook EN) en de
   404-pagina. Alles hangt aan klassen die alleen op die pagina's staan:
   .stage voor de binnenkort-pagina's, .gloed voor de 404. Andere pagina's
   merken hier niets van.
   ------------------------------------------------------------------ */

/* ===== Binnenkort-pagina's ===== */

/* Grote oranje kop. Wie op zijn telefoon "beweging beperken" aan heeft
   (en de schermafdrukken van de beoordeling) kreeg een extra oranje rand
   van 1,5 px om elke letter. Met de krappe letterafstand liepen de letters
   daardoor in elkaar over. Zonder die rand is de kop gelijk aan wat alle
   andere bezoekers zien. */
@media (prefers-reduced-motion:reduce){
  .stage .kw .w1{ -webkit-text-stroke-width:0; }
}
/* Op tablet en telefoon wat meer lucht tussen de letters, op de telefoon
   het meest. Laptop en groter blijven zoals ze waren. */
@media (max-width:1100px){ .stage .kw{ letter-spacing:0; } }
@media (max-width:640px){ .stage .kw{ letter-spacing:.01em; } }
/* Heel brede schermen: de kop stopte op 96 px en werd een klein eiland.
   Onder 1477 breed verandert er niets, daarboven groeit hij door tot 150 px. */
.stage .kw{ font-size:clamp(36px, 6.5vw, 150px); }
@media (min-width:1600px){
  .stage .hts-bouw{ font-size:clamp(12px, calc(12px + (100vw - 1600px) * .0025), 14.4px); }
  .stage .hts-bouw-tool{ width:1.4em; height:1.4em; }
}

/* Gloed achter de kop. Aan de rand van de gloed lag een dunne ring die
   een tint donkerder was dan de achtergrond. Die kwam van de vervaging
   (filter blur) over een verloop dat met een knik stopte. Nu een verloop dat
   zelf zacht uitloopt tot precies de achtergrond, zonder vervaging.
   Op lage schermen past hij tussen menu en voet in plaats van erdoor. */
.stage .kw-wrap{ --gloed:.135; }
.stage .kw-wrap::after{
  width:min(70vw, max(820px, 42vw), calc(100vh - 200px));
  height:min(70vw, max(820px, 42vw), calc(100vh - 200px));
  filter:none;
  background:radial-gradient(closest-side,
    rgba(232,100,26,var(--gloed)) 0%,
    rgba(232,100,26,calc(var(--gloed) * .956)) 12.5%,
    rgba(232,100,26,calc(var(--gloed) * .844)) 25%,
    rgba(232,100,26,calc(var(--gloed) * .681)) 37.5%,
    rgba(232,100,26,calc(var(--gloed) * .5)) 50%,
    rgba(232,100,26,calc(var(--gloed) * .319)) 62.5%,
    rgba(232,100,26,calc(var(--gloed) * .156)) 75%,
    rgba(232,100,26,calc(var(--gloed) * .056)) 85%,
    rgba(232,100,26,calc(var(--gloed) * .0125)) 93%,
    rgba(232,100,26,0) 100%);
}
/* even sterk als voorheen: op de telefoon was de vervaagde gloed zwakker */
@media (max-width:640px){ .stage .kw-wrap{ --gloed:.092; } }

/* Logo: de oranje gloed rond het logo werd afgeknipt door het vak eromheen,
   zo ontstond een zichtbare rechthoek. De gloed mag nu gewoon uitlopen. */
.stage .nav-logo .logo-mark{ overflow:visible; }

/* Taalschakelaar even hoog als de terugknop ernaast (38 px, op de telefoon 36 px) */
.stage .nav-lang a, .stage .nav-lang span{ display:inline-flex; align-items:center; height:30px; }

@media (max-width:640px){
  .stage .nav-lang a, .stage .nav-lang span{ height:28px; }
  /* Terugknop: de tekst "Terug naar home" was met display:none weg, daardoor
     had de ronde knop voor schermlezers geen naam. Nu onzichtbaar maar leesbaar. */
  .stage .nav-back-txt{ display:block; position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  /* tikvlak 44 px, de zichtbare knoppen blijven even groot */
  .stage .nav-back{ position:relative; }
  .stage .nav-back::after{ content:""; position:absolute; inset:-4px; border-radius:50%; }
  .stage .nav-lang a{ position:relative; }
  .stage .nav-lang a::after{ content:""; position:absolute; inset:-8px -2px; }
}

/* Voet. Copyright en TEAM-INLOG waren te donker (contrast 3 tot 4 op 1). */
.stage .foot{ color:rgba(255,255,255,.52); }
.stage .foot-sep{ opacity:1; color:rgba(255,255,255,.3); }
.stage #teamToggle{ opacity:1 !important; color:rgba(255,255,255,.52); }
.stage #teamToggle:hover{ color:#fff; }

/* Telefoon en staande tablet: copyright en links onder elkaar en allebei
   in het midden. De puntjes vallen weg, anders bleef er een puntje los aan
   het eind van een regel hangen. */
@media (max-width:900px){
  .stage .foot{ flex-direction:column; justify-content:center; text-align:center; gap:12px; }
  .stage .foot-links{ justify-content:center; gap:0 18px; }
  .stage .foot-sep{ display:none; }
}
@media (max-width:640px){
  /* ruimer tikvlak voor de voetlinks */
  .stage .foot-links a{ display:inline-block; padding:14px 2px 13px; }
  .stage .foot{ gap:2px; padding-top:22px; padding-bottom:18px; }
  /* bedrijfsnaam en plaats als twee regels, zonder puntje (werkt zodra de
     copyrightregel de span-indeling uit de HTML-wijziging heeft) */
  .stage .foot-copy-sep{ display:none; }
  .stage .foot-copy-plaats{ display:block; margin-top:4px; }
}
/* Webshop heeft vier voetlinks. Die passen onder 360 breed niet op een
   regel, dan netjes twee per regel in plaats van drie plus een. */
@media (max-width:359px){
  .stage .foot-links:has(> a:nth-of-type(4)){ display:grid; grid-template-columns:auto auto; justify-content:center; column-gap:26px; }
}
/* Zijmarge van de voet gelijk aan die van het menu (24 px tot 1200 breed) */
@media (max-width:1200px){
  .stage .foot{ padding-left:var(--pad-x); padding-right:var(--pad-x); }
}


/* ===== 404-pagina ===== */

/* De kolom was bedoeld als 600 px, maar de algemene regel .wrap{max-width:1400px}
   hierboven won. Daardoor liep de lijn boven Veelgezocht bijna schermbreed. */
.gloed ~ .wrap{ max-width:600px; }

/* Gloed hing vast aan de bovenkant van het scherm, op een groot scherm
   380 px boven het cijfer. Nu zit hij aan het cijfer zelf en schaalt mee. */
.gloed{ display:none; }
.gloed ~ .wrap .code{ position:relative; }
.gloed ~ .wrap .code::before{
  content:""; position:absolute; left:50%; top:50%; z-index:-1; pointer-events:none;
  width:3.7em; height:3.7em; border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(232,100,26,.35), transparent 70%);
  filter:blur(.65em);
}
/* Cijfer schaalt ook met de schermhoogte. Alleen onder ongeveer 700 px hoogte
   merkbaar, dus vooral op een liggende telefoon. */
.gloed ~ .wrap .code{ font-size:clamp(84px, min(20vw, 24vh), 168px); }

/* Liggende telefoon: beide knoppen zonder scrollen in beeld */
@media (orientation:landscape) and (max-height:500px){
  body:has(> .gloed){ padding-top:24px; padding-bottom:24px; }
  .gloed ~ .wrap .kicker{ margin-bottom:14px; }
  .gloed ~ .wrap p.lead{ margin-top:12px; max-width:62ch; }
  .gloed ~ .wrap .knoppen{ margin-top:20px; }
}

/* Uitlegtekst: geen twee losse woordjes op de laatste regel */
.gloed ~ .wrap p.lead{ text-wrap:balance; }

/* Tweede knop: de rand liep niet mee over de schuine hoeken. Twee dunne
   diagonalen precies op de afgeschuinde kant maken het kader rondom dicht. */
.gloed ~ .wrap a.knop.tweede{
  --rand:rgba(255,255,255,.2);
  background-image:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--rand) calc(50% - 1px), var(--rand) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to top right, transparent calc(50% - 1px), var(--rand) calc(50% - 1px), var(--rand) calc(50% + 1px), transparent calc(50% + 1px));
  background-size:12px 12px, 12px 12px;
  background-position:top right, bottom left;
  background-repeat:no-repeat;
  background-origin:border-box;
}
.gloed ~ .wrap a.knop.tweede:hover{ --rand:rgba(232,100,26,.6); }

/* Veelgezocht: twee rijen van drie, op de telefoon drie rijen van twee
   met een tikvlak van 44 px. Lijn even breed als de kolom. */
.gloed ~ .wrap .snel{ display:grid; grid-template-columns:repeat(3, auto); justify-content:center; }
.gloed ~ .wrap .snel-titel{ grid-column:1 / -1; font-size:11px; color:rgba(255,255,255,.62); }
.gloed ~ .wrap .snel a{ padding:8px 11px; }
@media (max-width:560px){
  .gloed ~ .wrap .snel{ grid-template-columns:repeat(2, auto); }
  .gloed ~ .wrap .snel a{ padding:12px 6px; line-height:20px; }
}

/* Bedrijfsregel: lichter (contrast ruim boven 4,5 op 1) en op de telefoon
   naam, plaats en nummer onder elkaar (werkt met de span-indeling uit de
   HTML-wijziging, zonder die wijziging alleen lichter). */
.gloed ~ .wrap .voet{ color:rgba(255,255,255,.62); }
.gloed ~ .wrap .voet span:not(.voet-sep){ white-space:nowrap; }
@media (max-width:560px){
  .gloed ~ .wrap .voet{ font-size:11px; line-height:1.9; }
  .gloed ~ .wrap .voet span{ display:block; }
  .gloed ~ .wrap .voet .voet-sep{ display:none; }
}

/* ------------------------------------------------------------------
   Responsief ronde 2, onderdeel C. Een vaste kantlijn op laptop en groot
   scherm (vanaf 1201 breed). Toegevoegd 18-09-2026.
   Menu, hero, secties en voettekst hadden elk een eigen breedte, dus elk
   een eigen linkerlijn (op 1366 bijvoorbeeld 36, 67, 117 en 24 px). Op
   2560 was de inhoud zelfs smaller dan op 1366, omdat de marge van 64 px
   binnen de maximale breedte van 1180 px viel.
   Nu is er een inhoudsbreedte van 1280 px, en de marge valt daarbuiten.
   Linkerlijn = de grootste van var(--pad-x) en (schermbreedte - 1280) / 2.
   Op 1280 is dat 24, op 1366 43, op 1440 80, op 1920 320 en op 2560 640.
   Onder 1201 verandert er niets, daar staat alles al op var(--pad-x).
   Gecentreerde hero's blijven gecentreerd. Smalle leeskolommen (juridische
   pagina's, de brief op Over ons) blijven smal en staan in het midden.
   ------------------------------------------------------------------ */
@media (min-width:1201px){
  :root{ --hts-inhoud:1280px; }

  /* menu: logo en taalknop op dezelfde lijnen als de inhoud. Het menu staat
     vast, dus 100% is hier de schermbreedte zonder schuifbalk, precies
     dezelfde maat waarin de secties hieronder centreren. Alleen #nav, want
     klantportaal, infohub en webshop hebben een eigen .nav met eigen marge. */
  #nav, #nav:not(.scrolled), #nav.scrolled{
    padding-left:max(var(--pad-x), calc((100% - var(--hts-inhoud)) / 2)) !important;
    padding-right:max(var(--pad-x), calc((100% - var(--hts-inhoud)) / 2)) !important;
  }
  /* de taalknop hield 6 px van de rand, nu eindigt hij op de lijn */
  #nav .nav-lang{ margin-right:0 !important; }

  /* blokken met een eigen zijmarge: 1280 inhoud plus twee keer de marge.
     .container stond op 1180 met de marge erin, de dienst-hero op 1280,
     de vacature op 1080, Werken bij op 1100 tot 1200 met een marge tot 64 px. */
  .container,
  .section > .wrap,
  .svc-hero-x-inner,
  .contact-channels-x-inner,
  .contact-form-x-inner,
  .faq-cat-x-inner,
  .car-why-inner,
  .car-vac-inner,
  .car-apply-inner,
  .vac-detail-hero-inner,
  .vac-detail-grid{
    box-sizing:border-box;
    max-width:calc(var(--hts-inhoud) + 2 * var(--pad-x)) !important;
    padding-left:var(--pad-x) !important;
    padding-right:var(--pad-x) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* blokken zonder eigen marge, in een sectie die de marge geeft:
     homepagina-hero en voettekst (waren 1360), kaartblok op Contact en de
     sectorkaarten (waren 1200, met 50 en 30 px marge in de sectie) */
  .hero-v3-grid,
  .footer-top,
  .footer-bottom,
  .map-panel-inner,
  .sectoren-kort-inner{
    max-width:var(--hts-inhoud) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .map-panel,
  .sectoren-kort{
    padding-left:var(--pad-x) !important;
    padding-right:var(--pad-x) !important;
  }

  /* vragenblok op de homepagina sprong 56 tot 80 px in, nu volle breedte */
  .faq-blok{ max-width:none; }
  /* FAQ-pagina: de linkerkolom groeit mee, zodat alle vijf categoriekoppen
     op een regel passen (breedste kop is 407 px op groot scherm) */
  .faq-cat-x-inner{ grid-template-columns:410px minmax(0, 1fr); }
  /* dienstpagina's: de foto staat rechts tegen de lijn in plaats van
     midden in zijn kolom, dus hij eindigt waar de kaarten eronder eindigen */
  .svc-hero-x-img-wrap{ margin-left:auto; margin-right:0; }
  /* Werken bij: twee kolommen vacatures zoals eerst, maar nu over de volle
     breedte. De gele melding erboven even breed als de kaarten. */
  .car-vac-grid{ grid-template-columns:repeat(auto-fill, minmax(420px, 1fr)); }
  .car-vac-notice{ max-width:none !important; }

  /* smalle leeskolommen: vaste breedte, midden onder de rest. Ze werden
     smaller naarmate het scherm breder werd (juridisch 832 naar 752 px,
     brief 732 naar 652 px), nu overal even breed als op 1366. */
  .legal-body .legal-wrap{ max-width:calc(832px + 2 * var(--pad-x)); }
  .about-letter-x .about-letter-x-inner{ max-width:calc(732px + 2 * var(--pad-x)); }
  /* de grote aanhalingstekens hangen aan de brief, niet aan de schermrand */
  .about-letter-x .about-letter-x-quote.tl{ left:calc(50% - 366px - 150px); }
  .about-letter-x .about-letter-x-quote.br{ right:calc(50% - 366px - 150px); }
}

/* Voettekst, kolom Contact: de plaatsregel stond in 16 px en in 40 procent
   wit, de regels erboven in 14 px. Nu dezelfde maat en regelhoogte als de
   andere regels en iets gedempt (55 procent wit, zoals de copyrightregel,
   contrast ruim boven 4,5 op 1). Geldt op elk formaat, het probleem ook.
   Met de smallere voetkolommen op 1366 en 1440 past de regel zo weer op
   een regel, ook de Engelse met The Netherlands. */
.footer .footer-col li:not(:has(a)){
  font-size:14px;
  line-height:1.4;
  padding:2.6px 0;
  color:rgba(255,255,255,.55) !important;
  text-wrap:balance;
}

/* ------------------------------------------------------------------
   Responsief ronde 2, correcties na de tweede meting. 18 en 19-09-2026.
   Plaatsnaam, postcode, labels in de bedrijfsgegevens en het &-teken in
   koppen breken niet meer af: dat gebeurt met harde spaties in de HTML.
   ------------------------------------------------------------------ */

/* FAQ op de dienstpagina's. Een oude regel in layout-fix.css zette het
   antwoord op elk formaat 76 px van links en 56 px van rechts, ook op de
   telefoon. Op 320 breed bleef zo een tekstkolom van 140 px over, met een
   woord per regel. Het antwoord begint nu precies onder de tekst van de
   vraag (60 + 20 op tablet en computer, 32 + 12 op de telefoon). */
.faq-v2-a-inner{padding:0 64px 0 80px !important}
@media (max-width:640px){
  .faq-v2-q{grid-template-columns:32px minmax(0,1fr) 40px;gap:12px}
  .faq-v2-a-inner{padding:0 14px 0 44px !important}
}

/* Contact, de gegevens naast de kaart. Het label Openingstijden is sinds
   de vergroting naar 11 px 123 px breed, de labelkolom was 120. */
@media (min-width:561px){
  .map-meta-row span:first-child{width:132px}
}

/* Knop MEER LEZEN op de dienst-tegels van de homepagina. Hetzelfde gebrek
   als bij de omlijnde knoppen (onderdeel E): components.css knipt de hoeken
   7 px schuin weg met clip-path en daarmee ook de rand, zodat de omlijning
   op twee hoeken open lag. Zelfde oplossing met de maat van deze hoek:
   9,90 px (7 x wortel 2) min 0,83 px (rand) min 0,47 px (halve pixel
   overlap zodat de lijn scherp blijft) is 8,6 px. */
.svc-card-cta{position:relative;contain:paint}
.svc-card-cta::after{
  content:"";position:absolute;left:50%;top:50%;
  box-sizing:content-box;
  width:calc(100% + 60px);
  height:70.711%;
  padding:calc(70.711% - 8.6px) 0 0;
  border:0 solid;
  border-top-width:inherit;border-bottom-width:inherit;
  border-color:inherit;
  transform:translate(-50%,-50%) rotate(45deg);
  pointer-events:none;
}

/* Kaarten met afgeschuinde hoeken en een zichtbare rand: het
   contactformulier, de vacaturekaarten op Werken bij, de blokken op de
   vacaturepagina en het zijkaartje met de oranje rand. Ook daar viel de
   rand op de schuine hoeken weg. Kaart en achtergrond hebben bijna dezelfde
   kleur, dus de omlijning leek open. Zelfde techniek als hierboven. De
   kaarten knippen al af met overflow hidden, het gedraaide vlak kan nergens
   uitsteken. Hoek 22 px: 31,11 - 1,30 = 29,8. Hoek 20 px: 28,28 - 1,30 = 27. */
.contact-form-x-card::after,.vac-block::after{--hoek-k:29.8px}
.vac-card::after,.car-vac-card::after{--hoek-k:27px}
.contact-form-x-card::after,.vac-block::after,.vac-card::after,.car-vac-card::after{
  content:"";position:absolute;left:50%;top:50%;
  box-sizing:content-box;
  width:calc(100% + 60px);
  height:70.711%;
  padding:calc(70.711% - var(--hoek-k)) 0 0;
  border:0 solid;
  border-top-width:inherit;border-bottom-width:inherit;
  border-color:inherit;
  transform:translate(-50%,-50%) rotate(45deg);
  pointer-events:none;
}

/* Over ons, de kaarten Werkgebied en Certificaten staan op een bijna even
   donkere achtergrond, dus ook daar leek de omlijning op de schuine hoeken
   open. ::before en ::after zijn in deze kaart al in gebruik, dus hier
   tekent de achtergrond zelf de twee schuine lijnen (1 px, in de kleur van
   de rand, ook oranje bij aanwijzen). */
.about-value-card{
  --hoek-kleur:rgba(255,255,255,.08);
  background:
    linear-gradient(to bottom left, transparent 50%, var(--hoek-kleur) 50%, var(--hoek-kleur) calc(50% + 1px), transparent calc(50% + 1px)) right top / 22px 22px no-repeat border-box,
    linear-gradient(to top right, transparent 50%, var(--hoek-kleur) 50%, var(--hoek-kleur) calc(50% + 1px), transparent calc(50% + 1px)) left bottom / 22px 22px no-repeat border-box,
    linear-gradient(160deg,rgba(22,27,34,.92) 0%,rgba(13,17,23,.95) 100%);
}
.about-value-card:hover{--hoek-kleur:rgba(232,100,26,.4)}

/* Menu op de computer, Diensten. core.css (regel 260) draait bij aanwijzen
   het oude pijltje 180 graden. Dat pijltje is in nav-pro.css vervangen door
   de oranje onderstreping, maar de draairegel bleef staan. Daardoor klapte
   de onderstreping bij aanwijzen om en stond hij 40 px links naast het
   woord. Nu dezelfde onderstreping als bij de andere menuknoppen, ook
   zolang de muis in het uitklapmenu staat. Dezelfde oude regel gaf de
   lijn ook 6 px marge links. Nu 2 px binnen het woord aan beide kanten,
   net als bij Sectoren, Cases en de rest. */
.nav-items .has-sub:hover > a::after{transform:scaleX(1)}
.nav-items .has-sub > a::after{margin-left:0;right:32px !important}

/* Chatknop onderaan de pagina. Tussen 601 en 1519 breed viel de knop over
   de laatste link van de voetregel (Cookies of Voorwaarden), ook op een
   liggende telefoon. De voetregel houdt rechts nu zoveel ruimte vrij als
   de knop nodig heeft, gerekend vanaf de kantlijn van de inhoud (24 px, en
   vanaf 1201 breed de helft van wat naast de 1280 overblijft). Knop 56 px
   op 14 px van de rand: 80. Knop 68 op 28: 106. Knop 84 op 28: 132, met
   10 px extra voor de schuifbalk van Windows. Onder 601 breed staat er al
   een vrije strook onder de footer, vanaf 1520 staat de knop naast de
   inhoud. */
@media (min-width:601px) and (max-width:640px){
  .footer-bottom{padding-right:max(0px, calc(80px - var(--pad-x)))}
}
@media (min-width:641px) and (max-width:1024px){
  .footer-bottom{padding-right:max(0px, calc(106px - var(--pad-x)))}
}
@media (min-width:1025px) and (max-width:1519px){
  .footer-bottom{padding-right:max(0px, calc(132px - max(var(--pad-x), (100vw - 1280px) / 2)))}
}
@media (max-height:500px) and (orientation:landscape){
  .footer-bottom{padding-right:max(0px, calc(80px - var(--pad-x)))}
}

/* Voetregel op de telefoon (copyright en de links Privacy, Voorwaarden,
   Cookies). Stond in een kolom met centreren uit layout-fix.css: was de
   tekst smaller dan de regel, dan schoof hij naar het midden, anders stond
   hij links. Daardoor per pagina en per telefoon anders (op 390 breed
   begon de linkregel op 32, 40 of 69 px). Nu altijd op de kantlijn, net als
   de rest van de footer. */
@media (max-width:640px){
  .footer-bottom{align-items:flex-start}
}

/* Chatknop in het eerste scherm van een telefoon. Op 320 bij 568 viel hij
   op acht pagina's over een hoofdknop (Plan een intake, Scope bekijken,
   SLA opties), op 360 bij 800 over Solliciteer op deze functie. Op de
   telefoon komt de knop nu in beeld zodra er 80 px gescrold is. Browsers
   die scroll-animaties niet kennen, tonen hem gewoon meteen, zoals
   voorheen. Staat de knop nog uit beeld, dan is hij ook niet aan te
   tikken (visibility). */
@media (max-width:640px), (max-height:500px) and (orientation:landscape){
  @supports (animation-timeline: scroll()){
    .kn-fab{animation:knFabErbij linear both;animation-timeline:scroll(root);animation-range:0 80px}
  }
}
@keyframes knFabErbij{
  from{opacity:0;visibility:hidden;transform:translateY(16px)}
  to{opacity:1;visibility:visible;transform:none}
}

/* Paginatitels. Tot 600 breed geldt clamp(28px,8.5vw,38px) (telefoonblok
   bovenin dit bestand), op een grote telefoon dus 37 tot 38 px. Daarboven
   namen de eigen regels het over en viel de titel terug naar 29 tot 33 px:
   op een tablet kleiner dan op een telefoon. Voor Werken bij, Sectoren en
   FAQ was dat al rechtgezet (minstens 38 vanaf 601). Nu ook voor Over ons,
   Contact, de vacatures, de juridische pagina's, de dienstpagina's, de
   homepagina en de 404. Elke titel begint op 38 en groeit met zijn eigen
   tempo door naar de computermaat, die blijft gelijk. */
@media (min-width:601px){
  .about-hero-x-inner h1,
  .contact-hero-x-inner h1,
  .vac-detail-hero h1,
  .svc-hero-x-left h1{font-size:clamp(38px,3.2vw,48px)}
  .legal-hero-x h1{font-size:clamp(38px,3.6vw,53px)}
  .hero-v3 h1{font-size:clamp(38px,2.6vw,50px)}
  .gloed ~ .wrap h1{font-size:clamp(38px,4.4vw,40px)}
}
/* 404, het grote getal. Sprong van 86 px op een grote telefoon naar 154 px
   op een staande tablet, vier keer zo hoog als de titel eronder. Nu 108 px
   op een staande tablet, op laptop en computer blijft het 168 px. */
.gloed ~ .wrap .code{font-size:clamp(84px, min(14vw, 22vh), 168px)}

/* Foto in de banner van de dienstpagina's. Op de telefoon staand (4:5):
   340 px hoog op 320 breed, 478 px op 430 breed. Op de tablet dezelfde
   foto liggend (16:9, 405 px). Hoe smaller het scherm, hoe hoger de foto.
   Nu op de telefoon ook 16:9, zodat hij gelijk oploopt met de breedte en
   bij 561 px naadloos overgaat in de tabletmaat. */
@media (max-width:560px){
  .svc-hero-x .svc-hero-x-img-wrap{aspect-ratio:16/9}
}

/* Voetregel onder de footer op de telefoon. Er stond 120 px lege donkere
   ruimte onder de laatste regel, voor de chatknop (56 px op 14 px van de
   rand, dus 70 px) en de knop naar boven (42 px op 22 px, dus 64 px).
   88 px is genoeg voor beide, met 18 px lucht. */
@media (max-width:600px){
  .footer{padding-bottom:88px !important}
}

/* Twee knoppen in de banner van de dienstpagina's op een liggende tablet
   (961 tot 1199 breed). De tekstkolom is daar smal, de tweede knop viel
   op een eigen regel en was veel smaller dan de eerste. Nu vullen de
   knoppen samen de regel: passen ze naast elkaar, dan delen ze de breedte,
   vallen ze onder elkaar, dan zijn ze allebei even breed. */
@media (min-width:961px) and (max-width:1199px){
  .svc-hero-x-actions .btn{flex:1 1 auto;justify-content:center}
}

/* Kaarten Andere diensten onderaan de dienstpagina's. De tekst hangt vanaf
   de onderkant van de kaart, dus een beschrijving van drie regels duwt de
   titel 21 px hoger dan die naast een beschrijving van twee regels. De
   beschrijving krijgt nu per breedte de hoogte van de langste beschrijving
   in die rij (gemeten op alle tien dienstpagina's, NL en EN): 5 regels tot
   700 breed, 4 tot 844, 3 tot 1180, daarna 2. De titels staan zo altijd op
   één lijn, de knop Meer lezen onderaan ook. */
@media (min-width:561px){
  .svc-cross-card-bot p{min-height:calc(2 * 1.5em)}
}
@media (min-width:561px) and (max-width:1179px){
  .svc-cross-card-bot p{min-height:calc(3 * 1.5em)}
  /* titels hier soms op twee regels (Onderhoud & beheer in het Engels),
     dus ook de titel krijgt twee regels ruimte */
  .svc-cross-card-bot h3{min-height:calc(2 * 1.05em)}
}
@media (min-width:561px) and (max-width:843px){
  .svc-cross-card-bot p{min-height:calc(4 * 1.5em)}
}
@media (min-width:561px) and (max-width:699px){
  .svc-cross-card-bot p{min-height:calc(5 * 1.5em)}
}

/* Voorwaarden, privacy en cookies: de kleine oranje teksten (INHOUD, de
   nummers 01 tot 09, ARTIKEL 1, 1.1 en de links) haalden 4,1 op 1 op het
   crème en 3,8 op 1 op het beige inhoudsvak, onder de norm van 4,5 op 1.
   Alleen voor deze teksten een iets donkerder oranje (#b0430b): 5,2 op
   crème, 4,8 op beige, 5,8 op wit. De knoppen houden hun eigen kleur. */
.legal-body .vw-kaart-titel,
.legal-body .legal-toc-title,
.legal-toc a,
.legal-sec-no,
.legal-lid > span:first-child,
.legal-body a:not(.btn){--orange-3:#b0430b}

/* Voetregel in de kaarten op de dienstpagina's (SCOPE, NORM, METHODE...).
   Vanaf 641 breed stond de waarde naast het kopje als die paste, en
   anders eronder. Op Keuring & inspectie stond zo in één rij kaart 01 met
   de waarde eronder en kaart 02 met de waarde ernaast, 20 px verschil.
   Nu overal kopje boven waarde, zoals op de telefoon al: elke kaart
   dezelfde opbouw. Het kopje groeit niet mee in de hoogte, zodat de
   waarde altijd direct onder het kopje staat. */
.svc-page .feat-card-meta{flex-direction:column;align-items:flex-start}
.svc-page .feat-card-meta-key{flex:0 0 auto}

/* Donkere afsluitband (cta-big) op 18 pagina's. Boven 32 tot 36 px ruimte,
   onder 70 tot 76 px: de knoppenrij had nog 40 px ondermarge bovenop de
   binnenrand. De inhoud stond daardoor hoog in het vlak. Nu evenveel ruimte
   boven als onder, 56 px op de computer en 44 px op de telefoon. */
.cta-big-inner > :last-child{margin-bottom:0 !important}
.cta-big{padding-top:56px !important;padding-bottom:56px !important}
@media (max-width:600px){
  .cta-big{padding-top:44px !important;padding-bottom:44px !important}
}

/* Homepagina, de vier dienst-tegels op de computer. Sinds de tegel
   Storingsdienst op 17-09 verdween, stonden er drie naast elkaar en de
   vierde (Projectondersteuning) als brede strook eronder. Dat oogde als een
   overgebleven kaart. Nu vanaf 1200 breed vier gelijke tegels op één rij,
   tussen 1025 en 1199 twee bij twee, net als op de tablet. */
@media (min-width:1025px) and (max-width:1199px){
  :is(#diensten,#services) .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:260px 260px}
  :is(#diensten,#services) .svc-grid > .svc-card{grid-column:auto !important;grid-row:auto !important}
}
@media (min-width:1200px){
  :is(#diensten,#services) .svc-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:300px}
  :is(#diensten,#services) .svc-grid > .svc-card{grid-column:auto !important;grid-row:auto !important}
}
/* De knop Offerte aanvragen op de offertetegel is op de computer altijd
   zichtbaar, de andere tegels tonen Meer lezen bij aanwijzen. */
@media (min-width:1025px){
  .svc-card--cta .svc-card-cta{opacity:1;transform:none}
}

/* Over ons, werkgebied: drie kaarten naast elkaar vanaf 700 breed. In het
   Engels loopt Maintenance & management tussen 700 en 880 breed over twee
   regels, het lijstje in die kaart begon dan 20 px lager dan ernaast. Met
   subgrid krijgen de koppen in de rij één gezamenlijke hoogte, dus de
   lijstjes beginnen altijd op één lijn. */
@media (min-width:700px){
  @supports (grid-template-rows:subgrid){
    #werkgebied .about-values-x-grid > .about-value-card,
    #regions .about-values-x-grid > .about-value-card{
      display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:18px;align-content:start;
    }
  }
}

/* Vacaturepagina: de schuine sierlijnen in de banner stonden alleen tot
   900 breed uit en liepen op liggende tablet en laptop dwars door titel,
   label en intro. Nu overal uit, net als in de andere banners. */
.vac-detail-hero-beam{display:none !important}

/* Over ons, de brief van de twee broers. De tekstkolom was 732 px breed:
   ruim 100 tekens per regel, zwaar om te lezen. Vanaf 768 breed nu 620 px,
   75 tot 85 tekens per regel. */
@media (min-width:768px){
  .about-letter-x .about-letter-x-inner{max-width:calc(620px + 2 * var(--pad-x)) !important}
}
/* de grote aanhalingstekens hangen aan de brief (onderdeel C), dus mee
   naar de nieuwe halve breedte van 310 px */
@media (min-width:1201px){
  .about-letter-x .about-letter-x-quote.tl{left:calc(50% - 310px - 150px)}
  .about-letter-x .about-letter-x-quote.br{right:calc(50% - 310px - 150px)}
}

/* Kerncijfers in de banner van de dienstpagina's tussen 961 en 1279 breed
   (liggende tablet, kleine laptop). De tekstkolom is daar 480 tot 600 px,
   drie cijfers naast elkaar lieten het onderschrift over twee of drie
   regels lopen (+ TOT / MEERDERE / MAANDEN). Hier nu onder elkaar, cijfer
   met het onderschrift ernaast, net als op de telefoon. */
@media (min-width:961px) and (max-width:1279px){
  .svc-hero-x-stats{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);row-gap:8px}
  .svc-hero-x-stat{flex-direction:row;align-items:baseline;gap:10px}
}

/* Contact, formulier op de computer (twee kolommen vanaf 981 breed). De
   linkerkolom heeft alleen een korte intro met drie vinkjes, naast een
   formulier van 685 px hoog bleef daaronder 400 px leeg. Het oorspronkelijke
   meelopen werkte nooit, omdat de sectie overflow:hidden had (onderdeel D).
   Met overflow:clip wordt er precies hetzelfde afgesneden, maar kan de
   intro wel meelopen: hij blijft net onder het menu staan tot het einde van
   het formulier. */
.contact-form-x{overflow:clip}
@media (min-width:981px){
  .contact-form-x-intro{position:sticky !important;top:calc(var(--hts-menu-hoogte, 81px) + 32px)}
}

/* Binnenkort-pagina's: de actieve taal (NL of EN) stond wit op fel oranje
   (#E8641A), contrast 3,4 op 1 bij 11 px letters. In het menu van de rest
   van de site is dat vakje #C94E10, contrast 4,6 op 1. Nu gelijk. */
html .stage .nav-lang .is-active{background:#C94E10}

/* ---- derde beoordelingsronde, 19-09-2026 ---- */

/* Voetregel tussen 601 en 1519 breed (en liggende telefoon): de ruimte
   rechts voor de chatknop liet de links Privacy, Voorwaarden, Cookies 58
   tot 90 px voor de scheidingslijn ophouden, als een los zwevend blokje.
   Nu staan de links direct na de copyright. De vrije ruimte rechts blijft,
   maar er staat niets meer dat de rand moet raken. */
@media (min-width:601px) and (max-width:1519px), (max-height:500px) and (orientation:landscape){
  .footer-bottom{justify-content:flex-start;column-gap:28px}
}

/* Knop Naar boven. Stond op tablet en computer midden onderin en viel
   daarmee onderaan de pagina over de voetregel (sinds de links direct na de
   copyright staan zelfs over Algemene voorwaarden). Nu op elk formaat links
   naast de chatknop, verticaal op zijn midden, 12 px ertussen. Op de
   telefoon stond hij al zo. */
@media (min-width:601px){
  .kn-top{left:auto;right:124px;bottom:49px;transform:translateY(70px)}
  .kn-top.is-zichtbaar{transform:translateY(0)}
}
@media (min-width:601px) and (max-width:640px){
  .kn-top{right:82px;bottom:21px}
}
@media (min-width:641px) and (max-width:1024px){
  .kn-top{right:108px;bottom:41px}
}
@media (max-height:500px) and (orientation:landscape){
  .kn-top{right:82px;bottom:21px}
}

/* Bedrijfsgegevens op privacy en cookies (NL en EN). KvK en btw, telefoon
   en e-mail stonden naast elkaar met een puntje ertussen. Op de telefoon
   brak dat af en bleef het puntje los aan een regel hangen. Het puntje zit
   nu in een eigen element (zie de pagina's): op de telefoon wordt het een
   nieuwe regel, daarboven blijft het puntje. */
@media (max-width:640px){
  .gegevens-sep{display:block;height:0;overflow:hidden}
}

/* Kaarten Andere diensten: het oranje schuine woord (& inspectie, beheer,
   ondersteuning) viel op een lichte plek in de foto (gele multimeter, wit
   klembord) en was daar nauwelijks te lezen, gemeten 1,5 op 1. Het donkere
   verloop onderaan loopt nu verder omhoog, en de titel krijgt een zachte
   schaduw. */
.svc-cross-card-overlay{
  background:
    linear-gradient(180deg, rgba(10,11,14,.8) 0, rgba(10,11,14,.55) 44px, rgba(10,11,14,0) 110px),
    linear-gradient(to top, rgba(10,11,14,.95) 0%, rgba(10,11,14,.86) 45%, rgba(10,11,14,.62) 66%, rgba(10,11,14,.12) 100%) !important;
}
.svc-cross-card-bot h3{text-shadow:0 1px 14px rgba(0,0,0,.6)}
.svc-cross-card-bot h3 em{text-shadow:0 0 10px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.7)}

/* Koppen gelijkmatig over de regels verdelen, geen los woord op de tweede
   regel (DRIE MANIEREN OM contact te / maken.). */
h1, h2, h3{text-wrap:balance}

/* Fotolabel in de banner van de dienstpagina's op de telefoon. Sinds de
   foto daar liggend is (153 tot 288 px hoog) lag het label midden over het
   onderwerp: de monteur op Storingsdienst, de handen op Modificaties. Het
   is sfeer, dezelfde informatie staat in de tekst en de cijfers erboven.
   Tot 560 breed weg, vanaf de tablet blijft het. */
@media (max-width:560px){
  .svc-hero-x-badge{display:none}
}

/* Lange regels op laptop en computer: de beschrijving in de cases-kaarten
   en de antwoorden op de FAQ-pagina liepen tot 90 a 105 tekens per regel.
   Nu hooguit ongeveer 75. */
.ref-omschrijving{max-width:calc(72ch + 48px)}
.faq-x-a p{max-width:72ch}

/* Kruimelpad in de banner van de dienstpagina's: het laatste deel (de
   pagina waar je bent) stond op 3,6 op 1. Nu 7 op 1, nog steeds rustiger
   dan de links ervoor. */
.svc-hero-x-breadcrumb span{color:rgba(255,196,160,.82)}

/* Homepagina, drie sectortegels. Tussen 561 en 843 breed pasten twee van
   de drie titels niet op een regel en de derde wel (op 768: MARITIEM /
   & JACHTBOUW naast OFFSHORE & ENERGIE). Daar nu onder elkaar, net als op
   de telefoon. Vanaf 844 (liggende telefoon, tablet liggend) passen alle
   drie naast elkaar op een regel. */
@media (min-width:561px) and (max-width:843px){
  .section .sector-grid{grid-template-columns:minmax(0,1fr) !important}
}


/* Sectiekoppen (h-section) buiten de dienstpagina's bleven op een laptop
   23 px, kleiner dan de afsluitkoppen op dezelfde pagina en dan op de
   dienstpagina's (36 px). Nu overal dezelfde maat als op de dienstpagina's:
   22 px op de telefoon, 36 op 1366, 40 op een groot scherm. */
.h-section{font-size:clamp(22px, calc(12px + 1.75vw), 40px) !important}

/* Vacaturepagina, kaart Snel overzicht. Tussen 641 en 880 breed staat de
   kaart over de volle breedte: de drie gegevens vulden alleen de linker
   helft en de knop Solliciteer werd 540 tot 700 px breed voor een woord.
   Daar nu de drie gegevens naast elkaar en de knop op zijn eigen breedte,
   net als de hoofdknop bovenaan. */
@media (min-width:641px) and (max-width:880px){
  .vac-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 20px}
  .vac-facts li{border-bottom:0;padding-bottom:0;align-items:flex-start}
  .vac-card .btn{width:auto;align-self:flex-start;padding-left:36px;padding-right:36px}
  .vac-card{display:flex;flex-direction:column}
  .vac-card-note{text-align:left}
}

/* ---- vierde beoordelingsronde, 19-09-2026 ---- */

/* Koppen met een accent in hoofdletters (EEN met accenten, in TWEE BROERS,
   EEN ambacht, DRIE WERELDEN. EEN passie, EEN UUR PRATEN). Met de krappe
   regelafstand van .92 hing het accent 1 a 2 px onder de regel erboven, het
   leek een haakje onder de E. Deze koppen krijgen in de pagina's een
   kenmerk data-accent en iets meer regelruimte. */
h1[data-accent], h2[data-accent], h3[data-accent], h4[data-accent]{line-height:1.06 !important}

/* Cases: de nummers 01, 02, 03 voor de rubrieken stonden in fel oranje van
   12 px op creme, contrast 3 op 1. Nu het donkerdere oranje van de
   juridische pagina's (5,2 op 1). */
.ref-groep-nr{color:#b0430b}

/* Kaarten op de dienstpagina's (VORM 01 enzovoort): de kaarttitel was op
   telefoon en tablet 17 px, nauwelijks groter dan de tekst eronder (15 px).
   Nu 19 px op de telefoon, oplopend tot 24 px zoals op de computer.
   layout-fix.css zet hier clamp(17px,1.6vw,23px) met !important. */
.svc-page .feat-card h4{font-size:clamp(19px, calc(0.6vw + 16px), 24px) !important}

/* Paginatitel van de dienstpagina's op laptop en computer: bijna even groot
   als de sectiekoppen (hoofdletters 31 tegen 29 px op 1366). Nu vanaf 1188
   breed sneller groeiend, tot 56 px: op 1366 48 px tegen 36 px voor een
   sectiekop, dezelfde verhouding als op telefoon en tablet. */
@media (min-width:601px){
  .svc-hero-x-left h1{font-size:clamp(38px, calc(3.6vw - 1px), 56px)}
}

/* FAQ op de dienstpagina's op laptop en computer: de vragen liepen over de
   volle breedte van 1280 px, met de plusknop 600 tot 850 px van de vraag.
   Nu hooguit 900 px breed, vanaf 1200 breed (daaronder loopt de lijst
   gelijk met de kaarten erboven en eronder). */
@media (min-width:1200px){
  .svc-page .faq-v2{max-width:900px}
}

/* Vragen op de FAQ-pagina: geen los woord op de tweede regel. */
.faq-x-q-text, .faq-v2-q-text{text-wrap:balance}

/* Voorwaarden op de kleinste telefoons: de nummerkolom (1.1, 2.1) nam 40 px,
   de tekst kreeg 232 px. Tot 360 breed 30 px. Het lange woord
   Metaalunievoorwaarden mag nu na Metaalunie afbreken (zachte afbreekstreep
   in de pagina). */
@media (max-width:360px){
  .legal-body .legal-lid{grid-template-columns:30px minmax(0,1fr) !important}
}

/* Woorden met een streepje (e-mail, IP-adres, Zuid-Holland) op de
   juridische pagina's niet op het streepje afbreken. */
.nb{white-space:nowrap}

/* ---- vijfde beoordelingsronde, 19-09-2026 ---- */

/* Kleine oranje tekst op een lichte achtergrond op de dienstpagina's: de
   labels STAP 01 tot 04 (10 px), het schuine woord in de stapkoppen en de
   vraagnummers 01 tot 05 stonden in fel oranje, contrast 3 op 1. Nu het
   donkerdere oranje (5,2 op 1), net als op de juridische pagina's. */
.svc-flow .svc-flow-num,
.svc-flow .svc-flow-step h4 em,
.svc-flow .svc-flow-step h3 em,
.faq-v2-q-no{color:#b0430b !important}

/* Stappen op de dienstpagina's tussen 961 en 1199 breed: vier smalle
   kaarten naast elkaar gaven regels van twee of drie woorden (op
   Modificaties zeven regels). Hier twee bij twee, net als op de tablet. */
@media (min-width:961px) and (max-width:1199px){
  .svc-flow-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .svc-flow-step:nth-child(2){border-right:0}
  .svc-flow-step:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

/* Over ons: Werkgebied en Certificaten zijn twee donkere secties direct
   onder elkaar, elk met 80 px binnenruimte. Samen 160 px, tegen 80 tot 90
   px bij de andere overgangen: het leek een gat. Nu 40 px onderin de eerste
   en 40 px bovenin de tweede. Zo ligt de naad tussen de twee achtergronden
   niet vlak boven de kop Certificaten. */
.about-values-x:has(+ .about-certs-x){padding-bottom:40px !important}
.about-values-x + .about-certs-x{padding-top:40px !important}

/* Cookietabel (Engels) op tablet en computer: de kolom COOKIE was even
   breed als de uitleg, de uitleg liep daardoor over drie regels. */
@media (min-width:641px){
  .cookie-head, .cookie-row{grid-template-columns:minmax(0,.8fr) minmax(0,1.8fr) minmax(0,.8fr)}
}

/* FAQ-pagina op een liggende telefoon (390 hoog): per categorie 80 px
   ruimte boven en onder plus een groot sierlijk cijfer, samen een vol
   scherm zonder een vraag. Daar de helft van de ruimte en geen groot cijfer. */
@media (max-height:500px) and (orientation:landscape){
  .faq-cat-x{padding-top:40px !important;padding-bottom:40px !important}
  .faq-cat-x-mega{display:none !important}
}

/* Homepagina: het oranje schuine woord in de tegeltitels (VRAAG EEN
   offerte AAN) viel op sommige breedtes op een licht stuk van de foto.
   Zelfde zachte schaduw als in de kaarten op de dienstpagina's. */
.svc-card-title em{text-shadow:0 0 10px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.7)}
/* STORINGSdienst: de schuine d raakte de S ervoor */
.svc-cross-card-bot h3 em{padding-left:.05em}

/* Foto Onderhoud & beheer in de banner (NL en EN): de monteur staat
   rechtsboven in de foto, in de staande uitsnede op laptop en computer viel
   zijn hoofd erbuiten. Beeldmidden naar rechtsboven. */
.svc-hero-x-img[style*="onderhoud-beheer"]{background-position:85% 5%}

/* ---- zesde beoordelingsronde, 19-09-2026 ---- */

/* Footer op de telefoon: tussen de groepen DIENSTEN, BEDRIJF en CONTACT
   stond 24 px, bijna even veel als tussen de links (20 px). Het las als een
   lange lijst. Nu 44 px tussen de groepen. */
@media (max-width:560px){
  .footer-top{row-gap:44px !important}
}

/* Paginatitel van de dienstpagina's: gelijk verdeeld over de regels (op
   1920 bleef STORINGEN. los op de tweede regel staan). */
.svc-page .svc-hero-x-left h1{text-wrap:balance}

/* Kerncijfers in de banner van de dienstpagina's, naast elkaar (vanaf 601
   en vanaf 1280): 16 px tussen de kolommen, de drie onderschriften lazen
   als een regel. Nu 32 px. */
@media (min-width:601px){
  .svc-hero-x-stats{column-gap:32px !important}
}

/* Cookietabel (Engels), kolom LIFETIME: de waarde (SESSION, UP TO 12
   MONTHS) stond als klein grijs label van 11 px. Het is gewone informatie:
   nu 13 px, zelfde letter als de cookienaam. */
@media (min-width:641px){
  .cookie-row .cr-life{font-size:13px;letter-spacing:.02em;text-transform:none;color:var(--ink-2)}
}

/* Homepagina, dienst-tegels: de titel groeide tot 25 px en MAINTENANCE &
   management paste dan op 1920 net niet meer op een regel. Hooguit 24 px. */
.svc-card-title{font-size:clamp(19px,1.8vw,24px) !important}

/* Liggende telefoon (390 hoog): in de banner van de dienstpagina's viel de
   belknop net onder het eerste scherm. Minder ruimte boven de banner en een
   lager kruimelpad. */
@media (max-height:500px) and (orientation:landscape){
  .svc-hero-x{padding-top:calc(var(--hts-menu-hoogte, 72px) + 18px) !important}
  .svc-hero-x-breadcrumb a{padding-top:4px;padding-bottom:4px}
}

/* Homepagina, video in de banner: in de brede uitsnede viel het hoofd van
   de monteur aan de bovenrand weg. Beeldmidden hoger. */
.hero-v3 .hero-video{object-position:50% 18%}

/* Losse woorden op de laatste regel van een alinea voorkomen, waar de
   browser dat kan (Chrome, Edge, Safari 26). */
p, li, dd{text-wrap:pretty}

/* Chatknop op de tablet. Op de computer 84 px, op de telefoon 56. Op een
   tablet van 768 breed was 84 px ruim een tiende van het scherm en dekte
   de knop tekst af. Daar nu 68 px, de tekstballon zakt even ver mee. */
@media (min-width:641px) and (max-width:1024px){
  .kn-fab--mascotte .kn-fab-btn{width:68px;height:68px}
  .kn-teaser{bottom:116px}
}

/* Sociale links in de voettekst, 15-10-2026. Witte logo's van LinkedIn en
   Instagram onder de korte omschrijving, zonder rondje eromheen. Op verzoek
   van Jeffrey. Linken naar de bedrijfspagina's. */
.footer .footer-socials.footer-socials--wit{display:flex;align-items:center;gap:16px;margin-top:18px}
.footer .footer-socials.footer-socials--wit a{
  width:auto!important;height:auto!important;padding:4px;margin:-4px;
  background:none!important;border:0!important;border-radius:4px!important;
  color:#fff!important;display:inline-flex;transition:color .2s var(--ease-out),transform .2s var(--ease-out)}
.footer .footer-socials.footer-socials--wit a:hover,
.footer .footer-socials.footer-socials--wit a:focus-visible{color:var(--orange)!important;background:none!important;transform:translateY(-1px)}
.footer .footer-socials.footer-socials--wit a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.footer .footer-socials.footer-socials--wit svg{width:22px!important;height:22px!important}

/* Onderwerpregel in de hoofdkop (16-10-2026, vindbaarheid): het zoekwoord
   staat klein boven de slogan, zodat de h1 zegt waar de pagina over gaat. */
h1 .h1-onderwerp{display:block;margin:0 0 14px;font-family:var(--f-mono,'JetBrains Mono',monospace);
  font-size:12px;line-height:1.45;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  font-style:normal;color:var(--orange,#E8641A);max-width:46ch}
@media (max-width:600px){h1 .h1-onderwerp{font-size:11px;letter-spacing:.12em;margin-bottom:10px}}