/* === Banner-Zonen === */
.banner-zone {
  display: none;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin: 1rem auto;
  text-align: center;
}

.desktop-banner-zone {
  display: flex;
}

.mobile-banner-zone {
  display: none;
}

/* === Banner Link: Grundzustand === */
.rotating-banner-link {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 5.5s ease, transform 5.5s ease;
  pointer-events: none;
  visibility: hidden;
  position: absolute;
}

/* === Aktive Banner === */
.rotating-banner-link.active-banner {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  position: relative;
  animation: bannerFloat 12s ease-in-out infinite;
}

/* === Orbit-Animation === */
@keyframes bannerFloat {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-6px) scale(1.03); }
  100% { transform: translateY(0) scale(1); }
}
.rotating-banner-link {
  visibility: hidden;
}

.rotating-banner-link.active-banner {
  visibility: visible;
}

.rotating-banner-img {
  max-height: 600px;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.3);
  transition: transform 0.3s ease;
}

.rotating-banner-img:hover {
  transform: scale(1.05);
}
.side-banner {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
}

.left-banner-zone {
  left: 80px;
  padding-left: 10px;
}

.right-banner-zone {
  right: 80px;
  padding-right: 10px;
}

.side-banner .rotating-banner-link {
  display: block;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 2.5s ease, transform 2.5s ease;
  pointer-events: none;
  visibility: hidden;
  position: absolute;
}

.side-banner .rotating-banner-link.active-banner {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
  position: relative;
  animation: bannerFloat 8s ease-in-out infinite;
}
.large-banner-zone {
  display: flex;
  justify-content: center;
  margin: 2rem auto;
  gap: 20px;
  flex-wrap: wrap;
}

.large-banner-zone .rotating-banner-img {
  max-width: 100%;
  max-height: 250px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
  transition: transform 0.4s ease;
}

.large-banner-zone .rotating-banner-img:hover {
  transform: scale(1.05);
}
/* === Mobile Sichtbarkeit === */
@media (max-width: 768px) {
  .desktop-banner-zone {
    display: none !important;
  }

  .mobile-banner-zone {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 1rem;
  }
}
@media (max-width: 768px) {
  .side-banner.left-banner-zone,
  .side-banner.right-banner-zone {
    display: none !important;
  }
}
@media (max-width: 1024px) {
  .side-banner.left-banner-zone,
  .side-banner.right-banner-zone {
    display: none !important;
  }
}
@media (max-width: 1200px) {
  .side-banner.left-banner-zone,
  .side-banner.right-banner-zone {
    display: none !important;
  }
}