body {
	margin:			0;
	padding:		0;
	font-family:"Open Sans",Arial,Helvetica,sans-serif;
	color:			#505050;
	background-color:	#fff;
	}

img {
	max-width:100%;
	height:auto;
}

a	{
	text-decoration:	none;
	color:#5170a6;
	}

a:hover {
	text-decoration:	underline;
	}

a:active , a:focus {
	outline: none;
	}

#kontakt input,textarea {
	font-family:"Open Sans",Arial,Helvetica,sans-serif;
	font-size:1.1em;
	padding:0.5em;
	border:1px solid #404040;
	font-weight:bold;
	width:23em;
}

#kontakt input[type="submit"] {
	font-size:1.1em;
	padding:0.5em;
	border:1px solid #404040;
	background-color:#008000;
	color:#fff;
	width:15em;
}

#kontakt input[type="submit"]:hover {
	background-color:#00a000;
}

#kontakt label {
	display:inline-block;
	width:7em;
}

.kontakt {
	display:none;
}

#chk { margin:-2px 1em 0 7em; }

#download a:before {
	content: url(i/pdficon_small.gif);
	margin-right:.5em;
}

#ueberschrift-bild {
	display:block;
	margin:0 auto;
/*
	width:100% !important;
*/
}

.logo {
	width:299px;
}

/*
.fbCycler * {
	width:100%;
}
*/

.seite {
	margin:			0 auto;
	max-width:		1000px;
	background-color:	#fff;
	padding:		1em 1.5em 1em 1.5em;
	}

#header a {
	color:#404040;
	text-decoration:none;
	}

#header a:hover {
	text-decoration:underline;
	}

.fl {
	float:			left;
	}
	
.fr {
	float:			right;
	}
	
.fc {
	clear:			both;
	}

.col-black {
	color:			#000;
	}
.col-white {
	color:			#fff;
	}
.col-grau {
	color:			#7c8e90;
	}
.col-grau-headline {
	color:			#818b8d;
	}
.col-grau-navi-unterrubrik {
	color:			#dbdcde;
	}
.col-blau {
	color:			#5170a6;
	}

.size-10 {
	font-size:		0.63em;
	}
.size-11 {
	font-size:		0.69em;
	}
.size-12 {
	font-size:		0.75em;
	}
.size-13 {
	font-size:		0.81em;
	}
.size-14 {
	font-size:		0.88em;
	}
.size-16 {
	font-size:		1em;
	}
.size-17 {
	font-size:		1.05em;
	}
.size-18 {
	font-size:		1.1em;
	}
.size-19 {
	font-size:		1.2em;
	}
.size-20 {
	font-size:		1.25em;
	}
.size-24 {
	font-size:		1.5em;
	}
.size-28 {
	font-size:		1.75em;
	}

.fett {
	font-weight:		bold;
	}

.kachel {
	margin-top:		1.5em;
	margin-bottom:		0.5em;
}

.innenkachel {
	height:21em;
	height:100%;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-moz-justify-content:space-between;
	-webkit-justify-content:space-between;
	justify-content:space-between;
	-moz-flex-direction:column;
	-webkit-flex-direction:column;
	flex-direction:column;
}

.innenbox {
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-moz-justify-content:space-between;
	-webkit-justify-content:space-between;
	justify-content:space-between;
	-moz-flex-direction:column;
	-webkit-flex-direction:column;
	flex-direction:column;
}

.ganzoben {
	-webkit-flex:1 0 auto;
	flex:1 0 auto;
}

.ganzunten {
	-webkit-flex-shrink:0;
	flex-shrink:0;
}

#navigation {
	display:block;
/*	margin-bottom:1em;	*/
}

#main-navi ul {
	position:		relative;
	margin:			1.5em 0 0 0;
	padding:		0;
    	z-index:30;
	}

#main-navi li {
	float:			left;
	font-size:		1em;
	color:			#404040;
	text-align:		center;
	background-color:	#fff; 
	list-style:		none;
	padding:		0.3em 2em 0.6em 0;
	}

#main-navi ul li a {
	text-decoration:	none;
	color:			#404040;
	}

#main-navi ul li a:hover  {
	color:			#5170a6;
	}

#main-navi ul li:hover,
#main-navi ul li:active {
	color:			#5170a6;
	background-color:	#fff;
	}

