body{
	margin: 0;
	/*
	background-color: var(--background_color);
	background-image: url("background.jpg");
	*/
	background-repeat: repeat-y;
}

/*--------------*/
/*	HEADER		*/
/*--------------*/
.header{
	position: relative;
	top: 0;
	background-color: var(--header_background_color);

	display:grid;
	grid-template-columns: 100%;
	grid-template-rows: 60% 
						40%;

	width: 100%;
	height: var(--header_height);
}

/*--------------*/
/*	HEADER_UPPER*/
/*--------------*/
.header .upper{
	display: inline;
	grid-row: 1/2;
	/*grid-template-columns: 40% 60%;
	grid-template-rows: 100%;*/

	margin:0;

	background-color: var(--header_background_color);
	color: var(--header_text_color);
}

.header .upper .header_logo{
	display: inline;
	/*grid-column: 1/2;*/

	width: var(--logo_height);
	height: var(--logo_height);

	/*margin-left: calc(var(--header_upper_height)/2 - var(--logo_height)/2);*/
	margin-left: 35%;
	margin-top: calc(var(--header_upper_height)/2 - var(--logo_height)/2);
	margin-bottom: calc(var(--header_upper_height)/2 - var(--logo_height)/2);
}

.header .upper .header_title{
	display: inline;
	/*grid-column: 2/3;*/
	position: relative;
	top: calc(var(--header_upper_height)/2 - var(--header_title_fontsize)/2);
	/*padding-bottom: calc(var(--header_upper_height)/2 - var(--header_title_fontsize)/2);*/
	/*width: var(--header_title_width);*/
	/*left: calc(50% - var(--header_title_width)/2);*/
	padding: 0;

	font-family: var(--header_title_font);
	font-size: var(--header_title_fontsize);
	font-weight: bold;
	text-align: center;
	vertical-align: top;
}


/*--------------*/
/*	NAVBAR		*/
/*--------------*/
.header .navbar{
	grid-row: 2/3;
	margin: 0;

	background: linear-gradient(180deg, var(--navbar_background_color) 0%, var(--background_color) 100%);

}

.header .navbar ul{
	position: relative;
	width: auto;
	height: 100%;
	margin: 0;

	list-style-type: none;
	text-align: center;
}

.header .navbar .navbar_element{
	display: inline;
	margin:0;
}

.header .navbar .navbar_element a{
	position: relative;
	display: inline;
	width: var(--navbar_element_width);
	padding-left: 50px;
	padding-right: 50px;
	/*top: calc(var(--navbar_height)/2 - var(--navbar_element_fontsize));*/
	/*padding-top: calc(var(--navbar_height)/2 - var(--navbar_element_fontsize));*/
	top: calc(var(--navbar_element_fontsize)/2);
	padding-top: calc(var(--navbar_element_fontsize)/2);
	/*padding-bottom: calc(var(--navbar_height)/2 - var(--navbar_element_fontsize));*/
	padding-bottom: calc(var(--navbar_element_fontsize)/2);
	margin-top: 0%;
	margin-left: 0;
	margin-right: 0;

	text-decoration: none;
	font-family: var(--navbar_element_font);
	font-size: var(--navbar_element_fontsize);
	/*font-variant: small-caps;*/
	text-transform: uppercase;

	/*border-right: 3px solid var(--navbar_text_color);
	border-left: 3px solid var(--navbar_text_color);*/

	background-color: var(--navbar_background_color);
	color: var(--navbar_text_color);

	border-radius: 0px 0px calc(var(--navbar_element_width)/2) calc(var(--navbar_element_width)/2);
}

.header .navbar .navbar_element a:hover{
	background-color: var(--navbar_text_color);
	color: var(--navbar_background_color);
}

/*--------------*/
/*	SITECONTENT	*/
/*--------------*/
.site_content{
	position: relative;
	margin-top: var(--sitecontent_margin_top);
	margin-bottom: var(--sitecontent_margin_bottom);
	width: 90%;
	left: calc(50% - 90%/2);
	height: auto;
}

/*--------------*/
/*	FOOTER		*/
/*--------------*/
.footer_container{
	display: grid;
	grid-template-columns: 20% 30% 20% 10% 20%;
	grid-template-rows: 80% 20%;
	background: linear-gradient(0deg, var(--navbar_background_color) 0%, var(--background_color) 100%);
	color: var(--footer_text_color);
	margin-top: 25px;
}

.footer_container h3{
	font-family: var(--footer_h3_font_family);
	font-size: var(--footer_h3_fontsize);
	color: var(--footer_h3_color);
}

