@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@400..800&family=Funnel+Sans:ital,wght@0,300..800;1,300..800&family=Martian+Mono:wght@300..500&display=swap');
:root {
--papier: #F4F3EE;
--papier-2: #E9E7E0;
--wit: #FFFFFF;
--inkt: #1A1A1F;
--inkt-2: #55535C;
--lijn: #1A1A1F;
--oranje: #FF6C2F;
--oranje-druk: #F0541A;
--roze: #FF48B0;
--blauw: #0078BF;
--geel: #FFE800;
--groen: #00A95C;
--groen-licht: #BCEBD0;
--geel-licht: #FFF27A;
--roze-licht: #FFC4E4;
--fout: #B8105F;
--bg: var(--papier);
--bg-verdiept: var(--papier-2);
--bg-blad: var(--wit);
--tekst: var(--inkt);
--tekst-zacht: var(--inkt-2);
--actie: var(--oranje);
--actie-hover: var(--oranje-druk);
--actie-tekst: var(--inkt);
--focus: var(--blauw);
--mark-inc: var(--groen-licht);
--mark-extra: var(--geel-licht);
--mark-out: var(--roze-licht);
}

:root {
--font-kop: 'Funnel Display', 'Helvetica Neue', Arial, sans-serif;
--font-tekst: 'Funnel Sans', 'Helvetica Neue', Arial, sans-serif;
--font-ascii: 'Martian Mono', ui-monospace, Menlo, monospace; 
--t-kop-1: clamp(2.5rem, 10vw, 4.75rem);
--t-kop-2: clamp(1.75rem, 6vw, 2.75rem);
--t-kop-3: 1.25rem;
--t-zin: clamp(1.5rem, 5.6vw, 2rem);
--t-lead: 1.1875rem;
--t-body: 1.0625rem;
--t-klein: 0.9375rem;
--lh-kop: 1.02;
--lh-tekst: 1.5;
--ls-kop: -0.025em;
--ascii-size: 11px;
--ascii-lh: 1.25;
}