#main-navi ul ul {
	display:		none;
	position:		absolute;
	margin-left:		-0.55em;
	margin-top:		0.6em;
	padding:		0;
	}	

#main-navi ul ul li {
	clear:			left;
	width:			100%;
	border:			0;
    	border-right:		1px solid #000;
   	border-left:		1px solid #000;
	color:			#000;
	background-color:	#fff; 
	text-align:		left;
	padding:0;
	margin:0;
	}

#main-navi ul ul li:first-child {
   	border-top:1px solid #000;
   	}
   	
#main-navi ul ul li:last-child {
   	border-bottom:1px solid #000;
   	}

#main-navi ul li:hover ul,
#main-navi ul li:active ul {
	display:block;
	}

#main-navi ul ul li:hover,
#main-navi ul ul li:active {
/*	background-color:	#dbdcde;	*/
	}

#main-navi ul ul li a {
	display:		block;
	text-decoration:	none;
	color:			#000;
	padding:		0.5em 1em 0.5em 1em;
	}

#main-navi ul ul li a:hover  {
	color:			#5170a6;
	background-color:	#f0f0f0;
	}

.main-navi-up-ausgewaehlt {
	color:#5170a6 !important;
	font-weight:bold;
	background-color:#f0f0f0 !important;
	}
	
.main-navi-hp-ausgewaehlt {
	color:			#5170a6 !important;
	}
	
#naviband {
/*	float:			left;	*/
/*	height:			2em;	*/
/*	margin-top:		1.5em;	/*
/*	margin-left:		3em;	*/
	color:			#5170a6;
	font-size:		0.88em;
	}
#naviband a {
	color:			#5170a6;	
	}
#naviband a:hover {
	text-decoration:	underline;
	}


#inhalt {
	background-color:	#fff;
	padding:		1em 0 1em 0;
	color:			#505050;
	margin-top:		0px;
	-ms-flex:1 100%;
	-webkit-flex:1 100%;
	flex:1 100%;
	flex-direction:row;
	}

.inhalt-eindrittel {
	-ms-flex:1 1 0%;
	-webkit-flex:1 1 0%;
	flex:1 1 0%;

	line-height:		1.5em;
	}

.inhalt-zweidrittel {
	-ms-flex:2 1 0%;
	-webkit-flex:2 1 0%;
	flex:2 1 0%;
	
	line-height:		1.5em;
	text-align:		justify;
	}

#inhalt-zweidrittel-div {
/*	padding-left:0.3em;	*/
}

#breit {
	padding-right:2em;
}

#schmal {
	margin-top:0;
}

/*
.produktinhalt-links {
	width:			635px;
	float:			left;
	margin-right:		30px;
	line-height:		1.5em;
	text-align:		justify;
	}

.produktinhalt-rechts {
	width:			275px;
	float:			left;
	line-height:		1.5em;
	}

.seiteninhalt-links {
	width:			614px;
	float:			left;
	margin-right:		30px;
	line-height:		1.5em;
	text-align:		justify;
	}

.seiteninhalt-rechts {
	width:			306px;
	float:			left;
	line-height:		1.5em;
	}
*/

#footer-container {
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-align-items:flex-start;
	-moz-align-items:flex-start;
	-ms-align-items:flex-start;
	-webkit-flex-direction: row;
	flex-direction: row;
	align-items:flex-start;
	-webkit-align-items:stretch !important;
	align-items:stretch !important;
}

#footer-links {
	-ms-flex:1 1 0%;
	-webkit-flex:1 1 0%;
	flex:1 1 0%;
	min-width:15em;
}

#footer-rechts {
	-ms-flex:2 1 0%;
	-webkit-flex:2 1 0%;
	flex:2 1 0%;
}

/*
.footer-liste ul {
	margin:			0;
	padding-left:		15px;
	list-style-type:	disc;
	}
.footer-liste li {
	margin-bottom:		10px;
	}
*/

#footer a {
	color:			#818b8d;
	}

#footer a:hover {
	text-decoration:	underline;
	}

.spalten-10 {
	-moz-columns:13em 3;
	-webkit-columns:13em 3;
	columns:13em 3;
}

