/* ===== FRONTEND: Animation aktiv, aber NICHT im Elementor Editor ===== */
body:not(.elementor-editor-active) .stagger-item {
  opacity: 0;
  filter: blur(12px);
  transition: opacity 0.8s ease-out, filter 0.8s ease-out;
  will-change: opacity, filter;
}

body:not(.elementor-editor-active) .stagger-item.is-visible {
  opacity: 1;
  filter: blur(0);
}

/* ===== ELEMENTOR EDITOR: Immer sichtbar + Markierung ===== */
body.elementor-editor-active .stagger-item {
  opacity: 1 !important;
  filter: none !important;
  position: relative;
  outline: 1px dashed rgba(0, 150, 255, 0.7); /* leichte visuelle Markierung */
}

body.elementor-editor-active .stagger-item::after {
  content: "Stagger-Effekt";
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1;
  background: rgba(0, 150, 255, 0.1);
  border: 1px solid rgba(0, 150, 255, 0.7);
  border-radius: 3px;
  color: #0073aa;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  pointer-events: none;
  z-index: 10;
}