.footer_container p{
	font-family: var(--footer_p_font_family);
	font-size: var(--footer_p_fontsize);
	color: var(--footer_p_color);
}

.footer_container a{
	font-family: var(--footer_a_font_family);
	font-size: var(--footer_a_fontsize);
	color: var(--footer_a_color);
	text-decoration: underline;
}

.footer .footer_container .conclusion{
	display: inline;
	grid-column: 2/3;
}

.footer .footer_container .contact{
	display: inline;
	grid-column: 3/4;
}

.footer .footer_container .contact a{
	font-family: var(--footer_a_font_family);
}

.footer .footer_container .social{
	display: inline;
	grid-column: 4/5;
}

.footer .footer_container .legal{
	grid-column: 1/6;
	grid-row: 2/3;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 50%
						50%;
	/*margin-top: 25px;*/
	margin-bottom: 25px;
}

.footer .footer_container .legal .copyright_claim{
	display: inline;
	grid-row: 1/2;
	text-align: center;
	font-family: Calibri;
	font-weight: bold;
	
}
.footer .footer_container .legal .links{
	display: inline;
	grid-row: 2/3;
	text-align: center;

}

.footer .footer_container .legal .links a{
	font-family: Calibri;
}

.social_img{
	width: 30px;
	height:auto;
	margin-bottom: 25px;
	margin-right: 50px;
}


