/* === 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;
}

.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;
}

@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 === */
@media (max-width: 768px) {
  .desktop-banner-zone,
  .side-banner.left-banner-zone,
  .side-banner.right-banner-zone {
    display: none !important;
  }

  .mobile-banner-zone {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 1rem;
  }
}

.side-banner .rotating-banner-img {
  transition: transform 0.3s ease, max-height 0.3s ease;
}

@media (max-height: 900px) {
  .side-banner .rotating-banner-img {
    transform: scale(0.75);
    max-height: 380px;
  }

  .desktop-banner-zone .rotating-banner-img {
    transform: scale(0.85);
  }
}

@media (max-width: 1366px) and (max-height: 900px) {
  .side-banner .rotating-banner-img {
    transform: scale(0.65);
    max-height: 320px;
  }

  .desktop-banner-zone .rotating-banner-img {
    transform: scale(0.75);
  }

  .left-banner-zone { left: 40px; }
  .right-banner-zone { right: 40px; }
}

@media (min-width: 1367px) and (max-width: 1440px) and (max-height: 900px) {
  .side-banner .rotating-banner-img {
    transform: scale(0.95);
    max-height: 320px;
  }

  .desktop-banner-zone .rotating-banner-img {
    transform: scale(0.75);
  }

  .left-banner-zone { left: 40px; }
  .right-banner-zone { right: 40px; }
}
@media (min-width: 1600px) and (max-width: 1920px) and (max-height: 1080px) {
  .side-banner .rotating-banner-img {
    transform: scale(1.5);
    max-height: 320px;
  }

@media (max-width: 1280px) and (max-height: 900px) {
  .side-banner .rotating-banner-img {
    transform: scale(1);
    max-height: 300px;
  }

  .desktop-banner-zone .rotating-banner-img {
    transform: scale(0.70);
  }

  .left-banner-zone { left: 20px; }
  .right-banner-zone { right: 20px; }
}

@media (min-width: 1900px) and (max-height: 900px) {
  .side-banner .rotating-banner-img {
    transform: scale(0.95);
    max-height: 480px;
  }
}

@media (min-height: 1000px) {
  .side-banner .rotating-banner-img,
  .desktop-banner-zone .rotating-banner-img {
    transform: scale(1) !important;
    max-height: 500px !important;
  }
}