.pulse-cta { 
  --btn-size: 130px; /* Größe des Buttons */
  inline-size: var(--btn-size);
  block-size: var(--btn-size);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: radial-gradient(60% 60% at 50% 50%, #111 0%, var(--primary) 100%);
  color: var(--button-color); /* Play-Symbol + Puls in Accent */
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--primary) 50%, black);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  outline: none;
  z-index: 10;
}

.pulse-cta .icon {
  inline-size: 40%;
  block-size: 40%;
  fill: currentColor;
  transform: translateX(2%);
}

/* Puls-Effekt */
.pulse-cta::before,
.pulse-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--button-color);
  animation: pulse 2.2s ease-out infinite;
}

.pulse-cta::after {
  animation-delay: 1s;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 80%, transparent); opacity: 1; }
  70%  { box-shadow: 0 0 0 28px color-mix(in srgb, var(--powered-by-color) 0%, transparent); opacity: .4; }
  100% { box-shadow: 0 0 0 40px transparent; opacity: 0; }
}

/* Hover/Focus */
.pulse-cta:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 28px -6px color-mix(in srgb, var(--primary) 60%, black);
}

.pulse-cta:active {
  transform: scale(.95);
}

.pulse-cta:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--powered-by-color) 30%, transparent),
              0 8px 24px -6px color-mix(in srgb, var(--primary) 60%, black);
}

/* Bewegungen reduzieren */
@media (prefers-reduced-motion: reduce) {
  .pulse-cta::before,
  .pulse-cta::after { animation: none; }
}