:root {
  --shine-interval: 7s;
  /* Intervall der Auto-Animation */
  --shine-hover: 2s;
  /* Dauer des Hover-Shines */
  --shine-angle: 120deg;
  --shine-opa: 0.55;
  /* Helligkeit des Scheiners */
}

/* Basis */
.shine-btn {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  color: #fff;
  /*background: #0077ff;*/
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
}

/* Gemeinsamer Look für beide Layer */
.shine-btn::before,
.shine-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    var(--shine-angle),
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, var(--shine-opa)) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
}

/* HOVER: separater Layer -> funktioniert immer */
.shine-btn:hover::after {
  animation: shine var(--shine-hover) ease both;
}

/* AUTO: läuft auf ::before */
.shine-btn.shine-auto::before {
  /* Name per Klasse oder per --shine-loop-name (JS, optional) */
  animation: var(--shine-loop-name, shine-loop-15) var(--shine-interval) ease-in-out infinite;
}

/* Optional: Auto-Loop während Hover pausieren */
.shine-btn.shine-auto.pause-on-hover:hover::before {
  animation-play-state: paused;
}

/* Keyframes */
@keyframes shine {
  0% {
    left: -75%;
  }

  100% {
    left: 125%;
  }
}

/* Auto-Loop mit "Pause" durch stehende Endphase.
   (CSS-Variablen sind in %-Keyframes NICHT erlaubt, daher feste Varianten) */
@keyframes shine-loop-10 {
  0% {
    left: -75%;
  }

  10% {
    left: 125%;
  }

  /* kurzer Sweep */
  100% {
    left: 125%;
  }

  /* Pause */
}

@keyframes shine-loop-15 {
  0% {
    left: -75%;
  }

  15% {
    left: 125%;
  }

  100% {
    left: 125%;
  }
}

@keyframes shine-loop-20 {
  0% {
    left: -75%;
  }

  20% {
    left: 125%;
  }

  100% {
    left: 125%;
  }
}