@charset "utf-8";
html, body{
	margin: 0;
	padding: 0;
}
img, object, embed, video {
	max-width: 100%;
}

/* IE 6 unterstützt keine maximale Breite, verwenden Sie daher eine Standardbreite von 100% */
.ie6 img {
	width:100%;
}

/* Layout für Mobilgeräte: 480 px oder weniger. */
.flexbox {
	margin-left: auto;
	margin-right: auto;
	width: 93.1%;
	padding-left: 2.45%;
	padding-right: 2.45%;
  box-shadow: 2px 2px 4px darkgrey;
}
#compleft {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#optright {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#optleft {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#compright {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
  text-align: center;
}
#sideleft {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#middle {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#sideright {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#fleft {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#fmiddle {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#fright {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

/* Layout für Tablet-PCs: 481 bis 800 px. Erbt Stile vom: Layout für Mobilgeräte. */
@media only screen and (min-width: 481px) {
.flexbox {
	width: 95.55%;
	padding-left: 1.225%;
	padding-right: 1.225%;
  box-shadow: 2px 2px 4px darkgrey;
}
#compleft {
	clear: both;
	float: left;
	margin-left: 0;
	width: 61.5384%;
	display: block;
  text-align: normal;
}
#optright {
	clear: none;
	float: left;
	margin-left: 2.5641%;
	width: 35.8974%;
	display: block;
}
#optleft {
	clear: both;
	float: left;
	margin-left: 0;
	width: 35.8974%;
	display: block;
}
#compright {
	clear: none;
	float: left;
	margin-left: 2.5641%;
	width: 61.5384%;
	display: block;
  text-align: normal;
}
#sideleft {
	clear: both;
	float: left;
	margin-left: 0;
	width: 35.8974%;
	display: block;
}
#middle {
	clear: none;
	float: left;
	margin-left: 2.5641%;
	width: 61.5384%;
	display: block;
}
#sideright {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#fleft {
	clear: both;
	float: left;
	margin-left: 0;
	width: 35.8974%;
	display: block;
}
#fmiddle {
	clear: none;
	float: left;
	margin-left: 2.5641%;
	width: 61.5384%;
	display: block;
}
#fright {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
}

/* Desktoplayout: 801 bis maximal 1232 px.  Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */
@media only screen and (min-width: 801px) {
.flexbox {
	width: 96.3666%;
	//max-width: 1232px;
	padding-left: 0.8166%;
	padding-right: 0.8166%;
	margin: auto;
  box-shadow: 2px 2px 4px darkgrey;
}
#compleft {
	clear: both;
	float: left;
	margin-left: 0;
	width: 66.1016%;
	display: block;
}
#optright {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 32.2033%;
	display: block;
}
#optleft {
	clear: both;
	float: left;
	margin-left: 0;
	width: 32.2033%;
	display: block;
}
#compright {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 66.1016%;
	display: block;
}
#sideleft {
	clear: both;
	float: left;
	margin-left: 0;
	width: 23.7288%;
	display: block;
}
#middle {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 49.1525%;
	display: block;
}
#sideright {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 23.7288%;
	display: block;
}
#fleft {
	clear: both;
	float: left;
	margin-left: 0;
	width: 32.2033%;
	display: block;
}
#fmiddle {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 32.2033%;
	display: block;
}
#fright {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 32.2033%;
	display: block;
}
}