/* ESF CTA Button – Frontend Styles */

/* ── WRAPPER (fixed am Rand) ── */
.esf-cta-outer {
  position: fixed;
  z-index: 9999;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * RECHTS: Pill+Pfeil auf der LINKEN Seite (zeigt ins Seiteninnere).
 * Collapsed: Button fährt nach rechts aus dem Viewport, nur die
 * linke Pfeilspitze (~20 px) bleibt am rechten Rand sichtbar.
 */
.esf-cta-outer--right {
  right: 0;
  transform: translateX(calc(100% - 20px)) translateY(-50%);
}
.esf-cta-outer--right.esf-cta-visible {
  transform: translateX(0) translateY(-50%);
}

/*
 * LINKS: Pill+Pfeil auf der RECHTEN Seite (zeigt ins Seiteninnere).
 * Collapsed: Button fährt nach links aus dem Viewport, nur die
 * rechte Pfeilspitze (~20 px) bleibt am linken Rand sichtbar.
 */
.esf-cta-outer--left {
  left: 0;
  transform: translateX(calc(-80% + 20px)) translateY(-50%);
}
.esf-cta-outer--left.esf-cta-visible {
  transform: translateX(0) translateY(-50%);
}

/* ── LINK ── */
.esf-cta-btn__link {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFEE00;
  color: #111;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

/* Hover: Farbe bleibt schwarz, kein Underline */
.esf-cta-btn__link:hover,
.esf-cta-btn__link:focus {
  color: #111;
  text-decoration: none;
  background: #FFEE00;
}

/* ── RECHTS: flach rechts (Rand), Pill links ── */
.esf-cta-outer--right .esf-cta-btn__link {
  flex-direction: row;           /* Pfeil links, Text rechts */
  border-radius: 50px 0 0 50px; /* Pill links, flach rechts */
  padding: 14px 20px 14px 14px;
}

/* ── LINKS: flach links (Rand), Pill rechts ── */
.esf-cta-outer--left .esf-cta-btn__link {
  flex-direction: row;           /* Text links, Pfeil rechts */
  border-radius: 0 50px 50px 0; /* flach links, Pill rechts */
  padding: 14px 14px 14px 20px;
}

/* ── TEXT ── */
.esf-cta-btn__text {
  display: block;
}

/* ── PFEIL ── */
.esf-cta-btn__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.esf-cta-btn__arrow svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* ── WACKEL-ANIMATION (alle 10 s im eingeklappten Zustand) ── */
@keyframes esf-cta-wiggle {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(4px); }
  40%  { transform: translateX(-4px); }
  60%  { transform: translateX(3px); }
  80%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

.esf-cta-outer.esf-cta-wiggling .esf-cta-btn__arrow {
  animation: esf-cta-wiggle 0.6s ease both;
}

/* ── FOKUS (Barrierefreiheit) ── */
.esf-cta-btn__link:focus-visible {
  outline: 3px solid #111;
  outline-offset: 2px;
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .esf-cta-outer {
    transition: none;
  }
  .esf-cta-outer.esf-cta-wiggling .esf-cta-btn__arrow {
    animation: none;
  }
}