@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600&display=swap');


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



html {
		overflow-y: scroll;  
} 

.clear { clear:both; }

body {
	color: black;	
	background:white;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
	font-size: 1.05em;
	}
	
p { 
	line-height:1.4em; 
	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;
	margin: 0 auto;
	margin-top:20px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-box-shadow: 0 40px 80px rgba(0,0,0,1);
	-moz-box-shadow: 0 40px 80px rgba(0,0,0,1);
	box-shadow: 0 40px 80px rgba(0,0,0,0.25);
	margin-bottom:15px;
}


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

}

.page_size { 
	width:950px; 
	margin-left: auto;
	margin-right: auto;
	position: relative;
	}

header {
	max-width:950px;
	height:90px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
		background-color:#fbbb10; /*fallback*/
	background-image: -webkit-linear-gradient(rgb(255,221,0) 0%, rgb(245,157,14) 100%);
	background-image: -moz-linear-gradient(rgb(255,221,0) 0%, rgb(245,157,14) 100%);
	background-image: -o-linear-gradient(rgb(255,221,0) 0%, rgb(245,157,14) 100%);
	background-image: linear-gradient(rgb(255,221,0) 0%,rgb(245,157,14) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF',endColorstr='#EBEBEB');
}

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

h1, h2 {
	font-weight:600;
	font-size:1.9em;
	}
	
h2 {
	font-size:1.4em;
	margin-bottom:0;
	margin-top:1em;
	border-bottom:1px solid;
	position:relative;
	clear:both;
}

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

/* wird nur als Produktübeschrift / Titel verwendet */
h4 {
	font-weight:600;
	font-size:1.1em;
	margin: 0 0 0.7em 0;
}

section {
	padding-bottom:1em;
	}

div#site_navi {
	padding:0.5em;
	background:#e8e8e8;
	line-height:1.6em;
	background-color:#fbbb10; /*fallback*/
	background-image: -webkit-linear-gradient(rgb(255,221,0) 0%, rgb(245,157,14) 100%);
	background-image: -moz-linear-gradient(rgb(255,221,0) 0%, rgb(245,157,14) 100%);
	background-image: -o-linear-gradient(rgb(255,221,0) 0%, rgb(245,157,14) 100%);
	background-image: linear-gradient(rgb(255,221,0) 0%,rgb(245,157,14) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF',endColorstr='#EBEBEB');
}
div#site_navi a { color:black;}
div#site_navi a:hover { color:#242dea;}

figure {
	margin: 0 auto;
	text-align:center;
}
figure img { 
	width:100%;}

.light-border {
	border-bottom: 1px solid #cccccc;
	border-top: 1px solid #cccccc;
}

.bold { font-weight:600; }


.small { font-size: 0.85em; }

.bigger { font-size:1.2em; }

.white { color:white; }

.lila { color:#4c00bd; }
.lila_bg { background:#4c00bd; }

.blue { color:#242dea; }
.blue_bg { background:#242dea; }

.goldgelb { color:#fbbb16; }
.goldgelb_bg { background:#fbbb16; }

.initial_sichtbar, .sichtbar { display:block; }

.initial_unsichtbar, .unsichtbar  { display:none; }

.zentriert { text-align:center; }

.nicht-getrennt { hyphens:none !important; }



/* div.left und div.right sind für die platzierung von inhalt = hälfte text / hälfte bild gedacht siehe z.b. nss */
div.left { 
	float:left; 
	width:48.5%;
	margin-right:3%;
	position:relative;
	}

.left_pur { float:left; }

div.right { 
	float:right; 
	width:48.5%;
	}
	
.right_pur { float:right; }
	
div.left img, div.right img {
	width:100%;
	}
	

#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:#383736; /* grau */
	color:#242dea; /*blau */
	background:rgba(254,185,18,0.8);
	box-shadow: 0 0 15px #fbdf24 inset;
	border:1px solid;
	font-size:0.95em;
	font-weight:600;
	text-align:center;
	position:fixed;
	bottom:100px;
	left:50%;
	margin-left:324px;
	
	}
	
	
#home:hover {
	color:black;
}

footer {
	max-width:950px;
	height:65px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	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;
	margin-bottom:10px;
	}
	
	
footer img {
	margin-top:23px;
}

div#copyright {
	margin:0 auto;
	font-size:0.95em;
	letter-spacing:0.005em;
	color: #494c5e;
	text-align:center;
	margin-bottom:50px;
}

#subpixel-2 { display:none; }

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

/* # # # # # # # # # # # # 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-top:30px;
	padding-bottom:10px;
	border-bottom:1px dashed rgba(0,0,0,0.17);
	position:relative;
	
}

/* das letzte Produkt soll keine Border bottom haben */
#produkt66296 {
	border-bottom:0;
	}

.produkt_foto {
	width:40%;
	float:left;
	}
	
/* da bildmaterial bis unten ran, muss abstand zum Linkbutton darunter sein, deshalb hier margin */
.produkt_foto img {
	width:100%;
	margin-bottom:1.5em;
}

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


/* dieser Link ist Button-like */
div.produkt_foto a, .button-like{
	text-decoration:none;
	border:1px solid #a101a2;
	padding: 8px 23px 7px 20px;
	color:#a101a2;
	}

div.produkt_foto a:hover {
	background:#a101a2;
	color:white;
	border:1px solid #a101a2;
	}

/* dieser Link wrappt die Produkttitel (h4) */
div.produkt_text a {
	text-decoration:none;
	}
div.produkt_text a:hover {
	color:black;
}

/* dieser Link ist im Text, weist z. B. auf andere Längen hin, nicht Button-like */
div.produkt_text a.anker-im-text {
	font-weight:400;
	color:#a101a2; /*leicht rötlicheres lila als .lila */
	}
	
div.produkt_text a.anker-im-text:hover {
	color:black;
}

a#product-overview {
	text-align:center;
	display:block;
	padding: 1em 0.5em;
	margin:1.6em 0 0 0;
	text-decoration:none;
	font-size:1.3em;
}

a#product-overview:hover { background:#a101a2; }

span.new { 
	color:white;
	font-size:0.9em;
	padding:0 5px;
	}

span.ziffer {
	font-size:0.9em;
	font-weight:7600;
	padding: 3px 5px 0 5px;
	}

/* # # # # # # # # # # # # END (Einzel-) Produkte - - - # # # # # # # # # # # */	



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

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

#logo {
	position: absolute;
	top: 15px;
	left:15px;
	background-image: url(images/logo.png);
	width: 207px;
	height: 61px;
	background-repeat: no-repeat;
	background-size: contain;
}


}


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

