:root{
  --blad:#f3f4f1; --ink:#0f1011; --sub:#4f5458; --lijn:#c4c8c6; --raster:#e2e4e0; --maat:#7d858b;
  --las:#ff5a1f; --las-ink:#a83300; --zacht:#ffe9df; --fout:#b3261e;
  --f:"Overpass",system-ui,sans-serif; --m:"Overpass Mono",ui-monospace,monospace;
  --kader:clamp(10px,1.6vw,24px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{background:var(--blad);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.55}
::selection{background:var(--las);color:#fff}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
:focus-visible{outline:3px solid var(--las);outline-offset:3px}
.mock{position:fixed;left:12px;bottom:12px;z-index:50;background:var(--ink);color:#fff;font:600 12px/1.3 var(--f);padding:6px 10px}

/* tekenblad met kader en zones */
.sheet{position:relative;margin:var(--kader);border:2px solid var(--ink);min-height:calc(100vh - 2*var(--kader));overflow-x:clip}
.zones{position:absolute;inset:-2px;pointer-events:none;font:600 11px var(--m);color:var(--maat)}
.zones span{position:absolute}
.binnen{padding:0 clamp(16px,3vw,44px)}

.kop{display:flex;align-items:center;gap:30px;padding:18px 0;border-bottom:1px solid var(--ink)}
.kop nav{display:flex;gap:26px;font-weight:600;font-size:16px}
.kop nav a{text-decoration:none;color:var(--sub)}
.kop nav a:hover{color:var(--ink)}
.kop .tel{margin-left:auto;font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums}

.eerste{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);grid-template-rows:auto 1fr;gap:0 24px;min-height:calc(100vh - 2*var(--kader) - 72px)}
.links{padding:clamp(28px,4vh,56px) 0 24px}
h1{font-weight:800;font-size:clamp(42px,5.4vw,84px);line-height:.98;letter-spacing:-.03em;text-wrap:balance;max-width:11ch}
.lead{margin-top:20px;font-size:clamp(18px,1.4vw,20px);max-width:34ch;color:#25282a}
.legende{margin-top:28px;border-top:2px solid var(--ink);max-width:440px;min-height:112px}
.legende .nr{font:600 13px var(--m);color:var(--las-ink);letter-spacing:.04em;margin-top:12px;display:block}
.legende h2{font-weight:800;font-size:26px;line-height:1.1;margin-top:2px}
.legende p{margin-top:4px;color:var(--sub)}
.endorse{margin-top:18px;font-size:15px;color:var(--sub)}
.endorse b{color:var(--ink)}

.tekening{position:relative;grid-row:1 / span 2;grid-column:2;min-height:520px}
.tekening svg{position:absolute;left:0;right:0;top:40px;width:100%;height:calc(100% - 40px);overflow:hidden}
.links{position:relative;z-index:1}
.voorbeeld{position:absolute;left:0;top:18px;font:600 12px var(--m);color:var(--maat);letter-spacing:.04em}
.pijp{fill:none;stroke:var(--ink);stroke-width:6;stroke-linejoin:miter;stroke-linecap:butt}
.dun{fill:none;stroke:var(--ink);stroke-width:2.5}
.maatlijn{stroke:var(--maat);stroke-width:1.2;fill:none}
.maattekst{font:600 13px var(--m);fill:var(--maat)}
.raster line{stroke:var(--raster);stroke-width:1}
.las circle.dot{fill:var(--ink)}
.bol{cursor:pointer}
.bol circle{fill:var(--blad);stroke:var(--las);stroke-width:2.5;transition:fill 160ms ease}
.bol text{font:700 15px var(--f);fill:var(--las-ink);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.bol line{stroke:var(--las);stroke-width:1.5}
.bol:focus circle,.bol.actief circle{fill:var(--las)}@media (hover:hover) and (pointer:fine){.bol:hover circle{fill:var(--las)}.bol:hover text{fill:#fff}}
.bol:focus text,.bol.actief text{fill:#fff}
.bol:focus{outline:none}
.bol:focus-visible circle{stroke:var(--ink);stroke-width:3}

/* titelblok = aanvraag */
.titelblok{grid-column:2;grid-row:2;align-self:end;justify-self:end;width:min(520px,100%);border-left:2px solid var(--ink);border-top:2px solid var(--ink);background:var(--blad);position:relative;z-index:2;margin-right:calc(-1*clamp(16px,3vw,44px))}
.tb-kop{display:grid;grid-template-columns:1fr auto;border-bottom:2px solid var(--ink)}
.tb-kop div{padding:8px 14px}
.tb-kop div + div{border-left:1px solid var(--ink);font:600 12px var(--m);color:var(--sub);display:flex;align-items:center}
.tb-kop h2{font-weight:900;font-size:20px;letter-spacing:.06em;text-transform:uppercase}
.rij{display:grid;grid-template-columns:1fr 1fr}
.cel{border-bottom:1px solid var(--ink);padding:6px 14px 4px}
.rij .cel + .cel{border-left:1px solid var(--ink)}
.cel label{display:block;font:600 11px var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--sub)}
.cel input,.cel textarea{width:100%;border:0;background:transparent;font:500 17px/1.4 var(--f);color:var(--ink);padding:3px 0 2px;outline:none;caret-color:var(--las)}
.cel textarea{resize:vertical;min-height:48px}
.cel input::placeholder,.cel textarea::placeholder{color:#6e7478}
.cel:focus-within{background:var(--zacht)}
.cel.fout{background:#fbe9e7}
.upload{display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--ink);padding:10px 14px;cursor:pointer}
.upload:hover,.upload.over{background:var(--zacht)}
.upload input{position:absolute;width:1px;height:1px;opacity:0}
.upload svg{flex:none}
.upload strong{display:block;font-weight:700}
.upload span{font-size:13.5px;color:var(--sub)}
.bestanden{list-style:none;font:500 13px var(--m)}
.bestanden li{padding:4px 14px;border-bottom:1px dotted var(--lijn)}
.meldingen{font-size:14px}
.meldingen p{padding:6px 14px;border-bottom:1px solid var(--lijn);display:flex;gap:10px}
.meldingen b{font:600 12px var(--m);text-transform:uppercase;min-width:8em;padding-top:2px}
.meldingen .is-fout b{color:var(--fout)}
.meldingen .is-ok b{color:var(--las-ink)}
.tb-voet{display:grid;grid-template-columns:1fr auto}
.tb-voet small{padding:10px 14px;font-size:13px;color:var(--sub);border-right:1px solid var(--ink)}
button{font:inherit;cursor:pointer}
.knop{background:var(--ink);color:#fff;border:0;padding:14px 22px;font-weight:800;font-size:16px;letter-spacing:.03em}
@media (hover:hover) and (pointer:fine){.knop:hover{background:var(--las);color:var(--ink)}}
.knop:disabled{background:#8b9195;cursor:wait}

/* onder de vouw */
.deel{padding:clamp(48px,7vw,96px) 0 0}
.deelkop{display:flex;justify-content:space-between;align-items:end;gap:24px;border-bottom:2px solid var(--ink);padding-bottom:12px}
.deelkop h2{font-weight:800;font-size:clamp(30px,3.4vw,48px);line-height:1;letter-spacing:-.02em}
.deelkop p{max-width:44ch;color:var(--sub)}
table{width:100%;border-collapse:collapse;margin-top:0}
th.thumbkop{width:120px}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}@media (max-width:960px){th.thumbkop{display:none}}
th{font:600 12px var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--sub);text-align:left;padding:10px 12px;border-bottom:1px solid var(--ink)}
td{padding:16px 12px;border-bottom:1px solid var(--lijn);vertical-align:top}
td.pos{width:70px}
td.pos span{display:inline-grid;place-items:center;width:34px;height:34px;border:2px solid var(--las);border-radius:50%;font-weight:800;color:var(--las-ink);transition:background .2s,color .2s}
tr.actief td.pos span{background:var(--las);color:#fff}@media (hover:hover) and (pointer:fine){tr:hover td.pos span{background:var(--las);color:#fff}}
td.wat{font-weight:800;font-size:20px;width:200px}
td.doc{font:500 14px var(--m);color:var(--sub);width:220px}
.beeld{margin-top:28px;aspect-ratio:21/8;background:repeating-linear-gradient(60deg,#e5e7e3 0 1px,transparent 1px 22px),repeating-linear-gradient(-60deg,#e5e7e3 0 1px,transparent 1px 22px),#eceeea;display:flex;align-items:end;justify-content:space-between;padding:10px 12px;font:600 12px var(--m);color:var(--sub)}
.spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-left:1px solid var(--ink);margin-top:0}
.spec > div{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:16px 16px 18px}
.spec small{display:block;font:600 11px var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--sub)}
.spec strong{display:block;font-weight:800;font-size:24px;margin-top:4px;letter-spacing:-.01em}
.spec p{font-size:14.5px;color:var(--sub);margin-top:4px}
.notes{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:clamp(24px,4vw,64px);padding-bottom:clamp(40px,6vw,80px)}
.notes ol{list-style:none;counter-reset:n;margin-top:18px}
.notes li{counter-increment:n;display:grid;grid-template-columns:36px 1fr;padding:12px 0;border-bottom:1px solid var(--lijn);max-width:60ch}
.notes li::before{content:counter(n) ".";font:600 14px var(--m);color:var(--sub);padding-top:2px}
.notes h3{font:600 12px var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--sub);margin-top:22px}
.contactblok{border:2px solid var(--ink);align-self:start;margin-top:18px}
.contactblok div{padding:10px 14px;border-bottom:1px solid var(--ink)}
.contactblok div:last-child{border-bottom:0}
.contactblok small{display:block;font:600 11px var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--sub)}
.contactblok strong{font-weight:700}
.voet{display:flex;justify-content:space-between;align-items:end;gap:20px;border-top:1px solid var(--ink);padding:14px 0 16px;font-size:14px;color:var(--sub)}
.credit{font-size:12px;color:#7d858b;text-decoration:none}
.credit:hover{color:var(--ink)}


.detail{position:absolute;left:0;bottom:24px;width:min(300px,34%);border:2px solid var(--ink);background:var(--blad);z-index:1}
.detail img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.detail figcaption{display:flex;justify-content:space-between;gap:8px;border-top:2px solid var(--ink);padding:6px 10px;font:600 11px var(--m);letter-spacing:.04em;color:var(--sub)}
.detail figcaption b{color:var(--ink)}
td.thumb{width:120px;padding:10px 12px}td.thumb img{display:block;width:96px;height:64px;object-fit:cover;border:1px solid var(--ink)}
.grootbeeld{position:relative;margin-top:28px;border:2px solid var(--ink)}
.grootbeeld img{display:block;width:100%;aspect-ratio:21/8;object-fit:cover}
.grootbeeld figcaption{display:flex;justify-content:space-between;border-top:2px solid var(--ink);padding:8px 12px;font:600 12px var(--m);color:var(--sub)}
.detail-b{border:2px solid var(--ink);margin-top:18px}.detail-b img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.detail-b figcaption{border-top:2px solid var(--ink);padding:6px 10px;font:600 11px var(--m);color:var(--sub);display:flex;justify-content:space-between}
@media (max-width:960px){.detail{position:relative;left:auto;bottom:auto;width:100%;margin-top:12px}td.thumb{display:none}}
@media (min-width:961px){html.shot .sheet{min-height:0}html.shot .eerste{min-height:828px}}
html.shot .mock{display:none}
@media (max-width:960px){
  .deelkop{flex-direction:column;align-items:flex-start;gap:8px}
  .beeld{flex-wrap:wrap;gap:4px 12px}
  .bol circle{r:22px}.bol text{font-size:19px}
  .zones,.kop nav{display:none}
  .eerste{grid-template-columns:1fr;grid-template-rows:auto;min-height:0}
  .tekening{grid-column:1;grid-row:auto;min-height:0;aspect-ratio:1.25}
  .titelblok{grid-column:1;grid-row:auto;justify-self:stretch;width:auto;margin:20px calc(-1*clamp(16px,3vw,44px)) 0;border-left:0}
  .legende{min-height:0}
  .spec{grid-template-columns:1fr 1fr}
  .notes{grid-template-columns:1fr}
  td.doc{display:none}
  td.wat{width:auto}
}
@media (max-width:520px){
  .rij{grid-template-columns:1fr}.rij .cel + .cel{border-left:0}
  .spec{grid-template-columns:1fr}
  td{padding:12px 8px}
  td.wat{font-size:18px}
}

:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.77,0,.175,1)}
html{-webkit-tap-highlight-color:transparent}
p,li,dd{text-wrap:pretty}
a[href^="tel:"]{font-variant-numeric:tabular-nums;white-space:nowrap}
/* drukfeedback */
.knop,button[type=submit]{transition:transform 160ms var(--ease-out),background-color 200ms ease,color 200ms ease,box-shadow 200ms ease}
.knop:active,button[type=submit]:active{transform:scale(.97)}
.knop .pijl{transition:transform 200ms var(--ease-out)}
/* knoplabel bij versturen */
button[type=submit] .label{display:inline-block;transition:filter 200ms ease,opacity 200ms ease}
button[type=submit].bezig .label{filter:blur(2px);opacity:.7}
/* meldingen komen zacht binnen */
.meldingen p,.werkbon p{transition:opacity 200ms ease,transform 240ms var(--ease-out)}
@starting-style{.meldingen p,.werkbon p{opacity:0;transform:translateY(-4px)}}
/* onthullen bij scrollen: inhoud blijft zichtbaar zonder JS */
html.js .r{opacity:0;transform:translateY(14px);transition:opacity 560ms var(--ease-out),transform 560ms var(--ease-out);transition-delay:var(--d,0ms)}
html.js .r.in{opacity:1;transform:none}
html.shot .r{opacity:1!important;transform:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){html.js .r{transform:none}}

/* v13: diensten en tabbladen van de klant */
h1{max-width:14ch}
.dienstentabel td.wat{width:240px}.dienstentabel td.wat small{display:block;font:500 13px var(--m);color:var(--las-ink);margin-top:4px;letter-spacing:.02em}
.dienstentabel td.pos span{border-color:var(--ink);color:var(--ink);font-size:13px}
.dienstentabel ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:6px;font:500 14px var(--m);color:var(--sub)}
.notes li[id]{scroll-margin-top:40px}
@media (max-width:760px){.dienstentabel td.wat{width:auto}.dienstentabel tr{display:grid;grid-template-columns:56px 1fr}.dienstentabel td:last-child{grid-column:2}.dienstentabel thead{display:none}}
/* tekeningenset met meerdere bladen */
.kop{gap:24px}.logo{display:block;line-height:0}
.hoofdmenu{display:flex;gap:22px;font-weight:600;font-size:16px}
.hoofdmenu a{text-decoration:none;color:var(--sub);padding:6px 0;border-bottom:2px solid transparent;transition:color 160ms ease,border-color 160ms ease}
.hoofdmenu a small{font:600 11px var(--m);color:var(--maat);margin-right:6px;letter-spacing:.04em}
@media (hover:hover) and (pointer:fine){.hoofdmenu a:hover{color:var(--ink)}}
.hoofdmenu a[aria-current]{color:var(--ink);border-color:var(--las)}.hoofdmenu a[aria-current] small{color:var(--las-ink)}
.hoofdmenu .gsm{display:none}
.menuknop{display:none;align-items:center;gap:8px;background:none;border:2px solid var(--ink);color:var(--ink);padding:6px 10px;font:600 12px var(--m);letter-spacing:.06em;text-transform:uppercase}
.menuknop:active{transform:scale(.97)}.menuknop{transition:transform 160ms var(--ease-out)}
.ham path{stroke:currentColor;stroke-width:2.2;transform-box:fill-box;transform-origin:center;transition:transform 200ms var(--ease-out)}
body.menu-open .ham .l1{transform:translateY(4px) rotate(45deg)}body.menu-open .ham .l3{transform:translateY(-4px) rotate(-45deg)}
.blad-nr{display:block;font:600 12px var(--m);letter-spacing:.06em;color:var(--las-ink)}
.links .blad-nr{margin-bottom:14px}
.meer{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:700;text-decoration:none;border-bottom:2px solid var(--las);padding-bottom:2px}
.meer .pijl,.dr-pijl .pijl{transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.meer:hover .pijl,.dienstrooster a:hover .dr-pijl .pijl{transform:translateX(3px)}}
.knop{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
/* paginakop */
.pkop{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:28px clamp(24px,4vw,64px);align-items:end;padding:clamp(32px,5vw,64px) 0 0}
.pkop h1{margin-top:12px;max-width:12ch}.pkop .lead{max-width:48ch}
.pkop-foto{margin-top:0}.pkop-foto img{aspect-ratio:16/10}
/* home: diensten als rooster met pictogrammen */
.dienstrooster{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-left:1px solid var(--ink)}
.dienstrooster li{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.dienstrooster a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;transition:background-color 200ms ease}
@media (hover:hover) and (pointer:fine){.dienstrooster a:hover{background:#fff}}
.dienstrooster a:active{background:var(--zacht)}
.fig-klein{display:block;aspect-ratio:4/3;border-bottom:1px solid var(--lijn)}.fig-klein svg{display:block;width:100%;height:100%}
.dr-tekst{display:block;padding:14px 16px 4px;flex:1}.dr-tekst small{display:block;font:600 11px var(--m);color:var(--las-ink);letter-spacing:.06em}
.dr-tekst b{display:block;font-weight:800;font-size:21px;line-height:1.15;margin-top:4px}.dr-tekst span{display:block;color:var(--sub);font-size:14.5px;margin-top:6px}
.dr-pijl{display:block;padding:8px 16px 16px;color:var(--las-ink)}
/* pictogrammen */
.vlak{stroke:none}.breuk{fill:none;stroke:var(--las);stroke-width:2.5;stroke-linejoin:bevel}
.straal{fill:none;stroke:var(--las);stroke-width:1.4;stroke-dasharray:5 5}
.vonk{fill:none;stroke:var(--las);stroke-width:2.5;stroke-linecap:round}
.stip-las{fill:var(--las);stroke:var(--blad);stroke-width:2.5}
/* diensten */
.intro-rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(24px,4vw,64px);border-bottom:2px solid var(--ink);padding-bottom:28px}
.intro-rij h2{font-weight:800;font-size:clamp(30px,3.4vw,48px);line-height:1.02;letter-spacing:-.02em}
.intro-rij p+p{margin-top:12px;color:var(--sub)}
.inhoud{display:flex;flex-wrap:wrap;gap:8px;padding-top:18px}
.inhoud a{display:inline-flex;gap:8px;align-items:baseline;border:1px solid var(--ink);padding:7px 12px;text-decoration:none;font-weight:700;transition:background-color 160ms ease,color 160ms ease,transform 160ms var(--ease-out)}
.inhoud a small{font:600 11px var(--m);color:var(--las-ink)}
@media (hover:hover) and (pointer:fine){.inhoud a:hover{background:var(--ink);color:#fff}.inhoud a:hover small{color:#ffb595}}
.inhoud a:active{transform:scale(.97)}
.dienst{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px clamp(28px,5vw,80px);align-items:center;padding:clamp(48px,6vw,88px) 0;border-bottom:1px solid var(--ink);scroll-margin-top:24px}
.dienst:nth-of-type(odd) .fig{order:2}
.fig{position:relative;border:2px solid var(--ink);background:#f7f8f5;aspect-ratio:4/3;margin:0}
.fig > svg{position:absolute;inset:0;width:100%;height:100%}
.figlabel{position:absolute;left:10px;top:8px;font:600 11px var(--m);letter-spacing:.06em;color:var(--maat)}
.fig .detail{left:auto;right:-2px;bottom:-2px;width:min(220px,36%)}
.bolnr{display:inline-grid;place-items:center;width:42px;height:42px;border:2px solid var(--ink);border-radius:50%;font-weight:800;font-size:14px}
.dienst h2{font-weight:800;font-size:clamp(34px,4vw,60px);line-height:1;letter-spacing:-.025em;margin-top:16px}
.dienst .sub{font:600 14px var(--m);color:var(--las-ink);margin-top:12px;letter-spacing:.02em}
.dienst .kort{margin-top:12px;max-width:44ch;color:#25282a;font-size:18px}
.onderdelen{list-style:none;margin-top:22px;border-top:2px solid var(--ink);max-width:520px}
.onderdelen li{display:grid;grid-template-columns:44px 1fr;align-items:center;padding:9px 0;border-bottom:1px solid var(--lijn);font-weight:600}
.onderdelen li > span{font:600 13px var(--m);color:var(--maat)}
.onderdelen.lassen li > span{display:inline-grid;place-items:center;width:28px;height:28px;border:2px solid var(--las);border-radius:50%;font:800 13px var(--f);color:var(--las-ink)}
/* kwaliteit */
.spectabel td.norm{font-weight:800;font-size:19px;width:200px}
.spectabel td.pos span{border-color:var(--ink);color:var(--ink);font-size:13px}
.spectabel td.status{width:150px;font:600 13px var(--m)}.spectabel td.status i{display:block;height:0;border-top:3px solid var(--ink);margin-top:8px;width:100px}
.spec-mat{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:24px;border-top:1px solid var(--ink)}
.lasrij{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-left:1px solid var(--ink)}
.lasrij li{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:18px 16px 20px}
.las-nr{display:inline-grid;place-items:center;width:34px;height:34px;border:2px solid var(--las);border-radius:50%;font-weight:800;color:var(--las-ink)}
.lasrij b{display:block;font-weight:800;font-size:21px;margin-top:12px}.lasrij small{display:block;font:600 12px var(--m);color:var(--sub);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
/* over ons */
.legendarooster{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-left:1px solid var(--ink)}
.legendarooster li{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:20px 18px 26px}
.legendarooster small{display:inline-grid;place-items:center;width:30px;height:30px;border:2px solid var(--ink);font:600 13px var(--m)}
.legendarooster b{display:block;font-weight:800;font-size:clamp(24px,2.4vw,34px);line-height:1.05;letter-spacing:-.02em;margin-top:18px}
/* machinepark */
.leeg-tabel td{height:58px}.leeg-tabel td.pos span{border-color:var(--maat);color:var(--maat);font-size:13px}.leeg-tabel tbody tr:not(:first-child) td{border-bottom-style:dashed}
/* jobs */
.jobs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);padding-top:28px}
.job .detail-b{margin-top:0}.job h2{font-weight:800;font-size:clamp(30px,3vw,44px);letter-spacing:-.02em;margin-top:8px}.job .blad-nr{margin-top:20px}.job p{color:var(--sub);margin-top:8px}
/* contact */
.contactgrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:clamp(24px,4vw,56px);align-items:start}
.titelblok.los{grid-column:auto;grid-row:auto;justify-self:stretch;align-self:start;width:auto;margin:0;border:2px solid var(--ink)}
.contactgrid .contactblok{margin-top:0}
/* cta */
.cta-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end;border:2px solid var(--ink);padding:clamp(22px,3vw,40px);background:#fff}
.cta h2{font-weight:800;font-size:clamp(28px,3vw,44px);line-height:1.05;letter-spacing:-.02em;margin-top:8px}.cta p{color:var(--sub);margin-top:10px;max-width:56ch}
.cta-acties{display:flex;flex-direction:column;align-items:flex-end;gap:12px}.tel-groot{font-weight:800;font-size:24px;text-decoration:none}
/* titelblok als voet */
.titelvoet{display:grid;grid-template-columns:1.5fr 1fr 1.1fr 1fr .6fr;border:2px solid var(--ink);border-bottom:0;margin:clamp(56px,8vw,112px) calc(-1*clamp(16px,3vw,44px)) 0;font-size:14.5px}
.titelvoet > div{padding:10px 14px 12px;border-left:1px solid var(--ink)}.titelvoet > div:first-child{border-left:0}
.titelvoet small{display:block;font:600 11px var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--sub);margin-bottom:2px}
.titelvoet a{text-decoration:none}.tv-blad strong{font-size:22px;font-weight:900}
.voet-onder{display:flex;justify-content:space-between;gap:16px;border-top:2px solid var(--ink);margin:0 calc(-1*clamp(16px,3vw,44px));padding:10px clamp(16px,3vw,44px) 12px;font-size:12.5px;color:var(--sub)}
@media (max-width:1180px){.hoofdmenu a small{display:none}.hoofdmenu{gap:18px}.dienstrooster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:960px){
  .menuknop{display:inline-flex}.kop .tel{margin-left:auto}
  .kop{position:relative}
  .kop .hoofdmenu{display:flex;position:fixed;z-index:60;left:var(--kader);right:var(--kader);top:76px;bottom:var(--kader);flex-direction:column;gap:0;background:var(--blad);border:2px solid var(--ink);padding:10px 20px;font-size:24px;font-weight:800;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 150ms ease,transform 150ms var(--ease-out),visibility 0s 150ms}
  body.menu-open .kop .hoofdmenu{opacity:1;visibility:visible;transform:none;transition:opacity 200ms ease,transform 240ms var(--ease-out)}
  body.menu-open{overflow:hidden}
  .hoofdmenu a{color:var(--ink);border-bottom:1px solid var(--lijn);padding:14px 0}.hoofdmenu a small{display:inline;font-size:12px}
  .hoofdmenu a[aria-current]{border-bottom-color:var(--las)}
  .pkop,.intro-rij,.dienst,.jobs,.contactgrid,.cta-in{grid-template-columns:1fr}
  .dienst:nth-of-type(odd) .fig{order:0}
  .fig .detail{position:absolute;width:min(200px,42%)}
  .cta-acties{align-items:flex-start}
  .dienstrooster{grid-template-columns:1fr 1fr}
  .legendarooster,.lasrij{grid-template-columns:1fr 1fr}
  .titelvoet{grid-template-columns:1fr 1fr}.titelvoet > div{border-top:1px solid var(--ink)}.titelvoet > div:nth-child(odd){border-left:0}.titelvoet .tv-merk{grid-column:1/-1;border-top:0}
  .spectabel td.norm{width:auto}.spectabel thead{display:none}.spectabel tr{display:grid;grid-template-columns:56px 1fr;border-bottom:1px solid var(--lijn)}.spectabel td{border:0;padding:6px 8px}.spectabel td.pos{grid-row:span 4;padding-top:14px}.spectabel td.wat{padding-top:14px}.spectabel td.status{width:auto;padding-bottom:14px}
}
@media (max-width:960px){.kop .hoofdmenu .gsm{display:block}}
@media (max-width:560px){.kop .tel{display:none}.menuknop{margin-left:auto}}
@media (max-width:520px){.dienstrooster{grid-template-columns:1fr}.fig-klein{aspect-ratio:16/9}.legendarooster,.lasrij{grid-template-columns:1fr}.titelvoet{grid-template-columns:1fr}.titelvoet > div{border-left:0!important}.voet-onder{flex-direction:column}.fig .detail{display:none}}
/* gevoel: CAD-vizier, stroming in de leiding, bladwissel */

@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-uit 160ms ease both}
::view-transition-new(root){animation:vt-in 340ms cubic-bezier(.23,1,.32,1) both}
@keyframes vt-uit{to{opacity:0;transform:scale(.992)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
.vizier{position:absolute;inset:40px 0 0;pointer-events:none;opacity:0;transition:opacity 160ms ease;z-index:1}
.tekening.richt .vizier{opacity:1}
.vizier i{position:absolute;left:0;top:0;background:var(--las);opacity:.55}
.vizier .vh{width:100%;height:1px}.vizier .vv{width:1px;height:100%}
.vizier .vk{width:22px;height:22px;border:1.5px solid var(--las);background:transparent;opacity:.9}
.vizier b{position:absolute;left:0;top:0;font:600 11px var(--m);letter-spacing:.04em;color:var(--las-ink);background:rgba(243,244,241,.92);padding:2px 6px;white-space:nowrap}
.tekening.richt{cursor:crosshair}
.stroom{fill:none;stroke:var(--las);stroke-width:2.2;stroke-dasharray:2 18;stroke-linecap:round;opacity:0;animation:stroom 2.6s linear infinite;pointer-events:none}
.stroom.aan{opacity:.8;transition:opacity 600ms ease}
@keyframes stroom{to{stroke-dashoffset:-40}}
@media (prefers-reduced-motion:reduce){.stroom{display:none}}
.titelvoet .tv-blad strong{display:inline-block}

/* laag 2: lijnen die zich tekenen */
.deelkop{position:relative;border-bottom-color:transparent}
.deelkop::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--ink);transform-origin:left;transform:scaleX(0);transition:transform 1000ms var(--ease-io)}
.deelkop.in::after,html.shot .deelkop::after,html:not(.js) .deelkop::after{transform:none}
.spectabel td.status i{transform-origin:left;transform:scaleX(0);transition:transform 900ms var(--ease-out)}
.spectabel.in td.status i,html.shot .spectabel td.status i{transform:none}