@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700');
    
/* LAYOUT */
.header-bg {background:#fff; border-top:5px solid #a0a8ac; border-bottom:1px solid #dddddd}  
.footer-bg {background:#fff; border-top:5px solid #a0a8ac;}
.header-shadow {width:100%; height:5px; background: #dbdbdb; background: -moz-linear-gradient(top,  #dbdbdb 0%, #f2f2f2 100%); background: -webkit-linear-gradient(top,  #dbdbdb 0%,#f2f2f2 100%); background: linear-gradient(to bottom,  #dbdbdb 0%,#f2f2f2 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#f2f2f2',GradientType=0 );}
.footer-shadow {width:100%; height:10px; background: #f2f2f2; background: -moz-linear-gradient(top,  #f2f2f2 0%, #dbdbdb 100%); background: -webkit-linear-gradient(top,  #f2f2f2 0%,#dbdbdb 100%); background: linear-gradient(to bottom,  #f2f2f2 0%,#dbdbdb 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#dbdbdb',GradientType=0 );}    
.content-bg {background:#f2f2f2; margin:0; padding:0}
p, .container, .container-fluid, .row {font-size:14px; font-family: 'Open Sans', sans-serif; text-align: justify;}
.maincontent, .sidebar {margin:0; padding:0}
    
/* HEADER */
.logo {font-family: 'Open Sans', sans-serif; font-size: 38px; font-weight:300; color:#606060; line-height:30px; margin:0; padding-top:40px; margin-top: -35px;}
.slogan {color:#a0a8ac; font-weight:400; font-size:14px}
.header-info {margin:30px 0; padding:0; text-align:left; padding-left:60px; font-family: 'Open Sans', sans-serif; font-size:14px; color:#7e7e7e; line-height:22px}
.header-info i {color:#a0a8ac}
    
/* MENU */
.menubar {width:100%; border-top: 1px solid #ddd}
ul.menu {width:100%; margin:0; padding:0}
ul.menu li {float:left; width:20%; height:50px; line-height:50px; list-style-type:none; margin:0; padding:0; font-family: 'Open Sans', sans-serif; font-weight:400}
ul.menu li a {display:block; color:#555; font-size:14px; text-align: center}
ul.menu li a:hover {text-decoration:none; margin-top:-1px; border-top:1px solid #a0a8ac; color:#a0a8ac}
    
/* RESPONSIVE MENU */
.dropdown {margin:0; padding:0;}
ul.resmenu {margin:0; padding:0; width:100%;}
ul.resmenu li {float:left; display:block; margin:0; padding:0; width:20%; background:none;}
ul.resmenu li a {display:block; text-align:center; font-size:20px; color:#a0a8ac; background:none; text-decoration: none; margin:0; padding:15px 0}
ul.resmenu li a:hover {color:#555}
    
/* SUCHE */
.header-suche {padding:0; margin:50px 0 0 0; border:none;}
.suchfeld {width:250px; height:30px; float:left; font-family: 'Open Sans', sans-serif; background:none; color:#a0a8ac; line-height:30px; margin:0; padding:0 20px; border:none; text-align: left; border-bottom:1px solid #a0a8ac}
.suchbutton {float:right; width:30px; height:30px; background:none; color:#a0a8ac; font-size:20px; text-align:center; margin:0 105px 0 0; padding:0;border:none;}
.suchbutton i {line-height:30px}
.suchbutton:hover {background:none; color:#555}
    
/* SHOPKATEGORIEN */
ul.katmenu {margin:0; padding:0 20px 20px 20px; text-align:left;}
ul.katmenu li {margin:0; padding:0; list-style-type:none; font-family: 'Open Sans', sans-serif; padding:5px 0}
ul.katmenu li a {border:1px solid #fff; margin:0; color:#555; text-decoration:none; line-height:14px; font-size:14px}
ul.katmenu li a:hover {border-bottom:1px solid #a0a8ac; color:#333}
ul.katmenu li:before {font-family: 'FontAwesome'; content: '\f105'; font-size:13px; padding:0 5px 0 10px; color: #a0a8ac;}
ul.katmenu li.ukat {padding-left:10px}

/* ARTIKELBILDER */
.image-gallery {margin:0 0 20px 0; width:100%; height:auto}
.image-gallery:after {content:''; display:table; clear:both}
.image-gallery .big-image {width:400px; height:400px; margin:0 auto; position:relative;}
.image-gallery .big-image img {opacity:0; position:absolute; left:0px; top:0px; max-height:400px; width:auto; margin:0; transition: opacity 350ms;}
.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 .thumbs {max-width:400px!important; margin:0 auto; position: relative; top:10px;}
.image-gallery .thumbs ul {width:100%; list-style-type:none; margin:0!important; padding:0!important; text-align: center}
.image-gallery .thumbs li {width:23%; list-style:none; margin:0; padding:0; display:inline-block; margin-right:3px; text-align: center}
.image-gallery .thumbs li a:hover{opacity:1;}
.image-gallery .thumbs li a {opacity:0.85; text-align: center}
.image-gallery .thumbs li a:focus{opacity:1;}
.image-gallery .thumbs li img {width:100%; height:auto; margin:0 auto}
    
/* TEXT & ÜBERSCHRIFTEN */
.textbox {margin:20px; padding:0; padding-bottom:10px; background:#fff; border-top:5px solid #e30613; box-shadow:1px 1px 3px #ddd; text-align:left; font-family: 'Open Sans', sans-serif;}
.textbox p {padding:0 20px; color:#555; Text-align:left;}
.sidebar h1, .textbox h1, .artdesc h1, .artdesc h2, .footer h1 {font-family: 'Open Sans', sans-serif; font-size: 20px; color:#555; padding:10px; margin:10px 25px; border-bottom:1px solid #ddd; text-align:center;}
.artdesc-2 h1 {margin-top:0; font-family: 'Open Sans', sans-serif; font-size: 22px; color:#555;}
.artdesc-2 h2 {font-family: 'Open Sans', sans-serif; font-size: 18px; color:#555; padding-bottom:8px; border-bottom:1px solid #a0a8ac;}
.artdesc-2 h3 {font-size:34px; text-align:center; font-weight:300; font-family: 'Open Sans', sans-serif; color:#555; padding:10px 0;}
.artdesc-2 span {font-size:12px; color:#808080; font-weight:400}
.artdesc {padding:20px}
.artdesc-2 {padding:0 15px 0 25px; margin:0}
.artdesc-2 ul, .tab-content ul {margin:0; padding:0; font-size:14px}
.artdesc-2 ul li, .tab-content ul li {list-style-type:none; background:none; margin:1px 0; padding:5px 10px; border-bottom:1px dotted #ddd; line-height:20px}
.artdesc-2 ul li:before, .tab-content ul li:before {font-family: 'FontAwesome'; content: '\f105'; font-size:14px; color:#a0a8ac; margin-left:10px; padding-right:10px}
    
/* TABLE */
.table, .table th, .table td {font-family: 'Open Sans', serif; font-size:14px; color:#555}
.table th {color:#a0a8ac; font-weight:700; border-bottom:1px solid #a0a8ac}
    
/* BUTTONS */    
a.skb {display:block; font-weight:700; font-size:14px; text-transform:uppercase; background:#555; margin:0; padding:10px; color:#fff; text-decoration: none; text-align:center; border-bottom:4px solid #a0a8ac;}
a.skb i {padding-right:7px;}
a.skb:hover {background:#444; border-bottom:4px solid #a0a8ac}
a.beo, a.fsb {width:49%; display:inline-block; text-decoration:none; color:#a0a8ac; padding:15px 0; margin:0; font-size:14px; text-align:center; font-weight:700;}
a.beo i, a.fsb i {color:#555; padding-right:7px}
a.beo:hover, a.fsb:hover {color:#555}
    
/* SERVICE */
.service {margin:20px; padding:0; color:#555; text-align: left; font-size:14px; line-height:24px}    
.service i {width:40px; float:left; margin:0; margin-right:8px; padding:0; color:#cbcbcb; font-size:30px; text-align:center;}
.service span {display:block; margin:0; padding:0; color:#e30613; line-height:14px; font-size:16px; font-weight:400;}
    
/* TABS */
.tabs {margin:10px 20px; padding:0; background:none}
.tabs input[type=radio] {display:none}
.tabs label {display:block; float:left; font-family: 'Open Sans', serif; color:#888; font-size:14px; font-weight:700; text-decoration: none; text-align:center; cursor:pointer; background:#ddd; padding:15px 30px; margin:0 10px 0 0}
.tabs label span {display:inline-block}
.tabs label:hover {background:#d8d8d8; color:#777}
.tab-content {display:none; width:100%; float:left; padding:15px 20px; box-sizing:border-box; background:#fff; border-top:5px solid #e30613; margin-top:-5px; text-align:left; color:#555}
.tab-content h1 {font-family: 'Open Sans', serif; color:#555; background:none; border:none; font-size:18px; font-weight:700; border-bottom:1px dotted #ddd; margin:0 0 10px 0; padding:10px 0}
.tabs [id^="tab"]:checked + label {background:#e30613; color:#fff}
#tab1:checked ~ #tab-content1, #tab2:checked ~ #tab-content2, #tab3:checked ~ #tab-content3, #tab4:checked ~ #tab-content4, #tab5:checked ~ #tab-content5, #tab6:checked ~ #tab-content6 {display:block}
.tabs:after {content:''; display:table; clear:both}
.tab-content ul {margin:10px 0}    
    
/* CROSS-SELL */
.xsell {margin:0; padding:20px 20px 10px 20px}
.xsell img {border:1px solid #ddd; margin:0 auto}
.maincontent a {text-decoration: none}
.xsell h1 {font-size:14px; text-align: center; margin:0; padding:10px 0; color:#a0a8ac; border:none; font-family: 'Open Sans', sans-serif;}
.xsell h2 {font-size:14px; text-align: center; margin:0; padding:0; color:#555; font-weight:400; margin-bottom:20px; font-family: 'Open Sans', sans-serif;}
.xsell h3 {display:block; background:#555; color:#fff; text-shadow: 1px 1px 0px #333; border-bottom:4px solid #a0a8ac; margin:0 0 5px 0; font-size:14px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; padding:10px 0 7px 0; text-align: center; text-transform: uppercase}
.xsell h3:hover {color:#fff; background:#444}
    
/* FOOTER */
.footer {padding:0 20px 30px 20px; font-size:14px; color:#555}
.footer i {color:#a0a8ac}
.footer a {color:#555; text-decoration:none;}
.footer a:hover {color:#444}
.footer ul.katmenu li {margin:5px 0}
a.nws i {color:#fff; font-size:16px; padding-right:15px}
a.nws {margin:20px 0; display:block; background:#a0a8ac; padding:10px 0; font-size:14px; font-family: 'Open Sans', sans-serif; font-weight: 400; color:#fff!important; text-decoration:none; text-align:center;}
a.nws:hover {background:#888;}
.laden {margin-top: 10px;}
    
/* MEDIA QUERY */  
    
@media (min-width:992px) and (max-width: 1200px) {
.suchfeld {width:180px} 
ul.menu li {width:156px}
.sidebar h1, .textbox h1, .artdesc h1, .artdesc h2, .footer h1 {font-size:16px; margin:10px 20px}
ul.katmenu li {font-size:12px;}
ul.katmenu li a {padding:5px 0}
.service span {font-size:14px}
.service i {font-size:22px; margin-right:3px}
.service {font-size:11px; margin:5px 15px;}
.artdesc-2 {margin:; padding:0 0 0 35px}
.artdesc-2 h3 {font-size:26px}
.textbox p {font-size:13px}
.xsell h1 {font-size:14px; margin:0; padding:5px 0}
.footer {margin:0; padding:0 10px; padding-bottom:20px; font-size:12px}
.footer p {font-size:13px}
.artdesc-2 {padding:5px 20px}
.laden {margin-top: 10px; width: 100%; height: auto;}
}
    
@media (min-width:768px) and (max-width: 992px) {
.logo {margin:0; padding:30px 0 0 0}
.suchfeld {width:180px}
.suchbutton {margin:0 35px 0 0}
.header-info {font-size:12px; padding-left:40px; margin:15px 0 0 0}
.header-suche {padding:0; margin:30px 0 0 0}
.headerrow {padding-bottom:15px}
ul.menu li {width:120px}
ul.menu li a {font-size:13px}
.artdesc-2 h1 {padding-top:25px}
.xsell img {width:100%; height:auto;}
ul.katmenu li {text-align:center}
.footer {text-align:center}
.laden {margin-top: 10px; width: 100%; height: auto;}
}
    
@media (max-width: 768px) { 
.artdesc-2 h1 {font-size:18px; margin:10px 0; padding-top:10px}
.content h1 {padding:0; margin:10px; margin-bottom:10px}
.footer, .footer p {font-size:12px}
.xsell img {width:100%; height:auto;}
.image-gallery .big-image {width:270px; height:270px;}
.image-gallery .big-image img {max-height:270px;}
.image-gallery .thumbs {max-width:270px!important;}
.image-gallery .thumbs li {width:22%; margin:0 auto}
.container, .row, .artdesc-2 {margin:0; padding:0}
.artdesc {padding:15px; margin:10px auto}
.tabs {margin:0}
.tabs label {width:100%}
.tabs label span {display:inline-block}
.textbox {margin:15px 0}
.footer {padding:0}
.laden {margin-top: 10px; width: 100%; height: auto;}
}

.artname {font-size: 28px; font-weight: 700; text-align:left;}