/* fre.tdgdigital.com — Freyja, "Wij staan er al." Maten in rem: vanaf 1440 px schaalt het hele ontwerp mee. */
@font-face{font-family:"Barlow Condensed";src:url(/fonts/bc600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/fonts/bc700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/fonts/bc800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Barlow";src:url(/fonts/b400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(/fonts/b500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(/fonts/b600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--asfalt:#151715;--nacht:#0c0e0d;--zink:#c9cccb;--papier:#f2f1eb;--wit:#fff;--lime:#dfe01f;--grijs:#9d9d9c;--inkt:#151715;
  --rand:clamp(1.15rem,4.4vw,4rem);--kopf:"Barlow Condensed","Arial Narrow",sans-serif;
  --hek:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 56'%3E%3Cg fill='none' stroke='%23000'%3E%3Crect x='8' y='3' width='134' height='43' stroke-width='3.4'/%3E%3Cpath stroke-width='1.3' d='M27 4v42M46 4v42M65 4v42M85 4v42M104 4v42M123 4v42M8 24.5h134'/%3E%3C/g%3E%3Cpath d='M0 47h26v9H0zM124 47h26v9h-26z'/%3E%3C/svg%3E")}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
@media (min-width:1440px){html{font-size:clamp(100%,1.1111vw,200%)}}
body{margin:0;background:var(--asfalt);color:var(--inkt);font-family:"Barlow",system-ui,sans-serif;font-size:1.0625rem;line-height:1.6}
img,video,svg{display:block;max-width:100%;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;margin:0}
p{margin:0 0 1em}ul{margin:0;padding:0;list-style:none}dl,dd,figure,blockquote{margin:0}
a{color:inherit}
:focus-visible{outline:.1875rem solid var(--lime);outline-offset:.1875rem}
::selection{background:var(--lime);color:var(--asfalt)}
.lime :focus-visible,.papier :focus-visible,.zink :focus-visible{outline-color:var(--asfalt)}
a[href^=mailto],a[href^=tel]{hyphens:none;overflow-wrap:anywhere}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--lime);color:var(--asfalt);padding:.5rem 1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:min(100% - 2*var(--rand),86rem);margin-inline:auto}
.leeskolom{max-width:46rem;margin-inline:auto}
.leeskolom.wrap{width:min(100% - 2*var(--rand),46rem)}

/* typografie */
.kop-xl,.kop-l,h1{font-family:var(--kopf);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:-.005em}
.kop-xl{font-size:clamp(2.7rem,7.2vw,6.25rem)}
.kop-l{font-size:clamp(1.9rem,3.6vw,3.25rem);line-height:1}
.lead{font-size:clamp(1.125rem,1.5vw,1.375rem);line-height:1.5;hyphens:manual}
.label{font-family:var(--kopf);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.125rem;margin:0 0 1.2rem;display:flex;align-items:center;gap:.7rem}
.label::before{content:"";width:1.1rem;height:1.1rem;background:var(--lime);clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%);flex:none}
.noot{font-size:.875rem;opacity:.75;margin:0}

/* knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:.7rem 1.6rem;background:var(--lime);color:var(--asfalt);border:.125rem solid var(--lime);
  font-family:var(--kopf);font-weight:700;font-size:1.25rem;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;cursor:pointer;border-radius:0;transition:background-color .2s,color .2s,border-color .2s}
.knop:hover{background:var(--wit);border-color:var(--wit)}
.knop.lijn{background:transparent;color:var(--wit);border-color:currentColor}
.knop.lijn:hover{background:var(--wit);color:var(--asfalt);border-color:var(--wit)}
.knop.donker{background:var(--asfalt);color:var(--wit);border-color:var(--asfalt)}
.knop.donker:hover{background:var(--wit);color:var(--asfalt)}
.knop.lijn.donker{background:transparent;color:var(--asfalt)}
.knop.lijn.donker:hover{background:var(--asfalt);color:var(--wit)}
.knoppen{display:flex;flex-wrap:wrap;gap:.8rem;margin:0}
.tekstknop{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:.25em;cursor:pointer;min-height:2.75rem;padding:.4rem .6rem}
.pijl{display:inline-flex;align-items:center;gap:.6rem;min-height:2.75rem;font-family:var(--kopf);font-weight:700;font-size:1.25rem;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;color:var(--lime)}
.pijl::after{content:"";width:1.6rem;height:.75rem;background:currentColor;clip-path:polygon(0 38%,68% 38%,68% 0,100% 50%,68% 100%,68% 62%,0 62%);transition:transform .2s}
a:hover .pijl::after,.pijl:hover::after{transform:translateX(.3rem)}
.pijl.donker{color:var(--asfalt)}
.pijl.terug::after{order:-1;transform:scaleX(-1)}

/* banden + hekwerklijn als sectierand */
.band{position:relative;padding:clamp(4rem,9vw,8.5rem) 0;--bg:var(--papier);background:var(--bg)}
.band.papier{--bg:var(--papier)}.band.zink{--bg:var(--zink)}.band.lime{--bg:var(--lime)}
.band.asfalt{--bg:var(--asfalt);color:var(--wit)}.band.nacht{--bg:var(--nacht);color:var(--wit)}
.band.geen-top{padding-top:0}
.rand::before{content:"";position:absolute;left:0;right:0;top:1px;height:clamp(2rem,4vw,3.4rem);transform:translateY(-100%);background:var(--bg);
  -webkit-mask:var(--hek) left bottom/auto 100% repeat-x;mask:var(--hek) left bottom/auto 100% repeat-x;pointer-events:none;z-index:2}

