@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500&display=swap');


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



html {
		overflow-y: scroll;  
} 

.clear { clear:both; }

body {
	color: black;	
	background:white;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300;
	font-size: 0.95em;
	}
	
p { 
	line-height:1.6em; 
	text-align:justify;
	-moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
 }
 
p a:hover, ul li a:hover, figure a:hover {
	color:#cf112c;
}
	
/*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:500;
	font-size:1.7em;
	}
	
h2 {
	font-size:1.3em;
	margin-bottom:0;
	margin-top:1em;
	border-bottom:1px solid;
	position:relative;
	clear:both;
}

h3 {
	font-size:1.15em;
	margin-bottom:0;
	font-weight:500;
}

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

section {
	padding-bottom:1em;
	}
	
ul { 
	list-style:none;
	line-height:1.6em;
	}

figure {
	margin: 0 auto;
	text-align:center;
}

figure img { 
	width:100%;}

figure div.img-box { 
	width:100%;
	text-align:center; 
	}

figure div.img-box img { 
	width:80%;
	}

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

.bold { font-weight:500; }


.small { font-size: 0.85em; }

.bigger { font-size:1.4em; }

.white { color:white; }
.black { color:black; }


.green { color:#44a048; }

.red { color:#cf112c; }

.grey { color:#616161; }

.lightgrey { color:#b6b6b6; }


.initial_sichtbar, .sichtbar { display:block; }

.initial_unsichtbar, .unsichtbar  { display:none; }

.zentriert { text-align:center; }

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

.space { margin-bottom:1em; }

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

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;
}




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

/* start specials ########################### 
**/	

/* tabelle: USB Spezifikation */

#speci {
  border-collapse: collapse;
  width: 100%;
  margin-bottom:2em;
}

#speci td, #speci th {
  border: 1px solid #ddd;
  padding: 8px;
}

#speci tr:nth-child(even){background-color: #f2f2f2;}

#speci tr:hover {background-color: #ddd;}

#speci th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  font-weight:500;
  background-color: #4CAF50; /* schönes grün */
  color: white;
word-break:break-word;
}




/* end specials ########################### 
**/



/* # # # # # # # # # # # # START Produkte - - - # # # # # # # # # # # */

/*struktur die Produkte betreffend: .produkt enthält je .produkt_foto sowie .produkt_text*/
/* .produkt_foto enthält 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,1);
	position:relative;
	padding-bottom:1.5em;
}

/* das letzte Produkt soll keine Border bottom haben */
#produkt42586 {
	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.9em;
	text-align:left;
}

div.produkt_text a:hover {
	color:#cf112c;
}

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:#cf112c; }

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

/* start special anwendungsgrafiken ########################### 
**/	

span.show_anwendungsgrafik {
	cursor:pointer;
	font-weight:300;
	background:#d81548;/*dunkles pink / rot */
	color:white;
	font-size:0.95em;
	letter-spacing:0.01em;
	padding: 0.3em 1.4em 0.4em 1em;
	}

span.show_anwendungsgrafik:hover {
	background:#f8056c;/*helleres pink*/
}

/* span anwendungsgrafik braucht je abstand nach unten; bzw ist die letzte section (#fuenf) vor den Produktbeispielen und verträgt etwas mehr abstand */
#produkt89582, #fuenf  {
	padding-bottom:1.3em;
}

/* anwendungsgrafiken als einblendbare elemente haben .anwendung und id: für das onclick-event. sobald ziffern in der id-bezeichnung, funktioniert css nicht: also als ZAHLWORT */
div#achtneunfuenfachtzwei_anwendung {
	max-width:870px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	z-index:1000;
	padding: 1em 1em 0.7em 1em;
	position:absolute;
	left:0;
	top:0;
	background:white;
	border:1px solid rgba(0,0,0,0);
	box-shadow:0 3px 7px rgba(0,0,0,0.5);
	}  
	
div#achtneunfuenfachtzwei_anwendung img{
	width:100%;
	margin-bottom: 0.5em;
}

div#achtneunfuenfachtzwei_anwendung span {
	cursor:pointer;
	color:#f8056c;/*hell*/
	font-weight:300;
}
div#achtneunfuenfachtzwei_anwendung span:hover {
	color:#d81548; /*dunkel*/
}

/* end special anwendungsgrafiken ########################### 
**/

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



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

@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.5em; }


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

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

}

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

.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.55em; }
h2 { font-size:1.25em; }
h3, h4 { font-size:1em; }

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

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

}

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

#speci {
  font-size:0.9em;
}

figure div.img-box img { 
	width:100%;
	padding-right:0;
	}


.produkt_foto img {
	width:70%;
}

}

@media screen and (max-width:700px) {
div#sechszweisiebzigvier_anwendung {
	padding: 0.5em 0 0.3em 0.5em;
}  
	

div#sechszweisiebzigvier_anwendung span {
	font-size:1em;
	}

}


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

.initial_sichtbar { display:none; }

.initial_unsichtbar { display:block; }
}

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



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

}	

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

.produkt_foto img {
	width:80%;
}
}

@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;
	}

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