{# IXTENSA #}
/* =========================================================
   IX Sticky CTA
   Das Button-Markup kommt aus macros_btn.get_buttons(),
   die Buttons tragen also die POWER-Klassen .pwr-cta--*.
   ========================================================= */

.ix-sticky-cta {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  max-width: calc(100vw - 32px);

  /* Der Wrapper darf keine Klicks abfangen, sonst liegt eine
     unsichtbare Flaeche ueber dem Seiteninhalt. */
  pointer-events: none;

  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.ix-sticky-cta--bottom-right { right: clamp(16px, 3vw, 32px); }
.ix-sticky-cta--bottom-left  { left: clamp(16px, 3vw, 32px); }

/* Wrapper-Klasse, die an get_buttons uebergeben wird */
.ix-sticky-cta__btns {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

/* Nur die Buttons selbst sind klickbar */
.ix-sticky-cta .pwr-cta {
  pointer-events: auto;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

/* -----------------------------------------------------
   Sichtbarkeit
   .is-armed setzt das JS beim Init. Ohne JS bleibt der
   Button dauerhaft sichtbar, bewusster Fallback.
   ----------------------------------------------------- */
.ix-sticky-cta.is-armed {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}

.ix-sticky-cta.is-armed.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* -----------------------------------------------------
   Ankersprung
   POWER rendert Anker als .pwr-anchor. Wert an die
   tatsaechliche Headerhoehe von Datagroup anpassen.
   ----------------------------------------------------- */
.pwr-anchor {
  scroll-margin-top: 120px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  .ix-sticky-cta { transition: none; }
  .ix-sticky-cta.is-armed { transform: none; }
}

/* -----------------------------------------------------
   Mobile
   ----------------------------------------------------- */
@media (max-width: 575px) {
  .ix-sticky-cta {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .ix-sticky-cta--bottom-right { right: 16px; }
  .ix-sticky-cta--bottom-left  { left: 16px; }

  /* Bei zwei Buttons untereinander statt nebeneinander */
  .ix-sticky-cta__btns {
    flex-direction: column;
    align-items: stretch;
  }

  .ix-sticky-cta .pwr-cta {
    max-width: calc(100vw - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}