img-comparison-slider {
  visibility: hidden;
}

img-comparison-slider [slot='second'] {
  display: none;
}

img-comparison-slider.rendered {
  visibility: inherit;
}

img-comparison-slider.rendered [slot='second'] {
  display: unset;
}
    
.position-relative { position: relative; }

.slider-label {
  position: absolute;
  top: 10px;
  padding: 4px 8px;
  background: rgba(56,125,153,0.6); /* rgba(0,0,0,0.6) */
  color: #fff;
  font-weight: bold;
  font-size: 0.9rem;
  border-radius: 4px;
  z-index: 20;
  pointer-events: none;
}

.slider-label.label-left { left: 10px; }
.slider-label.label-right { right: 10px; }

/* Handle-Design */
img-comparison-slider .img-comparison-handle {
  background: rgba(56,125,153,0.8);
  border-radius: 50%;
  padding: 6px;
  transition: transform 0.2s ease;
}

img-comparison-slider:hover .img-comparison-handle {
  transform: scale(1.2);
}

img-comparison-slider {
  --divider-width: 2px;
  --divider-color: #fff;
}

/* Animation: Handle wippt beim Laden */
@keyframes handle-wiggle {
  0%,100% { transform: translateX(0) scale(1); } /* 0 1 */
  25% { transform: translateX(-10%) scale(1.5); } /* -10% 1.1 */
  75% { transform: translateX(10%) scale(1.5); } /* 10% 1.1 */
}
.animated-slider .img-comparison-handle {
  animation: handle-wiggle 1s ease-in-out 0.3s 3 forwards; /* 3: 3x Animation */
}