*{box-sizing:border-box}
:root{--papier:#faf7f2;--inkt:#2b2622;--zacht:#6b6058;--lijn:#ddd3c4;--accent:#a8563c;--kaart:#fffdfa}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--papier:#17150f;--inkt:#efe8dc;
--zacht:#a99e8f;--lijn:#3a3428;--kaart:#201d16;--accent:#d98b6e}}
body{margin:0;background:var(--papier);color:var(--inkt);
font:17px/1.65 ui-serif,Georgia,'Iowan Old Style',serif;-webkit-font-smoothing:antialiased}
main,.kop,footer{max-width:1040px;margin:0 auto;padding:0 16px}
.kop{display:flex;align-items:baseline;gap:14px;padding-top:28px;padding-bottom:24px}
.merk{font:600 15px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.22em;color:var(--inkt);text-decoration:none}
.slogan{font:13px ui-sans-serif,system-ui,sans-serif;color:var(--zacht);font-style:italic}
h1{font-size:clamp(32px,5.4vw,54px);line-height:1.1;margin:26px 0 14px;letter-spacing:-.02em}
h2{font-size:clamp(24px,3.4vw,34px);margin:26px 0 10px}
.lead{font-size:19px;color:var(--zacht);max-width:60ch}
.fijn{font:14px/1.6 ui-sans-serif,system-ui,sans-serif;color:var(--zacht);max-width:62ch}
.fijn a,.tekstknop{color:var(--accent)}
.tekstknop{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:underline}
.stap{display:none}.stap.aan{display:block}
.dropzone{display:grid;place-items:center;gap:8px;min-height:260px;border:2px dashed var(--lijn);
border-radius:16px;background:var(--kaart);cursor:pointer;margin:26px 0 16px;text-align:center;padding:24px}
.dropzone.over{border-color:var(--accent);background:#fff8f3}
.dz-groot{font-size:24px}.dz-klein{font:14px ui-sans-serif,system-ui,sans-serif;color:var(--zacht)}
.balk{height:4px;background:var(--lijn);border-radius:4px;overflow:hidden;max-width:420px;margin:18px 0}
.balk i{display:block;height:100%;width:30%;background:var(--accent);animation:loop 1.4s infinite ease-in-out}
@keyframes loop{0%{margin-left:-30%}100%{margin-left:100%}}
.kz{display:grid;grid-template-columns:1.2fr .9fr;gap:30px;align-items:start;margin:22px 0}
@media(max-width:820px){.kz{grid-template-columns:1fr}}
.doek{position:relative;border:1px solid var(--lijn);border-radius:14px;overflow:hidden;background:#f4f4f4}
.doek.groot{max-width:560px;margin:18px 0}
.doek img.basis{width:100%;display:block}
.doek .schrift{position:absolute;background:var(--inktkleur,#1f1c19);-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;
mask-position:center;transition:all .22s ease}
.keus{margin:0 0 18px}
.keus h4{margin:0 0 8px;font:600 13px ui-sans-serif,system-ui,sans-serif;letter-spacing:.09em;
text-transform:uppercase;color:var(--zacht)}
.rij{display:flex;flex-wrap:wrap;gap:8px}
.pil{border:1px solid var(--lijn);background:var(--kaart);color:var(--inkt);border-radius:999px;
padding:8px 15px;font:14px ui-sans-serif,system-ui,sans-serif;cursor:pointer}
.pil[aria-pressed="true"]{background:var(--inkt);color:var(--papier);border-color:var(--inkt)}
.staal{width:34px;height:34px;border-radius:50%;border:1px solid var(--lijn);cursor:pointer;padding:0}
.staal[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:2px}
.prijsregel{border-top:1px solid var(--lijn);margin-top:20px;padding-top:14px;font:ui-sans-serif,system-ui,sans-serif}
.prijsregel .p{font-size:30px;font-weight:600;color:var(--accent)}
.knoppen{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
.knop{padding:14px 26px;border-radius:9px;border:1px solid var(--inkt);background:var(--kaart);
color:var(--inkt);font:600 15px ui-sans-serif,system-ui,sans-serif;cursor:pointer}
.knop.pri{background:var(--inkt);color:var(--papier)}
table.mand{border-collapse:collapse;width:100%;max-width:560px;font:15px ui-sans-serif,system-ui,sans-serif}
table.mand td{padding:11px 8px;border-bottom:1px solid var(--lijn)}
table.mand td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.fout{color:var(--accent);font:15px ui-sans-serif,system-ui,sans-serif}
footer{margin:70px auto 60px;padding-top:24px;border-top:1px solid var(--lijn);
font:14px/1.7 ui-sans-serif,system-ui,sans-serif;color:var(--zacht)}
footer a{color:var(--zacht)}

.code{font:600 2.4rem/1.2 ui-monospace,Menlo,monospace;letter-spacing:.18em;margin:.3em 0}