/* De Maatwerkzolder: concept 2, "Avondlicht". Donker, huiselijk en premium.
   Kleuren uit de huisstijlsheet: hout #5A4228, metaal #1E1E1E, beige #E8DFD1, goud #B8873A.
   Afwijkingen: het zwart is warm gemaakt (#120E0B), koppen staan in Fraunces. */

:root {
  --nacht: #120e0b;
  --roet: #1a1410;
  --hout: #5a4228;
  --goud: #b8873a;
  --messing: #dcb272;
  --linnen: #f1e9dc;
  --as: #b5a794;
  --beige: #e8dfd1;
  --inkt: #1e1e1e;
  --naad: rgba(241, 233, 220, .12);
  --naad-2: rgba(241, 233, 220, .22);
  --kop: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ui: "Montserrat", system-ui, sans-serif;
  --tekst: "Open Sans", system-ui, sans-serif;
  --rand: clamp(1.25rem, 4vw, 4rem);
  --max: 90rem;
  --r: 1.25rem;
  --zacht: cubic-bezier(.22, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--nacht); color-scheme: dark; overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
html.menu-open { overflow: hidden; }
body { margin: 0; font: 400 1rem/1.65 var(--tekst); color: var(--linnen); background: var(--nacht); -webkit-font-smoothing: antialiased; }
/* Fijne korrel over de hele pagina: maakt het donker zachter */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .94 0 0 0 0 .84 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

h1, h2, h3 { margin: 0; font-family: var(--kop); font-weight: 340; font-variation-settings: "SOFT" 60; letter-spacing: -.015em; line-height: 1.04; text-wrap: balance; }
h2 { font-size: clamp(2.4rem, 5.4vw, 4.75rem); }
em { font-style: italic; color: var(--messing); font-variation-settings: "SOFT" 100; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
:focus-visible { outline: 2px solid var(--messing); outline-offset: 3px; border-radius: .25rem; }
::selection { background: var(--goud); color: var(--nacht); }
.ic { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.w { display: inline-block; }

/* Kleine onderdelen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 3.4rem; padding: 0 1.6rem; border-radius: 99px; font: 600 .8rem/1 var(--ui); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; transition: background .3s, color .3s, border-color .3s, box-shadow .3s; }
.knop .ic { transition: transform .3s var(--zacht); }
.knop:hover .ic { transform: translateX(4px); }
.knop--goud { background: linear-gradient(180deg, #d3a359, var(--goud)); color: #1a1208; box-shadow: 0 0 0 1px rgba(255, 224, 170, .3) inset, 0 14px 34px -14px rgba(214, 160, 80, .75); }
.knop--goud:hover { background: linear-gradient(180deg, #e6ba70, #c8974a); box-shadow: 0 0 0 1px rgba(255, 232, 190, .45) inset, 0 18px 46px -12px rgba(230, 175, 90, .85); }
.knop--lijn { border: 1px solid var(--naad-2); background: rgba(18, 14, 11, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.knop--lijn:hover { border-color: var(--messing); color: var(--messing); }
.knop--breed { width: 100%; }
.knop--groot { min-height: 4rem; padding: 0 2.2rem; font-size: .88rem; }
.knoppen { display: flex; flex-wrap: wrap; gap: .8rem; }
.tekstlink { display: inline-flex; align-items: center; gap: .5rem; padding-bottom: .4rem; border-bottom: 1px solid rgba(220, 178, 114, .35); font: 600 .76rem/1.2 var(--ui); letter-spacing: .09em; text-transform: uppercase; color: var(--messing); transition: border-color .3s, gap .3s var(--zacht); }
.tekstlink:hover { border-color: var(--messing); gap: .85rem; }
.rond { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 1px solid var(--naad-2); transition: background .3s, color .3s, border-color .3s; }
.rond:hover { background: var(--linnen); color: var(--nacht); border-color: var(--linnen); }

.toon { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset; flex: none; }
.toon--eiken { background: linear-gradient(135deg, #dba560, #b9793a); }
.toon--noten { background: linear-gradient(135deg, #7c4f35, #4a2c1c); }
.toon--bamboe { background: linear-gradient(135deg, #f2d28a, #d9ad58); }

@keyframes pols { 0% { transform: scale(.75); opacity: 1; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes vlam { 0%, 100% { opacity: .75; } 17% { opacity: 1; } 29% { opacity: .6; } 46% { opacity: .92; } 62% { opacity: .68; } 80% { opacity: 1; } }
@keyframes doek-weg { to { opacity: 0; visibility: hidden; } }

/* Opening en lamplicht */
.doek { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #0b0806; pointer-events: none; animation: doek-weg .8s 5s forwards; }
.doek svg { width: 5.5rem; }
.lamp { position: fixed; left: 0; top: 0; z-index: 4; width: 48rem; height: 48rem; margin: -24rem 0 0 -24rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 120, .1), rgba(255, 196, 120, .035) 42%, transparent 68%); mix-blend-mode: screen; pointer-events: none; opacity: 0; will-change: transform; }

/* Kop */
.kop { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: transform .5s var(--zacht); }
.kop.is-weg { transform: translateY(-100%); }
.strook { display: grid; place-items: center; height: 2.1rem; overflow: hidden; border-bottom: 1px solid var(--naad); background: rgba(11, 8, 6, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 500 .66rem/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--as); transition: height .4s var(--zacht), opacity .3s; }
.strook p { display: flex; gap: 2.4rem; white-space: nowrap; }
.strook span + span::before { content: "•"; margin-right: 2.4rem; color: var(--goud); }
.kop.is-klein .strook { height: 0; opacity: 0; border-color: transparent; }
.kop__balk { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; height: 5.25rem; padding: 0 var(--rand); transition: height .4s var(--zacht), background .4s, box-shadow .4s; }
.kop.is-klein .kop__balk, .kop.is-open .kop__balk, .menu-open .kop__balk { height: 4.25rem; background: rgba(18, 14, 11, .84); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--naad); }
.menu-open .kop__balk { background: var(--nacht); }
.kop__nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.1rem); }
.kop__nav > * { display: inline-flex; align-items: center; gap: .35rem; height: 2.6rem; white-space: nowrap; font: 600 .74rem/1 var(--ui); letter-spacing: .13em; text-transform: uppercase; opacity: .88; transition: opacity .2s, color .2s; }
.kop__nav > *:hover, .kop__nav > [aria-expanded="true"] { opacity: 1; color: var(--messing); }
.kop__nav .ic { width: .8rem; height: .8rem; stroke-width: 2; transition: transform .3s; }
.kop__nav [aria-expanded="true"] .ic { transform: rotate(180deg); }
.kop__rechts { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; }
.kop__nav--rechts { margin-right: 1.1rem; }
.ikn { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; transition: background .2s, color .2s; }
.ikn:hover { background: rgba(241, 233, 220, .09); color: var(--messing); }
.ikn--tas b { position: absolute; top: .25rem; right: .15rem; min-width: 1.05rem; height: 1.05rem; padding: 0 .2rem; border-radius: 99px; background: var(--goud); color: #1a1208; font: 700 .62rem/1.05rem var(--ui); text-align: center; }
.logo { display: inline-flex; align-items: center; gap: .75rem; }
.logo__merk { width: 3.1rem; height: auto; flex: none; }
.logo__w { display: grid; gap: .32rem; }
.logo__w b { font: 700 .8rem/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.logo__w small { font: 500 .56rem/1 var(--ui); letter-spacing: .36em; text-transform: uppercase; color: var(--messing); }
.logo__w small i { font-style: normal; opacity: .7; }
.menuknop { display: none; position: relative; width: 2.75rem; height: 2.75rem; }
.menuknop i { position: absolute; left: .55rem; right: .55rem; height: 1.5px; background: currentColor; transition: transform .4s var(--zacht), top .4s var(--zacht); }
.menuknop i:first-child { top: 1.05rem; }
.menuknop i:last-child { top: 1.6rem; }
.menuknop[aria-expanded="true"] i { top: 1.33rem; }
.menuknop[aria-expanded="true"] i:first-child { transform: rotate(45deg); }
.menuknop[aria-expanded="true"] i:last-child { transform: rotate(-45deg); }

/* Uitklapmenu */
.mega { position: absolute; inset: 100% 0 auto 0; background: rgba(20, 15, 11, .97); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--naad); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .7); }
.mega[hidden] { display: none; }
.mega__in { max-width: var(--max); margin: 0 auto; padding: 2.6rem var(--rand) 3rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem); gap: 3rem; align-items: center; min-height: 23rem; }
.mega__groep { display: none; align-self: start; }
.mega__groep.is-actief { display: block; }
.mega__kop { margin-bottom: 1.3rem; font: 600 .7rem/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--as); }
.mega__lijst { display: grid; margin-bottom: 1.8rem; }
.mega__lijst--twee { grid-template-rows: repeat(5, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 2.5rem; }
.mega__lijst a { display: inline-block; padding: .32rem 0; font: 340 clamp(1.35rem, 2vw, 1.85rem)/1.2 var(--kop); font-variation-settings: "SOFT" 60; opacity: .74; transition: opacity .2s, color .2s, transform .35s var(--zacht); }
.mega__lijst a:hover, .mega__lijst a:focus-visible { opacity: 1; color: var(--messing); transform: translateX(.5rem); }
.mega__toon { position: relative; height: 18rem; display: grid; place-items: center; border-radius: var(--r); background: radial-gradient(circle at 50% 42%, rgba(214, 150, 70, .34), transparent 64%); }
.mega__toon img { max-height: 12rem; max-width: 76%; width: auto; object-fit: contain; margin-bottom: 2.5rem; filter: drop-shadow(0 24px 28px rgba(0, 0, 0, .6)); transition: opacity .2s, transform .5s var(--zacht); }
.mega__toon.is-wissel img { opacity: 0; transform: scale(.92) rotate(-4deg); }
.mega__toon p { position: absolute; inset: auto 0 .6rem 0; display: grid; justify-items: center; gap: .35rem; font-size: .8rem; line-height: 1; color: var(--as); }
.mega__toon b { font: 400 1.15rem/1 var(--kop); color: var(--linnen); }

/* Menu op mobiel */
.mobielmenu { position: fixed; inset: 0; z-index: 45; padding: 6rem var(--rand) 2rem; background: var(--nacht); overflow-y: auto; overscroll-behavior: contain; }
.mobielmenu[hidden] { display: none; }
.mobielmenu summary, .mobielmenu__los { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--naad); font: 340 1.85rem/1.1 var(--kop); list-style: none; cursor: pointer; }
.mobielmenu summary::after { content: "+"; font: 300 1.6rem/1 var(--ui); color: var(--messing); transition: transform .3s; }
.mobielmenu details[open] summary::after { transform: rotate(45deg); }
.mobielmenu ul { display: grid; padding: .7rem 0 1rem; }
.mobielmenu li a { display: block; padding: .5rem 0; color: var(--as); font-size: 1.02rem; }
.mobielmenu__klein { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin: 1.6rem 0; font-size: .92rem; color: var(--as); }

