/* lbi.tdgdigital.com — "We look inside the steel." Instrument-grafiet, A-scan-groen, defect-oranje. */
@font-face{font-family:"Mona";src:url(/fonts/mona.woff2) format("woff2");font-weight:200 900;font-stretch:75% 125%;font-display:swap}
@font-face{font-family:"Azeret";src:url(/fonts/azeret.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --nacht:#141618;--staal:#1f2225;--rand:#34383d;--grafiet:#4d4f53;--papier:#f2f2ee;--wit:#fff;--inkt:#17191b;--grijs:#5d6166;
  --groen:#8fbf21;--groen-t:#4c7409;--oranje:#eb6309;--oranje-t:#b84a00;--licht-t:#c9ccc6;
  --g:clamp(1rem,4vw,3.5rem);--kopH:4.5rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:5rem}
@media (min-width:1440px){html{font-size:clamp(100%,1.1111vw,200%)}:where(button,input,select,textarea){font-size:.8333rem}}
body{margin:0;background:var(--nacht);color:var(--inkt);font-family:"Mona",system-ui,sans-serif;font-stretch:100%;line-height:1.55;font-size:1.0625rem}
::selection{background:var(--groen);color:var(--inkt)}
img,video,svg,canvas{display:block;max-width:100%}
img{height:auto}
[hidden]{display:none!important}
p,li,dd{hyphens:auto;overflow-wrap:break-word}
h1,h2,h3{hyphens:manual;overflow-wrap:normal;text-wrap:balance;font-stretch:75%;font-weight:800;line-height:.95;letter-spacing:-.01em;margin:0 0 .4em}
h1{font-size:clamp(3rem,9vw,7.5rem)}
h2{font-size:clamp(2.4rem,6vw,5rem)}
h3{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1}
.mono{font-family:"Azeret",ui-monospace,monospace;font-stretch:normal}
.label{font-family:"Azeret",ui-monospace,monospace;font-size:.8rem;letter-spacing:.04em;margin:0 0 1rem;color:var(--groen-t);hyphens:manual}
.lead{font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.45;max-width:38em;hyphens:manual}
a{color:inherit}
.lnk{font-weight:600;text-decoration-color:var(--groen);text-decoration-thickness:2px;text-underline-offset:.25em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--groen);outline-offset:3px}
.kop :focus-visible,.papier :focus-visible,.bank :focus-visible,.lees :focus-visible,.winkel :focus-visible,.band :focus-visible{outline-color:var(--inkt)}
@media (max-width:900px){.kop-nav :focus-visible{outline-color:var(--groen)}}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--wit);padding:.5rem 1rem}
a[href^=mailto],a[href^=tel]{hyphens:none;overflow-wrap:anywhere}

/* knoppen */
.knop{display:inline-flex;align-items:center;gap:.5em;min-height:3rem;padding:.7em 1.3em;border-radius:.35rem;font:inherit;font-weight:700;
  text-decoration:none;border:2px solid transparent;cursor:pointer;line-height:1.1;transition:transform .15s,background .15s}
.knop:hover{transform:translateY(-1px)}
.knop-groen{background:var(--groen);color:var(--inkt)}
.knop-lijn{border-color:currentColor;color:var(--wit);background:transparent}
.knop-lijn-licht{border-color:var(--inkt);color:var(--inkt);background:transparent}
.knop-donker{background:var(--inkt);color:var(--wit)}
.knoppen{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}

