.cmp-bediening{ display:flex; flex-wrap:wrap; gap:14px 24px; align-items:flex-end; margin-top:14px; }
.cmp-bediening .pt-field{ display:flex; flex-direction:column; gap:5px; }
.cmp-bediening label{ font-size:.82rem; font-weight:600; color:var(--to-tekst-2); }
.cmp-bediening input[type=range]{ width:160px; accent-color:var(--to-merk); margin:9px 0; }
.cmp-bediening #cmpOffset{ width:84px; }
.cmp-sens-val{ font-weight:500; color:var(--to-gedempt); }
.cmp-nav{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:12px; }
.cmp-wissel{ margin-top:10px; }
.cmp-nav-knoppen{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.cmp-nav #cmpPageLbl{ margin-left:auto; }
.cmp-samenvatting{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:10px 0 6px; font-size:.84rem; color:var(--to-gedempt); }
.cmp-samenvatting.cmp-ok{ color:var(--to-goed); font-weight:600; }
.cmp-badge{ display:inline-block; padding:2px 9px; border-radius:999px; font-weight:600; font-size:.78rem; border:1px solid transparent; }
.cmp-badge.changed{ background:#fee2e2; color:#b91c1c; border-color:#fecaca; }
.cmp-badge.added{ background:#dcfce7; color:#15803d; border-color:#bbf7d0; }
.cmp-badge.removed{ background:#ffedd5; color:#c2410c; border-color:#fed7aa; }
.cmp-strip{ display:flex; flex-wrap:wrap; gap:4px; margin:0 0 10px; max-height:96px; overflow:auto; padding:2px; }
.cmp-chip{ min-width:26px; height:24px; padding:0 6px; border-radius:6px; border:1px solid var(--to-lijn-2); cursor:pointer; font:inherit; font-size:.72rem; font-weight:600; background:var(--to-vlak-2); color:var(--to-tekst-2); }
.cmp-chip.changed{ background:#fee2e2; color:#b91c1c; border-color:#fca5a5; }
.cmp-chip.added{ background:#dcfce7; color:#15803d; border-color:#86efac; }
.cmp-chip.removed{ background:#ffedd5; color:#c2410c; border-color:#fdba74; }
.cmp-chip.actief{ outline:2px solid var(--to-merk); outline-offset:1px; }
@media (pointer:coarse){ .cmp-strip .cmp-chip{ min-width:32px; height:32px; } }
@media (max-width:640px){ .cmp-nav #cmpPageLbl{ margin-left:0; flex:1 1 100%; } }
.cmp-badge.tekst{ background:var(--to-vlak-2); color:var(--to-tekst-2); border-color:var(--to-lijn-2); }
.cmp-tekst{ text-align:left; max-height:260px; overflow:auto; border:1px solid var(--to-lijn-2); border-radius:8px; background:var(--to-vlak); margin-bottom:10px; }
.cmp-wz{ display:grid; grid-template-columns:auto auto 1fr; gap:4px 10px; align-items:baseline; width:100%; text-align:left; font:inherit; font-size:.84rem;
  padding:7px 10px; border:0; border-bottom:1px solid var(--to-lijn); background:none; color:var(--to-tekst); cursor:pointer; }
.cmp-wz:last-child{ border-bottom:0; }
.cmp-wz:hover{ background:var(--to-vlak-2); }
.cmp-wz.actief{ background:var(--to-vlak-2); box-shadow:inset 3px 0 0 var(--to-merk); }
.cmp-wz .srt{ font-weight:600; font-size:.74rem; padding:1px 7px; border-radius:999px; white-space:nowrap; }
.cmp-wz .srt.vervangen{ background:#fee2e2; color:#b91c1c; }
.cmp-wz .srt.ingevoegd{ background:#dcfce7; color:#15803d; }
.cmp-wz .srt.verwijderd{ background:#ffedd5; color:#c2410c; }
.cmp-wz .plek{ color:var(--to-gedempt); font-size:.76rem; white-space:nowrap; }
.cmp-wz .wat{ overflow-wrap:anywhere; min-width:0; }
.cmp-wz .wat del{ color:#b91c1c; }
.cmp-wz .wat ins{ color:#15803d; text-decoration:none; font-weight:600; }
@media (max-width:640px){ .cmp-wz{ grid-template-columns:auto 1fr; } .cmp-wz .wat{ grid-column:1 / -1; } }