/*
 * Hintergrundopjekt 1.5
 *
 * Die Grafik wird als eigenes, fest positioniertes Element ausgegeben.
 * Es wird kein ::before/::after des Themes überschrieben und kein Menü-
 * oder Header-Element verändert.
 */

.hintergrundopjekt-layer {
    display: none;
}

@media screen and (min-width: 992px) {
    /*
     * Ein lokaler Stacking-Context am body sorgt dafür, dass die Ebene
     * hinter dem Seiteninhalt, aber vor dem body-Hintergrund liegt.
     * position: relative am body erzeugt keine zusätzlichen Abstände.
     */
    body {
        position: relative;
        z-index: 0;
    }

    .hintergrundopjekt-layer {
        position: fixed;
        z-index: -1;
        left: 0;
        right: 0;
        bottom: 0;

        display: block;
        width: 100%;
        height: clamp(340px, 31vw, var(--hop-height, 520px));

        background-image: var(--hop-image);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100% auto;

        opacity: var(--hop-opacity, 0.20);

        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.14) 10%,
            rgba(0, 0, 0, 0.76) 38%,
            #000 68%,
            #000 100%
        );

        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.14) 10%,
            rgba(0, 0, 0, 0.76) 38%,
            #000 68%,
            #000 100%
        );

        pointer-events: none;
        user-select: none;
    }
}