@keyframes tuerchen-rotate {
  0%   { transform: rotateY(0deg); }
  25%  { transform: rotateY(15deg); }
  50%  { transform: rotateY(-15deg); }
  75%  { transform: rotateY(10deg); }
  100% { transform: rotateY(0deg); }
}

.tuerchen-animate {
  animation: tuerchen-rotate 1.5s ease-in-out;
  transform-style: preserve-3d;
}


@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9) rotateX(-10deg);
  }

  to {
    opacity: 1;
    transform: scale(1) rotateX(0deg);
  }
}

.animate-modal-open {
  animation: fadeInScale 2s ease-out forwards;
}


@keyframes popForward {
  0% {
    transform: scale(1) translateZ(0);
    z-index: 10;
  }

  50% {
    transform: scale(1.2) translateZ(50px) rotateX(5deg);
    z-index: 50;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
  }

  100% {
    transform: scale(1) translateZ(0);
    z-index: 10;
    box-shadow: none;
  }
}

.tuerchen-pop {
  animation: popForward 0.4s ease-out;
  will-change: transform;
}



/* Scrollbares Modal Fix */
.modal-scrollable {
    max-height: 90vh;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

.modal-scrollable::-webkit-scrollbar {
    width: 8px;
}

.modal-scrollable::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.modal-scrollable::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.modal-scrollable::-webkit-scrollbar-thumb:hover {
    background: #555;
}