/* Vorher-Nachher-Slider */
.vn-slider { --pos: 50%; position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 3/4; background: #eef1f5; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.vn-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.vn-slider .vn-vorher { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.vn-slider .vn-linie { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,0.35); pointer-events: none; }
.vn-slider .vn-griff { position: absolute; top: 50%; left: var(--pos); width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; color: #0c447c; pointer-events: none; }
.vn-slider .vn-griff svg { width: 26px; height: 26px; }
.vn-slider .vn-tag { position: absolute; top: 12px; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 20px; color: #fff; pointer-events: none; transition: opacity .2s; }
.vn-slider .vn-tag.l { left: 12px; background: #555; }
.vn-slider .vn-tag.r { right: 12px; background: #00a88f; }
.vn-slider input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.vn-slider input[type=range]:focus-visible ~ .vn-griff { outline: 3px solid #006bb6; outline-offset: 3px; }
.vn-hinweis { font-size: 13px; color: #555; text-align: center; margin-top: 8px; }