/* Layout: één lange winkelpagina in de huisstijl van Bureau Vanderzaak. Groene lampband als opening, dan linnen secties; de zaakkiezer is het hart van de pagina */
:root {
  --linnen: #F5EFE3;
  --karton: #E9DFCB;
  --lijn: #D6CCB8;
  --inkt: #1E2622;
  --inkt-zacht: #59625B;
  --flessengroen: #24493E;
  --groen-diep: #1B3830;
  --op-groen: #F5EFE3;
  --lamplicht: #E2A63B;
  --op-lamplicht: #1E2622;
  --kersenrood: #9C2F37;
  --salie: #C3CFBC;
  --wit: #FFFDF8;
  --focus: #24493E;
  --f-display: "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-sans: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --f-dossier: "Courier New", Courier, monospace;
  --f-hand: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  --r-sm: 4px; --r-md: 12px; --r-lg: 28px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --linnen: #18221E; --karton: #22302A; --lijn: #34443C; --inkt: #F1EADB; --inkt-zacht: #B7BDB2;
    --flessengroen: #2C5649; --groen-diep: #14201B; --op-groen: #F5EFE3; --lamplicht: #EBB451; --kersenrood: #E06A6F;
    --salie: #2C3D35; --wit: #1E2A25; --focus: #EBB451; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --linnen: #18221E; --karton: #22302A; --lijn: #34443C; --inkt: #F1EADB; --inkt-zacht: #B7BDB2;
  --flessengroen: #2C5649; --groen-diep: #14201B; --op-groen: #F5EFE3; --lamplicht: #EBB451; --kersenrood: #E06A6F;
  --salie: #2C3D35; --wit: #1E2A25; --focus: #EBB451; color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--linnen); color: var(--inkt); font-family: var(--f-sans); font-size: 17px; line-height: 1.6; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.inner { max-width: 1080px; margin: 0 auto; }
.label { font: 700 12px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--inkt-zacht); }
.h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(30px, 4.6vw, 44px); line-height: 1.08; letter-spacing: -.01em; }
.lead { font-size: 19px; color: var(--inkt-zacht); max-width: 58ch; }
.hand { font-family: var(--f-hand); color: var(--kersenrood); font-size: 26px; line-height: 1.15; }
section.sec { padding-block: 72px; }
.sec-kop { display: grid; gap: 10px; margin-bottom: 34px; }

/* knoppen */
.btn { display: inline-flex; align-items: center; gap: 8px; font: 700 16px/1 var(--f-sans); border-radius: var(--r-md); padding: 15px 22px; cursor: pointer; border: 1px solid transparent; text-decoration: none; }
.btn.licht { background: var(--lamplicht); color: var(--op-lamplicht); }
.btn.groen { background: var(--flessengroen); color: var(--op-groen); }
.btn.lijn { background: transparent; border-color: currentColor; }
.btn:hover { filter: brightness(1.05); }

/* proto-strook */
.proto { background: var(--groen-diep); color: var(--op-groen); font-size: 13px; text-align: center; padding-block: 7px; }
.proto b { color: var(--lamplicht); }

/* nav */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--flessengroen); }
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--flessengroen); color: var(--op-groen); border-bottom: 1px solid color-mix(in oklab, var(--op-groen) 14%, transparent); }
.nav .inner { display: flex; align-items: center; gap: 18px; padding-block: 12px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.logo svg { width: 36px; height: 36px; }
.logo .w { display: grid; line-height: 1; gap: 3px; }
.logo .b { font: 700 9.5px/1 var(--f-sans); letter-spacing: .32em; text-transform: uppercase; opacity: .85; }
.logo .n { font-family: var(--f-display); font-weight: 600; font-size: 21px; }
.nav ul { display: flex; gap: 22px; list-style: none; margin: 0 0 0 auto; padding: 0; font-weight: 600; font-size: 15px; }
.nav ul a { text-decoration: none; opacity: .9; }
.nav ul a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.nav .btn { padding: 11px 16px; font-size: 15px; }
@media (max-width: 860px) { .nav ul { display: none; } .nav .btn { margin-left: auto; } }

/* hero */
.hero { background: var(--flessengroen); color: var(--op-groen); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; width: 760px; height: 760px; right: -180px; top: -360px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--lamplicht) 34%, transparent) 0%, transparent 64%); pointer-events: none; }
.hero .inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 36px; align-items: end; padding-block: 56px 0; position: relative; z-index: 1; }
.hero-tekst { display: grid; gap: 18px; padding-bottom: 64px; min-width: 0; }
.hero .reeks { font: 700 13px/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--lamplicht); }
.hero h1 { font-family: var(--f-display); font-weight: 600; font-size: clamp(42px, 7vw, 76px); line-height: .98; letter-spacing: -.02em; }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--lamplicht); }
.hero p.l { font-size: 19px; max-width: 46ch; opacity: .92; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero .cta .lijn { color: var(--op-groen); }
.troeven { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; opacity: .9; margin-top: 4px; }
.troeven span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--lamplicht); margin-right: 8px; vertical-align: 1px; }
.hero-illu { min-width: 0; }
.hero-illu svg { display: block; width: 100%; height: auto; }
@media (max-width: 860px) { .hero .inner { grid-template-columns: 1fr; padding-top: 40px; } .hero-tekst { padding-bottom: 0; } .hero-illu { max-width: 460px; } }

