/* flex layout */
/* HEADER ######################## */
div#headercontainer {
	position: fixed;
	width: 100%; 
	height: 90px;
	top: 0;
	left: 0;
	border-bottom: 1px solid #CCCCCC;
	background-color: rgba(255, 255, 255, 0.8); /*  */
	background: url('../graphics/gw-bkg.gif');
	z-index: 3;
}
div#header {
	width: 96%;
	max-width: 2400px;
	margin: 0 auto;
	display: flex;
}
div#headerlogo {
	position: relative;
	top: 16px;
	left: 20px;
}
div#headertxt {
	position: relative;
	float: left;
	top: 16px;
	left: 30px;
	min-width: 280px;
}
div#headernavi {
	position: relative;
	top: 48px;
	min-width: 500px;
	flex-grow: 1;
}
div#bgimg {
	position: relative;
	top: 90px; 
	left: 0px;
	margin: 0 auto;
	z-index: 0;
}
div#bgimg div {
	padding: 0 !important;
}

/* HEADER end #################### */
/* CONTENT ####################### */
div#start-container {
	position: absolute;
}
div#content-container {
	position: relative;
}
div#start-container, div#content-container {
	top: 0px;
	width: 100%;
	margin-top: 100px; 
	z-index: 2;
}
div#main-content {
	width: 100%;
	max-width: 2400px;
	margin: 0 auto;
}
div#maincontainer {
	width: 96%;
	max-width: 2400px;
	margin: 0 auto;
}
div.boxContainer100, div.boxContainer94, div.boxContainer80 { 
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}
div.boxContainer100 {
	width: 100%;
}
div.boxContainer94 {
	width: 98%; /* breiter von 94% für Katalog */
}
div.boxContainer80 {
	width: 80%;
}
div.flexBox100 {
	width: 100%;
}
div.flexBox80 {
	width: 78%;
	margin: 0 1%;
}
div.flexBox70 {
	width: 68%;
	margin: 0 1%;
}
div.flexBox60 {
	width: 58%;
	margin: 0 1%;
}
div.flexBox50 {
	width: 48%;
	margin: 0 1%;
}
div.flexBox40 {
	width: 38%;
	margin: 0 1%;
}
div.flexBox30 {
	width: 28%;
	margin: 0 1%;
}
div.flexBox20 {
	width: 18%;
	margin: 0 1%;
}

div.frame-layout-0, div.frame-layout-1, div.frame-layout-2, div.frame-layout-3 {
	width: 100%;
	padding: 10px;
/*	margin: 10px;
	min-height: 160px; */
}
div.frame-layout-1 {
	background: rgba(255, 255, 255, 1);
	border-radius: 12px;
	border: 1px solid #333333;
}
div.frame-layout-2 {
	border-radius: 12px;
}
div.frame-layout-3 {
	border: 1px solid #999999;
	border-radius: 12px;
}
div.frame-type-menu_pages {
	display: inline-block;
}
/* CONTENT startpage ############# */
div#headerBorder {
	position: relative;
	margin: 6px 2%;
	background-color: rgba(255, 255, 255, 0.4);
	border-radius: 12px;
}
div#row1, div#row2, div#row3, div#row4 {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
}
div.s-element {
	width: 31%;
	margin: 0 1%;
}


/* CONTENT end ################### */
/* FOOTER ######################## */
div#footercontainer {
	position: relative;
	bottom: -20px;
	background-color: #333333;
	width: 100%;
	z-index: 3;
}
div#footer {
	position: relative;
	width: 96%;
	max-width: 2400px;
	min-height: 140px;
	margin: 0 auto;
	display: flex;
	color: #FFFFFF;
	margin-top: 42px; /* compensation for border text */
}
div#footer_left, div#center_left, div#center_right, div#footer_right {
	width: 25%;
	margin: 0 10px;
}

/* FOOTER end #################### */

/* mobile ################################################# */
@media screen and (max-width: 768px) {
	div#row1, div#row2, div#row3, div#row4 {
		flex-wrap: wrap;
	}
	div#headerlogo {
		display: none;
	}
	div#headertxt {
		position: initial;
		margin: 10px 0;
	}
	div#headercontainer {
		border: none;
		height: unset;
	}
	div#bgimg img {
		display: none;
	}
	div#main-content {
		background: url('../graphics/gw-bkg.gif');
	}
	div#start-container {
		position: relative;
		margin-top: 60px;
	}
	div.s-element, div.flexBox80, div.flexBox50, div.boxContainer80 {
		width: 100%;
		margin: unset;
	}
	div.boxContainer100, div.boxContainer80 { 
		flex-wrap: wrap;
	}
	div#content-container {
		position: relative;
		margin-top: 60px;
	}
	div#footercontainer {
		position: relative;
	}
	div#footer {
		flex-flow: column;
	}
	div#footer_left, div#center_left, div#center_right, div#footer_right {
		width: 100%;
		margin: 0 10px;
	}	
}