/* Haupt-Container für das Karussell */
.mein-carousel-container {
    width: 100%;
    max-width: auto;
    overflow: hidden;
    margin: auto;
    position: relative;
    border: 2px solid #333;
    border-radius: 10px;
}
  
  
  /* Track für das Scrollen der Bilder */
  .mein-carousel-track {
    display: flex;
    width: calc(200%); /* Breite verdoppeln für flüssige Bewegung */
    animation: mein-carousel-scroll 15s linear infinite;
  }
  
  /* Einzelne Bilder im Karussell */
  .mein-carousel-slide img {
    width: 100%; /* passt die Bilderbreite an die Container-Breite an */
    
    object-fit: cover;
    border-right: 2px solid #333;
  }
  
  /* Animation für die Endlosschleife */
  @keyframes mein-carousel-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Nur die Hälfte des Tracks verschieben */
  }
  
  .zentriert {
    text-align: center;
    margin-bottom:50px;
  }
  

  @media (max-width: 1000px) {
    .mein-carousel-container {
        max-width: 100%; /* Nutze die gesamte Breite auf kleinen Bildschirmen */
        border-radius: 5px;
        height: auto; /* Höhe des Containers für mobile Bildschirme vergrößern */

    }
    
    .mein-carousel-track {
        animation: mein-carousel-scroll 10s linear infinite; /* Eventuell Animation etwas beschleunigen */
    }
    
    .mein-carousel-slide img {
        border-right: 1px solid #333; /* Dünnere Abgrenzung auf kleineren Bildschirmen */
    }
}

/* Media Query für sehr kleine Bildschirme, z.B. unter 480px */
@media (max-width: 480px) {
    .mein-carousel-container {
        max-width: 100%;
        border-radius: 5px;
        height: 80px; /* Erhöhe die Höhe des Containers */
    }
    
    .mein-carousel-track {
        animation: mein-carousel-scroll 8s linear infinite; /* Leichte Beschleunigung für kleinere Bildschirme */
        width: 585%; /* Erhöhe die Breite des Tracks */
      }
    
    .mein-carousel-slide img {
      width: 100%; /* Passt die Bilderbreite an */
      height: 80px; /* Erhöhe die Höhe der Bilder */
      border-right: 1px solid #333;
      object-fit: cover; /* Skaliert die Bilder, um den Container zu füllen */
    }
}