@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:875px) {

body {
	font-size: 1em;
	}
	

div#site_navi p{
	font-size:1.1em;
	line-height:1.7em;
}

.produkt_foto {
	width:100%;
	float:none;
	
	}
	
.produkt_foto img {
	width:60%;
}
	
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, h4 { font-size:1.15em; }

.initial_sichtbar { display:none; }

.initial_unsichtbar { display:block; }

div.left { 
	float:none; 
	width:100%;
	margin-right:0;
	}

div.right { 
	float:none; 
	width:100%;
	margin-top:0;
	}

}

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

.produkt_foto img {
	width:70%;
}

}

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

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

	
}


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



}

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

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

div.home {
	width:40%;
	}
}
	

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

#subpixel-1 { display:none; }

#subpixel-2 { display:block; }


a#product-overview {
	font-size:1em;
	margin:1em 0 0 0;
}

}	


/* hier auch das schematische Bild Subpixel austauschen zu vertikal */
@media screen and (max-width:550px) {

.produkt_foto img {
	width:80%;
}

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

}

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



}


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

	
.produkt_foto img {
	width:100%;
}

}


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

#content{
	padding:10px 20px 10px 20px;
	}
	
.block-heading {
	color:white;
	margin-left:-25px;
	margin-right:-20px;
	padding:10px 0 10px 25px;
	box-shadow:1px 3px 5px rgba(0,0,0,0.5);
}
	
#home {
	bottom:100px;
	left:inherit;
	right:9px;
	margin-left:0;
	}
	
}

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


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

}

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

}