/* Lettertypes zelf gehost (SIL Open Font License, zie assets/fonts/OFL-*.txt): sneller dan Google Fonts,
   geen verzoek naar een derde partij en minder verspringen bij het laden (harness: Lighthouse CLS/LCP). */
@font-face { font-family: 'Libre Caslon Display'; src: url('../fonts/libre-caslon-display-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Caslon Text'; src: url('../fonts/libre-caslon-text-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Caslon Text'; src: url('../fonts/libre-caslon-text-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('../fonts/source-sans-3-var.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }

/* LUX mini — stijl B (editorial). Kleuren en maten staan als variabelen bovenaan. */
:root {
  --terracotta: #BC8565;        /* wit 3,1:1 (alleen koppen vanaf 24 px), inkt 5,2:1 */
  --perzik: #DEB799;
  --oker: #C89F67;
  --salie: #C3CFBC;
  --mauve: #B5969E;
  --olijf: #B4B19A;
  --grijsblauw: #E0E6E7;
  --wit: #FFFFFF;
  --inkt: #202020;
  --op-kleur: #FFFFFF;          /* grote koppen en quotes op terracotta */
  --op-kleur-klein: var(--inkt); /* alle kleine tekst op terracotta */
  --display: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, 'Times New Roman', serif; /* grote koppen */
  --serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;                          /* labels, links, quotes */
  --sans: 'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rand: 8.2%;                 /* zijmarge zoals in het ontwerp */
  --max: 1440px;
  --ritme: clamp(56px, 7vw, 104px); /* vast ritme tussen secties */
  /* B = breedte van het ontwerpvak (schermbreedte zonder scrollbalk, max. 1440 px);
     u = 1% daarvan. Werkt binnen <main> (container), net als vw bij Stock. */
  --B: min(100cqw, var(--max));
  --u: calc(var(--B) / 100);
}
main { container-type: inline-size; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--sans); color: var(--inkt); background: var(--terracotta); line-height: 1.5; }
img { display: block; max-width: 100%; }
a { color: inherit; }
a:hover { opacity: .8; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--wit); color: var(--inkt); padding: 10px 16px; }
.skip:focus { left: 8px; }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand); }
.op-kleur { background: var(--terracotta); color: var(--op-kleur-klein); }
/* wit op terracotta alleen voor grote koppen en quotes (vanaf 24 px) */
.op-kleur .kop-xl, .op-kleur .kop-l, .op-kleur .kop-m, .op-kleur .quote, .op-kleur .prijs, .op-kleur .lopend-spoor { color: var(--op-kleur); }
.op-wit { background: var(--wit); color: var(--inkt); }
.op-grijs { background: var(--grijsblauw); color: var(--inkt); }

/* ---------- Header ---------- */
.site-header { position: absolute; left: 0; right: 0; top: 0; z-index: 20; background: transparent; }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 104px; }
.logo { display: inline-flex; }
.logo img { height: 44px; width: auto; }
.menu { display: flex; flex-wrap: wrap; gap: 0 30px; font-size: 13px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.menu a { text-decoration: none; padding: 14px 0; }
/* huidige pagina: onderstreept, 1 px dik en 6 px onder de letters */
.menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
/* contactpagina: de header ligt over een donkere foto, dus navigatie en logo wit */
html.kop-donker .site-header { color: var(--wit); }

/* ---------- Labels, koppen, links ---------- */
.label { margin: 0; font-family: var(--serif); font-size: 16px; }
.kop-xl { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(40px, 7.6vw, 110px); line-height: .88; letter-spacing: -.005em; }
.kop-l { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(36px, 4.2vw, 60px); line-height: 1.04; }
.kop-m { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(34px, 3.4vw, 50px); line-height: 1.08; }
.klein { font-size: 16px; line-height: 1.7; max-width: 420px; margin: 0; }
.caps { font-size: 14px; font-weight: 600; letter-spacing: .64em; text-transform: uppercase; }
.pijl { font-family: var(--serif); font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; gap: 14px; padding: 8px 0; min-height: 44px; } /* altijd minimaal 44 px hoog (aantikken) */
.pijl svg { width: 28px; height: 10px; flex: none; }
.quote { margin: 0; font-family: var(--display); font-size: clamp(26px, 2.8vw, 40px); line-height: 1.25; letter-spacing: .02em; }

/* ---------- Kleurregel: wit alleen op terracotta ----------
   Krijgt de bovenkant (.hero-kleur) een andere paletkleur, dan zet main.js
   html.hero-licht: alle koppen, lijnen en de lopende tekst worden inkt en het
   logo wisselt naar de donkere versie, in 1,2 s rustig in-uit (net als de achtergrond). */
html.hero-licht .hero-kleur { --op-kleur: var(--inkt); }
.js .hero-kleur .kop-xl, .js .hero-kleur .kop-l, .js .hero-kleur .kop-m, .js .hero-kleur .quote, .js .hero-kleur .lopend-spoor { transition: color 1.2s var(--rustig); }
.logo { position: relative; }
.logo img { transition: opacity 1.2s var(--rustig); }
.logo .logo-donker { position: absolute; left: 0; top: 0; opacity: 0; }
html.hero-licht .site-header .logo-wit { opacity: 0; }
html.hero-licht .site-header .logo-donker { opacity: 1; }

/* ---------- Hero met collage: twee sets die samen wisselen ---------- */
.hero { position: relative; max-width: var(--max); margin: 0 auto; height: clamp(680px, 100svh, 1000px); overflow-x: clip; }
.tegel { position: absolute; transition: transform .6s cubic-bezier(.2,.7,.2,1); -webkit-tap-highlight-color: transparent; }
.tegel-binnen { position: relative; width: 100%; height: 100%; }
.tegel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* set B ("Het cadeau") ligt over set A en vervaagt in 0,2 s; zonder JavaScript alleen set A */
.tegel img.set-b { display: none; }
.js .tegel img.set-b { display: block; opacity: 0; transition: opacity .6s var(--rustig); }
.js .hero.toon-b .tegel img.set-b { opacity: 1; }
.js .hero[data-wissel] .tegel { cursor: pointer; }
.hero-cirkel { position: absolute; left: 29%; top: 28%; width: 24%; aspect-ratio: 1; border: 1px solid var(--op-kleur); border-radius: 50%; opacity: .45; pointer-events: none; z-index: 3; }
.hero-tekst { position: absolute; left: 37%; top: 52%; transform: translateY(-50%); z-index: 4; display: flex; flex-direction: column; gap: 18px; pointer-events: none; }
/* basisgrootte zonder overlap met de foto's, ook zonder JavaScript; main.js maakt de kop alleen bij uitzondering kleiner */
.hero .kop-xl { font-size: clamp(40px, 5.6vw, 80px); }
.hero-tekst .caps { margin: 6px 0 0 4px; line-height: 2; font-size: 13px; }
.badge { position: absolute; left: 78.5%; top: 82%; width: clamp(70px, 6.6vw, 96px); z-index: 4; }
/* wisselrij "Het atelier · Het cadeau": op touch altijd, met een muis alleen bij toetsenbordfocus */
.hero-wissel { display: none; }
.js .hero-wissel { display: flex; align-items: center; margin: -6px 0 0 4px; pointer-events: auto; font-size: 14px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--op-kleur-klein); transition: opacity .3s ease; }
.hero-wissel button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; min-height: 44px; min-width: 44px; cursor: pointer; text-underline-offset: 6px; text-decoration-thickness: 1px; -webkit-tap-highlight-color: transparent; }
.hero-wissel button[aria-pressed="true"] { text-decoration-line: underline; }
.hero-wissel span { padding: 0 .26em 0 .5em; } /* knoppen hebben al letterspatiëring achter de laatste letter */
@media (hover: hover) and (pointer: fine) {
  .js .hero-wissel { opacity: 0; pointer-events: none; }
  .js .hero-wissel:focus-within { opacity: 1; pointer-events: auto; }
}

/* posities desktop en tablet, in % van het hero-vak (top = bovenrand) */
.t1 { left: 6%;  top: 51%; width: 12.5%; aspect-ratio: .74; z-index: 1; }
.t2 { left: 14%; top: 31%; width: 21%;   aspect-ratio: .71; z-index: 2; }
.t3 { left: 12%; top: 70%; width: 11%;   aspect-ratio: .76; z-index: 3; }
.t4 { left: 63%; top: 20%; width: 14.5%; aspect-ratio: .6;  z-index: 1; }
.t5 { left: 68%; top: 39%; width: 16.5%; aspect-ratio: .77; z-index: 2; }
.t6 { left: 65%; top: 71%; width: 12%;   aspect-ratio: 1.22; z-index: 3; }

.intro { max-width: 900px; margin: 0 auto; padding: clamp(24px, 4vw, 56px) 24px clamp(96px, 13vw, 180px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 32px; }

/* ---------- Kolommen (werkwijze, formaten, stappen) ---------- */
.sectie { padding-top: var(--ritme); padding-bottom: calc(var(--ritme) / 2); display: flex; flex-direction: column; gap: clamp(56px, 8vw, 110px); }
.sectie.direct { padding-top: 0; }
.prijs { font-family: var(--serif); font-size: clamp(40px, 4.4vw, 64px); line-height: 1; }

/* ---------- 003 Zo werkt het: één genummerde reeks met lijn en pijl (alles in inkt) ---------- */
/* vanaf 1025 px horizontaal; lijnstukken lopen niet door de rondjes (12 px lucht) */
.stappen { --stap-rond: 48px; --stap-gat: clamp(32px, 4vw, 64px); --stap-rij: 56px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--stap-gat); align-items: start; color: var(--inkt); }
.stap { position: relative; display: flex; flex-direction: column; }
.stap-nr { flex: none; display: flex; align-items: center; justify-content: center; width: var(--stap-rond); height: var(--stap-rond); margin-bottom: 32px; border: 1px solid currentColor; border-radius: 50%; font-family: var(--serif); font-size: 16px; line-height: 1; padding-top: 3px; /* cijfers optisch in het midden */ }
.stap .kop-m { margin-bottom: 24px; }
.stap:not(:last-child)::before { content: ""; position: absolute; top: calc(var(--stap-rond) / 2 - .5px); left: calc(var(--stap-rond) + 12px); right: calc(12px - var(--stap-gat)); height: 1px; background: currentColor; transform-origin: left center; }
/* pijlpuntje zoals in .pijl (M22 1l4 4-4 4): ca. 8 x 8 px, 1,2 px dik, punt op het eind van de lijn */
.stap:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--stap-rond) / 2 - 3px); right: calc(13.24px - var(--stap-gat)); width: 6px; height: 6px; border-top: 1.2px solid currentColor; border-right: 1.2px solid currentColor; transform: rotate(45deg); }
/* tekenen bij in beeld komen: alleen als main.js .teken zet (met JS en beweging).
   Overgangen alleen bij .in-beeld, zodat het verbergen bij laden direct gaat. Volgorde 01, lijn, 02, lijn, 03; klaar na 1,2 s */
