/* Frontend */
.oxxo-wrapper{position:relative; display:block; width:100%; overflow:hidden; background:#000}
.oxxo-wrapper .oxxo-img{display:block; width:100%; height:auto; pointer-events:none; user-select:none}
.oxxo-wrapper .oxxo-after{position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; clip-path: inset(0 0 0 50%);}
.oxxo-wrapper[data-direction="vertical"] .oxxo-after{clip-path: inset(50% 0 0 0);}

.oxxo-line{position:absolute; background:#fff}
.oxxo-handle{position:absolute; width:56px; height:56px; border-radius:50%; border:0 solid #fff; display:flex; align-items:center; justify-content:center; background:transparent; box-shadow:none;}
.oxxo-handle-inner{background-color:#fff}

.oxxo-badge{position:absolute; top:16px; padding:6px 12px; border-radius:8px; font-size:14px; line-height:1}
.oxxo-badge-left{left:16px}
.oxxo-badge-right{right:16px}

/* Badges bei Interaktion */
.oxxo-wrapper.badges-hide .oxxo-badge{opacity:0; transition:opacity .25s ease}
.oxxo-wrapper.badges-hide.oxxo-interact .oxxo-badge{opacity:1}