* {
    box-sizing: border-box;
}

.wrapper {
    display: flex; 
    max-width: 650px;
    width: 100%;
    height: 400px;
    background: #fff;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 18px;
}

.wrapper img {
    width: 20px; 
    height: auto;
}

.wrapper img.button {
    position: absolute;
    z-index: 100;
}

#prev {
    left: 30px;
    top: 48%;
}

#next {
    right: 30px;
    top: 48%; 
}

.image-container {
    height: 380px;
    max-width: 480px;
    width: 100%;
    overflow: hidden; 
    position: relative;
}

.image-container .carousel {
    display: flex; 
    height: 100%;
    width: 100%;
}

.carousel img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border: 10px solid #fff;
    border-radius: 18px; 
}

.img-carousel {
    height: 100%;
    min-width: 100%;
    object-fit: cover;
    border: 10px solid #fff;
    border-radius: 18px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.img-carousel.active {
    opacity: 1;
    pointer-events: auto;
}

.carousel {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
}



@media (max-width: 480px) {

  .wrapper {
    width: 100%;            
    height: 320px;          
    border-radius: 0;      
    overflow: hidden;      
    position: relative;
    padding: 0%;
    margin: 0;
  }

  .image-container {
    width: 100vw;           
    height: 100%;
    border-radius: 0;      
  }

  .img-carousel {
    border-radius: 0;       
    border: none;           
    min-width: 100%;       
  }

  /* Pfeile nach innen verschieben */
  #prev {
    position: absolute;
    left: 20px;
    top: 50%;
  }

  #next {
    right: 20px;
    top: 50%;
  }

  .wrapper img.button {
    width: 32px;
    opacity: 0.8;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3));
  }
}