.preview {
    height: 300px;
    
    overflow: hidden;
    margin-bottom: 20px;
    display: flex; /* Flexbox aktivieren */
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
}

.preview img {
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
}

.thumbnails {
    max-height: 250px; /* Höhe der Thumbnails */
    overflow-y: auto; /* Vertikale Scrollleiste anzeigen, wenn nötig */
    max-width: 100%; /* Maximale Breite für den Container */
    overflow-x: auto; /* Horizontale Scrollleiste anzeigen, wenn nötig */
    overflow: auto; /* Ermöglicht Scrollen in beiden Richtungen */
    white-space: nowrap; /* Verhindert das Umbruch von Elementen */
    display: flex; /* Flexbox aktivieren */
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
    flex-wrap: wrap; /* Erlaubt das Umfließen der Thumbnails in die nächste Zeile */
    
}

.thumbnails img {
    width: 100px; /* Breite der Thumbnails */
    height: auto;
    margin-right: 10px;
    cursor: pointer;
    padding: 2px;
}

.thumbnails::-webkit-scrollbar {
    height: 10px; /* Höhe der horizontalen Scrollleiste */
    width: 10px; /* Breite der vertikalen Scrollleiste */
}

.thumbnails::-webkit-scrollbar-thumb {
    background: #f37d51; /* Farbe des Scrollbalkens */
    border-radius: 5px; /* Abgerundete Ecken */
}

.thumbnails::-webkit-scrollbar-thumb:hover {
    background: #f37d51; /* Farbe des Scrollbalkens bei Hover */
}