/* Standardstil (Desktop) – bleibt wie bisher */
.scroll-button {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.9) !important;
  transition: transform 0.4s ease !important;
  z-index: 9999 !important;
  display: inline-block !important;
}

body.scrolled .scroll-button {
  top: auto !important;
  bottom: 10px !important;
  left: 50% !important;
  transform: translate(-50%, 18%) scale(0.5) !important;
}

/* Smartphones Portrait bis 480 Pixel */
@media (max-width: 480px) {
  .scroll-button {
    top: 60% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.7) !important;
  }

  body.scrolled .scroll-button {
    bottom: 15px !important;
    left: 50% !important;
    transform: translate(-50%, 30%) scale(0.40) !important;
  }
}

/* Smartphones Landscape bis 900 Pixel */
@media (max-width: 900px) and (orientation: landscape) {
  .scroll-button {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.85) !important;
  }

  body.scrolled .scroll-button {
    bottom: 10px !important;
    left: 50% !important;
    transform: translate(-50%, 0) scale(0.3) !important;
  }
}

/* Tablets Portrait (768px – 1024px) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .scroll-button {
    top: 55% !important;
    left: 60% !important;
    transform: translate(-50%, -50%) scale(1.0) !important;
  }

  body.scrolled .scroll-button {
    bottom: 20px !important;
    left: 60% !important;
    transform: translate(-50%, 0) scale(0.4) !important;
  }
}

/* Tablets Landscape (768px – 1024px) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .scroll-button {
    top: 50% !important;
    left: 70% !important;
    transform: translate(-50%, -50%) scale(0.95) !important;
  }

  body.scrolled .scroll-button {
    bottom: 20px !important;
    left: 70% !important;
    transform: translate(-50%, 0) scale(0.35) !important;
  }
}