/* Responsive Images CSS */

/* Basis-Bildstil */
.responsive-img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Feste Größen für bestimmte Bilder */
.fixed-height-img {
    height: 32px;
    width: auto;
    max-width: none;
}

/* Logo-spezifische Stile */
.logo-img {
    height: 32px !important;
    width: auto !important;
    max-height: 32px !important;
    max-width: 150px !important;
    object-fit: contain !important;
}

/* Kleinere Logos auf mobilen Geräten */
@media (max-width: 640px) {
    .logo-img {
        height: 28px !important;
        max-height: 28px !important;
        max-width: 120px !important;
    }
}

/* Lazy-Loading-Stil */
.lazy-img {
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.lazy-img.loaded {
    opacity: 1;
}

/* Placeholder für Lazy-Loading */
.img-placeholder {
    background-color: #f3f4f6;
    position: relative;
    overflow: hidden;
}

.img-placeholder::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.img-placeholder.square::before {
    padding-top: 100%; /* 1:1 Aspect Ratio */
}

.img-placeholder.portrait::before {
    padding-top: 150%; /* 2:3 Aspect Ratio */
}

/* Pulsierender Effekt für Placeholder */
.img-placeholder::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #f3f4f6, #e5e7eb, #f3f4f6);
    background-size: 200% 100%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: -200% 0%;
    }
}

/* Responsive Hintergrundbilder */
.bg-responsive {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Bildgrößen für verschiedene Bildschirmgrößen */
@media (max-width: 640px) {
    .hero-img {
        height: 150px;
    }
    
    .category-img {
        width: 60px;
        height: 60px;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .hero-img {
        height: 200px;
    }
    
    .category-img {
        width: 80px;
        height: 80px;
    }
}

@media (min-width: 1025px) and (max-width: 1279px) {
    .hero-img {
        height: 250px;
    }
    
    .category-img {
        width: 100px;
        height: 100px;
    }
}

@media (min-width: 1280px) and (max-width: 1535px) {
    .hero-img {
        height: 300px;
    }
    
    .category-img {
        width: 110px;
        height: 110px;
    }
}

@media (min-width: 1536px) {
    .hero-img {
        height: 350px;
    }
    
    .category-img {
        width: 120px;
        height: 120px;
    }
}

/* Bildoptimierung für High-DPI-Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .bg-responsive {
        background-image: var(--high-dpi-bg-image, var(--bg-image));
    }
}

/* Bildoptimierung für Drucken */
@media print {
    .responsive-img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }
}