.viewport-gallery {
    display: flex;
    gap: 10px;
}

.viewport-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.viewport-thumb {
    width: 70px;
    height: 70px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
	transition: border-color 1s ease;
}

.viewport-thumb:hover {
    border-color: #000;
}

.viewport-selected {
    position: relative;
}

.viewport-selected img {
    width: 450px;
    height: 450px;
    object-fit: contain;
    border: 1px solid #ddd;
    cursor: zoom-in; /* Setzt den Mauszeiger auf ein Lupen-Symbol */
}

.selected-thumb {
    border: 3px solid #888; /* Fetter roter Rahmen für das ausgewählte Thumbnail */
}

#viewport-zoom-lens {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid #000;
    background: rgba(255, 255, 255, 0.3);
    pointer-events: none;
    display: none;
}

#viewport-zoom-result {
    position: absolute;
    left: 470px;
    top: 80px;
    width: 300px;
    height: 300px;
    background-repeat: no-repeat;
    border: 2px solid #fff;
    display: none;
    box-shadow: 2px 2px 15px #00000088;
    border-radius: 20%;
}