/* Container, der beide Bilder exakt übereinander hält */
.image-compare-container {
  position: relative;
  width: 100%;
  max-width: 1300px; /* Beliebige maximale Breite */
  margin: 0 auto;
  overflow: hidden;
  user-select: none;
}

/* Das Hintergrundbild und allgemeine Bildeinstellungen */
.image-compare-container img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none; /* Verhindert, dass Bilder gezogen werden */
}

/* Den Wert für clip-path von 50% auf 90% anpassen (100% - 90% = 10%) */
.image-before-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 calc(100% - 90%) 0 0); /* Hier jetzt 90% */
}

/* Der unsichtbare Schieberegler, der über der gesamten Fläche liegt */
.compare-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  opacity: 0; /* Unsichtbar, aber anklickbar */
  cursor: ew-resize;
  z-index: 10;
  margin: 0;
}

/* Den Wert für left von 50% auf 90% anpassen */
.slider-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 90%; /* Hier jetzt 90% */
  width: 3px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 5;
}

/* 1. Der runde Button (wird leicht vergrößert für besseren Platz) */
.slider-line::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 6;
}

/* 2. Die Pfeile im Button */
.slider-line::after {
  content: "◄ ►"; /* Die HTML-Sonderzeichen für die Pfeile */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #444444; /* Farbe der Pfeile */
  font-size: 12px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  letter-spacing: 2px; /* Abstand zwischen den beiden Pfeilen */
  white-space: nowrap;
  z-index: 7;
}