body {
  margin: 0;
  padding: 0;
  background: transparent; /* kein grauer Seitenhintergrund */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.banner-300x250 {
  width: 300px;
  max-height: 250px;   /* maximale Höhe auf 250px begrenzen */
  overflow: hidden;
  position: relative;
  background: transparent;
}

.slides {
  display: flex;
  width: calc(300px * 5); /* 5 Bilder */
  height: auto;
  animation: slideAnimation 18s infinite;
}

.slides img {
  width: 300px;
  max-height: 250px;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}

/* Animation für kleine Banner (300px Breite) */
@keyframes slideAnimation {
  0%    { transform: translateX(0); }
  20%   { transform: translateX(0); }

  25%   { transform: translateX(-300px); }
  45%   { transform: translateX(-300px); }

  50%   { transform: translateX(-600px); }
  70%   { transform: translateX(-600px); }

  75%   { transform: translateX(-900px); }
  95%   { transform: translateX(-900px); }

  100%  { transform: translateX(-1200px); }
}

/* --- AB 600px Bildschirmbreite --- */
@media (min-width: 600px) {
  .banner-300x250 {
    width: 600px;
    max-height: 500px;
  }

  .slides {
    width: calc(600px * 5); /* neue Gesamtbreite für 5 Bilder */
    animation: slideAnimationLarge 18s infinite;
  }

  .slides img {
    width: 600px;
    max-height: 500px;
  }

  /* Neue Animation für große Banner (600px Breite) */
  @keyframes slideAnimationLarge {
    0%    { transform: translateX(0); }
    20%   { transform: translateX(0); }

    25%   { transform: translateX(-600px); }
    45%   { transform: translateX(-600px); }

    50%   { transform: translateX(-1200px); }
    70%   { transform: translateX(-1200px); }

    75%   { transform: translateX(-1800px); }
    95%   { transform: translateX(-1800px); }

    100%  { transform: translateX(-2400px); }
  }
}

/* ---------- NEU: Anzeige-Label oben rechts ---------- */
.ad-label {
  position: absolute;
  top: 5px;
  right: 8px;
  font-family: 'Heebo', sans-serif;
  font-size: 12px;
  color: #ffffff;
  text-align: right;
  z-index: 10; /* liegt über den Bildern */
}