@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300);

/* start general ########################### 
**/	

html {
		overflow-y: scroll;  
} 

.clear { clear:both; }

body {
	color: black;	
	background:#3a3e47;
	background:#4f5667;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
	font-size: 1.05em;
	}
	
p { 
	line-height:1.35em; 
	letter-spacing:0.02em;
	text-align:justify;
	-moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
	}
	
/*topline_px span nur temporär zur anzeige device-width*/
#topline_px { width:50px;height:20px;}
#topline_px span {  
		font-size: 1.5em; 
		color:red;
		}
	

#wrapper {
	max-width: 950px;/*achtung, die folgenden %-berechnungen haben von diesen px MINUS padding rechts und links auszugehen!!! */
	margin: 0 auto;
	margin-top:20px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-box-shadow: 0 0 15px rgba(0,0,0,1);
	-moz-box-shadow: 0 0 15px rgba(0,0,0,1);
	box-shadow: 0 0 15px rgba(0,0,0,1);
	margin-bottom:15px;
}

#content{
	max-width: 950px;
	margin: 0 auto;
	background: white;
	padding:10px 30px 20px 30px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	position:relative;
}

header {
	max-width:950px;
	height:90px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	background: #feb913; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#ffc627, #feae13); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#ffc627, #feae13); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#ffc627, #feae13); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#ffc627, #feae13); /* Standard syntax */
}

header img {
	float:right;
	margin-top:12px;
	margin-right:12px;
}

h1, h2 {
	font-weight:700;
	color:#828181;
	color:#6d778c; /*heller als site bg , bläulich-grau */
	font-size:1.8em;
	
}
h2 {
	font-size:1.55em;
	margin-bottom:0;
}

h3 {
	font-size:1.25em;
	margin-bottom:0;
}

span.caption {
	font-size:0.85em;
	}

.bold { font-weight:700; }

.small { font-size: 0.85em; }

