#main-slider .carousel-item {
    height: 80vh;
    min-height: 400px;
    overflow: hidden;
  }
  
  #main-slider .carousel-item img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    filter: brightness(0.6); 
  }
  
  .carousel-caption {
    bottom: 20%;
  }
  
  .carousel-caption h2,
  .carousel-caption p {
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
  }

  
  @media (max-width: 576px) {
    .carousel-caption h2 {
      font-size: 1.5rem;
    }
  
    .carousel-caption p {
      font-size: 1rem;
    }
  
    .carousel-caption {
      bottom: 10%; /* etwas höher setzen auf kleinen Bildschirmen */
      padding: 0 1rem;
      text-align: center;
    }
  }