.stappen.teken .stap-nr, .stappen.teken .stap::after { opacity: 0; }
.stappen.teken .stap::before { transform: scaleX(0); }
.stappen.teken.in-beeld .stap-nr { opacity: 1; transition: opacity .9s ease; }
.stappen.teken.in-beeld .stap::after { opacity: 1; transition: opacity .3s ease; }
.stappen.teken.in-beeld .stap::before { transform: none; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.stappen.teken.in-beeld .stap:nth-child(1)::before { transition-delay: .1s; }
.stappen.teken.in-beeld .stap:nth-child(1)::after { transition-delay: .7s; }
.stappen.teken.in-beeld .stap:nth-child(2) .stap-nr { transition-delay: .2s; }
.stappen.teken.in-beeld .stap:nth-child(2)::before { transition-delay: .3s; }
.stappen.teken.in-beeld .stap:nth-child(2)::after { transition-delay: .9s; }
.stappen.teken.in-beeld .stap:nth-child(3) .stap-nr { transition-delay: .4s; }
/* tot en met 1024 px verticaal: rondje links, lijn omlaag door het midden van de rondjes */
@media (max-width: 1024px) {
  .stappen { --stap-rond: 44px; grid-template-columns: minmax(0, 1fr); row-gap: var(--stap-rij); }
  .stap { display: grid; grid-template-columns: var(--stap-rond) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .stap-nr { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
  /* rondje midden op de eerste regel van de kop */
  .stap .kop-m { grid-column: 2; padding-top: max(0px, calc((var(--stap-rond) - 1.08em) / 2)); }
  .stap .klein { grid-column: 2; }
  .stap:not(:last-child)::before { top: calc(var(--stap-rond) + 12px); bottom: calc(12px - var(--stap-rij)); left: calc(var(--stap-rond) / 2 - .5px); right: auto; width: 1px; height: auto; transform-origin: center top; }
  .stap:not(:last-child)::after { top: auto; bottom: calc(13.24px - var(--stap-rij)); left: calc(var(--stap-rond) / 2 - 3px); right: auto; transform: rotate(135deg); }
  .stappen.teken .stap::before { transform: scaleY(0); }
}
@media (max-width: 760px) {
  .stappen { --stap-rond: 40px; --stap-rij: 48px; }
  .stap { column-gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .stappen.teken .stap-nr, .stappen.teken .stap::after, .stappen.teken.in-beeld .stap-nr, .stappen.teken.in-beeld .stap::after { opacity: 1; transition: none; }
  .stappen.teken .stap::before, .stappen.teken.in-beeld .stap::before { transform: none; transition: none; }
}

/* ---------- 002 Formaten: vier prijskaarten naast elkaar (wens Carst: zoals een prijsoverzicht met kaarten) ---------- */
.formaten-blok { width: 100%; max-width: 1240px; margin-inline: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.formaten { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.formaat { display: flex; flex-direction: column; background: var(--wit); color: var(--inkt); border: 1px solid rgba(32,32,32,.1); border-radius: 4px; padding: 32px 28px 36px; } /* bijna recht: past bij de editoriale stijl */
.formaat .takje { width: 48px; height: 48px; margin-bottom: 28px; }
.formaat-prijs { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(40px, 3.4vw, 52px); line-height: 1; }
.formaat-aantal { margin: 12px 0 0; font-family: var(--serif); font-size: 16px; }
.formaat-regel { margin: 4px 0 0; font-size: 16px; line-height: 1.4; color: #4a4a4a; min-height: 2.8em; }
.formaat .pijl { margin-top: 20px; min-height: 44px; }
.formaat-kop { margin: 20px 0 0; padding-top: 24px; border-top: 1px solid rgba(32,32,32,.15); font-size: 16px; font-weight: 600; }
.formaat-lijst { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.35; }
.formaat-lijst li { display: flex; gap: 10px; align-items: flex-start; }
.formaat-lijst .vink { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.formaten-voet { margin: 0; max-width: 640px; font-size: 16px; }
@media (max-width: 1024px) { .formaten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .formaten { grid-template-columns: 1fr; gap: 16px; }
  .formaat { padding: 28px 24px 30px; }
  .formaat .takje { margin-bottom: 20px; }
  .formaat-regel { min-height: 0; }
}

/* ---------- Hover-lijst (portfolio / thema's) ---------- */
.hoverlijst-sectie { transition: background .5s ease; }
.hoverlijst { position: relative; }
.hoverlijst ul { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; text-align: center; }
.hoverlijst button { font-family: var(--display); font-size: clamp(30px, 5.2vw, 76px); line-height: 1.18; letter-spacing: -.015em; color: var(--inkt); background: none; border: 0; padding: 0 8px; cursor: pointer; transition: color .3s ease; }
.hoverlijst.actief button { color: rgba(32,32,32,.3); }
.hoverlijst.actief button.aan { color: var(--inkt); }
.hoverlijst .groot, .hoverlijst .klein-beeld { position: absolute; object-fit: cover; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .35s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.hoverlijst .groot { left: 18%; top: -14%; width: 28%; aspect-ratio: 3 / 4; }
.hoverlijst .klein-beeld { left: 56%; top: 8%; width: 16%; aspect-ratio: 4 / 5; }
.hoverlijst.actief .groot, .hoverlijst.actief .klein-beeld { opacity: 1; }
.midden { align-self: center; }

/* ---------- Kaarten (portfolio / thema's op touch) ---------- */
.kaarten { display: none; }
@media (hover: none), (pointer: coarse) {
  .hoverlijst { display: none; }
  .kaarten { --kaart-rand: min(8.2vw, calc(var(--max) * .082)); display: grid; grid-auto-flow: column; grid-auto-columns: min(72vw, 300px); gap: 16px; margin-inline: calc(-1 * var(--kaart-rand)); padding-inline: var(--kaart-rand); scroll-padding-inline: var(--kaart-rand); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; scroll-behavior: smooth; }
  .kaarten::-webkit-scrollbar { display: none; }
  .kaarten:focus-visible { outline-offset: -2px; }
}
.kaart { margin: 0; scroll-snap-align: start; min-width: 0; }
.kaart img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.kaart figcaption { margin-top: 12px; font-family: var(--display); font-size: 22px; line-height: 1.2; color: var(--inkt); }

/* ---------- Statement over volle breedte ---------- */
.statement { position: relative; min-height: clamp(560px, 60vw, 860px); display: flex; align-items: center; color: var(--wit); }
.statement > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.statement::before { content: ""; position: absolute; inset: 0; background: rgba(32,32,32,.38); z-index: 1; }
.statement.donker::before { background: rgba(32,32,32,.52); }
.statement .wrap { position: relative; z-index: 2; width: 100%; padding-top: 48px; padding-bottom: 48px; }
.statement .inhoud { max-width: 700px; display: flex; flex-direction: column; gap: 26px; }
.statement .quote { font-size: clamp(26px, 3.2vw, 46px); line-height: 1.28; }

/* ---------- Beeldparen ---------- */
.paar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(20px, 3vw, 40px); }
.paar > img { flex: 1 1 280px; min-width: 0; aspect-ratio: 3 / 4; object-fit: cover; }
.paar > img.lager { flex-basis: 220px; margin-top: clamp(0px, 8vw, 120px); }
.paar .tekst { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 24px; padding-top: clamp(0px, 3vw, 40px); }
.duo { display: flex; flex-wrap: wrap; gap: clamp(32px, 6vw, 96px); align-items: center; }
.duo .tekst { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.duo .beelden { flex: 1 1 420px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.duo .beelden img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.duo .beelden img:first-child { margin-top: 64px; }
/* één staande foto (Over-teaser op de homepage), maximaal 420 px breed */
.duo .beelden.een { grid-template-columns: minmax(0, 420px); justify-content: center; }
.duo .beelden.een img:first-child { margin-top: 0; }

/* ---------- Contact ---------- */
.formulier { max-width: 720px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.formulier label { display: flex; flex-direction: column; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.formulier .breed { grid-column: 1 / -1; }
.formulier input, .formulier select, .formulier textarea { font: 16px/1.5 var(--sans); letter-spacing: normal; text-transform: none; color: var(--inkt); background: rgba(255,255,255,.92); border: 0; border-bottom: 1px solid rgba(32,32,32,.5); padding: 12px 14px; border-radius: 0; width: 100%; }
.formulier textarea { resize: vertical; min-height: 140px; }
.formulier .val { position: absolute; left: -5000px; }
.formulier .verstuur { justify-self: center; grid-column: 1 / -1; font-family: var(--serif); font-size: 17px; color: var(--inkt); background: var(--wit); border: 0; padding: 16px 34px; cursor: pointer; display: inline-flex; align-items: center; gap: 14px; }
.formulier .verstuur svg { width: 28px; height: 10px; }
.formulier .melding { grid-column: 1 / -1; text-align: center; font-size: 16px; margin: 0; } /* lopende tekst min. 16 px (mobiele principes) */

/* ---------- Footer ---------- */
.site-footer { background: var(--inkt); color: #E0E0E0; font-size: 16px; line-height: 1.7; } /* min. 16 px (mobiele regel 2) */
.site-footer .wrap { padding-top: 48px; padding-bottom: 48px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.site-footer .naam { font-family: var(--serif); font-size: 22px; color: var(--wit); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.site-footer a { color: var(--wit); text-decoration: none; }

/* ---------- Eenvoudige tekstpagina's ---------- */
.pagina { min-height: 70vh; padding-top: 180px; padding-bottom: 120px; }
.pagina .tekstblok { max-width: 680px; display: flex; flex-direction: column; gap: 20px; font-size: 16px; line-height: 1.7; }
.pagina h2 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 16px 0 0; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
}

/* ---------- Mobiel ---------- */
@media (max-width: 760px) {
  :root { --rand: 22px; }
  .site-header { position: relative; background: var(--terracotta); }
  .site-header .wrap { min-height: 0; padding-top: 16px; padding-bottom: 12px; }
  .menu { gap: 0 18px; letter-spacing: .14em; }
  .menu a { padding: 8px 0; }
  .hero { height: 740px; }
  .hero-cirkel { left: calc(12% + 12px); top: calc(26% - 40px); width: 52%; } /* om de kop, 10 px vrij van "Carien Geurts / Atelier Ospel" */
  .hero-tekst { left: var(--rand); right: var(--rand); top: 25.5%; transform: none; }
  .badge { left: auto; right: 5%; top: auto; bottom: 6%; width: 70px; }
  .hero-wissel { font-size: 13px; letter-spacing: .24em; }
  /* bovenste rij blijft; onderste rij begint minimaal 16 px onder de wisselrij */
  .t1 { left: 4%;  top: 3%;  width: 26%; }
  .t2 { left: 36%; top: 1%;  width: 30%; }
  .t3 { left: 72%; top: 5%;  width: 22%; }
  .t4 { left: 5%;  top: 66%; width: 25%; }
  .t5 { left: 35%; top: 68.5%; width: 30%; }
  .t6 { left: 70%; top: 67.5%; width: 26%; }
  /* portfolio: foto boven de lijst in plaats van eroverheen */
  .hoverlijst .groot { position: relative; left: auto; top: auto; display: none; width: 64%; margin: 0 auto 24px; }
  .hoverlijst .klein-beeld { display: none; }
  .hoverlijst.actief .groot { display: block; }
  .klein { max-width: none; }
  .kaarten { --kaart-rand: var(--rand); gap: 12px; }
  .formulier { grid-template-columns: minmax(0, 1fr); }
  .duo .beelden img:first-child { margin-top: 32px; }
  .duo .beelden.een img:first-child { margin-top: 0; }
  .pagina { padding-top: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .tegel, .js .tegel img.set-b, .logo img, .js .hero-kleur .kop-xl, .js .hero-kleur .kop-l, .js .hero-kleur .kop-m, .js .hero-kleur .quote, .js .hero-kleur .lopend-spoor, .hoverlijst .groot, .hoverlijst .klein-beeld, .hoverlijst-sectie { transition: none; }
  .kaarten { scroll-behavior: auto; }
}

/* ---------- Vaste balk met huidig sectielabel (verschijnt na de hero) ---------- */
.balk { position: fixed; left: 0; right: 0; top: 0; z-index: 40; transform: translateY(-100%); transition: transform .4s ease, background .4s ease, color .4s ease; }
.balk.zichtbaar { transform: none; }
.balk .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.balk .links { display: flex; align-items: center; gap: 22px; text-decoration: none; }
.balk .links img { height: 30px; width: auto; }
.balk .sectie-label { font-family: var(--serif); font-size: 15px; }
.balk .menu { font-size: 11px; gap: 0 22px; }
.balk .menu a { padding: 10px 0; }
.balk.op-kleur .logo-donker, .balk.op-wit .logo-wit, .balk.op-grijs .logo-wit { display: none; }
.balk.op-wit .logo-donker, .balk.op-grijs .logo-donker { display: block; }
/* balk boven de bovenkant terwijl die een lichte paletkleur heeft: donker logo */
.balk.op-kleur.licht .logo-wit { display: none; }
.balk.op-kleur.licht .logo-donker { display: block; }
/* balk boven het portfolio terwijl de laag een diepe tint is: wit logo en wit label */
.balk.diep { color: var(--inkt); } /* het label blijft inkt (5,4:1), alleen het logo wordt wit */
.balk.diep .logo-wit { display: block; }
.balk.diep .logo-donker { display: none; }

/* ---------- Tekst die rustig invaagt bij scrollen ---------- */
.js .opkomen { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js .opkomen.in-beeld { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .opkomen { opacity: 1; transform: none; transition: none; } }

@media (max-width: 760px) {
  .logo img { height: 36px; }
  .menu { font-size: 11px; letter-spacing: .18em; }
  .caps { letter-spacing: .4em; font-size: 12px; }
  .balk .menu { display: none; }
  .balk .wrap { min-height: 56px; }
  /* balklabel op één regel naast het logo, ook '005 — Kraamcadeauboxen' (brief homepage per product) */
  .balk .links { gap: 16px; }
  .balk .sectie-label { font-size: 14px; white-space: nowrap; }
}

/* =====================================================================
   Interacties naar het voorbeeld van stockdutchdesign.com
   ===================================================================== */

/* ---------- Intro-scherm (eerste bezoek per sessie, ca. 2,2 s) ----------
   Het script in <head> zet .intro-aan alleen bij het eerste bezoek per sessie,
   niet na een pagina-overgang en niet bij "minder beweging". De hele tijdlijn
   staat hieronder in CSS en begint dus direct, zonder op "load" te wachten.
   De tijdlijn staat hieronder bij "de tijdlijn". */
:root { --p3-uit: cubic-bezier(.33,1,.68,1); --in-uit: cubic-bezier(.76,0,.24,1); --intro-y: 80px;
  --rustig: cubic-bezier(.45,0,.55,1); /* rustige in-uit voor kleurwissels (wens Carst: zachter dan 0,75 s) */ }
.intro-scherm { display: none; }
.js.intro-aan .intro-scherm { display: block; position: fixed; inset: 0; z-index: 100; overflow: hidden; color: var(--wit);
  /* klikken gaan na 1,6 s door naar de pagina; noodrem: altijd weg vóór 3,1 s, ook als main.js niet draait */
  animation: intro-door 0s 1.6s forwards, intro-nood 0s 2.9s forwards; } /* noodrem in één keer op 2,9 s (ronde 5: geen vervaging die over 3,1 s heen loopt) */ /* intro ca. 2,2 s (wens Carst 6 nov.: iets rustiger; was 1,5 s) */
@keyframes intro-door { to { pointer-events: none; } }
@keyframes intro-nood { to { opacity: 0; visibility: hidden; pointer-events: none; } }
/* overslaan (tik, klik, toets, scroll): de uitgang is binnen 0,6 s klaar (0,5 s) */
.js.intro-aan .intro-scherm.snel { transform: translateY(-100%); transition: transform .45s var(--in-uit); pointer-events: none; }
.intro-doek { position: absolute; inset: 0; background: var(--terracotta); }
.intro-inhoud { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; }
.intro-logo img { width: 200px; height: auto; }
.intro-podium { position: relative; display: flex; flex-direction: column; align-items: center; }
.intro-figuur { position: relative; overflow: hidden; width: min(25vw, calc((100svh - 240px) * 25 / 35)); aspect-ratio: 25 / 35; }
.intro-vlak, .intro-masker { position: absolute; inset: 0; }
.intro-vlak { background: var(--perzik); }
.intro-masker { overflow: hidden; }
.intro-foto { width: 100%; height: 100%; object-fit: cover; }
.intro-figuur.zonder-foto .intro-masker { visibility: hidden; } /* foto na 0,6 s niet geladen: alleen het perzik vlak */
.intro-regel { margin: 0; overflow: hidden; white-space: nowrap; font-family: var(--display); font-weight: 400; font-size: clamp(40px, 4.4vw, 64px); line-height: 1.1; padding-bottom: .1em; }
.intro-regel span { display: block; }
/* desktop: regel 1 eindigt 24 px links van de figuur (40% hoogte), regel 2 begint 24 px rechts (62%) */
@media (min-width: 1025px) {
  .intro-regel { position: absolute; translate: 0 -50%; }
  .intro-regel.r1 { right: calc(100% + 24px); top: 40%; text-align: right; }
  .intro-regel.r2 { left: calc(100% + 24px); top: 62%; }
}
/* tot en met 1024 px: beide regels gecentreerd onder de figuur */
@media (max-width: 1024px) {
  .intro-figuur { width: min(36vw, calc((100svh - 400px) * 25 / 35)); }
  .intro-regel { text-align: center; }
  .intro-regel.r1 { margin-top: 24px; }
}
@media (max-width: 760px) {
  :root { --intro-y: 48px; }
  .intro-logo img { width: 160px; }
  .intro-figuur { width: min(56vw, calc((100svh - 360px) * 25 / 35)); }
  .intro-regel { font-size: 40px; }
}
/* de tijdlijn */
/* 0,10 logo (0,4 s) · 0,20 perzik vlak (0,7 s) · 0,45 masker en foto (0,7 s) · 0,55/0,65 tekstregels ·
   1,45 uitgang logo en regels · 1,50 figuur · 1,55 doek en pagina (0,65 s) · 2,20 klaar */
.js.intro-aan .intro-logo { animation: intro-zichtbaar .4s .1s var(--p3-uit) both, intro-vervaag .25s 1.45s linear forwards; }
.js.intro-aan .intro-vlak { animation: intro-van-onder .7s .2s var(--p3-uit) both; }
.js.intro-aan .intro-masker { animation: intro-masker .7s .45s var(--p3-uit) both; }
.js.intro-aan .intro-foto { animation: intro-foto .7s .45s var(--p3-uit) both; }
.js.intro-aan .intro-regel span { animation: intro-van-onder .6s .55s var(--p3-uit) both; }
.js.intro-aan .intro-regel.r2 span { animation-delay: .65s; }
.js.intro-aan .intro-regel { animation: intro-schermhoog .65s 1.45s var(--in-uit) forwards; }
.js.intro-aan .intro-regel.r2 { animation-delay: 1.45s; }
.js.intro-aan .intro-figuur { animation: intro-figuur-weg .65s 1.5s var(--in-uit) forwards; }
.js.intro-aan .intro-doek { animation: intro-doek-weg .65s 1.55s var(--p3-uit) forwards; }
/* de pagina komt van 80 px (mobiel 48 px) omhoog terwijl het doek optrekt */
.js.intro-aan .site-header, .js.intro-aan main { animation: intro-pagina .65s 1.55s var(--p3-uit) both; }
@keyframes intro-zichtbaar { from { opacity: 0; } }
@keyframes intro-vervaag { to { opacity: 0; } }
@keyframes intro-van-onder { from { transform: translateY(100%); } }
@keyframes intro-masker { from { transform: translateY(101%); } }
@keyframes intro-foto { from { transform: translateY(-80%); } }
@keyframes intro-schermhoog { to { transform: translateY(-100vh); } }
@keyframes intro-figuur-weg { to { transform: translateY(calc(-100vh - 100%)); } }
@keyframes intro-doek-weg { to { transform: translateY(-100%); } }
@keyframes intro-pagina { from { transform: translateY(var(--intro-y)); } }
/* "Naar de inhoud" komt na de eerste Tab boven de wegschuivende intro */
.skip:focus { z-index: 110; }

/* ---------- Pagina-overgang ---------- */
.overgang { position: fixed; inset: 0; z-index: 99; pointer-events: none; } /* verder onderaan: "Pagina-overgang zoals Stock" */

/* ---------- Eigen cursor ---------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .js .cursor { display: flex; position: fixed; left: 0; top: 0; z-index: 90; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 1px solid currentColor; color: var(--inkt); pointer-events: none; align-items: center; justify-content: center; transition: width .35s ease, height .35s ease, margin .35s ease, background .35s ease, color .25s ease, opacity .3s ease; opacity: 0; mix-blend-mode: normal; }
  .js .cursor.zichtbaar { opacity: 1; }
  .js .cursor.op-kleur-c { color: var(--wit); }
  .js .cursor.groot { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .js .cursor.label { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--wit); color: var(--inkt); border-color: var(--wit); }
  .cursor-label { font-family: var(--serif); font-size: 13px; opacity: 0; transition: opacity .2s ease; }
  .cursor.label .cursor-label { opacity: 1; }
}

/* ---------- Burger + menu over het hele scherm ---------- */
.burger { display: none; }
.js .burger { position: fixed; top: 26px; right: var(--rand); z-index: 60; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--wit); cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 6px; transition: color .4s ease; }
.burger span { display: block; height: 1.5px; width: 100%; background: currentColor; transition: transform .5s cubic-bezier(.76,0,.24,1), opacity .3s ease; transform-origin: center; }
.burger.donker { color: var(--inkt); }
.burger[aria-expanded="true"] { color: var(--wit); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.js .site-header .menu { margin-right: 64px; }
.balk .wrap { padding-right: calc(var(--rand) + 56px); }

.menu-scherm { position: fixed; inset: 0; z-index: 55; background: #000; color: var(--wit); overflow-y: auto; clip-path: inset(0 0 100% 0); transition: clip-path .8s cubic-bezier(.76,0,.24,1); }
.menu-scherm[hidden] { display: block; visibility: hidden; }
.menu-scherm.open { clip-path: inset(0 0 0 0); visibility: visible; }
.menu-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: grayscale(.6); transform: scale(1.08); transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.menu-scherm.open .menu-foto { transform: none; }
.menu-binnen { position: relative; min-height: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 48px clamp(48px, 10vw, 160px); padding-top: 110px; padding-bottom: 60px; }
.menu-nav ul { list-style: none; margin: 0; padding: 0; }
.menu-nav li { overflow: hidden; }
.menu-nav a { display: inline-block; font-family: var(--display); font-size: clamp(40px, 5vw, 64px); line-height: 1.12; text-decoration: none; transform: translateY(105%); transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
.menu-scherm.open .menu-nav a { transform: none; }
.menu-nav a:hover { opacity: .6; }
.menu-nav li:nth-child(2) a { transition-delay: .05s; } .menu-nav li:nth-child(3) a { transition-delay: .1s; }
.menu-nav li:nth-child(4) a { transition-delay: .15s; } .menu-nav li:nth-child(5) a { transition-delay: .2s; }
.menu-nav li:nth-child(6) a { transition-delay: .25s; }
.menu-kolom { display: flex; flex-direction: column; gap: 8px; font-size: 14px; opacity: 0; transform: translateY(16px); transition: opacity .6s .35s ease, transform .6s .35s ease; }
.menu-scherm.open .menu-kolom { opacity: 1; transform: none; }
.menu-kolom a { text-decoration: none; }
.menu-kop { margin: 18px 0 2px; font-family: var(--serif); font-size: 18px; }
.menu-kop:first-child { margin-top: 0; }
html.menu-is-open { overflow: hidden; }

/* ---------- Uitgelicht met lopende tekst ---------- */
/* Desktop: foto op 16,667% / 5,9u, 25% x 33,33u; het midden van de lopende regel
   op het midden van de foto; tekstblok vanaf 50%, 32 px onder de lopende regel */
.uitgelicht { --ub-links: 16.667%; --ub-top: calc(var(--u) * 5.9); --ub-b: 25%; --ub-h: calc(var(--u) * 33.333);
  --lopend-fs: clamp(56px, calc(var(--u) * 7.6), 110px); --lopend-midden: calc(var(--ub-top) + var(--ub-h) / 2);
  --tekst-links: 50%; --tekst-b: min(25%, 360px);
  position: relative; max-width: var(--max); margin: 0 auto; padding: 0 0 calc(var(--ritme) / 2); min-height: calc(var(--ub-top) + var(--ub-h) + var(--ritme) / 2); }
.uitgelicht-beeld { position: absolute; z-index: 1; left: var(--ub-links); top: var(--ub-top); width: var(--ub-b); height: var(--ub-h); overflow: hidden; translate: 0 0; transition: translate .6s cubic-bezier(.2,.7,.2,1); }
/* de witte lopende regel loopt over de lichte foto: foto iets donkerder plus 20% inkt, zodat wit minstens 3:1 haalt */
.uitgelicht-beeld img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.85); }
.uitgelicht-beeld::after { content: ""; position: absolute; inset: 0; background: rgba(32,32,32,.2); pointer-events: none; transition: opacity .9s ease; }
.js .uitgelicht-beeld:has(> img.zoom:not(.in-beeld))::after { opacity: 0; } /* sluier komt samen met de foto op */
.lopend { overflow: hidden; white-space: nowrap; pointer-events: none; }
.uitgelicht .lopend { position: absolute; left: 0; right: 0; top: var(--lopend-midden); transform: translateY(-50%); z-index: 2; }
.lopend-spoor { display: inline-block; font-family: var(--display); font-size: clamp(48px, 7.6vw, 110px); line-height: 1.1; will-change: transform; }
.uitgelicht .lopend-spoor { font-size: var(--lopend-fs); }
/* lopende tekst: lineair en eindeloos, een halve spoorbreedte in 15 s; stil buiten beeld,
   bij minder beweging en zonder JavaScript (dan begint de regel met "— Ieder") */
.js .lopend-spoor { animation: lopen 15s linear infinite; }
.js .lopend.pauze .lopend-spoor { animation-play-state: paused; }
@keyframes lopen { to { transform: translate3d(-50%, 0, 0); } }
.lopend-los { padding: 0 0 clamp(64px, 8vw, 110px); }
.uitgelicht-tekst { position: relative; z-index: 3; width: var(--tekst-b); margin: 0 0 0 var(--tekst-links); padding-top: calc(var(--lopend-midden) + var(--lopend-fs) * .55 + 32px); display: flex; flex-direction: column; gap: 16px; }
.uitgelicht-tekst .caps { font-size: 14px; margin: 0; }
/* homepage: onder de quote het vaste ritme, daarna de productblokken */
.intro.kort { padding-bottom: var(--ritme); }
@media (max-width: 1024px) {
  .uitgelicht { --ub-links: 10%; --ub-b: 36%; --ub-h: calc(var(--u) * 48); --tekst-links: 54%; --tekst-b: 38%; }
}

/* ---------- Koppen per woord uit een masker ---------- */
.js .woorden-kop .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.js .woorden-kop .w > span { display: inline-block; transform: translateY(105%); transition: transform 1s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 45ms); }
.js .woorden-kop.in-beeld .w > span { transform: none; }

/* ---------- Beelden die rustig inzoomen ---------- */
.js .zoom-in { overflow: hidden; }
.js img.zoom { transform: scale(1.12); opacity: 0; transition: transform 1.6s cubic-bezier(.2,.7,.2,1), opacity .9s ease; }
.js img.zoom.in-beeld { transform: none; opacity: 1; }

/* ---------- Hero komt op na de intro ---------- */
.js .hero .tegel { translate: 0 40px; transition: transform 1s cubic-bezier(.25,.46,.45,.94), translate 1.1s cubic-bezier(.2,.7,.2,1); } /* meebewegen: 1 s easeOut zoals Stock (F1) */
/* de tegels staan al tijdens de intro zichtbaar (doorzichtigheid 1) onder het doek: zo hangt de LCP niet af van de intro;
   alleen de verschuiving van 40 px speelt na de intro (brief 2026-11-06, A1) */
.js .hero.klaar .tegel { translate: 0 0; }
.js .hero .t2, .js .hero .t5 { transition-delay: 0s, .1s; }
.js .hero .t3, .js .hero .t6 { transition-delay: 0s, .2s; }
.js .hero .hero-cirkel { transform: scale(.6); opacity: 0; transition: transform 1.4s cubic-bezier(.2,.7,.2,1), opacity 1s ease, border-color 1.2s var(--rustig), translate .6s cubic-bezier(.2,.7,.2,1); }
.js .hero.klaar .hero-cirkel { transform: none; opacity: .45; }
.badge { will-change: transform; }

@media (max-width: 760px) {
  .site-header .menu { flex-wrap: wrap; gap: 6px 18px; }
  .js .site-header .menu { display: none; }
  .js .burger { top: 18px; }
  /* mobiel: foto 62% breed en gecentreerd, lopende regel 56 px op het midden, tekst 32 px eronder */
  .uitgelicht { --ub-links: 19%; --ub-top: 0px; --ub-b: 62%; --ub-h: calc(var(--u) * 82.667); --lopend-fs: 56px; }
  .uitgelicht-tekst { width: auto; margin: 0 var(--rand); padding-top: calc(var(--ub-top) + var(--ub-h) + 32px); }
  .menu-binnen { align-items: flex-start; padding-top: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .js.intro-aan .intro-scherm { display: none; }
  .js.intro-aan .site-header, .js.intro-aan main { animation: none; }
  .overgang, .menu-scherm, .menu-nav a, .menu-kolom, .menu-foto { transition: none; }
  .js .lopend-spoor { animation: none; } /* lopende tekst staat stil en begint met "— Ieder" */
  .uitgelicht-beeld, .uitgelicht-beeld::after { transition: none; }
  .js .woorden-kop .w > span, .js img.zoom, .js .hero .tegel, .js .hero .hero-cirkel { transform: none; translate: none; opacity: 1; transition: none; }
  .js .hero .hero-cirkel { opacity: .45; }
}

/* =====================================================================
   Scrollen, kleurovergangen en werkwijze zoals stockdutchdesign.com
   ===================================================================== */

/* Vloeiend scrollen neemt het over van de browser */
html.zacht-scrollen { scroll-behavior: auto; }

/* Eén vaste achtergrondlaag; secties eronder zijn doorzichtig en de laag
   vloeit in 0,75 s naar de kleur van de sectie die in beeld komt */
.achtergrond { position: fixed; inset: 0; z-index: -1; background-color: var(--wit); pointer-events: none; transition: background-color .75s cubic-bezier(.25,.46,.45,.94); will-change: background-color; }
.js .met-laag { background-color: transparent !important; transition: none; }
/* De bovenkant (header, collage, uitgelicht, werkwijze) kleurt samen mee */
/* bovenkant: achtergrond, tekstkleur en logo wisselen samen in 1,2 s; halverwege van helft wisselen
   loopt vloeiend terug vanaf de huidige stand (CSS-overgangen keren om vanaf waar ze zijn) */
.js .hero-kleur { transition: background-color 1.2s var(--rustig); }
.js .balk { transition: background-color 1.2s var(--rustig), color 1s var(--rustig), transform .5s ease; }
/* portfolio: de laag wisselt bij aanwijzen in 1 s (rustig), bij scrollen blijft het 0,75 s */
.achtergrond.traag { transition: background-color 1s var(--rustig); }

/* ---------- Homepage 001 Producten: drieluik zoals de kernwaarden van Stock (brief 2026-11-06) ----------
   Desktop: één scherm hoog, drie gelijke kolommen (perzik, oker, mauve), alle tekst in inkt. Met een muis
   schuift bij aanwijzen of focus een foto van boven in (masker -101% -> 0, zoom 1,3 -> 1) en wordt de tekst wit.
   De pijl-link maakt met ::after de hele kolom klikbaar (één tabstop per kolom). Op touch staat de foto boven de tekst. */
.kernwaarden { position: relative; }
.kern-label { position: absolute; left: var(--rand); top: var(--ritme); z-index: 3; }
.kern-kolommen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kern-kolom { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: calc(var(--ritme) + 48px) 24px calc(var(--ritme) / 2) clamp(24px, calc(var(--u) * 8.333), 120px); }
.kolom-prem { background: var(--oker); }
.kolom-nest { background: var(--mauve); }
/* witte lijnen van 1 px, alleen tussen de kolommen, verticaal in het midden */
.kern-kolom:nth-child(2)::before, .kern-kolom:nth-child(2)::after { content: ""; position: absolute; top: 50%; width: 1px; height: calc(var(--u) * 18); background: var(--wit); transform: translateY(-50%); z-index: 2; pointer-events: none; }
.kern-kolom:nth-child(2)::before { left: 0; } .kern-kolom:nth-child(2)::after { right: 0; }
.kern-tekst { width: min(280px, 100%); display: flex; flex-direction: column; align-items: flex-start; gap: 20px; color: var(--inkt); }
.kern-tekst .nr { font-family: var(--serif); font-size: 16px; line-height: 1; }
.kern-tekst .kop-m { color: inherit; hyphens: manual; }
.kern-tekst .klein { max-width: none; }
.kern-tekst .pijl { margin-top: 4px; }
.kolom-link::after { content: ""; position: absolute; inset: -200vh -200vw; z-index: 3; } /* groter dan de kolom en afgesneden door de kolom (overflow): ook als het tekstblok verschuift is de hele kolom klikbaar */
.kolom-link:hover { opacity: 1; }
.kern-beeld { display: none; }
.kern-masker img, .nest-lijst img { width: 100%; height: 100%; object-fit: cover; }
.nest-lijst { display: none; }

/* Met een muis (vanaf 761 px): één scherm hoog, foto schuift in bij aanwijzen of focus */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .kern-kolommen { height: clamp(600px, 100svh, 900px); }
  /* gelijke hoogte van het tekstblok: nummers en koppen staan in de drie kolommen op één lijn */
  .kern-tekst { min-height: calc(16px + 3 * 20px + 2.16 * clamp(34px, 3.4vw, 50px) + 5.1em + 48px); }
  .kern-beeld { display: block; position: absolute; inset: 0; z-index: -1; overflow: hidden; transform: translateY(-101%); transition: transform 1s cubic-bezier(.215,.61,.355,1); }
  .kern-masker { position: absolute; inset: 0; overflow: hidden; background: #2A1C14; /* warm donker (ontwerpgate ronde 1, P2) */ transform: translateY(101%); transition: transform 1s cubic-bezier(.215,.61,.355,1); }
  .kern-masker img { opacity: .6; transform: scale(1.3); transition: transform 1s cubic-bezier(.215,.61,.355,1); }
  /* extra sluier onder de tekst: de foto's zijn licht; zo haalt de witte tekst ook op de lichtste plek 4,5:1 */
  .kern-masker::after { content: ""; position: absolute; inset: 0; background: rgba(60,40,30,.55); } /* zelfde warme donkere sluier als Handwerk (F3) */
  .kern-kolom:hover .kern-beeld, .kern-kolom:hover .kern-masker, .kern-kolom:focus-within .kern-beeld, .kern-kolom:focus-within .kern-masker { transform: none; }
  .kern-kolom:hover .kern-masker img, .kern-kolom:focus-within .kern-masker img { transform: none; }
  .kern-tekst, .kern-tekst .kop-m { transition: color .6s var(--rustig); }
  .kolom-box:hover .kern-tekst, .kolom-box:focus-within .kern-tekst, .kolom-prem:hover .kern-tekst, .kolom-prem:focus-within .kern-tekst { color: var(--wit); }
  /* babynest: alleen het kleine bestand (324 x 436); een ingelijste foto boven de tekst op diep mauve, de tekst blijft inkt.
     De lijst staat absoluut boven het tekstblok en neemt geen ruimte in; bij aanwijzen schuift het tekstblok (transform,
     dus zonder dat een kolom hoger wordt) de halve lijsthoogte omlaag. Kolom 1 en 2 blijven exact staan (controle ronde 1). */
  .kolom-nest { --nest-h: min(436px, calc(clamp(600px, 100svh, 900px) - 400px)); transition: background-color .6s var(--rustig); }
  .kolom-nest .kern-tekst { position: relative; transition: color .6s var(--rustig), transform 1s cubic-bezier(.215,.61,.355,1); }
  .nest-lijst { display: block; position: absolute; left: 0; bottom: calc(100% + 24px); height: var(--nest-h); aspect-ratio: 324 / 436; max-width: 100%; overflow: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 1s cubic-bezier(.215,.61,.355,1); }
  .nest-lijst img { transform: scale(1.3); transition: transform 1s cubic-bezier(.215,.61,.355,1); }
  .kolom-nest:hover, .kolom-nest:focus-within { background-color: #AE8C94; }
  .kolom-nest:hover .kern-tekst, .kolom-nest:focus-within .kern-tekst { transform: translateY(calc((var(--nest-h) + 24px) / 2)); }
  .kolom-nest:hover .nest-lijst, .kolom-nest:focus-within .nest-lijst { clip-path: inset(0); }
  .kolom-nest:hover .nest-lijst img, .kolom-nest:focus-within .nest-lijst img { transform: none; }
}
/* Touch (tablet en mobiel) en smalle schermen: foto boven de tekst, alles altijd zichtbaar */
@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .kern-kolom { justify-content: flex-start; padding: calc(var(--ritme) + 48px) 24px var(--ritme); }
  .kern-beeld { display: block; position: relative; overflow: hidden; margin-bottom: 28px; aspect-ratio: 4 / 5; }
  .kern-masker { position: absolute; inset: 0; }
  .nest-lijst { display: block; width: min(100%, 324px); aspect-ratio: 324 / 436; margin-bottom: 8px; }
  .kern-tekst .kop-m { font-size: 34px; }
}
@media (max-width: 760px) {
  .kern-label { position: static; padding: var(--ritme) var(--rand) 0; }
  .kern-kolommen { grid-template-columns: minmax(0, 1fr); }
  .kern-kolom { padding: 40px var(--rand) 48px; }
  .kolom-box { padding-top: 32px; }
  .kern-kolom:nth-child(2)::before, .kern-kolom:nth-child(2)::after { display: none; }
  .kern-beeld { aspect-ratio: 4 / 3; margin-bottom: 24px; }
  .nest-lijst { align-self: center; margin-bottom: 16px; }
  .kern-tekst { width: 100%; }
  .kern-tekst .kop-m { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .achtergrond, .achtergrond.traag, .js .hero-kleur, .js .balk { transition: none; } /* laag, bovenkant en balk wisselen direct (stond hier vóór het drieluik) */
  .kern-beeld, .kern-masker, .kern-masker img, .kern-tekst, .kern-tekst .kop-m, .kolom-nest, .nest-lijst, .nest-lijst img { transition: none !important; }
}

/* =====================================================================
   002 Portfolio: vijf sferen (naar de portfoliolijst van Stock)
   Met een muis (en JavaScript) de lijst; op touch en zonder JavaScript kaarten.
   ===================================================================== */
.sferen { display: none; }
@media (hover: hover) and (pointer: fine) {
  .js .hoverlijst.sferen { display: block; }
  .js .kaarten.sfeer-kaarten { display: none; }
}
/* het vak is zo breed als het ontwerpvak (max. 1440 px), zodat de foto's op
   25% en 58% van de sectie staan, niet van de tekstkolom */
.hoverlijst.sferen { position: relative; width: var(--B); margin-left: calc(50% - var(--B) / 2); --my: 0; }
.hoverlijst.sferen ul { position: relative; z-index: 1; }
/* bij aanwijzen (wens Carst, zoals Stock): de laag wordt een diepe tint en alle tekst wit;
   wit haalt op die tinten 3:1, dus alleen grote tekst (namen, productregel 19 px vet, 700) */
.hoverlijst.sferen button { white-space: nowrap; color: var(--inkt); opacity: 1; transition: opacity 1s var(--rustig), color 1s var(--rustig); }
.hoverlijst.sferen.actief button { color: var(--wit); opacity: .35; }
.hoverlijst.sferen.actief button.aan { opacity: 1; }
.sfeer-beelden { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1s var(--rustig); }
.hoverlijst.sferen.actief .sfeer-beelden { opacity: 1; }
.sfeer { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; } /* wisselen tussen items: crossfade 0,35 s */
.sfeer.aan { opacity: 1; }
.hoverlijst.sferen .groot, .hoverlijst.sferen .klein-beeld { display: block; position: absolute; opacity: 1; overflow: hidden; margin: 0; transform: none; transition: translate .6s cubic-bezier(.2,.7,.2,1); }
.hoverlijst.sferen .groot img, .hoverlijst.sferen .klein-beeld img { width: 100%; height: 100%; object-fit: cover; }
.hoverlijst.sferen .groot::after, .hoverlijst.sferen .klein-beeld::after { content: ""; position: absolute; inset: 0; background: rgba(60,40,30,.2); } /* warme sluier, zoals Stock */
.hoverlijst.sferen .groot::after { background: rgba(60,40,30,.28); } /* grote foto iets dieper, zodat witte namen erover beter lezen */
.hoverlijst.sferen .groot { left: 25%; top: calc(var(--B) * -.03); width: min(30%, 440px); aspect-ratio: 30 / 41.66; translate: 0 calc(var(--my) * 40px); }
.hoverlijst.sferen .klein-beeld { left: 58%; top: calc(var(--B) * .17); width: min(15%, 220px); aspect-ratio: 3 / 4; translate: 0 calc(var(--my) * 20px); }
.productregel { position: absolute; left: 58%; top: calc(var(--B) * .17 + min(var(--B) * .15, 220px) * 4 / 3 + 16px); max-width: 30%; margin: 0; font-size: 19px; font-weight: 700; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: var(--wit); translate: 0 calc(var(--my) * 20px); transition: translate .6s cubic-bezier(.2,.7,.2,1); }
/* label en pijl-link vallen terug naar 0,2 terwijl een item actief is */
.js .hoverlijst-sectie .sectie > .label, .js .hoverlijst-sectie .sectie > .pijl { transition: opacity 1s var(--rustig), color 1s var(--rustig), transform .9s cubic-bezier(.2,.7,.2,1); }
.js .hoverlijst-sectie.lijst-actief .sectie > .label, .js .hoverlijst-sectie.lijst-actief .sectie > .pijl { opacity: .2; }
.js #portfolio.lijst-actief .sectie > .label, .js #portfolio.lijst-actief .sectie > .pijl { color: var(--wit); opacity: .35; }

/* kaarten: vijf kleurvlakken met foto, sfeernaam en productregel; alleen de rij scrollt */
.kaarten.sfeer-kaarten { --kaart-rand: min(8.2vw, calc(var(--max) * .082)); display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 320px); gap: 16px; margin-inline: calc(-1 * var(--kaart-rand)); padding-inline: var(--kaart-rand); padding-bottom: 8px; scroll-padding-inline: var(--kaart-rand); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; }
@media (hover: none), (pointer: coarse) { .kaarten.sfeer-kaarten { scrollbar-width: none; padding-bottom: 0; } .kaarten.sfeer-kaarten::-webkit-scrollbar { display: none; } }
.sfeer-kaarten .kaart { background: var(--kaart-kleur, var(--grijsblauw)); padding: 12px 12px 18px; }
.sfeer-kaarten .kaart img { aspect-ratio: 4 / 5; }
.sfeer-kaarten .kaart figcaption { margin-top: 14px; font-size: inherit; }
/* kaarten in de diepe tint met witte tekst (grote tekst: naam 24 px, productregel 19 px vet, 700) */
.kaart-naam { display: block; font-family: var(--display); font-size: 24px; line-height: 1.2; color: var(--wit); }
.kaart-regel { display: block; margin-top: 6px; font-family: var(--sans); font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--wit); }
@media (max-width: 760px) { .kaarten.sfeer-kaarten { --kaart-rand: var(--rand); gap: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .hoverlijst.sferen button, .sfeer-beelden, .sfeer, .hoverlijst.sferen .groot, .hoverlijst.sferen .klein-beeld, .productregel, .balk.diep,
  .js .hoverlijst-sectie .sectie > .label, .js .hoverlijst-sectie .sectie > .pijl { transition: none; }
  .hoverlijst.sferen .groot, .hoverlijst.sferen .klein-beeld, .productregel { translate: none; }
}

/* =====================================================================
   003 Personaliseren: media-slider (naar Stock)
   Zonder JavaScript: de drie technieken onder elkaar, tekst links en foto rechts.
   ===================================================================== */
.slider-sectie { overflow: clip; } /* het draaien blijft binnen de sectie */
.slider { max-width: var(--max); margin: 0 auto; padding: var(--ritme) var(--rand) calc(var(--ritme) / 2); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px clamp(32px, 6vw, 96px); align-items: center; }
.slider-label { grid-column: 1 / -1; }
.slider-beelden, .slider-teksten { display: contents; }
.slider-tabs { display: none; }
.techniek { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; color: var(--inkt); }
.techniek .klein { max-width: 360px; }
.dia { margin: 0; width: 100%; max-width: 460px; justify-self: center; }
.dia img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.techniek[data-i="0"] { grid-row: 2; grid-column: 1; } .dia[data-i="0"] { grid-row: 2; grid-column: 2; }
.techniek[data-i="1"] { grid-row: 3; grid-column: 1; } .dia[data-i="1"] { grid-row: 3; grid-column: 2; }
.techniek[data-i="2"] { grid-row: 4; grid-column: 1; } .dia[data-i="2"] { grid-row: 4; grid-column: 2; }
@media (max-width: 760px) {
  .slider { grid-template-columns: minmax(0, 1fr); }
  .dia[data-i="0"] { grid-row: 2; grid-column: 1; } .techniek[data-i="0"] { grid-row: 3; grid-column: 1; }
  .dia[data-i="1"] { grid-row: 4; grid-column: 1; } .techniek[data-i="1"] { grid-row: 5; grid-column: 1; }
  .dia[data-i="2"] { grid-row: 6; grid-column: 1; } .techniek[data-i="2"] { grid-row: 7; grid-column: 1; }
}
/* tabbladen: kleine kapitalen in volle inkt, het actieve onderstreept (1 px, 6 px onder de letters) */
.slider-tab { font-family: var(--sans); font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: .32em; text-transform: uppercase; white-space: nowrap; color: var(--inkt); background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.slider-tab span { position: relative; display: inline-block; margin-right: -.32em; padding-right: .32em; } /* letterspatiëring na de laatste letter telt niet mee */
.slider-tab span::after { content: ""; position: absolute; left: 0; right: .32em; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.slider-tab[aria-selected="true"] span::after { transform: none; }

/* met JavaScript: één techniek tegelijk */
.js .slider-tabs { display: flex; justify-content: center; }
.js .slider-beelden { display: block; position: relative; overflow: hidden; } /* beeldvlak is een masker: oude foto schuift eruit, nieuwe draait erin */
.js .slider-teksten { display: grid; }
.js .techniek { grid-area: 1 / 1; visibility: hidden; }
.js .techniek.aan { visibility: visible; }
.js .dia { position: absolute; inset: 0; max-width: none; visibility: hidden; }
.js .dia.aan { visibility: visible; }
.js .dia img { height: 100%; aspect-ratio: auto; }
.js .techniek[data-i], .js .dia[data-i] { grid-row: auto; grid-column: auto; }
.js .techniek[data-i] { grid-area: 1 / 1; }

/* desktop (vanaf 1025 px) en tablet: label linksboven, tekst links, beeld rechts, tabbladen onderaan */
@media (min-width: 761px) {
  .js .slider-sectie { height: clamp(720px, 100svh, 1000px); }
  .js .slider { display: block; position: relative; height: 100%; width: var(--B); max-width: none; padding: 0; --tekst-links: 16.66%; --tekst-b: clamp(320px, 25%, 380px); --beeld-links: 50%; --beeld-h: min(calc(var(--u) * 44), calc(100svh - 220px)); }
  .js .slider-label { position: absolute; left: var(--rand); top: var(--ritme); }
  .js .slider-teksten { position: absolute; left: var(--tekst-links); width: var(--tekst-b); top: 50%; transform: translateY(-50%); }
  .js .slider-beelden { position: absolute; left: var(--beeld-links); top: 50%; height: var(--beeld-h); aspect-ratio: 3 / 4; transform: translateY(-50%); }
  .js .slider-tabs { position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%); gap: 48px; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .js .slider { --tekst-links: 8%; --tekst-b: 38%; --beeld-links: 52%; --beeld-h: min(calc(var(--u) * 53.333), calc(100svh - 260px)); }
}
/* mobiel: label, beeld (72%, 3:4), tabbladen in drie kolommen, kop, tekst en pijl-link */
@media (max-width: 760px) {
  .js .slider { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .js .slider-beelden { width: calc(var(--u) * 72); aspect-ratio: 3 / 4; justify-self: center; }
  .js .slider-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: calc(-1 * var(--rand) + 8px); }
  .slider-tab { font-size: 13px; letter-spacing: .12em; }
  .slider-tab span { margin-right: -.12em; padding-right: .12em; }
  .slider-tab span::after { right: .12em; }
}
@media (prefers-reduced-motion: reduce) { .slider-tab span::after { transition: none; } }

/* =====================================================================
   005 Instagram en 006 Contact: één foto met tekst (naar Stock)
   Kolommen in % van het ontwerpvak: 16,66 | 33,33 | 8,33 | 25 | 16,67
   ===================================================================== */
.insta-blok, .contact-rij, .contact-formulier { width: var(--B); margin-left: calc(50% - var(--B) / 2); }
.insta-blok { display: grid; grid-template-columns: 16.666% 33.333% 8.334% 25% 16.667%; align-items: center; }
.insta-foto { grid-column: 2; display: block; overflow: hidden; max-width: 480px; }
.insta-foto:hover { opacity: 1; }
/* 3:4 in plaats van 2:3: het bestand is 480 x 640 en wordt zo niet vergroot */
.insta-foto img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.insta-foto:hover img { transform: scale(1.04); }
.insta-tekst { grid-column: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }

/* contact: rij 1 tekst links (16,66–41,66%) en vierkante foto rechts (50–83,33%), rij 2 het formulier */
.contact-sectie { gap: 48px; }
.contact-rij { display: grid; grid-template-columns: 16.666% 25% 8.334% 33.333% 16.667%; align-items: center; }
.contact-tekst { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.contact-lijst { display: flex; flex-direction: column; align-items: flex-start; }
.contact-lijst .pijl { min-height: 44px; }
.contact-foto { grid-column: 4; width: 100%; max-width: 480px; aspect-ratio: 1; object-fit: cover; }
.contact-formulier { padding: 0 calc(var(--B) * .16667); display: flex; flex-direction: column; gap: 24px; }
.contact-formulier .formulier { max-width: 960px; margin: 0; }
.contact-inleiding { max-width: none; color: var(--inkt); }

@media (max-width: 1024px) {
  .insta-blok { grid-template-columns: 8.2% 40% 6% 37.6% 8.2%; }
  .contact-rij { grid-template-columns: 8.2% 37.6% 6% 40% 8.2%; }
  .contact-formulier { padding: 0 calc(var(--B) * .082); }
}
/* mobiel: alles in één kolom binnen de rand; bij contact eerst de foto (3:2) */
@media (max-width: 760px) {
  .insta-blok, .contact-rij, .contact-formulier { width: auto; margin-left: 0; }
  .insta-blok { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .insta-foto, .insta-tekst { grid-column: 1; max-width: none; }
  .contact-sectie { gap: 32px; }
  .contact-rij { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .contact-tekst { grid-column: 1; gap: 24px; }
  .contact-foto { grid-column: 1; grid-row: 1; max-width: none; aspect-ratio: 3 / 2; }
  .contact-formulier { padding: 0; }
}
@media (prefers-reduced-motion: reduce) { .insta-foto img { transition: none; } }

/* tot en met 1279 px alleen de burger, zodat de zes links nooit over twee regels lopen (gemeten: vanaf 1280 px passen ze naast het logo) */
@media (min-width: 761px) and (max-width: 1279px) {
  .js .site-header .menu { display: none; }
}
/* kraamcadeaubox op mobiel: geen wisselrij, dus de onderste rij foto's sluit dichter aan */
@media (max-width: 760px) {
  .hero:not([data-wissel]) { height: 680px; }
  .hero:not([data-wissel]) .t4 { top: 62%; }
  .hero:not([data-wissel]) .t5 { top: 65%; }
  .hero:not([data-wissel]) .t6 { top: 64%; }
}

/* desktop en tablet: de header ligt los over de hero en blijft doorzichtig, zodat alleen de hero
   van kleur wisselt (anders schuiven twee overgangen over elkaar en zie je een band) */
@media (min-width: 761px) {
  .js .site-header.hero-kleur { background-color: transparent !important; }
}

/* =====================================================================
   Navigatie met losse pagina's (Producten, Kraamcadeaubox, Over, Contact)
   naar de pagina's van stockdutchdesign.com (/media, /projecten, /over-ons, /contact)
   ===================================================================== */

/* ---------- Menu over het hele scherm: subitems onder de hoofditems ---------- */
.menu-sub { list-style: none; margin: 2px 0 14px; padding: 0 0 0 24px; opacity: 0; transition: opacity .6s .35s ease; }
.menu-scherm.open .menu-sub { opacity: 1; }
.menu-nav .menu-sub li { overflow: visible; }
.menu-nav .menu-sub a { display: inline-block; font-family: var(--serif); font-size: 16px; line-height: 1.5; padding: 3px 0; transform: none; }
@media (max-width: 760px) {
  .menu-sub { display: none; } /* mobiel: alleen de hoofditems; de pagina's hebben zelf ankers */
  .menu-nav > ul > li > a { font-size: 36px; }
  .menu-binnen { gap: 32px; }
}
@media (prefers-reduced-motion: reduce) { .menu-sub { transition: none; } }


/* ---------- Paginakop (Producten, Kraamcadeaubox): terracotta, links op 8,33%, max. 50% breed ---------- */
.pagina-kop { padding: clamp(140px, calc(var(--u) * 12), 180px) 0 calc(var(--u) * 6); } /* lager: de voorbeeldfoto komt op desktop sneller in beeld (wens Carst) */
.pagina-kop-binnen { width: var(--B); margin-left: calc(50% - var(--B) / 2); padding-left: calc(var(--B) * .0833); display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.pagina-kop-binnen > * { max-width: calc(var(--B) * .5); }
.pagina-kop h1 { margin: 0; }
.pagina-kop .caps { margin: 0; }
.pagina-quote { margin: 0; font-size: clamp(32px, 3.6vw, 52px); }
.pagina-quote p { margin: 0; }
.pagina-prijs { margin: 0; font-size: 16px; line-height: 1.5; }
.pagina-links { display: flex; flex-wrap: wrap; gap: 0 40px; margin-top: -8px; }
@media (max-width: 760px) {
  .pagina-kop { padding: 48px 0 var(--ritme); }
  .pagina-kop-binnen { width: auto; margin-left: 0; padding: 0 var(--rand); gap: 22px; }
  .pagina-kop-binnen > * { max-width: none; }
  .pagina-kop .quote { font-size: 28px; }
  .pagina-links { flex-direction: column; margin-top: -4px; }
}

/* ---------- Producten: vijf categorieën om en om, de laag kleurt per categorie ----------
   Kolommen in % van het ontwerpvak: 16,666 | 25 | 8,334 | 33,333 | 16,667 (gespiegeld omgekeerd).
   Alle tekst is inkt (de categoriekleuren zijn licht). */
/* ongeveer één scherm hoog, zodat de laag de kleur houdt zolang de categorie in beeld is */
.categorie { padding: var(--ritme) 0; }
@media (min-width: 1025px) { .categorie { min-height: min(100svh, 1000px); display: flex; flex-direction: column; justify-content: center; } }
/* babynest: de kleine foto (324 px) vult geen scherm; het blok wordt zo hoog als de inhoud (compact, geen leeg vlak) */
@media (min-width: 1025px) { .categorie:has(.klein-bestand) { min-height: 0; } }
/* homepage: productblokken zo hoog als de inhoud, foto tot foto max. ca. 160 px (ontwerpgate homepage, P1: minder scrollen) */
.categorie.compact { padding: max(32px, calc(var(--ritme) * .5)) 0; }
@media (min-width: 1025px) { .categorie.compact { min-height: 0; } }
.categorie-rij { width: var(--B); margin-left: calc(50% - var(--B) / 2); display: grid; grid-template-columns: 16.666% 25% 8.334% 33.333% 16.667%; grid-template-rows: 1fr auto auto 1fr; }
.categorie-label { grid-column: 2; grid-row: 2; margin-bottom: 32px; }
.categorie-tekst { grid-column: 2; grid-row: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.categorie-tekst .klein { max-width: 360px; }
.categorie-foto { grid-column: 4; grid-row: 1 / 5; width: 100%; max-width: 480px; }
.categorie-foto img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.categorie-foto.klein-bestand { max-width: 324px; justify-self: center; align-self: center; } /* babynest: alleen de kleine Instagram-versie, midden in het blok */
.categorie.gespiegeld .categorie-rij { grid-template-columns: 16.667% 33.333% 8.334% 25% 16.666%; }
.categorie.gespiegeld .categorie-label, .categorie.gespiegeld .categorie-tekst { grid-column: 4; }
.categorie.gespiegeld .categorie-foto { grid-column: 2; }
.kop-cat { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(40px, 4.6vw, 66px); line-height: 1.02; }
@media (min-width: 761px) and (max-width: 1024px) {
  .categorie-rij { grid-template-columns: 8% 40% 0 44% 8%; }
  .categorie.gespiegeld .categorie-rij { grid-template-columns: 8% 44% 0 40% 8%; }
  .categorie-label, .categorie-tekst { padding-right: 24px; }
  .categorie.gespiegeld .categorie-label, .categorie.gespiegeld .categorie-tekst { padding: 0 0 0 32px; }
}
@media (max-width: 760px) {
  .categorie { padding: var(--ritme) 0 0; }
  .categorie:last-of-type { padding-bottom: var(--ritme); }
  .categorie-rij, .categorie.gespiegeld .categorie-rij { width: auto; margin-left: 0; padding: 0 var(--rand); grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 24px; }
  .categorie-label, .categorie-tekst, .categorie-foto, .categorie.gespiegeld .categorie-label, .categorie.gespiegeld .categorie-tekst, .categorie.gespiegeld .categorie-foto { grid-column: 1; grid-row: auto; }
  .categorie-label { margin-bottom: 0; }
  .categorie-foto { max-width: none; }
  .categorie-tekst { gap: 20px; }
  .kop-cat { font-size: 40px; }
}

/* ---------- Kraamcadeaubox: negen thema's in het ritme van Stock /projecten ----------
   Foto 58,33% breed (840 x 480 op 1440), lopende regel met de themanaam erachter. */
.thema { overflow-x: clip; padding-bottom: calc(var(--u) * 10.41); }
.thema-vak { position: relative; width: var(--B); margin-left: calc(50% - var(--B) / 2); --l: 33.333%; --r: 8.333%; }
.ritme-2 .thema-vak, .ritme-4 .thema-vak { --l: 8.333%; --r: 33.333%; }
.ritme-3 .thema-vak { --l: 25%; --r: 16.667%; }
.thema-label { padding: var(--ritme) 0 calc(var(--u) * 6.94) var(--rand); }
.thema-beeld { position: relative; }
.thema-lopend { position: absolute; left: 0; right: 0; top: calc(var(--u) * 19); z-index: 0; opacity: .2; }
.thema .lopend-spoor { font-size: clamp(64px, 9vw, 140px); color: var(--inkt); }
.js .thema .lopend-spoor { animation-duration: 30s; } /* een halve spoorbreedte in 30 s */
.thema-foto { position: relative; z-index: 1; margin: 0 var(--r) 0 var(--l); aspect-ratio: 58.333 / 33.333; overflow: hidden; }
/* parallax binnen de foto: 120% hoog, main.js schuift hem hooguit 8% op of neer (zonder JS: midden) */
.thema-foto img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; transform: translate3d(0, var(--parallax, 0px), 0); }
.thema-onder { position: relative; z-index: 1; margin: calc(var(--u) * 3.47) var(--r) 0 var(--l); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 32px; }
.thema-slot { margin: calc(var(--u) * 10.41) auto 0; text-align: center; padding: 0 var(--rand); }
@media (min-width: 761px) and (max-width: 1024px) {
  .thema-vak, .ritme-2 .thema-vak, .ritme-3 .thema-vak, .ritme-4 .thema-vak { --l: 8%; --r: 16%; }
  .mobiel-rechts .thema-vak { --l: 16%; --r: 8%; }
  .thema .lopend-spoor { font-size: 80px; }
}
@media (max-width: 760px) {
  .thema { padding-bottom: 56px; }
  .thema-label { padding-bottom: 32px; }
  .thema-foto { width: calc((100% - 2 * var(--rand)) * .82); margin: 0 0 0 var(--rand); aspect-ratio: 4 / 3; }
  .mobiel-rechts .thema-foto { margin: 0 var(--rand) 0 auto; }
  .thema-foto img { top: 0; height: 100%; transform: none; } /* geen parallax op mobiel */
  .thema-lopend { top: calc((100% - 2 * var(--rand)) * .82 * .375 - 31px); }
  .thema .lopend-spoor { font-size: 56px; }
  .thema-onder { margin: 24px var(--rand) 0; flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---------- Over: kop met foto in het midden (zoals Stock /over-ons) ---------- */
.over-kop-vak { position: relative; width: var(--B); margin-left: calc(50% - var(--B) / 2); height: min(calc(var(--u) * 83.33), 1100px); }
.over-kop-foto { position: absolute; left: 33.333%; width: 33.333%; top: calc(var(--u) * 13.89); height: calc(var(--u) * 50); overflow: hidden; }
.over-kop-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 35% 50%; filter: brightness(.85); }
/* sluier: de foto heeft lichte ramen; met deze sluier haalt de witte kop erover minstens 3:1 */
.over-kop-foto::after { content: ""; position: absolute; inset: 0; background: rgba(32,32,32,.4); }
.over-kop-tekst { position: relative; z-index: 2; padding: calc(var(--u) * 40) 16.667% 0 8.333%; /* kop onder het gezicht van Carien (ontwerpgate, kan beter 3) */ display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.over-kop-tekst h1 { margin: 0; color: var(--inkt); } /* klein label op terracotta: inkt (5,2:1); wit haalt daar geen 4,5:1 */
.over-kop .kop-xl { font-size: clamp(40px, 6.11vw, 88px); line-height: .98; }
.over-kop .badge { left: auto; top: auto; right: 12.5%; bottom: calc(var(--u) * 12.5); }
@media (max-width: 760px) {
  .over-kop-vak { width: auto; margin-left: 0; height: auto; padding: 32px var(--rand) var(--ritme); display: flex; flex-direction: column; }
  .over-kop-foto { position: relative; left: auto; top: auto; width: 72vw; height: auto; aspect-ratio: 3 / 4; align-self: center; }
  .over-kop-foto img { height: 100%; filter: none; } /* geen tekst over de foto op mobiel: geen sluier, Carien warm in beeld */
  .over-kop-foto::after { display: none; }
  .over-kop-tekst { padding: 32px 0 0; }
  .over-kop .kop-xl { font-size: 40px; line-height: 1; }
  .over-kop .badge { right: 4%; bottom: auto; top: calc(32px + 96vw - 52px); width: 64px; }
}

/* ---------- Over 001: het verhaal en een fotorij die je kunt vegen ---------- */
.atelier { padding: var(--ritme) 0; }
.atelier-vak { width: var(--B); margin-left: calc(50% - var(--B) / 2); display: grid; grid-template-columns: 8.333% 33.333% 8.334% 50%; row-gap: 56px; align-items: center; }
.atelier-label { grid-column: 2 / -1; grid-row: 1; }
.atelier-tekst { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 36px; }
.verhaal { margin: 0; font-size: 18px; line-height: 1.7; max-width: 60ch; }
.atelier .quote { color: var(--inkt); }
.fotorij { grid-column: 4; grid-row: 2; display: grid; grid-auto-flow: column; grid-auto-columns: 360px; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 10px; }
.fotorij:focus-visible { outline-offset: -2px; }
.fotorij-item { margin: 0; scroll-snap-align: start; min-width: 0; }
.fotorij-item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 1024px) {
  .atelier-vak { width: auto; margin-left: 0; padding-left: var(--rand); grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .atelier-label, .atelier-tekst, .fotorij { grid-column: 1; grid-row: auto; }
  .atelier-tekst { padding-right: var(--rand); }
  .fotorij { grid-auto-columns: 300px; scroll-padding-inline: 0; }
}
@media (max-width: 760px) {
  .fotorij { grid-auto-columns: 72vw; gap: 12px; }
  .verhaal { font-size: 17px; }
}

/* ---------- Over 002: Hoe ik werk ----------
   Mobiel en zonder JavaScript: foto als band (3:2) en de drie stappen onder elkaar op terracotta.
   Met JavaScript vanaf 761 px: donkere foto over de volle hoogte, links een menu, rechts de actieve stap. */
.hoe-foto { position: relative; max-width: 1800px; margin: 0 auto; }
.hoe-foto img { width: 100%; aspect-ratio: 3 / 2; max-height: 900px; object-fit: cover; }
.hoe-vak { max-width: var(--max); margin: 0 auto; padding: var(--ritme) var(--rand) calc(var(--ritme) / 2); display: flex; flex-direction: column; gap: 48px; }
.hoe-tabs[hidden] { display: none; }
.hoe:not(.tabs-aan) .hoe-stappen { display: flex; flex-direction: column; gap: 48px; } /* onder elkaar: ruimte tussen de stappen */
.hoe-stap { display: flex; flex-direction: column; gap: 14px; }
.hoe-stap .kop-xl { font-size: 36px; line-height: 1.05; }
.hoe-nr { display: block; margin-bottom: 10px; font-family: var(--serif); font-size: 16px; color: var(--inkt); }
.hoe-zin, .hoe-copy { margin: 0; font-size: 18px; line-height: 1.6; max-width: 60ch; }
.hoe-tab { display: flex; align-items: center; gap: 0; min-height: 44px; padding: 6px 0; font-family: var(--serif); font-size: 24px; line-height: 1.3; text-align: left; color: var(--wit); background: none; border: 0; cursor: pointer; opacity: .6; transition: opacity .3s ease; -webkit-tap-highlight-color: transparent; }
.hoe-tab .nr { margin-right: 12px; }
.hoe-tab::before { content: ""; flex: none; width: 0; height: 1px; margin-right: 0; background: currentColor; transition: width .4s cubic-bezier(.2,.7,.2,1), margin .4s cubic-bezier(.2,.7,.2,1); }
.hoe-tab[aria-selected="true"] { opacity: 1; }
.hoe-tab[aria-selected="true"]::before { width: 24px; margin-right: 14px; }
@media (min-width: 761px) {
  .hoe.tabs-aan { position: relative; height: clamp(680px, 100svh, 900px); overflow: hidden; } /* max. 900 px: de foto (1800 x 900) wordt nooit vergroot */
  .hoe.tabs-aan .hoe-foto { position: absolute; inset: 0; }
  .hoe.tabs-aan .hoe-foto img { height: 100%; aspect-ratio: auto; max-height: none; }
  .hoe.tabs-aan .hoe-foto::after { content: ""; position: absolute; inset: 0; background: rgba(32,32,32,.62); } /* 62% inkt: witte tekst van 18 px haalt 4,5:1, ook boven de witte machine */
  .hoe.tabs-aan .hoe-vak { position: relative; z-index: 1; height: 100%; max-width: none; width: var(--B); margin-left: calc(50% - var(--B) / 2); padding: 0; display: grid; grid-template-columns: 8.333% 25% 8.333% 50% 8.334%; align-items: center; gap: 0; color: var(--wit); }
  .hoe.tabs-aan .hoe-label { position: absolute; left: 8.333%; top: var(--ritme); color: var(--wit); }
  .hoe.tabs-aan .hoe-tabs { grid-column: 2; display: flex; flex-direction: column; gap: 10px; }
  .hoe.tabs-aan .hoe-stappen { grid-column: 4; display: grid; }
  .hoe.tabs-aan .hoe-stap { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; }
  .hoe.tabs-aan .hoe-stap.aan { opacity: 1; visibility: visible; transition: opacity .4s ease; }
  .hoe.tabs-aan .hoe-stap .kop-xl { font-size: clamp(48px, 6.11vw, 88px); line-height: .98; margin-bottom: 14px; }
  .hoe.tabs-aan .hoe-nr { display: none; }
  .hoe.tabs-aan .hoe-zin, .hoe.tabs-aan .hoe-copy { color: var(--wit); }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .hoe.tabs-aan .hoe-vak { grid-template-columns: 8% 34% 4% 46% 8%; } /* tabs van 24 px passen naast de tekst */
  .hoe-tab { font-size: 24px; } /* 24 px: telt als grote tekst, zodat de niet-actieve tabs (0,6) de 3:1 halen (ontwerpgate, punt 2) */
}
@media (prefers-reduced-motion: reduce) { .hoe-tab, .hoe-tab::before, .hoe.tabs-aan .hoe-stap, .hoe.tabs-aan .hoe-stap.aan { transition: none; } }

/* lopende regel boven het contactblok (Over) */
#contact > .lopend-los { padding: var(--ritme) 0 0; }

/* ---------- Contact: fotokop over de volle hoogte (zoals Stock /contact) ---------- */
.contact-kop { position: relative; z-index: 1; height: clamp(640px, 100svh, 1000px); display: flex; align-items: center; background: #000; color: var(--wit); }
.contact-kop-foto { position: absolute; inset: 0; overflow: hidden; }
.contact-kop-foto img { width: 100%; height: 100%; object-fit: cover; opacity: .6; transform: translate3d(0, var(--parallax, 0px), 0); }
/* extra sluier links (onder de tekst) en boven (onder de navigatie): de foto heeft lichte stof en een lichte wand */
.contact-kop-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.5) 0, rgba(0,0,0,0) 200px), linear-gradient(90deg, rgba(0,0,0,.45) 0, rgba(0,0,0,.45) 58%, rgba(0,0,0,0) 85%); }
.contact-kop-tekst { position: relative; z-index: 2; width: var(--B); margin-left: calc(50% - var(--B) / 2); padding: 64px 0 0 8.333%; display: flex; flex-direction: column; align-items: flex-start; }
.contact-kop-tekst > * { max-width: calc(var(--B) * .5); }
.contact-kop h1 { margin: 0 0 24px; }
.contact-kop .kop-xl { font-size: clamp(44px, 6.11vw, 88px); line-height: .98; color: var(--wit); }
.contact-kop-links { display: flex; flex-wrap: wrap; gap: 0 40px; margin-top: 40px; }
.contact-kop-links .pijl { font-size: 17px; color: var(--wit); }
/* badge half over de rand (zoals Stock), met een terracotta vlak zodat hij op de foto en op wit zichtbaar is */
.contact-kop .badge { left: 75%; top: auto; bottom: calc(var(--u) * -4); z-index: 3; color: var(--inkt); background: var(--terracotta); border-radius: 50%; }
@media (max-width: 760px) {
  .contact-kop { height: 88svh; min-height: 560px; }
  .contact-kop-foto::after { background: rgba(0,0,0,.45); }
  .contact-kop-tekst { width: auto; margin-left: 0; padding: 0 var(--rand); }
  .contact-kop-tekst > * { max-width: none; }
  .contact-kop .kop-xl { font-size: 44px; }
  .contact-kop-links { flex-direction: column; margin-top: 28px; }
  .contact-kop .badge { left: auto; right: var(--rand); bottom: -35px; }
}

/* ---------- Contact 001: gegevens in drie kolommen ---------- */
.gegevens { padding: max(56px, calc(var(--u) * 10.41)) 0 max(48px, calc(var(--u) * 6.94)); }
.gegevens .wrap { display: flex; flex-direction: column; gap: 48px; }
.gegevens-kolommen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(32px, 4vw, 64px); }
.gegevens-kop { margin: 0 0 14px; font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.3; }
.gegevens-kolom p, .gegevens-kolom address { margin: 0 0 12px; font-size: 17px; line-height: 1.7; font-style: normal; }
.gegevens .pijl { font-size: 17px; }
@media (min-width: 761px) { .gegevens { min-height: min(88svh, 820px); } } /* zo blijft de laag wit zolang de gegevens in beeld zijn */
@media (max-width: 1024px) { .gegevens-kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* tablet: e-mailadres past (ontwerpgate ronde 2) */
.gegevens-kolommen a { overflow-wrap: anywhere; }
@media (max-width: 760px) { .gegevens-kolommen { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

/* ---------- Contact 002: het formulier ---------- */
.formulier-sectie .contact-sectie { padding-bottom: var(--ritme); }

/* =====================================================================
   Navigatie: Werkwijze · Kraamcadeauboxen · Prematuurkleding · Babynest · Inspiratie · Contact
   ===================================================================== */

/* header: zes links op één regel naast het logo, vanaf 1280 px (daaronder de burger); het logo krimpt nooit */
.site-header .logo { flex: none; }
@media (min-width: 1280px) {
  .js .site-header .wrap { flex-wrap: nowrap; }
  .js .site-header .menu { flex-wrap: nowrap; white-space: nowrap; gap: 0 clamp(18px, 1.9vw, 30px); letter-spacing: clamp(.16em, .02em + .9vw, .3em); }
}

/* menu over het hele scherm: subitems 24 px ingesprongen (.menu-nav ul zette de inspringing op 0) */
.menu-nav .menu-sub { padding-left: 24px; }
/* zes hoofditems met elf subitems passen op 1440 x 900 zonder scrollen */
@media (min-width: 761px) {
  .menu-nav > ul > li > a { font-size: clamp(36px, 3.6vw, 52px); }
  .menu-sub { margin: 0 0 10px; }
  .menu-nav .menu-sub a { padding: 2px 0; }
  .menu-binnen { padding-top: 96px; padding-bottom: 40px; }
}

/* homepage 003: "Bekijk het portfolio" en "Laat iets voor jou maken" naast elkaar (mobiel onder elkaar) */
.pijl-rij { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 40px; }
.js .hoverlijst-sectie .sectie > .pijl-rij { transition: opacity 1s var(--rustig), color 1s var(--rustig); }
.js .hoverlijst-sectie.lijst-actief .sectie > .pijl-rij { opacity: .2; }
.js #portfolio.lijst-actief .sectie > .pijl-rij { color: var(--wit); opacity: .35; }
@media (max-width: 760px) { .pijl-rij { flex-direction: column; align-items: flex-start; align-self: flex-start; } }
@media (prefers-reduced-motion: reduce) { .js .hoverlijst-sectie .sectie > .pijl-rij { transition: none; } }

/* ---------- Werkwijze 004: Wat ik maak (compact, op grijsblauw) ----------
   Vijf rijen: kleine foto (max. 240 px, nooit groter dan het bestand) en tekst; mobiel foto 96 px links. */
.maak-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px clamp(32px, 5vw, 80px); }
.maak-rij { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0 32px; align-items: start; scroll-margin-top: 84px; }
/* breedte uit het width-attribuut (bestand), begrensd op de kolom: ruimte staat vast vóór het laden (geen CLS) */
.maak-rij img { max-width: 100%; height: auto; }
.maak-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.maak-kop { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 2.4vw, 36px); line-height: 1.1; }
.maak-tekst .klein { max-width: 360px; }
@media (max-width: 1024px) {
  .maak-lijst { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .maak-rij { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .maak-lijst { gap: 40px; }
  .maak-rij { grid-template-columns: 96px minmax(0, 1fr); gap: 0 18px; }
  .maak-kop { font-size: 26px; }
  .maak-tekst { gap: 10px; }
}

/* ---------- Portfolio: vier groepen in metselwerk ----------
   Kolommen met CSS columns: 4 vanaf 1025 px, 3 op tablet, 2 op mobiel. Elke foto houdt zijn eigen
   verhouding en wordt nooit breder getoond dan het bestand (width-attribuut, max. 100%). */
.portfolio-links .pijl { min-height: 44px; }
.portfolio-groep .sectie { gap: 40px; }
.groep-kop { color: var(--inkt); }
.werken { columns: 4; column-gap: 32px; }
.werk { margin: 0 0 32px; break-inside: avoid; display: flex; flex-direction: column; align-items: flex-start; }
.werk-beeld { position: relative; display: block; max-width: 100%; }
.werk-beeld img { max-width: 100%; height: auto; } /* breedte = width-attribuut (het bestand), nooit breder; vaste ruimte vóór het laden */
.werk figcaption { margin-top: 12px; font-family: var(--display); font-size: 24px; line-height: 1.2; color: var(--inkt); }
@media (max-width: 1024px) { .werken { columns: 3; column-gap: 24px; } .werk { margin-bottom: 24px; } }
@media (max-width: 760px) {
  .werken { columns: 2; column-gap: 12px; }
  .werk { margin-bottom: 20px; }
  .werk figcaption { margin-top: 8px; font-size: 20px; }
  .portfolio-groep .sectie { gap: 32px; }
}
/* bij aanwijzen (alleen met een muis): de laag wordt de diepe tint van de groep (main.js), groepskop en het
   aangewezen bijschrift worden wit, de andere bijschriften wit op 0,35 en de andere foto's krijgen een
   warme sluier van 20%. Label en pijl-links blijven inkt (5,4:1; wit haalt daar maar 3:1). */
@media (hover: hover) and (pointer: fine) {
  .js .portfolio-groep .groep-kop, .js .portfolio-groep .werk figcaption { transition: color 1s var(--rustig), opacity 1s var(--rustig); }
  .js .werk-beeld::after { content: ""; position: absolute; inset: 0; background: rgba(60,40,30,.2); opacity: 0; pointer-events: none; transition: opacity 1s var(--rustig); }
  .js .portfolio-groep.aangewezen .groep-kop { color: var(--wit); }
  .js .portfolio-groep.aangewezen .werk figcaption { color: var(--wit); opacity: .35; }
  .js .portfolio-groep.aangewezen .werk.aan figcaption { opacity: 1; }
  .js .portfolio-groep.aangewezen .werk:not(.aan) .werk-beeld::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .js .portfolio-groep .groep-kop, .js .portfolio-groep .werk figcaption, .js .werk-beeld::after { transition: none; }
}

/* Touch: tikdoelen in het menu minimaal 44 px (ontwerpgate navigatie v2, P1) */
@media (pointer: coarse) {
  .menu-nav > ul > li > a { min-height: 44px; }
  .menu-nav .menu-sub a { padding: 8px 0; min-height: 44px; box-sizing: border-box; }
  .menu-kolom a { display: inline-flex; align-items: center; min-height: 44px; }
  .menu-kolom { gap: 0; }
  /* ook burger, balklogo en footerlinks minimaal 44 px (brief homepage per product, criterium 4) */
  .js .burger { width: 44px; height: 44px; }
  .balk .links { min-height: 44px; }
  .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-header .logo, .site-header .menu a { min-height: 44px; }
}

/* ---------- Kraamcadeauboxen 003: thema's (zie "Kraamcadeauboxen (feedback Carst 6 nov. 14:28, F4)" onderaan) ---------- */
#themas .sectie { gap: 40px; } /* compact: label dicht bij het raster */
.themas-onder .klein { margin: 0; font-size: 16px; }

/* ---------- Homepage 006: Inspiratie in vier foto's (mobiel twee kolommen) ----------
   Foto's 3:4, nooit breder dan het bestand (kleinste bestand 675 px; kolom max. ca. 300 px). */
.inspiratie-rij { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.inspiratie-rij figure { margin: 0; }
.inspiratie-rij img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.inspiratie-rij figcaption { margin-top: 12px; font-family: var(--display); font-size: 24px; line-height: 1.2; }
#inspiratie .sectie { gap: 40px; }
@media (max-width: 760px) {
  .inspiratie-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .inspiratie-rij figcaption { font-size: 20px; margin-top: 8px; }
  #inspiratie .sectie { gap: 28px; }
}

/* ---------- Prematuurkleding en Babynest: prijsrichtlijn als eigen, compact blok ---------- */
.prijs-sectie .sectie { gap: 24px; }
.prijs-sectie .prijs { margin: 0; }
/* anker voor oude adressen (/producten#prematuur, #kraamcadeaubox): bovenaan het blok, neemt geen ruimte in */
.anker { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.categorie { position: relative; }

/* ---------- Contactformulier: eerst het onderwerp, dan alleen de groep die erbij hoort (brief 2026-11-06) ----------
   Zonder JavaScript via CSS :has; zonder :has staan alle groepen er met "Alleen bij …" in de legend.
   Alle groepsvelden zijn optioneel, dus een verborgen groep blokkeert nooit het versturen. */
.formulier .groep { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; min-inline-size: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.formulier .groep > legend, .formulier .keuzes > legend { float: left; width: 100%; padding: 0; margin: 0 0 4px; font-family: var(--serif); font-size: 16px; line-height: 1.4; }
.formulier .groep > legend { grid-column: 1 / -1; }
.formulier .keuzes > legend { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; } /* zoals de andere veldlabels */
.groep-optioneel { font-family: var(--sans); font-size: 16px; }
.formulier .keuzes { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.keuze-kaarten { clear: both; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 8px; }
/* een kaartje per formaat: het hele kaartje is het keuzerondje (tikdoel ruim 44 px) */
.formulier .keuze-kaart { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 44px; padding: 16px 16px 18px; background: rgba(255,255,255,.92); color: var(--inkt); font-size: 16px; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 1.35; cursor: pointer; }
.keuze-kaart input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.keuze-rand { position: absolute; inset: 0; border: 1px solid transparent; pointer-events: none; }
.keuze-kaart input:checked ~ .keuze-rand { border-color: var(--inkt); }
.keuze-kaart input:focus-visible ~ .keuze-rand { outline: 2px solid var(--inkt); outline-offset: 3px; }
.keuze-vink { position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; opacity: 0; }
.keuze-kaart input:checked ~ .keuze-vink { opacity: 1; }
.keuze-prijs { font-family: var(--display); font-size: 24px; line-height: 1.1; }
.keuze-regel { font-size: 16px; }
.groep-alleen { font-weight: 700; }
@supports selector(:has(a)) {
  .groep-alleen { display: none; }
  .formulier .groep { display: none; }
  .formulier:has(select[name="onderwerp"] option[value="Kraamcadeaubox"]:checked) .groep[data-groep="Kraamcadeaubox"],
  .formulier:has(select[name="onderwerp"] option[value="Prematuurkleding"]:checked) .groep[data-groep="Prematuurkleding"],
  .formulier:has(select[name="onderwerp"] option[value="Babynest"]:checked) .groep[data-groep="Babynest"] { display: grid; }
  .js .formulier .groep { animation: groep-in .3s ease both; } /* vervaagt in bij het tonen; zonder JavaScript direct */
}
@keyframes groep-in { from { opacity: 0; } }
@media (max-width: 760px) {
  .formulier .groep { grid-template-columns: minmax(0, 1fr); }
  .keuze-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .formulier .groep { animation: none !important; } }

/* ---------- Kraamcadeauboxen: wat er in de box kan (zeven producten) en de stoffen (brief 2026-11-06) ----------
   Desktop: zeven tegels naast elkaar; tablet en mobiel een veegbare rij tot de schermrand.
   De stoffen: één horizontale rij, tegels 200 px (mobiel 128 px), nooit groter dan het bestand (240 px). */
.producten-kop { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.3; }
.formaten-blok .producten-kop { margin-top: 24px; }
.producten { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; }
.producten:focus-visible, .stoffen:focus-visible { outline-offset: 4px; }
.product { margin: 0; min-width: 0; }
.product img, .product-tekening { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.product-tekening { display: flex; align-items: center; justify-content: center; background: var(--grijsblauw); color: var(--inkt); }
.product-tekening svg { width: 58%; height: auto; }
.product-naam { margin: 12px 0 0; font-family: var(--display); font-size: 20px; line-height: 1.15; }
.product-regel { margin: 4px 0 0; font-size: 16px; line-height: 1.4; }
.stoffen { --stof: 200px; margin-right: calc(50% - 50cqw); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 10px; }
.stoffen ul { list-style: none; margin: 0; padding: 0 var(--rand) 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: var(--stof); gap: 16px; width: max-content; }
.stof { margin: 0; scroll-snap-align: start; }
.stof img { width: var(--stof); height: var(--stof); max-width: 240px; object-fit: cover; }
.stof-naam { margin: 10px 0 0; font-family: var(--serif); font-size: 16px; line-height: 1.3; }
@media (hover: none), (pointer: coarse) { .stoffen, .producten { scrollbar-width: none; } .stoffen::-webkit-scrollbar, .producten::-webkit-scrollbar { display: none; } }
@media (max-width: 1024px) {
  .producten { --product: 160px; display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: var(--product); gap: 12px; width: auto; align-self: stretch; margin-right: calc(50% - 50cqw); padding-right: var(--rand); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .product { scroll-snap-align: start; }
}
@media (max-width: 760px) {
  .producten { --product: 136px; }
  .product-naam { font-size: 20px; }
  .stoffen { --stof: 128px; }
  .stoffen ul { gap: 12px; }
}

/* ---------- Homepage 002 Technieken: de namen zijn links (zelfde opmaak als de knoppen in de hoverlijst) ---------- */
.hoverlijst-sectie { position: relative; }
.hoverlijst.sferen ul a { display: inline-block; font-family: var(--display); font-size: clamp(30px, 5.2vw, 76px); line-height: 1.18; letter-spacing: -.015em; text-decoration: none; white-space: nowrap; padding: 0 8px; color: var(--inkt); opacity: 1; transition: opacity 1s var(--rustig), color 1s var(--rustig); }
.hoverlijst.sferen ul a:hover { opacity: 1; }
.hoverlijst.sferen.actief ul a { color: var(--wit); opacity: .35; }
.hoverlijst.sferen.actief ul a.aan { opacity: 1; }
.sfeer-kaarten a.kaart { display: block; text-decoration: none; }
.sfeer-kaarten a.kaart:hover { opacity: 1; }
.js #technieken.lijst-actief .sectie > .label, .js #technieken.lijst-actief .sectie > .pijl { color: var(--inkt); opacity: .2; }
@media (prefers-reduced-motion: reduce) { .hoverlijst.sferen ul a { transition: none; } }

/* ---------- Homepage 003 Inspiratie: één foto over de volle breedte met een donkere sluier en een witte kop ---------- */
.inspiratie-blok { min-height: clamp(560px, 100svh, 900px); overflow: hidden; }
/* 52% inkt, links een verloop naar 60% onder de tekst (wit haalt daar 4,5:1, ook op de lichte doos) */
.inspiratie-blok.statement::before { background: linear-gradient(90deg, rgba(32,32,32,.66) 0, rgba(32,32,32,.66) 55%, rgba(32,32,32,.52) 80%); }
.inspiratie-vak { position: relative; z-index: 2; width: var(--B); margin: 0 auto; align-self: stretch; display: flex; align-items: center; padding: var(--ritme) 0 calc(var(--ritme) / 2) 16.667%; }
.inspiratie-vak > .label { position: absolute; left: var(--rand); top: var(--ritme); color: var(--wit); }
.inspiratie-blok .inhoud { position: relative; max-width: 50%; display: flex; flex-direction: column; gap: 32px; }
.inspiratie-kop { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(36px, 4.5vw, 65px); line-height: 1.15; color: var(--wit); }
.inspiratie-blok .pijl-rij { justify-content: flex-start; }
.inspiratie-blok .pijl { font-size: 17px; color: var(--wit); }
@media (max-width: 1024px) { .inspiratie-blok .inhoud { max-width: 70%; } }
@media (max-width: 760px) {
  .inspiratie-blok { align-items: stretch; }
  .inspiratie-blok.statement::before { background: linear-gradient(180deg, rgba(32,32,32,.52) 0, rgba(32,32,32,.52) 35%, rgba(32,32,32,.68) 60%); }
  .inspiratie-vak { width: auto; align-items: flex-end; padding: 0 var(--rand) 48px; }
  .inspiratie-blok .inhoud { max-width: none; gap: 24px; }
  .inspiratie-kop { font-size: 36px; }
  .inspiratie-vak > .label { top: var(--ritme); }
}

/* ---------- Hero vanaf 1025 px: posities van Stock (brief 2026-11-06, A2) ----------
   top in % van de hero-hoogte (bovenrand, geen translateY), links/rechts in % van het hero-vak,
   breedte en hoogte in --u (1% van het ontwerpvak). In rust recht; tablet en mobiel houden hun eigen indeling. */
@media (min-width: 1025px) {
  .hero .tegel { aspect-ratio: auto; }
  .hero .t2 { top: 31%; left: 11%; right: auto; width: calc(var(--u) * 23.5); height: calc(var(--u) * 33); z-index: 1; }
  .hero .t1 { top: 50%; left: 2%;  right: auto; width: calc(var(--u) * 14.5); height: calc(var(--u) * 22); z-index: 2; }
  .hero .t3 { top: 70%; left: 10%; right: auto; width: calc(var(--u) * 12);   height: calc(var(--u) * 16); z-index: 3; }
  .hero .t4 { top: 13%; left: auto; right: 24%; width: calc(var(--u) * 16.66); height: calc(var(--u) * 26); z-index: 1; }
  .hero .t5 { top: 31%; left: auto; right: 18%; width: calc(var(--u) * 14.5); height: calc(var(--u) * 22); z-index: 2; }
  .hero .t6 { top: 55%; left: auto; right: 23%; width: calc(var(--u) * 12);   height: calc(var(--u) * 16); z-index: 3; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .kern-label { transition: color .6s var(--rustig); }
  .kernwaarden:has(.kolom-box:hover, .kolom-box:focus-within) .kern-label { color: var(--wit); }
}

/* ---------- Menu: de zes links naast de burger bij aanwijzen (brief 2026-11-06, B) ----------
   Alleen met een muis en vanaf de breedte waarop de zes links tussen het logo en de burger passen (gemeten, zie
   de brief). Bovenaan staan ze vanaf 1280 px al in de header; na 100 px scrollen vervagen die één voor één.
   Bij aanwijzen of focus van de burger (of de rij) komen ze één voor één terug op de balkkleur. */
.menu-rij { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1240px) {
  .js .menu-rij { display: flex; position: fixed; z-index: 61; top: 26px; right: calc(var(--rand) + 40px); height: 40px; align-items: center; gap: 0 clamp(18px, 1.9vw, 30px); padding: 0 24px 0 16px; font-family: var(--sans); font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; color: var(--inkt); visibility: hidden; transition: visibility 0s 1.1s, color .4s ease; }
  .js .menu-rij.open { visibility: visible; transition-delay: 0s; }
  .js .menu-rij.wit { color: var(--wit); }
  .menu-rij a { position: relative; text-decoration: none; padding: 14px 0; opacity: 0; transform: translateY(5px); transition: opacity .5s ease, transform .5s ease; }
  .menu-rij a:last-child { margin-right: -.3em; } /* spatiëring na de laatste letter telt niet mee: het einde ligt 24 px links van de burger */
  .menu-rij a:hover { opacity: 1; }
  .menu-rij.open a { opacity: 1; transform: none; }
  .menu-rij a:nth-child(2) { transition-delay: .1s; } .menu-rij a:nth-child(3) { transition-delay: .2s; }
  .menu-rij a:nth-child(4) { transition-delay: .3s; } .menu-rij a:nth-child(5) { transition-delay: .4s; }
  .menu-rij a:nth-child(6) { transition-delay: .5s; }
  /* lijn van 1 px, 6 px onder de letters, groeit bij aanwijzen van links naar rechts; de huidige pagina staat vast onderstreept */
  .menu-rij a::after { content: ""; position: absolute; left: 0; right: .3em; bottom: 7px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
  .menu-rij a:hover::after, .menu-rij a:focus-visible::after, .menu-rij a[aria-current="page"]::after { transform: none; }
  html.rij-open .balk .sectie-label { opacity: 0; }
  html.menu-is-open .menu-rij { visibility: hidden; transition: none; }
}
.balk .sectie-label { transition: opacity .4s ease; }
/* headerlinks vervagen na 100 px scrollen één voor één (zoals Stock) */
.site-header .menu a { transition: opacity .5s ease, transform .5s ease; }
html.na-100 .site-header .menu a { opacity: 0; transform: translateY(5px); }
html.na-100 .site-header .menu a:nth-child(2) { transition-delay: .1s; } html.na-100 .site-header .menu a:nth-child(3) { transition-delay: .2s; }
html.na-100 .site-header .menu a:nth-child(4) { transition-delay: .3s; } html.na-100 .site-header .menu a:nth-child(5) { transition-delay: .4s; }
html.na-100 .site-header .menu a:nth-child(6) { transition-delay: .5s; }
@media (prefers-reduced-motion: reduce) {
  .menu-rij, .menu-rij a, .menu-rij a::after, .site-header .menu a, .balk .sectie-label { transition: none !important; }
}
/* terwijl de menu-rij open is, staat het logo van de balk er; het grote headerlogo wijkt (geen twee logo's onder elkaar) */
.site-header .logo { transition: opacity .3s ease; }
html.rij-open .site-header .logo { opacity: 0; }
/* balk boven de donkere fotokop van Contact (alleen bij de menu-rij): wit logo */
.balk:not(.op-kleur):not(.op-wit):not(.op-grijs) .logo-donker { display: none; }

/* ---------- Pagina-overgang zoals Stock (brief 2026-11-06, C) ----------
   Weg: een effen vlak in een willekeurige paletkleur schuift in 1 s van boven naar beneden over de pagina,
   header en main zakken 150 px (mobiel 80 px). Binnen: het vlak staat dicht (script in <head>) en schuift verder
   naar beneden weg terwijl de pagina van -150 px naar 0 komt. Geen tekst op het vlak. Noodrem na 2,5 s. */
:root { --overgang-ease: cubic-bezier(.65,0,.35,1); --overgang-y: 150px; }
@media (max-width: 760px) { :root { --overgang-y: 80px; } }
.overgang { background: var(--overgang-kleur, var(--terracotta)); transform: translateY(-100%); visibility: hidden; transition: none; }
.overgang.weg { visibility: visible; transform: none; transition: transform 1s var(--overgang-ease); }
html.overgang-weg .site-header, html.overgang-weg main { transform: translateY(var(--overgang-y)); transition: transform 1s var(--overgang-ease); }
html.overgang-binnen .overgang { visibility: visible; transform: none; animation: overgang-nood 0s 2.5s forwards; }
html.overgang-binnen .site-header, html.overgang-binnen main { transform: translateY(calc(-1 * var(--overgang-y))); }
html.overgang-binnen.binnen-loopt .overgang { transform: translateY(100%); transition: transform 1s var(--overgang-ease); }
html.overgang-binnen.binnen-loopt .site-header, html.overgang-binnen.binnen-loopt main { transform: none; transition: transform 1s var(--overgang-ease); }
@keyframes overgang-nood { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .overgang { display: none; }
  html.overgang-weg .site-header, html.overgang-weg main, html.overgang-binnen .site-header, html.overgang-binnen main { transform: none; transition: none; }
}
/* mobiel: het zakje met de naam in beeld, de tekst onderaan valt op vloeipapier en doos (niet over de knuffel) */
@media (max-width: 760px) { .inspiratie-blok > img { object-position: 36% 50% !important; } }
/* Technieken (controle ronde 1): de lijst is zo hoog dat de grote foto (incl. 40 px meebewegen), de kleine foto en de
   productregel bij aanwijzen binnen de sectie blijven (gemeten op 1025, 1280 x 720 en 1440 x 900: tot ca. 0,45 x het ontwerpvak) */
/* Ontwerpgate ronde 1 (P1): de pijl-link staat in rust direct onder de namen; de ruimte voor de foto's zit onderaan de sectie
   (lijst + tussenruimte + pijl-link + onderrand >= 0,46 x ontwerpvak + 8 px). Vier regels namen van 1,18 x de lettergrootte. */
@media (hover: hover) and (pointer: fine) {
  .js #technieken > .sectie { padding-bottom: max(calc(var(--ritme) / 2), calc(var(--B) * .46 + 8px - 4 * 1.18 * clamp(30px, 5.2vw, 76px) - clamp(56px, 8vw, 110px) - 44px)); }
  /* sterkere warme sluier onder de actieve witte naam (P1) */
  /* foto's donkerder zoals Stock (F3): groot 55%, klein 40%, warm donker; de witte actieve naam haalt minstens 3:1 */
  #technieken .hoverlijst.sferen .groot::after { background: rgba(60,40,30,.55); }
  #technieken .hoverlijst.sferen .klein-beeld::after { background: rgba(60,40,30,.55); } /* ronde 5: ook de kleine foto 55%, zodat de witte naam erop minstens 3:1 haalt */
}

/* ---------- Feedback Carst 6 nov. 14:28 (F2): geen losse witte lijn in 001 — Producten ----------
   De scheidingslijnen horen alleen tussen de kolommen, verticaal in het midden van de kolommen in rust (desktop met muis).
   Op touch staan de kolommen bovenaan uitgelijnd en liep de lijn los door foto en tekst: daar geen lijn.
   Ligt er bij aanwijzen een foto in een kolom, dan vervagen de lijnen (geen witte streep langs de foto). */
@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .kern-kolom:nth-child(2)::before, .kern-kolom:nth-child(2)::after { display: none; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .kern-kolom:nth-child(2)::before, .kern-kolom:nth-child(2)::after { transition: opacity .6s var(--rustig); }
  .kern-kolommen:has(.kolom-box:hover, .kolom-box:focus-within, .kolom-prem:hover, .kolom-prem:focus-within) .kern-kolom:nth-child(2)::before,
  .kern-kolommen:has(.kolom-box:hover, .kolom-box:focus-within, .kolom-prem:hover, .kolom-prem:focus-within) .kern-kolom:nth-child(2)::after { opacity: 0; }
  /* het label 001 kleurt even rustig mee als de kop (de opkom-overgang overschreef de kleurovergang) */
  .js .kern-label.opkomen, .js .kern-tekst .pijl.opkomen { transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), color .6s var(--rustig); transition-delay: 0s !important; }
}
/* Handwerk (002): de pijl-link "Zo personaliseert Carien" ligt boven de foto's die bij aanwijzen verschijnen */
#technieken .sectie > .pijl { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .kern-kolom:nth-child(2)::before, .kern-kolom:nth-child(2)::after { transition: none; } }

/* ---------- Kraamcadeauboxen (feedback Carst 6 nov. 14:28, F4) ----------
   001 formaten op salie, 002 producten en stoffen samen, 003 de thema's groot in sets van drie (scroll-snap per set,
   pijlknoppen met een muis, vegen op touch; mobiel één thema per keer met een stukje van de volgende). */
.in-de-box { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.in-de-box .producten-kop { margin-top: 24px; }
.in-de-box .stoffen { align-self: stretch; }
.themacarrousel { --gat: 16px; --rand-px: calc(var(--B) * .082); width: var(--B); margin-left: calc(50% - var(--B) / 2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand-px); overscroll-behavior-x: contain; scrollbar-width: none; scroll-behavior: smooth; }
.themacarrousel::-webkit-scrollbar { display: none; }
.themacarrousel:focus-visible { outline-offset: -3px; }
.themacarrousel ul { list-style: none; margin: 0; padding: 0 var(--rand-px); width: max-content; display: grid; grid-auto-flow: column; grid-auto-columns: calc((var(--B) - 2 * var(--rand-px) - 2 * var(--gat)) / 3); gap: var(--gat); }
/* ontwerpgate ronde 3: binnen de rand (eerste naam onder het label), rechts een stukje van de volgende set in beeld */
.thema-tegel { margin: 0; min-width: 0; }
.thema-tegel:nth-child(3n + 1) { scroll-snap-align: start; scroll-snap-stop: always; }
.thema-tegel figure { margin: 0; }
.thema-tegel img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.thema-tegel figcaption { margin: 14px 0 0; font-family: var(--display); font-size: clamp(24px, 2vw, 30px); line-height: 1.15; }
.themas-onder { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 40px; }
.carrousel-knoppen { display: none; gap: 8px; }
.carrousel-knop { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: none; color: var(--inkt); cursor: pointer; transition: opacity .3s ease; }
.carrousel-knop svg { width: 20px; height: 10px; }
.carrousel-knop[aria-disabled="true"] { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .js .carrousel-knoppen { display: inline-flex; } }
@media (max-width: 1024px) { .thema-tegel figcaption { font-size: 22px; } }
@media (max-width: 760px) {
  .themacarrousel { --rand-px: var(--rand); width: auto; margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand)); }
  .themacarrousel ul { grid-auto-columns: 80vw; gap: 12px; }
  .thema-tegel { scroll-snap-align: start; scroll-snap-stop: normal; }
  .thema-tegel figcaption { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .themacarrousel { scroll-behavior: auto; } }

/* Handwerk (ronde 5): de pijl-link "Zo personaliseert Carien" blijft bij aanwijzen volledig zichtbaar, in inkt op een vlak
   in de diepe tint van het item (inkt haalt daarop ruim 4,5:1), boven de foto's */
#technieken .sectie > .pijl { padding-inline: 12px; margin-inline: -12px; transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), background-color 1s var(--rustig); }
.js #technieken.lijst-actief .sectie > .pijl { opacity: 1; color: var(--inkt); background-color: var(--diep, transparent); }
/* Thema's (ronde 5): enkele bestanden hebben rechts een donker randje van een paar pixels (< 1%). Met CSS weggesneden:
   2% rechts en onder van de bron bijsnijden; het vak blijft even groot, de foto blijft kleiner dan het bestand. */
.thema-tegel img { object-view-box: inset(0 2% 2% 0); } /* snijdt de bron bij zonder het vak te vergroten (browsers zonder object-view-box tonen het randje) */
/* LCP (ronde 8): de foto's in 002 en 003 op Kraamcadeauboxen staan als data-src en worden pas opgehaald als de sectie
   in de buurt komt (main.js); zonder JavaScript staat dezelfde foto in <noscript>. (content-visibility is weg: die liet
   ankers verkeerd landen, controle ronde 6.) */
html:not(.js) img[data-src] { display: none; }
/* lege fotovakken (nog niet geladen) krijgen een lichte tint die bij de sectie past (ronde 9) */
#in-de-box .product img, #in-de-box .stof img { background-color: rgba(224,230,231,.6); }
#themas .thema-tegel img { background-color: rgba(255,255,255,.35); }