/* ═══════════════════════════════════════════════════════════
   Bildkarussell – Stylesheet
   Maximale Bildhöhe: 150px
   Automatisch laufendes, nahtloses Endlos-Karussell
═══════════════════════════════════════════════════════════ */

.bk-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: transparent;
    padding: 10px 0;
    /* Weiche Überblendung an den Rändern */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
}

.bk-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 24px;
    width: max-content;

    /* Animation: scrollt nach links, Dauer angepasst per JS */
    animation: bk-scroll 30s linear infinite;
}

/* Animation pausieren wenn Benutzer mit der Maus drüberfährt */
.bk-wrapper:hover .bk-track {
    animation-play-state: paused;
}

@keyframes bk-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ─── Einzelnes Karussell-Element ─────────────────────────── */

.bk-item {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    border: none;
    outline: none;
}

.bk-item img {
    height: 150px;          /* Maximale Höhe gemäß Anforderung */
    max-height: 150px;
    width: auto;            /* Breite proportional */
    object-fit: contain;
    display: block;
    border: none;
    border-radius: 4px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Hover-Effekt nur bei klickbaren Bildern (a-Tag) */
a.bk-item:hover img {
    opacity: 0.85;
    transform: scale(1.03);
    cursor: pointer;
}

/* Fokus-Rahmen für Tastaturnavigation (Barrierefreiheit) */
a.bk-item:focus-visible {
    outline: 2px solid #0073aa;
    outline-offset: 3px;
    border-radius: 4px;
}