/* ===== STATIC CONFIG ===== */
.cfbWrap{
  position: fixed;
  right: 16px;
  bottom: 50px;
  display: flex;
  flex-direction: column;
  gap: 50px; /* <<< mehr Abstand, damit Pulse-Ringe nicht überlappen */
  z-index: 9999;
}

/* Button = Icon only (no background) */
.cfbBtn{
  width: 56px;
  height: 56px;
  display: block;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;

  animation: cfbNudge 2.8s ease-in-out infinite;
  transition: transform .15s ease, filter .15s ease;
}

.cfbBtn:hover{
  transform: scale(1.08);
  filter: brightness(1.06);
}

.cfbBtn:active{
  transform: scale(.96);
}

/* Icon */
.cfbIcon{
  width: 56px;
  height: 56px;
  display: block;
  position: relative;
  z-index: 2;
}

.cfbImgIcon{
  width: 56px;
  height: 56px;
  display: block;
}

/* ===== Pulse Rings ===== */
.cfbPulse{
  position: absolute;
  inset: -8px;          /* etwas größerer Ring */
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.cfbPulse::before,
.cfbPulse::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  opacity: 0;
  transform: scale(.75);
  will-change: transform, opacity;
}

/* WhatsApp (grün) */
.cfbBtnWa .cfbPulse::before,
.cfbBtnWa .cfbPulse::after{
  border-color: rgba(37, 211, 102, .8);
  filter: drop-shadow(0 0 12px rgba(37, 211, 102, .45));
}

/* Phone (ROT #d84019) */
.cfbBtnTel .cfbPulse::before,
.cfbBtnTel .cfbPulse::after{
  border-color: rgba(216, 64, 25, .9);      /* #d84019 */
  filter: drop-shadow(0 0 14px rgba(216, 64, 25, .55));
}

/* Ring animations */
.cfbPulse::before{
  animation: cfbRing 1.4s ease-out infinite;
}

.cfbPulse::after{
  animation: cfbRing 1.4s ease-out infinite;
  animation-delay: .6s;
}

@keyframes cfbRing{
  0%   { transform: scale(.75); opacity: .9; }
  65%  { opacity: .35; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Attention nudge */
@keyframes cfbNudge{
  0%, 85%, 100% { transform: translateY(0); }
  88% { transform: translateY(-6px); }
  91% { transform: translateY(0); }
  94% { transform: translateY(-3px); }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .cfbBtn{ animation: none !important; transition: none !important; }
  .cfbPulse::before,
  .cfbPulse::after{ animation: none !important; opacity: 0 !important; }
  .cfbBtn:hover{ transform: none !important; }
}