/* stappen */
.stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
.stap { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-md); padding: 24px; display: grid; gap: 10px; align-content: start; }
.stap .n { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--flessengroen); color: var(--op-groen); font: 700 17px var(--f-sans); }
.stap h3 { font-family: var(--f-display); font-weight: 600; font-size: 24px; }
.stap p { color: var(--inkt-zacht); }
@media (max-width: 760px) { .stappen { grid-template-columns: 1fr; } }

/* zaakkiezer */
#zaken { background: var(--karton); }
.kiezer { display: grid; grid-template-columns: 1fr 1.08fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .kiezer { grid-template-columns: 1fr; } }
.kies { display: grid; gap: 22px; min-width: 0; }
.kies fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0; }
.kies legend { padding: 0; margin-bottom: 10px; }
.zaak { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; background: var(--wit); border: 2px solid var(--lijn); border-radius: var(--r-md); padding: 16px 18px; cursor: pointer; }
.zaak:has(input:checked) { border-color: var(--flessengroen); box-shadow: 0 0 0 3px color-mix(in oklab, var(--flessengroen) 18%, transparent); }
.zaak input { position: absolute; opacity: 0; pointer-events: none; }
.zaak:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.zaak .nr { grid-row: 1 / span 3; width: 46px; height: 58px; border-radius: 3px; background: var(--flessengroen); color: var(--op-groen); display: grid; place-items: center; font: 700 12px/1.1 var(--f-dossier); text-align: center; }
.zaak:nth-of-type(2) .nr { background: var(--kersenrood); color: var(--op-groen); }
.zaak:nth-of-type(3) .nr { background: var(--lamplicht); color: var(--op-lamplicht); }
.zaak h3 { font-family: var(--f-display); font-weight: 600; font-size: 21px; line-height: 1.2; }
.zaak .meta { font-size: 14px; color: var(--inkt-zacht); }
.zaak .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip { font: 600 12px/1 var(--f-sans); padding: 5px 9px; border-radius: 20px; background: var(--karton); color: var(--inkt); }
.stadkeuze { display: grid; gap: 8px; }
.stadkeuze select { font: 600 18px var(--f-sans); color: var(--inkt); background: var(--wit); border: 2px solid var(--lijn); border-radius: var(--r-md); padding: 13px 14px; width: 100%; }
.stadkeuze .tip { font-size: 14px; color: var(--inkt-zacht); }

