/* Exclusief Wonen op Maat — opmaak van de site.
   Palet en regels staan in specs\SITE-BLAUWDRUK-2026-09-12.md.
   Kleur is een signaal: messing (goud uit het logo) alleen voor "hier kun je iets doen"
   en voor de maatlijn; staal alleen voor "dit raden we af". Verder hout, papier en inkt. */

:root {
  --hout:        #3A150A;   /* kastanje, het bruin uit het logo/de huidige site: donkere banden */
  --hout-diep:   #260D06;   /* voet en bovenstrook */
  --hout-licht:  #4A2114;   /* vlakken op een houtband */
  --messing:     #B29760;   /* goud uit het logo: signaal */
  --messing-licht:#D9C08B;  /* messing als tekst op hout (leesbaar) */
  --papier:      #FFFFFF;
  --gesso:       #F3EFE8;   /* lichte band, de kleur van grondlaag op mdf */
  --lijn:        #E3DCD1;
  --lijn-hout:   rgba(217, 192, 139, .22);
  --inkt:        #1E1613;
  --inkt-zacht:  #6A5F58;
  --staal:       #4F6B6F;   /* afraden, eerlijk advies */
  --wit-zacht:   #F6F1E8;   /* tekst op hout */
  --tekst:       720px;
  --wrap:        1180px;
  --rand:        clamp(18px, 4vw, 40px);
  --rond:        4px;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:    "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--papier); color: var(--inkt);
  font-family: var(--body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
@media (min-width: 1100px) { body { font-size: 18px; } }
img, svg, video { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
strong, b { font-weight: 600; }
:focus-visible { outline: 2px solid var(--messing); outline-offset: 3px; border-radius: 2px; }
.overslaan { position: absolute; left: var(--rand); top: -100px; z-index: 90; background: var(--hout); color: var(--wit-zacht); padding: 10px 16px; text-decoration: none; }
.overslaan:focus { top: 0; }

/* ── Typografie ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--display); font-optical-sizing: auto; margin: 0; line-height: 1.08; letter-spacing: -.02em; font-weight: 600; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.2rem); max-width: 16ch; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.55rem); max-width: 24ch; }
h3 { font-size: 1.28rem; letter-spacing: -.01em; line-height: 1.25; }
h4 { font-size: 1.05rem; }
.eyebrow {
  display: block; font-family: var(--mono); font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--messing); margin: 0 0 .9rem; font-weight: 500;
}
.band-hout .eyebrow { color: var(--messing-licht); }
.lede { font-size: 1.16rem; line-height: 1.55; color: var(--inkt-zacht); max-width: 60ch; }
.band-hout .lede { color: rgba(246, 241, 232, .82); }
.sec-kop { max-width: 760px; margin-bottom: clamp(26px, 4vw, 44px); }
.sec-kop h2 { margin-bottom: .6rem; }
.sec-kop .lede { margin: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── Lagen ───────────────────────────────────────────────────────────────── */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--rand); }
.band { padding: clamp(48px, 7vw, 96px) 0; }
.band-gesso { background: var(--gesso); }
.band-hout { background: var(--hout); color: var(--wit-zacht); }
.band-hout a { color: var(--messing-licht); }
.band-strak { padding: clamp(28px, 4vw, 44px) 0; }

/* Het meetlint: de scheidingslijn van dit huis. Een liniaal: fijne streepjes elke
   10 px, een lange elke 50. Geen lijn zomaar, een maat. */
.meetlint {
  height: 16px; border-bottom: 1px solid var(--lijn);
  background:
    repeating-linear-gradient(90deg, var(--lijn) 0 1px, transparent 1px 50px) left bottom / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, var(--lijn) 0 1px, transparent 1px 10px) left bottom / 100% 7px no-repeat;
}
.band-hout .meetlint, .meetlint.op-hout {
  border-color: var(--lijn-hout);
  background-image:
    repeating-linear-gradient(90deg, var(--lijn-hout) 0 1px, transparent 1px 50px),
    repeating-linear-gradient(90deg, var(--lijn-hout) 0 1px, transparent 1px 10px);
}

/* ── Knoppen: één component, het jasje bepaalt de band ───────────────────── */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px; border-radius: var(--rond); border: 1px solid var(--hout);
  background: var(--hout); color: var(--wit-zacht); font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer; line-height: 1.2; min-height: 48px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.knop:hover { background: var(--hout-diep); border-color: var(--hout-diep); }
.knop-lijn { background: transparent; color: var(--hout); }
.knop-lijn:hover { background: var(--gesso); border-color: var(--hout); }
.band-hout .knop, .knop-messing { background: var(--messing); border-color: var(--messing); color: var(--hout-diep); }
.band-hout .knop:hover, .knop-messing:hover { background: var(--messing-licht); border-color: var(--messing-licht); color: var(--hout-diep); }
.band-hout .knop-lijn { background: transparent; border-color: rgba(246, 241, 232, .55); color: var(--wit-zacht); }
.band-hout .knop-lijn:hover { background: rgba(246, 241, 232, .08); border-color: var(--wit-zacht); }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }
.pijl::after { content: "\2192"; font-family: var(--mono); }

/* ── Bovenstrook en balk ─────────────────────────────────────────────────── */
.strook { background: var(--hout-diep); color: rgba(246, 241, 232, .8); font-size: .86rem; }
.strook-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 36px; }
.strook a { color: var(--messing-licht); text-decoration: none; }
.strook a:hover { text-decoration: underline; }
.strook .weg { display: none; }
@media (min-width: 760px) { .strook .weg { display: inline; } }
.strook .mono { color: var(--wit-zacht); }

.balk { position: sticky; top: 0; z-index: 40; background: var(--hout); border-bottom: 1px solid var(--lijn-hout); }
.balk-in { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); min-height: 78px; }
.merk { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.merk img { height: 44px; width: auto; }
@media (max-width: 520px) { .merk img { height: 34px; } .mob-tel { display: none; } .hamburger { padding: 9px 12px; } }
.menu { margin-left: auto; display: none; }
.menu ul { display: flex; gap: clamp(14px, 1.8vw, 28px); list-style: none; margin: 0; padding: 0; }
.menu a { color: var(--wit-zacht); text-decoration: none; font-weight: 600; font-size: .98rem; padding: 8px 0; display: inline-block; border-bottom: 2px solid transparent; }
.menu a:hover { color: var(--messing-licht); }
.menu a[aria-current="page"] { border-bottom-color: var(--messing); }
.balk-tel { display: none; }
@media (min-width: 1000px) {
  .menu { display: block; }
  .balk-tel { display: inline-flex; flex: 0 0 auto; padding: 10px 16px; min-height: 42px; font-size: .95rem; }
  .hamburger { display: none; }
}
.hamburger {
  margin-left: auto; background: none; border: 1px solid rgba(246, 241, 232, .45); border-radius: var(--rond);
  color: var(--wit-zacht); font: inherit; font-weight: 600; padding: 9px 14px; cursor: pointer; min-height: 44px;
}
.mob-tel { display: inline-flex; align-items: center; padding: 9px 12px; min-height: 44px; color: var(--messing-licht); text-decoration: none; font-family: var(--mono); font-size: .9rem; white-space: nowrap; }
@media (min-width: 1000px) { .mob-tel { display: none; } }
.mobielmenu { background: var(--hout-diep); color: var(--wit-zacht); border-bottom: 1px solid var(--lijn-hout); }
.mobielmenu[hidden] { display: none; }
.mob-in { padding-top: 10px; padding-bottom: 22px; }
.mob-in a { display: block; color: var(--wit-zacht); text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--lijn-hout); font-weight: 600; }
.mob-in a i { display: block; font-style: normal; font-weight: 400; font-size: .88rem; color: rgba(246, 241, 232, .6); }
.mob-in .mob-klein a { padding: 9px 0; font-weight: 400; font-size: .95rem; }
.mob-in .knoppen { margin-top: 18px; }

/* ── Hero (voorpagina) ───────────────────────────────────────────────────── */
.hero { background: var(--hout); color: var(--wit-zacht); overflow: hidden; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero-tekst { padding: clamp(44px, 7vw, 96px) var(--rand) clamp(40px, 5vw, 64px); max-width: 640px; margin: 0 auto; width: 100%; }
.hero-tekst h1 { margin-bottom: 1.1rem; }
.hero-tekst .lede { font-size: 1.2rem; }
.hero-beeld { position: relative; min-height: 320px; }
.hero-beeld img { width: 100%; height: 100%; object-fit: cover; }
.hero-beeld picture { height: 100%; }
@media (min-width: 900px) {
  .hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .hero-tekst { margin: 0; padding-left: max(var(--rand), calc((100vw - var(--wrap)) / 2 + var(--rand))); }
  .hero-beeld { min-height: 560px; }
}
/* De maatlijn: een bemating zoals op een werktekening, over de foto heen. */
.maatlijn { position: absolute; left: 8%; right: 8%; bottom: 26px; height: 34px; pointer-events: none; }
.maatlijn::before { content: ""; position: absolute; left: 0; right: 0; top: 17px; height: 1px; background: var(--messing-licht); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.maatlijn::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 26px; border-left: 1px solid var(--messing-licht); border-right: 1px solid var(--messing-licht); }
.maatlijn b {
  position: absolute; left: 50%; top: 17px; transform: translate(-50%, -50%);
  font-family: var(--mono); font-weight: 500; font-size: .8rem; letter-spacing: .08em;
  color: var(--hout-diep); background: var(--messing-licht); padding: 3px 10px; border-radius: 2px; white-space: nowrap;
}
.hero-bijschrift { position: absolute; left: 0; right: 0; top: 0; padding: 12px 16px; font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wit-zacht); background: linear-gradient(180deg, rgba(38, 13, 6, .55), transparent); pointer-events: none; }

