.knueppel-fixed-hero {
    position: relative;
    box-sizing: border-box;
    min-height: var(--kfh-height, 420px);
    padding-top: var(--kfh-pt, 80px);
    padding-bottom: var(--kfh-pb, 50px);

    background-image: var(--kfh-bg, none);
    background-repeat: no-repeat;

    /*
     * Prozent-Fokus plus echte Pixel-Offsets.
     * Im Gegensatz zu reinem background-position-y kann der Ausschnitt
     * damit auch bei background-attachment: fixed sichtbar verschoben werden.
     */
    background-position:
        calc(var(--kfh-pos-x, 50%) + var(--kfh-offset-x, 0px))
        calc(50% + var(--kfh-offset-y, 0px));
}

.knueppel-fixed-hero.is-fixed {
    background-attachment: fixed;
}

.knueppel-fixed-hero.is-scroll {
    background-attachment: scroll;
}

.knueppel-fixed-hero.size-viewport-width {
    background-size: var(--kfh-zoom-vw, 105vw) auto;
}

.knueppel-fixed-hero.size-viewport-height {
    background-size: auto var(--kfh-zoom-vh, 105vh);
}

.knueppel-fixed-hero.size-cover {
    background-size: cover;
}

.knueppel-fixed-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, var(--kfh-overlay, 0));
}

.knueppel-fixed-hero__content {
    position: relative;
    z-index: 1;
}

@media (max-width: 782px) {
    .knueppel-fixed-hero.mobile-scroll {
        background-attachment: scroll !important;
    }

    .knueppel-fixed-hero.mobile-fixed {
        background-attachment: fixed !important;
    }
}