@font-face{
	font-family: 'Montserrat-Regular';
	src: url('../font/Montserrat-Regular.ttf')format('truetype');
}
:root{
	/*
	calc(minfont + (maxFont-minFont)*(maxScreen-minScreen)/(maxScreen-minScreen)
	= 40px font-size : 300px min-screen-size
	= 22px     "     : 1600px  max-screen
	*/
	--maxWidth: 1600px;
	--h1_font: calc(22px + (40	- 22)*(100vw - 300px)/(1600 - 300));
	--h2_font: calc(18px + (28 - 18)*(100vw - 300px)/(1600 - 300));
	--h3_font: calc(14px + (22 - 14)*(100vw - 300px)/(1600 - 300));
	--h5_font: calc(12px + (18 - 12)*(100vw - 300px)/(1600 - 300));
	--p_font: calc(14px + (18 - 14)*(100vw - 300px)/(1600 - 300));
	--small_font: calc(10px + (16 - 10)*(100vw - 300px)/(1600 - 300));
	--grey1: #f0f0f0; /*rgb(240,240,240)*/
	--grey2: #e0e0e0; /*rgb(224,224,224)*/
	--grey3: #c0c0c0; /*rgb(192,192,192)*/
	--grey4: #a0a0a0; /*rgb(160,160,160)*/
	--bgColor:#808080; /*rgb(128,128,128) bg*/
	--grey5: #606060; /*rgb((96,96,96)*/
	--grey6: #404040; /*rgb(64,64,64)*/
	--orange: #ffa500;
}
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	font-family: 'Montserrat-Regular', sans-serif;
	/* max-width: var(--maxWidth); */
	margin: 0 auto;
	background: var(--bgColor);
	/* background: #e0e0e0; */
}
h1, h2, h3, p, small{
	pointer-events: none;
	hyphens:auto;
}
h1{
	font-weight: 400;
	width: 100%;
	font-size: var(--h1_font);/*check*/
	font-variant: small-caps;
	color: var(--grey2);
	letter-spacing: 1px;
	padding-left: 4%;
	margin-bottom: 50px;
}
h3{
	font-weight: 400;
	font-size: var(--h3_font);/*check*/
	font-variant: small-caps;
	letter-spacing: 1px;
	color: var(--grey5);
	margin-bottom: 5%;
}
h4{
	font-weight: 300;
	font-size: var(--h4_font);/*check*/
	font-variant: small-caps;
	letter-spacing: 1px;
	color: var(--orange);
	/* margin-bottom: 5%; */
	/* align-self: center; */
}
p{
	font-weight: 400;
	color:var(--grey5);
	font-size: var(--p_font);/*check*/
	line-height: calc(20px + (25 - 20)*(100vw - 300px)/(1600 - 300));/*check*/
	letter-spacing: 1px;
	padding-bottom: 15px;
}
header, section, h1{
	max-width: var(--maxWidth);
	margin: 0 auto;
}
article{
	padding: 2%;
}
/*-----------------------------------------------------------*/
/*------------------- intro defaults -----------------------*/
/*-----------------------------------------------------------*/
	#blwSVG{
		width: 25vw;
	}