/* kop */
.kop{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:1.5rem;padding:.9rem var(--rand);color:var(--wit);
  background:linear-gradient(rgba(12,14,13,.72),rgba(12,14,13,0));transition:background-color .25s}
.kop.vast{background:var(--nacht)}
.kop-logo{flex:none;display:flex;align-items:center;min-height:2.75rem}
.kop-logo img{width:clamp(8.2rem,12vw,10.5rem)}
.kop-nav{margin-left:auto}
.kop-nav ul{display:flex;gap:.2rem}
.kop-nav a{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;padding:0 .8rem;font-family:var(--kopf);font-weight:700;font-size:1.1875rem;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;white-space:nowrap}
.kop-nav a:hover,.kop-nav a[aria-current]{color:var(--lime)}
.kop-knop{min-height:2.75rem;padding:.3rem 1.1rem;font-size:1.125rem;flex:none}
.menu-knop{display:none;flex:none;width:3rem;height:3rem;background:var(--lime);border:0;cursor:pointer;align-items:center;justify-content:center;margin-left:auto}
.menu-streep,.menu-streep::before,.menu-streep::after{display:block;width:1.4rem;height:.1875rem;background:var(--asfalt);transition:transform .2s}
.menu-streep{position:relative}.menu-streep::before,.menu-streep::after{content:"";position:absolute;left:0}
.menu-streep::before{top:-.45rem}.menu-streep::after{top:.45rem}
[aria-expanded=true] .menu-streep{background:transparent}
[aria-expanded=true] .menu-streep::before{transform:translateY(.45rem) rotate(45deg)}
[aria-expanded=true] .menu-streep::after{transform:translateY(-.45rem) rotate(-45deg)}
.lade{position:fixed;inset:0;z-index:45;background:var(--nacht);color:var(--wit);padding:6rem var(--rand) 2.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:1.6rem}
.lade ul a{display:flex;align-items:center;min-height:3.2rem;font-family:var(--kopf);font-weight:800;font-size:clamp(2rem,8vw,3rem);text-transform:uppercase;text-decoration:none;line-height:1}
.lade ul a:hover{color:var(--lime)}
.lade-contact{display:flex;flex-direction:column;margin:0}.lade-contact a{min-height:2.75rem;display:flex;align-items:center}
.lade .knop{align-self:flex-start}
@media (max-width:1180px){.kop-nav,.kop-knop{display:none}.menu-knop{display:flex}}