.spalten-10-2 {
	-moz-columns:12em 3;
	-webkit-columns:12em 3;
	columns:12em 3;
	
	font-size:1.1em;
	padding-left:0.4em;
	list-style-position:inside;
}

#uebersicht-pic {
	flex:1 100%;
	flex-wrap:wrap;justify-content:space-between;
	margin-left:-1em
}

/*
#uebersicht-pic img {
	width:100%;
	height:100%;
	max-height:283px;
}

#uebersicht-pic-einzel {
	color:			#505050;
	font-size:		95%;
	border:			1px solid #7c8e90;
	padding:1em;
	margin:0 0 1em 1em;

	-ms-flex:1 1 15em;
	-webkit-flex:1 1 15em;
	flex:1 1 15em;
	}
	
#uebersicht-pic-doppel {
	color:			#505050;
	font-size:		95%;
	border:			1px solid #7c8e90;
	padding:1em;
	margin:0 0 1em 1em;

	-ms-flex:2 1 33em;
	-webkit-flex:2 1 33em;
	flex:2 1 33em;
	}
*/

#kacheln,
#produktkacheln {

/* Das Flex-Modell ist als Fallback für ältere Browser gedacht */

	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-align-items:flex-start;
	-moz-align-items:flex-start;
	-ms-align-items:flex-start;
	align-items:flex-start;
	flex-wrap:wrap;justify-content:space-between;
	-webkit-align-items:stretch !important;
	align-items:stretch !important;

/* Das obige Flex-Design wird von aktuellen Browsern mit dem Grid-Layout überschrieben dann dargestellt */

	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(18em, 1fr));
	grid-gap:0;
	
	margin-left:-1em;
	font-size:95%;
}

.boxkacheln {
	grid-template-columns:repeat(auto-fit, minmax(185px, 1fr)) !important;
}

#kacheln a,
#produktkacheln a {
	text-decoration:	none;
	box-shadow:		15px 15px #fff;
	color:			#505050;
	border:			1px solid #7c8e90;
	text-align:justify;
	padding:1em;
	margin:0 0 1em 1em;

	-ms-flex:1 1 15em;
	-webkit-flex:1 1 15em;
	flex:1 1 15em;
	}

#kacheln a:hover,
#produktkacheln a:hover {
	box-shadow: 3px 3px 15px #505050, -3px -3px 15px #505050;
	-moz-transform: scale(1.01, 1.01);
	-webkit-transform: scale(1.01, 1.01);
	-o-transform: scale(1.01, 1.01);
	-ms-transform: scale(1.01, 1.01);
	transform: scale(1.01, 1.01);
}

.produktkacheln-linklos {
	box-shadow:		15px 15px #fff;
	color:			#505050;
	border:			1px solid #7c8e90;
	text-align:justify;
	padding:1em;
	margin:0 0 1em 1em;

	-ms-flex:1 1 15em;
	-webkit-flex:1 1 15em;
	flex:1 1 15em;
}

.boxkachel {
	margin:1em 0 0em 1em;

	-ms-flex:1 1 15em;
	-webkit-flex:1 1 15em;
	flex:1 1 15em;
	
	font-size:0.85em;
}

#kacheln img {
	width:100%;
	height:auto;
}

#kacheln-pic {
	flex:1 100%;
	flex-wrap:wrap;justify-content:space-between;
	margin-left:-1.5em;
	padding:0;
}

#kacheln-pic div {
	margin:0 0 0 2em;
	-ms-flex:1;
	-webkit-flex:1;
	flex:1;
	font-size:80%;
	padding:0;
}

#kacheln-pic img {
	width:100%;
	height:auto;
	padding:0;
}

#produktkacheln img {
	display:block;
	margin:0 auto;
	width:auto;
}

.table-box-1 {
	border:1px solid #7c8e90;
	}

