/*  START::: Allgemein */
html, body, *{
	
}
html, body{
	margin:0;
	width:100%;
	height:100%;
	background-color:#FFF;
	color:#000;
	font-family:verdana;
}

div{
	border:0px solid #000;
}

.wrapper{
	position:relative;
	width:calc(100% - 40px);
	margin:0 auto;
	border:10px solid #000;
}
/*  ENDE::: Allgemein */


/* START::: DIV welches alles ueberblendet - ENDE der Animation */
.now_wrapper{
	position:absolute;
	left:0;
	top:0;
	display: flex; 
	justify-content: center; 
	align-items: center;
	width:calc(100% - 20px);
	height:calc(100% - 20px);
	background-color:#FFF;
	border:10px solid #000;
	z-index:999;
	visibility:hidden;
}
	.now{
		/*font-size:50pt;*/
		font-size: clamp(1rem, 8cqw, 2rem);
		border:0px solid green;
	}
/* ENDE::: DIV welches alles ueberblendet - ENDE der Animation */


/* START::: Headline */
.headline_wrapper{
	position:relative;
	width:90%;
	height:70px;
	margin:0 auto;
	text-align:center;
	border:0px solid yellow;
}
	.clip{
		position:absolute;
		width:100%;
		height:70px;
		opacity:1;
		transition: opacity 2s;
		border:0px solid red;
	}
	.clip_close{
		opacity:0;
		transition: opacity 2s;
	}

.headline{
	text-align:center;
}
/* ENDE::: Headline */

/* START::: Alles fuer den Slider */
.first-wrapper{
	height:30%;
	transition: height 5s; 
}
.first-wrapper-large{
	height:40%;
	transition: height 5s;
}

.first-wrapper-morelarge{
	height:50%;
	transition: height 5s;
}

.first-wrapper div[id*='f1_']{
	position:absolute;
	width:calc(100% - 0px);
	height:calc(100% - 0px);
	background-repeat: no-repeat;
	background-size:cover;
	opacity:0;
	transition: opacity 5s;
	border:0px solid red;
}

.show{	
	opacity:1 !important;
	transition: opacity 5s !important;
}

/* ENDE::: Alles fuer den Slider */

/* START::: ---- Die drei Elemente unterhalb des Sliders ----*/
.second-wrapper{
	position:relative;
	display:flex;
	height:20%;
	margin-top:10px;
}
	.first, .second, .third{
		position:relative;
		width:33.3333333%;
		transition: width 5s;
	}
	.first, .second{
		border-right:10px solid #000;
	}

.first{
	background-image:url(../images/good_04.png);
	background-repeat: no-repeat;
	background-size:cover;
}
.second{
	background-image:url(../images/dump_03.png);
	background-repeat: no-repeat;
	background-size:cover;
}

.third{
	background-image:url(../images/good_06.png);
	background-repeat: no-repeat;
	background-size:cover;
}

	div[id*='card_']{
		position:relative;
		overflow:hidden;
	}

		.white-card{
			position: relative;
			top: 100%;
			width: 100%;
			height: 100%;
			background-color: #FFF;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: clamp(1rem, 8cqw, 2rem);
			font-weight:900;
			opacity:0;
			transition: top 2s, opacity 3s;
		}
		.white-card-top{
			position: relative;
			top: 0;
			opacity:1;
			transition: top 2s, opacity 3s;
		}


/* START::: Kachelgroessen aendern */
.first_change_card_1{
	width:50%;
	transition: width 5s linear;
}
.first_change_card_2{
	width:0;
	border-right:0px solid #000;
	transition: width 5s linear, border-right 8s;
}
.first_change_card_3{
	width:50%;
	transition: width 5s linear;
}
	/*--*/
.second_change_card_1{
	width:10%;
	transition: width 5s linear;
}
.second_change_card_2{
	width:60%;
	transition: width 5s linear;
}
.second_change_card_3{
	width:30%;
	transition: width 5s linear;
}
	/*--*/
.third_change_card_1{
	width:33.3333333%;
	transition: width 5s linear;
}
.third_change_card_2{
	width:33.3333333%;
	transition: width 5s linear;
}
.third_change_card_3{
	width:33.3333333%;
	transition: width 5s linear;
}
	/*--*/
.four_change_card_1{
	width:0;
	border-right:0px solid #000;
	transition: width 5s linear, border-right 8s;
}
.four_change_card_2{
	width:30%;
	transition: width 5s linear;
}
.four_change_card_3{
	width:70%;
	border-right:0px solid #000;
	transition: width 5s linear, border-right 8s;
}
	/*--*/
.five_change_card_1{
	width:15%;
	transition: width 5s linear;
}
.five_change_card_2{
	width:50%;
	transition: width 5s linear;
}
.five_change_card_3{
	width:35%;
	transition: width 5s linear;
}
/* ENDE::: Kachelgroessen aendern */


/* ENDE::: ---- Die drei Elemente unterhalb des Sliders ----*/