@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300);    

/* ==========================================================================
   MASECORI BRANDING TOKENS (FARBEN)
   Hier kannst du die Farben zentral für das gesamte Template anpassen!
   ========================================================================== */
:root {
    --fh-blue: #223C71;
    --fh-blue-dark: #1a2f5a;
    --fh-red: #C70039;
    --fh-red-dark: #A0002E;
    --fh-gold: #A68B5B;
    --fh-gold-light: #e8cfa5;
    --fh-gold-dark: #8b6d3f;
    --fh-bg: #F8F5F0;
    --fh-card: #FFFFFF;
    --fh-text: #223C71;
    --fh-text-muted: #5e6e8c;
    
    --grad-1: #d97706;
    --grad-2: #b45309;
    --grad-3: #e08a1e;
}

/* ==========================================================================
   GRUNDLAYOUT
   ========================================================================== */           
.header-bg { background-color: var(--fh-blue); border-top: 5px solid var(--fh-gold); margin: 0; padding: 0; } 
.footer-bg { background: var(--fh-blue-dark); border-top: 6px solid var(--fh-gold); margin: 0; padding: 0; } 
.content-bg { background: var(--fh-bg); margin: 0; padding: 0; }    
p, .container, .container-fluid, .row { font-size: 14px; font-family: 'Open Sans', serif; color: var(--fh-text-muted); }
.maincontent, .sidebar { margin: 0; padding: 0; }
    