/* kop: wit, want het logo is grafiet + groen */
.kop{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:1.5rem;height:var(--kopH);padding:0 var(--g);background:var(--wit);
  border-bottom:1px solid #e3e4df}
.kop-logo{flex-shrink:0;display:flex;align-items:center;min-height:2.75rem}
.kop-logo img{height:2.6rem;width:auto}
.kop-nav{display:flex;gap:1.6rem;margin-left:auto;font-weight:600;font-size:.98rem}
.kop-nav a{text-decoration:none;padding:.4rem 0;border-bottom:2px solid transparent;min-height:2.75rem;min-width:2.75rem;justify-content:center;display:inline-flex;align-items:center}
.kop-nav a:hover,.kop-nav a[aria-current]{border-color:var(--groen)}
.kop-nav .kop-wa{display:none}
.kop-bel{min-height:2.75rem;padding:.5em 1em;font-size:.95rem;flex-shrink:0}
.kop-bel .mono{font-weight:600;font-size:.8rem}
.kop-menu{display:none}
@media (max-width:1100px){
  .kop-nr{display:none}
}
@media (min-width:901px) and (max-width:1240px){.kop-nav{gap:1rem;font-size:.92rem}}
.kop-nav a{white-space:nowrap;flex-shrink:0}
@media (max-width:900px){
  .kop{gap:.75rem}
  .kop-bel{margin-left:auto}
  .kop-menu{display:grid;place-items:center;width:3rem;height:3rem;flex-shrink:0;border:0;background:var(--inkt);border-radius:.35rem;cursor:pointer}
  .kop-menu>span:first-child{display:block;width:1.3rem;height:2px;background:var(--groen);box-shadow:0 -6px 0 var(--groen),0 6px 0 var(--groen);transition:.2s}
  .kop-menu[aria-expanded=true]>span:first-child{box-shadow:none;transform:rotate(45deg)}
  .kop-nav{position:fixed;inset:var(--kopH) 0 auto 0;max-height:calc(100dvh - var(--kopH));overflow-y:auto;flex-direction:column;gap:0;
    background:var(--nacht);color:var(--wit);padding:1rem var(--g) 2rem;font-stretch:75%;font-weight:800;font-size:2rem;
    transform:translateY(-120%);visibility:hidden;transition:transform .3s,visibility .3s}
  .kop-nav.open{transform:none;visibility:visible}
  .kop-nav a{padding:.55rem 0;border-bottom:1px solid var(--rand)}
  .kop-nav .kop-wa{display:flex;color:var(--groen)}
}
@media (max-width:420px){.kop-logo img{height:2.1rem}.kop-bel{padding:.5em .8em}}

/* opening: het logo wordt als A-scan van links naar rechts geschreven */
.opening{position:fixed;inset:0;z-index:90;background:var(--wit);display:grid;place-items:center;transition:opacity .5s,visibility .5s}
.opening.weg{opacity:0;visibility:hidden}
.opening-logo{position:relative;width:min(78vw,40rem)}
.opening-logo img{width:100%;clip-path:inset(0 100% 0 0);animation:schrijf 1.5s cubic-bezier(.45,.05,.3,1) .25s forwards}
.opening-scan{position:absolute;top:-8%;bottom:-8%;left:0;width:2px;background:var(--groen);box-shadow:0 0 18px 4px rgba(143,191,33,.55);
  animation:scanlijn 1.5s cubic-bezier(.45,.05,.3,1) .25s forwards}
.opening-sla{position:absolute;right:1rem;bottom:1rem;border:0;background:none;color:var(--grijs);padding:.8rem 1rem;cursor:pointer;font-size:.8rem}
@keyframes schrijf{to{clip-path:inset(0 0 0 0)}}
@keyframes scanlijn{to{left:100%;opacity:0}}
body:not(.body-home) .opening{display:none}

/* hero: het instrument */
.scan{background:var(--nacht);color:var(--wit);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.5rem,4vw,4rem);
  padding:clamp(2rem,5vw,4.5rem) var(--g) 2.5rem;align-items:center;min-height:calc(100svh - var(--kopH))}