.dossier { background: var(--linnen); border: 1px solid var(--lijn); border-radius: var(--r-md); overflow: hidden; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 80px); min-width: 0; }
@media (max-width: 900px) { .dossier { position: static; } }
.d-band { background: var(--flessengroen); color: var(--op-groen); padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 700 12px/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; }
.d-band span:last-child { color: var(--lamplicht); }
.d-body { padding: 22px 22px 24px; display: grid; gap: 14px; position: relative; }
.d-stempel { position: absolute; top: 18px; right: 18px; transform: rotate(-9deg); color: var(--kersenrood); border: 2px solid var(--kersenrood); border-radius: var(--r-sm); padding: 5px 9px; font: 700 11px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; background: var(--linnen); }
.d-body h3 { font-family: var(--f-display); font-weight: 600; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.08; padding-right: 110px; }
.d-body h3 small { display: block; font-family: var(--f-sans); font-size: 15px; font-weight: 600; color: var(--inkt-zacht); margin-top: 6px; letter-spacing: 0; }
.d-teaser { font-family: var(--f-dossier); font-size: 16px; line-height: 1.65; background: var(--karton); border-radius: var(--r-sm); padding: 14px 16px; }
.d-teaser b { background: color-mix(in oklab, var(--lamplicht) 40%, transparent); padding: 0 3px; border-radius: 2px; font-weight: 700; }
.plekken { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.plekken li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--lijn); align-items: start; }
.plekken .pin { width: 28px; height: 28px; border-radius: 50%; background: var(--flessengroen); color: var(--op-groen); display: grid; place-items: center; font: 700 13px var(--f-sans); }
.plekken b { display: block; font-size: 16px; }
.plekken span { font-size: 14px; color: var(--inkt-zacht); }
.d-feiten { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--inkt-zacht); }
.d-feiten b { color: var(--inkt); }
.d-koop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; border-top: 1.5px solid var(--inkt); padding-top: 16px; }
.prijs { font-family: var(--f-display); font-weight: 600; font-size: 34px; line-height: 1; }
.prijs small { display: block; font: 500 13px var(--f-sans); color: var(--inkt-zacht); margin-top: 4px; }
.melding { font-size: 14.5px; background: var(--salie); color: var(--inkt); border-radius: var(--r-sm); padding: 10px 12px; }

/* inhoud */
.inhoud { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .inhoud { grid-template-columns: 1fr; } }
.lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.lijst li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--lijn); }
.lijst li b { font: 700 12px/1.5 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--kersenrood); }
@media (max-width: 480px) { .lijst li { grid-template-columns: 1fr; gap: 2px; } }
.stapel { position: relative; height: 380px; max-width: 100%; }
.vel { position: absolute; background: var(--wit); border: 1px solid var(--lijn); border-radius: 3px; padding: 18px 20px; font-family: var(--f-dossier); font-size: 14.5px; line-height: 1.55; box-shadow: 0 6px 18px color-mix(in oklab, var(--inkt) 12%, transparent); }
.vel .tag { display: inline-block; color: var(--kersenrood); border: 2px solid var(--kersenrood); border-radius: var(--r-sm); font: 700 10.5px/1 var(--f-sans); letter-spacing: .14em; padding: 4px 7px; margin-bottom: 10px; }
.vel.a { left: 0; top: 18px; width: 64%; transform: rotate(-3deg); }
.vel.b { right: 0; top: 0; width: 46%; transform: rotate(4deg); text-align: center; }
.vel.c { left: 14%; bottom: 0; width: 70%; transform: rotate(1deg); background: var(--karton); }
.vel.c .hand { font-size: 24px; }

/* voor wie */
.wie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .wie { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .wie { grid-template-columns: 1fr; } }
.wie article { border-top: 3px solid var(--flessengroen); padding-top: 16px; display: grid; gap: 8px; align-content: start; }
.wie article:nth-child(2) { border-color: var(--lamplicht); }
.wie article:nth-child(3) { border-color: var(--kersenrood); }
.wie article:nth-child(4) { border-color: var(--salie); }
.wie h3 { font-family: var(--f-display); font-weight: 600; font-size: 22px; }
.wie p { color: var(--inkt-zacht); font-size: 16px; }
.wie .q { font-family: var(--f-display); font-style: italic; color: var(--inkt); }

/* bureau */
#bureau { background: var(--flessengroen); color: var(--op-groen); }
#bureau .label { color: var(--lamplicht); }
.bureau { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
@media (max-width: 860px) { .bureau { grid-template-columns: 1fr; } }
.brief { background: var(--linnen); color: var(--inkt); border-radius: var(--r-sm); padding: 26px 28px; font-family: var(--f-dossier); font-size: 16px; line-height: 1.7; transform: rotate(-1deg); }
.brief p + p { margin-top: 12px; }
.brief .hand { font-size: 32px; }
.bureau .tekst { display: grid; gap: 16px; }
.bureau .tekst p { opacity: .92; max-width: 52ch; }

/* testspelers */
.test { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-lg); padding: 36px; }
@media (max-width: 760px) { .test { grid-template-columns: 1fr; padding: 24px; } }
.mailbox { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--karton); border-radius: var(--r-md); padding: 14px 16px; }
.mailbox code { font: 700 17px var(--f-dossier); user-select: all; overflow-wrap: anywhere; }

