/* ==========================================================
   DW_HEADER_CHERRY_PERMANENT
   Kirschblüten-Grafik auf ALLEN Seiten und Bildschirmgrößen
   ========================================================== */

.site-header {

    background-image:
        linear-gradient(
            90deg,
            rgba(54, 9, 13, .93) 0%,
            rgba(83, 15, 21, .76) 42%,
            rgba(54, 9, 13, .88) 100%
        ),
        url("../images/header-cherry-blossom.webp")
        !important;

    background-repeat:
        no-repeat,
        no-repeat
        !important;

    background-position:
        center center,
        center center
        !important;

    background-size:
        cover,
        cover
        !important;

}


/* Tablet */

@media (max-width:1100px) {

    .site-header {

        background-image:
            linear-gradient(
                90deg,
                rgba(54, 9, 13, .94) 0%,
                rgba(83, 15, 21, .74) 45%,
                rgba(54, 9, 13, .88) 100%
            ),
            url("../images/header-cherry-blossom.webp")
            !important;

        background-position:
            center center,
            center center
            !important;

        background-size:
            cover,
            cover
            !important;
    }

}


/* Smartphone:
   KEIN background:-Shorthand mehr, das die Grafik löscht */

@media (max-width:760px) {

    .site-header {

        background-image:
            linear-gradient(
                90deg,
                rgba(54, 9, 13, .95) 0%,
                rgba(83, 15, 21, .72) 50%,
                rgba(54, 9, 13, .91) 100%
            ),
            url("../images/header-cherry-blossom.webp")
            !important;

        background-repeat:
            no-repeat,
            no-repeat
            !important;

        background-position:
            center center,
            center center
            !important;

        background-size:
            cover,
            cover
            !important;
    }

}