/* opening: de Sesampoort */
.fre-poort{display:none}
.fre-poort-dicht .fre-poort{display:grid;place-items:center;position:fixed;inset:0;z-index:90;color:var(--wit);overflow:hidden}
.fre-poort-dicht body{overflow:hidden}
.fre-poort-doek{position:absolute;inset:0;background:rgba(12,14,13,.9);transition:opacity 1.1s .15s}
.fre-poort-hek{position:absolute;inset:-2% 0;transition:transform 1.5s cubic-bezier(.7,0,.2,1);
  background:linear-gradient(#2c302e,#2c302e) left 12%/100% .8rem no-repeat,linear-gradient(#2c302e,#2c302e) left 88%/100% .8rem no-repeat,
  repeating-linear-gradient(90deg,#2c302e 0 .7rem,transparent .7rem 3.4rem)}
.fre-poort-balk{position:absolute;left:0;right:0;top:calc(88% - 2.6rem);height:1.3rem;background:repeating-linear-gradient(115deg,#d6251f 0 2.2rem,#f4f4f2 2.2rem 4.4rem)}
.fre-poort-tekst{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.1rem;text-align:center;padding:2.2rem clamp(1.4rem,5vw,3.4rem);background:var(--nacht);border:.125rem solid #2c302e;max-height:100dvh;overflow-y:auto;transition:opacity .4s}
.fre-poort-tekst img{width:clamp(11rem,26vw,17rem)}
.fre-poort-tekst p{margin:0;font-family:var(--kopf);font-weight:800;text-transform:uppercase;font-size:clamp(1.7rem,4.4vw,3rem);line-height:1}
.fre-poort.open .fre-poort-hek{transform:translateX(-104%)}
.fre-poort.open .fre-poort-doek,.fre-poort.open .fre-poort-tekst{opacity:0}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;color:var(--wit);background:var(--nacht);overflow:hidden;padding:7rem 0 0}
.hero-beeld{position:absolute;inset:0}
.hero-beeld img,.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.hero-film{opacity:0;transition:opacity .6s}.hero-film.speelt{opacity:1}
.hero-beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,14,13,.5) 0,rgba(12,14,13,0) 26%,rgba(12,14,13,.15) 48%,rgba(12,14,13,.92) 100%),linear-gradient(90deg,rgba(12,14,13,.45),rgba(12,14,13,0) 60%)}
.hero-in{position:relative;width:min(100% - 2*var(--rand),86rem);margin-inline:auto}
.hero-boven{font-family:var(--kopf);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1rem,1.5vw,1.3125rem);margin:0 0 .6rem;color:var(--lime)}
.hero h1{font-size:min(19vw,28svh,15.5rem);line-height:.82;margin:0 0 1.6rem -.04em;text-shadow:0 .1rem 2.5rem rgba(0,0,0,.35)}
.hero h1 i{font-style:normal;color:var(--lime)}
.h-regel{display:block;white-space:nowrap}
.hero-p{hyphens:manual;max-width:36rem;font-size:clamp(1.0625rem,1.45vw,1.3125rem);line-height:1.45;margin:0 0 1.6rem}
.hero-voet{position:relative;width:min(100% - 2*var(--rand),86rem);margin:2.2rem auto 0;display:flex;align-items:center;gap:1rem;min-height:3.4rem;padding-bottom:.6rem}
.hero-fase{margin:0;font-family:var(--kopf);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:1.125rem;white-space:nowrap}
.hero-lijn{flex:1;height:.3125rem;background:rgba(255,255,255,.22);overflow:hidden}
.hero-lijn i{display:block;height:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}
@keyframes fre-op{from{opacity:0;transform:translateY(1.4rem)}to{opacity:1;transform:none}}
.hero-in>*{animation:fre-op .9s cubic-bezier(.2,.7,.2,1) both}
.hero-in>:nth-child(2){animation-delay:.1s}.hero-in>:nth-child(3){animation-delay:.25s}.hero-in>:nth-child(4){animation-delay:.35s}
.fre-poort-dicht .hero-in>*{animation-play-state:paused}
@media (orientation:landscape) and (max-height:520px){.hero{padding-top:4.6rem}.hero h1{font-size:min(15vw,27svh);margin-bottom:.7rem}.hero-p{display:none}.hero-voet{margin-top:.6rem;min-height:2.75rem}}
@media (max-width:560px){.hero-fase{font-size:1rem}.hero .knop{flex:1 1 100%}}

/* passie */
.passie-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.passie-tekst .kop-l{font-size:clamp(2rem,4.6vw,4.4rem);margin-bottom:1.6rem}
.passie-tekst .lead{max-width:40rem}
.passie-beeld img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
@media (max-width:900px){.passie-grid{grid-template-columns:minmax(0,1fr)}}

/* twee werelden */
.werelden{display:flex;background:var(--nacht);color:var(--wit)}
.wereld{position:relative;flex:1 1 0;min-width:0;min-height:min(46rem,92svh);display:flex;align-items:flex-end;overflow:hidden;text-decoration:none;transition:flex-grow .6s cubic-bezier(.3,.7,.2,1)}
.wereld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.wereld::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,14,13,.1) 30%,rgba(12,14,13,.92))}
.wereld-in{position:relative;z-index:1;display:block;padding:clamp(1.5rem,4vw,4rem) var(--rand) clamp(2rem,4vw,3.5rem);max-width:44rem}
.wereld-kop{display:block;font-family:var(--kopf);font-weight:800;text-transform:uppercase;line-height:.9;font-size:clamp(2.6rem,5.6vw,5.4rem);margin-bottom:1rem}
.wereld-p{display:block;margin-bottom:.8rem;max-width:34rem}
@media (hover:hover) and (min-width:901px){.wereld:hover{flex-grow:1.45}.wereld:hover img{transform:scale(1.04)}}
@media (max-width:900px){.werelden{flex-direction:column}.wereld{min-height:30rem}}

