/* 1.40: Bildvergleich - any picture can be a before/after slider (option "Bildvergleich" at the picture in the editor).
   The picture itself is "Vorher"; the second picture lies on top and is cut at the slider position. */
.cmpv{position:relative;display:block;overflow:hidden;line-height:0;user-select:none;-webkit-user-select:none;cursor:ew-resize;touch-action:pan-y}
.cmpv.cmpv-v{cursor:ns-resize;touch-action:pan-x}
.cmpv.is-drag{cursor:grabbing}
.cmpv>img{-webkit-user-drag:none;pointer-events:none}
.cmpv .cmpv-clip{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 0 var(--pos,50%));pointer-events:none}
.cmpv.cmpv-v .cmpv-clip{clip-path:inset(var(--pos,50%) 0 0 0)}
.cmpv .cmpv-over{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;object-fit:cover}
.cmpv-handle{position:absolute;z-index:4;top:0;bottom:0;left:var(--pos,50%);width:0;outline:none}
.cmpv-handle::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.35)}
.cmpv-grip{position:absolute;top:50%;left:0;width:40px;height:40px;margin:-20px 0 0 -20px;border:3px solid #fff;border-radius:50%;background:rgba(0,0,0,.62);box-shadow:0 0 14px rgba(0,0,0,.45);transition:transform .15s}
.cmpv-grip::before,.cmpv-grip::after{content:"";position:absolute;top:50%;margin-top:-6px;border:6px solid transparent}
.cmpv-grip::before{left:6px;border-right-color:#fff;border-left-width:0}
.cmpv-grip::after{right:6px;border-left-color:#fff;border-right-width:0}
.cmpv.is-drag .cmpv-grip,.cmpv-handle:hover .cmpv-grip{transform:scale(1.08)}
.cmpv-handle:focus-visible .cmpv-grip{outline:3px solid var(--gold);outline-offset:3px}
.cmpv-v .cmpv-handle{top:var(--pos,50%);bottom:auto;left:0;right:0;width:auto;height:0}
.cmpv-v .cmpv-handle::before{top:-1px;bottom:auto;left:0;right:0;width:auto;height:2px}
.cmpv-v .cmpv-grip{left:50%;top:0}
.cmpv-v .cmpv-grip::before,.cmpv-v .cmpv-grip::after{left:50%;right:auto;margin:0 0 0 -6px}
.cmpv-v .cmpv-grip::before{top:6px;border:6px solid transparent;border-bottom-color:#fff;border-top-width:0}
.cmpv-v .cmpv-grip::after{top:auto;bottom:6px;border:6px solid transparent;border-top-color:#fff;border-bottom-width:0}
.theme-luxe .cmpv-grip{border-width:1px}
@media (max-width:600px){.cmpv-grip{width:34px;height:34px;margin:-17px 0 0 -17px}}
@media (prefers-reduced-motion:reduce){.cmpv-grip{transition:none}}