/*------------------------------------------*/
/*				SITECONTENT(SPECIFIC)		*/
/*------------------------------------------*/


	/*--------------*/
	/*	ABOUT		*/
	/*--------------*/
	.about_container{
		display: grid;
		grid-template-columns: 50% 50%;
		grid-template-rows: 100%;
		background: var(--sitecontent_container_background);
	}

	.about_container .image{
		grid-column: 1/2;
		grid-row: 1/2;
		margin-right: 25px;
	}

	.about_container .text{
		margin-left: 25px;
		margin-right: 25px;
		grid-column: 2/3;
		grid-row: 1/2;
	}

	.about_container .text h2{
		font-family: var(--h2_font_family);
		font-size: var(--h2_fontsize);
		color: var(--h2_text_color);
		text-align: left;
	}

	.about_container .text p{
		font-family: var(--p_font_family);
		font-size: var(--p_fontsize);
		color: var(--p_text_color);
		text-align: justify;
	}

	/*--------------*/
	/*	SERVICE		*/
	/*--------------*/
	.service_container{
		display: grid;
		/*grid-template-columns: 50% 50%;*/
		grid-template-columns: 100%;
		grid-template-rows: 100%;
		background: var(--sitecontent_container_background);
	}

	.service_container .image{
		grid-column: 1/2;
		grid-row: 1/2;
		margin-right: 25px;
	}

	.service_container .text{
		margin-left: 25px;
		margin-right: 25px;
		grid-column: 1/2;
		grid-row: 1/2;
	}

	.service_container .text h2{
		font-family: var(--h2_font_family);
		font-size: var(--h2_fontsize);
		color: var(--h2_text_color);
		text-align: left;
	}

	.service_container .text p{
		font-family: var(--p_font_family);
		font-size: var(--p_fontsize);
		color: var(--p_text_color);
		text-align: justify;
	}

	/*--------------*/
	/*	PRODUCTS	*/
	/*--------------*/

	.products_container{
		display: grid;
		grid-template-columns: 50% 50%;
		grid-template-rows: 20% 20% 20% 20% 20%;
		background: var(--sitecontent_container_background);
	}

	.dia_button_left{
		display: inline-block;
		width: 4rem;
		height: 4rem;
		border-style: none;
		position: relative;
		float: left;
		top: -50%;
		left: 0%;
		vertical-align: middle;
		margin: 0;
		white-space: nowrap;
		color: var(--dia_button_text_color);
		background: var(--dia_button_background_color);
		border-radius: 0 2rem 2rem 0;
		font-size: var(--dia_button_font_size);
	}

	.dia_button_right{
		display: inline-block;
		width: 4rem;
		height: 4rem;
		border-style: none;
		position: relative;
		float: right;
		right: 0%;
		top: -50%;
		vertical-align: middle;
		margin: 0;
		white-space: nowrap;
		color: var(--dia_button_text_color);
		background: var(--dia_button_background_color);
		border-radius: 2rem 0 0 2rem;
		font-size: var(--dia_button_font_size);
	}

	.dia_button_left:hover{
		color: var(--dia_button_background_color);
		background: var(--dia_button_text_color);
	}

	.dia_button_right:hover{
		color: var(--dia_button_background_color);
		background: var(--dia_button_text_color);
	}

	.show{
		white-space: nowrap;
		width: 100%;
		overflow: hidden;
		aspect-ratio: 16/11;
		background: var(--background_color);
	}

	.products_container #show_0{
		grid-column: 1/2;
		grid-row: 1/2;
		margin-right: 25px;
		/*padding-bottom: 10px;*/
	}

	.products_container #show_1{
		grid-column: 1/2;
		grid-row: 2/3;
		margin-right: 25px;
		/*padding-bottom: 10px;*/
	}

	.products_container #show_2{
		grid-column: 1/2;
		grid-row: 3/4;
		margin-right: 25px;
		/*padding-bottom: 10px;*/
	}

	.products_container #show_3{
		grid-column: 1/2;
		grid-row: 4/5;
		margin-right: 25px;
	}

	.products_container .text1{
		margin-top: calc(var(--h2_fontsize) + 1.25rem);
		margin-left: 25px;
		margin-right: 25px;
		grid-column: 2/3;
		grid-row: 1/2;
	}

	.products_container .text2{
		margin-left: 25px;
		margin-right: 25px;
		grid-column: 2/3;
		grid-row: 2/3;
	}

	.products_container .text3{
		margin-left: 25px;
		margin-right: 25px;
		grid-column: 2/3;
		grid-row: 3/5;
	}

	.products_container .text4{
		margin-left: 25px;
		margin-right: 25px;
		grid-column: 2/3;
		grid-row: 4/5;
	}

	.products_container .text5{
		margin-left: 25px;
		margin-right: 25px;
		grid-column: 2/3;
		grid-row: 5/6;
	}

	.products_container #show_4{
		grid-column: 1/2;
		grid-row: 5/6;
		margin-right: 25px;
	}

	.wasserdichte_wandsysteme_a{
		color: var(--h3_text_color);
		background-color: var(--background_color);
	}

	.wasserdichte_wandsysteme_a:hover{
		color: var(--background_color);
		background-color: var(--h3_text_color);
	}

	.products_container h2{
		font-family: var(--h2_font_family);
		font-size: var(--h2_fontsize);
		color: var(--h2_text_color);
		text-align: left;
	}

	.products_container h3{
		font-family: var(--h3_font_family);
		font-size: var(--h3_fontsize);
		color: var(--h3_text_color);
		text-align: left;
	}

	.products_container p{
		font-family: var(--p_font_family);
		font-size: var(--p_fontsize);
		color: var(--p_text_color);
		text-align: justify;
	}

	.products_container .title{
		margin-left: 25px;
		margin-right: 25px;
		grid-column: 2/3;
		grid-row: 1/2;
	}

	/*--------------*/
	/*	REFERENCE	*/
	/*--------------*/

	.reference_container{
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: 50% 50%;
		background:var(--sitecontent_container_background);
	}

	.reference_container .reference_container_1{
		grid-column: 1/2;
		grid-row: 1/2;
		margin-right: 25px;
		overflow: hidden;
		display: grid;
		grid-template-columns: 33% 33% 33%;
		grid-template-rows: 10% 45% 45%;
	}

	.reference_container .reference_container_2{
		grid-column: 1/2;
		grid-row: 2/3;
		margin-right: 25px;
		margin-top: 25px;
		overflow: hidden;
		display: grid;
		grid-template-columns: 33% 33% 33%;
		grid-template-rows: 50% 50%;
	}

	.reference_container .reference_container_1 .reference_0{
		overflow: hidden;
		grid-column: 1/4;
		grid-row: 1/2;
	}

	.reference_container .reference_container_1 .reference_1{
		margin: 25px;
		overflow: hidden;
		grid-column: 1/2;
		grid-row: 2/3;
	}

	.reference_container .reference_container_1 .reference_2{
		margin: 25px;
		overflow: hidden;
		grid-column: 2/3;
		grid-row: 2/3;
	}

	.reference_container .reference_container_1 .reference_3{
		margin: 25px;
		overflow: hidden;
		grid-column: 3/4;
		grid-row: 2/3;
	}

	.reference_container .reference_container_1 .reference_4{
		margin: 25px;
		overflow: hidden;
		grid-column: 1/2;
		grid-row: 3/4;
	}

	.reference_container .reference_container_1 .reference_5{
		margin: 25px;
		overflow: hidden;
		grid-column: 2/3;
		grid-row: 3/4;
	}

	.reference_container .reference_container_1 .reference_6{
		margin: 25px;
		overflow: hidden;
		grid-column: 3/4;
		grid-row: 3/4;
	}

	.reference_container .reference_container_2 .reference_7{
		margin: 25px;
		overflow: hidden;
		grid-column: 1/2;
		grid-row: 1/2;
	}

	.reference_container .reference_container_2 .reference_8{
		margin: 25px;
		overflow: hidden;
		grid-column: 2/3;
		grid-row: 1/2;
	}

	.reference_container .reference_container_2 .reference_9{
		margin: 25px;
		overflow: hidden;
		grid-column: 3/4;
		grid-row: 1/2;
	}

	.reference_container .reference_container_2 .reference_10{
		margin: 25px;
		overflow: hidden;
		grid-column: 1/2;
		grid-row: 2/3;
	}

	.reference_container .reference_container_2 .reference_11{
		margin: 25px;
		overflow: hidden;
		grid-column: 2/3;
		grid-row: 2/3;
	}

	.reference_container .reference_container_2 .reference_12{
		margin: 25px;
		overflow: hidden;
		grid-column: 3/4;
		grid-row: 2/3;
	}

	.reference_container h2{
		font-family: var(--h2_font_family);
		font-size: var(--h2_fontsize);
		color: var(--h2_text_color);
		text-align: center;
	}
	.reference_container h3{
		font-family: var(--h3_font_family);
		font-size: var(--h3_fontsize);
		color: var(--h3_text_color);
		text-align: middle;
	}

	.reference_container ul{
		font-family: var(--p_font_family);;
		font-size: var(--p_fontsize);
		color: var(--p_text_color);
		text-align: justify;
	}

	/*--------------*/
	/*	WW			*/
	/*--------------*/
	.ww .banner{
		display: grid;
		grid-template-columns: 50% 50%;
		grid-template-rows: 50% 50%;
		background: var(--sitecontent_container_background);
		overflow:hidden;
	}

	.ww .banner .image_container_1{
		grid-column: 1/2;
		grid-row: 1/2;
		margin-right: 25px;
		background-color: var(--header_background_color);
		overflow: hidden;
	}
	
	.ww .banner .text1{
		margin-left: 25px;
		margin-right: 25px;
		grid-column: 2/3;
		grid-row: 1/2;
	}
	.ww .banner .text2{
		margin-left: 25px;
		margin-right: 25px;
		grid-column: 2/3;
		grid-row: 2/3;
	}

	.ww .image_container_1 .symbols{
		display: grid;
		grid-template-columns: 33% 33% 33%;
	}

	.image_container_1 img{
		margin-top: 3rem;
		width: 50%;
		height: auto;
		margin-left: auto;
		margin-right: auto;

	}

	.image_container_1 .reference_installation img{
		position: relative;
		display: block;
		width: auto;
		height: 50%;
		margin-left: auto;
		margin-right: auto;
	}

	.image_container_1 .reference_installation h3{
		text-align: center;
	}

	.reference_installation{
		display: grid;
		grid-template-columns: 33% 33% 33%;
		grid-template-rows: 80% 20%;
	}

	.reference_installation div{
		margin-top: 5rem;
		width: 90%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}

	.ww .reference_installation .installation_wc img{
		grid-column: 1/2;
		grid-row: 1/2;
	}

	.ww .reference_installation .installation_shower_l img{
		grid-column: 2/3;
		grid-row: 1/2;
	}

	.ww .reference_installation .installation_shower_u img{
		grid-column: 3/4;
		grid-row: 1/2;
	}

	.ww .reference_installation .installation_wc h3{
		grid-column: 1/2;
		grid-row: 2/3;
	}

	.ww .reference_installation .installation_shower_l h3{
		grid-column: 2/3;
		grid-row: 2/3;
	}

	.ww .reference_installation .installation_shower_u h3{
		grid-column: 3/4;
		grid-row: 2/3;
	}

	.ww .banner .title_picture{
		width:100%;
		grid-column: 1/2;
		grid-row: 1/2;
	}

	.ww .banner .tiles_picture{
		position: relative;
		width:100%;
		grid-row: 2/3;
		grid-column: 1/2;
		right: 25px;
	}




	.ww h2{
		font-family: var(--h2_font_family);
		font-size: var(--h2_fontsize);
		color: var(--h2_text_color);
		text-align: left;
	}

	.ww h3{
		font-family: var(--h3_font_family);
		font-size: var(--h3_fontsize);
		color: var(--h3_text_color);
		text-align: left;
	}

	.ww p{
		font-family: var(--p_font_family);
		font-size: var(--p_fontsize);
		color: var(--p_text_color);
		text-align: justify;
	}