/* Animierbare Grid-Contents */
.grid-stack-item-content {
  transition: transform 0.5s ease !important;
  z-index: 20;
}
.grid-stack-item-content.animate-active {
  transform: translate(0, 0);

  opacity: 1;
}

/* Animate-In */
.animate-in-left {
  transform: translateX(-240%);
}
.animate-in-right {
  transform: translateX(240%);
}
.animate-in-up {
  transform: translateY(240%);
}
.animate-in-down {
  transform: translateY(-240%);
}
.animate-in-none {
  opacity: none;
  transform: translate(0, 0);
} /* bewusst beibehalten */

/* Animate-Out (aktiv während Exit) */
.grid-stack-item-content.animate-out-right.animate-out-active {
  transform: translateX(240%);
  transition: transform 0.3s ease;
}
.grid-stack-item-content.animate-out-left.animate-out-active {
  transform: translateX(-240%);
  transition: transform 0.3s ease;
}
.grid-stack-item-content.animate-out-up.animate-out-active {
  transform: translateY(-240%);
  transition: transform 0.3s ease;
}
.grid-stack-item-content.animate-out-down.animate-out-active {
  transform: translateY(240%);
  transition: transform 0.3s ease;
}
.grid-stack-item-content.animate-out-active {
  z-index: 10 !important;
}
.animate-out-none {
  opacity: 0;
}

/* Gallery Animate out */

.grid-stack-item.animate-out {
  transition: transform 0.8s ease-in-out !important;
}

/* Keyframes */
@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Fixed Kachel */

/* Scrollcontainer ist .grid-stack-secondary (hast du schon) */
.grid-stack-secondary {
  position: relative;
  overflow-y: auto; /* wichtig: hier wird gescrollt */
}

/* Nur in diesem Container: Kacheln mit Sticky haben sticky-Content */
.grid-stack-secondary
  .grid-item-sticky-y
  .grid-stack-item-content:not(.scroll-up) {
  position: sticky;
  top: var(--sticky-top, 0px) !important; /* wird per JS gesetzt */
}

.scroll-up {
  position: sticky !important;

  top: calc(100vh - 60px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease !important;
  z-index: 50 !important;
}

.scroll-up.scroll-up-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}