#blwOverlay{
	position: fixed;
	top: 0;
	left: 0;
	/* right: 0; */
	/* bottom:0; */
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	/* padding-bottom: 15%; */
	/* background: var(--intro); */
	background: var(--bgColor);
	z-index:1;
	/* border: 3px solid red; */
		/* display: none; */
}
#introWrap{
	display: none;
	opacity: 0;
}
/*-----------------------------------------------------------*/
/*------------------- HEADER --------------------------------*/
/*-----------------------------------------------------------*/
header{
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	margin-bottom: 50px;
	/* border-bottom: 1px solid var(--grey5); */
}
#logoBox{
	width: 35%;
}
#headerLine{
	width: 60%;
	opacity: 1;
	height: 8px;
	/* margin-top: 10px; */
	background-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #ff6600 0%,  rgba(0,0,0,0) 0%);
	/* border: 1px solid red; */
}
#logoSVG{
	width: 12%;
}
#logoSVG:hover{
	cursor:pointer;
}
/* -------------------------- default matchMedia ----------------*/
@media only screen and (max-width: 768px){
	#blwSVG{
		width: 50vw;
	}
	#logoSVG{
		width: 24%;
	}
	header{
		margin: 0;
		/* border-bottom: 2px solid var(--grey5); */
	}
}
/*-------------- index -----------------------------------*/
/*-------------- index -----------------------------------*/
/*-------------- index -----------------------------------*/
.waveShapes{
	width: 100%;
	height: 100%;
	display: block;
	/* cursor: pointer; */
}
#imgContainer{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	/* border: 1px solid black; */
}
#imgBox1{
	position:relative;
	width: 65%;
}
#imgBox1BaseImg{ 
	position: relative;
 width: 100%;
 height: auto;
	opacity: 0.4;
	/* border: 1px solid red; */
}
#imgBox1OverImg{
	position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: auto;
	clip-path: url(#fluidClip);
	-webkit-clip-path: url(#fluidClip);
}
#imgBox1SVGClip{
 position: absolute;
 width: 0;
 height: 0;
}
#imgBox1Wave{
	display: block;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
}
#imgBox2{
	display: flex;
	align-items: center;
	width: 30%;
	height: 100%;
	/* border: 1px solid red; */
}
#imgBox2Offset{
	position: relative;
	top: 0;
	left: -20%;
	/* width 97% verhindert sichtbare grundlinie*/
	width: 100%;
	/* ohne height folgt die hoehe dem inhalt */
	/* border: 2px solid #f0f; */
}
#imgBox2Shadow{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background: var(--grey5);	/* check */

}
#imgBox2Info{
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 15px;
	background: var(--grey1);
	/* background: #e0e0e0; */
}
#imgBox2InfoH3{
	width: 100%;
	text-align:center;
}
#imgBox2InfoH3Line{
	width: 100%;
	height: 4px;
	background-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #ff6600 0%,  rgba(0,0,0,0) 0%);
	/* margin-top: 20px; */
}
#imgBox2InfoP{
	padding: 15px 0px 30px;
}
#imgBox2Wave{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* -------------------- media query imgContainer -----------*/
/* -------------------- media query imgContainer -----------*/
/* -------------------- media query imgContainer -----------*/
@media only screen and (max-width: 768px){
	h1{
		text-align: center;
		padding: 0;
		margin-bottom: 50px;
	}
	#imgContainer{
		flex-direction: column;
	}
	#imgBox1BaseImg{
		opacity: 0.8;
	}
	#imgBox1, #imgBox2{
		width: 100%;
	justify-content: center;
	}
	#imgBox2Offset{
		top: 30px;
		left: 0;
	}
	#imgBox2Shadow{
		background: none;
	}
	#imgBox2Info{
		width: 100%;
		padding: 0;
		background: none;
		color: var(--grey2);
	}
	#imgBox2Info h3{
		color: var(--grey2);
	}
	#imgBox2InfoP{
		padding: 15px 0px 30px;
	}
	#imgBox2InfoP p{
		color: var(--grey1);
	}
}
/* --------------------moodContainer ---------*/
#moodWrap{
	display: none;
}
#moodContainer{
	width: 100%;
	flex-direction: column;
	display: flex;
}
.moodBox{
	width: 100%;
	text-align: center;
	padding: 50px 0;
	/* transform: scale(0); */
	background-image: linear-gradient(to bottom right, var(--grey3)  0%, var(--bgColor) 0%);
}
.moodBoxImg{
	width: 60%;
	opacity: 0;
	transform: translateX(-100%);
	transition: 0.5s;
}
.mover{
	transform: translateX(0);
	opacity: 1;
}
/*--------------- footer ---------------------------*/
footer{
	width: 100%;
	height: 100px;
	background: var(--grey5);
}