/* =============================================================================================
   ELEMENT 02 – SOMMER / WINTER
============================================================================================= */
.wf-element-02 {
    position: relative;
    clear: both;
    display: block;
    width: 100vw;
    height: 80vh;
    margin-top: 0px;
    z-index: 1;
}

.wf-element-02 .img {
    position: relative;
    overflow: hidden;
    height: 100%;
}


/* =====================================
   BILD WRAPPER
===================================== */
.wf-element-02 .img .wf-wrap {
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;	
}

.wf-element-02 .img img {
    position: relative;
    top: -12px;
    object-fit: cover;
    object-position: bottom;
    width: 100%;
    height: calc(100% + 24px);
}


/* =====================================
   FULLWIDTH BILD
===================================== */
.wf-element-02 .wf-img-full {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 80vh;
    z-index: 0;
}

.wf-element-02 .wf-img-full .cromo-parallax {
    transform: none !important;
}


/* =====================================
   TEXTBOX BASIS
===================================== */
.wf-element-02 .box-sowi {
    position: relative;
    width: 25%;
    padding: 60px;
}

/* =====================================
   POSITION TEXTBOX
===================================== */
.wf-element-02.wf-box-right .box-sowi {
    float: right;
    margin: 10px 80px 0 40px;
}

.wf-element-02.wf-box-left .box-sowi {
    float: left;
    margin: 10px 40px 0 80px;
}

/* =====================================
   TEXTBOX HINTERGRUND
===================================== */

.wf-element-02.wf-bg-winter .box-sowi {
    background-color: rgba(121, 131, 167, 0.70);
	background-color: rgba(121, 131, 167, 0.70);
}

.wf-element-02.wf-bg-summer .box-sowi {
    background-color: rgba(47, 52, 43, 0.78);
	background-color: rgba(213, 178, 151, 0.80);
}

.wf-element-02.wf-bg-shopping .box-sowi {
   background-color: rgba(43, 39, 34, 0.82);
   background-color: rgba(213, 178, 151, 0.99);
}


/* =====================================
   ÜBERSCHRIFT
===================================== */
.wf-element-02 .wf-headline-anim {
    position: relative;
    display: inline-block;
    width: 100%;
    font-size: 2.0em;
    font-weight: 300;
    color: #fff;
    line-height: 1.2em;
    text-align: right;
}

.wf-element-02 .wf-header-title {
    overflow: hidden;
}

.wf-element-02 .wf-headline-anim .wf-font-normal {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 300;
    line-height: normal;
	padding-bottom:1rem;
}


/* =====================================
   TEXT
===================================== */
.wf-element-02 .box-body-bottom {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    margin-top: 40px;
    font-size: 1.05em;
    font-weight: 300;
    color: #fff;
    text-align: right;
	letter-spacing:0.03em;
}


/* =====================================
   ANIMATION
===================================== */
.wf-element-02.start .wf-mask {
    clip-path: inset(0% 0% 0% 0%);
}


/* =====================================
   SOMMER / WINTER SICHTBARKEIT
   JavaScript entscheidet, welcher Block
   eingeblendet wird
===================================== */