/* signatuur: hoeveel meter */
.meter-kop{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,5vw,5rem);align-items:end;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.meter-kop .lead{margin:0;opacity:.85}
.meter-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.meter-getal{display:flex;align-items:baseline;gap:.8rem;margin:0;font-family:var(--kopf);font-weight:800;line-height:.8;color:var(--lime)}
.meter-getal output{font-size:clamp(5.5rem,15vw,12.5rem);font-variant-numeric:tabular-nums}
.meter-getal.lang output{font-size:clamp(4.2rem,11.5vw,9.5rem)}
.meter-getal span{font-size:clamp(1.5rem,2.6vw,2.4rem);text-transform:uppercase;color:var(--wit)}
.schuif{-webkit-appearance:none;appearance:none;display:block;width:100%;height:3rem;margin:1.2rem 0 0;background:transparent;cursor:pointer;touch-action:pan-y;--p:10%}
.schuif::-webkit-slider-runnable-track{height:.5rem;background:linear-gradient(90deg,var(--lime) var(--p),#343836 var(--p))}
.schuif::-moz-range-track{height:.5rem;background:linear-gradient(90deg,var(--lime) var(--p),#343836 var(--p))}
.schuif::-webkit-slider-thumb{-webkit-appearance:none;width:2.75rem;height:2.75rem;margin-top:-1.125rem;background:var(--wit);border:.5rem solid var(--asfalt);box-shadow:0 0 0 .1875rem var(--lime);border-radius:0}
.schuif::-moz-range-thumb{width:1.75rem;height:1.75rem;background:var(--wit);border:.5rem solid var(--asfalt);box-shadow:0 0 0 .1875rem var(--lime);border-radius:0}
.meter-schaal{display:flex;justify-content:space-between;font-size:.875rem;opacity:.6}
.meter-exact{display:flex;align-items:center;gap:.7rem;margin:1.6rem 0 0;font-size:.9375rem}
.meter-exact input{width:6.5rem;min-height:2.75rem;padding:.3rem .6rem;background:transparent;color:var(--wit);border:.125rem solid #4a4f4c;font:inherit;font-weight:600;border-radius:0;transition:border-color .2s,background-color .2s}
.meter-exact.meer .meter-vraag{font-family:var(--kopf);font-weight:800;font-size:1.5rem;text-transform:uppercase;line-height:1;color:var(--lime)}
.meter-exact.meer input{width:8.5rem;border-color:var(--lime);background:rgba(223,224,31,.12);font-size:1.25rem;animation:fre-meer 1.4s ease-out 2}
.meter-exact.meer{flex-wrap:wrap}
@media (max-width:560px){.meter-exact.meer .meter-vraag{flex-basis:100%}}
@keyframes fre-meer{0%{box-shadow:0 0 0 0 rgba(223,224,31,.7)}100%{box-shadow:0 0 0 .9rem rgba(223,224,31,0)}}
@media (prefers-reduced-motion:reduce){.meter-exact.meer input{animation:none}}
fieldset{border:0;padding:0;margin:1.8rem 0 0;min-width:0}
legend{padding:0;margin-bottom:.7rem;font-family:var(--kopf);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:1.0625rem}
legend b{color:var(--lime);font-weight:700}
.meter-soort{display:flex;flex-wrap:wrap;gap:.6rem}.meter-soort legend{float:left;width:100%}
.keuze{position:relative;cursor:pointer}
.keuze input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.keuze span{display:inline-flex;align-items:center;min-height:2.9rem;min-width:6rem;justify-content:center;padding:.3rem 1.2rem;border:.125rem solid #4a4f4c;font-family:var(--kopf);font-weight:700;font-size:1.1875rem;text-transform:uppercase}
.keuze input:checked+span{background:var(--lime);border-color:var(--lime);color:var(--asfalt)}
.keuze input:focus-visible+span{outline:.1875rem solid var(--wit);outline-offset:.1875rem}
.stalen{display:flex;flex-wrap:wrap;gap:.6rem}
.staal{position:relative;width:2.9rem;height:2.9rem;background:var(--k);cursor:pointer;border:.125rem solid rgba(255,255,255,.25)}
.staal input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.staal:has(input:checked){box-shadow:0 0 0 .1875rem var(--nacht),0 0 0 .375rem var(--lime)}
.staal:has(input:focus-visible){outline:.1875rem solid var(--wit);outline-offset:.4rem}
.meter-zeil[disabled]{opacity:.3}
.meter-uit{border-top:.3125rem solid var(--lime);padding-top:1.6rem}
.meter-boxen{margin:0 0 1.2rem;font-family:var(--kopf);font-weight:800;text-transform:uppercase;line-height:.9;font-size:clamp(2.4rem,5vw,4.6rem)}
.meter-boxen b{color:var(--lime);font-variant-numeric:tabular-nums}
.meter-stapel{display:flex;flex-wrap:wrap;gap:.35rem;min-height:2.2rem;margin-bottom:1.8rem;align-items:center;font-family:var(--kopf);font-weight:700;font-size:1.25rem}
.meter-stapel i{width:2rem;height:2rem;background:url(/img/beeldmerk.png) center/contain no-repeat;animation:fre-box .35s both}
@keyframes fre-box{from{opacity:0;transform:translateY(-.6rem)}}
.meter-lijst{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.2rem,1fr));gap:1rem .8rem;margin-bottom:2rem}
.meter-lijst div{container-type:inline-size;display:flex;flex-direction:column-reverse;border-left:.125rem solid #343836;padding-left:.8rem}
.meter-lijst dt{font-size:.9375rem;opacity:.75}
.meter-lijst dd{font-family:var(--kopf);font-weight:800;font-size:min(clamp(2rem,3.6vw,3.25rem),36cqi);line-height:1;white-space:nowrap;hyphens:none;overflow-wrap:normal;font-variant-numeric:tabular-nums}
.meter-hek{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:1.2rem;align-items:center;margin-bottom:1.8rem}
.meter-hek img{width:100%;height:auto;background:var(--wit)}
.meter-hek figcaption{font-size:.9375rem;opacity:.85}
.meter-actie{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;align-items:center}
.meter-actie .noot{flex:1 1 16rem}
@media (max-width:1180px){.meter-kop,.meter-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.meter-hek{grid-template-columns:minmax(0,8rem) minmax(0,1fr)}}

/* FenceBox */
.fbox-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.fbox-beeld img{width:100%;height:auto;mix-blend-mode:multiply}
.fbox-tekst .kop-xl{margin-bottom:1.4rem}
.delen{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.9rem,1fr));gap:.4rem;margin:2rem 0 0}
.deel{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;min-height:5rem;padding:.6rem .7rem;background:transparent;border:.125rem solid var(--asfalt);color:var(--asfalt);cursor:pointer;font:inherit;text-align:left;border-radius:0;min-width:0}
.deel b{font-family:var(--kopf);font-weight:800;font-size:clamp(1.9rem,2.8vw,2.6rem);line-height:.9}
.deel span{font-size:.875rem;font-weight:500;white-space:nowrap}
.deel[aria-selected=true]{background:var(--asfalt);color:var(--lime)}
.deel[aria-selected=true] span{color:var(--wit)}
.deel-paneel{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:1.2rem;align-items:center;margin-top:.4rem;padding:1rem;background:var(--wit);min-height:8rem}
.deel-paneel img{width:100%;height:auto;max-height:7rem;object-fit:contain}
.deel-paneel p{margin:0}
.fbox-slot{margin-top:clamp(3rem,7vw,6rem);margin-bottom:0;font-family:var(--kopf);font-weight:800;text-transform:uppercase;line-height:.92;font-size:clamp(2.2rem,6.4vw,5.6rem);color:var(--asfalt);hyphens:manual}
.fbox-slot span{background:linear-gradient(transparent 62%,var(--lime) 62%,var(--lime) 90%,transparent 90%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (max-width:900px){.fbox-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.deel-paneel{grid-template-columns:minmax(0,6rem) minmax(0,1fr)}}

/* het complete pakket */
.pakket{padding-bottom:clamp(3rem,6vw,5.5rem);overflow:hidden}
.pakket-kop{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(1.5rem,5vw,5rem);align-items:end;margin-bottom:clamp(2rem,4vw,3.5rem)}
.pakket-rij{display:flex;gap:.9rem;overflow-x:auto;padding:.4rem var(--rand) 1.6rem;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--asfalt) transparent}
.pakket-rij li{flex:0 0 clamp(13rem,22vw,19rem);scroll-snap-align:start}
.pk{display:block;background:var(--wit);text-decoration:none;height:100%}
.pk img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;padding:.6rem}
.pk span{display:flex;align-items:center;min-height:3.2rem;padding:.4rem 1rem;border-top:.125rem solid var(--asfalt);font-family:var(--kopf);font-weight:700;font-size:1.3125rem;text-transform:uppercase;line-height:1}
.pk:hover span{background:var(--asfalt);color:var(--lime)}
@media (max-width:900px){.pakket-kop{grid-template-columns:minmax(0,1fr)}}

/* citaat: lichte foto van buiten bij Paaspop met een papiervlak, zodat de zwarte hekken in de rand eruit springen (ronde 3) */
.citaat{position:relative;color:var(--asfalt);background:var(--papier);min-height:min(44rem,90svh);display:flex;align-items:center;padding:clamp(5rem,10vw,9rem) 0;overflow:hidden}
.citaat>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 40%}
.citaat::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(242,241,235,.93),rgba(242,241,235,.8) 40%,rgba(242,241,235,0) 66%)}
.citaat-in{position:relative;z-index:1}
.citaat blockquote p{font-family:var(--kopf);font-weight:700;font-size:clamp(1.9rem,4.4vw,4.1rem);line-height:1.04;max-width:52rem;margin:0 0 1.8rem;hyphens:manual}
.citaat blockquote p::before{content:"“"}.citaat blockquote p::after{content:"”"}
.citaat figcaption{font-size:1.0625rem}.citaat figcaption b{display:table;font-family:var(--kopf);font-size:1.5rem;text-transform:uppercase;background:var(--lime);padding:.05rem .45rem;margin:0 0 .3rem -.45rem}
@media (max-width:900px){.citaat::after{background:linear-gradient(180deg,rgba(242,241,235,.55),rgba(242,241,235,.85) 25%,rgba(242,241,235,.85) 75%,rgba(242,241,235,.4))}}