/* faq */
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-md); padding: 16px 20px; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-display); font-size: 24px; line-height: 1; color: var(--kersenrood); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 10px; color: var(--inkt-zacht); }

/* footer */
footer { background: var(--groen-diep); color: var(--op-groen); padding-block: 44px 30px; font-size: 15px; }
footer .inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
@media (max-width: 760px) { footer .inner { grid-template-columns: 1fr; } }
footer h4 { font: 700 12px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--lamplicht); margin-bottom: 12px; }
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; opacity: .9; }
footer .klein { grid-column: 1 / -1; border-top: 1px solid color-mix(in oklab, var(--op-groen) 18%, transparent); padding-top: 16px; font-size: 13px; opacity: .75; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }

[hidden]{display:none!important}
.proto a{color:var(--lamplicht)}
.stap ul{margin:0;padding-left:18px;color:var(--inkt-zacht)}
.testcard{background:var(--linnen);border:1px solid var(--lijn);border-radius:var(--r-md);overflow:hidden;max-width:760px}
.btn:focus-visible{outline-offset:3px}
.binnenkort{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;max-width:760px}
.binnenkort div{background:var(--wit);border:1px dashed var(--lijn);border-radius:var(--r-md);padding:14px 16px;color:var(--inkt-zacht);font-size:15px}
.binnenkort b{display:block;color:var(--inkt);font-family:var(--f-display);font-size:18px}
@media(max-width:560px){.binnenkort{grid-template-columns:1fr}}
.stapel{height:340px}
footer{background:var(--groen-diep);color:var(--op-groen);padding-block:44px 24px}
footer .inner{display:grid;gap:28px;grid-template-columns:1.4fr 1fr 1fr}
footer h4{font:700 13px var(--f-sans);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;color:var(--lamplicht)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:15px;overflow-wrap:anywhere}
.klein{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font-size:13px;opacity:.8;border-top:1px solid color-mix(in oklab,var(--op-groen) 20%,transparent);padding-top:16px}
@media(max-width:760px){footer .inner{grid-template-columns:1fr}}
.faq summary{font-weight:600}.faq details p{margin-top:10px;color:var(--inkt-zacht)}
.pagina{max-width:760px;margin:0 auto;padding-block:48px 72px}
.pagina h1{font-family:var(--f-display);font-size:clamp(32px,5vw,46px);line-height:1.08;margin-bottom:14px}
.pagina h2{font-family:var(--f-display);font-size:24px;margin:30px 0 8px}
.pagina p+p{margin-top:12px}
form.enq{display:grid;gap:22px;margin-top:28px}
.vraagb{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-md);padding:18px 20px;display:grid;gap:10px;margin:0;min-width:0}
.vraagb legend,.vraagb>label.t{font-weight:700;padding:0}
.vraagb legend{float:left;width:100%;margin-bottom:8px}
.vraagb legend+*{clear:both}
.keuzes{display:flex;flex-wrap:wrap;gap:8px 16px}
.keuzes label{display:inline-flex;gap:7px;align-items:center;min-height:32px}
.vraagb select,.vraagb textarea,.vraagb input[type=email],.vraagb input[type=text]{font:inherit;color:inherit;background:var(--linnen);border:1.5px solid var(--lijn);border-radius:var(--r-sm);padding:10px 12px;width:100%}
.hulp{font-size:14px;color:var(--inkt-zacht)}
.toest{display:flex;gap:10px;align-items:flex-start}.toest input{margin-top:6px}
.klaar{background:var(--salie);border-radius:var(--r-md);padding:18px 20px;display:grid;gap:12px}
.klaar textarea{font:14px var(--f-dossier);width:100%;min-height:170px;padding:10px;border:1px solid var(--lijn);border-radius:var(--r-sm);background:var(--wit);color:var(--inkt)}
.rij{display:flex;flex-wrap:wrap;gap:10px}
.fout{color:var(--kersenrood);font-weight:600}