/* De Jong Interieur, concept TDG Digital. Inkt, papier en het goud van het logo. EB Garamond + Figtree (hun eigen letter). */
@font-face{font-family:"Garamond";src:url(/fonts/EBGaramond-normal.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Garamond";src:url(/fonts/EBGaramond-italic.woff2) format("woff2");font-weight:400 800;font-style:italic;font-display:swap}
@font-face{font-family:"Figtree";src:url(/fonts/Figtree-normal.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

:root{
  --inkt:#1b2429;--lei:#26353c;--lei2:#2f424a;--goud:#c4a86b;--goud-l:#d9c393;--goud-t:#7d6230;
  --papier:#f3eee6;--been:#e8e0d3;--tekst:#1d2326;--grijs:#5a5f5c;--lijn:#d3c9b8;--lijn-d:rgba(196,168,107,.32);
  --wit:#f7f3ec;--wit2:rgba(247,243,236,.72);
  --serif:"Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;--sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --rand:clamp(1rem,4.2vw,4rem);--statush:2rem;--koph:5.25rem;
  --zacht:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:7rem}
body{margin:0;background:var(--papier);color:var(--tekst);font:400 1.0625rem/1.65 var(--sans);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--goud);color:var(--inkt)}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.04;letter-spacing:-.012em;margin:0;hyphens:manual;text-wrap:balance}
h1 em,h2 em{font-style:italic;font-weight:400;color:var(--goud-t)}
.donker h1 em,.donker h2 em,.hero h1 em{color:var(--goud-l)}
p{margin:0 0 1em;hyphens:auto}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--goud);color:var(--inkt);padding:.6rem 1rem}
.skip:focus{left:1rem}
:focus-visible{outline:2px solid var(--goud-t);outline-offset:3px}
.donker :focus-visible,.kop :focus-visible,.hero :focus-visible,.voet :focus-visible,.lade :focus-visible,.status :focus-visible{outline-color:var(--goud-l)}
.donker{background:var(--inkt);color:var(--wit)}
.klein{font-size:.875rem;color:var(--grijs)}
.donker .klein{color:var(--wit2)}
.groot{font-family:var(--serif);font-size:clamp(1.5rem,1.05rem + 1.6vw,2.35rem);line-height:1.22;letter-spacing:-.005em;hyphens:manual}

/* knoppen en leeslinks */
.knoppen{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 0}
.knop{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.75rem 1.5rem;border:1px solid var(--goud);background:var(--goud);color:var(--inkt);
  font:500 .9375rem/1 var(--sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;border-radius:0;transition:background .3s,color .3s,border-color .3s}
.knop:hover{background:var(--goud-l);border-color:var(--goud-l)}
.knop.rand{background:transparent;color:inherit;border-color:currentColor}
.knop.rand:hover{border-color:var(--goud);color:var(--goud-t)}
.donker .knop.rand:hover,.knop.rand.op-donker:hover{color:var(--goud-l)}
.lees{display:inline-flex;align-items:center;gap:.6rem;min-height:2.75rem;font-weight:500;text-decoration:none;border-bottom:1px solid var(--goud);padding-bottom:.1rem;align-self:flex-start}
.lees::after{content:"";width:1.6rem;height:1px;background:currentColor;transition:width .4s var(--zacht)}
.lees:hover::after{width:2.4rem}
.lees.op-donker{color:var(--wit)}

/* berglijn: het silhouet uit het logo als haarlijn tussen secties */
.berglijn{display:flex;align-items:flex-end;color:var(--goud);height:2.2rem;margin:0 var(--rand)}
.berglijn::before,.berglijn::after{content:"";flex:1;height:1px;background:currentColor;opacity:.55}
.berglijn .berg{width:3.4rem;height:2.2rem;flex:none;margin-bottom:-.5px;overflow:visible}
.berglijn .berg path{stroke-dasharray:1;stroke-dashoffset:0}
.js .berglijn .berg path{stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--zacht) .2s}
.js .berglijn.zicht .berg path{stroke-dashoffset:0}

/* statusregel (hun crèmebalk, nu met open/dicht) */
.status{position:relative;z-index:41;display:flex;justify-content:center;gap:1.5rem;align-items:center;height:var(--statush);background:var(--been);color:var(--tekst);
  font-size:.8125rem;letter-spacing:.02em;padding:0 var(--rand)}
.status a{text-decoration:none;min-height:2rem;display:inline-flex;align-items:center}
.status-nu::before{content:"";display:inline-block;width:.45rem;height:.45rem;border-radius:50%;background:var(--grijs);margin-right:.5rem;vertical-align:.08em}
.status-nu.open::before{background:#4f7a4a}
@media (max-width:640px){.status-plek,.status-tel{display:none}}

/* kop */
.kop{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--koph);padding:0 var(--rand);
  background:var(--inkt);color:var(--wit);transition:background .5s,box-shadow .5s}