.grey { color: #828181; }
.grey-2 { color:#6d778c; } /* wie h1, h2 */
.grey-3 { color:#798398; } /* heller, doch selber ton wie grey-2*/
.grey-4 { color:#909aae; } /* noch heller als grey-3 */

/*LTE*/
.blauviolett { color:#4351d6; }
.blauviolett-2 { color:#5563e9; } /* etwas heller als blauviolett */
/* end LTE */

/*NSS*/
.orange { color:#e9670c; }
.blau { color: #3171c7; }
/* end NSS */

/* hdmi*/
.gruen { color:#87c404; }
.gruen-2 { color:#7db701; }/* winziger tick dunkler: für kleinere Schrift z. B. */

.blau { color:#18bbfe; }
.blau-2 { color:#0ab0fe; }
.blau-3 { color:#02a5e8; } /*dunkler als -2*/
/* end hdmi */

.sichtbar { display:block; }

.unsichtbar { display:none; }

#home {
	display:none;
	cursor:pointer;
	width:150px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:5px 0;
	color:#6d778c; /* grau */
	/*color:#0ab0fe; blau */
	background:rgba(255,255,255,0.8);
	border:1px solid;
	font-size:0.95em;
	text-align:center;
	position:fixed;
	bottom:100px;
	left:50%;
	margin-left:324px;
	
	}
	
#home:hover {
	color:black;
}


footer {
	max-width:950px;
	height:45px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	background: #feb913; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#ffc627, #feae13); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#ffc627, #feae13); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#ffc627, #feae13); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#ffc627, #feae13); /* Standard syntax */
	text-align:center;
	}
	
	
	
footer img {
	margin-top:12px;
}

div#copyright {
	margin:0 auto;
	font-size:0.95em;
	letter-spacing:0.005em;
	color: #9099ae;
	text-align:center;
	margin-bottom:50px;
	text-shadow: 0 1px 0 rgba(0,0,0,0.7); 
}

/* end general ########################### 
**/	

section#eins img {
	max-width:100%;
}

section#zwei h2 {
	margin-bottom:15px;
}

section#zwei figure {
	width:33%;
	float:left;
	margin:0;
	text-align:center;
	}
	
section#zwei figure img {
	width:100%;
}

h2.blockheading {
	/*background:#87c404; grün */
	background:#18bbfe; /* blau */
	color:white;
	margin-left:-30px;
	padding:8px 0 8px 30px;
}

h2.underlined, h3.underlined { 
	border-bottom:1px dashed;
	padding-bottom:2px;
	}

section#drei img {
	max-width:100%;
}

section#drei img#versionstabelle2 { display:none; }

/* # # # # # # # # # # # # START Produkte - - - # # # # # # # # # # # */
/*struktur die Produkte betreffend: .produkt enthält je .produkt_foto sowie .produkt_text*/
/* .produkt_foto enthält je Anker sowie Img // .produkt_text enthält je h3 sowie eigenschaften */
div.produkt {
	margin-bottom:25px;
	padding-bottom:10px;
	border-bottom:1px dashed rgba(0,0,0,0.17);
}

#produkt85726 { margin-top:50px; }

/* hier in section fünf gibt es 2 produktboxen; letzte soll natürlich keine border haben*/
#produkt84786,  #produkt65327 {
	border-bottom:0;
	margin-bottom:10px;
}

#produkt65512 div.produkt_foto img, #produkt65327 div.produkt_foto img {
	margin-bottom:10px;
}

.produkt_foto {
	width:40%;
	float:left;
	}
.produkt_foto img {
	width:100%;
}

div.produkt_text {
	width:57%;	
	float:right;
	margin-left:3%;
}
div.produkt_text h3 { 
	margin-top:0;
}
div.produkt_text p {
	font-size:0.9em;
}

/* die produkttexte haben zuerst breaks bei zu langen zeilen, dies funktioniert bei schmalerer desktop-width nicht mehr, deshalb gegen p ohne breaks innerhalb eines stichpunktes ausgetauscht, bei 562px */
div.produkt_text p.ohne-breaks { display:none; }

div.produkt_text a {
	text-decoration:none;
}
div.produkt_text a:hover {
	color:black;
}

div.produkt_foto a {
	text-decoration:none;
	color:white;
	padding: 8px 23px 7px 20px;
	background:#18bbfe; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(to bottom right, #18bbfe, #0583db); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(to bottom right, #18bbfe, #0583db); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(to bottom right, #18bbfe, #0583db); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, #18bbfe, #0583db); /* Standard syntax (must be last) */
	-webkit-transition: background 400ms linear;
	-moz-transition: background 400ms linear;
	-o-transition: background 400ms linear;
	transition: background 400ms linear;
	}
div.produkt_foto a:hover {
	background: #06abef; /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #0583db, #18bbfe); /* Chrome 10-25, Safari 5.1-6  zweite Farbe ist links */
	background: linear-gradient(to left, #0583db, #18bbfe); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ - - - erste farbe ist rechts */
	}
	
/* # # # # # # # # # # # # END (Einzel-) Produkte - - - # # # # # # # # # # # */

a.link_produktgruppe {
	text-align:center;
	margin:0 auto;
	margin-top:15px;
	padding:10px 0;
	display:block;

	text-decoration:none;
	color:#fc3f3f;
	/*color:white;*/
	background:#ffee91;
	/*background:#02a5e8;*/
	font-size:1.2em;
	border:1px dashed;
	
}

a.link_produktgruppe:hover {
	color:#fc2626;
	background:#fde24b;
}

sup {
	font-weight:700;
	color:#fc3f3f;
}

/* # # #  media queries # # # */


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

p { line-height:1.3em; }

.produkt_foto {
	width:38%;
	float:left;
	}

div.produkt_text {
	width:60%;	
	float:right;
	margin-left:2%;
}


}

@media screen and (max-width:982px) {
#home {
	bottom:100px;
	left:inherit;
	right:9px;
	margin-left:0;
	}
	}

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

.produkt_foto {
	width:100%;
	float:none;
	
	}
	
.produkt_foto img {
	width:50%;
}
	


div.produkt_text {
	width:100%;	
	float:none;
	margin-left:0;
	margin-top:20px;
}

}

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


h1 { font-size:1.6em; }
h2 { font-size:1.4em; }
h3 { font-size:1.15em; }

}

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


}

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

section#drei img#versionstabelle1 { display:none; }

section#drei img#versionstabelle2 { display:block; }


	
}

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

section#zwei figure {
	width:64%;
	margin-left:18%;
	text-align:center;
	border-bottom:1px solid #9ea9bf; /* abwandlung von #636c81, dem .grey-3 - Farbton, den die Caption hat */
	}
	
section#zwei figure img {
	width:100%;
	}

}

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

header {
	text-align:center;
}
header img {
	float:none;
	margin-right:0;
}

}


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

div.produkt_text p.ohne-breaks { display:block; }

div.produkt_text p.mit-breaks { display:none; }

}	

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

.produkt_foto img {
	width:80%;
}
}

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



}

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


section#zwei figure {
	width:80%;
	margin-left:10%;
	}
	
.produkt_foto img {
	width:100%;
}

}


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

#content{
	padding:10px 20px 10px 20px;
	}
	
#home {
	bottom:100px;
	left:inherit;
	right:9px;
	margin-left:0;
	}


h2.blockheading {
	margin-left:-20px;
	padding:8px 0 8px 20px;
}

}

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

h1 { font-size:1.4em; }
h2 { font-size:1.2em; }
h3 { font-size:1em; }

}


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

section#zwei figure {
	width:100%;
	margin:0;
	}
	
}

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


}
@media screen and (max-width:320px) {

	

}