/* Wrapper für alles (Bild + Thumbnails) */
#mainImageWrapper {
    /* position: relative;  <- BRAUCHST DU JETZT NICHT MEHR FÜR DIE PFEILE */
    max-width: 800px;
    margin: 0 auto;
}

/* NEU: Container nur fürs Hauptbild + Buttons */
.main-image-container {
    position: relative;

    /* WICHTIG: Bezugspunkt für .nav-btn */
}

/* Hauptbild */
#mainImage {
    width: 100%;
    height: auto;
    display: block;
}

/* Navigation-Buttons – Optik bleibt wie bei dir */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    border: none;
    color: white;
    font-size: 2rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.nav-btn.left {
    left: 10px;
}

.nav-btn.right {
    right: 10px;
}

/* Thumbnails */
.thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    justify-content: flex-start;
}

.thumb-img {
    cursor: pointer;
    transition: transform 0.2s;
    width: 98px;
    border: 1px solid transparent;
    border-color: #fcfcec;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .thumb-img {
        width: 70px;

        /* ca. 75 % von 98px */
        padding: 0;

        /* ganz wichtig */
        background-color: transparent;
        border: 3px solid #fcfcec;
        box-sizing: border-box;

        /* sorgt für saubere Berechnung */
    }
}

.thumb-img:hover {
    transform: scale(1.08);
}

.thumb-img.active {
    transform: scale(1.08);
}