.scan .label{color:var(--groen)}
.scan h1{font-size:clamp(3.2rem,7.4vw,8rem)}
.scan .lead{color:var(--licht-t)}
.scan-instrument{display:grid;gap:.8rem}
.scherm{background:#0b0d0c;border:1px solid var(--rand);border-radius:.6rem;padding:.6rem .8rem .7rem;box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
.scherm-kop,.scherm-lees{display:flex;justify-content:space-between;gap:1rem;font-size:.72rem;color:#8a9087}
.scherm-live i{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--groen);margin-right:.4rem;animation:knipper 1.6s infinite}
@keyframes knipper{50%{opacity:.2}}
#ascan{width:100%;height:auto;aspect-ratio:900/380;margin:.4rem 0}
.scherm-lees b{color:var(--groen);font-weight:600}
.scherm-lees.raak b{color:var(--oranje)}
.plaat{position:relative;border-radius:.4rem;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;
  box-shadow:0 1.5rem 3rem -1rem rgba(0,0,0,.7)}
.plaat::before{content:"";display:block;padding-top:42.86%}
.plaat-img,.plaat-doek{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 49%}
.plaat:active{cursor:grabbing}
.probe{position:absolute;top:49%;left:50%;width:0;height:0;pointer-events:none}
.probe-kop{position:absolute;left:-1.6rem;top:-1.25rem;width:3.2rem;height:2.5rem;border-radius:.3rem;background:linear-gradient(#2c3034,#15171a);
  border:2px solid var(--groen);box-shadow:0 .6rem 1.2rem rgba(0,0,0,.55)}
.probe-kop::after{content:"";position:absolute;left:50%;top:50%;width:.55rem;height:.55rem;margin:-.275rem;border-radius:50%;background:var(--groen);
  box-shadow:0 0 10px var(--groen)}
.probe-kabel{position:absolute;left:-1px;bottom:1.2rem;width:2px;height:9rem;background:#0e0f10}
.scan-onder{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.9rem;color:var(--licht-t)}
.scan-onder p{margin:0}
.teller b{color:var(--oranje);font-size:1.1em}
.log{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.78rem;color:var(--licht-t);min-height:1.2em}
.log li::before{content:"";display:inline-block;width:.55rem;height:.55rem;background:var(--oranje);margin-right:.45rem;vertical-align:.05em}
@media (max-width:999px){
  .scan{grid-template-columns:1fr;min-height:0;padding-top:1.6rem;gap:1.1rem}
  .scan-tekst{display:contents}
  .scan .label{order:1;margin:0}.scan h1{order:2;margin:0}.scan-instrument{order:3}.scan .lead{order:4;margin:.4rem 0 0}.scan .knoppen{order:5}
  .scan h1{font-size:clamp(2.8rem,13vw,5.5rem)}
  .scan .knoppen{margin-top:1.1rem}
  .plaat::before{padding-top:56%}
}
@media (max-width:600px){.scan .lead{font-size:1.05rem}.scherm-lees{font-size:.66rem}}

/* motief: A-scan-lijn als overgang */
.lijn{display:block;width:100%;height:clamp(1.5rem,3vw,3rem)}
.lijn-g{fill:none;stroke:var(--groen);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.lijn-o{fill:none;stroke:var(--oranje);stroke-width:3;vector-effect:non-scaling-stroke}
.lijn-scan{background:var(--nacht)}

/* offshore-film */
.zee{position:relative;min-height:min(92svh,62vw);display:flex;align-items:flex-end;color:var(--wit);overflow:hidden;background:#2b3238}
.zee-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.zee::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(10,12,14,.82))}
.zee-tekst{position:relative;z-index:1;padding:var(--g);padding-bottom:clamp(2rem,5vw,4.5rem);max-width:62rem}
.zee-tekst h2{font-size:clamp(2.6rem,7vw,6.5rem)}
.zee-tekst p{font-size:clamp(1.05rem,1.4vw,1.3rem);max-width:34em;color:#e4e6e1;margin:0}
@media (max-width:700px){.zee{min-height:88svh}.zee-film{object-position:42% 50%}}

/* testbank */
.bank{background:var(--papier);padding:clamp(3.5rem,8vw,7rem) var(--g)}
.bank-kop{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:1rem 3rem;align-items:end;margin-bottom:2rem}
.bank-kop .label{grid-column:1/-1;margin:0}
.bank-kop h2{margin:0}.bank-kop p:last-child{margin:0;max-width:30em}
.bank-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.2rem}
.bank-tabs button{display:flex;align-items:baseline;gap:.55rem;min-height:2.9rem;padding:.55rem 1rem;border:2px solid #cfd1ca;border-radius:.35rem;
  background:var(--wit);font:inherit;font-weight:600;cursor:pointer;color:var(--inkt)}
.bank-tabs button .mono{font-size:.75rem;color:var(--groen-t);font-weight:700}
.bank-tabs button[aria-selected=true]{background:var(--inkt);border-color:var(--inkt);color:var(--wit)}
.bank-tabs button[aria-selected=true] .mono{color:var(--groen)}
.bank-werk{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.5rem,3.5vw,3.5rem);align-items:start}
.bank-plaat{position:relative;border-radius:.4rem;overflow:hidden;touch-action:none;background:#222;cursor:crosshair}
.bank-plaat::before{content:"";display:block;padding-top:56%}
.bank-img,#bankdoek{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 49%}
.bank-plaat[data-m=rt] .bank-img{filter:grayscale(1) contrast(1.5) brightness(.78) sepia(.3) hue-rotate(170deg)}
.bank-stappen{position:absolute;left:.7rem;bottom:.7rem;right:.7rem;display:flex;flex-wrap:wrap;gap:.4rem}
.bank-stappen button{min-height:2.75rem;padding:.45rem .85rem;border:0;border-radius:.3rem;background:rgba(20,22,24,.86);color:var(--wit);font:inherit;
  font-size:.88rem;font-weight:600;cursor:pointer}
.bank-stappen button[disabled]{opacity:.45;cursor:default}
.bank-stappen button.klaar[disabled]{opacity:1}
.bank-stappen button.klaar{background:var(--groen);color:var(--inkt)}
.bank-meter{position:absolute;right:.7rem;top:.7rem;background:rgba(20,22,24,.9);color:var(--wit);border-radius:.3rem;padding:.55rem .75rem;font-size:.75rem;
  line-height:1.5;min-width:9.5rem}
.bank-meter b{color:var(--groen);font-size:1.6rem;display:block;line-height:1.1;font-weight:600}
.bank-noot{font-size:.85rem;color:var(--grijs);margin:.6rem 0 0}
.bank-paneel h3{margin-bottom:.3rem}
.doe{color:var(--oranje-t);font-size:.85rem;margin:0 0 1rem}
.bank-paneel dl{margin:0}
.bank-paneel dt{font-weight:700;margin-top:.9rem}
.bank-paneel dd{margin:.15rem 0 0}
.voordelen{margin-top:1rem;border-top:1px solid #d6d8d1;padding-top:.6rem}
.voordelen summary{cursor:pointer;font-weight:700;min-height:2.75rem;display:flex;align-items:center}
.voordelen ul{margin:.2rem 0 0;padding-left:1.1rem}
.bank-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:1.2rem}
.bank-foto{padding:0;border:0;background:none;cursor:zoom-in;border-radius:.3rem;overflow:hidden;aspect-ratio:1}
.bank-foto img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.bank-foto:hover img{transform:scale(1.04)}
@media (max-width:999px){
  .bank-kop{grid-template-columns:1fr}
  .bank-werk{grid-template-columns:1fr}
  .bank-tabs{flex-wrap:nowrap;overflow-x:auto;margin-left:calc(-1*var(--g));margin-right:calc(-1*var(--g));padding:0 var(--g) .3rem;scrollbar-width:none}
  .bank-tabs button{flex-shrink:0}
}
@media (min-width:700px) and (max-width:999px){.bank-uitleg{columns:2;column-gap:2rem}.bank-paneel h3,.bank-paneel .doe{column-span:all}}

/* vakmanschap */
.vak{background:var(--nacht);color:var(--wit);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,5rem);
  padding:clamp(3.5rem,8vw,7rem) var(--g);align-items:center}
.vak .label{color:var(--groen)}
.vak-film{border-radius:.4rem;overflow:hidden;aspect-ratio:3/4;background:#2a241c}
.vak-film video{width:100%;height:100%;object-fit:cover}
.vak .lead{color:var(--wit)}
.vak-tekst p{color:var(--licht-t)}
.vak-lijst{list-style:none;margin:2rem 0;padding:0;border-top:1px solid var(--rand)}
.vak-lijst li{display:flex;gap:1rem;align-items:baseline;padding:.9rem 0;border-bottom:1px solid var(--rand);font-stretch:75%;font-weight:700;
  font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.1}
.vak-lijst li::before{content:"";flex-shrink:0;width:1.1rem;height:3px;background:var(--oranje);transform:translateY(-.3em)}
@media (max-width:800px){.vak{grid-template-columns:1fr}.vak-film{aspect-ratio:4/5;max-height:70svh}}
@media (min-width:600px) and (max-width:800px){.vak-film{aspect-ratio:16/11}}

/* veld */
.veld{background:var(--papier);padding:clamp(3.5rem,8vw,7rem) var(--g) 3rem}
.veld-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(9rem,15vw,17rem);grid-auto-flow:dense;gap:.5rem;
  max-height:clamp(30rem,52vw,58rem);overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.veld-grid.open{max-height:none;-webkit-mask-image:none;mask-image:none}
.veld-item{padding:0;border:0;background:#ddd;border-radius:.3rem;overflow:hidden;cursor:zoom-in}
.veld-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.veld-item:hover img{transform:scale(1.03)}
.veld-l{grid-column:span 2}.veld-p{grid-row:span 2}
.veld-item:first-child{grid-column:span 2;grid-row:span 2}
.veld-meer{text-align:center;margin:1.5rem 0 0}
.veld .knop-lijn{color:var(--inkt)}
@media (max-width:700px){.veld-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:42vw;max-height:150vw}.veld-item:first-child{grid-row:span 1}}

/* shop-band: volle merkkleur */
.band{background:var(--groen);color:var(--inkt);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,4vw,4rem);
  padding:clamp(3.5rem,7vw,6rem) var(--g);align-items:center}
.band .label{color:var(--inkt)}
.band-prods{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.prod{display:block;background:var(--wit);border-radius:.4rem;padding:.6rem .6rem .8rem;text-decoration:none;transition:transform .2s}
.prod:hover{transform:translateY(-4px)}
.prod img{aspect-ratio:1;object-fit:contain;width:100%}
.prod-naam{display:block;font-weight:700;font-size:.9rem;line-height:1.2;margin-top:.4rem}
@media (max-width:999px){.band{grid-template-columns:1fr}}
@media (max-width:600px){.band-prods{grid-template-columns:repeat(2,1fr)}}

/* papier: certificaten + partners */
.papier{background:var(--wit);padding:clamp(3.5rem,8vw,7rem) var(--g);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:2rem 4rem}
.certs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,3vw,3rem)}
.cert{margin:0}
.cert-blad{display:block;width:100%;padding:0;border:1px solid #e1e2dd;background:var(--wit);cursor:zoom-in;box-shadow:0 1rem 2rem -1.2rem rgba(0,0,0,.35);
  transform:rotate(-1.2deg);transition:transform .3s}
.cert:nth-child(2) .cert-blad{transform:rotate(1deg)}
.cert-blad:hover{transform:none}
.cert figcaption{display:flex;flex-direction:column;gap:.1rem;margin-top:1rem;font-size:.92rem}
.cert figcaption strong{font-stretch:75%;font-size:1.5rem;line-height:1.1}
.cert figcaption .mono{font-size:.78rem;color:var(--grijs)}
.partners{grid-column:1/-1;border-top:1px solid #e1e2dd;padding-top:2rem}
.partners-rij{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;align-items:center}
.partner{display:block;padding:.4rem;border-radius:.3rem}
.partner img{width:100%;height:4.5rem;object-fit:contain}
a.partner:hover{background:var(--papier)}
@media (max-width:900px){.papier{grid-template-columns:1fr}.partners-rij{grid-template-columns:repeat(3,1fr)}}
@media (max-width:500px){.partners-rij{grid-template-columns:repeat(2,1fr)}}
.papier-pagina{grid-template-columns:1fr}
.certs-groot{max-width:70rem}

/* voet */
.voet{background:var(--nacht);color:var(--wit)}
.lijn-voet{background:var(--wit)}
.body-sub .lijn-voet{background:var(--wit)}
.voet-in{padding:clamp(3rem,7vw,6rem) var(--g) 2rem}
.voet-kop{font-size:clamp(3.4rem,11vw,10rem);margin-bottom:2.5rem}
.voet .label{color:var(--groen)}
.voet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding-bottom:3rem;border-bottom:1px solid var(--rand)}
.voet-grid p{margin:0 0 .6rem;color:var(--licht-t)}
.voet-grid strong{color:var(--wit)}
.voet-groot{font-stretch:75%;font-weight:700;font-size:clamp(1.4rem,2.3vw,2rem);line-height:1.15}
.voet-groot a{color:var(--wit);text-decoration:none}
.voet-groot a:hover{color:var(--groen)}
.voet-onder{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;padding-top:1.8rem;font-size:.88rem;color:var(--licht-t)}
.voet-onder p{margin:0}
.voet-onder a{min-height:2.5rem;display:inline-flex;align-items:center}
.voet-logo{background:var(--wit);border-radius:.6rem;padding:.7rem .9rem;box-sizing:content-box}
.voet-logo img{height:2.4rem;width:auto}
@media (max-width:800px){.voet-grid{grid-template-columns:1fr}}

/* subpagina's */
.pkop{background:var(--nacht);color:var(--wit);padding:clamp(3rem,8vw,7rem) var(--g) clamp(2rem,4vw,3rem)}
.pkop .label{color:var(--groen)}
.pkop .lead{color:var(--licht-t)}
.pkop .lead a{color:var(--wit);text-decoration-color:var(--groen)}
.lijn-pkop{background:var(--nacht)}
.lees{background:var(--papier);padding:clamp(3rem,7vw,6rem) var(--g);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,5vw,5rem)}
.lees-kol{max-width:42rem;font-size:1.1rem}
.lees-kol h2{font-size:clamp(2rem,4vw,3.2rem);margin-top:2.5rem}
.lees-juridisch{font-size:1rem;grid-column:1/-1}
.lees-juridisch a{text-decoration-color:var(--groen)}
.lees-beeld{display:grid;gap:1rem}
.lees-beeld img{border-radius:.4rem}
.lees .knop{margin:.3rem .4rem .3rem 0}
.breedbeeld img{width:100%;max-height:85svh;object-fit:cover}
@media (max-width:900px){.lees{grid-template-columns:1fr}.lees-beeld{grid-template-columns:1fr 1fr}}

