/* Container Basics */
.vs-slider-wrapper, .vs-grid-wrapper { 
    width: 100%; 
    box-sizing: border-box; 
    background: transparent; /* Übernimmt Theme-Hintergrund */
}

.vs-slider-wrapper *, .vs-grid-wrapper * { 
    box-sizing: border-box; 
}

/* Reset styles (Clean look) */
.vs-slider-wrapper a, .vs-slider-wrapper img, 
.vs-grid-wrapper a, .vs-grid-wrapper img {
    display: block !important; 
    border: 0 !important; 
    box-shadow: none !important; 
    text-decoration: none !important; 
    padding: 0 !important; 
    margin: 0 !important; 
    border-radius: 4px;
}

.vs-slider-wrapper a:focus-visible,
.vs-grid-wrapper a:focus-visible {
    outline: 2px solid #0b57d0 !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(11, 87, 208, 0.35);
}

/* Keep slider focus ring visible inside the clipped viewport */
.vs-slider-wrapper .vs-link:focus-visible {
    outline-offset: -2px;
    box-shadow: inset 0 0 0 2px #0b57d0;
}

/* Image Styles */
.vs-slider-wrapper img, .vs-grid-wrapper img { 
    width: 100%; 
    height: auto; 
    object-fit: contain; 
    filter: grayscale(100%); 
    opacity: 0.8; 
    transition: all 0.3s ease; 
}

/* Optional: Logos dauerhaft in Farbe */
.vs-show-color img {
    filter: none !important;
    opacity: 1 !important;
}

/* Hover Effects */
.vs-item:hover img, .vs-grid-item:hover img, .vs-item:focus-within img { 
    filter: grayscale(0%); 
    opacity: 1; 
    transform: scale(1.05); 
}

/* Slider Logic */
.vs-slider-wrapper { 
    position: relative; 
    overflow: hidden; 
    margin-bottom: 20px; 
    touch-action: pan-y;
}

.vs-track { 
    display: flex; 
    gap: var(--vs-gap); 
    align-items: center; 
    will-change: transform; 
}

.vs-item { 
    flex: 0 0 calc( (100% - (var(--vs-gap) * (var(--vs-per-view) - 1))) / var(--vs-per-view) ); 
    max-width: calc( (100% - (var(--vs-gap) * (var(--vs-per-view) - 1))) / var(--vs-per-view) ); 
    display: flex; 
    justify-content: center; 
}

.vs-item .vs-link {
    width: 100%;
    min-height: 44px;
}

/* Grid Logic */
.vs-grid-wrapper { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(var(--vs-grid-min), 1fr)); 
    gap: var(--vs-gap); 
    margin-bottom: 20px; 
    align-items: start;
}

.vs-grid-item { 
    display: grid;
    grid-template-rows: 120px auto;
    row-gap: 10px;
    justify-items: center;
    align-items: end;
    padding: 10px; 
}

/* Einheitliche Logo-Zeile in der Sponsorenübersicht */
.vs-grid-item .vs-link {
    display: flex !important;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.vs-grid-item .vs-link img,
.vs-grid-item > img {
    width: auto;
    max-width: 100%;
    max-height: 120px;
    margin: 0 auto;
}

.vs-grid-item > img {
    height: auto;
    object-fit: contain;
}

/* Sponsor Name (Grid Only) */
.vs-sponsor-name {
    margin-top: 0;
    font-size: 0.95em;      /* Passt sich Basis-Schriftgröße des Themes an */
    line-height: 1.3;
    text-align: center;
    color: inherit;         /* Übernimmt Textfarbe des Themes (auch Dark Mode) */
    font-weight: 600;
    width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Mobile Optimierungen */
@media (max-width: 768px) {
    .vs-slider-wrapper {
        --vs-per-view: 1 !important;
    }

    .vs-item {
        flex-basis: 100%;
        max-width: 100%;
    }

    .vs-grid-wrapper {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, max(130px, var(--vs-grid-min))), 1fr));
    }

    .vs-grid-item {
        grid-template-rows: 96px auto;
        row-gap: 8px;
        padding: 8px;
    }

    .vs-grid-item .vs-link img,
    .vs-grid-item > img {
        max-height: 96px;
    }

    .vs-sponsor-name {
        font-size: 0.9em;
        line-height: 1.35;
    }
}

@media (max-width: 480px) {
    .vs-grid-wrapper {
        grid-template-columns: 1fr;
    }

    .vs-grid-item {
        grid-template-rows: 88px auto;
    }

    .vs-grid-item .vs-link img,
    .vs-grid-item > img {
        max-height: 88px;
    }
}

@media (hover: none) and (pointer: coarse) {
    .vs-item:hover img,
    .vs-grid-item:hover img {
        filter: inherit;
        opacity: inherit;
        transform: none;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .vs-track { transform: none !important; transition: none !important; flex-wrap: wrap; justify-content: center; }
    .vs-slider-wrapper { overflow: visible; }
    .vs-item { flex: 0 0 150px; margin-bottom: 20px; }
    .vs-slider-wrapper img, .vs-grid-wrapper img { transition: none !important; transform: none !important; }
}