@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700|PT+Sans:400,400i,700');

/* ------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------| 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 	{ font-family: 'PT Sans', Arial, Helvetica, sans-serif;}

h1, h2, h3, h4, h5, h6 			{ font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif; margin-bottom: 10px;}

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

/* Font-Awesome */
.fa-shopping-cart, .fa-envelope, .fa-star 	{  color: #BD1111; }
.fa-info-circle 							{  color: #fff; }

/* Sonderklassen */
a.thumbnail[name="noimage.gif"] 	{ display:none;}
a.thumbnail[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: 1140px; margin: 0px auto; background: none; padding:10px ;}
	header 					{ display: flex; justify-content: space-between; background: none; margin-bottom: 10px; padding:25px 0;}
	nav.kat					{ } 

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

.full-width 				{ width: 100%;}

/* ------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------| HEADER |----------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */
header > div:first-child 	{ width:33%;}
header > div:nth-child(2) 	{ width:33%;}
header > div:last-child 	{ width:33%;}

header img#logo 			{ max-width: 100%; transition: opacity 300ms; }
header img#logo:hover 		{ opacity:0.7; transition: opacity 300ms;}

.slogan {display: inline-block; text-align: center; font-size:18px; font-style: italic;}
.slogan > p:last-of-type {padding-left:25%;}

.links ul li {display: inline-block; font-weight:bold; text-transform:uppercase; padding:0 15px; font-size: 14px;}
.links ul li:last-of-type {padding-right:0;}
.links ul {display: inline-block; float: right; padding:10px 0 10px 10px;}

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

nav.kat ul 			{ font-size:0; color:#000;}
nav.kat ul li 		{ display: inline-block; width: 25%; font-size: 22px; text-transform: uppercase; text-align: center; transition: font-size 300ms;}
nav.kat ul li img 	{ max-width: 100%;}

nav.kat ul li:first-child div > div:nth-child(2) {height:10px; background:#BD1111;}
nav.kat ul li:nth-child(2) div > div:nth-child(2) {height:10px; background:#D23C10;}
nav.kat ul li:nth-child(3) div > div:nth-child(2) {height:10px; background:#DE7B22;}
nav.kat ul li:last-child div > div:nth-child(2) {height:10px; background:#F8DB54;}


/* ------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------| GALLERY |----------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */

.gallery-images 				{ position: relative; width: 100%; }
.gallery-nav 					{ padding-left: 2%; text-align: center; padding-top:10px; }

.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:nth-child(1), 
.thumbnail:nth-child(7) 	{ margin-left: 0; }
.thumbnail:nth-child(6n) 	{ margin-right: 0; }
.thumbnail:last-child 		{ margin-right: 0; }

.thumbnail 					{ position: relative; display: inline-block;margin-left:-5px; margin-right: 1%; margin-bottom: 10px; width: 15.8%; height: 60px; 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%; }

.big-img 					{ position: relative; width: auto; text-align: center; margin: 0; }
.big-img img 				{ max-width: 100%; height:auto;}

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

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

#description, #description p		{ font-size: 16px; color: #333; line-height: 150%; }
#description  p						{ margin-bottom: 15px; }
#description ul 					{ margin-bottom: 15px; }
#description ul li 					{ list-style: square; font-size: 14px; line-height: 150%; padding-left: 10px; margin-left: 20px; list-style-position: outside; }

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

main section 				{ animation-name: input; animation-duration: 1s; display: none; padding: 20px; background: #EEEEEE;  }
							@keyframes input {from {opacity:0;}
												to {opacity:1;}}
main input 					{ display: none; }
main label 					{ font-family: 'Open Sans Condensed', Arial, sans-serif;  float:left; display: inline-block;background:#000;  margin: 0 5px 0px 0px; padding: 10px 15px;font-weight: 600; font-size: 20px; 
									  text-align: center; color: #fff; }
main label:hover 			{ color: #fff; cursor: pointer; background:#000;}
main input:checked + label 	{ color: #fff; background: #BD1111; }
#tab1:checked ~ #desc-1, 
#tab2:checked ~ #desc-2, 
#tab3:checked ~ #desc-3, 
#tab4:checked ~ #desc-4 	{ display: block; }
hr.border 					{ border-width:5px; border-color:#BD1111; margin:0;}
/* ------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------| CI-FORMATIERUNGEN |-------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */

main, main p				{ font-size: 16px; color: #333; line-height: 150%; margin-bottom: 15px;}
main ul 					{ margin: 20px 0px 20px; }
main ul li 					{ list-style: none; font-size: 14px; line-height: 180%; padding-left: 25px; }
main ul li:nth-child(odd) { background: #f9f9f9; }
main ul li:before 			{ font-family: fontAwesome; content: "\f00c"; color: #BD1111; 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%;  padding-left: 10px; }
main ol li:nth-child(odd) 	{ background: #f9f9f9; }
main ol li:before 			{  }

main .tipp 						{ padding:10px; background:#fff; margin-bottom: 20px;}
main .content 					{ display: flex;  margin:40px 0 10px; }
main .content img 				{ align-self:flex-start; }
main .content div:last-child  	{ padding-left:20px;}
main .content div:first-child  	{ width: 100%; position: relative;}

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

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

footer 				{ padding:30px 10px;}
.footer:after 		{ background:#F7D622; content:""; height: 100%; position: absolute; opacity: 0.5; z-index: -1;transform: skewy(-2deg); bottom:0; left:0; width: 100%;}
.footer 			{ position: relative; background:#F7D622; margin-bottom: 40px;}
footer > div 		{ display: flex;}
footer > div > div 	{ width: 33%;}
footer > div > div > div:first-child {font-size:20px; font-weight: bold; font-family: 'Open Sans Condensed', Arial, sans-serif; margin-bottom: 10px;}
footer img 			{ margin-bottom: 5px; margin-right: 5px;}
footer ul li 		{ line-height: 150%;}

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

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

/* Container */
#wrapper 											{ width: 100%; box-sizing: border-box; }
	header 											{ }
	nav.kat 										{ }
	
	article 										{ }
		#gallery 									{ width: 50%; }
		#description 								{ width: 49%;  }
	main 											{ }
	footer 											{ }
	
	
header > div:first-child 	{ width:40%;}
header > div:nth-child(2) 	{ display: none;}
header > div:last-child 	{ width:60%;}	

nav.kat ul li 		{font-size: 18px; transition: font-size 300ms;}	

}

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

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

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

/* Header */
header img#logo 		{ margin: 10px auto; display: block;}
	header > div 		{ width:100% !important; display: block;}
	.links ul 			{ float: none; text-align: center; display: block; padding-bottom: 0; padding-left: 0;}
	
/* Navigation */
nav.kat ul li div > div:first-child,
nav.kat ul li div > div:last-child 	{ display:none;}
	
/* Tab-System */
main section 				{ padding: 20px;  }

main input 					{ display: none; }
main label 					{ float:none; display: block; padding: 15px 0; margin: 0 0px 0px 0px;}
									 
main label:hover 			{ }
main input:checked + label 	{ border-top:0px;  }
#tab1:checked ~ #desc-1, 
#tab2:checked ~ #desc-2, 
#tab3:checked ~ #desc-3, 
#tab4:checked ~ #desc-4 		{ display: block; }	

main .content div:first-child 	{ display:none;}
.table-responsive 			{ -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; overflow-x: scroll; overflow-y: hidden; }
.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 */
	footer > div 		{ display: block;}
	footer > div > div 	{ width: auto; margin-bottom: 15px;}
}

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

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