@font-face{font-family:"Public Sans";font-weight:400 800;font-display:swap;src:url(/assets/fonts/public-sans-latin.woff2) format("woff2")}
:root{--canvas:#f6f7f9;--vlak:#fff;--ink:#1d2129;--zacht:#626a78;--lijn:#e4e7ec;--accent:#5b4be6;--accent-donker:#4a3bd0;--tint:#efedfd;--merk:#03335d;--lead:#1f66d9;--klant:#0c7a52;--gestopt:#6b7280;--rood:#c0362c}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);font:15px/1.5 "Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent-donker);text-decoration:none}
a:hover{text-decoration:underline}
small{display:block;color:var(--zacht);font-size:.8125rem}
.zacht,.hint{color:var(--zacht)}
.hint{font-size:.8125rem;margin:4px 0 0}

.balk{display:flex;justify-content:space-between;align-items:center;gap:16px;height:52px;padding:0 20px;background:var(--vlak);border-bottom:1px solid var(--lijn)}
.merk{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700}
.merk:hover{text-decoration:none}
.merk .zacht{font-weight:500}
.merk-teken{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--merk);color:#fff;font-size:.6875rem;font-weight:800;letter-spacing:.02em}

main{max-width:1120px;margin:0 auto;padding:28px 20px 72px}
main.midden{max-width:420px;padding-top:12vh}
h1{display:flex;align-items:center;gap:12px;margin:0;font-size:1.5rem;line-height:1.2;font-weight:700;letter-spacing:-.01em}
h2{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:.9375rem;font-weight:600}
section{margin-top:28px}
.kop{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:space-between}
.terug{margin:0 0 12px;font-size:.875rem}
.voet{margin-top:36px;font-size:.875rem}

.vak{background:var(--vlak);border:1px solid var(--lijn);border-radius:12px}
form.vak,section.vak{padding:20px}
.vak h2{margin-bottom:0;font-size:1rem}
.leeg{margin:0;padding:18px 20px;color:var(--zacht)}
.aantal{color:var(--zacht);font-weight:500;font-size:.875rem}

.status{display:inline-block;padding:2px 8px;border-radius:5px;background:var(--gestopt);color:#fff;font-size:.6875rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.5}
.status-lead{background:var(--lead)}
.status-klant{background:var(--klant)}
.status-gestopt{background:var(--gestopt)}
.avatar{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;color:#fff;font-size:.8125rem;font-weight:700}
h1 .avatar{width:38px;height:38px;border-radius:10px;font-size:1rem}

.tabel{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:640px}
.klanten{table-layout:fixed}
.klanten th:nth-child(1){width:34%}
.klanten th:nth-child(2){width:28%}
.klanten th:nth-child(3){width:22%}
th,td{text-align:left;padding:10px 16px;vertical-align:middle;overflow-wrap:anywhere}
th{padding-block:9px;font-size:.8125rem;font-weight:600;color:var(--zacht)}
td{border-top:1px solid var(--lijn)}
tbody tr:hover{background:#fafafd}
.naam{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:600}
.naam small{font-weight:400}
.verlopen{color:var(--rood);font-weight:600}
.verlopen small{color:inherit}

label{display:block;margin:14px 0 5px;font-size:.8125rem;font-weight:600;color:var(--zacht)}
input,select,textarea{width:100%;font:inherit;padding:8px 10px;border:1px solid #cfd4dc;border-radius:8px;background:var(--vlak);color:inherit}
input:hover,select:hover,textarea:hover{border-color:#a9b0bc}
textarea{resize:vertical}
.velden{display:grid;gap:0 14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
button,.knop{display:inline-block;font:inherit;font-weight:600;padding:8px 14px;margin-top:16px;border:1px solid var(--accent);border-radius:8px;background:var(--accent);color:#fff;cursor:pointer}
button:hover,.knop:hover{background:var(--accent-donker);border-color:var(--accent-donker);text-decoration:none}
.knop{margin-top:0}
.knop::before{content:"+";margin-right:6px;font-weight:500}
button.licht{background:var(--vlak);border-color:#cfd4dc;color:var(--ink)}
button.licht:hover{background:var(--canvas);border-color:#a9b0bc}
button.klein{padding:3px 10px;margin:0;font-size:.8125rem;font-weight:500}
button.gevaar{background:var(--vlak);border-color:var(--rood);color:var(--rood)}
button.gevaar:hover{background:var(--rood);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.melding{margin:12px 0 0;padding:10px 14px;border-radius:8px;background:#fdf0ee;color:var(--rood)}
.check{display:flex;gap:8px;align-items:flex-start;margin-top:0;font-size:.9375rem;font-weight:400;color:var(--ink)}
.check input{width:auto;margin-top:4px}
.smal h1{margin-bottom:6px}
.smal button{width:100%}

.twee{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:20px;align-items:start;margin-top:20px}
.twee>section{margin-top:0}
.twee>div>*+*{margin-top:20px}
.enkel{max-width:640px;margin-top:20px}
.ads{list-style:none;padding:0;margin:8px 0 0}
.ads li{padding:8px 0;border-top:1px solid var(--lijn)}
.nieuwe-actie{padding-bottom:20px;border-bottom:1px solid var(--lijn)}
.acties{list-style:none;padding:0;margin:20px 0 0;border-left:2px solid var(--lijn)}
.acties li{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:0 0 18px 18px}
.acties li:last-child{padding-bottom:0}
.acties li::before{content:"";position:absolute;left:-6px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--vlak)}
.bedrag{padding:1px 7px;border-radius:5px;background:var(--tint);color:var(--accent-donker);font-size:.8125rem;font-weight:600}
.tekst{white-space:pre-line;margin:4px 0 0}
#acties>p{margin:16px 0 0}
@media (max-width:860px){.twee{grid-template-columns:minmax(0,1fr)}input,select,textarea{font-size:16px}main{padding:20px 14px 56px}.balk{padding:0 14px}}