#summer-block,
#winter-block {
    display: none;
}
/* =============================================================================================
   ELEMENT 02 – SOMMER / WINTER END
============================================================================================= */






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

     .wf-element-02 {
        width: 100%;
        height: auto !important;
        min-height: 0;
		margin-top: 0;
        overflow: visible;
    }

	 .frame-space-before-medium {
        margin-top: 0px;
     }
	 /* -------------------------------------
	   Bild – Smartphone volle Breite
	   Höhe ergibt sich aus dem Bild
	------------------------------------- */

	.wf-element-02 .img.wf-img-full {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.wf-element-02 .img.wf-img-full .wf-wrap {
		position: static;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		transform: none;
		overflow: visible;
	}

	.wf-element-02 .img.wf-img-full picture {
		display: block;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
	}

	.wf-element-02 .img.wf-img-full picture img {
		position: static;
		display: block;
		width: 100%;
		max-width: none;
		height: auto;
		margin: 0;
		padding: 0;
		transform: none !important;
	}


   /* -------------------------------------
	   Textbox direkt unter Bild
	------------------------------------- */
	 .wf-element-02 .box-sowi {
		position: relative;
		float: none !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		margin: 0 !important;
		padding: 40px 30px 45px;
	}

    /* -------------------------------------
       Kleine Überschrift
    ------------------------------------- */
    .wf-element-02 .wf-headline-anim .wf-font-normal {
        display: inline-block;
        margin-bottom: 0;
        padding-bottom: 1rem;
        font-size: 20px;
        font-weight: 300;
        line-height: normal;
        color: #fff;
    }


    /* -------------------------------------
       Große Überschrift
    ------------------------------------- */
    .wf-element-02 .wf-headline-anim {
        padding-bottom: 1rem;
        font-size: 25px;
        color: #fff;
    }


    /* -------------------------------------
       Text
    ------------------------------------- */
    .wf-element-02 .box-body-bottom {
        margin-top: 0;
        padding-bottom: 0;
        font-size: 18px;
        line-height: normal;
    }


    /* -------------------------------------
       Winter
    ------------------------------------- */
    .wf-element-02 .box-sowi {
        background: linear-gradient(
            to bottom,
            rgba(121, 131, 167, 0.70) 0%,
            rgba(121, 131, 167, 0.70) 45%,
            rgba(55, 61, 82, 0.90) 100%
        );
    }


    /* -------------------------------------
       Sommer
    ------------------------------------- */
    .wf-element-02 .box-sowi.sommer {
        background: linear-gradient(
            to bottom,
            rgba(47, 52, 43, 0.78) 0%,
            rgba(47, 52, 43, 0.78) 45%,
            rgba(25, 28, 23, 0.94) 100%
        );
    }

	/* -------------------------------------
	   Shopping
	------------------------------------- */
	.wf-element-02.wf-bg-shopping .box-sowi {
		background: linear-gradient(
			to bottom,
			rgba(43, 39, 34, 0.82) 0%,
			rgba(43, 39, 34, 0.82) 45%,
			rgba(23, 21, 18, 0.95) 100%
		);
	}


	.wf-element-02 .img.wf-img-full,
	.wf-element-02 .img.wf-img-full .wf-wrap,
	.wf-element-02 .img.wf-img-full picture,
	.wf-element-02 .img.wf-img-full picture img {
		width: 100% !important;
		max-width: 100% !important;
	}

	.wf-element-02 .img.wf-img-full picture img {
		object-position: center bottom;
	}

}




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

    /* dein bestehendes CSS */

}


/* =====================================
   SMARTPHONE LANDSCAPE
===================================== */
@media (min-width: 768px) and (max-width: 991px) and (orientation: landscape) {

    .wf-element-02 {
        width: 100%;
        height: auto !important;
        min-height: 0;
        overflow: visible;
    }

    .wf-element-02 .img.wf-img-full {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .wf-element-02 .img.wf-img-full .wf-wrap {
        position: static;
        width: 100%;
        height: auto;
        transform: none;
    }

    .wf-element-02 .img.wf-img-full picture {
        display: block;
        width: 100%;
        height: auto;
    }

    .wf-element-02 .img.wf-img-full picture img {
        position: static;
        display: block;
        width: 100%;
        height: auto;
        transform: none !important;
    }

    .wf-element-02 .box-sowi {
        position: relative;
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 40px 8% 45px;
    }

}











/* =====================================
   TABLET PORTRAIT
===================================== */
@media only screen
    and (min-device-width: 768px)
    and (max-device-width: 1024px)
    and (orientation: portrait)
    and (-webkit-min-device-pixel-ratio: 1) {

    .wf-element-02 {
        height: 70vh;
    }

    .wf-element-02 .wf-img-full {
        height: 60vh;
    }

    .wf-element-02 .box-sowi {
        width: 60%;
        margin-top: 0px;
    }

    .wf-element-02 .wf-img-full img {
        object-position: calc(50% + 80px) bottom;
    }
}





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

    .wf-element-02 .wf-img-full {
        overflow: hidden;
    }
   
    .wf-element-02 .box-sowi {
        margin-top: -100px;
        width: 35% !important;
    }

	.wf-element-02 .wf-headline-anim {		
		font-size: 1.6em;			
	  }

	  .wf-element-02 .wf-headline-anim .wf-font-normal {	    
	    font-size: 0.8em;
		color:#fff;	    
	}

}



/* =====================================
   GROSSE DESKTOPS
===================================== */
@media (min-width: 1440px) {
    .wf-element-02 .box-sowi {
        width: 22%;
    }

}

/* =============================================================================================
   ELEMENT 02 – RESPONSIVE END
============================================================================================= */