/*
Theme-Name: FBS
Author: MOLECO GmbH
Author URI: http://www.moleco.de
Description: FBS Theme
Version: 1.0
*/

/*
Colors
*/
:root{
    --primeold: #87BD27;
    --prime:    #5b8222;
    --sec:      #004EA0;
    --orange:   #F39101;
    --yellow:   #FFC500;
    --lila:     #522178;
    --lightblue:#0186C1;
    --black:    #4D4D4D;
    --lightgrey:#F8F8F8;
    --grey:     #2f2f2f;
}


/*
Main Style
*/
body,html,*{font-size: 17px;font-family: 'Quicksand';font-weight: 400;color: var(--sec);line-height: 1.6;}
html{scroll-behavior: smooth;}
.container{max-width: 1500px;position: relative;}
.container-fluid{max-width: 100%;}

.cff_owl-carousel .cff_owl-wrapper, .cff_owl-carousel .cff_owl-item {max-height:466px!important;}

/* img{background:#fff;} */

a{color: var(--prime);text-decoration: none;font-size: 100%;transition: all .3s ease;}
a:hover{text-decoration: none;color: var(--sec);transition: all .3s ease;}
/* a:focus{border:none;outline: none;} */
/* *:focus{outline: none;box-shadow: none!important;} */
/* *:focus-visible{outline: none;box-shadow: none!important;} */

ul{padding-left: 15px;}
li{list-style: none;position: relative;}

.editor ul, .content ul{padding-left: 25px;}
.editor ul li, .content ul li{list-style: disc;padding-bottom: 5px;}

img{max-width: 100%;height: auto;}

.headline{font-weight: 600;display: block;color: var(--sec);line-height: 1;text-transform: uppercase;}
h1{font-weight: 700!important;font-size: 350%!important;line-height: 1.1;margin:10px 0 40px;}
h2{position: relative;padding-bottom: 25px;margin:10px 0;}
h3{font-size: 200%!important;}
.topline{text-transform: uppercase;position: relative;font-size: 90%;letter-spacing: .5px;}


