:root { --bg:#f6f4ef; --karte:#fff; --text:#1f2328; --gedimmt:#5f6670; --rand:#ddd8cc; --akzent:#9a3412;
        --ok:#166534; --warn:#92400e; --fout:#b91c1c; --fout-bg:#fef2f2; --warn-bg:#fffbeb; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); }
.kopf { display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; padding:12px 16px; background:#2b2118; color:#fff; }
.kopf a, .kopf .link { color:#f3e9dc; text-decoration:none; }
.kopf nav { display:flex; flex-wrap:wrap; gap:14px; }
.kopf .rechts { margin-left:auto; display:flex; gap:12px; align-items:center; }
.marke { font-weight:600; }
.inline { display:inline; margin:0; }
.link { background:none; border:0; padding:0; font:inherit; cursor:pointer; }
.link.aktiv { text-decoration:underline; font-weight:600; }
main { max-width:1180px; margin:0 auto; padding:16px; }
footer { text-align:center; color:var(--gedimmt); font-size:13px; padding:24px 16px; }
h1 small, h2 small { color:var(--gedimmt); font-weight:400; font-size:.6em; }
.karte { background:var(--karte); border:1px solid var(--rand); border-radius:8px; padding:16px; margin:12px 0; }
.schmal { max-width:420px; margin:40px auto; }
.raster { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; align-items:end; }
.raster .breit { grid-column:span 2; }
label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--gedimmt); }
label.vink { flex-direction:row; align-items:center; gap:8px; color:var(--text); margin:10px 0; }
input, select { font:inherit; padding:8px 10px; border:1px solid var(--rand); border-radius:6px; background:#fff; color:var(--text); }
button, .knop { font:inherit; cursor:pointer; border-radius:6px; padding:7px 14px; border:1px solid var(--rand); background:#fff; color:var(--text); text-decoration:none; display:inline-block; }
.primair { background:var(--akzent); border-color:var(--akzent); color:#fff; }
.gevaar { background:var(--fout); border-color:var(--fout); color:#fff; }
fieldset { border:1px solid var(--rand); border-radius:6px; margin:12px 0; }
.rij { display:grid; grid-template-columns:140px 1fr 1fr; gap:8px; margin:6px 0; align-items:center; }
.tabel { width:100%; border-collapse:collapse; background:var(--karte); border:1px solid var(--rand); }
.tabel th, .tabel td { padding:8px 10px; border-bottom:1px solid var(--rand); text-align:left; vertical-align:top; }
.tabel th { background:#efebe2; font-size:13px; }
.zahl { white-space:nowrap; text-align:right; }
.fehler { background:var(--fout-bg); border:1px solid #fecaca; color:var(--fout); padding:10px 12px; border-radius:6px; margin:10px 0; }
.waarschuwing { background:var(--warn-bg); color:var(--warn); padding:2px 8px; border-radius:4px; margin-left:8px; }
div.waarschuwing { display:block; margin:0 0 10px; padding:10px 12px; }
.hint { color:var(--gedimmt); font-size:13px; }
.groot { font-size:20px; font-weight:600; }
.code { color:var(--gedimmt); font-size:12px; }
.badge { background:#e0e7ff; color:#3730a3; padding:1px 6px; border-radius:4px; font-size:12px; }
.status { padding:2px 8px; border-radius:4px; font-size:13px; background:#eee; }
.s-confirmed { background:#dcfce7; color:var(--ok); }
.s-processing, .s-pending, .s-unknown { background:var(--warn-bg); color:var(--warn); }
.s-failed { background:var(--fout-bg); color:var(--fout); }
.s-cancelled { background:#e5e7eb; color:#374151; }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; }
.kv dt { color:var(--gedimmt); }
.kv dd { margin:0; }
.lijst li { margin:4px 0; }
.doku { overflow-x:auto; }
.doku pre { background:#f3f1ec; padding:10px; overflow-x:auto; border-radius:6px; }
.doku table { border-collapse:collapse; } .doku td, .doku th { border:1px solid var(--rand); padding:4px 8px; }
@media (max-width:700px) {
  .raster .breit { grid-column:auto; }
  .rij { grid-template-columns:1fr; }
  .tabel { display:block; overflow-x:auto; }
  .kopf .rechts { margin-left:0; }
}
.hinweis { background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; padding:12px 14px; border-radius:8px; margin:8px 0 12px; }
.groot-hinweis { font-size:17px; font-weight:600; }
.samenvatting { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; }
.samenvatting li { padding:6px 10px; border-radius:6px; background:#eee; }
table.sorteerbaar th[data-sort] { cursor:pointer; user-select:none; }
table.sorteerbaar th[data-richting="auf"]::after { content:" ▲"; }
table.sorteerbaar th[data-richting="ab"]::after { content:" ▼"; }