: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); }
.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:not(:where(input:not([type=checkbox], [type=radio], [type=range]), select, textarea)) { outline: 2px solid var(--data); outline-offset: 2px; border-radius: 4px; }
:where(input:not([type=checkbox], [type=radio], [type=range]), select, textarea):focus-visible { outline: none; }
.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; }
:is(select, input, textarea).ghost:focus-visible { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
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; min-width: 0; }
.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);
min-width: 0; max-width: 100%; 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]):not([type=file]), .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 input[type=file] { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.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; }
.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; } }
.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; } }
.ghost.small.stil { color: var(--muted); }
.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; }
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; }
.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; }
.span7 { grid-column: span 7; min-width: 0; }
.span6 { grid-column: span 6; min-width: 0; }
.span12 { grid-column: span 12; 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; }
@media (max-width: 640px){
table.vo-regels thead { display: none; }
table.vo-regels, table.vo-regels tbody, table.vo-regels tr { display: block; width: 100%; }
table.vo-regels tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
table.dense.vo-regels td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
table.dense.vo-regels td::before { content: attr(data-label); color: var(--sub); font-size: 12.5px; text-align: left; }
table.dense.vo-regels td:first-child { text-align: left; }
table.dense.vo-regels td:first-child::before { content: none; }
table.dense.vo-regels td:empty { display: none; }
}
.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; }
.balans-kv .k { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.balans-kv .v { flex: none; white-space: nowrap; }
.balans-vorig { color: var(--muted); margin-left: 14px; font-weight: 400; }
@media (max-width: 520px){
.balans-vorig { display: block; margin-left: 0; }
}
.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, .zp, .sto { 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-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; min-width: 0; overflow-wrap: anywhere; }
.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); }
.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-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; }
.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 .menu-onder > summary { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 7px; cursor: pointer; list-style: none; color: var(--ink); }
.menu .menu-onder > summary::-webkit-details-marker { display: none; }
.menu .menu-onder > summary:hover { background: var(--wash); }
.menu .menu-onder > summary .n { margin-left: auto; color: var(--muted); font-size: 12px; }
.menu .menu-onder > summary::after { content: ""; flex: none; width: 6px; height: 6px; margin-right: 2px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.menu .menu-onder[open] > summary::after { transform: rotate(45deg); }
.menu .menu-onder > :not(summary) { padding-left: 22px; }
.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); }
input[type="file"]:focus-visible::file-selector-button { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.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-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; }
.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; } }
.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-weg { margin-left: auto; border: 0; background: transparent; cursor: pointer; font-size: 16px; line-height: 1; color: var(--muted); }
[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; }
.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; }
.ch-lade-sluit { display: none; }
.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 .op-tijd { flex: none; width: 84px; font-variant-numeric: tabular-nums; color: var(--muted); }
@media (max-width: 760px){
.chat-vlak { height: auto; min-height: 0; }
.chat-vlak > section { height: calc(100vh - 210px); min-height: 380px; }
.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); }
}
.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); }
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); }
.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; }
.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-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); }
.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; }
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; }
tr.pakket-kop td { background: var(--wash); }
tr.pakket-kind td { color: var(--muted); }
tr.pakket-kind td:nth-child(2) { padding-left: 22px; }
.pakket-klap { padding: 0; border: 0; background: none; font: inherit; color: var(--data); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.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; }
#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; }
.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; }
@media (max-width: 720px){
.abo-ruimte-rij { grid-template-columns: 1fr; gap: 4px; padding: 8px 18px; }
.abo-ruimte-rij > b { text-align: left !important; }
}
.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; }
@media (max-width: 900px){
.steps { max-width: 100%; overflow-x: auto; padding-bottom: 4px; }
.invoer-stappen { flex-wrap: wrap; overflow-x: visible; gap: 8px 16px; }
.invoer-stappen .step-line { display: none; }
main form { flex-wrap: wrap; }
main form.stapel, main form.wpl-stapel { flex-wrap: nowrap; }
.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; }
}
.hub-tegel { padding: 14px 16px; display: flex; flex-direction: column; gap: 5px;
text-decoration: none; color: inherit; }
.hub-tegel:hover { border-color: var(--axis); }
.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; }
.ifblad + .ifblad { border-top: 1px solid var(--line); }
.ifmark { transition: all .12s ease-out; border-radius: 2px; }
#ifzone:hover { border-color: var(--data); }
#if-voorstel .card-head .infopunt { margin-left: 4px; }
.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 18px; 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 18px 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; }
#ifdoc { max-height: calc(100vh - 210px); }
#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;
}
.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; }
.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:not(:where(.okc *)), body.winkel select:not(:where(.okc *)), body.winkel textarea:not(:where(.okc *)) { 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-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:not(:where(.okc *)) { font-size: 24px; margin: 0 0 14px; letter-spacing: -.01em; }
.site-pagina h3:not(:where(.okc *)) { font-size: 17px; margin: 18px 0 6px; }
.site-pagina p:not(:where(.okc *)) { margin: 0 0 10px; max-width: 68ch; line-height: 1.62; }
.site-pagina ul:not(:where(.okc *)) { margin: 0 0 12px; padding-left: 20px; max-width: 68ch; line-height: 1.62; }
.site-pagina ol:not(:where(.okc *)) { margin: 0 0 12px; padding-left: 22px; max-width: 68ch; line-height: 1.62; }
.site-pagina p a:not(:where(.okc *)), .site-pagina li a:not(:where(.okc *)), .site-pagina td a:not(:where(.okc *)) { 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:not(:where(.okc *)) { 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; }
.chip.stand-live { color: var(--pos); border-color: currentColor; }
.chip.stand-concept { color: var(--muted); }
.chip.stand-wijziging { color: var(--neg); border-color: currentColor; }
.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; }
.site-tekstfoto.tot-de-rand { width: 100vw; margin-left: calc(50% - 50vw); grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.site-tekstfoto.tot-de-rand .site-tekstfoto-foto { border-radius: 0; height: 100%; min-height: 420px; object-fit: cover; }
.site-tekstfoto.tot-de-rand .site-tekstfoto-in { padding: 48px clamp(16px, 6vw, 96px); align-self: center; max-width: calc(var(--site-breedte, 1440px) / 2); }
.site-tekstfoto.tot-de-rand:not(.foto-links) .site-tekstfoto-in { margin-left: auto; }
@media (max-width: 760px){
.site-tekstfoto.tot-de-rand { grid-template-columns: 1fr; }
.site-tekstfoto.tot-de-rand .site-tekstfoto-foto { min-height: 260px; }
.site-tekstfoto.tot-de-rand .site-tekstfoto-in { padding: 24px 16px; max-width: none; }
}
@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.mozaiek .site-fototegels-in { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 12px; }
.site-fototegels.mozaiek .site-fototegels-in > :first-child { grid-column: span 2; grid-row: span 2; }
.site-fototegels.mozaiek .site-fototegels-in img { height: 100%; aspect-ratio: auto; }
.site-fototegel { display: block; position: relative; border-radius: var(--hoek-klein); overflow: hidden; }
.site-fototegel img { transition: transform .35s ease; }
.site-fototegel:hover img { transform: scale(1.03); }
.site-fototegel::after { content: ""; position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e2450' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center/16px no-repeat; opacity: 0; transition: opacity .2s; }
.site-fototegel:hover::after { opacity: 1; }
.site-lichtbak { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1400px); max-height: 92vh; }
.site-lichtbak::backdrop { background: rgba(10, 14, 30, .86); }
.site-lichtbak img { display: block; max-width: min(96vw, 1400px); max-height: 92vh; object-fit: contain; border-radius: var(--hoek-klein); }
.site-lichtbak-sluit { position: fixed; right: 18px; top: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); font-size: 22px; cursor: pointer; }
@media (max-width: 760px){
.site-fototegels.mozaiek .site-fototegels-in { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
}
.site-fototegels-in img { width: 100%; aspect-ratio: 4/3; object-fit: cover;
border-radius: var(--hoek-klein); display: block; }
.site-voordelen, .site-stappen, .site-reviews, .site-downloads, .site-samen, .site-reken, .site-keuzehulp { width: 100%; }
.site-rijzin { color: var(--muted); max-width: 64ch; margin: -6px 0 18px; }
.site-voordelen.midden { text-align: center; }
.site-voordelen.midden .site-rijzin { margin-inline: auto; }
.site-voordelen-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px; }
.site-voordelen.per-3 .site-voordelen-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-voordelen.per-4 .site-voordelen-in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.site-voordeel { display: grid; gap: 4px; align-content: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--hoek); padding: 22px 20px; }
.site-voordelen.los .site-voordeel { background: none; border: 0; padding: 0; }
.site-voordelen.midden .site-voordeel { justify-items: center; text-align: center; }
.site-voordeel-icoon { width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--winkel-accent) 12%, transparent); color: var(--winkel-accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.site-voordeel b { font-size: 16px; }
.site-voordeel span:not(.site-voordeel-icoon) { color: var(--muted); font-size: 14px; }
.site-stappen-in { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; counter-reset: stap; }
.site-stap { position: relative; display: grid; gap: 4px; align-content: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--hoek); overflow: hidden; }
.site-stap-foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; margin-bottom: 10px; }
.site-stap-nummer { position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--winkel-accent); color: var(--winkel-accent-ink, #fff); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.site-stap > b { font-size: 16px; padding: 0 20px; }
.site-stap:not(:has(.site-stap-foto)) > b { padding-top: 62px; }
.site-stap > span { color: var(--muted); font-size: 14px; padding: 0 20px 20px; }
.site-stappen.lijn .site-stappen-in { grid-template-columns: 1fr; gap: 0; }
.site-stappen.lijn .site-stap { grid-template-columns: 34px 1fr; column-gap: 18px; background: none; border: 0; border-radius: 0; overflow: visible; padding: 0 0 26px 0; }
.site-stappen.lijn .site-stap-nummer { position: static; grid-row: span 2; }
.site-stappen.lijn .site-stap > b, .site-stappen.lijn .site-stap > span { padding: 0; }
.site-stappen.lijn .site-stap > b { padding-top: 6px; }
.site-stappen.lijn .site-stap-foto { display: none; }
.site-stappen.lijn .site-stap::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; border-left: 2px solid var(--line); }
.site-stappen.lijn .site-stap:last-child::before { display: none; }
.site-review-badge { display: inline-flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px 6px 10px; font-size: 14px; }
.site-review-badge b { font-size: 20px; }
.site-review-badge a { color: inherit; }
.site-sterren { display: inline-flex; gap: 2px; }
.site-sterren svg { fill: var(--line); }
.site-sterren svg.vol { fill: #f2b33d; }
.site-reviews-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.site-review { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--hoek); padding: 22px; display: grid; gap: 10px; align-content: start; }
.site-review blockquote { margin: 0; font-size: 16px; line-height: 1.5; }
.site-review figcaption { font-size: 14px; color: var(--muted); }
.site-review figcaption b { color: inherit; display: block; }
.site-reviews.groot .site-reviews-in { grid-template-columns: 1fr; max-width: 860px; }
.site-reviews.groot .site-review { background: none; border: 0; padding: 0; }
.site-reviews.groot .site-review blockquote { font-size: 24px; line-height: 1.35; font-weight: 600; }
.site-downloads-in { display: grid; gap: 8px; max-width: 760px; }
.site-download { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--hoek-klein); text-decoration: none; color: inherit; }
.site-download:hover { border-color: var(--winkel-accent); }
.site-download i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .04em; background: var(--wash); padding: 6px 8px; border-radius: 6px; min-width: 48px; text-align: center; }
.site-download span { flex: 1; display: grid; min-width: 0; }
.site-download small { color: var(--muted); }
.site-download svg { color: var(--winkel-accent); flex: none; }
.site-samen-in { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.site-samen-in > .shop-kaart { flex: 1 1 200px; max-width: 280px; }
.site-samen-plus { font-size: 26px; color: var(--muted); }
.site-reken-vlak { background: var(--card); border: 1px solid var(--line); border-radius: var(--hoek); padding: 22px; display: grid; gap: 18px; }
.site-reken-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.site-reken-veld { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.site-reken-veld input { width: 100%; min-width: 0; height: 46px; border: 1px solid var(--line); border-radius: var(--hoek-klein); padding: 0 12px; font: inherit; font-size: 16px; background: var(--card); }
.site-reken-uit { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); }
.site-reken-getal { font-size: 18px; }
.site-reken-getal b { font-size: 34px; font-variant-numeric: tabular-nums; }
.site-reken-tekst { color: var(--muted); }
.site-reken-producten { margin-top: 18px; }
.site-reken-kaart { display: contents; }
.site-reken-kaart[hidden] { display: none; }
.site-reken-geen { margin-top: 18px; display: grid; gap: 12px; justify-items: start; }
.site-keuzehulp-stappen { position: relative; }
.site-keuzehulp-vraag { display: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--hoek); padding: 24px; }
.site-keuzehulp-vraag.aan { display: grid; gap: 12px; }
.site-keuzehulp-nummer { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--winkel-accent); }
.site-keuzehulp-vraag > b { font-size: 20px; }
.site-keuzehulp-opties { display: flex; flex-wrap: wrap; gap: 8px; }
.site-keuzehulp-optie { font: inherit; font-weight: 600; padding: 12px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: inherit; cursor: pointer; }
.site-keuzehulp-optie:hover, .site-keuzehulp-optie.aan { border-color: var(--winkel-accent); color: var(--winkel-accent); }
.site-keuzehulp-uit { display: grid; gap: 14px; justify-items: start; }
.site-keuzehulp-advies { display: grid; gap: 10px; justify-items: start; background: var(--card); border: 1px solid var(--winkel-accent); border-radius: var(--hoek); padding: 24px; width: 100%; }
.site-keuzehulp-advies > b { font-size: 20px; }
.site-keuzehulp-advies p { margin: 0; color: var(--muted); max-width: 64ch; }
.site-keuzehulp-opnieuw { font: inherit; font-size: 14px; background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 0; }
@media (max-width: 760px){
.site-voordelen.per-3 .site-voordelen-in, .site-voordelen.per-4 .site-voordelen-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-reviews.groot .site-review blockquote { font-size: 19px; }
}
@media (max-width: 480px){
.site-voordelen.per-3 .site-voordelen-in, .site-voordelen.per-4 .site-voordelen-in { grid-template-columns: minmax(0, 1fr); }
.site-samen-in > .shop-kaart { max-width: none; }
}
.site-lead { font-size: 19px; line-height: 1.5; color: var(--muted); max-width: 64ch; margin: 10px 0 14px; }
.site-berichtstaart { display: grid; gap: 28px; margin-top: 40px; }
.site-deel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.site-deel-kop { font-weight: 700; margin-right: 6px; }
.site-deelknop { font: inherit; font-size: 14px; font-weight: 600; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: inherit; text-decoration: none; cursor: pointer; }
.site-deelknop:hover { border-color: var(--winkel-accent); color: var(--winkel-accent); }
.site-auteurblok { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--hoek); background: var(--card); }
.site-auteurblok img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.site-auteurblok > div { display: grid; gap: 2px; }
.site-auteurblok-kop { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.site-auteurblok b { font-size: 16px; }
.site-buren { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.site-buur { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--hoek-klein); text-decoration: none; color: inherit; }
.site-buur:hover { border-color: var(--winkel-accent); }
.site-buur small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.site-buur span { font-weight: 700; }
.site-buur-volgende { text-align: right; grid-column: 2; }
.site-rubriekfilter { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 18px; }
.site-rubriekknop { font: inherit; font-size: 14px; font-weight: 600; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: inherit; cursor: pointer; }
.site-rubriekknop.aan, .site-rubriekknop:hover { background: var(--winkel-accent); border-color: var(--winkel-accent); color: var(--winkel-accent-ink, #fff); }
.site-bericht-foto { position: relative; display: block; }
.site-bericht-rubriek { position: absolute; left: 10px; top: 10px; background: rgba(255,255,255,.92); color: var(--text, #1e2450); font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.site-bericht-tekst { display: grid; gap: 6px; }
.site-bericht-samenvatting { color: var(--muted); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.site-bericht[hidden] { display: none; }
.site-berichten.uitgelicht .site-berichten-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-berichten.uitgelicht .site-bericht.groot { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center; }
.site-berichten.uitgelicht .site-bericht.groot .site-bericht-foto img { aspect-ratio: 16 / 10; }
.site-berichten.uitgelicht .site-bericht.groot .site-bericht-naam { font-size: 26px; line-height: 1.2; }
.site-berichten.uitgelicht .site-bericht.groot .site-bericht-samenvatting { font-size: 16px; -webkit-line-clamp: 4; }
@media (max-width: 760px){
.site-berichten.uitgelicht .site-berichten-in { grid-template-columns: 1fr; }
.site-berichten.uitgelicht .site-bericht.groot { grid-template-columns: 1fr; }
.site-buren { grid-template-columns: 1fr; }
.site-buur-volgende { grid-column: auto; text-align: left; }
}
.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 label[hidden] { display: none; }
.site-veld-als { display: contents; }
.site-veld-als[hidden] { display: none; }
.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; }
.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-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-voorraad.wacht { color: #b45309; }
.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-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; }
.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-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-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-code { font-size: 11.5px; color: var(--muted); }
@media (max-width: 900px){
.ch-keuzes, .ch-kleuren, .ch-uitvoering-velden { grid-template-columns: 1fr; }
}
.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-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; }
@media (max-width: 720px){
.web-winkelkeuze { width: 100%; margin-left: 0; }
}
.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); }
.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); }
.mr-naar { width: 220px; text-align: left; }
.mr-url { width: 200px; }
.mr-url[hidden] { display: none; }
.wt-rij > label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wt-hint { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
.wt-rij .wt-klopt, .pe-verouderd .pe-vt-ok { display: inline-flex; align-items: center; gap: 8px; width: max-content; font-size: 12.5px; font-weight: 500; color: var(--ink); cursor: pointer; }
.wt-rij .wt-klopt input[type=checkbox], .pe-verouderd .pe-vt-ok input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--btn-bg); }
.pe-verouderd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 12.5px; }
.vt-stand { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vt-open { text-align: right; white-space: nowrap; width: 1%; }
.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-vlak-donker { background: var(--nova-inkt, var(--ink, #1a1a1a)); color: #fff; }
.site-blok.opm-vlak-donker h1, .site-blok.opm-vlak-donker h2, .site-blok.opm-vlak-donker h3,
.site-blok.opm-vlak-donker p, .site-blok.opm-vlak-donker li, .site-blok.opm-vlak-donker b { color: #fff; }
.site-blok.opm-vlak-donker > 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; }
}
.pb-greep { color: var(--muted); letter-spacing: -2px; cursor: grab; font-size: 15px; user-select: none; width: 14px; 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-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-na { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sub); }
.pb-na input { width: 64px; }
.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); }
.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; }
.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-wrap: anywhere; }
.fk-meer { grid-column: 1 / -1; justify-self: center; }
.fk-leeg { grid-column: 1 / -1; color: var(--muted); padding: 20px; text-align: center; }
.fk-klein { position: relative; flex: none; }
.fk-klein .fk-thumb { width: 52px; height: 52px; padding: 0; cursor: pointer; font: inherit; }
.fk-klein .fk-thumb:hover, .fk-klein .fk-thumb:focus-visible { border-color: var(--ink); outline: none; }
.fk-klein.leeg .fk-thumb::before { content: "+ foto"; }
.fk-klein.leeg .fk-thumb:has(img)::before { content: none; }
.fk-thumb img.fk-leen { opacity: .55; filter: grayscale(.4); }
.fk-weg-klein { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--sub); font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fk-weg-klein:hover { color: var(--ink); border-color: var(--ink); }
.lv { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.lv-doek { position: sticky; top: 12px; min-width: 0; display: flex; flex-direction: column; background: var(--wash); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lv-balk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; background: var(--card); border-bottom: 1px solid var(--line); }
.lv-winkel.web-winkelkeuze { margin: 0; padding: 0; }
.lv-status { margin-left: auto; }
.lv-doek-in { position: relative; height: calc(100vh - 150px); min-height: 440px; overflow: hidden; padding: 16px; display: flex; justify-content: center; align-items: flex-start; }
.lv-schaal { position: relative; flex: none; }
.lv-laden { position: absolute; left: 0; right: 0; top: 40%; z-index: 1; margin: 0; text-align: center; }
.lv-venster { position: absolute; left: 0; top: 0; border: 0; background: #fff; transform-origin: 0 0; border-radius: 10px 10px 0 0; box-shadow: 0 0 0 1px rgba(16, 24, 40, .06), 0 12px 32px -14px rgba(16, 24, 40, .35); }
.lv-schaal.lv-tel .lv-venster { border-radius: 28px; box-shadow: 0 0 0 12px #1b1d24, 0 20px 50px -14px rgba(16, 24, 40, .45); }
.lv-venster.lv-achter { visibility: hidden; pointer-events: none; }
main .lv .lv-schaal > .lv-venster { max-width: none; }
.lv > .opslaanbalk { grid-column: 1 / -1; }
.lv-licht { animation: lv-licht 1.2s ease-out; }
.lv-maat-rij { display: flex; align-items: center; gap: 10px; }
.lv-maat-rij input[type="range"] { flex: 1; min-width: 0; accent-color: var(--data); }
.lv-maat-rij output { min-width: 52px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }
@keyframes lv-licht { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--data) 45%, transparent); } to { box-shadow: 0 0 0 3px transparent; } }
@media (max-width: 1180px){
.lv { grid-template-columns: minmax(0, 1fr); }
.lv-doek { position: static; }
.lv-doek-in { height: 520px; }
}
.ck-tegel { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.ck-tegel.aan { border-color: var(--data); box-shadow: 0 0 0 1px var(--data); }
.ck-tegel.sleept { opacity: .45; }
.ck-greep { flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 40px; padding: 0; border: 0; background: none; color: var(--muted); cursor: grab; border-radius: 6px; }
.ck-greep:hover, .ck-greep:focus-visible { color: var(--ink); background: var(--wash2); outline: none; }
.ck-tegel-velden { flex: 1; min-width: 0; gap: 6px; }
.ck-tegel-velden input { width: 100%; }
.ck-tegel-velden input[name="tegels__adres"] { font-size: 12.5px; color: var(--sub); }
.ck-tegel .ck-weg.ghost { flex: none; width: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--sub); }
.ck-tegel .ck-weg.ghost:hover { color: var(--neg); }
.ck-weg svg { flex: none; }
@media (hover: hover){
.ck-tegel .fk-weg-klein { opacity: 0; transition: opacity .12s; }
.ck-tegel:hover .fk-weg-klein, .ck-tegel:focus-within .fk-weg-klein { opacity: 1; }
}
.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-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; }
.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-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 > summary { padding: 7px 4px; min-height: 36px; }
.vk-kolom .mt { border-bottom: 0; border-top: 1px solid var(--line); }
.vk-kolom .mt > summary { padding: 8px 12px; }
.vk-uitleg { padding: 0 18px 14px; font-size: 12.5px; }
@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; }
.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-getallen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.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); }
.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: var(--tv-foto-hoek, var(--tv-hoek-klein)); 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; }
.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; }
.schets { border: 1px dashed var(--line); border-radius: 10px; padding: 12px; background: var(--wash); position: sticky; top: 14px; display: grid; gap: 6px; }
.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); }
@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; }
.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); }
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)); }
.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; }
}
.kassa-naar-bon { display: none; }
@media (max-width: 1380px){
.kassa-naar-bon { display: flex; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 20; justify-content: center; align-items: center; gap: 10px;
padding: 13px 16px; border-radius: 10px; background: var(--ink); color: var(--bg); font-weight: 650; font-size: 15px; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.kassa-naar-bon.weg { display: none; }
.verkoop:has(.kassa-naar-bon) { padding-bottom: 76px; }
}
@media (max-width: 760px){
.kassa-naar-bon { bottom: calc(68px + env(safe-area-inset-bottom)); }
.verkoop:has(.kassa-naar-bon) { padding-bottom: 132px; }
}
.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; }
.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; }
.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; }
.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%; }
.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); }
.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; }
.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;
min-width: 0; overflow-wrap: anywhere; }
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; }
.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; }
.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); }
.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 .verkoop { 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 { grid-template-columns: 1fr; }
.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; }
.page-head .page-sub, .lijst-kop .page-sub { margin-bottom: 0; }
.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 .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); }
.vwb { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.vwb-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vwb-kop label { font-size: 12px; font-weight: 650; color: var(--ink); margin: 0; white-space: nowrap; }
.vwb-kop select { flex: 1 1 200px; min-width: 0; text-align: left; }
.vwb-rijen { display: flex; flex-direction: column; gap: 6px; }
.vwb-rij { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 26px; gap: 6px; align-items: center; }
.vwb-rij > *:nth-child(1) { grid-column: 1; }
.vwb-rij > *:nth-child(2) { grid-column: 2; }
.vwb-rij > *:nth-child(3) { grid-column: 3; }
.vwb-rij > *:nth-child(4) { grid-column: 4; }
.vwb-rij > *:nth-child(5) { grid-column: 5; }
.vwb-rij > select, .vwb-rij > input, .vwb-rij > .kiesveld { min-width: 0; font-size: 12.5px; text-align: left; }
.vwb-rij > input { padding: 5px 8px; }
.vwb-rij > [hidden] { visibility: hidden; }
.vwb-weg { border: 0; background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 4px; border-radius: 6px; }
.vwb-weg:hover { color: var(--ink); background: var(--wash); }
.vwb > [data-vwb-erbij] { align-self: flex-start; }
.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 .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); }
.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); }
.lijst-kaart.compact .lt td { padding: 5px 10px; font-size: 13px; }
.lijst-kaart.compact .lt .sub { display: none; }
.bulk { display: flex; flex-wrap: wrap; 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; flex-wrap: wrap; 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; }
.lt .rij-menu { display: none; }
.lt .rij-menu > summary { list-style: none; cursor: pointer; height: 28px; min-width: 32px; padding: 0 8px; display: inline-grid; place-items: center; font-size: 16px; line-height: 1; }
.lt .rij-menu > summary::-webkit-details-marker { display: none; }
@media (max-width: 1300px){
.lt th.acties { width: 48px; }
.lt td.acties { width: 48px; padding-right: 10px; text-align: right; }
.lt td.acties .rij-menu { display: inline-block; }
}
@media (min-width: 601px) and (max-width: 1300px){
.lt td.acties .rij-menu:not([open]) + .rij-acties { display: none; }
.lt td.acties .rij-menu[open] + .rij-acties { position: absolute; right: 0; top: calc(100% + 4px); transform: none; opacity: 1; z-index: 30; display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 180px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.lt td.acties .rij-menu[open] + .rij-acties :is(.ghost, form) { width: 100%; }
.lt td.acties .rij-menu[open] + .rij-acties .ghost { justify-content: flex-start; text-align: left; white-space: normal; height: auto; min-height: 32px; }
}
@media (max-width: 600px){
.lt td.acties .rij-acties { display: inline-flex; flex-wrap: wrap; position: static; opacity: 1; }
.lt td.acties .rij-menu { display: none; }
.lt td.acties { width: auto; text-align: left; }
}
@media (max-width: 900px){
.lijst-voet .toetsen, .lt-voet .toetsen { display: none; }
}
@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; min-width: 0; }
.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; }
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); }
.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; }
.boom .tak { padding: 9px 18px; border-bottom: 1px solid var(--line); }
.boom .tak.gekozen { background: var(--data-wash); }
.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; }
.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 .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); }
.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; }
@media (max-width: 900px){
.ve-meer { margin-left: 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; }
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; }
.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; }
body.chat-vol .ch-vol-scherm { height: calc(100vh - 32px); }
.cp-wacht { color: var(--chip-orange-ink); font-weight: 600; }
.ch-sys { align-self: center; font-size: 12px; color: var(--muted); padding: 2px 10px; }
#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; }
#chat-zijpaneel .card > div, #chat-zijpaneel .card form { min-width: 0; }
table tr.actief td { background: var(--wash2); }
.v-c { background: #ea580c !important; }
.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; }
@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); } }
.op-stap { padding: 6px 14px; gap: 8px; }
.op-stap .op-tijd { width: 44px; }
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; }
.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; }
.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; }
.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%; }
.regel .stapper input { padding: 0 2px; border: 0; border-radius: 0; height: auto; }
.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); }
}
.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.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 td .mono { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.upl-titel { font-weight: 650; }
.upl-pct { color: var(--sub); font-weight: 600; }
.upl-balk { display: block; height: 8px; border-radius: 99px; background: var(--wash); overflow: hidden; }
.upl-balk i { display: block; height: 100%; width: var(--w, 0%); border-radius: 99px; background: var(--chip-green-dot); transition: width .3s ease; }
.upl-balk.wacht i { width: 30%; animation: upl-schuif 1.4s ease-in-out infinite; }
@keyframes upl-schuif { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.upl-tekst { display: block; margin: 0; font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; }
.upl-fout .upl-balk i { background: var(--neg); }
.upl-fout .upl-titel, .upl-fout .upl-tekst { color: var(--neg); }
@media (prefers-reduced-motion: reduce){
.upl-balk.wacht i { animation: none; width: 100%; opacity: .45; }
}
.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); }
.lijst[data-lijst="bank"] .lt th, .lijst[data-lijst="bank"] .lt td { vertical-align: top; }
.lijst[data-lijst="bank"] .lt td { line-height: 20px; }
.lijst[data-lijst="bank"] .lt td .sub { line-height: 16px; overflow-wrap: anywhere; hyphens: auto; }
.lijst[data-lijst="bank"] .lt td.kies input { display: block; margin-top: 2.5px; }
.lijst[data-lijst="bank"] .lt th.kies input { display: block; margin-top: .75px; }
.lijst[data-lijst="bank"] .lt { table-layout: fixed; }
.lijst[data-lijst="bank"] .lt .k-omschrijving { width: 22%; }
.lijst[data-lijst="bank"] .lt td.k-tegenpartij, .lijst[data-lijst="bank"] .lt td.k-omschrijving, .lijst[data-lijst="bank"] .lt td.k-voorstel { overflow-wrap: anywhere; }
@media (max-width: 600px){
.lijst[data-lijst="bank"] .lt .k-datum, .lijst[data-lijst="bank"] .lt .k-bedrag,
.lijst[data-lijst="bank"] .lt .k-tegenpartij, .lijst[data-lijst="bank"] .lt .k-omschrijving,
.lijst[data-lijst="bank"] .lt .k-voorstel, .lijst[data-lijst="bank"] .lt .k-status { width: auto; max-width: none; }
.lijst[data-lijst="bank"] .lt td.k-tegenpartij, .lijst[data-lijst="bank"] .lt td.k-omschrijving,
.lijst[data-lijst="bank"] .lt td .sub, .lijst[data-lijst="bank"] .lt .lt-stand > span { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
}
.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; }
table.btw-rubrieken > thead > tr > th:first-child,
table.btw-rubrieken > tbody > tr:not(.lt-uitgeklapt) > td:first-child { padding-left: 42px; }
table.btw-rubrieken .btw-toggle { margin-left: -30px; }
@media (max-width: 1180px){
table.btw-rubrieken > thead > tr > th:first-child,
table.btw-rubrieken > tbody > tr:not(.lt-uitgeklapt) > td:first-child { padding-left: 64px; }
table.btw-rubrieken .btw-toggle { margin-left: -52px; }
table.btw-rubrieken tr.lt-uitgeklapt > td { padding-left: 56px; }
}
@media (max-width: 520px){
table.btw-rubrieken, table.btw-rubrieken > thead, table.btw-rubrieken > tbody { display: block; width: 100%; }
table.btw-rubrieken > thead > tr, table.btw-rubrieken > tbody > tr:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) 124px 112px; }
table.btw-rubrieken > tbody > tr > td:first-child { grid-column: 1 / -1; }
table.btw-rubrieken > tbody > tr > td:nth-child(2) { grid-column: 2; }
table.btw-rubrieken > tbody > tr > td:nth-child(3) { grid-column: 3; }
table.btw-rubrieken > thead > tr > th.num, table.btw-rubrieken > tbody > tr > td.num { width: auto; white-space: nowrap; }
table.btw-rubrieken > tbody > tr > td.num { padding-top: 0; }
}
.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; }
.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); }
.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); }
.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; }
.te-lang { color: var(--neg); }
.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; }
.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){
.lade-velden, .lade-velden.drie { grid-template-columns: 1fr; }
}
@media (max-width: 600px){
.schuiflade { width: 100vw !important; }
.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; }
.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; }
}
.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 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.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); }
}
.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); }
@media (max-width: 600px){
.boom .takken .sleep-item > .tak { flex-wrap: wrap; row-gap: 4px; }
.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; }
[data-teller-voor] { margin-left: 8px; font-weight: 400; }
[data-teller-voor].te-lang { color: var(--neg); }
.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-teksten.vr-met-lev > div:not(.field) { grid-template-columns: 150px 1fr; }
.vr-teksten.vr-met-lev > div.vr-lev-velden { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.vr-lev-rij { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: center; }
.vr-teksten.vr-met-lev > div:not(.field) input, .vr-lev-rij input { min-width: 0; width: 100%; box-sizing: border-box; }
@media (max-width: 600px){
.vr-teksten.vr-met-lev > div:not(.field), .vr-lev-rij { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
.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; }
.vrp-uit { display: none !important; }
.vrp-kaart .card-head.vrp-kop { flex-wrap: wrap; row-gap: 2px; }
.vrp-plekken { display: flex; flex-direction: column; padding: 2px 14px 14px; }
.vrp-plek { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; border-top: 1px solid var(--line); }
.vrp-plek:first-child { border-top: 0; padding-top: 10px; }
.vrp-plek h4 { margin: 0; font-size: 14px; font-weight: 650; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.vrp-plek h4 small { font-size: 13px; font-weight: 400; color: var(--sub); }
.vrp-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.vrp-velden .field input { width: 100%; box-sizing: border-box; min-width: 0; }
.vrp-schakels { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.vrp-schakels .wp-schakel-label { flex: 0 1 auto; }
.vrp-voet { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); line-height: 1.45; }
.nova-chip.vrp-chip { align-self: flex-start; justify-self: start; background: none; padding: 0; border-radius: 0; gap: 8px; font-size: 13px; font-weight: 700; color: #0e7a3a; }
.nova-chip.vrp-chip::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.nova-chip.vrp-chip.vrp-open::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.nova-chip.vrp-chip.nova-chip--nee { background: none; color: #9a5d06; }
@media (max-width: 900px){
.vrp-velden { grid-template-columns: minmax(0, 1fr); }
}
:is(.vr-mini, .vr-lev-rij, .lvw-rij, .lvw-nu) .nova-chip.nova-chip--wacht { background: #FFFAEB; color: #B54708; }
.vr-lev-uit { opacity: .55; }
.chip.blue { background: var(--chip-blue-bg, #eef4fd); color: var(--chip-blue-ink, #1a5fb4); }
.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; }
.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; }
.lade .drie-cijfers, .schuiflade .drie-cijfers { margin: 4px 0 10px; }
.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; }
.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>"); }
.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; }
.documenten .kv-lijst { padding: 8px 16px; }
.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-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-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; }
.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; }
.ov-zoek { display: flex; gap: 8px; align-items: center; }
.ov-zoek .ov-inp { width: 200px; }
.scan-hint.ok { color: var(--pos); }
.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-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; }
@media (max-width: 1100px){
.ik-stroom { flex-wrap: wrap; }
.ik-box { min-width: 140px; }
}
.ck-rood { color: var(--neg); }
.ck-oranje { color: var(--warn, #b2680d); }
.ck-groen { color: var(--pos); }
.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); }
.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); }
.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 .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; }
#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 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); }
}
details.lv-klap > summary { padding-left: 18px; padding-right: 18px; }
details.lv-klap > .klap-body { padding: 0 0 12px; gap: 8px; }
.lv-klap .lev-velden { padding-top: 0; padding-bottom: 0; }
.lv-klap .klap-body > .lv-vink, .lv-klap .lv-uitleg { padding: 0 18px; }
.lv-uitleg { margin: 0; font-size: 13px; color: var(--sub); line-height: 1.45; }
.lv-orders-via { padding: 10px 18px; border-bottom: 1px solid var(--line); }
.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-goed { color: var(--pos); font-weight: 600; }
.iz-fout { color: var(--neg); font-weight: 600; }
.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; }
}
@media (max-width: 1300px){
.po-regels td.acties, .po-regels th.acties { display: table-cell; }
}
.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; }
[data-bib-lade] .lade-voet { position: sticky; bottom: 0; z-index: 1; }
.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}
.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}
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}
.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; }
#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; flex-wrap: wrap; }
.zoekscan input { flex: 1 1 200px; min-width: 0; 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; }
.iz-waarde { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 12px 16px; }
.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-tabs{margin-bottom:14px}
.hs-tegelraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.hs-keuze{position:relative;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:has(input:checked){border-color:var(--text,#151821);box-shadow:0 0 0 1px var(--text,#151821)}
.hs-keuze:has(input:focus-visible){outline:2px solid var(--data);outline-offset:2px}
.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)}
.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}
.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; }
.lijstje i.uit { background: var(--muted); }
.ov-veld.vz-anders > label { color: var(--data); }
.ov-eenheid { display: inline-flex; align-items: center; gap: 6px; }
.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.nieuw{border-style:dashed}
.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}
@media (max-width:760px){
.vz-form{grid-template-columns:minmax(0,1fr)}
}
.vz-logo.klein{width:24px;height:24px;font-size:9px;border-radius:6px}
.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-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}
.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-cond{padding:3px 8px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12.5px}
.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-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}
.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}
.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-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; }
#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; }
.afr-douane { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: var(--wash2); font-size: 13px; color: var(--sub); }
.ca-foto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ca-foto .ra-foto { height: 56px; }
.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); }
td.bad { color: #b42318; font-weight: 600; }
td.ok { color: #116329; font-weight: 600; }
.inz-staven { justify-content: flex-start; gap: 6px; }
.inz-staven .staaf { max-width: 48px; min-height: 2px; }
@media (max-width: 600px){
.inz-staven { gap: 2px; }
.inz-staven .staaf { min-width: 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; }
.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)}
.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-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; }
.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; }
.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); }
.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-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; }
.rekt { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 14px; margin-bottom: 14px; }
.rekt.vijf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1360px){
.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: flex-start; gap: 8px; min-height: 26px; }
.rk .r1 .via { margin-left: auto; margin-top: 2px; 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); min-height: 20px; line-height: 20px; overflow-wrap: anywhere; margin-top: 2px; }
.rk .iban { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--sub); min-height: 20px; line-height: 20px; overflow-wrap: anywhere; }
.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; text-align: left; }
.rk .m { font-size: 12.5px; color: var(--sub); min-height: 20px; line-height: 20px; overflow-wrap: anywhere; }
.rk .m.let { color: var(--warn); }
.rk a.m.onder { color: var(--ink); text-decoration: none; }
.rk a.m.onder:hover { text-decoration: underline; }
.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-melding { display: flex; align-items: center; gap: 12px; }
.afl-melding form { margin-left: auto; }
.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; overflow-wrap: anywhere; 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); overflow-wrap: anywhere; 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; overflow-wrap: anywhere; 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); }
@media (max-width: 600px){
.afl-ken > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.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; overflow-wrap: anywhere; font-weight: 600; font-size: 13.5px; }
.afl-deel .tk small { display: block; color: var(--muted); overflow-wrap: anywhere; font-size: 12px; }
.afl-deel input.num { text-align: right; }
.afl-stand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 6px 0 0 12px; }
.afl-vgang { display: block; position: relative; width: 90px; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; flex: none; }
.afl-vgang b { position: absolute; inset: 0 auto 0 0; display: block; background: var(--chip-green-dot); border-radius: 999px; }
.afl-stand .let { color: var(--warn); margin-left: auto; }
.afl-stand .goed { color: var(--pos); margin-left: auto; }
.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; flex-wrap: wrap; justify-content: space-between; gap: 2px 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); }
.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; }
[data-lijst="bank"] .lt td .sub { overflow-wrap: anywhere; }
[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; overflow-wrap: anywhere; }
.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); }
.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; }
.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; }
.nakijk-rij.info { background: var(--wash2); color: var(--sub); }
.nakijk-rij.info a, .nakijk-rij.info .num { font-weight: 500 !important; color: var(--sub) !important; }
.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; }
.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}
.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}
.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; }
.afr-kluis { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.kaartvak.velden, .velden { display: flex; flex-direction: column; gap: 14px; }
.kop-rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.schakelrij { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.keuzeblokken { display: flex; gap: 8px; flex-wrap: wrap; }
.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 .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; overflow-wrap: anywhere; font-weight: 600; }
.ladder .trede .s { display: block; overflow-wrap: anywhere; font-size: 12.5px; color: var(--muted); }
@media (max-width: 600px){
.ladder .trede { grid-template-columns: 22px minmax(0, 1fr) auto auto; }
}
.ladder .trede .n { text-align: right; white-space: nowrap; font-weight: 600; }
.ladder .trede .n.mut { color: var(--muted); font-weight: 500; }
.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; }
.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; }
.verloop { display: flex; flex-direction: column; gap: 12px; }
.uitleg { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--sub); }
.uitleg p { margin: 0; }
.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; }
.kraster > .kkol, .kraster > aside.kkol { min-width: 0; }
.kraster .card { min-width: 0; }
@media (max-width: 900px){
#prijzen .kop-rechts { width: 100%; }
[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; }
.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="Werkplaats"] { 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="Adverteren"] { 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-terug { display: grid; margin-left: -11px; }
body.menu-open .topbar #mob-terug { display: none; }
.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; }
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)); }
.blad { position: fixed; inset: 0; z-index: 97; }
.blad[hidden] { display: none; }
.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[open]::before { content: ""; position: fixed; inset: 0; z-index: 91; background: rgba(21, 24, 33, .3); }
main input, main select, main textarea, main [style*="width:"]:not(.pb-rij) { max-width: 100%; }
.staafgrafiek { flex-wrap: nowrap; overflow-x: auto; height: 176px; }
.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; }
.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; }
.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; }
.stapper, .stapper.klein { height: 44px; }
.stapper input { min-height: 0; }
.fchip, a.chip { display: inline-flex; align-items: center; }
.lt-toggle { min-width: 44px; min-height: 44px; }
.seg 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, .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; }
: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); }
.bulk { bottom: calc(10px + 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; }
.chat-dock { inset: 0; width: auto; max-width: none; height: auto; border-radius: 0; border: 0; z-index: 96; }
}
@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-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); }
.main { margin-left: 64px; }
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; }
}
.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%; }
.ch-stand { white-space: normal; }
.lijst-kop .r, .page-head, .page-head .r { flex-wrap: wrap; }
}
.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); }
.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-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; }
}
.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-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); }
.chip.teal { background: var(--chip-teal-bg, #ccfbf1); color: var(--chip-teal-ink, #115e59); }
.chip.teal::before { 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-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; }
@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; }
}
#relatiekaart .kaart-terug { margin-bottom: 6px; display: inline-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); }
.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-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-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)}
.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-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}
.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: 760px){
.onderbalk .tab { position: relative; }
.kraster { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 16px; }
.kraster > .kkol { order: 0; min-width: 0; }
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; }
}
.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; }
.ir-meters .goed, .kv .goed { color: var(--pos, #1b7a3f); }
.ir-meters .let, .kv .let { color: #a35a0c; }
.ir-meters .muted, .kv .muted { color: var(--muted); }
.ir-adres-extra { margin-top: 2px; }
.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}
.shop-niet-gevonden-hulp { margin-top: 24px; }
.fbw-vraag { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(140px, 210px) auto auto; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.fbw-vraag:first-child { border-top: 1px solid var(--line); }
.fbw-vraag.sleept { opacity: .45; }
.fbw-greep { width: 24px; height: 32px; padding: 0; display: grid; place-items: center; color: var(--muted); cursor: grab; border-radius: 6px; background: none; border: 0; }
.fbw-greep:hover, .fbw-greep:focus-visible { color: var(--ink); background: var(--wash); }
.fbw-meer, .fbw-als { grid-column: 2 / -1; }
.fbw-meer { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px 8px; align-items: center; }
.fbw-vink { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; white-space: nowrap; }
.fbw-als { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12.5px; color: var(--muted); }
.fbw-als label { font-size: 12.5px; }
.fbw-als select { min-width: 0; max-width: 260px; }
.fbw-als select:disabled { opacity: .55; }
.fbw-vraag.is-vervolg .fbw-als { color: var(--ink); }
.fbw-weg { width: 30px; padding: 0; }
.fbw-weg svg, .fbw-toevoegen svg { width: 15px; height: 15px; flex: none; }
.fbw-plekken { display: grid; }
.fbw-plek { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; min-width: 0; }
.fbw-plek:first-child { border-top: 0; }
a.fbw-plek:hover, .fbw-los > a:hover b { text-decoration: underline; }
.fbw-plek span { display: grid; min-width: 0; }
.fbw-plek small { color: var(--muted); font-size: 12px; }
.fbw-plek svg { flex: none; color: var(--muted); }
.fbw-los { justify-content: space-between; }
.fbw-los > a { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-width: 0; }
.fbw-plek small.fbw-reden { color: var(--warn, #b54708); }
@media (max-width: 640px){
.fbw-vraag { grid-template-columns: 24px minmax(0, 1fr) auto; }
.fbw-vraag .fbw-soort { grid-column: 2 / 3; }
}
.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; }
@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; }
@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-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-blok { display: flex; flex-direction: column; min-width: 0; position: relative; padding: 0; }
.dash-kk { min-height: 48px; flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 20px; border-bottom: 1px solid var(--line); }
.dash-titel { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-width: 0; overflow-wrap: anywhere; }
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; overflow-wrap: anywhere; 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-kpirij { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; }
.dash-kpirij svg { flex: none; }
.dash-s2 { display: block; font-size: 12.5px; color: var(--sub); overflow-wrap: anywhere; }
.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-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-hb .l { overflow-wrap: anywhere; 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; font-weight: 600; font-variant-numeric: tabular-nums; }
.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); overflow-wrap: anywhere; }
.dash-feiten .l { flex: 1 1 auto; min-width: 0; }
.dash-feiten .v { font-weight: 600; text-align: right; flex: 0 1 auto; max-width: 72%; font-variant-numeric: tabular-nums; }
.dash-feiten .v.warn { color: var(--warn); }
.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-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; min-height: 34px; padding: 6px 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 { overflow-wrap: anywhere; }
.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 { overflow-wrap: anywhere; }
.dash-rij .c { min-width: 0; }
.dash-rij .c.n { text-align: right; }
.dash-rij .c .t { overflow-wrap: anywhere; }
.dash-rij .c .t.vet { font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-rij .c .s { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.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%; white-space: normal; overflow-wrap: anywhere; }
.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-doen .c, .dash-agenda .c, .dash-team .c { min-width: 0; }
.dash-doen .t, .dash-agenda .t, .dash-team .t { font-size: 13.5px; overflow-wrap: anywhere; }
.dash-doen .s, .dash-agenda .s, .dash-team .s { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.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-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; overflow-wrap: anywhere; }
.dash-verloop small { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.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 { overflow-wrap: anywhere; }
.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-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-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-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; }
[data-tip] { cursor: default; }
.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-lade { right: 12px; }
}
@media (max-width: 700px){
.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-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; }
#blok-kliks .dash-hb > div, #blok-kliks-start .dash-hb > div { grid-template-columns: 132px minmax(0,1fr) auto; }
.dash-kstrip { grid-template-columns: repeat(2, minmax(0,1fr)); }
.dash-tabs { gap: 14px; }
.dash-lade { right: 8px; left: 8px; width: auto; }
.dash-tvvoet { flex-direction: column; gap: 6px; }
}
.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-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-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; }
.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-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; }
.dash-lijst.landing .dash-rij { grid-template-columns: minmax(0,1fr) 56px 64px 60px 76px; }
.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: 700px){
.an-matrix .an-rij { font-size: 11.5px; }
}
.dash-hm .r { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
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-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; overflow-wrap: anywhere; }
.dash-team a.t { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
.dash-hb a.l { overflow-wrap: anywhere; }
.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); }
.an-hint { padding: 8px 14px 12px; color: var(--muted); font-size: 12px; }
.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: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 2px; align-content: start; 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; }
.ex-strook b { font-size: 15px; overflow-wrap: anywhere; }
.ex-strook span { font-size: 12.5px; color: var(--sub); overflow-wrap: anywhere; }
.ex-strook .goed { color: var(--pos); }
.ex-strook .let { color: var(--chip-orange-ink); }
.ex-strook .bad { color: var(--neg); }
.ex-kies { margin: 0 0 12px; }
.ex-sub { display: block; font-size: 12.5px; color: var(--muted); white-space: normal; }
#exact-richting-tabel .segment { flex-wrap: wrap; }
#exact-sleutels .lt th:last-child, #exact-sleutels .lt td:last-child { width: 1%; }
#exact-waarvoor .btn-primary[disabled] { opacity: .5; cursor: default; }
.lt .segment { transform: scale(.92); transform-origin: left center; }
.bw{display:flex;flex-direction:column;gap:12px;width:100%;min-width:0}
.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-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-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-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)}
.gl{display:flex;flex-direction:column;width:100%;min-width:0}
#gl-zoek{width:240px}
.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-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-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-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-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}
.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-telling{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.sl-telling.fout{color:var(--neg)}
.vkp-kaart{max-width:560px;width:100%;padding:28px 32px}
.vkp-kaart h1{font-size:24px;margin:6px 0 8px}
.vkp-kaart .vkp-meta{color:#5b6270;line-height:1.5;margin:0 0 16px}
.vkp-kaart .form-ok{margin:0 0 14px}
.vkp-lijst{display:flex;flex-direction:column;gap:8px}
.vkp-keuze{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.vkp-keuze.aan,.vkp-keuze:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.vkp-keuze input{margin:0}
.vkp-keuze b{display:block;font-size:14px}
.vkp-keuze small{display:block;color:#5b6270;font-size:12.5px}
.vkp-schakels{border-top:1px solid var(--line);margin-top:14px;padding-top:12px;display:flex;flex-direction:column;gap:8px}
.vkp-schakel{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.4;cursor:pointer}
.vkp-schakel input{margin:3px 0 0}
.vkp-onder{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.vkp-taal{display:inline-flex;align-items:center;gap:6px}
.vkp-taalkeuze{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12.5px;cursor:pointer}
.vkp-taalkeuze input{position:absolute;opacity:0;width:0;height:0}
.vkp-taalkeuze.aan,.vkp-taalkeuze:has(input:checked){background:var(--ink);color:#fff;border-color:var(--ink)}
.vkp-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)}
.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-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-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-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}
.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;min-width:0}
.in-qr-tekst .cell-sub{overflow-wrap:anywhere}
.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-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.over{background:var(--chip-blue-bg);outline:2px dashed var(--data);outline-offset:-2px}
.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}
@media (max-width:900px){
.kal-dag{min-height:70px}
.kal-evt{font-size:11px}
}
.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.kassa i { background: var(--chip-purple-dot, #7c3aed); }
.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.kassa { background: var(--chip-purple-dot, #7c3aed); }
.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-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; }
.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; overflow-wrap: anywhere; }
.lk-spoor small { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 600px){
.lk-spoor, .lk-spoor.vier { grid-template-columns: minmax(0, 1fr); }
.lk-spoor > div + div { border-left: 0; border-top: 1px solid var(--line); }
}
.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-kaart > .fo-kort, .fo-kaart > .fo-maand, .fo-kaart > .fo-standlijst { flex: 1; }
.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-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; container-type: inline-size; }
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; overflow-wrap: anywhere; }
.fo-tegel b { font-size: min(20px, 13.5cqi); letter-spacing: -.01em; line-height: 1.35; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; font-weight: 650; }
.fo-tegel span { font-size: 12.5px; color: var(--sub); overflow-wrap: anywhere; }
.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-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-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.terug, .fo-stapel > i.terug { background: var(--chip-blue-dot, #2563eb); }
.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-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; overflow-wrap: anywhere; }
.fo-kort small { display: block; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.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; }
.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-kpis.fo-vijf, .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; }
.shop-keuze-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; }
.shop-keuze-achter { position: absolute; inset: 0; background: rgba(20, 22, 40, .38); }
.shop-keuze-vlak { position: relative; width: min(600px, 100%); max-height: 90vh; overflow: auto; }
.shop-keuze { background: var(--card, #fff); border-radius: 8px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); padding: 22px 24px 8px; }
.shop-keuze-kop { display: flex; align-items: baseline; gap: 10px; padding-right: 40px; margin: 0 0 14px; position: relative; }
.shop-keuze-kop b { font-size: 18px; }
.shop-keuze-kop span { font-size: 14px; color: var(--muted, #667085); }
.shop-keuze-sluit { position: absolute; right: -8px; top: -6px; width: 36px; height: 36px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; color: inherit; display: inline-flex; align-items: center; justify-content: center; }
.shop-keuze-sluit:hover { background: var(--wash, #f3f4f6); }
.shop-keuze-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; grid-template-areas: "naam voorraad prijs aantal knop"; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line, #e5e7eb); margin: 0; }
.shop-keuze-naam { grid-area: naam; }
.shop-keuze-voorraad { grid-area: voorraad; }
.shop-keuze-prijs { grid-area: prijs; }
.shop-keuze-aantal { grid-area: aantal; }
.shop-keuze-knop { grid-area: knop; }
.shop-keuze-naam { font-weight: 600; }
.shop-keuze-voorraad { font-size: 12.5px; color: var(--ok, #16a34a); white-space: nowrap; }
.shop-keuze-voorraad.uit { color: var(--muted, #667085); }
.shop-keuze-voorraad.wacht { color: #b45309; }
.shop-keuze-prijs { font-weight: 700; white-space: nowrap; }
.shop-keuze-aantal { width: 60px; height: 40px; border: 1px solid var(--line, #e5e7eb); border-radius: 6px; text-align: center; font: inherit; }
.shop-keuze-knop { height: 40px; padding: 0 16px; border: 0; border-radius: 6px; background: var(--winkel-accent); color: var(--winkel-accent-ink, #fff); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.shop-keuze-knop[disabled] { opacity: .45; cursor: default; }
@media (max-width: 559px){
.shop-keuze-rij { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "naam prijs" "voorraad voorraad" "aantal knop"; gap: 8px 12px; }
.shop-keuze-aantal { justify-self: start; }
.shop-keuze-knop { justify-self: end; }
}
.pdp-vtabel-vest, .shop-keuze-vest { display: flex; flex-direction: column; gap: 3px; white-space: nowrap; }
.pdp-vest { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--ink, #1f2937); }
.pdp-vest i { width: 8px; height: 8px; border-radius: 50%; background: #2e9e4f; flex: none; }
.pdp-vest.stand-bijna i { background: #d97706; }
.pdp-vest.stand-nee i { background: #c0392b; }
.pdp-vest b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pdp-vest.stand-nee b { color: #c0392b; }
.pdp-vest.stand-bijna b { color: #b45309; }
.pdp-staffelknop { display: inline-flex; align-items: center; gap: 5px; margin: 3px 0 0; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink, #1f2937); cursor: pointer; white-space: nowrap; }
.pdp-staffelknop svg { transition: transform .15s; }
.pdp-staffelknop[aria-expanded="true"] svg { transform: rotate(180deg); }
.pdp-vtabel-staffels, .shop-keuze-staffels { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-vtabel-staffels { padding: 0 18px 12px; }
.shop-keuze-staffels { grid-column: 1 / -1; }
.pdp-trede { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 10px; border: 1px solid var(--line, #e5e7eb); border-radius: 6px; background: var(--card, #fff); font: inherit; text-align: left; cursor: pointer; }
.pdp-trede small { font-size: 11.5px; color: var(--muted, #667085); }
.pdp-trede b { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pdp-trede span { font-size: 11.5px; color: #2e9e4f; font-weight: 600; }
.pdp-trede:hover { border-color: var(--ink, #1f2937); }
.pdp-trede.aan { border-color: var(--winkel-accent, #1f2937); box-shadow: inset 0 0 0 1px var(--winkel-accent, #1f2937); }
.pdp-vtabel-foto { width: 40px; height: 40px; border-radius: 4px; border: 1px solid var(--line, #e5e7eb); overflow: hidden; background: #fff; display: block; flex: none; }
.pdp-vtabel-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-vtabel.met-foto .pdp-vtabel-kop, .pdp-vtabel.met-foto .pdp-vtabel-rij { grid-template-columns: 40px minmax(0, 1fr) 100px 118px 84px; }
.pdp-vtabel.met-foto .pdp-vtabel-kop span:first-child { grid-column: 1 / 3; }
@media (max-width: 600px){
.winkel .pdp-vtabel.met-foto .pdp-vtabel-rij { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "foto naam prijs" "voorraad voorraad aantal"; }
.winkel .pdp-vtabel.met-foto .pdp-vtabel-foto { grid-area: foto; }
}
.pdp-vest.stand-elders i { background: #c7c9d6; }
.pdp-vest.stand-elders b { color: var(--muted, #667085); font-weight: 600; }
.pdp-vtabel-leeg { display: flex; flex-direction: column; gap: 3px; white-space: nowrap; }
.pdp-vtabel-leeg .pdp-vest { color: #c0392b; font-weight: 600; }
.pdp-vtabel-leeg small { font-size: 12px; color: var(--muted, #667085); font-weight: 400; }
.pdp-vtabel-btw { font-size: 12.5px; }
.pdp-vtabel-som small { display: block; font-size: 12.5px; color: var(--muted, #667085); }
.pdp-vtabel-som small:empty { display: none; }
.pdp-betalen-tabel { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.shop-keuze-foto { display: inline-flex; width: 36px; height: 36px; border-radius: 4px; border: 1px solid var(--line, #e5e7eb); overflow: hidden; vertical-align: middle; margin-right: 10px; background: #fff; flex: none; }
.shop-keuze-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-keuze-naam { display: inline-flex; align-items: center; white-space: nowrap; }
.shop-keuze-leeg { display: flex; flex-direction: column; gap: 2px; }
.shop-keuze-leeg .pdp-vest { color: #c0392b; font-weight: 600; }
.shop-keuze-leeg small { font-size: 12px; color: var(--muted, #667085); }
.wagen-naamlink { color: inherit; text-decoration: none; }
.wagen-naamlink:hover { text-decoration: underline; }
.wagen-fotolink { display: block; line-height: 0; }
.site-lichtbak { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.site-lichtbak::backdrop { background: rgba(8, 12, 24, .9); backdrop-filter: blur(4px); }
.site-lichtbak[open] { animation: lichtbak-in .18s ease-out; }
@keyframes lichtbak-in { from { opacity: 0; } to { opacity: 1; } }
.site-lichtbak-vlak { position: absolute; inset: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; justify-items: center; }
.site-lichtbak-figuur { grid-column: 2; margin: 0; display: grid; gap: 12px; justify-items: center; max-width: 100%; }
.site-lichtbak-figuur img { display: block; max-width: min(100%, 1400px); max-height: calc(100vh - 120px); width: auto; height: auto; object-fit: contain; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.site-lichtbak-tekst { display: flex; gap: 14px; align-items: baseline; color: rgba(255, 255, 255, .85); font-size: 14px; max-width: 80ch; text-align: center; }
.site-lichtbak-tekst:empty { display: none; }
.site-lichtbak-teller { color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-lichtbak-sluit { position: fixed; right: 18px; top: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; cursor: pointer; font-size: 0; z-index: 2; }
.site-lichtbak-sluit:hover { background: rgba(255, 255, 255, .28); }
.site-lichtbak-pijl { width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; cursor: pointer; }
.site-lichtbak-pijl:hover { background: rgba(255, 255, 255, .28); }
.site-lichtbak-pijl.vorige { grid-column: 1; }
.site-lichtbak-pijl.volgende { grid-column: 3; }
.site-lichtbak-pijl[hidden] { display: none; }
html.lichtbak-open { overflow: hidden; }
html.lichtbak-open .chat-widget, html.lichtbak-open .shop-onderbalk, html.lichtbak-open .pdp-koopbalk { display: none !important; }
@media (max-width: 760px){
.site-lichtbak-vlak { grid-template-columns: minmax(0, 1fr); align-content: center; }
.site-lichtbak-figuur { grid-column: 1; width: 100%; padding: 0 12px; box-sizing: border-box; }
.site-lichtbak-figuur img { max-width: 100%; max-height: calc(100vh - 150px); border-radius: 8px; }
.site-lichtbak-pijl { position: fixed; bottom: 22px; grid-column: auto; }
.site-lichtbak-pijl.vorige { left: 16px; }
.site-lichtbak-pijl.volgende { right: 16px; }
.site-lichtbak-tekst { font-size: 13px; padding: 0 8px; }
}
.site-koopkop { display: grid; grid-template-columns: 1.25fr .75fr; gap: 28px; align-items: stretch; }
.site-koopkop.zonder-artikel { grid-template-columns: 1fr; }
.site-koopkop-tekst { background: var(--wash); border-radius: var(--hoek, 12px); padding: 40px 44px; display: grid; align-content: center; gap: 8px; }
.site-kopje { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--winkel-accent); }
.site-koopkop h1, .site-koopkop h2 { font-size: 40px; line-height: 1.12; margin: 4px 0 2px; }
.site-koopkop-zin { font-size: 17px; color: var(--muted); max-width: 52ch; margin: 0; }
.site-koopkop-knoppen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.site-koopkop-knoppen .site-knop { margin-top: 0; }
.site-knop-licht { background: var(--card); color: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 12px 18px; font-weight: 700; }
.site-koopkop-usps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; font-size: 14.5px; font-weight: 500; }
.site-koopkop-usps li { display: flex; align-items: center; gap: 8px; }
.site-koopkop-usps svg { width: 16px; height: 16px; color: var(--winkel-accent); flex: none; }
.site-koopkaart { position: relative; border: 1px solid var(--line); border-radius: var(--hoek, 12px); padding: 18px; display: grid; gap: 6px; align-content: start; background: var(--card); }
.site-koopkaart-label { position: absolute; left: 0; top: 0; background: var(--winkel-tekst, #1e2450); color: #fff; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 5px 10px; z-index: 1; }
.site-koopkaart-foto { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; }
.site-koopkaart-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.site-koopkaart-naam { font-size: 17px; font-weight: 700; margin-top: 6px; text-decoration: none; color: inherit; }
.site-koopkaart-zin { color: var(--muted); font-size: 14px; }
.site-koopkaart-prijs { display: grid; line-height: 1.1; margin-top: 8px; }
.site-koopkaart-prijs b { font-size: 26px; font-weight: 800; }
.site-koopkaart-prijs small { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.site-koopkaart-vorm { margin-top: 6px; }
.site-koopkaart-knop { width: 100%; justify-content: center; gap: 8px; margin-top: 0; }
.site-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 16px; }
.site-chip { border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600; text-decoration: none; color: inherit; background: var(--card); }
.site-chip.aan { background: var(--winkel-tekst, #1e2450); color: #fff; border-color: var(--winkel-tekst, #1e2450); }
.site-categorien.compact .site-categorien-in { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.site-categorien.compact .site-categorie { flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px; aspect-ratio: auto; min-height: 0; }
.site-categorien.compact .site-categoriefoto { width: 56px; height: 56px; flex: none; border-radius: 8px; overflow: hidden; aspect-ratio: 1; }
.site-categorien.compact .site-categoriefoto img { width: 100%; height: 100%; object-fit: cover; }
.site-categorien.compact .site-categorienaam { padding: 0; min-width: 0; }
.site-categorien.compact .site-categorienaam b { font-size: 14px; overflow-wrap: anywhere; }
.site-vergelijk-in { border: 1px solid var(--line); border-radius: var(--hoek, 12px); overflow: hidden; background: var(--card); }
.site-vergelijk-rij { display: grid; grid-template-columns: 1.3fr repeat(var(--kolommen, 2), 1fr) 1fr 120px; gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 14.5px; }
.site-vergelijk-kop { border-top: 0; background: var(--wash); color: var(--muted); font-size: 13px; font-weight: 600; padding: 10px 18px; }
.site-vergelijk-rij.aan { background: color-mix(in srgb, var(--winkel-accent) 10%, var(--card)); box-shadow: inset 3px 0 0 var(--winkel-accent); }
.site-vergelijk-naam b { display: block; font-weight: 700; }
.site-vergelijk-naam small { display: block; color: var(--muted); font-size: 12.5px; }
.site-vergelijk-prijs b { font-weight: 700; }
.site-vergelijk-prijs small { display: block; color: var(--muted); font-size: 12px; }
.site-vergelijk-knop { justify-self: end; }
.site-vergelijk-rij.meer { display: none; }
.site-vergelijk-in.toon-alles .site-vergelijk-rij.meer { display: grid; }
.site-vergelijk-meer { padding: 12px 18px; border-top: 1px solid var(--line); text-align: center; }
.site-vergelijk-toon { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--winkel-accent); cursor: pointer; }
.site-groepknoppen { margin-bottom: 16px; }
.site-groepknoppen .site-chip { cursor: pointer; font: inherit; font-weight: 600; font-size: 14px; }
.site-chip:focus-visible, .site-vergelijk-toon:focus-visible { outline: 2px solid var(--winkel-accent); outline-offset: 2px; }
.site-reken-groep { display: grid; gap: 8px; }
.site-reken-regel-groep { font-style: normal; display: inline-block; background: var(--winkel-tekst, #1e2450); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; margin-right: 6px; }
.site-reken-regel-voorraad { font-style: normal; font-weight: 600; color: var(--muted); }
.site-reken-regel-voorraad.stand-ja { color: var(--groen, #2e9e5b); }
.site-reken-regel-voorraad.stand-nee { color: #c0392b; }
.site-reken-regel-voorraad.stand-wacht { color: #b45309; }
.site-reken-regel-tekst small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.site-reken-groep-leeg { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border-radius: 10px; padding: 12px 14px; font-size: 14px; color: rgba(255,255,255,.75); }
.site-reken:not(.kort) .site-reken-groep-leeg { background: var(--wash); color: var(--muted); }
.site-reken-groepnaam { font-size: 16px; margin: 14px 0 10px; }
.site-reken:not(.kort) .site-reken-groep + .site-reken-groep { margin-top: 8px; }
.site-vergelijk-knop .site-knop { margin-top: 0; padding: 8px 12px; font-size: 13.5px; }
.site-reken .site-reken-punten { list-style: none; margin: 18px 0 0; padding: 0; max-width: none; display: grid; gap: 10px; }
.site-reken .site-reken-punten li { position: relative; margin: 0; padding-left: 30px; line-height: 1.5; }
.site-reken-punten li::before { content: ""; position: absolute; left: 0; top: .1em; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--winkel-accent, #2563eb) 14%, transparent); }
.site-reken-punten li::after {
content: ""; position: absolute; left: 0; top: .1em; width: 20px; height: 20px; background: var(--winkel-accent, #2563eb);
-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.7 2.7L13.2 6.4' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.7 2.7L13.2 6.4' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.site-reken-lees { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-weight: 600; color: var(--winkel-accent, #2563eb); text-decoration: none; }
.site-reken-lees::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
.site-reken-lees:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-reken.kort { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: center; }
.site-reken.kort .site-reken-kop .site-rijzin { margin-bottom: 0; }
.site-reken.kort .site-reken-vlak { background: var(--winkel-tekst, #1e2450); color: #fff; border: 0; padding: 22px; gap: 12px; }
.site-reken.kort .site-reken-velden { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px; }
.site-reken.kort .site-reken-veld { color: rgba(255,255,255,.8); font-weight: 500; }
.site-reken.kort .site-reken-veld input { background: #fff; color: var(--winkel-tekst, #1e2450); border: 0; font-weight: 600; }
.site-reken.kort .site-reken-uit { border-top: 0; padding: 14px 16px; background: rgba(255,255,255,.08); border-radius: 10px; display: grid; gap: 2px; }
.site-reken.kort .site-reken-getal { font-size: 14px; color: rgba(255,255,255,.75); }
.site-reken.kort .site-reken-getal b { font-size: 30px; color: #fff; }
.site-reken.kort .site-reken-tekst { color: rgba(255,255,255,.75); font-size: 13.5px; }
.site-reken-regels { margin: 0; display: grid; gap: 8px; }
.site-reken-regel { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; background: #fff; color: var(--winkel-tekst, #1e2450); border-radius: 10px; padding: 12px 14px; text-decoration: none; }
.site-reken-regel[hidden] { display: none; }
.site-reken-regel-tekst { display: grid; line-height: 1.25; min-width: 0; }
.site-reken-regel-tekst small { font-size: 12px; color: var(--muted); font-weight: 600; }
.site-reken-regel-tekst b { font-size: 14.5px; }
.site-reken-regel-prijs { font-weight: 800; white-space: nowrap; }
.site-reken-regel-prijs small { font-weight: 500; color: var(--muted); }
.site-reken-regel-knop { margin-top: 0; padding: 8px 12px; font-size: 13.5px; }
.site-terugbel.gewone-foto .site-terugbel-foto img { filter: none; mix-blend-mode: normal; margin: 0; height: auto; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
@media (max-width: 1023px){
.site-koopkop { grid-template-columns: 1fr; }
.site-koopkop-tekst { padding: 28px 24px; }
.site-koopkop h1, .site-koopkop h2 { font-size: 30px; }
.site-koopkaart { max-width: 440px; }
.site-reken.kort { grid-template-columns: 1fr; }
}
@media (max-width: 760px){
.site-vergelijk-kop { display: none; }
.site-vergelijk-rij { grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 14px 16px; }
.site-vergelijk-naam { grid-column: 1 / -1; margin-bottom: 4px; }
.site-vergelijk-cel { font-size: 14px; }
.site-vergelijk-cel::before, .site-vergelijk-prijs::before { content: attr(data-kop); display: block; font-size: 12px; color: var(--muted); }
.site-vergelijk-prijs { align-self: end; }
.site-vergelijk-knop { grid-column: 1 / -1; justify-self: stretch; margin-top: 4px; }
.site-vergelijk-knop .site-knop { width: 100%; justify-content: center; }
}
@media (max-width: 600px){
.site-koopkop-usps { grid-template-columns: 1fr; }
.site-koopkaart { max-width: none; }
.site-categorien.compact .site-categorien-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.site-categorien.compact .site-categorie { padding: 8px; gap: 10px; }
.site-categorien.compact .site-categoriefoto { width: 44px; height: 44px; }
.site-categorien.compact .site-categorienaam small { display: none; }
.site-categorien.compact .site-categorienaam b { font-size: 13px; overflow-wrap: normal; hyphens: auto; }
.site-reken-regel { grid-template-columns: 1fr auto; }
.site-reken-regel-knop { grid-column: 1 / -1; justify-content: center; }
}
.wpl-stapel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wpl-rijen { display: flex; flex-direction: column; }
.wpl-rij { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; min-width: 0; }
.wpl-rij:last-child { border-bottom: 0; }
a.wpl-rij:hover { background: var(--wash); }
.wpl-rij-wat { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.wpl-rij-wat b, .wpl-rij-wat .cell-sub { overflow-wrap: anywhere; }
.wpl-rij-rechts { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wpl-pijl { color: var(--muted); font-size: 18px; }
.wpl-rood { color: var(--red, #c0392b); }
.wpl-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--wash2); display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; flex: none; }
.wpl-avatar.klein { width: 22px; height: 22px; font-size: 10px; }
.wpl-balk { display: block; height: 5px; border-radius: 3px; background: var(--wash2); margin-top: 6px; overflow: hidden; }
.wpl-balk span { display: block; height: 100%; background: var(--ink); }
.wpl-balk.over span { background: var(--red, #c0392b); }
.wpl-kv { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 6px 14px; font-size: 13.5px; padding: 4px 0; }
.wpl-kv .k { color: var(--muted); }
.wpl-kv .v { min-width: 0; overflow-wrap: anywhere; }
.wpl-kiezer { display: inline-flex; }
.wpl-filterrij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.wpl-filterrij input[type=search] { flex: 1; min-width: 220px; }
.wpl-vink { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.wpl-bord { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.wpl-kol { background: var(--wash); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.wpl-kol.over { outline: 2px dashed var(--ink); }
.wpl-kolkop { display: flex; justify-content: space-between; font-weight: 700; font-size: 13px; padding: 2px 4px; }
.wpl-kolkop span { color: var(--muted); font-weight: 600; }
.wpl-kaartje { display: flex; flex-direction: column; gap: 3px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; color: inherit; text-decoration: none; font-size: 13px; cursor: grab; }
.wpl-kaartje:hover { border-color: var(--ink); }
.wpl-kaartje.spoed { border-left: 3px solid var(--red, #c0392b); }
.wpl-kaartje.slepend { opacity: .5; }
.wpl-kaartje-kop { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.wpl-nr { margin-left: auto; font-variant-numeric: tabular-nums; }
.wpl-kaartje-titel { font-size: 13.5px; line-height: 1.3; }
.wpl-kaartje-klant, .wpl-kaartje-plek { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.wpl-kaartje-voet { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.wpl-ico { font-size: 11px; padding: 1px 6px; border-radius: 9px; background: var(--wash2); color: var(--muted); }
.wpl-wanneer { margin-left: auto; font-size: 12px; color: var(--muted); }
.wpl-wanneer.wpl-rood { color: var(--red, #c0392b); font-weight: 600; }
.wpl-spoed { font-size: 10.5px; font-weight: 700; color: #fff; background: var(--red, #c0392b); border-radius: 4px; padding: 1px 5px; }
.wpl-stip { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #7a8699; flex: none; }
.wpl-stip.reparatie { background: #1f3a68; }
.wpl-stip.keuring { background: #2e7d4f; }
.wpl-stip.onderhoud { background: #7a8699; }
.wpl-stip.installatie { background: #d9822b; }
.wpl-stip.garantie { background: #8e44ad; }
.wpl-stip.kleur-blauw { background: #1f3a68; }
.wpl-stip.kleur-grijs { background: #7a8699; }
.wpl-stip.kleur-groen { background: #2e7d4f; }
.wpl-stip.kleur-oranje { background: #d9822b; }
.wpl-stip.kleur-paars { background: #8e44ad; }
.wpl-stip.kleur-rood { background: #c0392b; }
.wpl-legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.wpl-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.wpl-inklap summary { cursor: pointer; font-size: 12.5px; color: var(--muted); padding: 4px; }
.wpl-inklap[open] { display: flex; flex-direction: column; gap: 8px; }
.wpl-regel { display: flex; gap: 8px; align-items: center; }
.wpl-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 8px 0; }
.wpl-velden.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wpl-velden.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wpl-velden .field, .wpl-velden .field input, .wpl-velden .field select, .wpl-velden .field textarea { min-width: 0; width: 100%; }
.wpl-keuzes { display: flex; flex-direction: column; gap: 6px; }
.wpl-keuze { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.wpl-keuze:has(input:checked) { border-color: var(--ink); background: var(--wash); }
.wpl-keuze span { display: flex; flex-direction: column; gap: 2px; }
.wpl-machine { border-bottom: 1px solid var(--line); padding: 12px 18px; }
.wpl-machine:last-child { border-bottom: 0; }
.wpl-machine-kop { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.wpl-machine-kop > span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wpl-machine-velden { display: none; flex-direction: column; gap: 8px; margin: 10px 0 0 26px; }
.wpl-machine:has(> .wpl-machine-kop input:checked) .wpl-machine-velden { display: flex; }
.wpl-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.wpl-chipvink { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 16px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
.wpl-chipvink:has(input:checked) { border-color: var(--ink); background: var(--wash); }
.wpl-geel { background: #fff6d6; border: 1px solid #efd98a; border-radius: 8px; padding: 8px 11px; font-size: 13px; color: #6b5200; }
.wpl-groen { background: #e7f5ec; border: 1px solid #b6dcc4; border-radius: 8px; padding: 8px 11px; font-size: 13px; color: #1e6b44; margin-bottom: 8px; }
.wpl-tgroen { color: var(--pos); }
.wpl-blauw { color: var(--data); }
.wpl-opvolger { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wpl-opvolger .cell-sub { flex: 1; min-width: 200px; }
.wpl-winkelvenster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.wpl-winkelfotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; }
.wpl-winkelfoto { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--sub); }
.wpl-winkelfoto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
@media (max-width: 700px){
.wpl-winkelvenster { grid-template-columns: 1fr; }
}
.wpl-drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.wpl-drie > .card { display: flex; flex-direction: column; gap: 12px; }
.wpl-drie > .card:not(.flush) > .card-head { margin: -18px -20px 0; padding: 14px 20px; }
.wpl-vinkrijen { display: flex; flex-direction: column; }
.wpl-vinkrij { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.wpl-vinkrij:last-child { border-bottom: 0; }
.wpl-vinkrij > span { display: inline-flex; align-items: center; gap: 8px; }
.wpl-getal { width: 56px; text-align: right; }
.wpl-contractkop { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.wpl-contractkop h2 { margin: 0; font-size: 20px; }
.wpl-resultaat { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--line); font-size: 16px; }
.wpl-machinelijst { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.wpl-contractbalk { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--pos) 11%, var(--card)); color: var(--pos); font-weight: 550; }
.wpl-contractbalk span { flex: 1; min-width: 0; }
@media (max-width: 900px){
.wpl-drie { grid-template-columns: 1fr; }
}
.wpl-k-contract { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 14px; border: 1px solid var(--line); border-left: 4px solid var(--pos); }
.wpl-k-contract p { margin: 6px 0 0; max-width: 560px; }
.wpl-k-contract-tegels { display: flex; flex-direction: column; gap: 8px; min-width: 180px; }
.wpl-k-contract-tegels > div { display: flex; flex-direction: column; padding: 8px 12px; background: var(--wash2); }
.wpl-k-machinecontract { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 8px 10px; background: color-mix(in srgb, var(--pos) 9%, transparent); font-size: 13px; }
.wpl-totaalrij td { background: var(--wash2); }
.wpl-kaartvoet-tekst { padding: 12px 18px; margin: 0; border-top: 1px solid var(--line); }
.wpl-balk { height: 6px; border-radius: 3px; background: var(--wash2); overflow: hidden; margin: 10px 0 4px; }
.wpl-balk > span { display: block; height: 100%; background: var(--data); border-radius: 3px; }
.wpl-balk.oranje > span { background: var(--warn); }
.wpl-vervang { border-left: 4px solid var(--warn); }
.wpl-rechts { margin-left: auto; }
.wpl-vervang-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px 18px; }
.wpl-vervang-keuzes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wpl-vervang-keuze { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; min-width: 0; }
.wpl-vervang-keuze input { position: absolute; opacity: 0; pointer-events: none; }
.wpl-vervang-keuze:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.wpl-vervang-ander { border-style: dashed; justify-content: center; align-items: center; text-align: center; }
@media (max-width: 900px){
.wpl-vervang-keuzes { grid-template-columns: 1fr; }
}
.wpm-tegels { display: flex; flex-direction: column; gap: 10px; padding-bottom: 0; }
.wpm-tegels .wpl-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.wpl-foutuitleg { display: flex; flex-direction: column; gap: 10px; }
.wpl-foutuitleg:empty { display: none; }
.wpl-fout-betekenis { padding: 10px 12px; border-radius: 8px; background: var(--wash2); font-size: 13.5px; }
.wpl-fout-eerder { padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--data) 9%, var(--card)); color: var(--ink); font-size: 13.5px; font-weight: 550; }
.wpl-eerdertabel { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.wpl-eerdertabel .eyebrow { padding: 10px 12px 4px; }
.wpl-eerdertabel .chip { margin-left: 6px; }
.wpl-tegelkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.wpl-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.wpl-tegel { display: flex; flex-direction: column; gap: 3px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); min-width: 0; }
.wpl-tegel b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.wpl-tegel button { align-self: flex-start; margin-top: 8px; }
.wpl-tegel-leeg { background: color-mix(in srgb, var(--warn) 9%, var(--card)); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.wpl-anderform { display: flex; flex-direction: column; gap: 6px; }
.wpl-anderform label { font-size: 12.5px; color: var(--sub); }
.wpl-anderrij { display: flex; gap: 8px; }
.wpl-anderrij input[name=sku] { flex: 1; min-width: 0; }
.dlg-voet .cell-sub { margin-right: auto; }
.wpl-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wpl-kaartvoet { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--line); }
.wpl-kaartvoet > .cell-sub:first-child { margin-right: auto; }
.wpl-foutform input[name=betekenis], .wpl-foutform input[name=eerste_stap] { flex: 1; min-width: 120px; }
.wpl-bestandknop { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.wpl-bestandknop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
tr.wpl-voorstel td { background: color-mix(in srgb, var(--data) 6%, var(--card)); }
.wpl-kenniszoek { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 4px 0 16px; }
.wpl-kenniszoek input[name=q] { flex: 1 1 320px; min-width: 0; }
@media (max-width: 760px){
.wpl-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wpl-twee { grid-template-columns: 1fr; }
}
.wpl-eerder { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.wpl-regeltabel .wpl-groep td { background: var(--wash2); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.wpl-regeltabel tr.wpl-buiten td { background: #fff4e5; }
.wpl-regeltabel .wpl-groep .wpl-groep-sub { float: right; font-weight: 400; text-transform: none; letter-spacing: 0; }
.wpl-regeltabel tr.wpl-regeluitleg td { background: var(--wash); border-top: 0; }
.wpl-regeluitleg-rij { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wpl-regeluitleg-foto { flex: 0 0 auto; display: block; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--wash2); }
.wpl-regeluitleg-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wpl-regeluitleg-tekst { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.wpl-regeluitleg-rij .chip { flex: 0 0 auto; }
@media (max-width: 640px){
.wpl-regeltabel .wpl-groep .wpl-groep-sub { float: none; display: block; margin-top: 2px; }
.wpl-regeluitleg-rij { flex-wrap: wrap; }
}
.wpl-totalen { display: flex; justify-content: flex-end; padding: 10px 18px; border-top: 1px solid var(--line); }
.wpl-totalen .wpl-kv .v { text-align: right; font-variant-numeric: tabular-nums; }
.wpl-regelform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 18px; border-top: 1px solid var(--line); }
.wpl-regelform input:not([type=checkbox]) { min-width: 0; }
.wpl-wijzig summary { list-style: none; cursor: pointer; display: inline-block; }
.wpl-wijzig summary::-webkit-details-marker { display: none; }
.wpl-wijzig[open] { position: relative; }
.wpl-wijzig-form { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-top: 6px; }
.wpl-controle { display: flex; gap: 8px; align-items: center; padding: 8px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.wpl-controle-tekst { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.wpl-knoprij { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.wpl-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.wpl-fotos a { position: relative; display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--wash); }
.wpl-fotos img { width: 100%; height: 100%; object-fit: cover; }
.wpl-fotos .tag { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 4px; }
.wpl-fototegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.wpl-fototegel { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; }
.wpl-fototegel.gedeeld { border-color: var(--ink); }
.wpl-fototegel-beeld { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--wash); }
.wpl-fototegel-beeld img, .wpl-fototegel-beeld video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wpl-fototegel-beeld .tag { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 4px; }
.wpl-fototegel-form { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.wpl-fototegel-form select, .wpl-fototegel-form input[name=bijschrift] { width: 100%; box-sizing: border-box; }
.wpl-uitleg { font-style: italic; }
@media (max-width: 900px){
.wpl-velden, .wpl-velden.drie, .wpl-velden.vier { grid-template-columns: minmax(0, 1fr); }
.wpl-bord { grid-auto-columns: minmax(78vw, 1fr); }
}
.wpl-stapel .card-head .card-link { margin-left: auto; font-size: 12.5px; color: var(--muted); text-decoration: none; }
.wpl-stapel .card-head .card-link:hover, .wpl-kv a:hover { color: var(--ink); text-decoration: underline; }
.wpl-kv a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--muted); }
.wpl-stapel .card-head > button, .wpl-stapel .card-head > .ghost { margin-left: auto; }
.wpl-stapel > .card:not(.flush) > .card-head { margin: -18px -20px 12px; padding: 14px 20px; }
.wpl-stapel > .card.flush > .empty, .wpl-stapel > .card.flush .wpl-rijen > .empty { padding: 22px 18px; }
.wpl-kaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.wpl-kaarten > .card { min-width: 0; }
.wpl-kaarten > .wpl-breed { grid-column: 1 / -1; }
.wpl-rijform { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.wpl-qr { width: 140px; height: 140px; image-rendering: pixelated; display: block; margin: 4px 0 8px; }
#wpl-machine-qr .cell-sub { overflow-wrap: anywhere; }
.wpl-doc { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.wpl-punt { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.wpl-uitslag { display: inline-flex; gap: 10px; font-size: 13px; }
.wpl-uitslag label { display: inline-flex; gap: 4px; align-items: center; }
.wpl-plan { display: grid; min-width: 900px; }
.wpl-plan-kaart { overflow-x: auto; }
.wpl-plan-kop { padding: 10px; font-weight: 700; font-size: 12.5px; border-bottom: 1px solid var(--line); background: var(--wash2); }
.wpl-plan-kop.vandaag { background: var(--ink); color: var(--card); }
.wpl-plan-naam { padding: 10px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.wpl-plan-cel { padding: 6px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; min-height: 64px; }
.wpl-plan-cel.over { background: #fdecea; }
.wpl-plan-blok { position: relative; background: var(--card); border: 1px solid var(--line); border-left: 3px solid #7a8699; border-radius: 6px; padding: 5px 22px 5px 7px; font-size: 12px; display: flex; flex-direction: column; }
.wpl-plan-blok.reparatie { border-left-color: #1f3a68; }
.wpl-plan-blok.keuring { border-left-color: #2e7d4f; }
.wpl-plan-blok.installatie { border-left-color: #d9822b; }
.wpl-plan-blok.garantie { border-left-color: #8e44ad; }
.wpl-plan-blok a { color: inherit; text-decoration: none; }
.wpl-plan-weg { position: absolute; top: 2px; right: 2px; }
.wpl-plan-weg button { padding: 0 5px; min-height: 0; line-height: 16px; }
.wpl-plan-uren { font-size: 11.5px; color: var(--muted); margin-top: auto; }
.wpl-afwezig { font-size: 11.5px; background: var(--wash2); border-radius: 4px; padding: 2px 6px; }
.wpl-planregel { flex-wrap: wrap; }
.wpl-klokbalk { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ink); color: var(--card); border-radius: 10px; padding: 12px 16px; margin: 12px 0; }
.wpl-klokbalk a { color: inherit; font-weight: 700; }
.wpl-labelpagina { background: #fff; padding: 20px; }
.wpl-label { width: 100mm; min-height: 50mm; border: 2px solid #16191c; border-radius: 6px; padding: 10px 12px; display: flex; gap: 10px; justify-content: space-between; font-family: system-ui, sans-serif; color: #16191c; }
.wpl-label.afgekeurd { border-color: #c0392b; background: #fdecea; }
.wpl-label.groen { border-color: #2e7d4f; }
.wpl-label.blauw { border-color: #1f5fa8; }
.wpl-label.geel { border-color: #c9a400; }
.wpl-label.oranje { border-color: #d9822b; }
.wpl-label-tekst { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; min-width: 0; }
.wpl-label-nr { font-size: 20px; }
.wpl-label-stop { color: #c0392b; font-size: 13px; }
.wpl-label-klacht { font-style: italic; }
.wpl-label img { width: 28mm; height: 28mm; image-rendering: pixelated; flex: none; }
.wpl-print { margin-top: 14px; }
@media print{
.wpl-print { display: none; }
.wpl-labelpagina { padding: 0; }
}
@media (max-width: 900px){
.wpl-kaarten { grid-template-columns: minmax(0, 1fr); }
}
.wpl-groepkop { margin: 14px 0 4px; }
.wpl-velden .wpl-breed-veld { grid-column: 1 / -1; }
.wpl-formvink { align-self: end; padding-bottom: 8px; }
.wpl-k { margin: 0; background: #f4f5f7; color: #151821; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
.wpl-k-blad { max-width: 640px; margin: 0 auto; padding: 20px 16px 48px; display: flex; flex-direction: column; gap: 14px; }
.wpl-k-bedrijf { font-weight: 700; font-size: 15px; color: #5b6270; }
.wpl-k-kaart { padding: 22px 22px; }
.wpl-k-kaart h1 { font-size: 22px; margin: 4px 0 6px; }
.wpl-k-kaart h2 { font-size: 17px; margin: 14px 0 8px; }
.wpl-k-meta { color: #5b6270; font-size: 14px; line-height: 1.5; margin: 4px 0; }
.wpl-k-stap { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: #eef1f6; border-radius: 8px; margin: 10px 0; }
.wpl-k-stappen { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; }
.wpl-k-stappen li { padding: 3px 9px; border-radius: 12px; background: #eef1f6; color: #7a8190; }
.wpl-k-stappen li.klaar { background: #e3f2ea; color: #1e6b44; }
.wpl-k-stappen li.nu { background: #151821; color: #fff; }
.wpl-k-dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 12px; font-size: 14px; margin: 8px 0 0; }
.wpl-k-dl dt { color: #5b6270; }
.wpl-k-dl dd { margin: 0; overflow-wrap: anywhere; }
.wpl-k-tabel { width: 100%; border-collapse: collapse; font-size: 14px; margin: 6px 0; }
.wpl-k-tabel td { padding: 7px 0; border-bottom: 1px solid #e5e7ec; }
.wpl-k-tabel td.rechts { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wpl-k-tabel tr.totaal td { font-weight: 700; border-bottom: 0; }
.wpl-k-tabel tr.sub td { color: #5b6270; }
.wpl-k-alt { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid #e5e7ec; border-radius: 8px; margin: 8px 0; font-size: 14px; }
.wpl-k-knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.wpl-k-keuze { margin-top: 10px; }
.wpl-k-voet { text-align: center; }
.wpl-k-keuring { padding: 8px 12px; border-radius: 8px; background: #e3f2ea; color: #1e6b44; }
.wpl-k-keuring.rood { background: #fdecea; color: #a02a1e; }
.wpl-k-keuring.oranje { background: #fff4e5; color: #8a5200; }
.wpl-k-form { display: flex; flex-direction: column; gap: 10px; }
.wpl-k-form .field input, .wpl-k-form .field textarea, .wpl-k-form .field select { width: 100%; }
.wpl-k-form .field input[type=radio], .wpl-k-form .field input[type=checkbox] { width: auto; }
.wpl-k-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wpl-k-keuzes { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.wpl-k-tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wpl-k-tegel { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid #e5e7ec; border-radius: 10px; color: inherit; text-decoration: none; font-size: 14px; }
.wpl-k-tegel span { color: #5b6270; font-size: 13px; }
.wpl-k-tegel:hover { border-color: #151821; }
.wpl-k-tegel.aan { border-color: #151821; box-shadow: inset 0 0 0 1px #151821; background: #f6f7f9; }
.wpl-k-keuzes label .wpl-k-meta { display: block; margin: 0 0 0 22px; font-size: 13px; }
.wpl-k-grenseigen input[name=grens_eigen] { width: 110px; margin: 0 4px; }
.wpl-k-dank { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 8px; background: #f6f7f9; }
.wpl-k-dank p { margin: 0; }
@media (max-width: 480px){
.wpl-k-tegels { grid-template-columns: minmax(0, 1fr); }
}
.wpl-k-afspraken { background: #f7f8fa; border-radius: 8px; padding: 10px 12px; font-size: 13.5px; }
.wpl-k-afspraken p { margin: 0 0 6px; }
.wpl-k-cijfers { display: flex; gap: 12px; margin: 6px 0; }
.wpl-k-tevreden { display: flex; flex-direction: column; gap: 8px; }
.wpl-k-acties { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
@media (max-width: 520px){
.wpl-k-rij { grid-template-columns: minmax(0, 1fr); }
.wpl-k-dl { grid-template-columns: minmax(0, 1fr); }
}
.betaallogo-zakelijk { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.betaallogo-zakelijk-woord { font-size: 13px; line-height: 1; color: inherit; opacity: .75; }
.wps-melding { padding: 10px 14px; margin-bottom: 14px; border-left: 3px solid var(--pos); font-size: 13.5px; }
.wps-rechts { margin-left: auto; }
.wps-tabel tr.wps-gekozen td { background: var(--wash); }
.wps-voet { padding: 10px 18px; border-top: 1px solid var(--line); color: var(--sub); font-size: 13px; }
.wps-tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wps-tegel { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; min-width: 0; }
.wps-tegel:hover { border-color: var(--ink); background: var(--wash); }
.wps-tegel b { font-size: 13.5px; font-weight: 600; }
.wps-tegel span { color: var(--sub); font-size: 13px; overflow-wrap: anywhere; }
.wps-kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: -4px 0 12px; }
.wps-tweeluik { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.wps-raster2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wps-raster2 > .card { min-width: 0; }
.wps-raster2 > .card:not(.flush) > .card-head { margin: -18px -20px 12px; padding: 14px 20px; }
.wps-smal .card-head { flex-wrap: wrap; row-gap: 2px; }
.wps-smal .card-head .card-sub { flex: 1 1 100%; }
.wps-eenheid { display: none; }
.wps-kenmerktabel td:has(select option[value="getal"]:checked) .wps-eenheid { display: block; }
.wps-onderdelen .wps-naam, .wps-onderdelen .wps-sub { min-width: 140px; }
.wps-kort { width: 130px; }
.wps-seg { display: flex; gap: 14px; align-items: center; min-height: 34px; font-size: 13.5px; }
.wps-seg label { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink); }
.wps-schakelrij { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0 0; margin-top: 10px; border-top: 1px solid var(--line); }
.wps-schakelrij > span { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; min-width: 0; }
.wps-vlootrij { margin: 0 18px; padding-bottom: 10px; }
.wps-kenmerktabel td { vertical-align: top; }
.wps-naam, .wps-sub { display: block; width: 100%; min-width: 160px; }
.wps-sub { margin-top: 4px; color: var(--sub); }
.wps-kenmerktabel .wps-eenheid { width: 100%; margin-top: 4px; max-width: 120px; }
.wps-getal { width: 96px; text-align: right; }
.wps-geheim { display: inline-flex; gap: 6px; align-items: center; color: var(--data); font-weight: 500; font-size: 13.5px; }
.wps-proef { display: flex; flex-direction: column; gap: 10px; }
.wps-proef .field { margin: 0; }
.wps-invoer { display: flex; gap: 6px; align-items: center; }
.wps-invoer input { flex: 1; min-width: 0; }
.wps-eenheidlabel { flex: none; color: var(--sub); font-size: 13px; }
.wps-ster { color: var(--neg); margin-left: 2px; }
.wps-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 13.5px; }
.wps-kv dt { color: var(--sub); }
.wps-kv dd { margin: 0; overflow-wrap: anywhere; }
.wps-geheimform { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.wps-betaalform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.wps-betaalform input, .wps-betaalform select { flex: 1 1 140px; min-width: 0; }
.wps-betaalwissel[open] { flex-basis: 100%; }
.wps-kaartvelden { padding: 14px 18px 4px; border-bottom: 1px solid var(--line); }
.wps-smalkaart { max-width: 560px; }
.wps-code { width: 72px; }
.wps-span2 { grid-column: span 2; }
.wps-rijentabel td.num, .wps-rijentabel th:last-child { width: 1%; white-space: nowrap; text-align: right; }
.wps-erbijrij td { border-top: 1px solid var(--line); }
.wps-vinkblok { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: start; }
.wps-vinkblok .cell-sub { grid-column: 2; }
.dlg.wps-dlg-breed { width: min(1040px, 96vw); }
.wps-zoekrij { display: flex; align-items: center; gap: 12px; }
.wps-zoekrij input { flex: 1; min-width: 0; }
.wps-vbtegel { cursor: pointer; }
.wps-vbtegel[hidden] { display: none; }
.wps-vbkop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wps-vbtegel.wps-vb-aan { border-color: var(--ink); background: var(--wash); }
.wps-vbtegel.wps-vb-bestaat { opacity: .55; cursor: default; }
.wps-vbplus { font-size: 16px; line-height: 1; color: var(--muted, #6b7280); }
.wps-vbleeg { border-style: dashed; }
.wps-dlg-noot { margin-right: auto; align-self: center; }
.wpl-bel-chips { align-items: center; }
.wpl-bel-recht { margin-left: auto; font-size: 12.5px; }
.wpl-bel-lijst { display: flex; flex-direction: column; }
.wpl-bel-rij { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 8px 18px; padding: 16px 18px; align-items: start; }
.wpl-bel-rij + .wpl-bel-rij { border-top: 1px solid var(--line); }
.wpl-bel-links { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.wpl-bel-midden { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wpl-bel-naam { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wpl-bel-nummer { color: var(--muted, #6b7280); text-decoration: none; font-size: 13px; }
.wpl-bel-nummer:hover { text-decoration: underline; }
.wpl-bel-wat { font-size: 13.5px; overflow-wrap: anywhere; }
.wpl-bel-opmerking { font-style: italic; }
.wpl-bel-knoppen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wpl-bel-later > summary { display: inline-flex; align-items: center; list-style: none; }
.wpl-bel-later > summary::-webkit-details-marker { display: none; }
.wpl-bel-laterform { display: flex; gap: 6px; margin-top: 6px; }
.wpl-bel-notitie { flex: 1 1 160px; min-width: 0; }
.wpl-bel-eerder { margin-left: auto; white-space: nowrap; }
.wpl-bel-rechts { display: flex; justify-content: flex-end; }
.wpl-bel-tel { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wpl-bel-kaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.wpl-bel-kv { padding: 12px 18px 4px; }
.wpl-bel-kv .v { text-align: right; font-weight: 550; }
.wpl-bel-voet { padding: 8px 18px 16px; margin: 0; line-height: 1.5; }
.wpl-bel-dlgbody { display: flex; flex-direction: column; gap: 12px; }
.wpl-bel-feiten { padding: 10px 14px; background: var(--wash2); border-radius: 8px; }
.wpl-bel-feiten .v { text-align: right; }
.wpl-bel-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wpl-bel-vink { align-items: flex-start; }
.wpl-bel-vink .cell-sub { display: block; }
.wpl-kaart-chips { margin-left: auto; margin-bottom: 0; }
.wpl-kaart-voet { padding: 10px 18px 14px; margin: 0; line-height: 1.5; display: flex; gap: 10px; flex-wrap: wrap; }
.wpl-site { margin: 14px 18px 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--wash2); }
.wpl-site-balk { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 12px; color: var(--muted); }
.wpl-site-balk i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.wpl-site-balk span { margin-left: 6px; }
.wpl-site-in { background: #1c1b1a; color: #fff; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.wpl-site-oog { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #e6a23c; font-weight: 700; }
.wpl-site-kop { font-size: 17px; font-weight: 700; }
.wpl-site-leeg { margin: 4px 0 0; font-size: 13.5px; color: #cfcbc4; }
.wpl-site-citaten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.wpl-site-citaat { background: #2a2826; border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wpl-site-citaat b { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.wpl-site-citaat small { color: #cfcbc4; font-size: 12.5px; }
.wpl-site-sterren { color: #e6a23c; letter-spacing: 1px; font-size: 13px; }
.wpl-k-collega { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.wpl-k-strook { display: block; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; line-height: 1.45; margin: 0 0 12px; }
.wpl-k-strook-goed { background: #edf7ef; color: #1f5f2f; border: 1px solid #cfe8d5; }
.wpl-k-strook-wacht { background: #fdf3e6; color: #7a4a10; border: 1px solid #f3dcb8; }
.winkel .klant-grij.klant-opgave-rij { grid-template-columns: minmax(0, 1fr) auto; }
.klant-opgave-rij small { display: block; }
.klant-opgave-rij .klant-opgave-knoppen { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.klant-opgave-knoppen form { margin: 0; }
.klant-opgave-uitleg { margin: 0 0 16px; }
.klant-grenzen td.getal, .klant-grenzen th.rechts { white-space: nowrap; }
@media (max-width: 900px){
.wpl-site-citaten { grid-template-columns: minmax(0, 1fr); }
.wpl-kaart-chips { margin-left: 0; flex-basis: 100%; }
.wpl-bel-rij { grid-template-columns: minmax(0, 1fr); }
.wpl-bel-rechts { justify-content: flex-start; }
.wpl-bel-eerder { margin-left: 0; white-space: normal; }
.wpl-bel-kaarten { grid-template-columns: minmax(0, 1fr); }
.wpl-bel-recht { margin-left: 0; flex-basis: 100%; }
.wpl-bel-velden { grid-template-columns: minmax(0, 1fr); }
}
.wpl-fac-tabel { display: flex; flex-direction: column; }
.wpl-fac-kop, .wpl-fac-regel, .wpl-fac-groepkop { display: grid; grid-template-columns: minmax(0, 1fr) 72px 84px 96px; gap: 12px; align-items: center; padding: 8px 18px; }
.wpl-fac-met-kost .wpl-fac-kop, .wpl-fac-met-kost .wpl-fac-regel { grid-template-columns: minmax(0, 1fr) 72px 84px 84px 96px; }
.wpl-fac-kop { border-bottom: 1px solid var(--line); padding-top: 10px; padding-bottom: 10px; }
.wpl-fac-groepkop { grid-template-columns: minmax(0, 1fr) auto; background: var(--wash); border-bottom: 1px solid var(--line); padding-top: 6px; padding-bottom: 6px; }
.wpl-fac-met-kost .wpl-fac-groepkop { grid-template-columns: minmax(0, 1fr) auto; }
.wpl-fac-groepsub { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); text-align: right; }
.wpl-fac-regel { border-bottom: 1px solid var(--line); font-size: 13.5px; cursor: pointer; }
.wpl-fac-regel.wpl-fac-vast { cursor: default; }
.wpl-fac-regel:has(input:checked) { background: var(--wash); }
.wpl-fac-regel:has(input:checked) .wpl-fac-oms > span:first-child { color: #b45309; }
.wpl-fac-tabel label.wpl-fac-regel > input.wpl-fac-kies { position: absolute; display: block; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.wpl-fac-oms { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.wpl-fac-regel .num, .wpl-fac-kop .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wpl-fac-regel .wpl-fac-bedrag { font-weight: 600; }
.wpl-fac-totalen .wpl-kv { grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
.wpl-fac-tebetalen { font-size: 18px; font-weight: 700; padding-top: 6px; }
.wpl-fac-voet { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--line); }
.wpl-fac-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.wpl-fac-velden.drie { grid-template-columns: 1fr 1fr 1fr; }
.wpl-fac-eenheid { display: flex; align-items: center; gap: 8px; }
.wpl-soort-eenheid { display: flex; align-items: center; gap: 8px; }
.wpl-soort-eenheid > input { max-width: 120px; }
.wpl-fac-eenheid input { flex: 1; min-width: 0; }
.wpl-fac-eenheid .cell-sub { white-space: nowrap; }
.wpl-fac-voorbeeld { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.wpl-fac-vb-regel { display: grid; grid-template-columns: minmax(0, 1fr) 64px 84px 96px; gap: 12px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.wpl-fac-vb-regel.wpl-fac-vb-twee { grid-template-columns: minmax(0, 1fr) 110px; }
.wpl-fac-vb-regel .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wpl-fac-vb-som { display: flex; justify-content: space-between; }
.wpl-fac-vb-noot { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12.5px; }
.wpl-fac-soorten { flex-direction: row; flex-wrap: wrap; }
.wpl-inst-melding { background: var(--wash); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; }
.wpl-overboeking-kop, .wpl-overboeking-rij { display: grid; grid-template-columns: 100px minmax(0, 1fr) 150px 110px; gap: 10px; align-items: center; padding: 4px 0; }
.wpl-overboeking-rij { border-top: 1px solid var(--line); }
.wpl-overboeking-rij .num, .wpl-overboeking-kop .num { text-align: right; font-variant-numeric: tabular-nums; }
.wpl-overboeking-som { font-weight: 600; }
@media (max-width: 640px){
.wpl-overboeking-kop, .wpl-overboeking-rij { grid-template-columns: 90px minmax(0, 1fr) 90px; }
.wpl-overboeking-kop > span:nth-child(3), .wpl-overboeking-rij > span:nth-child(3) { display: none; }
.wpl-overboeking-voet { flex-wrap: wrap; }
.wpl-overboeking-noot { flex-basis: 100%; }
}
.wpl-fac-soorten .wpl-keuze { flex: 1; }
@media (max-width: 640px){
.wpl-fac-kop, .wpl-fac-regel, .wpl-fac-met-kost .wpl-fac-kop, .wpl-fac-met-kost .wpl-fac-regel { grid-template-columns: minmax(0, 1fr) 56px 84px; gap: 8px; padding-left: 14px; padding-right: 14px; }
.wpl-fac-groepkop { padding-left: 14px; padding-right: 14px; }
.wpl-fac-kost, .wpl-fac-prijs { display: none; }
.wpl-fac-velden, .wpl-fac-velden.drie { grid-template-columns: 1fr; }
.wpl-fac-vb-regel { grid-template-columns: minmax(0, 1fr) 96px; }
.wpl-fac-vb-regel .num:nth-child(2), .wpl-fac-vb-regel .num:nth-child(3) { display: none; }
}
.wpl-oranje { color: #b45309; }
@media (max-width: 640px){
.wps-dlg-noot { flex-basis: 100%; }
}
.wps-stallingtabel td:nth-child(4), .wps-stallingtabel th:nth-child(4) { width: 96px; }
.wps-stallingtabel td:nth-child(5), .wps-stallingtabel th:nth-child(5) { width: 170px; }
.wps-geheimform .wpl-groepkop { margin: 0; }
.wps-geheimform .field { margin: 0; }
.wps-geheimform button { align-self: flex-start; }
.wps-regel { margin: 0 0 10px; font-size: 13.5px; }
.wps-als { display: flex; gap: 6px; margin-top: 4px; }
.wps-als select { flex: 0 0 150px; min-width: 0; }
.wps-als input { flex: 1; min-width: 80px; }
.wps-regelvak { padding: 0 18px 14px; }
.wps-heel { grid-column: 1 / -1; }
.wps-online { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 24px; align-items: start; }
.wps-online .wps-schakelrij:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 760px){
.wps-online { grid-template-columns: minmax(0, 1fr); }
}
.wps-inname-blok { margin-top: 12px; }
.wps-inname-blok .wpl-groepkop { margin-bottom: 6px; }
.wps-verklaring { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0; }
.wps-verklaring > span { display: flex; flex-direction: column; gap: 2px; }
.wps-handtekening { display: block; max-width: 320px; max-height: 120px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.wps-foto { display: block; margin-top: 4px; font-size: 13px; max-width: 100%; }
.wps-klachtkeuze .wpl-chips { margin-top: 4px; }
.wps-puntentabel td { vertical-align: top; }
.wps-puntentabel tr.wps-groepkop td { background: var(--wash); padding-top: 8px; padding-bottom: 8px; }
.wps-puntentabel tr.wps-groepkop .cell-sub { margin-left: 8px; }
.wps-grens { display: block; width: 120px; }
.wps-puntentabel .wps-grens.wps-sub { width: 120px; min-width: 0; }
.wps-schaalrij td { padding-top: 0; border-top: 0; }
.wps-schaal { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--sub); font-size: 13px; }
.wps-schaal select { width: auto; }
.wps-ernstlijst { display: flex; flex-direction: column; }
.wps-ernstrij { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 10px 18px; border-top: 1px solid var(--line); }
.wps-ernstrij:first-child { border-top: 0; }
.wps-noot { padding: 12px 16px; font-size: 13.5px; border-left: 3px solid var(--data); }
.wps-lijstkop { margin: 12px 0 4px; }
.wps-wanneer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--sub); }
.wps-wanneer + .wps-wanneer { margin-top: 4px; }
.wps-beurttabel td { vertical-align: top; }
.wps-tellernaam { width: 100%; min-width: 110px; }
.wps-wisselform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.wps-onderdeelform { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.wps-onderdeelform button { align-self: flex-start; }
@media (max-width: 1100px){
.wps-tweeluik { grid-template-columns: minmax(0, 1fr); }
.wps-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
.wps-raster2, .wps-tegels { grid-template-columns: minmax(0, 1fr); }
}
.wpm-blad { max-width: 640px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.wpm-blad > .card, .wpm-blad > .page-head { margin: 0; }
.wpm-blad > .form-error, .wpm-blad > .form-melding { margin-bottom: 0 !important; }
.wpm-blad input.ghost:not([type=checkbox]):not([type=radio]):not([type=file]), .wpm-blad textarea.ghost, .wpm-blad select.ghost { font-weight: 400; }
.wpm-blad input.ghost::placeholder, .wpm-blad textarea.ghost::placeholder { color: var(--muted); }
.wpm-blad .card-head { flex-wrap: nowrap; }
.wpm-blad .card-head .card-sub { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.wpm-icoon { flex: none; }
.wpm-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wpm-kop h1 { flex: 1; min-width: 0; margin: 0; text-align: center; font-size: 18px; font-weight: 650; overflow-wrap: anywhere; }
.wpm-kopknop { width: 40px; height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); cursor: pointer; list-style: none; }
.wpm-kopknop::-webkit-details-marker { display: none; }
.wpm-meer { position: relative; }
.wpm-menu { position: absolute; right: 0; top: 46px; z-index: 20; min-width: 190px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 6px; display: flex; flex-direction: column; }
.wpm-menu a, .wpm-menu button { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 7px; color: var(--ink); text-decoration: none; font-size: 14px; text-align: left; }
.wpm-menu a:hover, .wpm-menu button:hover { background: var(--wash); }
.wpm-klokbalk { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-radius: 14px; background: var(--btn-bg); color: var(--btn-ink); }
.wpm-klokwat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wpm-klokkop { font-size: 13px; opacity: .8; overflow-wrap: anywhere; }
.wpm-kloktijd { font-size: 34px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.wpm-kloksub { font-size: 13px; opacity: .8; }
.wpm-klokknop { width: 56px; height: 56px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; flex: none; }
.wpm-klokknop:hover { background: color-mix(in srgb, currentColor 24%, transparent); }
.wpm-klokbalk:not(.wpm-loopt) .wpm-klokknop { background: var(--chip-green-dot); color: #fff; }
.wpm-stand { background: var(--chip-orange-bg); color: var(--chip-orange-ink); border-radius: 10px; }
.wpm-stand > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; cursor: pointer; list-style: none; font-size: 14px; line-height: 1.4; }
.wpm-stand > summary::-webkit-details-marker { display: none; }
.wpm-regelform { display: flex; gap: 8px; padding: 0 14px 12px; align-items: center; }
.wpm-regelform input, .wpm-regelform textarea { flex: 1 1 0; min-width: 0; }
.wpm-regelform-hoog { align-items: flex-end; padding: 0 18px 14px; }
.wpm-rijen { display: flex; flex-direction: column; }
.wpm-rij { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; min-width: 0; }
.wpm-rij:last-child, .wpm-bewerk > .wpm-rij { border-bottom: 0; }
a.wpm-rij:hover { background: var(--wash2); }
.wpm-rijwat { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.wpm-rijtitel { display: flex; align-items: center; gap: 8px; font-size: 14.5px; min-width: 0; }
.wpm-rijtitel b { font-weight: 550; min-width: 0; overflow-wrap: anywhere; }
.wpm-leeg { color: var(--muted); }
.wpm-rij-icoon { width: 36px; height: 36px; border-radius: 9px; background: var(--wash); display: inline-flex; align-items: center; justify-content: center; color: var(--sub); flex: none; }
.wpm-stip { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--chip-gray-dot); }
.wpm-stip.wpm-stip-rood { background: var(--chip-red-dot); }
.wpm-stip.wpm-stip-blauw { background: var(--chip-blue-dot); }
.wpm-rij-rechts { color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 14px; }
.wpm-rij-pijl { color: var(--muted); display: inline-flex; flex: none; }
.wpm-bewerk > summary { list-style: none; cursor: pointer; }
.wpm-bewerk > summary::-webkit-details-marker { display: none; }
.wpm-tegels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.wpm-tegel { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px 0 4px 16px; border-left: 3px solid var(--line); min-width: 0; }
.wpm-tegel.wpm-loopt { border-left-color: var(--chip-green-dot); }
.wpm-tegel-label { font-size: 13.5px; color: var(--sub); }
.wpm-tegel b { font-size: 26px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.wpm-tegel a.cell-sub { color: var(--data); text-decoration: none; }
.wpm-tegelknop { margin-top: 6px; }
.wpm-morgen > summary { list-style: none; cursor: pointer; }
.wpm-morgen > summary::-webkit-details-marker { display: none; }
.wpm-morgen:not([open]) > summary { border-bottom: 0; }
.wpm-morgen-pijl { margin-left: auto; color: var(--muted); display: inline-flex; transform: rotate(90deg); transition: transform .15s; }
.wpm-morgen[open] .wpm-morgen-pijl { transform: rotate(-90deg); }
.wpm-kopform { margin-left: auto; display: flex; }
.wpm-stap { display: flex; flex-direction: column; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.wpm-stap:last-child { border-bottom: 0; }
.wpm-stapform { display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.wpm-stapform .wpm-meting { flex: none; }
.wpm-stapform .wpm-schakel { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
.wpm-keus.wpm-aan.wpm-advies { background: var(--chip-orange-bg); color: var(--chip-orange-ink); }
.wpm-fotoknop { position: relative; cursor: pointer; }
.wpm-fotoknop.gekozen { background: var(--chip-green-bg); color: var(--chip-green-ink); }
.wpm-stapfoto { flex: none; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--wash); }
.wpm-stapfoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wpl-kaartje-stappen { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--sub); font-variant-numeric: tabular-nums; }
.wpl-balkje { flex: 1; max-width: 90px; height: 4px; border-radius: 2px; background: var(--wash); overflow: hidden; }
.wpl-balkje i { display: block; height: 100%; background: var(--chip-green-dot); }
.wpm-kopicoon { margin-left: auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--sub); }
.wpm-kopicoon:hover { background: var(--wash); color: var(--ink); }
.wpm-zoekscan { display: flex; gap: 8px; }
.wpm-zoekscan input { flex: 1 1 0; min-width: 0; }
.wpm-scanknop { flex: none; width: 40px; padding: 0; }
.wpm-camera { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #0f1115; }
.wpm-camera[hidden] { display: none; }
.wpm-camera video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wpm-kader { position: absolute; left: 14%; right: 14%; top: 22%; bottom: 22%; border: 3px solid rgba(255,255,255,.9); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0,0,0,.28); }
.wpm-camera.gevonden .wpm-kader { border-color: var(--chip-green-dot); }
.wpm-camera-tekst { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; color: #fff; font-size: 13.5px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.wpm-scanform { display: flex; gap: 8px; }
.wpm-scanform input { flex: 1 1 0; min-width: 0; }
.wpm-scankaart { display: flex; flex-direction: column; gap: 3px; padding: 14px 18px 0; }
.wpm-scanknoppen { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px 14px; }
.wpm-scanknoppen form { display: flex; flex: 1 1 auto; }
.wpm-scanknoppen .btn-primary, .wpm-scanknoppen .ghost { flex: 1 1 auto; }
.wpm-scankeus { flex: 1 1 100%; }
.wpl-k-medewerker { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; margin-bottom: 14px; border-radius: 12px; background: var(--btn-bg); color: var(--btn-ink); font-size: 14px; font-weight: 600; }
.wpl-k-medewerker-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.wpl-k-medewerker-knoppen a { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 8px; background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; text-decoration: none; font-size: 13.5px; font-weight: 550; }
.wpm-onderdeel { display: flex; flex-direction: column; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.wpm-onderdeel:last-child { border-bottom: 0; }
.wpm-onderdeel-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wpm-onderdeel-stand { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.wpm-standwoord { font-size: 14px; font-weight: 550; }
.wpm-standwoord.wpm-kleur-green { color: var(--chip-green-ink); }
.wpm-standwoord.wpm-kleur-orange { color: var(--chip-orange-ink); }
.wpm-standwoord.wpm-kleur-gray { color: var(--chip-gray-ink); }
.wpm-standwoord.wpm-kleur-blue { color: var(--chip-blue-ink); }
.wpm-schakel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--wash); border-radius: 10px; }
.wpm-keus { height: 40px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--sub); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.wpm-keus:hover { color: var(--ink); }
.wpm-keus.wpm-aan { background: var(--card); color: var(--ink); font-weight: 650; box-shadow: var(--shadow); }
.wpm-keus.wpm-aan.wpm-goed { background: var(--chip-green-bg); color: var(--chip-green-ink); }
.wpm-keus.wpm-aan.wpm-fout { background: var(--chip-red-bg); color: var(--chip-red-ink); }
.wpm-punt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.wpm-punt:last-child { border-bottom: 0; }
.wpm-schakel-punt, .wpm-meting { flex: 0 0 168px; box-sizing: border-box; }
.wpm-schakel-punt .wpm-keus { height: 36px; }
.wpm-meting { display: flex; align-items: center; gap: 6px; height: 44px; border: 1px solid var(--axis); border-radius: 10px; padding: 3px 3px 3px 10px; background: var(--card); }
.wpm-meting input { flex: 1; min-width: 0; height: 34px; border: 0; box-shadow: none; padding: 0; text-align: right; font-weight: 600; background: transparent; }
.wpm-meting.wpm-goed { border-color: var(--chip-green-dot); background: var(--chip-green-bg); }
.wpm-meting.wpm-fout { border-color: var(--chip-red-dot); background: var(--chip-red-bg); }
.wpm-eenheid { color: var(--muted); font-size: 13px; }
.wpm-metingknop { width: 34px; height: 34px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: var(--sub); flex: none; }
.wpm-metingknop:hover { background: var(--wash); color: var(--ink); }
.wpm-duimen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px 18px; }
.wpm-duimen > .empty { grid-column: 1 / -1; padding: 10px 0; }
.wpm-duim { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--wash); display: block; }
.wpm-duim img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wpm-fotoform { display: contents; }
.wpm-fototegel { position: relative; box-sizing: border-box; border: 1.5px dashed var(--axis); background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--sub); font-size: 13.5px; cursor: pointer; }
.wpm-bestand { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.wpm-uitleg { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--chip-orange-bg); color: var(--chip-orange-ink); font-size: 13.5px; line-height: 1.4; }
.wpm-actiebalk { position: sticky; bottom: 0; z-index: 15; max-width: 640px; width: 100%; box-sizing: border-box; margin: 14px auto 0; background: var(--card); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; }
.wpm-actieknoppen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.wpm-actieknoppen form { display: flex; }
.wpm-actieknoppen button { height: 46px; width: 100%; font-size: 15px; }
.wpm-actieknoppen button:disabled { background: var(--wash); color: var(--muted); cursor: not-allowed; opacity: 1; }
.wpm-actieuitleg { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
@media (max-width: 760px){
.wpm-actiebalk { bottom: var(--onderbalk); width: auto; max-width: none; margin: 14px -16px 0; }
}
.wpm-tegels3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wpm-tegel.wpm-tegel-oranje { border-left-color: var(--chip-orange-dot); }
.wpm-tegel.wpm-tegel-oranje b { color: var(--chip-orange-ink); }
.wpm-waarschuwing { padding: 10px 14px; border-radius: 10px; background: var(--chip-red-bg); color: var(--chip-red-ink); font-size: 14px; }
.wpm-algemeen { display: flex; align-items: center; gap: 8px; }
.wpm-algemeen-label { font-size: 13.5px; color: var(--sub); flex: none; }
.wpm-algemeen select { flex: 1 1 0; min-width: 0; }
.wpm-dagbalk { position: relative; height: 26px; border-radius: 6px; background: var(--wash); overflow: hidden; }
.wpm-dagstuk { position: absolute; top: 0; bottom: 0; }
.wpm-dagtijden { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wpm-dag-werk { background: var(--chip-blue-dot); }
.wpm-dag-reizen { background: #7c5cd6; }
.wpm-dag-algemeen { background: var(--chip-green-dot); }
.wpm-dag-pauze { background: var(--chip-gray-dot); }
.wpm-dag-gat { background: repeating-linear-gradient(45deg, var(--chip-orange-dot) 0 4px, transparent 4px 8px); }
.wpm-dagrij { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.wpm-dagrij:last-child { border-bottom: 0; }
.wpm-dagrij-gat { background: var(--chip-orange-bg); }
.wpm-dagkleur { flex: none; width: 10px; height: 10px; border-radius: 3px; margin-top: 5px; }
.wpm-gatform { display: flex; gap: 8px; }
.wpm-gatform select { flex: 1 1 0; min-width: 0; }
.wpm-dagbevestig { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.wpm-dagbevestig .btn-primary { height: 46px; font-size: 15px; }
.wpl-plan-blok { padding-right: 7px; cursor: grab; }
.wpl-plan-blok.slepend, .wpl-plan-kaartje.slepend { opacity: .45; }
.wpl-plan-knoppen { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.wpl-plan-knoppen form { display: flex; }
.wpl-plan-knoppen .ghost.small, .wpl-plan-meer > summary.ghost.small { min-height: 0; height: 22px; padding: 0 7px; font-size: 12px; }
.wpl-plan-blokuren { font-size: 11.5px; color: var(--sub); font-variant-numeric: tabular-nums; min-width: 30px; text-align: center; }
.wpl-plan-meer { margin-left: auto; position: relative; }
.wpl-plan-meer > summary { list-style: none; cursor: pointer; }
.wpl-plan-meer > summary::-webkit-details-marker { display: none; }
.wpl-plan-meer[open] > form { margin-top: 6px; }
.wpl-plan-verplaats { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wpl-plan-blok .wpl-plan-meer[open] { position: absolute; right: 6px; top: 100%; z-index: 5; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); width: 240px; display: flex; flex-direction: column; gap: 6px; }
.wpl-plan-tijd { display: inline-block; margin-right: 4px; padding: 0 5px; border-radius: 4px; background: var(--chip-blue-bg); color: var(--chip-blue-ink); font-weight: 600; }
.wpl-plan-uren { margin-top: 0; align-self: flex-end; font-variant-numeric: tabular-nums; }
.wpl-plan-cel.over .wpl-plan-uren { color: var(--neg); font-weight: 600; }
.wpl-plan-cel.wpl-plan-over { outline: 2px dashed var(--data); outline-offset: -3px; background: var(--data-wash); }
.wpl-plan-cel.wpl-plan-nietbevoegd, .wpl-plan-naam.wpl-plan-nietbevoegd { background: var(--wash); opacity: .55; }
.wpl-plan-naam.wpl-plan-nietbevoegd::after { content: "niet bevoegd voor deze keuring"; font-size: 11.5px; color: var(--neg); }
.wpl-plan-kaartje { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: grab; background: var(--card); }
.wpl-plan-kaartje:last-child { border-bottom: 0; }
.wpl-plan-kaartje .wpl-rij-wat a { color: inherit; text-decoration: none; }
.wpl-plan-kaartje .wpl-plan-meer[open] { flex-basis: 100%; }
.wpl-plan-kaartje:has(.wpl-plan-meer[open]) { flex-wrap: wrap; }
.wpl-plan-greep { color: var(--muted); letter-spacing: -3px; font-size: 13px; line-height: 20px; flex: none; }
.wpl-plan-spoed { box-shadow: inset 3px 0 0 var(--chip-red-dot); }
.wpl-plan-schakel { display: inline-flex; gap: 0; }
.wpl-plan-schakel .ghost.small { border-radius: 0; }
.wpl-plan-schakel .ghost.small:first-child { border-radius: 7px 0 0 7px; }
.wpl-plan-schakel .ghost.small:last-child { border-radius: 0 7px 7px 0; margin-left: -1px; }
.wpl-plan-schakel .wpl-plan-schakel-aan { background: var(--ink); color: var(--card); border-color: var(--ink); }
#wpl-kanbeginnen .card-head, #wpl-wachtnog .card-head { flex-wrap: nowrap; }
#wpl-kanbeginnen .card-head .card-sub, #wpl-wachtnog .card-head .card-sub { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#wpl-kanbeginnen .card-head .card-title, #wpl-wachtnog .card-head .card-title { white-space: nowrap; }
#wpl-claimlijst td .cell-sub, #klant-afspraak-lopend td .cell-sub { display: block; }
#wpl-claimlijst tr.wpl-claim-aan td { background: var(--data-wash); }
.wpl-claim-bedrag, .wpl-claim-knoppen, .wpl-claim-gegevens { padding: 12px 18px; border-top: 1px solid var(--line); }
.wpl-claim-bedrag .wpl-groepkop { margin: 0 0 6px; }
.wpl-claim-totaal { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 14px; }
.wpl-claim-bedrag > .cell-sub { margin: 8px 0 0; }
.wpl-claim-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.wpl-claim-knoppen form { display: flex; }
.wpl-claim-gegevens { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; align-items: end; }
.wpl-claim-gegevens .field { margin: 0; }
.wpl-claim-gegevens .field input { width: 100%; }
.wpl-claim-gegevens .wpl-vink { grid-column: 1 / -1; }
.wpl-claim-gegevens button { justify-self: start; }
.wpl-claim-bedrag .wpl-kv .v { text-align: right; font-variant-numeric: tabular-nums; }
.wpl-claim-kosten { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line); }
.wpl-claim-kosten .wpl-kv { font-size: 12.5px; color: var(--muted); }
.wpl-claim-kosten .wpl-kv .v { color: var(--ink); }
#wpl-claims-permerk td .cell-sub { display: block; }
#wpl-claims-permerk td.num .cell-sub { text-align: right; }
.wpl-claims-voet { margin: 0; padding: 10px 18px; border-top: 1px solid var(--line); }
.wpl-cn-zoek { margin: 0 0 10px; }
.wpl-cn-zoek input { width: 100%; }
.wpl-cn-zoek .cell-sub { display: block; margin-top: 4px; }
#wpl-cn-lijst { max-height: 260px; overflow: auto; }
#wpl-cn-lijst .wpl-keuze[hidden] { display: none; }
#wpl-cn-lijst .wpl-keuze b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wpl-cn-reken { margin-top: 12px; }
.wpl-cn-reken .wpl-kv .v { text-align: right; font-variant-numeric: tabular-nums; }
.wpl-cn-reden { margin-top: 12px; }
.wpl-cn-reden input { width: 100%; }
.wpl-cn-reden .cell-sub { display: block; margin-top: 4px; }
.wpl-cn-voet { align-items: center; }
.wpl-cn-noot { margin-right: auto; }
#wpl-beheerlijst td.num .cell-sub { display: block; text-align: right; }
.wpl-beheerkaart { padding: 12px 18px; }
.wpl-beheerkaart > .cell-sub { margin: 10px 0 0; }
.if-voorstel-hint { margin-left: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #6b5200; background: #fff6d6; border: 1px solid #efd98a; border-radius: 6px; padding: 0 5px; }
.if-uitbesteding-kv { padding: 12px 18px; }
.if-uitbesteding-kv .wpl-kv .v { text-align: right; font-variant-numeric: tabular-nums; }
.if-uitbesteding-kv > .cell-sub { margin: 10px 0 0; }
.wpl-tarief-uitleg { margin: 0; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.wpl-tarieftabel th.num, .wpl-tarieftabel td.num { text-align: right; }
.wpl-tarieftabel .wpl-tariefveld { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.wpl-tarief-knoppen { margin: 0; padding: 12px 18px; border-top: 1px solid var(--line); align-items: center; }
.wpl-tarief-erbij { margin-left: auto; }
.wpl-afrond-keuzes .wpl-keuzes { flex-direction: row; flex-wrap: wrap; }
.wpl-afrond-zin { margin: 4px 0 0; font-size: 13.5px; color: var(--sub); }
#klant-prijsafspraak .wpl-groepkop { margin-top: 0; }
.wpl-afspraakbalk { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--wash); color: var(--sub); font-size: 13px; }
.wpl-afspraakbalk .card-link { flex: none; font-size: 12.5px; color: var(--muted); text-decoration: none; }
.wpl-afspraakbalk .card-link:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 600px){
.wpl-tarieftabel td:first-child::before { display: none; }
.wpl-tarieftabel td.num { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; }
.wpl-tarieftabel td.num::before { width: auto; }
}
.wpl-tarief-knoppen .menu { top: auto; bottom: calc(100% + 6px); }
#klant-prijsafspraak > p.cell-sub { margin: 6px 0 0; }
.wpl-cijfers-vestiging { display: inline-flex; }
.wpl-cijfertabel .wpl-cijfer-sub { display: block; }
.wpl-cijfertabel .wpl-cijfer-norm, .wpl-cijfertabel .wpl-cijfer-nul { color: var(--muted); }
.wpl-kleur-rood { color: var(--neg); }
.wpl-kleur-oranje { color: var(--chip-orange-ink); }
.wpl-kleur-groen { color: var(--pos); }
.wpl-cijfertabel th.wpl-cijfer-knop, .wpl-cijfertabel td.wpl-cijfer-knop { width: 1%; white-space: nowrap; text-align: right; }
.wpl-cijfertabel .wpl-cijfer-samen td { font-weight: 600; border-top: 1px solid var(--line); }
.wpl-cijfers-voet { margin: 0; padding: 12px 18px; border-top: 1px solid var(--line); }
.wpl-cijfers-voetrij { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.wpl-cijfers-voetrij .card-link { flex: none; font-size: 12.5px; color: var(--sub); text-decoration: none; }
.wpl-cijfers-voetrij .card-link:hover { color: var(--ink); text-decoration: underline; }
.wpl-legenda { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--sub); }
.wpl-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.wpl-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.wpl-t-gefact { background: var(--ink); }
.wpl-t-open { background: var(--data); }
.wpl-t-weg { background: var(--chip-orange-dot); }
.wpl-t-niet { background: var(--line); }
.wpl-cijfer-monteur { display: flex; align-items: center; gap: 10px; }
.wpl-rondje { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--wash); color: var(--sub); font-size: 11px; font-weight: 650; }
.wpl-cijfer-wie { display: flex; flex-direction: column; gap: 5px; min-width: 150px; flex: 1; }
.wpl-cijfer-balk { display: flex; height: 6px; width: 100%; max-width: 240px; border-radius: 3px; background: var(--line); overflow: hidden; }
.wpl-cijfer-balk i { display: block; height: 100%; }
.wpl-cijfertabel td.wpl-cijfer-pct { font-weight: 600; }
.wpl-cijfers-twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; align-items: start; }
.wpl-cijfers-twee.wpl-cijfers-smal-breed { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.wpl-cijfers-twee > .card { margin: 0; }
.wpl-schakelaar { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.wpl-schakelaar-baan { position: relative; width: 34px; height: 20px; border-radius: 10px; background: var(--line); transition: background .15s; }
.wpl-schakelaar-knop { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s; }
.wpl-schakelaar[aria-checked="true"] .wpl-schakelaar-baan { background: var(--ink); }
.wpl-schakelaar[aria-checked="true"] .wpl-schakelaar-knop { left: 16px; }
.wpl-cijfers-uitvalper { margin: 12px 18px 4px; }
.wpl-cijfertabel td.wpl-cijfer-uitvalbalk { width: 40%; }
.wpl-cijfer-link { color: inherit; text-decoration: none; font-weight: 500; }
.wpl-cijfer-link:hover { text-decoration: underline; }
.wpl-cijfer-kv .v { text-align: right; font-variant-numeric: tabular-nums; }
.wpl-dlg-voetzin { margin-right: auto; align-self: center; }
@media (max-width: 900px){
.wpl-cijfers-twee, .wpl-cijfers-twee.wpl-cijfers-smal-breed { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px){
.wpl-cijfertabel td.wpl-cijfer-uitvalbalk { display: none; }
.wpl-cijfertabel td.wpl-cijfer-knop { width: auto; text-align: left; padding-top: 6px; }
.wpl-cijfertabel td.wpl-cijfer-knop::before { display: none; }
.wpl-cijfertabel td[data-label="Monteur"]::before, .wpl-cijfertabel td[data-label="Pakket"]::before,
.wpl-cijfertabel td[data-label="Merk en model"]::before, .wpl-cijfertabel td[data-label="Werkorder"]::before { display: none; }
.wpl-legenda { margin-left: 0; }
.wpl-schakelaar { margin-left: 0; }
}
.wpl-normrij { padding: 8px 18px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--sub); }
.wpl-normrij.wpl-rood { color: var(--neg); }
.wpm-klokbalk .wpm-norm-over { color: var(--chip-orange-dot); font-weight: 600; opacity: 1; }
#wpl-cijfers-merken td[data-label="Merk en model"] { white-space: nowrap; }
#wpl-cijfers-merken td[data-label="Meest vervangen"] { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px){
#wpl-cijfers-merken td[data-label="Merk en model"], #wpl-cijfers-merken td[data-label="Meest vervangen"] { white-space: normal; max-width: none; }
}
@media (max-width: 600px){
.wpl-cijfertabel td.num { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.wpl-cijfertabel td.num::before { width: auto; flex: 1 1 auto; }
}
.wpl-cijfertabel td.wpl-cijfer-pct::before { font-weight: 400; }
#wpl-ohw-boekhouding > p { margin: 0; padding: 12px 18px; }
#wpl-ohw { margin-bottom: 14px; }
.wpl-ohw-goed { color: var(--pos); }
.wpl-strook { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.wpl-strook-knoppen { display: inline-flex; gap: 8px; align-items: center; }
.wpl-inline { display: inline-flex; margin: 0; }
#wpl-bij-ons { margin-bottom: 14px; }
#wpl-bij-ons .card-head { flex-wrap: wrap; }
.wpl-kopknoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; justify-content: flex-end; }
@media (max-width: 900px){
.wpl-kopknoppen { flex: 1 1 100%; margin-left: 0; justify-content: flex-start; }
}
.wpl-beurttabel td { vertical-align: middle; }
.wpl-beurttabel .cell-sub { display: block; }
.wpl-beurt-naam { font-weight: 600; color: var(--ink); text-decoration: none; }
.wpl-beurt-naam:hover { text-decoration: underline; }
.wpl-beurttabel th.wpl-beurt-knop, .wpl-beurttabel td.wpl-beurt-knop { width: 1%; white-space: nowrap; text-align: right; }
.wpl-beurttabel td.wpl-beurt-knop form { margin: 0; }
.wpl-beurttabel td.wpl-beurt-knop .btn-primary, .wpl-beurttabel td.wpl-beurt-knop .ghost { min-width: 104px; justify-content: center; }
.wpl-beurt-item { flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.wpl-beurt-item .wpl-rij-wat { flex: 1 1 100%; min-width: 0; }
.wpl-beurt-acties { display: flex; gap: 6px; flex: none; }
.wpl-beurt-acties form { margin: 0; }
.wpl-herinnering { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.wpl-herinnering .cell-sub { flex: 1; }
@media (max-width: 900px){
.wpl-beurttabel td.wpl-beurt-knop { width: auto; text-align: left; }
}
.wpl-k-machinekop { display: flex; flex-direction: column; gap: 2px; }
.wpl-k-machinenaam { font-size: 17px; }
.wpl-k-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.wpl-k-beurt { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid #151821; border-radius: 10px; margin: 12px 0; }
.wpl-k-beurt p { margin: 2px 0; }
.wpl-k-beurtprijs { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 10px; border-top: 1px solid #e5e7ec; font-size: 14px; }
.wpl-k-zogaathet { background: #f4f2ee; border-radius: 8px; padding: 12px 14px; margin: 12px 0; }
.wpl-k-zogaathet p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
.wpl-k-breed { display: flex; width: 100%; justify-content: center; box-sizing: border-box; text-align: center; }
.wpl-k-midden { text-align: center; }
.wpl-k-planlijst { display: flex; flex-direction: column; gap: 8px; }
.wpl-k-plankeuze { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 12px 14px; border: 1px solid #e5e7ec; border-radius: 10px; cursor: pointer; font-size: 14px; }
.wpl-k-plankeuze input { margin: 3px 0 0; }
.wpl-k-plankeuze.aan, .wpl-k-plankeuze:has(input:checked) { border-color: #151821; box-shadow: inset 0 0 0 1px #151821; }
.wpl-k-plankeuze:has(input:not(:checked)) { border-color: #e5e7ec; box-shadow: none; }
.wpl-k-plantekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wpl-k-plantekst .wpl-k-meta { margin: 0; font-size: 13px; }
.wpl-k-planprijs { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wpl-k-weken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wpl-k-week { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 1px solid #e5e7ec; border-radius: 10px; cursor: pointer; font-size: 14px; text-align: center; }
.wpl-k-week input { position: absolute; opacity: 0; pointer-events: none; }
.wpl-k-week span { color: #5b6270; font-size: 12.5px; }
.wpl-k-week.aan, .wpl-k-week:has(input:checked) { border-color: #151821; box-shadow: inset 0 0 0 1px #151821; }
.wpl-k-week:has(input:not(:checked)) { border-color: #e5e7ec; box-shadow: none; }
.wpl-k-week:has(input:focus-visible) { outline: 2px solid #151821; outline-offset: 2px; }
.wpl-k-filmpje { margin: 10px 0 14px; }
.wpl-k-filmpje video { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: #111; display: block; }
.wpl-k-filmpje figcaption { margin-top: 4px; }
.wpl-k-opgaveregel { display: inline-flex; align-items: flex-start; gap: 10px; vertical-align: top; }
.wpl-k-mini { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: none; }
.wpl-k-opgavetekst { display: inline-flex; flex-direction: column; gap: 2px; }
.wpl-k-opgavetekst .wpl-k-meta { margin: 0; font-size: 13px; }
.wpl-k-stempel { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; font-size: 11.5px; font-weight: 600; background: #eef0f4; color: #5b6270; vertical-align: 1px; }
.wpl-k-stempel.nodig { background: #fdecea; color: #a02a1e; }
.wpl-k-stempel.aanbevolen { background: #fff4e5; color: #8a5200; }
.wpl-k-optie { display: inline-flex; align-items: flex-start; gap: 8px; }
.wpl-k-optie input { margin-top: 3px; }
.wpl-k-tabel tr.wacht td { color: #5b6270; }
.wpl-k-noteren { display: block; margin: 2px 0 0 0; font-size: 12.5px; }
.wpl-k-beelden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wpl-k-beelden figure { margin: 0; }
.wpl-k-beelden img, .wpl-k-beelden video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; background: #111; }
.wpl-k-rondegroep { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.wpl-k-rondeadres { font-size: 14px; }
.wpl-k-keurstand::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #9aa0aa; }
.wpl-k-keurstand.rood::before { background: #c0392b; }
.wpl-k-keurstand.oranje::before { background: #d68910; }
.wpl-k-keurstand.groen::before { background: #1e7a46; }
.wpl-k-rondesom { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 8px; background: #f4f2ee; font-size: 14px; }
.klant-onderhoud { display: flex; flex-direction: column; gap: 14px; }
.klant-onderhoud-kop { font-weight: 600; }
.klant-onderhoud form { margin: 0; }
.klant-tellerrij { display: flex; align-items: center; gap: 8px; }
.klant-tellerrij input { flex: 1 1 auto; min-width: 0; }
.klant-herinnering .wpl-vink { align-items: flex-start; font-size: 14px; }
.klant-herinnering .wpl-vink input { margin-top: 3px; }
.klant-herinnering .klant-sub { display: block; }
.wpl-keurklanten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wpl-keurklant { display: flex; flex-direction: column; }
.wpl-keurklant-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px 18px; font-size: 13.5px; flex: 1; }
.wpl-keurklant-kv b { text-align: right; font-variant-numeric: tabular-nums; }
.wpl-keurklant-voet { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); }
.wpl-ronde-dlg { width: min(860px, calc(100vw - 32px)); }
.wpl-ronde-kop { display: flex; align-items: flex-start; gap: 12px; }
.wpl-ronde-titel { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.wpl-ronde-lijst { border: 1px solid var(--line); border-radius: 10px; max-height: 46vh; overflow: auto; }
.wpl-ronde-groep { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px 6px; }
.wpl-ronde-rij { display: grid; grid-template-columns: auto minmax(0, 1fr) 96px auto 112px; align-items: center; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--line); cursor: pointer; font-size: 13.5px; }
.wpl-ronde-taak { white-space: nowrap; color: var(--sub); }
.wpl-ronde-rij.dicht { opacity: .55; cursor: default; }
.wpl-ronde-wat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wpl-ronde-wanneer { white-space: nowrap; }
.wpl-ronde-prijs { text-align: right; font-variant-numeric: tabular-nums; }
.wpl-ronde-som { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 12px 0; padding: 12px 14px; border-radius: 10px; background: var(--soft, #f3f4f7); }
.wpl-ronde-samen { margin-left: auto; }
.wpl-ronde-waar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.wpl-ronde-keuze { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--soft, #f3f4f7); }
.wpl-ronde-keuze label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 7px; font-size: 13px; cursor: pointer; }
.wpl-ronde-keuze input { position: absolute; opacity: 0; pointer-events: none; }
.wpl-ronde-keuze label:has(input:checked) { background: var(--card, #fff); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.wpl-ronde-keuze label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 1px; }
@media (max-width: 1100px){
.wpl-keurklanten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wpl-ronde-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 18px; }
.wpl-ronde-knoppen form { margin: 0; }
.wpl-ronde-samen-rij { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.wpl-ronde-regel { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; font-size: 13.5px; }
.wpl-ronde-regel form { margin: 0; }
.wpl-kopknop-rechts { margin-left: auto; }
.wpl-goedtekst { color: var(--pos); }
.wpl-keuring-rondeform .wpl-uitslag { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--soft, #eef0f4); }
.wpl-keuring-rondeform .wpl-uitslag label { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 58px; min-height: 40px; padding: 0 12px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.wpl-keuring-rondeform .wpl-uitslag input { position: absolute; opacity: 0; pointer-events: none; }
.wpl-keuring-rondeform .wpl-uitslag label:has(input[value=goed]:checked) { background: #1e7a46; color: #fff; }
.wpl-keuring-rondeform .wpl-uitslag label:has(input[value=fout]:checked) { background: #c0392b; color: #fff; }
.wpl-keuring-rondeform .wpl-uitslag label:has(input[value=nvt]:checked) { background: var(--ink); color: var(--card, #fff); }
.wpl-keuring-rondeform .wpl-uitslag label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 1px; }
.wpl-keuring-rondeform .wpl-regelform .btn-primary, .wpl-keuring-rondeform .wpl-regelform .ghost { min-height: 44px; }
.wpl-ronde-voortgang { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 4px 0 6px; }
.wpl-ronde-voortgang span { display: block; height: 100%; background: var(--ink); border-radius: 4px; }
.wpl-ronde-telrij { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); }
.wpl-ronde-telrij:first-child { border-top: 0; }
.wpl-ronde-telrij.bezig { background: var(--soft, #eef1f7); }
.wpl-ronde-telwat { flex: 1; min-width: 0; margin: 0; }
.wpl-ronde-telknop { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wpl-ronde-telknop:disabled { cursor: default; }
.wpl-ronde-telrij form:not(.wpl-ronde-telwat) { margin: 0; }
.wpl-ronde-telstand { white-space: nowrap; font-size: 13.5px; }
.wpl-ronde-telbalk { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.wpl-ronde-telbalk > * { justify-content: center; text-align: center; }
.wpl-stickervel-raster { display: grid; grid-template-columns: repeat(2, 100mm); gap: 6mm; }
@media print{
.wpl-stickervel-raster { gap: 4mm; }
.wpl-stickervel-raster .wpl-label { break-inside: avoid; }
}
@media (max-width: 700px){
.wpl-keurklanten { grid-template-columns: minmax(0, 1fr); }
.wpl-ronde-rij { grid-template-columns: auto minmax(0, 1fr) auto; }
.wpl-ronde-taak { display: none; }
.wpl-ronde-wanneer { grid-column: 2; white-space: normal; }
.wpl-ronde-prijs { grid-row: 1; grid-column: 3; }
}
.wpl-bij-ons-zoek { margin-left: auto; display: inline-flex; gap: 6px; }
.wpl-bij-ons-zoek input { width: 200px; }
.wpl-staatfoto { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; flex-wrap: wrap; }
.wpl-foto-knop { position: relative; cursor: pointer; }
.wpl-foto-knop .wpl-foto-invoer { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.wpl-foto-duimen { display: inline-flex; gap: 6px; }
.wpl-foto-duimen img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.wpl-vraag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--chip-red-bg); color: var(--chip-red-ink); white-space: nowrap; }
.wpl-vraag svg { width: 12px; height: 12px; flex: none; }
.wpl-bericht-body { padding: 14px 18px 12px; display: flex; flex-direction: column; gap: 10px; }
.wpl-bericht-body textarea { width: 100%; box-sizing: border-box; min-height: 84px; resize: vertical; }
.wpl-zinnen { display: flex; flex-wrap: wrap; gap: 8px; }
.wpl-zin { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.wpl-zin:hover { background: var(--wash2); }
.wpl-bericht-voet { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px 14px; border-top: 1px solid var(--line); }
.wpl-bericht-voet > .btn-primary { margin-left: auto; flex: none; }
.wpl-bericht-voet > .card-sub { align-self: center; }
.wpl-fotokeuze { min-width: 0; flex: 1; }
.wpl-fotokeuze > summary { cursor: pointer; font-size: 13.5px; color: var(--sub); padding: 7px 0; list-style: none; }
.wpl-fotokeuze > summary::-webkit-details-marker { display: none; }
.wpl-fotokeuze > summary::before { content: "+ "; }
.wpl-fotokeuze[open] > summary::before { content: "\2212  "; }
.wpl-fotokeuze-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 6px; }
.wpl-fotokeuze-item { position: relative; display: block; cursor: pointer; }
.wpl-fotokeuze-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; border: 2px solid transparent; display: block; }
.wpl-fotokeuze-item input { position: absolute; top: 5px; left: 5px; margin: 0; }
.wpl-fotokeuze-item input:checked + img { border-color: var(--data); }
#wpl-contact .card-head { flex-wrap: wrap; }
.wpl-draad { margin-left: auto; }
.wpl-draad .tel { color: var(--muted); font-weight: 400; margin-left: 2px; }
.wpl-kaart-uitleg { color: var(--sub); font-size: 13px; line-height: 1.5; margin: 8px 0 2px; }
.wpl-k-ballonnen { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; }
.wpl-k-ballon { max-width: 82%; align-self: flex-start; background: #f1f2f4; color: #151821; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.wpl-k-ballon.klant { align-self: flex-end; background: #151821; color: #fff; }
.wpl-k-ballon p { margin: 0; font-size: 15px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.wpl-k-ballon b { font-size: 13.5px; }
.wpl-k-wanneer { font-size: 12.5px; color: #5b6270; }
.wpl-k-ballon.klant .wpl-k-wanneer { color: #c9ccd3; }
.wpl-k-ballonfotos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.wpl-k-ballonfotos img { width: 112px; height: 84px; object-fit: cover; border-radius: 6px; display: block; }
.wpl-k-vraagform { display: flex; flex-direction: column; gap: 8px; }
.wpl-k-vraagform textarea { width: 100%; box-sizing: border-box; resize: vertical; font-size: 16px; }
.wpl-k-vraagrij { display: flex; gap: 8px; align-items: stretch; }
.wpl-k-vraagrij .btn-primary { margin-left: auto; }
.wpl-k-fotoknop { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.wpl-k-fotoknop input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.wpl-k-fotoknop svg { width: 18px; height: 18px; flex: none; }
.wpl-uitstrook { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px; border-radius: 10px; background: var(--chip-orange-bg); color: var(--chip-orange-ink); font-size: 14px; }
.wpl-uitstrook svg { width: 18px; height: 18px; flex: none; }
.wpl-uitstrook > a { margin-left: auto; flex: none; }
.wpl-uitfotos { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 18px 0; }
.wpl-uitfoto { display: flex; flex-direction: column; gap: 6px; font-size: 13px; cursor: pointer; }
.wpl-uitfoto img { width: 132px; height: 99px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.wpl-uitfoto span { display: inline-flex; align-items: center; gap: 6px; }
#wpl-aanmeld-uit .wpl-kaart-uitleg { padding: 0 18px; }
.wpl-uitvink { padding: 10px 18px 14px; }
.wpl-k-binnentegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.wpl-k-binnentegel { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid #d9dce2; border-radius: 10px; cursor: pointer; background: #fff; }
.wpl-k-binnentegel input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wpl-k-binnentegel.aan, .wpl-k-binnentegel:has(input:checked) { border: 2px solid #151821; padding: 13px; }
.wpl-k-binnentegel:has(input:focus-visible) { outline: 2px solid #151821; outline-offset: 2px; }
.wpl-k-binnentegel b { font-size: 15px; }
.wpl-k-binnenprijs { margin-top: auto; padding-top: 6px; font-weight: 650; font-size: 14px; }
.wpl-k-strookblok { display: flex; flex-direction: column; gap: 10px; }
.wpl-k-strookblok h3 { font-size: 15px; margin: 6px 0 0; }
.wpl-k-dagstrook { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 6px; }
.wpl-k-dag { display: flex; flex-direction: column; gap: 6px; text-align: center; min-width: 0; }
.wpl-k-dag > b { font-size: 13px; }
.wpl-k-dag > span { font-size: 12px; color: #5b6270; margin-top: -4px; }
.wpl-k-dagdeel { position: relative; display: block; cursor: pointer; }
.wpl-k-dagdeel input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wpl-k-dagdeel span { display: block; padding: 8px 0; border: 1px solid #d9dce2; border-radius: 6px; font-size: 12px; letter-spacing: -.01em; background: #fff; }
.wpl-k-dagdeel input:checked + span { border: 2px solid #151821; padding: 7px 0; font-weight: 650; }
.wpl-k-dagdeel input:focus-visible + span { outline: 2px solid #151821; outline-offset: 1px; }
.wpl-k-dagdeel.vol span, .wpl-k-dagdeel.dicht span { background: #f1f2f4; color: #9aa0aa; border-color: #f1f2f4; cursor: default; }
.wpl-k-afspraakzin { margin: 0; padding: 10px 12px; border-radius: 8px; background: #fdf4e7; font-size: 14px; line-height: 1.5; }
@media (min-width: 600px){
.wpl-k-dagstrook { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
.wpl-afvink { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); cursor: pointer; font-size: 15px; }
.wpl-afvink > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wpl-afvink input { width: 24px; height: 24px; flex: none; margin: 0; accent-color: var(--ink); }
.wpl-momenten td { vertical-align: middle; }
.wpl-momenten .wpl-smstekst { width: 100%; min-width: 260px; box-sizing: border-box; }
.wpl-kanaal { white-space: nowrap; }
.wpl-smsvoorbeeld { background: var(--wash2); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.wpl-smsballon { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.wpl-breekbaar { overflow-wrap: anywhere; }
.wpl-smsaan { margin: 6px 0 10px; }
#klant-berichten-via .seg { margin: 4px 0 2px; }
.wpm-bus-tel { color: var(--ink); }
.wpm-bus-krap { color: var(--chip-orange-ink); }
.wpm-bus-leeg { color: var(--chip-red-ink); }
.wpm-busvoet { padding: 12px 18px 14px; display: flex; flex-direction: column; gap: 8px; }
.wpm-busvoet .btn-primary { width: 100%; justify-content: center; }
.wpm-busvoet .cell-sub { margin: 0; }
.wpl-dagnav { margin-left: auto; display: inline-flex; gap: 6px; }
.wpl-klaarvoet { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); }
.wpl-binnenform input.wpl-klaarplek[name=plek] { width: 120px; }
.wpl-klaar-tekst { color: var(--chip-green-ink); font-weight: 600; }
.wpl-verwacht-kop { padding: 10px 18px 2px; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.wpl-rij-titel { color: inherit; text-decoration: none; }
.wpl-rij-titel:hover b { text-decoration: underline; }
.wpl-binnenform { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wpl-binnenform input[name=plek] { width: 72px; }
.wpl-afspraak-knoppen { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 10px; }
.wpl-afspraak-knoppen:empty { display: none; }
.wpl-k-naarprijs { align-self: flex-start; margin-top: 4px; font-weight: 600; color: #151821; text-underline-offset: 3px; }
.ov-serie td { background: var(--wash2); }
.ov-serie-veld { display: inline-flex; flex-direction: column; gap: 4px; margin: 0 12px 8px 0; font-size: 12.5px; color: var(--sub); }
.ov-serie-veld .ov-inp { width: 220px; }
.aik-blok { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.card + .aik-blok { margin-top: 14px; }
.aik-kaart .card-head { flex-wrap: wrap; row-gap: 6px; }
.aik-kopsub { flex: 1 1 200px; min-width: 0; }
.aik-stop { margin: 0 0 0 auto; }
.aik-tekst { padding: 12px 18px; color: var(--sub); font-size: 13.5px; line-height: 1.45; }
.aik-regels { margin: 0; padding: 0 18px 4px; }
.aik-regel { display: grid; grid-template-columns: 170px 110px minmax(0, 1fr); column-gap: 14px; align-items: baseline;
min-height: 34px; padding: 7px 0; box-sizing: border-box; border-top: 1px solid var(--line); }
.aik-regel dt { color: var(--muted); font-size: 13.5px; }
.aik-regel dd { margin: 0; min-width: 0; }
.aik-waarde { font-weight: 600; text-align: right; white-space: nowrap; }
.aik-getal { font-variant-numeric: tabular-nums; }
.aik-sub { font-size: 12.5px; color: var(--muted); }
.aik-let { margin: 4px 18px 12px; padding: 8px 12px; border-radius: 8px; background: var(--wash);
border-left: 3px solid var(--chip-orange-dot); font-size: 13.5px; color: var(--ink); }
.aik-let.aik-fout { border-left-color: var(--neg); }
.aik-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding: 12px 18px; border-top: 1px solid var(--line); }
.aik-reden { color: var(--sub); font-size: 13.5px; }
.aik-balk { height: 6px; margin: 14px 18px 0; border-radius: 999px; background: var(--wash); overflow: hidden; }
.aik-balk i { display: block; height: 100%; background: var(--chip-green-dot); border-radius: 999px; }
.aik-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 18px; margin: 0; padding: 14px 18px; }
.aik-cijfer { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aik-cijfer dt { font-size: 12.5px; color: var(--muted); }
.aik-cijfer dd { margin: 0; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.aik-cijfer dd b { font-size: 18px; font-weight: 600; line-height: 1.3; }
.aik-cijfers + .aik-tekst { border-top: 1px solid var(--line); }
@media (max-width: 720px){
.aik-regel { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
.aik-regel .aik-sub { grid-column: 1 / -1; }
.aik-regel .aik-sub:empty { display: none; }
.aik-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wpl-bijlagen { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wpl-bijlage { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font-size: 13.5px; text-decoration: none; }
a.wpl-bijlage:hover { border-color: var(--axis); }
.wpl-bijlage-icoon { flex: none; color: var(--sub); }
.wpl-bijlage-naam { flex: 0 0 auto; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpl-bijlage small { flex: 0 1 auto; min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: var(--muted); font-size: 12.5px; }
.wpm-punt.wpl-met-bijlagen { flex-wrap: wrap; row-gap: 8px; }
.wpm-punt > .wpl-bijlagen { flex: 1 1 100%; }
#wpm-fotos > .wpl-bijlagen { padding: 0 18px 14px; }
.wpl-bijlageknop { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; min-height: 28px; margin: 0 0 -6px; padding: 0; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.wpl-bijlageknop:hover, .wpl-bijlageknop:focus-visible { color: var(--ink); }
.wpl-bijlageknop .wpm-icoon { width: 14px; height: 14px; }
.wpl-bijlagekeuze { position: relative; align-items: center; padding: 12px 14px; }
.wpl-bijlagekeuze.wpl-keuze-aan { border-color: var(--ink); background: var(--wash); }
.wpl-bijlagekeuze:has(.wpl-bijlage-invoer:focus-visible) { box-shadow: 0 0 0 3px var(--data-wash); }
.wpl-bijlage-invoer { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.wpl-bijlagekeuze .wpl-bijlage-rondje { flex: none; width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid var(--axis); border-radius: 50%; background: var(--card); }
.wpl-bijlagekeuze.wpl-keuze-aan .wpl-bijlage-rondje { border: 5px solid var(--ink); }
.wpl-bijlage-gekozen[hidden] { display: none; }
.wpl-schakelrij { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.wpl-schakelrij > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13.5px; }
.wpl-schakelrij > span b { font-weight: 550; }
.card-head + .wpl-schakelrij, .dlg-body > .wpl-schakelrij { border-top: 0; padding-top: 0; }
.dlg-body > .wpl-schakelrij { padding-bottom: 0; }
.wpl-bonaankoop[hidden], #wpl-aanmeld-bon .eyebrow[hidden] { display: none; }
.wpl-bonaankoop > .cell-sub { display: block; margin-top: 6px; }
.wpl-rapporten > .card-head + .wpl-regelform { border-top: 0; }
.wpl-rapporten > .empty { padding: 22px 18px; }
.wpl-rapport { justify-content: space-between; }
.wpl-rapport > .wpl-bijlage { flex: 1 1 280px; }
.wpl-k-beelden + .wpl-bijlagen { margin-top: 12px; }
.wpl-controle-tekst .wpl-controle-rapport { color: var(--sub); text-decoration: none; border-bottom: 1px dotted var(--muted); align-self: flex-start; }
.wpl-k-feiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #e5e7ec; border-radius: 8px; overflow: hidden; }
.wpl-k-feiten > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px; border-top: 1px solid #e5e7ec; }
.wpl-k-feiten > div:nth-child(-n+2) { border-top: 0; }
.wpl-k-feiten > div:nth-child(2n) { border-left: 1px solid #e5e7ec; }
.wpl-k-feiten b { font-size: 14.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wpl-k-feiten span { font-size: 13px; color: #5b6270; }
.wpl-k-vinklijst { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.wpl-k-vinklijst li { display: flex; align-items: flex-start; gap: 10px; }
.wpl-k-vinklijst svg { width: 18px; height: 18px; flex: none; margin-top: 1px; padding: 2px; border-radius: 5px; background: #fdf4e7; color: #8a5200; box-sizing: border-box; }
.wpl-k-onderdeel { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid #151821; border-radius: 10px; }
.wpl-k-onderdeel + .wpl-k-onderdeel { margin-top: 10px; }
.wpl-k-onderdeel > b { font-size: 15.5px; }
.wpl-k-onderdeel .wpl-k-meta { margin: 0; }
.wpl-k-onderdeelrij { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; padding-top: 8px; border-top: 1px solid #e5e7ec; font-size: 14px; }
.wpl-k-onderdeelrij b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wpl-k-tip { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 10px; background: #f4f2ee; }
.wpl-k-tip p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.wpl-k-tabel tr.wpl-k-eind td { border-top: 1.5px solid #151821; padding-top: 10px; }
.wpl-k-meldbestanden { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.wpl-k-meldbestand { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 8px; background: #f4f2ee; color: inherit; text-decoration: none; }
.wpl-k-duim { display: flex; align-items: center; justify-content: center; width: 72px; height: 56px; border-radius: 6px; overflow: hidden; background: #e5e7ec; }
.wpl-k-duim img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wpl-k-duim-film { background: #151821; color: #fff; }
.wpl-k-duim-film svg { width: 22px; height: 22px; }
.wpl-k-meldtekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wpl-k-meldtekst b { font-size: 14.5px; overflow-wrap: anywhere; }
.wpl-k-meldtekst .wpl-k-meta { margin: 0; font-size: 13px; }
.wpl-k-belknop { gap: 8px; align-items: center; margin: 4px 0 6px; }
.wpl-k-belknop svg { width: 18px; height: 18px; flex: none; }
.wpl-vest { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 16px; align-items: start; }
.wpl-vest-links, .wpl-vest-rechts { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wpl-vest-links > .card { margin-top: 0 !important; max-width: none !important; }
.wpl-vest-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wpl-vest-noot { margin: 12px 0 0; }
.wpl-vest-knop { display: flex; justify-content: flex-end; margin-top: 12px; }
.wpl-vest-bel { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.wpl-vest-bel > b { font-size: 15px; }
.wpl-vest-bel > span:not(.wpl-vest-belknop) { font-size: 13px; line-height: 1.5; color: var(--sub); }
.wpl-vest-belknop { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 6px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 600; }
.wpl-vest-belknop svg { width: 16px; height: 16px; flex: none; }
.wpl-vest-rij { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); }
.wpl-vest-rij > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wpl-vest-rij b { font-size: 14px; font-weight: 550; }
.wpl-vest-ico { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--wash2); color: var(--sub); }
.wpl-vest-ico svg { width: 17px; height: 17px; }
@media (max-width: 1100px){
.wpl-vest { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px){
.wpl-vest-velden { grid-template-columns: minmax(0, 1fr); }
}
.wpl-k-advies { display: flex; flex-direction: column; gap: 10px; }
.wpl-k-advies h2 { margin: 0; }
.wpl-k-adviesstempel { align-self: flex-start; margin-left: 0; }
.wpl-k-adviesfoto { display: block; border-radius: 8px; overflow: hidden; background: #111; }
.wpl-k-adviesfoto img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.wpl-k-adviestekst { margin: 0; font-size: 15px; line-height: 1.5; }
.wpl-k-advies .wpl-k-onderdeelrij { margin-top: 0; }
.wpl-k-adviesform { display: flex; flex-direction: column; gap: 10px; }
.wpl-k-doorgegeven { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 8px; background: #e3f2ea; color: #1e6b44; font-size: 14px; line-height: 1.5; }
.wpl-k-doorgegeven svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.wpl-k-doorgegeven span { color: #151821; }
.wpl-k-adviesvan { font-size: 13px; }
.wpl-k-beter { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 10px; background: #fdf4e7; }
.wpl-k-beterform { display: flex; flex-direction: column; gap: 10px; }
.wpl-k-beterform label b { font-size: 15.5px; }
.wpl-k-beterform textarea { width: 100%; box-sizing: border-box; resize: vertical; font-size: 16px; }
.wpl-k-linkknop { border: 0; background: none; padding: 8px 0 2px; font: inherit; font-size: 14.5px; font-weight: 600; color: #8a5200; cursor: pointer; }
.wpl-k-linkknop:hover { text-decoration: underline; text-underline-offset: 3px; }
.wpl-k-citaat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 8px; background: #f4f2ee; }
.wpl-k-citaat > span { font-size: 15px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.wpl-k-citaat > small { font-size: 13px; color: #5b6270; }
.wpl-k-na { display: flex; flex-direction: column; gap: 12px; }
.wpl-k-na > p { margin: 0; }
.wpl-k-terug > summary { display: inline-flex; align-items: center; cursor: pointer; }
.wpl-k-terug[open] > summary { margin-bottom: 10px; }
.wpl-k-grensuitleg b { white-space: nowrap; }
.wpl-k-grenskeuzes > label:not(.wpl-k-grenseigen) { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 8px; align-items: start; }
.wpl-k-grenskeuzes > label:not(.wpl-k-grenseigen) > input { margin: 3px 0 0; }
.wpl-k-grenskeuzes > label:not(.wpl-k-grenseigen) > .wpl-k-meta { grid-column: 2; margin-left: 0; }
.wpl-puntfoto { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--sub); }
.wpl-puntfoto input { margin: 0; }
select.wpl-alsveld, input.wpl-alsveld { display: block; width: 150px; min-width: 0; }
.wpl-lijstklus { color: var(--ink); text-decoration: none; }
.wpl-lijstklus:hover { text-decoration: underline; }
.wpl-binnenkortveld { padding-top: 12px; border-top: 1px solid var(--line); }
tr.sleep-item:not(:has(input[name^="p_sch_"]:checked)) + tr.wpl-schaalrij { display: none; }
.wpl-schaalrij .wps-getal { width: 64px; }
.wpl-binnenkortveld .field { margin: 0; }
.wpl-binnenkortveld input { max-width: 80px; }
.wpl-innamelijst { margin: -2px 0 8px; }
.wpl-innametabel td { vertical-align: middle; }
.wpl-oordeel { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--wash); white-space: nowrap; }
.wpl-oordeel label { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 30px; padding: 0 8px; border-radius: 7px; color: var(--sub); font-size: 12.5px; cursor: pointer; }
.wpl-oordeel label input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.wpl-oordeel label .wpm-icoon { width: 16px; height: 16px; }
.wpl-oordeel label:has(input:checked) { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.wpl-oordeel label.wpl-oordeel-goed:has(input:checked) { background: var(--chip-green-dot); color: #fff; }
.wpl-oordeel label.wpl-oordeel-fout:has(input:checked) { background: var(--chip-red-dot); color: #fff; }
.wpl-oordeel label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 1px; }
.wpl-meetvak { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); box-sizing: border-box; }
.wpl-meetvak input.ghost { width: 72px; height: 30px; padding: 0; border: 0; background: transparent; text-align: right; font-weight: 600; box-shadow: none; }
.wpl-meetvak.wpl-meet-goed { border-color: var(--chip-green-dot); background: var(--chip-green-bg); }
.wpl-meetvak.wpl-meet-fout { border-color: var(--chip-red-dot); background: var(--chip-red-bg); }
.wpl-meeteenheid { color: var(--sub); font-size: 12.5px; white-space: nowrap; }
select.wpl-meetinstrument { display: block; margin-top: 4px; max-width: 190px; }
.wpl-bijfout { font-weight: 500; }
.wpl-bijfout-advies { color: var(--chip-blue-ink); }
.wpl-bijfout-binnenkort { color: var(--chip-orange-ink); }
.wpl-bijfout-niet_gebruiken { color: var(--chip-red-ink); }
tr.wpl-innamefout { display: none; }
tr.wpl-innamerij:has(input[value="fout"]:checked) + tr.wpl-innamefout { display: table-row; }
tr.wpl-innamefout td { background: var(--chip-red-bg); border-top: 0; }
.wpl-foutkop { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--chip-red-ink); }
.wpl-foutinvoer { display: flex; gap: 8px; align-items: center; }
.wpl-foutinvoer input.ghost { flex: 1 1 0; min-width: 0; background: var(--card); }
.wpl-fotoknop { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); cursor: pointer; }
.wpl-fotoknop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.wpm-controlekaart .card-head .card-title { flex: none; white-space: nowrap; }
.wpl-werkstappen .card-head .card-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpm-uitkomst { flex: none; max-width: 48%; text-align: right; font-size: 14px; font-weight: 550; font-variant-numeric: tabular-nums; }
.wpm-uitkomst-groen { color: var(--chip-green-ink); }
.wpm-uitkomst-blauw { color: var(--chip-blue-ink); }
.wpm-uitkomst-oranje { color: var(--chip-orange-ink); }
.wpm-uitkomst-rood { color: var(--chip-red-ink); }
.wpm-uitkomst-grijs { color: var(--sub); }
.wpm-meetform { flex: 0 0 168px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wpm-meetform .wpm-meting { flex: none; width: 100%; }
select.wpm-instrument { width: 100%; min-width: 0; }
.wpl-metingtabel td { vertical-align: top; }
.wpl-metingtabel tr.wpl-metinggroep td { background: var(--wash); padding-top: 8px; padding-bottom: 8px; }
.wpl-metingtabel tr.wpl-metinggroep .cell-sub { margin-left: 8px; }
.wpl-metingtabel .wpl-meetvak { height: 32px; }
.wpl-metingtabel .wpl-meetvak input.ghost { width: 56px; height: 28px; }
.wpl-metingtabel select, .wpl-controle-opm { display: block; width: 100%; min-width: 110px; max-width: 170px; }
.wpl-controle-opm { margin-top: 4px; }
.wpl-controle-bewaar { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.wpl-uitslag-goed { color: var(--chip-green-ink); font-weight: 500; }
.wpl-uitslag-fout { color: var(--chip-red-ink); font-weight: 500; }
tr.wpl-adviesrij td { padding-top: 0; border-top: 0; }
.wpl-adviesstrook { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 8px; background: var(--chip-orange-bg); color: var(--chip-orange-ink); font-size: 13px; }
.wpl-adviesblok { display: flex; flex-direction: column; gap: 12px; }
.wpl-adviesblok .field { margin: 0; }
.wpl-segment { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 10px; background: var(--wash); }
.wpl-segment label { position: relative; display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 8px; font-size: 13.5px; color: var(--sub); cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 500; }
.wpl-segment label input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.wpl-segment label:has(input:checked) { background: var(--card); color: var(--ink); font-weight: 650; box-shadow: var(--shadow); }
.wpl-segment label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 1px; }
.wpl-adviesprijs { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; }
.wpl-stappen-alles { display: inline-flex; align-items: center; gap: 6px; }
.wpl-stappen-alles .wpm-icoon { width: 16px; height: 16px; }
.wpl-klustabel tr.wpl-klus-gekozen td { background: var(--wash); }
.wpl-klustabel td.wpl-klustabel-stil { color: var(--muted); }
.wpl-klustabel td.wpl-klustabel-ja { color: var(--pos); }
.wpl-klusraster { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.wpl-klusraster.wpl-klusraster-een { grid-template-columns: minmax(0, 1fr); }
.wpl-klusraster .wps-puntentabel .wps-naam { min-width: 150px; }
.wpl-klusraster .wps-puntentabel select.wpl-alsveld, .wpl-klusraster .wps-puntentabel input.wpl-alsveld { width: 130px; }
.wpl-klus-schakels .wps-schakelrij:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.wpl-klus-keuzenoot { margin: 12px 0 0; }
@media (max-width: 1420px){
.wpl-klusraster { grid-template-columns: minmax(0, 1fr); }
}
.wpl-keurraster { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 14px; align-items: start; }
.wpl-keuring-schakels { margin-top: 14px; }
#wpl-keuring-bij .wpl-velden { align-items: end; }
.wpl-keurpunten .wpl-schaalrij .wps-getal { width: 52px; }
.wpl-keurpunten .wpl-schaalrij select { max-width: 170px; }
.wpl-keurpunten .wps-naam { min-width: 150px; }
.wpl-keurpunten input.wpl-keurhoe { display: block; width: 90px; min-width: 0; }
.wpl-keurpunten .wps-grens, .wpl-keurpunten .wps-grens.wps-sub { width: 110px; }
.wpl-keurpunten select.wpl-alsveld, .wpl-keurpunten input.wpl-alsveld { width: 156px; }
@media (max-width: 640px){
.wpl-keurpunten select.wpl-alsveld, .wpl-keurpunten input.wpl-alsveld, .wpl-keurpunten .wps-grens, .wpl-keurpunten input.wpl-keurhoe { width: 100%; }
}
.wpl-kenmerktabel th.wpl-kenmerktabel-soort, .wpl-kenmerktabel td.wpl-kenmerktabel-soort { text-align: center; }
.wpl-kenmerktabel .wpl-kenmerktabel-stil { color: var(--muted); }
.wpl-kenmerktabel-ja { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; background: var(--data); color: #fff; font-size: 12px; font-weight: 700; }
@media (max-width: 1420px){
.wpl-keurraster { grid-template-columns: minmax(0, 1fr); }
}
.wpl-standaardknop { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wpl-kenmerkrijen { display: flex; flex-direction: column; margin: 0; padding: 6px 0; }
.wpl-kenmerkrij { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 18px; min-width: 0; }
.wpl-kenmerkrij dt { color: var(--sub); font-size: 14.5px; min-width: 0; }
.wpl-kenmerkrij dd { margin: 0; font-size: 14.5px; font-weight: 550; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
.wpl-kenmerkgeheim { display: inline-flex; align-items: center; gap: 5px; color: var(--chip-blue-ink); }
.wpl-kenmerkgeheim .wpm-icoon { width: 15px; height: 15px; flex: none; align-self: center; }
.wpl-puntknoppen { display: inline-flex; flex-wrap: wrap; gap: 0 14px; align-self: flex-start; margin: 0 0 -6px; }
.wpl-puntknoppen .wpl-bijlageknop { margin: 0; }
.wpl-controle-advies { color: var(--chip-orange-ink); }
@media (max-width: 560px){
.dlg-voet:has(.wpl-naar-klant) { flex-wrap: wrap; }
.dlg-voet:has(.wpl-naar-klant) > button { flex: 1 1 0; }
.dlg-voet:has(.wpl-naar-klant) > button.wpl-naar-klant { flex-basis: 100%; }
}
.wpl-scan-gelezen { display: flex; align-items: center; gap: 6px; margin: 0 4px; color: var(--chip-green-ink); font-size: 14px; font-weight: 550; }
.wpl-scan-gelezen .wpm-icoon { width: 16px; height: 16px; }
.wpm-scanknoppen .wpl-scan-open, .wpm-scanknoppen form { flex: 1 1 100%; }
.wpm-scanknoppen > a.ghost { flex: 1 1 0; }
.wpm-scanknoppen a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.wpm-scanknoppen a .wpm-icoon { width: 17px; height: 17px; }
.wpl-scan-uitleg { margin: 0 4px; color: var(--sub); font-size: 13.5px; line-height: 1.5; }
.wpl-nummerveld { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wpl-nummerveld .wps-invoer { flex: 1 1 auto; min-width: 0; }
.wpl-scanknop { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.wpl-scanknop[hidden] { display: none; }
.wpl-scanknop .wpm-icoon { width: 16px; height: 16px; }
.wpl-imei-geldig { display: inline-flex; align-items: center; gap: 3px; flex: none; color: var(--chip-green-ink); font-size: 13px; font-weight: 550; }
.wpl-imei-geldig[hidden] { display: none; }
.wps-invoer:has(> .wpl-imei-geldig) { position: relative; }
.wps-invoer > .wpl-imei-geldig { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.wps-invoer:has(> .wpl-imei-geldig:not([hidden])) > input { padding-right: 74px; }
@media (max-width: 520px){
.wpl-scanknop { padding: 0 10px; }
.wpl-scanknop-tekst { display: none; }
}
.wpl-imei-geldig .wpm-icoon { width: 14px; height: 14px; }
.wpl-imei-stand.wpl-imei-goed { color: var(--chip-green-ink); }
.wpl-imei-stand.wpl-imei-fout { color: var(--chip-red-ink); }
@media (min-width: 901px){
.wpl-velden.drie > .wpl-nummer-breed { grid-column: span 2; }
}
.wpl-scanvenster { width: min(480px, calc(100vw - 32px)); }
.wpl-kwaliteitveld[hidden], .wpl-kwaliteitveld select[hidden], .wpl-kwaliteitkaarten[hidden] { display: none; }
.wpl-kwaliteitkaart { align-items: center; }
.wpl-kwaliteitkaart > span:first-of-type { flex: 1 1 auto; min-width: 0; }
.wpl-kwaliteitprijs { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.wpl-online { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 18px 28px; align-items: start; }
.wpl-online-foto, .wpl-online-rechts, .wpl-online-blok { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wpl-online-rechts { gap: 20px; }
.wpl-online-foto .field { margin: 6px 0 0; }
.wpl-soortfoto { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.wpl-soortfoto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wpl-soortfoto-leeg { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.wpl-soortfoto-leeg .wpm-icoon { width: 28px; height: 28px; }
.wpl-online-knoppen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wpl-fotokeuze { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.wpl-fotokeuze .wpm-icoon { width: 16px; height: 16px; }
.wpl-fotokeuze-bestand { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.wpl-fotokeuze:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.wpl-minitegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.wpl-minitegel { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; text-align: center; font-size: 13px; min-width: 0; }
.wpl-minitegel.aan { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.wpl-minitegel b { overflow-wrap: anywhere; }
.wpl-minifoto { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; color: var(--muted); }
.wpl-minifoto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wpl-schakelvakken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wpl-schakelvakken .wpl-schakelvak { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
@media (max-width: 1100px){
.wpl-schakelvakken { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px){
.wpl-online { grid-template-columns: minmax(0, 1fr); }
}
.wpl-k-tegels.wpl-k-tegels-foto { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.wpl-k-tegel .wpl-k-tegelfoto { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; margin-bottom: 8px; border-radius: 8px; background: #f6f7f9; color: #9aa1ad; overflow: hidden; }
.wpl-k-tegelfoto:has(img) { background: #fff; }
.wpl-k-tegelfoto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wpl-k-tegelfoto .wpm-icoon { width: 26px; height: 26px; }
.wpl-kaartje-soort { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpl-kaartje-nummer { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpl-kaartje-werkwijze { display: inline-flex; align-items: center; gap: 5px; color: var(--sub); font-size: 12.5px; min-width: 0; }
.wpl-kaartje-werkwijze .wpm-icoon, .wpl-kaartje-betaler .wpm-icoon, .wpl-legenda-teken .wpm-icoon { width: 14px; height: 14px; flex: none; }
.wpl-kaartje-werkwijze > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpl-kaartje-betaler { display: inline-flex; align-items: center; color: var(--sub); }
.wpl-soortfilter { position: relative; }
.wpl-soortfilter > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; line-height: 32px; }
.wpl-soortfilter > summary::-webkit-details-marker { display: none; }
.wpl-soortfilter > summary::after { content: ""; width: 6px; height: 6px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.wpl-soortfilter[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.wpl-soortfilter-aan { border-color: var(--ink); }
.wpl-soortmenu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 280px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 20, 28, .16); }
.wpl-filterrij .wpl-soortmenu input[type=search] { flex: none; width: 100%; min-width: 0; }
.wpl-soortlijst { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.wpl-soortrij { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 8px; font-size: 13.5px; cursor: pointer; }
.wpl-soortrij[hidden] { display: none; }
.wpl-soortrij:hover { background: var(--wash2); }
.wpl-soortnaam { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpl-soorttel { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.wpl-soortmeer { align-self: flex-start; padding: 2px 6px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
.wpl-soortmeer[hidden] { display: none; }
.wpl-soortmeer:hover { color: var(--ink); }
.wpl-soortvoet { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
@media (max-width: 640px){
.wpl-soortmenu { position: fixed; left: 16px; right: 16px; top: auto; width: auto; max-width: none; }
}
#wps-verklaringen .wps-als { flex-wrap: wrap; }
#wps-verklaringen .wps-als select { flex: 1 1 130px; }
#wps-verklaringen .wps-als input { flex: 1 1 100px; min-width: 0; }
.wpl-k-lead { margin: 0 0 14px; max-width: 760px; color: var(--nova-gedempt, #5b6270); font-size: 14.5px; line-height: 1.55; }
.wpl-k-toevoegen { display: inline-flex; align-items: center; gap: 8px; }
.wpl-k-toevoegen .wpm-icoon { width: 16px; height: 16px; flex: none; }
.wpl-k-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 16px; }
.wpl-k-zoek { position: relative; display: flex; flex: 0 1 320px; min-width: 0; }
.wpl-k-zoek input[type=search] { width: 100%; min-width: 0; padding-right: 40px; }
.wpl-k-zoekknop { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--nova-gedempt, #5b6270); cursor: pointer; }
.wpl-k-zoekknop .wpm-icoon { width: 18px; height: 18px; }
.wpl-k-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wpl-k-chip { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--nova-lijn, #e5e7ec); border-radius: var(--nova-r-klein, 8px); background: #fff; color: var(--nova-inkt, #151821); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.wpl-k-chip:hover { border-color: var(--nova-inkt, #151821); }
.wpl-k-chip.aan { border-color: var(--nova-inkt, #151821); background: var(--nova-inkt, #151821); color: #fff; }
.wpl-k-dingen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 16px; }
.wpl-k-dingen + .klant-h2 { margin-top: 24px; }
.wpl-k-ding { display: flex; gap: 16px; min-width: 0; padding: 20px; border: 1px solid var(--nova-lijn, #e5e7ec); border-radius: var(--nova-r-kaart, 10px); background: #fff; }
.wpl-k-dingfoto { display: flex; flex: none; align-items: center; justify-content: center; width: 104px; height: 104px; overflow: hidden; border-radius: var(--nova-r-klein, 8px); background: var(--nova-vlak, #f6f7f9); color: #9aa1ad; }
.wpl-k-dingfoto img { width: 100%; height: 100%; object-fit: contain; }
.wpl-k-dingfoto .wpm-icoon { width: 36px; height: 36px; }
.wpl-k-dingtekst { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; }
.wpl-k-dingnaam { color: var(--nova-inkt, #151821); font-size: 16.5px; font-weight: 700; line-height: 1.3; text-decoration: none; }
.wpl-k-dingnaam:hover { text-decoration: underline; }
.wpl-k-dingnummer { color: var(--nova-gedempt, #5b6270); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; letter-spacing: .02em; overflow-wrap: anywhere; }
.wpl-k-dingregels { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.45; }
.wpl-k-dingregels li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.wpl-k-dingregels li > span:last-child, .wpl-k-dingregels li > a { min-width: 0; overflow-wrap: anywhere; }
.wpl-k-dingregels .wpm-icoon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--nova-accent, #d9731a); }
.wpl-k-dingregels a { color: inherit; text-decoration: underline; text-decoration-color: var(--nova-lijn, #c9ced6); text-underline-offset: 2px; }
.wpl-k-dingregels a:hover { text-decoration-color: currentColor; }
.wpl-k-dingstand { font-weight: 600; }
.wpl-k-stip { flex: none; width: 8px; height: 8px; margin: 6px 4px 0; border-radius: 50%; background: #9aa1ad; }
.wpl-k-stip-ok { background: #1f8f4e; }
.wpl-k-stip-wacht { background: #d9731a; }
.wpl-k-stip-rood { background: #c62828; }
.wpl-k-dingknoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; }
.wpl-k-dingknoppen a.klant-knop { display: inline-flex; flex: 1 0 auto; align-items: center; justify-content: center; gap: 8px; }
.wpl-k-dingknoppen .wpm-icoon { flex: none; width: 16px; height: 16px; }
.wpl-k-dingen-oud .wpl-k-ding { background: var(--nova-vlak, #f6f7f9); }
.wpl-k-noot { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding: 12px 14px; border-radius: var(--nova-r-klein, 8px); background: var(--nova-vlak, #f6f7f9); color: var(--nova-inkt, #151821); font-size: 13.5px; line-height: 1.5; }
.wpl-k-noot .wpm-icoon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--nova-accent, #d9731a); }
.wpl-k-nieuwvraag { margin: 6px 0 10px; color: var(--nova-inkt, #151821); font-size: 15px; font-weight: 700; }
#klant-nieuw-form { margin-top: 16px; }
.wpl-k-delen { display: flex; flex-direction: column; }
.wpl-k-deel { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--nova-lijn, #e5e7ec); color: inherit; text-decoration: none; }
.wpl-k-deel:first-child { padding-top: 0; border-top: 0; }
.wpl-k-deelicoon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: var(--nova-vlak, #f6f7f9); }
.wpl-k-deelicoon .wpm-icoon { width: 18px; height: 18px; }
.wpl-k-deeltekst { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.wpl-k-deeltekst span { color: var(--nova-gedempt, #5b6270); font-size: 13.5px; overflow-wrap: anywhere; }
.wpl-k-deelpijl { flex: none; color: var(--nova-accent, #d9731a); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
@media (max-width: 520px){
.wpl-k-ding { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: minmax(32px, auto) minmax(32px, auto); gap: 0 12px; padding: 14px; }
.wpl-k-dingtekst { display: contents; }
.wpl-k-dingfoto { grid-row: 1 / span 2; width: 64px; height: 64px; }
.wpl-k-dingnaam { grid-column: 2; align-self: end; }
.wpl-k-dingnummer { grid-column: 2; align-self: start; }
.wpl-k-dingregels, .wpl-k-dingknoppen { grid-column: 1 / -1; }
.wpl-k-dingregels { margin-top: 12px; }
.wpl-k-zoek { flex: 1 1 100%; }
}
.wpl-b6-tweeluik { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 14px; align-items: start; }
.wpl-b6-cattabel .wpl-b6-code { width: 64px; text-transform: uppercase; }
.wpl-b6-cattabel .wpl-b6-prijs { width: 92px; text-align: right; }
.wpl-b6-twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wpl-b6-twee input { width: 100%; min-width: 0; }
.wpl-b6-voet { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wpl-b6-voet > span { min-width: 0; }
.wpl-b6-voet > button { flex: none; }
.wpl-b6-verbruik { margin: 10px 0 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.wpl-b6-verbruik table { width: 100%; }
.wpl-b6-strook { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--wash); color: var(--sub); font-size: 13.5px; }
.wpl-b6-strook > svg { flex: none; color: var(--muted); }
.wpl-b6-strook > span { flex: 1; min-width: 0; }
.wpl-b6-strook > a { flex: none; }
.wpl-b6-wietabel .wpl-b6-groep td { background: var(--wash); padding-top: 10px; padding-bottom: 6px; }
.wpl-b6-wietabel .wpl-b6-groep td { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.wpl-b6-wietabel .wpl-b6-groep td > span:last-child { float: right; text-transform: none; letter-spacing: 0; font-weight: 500; }
.wpl-b6-stand, .wpl-b6-akkoord { font-weight: 550; }
.wpl-b6-akkoord.cell-sub { font-weight: 400; }
.wpl-b6-wacht { display: flex; align-items: center; gap: 10px; margin: 12px 18px 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 11%, var(--card)); color: var(--warn); font-size: 13.5px; }
.wpl-b6-wacht > svg { flex: none; }
.wpl-b6-wacht > span { flex: 1; min-width: 0; }
.wpl-b6-wacht > form { flex: none; }
.wpl-b6-totalen { padding: 10px 18px 12px; }
.wpl-b6-totalen .wpl-kv, .wpl-b6-raster2 .wpl-kv, .wpl-b6-baliebudget .wpl-kv { grid-template-columns: minmax(0, 1fr) auto; }
.wpl-b6-totalen .wpl-kv .v, .wpl-b6-raster2 .wpl-kv .v, .wpl-b6-baliebudget .wpl-kv .v { text-align: right; font-variant-numeric: tabular-nums; }
.wpl-b6-raster2 > .card:not(.flush) > .card-head { margin: -18px -20px 12px; padding: 14px 20px; }
.wpl-b6-totaal { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 15px; }
.wpl-b6-vastleggen { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px 14px; border-top: 1px solid var(--line); }
.wpl-b6-vinken { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.wpl-b6-vastrij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wpl-b6-vastrij > input { flex: 1; min-width: 200px; }
.wpl-b6-raster2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.wpl-b6-nogover { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 15px; }
.wpl-b6-balk { height: 6px; margin: 8px 0 4px; border-radius: 3px; background: var(--wash2); overflow: hidden; }
.wpl-b6-balk > i { display: block; height: 100%; border-radius: 3px; background: var(--ink); }
.wpl-b6-drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wpl-b6-partij { display: flex; flex-direction: column; gap: 3px; padding: 14px 18px; min-width: 0; }
.wpl-b6-partij + .wpl-b6-partij { border-left: 1px solid var(--line); }
.wpl-b6-partijnaam { font-weight: 600; font-size: 14.5px; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
a.wpl-b6-partijnaam:hover { text-decoration: underline; }
.wpl-b6-afhankelijk { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 550; }
.wpl-b6-melding { margin: 0 18px 14px; padding: 10px 12px; border-radius: 10px; background: var(--data-wash); color: var(--data); font-size: 13.5px; }
.wpl-b6-rechts { margin-left: auto; }
.wpl-b6-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wpl-b6-kpi { display: flex; flex-direction: column; gap: 4px; padding-left: 14px; border-left: 2px solid var(--line); min-width: 0; }
.wpl-b6-kpi > b { font-size: 24px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wpl-b6-baliebudget-vak { margin-top: 12px; }
.wpl-b6-baliebudget { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.wpl-b6-proef { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; padding: 14px 16px; border-radius: 10px; background: var(--wash); }
.wpl-b6-proeflabel { font-size: 13px; font-weight: 550; }
.wpl-b6-proefwaarde { display: block; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpl-b6-reactievak { display: inline-flex; align-items: center; gap: 6px; }
.wpl-b6-reactievak select { width: auto; }
.wpl-b6-teller { width: 110px; text-align: right; }
.wpl-b6-pakketschakels { padding: 0 18px 14px; }
.wpl-b6-kpis.wpl-b6-kpis4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wpl-b6-omzetbody { padding: 14px 18px 16px; }
.wpl-b6-qrreactie { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 4px; padding: 12px 14px; border-left: 4px solid var(--warn); background: var(--wash2); }
.wpl-b6-qrreactie > span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5b6270; }
.wpl-b6-qrreactie > b { font-size: 32px; line-height: 1.1; letter-spacing: -.02em; }
.wpl-b6-qrreactie > small { font-size: 13px; color: #5b6270; }
.wpl-ronde-prijs > small { display: block; font-size: 11.5px; font-weight: 400; }
@media (max-width: 1100px){
.wpl-b6-tweeluik { grid-template-columns: minmax(0, 1fr); }
.wpl-b6-kpis.wpl-b6-kpis4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px){
.wpl-b6-raster2, .wpl-b6-drie, .wpl-b6-kpis, .wpl-b6-proef { grid-template-columns: minmax(0, 1fr); }
.wpl-b6-partij + .wpl-b6-partij { border-left: 0; border-top: 1px solid var(--line); }
.wpl-b6-twee { grid-template-columns: minmax(0, 1fr); }
.wpl-b6-voet { flex-direction: column; align-items: stretch; }
.wpl-b6-wacht { flex-wrap: wrap; }
}
.wpl-tarief-blad { margin-top: 0; }
.wpl-tarief-sub { display: block; font-weight: 400; }
.wpl-tarief-werksoort-velden { align-items: end; }
.wpl-tarief-werksoort-knop { justify-content: flex-end; }
.wpl-tijdvaktabel td { vertical-align: top; }
.wpl-tijdvak-wanneer { display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
.wpl-tijdvak-naam { width: 140px; }
.wpl-tijdvak-tijden { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wpl-tijdvak-tijd { width: 68px; text-align: center; font-variant-numeric: tabular-nums; }
.wpl-tijdvak-voor { min-width: 150px; }
.wpl-tijdvak-voor summary { cursor: pointer; font-size: 13.5px; list-style: none; }
.wpl-tijdvak-voor summary::-webkit-details-marker { display: none; }
.wpl-tijdvak-voor summary::after { content: "\00a0\25BE"; color: var(--muted); }
.wpl-tijdvak-vinkjes { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.wpl-tijdvak-weg { white-space: nowrap; }
.wpl-tijdvak-nieuw td { background: var(--wash); }
.wpl-tarief-schakel { margin-top: 0; padding: 12px 0; }
.wpl-tarief-schakel + .wpl-tarief-schakel { border-top: 1px solid var(--line); }
.wpl-tarief-factuurzin { display: block; padding: 8px 0 2px; font-size: 14px; }
.wpl-tariefbalk { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 10px; background: var(--wash); font-size: 13.5px; }
.wpl-klokvak-rij .wpl-rij-rechts { font-variant-numeric: tabular-nums; }
@media (max-width: 720px){
.wpl-tijdvak-wanneer { min-width: 0; }
.wpl-tijdvak-naam { width: 100%; }
}
.wpm-storing { border-left: 3px solid var(--chip-orange-dot); }
.wpm-storing.wpm-storing-laat { border-left-color: var(--chip-red-dot, #c0392b); }
.wpm-storing.wpm-storing-terplaatse { border-left-color: var(--chip-green-dot); }
.wpm-termijn { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--wash2); margin-bottom: 8px; }
.wpm-termijn-rij { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.wpm-termijn-kop { display: flex; flex-direction: column; gap: 2px; }
.wpm-termijn-kop span { font-size: 13px; color: var(--sub); font-weight: 600; }
.wpm-termijn-kop b { font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wpm-termijn-rest { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.wpm-termijn-rest b { font-size: 16px; }
.wpm-termijn-rest small { font-size: 12.5px; color: var(--sub); }
.wpm-termijn-balk { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.wpm-termijn-balk i { display: block; height: 100%; background: var(--chip-orange-dot); border-radius: 3px; }
.wpm-storing-laat .wpm-termijn-balk i { background: var(--chip-red-dot, #c0392b); }
.wpm-storing-terplaatse .wpm-termijn-balk i { background: var(--chip-green-dot); }
.wpm-termijn-noot { font-size: 12.5px; color: var(--sub); }
.wpm-storing-melding { margin: 8px 0 4px; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.4; }
.wpm-storing-goed { background: #e8f5ec; color: #1e6b3a; }
.wpm-storing-oranje { background: #fdf4e7; color: #8a5a10; }
.wpm-storing-rood { background: #fbe9e7; color: #a12b1f; }
.wpm-storing-knoppen { margin-top: 10px; }
.wpm-storing-knoppen .btn-primary { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
.wpl-aanhuis-kv { grid-template-columns: minmax(110px, auto) minmax(0, 1fr) minmax(110px, auto) minmax(0, 1fr); }
.wpl-aanhuis-bellen { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.wpl-tijdvak-segment { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.wpl-veldlabel { display: block; font-size: 12px; color: var(--sub); margin-bottom: 4px; }
.wpl-routekaart { padding: 12px 18px 0; }
.wpl-routekaart svg { display: block; width: 100%; height: auto; max-width: 312px; margin: 0 auto; border-radius: 10px; background: var(--wash); }
.wpl-routekaart-route { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 4 3; }
.wpl-routekaart-werk { fill: var(--ink); }
.wpl-routekaart-werktekst { fill: #fff; font-size: 11px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.wpl-routekaart-punt { fill: var(--card); stroke: var(--ink); stroke-width: 1.6; }
.wpl-routekaart-punt.nu { fill: var(--ink); }
.wpl-routekaart-nr { fill: var(--ink); font-size: 11px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.wpl-routekaart-nr.nu { fill: #fff; }
.wpl-route { display: flex; flex-direction: column; padding: 8px 0 4px; }
.wpl-stop { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: flex-start; padding: 8px 18px; font-size: 13.5px; }
.wpl-stop.nu { background: var(--wash); }
.wpl-stop-nr, .wpl-stop-werk { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ink); font-size: 12px; font-weight: 700; margin-top: 1px; }
.wpl-stop.nu .wpl-stop-nr { background: var(--ink); color: #fff; }
.wpl-stop-werk { border-radius: 6px; background: var(--ink); color: #fff; border-color: var(--ink); }
.wpl-stop-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wpl-stop-tekst b { font-variant-numeric: tabular-nums; }
.wpl-stop-tekst span, .wpl-stop-tekst small { overflow-wrap: anywhere; }
.wpl-stop-tekst small { color: var(--sub); }
.wpl-stop-km { color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 720px){
.wpl-aanhuis-kv { grid-template-columns: minmax(110px, auto) minmax(0, 1fr); }
}
.wpl-wachtblok, .wpl-k-wachtblok { display: none; }
#wpl-aanmelden:has(input[name=binnenkomst][value=wacht]:checked) .wpl-wachtblok { display: block; margin-top: 10px; }
form:has(input[name=binnenkomst][value=wacht]:checked) .wpl-k-wachtblok { display: flex; }
.wpl-wacht { display: flex; flex-direction: column; gap: 10px; }
.wpl-wacht-dagkop { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 13.5px; }
.wpl-wacht-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.wpl-wacht-slot { position: relative; display: block; cursor: pointer; }
.wpl-wacht-slot input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wpl-wacht-slot span { display: block; min-width: 56px; padding: 7px 8px; border: 1px solid var(--line, #d9dce2); border-radius: 8px; font-size: 13px; text-align: center; background: var(--card, #fff); font-variant-numeric: tabular-nums; }
.wpl-wacht-slot input:checked + span { border: 2px solid var(--ink, #151821); padding: 6px 7px; font-weight: 650; }
.wpl-wacht-slot input:focus-visible + span { outline: 2px solid var(--ink, #151821); outline-offset: 1px; }
.wpl-wacht-slot.vol span { background: #f1f2f4; color: #9aa0aa; border-color: #f1f2f4; cursor: default; text-decoration: line-through; }
.wpl-weg { display: flex; flex-direction: column; }
.wpl-weg-rij { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 13.5px; }
.wpl-weg-rij:first-child { border-top: 0; }
.wpl-weg-rij.gekozen { background: var(--wash); }
.wpl-weg-icoon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--wash2); color: var(--sub); }
.wpl-weg-icoon svg { width: 18px; height: 18px; }
.wpl-weg-wat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wpl-weg-wat span { overflow-wrap: anywhere; }
.wpl-weg-rechts { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.wpl-weg-stand { font-weight: 600; white-space: nowrap; color: var(--sub); }
.wpl-weg-stand.red { color: #a12b1f; }
.wpl-weg-stand.green { color: #1e6b3a; }
.wpl-weg-stand.blue { color: var(--ink); }
.wpl-weg-stand.orange { color: #8a5a10; }
.wpl-kop-knoppen { display: inline-flex; gap: 6px; margin-left: auto; }
.wpl-label-naar { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; margin-bottom: 12px; }
.wpl-label-naar label { cursor: default; height: auto; min-height: 36px; padding: 6px 10px; text-align: center; white-space: normal; overflow-wrap: anywhere; }
.wpl-stapjes { list-style: none; margin: 0; padding: 8px 18px; display: flex; flex-direction: column; }
.wpl-stapjes li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; font-size: 13.5px; color: var(--sub); }
.wpl-stapjes li i { position: relative; display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); box-sizing: border-box; }
.wpl-stapjes li.klaar { color: var(--ink); }
.wpl-stapjes li.klaar i { border-color: #1e6b3a; background: #1e6b3a; }
.wpl-stapjes li.klaar i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.wpl-stapjes li.nu { color: var(--ink); font-weight: 650; }
.wpl-stapjes li.nu i { border: 4px solid var(--ink); background: var(--card); }
.wpl-stapjes li.nu i::after { content: none; }
.wpl-stapjes li small { color: var(--sub); font-weight: 400; white-space: nowrap; }
.wpl-k-kaart .wpl-stapjes { padding: 4px 0 8px; }
.wpl-adres { display: block; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; background: var(--wash); }
@media (max-width: 720px){
.wpl-weg-rij { grid-template-columns: 32px minmax(0, 1fr); }
.wpl-weg-rechts { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
.wpl-stapjes li small { white-space: normal; }
.wpl-kop-knoppen { flex-wrap: wrap; }
}
.wpm-rondestrook { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--wash2); font-size: 13.5px; }
.wpm-rondestrook a:first-child { color: var(--ink); text-decoration: none; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.wpm-kopsub { margin: -6px 0 4px; text-align: center; }
.wpl-ronde-tellers { display: flex; flex-direction: column; }
.wpl-ronde-tellerrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.wpl-ronde-tellerrij:first-child { border-top: 0; }
.wpl-ronde-tellerwat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wpl-ronde-tellerveld { display: flex; align-items: center; gap: 6px; }
.wpl-ronde-tellerveld input { width: 110px; text-align: right; font-size: 18px; font-variant-numeric: tabular-nums; }
a.wpl-ronde-telknop { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.wpl-klachtbeeld { display: flex; flex-direction: column; gap: 8px; padding: 0 18px 14px; }
.wpl-duimen-klein { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0; }
.wpl-duimen-klein .wpm-duim { position: relative; }
.wpl-duimen-klein video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wpl-duim-film { position: absolute; right: 5px; bottom: 5px; padding: 1px 6px; border-radius: 6px; background: rgba(20, 20, 30, .78); color: #fff; font-size: 11px; }
.wpl-klachtnoot { margin: 0; line-height: 1.45; }
.wpl-meerwerk-velden .field:last-child input { text-align: left; }
.wpl-meerwerk-foto { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; }
.wpl-meerwerk-foto .wpm-fototegel { aspect-ratio: 1; width: 96px; }
.wpl-fotonaam { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13.5px; }
.wpl-fotonaam .wpl-bijlage-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpl-fotonaam small { color: var(--muted); }
.wpl-k-stempel.meerwerk { background: #fff4e5; color: #8a5200; }
.wpl-collegas-hint { margin: -6px 0 0; }
.wpl-scan-al { display: flex; align-items: center; gap: 8px; margin: 10px 18px 0; padding: 9px 12px; border-radius: 8px; background: var(--wash); font-size: 13.5px; font-weight: 550; }
.wpl-scan-al .wpm-icoon { width: 16px; height: 16px; flex: none; color: var(--sub); }
.wpl-scan-uitlegtekst { margin: -6px 18px 14px; line-height: 1.45; }
.wpl-scan-alrij { justify-content: space-between; align-items: center; gap: 10px; }
.wpl-scan-alrij .wpm-standwoord { flex: none; }
.wpl-voorraadregel { margin: 6px 0 0; }
.wpl-teller-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wpl-teller { display: flex; align-items: center; gap: 8px; }
.wpl-teller button { width: 42px; height: 42px; padding: 0; font-size: 20px; line-height: 1; border-radius: 9px; }
.wpl-teller input[type=number] { width: 64px; height: 42px; text-align: center; font-size: 17px; font-weight: 600; -moz-appearance: textfield; appearance: textfield; }
.wpl-teller input[type=number]::-webkit-outer-spin-button, .wpl-teller input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dlg .velden2.wpl-meerwerk-velden { grid-template-columns: minmax(0, 1fr) 120px; }
.dlg-body.wpm-tegels { display: flex; flex-direction: column; gap: 10px; }
.dlg-body.wpm-tegels .wpl-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.dlg-body.wpm-tegels .wpl-tegel b, .dlg-body.wpm-tegels .wpl-tegel .cell-sub { white-space: normal; overflow-wrap: anywhere; }
.dlg .velden2.wpl-overdragen-velden { grid-template-columns: minmax(0, 1fr) 110px; }
.wpl-plan-niet { font-size: 11.5px; color: var(--neg); line-height: 1.3; }
.wpl-plan-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 2px 0; font-size: 12.5px; color: var(--sub); }
.wpl-plan-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.wpl-plan-stip { width: 10px; height: 10px; border-radius: 50%; background: #7a8699; display: inline-block; flex: none; }
.wpl-plan-stip.reparatie { background: #1f3a68; }
.wpl-plan-stip.keuring { background: #2e7d4f; }
.wpl-plan-stip.installatie { background: #d9822b; }
.wpl-plan-stip.garantie { background: #8e44ad; }
.wpl-plan-naam.wpl-plan-nietbevoegd::after { content: none; }
.wpl-redenen { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.wpl-redenen th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); font-weight: 600; padding: 10px 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wpl-redenen td { padding: 8px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.wpl-redenen .wpl-redenen-greep { width: 28px; padding-right: 0; color: var(--muted); cursor: grab; }
.wpl-redenen .wpl-redenen-wat { display: flex; flex-direction: column; gap: 4px; }
.wpl-redenen .wpl-redenen-wat input { width: 100%; box-sizing: border-box; }
.wpl-redenen .wpl-redenen-uitleg { font-size: 12.5px; }
.wpl-redenen .wpl-redenen-fact { width: 110px; text-align: right; }
.wpl-redenen .wpl-redenen-weg { width: 44px; text-align: right; }
.wpl-redenen tr.sleept { opacity: .5; }
.wpl-redenen tr.boven td { border-top: 2px solid var(--ink); }
.wpl-redenen-noot { margin: 0; padding: 12px 14px 0; line-height: 1.45; }
.wpl-redenen-knoprij { padding: 12px 14px 14px; }
@media (max-width: 760px){
.wpl-redenen th.wpl-redenen-fact, .wpl-redenen td.wpl-redenen-fact { display: none; }
}
.wpl-fototegel-kop { padding: 0 2px; }
.wpl-regel-duim { float: right; display: block; width: 32px; height: 32px; margin: 0 0 4px 8px; border-radius: 6px; overflow: hidden; background: var(--wash2); }
.wpl-regel-duim img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wpl-film-melding { display: block; flex-basis: 100%; font-size: 13px; color: var(--neg); }
.wpm-duim video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wpm-film-melding { grid-column: 1 / -1; font-size: 13px; color: var(--neg); }
.wpl-marge { display: block; font-size: 13px; margin-top: 4px; }
.wpl-meegaat { border-top: 1px solid var(--line); }
.wpl-meegaat .wpl-kv { margin-top: 6px; }
.dlg-voet > .wpl-venster-noot { margin-right: auto; align-self: center; }
@media (max-width: 640px){
.dlg-voet > .wpl-venster-noot { display: none; }
}
.wpl-kaartknop { margin-left: auto; }
.wpl-verkopen-kaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 12px 0; }
.wpl-verkopen-kaarten > .card { min-width: 0; }
.wpl-bulk-soortvb { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.wpl-bulk-soortvb .eyebrow { margin-bottom: 6px; }
.wpl-bulk-soortkeuze { margin-bottom: 12px; }
.wpl-bulk-soortkeuze .wpl-keuze b > span { display: inline; }
@media (max-width: 720px){
.wpl-verkopen-kaarten { grid-template-columns: 1fr; }
}
.sluis-oranje { color: var(--warn); font-weight: 600; }
.sluis-rapporten { padding: 12px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.sluis-rapporten .kv-lijst { padding: 0; }
.sluis-rapporten-upload { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sluis-rapporten-bestand { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; }
.sluis-rapporten-bestand small { color: var(--sub); }
.sluis-rapporten-bestand .ghost { margin-left: auto; }
.sluis-rapporten .table-scroll { margin: 0 -18px; }
.sluis-rapporttabel select { max-width: 260px; }
.wpl-k-blad:has(.wpl-k-twee) { max-width: 980px; }
.wpl-k-twee { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.wpl-k-twee:has(.wpl-k-zij) { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.wpl-k-zij h2 { margin-top: 0; }
.wpl-k-punten { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.wpl-ronde-valideren { padding-top: 4px; padding-bottom: 8px; border-top: 0; margin-top: -4px; font-size: 13px; }
.wpl-ronde-valideren input { margin-left: 22px; }
@media (max-width: 899px){
.wpl-k-twee:has(.wpl-k-zij) { grid-template-columns: minmax(0, 1fr); }
}
.wpl-scanbalk { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: #e6f4ea; color: #1e7a46; font-size: 13.5px; font-weight: 600; }
.wpl-k-po-fout { margin: 4px 0 10px; font-size: 14px; }
.wpl-k-po-machine h2 { margin-bottom: 2px; }
#wpl-ronde-opgave .wpl-kv { padding: 8px 18px 0; }
#wpl-ronde-opgave > .cell-sub { padding: 8px 18px; margin: 0; display: block; }
#wpl-ronde-opgave .wpl-ronde-knoppen { padding: 0 18px 14px; }
.site-reken-keuzes { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 10px; background: rgba(255,255,255,.08); }
.site-reken:not(.kort) .site-reken-keuzes { background: var(--wash); }
.site-reken-keuze { border: 0; background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 600; padding: 9px 14px; border-radius: 8px; cursor: pointer; opacity: .8; }
.site-reken-keuze.aan { background: #fff; color: var(--winkel-tekst, #1e2450); opacity: 1; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.site-reken-keuze:focus-visible { outline: 2px solid var(--winkel-accent); outline-offset: 2px; }
.site-reken-regel.is-stuks { grid-template-columns: 1fr auto auto; }
.site-reken-regel.is-stuks .site-reken-regel-tekst { color: inherit; text-decoration: none; }
.site-reken-regel-aantal { font-variant-numeric: tabular-nums; }
.site-reken-regel-best { font-style: normal; display: inline-block; background: var(--winkel-accent); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.site-reken-regel-best[hidden] { display: none; }
.site-reken-regel-per { font-style: normal; font-weight: 600; color: var(--winkel-accent); }
.site-reken-regel-vorm { margin: 0; }
.site-reken-regel-prijs [data-reken-totaal] { font-variant-numeric: tabular-nums; }
.site-reken-som { margin: 0 0 6px; font-size: 14px; }
.site-reken-som b { font-weight: 800; }
@media (max-width: 600px){
.site-reken-regel.is-stuks { grid-template-columns: 1fr auto; }
.site-reken-regel.is-stuks .site-reken-regel-vorm { grid-column: 1 / -1; }
.site-reken-regel.is-stuks .site-reken-regel-knop { width: 100%; justify-content: center; }
}
.winkel .site-gegevenskaarten.gegevens-cijfers .site-gegevenskaart { display: flex; flex-direction: column; gap: 6px; }
.winkel .site-gegevenskaarten.gegevens-cijfers .site-gegevenswaarde { order: -1; font-size: 38px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--winkel-accent); font-variant-numeric: tabular-nums; }
.winkel .site-gegevenskaarten.gegevens-cijfers .site-gegevenskop { font-size: 14.5px; font-weight: 500; color: var(--nova-gedempt, var(--muted)); line-height: 1.4; }
@media (max-width: 600px){
.winkel .site-gegevenskaarten.gegevens-cijfers .site-gegevenswaarde { font-size: 30px; }
}
.site-blok.opm-vlak-donker { background: var(--winkel-tekst, #1e2450); color: #fff; }
.site-blok.opm-vlak-donker h1, .site-blok.opm-vlak-donker h2, .site-blok.opm-vlak-donker h3, .site-blok.opm-vlak-donker b { color: #fff; }
.site-blok.opm-vlak-donker p, .site-blok.opm-vlak-donker li, .site-blok.opm-vlak-donker small { color: rgba(255,255,255,.78); }
.site-blok.opm-vlak-donker > section { padding-block: 34px; }
.site-reken-tijdvakken { margin-top: 8px; }
.site-reken-uitsplitsing { display: block; margin-top: 6px; font-size: 14px; color: rgba(255,255,255,.75); }
.site-reken:not(.kort) .site-reken-uitsplitsing { color: var(--muted); }
.ai-taken td b { font-weight: 500; }
.aiv-merk { font-size: 11.5px; }
.aiv-antwoord { border: 1px solid color-mix(in srgb, var(--chip-blue-dot) 30%, var(--line)); border-radius: 10px; overflow: hidden; background: var(--card); }
.aiv-antwoord-kop { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: var(--chip-blue-bg); color: var(--chip-blue-ink); font-size: 12.5px; }
.aiv-antwoord-kop .cell-sub { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiv-antwoord-tekst { padding: 10px 12px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; max-height: 160px; overflow-y: auto; }
.aiv-antwoord-bron { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 10px; }
.aiv-antwoord-bron span { height: 22px; padding: 0 8px; border-radius: 6px; background: var(--wash); color: var(--sub); font-size: 11.5px; display: inline-flex; align-items: center; white-space: nowrap; }
.aiv-antwoord-voet { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); }
.aiv-strook-kop { display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: var(--chip-blue-bg); color: var(--chip-blue-ink); font-size: 13px; flex-wrap: wrap; }
.aiv-strook-kop .aiv-strook-bron { color: var(--chip-blue-ink); opacity: .85; min-width: 0; }
.aiv-strook-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.aiv-gelezen summary { cursor: pointer; font-size: 12.5px; color: var(--sub); }
.aiv-gelezen ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--sub); }
.vs-vulin { background: var(--chip-orange-bg); color: var(--chip-orange-ink); font-weight: 600; border-radius: 4px; padding: 0 3px; }
.vs-voorgesteld { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--chip-blue-ink); }
.of-postvak { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 10px;
background: color-mix(in srgb, var(--chip-blue-bg) 55%, var(--card)); border: 1px solid color-mix(in srgb, var(--chip-blue-dot) 25%, var(--line)); }
.of-postvak-kop { display: flex; align-items: center; gap: 8px; color: var(--chip-blue-ink); }
.of-postvak-kop .r { margin-left: auto; }
.kum-rijen { display: flex; flex-direction: column; padding: 4px 18px 6px; }
.kum-rijen .kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 5px 0; font-size: 13.5px; border-top: 1px solid var(--line); }
.kum-rijen .kv:first-child { border-top: 0; }
.kum-rijen .k { color: var(--muted); }
.kum-rijen .v { min-width: 0; overflow-wrap: anywhere; }
.kum-voet { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 9px 18px 12px; border-top: 1px solid var(--line); white-space: normal; }
.kum-voet a { margin-left: auto; }
.kan-rij { display: flex; align-items: baseline; gap: 10px; padding: 7px 18px; font-size: 13.5px; border-top: 1px solid var(--line); }
.card-head + .kan-rij { border-top: 0; }
.kan-hun { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.kan-ons { flex: none; font-variant-numeric: tabular-nums; }
.bk-of-ki .kv .k { width: auto; flex: 1 1 auto; }
.bk-of-ki .kv .v { flex: none; white-space: nowrap; }
.art-ai-vraag { gap: 6px; }
.adub-art { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.adub-letter { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--wash); color: var(--sub); font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.adub-art-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.adub-art-tekst a { color: inherit; text-decoration: none; }
.adub-art-tekst a:hover { text-decoration: underline; }
.adub-cijfers { font-variant-numeric: tabular-nums; }
.dash-uitleg { position: absolute; top: 8px; right: 10px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 11px; font-weight: 600; display: grid; place-items: center; text-decoration: none; line-height: 1; }
.dash-uitleg:hover { color: var(--ink); border-color: var(--axis); }
.ai-opvolging { margin-bottom: 14px; }
.ai-opvolging .card-head { flex-wrap: wrap; gap: 8px; }
.advg-lijst > .advg-regel + .advg-regel { border-top: 1px solid var(--line); }
.advg-regel { display: flex; align-items: center; gap: 12px; padding: 10px 18px; min-height: 58px; font-size: 13.5px; }
.advg-tekst { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.advg-tekst b { font-weight: 600; overflow-wrap: anywhere; }
.advg-tekst small { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.advg-rechts { flex: none; margin-left: auto; }
.advg-kop { padding: 12px 18px 6px; border-top: 1px solid var(--line); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.advg-kop + .advg-lijst { border-top: 1px solid var(--line); }
.advg-voet { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); }
@media (max-width: 560px){
.advg-regel, .advg-voet { flex-wrap: wrap; }
}
#adv-versturen .kpis { border-bottom: 1px solid var(--line); }
.advg-rij { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; align-items: start; }
.advg-rij-gelijk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.advg-teksten { gap: 0; margin-bottom: 0; align-items: stretch; }
.advg-teksten > div + div { border-left: 1px solid var(--line); }
@media (max-width: 1100px){
.advg-teksten > div + div { border-left: 0; border-top: 1px solid var(--line); }
}
.advg-grafiek-vak { padding: 8px 18px 14px; }
.advg-grafiek { display: block; width: 100%; height: auto; }
.advg-raster { stroke: var(--grid); stroke-width: 1; }
.advg-as { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.advg-staaf { fill: var(--data-wash); stroke: var(--data); stroke-width: .6; }
.advg-lijn { fill: none; stroke: var(--pos); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.advg-aandacht { align-items: flex-start; }
@media (max-width: 1100px){
.advg-rij { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px){
.advg-grafiek-vak { padding: 8px 8px 12px; }
}
.advg-tabel { min-width: 760px; }
@media (max-width: 760px){
.advg-grafiek-vak { overflow-x: auto; }
.advg-grafiek { min-width: 640px; }
}
.advg-tabel td:first-child { min-width: 240px; }
.advg-merchant-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; border-top: 1px solid var(--line); }
.advg-merchant-kpis .kpi + .kpi { border-left: 1px solid var(--line); }
.advg-tekst small.neg { color: var(--neg); }
.advg-tekst small.pos { color: var(--pos); }
@media (max-width: 560px){
.advg-aandacht .advg-tekst { flex-basis: calc(100% - 20px); }
.advg-aandacht > .advg-rechts { margin-left: 20px; }
.advg-aandacht:not(:has(> .advg-stip, > .chip)) .advg-tekst { flex-basis: 100%; }
.advg-aandacht:not(:has(> .advg-stip, > .chip)) > .advg-rechts { margin-left: 0; }
}
body:has(> .wv) { overflow: hidden; }
.wv { position: fixed; inset: 0; display: grid; grid-template-rows: 56px minmax(0, 1fr); background: var(--bg); color: var(--ink); z-index: 1; }
.wv *, .wv *::before, .wv *::after { box-sizing: border-box; }
.wv svg { display: block; flex: none; }
.wv [hidden] { display: none !important; }
.wv-knop { height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: inline-flex; align-items: center; gap: 7px; font-weight: 550; font-size: 13.5px; white-space: nowrap; cursor: pointer; text-decoration: none; box-shadow: var(--shadow); }
.wv-knop:hover { background: var(--wash2); }
.wv-knop.wv-stil { border-color: transparent; background: transparent; box-shadow: none; color: var(--sub); }
.wv-knop.wv-stil:hover { background: var(--wash); color: var(--ink); }
.wv-knop.wv-ico { width: 36px; padding: 0; justify-content: center; }
.wv-uitleg { font-size: 12.5px; color: var(--muted); line-height: 1.45; padding: 0 4px; margin: 0; }
.wv-rij { min-height: 44px; border-radius: 9px; display: grid; grid-template-columns: 18px 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 6px; cursor: pointer; border: 1px solid transparent; background: transparent; text-align: left; width: 100%; color: var(--ink); text-decoration: none; font: inherit; }
.wv-rij:hover { background: var(--wash2); }
.wv-greep { color: var(--muted); opacity: .6; cursor: grab; display: grid; place-items: center; }
.wv-rij-pagina .wv-greep, .wv-site .wv-greep { cursor: default; }
.wv-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--wash); display: grid; place-items: center; color: var(--sub); flex: none; }
.wv-naam { min-width: 0; display: flex; flex-direction: column; }
.wv-naam b { display: block; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wv-naam small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wv-oog { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: var(--muted); border: 0; background: transparent; cursor: pointer; opacity: 0; }
.wv-rij:hover .wv-oog, .wv-rij:focus-within .wv-oog, .wv-rij.wv-verborgen .wv-oog { opacity: 1; }
.wv-oog:hover { background: var(--wash); color: var(--ink); }
.wv-rij.aan { background: var(--wash); border-color: var(--line); }
.wv-rij.aan .wv-ic { background: var(--btn-bg); color: var(--btn-ink); }
.wv-rij.aan .wv-naam b { font-weight: 650; }
.wv-rij.wv-verborgen .wv-naam, .wv-rij.wv-verborgen .wv-ic { opacity: .5; }
.wv-rij.wv-onbekend .wv-naam b { color: var(--warn); }
.wv-site .wv-ic { background: transparent; border: 1px dashed var(--axis); }
.wv-rij-buiten { color: var(--muted); padding-right: 4px; }
.wv-rij.wv-sleept { opacity: .35; }
.wv-venster { position: absolute; left: 0; top: 0; border: 0; background: #fff; transform-origin: 0 0; border-radius: 10px 10px 0 0; box-shadow: 0 0 0 1px rgba(16, 24, 40, .06), 0 12px 32px -14px rgba(16, 24, 40, .35); }
.wv-fout { margin: 12px 20px 0; display: flex; gap: 8px; align-items: center; justify-content: space-between; background: var(--chip-red-bg); color: var(--chip-red-ink); border-radius: 10px; padding: 6px 6px 6px 12px; font-size: 13px; flex: none; }
.wv-blok { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.wv-rkop { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px; flex: none; min-width: 0; }
.wv-rkop .wv-naam { flex: 1; }
.wv-rkop .wv-naam b { font-size: 15px; font-weight: 650; }
.wv-rkop .wv-naam small { display: flex; align-items: center; gap: 6px; }
.wv-rkop code { font-size: 11px; color: var(--muted); background: var(--wash); border-radius: 4px; padding: 1px 5px; overflow: hidden; text-overflow: ellipsis; }
.wv-ic-groot { width: 36px; height: 36px; border-radius: 9px; background: var(--btn-bg); color: var(--btn-ink); }
.wv-itabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; margin: 0 16px 4px; height: 36px; border-radius: 9px; background: var(--wash); padding: 3px; flex: none; }
.wv-itabs > button { border: 0; background: transparent; border-radius: 7px; font-size: 13px; font-weight: 550; color: var(--sub); cursor: pointer; }
.wv-itabs > button.aan { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.wv-rscroll { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.wv-ivak { display: flex; flex-direction: column; gap: 14px; }
.wv-veld { display: flex; flex-direction: column; gap: 6px; }
.wv-label { font-size: 12.5px; font-weight: 550; color: var(--sub); }
.wv-veld .seg { align-self: flex-start; max-width: 100%; flex-wrap: wrap; }
.wv-rvoet { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); flex: none; }
.wv-rvoet .wv-knop { justify-content: center; padding: 0 8px; gap: 6px; min-width: 0; }
.wv-gevaar { color: var(--neg) !important; }
.wv-flits { animation: wv-flits .9s; }
@keyframes wv-flits { 0% { box-shadow: 0 0 0 3px var(--data-wash); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 900px){
.wv { grid-template-rows: auto minmax(0, 1fr); }
}
.wv-oog-aan, .wv-oog-uit { display: grid; place-items: center; }
.wv-oog-uit, .wv-verborgen .wv-oog-aan { display: none; }
.wv-verborgen .wv-oog-uit { display: grid; }
.wv-venster.wv-achter { visibility: hidden; pointer-events: none; }
.wv-vormen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wv-vorm-optie { position: relative; display: flex; align-items: center; min-height: 40px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); padding: 8px 10px; cursor: pointer; font-size: 12.5px; line-height: 1.3; color: var(--sub); }
.wv-vorm-optie:hover { border-color: var(--axis); }
.wv-vorm-optie input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wv-vorm-optie:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); color: var(--ink); font-weight: 600; }
.wv-vorm-optie:has(input:focus-visible) { outline: 2px solid var(--data); outline-offset: 2px; }
.wv-bewaard { font-size: 12.5px; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.wv-bewaard.wv-bezig { color: var(--sub); }
.wv-bewaard.wv-mis { color: var(--neg); }
.wv-chipknop { border: 0; cursor: pointer; font: inherit; font-size: 12px; }
.wv-chipknop:hover { filter: brightness(.97); }
.wv-knop:disabled { opacity: .35; cursor: default; background: transparent; }
.wv-verschil-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.wv-verschil-knop { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: center; width: 100%; border: 0; background: transparent; border-radius: 8px; padding: 5px 6px; text-align: left; font: inherit; color: var(--ink); }
button.wv-verschil-knop { cursor: pointer; }
button.wv-verschil-knop:hover { background: var(--wash2); }
.wv-verschil-ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--chip-orange-bg); color: var(--chip-orange-ink); }
.wv-verschil-erbij .wv-verschil-ic { background: var(--chip-green-bg); color: var(--chip-green-ink); }
.wv-verschil-weg .wv-verschil-ic { background: var(--chip-red-bg); color: var(--chip-red-ink); }
.wv-verschil-verplaatst .wv-verschil-ic { background: var(--chip-blue-bg); color: var(--chip-blue-ink); }
.wv-verschil .wv-naam small { white-space: normal; }
.wv-fout .wv-knop { height: 28px; }
.wv-alleen { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; background: var(--chip-gray-bg); color: var(--chip-gray-ink); font-size: 10.5px; font-weight: 650; letter-spacing: .02em; white-space: nowrap; vertical-align: middle; margin-left: 4px; }
.wv-stijlnoot { margin: 0; padding: 8px 10px; border-radius: 9px; background: var(--chip-orange-bg); color: var(--chip-orange-ink); font-size: 12.5px; line-height: 1.45; }
.wv-nietvelden { border: 1px dashed var(--axis); border-radius: 10px; padding: 0 12px; }
.wv-nietvelden > summary { cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 600; color: var(--sub); padding: 9px 0; display: flex; align-items: center; gap: 6px; }
.wv-nietvelden > summary::-webkit-details-marker { display: none; }
.wv-nietvelden > summary::before { content: "›"; color: var(--muted); transition: transform .15s; }
.wv-nietvelden[open] > summary::before { transform: rotate(90deg); }
.wv-nietvelden[open] { padding-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.wv-nietveld { display: flex; flex-direction: column; gap: 4px; }
.wv-nietveld > .wv-alleen { align-self: flex-start; margin-left: 0; }
.wv-kaart { border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; text-align: left; padding: 0; font: inherit; color: var(--ink); width: 100%; }
.wv-kaart:hover { border-color: var(--axis); box-shadow: 0 6px 18px -10px rgba(16, 24, 40, .35); }
.wv-kaart .wv-naam { padding: 9px 11px 10px; }
.wv-kaart .wv-naam b { font-weight: 600; }
.wv-kaart .wv-naam small { white-space: normal; line-height: 1.35; }
.wv-kaart.wv-werktniet { opacity: .6; }
.wv-duim { position: relative; display: block; height: 118px; overflow: hidden; background: #fff; border-bottom: 1px solid var(--grid); }
.wv-duim iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; }
.wv-duim-leeg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); background: repeating-linear-gradient(-45deg, var(--wash2), var(--wash2) 8px, var(--card) 8px, var(--card) 16px); }
.wv-duim-klaar .wv-duim-leeg { display: none; }
.wv-duim-vorm { height: 64px; border-bottom: 1px solid var(--grid); margin: -8px -10px 6px; }
.wv-vorm-optie { flex-direction: column; align-items: stretch; padding: 8px 10px; overflow: hidden; }
.wv-vorm-optie .wv-duim-vorm:not(.wv-duim-klaar) { background: var(--wash2); }
.wv-vorm-naam { display: block; }
@media (max-width: 760px){
.toon-alleen-computer { display: none !important; }
}
@media (min-width: 761px){
.toon-alleen-telefoon { display: none !important; }
}
.wv-twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wv-twee .field { gap: 6px; }
.wv-toon { display: inline-block; margin-right: 5px; padding: 0 6px; border-radius: 999px; background: var(--chip-blue-bg); color: var(--chip-blue-ink); font-size: 10.5px; font-weight: 650; }
.wv-als { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 4px 0 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--sub); box-shadow: var(--shadow); }
.wv-als select { border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 550; color: var(--ink); height: 32px; padding: 0 4px; cursor: pointer; }
.wv-als.aan { border-color: var(--chip-blue-dot); background: var(--chip-blue-bg); }
@media (max-width: 1180px){
.wv-als select { max-width: 150px; }
}
@media (max-width: 900px){
.wv-als { display: none; }
}
.wp-sjabloonkop { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; }
.wp-keuzelijst { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow: auto; padding-right: 4px; }
.wp-sjabloonrij { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); }
.wp-sjabloonrij:hover { background: var(--wash2); }
.wp-sjabloonnieuw { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.wp-sjabloonnieuw input { flex: 1; min-width: 0; }
.site-afwijkend { margin-top: 14px; }
.site-afwijkend h3 { margin: 0 0 6px; }
.site-afwijkend dl { margin: 0; display: grid; gap: 4px; }
.site-afwijkend dl > div { display: flex; justify-content: space-between; gap: 12px; }
.site-afwijkend dt, .site-afwijkend dd { margin: 0; }
.site-afwijkend dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-afwijkend .vandaag dt, .site-afwijkend .vandaag dd { font-weight: 700; }
.site-ot-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.site-ot-kop h2 { margin: 0; }
.site-ot-kop .site-nu { margin-left: 0; }
.site-ot-zin { margin: 8px 0 0; color: var(--sub, #555); }
.site-ot-in { display: grid; gap: 24px; margin-top: 16px; max-width: 460px; }
.site-ot-in.site-ot-twee { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.site-ot-in .site-afwijkend { margin-top: 0; }
.site-ot-kolom h3 { margin: 0 0 6px; }
.site-ot-in .site-afwijkend dl { gap: 0; }
.site-ot-in .site-afwijkend dl > div { padding: 8px 0; border-bottom: 1px solid var(--line, #e5e7eb); }
.site-ot-in .site-afwijkend dl > div:last-child { border-bottom: 0; }
.site-ot-week { margin: 0; display: grid; gap: 0; }
.site-ot-week > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line, #e5e7eb); }
.site-ot-week > div:last-child { border-bottom: 0; }
.site-ot-week dt, .site-ot-week dd { margin: 0; }
.site-ot-week dd { font-variant-numeric: tabular-nums; }
.site-ot-week .vandaag dt, .site-ot-week .vandaag dd { font-weight: 700; }
@media (max-width: 760px){
.site-ot-in.site-ot-twee { grid-template-columns: 1fr; }
}
.site-nb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 16px 32px; align-items: center; padding: 24px 28px; border-radius: var(--nova-r-klein, 10px); background: var(--wash, #f5f7f4); border: 1px solid var(--line, #e5e7eb); }
.site-nb.site-nb-accent { background: var(--winkel-accent, #1f2937); color: var(--winkel-accent-ink, #fff); border-color: transparent; }
.site-nb.site-nb-accent .site-nb-tekst p { color: inherit; opacity: .85; }
.site-nb-tekst h2 { margin: 0; }
.site-nb-tekst p { margin: 6px 0 0; color: var(--sub, #555); }
.site-nb-vorm { margin: 0; }
.site-nb-rij { display: flex; gap: 8px; }
.site-nb-rij input[type="email"] { flex: 1; min-width: 0; }
.site-blok .site-nb.site-nb-accent .site-nb-rij .btn-primary { background: var(--winkel-accent-ink, #fff); color: var(--winkel-accent, #1f2937); }
.site-nb-dank { margin: 0; font-weight: 600; }
.site-nb-fout { margin: 6px 0 0; font-size: 14px; color: #b91c1c; }
.site-nb.site-nb-accent .site-nb-fout { color: inherit; }
@media (max-width: 760px){
.site-nb { grid-template-columns: 1fr; padding: 20px; }
.site-nb-rij { flex-direction: column; }
}
.site-la { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; padding: 24px 28px; border-radius: var(--nova-r-klein, 10px); background: var(--winkel-accent, #1f2937); color: var(--winkel-accent-ink, #fff); }
.site-la-kopje { display: inline-block; margin-bottom: 6px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.site-la-tekst h2 { margin: 0; }
.site-blok .site-la .site-la-tekst h2, .site-blok .site-nb.site-nb-accent .site-nb-tekst h2 { color: inherit; }
.site-la-regel { margin: 6px 0 0; opacity: .9; }
.site-la-rechts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; }
.site-la-code { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 14px; border: 2px dashed currentColor; border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.site-la-code small { font-size: 12px; opacity: .8; }
.site-la-code b { font-size: 18px; letter-spacing: .06em; }
.site-la-klok { font-size: 14px; font-variant-numeric: tabular-nums; opacity: .9; }
.site-blok .site-la .site-la-rechts .btn-primary { background: var(--winkel-accent-ink, #fff); color: var(--winkel-accent, #1f2937); }
@media (max-width: 760px){
.site-la { grid-template-columns: 1fr; padding: 20px; }
.site-la-rechts { justify-content: flex-start; }
}
.site-soortregel { margin: 6px 0 0; color: var(--sub, #555); font-size: 15px; }
.winkel.terra.stramien-helder:is(.stramien-helder, #helder) .site-soortregel { max-width: var(--site-breedte); margin: 0 auto; padding: 4px var(--nova-zij) 0; }
.zaal-paginatitel .site-soortregel { margin-top: 8px; }
.bl-twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; align-items: start; }
.bl-rij { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line); }
.bl-rij > b { flex: 1; min-width: 0; }
.bl-rij form { margin: 0; }
.bl-foto { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--wash2); }
.bl-foto-leeg { display: grid; place-items: center; font-weight: 650; color: var(--muted); }
.bl-wie { display: grid; gap: 1px; min-width: 0; }
.bl-wie small { color: var(--muted); font-size: 13px; }
.bl-erbij { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); margin: 0; }
.bl-erbij input { flex: 1; min-width: 0; }
@media (max-width: 760px){
.bl-twee { grid-template-columns: 1fr; }
}
.site-kol-in { display: grid; gap: 28px; }
.site-kol-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-kol-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-kol-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.site-kol-kolom { display: grid; gap: 10px; align-content: start; }
.site-kol-foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--nova-r-klein, 10px); }
.site-kol-kolom h3 { margin: 4px 0 0; }
.site-kol-tekst > :first-child { margin-top: 0; }
.site-kol-tekst > :last-child { margin-bottom: 0; }
.site-kol-knop { justify-self: start; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px){
.site-kol-3, .site-kol-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
.site-kol-in { grid-template-columns: 1fr; }
}
.site-tb-inleiding { margin-bottom: 16px; }
.site-tb-in { display: flex; flex-wrap: wrap; gap: 0 4px; }
.site-tb-keus { position: absolute; opacity: 0; pointer-events: none; }
.site-tb-tab { padding: 10px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 600; cursor: pointer; color: var(--sub, #555); }
.site-tb-tab:hover { color: inherit; }
.site-tb-keus:checked + .site-tb-tab { color: inherit; border-bottom-color: currentColor; }
.site-tb-keus:focus-visible + .site-tb-tab { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
.site-tb-paneel { order: 1; flex: 0 0 100%; display: none; padding-top: 18px; border-top: 1px solid var(--line, #e5e7eb); }
.site-tb-paneel > :first-child { margin-top: 0; }
.site-tb-kop { display: none; }
.site-tb-keus:nth-of-type(1):checked ~ .site-tb-paneel:nth-of-type(1),
.site-tb-keus:nth-of-type(2):checked ~ .site-tb-paneel:nth-of-type(2),
.site-tb-keus:nth-of-type(3):checked ~ .site-tb-paneel:nth-of-type(3),
.site-tb-keus:nth-of-type(4):checked ~ .site-tb-paneel:nth-of-type(4),
.site-tb-keus:nth-of-type(5):checked ~ .site-tb-paneel:nth-of-type(5),
.site-tb-keus:nth-of-type(6):checked ~ .site-tb-paneel:nth-of-type(6),
.site-tb-keus:nth-of-type(7):checked ~ .site-tb-paneel:nth-of-type(7),
.site-tb-keus:nth-of-type(8):checked ~ .site-tb-paneel:nth-of-type(8) { display: block; }
@media (max-width: 760px){
.site-tb-tab { display: none; }
.site-tb-in .site-tb-paneel { display: block; padding-top: 14px; }
.site-tb-paneel + .site-tb-paneel { margin-top: 14px; }
.site-tb-kop { display: block; margin: 0 0 6px; }
}
.site-anker { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; background: var(--card, #fff); scrollbar-width: none; }
.site-anker::-webkit-scrollbar { display: none; }
.site-anker a { flex: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line, #e5e7eb); color: inherit; text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.site-anker a:hover { border-color: currentColor; }
.site-anker a.aan { background: var(--winkel-accent, #1f2937); color: var(--winkel-accent-ink, #fff); border-color: transparent; }
.site-pagina > .site-blok:has(.site-anker-plak),
section:has(> .zaal-omlijst .site-anker-plak),
div:has(> .fw-omlijst .site-anker-plak) { position: sticky; top: var(--anker-boven, 0px); z-index: 30; background: var(--card, #fff); padding-block: 0 !important; }
.site-blok > section.site-anker-vak, .fw-omlijst:has(.site-anker-plak), .zaal-omlijst:has(.site-anker-plak) { margin-block: 0 !important; padding-block: 0 !important; }
html:has(.site-anker-plak) body.winkel :is(.site-pagina, .zaal-pagina, .fw-pagina, .fw-catblokken) [id][id] { scroll-margin-top: calc(var(--anker-boven, 0px) + var(--anker-hoogte, 60px) + 20px); }
.tv-contrast { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.tv-contrast-rij b { color: var(--pos, #1d7a4b); font-variant-numeric: tabular-nums; }
.tv-contrast-rij.tv-contrast-slecht b { color: var(--neg, #b42318); }
.tv-contrast small { flex-basis: 100%; }
.st-contrast { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.st-contrast b { color: var(--pos, #1d7a4b); font-variant-numeric: tabular-nums; }
.st-contrast .st-contrast-slecht, .st-contrast .st-contrast-slecht b { color: var(--neg, #b42318); }
.site-sb-label { box-sizing: border-box; width: 100%; max-width: var(--site-breedte, none); margin-inline: auto; padding: 22px var(--nova-zij, 20px) 0; }
.site-sb-label > span { display: block; padding-top: 14px; border-top: 1px dashed var(--line, #d7dbe0); font: 600 12px/1.4 system-ui, -apple-system, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; }
.zaal-blokrij > .site-sb-label { grid-column: 1 / -1; max-width: none; padding-inline: 0; }
.fj-in > .site-sb-label { max-width: none; padding-inline: 0; }
.kiesveld { position: relative; display: block; min-width: 0; }
.kiesveld select.kies-bron { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kies-knop { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 34px;
border: 1px solid var(--axis); border-radius: 8px; background: var(--card); color: var(--ink);
padding: 5px 9px 5px 11px; font: inherit; font-size: 13.5px; text-align: left;
box-shadow: var(--shadow); cursor: pointer; }
.kies-knop:hover { background: var(--wash2); }
.kiesveld.open .kies-knop { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.kies-knop .kies-leegtekst { color: var(--muted); }
.kies-knop .kies-waarde { min-width: 0; overflow-wrap: anywhere; }
.kies-knop .kies-pijl { margin-left: auto; color: var(--muted); font-size: 9px; flex: 0 0 auto; }
.kies-knop .kies-tel { background: var(--wash); border-radius: 999px; padding: 0 6px; font-size: 11px;
color: var(--sub); font-variant-numeric: tabular-nums; }
.kiesveld.klein .kies-knop { min-height: 28px; font-size: 12.5px; border-radius: 7px; padding: 2px 7px 2px 9px; }
.kies-chips { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.kies-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--wash);
border: 1px solid var(--line); border-radius: 6px; padding: 1px 4px 1px 7px; font-size: 12px; }
.kies-chip .kies-af { color: var(--muted); font-size: 13px; line-height: 1; padding: 0 1px; cursor: pointer; }
.kies-chip .kies-af:hover { color: var(--neg); }
.kies-blad { position: absolute; z-index: 90; top: calc(100% + 5px); left: 0; min-width: 100%;
width: max-content; max-width: min(460px, 92vw); background: var(--card); border: 1px solid var(--line);
border-radius: 11px; box-shadow: 0 12px 32px rgba(16,24,40,.16); display: none; overflow: hidden; }
.kiesveld.open .kies-blad { display: block; }
.kiesveld.omhoog .kies-blad { top: auto; bottom: calc(100% + 5px); }
.kiesveld.naarlinks .kies-blad { left: auto; right: 0; }
.kies-zoekrij { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--line); }
.kies-zoekrij input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; min-width: 90px; }
.kies-zoekrij input::placeholder { color: var(--muted); }
.kies-zoekrij .kies-hoeveel { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kies-rollijst { max-height: 296px; overflow-y: auto; padding: 5px; overscroll-behavior: contain; }
.kies-groepkop { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
font-weight: 650; padding: 8px 9px 3px; }
.kies-optie { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 6px 9px;
border-radius: 7px; font-size: 13.5px; color: var(--ink); line-height: 1.35; border: 0; background: none;
cursor: pointer; font-family: inherit; }
.kies-optie:hover, .kies-optie.aangewezen { background: var(--wash); }
.kies-optie .kies-vink { width: 14px; flex: 0 0 14px; color: var(--data); opacity: 0; font-size: 12px; }
.kies-optie[aria-selected="true"] .kies-vink { opacity: 1; }
.kies-optie .kies-vak { width: 14px; height: 14px; border: 1.5px solid var(--axis); border-radius: 4px;
flex: 0 0 14px; display: grid; place-items: center; color: #fff; font-size: 9px; }
.kies-optie[aria-selected="true"] .kies-vak { background: var(--data); border-color: var(--data); }
.kies-optie .kies-tekst { min-width: 0; flex: 1; }
.kies-optie .kies-bij { display: block; color: var(--muted); font-size: 11.5px; }
.kies-optie .kies-rechts { margin-left: auto; color: var(--muted); font-size: 11.5px;
font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 6px; }
.kies-optie mark { background: var(--chip-orange-bg); color: inherit; border-radius: 2px; padding: 0 1px; font-weight: 600; }
.kies-niets { padding: 16px 12px; text-align: center; color: var(--sub); font-size: 13px; }
.kies-voet { border-top: 1px solid var(--line); background: var(--wash2); padding: 7px 11px;
display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--muted); }
.kies-voet kbd { border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px; background: var(--card);
font: 500 10px/1.4 inherit; }
.kies-voet .kies-alles { margin-left: auto; color: var(--data); font-weight: 600; font-size: 12px;
border: 0; background: none; cursor: pointer; font-family: inherit; }
.vinkzoekrij { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; }
.vinkzoekrij input { flex: 1; min-width: 0; height: 27px; border: 1px solid var(--line); border-radius: 7px;
background: var(--card); padding: 0 8px; font: inherit; font-size: 12.5px; color: var(--ink); }
.vinkzoekrij input:focus { outline: 0; border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.vinkzoekrij .vinkzoek-tel { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vinkzoekrij .vinkzoek-alleen { font-size: 11.5px; color: var(--data); font-weight: 600; border: 0; background: none;
cursor: pointer; font-family: inherit; white-space: nowrap; }
.vink.vinkweg { display: none !important; }
.vinkzoek-niets { font-size: 12.5px; color: var(--muted); padding: 4px 2px 6px; }
.bulk .bulk-buiten { font-size: 12px; color: var(--muted); }
.bulk .bulk-som { color: var(--sub); font-weight: 600; font-variant-numeric: tabular-nums; }
.bulk .bulk-leeg { font-size: 12px; color: var(--data); font-weight: 600; border: 0; background: none;
cursor: pointer; font-family: inherit; padding: 0 2px; }
.bulk .bulk-leeg:hover { text-decoration: underline; text-underline-offset: 2px; }
.kiesveld.uit .kies-knop { opacity: .6; cursor: not-allowed; }
.celbewerk { width: 100%; max-width: 110px; border: 1px solid transparent; border-radius: 6px;
background: transparent; font: inherit; color: inherit; text-align: right; padding: 3px 6px;
font-variant-numeric: tabular-nums; }
.celbewerk:hover { border-color: var(--line); background: var(--card); }
.celbewerk:focus { outline: 0; border-color: var(--data); background: var(--card);
box-shadow: 0 0 0 3px var(--data-wash); }
.celbewerk.gewijzigd { border-color: var(--chip-green-dot); background: var(--chip-green-bg); }
.sneltoetsen-kaart { position: fixed; left: 50%; top: 20%; transform: translateX(-50%); z-index: 200; min-width: 280px; max-width: calc(100vw - 32px); background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 14px 18px; display: grid; gap: 8px; font-size: 13.5px; }
.sneltoetsen-kaart .kop { font-weight: 650; margin-bottom: 2px; }
.sneltoetsen-kaart > div:not(.kop) { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: center; }
.sneltoetsen-kaart kbd { font: 500 12px/1 inherit; border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; background: var(--wash2); justify-self: start; }
@media (min-width: 601px) and (max-width: 1180px){
main .table-scroll > table { display: table; width: 100%; }
}