/* voor en na: het na-beeld ligt eroverheen en wordt links afgeknipt tot --pos; de greep staat op die lijn */
.sv-voorna{--pos:50%}
.sv-vn-kop h3{margin:0 0 var(--sv-s1);font-family:var(--sv-font-kop);font-size:clamp(24px,2.6vw,32px);line-height:1.15;color:var(--sv-inkt-sterk)}
.sv-vn-kop p{margin:0 0 var(--sv-s3);font-size:17px;line-height:1.55;color:var(--sv-inkt-zacht);max-width:var(--sv-leesbreedte)}
.sv-vn-labels{display:flex;justify-content:space-between;gap:var(--sv-s2);margin-bottom:var(--sv-s2)}
.sv-vn-l{display:inline-flex;align-items:center;min-height:36px;padding:6px 16px;border-radius:999px;font-size:15px;font-weight:700;line-height:1.2;background:var(--sv-bg-zacht);border:1px solid var(--sv-lijn);color:var(--sv-inkt-sterk);transition:background .25s,color .25s,border-color .25s}
.sv-voorna[data-kant="voor"] .sv-vn-l.voor,.sv-voorna[data-kant="na"] .sv-vn-l.na{background:var(--sv-merk);border-color:var(--sv-merk);color:var(--sv-op-merk)}
.sv-vn-vlak{position:relative;overflow:hidden;border-radius:var(--sv-radius);background:#0b0b0c;box-shadow:var(--sv-schaduw);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.sv-vn-laag{position:absolute;inset:0}
.sv-vn-laag img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.sv-vn-laag.na{clip-path:inset(0 0 0 var(--pos))}
.sv-vn-greep{position:absolute;top:0;bottom:0;left:var(--pos);width:0;pointer-events:none}
.sv-vn-greep::before{content:"";position:absolute;top:0;bottom:0;left:-2px;width:4px;background:var(--sv-papier);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.sv-vn-greep i{position:absolute;top:50%;left:-28px;width:56px;height:56px;margin-top:-28px;border-radius:50%;background:var(--sv-papier);box-shadow:0 10px 30px -8px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.12)}
.sv-vn-greep i::before,.sv-vn-greep i::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-8px;border-top:8px solid transparent;border-bottom:8px solid transparent}
.sv-vn-greep i::before{left:12px;border-right:10px solid var(--sv-inkt-sterk)}
.sv-vn-greep i::after{right:12px;border-left:10px solid var(--sv-inkt-sterk)}
/* de range ligt over het hele vlak: slepen, tikken en de pijltjestoetsen werken vanzelf */
.sv-vn-in{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.sv-vn-in::-webkit-slider-thumb{-webkit-appearance:none;width:56px;height:100%;cursor:ew-resize}
.sv-vn-in::-moz-range-thumb{width:56px;height:100%;border:0;cursor:ew-resize}
.sv-vn-vlak:focus-within .sv-vn-greep i{outline:3px solid var(--sv-accent);outline-offset:3px}
.sv-voorna > .sv-bronrij{display:block;margin-top:var(--sv-s2)}
@media (max-width:700px){.sv-vn-greep i{width:48px;height:48px;left:-24px;margin-top:-24px}}