/* Effektgruppe: images/magnifier; Reihenfolge in inc/assets.php. */

.image-magnifier {
    position: relative;
    display: block !important;
    cursor: crosshair;
    /* Jetzt explizit auf visible, damit die Linse überstehen darf */
    overflow: visible !important; 
    z-index: 10 !important;;
}

.image-magnifier img {
    display: block;
    width: 100%;
    height: auto;
    /* Wichtig, damit die Linse sich auf das Bild bezieht */
    pointer-events: all; 
}

.magnifier-lens {
    position: absolute;
    width: 400px;
    height: 400px;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    pointer-events: none;
    display: none;
    z-index: 9999!important;; /* Sehr hoch, damit sie über anderen Elementen schwebt */
    background-repeat: no-repeat;
    background-color: #fff;
}

/* Zeigt die Linse nur, wenn man über dem Container ist */
.image-magnifier:hover .magnifier-lens {
    display: block;
}