/* ── Paginakop (binnenpagina's) ──────────────────────────────────────────── */
.paginakop { background: var(--hout); color: var(--wit-zacht); }
.paginakop-in { display: grid; gap: clamp(22px, 4vw, 48px); padding: clamp(40px, 6vw, 80px) var(--rand) clamp(36px, 5vw, 64px); align-items: end; }
.paginakop h1 { margin-bottom: .9rem; }
.paginakop .lede { margin: 0; }
.paginakop-beeld { position: relative; }
.paginakop-beeld img { border-radius: var(--rond); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.paginakop-beeld .maatlijn { bottom: 18px; }
@media (min-width: 900px) { .paginakop-in.met-beeld { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.kruimel { font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--messing-licht); margin-bottom: 1.2rem; }
.kruimel a { color: inherit; text-decoration: none; }
.kruimel a:hover { text-decoration: underline; }
.kruimel span { opacity: .55; margin: 0 .5em; }

/* ── Feitenstrook ────────────────────────────────────────────────────────── */
.feiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
@media (min-width: 760px) { .feiten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.feit b { display: block; font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.feit span { display: block; color: var(--inkt-zacht); font-size: .95rem; margin-top: 4px; }
.band-hout .feit span { color: rgba(246, 241, 232, .7); }

/* ── Kaarten ─────────────────────────────────────────────────────────────── */
.kaarten { display: grid; gap: clamp(16px, 2.4vw, 28px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .kaarten.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kaarten.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kaart { display: flex; flex-direction: column; background: var(--papier); border: 1px solid var(--lijn); border-radius: var(--rond); overflow: hidden; text-decoration: none; color: inherit; }
.band-gesso .kaart { border-color: transparent; }
.band-hout .kaart { background: var(--hout-licht); border-color: var(--lijn-hout); color: var(--wit-zacht); }
.kaart img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.kaart-t { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.kaart-t h3 { margin: 0; }
.kaart-t p { margin: 0; color: var(--inkt-zacht); font-size: .98rem; }
.band-hout .kaart-t p { color: rgba(246, 241, 232, .75); }
.kaart-t .meer { margin-top: auto; padding-top: 10px; font-weight: 600; color: var(--hout); }
.band-hout .kaart-t .meer { color: var(--messing-licht); }
a.kaart:hover h3 { color: var(--messing); }
a.kaart:hover img { filter: brightness(1.04); }
.kaart-lijst { padding: 22px 24px; }
.kaart-lijst h3 { margin-bottom: 8px; }
.kaart-lijst ul { margin: 0; padding: 0; list-style: none; }
.kaart-lijst li { padding: 6px 0; border-top: 1px solid var(--lijn); font-size: .97rem; }
.kaart-lijst li:first-child { border-top: 0; }

/* ── Stappen (een echte volgorde, daarom genummerd) ──────────────────────── */
.stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2.4vw, 28px); counter-reset: stap; }
@media (min-width: 700px) { .stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .stappen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stappen li { counter-increment: stap; padding: 22px 0 0; border-top: 2px solid var(--hout); }
.band-hout .stappen li { border-top-color: var(--messing); }
.stappen li::before { content: counter(stap, decimal-leading-zero); font-family: var(--mono); color: var(--messing); font-size: .82rem; letter-spacing: .12em; display: block; margin-bottom: 10px; }
.stappen h3 { margin-bottom: 8px; }
.stappen p { margin: 0; color: var(--inkt-zacht); font-size: .98rem; }
.band-hout .stappen p { color: rgba(246, 241, 232, .75); }

/* ── Eerlijk advies ──────────────────────────────────────────────────────── */
.eerlijk { display: grid; gap: 18px; }
@media (min-width: 800px) { .eerlijk { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.eerlijk > div { border-left: 3px solid var(--staal); padding: 4px 0 4px 20px; }
.eerlijk h3 { font-size: 1.12rem; margin-bottom: 8px; }
.eerlijk p { margin: 0; font-size: .98rem; }
.band-hout .eerlijk > div { border-left-color: #8FB0B4; }
.afraden { border-left: 3px solid var(--staal); padding: 4px 0 4px 20px; margin: 1.6rem 0; }
.afraden .lbl { display: block; font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--staal); margin-bottom: 6px; }
.afraden p:last-child { margin-bottom: 0; }

/* ── Wel / niet ──────────────────────────────────────────────────────────── */
.welniet { display: grid; gap: 18px; margin: 1.8rem 0; }
@media (min-width: 720px) { .welniet { grid-template-columns: 1fr 1fr; } }
.welniet > div { background: var(--gesso); border-radius: var(--rond); padding: 20px 22px; border-left: 3px solid var(--hout); }
.welniet > div:nth-child(2) { border-left-color: var(--staal); }
.welniet h3 { font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hout); margin-bottom: 10px; font-weight: 500; }
.welniet > div:nth-child(2) h3 { color: var(--staal); }
.welniet ul { margin: 0; padding: 0; list-style: none; }
.welniet li { padding: 5px 0 5px 1.2em; position: relative; font-size: .97rem; }
.welniet li::before { content: "\2014"; position: absolute; left: 0; color: var(--messing); }
.welniet > div:nth-child(2) li::before { color: var(--staal); }

/* ── Lopende tekst ───────────────────────────────────────────────────────── */
.tekst { max-width: var(--tekst); }
.tekst h2 { margin: 2.2rem 0 .7rem; font-size: clamp(1.45rem, 2.6vw, 1.95rem); }
.tekst h2:first-child { margin-top: 0; }
.tekst h3 { margin: 1.7rem 0 .5rem; }
.tekst ul { padding-left: 0; list-style: none; margin: 1rem 0 1.4rem; }
.tekst ul li { position: relative; padding-left: 1.3em; margin-bottom: .5em; }
.tekst ul li::before { content: "\2014"; position: absolute; left: 0; color: var(--messing); }
.tekst ol { padding-left: 1.3em; }
.tekst a { color: var(--hout); text-decoration-color: var(--messing); text-underline-offset: .15em; }
.tekst a:hover { color: var(--messing); }
.tekst table { width: 100%; border-collapse: collapse; margin: 1.2rem 0 1.8rem; font-size: .97rem; }
.tekst th, .tekst td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tekst th { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--inkt-zacht); font-weight: 500; }
.tekst td.num, .tekst th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabelwrap { overflow-x: auto; }
.tweeluik { display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .tweeluik { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tweeluik.smal-rechts { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.tweeluik img { border-radius: var(--rond); width: 100%; object-fit: cover; }
.bijschrift { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; color: var(--inkt-zacht); margin-top: 8px; }
.band-hout .bijschrift { color: rgba(246, 241, 232, .6); }

/* ── Prijzen ─────────────────────────────────────────────────────────────── */
.prijzen { display: grid; gap: 18px; }
@media (min-width: 760px) { .prijzen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prijs { background: var(--papier); border: 1px solid var(--lijn); border-radius: var(--rond); padding: 22px 24px 24px; }
.band-hout .prijs { background: var(--hout-licht); border-color: var(--lijn-hout); }
.prijs .lbl { display: block; font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--inkt-zacht); margin-bottom: 10px; }
.band-hout .prijs .lbl { color: rgba(246, 241, 232, .6); }
.prijs b { display: block; font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.prijs i { display: block; font-style: normal; font-size: .92rem; color: var(--inkt-zacht); margin-top: 6px; }
.band-hout .prijs i { color: rgba(246, 241, 232, .72); }
.prijs p { margin: 12px 0 0; font-size: .96rem; }
.feitblok { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: baseline; background: var(--gesso); border-radius: var(--rond); padding: 22px 26px; margin: 1.8rem 0; }
.feitblok .g { font-family: var(--display); color: var(--hout); font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 600; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.feitblok .t { flex: 1 1 300px; font-size: .98rem; margin: 0; }

/* ── Vraag en antwoord ───────────────────────────────────────────────────── */
.qa { border-top: 1px solid var(--lijn); }
.qa details { border-bottom: 1px solid var(--lijn); }
.qa summary { cursor: pointer; padding: 16px 0; font-family: var(--display); font-weight: 600; font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-family: var(--mono); color: var(--messing); font-size: 1.3rem; flex: 0 0 auto; }
.qa details[open] summary::after { content: "\2212"; }
.qa .antwoord { padding: 0 0 18px; max-width: var(--tekst); }
.qa .antwoord p:last-child { margin-bottom: 0; }

/* ── Werk (foto's) ───────────────────────────────────────────────────────── */
.werk { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 800px) { .werk { grid-template-columns: repeat(4, minmax(0, 1fr)); } .werk .groot { grid-column: span 2; grid-row: span 2; } }
.werk figure { margin: 0; position: relative; }
.werk img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; border-radius: var(--rond); }
.werk .groot img { aspect-ratio: auto; }
.werk figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--wit-zacht); background: linear-gradient(0deg, rgba(38, 13, 6, .78), transparent); border-radius: 0 0 var(--rond) var(--rond); }

/* ── Mensen ──────────────────────────────────────────────────────────────── */
.mensen { display: grid; gap: 22px; }
@media (min-width: 700px) { .mensen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mens { display: flex; gap: 16px; align-items: flex-start; }
.mens .kop { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; background: var(--hout); color: var(--messing-licht); font-family: var(--display); font-weight: 600; font-size: 1.3rem; display: grid; place-items: center; overflow: hidden; }
.mens .kop img { width: 100%; height: 100%; object-fit: cover; }
.mens b { display: block; font-family: var(--display); font-size: 1.1rem; }
.mens i { display: block; font-style: normal; color: var(--inkt-zacht); font-size: .92rem; margin-bottom: 6px; }
.mens p { margin: 0; font-size: .97rem; }

/* ── Klanten ─────────────────────────────────────────────────────────────── */
.quotes { display: grid; gap: 18px; }
@media (min-width: 700px) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .quotes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.quote { margin: 0; background: var(--papier); border: 1px solid var(--lijn); border-radius: var(--rond); padding: 22px 22px 20px; display: flex; flex-direction: column; }
.quote p { font-family: var(--display); font-weight: 500; font-size: 1.08rem; line-height: 1.35; margin: 0 0 14px; letter-spacing: -.01em; }
.quote p::before { content: "\201C"; color: var(--messing); }
.quote p::after { content: "\201D"; color: var(--messing); }
.quote footer { margin-top: auto; font-size: .9rem; color: var(--inkt-zacht); font-family: var(--mono); }
.scores { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 26px; align-items: baseline; font-size: .95rem; color: var(--inkt-zacht); }
.scores b { font-family: var(--display); font-size: 1.4rem; color: var(--inkt); margin-right: 6px; }
.scores a { color: var(--hout); }

/* ── Slotband met contact ────────────────────────────────────────────────── */
.slot-in { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) { .slot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.contactrij { display: grid; gap: 10px; margin-top: 1.4rem; }
.contactrij a { display: flex; align-items: center; gap: 14px; text-decoration: none; padding: 14px 16px; border: 1px solid var(--lijn-hout); border-radius: var(--rond); color: var(--wit-zacht); background: rgba(0, 0, 0, .12); min-height: 56px; }
.contactrij a:hover { border-color: var(--messing); }
.contactrij b { font-family: var(--mono); font-weight: 500; }
.contactrij i { display: block; font-style: normal; font-size: .86rem; color: rgba(246, 241, 232, .65); }
.contactrij .ic { flex: 0 0 22px; width: 22px; height: 22px; color: var(--messing-licht); }
.bereik { font-size: .94rem; color: rgba(246, 241, 232, .7); margin-top: 1rem; }
.bereik b { color: var(--wit-zacht); font-weight: 600; }

/* ── Het formulier van Maatwerk DESK ─────────────────────────────────────────
   Het script brengt zijn eigen opmaak mee in de kleuren van de keukensite; alles zit in
   variabelen, dus hier alleen de kleuren omzetten. Op licht: hout op papier. Op hout:
   messing op hout. De klasse .band-hout of .band-gesso wint van het script omdat de
   selector specifieker is. */
main .mwf { --mwf-kleur: var(--hout); --mwf-inkt: var(--inkt); --mwf-inkt-zacht: var(--inkt-zacht); --mwf-vlak: var(--papier); --mwf-lijn: var(--lijn); --mwf-rond: var(--rond); }
main .mwf .mwf-knop, main .mwf .mwf-tijd.aan { color: var(--wit-zacht); }
main .mwf .mwf-deur.aan, main .mwf .mwf-dag.aan { background: rgba(178, 151, 96, .12); }
main .mwf .mwf-klaar .vink { background: var(--messing); }
main .mwf .mwf-uitkomst .lbl { color: var(--messing); }
main .band-hout .mwf { --mwf-kleur: var(--messing); --mwf-inkt: var(--wit-zacht); --mwf-inkt-zacht: rgba(246, 241, 232, .68); --mwf-vlak: var(--hout-licht); --mwf-lijn: var(--lijn-hout); }
main .band-hout .mwf .mwf-knop, main .band-hout .mwf .mwf-tijd.aan { color: var(--hout-diep); }
main .band-hout .mwf .mwf-klaar h3 { color: var(--wit-zacht); }
.formvak { background: var(--papier); border: 1px solid var(--lijn); border-radius: var(--rond); padding: clamp(20px, 3vw, 30px); }
.band-hout .formvak { background: rgba(0, 0, 0, .14); border-color: var(--lijn-hout); }
.formvak > h2, .formvak > h3 { margin-bottom: 6px; }
.formvak > p { color: var(--inkt-zacht); font-size: .96rem; }
.band-hout .formvak > p { color: rgba(246, 241, 232, .72); }

/* Eigen formulier (servicemelding): zelfde taal als het widget */
.ef { display: grid; gap: 14px; }
.ef .rij { display: grid; gap: 5px; }
.ef label { font-size: .86rem; font-weight: 600; color: var(--inkt-zacht); }
.ef label i { font-style: normal; color: var(--messing); }
.ef input, .ef select, .ef textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--lijn); border-radius: var(--rond); background: var(--papier); color: var(--inkt); font: inherit; font-size: 1rem; }
.ef input:focus, .ef select:focus, .ef textarea:focus { outline: 2px solid var(--messing); outline-offset: 1px; border-color: transparent; }
.ef textarea { min-height: 120px; resize: vertical; }
.ef .twee { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .ef .twee { grid-template-columns: 1fr; } }
.ef .pot { position: absolute; left: -9999px; }
.ef .fout { display: none; background: rgba(169, 58, 43, .1); border: 1px solid rgba(169, 58, 43, .4); padding: 11px 14px; border-radius: var(--rond); font-size: .94rem; }
.ef .fout.zichtbaar { display: block; }
.ef .klein { font-size: .82rem; color: var(--inkt-zacht); margin: 0; }
.ef-klaar { padding: 8px 0; }
.ef-klaar h3 { margin-bottom: 6px; }

/* ── Kastcheck ───────────────────────────────────────────────────────────── */
.kc { display: grid; gap: clamp(20px, 3vw, 36px); align-items: start; }
@media (min-width: 900px) { .kc { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .kc-uitkomst { position: sticky; top: 96px; } }
.kc-vragen { display: grid; gap: 22px; }
.kc-vraag label, .kc-lbl { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; font-size: .95rem; margin-bottom: 10px; }
.kc-uit { font-family: var(--mono); font-weight: 500; color: var(--hout); }
.kc-hint { font-size: .86rem; color: var(--inkt-zacht); margin: 8px 0 0; }
.kc-keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.kc-k { font: inherit; font-size: .95rem; padding: 10px 14px; min-height: 44px; border: 1px solid var(--lijn); border-radius: var(--rond); background: var(--papier); color: var(--inkt); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.kc-k:hover { border-color: var(--messing); }
.kc-k.aan { border-color: var(--hout); background: var(--hout); color: var(--wit-zacht); }
.kc input[type="range"] { width: 100%; accent-color: var(--hout); height: 32px; }
.kc-schaal { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .72rem; color: var(--inkt-zacht); }
.kc-uitkomst { background: var(--papier); border: 1px solid var(--lijn); border-left: 3px solid var(--messing); border-radius: var(--rond); padding: clamp(20px, 3vw, 28px); }
.kc-uitkomst .lbl { display: block; font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--messing); margin-bottom: 8px; }
.kc-uitkomst b { display: block; font-family: var(--display); font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.kc-uitkomst i { display: block; font-style: normal; font-size: .9rem; color: var(--inkt-zacht); margin-top: 8px; }
.kc-uitkomst p { font-size: .96rem; margin: 14px 0 0; }
.kc-afraad { border-left: 3px solid var(--staal); padding-left: 14px; color: var(--inkt); }
.kc-drie { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--lijn); }
.kc-drie .mwf-uitkomst { display: none; }

/* ── Luxe en signatuur (ronde 2, 12 sep) ─────────────────────────────────────
   Tekentafel: een raster van 8 mm op de houtbanden, zo licht dat je het pas ziet
   als je ernaar kijkt. Het meetlint met millimeters onder de hero. De maatlijn
   die zichzelf trekt. Alles rustig; het karakter zit in de maat, niet in effect. */
.hero, .paginakop {
  background-image:
    linear-gradient(rgba(217, 192, 139, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 192, 139, .055) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
  background-position: 0 0, 0 0;
}
.hero-tekst h1 { font-size: clamp(2.5rem, 5.8vw, 4.9rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.hero-tekst .lede { font-size: clamp(1.1rem, 1.6vw, 1.28rem); }
.hero-beeld img { transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.hero-beeld picture { overflow: hidden; display: block; height: 100%; }
@media (hover: hover) { .hero:hover .hero-beeld img { transform: scale(1.025); } }

/* de maatlijn trekt zichzelf bij het laden */
.maatlijn::before, .maatlijn::after { transform-origin: left center; }
.maatlijn.teken::before { animation: maatlijn-trek 1.1s cubic-bezier(.2, .7, .2, 1) .25s both; }
.maatlijn.teken::after { animation: maatlijn-eind 1.1s cubic-bezier(.2, .7, .2, 1) .25s both; }
.maatlijn.teken b { animation: maatlijn-label .5s ease 1.15s both; }
@keyframes maatlijn-trek { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes maatlijn-eind { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes maatlijn-label { from { opacity: 0; transform: translate(-50%, -30%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce) { .maatlijn.teken::before, .maatlijn.teken::after, .maatlijn.teken b { animation: none; } .hero-beeld img { transition: none; } }

/* het meetlint met millimeters: een liniaal over de volle breedte */
.liniaal { background: var(--hout-diep); color: var(--messing-licht); height: 44px; position: relative; overflow: hidden; border-top: 1px solid var(--lijn-hout); }
.liniaal-in {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(217, 192, 139, .55) 0 1px, transparent 1px 100px) left top / 100% 18px no-repeat,
    repeating-linear-gradient(90deg, rgba(217, 192, 139, .3) 0 1px, transparent 1px 50px) left top / 100% 11px no-repeat,
    repeating-linear-gradient(90deg, rgba(217, 192, 139, .18) 0 1px, transparent 1px 10px) left top / 100% 6px no-repeat;
}
.liniaal-cijfers { position: absolute; left: 0; right: 0; top: 20px; display: flex; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: rgba(217, 192, 139, .75); pointer-events: none; }
.liniaal-cijfers span { flex: 0 0 100px; padding-left: 4px; white-space: nowrap; }
.liniaal-tekst { position: absolute; right: var(--rand); top: 0; bottom: 0; display: flex; align-items: center; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--messing-licht); background: var(--hout-diep); padding-left: 16px; }

/* zachte onthulling bij scrollen: van zichtbaar naar zichtbaar, alleen een klein tilletje */
.onthul { transform: translateY(12px); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.onthul.zichtbaar { transform: none; }
@media (prefers-reduced-motion: reduce) { .onthul { opacity: 1; transform: none; transition: none; } }
html.geen-js .onthul { opacity: 1; transform: none; }

/* stalenkaart: materiaalstalen als verfkaartjes, met een gaatje bovenin */
.stalen { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.staal { position: relative; border-radius: var(--rond); overflow: hidden; border: 1px solid var(--lijn); background: var(--papier); display: flex; flex-direction: column; min-height: 200px; }
.staal-vlak { height: 128px; position: relative; }
.staal-vlak::after { content: ""; position: absolute; top: 10px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--papier); transform: translateX(-50%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.staal-t { padding: 12px 12px 14px; }
.staal-t b { display: block; font-family: var(--display); font-size: .98rem; letter-spacing: -.01em; line-height: 1.2; }
.staal-t i { display: block; font-style: normal; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-zacht); margin-top: 4px; }
.band-hout .staal { background: var(--hout-licht); border-color: var(--lijn-hout); }
.band-hout .staal-vlak::after { background: var(--hout-licht); }
.band-hout .staal-t i { color: rgba(246, 241, 232, .6); }
/* de stalen zelf: gemeten kleuren, nerf als fijne lijnen, geen plaatjes van een fabrikant */
.st-wit { background: #F2F1EC; }
.st-greige { background: #CFC7B8; }
.st-antraciet { background: #383E42; }
.st-dennengroen { background: #2A3A2E; }
.st-nachtblauw { background: #24303F; }
.st-terracotta { background: #9A5A3C; }
.st-eiken { background: linear-gradient(90deg, #D9B98A 0 6px, #CDAB79 6px 14px, #D7B686 14px 30px, #C8A472 30px 34px, #D9B98A 34px 52px); background-size: 52px 100%; }
.st-eiken-donker { background: linear-gradient(90deg, #A47A4E 0 7px, #94693F 7px 16px, #A57C51 16px 33px, #8E6339 33px 38px, #A47A4E 38px 55px); background-size: 55px 100%; }
.st-noten { background: linear-gradient(90deg, #5C3A24 0 8px, #4E2F1B 8px 15px, #62402A 15px 35px, #47291a 35px 40px, #5C3A24 40px 58px); background-size: 58px 100%; }
.st-zwart { background: #1C1B19; }

/* lichtbak voor ons werk */
.werk figure { cursor: zoom-in; }
.lichtbak { position: fixed; inset: 0; z-index: 80; background: rgba(38, 13, 6, .94); display: grid; place-items: center; padding: 24px; }
.lichtbak[hidden] { display: none; }
.lichtbak img { max-width: min(1400px, 100%); max-height: 84vh; width: auto; height: auto; border-radius: var(--rond); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lichtbak figcaption { color: var(--messing-licht); font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; margin-top: 14px; text-align: center; }
.lichtbak button { position: absolute; top: 18px; right: 18px; background: none; border: 1px solid rgba(246, 241, 232, .5); color: var(--wit-zacht); font: inherit; padding: 10px 14px; border-radius: var(--rond); cursor: pointer; min-height: 44px; }
.lichtbak button:hover { border-color: var(--messing); }

/* de kasttekening in de kastcheck */
.kc-tekening { margin: 0 0 18px; background: var(--gesso); border-radius: var(--rond); padding: 14px 14px 8px; }
.kc-tekening svg { width: 100%; height: auto; display: block; }
.kc-tekening .bijschrift { margin-top: 6px; }
.kc-uitkomst { padding-top: 16px; }

/* iets meer gewicht in de koppen van secties */
.sec-kop h2 { font-weight: 700; letter-spacing: -.025em; }
.feit b { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; }

/* ── LUXE (ronde 3, 12 sep, op verzoek van Marc: "we verkopen iets wat luxe is") ───
   Eén serif voor de grote koppen (Cormorant Garamond, verwant aan de kapitalen van het
   logo), messing kaderhoeken op de foto's zoals op een werktekening, foto's die ademen,
   een citaatband over de volle breedte en een afsluitzin in de voet. Kleur blijft signaal. */
:root { --serif: "Cormorant Garamond", "Georgia", "Times New Roman", serif; --messing-inkt: #7F6633; }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; }
h1 { font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: .98; max-width: 14ch; }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.5rem); line-height: 1.04; max-width: 20ch; }
.sec-kop h2 { font-weight: 500; letter-spacing: -.01em; }
.hero-tekst h1 { font-family: var(--serif); font-size: clamp(3rem, 7vw, 6.4rem); font-weight: 500; letter-spacing: -.015em; line-height: .96; }
.hero-tekst h1 em, h2 em, .citaat em { font-style: italic; font-weight: 500; color: var(--messing-licht); }
.tekst h2 { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.5rem); }
.eyebrow { color: var(--messing-inkt); letter-spacing: .22em; font-size: .72rem; }
.band-hout .eyebrow, .hero .eyebrow, .paginakop .eyebrow { color: var(--messing-licht); }
.eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 12px; opacity: .8; }
.stappen li::before, .kc-uitkomst .lbl, .prijs .lbl, .afraden .lbl, .welniet h3, .voet h2 { letter-spacing: .18em; }
.stappen li::before { color: var(--messing-inkt); }
.band-hout .stappen li::before { color: var(--messing-licht); }
.kc-uitkomst .lbl, .mwf .mwf-uitkomst .lbl { color: var(--messing-inkt); }
:focus-visible { outline-color: var(--hout); }
.band-hout :focus-visible, .hero :focus-visible, .paginakop :focus-visible, .balk :focus-visible, .voet :focus-visible, .strook :focus-visible { outline-color: var(--messing-licht); }
.kaart-t .meer, .tekst a { color: var(--messing-inkt); }
a.kaart:hover h3 { color: var(--messing-inkt); }

/* de volle hero: foto over de hele breedte, tekst erover, waas van hout */
.hero-vol { position: relative; min-height: clamp(560px, 82vh, 860px); display: grid; align-items: end; isolation: isolate; }
.hero-vol .hero-achter { position: absolute; inset: 0; z-index: 0; }
.hero-vol .hero-achter img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; animation: adem 18s ease-in-out infinite alternate; }
@keyframes adem { from { transform: scale(1); } to { transform: scale(1.06); } }
.hero-vol .hero-waas { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(38, 13, 6, .94) 0%, rgba(38, 13, 6, .78) 40%, rgba(38, 13, 6, .28) 75%, rgba(38, 13, 6, .12) 100%), linear-gradient(0deg, rgba(38, 13, 6, .85) 0%, transparent 45%); }
.hero-vol .hero-in { position: relative; z-index: 2; display: block; width: 100%; padding: clamp(60px, 10vw, 130px) var(--rand) clamp(56px, 8vw, 100px); }
.hero-vol .hero-tekst { max-width: 760px; margin: 0; padding: 0; }
.hero-vol .hero-tekst .lede { color: rgba(246, 241, 232, .86); max-width: 54ch; }
.hero-vol .maatlijn { left: auto; right: var(--rand); width: min(38vw, 420px); bottom: clamp(28px, 4vw, 44px); z-index: 2; }
.hero-vol .hero-bijschrift { z-index: 2; background: none; top: auto; bottom: clamp(70px, 6vw, 88px); right: var(--rand); left: auto; width: min(38vw, 420px); text-align: right; padding: 0; }
@media (max-width: 899px) { .hero-vol .maatlijn, .hero-vol .hero-bijschrift { display: none; } .hero-vol { min-height: 78vh; } .hero-vol .hero-waas { background: linear-gradient(0deg, rgba(38, 13, 6, .96) 0%, rgba(38, 13, 6, .7) 55%, rgba(38, 13, 6, .3) 100%); } }
@media (prefers-reduced-motion: reduce) { .hero-vol .hero-achter img { animation: none; } }

.hero-onder { font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; color: rgba(246, 241, 232, .7); margin: 18px 0 0; max-width: 60ch; }
.hero-onder::before { content: "\2014"; color: var(--messing-licht); margin-right: 10px; }
.formvak .eerste-stap { font-family: var(--mono); font-size: .76rem; letter-spacing: .05em; color: var(--inkt-zacht); margin: 0 0 14px; }
.band-hout .formvak .eerste-stap { color: rgba(246, 241, 232, .68); }

/* kaderhoeken van messing op foto's: het kader van een werktekening */
.kader { position: relative; }
.kader::before, .kader::after, .kader > i.hoek::before, .kader > i.hoek::after { content: ""; position: absolute; width: 22px; height: 22px; border: 1px solid var(--messing); z-index: 2; pointer-events: none; }
.kader::before { left: -6px; top: -6px; border-right: 0; border-bottom: 0; }
.kader::after { right: -6px; top: -6px; border-left: 0; border-bottom: 0; }
.kader > i.hoek::before { left: -6px; bottom: -6px; border-right: 0; border-top: 0; }
.kader > i.hoek::after { right: -6px; bottom: -6px; border-left: 0; border-top: 0; }
.kader > i.hoek { position: absolute; inset: 0; pointer-events: none; }
.kader img { display: block; }
.band-hout .kader::before, .band-hout .kader::after, .band-hout .kader > i.hoek::before, .band-hout .kader > i.hoek::after, .paginakop .kader::before, .paginakop .kader::after, .paginakop .kader > i.hoek::before, .paginakop .kader > i.hoek::after { border-color: var(--messing-licht); }

/* foto's ademen bij aanraken, kaarten komen iets omhoog */
.kaart { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease; overflow: hidden; }
.kaart picture { overflow: hidden; display: block; }
.kaart img { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
a.kaart:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(38, 13, 6, .12); border-color: var(--messing); }
a.kaart:hover img { transform: scale(1.04); filter: none; }
.werk figure { overflow: hidden; border-radius: var(--rond); }
.werk img { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.werk figure:hover img { transform: scale(1.05); }
.foto-rond picture { overflow: hidden; border-radius: var(--rond); display: block; }
.foto-rond img { transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.foto-rond:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .kaart, .kaart img, .werk img, .foto-rond img { transition: none; } }

/* de citaatband: foto over de volle breedte, één zin in de serif */
.citaat { position: relative; isolation: isolate; color: var(--wit-zacht); min-height: clamp(420px, 60vh, 640px); display: grid; align-items: center; overflow: hidden; }
.citaat .citaat-achter { position: absolute; inset: 0; z-index: 0; }
.citaat .citaat-achter img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) { .citaat .citaat-achter { background-attachment: fixed; } }
.citaat .citaat-waas { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(38, 13, 6, .88) 0%, rgba(38, 13, 6, .6) 55%, rgba(38, 13, 6, .35) 100%); }
.citaat-in { position: relative; z-index: 2; padding: clamp(56px, 8vw, 100px) var(--rand); }
.citaat blockquote { margin: 0; max-width: 22ch; }
.citaat blockquote p { font-family: var(--serif); font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1.08; font-weight: 500; margin: 0 0 .8em; letter-spacing: -.01em; }
.citaat blockquote footer { font-family: var(--mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--messing-licht); }

/* de afsluitzin in de voet */
.voet-zin { font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.8rem); line-height: 1.1; color: var(--wit-zacht); max-width: 22ch; margin: 0 0 clamp(36px, 5vw, 56px); padding-bottom: clamp(28px, 4vw, 40px); border-bottom: 1px solid var(--lijn-hout); font-weight: 500; }
.voet-zin em { font-style: italic; color: var(--messing-licht); }

/* stalen: hoger, met een lichte glans als van een gespoten front */
.stalen { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.staal-vlak { height: 168px; }
.staal-vlak::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .08) 100%); pointer-events: none; }
.staal { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; }
.staal:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(38, 13, 6, .14); }

/* de kasttekening als blauwdruk: hout, messing lijnen, het raster van de tekentafel */
.kc-tekening { background: var(--hout-diep); background-image: linear-gradient(rgba(217, 192, 139, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(217, 192, 139, .08) 1px, transparent 1px); background-size: 24px 24px; border-radius: var(--rond); padding: 16px 14px 10px; }
.kc-tekening .bijschrift { color: rgba(246, 241, 232, .6); }

/* balk: iets luchtiger, logo iets groter */
.balk-in { min-height: 88px; }
.merk img { height: 48px; }
@media (max-width: 520px) { .merk img { height: 34px; } }
.menu a { letter-spacing: .01em; }
.menu a::after { content: ""; display: block; height: 1px; background: var(--messing-licht); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2, .7, .2, 1); margin-top: 2px; }
.menu a:hover::after { transform: scaleX(1); }

/* ── De gasten: de menselijke band (ronde 4, "aaibaarheid") ──────────────────
   Eén staande video van Matthijs met gitaar, drie foto's waar gelachen wordt, en
   bijschriften die praten zoals wij praten. Geen stock, geen pose. */
.gasten { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(180px, auto); }
@media (min-width: 900px) { .gasten { grid-template-columns: 1.1fr 1fr 1fr 1fr; grid-template-rows: 300px 300px; } .gasten .g-video { grid-row: 1 / 3; } .gasten .g-groot { grid-column: 2 / 4; } }
.gasten figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--rond); background: var(--hout-diep); }
.gasten img, .gasten video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gasten figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; color: var(--wit-zacht); background: linear-gradient(0deg, rgba(38, 13, 6, .82), transparent); font-size: .95rem; line-height: 1.35; }
.gasten figcaption b { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; display: block; letter-spacing: -.01em; }
.gasten figcaption i { font-style: normal; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--messing-licht); display: block; margin-top: 4px; }
.gasten .g-video video { aspect-ratio: 9 / 16; }
@media (max-width: 899px) { .gasten .g-video { grid-row: span 2; } .gasten .g-video video { aspect-ratio: auto; height: 100%; } }
.gasten .stil { position: absolute; top: 12px; right: 12px; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wit-zacht); background: rgba(38, 13, 6, .55); padding: 4px 8px; border-radius: 2px; }
.gasten-kop h2 em { color: var(--messing-inkt); }
.band-hout .gasten-kop h2 em { color: var(--messing-licht); }

/* ── De tekentafel: lijnen die zichzelf trekken (ronde 5, "het moet leven") ──── */
.tekening { width: 100%; height: auto; display: block; overflow: visible; }
.tekening .lijn { fill: none; stroke: var(--messing-licht); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.tekening .maat { font-family: var(--mono); font-size: 12px; fill: var(--messing-licht); letter-spacing: .08em; opacity: 0; }
.trek .tekening .lijn { animation: lijn-trek 1.6s cubic-bezier(.4, 0, .2, 1) forwards; }
.trek .tekening .g1 .lijn, .trek .tekening .lijn.g1 { animation-delay: .1s; }
.trek .tekening .lijn.g2 { animation-delay: .5s; }
.trek .tekening .lijn.g3 { animation-delay: .9s; }
.trek .tekening .lijn.g4 { animation-delay: 1.3s; }
.trek .tekening .lijn.g5 { animation-delay: 1.6s; }
.trek .tekening .lijn.g6 { animation-delay: 2s; }
.trek .tekening .lijn.g7 { animation-delay: 2.4s; }
.trek .tekening .lijn.g8 { animation-delay: 2.8s; }
.trek .tekening .maat { animation: maat-aan .6s ease 3.4s forwards; }
@keyframes lijn-trek { to { stroke-dashoffset: 0; } }
@keyframes maat-aan { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tekening .lijn { stroke-dashoffset: 0; animation: none; } .tekening .maat { opacity: 1; animation: none; } }

/* de hero: de tekening ligt over de foto, trekt zichzelf, en blijft daarna zacht staan */
.hero-tekening { position: absolute; z-index: 2; right: clamp(20px, 5vw, 80px); top: 50%; transform: translateY(-58%); width: min(46vw, 640px); pointer-events: none; opacity: 0; }
.hero.trek .hero-tekening { animation: tekening-in .8s ease .1s forwards, tekening-rust 2.4s ease 4.4s forwards; }
@keyframes tekening-in { to { opacity: 1; } }
@keyframes tekening-rust { to { opacity: .42; } }
@media (max-width: 899px) { .hero-tekening { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-tekening { opacity: .42; animation: none !important; } }

/* de liniaal loopt mee met het scrollen: een rolmaat die je uittrekt */
.liniaal-in, .liniaal-cijfers { will-change: transform; }
.liniaal-tekst b { font-family: var(--mono); font-weight: 500; color: var(--wit-zacht); font-variant-numeric: tabular-nums; margin-left: 6px; }

/* het scrollverhaal: links een vast beeld dat van laag wisselt, rechts de stappen */
.verhaal { padding: clamp(56px, 8vw, 110px) 0; }
.verhaal-in { display: grid; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) { .verhaal-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .verhaal-beeld { position: sticky; top: 120px; } }
.verhaal-beeld { position: relative; aspect-ratio: 5 / 4; border-radius: var(--rond); overflow: visible; background: var(--hout-diep); background-image: linear-gradient(rgba(217, 192, 139, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(217, 192, 139, .08) 1px, transparent 1px); background-size: 24px 24px; }
.verhaal-beeld .laag { position: absolute; inset: 0; border-radius: var(--rond); overflow: hidden; transition: opacity 1.1s cubic-bezier(.2, .7, .2, 1), clip-path 1.1s cubic-bezier(.2, .7, .2, 1); }
.verhaal-beeld .laag img { width: 100%; height: 100%; object-fit: cover; }
.verhaal-beeld .laag-tekening { padding: 8%; display: grid; place-items: center; opacity: 1; }
.verhaal-beeld .laag-tekening .tekening .lijn { stroke-dashoffset: 0; }
.verhaal-beeld .laag-tekening .tekening .maat { opacity: 1; }
.verhaal-beeld .laag-werkplaats, .verhaal-beeld .laag-thuis { opacity: 0; clip-path: inset(0 0 0 100%); }
.verhaal[data-stap="1"] .laag-werkplaats { opacity: 1; clip-path: inset(0); }
.verhaal[data-stap="1"] .laag-tekening { opacity: .35; }
.verhaal[data-stap="2"] .laag-werkplaats { opacity: 1; clip-path: inset(0); }
.verhaal[data-stap="2"] .laag-thuis { opacity: 1; clip-path: inset(0); }
.verhaal[data-stap="2"] .laag-tekening { opacity: 0; }
.verhaal-label { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: flex; gap: 6px; }
.verhaal-label span { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; border-radius: 2px; background: rgba(38, 13, 6, .55); color: rgba(246, 241, 232, .5); transition: background .4s, color .4s; }
.verhaal[data-stap="0"] .verhaal-label [data-v="0"], .verhaal[data-stap="1"] .verhaal-label [data-v="1"], .verhaal[data-stap="2"] .verhaal-label [data-v="2"] { background: var(--messing); color: var(--hout-diep); }
.verhaal-stappen .stap { padding: clamp(28px, 4vw, 44px) 0; border-top: 1px solid var(--lijn-hout); opacity: .38; transition: opacity .6s ease; }
.verhaal-stappen .stap.actief { opacity: 1; }
.verhaal-stappen .stap h3 { font-family: var(--serif); font-size: 1.7rem; font-weight: 500; margin-bottom: 8px; }
.verhaal-stappen .stap p { margin: 0; color: rgba(246, 241, 232, .82); max-width: 46ch; }
.verhaal-stappen .sec-kop, .verhaal-stappen h2 { margin-bottom: clamp(18px, 3vw, 30px); }
@media (max-width: 899px) { .verhaal-beeld { aspect-ratio: 4 / 3; } }

/* stalen kantelen mee met de muis */
.staal { transform-style: preserve-3d; will-change: transform; }
.stalen { perspective: 900px; }

/* ── Keurmerken ──────────────────────────────────────────────────────────── */
.keurmerken { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
.keurmerken img { height: 76px; width: auto; }
.keurmerken span { font-size: .9rem; color: var(--inkt-zacht); max-width: 22ch; }

/* ── Voet ────────────────────────────────────────────────────────────────── */
.voet { background: var(--hout-diep); color: rgba(246, 241, 232, .8); padding: clamp(40px, 6vw, 64px) 0 26px; font-size: .95rem; }
.voet-in { display: grid; gap: 32px; }
@media (min-width: 760px) { .voet-in { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.voet h2 { font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--messing-licht); font-weight: 500; margin-bottom: .9rem; }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li { margin-bottom: .45em; }
.voet a { color: var(--wit-zacht); text-decoration: none; }
.voet a:hover { color: var(--messing-licht); text-decoration: underline; }
.voet p { margin: 0 0 .5em; }
.voet .merk img { height: 40px; margin-bottom: 18px; }
.voet-badges { display: flex; gap: 14px; align-items: center; margin-top: 18px; }
.voet-badges img { height: 64px; width: auto; }
.voet-slot { border-top: 1px solid var(--lijn-hout); margin-top: 36px; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .85rem; color: rgba(246, 241, 232, .55); }
.voet-slot a { color: rgba(246, 241, 232, .7); }

/* ── Kleine hulpjes ──────────────────────────────────────────────────────── */
.smal { max-width: var(--tekst); }
.midden { text-align: center; margin-left: auto; margin-right: auto; }
.ruimte-boven { margin-top: clamp(28px, 4vw, 48px); }
.ruimte-onder { margin-bottom: clamp(28px, 4vw, 48px); }
.nogniet { font-style: italic; color: var(--inkt-zacht); }
.foto-rond img { border-radius: var(--rond); }
.lijst-diensten { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .lijst-diensten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lijst-diensten a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--lijn); border-radius: var(--rond); text-decoration: none; color: inherit; font-weight: 600; }
.lijst-diensten a:hover { border-color: var(--messing); color: var(--hout); }
.lijst-diensten a span { font-weight: 400; color: var(--inkt-zacht); font-size: .9rem; }

/* ── Configurators (ronde 6, 12 sep): keukencheck en vloercheck, generieke motor ────
   Zelfde taal als de oude kastcheck: vragen links, uitkomst rechts (kleeft mee). */
.wrap-breed { max-width: 1320px; }
.cf { display: grid; gap: clamp(20px, 3vw, 36px); align-items: start; }
@media (min-width: 900px) { .cf { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } .cf-uit { position: sticky; top: 96px; } }
.cf-vragen { display: grid; gap: 26px; }
.cf-groep { display: grid; gap: 18px; padding-top: 18px; border-top: 2px solid var(--hout); }
.cf-groepkop { font-family: var(--mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--messing-inkt); font-weight: 500; }
.cf-lbl { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; font-size: .95rem; margin-bottom: 10px; }
.cf-getal { font-family: var(--mono); font-weight: 500; color: var(--hout); white-space: nowrap; }
.cf-hint { font-size: .86rem; color: var(--inkt-zacht); margin: 8px 0 0; }
.cf-keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-k { font: inherit; text-align: left; display: grid; gap: 2px; font-size: .95rem; padding: 10px 14px; min-height: 44px; border: 1px solid var(--lijn); border-radius: var(--rond); background: var(--papier); color: var(--inkt); cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.cf-k b { font-weight: 600; } .cf-k span { font-size: .82rem; color: var(--inkt-zacht); } .cf-k i { font-style: normal; font-family: var(--mono); font-size: .74rem; color: var(--messing-inkt); }
.cf-k:hover { border-color: var(--messing); transform: translateY(-1px); }
.cf-k.aan { border-color: var(--hout); background: var(--hout); color: var(--wit-zacht); } .cf-k.aan span { color: rgba(246, 241, 232, .75); } .cf-k.aan i { color: var(--messing-licht); }
.cf input[type="range"] { width: 100%; accent-color: var(--hout); height: 32px; }
.cf-schaal { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .72rem; color: var(--inkt-zacht); }
.cf-uit { background: var(--papier); border: 1px solid var(--lijn); border-left: 3px solid var(--messing); border-radius: var(--rond); padding: clamp(20px, 3vw, 28px); }
.cf-uit .lbl { display: block; font-family: var(--mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--messing-inkt); margin-bottom: 8px; }
.cf-uit .cf-bedrag { display: block; font-family: var(--serif); font-size: clamp(2.2rem, 4.6vw, 3.3rem); letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; font-weight: 500; }
.cf-uit .cf-band { display: block; font-style: normal; font-size: .9rem; color: var(--inkt-zacht); margin-top: 8px; }
.cf-regels { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--lijn); display: grid; gap: 4px; font-size: .88rem; }
.cf-regels li { display: flex; justify-content: space-between; gap: 12px; } .cf-regels b { font-family: var(--mono); font-weight: 500; white-space: nowrap; }
.cf-toel { font-size: .96rem; margin: 14px 0 0; }
.cf-afraad { border-left: 3px solid var(--staal); padding-left: 14px; color: var(--inkt); margin-top: 14px; }
.cf-drie { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--lijn); }
.cf-drie .mwf-uitkomst { display: none; }
.cf-tekening { margin: 0 0 18px; background: var(--hout-diep); background-image: linear-gradient(rgba(217, 192, 139, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(217, 192, 139, .08) 1px, transparent 1px); background-size: 24px 24px; border-radius: var(--rond); padding: 16px 14px 10px; }
.cf-tekening svg { width: 100%; height: auto; display: block; }
.cf-tekening.cf-licht { background: #EEE8DF; background-image: none; border: 1px solid var(--lijn); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset; }
.cf-prijsklein { display: none; }
@media (max-width: 899px) {
  .cf-beeld-boven .cf-beeldvak { position: sticky; top: 78px; z-index: 30; background: var(--gesso); padding: 6px 0 4px; margin-bottom: 14px; }
  .cf-beeld-boven .cf-beeldvak .cf-tekening { margin: 0; padding: 6px 8px 4px; }
  .cf-beeld-boven .cf-beeldvak .cf-tekening svg { max-height: 168px; }
  .cf-beeld-boven .cf-prijsklein { display: block; text-align: right; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--messing-inkt); padding: 4px 4px 0; }
  .cf-beeld-boven .cf-prijsklein b { font-family: var(--serif); font-size: 1.05rem; text-transform: none; letter-spacing: 0; color: var(--inkt); }
}
.cf-tekening.cf-licht svg { border-radius: 3px; }
/* beweging: elke klik geeft antwoord. De tekening komt zacht op, een keuze veert even in. */
@keyframes beeld-in { from { opacity: .45; transform: scale(.994); } to { opacity: 1; transform: none; } }
.cf-tekening svg, .ko-svgvak svg { animation: beeld-in .3s cubic-bezier(.2, .7, .2, 1); }
.cf-k:active, .ko-k:active, .ko-staal:active, .ko-w:active, .ko-vb:active, .ko-vk:active, .ko-st:active, .knop:active { transform: scale(.97); }
.cf-k, .ko-vk, .ko-st { transition: border-color .15s ease, background .15s ease, transform .12s ease; }
@media (prefers-reduced-motion: reduce) {
  .cf-tekening svg, .ko-svgvak svg { animation: none; }
  .cf-k:active, .ko-k:active, .ko-staal:active, .ko-w:active, .ko-vb:active, .ko-vk:active, .ko-st:active, .knop:active { transform: none; }
}
.cf-fout { padding: 20px; border-left: 3px solid var(--staal); }

/* de drie ontwerper-kaarten op de prijzenpagina */
.ontwerpers { display: grid; gap: 16px; }
@media (min-width: 800px) { .ontwerpers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ontwerper-kaart { display: grid; gap: 8px; align-content: start; padding: 26px 26px 24px; background: var(--hout); color: var(--wit-zacht); text-decoration: none; border-radius: var(--rond); position: relative; overflow: hidden; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; }
.ontwerper-kaart::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(217, 192, 139, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(217, 192, 139, .09) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; opacity: .7; }
.ontwerper-kaart .eyebrow { color: var(--messing-licht); margin-bottom: 2px; }
.ontwerper-kaart h3 { color: var(--wit-zacht); font-family: var(--serif); font-size: 1.7rem; font-weight: 500; letter-spacing: -.01em; }
.ontwerper-kaart p { color: rgba(246, 241, 232, .8); font-size: .95rem; margin: 0; }
.ontwerper-kaart b { font-family: var(--mono); font-weight: 500; color: var(--messing-licht); font-size: .9rem; margin-top: 6px; }
.ontwerper-kaart .pijl { margin-top: 10px; font-weight: 600; color: var(--wit-zacht); }
.ontwerper-kaart .pijl::after { content: " \2192"; color: var(--messing-licht); }
.ontwerper-kaart:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(38, 13, 6, .22); }
.stappen.drie { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .stappen.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── De kastontwerper (kastcheck 2): de tekentafel als bediening ──────────────
   Links de stappen als tabbladen, rechts de tekening op blauwdruk-hout die meetekent,
   met de richtprijs eronder. Messing = hier kunt u iets doen. Op een telefoon staat
   de tekening bovenaan en kleeft de prijs onderin het scherm. */
.ko { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 2.6vw, 32px); align-items: start; }
.ko-links, .ko-rechts, .ko-tekening, .ko-prijs { min-width: 0; }
@media (min-width: 960px) { .ko { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); } .ko-rechts { position: sticky; top: 88px; } .ko-tabs { flex-wrap: wrap; } }
@media (max-width: 959px) { .ko-rechts { display: contents; } .ko-tekening { order: -1; } }
.ko-voorbeelden { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; }
.ko-voorbeelden[hidden], .ko-strook[hidden] { display: none !important; }
.ko-vlbl { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--messing-inkt); margin-right: 6px; width: 100%; }
.ko-vb { font: inherit; font-size: .84rem; padding: 6px 11px; border: 1px solid var(--lijn); border-radius: 999px; background: var(--papier); color: var(--inkt); cursor: pointer; transition: border-color .15s, background .15s; }
.ko-vb:hover { border-color: var(--messing); } .ko-vb.aan { background: var(--hout); border-color: var(--hout); color: var(--wit-zacht); }
.ko-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 2px solid var(--lijn); margin-bottom: 18px; }
.ko-tabs::-webkit-scrollbar { display: none; }
.ko-tab { font: inherit; font-size: .9rem; font-weight: 600; padding: 10px 12px 10px 10px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px; color: var(--inkt-zacht); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.ko-tab i { font-style: normal; font-family: var(--mono); font-size: .7rem; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--lijn); display: inline-grid; place-items: center; color: var(--inkt-zacht); }
.ko-tab:hover { color: var(--inkt); }
.ko-tab.aan { color: var(--hout); border-bottom-color: var(--messing); } .ko-tab.aan i { background: var(--hout); border-color: var(--hout); color: var(--wit-zacht); }
.ko-paneel { display: grid; gap: 22px; min-height: 320px; }
.ko-vraag label, .ko-lbl { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; font-size: .95rem; margin-bottom: 10px; }
.ko-uit { font-family: var(--mono); font-weight: 500; color: var(--hout); white-space: nowrap; font-size: .88rem; }
.ko input[type="range"] { width: 100%; accent-color: var(--hout); height: 32px; }
.ko-hint { font-size: .86rem; color: var(--inkt-zacht); margin: 0; }
.ko-keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.ko-k { font: inherit; text-align: left; display: grid; gap: 1px; font-size: .92rem; padding: 9px 13px; min-height: 44px; border: 1px solid var(--lijn); border-radius: var(--rond); background: var(--papier); color: var(--inkt); cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.ko-k b { font-weight: 600; } .ko-k span { font-size: .8rem; color: var(--inkt-zacht); } .ko-k i { font-style: normal; font-family: var(--mono); font-size: .72rem; color: var(--messing-inkt); }
.ko-k:hover { border-color: var(--messing); transform: translateY(-1px); }
.ko-k.aan { border-color: var(--hout); background: var(--hout); color: var(--wit-zacht); } .ko-k.aan span { color: rgba(246, 241, 232, .75); } .ko-k.aan i { color: var(--messing-licht); }
.ko-vormen, .ko-inhoud { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.ko-vormen .ko-k, .ko-inhoud .ko-k { grid-template-rows: auto auto auto 1fr; }
.ko-k svg { width: 40px; height: 40px; margin-bottom: 4px; color: var(--messing-inkt); }
.ko-trappen .ko-k svg { width: 56px; height: 56px; }
.ko-twee, .ko-drie-k { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ko-drie-k { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ko-wensen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ko-niveaus { display: grid; grid-template-columns: minmax(0, 1fr); }
.ko-niveaus .ko-k { grid-template-columns: 1fr auto; align-items: baseline; }
.ko-niveaus .ko-k b { grid-column: 1; } .ko-niveaus .ko-k span { grid-column: 1; } .ko-niveaus .ko-k i { grid-column: 2; grid-row: 1 / span 2; font-size: 1.05rem; font-family: var(--serif); color: var(--hout); }
.ko-niveaus .ko-k.aan i { color: var(--messing-licht); }
.ko-twee .ko-k, .ko-drie-k .ko-k { min-height: 56px; align-content: center; text-align: center; }
.ko-hint-boven { margin: -4px 0 10px; }
.ko-hint-aan { color: var(--inkt); }
/* "Anders of weet ik niet": geen doodlopende weg maar een uitgestoken hand */
.ko-onzeker { border: 1px solid var(--messing); border-radius: var(--rond); background: var(--papier); padding: 14px 16px; display: grid; gap: 8px; justify-items: start; }
.ko-onzeker b { font-family: var(--brand); font-size: 1.02rem; }
.ko-onzeker p { margin: 0; font-size: .9rem; color: var(--inkt-zacht); }
.ko-meer { border: 1px solid var(--lijn); border-radius: var(--rond); padding: 0 14px; background: var(--papier); }
.ko-meer summary { cursor: pointer; font-weight: 600; font-size: .95rem; padding: 12px 0; color: var(--hout); }
.ko-meer[open] summary { border-bottom: 1px solid var(--lijn); margin-bottom: 14px; }
.ko-meer > * + * { margin-bottom: 14px; }
.ko-vast { font-size: .88rem; color: var(--inkt-zacht); margin: 12px 0 0; } .ko-vast b { color: var(--inkt); font-weight: 600; }
.ko-verder-kop { display: block; font-weight: 600; margin-top: 14px; } .ko-verder { margin: 6px 0 10px; padding-left: 20px; display: grid; gap: 4px; font-size: .9rem; }
.ko-stapkop-m { justify-content: space-between; align-items: center; }
.ko-stapkop-m span:last-child { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--messing-inkt); }
@media (max-width: 959px) {
  .ko-trap .ko-tabs { display: none; }
  .ko-trap-m .ko-tekening { position: sticky; top: 78px; z-index: 30; padding: 6px 8px 4px; }
  .ko-trap-m .ko-svgvak svg { max-height: 150px; }
  .ko-trap-m .ko-werkbalk, .ko-trap-m .ko-tip, .ko-trap-m .ko-prijs, .ko-trap-m .ko-thuis { display: none; }
  .ko-trap .ko-paneel { min-height: 0; }
  .ko-trap-prijs .ko-prijs { order: -1; margin-top: 0; }
  .ko-trap-prijs .ko-paneel { min-height: 0; }
  .ko-meervak { margin-top: 16px; display: grid; gap: 14px; }
  .ko-trappen .ko-k, .ko-inhoud .ko-k { min-height: 48px; }
}
.ko-tekst { font: inherit; font-size: inherit; color: var(--messing-inkt); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ko-tekst:hover { color: var(--hout); }
.ko-k.aan svg { color: var(--messing-licht); }
.ko-vakkeuze { display: flex; flex-wrap: wrap; gap: 6px; }
.ko-vk { font: inherit; display: grid; place-items: center; gap: 0; width: 52px; padding: 4px 0 3px; border: 1px solid var(--lijn); border-radius: var(--rond); background: var(--papier); color: var(--inkt-zacht); cursor: pointer; }
.ko-vk svg { width: 26px; height: 26px; } .ko-vk span { font-family: var(--mono); font-size: .7rem; }
.ko-vk:hover { border-color: var(--messing); } .ko-vk.aan { background: var(--hout); border-color: var(--hout); color: var(--wit-zacht); }
.ko-rij { display: flex; flex-wrap: wrap; gap: 8px; }
.ko-klein { font: inherit; font-size: .84rem; padding: 7px 11px; border: 1px solid var(--lijn); border-radius: 999px; background: var(--papier); color: var(--inkt); cursor: pointer; }
.ko-klein:hover { border-color: var(--messing); }
.ko-vink { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: .95rem; cursor: pointer; }
.ko-vink input { width: 20px; height: 20px; accent-color: var(--hout); margin: 0; }
.ko-vink i { font-style: normal; font-family: var(--mono); font-size: .74rem; color: var(--messing-inkt); margin-left: auto; white-space: nowrap; }
.ko-stalen { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.ko-staal { font: inherit; border: 1px solid var(--lijn); border-radius: var(--rond); padding: 0 0 6px; background: var(--papier); cursor: pointer; display: grid; gap: 6px; text-align: center; font-size: .78rem; color: var(--inkt); transition: transform .2s ease, border-color .15s; }
.ko-staal::before { content: ""; display: block; height: 52px; background: var(--s); border-radius: var(--rond) var(--rond) 0 0; background-image: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .1)); }
.ko-staal:hover { transform: translateY(-2px); border-color: var(--messing); }
.ko-staal.aan { border-color: var(--hout); box-shadow: 0 0 0 2px var(--hout) inset; font-weight: 600; }
/* de studio: de tekening staat als een lichte render in een kader, niet als blauwdruk op donker */
.ko-tekening { background: #EEE8DF; border: 1px solid var(--lijn); border-radius: var(--rond); padding: 12px 12px 10px; color: var(--inkt); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset; }
.ko-svgvak svg { border-radius: 3px; }
.ko-werkbalk { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ko-w { font: inherit; font-size: .78rem; font-family: var(--mono); letter-spacing: .04em; padding: 6px 10px; border: 1px solid rgba(138, 115, 67, .45); border-radius: 999px; background: rgba(255, 255, 255, .55); color: var(--hout); cursor: pointer; transition: background .15s, color .15s; }
.ko-w:hover { background: #fff; border-color: var(--messing); } .ko-w.aan { background: var(--hout); border-color: var(--hout); color: var(--wit-zacht); }
.ko-w[data-w="deel"] { margin-left: auto; }
.ko-svgvak { touch-action: none; }
.ko-svgvak svg { width: 100%; height: auto; display: block; max-height: 62vh; }
.ko-svgvak.sleept { cursor: grabbing; }
.ko-greep { cursor: grab; }
.ko-greep circle { transition: r .15s ease; } .ko-greep:hover circle { r: 13; }
.ko-vak { cursor: pointer; outline: none; }
.ko-vak > rect:first-child { transition: fill .2s ease; }
.ko-vak:hover > rect:first-child, .ko-vak:focus-visible > rect:first-child { fill: rgba(178, 151, 96, .12); }
.ko-vak.gekozen > rect:first-child { fill: rgba(178, 151, 96, .14); stroke: var(--messing-inkt); stroke-width: 2; stroke-dasharray: 5 4; }
.ko-tekening .ko-tip { color: var(--inkt-zacht); }
.ko-tekening .ko-prijsklein { color: var(--inkt-zacht); } .ko-tekening .ko-prijsklein .ko-bedrag { color: var(--hout); }
@keyframes ko-tik { 0% { color: var(--messing); } 100% { color: inherit; } }
.ko-bedrag.tik { animation: ko-tik .9s ease-out; }
/* voorbeelden als mini-renders */
.ko-vbrij { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; width: 100%; }
.ko-vb { display: grid; gap: 4px; justify-items: center; padding: 8px 6px 7px; border-radius: var(--rond); font-size: .76rem; line-height: 1.15; text-align: center; }
.ko-vb .ko-mini { display: block; height: 40px; width: 100%; } .ko-vb .ko-mini svg { height: 40px; width: 100%; display: block; }
.ko-vb.aan .ko-mini svg { filter: brightness(1.05); }
.ko-stapkop { display: flex; align-items: baseline; gap: 10px; margin: -6px 0 -8px; }
.ko-stapkop span { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--messing-inkt); }
.ko-stapkop b { font-family: var(--brand); font-size: 1.05rem; font-weight: 600; }
@media (max-width: 959px) {
  .ko-werkbalk { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 10px; padding: 0 12px; }
  .ko-werkbalk::-webkit-scrollbar { display: none; }
  .ko-w { flex: 0 0 auto; }
}
.ko-deur { transition: transform .55s cubic-bezier(.2, .7, .2, 1); transform-box: view-box; }
.ko-svg.open .ko-deur.l { transform: scaleX(.12); } .ko-svg.open .ko-deur.r { transform: scaleX(.12); }
.ko-svg.open .ko-deur.s0 { transform: translateX(34px); } .ko-svg.open .ko-deur.s1 { transform: translateX(-34px); }
.ko-tip { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; color: rgba(246, 241, 232, .6); margin: 8px 0 0; }
.ko-prijs { background: var(--papier); border: 1px solid var(--lijn); border-left: 3px solid var(--messing); border-radius: var(--rond); padding: clamp(18px, 2.6vw, 26px); margin-top: 14px; }
.ko-prijs .lbl { display: block; font-family: var(--mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--messing-inkt); margin-bottom: 6px; }
.ko-prijs .ko-bedrag { display: block; font-family: var(--serif); font-size: clamp(2.2rem, 4.6vw, 3.2rem); letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; font-weight: 500; transition: color .3s; }
.ko-band { display: block; font-style: normal; font-size: .88rem; color: var(--inkt-zacht); margin-top: 8px; }
.ko-toel { font-size: .95rem; margin: 12px 0 0; }
.ko-regels summary { cursor: pointer; font-size: .88rem; font-weight: 600; margin-top: 12px; color: var(--hout); }
.ko-regels ul { list-style: none; margin: 8px 0 0; padding: 10px 0 0; border-top: 1px solid var(--lijn); display: grid; gap: 4px; font-size: .86rem; }
.ko-regels li { display: flex; justify-content: space-between; gap: 12px; } .ko-regels b { font-family: var(--mono); font-weight: 500; white-space: nowrap; }
.ko-afraad { border-left: 3px solid var(--staal); padding-left: 14px; margin-top: 14px; font-size: .95rem; }
.ko-drie { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--lijn); }
.ko-drie .mwf-uitkomst { display: none; }
.ko-strook { display: none; }
@media (max-width: 959px) {
  .ko-strook { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--hout-diep); color: var(--wit-zacht); padding: 10px var(--rand); border-top: 1px solid var(--lijn-hout); }
  .ko-strook span { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--messing-licht); }
  .ko-strook .ko-bedrag { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; line-height: 1; }
  .ko-strook .knop { padding: 10px 14px; font-size: .9rem; }
  body:has(.ko-strook:not([hidden])) { padding-bottom: 72px; }
  .ko-svgvak svg { max-height: 46vh; }
}
@media (prefers-reduced-motion: reduce) { .ko-deur, .ko-k, .ko-staal, .ontwerper-kaart { transition: none; } }
/* ── Zie het bij u thuis (module van hulpsessie claude-02, ontwerp\zie-het-thuis) ── */
/* Zie het bij u thuis — opmaak van de module. Tokens uit site.css van de nieuwe site;
   valt terug op eigen waarden als de site-tokens ontbreken. */
.zht {
  --zht-hout: var(--hout, #3A150A); --zht-hout-diep: var(--hout-diep, #260D06);
  --zht-messing: var(--messing, #B29760); --zht-messing-licht: var(--messing-licht, #D9C08B); --zht-messing-inkt: var(--messing-inkt, #8A7343);
  --zht-papier: var(--papier, #fff); --zht-gesso: var(--gesso, #F3EFE8); --zht-lijn: var(--lijn, #E3DCD1);
  --zht-inkt: var(--inkt, #1E1613); --zht-inkt-zacht: var(--inkt-zacht, #6A5F58); --zht-staal: var(--staal, #4F6B6F);
  --zht-rond: var(--rond, 4px);
  --zht-mono: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  display: grid; gap: 18px; color: var(--zht-inkt);
}
.zht h3 { margin: 0 0 10px; font-size: 1.15rem; line-height: 1.25; }
.zht-klein { font-size: .86rem; color: var(--zht-inkt-zacht); margin: 8px 0 0; }
.zht-fout { color: var(--zht-staal); border-left: 3px solid var(--zht-staal); padding-left: 12px; font-size: .92rem; }
.zht-rij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.zht-verborgen { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.zht-knop { font: inherit; font-weight: 600; font-size: .95rem; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border-radius: var(--zht-rond); border: 1px solid var(--zht-lijn); background: var(--zht-papier); color: var(--zht-inkt); cursor: pointer; text-decoration: none; }
.zht-knop:hover { border-color: var(--zht-messing); }
.zht-knop-messing { background: var(--zht-messing); border-color: var(--zht-messing); color: var(--zht-hout-diep); }
.zht-knop-messing:hover { background: var(--zht-messing-licht); border-color: var(--zht-messing-licht); }
.zht-stap1 { border: 1px dashed var(--zht-lijn); border-radius: var(--zht-rond); padding: clamp(16px, 3vw, 28px); background: var(--zht-gesso); }
.zht.zht-sleep .zht-stap1 { border-color: var(--zht-messing); background: var(--zht-papier); }
.zht-video { width: 100%; max-height: 60vh; border-radius: var(--zht-rond); margin-top: 12px; background: #000; }

.zht-vlak { position: relative; touch-action: none; user-select: none; margin: 8px 0; }
.zht-canvas { display: block; width: 100%; height: auto; border-radius: var(--zht-rond); background: var(--zht-hout-diep); }
.zht-greep {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none;
}
.zht-greep::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--zht-messing); border: 2px solid var(--zht-hout-diep); box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.zht-greep::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(217,192,139,.7); }
.zht-greep.aan { cursor: grabbing; }
.zht-greep.aan::before { background: var(--zht-messing-licht); }
.zht-greep:focus-visible { outline: 2px solid var(--zht-messing-licht); outline-offset: 2px; border-radius: 50%; }
.zht-dekking { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--zht-inkt-zacht); margin-left: auto; }
.zht-dekking input { accent-color: var(--zht-hout); width: 140px; }

.zht-stalen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.zht-staal { font: inherit; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--zht-lijn); border-radius: 999px; background: var(--zht-papier); cursor: pointer; font-size: .86rem; color: var(--zht-inkt); }
.zht-staal:hover { border-color: var(--zht-messing); }
.zht-staal.aan { border-color: var(--zht-hout); box-shadow: inset 0 0 0 1px var(--zht-hout); }
.zht-kleurvlak { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); background: var(--k, #ccc); position: relative; overflow: hidden; }
.zht-kleurvlak.nerf::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(100deg, rgba(0,0,0,.14) 0 1px, transparent 1px 4px, rgba(0,0,0,.06) 4px 5px, transparent 5px 9px); }
.zht-staal:not(:has(.zht-kleurvlak)) { padding-left: 12px; }
.zht-melding { color: var(--zht-messing-inkt); }
@media (prefers-reduced-motion: reduce) { .zht * { transition: none !important; } }

/* het paneel "Zie het bij u thuis" onder de tekening (kast) en onder de uitkomst (vloer) */
.ko-thuis, .cf-thuis { background: var(--papier); border: 1px solid var(--lijn); border-radius: var(--rond); padding: clamp(16px, 2.4vw, 24px); margin-top: 14px; }
.ko-thuis .lbl, .cf-thuis .lbl { display: block; font-family: var(--mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--messing-inkt); margin-bottom: 6px; }
.ko-thuis-in, .cf-thuis-in { font-size: .95rem; color: var(--inkt-zacht); margin: 0 0 14px; }
.cf-thuis-knop { margin-top: 14px; }
/* prijsregel in de werkbalk (desktop, als het prijsvak onder de schermrand valt), levertijd, ongedaan */
.ko-prijsklein { margin-left: auto; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: rgba(246, 241, 232, .7); align-self: center; white-space: nowrap; }
.ko-prijsklein .ko-bedrag { color: var(--messing-licht); font-weight: 500; margin-left: 4px; }
.ko-w[data-w="deel"] { margin-left: 0; }
.ko-w:disabled { opacity: .4; cursor: default; }
.ko-levertijd { font-size: .86rem; color: var(--inkt-zacht); margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--lijn); }
.ko-levertijd a { color: var(--hout); font-weight: 600; text-decoration: none; }
@media (max-width: 959px) { .ko-prijsklein { display: none; } }
/* ── Huisstijl (ronde 7, 12 sep avond): Montserrat uit de bestanden van Marc en het lattice-patroon
   van het visitekaartje. Montserrat voor alles wat "bediening" is: knoppen, menu, tabbladen, labels.
   Het lattice (ruit-in-ruit, zoals het beeldmerk) heel licht op de houtbanden en in de voet. */
:root { --brand: "Montserrat", "Segoe UI", system-ui, sans-serif; }
.knop, .menu a, .balk-tel, .mob-tel, .ko-tab, .ko-vb, .ko-lbl, .ko-vraag label, .cf-lbl, .cf-groepkop, .ko-k b, .cf-k b, .ko-klein, .ko-w, .ontwerper-kaart .pijl, .mobielmenu a, .ko-volgende span { font-family: var(--brand); }
.knop { letter-spacing: .01em; font-weight: 600; }
.ko-tab, .ko-vb, .ko-k b, .cf-k b { font-weight: 600; }
.ko-lbl, .ko-vraag label, .cf-lbl { font-weight: 600; font-size: .9rem; letter-spacing: .005em; }
.band-hout, .voet, .ontwerper-kaart { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M18 0L36 18L18 36L0 18Z M18 6L30 18L18 30L6 18Z' fill='none' stroke='%23D9C08B' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E"); }
.band-hout.slot, .paginakop { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M18 0L36 18L18 36L0 18Z M18 6L30 18L18 30L6 18Z' fill='none' stroke='%23D9C08B' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E"), linear-gradient(rgba(217, 192, 139, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(217, 192, 139, .06) 1px, transparent 1px); background-size: 36px 36px, 24px 24px, 24px 24px; }

/* configurator-pagina's: compact introblok, de ontwerper meteen in beeld */
body[data-paginasoort="configurator"] .paginakop-in { padding: clamp(26px, 3.6vw, 44px) var(--rand) clamp(22px, 3vw, 34px); gap: 16px; }
body[data-paginasoort="configurator"] .paginakop h1 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: .5rem; max-width: 22ch; }
body[data-paginasoort="configurator"] .paginakop .lede { font-size: 1.02rem; max-width: 70ch; }
body[data-paginasoort="configurator"] .paginakop .hero-onder { margin-top: 10px; }
body[data-paginasoort="configurator"] .paginakop .kruimel { margin-bottom: 6px; }

/* stapper − n + en de volgende-knop onder elk tabblad */
.ko-stapper { display: inline-flex; align-items: center; border: 1px solid var(--lijn); border-radius: 999px; background: var(--papier); overflow: hidden; }
.ko-st { font: inherit; font-size: 1.3rem; line-height: 1; width: 46px; height: 44px; border: 0; background: transparent; color: var(--hout); cursor: pointer; }
.ko-st:hover:not(:disabled) { background: var(--gesso); }
.ko-st:disabled { color: var(--lijn); cursor: default; }
.ko-stapper b { font-family: var(--mono); font-weight: 500; min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.ko-volgende { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--lijn); }
.ko-volgende span { font-size: .84rem; color: var(--inkt-zacht); }
@media (min-width: 960px) { .ko-volgende span { display: inline; } }.menu a { font-size: .9rem; white-space: nowrap; letter-spacing: 0; }
@media (min-width: 1100px) { .menu a { font-size: .94rem; } }.meer-vraagbaak { margin-top: 14px; } .meer-vraagbaak a { color: var(--hout); font-weight: 600; }
/* Lengte maal breedte onder de m²-schuif van de vloercheck. Edwin, 17-9-2026:
   niemand weet zijn vierkante meters, iedereen weet hoe lang en hoe breed. */
.cf-lxb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; font-size: .86rem; color: var(--inkt-zacht); }
.cf-lxb input { width: 5.2rem; padding: 6px 8px; font-family: var(--mono); font-size: .86rem;
  border: 1px solid var(--lijn); border-radius: 6px; background: #fff; color: var(--inkt); }
.cf-lxb .cf-maal { font-family: var(--mono); }
.cf-lxb .cf-eenheid { font-family: var(--mono); font-size: .78rem; }

/* ── Winkelwagenknop in de balk (cloudzicht_04, 19 sep) ─────────────────────
   Staat op elke pagina en is verborgen tot er iets in de wagen ligt; site.js zet
   hem aan uit localStorage. De rest van de winkel staat in site\winkel.css. */
.wk-tas { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--wit-zacht);
  font-family: var(--brand); font-weight: 600; font-size: .86rem; padding: 7px 13px; white-space: nowrap;
  border: 1px solid rgba(246, 241, 232, .4); border-radius: 999px;
  transition: border-color .18s ease, background .18s ease; }
.wk-tas:hover { border-color: var(--messing-licht); background: rgba(246, 241, 232, .08); }
.wk-tas .wk-aantal { font-family: var(--mono); font-size: .74rem; background: var(--messing); color: var(--hout-diep);
  min-width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 5px; }
.wk-tas .wk-tasw { display: none; }
@media (min-width: 620px) { .wk-tas .wk-tasw { display: inline; } }
/* display op .wk-tas overrulet het hidden-attribuut; daarom expliciet terugzetten.
   Zonder deze regel staat er "Winkelwagen 0" in de balk van elke pagina. */
.wk-tas[hidden] { display: none; }