/*
 * Platz für eigene Änderungen direkt als CSS
 * Die hier gemachten Änderungen überschreiben ggfs. andere Styles, da diese Datei als letzte geladen wird.
 */
 
 /* Breadcrumbs visuell ausblenden, im Quellcode für SEO behalten */
#breadcrumb { display: none !important; }
.breadcrumb-wrapper { display: none !important; }


/* Container für die absolute Positionierung vorbereiten */
.image-hover-switch {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
}

/* Grundeinstellungen für beide Bilder */
.image-hover-switch img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease-in-out;
}

/* Das zweite Bild unsichtbar über das erste legen */
.image-hover-switch .img-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

/* Der Wechsel-Effekt bei Mouseover */
.image-hover-switch:hover .img-hover {
    opacity: 1;
}

/* Mobile Optimierung: Verhindert Layout-Flackern auf Touchscreen-Geräten */
@media (pointer: coarse) {
    .image-hover-switch:active .img-hover {
        opacity: 1;
    }
}