/* DEALFOXX CRITICAL CSS BUNDLE */
/* Generiert: 17.07.2025 17:27 */
/* Kombiniert: desktop-layout-fix.css, image-sharpness-fix.css, minimal-icon-fix.css */
/* Reduziert Render-Blocking von 13 CSS-Dateien auf 1 inline */

/* === DESKTOP LAYOUT FIX === */
@media (min-width: 769px) {
    /* Hauptcontainer auf 1550px begrenzen */
    main.container,
    main[class*="max-w-"] {
        max-width: 1550px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: auto !important;
    }
    
    /* Standard Container-Klasse */
    .container {
        max-width: 1550px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: auto !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    /* Sections und andere Container */
    .section-container,
    .main-content,
    .content-wrapper {
        max-width: 1550px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Header Container */
    .header-main {
        max-width: 1550px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Body und HTML sollten nicht full-width sein */
    body {
        overflow-x: hidden !important;
    }
    
    /* Alle top-level Container begrenzen */
    body > main,
    body > .container,
    body > section {
        max-width: 1550px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Spezifische Tailwind-Klassen */
    .mx-auto {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Produktseite spezifisch */
    .product-container,
    .product-content,
    .product-wrapper {
        max-width: 1550px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* === IMAGE SHARPNESS FIX === */
/* UNIVERSELLE BILDSCHÄRFE-REGELN - HÖCHSTE PRIORITÄT */
.product-image,
.product-card img,
.card-image img,
img[class*="product"],
.product-image-container img,
.recently-viewed .product-image,
.recommended-products .product-image,
.related-products .product-image,
.product-slider img,
.slider-product img,
#related-products img,
.product-recommendations img,
.thumbnail-image,
.object-contain img {
    /* HOCHWERTIGE BILDSCHÄRFE FÜR SKALIERTE BILDER */
    image-rendering: -webkit-optimize-contrast !important;
    -webkit-image-rendering: -webkit-optimize-contrast !important;
    -moz-image-rendering: -moz-crisp-edges !important;
    -ms-interpolation-mode: bicubic !important;
    
    /* BESSERE DARSTELLUNG BEI OBJECT-FIT COVER */
    image-orientation: from-image !important;
    backface-visibility: hidden !important;
    
    /* ENTFERNE UNSCHÄRFE-VERURSACHENDE FILTER */
    filter: none !important;
    transform: translateZ(0) !important;
}

/* CONTAINER OPTIMIERUNG FÜR BESSERE BILDDARSTELLUNG */
.product-image-container,
.card-image,
.related-products .product-card,
.product-slider .product-card,
#related-products .product-card,
.recently-viewed .product-card,
.recommended-products .product-card {
    /* HARDWARE-BESCHLEUNIGUNG FÜR BESSERE PERFORMANCE */
    will-change: auto !important;
    transform: translateZ(0) !important;
    
    /* OPTIMALE CONTAINER-DARSTELLUNG */
    image-rendering: -webkit-optimize-contrast !important;
    -webkit-image-rendering: -webkit-optimize-contrast !important;
}

/* === MINIMAL ICON FIX === */
/* MOBILE HEADER FARBE */
@media (max-width: 768px) {
    #main-header .header-main,
    .header-main,
    header .header-main {
        background: #10315e !important;
    }
    
    .mobile-search-header,
    #main-header .mobile-search-header {
        background: #10315e !important;
    }
    
    .mobile-nav-header,
    #main-header .mobile-nav-header {
        background: #10315e !important;
    }
}

/* === ADDITIONAL IMAGES SLIDER === */
.additional-images-container {
    display: flex;
    align-items: center;
    position: relative;
    gap: 10px;
    margin: 20px 0;
}

.additional-images-scroll {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 10px;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.additional-images-scroll::-webkit-scrollbar {
    display: none;
}

.additional-image {
    flex: 0 0 auto;
    width: 100px;
    height: 100px;
    object-fit: contain;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.additional-image:hover {
    border-color: #007bff;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}

.additional-image.active {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

.scroll-button {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    color: #666;
    z-index: 10;
}

.scroll-button:hover {
    background: #007bff;
    color: white;
    border-color: #007bff;
    transform: scale(1.1);
}

.scroll-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.scroll-button:disabled:hover {
    background: #fff;
    color: #666;
    border-color: #e0e0e0;
}

/* MOBILE BILDSCHÄRFE-OPTIMIERUNG */
@media (max-width: 768px) {
    .product-image,
    .product-card img,
    .card-image img {
        image-rendering: -webkit-optimize-contrast !important;
        -webkit-image-rendering: -webkit-optimize-contrast !important;
        -moz-image-rendering: -moz-crisp-edges !important;
    }
}

/* RETINA/HIGH-DPI DISPLAYS */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .product-image,
    .product-card img,
    .card-image img {
        image-rendering: -webkit-optimize-contrast !important;
        -webkit-image-rendering: -webkit-optimize-contrast !important;
    }
} 