/* ------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------| 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: 'Titillium Web', Arial, Helvetica, sans-serif;}

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

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

/* Font-Awesome */
.fa-shopping-cart, .fa-envelope, .fa-star 	{  color: #ec5a0d; }
.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: 1200px; margin: 0px auto; background: none; padding: 10px ;}
	header 					{ background: url('https://media.coolgadget.de/ebay/coolgadget_de/responsive/bg.jpg'); background-repeat: no-repeat; margin-bottom: 20px;}
	nav.kat					{ } 
	#logo					{padding: 0px 20px; }

	article 				{ margin: 20px 0;}
		#gallery 			{ width: 50%; float: left; }
		#description 		{ width: 49%; float: right; box-sizing: border-box;padding: 20px; ;}
	main 					{ }
	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 					{display: inline-block; padding:10px; margin-bottom: 5px; vertical-align: bottom; color: #6C6C6C;}
nav.links .sub-title		{font-size: 19px; text-transform: uppercase;}
nav.links ul 				{ padding: 0px; }
nav.links ul li 			{ display: inline-block; padding-right: 10px; font-size: 14px; margin-right: 40px;}
nav.links ul li	 .fa			{ color: #F7921E; margin-right: 5px; font-size: 28px;}

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

nav.kat ul 				{display: inline-block;
								/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f5f5f5+0,fdfdfd+100 */
								background: #f5f5f5; /* Old browsers */
								background: -moz-linear-gradient(top, #f5f5f5 0%, #fdfdfd 100%); /* FF3.6-15 */
								background: -webkit-linear-gradient(top, #f5f5f5 0%,#fdfdfd 100%); /* Chrome10-25,Safari5.1-6 */
								background: linear-gradient(to bottom, #f5f5f5 0%,#fdfdfd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
								filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#fdfdfd',GradientType=0 ); /* IE6-9 */}
nav.kat ul li 				{ display: inline-block; font-size: 14px; color: #6c6c6c; ;text-transform: uppercase; padding: 15px 10px; border-right: 1px solid #fff;}
nav.kat ul li:hover			{background-color: #f5f5f5; color: #F7921E;}
nav.kat a 					{ padding:15px 5px; text-transform: uppercase;}

/* Hover-Effect */
.underline 					{ display: inline-block;vertical-align: middle;-webkit-transform: translateZ(0);transform: translateZ(0);position: relative;overflow: hidden;}
.underline:before 			{ content: "";position: absolute;z-index: -1;left: 50%;right: 50%;bottom: 0;background: #000;height: 3px;-webkit-transition-property: left, right;
											transition-property:left,right;-webkit-transition-duration: 0.2s;transition-duration: 0.2s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;}
.underline:hover:before, 
.underline:focus:before, 
.underline:active:before 	{ left: 0;right: 0;background: #ec5a0d;}

/* ------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------| GALLERY |----------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */
.gradient-top				{height: 50px;
								/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f5f5f5+0,ffffff+100 */
								background: #f5f5f5; /* Old browsers */
								background: -moz-linear-gradient(top, #f5f5f5 0%, #ffffff 100%); /* FF3.6-15 */
								background: -webkit-linear-gradient(top, #f5f5f5 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
								background: linear-gradient(to bottom, #f5f5f5 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
								filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */}
.gradient-bottom			{height: 50px; margin-bottom: 20px;
							/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f5f5f5+100 */
							background: #ffffff; /* Old browsers */
							background: -moz-linear-gradient(top, #ffffff 0%, #f5f5f5 100%); /* FF3.6-15 */
							background: -webkit-linear-gradient(top, #ffffff 0%,#f5f5f5 100%); /* Chrome10-25,Safari5.1-6 */
							background: linear-gradient(to bottom, #ffffff 0%,#f5f5f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
							filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0 ); /* IE6-9 */}
.gallery-images 				{ position: relative; width: 100%; 
								-webkit-box-shadow: 3px 8px 6px -7px rgba(0,0,0,0.55);
								-moz-box-shadow: 3px 8px 6px -7px rgba(0,0,0,0.55);
								box-shadow: 3px 8px 6px -7px rgba(0,0,0,0.55);}
.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%; 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 h1						{font-weight: 400;}

#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: 16px; line-height: 180%; color: #666; padding-left: 25px; }
#description ul li:before 			{ font-family: fontAwesome; content: "\f00c"; color: #85B200; margin: 0px 0px 0px -19px; width: 20px; font-size: inherit; padding-right: 5px; }

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

/* Hauptcontainer für Tabs */
main {
  display: flex; /* Flexbox aktivieren */
  justify-content: center; /* Inhalte horizontal zentrieren */
  align-items: center; /* Inhalte vertikal zentrieren */
  flex-wrap: wrap; /* Tabs umbrechen, falls nicht genügend Platz vorhanden ist */
  gap: 20px; /* Abstand zwischen den Tabs */
  margin-top: 20px;
}

/* Tab-Labels (Navigation der Tabs) */
main label {
  flex: 1 1 auto; /* Tabs passen sich der verfügbaren Breite an */
  text-align: center;
  margin: 0 10px; /* Innerer Abstand zwischen Labels */
  padding: 10px 20px; /* Abstand innerhalb der Tabs */
  font-weight: 400;
  font-size: 18px;
  cursor: pointer;
  color: #6c6c6c; /* Standardfarbe der Tabs */
  border-bottom: 2px solid transparent; /* Unterstreichung nur beim aktiven Tab */
  transition: all 0.3s ease;
  text-transform: uppercase;
}

/* Aktivierte Tabs */
main input:checked + label {
  color: #ec5a0d; /* Orange Schriftfarbe */
  border-bottom: 2px solid #ec5a0d; /* Orange Unterstreichung */
}

/* Hover-Effekt für Tabs */
main label:hover {
  color: #ec5a0d; /* Orange Schriftfarbe */
}

/* Verstecke Radio-Buttons */
main input {
  display: none;
}

/* Inhalt der Tabs */
main .tab-content {
  display: block; /* Flex deaktivieren, da nur ein Inhalt sichtbar ist */
  width: 100%; /* Gesamte Breite */
  margin-top: 20px; /* Abstand zu den Tabs */
  gap: 0; /* Kein Abstand mehr nötig */
}


/* Tab-Inhalte (in Spalten) */
main section {
  display: none; /* Inhalte standardmäßig verstecken */
  padding: 20px;
  background: none; /* Kein Hintergrund für den gesamten Inhalt */
  border: none; /* Entfernt Rahmen */
  font-size: 16px;
  color: #666;
  width: 100%; /* Inhalt über die gesamte Breite */
  box-sizing: border-box; /* Padding und Border in die Breite einbeziehen */
  text-align: left; /* Linksbündige Ausrichtung */
  margin: 0; /* Entfernt Außenabstand */
}


/* Aktiver Abschnitt anzeigen */
#tab1:checked ~ .tab-content #desc-1,
#tab2:checked ~ .tab-content #desc-2 {
  display: block;
	width: 100%
}

/* Animation beim Wechsel */
@keyframes input {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

main section {
  animation-name: input;
  animation-duration: 1s;
}






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

.desc-title {height:60px; line-height:60px; font-family:'Titillium Web', sans-serif; text-transform:uppercase; color:#666; font-size:24px;}
main, main p			{ font-size: 14px; color: #666; line-height: 160%; margin-bottom: 20px;}
main h1              	{line-height: 30px; font-size: 30px; margin-bottom: 10px; color:#666;}
main h2              	{line-height: 20px; font-size: 20px; margin-bottom: 10px; color:#666;}
main h3              	{line-height: 18px; font-size: 14px; margin-bottom: 10px; font-weight: bold; color:#666;}
main h4              	{line-height: 18px; font-size: 18px; margin-bottom: 10px; color: #F7921E; font-weight: bold; }
main h5              	{line-height: 16px; font-size: 16px; background: #F7921E; color: #FFF; padding: 10px; margin-bottom: 10px; }
main h6              	{line-height: 14px; font-size: 14px; text-transform: uppercase; color: #999; border-bottom: 1px solid #ccc; padding-bottom: 5px;margin-bottom: 10px; }
main a            		{text-decoration: none; color: #F7921E; outline: none;}
main a:active, main a:hover	{text-decoration: none; color: #333; outline: none;}
main ul 		{margin: 20px 0px 20px 0px; }
main ul li 	{padding: 0px 0px 0px 20px; list-style-type: square; list-style-position: inside; margin-bottom: 5px; color: #666; }
main ol 		{margin: 20px 0px 20px 0px; }
main ol li 	{padding: 0px 0px 0px 20px; list-style-type: decimal; list-style-position: inside; margin-bottom: 5px; color: #666; }
main table		{width: 100%;}
main th 		{padding: 10px 5px 10px 5px; background: #F7921E; font-size: 14px; color:#fff} /*  Tabellen */
main td 		{padding: 5px;  font-size: 12px; }
main tr:nth-child(2n) {background-color: #eee;}
main tr:hover         {background-color: #ccc;}  
main .td_max	{width: 100px;}
main .text_10	{font-size: 10px; line-height: 14px;}

main .bt a, main .bt a:visited        {cursor: pointer; padding: 5px 30px 5px 30px; display: inline-block; font-size: 12px; color: #fff;  background: #F7921E; }
main .bt a:active, main .bt a:hover   {color: #fff; background: #666;}
main .bt_small a, main .bt_small a:visited         {cursor: pointer; padding: 4px 30px 4px 30px; display: inline-block; font-size: 10px; line-height: 13px; color: #333; background: #F0F0F0; }
main .bt_small a:active, main .bt_small a:hover    {color: #F7921E;}

/* ----------------------------------------------------------------*/

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

/*  Tabellenformatierungen */

main .row				{width: 100%; margin-right: -15px; clear: both; display: table; content: "";}
main .row:after			{clear: both;}
main .row .col-md-3		{width: 25%; padding-left: 15px; padding-right: 15px; float: left; margin-bottom: 20px;}
.teaser:hover .teaser-header	{font-size: 23px;}
.teaser-header			{font-size: 18px; color: #fff; text-align: center; font-weight: 300; height: 42px; line-height: 42px;
							-webkit-transition: font 0.3s ease;
							-moz-transition: font 0.3s ease;
							-o-transition: font 0.3s ease;
							-ms-transition: font 0.3s ease;}
.teaser-header.grey		{background-color: #6D6D6D;}
.teaser-header.orange	{background-color: #F7931E}
.teaser img				{padding: 20px; box-sizing: border-box; border: 1px solid #E5E5E5;}

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

footer 						{background-color: #F5F5F5; padding: 20px; color: #6C6C6C;}
footer div.footer-left 		{ float:left; width: 40%; display: inline-block; border-right: 3px solid transparent; box-sizing: border-box;}
footer div.footer-right 	{ width: 60%; display: inline-block; box-sizing: border-box; }

footer span.title 			{ margin-bottom: 20px; font-size: 16px; display: block; color: #6C6C6C; text-transform: uppercase;}
footer ul 					{ margin-top: 0px; }
footer ul li 				{ font-size: 14px; line-height: 20px; }
footer p 					{ line-height: 160%; color: #6C6C6C; font-size:14px; }
footer a, footer a:visited 	{ color: #666; }
footer a:hover 				{ color: #EC5A0D; }

footer div.footer-right p {font-size:16px;}

footer div.footer-right > div 	{display: inline-block;}
footer div.footer-right > div >.fa	{font-size: 80px; padding: 15px; color: #fff; background-color: #F7931E;}
footer div.footer-right > div ul		{display: block;}
footer div.footer-right > div ul .fa	{color: #85B200;}

footer .footer-left .fa	{color: #6C6C6C; margin-right: 5px;}

.copyright				{text-align: center; font-size: 12px; display: block; margin-top: 5px;}

/* -------------------------------------------------- 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 											{ }
	footer 											{ }
	
	
	
	
}

@media screen and (max-width: 1040px){
	nav.links ul li		{margin-right: 10px;}
}


@media screen and (max-width: 750px){
	main .row .col-md-3		{width: 50%;}
}

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

/* Header */
header img#logo { margin: 10px auto; display: block;}
nav.links 		{ width:100%; text-align: center; padding:10px 0px;}
	
/* Navigation */
	nav.kat {display:none;}
nav.kat ul 		{ display: block; }
nav.kat ul li 	{ width:100%;text-align: center; padding:0px; margin-bottom: 0px; }	
nav.kat ul li a { display: block; padding:20px 0px; border:1px solid white;}
/* 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; }	
main .row .col-md-3		{width: 50%;}
	
.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.footer-left, footer div.footer-right { display: block; text-align: left;width: 100%;}
	footer div.footer-left 							{ float:none;}
	footer div.footer-right 						{ margin-top:30px;}
	footer ul 										{ margin-top: 20px; }	
}

@media screen and (max-width: 415px){
	main .row .col-md-3		{width: 100%; padding-left:0; padding-right:0;}
	.teaser img {padding:35px;}
}

@media screen and (min-width: 850px){
	nav.links 		{margin-left: 50px;}
}

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

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