/* =============================================================================================
   ELEMENT 06 – BILD / BILD
============================================================================================= */
.wf-element-06 {
    position: relative;
    display: block;
    clear: both;
    width: 100%;
    padding: 0px 0 100px;
    overflow: visible;
}


/* =========================================
   INHALT / GRID
========================================= */
.wf-element-06 .wf-element-06-content {
    position: relative;
    display: grid;
    grid-template-columns: 7fr 5fr;
    align-items: start;
    width: 100%;	
}


/* =========================================
   BILDER ALLGEMEIN
========================================= */
.wf-element-06 .wf-element-06-image {
    position: relative;
    overflow: hidden;
}

.wf-element-06 .wf-element-06-imgitem {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130%;
    height: 100%;
    overflow: hidden;
    transform: translate(-50%, -50%);
}



.wf-element-06 .wf-element-06-image picture {
    display: block;
    width: 100%;
    height: 100%;
}

.wf-element-06 .wf-element-06-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =========================================
   BILD LINKS – QUERFORMAT
========================================= */
.wf-element-06 .wf-element-06-image-left {
    width: 90%;
    height: 45vh;
    margin-left: auto;
    margin-right: 20px;
}


/* =========================================
   BILD RECHTS – HOCHFORMAT
========================================= */
.wf-element-06 .wf-element-06-image-right {
    width: 90%;
    height: 85vh;
    margin-left: auto;
}


/* =============================================================================================
   GROSSE DESKTOPS AB 1440px
============================================================================================= */
@media (min-width: 1440px) {

    .wf-element-06 .wf-element-06-content {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .wf-element-06 .wf-element-06-image-left {
        height: 75vh;
    }

    .wf-element-06 .wf-element-06-image-right {
        width: 68%;
        height: 62vh;
        margin-top: 60px;
        margin-left: 8%;
        margin-right: auto;
    }

}


/* =============================================================================================
   TABLET GROSS: 992–1024px
============================================================================================= */
@media (min-width: 992px) and (max-width: 1024px) {

    .wf-element-06 .wf-element-06-content {
         column-gap: 6%;
    }	
	
	.wf-element-06 .wf-element-06-image-left {
        width: 100%;
        height: 55vh;
        margin-top: 50px;
    }

    .wf-element-06 .wf-element-06-image-right {
        width: 100%;
        height: 75vh;
        margin-top: -20px;
    }

}


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

    .wf-element-06 {
        padding: 0px 0 80px;
    }

    .wf-element-06 .wf-element-06-content {
        grid-template-columns: 1fr 1fr;
    }

    .wf-element-06 .wf-element-06-image-left {
        width: 95%;
        height: 55vw;
        margin: 0 auto;
    }

    .wf-element-06 .wf-element-06-image-right {
        width: 85%;
        height: 65vw;
        margin-top: -40px;
        margin-left: auto;
        margin-right: 0;
    }

}


/* =============================================================================================
   MOBILE BIS 767px
============================================================================================= */
@media (max-width: 767px) {
    .wf-element-06 {
        padding: 10px 0 60px;
    }


    /* -------------------------------------
       Bilder untereinander
    ------------------------------------- */
    .wf-element-06 .wf-element-06-content {
        display: flex;
        flex-direction: column;
        width: 100%;
    }


    /* -------------------------------------
       Großes Querformatbild
    ------------------------------------- */
    .wf-element-06 .wf-element-06-image-left {
        width: calc(100% - 40px);
        height: 68vw;
        min-height: 270px;
        max-height: 390px;
        margin: 0 20px;
    }


    /* -------------------------------------
       Hochformatbild darunter
    ------------------------------------- */
   .wf-element-06 .wf-element-06-image-right {
		width: 58%;
		height: 78vw;
		min-height: 310px;
		max-height: 470px;
		margin: 20px auto 0 20px;
	}


    /* -------------------------------------
       Bildausschnitt
    ------------------------------------- */
    .wf-element-06 .wf-element-06-image img {
        object-fit: cover;
        object-position: center;
    }


    /* -------------------------------------
       Parallax auf Smartphone aus
    ------------------------------------- */
    .wf-element-06 .cromo-parallax {
        transform: none !important;
    }

}


/* =============================================================================================
   ELEMENT 06 – END
============================================================================================= */