.body-home .kop{position:fixed;left:0;right:0;top:var(--statush);background:linear-gradient(rgba(16,22,25,.55),rgba(16,22,25,0))}
.body-home .kop.vast{top:0;background:var(--inkt);box-shadow:0 1px 0 var(--lijn-d)}
.kop-logo{justify-self:center;display:block;padding:.25rem}
.kop-logo img{width:clamp(9.5rem,13vw,12.5rem);height:auto}
.kop-links,.kop-rechts{display:flex;gap:clamp(1rem,2vw,2rem);align-items:center;font-size:.9375rem}
.kop-rechts{justify-content:flex-end}
.kop-rechts a,.mega-knop{text-decoration:none;min-height:2.75rem;display:inline-flex;align-items:center;background:none;border:0;padding:0;cursor:pointer;position:relative}
.kop-rechts a::after,.mega-knop::after{content:"";position:absolute;left:0;right:100%;bottom:.55rem;height:1px;background:var(--goud);transition:right .35s var(--zacht)}
.kop-rechts a:hover::after,.mega-knop:hover::after,.mega-knop[aria-expanded=true]::after{right:0}
.kop-keuze b{display:inline-grid;place-items:center;min-width:1.4rem;height:1.4rem;margin-left:.45rem;border:1px solid var(--goud);border-radius:50%;font:600 .7rem/1 var(--sans);color:var(--goud-l)}
.mega-kolom{position:static}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--inkt);border-top:1px solid var(--lijn-d);padding:2.2rem var(--rand) 2.6rem;box-shadow:0 30px 40px -30px rgba(0,0,0,.6)}
.mega-binnen{display:grid;grid-template-columns:minmax(12rem,1fr) 3fr;gap:3rem}
.mega-titel{font-family:var(--serif);font-size:1.9rem;line-height:1.1}
.mega-titel a{text-decoration:none}
.mega-titel span{display:block;font:400 .875rem var(--sans);color:var(--wit2);margin-top:.5rem}
.mega ul{list-style:none;margin:0;padding:0;columns:3;column-gap:3rem}
.mega li a{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid rgba(247,243,236,.1);text-decoration:none;break-inside:avoid}
.mega li a span{color:var(--wit2);font-size:.8125rem}
.mega li a:hover{color:var(--goud-l)}
.menu-knop{display:none}
.lade{display:none}
@media (max-width:1023px){
  .kop{grid-template-columns:auto 1fr auto;height:4.25rem}
  :root{--koph:4.25rem}
  .kop-links,.kop-rechts a:not(.kop-keuze){display:none}
  .kop-keuze span{display:none}
  .kop-logo{justify-self:center;grid-column:2}
  .kop-logo img{width:9.25rem}
  .kop-rechts{grid-column:3}
  .menu-knop{display:inline-flex;grid-column:1;grid-row:1;align-items:center;gap:.6rem;min-height:2.75rem;min-width:2.75rem;background:none;border:0;padding:0;cursor:pointer;flex-shrink:0}
  .menu-knop span{width:1.4rem;height:9px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;transition:transform .3s}
  .menu-knop i{font-style:normal;font-size:.875rem}
  .menu-knop[aria-expanded=true] span{transform:scaleX(.7)}
  .lade{display:block;position:fixed;inset:0;top:0;z-index:39;background:var(--inkt);color:var(--wit);overflow-y:auto;padding:calc(var(--koph) + var(--statush) + 1rem) var(--rand) 2rem}
  .lade[hidden]{display:none}
  .lade details{border-bottom:1px solid var(--lijn-d)}
  .lade summary{font-family:var(--serif);font-size:1.9rem;padding:.9rem 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
  .lade summary::-webkit-details-marker{display:none}
  .lade summary::after{content:"";width:.6rem;height:.6rem;border-right:1px solid var(--goud);border-bottom:1px solid var(--goud);transform:rotate(45deg);transition:transform .3s}
  .lade details[open] summary::after{transform:rotate(225deg)}
  .lade ul{list-style:none;margin:0 0 1rem;padding:0;columns:2;column-gap:1.5rem}
  .lade li a{display:flex;align-items:center;min-height:2.75rem;text-decoration:none;color:var(--wit2)}
  .lade-los{display:flex;flex-direction:column;margin:1.5rem 0}
  .lade-los a{font-family:var(--serif);font-size:1.6rem;min-height:3rem;display:flex;align-items:center;text-decoration:none}
  .lade-adres{color:var(--wit2);font-size:.9375rem}
  .lade-adres a{display:inline-flex;min-height:2.75rem;align-items:center}
}
@media (max-width:420px){.lade ul{columns:1}}

/* ------------------------------------------------------------ hero */
.hero{position:relative;height:calc(100svh - var(--statush));min-height:30rem;max-height:62rem;background:#0d1316;color:var(--wit);overflow:hidden;isolation:isolate}
.hero-beeld,.hero-beeld picture,.hero-eind,.hero-film{position:absolute;inset:0;width:100%;height:100%}
.hero-eind,.hero-film{object-fit:cover;object-position:50% 30%}
.hero-film{display:none}
.js .hero-film{display:block;opacity:1}
.js .hero.klaar .hero-film{opacity:0;transition:opacity 1.6s}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(transparent,rgba(10,14,16,.72));pointer-events:none;z-index:1}
.hero-tekst{position:absolute;z-index:2;left:var(--rand);bottom:clamp(2rem,6vh,4rem);max-width:min(40rem,62vw)}
.hero h1{font-size:clamp(3rem,1.5rem + 6.2vw,7.6rem);line-height:.95;letter-spacing:-.025em}
.hero-tekst p{margin:1rem 0 0;max-width:30rem;color:var(--wit2);font-size:clamp(1rem,.95rem + .25vw,1.1875rem)}
.hero-label{position:absolute;z-index:2;right:var(--rand);bottom:clamp(2rem,6vh,4rem);display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;text-decoration:none;
  font-size:.875rem;color:var(--wit2);text-align:right;min-height:2.75rem;justify-content:flex-end}
.hero-label b{font:500 1rem var(--serif);letter-spacing:.06em;color:var(--goud-l)}
.hero-label i{font-family:var(--serif);font-size:.8125rem;opacity:.75}
.hero-label:hover{color:var(--wit)}
.hero-opnieuw{position:absolute;z-index:3;right:var(--rand);bottom:calc(clamp(2rem,6vh,4rem) + 4.6rem);min-height:2.75rem;padding:0 1rem;background:rgba(16,22,25,.4);border:1px solid rgba(247,243,236,.3);color:var(--wit);
  font-size:.8125rem;cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.js .hero-tekst > *,.js .hero-label{opacity:0;transform:translateY(.8rem);transition:opacity 1.2s var(--zacht),transform 1.2s var(--zacht)}
.js .hero.toon .hero-tekst > *,.js .hero.toon .hero-label{opacity:1;transform:none}
.js .hero.toon .hero-tekst p{transition-delay:.25s}.js .hero.toon .hero-label{transition-delay:.5s}

@media (max-width:699px){
  .hero-tekst{max-width:none;right:var(--rand)}
  .hero-label{top:calc(var(--koph) + .75rem);bottom:auto;justify-content:flex-start}
  .hero-label span{display:none}
  .hero-opnieuw{bottom:auto;right:auto;left:var(--rand);top:calc(var(--koph) + .75rem);font-size:.75rem;padding:0 .8rem}
}
/* opening: het beeldmerk tekent zich als een bergkam, daarna het woord */
.opening{display:none}
.js .opening{display:grid;position:absolute;inset:0;z-index:5;place-items:center;background:rgba(9,13,15,.82);transition:opacity 1.4s var(--zacht),visibility 0s 1.4s}
.js .opening.weg{opacity:0;visibility:hidden}
.opening-logo{display:flex;align-items:center;gap:1.8rem;width:min(30rem,72vw)}
.o-merk{width:42%;height:auto;-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);
  -webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;animation:kam 1.5s var(--zacht) .2s forwards}
.o-woord{width:50%;height:auto;opacity:0;transform:translateX(-.6rem);animation:woord 1s var(--zacht) 1.15s forwards}
@keyframes kam{to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes woord{to{opacity:1;transform:none}}

/* ------------------------------------------------------------ intro */
.intro{padding:clamp(4.5rem,10vw,9rem) var(--rand)}
.intro-tekst{display:grid;grid-template-columns:7fr 4fr;gap:clamp(2rem,6vw,7rem);align-items:end}
.intro .groot{font-size:clamp(1.75rem,1.1rem + 2.4vw,3.4rem);line-height:1.15;margin:0}
.intro-kolom p{color:var(--grijs)}
@media (max-width:899px){.intro-tekst{grid-template-columns:1fr}}

/* ------------------------------------------------------------ zolder */
.sectie-zolder{padding:clamp(3rem,6vw,5rem) 0 clamp(3rem,6vw,5rem);overflow:hidden}
.sectie-zolder .berglijn{color:var(--goud);margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.zolder-kop{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,6rem);padding:0 var(--rand);align-items:end;margin-bottom:clamp(2rem,4vw,3.5rem)}
.zolder-kop h2{font-size:clamp(2.5rem,1.4rem + 4vw,5.6rem)}
.zolder-kop p{color:var(--wit2);max-width:34rem;margin:0}
@media (max-width:799px){.zolder-kop{grid-template-columns:1fr}}
.zolder{position:relative;--schaal:clamp(1.15px,.14vw,3px)}
.zolder-balk{position:absolute;left:0;right:0;top:0;height:.6rem;background:linear-gradient(#3a2b1f,#22180f);box-shadow:0 1px 0 rgba(196,168,107,.25),0 14px 30px -12px rgba(0,0,0,.7);z-index:1}
.zolder-rij{list-style:none;margin:0;padding:0 var(--rand) 1rem;display:flex;align-items:flex-start;gap:clamp(1.5rem,3vw,3.5rem);overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;cursor:grab;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.zolder-rij::-webkit-scrollbar{display:none}
.zolder-rij.sleept{cursor:grabbing;scroll-snap-type:none}
.lamp{flex:none;width:calc(var(--cm) * var(--schaal));scroll-snap-align:center}
.lamp a{display:flex;flex-direction:column;align-items:center;text-decoration:none;transform-origin:50% 0;transform:rotate(var(--zwaai,0deg));will-change:transform}
.lamp-ketting{width:1px;height:calc(2.2rem + var(--ketting) * 1px);background:repeating-linear-gradient(#6f6352 0 3px,#3b342b 3px 5px)}
.lamp img{width:100%;height:auto;max-height:19rem;object-fit:contain;transition:filter .6s}
.lamp-label{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.1rem;margin-top:1rem;font-size:.8125rem;color:var(--wit2);max-width:16rem;line-height:1.35}
.lamp-label b{font:500 1rem var(--serif);letter-spacing:.06em;color:var(--goud-l)}
.lamp-label i{font-family:var(--serif);font-size:.8125rem}
.lamp a:hover img,.lamp a:focus-visible img{filter:brightness(1.12) drop-shadow(0 0 0 transparent)}
.lamp a:hover .lamp-label{color:var(--wit)}
.zolder-voet{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:0 var(--rand);margin:2rem 0 0;flex-wrap:wrap}
.zolder-hint{font-family:var(--serif);font-style:italic;color:var(--wit2);display:inline-flex;align-items:center;gap:.7rem}
.zolder-hint::before{content:"";width:2.5rem;height:1px;background:var(--goud)}
.klein-zolder{padding-top:2rem}
.klein-zolder .zolder{--schaal:clamp(1px,.12vw,2.6px)}

/* ------------------------------------------------------------ licht */
.sectie-licht{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#120e0b;color:var(--wit);min-height:min(100svh,58rem)}
.licht-beeld{position:relative;overflow:hidden;background:#0d0b09}
.licht-beeld::before{content:"";display:block;padding-top:125%}
.lb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;opacity:0;transition:opacity .25s linear}
.lb-uit{opacity:1}
.licht-k{position:absolute;left:1.25rem;bottom:1.1rem;font:500 1.05rem var(--serif);letter-spacing:.04em;color:var(--goud-l);background:rgba(13,11,9,.5);padding:.2rem .6rem}
.licht-tekst{align-self:center;padding:clamp(3rem,6vw,6rem) var(--rand)}
.sectie-licht h2{font-size:clamp(2.5rem,1.4rem + 3.8vw,5.2rem);margin-bottom:1.5rem}
.sectie-licht h2 em{color:var(--goud-l)}
.licht-tekst > p{color:var(--wit2);max-width:32rem}
.sectie-licht .klein{color:var(--wit2)}
.schuif{margin:2.5rem 0 1.25rem;max-width:30rem}
.schuif label{display:block;font-size:.8125rem;letter-spacing:.04em;color:var(--wit2);margin-bottom:.6rem}
.schuif input{width:100%}
.schuif-schaal{display:flex;justify-content:space-between;font:400 .875rem var(--serif);color:var(--wit2);margin-top:.4rem}
.licht-uitleg{font-family:var(--serif);font-size:clamp(1.25rem,1rem + .8vw,1.65rem);line-height:1.3;color:var(--wit) !important;min-height:4.2em;max-width:30rem}
input[type=range]{-webkit-appearance:none;appearance:none;height:2.75rem;background:transparent;cursor:pointer;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,#ff9b3d,#ffd9a8 38%,#fff3e6 62%,#e9f0ff)}
input[type=range]::-moz-range-track{height:2px;background:linear-gradient(90deg,#ff9b3d,#ffd9a8 38%,#fff3e6 62%,#e9f0ff)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--inkt);border:1px solid var(--goud-l);margin-top:calc(-.75rem + 1px);box-shadow:0 0 0 5px rgba(196,168,107,.15)}
input[type=range]::-moz-range-thumb{width:1.5rem;height:1.5rem;border-radius:50%;background:var(--inkt);border:1px solid var(--goud-l)}
.maat input[type=range]::-webkit-slider-runnable-track{background:var(--tekst);height:1px}
.maat input[type=range]::-moz-range-track{background:var(--tekst);height:1px}
.maat input[type=range]::-webkit-slider-thumb{background:var(--papier);border-color:var(--tekst);box-shadow:none;margin-top:-.75rem}
@media (max-width:899px){.sectie-licht{grid-template-columns:1fr}.licht-beeld::before{padding-top:100%}}

/* ------------------------------------------------------------ maat */
.maat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,7rem);padding:clamp(4rem,9vw,8rem) var(--rand);align-items:center}
.maat h2{font-size:clamp(2.5rem,1.4rem + 3.8vw,5.2rem);margin-bottom:1.5rem}
.maat-tekst > p{color:var(--grijs);max-width:34rem}
.maat-plek{border:0;padding:0;margin:2rem 0 1rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.maat-plek legend{font-size:.8125rem;letter-spacing:.04em;color:var(--grijs);margin-bottom:.5rem;padding:0;width:100%}
.maat-plek label{display:inline-flex;align-items:center;gap:.6rem;min-height:2.75rem;cursor:pointer;font-family:var(--serif);font-size:1.3rem}
.maat-plek input{appearance:none;-webkit-appearance:none;width:1.1rem;height:1.1rem;border:1px solid var(--tekst);border-radius:50%;margin:0;display:grid;place-items:center}
.maat-plek input:checked::after{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--goud-t)}
.maat-veld{display:grid;grid-template-columns:1fr auto;align-items:baseline;max-width:30rem;margin-top:.6rem}
.maat-veld label{font-size:.8125rem;letter-spacing:.04em;color:var(--grijs)}
.maat-veld output{font:500 1.35rem var(--serif)}
.maat-veld input{grid-column:1/-1;width:100%}
.maat-veld[hidden]{display:none}
.maat-uitkomst{margin:1.75rem 0 1.5rem;border-top:1px solid var(--lijn);max-width:30rem}
.maat-uitkomst div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--lijn)}
.maat-uitkomst div[hidden]{display:none}
.maat-uitkomst dt{color:var(--grijs);font-size:.9375rem}
.maat-uitkomst dd{margin:0;font:500 1.2rem var(--serif);text-align:right}
.maat-tekening{margin:0;justify-self:center;width:100%;max-width:34rem}
.maat-tekening svg{width:100%;height:auto;aspect-ratio:520/640;overflow:visible}
.maat-tekening text{font-family:var(--serif);font-size:17px;fill:var(--tekst)}
.maat-tekening .mt{fill:var(--goud-t)}
@media (max-width:899px){.maat{grid-template-columns:1fr}.maat-tekening{order:-1;max-width:19rem}}

/* ------------------------------------------------------------ collectie (home) */
.collectie{padding:clamp(3rem,6vw,5rem) var(--rand) clamp(4rem,8vw,7rem)}
.collectie .berglijn{margin:0 0 clamp(2.5rem,5vw,4.5rem)}
.collectie h2{font-size:clamp(2.5rem,1.4rem + 4vw,5.6rem)}
.collectie-sub{color:var(--wit2);max-width:36rem;margin:1rem 0 clamp(2.5rem,5vw,4rem)}
.kamers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3.5rem)}
.kamer-beeld{display:block;overflow:hidden;aspect-ratio:1}
.kamer-beeld img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--zacht)}
.kamer-beeld:hover img{transform:scale(1.035)}
.kamer h3{font-size:clamp(1.9rem,1.3rem + 1.4vw,2.6rem);margin:1.4rem 0 .8rem;display:flex;align-items:baseline;gap:.8rem}
.kamer h3 a{text-decoration:none}
.kamer h3 small{font:400 .875rem var(--sans);color:var(--wit2)}
.register{list-style:none;margin:0;padding:0;border-top:1px solid rgba(247,243,236,.14)}
.register a{display:flex;align-items:baseline;gap:.6rem;min-height:2.75rem;padding:.55rem 0;border-bottom:1px solid rgba(247,243,236,.1);text-decoration:none}
.register a span{flex:none}
.register a::after{content:"";flex:1;order:2;border-bottom:1px dotted rgba(247,243,236,.25);transform:translateY(-.25rem)}
.register a i{order:3;font-style:normal;font-size:.8125rem;color:var(--wit2)}
.register a:hover span{color:var(--goud-l)}
@media (max-width:899px){.kamers{grid-template-columns:1fr 1fr}.kamer:first-child{grid-column:1/-1}.kamer:first-child .kamer-beeld{aspect-ratio:16/10}}
@media (max-width:599px){.kamers{grid-template-columns:1fr}.kamer .kamer-beeld{aspect-ratio:16/11}}

/* ------------------------------------------------------------ onder glas */
.glas{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:clamp(1.5rem,4vw,4.5rem);padding:clamp(4.5rem,9vw,8.5rem) var(--rand);align-items:center}
.glas figure{margin:0}
.glas img{width:100%;height:auto}
.glas-b{align-self:end}
.glas figcaption{font:italic 400 .9375rem var(--serif);color:var(--grijs);margin-top:.7rem}
.glas h2{font-size:clamp(2.2rem,1.3rem + 2.8vw,4.2rem);margin-bottom:1.5rem}
.glas-tekst p{color:var(--grijs)}
.glas-links{display:flex;gap:2rem;flex-wrap:wrap}
.glas-links .lees{color:var(--tekst)}
@media (max-width:1023px){.glas{grid-template-columns:1fr 1fr}.glas-tekst{grid-column:1/-1;order:-1}}
@media (max-width:599px){.glas{grid-template-columns:1fr}.glas-b{width:72%;justify-self:end}}

/* ------------------------------------------------------------ showroom */
.showroom{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch}
.showroom-beeld{margin:0;position:relative;min-height:28rem}
.showroom-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.showroom-tekst{padding:clamp(3rem,6vw,6rem) var(--rand)}
.showroom h2{font-size:clamp(2.5rem,1.4rem + 3.6vw,5rem);margin-bottom:1.5rem}
.showroom-tekst > p{color:var(--wit2)}
.nu{font-family:var(--serif);font-size:1.35rem;color:var(--goud-l) !important;margin:1.5rem 0 .8rem}
.contact .nu{color:var(--goud-t) !important}
.tijden{border-collapse:collapse;font-size:.9375rem;min-width:min(20rem,100%)}
.tijden th{text-align:left;font-weight:400;padding:.35rem 2rem .35rem 0;color:inherit;opacity:.8}
.tijden td{text-align:right;font-variant-numeric:tabular-nums}
.tijden tr.vandaag th,.tijden tr.vandaag td{opacity:1;font-weight:600}
.showroom-adres{margin-top:1.4rem;font-family:var(--serif);font-size:1.3rem;line-height:1.35;color:var(--wit) !important}
@media (max-width:899px){.showroom{grid-template-columns:1fr}.showroom-beeld{min-height:0;aspect-ratio:4/3}}

/* ------------------------------------------------------------ paginakop */
.paginakop{padding:calc(var(--koph) * .4 + clamp(2rem,5vw,4.5rem)) var(--rand) 2.5rem}
.paginakop.hoog{padding-bottom:3rem}
.paginakop h1{font-size:clamp(2.6rem,1.4rem + 4.6vw,6.2rem);max-width:18ch}
.paginakop-intro{max-width:44rem;color:var(--wit2);margin:1.4rem 0 0;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem)}
.paginakop-aantal{font-family:var(--serif);font-style:italic;color:var(--goud-l);margin:1.2rem 0 2.5rem}
.paginakop .berglijn{margin:2.5rem 0 0}
.kruimel{font-size:.8125rem;color:var(--wit2);margin-bottom:1.5rem}
.kruimel a{text-decoration:none;display:inline-flex;min-height:2.75rem;align-items:center}
.product .kruimel{color:var(--grijs);margin-bottom:.5rem}

/* ------------------------------------------------------------ overzicht */
.overzicht{padding:clamp(2rem,4vw,3.5rem) var(--rand) clamp(4rem,8vw,6rem)}
.zussen{margin-bottom:1.5rem;border-bottom:1px solid var(--lijn)}
.zussen ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 1.75rem}
.zussen a{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:none;color:var(--grijs);font-size:.9375rem;border-bottom:1px solid transparent;margin-bottom:-1px}
.zussen a:hover{color:var(--tekst)}
.zussen a[aria-current]{color:var(--tekst);border-color:var(--goud-t)}
.sorteer{display:flex;justify-content:flex-end;align-items:center;gap:.8rem;margin-bottom:1.75rem;font-size:.875rem;color:var(--grijs)}
.sorteer select{appearance:none;-webkit-appearance:none;min-height:2.75rem;padding:0 2.2rem 0 .9rem;border:1px solid var(--lijn);background:var(--papier) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='none' stroke='%231d2326'/%3E%3C/svg%3E") no-repeat right .9rem center;border-radius:0;color:var(--tekst);font-size:.9375rem}
.stukken{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(2rem,3vw,3rem) clamp(1rem,2vw,2rem)}
.stuk a{display:flex;flex-direction:column;text-decoration:none}
.stuk-beeld{display:block;aspect-ratio:1;overflow:hidden;background:var(--been)}
.stuk-beeld img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--zacht)}
.stuk a:hover .stuk-beeld img{transform:scale(1.04)}
.stuk-nr{font:500 .9375rem var(--serif);letter-spacing:.06em;color:var(--goud-t);margin-top:.9rem}
.stuk-naam{font-size:.9375rem;line-height:1.4;margin-top:.15rem}
.stuk-prijs{font-size:.875rem;color:var(--grijs);margin-top:.3rem}
.stuk[hidden]{display:none}
.meer-wrap{text-align:center;margin-top:3rem}
.leeg{font-family:var(--serif);font-size:1.4rem;max-width:40rem;color:var(--grijs)}
@media (max-width:1099px){.stukken{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:699px){.stukken{grid-template-columns:repeat(2,minmax(0,1fr))}}

.artikel{background:var(--been);padding:clamp(4rem,8vw,7rem) var(--rand)}
.artikel-binnen{max-width:min(100%,78rem);columns:2 26rem;column-gap:clamp(2rem,5vw,5rem)}
.artikel h2{font-size:clamp(1.8rem,1.3rem + 1.6vw,2.8rem);column-span:all;margin-bottom:2rem}
.artikel h2:not(:first-child){font-size:1.45rem;column-span:none;margin:1.6rem 0 .5rem;break-after:avoid}
.artikel h3{font-size:1.3rem;margin:1.4rem 0 .4rem}
.artikel p{color:#3d4240;break-inside:avoid-column}

/* ------------------------------------------------------------ product */
.product{padding:1.25rem var(--rand) clamp(3rem,6vw,5rem)}
.product-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,5.5rem);align-items:start}
.galerij{position:sticky;top:calc(var(--koph) + 1rem)}
.gal-groot{position:relative;background:var(--been);cursor:zoom-in}
.gal-groot::before{content:"";display:block;padding-top:100%}
.gal-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .5s}
.gal-img.aan{opacity:1}
.duimen{display:flex;gap:.6rem;margin-top:.8rem;flex-wrap:wrap}
.duim{width:4.5rem;height:4.5rem;padding:0;border:1px solid transparent;background:var(--been);cursor:pointer}
.duim img{width:100%;height:100%;object-fit:cover}
.duim[aria-current=true]{border-color:var(--goud-t)}
.product-nr{font:500 1.15rem var(--serif);letter-spacing:.08em;color:var(--goud-t);margin:0 0 .6rem}
.product h1{font-size:clamp(2.1rem,1.4rem + 2.2vw,3.6rem);line-height:1.05}
.product-prijs{font-family:var(--serif);font-size:1.6rem;margin:1.2rem 0 .3rem}
.product-voorraad{font-size:.875rem;color:var(--grijs)}
.product-noot{font-family:var(--serif);font-style:italic;font-size:1.15rem;line-height:1.4;border-left:1px solid var(--goud);padding-left:1rem;margin:2rem 0}
.product-maten{display:flex;gap:2rem;margin:1.5rem 0;padding:1rem 0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.product-maten dt{font-size:.75rem;color:var(--grijs);letter-spacing:.04em}
.product-maten dd{margin:0;font:500 1.25rem var(--serif)}
.product-tekst{margin-top:2rem;color:#3d4240}
.product-tekst ul{padding-left:1.1rem}
.product-contact{font-size:.9375rem;color:var(--grijs);margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--lijn)}
.product-contact a{display:inline-block;min-height:2.75rem;line-height:2.75rem}
.knop.gekozen{background:transparent;color:var(--tekst);border-color:var(--goud-t)}
.verwant{padding:clamp(3rem,6vw,5rem) var(--rand);border-top:1px solid var(--lijn)}
.verwant h2{font-size:clamp(1.8rem,1.3rem + 1.6vw,2.8rem);margin-bottom:2rem}
@media (max-width:899px){.product-raster{grid-template-columns:1fr}.galerij{position:static}}
.lichtbak{border:0;padding:0;background:rgba(10,14,16,.96);max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;margin:0}
.lichtbak img{width:100%;height:100%;object-fit:contain;padding:3.5rem 1rem 1rem}
.lichtbak-dicht{position:absolute;top:.75rem;right:.75rem;min-height:2.75rem;padding:0 1rem;background:none;border:1px solid rgba(247,243,236,.4);color:var(--wit);cursor:pointer}
.lichtbak::backdrop{background:rgba(10,14,16,.9)}

/* ------------------------------------------------------------ over ons */
.verhaal{padding:clamp(4rem,8vw,7rem) var(--rand)}
.hoofdstuk{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(1.5rem,5vw,6rem);padding:clamp(2.5rem,5vw,4.5rem) 0;border-top:1px solid var(--lijn)}
.hs-nr{font:italic 400 1.35rem var(--serif);color:var(--goud-t)}
.hoofdstuk .groot{margin-bottom:1.2rem}
.hoofdstuk p:not(.groot){color:var(--grijs);max-width:44rem}
.verhaal-beeld{margin:clamp(1rem,3vw,2rem) calc(var(--rand) * -1) clamp(2rem,5vw,4rem)}
.verhaal-beeld img{width:100%;aspect-ratio:21/9;object-fit:cover}
.verhaal-beeld figcaption{font:italic 400 .9375rem var(--serif);color:var(--grijs);padding:.7rem var(--rand) 0}
.slot{max-width:52rem;margin:clamp(3rem,6vw,5rem) auto 0;text-align:center;padding-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--lijn)}
.slot .groot{font-size:clamp(2rem,1.2rem + 3vw,3.8rem);line-height:1.1;margin:1rem 0 1.5rem}
.slot .groot em{color:var(--goud-t)}
.slot p{color:var(--grijs)}
.ondertekening{font:italic 400 1.3rem var(--serif);color:var(--tekst) !important;margin-top:2rem}
@media (max-width:699px){.hoofdstuk{grid-template-columns:1fr;gap:.5rem}.verhaal-beeld img{aspect-ratio:4/3}}