/* sjouwen en shinen */
.crew-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.crew-buhne{position:relative;aspect-ratio:4/3;background:var(--nacht);overflow:hidden}
.crew-beeld{position:absolute;inset:0;animation:fre-wissel .6s both}
.crew-beeld img{width:100%;height:100%;object-fit:cover}
@keyframes fre-wissel{from{opacity:0;transform:scale(1.04)}}
.crew-kop{margin-bottom:1.4rem;font-size:clamp(2.9rem,7.4vw,6.6rem)}
.crew-woord{font:inherit;text-transform:inherit;letter-spacing:inherit;line-height:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;color:transparent;-webkit-text-stroke:.03em var(--wit);min-height:2.75rem;border-radius:0}
.crew-woord[aria-pressed=true]{color:var(--lime);-webkit-text-stroke:0}
.crew-woord:hover{-webkit-text-stroke-color:var(--lime)}
.crew-tekst .lead{min-height:4.5em}
.bieden{margin:1.4rem 0 2rem;columns:2;column-gap:2.5rem}
.bieden li{position:relative;padding:.35rem 0 .35rem 1.7rem;break-inside:avoid;hyphens:manual}
.bieden li::before{content:"";position:absolute;left:0;top:.85rem;width:.8rem;height:.8rem;background:var(--lime);clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}
@media (max-width:900px){.crew-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.bieden{columns:1}}

