:root{ --gm-red:#C40015; --gm-black:#111; --gm-white:#fff; }

.gm-slider--beforeafter{ background:#000; color:var(--gm-white); position:relative; overflow:hidden; margin:16px 0; }
.gm-ba{ position:relative; width:100%; max-width:1400px; margin:0 auto; aspect-ratio:16/9; --cut:50%; }

/* Beide Bilder füllen den Container, gleicher Maßstab (object-fit:cover) */
.gm-ba__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gm-ba__img--after{ z-index:1; }
/* Vorhang-Effekt: Bild bleibt in voller Größe, nur der sichtbare Bereich ändert sich */
.gm-ba__img--before{
  z-index:2;
  /* schiebt eine "Schnittkante" von links nach rechts */
  clip-path: inset(0 calc(100% - var(--cut)) 0 0);
}

/* Griff auf der Schnittkante */
.gm-ba__handle{
  position:absolute; top:0; bottom:0;
  left:var(--cut); transform:translateX(-1px);
  width:0; outline:none; z-index:3;
}
.gm-ba__tick{
  position:absolute; top:50%; left:-16px; transform:translateY(-50%);
  width:32px; height:32px; border-radius:50%;
  background:var(--gm-red); border:2px solid #fff; box-shadow:0 2px 14px rgba(0,0,0,.35);
}

/* Labels */
.gm-ba__badge{
  position:absolute; top:12px; padding:6px 10px; font-weight:700;
  background:rgba(0,0,0,.55); color:#fff; z-index:4;
  border-left:4px solid var(--gm-red);
}
.gm-ba__badge--left{ left:12px; }
.gm-ba__badge--right{ right:12px; border-left:none; border-right:4px solid var(--gm-red); }