:root{color-scheme:light;--paper:#f2f4ed;--surface:#fbfcf7;--ink:#1d2e25;--muted:#4c6154;--line:#d3ded0;--accent:#24553f;--accent-soft:#dce8d7;--nav:#20382c;--warn:#8a2f1f;--warn-soft:#f6e1da}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 "Segoe UI",system-ui,sans-serif}
svg{display:block;max-width:100%;height:auto}
a{color:var(--accent);text-underline-offset:4px}
button,input,select,textarea{font:inherit;color:var(--ink)}
button,select{cursor:pointer}
:focus-visible{outline:3px solid #a96424;outline-offset:3px}
h1,h2,h3,p{margin-top:0}
h1,h2{line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2rem,5vw,3.4rem);margin-bottom:14px}
h2{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:12px}
h3{font-size:1.15rem;margin-bottom:6px}
.muted,small{color:var(--muted)}
.shell{width:min(1120px,calc(100% - 32px));margin-inline:auto}
.skip{position:absolute;z-index:5;transform:translateY(-160%);padding:12px;background:var(--surface)}
.skip:focus{transform:none}

.top{background:var(--nav);color:#fff9ea}
.top-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;flex-wrap:wrap;padding-block:8px}
.top a{color:inherit;text-decoration:none}
.brand{font-weight:800;font-size:1.4rem;letter-spacing:-.01em}
.top nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:.95rem}
.top nav a:hover{text-decoration:underline}
.taal{display:inline-flex;border:1px solid #ffffff55;border-radius:999px;overflow:hidden}
.taal button{background:none;border:0;color:inherit;padding:4px 11px;font-size:.85rem}
.taal button[aria-pressed=true]{background:#fff9ea;color:var(--nav);font-weight:700}

.hero{padding:40px 0 24px;max-width:46ch}
.hero p{font-size:1.1rem;color:var(--muted)}
.rooster{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;padding-bottom:48px}
.kaart{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.kaart-tekst{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.kaart-tekst p{margin:0;color:var(--muted)}

.beeld{position:relative;background:var(--accent-soft);padding:22px;display:grid;place-items:center}
.beeld svg{width:100%;filter:drop-shadow(0 6px 10px #0000002e)}
.beeld.bal svg{max-width:300px}
.kaart .beeld{aspect-ratio:4/3}
.kaart .beeld.bal svg{max-height:100%;width:auto}

.knop{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:10px;padding:11px 18px;font-weight:700;text-decoration:none;text-align:center}
.knop:hover{background:#1b4331}
.kaart .knop{margin-top:auto}

.product{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;padding:32px 0 56px;align-items:start}
.product .beeld{border-radius:14px;position:sticky;top:16px}
.velden{display:grid;gap:16px}
.veld{display:grid;gap:5px}
.veld label,.veld legend{font-weight:600}
.veld input[type=text],.veld input[type=email],.veld select,.veld textarea{padding:10px 12px;border:1px solid #9fb0a4;border-radius:8px;background:#fff;width:100%}
.veld input[aria-invalid=true]{border-color:var(--warn);background:var(--warn-soft)}
.fout{color:var(--warn);font-weight:600;font-size:.92rem}
.hint{color:var(--muted);font-size:.88rem}
fieldset{border:0;padding:0;margin:0}
.keuzes{display:flex;flex-wrap:wrap;gap:8px}
.keuzes label{font-weight:500;border:1px solid #9fb0a4;border-radius:999px;padding:6px 13px;background:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.keuzes input{position:absolute;opacity:0;pointer-events:none}
.keuzes label:has(input:checked){background:var(--accent);color:#fff;border-color:var(--accent)}
.keuzes label:has(input:focus-visible){outline:3px solid #a96424;outline-offset:2px}
.stip{width:16px;height:16px;border-radius:50%;border:1px solid #0003;display:inline-block}
.rij{display:flex;gap:12px;flex-wrap:wrap}
.rij>.veld{flex:1;min-width:120px}



.footer{border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.footer-inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 0}

@media (max-width:820px){
  .product{grid-template-columns:1fr;gap:20px;padding-top:20px}
  .product .beeld{position:relative;top:auto}
}

:root {
  --paper: #f6f2e9;
  --surface: #fffdf7;
  --ink: #20382c;
  --muted: #4d5f51;
  --line: #d8d6c6;
  --accent-soft: #e5ebdb;
}
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
main:focus { outline: none; }
.brand { font-size: 1.55rem; }
.hero { max-width: 54rem; padding: clamp(32px, 7vw, 82px) 0 24px; }
.hero h1 { font: 500 clamp(2.7rem, 7vw, 5.4rem)/1.02 Georgia, serif; letter-spacing: -.045em; }
.hero .intro { max-width: 52ch; margin: 0; }
.status { color: var(--accent); font-size: .92rem; font-weight: 700; letter-spacing: .01em; }
.kaart-tekst { padding: 22px 24px 24px; gap: 12px; }
.kaart-tekst h2 { margin: 0; }
.kaart-tekst .knop { align-self: flex-start; margin-top: auto; }
.kaart .beeld { aspect-ratio: 16/10; overflow: hidden; }
.kaart .beeld > svg { width: min(100%, 27rem); }
.kaart .beeld.bal { background: #efded2; }
.kaart .beeld.bal svg { width: min(52%, 14rem); max-height: none; }
.product-beeld { position: sticky; top: 16px; min-width: 0; }
.product .beeld { position: static; border-radius: 14px; }
.beeld-label { font-weight: 700; margin-bottom: 8px; }
.beeld-noot { margin: 12px 0 0; }
.product .velden { min-width: 0; }
.velden > :is(p,h1) { margin-bottom: 0; }
.velden > h1 { font-size: clamp(1.95rem, 4vw, 2.8rem); }
.fout { margin: 0; }
.fout:empty { display: none; }
.stip { flex: 0 0 16px; }
.stip-f1ead8 { background: #f1ead8; }
.stip-24553f { background: #24553f; }
.stip-33373a { background: #33373a; }
.stip-f4f1e8 { background: #f4f1e8; }
.stip-8f2f2a { background: #8f2f2a; }
.stip-f6ecd6 { background: #f6ecd6; }
.stip-27405e { background: #27405e; }
.stip-f3ead7 { background: #f3ead7; }
@media (max-width:820px) {
  .product-beeld { position: static; }
  .product .beeld.bal svg { max-width: 210px; }
}
@media (max-width:380px) {
  .rooster { grid-template-columns: minmax(0,1fr); }
  .kaart-tekst { padding: 18px; }
  .top nav { gap: 8px; }
}