:root {
  color-scheme: dark;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(72% 0.15 27); --color-success: oklch(76% 0.13 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --color-paper: oklch(12.5% 0.008 55); --color-paper-2: oklch(16% 0.009 55); --color-paper-3: oklch(20.5% 0.01 55); --color-whatsapp: #25d366;
  --color-ink: oklch(92% 0.012 78); --color-ink-2: oklch(80% 0.012 75); --color-muted: oklch(64% 0.012 65);
  --color-rule: oklch(29% 0.01 55);
  --color-accent: oklch(73% 0.15 58); --color-accent-deep: oklch(50% 0.11 52); --color-accent-ink: oklch(12.5% 0.008 55); --color-focus: oklch(73% 0.15 58);
  --font-display: "Sofia Sans Extra Condensed", ui-sans-serif, sans-serif; --font-body: "Barlow", ui-sans-serif, sans-serif;
  --font-outlier: var(--font-body);
  --radius-card: 0; --radius-pill: 0; --rule-hair: 1px; --shadow-card: none;
  --tracking-display: -0.005em; --display-weight: 200; --grain: 0.07;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 35%, transparent); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
/* photographs: mono high=-20 shad=-12 */
[data-slot] > img { filter: none; }
html.zw [data-slot] > img { filter: grayscale(1) contrast(1.18) brightness(0.97); }

/* Hallmark · shape: Conversational FAQ · genre: atmospheric · theme: Darkroom (deal 1/3, seed booking-portrait-photographer-who-0ddf·fa777c55·2026-10-27·r0) · redesign: full
 * hero: Stage · nav: banner over a retracting bar · footer: mast · imagery: photographs, the user's own seven, mono (theme treatment) · signature: the at-work photograph at stage size, every photograph captioned as a plate · darkroom: amber
 * draw: 847e67 · axes: dark/display-condensed/chromatic-amber · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V5 · weakest: H, the question rows risk a text-heavy middle; the plates showcase and the collector's sheet carry the screens around them */
/* Hallmark · dismissed 23 · the amber fill the render flags is the cookie banner's one primary button, the same single filled control as every .knop.vol on the page, well under five percent of any viewport */
/* Hallmark · dismissed 23 · the amber fill the render flags is the cookie banner's one primary button, the same single filled control as every .knop.vol on the page, well under five percent of any viewport */
/* Hallmark · dismissed 23 · the amber fill the render flags is the cookie banner's one primary button, the same single filled control as every .knop.vol on the page, well under five percent of any viewport */
@import url("./tokens.css");
@import url("./base.css");

body { font-family: var(--font-body); font-weight: 400; font-size: 1.0625rem; line-height: 1.6; background: var(--color-paper); color: var(--color-ink); }
::selection { background: color-mix(in oklab, var(--color-accent) 35%, transparent); }
h1, h2 { font-family: var(--font-display); font-weight: 200; text-transform: uppercase; line-height: 1; letter-spacing: var(--tracking-display); overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 1.05; letter-spacing: var(--tracking-display); overflow-wrap: break-word; min-width: 0; }
p { text-wrap: pretty; }
a { color: var(--color-ink); }
img { max-width: 100%; }
figcaption, .onderschrift { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-sm); }
.lede { font-size: var(--text-lead); font-weight: 300; line-height: 1.45; color: var(--color-ink-2); max-width: 55ch; }
.klein { font-size: var(--text-sm); color: var(--color-muted); }
.sectie { padding-block: var(--section-gap); }
.sectie-s { padding-block: var(--section-gap-s); }
.sectie-l { padding-block: var(--section-gap-l); }
.band { background: var(--color-paper-2); color: var(--color-ink); }
.korrel { position: relative; isolation: isolate; }
.korrel::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 9 -4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 200px 200px; }
.kopblok { max-width: 720px; margin-bottom: var(--space-2xl); }
.kopblok h2 { font-size: var(--text-section); margin-bottom: var(--space-md); }
.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }

/* knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: 0; background: transparent; color: var(--color-ink); font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.knop:hover { background: var(--color-paper-3); }
.knop:active { transform: translateY(1px); }
.knop.vol { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.knop.vol:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); color: var(--color-ink); }
.knop.vol:active { transform: translateY(1px); }

/* banner en balk */
.banner { background: var(--color-paper-2); font-size: var(--text-sm); color: var(--color-muted); }
.banner .container { display: flex; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-xs); }
.banner a { color: var(--color-ink-2); text-decoration: none; }
.banner a:hover { color: var(--color-accent); }
header.balk { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); transition: transform var(--dur-short) var(--ease-out); }
header.balk.verstopt { transform: translateY(-100%); }
header.balk .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); min-height: 72px; }
.woordmerk { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; line-height: 1; }
.woordmerk span { color: var(--color-muted); }
nav.hoofd { display: flex; align-items: center; gap: var(--space-xl); }
nav.hoofd a { font-size: var(--text-md); color: var(--color-ink-2); text-decoration: none; }
nav.hoofd a:hover { color: var(--color-accent); }
nav.hoofd .knop { min-height: 44px; font-size: var(--text-md); }
#burger { display: none; background: none; border: var(--rule-hair) solid var(--color-rule); border-radius: 0; width: 48px; height: 48px; cursor: pointer; padding: var(--space-sm); }
#burger span { display: block; height: 2px; background: var(--color-ink); margin: var(--space-2xs) 0; }
#mobnav { display: none; position: fixed; inset: 0; z-index: var(--z-modal); background: var(--color-paper); padding: var(--space-xl) var(--gutter); }
#mobnav.open { display: block; }
#mobnav a { display: block; font-family: var(--font-display); font-weight: 200; font-size: var(--text-3xl); text-transform: uppercase; color: var(--color-ink); text-decoration: none; padding-block: var(--space-sm); }
#mobsluit { position: absolute; top: var(--space-lg); right: var(--gutter); background: none; border: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); width: 48px; height: 48px; font-size: var(--text-lg); cursor: pointer; }

/* hero */
.hero { min-height: calc(100dvh - 112px); display: flex; align-items: center; padding-block: var(--space-xl); }
.hero .raster { align-items: center; width: 100%; }
.hero-tekst { grid-column: 1 / 6; min-width: 0; }
.hero h1 { font-size: clamp(3.5rem, 6.4vw, 6.2rem); margin-bottom: var(--space-lg); }
.hero-tekst .lede { margin-bottom: var(--space-xl); }
.hero-acties { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.hero-foto { grid-column: 6 / 13; min-width: 0; }
.hero-foto [data-slot] { height: auto; aspect-ratio: 9/10; }
@starting-style { .hero-foto [data-slot] > img { opacity: 0; transform: translateY(14px); } }
.hero-foto [data-slot] > img { transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }

/* boekbalk */
.boekbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule); transform: translateY(110%); transition: transform var(--dur-short) var(--ease-out); }
.boekbalk.zichtbaar { transform: translateY(0); }
.boekbalk .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-sm); }
.boekbalk .titel { font-family: var(--font-display); font-weight: 400; font-size: var(--text-title); text-transform: uppercase; line-height: 1; }
.boekbalk .sub { font-size: var(--text-sm); color: var(--color-muted); }
.boekbalk .rechts { display: flex; align-items: center; gap: var(--space-lg); }
.boekbalk .app { color: var(--color-ink-2); text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 4px; }
.boekbalk .app:hover { color: var(--color-accent); }

/* platen */
.plaat-groot { max-width: 800px; margin-inline: auto; }
.plaat-groot [data-slot] { height: auto; aspect-ratio: 3/4; }
.platen-paar { margin-top: var(--gap-columns); }
.platen-paar .a { grid-column: 1 / 8; min-width: 0; }
.platen-paar .b { grid-column: 8 / 13; min-width: 0; }
.platen-paar .a [data-slot] { height: auto; aspect-ratio: 1/1; }
.platen-paar .b [data-slot] { height: 100%; }
figure { margin: 0; min-width: 0; }

/* verzamelblad */
.blad { border-top: var(--rule-hair) solid var(--color-rule); }
.blad .rij { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); align-items: baseline; }
.blad dt { grid-column: 1 / 6; font-size: var(--text-md); color: var(--color-muted); margin: 0; }
.blad dd { grid-column: 6 / 13; font-family: var(--font-display); font-weight: 400; font-size: var(--text-title); text-transform: uppercase; line-height: 1.1; margin: 0; }

