/* =========================================
   21 – SAISON HERO
========================================= */
.wf-theme-intro {
    position: relative;
    display: grid;
    grid-template-columns: 1fr minmax(520px, 420px) 1fr;
    align-items: start;
    width: 100%;
    padding: 10px 5vw;
    overflow: hidden;
    color: #292929;
}


/* =========================================
   21 – CONTENT / HEADLINE
========================================= */
.wf-element-21 .wf-theme-intro__content {
    position: relative;
    z-index: 2;
    margin-top: 80px;
    text-align: center;
}


/* =========================================
   21 – VERTIKALE LINIE
========================================= */
.wf-element-21 .wf-headline__line {
    display: block;
    width: 1px;
}

.wf-element-21 .wf-headline__line--content {
    height: 48px;
    margin: 0 auto 38px;
    background: #999;
}


/* =========================================
   21 – SUBTITEL
========================================= */
.wf-element-21 .wf-subtitel-anim {
    margin: 0 0 2rem;
    font-family: "Noto Sans", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #d5b297;
}


/* =========================================
   21 – GROSSE HEADLINE
========================================= */
.wf-element-21 .wf-headline-big {
    margin: 0;
    font-family: "Tenor Sans", sans-serif;
    font-size: clamp(3.2rem, 4.3vw, 5rem);
    font-weight: 400;
    line-height: 1.0;
    letter-spacing: -.02em;
}


/* =========================================
   IMAGE AREAS
========================================= */
.wf-theme-intro__visual {
    position: relative;
    height: 600px;
}

.wf-theme-intro__image {
    position: absolute;
    overflow: hidden;
}


/* =========================================
   INNERES BILD – PARALLAX
========================================= */
.wf-theme-intro__image-parallax {
    position: absolute;
    top: -15%;
    left: -15%;
    width: 130%;
    height: 130%;

    background-image: var(--theme-image);
    background-repeat: no-repeat;
    background-size: cover;
}


/* =========================================
   LEFT
========================================= */
.wf-theme-intro__image--left-1 {
    width: 150px;
    height: 410px;
    right: 200px;
    top: 100px;
}

.wf-theme-intro__image--left-1 .wf-theme-intro__image-parallax {
    background-position: left bottom;
}

.wf-theme-intro__image--left-2 {
    width: 150px;
    height: 520px;
    right: 30px;
    top: 40px;
}

.wf-theme-intro__image--left-2 .wf-theme-intro__image-parallax {
    background-position: right bottom;
}


/* =========================================
   RIGHT
========================================= */
.wf-theme-intro__image--right-1 {
    width: 150px;
    height: 520px;
    left: 30px;
    top: 40px;
}

.wf-theme-intro__image--right-1 .wf-theme-intro__image-parallax {
    background-position: center center;
}

.wf-theme-intro__image--right-2 {
    width: 150px;
    height: 410px;
    left: 200px;
    top: 100px;
}

.wf-theme-intro__image--right-2 .wf-theme-intro__image-parallax {
    background-position: right center;
}


/* =========================================
   TABLET LANDSCAPE – 992 bis 1200 px
========================================= */
@media (min-width: 992px) and (max-width: 1200px) {

    /* =========================================
       21 – CONTENT / HEADLINE
    ========================================= */
    .wf-element-21 .wf-theme-intro__content {
        margin-top: 40px;
    }


    .wf-theme-intro__image--left-1,
    .wf-theme-intro__image--left-2,
    .wf-theme-intro__image--right-1,
    .wf-theme-intro__image--right-2 {
        width: 180px;
    }

    .wf-theme-intro__visual--left {
        transform: translateX(120px);
    }

    .wf-theme-intro__visual--right {
        transform: translateX(-120px);
    }

    .wf-theme-intro__image--left-1 {
        right: 220px;
    }

    .wf-theme-intro__image--right-2 {
        left: 220px;
    }

    /* Bildhöhen Tablet Landscape */
    .wf-theme-intro__image--left-1,
    .wf-theme-intro__image--right-2 {
        height: 220px;
    }

    .wf-theme-intro__image--left-2,
    .wf-theme-intro__image--right-1 {
        height: 310px;
    }


    /* =========================================
       21 – GROSSE HEADLINE
    ========================================= */
    .wf-element-21 .wf-headline-big {
        margin: 0;
        font-size: 2.5rem;
    }


    /* =========================================
       21 – SUBTITEL
    ========================================= */
    .wf-element-21 .wf-subtitel-anim {
        font-size: 0.8rem;
    }

}


