/* hout.tdgdigital.com — "Houtskool is houtskool. Toch?" Concept voor houtskool.nl (Flames & Flavour).
   Kool-zwart, studio-wit (hun productfoto's staan op wit), as-papier en één accent: gloed. Dooskleuren alleen bij de dozen. */
@font-face{font-family:"Display";src:url(/fonts/display.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Tekst";src:url(/fonts/tekst.woff2) format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Tekst";src:url(/fonts/tekst-i.woff2) format("woff2");font-weight:300 800;font-style:italic;font-display:swap}
:root{--kool:#0e0d0c;--roet:#1b1917;--as:#8b857d;--papier:#f1eee8;--wit:#fff;--inkt:#151311;--gloed:#ff5a1f;--gloed-d:#d8420c;--lijn:rgba(21,19,17,.16);
  --rand:clamp(1.15rem,4vw,3.5rem);--kop-h:4.25rem;--disp:"Display",Georgia,serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--kop-h)}
@media (min-width:1440px){html{font-size:clamp(100%,1.1111vw,200%)}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--kool);color:var(--inkt);font-family:"Tekst",system-ui,sans-serif;font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased}
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,h4{hyphens:manual;overflow-wrap:normal;text-wrap:balance;font-family:var(--disp);font-weight:800;line-height:1;letter-spacing:-.015em;margin:0}
p{margin:0 0 1em}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:.16rem solid var(--gloed);outline-offset:.2rem}
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(--wit);padding:.5rem 1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.wrap{width:min(100% - 2*var(--rand),84rem);margin-inline:auto}
main{display:block;padding-top:var(--kop-h)}
main>section,main>article{position:relative}

/* ---------- knoppen en links ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;min-height:2.9rem;padding:.55rem 1.35rem;border:.12rem solid var(--inkt);background:var(--inkt);color:var(--wit);font-weight:700;text-decoration:none;border-radius:.2rem;line-height:1.15;text-align:center;transition:background-color .2s,color .2s,border-color .2s}
.knop:hover{background:transparent;color:var(--inkt)}
.knop-gloed{background:var(--gloed);border-color:var(--gloed);color:var(--kool)}
.knop-gloed:hover{background:var(--wit);border-color:var(--wit);color:var(--kool)}
.winkel .knop-gloed:hover,.lees .knop-gloed:hover{background:var(--inkt);border-color:var(--inkt);color:var(--wit)}
.knop-kool{background:var(--kool);border-color:var(--kool);color:var(--wit)}
.knop-kool:hover{background:transparent;color:var(--kool)}
.knop-klein{min-height:2.75rem;padding:.35rem .9rem;font-size:.92rem}
.lijnlink{display:inline-flex;align-items:center;min-height:2.75rem;font-weight:700;text-decoration:underline;text-decoration-thickness:.12em;text-underline-offset:.28em;text-decoration-color:var(--gloed)}
.lijnlink:hover{text-decoration-color:currentColor}
.uit{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--as);font-weight:700}
.voorzin{font-family:var(--disp);font-style:normal;font-weight:500;font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:1.3;max-width:34em;margin:0 0 .6em;color:#5a544d}

/* ---------- breukrand (motief): bovenkant van een sectie als gebroken houtskool ---------- */
.rand{position:absolute;left:0;right:0;bottom:calc(100% - 1px);width:100%;height:clamp(1.1rem,2.6vw,2.6rem);pointer-events:none;z-index:2}
.rand-s{display:none}
@media (max-width:700px){.rand-b{display:none}.rand-s{display:block}}

/* ---------- kop ---------- */
.kop{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--kop-h);display:flex;align-items:center;gap:1.5rem;padding:0 var(--rand);background:var(--kool);color:var(--wit)}
.kop-logo{display:flex;align-items:center;min-height:2.75rem;flex-shrink:0}
.kop-logo img{width:auto;height:2.3rem}
.kop-nav{margin-left:auto}
.kop-nav ul{display:flex;gap:.15rem;list-style:none;margin:0;padding:0}
.kop-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;min-width:2.75rem;padding:0 .7rem;text-decoration:none;font-weight:600;font-size:.97rem;white-space:nowrap;border-radius:.2rem}
.kop-nav a:hover{color:var(--gloed)}
.kop-nav a[aria-current]{box-shadow:inset 0 -.16rem 0 var(--gloed)}
.kop-mand{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.9rem;height:2.9rem;flex-shrink:0;color:var(--wit)}
.kop-mand svg{width:1.6rem;height:1.6rem}
.mand-n{position:absolute;top:.15rem;right:0;min-width:1.25rem;height:1.25rem;padding:0 .25rem;border-radius:1rem;background:var(--gloed);color:var(--kool);font-size:.75rem;font-weight:800;display:grid;place-items:center}
.menu-knop{display:none;flex-shrink:0;width:2.9rem;height:2.9rem;border:0;background:none;padding:0;position:relative}
.menu-knop span:not(.sr){position:absolute;left:.6rem;right:.6rem;height:.14rem;background:var(--wit);transition:transform .25s,top .25s}
.menu-knop span:nth-child(1){top:1.1rem}.menu-knop span:nth-child(2){top:1.7rem}
.menu-knop[aria-expanded=true] span:nth-child(1){top:1.4rem;transform:rotate(45deg)}
.menu-knop[aria-expanded=true] span:nth-child(2){top:1.4rem;transform:rotate(-45deg)}
.lade{position:fixed;inset:var(--kop-h) 0 0 0;z-index:49;background:var(--kool);color:var(--wit);overflow-y:auto;padding:1.5rem var(--rand) 3rem}
.lade ul{list-style:none;margin:0;padding:0}
.lade-hoofd a{display:flex;align-items:center;min-height:3.1rem;font-family:var(--disp);font-weight:800;font-size:clamp(1.6rem,6vw,2.4rem);text-decoration:none;line-height:1.05}
.lade-kop{margin:1.6rem 0 .3rem;color:var(--as);font-size:.95rem}
.lade-sub a,.lade-bel a{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:none;font-weight:600}
.lade-bel{margin-top:1.4rem}
@media (max-width:1180px){.kop-nav{display:none}.menu-knop{display:block}.kop-mand{margin-left:auto}}

