/* ------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------| NORMALISIERUNGEN |------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */

html 							{ height: 100%; }
html, button, select, textarea 	{ margin: 0px; vertical-align: baseline; vertical-align: middle; line-height: normal; -webkit-text-size-adjust: 100%; }
body 							{ padding: 0px; margin: 0px; min-height: 100%; font-size: 16px; }
body a, body a:link, a:visited 	{ text-decoration: none; outline: none; color: inherit; }
body a:active, body a:hover 	{ text-decoration: none; outline: none; color: inherit; }

h1, h2, h3, h4, h5, h6, p, img, form, input, li, ul, ol, select, fieldset { margin: 0px; padding: 0px; border: 0px; }
ul, ol 							{ list-style-type: none; }
img 							{ vertical-align: middle; }
table 							{ border-collapse: collapse; border-spacing: 0px; }
td, th 							{ vertical-align: top; text-align: left; }
hr 								{ height: 0; -moz-box-sizing: content-box; box-sizing: content-box; margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #e5e5e5; }
section, article, div 			{ box-sizing:border-box; }

/* Schriftklassen */
html, button, select, textarea, body, img, h1, h2, h3, h4, h5, h6 	{ font-family: 'Arial', Helvetica, sans-serif;}

h1, h2, h3, h4, h5, h6 			{ margin-bottom: 10px;}

h1 								{ font-size:24px; color:#4686CB;}
h2 								{ font-size:22px; color:#4686CB;}
h3 								{ font-size:20px; color:#4686CB;}
h4 								{ font-size:18px; color:#4686CB;}
h5 								{ font-size:16px; color:#4686CB;}
h6 								{ font-size:14px; color:#4686CB;}

/* Font-Awesome */
.fa-envelope 	{  color: inherit; margin-right: 5px; }

/* Sonderklassen */
a.thumbnail[name="noimage.gif"] 	{ display:none;}
a.thumbnail[name=""] 				{ display:none;}

.hersteller img[name=""] 			{ display:none;} 
/* 
main label[data-name=""] 						{ display: none;} 
*/

/* Wenn Kunde Bildernamen pflegt
a.thumbnail[title="noimage.gif"] 	{ display:none;}
a.thumbnail[title=""] 				{ display:none;} 
*/

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

/* Clearfix */
.clear 								{ clear:both;}
.clear:before, .clear:after 		{ content:""; display:table;}
.clear:after 						{ clear:both;}
.clear 								{ zoom:1;}
.clear 								{ zoom:1;}

/* ------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------| CONTAINER |----_----------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */

#wrapper 					{ width: 100%; margin: 0px auto; background: none; padding: 10px ;}
	header 					{ background: none; padding:20px; }
	nav.kat					{ background: #4686CB; text-align: right;} 

	article 				{ margin: 20px 0;}
		#gallery 			{ width: 50%; background: #fff; float: left; }
		#description 		{ width: 49%; background: #fff; float: right; box-sizing: border-box;padding: 0 20px ;}
	main 					{ }
	footer 					{ margin-top: 20px; background: #4686CB;; padding: 15px;}

/* ------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------| HEADER |----------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */

header img#logo 			{ transition: opacity 300ms; }
header img#logo:hover 		{ opacity:0.7; transition: opacity 300ms;}

nav.links 					{ display: none; float:right;padding:20px 50px 20px 20px;}
nav.links ul 				{ display: inline-block;}
nav.links ul li 			{ color:#4686CB; font-size: 23px; font-weight:bold;}

/* ------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------| NAVIGATION |---------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */

nav.kat ul li 				{ float:left; display: inline-block; font-size: 16px; color: #fff; padding: 10px; font-weight:bold;}
nav.kat a 					{ padding:10px 5px;}

.title {margin:20px 0; font-size:29px; color:#4685CB; font-weight:bold;}
/* ------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------| GALLERY |----------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */

.gallery-images 				{ position: relative; width: 100%; }
.gallery-nav 					{ text-align: left; width: 80% }

.gallery-images .item 													{ position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; text-align: center; pointer-events: none; opacity: 0; 
																 		 -webkit-transition: opacity 300ms; -o-transition: opacity 300ms; transition: opacity 300ms; }
.gallery-images .item:first-of-type 									{ position: relative; pointer-events: auto; opacity: 1; }
.gallery-images .hover 													{ display: none; }
.gallery-images .hover:target ~ .item 									{ pointer-events: none; opacity: 0; -webkit-animation: none; -o-animation: none; animation: none; }
.gallery-images .hover:nth-of-type(1):target ~ .item:nth-of-type(1), 
.gallery-images .hover:nth-of-type(2):target ~ .item:nth-of-type(2), 
.gallery-images .hover:nth-of-type(3):target ~ .item:nth-of-type(3),
.gallery-images .hover:nth-of-type(4):target ~ .item:nth-of-type(4), 
.gallery-images .hover:nth-of-type(5):target ~ .item:nth-of-type(5), 
.gallery-images .hover:nth-of-type(6):target ~ .item:nth-of-type(6), 
.gallery-images .hover:nth-of-type(7):target ~ .item:nth-of-type(7), 
.gallery-images .hover:nth-of-type(8):target ~ .item:nth-of-type(8), 
.gallery-images .hover:nth-of-type(9):target ~ .item:nth-of-type(9),
.gallery-images .hover:nth-of-type(10):target ~ .item:nth-of-type(10),
.gallery-images .hover:nth-of-type(11):target ~ .item:nth-of-type(11),
.gallery-images .hover:nth-of-type(12):target ~ .item:nth-of-type(12) { pointer-events: auto; opacity: 1; }

.thumbnail 					{ position: relative; display: inline-block;margin-left:0px; margin-right: 2%; margin-bottom: 10px; width: 30%;  text-align: left; }
.thumbnail:hover,  
.thumbnail:visited,  
.thumbnail:link 			{ text-decoration: none; }
.thumbnail:hover 			{ opacity: 0.3; cursor: pointer; transition: all 0.3s; }
.thumbnail img 				{ max-width: 100%; max-height: 100%; border:1px solid #999999; }

.big-img 					{ position: relative; width: auto; text-align: center; margin: 0; border:1px solid #999999;}
.big-img img 				{ max-width: 100%; height:auto; }

/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------| DESCRIPTION |---------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */

#description img#logo 				{ display: block; max-width: 120px; margin: 20px 0px 20px; }
#description span.art-nr 			{ font-size: 12px; display: block;  margin-bottom: 10px; }

#description, #description > p		{ font-size: 16px; color: #666; line-height: 160%; }
#description ul 					{ margin: 20px 0px 0px; }
#description ul li 					{ list-style: none; font-size: 14px; line-height: 180%; color: #666; padding-left: 25px; }
#description ul li:before 			{ font-family: fontAwesome; content: "\f00c"; color: #4686CB; margin: 0px 0px 0px -19px; width: 20px; font-size: inherit; padding-right: 5px; }

.hersteller { position: relative; height:50px;}
.hersteller > img {position:absolute;}

/* ------------------------------------------------------------------------------------------------------------------- */
/* -----------------------------------------------| TAB-SYSTEM |------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------- */

main section 				{ animation-name: input; animation-duration: 1s; display: none; padding: 20px; background: #fff; border:1px solid #eee;border-top:5px solid #4686CB;  }
							@keyframes input {from {opacity:0;}
												to {opacity:1;}}
main input 					{ display: none; }
main label 					{ float:left; display: inline-block;background:#333;  margin: 0 5px -1px 0px; padding: 10px 15px 8px;font-weight: 600; font-size: 16px; 
									  text-align: center; color: #fff;}
main label:last-of-type 	{ border-top-right-radius: 5px;}
main label:first-of-type 	{ border-top-left-radius: 5px;}
main label:hover 			{ color: #fff; cursor: pointer; background:#4686CB;}
main input:checked + label 	{ color: #fff;  background: #4686CB; }
#tab1:checked ~ #desc-1		{ display: block; }

main img 				{ max-width:100%;}

/* ------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------| CI-FORMATIERUNGEN |-------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */

main, main p				{ font-size: 16px; color: #666; line-height: 160%; margin-bottom: 20px;}
main ul 					{ margin: 20px 0px 20px; }
main ul li 					{ list-style: none; font-size: 14px; line-height: 180%; color: #666; padding-left: 25px; }
main ul li:nth-child(odd) { background: #f9f9f9; }
main ul li:before 			{ font-family: fontAwesome; content: "\f00c"; color: #4686CB; margin: 0px 0px 0px -19px; width: 20px; font-size: inherit; padding-right: 5px; }

main ol 					{ margin: 20px 0px 20px; }
main ol li 					{ list-style: decimal; list-style-position: inside; font-size: 14px; line-height: 180%; color: #666; padding-left: 10px; }
main ol li:nth-child(odd) 	{ background: #f9f9f9; }
main ol li:before 			{  }


/*  Tabellenformatierungen */

main table 					{ width: 100%; margin:20px 0px; }
main table thead tr td  		{ padding:20px 0; font-size:16px; text-transform:uppercase;}
main table tbody 			{ border-bottom: 1px solid #ddd; }
main table th 				{ font-weight: bold; text-transform: uppercase; }
main table td 				{ border-top: 1px solid #ddd; padding: 10px; }

#desc-1 > div {margin:20px 0;}
#desc-1 > div:first-child {margin-top:0;}

/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------| FOOTER |--------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */

footer 						{ color:#fff; display: flex; font-weight: bold; }
footer > div 				{ width:33%; }
footer > div:nth-child(2) 	{ opacity: 0; text-align:center;}
footer > div:last-child 	{ text-align: right;}

/* -------------------------------------------------- MEDIA QUERIES -------------------------------------------------- */
/* ----------------------------------------------------- Tablet ------------------------------------------------------ */

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

/* Container */
#wrapper 											{ width: 100%; box-sizing: border-box; }
	header 											{ }
	nav.kat 										{ }
	
	article 										{ }
		#gallery 									{ width: 50%; }
		#description 								{ width: 49%;  }
	main 											{ }
	footer 											{ }
	
	
	
	
}

/* -------------------------------------------------- MEDIA QUERIES -------------------------------------------------- */
/* ----------------------------------------------------- Mobile ------------------------------------------------------ */

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

/* Container */
#wrapper 											{ width: 100%; box-sizing: border-box; }
	header 											{ }
	nav.kat 										{ background:none;}
	
	article 										{ }
		#gallery 									{ width: auto; float:none; }
		#description 								{ width: auto; float:none; padding: 20px 0;}
	main 											{ }
	footer 												{ }

/* Header */
header img#logo { margin: 10px auto; display: block;}
nav.links 		{ width:100%; text-align: center; padding:10px 0px;}
	
/* Navigation */
nav.kat ul 		{ display: block; }
nav.kat ul li 	{ width:100%; background:#4686CB;text-align: center; padding:0px; margin-bottom: 3px; }	
nav.kat ul li a { display: block; padding:20px 0px;}
/* Tab-System */
main section 				{ padding: 20px; border:1px solid #eee; }

main input 					{ display: none; }
main label 					{ float:none; display: block; padding: 15px 0; margin: 0 0px 3px 0px;}
main label:first-of-type 	{ border-top-right-radius: 5px;}
main label:last-of-type 	{ border-top-right-radius: 0; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;}
main label:hover 			{ }
main input:checked + label 	{ border-bottom: 0px solid #fff; border-top:0px;  }
#tab1:checked ~ #desc-1, 
#tab2:checked ~ #desc-2, 
#tab3:checked ~ #desc-3, 
#tab4:checked ~ #desc-4 	{ display: block; }	

.gallery-nav 					{ text-align: center; width: 100%; }
	
.table-responsive 			{ -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; overflow-x: scroll; overflow-y: hidden; min-width: 100%; max-width: 300px; }
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td { white-space: nowrap }
		
/* Footer */
	
}

/* -------------------------------------------------- MEDIA QUERIES -------------------------------------------------- */
/* ---------------------------------------------------- Optimized ---------------------------------------------------- */

@media screen and (max-width:999px) { /* Platzhalter Custom-Area */}