/*
.kacheln-pic-links {
	flex:1 1 0%;
	text-align:center;
	align-self:flex-end;
	margin-right:1.5em;
}

.kacheln-pic-rechts {
	flex:2 1 0%;
	align-self:flex-start;
}

#kacheln-pic a {
	text-decoration:	none;
	box-shadow:		15px 15px #fff;
	color:			#505050;
	font-size:		95%;
	border:			1px solid #7c8e90;
	text-align:justify;
	padding:1em;
	margin:0 0 1em 1em;

	-ms-flex:1 1 20em;
	-webkit-flex:1 1 20em;
	flex:1 1 20em;
	}

#kacheln-pic a:hover {
	box-shadow: 3px 3px 15px #505050, -3px -3px 15px #505050;
	-moz-transform: scale(1.01, 1.01);
	-webkit-transform: scale(1.01, 1.01);
	-o-transform: scale(1.01, 1.01);
	-ms-transform: scale(1.01, 1.01);
	transform: scale(1.01, 1.01);
}

.kacheln-pic-element {
	flex:1 1 0%;
	height:100%;
	}
*/


.disto-3 {
	margin-top:		.5em;
	}
.disto-5 {
	margin-top:		1em;			/* 5px = 1em */
	}
.disto-10 {
	margin-top:		2em;
	}
.disto-20 {
	margin-top:		4em;
	}
.disto-30 {
	margin-top:		6em;
	}
.disto-40 {
	margin-top:		8em;
	}
.distu-0 {
	margin-bottom:		0;
	}
.distu-5 {
	margin-bottom:		1em;
	}
.distu-10 {
	margin-bottom:		2em;
	}
.distu-20 {
	margin-bottom:		4em;
	}
.distu-30 {
	margin-bottom:		6em;
	}
.distu-40 {
	margin-bottom:		8em;
	}
.distl-5 {
	margin-left:		1em;
	}
.distl-10 {
	margin-left:		2em;
	}
.distl-20 {
	margin-left:		4em;
	}
.distr-2 {
	margin-right:		0.5em;
	}
.distr-5 {
	margin-right:		1em;
	}
.distr-10 {
	margin-right:		2em;
	}
.distr-20 {
	margin-right:		4em;
	}

.bildunterschrift {
	font-size:		0.80em;
	line-height:		1.5em;
	color:			#505050;
	}

.blauer-kasten-ueberschrift {
	background-color:	#4d6fab;
	padding:		6px;
	color:			#FFFFFF;
	font-size:		1em;
	font-weight:		bold;
	}

.ueberschrift-spalte {
	font-size:		0.88em;
	font-weight:		bold;
	color:			#707070;
	padding-left:		7px;
	}

.abmessungen-grau {
	font-size:		0.88em;
	padding-left:		7px;
	background-color:	#E0E0E0;
	text-align:		right;
	white-space:		nowrap;
	}

.abmessungen-hell {
	font-size:		0.88em;
	padding-left:		7px;
	text-align:		right;
	white-space:		nowrap;
	}

.produktvorteile-liste {
	line-height:		1.5em;
	margin:			0;
	}

.tab-farben {
	font-size:		0.88em;
	padding:		0 8px 12px 6px;
	}

.farbskala {
	width:100px;
	height:45px;
	padding-top:2px;
}

/*
span.wrapper {
	display:		block;
	position:		relative;
	}

span.wrapper img.bild {
	display:		block;
	}
	
span.wrapper img.play {
	position:		absolute;
	top:0;
	left:0;
}
*/

.flex {
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-align-items:flex-start;
	-moz-align-items:flex-start;
	-ms-align-items:flex-start;
	align-items:flex-start;
}

.flex-15 {
	-ms-flex:1 1 15em;
	-webkit-flex:1 1 15em;
	flex:1 1 15em;
}

.flex-1 {
	-webkit-flex-grow:1;
	-moz-flex-grow:1;
	flex-grow:1;

}

.flex-2 {
	-webkit-flex-grow:2;  	/* 40% width */
	-moz-flex-grow:2;
	flex-grow:2;
}

.flex-3 {
	-webkit-flex-grow:3;  	/* 60% width */
	-moz-flex-grow:3;
	flex-grow:3;
}

.flex-stretch {
	-webkit-align-items:stretch !important;
	align-items:stretch !important;
}

.mobile-on {
	display:none;
}

.mobile-off {
	display:inline;
}



@media only screen and (max-width: 481px) {

#kontakt input,textarea {
	width:90%;
}

#kontakt textarea {
	display:block;
}

#kontakt input[type="submit"] {
	display:block;
	left:0;
}

#kacheln-pic div {
	-ms-flex:1 100%;
	-webkit-flex:1 100%;
	flex:1 100%;
	margin:1.5em 0 0.5em 2em;
}