/* ---------- HERO ---------- */
.hero{margin-top:calc(-1*var(--kop-h));padding-top:var(--kop-h);min-height:100svh;background:var(--kool);color:var(--wit);display:grid;align-items:end;overflow:hidden;z-index:0;--aan:0}
.hero-beeld{position:absolute;inset:0;z-index:-1}
.hero-beeld img,.hero-beeld video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-gloeit,.hero-film,.hero-lus{opacity:0;transition:opacity .7s}
.hero.speelt .hero-film{opacity:1}
.hero.gloeit .hero-gloeit{opacity:1}
.hero.leeft .hero-lus{opacity:1}
.hero.gloeit .hero-film{opacity:0;transition-delay:.7s}
.hero-donker{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,13,12,.78) 0,rgba(14,13,12,.1) 26%,rgba(14,13,12,.15) 46%,rgba(14,13,12,.8) 78%,var(--kool) 100%)}
/* kleine gimmick: tik op de kolen en ze gloeien daar even op */
.hero-pook{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.gloei{position:absolute;width:62vmin;height:62vmin;margin:-31vmin 0 0 -31vmin;border-radius:50%;background:radial-gradient(closest-side,rgba(255,206,120,.95),rgba(255,120,24,.75) 32%,rgba(255,70,0,.32) 60%,transparent);mix-blend-mode:screen;animation:gloei 1.5s ease-out forwards}
@keyframes gloei{0%{transform:scale(.15);opacity:0}12%{opacity:1}100%{transform:scale(1.5);opacity:0}}
.hero-in{position:relative;padding:clamp(1.2rem,5svh,5rem) 0 clamp(1.2rem,3.4svh,3rem)}
.hero-merk{margin:0 0 clamp(.6rem,1.8svh,1.6rem);font-weight:700;letter-spacing:.01em;color:rgba(255,255,255,.86)}
.hero h1{font-weight:900;font-size:min(clamp(2.3rem,11.4vw,12.5rem),16.5svh,calc((100vw - 2*var(--rand))/7.45));line-height:.86;letter-spacing:-.035em;text-wrap:initial;margin-bottom:clamp(1rem,3.2svh,2.6rem)}
.hero h1 .w{display:inline-block;white-space:nowrap}
.hero h1 em{font-style:normal;color:color-mix(in srgb,var(--gloed) calc(var(--aan)*100%),rgba(255,255,255,.28));text-shadow:0 .03em .35em rgba(14,13,12,.7)}
.hero-lead{font-size:clamp(1.08rem,1.45vw,1.3rem);line-height:1.5;max-width:38rem;margin:0 0 clamp(.9rem,2.6svh,2rem)}
.hero-knoppen{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;align-items:center;margin:0}
.hero-voet{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.4rem 2rem;margin-top:clamp(1rem,3.4svh,3.2rem);padding-top:clamp(.7rem,1.8svh,1.1rem);border-top:.07rem solid rgba(255,255,255,.3)}
.klok{margin:0;font-weight:700}
.hero .klok{font-size:.98rem;line-height:1.45}
.klok b{color:var(--gloed)}
.hero-tik{margin:0;font-weight:700;font-size:.92rem;color:rgba(255,255,255,.7);opacity:0;transition:opacity .8s 1s}
.hero.gloeit .hero-tik{opacity:1}
.hero-tik::before{content:"";display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--gloed);margin-right:.5rem;animation:tikpuls 2.4s ease-in-out infinite}
@keyframes tikpuls{50%{transform:scale(1.6);opacity:.5}}
@media (max-width:820px){
  /* telefoon: meer lucht tussen de regels en blokken; de kolen houden de bovenste helft */
  .hero-donker{background:linear-gradient(180deg,rgba(14,13,12,.8) 0,rgba(14,13,12,.1) 16%,rgba(14,13,12,.35) 34%,rgba(14,13,12,.82) 56%,rgba(14,13,12,.94) 78%,var(--kool) 96%)}
  .hero-beeld img,.hero-beeld video{object-position:41% 50%}
  .hero-in{padding:clamp(6.5rem,25svh,15rem) 0 1.8rem}
  .hero-merk{margin-bottom:1.1rem;font-size:1rem}
  .hero h1{line-height:1.02;letter-spacing:-.03em;margin-bottom:1.6rem}
  .hero-knoppen .lijnlink{margin-top:-.2rem}
  .hero-lead{font-size:1.08rem;line-height:1.6;margin-bottom:1.8rem;hyphens:manual}
  .hero-knoppen{flex-direction:column;align-items:stretch;gap:.5rem}
  .hero-knoppen .knop{min-height:3.3rem;font-size:1.08rem}
  .hero-knoppen .lijnlink{justify-content:center;min-height:3rem}
  .hero-voet{margin-top:1.6rem;padding-top:1.2rem;flex-direction:column;gap:.7rem}
  .hero .klok{font-size:1rem;line-height:1.5}
}
@media (max-width:560px) and (orientation:portrait){
  /* telefoon staand: elk woord een eigen regel, dan kan de kop de volle breedte vullen (+38%) */
  .hero h1 .w{display:block}
  .hero h1{font-size:min(calc((100vw - 2*var(--rand))/5.82),13.5svh);line-height:.98;margin-bottom:1.5rem}
  .hero-in{padding-top:clamp(5.5rem,13svh,9rem)}
  .hero-lead{margin-bottom:1.5rem}
}
@media (orientation:landscape) and (max-height:520px){.hero h1{font-size:min(11vw,26svh);line-height:.9;margin-bottom:.7rem}.hero-in{padding:1rem 0 1rem}.hero-lead{font-size:.95rem;margin-bottom:.7rem;max-width:34rem}.hero-merk{display:none}
  .hero-knoppen{flex-direction:row;align-items:center}.hero-knoppen .knop{min-height:2.9rem}.hero-voet{margin-top:.8rem;padding-top:.6rem;flex-direction:row}}