/* prijsrijen */
.prijsrij { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); text-decoration: none; }
.prijsrij:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.prijsrij h3 { grid-column: 1 / 6; font-size: var(--text-title); min-width: 0; }
.prijsrij .lijn { grid-column: 6 / 10; color: var(--color-ink-2); min-width: 0; }
.prijsrij .prijs { grid-column: 10 / 13; font-family: var(--font-display); font-weight: 200; font-size: 2.5rem; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.prijsrij:hover h3, .prijsrij:hover .prijs { color: var(--color-accent); }
.prijsrij .prijs.klein-tekst { font-size: var(--text-title); font-weight: 400; text-transform: uppercase; padding-top: var(--space-xs); }
.prijsrij .prijs .btw { display: block; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted); margin-top: var(--space-xs); }
.zakelijk { margin-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-lg); }
.zakelijk-kop { font-family: var(--font-display); font-size: var(--text-title); font-weight: 400; letter-spacing: .01em; text-transform: none; margin-bottom: var(--space-sm); }
.extras-wrap { margin-top: var(--space-md); }
.extras-wrap:not([open]) { border-bottom: var(--rule-hair) solid var(--color-rule); }
.extras-wrap summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: var(--space-md) 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: var(--text-title); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; color: var(--color-ink); }
.extras-wrap summary::-webkit-details-marker { display: none; }
.extras-wrap summary::after { content: "+"; font-weight: 200; font-size: 1.9rem; line-height: 1; color: var(--color-accent); transition: transform .25s ease; }
.extras-wrap[open] summary::after { transform: rotate(45deg); }
.extras-wrap summary:hover { color: var(--color-accent); }
.extras { list-style: none; padding: 0; margin: 0; }
.extras li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding: var(--space-sm) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.extras li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.extras .ex-label { color: var(--color-ink); }
.extras .ex-label small { display: block; color: var(--color-muted); font-size: var(--text-sm); margin-top: 2px; }
.extras .ex-prijs { font-family: var(--font-display); font-weight: 200; font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.extras .ex-prijs.tekst { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted); }
.zakelijk > p { max-width: 62ch; color: var(--color-muted); margin-bottom: var(--space-md); }
.plaatsen { color: var(--color-muted); margin-top: var(--space-md); }
.plaatsen strong { color: var(--color-ink); font-weight: 500; }
.appen { margin-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-lg); }
.appen h3 { font-family: var(--font-display); font-size: var(--text-title); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; margin-bottom: var(--space-sm); }
.appen p { color: var(--color-muted); margin-bottom: var(--space-md); max-width: 52ch; }
.lb-eind { text-align: center; max-width: 36ch; padding: var(--space-lg); }
.lb-eind h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 300; text-transform: uppercase; letter-spacing: .02em; margin-bottom: var(--space-sm); }
.lb-eind p { color: var(--color-muted); margin-bottom: var(--space-lg); }
.vraagrij.uitgelicht h3 { color: var(--color-accent); }
#vragen .vraagrij { display: block; padding-block: 0; }
#vragen .vraagrij summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding-block: var(--space-lg); cursor: pointer; list-style: none; }
#vragen .vraagrij summary::-webkit-details-marker { display: none; }
#vragen .vraagrij summary h3 { font-size: var(--text-title); }
#vragen .vraagrij summary::after { content: "+"; font-weight: 200; font-size: 1.9rem; line-height: 1; color: var(--color-accent); transition: transform .25s ease; flex: none; }
#vragen .vraagrij[open] summary::after { transform: rotate(45deg); }
#vragen .vraagrij summary:hover h3 { color: var(--color-accent); }
#vragen .vraagrij .antwoord { padding-bottom: var(--space-lg); }
.schuif { position: relative; max-width: 540px; margin-inline: auto; aspect-ratio: 4 / 5; overflow: hidden; background: #000; --pos: 50%; }
.schuif-na { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 16%; }
.schuif-voor { position: absolute; inset: 0; display: flex; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.schuif-voor img { width: 50%; height: 100%; object-fit: cover; object-position: center 12%; }
.schuif-greep { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--color-accent); pointer-events: none; }
.schuif-greep::after { content: "↔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--color-accent); color: #16130f; font-size: 1.15rem; display: flex; align-items: center; justify-content: center; }
.schuif-label { position: absolute; top: var(--space-md); font-family: var(--font-display); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--color-ink); background: rgba(10, 9, 8, .55); padding: .3rem .6rem; pointer-events: none; }
.schuif-label.links { left: var(--space-md); }
.schuif-label.rechts { right: var(--space-md); }
.schuif-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; margin: 0; }
html.zw .schuif img { filter: grayscale(1) contrast(1.18) brightness(0.97); }