/* shop */
.winkel{background:var(--papier);padding:clamp(3rem,7vw,6rem) var(--g);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:start}
.sprods{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.sprod{background:var(--wit);border-radius:.4rem;padding:.8rem;display:flex;flex-direction:column;scroll-margin-top:6rem}
.sprod:target{outline:3px solid var(--groen)}
.sprod img{aspect-ratio:1;object-fit:contain;width:100%}
.sprod h3{font-size:1.25rem;margin:.6rem 0 .2rem}
.sprod p{margin:0 0 .8rem;font-size:.88rem;color:var(--grijs);flex:1}
.sprod-knop{min-height:2.75rem;font-size:.88rem;padding:.4rem .8rem;width:100%;justify-content:center}
.sprod-knop.toegevoegd{background:var(--groen);border-color:var(--groen)}
.bon{position:sticky;top:6rem;background:#fffef6;border-radius:.3rem;padding:1.4rem 1.4rem 1.6rem;box-shadow:0 1.5rem 3rem -1.5rem rgba(0,0,0,.35);
  background-image:repeating-linear-gradient(transparent 0 2.15rem,#e9ecdf 2.15rem calc(2.15rem + 1px))}
.bon-kop{display:flex;justify-content:space-between;border-bottom:2px dashed var(--inkt);padding-bottom:.6rem;margin-bottom:.8rem}
.bon-kop p{margin:0;font-size:.8rem;font-weight:600}
.bon-uitleg{font-size:.9rem;margin:0 0 1rem}
.bon label{display:block;font-size:.8rem;font-weight:700;margin:.7rem 0 .2rem}
.bon input,.bon textarea{width:100%;font:inherit;font-size:1rem;padding:.6rem .7rem;border:1.5px solid #8b8f87;border-radius:.25rem;background:var(--wit);min-height:2.9rem}
.bon-twee{display:grid;grid-template-columns:1fr 1fr;gap:0 .8rem}
.bon-regels{margin-top:.6rem;border-top:2px dashed var(--inkt);padding-top:.3rem}
.bon-regel{display:grid;grid-template-columns:1fr 5.5rem;gap:0 .6rem;align-items:end}
.bon-regel label:first-child{grid-column:1/-1}
.bon-regel input[type=number]{grid-column:2;grid-row:2}
.bon .knop{margin-top:1.2rem}
.bon-fout{color:var(--oranje-t);font-weight:700;margin:.8rem 0 0}
.bon-noot{font-size:.8rem;color:var(--grijs);margin:.8rem 0 0}
@media (max-width:999px){.winkel{grid-template-columns:1fr}.bon{position:static}}
@media (max-width:600px){.sprods{grid-template-columns:repeat(2,1fr)}.bon-twee{grid-template-columns:1fr}}

/* lichtbak */
.lichtbak{border:0;padding:0;background:transparent;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh}
.lichtbak::backdrop{background:rgba(10,11,12,.93)}
.lichtbak img{width:100%;height:100%;object-fit:contain;padding:3.5rem 1rem}
.lb-knop{position:absolute;width:3rem;height:3rem;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:var(--wit);font-size:1.8rem;cursor:pointer;
  line-height:1}
.lb-sluit{top:.8rem;right:.8rem}.lb-vorige{left:.8rem;top:50%}.lb-volgende{right:.8rem;top:50%}
.lichtbak.enkel .lb-vorige,.lichtbak.enkel .lb-volgende{display:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}