.buttons{padding: 15px;}
.btn{position: relative;padding: 10px 20px;font-weight: 700;background: var(--prime);color: #fff;transition: all .3s ease;line-height: 1;text-align: center;border-radius: 5px;font-size: 90%;text-transform: uppercase;width: max-content;}
.btn:hover{background: var(--sec);transition: all .3s ease;color: #fff;}
.btn:focus-visible{outline: auto;}
.btn.secondary{background: #fff;color: var(--prime);}
.btn.secondary:hover{background: var(--sec);color: #fff;}

strong{font-weight: 600;font-size: 100%;}

input{cursor: auto;}

div[class^="flx_"], div[class*="flx_"]{margin-bottom: 75px;position: relative;top: 0;}

.shadow{position: absolute;top: 0;bottom: 0;left: 0;right: 0;}
.backgroundbox{background-image: linear-gradient(to top, #00000077 0%, transparent 50%);z-index: 9;}

/*Icons für Kontakt*/
.kontakt a{margin-bottom: 10px;}
a.tel{position: relative;left: 30px;}
a.tel::before{content:'';width:20px;height:20px;display:block;background:url('src/media/icons/phone-white.png');background-repeat:no-repeat;background-size:100%;background-position:center;position:absolute;top:3px;left:-30px;transition: all ease .3s;}
a.mail{position: relative;left: 30px;}
a.mail::before{content:'';width:20px;height:20px;display:block;background:url('src/media/icons/mail-white.png');background-repeat:no-repeat;background-size:100%;background-position:center;position:absolute;top:3px;left:-30px;transition: all ease .3s;}
a.tel-green{position: relative;left: 30px;}
a.tel-green::before{content:'';width:20px;height:20px;display:block;background:url('src/media/icons/phone-green.svg');background-repeat:no-repeat;background-size:100%;background-position:center;position:absolute;top:3px;left:-30px;transition: all ease .3s;}
a.mail-green{position: relative;left: 30px;}
a.mail-green::before{content:'';width:20px;height:20px;display:block;background:url('src/media/icons/mail-green.svg');background-repeat:no-repeat;background-size:100%;background-position:center;position:absolute;top:3px;left:-30px;transition: all ease .3s;}

table{width: 100%;}
/*
--------------------------Social Media Sidebar--------------------------
*/
body > .socialmedia-sidebar{right: 0;position: fixed;background-color: var(--sec);top: calc(100% - 70%);z-index: 99999;border-top-left-radius: 10px;border-bottom-left-radius: 10px;}
body > .socialmedia-sidebar ul{padding-left: 0;}
body > .socialmedia-sidebar ul a{height: 100%;width:100%;display: block;}
body > .socialmedia-sidebar ul li{position: relative;text-align: center;width: 50px;height: 45px;}
body > .socialmedia-sidebar ul li.instagram a::before{content:'';width:20px;height:20px;display:block;background:url('src/media/icons/instagram-white.png');background-repeat:no-repeat;background-size:100%;background-position:center;position:absolute;top:17.5px;left:17px;right: 0;transition: all ease .3s;}
body > .socialmedia-sidebar ul li.facebook a::before{content:'';width:15px;height:27px;display:block;background:url('src/media/icons/facebook-white.png');background-repeat:no-repeat;background-size:100%;background-position:center;position:absolute;top:12.5px;left:19px;right: 0;transition: all ease .3s;}
body > .socialmedia-sidebar ul li.youtube::before{content:'';width:20px;height:20px;display:block;background:url('src/media/icons/youtube-white.png');background-repeat:no-repeat;background-size:100%;background-position:center;position:absolute;top:0;left:-0;right: 0;transition: all ease .3s;}
body > .socialmedia-sidebar ul li.whatsapp::before{content:'';width:20px;height:20px;display:block;background:url('src/media/icons/whatsapp-white.png');background-repeat:no-repeat;background-size:100%;background-position:center;position:absolute;top:0;left:-0;right: 0;transition: all ease .3s;}


/*
--------------------------Newsletter--------------------------
*/
.newsletter {z-index: 100;position: fixed;top: calc(100% - 70%);}
.newsletter .klein {display: none;transition: all ease .3s;}
.newsletter .klein.active {display: block;position: absolute;height: 160px;width: 50px;background-color: var(--sec);text-align: center;border-top-right-radius: 10px;border-bottom-right-radius: 10px;}
.newsletter .klein.active span, .newsletter .klein.active button{ all:unset;color: #fff;top: 90px;position: relative;font-weight: 700;}
.newsletter .klein.active span.text {display: block;transform: rotate(-90deg);margin-bottom: 10px;text-transform: uppercase;cursor: pointer;}
.newsletter .klein.active button.close {cursor: pointer;}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

.newsletter .gross {display: none;transform: translateX(-100%);opacity: 0;transition: transform 0.5s ease-out, opacity 0.5s ease-out;}
.newsletter .gross.active {background-color: var(--sec);padding: 50px;box-shadow: 0 9px 10px #00000055;display: flex;width: 50%;position: relative;transform: translateX(0);opacity: 1;animation: slideIn 0.5s ease-out forwards;}
.newsletter .gross:not(.active) {animation: slideOut 0.5s ease-out forwards;}
.newsletter .gross.active button.close {all:unset;position: absolute;right: 20px;color: #fff;font-weight: 700;cursor: pointer;top: 15px;}
.newsletter .gross.active button, .newsletter .gross.active span {color: #fff;}
.newsletter .gross.active .form {color: #fff;}
.newsletter .gross.active .form input {display: block;width: 100%;margin-bottom: 15px;padding: 10px 15px;}
.newsletter .gross.active .content img {display: block;}
.newsletter .gross.active .content {padding-right: 20px;}

/*
--------------------------Header--------------------------
*/
#page-header{position: sticky;top: 0;right: 0;left: 0;padding: 0 0 30px;z-index: 99!important;background-color: #fff;transition: all 0.5s ease-in-out;margin-bottom: 20px;}

#page-header .bunt{position: relative;top: 0;}

#page-header .logo a{display: block;height: max-content;}
#page-header .logo img{aspect-ratio: 16 / 6;}

#page-header .menu-suche{padding-bottom: 15px;display: flex;justify-content: flex-end;align-items:center;transition: all .2s ease-in-out;position: relative;z-index: 100;}
#page-header .menu-suche .suche{width: 643px;margin-right: 50px;}
#page-header .menu-suche img.forum{height: 50px;width: auto;margin-right: 20px;}
#page-header .menu-suche img.react{height: 30px;width: auto;}
#page-header .menu-suche .suche ul.icons{display: none!important;}

#page-header .navigation .menu .submenu-toggle{background: unset;border: unset;width: 1rem; color:var(--sec); aspect-ratio: 1/1;  background-image: url('src/media/icons/arrow-up.png');  display: inline-block;  background-position: center;  background-repeat: no-repeat;  background-size: contain;  transform: rotate(180deg) translateY(-22%);  margin-left: 5px;  filter: brightness(0) saturate(100%);margin-left: -10px;}

/* #page-header .navigation .menu .menu-item-has-children.active .submenu-toggle{transform: rotate(-180deg);transition: 0.3s;}
#page-header .navigation .menu .sub-menu{display: none;}
#page-header .navigation .menu .menu-item-has-children.active .sub-menu{display: block;padding-left: 20px;}
#page-header .navigation .menu .sub-menu li a{opacity: 0.7;font-size: 100%;} */


/* #page-header .navigation{position: absolute;right: 15px;} */
#page-header .navigation .menu{display: flex;padding-right: 30px;}
#page-header .navigation .menu li a{padding: 10px 13.5px;color: var(--black);text-transform: uppercase;font-weight: 600;}
#page-header .navigation .menu li a:hover{color: var(--prime);}
#page-header .navigation .menu li.current_page_item a{font-weight: 700;color: var(--prime);}
#page-header .navigation .menu li:last-child a{padding-right: 23px;}
#page-header .navigation ul a li{padding: 0 15px;}

#page-header .navigation .menu .sub-menu{display: none;padding: 0;background-color: #fff;transition: all ease .3s;box-shadow: 0 15px 16px #00000011;margin-left: 15px;}
#page-header .navigation .menu .sub-menu li{border-bottom: solid 1px #D1D1D1;display: flex;align-items: center;transition: all ease .3s;}
#page-header .navigation .menu .sub-menu li:last-child{border-bottom: none;}
#page-header .navigation .menu .sub-menu li:hover{background-color: var(--prime);transition: all ease .3s;}
#page-header .navigation .menu .sub-menu li a{padding: 10px 20px 10px 20px;width: 100%;}
#page-header .navigation .menu .sub-menu li:hover a{color: #fff;transition: all ease .3s;}
#page-header .navigation .menu li.current_page_item .sub-menu li a{color: var(--black);transition: all ease .3s;}
#page-header .navigation .menu li.current_page_item .sub-menu li:hover a{color: #fff;}
#page-header .navigation .menu .sub-menu li.current-menu-item{background-color: var(--prime);transition: all ease .3s;}
#page-header .navigation .menu .sub-menu li.current-menu-item a{color: #fff;}
/* #page-header .navigation .menu li.menu-item-has-children > a::after{content: '';width: 1rem; aspect-ratio: 1/1;background-image: url('src/media/icons/arrow-up.png');display: inline-block;background-position: center;background-repeat: no-repeat;background-size: contain;transform: rotate(180deg) translateY(-22%);margin-left: 5px;filter: brightness(0) saturate(100%);} */
#page-header .navigation .menu li.menu-item-has-children:hover .sub-menu,#page-header .navigation .menu li.menu-item-has-children.active .sub-menu{display: block;position: absolute;top: 20;width: max-content;padding-top: 20px;transition: all ease .3s;}

#page-header .menuburgerbutton{display: none;width:40px;height: 40px;cursor: pointer;  -webkit-transform: rotate(0deg);  -moz-transform: rotate(0deg);  -o-transform: rotate(0deg);  transform: rotate(0deg);  -webkit-transition: .5s ease-in-out;  -moz-transition: .5s ease-in-out;  -o-transition: .5s ease-in-out;  transition: .5s ease-in-out;  cursor: pointer;z-index: 100;}
#page-header .menuburgerbutton span{margin: 8px 0; display: block;height: 4px;border-radius: 4px;width: 100%;background: var(--sec);opacity: 1;right: 6%;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;}
#page-header .menuburgerbutton.active span:nth-child(1) {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);margin-top: 12.5px;background: var(--sec);}
#page-header .menuburgerbutton.active span:nth-child(2){display: none;}
#page-header .menuburgerbutton.active span:nth-child(3) {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);margin-top: -11.5px;background: var(--sec);}


#page-header .cart-count{position: absolute;background-color: var(--prime);color: #fff;padding: 1px;border-radius: 100%;line-height: 1rem;top: 0;right: 0;transform: translate(50%,-50%);font-size: .8rem;aspect-ratio: 1 / 1;width: 20px;text-align: center;}

#page-header .menu-mobile .menu{margin-top:100px;}

#page-header.scrolled{box-shadow: 0px 0px 15px -3px rgba(0,0,0,0.3);padding: 0;transition: all 0.5s ease-in-out;}
#page-header.scrolled .row{align-items: center;}
/* #page-header.scrolled .navigation{bottom: 15px;} */
#page-header.scrolled .navigation .menu, #page-header.scrolled .navigation ul.icons{margin-bottom: 0!important;}
#page-header.scrolled .navigation .menu-menu-container{display: flex;align-items: center;}
#page-header.scrolled .bunt{margin-bottom: 10px;}

#page-header .logo img{width: 230px!important;height: auto!important;}




@keyframes fadein {
    from { top: -100px; }
    to   { top: 0; }
}
@-moz-keyframes fadein {
    from { top: -100px; }
    to   { top: 0; }
}
@-webkit-keyframes fadein {
    from { top: -100px; }
    to   { top: 0; }
}
@-ms-keyframes fadein {
    from { top: -100px; }
    to   { top: 0; }
}

/*
--------------------------Pagefooter--------------------------
*/
#page-footer{background: #fff;padding: 0 0 10px;position: relative;}
#page-footer *{font-size: 17px;}
#page-footer a{display: block;height: max-content;}
#page-footer span strong{font-size: 140%;font-weight: 700;}
#page-footer .offnungszeiten, #page-footer .kontakt{margin-top: 10px;}
#page-footer .standort{font-weight: 700;}
#page-footer .offnungszeiten div{display: flex;}

#page-footer a:hover{color: var(--prime);}
#page-footer .unten{border-top: 1px solid var(--grey);margin-top: 20px;padding-top: 10px;}
#page-footer .footer-menu ul{padding-left: 0;display: flex;justify-content: end;}
.rechtliches{color: var(--grey);font-size: 90%;}
#page-footer .footer-menu ul li a{padding: 0 10px;color: var(--grey);border-right: 1px solid var(--grey);font-size: 90%;}
#page-footer .footer-menu ul li:last-child a{padding-right: 0;border-right: none;}

#page-footer #backtotop{transform: rotate(-90deg);display: block;color: var(--grey);font-weight: 700;left: 63%;top:40px;position: relative;max-width: 100px;}
#page-footer #backtotop::before{content:'';width:20px;height:20px;display:block;background:url('src/media/icons/arrow-up.png');background-repeat:no-repeat;background-size:100%;background-position:center;position:absolute;top:3px;right:0px;transition: all ease .3s;transform: rotate(90deg);}
#page-footer #backtotop:hover::before{content:'';width:20px;height:20px;display:block;background:url('src/media/icons/arrow-up.png');background-repeat:no-repeat;background-size:100%;background-position:center;position:absolute;top:3px;right:-5px;transition: all ease .3s;transform: rotate(90deg);}

/*
Buntes Gestaltungselement --> .bunt
*/
.bunt {
margin-bottom: 30px;
height: 12px;
transition: all ease .5s;
background-image: linear-gradient(to right,
    #004695 0, 
    #004695 calc(100% / 16), 
    #522178 calc(100% / 16), 
    #522178 calc(100% / 16 * 2), 
    #C01453 calc(100% / 16 * 2), 
    #C01453 calc(100% / 16 * 3), 
    #DF0A14 calc(100% / 16 * 3), 
    #DF0A14 calc(100% / 16 * 4), 
    #E22D13 calc(100% / 16 * 4), 
    #E22D13 calc(100% / 16 * 5), 
    #EA6707 calc(100% / 16 * 5), 
    #EA6707 calc(100% / 16 * 6), 
    #F39100 calc(100% / 16 * 6), 
    #F39100 calc(100% / 16 * 7), 
    #FFC500 calc(100% / 16 * 7), 
    #FFC500 calc(100% / 16 * 8), 
    #E5DD00 calc(100% / 16 * 8), 
    #E5DD00 calc(100% / 16 * 9), 
    #7BB421 calc(100% / 16 * 9), 
    #7BB421 calc(100% / 16 * 10), 
    #5AAA29 calc(100% / 16 * 10), 
    #5AAA29 calc(100% / 16 * 11), 
    #1D9731 calc(100% / 16 * 11), 
    #1D9731 calc(100% / 16 * 12), 
    #00773C calc(100% / 16 * 12), 
    #00773C calc(100% / 16 * 13), 
    #16B1E3 calc(100% / 16 * 13), 
    #16B1E3 calc(100% / 16 * 14), 
    #007BB8 calc(100% / 16 * 14), 
    #007BB8 calc(100% / 16 * 15), 
    #004695 calc(100% / 16 * 15), 
    #004695 100%);
}