.km{display:grid;gap:clamp(16px,3vw,32px);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:820px){.km{grid-template-columns:minmax(0,420px) minmax(0,1fr)}}
.km-figuur{margin:0;max-width:440px;width:100%}
.km svg{width:100%;height:auto;display:block}
.km-romp{fill:var(--bg-3);stroke:var(--ink-3);stroke-width:2}
.km-tank{fill:var(--accent-soft);stroke:var(--ink-3);stroke-width:2}
.km-paneel{fill:var(--bg-2);stroke:var(--ink-3);stroke-width:2}
.km-scherm{fill:var(--accent-soft);stroke:var(--accent-line);stroke-width:1.5}
.km-nis{fill:var(--bg);stroke:var(--ink-3);stroke-width:2}
.km-bak,.km-rooster{fill:var(--bg-2);stroke:var(--ink-3);stroke-width:1.5}
.km-bonen{fill:color-mix(in srgb,var(--ink-3) 55%,var(--bg));stroke:var(--ink-3);stroke-width:2}
.km-deksel{fill:var(--bg-2);stroke:var(--ink-3);stroke-width:2}
.km-kop,.km-pijp{fill:var(--ink-3)}
.km-kopje{fill:var(--bg-2);stroke:var(--ink-3);stroke-width:2}
.km-arm{fill:none;stroke:var(--ink-3);stroke-width:5;stroke-linecap:round}
.km-labels text{fill:var(--ink-2);font-size:11px;font-family:inherit;letter-spacing:.04em;text-transform:uppercase}
.km-hit{fill:transparent;stroke:transparent;stroke-width:3;cursor:pointer;transition:fill .15s,stroke .15s}
.km-hit-lijn{fill:none;stroke-width:16;stroke-linecap:round}
.km-hit-stip{stroke-dasharray:5 4}
.km-hot g:hover .km-hit,.km-hot g:focus-visible .km-hit{fill:color-mix(in srgb,var(--accent) 22%,transparent);stroke:var(--accent)}
.km-hot g[aria-pressed="true"] .km-hit{fill:color-mix(in srgb,var(--accent) 30%,transparent);stroke:var(--accent)}
.km-foto .km-hit{stroke:#fff;stroke-width:5;stroke-dasharray:14 10;fill:rgba(0,0,0,.12)}
.km-foto g:hover .km-hit,.km-foto g[aria-pressed="true"] .km-hit{fill:color-mix(in srgb,var(--accent) 35%,transparent);stroke:var(--accent)}
.km-hot g:focus{outline:none}
.km-paneel-uit{display:grid;gap:12px}
.km-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.km-chip{font:inherit;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);color:var(--ink);cursor:pointer}
.km-chip:hover{border-color:var(--accent-line)}
.km-chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-tekst);font-weight:600}
.km-keuze{padding:16px;border:1px solid var(--accent-line);border-radius:var(--radius);background:var(--accent-soft)}
.km-keuze h3{margin:0 0 8px}
.km-keuze ul{margin:0 0 12px;padding-left:1.2em}
.km-keuze .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.km-knop{fill:var(--bg-2);stroke:var(--ink-3);stroke-width:1.5}
.km-klep{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:4 3}
.km-melk{fill:var(--bg-2);stroke:var(--ink-3);stroke-width:2}
.km-zoek{display:grid;gap:6px;max-width:420px;margin-top:16px;font-weight:600}
.km-zoek input{font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);color:var(--ink)}
.km-lijst{columns:2;column-gap:32px}
@media (max-width:560px){.km-lijst{columns:1}}
.km-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.km-tab{font:inherit;font-size:.9rem;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg-2);color:var(--ink);cursor:pointer}
.km-tab[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-tekst);font-weight:600}
.km-view svg{background:#fff;border-radius:var(--radius)}
.km-view[data-view-id="schema"] svg{background:transparent}
.km-geenfoto{padding:24px;border:1px dashed var(--line);border-radius:var(--radius);color:var(--ink-2)}
.km-ods{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin:16px 0 24px}
.km-od h3{margin:0 0 6px;font-size:1.05rem}.km-od ul{margin:0 0 8px;padding-left:1.1em}
.km-zelf{margin:0;font-size:.9rem;color:var(--ink-2)}

.km-vrij{display:grid;gap:4px;margin:12px 0 0;font-size:.9rem;color:var(--ink-2)}
.km-vrij input{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);color:var(--ink)}
.km-anders{font:inherit;padding:8px 12px;border:1px dashed var(--ink-3);border-radius:var(--radius);background:transparent;color:var(--ink);cursor:pointer}
.km-pick{max-width:640px;margin-top:12px}
.km-sug{list-style:none;margin:6px 0 0;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);overflow:hidden}
.km-sug li a{display:block;padding:10px 14px;color:var(--ink);text-decoration:none}
.km-sug li a:hover,.km-sug li a:focus{background:var(--accent-soft)}
.km-pop{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:20px;list-style:none;padding:0}
.km-pop a{display:grid;gap:6px;padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:#1b1c1e;text-decoration:none;font-size:.9rem;text-align:center}
.km-pop a:hover{border-color:var(--accent)}
.km-pop img{width:100%;height:110px;object-fit:contain}

.km-merk{padding:clamp(24px,4vw,40px) 0}
.km-merk + .km-merk{border-top:1px solid var(--line)}
.km-merk h2{margin-bottom:12px}
.km-pop li{max-width:none}
.km-pop a{height:100%;align-content:start}
.km-leeg-foto{display:block;height:110px;border-radius:6px;background:var(--bg-3)}
.km-zoek{display:grid;gap:6px;max-width:460px}
.km-zoek input{width:100%}
.km-chips,.km-keuze,.km-vrij{max-width:none}

.km-merken{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:16px 0 0;padding:0}
.km-merken li{max-width:none}
.km-merkknop{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg-2);color:var(--ink);text-decoration:none;font-size:.95rem}
.km-merkknop:hover{border-color:var(--accent);background:var(--accent-soft)}
.km-merk{scroll-margin-top:90px}

.km-merkknop.km-prem{border-color:var(--accent);font-weight:600}

.km-groep{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.km-pop .km-schets{width:100%;height:110px;display:block}
.km-groepregel{margin:16px 0 0}