/* in beeld */
.beeld-kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 2rem;margin-bottom:2rem}.beeld-kop .lead{margin:0}
.film{background:var(--nacht);margin-bottom:.6rem}
.film video{width:100%;height:auto;aspect-ratio:16/9}
.galerij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(8rem,17vw,16rem);grid-auto-flow:dense;gap:.6rem}
.galerij a{display:block;height:100%;overflow:hidden;background:var(--zink)}
.galerij img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.galerij a:hover img{transform:scale(1.04)}
.g-l{grid-column:span 2;grid-row:span 2}
.galerij:not(.open) .g-extra{display:none}
.galerij:not(.open){-webkit-mask:linear-gradient(#000 62%,transparent);mask:linear-gradient(#000 62%,transparent)}
.galerij-meer{margin:-1.5rem 0 0;position:relative;text-align:center}
@media (max-width:700px){.galerij{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:34vw}}
.lichtbak{border:0;padding:0;background:rgba(12,14,13,.96);width:100vw;height:100dvh;max-width:none;max-height:none;margin:0}
.lichtbak[open]{display:grid;place-items:center}
.lichtbak img{max-width:94vw;max-height:86dvh;width:auto;height:auto;object-fit:contain}
.lichtbak-sluit{position:fixed;top:1rem;right:1rem;min-height:2.75rem;padding:.3rem 1rem;background:var(--lime);border:0;font-family:var(--kopf);font-weight:700;font-size:1.125rem;text-transform:uppercase;cursor:pointer}

/* offerte */
.offerte-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.offerte-tekst .kop-xl{margin-bottom:1.4rem;font-size:clamp(2.6rem,6vw,5.4rem)}
.contact{display:grid;gap:1.1rem;margin-top:2.2rem}
.contact dt{font-family:var(--kopf);font-weight:800;text-transform:uppercase;font-size:1.5rem;line-height:1}
.contact dd{font-size:1.125rem}.contact a{display:inline-flex;align-items:center;min-height:2.75rem}
.formulier{display:grid;gap:1rem}
.veld-rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}
.veld{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.veld>span:first-child{font-family:var(--kopf);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1.0625rem}
.veld input,.veld textarea,.veld select{width:100%;min-height:3.2rem;padding:.6rem .8rem;background:rgba(255,255,255,.6);border:.125rem solid var(--asfalt);color:var(--asfalt);font:inherit;border-radius:0}
.veld textarea{resize:vertical;min-height:8rem}
.kies{position:relative;display:block}
.kies select{-webkit-appearance:none;appearance:none;padding-right:2.6rem;min-height:3.2rem}
.kies::after{content:"";position:absolute;right:1rem;top:50%;width:.8rem;height:.5rem;margin-top:-.25rem;background:var(--asfalt);clip-path:polygon(0 0,100% 0,50% 100%);pointer-events:none}
.veld input:focus-visible,.veld textarea:focus-visible,.veld select:focus-visible{background:var(--wit)}
.veld .fout{border-color:#b3140f;background:#fff}
.formulier-voet{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem}.formulier-voet .noot{flex:1 1 15rem}
@media (max-width:900px){.offerte-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.veld-rij{grid-template-columns:minmax(0,1fr)}}

/* voet */
.voet{background:var(--nacht);color:var(--wit);padding:clamp(3rem,6vw,5rem) 0 2rem}
.voet-grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:2rem}
.voet-merk img{width:12rem;margin-bottom:1.2rem}.voet-merk p{max-width:22rem;opacity:.8}
.voet h2{font-family:var(--kopf);font-weight:800;text-transform:uppercase;font-size:1.5rem;color:var(--lime);margin-bottom:.3rem}
.voet p a,.voet-onder a{display:inline-flex;align-items:center;min-height:2.75rem}
.voet-onder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 2rem;margin-top:2.5rem;padding-top:1.2rem;border-top:.0625rem solid #2c302e;font-size:.9375rem}
.voet-onder p{margin:0;display:flex;flex-wrap:wrap;gap:0 1.4rem;align-items:center}
@media (max-width:900px){.voet-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.voet-merk{grid-column:1/-1}}
@media (max-width:480px){.voet-grid{grid-template-columns:minmax(0,1fr)}}

/* subpagina's */
.pkop{position:relative;min-height:min(40rem,74svh);display:flex;align-items:flex-end;color:var(--wit);background:var(--nacht);padding:8rem 0 clamp(3rem,6vw,5rem);overflow:hidden}
.pkop>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pkop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,14,13,.55),rgba(12,14,13,.15) 40%,rgba(12,14,13,.88))}
.pkop-in{position:relative;z-index:1}
.pkop h1{font-size:clamp(3.2rem,11vw,10rem);line-height:.84;margin-left:-.03em}
.pkop .lead{max-width:44rem;margin:1.4rem 0 0}
@media (orientation:landscape) and (max-height:520px){.pkop{min-height:100svh;padding-top:5rem}.pkop h1{font-size:min(11vw,24svh)}}
body.kaal main{padding-top:4.5rem;background:var(--nacht)}
.tegenover{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.6rem,5vw,5rem);align-items:center;margin-bottom:clamp(3rem,7vw,6rem)}
.tegenover:last-child{margin-bottom:0}
.tegenover figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.tegenover.om figure{order:2}
.tegenover .kop-l{margin-bottom:1rem}
@media (max-width:900px){.tegenover{grid-template-columns:minmax(0,1fr)}.tegenover.om figure{order:0}}
.leeskolom .kop-l{margin-bottom:1.2rem}
.waarom .kop-xl{margin-bottom:2.5rem}
.waarom-lijst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem clamp(1.5rem,4vw,4rem)}
.waarom-lijst div{border-top:.3125rem solid var(--lime);padding-top:1rem}
.waarom-lijst dt{font-family:var(--kopf);font-weight:800;text-transform:uppercase;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1;margin-bottom:.7rem}
@media (max-width:900px){.waarom-lijst{grid-template-columns:minmax(0,1fr)}}
.band.catalogus{--bg:var(--wit);padding-top:clamp(2rem,4vw,3.5rem)}
.cat-nav{position:sticky;top:4.3rem;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;padding:.6rem 0;background:var(--wit);border-bottom:.125rem solid var(--asfalt)}
.cat-nav ul{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem}
.cat-nav ul a{display:inline-flex;align-items:center;min-height:2.75rem;min-width:2.75rem;font-family:var(--kopf);font-weight:800;font-size:1.375rem;text-transform:uppercase;text-decoration:none}
.cat-nav ul a{box-shadow:inset 0 -.3125rem 0 transparent;transition:box-shadow .2s}
.cat-nav ul a:hover,.cat-nav ul a:focus-visible{box-shadow:inset 0 -.3125rem 0 var(--lime)}
.cat-nav .knop{min-height:2.75rem;font-size:1.0625rem;padding:.2rem 1rem}
.cat{padding-top:clamp(3rem,6vw,5rem);scroll-margin-top:7rem}
.cat .kop-xl{margin-bottom:1.5rem}
.producten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.5rem,4vw,4rem)}
.product{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:1.4rem;align-items:center;padding:1rem 0;border-top:.0625rem solid var(--zink)}
.product img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}
.product h3{font-family:var(--kopf);font-weight:700;font-size:1.5rem;line-height:1.05;text-transform:uppercase;margin-bottom:.35rem;hyphens:auto;overflow-wrap:break-word}
.product li{font-size:.9375rem;line-height:1.4;color:#3d423f}
@media (max-width:900px){.producten{grid-template-columns:minmax(0,1fr)}.cat-nav{top:4.6rem}}
.cat-pdf{margin:2.5rem 0 0}
@media (max-width:700px){.cat-nav .knop{display:none}.cat-nav ul{gap:0 1rem;flex-wrap:nowrap}.cat-nav ul a{font-size:1.1875rem}}
@media (min-width:701px){.cat-pdf{display:none}}
@media (max-width:480px){.product{grid-template-columns:minmax(0,6.5rem) minmax(0,1fr);gap:1rem}.product h3{font-size:1.3125rem}}
.berichten{display:grid;gap:2rem}
.bericht{display:block;text-decoration:none;border-top:.3125rem solid var(--asfalt);padding-top:1.2rem;max-width:52rem}
.bericht time{font-weight:600}.bericht .kop-l{margin:.3rem 0 .8rem}
.juridisch h1{margin-bottom:2rem;hyphens:auto;font-size:clamp(2.2rem,6vw,5rem)}
.juridisch h2{font-family:var(--kopf);font-weight:700;text-transform:uppercase;font-size:1.625rem;margin:2rem 0 .5rem}
.nf{min-height:70svh;display:flex;align-items:center}

/* inloop */
.rv{opacity:0;transform:translateY(1.6rem);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform: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}.rv{opacity:1;transform:none}}
@media print{.kop,.lade,.fre-poort{display:none!important}}