/* ---------- DE LIJN (signatuur) ---------- */
.lijn{background:var(--wit);padding:clamp(3.5rem,8vw,7rem) 0 clamp(3rem,6vw,5.5rem)}
.lijn h2{font-weight:900;font-size:min(clamp(2.6rem,8.4vw,8.5rem),calc((100vw - 2*var(--rand))/5.3));line-height:.9;letter-spacing:-.03em;margin-bottom:.38em}
.keuze{display:grid;gap:.7rem}
.keuze-rij{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.keuze-label{width:4.2rem;font-weight:700;color:var(--as)}
.wat{display:contents}
.chip{min-height:2.9rem;padding:.4rem 1.05rem;border:.1rem solid var(--inkt);background:var(--wit);border-radius:.2rem;font-weight:700;line-height:1.1;transition:background-color .2s,color .2s}
.chip:hover{background:var(--papier)}
.chip[aria-pressed=true]{background:var(--inkt);color:var(--wit)}
.advies{margin-top:1.4rem;min-height:6.2rem;max-width:52rem}
@media (max-width:1000px){.advies{min-height:0}.dozen{padding-top:1.2rem!important}}
.advies-t{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.45;margin:0}
.advies.gekozen .advies-t,.open-citaat p,.belofte p,.voorzin,.groot{hyphens:manual}
.advies.gekozen .advies-t{font-family:var(--disp);font-weight:500;font-size:clamp(1.12rem,1.65vw,1.45rem);line-height:1.35}
.advies.gekozen .advies-t::before{content:"“"}.advies.gekozen .advies-t::after{content:"”"}
.advies-wie{margin:.5rem 0 0;font-weight:700;color:var(--as)}
.plank{padding:clamp(1.2rem,3vw,2.5rem) var(--rand) 0}
.dozen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:clamp(.2rem,.8vw,1rem);align-items:end}
.doos{display:flex;flex-direction:column;align-items:center;width:100%;padding:0 0 .6rem;border:0;background:none;text-align:center;border-bottom:.3rem solid transparent;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s,filter .35s}
.doos img{width:100%;aspect-ratio:1;object-fit:contain;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.doos-naam{font-family:var(--disp);font-weight:800;font-size:clamp(.82rem,1.15vw,1.12rem);line-height:1.08;margin-top:.3rem;min-height:2.2em;display:flex;align-items:flex-start;justify-content:center;hyphens:manual}
.doos-status{font-size:clamp(.74rem,.9vw,.86rem);color:#6b655e;line-height:1.2;margin-top:.15rem;hyphens:manual}
.doos:hover img{transform:translateY(-.4rem)}
.doos[aria-expanded=true]{border-bottom-color:var(--dk)}
.plank.kiest .doos{opacity:.26;filter:grayscale(1)}
.plank.kiest .doos.past{opacity:1;filter:none;transform:translateY(-1.1rem)}
.plank.kiest .doos[aria-expanded=true]{opacity:1;filter:none}
.schaal{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:clamp(.2rem,.8vw,1rem);margin-top:.9rem}
.schaal-deel{grid-column:span var(--span);border-top:.2rem solid var(--inkt);padding-top:.55rem;position:relative}
.schaal-deel::before,.schaal-deel::after{content:"";position:absolute;top:-.2rem;width:.2rem;height:.7rem;background:var(--inkt)}
.schaal-deel::before{left:0}.schaal-deel::after{right:0}
.schaal-deel b{display:block;font-family:var(--disp);font-weight:900;font-size:clamp(1.3rem,2.4vw,2.2rem);line-height:1;margin-bottom:.3rem}
.schaal-deel span{display:block;font-size:.9rem;line-height:1.4;color:#5a544d;max-width:30em}
.schaal-deel.aan b{color:var(--gloed-d)}
.plank-hint{margin:1.1rem 0 0;font-weight:700;color:#6b655e;font-size:.95rem}
.plank-hint .veeg{display:none}
@media (max-width:1000px){
  .plank{padding-inline:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .plank::-webkit-scrollbar{display:none}
  .dozen,.schaal{width:max-content;grid-template-columns:repeat(9,clamp(8.2rem,24vw,11rem));padding-inline:var(--rand);gap:.5rem}
  .dozen{padding-top:1.4rem}
  .schaal-deel span{font-size:.84rem}
  .plank-hint{padding-inline:var(--rand)}
  .plank-hint .veeg{display:inline}
}
/* paneel: de doos gaat open */
.panelen{margin-top:clamp(1.2rem,3vw,2.4rem);overflow-x:clip}
.open{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(1.4rem,4vw,4rem);align-items:start;background:var(--dk);color:var(--di);padding:clamp(1.2rem,3.4vw,3.4rem);border-radius:.25rem;animation:paneel-in .5s both}
@keyframes paneel-in{from{opacity:0;transform:translateY(1rem)}}
.open-zon{background:var(--papier);color:var(--inkt);box-shadow:inset 0 0 0 .1rem var(--lijn)}
.open-links{display:grid;gap:1rem}
.open-beeld{margin:0;position:relative;perspective:70rem;background:#c9a877;padding:clamp(.5rem,1.2vw,1rem);border-radius:.15rem}
.open-foto{overflow:hidden}
.open-foto img{width:100%;height:auto}
.open-los{background:var(--wit);padding:0}
.open-los img{width:100%;height:auto}
.flap{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(90deg,#b99564,#cfae7c 40%,#c29f6d);box-shadow:inset 0 0 0 .06rem rgba(0,0,0,.18);backface-visibility:hidden;transition:transform 1s cubic-bezier(.3,.7,.2,1);z-index:1}
.flap-l{left:0;transform-origin:0 50%}.flap-r{right:0;transform-origin:100% 50%;background:linear-gradient(270deg,#b99564,#cfae7c 40%,#c29f6d)}
.flap-l::after,.flap-r::after{content:"";position:absolute;top:0;bottom:0;width:.5rem;background:rgba(255,255,255,.28)}
.flap-l::after{right:0}.flap-r::after{left:0}
.is-open .flap-l{transform:rotateY(-100deg)}.is-open .flap-r{transform:rotateY(100deg)}
.is-open .flap{visibility:hidden;transition:transform 1s cubic-bezier(.3,.7,.2,1),visibility 0s 1s}
.open-stuk{margin:0;background:var(--wit);width:min(60%,16rem);border-radius:.15rem;overflow:hidden}
.open-klasse{display:flex;align-items:center;gap:.6rem;font-weight:700;margin:0 0 .6rem}
.gewicht{display:inline-flex;gap:.18rem;align-items:flex-end;height:1.1rem}
.gewicht i{width:.42rem;background:currentColor;opacity:.3;border-radius:.05rem}
.gewicht i:nth-child(1){height:45%}.gewicht i:nth-child(2){height:72%}.gewicht i:nth-child(3){height:100%}
.gewicht-licht i:nth-child(1),.gewicht-medium i:nth-child(-n+2),.gewicht-zwaar i{opacity:1}
.open h3{font-weight:900;font-size:clamp(2rem,4.6vw,4.4rem);line-height:.92;letter-spacing:-.025em;margin-bottom:.45em}
.open h4{font-size:1.2rem;margin:1.3rem 0 .4rem}
.open-citaat{margin:0 0 1.2rem;padding:0}
.open-citaat p{font-family:var(--disp);font-weight:500;font-size:clamp(1.08rem,1.5vw,1.32rem);line-height:1.35;margin:0 0 .3rem}
.open-citaat p::before{content:"“"}.open-citaat p::after{content:"”"}
.open-citaat cite{font-style:normal;font-weight:700;opacity:.8}
.open-ken{margin:0;padding:0;list-style:none}
.open-ken li{padding:.5rem 0;border-top:.07rem solid color-mix(in srgb,currentColor 30%,transparent)}
.open-koop{list-style:none;margin:1.4rem 0 0;padding:0}
.open-koop li{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1rem;padding:.55rem 0;border-top:.07rem solid color-mix(in srgb,currentColor 30%,transparent)}
.open-koop a{font-weight:700;flex:1 1 13rem;min-height:2.75rem;display:inline-flex;align-items:center}
.open-koop .prijs{white-space:nowrap}
.open-koop .uit{color:inherit;opacity:.7}
.open .knop{background:var(--di);border-color:var(--di);color:var(--dk)}
.open .knop:hover{background:transparent;color:var(--di)}
.open-zon .knop{background:var(--inkt);border-color:var(--inkt);color:var(--wit)}
.open-zon .knop:hover{background:transparent;color:var(--inkt)}
.open-dicht{margin-top:1.2rem;min-height:2.75rem;border:0;background:none;padding:0;font-weight:700;text-decoration:underline;text-underline-offset:.28em}
.prijs s{opacity:.6;font-weight:400}
@media (max-width:900px){.open{grid-template-columns:minmax(0,1fr)}.open-stuk{display:none}}

/* ---------- GROTE STUKKEN ---------- */
.stukken{background:var(--kool);color:var(--wit);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.stukken-beeld{position:relative;min-height:34rem}
.stukken-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.stukken-in{width:auto;margin:0;padding:clamp(3rem,7vw,7rem) var(--rand) clamp(3rem,7vw,7rem) clamp(1.6rem,5vw,5rem)}
.stukken h2{font-weight:900;font-size:clamp(2.4rem,5.6vw,5.8rem);line-height:.9;letter-spacing:-.03em;margin-bottom:.5em}
.groot{font-size:clamp(1.12rem,1.6vw,1.4rem);line-height:1.42}
.drie{list-style:none;margin:1.4rem 0;padding:0;font-family:var(--disp);font-weight:800;font-size:clamp(1.3rem,2.3vw,2.2rem);line-height:1.12}
.drie li{padding:.42em 0;border-top:.07rem solid rgba(255,255,255,.26)}
.drie li:last-child{border-bottom:.07rem solid rgba(255,255,255,.26)}
.belofte{margin:2rem 0 1rem;padding:0}
.belofte p{font-family:var(--disp);font-weight:500;font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.38;margin:0 0 .4rem}
.belofte p::before{content:"“"}.belofte p::after{content:"”"}
.belofte cite{font-style:normal;font-weight:700;color:var(--gloed)}
@media (max-width:700px){.stukken{grid-template-columns:minmax(0,1fr)}.stukken-beeld{min-height:0;height:min(100vw,34rem)}.stukken-in{padding:2.6rem var(--rand) 3.4rem}}

/* ---------- TINKEL ---------- */
.tinkel{background:var(--papier);padding:clamp(3.5rem,8vw,7.5rem) 0;overflow-x:clip}
.tinkel-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(1.5rem,4vw,4rem) clamp(1.5rem,5vw,5rem);align-items:center}
.tinkel h2{font-weight:900;font-size:clamp(2.5rem,6.6vw,6.8rem);line-height:.9;letter-spacing:-.03em;margin-bottom:.4em}
.tinkel-links{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center;margin-top:1.5rem}
.tinkel-beeld{position:relative;grid-row:span 2;aspect-ratio:1;display:grid;place-items:center}
.zon{position:absolute;inset:3%;border-radius:50%;background:#e8452c}
.tinkel-knop{position:relative;border:0;background:none;padding:0;width:100%;touch-action:manipulation;-webkit-tap-highlight-color:transparent;display:block}
.tinkel-knop img{width:calc(86% + var(--rand));max-width:none;height:auto;margin-left:14%;-webkit-user-drag:none;user-select:none}
.tinkel-knop.tik img{animation:tik .28s}
@keyframes tik{30%{transform:translate(.25rem,-.15rem) rotate(.6deg)}60%{transform:translate(-.12rem,.08rem)}}
.tinkel-hint{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);background:var(--kool);color:var(--wit);font-weight:700;font-size:.9rem;padding:.4rem .9rem;border-radius:.2rem;white-space:nowrap}
.kring{position:absolute;width:3rem;height:3rem;margin:-1.5rem 0 0 -1.5rem;border:.14rem solid var(--kool);border-radius:50%;pointer-events:none;animation:kring .6s ease-out forwards}
@keyframes kring{from{transform:scale(.2);opacity:.9}to{transform:scale(2.4);opacity:0}}
.tinkel-reis{margin:0;max-width:26rem}
.tinkel-reis img{width:100%;height:auto;border-radius:.15rem}
figcaption{font-size:.88rem;color:#5a544d;margin-top:.45rem;line-height:1.35}
@media (max-width:900px){.tinkel-in{grid-template-columns:minmax(0,1fr)}.tinkel-beeld{grid-row:auto;width:100%;aspect-ratio:4/3}
  .zon{inset:auto;top:2%;left:50%;height:96%;aspect-ratio:1;transform:translateX(-50%)}
  .tinkel-knop img{width:calc(66% + var(--rand));margin-left:34%}.tinkel-hint{left:58%}}

/* ---------- HERKOMST ---------- */
.herkomst{background:var(--kool);color:var(--wit)}
.herk-film{position:relative;min-height:min(78svh,48rem);display:grid;align-items:end;overflow:hidden}
.herk-film>img,.herk-film>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.herk-film>video{opacity:0;transition:opacity .8s}.herk-film>video.speelt{opacity:1}
.herk-film::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,13,12,.28) 0,rgba(14,13,12,0) 30%,rgba(14,13,12,.55) 66%,var(--kool) 100%)}
.herk-titel{position:relative;z-index:1;padding:8rem 0 1.5rem}
.herk-titel h2{font-weight:900;font-size:clamp(2.5rem,7vw,7.4rem);line-height:.9;letter-spacing:-.03em;max-width:11em;margin-bottom:.35em}
.herk-titel p{font-size:clamp(1.05rem,1.5vw,1.3rem);max-width:36rem;margin:0}
.herk-in{padding:1.5rem 0 clamp(3.5rem,7vw,6.5rem)}
.herk-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.herk-tab{min-height:2.9rem;padding:.4rem 1.05rem;border:.1rem solid rgba(255,255,255,.55);background:none;color:var(--wit);border-radius:.2rem;font-weight:700}
.herk-tab[aria-selected=true]{background:var(--wit);color:var(--kool);border-color:var(--wit)}
.herk-paneel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(1.5rem,4vw,4.5rem);align-items:start}
.herk-paneel h3{font-weight:800;font-size:clamp(1.8rem,3.6vw,3.4rem);line-height:.98;margin-bottom:.5em}
.herk-tekst p{font-size:1.08rem}
.herk-dozen{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.8rem}
.herk-dozen a{display:grid;justify-items:center;gap:.3rem;width:8rem;padding:.5rem .4rem .6rem;background:var(--wit);color:var(--inkt);text-decoration:none;font-weight:700;font-size:.9rem;line-height:1.15;text-align:center;border-radius:.15rem}
.herk-dozen img{width:100%;aspect-ratio:1;object-fit:contain}
.herk-fotos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}
.herk-fotos figure{margin:0}
.herk-fotos img{width:100%;height:auto;border-radius:.15rem}
.herk-fotos figcaption{color:rgba(255,255,255,.7)}
.herk-n0{display:none}
.herk-paneel:has(.herk-n0){grid-template-columns:minmax(0,46rem)}
.licht-lijn{color:var(--wit)}
@media (max-width:900px){.herk-paneel{grid-template-columns:minmax(0,1fr)}}

/* ---------- REST / afdelingen ---------- */
.rest{background:var(--wit);padding:clamp(3.5rem,8vw,7rem) 0}
.rest h2,.weetjes h2{font-weight:900;font-size:clamp(2.2rem,5.4vw,5.4rem);line-height:.92;letter-spacing:-.03em;margin-bottom:.6em}
.afd{list-style:none;margin:0;padding:0;border-bottom:.1rem solid var(--inkt)}
.afd a{display:grid;grid-template-columns:clamp(5rem,12vw,11rem) minmax(0,5fr) minmax(0,4fr) auto;gap:.3rem clamp(1rem,3vw,3rem);align-items:center;padding:clamp(.8rem,1.6vw,1.4rem) 0;border-top:.1rem solid var(--inkt);text-decoration:none}
.afd-beeld img{width:100%;aspect-ratio:1;object-fit:contain}
.afd-naam{hyphens:manual;font-family:var(--disp);font-weight:800;font-size:clamp(1.4rem,3.1vw,3.1rem);line-height:.98;letter-spacing:-.02em;transition:color .2s}
.afd a:hover .afd-naam{color:var(--gloed-d)}
.afd-va{font-weight:700;white-space:nowrap}
@media (max-width:900px){.afd-va{white-space:normal}.afd a{grid-template-columns:5rem minmax(0,1fr)}.afd-beeld{grid-row:span 3}.afd-regel,.afd-va{grid-column:2}.afd-regel{font-size:.95rem}}

/* ---------- WEETJES ---------- */
.weetjes{background:var(--wit);padding:0 0 clamp(4rem,8vw,7.5rem)}
.weetjes-kop{max-width:46rem;margin-bottom:clamp(1.5rem,3vw,2.6rem)}
.wt{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
.wt a{display:block;text-decoration:none}
.wt-beeld{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--papier);margin-bottom:.9rem;border-radius:.15rem}
.wt-beeld img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transition:transform .6s}
.wt a:hover img{transform:scale(1.03)}
.wt-leeg{background:var(--kool) url(/media/vuur-a-koud-960.webp) center/cover}
.wt-datum{display:block;font-size:.9rem;color:#5a544d;font-weight:700;margin-bottom:.3rem}
.wt h3,.wt h2{font-size:clamp(1.3rem,1.9vw,1.75rem);line-height:1.08;margin-bottom:.4em;hyphens:auto;overflow-wrap:break-word}
.wt p{font-size:.98rem;color:#3d3833;margin:0}
.wt a:hover h3,.wt a:hover h2{text-decoration:underline;text-decoration-color:var(--gloed);text-underline-offset:.18em}
@media (max-width:1000px){.wt{grid-template-columns:repeat(2,minmax(0,1fr))}.weetjes .wt li:nth-child(3){display:none}}
@media (max-width:600px){.wt{grid-template-columns:minmax(0,1fr)}.weetjes .wt li:nth-child(3){display:block}}

/* ---------- VERZENDEN (volle gloed) ---------- */
.verzend{background:var(--gloed);color:var(--kool);padding:clamp(3.5rem,8vw,7rem) 0}
.verzend h2{font-weight:900;font-size:clamp(2.3rem,6.4vw,6.6rem);line-height:.9;letter-spacing:-.03em;max-width:13em;margin-bottom:.6em}
.feiten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem clamp(1.2rem,3vw,3rem);margin:0 0 2rem}
.feiten div{border-top:.16rem solid var(--kool);padding-top:.7rem}
.feiten dt{font-family:var(--disp);font-weight:800;font-size:1.35rem;margin-bottom:.3rem}
.feiten dd{margin:0}
.klok-groot{font-family:var(--disp);font-weight:800;font-size:clamp(1.3rem,2.4vw,2.2rem);line-height:1.15;margin-bottom:1.4rem}
.verzend .klok b{color:var(--wit)}
@media (max-width:900px){.feiten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.feiten{grid-template-columns:minmax(0,1fr)}}

/* ---------- VOET ---------- */
.voet{position:relative;background:var(--kool);color:rgba(255,255,255,.86);padding:clamp(3rem,6vw,5rem) 0 1.6rem}
.voet-in{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,3fr));gap:2rem clamp(1.5rem,3vw,3rem)}
.voet-merk img{width:13rem;height:auto;margin-bottom:1.2rem}
.voet h2{font-size:1.25rem;color:var(--wit);margin-bottom:.7rem}
.voet ul{list-style:none;margin:0;padding:0}
.voet a{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:none}
.voet a:hover{color:var(--gloed)}
.voet-onder{display:flex;flex-wrap:wrap;gap:.2rem 2rem;justify-content:space-between;margin-top:2.4rem;padding-top:1rem;border-top:.07rem solid rgba(255,255,255,.22);font-size:.92rem}
.voet-onder p{margin:0}
.voet-onder a{text-decoration:underline;text-underline-offset:.2em}
@media (max-width:900px){.voet-in{grid-template-columns:repeat(2,minmax(0,1fr))}.voet-merk{grid-column:1/-1}}
@media (max-width:520px){.voet-in{grid-template-columns:minmax(0,1fr)}}
.toost{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:60;background:var(--wit);color:var(--inkt);padding:.8rem 1.2rem;border-radius:.25rem;box-shadow:0 .6rem 2rem rgba(0,0,0,.35);font-weight:700;max-width:calc(100vw - 2rem);display:flex;gap:1rem;align-items:center}
.toost a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--gloed-d);white-space:nowrap}

/* ---------- paginakop (subpagina's) ---------- */
.pkop{background:var(--kool) url(/media/vuur-a-koud-960.webp) center/cover;color:var(--wit);padding:clamp(2.6rem,6vw,5.5rem) 0 clamp(3.2rem,7vw,6rem);isolation:isolate}
.pkop::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,13,12,.94),rgba(14,13,12,.62));z-index:-1}
.pkop h1{font-weight:900;font-size:min(clamp(2.5rem,7.6vw,7.6rem),calc((100vw - 2*var(--rand))/(var(--n,8)*.8)));line-height:.92;letter-spacing:-.03em;max-width:14em}
.pkop-art h1{font-size:clamp(2rem,5vw,4.8rem);line-height:.98;max-width:17em;hyphens:auto;overflow-wrap:break-word}
.pkop-intro{margin:1.1rem 0 0;font-size:clamp(1.02rem,1.4vw,1.25rem);max-width:40rem;color:rgba(255,255,255,.86)}
.kruimel{margin:0 0 .5rem;font-size:.93rem;font-weight:700;color:rgba(255,255,255,.75)}
.kruimel a{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:none}
.kruimel a:hover{color:var(--gloed)}
.kruimel.donker{color:#5a544d}

/* ---------- WINKEL ---------- */
.cat,.mand{background:var(--wit);padding:clamp(1.6rem,3vw,2.6rem) 0 clamp(4rem,8vw,7rem)}
.catnav{margin:0 calc(-1*var(--rand)) 1.8rem;padding:0 var(--rand);overflow-x:auto;scrollbar-width:none}
.catnav::-webkit-scrollbar{display:none}
.catnav ul{display:flex;gap:.4rem;list-style:none;margin:0;padding:0;width:max-content}
.catnav a{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .95rem;border:.1rem solid var(--inkt);border-radius:.2rem;text-decoration:none;font-weight:700;white-space:nowrap}
.catnav a[aria-current]{background:var(--inkt);color:var(--wit)}
.cat-intro{max-width:52rem;font-size:1.08rem;margin-bottom:1.6rem}
.cat-hulp{margin:0}
.cat-aantal{font-weight:700;color:var(--as);margin-bottom:.4rem}
.winkel-kop{font-size:clamp(1.55rem,3.8vw,3.4rem);font-weight:900;margin:2.6rem 0 1rem;hyphens:auto;overflow-wrap:break-word}
.winkel-kop a{text-decoration:none}
.pks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.6rem,3vw,3rem) clamp(1rem,2.4vw,2.4rem);border-top:.1rem solid var(--inkt);padding-top:1.4rem}
.pk{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.pk-beeld{display:block;position:relative;width:100%;aspect-ratio:1;margin-bottom:.7rem}
.pk-beeld img{width:100%;height:100%;object-fit:contain;transition:transform .4s}
.pk:hover .pk-beeld img{transform:scale(1.04)}
.actie{position:absolute;left:0;top:0;background:var(--gloed);color:var(--kool);font-weight:800;font-size:.85rem;padding:.25rem .6rem;border-radius:.15rem}
.pk h3{font-size:clamp(1.02rem,1.3vw,1.22rem);line-height:1.15;font-weight:700;letter-spacing:0;margin-bottom:.4rem;hyphens:manual;overflow-wrap:break-word;width:100%}
.pk h3 a{text-decoration:none;display:block}
.pk h3 a:hover{text-decoration:underline;text-decoration-color:var(--gloed);text-underline-offset:.2em}
.pk-prijs{margin:0 0 .7rem;font-size:1.1rem}
.pk-prijs small,.prod-prijs small{font-size:.8rem;color:#5a544d;font-weight:400}
.pk .knop,.pk .uit{margin-top:auto}
.pk-uit .pk-beeld{opacity:.55}
@media (max-width:1100px){.pks{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.pks{grid-template-columns:repeat(2,minmax(0,1fr))}.pk .knop{padding-inline:.7rem;font-size:.95rem}}
/* productpagina */
.prod{background:var(--wit);padding:clamp(1.2rem,3vw,3rem) 0 clamp(3rem,6vw,5rem)}
.prod-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,5rem);align-items:start}
.prod-groot{aspect-ratio:1;display:grid;place-items:center}
.prod-groot img{width:100%;height:100%;object-fit:contain}
.duimen{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.duim{width:4.6rem;height:4.6rem;padding:.15rem;border:.1rem solid var(--lijn);background:var(--wit);border-radius:.15rem}
.duim img{width:100%;height:100%;object-fit:contain}
.duim[aria-current=true]{border-color:var(--inkt);box-shadow:inset 0 0 0 .06rem var(--inkt)}
.prod h1{font-weight:900;font-size:clamp(2rem,4.2vw,4rem);line-height:.96;letter-spacing:-.025em;margin-bottom:.4em;hyphens:auto;overflow-wrap:break-word}
.prod-prijs{font-size:1.7rem;margin-bottom:1rem}
.koop{display:flex;flex-wrap:wrap;gap:.7rem;align-items:stretch;margin-bottom:.6rem}
.aantal{display:flex;border:.12rem solid var(--inkt);border-radius:.2rem}
.aantal button{width:2.9rem;min-height:2.9rem;border:0;background:none;font-size:1.3rem;font-weight:700}
.aantal input{width:3rem;min-height:2.9rem;border:0;text-align:center;font:inherit;font-weight:700;background:none;-moz-appearance:textfield;appearance:textfield;border-radius:0}
.aantal input::-webkit-outer-spin-button,.aantal input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.koop .knop{flex:1 1 12rem;min-height:3.15rem;font-size:1.08rem}
.koop-info{font-size:.95rem;color:#3d3833;font-weight:700}
.koop-info b{color:var(--gloed-d)}
.uit-groot{font-family:var(--disp);font-weight:800;font-size:1.5rem;margin-bottom:.3rem}
.plek{margin-top:2rem;padding-top:1.4rem;border-top:.1rem solid var(--inkt)}
.plek h2{font-size:1.45rem;margin-bottom:2.2rem}
.plek-lijn{position:relative;height:.2rem;background:var(--inkt);margin:0 0 2.6rem}
.plek-lijn span:not(.plek-punt){position:absolute;top:.6rem;font-weight:700;font-size:.9rem}
.plek-l{left:0}.plek-m{left:55.5%;transform:translateX(-50%)}.plek-z{right:0}
.plek-punt{position:absolute;left:var(--p);top:50%;width:1.5rem;height:1.5rem;margin:-.75rem 0 0 -.75rem;background:var(--dk);border:.16rem solid var(--inkt);border-radius:50%}
.prod-tekst{margin-top:clamp(2.5rem,5vw,4.5rem);padding-top:clamp(1.6rem,3vw,2.6rem);border-top:.1rem solid var(--inkt)}
.meer{background:var(--wit);padding:0 0 clamp(4rem,8vw,7rem)}
.meer h2{font-weight:900;font-size:clamp(1.9rem,3.8vw,3.4rem);margin-bottom:1rem}
@media (max-width:900px){.prod-in{grid-template-columns:minmax(0,1fr)}}
/* winkelmand */
.mand-leeg{font-size:1.2rem}
.mand-lijst{list-style:none;margin:0;padding:0;border-top:.1rem solid var(--inkt)}
.mand-lijst li{display:grid;grid-template-columns:5.5rem minmax(0,1fr) auto auto auto;gap:.5rem 1.2rem;align-items:center;padding:.9rem 0;border-bottom:.07rem solid var(--lijn)}
.mand-lijst img{width:5.5rem;height:5.5rem;object-fit:contain}
.mand-naam{font-weight:700;text-decoration:none;display:inline-flex;align-items:center;min-height:2.75rem}
.mand-som{font-weight:700;white-space:nowrap;min-width:5rem;text-align:right}
.mand-weg{width:2.75rem;height:2.75rem;border:0;background:none;font-size:1.5rem;line-height:1}
.mand-onder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:2rem;margin-top:2rem;align-items:start}
.mand-land{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.mand-tot{margin:0}
.mand-tot div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:.07rem solid var(--lijn)}
.mand-tot dd{margin:0;font-weight:700;text-align:right}
.mand-tot .totaal{border-bottom:0;font-size:1.35rem;font-family:var(--disp);font-weight:800}
.mand-onder .knop{width:100%;margin-top:1rem;min-height:3.2rem;font-size:1.08rem}
.mand-noot{font-size:.9rem;color:#5a544d;margin-top:.8rem}
@media (max-width:760px){.mand-lijst li{grid-template-columns:4.2rem minmax(0,1fr) auto}.mand-lijst img{width:4.2rem;height:4.2rem;grid-row:span 2}.mand-lijst .aantal{grid-column:2}.mand-som{grid-column:3;grid-row:2}.mand-weg{grid-column:3;grid-row:1;justify-self:end}.mand-onder{grid-template-columns:minmax(0,1fr)}}
dialog.demo{border:0;border-radius:.3rem;padding:clamp(1.4rem,4vw,2.6rem);max-width:min(38rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);overflow-y:auto;color:var(--inkt)}
dialog.demo::backdrop{background:rgba(14,13,12,.7)}
dialog.demo h2{font-size:2rem;margin-bottom:.6rem}
dialog.demo ul{padding-left:1.1rem}
dialog.demo li a{display:inline-flex;min-height:2.75rem;align-items:center}

/* ---------- LEZEN (blog, pagina's) ---------- */
.blog,.art,.tekstpag{background:var(--papier);padding:clamp(2rem,5vw,4.5rem) 0 clamp(4rem,8vw,7rem)}
.wt-alle{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.wt-alle{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.wt-alle{grid-template-columns:minmax(0,1fr)}}
.art-in{display:grid;justify-items:center}
.art-in>*{width:min(100%,46rem)}
.art-in>.art-beeld{width:min(100%,62rem);margin:0 0 2rem}
.art-beeld img{width:100%;height:auto;border-radius:.15rem}
.prose{font-size:1.1rem;line-height:1.62}
.prose>*:first-child{margin-top:0}
.prose h2{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.06;margin:1.7em 0 .5em;hyphens:auto;overflow-wrap:break-word}
.prose h3,.prose h4,.prose h5{font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.1;margin:1.6em 0 .45em;hyphens:auto;overflow-wrap:break-word}
.prose ul,.prose ol{padding-left:1.25rem;margin:0 0 1.1em}
.prose li{margin-bottom:.35em}
.prose a{text-decoration:underline;text-decoration-color:var(--gloed);text-decoration-thickness:.1em;text-underline-offset:.2em;font-weight:700}
.prose img{width:auto;max-width:100%;height:auto;margin:1.6em 0;border-radius:.15rem}
.prose table{border-collapse:collapse;width:100%;display:block;overflow-x:auto;margin:1.4em 0;font-size:.98rem}
.prose td,.prose th{border-top:.07rem solid var(--lijn);padding:.5rem .7rem .5rem 0;text-align:left;vertical-align:top}
.prose-lang{max-width:50rem}
.yt{position:relative;aspect-ratio:16/9;background:var(--kool);margin:1.6em 0;border-radius:.15rem;overflow:hidden}
.yt button{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:none;color:var(--wit);font-weight:700;display:grid;place-items:center}
.yt button img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0;opacity:.75;border-radius:0}
.yt button span{position:relative;background:var(--gloed);color:var(--kool);padding:.7rem 1.3rem;border-radius:.2rem}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.art-vraag{margin-top:2.6rem;padding-top:1.2rem;border-top:.1rem solid var(--inkt);font-weight:700}
.art-volgende{margin-top:1.6rem}
.art-volgende span{display:block;color:#5a544d;font-weight:700;font-size:.92rem}
.art-volgende a{font-family:var(--disp);font-weight:800;font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.05;text-decoration:none;display:inline-block;padding:.3rem 0}
.art-volgende a:hover{text-decoration:underline;text-decoration-color:var(--gloed);text-underline-offset:.16em}
.over-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(1.5rem,5vw,5rem);align-items:start}
.over-foto{margin:0;position:sticky;top:calc(var(--kop-h) + 1.5rem)}
.over-foto img{width:100%;height:auto;border-radius:.15rem}
.over-stapel{margin:clamp(2.5rem,5vw,4.5rem) 0 0;background:var(--wit);border-radius:.15rem;padding:clamp(1rem,3vw,3rem)}
.over-stapel img{width:min(100%,60rem);height:auto;margin-inline:auto}
.contact-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr);gap:clamp(1.5rem,5vw,5rem);align-items:start}
.contact-blok{background:var(--wit);padding:clamp(1.3rem,3vw,2.4rem);border-radius:.2rem;position:sticky;top:calc(var(--kop-h) + 1.5rem)}
.contact-blok h2{font-size:1.9rem;margin-bottom:.7rem}
.contact-groot{font-family:var(--disp);font-weight:800;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.25}
.contact-groot a{text-decoration:none;display:inline-flex;min-height:2.75rem;align-items:center}
.formulier{margin-top:1.6rem;padding-top:1.3rem;border-top:.1rem solid var(--inkt);display:grid;gap:.8rem}
.formulier h3{font-size:1.4rem}
.formulier label{display:grid;gap:.25rem;font-weight:700}
.formulier input,.formulier textarea{font:inherit;padding:.65rem .8rem;border:.1rem solid var(--inkt);border-radius:.2rem;background:var(--wit);width:100%;min-height:2.9rem}
.klein{font-size:.88rem;color:#5a544d;margin:0}
@media (max-width:900px){.over-in,.contact-in{grid-template-columns:minmax(0,1fr)}.over-foto,.contact-blok{position:static}.over-foto{max-width:26rem}}

/* ---------- inloop ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(1.4rem);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}
  .js .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}}
@media print{.kop,.lade,.voet,.toost{display:none}main{padding-top:0}}