/*
 * overflow-fix.css
 * ================
 * 
 * ANLEITUNG:
 * 1. Diese Datei als /css/overflow-fix.css speichern
 * 2. In wrn.php nach den anderen CSS-Links einfügen:
 *    <link rel="stylesheet" href="/css/overflow-fix.css">
 * 3. Browser-Cache leeren
 *
 * Behebt: Chrome DevTools Warnung "overflow: visible für img-, video- und canvas-Tags"
 */

/* Globaler Fix für alle Bilder, Videos und Canvas */
img,
video,
canvas {
    overflow: clip !important;
    overflow-clip-margin: content-box !important;
}

/* Fallback für ältere Browser ohne clip-Unterstützung */
@supports not (overflow: clip) {
    img,
    video,
    canvas {
        overflow: hidden !important;
    }
}

/* Container-Elemente müssen overflow:hidden haben */
.highline-gallery-slide,
.highline-gallery-viewport,
.highline-main-gallery,
.highline-thumbnail-item,
.highline-thumbnail-sidebar,
.asa_pic,
.asa_product_box,
.asa_product_boxv,
.vehicle-image-container,
.vehicle-card,
.payment-logo-item,
.payment-logos-section,
.pr-position-badge,
figure,
picture {
    overflow: hidden !important;
    contain: paint;
}

/* Spezielle Ausnahme für gezoomte Galerie-Bilder */
/* Der Container (.highline-gallery-slide) clippt den Inhalt */
.highline-gallery-slide img.zoomed {
    overflow: visible;
    /* Kein !important - wird vom Container geclippt */
}

/* Thumbnail-Bilder */
.highline-thumbnail-item img {
    overflow: clip !important;
    object-fit: cover;
}

/* Produktbilder */
.asa_pic img {
    overflow: clip !important;
}

/* Fahrzeugbilder */
.vehicle-image {
    overflow: clip !important;
    object-fit: cover;
}

/* Footer Logos */
.payment-logo-item img,
.payment-logo-item svg {
    overflow: clip !important;
}