/* vragen */
.vraagrij { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); align-items: start; }
.vraagrij:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.vraagrij h3 { grid-column: 1 / 6; font-size: var(--text-title); min-width: 0; }
.vraagrij .antwoord { grid-column: 6 / 13; color: var(--color-ink-2); max-width: 62ch; min-width: 0; }
.vraagrij .antwoord p + p { margin-top: var(--space-sm); }

/* citaat */
.citaat blockquote { font-family: var(--font-display); font-weight: 200; font-size: var(--text-display-s); line-height: 1.08; margin: 0 0 var(--space-lg); max-width: 38ch; text-wrap: balance; }
.citaat .wie { font-size: var(--text-sm); color: var(--color-muted); }
.citaat .feiten { margin-top: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-lg); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.citaat .feiten div { grid-column: span 4; min-width: 0; }
.citaat .feiten .getal { font-family: var(--font-display); font-weight: 200; font-size: var(--text-display-s); line-height: 1; display: block; margin-bottom: var(--space-xs); }
.citaat .feiten span { font-size: var(--text-sm); color: var(--color-muted); }

/* splits */
.split-tekst { grid-column: 1 / 8; min-width: 0; }
.split-foto { grid-column: 8 / 13; min-width: 0; }
.split-foto [data-slot] { height: 560px; }
.split-omgekeerd .split-foto { grid-column: 1 / 6; }
.split-omgekeerd .split-tekst { grid-column: 6 / 13; }
.split-tekst h2 { font-size: var(--text-section); margin-bottom: var(--space-md); }
.split-tekst p { color: var(--color-ink-2); max-width: 58ch; }
.split-tekst p + p { margin-top: var(--space-md); }
.feitlijst { margin-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.feitlijst .rij { display: flex; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.feitlijst dt { color: var(--color-muted); }
.feitlijst dd { margin: 0; font-variant-numeric: tabular-nums; }

/* tijden */
.tijden .raster { align-items: start; }
.tijden .blok-a { grid-column: 1 / 7; min-width: 0; }
.tijden .blok-b { grid-column: 1 / 7; min-width: 0; }
.tijden h2 { font-size: var(--text-section); margin-bottom: var(--space-lg); }
.tijdrij { display: flex; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); align-items: baseline; }
.tijdrij:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.tijdrij .dagen { color: var(--color-ink-2); }
.tijdrij .uren { font-family: var(--font-display); font-weight: 400; font-size: var(--text-title); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.adres { font-size: var(--text-lead); font-weight: 300; line-height: 1.5; color: var(--color-ink-2); }
.adres a { text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 4px; }
.adres a:hover { color: var(--color-accent); }

/* formulier */
.formulier .raster { align-items: stretch; }
.form-kolom { grid-column: 1 / 8; min-width: 0; }
.form-foto { grid-column: 8 / 13; min-width: 0; }
.form-foto [data-slot] { height: auto; aspect-ratio: 4/5; }
#aanvraag-regel { font-size: var(--text-lead); font-weight: 300; color: var(--color-ink-2); margin-bottom: var(--space-xl); }
.velden { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.veld { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.veld.vol { grid-column: 1 / -1; }
.veld label { font-size: var(--text-sm); color: var(--color-muted); }
.veld input, .veld select, .veld textarea { background: var(--color-paper); border: 1px solid var(--color-muted); border-radius: 0; color: var(--color-ink); font: inherit; font-size: var(--text-md); min-height: 52px; padding: var(--space-sm) var(--space-md); width: 100%; box-sizing: border-box; }
.veld textarea { min-height: 120px; resize: vertical; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.veld select option { background: var(--color-paper-2); color: var(--color-ink); }
.verzend { margin-top: var(--space-xl); width: 100%; }
.formulier .noot { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.verstopt-veld { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* voettekst */
footer.mast { border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-3xl); padding-bottom: var(--space-2xl); margin-top: 0; }
footer.mast .groot { font-family: var(--font-display); font-weight: 200; font-size: clamp(3rem, 9.2vw, 8.75rem); line-height: 0.95; text-transform: uppercase; letter-spacing: var(--tracking-display); white-space: nowrap; overflow-wrap: break-word; min-width: 0; }
footer.mast .groot span { color: var(--color-muted); }
footer.mast .onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xl); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
footer.mast nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
footer.mast nav a { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-md); }
footer.mast nav a:hover { color: var(--color-accent); }
footer.mast .juridisch { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-lg); }
footer.mast .juridisch a { color: var(--color-muted); }

/* cookiebanner */
#cookie-banner { position: fixed; left: var(--space-lg); bottom: var(--space-lg); z-index: var(--z-toast); background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); padding: var(--space-lg); max-width: 380px; }
#cookie-banner p { font-size: var(--text-sm); color: var(--color-ink-2); margin-bottom: var(--space-md); }
#cookie-banner .rij { display: flex; gap: var(--space-sm); }
#cookie-banner .knop { min-height: 44px; font-size: var(--text-md); padding: 0 var(--space-md); }

/* pagina 2 */
.subhero { padding-top: var(--space-3xl); padding-bottom: var(--section-gap-s); }
.subhero .raster { align-items: center; }
.subhero .hero-foto [data-slot] { height: auto; aspect-ratio: 9/10; }
.stappen { list-style: none; counter-reset: stap; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.stappen li { counter-increment: stap; grid-column: span 3; min-width: 0; border-left: var(--rule-hair) solid var(--color-rule); padding-left: var(--space-lg); }
.stappen li::before { content: counter(stap, decimal-leading-zero); font-family: var(--font-display); font-weight: 200; font-size: var(--text-3xl); line-height: 1; display: block; margin-bottom: var(--space-md); }
.stappen h3 { font-size: var(--text-title); margin-bottom: var(--space-sm); }
.stappen p { color: var(--color-ink-2); font-size: var(--text-md); }
.prijskaart { border-top: var(--rule-hair) solid var(--color-rule); }
.inclusief { list-style: none; margin: var(--space-lg) 0; padding: 0; }
.inclusief li { padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); display: flex; justify-content: space-between; gap: var(--space-lg); }
.inclusief li b { color: var(--color-ink); font-weight: 400; font-variant-numeric: tabular-nums; }

/* responsief */
@media (max-width: 60rem) {
  nav.hoofd { display: none; }
  header.balk .container { gap: var(--space-md); }
  #burger { display: block; flex: none; }
  .hero { min-height: 0; padding-top: var(--space-2xl); }
  .hero-tekst, .hero-foto, .split-tekst, .split-foto, .split-omgekeerd .split-foto, .split-omgekeerd .split-tekst, .form-kolom, .form-foto, .tijden .blok-a, .tijden .blok-b { grid-column: 1 / -1; }
  .hero-foto { margin-top: var(--space-xl); }
  .hero-foto [data-slot] { height: auto; }
  .platen-paar .a, .platen-paar .b { grid-column: 1 / -1; }
  .platen-paar .b { margin-top: var(--gap-columns); }
  .platen-paar .a [data-slot], .platen-paar .b [data-slot] { height: auto; aspect-ratio: 1/1; }
  .plaat-groot [data-slot] { height: auto; }
  .split-foto [data-slot] { height: 420px; margin-top: var(--space-xl); }
  .form-foto { margin-top: var(--space-xl); }
  .form-foto [data-slot] { height: auto; min-height: 0; }
  .blad dt { grid-column: 1 / -1; }
  .blad dd { grid-column: 1 / -1; margin-top: var(--space-xs); }
  .prijsrij h3 { grid-column: 1 / 10; }
  .prijsrij .lijn { grid-column: 1 / 10; }
  .prijsrij .prijs { grid-column: 10 / 13; grid-row: 1; }
  .vraagrij h3, .vraagrij .antwoord { grid-column: 1 / -1; }
  .citaat .feiten div { grid-column: 1 / -1; }
  .stappen li { grid-column: span 6; margin-bottom: var(--space-xl); }
  .boekbalk .sub { display: none; }
  .boekbalk .app { display: none; }
  footer.mast .groot { white-space: normal; }
}
@media (max-width: 40rem) {
  .velden { grid-template-columns: 1fr; }
  .stappen li { grid-column: 1 / -1; }
  .hero-acties .knop { width: 100%; }
  #cookie-banner { left: var(--space-md); right: var(--space-md); bottom: 84px; max-width: none; }
}

/* formulier uit de bestaande bedrading */
form[name="boekingsaanvraag"] .formrij { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
form[name="boekingsaanvraag"] > .veld, form[name="boekingsaanvraag"] > .formrij { margin-bottom: var(--space-lg); }
form[name="boekingsaanvraag"] .vertrouwen { margin-top: var(--space-md); color: var(--color-ink-2); }
form[name="boekingsaanvraag"] .fijn { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
form[name="boekingsaanvraag"] .fijn a { color: var(--color-muted); }
@media (max-width: 40rem) { form[name="boekingsaanvraag"] .formrij { grid-template-columns: 1fr; } }

button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }

.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus-visible { width: auto; height: auto; clip-path: none; left: var(--space-md); top: var(--space-md); background: var(--color-paper-2); color: var(--color-ink); padding: var(--space-sm) var(--space-md); z-index: var(--z-tooltip); }
.banner a { white-space: nowrap; }
@media (max-width: 40rem) { .banner .container span { display: none; } .banner .container { justify-content: flex-end; } }

.hero-feit { margin-top: var(--space-lg); color: var(--color-ink-2); }
.hero-foto [data-slot] > img { object-position: 50% 8%; }
.plaat-groot [data-slot] > img { object-position: 50% 30%; }
body.banner-open .boekbalk { transform: translateY(110%); }
#cookie-banner .cb-k { display: flex; gap: var(--space-sm); }
#cookie-banner .cb-knop { font-family: var(--font-display); font-weight: 400; font-size: var(--text-md); text-transform: uppercase; letter-spacing: 0.02em; min-height: 44px; padding: 0 var(--space-md); background: transparent; border: var(--rule-hair) solid var(--color-ink); color: var(--color-ink); cursor: pointer; }
#cookie-banner #cb-yes { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.studio-raster .links { grid-column: 1 / 8; min-width: 0; }
.studio-raster .rechts { grid-column: 8 / 13; min-width: 0; }
.studio-raster .rechts [data-slot] { height: 100%; min-height: 430px; }
@media (max-width: 60rem) { .studio-raster .links, .studio-raster .rechts { grid-column: 1 / -1; } .studio-raster .rechts { margin-top: var(--space-xl); } .studio-raster .rechts [data-slot] { height: 380px; min-height: 0; } }
@media (max-width: 40rem) { .prijsrij .prijs.klein-tekst { grid-column: 1 / -1; grid-row: 3; text-align: left; } }

#cookie-banner .cb-knop { white-space: nowrap; }
@media (max-width: 40rem) { #cookie-banner .cb-k { flex-direction: column; } #cookie-banner .cb-knop { width: 100%; } }

.citaat .tweede { font-family: var(--font-display); font-weight: 300; font-size: var(--text-2xl); line-height: 1.12; max-width: 34ch; margin-top: var(--space-2xl); }

.weergave { background: none; border: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); font-family: var(--font-display); font-weight: 400; font-size: var(--text-md); text-transform: uppercase; letter-spacing: 0.02em; min-height: 40px; padding: 0 var(--space-md); cursor: pointer; min-width: 9em; text-align: center; }
.weergave:hover { color: var(--color-ink); border-color: var(--color-ink); }
#mobnav .weergave { margin-top: var(--space-lg); }
@media (max-width: 60rem) { .balk .weergave:not(.weergave-mobiel) { display: none; } }
nav.hoofd a, .weergave { white-space: nowrap; }
@media (max-width: 75rem) { nav.hoofd { gap: var(--space-lg); } header.balk .container { gap: var(--space-lg); } }

.platen-paar [data-slot] > img { object-position: 50% 18%; }
figure.resultaat [data-slot] { cursor: zoom-in; }
[data-slot] > img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.lichtbak { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--color-paper); display: flex; align-items: center; justify-content: center; }
.lichtbak[hidden] { display: none; }
.lichtbak figure { max-width: min(94vw, 1150px); text-align: left; }
.lichtbak .lb-kader { display: flex; align-items: center; justify-content: center; }
.lichtbak img { max-width: 100%; max-height: 80dvh; object-fit: contain; filter: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
html.zw .lichtbak img { filter: grayscale(1) contrast(1.18) brightness(0.97); }
.lichtbak figcaption { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-md); }
.lb-knop { position: absolute; background: none; border: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); font-family: var(--font-display); font-weight: 400; font-size: var(--text-md); text-transform: uppercase; letter-spacing: 0.02em; min-height: 44px; padding: 0 var(--space-md); cursor: pointer; }
.lb-knop:hover { border-color: var(--color-ink); }
.lb-sluit { top: var(--space-lg); right: var(--gutter); width: 48px; padding: 0; font-size: var(--text-lg); }
.lb-vorige { bottom: var(--space-lg); left: var(--gutter); }
.lb-volgende { bottom: var(--space-lg); right: var(--gutter); }
.lb-teller { position: absolute; bottom: var(--space-lg); left: 50%; transform: translateX(-50%); color: var(--color-muted); font-size: var(--text-md); }

.weergave-mobiel { display: none; }
.wa-icoon { width: 17px; height: 17px; fill: var(--color-whatsapp); flex: none; display: inline-block; vertical-align: -3px; }
.adres .wa-icoon { margin-right: var(--space-xs); }
.boekbalk .app { display: inline-flex; align-items: center; gap: var(--space-xs); border: var(--rule-hair) solid var(--color-rule); padding: var(--space-xs) var(--space-md); min-height: 44px; text-decoration: none; color: var(--color-ink); }
.boekbalk .app:hover { border-color: var(--color-whatsapp); color: var(--color-ink); }
.contact-links .wa-icoon { vertical-align: -3px; margin-right: var(--space-xs); }
@media (max-width: 60rem) { .weergave-mobiel { display: inline-flex; align-items: center; margin-left: auto; margin-right: 0; min-height: 44px; min-width: 7.25em; padding-inline: var(--space-sm); justify-content: center; } }
@media (max-width: 40rem) { .boekbalk .titel, .boekbalk .sub { display: none; } .boekbalk .container { justify-content: flex-end; } .boekbalk .rechts { gap: var(--space-md); } .boekbalk .app-prijs { display: none; } }
.helft { position: absolute; inset: 0; pointer-events: none; }
.helft img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
.helft.links { clip-path: inset(0 50% 0 0); }
.helft.rechts { clip-path: inset(0 0 0 50%); }
html.zw .helft img { filter: grayscale(1) contrast(1.18) brightness(0.97); }

@media (max-width: 40rem) { header.balk .container { gap: var(--space-sm); } }

/* Logoherstel (bundel 9): echte logo's i.p.v. het getypte woordmerk */
.woordmerk-logo { display: block; height: 36px; width: auto; }
.voet-logo { display: block; height: clamp(120px, 18vw, 176px); width: auto; max-width: 100%; }
@media (max-width: 640px) { .woordmerk-logo { height: 29px; } }


.tekst { max-width: 68ch; }
.tekst h2 { font-size: var(--text-2xl); margin: var(--space-2xl) 0 var(--space-md); }
.tekst p, .tekst li { color: var(--color-ink-2); }
.tekst p { margin-bottom: var(--space-md); }
.tekst ul { padding-left: 1.2em; margin-bottom: var(--space-md); }
.tekst li { margin-bottom: var(--space-sm); }
.tekst strong { color: var(--color-ink); font-weight: 500; }