.top10-section {
  margin: 3rem 0;
  padding: 0 4%;
}

.section-title {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  font-weight: bold;
  color: #fff;          /* Netflix-Rot oder deine Farbe */
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.slider-container {
  position: relative;
}

.slider-track {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 1.2rem;
  padding: 1rem 0;
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge */
}

.slider-track::-webkit-scrollbar {
  display: none;                   /* Chrome/Safari */
}

.slide {
  flex: 0 0 auto;
  width: 220px;                    /* feste Breite – passe bei Bedarf an (z. B. 240px, 280px) */
  height: 330px;                   /* feste Höhe – wichtig! Wähle ein gutes Verhältnis, z. B. 2:3 */
  position: relative;
  border-radius: 8px;
  overflow: hidden;                /* schneidet überstehende Teile ab */
  background: #111;                /* dunkler Hintergrund für transparente/weiße Bilder */
  transition: transform 0.4s ease, box-shadow 0.3s;
}

.slide img {
  width: 100%;
  height: 100%;                    /* füllt den gesamten Container */
  object-fit: cover;               /* schneidet ab, sodass nichts verzerrt wird */
  object-position: center;         /* zentriert das Bild */
  display: block;
  border-radius: 8px;
}

/* Hover-Effekt bleibt gleich */
.slide:hover {
  transform: scale(1.05);
  z-index: 10;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7);
}

/* Rank-Nummer bleibt oben links oder unten links – hier z. B. unten groß */
.rank {
  position: absolute;
  bottom: 10px;                    /* etwas nach unten verschieben, damit sie "rausragt" */
  left: 12px;
  font-size: 4.5rem;               /* noch etwas größer für Netflix-Look */
  font-weight: bold;
  color: #fff;
  text-shadow: 4px 4px 10px #000;
  line-height: 0.8;
  pointer-events: none;
}

/* Pfeile */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  font-size: 3rem;
  width: 50px;
  height: 80px;
  cursor: pointer;
  z-index: 20;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.slider-arrow:hover { opacity: 1; }

.prev { left: 0; }
.next { right: 0; }

@media (min-width: 900px) {
  .slide {
    width: 260px;
    height: 390px;
  }
}

@media (min-width: 1400px) {
  .slide {
    width: 300px;
    height: 450px;
  }
}