.slideshow-container {
scroll-behavior: smooth;
display: flex;
overflow-x: auto;
gap: 12px;
padding: 12px;
background-color: #1b1b1b;
border-radius: 10px;
user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.gallery-item {
flex: 0 0 auto;
text-align: center;
}

.slideshow-img {
cursor: pointer;
height: 170px;
width: auto;
border: 1px solid #000;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
transition: transform 0.25s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
}

.slideshow-img:hover {
transform: scale(1.05);
}

.slideshow-caption {
margin-top: 5px;
font-size: 0.875rem;
font-style: italic;
color: #D0D0D0;
}

.modal {
z-index: 99999;
overflow: auto; 
position: fixed;
display: none;
top: 0;
left: 0;
width: 100%; 
height: 100%;
padding-top: 60px;
background-color: rgba(0,0,0,0.9); 
}

.modal-content {
position: relative;
display: block;
object-fit: contain;
top: -48px;
max-height: 80vh;
max-width: 90vw;
width: auto;
height: auto;
margin: 0 auto;
border-radius: 12px;
}

.modal-caption {
margin: auto;
display: block;
padding: 10px 0;
text-align: center;
color: #CCCCCC;
}

.modal-close {
position: absolute;
top: 20px;
right: 35px;
cursor: pointer;
font-size: 2.5rem;
font-weight: bold;
color: #FFFFFF;
}

.modal-prev, .modal-next {
z-index: 9999;
position: absolute;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 2.5rem;
font-weight: bold;
cursor: pointer;
user-select: none;
padding: 10px;
}

.modal-prev { left: 20px; }
.modal-next { right: 20px; }

.modal-prev, .modal-next {
opacity: 0.5;
color: #FFFFFF;
text-shadow: 0 0 4px #000, 0 0 6px #000, 0 0 10px #000;
}

.modal-prev:hover, .modal-next:hover, .modal-close:hover {  color: #CCCCCC;  }

.slideshow-container::-webkit-scrollbar {
  width: 10px;
  height: 10px; /* für horizontales scrollen! */
}

.slideshow-container::-webkit-scrollbar-track {
  background: #1b1b1b; /* passt zum container background */
  border-radius: 10px;
}

.slideshow-container::-webkit-scrollbar-thumb {
  background-color: #555555; /* dunkelgrau */
  border-radius: 10px;
  border: 2px solid #1b1b1b;
}

.slideshow-container::-webkit-scrollbar-thumb:hover {
  background-color: #777777; /* heller beim hover */
}

/* Firefox */
.slideshow-container {
  scrollbar-width: thin;
  scrollbar-color: #555555 #1b1b1b;
}

.tastatur {
display: inline-block;
  padding: 4px 8px;  /* war 8px 12px */
  margin: 0 3px;      /* war 0 5px */
  background: linear-gradient(to bottom, #404040, #2a2a2a);
  border: 2px solid #555555;
  border-radius: 5px;
  color: #D0D0D0;
  font-weight: bold;
  box-shadow: 0 2px 0 #1a1a1a, 0 3px 6px rgba(0,0,0,0.5);  /* etwas kleiner */
  text-align: center;
  font-size: 0.875rem;
}

.tastatur:active {
transform: translateY(1px);
box-shadow: 0 1px 0 #1a1a1a, 0 2px 4px rgba(0,0,0,0.5);
}


@media screen and (max-width: 922px) {

.slideshow-container::-webkit-scrollbar { display: none;  }

.slideshow-container {
-ms-overflow-style: none;
scrollbar-width: none;
padding: 12px 12px 0 12px;
}

.modal-content {
top: 0;
max-height: 70vh;
}
  
.modal-next, .modal-prev { 
top: 80%;
font-size: 30px;
}

}