/* HEADER */
.logo { margin: 0; padding: 20px 0; vertical-align: baseline; }
.logo img { max-width: 350px; height: auto; margin: 0; }
.logo-text { font-size: 38px; color: #fff; font-weight: 700; font-family: 'Open Sans', serif; margin-bottom: 0; line-height: 1; letter-spacing: 1px; }
.logo-sub { font-size: 16px; color: var(--fh-gold-light); text-align: left; display: block; padding: 5px 0 0 0; margin: 0; max-width: 350px; font-weight: 300; }
    
.header-info { margin: 0; padding: 15px 0 10px 120px; text-align: left; font-family: 'Open Sans', serif; font-weight: 700; font-size: 14px; color: rgba(255,255,255,0.8); text-shadow: 1px 1px 0px rgba(0,0,0,0.1); line-height: 30px; }
.header-info i { width: 22px; height: 22px; background: var(--fh-blue-dark); color: var(--fh-gold); font-size: 12px; text-align: center; padding: 5px; margin: 0 5px 0 0; -webkit-border-radius: 22px; -moz-border-radius: 22px; border-radius: 22px; }
.header-link { margin: 70px 0 0 0; padding: 0 0 0 100px; }
.header-link a { color: rgba(255,255,255,0.8); text-decoration: none!important; display: block; font-family: 'Open Sans', serif; font-weight: 700; text-transform: uppercase; text-shadow: 1px 1px 0px rgba(0,0,0,0.1); line-height: 20px; text-align: left; }
.header-link a:hover { color: var(--fh-gold-light); transition: all 0.3s ease; }
.header-link i { font-size: 38px; margin: 0; padding: 0; color: rgba(255,255,255,0.8); }
.header-link div div:first-child { width: 50px; padding: 0; margin: 0; }
.header-link div div:last-child { font-size: 23px; font-weight: 700; padding: 0; margin: 0; }
.header-link span { font-size: 15px; font-weight: 700; color: var(--fh-gold-light); }

/* MENU */
.menubar { border-top: 5px solid var(--fh-gold); background: var(--fh-blue-dark); margin: 5px 0 0 0; padding: 0; }
ul.menu { margin: 0; padding: 0; }
ul.menu li { float: left; width: 168px; height: 70px; line-height: 70px; list-style-type: none; margin: 0; padding: 0; font-family: 'Open Sans', serif; font-weight: 700; border-right: 1px solid rgba(255,255,255,0.05); font-size: 13px; }
ul.menu li a { display: block; color: #fff; text-shadow: 1px 1px 0px rgba(0,0,0,0.4); text-align: center; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; overflow: hidden; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-property: color, background-color; transition-property: color, background-color; }
ul.menu li a:hover { text-decoration: none; background-color: rgba(0,0,0,0.25); color: var(--fh-gold-light); }
    
/* RESPONSIVE MENU */
.dropdown { margin: 0; padding: 10px 0; }
ul.resmenu { margin: 0; padding: 0; width: 100%; border-top: 5px solid var(--fh-gold); }
ul.resmenu li { float: left; display: block; margin: 0; padding: 0; width: 20%; background: var(--fh-blue-dark); border-right: 1px solid rgba(255,255,255,0.05); text-align: center; }
ul.resmenu li a { display: inline-block; text-align: center; font-size: 20px; color: #fff; background: none; text-decoration: none; margin: 0; padding: 15px 0; }
ul.resmenu li a:hover { color: var(--fh-gold); }
 
/* SUCHE */
.header-suche { padding: 0; margin: 10px 10px 0 0; border: none; float: right; color: rgba(255,255,255,0.7)!important; }
.header-suche a { color: rgba(255,255,255,0.4)!important; text-decoration: none; }
.header-suche a:hover { text-decoration: none; color: #fff!important;}
.suchfeld { width: 250px; height: 50px; float: left; font-family: 'Open Sans', serif; background: rgba(0,0,0,0.15); color: rgba(255,255,255,0.7)!important; line-height: 50px; margin: 0; padding: 0 20px; border: none; text-align: left; }
.suchbutton { float: right; width: 50px; height: 50px; background: rgba(0,0,0,0.15); color: rgba(255,255,255,0.7)!important; font-size: 20px; text-align: center; margin: 0; padding: 0; border: none; }
.suchbutton i { line-height: 50px; color: var(--fh-gold); }
.header-suche:hover .suchbutton, .header-suche:hover .suchfeld { background: rgba(0,0,0,0.25); }

/* ARTIKELBILDER */
img { max-width: 100%; height: auto; }
.artikelbilder.galerie { display: inline-block; position: relative; width: 100%; height: auto; }   
.artikelbilder.galerie > .anker { display: none; }
.artikelbilder.galerie > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; height: auto; overflow: hidden; white-space: nowrap; }
.artikelbilder.galerie > ul > .slide.img img { width: 100%; height: auto; }
.artikelbilder.galerie > ul > .slide { position: relative; display: inline-block; width: 100%; height: auto; overflow: hidden; line-height: normal; white-space: normal; vertical-align: top; box-sizing: border-box; transform: translate3d(0, 0, 0); }
/* Thumbnails */
.artikelbilder.galerie > .thumb { position: absolute; left: 0; width: 100%; height: auto; z-index: 6; text-align: center; }
.artikelbilder.galerie > .thumb > div { margin-left: -50%; width: 100%; }
.artikelbilder.galerie > .thumb > label { position: relative; display: inline-block; cursor: pointer; }
.artikelbilder.galerie > .thumb { bottom: 5px; margin-bottom: 5px; }
.artikelbilder.galerie > .thumb > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: none; }
.artikelbilder.galerie > .thumb > label > .anker { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; }
.artikelbilder.galerie > .thumb > label:hover > .anker,
.artikelbilder.galerie > input:checked~.thumb > label > .anker { background: none; }
.artikelbilder.galerie { height: auto; margin-bottom: 0; text-align: center; }
.artikelbilder.galerie img { border-radius: 3px; }
.artikelbilder.galerie .thumb { position: relative; width: 100%; text-align: left; margin-top: 10px; }
.artikelbilder.galerie > .thumb > label { box-sizing: border-box; margin: 0 auto; padding: 5px; background: none; text-align: center; }
.artikelbilder.galerie > .thumb > label img { margin: 0 auto; }
.artikelbilder.galerie > ul > .slide.img img { width: auto; max-width: 100%; max-height: 100%; margin: 0 auto; }
.artikelbilder.galerie > ul > .slide { text-align: center; }
.artikelbilder.galerie img { box-shadow: none; width: 100%; height: auto; max-width: 100%; }

/* Original-Bild (Ebay CSS Hack) */ 
.artikelbilder.galerie > #slide1:checked~ul > .slide.pic1, .artikelbilder.galerie > #slide2:checked~ul > .slide.pic2,
.artikelbilder.galerie > #slide3:checked~ul > .slide.pic3, .artikelbilder.galerie > #slide4:checked~ul > .slide.pic4, 
.artikelbilder.galerie > #slide5:checked~ul > .slide.pic5, .artikelbilder.galerie > #slide6:checked~ul > .slide.pic6, 
.artikelbilder.galerie > #slide7:checked~ul > .slide.pic7, .artikelbilder.galerie > #slide8:checked~ul > .slide.pic8, 
.artikelbilder.galerie > #slide9:checked~ul > .slide.pic9, .artikelbilder.galerie > #slide10:checked~ul > .slide.pic10, 
.artikelbilder.galerie > #slide11:checked~ul > .slide.pic11, .artikelbilder.galerie > #slide12:checked~ul > .slide.pic12 { opacity: 1; z-index: 2; }

/* Animations */
.artikelbilder.galerie > ul > .slide { display: inline-block; position: absolute; left: 0; top: 0; opacity: 0; z-index: 1; transition: opacity 1250ms ease; transform: rotate(0deg); }

/* Größe */
.artikelbilder.galerie { max-width: 397px; }
.artikelbilder.galerie > ul { height: 397px; }
.artikelbilder.galerie > ul > .slide.img img { max-height: 397px; width: auto; margin: 0 auto; }
.artikelbilder.galerie > .thumb > label img { max-height: 80px; width: auto; margin: 0 auto; }

/* TEXT & ÜBERSCHRIFTEN */
.textbox { margin: 20px; margin-left: 0px; padding: 0; padding-bottom: 10px; background: var(--fh-card); text-align: left; font-family: 'Open Sans', serif; border: 1px solid #e2e8f0; border-radius: 4px; overflow: hidden; }
.textbox p { margin: 0; padding: 20px; padding-bottom: 10px; color: var(--fh-text-muted); }
.main { margin-right: 0!important; }
.sidebar h1, .textbox h1 { font-family: 'Open Sans', serif; font-weight: 700; font-size: 16px; background: var(--fh-blue); border-bottom: 5px solid var(--fh-gold); padding: 15px 0; margin: 0; text-align: center; text-transform: uppercase; color: #fff; letter-spacing: 0.5px; } 
    
/* SHOPKATEGORIEN */
ul.katmenu { margin: 0 auto; padding: 0; padding-top: 10px; text-align: left; width: 100%; }
ul.katmenu li { display: block; margin: 0; padding: 0; list-style-type: none; font-family: 'Open Sans', serif; font-weight: 700; font-size: 14px; }
ul.katmenu li:before { font-family: 'FontAwesome'; content: '\f105'; font-size: 14px; color: var(--fh-gold); padding: 0 0 0 20px; }
ul.katmenu li a { display: inline-block; margin: 0; padding: 5px 15px; color: var(--fh-blue-dark); text-decoration: none; }
ul.katmenu li a:hover { color: var(--fh-gold); text-decoration: none; padding-left: 20px; transition: all 0.2s ease; }
ul.katmenu li ul { margin: 0; padding: 0 0 0 10px; }        
ul.katmenu li ul li { margin: 0; padding: 0; }        
    
/* SERVICE */
.service { display: block; margin: 20px; padding: 0; color: var(--fh-text-muted); text-align: left; font-size: 12px; clear: both; }    
.service:last-of-type { margin-bottom: 10px; }    
.service i { float: left; margin: 0 10px 30px 0; padding: 0; color: var(--fh-blue); font-size: 30px; text-align: center; }
.service:hover i { color: var(--fh-gold); transition: all 0.3s ease; }
.service span { display: block; margin: 0; padding: 0; color: var(--fh-text); line-height: 16px; font-size: 16px; font-weight: 700; } 

/* ARTIKELBESCHREIBUNG */
.artwrap, .artpic { margin: 0; padding: 0; }
.artpic { padding: 20px; text-align: center; } 
.artdsc { padding-top: 10px; padding-right: 20px; }
.artdsc p, .tab-content p { margin: 10px 0; padding: 0; color: var(--fh-text-muted); }
.artwrap h2 { font-family: 'Open Sans', serif; font-weight: 700; font-size: 18px; color: var(--fh-blue); text-align: left; }
.artwrap h3 { font-family: 'Open Sans', serif; font-weight: 700; font-size: 14px; color: var(--fh-blue); text-align: left; }
.artwrap h4 { font-family: 'Open Sans', serif; font-weight: 700; font-size: 42px; color: var(--fh-blue); text-align: center; padding: 20px 0; }
.artdsc ul, .tab-content ul { margin: 0; padding: 0; font-size: 14px; color: var(--fh-text-muted); }
.artdsc ul li, .tab-content ul li { list-style-type: none; background: #fff; margin: 1px 0; padding: 7px 12px; border-top: 1px solid rgba(0,0,0,0.05); line-height: 20px; text-indent: -1em; padding-left: 1.4em; }
.artdsc ul li:last-child, .tab-content ul li:last-child { border-bottom: 1px solid rgba(0,0,0,0.05); }
.artdsc ul li:hover, .tab-content ul li:hover { background: var(--fh-bg); }
.artdsc ul li:before, .tab-content ul li:before { font-family: 'FontAwesome'; content: '\f105'; font-size: 14px; padding-right: 10px; color: var(--fh-gold); }
.artwrap h4 span { font-size: 12px; color: var(--fh-text-muted); font-weight: 300; }
    
span.var { display: inline-block; min-width: 60px; padding: 10px; margin: 3px; color: var(--fh-blue-dark); border: 1px solid #e2e8f0; text-align: center; cursor: default; background: #f7f7f7; border-radius: 4px; }    
span.var:hover { border: 1px solid var(--fh-gold); background: var(--fh-blue); color: #fff; }    
    
/* STYLES */
blockquote { display: block; margin: 20px 0; padding: 20px; font-family: 'Open Sans', serif; font-size: 14px; color: var(--fh-text-muted); background: var(--fh-bg); border-left: 4px solid var(--fh-gold); }
code { display: block; margin: 20px 0; padding: 20px; font-family: 'Open Sans', serif; font-size: 14px; color: #fff; background: var(--fh-blue-dark); border-left: 4px solid var(--fh-gold); border-radius: 4px; }
mark { font-family: 'Open Sans', serif; font-size: 14px; color: var(--fh-text); background: var(--fh-gold-light); padding: 2px 4px; border-radius: 2px; }
small { font-size: 12px; color: #999; }
kbd { font-family: 'Open Sans', serif; font-size: 14px; box-shadow: none; font-weight: 700; background: var(--fh-gold); }

/* BUTTONS */
a.skb { display: block; font-weight: 700; font-size: 16px; background: var(--fh-red); margin: 0; padding: 12px; color: #fff!important; text-decoration: none; text-align: center; border-bottom: 5px solid var(--fh-red-dark); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; overflow: hidden; transition-duration: 0.3s; border-radius: 4px; }
a.skb:hover { background: var(--fh-red-dark); }
a.beo, a.fst { width: 49%; float: left; margin: 0; padding: 15px 0; text-align: center; font-family: 'Open Sans', serif; font-weight: 700; font-size: 14px; display: inline-block; text-decoration: none; color: var(--fh-blue); background: #fff; transition: all 0.3s ease; }
a.beo:hover i, a.fst:hover i { background: var(--fh-gold); }
a.beo:hover, a.fst:hover { color: var(--fh-gold-dark); }
a.beo i, a.fst i i { width: 22px; height: 22px; background: var(--fh-blue); color: #fff; font-size: 13px; text-align: center; padding: 5px; margin: 0 5px 0 0; border-radius: 25px; transition: all 0.3s ease; }
a.beo i.fa-inverse, a.fst i.fa-inverse { color: #fff!important; } 
    
/* TABS */
.tabs { margin: 10px 0 30px 0; padding: 0; background: none; }
.tabs input[type=radio] { display: none; }
.tabs label { display: block; float: left; font-family: 'Open Sans', serif; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; background: var(--fh-blue); padding: 17px 30px; margin: 0 10px 0 0; transform: perspective(1px) translateZ(0); transition-duration: 0.3s; border-radius: 4px 4px 0 0; }
.tabs label span { display: inline-block; }
.tab-content { display: none; width: 100%; float: left; padding: 15px 20px; box-sizing: border-box; background: var(--fh-card); border-top: 5px solid var(--fh-gold); margin-top: 0; text-align: left; border-radius: 0 4px 4px 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.tab-content h1, .tab-content h2, .tab-content h3 { font-family: 'Open Sans', serif; color: var(--fh-blue); background: none; border: none; font-size: 18px; font-weight: 700; border-bottom: 1px dotted rgba(0,0,0,0.1); margin: 0 0 10px 0; padding: 10px 0; }
.tab-content h2 { font-size: 16px; }
.tab-content h3 { font-size: 14px; }
.tabs [id^="tab"]:checked + label { background: var(--fh-gold); color: #fff; }
#tab1:checked ~ #tab-content1, #tab2:checked ~ #tab-content2, #tab3:checked ~ #tab-content3 { display: block; }
.tabs:after { content: ''; display: table; clear: both; }
.tab-content ul { margin: 10px 0; }
.tab-content a { color: var(--fh-blue); font-weight: 700; text-decoration: none; }
.tab-content a:hover { color: var(--fh-gold); text-decoration: none; }
    
/* TABLE */
.tab-content table { margin: 20px 0; cursor: default; font-family: 'Open Sans', serif; color: var(--fh-text-muted); font-size: 14px; width: 100%; border-collapse: collapse; }
.tab-content table tr { border-bottom: 1px solid #e2e8f0; }
.tab-content table tr:nth-child(odd) { background: var(--fh-bg); }
.tab-content table tr:last-child { border-bottom: none; }
.tab-content table td { padding: 10px; }
.tab-content table td:first-child { font-weight: 700; border-right: 1px solid #e2e8f0; color: var(--fh-blue); width: 30%; }
    
/* CROSS-SELL */
.xsell { margin: 0; padding: 20px 20px 10px 20px; }
.xsell a { color: #fff; text-decoration: none; }
.xsellbox { margin: 0; padding: 10px; border: 1px solid #fff; border-radius: 4px; background: #fff; }
.xsellbox:hover { border: 1px solid var(--fh-gold); box-shadow: 0px 5px 15px rgba(0,0,0,0.1); position: relative; z-index: 3; transition: all 0.3s ease; }
.xsellbox img { border: none; width: 100%; height: auto; display: block; margin: 0 auto; }
.maincontent a { text-decoration: none; }
.xsell h1 { font-family: 'Open Sans', serif; font-size: 14px; color: #fff!important; text-align: center; margin: 0; padding: 15px 10px; border: none; border-top: 4px solid var(--fh-gold); background: var(--fh-blue); line-height: 14px; }
.xsell h2 { font-family: 'Open Sans', serif; font-size: 16px; text-align: center; margin: 10px 0; padding: 0; color: var(--fh-red)!important; font-weight: 700; }

/* FOOTER */
.footer { padding: 0 0 10px 0; margin: 0; font-family: 'Open Sans', serif; color: rgba(255,255,255,0.6); }
.footer h1 { font-family: 'Open Sans', serif; font-weight: 700; font-size: 16px; background: var(--fh-blue); border-bottom: 5px solid var(--fh-gold); padding: 15px 0; margin: 0 10px; margin-top: 5px; text-align: center; text-transform: uppercase; color: #fff; }
.footer ul.katmenu li { margin: 0 0 0 10px; padding: 0; width: 90%; }
.footer ul.katmenu li:before { color: var(--fh-gold); position: relative; left: 30px; }
.footer ul.katmenu li a { color: rgba(255,255,255,0.8); padding-left: 40px; }
.footer ul.katmenu li:hover { background: rgba(0,0,0,0.2); transition: all 0.3s ease; border-radius: 4px; }
.footer ul.katmenu li:hover a, .footer ul.katmenu li a:hover { color: var(--fh-gold-light); }
.footer ul.katmenu li a:hover i { color: #fff; }
.footer p { padding: 10px; }
a.footbtn { margin: 0 25px; display: block; background: rgba(0,0,0,0.3); font-size: 14px; padding: 0 10px; line-height: 50px; color: #fff; text-decoration: none; text-align: center; transition: all 0.3s ease; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); }
a.footbtn i { position: relative; color: var(--fh-gold); font-size: 18px; padding-right: 10px; top: 1px; }
a.footbtn:hover { background: var(--fh-gold); color: var(--fh-blue-dark); text-decoration: none; }
a.footbtn:hover i { color: var(--fh-blue-dark); }

/* MEDIA QUERY */  
@media (min-width: 992px) and (max-width: 1200px) {
    .logo-text { font-size: 32px; margin-top: 25px;}
    .header-info { padding-left: 0; font-size: 12px; }
    .header-link { margin: 80px 0 0 0; padding: 0 0 0 60px; }
    ul.menu li { width: 140px; }
    ul.katmenu li a { font-size: 12px; }
    .suchfeld { width: 180px; }
    .service { font-size: 11px; }
    .artdsc { margin-top: 0; padding-top: 0; }
    a.footbtn { font-size: 12px; }
}
    
@media (min-width: 768px) and (max-width: 992px) {
    .header-info { padding-left: 0px; }    
    ul.menu li { width: 20%; background: var(--fh-blue-dark); }
    .artdsc { padding: 10px 30px; }
    .artwrap h2 { padding-top: 0; margin-top: 0; }  
    .xsell h1 { padding: 10px; }
    .xsell h2 { padding-bottom: 10px; }
}
    
@media (max-width: 768px) { 
    .tabs label { width: 100%; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .tabs label span { display: inline-block; }
    .sidebar .textbox { width: 100%; margin: 0; }      
    .logo { text-align: center; padding: 15px 0; }
    .logo-text { font-size: 36px; margin: 10px auto 0 auto; text-align: center;}
    .logo-sub { text-align: center; margin: 0 auto; }
    .xsell h1 { padding: 20px 10px; }
    .xsell h2 { padding-bottom: 10px; }
    a.beo, a.fst { width: 100%; float: none; padding: 15px 0 0 0; }
    .footer { margin-bottom: 0; }
    .footer p { font-size: 14px; padding: 20px; }
    .artdsc { padding: 0 20px; }
}