/* Sitepagina's van steiger.feliro.nl (v0.100, stijlgids): de huisstijl van Van Thiel United (docs/huisstijl) in code.
   Oswald voor koppen en quotes, Open Sans voor tekst; navy en blauw, 30 % zwart als grijs; overlays als transparante balk;
   grijze lijnen als raster. Typografie op een rustige schaal (tekst 16 px, regellengte ± 70 tekens). Regels: PLAN-SITE §3.11. */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(/assets/fonts/open-sans-latin-wght.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;src:url(/assets/fonts/oswald-latin-wght.woff2) format('woff2')}
:root{--verloop:linear-gradient(135deg,#00203c,var(--navy) 60%,#003a6b);   /* v0.197 (Stefan 23-10): één verloop, donker links naar lichter rechts: kop, CTA-band, Werken bij */
  --navy:#002E54;--blue:#0072CE;--blue7:#00457C;--lblue:#EAF3FC;--lblue2:#dbe9f7;--steel:#D1DBE5;--orange:#E87722;--ink:#262a2f;--muted:#5f6a74;--grijs:#b3b3b3;--line:#d9dfe6;--bg:#fff;
  --balk-blauw:rgba(0,88,170,.82);--balk-navy:rgba(0,46,84,.82);--breed:1360px;--rand:40px;--kop:'Oswald',sans-serif;--tekst:'Open Sans',system-ui,sans-serif;--schaduw:0 10px 28px rgba(0,46,84,.12)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.6 var(--tekst)}
/* v0.133 (Stefan 17-10): de voet staat altijd onderaan, ook op een korte pagina (404, bedankt …); geen wit onder de blauwe voet */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}body>*{flex-shrink:0}main.pagina{flex:1 0 auto;width:100%}   /* v0.103: 15 px, een maat kleiner (Stefan 15-10: fonts voelden groot) */
img{max-width:100%;height:auto}
a{color:var(--blue)}
.in{max-width:var(--breed);margin:0 auto;padding:0 var(--rand)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* ---------- kop (navy, sticky) en uitklapmenu in lichtblauw zoals thiel.nl ---------- */
.kop{background-color:var(--navy);background-image:var(--verloop);color:#fff;box-shadow:0 7px 29px rgba(38,42,47,.15);position:sticky;top:0;z-index:20}
/* v0.100: in de geïnstalleerde app staat de kop anders onder de statusbalk van iOS. Dezelfde strook als de app (styles/main.css). */
.kop::before{content:'';display:block;height:var(--kopruimte,0px);background:var(--navy)}
body.met-held .kop:not(.klein)::before{background:transparent}   /* v0.209: boven het beeld loopt het verloop van de kop door */
html{--kopruimte:env(safe-area-inset-top,0px)}   /* v0.209 (Stefan 24-10): alleen de inset, in de kleur van de kop (zie styles/main.css) */
.kop .in{display:flex;align-items:center;gap:24px;padding-top:12px;padding-bottom:12px}
.kop .logo img{height:54px;width:auto;display:block}
.nav{margin-left:auto}
.nav ul,.menu-mobiel ul,.nav .sub{list-style:none;margin:0;padding:0}
.nav>ul{display:flex;align-items:center;gap:26px}
.nav>ul>li{position:relative}
.nav a{color:#fff;font:500 16px/1.2 var(--tekst);text-decoration:none;padding:8px 0;display:inline-block;white-space:nowrap}
.nav a:hover,.nav .actief>a{color:#94cfff}
.nav .heeft-sub>a::after{content:'';display:inline-block;width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin:0 0 3px 8px;opacity:.8}
.nav .sub{position:absolute;left:-18px;top:calc(100% + 6px);min-width:220px;background:#fff;border-top:3px solid var(--blue);padding:8px 0;box-shadow:0 14px 36px rgba(0,46,84,.22);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s,transform .15s,visibility 0s .15s}
.nav .sub::before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px}
.nav .heeft-sub:hover .sub,.nav .heeft-sub:focus-within .sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav .sub a{display:block;padding:10px 18px;font-size:15px;color:var(--navy);transition:background .12s,color .12s}
.nav .sub a:hover{background:var(--lblue);color:var(--blue)}
.rechts{display:flex;align-items:center;gap:18px}
.knop-contact{background:var(--blue);color:#fff;font:500 16px/1 var(--tekst);padding:14px 18px;text-decoration:none;white-space:nowrap;transition:background .15s}
.knop-contact:hover{background:var(--blue7)}
.shoplink,.taal{color:#fff;font:500 16px/1 var(--tekst);text-decoration:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.shoplink:hover,.taal:hover{color:#94cfff}
.taal img{width:21px;height:14px;display:block}
html.klantlogin-uit:not(.klant) .klantlogin{display:none!important}   /* v0.227: klantlogin uit (beheer); ingelogd (html.klant) blijft Uitloggen staan */
.hbtn{position:relative;color:#fff;width:40px;height:40px;display:inline-grid;place-items:center;text-decoration:none;flex:none}
.hbtn svg,.hbtn .thiel-ui-icon{width:23px;height:23px}
.hbtn:hover{color:#94cfff}
.hbtn .cnt,.ocv-nav .cnt{position:absolute;top:0;right:-5px;background:var(--blue);color:#fff;font-size:10.5px;font-weight:800;min-width:18px;line-height:18px;text-align:center;padding:0 4px}
.ocv-nav .cnt{position:static;font-size:12px;font-weight:700;padding:0 7px;line-height:20px;min-width:22px}
.cnt[hidden]{display:none}
.hamb{display:none;background:transparent;border:0;width:40px;height:40px;padding:9px 6px;cursor:pointer;flex-direction:column;justify-content:space-between;margin-left:auto}
.hamb>span:not(.sr){display:block;height:2px;background:#fff;width:100%}
/* v0.103: uitschuifmenu van rechts, zoals in de shop (styles/main.css .ocv): niet over de volle breedte, compact submenu, Contact in
   lichtblauw, daaronder Shop en Steigercalculator (Stefan 15-10) */
.ocv-overlay{position:fixed;inset:0;background:rgba(0,30,56,.55);z-index:40}   /* v0.133: donkerblauw waas i.p.v. grijs; menu effen navy zonder foto, compacter (Stefan 17-10) */
.menu-mobiel{position:fixed;top:0;right:0;bottom:0;width:min(80vw,320px);z-index:41;background:var(--navy);overflow:hidden auto;padding:calc(64px + var(--kopruimte,0px)) 24px 24px 28px;color:#fff;display:flex;flex-direction:column;justify-content:flex-start;gap:12px;border-left:3px solid var(--blue);box-shadow:-12px 0 40px rgba(0,0,0,.35)}
.menu-mobiel[hidden],.ocv-overlay[hidden]{display:none}
.menu-mobiel>*{position:relative}
.ocv-sluit{position:absolute;top:calc(14px + var(--kopruimte,0px));right:14px;background:transparent;border:0;color:#fff;width:40px;height:40px;padding:6px;cursor:pointer}
.ocv-sluit svg,.ocv-sluit .thiel-ui-icon{width:28px;height:28px}
.ocv-nav{list-style:none;margin:0;padding:0}
.ocv-nav li{margin:0}
.ocv-nav a{display:flex;align-items:center;gap:10px;width:100%;padding:8px 0;color:#fff;text-decoration:none;font:500 16px/1.3 var(--tekst)}
.ocv-nav a:hover,.ocv-nav a:focus-visible{color:#94cfff}
.ocv-nav li.actief>a{font-weight:600}
.ocv-nav .sub{list-style:none;margin:0;padding:0}
.ocv-nav .sub a{padding:5px 0 5px 16px;font-size:14.5px;color:#9fb3c6}
.ocv-nav .sub a:hover{color:#94cfff}
.ocv-nav a.contact{color:#94cfff;font-weight:600}
.ocv-nav.tweede{border-top:1px solid rgba(255,255,255,.2);padding-top:10px}
body.menu-open{overflow:hidden}
@media (max-width:1100px){.nav,.rechts .shoplink,.rechts .hbtn,.rechts .knop-contact,.rechts .taal span{display:none}.rechts{margin-left:auto;gap:0}.hamb{display:inline-flex;margin-left:14px}.kop .in{padding:12px 16px;min-height:76px}.kop .logo img{height:52px}}
@media (min-width:1101px){.menu-mobiel,.ocv-overlay{display:none!important}}
/* ---------- typografie ---------- */
main.pagina{padding:0 0 56px}   /* v0.118: alleen de main; de body draagt dezelfde klasse (soort 'pagina') en kreeg zo 56 px wit onder de voet */
h1,h2,h3,h4{font-family:var(--kop);color:var(--navy);font-weight:700;line-height:1.15;margin:0}
/* v0.196 (Stefan 23-10): geen los woord op de laatste regel van een kop. balance verdeelt de woorden over even lange regels
   ("Al 75 jaar dé steigeroplossing / voor elk project"); zie AGENTS.md, regel "Koppen zonder weeswoord". */
h1,h2,h3,h4{text-wrap:balance}
.geen-breuk{white-space:nowrap}
.pagina h1{font-size:clamp(28px,3vw,40px);margin:0 0 16px}
.pagina h2{font-size:clamp(22px,2.1vw,27px);margin:0 0 14px}
.pagina h3{font-size:19px;margin:0 0 8px}
.pagina h4{font-size:17px;margin:0 0 6px}
.kicker{font:600 13px/1.3 var(--tekst);letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin:0 0 10px}
.lead{font-size:15px;line-height:1.6;color:var(--ink);max-width:70ch;margin:0}   /* v0.118 (Stefan 16-10): één maat voor lopende tekst, 15 px zoals de intro op de home */
.prosa{max-width:70ch}
.prosa p{margin:0 0 14px}
.prosa p:last-child{margin-bottom:0}
.prosa ul{padding-left:20px;margin:0 0 14px}
.prosa li{margin:3px 0}
.prosa a:not(.knop){text-decoration:underline;text-underline-offset:3px}
.prosa strong,.inhoud strong{color:var(--navy)}
.prosa h2,.prosa h3{margin-top:28px}
.prosa h2:first-child,.prosa h3:first-child{margin-top:0}
.quote{font:700 clamp(26px,3.2vw,44px)/1.1 var(--kop);color:#fff;text-transform:uppercase;margin:0;max-width:16ch}
.quote::first-letter{color:#94cfff}
/* ---------- knoppen: blauw gevuld, licht omlijnd, wit op donker; in een groep even breed ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);color:#fff;text-decoration:none;font:600 15px/1.2 var(--tekst);padding:13px 22px;min-height:46px;border:1px solid var(--blue);margin:0;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;cursor:pointer;text-align:center}
.knop:hover,.knop:focus-visible{background:var(--blue7);border-color:var(--blue7);transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,46,84,.18);outline:none}
.knop-licht{background:#fff;color:var(--blue)}
.knop-licht:hover,.knop-licht:focus-visible{background:var(--lblue);color:var(--blue7)}
.knop-wit{background:#fff;color:var(--navy);border-color:#fff}
.knop-wit:hover,.knop-wit:focus-visible{background:var(--lblue);border-color:var(--lblue);color:var(--navy)}
.knoppen{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;margin:20px 0 0}
.knoppen .knop,.inhoud .knoppen .knop{margin:0}
.pijl-link{font:600 15px/1.3 var(--tekst);color:var(--blue);text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pijl-link span{transition:transform .2s}
.pijl-link:hover span{transform:translateX(4px)}
.sectie-navy .pijl-link,.cta-band .pijl-link{color:#94cfff}
button.knop{font-family:var(--tekst)}
/* ---------- secties ---------- */
.sectie{padding:44px 0}
.sectie-licht{background:var(--lblue)}
.sectie-wit{background:#fff}
.sectie-navy{background:var(--navy);color:#fff}
.sectie-navy h2,.sectie-navy h3,.cta-band h2{color:#fff}
.sectie-navy .prosa,.cta-band .prosa{color:#dbe8f5}
.sectie+.sectie-wit.lead-blok,.lead-blok{padding:40px 0 8px}
.sectie-kop{max-width:820px;margin:0 0 22px}
.sectie-intro{max-width:70ch;margin:-8px 0 22px}
.sectie-kop .prosa{max-width:none}
.certificaten .sectie-kop{max-width:960px}   /* v0.144 (Stefan 19-10): de intro in twee regels in plaats van drie */
.sectie-kop.rij{max-width:none;display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.sectie-kop.rij h2{margin:0}
.lead-prosa{font-size:15px}
/* tweeluik: tekst en beeld naast elkaar */
/* v0.100: foto even hoog als de tekst ernaast (Stefan 15-10): de kolommen rekken mee, de foto vult de figuur */
.tweeluik{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:stretch}
.tweeluik.om .tweeluik-tekst{order:2}
.tweeluik-beeld{margin:0;position:relative;min-height:240px}
.tweeluik-beeld>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;box-shadow:var(--schaduw)}
.tweeluik-beeld.met-balk .balk{position:absolute;left:0;right:0;bottom:0;background:var(--balk-navy);color:#fff;padding:14px 18px;font:700 20px/1.2 var(--kop)}
.tweeluik-beeld.logos{display:flex;flex-direction:column;justify-content:center}
/* v0.118: intro van het assortiment als tweeluik met foto (binnen .inhoud, dus de beeldregels van .inhoud img overschreven) */
.assort-intro{margin:0 0 28px}
.assort-intro .tweeluik-tekst{display:flex;flex-direction:column;justify-content:flex-start;min-width:0}
.assort-intro .kicker{margin:0 0 8px}
.assort-intro .tweeluik-beeld{min-height:250px;overflow:hidden}
.inhoud .assort-intro .tweeluik-beeld>img{position:absolute;inset:0;width:100%;height:100%;margin:0;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.assort-intro:hover .tweeluik-beeld>img{transform:scale(1.04)}
.inhoud .assort-intro .knoppen{margin:auto 0 0;padding-top:18px}
/* v0.125: tekst en knoppen komen na elkaar binnen, de foto schuift van rechts in (Stefan: "waar zijn de subtiele motion effects?") */
.js .assort-intro .tweeluik-tekst>*,.js .assort-intro .tweeluik-beeld{opacity:0;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.js .assort-intro .tweeluik-tekst>*{transform:translateY(12px)}
.js .assort-intro .tweeluik-beeld{transform:translateX(24px)}
.js .assort-intro.zichtbaar .tweeluik-tekst>*,.js .assort-intro.zichtbaar .tweeluik-beeld{opacity:1;transform:none}
.js .assort-intro.zichtbaar .lead{transition-delay:.12s}.js .assort-intro.zichtbaar .knoppen{transition-delay:.24s}.js .assort-intro.zichtbaar .tweeluik-beeld{transition-delay:.18s}
/* foto met balk (brandbook: transparante balk over het beeld) */
.balkfoto{position:relative;background:var(--navy) var(--foto) center/cover no-repeat;color:#fff;padding:48px 0}
.balkfoto::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 35%,var(--balk-navy) 62%,var(--navy) 100%)}
.balkfoto .in{position:relative}
.balkfoto-tekst{margin-left:auto;max-width:520px;background:var(--balk-navy);padding:32px 36px;backdrop-filter:blur(2px)}
.balkfoto-tekst h2{color:#fff}
.balkfoto-tekst .prosa{color:#e3edf7}
/* v0.121 (Stefan 16-10): intro van Diensten als fotoband: de foto schuift langzaam opzij (pan), het navy kader komt als inkomer van rechts */
.diensten-intro{padding:56px 0;background-size:cover;background-position:0% 50%;animation:pan 30s ease-in-out infinite alternate;overflow:hidden}
.diensten-intro::before{background:linear-gradient(90deg,rgba(0,46,84,.15) 0%,rgba(0,46,84,.15) 40%,var(--balk-navy) 70%,var(--navy) 100%)}
.diensten-intro .balkfoto-tekst{max-width:560px;padding:28px 34px 30px}
.diensten-intro .kicker{color:#94cfff;margin:0 0 8px}
.diensten-intro .lead-prosa{color:#e3edf7}
.diensten-intro .knoppen{margin-top:16px;display:flex;justify-content:center}   /* v0.125 (Stefan): gecentreerd */
.js .diensten-intro .balkfoto-tekst.inkomer{transform:translateX(28px)}
.js .diensten-intro .balkfoto-tekst.inkomer.zichtbaar{transform:none}
@keyframes pan{from{background-position:0% 50%}to{background-position:100% 50%}}
@media (max-width:640px){.diensten-intro{padding:28px 0;animation:none;background-position:50% 50%}.diensten-intro .balkfoto-tekst{padding:20px 18px 22px}}
@media (prefers-reduced-motion:reduce){.diensten-intro{animation:none}}
.balkfoto-quote{padding:88px 0}
.balkfoto-quote::before{background:linear-gradient(90deg,rgba(0,46,84,.15),rgba(0,46,84,.15))}
.balkfoto-quote .balkfoto-tekst{margin:0;max-width:640px;background:var(--balk-blauw);padding:36px 40px}
/* usp-strook met vinkjes, zoals thiel.nl */
.usp-strook{background:var(--lblue2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.usp-strook ul{list-style:none;margin:0 auto;padding:14px var(--rand);max-width:var(--breed);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}
.usp-strook li{display:flex;align-items:center;gap:8px;font:600 14.5px/1.3 var(--tekst);color:var(--navy)}
.usp-strook svg,.usp-strook .thiel-ui-icon{color:var(--blue);flex:none}
.usp-lijst{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px}
.usp-lijst li{display:flex;align-items:center;gap:7px;font:600 14px/1.3 var(--tekst);color:var(--navy)}
.usp-lijst svg,.usp-lijst .thiel-ui-icon{color:var(--blue);flex:none}
/* dienstenkaarten op navy */
.kaarten-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.dienst-kaart{background:#fff;color:var(--ink);display:flex;flex-direction:column;box-shadow:0 14px 34px rgba(0,10,25,.25);transition:transform .2s}
.dienst-kaart:hover{transform:translateY(-4px)}
.dienst-kaart figure{margin:0}
.dienst-kaart img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.dienst-tekst{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.dienst-tekst h3{color:var(--navy);font-size:22px;line-height:1.2}   /* v0.103: de titel van een dienstkaart was een h5 uit de bron (Stefan: veel te klein) */
.dienst-tekst .prosa{color:var(--ink);font-size:15px;flex:1}
.dienst-tekst .pijl-link{margin-top:4px}
/* certificaatlogo's op een rij, grijs tot je erover gaat */
.logo-rij{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.logo-rij img{height:56px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s;box-shadow:none;margin:0}
.logo-rij img:hover{filter:none;opacity:1}
/* projectkaarten met de titel over de foto (donkere overlay, wens Stefan) */
.project-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.project-kaart{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;text-decoration:none;color:#fff;background:var(--navy)}
.project-kaart img,.project-kaart .geenbeeld{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.project-kaart:hover img{transform:scale(1.04)}
.project-titel{position:absolute;left:0;right:0;bottom:0;padding:56px 20px 18px;background:linear-gradient(180deg,rgba(0,20,40,0),rgba(0,20,40,.85));display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.project-titel b{font:700 20px/1.2 var(--kop)}
.project-titel span{font:600 14px/1 var(--tekst);color:#94cfff;white-space:nowrap}
/* cta-band */
.cta-band{background:var(--verloop);color:#fff;padding:48px 0}
.cta-band .in{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.cta-tekst{max-width:720px}
.cta-tekst h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:10px}
.cta-acties .knop{margin:0}
/* paginakop voor subpagina's: foto met navy balk en titel */
.paginakop{position:relative;background:var(--navy) var(--foto) center/cover no-repeat;color:#fff;min-height:260px;display:flex;align-items:flex-end}
.paginakop::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,46,84,.35),rgba(0,46,84,.75))}
.paginakop .in{position:relative;width:100%;padding-top:48px;padding-bottom:36px}
.paginakop h1{color:#fff;font-size:clamp(30px,3.6vw,46px);margin:0}
.paginakop .sub{margin:8px 0 0;font-size:16px;color:#dbe8f5;max-width:60ch}
.paginakop .kruimel,.paginakop .kruimel a{color:#cfe0f0}
.met-paginakop .pagina>.in{padding-top:40px}
/* v0.121 (Stefan 16-10): Projecten. De kopfoto is hoger en beweegt langzaam (ken-burns op een eigen laag, de gradient blijft
   erboven); de intro staat in een witte kaart die over de onderrand van de foto heen schuift en als inkomer omhoog komt. */
body.slug-projecten .paginakop,body.slug-projects .paginakop,body.slug-services .paginakop{min-height:400px;background-image:none;overflow:hidden;isolation:isolate}
body.slug-projecten .paginakop::after,body.slug-projects .paginakop::after,body.slug-services .paginakop::after{content:'';position:absolute;inset:0;background:var(--foto) center 40%/cover no-repeat;z-index:-1;transform-origin:50% 60%;animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
body.slug-projecten .paginakop .in,body.slug-projects .paginakop .in,body.slug-services .paginakop .in{padding-bottom:92px}
.projecten-intro{padding-top:0}
.projecten-kaart{position:relative;max-width:880px;margin-top:-64px;background:#fff;border-left:3px solid var(--blue);box-shadow:var(--schaduw);padding:26px 34px 28px}
.projecten-kaart .kicker{margin:0 0 6px}
.projecten-kaart .lead-prosa p{margin:0 0 10px}
.projecten-kaart .knoppen{margin-top:14px}
@media (max-width:640px){body.slug-projecten .paginakop,body.slug-projects .paginakop,body.slug-services .paginakop{min-height:0;overflow:visible}body.slug-projecten .paginakop::after,body.slug-projects .paginakop::after,body.slug-services .paginakop::after{display:none}body.slug-projecten .paginakop .in,body.slug-projects .paginakop .in,body.slug-services .paginakop .in{padding-bottom:20px}.projecten-kaart{margin-top:0;padding:20px 18px 22px}}
@media (prefers-reduced-motion:reduce){body.slug-projecten .paginakop::after,body.slug-projects .paginakop::after,body.slug-services .paginakop::after{animation:none}}
/* kwaliteit: usp-kaarten, kwaliteitsketen, certificaatkaarten */
.usp-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.usp-kaart{background:#fff;padding:26px 24px;border-top:3px solid var(--blue);box-shadow:var(--schaduw)}
/* v0.100 (Stefan 15-10): icoon vóór de titel op dezelfde regel; de kop heeft een vaste hoogte van twee titelregels, zodat de tekst in
   alle kaarten op dezelfde hoogte begint; een titel van één regel staat gecentreerd in die hoogte (iets meer wit) */
.usp-kop{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;min-height:46px;margin:0 0 10px}
.usp-kop img{width:40px;height:40px;display:block;margin:0;box-shadow:none}
.usp-kaart h3{font-size:17px;line-height:1.2;margin:0}
.usp-kaart p{margin:0;font-size:14px;color:var(--ink)}   /* v0.144 (Stefan 19-10): een maat kleiner (was 15 px) */
.usp-kaart .uitklap{font-size:14px}
.keten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:stap;position:relative}
.keten::before{content:'';position:absolute;left:4%;right:4%;top:22px;height:2px;background:var(--line)}
.keten li{position:relative;padding:0 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.keten-nr{width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;font:700 18px/44px var(--kop);text-align:center;box-shadow:0 0 0 6px var(--keten-ring,#fff);position:relative}
.keten li b{font:700 17px/1.2 var(--kop);color:var(--navy)}
.keten li span:last-child{font-size:14px;color:var(--muted)}
.cert-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:20px}
.cert-kaart{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;align-items:start;background:#fff;border:1px solid var(--line);padding:22px}
.cert-logo{display:flex;align-items:center;justify-content:center;min-height:80px}
.cert-logo img{max-height:80px;width:auto;max-width:120px;object-fit:contain;box-shadow:none;margin:0}
.cert-tekst h3{font-size:19px}
.cert-tekst p{margin:0 0 8px;font-size:15px}
.cert-tekst details p{color:var(--muted)}
.cert-tekst summary{cursor:pointer;color:var(--blue);font:600 14px/1.4 var(--tekst);list-style:none;margin:4px 0 10px}
.cert-tekst summary::-webkit-details-marker{display:none}
.cert-tekst summary::after{content:' +'}
.cert-tekst details[open] summary::after{content:' –'}
/* over ons: tijdlijn */
.tijdlijn{list-style:none;margin:0;padding:0;display:grid;gap:0}
.tijdlijn li{display:grid;grid-template-columns:140px minmax(0,1fr);gap:28px;padding:0 0 32px;position:relative}
.tijdlijn li::before{content:'';position:absolute;left:139px;top:14px;bottom:-14px;width:2px;background:var(--line)}
.tijdlijn li:last-child::before{display:none}
/* v0.122 (Stefan 17-10): Over ons — tijdlijn links, de historische foto bijgesneden in een kader rechts, sticky naast de tekst */
.verhaal-rooster{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:48px;align-items:start}
.verhaal-foto{margin:0;position:sticky;top:96px}
.verhaal-kader{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--lblue);border:1px solid var(--line);border-top:3px solid var(--blue);box-shadow:var(--schaduw)}
.verhaal-kader img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 40%;filter:grayscale(1) contrast(1.05)}
.verhaal-kader::after{content:'';position:absolute;inset:10px;border:1px solid rgba(255,255,255,.55);pointer-events:none}
.verhaal-foto figcaption{margin-top:14px;padding:16px 18px;background:var(--balk-blauw);color:#fff;font-size:15px;line-height:1.5}
.verhaal-foto figcaption p{margin:0}
@media (max-width:900px){.verhaal-rooster{grid-template-columns:1fr;gap:28px}.verhaal-foto{position:static}.verhaal-kader{aspect-ratio:16/10}}
.tijdlijn li::after{content:'';position:absolute;left:134px;top:10px;width:12px;height:12px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px #fff}
.tijdlijn .jaar{font:700 34px/1 var(--kop);color:var(--blue);text-align:right;padding-right:28px}
.tijdlijn .prosa{max-width:66ch;padding-top:4px}
/* diensten: zigzag */
/* diensten (v0.100): per dienst één rij, foto links even hoog als de tekst, geen zigzag (Stefan 15-10); op de eigen pagina de rijen om en om licht */
.dienst-rijen{display:grid;gap:22px}
.dienst-rij{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:stretch;background:#fff;box-shadow:var(--schaduw)}
.dienst-rij.licht{background:var(--lblue);box-shadow:none}
.dienst-rij figure{margin:0;position:relative;min-height:220px}
.dienst-rij figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dienst-rij-tekst{padding:24px 28px 24px 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.dienst-rij.licht .dienst-rij-tekst{padding-right:28px}
.dienst-rij-tekst h2,.dienst-rij-tekst h3{margin:0 0 10px}
.dienst-rij .usp-lijst{margin:0 0 12px;justify-content:flex-start;gap:6px 16px}
.dienst-rij .usp-lijst li{font-size:13px;gap:5px;white-space:nowrap}   /* v0.121 (Stefan 16-10): op één regel */
.dienst-rij .usp-lijst svg,/* v0.121 (Stefan 16-10): op één regel */
.dienst-rij .usp-lijst .thiel-ui-icon{width:15px;height:15px}
@media (min-width:981px){.dienst-rij .usp-lijst{flex-wrap:nowrap}}
.dienst-rij .prosa{font-size:15px}
.dienst-rij .knoppen{margin:14px 0 0;align-self:flex-end}   /* v0.125 (Stefan): "Lees verder" rechts */
.dienst-rijen .knop{min-width:300px}   /* losse knoppen op een dienstpagina even breed (Stefan 15-10) */
@media (min-width:641px){.prosa p,.usp-kaart p,.cert-tekst p,.lead{text-wrap:pretty}}   /* op een telefoon kost dit regels; daar volstaat de vaste spatie */
.usp-blok{padding:18px 0 0}
/* v0.109: voordelen van Tube-Lock als genummerde kaarten */
.voordeel-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.voordeel{background:#fff;border-top:3px solid var(--blue);box-shadow:var(--schaduw);padding:18px 22px 18px;display:flex;flex-direction:column;gap:6px}
.voordeel h3{font-size:19px;margin:0 0 2px}
.voordeel h3 .nr{color:var(--blue);margin-right:8px}   /* nummer en titel op één regel (Stefan 15-10) */
.voordeel-intro{align-items:center;gap:32px}
.voordeel-intro .tweeluik-tekst{display:flex;align-items:center}
.voordeel-intro .tweeluik-beeld{min-height:220px}
@media (max-width:980px){.voordeel-intro .tweeluik-beeld{min-height:0}}   /* v0.196: met aspect-ratio 16/9 dwong 220 px hoogte 391 px breedte af: horizontaal scrollen op de telefoon */
.voordeel-intro .prosa{font-size:15px}
.voordeel figure{margin:4px 0 2px}
.voordeel figure img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;height:auto}
.voordeel .prosa{font-size:15px}
.voordeel .prosa p{margin:0 0 8px}
.voordeel .prosa ul{margin:0 0 8px;padding-left:18px}
@media (max-width:760px){.voordeel-raster{grid-template-columns:1fr}}
.usp-blok .usp-lijst li{white-space:nowrap}
@media (min-width:1101px){.usp-blok .usp-lijst{flex-wrap:nowrap}}   /* v0.103: op een desktop op één regel (Stefan 15-10); de teksten zijn daarvoor ingekort in site-ontwerp.mjs */
/* delen van een dienst zonder eigen foto: compacte tekstkaarten naast elkaar (v0.100, Stefan 15-10) */
.tekst-kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.tekst-kaart{background:#fff;box-shadow:var(--schaduw);border-top:3px solid var(--blue);padding:22px 26px 24px}
.tekst-kaart h3{margin:0 0 8px}
.tekst-kaart .prosa{font-size:15px}
.tekst-kaart .knoppen{margin:12px 0 0}
@media (max-width:640px){.dienst-rijen .knop{min-width:0;width:100%}}
.ook-rij{margin-top:4px}
.ook-kaart{display:flex;flex-direction:column;background:#fff;box-shadow:var(--schaduw);text-decoration:none;color:var(--ink);transition:transform .2s}
.ook-kaart:hover{transform:translateY(-3px)}
.ook-kaart img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.ook-kaart>span{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px}
.ook-kaart b{font:600 18px/1.3 var(--kop);color:var(--navy)}
.uitklap{margin-top:6px;font-size:15px}
.uitklap summary{cursor:pointer;color:var(--blue);font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:6px}
.uitklap summary::-webkit-details-marker{display:none}
.uitklap summary::after{content:'+';font-size:18px;line-height:1}
.uitklap[open] summary::after{content:'–'}
.uitklap p{margin:8px 0 0}
/* inhoud (gewone pagina's: blog, privacy, product) */
.inhoud{max-width:70ch}
.inhoud p{margin:0 0 14px}
.inhoud img{display:block;width:auto;max-width:100%;height:auto;margin:20px 0;box-shadow:var(--schaduw)}
.inhoud img[src$=".svg"],.inhoud img[style]{box-shadow:none}
.inhoud img[src$=".svg"]{width:56px;height:56px;margin:16px 0 4px}
.inhoud p:has(> img[style]){display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.inhoud p>img[style]{display:inline-block;margin:0;max-height:65px;width:auto}
.inhoud ul{padding-left:20px;margin:0 0 14px}
.inhoud li{margin:3px 0}
.inhoud a:not(.knop){text-decoration:underline;text-underline-offset:3px}
.inhoud .knop,.prosa .knop{margin:6px 12px 6px 0}
.inhoud ul li>p>a:only-child,.inhoud ul li>a:only-child{display:inline-flex;background:var(--blue);color:#fff;text-decoration:none;font:600 15px/1.2 var(--tekst);padding:13px 22px}
.inhoud ul li>p>a:only-child:hover,.inhoud ul li>a:only-child:hover{background:var(--blue7)}
.inhoud ul:has(li>p>a:only-child),.inhoud ul:has(li>a:only-child){list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.held{margin:0 0 28px}.held img{width:100%;max-height:520px;object-fit:cover;box-shadow:var(--schaduw)}
.terug{margin:0 0 12px;font-size:15px}
.contact-inhoud h2{font-size:22px;margin-top:20px}
.contact-inhoud h3{font-size:19px;margin-top:16px}
/* kaarten (projecten oud, producten) */
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.kaart{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .2s,box-shadow .2s}
.kaart:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,46,84,.16)}
.kaart img,.kaart .geenbeeld{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--lblue);display:block}
.kaart-tekst{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px}
.kaart-tekst b{font:600 17px/1.3 var(--kop);color:var(--navy)}
.kaart-tekst span{color:var(--blue);font-weight:600;white-space:nowrap;font-size:14px}
/* voet: navy balk met logo, zoals het brandbook (logo optie 1) */
/* v0.100: compacte voet (Stefan 15-10): links het logo met de social kanalen eronder, rechts twee kolommen (adres, contact); geen menu
   en geen taalwissel (die staan in de vaste kop). Navy (brandbook); onderaan versienummer en Feliro.nl als enige afwijking van thiel.nl. */
.voet{background:var(--navy);color:#cfe0f0;margin-top:0;font-size:14px;border-top:3px solid var(--blue);text-align:left}
.voet a{color:#fff;text-decoration:none}.voet a:hover{text-decoration:underline}
.voet-rooster{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:20px 64px;align-items:center;padding-top:28px;padding-bottom:26px}   /* v0.117: niet hoger dan de kolommen; v0.118: iets meer blauw boven en onder (Stefan) */
.voet-merk{display:flex;flex-direction:row;flex-wrap:wrap;gap:14px 22px;align-items:center}   /* v0.117 (Stefan 16-10): logo, social kanalen en de knop op één rij, de voet wordt zo lager */
.voet-logo{display:block;width:150px;margin:0}   /* v0.118 (Stefan): logo twee keer zo groot, gecentreerd voor de iconen */
.voet-logo img{width:150px;height:104px;object-fit:cover;display:block}   /* het svg is vierkant met lege rand; bijgesneden tot het logo zelf */
.voet-social,/* het .thiel-ui-icon is vierkant met lege rand; bijgesneden tot het logo zelf */
.voet-social{display:flex;gap:10px;align-items:center}
.voet-social a{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.35);border-radius:50%;transition:background .2s}
.voet-social a:hover{background:var(--blue);border-color:var(--blue);text-decoration:none}
.voet-social svg,.voet-social .thiel-ui-icon{width:16px;height:16px;fill:#fff}
.voet-contact-icoon{display:none!important}
.voet-kolom{margin:0;line-height:1.6}
.voet-kolom b{color:#fff;font-weight:600}
/* smalle lichtblauwe knop naar de contactpagina (Stefan 15-10), ook in de shop (styles/main.css) */
.knop-voet{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;margin-top:0;background:var(--lblue);color:var(--navy)!important;font:600 14px/1 var(--tekst);text-decoration:none!important;transition:background .15s}
.knop-voet:hover{background:#fff}
.voet-onder{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;padding-top:16px;padding-bottom:20px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#9fb6cc}
.voet-onder a{color:#cfe0f0}.voet-feliro{margin-left:auto}
.voet-links{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}   /* v0.141: de juridische links als groep; © Van Thiel staat bij versie en Feliro.nl */
/* inkomers: subtiel, uit bij minder beweging */
.inkomer{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.inkomer.zichtbaar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.inkomer{opacity:1;transform:none;transition:none}.kaart,.project-kaart img,.dienst-kaart,.knop{transition:none}.kaart:hover,.dienst-kaart:hover,.knop:hover{transform:none}}
/* ---------- formulieren in eigen code (v0.96) en de kaart zonder Google ---------- */
.formulier{max-width:560px;margin:0;padding:28px;background:#fff;border-top:3px solid var(--blue);box-shadow:var(--schaduw)}
.formulier h2{margin:0 0 6px;font-size:24px}
.formulier .uitleg{margin:0 0 18px;color:var(--muted);font-size:15px}
.veld{margin:0 0 14px}
.veld label{display:block;font:600 14px/1.4 var(--tekst);color:var(--navy);margin-bottom:6px}
.veld .ster{color:var(--orange)}
.veld input,.veld textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:0;appearance:none}
.veld input:focus,.veld textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.veld textarea{min-height:140px;resize:vertical}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.val{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.formulier .knop{margin:4px 0 0;min-height:46px}
.formulier .knop:disabled{opacity:.6;cursor:wait}
.melding{margin:14px 0 0;padding:12px 14px;font-size:15px;background:var(--lblue);border-left:4px solid var(--blue)}
.melding.ok{border-color:#2e8b57}.melding.fout{border-color:var(--orange)}
.klein{font-size:13px;color:var(--muted);margin:12px 0 0}
.formulier.klaar .veld,.formulier.klaar .knop{display:none}
.nieuwsbrief-blok .formulier{max-width:none;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) auto;gap:4px 28px;align-items:end;padding:26px 32px}
.nieuwsbrief-blok .formulier h2{grid-column:1;grid-row:1;margin:0}
.nieuwsbrief-blok .formulier .uitleg{grid-column:1;grid-row:2;margin:0;color:var(--ink);font-size:14px}   /* v0.145: een maat kleiner */
.nieuwsbrief-blok .formulier .uitleg a{color:inherit;text-decoration:underline}   /* v0.118 (Stefan 16-10): zelfde kleur als de lopende tekst op de home, niet lichter */
.nieuwsbrief-blok .formulier .veld{grid-column:2;grid-row:1/span 2;margin:0}
.nieuwsbrief-blok .formulier .knop{grid-column:3;grid-row:1/span 2;margin:0;align-self:end;min-height:52px}   /* v0.226: even hoog als het invoerveld */
.nieuwsbrief-blok .formulier .melding,.nieuwsbrief-blok .formulier .klein{grid-column:1/span 3}
.contact-rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start;margin-top:36px}
.contact-rij .formulier{margin-top:0}
.kaart-blok{padding-top:3px}
.kaartvenster{width:100%;height:420px;border:0;display:block;background:var(--lblue);box-shadow:var(--schaduw)}
/* v0.116 (Stefan 16-10): contactpagina 2.0. Formulier links, de gegevens en de kaart rechts (zoals thiel.nl), compact:
   labels 13 px, velden 42 px hoog, groepen met een kleine kop. Beweging: velden komen na elkaar binnen, een veld licht
   op bij focus, de pijl op de knop schuift, de marker op de kaart pulseert, na versturen tekent een vinkje. */
.contact-2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:36px;align-items:start;margin-top:36px}
.contact-2 .formulier{max-width:none;padding:26px 30px 24px}
.contact-2 .formulier h2{font-size:23px}
.contact-2 .formulier .uitleg{margin-bottom:14px;font-size:15px}
.groep{border:0;padding:0;margin:0 0 6px;min-width:0}
.groep legend{padding:0;margin:0 0 8px;font:600 11.5px/1.3 var(--tekst);letter-spacing:.8px;text-transform:uppercase;color:var(--blue)}
.groep legend small{font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);font-size:12px}
.contact-2 .veld{margin:0 0 11px;position:relative}
.contact-2 .veld label{font-size:13px;margin-bottom:4px;transition:color .15s}
.contact-2 .veld label small{font-weight:500;color:var(--muted)}
.contact-2 .veld input,.contact-2 .veld textarea{font-size:15px;padding:9px 12px;min-height:42px;border-radius:3px;transition:border-color .15s,box-shadow .15s,background .15s}
.contact-2 .veld input::placeholder{color:#aab3bc;font-size:13.5px}
.contact-2 .veld input:focus,.contact-2 .veld textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,114,206,.16)}
.contact-2 .veld:focus-within label{color:var(--blue)}
.contact-2 .veld input:user-invalid,.contact-2 .veld textarea:user-invalid{border-color:var(--orange)}
.contact-2 .veld textarea{min-height:118px}
.contact-2 .veld-rij{gap:0 14px}
/* v0.122 (Stefan 16-10): compacter, zodat het formulier op een laptopscherm zonder scrollen past: velden 36 px, labels
   12,5 px, minder ruimte tussen de velden en een lager berichtveld */
.contact-2 .formulier{padding:20px 26px 18px}
.contact-2 .formulier h2{font-size:21px;margin-bottom:4px}
.contact-2 .formulier .uitleg{margin-bottom:10px;font-size:14px}
.contact-2 .groep legend{margin-bottom:6px}
.contact-2 .veld{margin-bottom:8px}
.contact-2 .veld label{font-size:12.5px;margin-bottom:3px}
.contact-2 .veld input,.contact-2 .veld textarea{font-size:14px;padding:6px 10px;min-height:36px}
.contact-2 .veld input::placeholder{font-size:13px}
.contact-2 .veld textarea{min-height:84px}
.contact-2 .veld-rij{gap:0 12px}
.veld-rij.adres{grid-template-columns:minmax(0,1fr) 110px}
.formulier .hint{margin:-4px 0 10px;font-size:12.5px;color:var(--blue7)}
.formulier .hint[hidden]{display:none}
.ct-privacy{text-align:center;margin:6px 0 12px;font-size:12.5px;line-height:1.5}   /* v0.117: één regel, gecentreerd boven de knop */
.acties{display:flex;justify-content:center;margin-top:0}
.acties .knop{min-width:200px}
.knop-pijl svg,.knop-pijl .thiel-ui-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.knop-pijl:hover svg,.knop-pijl:focus-visible svg,.knop-pijl:hover .thiel-ui-icon,.knop-pijl:focus-visible .thiel-ui-icon{transform:translateX(4px)}
.cf-turnstile{margin:0 0 10px}
.formulier.klaar .groep,.formulier.klaar .acties,.formulier.klaar .ct-privacy,.formulier.klaar .hint,.formulier.klaar .cf-turnstile{display:none}
.formulier.klaar .melding.ok{display:flex;align-items:center;gap:14px;font-size:15.5px;padding:16px 18px}
.vink{width:40px;height:40px;flex:0 0 40px}
.vink circle{fill:none;stroke:#2e8b57;stroke-width:2;stroke-dasharray:160;stroke-dashoffset:160;animation:tekenen .6s ease-out forwards}
.vink path{fill:none;stroke:#2e8b57;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;stroke-dashoffset:50;animation:tekenen .4s ease-out .45s forwards}
@keyframes tekenen{to{stroke-dashoffset:0}}
/* velden komen na elkaar binnen zodra het formulier in beeld is (scripts/site.js zet .zichtbaar op .contact-form) */
.js .contact-form .veld,.js .contact-form legend,.js .contact-form .acties{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.js .contact-form.zichtbaar .veld,.js .contact-form.zichtbaar legend,.js .contact-form.zichtbaar .acties{opacity:1;transform:none}
.js .contact-form.zichtbaar .veld{transition-delay:calc(60ms * var(--i,0))}
.js .contact-form.zichtbaar .acties{transition-delay:.7s}
/* de gegevens naast het formulier */
.contact-zij{display:grid;gap:22px}
.contact-kaartje{background:#fff;border-top:3px solid var(--blue);box-shadow:var(--schaduw);padding:22px 26px 20px}
.contact-kaartje h2{margin:0 0 14px;font-size:22px}
.contact-regels{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.contact-regels li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start}
.contact-regels .ci{width:34px;height:34px;padding:7px;border-radius:50%;background:var(--lblue);fill:var(--blue);transition:background .2s,fill .2s}
.contact-regels li:hover .ci{background:var(--blue);fill:#fff}
.contact-regels b{display:block;font:600 11.5px/1.3 var(--tekst);letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin:3px 0 3px}
.contact-regels a{display:block;min-height:24px;color:var(--ink);text-decoration:none;font-size:15px;line-height:1.55;transition:color .15s}
.contact-regels a span{color:var(--muted);font-size:13.5px}
.contact-regels a:hover{color:var(--blue)}
/* de kaart met een adreskaartje erover, de marker pulseert */
.kaartvenster-rand{position:relative;overflow:hidden;box-shadow:var(--schaduw)}
.contact-2 .kaartvenster{height:320px;box-shadow:none}
.kaart-label{position:absolute;left:14px;top:14px;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.96);backdrop-filter:blur(4px);padding:10px 12px;box-shadow:0 6px 18px rgba(0,46,84,.18);max-width:calc(100% - 28px);border-left:3px solid var(--blue)}
.kaart-pin{width:30px;height:30px;flex:0 0 30px;position:relative;display:grid;place-items:center}
.kaart-pin svg,.kaart-pin .thiel-ui-icon{width:22px;height:22px;fill:var(--orange);position:relative;z-index:1}
.kaart-pin::before{content:'';position:absolute;inset:3px;border-radius:50%;background:rgba(232,119,34,.35);animation:puls 2s ease-out infinite}
.kaart-adres{display:grid;font-size:12.5px;line-height:1.35;color:var(--muted);min-width:0}
.kaart-adres b{font-size:13.5px;color:var(--navy)}
.knop-klein{min-height:34px;padding:7px 12px;font-size:13px;white-space:nowrap}
.kaart-blok .klein{margin-top:8px}
@media (max-width:900px){.contact-2{grid-template-columns:1fr;gap:26px}.veld-rij.adres{grid-template-columns:minmax(0,1fr) 96px}}
@media (prefers-reduced-motion:reduce){.js .contact-form .veld,.js .contact-form legend,.js .contact-form .acties{opacity:1;transform:none;transition:none}.kaart-pin::before,.vink circle,.vink path{animation:none;stroke-dashoffset:0}.knop-pijl svg,.knop-pijl .thiel-ui-icon{transition:none}}
/* ---------- videokop (v0.97): het filmpje zichtbaar, de tekst in een transparante balk (brandbook) ---------- */
.held-video{position:relative;min-height:min(62vh,560px);display:flex;align-items:flex-end;background:var(--navy);color:#fff;overflow:hidden;margin:0}
.held-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
.held-waas{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,46,84,.08) 0%,rgba(0,46,84,.18) 55%,rgba(0,46,84,.45) 100%)}
.held-tekst{position:relative;width:100%;padding-top:72px;padding-bottom:40px}
.held-balk{display:inline-block;background:var(--balk-navy);padding:28px 32px 30px;max-width:760px;backdrop-filter:blur(2px)}
.held-tekst .kicker{color:#94cfff;margin-bottom:8px}
.held-tekst h1{color:#fff;font-size:clamp(28px,3.4vw,44px);margin:0 0 20px;max-width:18ch}
.held-tekst .knoppen{margin:0}
.held-pauze{position:absolute;right:14px;bottom:14px;z-index:2;width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:rgba(0,46,84,.45);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:50%;cursor:pointer;opacity:.7;transition:opacity .15s,background .15s}
.held-pauze:hover,.held-pauze:focus-visible{opacity:1;background:rgba(0,46,84,.7);outline:none}
.held-pauze:focus-visible{box-shadow:0 0 0 2px #fff}
.held-pauze .ik-speel,.held-pauze.stil .ik-pauze{display:none}
.held-pauze.stil .ik-speel{display:block;margin-left:2px}
.met-held .pagina{padding-top:0}
/* ---------- mobiel en tablet ---------- */
@media (max-width:980px){.voet-rooster{grid-template-columns:1fr 1fr;gap:20px 32px}.voet-merk{grid-column:1/-1}.tweeluik,.dienst-rij,.cert-kaart{grid-template-columns:minmax(0,1fr)}.tweeluik.om .tweeluik-tekst{order:0}.tweeluik-beeld,.dienst-rij figure,.assort-intro .tweeluik-beeld{min-height:0;aspect-ratio:16/9}.dienst-rij-tekst{padding:20px}.ook-rij{grid-template-columns:1fr}.kaarten-3,.project-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .keten{grid-template-columns:1fr;gap:18px}.keten::before{left:21px;right:auto;top:0;bottom:0;width:2px;height:auto}.keten li{flex-direction:row;text-align:left;align-items:flex-start;gap:14px;padding:0}.keten li b{display:block}.keten-nr{flex:none}
  /* v0.226 (Stefan 25-10): op de telefoon een smal knopje met alleen het icoon naast het invoerveld (de naam staat in aria-label) */
  .nieuwsbrief-blok .formulier{grid-template-columns:minmax(0,1fr) auto;gap:10px 8px}.nieuwsbrief-blok .formulier h2,.nieuwsbrief-blok .formulier .uitleg,.nieuwsbrief-blok .formulier .melding,.nieuwsbrief-blok .formulier .klein{grid-column:1/span 2;grid-row:auto}
  .nieuwsbrief-blok .formulier .veld{grid-column:1;grid-row:3}.nieuwsbrief-blok .formulier .knop{grid-column:2;grid-row:3;align-self:end;justify-self:start;padding:0 16px;min-height:52px;gap:0}.nieuwsbrief-blok .formulier .knop .knop-tekst{display:none}
  .cert-raster{grid-template-columns:1fr}.cert-kaart{grid-template-columns:96px minmax(0,1fr)}.balkfoto-tekst{max-width:none}.balkfoto::before{background:var(--balk-navy)}}
@media (max-width:640px){:root{--rand:16px}.pagina h2{font-size:21px}.voet-rooster{grid-template-columns:1fr;gap:16px;padding-top:22px;padding-bottom:20px}.voet-merk{flex-direction:row;align-items:center;justify-content:space-between;gap:14px}.voet-contact-icoon{display:inline-flex!important;background:var(--lblue);border-color:var(--lblue)}.voet-merk .knop-voet{display:none}.voet-contact-icoon svg,.voet-contact-icoon .thiel-ui-icon{fill:var(--navy)}.voet-kolom{line-height:1.65}.voet-feliro{margin-left:0}.sectie{padding:36px 0}main.pagina{padding-bottom:40px}.kaarten-3,.project-raster,.veld-rij,.contact-rij{grid-template-columns:1fr}.contact-rij{gap:24px;margin-top:28px}.kaart-blok{padding-top:0}.kaartvenster{height:300px}.formulier{padding:20px}.contact-2{margin-top:24px}.contact-2 .formulier{padding:20px 18px 18px}.contact-2 .veld-rij{grid-template-columns:1fr 1fr;gap:0 10px}.veld-rij.adres{grid-template-columns:minmax(0,1fr) 84px}.contact-2 .kaartvenster{height:260px}.kaart-label{left:10px;top:10px;gap:6px 10px;padding:8px 10px;flex-wrap:wrap}.kaart-label .knop-klein{margin-left:40px;min-height:30px;padding:5px 10px;font-size:12.5px}.contact-kaartje{padding:18px 18px 16px}
  .held-video{min-height:62vh}.held-tekst{padding-top:72px;padding-bottom:36px}.held-balk{width:100%;padding:20px 16px 22px;background:rgba(0,46,84,.68)}.held-tekst h1{font-size:clamp(24px,7vw,28px);max-width:none;margin-bottom:18px}.knoppen,.held-tekst .knoppen{display:grid;grid-auto-flow:row;width:100%;gap:10px}.held-pauze{right:12px;top:12px;bottom:auto}
  .tijdlijn li{grid-template-columns:1fr;gap:6px;padding-left:28px}.tijdlijn li::before{left:7px;top:28px}.tijdlijn li::after{left:2px;top:8px}.tijdlijn .jaar{text-align:left;padding:0;font-size:26px}
  .usp-strook ul{justify-content:flex-start;gap:8px 18px;padding:12px 16px}.usp-strook li{font-size:13.5px}.paginakop{min-height:0;background-image:none}.paginakop::before{display:none}.paginakop .in{padding-top:22px;padding-bottom:20px}.paginakop h1{font-size:28px}.paginakop .sub{font-size:15px;margin-top:4px}.balkfoto,.balkfoto-quote{padding:40px 0}.balkfoto-tekst{padding:22px 20px}
  .cta-band .in{flex-direction:column;align-items:flex-start}.cta-acties{width:100%}.cta-acties .knop{width:100%}.logo-rij{gap:14px 20px}.logo-rij img{height:44px}.sectie-kop{margin-bottom:22px}.cert-kaart{grid-template-columns:1fr;gap:12px}.cert-logo{justify-content:flex-start;min-height:0}}
/* v0.133 (Stefan 17-10): telefoon en tablet — geen lege ruimte boven de titel van een dienst (de rij-gap van 32 px stond tussen
   foto en tekst); de kwaliteitsstappen in drie gelijke kolommen (nummer · titel · uitleg) */
@media (max-width:980px){
  .dienst-rij{gap:0}
  .dienst-rij-tekst,.dienst-rij.licht .dienst-rij-tekst{padding:16px 20px 20px}
  .keten li{display:grid;grid-template-columns:44px minmax(0,8.5em) minmax(0,1fr);gap:14px;align-items:center}
  .keten li b{display:block}
}
@media (max-width:640px){
  .keten li{grid-template-columns:40px minmax(0,7.5em) minmax(0,1fr);gap:12px}
  .keten-nr{width:40px;height:40px;font-size:16px;line-height:40px}
  .keten::before{left:19px}
  .keten li b{font-size:16px}.keten li span:last-child{font-size:13.5px;line-height:1.4}
}
/* v0.133 (Stefan 17-10): mobiele voet compact — geen logo, de vier iconen in het midden, geen tussenkop "Contact" (de nummers
   staan direct onder het adres). v0.141 (Stefan 18-10): adres en contact links, gelijk met de tekstblokken erboven; onder de
   streep gecentreerd op twee regels: Disclaimer, Privacy policy en Cookie-instellingen, daaronder © Van Thiel, versie en Feliro.nl */
@media (max-width:640px){
  .voet-logo{display:none}
  .voet-merk{justify-content:center}
  .voet-rooster,.voet .in.voet-rooster{gap:0;padding-top:20px;padding-bottom:16px;text-align:left}
  .voet-merk{margin-bottom:14px}
  .voet-kolom{text-align:left;line-height:1.6}
  .voet-kolom+.voet-kolom b,.voet-kolom+.voet-kolom b+br{display:none}
  .voet-onder,.voet footer{justify-content:center;text-align:center;gap:6px 16px;padding-top:12px;padding-bottom:16px}
  .voet-links{justify-content:center;gap:4px 16px;flex-basis:100%}
  .voet-feliro{margin-left:0;flex-basis:100%}
}
/* v0.98 assortiment: overzicht, groepen en productpagina's (statische HTML voor zoekmachines en AI), calculatorpagina met vragen */
.inhoud .knop-licht{background:#fff;color:var(--blue);border:1px solid var(--blue)}
.inhoud .knop-licht:hover{background:var(--lblue)}
.inhoud a.kaart{text-decoration:none}
.lead{font-size:15px;line-height:1.6;color:var(--ink);max-width:820px}
body.overzicht .lead,body.groep .lead,.product-tekst .lead{font-size:15px}   /* v0.109: assortiment en product in de gewone maat */
.lead-vet{font:600 clamp(20px,2vw,26px)/1.35 var(--kop);color:var(--navy);margin:0}
.sectie.kwaliteit-lead{padding:30px 0 4px}
.kruimel{font-size:14px;color:var(--muted);margin:0 0 10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.kruimel a{color:var(--muted);text-decoration:none}
.kruimel a:hover{color:var(--blue);text-decoration:underline}
.inhoud h3 a:not(.knop){color:var(--navy);text-decoration:none}
.inhoud h3 a:hover{color:var(--blue)}
.kaart.product img{object-fit:contain;background:#fff;padding:14px;border-bottom:1px solid var(--line)}
.kaart.product .kaart-tekst{flex-direction:column;align-items:flex-start;gap:4px}
.kaart.product .kaart-tekst b{font-size:17px}
.kaart.product .kaart-tekst span{font-weight:500;font-size:14px;color:var(--muted)}
.product-kop{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:28px;align-items:start;margin:0 0 24px}
.productfoto{margin:0;border:1px solid var(--line);background:#fff;padding:16px;display:flex;justify-content:center}
.productfoto img{max-height:260px;width:auto;object-fit:contain}   /* v0.109: was 420 px (Stefan: zeer grote plaatjes) */
.systeem{font:600 12px/1.4 'Open Sans',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);margin:0 0 10px}
.tabel-schuif{overflow-x:auto;margin:0 0 12px}
table.spec{border-collapse:collapse;width:100%;font-size:15px}   /* v0.118: dezelfde maat als de lopende tekst */
table.spec th{text-align:left;font:600 13px/1.4 'Open Sans',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--navy);padding:10px 12px 8px 0}
table.spec td{border-bottom:1px solid var(--line);padding:10px 12px 10px 0;vertical-align:top}
table.spec td b{color:var(--navy);font-weight:600;white-space:nowrap}
.inhoud p.klein,.klein{font-size:14px;color:var(--muted)}
.vragen{margin:8px 0 0;border-top:1px solid var(--line)}
.vraag{border-bottom:1px solid var(--line)}
.vraag summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;min-height:44px}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:'+';font:400 26px/1 'Open Sans',sans-serif;color:var(--blue)}
.vraag[open] summary::after{content:'–'}
.vraag summary h3{margin:0;font:600 18px/1.35 'Oswald',sans-serif;color:var(--navy)}
.vraag p{margin:0 0 18px;max-width:820px}
@media (max-width:860px){.product-kop{grid-template-columns:1fr;gap:20px}.productfoto img{max-height:300px}}
/* v0.100: productkaarten zoals op thiel.nl: foto in een wit kader, de naam in Oswald eronder en een blauwe knop Lees verder */
.raster:has(.kaart.product){grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px 14px;margin:0 0 30px}   /* v0.109: compacter (Stefan 15-10) */
.kaart.product{border:0;background:transparent;overflow:visible;min-width:0}
.kaart.product:hover{transform:none;box-shadow:none}
.kaart.product img{aspect-ratio:1;border:1px solid var(--line);padding:8px;border-bottom:1px solid var(--line);transition:box-shadow .2s,transform .2s}
.kaart.product:hover img{box-shadow:0 14px 34px rgba(0,46,84,.14);transform:translateY(-3px)}
.kaart.product .kaart-tekst{padding:10px 0 0;gap:2px;max-width:100%;min-width:0}
.kaart.product .kaart-tekst b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-width:0;font:500 14.5px/1.3 var(--kop);color:var(--navy);max-width:100%;height:2.6em;overflow:hidden;overflow-wrap:anywhere}   /* v0.118 (Stefan 16-10): naam niet afkappen, iets kleiner, hoogstens twee regels en bij elk kaartje dezelfde hoogte (regel blijft wit) */
.kaart.product .kaart-tekst span{font-weight:400;font-size:13px;color:var(--muted)}
.kaart.product .kaart-tekst .groep{display:block;min-width:0;max-width:100%;white-space:nowrap;overflow:visible;font:600 10px/1.3 var(--tekst);letter-spacing:.02em;text-transform:uppercase;color:var(--blue)}   /* v0.118: categorie altijd op één regel, kleiner en met minder letterafstand, niet afgekapt */
.kaart.product .kaart-tekst .lees{display:inline-block;margin-top:4px;padding:0;background:none;color:var(--blue);font:600 13.5px/1.2 var(--tekst);transition:color .2s}
.kaart.product .kaart-tekst .lees::after{content:" →"}
.kaart.product:hover .lees{color:var(--navy);text-decoration:underline}
/* v0.121 (Stefan 16-10): categoriepanelen op het assortiment. Eén paneel per categorie met foto, naam, korte omschrijving
   en aantal; klik klapt het open (hoogte via grid-template-rows, de kaartjes komen na elkaar binnen). Zonder JavaScript
   (geen .js op html) staan alle panelen open; bij "minder beweging" geen overgangen. */
.cat-panelen{display:grid;gap:8px;margin:0 0 30px}
.cat-paneel{background:#fff;border:1px solid var(--line);border-left:3px solid var(--steel);box-shadow:0 4px 14px rgba(0,46,84,.06);transition:border-color .3s,box-shadow .3s}
.cat-paneel.open,.cat-paneel:hover{border-left-color:var(--blue);box-shadow:var(--schaduw)}
body.overzicht .inhoud .cat-paneel h2.cat-kop{margin:0;padding:0;border:0;font:inherit}   /* v0.125: wint van h2:first-of-type (28 px marge) */
.cat-kop button{display:grid;grid-template-columns:44px minmax(0,1fr) 22px;gap:14px;align-items:center;width:100%;padding:9px 16px;background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:var(--ink)}
.cat-kop button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.inhoud .cat-kop img{width:44px;height:44px;margin:0;box-shadow:none;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:4px;padding:3px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.cat-paneel.open .cat-kop img,.cat-kop button:hover img{transform:scale(1.08)}
.cat-tekst{display:grid;gap:2px;min-width:0}
.cat-naam{font:600 17px/1.2 var(--kop);color:var(--navy);transition:color .2s}
.cat-kop button:hover .cat-naam{color:var(--blue)}
.cat-oms{font-size:13px;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-n{font:500 14px/1 var(--tekst);color:var(--muted)}
.cat-pijl{width:22px;height:22px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.cat-paneel.open .cat-pijl{transform:rotate(180deg)}
.cat-inhoud{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.js .cat-paneel:not(.open) .cat-inhoud{grid-template-rows:0fr}
.cat-binnen{overflow:hidden;min-height:0}
.cat-binnen .raster.producten{margin:0;padding:4px 16px 14px}
.cat-alle{margin:0;padding:0 16px 12px;font-size:14px}
.js .cat-paneel .kaart.product{opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}
.js .cat-paneel.open .kaart.product{opacity:1;transform:none;transition-delay:calc(45ms * var(--i,0))}
@media (max-width:640px){.cat-kop button{grid-template-columns:40px minmax(0,1fr) 20px;gap:10px;padding:8px 12px}.inhoud .cat-kop img{width:40px;height:40px}.cat-naam{font-size:16px}.cat-oms{font-size:12px}.cat-binnen .raster.producten{padding:4px 12px 12px}.cat-alle{padding:0 12px 12px}}
@media (prefers-reduced-motion:reduce){.cat-inhoud,.cat-pijl,.cat-kop img,.js .cat-paneel .kaart.product,.js .assort-intro .tweeluik-tekst>*,.js .assort-intro .tweeluik-beeld,.inhoud .assort-intro .tweeluik-beeld>img{transition:none}.js .assort-intro .tweeluik-tekst>*,.js .assort-intro .tweeluik-beeld{opacity:1;transform:none}}
body.overzicht .inhoud h2{margin:44px 0 6px;padding-top:28px;border-top:1px solid var(--line)}
body.overzicht .inhoud h2:first-of-type{border-top:0;padding-top:0;margin-top:28px}
body.overzicht .inhoud h3{font:600 13px/1.4 'Open Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin:22px 0 14px}
body.overzicht .inhoud,body.groep .inhoud,body.product .inhoud{max-width:none}
@media (max-width:520px){.raster:has(.kaart.product){grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}.kaart.product img{padding:10px}.kaart.product .kaart-tekst{padding:8px 0 0}.kaart.product .kaart-tekst b{font-size:15px}.kaart.product .lees{padding:8px 12px;font-size:13px}table.spec{font-size:15px}}
.product-kop{max-width:1120px}.tabel-schuif{max-width:900px}body.groep .lead,body.overzicht .lead{max-width:860px}
/* v0.98: banner steigercalculator en shop op de home — navy met bouwtekening-raster, een steiger die zich laag voor laag
   opbouwt (echte berekening), tellende materiaalstaat en een loopband met producten. Bij "minder beweging" alles stil. */
.innovatie{position:relative;margin:-44px 0 48px;color:#fff;background:radial-gradient(1100px 520px at 78% 30%,rgba(0,114,206,.38),transparent 62%),linear-gradient(160deg,#00203c 0%,var(--navy) 55%,#003a6b 100%);overflow:hidden;isolation:isolate}
.innovatie::before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(148,207,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(148,207,255,.07) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%)}
.innovatie-rooster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding-top:72px;padding-bottom:48px}
.nieuw{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:7px 14px 7px 12px;border:1px solid rgba(148,207,255,.45);border-radius:999px;font:600 13px/1 'Open Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#cfe8ff;background:rgba(0,114,206,.18)}
.puls{width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(232,119,34,.7);animation:puls 2s ease-out infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(232,119,34,.65)}80%,100%{box-shadow:0 0 0 12px rgba(232,119,34,0)}}
.innovatie h2{font:700 clamp(34px,4.4vw,56px)/1.05 'Oswald',sans-serif;margin:0 0 20px;color:#fff;letter-spacing:-.005em}
.innovatie h2 span{display:block;color:#94cfff}
.innovatie .intro{font-size:16px;line-height:1.6;color:#dbe8f5;margin:0 0 26px;max-width:560px}
.stappen{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;counter-reset:stap}
.stappen li{display:flex;align-items:center;gap:9px;font:600 15px/1.3 'Open Sans',sans-serif;color:#fff}
.stappen svg,.stappen .thiel-ui-icon{color:#94cfff;flex:none}
.innovatie .knoppen{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.innovatie .knop{margin:0;min-height:48px;display:inline-flex;align-items:center;gap:8px}
.knop-actie{background:#B85A12!important;border-color:#B85A12!important;color:#fff!important}   /* v0.157: donkerder oranje, wit erop 4,7:1 (was 3,0:1) */
.knop-actie:hover{background:#9E4C0F!important;border-color:#9E4C0F!important}
.knop-actie span{transition:transform .2s}
.knop-actie:hover span{transform:translateX(4px)}
.knop-omlijnd{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.6)}
.knop-omlijnd:hover{background:rgba(255,255,255,.1)!important;border-color:#fff}
/* het "scherm" met de calculator */
.innovatie-scherm{margin:0;background:#fff;color:var(--ink);box-shadow:0 30px 80px rgba(0,10,25,.45),0 0 0 1px rgba(148,207,255,.25);transform:perspective(1600px) rotateY(-5deg) rotateX(2deg);transform-origin:left center}
.scherm-balk{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#eef3f8;border-bottom:1px solid var(--line);font:600 13px/1 'Open Sans',sans-serif;color:var(--navy)}
.scherm-balk i{width:9px;height:9px;border-radius:50%;background:#c9d4df}
.scherm-balk span{margin-left:8px}
.scherm-inhoud{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:0}
.bouw{position:relative;padding:14px 10px 6px;background:linear-gradient(180deg,#f7fafc,#fff);overflow:hidden}
.bouw-svg{display:block;width:100%;height:auto}
.staat{padding:18px 18px 16px;border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.staat ul{list-style:none;margin:0 0 12px;padding:0}
.staat li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.staat li b,.staat p b{font:600 17px/1.2 'Oswald',sans-serif;color:var(--navy);font-variant-numeric:tabular-nums}
.staat p{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0 0;font-size:13px;color:var(--muted)}
.staat .totaal b{font-size:24px;color:var(--blue)}
/* v0.119 opbouw (wens Stefan 16-10: geen scan, een versnelde opbouw): de steiger wordt onderdeel voor onderdeel neergezet,
   slag voor slag (schetsIso met opbouw: true zet elke bouwstap in <g class="bs" style="--b:N">, 17 stappen bij de voorbeeldgevel).
   Elk onderdeel zakt op zijn plek; daarna blijft de steiger staan, vervaagt en begint opnieuw (11 s). scripts/site.js zet .bouwt
   en start de opbouw opnieuw bij elke ronde. Zonder JavaScript of bij minder beweging: de eindstand. */
.js .innovatie .bouw-svg.bouwt{animation:cyclus 11s infinite}
@keyframes cyclus{0%,90%{opacity:1}100%{opacity:0}}
.js .innovatie .bouw-svg.bouwt .bs{animation:zet .5s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--b) * .3s)}
@keyframes zet{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.staat li{animation:rij 11s infinite;animation-delay:calc(var(--i) * .35s)}
@keyframes rij{0%,4%{opacity:.25;transform:translateX(8px)}14%,88%{opacity:1;transform:none}100%{opacity:.25}}
.js .innovatie:not(.speelt) .bouw-svg,.js .innovatie:not(.speelt) .bs,.js .innovatie:not(.speelt) .staat li{animation-play-state:paused}
/* loopband met producten uit de shop */
.shopstrook{border-top:1px solid rgba(148,207,255,.18);padding:20px 0 26px}
.strook-kop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;font:600 13px/1 'Open Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#94cfff}
.strook-kop a{color:#fff;text-transform:none;letter-spacing:0;font-size:15px;text-decoration:none}
.strook-kop a:hover{text-decoration:underline}
.loopband{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.loopband ul{display:flex;gap:16px;margin:0;padding:0 8px;list-style:none;flex:none;animation:band 48s linear infinite}
.loopband:hover ul,.loopband:focus-within ul{animation-play-state:paused}
@keyframes band{to{transform:translateX(-100%)}}
.loopband a{display:flex;align-items:center;gap:12px;width:250px;padding:10px 14px 10px 10px;background:rgba(255,255,255,.06);border:1px solid rgba(148,207,255,.2);color:#fff;text-decoration:none;font-size:14px;line-height:1.3;transition:background .2s,border-color .2s}
.loopband a:hover,.loopband a:focus-visible{background:rgba(255,255,255,.14);border-color:#94cfff}
.loopband img{width:56px;height:56px;object-fit:contain;background:#fff;padding:4px;flex:none}
@media (max-width:1100px){.innovatie-rooster{grid-template-columns:1fr;gap:36px;padding-top:56px}.innovatie-scherm{transform:none}}
@media (max-width:640px){.innovatie{margin:-28px 0 36px}.innovatie-rooster{padding-top:40px;padding-bottom:32px;gap:28px}.innovatie .intro{font-size:16.5px}.scherm-inhoud{grid-template-columns:1fr}.staat{border-left:0;border-top:1px solid var(--line)}.innovatie .knoppen{display:grid}.innovatie .knop{justify-content:center}.loopband a{width:210px}}
@media (prefers-reduced-motion:reduce){.bouw-svg,.bouw-svg .bs,.staat li,.puls,.loopband ul{animation:none!important}.loopband{overflow-x:auto;mask-image:none}.loopband ul[aria-hidden]{display:none}.innovatie-scherm{transform:none}}
/* v0.99 (feedback Stefan 15-10: te groot voor de landingspagina, beeld niet uitgelijnd met de tekst): compacter, het
   scherm recht en even hoog als het tekstblok, de staat naast de steiger in dezelfde hoogte, een lagere loopband */
.innovatie-rooster{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center;padding-top:44px;padding-bottom:36px}
.nieuw{margin-bottom:14px;padding:6px 12px 6px 10px;font-size:12px}
.innovatie h2{font-size:clamp(28px,3vw,40px);line-height:1.08;margin-bottom:14px}
.innovatie .intro{font-size:16px;line-height:1.6;margin-bottom:18px;max-width:520px}
.stappen{margin-bottom:22px;gap:8px 18px}
.stappen li{font-size:14px}
.innovatie .knop{min-height:44px;padding:12px 18px;font-size:15px}
.innovatie-scherm{transform:none;max-width:620px;justify-self:end;width:100%;box-shadow:0 20px 50px rgba(0,10,25,.4),0 0 0 1px rgba(148,207,255,.25)}
.scherm-balk{padding:8px 12px;font-size:12px}
.scherm-inhoud{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:stretch}
.bouw{padding:10px 8px 4px;display:flex;align-items:center}
.bouw-svg{max-height:270px}
.staat{padding:12px 14px;justify-content:center}
.staat ul{margin-bottom:8px}
.staat li{padding:6px 0;font-size:13px}
.staat li b,.staat p b{font-size:15px}
.staat .totaal b{font-size:20px}
.staat p{margin-top:4px;font-size:12px}
.shopstrook{padding:14px 0 18px}
.strook-kop{margin-bottom:10px}
.loopband a{width:210px;padding:8px 12px 8px 8px;font-size:13px;gap:10px}
.loopband img{width:44px;height:44px}
@media (max-width:1100px){.innovatie-rooster{grid-template-columns:1fr;gap:28px;padding-top:36px}.innovatie-scherm{justify-self:stretch;max-width:none}}
@media (max-width:640px){.innovatie-rooster{padding-top:32px;padding-bottom:24px}.bouw-svg{max-height:230px}.scherm-inhoud{grid-template-columns:1fr}}
@media (max-width:640px){.bouw-svg{max-height:190px}.staat{padding:10px 12px}.staat ul{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;margin-bottom:4px}.staat li{padding:5px 0;font-size:12.5px}.staat p{display:inline-flex;gap:8px;margin:4px 16px 0 0}.innovatie .intro{font-size:15.5px}.stappen{display:none}}
/* v0.100 erbij: de banner staat na de USP-strook (geen negatieve marge), knoppen even breed, raster met trage beweging */
.innovatie{margin:0}
.innovatie .knoppen{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px}
.innovatie::before{animation:raster-drift 40s linear infinite}
@keyframes raster-drift{to{background-position:32px 32px}}
@media (max-width:640px){.innovatie{margin:0}.innovatie .knoppen{display:grid;grid-auto-flow:row}}
@media (prefers-reduced-motion:reduce){.innovatie::before{animation:none}}
.verhaal-foto figcaption .quote{font-size:22px;line-height:1.2;margin:0}
/* v0.119 (feedback Stefan 16-10: "heftig wit vlak op blauwe achtergrond"): een glazen omlijsting om het scherm, en het scherm
   zelf niet meer kaal wit maar lichtblauwgrijs met een heel zwak blauwdrukraster achter de steiger. Rechte hoeken, zoals thiel.nl. */
.innovatie-scherm{padding:6px;background:rgba(255,255,255,.07);border:1px solid rgba(148,207,255,.35);box-shadow:0 18px 44px rgba(0,10,25,.35)}
.innovatie-scherm>.scherm-balk,.innovatie-scherm>.scherm-inhoud{background-color:#f4f7fa}
.innovatie-scherm .scherm-balk{background:#e6edf4;border-bottom-color:#d6e0ea}
.innovatie-scherm .bouw{background:linear-gradient(rgba(0,46,84,.035) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(0,46,84,.035) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(180deg,#eef3f8,#f7fafc)}
.innovatie-scherm .staat{background:#f8fafc;border-left-color:#dfe6ee}
@media (max-width:640px){.innovatie-scherm{padding:4px}.innovatie-scherm .staat{border-top-color:#dfe6ee}}

/* v0.126 (Stefan 17-10, mobiel): geen onnodig grote gaten. Op een telefoon kleinere boven- en onderruimte per sectie,
   minder lucht onder de knoppen; de vinkjeslijst op de dienstpagina's links uitgelijnd onder elkaar met inspringing;
   het uitschuifmenu iets smaller (78 % i.p.v. 85 %). */
@media (max-width:640px){
  .sectie,.sectie.sectie-licht,.sectie.sectie-wit,.sectie.sectie-navy{padding-top:26px;padding-bottom:26px}
  .sectie+.sectie-wit.lead-blok,.lead-blok{padding:22px 0 4px}
  .balkfoto{padding:28px 0}.balkfoto-quote{padding:40px 0}.cta-band{padding:30px 0}
  main.pagina{padding-bottom:12px}
  .held-tekst{padding-top:56px;padding-bottom:24px}
  .usp-blok{padding:16px 0 4px!important}
  .usp-blok .usp-lijst{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:9px;padding-left:14px}
  .usp-blok .usp-lijst li{white-space:normal}
  .sectie-kop{margin-bottom:16px}
  .project-titel{padding-top:36px}
  .menu-mobiel{width:min(78vw,320px);padding-left:28px;padding-right:24px}
}
/* v0.127 (Stefan 17-10): winkelwagen en klantlogin ook in de mobiele kop van de site */
@media (max-width:1100px){.rechts .hbtn{display:inline-grid}.rechts{gap:2px}}
/* ---------- v0.133: 404-pagina — de cijfers 404 als Tube-Lock-steiger die zich opbouwt (tools/site-eigen.mjs, steiger404) ---------- */
.nf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;padding:56px 0 72px;min-height:min(62vh,640px)}
.nf-steiger{width:100%;height:auto;max-height:420px;overflow:visible}
.nf-grond{stroke:var(--steel);stroke-width:2}
.nf-buis line{stroke:#8E969E;stroke-width:11;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:nf-bouw .55s cubic-bezier(.3,.7,.3,1) both;animation-delay:calc(var(--i) * .16s + .2s)}
.nf-buis line.nf-glans{stroke:#C9CED3;stroke-width:3.5;transform:translate(-2px,-2px)}
.nf-kop{fill:#3a4550;animation:nf-pop .3s ease-out both;animation-delay:calc(var(--i) * .16s + .55s)}
.nf-slof{fill:#d9b27a}.nf-plaat{fill:#5f6a74}
.nf-voet{animation:nf-pop .3s ease-out both;animation-delay:calc(var(--i) * .16s)}
@keyframes nf-bouw{to{stroke-dashoffset:0}}
@keyframes nf-pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.nf-tekst h1{font-size:clamp(28px,3vw,40px);margin:0 0 14px}
.nf-tekst p{max-width:52ch}
/* drie even brede knoppen naast elkaar (huisregel .knoppen), ook op de telefoon: de labels zijn kort */
.nf .nf-knoppen{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:min(100%,420px);gap:10px;margin:22px 0 0}
.nf .nf-knoppen .knop{padding:12px 10px;white-space:nowrap}
@media (max-width:900px){
  .nf{grid-template-columns:minmax(0,1fr);gap:20px;padding:28px 0 48px;min-height:0;text-align:left}
  .nf-steiger{max-height:240px}
}
@media (prefers-reduced-motion:reduce){
  .nf-buis line{animation:none;stroke-dashoffset:0}
  .nf-kop,.nf-voet{animation:none}
}
/* v0.133–v0.142: de intro op de home (foto met badge Tube-Lock®) is in v0.157 opgegaan in het Tube-Lock-blok (.tube-blok) */

/* v0.133 (Stefan 17-10): mobiele kop strakker — iconen groter (26 px) en gelijk verdeeld op één lijn (elk 44 × 44 px), lager
   logo; bij scrollen wordt de kop nog wat lager (scripts/site.js zet .klein); bij aanraken veert een icoon kort in */
@media (max-width:1100px){
  .kop .in{padding-top:8px;padding-bottom:8px;min-height:64px;gap:6px;transition:min-height .25s ease,padding .25s ease}
  .kop .logo img{height:46px;transition:height .25s ease}
  .rechts{gap:6px}
  .rechts .hbtn,.rechts .taal{width:44px;height:44px;display:inline-grid;place-items:center;transition:transform .15s ease,color .15s}
  .rechts .hbtn svg,.rechts .hbtn .thiel-ui-icon{width:26px;height:26px}
  .rechts .taal img{width:26px;height:17px}
  .hbtn .cnt{top:3px;right:1px;min-width:17px;line-height:17px;font-size:10px;border-radius:9px;padding:0 4px}
  .hamb{width:44px;height:44px;padding:13px 9px;margin-left:0;transition:transform .15s ease}
  .rechts .hbtn:active,.rechts .taal:active,.hamb:active{transform:scale(.9)}
  .kop.klein .in{min-height:54px;padding-top:5px;padding-bottom:5px}
  .kop.klein .logo img{height:38px}
}
@media (max-width:1100px) and (prefers-reduced-motion:reduce){.kop .in,.kop .logo img,.rechts .hbtn,.rechts .taal,.hamb{transition:none}}
/* ---------- v0.135: subtiele beweging (Stefan 18-10: desktop 1, 3 en 5, mobiel 1, 2 en 4). Spelregels: 0,2–0,4 s, geen
   stuiteren, alleen navy en blauw, alles uit bij minder beweging. ---------- */
/* maatlijn onder sectiekoppen: tekent zich van links naar rechts als de kop in beeld komt (scripts/site.js zet .getekend) */
.sectie-kop h2::after{content:'';display:block;width:48px;height:3px;margin-top:10px;background:var(--blue);transform-origin:left center}
.sectie-kop.getekend h2::after{transition:transform .4s cubic-bezier(.2,.7,.3,1) .1s}   /* v0.143: alleen het intekenen animeert, nooit het verbergen bij het laden (de lijn tekende zich anders zichtbaar terug als .js laat kwam) */
.sectie-navy .sectie-kop h2::after{background:#94cfff}
.js .sectie-kop:not(.getekend) h2::after{transform:scaleX(0)}
/* menu-onderstreping: een lichtblauwe lijn schuift van links in onder het menu-item; het actieve item houdt hem */
.nav>ul>li>a{background:linear-gradient(#94cfff,#94cfff) no-repeat 0 100%/0 2px;transition:color .15s,background-size .25s ease}
.nav>ul>li>a:hover,.nav>ul>li>a:focus-visible,.nav>ul>li.actief>a,.nav>ul>li.heeft-sub:hover>a{background-size:100% 2px}
/* productkaarten: foto zoomt 3 % in, een blauwe onderrand schuift in en het pijltje van "Bekijk" schuift op */
.kaart.product{position:relative}
.kaart.product img{transition:box-shadow .2s,transform .2s,background-size .25s;background:#fff linear-gradient(var(--blue),var(--blue)) no-repeat 0 100%/0 3px}
.kaart.product .kaart-tekst .lees::after{display:inline-block;margin-left:.25em;content:"→";transition:transform .2s}
@media (hover:hover){
  .kaart.product:hover img{background-size:100% 3px;transform:translateY(-3px) scale(1.03)}
  .kaart.product:hover .lees::after{transform:translateX(3px)}
}
/* mobiel menu: items schuiven na elkaar in, de blauwe rand links groeit mee */
@keyframes menuItem{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes menuRand{from{background-size:3px 0}to{background-size:3px 100%}}
.menu-mobiel{border-left:0;padding-left:31px;background:var(--navy) linear-gradient(var(--blue),var(--blue)) no-repeat 0 0/3px 100%}
.menu-mobiel:not([hidden]){animation:menuRand .35s ease-out both}
.menu-mobiel:not([hidden]) .ocv-nav>li{animation:menuItem .28s ease-out both;animation-delay:calc(60ms + 30ms * var(--i,0))}
.ocv-nav>li:nth-child(2){--i:1}.ocv-nav>li:nth-child(3){--i:2}.ocv-nav>li:nth-child(4){--i:3}.ocv-nav>li:nth-child(5){--i:4}.ocv-nav>li:nth-child(6){--i:5}
.ocv-nav>li:nth-child(7){--i:6}.ocv-nav>li:nth-child(8){--i:7}.ocv-nav>li:nth-child(9){--i:8}.ocv-nav>li:nth-child(n+10){--i:9}
.ocv-nav.tweede>li{--i:9}.ocv-nav.tweede>li:nth-child(n+2){--i:10}
/* tikreactie op aanraakschermen: knoppen en kaarten worden heel even 2 % kleiner */
@media (hover:none){
  .knop,.knop-contact,.knop-voet,.kaart,.dienst-kaart,.project-kaart,.cat-kop{transition:transform .1s ease-out}
  .knop:active,.knop-contact:active,.knop-voet:active,.kaart:active,.dienst-kaart:active,.project-kaart:active,.cat-kop:active{transform:scale(.98)}
}
@media (prefers-reduced-motion:reduce){
  .sectie-kop h2::after,.sectie-kop.getekend h2::after,.nav>ul>li>a,.kaart.product img,.kaart.product .lees::after{transition:none}
  .js .sectie-kop:not(.getekend) h2::after{transform:none}
  .menu-mobiel:not([hidden]),.menu-mobiel:not([hidden]) .ocv-nav>li{animation:none}
  .knop:active,.knop-contact:active,.knop-voet:active,.kaart:active,.dienst-kaart:active,.project-kaart:active,.cat-kop:active{transform:none}
}
/* v0.138: bedieningsiconen uit het Thiel-iconenpakket (styles/iconen.css uit tools/iconen.mjs, scripts/iconen.js): maskers in de
   tekstkleur; kleur hier waar de oude svg 'fill' of 'stroke' gebruikte, en maten voor plekken die eerst een teken (→) hadden. */
.thiel-ui-icon{-webkit-print-color-adjust:exact;print-color-adjust:exact;forced-color-adjust:none}
.cat-pijl{color:var(--navy)}
.kaart-pin .thiel-ui-icon{color:var(--orange)}
.voet-contact-icoon .thiel-ui-icon{color:var(--navy)}
.usp-lijst .thiel-ui-icon{width:16px;height:16px}.usp-strook .thiel-ui-icon{width:18px;height:18px}.dienst-rij .usp-lijst .thiel-ui-icon{width:15px;height:15px}
.stappen .thiel-ui-icon{width:22px;height:22px}
.held-pauze .thiel-ui-icon{width:14px;height:14px}
.knop .thiel-ui-icon{width:18px;height:18px}
.pijl-link .thiel-ui-icon,.kaart-tekst .thiel-ui-icon,.project-titel .thiel-ui-icon,.cat-alle .thiel-ui-icon{width:16px;height:16px;margin-left:4px;vertical-align:-3px}
@media (prefers-reduced-motion:no-preference){.pijl-link .thiel-ui-icon,.kaart-tekst .thiel-ui-icon,.project-titel .thiel-ui-icon,.cat-alle .thiel-ui-icon{transition:transform .2s}}
.pijl-link:hover .thiel-ui-icon,a:hover>.kaart-tekst .thiel-ui-icon,a:hover .project-titel .thiel-ui-icon,.cat-alle a:hover .thiel-ui-icon{transform:translateX(4px)}
.contact-regels .ci{display:grid;place-items:center;color:var(--blue);flex:none}.contact-regels li:hover .ci{color:#fff}.contact-regels .ci .thiel-ui-icon{width:20px;height:20px}
/* v0.139 (Stefan 18-10): geen pijl achter "Lees verder"; pijlen alleen op knoppen naar de volgende stap */
.kaart.product .kaart-tekst .lees::after{content:none}
.usp-ico{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--lblue);color:var(--blue)}.usp-ico .thiel-ui-icon{width:22px;height:22px}
/* v0.141 (Stefan 18-10): het uitschuifmenu op telefoon en tablet 30 % smaller (was 78–80 % van de breedte, max. 320 px), met
   iets minder binnenruimte zodat "Steigercalculator" ook op 360 px op één regel past */
.menu-mobiel{width:clamp(196px,55vw,224px);padding-left:22px;padding-right:16px}
/* v0.141: het scherm met de animatie op de home opent de steigercalculator, op desktop en telefoon */
a.innovatie-scherm{display:block;color:var(--ink);text-decoration:none;cursor:pointer}
a.innovatie-scherm:focus-visible{outline:3px solid #94cfff;outline-offset:4px}
@media (hover:hover){a.innovatie-scherm:hover{border-color:rgba(148,207,255,.75);box-shadow:0 22px 52px rgba(0,10,25,.45)}}
/* v0.141 (Stefan 18-10): certificaten met de naam naast het logo en daaronder "Lees verder"; de omschrijving pas na uitklappen.
   Dicht zijn alle kaarten even hoog (het logo van EN74 met wat marge) */
.cert-kaart{display:block;padding:18px 22px}
.cert-kop{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:center;min-height:84px}
.cert-kop .cert-logo{height:84px;min-height:0;justify-content:center}
.cert-kop .cert-logo img{max-height:84px;max-width:96px}
.cert-kop h3{font-size:19px;margin:0}
.cert-kaart .uitklap{margin-top:8px}
.cert-kaart .uitklap p{color:var(--muted)}
@media (max-width:640px){.cert-kop{grid-template-columns:72px minmax(0,1fr);gap:14px;min-height:72px}.cert-kop .cert-logo{height:72px;justify-content:center}.cert-kop .cert-logo img{max-height:72px;max-width:72px}.cert-kop h3{font-size:18px}}
/* v0.141 (Stefan 18-10): op de telefoon voegt "Lees verder" bij de kwaliteitskaarten niets toe; scripts/site.js klapt ze open en
   de knop verdwijnt, zodat de hele tekst er meteen staat (zonder JavaScript blijft de knop werken) */
.usp-kaart .uitklap.altijd>summary{display:none}.usp-kaart .uitklap.altijd{margin-top:0}.usp-kaart .uitklap.altijd p{margin-top:10px}   /* v0.144: ook op grotere schermen als de tekst in de rij past */

/* ---------- v0.142 (Stefan 19-10): beweging zoals op feliro.nl — binnenkomst van de paginakop, glans op de hoofdknop,
   rustige pan over de kopfoto en zachte overgang tussen pagina's (View Transitions). Alles uit bij minder beweging. ---------- */
@keyframes entree-regel{from{transform:translateY(100%);clip-path:inset(-.1em -.1em 100% -.1em)}to{transform:none;clip-path:inset(-.1em -.1em -.3em -.1em)}}
@keyframes entree-op{from{opacity:0;transform:translateY(12px)}}
@keyframes entree-lijn{from{transform:scaleX(0)}}
@keyframes entree-glans{to{transform:translateX(120%)}}
@keyframes kop-pan{from{background-position:50% 40%}to{background-position:50% 60%}}
@keyframes vt-in-op{from{opacity:0;transform:translateY(18px)}}
@keyframes vt-weg{to{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .paginakop h1,.held-tekst h1{animation:entree-regel 720ms cubic-bezier(.2,.8,.2,1) 120ms backwards}
  .paginakop .kruimel,.held-tekst .kicker,.assort-intro .kicker{animation:entree-op 420ms cubic-bezier(.2,.8,.2,1) 40ms backwards}
  .paginakop .sub,.held-tekst p,.assort-intro .lead{animation:entree-op 600ms cubic-bezier(.2,.8,.2,1) 380ms backwards}
  .paginakop .knoppen,.held-tekst .knoppen,.assort-intro .knoppen{animation:entree-op 560ms cubic-bezier(.2,.8,.2,1) 500ms backwards}
  .paginakop h1::after{content:'';display:block;width:56px;height:3px;margin-top:12px;background:#94cfff;transform-origin:left;animation:entree-lijn 520ms cubic-bezier(.2,.8,.2,1) 640ms backwards}
  .paginakop:not(.geen-pan){background-size:cover;animation:kop-pan 24s ease-in-out infinite alternate}
  .knop:not(.knop-licht):not(.knop-omlijnd):not(.knop-wit){position:relative;overflow:hidden;isolation:isolate}
  .knop:not(.knop-licht):not(.knop-omlijnd):not(.knop-wit)::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%)}
  @media (hover:hover){.knop:not(.knop-licht):not(.knop-omlijnd):not(.knop-wit):hover::after{animation:entree-glans 700ms cubic-bezier(.2,.8,.2,1) both}}
  @view-transition{navigation:auto}
  .kop{view-transition-name:kop}
  ::view-transition-old(root){animation:vt-weg 180ms ease both}
  ::view-transition-new(root){animation:vt-in-op 420ms cubic-bezier(.2,.8,.2,1) 60ms both}
  ::view-transition-group(kop){animation-duration:0s}
}

/* v0.142 (Stefan 19-10): projecten — kopfoto met dezelfde Thiel-blauwe waas als de andere koppen (iets sterker, de foto is licht);
   introblok over de volle breedte van de inhoud, tekst niet meer vroeg afgebroken, compacter */
body.slug-projecten .paginakop::before,body.slug-projects .paginakop::before{background:linear-gradient(180deg,rgba(0,46,84,.55),rgba(0,46,84,.85))}
.projecten-kaart{max-width:1000px;padding:20px 28px 22px}
.projecten-kaart .lead-prosa,.projecten-kaart .prosa,.projecten-kaart p{max-width:none}
.projecten-kaart .lead-prosa p{margin:0 0 6px}
.projecten-kaart .knoppen{margin-top:10px}

/* ---------- v0.143 (Stefan 19-10): foto's die openschuiven; alles staat stil bij minder beweging ---------- */
/* foto's schuiven strak open van links naar rechts: een navy vlak over de foto schuift naar rechts weg (de foto zelf wordt niet
   afgeknipt, anders laadt een lui geladen foto niet); alleen wat bij het laden onder de vouw staat */
.wipe{position:relative;overflow:hidden}
.wipe::after{content:'';position:absolute;inset:0;z-index:3;background:var(--navy);transform-origin:right;transform:scaleX(0);transition:transform .95s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.wipe.wacht::after{transform:scaleX(1);transition:none}
@media (prefers-reduced-motion:reduce){.wipe::after{display:none}}
/* v0.143: meer reactie bij de muis (geen detailfoto's, dus geen beeldwissel): projectkaart met diepere waas, pijl schuift mee en een blauwe lijn groeit onder de titel; dienstkaart zoomt in met een blauwe onderrand */
@media (hover:hover) and (pointer:fine){
  .project-titel{z-index:2;transition:padding-bottom .3s}
  .project-titel::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,20,40,0),rgba(0,46,84,.55));opacity:0;transition:opacity .3s;z-index:-1}
  .project-titel::after{content:'';position:absolute;left:20px;right:20px;bottom:10px;height:3px;background:var(--blue,#0072ce);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .project-titel span{transition:transform .25s}
  .project-kaart:hover .project-titel{padding-bottom:24px}
  .project-kaart:hover .project-titel::before{opacity:1}
  .project-kaart:hover .project-titel::after{transform:scaleX(1)}
  .project-kaart:hover .project-titel span{transform:translateX(4px)}
  .project-kaart:hover img{transform:scale(1.06)}
  .dienst-kaart{position:relative}
  .dienst-kaart figure{overflow:hidden}
  .dienst-kaart img{transition:transform .5s}
  .dienst-kaart::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--blue,#0072ce);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .dienst-kaart:hover img{transform:scale(1.05)}
  .dienst-kaart:hover::after{transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){.project-titel::after,.dienst-kaart::after{display:none}.project-kaart:hover img,.dienst-kaart:hover img,.project-kaart:hover .project-titel span{transform:none}.project-kaart:hover .project-titel{padding-bottom:18px}}
/* v0.143 (Stefan 19-10): zoeken in de voet, naast de social kanalen; op de telefoon links, gelijk met het adres eronder.
   De suggesties openen naar boven (de voet staat onderaan) en lopen nooit buiten het scherm. */
.voet-zoek{position:relative;flex:0 1 280px;min-width:0;display:flex;align-items:center;margin:0}
.voet-zoek>.thiel-ui-icon{position:absolute;left:12px;width:16px;height:16px;color:#cfe0f0;pointer-events:none}
.voet-zoek input{width:100%;height:36px;padding:0 14px 0 36px;border:1px solid rgba(255,255,255,.35);border-radius:18px;background:rgba(255,255,255,.08);color:#fff;font:400 16px/1 'Open Sans',sans-serif;-webkit-appearance:none;appearance:none}
.voet-zoek input::placeholder{color:#b9cde0;opacity:1}
.voet-zoek input:focus{outline:none;border-color:#94cfff;background:rgba(255,255,255,.14)}
.voet-zoeklijst{position:absolute;left:0;bottom:calc(100% + 6px);z-index:20;width:min(360px,calc(100vw - 32px));margin:0;padding:6px 0;list-style:none;background:#fff;color:var(--ink,#262a2f);box-shadow:0 12px 32px rgba(0,20,40,.35);text-align:left}
.voet-zoeklijst a{display:flex;align-items:center;gap:14px;padding:6px 12px;color:inherit!important;text-decoration:none!important}
.voet-zoeklijst li[aria-selected=true] a,.voet-zoeklijst a:hover{background:#eaf3fc}
.voet-zoeklijst .vz-soort{flex:none;width:100px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5f6a74}
.voet-zoeklijst .vz-tekst{display:flex;flex-direction:column;min-width:0}
.voet-zoeklijst b{font-size:14px;font-weight:600;color:var(--navy,#002E54);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voet-zoeklijst small{font-size:12px;color:#5f6a74;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voet-zoeklijst .vz-kop{padding:4px 12px 2px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5f6a74}
.voet-zoeklijst .vz-shop{border-top:1px solid #e3e8ee;margin-top:4px;padding-top:4px}
.voet-zoeklijst .vz-shop b{color:var(--blue,#0072CE)}
.voet-zoeklijst mark{background:none;color:inherit;font-weight:700;text-decoration:underline;text-decoration-color:#94cfff;text-decoration-thickness:2px}
.voet-zoekgeen{padding:8px 12px;font-size:13px;color:#5f6a74}
@media (max-width:640px){.voet-merk{justify-content:flex-start;flex-wrap:nowrap;gap:12px}.voet-zoek{flex:1 1 auto}.voet-social{gap:8px;flex:none}.voet-zoeklijst .vz-soort{width:82px;font-size:10px}}
@media print{.voet-zoek{display:none}}
/* v0.143 (Stefan 19-10): de productfoto weer door het uitschuifmenu, in donkerblauw zoals vóór v0.133; het smallere formaat,
   de blauwe rand links en de rest van de opmaak blijven. De foto ligt achter de inhoud (isolation + z-index -1), naast de rand. */
.menu-mobiel,.ocv{isolation:isolate}
.menu-mobiel::before,.ocv::before{content:'';position:absolute;top:0;bottom:0;left:3px;right:0;z-index:-1;background:url(/assets/menu-achtergrond.webp) 25% center/cover no-repeat;mix-blend-mode:multiply;opacity:.5;pointer-events:none}
/* v0.145 (Stefan 19-10): voet op een groot scherm — de social kanalen met "Neem contact op" ernaast op één rij, daaronder het
   zoekveld over de hele breedte van die rij (duidelijk breder dan eerst); de voorspellingen zo breed als het zoekveld */
@media (min-width:981px){
  .voet-merk{display:grid;grid-template-columns:150px auto minmax(200px,260px);grid-template-areas:"logo soc knop" "logo zoek zoek";gap:14px 16px;align-items:center;justify-content:start}
  .voet-logo{grid-area:logo}
  .voet-social{grid-area:soc}
  .knop-voet{grid-area:knop;justify-content:center}
  .voet-zoek{grid-area:zoek;flex:none}
  /* v0.146 (Stefan 19-10): de voorspellingen breder dan het veld, zodat je meer van de omschrijving ziet */
  .voet-zoeklijst{width:max(100%,min(620px,calc(100vw - 48px)))}
}
/* v0.145 (Stefan 19-10): privacyverklaring en disclaimer — per hoofdstuk een kaart met een korte omschrijving en "Lees meer",
   een rustige inhoudsopgave opzij (geen knoppenlijst), afdrukknop bovenaan, kleinere letter, de hele breedte van de pagina.
   De tekst is die van Van Thiel (tools/site-juridisch.mjs). */
.juridisch{font-size:14px;padding:4px 0 44px}
.jur-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 20px}
.jur-kop h1{margin:0}
.jur-datum{margin:4px 0 0;color:var(--muted);font-size:13px}
.jur-print{background:var(--lblue);color:var(--navy);border:1px solid #9cc3e8;min-height:42px;padding:9px 16px;font-size:14px;flex:none}
.jur-print:hover,.jur-print:focus-visible{background:#fff;color:var(--navy)}
.jur-print .thiel-ui-icon{width:20px;height:20px}
.jur-rooster{display:grid;grid-template-columns:230px minmax(0,1fr);gap:36px;align-items:start}
.jur-inhoud{position:sticky;top:110px;font-size:13px;border-left:2px solid var(--line);padding:2px 0 2px 14px;max-height:calc(100vh - 140px);overflow:auto}
.jur-inhoud-kop{font:700 12px/1 var(--tekst);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px}
.jur-inhoud ol{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.jur-inhoud a{color:var(--ink);text-decoration:none;line-height:1.35;display:block}.jur-inhoud a:hover{color:var(--blue)}
.jur-inleiding{margin:0 0 16px}
.jur-kaarten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.jur-kaart{background:#fff;border:1px solid var(--line);border-top:3px solid var(--blue);padding:16px 20px 14px;scroll-margin-top:110px;min-width:0;overflow-wrap:anywhere}
.jur-kaart h2{font-size:18px;margin:0 0 8px}
.jur-kaart h3{font-size:15px;margin:14px 0 6px}
.jur-kaart p,.jur-kaart li{font-size:14px;line-height:1.6}
.jur-kaart p{margin:0 0 8px}
.jur-kaart ul,.jur-kaart ol{padding-left:18px;margin:0 0 8px}
.jur-kaart table{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0 10px}.jur-kaart td,.jur-kaart th{border-bottom:1px solid var(--line);padding:5px 6px;text-align:left;vertical-align:top}
.jur-meer summary{cursor:pointer;color:var(--blue);font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:6px;font-size:14px;min-height:32px}
.jur-meer summary::-webkit-details-marker{display:none}
.jur-meer summary::after{content:'+';font-size:17px;line-height:1}.jur-meer[open] summary::after{content:'–'}
.jur-meer .dicht,.jur-meer[open] .open{display:none}.jur-meer[open] .dicht{display:inline}
.jur-rest{padding-top:2px}
@media (max-width:1100px){.jur-kaarten{grid-template-columns:minmax(0,1fr)}}
@media (max-width:980px){.jur-rooster{grid-template-columns:minmax(0,1fr)}.jur-inhoud{display:none}}
@media (max-width:640px){.jur-kop{flex-direction:column;gap:10px}.jur-print{align-self:flex-start}.jur-kaart{padding:14px 16px 12px}}
@media print{
  body:has(.juridisch) :is(.kop,.voet,.cookie-plek,.kruimel,.paginakop){display:none!important}
  .juridisch{font-size:10pt;padding:0}.jur-print,.jur-inhoud,.jur-meer summary{display:none!important}
  .jur-rooster,.jur-kaarten{display:block}.jur-kaart{border:0;padding:0;margin:0 0 10pt;break-inside:auto}
  .jur-kaart h2{font-size:13pt;break-after:avoid}.jur-kaart p,.jur-kaart li{font-size:10pt}
}
.jur-onderwerpen{color:var(--muted)}
/* v0.146 (Stefan 19-10): over ons — de quote als smalle badge óp de foto, zoals de badge bij de intro op de home (geen blauwe balk
   meer onder de foto), zodat het blok onderaan gelijk eindigt met de foto */
.verhaal-foto figcaption{position:absolute;left:16px;bottom:16px;z-index:1;margin:0;width:max-content;max-width:calc(100% - 32px);box-sizing:border-box;background:var(--navy);padding:14px 20px 15px;border-left:4px solid var(--blue);box-shadow:0 8px 20px rgba(0,46,84,.25)}
.verhaal-foto figcaption .quote{font-size:20px;line-height:1.15;max-width:14ch}
@media (max-width:900px){.verhaal-foto{position:relative;top:auto}.verhaal-foto figcaption{left:12px;bottom:12px;max-width:calc(100% - 24px);padding:10px 14px 11px}.verhaal-foto figcaption .quote{font-size:17px}}
/* v0.149: eenvoudige pagina's (kop direct in de inhoud, zoals Algemene voorwaarden en Steigercalculator) niet tegen de menubalk */
main.pagina>.in>h1:first-child{margin-top:40px}
@media (max-width:640px){main.pagina>.in>h1:first-child{margin-top:24px}}

/* v0.149 (Stefan 19-10): mobiele voet — zoeken over de hele breedte; LinkedIn, Facebook, YouTube en mail (onderaan)
   gelijk verdeeld in een kolom rechts naast adres en contact, van de eerste tot de laatste regel; het adres lijnt uit met de tekst van de nieuwsbrief (32 px binnenruimte van het formulier). Zoekveld,
   voorspellingen en invoer in een kleinere letter (iOS zoomt niet in: maximum-scale=1 sinds v0.126). */
@media (max-width:640px){
  .voet .in.voet-rooster{--voet-in:calc(var(--rand) + 32px);--voet-halfregel:4px;grid-template-columns:minmax(0,1fr) 34px;column-gap:16px;row-gap:0;padding-left:var(--voet-in);padding-right:var(--voet-in)}
  .voet .voet-merk{display:contents}
  .voet .voet-zoek{grid-column:1/-1;grid-row:1;margin:0 0 18px}   /* over de hele breedte, rechts gelijk met de iconen */
  .voet .voet-social{grid-column:2;grid-row:2/span 2;align-self:stretch;flex-direction:column;justify-content:space-between;gap:4px;padding:var(--voet-halfregel) 0}
  .voet .voet-social a{width:34px;height:34px}   /* vier iconen gelijk verdeeld van de eerste tot de laatste regel tekst; mail onderaan */
  .voet .voet-merk+.voet-kolom{grid-column:1;grid-row:2}
  .voet .voet-kolom+.voet-kolom{grid-column:1;grid-row:3}
  .voet .voet-zoek>.thiel-ui-icon{z-index:1;left:11px;width:14px;height:14px}
  .voet .voet-zoek input[type=search]{font-size:13px!important;padding:0 12px 0 32px}
  .voet .voet-zoeklijst{width:calc(100vw - 2 * var(--voet-in))}
  .voet .voet-zoeklijst a{gap:10px;padding:5px 10px}
  .voet .voet-zoeklijst .vz-soort{width:76px;font-size:9.5px}
  .voet .voet-zoeklijst b{font-size:13px}
  .voet .voet-zoeklijst small{font-size:11px}
  .voet .voet-zoeklijst .vz-kop{padding:4px 10px 2px;font-size:10px}
  .voet .voet-zoekgeen{padding:7px 10px;font-size:12px}
}

/* v0.149 (Stefan 19-10): infopagina steigercalculator — bovenaan het bewegende blok van de home (niet onder een videokop, dus
   zonder de negatieve marge), daaronder uitleg en veelgestelde vragen naast elkaar over de volle breedte */
.slug-steigercalculator .innovatie,.slug-scaffold-calculator .innovatie{margin:0 0 40px}
.calc-h1{margin-top:0}
.inhoud.calc-inhoud{max-width:none}
.calc-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:start}
.calc-info .lead{margin-top:0}
.calc-faq>h2:first-child,.calc-uitleg>h2{margin-top:0}
.pagina-faq{margin:0 0 48px;max-width:900px}.pagina-faq>h2{margin-top:0}
.calc-uitleg>h2{margin-top:28px}
.calc-stappen{list-style:none;counter-reset:stap;margin:14px 0 18px;padding:0;display:grid;gap:12px}
.calc-stappen li{counter-increment:stap;position:relative;padding:14px 16px 14px 60px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);box-shadow:var(--schaduw)}
.calc-stappen li::before{content:counter(stap);position:absolute;left:16px;top:14px;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font:700 15px/30px 'Oswald',sans-serif;text-align:center}
@media (max-width:900px){.calc-info{grid-template-columns:minmax(0,1fr);gap:8px}.calc-faq>h2:first-child{margin-top:28px}}

/* v0.157 (Feddy 20-10, punt 1 en 2; benchmark docs/benchmark-landing-20261020.md): de home in hogere secties met één boodschap
   per sectie, in de volgorde video → calculator → shop → Tube-Lock → diensten → kwaliteit → projecten → CTA en nieuwsbrief.
   Sectiepadding 96 px op desktop (64 px tablet, 56 px telefoon); alleen op de home, de subpagina's houden hun compacte maat. */
.slug-home .sectie{padding:96px 0}
.slug-home .sectie.nieuwsbrief-blok{padding:72px 0}
.slug-home .cta-band{padding:72px 0}
.calc-blok .innovatie-rooster{padding-top:96px;padding-bottom:96px;gap:64px}
.calc-blok h2{font-size:clamp(32px,3.6vw,48px)}
.calc-blok .intro{font-size:17px;max-width:470px;margin-bottom:28px}
.calc-blok .knoppen{display:flex}
.calc-blok .knop{min-height:48px;padding:13px 22px;font-size:15.5px}
/* shop: kop links, knop rechts; acht tegels met de navy maattekening, de productfoto bij hover of focus */
.shop-blok-kop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 48px;align-items:end;margin:0 0 36px}
.shop-blok-kop h2{margin:0 0 12px}
.shop-blok-kop .lead{margin:0;max-width:62ch;color:var(--muted)}
.shop-blok-kop .knoppen{display:flex;align-items:center;gap:24px;margin:0}
.shoptegels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.shoptegel{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);transition:border-color .2s,box-shadow .2s,transform .2s}
.shoptegel-beeld{position:relative;display:block;aspect-ratio:3/2;background:#fff;border-bottom:1px solid var(--line);overflow:hidden}
.shoptegel-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:14px 18px;transition:opacity .2s,transform .2s}
.shoptegel-beeld::after{content:'';position:absolute;inset:0;background:#fff no-repeat center/contain;background-origin:content-box;padding:18px 22px;opacity:0;transition:opacity .2s}
.shoptegel-tekst{display:flex;flex-direction:column;gap:3px;padding:14px 16px 16px;border-left:3px solid transparent;transition:border-color .2s}
.shoptegel-tekst b{font:600 17px/1.25 var(--kop);color:var(--navy)}
.shoptegel-tekst span{font-size:13px;color:var(--muted);white-space:nowrap}
.shoptegel:hover,.shoptegel:focus-visible{border-color:var(--blue);box-shadow:var(--schaduw);transform:translateY(-2px);outline:none}
.shoptegel:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* v0.161: standaard de foto, bij hover of focus de maattekening */
.shoptegel:hover .shoptegel-beeld::after,.shoptegel:focus-visible .shoptegel-beeld::after{background-image:var(--tek);opacity:1}
.shoptegel:hover .foto,.shoptegel:focus-visible .foto{opacity:0;transform:scale(.97)}
.shoptegel:hover .shoptegel-tekst,.shoptegel:focus-visible .shoptegel-tekst{border-left-color:var(--navy)}
/* Tube-Lock: de intro en de Tube-Lock-balk samen, op de bestaande balkfoto; hoger dan de oude balk */
.tube-blok{padding:120px 0}
.tube-blok .balkfoto-tekst{max-width:580px;padding:36px 40px}
.tube-blok .knop{white-space:nowrap}
.tube-blok .kicker{color:#94cfff}
.tube-blok .knoppen{margin-top:24px}
@media (max-width:1100px){.calc-blok .innovatie-rooster{padding-top:64px;padding-bottom:64px;gap:36px}.slug-home .sectie{padding:64px 0}.tube-blok{padding:80px 0}}
@media (max-width:980px){.shoptegels{gap:14px}.shop-blok-kop{grid-template-columns:minmax(0,1fr);align-items:start}.shoptegel-beeld img{padding:10px 12px}}
@media (max-width:760px){.shoptegels{grid-template-columns:repeat(2,minmax(0,1fr))}.shoptegel-beeld{aspect-ratio:4/3}}
@media (max-width:640px){.slug-home .sectie,.slug-home .sectie.nieuwsbrief-blok{padding:56px 0}.slug-home .cta-band{padding:48px 0}.calc-blok .innovatie-rooster{padding-top:48px;padding-bottom:48px;gap:28px}.calc-blok .intro{font-size:16px}
  .shop-blok-kop{margin-bottom:24px}.shop-blok-kop .knoppen{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;justify-items:start}.shop-blok-kop .knoppen .knop{width:100%}
  .shoptegels{gap:12px}.shoptegel-beeld img{padding:8px 10px}.shoptegel-tekst{gap:2px;padding:10px 12px 12px}.shoptegel-tekst b{font-size:15px}.shoptegel-tekst span{font-size:12.5px}
  .tube-blok{padding:48px 0}.tube-blok .balkfoto-tekst{padding:22px 20px 24px}.tube-blok .knoppen{display:grid;grid-auto-flow:row;width:100%}.tube-blok .knop{white-space:normal}}
@media (prefers-reduced-motion:reduce){.shoptegel,.shoptegel-beeld img,.shoptegel-beeld::after,.shoptegel-tekst{transition:none}.shoptegel:hover,.shoptegel:focus-visible{transform:none}}
.sectie-navy .dienst-kaart .pijl-link{color:var(--blue)}   /* v0.157: lichtblauw op de witte kaart haalde 1,6:1; blauw op wit 4,9:1 */
/* v0.158 (Feddy 20-10, punt 5): productpagina met de maattekening uit de prijslijst naast de foto (navy lijnen op lichtgrijs,
   max. 520 px breed), de maat per uitvoering in de tabel; EAN en pallet klein onder het artikelnummer en de verpakking */
.productbeelden{display:grid;gap:12px;align-content:start}
.product-kop.met-tekening{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.met-tekening .productbeelden{grid-template-columns:repeat(2,minmax(0,1fr))}
.met-tekening .productfoto{height:100%;align-items:center}
.producttekening{margin:0;border:1px solid var(--line);background:#f4f7fa;padding:14px 16px 12px;max-width:520px;display:flex;flex-direction:column;justify-content:center}
.producttekening img{display:block;width:100%;height:auto;max-height:240px;object-fit:contain}
.producttekening figcaption{margin-top:8px;font:600 13.5px/1.3 var(--tekst);color:var(--navy);font-variant-numeric:tabular-nums}
table.spec small.ean,table.spec small.pallet{display:block;font-size:12px;font-weight:400;color:var(--muted);white-space:nowrap}
@media (max-width:860px){.product-kop.met-tekening{grid-template-columns:1fr}}
@media (max-width:520px){.met-tekening .productbeelden{gap:8px}.producttekening{padding:10px}.met-tekening .productfoto img{max-height:180px}}
/* v0.158: stickers bij de uitvoeringen (zelfde vorm als in de shop) */
table.spec .sticker{display:block;width:max-content;margin-top:4px;font:600 11px/1.2 var(--tekst);padding:3px 7px;white-space:nowrap}
table.spec .sticker.voorraad{background:var(--navy);color:#fff}
table.spec .sticker.uitloop{background:#fff;color:#8a4310;border:1px solid #c9621a}
/* ---------- v0.168 (Stefan 21-10, desktop; gebouwd als v0.166) ---------- */
/* 1. logo: de vector uit het brandbook (assets/logo, uit de .ai-bron); op desktop iets groter, zodat "Connecting tubes" leesbaar blijft */
@media (min-width:1101px){.kop .logo img{height:62px}.kop .in{padding-top:8px;padding-bottom:8px}}
/* 2. calculatorblok: minder lucht boven en onder, zodat het op een laptopscherm (± 1270 × 1020) onder de video in beeld past */
@media (min-width:1101px){.held-video{min-height:min(52vh,500px)}.calc-blok .innovatie-rooster{padding-top:36px;padding-bottom:32px}}
/* 3. beloftes: groter, met een vinkje in een rondje dat om de beurt oranje oplicht (2 s per belofte, rustig genoeg om te lezen) */
.usp-strook ul{padding-top:18px;padding-bottom:18px}
.usp-strook li{position:relative;gap:14px;font-size:15.5px}
.usp-strook li::before{content:'';position:absolute;left:-7px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--line)}
.usp-strook li .thiel-ui-icon{position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){
  .usp-strook li::before{animation:usp-gloei 10s ease-in-out infinite}
  .usp-strook li .thiel-ui-icon{animation:usp-vink 10s ease-in-out infinite}
  .usp-strook li:nth-child(2)::before,.usp-strook li:nth-child(2) .thiel-ui-icon{animation-delay:2s}
  .usp-strook li:nth-child(3)::before,.usp-strook li:nth-child(3) .thiel-ui-icon{animation-delay:4s}
  .usp-strook li:nth-child(4)::before,.usp-strook li:nth-child(4) .thiel-ui-icon{animation-delay:6s}
  .usp-strook li:nth-child(5)::before,.usp-strook li:nth-child(5) .thiel-ui-icon{animation-delay:8s}
}
@keyframes usp-gloei{0%,20%,100%{background:#fff;box-shadow:0 0 0 1px var(--line);transform:scale(1)}5%,15%{background:var(--orange);box-shadow:0 0 0 6px rgba(232,119,34,.2);transform:scale(1.1)}}
@keyframes usp-vink{0%,20%,100%{color:var(--blue)}5%,15%{color:#fff}}
@media (max-width:640px){.usp-strook li{gap:12px;padding-left:4px}.usp-strook li::before{width:26px;height:26px;margin-top:-13px;left:-3px}}
/* 4. shopintro: zelfde donkergrijs als de andere teksten, twee regels op desktop */
.shop-blok-kop .lead{color:var(--ink);max-width:92ch}
/* 6. ladder: de foto is een close-up; kleiner in de tegel zodat de ladder vrij staat */
.shoptegel--toegang .shoptegel-beeld img{padding:20px 64px 10px}
@media (max-width:640px){.shoptegel--toegang .shoptegel-beeld img{padding:10px 30px 6px}}
/* 7. "Onze services" op de home: de introzin in één regel op desktop (geen losse woorden op de volgende regel) */
@media (min-width:1101px){.diensten .sectie-intro{max-width:none}.diensten .sectie-intro p{max-width:none;text-wrap:nowrap}}
/* 9. uitklapmenu: Thiel-blauw met een puntje naar het menu-item, witte tekst, een oranje streepje bij aanwijzen */
.nav .sub{background:var(--blue);border-top:0;top:calc(100% + 12px);padding:10px 0;box-shadow:0 18px 40px rgba(0,30,60,.32)}
.nav .sub::after{content:'';position:absolute;left:30px;top:-8px;border:8px solid transparent;border-top:0;border-bottom-color:var(--blue)}
.nav .sub::before{top:-16px;height:16px}
.nav .sub a{position:relative;color:#fff;font-weight:600;padding:11px 24px;transition:background .15s,padding .15s}
.nav .sub a::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;background:var(--orange);transform:scaleY(0);transition:transform .18s}
.nav .sub a:hover,.nav .sub a:focus-visible{background:var(--blue7);color:#fff;padding-left:28px;outline:none}
.nav .sub a:hover::before,.nav .sub a:focus-visible::before{transform:scaleY(1)}
@media (prefers-reduced-motion:reduce){.nav .sub a,.nav .sub a::before{transition:none}}
/* ---------- v0.169 (Stefan 21-10): beweging in elke paginakop met foto, projectpagina's met beeld en galerij ---------- */
/* paginakop: de foto als eigen laag die heel langzaam inzoomt (zoals bij Over ons en Projecten), op elke pagina met een kopfoto */
.paginakop{overflow:hidden;isolation:isolate}
@media (min-width:641px) and (prefers-reduced-motion:no-preference){
  .paginakop{background-image:none}
  .paginakop::after{content:'';position:absolute;inset:0;z-index:-1;background:var(--foto) center 45%/cover no-repeat;transform-origin:50% 55%;animation:kenburns 30s ease-in-out infinite alternate}
}
/* projectpagina: hogere kopfoto (zoals het overzicht), tekst met projectgegevens ernaast */
@media (min-width:641px){body.project .paginakop{min-height:420px}}
.project-blok{padding-top:56px;padding-bottom:56px}
.project-rooster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:56px;align-items:start}
.project-tekst{max-width:72ch}
.project-tekst .project-lead{font:500 clamp(18px,1.5vw,20px)/1.55 var(--tekst);color:var(--navy);margin-bottom:18px}
.project-feiten{position:sticky;top:104px;background:var(--lblue);border-top:4px solid var(--blue);padding:24px 26px 26px;box-shadow:var(--schaduw)}
.project-feiten .kicker{margin:0 0 14px}
.project-feiten dl{margin:0 0 20px;display:grid;gap:14px}
.project-feiten dt{font:600 12.5px/1.2 var(--tekst);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.project-feiten dd{margin:0;font:600 16px/1.4 var(--tekst);color:var(--navy)}
.project-feiten .chips{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.project-feiten .chips li{font:600 13px/1 var(--tekst);color:var(--navy);background:#fff;border:1px solid var(--line);padding:7px 10px}
.project-feiten .knoppen{display:grid;grid-auto-flow:row;gap:10px;margin:0;width:100%}
.project-feiten .knoppen .knop{width:100%;justify-content:center;text-align:center}
/* diashow 2.0: bühne met scroll-snap (vegen), pijlen in Thiel-blauw, teller en een oranje voortgangsbalk, miniaturen eronder */
.project-galerij-blok .sectie-kop{align-items:baseline}.project-galerij-blok h2{margin:0}
.dia-aantal{font:600 14px/1 var(--tekst);color:var(--muted)}
.diashow{margin-top:22px}
.dia-buhne{position:relative;background:var(--navy);box-shadow:0 24px 60px rgba(0,30,60,.25)}
.dia-baan{list-style:none;margin:0;padding:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;aspect-ratio:16/9;max-height:74vh;outline:none}
.dia-baan::-webkit-scrollbar{display:none}
.dia-baan:focus-visible{box-shadow:inset 0 0 0 3px var(--orange)}
.dia{flex:0 0 100%;scroll-snap-align:center;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#0b1c2e}
.dia::before{content:'';position:absolute;inset:-30px;background:var(--dia) center/cover no-repeat;filter:blur(26px) brightness(.5) saturate(1.1)}
.dia a{position:relative;display:block;width:100%;height:100%;cursor:zoom-in}
.dia img{width:100%;height:100%;object-fit:contain;display:block;transform:scale(1.015);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.dia.actief img{transform:none}
.dia-pijl{position:absolute;top:50%;z-index:2;width:52px;height:52px;margin-top:-26px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--navy);box-shadow:0 6px 20px rgba(0,0,0,.25);cursor:pointer;display:flex;align-items:center;justify-content:center;font:600 26px/1 var(--tekst);transition:background .2s,color .2s,transform .2s,opacity .2s}
.dia-pijl:hover,.dia-pijl:focus-visible{background:var(--blue);color:#fff;transform:scale(1.06);outline:none}
.dia-pijl[disabled]{opacity:.35;cursor:default;transform:none;background:rgba(255,255,255,.92);color:var(--navy)}
.dia-vorige{left:18px}.dia-volgende{right:18px}
.dia-balk{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:16px;padding:14px 18px;background:linear-gradient(180deg,rgba(0,20,40,0),rgba(0,20,40,.7));color:#fff;pointer-events:none}
.dia-teller{font:600 14px/1 var(--tekst);letter-spacing:.04em;background:rgba(0,46,84,.8);padding:7px 10px}
.dia-voortgang{flex:1;height:3px;background:rgba(255,255,255,.25);overflow:hidden}
.dia-voortgang span{display:block;height:100%;width:0;background:var(--orange);transition:width .4s cubic-bezier(.2,.8,.2,1)}
.dia-duimen{list-style:none;margin:14px 0 0;padding:0 0 4px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity}
.dia-duimen li{flex:0 0 auto;scroll-snap-align:start}
.dia-duimen a{display:block;width:120px;height:80px;overflow:hidden;opacity:.6;outline:2px solid transparent;outline-offset:2px;transition:opacity .2s,outline-color .2s}
.dia-duimen img{width:100%;height:100%;object-fit:cover;display:block}
.dia-duimen a:hover,.dia-duimen a:focus-visible{opacity:1;outline-color:var(--blue)}
.dia-duimen a[aria-current="true"]{opacity:1;outline-color:var(--orange)}
@media (max-width:640px){.dia-baan{aspect-ratio:4/3}.dia-pijl{width:44px;height:44px;margin-top:-22px;font-size:22px}.dia-vorige{left:8px}.dia-volgende{right:8px}.dia-duimen a{width:88px;height:60px}}
@media (prefers-reduced-motion:reduce){.dia-baan{scroll-behavior:auto}.dia img,.dia-voortgang span,.dia-pijl{transition:none}.dia img{transform:none}}
/* meer projecten: drie kaarten */
.project-raster.drie{grid-template-columns:repeat(3,minmax(0,1fr))}
/* projectkaarten: iets meer beweging bij aanwijzen (zoom en het "Bekijk project" schuift op) */
.project-kaart img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.project-kaart:hover img,.project-kaart:focus-visible img{transform:scale(1.07)}
.project-titel span{transition:transform .3s}
.project-kaart:hover .project-titel span{transform:translateX(4px)}
/* lichtbak (scripts/site.js) */
.lichtbak{border:0;padding:0;margin:auto;max-width:min(1200px,94vw);max-height:92vh;background:transparent;overflow:visible}
.lichtbak::backdrop{background:rgba(0,20,40,.88)}
.lichtbak img{display:block;max-width:min(1200px,94vw);max-height:84vh;width:auto;height:auto;margin:0 auto;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lichtbak .lb-balk{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;color:#fff;font:600 14px/1 var(--tekst)}
.lichtbak button{min-width:44px;min-height:44px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35);cursor:pointer;font:600 18px/1 var(--tekst)}
.lichtbak button:hover,.lichtbak button:focus-visible{background:var(--blue);outline:none}
@media (prefers-reduced-motion:no-preference){.lichtbak[open] img{animation:lb-in .35s cubic-bezier(.2,.8,.2,1)}}
@keyframes lb-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media (max-width:980px){.project-rooster{grid-template-columns:minmax(0,1fr);gap:28px}.project-feiten{position:static}.project-raster.drie{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.project-blok{padding-top:28px;padding-bottom:28px}.project-raster.drie{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.project-kaart img,.project-titel span{transition:none}.project-kaart:hover img{transform:none}}
/* ---------- v0.169, tweede ronde (Stefan 21-10): korte omschrijving bovenaan, het hele verhaal uitklapbaar, feiten naast elkaar ---------- */
.project-tekst>p:not(.kicker),.project-tekst>p.project-lead{font:400 16.5px/1.75 var(--tekst);color:var(--ink);margin:0 0 14px;max-width:68ch}   /* 6-8 zinnen in twee alinea's: gewone leesmaat */
.project-tekst>p.project-lead{font-weight:500;color:var(--navy)}
.project-meer{border-top:1px solid var(--line);margin-top:6px}
.project-meer summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 15px/1 var(--tekst);color:var(--blue)}
.project-meer summary::-webkit-details-marker{display:none}
.project-meer summary::after{content:'+';display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1.5px solid currentColor;border-radius:50%;font-size:15px;transition:transform .25s}
.project-meer[open] summary::after{transform:rotate(45deg)}
.project-meer summary:hover,.project-meer summary:focus-visible{color:var(--navy);outline:none}
.project-meer .prosa{padding:6px 0 4px;max-width:72ch}
@media (prefers-reduced-motion:no-preference){.project-meer[open] .prosa{animation:entree-op .4s cubic-bezier(.2,.8,.2,1)}}
.project-feiten dl{gap:10px}
.project-feiten dl>div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;align-items:baseline}
.project-feiten dt{margin:0}
.project-feiten dd{font-size:15px}
/* ---------- v0.170 (Stefan 21-10): de foto's als hoofdzaak — één projectbühne met de diashow en een smal tekstkader ---------- */
.project-blok{padding-top:40px;padding-bottom:56px}
@media (min-width:641px){body.project .paginakop{min-height:300px}}
.project-stage{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:0;align-items:stretch;background:#fff;box-shadow:0 24px 60px rgba(0,30,60,.16)}
.project-stage.zonder-fotos{grid-template-columns:minmax(0,1fr)}
.stage-fotos{min-width:0;background:var(--navy)}
.stage-fotos .diashow{margin:0}
.stage-fotos .dia-buhne{box-shadow:none}
.stage-fotos .dia-baan{aspect-ratio:4/3;max-height:78vh}
.stage-fotos .dia-duimen{margin:0;padding:10px 12px 12px;background:var(--navy)}
.stage-fotos .dia-duimen a{opacity:.55;width:96px;height:64px}
.stage-enkel{margin:0;height:100%}
.stage-enkel a{display:block;height:100%;cursor:zoom-in}
.stage-enkel img{width:100%;height:100%;min-height:420px;object-fit:cover;display:block}
.stage-tekst{display:flex;flex-direction:column;gap:16px;padding:26px 26px 24px;border-top:4px solid var(--blue);max-height:calc(78vh + 86px);overflow:auto}
.stage-tekst .kicker{margin:0 0 -8px}
.stage-tekst .stage-titel{margin:0;font-size:clamp(28px,2.7vw,38px);line-height:1.08;color:var(--navy);overflow-wrap:anywhere}
.stage-omschrijving p{font:400 15px/1.7 var(--tekst);color:var(--ink);margin:0 0 10px}
.stage-omschrijving p.project-lead{font-weight:500;color:var(--navy)}
.stage-omschrijving .project-meer{margin-top:4px}
.stage-omschrijving .project-meer .prosa{font-size:14.5px}
.stage-feiten{margin:0;display:grid;gap:8px;padding:14px 0 0;border-top:1px solid var(--line)}
.stage-feiten>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:baseline}
.stage-feiten dt{font:600 11.5px/1.3 var(--tekst);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0}
.stage-feiten dd{margin:0;font:600 14.5px/1.4 var(--tekst);color:var(--navy)}
.stage-feiten .chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.stage-feiten .chips li{font:600 12.5px/1 var(--tekst);color:var(--navy);background:var(--lblue);border:1px solid var(--line);padding:6px 9px}
.stage-tekst .knoppen{display:grid;grid-auto-flow:row;gap:10px;margin:auto 0 0;width:100%}
.stage-tekst .knoppen .knop{width:100%;justify-content:center;text-align:center}
@media (max-width:1100px){.project-stage{grid-template-columns:minmax(0,1fr)}.stage-tekst{max-height:none;overflow:visible}}
@media (max-width:640px){.project-blok{padding-top:16px;padding-bottom:28px}.stage-fotos .dia-baan{aspect-ratio:4/3}.stage-tekst{padding:20px 18px}.stage-enkel img{min-height:0}}
@media (min-width:1101px){
  .project-stage{height:clamp(560px,calc(100vh - 150px),760px)}
  .stage-tekst{max-height:none;overflow:auto;overscroll-behavior:contain}
  .stage-fotos{display:flex;flex-direction:column;min-height:0}
  .stage-fotos .diashow{flex:1;display:flex;flex-direction:column;min-height:0}
  .stage-fotos .dia-buhne{flex:1;display:flex;flex-direction:column;min-height:0}
  .stage-fotos .dia-baan{flex:1;aspect-ratio:auto;min-height:0;max-height:none}
  .stage-fotos .dia{height:100%}
  .stage-fotos .dia-duimen{flex:none}
}
@media (min-width:1101px){.stage-tekst .knoppen{position:sticky;bottom:-24px;margin:auto -26px -24px;padding:14px 26px 18px;width:auto;background:linear-gradient(180deg,rgba(255,255,255,.85),#fff 30%);border-top:1px solid var(--line)}}
/* v0.170: Engelse pagina van een project dat (nog) alleen in het Nederlands is aangeleverd */
.stage-omschrijving .project-voorlopig,.project-voorlopig{margin:0 0 14px;padding:8px 12px;border-left:3px solid var(--blue);background:#f4f8fb;font-size:14px;color:var(--navy)}

/* ---------- v0.172 (Stefan 22-10): kwaliteitsketen licht stap voor stap op; leesbare tekst; ronde knop in de voet ---------- */
.keten li span:last-child{color:var(--ink);max-width:32ch;line-height:1.5;text-wrap:balance}
.keten li span.keten-zin{max-width:22ch}   /* zonder komma: gebalanceerd over twee regels */
@media (min-width:1101px){.keten{gap:4px}.keten li{padding:0 2px}}
@media (min-width:981px){.keten li span:last-child{margin:0 auto}}
@media (prefers-reduced-motion:no-preference){
  .keten-nr{animation:keten-licht 10s ease-in-out infinite}
  .keten li b{animation:keten-kop 10s ease-in-out infinite}
  .keten li:nth-child(2) .keten-nr,.keten li:nth-child(2) b{animation-delay:2s}
  .keten li:nth-child(3) .keten-nr,.keten li:nth-child(3) b{animation-delay:4s}
  .keten li:nth-child(4) .keten-nr,.keten li:nth-child(4) b{animation-delay:6s}
  .keten li:nth-child(5) .keten-nr,.keten li:nth-child(5) b{animation-delay:8s}
}
@keyframes keten-licht{0%,20%,100%{background:var(--blue);box-shadow:0 0 0 6px var(--keten-ring,#fff);transform:scale(1)}6%,14%{background:var(--orange);box-shadow:0 0 0 6px var(--keten-ring,#fff),0 0 0 12px rgba(232,119,34,.22);transform:scale(1.08)}}
@keyframes keten-kop{0%,20%,100%{color:var(--navy)}6%,14%{color:var(--blue)}}
.knop-voet{border-radius:999px;padding:0 22px}
/* paginakoppen (Stefan 22-10: "mag iets meer/sneller"): de foto zoomt en schuift duidelijker, in 16 s heen en terug */
@media (min-width:641px) and (prefers-reduced-motion:no-preference){
  .paginakop::after,body.slug-projecten .paginakop::after,body.slug-projects .paginakop::after,body.slug-services .paginakop::after{animation:kop-beweeg 16s ease-in-out infinite alternate}
}
@keyframes kop-beweeg{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-2%,-1.5%,0)}}
/* ---------- v0.175 (Stefan 22-10): interactieve 3D-steiger onderaan de assortimentspagina (scripts/steiger-tour.js) ---------- */
.steiger-tour{margin:56px 0 8px}
.tour-kop{max-width:760px;margin:0 0 20px}
.tour-kop h2{margin:4px 0 8px;font-size:clamp(26px,2.6vw,34px)}
.tour-kop .lead{color:var(--ink)}
.tour-buhne{display:grid;grid-template-columns:minmax(0,1fr) 300px;background:#fff;box-shadow:0 24px 60px rgba(0,30,60,.12);border-top:4px solid var(--blue)}
.tour-links{position:relative;min-width:0}
.tour-model{position:relative;min-width:0;height:clamp(460px,64vh,640px);background:#f6f8fa;overflow:hidden}
.tour-doek{position:absolute;inset:0}
.tour-doek canvas{display:block;cursor:grab}.tour-doek canvas:active{cursor:grabbing}
.tour-laden{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--muted);font-size:14px}
.tour-labels{position:absolute;inset:0;pointer-events:none}
.tour-label{position:absolute;left:0;top:0;display:flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 0;margin:-13px 0 0 -6px;border:0;background:none;cursor:pointer;pointer-events:auto;font:600 12.5px/1 var(--tekst);color:var(--navy);white-space:nowrap;will-change:transform}
.tour-label i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgba(255,255,255,.95),0 2px 6px rgba(0,30,60,.35)}
.tour-label span{background:rgba(255,255,255,.94);border:1px solid var(--line);padding:5px 9px;box-shadow:0 4px 12px rgba(0,30,60,.12);transition:background .15s,color .15s}
.tour-label b{display:none}
.tour-label--links{flex-direction:row-reverse;padding:0 0 0 10px;margin-left:6px}
.tour-label--links span{order:0}
.tour-label--punt span{display:none}
.tour-label:hover span,.tour-label--hover span,.tour-label--actief span{background:var(--navy);border-color:var(--navy);color:#fff}
.tour-label:hover i,.tour-label--hover i,.tour-label--actief i{background:var(--orange)}
.tour-label--actief{z-index:2}.tour-label--actief span{display:inline}
/* telefoon en smal: een genummerd punt in plaats van de naam */
.tour-klein .tour-label{margin:-12px 0 0 -12px;padding:0}
.tour-klein .tour-label i{display:none}
.tour-klein .tour-label span{display:none}
.tour-klein .tour-label b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;font:700 12px/1 var(--tekst);box-shadow:0 0 0 3px rgba(255,255,255,.95),0 2px 6px rgba(0,30,60,.35)}
.tour-klein .tour-label--actief b,.tour-klein .tour-label--hover b{background:var(--orange)}
.tour-hint{position:absolute;left:12px;bottom:10px;margin:0;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.86);font-size:12px;color:var(--muted);pointer-events:none}   /* v0.197: lichte achtergrond, de langere hint loopt anders over het model */
.tour-reset{position:absolute;right:12px;top:12px;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--navy);font:600 13px/1 var(--tekst);cursor:pointer}
.tour-reset:hover{border-color:var(--navy)}
.tour-kaart{position:absolute;left:16px;bottom:40px;width:min(340px,calc(100% - 32px));background:#fff;border-left:4px solid var(--orange);box-shadow:0 18px 40px rgba(0,30,60,.2);padding:16px 40px 16px 18px}
.tour-kaart h3{margin:0 0 6px;font-size:20px;color:var(--navy)}
.tour-kaart p{margin:0 0 10px;font-size:14px;line-height:1.55;color:var(--ink)}
.tour-kaart .tour-kaart-nr{display:none}
.tour-sluit{position:absolute;right:6px;top:6px;width:32px;height:32px;border:0;background:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer}
.tour-lijst{border-left:1px solid var(--line);padding:18px 18px 20px;overflow:auto;max-height:clamp(460px,64vh,640px)}
.tour-lijst h3{margin:14px 0 6px;font:600 11.5px/1.3 var(--tekst);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.tour-lijst h3:first-child{margin-top:0}
.tour-lijst h3 small{font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);font-size:12px}
.tour-groep{list-style:none;margin:0;padding:0}
.tour-item{display:flex;align-items:center;gap:10px;min-height:36px;padding:4px 8px;margin:0 -8px;color:var(--navy);text-decoration:none;font-size:14.5px;font-weight:600;transition:background .15s}
.tour-item:hover,.tour-item--hover{background:var(--lblue)}
.tour-item--actief{background:var(--navy);color:#fff}
.tour-nr{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;font:700 11px/1 var(--tekst)}
.tour-item--actief .tour-nr{background:var(--orange)}
.tour-meer .tour-item{font-weight:500;color:var(--ink)}
.tour-meer .tour-item::after{content:'→';margin-left:auto;color:var(--blue)}
/* geen WebGL of geen script: alleen de lijst, over de volle breedte */
.tour-geen3d .tour-buhne{grid-template-columns:minmax(0,1fr)}.tour-geen3d .tour-model{display:none}.tour-geen3d .tour-lijst{border-left:0;max-height:none;columns:2}
@media (max-width:1100px){
  .tour-buhne{grid-template-columns:minmax(0,1fr)}
  .tour-lijst{border-left:0;border-top:1px solid var(--line);max-height:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
  .tour-lijst h3{grid-column:1/-1}
  .tour-groep{display:contents}
}
@media (max-width:640px){
  .steiger-tour{margin-top:36px}
  .tour-model{height:380px}
  .tour-hint{display:none}
  .tour-kaart{position:relative;left:auto;bottom:auto;width:auto;margin:0;box-shadow:none;border-top:1px solid var(--line)}
  .tour-lijst{grid-template-columns:minmax(0,1fr);padding:14px 16px 16px}
  .tour-item{min-height:44px}
}
@media (prefers-reduced-motion:reduce){.tour-label span,.tour-item{transition:none}}
/* de lijst staat in .inhoud: daar is een losse link in een lijst een blauwe knop; hier een rustige regel */
.inhoud .steiger-tour .tour-groep li>a.tour-item{display:flex;background:none;color:var(--navy);font:600 14.5px/1.3 var(--tekst);padding:4px 8px;border:0;box-shadow:none}
.inhoud .steiger-tour .tour-groep li>a.tour-item:hover,.inhoud .steiger-tour .tour-groep li>a.tour-item--hover{background:var(--lblue)}
.inhoud .steiger-tour .tour-groep li>a.tour-item--actief{background:var(--navy);color:#fff}
.inhoud .steiger-tour .tour-meer li>a.tour-item{font-weight:500;color:var(--ink)}
.inhoud .steiger-tour .tour-groep li{margin:0;padding:0}
.inhoud .steiger-tour .tour-groep li::before,.inhoud .steiger-tour .tour-groep li::marker{content:none}
.steiger-tour .tour-kaart h3{margin:0 0 6px;font:600 22px/1.15 var(--kop);letter-spacing:0;text-transform:none;color:var(--navy)}
.tour-label--punt:hover span{display:inline}
.tour-links:has(.tour-kaart:not([hidden])) .tour-hint{display:none}
.inhoud .steiger-tour ul.tour-groep{display:block;list-style:none;padding:0;margin:0}
body.overzicht .inhoud .steiger-tour .tour-kaart h3{margin:0 0 6px;font:600 22px/1.15 var(--kop);letter-spacing:0;text-transform:none;color:var(--navy)}
body.overzicht .inhoud .steiger-tour .tour-lijst h3{margin:14px 0 6px;font:600 11.5px/1.3 var(--tekst)}
body.overzicht .inhoud .steiger-tour .tour-lijst h3:first-child{margin-top:0}
.inhoud .steiger-tour .tour-groep li>a.tour-item.tour-item--actief{background:var(--navy);color:#fff}
@media (max-width:1100px){.inhoud .steiger-tour ul.tour-groep{display:contents}}
/* v0.175: de kaart toont ook de uitvoeringen (artikelnr., uitvoering, maat, gewicht) met een kleine productfoto */
.tour-kaart{width:min(440px,calc(100% - 32px));max-height:calc(100% - 64px);overflow:auto}
.tour-var{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 12px;align-items:center;margin:2px 0 12px}
.tour-var img{width:56px;height:56px;object-fit:contain;background:#f6f8fa;grid-row:1}
.steiger-tour .tour-kaart .tour-var-kop{margin:0;font-size:13px;font-weight:600;color:var(--navy);line-height:1.35}
.tour-var-tabel{grid-column:1/-1;max-height:184px;overflow:auto;border:1px solid var(--line)}
.tour-var table{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.tour-var th{position:sticky;top:0;background:var(--lblue);color:var(--navy);font-weight:600;text-align:left;padding:5px 8px;white-space:nowrap}
.tour-var td{padding:5px 8px;border-top:1px solid var(--line);color:var(--ink);white-space:nowrap}
.tour-var td:first-child{font-weight:600;color:var(--navy)}
.tour-var td:last-child,.tour-var th:last-child{text-align:right}
@media (min-width:641px){.tour-links .tour-kaart{top:16px;bottom:auto}}
@media (max-width:640px){.tour-kaart{max-height:none;width:auto}.tour-var-tabel{max-height:none}}
.inhoud .steiger-tour .tour-groep li>a.tour-item{text-decoration:none}
.tour-var-tabel{max-height:232px;overflow-x:auto}
@media (max-width:640px){.tour-var table{font-size:12px}.tour-var td,.tour-var th{padding:5px 7px}}
.tour-label{z-index:1}.tour-label--punt{z-index:0}.tour-label--punt:hover,.tour-label--actief{z-index:3}
.tour-label{margin:0;padding:0}.tour-label--links{margin:0;padding:0}
.tour-klein .tour-label{margin:0}
.tour-kaart{z-index:5}
@media (min-width:641px){.tour-links .tour-kaart--rechts{left:auto;right:16px;top:64px}}
/* v0.177 (Stefan 22-10, toestelcheck iPhone 14–16 Pro Max, Galaxy S24/A55, Pixel 8, Fold): op een aanraakscherm elk tikdoel
   minstens 44 px. Lettergrootte van de velden blijft zoals hij is: iOS zoomt niet in dankzij maximum-scale=1 (v0.126, scripts/site.js). */
@media (pointer:coarse){
  .voet-social a,.voet-contact-icoon{position:relative}   /* het rondje blijft 34 px; het tikvlak eromheen is 44 px (de iconen staan 45 px uit elkaar) */
  .voet-social a::after,.voet-contact-icoon::after{content:'';position:absolute;inset:-5px;border-radius:50%}
  .held-pauze{width:44px;height:44px}
  .pijl-link{min-height:44px}
  .cert-tekst summary,.uitklap summary{min-height:44px;display:inline-flex;align-items:center}
  .cert-tekst summary{margin:0 0 4px}
  .kruimel a{display:inline-block;padding:11px 4px;margin:-11px -4px}
  .voet-zoek input{height:44px;border-radius:22px}
  .contact-2 .veld input{min-height:44px}
}
/* v0.180 (Stefan 22-10, assortimentspagina op de telefoon): (1) de regel .tour-var gold ook voor het <template> in elk
   lijstitem, dat daardoor 14 px marge kreeg (58 px per regel); (2) de lijst compacter; (3) de uitvoeringen zonder eigen
   schuifbalk: de tabel gebruikt de volle breedte van de kaart en wordt zo hoog als nodig, lange uitvoeringen breken af. */
template.tour-var{display:none}
.tour-item{min-height:32px;padding:3px 8px}
.inhoud .steiger-tour .tour-groep li>a.tour-item{padding:3px 8px}
@media (max-width:640px){.tour-item{min-height:44px}.tour-lijst h3{margin-top:10px}}   /* tikvlak 44 px (v0.177) */
.tour-kaart{padding:16px 18px;width:min(480px,calc(100% - 32px))}
.tour-kaart h3{padding-right:28px}
.tour-var-tabel{max-height:none;overflow:visible}
.tour-var td{white-space:nowrap}.tour-var td.u{white-space:normal}
@media (max-width:640px){.tour-kaart{width:auto}}
/* v0.180 (Stefan 22-10: "geen scrollbalk, ook niet mobiel"): de tabel met uitvoeringen past op een telefoon in de breedte;
   korte kopjes (Art.nr., Pak), maat, gewicht en verpakking op één regel, alleen de uitvoering breekt af */
table.spec .th-kort{display:none}
@media (max-width:640px){
  table.spec{font-size:13.5px}
  table.spec th{font-size:11px;letter-spacing:.02em;padding:8px 8px 6px 0;white-space:nowrap}
  table.spec td{padding:9px 8px 9px 0}
  table.spec .th-lang{display:none}table.spec .th-kort{display:inline}
  table.spec td:last-child,table.spec th:last-child{padding-right:0}
  table.spec small.ean,table.spec small.pallet{white-space:normal}
  table.spec td b{font-size:13px;font-weight:400}   /* v0.180: artikelnummer niet vet op de telefoon */
  table.spec .sticker{white-space:normal;width:auto}
  table.spec .m-l,.tour-var .m-l{display:none}   /* v0.180: "4.000 mm" in plaats van "L = 4.000 mm" */
  /* v0.180: de productkaart bij het model (accessoires en basis) een maat kleiner */
  .steiger-tour .tour-kaart h3,body.overzicht .inhoud .steiger-tour .tour-kaart h3{font-size:19px}
  .tour-kaart p{font-size:13.5px;line-height:1.5}
  .steiger-tour .tour-kaart .tour-var-kop{font-size:12px}
  .tour-var table{font-size:11.5px}.tour-var td,.tour-var th{padding:4px 6px}
  .tour-var td:first-child{font-weight:400}
  .inhoud .steiger-tour .tour-groep li>a.tour-item{font-size:14px}
}
@media (max-width:380px){table.spec{font-size:12.5px}table.spec td b{font-size:12.5px}table.spec th,table.spec td{padding-right:6px}}
/* ---------- v0.180 (Stefan 22-10, "meer richting het origineel" thiel.nl): de kop ----------
   (1) logo groter, verhouding als het origineel (de SVG heeft een krappe viewBox; alleen de hoogte wordt gezet): desktop 76 px,
   telefoon 56 px (iets kleiner dan thiel.nl mobiel, ± 65 px), na scrollen 42 px.
   (2) op de home en op pagina's met een beeldkop staat de kop transparant over het beeld, met een zacht verloop zodat logo
   en iconen leesbaar blijven; zodra er gescrold is (.klein, scripts/site.js) of het menu open is, wordt hij navy.
   --kop-h = de hoogte van de kop bovenaan (incl. de kopruimte van de app); zoveel schuift het beeld onder de kop door. */
:root{--kop-h:calc(92px + var(--kopruimte,0px))}
@media (min-width:1101px){.kop .logo img{height:76px}}
@media (max-width:1100px){
  :root{--kop-h:calc(72px + var(--kopruimte,0px))}
  .kop .in{min-height:72px}
  .kop .logo img{height:56px}
  .kop.klein .logo img{height:42px}
}
body.met-held .kop{position:fixed;left:0;right:0;top:0;background-color:transparent;background-image:linear-gradient(180deg,rgba(0,24,46,.35) 0%,rgba(0,24,46,.12) 60%,rgba(0,24,46,0) 100%);box-shadow:none;transition:background-color .25s ease,box-shadow .25s ease}
body.met-held .kop.klein,body.menu-open .kop{background-color:var(--navy);background-image:var(--verloop);box-shadow:0 7px 29px rgba(38,42,47,.15)}
body.met-held .held-video{padding-top:var(--kop-h);min-height:calc(min(62vh,560px) + var(--kop-h))}
@media (min-width:1101px){body.met-held .held-video{min-height:calc(min(52vh,500px) + var(--kop-h))}}
/* pagina's met een beeldkop: vanaf 641 px (op de telefoon heeft de paginakop geen foto, v0.100; daar blijft de kop navy) */
@media (min-width:641px){
  body.met-paginakop .kop{position:fixed;left:0;right:0;top:0;background-color:transparent;background-image:linear-gradient(180deg,rgba(0,24,46,.35) 0%,rgba(0,24,46,.12) 60%,rgba(0,24,46,0) 100%);box-shadow:none;transition:background-color .25s ease,box-shadow .25s ease}
  body.met-paginakop .kop.klein,body.met-paginakop.menu-open .kop{background-color:var(--navy);background-image:var(--verloop);box-shadow:0 7px 29px rgba(38,42,47,.15)}
  body.met-paginakop .paginakop{padding-top:var(--kop-h);min-height:calc(260px + var(--kop-h))}
  body.met-paginakop .wb-kop{padding-top:var(--kop-h);min-height:calc(560px + var(--kop-h))}body.met-paginakop .wb-vac-kop{padding-top:calc(var(--kop-h) + 24px)}   /* v0.196: Werken bij onder de doorzichtige kop */
  body.slug-projecten .paginakop,body.slug-projects .paginakop,body.slug-services .paginakop{min-height:calc(400px + var(--kop-h))}
  body.project.met-paginakop .paginakop{min-height:calc(300px + var(--kop-h))}
}
@media (prefers-reduced-motion:reduce){body.met-held .kop,body.met-paginakop .kop{transition:none}}
/* v0.180: op de telefoon staat de pauzeknop van de video rechtsboven; met de kop over het beeld schuift hij onder de kop */
@media (max-width:640px){body.met-held .held-pauze{top:calc(var(--kop-h) + 12px)}}
/* v0.180 (Stefan 22-10): de pauze-/speelknop van de film kleiner en transparanter, altijd rechtsonder in het beeld (ook op de
   telefoon, onder de tekstbalk). Op een aanraakscherm blijft het tikvlak 44 px; alleen het rondje in het midden is zichtbaar. */
.held-pauze,body.met-held .held-pauze{top:auto;right:10px;bottom:8px;width:26px;height:26px;background:rgba(0,46,84,.22);border-color:rgba(255,255,255,.22);opacity:.5}
.held-pauze .thiel-ui-icon{width:11px;height:11px}
.held-pauze:hover,.held-pauze:focus-visible{opacity:.95;background:rgba(0,46,84,.5)}
@media (pointer:coarse){
  .held-pauze,body.met-held .held-pauze{right:1px;bottom:0;width:44px;height:44px;border:0;background:radial-gradient(circle,rgba(0,46,84,.22) 0 12px,rgba(255,255,255,.22) 12.5px 13px,transparent 13.5px)}
  .held-pauze:hover,.held-pauze:focus-visible{background:radial-gradient(circle,rgba(0,46,84,.5) 0 12px,rgba(255,255,255,.4) 12.5px 13px,transparent 13.5px)}
}
/* v0.180 (Stefan 22-10): zoomknoppen bij het interactieve model, subtiel (vergrootglas + en −), onder Beginstand;
   alleen met een muis en vanaf 701 px (op een aanraakscherm knijp je) */
.tour-zoom{position:absolute;z-index:3;right:12px;top:56px;display:none;flex-direction:column;background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.tour-zoom button{width:34px;height:32px;padding:0;display:grid;place-items:center;border:0;background:none;color:var(--navy);cursor:pointer;opacity:.75;transition:opacity .15s,background .15s}
.tour-zoom button+button{border-top:1px solid var(--line)}
.tour-zoom button:hover,.tour-zoom button:focus-visible{opacity:1;background:var(--lblue);outline:none}
.tour-zoom .thiel-ui-icon{width:16px;height:16px}
@media (pointer:fine) and (min-width:701px){.tour-zoom:not([hidden]){display:flex}}
@media (prefers-reduced-motion:reduce){.tour-zoom button{transition:none}}
/* v0.182 (Stefan 23-10, "vinkjes niet mooi gecentreerd"): op de telefoon de vijf beloftes onder elkaar, als blok in het
   midden, met de vinkjes op één lijn (de rondjes vallen niet meer tegen de rand en de regels rafelen niet meer uit) */
@media (max-width:640px){
  .usp-strook ul{display:grid;justify-content:center;gap:10px;padding:16px 16px}
  .usp-strook li{font-size:15px;min-height:28px;padding-left:4px}
  .usp-strook li::before{left:0}   /* rondje (26 px) en vinkje (18 px, 4 px ingesprongen) delen hetzelfde midden; was 3 px scheef */
}
/* v0.182 (Stefan 23-10, "accessoires wat minder marge onder de foto"): de productkaartjes op de assortimentspagina's kregen
   de algemene 20 px marge van een afbeelding in de inhoud; de foto sluit nu aan op de tekst (10 px) */
.kaart.product img{margin:0}
/* v0.190 (Stefan 23-10): disclaimer en privacy. De knop Afdrukken lager, rechts, met zijn onderkant op één lijn met
   "Laatst bijgewerkt" (boven de blauwe lijn van de eerste kaart). Op papier bovenaan het Thiel-logo en thiel.nl, en een
   kleinere letter (8,5 pt, koppen 11 pt): een juridische tekst hoeft niet groot. */
.jur-kop{align-items:flex-end}
.jur-printkop{display:none}
@media (max-width:640px){.jur-kop{align-items:flex-start}}
@media print{
  .jur-printkop{display:flex;align-items:center;justify-content:space-between;gap:12pt;border-bottom:1pt solid #0072CE;padding:0 0 6pt;margin:0 0 12pt}
  .jur-printkop img{height:34pt;width:auto}
  .jur-printkop span{font:600 8.5pt/1.3 'Open Sans',sans-serif;color:#002E54}
  .juridisch,.jur-kaart p,.jur-kaart li,.jur-inleiding p{font-size:8.5pt;line-height:1.45}
  .jur-kop{margin:0 0 10pt}.jur-kop h1{font-size:18pt}.jur-datum{font-size:8pt}
  .jur-kaart{margin:0 0 7pt}.jur-kaart h2{font-size:11pt;margin:0 0 3pt}.jur-kaart h3{font-size:9.5pt;margin:6pt 0 2pt}
  .jur-kaart p{margin:0 0 4pt}.jur-kaart table{font-size:8pt}
}
/* v0.190 (Stefan 23-10): algemene voorwaarden in het Nederlands en Engels als downloadtegel van de eigen site, en de
   inleidende zin op één regel (geen "van toepassing" los op de tweede regel) */
.slug-algemene-voorwaarden .inhoud,.slug-terms-and-conditions .inhoud{max-width:860px}   /* zin op één regel, tegels naast elkaar */
.av-lead{max-width:none}
.av-downloads{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,320px));gap:12px;margin:18px 0 16px}
.av-download{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--blue);background:#fff;color:var(--navy);text-decoration:none;transition:box-shadow .2s,border-color .2s}
.av-download:hover,.av-download:focus-visible{box-shadow:0 10px 26px rgba(0,46,84,.12);border-color:#9cc3e8;outline:none}
.av-download:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.av-download .thiel-ui-icon{width:26px;height:26px;color:var(--blue)}
.av-download .thiel-ui-icon:last-child{width:20px;height:20px}
.inhoud a.av-download,.inhoud a.av-download:hover{text-decoration:none;color:var(--navy)}   /* niet de onderstreping van gewone links in de inhoud */
.av-download b{display:block;font:600 15px/1.3 var(--tekst)}
.av-download small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
@media (prefers-reduced-motion:reduce){.av-download{transition:none}}

/* ---------- v0.196 (Stefan 23-10): Werken bij (tools/site-werken.mjs, scripts/werken.js). Huisstijl van Van Thiel: navy en
   blauw, Oswald en Open Sans, rechte hoeken; het voorbeeld van Feddy was inspiratie, geen blauwdruk. Beweging volgens
   feliro-motion: één hoofdbeweging per blok, alleen transform en opacity, alles uit bij minder beweging. ---------- */
/* v0.197 (Stefan 23-10): de kop zoals de andere pagina's: een beeld uit de film (collega aan de machine, rechts), een blauwe
   overlay van donker links naar licht rechts en een trage zoom; de tekst links. De film staat in een eigen blok (#film). */
.wb-kop{position:relative;color:#fff;overflow:hidden;isolation:isolate;background:#00203c;min-height:520px;display:flex;align-items:flex-end}
.wb-kop-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 35%;z-index:-2;transform-origin:70% 40%}
.wb-kop::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,32,60,.95) 0%,rgba(0,46,84,.86) 34%,rgba(0,58,107,.42) 66%,rgba(0,58,107,.12) 100%),linear-gradient(0deg,rgba(0,32,60,.5),rgba(0,32,60,0) 45%)}
.wb-kop .in{position:relative;width:100%;padding-top:28px;padding-bottom:60px}
.wb-kop .kruimel,.wb-kop .kruimel a{color:#cfe0f0}
.wb-kop-tekst{max-width:600px;margin-top:26px}
.wb-kop .kicker,.wb-band-tekst .kicker,.wb-solliciteer .kicker,.wb-vac-kop .wb-label{color:#8fc3f0}
.wb-kop h1{color:#fff;font-size:clamp(34px,4.2vw,52px);line-height:1.08;margin:0 0 18px}
.wb-kop .lead{color:#e3eef8;font-size:16px;max-width:52ch}
.wb-kop .knoppen{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.wb-kop-film{display:inline-flex;align-items:center;gap:12px;color:#fff;font-weight:600;text-decoration:none;margin-left:6px}
.wb-kop-film .film-play{width:44px;height:44px}.wb-kop-film .film-play .thiel-ui-icon{width:20px;height:20px}
.wb-kop-film:hover .film-play,.wb-kop-film:focus-visible .film-play{transform:scale(1.06);background:#0a84e8}
.wb-kop-film:hover{text-decoration:underline}
.wb-tel{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;background:var(--blue);color:#fff;font-size:12px;font-weight:700;margin-left:4px}
/* filmspeler (tools/site-film.mjs, scripts/film.js): Werken bij en de uitlegfilm op de Tube-Lock-pagina */
.film-kader{position:relative;aspect-ratio:16/9;background:#00152a;box-shadow:0 24px 60px rgba(0,0,0,.35);outline:1px solid rgba(255,255,255,.12)}
.film-video{display:block;width:100%;height:100%;object-fit:cover;background:#00152a}
.film-start{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;padding:22px;border:0;background:linear-gradient(180deg,rgba(0,32,60,0) 45%,rgba(0,32,60,.72));color:#fff;cursor:pointer;text-align:left;font:inherit}
.film-start[hidden]{display:none}
.film-play{display:inline-grid;place-items:center;width:64px;height:64px;background:var(--blue);flex:0 0 auto;transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s}
.film-play .thiel-ui-icon{width:28px;height:28px}
.film-label{display:flex;flex-direction:column;margin-left:16px}
.film-label b{font:700 22px/1.1 var(--kop)}.film-label small{font-size:14px;color:#cfe0f0;margin-top:4px}
.film-start:hover .film-play,.film-start:focus-visible .film-play{transform:scale(1.06);background:#0a84e8}
.film-start:focus-visible{outline:3px solid #94cfff;outline-offset:-3px}
.wb-vacatures-blok .wb-intro{max-width:none}
.formulier.sollicitatie .acties{justify-content:flex-start}
/* v0.197 (Stefan 23-10): acht redenen om hier te werken, in plaats van de kerncijfers. Elke tegel: één grote regel in
   Oswald en één regel eronder; een blauwe lijn bovenaan tekent zich bij binnenkomen (gestaffeld, 70 ms) en loopt bij hover
   over de hele tegel door. Getallen tellen op (scripts/werken.js). 4 kolommen, 2 op tablet, op de telefoon een lijst. */
.wb-redenen{background:#fff;padding:56px 0 52px}
.wb-reden-raster{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px}
.wb-reden-raster li{position:relative;padding:20px 0 22px;border-bottom:1px solid var(--line)}   /* v0.198 (Stefan 23-10): lijn en blauw streepje onder het blok, niet twee streepjes onder de kop */
.wb-reden-raster li::before{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--blue);transform-origin:left center;transform:scaleX(.18);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.wb-reden-raster li:hover::before{transform:scaleX(1)}
.js .wb-reden-raster li.inkomer{transition-delay:calc(70ms * var(--i,0))}
.js .wb-reden-raster li.inkomer:not(.zichtbaar)::before{transform:scaleX(0)}
.js .wb-reden-raster li.inkomer.zichtbaar:not(:hover)::before{transition:transform .5s cubic-bezier(.2,.8,.2,1) calc(200ms + 70ms * var(--i,0))}
.wb-reden-raster b{display:block;font:700 32px/1.05 var(--kop);color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.wb-reden-raster span{display:block;margin-top:8px;font-size:15px;color:var(--ink);   /* v0.198 (Stefan 23-10): donkerder, gelijk aan de lopende tekst */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1179px){.wb-reden-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .wb-redenen{padding:40px 0 36px}
  .wb-reden-raster{grid-template-columns:1fr}
  .wb-reden-raster li{padding:14px 0 16px}
  .wb-reden-raster b{font-size:26px}.wb-reden-raster span{margin-top:4px}
}
@media (prefers-reduced-motion:reduce){.wb-reden-raster li::before{transition:none!important}}
/* waarom: vier kaarten met icoon, gestaffeld binnen */
.wb-intro{max-width:780px}
.wb-intro .sectie-kop{margin-bottom:14px}
.wb-intro h2{font-size:clamp(26px,2.6vw,34px)}
.wb-punten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:8px}   /* v0.197: 2 × 2 brede kaarten, zodat de titel naast het icoon op één regel past */
.wb-punt{background:#fff;border:1px solid var(--line);border-top:3px solid var(--blue);padding:22px 20px;transition:box-shadow .2s,transform .2s cubic-bezier(.2,.8,.2,1)}
.wb-punt:hover{box-shadow:var(--schaduw);transform:translateY(-2px)}
/* v0.197: het icoon naast de titel, als lijntekening in een dun blauw kader (geen gekleurd vlak meer) */
.wb-ico{display:inline-grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border:1.5px solid rgba(0,114,206,.35);color:var(--blue)}
.wb-ico .thiel-ui-icon{width:20px;height:20px}
.wb-punt h3{display:flex;align-items:center;gap:12px;font-size:20px;line-height:1.15;margin:0 0 12px}.wb-punt p{margin:0;color:var(--ink);font-size:15px}
.js .wb-punt.inkomer{transition-delay:calc(80ms * var(--i,0))}
/* wat wij bieden */
.wb-bieden-raster{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.wb-bieden h2{font-size:clamp(26px,2.6vw,34px);margin-bottom:12px}
.wb-vinklijst{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wb-bieden .wb-vinklijst{display:block;columns:2;column-gap:36px}   /* v0.197: kolommen, geen raster: geen gaten naast een regel van twee regels */
.wb-bieden .wb-vinklijst li{break-inside:avoid;margin:0 0 10px}
.wb-vinklijst li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.wb-vinklijst .thiel-ui-icon{flex:0 0 22px;width:22px;height:22px;margin-top:1px;color:#fff;background:var(--blue);padding:3px;box-sizing:border-box}
/* vacatures */
.wb-aantal{font:600 14px var(--tekst);color:var(--muted)}
.wb-vacatures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.wb-vacature{display:flex;flex-direction:column;gap:10px;padding:22px 22px 20px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);color:var(--ink);text-decoration:none;transition:box-shadow .2s,transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s}
.wb-vacature:hover,.wb-vacature:focus-visible{box-shadow:var(--schaduw);transform:translateY(-2px);border-color:#9cc3e8;border-left-color:var(--blue)}
.wb-vacature:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.wb-label{align-self:flex-start;font:700 12px/1 var(--tekst);letter-spacing:.08em;text-transform:uppercase;color:var(--blue);background:var(--lblue);padding:6px 8px}
.wb-vacature h3{font-size:24px;margin:0}.wb-vacature p{margin:0;color:var(--ink)}
.wb-meta{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted)}
.wb-meta .thiel-ui-icon{width:16px;height:16px;flex:0 0 16px}
.wb-pijl{margin-top:auto;padding-top:6px;display:inline-flex;gap:6px;align-items:center;font-weight:600;color:var(--blue)}
.wb-vacature:hover .wb-pijl{text-decoration:underline}
.wb-open{background:var(--lblue);border-style:dashed;border-left-style:solid}
.wb-open .wb-label{background:#fff}
/* solliciteren: navy, tekst links, het formulier als witte kaart rechts */
.wb-solliciteer{background:var(--navy) var(--verloop);color:#fff;padding:56px 0}
.wb-solliciteer .in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
.wb-solliciteer h2{color:#fff;font-size:clamp(26px,2.6vw,36px);margin:0 0 14px}
.wb-sol-tekst p{color:#dbe8f5;max-width:46ch}
.wb-direct{margin-top:28px;padding:18px 20px;border-left:3px solid var(--blue);background:rgba(255,255,255,.06);display:grid;gap:6px}
.wb-direct b{font:700 18px var(--kop)}.wb-direct span{color:#cfe0f0}
.wb-direct a{display:inline-flex;gap:8px;align-items:center;color:#fff;text-decoration:none;width:fit-content}
.wb-direct a:hover{text-decoration:underline}
.wb-direct .thiel-ui-icon{width:16px;height:16px;color:#94cfff}
.formulier.sollicitatie{max-width:none;color:var(--ink)}
.formulier.sollicitatie h3{font-size:24px;margin:0 0 16px}
.veld select{width:100%;font:inherit;font-size:16px;padding:12px 40px 12px 14px;border:1px solid var(--line);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23002E54' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;color:var(--ink);border-radius:0;appearance:none}
.veld select:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.veld [aria-invalid=true]{border-color:var(--orange);outline-color:var(--orange)}
/* cv: het echte bestandsveld ligt onzichtbaar over een eigen knop (toegankelijk: label en focus blijven van het veld) */
.wb-cv{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 14px}
.wb-cv label{grid-column:1/-1;margin:0}
.wb-cv input{position:absolute;left:0;bottom:0;width:100%;height:48px;opacity:0;cursor:pointer;padding:0;border:0}
.wb-cv-knop{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:1px dashed #9cc3e8;background:var(--lblue);color:var(--navy);font-weight:600;font-size:15px}
.wb-cv-knop .thiel-ui-icon{width:18px;height:18px;color:var(--blue)}
.wb-cv-naam{font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-cv input:focus-visible+.wb-cv-knop{outline:2px solid var(--blue);outline-offset:2px}
.wb-cv:hover .wb-cv-knop{border-color:var(--blue)}
.wb-cv.gekozen .wb-cv-knop{border-style:solid;border-color:var(--blue)}.wb-cv.gekozen .wb-cv-naam{color:var(--navy);font-weight:600}
.wb-cv.fout .wb-cv-knop{border-color:var(--orange)}
.wb-akkoord{display:flex;gap:10px;align-items:flex-start;margin:4px 0 16px;font-size:14px;line-height:1.5;cursor:pointer}
.wb-akkoord input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--blue);flex:0 0 20px}
.formulier.sollicitatie .acties{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.formulier.sollicitatie .acties .klein{font-size:13px;color:var(--muted)}
.formulier.sollicitatie.klaar .veld,.formulier.sollicitatie.klaar .veld-rij,.formulier.sollicitatie.klaar .wb-akkoord,.formulier.sollicitatie.klaar .acties{display:none}
.formulier.sollicitatie .melding{display:flex;gap:12px;align-items:center}.formulier.sollicitatie .melding[hidden]{display:none}
/* vacaturepagina */
.wb-vac-kop{background:var(--verloop);color:#fff;padding:26px 0 40px}
.wb-vac-kop .kruimel,.wb-vac-kop .kruimel a{color:#cfe0f0}
.wb-vac-kop .wb-label{background:rgba(255,255,255,.1);margin-top:14px;display:inline-block}
.wb-vac-kop h1{color:#fff;font-size:clamp(34px,4.4vw,54px);margin:12px 0 16px}
.wb-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.wb-chips li{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);font-size:15px}
.wb-chips .thiel-ui-icon{width:16px;height:16px;color:#94cfff}
.wb-vac-raster{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
.wb-vac-tekst{max-width:none}   /* v0.197 (Stefan 23-10): de kolom helemaal benutten, standaardmaat 15 px */
.wb-vac-tekst .lead{max-width:none;margin-bottom:8px}
.wb-vac-tekst p{max-width:none}
.wb-vac-tekst h2{font-size:26px;margin:30px 0 12px}
.wb-vac-tekst p{margin:0 0 12px}
.wb-terug{display:inline-flex;gap:8px;align-items:center;font-weight:600;text-decoration:none;margin-top:12px}
.wb-terug .thiel-ui-icon{width:16px;height:16px}
.wb-vac-zij{position:sticky;top:110px}
.wb-vac-kaart{background:var(--lblue);border-top:3px solid var(--blue);padding:22px}
.wb-vac-kaart h2{font-size:22px;margin:0 0 12px}
.wb-vac-kaart dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0 0 18px}
.wb-vac-kaart dt{font-weight:600;color:var(--navy)}.wb-vac-kaart dd{margin:0}
.wb-vac-kaart .knop{width:100%}
/* banner op de home: foto uit de film links, tekst en vacatures rechts */
.werken-band{background:var(--navy) var(--verloop);color:#fff;overflow:hidden}
.wb-band-raster{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);min-height:440px}
.wb-band-beeld{position:relative;display:block;overflow:hidden;background:#00203c}
.wb-band-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wb-band-beeld::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,46,84,0) 55%,var(--navy))}
.wb-band-film{position:absolute;left:28px;bottom:28px;z-index:1;display:inline-flex;align-items:center;gap:12px;background:rgba(0,46,84,.82);color:#fff;padding:8px 18px 8px 8px;font:600 15px var(--tekst)}
.wb-band-film .film-play{width:44px;height:44px}.wb-band-film .film-play .thiel-ui-icon{width:20px;height:20px}
.wb-band-beeld:hover .film-play,.wb-band-beeld:focus-visible .film-play{transform:scale(1.06);background:#0a84e8}
.wb-band-beeld:focus-visible{outline:3px solid #94cfff;outline-offset:-3px}
.wb-band-tekst{padding:56px var(--rand) 56px 48px;display:flex;flex-direction:column;justify-content:center;max-width:640px}
/* v0.234 (Stefan 27-10): filmknop en tekst van de werken-band binnen de inhoudsbreedte van de kop (op brede schermen stond de knop
   tegen de schermrand, buiten de lijn van logo en kopteksten) */
@media (min-width:901px){.wb-band-film{left:max(28px,calc((100vw - var(--breed)) / 2 + var(--rand)))}
  .wb-band-tekst{padding-right:max(var(--rand),calc((100vw - var(--breed)) / 2 + var(--rand)))}
  /* v0.242 (Stefan 28-10): de rechterruimte hierboven ging af van max-width:640px, zodat de tekst op een breed scherm in een
     smalle kolom van één woord per regel viel. De kolom zelf is nu vrij; de tekst krijgt zijn eigen maximale breedte. De
     filmknop staat even hoog als de knoppen en op dezelfde onderlijn (tekst onderaan uitgelijnd, beide 56 px van de onderkant). */
  .wb-band-tekst{max-width:none;justify-content:flex-end}
  .wb-band-tekst>*{max-width:560px}
  .wb-band-film{bottom:56px;min-height:46px;box-sizing:border-box;padding:4px 18px 4px 4px}
  .wb-band-film .film-play{width:38px;height:38px}
  .wb-band-tekst .knop{white-space:nowrap}}
.wb-band-tekst h2{color:#fff;font-size:clamp(30px,3vw,40px);margin:0 0 14px}
.wb-band-tekst p{color:#dbe8f5;margin:0}
.wb-band-vac{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:8px}
.wb-band-vac a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;background:rgba(255,255,255,.06);border-left:3px solid var(--blue);color:#fff;text-decoration:none;transition:background .2s}
.wb-band-vac a:hover,.wb-band-vac a:focus-visible{background:rgba(255,255,255,.12)}
.wb-band-vac b{font:600 16px var(--tekst)}.wb-band-vac span{color:#b9cfe4;font-size:14px;white-space:nowrap}
.wb-band-tekst .knoppen{margin-top:24px}
@media (prefers-reduced-motion:no-preference){
  /* de foto in de banner zoomt heel traag (sfeer, 30 s heen en terug); de kop van Werken bij komt binnen zoals de paginakop */
  .wb-band-beeld img{animation:wb-zoom 30s ease-in-out infinite alternate}
  /* v0.198 (Stefan 23-10): zoveel beweging als de andere paginakoppen. v0.224 (Stefan 25-10): niet meer op de telefoon. Daar
     groeide de geschaalde foto onder zijn overlay uit (een lichte streep die langzaam breder werd), en de vaste regel is:
     telefoon geen ken burns (van-thiel-motion §2), net als de andere paginakoppen */
  @media (min-width:641px){.wb-kop-foto{animation:kop-beweeg 16s ease-in-out infinite alternate}}
  .wb-kop h1,.wb-vac-kop h1{animation:entree-regel 720ms cubic-bezier(.2,.8,.2,1) 120ms backwards}
  .wb-kop .kicker,.wb-kop .kruimel,.wb-vac-kop .kruimel,.wb-vac-kop .wb-label{animation:entree-op 420ms cubic-bezier(.2,.8,.2,1) 40ms backwards}
  .wb-kop .lead,.wb-vac-kop .wb-chips,.wb-vac-kop .wb-deel{animation:entree-op 600ms cubic-bezier(.2,.8,.2,1) 380ms backwards}
  .wb-kop .knoppen,.wb-vac-kop .knoppen{animation:entree-op 560ms cubic-bezier(.2,.8,.2,1) 500ms backwards}
}
@keyframes wb-zoom{from{transform:scale(1)}to{transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){.wb-punt,.wb-vacature,.film-play,.wb-band-vac a{transition:none}.wb-punt:hover,.wb-vacature:hover{transform:none}}
@media (max-width:1100px){.wb-vacatures{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .wb-kop{min-height:0}.wb-kop .in{padding-bottom:40px}
  .wb-bieden-raster,.wb-solliciteer .in,.wb-vac-raster{grid-template-columns:1fr;gap:28px}
  .wb-bieden .wb-vinklijst{columns:1}
  .wb-vac-zij{position:static}
  .wb-solliciteer{padding:40px 0}
  .wb-band-raster{grid-template-columns:1fr;min-height:0}.wb-band-beeld{aspect-ratio:16/9}
  .wb-band-beeld::after{background:linear-gradient(180deg,rgba(0,46,84,0) 55%,var(--navy))}
  .wb-band-tekst{padding:20px 16px 40px}
}
@media (max-width:640px){
  .wb-punten,.wb-vacatures{grid-template-columns:1fr}
  .wb-punt h3{font-size:19px;margin-bottom:8px}
  .film-play{width:52px;height:52px}.film-label b{font-size:19px}.film-start{padding:14px}
  .formulier.sollicitatie{padding:20px 16px}.formulier.sollicitatie .veld-rij{grid-template-columns:1fr}
  .wb-band-film{left:16px;bottom:16px}
  .wb-band-vac a{flex-direction:column;align-items:flex-start;gap:2px}
  /* designronde 23-10: de vier punten als rustige lijst in plaats van vier zware kaarten */
  .wb-punten{gap:0;border-top:1px solid var(--line)}
  .wb-punt{background:none;border:0;border-bottom:1px solid var(--line);padding:18px 0}.wb-punt:hover{box-shadow:none;transform:none}
  /* cv: de bestandsnaam onder de knop, niet afgekapt ernaast; versturen over de hele breedte */
  .wb-cv{grid-template-columns:1fr}.wb-cv-knop{justify-content:center}.wb-cv-naam{white-space:normal}
  .formulier.sollicitatie .acties{flex-direction:column;align-items:stretch;gap:8px}.formulier.sollicitatie .acties .knop{width:100%}
  .formulier.sollicitatie .acties .klein{text-align:center}
}
/* vaste sollicitatiebalk onderin (alleen telefoon en tablet, vacaturepagina); komt in met een korte schuif omhoog */
.wb-plakbalk{display:none}
@media (max-width:900px){
  .wb-plakbalk{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:var(--navy);color:#fff;box-shadow:0 -8px 24px rgba(0,20,40,.25);transform:translateY(110%);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
  .wb-plakbalk[hidden]{display:none}
  .wb-plakbalk.aan{transform:none}
  .wb-plakbalk span{display:flex;flex-direction:column;min-width:0}
  .wb-plakbalk b{font:700 17px/1.2 var(--kop);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-plakbalk small{font-size:13px;color:#cfe0f0}
  .wb-plakbalk .knop{flex:0 0 auto;min-width:0;padding:12px 20px}
}
@media (prefers-reduced-motion:reduce){.wb-plakbalk{transition:none}}
/* desktop: de tekst naast het formulier schuift mee, zodat er geen leeg navy vlak ontstaat */
@media (min-width:901px){.wb-solliciteer .in>:first-child{position:sticky;top:110px}}

/* ---------- v0.197 (Stefan 23-10): delen en printen van een vacature ----------
   Knoppen voor WhatsApp, LinkedIn, Facebook en e-mail (gewone links), plus Delen (deelmenu van de telefoon), Link kopiëren
   en Print / PDF (scripts/werken.js zet die aan). Vol op de vacaturepagina, compact (alleen iconen) op de kaartjes. */
.wb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wb-deel{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.wb-deel-kop{width:100%;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.wb-deel>a,.wb-deel>button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 14px;border:1px solid var(--line);background:#fff;color:var(--navy);font:600 14px var(--tekst);text-decoration:none;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.wb-deel>[hidden]{display:none}
.wb-deel svg,.wb-deel .thiel-ui-icon{width:18px;height:18px;flex:0 0 18px}
.wb-merk{fill:currentColor}
.wb-deel>a:hover,.wb-deel>button:hover,.wb-deel>a:focus-visible,.wb-deel>button:focus-visible{border-color:var(--blue);color:var(--blue)}
.wb-deel .wb-deel-whatsapp:hover{color:#128c4b;border-color:#25d366}.wb-deel .wb-deel-linkedin:hover{color:#0a66c2;border-color:#0a66c2}.wb-deel .wb-deel-facebook:hover{color:#1877f2;border-color:#1877f2}
.wb-deel .wb-deel-kopie.klaar{color:#128c4b;border-color:#25d366}
.wb-deel.compact{gap:6px}
.wb-deel.compact>a,.wb-deel.compact>button{width:36px;height:36px;padding:0}
/* donkere achtergrond: de kop van de vacature en de banner op de home */
.wb-vac-kop .wb-deel{margin-top:22px}.wb-vac-kop .wb-deel-kop{color:#b9cfe4}
.wb-vac-kop .wb-deel>a,.wb-vac-kop .wb-deel>button,.werken-band .wb-deel>a,.werken-band .wb-deel>button{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff}
.wb-vac-kop .wb-deel>a:hover,.wb-vac-kop .wb-deel>button:hover,.werken-band .wb-deel>a:hover,.werken-band .wb-deel>button:hover{background:rgba(255,255,255,.14);border-color:#94cfff;color:#fff}
/* zijbalk: compact onder "In het kort" */
.wb-vac-zij .wb-deel{margin-top:14px}
/* vacaturekaartje: één link over de hele kaart, de deelknoppen erboven (geen link in een link) */
.wb-vacature{position:relative}
.wb-vacature h3 a{color:inherit;text-decoration:none}
.wb-kaart-link::after{content:'';position:absolute;inset:0;z-index:1}
.wb-kaart-link:focus-visible{outline:none}.wb-vacature:has(.wb-kaart-link:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.wb-kaart-voet{margin-top:auto;padding-top:8px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.wb-kaart-voet .wb-pijl{margin:0;padding:0}
.wb-vacature:hover .wb-pijl{text-decoration:underline}
/* banner op de home: de vacature met de deelknoppen ernaast */
.wb-band-vac li{display:flex;align-items:stretch;gap:8px}
.wb-band-vac li>a{flex:1;min-width:0}
.wb-band-vac .wb-deel{flex-wrap:nowrap}
.wb-band-vac .wb-deel>a,.wb-band-vac .wb-deel>button{height:100%;min-height:36px}
/* v0.242: in de smalle tekstkolom (tot 1300 px) de deelknoppen onder de vacature, anders vallen ze buiten beeld */
@media (max-width:1300px){.wb-band-vac li{flex-direction:column}.wb-band-vac .wb-deel{flex-wrap:wrap}.wb-band-vac .wb-deel>a,.wb-band-vac .wb-deel>button{height:36px}}
@media (max-width:640px){
  .wb-band-vac li{flex-direction:column}.wb-band-vac .wb-deel{flex-wrap:wrap}
  .wb-vac-kop .wb-deel>a,.wb-vac-kop .wb-deel>button{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){.wb-deel>a,.wb-deel>button{transition:none}}
/* Print / PDF (vacature): een A4 in de stijl van Van Thiel, zoals de juridische pagina's: briefhoofd met logo, de vacature,
   "In het kort" ernaast en onderaan hoe je solliciteert, met het adres van de vacature. Geen menu, film, formulier of knoppen. */
.wb-print-kop,.wb-print-voet{display:none}
@media print{
  @page{size:A4;margin:14mm 14mm 16mm}
  body.vacature{-webkit-print-color-adjust:exact;print-color-adjust:exact;background:#fff}
  body.vacature :is(.kop,.voet,.cookie-plek,.kruimel,.wb-solliciteer,.wb-plakbalk,.wb-deel,.knoppen,.wb-terug,.wb-vac-kaart .knop,.menu-mobiel,.ocv-overlay){display:none!important}
  body.vacature .inkomer{opacity:1!important;transform:none!important}
  body.vacature *{animation:none!important;transition:none!important}
  .wb-print-kop{display:flex;align-items:center;gap:14pt;border-bottom:1.5pt solid #0072CE;padding:0 0 8pt;margin:0 0 12pt}
  .wb-print-kop img{height:36pt;width:auto}
  .wb-print-kop span{font:400 8.5pt/1.4 'Open Sans',sans-serif;color:#002E54}.wb-print-kop b{display:block;font-weight:700}
  .wb-print-kop em{margin-left:auto;font:700 11pt 'Oswald',sans-serif;letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:#0072CE}
  body.vacature .wb-vac-kop{background:none!important;color:#002E54;padding:0!important;margin:0 0 10pt}
  body.vacature .wb-vac-kop .in{padding:0}
  body.vacature .wb-vac-kop h1{color:#002E54;font-size:24pt;margin:4pt 0 8pt}
  body.vacature .wb-vac-kop .wb-label{color:#0072CE;background:#E8F1FB}
  body.vacature .wb-chips li{border:1pt solid #c9d6e3;background:#fff;color:#002E54;font-size:9.5pt}
  body.vacature .wb-chips .thiel-ui-icon{color:#0072CE}
  body.vacature .wb-vac{padding:0}body.vacature .wb-vac .in,body.vacature .wb-vac-kop .in{padding-left:0;padding-right:0;max-width:none}
  body.vacature .wb-interesse{display:none}
  body.vacature .wb-vac-raster{display:grid;grid-template-columns:minmax(0,1fr) 58mm;gap:9mm}
  body.vacature .wb-vac-zij{position:static}
  body.vacature .wb-vac-kaart{padding:10pt 12pt;break-inside:avoid}
  body.vacature .wb-vac-kaart h2{font-size:12pt} body.vacature .wb-vac-kaart dl{font-size:9pt}
  body.vacature .wb-vac-tekst p,body.vacature .wb-vac-tekst li{font-size:10pt;line-height:1.5}
  body.vacature .wb-vac-tekst h2{font-size:13pt;margin:10pt 0 4pt;break-after:avoid}
  body.vacature .wb-vinklijst .thiel-ui-icon{width:14pt;height:14pt;flex-basis:14pt}
  .wb-print-voet{display:block;margin:12pt 0 0;padding:9pt 12pt;border-left:3pt solid #0072CE;background:#E8F1FB;font:400 9.5pt/1.5 'Open Sans',sans-serif;color:#002E54;break-inside:avoid}
  .wb-print-voet span{font-weight:600;color:#0072CE}
}

/* ---------- v0.196 (Stefan 23-10): de uitlegfilm op de Tube-Lock-pagina (tools/site-film.mjs uitlegSectie) ----------
   Navy band tussen de intro en de tien voordelen: tekst en hoofdstukken links, de film groot rechts; op de telefoon
   tekst, film, hoofdstukken onder elkaar. Een hoofdstuk start de film op dat moment; het lopende hoofdstuk krijgt
   aria-current (scripts/film.js). Beweging: alleen kleur en een korte verschuiving van het nummer bij hover. */
.uitlegfilm{background:linear-gradient(135deg,var(--navy) 0%,#00385f 100%)}
.uf-raster{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.9fr);grid-template-rows:auto 1fr;grid-template-areas:"tekst film" "stukken film";column-gap:48px;row-gap:24px;align-items:start}
.uf-tekst{grid-area:tekst}.uf-film{grid-area:film;margin:0}.uf-hoofdstukken{grid-area:stukken;align-self:end}   /* de lijst sluit onderaan gelijk met de film */
.uf-tekst .kicker{color:#94cfff}
.uf-tekst h2{color:#fff;font-size:clamp(26px,2.6vw,36px);margin:0 0 12px}
.uf-tekst p{color:#d5e4f2;margin:0;line-height:1.6}
.uf-hoofdstukken{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.16)}
.uf-hoofdstukken li{border-bottom:1px solid rgba(255,255,255,.16)}
.uf-hoofdstukken button{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;min-height:56px;padding:12px 10px 12px 0;background:none;border:0;color:#fff;font:inherit;text-align:left;cursor:pointer;transition:background .15s cubic-bezier(.2,.8,.2,1)}
.uf-nr{font:700 15px/1 var(--kop);color:#94cfff;width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(148,207,255,.45);transition:background .15s,color .15s,border-color .15s}
.uf-wat{display:flex;flex-direction:column;min-width:0}
.uf-wat b{font:600 17px/1.2 var(--kop)}
.uf-wat small{font-size:13px;color:#b9cfe4;margin-top:3px}
.uf-tijd{font-size:13px;color:#b9cfe4;font-variant-numeric:tabular-nums}
.uf-hoofdstukken button:hover{background:rgba(255,255,255,.05)}
.uf-hoofdstukken button:hover .uf-nr,.uf-hoofdstukken button[aria-current] .uf-nr{background:var(--blue);border-color:var(--blue);color:#fff}
.uf-hoofdstukken button:focus-visible{outline:3px solid #94cfff;outline-offset:-3px}
/* beweging (designronde 23-10), passend bij de rest van de site: de maatlijn onder de kop (sectie-kop), de film komt na de
   tekst rustig binnen (zoals de film op Werken bij), de hoofdstukken gestaffeld (80 ms), en tijdens het kijken loopt onder
   het lopende hoofdstuk een lijn mee: laat zien waar je in de film bent. */
.uitlegfilm .sectie-kop{margin:0 0 12px}.uitlegfilm .sectie-kop h2{margin:0}
.js .uf-film.inkomer{transform:translateY(16px) scale(.985);transition:opacity .6s cubic-bezier(.2,.8,.2,1) .12s,transform .6s cubic-bezier(.2,.8,.2,1) .12s}
.js .uf-film.inkomer.zichtbaar{transform:none}
.js .uf-hoofdstukken li.inkomer{transition-delay:calc(200ms + 80ms * var(--i,0))}
.uf-hoofdstukken button{position:relative}
.uf-hoofdstukken button::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#94cfff;transform:scaleX(var(--voortgang,0));transform-origin:left center;transition:transform .3s linear}
@media (prefers-reduced-motion:reduce){.js .uf-film.inkomer,.js .uf-hoofdstukken li.inkomer{transition:none;transform:none}.uf-hoofdstukken button::after{transition:none}}
@media (max-width:900px){
  .uf-raster{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"tekst" "film" "stukken";row-gap:20px}
}
/* telefoon: alleen de afspeelknop midden op de poster; de tekst ernaast zou over het beeld van de film vallen */
@media (max-width:640px){
  .film-start{align-items:center;justify-content:center;background:rgba(0,32,60,.18)}
  .film-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.uf-hoofdstukken button,.uf-nr{transition:none}}

/* v0.197 (Stefan 23-10): calculatorblok op de home: "Start de calculator" en "Hoe het werkt" naast elkaar, even breed */
.calc-blok .knoppen.twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:520px}
.calc-blok .knoppen.twee .knop{justify-content:center;min-width:0}
@media (max-width:640px){.calc-blok .knoppen.twee{grid-template-columns:1fr;max-width:none}}

body.werken main.pagina,body.vacature main.pagina{padding-bottom:0}   /* v0.197: geen witte strook tussen het navy formulierblok en de voet */
/* v0.197 telefoon: de foto als beeldstrook bovenaan (de collega in beeld), de tekst op navy eronder */
@media (max-width:640px){
  .wb-kop{display:block;min-height:0;background:var(--navy) var(--verloop)}
  .wb-kop-foto{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:16/10;object-position:74% 30%;z-index:0}
  .wb-kop::before{inset:0 0 auto 0;height:calc(100vw * .625 + 2px);z-index:1;background:linear-gradient(180deg,rgba(0,32,60,.15) 0%,rgba(0,32,60,0) 45%,rgba(0,32,60,.85) 100%)}
  .wb-kop .in{padding-top:6px;padding-bottom:36px}
  .wb-kop .kruimel{margin-top:-34px;position:relative;z-index:2}
  .wb-kop-tekst{margin-top:18px}
}
/* v0.197 (Stefan 23-10): de kop op desktop iets hoger, met meer lucht boven en onder het logo (13 px, was 8; logo blijft 76 px).
   De shop (styles/main.css, .top) volgt dezelfde maat. */
@media (min-width:1101px){
  :root{--kop-h:calc(102px + var(--kopruimte,0px))}
  .kop .in{padding-top:13px;padding-bottom:13px}
  .kop .logo img{height:76px}
}
/* v0.197 (Stefan 23-10): interactieve steiger. Op desktop ook nummers op het model; de naam verschijnt bij aanwijzen naast het
   nummer. De lijst compacter (kleinere letter en regels, geen kopje "Opslag en transport"), zodat hij zonder scrollen past; de
   intro over de volle breedte (geen afgebroken zin). */
.tour-kop{max-width:none}.tour-kop .lead{max-width:none}
.tour-klein .tour-label{position:absolute}
.tour-klein .tour-label:hover span,.tour-klein .tour-label--hover span,.tour-klein .tour-label--actief span{display:inline;position:absolute;left:30px;top:50%;transform:translateY(-50%)!important;white-space:nowrap;background:var(--navy);border-color:var(--navy);color:#fff}
.tour-lijst h3{margin:10px 0 4px}
.tour-item{min-height:27px;padding:1px 8px;font-size:13.5px;gap:9px}
.tour-lijst{padding-top:14px;padding-bottom:14px}
@media (min-width:981px){.tour-buhne .tour-model,.tour-lijst{height:clamp(460px,74vh,680px);max-height:none}}
.tour-nr{width:20px;height:20px;font-size:10.5px}
@media (max-width:640px){.tour-item{min-height:44px;font-size:14.5px}}
/* v0.197 (Stefan 23-10; v0.234: nu bóven Feddy, scripts/shopbuddy.js zet de hoogte): de melding "Kom jij bij ons werken?", rechtsonder (scripts/werken-melding.js). Rond zoals de
   Feddy-knop, navy met een blauwe stip; komt na 10 s kort omhoog binnen. */
.werken-melding{position:fixed;right:24px;bottom:18px;z-index:1290;display:flex;align-items:center;gap:4px;padding:6px 6px 6px 20px;border-radius:32px;background:var(--navy) var(--verloop);color:#fff;box-shadow:0 8px 26px rgba(0,30,60,.3);opacity:0;transform:translateY(12px);transition:opacity .28s cubic-bezier(.2,.8,.2,1),transform .28s cubic-bezier(.2,.8,.2,1);max-width:calc(100vw - 32px)}
.werken-melding.aan{opacity:1;transform:none}
.wm-link{display:flex;flex-direction:column;color:#fff;text-decoration:none;padding:2px 6px 2px 14px;position:relative}
.wm-link::before{content:'';position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#4fb3ff;box-shadow:0 0 0 4px rgba(79,179,255,.22)}
.wm-link b{font:700 15px/1.2 var(--kop);letter-spacing:.01em}
.wm-sub{font-size:12px;color:#cfe0f0}
.wm-link:hover b{text-decoration:underline}
.wm-sluit{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:18px;line-height:1;cursor:pointer}
.wm-sluit:hover,.wm-sluit:focus-visible{background:rgba(255,255,255,.25)}
@media (max-width:520px){.werken-melding{right:16px;bottom:10px;padding:4px 4px 4px 16px}.wm-link b{font-size:14px}}
@media (prefers-reduced-motion:reduce){.werken-melding{transform:none;transition:opacity .15s}}
@media print{.werken-melding{display:none!important}}
/* v0.198 (Stefan 23-10): bovenaan de home geen blauw vlak meer achter de tekst en de knop; de tekst staat direct op de film.
   Leesbaar door een verloop van donker links naar helder rechts en onderaan, plus een zachte schaduw op de kop. */
.held-balk{background:none;backdrop-filter:none;padding:0}
.held-waas{background:linear-gradient(90deg,rgba(0,26,48,.8) 0%,rgba(0,46,84,.52) 34%,rgba(0,46,84,.12) 62%,rgba(0,46,84,0) 80%),linear-gradient(180deg,rgba(0,46,84,0) 45%,rgba(0,32,60,.5) 100%)}
.held-tekst h1,.held-tekst .kicker{text-shadow:0 2px 18px rgba(0,20,40,.45)}
@media (max-width:640px){
  .held-balk{background:none;padding:0}
  .held-waas{background:linear-gradient(180deg,rgba(0,46,84,.1) 0%,rgba(0,32,60,.35) 38%,rgba(0,26,48,.86) 100%)}
}
/* v0.198 (Stefan 23-10): "Over Van Thiel United" boven de redenen is een kopje in de kicker-stijl (geen grote titel, geen streepje) */
.wb-redenen h2.kicker{font:600 13px/1.3 var(--tekst);letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin:0 0 6px;max-width:none}
/* v0.199 (Stefan 23-10): Tube-Lock-intro met de knoppen onder de tekst; de regel over ondertitels klein onder de filmtekst */
.voordeel-intro .tweeluik-tekst{flex-direction:column;align-items:flex-start;justify-content:center}
.voordeel-intro .tweeluik-tekst .knoppen{margin:22px 0 0}
.film-cc{font-size:13px;line-height:1.5;color:#94cfff;margin:10px 0 0}
.film-cc-ico{display:inline-block;min-width:22px;padding:0 5px;border:1px solid rgba(148,207,255,.55);border-radius:4px;font:700 12px/18px var(--tekst);text-align:center;color:#fff;vertical-align:1px}
/* v0.200 (Stefan 23-10): de knoppen in de kop van Werken bij even breed en hoog (basisregel knoppen); de iconen rechts in de
   kop dichter bij elkaar */
@media (min-width:641px){.wb-kop .knoppen .knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:210px;height:50px;padding-top:0;padding-bottom:0;box-sizing:border-box}}
@media (min-width:1101px){.rechts{gap:6px}.rechts .knop-contact{margin-right:10px}.rechts .taal{margin-left:4px}
/* v0.211: tussen 1101 en 1279 px past de taalnaam niet naast het volle menu (viel rechts buiten beeld); alleen de vlag, zoals in de shop. De naam staat in aria-label */
@media (min-width:1101px) and (max-width:1279px){.rechts .taal span{display:none}}}
/* v0.200 (Stefan 23-10): vacature — "Solliciteer direct" en "Bekijk de film" even breed en hoog; de deelknoppen onderling
   even breed (smaller dan de hoofdknop); op de telefoon alleen de iconen, zoals naast "In het kort" */
@media (min-width:641px){
  .wb-vac-kop .knoppen .knop{display:inline-flex;align-items:center;justify-content:center;min-width:210px;height:50px;padding-top:0;padding-bottom:0;box-sizing:border-box}
  .wb-vac-kop .wb-deel:not(.compact)>a,.wb-vac-kop .wb-deel:not(.compact)>button{width:152px;padding:0 10px}
}
@media (max-width:640px){
  .wb-vac-kop .wb-deel:not(.compact){gap:6px}
  .wb-vac-kop .wb-deel:not(.compact)>a,.wb-vac-kop .wb-deel:not(.compact)>button{width:44px;height:44px;padding:0}
  .wb-vac-kop .wb-deel:not(.compact)>a>span:not(.thiel-ui-icon),.wb-vac-kop .wb-deel:not(.compact)>button>span:not(.thiel-ui-icon){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:640px){.wb-kop .knoppen .knop{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:48px;box-sizing:border-box}}   /* v0.200: op de telefoon even breed en hoog */
/* v0.200 (Stefan 23-10): meer blauwe overlay over de foto van Werken bij, net als de andere paginakoppen (ook rechts en op de telefoon) */
.wb-kop::before{background:linear-gradient(90deg,rgba(0,32,60,.94) 0%,rgba(0,46,84,.82) 36%,rgba(0,58,107,.58) 68%,rgba(0,58,107,.46) 100%),linear-gradient(0deg,rgba(0,32,60,.5),rgba(0,32,60,0) 45%)}
@media (max-width:640px){.wb-kop::before{background:linear-gradient(180deg,rgba(0,46,84,.5) 0%,rgba(0,46,84,.45) 55%,rgba(0,32,60,.9) 100%)}}
/* v0.200 (Stefan 23-10): home op desktop rustiger — de kop op twee regels (na de komma), geen knop in de held (op de
   telefoon blijft die), meer lucht boven en onder het calculatorblok */
.br-desktop{display:none}
@media (min-width:1101px){
  .held-tekst h1{max-width:none}.held-tekst .br-desktop{display:inline}
  .held-tekst .knoppen{display:none}
  .calc-blok .innovatie-rooster{padding-top:56px;padding-bottom:56px}   /* iets meer lucht (was 36/32), maar de calculator blijft meteen in beeld (Stefan 23-10) */
}
/* v0.210 (W39, WCAG 2.2 AA): kopjes op lichtblauwe vlakken iets donkerder blauw (4,8:1 i.p.v. 4,4:1); de Feliro-link in de
   voettekst ook zonder kleur herkenbaar als link. */
.tweeluik-beeld .kicker,.wb-intro .kicker{color:#006bc2}
.voet-feliro a{text-decoration:underline;text-underline-offset:2px}
/* v0.210: de foto in het uitschuifmenu binnen het paneel met navy mengen (background-blend-mode) in plaats van met de pagina
   erachter (mix-blend-mode): Safari toonde hem soms grijs, de app blauw. Zelfde kleur, zonder die afhankelijkheid. */
.menu-mobiel::before,.ocv::before{background:url(/assets/menu-achtergrond.webp) 25% center/cover no-repeat,var(--navy);background-blend-mode:multiply;mix-blend-mode:normal;opacity:.5}
body.menu-open .werken-melding{visibility:hidden;opacity:0;pointer-events:none}   /* v0.210: de vacaturemelding wijkt zolang het menu open is */
/* v0.209 (Stefan 24-10): mobiel menu compacter, submenu's als uitklapper (pijltje rechts; scripts/site.js) */
.ocv-nav a{padding:6px 0}.ocv-nav .sub a{padding:4px 0 4px 16px}
.ocv-rij{display:flex;align-items:center}.ocv-rij>a{flex:1;min-width:0}
.ocv-nav .ocv-open{flex:none;width:96px;height:34px;margin-right:-12px;padding:0 24px 0 0;background:transparent;border:0;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:flex-end}   /* v0.226 (Stefan 25-10): breder tikvlak (96 px), zodat net naast het pijltje tikken ook uitklapt en niet naar de pagina gaat */
@media (max-width:380px){.ocv-nav .ocv-open{width:64px;padding-right:16px}}   /* v0.255: op een smalle telefoon past "Assortiment" anders niet naast het pijltje */
.ocv-open::before{content:'';width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s cubic-bezier(.4,0,.2,1)}
.ocv-open[aria-expanded=true]::before{transform:translateY(2px) rotate(-135deg)}
.ocv-open:hover,.ocv-open:focus-visible{color:#94cfff}
.ocv-nav .sub[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.ocv-open::before{transition:none}}
/* v0.212 (Stefan 24-10): op de telefoon en in de app geen kleurverloop in de kop, zodat statusbalk, kop en paginakop één
   navy vlak zijn (het verloop blijft op desktop). Het doorveren van iOS bovenaan toont de kleur van html: ook navy, geen wit randje. */
html{background:var(--navy)}
@media (max-width:1100px){
  .kop,body.met-held .kop.klein,body.menu-open .kop,body.met-paginakop .kop.klein,body.met-paginakop.menu-open .kop{background-image:none}
}
/* v0.213 (Stefan 24-10): eigen Van Thiel-iconen (duotone svg, geen cirkel) vóór de titel, verticaal op het midden van het
   titelblok; 48 px, op de telefoon 44 px. Kwaliteit en Werken bij (waarom). Regels uit het iconenpakket (plaatsing.css). */
.wb-waarom .wb-punt h3{display:flex;align-items:center;gap:12px}
.wb-waarom .wb-punt h3>.wb-titel{display:block;min-width:0}
.wb-waarom .wb-ico.thiel-content-icon,.usp-raster.thiel-content-icons .usp-ico.thiel-content-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;height:48px;padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;line-height:0}
.wb-waarom .wb-ico.thiel-content-icon>img,.usp-raster.thiel-content-icons .usp-ico.thiel-content-icon>img{display:block;width:48px;height:48px;max-width:none;margin:0;border:0;box-shadow:none;object-fit:contain}
.usp-raster.thiel-content-icons .usp-kop{grid-template-columns:48px minmax(0,1fr);align-items:center;gap:12px}
@media (max-width:640px){
  .wb-waarom .wb-ico.thiel-content-icon,.usp-raster.thiel-content-icons .usp-ico.thiel-content-icon{flex-basis:44px;width:44px;height:44px}
  .wb-waarom .wb-ico.thiel-content-icon>img,.usp-raster.thiel-content-icons .usp-ico.thiel-content-icon>img{width:44px;height:44px}
  .usp-raster.thiel-content-icons .usp-kop{grid-template-columns:44px minmax(0,1fr)}
}
/* v0.213: Kwaliteit in één blok. Desktop: de keten als kolomkop boven de vijf kaarten (zelfde vijf kolommen en tussenruimte).
   v0.214 (Stefan 24-10): ook op tablet en telefoon weer de keten 1–5 in de vorige opmaak, met het oplichten, boven de kaarten;
   de ring om de nummers in de kleur van de sectie (lichtblauw), ook tijdens de animatie (--keten-ring). */
.kwaliteit-borg{--keten-ring:var(--lblue)}
.kwaliteit-borg .sectie-kop h2{max-width:none}
.kwaliteit-borg .keten{margin:6px 0 30px}
@media (min-width:1240px){
  .kwaliteit-borg .usp-raster{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
  .kwaliteit-borg .keten{display:grid;gap:20px;margin:6px 0 30px}
  .kwaliteit-borg .keten li{padding:0 6px}
  .kwaliteit-borg .keten li span:last-child{font-size:13.5px}
}
/* v0.214 (Stefan 24-10): het nummer in de keten is een link naar de kaart met dezelfde stap; de kaart landt onder de vaste kop.
   Zolang de kaarten niet als kolommen onder de keten staan (< 1240 px), staat het nummer ook vóór de kaarttitel. */
a.keten-nr{display:block;text-decoration:none;cursor:pointer}a.keten-nr:hover,a.keten-nr:focus-visible{color:#fff;background:var(--navy)}
.kwaliteit-borg .usp-kaart{scroll-margin-top:calc(var(--kop-h,92px) + 16px)}
.usp-nr{display:inline-grid;place-items:center;width:24px;height:24px;margin:0 8px 0 0;border-radius:50%;background:var(--blue);color:#fff;font:700 13px/1 var(--kop);vertical-align:2px}
@media (min-width:1240px){.usp-nr{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Stefan 24-10: de overlay volgt de foto zelf, niet een berekende viewporthoogte.
   De foto blijft op mobiel in normale flow; beide delen delen één gridcel. */
@media(max-width:640px){
 .wb-kop{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
 .wb-kop-foto{grid-area:1/1;align-self:stretch}
 .wb-kop::before{grid-area:1/1;position:relative;inset:auto;width:100%;height:auto;align-self:stretch;z-index:1;pointer-events:none}
 .wb-kop>.in{grid-area:2/1;min-width:0}
}
/* v0.224 (Stefan 25-10): "Waarom Tube-Lock®" in het uitschuifmenu op één regel, ook op 320 en 360 px (was 196 px breed,
   het label is 145 px en had 142 tot 144 px). Vanaf ± 371 px verandert er niets. */
.menu-mobiel{min-width:204px}

/* v0.225 (Stefan 25-10): op een telefoon de achtergrondfoto van een fotostrook in 960 px (--foto-klein, tools/site-beelden.mjs)
   in plaats van 1920 px: 15 kB in plaats van 65 kB, zonder zichtbaar verschil op een scherm van 390 px. */
@media (max-width:767px){.balkfoto{background-image:var(--foto-klein,var(--foto))}}
/* v0.225 (Stefan 25-10): op een telefoon stond de speel-/pauzeknop rechtsonder over de knop "Bekijk het assortiment" heen; daar
   staat hij nu rechtsboven in het beeld, onder de kop (ook op een aanraakscherm, dus ná het pointer:coarse-blok hierboven). */
@media (max-width:767px){
  .held-pauze{top:10px;bottom:auto;right:10px}
  body.met-held .held-pauze{top:calc(var(--kop-h) + 10px);bottom:auto}
}

/* Gebruikt: onafhankelijke conditiesticker, bestaande merkkleuren. */
table.spec .sticker.gebruikt{background:#0072CE;color:#fff}