/**
 * Hover-Zoom CSS
 * ===============
 * Styles für den Hover-Zoom-Effekt auf Bildern.
 * Zusammen mit /assets/js/hover-zoom.js verwenden.
 *
 * Datei: /assets/css/hover-zoom.css
 * Erstellt: 2026-02-17
 */

/* Zoom-Fenster (wird per JS positioniert) */
.hz-zoom-window {
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Lupe auf dem Bild */
.hz-zoom-lens {
    border-radius: 2px;
}

/* Bilder mit Hover-Zoom: Cursor ändern */
a[data-hover-zoom] {
    cursor: crosshair;
}

a[data-hover-zoom] img {
    transition: box-shadow 0.2s ease;
}

/* Dezenter Hover-Effekt auf dem Bild */
a[data-hover-zoom]:hover img {
    box-shadow: 0 0 0 2px rgba(112, 169, 30, 0.3);
}

/* Auf Touch-Geräten: normaler Cursor */
@media (hover: none) and (pointer: coarse) {
    a[data-hover-zoom] {
        cursor: pointer;
    }

    a[data-hover-zoom]:hover img {
        box-shadow: none;
    }
}

/* Auf kleinen Bildschirmen (< 768px): Zoom-Fenster ausblenden */
@media (max-width: 767px) {
    .hz-zoom-window,
    .hz-zoom-lens {
        display: none !important;
    }

    a[data-hover-zoom] {
        cursor: pointer;
    }
}