/* =========================================================
   Vergleichs-Sektion: Grid + Vorher/Nachher Slider + Hint-Animation
   Anforderung: Slider-Button erst NACH der Hint-Animation einblenden
   ========================================================= */

* { box-sizing: border-box; }

/* -------------------------
   Headline
-------------------------- */
.r-headline {
  text-align: center;
  font-weight: bold;
  font-size: min(4vw, 28px);
  text-transform: uppercase;
  margin-left: 20%;
  margin-right: 20%;
  margin-bottom: 5%;
}

/* -------------------------
   Grid Layout
-------------------------- */
.compare-list {
  display: grid;
  gap: 40px;
  justify-content: center;
  padding: 0 20px 100px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.compare-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.compare-title {
  margin: 0 0 16px;
  text-align: center;
  font-size: min(3vw, 24px);
  font-weight: bold;
}

.compare-media {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* -------------------------
   Vorher/Nachher Container
-------------------------- */
.img-comp-container {
  position: relative;
  height: 333px;
  width: 500px;
  border-radius: 16px;
  overflow: hidden;
  flex: 0 0 500px;
}

.img-comp-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.img-comp-img img {
  display: block;
  vertical-align: middle;
}

.image-comp {
  width: 500px;
  height: 333px;
}

/* -------------------------
   Slider Button (Standard)
-------------------------- */
.img-comp-slider {
  position: absolute;
  z-index: 9;
  cursor: ew-resize;

  width: 40px;
  height: 40px;

  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  font-size: 18px;
  user-select: none;

  background-color: rgba(135, 191, 164, 0.7);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

  /* Startzustand: sichtbar */
  opacity: 1;
}

/* =========================================================
   Hint-Animation (Overlay + Slider-Position)
   UND: Slider erst nach der Animation sichtbar machen
   ========================================================= */

/* ===== Hint-Animation: Overlay bewegt sich + Ghost-Handle zeigt Bedienung ===== */

@keyframes hintMoveOverlay {
  0%   { width: 10%; }
  50%  { width: 90%; }
  100% { width: 10%; }
}

/* Der Ghost-Handle bewegt sich synchron zur Overlay-Kante */
@keyframes hintMoveHandle {
  0%   { left: 10%; }
  50%  { left: 90%; }
  100% { left: 10%; }
}

/* Während hint: echter Slider unsichtbar und nicht klickbar */
.img-comp-container.hint .img-comp-slider {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Overlay animieren */
.img-comp-container.hint .img-comp-img.img-comp-overlay {
  animation: hintMoveOverlay 2.5s ease-in-out 1s 2;
  will-change: width;
}

/* Ghost-Handle als Pseudo-Element (statt echter Button) */
.img-comp-container.hint::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);
  z-index: 10;

  width: 40px;
  height: 40px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  font-size: 18px;
  user-select: none;

  background-color: rgba(135, 191, 164, 0.7);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);

  animation: hintMoveHandle 2.5s ease-in-out 1s 2;
  will-change: left;
}


.img-comp-container.hint .img-comp-img.img-comp-overlay {
  animation: hintMoveOverlay 2.5s ease-in-out 1s 2;
  will-change: width;
}

.img-comp-container.hint .img-comp-slider {
  will-change: left, opacity;
}

/* -------------------------
   Mobile Anpassung
-------------------------- */
@media (max-width: 768px) {
  .img-comp-container {
    height: 167px;
    width: 251px;
    border-radius: 16px;
    overflow: hidden;
    flex: 0 0 251px;
  }

  .image-comp {
    width: 251px;
    height: 167px;
  }
}