/* Default CSS */

html { width: 100%; margin: 0; padding: 0; }
body { font-family: 'Arial', sans-serif; color: #1d1c1b; margin: 0; width: 100%; font-size: 14px; padding: 0; }
a { color: #828da3; }
a:hover {cursor: pointer;}
strong, b { font-weight: 600; }

.row:before, .row:after{ content:' '; display: table; }
.row:after, .row:after { clear: both; }

hr{ border: 0; border-top: 1px solid #e0e0e0; }
p.smalltxt{ font-size: 11px; margin: 3px 0; }

.mobile { display: none; }

.fat{ font-weight: bold; }
.right { float: right; }

.half { width: 49%; float: left; margin-right: 1%; }
.half.last { width: 50%; margin: 0}

.third { width: 32%; float: left; margin-right: 1%; }
.third.last { width: 34%; margin: 0}
.two.third { width: 66%; float: right;  }
.two.third.last { width: 65%; float: right; }

.fourth {width: 24%; float: left; margin-right: 1%;}
.fourth.last{width: 25%; margin-right: 0}

.box_btn{ display: inline-block; text-decoration: none; text-align: center; border-radius: 3px; width: 150px; height: 24px; line-height: 24px; color: #fff; background: #b259a8; background: -moz-linear-gradient(top,  #b259a8 0%, #951c82 100%); background: -webkit-linear-gradient(top,  #b259a8 0%,#951c82 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b259a8', endColorstr='#951c82',GradientType=0 ); }

.page-background { font-family: 'Open Sans', sans-serif; color: #333; background: #fff; font-size: 14px; }
.page-background * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.page-content { margin: 0 auto; width: 1000px; position: relative; }

#usp .part { float: left; width: 150px; color: #919191; font-size: 11px; margin-right: 20px; padding-left: 40px; background: url(../gfx/usp.png) no-repeat; background-size: 28px; margin-top: 12px; }
#usp .part.one { background-position: 1px 3px; margin-right: 30px; }
#usp .part.two { background-position: 2px -36px; margin-right: 22px;}
#usp .part.three { background-position: 7px -79px; margin-right: 20px;}
#usp .part.four { background-position: 3px -116px; }
#usp .part:last-child { margin-right: 0; }


/* Lott - CSS */

.page-background h1, h2, h3 { margin-top: 0; font-size: 20px; color: #005a8f; font-weight: 400; }
.page-background h3 { font-size: 18px; }

#header { height: 130px; background: url(../gfx/header.jpg) no-repeat; background-position: right top; position: relative; }
#header:before { content:''; background: url(../gfx/head-shadow.png) repeat-x; position: absolute; bottom: 0; left: 0; height: 9px; width: 100%;  }
#header .content { position: absolute; right: 0; width: 672px; }
#contact { float: right; height: 63px; width: 672px; background: url(../gfx/usp.jpg) no-repeat; background-position: right; text-indent: -9999px; }
#contact .info{ width: 635px; height: 38px; background: url(../gfx/header-info.png) no-repeat; background-size: auto 38px; margin-top: 11px; margin-left: 50px; }
#contact .info.mail { display: none; }

.logo { display: block; float: left; width: 290px; height: 70px; background: url(../gfx/lott.png) no-repeat; background-size: 100%; margin: 23px 0; margin-left: 5px; }

#info { float: right; width: 485px; position: relative; height: 500px; }

/* Image Gallery */
.product_images { float: left; }
.product_images a { cursor: pointer; border: none; }
.product_images img { min-width: 1px; min-height: 1px; }
.product_images ul, .product_images li { list-style: none; margin: 0; padding: 0; }

.image-gallery { position: relative; }
.image-gallery .big-image{ width: 500px; height: 500px; position: relative; border: 1px solid #ccc; overflow: hidden; }
.image-gallery .big-image img{ opacity: 0; position: absolute; left: 0px; top: 0px; right: 0px; margin: 0 auto; transition: opacity 350ms; max-height: 90%; max-width: 90%; }
.image-gallery .big-image img:target { opacity: 1; }
.image-gallery .big-image img:target ~ img#default { opacity: 0; }
.image-gallery .big-image img#default { opacity: 1; }
.image-gallery .big-image img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%);}
.thumbs { display: table; position: absolute; bottom: 0; right: 0; width: 485px; }
.thumbs ul { transform: translateX(0); padding: 0; margin: 0; }
.thumbs li { display: block; height: 90px; width: 89px; position: relative; margin-top: 10px;  margin-right: 10px; float: left; border: 1px solid #ccc; overflow: hidden; }
.thumbs li:nth-child(5n) { margin-right: 0; }
.thumbs li a:hover { opacity: 1; }
.thumbs li a { opacity: 0.85; }
.thumbs li a:focus { opacity: 1; }
.thumbs li img { max-width: 95%; max-height: 95%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }

.short-desc { height: 225px; overflow: auto; }
.short-desc ul { padding-left: 18px; margin: 5px 0; }
.short-desc ul li { list-style-image: url('../gfx/li.png');}

#content { padding-top: 20px; position: relative; }
.sidebar { width: 220px; float: left; }
.main { float: left; width: 780px; }
#top { position: relative; }

#navigation { padding-left: 0; width: 200px; }
#navigation li { list-style: none; border-bottom: 1px solid #ddd; padding-left: 10px; }
#navigation li:last-child { border: 0;}
#navigation li a { color: #333; text-decoration: none; line-height: 44px; height: 44px; display: block; }
#navigation li:hover { background: #f0f0f0; }


/*Tabs Top*/
.tabs {position: relative; clear: both; margin: 25px 0; min-height: 50px; margin-top: 10px; }
.tabs .topbanner { position: absolute; left: 0; top: 0; width: 100%; height: 50px; background: #767676; background: -moz-linear-gradient(top,  #767676 0%, #5c5c5c 100%); background: -webkit-linear-gradient(top,  #767676 0%,#5c5c5c 100%); background: linear-gradient(to bottom,  #767676 0%,#5c5c5c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#767676', endColorstr='#5c5c5c',GradientType=0 );}
.tabs .tab {float: left; width: 100%; }
.tabs .tab label {letter-spacing: 0px; padding: 0px; position: relative; left: 1px; border: 0; position: absolute; top: 0; left: 0px; }
.tabs .tab label span { display: block; height: 50px; line-height: 50px; padding: 0 15px;  text-align: center; background: #007cc2; color: #fff; }
.tabs .tab.tab-2 label { left: 125px; }
.tabs .tab label:hover {cursor: pointer;}
.tabs .tab [type=radio] {display: none;}
.tabs .content { display: none; position: relative; margin-top: 50px; left: 0; right: 0; bottom: 0; padding: 0px 0px 20px; overflow: auto; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; height: 310px; overflow: auto; white-space: normal; word-break: break-word; font-size: 13px; background: #f3f3f3; border-bottom: 5px solid #005a8f; padding: 20px; }
.tabs .content .inner { padding: 20px 10px }
.tabs .content .inner.scroll { height: 343px; overflow: auto }
.tabs .content > * {opacity: 0; -webkit-transform: translate3d(0, 0, 0); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform translateX(-100%); } 
.tabs input[type=radio]:checked ~ label span{ z-index: 2; border: 0; background: #f3f3f3; color: #333; }
.tabs input[type=radio]:checked ~ label ~ .content {z-index: 1; display: block;}
.tabs input[type=radio]:checked ~ label ~ .content > * {opacity: 1; -webkit-transform: translateX(0); -moz-transform:    translateX(0); -ms-transform:     translateX(0); -o-transform:      translateX(0); }
.internal-number { position: absolute; right: 0; bottom: 0; font-size: 9px; color: #f0f0f0; }
.tabs .content ul { padding-left: 18px; }
.tabs .content ul li { list-style-image: url('../gfx/li.png');}
#tecdoc { padding: 10px; background: #fff; border-radius: 3px; margin: 15px 0; }

#information .box { width: 250px; height: 250px; float: left; margin-right: 15px; position: relative; }
#information h3 { font-size: 18px; background: #007cc2; line-height: 40px; height: 40px; color: #fff; padding: 0 10px; font-weight: 400;  margin-top: 0px; position: }
#information .box .info { position: absolute; background: rgba(255,255,255,.9); bottom: 0; left: 0; width: 100%; color: #333; font-weight: bold; padding: 10px; width: 100%; }
#information .completion { background: url('../gfx/completion.jpg') no-repeat #585858;; }
#information .direction { background: url('../gfx/direction.png') no-repeat #bebebe; background-size: 249px 250px; }
#information .hsn { margin-right: 0;  }
#information .hsn .info { background: #ddd; font-weight: normal; padding: 8px 10px; }
#information .hsn .help { background: url(../gfx/help.png) no-repeat #585858; height: 54px; width: 60px; background-size: 21px 31px; position: absolute; right: 0; top: 0; background-position: center center; }


#hsn { position: absolute; right: 0; width: 250px; height: 250px; top: 40px; z-index: 5; display: block; overflow: hidden; }
#hsn:hover {  cursor: help; background: url('../gfx/hsn-hover.jpg') no-repeat #fff; }
#hsn:hover #slide-holder { display: none; }
.slide {width: 250px; height: 250px; float: left; position: relative; }
.slide.one { background: url('../gfx/hsn-neu.jpg') no-repeat; }


#about { margin: 40px 0 20px; line-height: 20px; font-size: 14px; }
#about h2 { margin-top: 0px; margin-bottom: 10px; }
#about .contact { background: url(../gfx/about.png) no-repeat; background-size: 202px 340px; width: 202px; min-height: 340px;}


#footer { border-top: 5px solid #005a8f; color: #707070; padding: 20px 0; line-height: 26px; }
#footer .title { color: #005a8f; margin-bottom: 14px; line-height: 18px; }
#footer span { line-height: 20px; display: block; }
#footer h4 { color: #005a8f; font-size: 20px; font-weight: 400; margin: 10px 0;  }
#footer .fa { width: 20px; }
#footer .fa.white { color: #fff; }
#footer .pay .icon { width: 80px; height: 32px; background: url(../gfx/paypal.png) no-repeat; background-size: 90%; background-position: center; float: left; margin: 0 10px 10px 0; }
#footer .pay .vorkasse { width: 91px; height: 32px; background: url(../gfx/vorkasse.png) no-repeat; background-position: center; background-size: 91px 26px; }
#footer .pay .nachnahme { background: #c2111d; color: #fff; font-size: 11px; height: 32px; border-radius: 4px; text-align: center; line-height: 32px; }
#footer .pay .abholung { background: #007cc2; color: #fff; font-size: 11px; height: 32px; border-radius: 4px; text-align: center; line-height: 12px; padding-top: 4px; width: 91px; }
#footer .ship { width: 21%; }
#footer .fourth.last { width: 28%; }
#footer .ship .icon { width: 100px; height: 32px; background: url(../gfx/dhl.svg) no-repeat; background-size: 100%; background-position: center; margin: 0 0 10px; }
#footer .dpd.icon { background: url(../gfx/dpd.svg) no-repeat; background-size: 90%; background-position: center; height: 38px; background-size: 85%; }
#footer .footer-info { width: 159px; height: 86px; background: url(../gfx/footer-contact.png) no-repeat; background-size: 100%; }


/* Mobile Anpassungen */
@media screen and (max-width: 1000px) {
	.page-content { width: 100%; font-size: 15px; }
	#header { box-shadow: none; }
	#header #usp, .sidebar { display: none; }
	#header, #header #contact, #header .content { background: none; float: none; height: auto; position: relative; width: 100%; }
	#header .logo { margin: 40px auto; text-align: center; float: none; }
	#header #contact { background: #007cc2; border-bottom: 5px solid #005a8f; padding: 10px 10px 0px 10px; width: 100%; }
	#contact .info { margin: 0 auto; float: none; background: url(../gfx/mobile-info.png) no-repeat; height: 115px; width: 267px; background-size: 100%; }
	#content { padding: 0 10px; width: 100%; }
	#info { width: 100%; padding-top: 20px; float: none; height: auto; }
	.short-desc { height: auto; }
	.product_images { float: none;  }
	.image-gallery .big-image { width: 100%; height: 300px; margin-bottom: 0px; }

	.thumbs { position: relative; width: 100%; margin: 0px 0 20px; }
	.thumbs li { width: 32%; margin-right: 2%; height: 110px; }
	.thumbs li:nth-child(3n){ width: 32%; margin-right: 0; }
	.thumbs li:nth-child(5n){margin-right: 2%;}
	.tabs .content { width: 100%; height: auto; line-height: 22px; font-size: 15px; }
	#about { font-size: 15px; }
	.main { width: 100%; }
	#information .box { width: 100%; background-position: center; margin-bottom: 20px; margin-right: 0; overflow: hidden; }
	#about { margin-top: 10px; }
	#footer { padding: 30px 10px;}
	#footer .fourth { float: none; width: 100%!important; margin: 0 0 30px!important; }
	#footer .ship .icon { float: left; margin-right: 20px; }
	#information .box.hsn { height: 253px; background: #f0f0f0; }
	#hsn { right: auto; left: 50%; transform: translate(-50%, 0); }
	#information .hsn .info { background: #ddd; }
	#information .hsn .info .help { display: none; }
	#information .completion { background-size: 100%; }
}


/* Necessary */
.eBay_Desc { display: none; }

/* Dark Mode Refinements*/
@media (prefers-color-scheme: dark) {
	header { background-color: #ffffff!important; }
	.page-background { color: #333; background: #ffffff; }
	.image-gallery .big-image { background-color: #ffffff; }
	.thumbs li { background-color: #ffffff; }
	.tabs input[type=radio]:checked ~ label span { background: #f3f3f3; color: #333; }
	.tabs .content { background: #f3f3f3; color: #333;  }
	#information .box .info { background: rgba(255, 255, 255, .9); color: #333; }
	#information .hsn .info { background: #ddd; }
	#information .box.hsn { background: #f0f0f0; }
	#footer { background-color: #fff; color: #707070; }
	#footer h4 { color: #005a8f; }
}
/* Necessary */