@import url('https://fonts.googleapis.com/css?family=Roboto:400,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, h1, h2, h3, h4, h5, h6 	{ font-family: 'Roboto', Arial, Helvetica, sans-serif;}

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

h1 								{ font-size:30px;}
h2 								{ font-size:22px;}
h3 								{ font-size:20px;}
h4 								{ font-size:18px;}
h5 								{ font-size:16px;}
h6 								{ font-size:14px;}

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

.visible-sm                         { display: none;}
/* ------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------| CONTAINER |----_----------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */

#wrapper 					{ width: 1200px; margin: 0px auto; background: none; padding: 10px;}
	header 					{ background-image: url("images/header.png");min-height: 300px;background-repeat: no-repeat;background-size: cover;border-top: 5px solid #909599;}
	nav.kat					{ background: #909599;} 

	article 				{ margin: 20px 0;}
		#gallery 			{ width: 50%; background: #fff; float: left; }
		#description 		{ width: 49%; background: #fff; float: right; box-sizing: border-box;padding: 20px;}
	main 					{ }
   .teaser                  { display: flex;}
   .teaser a                { display: inline-block;flex: 1;}
   .teaser a img            { display: block;width: 100%;height: auto;}
	footer 					{ margin-top: 10px; background: #fff; padding: 10px;}

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

header img#logo 			{ margin:10px 0px; transition: opacity 300ms; }
header img#logo:hover 		{ opacity:0.7; transition: opacity 300ms;}

nav.links 					{ float:right; padding:10px;}
nav.links ul 				{ padding: 10px 0px; }
nav.links ul li 			{ display: inline-block; padding:0 10px;}

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

nav.kat ul li 				{ float:left; display: inline-block; font-size: 18px; color: #fff; padding: 0px 10px; }
nav.kat ul li:hover         { background-color: #747A7E;}
nav.kat a 					{ padding:10px 5px; display: inline-block;vertical-align: middle;}

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

.gallery-images 				{ position: relative; width: 100%; }
.gallery-nav 					{ padding: 10px 20%; text-align: center; background-color: #EEEEEE; }

.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: 2.2%; margin-bottom: 10px; width: 14.8%; height: auto; }
.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: 14px; display: block;  margin-bottom: 10px;color: #999999;}

#description	                    { font-size: 16px; color: #333; line-height: 160%; }
#description p.title              { font-size: 16px; font-weight: bold; border-bottom: 1px solid #ccc;}
#description span                   { font-family: Roboto;display: block; margin-top: 10px;}
#description span > p               { font-family: Roboto;display: block; margin-top: 10px; font-size: 16px;}
#description ul 					{ margin: 20px 0px 0px; }
#description ul li 					{ list-style: none; font-size: 16px; line-height: 180%; color: #333; padding-left: 25px; }
#description h1                     { color: #73797E;}
/* ------------------------------------------------------------------------------------------------------------------- */
/* -----------------------------------------------| TAB-SYSTEM |------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------- */
main                        { background-color: #909599;}
main section 				{ animation-name: input; display: none; padding: 20px; background: #fff; border:1px solid #eee; }
							@keyframes input {from {opacity:0;}
												to {opacity:1;}}
main input 					{ display: none; }
main label 					{ float:left; display: inline-block;margin: 0 1px -1px 0px; padding: 15px 10px; font-size: 18px; text-align: center; color: #fff; }
main label:hover 			{ color: #fff; cursor: pointer; background-color:#747A7E;}
main input:checked + label 	{ color: #fff; border-bottom: 1px solid #fff; background-color: #747A7E; }
#tab1:checked ~ #desc-1, 
#tab2:checked ~ #desc-2, 
#tab3:checked ~ #desc-3, 
#tab4:checked ~ #desc-4 	{ display: block; }

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

main, main p				{ font-family: Roboto; font-size: 16px; color: #333; line-height: 160%; margin-bottom: 20px;}
main b, h2                  {font-family: Quantico; font-size: 18px;font-weight: 700;}
main ul 					{ margin: 20px 0px 20px; }
main ul li 					{ list-style: none; font-size: 16px; line-height: 180%;}

main ol 					{ margin: 20px 0px 20px; }
main ol li 					{ list-style: decimal; list-style-position: inside; font-size: 16px; line-height: 180%; }
main ol li:before 			{  }

main #desc-3 img, main #desc-4 img {width:100%; max-width:150px; float: left; margin-right:5px; margin-bottom: 5px;}

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


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 						{ background-color: #909599;color: #fff;line-height: 60px;}
footer div.footer-left 		{ float:left; width: 50%; display: inline-block; border-right: 3px solid transparent; box-sizing: border-box;font-size: 18px;}
footer div.footer-right 	{ width: 50%; display: inline-block; text-align: right; box-sizing: border-box;font-size: 16px;}
footer span                 { display: inline-block;vertical-align: middle;}
 
footer .title 			    { display: inline-block; padding: 0px 17px;vertical-align: middle;}
footer ul 					{ margin-top: 30px; }
footer ul li            	{ display: inline; padding: 10px 20px 0px 0px; font-size: 12px;  }
footer a:hover 				{ color: #EC5A0D; }

.copy-right                 { text-align: right;font-size: 12px;color: #999999;margin-top: 10px;font-family: Arial;}
/* -------------------------------------------------- MEDIA QUERIES -------------------------------------------------- */
/* ----------------------------------------------------- Tablet ------------------------------------------------------ */

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

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

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

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

/* Container */
#wrapper 											{ width: 100%; box-sizing: border-box; }
	header 											{ display: none; }
	nav.kat 										{ display:none; background:none;}
	
	article 										{ }
		#gallery 									{ width: auto; float:none; }
		#description 								{ width: auto; float:none;}
	main 											{ }
    main ~.teaser                                   { display: block;}
    main ~.teaser a                                 {display: block; margin-bottom: 5px;}
	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-color:#747A7E;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: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; }	

main #desc-3 div, main #desc-4 div  {display: flex; display:-ms-flexbox; flex-wrap: wrap; justify-content: center; align-items:stretch; -ms-flex-align:stretch;}
main #desc-3 img, main #desc-4 img { max-width: 150px; height: 60px; }	
	
div[width="100%"] 			{ -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; overflow-x: scroll; overflow-y: hidden;max-width:1px; min-width:100%; }
.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 ul  { margin-top: 20px; }

}

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

@media screen and (max-width:999px) {
     /* Platzhalter Custom-Area */
     header .visible-sm { display: block;}
     header .visible-md { display: none;}

   	footer                                          { line-height: 20px;}
	footer div.footer-left, footer div.footer-right { display: block; text-align: left;width: 100%;float:none;}
	footer div.footer-right 						{ margin-top:20px;}
    footer .title                                   { padding-left: 0;}		

}