/* bladerbare brochure (Producten_24.pdf) */
.brochure-kop{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,5vw,5rem);align-items:end;margin-bottom:clamp(2rem,4vw,3.5rem)}
.brochure-kop .lead{margin:0;opacity:.85}
.boek-buhne{perspective:250rem;display:flex;justify-content:center;padding:1rem 0 2rem;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.boek{--bw:min(100%,calc((100svh - 17rem) * 1.414),78rem);position:relative;width:var(--bw);transform:translateX(-25%);transition:transform .7s cubic-bezier(.3,.1,.2,1)}
.boek::before{content:"";display:block;padding-top:70.756%}
.boek.open{transform:none}.boek.dicht-achter{transform:translateX(25%)}
.blad{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,.1,.2,1),z-index 0s .45s;cursor:pointer}
.blad.om{transform:rotateY(-180deg)}
.blad-voor,.blad-achter{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--wit);overflow:hidden;box-shadow:0 .6rem 2rem rgba(0,0,0,.45)}
.blad-voor{transform:rotateY(0deg) translateZ(.0625rem)}
.blad-achter{transform:rotateY(180deg) translateZ(.0625rem)}
/* zijden wisselen halverwege de omslag; zo werkt het ook waar backface-visibility hapert (WebKit) */
.blad-voor,.blad-achter{transition:visibility 0s .45s}
.blad.om .blad-voor,.blad:not(.om) .blad-achter{visibility:hidden}
.blad img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.blad img{width:100%;height:100%;object-fit:cover}
.blad-voor::after,.blad-achter::after{content:"";position:absolute;inset:0;pointer-events:none}
.blad-voor::after{background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,0) 7%)}
.blad-achter::after{background:linear-gradient(270deg,rgba(0,0,0,.22),rgba(0,0,0,0) 7%)}
.boek-strook{display:none}
.boek-bediening{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.8rem 1.2rem}
.boek-knop{display:inline-flex;align-items:center;justify-content:center;width:3.25rem;height:3.25rem;background:transparent;border:.125rem solid var(--lime);color:var(--lime);cursor:pointer;border-radius:0;padding:0}
.boek-knop span{width:1.6rem;height:.75rem;background:currentColor;clip-path:polygon(100% 38%,32% 38%,32% 0,0 50%,32% 100%,32% 62%,100% 62%)}
.boek-knop.vooruit span{transform:scaleX(-1)}
.boek-knop:hover:not(:disabled){background:var(--lime);color:var(--asfalt)}
.boek-knop:disabled{opacity:.3;cursor:default}
.boek-teller{margin:0;min-width:12rem;text-align:center;font-family:var(--kopf);font-weight:700;font-size:1.25rem;text-transform:uppercase;letter-spacing:.03em;font-variant-numeric:tabular-nums}
@media (max-width:1180px){.brochure-kop{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){
  .boek-buhne{display:none}
  .boek-strook{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--rand)) 1.4rem;padding:0 var(--rand);scrollbar-width:none;overscroll-behavior-x:contain}
  .boek-strook::-webkit-scrollbar{display:none}
  .boek-strook li{flex:0 0 82%;scroll-snap-align:center;background:var(--wit);box-shadow:0 .4rem 1.4rem rgba(0,0,0,.45)}
  .boek-strook img{width:100%;height:auto}
}
@media (prefers-reduced-motion:reduce){.boek,.blad,.blad-voor,.blad-achter{transition:none}}