/* =========================================================
   LEISTUNGEN – HOTSPOTS
   Alle Spot-Styles liegen ausschließlich in dieser Datei.
   Positionen kommen über --x und --y direkt aus dem HTML.
   ========================================================= */


/* ---------------------------------------------------------
   HOTSPOT
   --------------------------------------------------------- */

.leistung-spot {
  position: absolute;

  left: var(--x);
  top: var(--y);

  transform: translate(-50%, -50%);

  width: 30px;
  height: 30px;

  padding: 0;

  border: 0;
  border-radius: 50%;

  display: grid;
  place-items: center;

  background: transparent;

  color: #fff;

  cursor: pointer;
  touch-action: manipulation;

  z-index: 10;
}


/* ---------------------------------------------------------
   SICHTBARER MILCHGLAS-PUNKT
   --------------------------------------------------------- */

.leistung-spot-icon {
  display: block;

  width: 18px;
  height: 18px;

  object-fit: contain;

  padding: 3px;

  border: 3px solid #e02026;
  border-radius: 50%;

    background: none;
    -webkit-backdrop-filter: blur(2px) saturate(140%);
    backdrop-filter: blur(2px) saturate(140%);
    box-shadow: 0 5px 18px rgb(224 32 38 / 40%), inset 0 1px 0 rgba(0, 0, 0, 0.38);
    
  transition:
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}




/* dezenter Ring */

.leistung-spot::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 30px;
  height: 30px;

  transform: translate(-50%, -50%) scale(1);
    border: 1px solid var(--pow-rot);
  border-radius: 50%;

  pointer-events: none;

  animation: leistungSpotPulse 2.4s ease-out infinite;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

.leistung-spot:hover .leistung-spot-icon,
.leistung-spot:focus-visible .leistung-spot-icon {
  transform: scale(1.13);

  background: rgba(255, 255, 255, .30);

  box-shadow:
    0 7px 22px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .5);
}


/* ---------------------------------------------------------
   AKTIVER SPOT
   Plus wird zum X
   --------------------------------------------------------- */

.leistung-spot.is-active .leistung-spot-icon {
  transform: scale(1.2);
  background: rgba(255,255,255,.34);
}


/* ---------------------------------------------------------
   PULS
   --------------------------------------------------------- */

@keyframes leistungSpotPulse {

  0% {
    transform:
      translate(-50%, -50%)
      scale(.9);

    opacity: .75;
  }

  70%,
  100% {
    transform:
      translate(-50%, -50%)
      scale(1.65);

    opacity: 0;
  }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

  .leistung-spot {
    width: 40px;
    height: 40px;
  }

  .leistung-spot span {
    width: 28px;
    height: 28px;

    font-size: 20px;
  }

  .leistung-spot::before {
    width: 28px;
    height: 28px;
  }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .leistung-spot::before {
    animation: none;
  }

  .leistung-spot span {
    transition: none;
  }

}

.leistung-card-link {
  display: inline-flex;
  align-items: center;

  margin-top: 14px;
  padding: 9px 14px;

    border: 1px solid rgb(224 32 38 / 50%);
  border-radius: 8px;

    background: rgb(17 17 17 / 20%);

  color: #fff;
  text-decoration: none;
  font-weight: 700;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition:
    background .2s ease,
    border-color .2s ease;
}

.leistung-card-link:hover {
  background: rgba(255,255,255,.16);
  border-color: #fff;
}

.leistung-card-link[hidden] {
  display: none;
}