/* paal.tdgdigital.com, concept "Kop erop." voor paalkopemmer.nl (TDG Digital, 2026-11-03).
   De gekozen emmerkleur (--emmer) loopt door de hele site: hero, logo-emmers, knoppen, configurator. */
@font-face{font-family:"Geologica";src:url(/fonts/display.woff2) format("woff2");font-weight:300 900;font-display:swap}
:root{
  --inkt:#0e1726;--inkt-2:#3b4556;--papier:#f3f0ea;--beton:#e6e1d8;--wit:#fff;--merk:#005ECA;--merk-licht:#8fb8ff;
  --emmer:#1d6fd6;--emmer-ink:#fff;--emmer-tekst:#1d6fd6;
  --gut:clamp(1rem,4vw,4rem);--kop-h:4.25rem;
  --f:"Geologica",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--kop-h)}
@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(--papier);color:var(--inkt);font-family:var(--f);font-weight:400;line-height:1.55;font-size:1.0625rem}
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-weight:800;letter-spacing:-.03em;line-height:.98;margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--merk);outline-offset:3px}
::selection{background:var(--merk);color:#fff}
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(--papier);padding:.5rem 1rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.klein{font-size:.85rem;color:var(--inkt-2);margin:.6rem 0 0}

/* knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.8rem 1.4rem;border-radius:999px;
  background:var(--emmer);color:var(--emmer-ink);font-weight:700;text-decoration:none;border:0;cursor:pointer;font:inherit;font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:background .5s,color .5s,transform .2s}
.knop:hover{transform:translateY(-2px)}
.knop-lijn{background:rgba(255,255,255,.75);color:var(--inkt);box-shadow:inset 0 0 0 2px var(--inkt);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.knop-klein{min-height:2.6rem;padding:.5rem 1.1rem;font-size:.95rem}
.knop-breed{width:100%}
.knoppen{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}

/* kop */
.kop{position:fixed;inset:0 0 auto;z-index:40;height:var(--kop-h);display:flex;align-items:center;gap:2rem;padding:0 var(--gut);
  transition:background .35s,box-shadow .35s}
.kop.is-vast{background:rgba(243,240,234,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(14,23,38,.08)}
.kop-logo{display:flex;align-items:center;min-height:2.75rem;flex-shrink:0}
.logo-kop{width:auto;height:1.9rem}
.kop-nav{display:flex;gap:1.8rem;margin-left:auto}
.kop-nav a{text-decoration:none;font-weight:600;font-size:.98rem;padding:.6rem 0;background:linear-gradient(var(--emmer),var(--emmer)) 0 100%/0 3px no-repeat;transition:background-size .3s}
.kop-nav a:hover{background-size:100% 3px}
.menuknop{display:none}
.lade{position:fixed;inset:var(--kop-h) 0 auto;background:var(--papier);padding:1rem var(--gut) 2rem;display:flex;flex-direction:column;
  max-height:calc(100dvh - var(--kop-h));overflow-y:auto;box-shadow:0 20px 40px rgba(0,0,0,.12)}
.lade a{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;text-decoration:none;padding:.7rem 0;border-bottom:1px solid rgba(14,23,38,.1)}
@media (max-width:900px){
  :root{--kop-h:3.75rem}
  .kop-nav,.kop-knop{display:none}
  .logo-kop{height:1.55rem}
  .menuknop{display:block;margin-left:auto;width:2.9rem;height:2.9rem;flex-shrink:0;border:0;border-radius:50%;background:var(--inkt);cursor:pointer;position:relative}
  .menuknop span:first-child,.menuknop span:first-child::before{position:absolute;left:.85rem;right:.85rem;height:2px;background:#fff;content:"";transition:transform .3s}
  .menuknop span:first-child{top:1.2rem}.menuknop span:first-child::before{left:0;right:0;top:.45rem}
  .menuknop[aria-expanded=true] span:first-child{transform:translateY(.22rem) rotate(45deg)}
  .menuknop[aria-expanded=true] span:first-child::before{transform:translateY(-.45rem) rotate(-90deg)}
}

/* opening: twee emmers vallen op de "aa" */
.opening{position:fixed;inset:0;z-index:60;background:var(--papier);display:grid;place-items:center;cursor:pointer;
  transition:clip-path .7s cubic-bezier(.7,0,.2,1);clip-path:inset(0 0 0 0)}
.opening.is-weg{clip-path:inset(0 0 100% 0)}
.opening-logo{width:min(84vw,46rem)}
.logo-groot{width:100%;height:auto;overflow:visible}
.logo-groot .lt{opacity:0;animation:pk-in .5s .1s forwards}
.logo-groot .emmer{transform-box:fill-box;transform-origin:50% 100%;transform:translateY(-260%);animation:pk-val .62s cubic-bezier(.5,0,.75,0) forwards,pk-klak .34s .62s ease-out}
.logo-groot .emmer-1{animation-delay:.45s,1.07s}.logo-groot .emmer-2{animation-delay:.7s,1.32s}
@keyframes pk-in{to{opacity:1}}
@keyframes pk-val{to{transform:translateY(0)}}
@keyframes pk-klak{0%{transform:scale(1.08,.88)}55%{transform:scale(.97,1.04)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.logo-groot .lt{opacity:1;animation:none}.logo-groot .emmer{transform:none;animation:none}}

/* hero */
.hero{position:relative;height:100svh;min-height:34rem;max-height:62vw;overflow:hidden;background:#d9cbb8;isolation:isolate}
.hero-beeld,.hero-poster,.hero-doek{position:absolute;inset:0;width:100%;height:100%}
.hero-poster{object-fit:cover;object-position:50% 60%}
.hero-doek{opacity:0;transition:opacity .6s}
.hero-doek.is-aan{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 55% at 12% 12%,rgba(243,240,234,.78),rgba(243,240,234,.35) 55%,rgba(243,240,234,0) 80%);pointer-events:none;z-index:1}
.hero-tekst{position:absolute;z-index:2;left:var(--gut);top:calc(var(--kop-h) + clamp(.5rem,3vh,2.5rem));max-width:min(40rem,52vw)}
.hero h1{font-size:clamp(3.2rem,7vw,7.4rem);color:var(--inkt)}
.h1-klein{display:block;font-size:max(.95rem,.15em);letter-spacing:0;font-weight:700;margin-bottom:.9rem;color:var(--merk)}
.hero-tekst p{font-size:clamp(1.02rem,1.25vw,1.3rem);max-width:34rem;margin:.9rem 0 0;font-weight:600;text-wrap:pretty;text-shadow:0 0 .6rem rgba(243,240,234,.95),0 0 1.4rem rgba(243,240,234,.8)}
.kleurkolom{position:absolute;z-index:2;right:var(--gut);top:50%;transform:translateY(-44%);background:rgba(255,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:1.25rem;padding:.9rem .6rem .6rem;box-shadow:0 18px 40px rgba(40,30,10,.18)}
.kleurkolom-naam{margin:0 .3rem .5rem;font-weight:800;font-size:.95rem;line-height:1.15;width:5.2rem}
.kleurkolom-naam small{display:block;font-weight:500;font-size:.75rem;color:var(--inkt-2)}
.kleurkolom ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,2.6rem);grid-auto-rows:2.6rem}
.stip,.staal{width:100%;height:100%;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center;border-radius:50%}
.stip span,.staal span{font-size:0;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--k);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.08);transition:transform .2s}
.stip:hover span,.staal:hover span{transform:scale(1.15)}
.stip[aria-pressed=true] span,.staal[aria-pressed=true] span{box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 0 0 3px #fff,0 0 0 5px var(--inkt)}
@media (max-width:900px),(max-height:700px){
  .hero{height:100svh;max-height:none;min-height:36rem}
  .hero-poster{object-position:50% 70%}
  .hero-tekst{max-width:none;right:var(--gut)}
  .kleurkolom{top:auto;bottom:max(1rem,env(safe-area-inset-bottom));left:var(--gut);right:var(--gut);transform:none;display:flex;align-items:center;gap:.4rem;padding:.35rem .35rem .35rem .9rem;border-radius:999px}
  .kleurkolom-naam{margin:0;width:4.6rem;flex-shrink:0}
  .kleurkolom ul{display:flex;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 .6rem,#000 calc(100% - 1rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 .6rem,#000 calc(100% - 1rem),transparent);padding:0 .3rem}
  .kleurkolom ul::-webkit-scrollbar{display:none}
  .kleurkolom li{flex:0 0 2.75rem;height:2.75rem}
}
@media (max-width:900px) and (orientation:portrait){.hero{height:88svh}}
@media (max-height:500px) and (orientation:landscape){
  .hero{min-height:26rem}.hero h1{font-size:2.8rem}.hero-tekst p{display:none}.hero-tekst{top:calc(var(--kop-h) + .5rem);max-width:60%}.knoppen{margin-top:.8rem}
}

/* zin */
.zin{padding:clamp(4rem,10vw,9rem) var(--gut) clamp(3rem,7vw,6rem)}
.zin-groot{font-size:clamp(2.1rem,5.6vw,6.2rem);font-weight:800;letter-spacing:-.035em;line-height:1.02;margin:0;max-width:22ch;hyphens:manual;text-wrap:balance}
.zin-groot em{font-style:normal;color:var(--emmer-tekst);transition:color .6s}
.feiten{list-style:none;margin:clamp(2.5rem,6vw,5rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,3vw,3rem)}
.feiten li{border-top:2px solid var(--inkt);padding-top:1rem;display:flex;flex-direction:column;gap:.3rem}
.feiten b{font-size:clamp(2.4rem,4.4vw,4.6rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.feiten span{max-width:20rem;color:var(--inkt-2)}
@media (max-width:700px){.feiten{grid-template-columns:1fr}}

/* product */
.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--wit)}
.product-foto{margin:0;min-height:100%;position:relative;overflow:hidden}
.product-foto img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.product-tekst{padding:clamp(2.5rem,7vw,7rem) var(--gut);align-self:center}
.product h2,.maten h2,.ontwerp h2,.aanvragen h2{font-size:clamp(2.4rem,5vw,5rem)}
.lead{font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1.45;margin:1.4rem 0 2rem;max-width:34rem;font-weight:500}
.spec{margin:0;max-width:36rem}
.spec div{display:grid;grid-template-columns:8rem 1fr;gap:1rem;padding:.95rem 0;border-top:1px solid rgba(14,23,38,.14)}
.spec dt{font-weight:700}
.spec dd{margin:0;color:var(--inkt-2)}
@media (max-width:820px){.product{grid-template-columns:1fr}.product-foto img{aspect-ratio:1/1;object-position:50% 40%}.spec div{grid-template-columns:6.5rem 1fr}}
@media (min-width:600px) and (max-width:820px){.product-foto img{aspect-ratio:16/11}}

/* maten: bouwtekening */
.maten{background:var(--inkt);color:#e9eef7;padding:clamp(4rem,8vw,7rem) var(--gut);
  background-image:linear-gradient(rgba(143,184,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(143,184,255,.07) 1px,transparent 1px);background-size:2rem 2rem}
.maten-kop{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1.5rem}
.schakel{display:inline-flex;background:rgba(255,255,255,.08);border-radius:999px;padding:.3rem;gap:.2rem}
.schakel button{min-height:2.75rem;padding:.5rem 1.3rem;border:0;border-radius:999px;background:none;color:inherit;font:inherit;font-weight:700;cursor:pointer}
.schakel button[aria-checked=true]{background:var(--emmer);color:var(--emmer-ink)}
.schakel-licht{background:var(--beton)}
.tekening{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);margin:clamp(2rem,5vw,4rem) 0;align-items:center}
.tekening svg{width:100%;height:auto;aspect-ratio:var(--ar);overflow:visible}
.tek-zij{--ar:520/470}.tek-boven{--ar:1/1;max-width:30rem;justify-self:center}
.tekening text{paint-order:stroke;stroke:#0e1726;stroke-width:6px;stroke-linejoin:round;font-family:var(--f);fill:#e9eef7;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.tekening .lbl{fill:#b7c4d8;font-weight:500;font-size:15px}
@media (max-width:820px){.tekening text{font-size:22px}.tekening .lbl{font-size:20px}}
.maattabel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.maattabel table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.maattabel th,.maattabel td{text-align:left;padding:.85rem .5rem .85rem 0;border-bottom:1px solid rgba(233,238,247,.16)}
.maattabel thead th{font-weight:500;color:#9fb0c8;font-size:.9rem}
.maattabel tbody tr{transition:color .3s;color:#7e8ba0}
.maattabel tbody tr.is-aan{color:#fff}
.pastool label{display:flex;justify-content:space-between;gap:1rem;font-weight:700;flex-wrap:wrap}
.pastool output{color:var(--merk-licht);font-variant-numeric:tabular-nums}
.pastool input{width:100%;margin:1rem 0 .4rem;accent-color:var(--emmer);height:2.5rem}
.pastool-uit{font-size:clamp(1.2rem,1.8vw,1.6rem);font-weight:700;margin:.4rem 0 0;line-height:1.3}
.maten .klein{color:#9fb0c8}
@media (max-width:820px){.tekening,.maattabel{grid-template-columns:1fr}}

/* ontwerp */
.ontwerp{background:var(--wit);padding:clamp(4rem,8vw,7rem) var(--gut)}
.ontwerp-kop{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2rem;align-items:end}
.ontwerp-kop p{margin:0;max-width:30rem;font-size:1.1rem;color:var(--inkt-2)}
.ontwerp-raam{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);margin-top:clamp(2rem,4vw,3.5rem)}
.ontwerp-doek{position:relative;background:radial-gradient(120% 80% at 50% 20%,#f6f3ee,#e2dcd1);border-radius:1.5rem;overflow:hidden;touch-action:pan-y;min-height:24rem}
.ontwerp-doek canvas{width:100%;height:auto;aspect-ratio:720/760;cursor:grab}
.ontwerp-doek canvas:active{cursor:grabbing}
.sleep{position:absolute;left:1.2rem;right:1.2rem;top:1rem;margin:0;font-size:.85rem;color:var(--inkt-2);font-weight:700;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.sleep span{font-weight:500}
.zijden{position:absolute;right:1rem;bottom:1rem;display:flex;gap:.4rem}
.zijden button{min-height:2.6rem;padding:.4rem 1rem;border-radius:999px;border:0;background:rgba(255,255,255,.85);font:inherit;font-weight:700;font-size:.9rem;cursor:pointer}
.zijden button[aria-pressed=true]{background:var(--inkt);color:#fff}
.ontwerp-keuze fieldset{border:0;margin:0 0 1.6rem;padding:0}
.ontwerp-keuze legend{font-weight:800;margin-bottom:.7rem;display:flex;gap:.6rem;align-items:baseline;padding:0}
.ontwerp-keuze legend span{font-weight:500;color:var(--inkt-2)}
.stalen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(2.6rem,1fr));gap:.1rem}
.stalen li{aspect-ratio:1}
.upload{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;cursor:pointer}
.upload input{position:absolute;opacity:0;width:1px;height:1px}
.upload-knop{display:inline-flex;align-items:center;min-height:2.9rem;padding:.6rem 1.2rem;border-radius:999px;box-shadow:inset 0 0 0 2px var(--inkt);font-weight:700}
.upload input:focus-visible+.upload-knop{outline:3px solid var(--merk);outline-offset:3px}
.upload-naam{color:var(--inkt-2);font-size:.92rem;overflow-wrap:anywhere}
.drukkleuren{display:flex;flex-wrap:wrap;gap:.5rem}
.druk{display:inline-flex;align-items:center;gap:.5rem;min-height:2.6rem;padding:.4rem .9rem .4rem .45rem;border-radius:999px;border:0;background:var(--beton);font:inherit;font-weight:600;font-size:.9rem;cursor:pointer}
.druk::before{content:"";width:1.6rem;height:1.6rem;border-radius:50%;background:var(--k);box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.druk[aria-pressed=true]{background:var(--inkt);color:#fff}
@media (max-width:900px){.ontwerp-kop,.ontwerp-raam{grid-template-columns:1fr}}
@media (min-width:600px) and (max-width:900px){.ontwerp-doek canvas{max-width:34rem;margin:0 auto}}

/* aanvragen */
.aanvragen{background:var(--papier);padding:clamp(4rem,8vw,7rem) var(--gut);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem)}
.aanvragen-tekst p{font-size:1.15rem;max-width:26rem;color:var(--inkt-2)}
.contact{list-style:none;padding:0;margin:2rem 0 0}
.contact a{display:inline-block;font-weight:800;font-size:clamp(1.2rem,1.8vw,1.6rem);letter-spacing:-.02em;text-decoration:none;padding:.35rem 0;border-bottom:3px solid var(--emmer);transition:border-color .5s}
.contact li+li{margin-top:.6rem}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem;background:var(--wit);padding:clamp(1.25rem,3vw,2.5rem);border-radius:1.5rem}
.veld{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.veld-breed{grid-column:1/-1}
.veld label{font-weight:700;font-size:.92rem}
.veld select{-webkit-appearance:none;appearance:none;background:#fbfaf7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%230e1726' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 1rem center;padding-right:2.6rem}
.veld input,.veld select,.veld textarea{font:inherit;font-size:1rem;padding:.8rem .9rem;border-radius:.75rem;border:1.5px solid #cfc8bc;background-color:#fbfaf7;color:var(--inkt);min-height:3rem;width:100%}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:none;border-color:var(--merk);box-shadow:0 0 0 3px rgba(0,94,202,.18)}
.veld.is-fout input{border-color:#c0182c}
.form-voet{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:.4rem}
.form-voet .klein{margin:0;max-width:28rem}
@media (max-width:900px){.aanvragen{grid-template-columns:1fr}}
@media (max-width:560px){.form{grid-template-columns:1fr}}

/* voet */
.voet{background:#0a111c;color:#c9d2e0;padding:clamp(3rem,6vw,5rem) var(--gut) 2rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem 4rem}
.logo-voet{height:2.2rem;width:auto}
.voet-a p{margin:1rem 0 0;max-width:24rem}
.voet-b{display:flex;gap:1.5rem;align-items:flex-start}
.voet-b p{margin:0;line-height:1.7}
.voet-pt{flex-shrink:0}.voet-pt img{width:6.5rem;height:auto}
.voet a{color:#fff}
.voet-c{grid-column:1/-1;margin:1.5rem 0 0;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem;color:#8d98aa}
@media (max-width:760px){.voet{grid-template-columns:1fr}.voet-b{flex-direction:column}}

.leeg{min-height:80svh;display:grid;place-content:center;justify-items:start;gap:1rem;padding:calc(var(--kop-h) + 2rem) var(--gut) 4rem}
.leeg h1{font-size:clamp(2.6rem,7vw,6rem)}
.body-404 .kop{background:rgba(243,240,234,.92)}

/* inloop */
.js .inloop{opacity:0;transform:translateY(1.5rem);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .inloop.is-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}.js .inloop{opacity:1;transform:none}}
@media (max-width:380px){.hero .knop{font-size:.92rem;padding:.7rem 1.05rem;white-space:nowrap}.hero-tekst p{font-size:.98rem}}