/* ------------------------------------------------------------ contact, keuzelijst */
.contact,.keuze{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,7rem);padding:clamp(3.5rem,7vw,6rem) var(--rand)}
.contact h2,.keuze h2{font-size:clamp(1.8rem,1.3rem + 1.6vw,2.8rem);margin-bottom:1.2rem}
.mensen{margin:2rem 0 0}
.mensen div{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.6rem 0;border-bottom:1px solid var(--lijn)}
.mensen dt{color:var(--grijs)}
.mensen dd{margin:0}
.mensen a{display:inline-flex;min-height:2.75rem;align-items:center}
.formulier{display:flex;flex-direction:column;gap:1.1rem;background:var(--been);padding:clamp(1.5rem,4vw,3rem)}
.formulier label{display:flex;flex-direction:column;gap:.35rem;font-size:.875rem;color:#3d4240}
.formulier input,.formulier textarea{min-height:3rem;padding:.7rem .9rem;border:1px solid #9b9384;background:var(--papier);border-radius:0;font-size:1rem}
.formulier input:focus,.formulier textarea:focus{outline:2px solid var(--goud-t);outline-offset:0;border-color:var(--goud-t)}
.formulier .knop{align-self:flex-start}
.keuze-lijst{list-style:none;margin:0;padding:0;counter-reset:k}
.keuze-lijst li{display:grid;grid-template-columns:4.5rem 1fr auto;gap:1rem;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--lijn)}
.keuze-lijst img{width:4.5rem;height:4.5rem;object-fit:cover;background:var(--been)}
.keuze-lijst b{display:block;font:500 1rem var(--serif);letter-spacing:.06em;color:var(--goud-t)}
.keuze-lijst a{text-decoration:none}
.keuze-lijst button{min-height:2.75rem;min-width:2.75rem;background:none;border:1px solid var(--lijn);cursor:pointer;font-size:.8125rem;padding:0 .8rem}
@media (max-width:899px){.contact,.keuze{grid-template-columns:1fr}}

/* ------------------------------------------------------------ voet */
.voet{background:var(--inkt);color:var(--wit2);padding:0 0 1.5rem;font-size:.9375rem}
.voet .berglijn{margin:0 var(--rand);padding-top:3rem;height:5.2rem}
.voet-raster{display:grid;grid-template-columns:1.5fr repeat(3,1fr) 1.3fr;gap:2rem;padding:3rem var(--rand)}
.voet-merk img{width:13rem;margin-bottom:1.2rem}
.voet-merk p{max-width:22rem}
.voet h3{font:500 1.25rem var(--serif);color:var(--wit);margin-bottom:.8rem}
.voet ul{list-style:none;margin:0;padding:0}
.voet li a,.voet p a{display:inline-flex;min-height:2.5rem;align-items:center;text-decoration:none}
.voet a:hover{color:var(--goud-l)}
.voet .tijden{font-size:.875rem;min-width:0}
.voet-onder{display:flex;flex-wrap:wrap;gap:.5rem 2rem;padding:1.5rem var(--rand) 0;border-top:1px solid rgba(247,243,236,.1);margin:0 var(--rand);padding-left:0;padding-right:0;font-size:.8125rem;align-items:center}
.voet-onder a{min-height:2.75rem;display:inline-flex;align-items:center}
.voet-tdg{margin-left:auto}
@media (max-width:1099px){.voet-raster{grid-template-columns:1fr 1fr 1fr}.voet-merk{grid-column:1/-1}}
@media (max-width:599px){.voet-raster{grid-template-columns:1fr 1fr}.voet-raster > div:last-child{grid-column:1/-1}.voet-tdg{margin-left:0}}

/* inloop, per element */
.js [data-in]{opacity:0;transform:translateY(1.4rem);transition:opacity 1.1s var(--zacht),transform 1.1s var(--zacht)}
.js [data-in].zicht{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-delay:0s !important;scroll-behavior:auto !important}
  .js [data-in]{opacity:1;transform:none}
}

/* brede schermen: het 1440-ontwerp schaalt als geheel mee */
@media (min-width:1440px){html{font-size:clamp(100%,1.1111vw,200%)}:where(button,input,select,textarea){font-size:.8333rem}}
@media (max-height:520px) and (orientation:landscape){.hero{height:calc(100svh - var(--statush));min-height:0}.hero-tekst{max-width:60vw}.hero h1{font-size:2.6rem}.hero-tekst p{display:none}.status{display:none}:root{--statush:0rem}}