/* =========================================
   TABLET PORTRAIT – 768 bis 991 px
========================================= */
@media (min-width: 768px) and (max-width: 991px) {

    .wf-theme-intro {
        grid-template-columns: 180px 1fr 180px;
        min-height: 560px;
        padding: 0;
    }


    /* =========================================
       21 – CONTENT / HEADLINE
    ========================================= */
    .wf-element-21 .wf-theme-intro__content {
        margin-top: 0;
    }

    .wf-element-21 .wf-headline-big {
        font-size: 2.4rem;
        line-height: .94;
    }


    /* =========================================
       21 – SUBTITEL
    ========================================= */
    .wf-element-21 .wf-subtitel-anim {
        font-size: 0.8rem;
    }


    /* Bildhöhen Tablet Portrait */
    .wf-theme-intro__image--left-1,
    .wf-theme-intro__image--right-2 {
        height: 180px;
    }

    .wf-theme-intro__image--left-2,
    .wf-theme-intro__image--right-1 {
        height: 280px;
    }

    .wf-theme-intro__visual {
        height: 430px;
    }

    .wf-theme-intro__visual--left {
        transform: translateX(72px);
    }

    .wf-theme-intro__visual--right {
        transform: translateX(-72px);
    }


    /* LINKS */
    .wf-theme-intro__image--left-1 {
        width: 120px;
        top: 50px;
        right: 132px;
    }

    .wf-theme-intro__image--left-2 {
        width: 120px;
        top: 0;
        right: 0;
    }


    /* RECHTS */
    .wf-theme-intro__image--right-1 {
        width: 120px;
        top: 0;
        left: 0;
    }

    .wf-theme-intro__image--right-2 {
        width: 120px;
        top: 50px;
        left: 132px;
    }

}


/* =========================================
   SMARTPHONE – bis 767 px
========================================= */
@media (max-width: 767px) {

    .wf-theme-intro {
        grid-template-columns: 150px 1fr 150px;
        min-height: 520px;
        padding: 0;
    }

    .wf-theme-intro__visual {
        height: 500px;
    }

    .wf-theme-intro__visual--left {
        transform: translateX(82px);
    }

    .wf-theme-intro__visual--right {
        transform: translateX(-82px);
    }

    .wf-element-21 .wf-theme-intro__content {
        margin-top: 40px;
    }

    .wf-element-21 .wf-headline-big {
        font-size: 2.5rem;
        line-height: .94;
    }


    /* =========================================
       21 – SUBTITEL
    ========================================= */
    .wf-element-21 .wf-subtitel-anim {
        font-size: 0.8rem;
        font-weight: 400;
    }


    /* LINKS */
    .wf-theme-intro__image--left-1 {
        width: 110px;
        height: 330px;
        top: 80px;
        right: 122px;
    }

    .wf-theme-intro__image--left-2 {
        width: 110px;
        height: 400px;
        top: 30px;
        right: 0;
    }


    /* RECHTS */
    .wf-theme-intro__image--right-1 {
        width: 110px;
        height: 400px;
        top: 30px;
        left: 0;
    }

    .wf-theme-intro__image--right-2 {
        width: 110px;
        height: 330px;
        top: 80px;
        left: 122px;
    }

}


/* =========================================
   SMARTPHONE PORTRAIT – bis 480 px
   NUR TEXT – KEINE BILDER
========================================= */
@media (max-width: 480px) {

    .wf-theme-intro {
        position: relative;
        display: block;
        width: 100%;
        min-height: 0;
        padding: 0 20px;
        overflow: hidden;
    }

    /* Alle Bilder ausblenden */
    .wf-theme-intro__visual {
        display: none;
    }

    /* =========================================
       TEXT
    ========================================= */
    .wf-element-21 .wf-theme-intro__content {       
		display: none;
    }
    

}