/* 1. Hero */
.hero { --hh: max(100svh, 42rem); position: relative; height: var(--hh); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; isolation: isolate; overflow: clip; }
.hero__beeld { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #0b0806; container-type: size; }
.hero__doek { --verh: 1.7686; --db: max(100cqw, calc(100cqh * var(--verh))); position: absolute; top: calc((100cqh - var(--db) / var(--verh)) / 2); left: calc((100cqw - var(--db)) * var(--focus, .7)); width: var(--db); height: calc(var(--db) / var(--verh)); }
.hero__doek picture, .hero__doek img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__vlam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s; -webkit-mask-image: radial-gradient(ellipse 12% 30% at 93.4% 28%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 12% 30% at 93.4% 28%, #000 30%, transparent 100%); }
.hero__vlam.is-aan { opacity: 1; }
.hero__gloed { position: absolute; left: 93.3%; top: 25%; width: 36%; aspect-ratio: 1; margin: -18% 0 0 -18%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 180, 90, .26), rgba(255, 160, 70, .07) 42%, transparent 66%); mix-blend-mode: screen; pointer-events: none; animation: vlam 3.4s infinite; }
.hero__sluier { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(11, 8, 6, .9) 0%, rgba(11, 8, 6, .6) 30%, transparent 58%), linear-gradient(180deg, rgba(11, 8, 6, .72) 0%, transparent 22%, transparent 62%, rgba(11, 8, 6, .94) 100%); }
.speld { position: absolute; left: var(--x); top: var(--y); z-index: 3; display: flex; align-items: center; gap: .8rem; margin: -1.6rem 0 0 -.6rem; }
.speld i { position: relative; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--linnen); box-shadow: 0 0 0 .35rem rgba(241, 233, 220, .22); flex: none; }
.speld i::after { content: ""; position: absolute; inset: -.35rem; border-radius: 50%; border: 1px solid rgba(241, 233, 220, .7); animation: pols 2.4s infinite; }
.speld span { display: grid; gap: .3rem; padding: .7rem 1rem; border-radius: .8rem; border: 1px solid var(--naad-2); background: rgba(18, 14, 11, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 .74rem/1 var(--ui); color: var(--beige); white-space: nowrap; transition: border-color .3s, background .3s; }
.speld b { font: 400 1.02rem/1 var(--kop); color: #fff; }
.speld:hover span { border-color: var(--messing); background: rgba(18, 14, 11, .9); }

.hero__in { align-self: center; max-width: min(47rem, 60vw); padding: 8.5rem var(--rand) 1rem; }
.hero__kop { margin: 0 0 1.6rem; font-size: clamp(3.1rem, 7.3vw, 7.1rem); font-weight: 320; line-height: .97; letter-spacing: -.028em; }
.hero__intro { max-width: 31rem; margin-bottom: 2rem; font-size: 1.08rem; color: #ddd3c3; }

.snel { display: flex; align-items: center; gap: 1.4rem; margin: 0 var(--rand) 1.5rem; padding: .65rem .7rem .65rem 1.5rem; border: 1px solid var(--naad); border-radius: 1.5rem; background: rgba(18, 14, 11, .62); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
.snel__kop { flex: none; font: 600 .66rem/1.3 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--as); }
.snel ul { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .2rem; min-width: 0; }
.snel li a { display: flex; align-items: center; gap: .7rem; padding: .45rem .6rem; border-radius: 1rem; transition: background .3s; }
.snel li a:hover { background: rgba(241, 233, 220, .08); }
.snel img { width: 2.9rem; height: 2.9rem; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); transition: transform .5s var(--zacht); flex: none; }
.snel li a:hover img { transform: translateY(-3px) rotate(-5deg) scale(1.1); }
.snel span { display: grid; gap: .28rem; min-width: 0; }
.snel b { font: 600 .74rem/1.1 var(--ui); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snel small { font: 400 .74rem/1 var(--tekst); color: var(--as); white-space: nowrap; }
.snel__alles { flex: none; display: inline-flex; align-items: center; gap: .5rem; height: 3.2rem; padding: 0 1.3rem; border-radius: 99px; background: var(--linnen); color: var(--nacht); font: 600 .72rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; transition: background .3s; }
.snel__alles:hover { background: var(--messing); }

/* Zekerheden */
.zeker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--max); margin: 0 auto; padding: 0 var(--rand); }
.zeker li { display: flex; align-items: center; gap: 1rem; padding: 1.9rem 1.5rem 1.9rem 0; border-bottom: 1px solid var(--naad); }
.zeker li + li { padding-left: 1.5rem; border-left: 1px solid var(--naad); }
.zeker .ic { width: 1.8rem; height: 1.8rem; stroke-width: 1.25; color: var(--messing); }
.zeker p { font-size: .84rem; line-height: 1.4; color: var(--as); }
.zeker b { display: block; margin-bottom: .2rem; font: 600 .8rem/1.3 var(--ui); letter-spacing: .04em; color: var(--linnen); }

/* Secties. Niets in de pagina mag haar breder maken, ook niet tijdens een beweging (bijvoorbeeld de zwaaiende cadeaulabels). */
main { overflow-x: clip; }
.sectie { max-width: var(--max); margin: 0 auto; padding: clamp(5rem, 10vw, 9.5rem) var(--rand) 0; }
.sk { display: grid; gap: 1.2rem; max-width: 46rem; margin-bottom: clamp(2.2rem, 4.5vw, 4rem); }
.sk__tekst { max-width: 30rem; font-size: 1.05rem; color: var(--as); }
.sk--midden { margin-inline: auto; justify-items: center; text-align: center; }
.sk--rij { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; max-width: none; }
.sk--rij > div:first-child { display: grid; gap: 1.2rem; }

/* 2. De winkel */
.vakken { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(13.5rem, 19vw, 17.5rem); gap: 1rem; }
.vak--groot { grid-column: span 2; grid-row: span 2; }
.vak--breed { grid-column: span 2; }
.vak--hoog { grid-row: span 2; }
.vak a { position: relative; display: block; height: 100%; border-radius: var(--r); overflow: hidden; border: 1px solid var(--naad); background: linear-gradient(160deg, #211911, #17110d 62%); isolation: isolate; transform: perspective(60rem) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: border-color .4s, transform .35s ease-out; }
.vak a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at var(--mx, 66%) var(--my, 40%), rgba(222, 158, 76, .46), rgba(184, 135, 58, .13) 34%, transparent 62%); opacity: .42; transition: opacity .5s; }
.vak a:hover, .vak a:focus-visible { border-color: rgba(220, 178, 114, .5); }
.vak a:hover::before, .vak a:focus-visible::before { opacity: 1; }
.vak img { position: absolute; right: 5%; top: 8%; width: 62%; height: 54%; object-fit: contain; object-position: right center; filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .55)) brightness(.9); transition: transform .7s var(--zacht), filter .5s; }
.vak a:hover img { transform: translateY(-5px) scale(1.06) rotate(-3deg); filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .6)) brightness(1.05); }
.vak--breed img { top: 10%; width: 46%; height: 80%; object-position: center; }
.vak--groot img { right: 2%; top: 6%; width: 46%; height: 88%; object-position: center; }
.vak--hoog img { right: auto; left: 15%; top: 8%; width: 70%; height: 62%; object-position: center; }
.vak__nr { position: absolute; left: 1.4rem; top: 1.3rem; font: 500 .7rem/1 var(--ui); letter-spacing: .14em; color: var(--as); }
.vak__tekst { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.3rem; display: grid; gap: .3rem; }
.vak--breed .vak__tekst { right: 52%; }
.vak--groot .vak__tekst { right: 46%; }
.vak__tekst b { font: 360 clamp(1.25rem, 1.65vw, 1.6rem)/1.08 var(--kop); font-variation-settings: "SOFT" 60; hyphens: auto; overflow-wrap: anywhere; }
.vak--groot .vak__tekst b { font-size: clamp(2rem, 3.3vw, 3.1rem); font-weight: 330; }
.vak__tekst span { font-size: .84rem; line-height: 1.35; color: var(--as); }
.vak__tekst small { margin-top: .45rem; font: 600 .74rem/1 var(--ui); letter-spacing: .06em; color: var(--messing); }
.vak__pijl { position: absolute; left: 1.1rem; top: 1.1rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--naad-2); opacity: 0; transform: translateY(.4rem); transition: background .3s, color .3s, opacity .3s, transform .4s var(--zacht), border-color .3s; }
.vak a:hover .vak__pijl, .vak a:focus-visible .vak__pijl { opacity: 1; transform: none; background: var(--goud); border-color: var(--goud); color: #1a1208; }
.vak a:hover .vak__nr, .vak a:focus-visible .vak__nr { opacity: 0; }

/* 3. Samenstellen */
.maker { max-width: var(--max); margin: 0 auto; padding: clamp(5rem, 10vw, 9.5rem) var(--rand) 0; }
.config { border: 1px solid var(--naad); border-radius: calc(var(--r) * 1.5); overflow: hidden; background: #16110d; box-shadow: 0 60px 120px -70px #000; }
.toonbank { position: relative; display: grid; place-items: center; min-height: clamp(19rem, 40vw, 34rem); padding: clamp(3.5rem, 6vw, 5rem) clamp(1.5rem, 7vw, 7rem); overflow: hidden; isolation: isolate; background: radial-gradient(120% 90% at 50% 115%, #2c1f15 0%, #1b1410 55%, #130f0c 100%); }
.toonbank__licht { position: absolute; inset: 0; z-index: -1; background: radial-gradient(40rem 26rem at var(--lx, 46%) var(--ly, 40%), rgba(255, 190, 110, .26), rgba(255, 170, 90, .08) 45%, transparent 72%); }
.toonbank__keuze { position: absolute; left: 1.4rem; top: 1.4rem; display: flex; gap: .5rem; }
.toonbank__keuze span { padding: .5rem .8rem; border-radius: 99px; border: 1px solid var(--naad); background: rgba(18, 14, 11, .5); font: 600 .66rem/1 var(--ui); letter-spacing: .13em; text-transform: uppercase; color: var(--beige); }
.plank { position: relative; width: min(100%, 50rem); container-type: inline-size; }
.plank__in { position: relative; aspect-ratio: 1100 / 880; margin: -17% 0 -18%; transform: perspective(70rem) rotateX(var(--px, 0deg)) rotateY(var(--py, 0deg)) scale(var(--schaal, 1)); transition: transform .9s var(--zacht); }
.plank__hout { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .6s; }
.config[data-hout="eiken"] .plank__hout[data-hout="eiken"], .config[data-hout="noten"] .plank__hout[data-hout="noten"], .config[data-hout="bamboe"] .plank__hout[data-hout="bamboe"] { opacity: 1; }
.plank__gravure { position: absolute; left: 9%; top: 34%; width: 58%; height: 30%; display: grid; place-items: center; text-align: center; pointer-events: none; }
.brand { position: relative; display: inline-block; }
.plank__gravure span { display: block; clip-path: inset(-30% calc(100% - var(--brand, 100%)) -30% -5%); font: 700 var(--gs, 5.8cqw)/1 var(--ui); letter-spacing: -.01em; white-space: nowrap; color: #3a2010; mix-blend-mode: multiply; opacity: .88; text-shadow: 0 .014em 0 rgba(255, 236, 200, .4), 0 -.012em .02em rgba(30, 12, 0, .5); transition: color .5s; }
.config[data-letter="sierlijk"] .plank__gravure span { font-family: var(--kop); font-style: italic; font-weight: 500; letter-spacing: 0; }
.config[data-hout="noten"] .plank__gravure span { color: #1a0d06; opacity: .8; text-shadow: 0 .014em 0 rgba(255, 220, 180, .16); }
.config[data-hout="bamboe"] .plank__gravure span { color: #5a3716; }
.laser { position: absolute; left: var(--brand, 100%); top: 50%; width: 0; height: 0; opacity: 0; }
.laser::before { content: ""; position: absolute; width: 1rem; height: 1rem; margin: -.5rem; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #ffe0b0 24%, rgba(255, 150, 50, .8) 46%, transparent 70%); box-shadow: 0 0 1.8rem .55rem rgba(255, 150, 60, .5); }
.laser::after { content: ""; position: absolute; left: -1px; bottom: .3rem; width: 2px; height: 3.2rem; background: linear-gradient(0deg, rgba(255, 220, 180, .5), transparent); filter: blur(1.5px); transform: rotate(8deg); transform-origin: bottom; }
.maat { position: absolute; display: flex; align-items: center; gap: .7rem; font: 600 .66rem/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--messing); white-space: nowrap; }
.maat::before, .maat::after { content: ""; flex: 1; background: currentColor; opacity: .45; }
.maat b { font-weight: 600; }
.maat--b { left: 5.5%; right: 5%; top: 77%; height: 1rem; border-inline: 1px solid rgba(220, 178, 114, .45); }
.maat--b::before, .maat--b::after { height: 1px; }
.maat--h { left: 1%; top: 24.8%; bottom: 27.4%; width: 1rem; flex-direction: column; border-top: 1px solid rgba(220, 178, 114, .45); border-bottom: 1px solid rgba(220, 178, 114, .45); }
.maat--h b { writing-mode: vertical-rl; transform: rotate(180deg); }
.maat--h::before, .maat--h::after { width: 1px; }

.balk { display: grid; grid-template-columns: 1fr 1fr 1.25fr 1fr; border-top: 1px solid var(--naad); }
.stap { min-width: 0; margin: 0; padding: 1.6rem 1.6rem 1.8rem; border: 0; }
.stap + .stap { border-left: 1px solid var(--naad); }
.stap legend { float: left; width: 100%; display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; padding: 0; font: 600 .7rem/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--as); }
.stap legend b { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--goud); font-size: .68rem; letter-spacing: 0; color: var(--messing); }
.keuzes { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.keuzes--letter { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .6rem; }
.keuzes--maat .keuze, .keuzes--letter .keuze { align-content: center; }
.keuze { position: relative; display: grid; justify-items: center; align-content: start; gap: .55rem; min-height: 3rem; padding: .7rem .3rem; border-radius: .9rem; border: 1px solid var(--naad); text-align: center; font: 600 .78rem/1.2 var(--ui); cursor: pointer; transition: border-color .25s, background .25s; }
.keuze input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.keuze:hover { border-color: var(--naad-2); }
.keuze:has(input:checked) { border-color: var(--messing); background: rgba(184, 135, 58, .16); }
.keuze:has(input:focus-visible) { outline: 2px solid var(--messing); outline-offset: 2px; }
.keuze small { display: block; margin-top: .25rem; font: 400 .7rem/1 var(--tekst); letter-spacing: 0; color: var(--as); }
.keuzes--hout .toon { width: 2.2rem; height: 2.2rem; }
.keuze em { font: italic 500 1rem/1 var(--kop); color: inherit; }
.tekstveld { clear: both; display: grid; gap: .5rem; }
.tekstveld span { font-size: .78rem; line-height: 1.2; color: var(--as); }
.tekstveld input { width: 100%; height: 3rem; padding: 0 1rem; border-radius: .8rem; border: 1px solid var(--naad-2); background: rgba(0, 0, 0, .28); color: var(--linnen); font: 500 1rem var(--tekst); transition: border-color .25s; }
.tekstveld input:focus { outline: none; border-color: var(--messing); }
.stap--totaal { display: grid; align-content: center; gap: .7rem; background: rgba(184, 135, 58, .08); }
.totaal__naam { font: 600 .7rem/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--as); }
.totaal__prijs { font: 340 2.7rem/1 var(--kop); font-variant-numeric: tabular-nums; }
.totaal__klein { font-size: .78rem; text-align: center; color: var(--as); }

/* 4. Meest gekozen */
.kast__knoppen { display: flex; gap: .5rem; flex: none; }
.kast__knoppen button, .stem__knoppen button { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 1px solid var(--naad-2); transition: background .3s, color .3s, border-color .3s; }
.kast__knoppen button:first-child .ic, .stem__knoppen button:first-child .ic { transform: rotate(180deg); }
.kast__knoppen button:hover, .stem__knoppen button:hover { background: var(--linnen); border-color: var(--linnen); color: var(--nacht); }
.kast__rij { display: flex; gap: 1rem; margin: 0 calc(var(--rand) * -1); padding: 0 var(--rand) 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: none; cursor: grab; }
.kast__rij::-webkit-scrollbar { display: none; }
.kast__rij.is-sleep { cursor: grabbing; scroll-snap-type: none; }
.kast__rij.is-sleep a { pointer-events: none; }
.stuk { flex: 0 0 clamp(15.5rem, 23vw, 20rem); scroll-snap-align: start; }
.stuk--etalage { flex-basis: clamp(18rem, 31vw, 27rem); }
.stuk a { position: relative; display: grid; grid-template-rows: 1fr auto; height: 100%; min-height: 27rem; border-radius: var(--r); overflow: hidden; border: 1px solid var(--naad); background: linear-gradient(170deg, #201811, #16110d); isolation: isolate; transition: border-color .4s; -webkit-user-drag: none; }
.stuk a:hover { border-color: rgba(220, 178, 114, .5); }
.stuk__beeld { position: relative; display: grid; place-items: center; min-height: 16rem; padding: 2.6rem 1.6rem 1rem; }
.stuk__beeld::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 56%, rgba(222, 158, 76, .42), transparent 62%); opacity: .45; transition: opacity .5s; }
.stuk a:hover .stuk__beeld::before { opacity: 1; }
.stuk__beeld img { width: auto; max-width: 100%; max-height: 12.5rem; object-fit: contain; filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .55)) brightness(.92); transition: transform .7s var(--zacht), filter .5s; -webkit-user-drag: none; }
.stuk a:hover img { transform: translateY(-6px) scale(1.05) rotate(-2deg); filter: drop-shadow(0 30px 28px rgba(0, 0, 0, .6)) brightness(1.06); }
.stuk__info { display: grid; gap: .35rem; padding: 0 4.6rem 1.5rem 1.4rem; }
.stuk__info h3 { font-size: 1.32rem; line-height: 1.15; font-weight: 380; }
.stuk__info p { font-size: .84rem; line-height: 1.4; color: var(--as); }
.stuk__info .stuk__prijs { margin-top: .5rem; font: 600 1rem/1 var(--ui); color: var(--linnen); }
.stuk__prijs small { margin-right: .2rem; font: 400 .74rem var(--tekst); color: var(--as); }
.stuk__label { position: absolute; left: 1.1rem; top: 1.1rem; z-index: 2; padding: .45rem .7rem; border-radius: 99px; background: var(--goud); color: #1a1208; font: 700 .6rem/1 var(--ui); letter-spacing: .13em; text-transform: uppercase; }
.stuk__houten { position: absolute; right: 1.1rem; top: 1.2rem; display: flex; gap: .3rem; }
.stuk__houten .toon { width: .8rem; height: .8rem; }
.stuk__plus { position: absolute; right: 1.2rem; bottom: 1.4rem; z-index: 2; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%; border: 1px solid var(--naad-2); transition: background .3s, color .3s, border-color .3s, transform .4s var(--zacht); }
.stuk a:hover .stuk__plus { background: var(--goud); border-color: var(--goud); color: #1a1208; transform: rotate(-45deg); }
/* Eén lichte etalage: de draaiende flesopener. De hele kaart krijgt één beige waas, zodat de video naadloos in de kaart ligt. */
.stuk--etalage a { background: #e9dfd8; border-color: transparent; color: var(--inkt); }
.stuk--etalage a::after { content: ""; position: absolute; inset: 0; z-index: 1; background: #e6d8c0; mix-blend-mode: multiply; pointer-events: none; }
.stuk--etalage .stuk__beeld { min-height: 0; padding: 0; overflow: hidden; }
.stuk--etalage .stuk__beeld::before { display: none; }
.stuk--etalage video { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: contain; -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 34%, #000 66%, transparent 80%); mask-image: linear-gradient(90deg, transparent 20%, #000 34%, #000 66%, transparent 80%); }
.stuk--etalage .stuk__info { position: relative; z-index: 2; padding-top: 1rem; }
.stuk--etalage .stuk__info p { color: #5b4a39; }
.stuk--etalage .stuk__info .stuk__prijs { color: var(--inkt); }
.stuk--etalage .stuk__prijs small { color: #5b4a39; }
.stuk--etalage .stuk__label { position: static; justify-self: start; margin-bottom: .5rem; background: var(--inkt); color: var(--beige); }
.stuk--etalage .stuk__plus { border-color: rgba(30, 30, 30, .35); }
.stuk--etalage a:hover .stuk__plus { background: var(--inkt); border-color: var(--inkt); color: var(--beige); }
.kast__voet { display: flex; align-items: center; gap: 2rem; margin-top: 1.4rem; }
.kast__balk { flex: 1; height: 1px; background: var(--naad-2); }
.kast__balk i { display: block; height: 3px; margin-top: -1px; width: 30%; background: var(--goud); transform-origin: left; }

/* 5. Bij jou thuis */
.thuis__beelden { display: flex; gap: 1rem; align-items: flex-start; }
.kijk { position: relative; min-width: 0; margin: 0; border-radius: var(--r); }
.kijk--breed { flex: 1.7683 1 0; aspect-ratio: 2000 / 1131; }
.kijk--hoog { flex: .8 1 0; aspect-ratio: 4 / 5; }
.kijk__beeld { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.kijk__beeld img { width: 100%; height: 100%; object-fit: cover; }
.kijk figcaption { position: absolute; left: 1.1rem; top: 1.1rem; padding: .5rem .8rem; border-radius: 99px; border: 1px solid var(--naad); background: rgba(18, 14, 11, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 600 .64rem/1 var(--ui); letter-spacing: .15em; text-transform: uppercase; color: var(--beige); }
.punt { position: absolute; left: var(--x); top: var(--y); z-index: 2; width: 0; height: 0; }
.punt.is-open, .punt:hover { z-index: 3; }
.punt button { position: relative; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; border-radius: 50%; border: 1px solid rgba(241, 233, 220, .55); background: rgba(18, 14, 11, .38); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .3s, border-color .3s, transform .4s var(--zacht); }
.punt button i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--linnen); }
.punt button::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(241, 233, 220, .6); animation: pols 2.6s infinite; }
.punt:hover button, .punt.is-open button { background: var(--goud); border-color: var(--goud); transform: scale(1.1); }
.punt__kaart { position: absolute; left: 1.9rem; top: -1.75rem; display: flex; align-items: center; gap: .8rem; padding: .55rem .9rem .55rem .6rem; border-radius: 1rem; border: 1px solid var(--naad-2); background: rgba(18, 14, 11, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); white-space: nowrap; opacity: 0; visibility: hidden; transform: translateX(-.5rem) scale(.96); transform-origin: left center; transition: opacity .3s, transform .4s var(--zacht), visibility 0s .3s; }
.punt--links .punt__kaart { left: auto; right: 1.9rem; transform: translateX(.5rem) scale(.96); transform-origin: right center; }
.punt:hover .punt__kaart, .punt.is-open .punt__kaart, .punt:focus-within .punt__kaart { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.punt__kaart img { width: 3rem; height: 3rem; object-fit: contain; }
.punt__kaart span { display: grid; gap: .3rem; font-size: .78rem; line-height: 1.1; color: var(--as); }
.punt__kaart b { font: 400 1.05rem/1 var(--kop); color: var(--linnen); }
.punt__kaart .ic { color: var(--messing); }

/* 6. De werkplaats */
.drieluik { display: flex; gap: 1rem; height: clamp(26rem, 44vw, 39rem); }
.luik { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--r); overflow: hidden; isolation: isolate; cursor: pointer; transition: flex-grow .9s var(--zacht); }
.luik.is-actief { flex-grow: 2.6; cursor: default; }
.luik video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); filter: brightness(.5) saturate(.75); transition: filter .8s, transform 1.4s var(--zacht); }
.luik.is-actief video { transform: none; filter: none; }
.luik::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(11, 8, 6, .9)); }
.luik__tekst { position: absolute; inset: auto 1.6rem 1.5rem 1.6rem; z-index: 1; display: grid; gap: .5rem; }
.luik__tekst span { font: 600 .72rem/1 var(--ui); letter-spacing: .18em; color: var(--messing); }
.luik__tekst h3 { font-size: clamp(1.6rem, 2.6vw, 2.5rem); }
.luik__tekst p { max-width: 24rem; max-height: 0; overflow: hidden; opacity: 0; font-size: .95rem; color: #ddd3c3; transition: max-height .7s var(--zacht), opacity .5s; }
.luik.is-actief .luik__tekst p { max-height: 6rem; opacity: 1; transition-delay: .2s; }

/* 7. Cadeau voor: labels aan een touw */
.lijn { position: relative; }
.lijn__touw { position: absolute; left: 0; top: 0; width: 100%; height: 5rem; overflow: visible; }
.lijn__touw path { fill: none; stroke: #8a6b47; stroke-width: 2; stroke-linecap: round; }
.lijn__labels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.6rem, 1.5vw, 1.4rem); align-items: start; }
.label { position: relative; padding-top: calc(var(--y) + 1.5rem); }
.label::before { content: ""; position: absolute; left: 50%; top: var(--y); z-index: 1; width: 1px; height: 2.7rem; background: #a58358; }
.label a { position: relative; display: grid; align-content: start; gap: .6rem; min-height: 19rem; padding: 3.4rem 1.3rem 4.6rem; background: linear-gradient(175deg, #efe6d6, #dccdb4); color: var(--inkt); transform: rotate(calc(var(--hoek, 0deg) + var(--zwaai, 0deg))); transform-origin: 50% 1.15rem; clip-path: polygon(24% 0, 76% 0, 100% 3rem, 100% 100%, 0 100%, 0 3rem); -webkit-mask: radial-gradient(circle at 50% 1.15rem, transparent .4rem, #000 .46rem); mask: radial-gradient(circle at 50% 1.15rem, transparent .4rem, #000 .46rem); transition: background .4s; }
.label a::after { content: ""; position: absolute; left: 50%; top: 1.15rem; width: 1.5rem; height: 1.5rem; margin: -.75rem 0 0 -.75rem; border-radius: 50%; border: 1.5px solid rgba(90, 66, 40, .35); }
.label a:hover { background: linear-gradient(175deg, #fbf4e6, #ebdcc2); }
.label__nr { font: 600 .7rem/1 var(--ui); letter-spacing: .16em; color: var(--hout); }
.label b { font: 400 clamp(1.25rem, 1.8vw, 1.7rem)/1.08 var(--kop); font-variation-settings: "SOFT" 60; color: #2a1c10; }
.label a > span:not(.label__nr) { font-size: .86rem; line-height: 1.45; color: #5d4a36; }
.label .ic { position: absolute; left: 1.3rem; bottom: 1.3rem; width: 2.3rem; height: 2.3rem; padding: .55rem; border-radius: 50%; border: 1px solid rgba(90, 66, 40, .4); color: var(--hout); transition: background .3s, color .3s, border-color .3s, transform .4s var(--zacht); }
.label a:hover .ic { background: var(--hout); border-color: var(--hout); color: var(--beige); transform: translateX(.3rem); }

/* 8. Zakelijk */
.zaak { position: relative; margin-top: clamp(5rem, 10vw, 9.5rem); border-block: 1px solid var(--naad); background: linear-gradient(180deg, #1d160f, #16110d); overflow: clip; }
.zaak__in { max-width: var(--max); margin: 0 auto; padding: clamp(4rem, 8vw, 7.5rem) var(--rand); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.zaak__tekst { display: grid; gap: 1.4rem; justify-items: start; }
.zaak__tekst > p { max-width: 32rem; font-size: 1.05rem; color: var(--as); }
.zaak__lijst { width: 100%; margin-top: 1rem; border-top: 1px solid var(--naad); }
.zaak__lijst a { display: flex; align-items: center; gap: 1.2rem; padding: 1.05rem 0; border-bottom: 1px solid var(--naad); font: 380 clamp(1.1rem, 1.6vw, 1.3rem)/1.2 var(--kop); transition: color .3s, padding .4s var(--zacht); }
.zaak__lijst a span { width: 1.6rem; font: 600 .68rem/1 var(--ui); letter-spacing: .14em; color: var(--as); }
.zaak__lijst a .ic { margin-left: auto; color: var(--messing); opacity: 0; transform: translateX(-.6rem); transition: opacity .3s, transform .4s var(--zacht); }
.zaak__lijst a:hover { padding-left: .6rem; color: var(--messing); }
.zaak__lijst a:hover .ic { opacity: 1; transform: none; }
.zaak__beeld { position: relative; aspect-ratio: 1 / 1.05; }
.zaak__licht { position: absolute; inset: -12%; background: radial-gradient(circle at 50% 46%, rgba(222, 158, 76, .4), transparent 60%); }
.zaak__beeld img { position: absolute; height: auto; filter: drop-shadow(0 30px 34px rgba(0, 0, 0, .6)); }
.zaak__a { left: 3%; top: 0; width: 56%; }
.zaak__b { right: 1%; top: 27%; width: 40%; }
.zaak__c { left: 15%; bottom: 0; width: 45%; }

/* 9. Het verhaal */
.verhaal { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.verhaal__beeld { margin: 0; }
.verhaal__dak { aspect-ratio: 4 / 5; overflow: hidden; clip-path: polygon(50% 0%, 100% 24%, 100% 100%, 0% 100%, 0% 24%); }
.verhaal__dak img { width: 100%; height: 112%; object-fit: cover; filter: brightness(.84) saturate(.92) contrast(1.04); }
.verhaal__tekst { display: grid; gap: 1.5rem; justify-items: start; }
.verhaal__groot { font: 340 clamp(1.9rem, 3.5vw, 3.1rem)/1.12 var(--kop); font-variation-settings: "SOFT" 60; letter-spacing: -.012em; }
.verhaal__tekst > p[data-toon]:not(.verhaal__naam) { max-width: 34rem; color: var(--as); }
.verhaal__naam { font: italic 400 1.7rem/1 var(--kop); color: var(--messing); }

/* 10. Reviews */
.stem { max-width: 56rem; margin: 0 auto; text-align: center; }
.stem__lijst { display: grid; }
.stem__lijst li { grid-area: 1 / 1; display: grid; gap: 1.5rem; justify-items: center; align-content: center; opacity: 0; visibility: hidden; transform: translateY(1rem); transition: opacity .6s, transform .8s var(--zacht), visibility 0s .6s; }
.stem__lijst li.is-actief { opacity: 1; visibility: visible; transform: none; transition-delay: .2s, .2s, 0s; }
.sterren { font-size: 1rem; letter-spacing: .3em; color: var(--goud); }
.stem blockquote { margin: 0; font: 340 clamp(1.5rem, 3vw, 2.5rem)/1.25 var(--kop); font-variation-settings: "SOFT" 60; letter-spacing: -.01em; text-wrap: balance; }
.stem__naam { display: grid; gap: .35rem; font-size: .84rem; line-height: 1.2; color: var(--as); }
.stem__naam b { font: 600 .8rem/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--linnen); }
.stem__knoppen { display: flex; justify-content: center; align-items: center; gap: 1.2rem; margin-top: 2.4rem; font: 600 .76rem/1 var(--ui); letter-spacing: .14em; color: var(--as); }

/* 11. Vragen */
.vragen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; }
.vragen .sk { position: sticky; top: 7rem; margin: 0; justify-items: start; }
.faq details { border-bottom: 1px solid var(--naad); }
.faq details:first-child { border-top: 1px solid var(--naad); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem 0; font: 380 clamp(1.15rem, 1.7vw, 1.45rem)/1.25 var(--kop); list-style: none; cursor: pointer; transition: color .3s; }
.faq summary:hover { color: var(--messing); }
.faq summary .ic { width: 2.4rem; height: 2.4rem; padding: .6rem; border-radius: 50%; border: 1px solid var(--naad-2); color: var(--messing); transition: transform .4s var(--zacht), background .3s; }
.faq details[open] summary .ic { transform: rotate(45deg); background: rgba(184, 135, 58, .2); }
.faq details p { max-width: 40rem; padding: 0 4rem 1.6rem 0; color: var(--as); }

/* Voet */
.voet { position: relative; margin-top: clamp(5rem, 10vw, 9.5rem); border-top: 1px solid var(--naad); background: #0e0a08; }
.voet__roep { position: relative; display: grid; justify-items: center; gap: 1.7rem; padding: clamp(5.5rem, 11vw, 9.5rem) var(--rand) clamp(4rem, 8vw, 6.5rem); text-align: center; overflow: hidden; isolation: isolate; }
.voet__roep::before { content: ""; position: absolute; left: 50%; top: 60%; z-index: -1; width: 64rem; height: 36rem; transform: translate(-50%, -50%); background: radial-gradient(ellipse, rgba(222, 158, 76, .24), transparent 64%); }
.voet__dak { position: absolute; left: 50%; top: 2rem; z-index: -1; width: min(70rem, 130%); max-width: none; height: auto; margin-left: max(-35rem, -65%); overflow: visible; }
.voet__dak path { fill: none; stroke: var(--goud); stroke-width: .28; stroke-linecap: round; stroke-linejoin: round; opacity: .42; }
.voet__groot { font: 320 clamp(2.8rem, 8vw, 7.4rem)/1 var(--kop); font-variation-settings: "SOFT" 60; letter-spacing: -.028em; text-wrap: balance; }
.voet__in { max-width: var(--max); margin: 0 auto; padding: 3.5rem var(--rand); display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 2.5rem; border-top: 1px solid var(--naad); }
.voet__merk { display: grid; gap: 1.2rem; align-content: start; justify-items: start; }
.voet__merk p { max-width: 20rem; font-size: .92rem; color: var(--as); }
.voet__merk .voet__adres { font-size: .8rem; opacity: .8; }
.voet__kolom { display: grid; gap: .65rem; align-content: start; }
.voet__kolom h3 { margin-bottom: .6rem; font: 600 .7rem/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--messing); }
.voet__kolom a { font-size: .92rem; line-height: 1.35; color: var(--as); transition: color .2s; }
.voet__kolom a:hover, .voet__links a:hover { color: var(--linnen); }
.voet__onder { max-width: var(--max); margin: 0 auto; padding: 1.6rem var(--rand) 2.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.2rem; border-top: 1px solid var(--naad); font-size: .8rem; color: var(--as); }
.voet__onder > p:last-child { margin-left: auto; }
.betaal { display: flex; flex-wrap: wrap; gap: .4rem; }
.betaal li { padding: .42rem .65rem; border: 1px solid var(--naad-2); border-radius: .4rem; font: 600 .64rem/1 var(--ui); letter-spacing: .04em; color: var(--beige); }
.voet__links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }

/* Zonder beweging (?stil of de systeeminstelling "minder beweging") */
.stil .doek, .stil .lamp { display: none; }
.stil *, .stil *::before, .stil *::after { animation: none !important; transition: none !important; }
.stil .hero { --hh: clamp(42rem, 100svh, 58rem); }
.stil .luik__tekst p { max-height: none; opacity: 1; }

/* Smaller */
@media (max-width: 1560px) {
  .snel__kop { display: none; }
  .snel { padding-left: .7rem; }
}
@media (max-width: 1180px) {
  .kop__nav--rechts { display: none; }
  .hero__doek { --focus: .5; }
  .hero__in { max-width: 33rem; }
  .vak__tekst b { font-size: 1.15rem; }
  .vak--groot .vak__tekst b { font-size: 2rem; }
  .snel li:nth-child(5) { display: none; }
  .balk { grid-template-columns: 1fr 1fr; }
  .stap:nth-child(3) { border-left: 0; }
  .stap:nth-child(n+3) { border-top: 1px solid var(--naad); }
  .voet__in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .voet__merk { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .kop__balk { grid-template-columns: auto 1fr auto; gap: .5rem; height: 4.25rem; }
  .kop__nav, .ikn--account { display: none; }
  .menuknop { display: block; }
  .kop .logo { justify-self: center; }
  .logo__merk { width: 2.6rem; }
  .logo__w b { font-size: .7rem; letter-spacing: .16em; }
  .strook span:nth-child(n+2) { display: none; }
}
@media (max-width: 980px) {
  .snel li:nth-child(4), .snel__kop { display: none; }
  .hero__in { max-width: 38rem; }
  .vakken { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(12rem, 34vw, 17rem); }
  .vak--hoog { grid-row: span 1; }
  .vak--hoog img { left: auto; right: 5%; top: 6%; width: 40%; height: 70%; }
  .vak:nth-child(8) { grid-column: span 2; }
  .vak:nth-child(8) img { top: 10%; width: 46%; height: 80%; object-position: center; }
  .vak:nth-child(8) .vak__tekst { right: 52%; }
  .zeker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zeker li:nth-child(3) { padding-left: 0; border-left: 0; }
  .zaak__in, .verhaal, .vragen { grid-template-columns: minmax(0, 1fr); }
  .vragen .sk { position: static; }
  .zaak__beeld { max-width: 30rem; width: 100%; justify-self: center; }
  .verhaal__beeld { max-width: 28rem; }
  .lijn__touw { display: none; }
  .lijn { margin: 0 calc(var(--rand) * -1); border-top: 2px solid #8a6b47; }
  .lijn__labels { grid-template-columns: repeat(5, 15rem); gap: 1rem; padding: 0 var(--rand) 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: none; }
  .lijn__labels::-webkit-scrollbar { display: none; }
  .label { --y: 0rem !important; scroll-snap-align: start; }
}
@media (max-width: 760px) {
  h2 { font-size: clamp(2.2rem, 10vw, 3rem); }
  .alleen-breed { display: none; }
  .hero { --hh: max(100svh, 43rem); }
  .hero__doek { --verh: .5655; --focus: .5; }
  .hero__in { max-width: none; }
  .hero__vlam, .speld { display: none; }
  .hero__gloed { left: 91.3%; top: 48.6%; width: 70%; margin: -35% 0 0 -35%; }
  .hero__sluier { background: linear-gradient(180deg, rgba(11, 8, 6, .86) 0%, rgba(11, 8, 6, .6) 36%, transparent 56%, transparent 78%, rgba(11, 8, 6, .94) 100%); }
  .hero__in { align-self: start; max-width: none; padding-top: 7.6rem; }
  .hero__kop { margin: 0 0 1.1rem; font-size: clamp(2.6rem, 12.4vw, 3.9rem); }
  .hero__intro { margin-bottom: 1.4rem; font-size: .98rem; line-height: 1.55; }
  .hero .knop--lijn { display: none; }
  .snel { margin: 0 0 1rem; padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .snel ul { display: flex; gap: .5rem; padding: 0 var(--rand); overflow-x: auto; scrollbar-width: none; }
  .snel ul::-webkit-scrollbar { display: none; }
  .snel li, .snel li:nth-child(n) { display: block; flex: none; }
  .snel li a { padding: .5rem .9rem .5rem .6rem; border: 1px solid var(--naad); background: rgba(18, 14, 11, .66); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .snel img { width: 2.6rem; height: 2.6rem; }
  .snel__alles { display: none; }
  .zeker li { padding: 1.2rem 1rem 1.2rem 0; gap: .8rem; }
  .zeker li + li { padding-left: 1rem; }
  .zeker li:nth-child(3) { padding-left: 0; }
  .zeker p { font-size: .76rem; }
  .zeker b { font-size: .74rem; }
  .vakken { gap: .6rem; grid-auto-rows: 13.5rem; }
  .vak--groot { grid-row: span 1; }
  .vak--groot .vak__tekst { right: 36%; }
  .vak--groot .vak__tekst b { font-size: 1.7rem; }
  .vak--groot img { width: 34%; }
  .vak:not(.vak--breed):not(.vak--groot):not(:nth-child(8)) img { right: 4%; left: auto; top: 8%; width: 64%; height: 44%; }
  .vak:nth-child(8) .vak__tekst span { display: block; }
  .kop .ikn:not(.ikn--tas) { display: none; }
  .vak__nr { left: 1rem; top: 1rem; }
  .vak__tekst { left: 1rem; right: 1rem; bottom: 1rem; }
  .vak__tekst span { display: none; }
  .vak--breed .vak__tekst span, .vak--groot .vak__tekst span { display: block; }
  .vak__tekst b { font-size: 1.15rem; }
  .toonbank { min-height: 16rem; padding: 4rem 1rem 2.2rem; }
  .balk { grid-template-columns: minmax(0, 1fr); }
  .stap { padding: 1.3rem 1.1rem 1.4rem; }
  .stap + .stap { border-left: 0; border-top: 1px solid var(--naad); }
  .sk--rij { align-items: flex-start; }
  .kast__knoppen { display: none; }
  .stuk { flex-basis: 72vw; }
  .stuk--etalage { flex-basis: 80vw; }
  .stuk a { min-height: 24rem; }
  .thuis__beelden { flex-direction: column; }
  .kijk--breed, .kijk--hoog { flex: none; width: 100%; }
  .punt__kaart img { display: none; }
  .punt__kaart { padding-left: .9rem; }
  .drieluik { flex-direction: column; height: auto; }
  .luik, .luik.is-actief { flex: none; height: 15rem; cursor: default; }
  .luik video { transform: none; filter: none; }
  .luik__tekst p { max-height: none; opacity: 1; }
  .faq details p { padding-right: 0; }
  .voet__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .voet__onder > p:last-child { margin-left: 0; }
}