/**
 * Footer Bilder Plugin - Frontend Styles
 * Optimiert für 1920px Breite
 */

.image-strip-wrapper {
    position: relative;
    max-width: 1920px;
    overflow: visible; /* Erlaubt Bilder über den Container hinaus */
    margin: 0 auto;
    height: 350px;
    margin-bottom: 0; /* Kein unterer Abstand */
    padding-bottom: 0; /* Kein unteres Padding */
}

.image-strip {
    position: relative;
    height: 100%;
}

/* Footer-spezifische Strip-Styles */
.site-footer .image-strip {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    height: 350px;
    margin-bottom: 0; /* Kein unterer Abstand */
    padding-bottom: 0; /* Kein unteres Padding */
}

.image-strip .img-footer {
    object-fit: cover;
    position: absolute;
    bottom: 0; /* Alle Bilder am unteren Rand ausrichten */
}

/* Footer-spezifische Bildgrößen mit festen Positionen (für 1920px Breite) */
.image-strip .img-footer-1 { 
    width: 290px !important; 
    height: 380px !important; 
    bottom: 0 !important; /* Am unteren Rand */
    position: absolute !important;
    object-fit: cover !important;
}

.image-strip .img-footer-2 { 
    width: 620px !important; 
    height: 280px !important; 
    left: 290px !important; /* 60 + 280 + 60 */
    bottom: 0 !important; /* Am unteren Rand */
    position: absolute !important;
    object-fit: cover !important;
    z-index: 2;
}

.image-strip .img-footer-3 { 
    width: 260px !important; 
    height: 420px !important; 
    left: 900px !important; /* 290 + 620 - 10 */
    bottom: 0 !important; /* Am unteren Rand */
    position: absolute !important;
    object-fit: cover !important;
}

.image-strip .img-footer-4 { 
    width: 340px !important; 
    height: 400px !important; 
    left: 1160px !important; /* 900 + 260 */
    bottom: 0 !important; /* Am unteren Rand */
    position: absolute !important;
    object-fit: cover !important;
}

.image-strip .img-footer-5 { 
    width: 470px !important; 
    height: 380px !important; 
    left: 1450px !important; /* 1140 + 340 - 30 */
    bottom: 0 !important; /* Am unteren Rand */
    position: absolute !important;
    object-fit: cover !important;
}


/* Zusätzliche Footer-spezifische Styles */
.site-footer .image-strip-wrapper {
    margin-bottom: 0 !important; /* Wichtig: Kein unterer Abstand */
    padding-bottom: 0 !important; /* Wichtig: Kein unteres Padding */
}

/* Erlaubt Bildern über die Viewport-Grenze hinauszugehen */
body {
    overflow-x: hidden; /* Verhindert horizontale Scrollbalken */
}

/* Fallback für fehlende Bilder */
.no-images {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 40px 20px;
    background: #f9f9f9;
    border-radius: 8px;
    margin: 20px 0;
}

.site-footer .no-images {
    background: transparent;
    color: #999;
    padding: 20px;
    margin: 0;
}

/* Performance Optimierungen */
.image-strip .img-footer {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Ladezustand */
.image-strip .img-footer[src=""] {
    display: none;
}

/* Focus States für Accessibility */
.image-strip .img-footer:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .image-strip .img-footer {
        border: 2px solid currentColor;
    }
    
    .no-images {
        border: 2px solid currentColor;
        background: transparent;
    }
}