:root {
--bg:#f7f8fa; --card:#ffffff; --wash:#f3f4f7; --wash2:#f9fafb;
--line:#e9eaef; --grid:#f1f2f5; --axis:#d9dbe3;
--ink:#151821; --sub:#5f6b7d; --muted:#949cab;
--shadow:0 1px 2px rgba(16,24,40,.05);
--btn-bg:#16181f; --btn-ink:#ffffff;
--data:#2a78d6; --data-wash:rgba(42,120,214,.10);
--data-2:#eb6834; --data-3:#1baf7a; --data-4:#eda100;
--ramp-1:#cde2fb; --ramp-2:#9ec5f4; --ramp-3:#6da7ec; --ramp-4:#3987e5; --ramp-5:#256abf; --dash-outline:#9fb7dd;
--pos:#116329; --neg:#b42318;
--chip-blue-bg:#eef4fd; --chip-blue-ink:#1a5fb4; --chip-blue-dot:#2a78d6;
--chip-green-bg:#e9f6ee; --chip-green-ink:#116329; --chip-green-dot:#17984b;
--chip-orange-bg:#fdf4e7; --chip-orange-ink:#955104; --chip-orange-dot:#e8a13c;
--chip-gray-bg:#f1f2f4; --chip-gray-ink:#52596b; --chip-gray-dot:#98a1ad;
--chip-red-bg:#fdeeee; --chip-red-ink:#b42318; --chip-red-dot:#d03b3b;
--warn:#b2680d;
--site-breedte:none; --hoek:13px; --hoek-klein:8px;
--winkel-letter:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--winkel-accent:var(--btn-bg); --winkel-accent-ink:var(--btn-ink);
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg:#0d0e12; --card:#16181d; --wash:#1d1f26; --wash2:#1a1c22;
--line:rgba(255,255,255,.08); --grid:rgba(255,255,255,.05); --axis:rgba(255,255,255,.16);
--ink:#e4e6ec; --sub:#9aa1ac; --muted:#6f7681;
--shadow:0 1px 2px rgba(0,0,0,.35);
--btn-bg:#e6e8ee; --btn-ink:#111318;
--data:#3987e5; --data-wash:rgba(57,135,229,.14);
--data-2:#f28457; --data-3:#34c48f; --data-4:#f2b52a;
--ramp-1:#1b2f4a; --ramp-2:#224a78; --ramp-3:#2b66a8; --ramp-4:#3987e5; --ramp-5:#7db3f0; --dash-outline:rgba(57,135,229,.55);
--pos:#0ca30c; --neg:#e66767;
--chip-blue-bg:rgba(57,135,229,.16); --chip-blue-ink:#8db9f0; --chip-blue-dot:#3987e5;
--chip-green-bg:rgba(23,152,75,.16); --chip-green-ink:#6fce93; --chip-green-dot:#2ea45c;
--chip-orange-bg:rgba(232,161,60,.14); --chip-orange-ink:#e5b878; --chip-orange-dot:#d99a3d;
--chip-gray-bg:rgba(255,255,255,.07); --chip-gray-ink:#aab1bc; --chip-gray-dot:#6f7681;
--chip-red-bg:rgba(208,59,59,.16); --chip-red-ink:#e69a9a; --chip-red-dot:#d05555;
--warn:#d99a3d;
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--bg:#0d0e12; --card:#16181d; --wash:#1d1f26; --wash2:#1a1c22;
--line:rgba(255,255,255,.08); --grid:rgba(255,255,255,.05); --axis:rgba(255,255,255,.16);
--ink:#e4e6ec; --sub:#9aa1ac; --muted:#6f7681;
--shadow:0 1px 2px rgba(0,0,0,.35);
--btn-bg:#e6e8ee; --btn-ink:#111318;
--data:#3987e5; --data-wash:rgba(57,135,229,.14);
--data-2:#f28457; --data-3:#34c48f; --data-4:#f2b52a;
--ramp-1:#1b2f4a; --ramp-2:#224a78; --ramp-3:#2b66a8; --ramp-4:#3987e5; --ramp-5:#7db3f0; --dash-outline:rgba(57,135,229,.55);
--pos:#0ca30c; --neg:#e66767;
--chip-blue-bg:rgba(57,135,229,.16); --chip-blue-ink:#8db9f0; --chip-blue-dot:#3987e5;
--chip-green-bg:rgba(23,152,75,.16); --chip-green-ink:#6fce93; --chip-green-dot:#2ea45c;
--chip-orange-bg:rgba(232,161,60,.14); --chip-orange-ink:#e5b878; --chip-orange-dot:#d99a3d;
--chip-gray-bg:rgba(255,255,255,.07); --chip-gray-ink:#aab1bc; --chip-gray-dot:#6f7681;
--chip-red-bg:rgba(208,59,59,.16); --chip-red-ink:#e69a9a; --chip-red-dot:#d05555;
--warn:#d99a3d;
color-scheme: dark;
}
* { box-sizing: border-box; }
.card input, .card select, .card textarea { max-width: 100%; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }
body {
background: var(--bg); color: var(--ink);
font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
.card {
background: var(--card); border: 1px solid var(--line); border-radius: 12px;
box-shadow: var(--shadow); padding: 18px 20px;
}
.eyebrow {
font-size: 11px; font-weight: 600; letter-spacing: .07em;
text-transform: uppercase; color: var(--muted);
}
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side { border-right: 1px solid var(--line); background: var(--card);
padding: 20px 14px; display: flex; flex-direction: column; gap: 16px;
position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.logo { display: flex; align-items: center; gap: 9px; padding: 2px 8px; }
.logo-beeld { height: 24px; width: auto; display: block; }
.logo-beeld.donker { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .logo-beeld.licht { display: none; }
:root:not([data-theme="light"]) .logo-beeld.donker { display: block; }
}
:root[data-theme="dark"] .logo-beeld.licht { display: none; }
:root[data-theme="dark"] .logo-beeld.donker { display: block; }
.nav { display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; }
.nav-item { display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 8px;
color: var(--sub); text-decoration: none; width: 100%; border: 0; background: none;
font: inherit; text-align: left; cursor: pointer; }
.nav-item:hover { background: var(--wash); color: var(--ink); }
.nav-item.active { background: var(--wash); color: var(--ink); font-weight: 550; }
.nav-item .chev { margin-left: auto; color: var(--muted); font-size: 10px; }
.nav-group.open > .nav-item { color: var(--ink); font-weight: 550; }
.nav-sub { display: none; flex-direction: column; gap: 1px; padding: 2px 0 8px 16px; }
.nav-group.open .nav-sub { display: flex; }
.nav-sub a { display: flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 8px;
color: var(--sub); text-decoration: none; font-size: 13px; }
.nav-sub a:hover { background: var(--wash); color: var(--ink); }
.nav-sub a.active { background: var(--wash); color: var(--ink); font-weight: 550; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: flex-end; gap: 14px;
padding: 10px 28px; border-bottom: 1px solid var(--line); background: var(--card); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--wash);
border: 1px solid var(--line); display: grid; place-items: center;
font-size: 11.5px; font-weight: 600; color: var(--sub); }
.content { width: 100%; margin: 0 auto; padding: 26px 40px 40px; }
h1 { font-size: 21px; font-weight: 650; letter-spacing: -0.015em; margin: 0; }
.page-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--data); outline-offset: 2px; border-radius: 4px; }
.btn-primary { background: var(--btn-bg); color: var(--btn-ink); border-radius: 8px;
padding: 0 14px; font-weight: 550; font-size: 13.5px; height: 34px; box-sizing: border-box; }
.btn-primary:hover { opacity: .88; }
.ghost { border: 1px solid var(--axis); background: var(--card); color: var(--ink); border-radius: 8px;
padding: 0 13px; font-size: 13.5px; font-weight: 550; box-shadow: var(--shadow); height: 34px; box-sizing: border-box; }
.ghost:hover { background: var(--wash2); }
.ghost.gevaar { color: var(--neg); }
.ghost.gevaar:hover { background: var(--neg); color: #fff; border-color: var(--neg); }
a.btn-primary, button.btn-primary, a.ghost, button.ghost, label.btn-primary, label.ghost {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
white-space: nowrap; text-decoration: none; }
.btn-primary.small, .ghost.small { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
textarea { font: inherit; }
textarea.ghost, textarea.ghost.small { height: auto; min-height: 34px; padding: 8px 11px;
font-size: 13.5px; line-height: 1.4; resize: vertical; }
textarea.ghost.small { min-height: 28px; padding: 6px 9px; font-size: 12.5px; }
input.ghost { font-family: inherit; }
a.btn-primary { color: var(--btn-ink); }
summary.ghost, summary.btn-primary { list-style: none; }
summary.ghost::-webkit-details-marker, summary.btn-primary::-webkit-details-marker { display: none; }
a.ghost { color: var(--ink); }
.btnrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12.5px; font-weight: 550; color: var(--sub); }
.veld-hint { font-size: 12px; color: var(--muted); }
.veld-hint.fout { color: var(--neg); }
.veld-hint.goed { color: var(--pos); }
.field input, .field select, .field textarea { font: inherit; font-size: 13.5px; line-height: 1.35; color: var(--ink);
background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; outline: none;
box-shadow: inset 0 1px 1px rgba(16,24,40,.03);
transition: border-color .12s ease, box-shadow .12s ease; }
.field input:not([type=checkbox]):not([type=radio]), .field select { height: 34px; box-sizing: border-box; }
.field input::placeholder, .veld-eenheid input::placeholder, .zoekveld input::placeholder { color: var(--muted); }
.field label .opt { color: var(--muted); font-weight: 400; margin-left: 4px; }
.field input:disabled, .field select:disabled { background: var(--wash); color: var(--muted); box-shadow: none; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--axis); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.field select, select.ghost { appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 9px center; background-size: 14px; padding-right: 30px; }
.form-error { background: var(--wash); border: 1px solid var(--line); border-left: 3px solid var(--neg);
border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--ink); }
.form-melding { background: var(--wash); border: 1px solid var(--line); border-left: 3px solid var(--pos);
border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--ink); }
.form-let-op { background: var(--wash); border: 1px solid var(--line); border-left: 3px solid var(--warn);
border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--ink); }
.empty { padding: 34px 18px; text-align: center; color: var(--muted); font-size: 13.5px; }
.btn-primary.groot { width: 100%; height: 44px; font-size: 15px; border-radius: 10px; }
.nowrap { white-space: nowrap; }
.cmdk { position: fixed; inset: 0; background: rgba(14,17,24,.46); z-index: 90; padding: 7vh 16px 0; backdrop-filter: blur(2px); }
.cmdk-box { max-width: 960px; margin: 0 auto; height: 640px; max-height: calc(100vh - 14vh); background: var(--card); border: 1px solid var(--line);
border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,.45); display: flex; flex-direction: column; max-height: 82vh; }
.cmdk-kop { display: flex; align-items: center; gap: 10px; padding: 0 18px; height: 56px; flex: none; border-bottom: 1px solid var(--line); position: relative; }
.cmdk-wis, .cmdk-sluit { background: none; border: 0; color: var(--muted); cursor: pointer; border-radius: 7px; display: grid; place-items: center; flex: none; }
.cmdk-wis { width: 28px; height: 28px; } .cmdk-wis:hover { background: var(--wash); color: var(--ink); }
.cmdk-sluit { display: none; width: 44px; height: 44px; margin-right: -12px; color: var(--ink); }
.cmdk-kop::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--data); transform: scaleX(0); transform-origin: left; transition: transform .16s linear; }
.cmdk.bezig .cmdk-kop::after { transform: scaleX(.7); }
.cmdk-loep { color: var(--muted); flex: none; }
.cmdk-kop input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 16px; color: var(--ink); padding: 2px 0; }
.cmdk-kop input::placeholder { color: var(--muted); }
.cmdk-bereik { font-size: 12px; background: var(--wash); color: var(--ink); border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.cmdk-mic { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; display: flex; }
.cmdk-mic:hover, .cmdk-mic.aan { color: var(--data); background: var(--wash); }
.cmdk kbd { font: 11px/1.4 inherit; color: var(--muted); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; background: var(--card); margin-right: 2px; white-space: nowrap; }
.cmdk-gelezen { display: flex; gap: 4px; align-items: center; flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
.cmdk-gelezen span { background: #fff0c2; color: #6b4d00; border-radius: 6px; padding: 2px 8px; font-weight: 500; }
.cmdk-gelezen span.cmdk-los { background: #e6effc; color: #1a4f9c; }
.cmdk-gelezen .scope { background: var(--wash); color: var(--ink); cursor: pointer; border: 0; font: inherit; font-size: 12px; font-weight: 600; border-radius: 6px; height: 24px; padding: 0 8px; }
.cmdk-gelezen .scope:hover { background: var(--line); }
.cmdk-gelezen a { font-size: 12px; cursor: pointer; }
.cmdk-balk { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 12px; flex: none; border-bottom: 1px solid var(--line); }
.cmdk-balk:has(.cmdk-tabs:empty):has(.cmdk-gelezen[hidden]) { display: none; }
.cmdk-tabs { display: flex; gap: 4px; align-items: center; min-width: 0; overflow: hidden; }
.cmdk-tabs button { font: inherit; font-size: 12.5px; font-weight: 500; background: none; border: 0; border-radius: 7px; height: 28px; padding: 0 10px; color: var(--muted); cursor: pointer; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; flex: none; }
.cmdk-tabs button b { font-weight: 500; font-size: 11px; background: var(--wash); border-radius: 999px; padding: 0 6px; color: var(--muted); }
.cmdk-tabs button:hover { background: var(--wash); }
.cmdk-tabs button.aan { background: var(--ink); color: var(--card); font-weight: 600; }
.cmdk-tabs button.aan b { background: color-mix(in srgb, var(--card) 22%, transparent); color: var(--card); }
.cmdk-tabs button:disabled { cursor: default; }
.cmdk-ook { font-size: 12.5px; color: var(--sub); white-space: nowrap; margin: 0 4px; }
.cmdk-overal { color: var(--data) !important; font-weight: 600 !important; }
.cmdk-body { display: grid; grid-template-columns: minmax(0,1fr) 320px; min-height: 0; flex: 1; }
.cmdk-body.zonder { grid-template-columns: 1fr; }
.cmdk-list { overflow: auto; padding: 4px 8px 8px; min-height: 0; scrollbar-gutter: stable; }
.cmdk-groep { display: flex; justify-content: space-between; align-items: center; height: 34px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 8px 12px 0; }
.cmdk-groep em { font-style: normal; letter-spacing: 0; color: var(--muted); opacity: .8; margin-left: 4px; }
.cmdk-groep a { font-size: 11.5px; letter-spacing: 0; text-transform: none; font-weight: 500; cursor: pointer; }
.cmdk-item { display: grid; grid-template-columns: 32px minmax(0,1fr) 128px 96px; gap: 12px; align-items: center; padding: 0 12px; height: 48px; border-radius: 9px; cursor: pointer; color: var(--ink); text-decoration: none; }
.cmdk-item:hover { background: var(--wash); }
.cmdk-item.sel { background: color-mix(in srgb, var(--data) 12%, var(--card)); }
.cmdk-item .stc { min-width: 0; overflow: hidden; }
.cmdk-item .r { justify-content: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
.cmdk-item .cmdk-pad { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item .cmdk-kopieer { color: var(--muted); font-size: 12px; }
.cmdk-item.cmdk-meer { grid-template-columns: 32px minmax(0,1fr) auto; }
.cmdk-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); background: var(--wash); flex: none; }
.cmdk-ic svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cmdk-ic.klant { color: #1f5fd0; background: #e8effc; } .cmdk-ic.leverancier { color: #7a5320; background: #f7efe3; }
.cmdk-ic.artikel { color: #127a3d; background: #e7f6ec; } .cmdk-ic.bestelling { color: #5b3fb5; background: #eeeafb; }
.cmdk-ic.inkooporder { color: #a8640a; background: #fff2df; } .cmdk-ic.offerte { color: #0e7490; background: #e3f4f8; }
.cmdk-ic.factuur, .cmdk-ic.inkoopfactuur { color: #b3261e; background: #fdeceb; } .cmdk-ic.actie { color: #fff; background: var(--ink); }
.cmdk-ic.hier { color: #fff; background: var(--data); }
.cmdk-ic.document { color: #1f5fd0; background: #e8effc; } .cmdk-ic.hulp { color: #0e7490; background: #e3f4f8; } .cmdk-ic.vandaag { color: #a8640a; background: #fff2df; }
.cmdk-item .t { display: flex; flex-direction: column; min-width: 0; }
.cmdk-item .t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 13.5px; }
.cmdk-item .t small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item .r { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.cmdk-item.sel .r::after { content: "↵"; font-size: 11px; color: var(--data); border: 1px solid color-mix(in srgb, var(--data) 40%, transparent); border-radius: 4px; padding: 0 5px; flex: none; }
.cmdk-item:focus-visible { outline: 2px solid var(--data); outline-offset: -2px; }
.cmdk-item mark { background: none; color: var(--data); font-weight: 600; }
.cmdk-gevonden { display: block; background: #fff0c2; color: #6b4d00; border-radius: 6px; padding: 2px 8px; font-size: 11.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-status { border-radius: 999px; padding: 2px 9px; font-size: 11px; background: var(--wash); color: var(--ink); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.cmdk-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.cmdk-status.goed { background: #e7f6ec; color: #127a3d; } .cmdk-status.warn { background: #fff2df; color: #a8640a; } .cmdk-status.bad { background: #fdeceb; color: #b3261e; }
.cmdk-fout { margin: 8px 4px; padding: 10px 12px; border-radius: 8px; font-size: 13px; background: #fdeceb; color: #8a1c14; border: 1px solid #f5c6c2; }
.cmdk-fout button { background: none; border: 0; font: inherit; font-weight: 600; color: var(--data); cursor: pointer; text-decoration: underline; padding: 0 0 0 6px; }
.cmdk-empty { padding: 22px 12px 6px; color: var(--muted); font-size: 13px; }
.cmdk-empty b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 6px; }
.cmdk-bedoel { margin: 6px 8px 2px; background: #fff0c2; color: #6b4d00; border-radius: 7px; padding: 7px 10px; font-size: 13px; }
.cmdk-hulp { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 18px; padding: 12px 16px 14px; font-size: 12.5px; color: var(--ink); }
.cmdk-hulp code { background: var(--wash); border-radius: 4px; padding: 0 5px; font-size: 12px; }
.cmdk-voorbeeld { border-left: 1px solid var(--line); background: var(--wash); padding: 16px 18px; font-size: 12.5px; overflow: auto; min-height: 0; display: flex; flex-direction: column; }
.cmdk-voorbeeld:empty { display: none; }
.cmdk-body:has(.cmdk-voorbeeld:empty) { grid-template-columns: 1fr; }
.vb-kop { font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; color: var(--ink); }
.vb-sub { color: var(--muted); margin-top: 2px; }
.vb-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0; }
.vb-kv dt { color: var(--muted); } .vb-kv dd { margin: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.vb-regels { border: 1px solid var(--line); border-radius: 8px; background: var(--card); margin: 10px 0; font-size: 12px; }
.vb-regels div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; border-bottom: 1px solid var(--line); color: var(--ink); }
.vb-regels div:last-child { border-bottom: 0; } .vb-regels b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vb-regels.paden b { font-weight: 400; color: var(--muted); }
.vb-tekst { margin: 10px 0; color: var(--ink); line-height: 1.5; }
.vb-acties { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vb-acties a { border: 1px solid var(--line); border-radius: 7px; padding: 5px 10px; background: var(--card); cursor: pointer; font-size: 12px; font-weight: 500; color: var(--ink); text-decoration: none; }
.vb-acties a.primair { background: var(--data); color: #fff; border-color: var(--data); }
.vb-voet { margin-top: 12px; font-size: 11.5px; color: var(--muted); }
.cmdk-voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 40px; flex: none; padding: 0 16px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); background: var(--wash); white-space: nowrap; overflow: hidden; }
.cmdk-melding { color: var(--sub); overflow: hidden; text-overflow: ellipsis; }
.cmdk-calc .t span { font-size: 16px; font-weight: 600; }
.knop-melding { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--ink); color: var(--card); padding: 10px 16px; border-radius: 10px; font-size: 13.5px; box-shadow: 0 8px 30px rgba(0,0,0,.18); z-index: 60; animation: knopmelding 6s ease forwards; }
@keyframes knopmelding { 0% { opacity: 0; transform: translate(-50%, 8px); } 6%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.veld-licht { outline: 2px solid var(--data); outline-offset: 3px; border-radius: 6px; animation: veldlicht 2.4s ease-out forwards; }
@keyframes veldlicht { 0%, 70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--data) 25%, transparent); } 100% { box-shadow: none; outline-color: transparent; } }
@media (prefers-reduced-motion: no-preference) { .cmdk-item { animation: cmdkIn .16s ease both; } }
@keyframes cmdkIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
.cmdk { padding: 0; }
.cmdk-box { max-width: none; max-height: 100vh; height: 100vh; border-radius: 0; border: 0; grid-template-rows: 56px auto minmax(0,1fr); }
.cmdk-body { grid-template-columns: 1fr; }
.cmdk-voorbeeld { display: none; }
.cmdk-voet { display: none; }
.cmdk-esc { display: none; }
.cmdk-sluit { display: grid; }
.cmdk-gelezen { display: none; }
.cmdk-balk { position: relative; padding-right: 0; }
.cmdk-balk::after { content: ""; position: absolute; top: 0; right: 0; width: 28px; height: 100%;
background: linear-gradient(to right, transparent, var(--card)); pointer-events: none; }
.cmdk-tabs { overflow-x: auto; scrollbar-width: none; padding-right: 24px; }
.cmdk-tabs::-webkit-scrollbar { display: none; }
.cmdk-tabs button { height: 36px; }
.cmdk-item { grid-template-columns: 32px minmax(0,1fr) 96px; height: 52px; }
.cmdk-item .r { display: none; }
.cmdk-wis { width: 44px; height: 44px; }
.cmdk-mic { width: 44px; height: 44px; justify-content: center; }
}
.zk-veld { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; margin-bottom: 10px; color: var(--muted); }
.zk-veld input[type=search] { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 16px; color: var(--ink); }
.zk-gelezen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 14px; }
.zk-chip { background: #fff0c2; color: #6b4d00; border-radius: 6px; padding: 2px 8px; font-weight: 500; }
.zk-acties { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.zk-bewaar { display: flex; gap: 6px; align-items: center; }
.zk-pagina { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
.zk-filters { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 70px; }
.zk-h5 { margin: 12px 10px 4px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.zk-h5:first-child { margin-top: 0; }
.zk-filter { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 7px; color: var(--ink); text-decoration: none; font-size: 13px; }
.zk-filter b { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.zk-filter:hover { background: var(--wash); }
.zk-filter.aan { background: color-mix(in srgb, var(--data) 12%, var(--card)); color: var(--data); font-weight: 600; }
.zk-groepen { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.zk-tbl td.num, .zk-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zk-tbl th a { color: inherit; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; cursor: pointer; }
.zk-tbl th a:hover { color: var(--ink); }
.zk-tbl th.sorteer-aan a { color: var(--ink); font-weight: 700; }
.zk-tbl td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.zk-blad { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); }
.zk-bladknoppen { display: flex; gap: 8px; }
.zk-gevonden { background: #fff0c2; color: #6b4d00; border-radius: 6px; padding: 2px 8px; font-size: 11.5px; font-weight: 500; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
.mz { display: flex; flex-direction: column; gap: 14px; }
.mz-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.mz-groepen { padding: 10px 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.mz-groep { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--card); }
.mz-nr { width: 44px; text-align: center; }
.mz-naam { flex: 1; font-weight: 500; }
.mz-rij { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; cursor: pointer; }
.mz-rij:last-of-type { border-bottom: 0; }
.mz-paginas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 12px; margin-top: 8px; font-size: 12px; color: var(--sub); }
.mz-paginas code { color: var(--ink); }
.mz-toetsen { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 12.5px; color: var(--sub); margin-top: 6px; }
.mz-toetsen kbd { font: 11px/1.4 inherit; color: var(--ink); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; background: var(--card); }
.mz-velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; padding: 12px 18px; }
.mz-veld { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.hulp-paneel { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--card); border-left: 1px solid var(--line); box-shadow: -20px 0 50px -20px rgba(0,0,0,.35); z-index: 95; padding: 18px 22px; overflow: auto; font-size: 14px; line-height: 1.6; color: var(--ink); }
.hulp-paneel[hidden] { display: none; }
.hulp-paneel h2 { font-size: 20px; margin: 8px 0 10px; letter-spacing: -.01em; }
.hulp-kop { display: flex; justify-content: space-between; align-items: center; }
.hulp-acties { margin-top: 12px; }
@media (prefers-reduced-motion: no-preference) { .hulp-paneel { animation: hulpIn .18s ease; } }
@keyframes hulpIn { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 900px) { .zk-pagina, .mz-kolom { grid-template-columns: 1fr; } .zk-filters { position: static; flex-direction: row; flex-wrap: wrap; } }
.zk-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.zk-probeer { display: flex; gap: 8px; align-items: center; padding: 12px 14px; }
.zk-probeer input { flex: 1; }
.zk-cijfers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 14px 18px; }
.zk-cijfers b { font-size: 22px; font-weight: 700; display: block; } .zk-cijfers small { color: var(--muted); }
.zk-doen { white-space: nowrap; }
.zk-paneel { display: inline-block; } .zk-paneel summary { list-style: none; cursor: pointer; display: inline-block; }
.zk-paneel summary::-webkit-details-marker { display: none; }
.zk-paneelvak { position: absolute; left: 24px; right: 24px; margin-top: 8px; z-index: 30; background: var(--card); border: 1px solid var(--data); border-radius: 12px; padding: 14px 16px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.35); white-space: normal; text-align: left; }
.zk-paneelkop { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.zk-paneelkolommen { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px 24px; }
.zk-voorstel, .zk-keuze { display: flex; gap: 10px; align-items: flex-start; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); margin-bottom: 6px; cursor: pointer; }
.zk-voorstel span, .zk-keuze span { display: flex; flex-direction: column; } .zk-voorstel small, .zk-keuze small { color: var(--muted); }
.zk-paneelvoet { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.zk-paneelvoet > span:last-child { display: flex; gap: 8px; }
.zk-synoniemregel { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.zk-regelvorm { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.zk-velden { padding: 6px 18px; }
.zk-velden .veld-rij { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.zk-velden .veld-rij:last-child { border-bottom: 0; }
.zk-landingvoorstellen { padding: 6px 18px 10px; display: flex; flex-direction: column; gap: 6px; }
.zk-landingvoorstel { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.zk-landingvoorstel > span { flex: 1; display: flex; flex-direction: column; } .zk-landingvoorstel small { color: var(--muted); }
.ghost.small.stil { color: var(--muted); }
@media (max-width: 900px) { .zk-twee, .zk-paneelkolommen { grid-template-columns: 1fr; } }
.staven { display: flex; align-items: flex-end; gap: 4px; height: 140px; padding: 16px 18px; }
.staaf { flex: 1; min-width: 2px; background: var(--data); border-radius: 3px 3px 0 0; opacity: .85; }
.staaf:hover { opacity: 1; }
.kpis { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.kpi { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kpi + .kpi { border-left: 1px solid var(--line); }
.kpi-value { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi-meta { font-size: 12.5px; color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 8px 2px 7px;
font-size: 11.5px; font-weight: 550; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.chip.blue { background: var(--chip-blue-bg); color: var(--chip-blue-ink); }
.chip.blue::before { background: var(--chip-blue-dot); }
.chip.green { background: var(--chip-green-bg); color: var(--chip-green-ink); }
.chip.green::before { background: var(--chip-green-dot); }
.chip.orange { background: var(--chip-orange-bg); color: var(--chip-orange-ink); }
.chip.orange::before { background: var(--chip-orange-dot); }
.chip.gray { background: var(--chip-gray-bg); color: var(--chip-gray-ink); }
.chip.gray::before { background: var(--chip-gray-dot); }
.chip.red { background: var(--chip-red-bg); color: var(--chip-red-ink); }
.chip.red::before { background: var(--chip-red-dot); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
flex-wrap: wrap; margin-bottom: 20px; }
.head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.head-actions form { display: contents; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: var(--wash2); }
.seg a { padding: 5px 12px; border-radius: 6px; font-size: 13px; color: var(--sub); text-decoration: none; }
.seg a[aria-current="true"] { background: var(--card); color: var(--ink); font-weight: 550; box-shadow: 0 0 0 1px var(--line); }
.fchips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.fchip { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 12.5px;
color: var(--sub); background: var(--card); text-decoration: none; }
.fchip:hover { background: var(--wash2); }
.fchip[aria-current="true"] { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); font-weight: 550; }
.fchip .n { opacity: .6; margin-left: 4px; font-variant-numeric: tabular-nums; }
.searchbox { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px;
padding: 6px 11px; background: var(--card); min-width: 230px; color: var(--muted);
box-shadow: 0 1px 2px rgba(16,20,28,.04); }
.searchbox:focus-within { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.searchbox input { border: 0; background: none; outline: none; font: inherit; color: var(--ink); width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
color: var(--muted); padding: 10px 18px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 11px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--wash2); }
tr.rowlink { cursor: pointer; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { white-space: nowrap; }
th.num { text-align: right; }
.cell-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.table-scroll { overflow-x: auto; }
details.regeling { position: relative; display: inline-block; margin-left: 6px; }
details.regeling[open] > form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
background: var(--card); border: 1px solid var(--line); border-radius: 10px;
padding: 10px 12px; box-shadow: 0 8px 24px rgba(21, 24, 33, .12); white-space: nowrap; }
.pagebar { display: flex; align-items: center; gap: 10px; padding: 11px 18px; font-size: 12.5px; color: var(--muted); }
.pagebar .grow { flex: 1; }
.pagebar a { color: var(--sub); }
.card.flush { padding: 0; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.card-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.card-head > a.ghost:last-child, .card-head > button.ghost:last-child,
.card-head > a.btn-primary:last-child, .card-head > button.btn-primary:last-child,
.card-head > form:last-child, .card-head > .seg:last-child { margin-left: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.span8 { grid-column: span 8; min-width: 0; }
.span9 { grid-column: span 9; min-width: 0; }
.span7 { grid-column: span 7; min-width: 0; }
.span6 { grid-column: span 6; min-width: 0; }
.span5 { grid-column: span 5; min-width: 0; }
.span4 { grid-column: span 4; min-width: 0; }
.span12 { grid-column: span 12; min-width: 0; }
.span3 { grid-column: span 3; min-width: 0; }
.grid > aside { align-self: start; }
@media (max-width: 900px) { .span8, .span7, .span6, .span5, .span4, .span3 { grid-column: span 12; } }
table.dense th { padding: 8px 12px; }
table.dense td { padding: 8px 12px; }
table.dense.krap th, table.dense.krap td { padding: 7px 6px; }
table.boven td { vertical-align: top; padding-top: 12px; }
table.dense.krap th:first-child, table.dense.krap td:first-child { padding-left: 14px; }
table.dense.krap th:last-child, table.dense.krap td:last-child { padding-right: 14px; }
.voortgang { display: block; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; max-width: 120px; }
.voortgang span { display: block; height: 100%; background: var(--pos); }
.kv-lijst { padding: 10px 0 12px; }
.kv { display: flex; justify-content: space-between; gap: 14px; padding: 5px 18px; font-size: 13.5px; }
.kv .k { color: var(--muted); flex: none; }
.kv .v { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.timeline { padding: 12px 18px 14px; }
.tl { position: relative; padding-left: 22px; padding-bottom: 14px; font-size: 13.5px; }
.tl:last-child { padding-bottom: 2px; }
.tl::before { content: ""; position: absolute; left: 5px; top: 16px; bottom: -2px; width: 1px; background: var(--line); }
.tl:last-child::before { display: none; }
.tl::after { content: ""; position: absolute; left: 0; top: 5px; width: 7px; height: 7px; border-radius: 50%;
background: var(--card); border: 2px solid var(--data); }
.tl .t { color: var(--muted); font-size: 12px; }
@media print {
.side, .topbar, .niet-afdrukken, .cmdk { display: none !important; }
.app { display: block; }
.content { padding: 0; }
#factuurdoc { border: 0; box-shadow: none; max-width: none !important; }
}
[hidden] { display: none !important; }
.field { position: relative; }
.ac-lijst { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; margin-top: 4px;
background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
box-shadow: 0 12px 32px rgba(0,0,0,.14); }
.ac-item { display: block; width: 100%; text-align: left; padding: 8px 12px; font-size: 13px;
border-bottom: 1px solid var(--line); }
.ac-item:last-child { border-bottom: 0; }
.ac-item:hover { background: var(--wash); }
.topbar { position: sticky; top: 0; z-index: 80; }
.topbar > .ghost, .topbar > .menuwrap > .ghost, .topbar > .bel > summary.ghost, .topbar > .icon-btn {
background: var(--wash2); border: 1px solid var(--line); box-shadow: none;
color: var(--sub); border-radius: 8px; font-size: 13px; font-weight: 500;
display: inline-flex; align-items: center; height: 32px; line-height: 1; box-sizing: border-box; }
.topbar > span.ghost { padding: 0 12px; }
.topbar > .ghost:hover, .topbar > .menuwrap > .ghost:hover, .topbar > .bel > summary.ghost:hover,
.topbar > .icon-btn:hover { background: var(--wash); color: var(--ink); }
.topbar-badge { min-width: 18px; height: 18px; border-radius: 999px; background: var(--data);
color: #fff; font-size: 11px; font-weight: 650; display: inline-flex; align-items: center;
justify-content: center; padding: 0 5px; font-variant-numeric: tabular-nums; }
.bel { position: relative; }
.bel summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.bel summary::-webkit-details-marker { display: none; }
.bel-paneel { position: absolute; right: 0; top: calc(100% + 8px); width: 300px; background: var(--card);
border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 8px 28px rgba(16,24,40,.12);
padding: 8px 0 6px; z-index: 60; }
.bel-paneel a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px;
font-size: 13px; color: var(--ink); text-decoration: none; }
.bel-paneel a:hover { background: var(--wash); }
.bel-leeg { padding: 8px 12px; font-size: 13px; color: var(--muted); }
.kassa-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 6px 18px 16px; }
.kassa-tegel { position: relative; }
.kassa-tegel[hidden] { display: none; }
.tegel-klik { display: flex; flex-direction: column; width: 100%; text-align: left; border: 1px solid var(--line);
border-radius: 11px; background: var(--card); cursor: pointer; padding: 0 0 9px; overflow: hidden;
font: inherit; color: inherit; gap: 6px; }
.tegel-klik:hover { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.tegel-klik img, .tegel-vlak { width: 100%; height: 76px; object-fit: cover; display: flex; align-items: center;
justify-content: center; background: var(--wash); color: var(--muted); font-weight: 650; font-size: 19px; }
.tegel-naam { font-size: 12.5px; font-weight: 600; line-height: 1.25; padding: 0 9px; min-height: 31px; }
.tegel-voet { display: flex; align-items: center; gap: 6px; padding: 0 9px; font-size: 12px; }
.tegel-sku { color: var(--muted); font-size: 10.5px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tegel-voorraad { min-width: 20px; text-align: center; border-radius: 999px; background: var(--chip-blue-bg);
color: var(--chip-blue-ink); font-size: 10.5px; font-weight: 650; padding: 1px 5px; }
.tegel-ster { position: absolute; top: 5px; right: 5px; border: 0; background: rgba(255,255,255,.85);
border-radius: 999px; width: 24px; height: 24px; cursor: pointer; color: var(--muted); font-size: 13px; line-height: 1; }
.kassa-tegel.fav .tegel-ster { color: #e8a13c; }
.bon-bezig { opacity: 0.45; transition: opacity 120ms ease; }
.bon-regel { display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-bottom: 1px solid var(--grid); font-size: 13px; }
.bon-regel .naam { flex: 1; min-width: 0; }
.bon-regel .naam .cell-sub { font-size: 10.5px; }
.bon-regel input[name=aantal] { width: 46px; text-align: right; border: 1px solid var(--line); border-radius: 7px; padding: 3px 6px; font: inherit; background: var(--card); color: inherit; }
.bon-regel .stap { border: 1px solid var(--line); background: var(--card); color: inherit; border-radius: 7px; width: 22px; height: 22px; cursor: pointer; line-height: 1; }
.bon-regel .weg { border: 0; background: none; color: var(--neg); cursor: pointer; font-size: 15px; }
.parkeer-rij { display: flex; align-items: center; gap: 8px; padding: 8px 18px; font-size: 12.5px; border-bottom: 1px solid var(--grid); }
.crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.crumbs a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--axis); }
.side-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px;
padding: 6px 10px; color: var(--muted); font-size: 13px; background: var(--wash2); width: 100%; text-align: left;
cursor: pointer; font-family: inherit; }
.side-search kbd { margin-left: auto; font: 500 11px/1 inherit; border: 1px solid var(--line); border-radius: 4px;
padding: 2px 5px; color: var(--muted); background: var(--card); }
.icon-btn { position: relative; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
color: var(--sub); border: 0; background: none; cursor: pointer; }
.icon-btn:hover { background: var(--wash); color: var(--ink); }
body.zijbalk-dicht .app { grid-template-columns: 1fr; }
body.zijbalk-dicht .side { display: none; }
.shop-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); background: var(--card); }
.shop-header-in { max-width: var(--site-breedte); margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.shop-zoek { flex: 1; min-width: 220px; max-width: 460px; display: flex; align-items: center; gap: 8px;
border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; background: var(--wash2); }
.shop-zoek input { border: 0; background: none; outline: none; font: inherit; color: var(--ink); width: 100%; }
.shop-wagen { position: relative; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.shop-kop-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.shop-usp { border-bottom: 1px solid var(--line); background: var(--wash2); }
.usp-sterren .usp-sterrenrij { display: inline-flex; gap: 2px; flex: none; }
.usp-sterren > span:last-child { font-weight: 600; }
.shop-usp-in { max-width: var(--site-breedte); margin: 0 auto; padding: 7px 20px; display: flex; gap: 26px; flex-wrap: wrap;
font-size: 12.5px; color: var(--sub); }
.shop-usp-in span::before { content: "✓"; color: var(--pos); margin-right: 6px; font-weight: 700; }
.shop-main { max-width: var(--site-breedte); margin: 0 auto; padding: 26px 20px 40px; }
body.shop-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.shop-page > .shop-main { flex: 1 0 auto; width: 100%; }
body.shop-page > .shop-footer { flex-shrink: 0; }
.shop-kaart { text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line);
border-radius: var(--hoek); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .12s, transform .12s; }
.shop-kaart:hover { box-shadow: 0 10px 26px rgba(16,24,40,.10); transform: translateY(-2px); }
.shop-kaart img, .shop-kaart .foto-leeg { width: 100%; height: 168px; object-fit: cover; display: block; }
.shop-kaart .foto-leeg { background: var(--wash); display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.shop-stappen { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); margin-bottom: 18px; flex-wrap: wrap; }
.shop-stappen b { color: var(--ink); }
.shop-stappen i { font-style: normal; color: var(--axis); }
.shop-cat a { text-decoration: none; font-size: 13.5px; color: var(--ink); padding: 7px 12px; border-radius: var(--hoek-klein); display: block; }
.shop-cat a:hover { background: var(--wash); }
.shop-cat a.actief { background: var(--winkel-accent); color: var(--winkel-accent-ink); font-weight: 600; }
.shop-footer { border-top: 1px solid var(--line); background: var(--card); margin-top: 30px; }
.shop-footer-in { max-width: var(--site-breedte); margin: 0 auto; padding: 30px 20px; display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; font-size: 13px; color: var(--sub); }
.shop-footer-in a { color: inherit; }
.shop-usp-lijst { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; margin: 14px 0 18px; }
.shop-usp-lijst span::before { content: "✓"; color: var(--pos); margin-right: 8px; font-weight: 700; }
.shop-lijst { display: flex; gap: 26px; align-items: flex-start; }
.shop-zijbalk { width: 200px; flex-shrink: 0; }
.shop-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.shop-lijstkop { display: flex; justify-content: space-between; align-items: baseline;
gap: 6px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.wagen-korting-rij { display: flex; justify-content: space-between; color: var(--chip-green-ink); }
.wagen-korting-rij[hidden] { display: none; }
.wagen-regel { display: flex; align-items: center; gap: 12px 14px; padding: 12px 18px;
border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.wagen-regel .wagen-kern { flex: 1; min-width: 170px; }
.wagen-regel .wagen-totaal { font-weight: 650; min-width: 80px; text-align: right; white-space: nowrap; }
@media (max-width: 760px) {
.shop-lijst { flex-direction: column; gap: 14px; }
.shop-zijbalk { width: 100%; }
.shop-zijbalk .shop-cat { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 4px 6px; }
.shop-zijbalk .shop-cat a { padding: 5px 12px; border: 1px solid var(--line);
border-radius: 999px; font-size: 12.5px; }
.shop-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.shop-kaart img, .shop-kaart .foto-leeg { height: 120px; }
}
.steps { display: flex; align-items: center; gap: 0; margin: 2px 0 16px; overflow-x: auto; }
.step { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.step .dot2 { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--axis); background: var(--card);
display: grid; place-items: center; font-size: 10px; color: var(--card); flex: none; }
.step.done { color: var(--sub); }
.step.done .dot2 { background: var(--data); border-color: var(--data); }
.step.cur { color: var(--ink); font-weight: 600; }
.step.cur .dot2 { border-color: var(--data); color: var(--data); }
.step-line { width: 34px; height: 2px; background: var(--line); margin: 0 8px; flex: none; }
.step.done + .step-line, .step-line.done { background: var(--data); }
.menuwrap { position: relative; display: inline-block; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 240px;
background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 5px;
box-shadow: 0 12px 32px rgba(0,0,0,.14); display: none; }
.menu.open { display: block; }
.menu button, .menu a { display: block; width: 100%; text-align: left; padding: 8px 11px; border-radius: 7px;
font-size: 13.5px; color: var(--ink); background: none; border: 0; cursor: pointer; text-decoration: none; }
.menu button:hover, .menu a:hover { background: var(--wash); }
.menu .sep { height: 1px; background: var(--line); margin: 5px 4px; }
.menu .danger { color: var(--neg); }
input[type="file"] { font-size: 12.5px; color: var(--sub); }
input[type="file"]::file-selector-button { border: 1px solid var(--line); background: var(--card); color: var(--ink);
border-radius: 7px; height: 28px; padding: 0 10px; font: inherit; font-size: 12.5px; font-weight: 550;
cursor: pointer; margin-right: 9px; }
input[type="file"]::file-selector-button:hover { background: var(--wash2); }
.chat-vlak { height: calc(100vh - 252px); min-height: 460px; align-items: stretch; }
.chat-vlak > aside, .chat-vlak > section { min-height: 0; }
.ch-dagscheider { align-self: center; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
color: var(--muted); background: var(--wash); border-radius: 999px; padding: 3px 12px; margin: 2px 0; }
.cp-rij { display: flex; gap: 10px; padding: 10px 13px; cursor: pointer; border-bottom: 1px solid var(--line); align-items: flex-start; }
.cp-rij:hover, .cp-rij.actief { background: var(--wash); }
.cp-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--wash2); border: 1px solid var(--line);
display: grid; place-items: center; font-size: 11.5px; font-weight: 650; color: var(--sub); flex: none; position: relative; }
.cp-avatar .on { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%;
background: var(--chip-green-dot); border: 2px solid var(--card); }
.cp-mid { flex: 1; min-width: 0; }
.cp-naam { font-weight: 600; font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; }
.cp-naam .tijd { margin-left: auto; font-weight: 400; font-size: 11px; color: var(--muted); white-space: nowrap; }
.cp-laatste { display: block; font-size: 12.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-bubbel { max-width: 78%; padding: 7px 11px; border-radius: 13px; font-size: 13px; line-height: 1.45; white-space: pre-line; }
.cp-bubbel.klant { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.cp-bubbel.admin { align-self: flex-end; background: var(--btn-bg); color: var(--btn-ink); border-bottom-right-radius: 4px; }
.cp-bubbel .t { display: block; font-size: 10px; opacity: .6; margin-top: 3px; }
.cp-bubbel.notitie { align-self: flex-end; background: #fff7d6; color: #5a4a0a; border: 1px dashed #e2c85a; border-bottom-right-radius: 4px; }
:root:not([data-theme="light"]) .cp-bubbel.notitie { background: #3a3315; color: #f1e4a8; border-color: #7a6a25; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .cp-bubbel.notitie { background: #fff7d6; color: #5a4a0a; border-color: #e2c85a; } }
.cp-bubbel.fout { background: var(--neg-bg, #fde8e8); color: var(--neg, #b42318); align-self: flex-end; }
.cp-bubbel.treffer { box-shadow: 0 0 0 2px #f5c518; }
.cp-treffer { color: var(--ink); font-style: italic; }
.cp-bijlage { display: inline-flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.cp-bijlage img { max-width: 220px; max-height: 160px; border-radius: 8px; display: block; }
.cp-bijlage-naam { text-decoration: underline; }
.cp-bijlage-naam small { opacity: .7; margin-left: 4px; }
.ch-antwoord.notitie { background: #fff7d6; }
.ch-antwoord.notitie input[name="tekst"] { border-color: #e2c85a; }
.ch-antwoord [data-notitie-toggle][aria-pressed="true"] { background: #e2c85a; color: #3a3000; border-color: #e2c85a; }
.ch-clip { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0 8px; }
.ch-snelkeuze { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 2px); background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 -8px 30px rgba(15,17,22,.12); max-height: 260px; overflow-y: auto; z-index: 5; padding: 4px; }
.ch-snelkeuze[hidden] { display: none; }
.ch-snel-rij { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.ch-snel-rij code { flex: none; font-size: 12px; color: var(--data); }
.ch-snel-rij .ch-snel-tekst { color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-snel-rij.sel, .ch-snel-rij:hover { background: var(--wash); }
.ch-snel-rij.sel .ch-snel-tekst { color: var(--ink); }
.ch-snel-leeg { padding: 8px 10px; font-size: 12.5px; color: var(--muted); }
.cp-kaart { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; padding: 8px 10px; border-radius: 9px; background: var(--card); color: var(--ink); border: 1px solid var(--line); text-decoration: none; font-size: 12.5px; max-width: 320px; }
.cp-kaart b { font-weight: 650; }
.cp-kaart small { color: var(--muted); }
.cp-kaart:hover { border-color: var(--ink); }
.cp-kaart.gesprek { border-left: 3px solid var(--data); }
.cp-bubbel.admin .cp-kaart { background: rgba(255,255,255,.96); color: #151821; }
.cp-bubbel { position: relative; }
.cp-quote { display: block; font-size: 12px; opacity: .8; border-left: 3px solid currentColor; padding: 2px 8px; margin: 0 0 6px; cursor: pointer; border-radius: 3px; }
.cp-quote b { margin-right: 4px; }
.cp-bubbel.ingetrokken { opacity: .65; font-style: italic; }
.cp-reacties { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.cp-reactie { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 1px 8px; font-size: 12px; cursor: pointer; }
.cp-reactie.mijn { border-color: var(--data); background: var(--data-wash, #eef4ff); }
.cp-bubbel.admin .cp-reactie { background: rgba(255,255,255,.92); color: #151821; }
.cp-menu { position: absolute; top: -8px; right: 8px; display: inline-flex; opacity: 0; pointer-events: none; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 1px 3px; box-shadow: 0 4px 14px rgba(15,17,22,.12); transition: opacity .12s; }
.cp-bubbel:hover .cp-menu, .cp-bubbel:focus-within .cp-menu { opacity: 1; pointer-events: auto; }
.cp-menu-knop { border: 0; background: transparent; cursor: pointer; font-size: 13px; color: var(--sub); padding: 2px 5px; border-radius: 5px; line-height: 1; }
.cp-menu-knop:hover { background: var(--wash); color: var(--ink); }
.cp-reactie-kiezer { display: flex; gap: 2px; margin-top: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 2px 6px; width: max-content; }
.cp-reactie-kiezer button { border: 0; background: transparent; font-size: 17px; cursor: pointer; padding: 0 3px; }
.cp-kaart-knop { color: var(--data) !important; }
.cp-kaart.verlopen { opacity: .6; }
.cp-kaart[data-kaart-status="betaald"] b::after { content: " ✓"; color: #15803d; }
.ch-zoek-gesprek[data-treffers]:not([data-treffers="0"]) { border-color: #f5c518; }
.chat-kaart-bericht { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 8px 10px; border-radius: var(--chat-hoek-bel, 10px); background: var(--chat-venster, #fff); color: var(--chat-tekst, #151821); border: 1px solid var(--chat-rand, #e4e4e7); font-size: 12.6px; }
.chat-kaart-bericht b { font-weight: 650; }
.chat-kaart-bericht small { opacity: .75; }
.chat-kaart-bericht .chat-kaart-knop { align-self: flex-start; margin-top: 4px; text-decoration: none; }
.chat-kaart-stand { font-weight: 600; opacity: 1 !important; }
.chat-bel.van-mij .chat-kaart-bericht { background: rgba(255,255,255,.95); color: #151821; }
.chat-quote { display: block; font-size: 11.5px; opacity: .8; border-left: 3px solid currentColor; padding: 1px 8px; margin: 0 0 4px; border-radius: 3px; }
.chat-quote b { margin-right: 4px; }
.chat-bel.ingetrokken { opacity: .6; }
.chat-reacties { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.chat-reactie { border: 1px solid var(--chat-rand, #e4e4e7); background: var(--chat-venster, #fff); color: var(--chat-tekst, #151821); border-radius: 999px; padding: 0 7px; font-size: 11.5px; cursor: pointer; font-family: inherit; }
.chat-reactie.mijn { border-color: var(--chat-accent, #16a34a); }
.chat-bel { position: relative; }
.chat-bel-menu { position: absolute; top: -8px; right: 6px; display: inline-flex; opacity: 0; pointer-events: none; gap: 2px; background: var(--chat-venster, #fff); border: 1px solid var(--chat-rand, #e4e4e7); border-radius: 8px; padding: 0 2px; transition: opacity .12s; }
.chat-bel:hover .chat-bel-menu { opacity: 1; pointer-events: auto; }
.chat-bel-knop { border: 0; background: transparent; cursor: pointer; font-size: 12px; color: var(--chat-tekst, #333); padding: 1px 4px; line-height: 1.4; font-family: inherit; }
.chat-reactie-kiezer { display: flex; gap: 2px; margin-top: 5px; background: var(--chat-venster, #fff); border: 1px solid var(--chat-rand, #e4e4e7); border-radius: 999px; padding: 1px 6px; width: max-content; }
.chat-reactie-kiezer button { border: 0; background: transparent; font-size: 16px; cursor: pointer; padding: 0 2px; }
.cp-opties { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0; }
.cp-formulier { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 12.5px; }
.cp-formulier-rij small { display: inline-block; min-width: 130px; opacity: .7; }
.cp-geluid { display: flex; flex-direction: column; gap: 4px; }
.cp-geluid audio { max-width: 260px; height: 32px; }
.ch-mic.aan, .chat-mic.aan { color: #b42318 !important; animation: ch-puls 1s infinite; }
@keyframes ch-puls { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.ch-meekijk-stappen { margin: 8px 0 0; padding: 0 0 0 16px; font-size: 12.5px; color: var(--sub); display: flex; flex-direction: column; gap: 3px; }
.ch-meekijk-stappen li.soort-wagen { color: #15803d; }
.ch-meekijk-stappen li.soort-fout { color: #b42318; }
.ch-extra > summary { list-style: none; cursor: pointer; display: inline-flex; }
.ch-extra > summary::-webkit-details-marker { display: none; }
.ch-extra { position: relative; }
.chat-opties { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.chat-optie.gekozen { outline: 2px solid var(--chat-accent, #16a34a); }
.chat-formulier input { height: 34px; border: 1px solid var(--chat-rand, #e4e4e7); border-radius: var(--chat-hoek-knop, 6px); padding: 0 10px; font: inherit; font-size: 12.6px; background: var(--chat-venster, #fff); color: inherit; }
.chat-formulier .chat-start { align-self: flex-start; margin-top: 4px; }
.chat-geluid { max-width: 100%; height: 32px; display: block; margin-bottom: 4px; }
.chat-meekijk-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; background: #fff7d6; color: #5a4a0a; font-size: 12.5px; }
.chat-meekijk-banner .chat-start { padding: 4px 10px; font-size: 12px; }
.chat-meekijk-vraag p { margin: 0 0 8px; font-size: 12.6px; }
.chat-mic { margin-right: 0; }
.cp-bubbel.admin .cp-kaart small { color: #5f6b7d; }
.ch-kaart-chip { width: 100%; display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 4px 8px; border: 1px dashed var(--line); border-radius: 8px; background: var(--wash2); }
.ch-kaart-chip[hidden] { display: none; }
.ch-kaart-chip b::before { content: "# "; color: var(--data); }
.ch-kaart-weg { margin-left: auto; border: 0; background: transparent; cursor: pointer; font-size: 16px; line-height: 1; color: var(--muted); }
.ch-groep-leden { display: flex; flex-wrap: wrap; gap: 4px; }
.ch-groep-leden .ch-stand { font-size: 12px; padding: 3px 9px; }
.ch-groep-maken summary::-webkit-details-marker { display: none; }
.ch-groep-maken summary::before { content: "+ "; }
.ch-typt { padding: 2px 18px 4px; font-size: 12px; color: var(--muted); font-style: italic; background: var(--wash2); }
.ch-typt[hidden] { display: none; }
[data-live-vernieuw].nieuw { border-color: var(--data); color: var(--data); box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
[data-live-vernieuw].nieuw::after { content: " •"; }
.chat-typt { font-size: 12px; color: var(--chat-tekst, var(--muted, #71717a)); opacity: .7; font-style: italic; align-self: flex-start; padding: 2px 4px; }
.chat-bel.chat-systeem { align-self: center; background: transparent; border: 1px dashed var(--chat-rand, var(--line, #e4e4e7)); color: var(--chat-tekst, var(--muted, #71717a)); font-size: 12px; max-width: 95%; text-align: center; }
.chat-stand.online { display: inline-flex; align-items: center; gap: 5px; }
.chat-stip { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; display: inline-block; }
.chat-gesloten { color: var(--chat-tekst, var(--muted, #71717a)); }
.ch-sluiten { position: relative; }
.ch-sluiten > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.ch-sluiten > summary::-webkit-details-marker { display: none; }
.ch-sluiten-kaart { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 340px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgba(15,17,22,.16); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.ch-sluiten-kaart textarea { font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; resize: vertical; }
.ch-afsluiting { padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--wash2); display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ch-samenvatting b { margin-right: 6px; }
.ch-beoordeling { display: flex; gap: 8px; align-items: center; }
.ch-sterren { color: #f5b301; letter-spacing: 1px; font-size: 15px; }
.ch-wissen { display: flex; gap: 6px; align-items: center; padding: 10px 18px 12px; border-top: 1px solid var(--line); }
.chat-beoordeling { margin: 0 14px 10px; padding: 12px; border: 1px solid var(--chat-rand, var(--line, #e4e4e7)); border-radius: var(--chat-hoek, 12px); display: flex; flex-direction: column; gap: 8px; font-size: 13px; background: var(--chat-venster, var(--card, #fff)); }
.chat-beoordeling[hidden] { display: none; }
.chat-sterren { display: flex; gap: 4px; }
.chat-ster { border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--chat-rand, #d4d4d8); cursor: pointer; padding: 0 2px; }
.chat-ster.aan, .chat-ster:hover { color: #f5b301; }
.chat-beoordeling textarea { font: inherit; font-size: 12.6px; border: 1px solid var(--chat-rand, var(--line, #e4e4e7)); border-radius: var(--chat-hoek-knop, 6px); padding: 6px 10px; resize: vertical; background: var(--chat-venster, var(--card, #fff)); color: inherit; }
.chat-beoordeling .chat-start[disabled] { opacity: .5; cursor: default; }
.alleen-mobiel { display: none !important; }
.ch-lade-sluit { display: none; }
.op-balk { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.op-tijdbalk { position: relative; flex: 1; min-width: 200px; height: 14px; background: var(--wash); border-radius: 7px; cursor: pointer; }
.op-voortgang { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--data); border-radius: 7px; opacity: .35; }
.op-merk { position: absolute; top: -4px; width: 10px; height: 22px; margin-left: -5px; border-radius: 3px; background: var(--muted); cursor: pointer; }
.op-merk.soort-pagina { background: var(--sub); }
.op-merk.soort-wagen { background: #16a34a; }
.op-merk.soort-fout { background: #b42318; }
.op-merk.soort-zoek { background: #d97706; }
.op-merk.soort-chat { background: var(--data); width: 4px; margin-left: -2px; top: -6px; height: 26px; border-radius: 2px; }
.op-klok { font-variant-numeric: tabular-nums; font-size: 13px; min-width: 64px; text-align: right; }
.op-stappen { list-style: none; margin: 0; padding: 6px 0; max-height: 520px; overflow-y: auto; }
.op-stap { display: flex; gap: 12px; padding: 6px 18px; font-size: 13px; color: var(--muted); border-left: 3px solid transparent; cursor: pointer; }
.op-stap.gedaan { color: var(--ink); }
.op-stap.nu { background: var(--wash2); border-left-color: var(--data); }
.op-stap.merk .op-tekst { font-weight: 600; }
.op-stap .op-tijd { flex: none; width: 84px; font-variant-numeric: tabular-nums; color: var(--muted); }
.op-stap .op-tekst { display: flex; flex-direction: column; gap: 1px; }
.op-stap.soort-fout .op-tekst { color: #b42318; }
.op-stap.soort-wagen .op-tekst { color: #15803d; }
@media (max-width: 760px) {
.alleen-mobiel { display: inline-flex !important; }
.chat-vlak { height: auto; min-height: 0; }
.chat-vlak.met-gesprek .ch-lijstkolom { display: none !important; }
.chat-vlak > section { height: calc(100vh - 210px); min-height: 380px; }
.chat-vlak .ch-lade { position: fixed; left: 0; right: 0; bottom: 0; max-height: 72vh; z-index: 70; background: var(--bg); padding: 12px 12px 16px; box-shadow: 0 -12px 40px rgba(15,17,22,.25); border-radius: 16px 16px 0 0; transform: translateY(100%); transition: transform .2s ease; overflow-y: auto; }
.chat-vlak .ch-lade.open { transform: none; }
.ch-lade-sluit { display: block; width: 100%; height: 28px; margin: -6px 0 2px; border: 0; background: transparent; position: relative; cursor: pointer; flex: none; }
.ch-lade-sluit::before { content: ""; position: absolute; left: 50%; top: 11px; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: var(--line); }
.ch-postvakken { overflow-x: auto; flex-wrap: nowrap; }
}
.chat-dock { position: fixed; right: 16px; bottom: 16px; width: 384px; max-width: calc(100vw - 24px);
height: min(560px, calc(100vh - 80px)); z-index: 70; display: flex; flex-direction: column;
background: var(--card); border: 1px solid var(--line); border-radius: 13px;
box-shadow: 0 18px 50px rgba(15,17,22,.22); overflow: hidden; }
.chat-dock[data-plaats="links"] { right: auto; left: 292px; }
body.volledig .chat-dock[data-plaats="links"], body.chat-vol .chat-dock[data-plaats="links"] { left: 16px; }
.chat-dock[hidden] { display: none; }
.chat-pop.in-gesprek .cp-lijst, .chat-dock.in-gesprek .cp-lijst { display: none; }
.chat-pop.in-gesprek .cp-gesprek, .chat-dock.in-gesprek .cp-gesprek { display: flex; }
.cd-tabs { display: flex; gap: 2px; padding: 6px 6px 0; background: var(--wash2); border-bottom: 1px solid var(--line); overflow-x: auto; }
.cd-tab { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; border-bottom: 0; background: transparent; border-radius: 8px 8px 0 0; padding: 6px 10px; font-size: 12.5px; color: var(--sub); cursor: pointer; max-width: 150px; white-space: nowrap; }
.cd-tab .cd-tab-naam { overflow: hidden; text-overflow: ellipsis; }
.cd-tab.aan { background: var(--card); color: var(--ink); border-color: var(--line); font-weight: 600; }
.cd-tab-av { width: 20px; height: 20px; border-radius: 50%; background: var(--wash); border: 1px solid var(--line); display: grid; place-items: center; font-size: 9.5px; font-weight: 700; flex: none; }
.cd-tab-pin { font-size: 10px; }
.cd-tab-alle { margin-left: auto; }
.cd-pin, .cd-werkplek { border: 0; background: none; color: var(--sub); cursor: pointer; font-size: 14px; padding: 0 4px; text-decoration: none; line-height: 1; }
.cd-pin[aria-pressed="true"] { color: var(--ink); filter: none; }
.cd-pin[aria-pressed="false"] { filter: grayscale(1); opacity: .6; }
body.chat-vol .side, body.chat-vol .topbar, body.chat-vol .page-head, body.chat-vol .breadcrumbs, body.chat-vol nav[aria-label="Broodkruimel"] { display: none !important; }
body.chat-vol .app { grid-template-columns: 1fr; }
body.chat-vol .content { padding: 12px 16px; }
body.chat-vol .chat-vlak { height: calc(100vh - 92px); }
body.chat-vol .ch-vol-uit { display: inline-flex; }
.ch-hulp { position: fixed; inset: 0; z-index: 96; background: rgba(15,17,22,.35); display: flex; align-items: center; justify-content: center; }
.ch-hulp[hidden] { display: none; }
.ch-hulp .card { width: min(520px, calc(100vw - 32px)); }
.ch-hulp-tabel td { padding: 5px 8px; font-size: 13px; }
.ch-hulp-tabel td:first-child { white-space: nowrap; width: 150px; }
kbd { display: inline-block; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; font: 600 11.5px ui-monospace, monospace; background: var(--wash2); }
.chat-groot { width: 29px; height: 29px; border: 0; background: transparent; color: var(--chat-kop-ink, var(--muted, #71717a)); border-radius: 6px; cursor: pointer; display: grid; place-items: center; margin-left: auto; }
.chat-groot:hover { background: rgba(0, 0, 0, .06); }
.chat-groot + .chat-sluit { margin-left: 0; }
.chat-widget.groot .chat-paneel { width: min(760px, calc(100vw - 44px)); height: calc(100vh - 110px); max-height: none; }
@media (max-width: 480px) { .chat-groot { display: none; } }
.cp-kop { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.cp-kop .titel { font-weight: 650; font-size: 14px; }
.cp-x { margin-left: auto; border: 0; background: none; color: var(--sub); font-size: 19px; cursor: pointer; padding: 0 3px; line-height: 1; }
.cp-terug { border: 0; background: none; color: var(--sub); cursor: pointer; font-size: 15px; padding: 0 4px 0 0; }
.cp-lijst { overflow-y: auto; flex: 1; }
.cp-gesprek { display: none; flex-direction: column; flex: 1; min-height: 0; }
.chat-pop.in-gesprek .cp-lijst { display: none; }
.chat-pop.in-gesprek .cp-gesprek { display: flex; }
.cp-berichten { flex: 1; overflow-y: auto; padding: 13px; display: flex; flex-direction: column; gap: 8px; background: var(--wash2); }
.cp-invoer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.cp-invoer input { flex: 1; min-width: 0; }
.cp-voet { padding: 7px 13px; border-top: 1px solid var(--line); font-size: 12px; display: flex; gap: 10px; }
.cp-voet a { color: var(--sub); text-decoration: none; }
.cp-voet a:hover { color: var(--ink); }
.fchip-n { color: var(--muted); font-size: 11px; margin-left: 4px; }
.ch-postvakken { margin: -4px 0 14px; flex-wrap: wrap; }
.ch-postvakken .ch-scheiding { margin-left: 14px; }
.cp-rij.ongelezen .cp-naam, .cp-rij.ongelezen .cp-laatste { font-weight: 650; color: var(--ink); }
.cp-ongelezen { background: var(--data); color: #fff; border-radius: 999px; font-size: 10.5px; font-weight: 650;
min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; }
.cp-adres { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--muted); margin-top: 3px; flex-wrap: wrap; }
.cp-adres > span + span::before { content: "·"; margin-right: 6px; }
.cp-adres .cp-zonder { color: var(--warn); }
.cp-adres .chip::before { display: none; }
.nav-badge { margin-left: 6px; }
.ch-voorwaarde { display: grid; grid-template-columns: 1fr 190px 1fr; gap: 8px; margin-bottom: 6px; }
.ch-actie { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--wash2); }
.ch-actie-kop { display: flex; gap: 8px; align-items: center; }
.ch-actie-kop select { flex: 1; }
.ch-actie-velden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.ch-actie-velden > * { display: none; }
.ch-actie[data-soort="popup"] .ch-veld-popup, .ch-actie[data-soort="begroeting"] .ch-veld-begroeting, .ch-actie[data-soort="korting"] .ch-veld-korting,
.ch-actie[data-soort="por"] .ch-veld-por, .ch-actie[data-soort="label"] .ch-veld-label, .ch-actie[data-soort="toewijzen"] .ch-veld-toewijzen,
.ch-actie[data-soort="ticket"] .ch-veld-ticket { display: block; }
.ch-actie[data-soort="popup"] label.ch-veld-popup { display: flex; }
.cp-bubbel .cp-knoppen { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.cp-bubbel.admin .cp-knoppen .chip { background: rgba(255,255,255,.14); color: inherit; }
.por-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; width: 340px; max-width: calc(100vw - 32px); }
.por-toast { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(15,17,22,.18); padding: 12px 14px; font-size: 13px; }
.por-toast .por-regel { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.por-toast .por-knoppen { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.chat-popup-waas { position: fixed; inset: 0; background: rgba(15,17,22,.28); z-index: 94; }
.chat-popup { position: fixed; z-index: 95; background: var(--chat-venster, var(--card, #fff)); color: var(--chat-tekst, var(--ink, #151821)); box-shadow: 0 18px 50px rgba(15,17,22,.25); font-size: 14px; font-family: var(--chat-letter, inherit); }
.chat-popup.venster { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); border-radius: 14px; padding: 22px 24px; }
.chat-popup.balk { left: 0; right: 0; top: 0; padding: 12px 20px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--line, #e4e4e7); }
.chat-popup.balk h3, .chat-popup.balk p { margin: 0; }
.chat-popup.kaartje { right: 96px; bottom: 24px; width: min(320px, calc(100vw - 120px)); border-radius: 12px; padding: 14px 16px; }
.chat-popup h3 { margin: 0 0 6px; font-size: 16px; }
.chat-popup p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; }
.chat-popup-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.chat-popup-knoppen button { font: inherit; font-size: 13px; cursor: pointer; border-radius: 999px; padding: 8px 14px; border: 1px solid var(--chat-rand, var(--line, #e4e4e7)); background: transparent; color: inherit; }
.chat-popup-knoppen button.primair { background: var(--chat-knop, var(--winkel-accent, #16a34a)); color: var(--chat-knop-ink, #fff); border-color: transparent; }
.chat-snelknoppen { display: flex; gap: 6px; flex-wrap: wrap; margin: -2px 0 6px; }
.chat-snelknoppen button { font: inherit; font-size: 12.5px; border-radius: 999px; padding: 5px 11px; border: 1px solid var(--chat-accent, var(--winkel-accent, #16a34a)); color: var(--chat-accent, var(--winkel-accent, #16a34a)); background: transparent; cursor: pointer; }
.ch-klantlijst { padding: 8px 18px 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ch-klantlijst a { display: flex; justify-content: space-between; gap: 8px; color: inherit; text-decoration: none; }
.ch-klantlijst a:hover b { text-decoration: underline; }
.ch-veldregel { display: flex; gap: 16px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.ch-veldregel-tekst { flex: 1; min-width: 0; font-size: 13.5px; }
.ch-standen { display: flex; gap: 6px; flex-wrap: wrap; }
.ch-stand { border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.ch-stand input { margin: 0; accent-color: var(--data); }
.ch-stand.aan { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
.ch-onderwerp { display: grid; grid-template-columns: 1fr 220px; gap: 8px; margin-bottom: 6px; }
.chat-intro select, .chat-intro textarea { border: 1px solid var(--chat-rand, var(--line, #e4e4e7)); border-radius: var(--chat-hoek-knop, 6px); padding: 0 12px; font: inherit; font-size: 12.6px; background: var(--chat-venster, var(--card, #fff)); color: inherit; }
.chat-intro select { height: 38px; }
.chat-intro textarea { padding: 8px 12px; resize: vertical; min-height: 54px; }
.chat-akkoord { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--sub, #666); line-height: 1.4; }
.chat-akkoord input { margin: 2px 0 0; }
.chat-akkoord a { color: inherit; }
.chat-fout { color: #b42318; font-size: 12px; margin: 0; }
.chat-intro .chat-veld-fout { border-color: #b42318 !important; }
.chat-intro > .chat-portaal-intro { font-size: 12.6px; margin: 0; }
.chat-intro .chat-start { margin: 2px 0 4px; }
.infopunt { position: relative; display: inline-block; }
.infopunt summary {
list-style: none; cursor: pointer; width: 18px; height: 18px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; border: 1px solid var(--line); color: var(--muted);
font-size: 11px; font-weight: 650; user-select: none;
}
.infopunt summary::-webkit-details-marker { display: none; }
.infopunt[open] summary { background: var(--ink); color: var(--card); border-color: var(--ink); }
.infopunt > div {
position: absolute; z-index: 40; top: 24px; left: -8px; width: 300px;
background: var(--card); border: 1px solid var(--line); border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 10px 12px;
font-size: 12.5px; line-height: 1.45; color: var(--sub); font-weight: 400;
}
.infopunt > div.flip { left: auto; right: -8px; }
.regel-foto {
width: 44px; height: 44px; flex: 0 0 44px; border-radius: 9px;
background: var(--bg); border: 1px solid var(--line);
display: inline-flex; align-items: center; justify-content: center;
overflow: hidden; color: var(--muted);
}
.regel-foto::before { content: "◇"; font-size: 15px; }
.regel-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.regel-foto:has(img)::before { content: none; }
.ac-item { display: flex; align-items: center; gap: 10px; text-align: left; }
.ac-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ac-naam { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-meta { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-stip { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: 1px; }
.ac-stip.g { background: var(--chip-green-dot); } .ac-stip.o { background: var(--chip-orange-dot); }
.ac-stip.r { background: var(--chip-red-dot); }
.ac-lijst.breed { right: auto; width: max-content; min-width: 100%; max-width: min(520px, 90vw); }
.werkbalk { display: flex; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: var(--wash); }
.werkbalk input, .werkbalk button { height: 36px; }
.werkbalk #werkbank-zoek { flex: 1; min-width: 220px; }
.werkbalk #scanveld { width: 170px; }
.stapper { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; width: 110px; }
.stapper button { border: 0; background: var(--wash); width: 26px; height: 32px; flex: 0 0 26px; font: inherit; cursor: pointer; color: var(--ink); }
.stapper button:hover { background: var(--line); }
.stapper input { border: 0; min-width: 0; flex: 1; text-align: center; border-radius: 0; padding: 6px 2px; -moz-appearance: textfield; }
.stapper input::-webkit-outer-spin-button, .stapper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.regel-naam { font-weight: 600; font-size: 13.5px; line-height: 1.3; cursor: pointer; }
tr.noot-rij td { border-top: 0; padding-top: 0; }
tbody tr:has(+ tr.noot-rij) td { border-bottom: 0; }
.lijn-foto { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line2);
background: var(--wash); display: block; }
span.lijn-foto.leeg { display: block; }
.regel-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: var(--muted); }
.regel-meta .chip { font-size: 10.5px; padding: 1px 8px; }
.regel-info { font-size: 11.5px; }
.regel-naam:hover { text-decoration: underline dotted var(--muted); }
.regel-naam:not([hidden]) ~ input[name=sku] { display: none; }
.regel-naam small { font-weight: 500; color: var(--muted); font-size: 11px; margin-left: 6px; }
.regel .regel-chips { display: inline-flex; gap: 5px; margin-right: 6px; vertical-align: 1px; }
#kc-contacten .chip, .kc-chiprij .chip { font-size: 11px; }
.kc-chiprij { display: flex; gap: 5px; flex-wrap: wrap; }
.blader-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; }
.blader-tegel { border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer;
text-align: left; font: inherit; color: inherit; padding: 0; overflow: hidden; }
.blader-tegel:hover { border-color: var(--muted); }
.blader-tegel .bt-foto { width: 100%; height: 78px; background: var(--wash); border-bottom: 1px solid var(--line);
display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 11px; overflow: hidden; }
.blader-tegel .bt-foto img { width: 100%; height: 100%; object-fit: cover; }
.blader-tegel .bt-body { padding: 7px 9px 8px; }
.blader-tegel .bt-naam { font-size: 12px; font-weight: 600; line-height: 1.3; min-height: 31px; }
.blader-tegel .bt-prijs { font-size: 12.5px; font-weight: 650; margin-top: 2px; }
.blader-tegel .bt-voorraad { font-size: 10.5px; color: var(--muted); }
.ac-prijs { display: flex; flex-direction: column; align-items: flex-end; gap: 0; line-height: 1.35; }
.ac-prijs b { font-weight: 700; }
.ac-prijs s { font-size: 11px; color: var(--muted); }
.ac-prijs em { font-style: normal; font-size: 11px; color: var(--chip-green-ink); white-space: nowrap; }
.ac-item img {
width: 32px; height: 32px; border-radius: 7px; object-fit: cover;
flex: 0 0 32px; background: var(--bg); border: 1px solid var(--line);
}
.ac-item .ac-prijs { margin-left: auto; font-weight: 600; white-space: nowrap; }
.invoer-kolomkop {
display: flex; gap: 8px; font-size: 10.5px; letter-spacing: 0.07em;
text-transform: uppercase; color: var(--muted); padding: 0 0 2px 0;
}
.avatar-klein { width: 26px; height: 26px; border-radius: 50%; background: var(--wash);
border: 1px solid var(--line); display: grid; place-items: center; flex: none;
font-size: 10.5px; font-weight: 600; color: var(--sub); }
.avatar-groot { width: 46px; height: 46px; border-radius: 50%; background: var(--wash);
border: 1px solid var(--line); display: grid; place-items: center; flex: none;
font-size: 15px; font-weight: 600; color: var(--sub); }
.abo-pakketten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.abo-ruimte-rij { display: grid; grid-template-columns: 220px minmax(0, 1fr) 190px; gap: 14px; align-items: center; min-height: 36px; border-top: 1px solid var(--line); padding: 0 18px; }
.abo-kpis { margin-bottom: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) {
.abo-pakketten { grid-template-columns: 1fr; }
.abo-ruimte-rij { grid-template-columns: 1fr; gap: 4px; padding: 8px 18px; }
.abo-ruimte-rij > b { text-align: left !important; }
.abo-kpis { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.abo-kpis .kpi + .kpi { border-left: 0; border-top: 1px solid var(--line); }
}
.abobalk-rood { background: var(--chip-red-bg); color: var(--chip-red-ink); }
.abobalk-grijs { background: var(--wash); color: var(--sub); }
.meekijkbalk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 9px 28px; font-size: 13px; background: var(--chip-orange-bg);
color: var(--chip-orange-ink); border-bottom: 1px solid var(--line); }
.bank-rek-rij { display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.bank-rek-rij .cell-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bank-zoek { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.bank-zoek input { width: 260px; }
.bank-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.bank-tegel { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px;
border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.bank-tegel.uit { background: var(--wash); }
.bank-tegel-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bank-tegel-naam { font-size: 15px; font-weight: 600; }
.bank-tegel-uitleg { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.bank-tegel-waarom { margin: 0; font-size: 12.5px; color: var(--muted); font-style: italic; }
.bank-tegel .btn-primary { margin-top: auto; text-align: center; }
.bank-kies-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.bank-kies-form { display: flex; gap: 8px; align-items: center; }
.bank-kies-voet { margin: 0; padding: 12px 18px; font-size: 12.5px; color: var(--muted); }
.bank-fout { grid-column: 1 / -1; font-size: 12.5px; color: var(--neg); line-height: 1.4; }
.bank-let-op { grid-column: 1 / -1; font-size: 12.5px; color: var(--chip-orange-ink); line-height: 1.4; }
.bank-ritme { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
padding: 12px 18px 4px; font-size: 13px; }
.bank-ritme label { color: var(--muted); }
.bank-ritme select { min-width: 130px; }
.cockpit { display: grid; grid-template-columns: 250px 1fr 300px; gap: 16px; align-items: start; }
.cockpit-links, .cockpit-rechts { position: sticky; top: 16px; }
.cockpit-links { max-height: calc(100vh - 40px); overflow: auto; }
.cockpit-lev { display: block; padding: 10px 14px; border-bottom: 1px solid var(--line);
text-decoration: none; color: inherit; }
.cockpit-lev:hover { background: var(--wash); }
.cockpit-lev.aan { background: var(--data-wash); box-shadow: inset 3px 0 0 var(--data); }
.cockpit-lev-naam { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.cockpit-nood { background: var(--neg); color: #fff; border-radius: 999px; font-size: 11px;
font-weight: 700; padding: 0 6px; line-height: 17px; }
.cockpit-groep { padding: 8px 18px; background: var(--wash); font-size: 11.5px;
letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cockpit-regel { display: flex; align-items: center; gap: 12px; padding: 10px 18px;
border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cockpit-regel-kern { flex: 1; min-width: 190px; }
.cockpit-cijfers { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cockpit-cijfer { display: flex; flex-direction: column; font-size: 13px; font-variant-numeric: tabular-nums; }
.cockpit-cijfer i { font-style: normal; font-size: 10.5px; letter-spacing: .06em;
text-transform: uppercase; color: var(--muted); }
.cockpit-actie { display: flex; align-items: center; gap: 10px; }
.cockpit-advies { display: flex; align-items: center; gap: 4px; }
.cockpit-bedrag { min-width: 74px; text-align: right; font-weight: 600; }
.cockpit-sluimer { display: flex; }
.mand-lev { border-bottom: 1px solid var(--line); }
.mand-kop { display: flex; justify-content: space-between; align-items: baseline;
padding: 10px 18px 4px; font-size: 13.5px; }
.mand-regel { display: flex; align-items: center; gap: 8px; padding: 5px 18px; font-size: 13px; }
@media (max-width: 1200px) {
.cockpit { grid-template-columns: 1fr; }
.cockpit-links, .cockpit-rechts { position: static; max-height: none; }
}
.inst-schil { max-width: none; }
.inst-schil .web-inhoud > .card, .inst-schil .web-inhoud > form, .inst-schil .web-inhoud > div, .inst-schil .web-inhoud > section { max-width: none !important; }
.inst-feit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inst-feit .infopunt { vertical-align: middle; }
.inst-koppen .web-kop-rechts + .web-kop-rechts { margin-left: 0; }
.inst-start { display: grid; gap: 14px; }
.inst-start .card { margin: 0; }
.inst-twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.inst-rij { display: flex; align-items: center; gap: 14px; padding: 11px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: inherit; text-decoration: none; }
.inst-rij:last-child { border-bottom: 0; }
.inst-link:hover { background: var(--wash2); }
.inst-naam { font-weight: 550; width: 130px; flex: none; }
.inst-wat { flex: 1; min-width: 0; color: var(--sub); }
.inst-wat b { color: var(--ink); font-weight: 550; }
.inst-punt { color: var(--muted); margin: 0 6px; }
.inst-tijd { color: var(--muted); font-size: 12px; white-space: nowrap; width: 96px; flex: none; font-variant-numeric: tabular-nums; }
.inst-wie { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.inst-pijl { color: var(--muted); font-size: 11px; }
@media (max-width: 900px) { .inst-twee { grid-template-columns: 1fr; } .inst-naam { width: 100px; } }
.top-zoek { display: none; }
@media (max-width: 900px) {
.steps { max-width: 100%; overflow-x: auto; padding-bottom: 4px; }
main form { flex-wrap: wrap; }
.card-head { flex-wrap: wrap; }
.kpis { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
main [style*="display:flex"] { flex-wrap: wrap; }
main [style*="display:flex"] > * { min-width: 0; }
main [style*="flex-direction:column"] { display: block !important; }
main [style*="flex-direction:column"] > * + * { margin-top: 16px; }
main .btn-primary, main .ghost { white-space: normal; height: auto; min-height: 34px; }
main .btn-primary.small, main .ghost.small { min-height: 28px; }
.card-head .card-sub { flex: 1 1 100%; min-width: 0; }
main [style*="grid-template-columns"]:not(.pb-rij):not(.kpis):not(.start-tegels):not(.hub-tegels) { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
#pb-bord { overflow-x: auto; }
.pb-rij { min-width: 720px; }
}
.melding-let-op { background: var(--wash); border: 1px solid var(--line);
border-left: 3px solid var(--warn); border-radius: 0 10px 10px 0;
padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px; }
.hub-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 12px; margin-bottom: 16px; }
.hub-tegel { padding: 14px 16px; display: flex; flex-direction: column; gap: 5px;
text-decoration: none; color: inherit; }
.hub-tegel:hover { border-color: var(--axis); }
.hub-nav { display: flex; flex-direction: column; padding: 6px 0 10px; }
.hub-nav a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 18px;
font-size: 13.5px; color: inherit; text-decoration: none; }
.hub-nav a:hover { background: var(--wash); }
.hub-nav a .pijl { color: var(--muted); }
.start-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.start-tegel { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
background: var(--card); border: 1px solid var(--line); border-radius: 12px;
text-decoration: none; color: inherit; }
.start-tegel:hover { border-color: var(--axis); }
.start-regel { display: flex; align-items: center; gap: 10px; padding: 9px 18px;
border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; font-size: 13.5px; }
.start-regel:hover { background: var(--wash); }
.ouderdom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
background: var(--line); border-top: 1px solid var(--line); }
.ouderdom-vak { background: var(--card); padding: 9px 12px; display: flex;
flex-direction: column; gap: 2px; font-size: 13.5px; }
.ouderdom-vak.laat .num { color: var(--neg); font-weight: 650; }
.bulkbalk {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 10px 18px;
border-bottom: 1px solid var(--line);
background: var(--wash2);
font-size: 13px;
}
.bulkbalk .bulk-aantal { font-weight: 650; }
.ifveld input,
.ifveld select {
margin-top: 3px;
padding: 5px 7px;
border: 1px solid var(--line);
border-radius: 5px;
background: var(--card);
font: inherit;
font-size: 13.5px;
}
.ifveld input:disabled,
.ifveld select:disabled {
background: var(--wash2);
color: var(--muted);
}
.ifveld.span2 { grid-column: span 2; }
#iftabel input,
#iftabel select {
padding: 4px 6px;
border: 1px solid var(--line);
border-radius: 4px;
font: inherit;
font-size: 12.5px;
background: var(--card);
}
#iftabel tr.ifrij:hover { background: var(--wash2); }
.ifblad + .ifblad { border-top: 1px solid var(--line); }
.ifmark { transition: all .12s ease-out; border-radius: 2px; }
#ifzone:hover { border-color: var(--data); }
.ifbalk {
position: sticky; top: 56px; z-index: 30;
display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
padding: 12px 16px; margin-bottom: 6px;
box-shadow: 0 6px 18px -14px rgba(9, 11, 16, .45);
}
.ifbalk-wie { display: flex; flex-direction: column; min-width: 190px; }
.ifbalk-wie strong { font-size: 15px; }
.ifbalk-geld { display: flex; flex-direction: column; }
.ifbalk-bedrag { font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ifbalk-stand { display: flex; gap: 6px; flex-wrap: wrap; }
.ifbalk-acties { margin-left: auto; display: flex; gap: 8px; }
.ifsneltoetsen { margin: 0 0 14px; font-size: 12px; color: var(--muted); }
.ifafwijzen { display: inline-block; position: relative; }
.ifafwijzen > summary { list-style: none; cursor: pointer; display: inline-flex; }
.ifafwijzen > summary::-webkit-details-marker { display: none; }
.head-actions .ifafwijzen-form, .ifafwijzen-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 6; display: flex; gap: 6px; align-items: center; min-width: 340px; padding: 10px; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
#if-voorstel .card-head .infopunt { margin-left: 4px; }
.ifgemeen {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 9px 14px; border-bottom: 1px solid var(--line);
background: var(--wash2);
}
.ifgemeen select { max-width: 210px; }
.iflijst { display: flex; flex-direction: column; }
.ifregel + .ifregel { border-top: 1px solid var(--line); }
.ifregel-kop {
display: flex; align-items: center; gap: 14px; width: 100%;
padding: 9px 14px; background: none; border: 0; text-align: left;
font: inherit; color: inherit; cursor: pointer;
}
.ifregel-kop:hover { background: var(--wash2); }
.ifregel-tekst { flex: 1; min-width: 0; }
.ifregel-naam { display: block; font-weight: 550; font-size: 14px; }
.ifregel-sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.ifregel-bedrag { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ifregel-chev { color: var(--muted); transition: transform .12s; }
.ifregel[data-open="1"] .ifregel-chev { transform: rotate(180deg); }
.ifregel[data-open="1"] { background: var(--wash2); }
.ifregel[data-gewijzigd="1"] .ifregel-bedrag { opacity: .45; }
.ifregel-bewerk {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px; padding: 4px 14px 14px;
}
.ifregel-bewerk .ifv { display: flex; flex-direction: column; }
.ifregel-bewerk .ifv.breed { grid-column: span 2; }
.ifregel-bewerk .ifv.smal { max-width: 120px; }
.ifregel-bewerk input, .ifregel-bewerk select {
margin-top: 3px; padding: 5px 7px; font: inherit; font-size: 13px;
border: 1px solid var(--line); border-radius: 5px; background: var(--card);
}
.ifkeuze { display: flex; gap: 12px; margin-top: 5px; font-size: 13px; }
.ifkeuze label { display: flex; align-items: center; gap: 4px; }
.ifdocpaneel { position: sticky; top: 146px; align-self: start; }
#ifdoc { max-height: calc(100vh - 210px); }
.ifpager { display: flex; align-items: center; gap: 6px; margin-left: 12px; font-size: 12.5px; }
#ifdoc { position: relative; background: var(--wash); max-height: 74vh; overflow: auto; }
.ifblad { position: relative; }
.ifblad img { width: 100%; display: block; }
.ifmark {
position: absolute; display: none; border: 2px solid var(--data);
background: rgba(255, 214, 0, .22); border-radius: 2px; pointer-events: none;
transition: all .12s ease-out;
}
.ifvelden {
display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 12px; padding: 14px;
}
.ifmeer summary {
cursor: pointer; padding: 9px 14px; font-size: 12.5px;
color: var(--muted); border-top: 1px solid var(--line);
}
.ifmeer[open] summary { border-bottom: 1px solid var(--line); }
.ifvoet {
display: flex; gap: 32px; flex-wrap: wrap; justify-content: space-between;
padding: 12px 14px 14px; border-top: 1px solid var(--line);
background: var(--wash2);
}
.ifbtwvoet td, .iftotalen td { padding: 2px 8px; font-size: 13.5px; }
.ifbtwvoet .cell-sub { display: block; }
.iftotalen { margin-left: auto; min-width: 260px; }
.iftotalen td.num { font-variant-numeric: tabular-nums; }
.iftotalen tr.eind td { border-top: 1px solid var(--axis); font-weight: 650; font-size: 15px; }
.iftotalen tr.cel-flets td { color: var(--muted); }
.iftotalen tr.cel-fout td { color: var(--neg); font-weight: 600; }
.ifalle-controles summary {
cursor: pointer; padding: 8px 14px; font-size: 12.5px;
color: var(--muted); border-top: 1px solid var(--line);
}
.ifdockop { flex-wrap: nowrap; white-space: nowrap; }
.ifdockop .card-title { flex: 0 0 auto; }
.ifpostbus { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
margin: -8px 0 16px; padding: 9px 14px; border: 1px solid var(--line);
border-radius: 9px; background: var(--wash); }
.inlog { display: grid; grid-template-columns: minmax(0,440px) minmax(0,1fr); min-height: 100vh; }
.inlog-paneel {
background: #12141a; color: #f2f3f7; padding: 38px 40px;
display: flex; flex-direction: column; justify-content: space-between; gap: 34px;
position: relative; overflow: hidden; border-right: 1px solid rgba(255,255,255,.07);
}
.inlog-paneel::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px);
background-size: 56px 100%;
}
.inlog-paneel::after {
content: ""; position: absolute; width: 520px; height: 520px; right: -230px; top: -190px;
border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, rgba(42,120,214,.30), rgba(42,120,214,0) 68%);
}
.inlog-paneel > * { position: relative; }
.inlog-logo { height: 22px; width: auto; display: block; align-self: flex-start; }
.inlog-midden { display: flex; flex-direction: column; gap: 22px; }
.inlog-paneel h2 {
font-size: 24px; line-height: 1.22; font-weight: 600; letter-spacing: -.02em;
max-width: 16ch; margin: 0;
}
.inlog-lead { font-size: 13.5px; color: #8d94a1; max-width: 36ch; margin: 10px 0 0; line-height: 1.55; }
.inlog-storing {
display: flex; gap: 10px; align-items: flex-start; margin: 0;
font-size: 12.5px; line-height: 1.5; color: #8d94a1;
}
.inlog-storing .stip {
width: 6px; height: 6px; border-radius: 50%; flex: none; margin-top: 6px;
background: #e8a13c; box-shadow: 0 0 0 3px rgba(232,161,60,.18);
}
.inlog-paneelvoet {
display: flex; align-items: center; gap: 0 12px; flex-wrap: wrap; line-height: 2;
font-size: 12px; color: #8d94a1; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.10);
}
.inlog-paneelvoet a { color: #8d94a1; text-decoration: none; }
.inlog-paneelvoet a:hover { color: #f2f3f7; text-decoration: underline; }
.inlog-paneelvoet .scheef { opacity: .35; }
.inlog-stand { display: inline-flex; align-items: center; gap: 7px; }
.inlog-stand i {
width: 7px; height: 7px; border-radius: 50%; background: #17984b; display: block;
box-shadow: 0 0 0 3px rgba(23,152,75,.20);
}
.inlog-vlak { display: grid; place-items: center; padding: 40px 28px; min-width: 0; }
.inlog-kolom { width: 100%; max-width: 392px; display: flex; flex-direction: column; gap: 18px; }
.inlog-omgeving {
display: flex; align-items: center; gap: 9px; align-self: center;
background: var(--card); border: 1px solid var(--line); border-radius: 999px;
padding: 5px 13px 5px 8px; font-size: 12.5px; color: var(--sub); box-shadow: var(--shadow);
}
.inlog-omgeving .bol {
width: 19px; height: 19px; border-radius: 50%; background: var(--data-wash); color: var(--data);
display: grid; place-items: center; font-size: 10px; font-weight: 700;
}
.inlog-omgeving b { color: var(--ink); font-weight: 550; }
.inlog-kaart { padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 16px; }
.inlog-titel { display: flex; flex-direction: column; gap: 5px; }
.inlog-titel h1 { margin: 0; }
.inlog-onder { font-size: 13px; color: var(--sub); line-height: 1.5; margin: 0; }
.inlog-labelrij { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.inlog-labelrij-onder { justify-content: flex-end; margin-top: 6px; }
.inlog-klein { font-size: 12.5px; color: var(--sub); text-decoration: none; }
.inlog-klein:hover { color: var(--ink); text-decoration: underline; }
.inlog-kaart .field input { height: 38px; width: 100%; }
.inlog-ww { position: relative; }
.inlog-ww input { padding-right: 62px; }
@media (min-width: 861px) { .inlog .inlog-merk { display: none; } }
.inlog-toon {
position: absolute; right: 5px; top: 5px; height: 28px; padding: 0 9px; border-radius: 6px;
font-size: 12px; font-weight: 550; color: var(--sub);
}
.inlog-toon:hover { background: var(--wash); color: var(--ink); }
.inlog-vink { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sub); cursor: pointer; }
.inlog-vink input { width: 15px; height: 15px; accent-color: var(--data); margin: 0; }
.inlog-uitwegen { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.inlog-uitwegen a { font-size: 12.5px; color: var(--sub); text-decoration: none; }
.inlog-uitwegen a:hover { color: var(--ink); text-decoration: underline; }
.inlog-logorij { display: flex; align-items: center; gap: 8px; align-self: flex-start; }
.inlog-demotag {
font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
background: rgba(42,120,214,.22); color: #8fb6ec; border-radius: 999px; padding: 3px 8px;
}
.inlog-feiten { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 13px; color: #8d94a1; }
.inlog-feiten li { display: flex; gap: 10px; align-items: baseline; }
.inlog-feiten b { color: #f2f3f7; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }
.inlog-kolom.breed { max-width: 460px; }
.inlog-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inlog-optioneel { font-weight: 400; color: var(--muted); margin-left: 6px; }
.inlog-tweede { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; }
.inlog-tweede b { display: block; font-size: 13.5px; }
.inlog-tweede span { color: var(--sub); font-size: 12.5px; }
.inlog-tweede .ghost { flex: none; }
.inlog-voet a { color: var(--sub); text-decoration: none; }
.inlog-voet a:hover { color: var(--ink); text-decoration: underline; }
.demobalk {
display: flex; align-items: center; gap: 12px; padding: 0 20px; height: 36px; flex: none;
background: var(--chip-blue-bg); color: var(--chip-blue-ink); font-size: 13px;
border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden;
}
.demobalk b { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.demobalk b i { width: 8px; height: 8px; border-radius: 50%; background: var(--chip-blue-dot); }
.demobalk a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.demobalk .rechts { margin-left: auto; color: var(--sub); display: inline-flex; gap: 12px; align-items: center; }
.demobalk .scheef { opacity: .4; }
.demolint {
height: 30px; background: #151821; color: #c9cdd6; font-size: 12.5px;
display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0 16px;
}
.demolint b { color: #fff; font-weight: 600; }
.demolint a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 860px) { .inlog-velden { grid-template-columns: 1fr; } .demolint span { display: none; } }
.inlog-voet {
display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
font-size: 11.5px; color: var(--muted);
}
.inlog-voet .punt { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); display: block; }
.inlog-qr {
align-self: center; width: 180px; height: 180px; border-radius: 12px;
padding: 10px; background: #fff; border: 1px solid var(--line); image-rendering: pixelated;
}
.inlog-wacht { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0 4px;
font-size: 13.5px; color: var(--sub); }
.inlog-ring { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--data); }
@media (prefers-reduced-motion: no-preference) {
.inlog-ring { animation: inlog-draai 1s linear infinite; }
}
@keyframes inlog-draai { to { transform: rotate(360deg); } }
.cijfers { display: flex; gap: 8px; }
.cijfers input {
flex: 1; min-width: 0; height: 50px; text-align: center; font: inherit; font-size: 21px;
font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink);
border: 1px solid var(--line); border-radius: 9px; background: var(--card);
}
.cijfers input:focus { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); outline: none; }
.meter { display: flex; gap: 5px; margin-top: 2px; }
.meter i { height: 4px; flex: 1; border-radius: 2px; background: var(--line); }
.meter i.zwak { background: var(--neg); }
.meter i.matig { background: var(--warn); }
.meter i.aan { background: var(--pos); }
.eisen { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.eisen span.ok { color: var(--pos); }
.herstelcodes {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
background: var(--wash); border-radius: 10px; padding: 14px;
}
.herstelcodes code { font-size: 13px; letter-spacing: .04em; }
.keuzes { display: flex; flex-direction: column; gap: 8px; }
.keuze {
display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
border: 1px solid var(--line); border-radius: 9px; background: var(--card);
padding: 11px 13px; color: var(--ink); font-size: 13.5px; font-weight: 550;
}
.keuze:hover { background: var(--wash); border-color: var(--data); }
.keuze .letter {
width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--wash);
color: var(--sub); display: grid; place-items: center; font-size: 12px; font-weight: 600;
}
.keuze .pijl { margin-left: auto; color: var(--muted); font-size: 14px; }
@media (max-width: 860px) {
.inlog { grid-template-columns: minmax(0,1fr); }
.inlog-paneel { display: none; }
.inlog-vlak { padding: 26px 18px; }
}
.keuze .keuzetekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.keuze .naam { font-size: 13.5px; font-weight: 550; }
.keuze .plaats { font-size: 12px; font-weight: 400; color: var(--muted); }
.dagregel {
display: flex; justify-content: space-between; align-items: baseline;
gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line);
}
.dagregel:last-child { border-bottom: 0; }
.dagregel > .num { white-space: nowrap; }
.telkop {
display: grid; grid-template-columns: 78px 1fr 100px; gap: 10px;
font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
color: var(--muted); padding-bottom: 6px; margin-bottom: 4px;
border-bottom: 1px solid var(--line);
}
.telkop span:last-child { text-align: right; }
.telrij {
display: grid; grid-template-columns: 78px 1fr 100px; gap: 10px;
align-items: center; padding: 4px 0;
}
.telrij .coupure { font-weight: 600; font-variant-numeric: tabular-nums; }
.telrij input { width: 100%; text-align: right; }
.telrij .telsom { color: var(--sub); font-variant-numeric: tabular-nums; }
.uitkomst {
border-radius: 10px; padding: 12px 14px;
border: 1px solid var(--line); background: var(--wash2);
}
.uitkomst.klopt { background: var(--chip-green-bg); border-color: transparent; }
.uitkomst.klopt .uitkomst-kop { color: var(--chip-green-ink); }
.uitkomst.wijkt { background: var(--chip-orange-bg); border-color: transparent; }
.uitkomst.wijkt .uitkomst-kop { color: var(--chip-orange-ink); }
.uitkomst-kop { font-weight: 600; margin-bottom: 2px; }
.uitkomst-tekst { font-size: 13px; color: var(--sub); }
body.winkel { font-family: var(--winkel-letter); }
body.winkel .btn-primary { background: var(--winkel-accent); color: var(--winkel-accent-ink);
border-radius: var(--hoek-klein); }
body.winkel a.btn-primary { color: var(--winkel-accent-ink); }
body.winkel .card { border-radius: var(--hoek); }
body.winkel .ghost { border-radius: var(--hoek-klein); }
body.winkel input, body.winkel select, body.winkel textarea { border-radius: var(--hoek-klein); }
.shop-menu { border-bottom: 1px solid var(--line); background: var(--card); }
.shop-menu-in { max-width: var(--site-breedte); margin: 0 auto; padding: 0 20px;
display: flex; gap: 4px; flex-wrap: wrap; }
.shop-menu-item { position: relative; }
.shop-menu-item > a, .shop-menu-item > summary { display: inline-block; padding: 11px 12px;
font-size: 13.5px; font-weight: 550; color: var(--ink); text-decoration: none;
cursor: pointer; list-style: none; }
.shop-menu-item > summary::-webkit-details-marker { display: none; }
.shop-menu-item > a:hover, .shop-menu-item > summary:hover { color: var(--winkel-accent); }
.shop-menu-item.heeft-onder > summary::after {
content: "▾"; font-size: 10px; margin-left: 5px; color: var(--muted); }
.shop-menu-lade { position: absolute; left: 0; top: 100%; z-index: 45; min-width: 220px;
background: var(--card); border: 1px solid var(--line); border-radius: var(--hoek-klein);
box-shadow: 0 12px 32px rgba(0,0,0,.12); padding: 6px; display: none; }
.shop-menu-item:hover .shop-menu-lade, .shop-menu-item[open] .shop-menu-lade { display: block; }
.shop-menu-lade .shop-menu-alles { font-weight: 650; border-top: 1px solid var(--line);
border-radius: 0; margin-top: 4px; padding-top: 8px; }
.shop-menu-lade .shop-menu-alles::after { content: " ›"; color: var(--muted); }
.shop-menu-lade a, .shop-menu-lade .shop-menu-kop-tekst { display: block; padding: 7px 10px;
border-radius: var(--hoek-klein); font-size: 13.5px; color: var(--ink); text-decoration: none; }
.shop-menu-lade a:hover { background: var(--wash); }
.shop-menu2 { border-bottom: 1px solid var(--line); background: var(--wash2); }
.shop-menu2-in { max-width: var(--site-breedte); margin: 0 auto; padding: 6px 20px;
display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; }
.shop-menu2-in a { color: var(--sub); text-decoration: none; }
.shop-menu2-in a:hover { color: var(--ink); }
@media (max-width: 760px) {
.shop-menu-in { overflow-x: auto; flex-wrap: nowrap; }
.shop-menu-item > a, .shop-menu-item > summary { white-space: nowrap; padding: 10px 10px; }
.shop-menu-in { overflow: visible; flex-wrap: wrap; }
.shop-menu-item[open] { width: 100%; }
.shop-menu-item:hover .shop-menu-lade { display: none; }
.shop-menu-item[open] .shop-menu-lade { position: static; display: block;
box-shadow: none; border: 0; padding: 0 0 8px; }
}
.shop-voet-onder { border-top: 1px solid var(--line); }
.shop-voet-onder-in { max-width: var(--site-breedte); margin: 0 auto; padding: 10px 20px;
font-size: 12px; color: var(--muted); }
.shop-lade-knop { display: none; border: 1px solid var(--line); background: var(--card); color: var(--ink);
border-radius: var(--hoek-klein); width: 36px; height: 34px; align-items: center; justify-content: center; cursor: pointer; }
.shop-lade { position: fixed; inset: 0; z-index: 80; background: var(--bg); overflow-y: auto; }
.shop-lade[hidden] { display: none; }
.shop-lade-kop { position: sticky; top: 0; background: var(--card); border-bottom: 1px solid var(--line);
display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.shop-lade-titel { font-weight: 650; font-size: 15px; flex: 1; }
.shop-lade-sluit, .shop-lade-terug { border: 0; background: none; color: var(--ink); font-size: 26px;
line-height: 1; cursor: pointer; padding: 0 6px; }
.shop-lade-lijst { display: flex; flex-direction: column; }
.shop-lade-regel { display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 14px 16px; border-bottom: 1px solid var(--line); background: none; border-left: 0; border-right: 0;
border-top: 0; font: inherit; font-size: 15px; color: var(--ink); text-align: left; text-decoration: none;
width: 100%; cursor: pointer; }
.shop-lade-regel:active { background: var(--wash); }
.shop-lade-pijl { color: var(--muted); font-size: 20px; }
.shop-lade-scheiding { height: 10px; background: var(--wash);
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 760px) {
.shop-lade-knop { display: inline-flex; }
.shop-menu, .shop-menu2 { display: none; }
}
.shop-paneel-knop { display: none; align-items: center; gap: 7px; }
.shop-paneel { position: fixed; left: 0; right: 0; top: 0; z-index: 60; background: var(--card);
border-bottom: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0,0,0,.10);
max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain; }
.shop-paneel[hidden] { display: none; }
.shop-paneel-in { max-width: var(--site-breedte); margin: 0 auto; display: flex; gap: 0;
padding: 0 20px; min-height: 260px; }
.shop-paneel-links { width: 240px; flex: none; border-right: 1px solid var(--line);
padding: 10px 10px 14px 0; display: flex; flex-direction: column; }
.shop-paneel-cat { display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 9px 12px; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--ink);
text-align: left; border-radius: var(--hoek-klein); cursor: pointer; }
.shop-paneel-cat:hover, .shop-paneel-cat.actief { background: var(--wash); }
.shop-paneel-pijl { color: var(--muted); }
.shop-paneel-meer { padding: 8px 12px; font-size: 12px; color: var(--muted); }
.shop-paneel-rechts { flex: 1; padding: 14px 0 18px 20px; min-width: 0; }
.shop-paneel-kolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.shop-paneel-kop { display: block; font-weight: 650; font-size: 13.5px; color: var(--ink);
text-decoration: none; margin-bottom: 8px; }
.shop-paneel-kop:hover { color: var(--winkel-accent); }
.shop-paneel-artikel { display: flex; align-items: center; gap: 8px; padding: 4px 0;
font-size: 13px; color: var(--sub); text-decoration: none; }
.shop-paneel-artikel:hover { color: var(--ink); }
.shop-paneel-artikel img { width: 28px; height: 28px; object-fit: cover; border-radius: var(--hoek-klein);
border: 1px solid var(--line); flex: none; }
.shop-paneel-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-paneel-alles { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 600;
color: var(--winkel-accent); text-decoration: none; }
.shop-paneel-alles::after { content: " ›"; }
@media (min-width: 761px) {
.shop-paneel-knop { display: inline-flex; }
}
details.card > summary { list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: "▾"; margin-left: auto; color: var(--muted); font-size: 11px;
transition: transform .12s; }
details.card[open] > summary::after { transform: rotate(180deg); }
.site-pagina { display: flex; flex-direction: column; }
.site-blok > section { padding: 34px 20px; }
.site-blok:first-child > section { padding-top: 26px; }
.site-pagina h2 { font-size: 24px; margin: 0 0 14px; letter-spacing: -.01em; }
.site-pagina h3 { font-size: 17px; margin: 18px 0 6px; }
.site-pagina p { margin: 0 0 10px; max-width: 68ch; line-height: 1.62; }
.site-pagina ul { margin: 0 0 12px; padding-left: 20px; max-width: 68ch; line-height: 1.62; }
.site-pagina ol { margin: 0 0 12px; padding-left: 22px; max-width: 68ch; line-height: 1.62; }
.site-pagina p a, .site-pagina li a, .site-pagina td a { color: var(--accent, #1a56db); text-decoration: underline; text-underline-offset: 2px; }
.site-tabel { overflow-x: auto; margin: 0 0 14px; max-width: 100%; }
.site-tabel table { border-collapse: collapse; width: auto; min-width: 280px; font-size: 15px; }
.site-tabel th, .site-tabel td { border-bottom: 1px solid var(--line, #e5e7eb); padding: 8px 12px; text-align: left; vertical-align: top; }
.site-tabel th { font-weight: 600; background: var(--bg-soft, #f6f7f9); }
.site-tabel td:first-child, .site-tabel th:first-child { padding-left: 0; }
.opmaakbalk { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: middle; }
.opmaakbalk button { border: 1px solid var(--line); background: var(--card); border-radius: 5px; min-width: 26px; height: 24px; padding: 0 7px; font-size: 12px; color: var(--text); cursor: pointer; line-height: 1; }
.opmaakbalk button:hover { background: var(--bg-soft); }
.opmaakbalk button.vet { font-weight: 700; }
.opmaakbalk button.cursief { font-style: italic; }
.opmaakbalk + .infopunt { margin-left: 4px; }
.site-pagina li { margin: 3px 0; }
.site-knop { display: inline-flex; margin-top: 12px; text-decoration: none; }
.site-kop { position: relative; overflow: hidden; border-radius: var(--hoek);
background: var(--wash); padding: 52px 20px; }
.site-kop-foto { position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; opacity: .30; }
.site-kop-in { position: relative; }
.site-kop h1 { font-size: 34px; margin: 0 0 10px; letter-spacing: -.02em; text-wrap: balance; }
.site-kop-tekst { font-size: 16.5px; color: var(--muted); max-width: 60ch; }
.site-tekst, .site-punten, .site-vraag { width: 100%; }
.site-fototekst { width: 100%;
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; }
.site-fototekst.foto-rechts .site-fototekst-foto { order: 2; }
.site-fototekst-foto { width: 100%; height: auto; border-radius: var(--hoek); display: block; }
@media (max-width: 760px) {
.site-fototekst { grid-template-columns: 1fr; gap: 18px; }
.site-fototekst.foto-rechts .site-fototekst-foto { order: 0; }
}
.site-punten-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.site-punt { background: var(--card); border: 1px solid var(--line); border-radius: var(--hoek-klein);
padding: 14px 16px; font-weight: 600; }
.site-vraag-regel { border-bottom: 1px solid var(--line); }
.site-vraag-regel summary { cursor: pointer; padding: 13px 0; font-weight: 600; list-style: none; }
.site-vraag-regel summary::-webkit-details-marker { display: none; }
.site-vraag-regel summary::after { content: "+"; float: right; color: var(--muted); font-weight: 400; }
.site-vraag-regel[open] summary::after { content: "\2212"; }
.site-vraag-antwoord { padding: 0 0 14px; color: var(--muted); max-width: 68ch; line-height: 1.62; }
.site-oproep { background: var(--wash); }
.site-oproep-in { text-align: center; }
.site-oproep-in p { margin-left: auto; margin-right: auto; }
.pagina-blok { border-bottom: 1px solid var(--line); padding: 14px 18px; }
.pagina-blok-kop { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.pagina-blok-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.pagina-blok-velden label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.pagina-blok-erbij { display: flex; gap: 12px; align-items: flex-end; padding: 14px 18px; flex-wrap: wrap; }
.pagina-blok-erbij label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.chip.stand-live { color: var(--pos); border-color: currentColor; }
.chip.stand-concept { color: var(--muted); }
.chip.stand-wijziging { color: var(--neg); border-color: currentColor; }
.pagina-kaartvelden { display: grid; gap: 12px; padding: 14px 18px; }
.pagina-kaartvelden label { display: flex; flex-direction: column; gap: 4px;
font-size: 12.5px; color: var(--muted); }
.subnav-kop { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
color: var(--muted); padding: 12px 12px 4px; }
.site-conceptbalk { background: var(--wash); border-bottom: 1px solid var(--line);
padding: 9px 20px; text-align: center; font-size: 13px; color: var(--sub); }
.site-hero { position: relative; overflow: hidden; border-radius: var(--hoek);
background: var(--wash); padding: 62px 20px; }
.site-hero.smal { padding: 34px 20px; }
.site-hero-in { position: relative; }
.site-hero h1 { font-size: 34px; margin: 0 0 10px; letter-spacing: -.02em; text-wrap: balance; }
.site-hero.smal h1 { font-size: 26px; }
.site-hero-tekst { font-size: 16.5px; color: var(--muted); max-width: 60ch; }
.site-hero.metfoto { display: flex; padding: 0; }
.site-hero-foto { width: 100%; height: 352px; object-fit: cover; display: block; }
.site-hero.metfoto.smal .site-hero-foto { height: 232px; }
.site-hero-waas { position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top, rgba(17, 18, 22, .74) 0%,
rgba(17, 18, 22, .42) 34%, rgba(17, 18, 22, 0) 66%); }
.site-hero.metfoto .site-hero-in { position: absolute; inset: 0; max-width: none;
display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
gap: 14px; padding: 30px; color: #fff; }
.site-hero.metfoto h1 { color: #fff; margin: 0; text-shadow: 0 1px 14px rgba(0, 0, 0, .34); }
.site-hero.metfoto .site-hero-tekst { color: rgba(255, 255, 255, .92); margin: 0;
text-shadow: 0 1px 10px rgba(0, 0, 0, .34); }
.site-hero.schuifband { flex-direction: column; }
.site-hero-dias { display: grid; width: 100%; }
.site-hero-dia { grid-area: 1 / 1; position: relative; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.site-hero-dia.aan { opacity: 1; pointer-events: auto; z-index: 1; }
.site-hero.metfoto .site-hero-dia:not(.metfoto) { padding: 62px 20px; }
.site-hero-kop { font-size: 34px; margin: 0 0 10px; letter-spacing: -.02em; text-wrap: balance; }
.site-hero-dia.metfoto:not(.kaart) .site-hero-waas { background: linear-gradient(90deg, rgba(17, 18, 22, .68) 0%, rgba(17, 18, 22, .46) 40%, rgba(17, 18, 22, 0) 78%); }
.site-hero-dia.metfoto:not(.kaart) .site-hero-in { justify-content: center; max-width: 560px; }
.site-hero-dia.metfoto:not(.kaart) .site-hero-tekst { font-size: 15px; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.site-hero.metfoto .site-hero-kop { color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .34); }
.site-hero-bediening { display: flex; justify-content: center; align-items: center; gap: 14px; height: 32px; margin-top: 6px; }
.site-hero-pijl { width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; border-radius: 6px; }
.site-hero-pijl:hover { background: var(--wash); color: var(--ink); }
.site-hero-bolletjes { display: flex; gap: 7px; }
.site-hero-bolletje { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; }
.site-hero-bolletje.aan { background: var(--winkel-accent); }
.site-hero-bolletje:focus-visible, .site-hero-pijl:focus-visible { outline: 2px solid var(--winkel-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .site-hero-dia { transition: none; } }
.site-hero-knop { display: inline-flex; align-items: center; gap: 8px;
background: var(--winkel-accent); color: #fff; text-decoration: none;
border-radius: var(--hoek-klein); padding: 11px 18px; font-weight: 600; }
.site-hero-knop:hover { filter: brightness(1.08); color: #fff; }
.site-hero:not(.metfoto) .site-hero-knop { margin-top: 4px; }
@media (max-width: 700px) {
.site-hero-foto { height: 268px; }
.site-hero.metfoto .site-hero-in { padding: 20px; gap: 11px; }
}
.site-tekstfoto { width: 100%;
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; }
.site-tekstfoto .site-tekstfoto-foto { order: 2; }
.site-tekstfoto.foto-links .site-tekstfoto-foto { order: 0; }
.site-tekstfoto-foto { width: 100%; height: auto; border-radius: var(--hoek); display: block; }
@media (max-width: 760px) {
.site-tekstfoto { grid-template-columns: 1fr; gap: 18px; }
.site-tekstfoto .site-tekstfoto-foto { order: 0; }
}
.site-knoppen-in, .site-merken-in {
display: flex; flex-wrap: wrap; gap: 10px; }
.site-merken-in { gap: 8px 22px; align-items: center; }
.site-merk { color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.site-snelstart, .site-team, .site-fototegels, .site-merken, .site-producten,
.site-categorien, .site-contact, .site-formulier, .site-video {
width: 100%; }
.site-snelstart-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.site-snelstart-tegel { background: var(--card); border: 1px solid var(--line);
border-radius: var(--hoek-klein); padding: 15px 16px; font-weight: 600; text-decoration: none; }
.site-snelstart-tegel:hover { border-color: var(--winkel-accent); color: var(--winkel-accent); }
.site-team-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.site-teamlid img { width: 100%; aspect-ratio: 1; object-fit: cover;
border-radius: var(--hoek-klein); margin-bottom: 8px; }
.site-teamnaam { font-weight: 650; }
.site-teamrol { color: var(--muted); font-size: 13px; }
.site-team.met-kaarten .site-team-in { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 21px; }
.site-team.met-kaarten .site-teamlid { display: flex; flex-direction: column; background: var(--card, #fff); border-radius: 24px; box-shadow: 0 5px 5px rgba(0, 0, 0, .1); overflow: hidden; }
.site-team.met-kaarten .site-teamfoto { display: block; background: #eff2f5; padding: 10px 32px 0; }
.site-team.met-kaarten .site-teamlid img { display: block; width: 100%; aspect-ratio: 622 / 457; object-fit: contain; object-position: bottom; border-radius: 0; mix-blend-mode: multiply; }
.site-team.met-kaarten .site-teamtekst { display: flex; flex-direction: column; gap: 24px; padding: 30px 32px 32px; }
.site-team.met-kaarten .site-teamkop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 24px; border-bottom: 1px dashed var(--line); }
.site-team.met-kaarten .site-teamnaam { font-size: 19px; font-weight: 700; }
.site-team.met-kaarten .site-teamrol { font-size: 14px; padding-top: 4px; }
.site-teamprofiel { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #eff2f5; color: inherit; font-weight: 800; font-size: 16px; text-decoration: none; }
.site-teammail { display: inline-flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 600; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.site-teammail svg { flex: none; box-sizing: content-box; padding: 8px; border-radius: 8px; background: #eff2f5; }
.site-fototegels-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.site-fototegels-in img { width: 100%; aspect-ratio: 4/3; object-fit: cover;
border-radius: var(--hoek-klein); display: block; }
.site-video-vlak { background: var(--wash); border: 1px solid var(--line);
border-radius: var(--hoek); padding: 26px 20px; text-align: center; }
.site-video-uitleg { color: var(--muted); font-size: 13px; max-width: 56ch;
margin: 12px auto 0; }
.site-video-vlak iframe { width: 100%; aspect-ratio: 16/9; border: 0;
border-radius: var(--hoek-klein); display: block; }
.site-producten-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.site-product { display: flex; flex-direction: column; gap: 6px; text-decoration: none;
background: var(--card); border: 1px solid var(--line); border-radius: var(--hoek);
padding: 12px; color: inherit; }
.site-product:hover { border-color: var(--winkel-accent); }
.site-product img { width: 100%; aspect-ratio: 1; object-fit: contain;
border-radius: var(--hoek-klein); }
.site-product-naam { font-weight: 600; font-size: 13.5px; }
.site-product-prijs { color: var(--muted); font-size: 13px; }
.site-leeg { color: var(--muted); }
.site-categorien-in { display: grid;
grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 16px; }
.site-categorie { display: flex; flex-direction: column; overflow: hidden;
border: 1px solid var(--line); border-radius: var(--hoek); background: var(--card);
text-decoration: none; color: inherit; }
.site-categoriefoto { display: block; aspect-ratio: 16/9; overflow: hidden;
background: var(--wash); }
.site-categoriefoto img { width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .3s ease; }
.site-categorie:hover .site-categoriefoto img { transform: scale(1.05); }
.site-categorienaam { display: block; padding: 14px 16px; }
.site-categorienaam b { display: block; font-weight: 650; }
.site-categorienaam small { display: block; padding-top: 4px; font-size: 12px;
color: var(--muted); }
.site-categoriepijl { display: none; }
.site-categorie:hover { border-color: var(--winkel-accent); }
.site-categorie:hover .site-categorienaam b { color: var(--winkel-accent); }
.site-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; border-radius: var(--nova-r, 10px); padding: 18px 22px; margin: 0; background-size: cover; background-position: center; }
.site-banner-in { display: grid; gap: 3px; min-width: 0; }
.site-banner-kop { font-size: 19px; line-height: 1.25; text-wrap: balance; }
.site-banner-regel { font-size: 14px; opacity: .88; }
.site-banner-knop { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: var(--nova-r-klein, 8px); font-weight: 600; white-space: nowrap; text-decoration: none; }
.site-banner-accent { background-color: var(--winkel-accent); color: var(--winkel-accent-ink, #fff); }
.site-banner-accent .site-banner-knop { background: var(--winkel-accent-ink, #fff); color: var(--winkel-accent); }
.site-banner-licht { background-color: var(--wash); color: var(--text); border: 1px solid var(--line); }
.site-banner-licht .site-banner-regel { opacity: 1; color: var(--sub); }
.site-banner-licht .site-banner-knop { background: var(--winkel-accent); color: var(--winkel-accent-ink, #fff); }
.site-banner-foto { color: #fff; position: relative; overflow: hidden; min-height: 120px; }
.site-banner-foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.28)); }
.site-banner-foto > * { position: relative; }
.site-banner-foto .site-banner-knop { background: #fff; color: #111; }
@media (max-width: 639px) { .site-banner { grid-template-columns: 1fr; padding: 16px; } .site-banner-knop { justify-content: center; } }
.site-cta { background: var(--wash); }
.site-cta-in { text-align: center; }
.site-cta-in p { margin-left: auto; margin-right: auto; }
.site-contact-in { display: grid; grid-template-columns: max-content 1fr;
gap: 7px 18px; margin: 0; max-width: 60ch; }
.site-contact-in dt { color: var(--muted); }
.site-contact-in dd { margin: 0; }
.site-formulier-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px; max-width: 720px; }
.site-formulier-in label { display: flex; flex-direction: column; gap: 4px;
font-size: 13px; color: var(--muted); }
.site-formulier-in label.breed, .site-formulier-in .breed, .site-formulier-in button { grid-column: 1 / -1; }
.site-formulier-in button { justify-self: start; }
.site-terugbel { background: var(--wash); }
.site-terugbel-in { text-align: center; }
.site-terugbel-form { display: flex; gap: 10px; justify-content: center;
flex-wrap: wrap; margin-top: 12px; }
.site-terugbel-form input { min-width: 220px; }
.alleen-voorlezen { position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; }
.pagina-blok-velden .taalcode { text-transform: uppercase; font-size: 10.5px;
letter-spacing: .05em; background: var(--wash); border-radius: 4px; padding: 1px 4px;
margin-right: 4px; }
.site-melding { width: 100%;
padding: 12px 16px; border-radius: var(--hoek-klein); font-size: 14px; }
.site-melding.goed { background: var(--wash); border-left: 3px solid var(--pos); }
.site-melding.fout { background: var(--wash); border-left: 3px solid var(--neg); }
.wp-regel { display: flex; gap: 8px; align-items: center; padding: 9px 18px;
border-bottom: 1px solid var(--line); }
.site-cockpit { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
gap: 12px; margin-bottom: 16px; }
.site-tegel { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px;
background: var(--card); border: 1px solid var(--line); border-radius: var(--hoek);
text-decoration: none; color: inherit; }
.site-tegel:hover { border-color: var(--ink); }
.site-tegel-getal { font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--pos);
font-variant-numeric: tabular-nums; }
.site-tegel.vraagt-aandacht .site-tegel-getal { color: var(--neg); }
.site-tegel-naam { font-weight: 650; }
.site-rooster { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 14px; align-items: start; }
.shop-zoekpaginas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
background: var(--wash); border-radius: var(--hoek); padding: 12px 16px; margin-bottom: 14px; }
.shop-zoekpaginas .eyebrow { margin-right: 4px; }
.shop-zoekpaginas a { font-weight: 600; }
.site-berichtkop { width: 100%; padding: 26px 20px 0; }
.site-berichtkop h1 { font-size: 30px; margin: 0 0 6px; letter-spacing: -.02em; text-wrap: balance; }
.site-berichtfoto { width: 100%; height: auto; border-radius: var(--hoek); margin-top: 16px; display: block; }
.site-berichten { width: 100%; }
.site-berichten-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.site-bericht { display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: inherit; }
.site-bericht img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--hoek); }
.site-bericht-naam { font-weight: 650; }
.site-bericht:hover .site-bericht-naam { color: var(--winkel-accent); }
.site-reacties { width: 100%; padding: 30px 20px; }
.site-reactie { border-top: 1px solid var(--line); padding: 12px 0; }
.site-reactie-wie { font-weight: 600; }
.site-reactie-tekst { color: var(--muted); white-space: pre-line; margin-top: 3px; }
.site-reactie-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px; max-width: 640px; margin-top: 18px; }
.site-reactie-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.site-reactie-form label.breed, .site-reactie-form button { grid-column: 1 / -1; }
.site-reactie-form button { justify-self: start; }
.site-reactie-rij { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap;
padding: 12px 18px; border-bottom: 1px solid var(--line); }
.schrijfrij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.schrijfmelding { font-size: 12px; color: var(--muted); }
.schrijfmelding.fout { color: var(--neg); }
.shop-zoek { position: relative; }
.shop-sug { position: absolute; top: calc(100% + 6px); left: 0; width: min(880px, calc(100vw - 32px)); z-index: 70;
background: var(--card); border: 1px solid var(--line); border-radius: var(--hoek);
box-shadow: 0 18px 40px rgba(0,0,0,.12); overflow: hidden;
max-height: min(60vh, calc(100vh - 140px)); overflow-y: auto; overscroll-behavior: contain; }
.shop-sug[hidden] { display: none; }
.shop-sug-kop { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
color: var(--muted); padding: 10px 14px 4px; }
.shop-sug-regel, .shop-sug-artikel, .shop-sug-alles {
display: flex; align-items: center; gap: 10px; padding: 8px 14px;
text-decoration: none; color: inherit; font-size: 13.5px; }
.shop-sug-regel:hover, .shop-sug-artikel:hover, .shop-sug-alles:hover,
.shop-sug a.sug-aan { background: var(--wash); }
.shop-sug-artikel img, .shop-sug-geenfoto { width: 34px; height: 34px; flex: none;
object-fit: contain; border-radius: var(--hoek-klein); background: var(--wash); }
.shop-sug-naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-sug-prijs { color: var(--muted); }
.shop-sug-alles { border-top: 1px solid var(--line); font-weight: 600; color: var(--winkel-accent); }
.shop-sug-leeg { padding: 14px 16px; color: var(--muted); font-size: 13.5px; display: flex; flex-direction: column; gap: 6px; }
.shop-sug-leeg b { color: var(--ink); font-size: 14.5px; }
.shop-sug-opties { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.shop-sug-opties a { border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; text-decoration: none; color: var(--ink); font-size: 13px; background: var(--card); }
.shop-sug-opties a.aan { background: var(--winkel-accent); color: #fff; border-color: var(--winkel-accent); }
.shop-sug-kolommen { display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.shop-sug-kolommen.een { grid-template-columns: 1fr; }
.shop-zoekniets { border: 1px dashed var(--line); border-radius: var(--hoek); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.shop-zoekniets b { font-size: 16px; }
.shop-sug-kol { padding: 6px 6px 8px; min-width: 0; }
.shop-sug-kol.links { border-right: 1px solid var(--line); background: var(--wash2, var(--wash)); }
.shop-sug-kol .shop-sug-regel { justify-content: space-between; }
.shop-sug-kol .shop-sug-regel small { color: var(--muted); }
.shop-sug-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shop-sug-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-sug-voorraad.ja { color: var(--pos); } .shop-sug-voorraad.nee { color: var(--neg); }
.shop-sug-gelezen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px 2px; font-size: 12px; }
.shop-sug-gelezen .mut { color: var(--muted); }
.shop-sug-gelezen .chip { background: var(--wash); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-weight: 500; font: inherit; font-size: 12px; }
.shop-sug-gelezen .chip.stil { background: var(--wash); color: var(--ink); cursor: pointer; }
.shop-sug-bedoel { margin: 6px 10px; background: #fff0c2; color: #6b4d00; border-radius: 7px; padding: 7px 10px; font-size: 13px; }
.shop-sug-tip { padding: 10px 12px; color: var(--muted); font-size: 12.5px; }
.shop-sug-snel { padding: 8px 6px; }
.shop-sug-snelregel { display: grid; grid-template-columns: 56px 1fr; gap: 2px 10px; padding: 7px 10px; border-radius: var(--hoek-klein); }
.shop-sug-snelregel .shop-sug-sub { grid-column: 2; }
.shop-sug-snelregel.mis .shop-sug-naam { color: var(--neg); }
.shop-sug-voet { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 2px; }
.shop-zoek .shop-zoek-dicht { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); cursor: pointer; padding: 5px; display: flex; border-radius: 50%; z-index: 2; }
.shop-zoek:has(.shop-zoek-dicht:not([hidden])) > svg { visibility: hidden; }
.shop-zoek .shop-zoek-dicht:hover { color: var(--ink); background: var(--wash); }
.shop-zoek .shop-zoek-dicht[hidden] { display: none; }
.shop-zoek input[type=search]::-webkit-search-cancel-button, .shop-zoek input[type=search]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.shop-scanvak { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.shop-scanvak video { max-width: 92vw; max-height: 70vh; border-radius: 12px; }
.shop-zoekkop { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.shop-zoekgelezen, .shop-zoekingang { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; }
.shop-zoekgelezen .mut { color: var(--muted); }
.shop-zoekgelezen .chip { background: var(--wash); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-weight: 500; }
.shop-zoekingang .chip { border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; text-decoration: none; color: var(--ink); background: var(--card); }
.shop-zoekingang .chip small { color: var(--muted); margin-left: 4px; }
.shop-zoektegel { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--hoek); padding: 10px 14px; text-decoration: none; color: inherit; background: var(--wash2, var(--wash)); }
.shop-zoektegel span { display: flex; flex-direction: column; } .shop-zoektegel small { color: var(--muted); }
.shop-zoekbewaar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.shop-zoeklanding h1 { margin: 0 0 6px; } .shop-zoeklanding p { max-width: 70ch; color: var(--sub); margin: 0 0 14px; }
.shop-kaart .kaart-raak { font-size: 11px; background: #fff0c2; color: #6b4d00; border-radius: 5px; padding: 1px 6px; }
@media (max-width: 700px) { .shop-sug { position: fixed; left: 8px !important; right: 8px; top: 64px; width: auto; max-height: calc(100vh - 80px); } .shop-sug-kolommen { grid-template-columns: 1fr; } .shop-sug-kol.links { border-right: 0; border-bottom: 1px solid var(--line); } }
.shop-koptel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
color: inherit; white-space: nowrap; }
.shop-koptel-tekst { display: flex; flex-direction: column; line-height: 1.25; }
.shop-koptel-tekst b { font-size: 13.5px; }
.shop-koptel-tekst small { font-size: 11px; color: var(--muted); font-weight: 400; }
.shop-btw { display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
color: inherit; font-size: 13.5px; white-space: nowrap; }
.shop-btw-schakel { width: 38px; height: 21px; border-radius: 999px; background: #b9bfba;
position: relative; flex: none; transition: background .15s; }
.shop-btw-schakel::after { content: ""; position: absolute; top: 2.5px; left: 2.5px;
width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.shop-btw.aan .shop-btw-schakel { background: var(--ink); }
.shop-btw.aan .shop-btw-schakel::after { left: 19px; }
#retourvorm > .card { align-self: start; }
.retourkop {
display: grid; grid-template-columns: 1fr 76px 90px 96px; gap: 10px;
font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
color: var(--muted); padding-bottom: 6px; margin-bottom: 4px;
border-bottom: 1px solid var(--line);
}
.retourkop span:not(:first-child) { text-align: right; }
.retourrij {
display: grid; grid-template-columns: 1fr 76px 90px 96px; gap: 10px;
align-items: center; padding: 8px 0;
}
.retourrij .naam { font-size: 13.5px; }
.retourrij .naam small { display: block; color: var(--muted); font-size: 12px; }
.retourrij input { width: 100%; text-align: right; }
.retourrij .retour-som { color: var(--sub); font-variant-numeric: tabular-nums; }
.retourdefect {
display: flex; gap: 7px; align-items: center; font-size: 12.5px;
color: var(--muted); padding: 0 0 10px 2px; border-bottom: 1px solid var(--line);
cursor: pointer;
}
.retourdefect input { width: auto; }
.shop-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
display: flex; align-items: center; gap: 10px; padding: 12px 18px;
background: #1f2937; color: #fff; border-radius: 10px; font-size: 14px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none;
transition: opacity .18s ease, transform .18s ease; z-index: 90; max-width: calc(100vw - 32px); }
.shop-toast.zichtbaar { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.shop-toast-vink { display: inline-flex; width: 20px; height: 20px; border-radius: 50%;
align-items: center; justify-content: center; background: var(--winkel-accent, #16a34a); color: #fff; font-size: 12px; font-weight: 700; }
.shop-toast a { color: #fff; font-weight: 600; text-decoration: underline; margin-left: 4px; }
.nova-inwagen.bezig, .pdp-koopknop.bezig { opacity: .7; }
.nova-inwagen.gelukt { background: #16a34a !important; }
@media (prefers-reduced-motion: reduce) { .shop-toast { transition: none; } }
.chat-widget { position: fixed; right: 21.6px; bottom: calc(16px + var(--koopbalk-h, 0px)); z-index: 60; transition: bottom .25s ease; font-family: var(--chat-letter, inherit); }
.chat-paneel { position: fixed; right: 21.6px; bottom: calc(94px + var(--koopbalk-h, 0px)); width: var(--chat-breedte, 380px); height: 650px;
max-height: calc(100vh - 110px); display: flex; flex-direction: column; overflow: hidden;
background: var(--chat-venster, var(--card, #fff)); color: var(--chat-tekst, var(--ink, #37352f)); border-radius: var(--chat-hoek, 13px);
box-shadow: 0 5px 40px rgba(0, 0, 0, .15); font-size: 13.5px; line-height: 1.5; font-family: var(--chat-letter, inherit); }
.chat-paneel[hidden] { display: none; }
.chat-kop { display: flex; align-items: center; gap: 10.8px; padding: 14.4px 18px; background: var(--chat-kop, var(--wash, #f7f6f3)); color: var(--chat-kop-ink, inherit); min-height: 67px; }
.chat-kop-icoon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--chat-venster, var(--card, #fff)); color: var(--chat-tekst, var(--ink, #333)); flex: none; }
.chat-kop-tekst { display: flex; flex-direction: column; min-width: 0; }
.chat-kop-tekst b { font-size: 15.3px; font-weight: 700; line-height: 1.3; }
.chat-kop-tekst small { font-size: 11.7px; color: var(--chat-kop-ink, var(--muted, #71717a)); opacity: .75; }
.chat-sluit { margin-left: auto; width: 29px; height: 29px; border: 0; background: transparent; color: var(--chat-kop-ink, var(--muted, #71717a));
font-size: 22px; line-height: 1; border-radius: 6px; cursor: pointer; display: grid; place-items: center; }
.chat-sluit:hover { background: rgba(0, 0, 0, .06); color: var(--ink, #333); }
.chat-lijf { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-zicht { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-zicht[hidden] { display: none; }
.chat-zicht[data-chat-view="home"], .chat-zicht[data-chat-view="help"] { align-items: center; justify-content: center; text-align: center; padding: 28px; gap: 6px; }
.chat-hallo-icoon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--chat-bel-team, var(--wash, #f4f4f5)); color: var(--chat-bel-team-ink, var(--ink, #333)); margin-bottom: 14px; }
.chat-hallo { font-size: 18px; font-weight: 700; }
.chat-zicht p { margin: 0 0 14px; color: var(--chat-tekst, var(--muted, #71717a)); opacity: .8; font-size: 13.5px; max-width: 30ch; }
.chat-start { display: inline-flex; align-items: center; gap: 7.2px; padding: 9px 18px; border: 0; border-radius: var(--chat-hoek-knop, 6px); cursor: pointer;
background: var(--chat-knop, var(--winkel-accent, #16a34a)); color: var(--chat-knop-ink, #fff); font: 600 12.6px/18.9px inherit; font-family: inherit; }
.chat-start:hover { filter: brightness(1.08); }
.chat-help-links { display: flex; flex-direction: column; gap: 8px; }
.chat-help-links a { font-weight: 600; color: var(--chat-accent, var(--winkel-accent, #16a34a)); }
.chat-berichten { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.chat-bel { background: var(--chat-bel-team, var(--wash, #f4f4f5)); color: var(--chat-bel-team-ink, inherit); border-radius: var(--chat-hoek-bel, 12px) var(--chat-hoek-bel, 12px) var(--chat-hoek-bel, 12px) 3px; padding: 8px 12px; max-width: 85%; align-self: flex-start; word-wrap: break-word; }
.chat-bel .chat-status { display: block; font-size: 10px; opacity: .7; margin-top: 2px; text-align: right; }
.chat-bel.wacht { opacity: .6; }
.cp-bubbel.wacht { opacity: .6; }
.cp-bubbel .vinkjes { font-variant-numeric: tabular-nums; }
.chat-bel.van-mij { align-self: flex-end; background: var(--chat-bel-klant, var(--winkel-accent, #16a34a)); color: var(--chat-bel-klant-ink, #fff); border-radius: var(--chat-hoek-bel, 12px) var(--chat-hoek-bel, 12px) 3px var(--chat-hoek-bel, 12px); }
.chat-form { padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.chat-intro { display: flex; flex-direction: column; gap: 8px; padding: 0 14px; }
.chat-intro input { height: 38px; border: 1px solid var(--chat-rand, var(--line, #e4e4e7)); border-radius: var(--chat-hoek-knop, 6px); padding: 0 12px; font-size: 12.6px; background: var(--chat-venster, var(--card, #fff)); color: inherit; }
.chat-invoer { position: relative; display: flex; align-items: center; border: 1px solid var(--chat-rand, var(--line, #e4e4e7)); border-radius: 999px; padding: 4px 4px 4px 14.4px; background: var(--chat-venster, var(--card, #fff)); }
.chat-invoer:focus-within { border-color: var(--chat-accent, var(--ink, #333)); }
.chat-invoer input { flex: 1; min-width: 0; border: 0; background: transparent; height: 36px; font-size: 12.6px; color: inherit; outline: none; padding: 0; }
.chat-clip { display: grid; place-items: center; width: 28px; height: 28px; margin-right: 4px; border-radius: 50%; color: var(--chat-tekst, var(--muted, #71717a)); opacity: .7; cursor: pointer; flex: none; }
.chat-clip:hover { opacity: 1; background: var(--chat-rand, var(--line, #e4e4e7)); }
.chat-bel .chat-bijlage { color: inherit; display: inline-flex; flex-direction: column; gap: 4px; text-decoration: underline; }
.chat-bel .chat-bijlage img { max-width: 100%; max-height: 180px; border-radius: 8px; display: block; }
.chat-bel.fout { background: #fde8e8; color: #b42318; align-self: center; font-size: 12px; }
.chat-stuur { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--chat-rand, var(--line, #e4e4e7)); color: var(--chat-tekst, var(--muted, #71717a)); display: grid; place-items: center; cursor: pointer; flex: none; }
.chat-invoer:focus-within .chat-stuur, .chat-stuur:hover { background: var(--chat-knop, var(--winkel-accent, #16a34a)); color: var(--chat-knop-ink, #fff); }
.chat-tabs { display: grid; grid-template-columns: repeat(3, 1fr); height: 54px; background: var(--chat-venster, var(--wash, #fafafa)); border-top: 1px solid var(--chat-rand, var(--line, #eee)); }
.chat-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: transparent;
color: var(--chat-tekst, var(--muted, #a1a1aa)); opacity: .6; font-size: 10.8px; font-family: inherit; cursor: pointer; }
.chat-tab.aan { color: var(--chat-accent, var(--ink, #18181b)); opacity: 1; }
.chat-tab.aan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--chat-accent, var(--winkel-accent, #16a34a)); }
.chat-knop { width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
background: var(--chat-knop, var(--winkel-accent, #16a34a)); color: var(--chat-knop-ink, #fff); box-shadow: 0 4px 20px rgba(0, 0, 0, .15); padding: 0; font-family: inherit; }
.chat-knop .chat-kaart, .chat-knop .chat-balk-tekst { display: none; }
.chat-knop .chat-knop-dicht { display: none; font-size: 26px; line-height: 1; }
html.chat-open .chat-knop { background: var(--chat-kop, var(--wash, #f7f6f3)); color: var(--chat-kop-ink, var(--ink, #37352f)); }
html.chat-open .chat-knop .chat-knop-open { display: none; }
html.chat-open .chat-knop .chat-knop-dicht { display: block; }
@media (max-width: 480px) {
.chat-paneel { right: 0; left: 0; bottom: 0; width: auto; height: 100vh; max-height: none; border-radius: 0; }
}
.chat-widget[data-vorm="recht"] { --chat-hoek: 4px; --chat-hoek-bel: 6px; --chat-hoek-knop: 4px; }
.chat-widget[data-vorm="rond"] { --chat-hoek: 22px; --chat-hoek-bel: 18px; --chat-hoek-knop: 999px; }
.chat-widget[data-vorm="recht"] .chat-knop { border-radius: 6px; }
.chat-widget[data-schaduw="0"] .chat-paneel { box-shadow: none; border: 1px solid var(--chat-rand, var(--line, #e4e4e7)); }
.chat-widget[data-schaduw="0"] .chat-knop { box-shadow: none; }
.chat-widget[data-plaats="links"] { right: auto; left: 21.6px; }
.chat-widget[data-plaats="links"] .chat-paneel { right: auto; left: 21.6px; }
.chat-widget[data-uitvoering="kaart"] .chat-knop { width: auto; height: auto; border-radius: var(--chat-hoek, 13px); padding: 10px 16px 10px 10px; text-align: left; }
.chat-widget[data-uitvoering="kaart"] .chat-knop .chat-knop-open { display: none; }
.chat-widget[data-uitvoering="kaart"] .chat-knop .chat-kaart { display: flex; align-items: center; gap: 10px; }
html:not(.chat-open) .chat-widget[data-uitvoering="kaart"] .chat-knop .chat-knop-dicht { display: none; }
html.chat-open .chat-widget[data-uitvoering="kaart"] .chat-knop { width: 54px; height: 54px; padding: 0; border-radius: 50%; }
html.chat-open .chat-widget[data-uitvoering="kaart"] .chat-knop .chat-kaart { display: none; }
.chat-kaart-gezicht { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--chat-knop-ink, #fff); color: var(--chat-knop, #16a34a); font-weight: 700; font-size: 15px; flex: none; }
.chat-kaart-tekst { display: flex; flex-direction: column; line-height: 1.25; }
.chat-kaart-tekst b { font-size: 14px; }
.chat-kaart-tekst small { font-size: 11.5px; opacity: .85; }
.chat-widget[data-uitvoering="balk"] { left: 0; right: 0; bottom: var(--koopbalk-h, 0px); }
.chat-widget[data-uitvoering="balk"] .chat-knop { width: 100%; height: 48px; border-radius: 0; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 -4px 20px rgba(0, 0, 0, .12); font-size: 14px; font-weight: 600; }
.chat-widget[data-uitvoering="balk"] .chat-knop .chat-balk-tekst { display: inline; }
html.chat-open .chat-widget[data-uitvoering="balk"] .chat-knop { width: 100%; height: 48px; }
.chat-widget[data-uitvoering="balk"] .chat-paneel { bottom: calc(60px + var(--koopbalk-h, 0px)); }
.chat-widget[data-uitvoering="balk"][data-plaats="links"] .chat-paneel { left: 21.6px; }
.chat-blok-plek:empty { display: none; }
.chat-blok-plek { margin: 28px 0 8px; }
.chat-blok-plek .chat-widget { position: static; }
.chat-blok-plek .chat-widget .chat-knop { display: none; }
.chat-blok-plek .chat-widget .chat-paneel { position: static; width: 100%; max-width: var(--chat-breedte, 380px); height: 520px; max-height: none; border: 1px solid var(--chat-rand, var(--line, #e4e4e7)); box-shadow: none; }
.chat-blok-plek .chat-widget .chat-sluit { display: none; }
.chat-begroeting { position: fixed; right: 21.6px; bottom: calc(80px + var(--koopbalk-h, 0px)); z-index: 59; width: min(300px, calc(100vw - 44px)); background: var(--chat-venster, var(--card, #fff)); color: var(--chat-tekst, var(--ink, #151821)); border-radius: var(--chat-hoek, 13px); box-shadow: 0 10px 30px rgba(15,17,22,.18); padding: 14px 16px; font-size: 13.5px; font-family: var(--chat-letter, inherit); }
.chat-begroeting[data-plaats="links"] { right: auto; left: 21.6px; }
.chat-begroeting p { margin: 0 0 10px; }
.chat-begroeting .chat-popup-knoppen button { font-size: 12.5px; }
.ch-keuzes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ch-keuze { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-size: 13px; }
.ch-keuze input { margin: 3px 0 0; accent-color: var(--data); }
.ch-keuze.aan { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.ch-keuze-tekst { display: flex; flex-direction: column; gap: 2px; }
.ch-keuze-tekst small { color: var(--muted); }
.ch-uitvoering-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ch-uitvoering-velden[hidden] { display: none; }
.ch-kleuren { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; }
.ch-kleur { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.ch-kleur:hover { background: var(--wash2); }
.ch-kleur input[type="color"] { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: var(--card); cursor: pointer; flex: none; }
.ch-kleur-tekst { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.ch-kleur-tekst small { color: var(--muted); font-size: 11.5px; }
.ch-kleur-code { font-size: 11.5px; color: var(--muted); }
.ch-contrast { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: 12.5px; color: var(--sub); }
.ch-voorbeeld { padding: 18px; background: var(--wash2); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ch-voorbeeld[data-plaats="links"] { align-items: flex-start; }
.ch-voorbeeld[data-plaats="rechts"] { align-items: flex-end; }
.ch-voorbeeld .chat-paneel.statisch { position: static; height: auto; max-height: none; width: 100%; max-width: var(--chat-breedte, 380px); }
.ch-voorbeeld[data-vorm="recht"] { --chat-hoek: 4px; --chat-hoek-bel: 6px; --chat-hoek-knop: 4px; }
.ch-voorbeeld[data-vorm="rond"] { --chat-hoek: 22px; --chat-hoek-bel: 18px; --chat-hoek-knop: 999px; }
.ch-voorbeeld[data-schaduw="0"] .chat-paneel { box-shadow: none; border: 1px solid var(--chat-rand); }
.ch-voorbeeld[data-schaduw="0"] .chat-knop { box-shadow: none; }
.ch-voorbeeld .chat-kop, .ch-voorbeeld .chat-berichten, .ch-voorbeeld .chat-form, .ch-voorbeeld .chat-tabs { font-family: var(--chat-letter, inherit); }
.ch-voorbeeld .chat-tabs .chat-tab { font-size: 11px; }
.ch-voorbeeld .chat-kaart, .ch-voorbeeld .chat-balk-tekst { display: none; }
.ch-voorbeeld[data-uitvoering="kaart"] .chat-knop { width: auto; height: auto; border-radius: var(--chat-hoek, 13px); padding: 10px 16px 10px 10px; text-align: left; }
.ch-voorbeeld[data-uitvoering="kaart"] .chat-knop .chat-knop-open { display: none; }
.ch-voorbeeld[data-uitvoering="kaart"] .chat-kaart { display: flex; align-items: center; gap: 10px; }
.ch-voorbeeld[data-uitvoering="balk"] .ch-voorbeeld-knop { width: 100%; }
.ch-voorbeeld[data-uitvoering="balk"] .chat-knop { width: 100%; height: 48px; border-radius: 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 600; }
.ch-voorbeeld[data-uitvoering="balk"] .chat-balk-tekst { display: inline; }
.ch-voorbeeld[data-uitvoering="blok"] .ch-voorbeeld-knop { display: none; }
.ch-voorbeeld[data-uitvoering="blok"] .chat-paneel { border: 1px solid var(--chat-rand); box-shadow: none; }
.ch-voorbeeld[data-uitvoering="blok"] .chat-sluit { visibility: hidden; }
.ch-voorbeeld .cell-sub { align-self: stretch; }
@media (max-width: 900px) { .ch-keuzes, .ch-kleuren, .ch-uitvoering-velden { grid-template-columns: 1fr; } }
.web-schil { max-width: 1160px; }
.web-koppen { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 12px; flex-wrap: wrap; }
.web-kop { padding: 10px 14px; font-weight: 600; color: var(--sub); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 13.5px; border-radius: 6px 6px 0 0; }
.web-kop:hover { color: var(--ink); background: var(--wash2); }
.web-kop.aan { color: var(--ink); border-bottom-color: var(--ink); }
.web-kop-rechts { margin-left: auto; color: var(--muted); }
.web-winkelkeuze { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding: 4px 0 6px; }
.web-winkelkeuze label { font-size: 12px; color: var(--muted); }
.web-winkelkeuze select { font-weight: 600; min-width: 160px; }
.web-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: var(--wash2); margin: 0 0 16px; }
.web-tabs a { padding: 6px 12px; border-radius: 6px; font-size: 13px; color: var(--sub); text-decoration: none; }
.web-tabs a.aan { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.web-tabs a.buiten::after { content: "↗"; margin-left: 5px; color: var(--muted); font-size: 11px; }
.web-tabs a.web-tab-rechts { margin-left: 12px; color: var(--muted); }
.web-inhoud { min-width: 0; }
@media (max-width: 720px) { .web-kop-rechts { margin-left: 0; } .web-winkelkeuze { width: 100%; margin-left: 0; } }
.ui-vorm { margin-bottom: 18px; }
.ui-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding: 14px 18px; }
.ui-raster .ui-breed { grid-column: 1 / -1; }
.ui-scheiding { border-top: 1px solid var(--line); }
.ui-vink { display: flex; align-items: center; gap: 8px; font-size: 13.5px; align-self: end; padding: 8px 0; }
.ui-vinkjes { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px 18px 16px; }
.ui-meer { border-top: 1px dashed var(--line); margin: 4px 0 0; }
.ui-meer > summary { cursor: pointer; padding: 12px 18px; font-weight: 600; font-size: 13px; color: var(--sub); list-style: none; }
.ui-meer > summary::before { content: "›"; display: inline-block; margin-right: 8px; transition: transform .15s; }
.ui-meer[open] > summary::before { transform: rotate(90deg); }
.ui-knoppen { display: flex; gap: 10px; align-items: center; padding: 4px 18px 16px; }
.ui-tijden { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; padding: 14px 18px; }
.ui-tijden .field span { font-size: 12px; color: var(--muted); }
.ui-uitzondering { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 18px; border-bottom: 1px solid var(--line); }
.ui-voorbeeld { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 0 0 14px; background: #fff; color: #333; font-size: 12px; }
.ui-vb-usp { background: #f6f6f6; padding: 6px 14px; display: flex; gap: 22px; justify-content: center; font-size: 11px; }
.ui-vb-usp span::before { content: "✓ "; color: #45523c; font-weight: 700; }
.ui-vb-kop { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.ui-vb-kop img { height: 30px; width: auto; }
.ui-vb-logo { font-weight: 800; font-size: 15px; }
.ui-vb-knop { background: #45523c; color: #fff; border-radius: 6px; padding: 7px 12px; font-weight: 600; }
.ui-vb-zoek { flex: 1; max-width: 260px; border: 1px solid #e5e6e5; border-radius: 6px; background: #f6f6f6; padding: 7px 10px; color: #888; }
.ui-vb-rechts { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.stip-aandacht { width: 8px; height: 8px; border-radius: 50%; background: #d9a21b; flex: none; }
.mr-rij { display: flex; align-items: flex-start; gap: 8px; padding: 0 18px 0 12px; border-bottom: 1px solid var(--line); }
.mr-rij.onder { padding-left: 44px; background: var(--wash2); }
.mr-rij.onder .mr-rij { padding-left: 76px; }
.mr { flex: 1; min-width: 0; }
.mr > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 9px 6px; min-height: 40px; }
.mr > summary::-webkit-details-marker { display: none; }
.mr > summary::before { content: "›"; color: var(--muted); width: 10px; transition: transform .15s; }
.mr[open] > summary::before { transform: rotate(90deg); }
.mr-naam { font-size: 13.5px; font-weight: 600; }
.mr-sub { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-bewerk { font-size: 12px; color: var(--muted); }
.mr > summary:hover .mr-bewerk { color: var(--ink); text-decoration: underline; }
.mr-vorm { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 6px 12px 22px; }
.mr-knoppen { display: flex; gap: 4px; align-items: center; padding: 6px 0; margin: 0; flex: none; }
.mt { border-bottom: 1px solid var(--line); }
.mt.onder { padding-left: 32px; background: var(--wash2); }
.mt > summary { list-style: none; cursor: pointer; padding: 8px 18px; font-size: 12.5px; color: var(--muted); }
.mt > summary::-webkit-details-marker { display: none; }
.mt > summary:hover { color: var(--ink); }
.mt-vorm { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 18px 12px; }
.site-blok { width: 100%; }
.site-blok > section { width: 100%; box-sizing: border-box; max-width: var(--site-breedte); margin-inline: auto; padding-inline: 20px; }
.site-blok.opm-breedte-smal > section { max-width: 820px; }
.shop-main.site-main { max-width: none; padding-inline: 0; }
.shop-main.site-main > :not(.site-pagina) { max-width: var(--site-breedte); margin-inline: auto; padding-inline: 20px; box-sizing: border-box; }
.site-blok.opm-vlak-grijs { background: var(--nova-vlak, var(--wash, #f6f6f6)); }
.site-blok.opm-vlak-accent { background: var(--winkel-accent); color: #fff; }
.site-blok.opm-vlak-accent h1, .site-blok.opm-vlak-accent h2, .site-blok.opm-vlak-accent h3,
.site-blok.opm-vlak-accent p, .site-blok.opm-vlak-accent li, .site-blok.opm-vlak-accent a { color: #fff; }
.site-blok.opm-vlak-accent .btn-primary, .site-blok.opm-vlak-accent .site-knop { background: #fff; color: var(--winkel-accent); }
.site-blok.opm-vlak-grijs > section, .site-blok.opm-vlak-accent > section { padding-block: 34px; }
.site-blok.opm-ruimte-ruim > section { padding-block: 64px; }
.site-blok.opm-ruimte-krap > section { padding-block: 8px; }
.site-blok.opm-kol-1 .site-punten-in, .site-blok.opm-kol-1 .site-snelstart-in, .site-blok.opm-kol-1 .site-team-in, .site-blok.opm-kol-1 .site-fototegels-in, .site-blok.opm-kol-1 .site-categorien-in, .site-blok.opm-kol-1 .site-merken-in { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.site-blok.opm-kol-2 .site-punten-in, .site-blok.opm-kol-2 .site-snelstart-in, .site-blok.opm-kol-2 .site-team-in, .site-blok.opm-kol-2 .site-fototegels-in, .site-blok.opm-kol-2 .site-categorien-in, .site-blok.opm-kol-2 .site-merken-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-blok.opm-kol-3 .site-punten-in, .site-blok.opm-kol-3 .site-snelstart-in, .site-blok.opm-kol-3 .site-team-in, .site-blok.opm-kol-3 .site-fototegels-in, .site-blok.opm-kol-3 .site-categorien-in, .site-blok.opm-kol-3 .site-merken-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-blok.opm-kol-4 .site-punten-in, .site-blok.opm-kol-4 .site-snelstart-in, .site-blok.opm-kol-4 .site-team-in, .site-blok.opm-kol-4 .site-fototegels-in, .site-blok.opm-kol-4 .site-categorien-in, .site-blok.opm-kol-4 .site-merken-in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.site-blok.opm-kol-2 .site-tekst, .site-blok.opm-kol-3 .site-tekst, .site-blok.opm-kol-4 .site-tekst { column-gap: 40px; }
.site-blok.opm-kol-2 .site-tekst { column-count: 2; }
.site-blok.opm-kol-3 .site-tekst { column-count: 3; }
.site-blok.opm-kol-4 .site-tekst { column-count: 4; }
.site-blok[class*="opm-kol-"] .site-tekst > h2 { column-span: all; }
@media (max-width: 720px) {
.site-blok[class*="opm-kol-"] .site-punten-in, .site-blok[class*="opm-kol-"] .site-snelstart-in, .site-blok[class*="opm-kol-"] .site-team-in,
.site-blok[class*="opm-kol-"] .site-fototegels-in, .site-blok[class*="opm-kol-"] .site-categorien-in, .site-blok[class*="opm-kol-"] .site-merken-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-blok[class*="opm-kol-"] .site-tekst { column-count: 1; }
}
.web-schil input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not(.ghost):not(.btn-primary),
.web-schil select:not(.ghost), .web-schil textarea {
font: inherit; font-size: 13.5px; line-height: 1.35; color: var(--ink); background: var(--card);
border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; outline: none; max-width: 100%;
box-shadow: 0 1px 2px rgba(16,20,28,.04); transition: border-color .12s ease, box-shadow .12s ease; }
.web-schil input:not([type="checkbox"]):not([type="radio"]):hover, .web-schil select:hover, .web-schil textarea:hover { border-color: var(--axis); }
.web-schil input:not([type="checkbox"]):not([type="radio"]):focus, .web-schil select:focus, .web-schil textarea:focus { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.web-schil select:not(.ghost) { appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 9px center; background-size: 14px; padding-right: 30px; }
.web-schil textarea { resize: vertical; min-height: 64px; }
.web-schil input[type="date"] { min-height: 36px; }
.web-schil [hidden] { display: none !important; }
.pe-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.pe-titel { font-size: 20px; margin: 0; letter-spacing: -.01em; line-height: 1.2; }
.pe-kop-rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pe-kop-rechts form { margin: 0; display: inline-flex; }
.pe-raster { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.pe-zij { position: sticky; top: 14px; display: grid; gap: 12px; }
.pe-zij .card { margin: 0; }
.pe-velden { display: grid; gap: 10px; padding: 12px 16px 14px; }
.pe-velden .field input, .pe-velden .field select, .pe-velden .field textarea { width: 100%; }
.pe-stand { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.pe-taalstand { font-size: 12.5px; }
.pe-acties { display: flex; gap: 6px; flex-wrap: wrap; }
.pe-acties form { margin: 0; }
.pe-meer > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--sub); list-style: none; display: flex; gap: 8px; align-items: center; min-height: 28px; }
.pe-meer > summary::-webkit-details-marker { display: none; }
.pe-meer > summary::before { content: "›"; display: inline-block; transition: transform .15s; color: var(--muted); }
.pe-meer[open] > summary::before { transform: rotate(90deg); }
.pe-meer .field { margin-top: 10px; }
.pe-details { border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.pe-details > summary { cursor: pointer; padding: 11px 16px; font-weight: 600; font-size: 13px; color: var(--sub); list-style: none; }
.pe-details > summary::-webkit-details-marker { display: none; }
.pe-details > summary::before { content: "›"; display: inline-block; margin-right: 8px; transition: transform .15s; }
.pe-details[open] > summary::before { transform: rotate(90deg); }
.pe-details > .card { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; box-shadow: none; margin: 0; }
.pe-blokken, .pe-zij, .pe-voorbeeld { min-width: 0; }
.pe-lijst { display: grid; gap: 8px; margin: 0 0 12px; min-width: 0; }
.pe-lijst > .pb { min-width: 0; }
.pb { border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: 0 1px 2px rgba(16,20,28,.04); }
.pb.sleept { opacity: .45; }
.pb.licht { box-shadow: 0 0 0 3px var(--data-wash); border-color: var(--data); }
.pb-kop { list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; min-height: 46px; min-width: 0; }
.pb-kop::-webkit-details-marker { display: none; }
.pb-kop:hover { background: var(--wash2); border-radius: 10px; }
.pb[open] > .pb-kop:hover { border-radius: 10px 10px 0 0; }
.pb-greep { color: var(--muted); letter-spacing: -2px; cursor: grab; font-size: 15px; user-select: none; width: 14px; flex: none; }
.pb-icoon { width: 22px; height: 22px; border-radius: 6px; background: var(--wash2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--sub); flex: none; font-weight: 700; }
.pb-naam { font-weight: 650; font-size: 13.5px; white-space: nowrap; flex: none; }
.pb-sam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12.5px; }
.pb-rechts { display: flex; gap: 6px; align-items: center; flex: none; }
.pb-taal { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.pb-taal button { border: 0; background: none; font: inherit; font-size: 11px; font-weight: 600; padding: 4px 8px; color: var(--muted); cursor: pointer; line-height: 1; }
.pb-taal button + button { border-left: 1px solid var(--line); }
.pb-taal button.aan { background: var(--ink); color: var(--card); }
.pb-pijl { width: 28px; padding: 0; justify-content: center; }
.pb-chevron { color: var(--muted); transition: transform .15s; display: inline-block; width: 12px; text-align: center; font-size: 16px; }
.pb[open] .pb-chevron { transform: rotate(90deg); }
.pb-lijf { border-top: 1px solid var(--line); padding: 12px; background: var(--wash); border-radius: 0 0 10px 10px; }
.pb-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 12px; }
.pb-velden:empty { display: none; }
.pb-velden .pb-breed { grid-column: 1 / -1; }
.pb-velden .field label { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.pb-velden .field label .schrijfknop { margin-left: auto; height: 24px; padding: 0 8px; font-size: 11.5px; }
.pb-velden .field input, .pb-velden .field select, .pb-velden .field textarea { width: 100%; }
.pb-velden .taalcode { text-transform: uppercase; font-size: 10.5px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.pb-opmaak { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.pb-opmaak-kop { font-size: 11px; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: .06em; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--card); vertical-align: middle; }
.seg-k { position: relative; display: inline-flex; }
.seg-k input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.seg-k span, .seg > button { display: inline-block; padding: 4px 10px; font-size: 12.5px; color: var(--sub); cursor: pointer; border: 0; background: none; font-family: inherit; line-height: 1.4; }
.seg-k input:checked + span, .seg > button.aan { background: var(--wash2); color: var(--ink); font-weight: 650; }
.seg-k input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--data); }
.seg-k + .seg-k, .seg > button + button { border-left: 1px solid var(--line); }
.pb-acties { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.pb-weg { color: var(--neg); }
.pe-kiezer .card-head { border-bottom: 1px solid var(--line); }
.pe-kiezer-familie { display: flex; gap: 10px; align-items: baseline; padding: 8px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pe-kiezer-familie:last-child { border-bottom: 0; }
.pe-kiezer-naam { width: 160px; flex: none; font-size: 12px; color: var(--muted); }
.pe-kiezer-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pe-chip { border: 1px solid var(--line); border-radius: 999px; background: var(--card); padding: 3px 11px; font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; line-height: 1.4; }
.pe-chip:hover { border-color: var(--ink); }
.opslaanbalk { position: sticky; bottom: 12px; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 10px 16px; margin: 14px 0 0;
background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 24px rgba(16,20,28,.14); font-size: 13px; }
.opslaanbalk-knoppen { margin-left: auto; display: flex; gap: 8px; }
.pe-voorbeeld { display: none; }
.pe-voorbeeld iframe { width: 100%; height: calc(100vh - 150px); border: 1px solid var(--line); border-radius: 10px; background: #fff; display: block; }
.pe[data-modus="naast"] .pe-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pe[data-modus="naast"] .pe-zij { display: none; }
.pe[data-modus="naast"] .pe-voorbeeld { display: block; position: sticky; top: 14px; }
.pe[data-modus="voorbeeld"] .pe-raster { grid-template-columns: 1fr; }
.pe[data-modus="voorbeeld"] .pe-blokken, .pe[data-modus="voorbeeld"] .pe-zij { display: none; }
.pe[data-modus="voorbeeld"] .pe-voorbeeld { display: block; }
@media (max-width: 980px) { .pe-raster, .pe[data-modus="naast"] .pe-raster { grid-template-columns: 1fr; } .pe-zij { position: static; } .pe-kiezer-naam { width: 100%; } }
.fk-label { font-size: 12.5px; font-weight: 550; color: var(--sub); display: block; margin-bottom: 5px; }
.fk-rij { display: flex; gap: 10px; align-items: center; }
.fk-thumb { width: 72px; height: 50px; border-radius: 7px; border: 1px solid var(--line); background: var(--wash2); overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; }
.fk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fk.leeg .fk-thumb::before { content: "geen"; font-size: 11px; color: var(--muted); }
.fk-knoppen { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.fk-dialoog { border: 1px solid var(--line); border-radius: 12px; padding: 0; width: min(920px, 94vw); max-height: 86vh; background: var(--card); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.25); overflow: hidden; }
.fk-dialoog::backdrop { background: rgba(16,20,28,.45); }
.fk-dialoog-kop { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--card); }
.fk-dialoog-kop input[type="search"] { flex: 1; font: inherit; font-size: 13.5px; border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; background: var(--card); color: var(--ink); }
.fk-upload { cursor: pointer; }
.fk-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 14px 16px; max-height: calc(86vh - 62px); overflow: auto; }
.fk-tegel { border: 1px solid var(--line); border-radius: 9px; background: var(--card); padding: 0; cursor: pointer; overflow: hidden; text-align: left; font: inherit; color: var(--ink); }
.fk-tegel:hover, .fk-tegel:focus-visible { border-color: var(--ink); outline: none; }
.fk-tegel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--wash2); }
.fk-tegel-naam { display: block; padding: 6px 8px; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-meer { grid-column: 1 / -1; justify-self: center; }
.fk-leeg { grid-column: 1 / -1; color: var(--muted); padding: 20px; text-align: center; }
.web-inhoud:has(> .pe) > .page-head { display: none; }
.pl-balk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.pl-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-filter { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; font-size: 12.5px; color: var(--sub); text-decoration: none; background: var(--card); }
.pl-filter:hover { border-color: var(--ink); color: var(--ink); }
.pl-filter.aan { background: var(--ink); color: var(--card); border-color: var(--ink); }
.pl-tel { font-size: 11px; opacity: .75; }
.pl-zoek { margin-left: auto; }
.pl-zoek input { width: 220px; }
.pl-nieuw { display: flex; gap: 8px; align-items: center; margin: 0; }
.pl-nieuw input[name="titel"] { width: 230px; }
.pl-tabel td { vertical-align: middle; }
.pl-naam { font-weight: 600; color: var(--ink); text-decoration: none; }
.pl-naam:hover { text-decoration: underline; }
.pl-tabel .chip { margin-left: 6px; }
.pl-acties { text-align: right; white-space: nowrap; }
.pl-acties form { display: inline-flex; margin: 0; }
.pl-acties > * + * { margin-left: 6px; }
.pl-thumb { width: 56px; padding-right: 0 !important; }
.pl-thumb img, .pl-thumb-leeg { display: block; width: 48px; height: 34px; object-fit: cover; border-radius: 6px; background: var(--wash2); border: 1px solid var(--line); }
@media (max-width: 900px) { .pl-zoek { margin-left: 0; } .pl-zoek input, .pl-nieuw input[name="titel"] { width: 160px; } }
.chip.stand-live { background: var(--chip-green-bg); color: var(--chip-green-ink); border-color: transparent; }
.chip.stand-live::before { background: var(--chip-green-dot); }
.chip.stand-wijziging { background: var(--chip-orange-bg); color: var(--chip-orange-ink); border-color: transparent; }
.chip.stand-wijziging::before { background: var(--chip-orange-dot); }
.chip.stand-concept { background: var(--chip-gray-bg); color: var(--chip-gray-ink); border-color: transparent; }
.chip.stand-concept::before { background: var(--chip-gray-dot); }
.vk-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 18px 8px; }
.vk-kolom { border: 1px solid var(--line); border-radius: 10px; background: var(--card); display: flex; flex-direction: column; min-height: 120px; }
.vk-kop { display: flex; align-items: baseline; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.vk-naam { font-weight: 650; font-size: 13px; }
.vk-tel { margin-left: auto; font-size: 11.5px; }
.vk-lijst { flex: 1; min-height: 40px; }
.vk-leeg { padding: 12px; font-size: 12.5px; }
.vk-item { cursor: grab; }
.vk-item.sleept { opacity: .45; }
.vk-kolom .mr-rij { padding-left: 8px; padding-right: 8px; }
.vk-kolom .mr-rij.onder { padding-left: 28px; }
.vk-kolom .mr > summary { padding: 7px 4px; min-height: 36px; }
.vk-kolom .mr-vorm { padding-left: 10px; }
.vk-kolom .mt { border-bottom: 0; border-top: 1px solid var(--line); }
.vk-kolom .mt > summary { padding: 8px 12px; }
.vk-kolom .mt-vorm { padding: 4px 12px 12px; }
.vk-kolom .mt-vorm input[name="url"], .vk-kolom .mt-vorm select[name="taxon"] { width: 100%; }
.vk-uitleg { padding: 0 18px 14px; font-size: 12.5px; }
.ui-adressen { padding-top: 0; }
.ui-tijden-kop { padding: 10px 18px 0; }
.ui-tijden .field.uit { display: none; }
form.heeft-balk .ui-knoppen { display: none; }
@media (max-width: 980px) { .vk-raster { grid-template-columns: 1fr; } }
.vk-kolom .mr > summary .chip, .vk-kolom .mr > summary .mr-sub, .vk-kolom .mr > summary .mr-bewerk { display: none; }
.vk-kolom .mr-naam { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; font-weight: 600; }
.vk-kolom .mr[open] > summary .mr-sub { display: block; }
.vk-kolom .mr-knoppen .ghost.small { height: 24px; width: 24px; padding: 0; font-size: 12px; }
.vk-kolom .mr-knoppen { gap: 2px; }
.tk-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.tk-kaart { border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.tk-kaart.aan { border-color: var(--accent, var(--ink)); box-shadow: 0 0 0 3px var(--data-wash); }
.tk-strook { height: 36px; display: flex; }
.tk-strook i { flex: 1; }
.tk-lijf { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tk-naam { font-weight: 650; font-size: 13.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tk-sub { font-size: 12px; }
.tk-knoppen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.tk-knoppen form { margin: 0; display: inline-flex; }
.tk-nieuw { border-style: dashed; padding: 14px 12px; gap: 8px; justify-content: center; align-items: flex-start; }
.tk-nieuw input { width: 100%; }
.tk-link:hover { border-color: var(--ink); }
.tv-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: 18px; padding: 14px 18px 6px; align-items: start; }
.tv-groepen { display: grid; gap: 14px; }
.tv-groep { display: grid; gap: 8px; }
.tv-kop { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sub); display: flex; gap: 8px; align-items: baseline; }
.tv-kop .cell-sub { text-transform: none; letter-spacing: 0; font-weight: 400; }
.tv-kleuren { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tv-kleurrij { display: flex; gap: 6px; align-items: center; }
.tv-kleurrij input[type="text"], .tv-kleurrij input:not([type]) { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.tv-swatch { width: 36px; height: 36px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; flex: none; }
.tv-letter .field { max-width: 320px; }
.tv-aa { font-size: 26px; font-weight: 650; letter-spacing: -.01em; color: var(--tv-tekst); }
.tv-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tv-getallen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tv-vormen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.tv-vorm { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 76px; padding: 8px 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.tv-vorm small { font-weight: 400; color: var(--sub); font-size: 11px; }
.tv-vorm:nth-child(1) { border-radius: 0; } .tv-vorm:nth-child(2) { border-radius: 4px; } .tv-vorm:nth-child(3) { border-radius: 8px; } .tv-vorm:nth-child(4) { border-radius: 14px; }
.tv-vorm:hover { border-color: var(--ink); }
.tv-vorm.aan { border-color: var(--accent, #45523c); box-shadow: inset 0 0 0 1px var(--accent, #45523c); }
.tv-geavanceerd { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.tv-geavanceerd summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--sub); }
.tv-geavanceerd > .cell-sub { margin: 6px 0 0; }
.tv-geavanceerd .tv-getallen.tv-vier { grid-template-columns: repeat(4, 1fr); margin-top: 10px; }
.tv-getallen .field > span:first-child { font-size: 12.5px; font-weight: 550; color: var(--sub); }
.tv-eenheid { display: flex; align-items: center; gap: 6px; }
.tv-eenheid input { width: 100%; }
.tv-eenheid em { font-style: normal; font-size: 12px; color: var(--muted); }
.tv-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 14px; padding: 0 0 8px; }
.tv .ui-meer { margin: 0; }
.tv .ui-meer > summary { padding: 10px 0; }
.tv-voorbeeld { position: sticky; top: 14px; display: grid; gap: 8px; }
.tvb { border: 1px solid var(--tv-lijn); border-radius: var(--tv-hoek); background: var(--tv-achtergrond); color: var(--tv-tekst); padding: 12px; display: grid; gap: 10px; font-family: inherit; }
.tvb-kop { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--tv-lijn); border-radius: var(--tv-hoek); background: var(--tv-kaart); font-size: 13px; }
.tvb-kop b { font-size: 14px; }
.tvb-zoek { flex: 1; border: 1px solid var(--tv-lijn); border-radius: var(--tv-hoek-klein); background: var(--tv-vlak); padding: 5px 8px; font-size: 11.5px; opacity: .75; }
.tvb-icoontjes { font-size: 11.5px; white-space: nowrap; }
.tvb-menu { display: flex; gap: 14px; padding: 6px 10px; border: 1px solid var(--tv-lijn); border-radius: var(--tv-hoek); background: var(--tv-kaart); font-size: 12.5px; font-weight: 600; flex-wrap: wrap; }
.tvb-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tvb-kaart, .tvb-vlak { border: 1px solid var(--tv-lijn); border-radius: var(--tv-hoek); padding: 10px; }
.tvb-kaart { background: var(--tv-kaart); }
.tvb-vlak { background: var(--tv-vlak); display: grid; gap: 4px; align-content: start; }
.tvb-foto { height: 64px; border-radius: calc(var(--tv-hoek) - 4px); background: var(--tv-vlak); margin-bottom: 8px; }
.tvb-titel { font-weight: 650; font-size: 13px; }
.tvb-sub { font-size: 11.5px; opacity: .7; }
.tvb-onder { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 8px; }
.tvb-knop { background: var(--tv-accent); color: var(--tv-accent-ink); border-radius: var(--tv-hoek-klein); padding: 5px 10px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.tvb-knop2 { display: inline-block; border: 1px solid var(--tv-accent); color: var(--tv-accent); border-radius: var(--tv-hoek-klein); padding: 4px 10px; font-size: 11.5px; font-weight: 600; justify-self: start; margin-top: 6px; }
.tvb-breedte { font-size: 11.5px; opacity: .65; }
@media (max-width: 980px) { .tv-raster { grid-template-columns: 1fr; } .tv-voorbeeld { position: static; } .tv-twee { grid-template-columns: 1fr; } }
.tv-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.tv-swatch::-webkit-color-swatch { border: 0; border-radius: 6px; }
input.schakel { appearance: none; -webkit-appearance: none; width: 32px; height: 18px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; flex: none; margin: 0; transition: background .15s; vertical-align: middle; border: 0; outline: none; }
input.schakel::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
input.schakel:checked { background: var(--accent, #45523c); }
input.schakel:checked::after { left: 16px; }
input.schakel:focus-visible { box-shadow: 0 0 0 3px var(--data-wash); }
input.schakel.klein { width: 26px; height: 15px; }
input.schakel.klein::after { width: 11px; height: 11px; }
input.schakel.klein:checked::after { left: 13px; }
.wp-schakel-label { display: flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; flex: 1; min-width: 0; }
.wp-schakel-label .cell-sub { font-size: 12px; }
.wp-vorm { display: block; }
.wp-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 14px; align-items: start; }
.wp-raster.wp-gelijk { grid-template-columns: 1fr 1fr; }
.wp-links, .wp-rechts { display: grid; gap: 14px; min-width: 0; }
.wp-links .card, .wp-rechts .card, .wp-gelijk .card { margin: 0; }
.wp-lijst { display: flex; flex-direction: column; }
.wp-regel { display: flex; gap: 10px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line); min-height: 44px; }
.wp-regel:last-child { border-bottom: 0; }
.wp-regel.sleepbaar { cursor: grab; }
.wp-regel.sleept { opacity: .45; }
.wp-regel-onder { padding-left: 46px; background: var(--wash); }
.wp-pijlen { display: inline-flex; gap: 2px; }
.wp-velden { display: grid; gap: 12px; padding: 12px 14px 14px; }
.wp-velden-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; align-items: end; }
.wp-label { font-size: 12.5px; font-weight: 550; color: var(--sub); display: block; margin-bottom: 5px; }
.wp-velden .field input, .wp-velden .field select, .wp-velden .field textarea { width: 100%; }
.wp-knoppen { display: grid; gap: 10px; padding: 12px 14px 14px; }
.wp-vorm .ui-knoppen { padding: 14px 0 0; }
.schets { border: 1px dashed var(--line); border-radius: 10px; padding: 12px; background: var(--wash); position: sticky; top: 14px; display: grid; gap: 6px; }
.schets-kop { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.schets-boven { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.schets-kolom { display: grid; gap: 6px; align-content: start; }
.schets-zone { border: 1px solid var(--line); background: var(--card); border-radius: 6px; padding: 7px 9px; font-size: 12px; display: flex; gap: 8px; align-items: center; transition: opacity .15s; }
.schets-zone i { font-style: normal; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); color: var(--card); font-size: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.schets-zone.uit { opacity: .3; }
.schets-zone.uit i { background: var(--muted); }
.schets-foto { min-height: 92px; align-items: flex-start; }
.schets-knoppen { display: flex; gap: 4px; flex-wrap: wrap; }
.schets-knop { background: var(--ink); color: var(--card); border-radius: 5px; padding: 4px 8px; font-size: 10.5px; font-weight: 600; }
.schets-knop.licht { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.schets-knop.uit { display: none; }
.schets-onder { display: grid; gap: 6px; }
@media (max-width: 980px) { .wp-raster, .wp-raster.wp-gelijk { grid-template-columns: 1fr; } .schets { position: static; } }
.wp-velden .field input.schakel, .web-schil input.schakel { width: 32px; padding: 0; border-radius: 999px; box-shadow: none; }
.wp-velden .field input.schakel.klein, .web-schil input.schakel.klein { width: 26px; }
.mk-nieuw { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 10px; align-items: end; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.mk-nieuw .field input { width: 100%; }
.mk-adres { font-size: 12px; word-break: break-all; }
.zm-nieuw { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.zm-nieuw input { flex: 1; min-width: 120px; }
.zm-oms { display: flex; gap: 8px; align-items: center; }
.zm-oms input { flex: 1; }
.gz-lijst > summary { cursor: pointer; padding: 10px 16px; font-size: 12.5px; color: var(--sub); list-style: none; border-top: 1px solid var(--line); }
.gz-lijst > summary::-webkit-details-marker { display: none; }
.gz-lijst > summary::before { content: "›"; display: inline-block; margin-right: 8px; transition: transform .15s; }
.gz-lijst[open] > summary::before { transform: rotate(90deg); }
@media (max-width: 900px) { .mk-nieuw { grid-template-columns: 1fr 1fr; } }
.st-kaart { border: 1px solid var(--line); border-radius: 12px; background: var(--card); margin-bottom: 12px; overflow: hidden; }
.st-kop { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; min-height: 48px; flex-wrap: wrap; }
.st-kop::-webkit-details-marker { display: none; }
.st-kop .st-naam { font-weight: 650; font-size: 14px; }
.st-kop .st-sub { color: var(--muted); font-size: 12.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-kop .st-chevron { color: var(--muted); transition: transform .15s; font-size: 16px; width: 12px; text-align: center; }
.st-kaart[open] .st-chevron { transform: rotate(90deg); }
.st-lijf { border-top: 1px solid var(--line); padding: 12px 14px 14px; display: grid; gap: 12px; }
.st-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 12px; }
.st-velden .field input, .st-velden .field select { width: 100%; }
.st-magazijnen { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; display: grid; gap: 8px; }
.st-magazijn { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.st-magazijn .cell-sub input { width: 64px; margin-left: 4px; }
.st-magazijn form { margin: 0; display: inline-flex; }
.st-koppel { display: flex; gap: 8px; align-items: center; }
.st-nieuw { display: flex; gap: 8px; align-items: center; padding: 12px 14px; flex-wrap: wrap; }
.st-nieuw input { flex: 1; min-width: 140px; }
.st-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 12px 14px; }
.st-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 6px 3px 11px; font-size: 12.5px; background: var(--ink); color: var(--card); }
.st-chip form { margin: 0; display: inline-flex; }
.st-chip button { border: 0; background: rgba(255,255,255,.18); color: inherit; border-radius: 50%; width: 18px; height: 18px; line-height: 1; cursor: pointer; font-size: 12px; padding: 0; }
.st-chip button:hover { background: rgba(255,255,255,.35); }
.st-uit { border-top: 1px dashed var(--line); }
.st-uit > summary { cursor: pointer; padding: 10px 14px; font-size: 12.5px; color: var(--sub); list-style: none; }
.st-uit > summary::-webkit-details-marker { display: none; }
.st-uit > summary::before { content: "›"; display: inline-block; margin-right: 8px; transition: transform .15s; }
.st-uit[open] > summary::before { transform: rotate(90deg); }
.st-uitlijst { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 12px; }
.st-uitlijst form { margin: 0; }
.st-uitlijst button { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 3px 11px; font: inherit; font-size: 12.5px; color: var(--sub); cursor: pointer; }
.st-uitlijst button:hover { border-color: var(--ink); color: var(--ink); }
.st-landnieuw { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.st-landnieuw input[name="code"] { width: 64px; text-transform: uppercase; }
.st-landnieuw input[name="naam"] { flex: 1; min-width: 140px; }
.st-snel { margin-bottom: 14px; }
.st-snel-nieuw { display: flex; gap: 6px; align-items: center; margin: 0; }
.st-snel-nieuw input { width: 170px; }
.site-tegel.toon-ok .site-tegel-getal { color: var(--pos); }
.site-tegel.toon-warn.vraagt-aandacht .site-tegel-getal { color: #b26a12; }
.site-tegel.toon-mut .site-tegel-getal { color: var(--muted); }
.site-tegel.toon-ok:not(.vraagt-aandacht) .site-tegel-getal, .site-tegel.toon-warn:not(.vraagt-aandacht) .site-tegel-getal { color: var(--muted); }
.st-rooster { grid-template-columns: 3fr 2fr; }
@media (max-width: 980px) { .st-rooster { grid-template-columns: 1fr; } }
body.winkel h1, body.winkel h2, body.winkel h3, body.winkel .site-hero-kaart h1, body.winkel .shop-catkop-titel { font-family: var(--winkel-koppen-letter, var(--winkel-letter)); }
.vk-kolommen { display: flex; gap: 12px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: var(--wash); }
.vk-kolommen .cell-sub { font-size: 12px; }
.pl-nieuw select { max-width: 200px; }
.veld-eenheid { position: relative; display: inline-flex; align-items: center; }
.veld-eenheid > i { position: absolute; font-style: normal; font-size: 13px; color: var(--muted); pointer-events: none; left: 9px; }
.veld-eenheid > i.na { left: auto; right: 9px; }
.veld-eenheid > input { width: 100%; font: inherit; font-size: 13.5px; color: var(--ink); background: var(--card);
border: 1px solid var(--line); border-radius: 8px; height: 34px; padding: 0 10px; outline: none;
box-shadow: inset 0 1px 1px rgba(16,24,40,.03); box-sizing: border-box; font-variant-numeric: tabular-nums;
transition: border-color .12s ease, box-shadow .12s ease; }
.veld-eenheid > i + input, .veld-eenheid.voor > input { padding-left: 24px; text-align: right; }
.veld-eenheid.na > input { padding-right: 24px; text-align: right; }
.veld-eenheid > input:hover { border-color: var(--axis); }
.veld-eenheid > input:focus { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.veld-eenheid.klein > input { height: 30px; font-size: 13px; padding-top: 0; padding-bottom: 0; }
.stapper { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
width: auto; height: 34px; background: var(--card); box-shadow: inset 0 1px 1px rgba(16,24,40,.03);
transition: border-color .12s ease, box-shadow .12s ease; }
.stapper button { border: 0; background: var(--wash2); width: 30px; height: auto; flex: 0 0 30px; font: inherit;
font-size: 16px; line-height: 1; cursor: pointer; color: var(--sub); padding: 0; }
.stapper button:first-child { border-right: 1px solid var(--line); }
.stapper button:last-child { border-left: 1px solid var(--line); }
.stapper button:hover { background: var(--wash); color: var(--ink); }
.stapper input { border: 0; min-width: 0; width: 42px; flex: 0 0 42px; text-align: center; border-radius: 0; padding: 0 2px;
font: inherit; font-size: 13.5px; color: var(--ink); background: var(--card); outline: none;
font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.stapper:focus-within { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.stapper.klein { height: 30px; }
.stapper.klein button { width: 26px; flex-basis: 26px; font-size: 15px; }
.stapper.klein input { width: 36px; flex-basis: 36px; font-size: 13px; }
.zoekveld { position: relative; display: flex; align-items: center; flex: 1; min-width: 230px; }
.zoekveld > svg { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.zoekveld > input { width: 100%; height: 40px; font: inherit; font-size: 14px; color: var(--ink); background: var(--card);
border: 1px solid var(--line); border-radius: 9px; padding: 0 58px 0 36px; outline: none; box-sizing: border-box;
box-shadow: inset 0 1px 1px rgba(16,24,40,.03); transition: border-color .12s ease, box-shadow .12s ease; }
.zoekveld > input:hover { border-color: var(--axis); }
.zoekveld > input:focus { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.zoekveld > kbd { position: absolute; right: 9px; font: 500 11px/1 inherit; border: 1px solid var(--line); border-radius: 4px;
padding: 3px 5px; color: var(--muted); background: var(--wash2); pointer-events: none; }
.zoekveld .ac-lijst { top: 100%; }
.zoekveld.scan { flex: 0 0 150px; min-width: 150px; }
.zoekveld.scan > input { padding-right: 12px; }
.sneltoetsen { display: flex; gap: 14px; font-size: 12px; color: var(--muted); padding: 2px 4px; flex-wrap: wrap; }
.sneltoetsen kbd { font: 500 11px/1 inherit; border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px;
background: var(--card); margin-right: 4px; }
.vink { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.vink input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--btn-bg); }
.keuze { display: flex; gap: 6px; }
.keuze > * { flex: 1; text-align: center; border: 1px solid var(--line); border-radius: 8px; height: 34px; padding: 0 4px;
display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 13px; color: var(--sub);
background: var(--card); cursor: pointer; }
.keuze > [aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); font-weight: 550; }
.keuze > *:focus-visible { outline: none; border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.verkoop { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; margin-top: 0; }
.verkoop-zij { display: flex; flex-direction: column; gap: 12px; }
.verkoop-zij .plak { position: sticky; top: 66px; z-index: 5; }
@media (max-width: 1380px) { .verkoop { grid-template-columns: minmax(0, 1fr); } .verkoop-zij .plak { position: static; } }
.invoer-tabel .regel-art { min-width: 0; }
.werkbalk { display: flex; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
background: var(--wash2); align-items: center; }
.werkbalk .ghost { height: 40px; border-radius: 9px; }
.invoer-tabel .invoer-kolomkop, .invoer-tabel .regel { display: grid; grid-template-columns: minmax(0, 1fr) 104px 106px 78px 98px 30px;
gap: 0 8px; align-items: start; }
.invoer-tabel.met-keuze .invoer-kolomkop, .invoer-tabel.met-keuze .regel { grid-template-columns: minmax(0, 1fr) 96px 98px 66px 134px 90px 26px; }
.invoer-tabel.met-keuze .stapper.klein input { width: 32px; flex-basis: 32px; }
.invoer-tabel .invoer-kolomkop { padding: 9px 14px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
color: var(--muted); border-bottom: 1px solid var(--line); }
.invoer-tabel .invoer-kolomkop .num { text-align: right; }
.invoer-tabel #regels { display: flex; flex-direction: column; gap: 0; padding: 0; }
.invoer-tabel .regel { padding: 9px 14px; border-bottom: 1px solid var(--line); }
.invoer-tabel .regel:last-child { border-bottom: 0; }
.invoer-tabel .regel > .breed { grid-column: 1 / -1; }
.regel-art { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.regel-art > div { position: relative; min-width: 0; flex: 1; padding-top: 6px; }
.invoer-tabel .regel-foto { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; font-size: 12px; }
.invoer-tabel .regel-foto::before { font-size: 13px; }
.invoer-tabel .regel-naam { font-weight: 600; font-size: 13.5px; line-height: 1.25; cursor: pointer; }
.invoer-tabel .regel-naam small { display: none; }
.regel-onder { display: flex; gap: 8px; align-items: center; margin-top: 2px; min-width: 0; overflow: hidden; white-space: nowrap; }
.regel-onder .regel-meta { flex: none; flex-wrap: nowrap; }
.regel-onder .regel-info { flex: 1; min-width: 0; }
.invoer-tabel .regel-meta { display: flex; gap: 2px 8px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted);
margin-top: 2px; line-height: 1.3; white-space: nowrap; }
.regel-meta .vr { display: inline-flex; align-items: center; gap: 4px; }
.regel-meta .vr::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--chip-green-dot); }
.regel-meta .vr.laag::before { background: var(--chip-orange-dot); }
.regel-meta .vr.op::before { background: var(--chip-red-dot); }
.regel-meta .vr.op { color: var(--chip-red-ink); }
.regel-meta .stil { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.regel-info { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.invoer-tabel .regel-staffel { font-size: 12px; color: var(--chip-green-ink); padding: 4px 0 0 40px; }
.regel-marge { font-size: 11px; color: var(--muted); text-align: right; margin-top: 4px; font-variant-numeric: tabular-nums; }
.regel-marge.laag { color: var(--warn); }
.regel-totaal { display: inline-block; width: 100%; text-align: right; line-height: 30px; font-weight: 600; font-size: 13.5px;
white-space: nowrap; font-variant-numeric: tabular-nums; }
.regel-weg { width: 30px; height: 30px; border: 0; background: none; color: var(--muted); font-size: 16px; cursor: pointer;
border-radius: 6px; line-height: 1; padding: 0; }
.regel-weg:hover { background: var(--wash); color: var(--ink); }
.invoer-tabel .regel-doos { margin-top: 4px; height: 22px; font-size: 10.5px; padding: 0 6px; }
.regel-art input[name=sku] { width: 100%; height: 30px; font: inherit; font-size: 13.5px; color: var(--ink); background: var(--card);
border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; outline: none; box-sizing: border-box; margin-top: -6px;
transition: border-color .12s ease, box-shadow .12s ease; }
.regel-art input[name=sku]:focus { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.regel-art .field { flex: 1; min-width: 0; }
.regel-art .field input { height: 30px; padding: 0 10px; margin-top: -6px; }
.onder-regels { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.onder-regels .rechts { margin-left: auto; }
.onder-regels .ghost { height: 30px; padding: 0 11px; font-size: 13px; border-radius: 8px; }
.onder-regels input::placeholder { text-transform: none; }
.invoer-leeg { padding: 20px 14px; color: var(--muted); font-size: 13px; text-align: center; }
.tot { display: flex; flex-direction: column; gap: 5px; padding: 12px 16px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tot .r { display: flex; justify-content: space-between; gap: 10px; color: var(--sub); }
.tot .r.groot { color: var(--ink); font-size: 17px; font-weight: 650; padding-top: 6px; margin-top: 3px; border-top: 1px solid var(--line); }
.knoppen { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 14px; }
.knoppen .btn-primary, .knoppen .ghost { width: 100%; height: 44px; font-size: 15px; border-radius: 10px; }
.knoppen .ghost { height: 40px; font-size: 14px; }
.knoppen .hint { font-size: 12px; color: var(--muted); text-align: center; }
.klantkaart { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.klantkaart .kop { display: flex; align-items: center; gap: 10px; }
.klantkaart .kop .naam { font-weight: 600; }
.klantkaart .kop .bedrijf { font-size: 12.5px; color: var(--muted); }
.klantkaart .feit { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 12.5px; }
.klantkaart .feit > span { color: var(--muted); }
.klantkaart .feit b { font-weight: 550; font-variant-numeric: tabular-nums; display: block; color: var(--ink); }
.klantkaart .feit b.let { color: var(--warn); }
details.klap > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 11px 16px;
font-size: 13.5px; font-weight: 600; cursor: pointer; border-top: 1px solid var(--line); }
details.klap:first-child > summary, details.klap.eerste > summary { border-top: 0; }
details.klap > summary::-webkit-details-marker { display: none; }
details.klap > summary .stand { margin-left: auto; font-weight: 400; font-size: 12.5px; color: var(--muted); text-align: right;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.klap > summary .chev { width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
transform: rotate(-45deg); flex: none; margin-left: 4px; transition: transform .12s ease; }
details.klap[open] > summary .chev { transform: rotate(45deg); }
details.klap > .klap-body { padding: 4px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lade-strook { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line);
border-radius: 12px; background: var(--card); box-shadow: var(--shadow); font-size: 13.5px; margin-bottom: 16px; flex-wrap: wrap; }
.lade-strook .stip { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.lade-strook .stip.groen { background: var(--chip-green-dot); }
.lade-strook .stip.oranje { background: var(--chip-orange-dot); }
.lade-strook .stip.grijs { background: var(--chip-gray-dot); }
.lade-strook .m { color: var(--muted); }
.lade-strook .tekst { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.lade-strook .tekst .m { font-size: 12.5px; }
.lade-strook .r { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.lade-strook.dicht { background: var(--chip-orange-bg); border-color: transparent; }
.lade-strook a.ghost, .lade-strook a.btn-primary { text-decoration: none; }
.cat-rij { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding: 8px 14px 6px; margin-bottom: 0; align-items: center; scrollbar-width: none; }
.cat-rij::-webkit-scrollbar { display: none; }
.cat-rij .fchip { white-space: nowrap; flex: none; padding: 4px 11px; cursor: pointer; font: inherit; font-size: 12.5px; }
.cat-rij .sep { width: 1px; height: 18px; background: var(--line); margin: 0 6px; flex: none; }
.kassa .kassa-tegels { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px 14px 14px; }
.tegel-klik { border-radius: 11px; }
.tegel-klik img, .tegel-vlak { height: 64px; font-size: 19px; }
.tegel-voorraad.op { background: var(--chip-red-bg); color: var(--chip-red-ink); }
.bon-tabs { display: flex; gap: 6px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.bon-tabs .t { font-weight: 600; font-size: 14px; margin-right: 4px; }
.bon-tabs .fchip { cursor: pointer; font: inherit; font-size: 12.5px; }
.bon-tabs .fchip .topbar-badge { margin-left: 4px; }
.bon-regel { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px 10px; align-items: center;
padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.bon-regel .naam { min-width: 0; }
.bon-regel .naam .naam-tekst { font-weight: 550; line-height: 1.25; display: block; }
.bon-regel .naam .cell-sub { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bon-regel .stapper { height: 28px; }
.bon-regel .stapper button { width: 24px; flex-basis: 24px; font-size: 14px; }
.bon-regel .stapper input { width: 30px; flex-basis: 30px; font-size: 12.5px; }
.bon-regel .bon-som { min-width: 64px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bon-regel .weg { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 16px; width: 24px; height: 24px;
border-radius: 6px; line-height: 1; padding: 0; }
.bon-regel .weg:hover { background: var(--wash); color: var(--neg); }
.bon-extra { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.bon-extra .rij { display: flex; gap: 8px; align-items: center; }
.betaling { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 4px; border-top: 1px solid var(--line); }
.betaling .keuze > button { flex-direction: column; gap: 4px; height: auto; padding: 10px 6px; border-radius: 10px; font-weight: 550; }
.coupures { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.coupures .biljet { border: 1px solid var(--line); border-radius: 8px; padding: 6px 0; font: inherit; font-size: 13px; font-weight: 550;
background: var(--card); color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.coupures .biljet:hover { background: var(--wash2); }
.coupures .biljet[aria-pressed="true"] { background: var(--wash); border-color: var(--sub); }
.wissel { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.wissel .r { display: flex; justify-content: space-between; align-items: baseline; }
.wissel .r.groot { font-size: 17px; font-weight: 650; }
.wissel .r.groot .num { font-size: 22px; letter-spacing: -.01em; }
.snel { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: stretch; margin-bottom: 14px; }
.snel .start { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
background: var(--card); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); }
.snel .start:hover { background: var(--wash2); border-color: var(--axis); }
.snel .ic { width: 34px; height: 34px; border-radius: 9px; background: var(--btn-bg); color: var(--btn-ink); display: grid; place-items: center; flex: none; }
.snel .ic svg { width: 18px; height: 18px; }
.snel .start > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.snel .t { font-weight: 600; font-size: 13.5px; }
.snel .s { font-size: 12px; color: var(--muted); }
.snel .lade { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 14px; border: 1px solid var(--line);
border-radius: 12px; background: var(--wash2); min-width: 220px; text-decoration: none; color: var(--ink); }
.snel .lade:hover { border-color: var(--axis); }
.snel .lade .r { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 550; }
.snel .lade .s { font-size: 12px; color: var(--muted); }
.stip { width: 8px; height: 8px; border-radius: 999px; flex: none; display: inline-block; }
.stip.rood { background: var(--chip-red-dot); } .stip.oranje { background: var(--chip-orange-dot); }
.stip.grijs { background: var(--chip-gray-dot); } .stip.blauw { background: var(--chip-blue-dot); } .stip.groen { background: var(--chip-green-dot); }
@media (max-width: 1100px) { .snel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; gap: 4px 10px; padding: 14px 16px 12px; }
.kpi .eyebrow, .kpi .kpi-meta { grid-column: 1 / 3; }
.kpi .spark { width: 72px; height: 26px; align-self: center; }
.kpi .spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.delta { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.delta.op { color: var(--pos); } .delta.neer { color: var(--neg); }
.staven { height: 150px; padding: 12px 14px 0; }
.staaf { border-radius: 3px 3px 0 0; }
.staaf.top { opacity: 1; box-shadow: 0 0 0 4px var(--data-wash); }
.graf-as { display: flex; justify-content: space-between; padding: 6px 14px 10px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dash-onder { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .dash-onder { grid-template-columns: minmax(0, 1fr); } }
.aandacht { display: flex; flex-direction: column; padding-bottom: 4px; }
.aandacht .groep { padding: 10px 16px 3px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.aandacht a.kv { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 13.5px; }
.aandacht a.kv:hover { background: var(--wash2); }
.aandacht a.kv .k { color: var(--ink); flex: 1; }
.aandacht a.kv .v { font-weight: 650; font-variant-numeric: tabular-nums; }
.aandacht a.kv .pijl { color: var(--muted); font-size: 14px; }
.aandacht .groep + a.kv { border-top: 0; }
table.recent th, table.recent td { padding-left: 10px; padding-right: 10px; }
table.recent th:first-child, table.recent td:first-child { padding-left: 16px; }
table.recent .chip { font-size: 11px; }
.topbar > .icon-btn { width: 32px; height: 32px; }
#volledig-knop .aan { display: none; }
.logo-vol { display: none; align-items: center; order: -1; margin-right: 4px; }
.logo-vol .logo-beeld { height: 20px; }
.klok-vol { display: none; font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; margin-right: 4px; }
body.volledig .side { display: none; }
body.volledig .app { grid-template-columns: 1fr; }
body.volledig .topbar { padding: 6px 16px; gap: 10px; }
body.volledig #zijbalk-knop { display: grid; }
body.volledig.menu-open .side { display: flex; position: fixed; top: 0; left: 0; bottom: 0; width: 276px; z-index: 95;
overflow-y: auto; box-shadow: 0 0 0 100vmax rgba(21, 24, 33, .35), 8px 0 24px rgba(21, 24, 33, .18); }
body.volledig .logo-vol { display: flex; }
body.volledig .klok-vol { display: inline; }
body.volledig #volledig-knop .uit { display: none; }
body.volledig #volledig-knop .aan { display: block; }
body.volledig .content { padding: 16px 20px 24px; }
body.volledig .crumbs { display: none; }
body.volledig .verkoop { grid-template-columns: minmax(0, 1fr) 380px; }
body.volledig .dash-onder { grid-template-columns: minmax(0, 1fr) 380px; }
body.volledig .kassa .kassa-tegels { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
body.volledig .kassa .tegel-klik img, body.volledig .kassa .tegel-vlak { height: 84px; font-size: 22px; }
body.volledig .kassa .tegel-naam { font-size: 13.5px; min-height: 34px; }
body.volledig .kassa .knoppen .btn-primary { height: 52px; font-size: 16px; }
body.volledig .kassa .tot .r.groot { font-size: 22px; }
[data-voorraadkaart] { cursor: pointer; }
.regel-meta .vr.klik { border-radius: 999px; padding: 1px 7px 1px 6px; margin: -1px 0; transition: background .12s ease; }
.regel-meta .vr.klik:hover { background: var(--chip-green-bg); color: var(--chip-green-ink); }
.regel-meta .vr.klik.laag:hover { background: var(--chip-orange-bg); color: var(--chip-orange-ink); }
.regel-meta .vr.klik.op:hover { background: var(--chip-red-bg); }
.tegel-voorraad[data-voorraadkaart]:hover { box-shadow: 0 0 0 2px var(--data-wash); }
.vk-zweef { position: fixed; inset: 0; z-index: 85; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; background: rgba(16,24,40,.38); }
.vk-zweef .vk { width: min(860px, 100%); pointer-events: auto; }
.vk-zweef { pointer-events: none; }
.vk-zweef .vk-pijl { display: none; }
body.vk-open { overflow: hidden; }
.vk { position: relative; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink);
box-shadow: 0 20px 50px rgba(16,24,40,.18), 0 2px 6px rgba(16,24,40,.06); font-size: 13px; }
.vk-pijl { position: absolute; top: -7px; left: 150px; width: 12px; height: 12px; background: var(--card);
border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.vk-kop { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.vk-foto { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; flex: none; border: 1px solid var(--line); }
.vk-vlak { display: grid; place-items: center; background: var(--wash); color: var(--sub); font-weight: 650; font-size: 13px; }
.vk-titel { min-width: 0; }
.vk-titel > a { font-weight: 650; font-size: 15px; text-decoration: none; color: var(--ink); }
.vk-titel .m { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.vk-titel .m a { color: var(--data); font-weight: 500; text-decoration: none; }
.vk-stand { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 1px; padding-right: 8px; flex: none; }
.vk-stand b { font-size: 26px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.vk-stand b.neg, .vk-tabel b.neg, .vk-tabel .neg { color: var(--neg); }
.vk-stand .m { font-size: 12px; color: var(--muted); }
.vk-sluit { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); font-size: 18px;
border: 1px solid var(--line); background: none; cursor: pointer; flex: none; }
.vk-sluit:hover { background: var(--wash); color: var(--ink); }
.vk-blok { border-bottom: 1px solid var(--line); }
.vk-blokkop { display: flex; align-items: baseline; gap: 10px; padding: 12px 18px 6px; font-size: 13.5px; font-weight: 600; }
.vk-blokkop .m { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.vk-blokkop .r { margin-left: auto; }
.vk-tabel { font-size: 13px; }
.vk-tabel th { padding: 7px 18px; }
.vk-tabel td { padding: 8px 18px; }
.vk-tabel a { text-decoration: none; font-weight: 550; color: var(--ink); }
.vk-tabel a:hover { text-decoration: underline; }
.vk-tabel .uit { color: var(--chip-orange-ink); font-variant-numeric: tabular-nums; font-weight: 550; }
.vk-tabel tfoot td { border-top: 1px solid var(--line); border-bottom: 0; background: var(--wash2); font-weight: 600; color: var(--sub); }
.vk-tabel tfoot td b { color: var(--ink); }
.vk-tabel .m { color: var(--muted); font-weight: 400; }
.vk-tabel .cell-sub.neg { color: var(--neg); }
.vk-uitleg { padding: 6px 18px 12px; font-size: 12px; color: var(--muted); }
details.vk-uit > summary { list-style: none; cursor: pointer; padding: 8px 18px 10px; font-size: 12.5px; color: var(--sub); }
details.vk-uit > summary::-webkit-details-marker { display: none; }
details.vk-uit > summary::before { content: "\203A"; display: inline-block; margin-right: 6px; transition: transform .12s ease; }
details.vk-uit[open] > summary::before { transform: rotate(90deg); }
details.vk-uit .vk-tabel { border-top: 1px solid var(--line); }
.vk-tijd { display: flex; align-items: center; gap: 10px; padding: 8px 18px 16px; overflow-x: auto; }
.vk-stap { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px;
min-width: 120px; background: var(--card); flex: none; }
.vk-stap .d { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vk-stap b { font-size: 20px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vk-stap .m { font-size: 12px; color: var(--muted); }
.vk-stap .m.op { color: var(--pos); }
.vk-stap.nu { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
.vk-stap.nu .d, .vk-stap.nu .m { color: var(--btn-ink); opacity: .75; }
.vk-stap.laat { border-style: dashed; border-color: var(--chip-red-dot); }
.vk-stap.laat b { color: var(--neg); }
.vk-lijn { flex: 1; height: 2px; background: var(--axis); min-width: 16px; border-radius: 2px; }
.vk-voet { display: flex; align-items: center; gap: 10px; padding: 12px 18px; font-size: 12.5px; flex-wrap: wrap; }
.vk-voet .m { color: var(--muted); }
.vk-voet .r { margin-left: auto; display: flex; gap: 8px; }
.vk-voet a { text-decoration: none; }
@media (max-width: 600px) {
.snel { grid-template-columns: minmax(0, 1fr); }
.snel .lade { min-width: 0; }
.zoekveld { min-width: 0; }
.zoekveld.scan { flex: 1 1 100%; }
.kpi .spark { display: none; }
.kpi { grid-template-columns: 1fr; }
.invoer-tabel .invoer-kolomkop { display: none; }
.invoer-tabel .regel, .invoer-tabel.met-keuze .regel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.invoer-tabel .regel > .regel-art { flex: 1 1 100%; }
.invoer-tabel .regel > .regel-totaal { width: auto; margin-left: auto; }
.kassa .kassa-tegels, body.volledig .kassa .kassa-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lade-strook .r { margin-left: 0; }
.coupures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vk-tijd { flex-wrap: wrap; }
.vk-lijn { display: none; }
}
.lijst-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.lijst-kop .r { display: flex; gap: 8px; align-items: center; }
.lijst-kpis { margin-bottom: 14px; }
.lijst-kpis .kpi { display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: inherit; padding: 14px 16px 12px; }
.lijst-kpis .kpi:hover { background: var(--wash2); }
.lijst-kpis .kpi.actief { box-shadow: inset 0 -3px 0 var(--data); }
.lijst-filterform { display: contents; }
.lijst .werkbalk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 0; border: 0; background: transparent; margin-bottom: 10px; }
.lijst .werkbalk .zoekveld { flex: 1; min-width: 260px; max-width: 460px; }
.lijst .werkbalk .zoekveld > input { height: 34px; border-radius: 8px; font-size: 13.5px; padding-left: 34px; }
.lijst .werkbalk .zoekveld > svg { left: 11px; width: 16px; height: 16px; }
.lijst .werkbalk .r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.lijst .werkbalk .ghost { height: 34px; border-radius: 8px; }
.lijst .werkbalk .ghost svg { width: 14px; height: 14px; }
.lijst .werkbalk .ghost .tel { min-width: 18px; height: 18px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink);
font-size: 11px; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; margin-left: 2px; }
.lijst .werkbalk .live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.lijst .werkbalk .live i { width: 7px; height: 7px; border-radius: 999px; background: var(--chip-green-dot); box-shadow: 0 0 0 3px var(--chip-green-bg); }
details.lijst-menu { position: relative; }
details.lijst-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
details.lijst-menu > summary::-webkit-details-marker { display: none; }
details.lijst-menu[open] > summary.ghost { background: var(--wash); }
.lijst-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; background: var(--card); border: 1px solid var(--line);
border-radius: 12px; box-shadow: 0 20px 50px rgba(16,24,40,.18), 0 2px 6px rgba(16,24,40,.06); font-size: 13px; }
.lijst-pop .kop { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 600; }
.lijst-pop .kop .m { font-weight: 400; color: var(--muted); font-size: 12px; }
.lijst-pop .kop .wis { margin-left: auto; color: var(--data); font-weight: 500; font-size: 12.5px; text-decoration: none; }
.lijst-pop .voet { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); }
.lijst-pop .voet .btn-primary { margin-left: auto; }
.lijst-fp { width: 560px; }
.lijst-fp .raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 14px 16px; }
.lijst-fp .raster .breed { grid-column: 1 / -1; }
.lijst-fp .presets { display: flex; gap: 5px; flex-wrap: wrap; }
.lijst-fp .presets .fchip { padding: 3px 10px; font-size: 12px; }
.lijst-wg { width: 300px; }
.lijst-wg .item { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; text-decoration: none; color: var(--ink); }
.lijst-wg .item a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; flex: 1; min-width: 0; }
.lijst-wg .item:hover { background: var(--wash2); }
.lijst-wg .item.aan { background: var(--wash); font-weight: 600; }
.lijst-wg .item .m { font-size: 11.5px; color: var(--muted); font-weight: 400; white-space: nowrap; }
.lijst-wg .item .weg { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 0 2px; }
.lijst-wg .item .weg:hover { color: var(--neg); }
.lijst-wg-opslaan { display: none; }
.lt td.vast a.nr, .lt td.vast b { white-space: nowrap; }
.lt td.vast .sub { white-space: normal; overflow-wrap: anywhere; max-width: 260px; }
.lt .celfoto { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.lt .vr.klik { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border: 1px solid var(--line); border-radius: 999px; padding: 0 8px 0 6px; line-height: 20px; font-variant-numeric: tabular-nums; }
.lt .vr.klik::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--chip-green-dot); flex: none; }
.lt .vr.klik.laag::before { background: var(--chip-orange-dot); }
.lt .vr.klik.op::before { background: var(--chip-red-dot); }
.lt .vr.klik:hover { border-color: var(--axis); }
.lt .celfoto img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex: none; background: var(--wash); }
.lijst-wg .opslaan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.lijst-wg .opslaan .ghost.small { margin-left: auto; }
.lijst-wg .opslaan input[name=naam] { flex: 1 1 100%; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font: inherit; font-size: 13px; }
.lijst-wg .opslaan .vink { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--sub); white-space: nowrap; }
.lijst-kk { width: 340px; right: auto; }
.lijst-kk .lijst { max-height: 380px; overflow: auto; padding: 6px 0; }
.lijst-kk .kol { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 12px; cursor: grab; }
.lijst-kk .kol:hover { background: var(--wash2); }
.lijst-kk .kol.sleept { opacity: .4; }
.lijst-kk .kol .greep { color: var(--axis); font-size: 14px; letter-spacing: -2px; }
.lijst-kk .kol .naam { flex: 1; }
.lijst-kk .kol .naam small { display: block; color: var(--muted); font-size: 11px; }
.lijst-kk .kol .pin { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.lijst-kk .kol.uit .naam { color: var(--sub); }
.lijst-kk .kol input.sch { appearance: none; -webkit-appearance: none; width: 30px; height: 18px; border-radius: 999px; background: var(--axis); position: relative; flex: none; margin: 0; cursor: pointer; }
.lijst-kk .kol input.sch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .12s ease; }
.lijst-kk .kol input.sch:checked { background: var(--btn-bg); }
.lijst-kk .kol input.sch:checked::after { left: 14px; }
.lijst-kk .kol input[disabled] { display: none; }
.lijst-actief { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12.5px; margin-bottom: 10px; }
.lijst-actief .lab { color: var(--muted); }
.lijst-actief .fchip { display: inline-flex; align-items: center; gap: 6px; background: var(--wash); border-color: transparent; color: var(--ink); }
.lijst-actief .fchip b { font-weight: 600; }
.lijst-actief .fchip .x { color: var(--muted); font-size: 13px; }
.lijst-actief .wis { color: var(--data); font-weight: 500; text-decoration: none; }
.lijst-chips { margin-bottom: 10px; }
.lijst-kaart { padding: 0; }
.lt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.lt th { position: sticky; top: 0; background: var(--card); z-index: 2; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .07em;
text-transform: uppercase; color: var(--muted); padding: 9px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.lt th a { color: inherit; text-decoration: none; }
.lt th a:hover { color: var(--ink); }
.lt th.sort a { color: var(--ink); }
.lt th.sort a::after { content: ""; display: inline-block; margin-left: 5px; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.lt th.sort.op a::after { transform: rotate(-135deg) translateY(-1px); }
.lt th.num, .lt td.num { text-align: right; font-variant-numeric: tabular-nums; }
.lt td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.lt td.num, .lt td.kies, .lt td.acties, .lt td .chip, .lt td.vast { white-space: nowrap; }
.lt th.vast, .lt td.vast { width: 1%; }
.lt tbody tr:last-child td { border-bottom: 0; }
.lt tbody tr:hover td { background: var(--wash2); }
.lt tbody tr.actief td { background: var(--data-wash); }
.lt tbody tr:has(input[name=bulk]:checked) td { background: var(--data-wash); }
.lt .sub { font-size: 12px; color: var(--muted); margin-top: 1px; font-weight: 400; }
.lt td a { color: inherit; text-decoration: none; }
.lt td a.nr { font-weight: 600; }
.lt td a:hover { text-decoration: underline; }
.lt .kies, .lt th.kies { width: 30px; padding-left: 14px; padding-right: 4px; }
.lt .kies input { width: 15px; height: 15px; margin: 0; accent-color: var(--btn-bg); vertical-align: middle; }
.lt .rij-acties { display: inline-flex; gap: 4px; opacity: 0; transition: opacity .1s; }
.lt tr:hover .rij-acties, .lt tr.actief .rij-acties { opacity: 1; }
.lt .rij-acties .ghost { height: 28px; padding: 0 8px; font-size: 12px; border-radius: 6px; }
.lt td.acties { width: 0; padding: 0; position: relative; }
.lt th.acties { width: 0; padding: 0; }
.lt td.acties .rij-acties { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: var(--card); box-shadow: -12px 0 10px -6px var(--card); padding-left: 4px; z-index: 1; }
.lt tfoot td { background: var(--wash2); font-weight: 600; color: var(--sub); border-top: 1px solid var(--line); border-bottom: 0; padding: 9px 8px; }
.lt tfoot td.vast { white-space: normal; }
.lt tfoot td b { color: var(--ink); font-variant-numeric: tabular-nums; }
.lt .balk { display: flex; flex-direction: column; gap: 3px; min-width: 110px; }
.lt .balk i { display: block; height: 5px; border-radius: 99px; background: var(--wash); overflow: hidden; }
.lt .balk i::after { content: ""; display: block; height: 100%; width: var(--w); background: var(--chip-green-dot); }
.lt .balk span { font-size: 11.5px; color: var(--muted); }
.lt .lijst-leeg { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13.5px; }
.lt .lijst-leeg b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.lt .lijst-leeg span { display: block; margin-bottom: 10px; }
.lijst-kaart.compact .lt td { padding: 5px 10px; font-size: 13px; }
.lijst-kaart.compact .lt .sub { display: none; }
.bulk { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--btn-bg); color: var(--btn-ink); border-radius: 10px; font-size: 13px; margin: 10px 14px 4px; }
.bulk b { font-weight: 650; }
.bulk .vink { width: 15px; height: 15px; border-radius: 4px; background: var(--btn-ink); position: relative; }
.bulk .vink::after { content: ""; position: absolute; left: 3px; top: 6px; width: 9px; height: 2px; background: var(--btn-bg); }
.bulk .r { margin-left: auto; display: flex; gap: 6px; }
.bulk .ghost { background: transparent; color: var(--btn-ink); border-color: rgba(255,255,255,.28); box-shadow: none; height: 28px; font-size: 12.5px; padding: 0 10px; }
.bulk .ghost.hoofd { background: var(--btn-ink); color: var(--btn-bg); border-color: var(--btn-ink); }
.lijst-voet { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.lijst-voet .r { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.lijst-voet .pg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-left: 4px; vertical-align: middle; }
.lijst-voet .pg a, .lijst-voet .pg span { padding: 4px 10px; font-size: 12.5px; color: var(--sub); border-right: 1px solid var(--line); text-decoration: none; }
.lijst-voet .pg a:last-child, .lijst-voet .pg span:last-child { border-right: 0; }
.lijst-voet .pg a.aan { background: var(--btn-bg); color: var(--btn-ink); }
.lijst-voet .pg .uit { color: var(--axis); }
.lijst-voet kbd { font: 500 11px/1 inherit; border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; background: var(--card); margin: 0 2px; }
@media (max-width: 1300px) { .lt td.acties, .lt th.acties { display: none; } }
@media (max-width: 900px) { .lijst-voet .toetsen { display: none; } .lijst-fp { width: min(560px, 92vw); } }
@media (max-width: 600px) {
.lt thead, .lt tfoot { display: none; }
.lt, .lt tbody, .lt tr, .lt td { display: block; }
.lt tr { border-bottom: 1px solid var(--line); padding: 8px 14px; }
.lt td { padding: 2px 0; border: 0; white-space: normal; }
.lt td.kies { display: inline-block; margin-right: 6px; }
.lt td::before { content: attr(data-label); display: inline-block; width: 110px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.lt td.vast::before, .lt td.acties::before { display: none; }
.lt td.num { text-align: left; }
}
.kaart-terug { display: inline-block; font-size: 12.5px; color: var(--muted); text-decoration: none; margin-bottom: 8px; }
.kaart-terug:hover { color: var(--ink); }
.kkop { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.kkop .foto { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--wash); color: var(--sub); font-weight: 650; font-size: 18px; display: grid; place-items: center; flex: none; }
.kkop .titel { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 320px; }
.kkop .titel h1 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.015em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kkop .titel .sub { font-size: 13px; color: var(--muted); margin-top: 0; }
.kkop .titel .sub a { color: var(--data); text-decoration: none; }
.kkop .r { margin-left: auto; }
.kkop .menuwrap .pijl { font-size: 10px; margin-left: 2px; }
.ktabs { margin: 0 0 14px; }
.kraster { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.kkol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1180px) { .kraster { grid-template-columns: minmax(0, 1fr); } }
.stappen { display: flex; align-items: center; gap: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); margin-bottom: 14px; font-size: 13px; overflow-x: auto; }
.stap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.stap:last-child { flex: none; }
.stap .bol { width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--axis); display: grid; place-items: center; font-size: 11px; color: var(--muted); background: var(--card); flex: none; }
.stap.done .bol { background: var(--chip-green-dot); border-color: var(--chip-green-dot); color: #fff; }
.stap.cur .bol { border-color: var(--btn-bg); color: var(--btn-bg); font-weight: 700; }
.stap .tekst { display: flex; flex-direction: column; line-height: 1.25; }
.stap .naam { font-weight: 550; white-space: nowrap; color: var(--muted); }
.stap.done .naam { color: var(--ink); }
.stap.cur .naam { font-weight: 650; color: var(--ink); }
.stap .wanneer { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.stap .lijn { flex: 1; height: 2px; background: var(--line); margin: 0 10px; min-width: 14px; }
.stap.done .lijn { background: var(--chip-green-dot); }
@media (max-width: 700px) {
.stappen { flex-direction: column; align-items: stretch; gap: 8px; }
.stap { flex: none; }
.stap .naam, .stap .wanneer { white-space: normal; }
.stap .lijn { display: none; }
}
.volgende { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--btn-bg); color: var(--btn-ink); margin-bottom: 14px; flex-wrap: wrap; }
.volgende .t { font-weight: 600; }
.volgende .m { opacity: .7; font-size: 12.5px; }
.volgende .r { margin-left: auto; display: flex; gap: 8px; }
.volgende .ghost { background: transparent; color: var(--btn-ink); border-color: rgba(255,255,255,.28); box-shadow: none; height: 34px; }
.volgende .ghost:hover { background: rgba(255,255,255,.08); }
.volgende .ghost.hoofd { background: var(--btn-ink); color: var(--btn-bg); border-color: var(--btn-ink); }
.verloop { display: flex; flex-direction: column; padding: 6px 16px 12px; }
.verloop .leeg { padding: 12px 0; color: var(--muted); font-size: 13px; }
.vl-item { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; position: relative; font-size: 13px; align-items: start; }
.vl-item::before { content: ""; position: absolute; left: 8px; top: 26px; bottom: -8px; width: 1px; background: var(--line); }
.vl-item:last-child::before { display: none; }
.vl-bol { width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--data); background: var(--card); margin-top: 1px; }
.vl-bol.groen { border-color: var(--chip-green-dot); }
.vl-bol.grijs { border-color: var(--axis); }
.vl-bol.oranje { border-color: var(--chip-orange-dot); }
.vl-bol.rood { border-color: var(--chip-red-dot); }
.vl-item .wat b { font-weight: 600; }
.vl-item .wat a { color: inherit; text-decoration: none; }
.vl-item .wat a:hover { text-decoration: underline; }
.vl-item .wat .m { color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.vl-item .wan { color: var(--muted); font-size: 12px; white-space: nowrap; }
.notitie-rij { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); }
.notitie-rij .avatar { width: 26px; height: 26px; border-radius: 999px; background: var(--wash); color: var(--sub); font-size: 11px; font-weight: 650; display: grid; place-items: center; flex: none; }
.notitie-rij input { flex: 1; min-width: 0; }
form[data-inline] .inline { border-color: transparent; background: transparent; padding-left: 0; padding-right: 0; border-radius: 0; }
form[data-inline] .inline:hover { background: transparent; }
form[data-inline] .inline:focus { border-bottom-color: var(--data); background: transparent; box-shadow: none; outline: none; }
form[data-inline] .inline.gewijzigd { border-bottom-color: var(--data); background: transparent; }
.opslaanbalk { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--wash2); font-size: 12.5px; color: var(--muted); }
.opslaanbalk .r { margin-left: auto; display: flex; flex-direction: row-reverse; gap: 8px; }
.opslaanbalk b { color: var(--ink); }
.kaart-lijst { display: flex; flex-direction: column; }
.kaart-rij { display: flex; align-items: center; gap: 10px; padding: 9px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.kaart-rij:last-child { border-bottom: 0; }
@media (max-width: 760px) { .kaart-rij { flex-wrap: wrap; row-gap: 4px; } .kaart-rij .wat { flex: 1 0 100%; } }
.kaart-rij .wat { flex: 1; min-width: 0; }
.kaart-rij .wat .m { color: var(--muted); font-size: 12.5px; }
.kaart-rij .bedrag { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kaart-rij a { color: inherit; text-decoration: none; }
.kaart-rij a:hover { text-decoration: underline; }
.kaart-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 12px 18px; }
.kaart-velden .breed { grid-column: 1 / -1; }
.totalen { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 10px 18px 12px; border-top: 1px solid var(--line); font-size: 13.5px; }
.totalen .totaal { display: flex; justify-content: space-between; gap: 24px; width: 320px; max-width: 100%; color: var(--sub); }
.totalen .totaal .num { color: var(--ink); font-variant-numeric: tabular-nums; }
.totalen .totaal.groot { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; font-weight: 650; color: var(--ink); font-size: 14.5px; }
.kaart .lt td .vr.klik { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border: 1px solid var(--line); border-radius: 999px; padding: 0 8px 0 6px; line-height: 18px; font-size: 12px; color: var(--sub); }
.kaart .lt td .vr.klik::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--chip-green-dot); }
.bijlage-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bijlage-form input[type=file] { flex: 1 1 160px; min-width: 0; font-size: 12.5px; }
.mini-vk .vk { border: 0; border-radius: 0; box-shadow: none; }
.mini-vk .vk-pijl, .mini-vk .vk-sluit { display: none; }
.kaart-velden .field label.vink { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); text-transform: none; letter-spacing: 0; }
form[data-inline] textarea.inline { border-color: transparent; background: transparent; padding-left: 0; padding-right: 0; font: inherit; font-size: 13.5px; color: var(--ink); border: 1px solid transparent; border-radius: 8px; padding: 6px 0; resize: vertical; width: 100%; }
form[data-inline] textarea.inline:hover { background: transparent; }
form[data-inline] textarea.inline:focus, form[data-inline] textarea.inline.gewijzigd { border-bottom-color: var(--data); border-radius: 0; background: transparent; padding: 6px 0; outline: none; box-shadow: none; }
form[data-inline] select.inline { text-align: left; }
.mini-vk .vk { width: 100%; max-width: 100%; }
.mini-vk .vk-blok, .mini-vk .vk-kop { max-width: 100%; }
.mini-vk .vk-blok { overflow-x: auto; }
.mini-vk .vk-tabel { width: 100%; }
.mini-vk .vk-kop { flex-wrap: wrap; }
.mini-vk .vk-titel { flex: 1 1 140px; }
.mini-vk .vk-tabel th, .mini-vk .vk-tabel td { padding-left: 10px; padding-right: 10px; }
.mini-vk .vk-kop, .mini-vk .vk-blokkop { padding-left: 16px; padding-right: 16px; }
.boom .tak { padding: 9px 18px; border-bottom: 1px solid var(--line); }
.boom .tak.gekozen { background: var(--data-wash); }
.boom .tak-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.boom .tak-naam { font-weight: 600; color: inherit; text-decoration: none; }
.boom .tak-naam:hover { text-decoration: underline; }
.boom .tak-adres { color: var(--muted); font-size: 12px; }
.boom .tak-knoppen { margin-left: auto; display: inline-flex; gap: 4px; }
.boom .tak-acties { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; margin-top: 6px; font-size: 12.5px; }
.boom .tak-groep { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.lijst-pop .voet .btn-primary, .lijst-pop .voet .ghost { height: 34px; }
.lijst-pop .voet .ghost.small, .lijst-pop .voet .btn-primary.small { height: 28px; }
.lijst-wg .opslaan .ghost.small { height: 28px; }
.mraster { display: grid; grid-template-columns: 210px minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.mraster.zonder-lade { grid-template-columns: 210px minmax(0, 1fr); }
.mrail { display: flex; flex-direction: column; gap: 12px; }
.boomlijst { display: flex; flex-direction: column; padding: 6px 0; }
.boomlijst a { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 13px; color: var(--ink); text-decoration: none; }
.boomlijst a:hover { background: var(--wash2); }
.boomlijst a.aan { background: var(--data-wash); font-weight: 600; }
.boomlijst a .telr { margin-left: auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.boomlijst a.aan .telr { color: var(--data); }
.boomlijst a.stil { color: var(--muted); }
.boomlijst a.waarschuw { color: var(--warn); }
.snel { display: flex; flex-direction: column; padding: 6px 0; }
.snel a { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 12.5px; white-space: nowrap; color: var(--ink); text-decoration: none; }
.snel a:hover { background: var(--wash2); }
.snel a.aan { background: var(--data-wash); font-weight: 600; }
.snel a .telr { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.mwerkbalk { display: flex; gap: 8px; align-items: center; padding: 10px 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.mwerkbalk .zoekveld { flex: 1; min-width: 200px; }
.mwerkbalk .seg { flex: none; }
.mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px; }
.mgrid.groot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mtile { border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; position: relative; display: flex; flex-direction: column; }
.mtile.sel, .mtile:has(input:checked) { box-shadow: 0 0 0 2px var(--data); }
.mtile .beeld { aspect-ratio: 1 / 1; display: block; width: 100%; object-fit: cover; background: var(--wash); }
.mtile .beeld-leeg { aspect-ratio: 1 / 1; display: grid; place-items: center; color: var(--muted); background: var(--wash); font-size: 12px; }
.mtile .kies { position: absolute; top: 8px; left: 8px; margin: 0; width: 18px; height: 18px; accent-color: var(--data); }
.mtile .hoofd { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 700; background: #fff; color: var(--ink); border-radius: 999px; padding: 2px 7px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.mtile .onder { padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.mtile .onder a.naam { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
.mtile .onder .m { color: var(--muted); font-size: 11.5px; display: flex; justify-content: space-between; gap: 6px; min-width: 0; }
.mtile .onder .m span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtile .onder .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chipje { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--wash); color: var(--sub); white-space: nowrap; }
.chipje.groen { background: var(--chip-green-bg); color: var(--chip-green-ink); }
.chipje.oranje { background: var(--chip-orange-bg); color: var(--chip-orange-ink); }
.chipje.rood { background: var(--chip-red-bg); color: var(--chip-red-ink); }
.mtile.drop { border: 2px dashed var(--axis); background: var(--wash2); color: var(--muted); display: grid; place-items: center; text-align: center; font-size: 12.5px; padding: 14px; min-height: 190px; cursor: pointer; }
.mtile.drop.over { border-color: var(--data); background: var(--data-wash); }
.mlade .voorbeeld { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--wash); border-radius: 12px 12px 0 0; }
.mlade .koppel { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.mlade .koppel .naam { flex: 1; min-width: 0; }
.mlade .koppel .naam small { display: block; color: var(--muted); font-size: 11.5px; }
.mlade .koppel .pos { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.mlade .knoppen { display: flex; gap: 6px; padding: 12px 16px; flex-wrap: wrap; }
.mlade form.knoppen-vorm { display: contents; }
.bulk2 { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--btn-bg); color: var(--btn-ink); border-radius: 10px; font-size: 13px; margin: 12px 12px 0; flex-wrap: wrap; }
.bulk2 .r { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bulk2 .ghost { background: transparent; color: var(--btn-ink); border-color: rgba(255,255,255,.3); white-space: nowrap; }
.bulk2 .ghost.hoofd { background: var(--btn-ink); color: var(--btn-bg); border-color: var(--btn-ink); }
.bulk2 input, .bulk2 select { height: 30px; border-radius: 7px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: var(--btn-ink); padding: 0 8px; font-size: 12.5px; }
.bulk2 input::placeholder { color: rgba(255,255,255,.55); }
.dropzone { border: 2px dashed var(--axis); border-radius: 14px; padding: 22px; text-align: center; color: var(--sub); font-size: 13.5px; background: var(--wash2); margin: 12px; cursor: pointer; }
.dropzone.over { border-color: var(--data); background: var(--data-wash); }
.dropzone b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.mlijst .lt td { white-space: normal; }
.mlijst .lt td .thumb { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; vertical-align: middle; margin-right: 8px; background: var(--wash); }
@media (max-width: 1180px) { .mraster, .mraster.zonder-lade { grid-template-columns: 190px minmax(0, 1fr); } .mlade { grid-column: 1 / -1; } }
@media (max-width: 760px) { .mraster, .mraster.zonder-lade { grid-template-columns: minmax(0, 1fr); } .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mlade .knoppen .ghost { height: 28px; }
.ve-lijst { display: flex; flex-direction: column; }
.ve-rij { padding: 14px 18px; border-top: 1px solid var(--line); }
.ve-rij:first-child { border-top: 0; }
.ve-kop { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; row-gap: 2px; align-items: center; cursor: pointer; margin: 0; }
.ve-kop .cell-sub { grid-column: 2; }
.ve-titel { font-weight: 600; }
.ve-meer { margin: 12px 0 0 44px; display: flex; flex-direction: column; gap: 10px; }
.ve-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: start; }
.ve-velden .field { margin: 0; }
.ve-socials { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ve-hint { font-size: 12.5px; color: var(--muted); }
.ve-hint a { margin-left: 4px; }
@media (max-width: 900px) { .ve-velden, .ve-socials { grid-template-columns: 1fr; } .ve-meer { margin-left: 0; } }
.mr-tak > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 7px 18px 7px 44px; font-size: 12.5px; color: var(--sub); background: var(--wash2); border-bottom: 1px solid var(--line); }
.mr-tak > summary::-webkit-details-marker { display: none; }
.mr-tak > summary::before { content: "›"; color: var(--muted); width: 10px; transition: transform .15s; }
.mr-tak[open] > summary::before { transform: rotate(90deg); }
.mr-tak > summary:hover { color: var(--ink); }
.pl-scroll { overflow-x: auto; }
.tv-groepen { min-width: 0; }
.tv-twee, .tv-getallen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tv-twee select, .tv-twee input, .tv-getallen input { width: 100%; min-width: 0; }
.wp-velden-rij .seg { flex-wrap: wrap; }
.tv-vormbreedte { grid-template-columns: minmax(0, 1fr); }
.tv-vormbreedte .tv-getallen { max-width: 420px; }
svg.ico-vol { fill: currentColor !important; stroke: none !important; }
svg.ico-vol path { fill: currentColor !important; stroke: none !important; }
body.chat-pagina { overflow: hidden; }
body.chat-pagina .content { padding: 14px 20px 14px; }
body.chat-pagina .crumbs { display: none; }
.ch-vol-scherm { height: calc(100vh - 56px - 28px); min-height: 0; margin-top: 0; grid-template-rows: minmax(0, 1fr); }
.ch-vol-scherm > aside, .ch-vol-scherm > section { align-self: stretch; height: 100%; max-height: 100%; overflow: hidden; min-height: 0; }
.ch-vol-scherm > #chat-zijpaneel { overflow-y: auto; }
.ch-vol-scherm #chat-gesprek, .ch-vol-scherm .ch-lijst { min-height: 0; flex: 1 1 0; }
.ch-vol-scherm .ch-kop, .ch-vol-scherm .ch-schrijf, .ch-vol-scherm .ch-afsluiting, .ch-vol-scherm .ch-typt, .ch-vol-scherm .ch-postvakken, .ch-vol-scherm .ch-zoekvak { flex: none; }
body.chat-vol .ch-vol-scherm { height: calc(100vh - 32px); }
.ch-melding { display: flex; gap: 8px; align-items: center; padding: 6px 12px; margin: 0 0 8px; font-size: 13px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.ch-lijstkolom .ch-postvakken { margin: 0; padding: 10px 12px 6px; border-bottom: 0; flex-wrap: wrap; gap: 5px; }
.ch-lijstkolom .ch-postvakken .fchip { font-size: 12px; padding: 3px 10px; }
.ch-zoekvak { display: flex; gap: 8px; align-items: center; padding: 6px 12px 10px; border-bottom: 1px solid var(--line); }
.cp-wacht { color: var(--chip-orange-ink); font-weight: 600; }
.ch-kop { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); min-height: 60px; }
.ch-kop-avatar { width: 36px; height: 36px; flex: none; }
.ch-kop-wie { display: flex; flex-direction: column; min-width: 90px; flex: 1 1 auto; line-height: 1.25; }
.ch-kop-wie .card-title { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-kop-regel { font-size: 12px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-kop-chips { display: flex; gap: 6px; align-items: center; flex: none; }
.ch-kop-rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }
.ch-kop-rechts .ch-zoek-gesprek { width: 120px; transition: width .15s; }
.ch-kop-rechts .ch-zoek-gesprek { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 9px center; padding-left: 28px; }
@media (max-width: 1500px) { .ch-kop-rechts .ch-zoek-gesprek { width: 34px; padding-left: 28px; } .ch-kop-rechts .ch-zoek-gesprek::placeholder { color: transparent; } .ch-kop-rechts .ch-zoek-gesprek:focus, .ch-kop-rechts .ch-zoek-gesprek:not(:placeholder-shown) { width: 140px; } .ch-kop-rechts .ch-zoek-gesprek:focus::placeholder { color: var(--muted); } }
.ch-acties { position: relative; }
.ch-acties > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.ch-acties > summary::-webkit-details-marker { display: none; }
.ch-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 300px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px rgba(15,17,22,.18); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.ch-menu-kop { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 4px; font-weight: 600; }
.ch-menu-item, .ch-menu-rij { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font: inherit; font-size: 13px; color: var(--ink); background: transparent; border: 0; text-align: left; width: 100%; cursor: pointer; }
.ch-menu-item:hover, .ch-menu-sub > summary:hover { background: var(--wash); }
.ch-menu-rij select { flex: 1; min-width: 0; }
.ch-menu-item kbd, .ch-menu-rij kbd { margin-left: auto; font: 600 11px ui-monospace, monospace; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; background: var(--wash2); }
.ch-menu-ik { width: 20px; text-align: center; color: var(--sub); flex: none; }
.ch-menu-sub > summary { list-style: none; }
.ch-menu-sub > summary::-webkit-details-marker { display: none; }
.ch-menu-form { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px 10px 40px; }
.ch-menu-form input[type="datetime-local"] { font-size: 12.5px; }
.ch-sys { align-self: center; font-size: 12px; color: var(--muted); padding: 2px 10px; }
.ch-schrijf { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line); position: relative; }
.ch-schrijfvak { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 22px; background: var(--card); position: relative; display: flex; flex-direction: column; gap: 6px; }
.ch-schrijfvak:focus-within { border-color: var(--ink); }
.ch-schrijfvak textarea { border: 0; outline: none; resize: none; font: inherit; font-size: 13.5px; line-height: 1.45; background: transparent; color: inherit; width: 100%; min-height: 44px; max-height: 140px; padding: 0; }
.ch-schrijf-hint { position: absolute; right: 12px; bottom: 6px; font-size: 11px; color: var(--muted); }
.ch-schrijf .ch-kaart-chip { width: auto; align-self: flex-start; }
.ch-schrijfbalk { display: flex; align-items: center; gap: 6px; }
.ch-schrijfbalk kbd { font: 600 10.5px ui-monospace, monospace; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; color: var(--muted); margin-left: 2px; }
.ch-antwoord.notitie .ch-schrijfvak { background: #fff7d6; border-color: #e2c85a; }
.ch-kop, .ch-schrijfbalk { min-width: 0; }
.ch-kop > *, .ch-schrijfbalk > * { flex-shrink: 0; }
.ch-kop > .ch-kop-wie { flex-shrink: 1; }
@media (max-width: 1500px) {
.ch-schrijfbalk kbd { display: none; }
.ch-schrijfbalk .ghost.small { padding-left: 8px; padding-right: 8px; }
}
#chat-zijpaneel .card .ghost, #chat-zijpaneel .card button, #chat-zijpaneel .card input { max-width: 100%; white-space: normal; box-sizing: border-box; }
#chat-zijpaneel .card .ghost, #chat-zijpaneel .card button.ghost { height: auto; min-height: 30px; line-height: 1.3; padding: 6px 10px; text-align: center; }
@media (max-width: 1300px) { .ch-kop-chips .chip.gray { display: none; } }
#chat-zijpaneel .card > div, #chat-zijpaneel .card form { min-width: 0; }
.ch-schrijf .ch-snelkeuze { bottom: calc(100% - 4px); }
#chat-zijpaneel .ch-wissen { display: flex; flex-wrap: wrap; gap: 6px; }
#chat-zijpaneel .ch-wissen input { flex: 1 1 90px; width: auto !important; min-width: 0; }
.op-meter { display: inline-block; width: 90px; height: 6px; background: var(--wash); border-radius: 3px; overflow: hidden; vertical-align: middle; margin-right: 8px; }
.op-meter i { display: block; height: 100%; background: var(--data); }
.op-standen { display: flex; gap: 12px; flex-wrap: wrap; }
.op-stand { flex: 1 1 200px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; font-size: 13px; }
.op-stand.aan { border-color: var(--data); box-shadow: 0 0 0 1px var(--data); }
.op-stand input { position: absolute; opacity: 0; pointer-events: none; }
table tr.actief td { background: var(--wash2); }
.op-filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.op-filters .fchip { font-size: 12.5px; }
.op-sorteer { margin-left: auto; font-size: 12.5px; color: var(--sub); }
.op-sorteer a { color: inherit; text-decoration: none; }
.op-sorteer a.aan { color: var(--ink); font-weight: 600; }
.op-strook { display: inline-flex; gap: 2px; vertical-align: middle; }
.op-strook b, .op-legenda i { display: inline-block; width: 7px; height: 14px; border-radius: 2px; background: var(--line); }
.op-legenda i { width: 10px; height: 10px; vertical-align: -1px; margin-right: 5px; }
.v-p { background: var(--data) !important; } .v-z { background: #9aa6c4 !important; } .v-w { background: #16a34a !important; } .v-f, .v-v { background: #b42318 !important; } .v-r { background: #d97706 !important; } .v-c { background: #ea580c !important; }
.op-legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--sub); padding: 8px 18px 12px; }
.op-opvallend { display: flex; gap: 4px; flex-wrap: wrap; min-width: 220px; }
.op-lijst td:first-child b { display: inline-block; max-width: 100%; }
.op-lijst td.nowrap { white-space: nowrap; }
.op-lijst td { vertical-align: middle; }
.op-scherm { display: flex; flex-direction: column; min-height: 0; }
.op-kop { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.op-kop .card-title { font-size: 15px; }
.op-kop-feit { white-space: nowrap; }
.op-kop-rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.op-kop-rechts form { display: contents; }
.op-kop kbd { font: 600 10.5px ui-monospace, monospace; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; color: var(--muted); margin-left: 3px; }
.op-deellink { display: flex; gap: 8px; align-items: center; padding: 6px 16px; font-size: 12.5px; border-bottom: 1px solid var(--line); background: var(--wash2); }
.op-deellink input { flex: 1; max-width: 520px; }
.op-drie { display: grid; grid-template-columns: 280px minmax(0, 1fr) 300px; min-height: 0; flex: 1; }
.op-drie > * { min-width: 0; min-height: 0; }
.op-paginas { border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow-y: auto; padding: 8px 0 0; }
.op-pagina { display: flex; gap: 8px; align-items: center; padding: 7px 14px; font-size: 13px; color: inherit; text-decoration: none; cursor: pointer; }
.op-pagina:hover { background: var(--wash); }
.op-pagina.nu { background: var(--wash2); box-shadow: inset 3px 0 0 var(--data); }
.op-pagina .op-tijd { color: var(--muted); font-size: 12px; width: 44px; flex: none; font-variant-numeric: tabular-nums; }
.op-pagina-merk { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.op-pagina-merk.wagen { background: #16a34a; } .op-pagina-merk.fout { background: #b42318; } .op-pagina-merk.chat { background: #ea580c; }
.op-pagina-pad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-pagina-duur { color: var(--muted); font-size: 12px; flex: none; font-variant-numeric: tabular-nums; }
.op-samenvatting { margin-top: auto; padding: 12px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--sub); line-height: 1.5; }
.op-samenvatting b { color: var(--ink); }
.op-schaduw { display: flex; flex-direction: column; background: var(--wash2); min-height: 0; }
.op-kader { margin: 14px auto; width: min(100% - 28px, 960px); flex: 1; min-height: 360px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); display: flex; flex-direction: column; overflow: hidden; }
.op-kader.mobiel { width: 390px; max-width: calc(100% - 28px); border-radius: 22px; box-shadow: 0 0 0 6px var(--wash), 0 0 0 7px var(--line); }
.op-adres { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--sub); }
.op-url { flex: 1; min-width: 0; background: var(--wash); border-radius: 6px; padding: 3px 10px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-venster { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--card); }
.op-iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.op-leeg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--muted); font-size: 13px; background: var(--wash2); }
.op-klik { position: absolute; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--data); transform: translate(-50%, -50%); pointer-events: none; animation: op-puls 1.4s ease-out infinite; }
.op-klik::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--data); }
.op-klik.woede { border-color: #d97706; } .op-klik.woede::after { background: #d97706; }
@keyframes op-puls { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .35); } 100% { box-shadow: 0 0 0 14px rgba(37, 99, 235, 0); } }
@media (prefers-reduced-motion: reduce) { .op-klik { animation: none; } }
.op-spoor { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.op-balk { display: block; padding: 8px 14px 12px; border-top: 1px solid var(--line); background: var(--card); }
.op-tijdbalk { position: relative; height: 34px; margin: 4px 0 6px; cursor: pointer; background: transparent; }
.op-tijdbalk::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 4px; background: var(--line); border-radius: 2px; }
.op-voortgang { position: absolute; left: 0; top: 18px; height: 4px; width: 0; background: var(--data); border-radius: 2px; opacity: 1; bottom: auto; }
.op-knopje { position: absolute; left: 0; top: 13px; width: 14px; height: 14px; border-radius: 50%; background: var(--data); transform: translateX(-50%); border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--data); pointer-events: none; }
.op-merk { position: absolute; top: 10px; width: 2px; height: 20px; margin-left: -1px; border-radius: 1px; background: var(--muted); cursor: pointer; }
.op-merk::before { content: attr(data-l); position: absolute; top: -6px; left: 5px; font-size: 10.5px; color: var(--muted); white-space: nowrap; line-height: 1; }
.op-merk.soort-pagina { background: var(--line); height: 8px; top: 16px; }
.op-merk.soort-wagen { background: #16a34a; }
.op-merk.soort-fout, .op-merk.soort-formfout { background: #b42318; }
.op-merk.soort-zoek { background: #9aa6c4; }
.op-merk.soort-woede { background: #d97706; }
.op-merk.soort-chat { background: #ea580c; width: 3px; top: 8px; height: 24px; }
.op-bediening { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sub); flex-wrap: wrap; }
.op-snelheden { display: inline-flex; gap: 4px; }
.op-snelheden .ghost.aan { background: var(--ink); color: var(--card); border-color: var(--ink); }
.op-klok { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; min-width: 0; text-align: right; }
.op-stappenkolom { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.op-stappen-kop { padding: 10px 14px 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
.op-stappen { max-height: none; flex: 1; min-height: 0; overflow-y: auto; }
.op-stap { padding: 6px 14px; gap: 8px; }
.op-stap .op-tijd { width: 44px; }
.op-icoon { width: 22px; flex: none; text-align: center; color: var(--muted); font-size: 12px; }
.op-stap.soort-woede .op-tekst { color: #b45309; }
.op-voet { padding: 10px 14px; border-top: 1px solid var(--line); line-height: 1.5; }
body.op-vol { overflow: hidden; }
body.op-vol .side, body.op-vol .topbar, body.op-vol .crumbs { display: none !important; }
body.op-vol .app { grid-template-columns: 1fr; }
body.op-vol .content { padding: 0; }
body.op-vol #opname-speler { position: fixed; inset: 0; z-index: 60; border-radius: 0; border: 0; height: 100vh; }
body.op-vol .op-drie { grid-template-rows: minmax(0, 1fr); }
body.op-vol .op-kader { min-height: 0; }
.op-scherm:not(.vol) .op-drie { height: calc(100vh - 56px - 28px - 62px); }
body.chat-pagina .op-scherm .op-drie { height: auto; }
@media (max-width: 1100px) { .op-drie { grid-template-columns: 1fr; } .op-paginas, .op-stappenkolom { border: 0; border-top: 1px solid var(--line); max-height: 240px; } }
.ch-voorchat { align-self: stretch; max-width: 560px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 10px 14px; font-size: 12.5px; }
.ch-voorchat-kop { font-weight: 650; display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.ch-voorchat ol { list-style: none; margin: 0 0 6px; padding: 0; }
.ch-voorchat li { display: flex; gap: 10px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.ch-voorchat li:last-child { border-bottom: 0; }
.ch-voorchat li span:first-child { color: var(--muted); width: 44px; flex: none; font-variant-numeric: tabular-nums; }
.ch-voorchat li.fout span:last-child { color: var(--neg); }
.chat-toestemming { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 100001; width: min(480px, calc(100vw - 32px)); background: #fff; color: #14171f; border: 1px solid #e4e7ee; border-radius: 12px; padding: 12px 14px; box-shadow: 0 14px 40px rgba(20,23,31,.14); font: 13px/1.45 system-ui, sans-serif; display: flex; flex-direction: column; gap: 8px; }
.chat-toestemming .knoppen { display: flex; gap: 8px; }
.chat-toestemming button { font: inherit; padding: 6px 12px; border-radius: 8px; border: 1px solid #e4e7ee; background: #fff; cursor: pointer; }
.chat-toestemming button.primair { background: #14171f; color: #fff; border-color: #14171f; }
.st-domein { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--wash2); display: flex; flex-direction: column; gap: 6px; }
.st-domein-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.st-domein-naam { font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 600; }
.st-domein-knop { margin-left: auto; }
.st-domein-fout { font-size: 12.5px; color: #b3261e; }
.st-domein-regels { border-collapse: collapse; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; margin-top: 4px; }
.st-domein-regels th { text-align: left; font-family: inherit; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 2px 18px 2px 0; font-weight: 600; }
.st-domein-regels td { padding: 2px 18px 2px 0; }
.stapel { display: flex; flex-direction: column; gap: 14px; }
.kpi-value.warn { color: var(--warn); }
.kpi-value.neg { color: var(--neg); }
.lijst-kpis .kpi { text-decoration: none; color: inherit; }
.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; padding: 14px 18px; }
.tegel { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; background: var(--card); display: flex; flex-direction: column; gap: 3px; text-align: left; text-decoration: none; color: inherit; font: inherit; }
.tegel:hover { background: var(--wash2); }
.tegel.aan { border-color: var(--btn-bg); box-shadow: 0 0 0 1px var(--btn-bg); }
.tegel b { font-size: 13.5px; }
.tegel .m { font-size: 12px; color: var(--muted); }
.tegel .kan { display: flex; gap: 4px; margin-top: 4px; }
.raster2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 14px 18px; }
.raster3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; padding: 14px 18px; }
.raster2 .breed, .raster3 .breed { grid-column: 1 / -1; }
@media (max-width: 760px) { .raster2, .raster3 { grid-template-columns: minmax(0, 1fr); } }
.regels { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; }
.regel { display: grid; grid-template-columns: 24px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr) 28px; gap: 8px; align-items: center; }
.regel .enof { font-size: 11px; color: var(--muted); font-weight: 600; text-align: center; }
.regel select, .regel input { height: 34px; font: inherit; font-size: 13.5px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: var(--card); color: var(--ink); min-width: 0; width: 100%; }
.wvoet { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.wvoet .r { margin-left: auto; display: flex; gap: 8px; }
.wvoet .m { font-size: 12.5px; color: var(--muted); }
.vink { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink); }
.vink input[type=checkbox]:not(.sch) { width: 15px; height: 15px; margin: 0; accent-color: var(--btn-bg); }
.vink input.sch { appearance: none; -webkit-appearance: none; width: 30px; height: 18px; border-radius: 999px; background: var(--axis); position: relative; flex: none; margin: 0; cursor: pointer; }
.vink input.sch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .12s ease; }
.vink input.sch:checked { background: var(--btn-bg); }
.vink input.sch:checked::after { left: 14px; }
.map { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
@media (max-width: 1200px) { .map { grid-template-columns: minmax(0, 1fr); } }
.maprij { display: grid; grid-template-columns: 22px minmax(0, 1fr) 20px minmax(0, 1.2fr) 104px; gap: 8px; align-items: center; padding: 7px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.maprij:last-child { border-bottom: 0; }
.maprij .lt { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--muted); text-align: center; }
.maprij .kol { min-width: 0; }
.maprij .kol b { display: block; font-weight: 600; }
.maprij .kol small { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maprij .pijl { color: var(--muted); text-align: center; }
.maprij select { height: 30px; font: inherit; font-size: 12.5px; border: 1px solid var(--line); border-radius: 7px; padding: 0 8px; background: var(--card); color: var(--ink); max-width: 100%; width: 100%; }
.maprij.nog { background: var(--chip-orange-bg); } .maprij.nog select { border-color: var(--chip-orange-dot); }
.maprij.over .kol { opacity: .55; }
.waarden { padding: 6px 14px 12px 52px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--line); }
.waarde { display: grid; grid-template-columns: 140px 24px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 13px; }
.waarde code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: var(--wash); padding: 2px 6px; border-radius: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.waarde select { height: 28px; font: inherit; font-size: 12.5px; border: 1px solid var(--line); border-radius: 7px; padding: 0 8px; background: var(--card); color: var(--ink); }
.waarde.onbekend select { border-color: var(--chip-red-dot); }
.prev { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.prev th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--card); }
.prev th:first-child, .prev td:first-child { padding-left: 14px; }
.prev td { padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.prev tbody tr:last-child td { border-bottom: 0; }
.prev td.num { text-align: right; font-variant-numeric: tabular-nums; }
.prev td.fout { background: var(--chip-red-bg); color: var(--chip-red-ink); }
.prev td.vert { background: var(--chip-blue-bg); }
.prev td.leeg { color: var(--muted); font-style: italic; }
.prev .van { color: var(--muted); font-size: 11px; display: block; }
.prev.voorbeeld { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.lt .rij-fout td { background: var(--chip-red-bg); }
.lt td .mono { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.card.flush .dropzone { margin: 14px 18px; display: block; }
.card.flush .dropzone.over { border-color: var(--data); background: var(--data-wash); }
#lijst-uitvoeren .lijst-pop { left: auto; right: 0; width: 320px; }
#lijst-uitvoeren .lijst-pop .item .m { white-space: normal; text-align: right; }
.dropzone .leeg-tekst { display: block; }
.dropzone .bestand { display: block; font-weight: 650; color: var(--ink); font-size: 14px; }
.dropzone.gevuld { border-style: solid; border-color: var(--chip-green-dot); background: var(--chip-green-bg); }
.dropzone.gevuld .leeg-tekst { display: none; }
.adm-balk { margin: 6px 0 18px; }
.adm-balk .web-koppen { margin-bottom: 10px; }
.adm-balk .web-tabs { margin-bottom: 0; }
.adm-balk .web-tabs a.aan { font-weight: 600; }
.crumbs a[data-adm-kop] { color: inherit; }
.lt th.uitklap, .lt td.uitklap { width: 28px; padding-left: 8px; padding-right: 0; }
.lt-toggle { border: 1px solid var(--line); background: var(--card); color: var(--sub); border-radius: 6px; width: 22px; height: 22px; font-size: 11px; cursor: pointer; line-height: 1; }
.lt-toggle:hover { color: var(--ink); border-color: var(--muted); }
.lt tr.lt-uitgeklapt td { background: var(--wash2); padding: 8px 14px 10px 44px; }
.lt-regels { display: grid; grid-template-columns: 1fr 120px 120px; gap: 2px 14px; font-size: 12.5px; max-width: 640px; }
.lt-regels .rek { color: var(--ink); }
.lt-regels .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--sub); }
.lt-noot { margin-top: 8px; font-size: 12.5px; color: var(--sub); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lijst-fp .bedragbereik { display: flex; align-items: center; gap: 6px; }
.lijst-fp .bedragbereik input { width: 90px; }
.lijst-fp .bedragbereik .euro { color: var(--muted); font-size: 12.5px; }
.lt tr.lt-groep td { background: var(--wash2); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 7px 14px; }
.lt-toggle { font-size: 13px; }
table.dense tr.lt-uitgeklapt > td { background: var(--wash2); padding: 6px 4px 10px 34px; }
table.dense .btw-toggle { margin-right: 8px; vertical-align: middle; }
table.btw-posten { font-size: 12.5px; }
table.btw-posten td, table.btw-posten th { padding: 5px 8px; }
table.btw-rubrieken > thead > tr > th.num, table.btw-rubrieken > tbody > tr > td.num,
table.btw-posten th.num, table.btw-posten td.num { width: 150px; }
table.btw-posten .chip { margin-right: 6px; }
.btw-toel { color: var(--muted); }
.btw-toel::before { content: " · "; }
.btw-alle { padding: 6px 8px 0; }
.lijst .werkbalk { position: relative; }
.lijst details#lijst-filters { position: static; }
.lijst details#lijst-filters .lijst-pop { left: 0; }
.ifstrook { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border: 1px dashed var(--muted); border-radius: 10px; background: var(--card); margin: 0 0 14px; cursor: pointer; }
.ifstrook.over { border-color: var(--data); background: var(--data-wash); }
.ifstrook .ifico { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--sub); font-size: 16px; flex: none; }
.ifstrook .tekst { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.ifstrook .tekst .m { color: var(--muted); font-size: 12px; }
.ifstrook .r { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lt tr:focus-within .rij-acties { opacity: 1; }
.schuiflade-achter { position: fixed; inset: 0; background: rgba(16,24,40,.32); z-index: 60; }
.schuiflade { position: fixed; top: 0; right: 0; bottom: 0; background: var(--card); box-shadow: -12px 0 40px rgba(16,24,40,.22); z-index: 61; display: flex; flex-direction: column; max-width: 100vw; }
.lade-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 24px 14px; border-bottom: 1px solid var(--line); flex: none; }
.lade-kop h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.lade-sub { margin: 4px 0 0; color: var(--sub); font-size: 13px; }
.lade-x { border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.lade-x:hover { color: var(--ink); background: var(--wash); }
.lade-body { padding: 16px 24px 0; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.lade-body > form { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.lade-kopje { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 4px 0 -4px; font-weight: 650; }
.lade-voet { display: flex; gap: 8px; align-items: center; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--wash2); margin: auto -24px 0; flex-wrap: wrap; }
.lade-voet .r { margin-left: auto; }
.lade-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.lade-velden.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lade-velden .breed { grid-column: 1 / -1; }
.feit { font-size: 12.5px; color: var(--sub); line-height: 1.45; }
.feit b { color: var(--ink); font-weight: 600; }
.feit.rood { color: var(--neg); }
body.lade-open { overflow: hidden; }
.schakel { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 500; position: relative; }
.schakel input { position: absolute; opacity: 0; width: 0; height: 0; }
.schakel .sw { width: 32px; height: 18px; border-radius: 999px; background: var(--axis); position: relative; transition: background .15s; flex: none; }
.schakel .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.schakel input:checked + .sw { background: var(--chip-green-dot); }
.schakel input:checked + .sw::after { left: 16px; }
.schakel input:focus-visible + .sw { box-shadow: 0 0 0 3px var(--data-wash); }
.schakel-rij { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.segment { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); max-width: 100%; }
.segment label { position: relative; min-width: 0; }
.segment input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.segment span { display: block; padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--sub); border-left: 1px solid var(--line); cursor: pointer; white-space: nowrap; }
.segment label:first-child span { border-left: 0; }
.segment input:checked + span { background: var(--btn-bg); color: var(--btn-ink); }
.segment input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--data); }
.segment.klein span { padding: 3px 10px; font-size: 12px; }
.sleepvak { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px dashed var(--axis); border-radius: 10px; padding: 16px; text-align: center; color: var(--sub); background: var(--wash2); cursor: pointer; font-size: 13px; position: relative; }
.sleepvak input { position: absolute; opacity: 0; width: 0; height: 0; }
.sleepvak .t { font-weight: 550; color: var(--ink); }
.sleepvak .s { font-size: 12px; color: var(--muted); }
.sleepvak.over, .sleepvak:hover { border-color: var(--data); background: var(--data-wash); }
.sleepvak.bezig { opacity: .6; pointer-events: none; }
.ring { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--wash) 0); --c: var(--chip-green-dot); font-size: 10.5px; font-weight: 700; color: var(--pos); flex: none; vertical-align: middle; }
.ring b { background: var(--card); border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.ring.warn { --c: var(--chip-orange-dot); color: var(--chip-orange-ink); }
.ring.bad { --c: var(--chip-red-dot); color: var(--neg); }
.check-lijst { list-style: none; margin: 0; padding: 10px 18px 12px; display: flex; flex-direction: column; gap: 7px; }
.check-lijst li { padding-left: 24px; position: relative; display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; flex-wrap: wrap; }
.check-lijst li::before { content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--axis); box-sizing: border-box; }
.check-lijst li.ok::before { content: "\2713"; border-color: var(--chip-green-dot); background: var(--chip-green-dot); color: #fff; font-size: 10px; line-height: 11px; text-align: center; }
.check-lijst li .m { color: var(--muted); font-size: 12.5px; }
.check-lijst li a { color: var(--data); text-decoration: none; font-size: 13px; }
.kdn { display: inline-flex; gap: 4px; align-items: center; }
.kd { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: inline-block; }
.kd.aan { background: var(--data); }
.grip { color: var(--axis); cursor: grab; letter-spacing: -3px; font-size: 14px; user-select: none; flex: none; padding: 0 2px; }
.sleep-item.sleept { opacity: .4; }
.sleep-item.boven { box-shadow: inset 0 2px 0 var(--data); }
.tag { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 6px 2px 10px; font-size: 12.5px; background: var(--card); color: var(--ink); vertical-align: middle; }
.tag img, .tag .foto { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; }
.tag button, .tag .weg { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 3px; }
.tag button:hover, .tag .weg:hover { color: var(--neg); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inzet { border: 1px dashed var(--axis); border-radius: 10px; padding: 10px 12px; margin: 12px 18px; background: var(--wash2); }
.fotoraster { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; padding: 14px 18px; }
.fotoraster .fg { position: relative; border: 1px solid var(--line); border-radius: 10px; aspect-ratio: 1; overflow: hidden; background: var(--wash); }
.fotoraster .fg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fotoraster .fg .lbl { position: absolute; left: 8px; top: 8px; background: var(--btn-bg); color: var(--btn-ink); border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 650; }
.fotoraster .fg .grip { position: absolute; right: 6px; top: 4px; background: rgba(255,255,255,.85); border-radius: 6px; color: var(--sub); }
.fotoraster .fg .weg { position: absolute; right: 6px; bottom: 6px; background: rgba(255,255,255,.9); }
.fotoraster .fg .alt { position: absolute; left: 8px; bottom: 8px; background: var(--card); border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 650; }
.fotoraster .fg .alt.ok { color: var(--pos); }
.fotoraster .fg .alt.warn { color: var(--chip-orange-ink); }
.fotoraster .leegvak { aspect-ratio: 1; display: grid; }
.fotoraster .leegvak .sleepvak { height: 100%; }
.lijstje { display: flex; flex-direction: column; }
.lijstje > div { display: flex; gap: 10px; align-items: center; padding: 8px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.lijstje > div:last-child { border-bottom: 0; }
.lijstje .m { color: var(--muted); font-size: 12.5px; }
.lijstje .r { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.lijstje .naam { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toevoegrij { display: flex; gap: 8px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.toevoegrij input, .toevoegrij select { flex: 1; min-width: 140px; }
.toevoegrij .klein-num { flex: 0 0 72px; min-width: 0; text-align: right; }
.talen-wissel { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.talen-wissel button { border: 0; border-left: 1px solid var(--line); background: var(--card); color: var(--sub); font: inherit; font-size: 12px; font-weight: 600; padding: 3px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.talen-wissel button:first-child { border-left: 0; }
.talen-wissel button.aan { background: var(--btn-bg); color: var(--btn-ink); }
.talen-wissel .dotw { width: 6px; height: 6px; border-radius: 50%; background: var(--chip-orange-dot); display: inline-block; }
.te-lang { color: var(--neg); }
.dag-kop { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 650; padding: 12px 16px 2px; }
.verloop .dag-kop { padding-left: 0; }
.leegstaat { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 18px; font-size: 13.5px; }
.leegstaat b { font-size: 14.5px; }
.leegstaat .m { color: var(--sub); max-width: 60ch; }
.start3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 14px 18px; }
.tile { border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font-size: 13.5px; }
.tile b { font-size: 14px; }
.tile .m { color: var(--sub); }
@media (max-width: 900px) {
.fotoraster { grid-template-columns: repeat(3, 1fr); }
.start3 { grid-template-columns: 1fr; }
.lade-velden, .lade-velden.drie { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.schuiflade { width: 100vw !important; }
.fotoraster { grid-template-columns: repeat(2, 1fr); }
.ktabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.ktabs .fchip { white-space: nowrap; }
.lijst-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.kkop .r { margin-left: 0; width: 100%; }
}
.opslaanbalk.zweef { position: sticky; bottom: 14px; z-index: 5; margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 8px 24px rgba(16,24,40,.14); }
.opslaanbalk.zweef .m { color: var(--muted); font-size: 12px; margin-left: 8px; }
.kaart-velden .field .waarde { min-height: 34px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink); padding: 0; }
.kaart-velden .field .hint, .field label .hint { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 12px; }
.kaart-velden .field .hint a, .field .hint { text-decoration: none; }
.drie-cijfers { display: grid; grid-template-columns: repeat(3, 1fr); padding: 12px 18px; }
.drie-cijfers div { display: flex; flex-direction: column; gap: 2px; padding: 0 14px; border-left: 1px solid var(--line); }
.drie-cijfers div:first-child { padding-left: 0; border-left: 0; }
.drie-cijfers small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 650; }
.drie-cijfers b { font-size: 20px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.bad { color: var(--neg); }
.omzet-grafiek { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; height: 200px; padding: 14px 18px 8px; }
.omzet-grafiek .as { display: flex; flex-direction: column; justify-content: space-between; color: var(--muted); font-size: 11px; text-align: right; padding-bottom: 20px; font-variant-numeric: tabular-nums; }
.omzet-grafiek .kolommen { display: flex; gap: 8px; align-items: stretch; min-width: 0; padding-bottom: 20px; border-bottom: 1px solid var(--line); position: relative; }
.omzet-grafiek .kolom { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 0; height: 100%; }
.omzet-grafiek .kolom i { width: 100%; background: var(--data); border-radius: 3px 3px 0 0; display: block; min-height: 2px; }
.omzet-grafiek .kolom:last-child i { background: var(--chip-blue-ink); }
.omzet-grafiek .kolom span { position: absolute; top: 100%; margin-top: 4px; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.mini-vk .vk-tabel th:nth-child(5), .mini-vk .vk-tabel td:nth-child(5) { display: none; }
.herkomst-smal .table-scroll table th:nth-child(2), .herkomst-smal .table-scroll table td:nth-child(2) { display: none; }
.herkomst-smal .card-head { flex-wrap: wrap; }
.kaart .lt .nr { font-weight: 600; color: inherit; text-decoration: none; }
.kaart .lt .sub { color: var(--muted); font-size: 12px; }
.kaart .st { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--axis); margin-right: 6px; vertical-align: 1px; }
.kaart .st.ok { background: var(--chip-green-dot); }
.lijstje > div.blok { padding-top: 10px; padding-bottom: 10px; }
.lijstje .blok input.inline, .lijstje .blok textarea.inline { width: 100%; }
@media (max-width: 600px) {
.drie-cijfers { grid-template-columns: 1fr; gap: 8px; }
.drie-cijfers div { padding: 0; border-left: 0; }
.kaart-velden { grid-template-columns: 1fr; }
.opslaanbalk.zweef { bottom: 8px; flex-wrap: wrap; }
.opslaanbalk.zweef .m { display: none; }
}
.lt td.ringcel { padding-top: 6px; padding-bottom: 6px; }
.lt td.ringcel .ring { width: 32px; height: 32px; font-size: 10px; }
.lt td.ringcel .ring b { width: 25px; height: 25px; }
.schuiflade-achter { z-index: 90; }
.schuiflade { z-index: 91; }
@media (max-width: 600px) {
.bulk { flex-wrap: wrap; }
.bulk .r { flex-wrap: wrap; margin-left: 0; gap: 6px; }
.lijst-kpis, .card.kpis { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.lt td.vast .sub { overflow-wrap: normal; word-break: normal; max-width: none; }
.lt .celfoto > span { flex: 1 1 auto; min-width: 0; }
.lt td.vast a.nr { white-space: normal; }
}
.boom .takken .sleep-item > .tak { display: flex; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; padding-right: 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.boom .tak .tak-knoppen { margin-left: auto; display: inline-flex; gap: 4px; visibility: hidden; }
.boom .tak:hover .tak-knoppen, .boom .tak.gekozen .tak-knoppen, .boom .tak:focus-within .tak-knoppen { visibility: visible; }
.boom .tak.gekozen { background: var(--data-wash); }
.boom .sleep-item.boven > .tak { box-shadow: inset 0 2px 0 var(--data); }
input.ghost.ontbreekt, .inp.ontbreekt { border-color: var(--chip-red-dot); color: var(--neg); }
input.ghost.ontbreekt::placeholder { color: var(--neg); opacity: .8; }
.kraster.gelijk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1180px) { .kraster.gelijk { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .boom .tak .tak-knoppen { visibility: visible; } }
.leegstaat a.btn-primary, .tile a.btn-primary, .leegstaat a.ghost, .tile a.ghost { color: var(--btn-ink); text-decoration: none; }
.leegstaat a.ghost, .tile a.ghost { color: var(--ink); }
.boom .tak-knoppen .ghost, .boom .tak-knoppen .ghost.small { white-space: nowrap; }
@media (max-width: 600px) {
.boom .takken .sleep-item > .tak { flex-wrap: wrap; row-gap: 4px; }
.boom .tak .tak-knoppen { margin-left: 0; width: 100%; }
.boom .tak .tak-adres, .boom .tak .cell-sub { overflow-wrap: anywhere; }
}
.rijen { display: flex; flex-direction: column; gap: 6px; }
.rijen .rij { display: flex; gap: 6px; align-items: flex-start; }
.rijen .rij > input { flex: 1 1 120px; min-width: 0; }
.rijen .rij > .fk { flex: 0 0 auto; }
.rijen .rij > .fk .fk-label { display: none; }
.rijen .rij-weg { flex: none; padding-inline: 8px; }
.rijen .rij-plus { align-self: flex-start; }
.fk-alt a { margin-left: 6px; }
.serp { min-width: 0; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 0 0 12px; background: var(--card); font-family: Arial, Helvetica, sans-serif; }
.serp-url { font-size: 12px; color: #202124; }
.serp-titel { color: #1a0dab; font-size: 18px; line-height: 1.3; margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serp-tekst { color: #4d5156; font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-teller-voor] { margin-left: 8px; font-weight: 400; }
[data-teller-voor].te-lang { color: var(--neg); }
.pl-weergave { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.pl-weergave a { padding: 6px 12px; color: var(--muted); font-weight: 500; }
.pl-weergave a.aan { background: var(--ink); color: #fff; }
.pl-kind td:first-child { padding-left: 34px; }
.pl-tak { color: var(--muted); margin-right: 6px; }
.pl-adres { white-space: nowrap; }
.rijen .rij > select { flex: 1 1 120px; min-width: 0; font: inherit; }
.site-formulier-vink { flex-direction: row !important; align-items: center; gap: 8px; }
.shop-honing { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.shop-leeg-pagina { max-width: 560px; margin: 48px auto; padding: 0 16px; text-align: center; }
.shop-leeg-pagina h1 { font-size: 24px; margin: 0 0 10px; }
.shop-leeg-pagina p { color: var(--sub); margin: 0 0 18px; }
.shop-leeg-knoppen { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.vr-opties { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vr-optie { display: grid; grid-template-columns: 18px 1fr; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.vr-optie input { margin: 0; accent-color: var(--ink); grid-row: 1 / 3; }
.vr-optie b, .vr-optie span { grid-column: 2; } .vr-optie:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.vr-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vr-teksten { display: flex; flex-direction: column; gap: 8px; } .vr-teksten > div:not(.field) { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; }
.vr-chip { justify-self: start; }
.vr-vestigingen { display: flex; flex-direction: column; gap: 8px; } .vr-vest { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; }
.vr-mini { border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; align-items: center; margin: 4px 0 10px; }
.vr-mini-foto { width: 44px; height: 44px; border-radius: 6px; background: linear-gradient(160deg, #e7c9a3, #c48a4a); grid-row: 1 / 4; }
.vr-mini b { font-size: 13px; } .vr-mini .nova-chip { justify-self: start; } .vr-mini.pdp { grid-template-columns: 1fr; } .vr-mini.pdp b { font-size: 18px; }
.nova-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 4px; padding: 3px 8px; font-size: 11.5px; font-weight: 600; background: #e8f6ee; color: #1f7a43; }
.nova-chip.nova-chip--bijna { background: #fdefd9; color: #9a5a05; } .nova-chip.nova-chip--nee { background: #FEF3F2; color: #B42318; }
.kraster.boomlinks { grid-template-columns: 340px minmax(0, 1fr); }
@media (max-width: 1180px) { .kraster.boomlinks { grid-template-columns: minmax(0, 1fr); } }
.boomtabel td { padding-top: 8px; padding-bottom: 8px; }
.boomtabel .nr.stil { color: var(--sub); font-weight: 500; }
.settabel tr.geerfd td { color: var(--sub); }
.settabel tr.geerfd td b { font-weight: 500; }
.settabel .greep { cursor: grab; color: var(--axis); letter-spacing: -2px; }
.settabel tr.sleept { opacity: .5; }
.settabel tr.boven td { box-shadow: inset 0 2px 0 var(--data); }
.settabel .schakel { vertical-align: middle; }
.chip.blue { background: var(--chip-blue-bg, #eef4fd); color: var(--chip-blue-ink, #1a5fb4); }
.lijst-fp .kf-kop { display: flex; align-items: baseline; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 2px; }
.lijst-fp .kf-kop .lab { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--sub); font-weight: 650; }
.lijst-fp .kf .lab { font-size: 12.5px; font-weight: 550; display: block; margin-bottom: 5px; }
.lijst-fp .kf .lab small { color: var(--sub); font-weight: 500; margin-left: 4px; }
.lijst-fp .kf-waarden { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 12px; }
.lijst-fp .kf .vink { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 2px 0; }
.lijst-fp .kf .vink .n { margin-left: auto; color: var(--sub); font-size: 12px; font-variant-numeric: tabular-nums; }
.lijst-fp .kf .kf-leeg { margin-top: 4px; }
.lijst-fp .kf .kf-leeg i { font-style: normal; color: var(--chip-orange-ink); font-weight: 600; }
.lijst-fp .kf .m { display: block; font-size: 12px; color: var(--sub); margin-top: 3px; }
.werkblad .wb-werkbalk { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.werkblad .wb-hint { font-size: 12px; color: var(--sub); margin-left: auto; }
.wb-tabel th.wb-vast, .wb-tabel td.wb-vast { position: sticky; left: 0; background: var(--card); z-index: 1; min-width: 240px; box-shadow: 1px 0 0 var(--line); }
.wb-tabel .art { display: flex; gap: 10px; align-items: center; }
.wb-tabel .art img.mini { width: 30px; height: 30px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); }
.wb-tabel .cel { width: 100%; min-width: 110px; border: 1px solid transparent; border-radius: 6px; padding: 5px 8px; background: transparent; font: inherit; color: inherit; }
.wb-tabel .cel:focus { border-color: var(--data); background: var(--card); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--data) 22%, transparent); }
.wb-tabel .cel.num { text-align: right; font-variant-numeric: tabular-nums; }
.wb-tabel .cel.gewijzigd { background: var(--chip-green-bg); border-color: var(--chip-green-dot); color: var(--chip-green-ink); font-weight: 600; }
.wb-tabel .cel.leeg { border: 1px dashed var(--axis); }
.wb-tabel .cel.fout { background: var(--chip-red-bg, #fdecea); border-color: var(--neg, #b42318); color: var(--neg, #b42318); font-weight: 600; }
.wb-tabel td { padding: 4px 6px; }
.wb-tabel th small { color: var(--sub); font-weight: 500; margin-left: 4px; text-transform: none; letter-spacing: 0; }
.wb-legenda { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12.5px; }
.wb-legenda i { font-style: normal; display: inline-block; padding: 2px 8px; border-radius: 6px; margin-right: 6px; border: 1px solid transparent; }
.wb-legenda i.gewijzigd { background: var(--chip-green-bg); border-color: var(--chip-green-dot); color: var(--chip-green-ink); }
.wb-legenda i.leeg { border: 1px dashed var(--axis); }
.wb-legenda i.fout { background: var(--chip-red-bg, #fdecea); color: var(--neg, #b42318); }
.werkblad .opslaanbalk { position: sticky; bottom: 12px; z-index: 4; }
.drie-cijfers { display: grid; grid-template-columns: repeat(3, 1fr); margin: 4px 0 12px; }
.drie-cijfers > div { display: flex; flex-direction: column; gap: 2px; padding: 0 14px; border-left: 1px solid var(--line); }
.drie-cijfers > div:first-child { padding-left: 0; border-left: 0; }
.drie-cijfers small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sub); font-weight: 650; }
.drie-cijfers b { font-size: 20px; font-variant-numeric: tabular-nums; }
.drie-cijfers b.warn { color: var(--chip-orange-ink); }
.drie-cijfers .m { font-size: 12px; color: var(--sub); }
.fg-bestand { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.fotoraster .fg .fg-knoppen { position: absolute; left: 8px; right: 8px; bottom: 36px; display: flex; gap: 6px; justify-content: center; opacity: 0; transition: opacity .12s; }
.fotoraster .fg:hover .fg-knoppen, .fotoraster .fg:focus-within .fg-knoppen { opacity: 1; }
.fotoraster .fg .fg-knoppen .ghost { background: rgba(255,255,255,.94); color: #111; border-color: rgba(0,0,0,.12); cursor: pointer; }
.fotoraster .fg .fg-alt { position: absolute; left: 8px; right: 36px; bottom: 8px; background: var(--card); border: 1px solid transparent; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 600; min-width: 0; }
.fotoraster .fg .fg-alt.ok { color: var(--pos); }
.fotoraster .fg .fg-alt.warn { color: var(--chip-orange-ink); }
.fotoraster .fg .fg-alt:focus { border-color: var(--data); outline: none; color: var(--ink); font-weight: 500; }
.fotoraster .fg.over { outline: 2px solid var(--data); outline-offset: -2px; }
.fotoraster .fg.over::after { content: "Laat los om te vervangen"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,.75); font-size: 12.5px; font-weight: 600; }
.fotoraster .fg.bezig { opacity: .6; }
.lijst-standen { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); }
.lijst-standen a { padding: 6px 12px; color: var(--ink); font-weight: 500; border-left: 1px solid var(--line); font-size: 13px; }
.lijst-standen a:first-child { border-left: 0; }
.lijst-standen a[aria-current="true"] { background: var(--btn-bg); color: var(--btn-ink); font-weight: 600; }
.fotostand { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; padding: 16px 18px; }
.ft { position: relative; display: flex; flex-direction: column; gap: 8px; }
.ft .ft-vink { position: absolute; left: 10px; top: 10px; z-index: 2; width: 16px; height: 16px; }
.ft .ft-foto { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 10px; background: var(--wash); overflow: hidden; position: relative; text-align: center; color: inherit; }
.ft .ft-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft.zonder .ft-foto { border-style: dashed; background: var(--card); }
.ft .ft-leeg { color: var(--sub); font-size: 13px; line-height: 1.35; }
.ft .ft-leeg small { font-size: 12px; }
.ft.klein .ft-foto { outline: 2px solid var(--chip-orange-dot, #e8a13c); outline-offset: -2px; }
.ft .ft-foto .lbl { position: absolute; right: 8px; top: 8px; background: var(--btn-bg); color: var(--btn-ink); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 650; }
.ft .ft-foto .lbl.warn { background: var(--chip-orange-dot, #e8a13c); }
.ft .ft-kies { position: absolute; left: 50%; transform: translateX(-50%); top: calc(50% - 4px); opacity: 0; transition: opacity .12s; background: rgba(255,255,255,.94); cursor: pointer; white-space: nowrap; }
.ft:hover .ft-kies, .ft:focus-within .ft-kies { opacity: 1; }
.ft.zonder .ft-kies { top: auto; bottom: calc(100% - 100% + 58px); }
.ft.over .ft-foto { outline: 2px solid var(--data); outline-offset: -2px; background: color-mix(in srgb, var(--data) 10%, var(--card)); }
.ft.bezig { opacity: .6; }
.ft .ft-txt b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.ft .ft-txt a { color: inherit; }
aside.kkol .fotoraster { grid-template-columns: 1fr 1fr; padding: 12px 14px; }
aside.kkol .fotoraster .fg.hoofd { grid-column: span 2; aspect-ratio: 16 / 10; }
aside.kkol .fotoraster .fg .fg-knoppen { bottom: 34px; }
aside.kkol .fotoraster .fg .fg-alt { font-size: 10.5px; }
.upload-keuze { display: flex; flex-direction: column; gap: 8px; }
.upload-keuze .mu-map { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; align-self: flex-start; }
.upload-keuze .mu-map .m { font-weight: 400; color: var(--sub); }
.lade .drie-cijfers, .schuiflade .drie-cijfers { margin: 4px 0 10px; }
.varianten .as-velden { grid-template-columns: 1fr 1fr; }
.matrix th { text-align: left; font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--ink); vertical-align: top; }
.matrix thead th { border-bottom: 1px solid var(--line); }
.matrix td { padding: 6px; vertical-align: top; }
.matrix .afw { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.matrix .afw .inline { max-width: 84px; }
.mc { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; background: var(--card); min-width: 168px; }
.mc.uit { background: var(--wash); opacity: .72; }
.mc.leeg { border-style: dashed; align-items: center; justify-content: center; min-height: 118px; background: var(--wash2, var(--wash)); opacity: 1; }
.mc-kop { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; gap: 8px; }
.mc-rij { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; gap: 8px; }
.mc-rij .inline.klein-num { max-width: 90px; text-align: right; }
.mc .cel { padding: 2px 6px; border-radius: 6px; }
.mc .cel.gewijzigd { background: var(--chip-green-bg); color: var(--chip-green-ink); font-weight: 600; }
.mini-foto { width: 24px; height: 24px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); vertical-align: middle; }
.kb-tekst { padding: 12px 18px 14px; font-size: 13.5px; }
.varianten.model-los .alleen-basis { display: none !important; }
.varianten.model-basis .alleen-los { display: none !important; }
.knoprij { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bron { display: inline-block; border-radius: 5px; padding: 1px 7px; font-size: 11.5px; font-weight: 600; }
.bron.grijs { background: var(--wash); color: var(--sub); }
.bron.blauw { background: var(--chip-blue-bg, #eef4fd); color: var(--chip-blue-ink, #1a5fb4); }
.bron.oranje { background: var(--chip-orange-bg, #fdf4e7); color: var(--chip-orange-ink, #955104); }
label.slot { display: inline-flex; cursor: pointer; position: relative; }
label.slot input { position: absolute; opacity: 0; width: 0; height: 0; }
label.slot .slot-ico { width: 18px; height: 18px; display: inline-block; opacity: .3; background: no-repeat center / 16px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151821' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='11' width='16' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0'/></svg>"); }
label.slot input:checked + .slot-ico { opacity: 1; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151821' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='11' width='16' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>"); }
.miskes { display: flex; gap: 4px; flex-wrap: wrap; }
.tli i.oranje { background: var(--chip-orange-dot, #e8a13c); }
.doc { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 5px; border-radius: 8px; background: var(--chip-red-bg, #fdecea); color: var(--neg, #b42318); font-size: 10px; font-weight: 700; flex: none; border: 1px solid #f0b4ae; vertical-align: middle; }
.doc.groot { min-width: 44px; height: 44px; font-size: 12px; margin-right: 10px; }
.doclijst .art { display: flex; gap: 10px; align-items: center; }
.documenten .kv-lijst { padding: 8px 16px; }
.doc-koppel { padding: 10px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.doc-koppel-velden { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.doc-koppel-velden input, .doc-koppel-velden select { min-width: 140px; }
.doc-versie { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 10px 16px; }
.doc-versie input[type=file] { max-width: 220px; }
.doc-koppel .segment { flex-wrap: wrap; }
.documenten .voet { flex-wrap: wrap; gap: 4px 16px; }
@media (max-width: 700px) { #producten-werkblad, #producten-fotos-uploaden { display: none; } .lijst-standen { display: none; } }
.ov-inzet { border: 1px dashed var(--line); border-radius: 10px; padding: 10px 14px; font-size: 13.5px; color: var(--sub); background: var(--wash2); }
.ov-inzet b { color: var(--ink); }
.ov-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 12px 18px 16px; }
.ov-type { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; background: var(--card); text-align: left; cursor: pointer; font: inherit; color: var(--ink); position: relative; min-height: 106px; height: 100%; }
.ov-type b { font-size: 13.5px; }
.ov-type span { font-size: 12.5px; color: var(--sub); line-height: 1.4; }
.ov-type.cur { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ov-type i { font-style: normal; font-size: 11px; font-weight: 700; background: var(--ink); color: var(--card); border-radius: 999px; padding: 1px 8px; align-self: flex-start; margin-top: auto; }
.ov-type:focus-visible { outline: 2px solid var(--data); outline-offset: 2px; }
.ov-type.wijze-radio input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ov-type.wijze-radio:has(input[type=radio]:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ov-type.wijze-radio:has(input[type=radio]:checked)::after { content: "gekozen"; font-size: 11px; font-weight: 700; background: var(--ink); color: var(--card); border-radius: 999px; padding: 1px 8px; align-self: flex-start; margin-top: auto; }
.ov-type.wijze-radio:has(input[type=radio]:focus-visible) { outline: 2px solid var(--data); outline-offset: 2px; }
.ov-modgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 14px 18px; }
.ov-mod { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; background: var(--card); min-width: 0; }
.ov-mod.uit { background: var(--wash2); }
.ov-mod.uit b, .ov-mod.uit .ov-mod-uitleg { color: var(--muted); }
.ov-mod-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ov-mod-kop b { font-size: 14px; }
.ov-mod-uitleg { font-size: 13px; color: var(--sub); }
.ov-mod-voet { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; gap: 8px; }
.ov-mod-voet a { font-size: 13px; }
.ov-btgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ov-bt { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; border-width: 1.5px; }
.ov-bt.cur { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ov-bt-kop { display: flex; flex-direction: column; position: relative; }
.ov-bt-kop b { font-size: 15px; padding-right: 60px; }
.ov-bt-kop i { position: absolute; right: 0; top: 0; font-style: normal; font-size: 11px; font-weight: 700; background: var(--ink); color: var(--card); border-radius: 999px; padding: 1px 8px; }
.ov-bt-r { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.ov-bt-r small { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ov-bt-r ul { margin: 0; padding-left: 16px; color: var(--sub); }
.ov-bt-r .lijst-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ov-bt-voet { margin-top: auto; padding-top: 6px; display: flex; }
.ov-vraag { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.ov-vraag:last-of-type { border-bottom: 0; }
.ov-vr-n { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--card); display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.ov-vraag > div > b { font-size: 14.5px; display: block; }
.ov-vr-c { margin: 10px 0 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ov-seg-groot .seg-k span { padding: 7px 14px; font-size: 13.5px; }
.ov-inp { border: 1px solid var(--line); border-radius: 8px; height: 34px; padding: 0 10px; font: inherit; font-size: 13.5px; color: var(--ink); background: var(--card); min-width: 0; width: 100%; }
.ov-inp:focus { outline: 2px solid var(--data); outline-offset: -1px; }
textarea.ov-inp { height: auto; padding: 6px 10px; resize: vertical; font-family: inherit; }
.ov-inp-kort { width: 110px; }
input[type="time"].ov-inp { width: 128px; }
.ov-rijen-vak { overflow-x: auto; }
.ov-rijen input[type="text"].ov-inp { min-width: 120px; }
.ov-rijen select.ov-inp { min-width: 110px; }
.ov-eenheid { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; height: 34px; background: var(--card); }
.ov-eenheid i { font-style: normal; color: var(--muted); padding: 0 8px; font-size: 13px; }
.ov-eenheid .ov-inp { border: 0; border-radius: 0; height: 32px; width: 90px; }
.ov-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; padding: 14px 18px; }
.ov-veld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ov-veld > label { font-size: 12.5px; font-weight: 600; color: var(--sub); display: flex; align-items: center; }
.ov-veld-breed { grid-column: 1 / -1; }
.ov-rijen th { white-space: nowrap; }
.ov-rijen td { padding: 6px 8px; vertical-align: middle; }
.ov-rijen td.breed { width: 30%; }
.ov-rijen .ov-inp-kort { width: 84px; }
.ov-modnav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.ov-modnav .web-tabs a.ov-uit { color: var(--muted); }
.ov-stand { padding: 0; }
.ov-stand button { padding: 6px 14px; font-size: 13px; }
.ov-inr { table-layout: fixed; }
.ov-inr th:first-child { width: 24%; }
.ov-inr th:nth-child(2), .ov-inr th:nth-child(3) { width: 27%; }
.ov-inr td { vertical-align: top; overflow-wrap: anywhere; }
.ov-inr .ov-inr-groep td { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-top: 14px; background: var(--wash2); }
.ov-inr-actie { text-align: right; }
.ov-inr-actie .chip { white-space: nowrap; }
.ov-inr-actie form { margin-left: 6px; }
.ov-stip { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--axis); margin-top: 6px; }
.ov-stip.aan { background: var(--data); }
.ov-kost { display: flex; flex-direction: column; padding: 4px 18px 8px; }
.ov-kost > div { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ov-kost > div:last-child { border-bottom: 0; }
.ov-kost .tot { font-weight: 700; }
.ov-regel { display: flex; gap: 10px; align-items: flex-start; padding: 8px 18px; }
.ov-regel b { font-size: 13.5px; }
.ov-vest th, .ov-vest td { vertical-align: top; }
.ov-vest td { padding: 10px 12px; }
.ov-vest-cel { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ov-vest-cel .ov-inp { min-width: 0; }
.ov-vest-modules { display: flex; flex-direction: column; gap: 4px; }
.ov-vest-modules .schakel span:last-child { font-size: 12.5px; }
@media (max-width: 900px) { .ov-velden { grid-template-columns: minmax(0, 1fr); } }
.ov-nueerst { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 10px; align-items: center; background: var(--ink); color: var(--card); border-radius: 12px; padding: 12px 18px; margin: 0 0 14px; }
.ov-nueerst small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-right: 6px; }
.ov-nueerst > div { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid rgba(255,255,255,.18); padding-left: 14px; min-width: 0; }
.ov-nueerst > div b { font-size: 14px; }
.ov-nueerst > div span { font-size: 12px; color: var(--muted); }
.ov-nueerst .ghost.small { background: var(--card); color: var(--ink); border-color: var(--card); margin-top: 4px; align-self: flex-start; }
.ov-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 0 0 14px; }
.ov-fs { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; color: var(--ink); text-decoration: none; position: relative; min-width: 0; }
.ov-fs b { font-size: 24px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ov-fs .kpi-meta { white-space: normal; }
.ov-fs.cur { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ov-fs.rood b { color: var(--neg); }
.ov-fs:not(:last-child)::after { content: "›"; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); color: var(--axis); font-size: 16px; z-index: 1; }
.ov-aandacht td { vertical-align: middle; }
.ov-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--chip-orange-bg, #fdf4e7); color: var(--chip-orange-ink, #955104); font-weight: 700; font-size: 12px; }
.ov-acties { white-space: nowrap; text-align: right; }
.lt td .ov-acties a.btn-primary, .lt td a.btn-primary { color: var(--btn-ink); }
.ov-acties .ghost.small + .ghost.small { margin-left: 6px; }
.ov-cuts { display: flex; flex-direction: column; gap: 12px; padding: 12px 18px 14px; }
.ov-cuts > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
.ov-cuts b { font-size: 13.5px; }
.ov-cuts .ov-balk { grid-column: 1 / -1; }
.ov-cuts small { grid-column: 1 / -1; font-size: 12px; color: var(--sub); }
.ov-cuts small.bad { color: var(--neg); }
.ov-balk { display: inline-block; height: 6px; background: var(--wash2); border-radius: 3px; overflow: hidden; width: 100%; min-width: 60px; vertical-align: middle; }
.ov-balk i { display: block; height: 100%; background: var(--data); border-radius: 3px; }
.ov-balk.ok i { background: var(--chip-green-dot, #17984b); }
.ov-balk.warn i { background: #e8a13c; }
.ov-balk.bad i { background: var(--neg); }
.ov-team { display: flex; flex-direction: column; gap: 12px; padding: 12px 18px 14px; }
.ov-team > div { display: grid; grid-template-columns: 32px minmax(0, 1fr) 120px; gap: 10px; align-items: center; }
.ov-team .r { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.ov-team .r .ov-balk { width: 120px; }
.ov-team b { font-size: 13.5px; }
.ov-bel { font-weight: 600; white-space: nowrap; }
.ov-bel.risico { color: #b2680d; }
.ov-bel.laat { color: var(--neg); }
.ov-bel.risico::before, .ov-bel.laat::before { content: "●"; font-size: 9px; margin-right: 5px; vertical-align: 1px; }
.ov-start3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ov-tile { border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ov-tile b { font-size: 14px; }
.ov-tile code { font-size: 12px; background: var(--wash2); border-radius: 4px; padding: 0 4px; }
.ov-regels td { vertical-align: middle; }
.ov-art { display: flex; gap: 10px; align-items: center; }
.ov-bron { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.ov-bron::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--chip-green-dot, #17984b); flex: none; }
.ov-bron.inkoop::before { background: #e8a13c; }
.ov-bron.productie::before { background: #6b3fa0; }
.ov-bron.dropship::before { background: var(--data); }
.ov-st { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--axis); margin-right: 6px; vertical-align: 1px; }
.ov-st.ok { background: var(--chip-green-dot, #17984b); }
.ov-st.warn { background: #e8a13c; }
.ov-plan { display: flex; flex-direction: column; padding: 4px 18px 8px; }
.ov-plan > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 2px 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ov-plan > div:last-child { border-bottom: 0; }
.ov-plan b { grid-row: span 2; align-self: start; padding-top: 1px; }
.ov-plan span { font-weight: 600; }
.ov-plan small { font-size: 12.5px; color: var(--sub); }
.ov-kvlijst { display: flex; flex-direction: column; padding: 8px 18px 6px; }
.ov-kv { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ov-kv:last-child { border-bottom: 0; }
.ov-kv > span { font-size: 12px; font-weight: 600; color: var(--sub); }
.ov-kv > b { font-size: 13.5px; }
.ov-kv > b.bad { color: var(--neg); }
.ov-kvform { display: flex; flex-direction: column; gap: 4px; padding: 8px 18px 12px; border-top: 1px solid var(--line); }
.ov-kvform label { font-size: 12px; font-weight: 600; color: var(--sub); }
@media (max-width: 1100px) { .ov-nueerst { grid-template-columns: 1fr; } .ov-nueerst > div { border-left: 0; padding-left: 0; } }
.ov-plannen { padding: 14px 18px; }
.ov-plannen-velden { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ov-plannen .field { margin: 0; }
@media (max-width: 900px) { .ov-plannen-velden { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.scan-app { min-height: 100vh; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }
.scan-top { height: 52px; background: var(--ink); color: var(--card); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 16px; flex: none; }
.scan-top b { font-size: 16px; }
.scan-terug { color: var(--card); font-size: 26px; text-decoration: none; line-height: 1; width: 32px; }
.scan-voortgang { font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; }
.scan-pg { padding: 16px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.scan-voet { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--card); position: sticky; bottom: 0; }
.scan-voet form { flex: 1; display: flex; }
.scan-voet .btn-primary, .scan-voet .ghost { flex: 1; height: 52px; font-size: 16px; justify-content: center; display: inline-flex; align-items: center; }
.scan-voet .btn-primary[disabled] { opacity: .4; }
.scan-loc { background: var(--ink); color: var(--card); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; border: 2px solid transparent; }
.scan-loc small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.scan-loc b { font-size: 30px; letter-spacing: -.01em; }
.scan-loc span { color: var(--axis); font-size: 13px; }
.scan-loc.ok { background: #116329; }
.scan-loc.ok span, .scan-loc.ok small { color: #d7f0df; }
.scan-loc.gescand { border-color: #17984b; }
.scan-art { display: flex; gap: 12px; align-items: center; background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.scan-art b { font-size: 15px; }
.scan-art.gescand { border-color: #17984b; }
.scan-groot { text-align: center; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; align-items: center; }
.scan-groot small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.scan-groot b { font-size: 64px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.scan-groot span { color: var(--sub); }
.scan-getal { font-size: 48px; width: 160px; text-align: center; border: 1px solid var(--line); border-radius: 10px; padding: 6px; font-family: inherit; font-variant-numeric: tabular-nums; }
.scan-bakken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.scan-bakken.kolom { grid-template-columns: 1fr; }
.scan-bakken > div { border: 2px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; background: var(--card); min-width: 0; }
.scan-bakken > div b { font-size: 15px; }
.scan-bakken > div span { font-size: 12px; color: var(--sub); overflow-wrap: anywhere; }
.scan-bakken > div.cur { border-color: var(--ink); }
.scan-bakken > div.uit { color: var(--muted); }
.scan-bakken > div.uit b { color: var(--muted); }
.scan-inp { border: 1px solid var(--line); border-radius: 10px; height: 48px; padding: 0 14px; font: inherit; font-size: 16px; background: var(--card); color: var(--ink); width: 100%; }
.scan-inp:focus { outline: 2px solid var(--data); outline-offset: -1px; }
.scan-inp.fout { outline: 2px solid var(--neg); }
.scan-hint { color: var(--sub); font-size: 13px; border-top: 1px solid var(--line); padding-top: 10px; }
.scan-opties { display: flex; flex-direction: column; gap: 8px; }
.scan-opt { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--card); display: flex; flex-direction: column; gap: 2px; cursor: pointer; position: relative; }
.scan-opt input { position: absolute; opacity: 0; }
.scan-opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.scan-opt b { font-size: 15px; }
.scan-opt span { color: var(--sub); font-size: 13px; }
.ov-zoekcode { display: flex; gap: 8px; align-items: center; }
.ov-zoekcode .ov-inp { width: 200px; font-variant-numeric: tabular-nums; }
.ov-code { font-size: 17px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.ov-afhalen td { vertical-align: middle; }
.ov-lang td { background: #fffaf2; }
.ov-vink { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--axis); font-size: 11px; font-weight: 700; }
.ov-vink.ok { background: var(--chip-green-dot, #17984b); border-color: var(--chip-green-dot, #17984b); color: #fff; }
@media print { .side, .topbar, .niet-afdrukken, .head-actions { display: none !important; } .app { grid-template-columns: 1fr; } .ov-manifest { border: 0; } }
.ov-intern-twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ov-intern-twee.alleen { grid-template-columns: minmax(0, 1fr); }
.ov-intern-los { max-width: 720px; }
.ov-intern-drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .ov-intern-twee, .ov-intern-drie { grid-template-columns: minmax(0, 1fr); } }
.ov-intern-lijst tr.ov-huidig td { background: var(--wash2); }
.ov-intern-body { padding: 14px 16px 16px; }
.ov-intern-order small { color: var(--sub); font-size: 12.5px; }
.ov-intern-order h2 { margin: 2px 0 2px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.ov-intern-regels { margin: 12px 0 4px; }
.ov-intern-regels th:first-child, .ov-intern-regels td:first-child { padding-left: 0; }
.ov-intern-form { margin-top: 8px; }
.ov-dag { margin: 14px 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); font-weight: 600; }
.ov-check { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.ov-check li label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.ov-check li input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.ov-check.klaar li { font-size: 13px; color: var(--sub); }
.ov-check.klaar li.ok::before { content: "✓"; color: var(--pos); font-weight: 700; margin-right: 6px; }
.ov-intern-velden { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 12px; margin: 0 0 12px; }
.ov-intern-velden .veld { display: flex; flex-direction: column; gap: 4px; }
.ov-intern-velden .veld-label, .ov-intern-afkeurform .veld-label { font-size: 12px; color: var(--sub); }
.ov-intern-velden .veld-hint { font-size: 12px; color: var(--sub); }
.ov-intern-aantal { height: 34px; display: flex; align-items: center; gap: 6px; font-size: 15px; }
.ov-intern-knoppen { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.ov-intern-afkeur summary { display: inline-flex; }
.ov-intern-afkeurform { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.ov-intern-afkeurform .veld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.ov-intern-kaart:has(.ov-intern-afkeur[open]) .ov-intern-afkeurform { display: block; }
.ov-intern-afgerond { margin-top: 12px; font-size: 13.5px; }
.ov-verloop { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.ov-verloop li .cell-sub:first-child { display: inline-block; min-width: 92px; }
.ov-cap { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; }
.ov-cap > div { padding: 12px 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.ov-cap > div:last-child { border-right: 0; }
.ov-cap .ov-balk { display: block; width: 100%; margin: 4px 0; }
.ov-werk { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ov-werk .fchips { margin: 0; }
.ov-kanban { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 1200px) { .ov-kanban { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ov-kol-kop { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; padding: 4px 4px 8px; color: var(--sub); }
.ov-kol-kop b { color: var(--ink); text-transform: uppercase; letter-spacing: .05em; font-size: 11.5px; }
.ov-kk { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.ov-kk.laat { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
.ov-kk.aanvul { border-style: dashed; }
.ov-kk.leeg { color: var(--sub); text-align: center; border-style: dashed; font-size: 12.5px; }
.ov-kk-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ov-kk b { font-weight: 600; }
.ov-kk-voet { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ov-kk .tag { font-size: 11.5px; background: var(--wash2); border-radius: 6px; padding: 2px 7px; color: var(--sub); }
.ov-details { display: inline-block; position: relative; }
.ov-details summary { list-style: none; }
.ov-details summary::-webkit-details-marker { display: none; }
.ov-details-form { position: absolute; right: 0; top: 40px; z-index: 20; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.08); display: flex; gap: 8px; align-items: flex-end; min-width: 320px; }
.ov-details-form .veld { display: flex; flex-direction: column; gap: 4px; }
.ov-details-form .veld-label { font-size: 12px; color: var(--sub); }
.ov-twee { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .ov-twee { grid-template-columns: minmax(0, 1fr); } }
.ov-kol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ov-dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 13.5px; }
.ov-dl dt { color: var(--sub); }
.ov-dl dd { margin: 0; }
.ov-kost { display: grid; gap: 6px; font-size: 13.5px; }
.ov-kost > div { display: flex; justify-content: space-between; gap: 12px; }
.ov-kost > div span { color: var(--sub); }
.ov-kost .ov-kost-tot { border-top: 1px solid var(--line); padding-top: 6px; font-size: 14.5px; }
.ov-maat-form, .ov-plan-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; }
.ov-maat-form .veld, .ov-plan-form .veld { display: flex; flex-direction: column; gap: 4px; }
.ov-maat-form .veld-label, .ov-plan-form .veld-label, .ov-recept-kop .veld-label, .ov-recept-gedrag .veld-label { font-size: 12px; color: var(--sub); }
.ov-maat-form button, .ov-plan-form button { justify-self: start; }
.st { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line); margin-right: 6px; vertical-align: middle; }
.st.ok { background: var(--pos); }
.st.warn { background: var(--warn); }
.st.bad { background: var(--neg); }
.ov-wp-kiezer { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ov-wp-keuze { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; padding: 18px; }
.ov-wp-keuze:hover { border-color: var(--ink); }
.wp-app { min-height: 100vh; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; max-width: 1100px; margin: 0 auto; }
.wp-top { height: 56px; background: var(--ink); color: var(--card); display: flex; align-items: center; gap: 14px; padding: 0 18px; font-size: 17px; flex: none; }
.wp-top b { font-size: 17px; }
.wp-klok { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; }
.wp-pg { padding: 18px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.wp-nu { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.wp-nu.leeg { grid-template-columns: minmax(0, 1fr); }
.wp-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wp-l small { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); font-weight: 600; }
.wp-l h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.wp-l h2 a { color: inherit; text-decoration: none; }
.wp-l > span { color: var(--sub); font-size: 13.5px; }
.wp-stap { margin-top: 8px; padding: 10px 12px; background: var(--wash2); border-radius: 10px; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.wp-stap b { font-size: 15px; }
.wp-stap span { color: var(--sub); }
.wp-teller { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.wp-teller > div { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.wp-teller small { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); font-weight: 600; }
.wp-teller b { font-size: 26px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.wp-teller span { font-size: 12.5px; color: var(--sub); }
.wp-r { display: flex; flex-direction: column; gap: 8px; }
.wp-r form { display: flex; }
.wp-r .btn-primary, .wp-r .ghost, .wp-r summary.ghost { flex: 1; height: 48px; font-size: 16px; justify-content: center; }
.wp-r .ov-details { display: flex; }
.wp-r .ov-details-form { top: 52px; }
.wp-onder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wp-onder .ipk-kaart { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.wp-onder .ipk-kaart small { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); font-weight: 600; }
.wp-onder .ipk-kaart span { color: var(--sub); white-space: pre-line; }
.warn { color: var(--warn); }
.ov-recept-kop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ov-recept-kop .veld, .ov-recept-gedrag .veld { display: flex; flex-direction: column; gap: 4px; }
.ov-recept-kop .veld-hint { font-size: 12px; color: var(--sub); }
.ov-recept-gedrag { display: grid; gap: 10px; }
.ov-recept-tabel td { vertical-align: top; }
.ov-recept-tabel .ov-inp { width: 100%; min-width: 90px; }
.ov-recept-tabel .ov-inp.num { width: 80px; min-width: 60px; text-align: right; }
.schakel-rij { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.schakel-rij input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.ov-zoek { display: flex; gap: 8px; align-items: center; }
.ov-zoek .ov-inp { width: 200px; }
.ipk-app { max-width: 1200px; }
.ipk { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .ipk { grid-template-columns: minmax(0, 1fr); } }
.ipk-l .ov-intern-order h2 a { color: inherit; text-decoration: none; }
.ipk tr.ipk-nu td { background: var(--wash2); }
.ipk-vk { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.ipk-vk.ok { background: var(--pos); border-color: var(--pos); color: #fff; }
.ipk-vk.nu { background: var(--ink); border-color: var(--ink); color: var(--card); }
.ipk-scan { display: flex; gap: 8px; margin-top: 10px; }
.ipk-scan .ov-inp { flex: 1; height: 44px; font-size: 16px; }
.ipk-scan .ghost { height: 44px; }
.scan-hint.ok { color: var(--pos); }
.ipk-r { display: flex; flex-direction: column; gap: 10px; }
.ipk-r .ipk-kaart { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.ipk-r .ipk-kaart small { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); font-weight: 600; }
.ipk-r .ipk-kaart b { font-size: 15px; }
.ipk-r .ipk-kaart span { color: var(--sub); white-space: pre-line; }
.ipk-velden { display: flex; gap: 12px; margin: 4px 0; }
.ipk-velden .veld { display: flex; flex-direction: column; gap: 4px; }
.ipk-velden .veld-label { font-size: 12px; color: var(--sub); }
.ipk-probleem summary { display: inline-flex; }
.ipk-voet { justify-content: space-between; }
.ipk-voet .btn-primary { flex: 0 0 auto; min-width: 320px; }
.retour-staat .seg-k span { padding: 5px 9px; }
.retour-besluit { height: 30px; }
.ov-week { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; }
.ov-wk-rij { display: grid; grid-template-columns: 180px repeat(5, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
.ov-wk-kop div { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sub); font-weight: 600; padding: 0 10px 4px; }
.ov-wk-l { display: flex; flex-direction: column; justify-content: center; padding: 0 4px; font-size: 13.5px; }
.ov-wk-c { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; background: var(--card); text-decoration: none; color: inherit; }
.ov-wk-c b { font-size: 13px; font-variant-numeric: tabular-nums; }
.ov-wk-c .ov-balk { display: block; width: 100%; }
.ov-wk-c.warn { background: color-mix(in srgb, var(--warn) 8%, var(--card)); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.ov-wk-c.bad { background: color-mix(in srgb, var(--neg) 8%, var(--card)); border-color: color-mix(in srgb, var(--neg) 40%, var(--line)); }
.ov-wk-c:hover { border-color: var(--ink); }
.goed { color: var(--sub); }
.ov-zp { padding: 6px 16px 10px; }
.ov-zp-rij { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ov-zp-rij:last-child { border-bottom: 0; }
.ov-zp-l { display: flex; flex-direction: column; font-size: 13.5px; }
.ov-zaag { display: flex; height: 34px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--card); }
.ov-zaag i { display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 11.5px; border-right: 1px solid var(--line); background: var(--card); min-width: 0; overflow: hidden; white-space: nowrap; }
.ov-zaag i:last-child { border-right: 0; }
.ov-zaag i.b { background: color-mix(in srgb, var(--data) 18%, var(--card)); }
.ov-zaag i.c { background: color-mix(in srgb, var(--pos) 18%, var(--card)); }
.ov-zaag i.d { background: color-mix(in srgb, var(--warn) 18%, var(--card)); }
.ov-zaag i.r { background: var(--wash2); color: var(--sub); }
.ov-zaag i span { padding: 0 4px; }
.ov-grafiek { display: flex; gap: 8px; height: 190px; padding: 14px 16px 10px; }
.ov-as { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--sub); text-align: right; width: 28px; padding-bottom: 18px; }
.ov-staven { flex: 1; display: flex; align-items: flex-end; gap: 6px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0 6px; height: 100%; }
.ov-staaf { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; }
.ov-staaf i { display: block; width: 100%; max-width: 28px; background: var(--ink); border-radius: 4px 4px 0 0; min-height: 2px; }
.ov-staaf span { font-size: 10.5px; color: var(--sub); position: absolute; bottom: -18px; }
tr.ov-wacht td { color: var(--sub); }
.ov-taak-rij .cell-sub { display: block; }
.ik-keuze { border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ik-keuze.cur { border-color: var(--ink); border-width: 2px; }
.ik-keuze-kop { display: flex; align-items: center; gap: 10px; }
.ik-keuze-kop b { font-size: 15px; }
.ik-keuze-kop i { margin-left: auto; background: var(--ink); color: var(--card); border-radius: 999px; padding: 2px 9px; font-size: 11px; font-style: normal; font-weight: 600; }
.ik-punten { margin: 0; padding: 0; }
.ik-punten li { font-size: 12.5px; }
.ik-stroom { display: flex; gap: 6px; align-items: stretch; }
.ik-pijl { align-self: center; color: var(--muted); font-style: normal; flex: none; }
.ik-box { border: 1px solid var(--line); border-top: 3px solid var(--data); border-radius: 10px; padding: 10px 12px; background: var(--card); flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ik-box small { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ik-box b { font-size: 13px; }
.ik-box span { font-size: 12px; color: var(--sub); line-height: 1.35; }
.ik-box.ink { border-top-color: #e8a13c; }
.ik-box.mag { border-top-color: #6b3fa0; }
.ik-stap { display: flex; gap: 16px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.ik-stap:last-of-type { border-bottom: 0; }
.ik-stap-naam { width: 260px; flex: none; }
.ik-stap-keuze { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ik-manieren { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px 18px 16px; }
.ik-manier { border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; position: relative; }
.ik-manier.cur, .ik-manier:has(input:checked) { border-color: var(--ink); border-width: 2px; }
.ik-manier input { position: absolute; opacity: 0; width: 0; height: 0; }
.ik-manier-kop { display: flex; align-items: center; gap: 8px; }
.ik-manier-kop b { font-size: 14px; }
.ik-gekozen { margin-left: auto; background: var(--ink); color: var(--card); border-radius: 999px; padding: 2px 9px; font-size: 11px; font-style: normal; font-weight: 600; }
.ik-mini-stappen { display: flex; flex-direction: column; gap: 6px; }
.ik-mini-stap { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.ik-mini-stap i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--wash2); font-size: 11px; font-style: normal; font-weight: 700; flex: none; }
@media (max-width: 1100px) { .ik-manieren { grid-template-columns: 1fr; } .ik-stroom { flex-wrap: wrap; } .ik-box { min-width: 140px; } }
.ik-taak { display: flex; gap: 10px; align-items: center; padding: 9px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ik-taak:last-child { border-bottom: 0; }
.ik-taak-wat { flex: 1; min-width: 0; }
.ik-taak-wat a { color: inherit; text-decoration: none; }
.ik-taak-wat a:hover { text-decoration: underline; }
.ik-taak-r { display: flex; gap: 6px; align-items: center; flex: none; }
.ik-taak-r form { margin: 0; }
.ik-stip { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--axis); }
.ik-stip.bad { background: var(--neg); } .ik-stip.warn { background: var(--warn, #e8a13c); } .ik-stip.ok { background: var(--pos); } .ik-stip.grijs { background: var(--axis); }
.ik-kal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding: 12px 18px 16px; }
.ik-kal > div { border: 1px solid var(--line); border-radius: 10px; padding: 8px; min-height: 110px; background: var(--card); display: flex; flex-direction: column; gap: 4px; }
.ik-kal > div.vandaag { border-color: var(--data); box-shadow: inset 0 0 0 1px var(--data); }
.ik-kal-kop { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; display: flex; justify-content: space-between; margin-bottom: 2px; }
.ik-kal-item { display: block; font-size: 12px; padding: 4px 7px; border-radius: 6px; background: var(--data-wash); color: var(--ink); line-height: 1.3; text-decoration: none; }
.ik-kal-item.warn { background: var(--chip-orange-bg, #fdf4e7); } .ik-kal-item.bad { background: var(--chip-red-bg, #fdecea); } .ik-kal-item.grijs { background: var(--wash2); color: var(--sub); }
a.ik-kal-item:hover { text-decoration: underline; }
@media (max-width: 1100px) { .ik-kal { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ck-werk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ck-werk .ktabs { margin: 0; }
.ck-werk-r { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.ck-zoek { width: 200px; }
.ck-vink { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sub); white-space: nowrap; }
.ck-strook { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.ck-lev { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 190px; text-decoration: none; color: var(--ink); }
.ck-lev.aan { background: var(--wash2); border-color: var(--axis); }
.ck-lev:hover { border-color: var(--axis); }
.ck-lev b { font-size: 13px; }
.ck-lev .cell-sub { display: flex; gap: 5px; align-items: center; }
.ck-lev-wis { font-size: 12.5px; color: var(--muted); }
.ck-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.ck-tabel td { vertical-align: middle; }
.ck-tabel .ck-acties { width: 1%; white-space: nowrap; }
.ck-tabel tr.ck-groep td { text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--ink); padding: 8px 14px; }
.ck-groep-naam { font-weight: 650; }
.ck-tabel tr.ck-onder td { background: var(--wash2); padding-top: 5px; padding-bottom: 5px; font-size: 12.5px; color: var(--sub); }
.ck-tabel tr.ck-onder td:first-child { padding-left: 56px; }
.ck-tabel tr.ck-slaapt td { color: var(--muted); }
.ck-art { display: flex; gap: 10px; align-items: center; }
.ck-art-tekst { min-width: 0; }
.ck-art-tekst a.nr { font-weight: 600; color: var(--ink); text-decoration: none; }
.ck-art-tekst a.nr:hover { text-decoration: underline; }
.ck-aantal { width: 64px; text-align: right; font: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; height: 28px; background: var(--card); color: var(--ink); font-variant-numeric: tabular-nums; }
.ck-rood { color: var(--neg); } .ck-oranje { color: var(--warn, #b2680d); } .ck-groen { color: var(--pos); }
.ck-tabel .rij-acties { right: 12px; }
.ck-midden .card { overflow: hidden; }
.ck-tabel .ck-acties { width: 0; padding: 0; }
.ck-tabel .rij-acties form { margin: 0; }
.ck-mand-kop { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 18px 4px; }
.ck-mand-kop b { font-size: 20px; font-variant-numeric: tabular-nums; }
.ck-mand-lev { padding: 10px 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.ck-mand-lev-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ck-mand-lev-kop a { color: inherit; text-decoration: none; }
.ck-mand-regel { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--sub); }
.ck-mand-regel .ck-mand-wat { flex: 1; min-width: 0; }
.ck-mand-regel .num { font-variant-numeric: tabular-nums; color: var(--ink); }
.ck-mand-regel form { margin: 0; }
.ck-x { border: 0; background: none; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; }
.ck-x:hover { color: var(--neg); }
.ck-mand-lev .meter { margin-top: 6px; }
.meter { display: block; width: 100%; height: 6px; background: var(--wash2); border-radius: 4px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--pos); border-radius: 4px; }
.meter i.warn { background: var(--warn, #e8a13c); }
.ck-tip { background: var(--chip-orange-bg, #fdf4e7); color: var(--warn, #955104); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin-top: 6px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.ck-tip.groen { background: var(--chip-green-bg, #e9f6ee); color: var(--pos); }
.ck-link { border: 0; background: none; color: var(--data); font: inherit; font-size: 12.5px; padding: 0; cursor: pointer; text-decoration: underline; }
.ck-mand-voet { display: flex; gap: 8px; padding: 12px 18px 8px; border-top: 1px solid var(--line); }
.ck-mand-voet form { margin: 0; }
@media (max-width: 1100px) { .ck-grid { grid-template-columns: 1fr; } }
.ck-tabel td:first-child { min-width: 200px; }
.ck-tabel td, .ck-tabel th { padding-left: 8px; padding-right: 8px; }
.ck-tabel td:first-child, .ck-tabel th:first-child { padding-left: 14px; }
.ck-tabel .rij-acties.ck-altijd { opacity: 1; }
.ck-tabel td:nth-child(3), .ck-tabel th:nth-child(3) { white-space: nowrap; }
.ck-tabel td.num { white-space: nowrap; }
.ck-tabel tr.ck-onder td:first-child { min-width: 0; white-space: nowrap; }
.po-regels td { vertical-align: middle; }
.po-regels td.nw, .lt td.nw { white-space: nowrap; }
.po-totalen { display: flex; flex-direction: column; align-items: flex-end; padding: 10px 18px; border-top: 1px solid var(--line); }
.po-totalen .kv { width: 300px; display: flex; justify-content: space-between; padding: 3px 0; font-size: 13.5px; }
.po-totalen .kv .k { color: var(--sub); }
.po-totalen .kv.tot { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; font-weight: 650; }
.po-totalen .kv.tot .k { color: var(--ink); }
.po-ontvang { display: flex; justify-content: flex-end; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding: 12px 18px; flex-wrap: wrap; }
.po-ontvang .cell-sub { margin-right: auto; }
.po-franco { padding: 12px 18px; border-top: 1px solid var(--line); }
.doc-ikoon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; flex: none; background: var(--chip-red-bg, #fdecea); color: var(--neg); }
.doc-ikoon.rev { background: var(--wash2); color: var(--sub); }
.doc-ikoon.bev { background: var(--data-wash); color: var(--data); }
.lade-velden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lade-velden .field span { font-size: 12.5px; font-weight: 550; color: var(--sub); }
.kaart-rij .ghost.small { flex: none; }
.po-regels td:first-child { min-width: 190px; }
.po-regels .ck-aantal { width: 56px; }
.po-regels .regel-foto { width: 28px; height: 28px; }
.po-regels td .chip { font-size: 11px; padding: 1px 7px; }
.po-regels td, .po-regels th { padding-left: 8px; padding-right: 8px; }
.po-regels td:first-child, .po-regels th:first-child { padding-left: 14px; }
#factuurdoc { overflow: hidden; }
#factuurdoc .lt-wrap { overflow-x: auto; }
.ont-regels td { vertical-align: middle; }
.ont-regels td:first-child { min-width: 180px; }
.ont-regels td, .ont-regels th { padding-left: 6px; padding-right: 6px; }
.ont-regels td:first-child, .ont-regels th:first-child { padding-left: 14px; }
.ont-regels td:last-child, .ont-regels th:last-child { padding-right: 14px; }
.ont-regels .ck-aantal { width: 60px; }
#ontvangst-form { overflow: hidden; }
#ontvangst-form .lt-wrap { overflow-x: auto; }
.lev-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; padding: 4px 18px 10px; }
.lev-veld { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.lev-veld.vol { grid-column: 1 / -1; }
.lev-veld > span:first-child { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.lev-veld input, .lev-veld select { border: 1px solid transparent; background: transparent; padding: 4px 6px; margin-left: -7px; font-size: 13.5px; border-radius: 6px; width: calc(100% + 7px); min-width: 0; color: var(--ink); }
.lev-veld input::placeholder { color: var(--muted); }
.lev-veld input:hover, .lev-veld select:hover { border-color: var(--line); background: var(--wash2); }
.lev-veld input:focus, .lev-veld select:focus { border-color: var(--ink); background: var(--card); outline: none; box-shadow: none; }
.lev-adres { display: flex; gap: 6px; margin-left: -7px; }
.lev-veld .lev-adres input { flex: 1 1 0; width: auto; margin-left: 0; }
.lev-veld .lev-adres input[style] { flex: 0 0 auto; }
.lev-schakels { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; padding: 10px 18px 14px; }
.lev-schakels label { display: flex; align-items: center; gap: 8px; }
.lev-dagen { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.lev-dag { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; cursor: pointer; background: var(--card); }
.lev-dag input { position: absolute; opacity: 0; width: 0; height: 0; }
.lev-dag.aan, .lev-dag:has(input:checked) { background: var(--ink); color: var(--card); border-color: var(--ink); }
.lev-dagen .cell-sub { margin-left: 6px; }
.lev-koppel { display: flex; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; align-items: flex-end; }
.lev-persoon { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.lev-persoon .avatar { width: 28px; height: 28px; border-radius: 999px; background: var(--wash); color: var(--sub); font-size: 11px; font-weight: 650; display: grid; place-items: center; flex: none; }
.lev-persoon form { margin: 0; }
.lev-toevoegen { padding: 8px 18px 12px; }
.lev-toevoegen summary { list-style: none; display: inline-flex; cursor: pointer; }
.lev-toevoegen summary::-webkit-details-marker { display: none; }
.lev-toevoegen-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.lev-toevoegen-form input { flex: 1; min-width: 130px; }
.lev-score { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px; }
.lev-score-rij { display: grid; grid-template-columns: 165px minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: 13px; }
.lev-score-rij b { text-align: right; font-variant-numeric: tabular-nums; }
.lev-meter { display: block; height: 6px; border-radius: 3px; background: var(--wash2); overflow: hidden; min-width: 40px; }
.lev-meter i { display: block; height: 100%; background: var(--pos); border-radius: 3px; }
.lev-meter.warn i { background: var(--warn); }
.lev-meter.bad i { background: var(--neg); }
.lev-meter.blauw i { background: var(--accent, #2f5d8a); }
.lev-meter.klein { height: 4px; width: 90px; margin-top: 4px; }
.lev-art td, .lev-art th, .lev-orders td, .lev-orders th, .lev-afspraken td, .lev-afspraken th { padding-left: 8px; padding-right: 8px; }
.lev-afspraken td:nth-child(2) { white-space: nowrap; }
.lev-afspraken td:nth-child(4) { min-width: 240px; }
.lev-art td:first-child, .lev-art th:first-child, .lev-orders td:first-child, .lev-orders th:first-child, .lev-afspraken td:first-child, .lev-afspraken th:first-child { padding-left: 14px; }
.lev-art td { vertical-align: middle; }
.lev-art .regel-foto { width: 28px; height: 28px; }
.lade-velden .field.vol { grid-column: 1 / -1; }
@media (max-width: 1100px) { .lev-velden { grid-template-columns: minmax(0, 1fr); } }
.iforder td, .iforder th { padding-left: 8px; padding-right: 8px; vertical-align: middle; }
.iforder td:first-child, .iforder th:first-child { padding-left: 14px; }
.ifdiff { font-weight: 600; white-space: nowrap; }
.ifdiff.op { color: var(--neg); }
.ifdiff.af { color: var(--pos); }
.ifboeking { padding: 12px 18px; border-top: 1px solid var(--line); font-size: 13.5px; }
.ifboeking .cell-sub { margin-top: 4px; max-width: 70ch; }
.iz-grafiek { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding: 14px 18px 8px; }
.iz-staaf { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; gap: 4px; }
.iz-staaf i { display: block; width: 100%; max-width: 44px; background: var(--ink); border-radius: 4px 4px 0 0; min-height: 2px; }
.iz-staaf.licht i { background: var(--line); }
.iz-staaf.rood i { background: var(--neg); }
.iz-staaf .iz-waarde { display: block; padding: 0; gap: 0; grid-template-columns: none; font-size: 10.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.iz-staaf .iz-label { font-size: 11px; color: var(--sub); white-space: nowrap; }
.iz-lev td, .iz-lev th { padding-left: 8px; padding-right: 8px; vertical-align: middle; }
.iz-lev td:first-child, .iz-lev th:first-child { padding-left: 14px; }
.iz-lev tfoot td { font-weight: 600; border-top: 1px solid var(--line); background: var(--wash2); }
.iz-goed { color: var(--pos); font-weight: 600; }
.iz-fout { color: var(--neg); font-weight: 600; }
.iz-totaal { display: flex; gap: 18px; flex-wrap: wrap; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--wash2); font-size: 13px; font-weight: 600; }
.iz-totaal span + span { color: var(--sub); font-weight: 500; }
.kkol .lt-wrap { overflow-x: auto; }
@media (max-width: 600px) { .ik-stroom { flex-wrap: wrap; } .ik-box { min-width: 0; flex: 1 1 100%; } .ik-pijl { display: none; } .ik-stap { flex-wrap: wrap; } .ik-stap > * { min-width: 0; max-width: 100%; } .ik-stap .chip { white-space: normal; } .ik-stap-keuze { min-width: 0; } .ik-stap-keuze .seg { display: flex; flex-wrap: wrap; max-width: 100%; } }
@media (max-width: 1300px) { .po-regels td.acties, .po-regels th.acties { display: table-cell; } }
@media (max-width: 1300px) {
.ck-tabel td.acties, .ck-tabel th.acties { display: table-cell; }
.ck-grid { grid-template-columns: minmax(0, 1fr); }
}
.bk-zoek { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.bk-zoek input[type="search"] { flex: 1; min-width: 0; font: inherit; font-size: 13.5px; border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; background: var(--card); color: var(--ink); }
.bk-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.bk-tegel { position: relative; display: block; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--wash2); cursor: pointer; }
.bk-tegel img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.bk-tegel input { position: absolute; top: 8px; left: 8px; width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.bk-tegel:has(input:checked) { outline: 2px solid var(--ink); outline-offset: -2px; }
.bk-naam { display: block; font-size: 11.5px; padding: 5px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--card); }
.bk-tegel.al { cursor: default; opacity: .55; }
.bk-al { position: absolute; top: 8px; left: 8px; font-size: 10.5px; font-weight: 600; background: var(--ink); color: var(--card); border-radius: 999px; padding: 2px 7px; }
.bk-meer { grid-column: 1 / -1; justify-self: center; }
.bk-teller { font-size: 12.5px; color: var(--sub); align-self: center; }
[data-bib-lade] .lade-voet { position: sticky; bottom: 0; z-index: 1; }
.mg-stroom{display:grid;grid-template-columns:200px 1fr;gap:14px;padding:12px 18px;border-top:1px solid var(--line);align-items:center}
.mg-stroom-naam b{font-size:13.5px}
.mg-stappen{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mg-stap{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px 11px 4px 6px;font-size:12.5px;background:var(--card);white-space:nowrap;cursor:pointer}
.mg-stap input{position:absolute;opacity:0;width:0;height:0}
.mg-stap .sw{width:28px;height:16px;border-radius:999px;background:#d5d8df;position:relative;flex:none}
.mg-stap .sw::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left .12s}
.mg-stap input:checked + .sw{background:#17984b}.mg-stap input:checked + .sw::after{left:14px}
.mg-stap.vast{padding-left:11px;background:var(--ink);color:var(--card);border-color:var(--ink);cursor:default}
.mg-stap.uit{color:var(--muted);border-style:dashed}
.mg-stap em{font-style:normal;margin-left:4px}
.mg-od-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mg-od{display:flex;gap:10px;align-items:flex-start;padding:8px 18px;border-top:1px solid var(--line);cursor:pointer}
.mg-od>span:last-child{display:flex;flex-direction:column;gap:1px}
.mg-od b{font-weight:600;font-size:13px}.mg-od.uit b{color:var(--muted)}
.mg-moduit{opacity:.55}
.mg-vast{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-left:6px;font-style:normal}
.mg-menu-prev{margin:12px 18px 0;border:1px solid var(--line);border-radius:10px;padding:8px 6px;background:var(--bg)}
.mg-mp-kop{font-weight:700;padding:6px 12px}
.mg-mp{padding:6px 12px 6px 28px;display:flex;flex-direction:column;gap:1px}.mg-mp .cell-sub{font-size:11.5px}
.loc-boom{display:flex;flex-direction:column}
.loc-tak{display:flex;align-items:baseline;gap:8px;padding:7px 14px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.loc-tak:hover{background:var(--bg)}.loc-tak.cur{background:var(--bg);box-shadow:inset 3px 0 0 var(--ink)}
.loc-tak b{font-weight:600;font-size:13px}.loc-zone b{font-size:13.5px}.loc-gang{color:var(--muted)}
.loc-vakken{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:14px 18px}
.loc-vak{border:1px solid var(--line);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;background:var(--card);min-height:64px;color:var(--ink);text-decoration:none}
.loc-vak small{color:var(--muted);font-size:11px}.loc-vak b{font-size:13px}.loc-vak span{font-size:12px;color:var(--muted)}
.loc-vak:not(.bezet){background:var(--bg);border-style:dashed}.loc-vak.cur{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.loc-vak.uit{opacity:.5}
.loc-vantot{display:inline-flex;gap:6px;align-items:center}.loc-vantot input{width:64px}
.loc-verplaats{display:flex;gap:6px;align-items:center}.loc-verplaats select{max-width:200px}.loc-verplaats input{width:72px}
.kpi-band{display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border:1px solid var(--line);border-radius:12px}
.kpi-band .kpi{padding:14px 18px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:3px;background:transparent;border-radius:0;box-shadow:none}
.kpi-band .kpi:first-child{border-left:0}
.kpi-band .kpi small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kpi-band .kpi b{font-size:22px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kpi-band .kpi span{font-size:12px;color:var(--muted)}
.kpi-band .kpi.rood b{color:#b42318}.kpi-band .kpi.oranje b{color:#b2680d}
.stappen-balk{display:flex;gap:0;align-items:center;padding:12px 18px}
.stappen-balk .stap{display:flex;gap:8px;align-items:center;color:var(--muted);font-weight:500;flex:1}
.stappen-balk .stap>span{display:flex;flex-direction:column;line-height:1.2}.stappen-balk .stap small{font-size:11px;color:var(--muted);font-weight:500}
.stappen-balk .stap i{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);font-size:11px;font-style:normal;font-weight:700;flex:none}
.stappen-balk .stap.cur{color:var(--ink);font-weight:600}.stappen-balk .stap.cur i{background:var(--ink);color:var(--card);border-color:var(--ink)}
.stappen-balk .stap.klaar i{background:#17984b;color:#fff;border-color:#17984b}
.stappen-balk .stap::after{content:"";flex:1;height:1px;background:var(--line);margin:0 14px}.stappen-balk .stap:last-child::after{display:none}
dl.feiten{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin:0}
dl.feiten dt{font-size:12.5px;font-weight:600;color:var(--muted)}dl.feiten dd{margin:0;padding-bottom:6px;border-bottom:1px solid var(--line)}
dl.feiten dt{grid-column:auto}dl.feiten dt + dd{grid-column:auto}
.loc-code{display:inline-block;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;border:1px solid var(--line);border-radius:6px;padding:0 7px;background:var(--bg);color:var(--ink);white-space:nowrap;text-decoration:none}
.tl-lijst{display:flex;flex-direction:column;gap:10px}
.tl-lijst .tli{display:flex;gap:10px;align-items:flex-start}
.tl-lijst .tli i{flex:none;width:9px;height:9px;border-radius:50%;margin-top:6px;background:var(--line)}
.tl-lijst .tli i.blauw{background:#2a78d6}.tl-lijst .tli i.rood{background:#d03b3b}
.wz-bronnen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 14px; }
.wz-bron { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wz-bron b { font-size: 14px; }
.wz-bron .cell-sub { line-height: 1.45; }
.wz-tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.wz-tabel th { text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.wz-tabel td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.wz-tabel tr:last-child td { border-bottom: 0; }
.wz-tabel th.num, .wz-tabel td.num { text-align: right; font-variant-numeric: tabular-nums; }
.wz-tabel td.acties { white-space: nowrap; }
.wz-tabel td.acties .chip { margin-right: 8px; }
.wz-tabel .wz-bronregel { margin-top: 6px; }
.wz-tabel .wz-form { margin-bottom: 4px; }
.wz-tabel tr.open td { background: color-mix(in srgb, var(--data) 5%, var(--card)); }
.wz-tabel .cel-artikel { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wz-tabel .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.wz-best { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wz-best + .wz-best { margin-top: 4px; }
.wz-best.cross .loc-code { background: color-mix(in srgb, var(--data) 14%, var(--card)); border-color: var(--data); }
.wz-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wz-form input[type=text], .wz-form input[type=number], .wz-form input[type=date] { height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font: inherit; font-size: 13px; color: var(--ink); }
.wz-form input[name=plek] { width: 108px; text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; letter-spacing: 0.02em; }
.wz-form input[name=aantal] { width: 68px; text-align: right; }
.wz-form input[name=partij] { width: 130px; }
.wz-form input[name=reden] { min-width: 160px; }
.wz-lade td { background: var(--bg); padding: 14px 16px 16px; }
.wz-lade-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.wz-best-form { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.wz-best-form:last-of-type { border-bottom: 0; }
.wz-best-form .cell-sub { flex: 1; min-width: 140px; }
.wz-redenen { margin: 0; padding: 4px 16px 10px 34px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.45; }
.wz-na { margin: 0; padding: 4px 16px 14px; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.wz-na b { color: var(--ink); display: block; }
@media (max-width: 1100px) { .wz-lade-grid { grid-template-columns: 1fr; } }
#wz-waarom, #wz-na { height: 100%; box-sizing: border-box; }
.av-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.av-kpi { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.av-kpi b { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.av-kpi .cell-sub { line-height: 1.4; }
.av-tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.av-tabel th { text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.av-tabel td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.av-tabel tr:last-child td { border-bottom: 0; }
.av-tabel th.num, .av-tabel td.num { text-align: right; font-variant-numeric: tabular-nums; }
.av-tabel .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.av-tabel td.acties { white-space: nowrap; }
.av-tabel .num.laag { color: var(--neg); font-weight: 600; }
.av-form { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin-right: 6px; }
.av-form input[type=number], .av-form input[type=text] { height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font: inherit; font-size: 13px; color: var(--ink); }
.av-form input[name=aantal] { width: 66px; text-align: right; }
.av-form input[name=wie] { width: 110px; }
.av-uitleg { margin: 0; padding: 4px 16px 14px; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.av-uitleg b { color: var(--ink); display: block; }
@media (max-width: 1100px) { .av-kpis { grid-template-columns: repeat(2, 1fr); } }
.scan-loc .scan-partij { display: block; font-size: 13px; opacity: 0.92; margin-top: 8px; letter-spacing: 0; }
.scan-loc .scan-partij b { font-size: 15px; font-weight: 650; letter-spacing: 0; display: inline; }
.scan-taak { text-align: left; }
.scan-taak b { display: block; }
.tl-inp { width: 76px; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font: inherit; font-size: 14px; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.tl-tabel td { vertical-align: middle; }
#tl-nieuw .ov-velden { gap: 10px; padding-top: 4px; }
.pg-wrap { padding: 12px; overflow: auto; }
.pg-kaart { width: 100%; height: auto; display: block; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.pg-vloer { fill: url(#pg-svg-raster); }
.pg-el rect { stroke: var(--ink); stroke-width: 3; fill: color-mix(in srgb, var(--ink) 8%, var(--card)); }
.pg-el.pg-muur rect { fill: var(--ink); stroke: none; }
.pg-el.pg-deur rect { fill: color-mix(in srgb, var(--data) 25%, var(--card)); stroke: var(--data); stroke-dasharray: 20 10; }
.pg-el.pg-pakstation rect { fill: color-mix(in srgb, var(--data) 18%, var(--card)); stroke: var(--data); }
.pg-el.pg-werkplek rect { fill: color-mix(in srgb, #b45309 14%, var(--card)); stroke: #b45309; }
.pg-el.pg-vast rect, .pg-el.pg-ontvangst rect, .pg-el.pg-retour rect, .pg-el.pg-uitgifte rect, .pg-el.pg-quarantaine rect { fill: color-mix(in srgb, var(--muted) 18%, var(--card)); stroke: var(--muted); stroke-dasharray: 12 8; }
.pg-vak rect { stroke: var(--card); stroke-width: 2; }
.pg-vak.pg-vrij rect { fill: color-mix(in srgb, var(--muted) 14%, var(--card)); }
.pg-vak.pg-bezet rect { fill: color-mix(in srgb, var(--muted) 38%, var(--card)); }
.pg-vak.pg-lauw rect { fill: #bfdbfe; }
.pg-vak.pg-warm rect { fill: #60a5fa; }
.pg-vak.pg-heet rect { fill: #1d4ed8; }
.pg-vak.pg-vast rect { fill: color-mix(in srgb, var(--muted) 24%, var(--card)); stroke-dasharray: 12 8; stroke: var(--muted); }
.pg-vak.pg-qua rect { fill: #fecaca; }
.pg-vak:hover rect { stroke: var(--data); stroke-width: 6; }
.pg-tekst { font-size: 34px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; fill: var(--ink); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.pg-tekst.klein { font-size: 26px; }
.pg-tekst.stop { fill: #fff; font-weight: 700; font-size: 40px; }
.pg-vak.pg-heet .pg-tekst, .pg-vak.pg-warm .pg-tekst { fill: #fff; }
.pg-el.pg-muur .pg-tekst { fill: var(--card); }
.pg-start circle { fill: var(--data); stroke: var(--card); stroke-width: 6; }
.pg-legenda { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.pg-legenda i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-left: 8px; }
.pg-legenda i.pg-heet { background: #1d4ed8; } .pg-legenda i.pg-lauw { background: #bfdbfe; } .pg-legenda i.pg-bezet { background: color-mix(in srgb, var(--muted) 38%, var(--card)); }
.pg-legenda i.pg-vrij { background: color-mix(in srgb, var(--muted) 14%, var(--card)); } .pg-legenda i.pg-vast { border: 1px dashed var(--muted); }
.pg-legenda i.pg-padleg { background: var(--data); height: 4px; border-radius: 2px; width: 22px; } .pg-legenda i.pg-oudleg { background: var(--muted); height: 0; border-top: 3px dashed var(--muted); width: 22px; }
.pg-pad { fill: none; stroke: var(--data); stroke-width: 12; stroke-linejoin: round; stroke-linecap: round; opacity: 0.9; }
.pg-oudpad { fill: none; stroke: var(--muted); stroke-width: 8; stroke-dasharray: 24 18; opacity: 0.7; }
.pg-stop circle { fill: var(--data); stroke: var(--card); stroke-width: 6; }
.pg-werk { display: grid; grid-template-columns: 150px 1fr; }
.pg-werkset { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-right: 1px solid var(--line); }
.pg-werkset button { text-align: left; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.pg-werkset button.aan { background: var(--ink); color: var(--card); border-color: var(--ink); }
#pg-canvas { cursor: crosshair; user-select: none; }
.pg-stelling .pg-st-rand { fill: none; stroke: var(--ink); stroke-width: 4; }
.pg-stelling .pg-vakje { stroke: var(--card); stroke-width: 2; }
.pg-stelling .pg-vakje.pg-pick { fill: #bfdbfe; } .pg-stelling .pg-vakje.pg-bulk { fill: #e5e7eb; } .pg-stelling .pg-vakje.pg-vrij { fill: #d1fae5; }
.pg-stelling.sel .pg-st-rand, .pg-el.sel rect, .pg-start.sel circle { stroke: var(--data); stroke-width: 8; }
.pg-pickzijde { stroke: var(--data); stroke-width: 8; }
@media (max-width: 1100px) { .pg-werk { grid-template-columns: 1fr; } .pg-werkset { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); } }
.zoekscan { display: flex; gap: 8px; }
.zoekscan input { flex: 1; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font: inherit; font-size: 14px; color: var(--ink); }
.scan .zoekscan { padding: 12px 16px; }
.vd-lijst { list-style: none; margin: 0; padding: 0; }
.vd-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.vd-item:last-child { border-bottom: 0; }
.vd-item > div { flex: 1; min-width: 0; }
.vd-item b { font-size: 13.5px; }
.vd-item.voorrang { background: color-mix(in srgb, var(--data) 6%, var(--card)); }
.vd-item.vd-rood b { color: var(--neg); }
.vd-item.vd-oranje b { color: var(--warn); }
.vd-zones { list-style: none; margin: 0; padding: 6px 16px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.vd-zones li { display: grid; grid-template-columns: 1fr 110px 44px; align-items: center; gap: 10px; }
.vd-zones i { display: block; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--muted) 20%, var(--card)); overflow: hidden; }
.vd-zones i b { display: block; height: 100%; background: var(--data); }
.vd-zones .num { text-align: right; font-variant-numeric: tabular-nums; }
.iz-waarde { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 12px 16px; }
.iz-cijfers { display: flex; flex-direction: column; gap: 12px; }
.iz-cijfers b { display: block; font-size: 20px; font-weight: 650; }
.iz-staven { display: flex; align-items: flex-end; gap: 10px; height: 120px; }
.iz-staaf { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.iz-staaf i { display: block; width: 100%; background: var(--data); border-radius: 4px 4px 0 0; min-height: 2px; }
.iz-staaf span { font-size: 11px; color: var(--muted); }
.in-stappen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; }
.in-stap { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: inherit; text-decoration: none; min-width: 0; }
.in-stap .in-nr { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.in-stap.klaar .in-nr { background: var(--pos); color: #fff; border-color: var(--pos); }
.in-drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 16px 16px; }
.in-keuze { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; }
.in-keuze:hover { border-color: var(--ink); }
@media (max-width: 1100px) { .in-stappen { grid-template-columns: repeat(2, 1fr); } .in-drie { grid-template-columns: 1fr; } .iz-waarde { grid-template-columns: 1fr; } }
.hs-lijst{display:flex;flex-direction:column;gap:10px}
.hs-tegel{display:flex;gap:14px;align-items:center;background:var(--card,#fff);border:1px solid var(--line);border-radius:12px;padding:12px 16px;color:inherit;text-decoration:none}
.hs-tegel:hover{border-color:var(--text,#151821)}
.hs-swatch{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:700;flex:none;overflow:hidden}
.hs-swatch img{max-width:40px;max-height:40px;background:#fff;border-radius:6px;padding:2px}
.hs-t{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.hs-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.hs-pijl{color:var(--muted);font-size:22px}
.hs-tabs{margin-bottom:14px}
.hs-tegelraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.hs-keuze{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:10px;padding:9px 10px;cursor:pointer;background:var(--card,#fff)}
.hs-keuze.aan{border-color:var(--text,#151821);box-shadow:0 0 0 1px var(--text,#151821)}
.hs-keuze input{position:absolute;opacity:0;width:0;height:0}
.hs-keuze b{font-size:13px}
.hs-keuze .cell-sub{font-size:11.5px;line-height:1.3}
.hs-past{color:var(--text,#151821)}
.hs-beelden{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.hs-beeldvak{border:1px dashed var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.radios{display:flex;flex-direction:column;gap:6px}
.radios label{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--card,#fff);cursor:pointer}
.radios label.aan{border-color:var(--text,#151821);background:var(--bg-soft,#f7f7f9)}
.radios input{margin-top:3px}
.radios span{display:flex;flex-direction:column;line-height:1.3}
.radios b{font-size:13px;font-weight:600}
.radios small{font-size:12px;color:var(--muted)}
.sj-verborgen{display:none}
.sj-editor{display:flex;flex-direction:column;gap:6px}
.sj-vak{border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-height:44px;font-size:13.5px;line-height:1.7;background:var(--card,#fff);outline:none}
.sj-vak:focus-within{border-color:var(--text,#151821)}
.sj-chip{display:inline-block;background:#eef2ff;color:#3730a3;border-radius:6px;padding:0 6px;font-size:12px;font-weight:600;line-height:1.5;margin:0 1px;white-space:nowrap;user-select:none}
.sj-chip.sj-code{background:#f1f2f5;color:#3a3f4b;font-family:ui-monospace,monospace;font-weight:500}
.sj-geval{border-left:3px solid #d5d8df;padding-left:10px;margin:6px 0}
.sj-geval-kop{font-size:12.5px;font-weight:600;color:#3a3f4b;display:flex;gap:6px;align-items:center;margin:4px 0;flex-wrap:wrap}
.sj-geval-veld{font:inherit;font-size:12px;max-width:55%;padding:1px 4px;border:1px solid var(--line);border-radius:6px;background:var(--card,#fff)}
.sj-geval-weg{margin-left:auto;font:inherit;font-size:11.5px;color:var(--muted);background:none;border:0;cursor:pointer}
.sj-geval-tekst{min-height:22px;padding:2px 0}
.sj-balk{display:flex;gap:6px}
.sj-swr{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line);cursor:pointer}.sj-swr:last-child{border-bottom:0}
.sj-swr input{margin-top:3px}.sj-swr span{display:flex;flex-direction:column;line-height:1.3}.sj-swr b{font-size:13px;font-weight:600}.sj-swr small{font-size:12px;color:var(--muted)}
.hs-kolchip{display:inline-flex;gap:6px;align-items:center;border:1px dashed #c4c8d0;border-radius:8px;padding:5px 10px;font-size:12.5px;color:var(--muted);cursor:pointer;background:var(--card,#fff)}
.hs-kolchip.aan{border-style:solid;border-color:var(--text,#151821);color:var(--text,#151821);font-weight:600}
.hs-kolchip.vast{cursor:default;opacity:.8}
.hs-kolchip input{margin:0}
.vz-twee { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; align-items: start; margin-bottom: 14px; }
.vz-twee.wijd { grid-template-columns: 1.4fr 1fr; }
.vz-twee > .card, .vz-twee > div > .card { margin-bottom: 0; }
.vz-twee > div { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1100px) { .vz-twee, .vz-twee.wijd { grid-template-columns: minmax(0, 1fr); } }
.vz-vvr { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.vz-vvr > div { display: flex; flex-direction: column; line-height: 1.25; }
.vz-vvr a { color: inherit; }
.vz-logo { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #fff; font-weight: 800; font-size: 10.5px; letter-spacing: .02em; flex: none; }
.vz-klok { font-size: 15px; font-variant-numeric: tabular-nums; }
.vz-live { display: inline-flex; align-items: center; gap: 6px; color: var(--pos); font-weight: 600; }
.vz-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pos) 18%, transparent); }
.vz-nueerst { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.vz-ne { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.vz-ne > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vz-ne b { font-size: 13.5px; }
.vz-ne form { margin: 0; }
.vz-ne-n { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--card); font-weight: 700; font-size: 11.5px; display: grid; place-items: center; }
.vz-filter select { height: 28px; font-size: 12.5px; }
.vz-scan { margin-left: auto; }
.vz-scan input { height: 28px; font-size: 12.5px; width: 240px; }
.vz-ttc { display: inline-flex; align-items: center; gap: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; border: 1px solid color-mix(in srgb, var(--data) 30%, var(--line)); background: color-mix(in srgb, var(--data) 8%, var(--card)); color: var(--data); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.vz-ttc::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .6; }
.vz-kaart { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }
.vz-kaart-l, .vz-kaart-r { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vz-kaart-l > .card, .vz-kaart-r > .card { margin-bottom: 0; }
@media (max-width: 1100px) { .vz-kaart { grid-template-columns: minmax(0, 1fr); } }
.vz-tt { display: flex; flex-direction: column; padding: 8px 18px 12px; }
.vz-tt-rij { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 8px 0; position: relative; }
.vz-tt-rij + .vz-tt-rij::before { content: ""; position: absolute; left: 5px; top: -14px; height: 22px; border-left: 2px solid var(--line); }
.vz-tt-rij i { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); margin-top: 5px; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--muted); }
.vz-tt-rij i.blauw { background: var(--data); box-shadow: 0 0 0 1px var(--data); }
.vz-tt-rij i.groen { background: var(--pos); box-shadow: 0 0 0 1px var(--pos); }
.vz-tt-rij i.rood { background: var(--neg); box-shadow: 0 0 0 1px var(--neg); }
.vz-docs { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding: 12px 18px; }
.vz-docs a { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; color: var(--ink); background: var(--card); }
.vz-stromen { display: flex; flex-direction: column; gap: 12px; }
.vz-stroom { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.vz-stroom.uit { opacity: .55; }
.vz-stroom-kop { display: flex; align-items: center; gap: 12px; }
.vz-stroom-kop > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.vz-stroom-kop a { color: inherit; }
.vz-stroom-kop b { font-size: 14.5px; }
.vz-keten { display: flex; flex-wrap: wrap; gap: 6px 0; align-items: stretch; }
.vz-keten.groot { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.vz-stap { display: flex; flex-direction: column; gap: 1px; border: 1.5px solid var(--line); border-radius: 9px; padding: 6px 10px; background: var(--card); min-width: 0; position: relative; margin-right: 22px; cursor: pointer; }
.vz-stap input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vz-stap::after { content: "›"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 16px; }
.vz-stap:last-child { margin-right: 0; }
.vz-stap:last-child::after { content: ""; }
.vz-stap b { font-size: 12.5px; white-space: nowrap; }
.vz-stap span { font-size: 11px; color: var(--muted); white-space: nowrap; }
.vz-stap i { position: absolute; top: -8px; right: -6px; font-style: normal; font-size: 11px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0 4px; line-height: 15px; }
.vz-stap.uit { border-style: dashed; color: var(--muted); }
.vz-stap.uit b { color: var(--muted); }
.vz-stap.afw { border-color: var(--data); box-shadow: inset 0 0 0 1px var(--data); }
.vz-stap.vast { cursor: default; }
.vz-stap:has(input:focus-visible) { outline: 2px solid var(--data); outline-offset: 2px; }
.vz-stroom-voet { font-size: 12.5px; border-top: 1px solid var(--line); padding-top: 8px; }
.vz-modlijst { display: flex; flex-direction: column; padding: 4px 18px 8px; }
.vz-modrij { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.vz-modrij:last-child { border-bottom: 0; }
.vz-modrij > div { display: flex; flex-direction: column; }
.lijstje i.uit { background: var(--muted); }
.vz-werk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.vz-vragen { display: flex; flex-direction: column; }
.vz-groep { grid-column: 1 / -1; margin: 10px 0 0; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--sub); }
.ov-veld.vz-anders > label { color: var(--data); }
.ov-eenheid { display: inline-flex; align-items: center; gap: 6px; }
.vv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.vv{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-height:170px;min-width:0}
.vv.uit{background:var(--wash)}
.vv.uit .vv-body{color:var(--muted)}
.vv.nieuw{border-style:dashed}
.vv-kop{display:flex;align-items:center;gap:10px;min-width:0}
.vv-kop>div{flex:1;display:flex;flex-direction:column;min-width:0}
.vv-kop b{font-size:14.5px}
.vv-kop .cell-sub,.vv-body span{overflow:hidden;text-overflow:ellipsis}
.vv-body{display:flex;flex-direction:column;gap:3px;color:var(--ink);font-size:12.5px;flex:1}
.vv-body span:empty{display:none}
.vv-voet{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.vv-voet form{display:inline}
.vz-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 14px}
.vz-tabs a{padding:7px 12px;border-radius:8px;border:1px solid var(--line);font-size:13px;text-decoration:none;color:var(--ink);background:#fff}
.vz-tabs a.cur{background:var(--ink);color:#fff;border-color:var(--ink)}
.vz-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;padding:14px 18px}
.vz-form.een{grid-template-columns:minmax(0,1fr)}
.vz-veld{display:flex;flex-direction:column;gap:4px;min-width:0}
.vz-veld.breed{grid-column:1/-1}
.vz-lbl{font-size:12.5px;font-weight:600}
.vz-veld .ov-inp,.vz-veld select.ov-inp{width:100%;max-width:100%}
.vz-dagen{display:flex;gap:8px;flex-wrap:wrap}
.vz-dagen label{display:inline-flex;gap:5px;align-items:center;font-size:13px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.vz-formvoet{display:flex;gap:10px;align-items:center;padding:12px 18px;border-top:1px solid var(--line)}
.vz-uitleg{margin:0;padding:6px 18px 14px 34px;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.vz-uitleg li{padding-left:2px}
.vz-kaartkop{display:flex;align-items:center;gap:12px}
.vz-kaartkop .vz-logo{width:44px;height:44px;font-size:14px;border-radius:11px}
.vz-log{display:flex;flex-direction:column}
.vz-log>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:9px 18px;border-top:1px solid var(--line);font-size:13px}
.vz-log>div:first-child{border-top:0}
.vz-log .bad{color:var(--neg)}
@media (max-width:760px){.vz-form{grid-template-columns:minmax(0,1fr)}.vz-log>div{grid-template-columns:minmax(0,1fr)}}
.vz-logo.klein{width:24px;height:24px;font-size:9px;border-radius:6px}
.vz-wizard{display:flex;align-items:center;gap:12px;padding:14px 18px;margin-bottom:14px}
.vz-wstap{display:flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none;color:var(--muted)}
.vz-wstap i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;background:#fff;flex:none}
.vz-wstap b{font-weight:600}
.vz-wstap.klaar i{background:var(--pos);border-color:var(--pos)}.vz-wstap.klaar i::after{content:"✓";color:#fff;font-size:10px;font-weight:700}.vz-wstap.klaar b{color:var(--pos)}
.vz-wstap.nu i{border-color:var(--ink);border-width:5px}.vz-wstap.nu b{color:var(--ink)}
.vz-wlijn{flex:1;height:1px;background:var(--line)}
.vz-checks{display:flex;flex-direction:column;padding:4px 18px}
.vz-checks>div{display:flex;align-items:center;gap:12px;min-height:40px;font-size:13.5px;border-top:1px solid var(--line)}
.vz-checks>div:first-child{border-top:0}
.vz-checks i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);flex:none;display:grid;place-items:center;background:#fff}
.vz-checks>div.ok i{background:var(--pos);border-color:var(--pos)}.vz-checks>div.ok i::after{content:"✓";color:#fff;font-size:10px;font-weight:700}
.vz-checks>div.open span{color:var(--muted)}
.vz-afzenders{display:flex;flex-direction:column;padding:8px 18px 12px;gap:8px}
.vz-afz{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1.5px solid var(--line);border-radius:10px;cursor:pointer;background:#fff}
.vz-afz.cur{border-color:var(--ink)}
.vz-afz-t{display:flex;flex-direction:column;min-width:0}.vz-afz-t b{font-size:13.5px}
.vz-stand{display:flex;gap:12px;align-items:center;min-height:36px;font-size:13px;flex-wrap:wrap}
.vz-chipbalk .chip.cur{background:var(--ink);color:#fff}
tr.dim td{color:var(--muted)}
tr.gekozen td{background:color-mix(in srgb, var(--data) 7%, transparent)}
.vz-chipbalk{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.vz-chipbalk a{display:inline-flex;gap:6px;align-items:center;padding:6px 11px;border:1px solid var(--line);border-radius:999px;font-size:13px;text-decoration:none;color:var(--ink);background:#fff}
.vz-chipbalk a span{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}
.vz-chipbalk a.cur{background:var(--ink);color:#fff;border-color:var(--ink)}
.vz-chipbalk a.cur span{color:#cfd3dc}
.vz-chipbalk .vz-live{margin-left:auto}
.vz-bronnen td{vertical-align:middle}
.exp-scan-vorm{display:flex;gap:8px}
.exp-scan-vorm .scan-inp{flex:1}
.exp-scan-vorm .btn-primary{height:48px;padding:0 18px}
.exp-laad{display:flex;flex-direction:column;gap:8px}
.exp-laad>div{display:flex;gap:10px;align-items:center;border:2px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--card)}
.exp-laad>div.ok{border-color:#17984b}
.exp-laad>div>div{display:flex;flex-direction:column;min-width:0}
.exp-laad>div span{font-size:12px;color:var(--sub)}
.exp-laad .vk{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--axis);font-size:12px;font-weight:700;flex:none}
.exp-laad .vk.ok{background:#17984b;border-color:#17984b;color:#fff}
.volg{max-width:640px;margin:0 auto;padding:24px 16px 40px;display:flex;flex-direction:column;gap:14px;color:var(--ink)}
.volg-kop{display:flex;flex-direction:column;gap:4px}
.volg-kop small{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.volg-kop h1{margin:0;font-size:24px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.volg-kaart{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.volg-kaart h2{margin:0;font-size:14px}
.volg-stappen{display:flex;gap:0;align-items:flex-start}
.volg-stap{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:12px;color:var(--muted);position:relative}
.volg-stap i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);background:#fff;display:block}
.volg-stap.klaar i{background:#17984b;border-color:#17984b}
.volg-stap.nu i{border-color:var(--ink);background:var(--ink)}
.volg-stap.klaar,.volg-stap.nu{color:var(--ink);font-weight:600}
.volg-feit{display:grid;grid-template-columns:130px minmax(0,1fr);gap:4px 12px;font-size:13.5px}
.volg-feit b{font-weight:600}
.volg-scans{display:flex;flex-direction:column;gap:6px;font-size:13px}
.volg-scans>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;padding:6px 0;border-top:1px solid var(--line)}
.volg-scans>div:first-child{border-top:0}
.volg-scans small{color:var(--muted)}
.volg-voet{font-size:12px;color:var(--muted);text-align:center}
@media (max-width:520px){.volg-feit{grid-template-columns:minmax(0,1fr)}.volg-scans>div{grid-template-columns:minmax(0,1fr)}}
.rg-lijst{display:flex;flex-direction:column}
.rg-regel{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 18px;border-top:1px solid var(--line)}
.rg-regel:first-child{border-top:0}
.rg-regel.uit{opacity:.55}
.rg-regel.laatste{background:var(--wash)}
.rg-n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:700}
.rg-k{display:flex;flex-direction:column;gap:6px;min-width:0}
.rg-als,.rg-dan{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:13.5px}
.rg-als small,.rg-dan small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;width:28px}
.rg-cond{padding:3px 8px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12.5px}
.rg-a{display:flex;gap:4px;align-items:center}
.rg-a form{display:inline}
.ghost.small.cur{background:var(--ink);color:#fff;border-color:var(--ink)}
.afr-sub{display:flex;flex-direction:column;gap:8px;margin:-4px 0 10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--wash)}
.afr-sub-lbl{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.afr-dagen{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:6px}
.afr-dag{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 6px;border:1.5px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;position:relative;text-align:center}
.afr-dag input{position:absolute;opacity:0}
.afr-dag small{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.afr-dag b{font-size:13.5px}
.afr-dag span{font-size:11px;color:var(--sub);min-height:14px}
.afr-dag:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.afr-tijdvakken{display:flex;flex-wrap:wrap;gap:6px}
.afr-tv{display:inline-flex;align-items:center;padding:7px 12px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:13px;cursor:pointer;position:relative}
.afr-tv input{position:absolute;opacity:0}
.afr-tv:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.afr-sub input[type=text]{border:1px solid var(--line);border-radius:10px;height:42px;padding:0 12px;font:inherit;background:#fff;width:100%}
.kaartje{position:relative;overflow:hidden;border-radius:12px;background:#e9edf0;min-height:220px;width:100%}
.kaart-tegel{position:absolute;width:256px;height:256px;pointer-events:none;user-select:none}
.kaart-pin{position:absolute;width:16px;height:16px;margin:-16px 0 0 -8px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#0056ff;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:pointer;z-index:2}
.kaart-pin.eigen{background:#116329}
.kaart-pin.cur{background:#151821;width:20px;height:20px;margin:-20px 0 0 -10px;z-index:3}
.kaart-bron{position:absolute;right:6px;bottom:4px;font-size:10px;color:#3a3f4b;background:rgba(255,255,255,.75);padding:1px 5px;border-radius:4px;z-index:2}
.ap-voorbeeld{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px;padding:0 18px 14px}
.ap-lijst{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto}
.ap-rij{display:flex;flex-direction:column;gap:1px;padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font-size:13px}
.ap-rij span{color:var(--sub);font-size:12.5px}
.ap-rij small{color:var(--muted);font-size:11.5px}
.ap-rij.cur{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.ap-rij.eigen{border-style:dashed}
.ap-leeg{padding:12px;color:var(--sub);font-size:13px}
.afr-punt-zoek{display:flex;gap:8px}
.afr-punt-zoek input{border:1px solid var(--line);border-radius:10px;height:42px;padding:0 12px;font:inherit;background:#fff;flex:1;min-width:0}
.afr-knop-klein{height:42px;padding:0 14px;border-radius:10px;border:1px solid var(--ink);background:var(--ink);color:#fff;font:inherit;cursor:pointer;white-space:nowrap}
.afr-punt .ap-voorbeeld{padding:0;grid-template-columns:minmax(0,1fr)}
.afr-punt .kaartje{height:220px}
.afr-gekozen{font-size:13px;padding:8px 10px;border-radius:8px;background:#e8f5ec;color:#116329}
@media (max-width:760px){.ap-voorbeeld{grid-template-columns:minmax(0,1fr)}}
.rt-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr) minmax(0,.9fr);gap:14px;align-items:start}
.rt-mid{display:flex;flex-direction:column;gap:14px;min-width:0}
.rt-los{display:flex;flex-direction:column;gap:3px;padding:10px 18px;border-top:1px solid var(--line);font-size:13.5px}
.rt-los:first-of-type{border-top:0}
.rt-los-r{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.rt-los-r em{font-style:normal;font-size:12px;color:var(--sub)}
.rt-los-form{display:flex;gap:6px;align-items:center;margin-top:4px}
.rt-los-form .ov-inp{flex:1;min-width:0}
.rt-rit{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rt-rit.onderweg{border-color:#0056ff}
.rt-rit.leeg{border-style:dashed}
.rt-rit.gesloten{opacity:.7}
.rt-rit-kop{display:flex;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.rt-rit-kop>div{flex:1;display:flex;flex-direction:column;min-width:0}
.rt-rit-kop b{font-size:14.5px}
.rt-stop{display:grid;grid-template-columns:26px 74px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 16px;border-top:1px solid var(--line);font-size:13px}
.rt-stop:first-of-type{border-top:0}
.rt-stop.klaar{opacity:.6}
.rt-stop.hier{background:#eef3ff}
.rt-stop.depot{color:var(--muted)}
.rt-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-size:11px;font-weight:700}
.rt-stop.depot .rt-n{background:var(--muted)}
.rt-tijd{font-variant-numeric:tabular-nums;font-weight:600}
.rt-wie{display:flex;flex-direction:column;min-width:0}
.rt-wie .cell-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-chips{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.rt-leeg{padding:16px;color:var(--sub);font-size:13px;text-align:center}
.rt-cap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:10px 16px;border-top:1px solid var(--line);background:var(--wash)}
.rt-cap>div{display:flex;flex-direction:column;gap:3px;font-size:12px;min-width:0}
.rt-cap small{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600}
.rt-cap .ov-balk{width:100%}
.rk-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
#rk-stops tr.klaar td{opacity:.65}
#rk-stops tr.hier td{background:#eef3ff}
.kaart-route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.kaart-route polyline{fill:none;stroke:#0056ff;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;opacity:.85}
@media (max-width:1100px){.rt-grid{grid-template-columns:minmax(0,1fr)}}
.rk-acties{display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:110px}
.rk-acties form{display:block}
.ra .ca-knop2{display:flex;gap:8px}
.ra .ca-knop2 .btn-primary,.ra .ca-knop2 .ghost{flex:1;height:46px;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.ca-lijst{display:flex;flex-direction:column;gap:6px}
.ca-rij{display:flex;gap:10px;align-items:center;padding:9px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);text-decoration:none;color:inherit}
.ca-rij>div{flex:1;display:flex;flex-direction:column;min-width:0}
.ca-rij b{font-size:14.5px}.ca-rij span{font-size:12px;color:var(--sub)}.ca-rij em{font-style:normal;font-size:13px;font-variant-numeric:tabular-nums;color:var(--sub)}
.ca-rij.klaar{opacity:.6}.ca-rij.hier{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.ca-rij.mislukt{border-color:#e8a13c}
.ca-rij .vk{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--axis);font-size:12px;font-weight:700;flex:none}
.ca-rij .vk.ok{background:#17984b;border-color:#17984b;color:#fff}.ca-rij .vk.nu{background:var(--ink);border-color:var(--ink);color:#fff}
.ca-bijz{display:flex;gap:6px;flex-wrap:wrap}
.ca-colli{display:flex;flex-direction:column;gap:6px}
.ca-collo{display:flex;gap:10px;align-items:center;padding:8px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--card)}
.ca-collo .vk{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--axis)}
.ra-hand{border:1.5px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.ra-hand canvas{width:100%;height:150px;display:block;touch-action:none}
.ra-hand-voet{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.ra-foto{display:flex;align-items:center;justify-content:center;height:48px;border:1.5px dashed var(--line);border-radius:12px;background:var(--card);cursor:pointer;font-size:15px}
.ra-foto input[type=file]{display:none}
.ra-foto.gedaan{border-style:solid;border-color:#17984b}
.ca-dag{display:flex;flex-direction:column;gap:10px}
.ca-dag label{display:flex;flex-direction:column;gap:4px;font-size:13px}
.ra-off{background:#fff4e0;color:#8a5a00;border-radius:10px;padding:8px 12px;font-size:13px}
.kaart-pin.bus{background:#e8a13c;border-radius:50%;transform:none;width:18px;height:18px;margin:-9px 0 0 -9px;box-shadow:0 0 0 4px rgba(232,161,60,.3)}
.volg-wensen{display:flex;gap:6px;flex-wrap:wrap}
.volg-wensen .afr-tv{cursor:pointer;font:inherit}
.volg-wensen a.afr-tv{text-decoration:none;color:inherit}
#retourportaal .volg-kaart h2{margin:6px 0 0}
#retourportaal select.ov-inp{height:42px}
.vp-doos input.ghost, .vp-nieuw input.ghost, .in-gebied input.ghost, .vp-doos select.ghost, .vp-nieuw select.ghost, .in-gebied select.ghost { min-width: 0; width: 100%; box-sizing: border-box; }
.vp-doos input.ghost.num, .vp-nieuw input.ghost.num { width: 5.5em; }
.vp-maat { white-space: nowrap; }
.vp-maat input.ghost { width: 3.6em; display: inline-block; text-align: right; }
#vp-dozen th, #in-gebieden th { white-space: nowrap; }
#vp-dozen td.acties, #in-gebieden td.acties, #vp-printers td.acties { white-space: nowrap; }
tr.uit td { opacity: 0.55; }
tr.uit td.acties { opacity: 1; }
.vp-links { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 0 16px 14px; font-size: 13px; }
#vp-dozen td:nth-child(1) input.ghost { min-width: 7em; }
#vp-dozen td:nth-child(2) select.ghost { min-width: 7.5em; }
#vp-dozen td:nth-child(8) input.ghost { min-width: 8em; }
#in-gebieden td:nth-child(2) input.ghost { min-width: 9em; }
#in-gebieden td:nth-child(3) input.ghost { min-width: 5.5em; }
#in-gebieden td:nth-child(5) input.ghost { min-width: 9em; }
#in-gebieden td:nth-child(7) input.ghost { min-width: 8em; }
#in-gebieden td:nth-child(8) input.ghost { min-width: 7em; }
#in-gebieden td:nth-child(9) input.ghost { min-width: 8em; }
.vp-schakelrij { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.afr-douane { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: var(--wash2); font-size: 13px; color: var(--sub); }
.twee-kol.wijd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .twee-kol.wijd { grid-template-columns: minmax(0, 1fr); } }
.ca-foto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ca-foto .ra-foto { height: 56px; }
.ca-foto-vak { display: flex; align-items: center; justify-content: center; min-height: 56px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--wash2); }
.ca-foto-vak img { max-width: 100%; max-height: 140px; display: block; }
.inz-staven { height: 150px; align-items: flex-end; }
.inz-staven .staaf { min-width: 6px; }
.inz-as { display: flex; justify-content: space-between; padding: 0 14px 12px; font-size: 11.5px; color: var(--muted); }
.fc-slecht td:first-child { border-left: 3px solid var(--warn, #b2680d); }
td.bad { color: #b42318; font-weight: 600; }
td.ok { color: #116329; font-weight: 600; }
.twee-kol.wijd.inz-fc { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.inz-staven { justify-content: flex-start; gap: 6px; }
.inz-staven .staaf { max-width: 48px; min-height: 2px; }
.ka-lijst { padding: 4px 0; }
.ka-rij { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.ka-rij:last-child { border-bottom: 0; }
.ka-rij > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ka-rij b { font-size: 14px; }
.ka-rechts { align-items: flex-end; text-align: right; flex: none; }
.ne-rij{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.ne-rij:last-child{border-bottom:0}
.ne-n{width:22px;height:22px;border-radius:50%;background:var(--ink,#16181f);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.soorten{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;padding:14px 18px}
.soort{border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:4px;cursor:pointer;background:var(--card,#fff)}
.soort.cur{border-color:var(--ink,#16181f);box-shadow:inset 0 0 0 1px var(--ink,#16181f)}
.soort b{font-size:13.5px}.soort span{font-size:12px;color:var(--muted)}
.sw-label{display:inline-flex;align-items:center;cursor:pointer}
.sw-label input{appearance:none;width:34px;height:20px;border-radius:999px;background:#d5d8df;position:relative;cursor:pointer;margin:0}
.sw-label input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .12s}
.sw-label input:checked{background:#17984b}.sw-label input:checked::after{left:16px}
.sw-label input:focus-visible{outline:2px solid var(--accent,#2a78d6);outline-offset:2px}
.vh-checkrij{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.vh-checkrij:last-child{border-bottom:0}.vh-checkrij .cell-sub{font-size:12px}
.vh-vink{width:18px;height:18px;border:1.5px solid var(--axis);border-radius:5px;display:inline-grid;place-items:center;font-size:12px;color:#fff;flex:none;margin-top:1px;background:var(--card,#fff)}
.vh-vink.aan{background:#17984b;border-color:#17984b}
.optel{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--line);font-size:13px}
.optel:first-child{border-top:0}.optel.groot{font-weight:700;font-size:15px}
.hand-vak { border: 1px dashed var(--line); border-radius: 8px; background: #fff; touch-action: none; width: 100%; height: 140px; display: block; cursor: crosshair; }
.hand-knoppen { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); }
.afrekening .rij { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13.5px; }
.afrekening .rij.som { font-weight: 650; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; }
.vh-scan { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vh-keuzes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.vh-keuze { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 13.5px; background: var(--card, #fff); }
.vh-keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vh-keuze.cur { border-color: var(--ink, #16191c); box-shadow: 0 0 0 1px var(--ink, #16191c) inset; }
.vh-keuze:focus-within { outline: 2px solid var(--focus, #5b4bd6); outline-offset: 1px; }
.vh-keuze-bedrag { font-weight: 650; margin-top: 2px; }
.huur-periode { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; padding: 14px; margin-bottom: 14px; }
.huur-groepen { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.huur-groepen .chip { text-decoration: none; }
.huur-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: stretch; }
.huur-kaart { display: flex; flex-direction: column; overflow: hidden; }
.huur-foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--wash); display: flex; align-items: center; justify-content: center; }
.huur-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.huur-foto-leeg { font-size: 34px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.huur-groep { position: absolute; left: 10px; top: 10px; }
.huur-body { padding: 12px 16px 4px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.huur-naam { font-size: 16px; margin: 0; }
.huur-oms { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.huur-prijs { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.huur-prijs strong { font-size: 18px; }
.huur-feiten { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.huur-actie { padding: 10px 16px 14px; border-top: 1px solid var(--axis); display: flex; flex-direction: column; gap: 8px; }
.huur-reserveer { display: flex; flex-direction: column; gap: 8px; }
.huur-reserveer input:not([type=checkbox]) { height: 34px; }
.huur-vw { display: flex; gap: 6px; align-items: center; font-size: 12.5px; }
.huur-alt { text-align: center; }
.huur-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 18px; }
.huur-info .card-title { display: block; margin-bottom: 4px; }
.huur-lijst { margin: 0 0 4px; padding-left: 18px; font-size: 13.5px; }
.mh-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.mh-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; }
.mh-kpi.oranje { border-left: 3px solid var(--warn, #d98c1f); }
.mh-kpi-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.mh-kpi-waarde { font-size: 20px; }
.mh-kop { font-size: 15px; margin: 0 0 10px; }
.mh-order { margin-bottom: 14px; }
.mh-order .card-head { flex-wrap: wrap; gap: 8px; }
.mh-order-geld { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.mh-voet { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--axis); }
.mh-docs { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.mh-schade { margin-left: auto; }
.mh-schade summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.mh-schade summary::-webkit-details-marker { display: none; }
.mh-schade-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; min-width: 280px; }
.vh-typefoto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; background: var(--wash); }
.vh-typefoto-leeg { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.pb-legenda { display: flex; gap: 14px; flex-wrap: wrap; padding: 8px 14px 12px; font-size: 12px; color: var(--sub); align-items: center; }
.pb-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.pb-legenda i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.cap-tabel { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
.cap-tabel th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cap-tabel th:first-child, .cap-tabel td:first-child { text-align: left; padding-left: 14px; min-width: 200px; position: sticky; left: 0; background: var(--card); }
.cap-tabel th.weekend { background: var(--wash); }
.cap-tabel td { padding: 4px 3px; border-bottom: 1px solid var(--grid); text-align: center; }
.cap-cel { display: block; border-radius: 6px; padding: 5px 2px; font-variant-numeric: tabular-nums; text-decoration: none; color: var(--ink); font-weight: 600; min-width: 44px; }
.cap-cel small { font-weight: 400; color: var(--sub); }
.cap-cel.ok { background: var(--chip-green-bg); color: var(--chip-green-ink); }
.cap-cel.krap { background: var(--chip-orange-bg); color: var(--chip-orange-ink); }
.cap-cel.vol { background: var(--chip-red-bg); color: var(--chip-red-ink); }
.cap-cel.leeg { background: var(--wash); color: var(--muted); font-weight: 400; }
.cap-cel:hover { outline: 2px solid var(--data); outline-offset: -2px; }
.cap-voorstel { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--grid); flex-wrap: wrap; }
.cap-voorstel:last-child { border-bottom: 0; }
.cap-voorstel .t { flex: 1; min-width: 240px; }
.cap-voorstel .t strong { display: block; font-size: 13.5px; }
.cap-voorstel form { display: inline; }
.wo-punt { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--grid); font-size: 13.5px; }
.wo-punt:last-of-type { border-bottom: 0; }
.wo-punt input[type=checkbox] { width: 18px; height: 18px; }
.wo-punt.gedaan span { color: var(--muted); text-decoration: line-through; }
.wo-fotos { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 18px 12px; }
.wo-fotos a { position: relative; display: block; }
.wo-fotos img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; display: block; background: var(--wash); }
.wo-fotos .tag { position: absolute; left: 4px; bottom: 4px; font-size: 10px; background: rgba(0,0,0,.6); color: #fff; border-radius: 4px; padding: 1px 5px; }
.wo-kv { display: grid; grid-template-columns: 110px 1fr; gap: 7px 12px; padding: 6px 18px 14px; font-size: 13.5px; }
.wo-kv span:nth-child(odd) { color: var(--muted); }
.wo-som { display: flex; justify-content: space-between; padding: 6px 18px; font-size: 13.5px; }
.wo-som.totaal { font-weight: 700; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; }
.va-tel { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.va-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.va-kop h1 { font-size: 20px; margin: 0; }
.va-rij { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--grid); text-decoration: none; color: inherit; }
.va-rij:last-child { border-bottom: 0; }
.va-rij strong { display: block; font-size: 14px; }
.va-rij .cell-sub { display: block; }
.va-knop { width: 100%; height: 48px; font-size: 15px; border-radius: 10px; }
.va-scan { display: flex; gap: 8px; padding: 12px 14px; }
.va-scan input { flex: 1; height: 44px; font-size: 16px; }
.va-veld { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; }
.va-veld input, .va-veld select { height: 44px; font-size: 16px; }
.va-acties { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.kaartje { width: 100%; height: auto; max-height: 240px; display: block; font-size: 3.2px; }
.kaartje-vlak { fill: var(--wash); stroke: var(--line); stroke-width: .4; }
.kaartje-lijn { fill: none; stroke: var(--data); stroke-width: .6; stroke-dasharray: 1.5 1; }
.kaartje-speld circle { fill: var(--data); stroke: var(--card); stroke-width: .5; }
.kaartje-speld text { fill: var(--ink); }
.kaartje-speld.start circle { fill: var(--ink); }
.kaartje-speld.hier circle { fill: var(--chip-orange-dot); r: 3; }
.kaartje-speld.doel circle { fill: var(--chip-green-dot); }
.kaartje-speld.warn circle { fill: var(--chip-orange-dot); }
.kaartje-speld.bad circle { fill: var(--neg); }
.balk.ok i { background: var(--chip-green-dot); }
.balk.warn i { background: var(--chip-orange-dot); }
.balk.bad i { background: var(--neg); }
.graf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 190px; padding: 14px 18px 4px; align-items: end; }
.graf-kolom { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 4px; }
.graf-balken { display: flex; gap: 2px; align-items: flex-end; height: 100%; width: 100%; justify-content: center; }
.graf-balk { display: block; width: 40%; max-width: 22px; background: var(--data); border-radius: 3px 3px 0 0; min-height: 2px; }
.graf-balk.vorig { background: var(--chip-gray-dot); }
.graf-kolom.nu .graf-balk:not(.vorig) { background: var(--chip-green-dot); }
.graf-label { font-size: 11px; color: var(--muted); }
.kw-stappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 14px; text-align: left; }
.kw-stappen > div { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; font-size: 12px; color: var(--muted);
display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 6px; align-items: start; }
.kw-stappen > div.aan { border-color: var(--chip-blue-dot); color: var(--chip-blue-ink); background: var(--chip-blue-bg); }
.kw-stappen > div.klaar { color: var(--chip-green-ink); }
.sp-stappen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.sp-stap { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--card, #fff); font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: var(--sub); }
.sp-stap.aan { border-color: var(--accent, #2b6cb0); color: var(--ink, #111); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent, #2b6cb0); }
.aanmeld-stap[hidden] { display: none; }
.sp-tegel-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.sp-tegel-kv > div { padding: 12px 16px; min-width: 0; }
.sp-tegel-kv b { display: block; font-size: 18px; margin: 2px 0; }
.sp-tegel-kv .num { text-align: left; }
.sp-tegel-rij { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 13.5px; }
.sp-tegel-rij:last-of-type { border-bottom: 0; }
.sp-tegel-rij:hover { background: var(--wash2); }
.sp-tegel-tekst { flex: 1; min-width: 0; }
.sp-keuze { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.sp-keuze a { padding: 4px 10px; font-size: 12.5px; text-decoration: none; color: var(--sub); border-right: 1px solid var(--line); }
.sp-keuze a:last-child { border-right: 0; }
.sp-keuze a.aan { background: var(--wash2); color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .sp-tegel-kv { grid-template-columns: minmax(0, 1fr); } .sp-tegel-kv > div { border-bottom: 1px solid var(--line); } }
.rekt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.rekt.vijf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1360px) { .rekt { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rekt.vijf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .rekt, .rekt.vijf { grid-template-columns: minmax(0, 1fr); } }
.rk { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; min-width: 0; box-shadow: var(--shadow); }
.rk.let { border-color: var(--chip-orange-dot); }
.rk .r1 { display: flex; align-items: center; gap: 8px; height: 24px; }
.rk .r1 .rk-naam { font-weight: 650; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; min-width: 0; }
.rk .r1 a.rk-naam:hover { text-decoration: underline; }
.rk .r1 .via { margin-left: auto; flex: none; }
.rk .bk { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: #fff; font-size: 11px; font-weight: 700; flex: none; letter-spacing: .02em; }
.rk .naam { font-size: 12.5px; color: var(--sub); height: 20px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.rk .iban { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--sub); height: 20px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk .saldo { font-size: 22px; letter-spacing: -.01em; line-height: 30px; height: 30px; margin-top: 4px; white-space: nowrap; font-weight: 650; font-variant-numeric: tabular-nums; }
.rk .m { font-size: 12.5px; color: var(--sub); height: 20px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk .m.let { color: var(--warn); }
.rk a.m.onder { color: var(--ink); text-decoration: none; }
.rk a.m.onder:hover { text-decoration: underline; }
.rk .r4 { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; height: 30px; }
.via { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--chip-gray-bg); color: var(--chip-gray-ink); white-space: nowrap; }
.via.ponto { background: var(--chip-blue-bg); color: var(--chip-blue-ink); }
.via.eigen { background: var(--chip-green-bg); color: var(--chip-green-ink); }
.via.psp { background: var(--chip-blue-bg); color: var(--chip-blue-ink); }
.lt tr[data-aankomend] td { opacity: .62; }
.afl-nav { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sub); }
.afl-nav a[aria-disabled="true"] { pointer-events: none; opacity: .4; }
.afl-melding { display: flex; align-items: center; gap: 12px; }
.afl-melding form { margin-left: auto; }
.afl-kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 12px; font-size: 13px; }
.afl-kv > span { color: var(--muted); }
.afl-kv > div { min-width: 0; overflow-wrap: anywhere; }
.afl-kv .mono { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.afl-keuze { display: flex; flex-direction: column; gap: 8px; }
.afl-kand { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; min-height: 52px; background: var(--card); }
.afl-kand:hover { border-color: var(--axis); }
.afl-kand.aan { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.afl-kand:focus-visible { outline: 2px solid var(--data); outline-offset: 2px; }
.afl-kand .rad { width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--axis); flex: none; position: relative; }
.afl-kand .rad.aan { border-color: var(--ink); }
.afl-kand .rad.aan::after { content: ""; position: absolute; inset: 3px; border-radius: 999px; background: var(--ink); }
.afl-kand .tk { flex: 1; min-width: 0; position: relative; }
.afl-kand .tk b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 13.5px; }
.afl-kand .tk b .chip { margin-left: 6px; vertical-align: 1px; }
.afl-kand .tk small { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.afl-kand .n { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.afl-kand.best { align-items: flex-start; }
.afl-kand.best .rad { margin-top: 2px; }
.afl-ken { display: flex; flex-direction: column; margin-top: 8px; font-size: 12.5px; }
.afl-ken > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px; min-height: 24px; align-items: baseline; border-top: 1px solid var(--line-soft, var(--line)); padding: 3px 0; }
.afl-ken > div:first-child { border-top: 0; }
.afl-ken > div > span { color: var(--muted); white-space: nowrap; }
.afl-ken > div > b { font-weight: 500; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; font-size: 12.5px; }
.afl-ken > div.ok > span { color: var(--muted); }
.afl-ken > div.ok > b { color: var(--ink); }
.afl-ken > div.nee > span, .afl-ken > div.nee > b { color: var(--axis); }
.afl-ken > div.let > b { color: var(--warn-ink, #955104); }
.afl-kand .n.boven { align-self: flex-start; }
.afl-kand.zoek { cursor: default; }
.afl-kand.zoek input { width: 100%; }
.afl-uitslag { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(16,24,40,.12); z-index: 30; max-height: 280px; overflow: auto; }
.afl-uitslag > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; cursor: pointer; font-size: 13px; }
.afl-uitslag > div.act, .afl-uitslag > div:hover { background: var(--wash); }
.afl-uitslag .s { font-size: 12px; color: var(--muted); }
.afl-uitslag .n { white-space: nowrap; font-weight: 600; }
.afl-verdeel { display: flex; flex-direction: column; gap: 8px; }
.afl-deel { display: grid; grid-template-columns: minmax(0, 1fr) 112px 112px 24px; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 8px 8px 8px 12px; min-height: 50px; }
.afl-deel .tk { min-width: 0; }
.afl-deel .tk b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 13.5px; }
.afl-deel .tk small { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.afl-deel input.num { text-align: right; }
.afl-deel select { width: 100%; }
.afl-x { border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.afl-x:hover { color: var(--ink); background: var(--wash); }
.afl-som { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--sub); white-space: nowrap; }
.afl-som b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.afl-som .goed b { color: var(--pos); }
.afl-som .warn b { color: var(--warn); }
.afl-info { font-size: 12.5px; color: var(--sub); background: var(--wash2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; line-height: 1.5; }
.afl-info.let { background: var(--chip-orange-bg); border-color: transparent; color: var(--chip-orange-ink); }
.afl-bon { display: flex; flex-direction: column; gap: 2px; border: 1px dashed var(--axis); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.afl-bon em { font-style: normal; color: var(--muted); font-size: 12px; }
.afl-schakel { display: flex; align-items: center; gap: 10px; }
.afl-schakel .sl small { display: block; color: var(--muted); font-size: 12px; }
.afl-lijstje { display: flex; flex-direction: column; }
.afl-lijstje > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.afl-lijstje b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.afl-lijstje small { display: block; color: var(--muted); font-size: 12px; }
.lade-voet kbd { font: inherit; font-size: 11px; opacity: .7; margin-left: 6px; }
.lade-kopje .m { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); margin-left: 6px; }
.btn-primary kbd { color: inherit; background: rgba(255,255,255,.18); border-radius: 4px; padding: 0 5px; }
.rk .r1 .rk-naam { flex: 1; }
[data-lijst="bank"] .lt td .sub { white-space: nowrap; }
[data-lijst="bank"] .lt td.acties { width: 120px; }
.rondes { padding: 6px 18px 10px; display: flex; flex-direction: column; }
.rondes > div { display: grid; grid-template-columns: 56px 14px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.rondes > div:last-child { border-bottom: 0; }
.rondes .tijd { font-variant-numeric: tabular-nums; color: var(--sub); }
.rondes i { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.rondes i.ponto, .legenda i.ponto { background: var(--data); }
.rondes i.shopro, .legenda i.shopro { background: #5b4bd6; }
.rondes i.hand, .legenda i.hand { background: var(--btn-bg); }
.rondes i.straks { background: transparent; border: 1.5px solid var(--axis); }
.rondes .wie { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rondes .wie small { color: var(--muted); margin-left: 6px; }
.rondes .uitslag { white-space: nowrap; color: var(--sub); }
.rondes > div.straks { color: var(--muted); }
.legenda { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 18px 10px; font-size: 12px; color: var(--muted); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.budget { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 18px 14px; font-size: 12.5px; color: var(--sub); border-top: 1px solid var(--line); }
.budget .bar { position: relative; height: 8px; border-radius: 999px; background: var(--wash); overflow: hidden; }
.budget .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #5b4bd6; border-radius: 999px; }
.budget .bar i.res { left: auto; right: 0; background: repeating-linear-gradient(45deg, var(--axis) 0 3px, transparent 3px 6px); }
.aansl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.aansl > div { padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aansl > div + div { border-left: 1px solid var(--line); }
.aansl small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 650; }
.aansl b { font-size: 20px; font-weight: 650; letter-spacing: -.01em; }
.aansl b.goed { color: var(--pos); }
.aansl b.bad { color: var(--neg); }
.aansl em { font-style: normal; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bankkies { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 14px 18px 16px; }
.bankkeuze { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; text-decoration: none; color: inherit; min-width: 0; min-height: 48px; }
a.bankkeuze:hover { border-color: var(--ink); }
.bankkeuze .naam { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.bankkeuze small { color: var(--muted); font-size: 11.5px; white-space: nowrap; min-width: 0; }
.bankkeuze.uit small { white-space: normal; }
.bankkeuze.uit { opacity: .6; cursor: not-allowed; flex-wrap: wrap; }
.bankkeuze .bk { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: #fff; font-size: 11px; font-weight: 700; flex: none; }
.feit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.feit > div { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.feit small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 650; }
.feit span { font-weight: 600; font-size: 13.5px; }
.feit em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.punten { margin: 0; padding-left: 18px; color: var(--sub); font-size: 13.5px; line-height: 1.6; }
.klaarvak { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 34px 24px; max-width: 620px; margin: 0 auto; }
.klaarvak b { font-size: 18px; }
.klaarvak p { margin: 0 0 8px; color: var(--sub); font-size: 13.5px; line-height: 1.5; max-width: 480px; }
.nakijk-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .nakijk-raster { grid-template-columns: minmax(0, 1fr); } }
.nakijk-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 18px; border-bottom: 1px solid var(--line); font-size: 13px; }
.nakijk-rij:last-of-type { border-bottom: 0; }
.nakijk-rij .num { white-space: nowrap; font-weight: 600; }
.invoer-stappen { margin: 0 0 14px; }
.steps .step small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; line-height: 1.2; }
.step.done small { color: var(--sub); }
.dagchips { display: flex; flex-wrap: wrap; gap: 6px; }
.dagchips .leeg { font-size: 12.5px; color: var(--muted); }
.dagchip { border: 1px solid var(--line); border-radius: 8px; background: var(--card); padding: 6px 10px; display: flex; flex-direction: column; gap: 1px; min-width: 84px; text-align: left; font: inherit; cursor: pointer; color: var(--ink); }
.dagchip b { font-size: 12.5px; font-weight: 600; }
.dagchip small { font-size: 11px; color: var(--muted); }
.dagchip:hover { border-color: var(--data); }
.dagchip[aria-pressed="true"] { border-color: var(--btn-bg); background: var(--btn-bg); color: var(--btn-ink); }
.dagchip[aria-pressed="true"] small { color: inherit; opacity: .8; }
.dagchip:disabled { opacity: .45; cursor: not-allowed; }
.controle { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.controle li { display: flex; gap: 8px; align-items: flex-start; }
.controle li i { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11px; font-style: normal; font-weight: 700; background: var(--chip-green-bg); color: var(--chip-green-ink); }
.controle li.let i { background: var(--chip-orange-bg); color: var(--chip-orange-ink); }
.controle li.stil { color: var(--muted); }
#controle-knop.let { border-color: var(--chip-orange-dot); color: var(--chip-orange-ink); }
.klap-body .keuze > * { padding: 0 6px; white-space: nowrap; font-size: 12.5px; min-width: 0; }
.klap-body .keuze { min-width: 0; }
.regel-zaag { display: flex; align-items: center; gap: 8px; padding: 6px 0 2px 42px; font-size: 12.5px; color: var(--sub); flex-wrap: wrap; }
.regel-zaag .lab { font-weight: 550; }
.regel-zaag .veld-eenheid { width: 92px; flex: none; }
.regel-zaag-uitleg { color: var(--muted); }
.regel-extra { padding: 2px 0 0 42px; font-size: 12.5px; color: var(--sub); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.regel-extra .warn { color: var(--chip-orange-ink); font-weight: 550; }
.feiten-strook { margin: 0 0 14px; }
.contact-lijst { padding: 6px 0; }
.contact-lijst .cr { display: flex; gap: 10px; align-items: flex-start; padding: 6px 18px; font-size: 13px; }
.contact-lijst .cr i { flex: none; width: 36px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em; background: var(--data-wash); color: var(--data); }
.contact-lijst .cr i.tel { background: var(--chip-green-bg); color: var(--chip-green-ink); }
.contact-lijst .cr i.in { background: var(--chip-orange-bg); color: var(--chip-orange-ink); }
.taak-lijst { padding: 6px 0; }
.taak-rij { display: flex; gap: 10px; align-items: flex-start; padding: 6px 18px; font-size: 13px; }
.taak-rij.af > div > span { text-decoration: line-through; color: var(--muted); }
.taak-rij form { margin: 0; }
.vink-knop { width: 18px; height: 18px; border: 1.5px solid var(--axis); border-radius: 5px; background: var(--card); flex: none; cursor: pointer; padding: 0; font-size: 11px; line-height: 1; color: var(--btn-ink); }
.vink-knop[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-bg); }
.ger-lijst { padding: 6px 0; }
.ger-rij { display: flex; gap: 10px; align-items: center; padding: 6px 18px; font-size: 13px; }
.ger-badge, .doc-badge { width: 32px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; flex: none; letter-spacing: .04em; }
.doc-badge.mail { background: var(--data); }
.doc-badge.pdf { background: #d03b3b; }
.ger-rij b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perioden td .sub{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.perioden tr.dim td{color:var(--muted)}
.perioden tr.dim td b{font-weight:500}
.rij-knoppen{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.rij-knoppen form{margin:0}
.acties-cel{white-space:nowrap;text-align:right}
.ronde-onder{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media (max-width:900px){.ronde-onder{grid-template-columns:1fr}}
.taak-rij.af{opacity:.55}
.taak-rij.af span{text-decoration:line-through}
.levgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width:900px){.levgrid{grid-template-columns:1fr}}
.invoer-stappen .step small{display:block;font-size:11.5px;color:var(--muted);font-weight:400}
.klant-acties{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.klant-acties form{margin:0;display:contents}
.cell-rood{color:var(--chip-red-dot,#b42318);font-weight:600}
.ok{color:var(--chip-green-dot,#1f7a3a)}
#abo-incasso-rij[hidden]{display:none}
.bericht-form [hidden]{display:none}
.rp-wijzen { display: grid; gap: 8px; margin: 0 0 12px; }
.rp-wijze { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.rp-wijze:has(input:checked) { border-color: var(--accent, #2563eb); background: var(--bg-soft, #f4f7ff); }
.rp-wijze input { margin-top: 3px; }
.rp-wijze span { display: grid; gap: 2px; }
.rp-wijze small { color: var(--muted); }
.volg-adres { display: inline-block; }
.volg-adres summary { list-style: none; cursor: pointer; }
.volg-adres summary::-webkit-details-marker { display: none; }
.volg-adres-form { display: grid; gap: 8px; margin-top: 10px; max-width: 360px; }
.vz-storing { display: flex; align-items: center; gap: 16px; background: #fff4e5; border: 1px solid #f3c98b; border-radius: 12px; padding: 0 20px; height: 52px; margin-bottom: 14px; }
.vz-storing b { color: #8a4b08; white-space: nowrap; }
.vz-storing span { flex: 1; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-storing form { margin: 0; }
.afr-kluis { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.kaartvak { padding: 14px 18px; }
.kaartvak.velden, .velden { display: flex; flex-direction: column; gap: 14px; }
.veldenrij { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.veldhint { font-size: 12.5px; color: var(--muted); margin: 0; }
.kaartvoet { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--sub); }
.kbdhint { color: var(--muted); }
.kop-rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }
.num-in { text-align: right; }
.metsuffix { display: flex; align-items: center; gap: 6px; }
.metsuffix input { flex: 1; min-width: 0; }
.metsuffix span { color: var(--muted); font-size: 13px; flex: none; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.schakelrij { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.linkknop { background: none; border: 0; padding: 0; color: var(--accent, #2a78d6); font-weight: 600; font-size: 13px; cursor: pointer; }
.linkknop:hover { text-decoration: underline; }
.keuzeblokken { display: flex; gap: 8px; flex-wrap: wrap; }
.keuzeblok { display: inline-flex; flex-direction: column; gap: 1px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; cursor: pointer; background: var(--card, #fff); min-width: 0; text-align: left; color: inherit; }
.keuzeblok.breed { display: flex; width: 100%; }
.keuzeblok b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.keuzeblok small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.keuzeblok:hover { border-color: var(--accent, #2a78d6); }
.keuzeblok input { position: absolute; opacity: 0; pointer-events: none; }
.keuzeblok.aan, .keuzeblok:has(input:checked) { border-color: var(--tekst, #16181f); box-shadow: inset 0 0 0 1px var(--tekst, #16181f); }
.keuzelijst { display: flex; flex-direction: column; gap: 8px; }
.drempels { display: flex; gap: 10px; flex-wrap: wrap; }
.drempel { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; height: 34px; background: var(--card, #fff); }
.drempel span { font-size: 12px; color: var(--muted); }
.drempel input { border: 0; background: none; width: 56px; text-align: right; font-size: 13.5px; color: inherit; padding: 0; }
.drempel input:focus { outline: none; }
table.prijzentabel td { vertical-align: middle; }
table.prijzentabel { width: 100%; }
table.prijzentabel .cel { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 8px; height: 32px; padding: 0 6px; background: var(--card, #fff); width: 82px; }
table.prijzentabel .cel input { border: 0; background: none; text-align: right; width: 100%; min-width: 0; font-size: 13px; color: inherit; padding: 0; }
table.prijzentabel .cel input:focus { outline: none; }
table.prijzentabel .cel:focus-within { border-color: var(--accent, #2a78d6); box-shadow: 0 0 0 3px rgba(42, 120, 214, .12); }
table.prijzentabel .cel.leeg { background: var(--vlak, #fafbfc); border-style: dashed; }
table.prijzentabel .cel.pct { border-color: #cfe0f5; background: rgba(42, 120, 214, .06); }
table.prijzentabel .cel i { font-style: normal; font-size: 12px; color: var(--muted); }
table.prijzentabel .celform { display: inline; }
table.prijzentabel .goed { color: var(--pos, #116329); }
table.prijzentabel .bad { color: var(--neg, #b42318); }
.ladder { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ladder .trede { display: grid; grid-template-columns: 22px minmax(0, 1fr) 112px 116px; gap: 10px; align-items: center; min-height: 44px; padding: 6px 14px; font-size: 13px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.ladder .trede:first-child { border-top: 0; }
.ladder .trede.wint { background: rgba(17, 152, 75, .07); }
.ladder .trede.uit { color: var(--muted); }
.ladder .trede i { width: 18px; height: 18px; border-radius: 50%; background: var(--line); display: inline-grid; place-items: center; color: #fff; font-size: 10px; font-weight: 700; font-style: normal; }
.ladder .trede.wint i { background: var(--pos, #17984b); }
.ladder .trede .t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ladder .trede .s { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; color: var(--muted); }
.ladder .trede .n { text-align: right; white-space: nowrap; font-weight: 600; }
.ladder .trede .n.mut { color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
table.voorbeeldtabel { width: 100%; }
table.voorbeeldtabel .sub { display: block; font-size: 12px; color: var(--muted); }
.lade-voet .voet-tekst { margin-right: auto; font-size: 12.5px; color: var(--sub); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.samenvatting { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px 12px; font-size: 13px; align-items: baseline; }
.samenvatting > span { color: var(--muted); }
.samenvatting > div { min-width: 0; overflow-wrap: anywhere; }
.instelvak { display: flex; flex-direction: column; gap: 12px; }
.instel small { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 3px; }
.instel .w { display: flex; align-items: center; gap: 10px; min-height: 24px; font-size: 13px; }
.instel .w .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.instel .w .linkknop { margin-left: auto; flex: none; }
.verloop { display: flex; flex-direction: column; gap: 12px; }
.verloopregel { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.verloopregel i { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: var(--line); }
.verloopregel i.blauw { background: var(--accent, #2a78d6); }
.verloopregel i.oranje { background: #e8a13c; }
.verloopregel b { display: block; font-weight: 600; }
.verloopregel small { display: block; color: var(--muted); font-size: 12px; }
.uitleg { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--sub); }
.uitleg p { margin: 0; }
.searchbox.klein input { height: 32px; font-size: 13px; }
.fchips.klein { margin-bottom: 0; }
.pdp-prijsbron { font-size: 13px; color: var(--pos, #116329); font-weight: 600; margin-top: 2px; }
.pdp-staffels { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.pdp-staffel { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; min-width: 130px; text-decoration: none; color: inherit; }
.pdp-staffel:hover { border-color: var(--tekst, #16181f); }
.pdp-staffel.aan { border-color: var(--tekst, #16181f); box-shadow: inset 0 0 0 1px var(--tekst, #16181f); }
.pdp-staffel small { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.pdp-staffel b { font-size: 15px; white-space: nowrap; }
.pdp-staffel span { font-size: 12px; color: var(--pos, #116329); white-space: nowrap; }
table.prijzentabel td:first-child { min-width: 160px; }
table.prijzentabel td:first-child .nr { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
[data-kaart='prijslijst'] .card-head .card-sub { white-space: nowrap; }
@media (max-width: 900px) { [data-kaart='prijslijst'] .card-head .card-sub { white-space: normal; } }
.velden .segment, .kaartvak .segment, .schuiflade .segment { align-self: flex-start; }
#prijzen .card-head, #prijscheck .card-head { flex-wrap: wrap; row-gap: 8px; }
#prijzen .kop-rechts { flex-wrap: wrap; row-gap: 8px; min-width: 0; }
#prijzen .searchbox.klein { flex: 1 1 130px; min-width: 0; max-width: 190px; }
.kraster > .kkol, .kraster > aside.kkol { min-width: 0; }
.kraster .card { min-width: 0; }
@media (max-width: 900px) {
#prijzen .kop-rechts { width: 100%; }
#prijzen .searchbox.klein { flex: 1 1 100%; max-width: none; }
[data-kaart='prijslijst'] .table-scroll { overflow-x: auto; }
[data-kaart='prijslijst'] .card, [data-kaart='prijslijst'] .kraster { min-width: 0; max-width: 100%; }
table.prijzentabel { min-width: 0; }
}
.los-vlak { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.los-kaart { width: 380px; max-width: 100%; }
@media (max-width: 760px) { .los-vlak { padding: 16px; } .los-kaart { width: 100%; } }
.staafgrafiek { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding: 16px 18px; }
.staafgrafiek-kolom { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; height: 100%; }
.staafgrafiek-kolom > .staaf { flex: 0 1 auto; }
.staafgrafiek-kolom > div:last-child { flex: none; }
.alleen-touch, .alleen-telefoon, .alleen-tablet, .topbar > .alleen-touch, .topbar > .alleen-tablet { display: none; }
body * { touch-action: manipulation; }
.nav-kop { display: contents; }
.nav-kop-titel { display: none; }
.topbar { padding: 10px 40px; }
.topbar #mob-terug[hidden] { display: none; }
#chat-pop-knop { display: flex; align-items: center; gap: 7px; }
@media (min-width: 1181px) {
.nav > .nav-kop > [data-groep="Verkopen"] { order: 1; }
.nav > .nav-kop > [data-groep="Inkoop"] { order: 2; }
.nav > .nav-kop > [data-groep="Magazijn"] { order: 3; }
.nav > .nav-kop > [data-groep="Orderverwerking"] { order: 4; }
.nav > .nav-kop > [data-groep="Verzenden"] { order: 5; }
.nav > .nav-kop > [data-groep="bol"] { order: 6; }
.nav > .nav-kop > [data-groep="Retouren"] { order: 7; }
.nav > .nav-kop > [data-groep="Chat"] { order: 8; }
.nav > .nav-kop > [data-groep="Helpdesk"] { order: 9; }
.nav > .nav-kop > [data-groep="Administratie"] { order: 10; }
.nav > .nav-kop > [data-groep="Analyse"] { order: 11; }
.nav > .nav-kop > [data-groep="Verhuur"] { order: 12; }
.nav > .nav-kop > [data-groep="Klant"] { order: 13; }
.nav > .nav-kop > [data-groep="Catalogus"] { order: 14; }
.nav > .nav-kop > [data-groep="Acties"] { order: 15; }
.nav > .nav-kop > [data-groep="Kortingen"] { order: 16; }
.nav > .nav-kop > [data-groep="Website"] { order: 17; }
.nav > .nav-kop > [data-groep="Configuratie"] { order: 18; }
}
@media (max-width: 1180px) {
.app { grid-template-columns: 1fr; }
.side { display: none; }
.content { padding: 16px 24px 40px; }
.topbar { height: 56px; padding: 0 24px; gap: 0; flex-wrap: nowrap; justify-content: flex-start; }
.topbar > #zijbalk-knop, .topbar > #volledig-knop, .topbar > #thema-knop, .topbar > .menuwrap, .topbar > #vestiging-label,
.topbar > span, .topbar > .avatar, .topbar > #chat-pop-knop { display: none; }
.topbar .mob-titel { display: flex; flex-direction: column; flex: 1; min-width: 0; padding-right: 8px; }
.mob-titel b { font-size: 17px; font-weight: 650; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.mob-vestiging { display: inline-block; align-self: flex-start; }
.mob-vestiging-knop { display: inline-flex; align-items: center; gap: 3px; font: inherit; font-size: 12px; color: var(--sub); background: none; border: 0; padding: 2px 0; min-height: 22px; cursor: pointer; }
.topbar #mob-terug { display: grid; margin-left: -11px; }
body.menu-open .topbar #mob-terug { display: none; }
.topbar #mob-terug:not([hidden]) + .mob-titel { padding-left: 6px; }
.content h1.dubbele-kop { display: none; }
.content h1.dubbele-kop + .page-sub { margin-top: 0; }
.page-head:has(> div > h1.dubbele-kop) { align-items: center; }
.topbar > .icon-btn, .topbar > .bel > summary.ghost { width: 44px; height: 44px; padding: 0; justify-content: center; border: 0; background: none; border-radius: 10px; }
.topbar > .bel > summary.ghost svg { width: 22px; height: 22px; }
.topbar > .bel { margin-right: -11px; }
.bel summary { position: relative; }
.topbar #topbar-bel-n { display: none; }
.topbar #topbar-aandacht-n { display: inline-flex; position: absolute; top: 3px; right: 2px; }
.bel[open]::before { content: ""; position: fixed; inset: 0; background: rgba(21, 24, 33, .42); z-index: 90; }
.bel[open] .bel-paneel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; border-radius: 18px 18px 0 0; max-height: 78vh; overflow: auto; z-index: 91; padding: 0 4px 18px; }
.bel-paneel a { min-height: 52px; align-items: center; font-size: 14px; padding: 8px 12px; border-radius: 10px; }
.bel-paneel .blad-grip { display: grid; }
.aandacht-tabs { display: flex; margin: 0 12px 10px; border: 1px solid var(--axis); border-radius: 11px; overflow: hidden; }
.aandacht-tabs button { flex: 1; height: 44px; border: 0; background: var(--card); color: var(--sub); font: inherit; font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.aandacht-tabs button.aan { background: var(--btn-bg); color: var(--btn-ink); }
.aandacht-tabs i { font-style: normal; font-size: 12px; font-weight: 700; background: var(--wash); color: var(--ink); border-radius: 999px; min-width: 20px; height: 20px; line-height: 20px; text-align: center; padding: 0 5px; }
.aandacht-tabs .aan i { background: rgba(255, 255, 255, .2); color: #fff; }
.aandacht-tabs i[hidden] { display: none; }
.mob-vestiging .menu, .blad-menuwrap .menu { position: fixed; left: 0; right: 0; bottom: 0; top: auto; border-radius: 18px 18px 0 0; min-width: 0; padding: 12px 4px 18px; z-index: 98; }
.mob-vestiging .menu button, .blad-menuwrap .menu button { min-height: 52px; font-size: 15px; padding: 8px 12px; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { font-size: 16px !important; }
.side .logo, .side .side-search { display: none; }
.nav { gap: 0; }
.nav-kop { display: block; position: relative; margin-top: 26px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: visible; }
.nav-kop-titel { display: block; position: absolute; top: -20px; left: 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.nav-kop[data-kop="Beheer"] { margin-top: 24px; }
.nav-kop[data-kop="Beheer"] .nav-kop-titel { font-size: 0; left: 0; right: 0; top: -12px; border-top: 1px solid var(--line); }
.nav-kop > :first-child.nav-item, .nav-kop > :first-child > .nav-item { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.nav-item { min-height: 48px; padding: 0 14px; font-size: 15px; border-radius: 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.nav-kop > :last-child > .nav-item.nav-toggle, .nav-kop > a.nav-item:last-child { border-bottom: 0; }
.nav-kop > .nav-group.open:last-child > .nav-item.nav-toggle { border-bottom: 1px solid var(--line); }
.nav-item .chev { font-size: 14px; }
.nav-sub { padding: 0; background: var(--wash2); }
.nav-sub a { min-height: 44px; padding: 0 14px 0 28px; font-size: 14.5px; border-radius: 0; border-bottom: 1px solid var(--line); }
.nav-kop > :last-child > .nav-sub > a:last-child { border-bottom: 0; }
.nav-sub a.active, .nav-item.active { box-shadow: inset 3px 0 0 var(--data); background: color-mix(in srgb, var(--data) 8%, var(--card)); }
.nav-item.alleen-touch { display: flex; }
.side-voet > .nav-item, .side-voet > form { display: none; }
.side-voet .jij-rij { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 64px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); text-align: left; margin-top: 18px; font: inherit; color: inherit; cursor: pointer; }
.jij-naam { flex: 1; min-width: 0; }
.jij-naam b { display: block; font-size: 14px; font-weight: 600; }
.jij-naam small { display: block; color: var(--muted); font-size: 12px; }
.jij-rij svg { color: var(--muted); flex: none; }
.blad { position: fixed; inset: 0; z-index: 97; }
.blad[hidden] { display: none; }
.blad-achter { position: absolute; inset: 0; background: rgba(21, 24, 33, .42); }
.blad-vlak { position: absolute; left: 0; right: 0; bottom: 0; background: var(--card); border-radius: 18px 18px 0 0; max-height: 78vh; overflow: auto; padding: 0 4px 18px; box-shadow: 0 -12px 40px rgba(21, 24, 33, .2); }
.blad-grip { height: 22px; display: grid; place-items: center; }
.blad-grip::before { content: ""; width: 44px; height: 5px; border-radius: 3px; background: var(--line); }
.jij-kop { display: flex; align-items: center; gap: 12px; padding: 2px 12px 14px; }
.jij-kop b { display: block; font-size: 16px; font-weight: 650; }
.jij-kop small { display: block; color: var(--muted); font-size: 12.5px; }
.avatar.groot { width: 44px; height: 44px; font-size: 14px; }
.blad-regel { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border: 0; background: none; border-radius: 10px; text-align: left; font: inherit; font-size: 15px; color: var(--ink); text-decoration: none; cursor: pointer; }
.blad-regel > span { flex: 1; min-width: 0; }
.blad-regel em { font-style: normal; color: var(--muted); font-size: 13.5px; }
.blad-regel svg { color: var(--muted); flex: none; }
.blad-regel:hover { background: var(--wash); }
.blad-regel.stil, .blad-regel.stil:hover { cursor: default; background: none; }
.blad-regel.weg { color: var(--neg); }
.blad-menuwrap { display: block; }
.seg { display: flex; border: 1px solid var(--axis); border-radius: 9px; overflow: hidden; flex: none; }
.seg button { height: 36px; padding: 0 12px; border: 0; background: var(--card); color: var(--sub); font: inherit; font-size: 13px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--axis); }
.seg button.aan { background: var(--btn-bg); color: var(--btn-ink); font-weight: 600; }
details.lijst-menu:not([open]) > .lijst-pop { display: none; }
details.lijst-menu[open]::before { content: ""; position: fixed; inset: 0; z-index: 91; background: rgba(21, 24, 33, .3); }
.lijst-pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none;
max-height: 78vh; overflow: auto; border-radius: 18px 18px 0 0; z-index: 92; }
.lijst-fp, .lijst-wg, .lijst-kk { width: auto; }
.lijst-fp .raster { grid-template-columns: minmax(0, 1fr); }
.lijst-pop .voet { position: sticky; bottom: 0; background: var(--card); }
main input, main select, main textarea, main [style*="width:"]:not(.pb-rij) { max-width: 100%; }
.mg-od-grid { grid-template-columns: minmax(0, 1fr); }
.staafgrafiek { flex-wrap: nowrap; overflow-x: auto; height: 176px; }
.staafgrafiek-kolom { flex: 0 0 36px; min-width: 36px; }
.lt td.acties .rij-acties, .ck-acties .rij-acties { position: static; left: auto; right: auto; transform: none; opacity: 1; }
.lt td.vast a.nr, .lt a.nr, .lt .nr { white-space: nowrap; }
.lade-strook .r, .lade-strook label { min-width: 0; max-width: 100%; }
.lade-strook select, .lade-strook input { width: 100%; }
.ifregel-bewerk { grid-template-columns: minmax(0, 1fr); }
.bon-extra .rij, .kassa .rij { flex-wrap: wrap; }
.card, .kaart, form.card { min-width: 0; }
.card-head { min-width: 0; }
.card-head > * { min-width: 0; max-width: 100%; }
.chipje, .card-head .chip, .card-head .card-title { overflow-wrap: anywhere; white-space: normal; }
.bankkies { grid-template-columns: minmax(0, 1fr); }
.bankkeuze small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lijst .werkbalk .r, .lijst-kop .r, .lade-strook .r, .lade-strook > span.r { flex-wrap: wrap; max-width: 100%; min-width: 0; }
.lijst-standen, .seg.ov-seg-groot, .ov-seg-groot { overflow-x: auto; }
.ch-onderwerp { grid-template-columns: minmax(0, 1fr); }
.infopunt > div, .infopunt > div.flip { position: fixed; left: 16px; right: 16px; width: auto; max-width: none; }
main table { display: block; overflow-x: auto; max-width: 100%; }
.seg, .lijst-standen, .mg-stappen, .ch-standen, .steps { max-width: 100%; }
.steps > *, .stappen > .stap { flex: none; }
.stappen .lijn { flex: none; }
.ch-stand, .mg-stap, .seg-k, .chip { max-width: 100%; white-space: normal; }
.ch-voorwaarde, .ch-onderwerp, .mg-stroom, .ov-vraag, .ov-vr-c { grid-template-columns: minmax(0, 1fr); }
.btn-primary, .ghost, .btn-primary.small, .ghost.small, .fchip, a.chip,
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { min-height: 44px; }
.fchip, a.chip { display: inline-flex; align-items: center; }
.lt-toggle { min-width: 44px; min-height: 44px; }
.seg button, .cmdk-tabs button, .lijst-standen a, .web-tabs a, .lijst-voet .pg a, .lijst-voet .pg span,
.ch-schrijfbalk input, .ch-kop input, .scan-terug { min-height: 44px; }
.seg button, .cmdk-tabs button, .lijst-standen a, .web-tabs a, .lijst-voet .pg a, .lijst-voet .pg span,
.scan-terug { display: inline-flex; align-items: center; justify-content: center; }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; position: relative; }
.vink, label:has(> input[type=checkbox]), label:has(> input[type=radio]) { min-height: 44px; }
.infopunt summary { position: relative; }
.infopunt summary::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); pointer-events: none; }
main .btn-primary, main .ghost, main .btn-primary.small, main .ghost.small { height: auto; min-height: 44px; }
}
@media (max-width: 760px) {
.content { padding: 12px 16px calc(100px + env(safe-area-inset-bottom)); }
.topbar { padding: 0 16px; }
.topbar > .alleen-tablet { display: none; }
.crumbs { display: none; }
:root { --onderbalk: calc(56px + env(safe-area-inset-bottom)); }
.opslaanbalk, .opslaanbalk.zweef, .werkblad .opslaanbalk { bottom: calc(12px + var(--onderbalk)); }
.scan-voet, [data-bib-lade] .lade-voet { bottom: var(--onderbalk); }
.lijst-pop { bottom: var(--onderbalk); }
.lijst-pop .raster, .lijst-pop .lijst, .lijst-pop .kol { padding-bottom: 76px; }
.bulk { bottom: calc(10px + var(--onderbalk)); }
.bel[open] .bel-paneel, .blad-vlak, .mblad { padding-bottom: calc(18px + var(--onderbalk)); }
body.menu-open .onderbalk, body:has(.bel[open]) .onderbalk, body:has(#jij-blad:not([hidden])) .onderbalk { z-index: 1; }
.topbar:has(.bel[open]) { z-index: 95; }
.onderbalk { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: calc(56px + env(safe-area-inset-bottom)); padding: 0 8px env(safe-area-inset-bottom); background: var(--card); border-top: 1px solid var(--line); z-index: 85; }
.onderbalk .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: var(--muted); text-decoration: none; font: inherit; font-size: 11px; font-weight: 600; min-width: 0; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.onderbalk .tab svg { width: 24px; height: 24px; }
.onderbalk .tab.aan { color: var(--ink); }
.onderbalk .tab.aan svg { stroke-width: 2.2; }
html:has(body.menu-open), html:has(body.blad-open), body.menu-open, body.blad-open { overflow: hidden; }
body.menu-open .side { display: flex; position: fixed; top: 56px; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom)); width: auto; height: auto; z-index: 84; overflow-y: auto; padding: 4px 16px 24px; border-right: 0; background: var(--bg); box-shadow: none; }
.side-kop { display: none; }
.chat-dock { inset: 0; width: auto; max-width: none; height: auto; border-radius: 0; border: 0; z-index: 96; }
.ch-kop { flex-wrap: wrap; row-gap: 6px; min-height: 0; padding: 10px 16px; }
.ch-kop-rechts { margin-left: 0; flex: 1 0 100%; justify-content: flex-end; position: relative; }
.ch-acties { position: static; }
.ch-menu { left: 0; right: 0; width: auto; }
.ch-schrijfbalk { flex-wrap: wrap; row-gap: 6px; }
.ch-schrijfbalk > textarea, .ch-schrijfbalk > .ch-invoer { flex: 1 1 100%; }
.bel[open] .bel-paneel { max-height: 86vh; }
}
@media (min-width: 761px) and (max-width: 1180px) {
.rail { display: flex; position: fixed; top: 0; bottom: 0; left: 0; width: 64px; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 10px; background: var(--card); border-right: 1px solid var(--line); z-index: 86; }
.rail-merk { height: 44px; display: grid; place-items: center; margin-bottom: 6px; }
.rail-merk svg { width: 22px; height: 20px; display: block; }
.rail-knop { position: relative; width: 52px; height: 52px; border: 0; background: none; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--sub); cursor: pointer; font: inherit; }
.rail-knop[hidden] { display: none; }
.rail-knop svg { width: 22px; height: 22px; }
.rail-knop span { font-size: 9.5px; font-weight: 600; }
.rail-knop:hover { background: var(--wash); color: var(--ink); }
.rail-knop.aan { background: var(--btn-bg); color: var(--btn-ink); }
.rail-knop.hier::after { content: ""; position: absolute; left: -6px; top: 16px; bottom: 16px; width: 3px; border-radius: 2px; background: var(--data); }
.rail-jij { margin-top: auto; }
.rail-jij .avatar { width: 32px; height: 32px; }
.main { margin-left: 64px; }
.topbar > .alleen-tablet.cmdk-opener { display: grid; }
body.rail-open::after { content: ""; position: fixed; inset: 0 0 0 64px; background: rgba(21, 24, 33, .42); z-index: 87; }
body.rail-open .side { display: flex; position: fixed; top: 0; bottom: 0; left: 64px; width: 300px; height: auto; z-index: 88; padding: 0 12px 14px; overflow-y: auto; box-shadow: 8px 0 30px rgba(21, 24, 33, .14); }
body.rail-open .side .nav-kop { display: none; margin-top: 0; border: 0; background: none; }
body.rail-open .side .nav-kop.aan { display: block; }
body.rail-open .side .nav-kop.aan .nav-kop-titel { display: none; }
body.rail-open .side .nav-kop.aan .nav-item { padding: 0 10px; border-radius: 10px; border-bottom: 0; }
body.rail-open .side .nav-kop.aan .nav-sub { background: none; }
body.rail-open .side .nav-kop.aan .nav-sub a { padding-left: 24px; border-radius: 10px; border-bottom: 0; }
.bel[open] .bel-paneel { left: 64px; }
.side-kop { display: flex; align-items: center; justify-content: space-between; height: 56px; margin: 0 -12px 8px; padding: 0 5px 0 16px; border-bottom: 1px solid var(--line); flex: none; position: sticky; top: 0; background: var(--card); z-index: 1; }
.side-kop b { font-size: 16px; font-weight: 650; }
.side-kop .icon-btn { width: 44px; height: 44px; }
.side .side-voet { display: none; }
}
.ch-voorwaarde, .ch-actie, .page-actions { flex-wrap: wrap; min-width: 0; }
.page-actions select, .page-actions .ghost { max-width: 100%; }
@media (max-width: 480px) {
.inlog { grid-template-columns: minmax(0, 1fr); }
.inlog-kaart { max-width: 100%; box-sizing: border-box; }
.lade-strook { flex-wrap: wrap; }
}
@media (max-width: 600px) {
.ch-voorwaarde, .ch-onderwerp { grid-template-columns: minmax(0, 1fr); }
.ch-voorwaarde > *, .ch-onderwerp > * { min-width: 0; max-width: 100%; }
.wvoet, .wvoet .r { flex-wrap: wrap; }
.ch-stand { white-space: normal; }
.lijst-kop .r, .page-head, .page-head .r { flex-wrap: wrap; }
}
.tl-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.tl-filter .fchips { flex: 1; min-width: 0; }
.tl-zoek { flex: none; }
.tl-zoek input { width: 220px; }
.tl-notitie { display: flex; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.tl-notitie input { flex: 1; min-width: 0; }
.tl-dag { padding: 10px 18px 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-top: 1px solid var(--line); }
.tl-dag:first-of-type { border-top: 0; }
.tl-regel { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 9px 18px; }
.tl-regel:hover { background: var(--wash2); }
.tl-regel.vast { background: var(--chip-orange-bg); }
.tl-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--chip-gray-bg); color: var(--chip-gray-ink); margin-top: 1px; }
.tl-ico svg { width: 15px; height: 15px; }
.tl-ico.bestelling, .tl-ico.mail { background: var(--chip-blue-bg); color: var(--chip-blue-ink); }
.tl-ico.offerte, .tl-ico.overig { background: var(--chip-gray-bg); color: var(--chip-gray-ink); }
.tl-ico.geld, .tl-ico.bel { background: var(--chip-green-bg); color: var(--chip-green-ink); }
.tl-ico.ticket, .tl-ico.notitie { background: var(--chip-orange-bg); color: var(--chip-orange-ink); }
.tl-ico.contact { background: var(--wash); color: var(--sub); }
.tl-ico.verhuur { background: var(--chip-red-bg); color: var(--chip-red-ink); }
.tl-wat { min-width: 0; }
.tl-titel { display: block; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
a.tl-titel:hover { text-decoration: underline; }
.tl-sub { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.tl-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.tl-tijd { font-size: 12.5px; color: var(--muted); white-space: nowrap; line-height: 20px; }
.tl-actie { display: none; }
.tl-regel:hover .tl-actie { display: block; }
.tl-actie .ghost.small { padding: 0 6px; height: 22px; font-size: 12px; }
.chip.purple { background: var(--chip-purple-bg, #ede9fe); color: var(--chip-purple-ink, #5b21b6); }
.chip.purple::before { background: var(--chip-purple-dot, #7c3aed); }
.cp-rij { display: grid; grid-template-columns: 32px minmax(0, 1.15fr) minmax(0, 1.35fr) auto; gap: 12px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.cp-rij:last-child { border-bottom: 0; }
.cp-rij.uit { opacity: .6; }
.cp-rij .avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--wash); color: var(--sub); font-size: 12px; font-weight: 650; display: grid; place-items: center; flex: none; }
.cp-rij.hoofd .avatar { background: var(--ink); color: var(--card); }
.cp-wie, .cp-hoe { min-width: 0; }
.cp-naam { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.cp-naam b { font-weight: 600; }
.cp-rij .cell-sub, .cp-mail { white-space: normal; overflow-wrap: anywhere; }
.cp-rij .cell-sub a, .cp-mail a { color: inherit; text-decoration: none; }
.cp-rij .cell-sub a:hover, .cp-mail a:hover { text-decoration: underline; }
.cp-rij .muted { color: var(--muted); }
.cp-knoppen { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.cp-knoppen form[hidden] { display: none; }
.cp-route .k { min-width: 170px; }
.cp-route .v { text-align: left; flex: 1; }
.dlg { border: 1px solid var(--line); border-radius: 12px; padding: 0; width: min(640px, 94vw); background: var(--card); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.dlg::backdrop { background: rgba(16,20,28,.45); }
.dlg-kop { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dlg-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.dlg .velden2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.dlg .field { min-width: 0; }
.dlg .field input, .dlg .field select { width: 100%; text-align: left; }
.dlg .aanvink { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; }
.dlg .aanvink input { margin-top: 2px; flex: none; }
.dlg-voet { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 640px) { .dlg .velden2 { grid-template-columns: 1fr; } .cp-rij { grid-template-columns: 32px minmax(0, 1fr); } .cp-hoe { grid-column: 2; } .cp-knoppen { grid-column: 2; } }
.tk-kop, .tk-rij { display: grid; grid-template-columns: 34px 120px minmax(0, 2fr) minmax(0, 1.2fr) 150px auto; gap: 12px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.tk-kop { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 8px 18px; background: var(--wash2); }
.tk-rij:last-child { border-bottom: 0; }
.tk-rij.klaar .tk-titel span { text-decoration: line-through; color: var(--muted); }
.tk-rij.markeer { background: var(--wash); }
.tk-rij .cell-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-rij .cell-sub.neg { color: var(--neg); }
.tk-vink form { margin: 0; }
.cb { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-strong, var(--line)); background: var(--card); display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.cb:hover { border-color: var(--ink); }
.cb.aan { background: var(--ink); border-color: var(--ink); }
.cb.aan::after { content: ""; width: 5px; height: 9px; border: solid var(--card); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.tk-wanneer b { font-weight: 600; white-space: nowrap; }
.tk-wat, .tk-over { min-width: 0; }
.tk-titel { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 550; }
.tk-titel span:last-child { min-width: 0; overflow-wrap: anywhere; }
.tk-ico { width: 24px; height: 24px; border-radius: 7px; background: var(--wash); color: var(--sub); display: grid; place-items: center; flex: none; }
.tk-ico svg { width: 14px; height: 14px; }
.tk-ico.bellen { background: var(--chip-green-bg); color: var(--chip-green-ink); }
.tk-ico.mailen { background: var(--chip-blue-bg); color: var(--chip-blue-ink); }
.tk-ico.bezoek { background: var(--chip-orange-bg); color: var(--chip-orange-ink); }
.tk-ico.offerte { background: var(--chip-purple-bg, #ede9fe); color: var(--chip-purple-ink, #5b21b6); }
.tk-over a { color: inherit; text-decoration: none; font-weight: 550; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-over a:hover { text-decoration: underline; }
.tk-rij .muted, .tk-wie .muted { color: var(--muted); }
.tk-wie { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-wie .avatar { width: 26px; height: 26px; border-radius: 999px; background: var(--wash); color: var(--sub); font-size: 11px; font-weight: 650; display: grid; place-items: center; flex: none; }
.tk-knoppen { display: flex; gap: 6px; align-items: center; white-space: nowrap; justify-content: flex-end; }
.tk-knoppen form { margin: 0; }
.tk-knoppen form[hidden] { display: none; }
.wk-eigenaars { border-top: 0; padding-top: 0; }
.chipkop { color: var(--muted); font-size: 12px; font-weight: 600; margin-right: 6px; }
.wk-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.wk-dag { border-right: 1px solid var(--line); min-height: 260px; padding: 0 0 12px; }
.wk-dag:last-child { border-right: 0; }
.wk-dag.vandaag { background: var(--wash2); }
.wk-dagkop { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 13px; }
.wk-dagkop small { color: var(--muted); font-weight: 500; }
.wk-wt { display: block; margin: 8px 10px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: inherit; text-decoration: none; min-width: 0; }
.wk-wt:hover { border-color: var(--ink); }
.wk-wt.te-laat { border-left: 3px solid var(--neg); }
.wk-wt b { display: block; font-weight: 550; font-size: 13px; overflow-wrap: anywhere; }
.wk-wt small { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.wk-leeg { color: var(--muted); font-size: 12.5px; padding: 12px 14px; }
.tk-form textarea.ghost { width: 100%; font: inherit; font-size: 13.5px; resize: vertical; }
@media (max-width: 1100px) { .tk-kop { display: none; } .tk-rij { grid-template-columns: 34px minmax(0, 1fr) auto; } .tk-wanneer { grid-column: 2; } .tk-wat, .tk-over, .tk-wie { grid-column: 2; } .tk-knoppen { grid-column: 3; grid-row: 1 / span 4; } .wk-week { grid-template-columns: 1fr; } .wk-dag { border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; } }
.chip.teal { background: var(--chip-teal-bg, #ccfbf1); color: var(--chip-teal-ink, #115e59); }
.chip.teal::before { background: var(--chip-teal-dot, #0f766e); }
.ir-rij { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ir-rij:last-child { border-bottom: 0; }
.ir-rij > .ir-wat { flex: 1; min-width: 0; }
.ir-rij > .ir-wat b { font-weight: 600; }
.ir-rij .cell-sub { white-space: normal; }
.ir-grens { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ir-grens input { width: 72px; text-align: right; }
.ir-rij select.ghost { text-align: left; }
.ir-tabel { display: grid; grid-template-columns: 68px minmax(0, 1fr) 110px auto; gap: 10px; align-items: center; padding: 8px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ir-tabel.kop { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--wash2); }
.ir-tabel input.ghost { width: 100%; }
.ir-tabel .ir-pijlen { display: inline-flex; gap: 4px; flex-wrap: nowrap; }
.ir-tabel .ir-pijlen .ghost.small { padding: 4px 8px; }
.ir-tabel .ir-pijlen form { margin: 0; }
.ir-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 18px; }
.ir-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; background: var(--card); }
.ir-tag form { margin: 0; display: inline-flex; }
.ir-tag button { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0 4px; font-size: 14px; line-height: 1; }
.ir-tag button:hover { color: var(--neg); }
.ir-erbij { display: flex; gap: 8px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ir-erbij input.ghost { min-width: 200px; }
.ir-kleuren { display: inline-flex; gap: 6px; align-items: center; }
.ir-kleuren label { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; cursor: pointer; border: 2px solid transparent; }
.ir-kleuren label:has(input:checked) { border-color: var(--ink); }
.ir-kleuren input { position: absolute; opacity: 0; width: 0; height: 0; }
.ir-kleuren i { width: 14px; height: 14px; border-radius: 999px; display: block; }
.ir-voet { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }
.chip-dot { width: 14px; height: 14px; border-radius: 999px; display: block; background: var(--chip-gray-dot, #98a1ad); }
.chip-dot.blue { background: var(--chip-blue-dot); }
.chip-dot.green { background: var(--chip-green-dot); }
.chip-dot.purple { background: var(--chip-purple-dot, #7c3aed); }
.chip-dot.orange { background: var(--chip-orange-dot); }
.chip-dot.red { background: var(--chip-red-dot); }
.chip-dot.teal { background: var(--chip-teal-dot, #0f766e); }
.kn-bord { display: grid; grid-template-columns: repeat(var(--kolommen, 5), minmax(0, 1fr)); gap: 0; }
.kn-kolom { border-right: 1px solid var(--line); min-height: 320px; padding-bottom: 12px; }
.kn-kolom:last-child { border-right: 0; }
.kn-kolom.eind { background: var(--wash2); }
.kn-kolom.over { background: var(--wash); }
.kn-kolomkop { padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.kn-kolomkop b { font-weight: 600; }
.kn-kolomkop .n { color: var(--muted); font-weight: 500; margin-left: 4px; }
.kn-kolomkop em { display: block; font-style: normal; color: var(--muted); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kn-kaartje { display: block; margin: 8px 10px 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: inherit; text-decoration: none; min-width: 0; cursor: grab; }
.kn-kaartje:hover { border-color: var(--ink); }
.kn-kaartje.stil { border-left: 3px solid var(--chip-orange-dot); }
.kn-kaartje.slepend { opacity: .5; }
.kn-kaartje b { display: block; font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.kn-kaartje small { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.kn-kaartje .kn-stil { display: block; color: var(--chip-orange-ink); font-size: 12px; margin-top: 3px; }
.kn-onder { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.kn-onder .num { font-weight: 600; font-size: 13px; }
.kn-onder .avatar { width: 22px; height: 22px; border-radius: 999px; background: var(--wash); color: var(--sub); font-size: 10px; font-weight: 650; display: grid; place-items: center; }
.kn-onder form { margin: 0; display: inline-flex; }
.kn-onder .eind { font-size: 12px; font-weight: 600; }
.kn-onder .eind.goed { color: var(--chip-green-ink); }
.kn-onder .eind.bad { color: var(--chip-red-ink); }
.kn-rij { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 140px 120px 110px 150px auto; gap: 12px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.kn-rij.kop { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 8px 18px; background: var(--wash2); }
.kn-rij > * { min-width: 0; }
.kn-rij .kn-naam a { color: inherit; text-decoration: none; font-weight: 600; }
.kn-rij .kn-naam a:hover { text-decoration: underline; }
.kn-rij .cell-sub { white-space: normal; overflow-wrap: anywhere; }
.kn-rij .num { text-align: right; font-weight: 600; }
.kn-rij .kn-wie { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kn-rij .kn-wie .avatar { width: 24px; height: 24px; border-radius: 999px; background: var(--wash); color: var(--sub); font-size: 10px; font-weight: 650; display: grid; place-items: center; flex: none; }
.kn-rij .kn-knoppen { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.kn-rij .kn-knoppen form { margin: 0; }
.kn-cijfers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kn-pijp { padding: 8px 18px 12px; }
.kn-pijp > div { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) 130px; gap: 12px; align-items: center; padding: 6px 0; font-size: 13.5px; }
.kn-pijp .balk { height: 8px; border-radius: 4px; background: var(--wash); overflow: hidden; }
.kn-pijp .balk i { display: block; height: 100%; background: var(--ink); border-radius: 4px; }
.kn-pijp .balk i.rood { background: var(--chip-red-dot); }
.kn-pijp .num { text-align: right; font-weight: 600; white-space: nowrap; }
.kn-tabel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.4fr) 90px; gap: 12px; padding: 8px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.kn-tabel.kop { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--wash2); }
.kn-tabel.tot { font-weight: 600; border-bottom: 0; }
.kn-tabel > span:last-child { text-align: right; }
.kn-hint { color: var(--muted); font-size: 12.5px; padding: 0 18px 12px; }
.kn-stappen .stap.rood .bol { background: var(--chip-red-dot); color: #fff; }
@media (max-width: 1100px) { .kn-bord { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kn-kolom { border-bottom: 1px solid var(--line); min-height: 0; } .kn-rij { grid-template-columns: minmax(0, 1fr) auto; } .kn-rij.kop { display: none; } .kn-cijfers { grid-template-columns: 1fr; } }
#relatiekaart .kaart-terug { margin-bottom: 6px; display: inline-block; }
#rk-strook { margin-bottom: 16px; }
.rk-zij .kv .v { text-align: right; }
.rk-eig { display: inline-flex; gap: 6px; align-items: center; }
.rk-eig select.ghost.small { max-width: 160px; }
.rk-taak { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.rk-taak:last-child { border-bottom: 0; }
.rk-taak.eerste { background: var(--wash2); }
.rk-taak-wat { flex: 1; min-width: 0; }
.rk-taak-wat b { font-weight: 600; display: block; overflow-wrap: anywhere; }
.rk-taak-wat a { color: inherit; text-decoration: none; }
.rk-taak-wat .cell-sub { white-space: normal; }
.rk-taak .neg { color: var(--neg); }
.rk-taak form { margin: 0; }
.rk-letop { display: flex; gap: 10px; align-items: flex-start; padding: 10px 18px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; font-size: 13.5px; }
.rk-letop:last-child { border-bottom: 0; }
.rk-letop:hover { background: var(--wash2); }
.rk-letop b { font-weight: 600; display: block; }
.rk-bol { width: 10px; height: 10px; border-radius: 999px; flex: none; margin-top: 5px; background: var(--chip-orange-dot); }
.rk-bol.rood { background: var(--chip-red-dot); }
.rk-bol.groen { background: var(--chip-green-dot); }
.rk-zij .pos { color: var(--chip-green-ink); font-weight: 550; }
.rk-zij .muted { color: var(--muted); }
.lijst-chiprij { padding-top: 0; }
.lijst-chiprij .chipkop { align-self: center; }
.rk-labels .v { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.rk-labels .chip { padding-right: 4px; }
.rk-label-weg { display: inline; margin: 0 0 0 2px; }
.rk-label-weg button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 3px; font-size: 13px; line-height: 1; opacity: .7; }
.rk-label-weg button:hover { opacity: 1; }
.rk-label-erbij { display: inline-flex; gap: 4px; align-items: center; }
.rk-label-erbij select.ghost.small { max-width: 130px; }
.bel-uitkomst { display: flex; gap: 8px; flex-wrap: nowrap; }
.bel-uitkomst label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-size: 13.5px; white-space: nowrap; }
.bel-uitkomst label:has(input:checked) { border-color: var(--ink); background: var(--wash); font-weight: 600; }
.bel-uitkomst input { position: absolute; opacity: 0; width: 0; height: 0; }
.vs-rij{display:flex;align-items:center;gap:12px;padding:10px 18px;border-top:1px solid var(--line)}
.vs-rij .chip-dot{flex:none}
.vs-wat{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vs-wat b,.vs-wat .cell-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-rij form{margin:0}
.vs-rij .fchip{flex:none}
@media (max-width:700px){.vs-rij{flex-wrap:wrap}.vs-wat{flex-basis:100%}}
.tk-wat .cell-sub{white-space:normal;overflow-wrap:anywhere}
.bk-wp{display:grid;grid-template-columns:192px 272px minmax(0,1fr) 240px;height:calc(100vh - 230px);min-height:520px;overflow:hidden}
.bk-wp>div{min-width:0;overflow:auto;border-right:1px solid var(--line)}
.bk-wp>div:last-child{border-right:0}
.bk-vakken{padding:12px 10px;background:var(--wash)}
.bk-vak{height:34px;display:flex;align-items:center;gap:6px;padding:0 8px;border-radius:7px;color:var(--ink);font-size:13px;text-decoration:none;white-space:nowrap;min-width:0}
.bk-vak>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.bk-vak:hover{background:var(--line)}
.bk-vak.cur{background:var(--card);font-weight:600;box-shadow:0 0 0 1px var(--line)}
.bk-vak em{font-style:normal;margin-left:auto;color:var(--muted);font-size:12px;flex:none}
.bk-vak em.rood{background:var(--neg);color:#fff;border-radius:10px;padding:0 6px;font-size:11px}
.bk-vktitel{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:12px 10px 4px}
.bk-zoek{padding:10px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:1}
.bk-zoek input{width:100%}
.bk-dr{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;align-items:flex-start}
.bk-dr:hover{background:var(--wash)}
.bk-dr.cur{background:var(--wash);box-shadow:inset 3px 0 0 var(--accent,#2a78d6)}
.bk-av{width:32px;height:32px;border-radius:50%;background:#2a78d6;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600;flex:none}
.bk-av.onbekend{background:#c4c8d0;color:#333}
.bk-dr-wat{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.bk-dr-wat b,.bk-dr-wat .bk-ond,.bk-dr-wat small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.bk-dr-wat .bk-ond{font-size:13px}
.bk-dr-wat small{color:var(--muted);font-size:12px}
.bk-dr.onbeantwoord b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#2a78d6;margin-right:6px;vertical-align:1px}
.bk-wanneer{color:var(--muted);font-size:12px;white-space:nowrap;flex:none}
.bk-draad{display:flex;flex-direction:column;background:var(--wash)}
.bk-leeg{margin:auto;color:var(--muted);text-align:center;display:flex;flex-direction:column;gap:4px}
.bk-draadkop{flex:none;display:flex;flex-direction:column;gap:4px;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:2}
.bk-dk1{display:flex;align-items:center;gap:10px}
.bk-dk1>b{flex:1;min-width:0;overflow-wrap:anywhere;font-size:15px;line-height:1.3}
.bk-kr{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.bk-kr form{margin:0}
.bk-dk2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bk-dk2 .cell-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bk-lijf{padding:16px 18px;display:flex;flex-direction:column;gap:12px;flex:1}
.bk-bericht{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px;max-width:760px}
.bk-bericht.wij{align-self:flex-end;background:#eaf2fd;border-color:#cfe0f7}
.bk-bkop{display:flex;gap:8px;align-items:baseline;margin-bottom:6px}
.bk-bkop b{white-space:nowrap}
.bk-bkop .cell-sub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-bkop .bk-wanneer{margin-left:auto}
.bk-btekst{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.5px;line-height:1.5}
.bk-bijlagen{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.bk-bijlage{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid var(--line);border-radius:7px;background:var(--wash);font-size:12.5px;text-decoration:none;color:inherit;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-bijlage small{color:var(--muted)}
.bk-bezorging{margin-top:6px}
.bk-antwoord{flex:none;background:var(--card);border-top:1px solid var(--line);padding:12px 18px;display:flex;flex-direction:column;gap:8px;position:sticky;bottom:0;z-index:2}
.bk-regel{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bk-regel .cell-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bk-antwoord textarea{width:100%;font:inherit;font-size:13.5px;resize:vertical;min-height:88px}
.bk-knoprij{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bk-knoprij form{margin:0}
.bk-knoprij .r{margin-left:auto;display:flex;gap:8px}
.bk-zij{padding:14px;display:flex;flex-direction:column;gap:12px;background:var(--card)}
.bk-kaart{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.bk-kk{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;height:40px;border-bottom:1px solid var(--line);font-size:13.5px}
.bk-kk a{font-size:12.5px}
.bk-ki{padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.bk-ki .kv{padding:2px 0;font-size:13px;gap:10px}
.bk-ki .kv .k{width:104px;flex:none}
.bk-stapel .kv{flex-direction:column;gap:0;align-items:flex-start}
.bk-stapel .kv .v{text-align:left;white-space:normal;overflow-wrap:anywhere}
.bk-ki .kv .v{min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:right}
.bk-klantkop{display:flex;gap:10px;align-items:center;margin-bottom:6px;min-width:0}
.bk-klantkop b,.bk-klantkop .cell-sub{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-klantkop>div{min-width:0}
.bk-lijstje a{display:block;font-size:13px;overflow-wrap:anywhere}
.bk-uitleg div{font-size:12.5px;color:var(--muted);padding-left:12px;position:relative}
.bk-uitleg div::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--muted)}
.ir-adres .ir-wat b{overflow-wrap:anywhere}
.ir-imap{display:flex;flex-direction:column;gap:10px}
.ir-voet{display:flex;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line)}
.ir-adres>.r{display:flex;align-items:center;gap:6px;flex:none}
.ir-adres>.r form{margin:0}
@media (max-width:1360px){.bk-wp{grid-template-columns:160px 236px minmax(0,1fr) 208px}.bk-lijf{padding:12px}.bk-antwoord,.bk-draadkop{padding-left:12px;padding-right:12px}}
@media (max-width:1100px){.bk-wp{grid-template-columns:1fr;height:auto;min-height:0;overflow:visible}.bk-wp>div{border-right:0;border-bottom:1px solid var(--line);overflow:visible}.bk-vakken{display:flex;flex-wrap:wrap;gap:4px}.bk-vktitel{width:100%}.bk-draadkop,.bk-antwoord{position:static}}
.ml-kop,.ml-rij{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.1fr) 104px 118px 74px 74px 74px 78px 96px 100px;gap:10px;align-items:center;padding:10px 18px}
.ml-kop{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--wash)}
.ml-rij{border-bottom:1px solid var(--line);color:inherit;text-decoration:none;font-size:13.5px}
.ml-rij:hover{background:var(--wash)}
.ml-c{min-width:0;display:flex;flex-direction:column;gap:1px}
.ml-c b,.ml-c>small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-c small{color:var(--muted);font-size:12px}
.ml-kop .n,.ml-c.n{text-align:right;align-items:flex-end}
.mn-keuzes{display:flex;flex-direction:column;gap:8px;padding:14px 18px}
.mn-keuze{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;min-width:0}
.mn-keuze.cur,.mn-keuze:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.mn-keuze input[type=radio]{margin:0}
.mn-keuze-wat{flex:1;min-width:0}
.mn-keuze-wat b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-keuze-wat small{display:block;overflow-wrap:anywhere}
.mn-keuze-wat small{color:var(--muted);font-size:12.5px}
.mn-keuze-n{white-space:nowrap;flex:none}
.mn-velden{padding:14px 18px;display:flex;flex-direction:column;gap:12px}
.mn-velden textarea{width:100%;font:inherit;font-size:13.5px;resize:vertical}
.mn-velden .field input,.mn-velden .field select{width:100%;text-align:left}
.mn-controle{padding:8px 18px 14px;display:flex;flex-direction:column;gap:10px}
.mn-check{display:flex;gap:12px;align-items:flex-start}
.mn-check i{width:22px;height:22px;border-radius:50%;background:#dcfce7;color:#166534;display:grid;place-items:center;font-style:normal;font-size:13px;flex:none;margin-top:1px}
.mn-check.let i{background:#ffedd5;color:#9a3412;font-weight:700}
.mn-check b{display:block}
.mn-check small{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.mn-voorbeeld{padding:14px 18px;display:flex;flex-direction:column;gap:8px}
.mn-knop{align-self:flex-start;pointer-events:none}
.mg-kop,.mg-rij{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr) 110px 110px;gap:10px;padding:10px 18px;align-items:center}
.mg-kop{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--wash)}
.mg-rij{border-bottom:1px solid var(--line);font-size:13.5px}
.mg-rij>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-rij small{display:block;color:var(--muted);font-size:12px}
.mg-kop .n,.mg-rij .n{text-align:right}
.mg-lijstje{padding:12px 18px;display:flex;flex-direction:column;gap:10px}
.mg-af{display:flex;align-items:center;gap:10px;min-width:0}
.mg-af>div{flex:1;min-width:0}
.mg-af b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-af small{display:block;overflow-wrap:anywhere}
.mg-af small{color:var(--muted);font-size:12px}
.ts-kop,.ts-rij{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.2fr) minmax(0,1.6fr) 90px minmax(0,1.2fr) 60px;gap:10px;padding:10px 18px;align-items:center}
.ts-kop{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--wash)}
.ts-rij{border-bottom:1px solid var(--line);font-size:13.5px}
.ts-rij>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-rij form{margin:0}
.af-blad{min-height:100vh;display:grid;place-items:center;padding:24px}
.af-kaart{max-width:480px;padding:28px 32px;text-align:center}
.af-kaart h1{font-size:22px;margin:0 0 10px}
.af-kaart p{color:#3a3f4b;line-height:1.5}
@media (max-width:1360px){.ml-kop,.ml-rij{grid-template-columns:minmax(0,2fr) minmax(0,1.1fr) 96px 104px 70px 70px 76px 90px 96px;gap:8px}}
@media (max-width:1100px){.ml-kop{display:none}.ml-rij{grid-template-columns:minmax(0,1fr) 110px;grid-auto-rows:auto}.ml-rij .ml-c:nth-child(n+4){display:none}.ts-kop{display:none}.ts-rij{grid-template-columns:minmax(0,1fr) 60px}.ts-rij>span:nth-child(2),.ts-rij>span:nth-child(4),.ts-rij>span:nth-child(5){display:none}}
.ir-vinkjes{display:flex;flex-direction:column;gap:6px}
.ir-api{display:flex;flex-direction:column;gap:6px;padding:12px 18px}
.ir-api-rij{display:grid;grid-template-columns:52px minmax(0,1.3fr) minmax(0,1.6fr);gap:10px;align-items:baseline;font-size:13px}
.ir-methode{font-size:11px;font-weight:700;border-radius:5px;padding:1px 5px;background:var(--wash);border:1px solid var(--line);text-align:center}
.ir-methode.POST{background:#eaf2fd;border-color:#cfe0f7}
.ir-pad{font-size:12.5px;overflow-wrap:anywhere}
.ir-api-rij .cell-sub{overflow-wrap:anywhere}
.ir-webhook-nieuw{padding:14px 18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.ir-webhook-nieuw .field input{width:100%;text-align:left}
.ir-vinkjes-rij{flex-direction:row;flex-wrap:wrap;gap:6px 16px}
@media (max-width: 760px) {
.onderbalk .tab { position: relative; }
.onderbalk .tab .tab-n { position: absolute; top: 3px; left: calc(50% + 4px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--neg); color: #fff; font-size: 10px; font-weight: 700; font-style: normal; display: grid; place-items: center; line-height: 1; }
.onderbalk .tab .tab-n[hidden] { display: none; }
.tk-rij { grid-template-columns: 34px minmax(0, 1fr); row-gap: 4px; }
.tk-wanneer, .tk-wat, .tk-over, .tk-wie, .tk-knoppen { grid-column: 2; }
.tk-knoppen { grid-row: auto; justify-content: flex-start; flex-wrap: wrap; white-space: normal; padding-top: 4px; }
.tk-titel span, .tk-rij .cell-sub, .tk-over a { white-space: normal; overflow-wrap: anywhere; }
.tk-knoppen .ghost.small { min-height: 40px; }
.tk-knoppen > a[href*="gebeld=1"] { flex: 1 1 100%; justify-content: center; background: var(--btn-bg); color: var(--btn-ink); border-color: transparent; font-weight: 650; font-size: 14px; }
.tk-vink .cb { width: 26px; height: 26px; }
.rk-belknoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; }
.rk-belknoppen .btn-primary, .rk-belknoppen .ghost { height: 44px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.kraster { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 16px; }
.kraster > .kkol { order: 0; min-width: 0; }
#rk-zij { display: contents; }
#rk-zij > * { order: 1; }
#rk-zij > #rk-volgende { order: -1; }
.tl-filter { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.tl-filter .fchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tl-filter .fchips .fchip { flex: none; }
.tl-zoek input { width: 100%; }
nav.fchips[aria-label="Onderdelen"] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
nav.fchips[aria-label="Onderdelen"] .fchip { flex: none; }
.kv.cp-route { flex-wrap: wrap; }
.cp-route .k { min-width: 0; }
.cp-route .v { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; }
}
.wegvak { margin: 80px auto 0; max-width: 520px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wegvak b { font-size: 20px; }
.wegvak span { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.wegvak span strong { color: var(--ink); font-weight: 650; }
.wegvak-knoppen { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.pr-knoppen { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.pr-knoppen form { margin: 0; display: inline-flex; gap: 4px; align-items: center; }
.pr-controle { display: flex; flex-direction: column; gap: 10px; padding: 12px 18px; }
.pr-regel { display: flex; gap: 12px; align-items: flex-start; }
.pr-regel i { width: 22px; height: 22px; border-radius: 999px; background: var(--pos-wash, #e2f5e9); color: var(--pos, #1b7a3f); display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; flex: none; margin-top: 1px; }
.pr-regel.let i { background: #fdeedc; color: #a35a0c; }
.pr-regel b { display: block; font-size: 13.5px; }
.pr-regel small { display: block; color: var(--muted); font-size: 12.5px; }
.pr-vink { display: flex; gap: 10px; align-items: center; padding: 6px 18px 14px; font-size: 13.5px; flex-wrap: wrap; }
.pr-vink input { width: 16px; height: 16px; margin: 0; }
.uitleg .punt { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; font-size: 13.5px; line-height: 1.45; }
.uitleg .punt i { width: 8px; height: 8px; border-radius: 999px; background: var(--pos, #1b7a3f); flex: none; margin-top: 6px; }
.uitleg .punt.let i { background: #d98a1e; }
#pr-kolommen select { min-width: 130px; }
.ir-meters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; overflow: hidden; }
.ir-meters > div { background: var(--card); padding: 12px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ir-meters small { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ir-meters b { font-size: 18px; }
.ir-meters span { font-size: 12px; color: var(--muted); }
.ir-meters .goed, .kv .goed { color: var(--pos, #1b7a3f); }
.ir-meters .let, .kv .let { color: #a35a0c; }
.ir-meters .bad { color: var(--neg); }
.ir-meters .muted, .kv .muted { color: var(--muted); }
.ir-adres-extra { margin-top: 2px; }
@media (max-width: 760px) { .ir-meters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#ir-marketing .kv { justify-content: flex-start; gap: 24px; }
#ir-marketing .kv .k { min-width: 110px; flex: none; }
#ir-marketing .kv .v { text-align: left; white-space: normal; }
.mo-keuze { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.mo-keuze button { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card, #fff); cursor: pointer; font: inherit; color: inherit; }
.mo-keuze button small { color: var(--muted); font-size: 12px; }
.mo-keuze button:hover { border-color: var(--data); }
.mo-keuze button.cur { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.mo-keuze button:focus-visible { outline: 2px solid var(--data); outline-offset: 2px; }
@media (max-width: 720px) { .mo-keuze { grid-template-columns: 1fr; } }
.afr-mo-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.afr-mo-veld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; min-width: 0; }
.afr-mo-veld.afr-mo-breed { grid-column: 1 / -1; }
.afr-mo-veld small { color: var(--rood, #b42318); min-height: 14px; font-size: 12px; }
.afr-mo-mount { min-height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: var(--card, #fff); }
.afr-mo-mount.has-focus { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.afr-mo-mount.is-invalid { border-color: var(--rood, #b42318); }
@media (max-width: 560px) { .afr-mo-velden { grid-template-columns: 1fr; } .afr-mo-veld.afr-mo-breed { grid-column: auto; } }
.cp-stip{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--line,#d9dde5);vertical-align:middle}
.cp-stip.aan{background:#16a34a}
.cp-tabel td{white-space:nowrap}
.cp-tabel td:first-child{white-space:normal}
.cp-acties{text-align:right}
.cp-acties form,.cp-acties a{margin-left:4px}
.cp-zoek{margin-left:auto}
.shop-catblokken{margin:21.6px 0}
.tv-tabel th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--sub); padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.tv-tabel th.num, .tv-tabel td.num { text-align: right; }
.tv-tabel td { padding: 9px 12px; vertical-align: top; }
.tv-tabel td.cell-sub { white-space: nowrap; }
.tv-tabel code { font-size: 12.5px; word-break: break-all; }
.tv-tabel .chip + .cell-sub { margin-top: 3px; }
.tv-klaar td { opacity: .55; }
.tv-door { display: flex; gap: 6px; align-items: center; margin: 0; }
.tv-door input { min-width: 170px; flex: 1; }
.shop-niet-gevonden-hulp { margin-top: 24px; }
.google-regels { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.google-regels li { display: grid; grid-template-columns: 8px 76px minmax(0, 1fr); gap: 0 8px; align-items: baseline; font-size: 12.5px; }
.google-regels .gr-stip { width: 8px; height: 8px; border-radius: 50%; background: var(--pos, #16a34a); position: relative; top: -1px; }
.google-regels li.mist .gr-stip { background: var(--neg, #dc2626); }
.google-regels .gr-veld { color: var(--sub); }
.google-regels .gr-waarde { overflow-wrap: anywhere; }
.google-regels li.mist .gr-waarde { color: var(--neg); }
.google-regels .gr-bron { grid-column: 3; color: var(--muted); font-size: 11.5px; }
.gs-tellers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--line); }
.gs-tellers > div { padding: 12px 14px; display: grid; gap: 2px; }
.gs-tellers > div + div { border-left: 1px solid var(--line); }
.gs-tellers b { font-size: 20px; font-variant-numeric: tabular-nums; }
.gs-tellers span { font-size: 12px; color: var(--sub); }
@media (max-width: 720px) { .gs-tellers { grid-template-columns: 1fr 1fr; } .gs-tellers > div:nth-child(3) { border-left: 0; } }
.fb-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.fb-raster.fb-open { grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); }
.fb-nieuw { display: flex; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.fb-nieuw input { flex: 1; min-width: 160px; }
.fb-lijst tr.fb-actief td { background: var(--bg-soft); }
.fb-velden { display: grid; gap: 8px; padding: 12px 14px; }
.fb-veld { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 8px; background: var(--card); }
.fb-veld-kop { display: grid; grid-template-columns: minmax(0, 1fr) 190px auto auto; gap: 8px; align-items: center; }
.fb-veld-kop select { min-width: 0; }
.fb-vink { display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; white-space: nowrap; }
.fb-vink.weg { color: var(--neg); }
.fb-veld-knoppen { display: inline-flex; gap: 4px; align-items: center; }
.fb-veld-meer { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fb-erbij { display: flex; gap: 8px; align-items: center; padding: 0 14px 12px; }
.fb-onder { padding: 8px 14px 14px; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .fb-raster.fb-open { grid-template-columns: 1fr; } .fb-veld-kop { grid-template-columns: 1fr 1fr; } .fb-veld-meer { grid-template-columns: 1fr; } }
.av-balk { display: flex; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; align-items: center; justify-content: space-between; }
.av-twee { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 14px; align-items: start; }
.av-velden { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 6px 14px; margin: 0; padding: 12px 18px; }
.av-velden dt { color: var(--sub); font-size: 12.5px; }
.av-velden dd { margin: 0; }
.av-waarde { white-space: pre-wrap; overflow-wrap: anywhere; }
.av-bestanden { display: flex; gap: 10px; padding: 12px 18px; flex-wrap: wrap; }
.av-bestand { display: grid; gap: 4px; width: 140px; text-decoration: none; color: inherit; font-size: 12.5px; }
.av-bestand img { width: 140px; height: 100px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.av-bestand-icoon { width: 140px; height: 100px; display: grid; place-items: center; font-size: 30px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-soft); }
.av-bestand small { display: block; color: var(--muted); }
.av-acties { display: grid; gap: 8px; padding: 12px 18px; justify-items: start; }
@media (max-width: 900px) { .av-twee { grid-template-columns: 1fr; } .av-velden { grid-template-columns: 1fr; } }
.site-veld-uitleg { font-size: 12.5px; color: var(--sub); }
.site-veld-naam { font-weight: 600; font-size: 14px; }
.site-artikelregels { display: grid; gap: 8px; }
.site-artikelregels-lijst { display: grid; gap: 6px; }
.site-artikelregel { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 8px; }
.site-artikelregel-plus { justify-self: start; }
.site-contactknoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.site-contactknoppen a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: var(--nova-r-klein, 8px); font-weight: 600; text-decoration: none; }
.site-whatsapp { background: #25d366; color: #fff !important; }
.site-nu { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #fee2e2; color: #991b1b; vertical-align: middle; }
.site-nu.open { background: #dcfce7; color: #166534; }
.site-tijden dl .vandaag dt, .site-tijden dl .vandaag dd { font-weight: 700; }
.site-kaart-vlak { position: relative; border-radius: var(--nova-r-klein, 10px); overflow: hidden; min-height: 300px; border: 1px solid var(--line, #e5e7eb); background: #eef2ea; }
.site-kaart-tekening { position: absolute; inset: 0; width: 100%; height: 100%; }
.site-kaart-in { position: relative; display: grid; gap: 6px; padding: 22px; max-width: 420px; margin: 24px; background: rgba(255,255,255,.94); border-radius: var(--nova-r-klein, 10px); }
.site-kaart-in b { font-size: 16px; }
.site-kaart-in > span { color: var(--sub, #555); }
.site-kaart-knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.site-kaart-uitleg { margin: 4px 0 0; font-size: 12px; color: var(--muted, #777); }
.site-kaart-frame { display: block; width: 100%; height: 360px; border: 0; }
.site-vestigingen-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.site-vestiging { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; border: 1px solid var(--line, #e5e7eb); border-radius: var(--nova-r-klein, 10px); padding: 12px; background: #fff; }
.site-vestiging img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; grid-row: span 2; }
.site-vestiging.zonder-foto { grid-template-columns: minmax(0, 1fr); }
.site-vestiging-in .site-adresregel { white-space: normal; }
.site-vestiging-in { display: grid; gap: 3px; font-size: 14px; }
.site-vestiging-in small { color: var(--sub, #555); }
.site-chatstrook { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 22px; border-radius: var(--nova-r-klein, 10px); background: var(--wash, #f5f7f4); border: 1px solid var(--line, #e5e7eb); }
.site-chatstrook-in { display: grid; gap: 2px; }
.site-chatstrook-in span { color: var(--sub, #555); font-size: 14px; }
.pl-contact { margin-left: 8px; }
@media (max-width: 639px) { .site-kaart-in { margin: 12px; padding: 16px; } .site-chatstrook { grid-template-columns: 1fr; } .site-vestiging { grid-template-columns: 72px 1fr; } .site-vestiging img { width: 72px; height: 72px; } }
.sn-kpis .kpi-value { display: flex; align-items: baseline; }
.sn-meting { font-variant-numeric: tabular-nums; }
.sn-meting.sn-goed { color: #166534; }
.sn-meting.sn-matig { color: #b45309; }
.sn-meting.sn-slecht { color: #b91c1c; }
.sn-meting.sn-leeg { color: var(--muted); }
.sn-tabel .sn-meting { display: inline-block; min-width: 56px; padding: 2px 8px; border-radius: 999px; font-size: 12.5px; text-align: center; }
.sn-tabel .sn-goed { background: #dcfce7; } .sn-tabel .sn-matig { background: #fef3c7; } .sn-tabel .sn-slecht { background: #fee2e2; } .sn-tabel .sn-leeg { background: var(--bg-soft); }
.sn-tips { margin: 0; padding: 12px 14px 12px 32px; display: grid; gap: 6px; }
.sn-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; align-items: start; }
.vh-lijst { list-style: none; margin: 0; padding: 6px 14px; display: grid; }
.vh-lijst li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); align-items: start; }
.vh-lijst li:last-child { border-bottom: 0; }
.vh-lijst li div { display: grid; gap: 2px; }
.vh-lijst li span:not(.vh-stip) { font-size: 12.5px; color: var(--sub); }
.vh-stip { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--pos, #16a34a); }
.vh-lijst li.let-op .vh-stip { background: #f59e0b; }
@media (max-width: 900px) { .sn-twee { grid-template-columns: 1fr; } }
.ac-lijst.kiezer { max-width: min(940px, 92vw); font-size: 13px; }
.ac-lijst.kiezer.smal { max-width: min(760px, 92vw); }
.ac-lijst.kiezer .ac-item { cursor: pointer; padding: 8px 12px; }
.ac-lijst.kiezer .ac-item.aan { background: var(--wash); box-shadow: inset 3px 0 0 var(--data); }
.ac-lijst.kiezer .ac-item mark { background: none; color: inherit; font-weight: 700; box-shadow: inset 0 -2px 0 var(--data-wash); }
.ac-foto-leeg { width: 32px; height: 32px; border-radius: 7px; flex: 0 0 32px; background: var(--wash); border: 1px solid var(--line);
display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.kz-label { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; margin-left: 6px; vertical-align: 1px; }
.kz-label.groen { color: var(--chip-green-ink); border-color: var(--chip-green-dot); }
.kz-vrij { flex: 0 0 112px; font-size: 12px; color: var(--ink); white-space: nowrap; }
.kz-vrij .ac-stip { margin-right: 6px; }
.ac-prijs small { font-size: 10.5px; color: var(--muted); font-weight: 500; }
.kz-kop { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 7px 12px; border-bottom: 1px solid var(--line); background: var(--wash); }
.kz-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
background: var(--card); border: 1px solid var(--line); color: var(--ink); white-space: nowrap; }
.kz-chip.lees { background: var(--data-wash); border-color: transparent; color: var(--data); }
button.kz-chip.klik { cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 600; }
button.kz-chip.klik:hover { border-color: var(--muted); }
.kz-alle { margin-left: auto; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--data); cursor: pointer; white-space: nowrap; }
.kz-bedoeld { padding: 8px 12px; font-size: 12.5px; border-bottom: 1px solid var(--line); background: var(--chip-orange-wash, var(--wash)); }
.kz-link { border: 0; background: none; padding: 0; font: inherit; color: var(--data); cursor: pointer; text-decoration: underline dotted; }
.kz-sectie { padding: 9px 12px 3px; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-top: 1px solid var(--line); }
.kz-sectie:first-child { border-top: 0; }
.kz-varianten { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 12px 10px 54px; background: var(--wash); border-bottom: 1px solid var(--line); }
.kz-varkop { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-right: 2px; }
.kz-var { font: inherit; font-size: 12px; height: 26px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); cursor: pointer; }
.kz-var:hover { border-color: var(--ink); }
.kz-varn { font-weight: 600; color: var(--muted); }
.kz-varn.r { color: var(--chip-red-ink, #b42318); } .kz-varn.o { color: var(--chip-orange-ink, #b2680d); }
.kz-alt { color: var(--muted); }
.kz-voet { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 6px 12px; border-top: 1px solid var(--line); background: var(--wash); font-size: 11.5px; color: var(--muted); }
.kz-voet kbd { font: 500 10.5px/1 inherit; border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; background: var(--card); color: var(--ink); }
.kz-tip { margin-left: auto; }
.kz-leeg { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; font-size: 13px; }
.kz-leeg > span { color: var(--muted); font-size: 12.5px; }
.kz-dichtstbij { font-size: 12.5px; }
.kz-acties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.kz-acties .ghost.small { height: 30px; display: inline-flex; align-items: center; text-decoration: none; }
.kassa-zoektegels { grid-column: 1 / -1; }
.kassa-zoekkop { display: flex; gap: 6px; margin-bottom: 10px; }
.ac-lijst.kiezer { max-height: min(72vh, 680px); overflow-y: auto; }
.ac-lijst.kiezer .kz-kop { position: sticky; top: 0; z-index: 1; }
.ac-lijst.kiezer .kz-voet { position: sticky; bottom: 0; z-index: 1; }
.dash-kopwrap { position: relative; }
.dash-live { display: inline-flex; align-items: center; gap: 6px; }
.dash-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--chip-green-dot); }
.dash-acties .dash-pk { gap: 7px; }
.dash-kanaalvorm { display: contents; }
.dash-kanaalvorm select.ghost.small { width: auto; max-width: 180px; padding-right: 8px; }
.dash-pk svg { color: var(--sub); }
.dash-pk i { font-style: normal; color: var(--muted); font-size: 11px; }
.dash-pk.open { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.dash-meer { position: relative; }
.dash-meer summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; white-space: nowrap; }
.dash-acties .dash-meer summary { width: 32px; padding: 0; font-size: 16px; }
.dash-meer summary::-webkit-details-marker { display: none; }
.dash-meer-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 224px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(16,24,40,.16); padding: 6px; z-index: 9; display: flex; flex-direction: column; }
.dash-meer-menu form { display: contents; }
.dash-meer-menu a, .dash-menuknop { display: flex; align-items: center; width: 100%; height: 34px; padding: 0 10px; border-radius: 7px; font-size: 13.5px; color: var(--ink); text-decoration: none; text-align: left; white-space: nowrap; }
.dash-meer-menu a:hover, .dash-menuknop:hover { background: var(--wash); }
.dash-pp { position: absolute; right: 0; top: calc(100% + 6px); width: 792px; max-width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 64px rgba(16,24,40,.22); z-index: 40; display: grid; grid-template-columns: 200px minmax(0,1fr); overflow: hidden; }
.dash-pp[hidden] { display: none; }
.dash-ppl { border-right: 1px solid var(--line); padding: 12px 8px; display: flex; flex-direction: column; gap: 1px; }
.dash-ppkop { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 6px 12px 8px; }
.dash-ppl a { height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-radius: 7px; color: var(--ink); font-size: 13.5px; text-decoration: none; }
.dash-ppl a:hover { background: var(--wash2); }
.dash-ppl a.cur { background: var(--wash); font-weight: 600; }
.dash-ppl a em { font-style: normal; font-weight: 700; }
.dash-ppr { padding: 14px 20px 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dash-ppeigen { display: flex; align-items: center; gap: 10px; font-size: 13.5px; flex-wrap: wrap; }
.dash-ppeigen b { font-weight: 600; margin-right: 4px; }
.dash-ppeigen .s { color: var(--muted); font-size: 12.5px; }
.dash-ppeigen input[type="date"] { width: 138px; font-weight: 500; }
.dash-kals { display: flex; gap: 24px; flex-wrap: wrap; }
.dash-mnd { width: 236px; }
.dash-mnd .dash-mk { font-weight: 600; font-size: 13px; margin-bottom: 6px; text-align: center; }
.dash-wk, .dash-dg { display: grid; grid-template-columns: repeat(7, 32px); gap: 2px; }
.dash-wk span { font-size: 10.5px; color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: .04em; height: 18px; }
.dash-dg a, .dash-dg span { height: 30px; display: grid; place-items: center; font-size: 12.5px; border-radius: 6px; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.dash-dg a:hover { background: var(--wash); }
.dash-dg .in2 { background: var(--data-wash); color: var(--chip-blue-ink); border-radius: 0; }
.dash-dg .eind { background: var(--data); color: #fff; }
.dash-dg .eind:hover { background: var(--data); }
.dash-dg .uit { color: var(--axis); }
.dash-ppverg { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 16px; border-top: 1px solid var(--grid); padding-top: 12px; }
.dash-ppverg > b { grid-column: 1 / -1; font-weight: 600; font-size: 13.5px; }
.dash-ppverg > a { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink); text-decoration: none; min-width: 0; }
.dash-ppverg > a small { display: block; color: var(--muted); font-size: 12px; }
.dash-ppverg .dash-ppeigen { grid-column: 1 / -1; }
.dash-rad { width: 18px; height: 18px; border: 1.5px solid var(--axis); border-radius: 50%; background: var(--card); display: inline-block; position: relative; flex: none; margin-top: 1px; }
.dash-rad.aan { border-color: var(--btn-bg); }
.dash-rad.aan::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--btn-bg); }
.dash-ppvoet { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--wash2); }
.dash-ppvoet form { display: contents; }
.dash-ppvoet .vl, .dash-mv .vl { flex: 1; }
.dash-tabs { display: flex; gap: 20px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 16px; scrollbar-width: none; }
.dash-tabs::-webkit-scrollbar { display: none; }
.dash-tabs a { flex: none; height: 40px; display: inline-flex; align-items: center; color: var(--sub); font-weight: 500; font-size: 13.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; }
.dash-tabs a:hover { color: var(--ink); }
.dash-tabs a.cur { color: var(--ink); font-weight: 600; border-color: var(--ink); }
.dash-tabs em { font-style: normal; color: var(--muted); margin-left: 5px; font-size: 12px; font-variant-numeric: tabular-nums; }
.dash-melding { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; border: 1px solid transparent; }
.dash-melding.ok { background: var(--chip-green-bg); color: var(--chip-green-ink); }
.dash-melding.fout { background: var(--chip-red-bg); color: var(--chip-red-ink); }
.dash-raster { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 16px; align-items: stretch; }
.dash-w2 { grid-column: span 2; } .dash-w3 { grid-column: span 3; } .dash-w4 { grid-column: span 4; } .dash-w5 { grid-column: span 5; } .dash-w6 { grid-column: span 6; }
.dash-w7 { grid-column: span 7; } .dash-w8 { grid-column: span 8; } .dash-w9 { grid-column: span 9; } .dash-w10 { grid-column: span 10; } .dash-w11 { grid-column: span 11; } .dash-w12 { grid-column: span 12; }
.dash-blok { display: flex; flex-direction: column; min-width: 0; position: relative; padding: 0; }
.dash-kk { height: 48px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--line); }
.dash-titel { font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
a.dash-titel:hover .dash-chev { color: var(--ink); }
.dash-chev { font-style: normal; color: var(--axis); margin-left: 5px; font-weight: 400; }
.dash-ks { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.dash-kr { margin-left: auto; display: flex; gap: 4px; align-items: center; flex: none; }
.dash-kr a.ghost, .dash-kr span.ghost { color: var(--sub); }
.dash-ic { width: 28px; padding: 0; font-size: 15px; }
.dash-kopseg { padding: 2px; }
.dash-kopseg a { padding: 3px 10px; font-size: 12.5px; }
.dash-leeg { padding: 14px 20px 18px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.dash-cijfers { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); }
.dash-cijfers .cel { padding: 16px 20px 14px; border-left: 1px solid var(--grid); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-cijfers .cel:first-child { border-left: 0; }
.card.flush.dash-kpi { padding: 16px 20px 14px; gap: 2px; justify-content: space-between; }
.card.flush.dash-kpi.dash-w2 { padding: 16px 14px 14px; }
.dash-kpi.dash-w2 .dash-kpirij svg { display: none; }
.dash-kpi small, .dash-cijfers small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-kpirij { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; }
.dash-kpirij svg { flex: none; }
.dash-kpi b, .dash-cijfers b { font-size: 26px; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dash-kpi b.groot { font-size: 40px; }
.dash-s2 { display: block; font-size: 12.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-s2 em, .dash-hb .v em, .dash-feiten .v em { font-style: normal; font-weight: 600; }
.dash-s2 em.up, .dash-hb .v em.up, .dash-feiten .v.up, .dash-lijst .c.up .t { color: var(--pos); }
.dash-s2 em.down, .dash-hb .v em.down, .dash-feiten .v.down, .dash-lijst .c.down .t { color: var(--neg); }
.dash-grip { color: var(--muted); letter-spacing: -2px; margin-right: 6px; cursor: grab; font-size: 14px; flex: none; user-select: none; }
.dash-grip.los { position: absolute; left: 8px; top: 10px; margin: 0; z-index: 1; }
.dash-kr.los { position: absolute; right: 8px; top: 8px; z-index: 1; }
.dash-graf { padding: 10px 20px 12px; }
.dash-graf svg { display: block; width: 100%; height: auto; }
.dash-legenda { display: flex; gap: 16px; align-items: center; font-size: 12.5px; color: var(--sub); padding: 12px 20px 0; flex-wrap: wrap; }
.dash-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.dash-legenda i.lijn { width: 14px; height: 2px; border-radius: 1px; vertical-align: 3px; }
.dash-hb { padding: 8px 20px 10px; display: flex; flex-direction: column; }
.dash-hb > div { display: grid; grid-template-columns: 132px minmax(0,1fr) 92px; align-items: center; gap: 12px; min-height: 32px; font-size: 13px; }
.dash-hb.dubbel > div { min-height: 40px; grid-template-columns: 132px minmax(0,1fr) 132px; }
.dash-w3 .dash-hb > div { grid-template-columns: 92px minmax(0,1fr) 76px; gap: 8px; }
.dash-w4 .dash-hb.dubbel > div { grid-template-columns: 96px minmax(0,1fr) 128px; gap: 10px; }
.dash-w3 .dash-hb.dubbel > div { grid-template-columns: 84px minmax(0,1fr) 108px; }
.dash-hb .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.dash-hb .spoor { display: block; min-width: 0; }
.dash-hb .balkje { display: block; height: 12px; border-radius: 0 4px 4px 0; background: var(--data); }
.dash-hb .spoor2 { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-hb .spoor2 .balkje { height: 10px; }
.dash-hb .spoor2 .vorig { height: 6px; background: var(--axis); }
.dash-hb .v { text-align: right; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.dash-hb .v small { font-weight: 400; color: var(--muted); margin-left: 4px; font-size: 12px; }
.dash-hb .v em { font-size: 11.5px; margin-left: 6px; }
.dash-feiten { padding: 4px 20px 8px; display: flex; flex-direction: column; }
.dash-feiten > div { display: flex; justify-content: space-between; gap: 12px; min-height: 34px; align-items: center; font-size: 13.5px; border-top: 1px solid var(--grid); }
.dash-feiten > div:first-child { border-top: 0; }
.dash-feiten .l { color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-feiten .l { flex: 1 1 auto; min-width: 0; }
.dash-feiten .v { font-weight: 600; white-space: nowrap; text-align: right; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; max-width: 72%; font-variant-numeric: tabular-nums; }
.dash-feiten .v.warn { color: var(--warn); }
.dash-graf + .dash-feiten { border-top: 1px solid var(--grid); padding-top: 2px; }
.dash-doel { display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 16px; }
.dash-doel .dash-feiten { padding: 0; margin-top: 2px; }
.dash-doelkop { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; }
.dash-doelkop b { font-size: 22px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dash-doelkop span { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.dash-meter { height: 10px; border-radius: 5px; overflow: hidden; display: block; background: var(--ramp-1); }
.dash-meter i { display: block; height: 100%; border-radius: 0 5px 5px 0; background: var(--data); }
.dash-meter.warn i { background: var(--chip-orange-dot); }
.dash-meter.bad i { background: var(--chip-red-dot); }
.dash-meter.klein { height: 6px; border-radius: 3px; margin-top: 5px; }
.dash-doelform { display: flex; gap: 8px; align-items: center; }
.dash-doelform input { flex: 1; min-width: 0; }
.dash-aandacht { padding: 4px 12px 8px; display: flex; flex-direction: column; }
.dash-aandacht .groep { padding: 10px 8px 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.aandacht.dash-aandacht a.kv { display: grid; grid-template-columns: 8px minmax(0,1fr) auto 10px; gap: 10px; align-items: center; height: 34px; padding: 0 8px; border-radius: 7px; border-bottom: 0; font-size: 13.5px; }
.aandacht.dash-aandacht a.kv:hover { background: var(--wash2); }
.dash-aandacht a.kv .k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-aandacht a.kv .v { font-weight: 600; }
.dash-aandacht a.kv .pijl { color: var(--axis); }
.dash-aandacht .groep + a.kv { border-top: 0; }
.dash-lijst { display: flex; flex-direction: column; }
.dash-rij { display: grid; align-items: center; min-height: 44px; padding: 0 20px; gap: 10px; border-top: 1px solid var(--grid); font-size: 13.5px; grid-template-columns: minmax(0,1fr) auto; }
.dash-rij:first-child { border-top: 0; }
.dash-rij[data-href] { cursor: pointer; }
.dash-rij[data-href]:hover { background: var(--wash2); }
.dash-rij.dash-kopr { min-height: 34px; border-top: 0; border-bottom: 1px solid var(--line); background: var(--wash2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sub); font-weight: 600; }
.dash-rij.dash-kopr .c { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-rij .c { min-width: 0; }
.dash-rij .c.n { text-align: right; }
.dash-rij .c .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-rij .c .t.vet { font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-rij .c .s { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-rij .c.bad .t { color: var(--neg); }
.dash-rij .c.warn .t { color: var(--warn); }
.dash-rij .c.dl .t { font-size: 11.5px; font-weight: 600; }
.dash-rij .c .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-lijst.recent .dash-rij { grid-template-columns: 64px minmax(0,1fr) 96px 124px 80px; }
.dash-lijst.top .dash-rij { grid-template-columns: minmax(0,1fr) 44px 70px; }
.dash-lijst.top.smal .dash-rij { grid-template-columns: minmax(0,1fr) 76px; }
.dash-lijst.top.verschil .dash-rij { grid-template-columns: minmax(0,1fr) 44px 70px 64px; }
.dash-lijst.top.smal.verschil .dash-rij { grid-template-columns: minmax(0,1fr) 72px 78px; }
.dash-lijst.facturen .dash-rij { grid-template-columns: 96px minmax(0,1fr) 128px 88px; }
.dash-lijst.bestelpunt .dash-rij { grid-template-columns: minmax(0,1fr) 62px 84px 64px; }
.dash-lijst.ritten .dash-rij { grid-template-columns: 82px 72px minmax(0,1fr) 108px; }
.dash-lijst.opvolgen .dash-rij { grid-template-columns: 166px minmax(0,1fr) 72px 72px; }
.dash-lijst.nieuwe .dash-rij { grid-template-columns: minmax(0,1fr) 72px 120px; }
.dash-lijst.stil .dash-rij { grid-template-columns: minmax(0,1fr) 110px 60px; }
.dash-lijst.tickets .dash-rij { grid-template-columns: 64px minmax(0,1fr) 132px; }
.dash-lijst.planbord .dash-rij { grid-template-columns: 52px minmax(0,1fr) 128px; }
.dash-lijst.wiedoetwat .dash-rij { grid-template-columns: 196px minmax(0,1fr) 130px 110px; min-height: 52px; }
.dash-lijst.chatteam .dash-rij { grid-template-columns: minmax(0,1fr) 90px 90px; }
.dash-w3 .dash-lijst.top.smal .dash-rij, .dash-w3 .dash-lijst.top.smal.verschil .dash-rij { padding: 0 16px; }
.dash-doen { padding: 4px 20px 8px; }
.dash-doen > div { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 50px; border-top: 1px solid var(--grid); }
.dash-doen > div:first-child { border-top: 0; }
.dash-doen .c, .dash-agenda .c, .dash-team .c { min-width: 0; }
.dash-doen .t, .dash-agenda .t, .dash-team .t { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-doen .s, .dash-agenda .s, .dash-team .s { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-doen form { display: contents; }
.dash-taken { padding: 4px 20px 12px; }
.dash-taken > div { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 42px; font-size: 13.5px; border-top: 1px solid var(--grid); }
.dash-taken > div:first-child { border-top: 0; }
.dash-vinkform { display: contents; }
.dash-vink { width: 18px; height: 18px; border: 1.5px solid var(--axis); border-radius: 5px; background: var(--card); display: block; padding: 0; position: relative; }
.dash-vink:hover { border-color: var(--chip-green-dot); }
.dash-vink.aan { background: var(--chip-green-dot); border-color: var(--chip-green-dot); }
.dash-vink.aan::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dash-taken .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-taken .l.telaat { color: var(--neg); }
.dash-taken .klaar .l { color: var(--muted); text-decoration: line-through; }
.dash-taken .wie { display: inline-flex; align-items: center; gap: 8px; }
.dash-taken small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.dash-blok .av { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: #fff; font-weight: 700; font-size: 12px; flex: none; background: var(--muted); }
.dash-blok .av.mini { width: 24px; height: 24px; font-size: 10px; border-radius: 6px; }
.dash-taaknieuw { display: block; padding-top: 10px; }
.dash-taaknieuw input { width: 100%; }
.dash-agenda { padding: 8px 20px 12px; position: relative; }
.dash-agenda::before { content: ""; position: absolute; left: 74px; top: 24px; bottom: 28px; width: 2px; background: var(--grid); }
.dash-agenda > div { display: grid; grid-template-columns: 40px 10px minmax(0,1fr); gap: 10px; align-items: center; min-height: 46px; position: relative; }
.dash-agenda .tijd { font-size: 12.5px; color: var(--sub); white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-agenda > div > i { width: 10px; height: 10px; border-radius: 50%; background: var(--data); border: 2px solid var(--card); box-sizing: border-box; justify-self: center; position: relative; }
.dash-agenda .voorbij > i { background: var(--axis); }
.dash-agenda .voorbij .t, .dash-agenda .voorbij .tijd { color: var(--muted); font-weight: 400; }
.dash-agenda .later > i { background: var(--card); border: 2px solid var(--axis); }
.dash-agenda .nulijn { grid-template-columns: 40px minmax(0,1fr); min-height: 18px; }
.dash-agenda .nulijn .tijd { color: var(--chip-red-dot); }
.dash-agenda .nulijn > i { width: 100%; height: 2px; border-radius: 1px; background: var(--chip-red-dot); border: 0; justify-self: stretch; }
.dash-team { padding: 4px 20px 8px; }
.dash-team > div { display: grid; grid-template-columns: 32px minmax(0,1fr) 8px; gap: 12px; align-items: center; min-height: 50px; border-top: 1px solid var(--grid); }
.dash-team > div:first-child { border-top: 0; }
.dash-team > div > i { width: 8px; height: 8px; border-radius: 50%; background: var(--axis); }
.dash-team > div > i.groen { background: var(--chip-green-dot); }
.dash-verloop { padding: 6px 20px 10px; display: flex; flex-direction: column; }
.dash-verloop > div { display: grid; grid-template-columns: 8px minmax(0,1fr); gap: 12px; align-items: center; min-height: 44px; border-top: 1px solid var(--grid); }
.dash-verloop > div:first-child { border-top: 0; }
.dash-verloop > div > i { width: 8px; height: 8px; border-radius: 50%; background: var(--axis); }
.dash-verloop > div > i.blauw { background: var(--data); }
.dash-verloop > div > div { min-width: 0; }
.dash-verloop b { display: block; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-verloop small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-notitie { padding: 14px 20px 16px; }
.dash-notitie textarea { width: 100%; min-height: 96px; border: 1px solid var(--axis); border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 13.5px; line-height: 1.55; color: var(--ink); background: var(--card); resize: vertical; }
.dash-snelk { padding: 14px 20px 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.dash-snelkbewerk { padding: 0 20px 14px; }
.dash-snelkbewerk summary { list-style: none; display: inline-flex; align-items: center; cursor: pointer; }
.dash-snelkbewerk summary::-webkit-details-marker { display: none; }
.dash-snelkvorm { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.dash-snelkvorm .lb { font-size: 12.5px; color: var(--sub); }
.dash-snelkvorm textarea { width: 100%; border: 1px solid var(--axis); border-radius: 8px; padding: 8px 12px; font: inherit; font-size: 13px; line-height: 1.5; color: var(--ink); background: var(--card); resize: vertical; }
.dash-tekst { padding: 14px 20px 16px; font-size: 13.5px; line-height: 1.55; }
.dash-ringrij { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 16px; align-items: center; padding: 12px 20px 8px; }
.dash-ringlijst { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dash-ringlijst > div { display: grid; grid-template-columns: 10px minmax(0,1fr) 40px 64px; gap: 8px; align-items: center; font-size: 12.5px; }
.dash-ringlijst i { width: 10px; height: 10px; border-radius: 2px; display: block; }
.dash-ringlijst .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-ringlijst .p { text-align: right; color: var(--muted); }
.dash-ringlijst .v { text-align: right; font-weight: 600; white-space: nowrap; }
.dash-hm { padding: 12px 20px 10px; display: grid; gap: 3px; align-items: center; font-size: 11px; color: var(--muted); }
.dash-hm i { display: block; height: 20px; border-radius: 3px; }
.dash-hm .k { text-align: center; }
.dash-hm .r { text-align: left; }
.dash-hmlegenda { display: flex; align-items: center; gap: 4px; padding: 0 20px 14px; font-size: 11.5px; color: var(--muted); }
.dash-hmlegenda i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.dash-hmlegenda span + i { margin-left: 4px; }
.dash-hmlegenda i + span { margin-left: 4px; }
.dash-kstrip { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 8px; padding: 14px 20px 16px; }
.dash-kstrip > div { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-height: 84px; font-size: 12px; min-width: 0; }
.dash-kstrip .d { display: flex; justify-content: space-between; color: var(--muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px; }
.dash-kstrip .vandaag { border-color: var(--data); }
.dash-kstrip .vandaag .d { color: var(--data); }
.dash-kstrip .ev { margin-top: 8px; display: flex; flex-direction: column; align-items: center; color: var(--chip-blue-ink); }
.dash-kstrip .ev b { font-size: 22px; font-weight: 600; line-height: 1.1; }
.dash-kstrip .ev span { font-size: 11px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dash-kstrip .ev.klaar { color: var(--pos); }
.dash-kstrip .ev.leeg b { color: var(--axis); }
.dash-kstrip + .dash-feiten { border-top: 1px solid var(--grid); }
.dash-raster.indelen .dash-blok { outline: 1.5px dashed var(--dash-outline); outline-offset: -1px; }
.dash-raster.indelen .dash-chev, .dash-raster.indelen .dash-kk .dash-ks { display: none; }
.dash-raster.indelen .card.flush.dash-kpi { padding-left: 30px; }
.dash-raster.indelen .dash-cijfers .cel:first-child { padding-left: 30px; }
.dash-raster.indelen .dash-cijfers .cel:last-child { padding-right: 72px; }
.dash-raster.indelen .dash-blok[draggable="true"] { cursor: grab; }
.dash-blok.sleep { opacity: .45; }
.dash-hoek { position: absolute; right: 5px; bottom: 5px; width: 12px; height: 12px; border-right: 2px solid var(--dash-outline); border-bottom: 2px solid var(--dash-outline); border-radius: 0 0 3px 0; cursor: nwse-resize; z-index: 1; }
.dash-ghost { border: 2px dashed var(--data); border-radius: 12px; background: var(--data-wash); display: grid; place-items: center; color: var(--data); font-weight: 600; min-height: 120px; font-size: 13.5px; text-align: center; padding: 12px; }
.dash-indelbalk { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--data-wash); border: 1px solid var(--dash-outline); border-radius: 12px; padding: 10px 16px; font-size: 13.5px; color: var(--ink); margin-bottom: 16px; }
.dash-indelbalk .rechts { display: flex; gap: 8px; align-items: center; flex: none; }
.dash-indelbalk .rechts form { display: contents; }
.dash-indelbalk select.ghost.small { padding-right: 8px; }
.dash-lade { position: fixed; right: 24px; top: 150px; width: 340px; max-height: calc(100vh - 170px); box-shadow: 0 20px 56px rgba(16,24,40,.22); z-index: 60; display: flex; flex-direction: column; overflow: hidden; }
.dash-lade[hidden] { display: none; }
.dash-pk2 { height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--line); flex: none; }
.dash-pk2 b { font-weight: 600; white-space: nowrap; }
.dash-pz { padding: 12px 16px 0; flex: none; }
.dash-pz input { width: 100%; }
.dash-groepen { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 12px; border-bottom: 1px solid var(--grid); flex: none; }
.dash-groepen .fchip { cursor: pointer; height: 24px; font-size: 12px; padding: 0 9px; display: inline-flex; align-items: center; user-select: none; }
.dash-groepen .fchip.cur { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); font-weight: 550; }
.dash-ladelijst { overflow-y: auto; flex: 1; min-height: 0; }
.dash-ladelijst .item { display: grid; grid-template-columns: 40px minmax(0,1fr) 32px; gap: 10px; align-items: center; min-height: 52px; padding: 0 16px; border-top: 1px solid var(--grid); cursor: grab; }
.dash-ladelijst .item:first-child { border-top: 0; }
.dash-ladelijst .item.staat { opacity: .5; }
.dash-ladelijst .item[hidden] { display: none; }
.dash-ladelijst .mini { width: 40px; height: 30px; border-radius: 6px; background: var(--wash); display: grid; place-items: center; overflow: hidden; color: var(--data); font-weight: 700; font-size: 13px; }
.dash-ladelijst .mini svg { display: block; }
.dash-ladelijst .tekst { min-width: 0; }
.dash-ladelijst .tekst b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.dash-ladelijst .tekst small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-pvoet { padding: 10px 16px 12px; border-top: 1px solid var(--grid); color: var(--muted); font-size: 12.5px; flex: none; }
.dash-overlay { position: fixed; inset: 0; background: rgba(16,24,40,.38); z-index: 90; }
.dash-overlay[hidden] { display: none; }
.dash-modal { position: absolute; left: 50%; top: 48px; transform: translateX(-50%); width: 880px; max-width: calc(100vw - 32px); max-height: calc(100vh - 80px); box-shadow: 0 24px 64px rgba(16,24,40,.3); display: flex; flex-direction: column; overflow: hidden; }
.dash-modal .dash-mk { height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 24px; border-bottom: 1px solid var(--line); flex: none; }
.dash-modal .dash-mk b { font-size: 16px; white-space: nowrap; font-weight: 600; }
.dash-modal .dash-mk .dash-ks { flex: 1; }
.dash-instelwrap { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 24px; padding: 18px 24px 8px; overflow-y: auto; min-height: 0; }
.dash-instel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dash-vbkol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dash-vbkol .dash-blok { pointer-events: none; }
.dash-vbkol .s { color: var(--muted); font-size: 12.5px; margin: 0; }
.dash-veld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dash-veld .lb { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.dash-veld input[type="text"], .dash-veld select { width: 100%; }
.dash-velden2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.dash-velden2[hidden] { display: none; }
.dash-seg { flex-wrap: wrap; align-self: flex-start; }
.dash-seg a { cursor: pointer; user-select: none; }
.dash-seg a.cur { background: var(--card); color: var(--ink); font-weight: 550; box-shadow: 0 0 0 1px var(--line); }
.dash-seg a[hidden] { display: none; }
.dash-rijtje { display: flex; gap: 8px; align-items: center; }
.dash-rijtje .s { color: var(--muted); font-size: 12.5px; }
.dash-instel input.smal { width: 110px; flex: none; }
.dash-mv { display: flex; align-items: center; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--line); flex: none; }
.dash-tip { position: fixed; z-index: 120; background: var(--btn-bg); color: var(--btn-ink); border-radius: 8px; padding: 8px 12px; font-size: 12px; line-height: 1.45; max-width: 280px; pointer-events: none; box-shadow: 0 8px 24px rgba(16,24,40,.18); white-space: pre-line; }
.dash-tip[hidden] { display: none; }
[data-tip] { cursor: default; }
.dash-tv { background: var(--bg); padding: 24px 32px 20px; display: flex; flex-direction: column; gap: 20px; min-height: 100vh; }
.dash-tvkop { display: flex; align-items: center; gap: 16px; height: 44px; }
.dash-tvkop img { height: 22px; width: auto; }
.dash-tvtitel { font-size: 18px; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-tvkop .rechts { display: flex; gap: 14px; align-items: center; white-space: nowrap; }
.dash-tvkop .s { color: var(--muted); font-size: 13px; }
.dash-klok { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.dash-tvinhoud { padding: 0; }
.dash-tv .dash-kpi { padding: 22px 24px 20px; }
.dash-tv .dash-kpi small { font-size: 12px; }
.dash-tv .dash-kpi b { font-size: 40px; }
.dash-tv .dash-s2 { font-size: 14px; }
.dash-tv .dash-titel { font-size: 16px; }
.dash-tv .aandacht.dash-aandacht a.kv { height: 40px; font-size: 15px; }
.dash-tv .dash-feiten > div { font-size: 15px; min-height: 40px; }
.dash-tv .dash-doen .ghost, .dash-tv .dash-taaknieuw, .dash-tv .dash-doelform { display: none; }
.dash-tvvoet { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; padding-top: 4px; gap: 16px; }
.dash-tvvoet a { color: var(--muted); }
@media (max-width: 1100px) {
.dash-raster { grid-template-columns: repeat(6, minmax(0,1fr)); }
.dash-w7, .dash-w8, .dash-w9, .dash-w10, .dash-w11, .dash-w12 { grid-column: span 6; }
.dash-w5 { grid-column: span 3; }
.dash-cijfers { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0,1fr)); }
.dash-cijfers .cel:nth-child(3n+1) { border-left: 0; }
.dash-pp { width: min(792px, calc(100vw - 48px)); }
.dash-lade { right: 12px; }
}
@media (max-width: 1100px) {
.dash-instelwrap { grid-template-columns: minmax(0,1fr); }
.dash-vbkol { display: none; }
}
@media (max-width: 700px) {
.dash-raster { grid-template-columns: minmax(0,1fr); }
.dash-lijst, .an-matrixwrap, .dash-hm { overflow-x: auto; }
.dash-kk { height: auto; min-height: 48px; flex-wrap: wrap; row-gap: 6px; padding: 8px 12px 8px 16px; }
.dash-kk .dash-kr { flex: 1 1 100%; margin-left: 0; flex-wrap: wrap; justify-content: flex-start; }
.dash-indelbalk .rechts { flex-wrap: wrap; max-width: 100%; }
.dash-hb > div, .dash-hb.dubbel > div, .dash-w3 .dash-hb > div, .dash-w4 .dash-hb.dubbel > div, .dash-w6 .dash-hb > div { grid-template-columns: 96px minmax(0,1fr) auto; gap: 8px; }
.dash-hb .v { white-space: normal; max-width: 120px; }
.dash-hb .v em { display: block; margin-left: 0; }
.dash-acties { justify-content: flex-start; }
.dash-raster > .dash-blok, .dash-raster > .dash-ghost { grid-column: auto; }
.dash-cijfers { grid-template-columns: minmax(0,1fr); }
.dash-cijfers .cel { border-left: 0; border-top: 1px solid var(--grid); }
.dash-cijfers .cel:first-child { border-top: 0; }
.dash-pp { grid-template-columns: minmax(0,1fr); }
.dash-ppl { border-right: 0; border-bottom: 1px solid var(--line); }
.dash-kstrip { grid-template-columns: repeat(2, minmax(0,1fr)); }
.dash-tabs { gap: 14px; }
.dash-indelbalk { flex-direction: column; align-items: flex-start; }
.dash-lade { right: 8px; left: 8px; width: auto; }
.dash-tv { padding: 16px; }
.dash-tvkop { height: auto; flex-wrap: wrap; row-gap: 6px; }
.dash-tvtitel { flex: 1 1 100%; white-space: normal; }
.dash-tvkop .rechts { flex-wrap: wrap; white-space: normal; }
.dash-tvvoet { flex-direction: column; gap: 6px; }
}
.an-bouwer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 20px; min-height: 60px; margin-bottom: 12px; box-shadow: var(--shadow); }
.an-bouwer .lb { color: var(--sub); font-weight: 500; white-space: nowrap; font-size: 13.5px; }
.an-bouwer .vl { flex: 1; }
.an-bouwer select.ghost.small { width: auto; padding-right: 26px; }
.an-bouwer .an-titel { cursor: default; max-width: 360px; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 26px; }
.an-bouwer .an-uitleg { max-width: 560px; white-space: normal; line-height: 1.4; }
.an-bouwer .an-seg { flex: none; }
.an-keuzes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; padding: 0 4px; }
.an-keuzes .s { color: var(--muted); font-size: 12.5px; margin-right: 2px; }
.an-keuzes .spatie { margin-left: 14px; }
.an-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--axis); border-radius: 999px; font-size: 12.5px; background: var(--card); color: var(--ink); text-decoration: none; white-space: nowrap; }
.an-tag:hover { background: var(--wash2); }
.an-tag.cur { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); font-weight: 550; }
.an-uitkomst { margin-bottom: 16px; }
.an-uitkomst .dash-graf { padding: 8px 20px 4px; }
.an-uitkomst .dash-kr form { display: contents; }
.an-bewaar .dash-meer-menu { width: 300px; padding: 12px; gap: 8px; }
.an-bewaar .dash-meer-menu .lb { font-size: 12.5px; font-weight: 600; }
.an-bewaar .dash-meer-menu input { width: 100%; }
.an-bewaarvorm { display: flex; flex-direction: column; }
.dash-kpilos { padding: 16px 20px 14px; display: flex; flex-direction: column; gap: 2px; }
.dash-kpilos small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.dash-kpilos b { font-size: 26px; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.dash-kpilos b.groot { font-size: 34px; }
.an-matrixwrap { border-top: 1px solid var(--line); }
.an-matrixwrap.breed { overflow-x: auto; }
.an-matrix { display: flex; flex-direction: column; min-width: 100%; }
.an-matrix .an-rij { grid-template-columns: 150px repeat(var(--kol), minmax(0, 1fr)) 92px 92px 76px; font-size: 12.5px; min-height: 40px; gap: 6px; }
.an-matrixwrap.breed .an-rij { width: max-content; min-width: 100%; grid-template-columns: 150px repeat(var(--kol), 80px) 92px 92px 76px; }
.an-matrix .an-rij.dash-kopr { font-size: 10.5px; min-height: 34px; }
.an-matrix .an-rij.totaal { border-top: 2px solid var(--line); font-weight: 600; }
.an-matrix .c { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.an-matrix .key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: -1px; }
.an-matrix .dl { font-style: normal; font-size: 11.5px; font-weight: 600; }
.an-matrix .dl.up, .dash-lijst .dl.up { color: var(--pos); }
.an-matrix .dl.down, .dash-lijst .dl.down { color: var(--neg); }
.an-standaard { margin-bottom: 16px; }
.an-catgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; padding: 16px 20px 20px; }
.an-kaartje { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: var(--ink); }
.an-kaartje:hover { border-color: var(--dash-outline); }
.an-kaartje .voorbeeld { height: 96px; background: var(--wash2); border-bottom: 1px solid var(--grid); padding: 12px 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.an-kaartje .voorbeeld svg { max-width: 100%; height: auto; }
.an-kaartje .kt { padding: 12px 16px 0; min-width: 0; }
.an-kaartje .kt b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-kaartje .kt small { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.an-kaartje .kf { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 14px; }
.an-kaartje .kf .s { color: var(--muted); font-size: 12.5px; }
.an-mini-hb { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 4px 8px; align-items: center; width: 100%; font-size: 11px; color: var(--sub); }
.an-mini-hb .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-mini-hb .spoor { display: block; min-width: 0; }
.an-mini-hb .spoor i { display: block; height: 7px; border-radius: 0 3px 3px 0; background: var(--data); }
.an-mini-hb .v { font-weight: 600; white-space: nowrap; text-align: right; }
.an-mini-hm { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 2px; width: 100%; }
.an-mini-hm i { display: block; height: 12px; border-radius: 2px; }
.an-onder { margin-bottom: 16px; }
.dash-lijst.mijnanalyses .dash-rij { grid-template-columns: minmax(0,1fr) 140px 150px 96px 40px; }
.dash-lijst.mijnanalyses .dash-rij form { display: contents; }
.an-schakel { display: contents; }
.an-sw { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.an-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.an-sw i { display: inline-block; width: 34px; height: 20px; border-radius: 999px; background: var(--axis); position: relative; flex: none; transition: background .15s; }
.an-sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.an-sw input:checked + i { background: var(--chip-green-dot); }
.an-sw input:checked + i::after { left: 16px; }
.an-sw input:focus-visible + i { outline: 2px solid var(--data); outline-offset: 2px; }
.dash-blok.gekozen { outline: 2px solid var(--data); outline-offset: -2px; }
.dash-lijst.tabelmini .dash-rij { grid-template-columns: minmax(0,1fr) 56px 56px 66px; min-height: 38px; font-size: 12px; gap: 6px; }
.dash-lijst.tabelmini .dash-rij.dash-kopr { min-height: 30px; font-size: 10px; }
.an-alle { margin-bottom: 16px; }
.an-zoekvorm { display: contents; }
.an-zoek { width: 260px; }
.an-acat { display: grid; grid-template-columns: 200px minmax(0,1fr); }
.an-acat nav { border-right: 1px solid var(--line); padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; }
.an-acat nav a { height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-radius: 7px; color: var(--ink); white-space: nowrap; text-decoration: none; font-size: 13.5px; }
.an-acat nav a:hover { background: var(--wash2); }
.an-acat nav a.cur { background: var(--wash); font-weight: 600; }
.an-acat nav a em { font-style: normal; color: var(--muted); font-size: 12px; }
.an-agrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; padding: 14px 20px 20px; align-content: start; }
.an-agroep { grid-column: 1 / -1; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 12px 0 2px; display: flex; gap: 8px; }
.an-agroep:first-child { padding-top: 0; }
.an-agroep span { color: var(--axis); }
.an-acard { display: grid; grid-template-columns: 44px minmax(0,1fr) 10px; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-height: 64px; min-width: 0; text-decoration: none; color: var(--ink); }
.an-acard:hover { border-color: var(--dash-outline); }
.an-acard .pijl { color: var(--axis); }
.an-acard .mini { width: 44px; height: 30px; border-radius: 6px; background: var(--wash); display: grid; place-items: center; overflow: hidden; }
.an-acard > div { min-width: 0; }
.an-acard b { display: block; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-acard small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-ministaafjes { width: 34px; display: flex; flex-direction: column; gap: 3px; }
.an-ministaafjes i { display: block; height: 6px; border-radius: 0 3px 3px 0; background: var(--data); }
.an-minihm { display: grid; grid-template-columns: repeat(6, 5px); gap: 2px; }
.an-minihm i { display: block; height: 5px; border-radius: 1px; }
.an-agrid .dash-leeg { grid-column: 1 / -1; }
.dash-lijst.landing .dash-rij { grid-template-columns: minmax(0,1fr) 72px 72px 96px; }
.dash-lijst.zoekweb .dash-rij { grid-template-columns: minmax(0,1fr) 64px 92px 92px; }
.dash-lijst.bekeken .dash-rij { grid-template-columns: minmax(0,1fr) 70px 70px 180px; }
.dash-lijst.uitverkocht .dash-rij { grid-template-columns: minmax(0,1fr) 80px 92px 220px; }
.dash-lijst.vergtabel .dash-rij { grid-template-columns: minmax(0,1fr) 104px 104px 84px 120px; }
.dash-lijst.kanverg .dash-rij { grid-template-columns: minmax(0,1fr) 104px 104px 84px; }
.dash-lijst.vestverg .dash-rij { grid-template-columns: minmax(0,1fr) repeat(var(--n, 2), minmax(90px, 140px)) 120px 150px; }
.dash-lijst .c.goed .t { color: var(--pos); }
.dash-dv { display: block; position: relative; height: 10px; width: 100%; background: var(--wash); border-radius: 5px; overflow: hidden; }
.dash-dv::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--axis); }
.dash-dv i { position: absolute; top: 0; bottom: 0; display: block; }
.dash-dv i.pos { background: var(--chip-green-dot); border-radius: 0 5px 5px 0; }
.dash-dv i.neg { background: var(--chip-red-dot); border-radius: 5px 0 0 5px; }
@media (max-width: 1100px) {
.an-catgrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.an-agrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.an-acat { grid-template-columns: minmax(0,1fr); }
.an-acat nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 700px) {
.an-catgrid, .an-agrid { grid-template-columns: minmax(0,1fr); }
.an-matrix .an-rij { font-size: 11.5px; }
}
.dash-w3 .dash-ringrij, .dash-w4 .dash-ringrij { grid-template-columns: minmax(0,1fr); justify-items: stretch; gap: 10px; }
.dash-w3 .dash-ringrij > div:first-child, .dash-w4 .dash-ringrij > div:first-child { display: flex; justify-content: center; }
.dash-w3 .dash-hb .v small { display: none; }
.dash-w6 .dash-hb > div { grid-template-columns: 200px minmax(0,1fr) 140px; }
.dash-hm .r { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.an-uitkomst .dash-kpilos b { font-size: 34px; }
main.content:has(.dash-kopwrap) nav.crumbs { display: none; }
.dash-w3 .dash-hm .k { font-size: 9px; letter-spacing: -.02em; overflow: hidden; }
.zichtkeus{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 18px 0}
.zichtkeus.twee{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.zichtkeus label{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;font-size:13px}
.zichtkeus label:has(input:checked){border-color:#1f6feb;box-shadow:0 0 0 3px rgba(31,111,235,.12)}
.zichtkeus label input{margin:3px 0 0}
.zichtkeus label b{display:block;font-size:13.5px}
.zichtkeus label span{grid-column:2;color:var(--muted);font-size:12.5px;line-height:1.45}
body.volledig-gastheer { margin: 0; overflow: hidden; background: var(--bg, #fff); }
body.volledig-gastheer #volledig-frame { position: fixed; inset: 0; width: 100vw; height: 100vh; border: 0; display: block; background: var(--bg, #fff); }
.dash-cellink { display: block; color: inherit; text-decoration: none; margin: -16px -20px -14px; padding: 16px 20px 14px; border-radius: 12px; }
.dash-cellink:hover { background: var(--wash2); }
.dash-cellink:hover small { color: var(--data); }
.dash-cijfers .cel .dash-cellink { margin: -16px -20px -14px; }
.dash-kpi.dash-w2 .dash-cellink { margin: -16px -14px -14px; padding: 16px 14px 14px; }
.dash-hb > div[data-href], .dash-feiten > div[data-href], .dash-team > div[data-href], .dash-verloop > div[data-href], .dash-agenda > div[data-href], .dash-ringlijst > div[data-href], .dash-kstrip > div[data-href], .an-rij[data-href] { cursor: pointer; }
.dash-hb > div[data-href]:hover, .dash-feiten > div[data-href]:hover, .dash-team > div[data-href]:hover, .dash-verloop > div[data-href]:hover, .dash-agenda > div[data-href]:hover, .dash-ringlijst > div[data-href]:hover, .an-rij[data-href]:hover { background: var(--wash2); box-shadow: 0 0 0 6px var(--wash2); border-radius: 4px; }
.dash-kstrip > div[data-href]:hover { border-color: var(--data); }
.dash-hb a.l, .dash-feiten a.l, .dash-team a.t, .dash-agenda a.t, .dash-verloop a, .dash-ringlijst a.l, .an-rij .naam a { color: inherit; text-decoration: none; }
.dash-hb a.l:hover, .dash-feiten a.l:hover, .dash-team a.t:hover, .dash-agenda a.t:hover, .dash-verloop a:hover b, .dash-ringlijst a.l:hover, .an-rij .naam a:hover { color: var(--data); text-decoration: underline; text-underline-offset: 2px; }
.dash-agenda a.t { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-team a.t { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-hb a.l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-hm a.cel { display: block; height: 20px; border-radius: 3px; }
.dash-hm a.cel:hover { outline: 2px solid var(--data); outline-offset: -1px; }
.graf-svg a { cursor: pointer; }
.graf-svg a:hover rect { fill: var(--data-wash); }
.dash-taken .l a { color: inherit; text-decoration: none; }
.dash-taken .l a:hover { color: var(--data); text-decoration: underline; text-underline-offset: 2px; }
.an-tag.an-filter b { margin-left: 7px; font-weight: 700; font-size: 14px; line-height: 1; }
.an-tag.an-filter:hover { background: var(--bad-ink, #b42318); border-color: var(--bad-ink, #b42318); }
.an-hint { padding: 8px 14px 12px; color: var(--muted); font-size: 12px; }
@media (max-width: 700px) {
.dash-w6 .dash-hb > div, .dash-w8 .dash-hb > div, .dash-w12 .dash-hb > div { grid-template-columns: 96px minmax(0,1fr) auto; gap: 8px; }
}
.ex-strook { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ex-strook > div { padding: 12px 18px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ex-strook > div:first-child { border-left: 0; }
.ex-strook small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; }
.ex-strook b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-strook span { font-size: 12.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-strook .goed { color: var(--pos); }
.ex-strook .let { color: var(--chip-orange-ink); }
.ex-strook .bad { color: var(--neg); }
.ex-uitkomst { padding: 10px 18px; background: var(--wash2); border-top: 1px solid var(--line); font-size: 13px; color: var(--sub); line-height: 1.5; }
.ex-uitkomst b { color: var(--ink); }
.ex-uitkomst.let { background: var(--chip-orange-bg); }
.ex-kies { margin: 0 0 12px; }
.ex-sub { display: block; font-size: 12.5px; color: var(--muted); white-space: normal; }
.ex-reden { color: var(--sub); }
.ex-inspring { padding-left: 14px; color: var(--sub); }
.ex-twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ex-drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.ex-stappen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; padding: 12px 18px; }
.ex-stappen > div { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: 13px; line-height: 1.5; color: var(--sub); }
.ex-stappen i { width: 22px; height: 22px; border-radius: 50%; background: var(--data-wash); color: var(--data); display: inline-grid; place-items: center; font-size: 11px; font-style: normal; font-weight: 700; }
.ex-stappen b { color: var(--ink); }
.ex-nr { width: 22px; height: 22px; border-radius: 50%; background: var(--wash2); display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--sub); }
.ex-acties { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.ex-segment-links a { display: inline-block; padding: 5px 10px; font-size: 12.5px; color: var(--sub); text-decoration: none; border-right: 1px solid var(--line); }
.ex-segment-links a:last-child { border-right: 0; }
.ex-segment-links a.aan { background: var(--btn-bg); color: var(--btn-ink); }
.lt tr.ex-kanaal td { background: var(--wash2); }
.lt tr.ex-mislukt td { background: var(--chip-red-bg); }
.lt .segment { transform: scale(.92); transform-origin: left center; }
@media (max-width: 900px) { .ex-twee, .ex-drie, .ex-stappen { grid-template-columns: minmax(0, 1fr); } }
.ex-gekozen { border-color: var(--btn-bg); }
.lt.ex-vast { table-layout: fixed; width: 100%; }
.lt.ex-vast th, .lt.ex-vast td { white-space: normal; overflow-wrap: anywhere; }
.kraster.kraster-breed{display:block}
.kraster.kraster-breed .kkol{max-width:none;width:100%}
.bw{display:flex;flex-direction:column;gap:12px;width:100%;min-width:0}
.bw-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,.9fr) minmax(0,1.1fr);gap:10px 12px;align-items:end;padding:12px 16px}
.bw-bar .field{margin:0;min-width:0}
.bw-bar .field input,.bw-bar .field select{width:100%;text-align:left}
.bw-bar-midden{grid-column:1/4;display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-height:36px}
@media (max-width:980px){.bw-bar{grid-template-columns:1fr}.bw-bar-midden,.bw-bar-rechts{grid-column:1}}
.bw-bar-midden .seg{display:inline-flex}
.bw-body{display:grid;grid-template-columns:248px minmax(0,1fr) 320px;gap:12px;align-items:stretch}
.bw-links,.bw-rechts{display:flex;flex-direction:column;min-height:640px;max-height:calc(100vh - 220px);overflow:auto}
.bw-tabs{display:flex;gap:16px;padding:0 14px;border-bottom:1px solid var(--line)}
.bw-tabs a{height:40px;display:inline-flex;align-items:center;color:var(--muted);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.bw-tabs a.cur{color:var(--ink);font-weight:600;border-color:var(--ink)}
.bw-palet{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px}
.bw-tegel{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font:inherit;font-size:12.5px;color:var(--ink);cursor:grab;text-align:center;min-width:0}
.bw-tegel:hover{border-color:var(--ink)}
.bw-tegel small{color:var(--muted);font-size:11px}
.bw-tegel-vast{cursor:default;opacity:.75}
.bw-ic{display:block;width:34px;height:14px;border-radius:4px;background:#d9dde5}
.bw-ic-kop{width:28px;height:6px;background:#5b4bd6}
.bw-ic-tekst{background:repeating-linear-gradient(#c4c8d0 0 2px,transparent 2px 5px)}
.bw-ic-foto{background:#bfe0c8}.bw-ic-fototekst{background:linear-gradient(90deg,#bfe0c8 45%,transparent 45% 55%,#c4c8d0 55%)}
.bw-ic-knop{width:22px;border-radius:999px;background:#151821}
.bw-ic-artikelen{background:linear-gradient(90deg,#c9d3f0 30%,transparent 30% 35%,#c9d3f0 35% 65%,transparent 65% 70%,#c9d3f0 70%)}
.bw-ic-kortingscode{background:#fdf1dc;border:1px dashed #e8a13c}
.bw-ic-scheiding{height:2px;background:#98a1ad}.bw-ic-sociaal{width:30px;background:radial-gradient(circle,#98a1ad 3px,transparent 3.5px) 0 0/10px 14px repeat-x}
.bw-ic-voet{height:10px;background:#eef0f4}
.bw-ic-twee{background:linear-gradient(90deg,#dfe3ea 0 46%,transparent 46% 54%,#dfe3ea 54%)}
.bw-ic-aftelklok{background:repeating-linear-gradient(90deg,#151821 0 8px,transparent 8px 11px);width:30px}
.bw-ic-video{background:#3a3f4b;position:relative}.bw-ic-video::after{content:"";position:absolute;left:14px;top:3px;border:4px solid transparent;border-left:7px solid #fff;border-right:0}
.bw-ic-tabel{background:repeating-linear-gradient(#c4c8d0 0 1px,transparent 1px 4px),linear-gradient(90deg,transparent 0 40%,#c4c8d0 40% 41%,transparent 41%)}
.bw-ic-sterren{background:#fdf1dc;border:1px solid #e8a13c}
.bw-ic-html{background:#eef0f4;border:1px solid #98a1ad}
.bw-ic-cijfer{background:repeating-linear-gradient(90deg,#151821 0 5px,transparent 5px 7px);width:34px}
.bw-lagen{list-style:none;margin:0;padding:8px;display:flex;flex-direction:column;gap:4px}
.bw-laag{display:flex;align-items:center;gap:8px;padding:7px 8px;border:1px solid var(--line);border-radius:8px;cursor:grab;font-size:13px;min-width:0;background:var(--surface)}
.bw-laag.sel{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.bw-laag.verborgen{opacity:.55}
.bw-laag span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-laag small{color:var(--muted)}
.bw-laag button{border:0;background:none;padding:2px 4px;cursor:pointer;color:var(--muted);font:inherit}
.bw-laag button:hover{color:var(--ink)}
.bw-laag.over{border-top:2px solid var(--ink)}
.bw-hint{padding:10px 14px;color:var(--muted);font-size:12.5px;border-top:1px solid var(--line);margin-top:auto}
.bw-canvas{background:var(--wash);border:1px solid var(--line);border-radius:12px;display:flex;justify-content:center;align-items:flex-start;padding:16px;min-height:640px;max-height:calc(100vh - 220px);overflow:auto}
.bw-canvas.over{outline:2px dashed var(--ink);outline-offset:-6px}
#bw-voorbeeld{width:640px;max-width:100%;height:calc(100vh - 260px);min-height:600px;border:0;background:transparent;border-radius:8px;transition:width .2s}
.bw-canvas.telefoon #bw-voorbeeld{width:400px}
.bw-rechts .bw-leeg{padding:16px 14px;color:var(--muted);font-size:13px}
.bw-paneel-kop{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line)}
.bw-paneel-kop b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-paneel-kop button{border:1px solid var(--line);background:var(--surface);border-radius:6px;width:26px;height:26px;cursor:pointer;color:var(--ink);font:inherit;font-size:12px;flex:none}
.bw-paneel-kop b{font-size:13px}
.bw-paneel-kop button:hover{border-color:var(--ink)}
.bw-velden{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.bw-velden .field{margin:0}
.bw-velden .field input,.bw-velden .field select,.bw-velden .field textarea{width:100%;text-align:left;font:inherit;font-size:13.5px}
.bw-velden textarea{min-height:120px;resize:vertical}
.bw-velden .cell-sub{font-size:12px}
.bw-velden .seg{display:inline-flex}
.bw-kies{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bw-kies img{width:56px;height:42px;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:var(--wash)}
.bw-media{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-height:260px;overflow:auto;padding:2px}
.bw-media button{border:1px solid var(--line);border-radius:8px;padding:0;background:var(--surface);cursor:pointer;overflow:hidden;aspect-ratio:4/3}
.bw-media button img{width:100%;height:100%;object-fit:cover;display:block}
.bw-media button.sel{outline:2px solid var(--ink)}
.bw-chips{display:flex;flex-wrap:wrap;gap:6px}
.bw-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:3px 8px 3px 10px;font-size:12.5px;background:var(--surface);max-width:100%}
.bw-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.bw-chip button{border:0;background:none;cursor:pointer;color:var(--muted);padding:0;font:inherit}
.bw-zoek{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow:auto}
.bw-zoek button{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--surface);cursor:pointer;font:inherit;font-size:13px;text-align:left;min-width:0}
.bw-zoek button img{width:40px;height:30px;object-fit:cover;border-radius:4px;background:var(--wash);flex:none}
.bw-zoek button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-zoek button small{color:var(--muted);white-space:nowrap}
.bw-velden-knop{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:6px;padding:4px 10px;background:var(--surface);cursor:pointer;font:inherit;font-size:12.5px;color:var(--ink)}
.bw-velden-knop:hover{border-color:var(--ink)}
@media (max-width:1200px){.bw-body{grid-template-columns:200px minmax(0,1fr) 280px}}
@media (max-width:980px){.bw-body{grid-template-columns:1fr}.bw-links,.bw-rechts{max-height:none;min-height:0}}
.gl{display:flex;flex-direction:column;width:100%;min-width:0}
.gl-balk{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.gl-tabs{margin:0}
.gl-tabs em{font-style:normal;color:var(--muted);margin-left:5px;font-size:12px}
#gl-zoek{width:240px}
.gl-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:14px 18px}
.gl-tegel{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;background:var(--surface);min-width:0}
.gl-tegel:hover{border-color:var(--ink)}
.gl-tegel.cur,.gl-tegel:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.gl-tegel input{position:absolute;opacity:0;pointer-events:none}
.gl-thumb{display:block;background:var(--wash);padding:16px 18px}
.gl-naam{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 12px 12px;text-align:center;border-top:1px solid var(--line);min-width:0}
.gl-naam b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.gl-naam small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.gl-weg{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;font:inherit;line-height:1}
.gl-weg:hover{color:#b42318;border-color:#b42318}
.gl-leeg{padding:6px 0;grid-column:1/-1}
.gl-tegel[hidden]{display:none}
.mm{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:10px 12px;min-height:150px;width:100%}
.mm i{display:block;border-radius:3px;background:#e6e8ee;height:6px}
.mm .mm-kop{width:44%;height:8px;background:var(--ink)}
.mm .mm-tekst{height:14px;background:repeating-linear-gradient(#dfe2e8 0 3px,transparent 3px 6px)}
.mm .mm-foto{height:34px;background:#bfe0c8}
.mm .mm-fototekst{height:26px;background:linear-gradient(90deg,#bfe0c8 46%,transparent 46% 54%,#dfe2e8 54%)}
.mm .mm-knop{width:36%;height:10px;border-radius:999px;background:#2a5d34}
.mm .mm-artikelen{height:24px;background:linear-gradient(90deg,#c9d3f0 31%,transparent 31% 34.5%,#c9d3f0 34.5% 65.5%,transparent 65.5% 69%,#c9d3f0 69%)}
.mm .mm-kortingscode{height:10px;background:#fdf1dc;border:1px dashed #e8a13c}
.mm .mm-scheiding{height:1px;background:#c4c8d0}
.mm .mm-sociaal{width:40%;height:6px;background:radial-gradient(circle,#98a1ad 2px,transparent 2.5px) 0 0/9px 6px repeat-x}
.mm .mm-leeg{height:120px;background:transparent;border:1px dashed var(--line)}
.mm .mm-twee{height:26px;background:linear-gradient(90deg,#dfe3ea 0 48%,transparent 48% 52%,#dfe3ea 52%)}
.mm .mm-aftelklok{width:60%;height:14px;background:repeating-linear-gradient(90deg,#151821 0 14px,transparent 14px 18px)}
.mm .mm-video{height:30px;background:#3a3f4b}
.mm .mm-tabel{height:20px;background:repeating-linear-gradient(#c4c8d0 0 1px,transparent 1px 5px)}
.mm .mm-sterren{width:50%;height:10px;background:#fdf1dc;border:1px solid #e8a13c}
.mm .mm-html{height:16px;background:#eef0f4;border:1px solid #98a1ad}
.mm .mm-cijfer{height:10px;background:repeating-linear-gradient(90deg,#151821 0 6px,transparent 6px 9px)}
.bw-bar-rechts{grid-column:4;justify-self:end;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bw-ontwerp{grid-column:1/-1;display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;padding-top:4px;border-top:1px solid var(--line)}
.bw-ontwerp .field{flex:1 1 200px}
.bw-hulp{padding:0 12px 12px;border-top:1px solid var(--line);margin-top:4px}
.bw-hulp .eyebrow{margin:10px 0 8px}
.bw-hulp-knoppen{display:flex;flex-wrap:wrap;gap:6px}
.bw-hulp-vertaal{display:contents}
.bw-hulp-uit{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.bw-hulp-uit .bw-hulp-keuze{text-align:left;border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:var(--surface);font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.bw-hulp-uit .bw-hulp-keuze:hover{border-color:var(--ink)}
.bw-hulp-uit .bw-hulp-fout{color:#b42318;font-size:12.5px}
.bw-hulp-uit .bw-hulp-bezig{color:var(--muted);font-size:12.5px}
.bw-opgeslagen{padding:0 12px 12px}
.bw-opgeslagen .eyebrow{margin:4px 0 8px}
.bw-opgeslagen-rij{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.bw-opgeslagen-blok{flex:1;display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--surface);font:inherit;font-size:13px;color:var(--ink);cursor:pointer;min-width:0;text-align:left}
.bw-opgeslagen-blok:hover{border-color:var(--ink)}
.bw-opgeslagen-blok span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-opgeslagen-blok .bw-ic{width:22px;height:10px;flex:none}
.bw-opgeslagen-weg{border:0;background:none;color:var(--muted);cursor:pointer;font:inherit;padding:4px 6px}
.bw-opgeslagen-weg:hover{color:#b42318}
@media (max-width:1200px){.gl-raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.gl-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bw-veld-voorbeeldregel{grid-column:2/4}
.mn-inbox{padding:8px 18px 12px;display:flex;flex-direction:column;gap:6px}
.mn-inbox-rij{display:grid;grid-template-columns:28px 150px minmax(0,1fr) 44px;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13.5px;min-width:0}
.mn-av{width:28px;height:28px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
.mn-inbox-rij>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-ond{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-ond span{color:var(--muted)}
.mn-inbox-rij small{color:var(--muted);text-align:right}
.mn-inbox-voet{color:var(--muted);font-size:12.5px;padding:4px 2px 0}
.mn-schakel{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}
.mn-schakel input{margin:0}
.mn-velden .seg{display:inline-flex}
@media (max-width:820px){.mn-inbox-rij{grid-template-columns:28px minmax(0,1fr)}.mn-inbox-rij>b,.mn-inbox-rij small{display:none}}
.mg-uren{display:flex;align-items:flex-end;gap:4px;height:150px;padding:14px 18px 6px}
.mg-uur{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.mg-staven{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px}
.mg-staven i{display:block;width:40%;max-width:14px;min-height:2px;border-radius:3px 3px 0 0;background:var(--data)}
.mg-staven i.k{background:var(--chip-green-dot)}
.mg-uur small{font-size:10.5px;color:var(--muted);height:14px;line-height:14px}
.mg-legenda{display:flex;gap:16px;padding:4px 18px 12px;font-size:12px;color:var(--muted)}
.mg-legenda i{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--data);margin-right:5px;vertical-align:-1px}
.mg-legenda i.k{background:var(--chip-green-dot)}
.mg-lkop,.mg-lrij{display:grid;grid-template-columns:minmax(0,1fr) 70px 140px;gap:12px;padding:10px 18px;align-items:center}
.mg-lkop{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--wash)}
.mg-lrij{border-bottom:1px solid var(--line);font-size:13.5px}
.mg-lrij>span{min-width:0}
.mg-lrij b,.mg-lrij small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-lrij small{color:var(--muted);font-size:12px}
.mg-lkop .n,.mg-lrij .n{text-align:right;font-variant-numeric:tabular-nums}
.mg-balk{display:block;height:8px;border-radius:4px;background:var(--wash2);overflow:hidden}
.mg-balk i{display:block;height:100%;background:var(--data);border-radius:4px}
.mg-balk i.oranje{background:var(--chip-orange-dot)}
.mg-lvoet{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 18px;font-size:12.5px;color:var(--muted)}
.mg-abrij{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;min-width:0}
.mg-abrij.gekozen{border-color:var(--chip-green-dot);background:var(--chip-green-bg)}
.mg-abrij>div{flex:1;min-width:0}
.mg-abrij b{display:block;overflow-wrap:anywhere}
.mg-abrij small{display:block;color:var(--muted);font-size:12px}
.mg-abrij .n{text-align:right;flex:none}
.mg-abrij .n small{font-size:11px}
.mg-waar{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;align-items:center;font-size:13px}
.kk-canvas{padding:14px 18px;background:var(--wash);display:flex;justify-content:center}
#kk-voorbeeld{width:640px;max-width:100%;height:calc(100vh - 260px);min-height:600px;border:0;background:transparent;border-radius:8px}
.kk-tekst{padding:6px 18px 14px;font-size:13.5px;line-height:1.5}
.kk-tekst p{margin:8px 0 0}
.mo-filter{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.mo-filter .fchips{margin-bottom:0}
.mo-zoek input{width:220px}
.mo-opnieuw{display:flex;gap:8px;align-items:center}
.mo-opnieuw input{width:260px}
.mo-kop,.mo-rij{display:grid;grid-template-columns:minmax(0,1.5fr) 110px 90px minmax(0,1fr) minmax(0,1.2fr) 100px minmax(0,1fr);gap:10px;padding:10px 18px;align-items:center}
.mo-kop{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--wash)}
.mo-rij{border-bottom:1px solid var(--line);font-size:13.5px}
.mo-rij>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mo-rij small{display:block;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;min-height:0}
.mo-rij small:empty{display:none}
.mo-opm{color:var(--muted)}
@media (max-width:1100px){.mo-kop,.mo-rij{grid-template-columns:minmax(0,1.5fr) 110px 80px minmax(0,1fr) minmax(0,1fr)}.mo-kop>span:nth-child(n+6),.mo-rij>span:nth-child(n+6){display:none}}
.sl-regels{display:flex;flex-direction:column;gap:8px;padding:12px 18px 4px}
.sl-regel{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.sl-regel select,.sl-regel input{font:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);max-width:100%}
.sl-regel select.sl-op{width:76px;font-weight:600}
.sl-regel select.sl-soort{max-width:210px}
.sl-regel select.sl-waarde{max-width:200px}
.sl-regel input.sl-getal{width:90px}
.sl-regel .sl-eenheid{font-size:12.5px;color:var(--muted)}
.sl-regel .sl-x{margin-left:auto;border:0;background:none;color:var(--muted);font-size:16px;cursor:pointer;padding:2px 6px}
.sl-regel .sl-x:hover{color:var(--ink)}
.sl-leeg{font-size:13px;color:var(--muted);padding:2px 0}
.sl-voet{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:8px 18px 12px}
.sl-telling{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.sl-telling.fout{color:var(--neg)}
.sl-bewaar{margin-left:auto;display:flex;flex-direction:column;gap:2px}
.sl-bewaar input{width:220px}
.sl-kop,.sl-rij{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) 160px 170px 70px;gap:12px;padding:10px 18px;align-items:center}
.sl-kop{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--wash)}
.sl-rij{border-bottom:1px solid var(--line);font-size:13.5px}
.sl-rij>span{min-width:0}
.sl-rij b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-rij small{display:block;color:var(--muted);font-size:12px}
.sl-regeltekst{overflow-wrap:anywhere;color:var(--sub)}
.sl-kop .n,.sl-rij .n{text-align:right;white-space:nowrap}
.sl-rij .n form{display:inline}
.vk-kaart{max-width:560px;width:100%;padding:28px 32px}
.vk-kaart h1{font-size:24px;margin:6px 0 8px}
.vk-kaart .vk-meta{color:#5b6270;line-height:1.5;margin:0 0 16px}
.vk-kaart .form-ok{margin:0 0 14px}
.vk-lijst{display:flex;flex-direction:column;gap:8px}
.vk{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.vk.aan,.vk:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.vk input{margin:0}
.vk b{display:block;font-size:14px}
.vk small{display:block;color:#5b6270;font-size:12.5px}
.vk-schakels{border-top:1px solid var(--line);margin-top:14px;padding-top:12px;display:flex;flex-direction:column;gap:8px}
.vk-schakel{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.4;cursor:pointer}
.vk-schakel input{margin:3px 0 0}
.vk-onder{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.vk-taal{display:inline-flex;align-items:center;gap:6px}
.vk-taalkeuze{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12.5px;cursor:pointer}
.vk-taalkeuze input{position:absolute;opacity:0;width:0;height:0}
.vk-taalkeuze.aan,.vk-taalkeuze:has(input:checked){background:var(--ink);color:#fff;border-color:var(--ink)}
.vk-voet{color:#8a909b;font-size:12px;text-align:center;margin:18px 0 0}
.af-minder{margin-top:14px;font-size:13.5px}
.bk-av.minder{background:var(--chip-orange-bg);color:var(--chip-orange-ink)}
.bw-veld-soort{min-width:0;grid-column:1}
.bw-veld-afzender{grid-column:4}
.bw-veld-map{grid-column:3}
.bw-veld-onderwerp{grid-column:2}
.rk-kop,.rk-rij{display:grid;grid-template-columns:52px minmax(0,2fr) minmax(0,1fr) 110px 90px 110px 110px;gap:12px;padding:12px 18px;align-items:center}
.rk-kop{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);background:var(--wash)}
.rk-rij{border-bottom:1px solid var(--line);font-size:13.5px}
.rk-rij>span{min-width:0}
.rk-rij b{display:block}
.rk-rij small{display:block;color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.rk-rij.uit b,.rk-rij.uit .n{color:var(--muted)}
.rk-kop .n,.rk-rij .n{text-align:right;font-variant-numeric:tabular-nums}
.rk-rij form{margin:0}
.rk-schakel{position:relative;display:inline-block;width:38px;height:22px;border-radius:999px;background:var(--line);border:0;padding:0;cursor:pointer;vertical-align:middle;flex:none}
.rk-schakel i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.rk-schakel.aan{background:var(--chip-green-dot)}
.rk-schakel.aan i{left:19px}
.rk-schakel:focus-visible{outline:2px solid var(--data);outline-offset:2px}
.rk-voet{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 18px;font-size:12.5px;color:var(--muted)}
.rk-tabs{margin:0 0 14px}
.rk-keten{padding:16px 18px 4px;display:flex;flex-direction:column}
.rk-stap{position:relative;display:flex;gap:12px;padding:0 0 18px;min-width:0}
.rk-stap::before{content:"";position:absolute;left:13px;top:30px;bottom:2px;width:2px;background:var(--line)}
.rk-stap.einde::before,.rk-tak .rk-stap::before{display:none}
.rk-bol{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:var(--card);display:grid;place-items:center;font-style:normal;font-weight:650;font-size:12px;line-height:1;color:var(--ink);position:relative;z-index:1;box-sizing:border-box}
.rk-stap.start>.rk-bol{border-color:var(--chip-green-dot);background:var(--chip-green-bg)}
.rk-stap.mail>.rk-bol{border-color:var(--data);background:var(--data);color:#fff}
.rk-stap.wacht>.rk-bol{border-style:dashed}
.rk-stap.stop>.rk-bol{border-color:var(--chip-orange-dot)}
.rk-stap.uit>.rk-bol{border-color:var(--chip-red-dot);background:var(--chip-red-bg)}
.rk-stap.splits>.rk-bol{border-color:var(--ink);font-size:14px}
.rk-stap.einde>.rk-bol{background:var(--ink);border-color:var(--ink)}
.rk-wat{flex:1;min-width:0;padding-top:4px}
.rk-wat>b,.rk-regel b{font-size:13.5px}
.rk-wat small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;overflow-wrap:anywhere}
.rk-regel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.rk-regel b{overflow-wrap:anywhere}
.rk-wat select,.rk-veld select{font:inherit;font-size:13px;padding:4px 8px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);max-width:100%}
.rk-cijfers{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:12.5px;color:var(--sub);font-variant-numeric:tabular-nums}
.rk-cijfers .goed{color:var(--pos);font-weight:600}
.rk-cijfers.leeg{color:var(--muted)}
.rk-mailacties{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px}
.rk-korting{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.rk-takken{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:10px}
.rk-tak{border:1px solid var(--line);border-radius:10px;padding:10px 12px 4px;min-width:0;background:var(--wash)}
.rk-takkop{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.rk-tak .rk-stap{padding-bottom:10px}
.rk-leeg{padding:2px 0 8px}
.rk-staan{display:inline-block !important;margin-top:8px !important;font-size:12px !important;color:var(--chip-blue-ink) !important;background:var(--chip-blue-bg);border-radius:999px;padding:1px 9px}
.rk-weg{flex:none;align-self:flex-start;border:0;background:none;color:var(--muted);font-size:17px;line-height:1;cursor:pointer;padding:5px 7px;border-radius:6px}
.rk-weg:hover{color:var(--ink);background:var(--wash2)}
.rk-erbij{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 18px 14px;border-top:1px solid var(--line)}
.rk-erbij.klein{padding:2px 0 8px;border-top:0}
.rk-erbij.klein button{font-size:12px;padding:3px 9px}
.rk-schakels{display:flex;flex-direction:column;gap:11px;padding:14px 18px 16px}
.rk-vink{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;cursor:pointer;line-height:1.35}
.rk-vink input{margin:2px 0 0;flex:none}
.rk-vink small{display:block;color:var(--muted);font-size:12px;margin-top:1px}
.rk-veld{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;min-width:0}
.rk-veld span{min-width:0}
.rk-veld select{max-width:170px;flex:none}
.rk-ontwerpen{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.rk-mini{height:330px;overflow:hidden;background:var(--wash);position:relative}
.rk-mini iframe{width:640px;height:660px;border:0;transform:scale(.5);transform-origin:0 0;pointer-events:none;position:absolute;left:50%;top:0;margin-left:-160px}
.rk-ontwerp-voet{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 18px;border-top:1px solid var(--line)}
.rkd-kop,.rkd-rij{display:grid;grid-template-columns:minmax(0,1.5fr) 120px 100px minmax(0,1.7fr) 60px 110px;gap:12px;padding:10px 18px;align-items:center}
.rkd-kop{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--wash)}
.rkd-rij{border-bottom:1px solid var(--line);font-size:13.5px}
.rkd-rij>span{min-width:0}
.rkd-rij b,.rkd-rij small{display:block;overflow-wrap:anywhere}
.rkd-rij small{color:var(--muted);font-size:12px}
.rkd-waar{color:var(--sub);font-size:12.5px;overflow-wrap:anywhere}
.rkd-kop .n,.rkd-rij .n{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:900px){.rk-kop,.rk-rij{grid-template-columns:52px minmax(0,1fr) 90px}.rk-kop>span:nth-child(n+4),.rk-rij>span:nth-child(n+4){display:none}.rk-takken{grid-template-columns:1fr}.rkd-kop,.rkd-rij{grid-template-columns:minmax(0,1fr) 110px}.rkd-kop>span:nth-child(n+3),.rkd-rij>span:nth-child(n+3){display:none}}
.afr-herinnering{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.4;margin:-2px 0 4px;cursor:pointer}
.afr-herinnering input{margin:2px 0 0;flex:none}
.bw-ruimte{border-top:1px solid var(--line);margin-top:12px;padding-top:10px}
.bw-ruimte-rij{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.bw-ruimte-rij .field{margin:0}
.bw-ruimte-rij .field span{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
#bw-als{max-width:260px}
.tv-tekst{width:100%;box-sizing:border-box;font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-top:8px;resize:vertical}
.ts-kop,.ts-rij{grid-template-columns:minmax(0,1.6fr) minmax(0,1.3fr) 90px minmax(0,1fr) 90px 130px}
.ts-rij b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-rij small{display:block;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-acties{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.ts-acties form{margin:0}
.ts-vorm{padding:12px 18px 16px;display:flex;flex-direction:column;gap:10px}
.ts-vorm .field{margin:0}
.ts-vorm textarea,.ts-vorm input[type=file]{width:100%;box-sizing:border-box}
.in-kop,.in-rij{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) 90px 150px;gap:12px;padding:10px 18px;align-items:center}
.in-kop{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--wash)}
.in-rij{border-bottom:1px solid var(--line);font-size:13.5px}
.in-rij>span{min-width:0}
.in-rij b{display:block}
.in-rij small{display:block;color:var(--muted);font-size:12px}
.in-waar{overflow-wrap:anywhere}
.in-kop .n,.in-rij .n{text-align:right;font-variant-numeric:tabular-nums}
.in-voet{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 18px;font-size:12.5px;color:var(--muted)}
.in-site{padding:18px;background:var(--wash);display:flex;justify-content:center}
.in-popup{position:relative;width:100%;max-width:400px;background:#fff;border-radius:16px;padding:24px 24px 18px;box-shadow:0 14px 40px rgba(0,0,0,.18)}
.in-popup h3{margin:0 0 8px;font-size:20px}
.in-popup p{margin:0 0 12px;color:#3a3f4b;line-height:1.5;font-size:14px}
.in-popup small{display:block;margin-top:10px;color:#6b7280;font-size:11.5px}
.in-x{position:absolute;top:8px;right:12px;color:#6b7280;font-size:22px}
.in-popup-rij{display:flex;gap:8px}
.in-in{flex:1;border:1px solid #d9dde5;border-radius:10px;padding:9px 12px;color:#98a1ad;font-size:14px}
.in-knop{background:var(--ink);color:#fff;border-radius:10px;padding:9px 14px;font-weight:600;font-size:14px}
.in-qr-rij{display:flex;gap:16px;align-items:flex-start;padding:14px 18px 16px}
.in-qr-rij img{flex:none;border:1px solid var(--line);border-radius:8px;background:#fff}
.in-qr-tekst{font-size:13.5px;line-height:1.5}
.kal-raster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.kal-dn{padding:8px 10px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--wash);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.kal-dag{min-height:104px;padding:6px 8px 8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px;min-width:0}
.kal-raster.week .kal-dag{min-height:260px}
.kal-dag.buiten{background:var(--wash);color:var(--muted)}
.kal-dag.vandaag .kal-nr{background:var(--ink);color:#fff;border-radius:999px;padding:1px 7px}
.kal-dag.over{background:var(--chip-blue-bg);outline:2px dashed var(--data);outline-offset:-2px}
.kal-nr{align-self:flex-start;font-size:12px;font-weight:600;color:var(--sub)}
.kal-evt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:12px;line-height:1.3;padding:3px 7px;border-radius:6px;background:var(--wash2);color:var(--ink);text-decoration:none;border-left:3px solid var(--line);overflow:hidden;overflow-wrap:anywhere;min-width:0}
.kal-evt small{color:var(--muted);margin-right:4px}
.kal-evt.groen{border-left-color:var(--chip-green-dot);background:var(--chip-green-bg)}
.kal-evt.oranje{border-left-color:var(--chip-orange-dot);background:var(--chip-orange-bg)}
.kal-evt.blauw{border-left-color:var(--data);background:var(--chip-blue-bg)}
.kal-evt.paars{border-left-color:#7c5cd6;background:#efeafc}
.kal-evt.grijs{border-left-color:var(--axis);background:var(--wash2);color:var(--sub)}
.kal-evt.sleepbaar{cursor:grab}
.kal-voet{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 18px;font-size:12.5px;color:var(--muted)}
.kal-bol{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 4px 0 10px;vertical-align:-1px;background:var(--axis)}
.kal-bol.groen{background:var(--chip-green-dot)}.kal-bol.oranje{background:var(--chip-orange-dot)}.kal-bol.blauw{background:var(--data)}.kal-bol.paars{background:#7c5cd6}
.kal-voet .kal-bol:first-child{margin-left:0}
@media (max-width:900px){.kal-dag{min-height:70px}.kal-evt{font-size:11px}}
.an-staven{display:flex;align-items:flex-end;gap:6px;height:170px;padding:16px 18px 8px}
.an-staaf{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.an-staaf i{display:block;width:100%;max-width:34px;min-height:2px;background:var(--data);border-radius:4px 4px 0 0;margin-top:auto}
.an-staaf small{font-size:10.5px;color:var(--muted)}
.ml-filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ml-filter input,.ml-filter select{max-width:220px}
.lk-vz { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; }
.lk-vz i { width: 8px; height: 8px; border-radius: 999px; flex: none; background: var(--chip-gray-dot); }
.lk-vz.fact i { background: var(--chip-green-dot); }
.lk-vz.klant i { background: var(--chip-blue-dot); }
.lk-vz.let i { background: var(--chip-orange-dot); }
.lk-vz > span, .lk-vz > a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 999px; margin-right: 6px; background: var(--chip-gray-dot); vertical-align: 1px; }
.lk-dot.fact { background: var(--chip-green-dot); }
.lk-dot.klant { background: var(--chip-blue-dot); }
.lk-dot.let { background: var(--chip-orange-dot); }
.lk-dot.grijs { background: var(--chip-gray-dot); }
.lk-sam { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.lk-sam > div { padding: 10px 14px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lk-sam > div + div { border-left: 1px solid var(--line); }
.lk-sam small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; }
.lk-sam b { font-size: 17px; letter-spacing: -.01em; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.lk-sam span { font-size: 12.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-samvoet { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; font-size: 12.5px; color: var(--sub); min-width: 0; }
.lk-samvoet a { color: var(--data); white-space: nowrap; margin-left: auto; }
.lk-eerst { border: 1px solid var(--chip-orange-dot); background: var(--chip-orange-bg); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.lk-eerst.klaar { border-color: var(--chip-green-dot); background: var(--chip-green-bg); flex-direction: row; align-items: center; padding: 10px 14px; min-height: 44px; }
.lk-eerst.klaar .lk-vz { flex: 1; min-width: 0; font-weight: 600; }
.lk-eerst.klaar a { color: var(--data); cursor: pointer; font-size: 12.5px; white-space: nowrap; }
.lk-eerstkop { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.lk-eerstkop .n { margin-left: auto; font-variant-numeric: tabular-nums; }
.lk-eerstsub { font-size: 12.5px; color: var(--sub); line-height: 1.45; }
.lk-keuze { display: flex; flex-direction: column; gap: 6px; }
.lk-opt { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; min-height: 48px; cursor: pointer; background: var(--card); }
.lk-opt:hover { border-color: var(--axis); }
.lk-opt.aan { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lk-opt:focus-visible { outline: 2px solid var(--data); outline-offset: 2px; }
.lk-rad { width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--axis); flex: none; position: relative; }
.lk-rad.aan { border-color: var(--ink); }
.lk-rad.aan::after { content: ""; position: absolute; inset: 3px; border-radius: 999px; background: var(--ink); }
.lk-opt .tk { flex: 1; min-width: 0; }
.lk-opt b { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; font-weight: 600; font-size: 13.5px; }
.lk-opt b .naam { overflow: hidden; text-overflow: ellipsis; }
.lk-opt small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-opt input[type="radio"] { flex: none; margin: 0; }
.lk-klantzoek { position: relative; flex: none; }
.lk-klantzoek .afl-uitslag { min-width: 260px; left: auto; right: 0; }
.lk-keuzevoet { display: flex; justify-content: flex-end; }
.lk-keuzekop { font-weight: 600; font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; }
.lk-keuzekop .sub { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.lk-keuzeform { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 6px; white-space: normal; }
.lk-inhoud { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.lk-ibalk { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--wash2); flex-wrap: wrap; }
.lk-ibalk input { flex: 1 1 100%; min-width: 0; }
.lk-ibalk .seg a { display: inline-flex; align-items: center; padding: 4px 9px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.lk-ibalk .seg a.cur { background: var(--card); color: var(--ink); font-weight: 550; box-shadow: 0 0 0 1px var(--line); }
.lk-ibalk .seg a em { font-style: normal; color: var(--muted); margin-left: 4px; font-variant-numeric: tabular-nums; }
.lk-r { display: grid; grid-template-columns: 64px minmax(0, 1fr) 176px 104px; gap: 10px; align-items: center; padding: 6px 12px; min-height: 46px; border-top: 1px solid var(--line); font-size: 13px; }
.lk-r:first-child { border-top: 0; }
.lk-r > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 18px; }
.lk-r .n { text-align: right; font-variant-numeric: tabular-nums; }
.lk-r small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 16px; }
.lk-r a { color: var(--data); }
.lk-r.kost > span:nth-child(2) { color: var(--sub); }
.lk-meer { display: block; padding: 9px 12px; border-top: 1px solid var(--line); color: var(--data); font-size: 12.5px; cursor: pointer; }
.lk-leeg { padding: 16px 12px; color: var(--muted); font-size: 13px; text-align: center; border-top: 1px solid var(--line); }
.lk-som { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--wash2); font-size: 12.5px; color: var(--sub); min-height: 40px; }
.lk-som b { color: var(--ink); font-variant-numeric: tabular-nums; }
.lk-jp { display: flex; flex-direction: column; font-size: 13px; }
.lk-jp .kopje { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 8px 0 4px; }
.lk-jp .kopje:first-child { padding-top: 0; }
.lk-jp .r { display: grid; grid-template-columns: 44px minmax(0, 1fr) 100px; gap: 8px; min-height: 28px; align-items: center; border-top: 1px solid var(--line); }
.lk-jp .r em { font-style: normal; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--sub); }
.lk-jp .r span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-jp .r .n { text-align: right; font-variant-numeric: tabular-nums; }
.lk-jp .r.open em, .lk-jp .r.open span { color: var(--warn); }
.lk-jp .hint { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.afl-waarom { font-size: 12.5px; color: var(--warn); white-space: nowrap; align-self: center; }
.lk-reken .kpi { position: relative; }
.lk-reken .kpi[data-op]::before { content: attr(data-op); position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; font-size: 13px; line-height: 1; color: var(--sub); font-weight: 600; z-index: 1; }
.lk-reken .kpi-value.pos { color: var(--pos); }
.lk-balk { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.lk-drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.lk-drie > .card { display: flex; flex-direction: column; }
@media (max-width: 1100px) { .lk-drie { grid-template-columns: minmax(0, 1fr); } }
.lk-site > div { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 8px; min-height: 44px; align-items: center; border-top: 1px solid var(--line); font-size: 13px; }
.lk-site > div:first-child { border-top: 0; }
.lk-site b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-site small { display: block; color: var(--muted); font-size: 12.5px; }
.lk-site .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.lt tr.let td { background: var(--chip-orange-bg); }
.lt tr.kost td { color: var(--sub); }
.lk-spoor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 18px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--wash2); }
.lk-spoor.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lk-spoor > div { padding: 9px 12px; display: flex; gap: 9px; min-width: 0; }
.lk-spoor > div + div { border-left: 1px solid var(--line); }
.lk-spoor i { width: 18px; height: 18px; border-radius: 999px; flex: none; display: grid; place-items: center; margin-top: 1px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--axis); color: var(--muted); font-style: normal; font-size: 11px; font-weight: 700; }
.lk-spoor i.klaar { background: var(--chip-green-dot); box-shadow: none; color: #fff; }
.lk-spoor i.let { background: var(--chip-orange-bg); box-shadow: inset 0 0 0 1.5px var(--chip-orange-dot); color: var(--chip-orange-ink); }
.lk-spoor .tk { min-width: 0; }
.lk-spoor b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-spoor small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-spoor a { color: var(--data); }
.fo-balk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fo-adm { width: auto; min-width: 200px; }
.fo-stand { margin-left: auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.fo-stand i { width: 7px; height: 7px; border-radius: 50%; background: var(--chip-green-dot); display: inline-block; }
.fo-twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; align-items: stretch; }
.fo-twee > .card { min-width: 0; display: flex; flex-direction: column; margin: 0; }
.fo-kaart > .fo-kort, .fo-kaart > .fo-maand, .fo-kaart > .fo-standlijst { flex: 1; }
.fo-som .card-head { border-bottom: 0; }
.fo-alles { margin-left: auto; font-size: 12.5px; white-space: nowrap; color: var(--data); }
.fo-reken, .fo-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fo-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fo-kpis.fo-vijf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fo-tegel { position: relative; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 1px; min-width: 0; background: var(--card); color: inherit; text-decoration: none; }
a.fo-tegel:hover { border-color: var(--axis); text-decoration: none; }
.fo-tegel small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-tegel b { font-size: 20px; letter-spacing: -.01em; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; font-weight: 650; }
.fo-tegel span { font-size: 12.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-tegel[data-op]::before { content: attr(data-op); position: absolute; left: -7px; top: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; font-size: 13px; line-height: 1; color: var(--sub); font-weight: 600; z-index: 1; }
.fo-tegel.uitkomst b, .fo-tegel.goed b { color: var(--pos); }
.fo-tegel.let b { color: var(--warn); }
.fo-balkkop { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 8px; font-size: 12.5px; color: var(--sub); white-space: nowrap; }
.fo-balkkop span:last-child { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.fo-stapel { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--wash); }
.fo-stapel > i { display: block; height: 100%; min-width: 0; }
.fo-stapel > i + i { border-left: 2px solid var(--card); }
.fo-legenda { display: flex; gap: 6px 18px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--sub); }
.fo-legenda > span, .fo-legenda > a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: inherit; }
.fo-legenda > a:hover { color: var(--ink); text-decoration: none; }
.fo-legenda b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.fo-legenda > .fo-buiten { flex-basis: 100%; margin-top: 2px; padding-top: 8px; border-top: 1px dashed var(--line); white-space: normal; flex-wrap: wrap; }
.fo-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--chip-gray-dot); }
.fo-dot.fact, .fo-stapel > i.fact, .fo-dot.betaald, .fo-staaf > i.betaald { background: var(--chip-green-dot); }
.fo-dot.vooruit, .fo-stapel > i.vooruit, .fo-staaf > i.vooruit { background: var(--data); }
.fo-dot.kies, .fo-stapel > i.kies, .fo-dot.open, .fo-stapel > i.open, .fo-staaf > i.open, .fo-dot.telaat, .fo-stapel > i.telaat { background: var(--chip-orange-dot); }
.fo-dot.dagstaat, .fo-stapel > i.dagstaat { background: var(--data-3); }
.fo-dot.anders, .fo-stapel > i.anders, .fo-dot.grijs { background: var(--chip-gray-dot); }
.fo-dot.optijd, .fo-stapel > i.optijd { background: var(--ramp-2); }
.fo-dot.aangemaand, .fo-stapel > i.aangemaand, .fo-dot.uithanden { background: var(--chip-red-dot); }
.fo-dot.incasso, .fo-stapel > i.incasso, .fo-dot.tefact, .fo-stapel > i.tefact { background: #5b4bd6; }
.fo-standlijst { display: flex; flex-direction: column; }
.fo-standlijst > .rij { display: grid; grid-template-columns: minmax(0, 1fr) 104px 160px; gap: 12px; align-items: center; padding: 10px 18px; min-height: 58px; border-top: 1px solid var(--grid); font-size: 13px; color: inherit; text-decoration: none; }
.fo-standlijst > .rij:first-child { border-top: 0; }
a.fo-standlijst-rij:hover, .fo-standlijst > a.rij:hover { background: var(--wash2); text-decoration: none; }
.fo-standlijst .tk { min-width: 0; display: flex; align-items: center; gap: 10px; }
.fo-standlijst .tk > div { min-width: 0; }
.fo-standlijst b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-standlijst small { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-standlijst .n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fo-standlijst .kl { justify-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sub); white-space: nowrap; min-width: 0; }
.fo-standlijst .kl i { width: 16px; height: 16px; border-radius: 50%; background: var(--chip-green-dot); color: #fff; display: grid; place-items: center; flex: none; font-style: normal; font-size: 11px; font-weight: 700; }
.fo-standlijst .kl i svg { width: 10px; height: 10px; }
.fo-standlijst .kl i.let { background: var(--chip-orange-dot); }
.fo-standlijst .kl i.los { background: var(--wash); color: var(--sub); }
.fo-standlijst .kl small { display: none; }
.fo-standlijst .kl.let { color: var(--warn); }
.fo-standlijst > .rij.som { background: var(--wash2); border-top: 1px solid var(--line); min-height: 48px; }
.fo-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--wash); color: var(--sub); }
.fo-ico svg { width: 15px; height: 15px; }
.fo-ico.open, .fo-ico.kies { background: var(--chip-orange-bg); color: var(--chip-orange-ink); }
.fo-ico.vooruit { background: var(--chip-blue-bg); color: var(--chip-blue-ink); }
.fo-ico.tefact, .fo-ico.weg { background: #f0eefc; color: #4b3fb8; }
.fo-maand { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.fo-grafiek { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-items: end; height: 150px; padding: 0 4px; border-bottom: 1px solid var(--line); }
.fo-grafiek > div { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; border-radius: 6px 6px 0 0; }
.fo-grafiek > div:hover { background: var(--wash2); }
.fo-staaf { display: flex; align-items: flex-end; gap: 3px; height: 100%; padding: 0 8px; }
.fo-staaf > i { flex: 1; display: block; border-radius: 3px 3px 0 0; min-height: 2px; }
.fo-maandas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 0 4px; margin-top: -4px; }
.fo-maandas > div { text-align: center; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-maandas > div.cur { color: var(--ink); font-weight: 600; }
.fo-maandtabel { display: grid; grid-template-columns: minmax(0, 1fr) 104px 104px 104px; gap: 6px 12px; font-size: 12.5px; padding-top: 6px; border-top: 1px solid var(--grid); }
.fo-maandtabel > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sub); }
.fo-maandtabel > span small { color: var(--muted); }
.fo-maandtabel > span.cur { color: var(--ink); font-weight: 600; }
.fo-maandtabel > span.n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.fo-maandtabel > span.kop { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; text-align: right; }
.fo-maandtabel > span.kop:first-child { text-align: left; }
.fo-kort { display: flex; flex-direction: column; }
.fo-kort > .rij { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 10px; align-items: center; padding: 8px 18px; min-height: 52px; border-top: 1px solid var(--grid); font-size: 13px; color: inherit; text-decoration: none; }
.fo-kort > .rij:first-child { border-top: 0; }
.fo-kort > a.rij:hover { background: var(--wash2); text-decoration: none; }
.fo-kort > .rij > div { min-width: 0; }
.fo-kort b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-kort small { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-kort .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.fo-kort .n small { font-weight: 400; }
.fo-kort > .rij.som { background: var(--wash2); border-top: 1px solid var(--line); min-height: 44px; color: var(--sub); font-size: 12.5px; margin-top: auto; }
.fo-kort > .rij.som b { font-size: 12.5px; font-weight: 500; color: var(--sub); }
.fo-kort > .rij.som .n { color: var(--ink); }
.fo-kort .leeg { padding: 22px 18px; color: var(--muted); font-size: 13px; text-align: center; }
.fo-kort > .blok { padding: 12px 18px 8px; }
.fo-leeftijd { display: flex; flex-direction: column; gap: 4px; }
.fo-leeftijd > div { display: grid; grid-template-columns: 112px minmax(0, 1fr) 96px; gap: 10px; align-items: center; font-size: 12.5px; min-height: 24px; }
.fo-leeftijd > div span:first-child { color: var(--sub); white-space: nowrap; }
.fo-leeftijd .lat { height: 8px; border-radius: 4px; background: var(--wash); overflow: hidden; }
.fo-leeftijd .lat i { display: block; height: 100%; border-radius: 4px; }
.fo-leeftijd .lat i.optijd { background: var(--ramp-2); }
.fo-leeftijd .lat i.telaat { background: var(--chip-orange-dot); }
.fo-leeftijd .lat i.aangemaand, .fo-leeftijd .lat i.uithanden { background: var(--chip-red-dot); }
.fo-leeftijd .lat i.incasso { background: #5b4bd6; }
.fo-leeftijd .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fo-hoe { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; color: inherit; }
.fo-lt td.leeg { text-align: center; color: var(--muted); padding: 24px; }
.fo-lt tr.let td { background: var(--chip-orange-bg); }
.fo-lt .sub { color: var(--muted); font-size: 12px; }
.fo-uitleg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; font-size: 13px; line-height: 1.5; }
.fo-uitleg b { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-weight: 600; }
.fo-uitleg p { margin: 0; color: var(--sub); }
.page-head .terug { display: inline-block; font-size: 12.5px; color: var(--sub); margin-bottom: 4px; }
@media (max-width: 900px) {
.fo-twee, .fo-reken, .fo-kpis, .fo-uitleg { grid-template-columns: 1fr; }
.fo-tegel[data-op]::before { display: none; }
}
.pdp-galerij { min-width: 0; }
.pdp-fotokaart { position: relative; }
.pdp-fotoknop { display: block; width: 100%; border: 0; padding: 0; margin: 0; background: none; cursor: zoom-in; font: inherit; color: inherit; }
.pdp-fotoknop .pdp-hoofdfoto { display: block; }
.pdp-mini { border: 0; padding: 0; margin: 0; background: none; cursor: pointer; font: inherit; color: inherit; line-height: 0; }
.pdp-pijl { display: none; }
.pdp-fotolabels { position: absolute; left: 12px; top: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; z-index: 2; }
.pdp-fotolabel { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 4px; background: var(--card, #fff); color: var(--ink, #111); border: 1px solid var(--line, #ddd); }
.pdp-koopblok { min-width: 0; }
.pdp-punten { display: flex; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.pdp-punten-kolom { flex: 1; min-width: 200px; }
.pdp-punten-kop { font-weight: 650; font-size: 13.5px; margin-bottom: 6px; }
.pdp-punten-titel { font-size: 14px; font-weight: 650; margin: 0 0 6px; width: 100%; }
.pdp-punt { font-size: 13.5px; margin-bottom: 4px; }
.pdp-punt-teken { font-weight: 700; }
.pdp-punt.plus .pdp-punt-teken { color: var(--pos); }
.pdp-punt.min .pdp-punt-teken { color: var(--neg); }
.pdp-downloads { margin-top: 18px; }
.pdp-downloads-kop { font-weight: 650; font-size: 14px; margin: 0 0 6px; }
.pdp-download { display: block; font-size: 13.5px; margin-bottom: 4px; color: inherit; }
.pdp-download-knop { display: none; }
.pdp-extra { margin-top: 18px; }
.pdp-extra-kop { font-weight: 650; font-size: 14px; margin-bottom: 6px; }
.pdp-extra-tekst { font-size: 14px; line-height: 1.55; white-space: pre-line; }
.pdp-extra-regel { font-size: 13.5px; margin-bottom: 4px; }
.pdp-video { margin-top: 14px; }
.pdp-staffeltabel summary { cursor: pointer; font-weight: 650; list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.pdp-staffeltabel summary::-webkit-details-marker { display: none; }
.pdp-staffeltabel table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
.pdp-staffeltabel th, .pdp-staffeltabel td { text-align: left; padding: 6px 8px; border-top: 1px solid var(--line, #ddd); }
.pdp-staffeltabel th { border-top: 0; font-weight: 600; }
.pdp-staffeltabel .r { text-align: right; }
.pdp-staffeltabel td a { color: inherit; text-decoration: none; }
.pdp-lichtbak { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: auto; height: auto; }
.pdp-lichtbak::backdrop { background: rgba(10, 9, 77, .72); }
.pdp-lichtbak-blad { position: relative; background: var(--card, #fff); border-radius: 14px; padding: 36px; width: min(1440px, calc(100vw - 32px)); height: min(945px, calc(100vh - 32px)); box-sizing: border-box; }
.pdp-lichtbak-titel { position: absolute; left: 37px; top: 33px; font-size: 26px; font-weight: 800; }
.pdp-lichtbak-sluit { position: absolute; right: 36px; top: 36px; width: 55px; height: 55px; border: 0; border-radius: 6px; background: var(--bg, #f3f3f7); cursor: pointer; display: flex; align-items: center; justify-content: center; color: inherit; }
.pdp-lichtbak-kaart { position: absolute; left: 36px; right: 36px; top: 115px; height: 675px; border: 1px solid var(--line, #e8e8ef); border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pdp-lichtbak-kaart img { max-width: calc(100% - 200px); max-height: calc(100% - 40px); object-fit: contain; }
.pdp-lichtbak-kaart .pdp-pijl { display: flex; }
.pdp-lichtbak-strook { position: absolute; left: 36px; right: 36px; top: 814px; display: flex; gap: 13.5px; overflow-x: auto; }
.pdp-lichtbak-strook .pdp-mini { width: 140px; height: 94px; flex: none; border: 1px solid var(--line, #f3f2f1); border-radius: 7px; overflow: hidden; }
.pdp-lichtbak-strook .pdp-mini.aan { border-color: var(--accent, #333); }
.pdp-lichtbak-strook .pdp-mini img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 1023px) {
.pdp-lichtbak-blad { padding: 16px; height: min(760px, calc(100vh - 16px)); }
.pdp-lichtbak-titel { left: 16px; top: 18px; font-size: 18px; max-width: calc(100% - 90px); }
.pdp-lichtbak-sluit { right: 16px; top: 16px; width: 44px; height: 44px; }
.pdp-lichtbak-kaart { left: 16px; right: 16px; top: 76px; height: calc(100% - 200px); }
.pdp-lichtbak-strook { left: 16px; right: 16px; top: auto; bottom: 16px; }
.pdp-lichtbak-strook .pdp-mini { width: 88px; height: 74px; }
}
.kaart-tand { display: none; }
.kaart-labels { position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.kaart-label, .kaart-korting { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 4px; background: var(--card, #fff); color: var(--ink, #111); border: 1px solid var(--line, #ddd); }
.shop-filterchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.shop-filterchip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid var(--line, #ddd); border-radius: 6px; background: var(--card, #fff); color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.shop-filterchip span { color: var(--muted, #888); }
.shop-wisalles { font-size: 13px; text-decoration: underline; color: inherit; }
.shop-filterschuif { display: none; }
.shop-filterkeuze { width: 100%; height: 38px; border: 1px solid var(--line, #ddd); border-radius: 6px; background: var(--card, #fff); padding: 0 10px; font: inherit; }
.shop-filterkleuren { display: flex; flex-wrap: wrap; gap: 9px; }
.shop-filterkleur { position: relative; width: 30px; height: 30px; cursor: pointer; }
.shop-filterkleur input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.shop-kleurbol { display: block; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line, #ddd); box-sizing: border-box; }
.shop-filterkleur.aan .shop-kleurbol, .shop-filterkleur input:checked + .shop-kleurbol { box-shadow: 0 0 0 2px var(--card, #fff), 0 0 0 4px var(--accent, #333); }
.shop-filterkleur input:focus-visible + .shop-kleurbol { outline: 2px solid var(--accent, #333); outline-offset: 3px; }
.shop-cattitelrij { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.shop-alles-over-link, .shop-alles-over { font-weight: 700; text-decoration: none; color: inherit; }
.shop-alles-over { display: none; }
.shop-balk-filterknop, .shop-filterblad-kop { display: none; }
.shop-catregel.diep { margin-left: 18px; }
.shop-cataantal { font-style: normal; font-weight: 400; color: var(--muted, #667085); margin-left: 4px; }
.shop-catregel.leeg { color: var(--muted, #667085); opacity: .7; cursor: default; }
.shop-cat-meer > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--winkel-accent); }
.shop-cat-meer > summary::-webkit-details-marker { display: none; }
.shop-cat-meer > summary svg { width: 12px; height: 12px; }
.shop-cat-meer[open] > summary .woord-meer, .shop-cat-meer:not([open]) > summary .woord-minder { display: none; }
.shop-cat-meer[open] > summary svg { transform: rotate(180deg); }
.shop-terugnaar { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.shop-populair .shop-blokkop { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 16px; }
.shop-populair .shop-blokkop h2 { margin: 0; font-size: 20px; }
.shop-populair .shop-blokkop-lijst { margin: 32px 0 0; }
.shop-cat-meer { display: flex; flex-direction: column; }
.shop-cat-meer > summary { order: 1; }