.bfm-home-sponsor-strip {
    --bfm-sponsor-color: #607b86;
    --bfm-sponsor-overlay-opacity: 1;
    --bfm-sponsor-shadow-color: rgba(36, 35, 31, 0);
    --bfm-sponsor-shadow-x: 0px;
    --bfm-sponsor-shadow-y: 4px;
    --bfm-sponsor-shadow-blur: 8px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: clamp(14px, 1.35vw, 24px);
    box-sizing: border-box;
    width: 100%;
    overflow: visible;
}

/*
 * Die Sponsorleiste wird ausschließlich dort ausgegeben, wo der Shortcode steht.
 * Es gibt bewusst keine automatische Positionierung und keine Regeln, die andere
 * Elemente der Startseite verschieben.
 */
.bfm-home-sponsor-strip-shortcode {
    margin: 12px 0 0;
}

.bfm-home-sponsor-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    width: clamp(105px, 8.5vw, 150px);
    max-width: clamp(105px, 8.5vw, 150px);
    height: clamp(36px, 3.4vw, 52px);
    line-height: 0;
    text-decoration: none !important;
    outline-offset: 4px;
    overflow: visible;
    filter: none;
    transition: filter 180ms ease;
}

.bfm-home-sponsor-original,
.bfm-home-sponsor-mask {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Das Original liegt permanent darunter. Die Farbmaske wird nur darübergelegt. */
.bfm-home-sponsor-original {
    display: block !important;
    object-fit: contain;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    z-index: 1;
}

.bfm-home-sponsor-mask {
    display: block;
    background: var(--bfm-sponsor-color);
    -webkit-mask-image: var(--bfm-sponsor-image);
    mask-image: var(--bfm-sponsor-image);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    opacity: var(--bfm-sponsor-overlay-opacity);
    z-index: 2;
    transition: opacity 180ms ease;
}

/*
 * Hover verändert ausschließlich die Darstellung. Es gibt bewusst weder scale,
 * translate noch Größenänderungen. Der belegte Layout-Platz bleibt identisch.
 */
.bfm-home-sponsor-logo:hover,
.bfm-home-sponsor-logo:focus-visible {
    filter: drop-shadow(
        var(--bfm-sponsor-shadow-x)
        var(--bfm-sponsor-shadow-y)
        var(--bfm-sponsor-shadow-blur)
        var(--bfm-sponsor-shadow-color)
    );
}

.bfm-home-sponsor-logo:hover .bfm-home-sponsor-mask,
.bfm-home-sponsor-logo:focus-visible .bfm-home-sponsor-mask {
    opacity: 0 !important;
}

/*
 * In den Wettbewerbsbereichen berechnet das Frontend-Skript aus dem echten
 * Seitenverhältnis und der gewählten Prozentgröße eine kompakte 2D-Packung.
 * Bis JavaScript fertig ist, bleibt eine brauchbare zentrierte Flex-Darstellung.
 * Die Startseitenleiste wird von diesen Regeln nicht berührt.
 */
:is(.bfm-sponsor-area-vs-wettbewerb, .bfm-sponsor-area-kg-wettbewerb) {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(12px, 2.4vw, 22px);
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
}

:is(.bfm-sponsor-area-vs-wettbewerb, .bfm-sponsor-area-kg-wettbewerb).bfm-sponsor-packed {
    overflow: visible;
}

:is(.bfm-sponsor-area-vs-wettbewerb, .bfm-sponsor-area-kg-wettbewerb).bfm-sponsor-packed .bfm-home-sponsor-logo {
    flex: none;
    transition: filter 180ms ease;
}

:is(.bfm-sponsor-area-vs-wettbewerb, .bfm-sponsor-area-kg-wettbewerb) .bfm-home-sponsor-original {
    object-fit: contain;
}

/* Fallback für sehr alte Browser ohne CSS-Masken: Graustufenbild statt Farbfläche. */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .bfm-home-sponsor-mask {
        display: none;
    }

    .bfm-home-sponsor-original {
        filter: grayscale(var(--bfm-sponsor-overlay-opacity)) !important;
        transition: filter 180ms ease;
    }

    .bfm-home-sponsor-logo:hover .bfm-home-sponsor-original,
    .bfm-home-sponsor-logo:focus-visible .bfm-home-sponsor-original {
        filter: none !important;
    }
}

@media (max-width: 900px) {
    .bfm-home-sponsor-strip {
        gap: 12px;
    }

    .bfm-home-sponsor-logo {
        width: 115px;
        max-width: 115px;
        height: 38px;
    }
}

@media (max-width: 600px) {
    .bfm-home-sponsor-strip {
        flex-wrap: wrap;
        row-gap: 7px;
        column-gap: 10px;
    }

    .bfm-home-sponsor-logo {
        width: 88px;
        max-width: 88px;
        height: 29px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bfm-home-sponsor-mask,
    .bfm-home-sponsor-original,
    .bfm-home-sponsor-logo {
        transition: none;
    }
}