:root {
--r-1: 4px;
--r-2: 8px;
--r-3: 12px;
--r-4: 16px;
--r-5: 24px;
--r-6: 32px;
--r-7: 48px;
--r-8: 72px;
--r-9: 112px;
--rand: 20px;          
--breedte: 44rem;      
--breedte-wijd: 72rem; 
--radius-knop: 14px;
--radius-blad: 6px;
--radius-scherm: 4px;
--radius-chip: 999px;
--radius-mark: 3px;
--lijn-dik: 1.5px;
--tik: 44px;           
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0; background: var(--bg); color: var(--tekst);
font-family: var(--font-tekst); font-size: var(--t-body); line-height: var(--lh-tekst);
-webkit-font-smoothing: antialiased;
}
a { color: var(--tekst); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--blauw); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-kop); letter-spacing: var(--ls-kop); line-height: var(--lh-kop); text-wrap: balance; margin: 0; }
h1 { font-size: var(--t-kop-1); font-weight: 750; }
h2 { font-size: var(--t-kop-2); font-weight: 700; margin-bottom: var(--r-5); }
h3 { font-size: var(--t-kop-3); font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; }
p { margin: 0 0 var(--r-4); text-wrap: pretty; }
.skip { position: absolute; left: -999px; top: 12px; z-index: 10; background: var(--inkt); color: var(--papier); padding: 12px 16px; border-radius: var(--radius-blad); }
.skip:focus { left: 12px; }
.w { max-width: var(--breedte); margin: 0 auto; padding: 0 var(--rand); }
.w.wide { max-width: var(--breedte-wijd); }
header { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: var(--r-4); }
header nav { display: flex; gap: var(--r-4); }
header nav a { display: inline-flex; align-items: center; min-height: var(--tik); font-size: var(--t-klein); }
section { position: relative; padding: var(--r-8) 0; }
footer { border-top: var(--lijn-dik) solid var(--lijn); padding: var(--r-6) 0 var(--r-7); font-size: var(--t-klein); color: var(--tekst-zacht); }
footer p { margin: 0 0 var(--r-1); }
footer a { color: var(--tekst-zacht); }
.logo { display: inline-flex; align-items: baseline; gap: 0.07em; font-family: var(--font-kop); font-weight: 750; font-size: 1.375rem; letter-spacing: -0.03em; line-height: 1; color: var(--tekst); text-decoration: none; min-height: var(--tik); align-items: center; }
.logo .nul { display: inline-block; width: 0.52em; height: 0.52em; border: 0.12em solid var(--oranje); margin-left: 0.04em; }
.logo:hover { color: var(--tekst); }
.logo-groot { display: flex; align-items: flex-end; gap: 0.06em; font-family: var(--font-kop); font-weight: 800; font-size: clamp(4.5rem, 24vw, 11rem); letter-spacing: -0.045em; line-height: 0.8; color: var(--tekst); }
.logo-groot .nul { display: block; width: 0.52em; height: 0.52em; margin: 0 0 0.005em 0.04em; border: 0.1em solid var(--oranje); }
.lead { font-size: var(--t-lead); max-width: 34em; }
.note { font-size: var(--t-klein); color: var(--tekst-zacht); margin-top: var(--r-3); }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--r-2);
min-height: 56px; padding: 0 var(--r-5); border: 0; border-radius: var(--radius-knop);
background: var(--actie); color: var(--actie-tekst);
font-family: var(--font-kop); font-weight: 650; font-size: 1.125rem; letter-spacing: -0.01em; line-height: 1;
text-decoration: none; cursor: pointer; transition: background-color .15s, transform .08s;
}
.btn:hover { background: var(--actie-hover); color: var(--actie-tekst); }
.btn:active { transform: translateY(1px); }
.btn.ghost { min-height: 48px; background: transparent; box-shadow: inset 0 0 0 var(--lijn-dik) var(--lijn); font-size: 1rem; }
.btn.ghost:hover { background: var(--bg-verdiept); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.zin { display: block; font-family: var(--font-kop); font-weight: 600; font-size: var(--t-zin); line-height: 1.3; letter-spacing: -0.015em; }
.zin textarea {
display: block; width: 100%; margin: 0; padding: 0; border: 0; resize: none; overflow: hidden;
font: inherit; letter-spacing: inherit; color: var(--blauw); caret-color: var(--oranje); background: transparent;
background-image: linear-gradient(transparent calc(1.3em - 2px), var(--lijn) calc(1.3em - 2px), var(--lijn) 1.3em);
background-size: 100% 1.3em; min-height: 2.6em; field-sizing: content;
}
.zin textarea::placeholder { color: var(--tekst-zacht); opacity: .7; }
.zin textarea:focus { outline: none; background-image: linear-gradient(transparent calc(1.3em - 3px), var(--blauw) calc(1.3em - 3px), var(--blauw) 1.3em); }
label { display: block; font-weight: 600; margin: var(--r-5) 0 var(--r-2); }
input, textarea, select { font-family: var(--font-tekst); font-size: max(16px, var(--t-body)); color: var(--tekst); }
input:not([type=checkbox]):not([type=radio]), #pane textarea {
width: 100%; min-height: var(--tik); padding: 10px 0; border: 0; border-bottom: 2px solid var(--lijn); border-radius: 0; background: transparent;
}
#pane textarea { resize: vertical; line-height: 1.5; }
input:focus, #pane textarea:focus { outline: none; border-bottom-color: var(--blauw); box-shadow: 0 2px 0 var(--blauw); }
.row { display: flex; gap: var(--r-2); align-items: flex-end; }
.row input { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: var(--r-2); margin: var(--r-3) 0; }
.chip {
min-height: var(--tik); padding: 0 var(--r-4); border: var(--lijn-dik) solid var(--lijn); border-radius: var(--radius-chip);
background: transparent; color: var(--tekst); font: 500 var(--t-klein)/1 var(--font-tekst); cursor: pointer; transition: background-color .12s;
}
.chip:hover { background: var(--bg-verdiept); }
.chip[aria-pressed=true] { background: var(--inkt); color: var(--papier); }
mark { color: var(--tekst); padding: 0.04em 0.22em; border-radius: var(--radius-mark); background: var(--mark-extra); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
mark.inc { background: var(--mark-inc); }
mark.extra { background: var(--mark-extra); }
mark.out { background: var(--mark-out); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r-7); }
.steps li { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); column-gap: var(--r-3); align-items: start; }
.steps .scene { grid-column: 1 / -1; height: 120px; margin-bottom: var(--r-4); }
.steps .n { font-family: var(--font-kop); font-weight: 800; font-size: 4.25rem; line-height: .82; letter-spacing: -0.05em; }
.steps h3 { margin: 2px 0 var(--r-2); font-size: 1.5rem; }
.steps p { margin: 0; }
.cards, .two { display: grid; }
.card { padding: var(--r-5) 0; border-top: var(--lijn-dik) solid var(--lijn); }
.card h3 { margin-bottom: var(--r-2); }
.card p { margin: 0 0 var(--r-2); }
.card small { font-family: var(--font-kop); font-weight: 650; font-size: 1rem; }
.cards .card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--r-4); }
.cards .card small { grid-row: 1; grid-column: 2; white-space: nowrap; }
.cards .card p { grid-column: 1 / -1; }
@media (min-width: 720px) { .two { grid-template-columns: 1fr 1fr; column-gap: var(--r-6); } }
details { border-top: var(--lijn-dik) solid var(--lijn); }
details:last-of-type { border-bottom: var(--lijn-dik) solid var(--lijn); }
summary {
display: flex; align-items: center; justify-content: space-between; gap: var(--r-4);
min-height: 60px; padding: var(--r-3) 0; cursor: pointer; list-style: none;
font-family: var(--font-kop); font-weight: 650; font-size: 1.1875rem; letter-spacing: -0.01em;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-family: var(--font-kop); font-weight: 400; font-size: 1.75rem; line-height: 1; transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 0 0 var(--r-5); max-width: 34em; }
ascii-veld {
display: block; position: relative; overflow: hidden; pointer-events: none; user-select: none;
font-family: var(--font-ascii); font-size: var(--ascii-size); line-height: var(--ascii-lh); font-weight: 400;
}
.achter { position: absolute; inset: 0; z-index: 0; -webkit-mask-image: linear-gradient(to right, transparent 30%, #000 85%); mask-image: linear-gradient(to right, transparent 30%, #000 85%); }
.voor { position: relative; z-index: 1; }
.pagina-veld { position: fixed; inset: 0; z-index: 0; --ascii-size: 12px; }
body > .w { position: relative; z-index: 1; }
body > .w > header, .w main > section, body > .w > footer {
background: var(--papier); margin-inline: calc(var(--rand) * -1); padding-inline: var(--rand);
}
.w main { display: block; }
.w main > section { padding-block: var(--r-5); }
.w main > section + section { margin-top: clamp(150px, 22vh, 240px); }
.w main { padding-bottom: clamp(150px, 22vh, 240px); }
.w main > section.hero { margin-top: clamp(200px, 34vh, 340px); padding-block: var(--r-5); }
.hero .wie { margin: var(--r-7) 0 0; padding-top: var(--r-5); border-top: var(--lijn-dik) solid var(--lijn); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero form { display: grid; gap: var(--r-4); }
.hero .aanhef { margin: 0; font-family: var(--font-kop); font-weight: 500; font-size: 1.25rem; color: var(--tekst-zacht); }
.hero .zin { font-size: clamp(2.125rem, 9vw, 3.5rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.03em; margin: 0; }
.hero .zin textarea { margin-top: .1em; font-weight: 600; line-height: 1.12; min-height: 2.24em;
background-image: linear-gradient(transparent calc(1.12em - 3px), var(--lijn) calc(1.12em - 3px), var(--lijn) 1.12em); background-size: 100% 1.12em; }
.hero .zin textarea:focus { background-image: linear-gradient(transparent calc(1.12em - 4px), var(--blauw) calc(1.12em - 4px), var(--blauw) 1.12em); }
.hero .verstuur { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-3) var(--r-5); margin-top: var(--r-4); }
.hero .verstuur .note { margin: 0; max-width: 18em; }
body > .w > footer { border-top: 0; }
@media (min-width: 720px) { :root { --rand: 48px; } }
.hero form .zin { width: 100%; }
.step { font-size: var(--t-klein); font-weight: 600; color: var(--tekst-zacht); margin: 0 0 var(--r-2); }
#pane h1 { font-size: var(--t-kop-2); margin-bottom: var(--r-3); }
.err { color: var(--fout); font-weight: 600; min-height: 1.5em; margin-top: var(--r-4); }
.err:empty { min-height: 0; margin: 0; }
.nav { display: flex; flex-wrap: wrap; gap: var(--r-3); margin-top: var(--r-6); }
.req { display: grid; gap: var(--r-7); padding-bottom: var(--r-8); }
@media (min-width: 880px) { .req { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .req > div:last-child { position: sticky; top: var(--r-5); } }
.dur { margin: var(--r-3) 0 var(--r-6); font-size: var(--t-klein); }
.dur-h { display: flex; justify-content: space-between; gap: var(--r-3); margin-bottom: var(--r-2); }
.dur-h b { font-family: var(--font-kop); font-weight: 700; font-size: 1.0625rem; }
.track { position: relative; height: 8px; background: var(--bg-verdiept); border-radius: var(--radius-chip); }
.fill { position: absolute; inset: 0 auto 0 0; background: var(--inkt); border-radius: var(--radius-chip); transition: width .3s; }
.thumb { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; background: var(--oranje); border: 2px solid var(--inkt); border-radius: 50%; transition: left .3s; }
.ticks { display: flex; justify-content: space-between; margin-top: var(--r-2); color: var(--tekst-zacht); }
.hl { margin-top: var(--r-3); padding: var(--r-3) var(--r-4); background: var(--bg-blad); border-radius: var(--radius-blad); line-height: 1.75; }
.found { list-style: none; margin: 0; padding: 0; }
.found li { padding: var(--r-3) 0; border-top: 1px solid var(--papier-2); font-size: var(--t-klein); }
.found .lv { color: var(--tekst-zacht); margin-left: var(--r-1); }
.verdict { padding: var(--r-5); background: var(--bg-blad); border: var(--lijn-dik) solid var(--lijn); border-radius: var(--radius-blad); margin: var(--r-4) 0; }
.verdict h3 { margin-bottom: var(--r-2); }
.verdict ul { margin: 0 0 var(--r-3); padding-left: 1.2em; }
.sum { white-space: pre-wrap; background: var(--bg-verdiept); padding: var(--r-4); border-radius: var(--radius-blad); font-size: var(--t-klein); }
.blad { position: relative; background: var(--bg-blad); border: var(--lijn-dik) solid var(--lijn); border-radius: var(--radius-blad); padding: var(--r-5); min-height: 300px; overflow: hidden; }
.blad-kop { display: grid; gap: 2px; margin-bottom: var(--r-4); }
.blad-kop b { font-family: var(--font-kop); font-weight: 750; font-size: 1.625rem; letter-spacing: -0.025em; line-height: 1.05; }
.blad-kop span { font-size: var(--t-klein); color: var(--tekst-zacht); }
.blad-idee { font-family: var(--font-kop); font-weight: 500; font-size: 1.125rem; line-height: 1.35; color: var(--blauw); margin-bottom: var(--r-5); }
.blad-leeg { color: var(--tekst-zacht); padding: var(--r-6) 0; }
.schermen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--r-3); }
.scherm { border: var(--lijn-dik) solid var(--lijn); border-radius: var(--radius-scherm); overflow: hidden; display: flex; flex-direction: column; aspect-ratio: 3 / 4; }
.scherm b { padding: 6px 8px; border-bottom: var(--lijn-dik) solid var(--lijn); font-family: var(--font-kop); font-weight: 650; font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scherm pre { flex: 1; margin: 0; padding: 6px 8px; overflow: hidden; font-family: var(--font-ascii); font-size: 8px; line-height: 1.3; color: var(--k, var(--inkt)); }
.werk { margin: var(--r-4) 0 0; font-size: var(--t-klein); }
.werk span { font-family: var(--font-ascii); font-size: .8125rem; letter-spacing: .05em; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
:root { --tussen: clamp(96px, 18vh, 200px); }
.pagina { position: relative; z-index: 1; max-width: 76rem; margin: 0 auto; padding: 0 var(--rand); }
.pagina > header { align-items: flex-start; padding-top: var(--r-3); }
.stroom { display: flex; flex-direction: column; gap: var(--tussen); padding: clamp(150px, 30vh, 300px) 0 var(--tussen); }
.los { position: relative; background: var(--papier); padding: var(--r-5); margin: 0 0 0 var(--x, 0px); width: fit-content; max-width: min(calc(100% - var(--x, 0px)), var(--b, 32rem)); }
.los.r { margin-left: auto; margin-right: var(--x, 0px); }
.los.dicht { margin-top: calc(var(--tussen) * -0.55); }
.los.klein { padding: 2px var(--r-3); }
.los > :last-child { margin-bottom: 0; }
.los h2 { margin-bottom: var(--r-3); }
.los .btn { margin-top: var(--r-2); }
.stappen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tussen); }
.stappen .n { display: block; font-family: var(--font-kop); font-weight: 800; font-size: 5.5rem; line-height: .78; letter-spacing: -0.05em; margin-bottom: var(--r-4); }
.stappen h3 { font-size: 1.5rem; margin-bottom: var(--r-2); }
.stappen p { margin: 0; }
.maat h3 { margin-bottom: 2px; }
.maat small { display: block; font-family: var(--font-kop); font-weight: 650; font-size: 1rem; color: var(--tekst-zacht); margin-bottom: var(--r-3); }
.los details:last-of-type { border-bottom: var(--lijn-dik) solid var(--lijn); }
.brief .aanhef { margin: 0 0 var(--r-3); font-family: var(--font-kop); font-weight: 500; font-size: 1.25rem; color: var(--tekst-zacht); }
.brief .zin { font-size: clamp(2.125rem, 9vw, 3.5rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.03em; margin: 0; }
.brief .zin textarea { margin-top: .1em; font-weight: 600; line-height: 1.12; min-height: 2.24em;
background-image: linear-gradient(transparent calc(1.12em - 3px), var(--lijn) calc(1.12em - 3px), var(--lijn) 1.12em); background-size: 100% 1.12em; }
.brief .zin textarea:focus { background-image: linear-gradient(transparent calc(1.12em - 4px), var(--blauw) calc(1.12em - 4px), var(--blauw) 1.12em); }
.brief .verstuur { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-3) var(--r-5); margin-top: var(--r-5); }
.brief .verstuur .btn { margin: 0; }
.brief .verstuur .note { margin: 0; max-width: 18em; }
.pagina footer.los { border: 0; color: var(--tekst-zacht); padding-bottom: var(--r-6); }
.pagina footer .logo-groot { margin-bottom: var(--r-5); }
.intro { padding-block: var(--r-6); }
.intro .aanhef { margin: 0 0 var(--r-4); font-family: var(--font-kop); font-weight: 500; font-size: 1.25rem; color: var(--tekst-zacht); }
.zin-groot { margin: 0; font-family: var(--font-kop); font-weight: 750; font-size: clamp(2.375rem, 7.4vw, 5.25rem); line-height: 1.04; letter-spacing: -0.035em; text-wrap: pretty; cursor: text; }
.invul { color: var(--blauw); font-weight: 650; outline: none; caret-color: var(--oranje); white-space: pre-wrap; overflow-wrap: anywhere; }
.invul::after { content: ''; display: inline-block; width: .52em; height: .52em; margin-left: .1em; border: .11em solid var(--oranje); box-sizing: border-box; transition: background-color .15s; }
.invul:focus::after { background: var(--oranje); }
.intro .stem { margin: var(--r-4) 0 0; font-family: var(--font-kop); font-weight: 500; font-size: 1.125rem; color: var(--tekst-zacht); }
.invul::after { display: none; }
.regel.nu .invul::after { display: inline-block; }
.regel + .regel { margin-top: var(--r-8); }
.regel.komt { animation: opkomen .55s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes opkomen { from { opacity: 0; transform: translateY(14px); } }
.zin-mid { margin: 0; font-family: var(--font-kop); font-weight: 700; font-size: clamp(1.75rem, 4.6vw, 2.875rem); line-height: 1.1; letter-spacing: -0.03em; text-wrap: pretty; cursor: text; }
.zin-klein { margin-top: var(--r-3); font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 600; }
.tokens { color: var(--blauw); font-weight: 650; }
.zin-mid input.inline { width: 9ch; min-height: 0; padding: 0; border: 0; border-bottom: .07em solid var(--lijn); border-radius: 0; font: inherit; letter-spacing: inherit; color: var(--blauw); background: transparent; caret-color: var(--oranje); }
.zin-mid input.inline:focus { border-bottom-color: var(--blauw); box-shadow: none; }
.zin-mid input.inline::placeholder { color: var(--tekst-zacht); opacity: .5; }
.regel .note { margin-top: var(--r-3); }
.keuzes { display: flex; flex-wrap: wrap; gap: var(--r-2); margin-top: var(--r-5); }
.chip { display: inline-flex; align-items: center; gap: 8px; }
.chip[data-lv]::before { content: ''; width: 10px; height: 10px; border-radius: 2px; background: var(--mark-extra); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.chip[data-lv=inc]::before { background: var(--groen); }
.chip[data-lv=extra]::before { background: var(--geel); }
.chip[data-lv=out]::before { background: var(--roze); }
.chip .kost { font-family: var(--font-ascii); font-size: 11px; letter-spacing: .05em; opacity: .65; }
.chip.meer { border-style: dashed; }
.eigen { display: flex; flex-wrap: wrap; gap: var(--r-2); margin-top: var(--r-2); }
.eigen input.chip-input { width: 13rem; min-height: var(--tik); padding: 0 var(--r-4); border: var(--lijn-dik) solid var(--papier-2); border-radius: var(--radius-chip); font-size: max(16px, var(--t-klein)); background: transparent; }
.eigen input.chip-input:focus { border-color: var(--blauw); box-shadow: none; }
.regel .found { margin-top: var(--r-4); max-width: 36rem; }
.regel-voet { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-3) var(--r-5); margin-top: var(--r-6); }
.regel-voet .btn { margin: 0; }
.regel-voet .note { margin: 0; max-width: 18em; }
.regel:not(.nu) .regel-voet { display: none; }
.fout { flex-basis: 100%; margin: 0; color: var(--fout); font-weight: 600; }
.fout:empty { display: none; }
.meter { position: sticky; bottom: 12px; z-index: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; width: fit-content; margin-top: var(--r-7); padding: 10px 16px; border-radius: 12px; background: var(--inkt); color: var(--papier); font-size: var(--t-klein); }
.meter b { font-family: var(--font-kop); font-weight: 700; }
.meter .balk { font-family: var(--font-ascii); font-size: 12px; color: var(--geel); letter-spacing: .08em; }
.meter[hidden] { display: none; }
.uitslag { margin-top: var(--r-8); display: grid; gap: var(--r-4); }
.uitslag h2 { margin: 0; }
.uitslag .nav { margin-top: var(--r-2); }
@media (prefers-reduced-motion: reduce) { .regel.komt { animation: none; } }
.aanzetten { display: flex; flex-wrap: wrap; gap: var(--r-2); margin-top: var(--r-4); }
.aanzet { min-height: var(--tik); padding: 10px 14px; border: var(--lijn-dik) solid var(--papier-2); border-radius: 12px; background: transparent; color: var(--tekst); font: 500 var(--t-klein)/1.3 var(--font-tekst); text-align: left; cursor: pointer; transition: background-color .12s; }
.aanzet:hover { background: var(--papier-2); }
.passend { width: 100%; }
.ja-nee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: var(--r-3); }
.ja-nee > div { padding: var(--r-5); border-radius: var(--radius-blad); background: color-mix(in oklab, var(--groen) 12%, var(--papier)); }
.ja-nee > div + div { background: color-mix(in oklab, var(--roze) 12%, var(--papier)); }
.ja-nee h3 { margin-bottom: var(--r-3); }
.ja-nee p { margin: 0; }
@media (max-width: 520px) { .ja-nee { gap: var(--r-2); } .ja-nee p { font-size: var(--t-klein); } .ja-nee > div, .ja-nee > div + div { padding: var(--r-4) var(--r-3); } }
.uitslag h2 { font-size: var(--t-kop-2); }
.uitslag-rij { display: grid; gap: var(--r-6); align-items: start; }
@media (min-width: 900px) { .uitslag-rij { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.uitslag-blad { display: grid; gap: var(--r-4); }
.uitslag-blad .verdict { margin: 0; }
.afspraak { padding: var(--r-5); border-radius: var(--radius-blad); background: color-mix(in oklab, var(--blauw) 9%, var(--papier)); }
.afspraak-kop { font-size: 1.625rem; letter-spacing: -0.025em; margin-bottom: var(--r-2); }
.afspraak > .note { margin: 0; }
.afspraak fieldset { border: 0; margin: var(--r-5) 0 0; padding: 0; min-width: 0; }
.afspraak legend { padding: 0; margin-bottom: var(--r-2); font-weight: 600; }
.dagen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--r-2); }
@media (min-width: 560px) { .dagen { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 900px) { .uitslag .dagen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dagen [role=radio] { display: grid; justify-items: center; gap: 0; min-height: 76px; padding: 8px 4px; border: var(--lijn-dik) solid var(--lijn); border-radius: 12px; background: transparent; color: var(--tekst); font: 500 var(--t-klein)/1.2 var(--font-tekst); cursor: pointer; }
.dagen b { font-family: var(--font-kop); font-weight: 750; font-size: 1.625rem; line-height: 1.05; letter-spacing: -0.03em; }
.tijden { display: flex; flex-wrap: wrap; gap: var(--r-2); }
.tijden [role=radio] { min-height: var(--tik); padding: 0 var(--r-4); border: var(--lijn-dik) solid var(--lijn); border-radius: var(--radius-chip); background: transparent; color: var(--tekst); font: 500 var(--t-body)/1 var(--font-tekst); cursor: pointer; }
.afspraak [role=radio]:hover { background: var(--papier-2); }
.afspraak [role=radio][aria-checked=true] { background: var(--inkt); color: var(--papier); }
.keuze-zin { margin: var(--r-6) 0 0; font-family: var(--font-kop); font-weight: 700; font-size: clamp(1.375rem, 3.6vw, 1.875rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--blauw); }
.afspraak .regel-voet { margin-top: var(--r-5); }
.komt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-2); margin-top: var(--r-5); max-width: 46rem; }
.komt[hidden], .aanzetten[hidden] { display: none; }
.komt .note { flex-basis: 100%; margin: 0 0 2px; }
.tag { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border: var(--lijn-dik) solid var(--lijn); border-radius: var(--radius-chip); background: var(--papier); font: 500 var(--t-klein)/1 var(--font-tekst); cursor: default; }
.tag::before { content: ''; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.tag[data-lv=basis] { border-color: var(--papier-2); color: var(--tekst-zacht); }
.tag[data-lv=basis]::before { box-shadow: inset 0 0 0 1.5px var(--inkt-2); }
.tag[data-lv=inc]::before { background: var(--groen); }
.tag[data-lv=extra]::before { background: var(--geel); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.tag[data-lv=out]::before { background: var(--roze); }
.tag .kost { font-family: var(--font-ascii); font-size: 11px; letter-spacing: .05em; opacity: .65; }
.tag.nieuw { animation: tag-in .4s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes tag-in { from { opacity: 0; transform: translateY(6px) scale(.92); } }
@media (prefers-reduced-motion: reduce) { .tag.nieuw { animation: none; } }