#footer-rechts {
	-ms-flex:1 1 0%;
	-webkit-flex:1 1 0%;
	flex:1 1 0%;
	
	min-width:20em;
	}

#chk { margin:-2px 1em 0 0; }

#header-sprachauswahl {
	font-size:1em !important;
}

}

/*----------------------------------------------------------------------*/

@media only screen and (max-width: 612px) {

#footer-links {
	-ms-flex:1 1 100%;
	-webkit-flex:1 1 100%;
	flex:1 1 100%;
	margin-bottom:1em;
}

.spalten-10-2 {
	-moz-columns:12em 2;
	-webkit-columns:12em 2;
	columns:12em 2;
	
	padding-left:0;
}
}

/*----------------------------------------------------------------------*/

@media only screen and (max-width: 959px) {
body {
	font-size:90%;
	}

.logo {
	width:239px;
}
}

/*----------------------------------------------------------------------*/

@media only screen and (max-width: 680px) {
#uebersicht-pic img {
	width:100%;
	height:auto !important;
	max-height:100%;
}

#ueberschrift-bild {
/*	display:none;	*/
}


.spalten-10 {
	-moz-columns:13em 3;
	-webkit-columns:13em 3;
	columns:13em 3;
}

}

/*----------------------------------------------------------------------*/

@media only screen and (max-width: 820px) {
body {
	font-size:80%;
	}

#navigation {
	font-size:1em;
}
}

/*----------------------------------------------------------------------*/

@media only screen and (max-width: 745px) {		/* Wechsel der Navigationsstruktur! */
body {
	font-size:80%;
	}

.seite {
	padding:0.5em 0.75em;
	}

.logo {
	width:150px !important;
}

#navigation {
	display:none;
}

#ueberschrift-bild {
	margin-top:1em;
}

#main-navi ul {
	width:100%;
	margin:			1.5em 0 0 0;
	padding:		0;
    	z-index:30;
	}

#main-navi li {
	width:100%;
	clear:			left;
	float:			left;
	font-size:		1em;
	color:			#404040;
	text-align:		center;
	background-color:	#fff; 
	list-style:		none;
	padding:		0.6em 0 0.6em 0;
	text-align:left;
	border-bottom:1px solid #dfdfdf;
	}

#main-navi ul li a {
	text-decoration:	none;
	color:			#404040;
	}

#main-navi ul li a:hover  {
	color:			#5170a6;
	}
	
#main-navi ul li:hover,
#main-navi ul li:active {
	color:			#5170a6;
	background-color:	#fff;
	font-weight:bold;
	}

#main-navi ul ul {
	display:		none;
	position:		relative;
	margin-left:0;
	margin-top:0;
	padding:		0;
	}	

#main-navi ul ul li {
	clear:			left;
	width:			100%;
	font-weight:normal;
	border:			0;
	color:			#000;
	background-color:	#f0f0f0;
	border-bottom:1px solid #dfdfdf;
	padding:0;
	margin:0;
	}

#main-navi ul ul li::before {
	float:left;
	content:'\000BB';
	margin-top:0.3em;
	}


#main-navi ul ul li:first-child {
   	border-top:0;	
   	}

#main-navi ul ul li:last-child {
   	border-bottom:0;
   	}


#main-navi ul ul li a {
	display:		block;
	font-weight:normal;
	text-decoration:	none;
	color:			#000;
	padding:		0.4em 0 0.4em 1em;
	}

#main-navi ul ul li a:hover  {
	color:			#5170a6;
	background-color:	#f0f0f0;
	}

#main-navi ul li a {
	color:#000;
	}

#inhalt {
	flex-direction:column;
}

/*
.inhalt-zweidrittel {
	margin:1em 0 0 0;
	padding:0;
}
*/

#inhalt-zweidrittel-div {
	padding-left:0;
}

#breit {
	padding-right:0;
}

#schmal {
	margin-top:2em;
}

.mobile-on {
	display:block;
	float:right;
}

.mobile-off {
	display:none;
}

#header-sprachauswahl {
	font-size:1.2em;
}
	
}

/*----------------------------------------------------------------------*/

@media only screen and (min-width: 960px) {
body {
	font-size:100%;		/* 16px */
	}

#navigation { display:block !important; }
}