/*
 * CSS Änderungen von ARA-Marketing für Shop Version 5.2.2 Template  hover #fc01b5*/

body {font-family: 'Merriweather', 'Noto Sans', 'Open Sans', sans-serif;}



.container-fluid-xl {
    max-width: 90.125rem;
}

header .navbar-toggler {
    color: #fff;
}

/*Schrift für input-Group - da sonst verwicklungen*/
.input-group{font-family: 'Open Sans', sans-serif;}


/*Schriftfarben*/
 a {color: grey; }
 a:hover {color: #fc01b5;}
.btn:hover{color:#fc01b5;}

/*Farbe Balken unter Kategorie-Navigation-Top*/
header .navbar-nav > .nav-item > .nav-link::before {
    border-width: 0 0 6px;
    border-color: #fc01b5;
    transition: width 0.4s;
   }
/*Farbe Balken unter Kategorie-Navigation-Links*/ 
aside .nav-panel > .nav > .active > .nav-link {
    border-bottom: 0.375rem solid #fc01b5;
    cursor: pointer;
}

/*Farbe der Schrift - > Main-Navigation Megamenü*/
.navbar-expand-lg .navbar-nav a{color: #fc01b5;}
.navbar-expand-lg .navbar-nav a:hover {color: #000 !important;}

/*Farbe Balken unter Seitenzahl-Anzeige-Breadcrump*/
.page-item.active .page-link::after, .page-item.active .page-text::after {
    border-bottom: 4px solid #013ADF;
}
/*Farbe Balken unter Seitenzahl-Anzeige-Tab-Artikeldetailansicht*/
.tab-navigation .nav-link::after {
    border-width: 0 0 6px;
    border-color: #fc01b5;
}
/*Farbe Swatches Artikeldetailansicht*/
.swatches-text.active {
    border: 1px solid #fc01b5;
	background-color: #f5f7fa;}	
/*Buttonfarbe*/
.btn-primary {background-color: #FAAC58; border-color: #f2f2f2;}
.btn-primary:hover {background-color: #f2f2f2; border-color: #013ADF;}
.btn-outline-primary { border-color: #fc01b5;}											  

/*Farbe Preisspanne-Slider */
 .noUi-horizontal .noUi-connect {background: #013ADF;}
 .noUi-horizontal .noUi-handle {background: #F8BF00;box-shadow: 0px 0px 0px 5px rgba(248, 191, 0, 0.5);}
  
/*Farbe Header-Top- Bar Megamenü */
#header-top-bar a, header a {text-decoration: none;color: #fff; }
#header-top-bar a:hover:not(.dropdown-item):not(.btn), header a:hover:not(.dropdown-item):not(.btn) {color: #fc01b5;}

/*Farbe Dropdowns von Header-top-bar-Menü */
#header-top-bar a.dropdown-item {text-decoration: none;color: #000;}
#header-top-bar a.dropdown-item:hover{text-decoration: none;color: #fc01b5;}

/*Farbe Dropdowns von Header-top-bar-Menü */
#shop-nav a.dropdown-item {text-decoration: none;color: #000;}
#shop-nav a.dropdown-item:hover{text-decoration: none;color: #fc01b5;}

/*Farbe Logo-Zeichen Anmelden & Warenkorb & Wunschliste */
header .nav-right .nav-link {color: #9b4343;}
header .nav-right .nav-link :hover{color: #ff0000;}

#header-top-bar header .nav-right .nav-link .dropdown-item {color: #fff000 !important; }

header .dropdown-menu a{color: #000; }
header a.dropdown-item {text-decoration: none;color: #000;}
#shop-nav .cart-dropdown a{color: #000;}

/*Hintergrundfarbe des Headers */
header {background-image: none; background: #b6ffd2; padding-top:0px;}

/* opc-Menü Einstellungen, da immer im Weg :-) */   
@media (min-width: 992px) {#opc #opc-startmenu button { margin-top:25px;}}
@media (max-width: 991px) {#opc #opc-startmenu button { display:none;}}

/* Logo Größe 
@media (min-width: 992px) {header .navbar-brand img {height: 3.0rem; width: auto; margin-top:5px;}}

@media (max-width: 991.98px) {header .navbar-brand img {height: 3.40rem; width: auto; margin-top:5px; margin-left:25px;}}
*/
header .navbar-brand img { max-width: 50vw;  object-fit: contain;  width: auto;}

/* Abhängig von Logogröße das Sticky-top -> height ändern 
@media (min-width: 992px) {header.sticky-top { top: 30px; padding-top: 0px; min-height: 160px;}}

@media (max-width: 991.98px) {header.sticky-top { top: 0px; padding-top: 0px; height: 140px;}}

@media (max-width: 767.98px) {header.sticky-top { top: 0px; padding-top: 0px; height: 140px; position:relative}}
*/
/* Abhängig von Logogröße das mainNavigation das margin-top ändern 
@media (min-width: 991.98px) {#mainNavigation {margin-top:90px;}}*/
   
/*Suche nach unter LG-Modus 
@media (max-width: 991.98px)
{.navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl {
    padding-right: 0;
    padding-left: 0;
	margin-top: 25px;
}}*/
 
/*Main-Wrapper runter  
@media (min-width: 991.98px){#main-wrapper {margin-top: 30px;}}
*/
/*Search Form im Mobile*/
.search-form-wrapper-fixed { padding-top: 2.5rem;}

/* Änderungen in top bar */
#header-top-bar {
	color:#fff;
	background-color: #2D3134;
	
	left:0;
	right:0;
	z-index:1049;
}

#header-top-bar .nav-link {
  padding: 0.3rem 1rem;
}
/* Striche zwischen den Items */
li.nav-item::after {color:#424242;}

#header-top-bar  li.nav-item a{margin-top:2px; font-size:90%;}

/*Eigene Head-Info vom Template */

.ara-headinfo {margin-top:7px; text-decoration: none; font-size: 90%; }
.ara-headinfo li {margin-right:20px; text-decoration: none;}

.ara-headinfo .fa-phone {color:#f2f2f2;}
.ara-headinfo .fa-envelope {color:#f2f2f2;}										
.ara-language {margin-top:-5px;}

#language-dropdown a{color: #000;}
#language-dropdown.dropdown-menu {padding-left:5px; padding-bottom:2px}

/*
@media (min-width: 992px) {#shop-nav {right:20px; top:10px;}}
@media (min-width: 1500px) {#shop-nav {right:140px; top:10px;}}
@media (min-width: 992px) {.toggler-logo-wrapper .logo-wrapper {position: absolute;}}
@media (min-width: 992px){.align-items-lg-end {align-items: flex-start!important;}}
@media (min-width: 1300px) {.container { max-width: 103.125rem;}}
*/

/* Burger-Menü Einstellungen unter 992px
.navbar-toggler .navbar-toggler-icon { margin-top: -7px;}
@media (min-width: 520px) {.toggler-logo-wrapper .burger-menu-wrapper {border: 0px solid #ff0000; background-color:#f2f2f2; width:135px; height:35px; margin-top:0.5rem; padding-top:0rem}}
@media (min-width: 520px) {.ara_bur {position:relative; color:#525252; font-size: 0.7rem; top: 0px; left:5px; }}
*/

/*Dropdown von der mainNavigation*/
#mainNavigation .dropdown-body:last-child {
    width: 90%;
    border: 1px solid #f2f2f2;
    background: transparent;
    margin: auto;
	background-image:linear-gradient(to top, #D8D8D8 7%, white 78%);
}

/* Hintergrund der Schrift im Dropdown-Menü transparent */ 
.categories-recursive-dropdown.dropdown-menu {background-color: transparent;}


#shop-nav .dropdown-menu {border: 1px solid #BDBDBD;}

/*Einstellungen Kategorie-Navigation oben */
.nav-mobile-body {background-color: transparent; margin-top:20px;}
@media (min-width: 992px) {.nav-mobile-body ul {margin-top:10px; overflow: hidden;}}

.nav-mobile-body .navbar-nav {margin-top: 1px;}

@media (min-width: 992px) {header .navbar-nav > .nav-item > .nav-link {height: 45px; padding-top:24px}}

/*Mega-Menü-Navigation, ohne unterkategorien */

#mainNavigation .nav-link {   display: flex;  justify-content: space-between;   align-items: center;   flex-wrap: nowrap;}

#mainNavigation .nav-item .nav-scrollbar-item {align:center;}

/*Pfeile im Megamenü */
#mainNavigation .nav-scrollbar-arrow.right {background-image:linear-gradient(rgba(0, 0, 0, 0.00) 100%, #ffffff 100%)}
.fa-chevron-right:before { content: "\f101"; color: #ff0000; background-color:transparent;}

#mainNavigation .nav-scrollbar-arrow.left {background-image:linear-gradient(rgba(0, 0, 0, 0.00) 100%, #ffffff 100%)}
.fa-chevron-left:before { content: "\f100"; color: #ff0000; background-color:transparent;}

/* Sicher-bezahlen-Text oben bei Bestellvorgang -> im Template dann doch rausgenommen*/
#jtl-nav-wrapper > div > nav > div.secure-checkout-icon.ml-auto-util.ml-lg-0 > i {margin-left: 350px;}

/*Schrift im Open-Menü unter LG-Modus */
#mainNavigation > div.nav-mobile-header.d-lg-none > div > div.col.col-auto.nav-mobile-header-name.ml-auto-util > a {color: #000;}

/* Artikeldetailseite - Kasten, wenn in den Warenkorb gelegt */
#pushed-success {
	border: 1px solid #8C8C8C;
	-webkit-box-shadow: 5px 5px 4px -1px rgba(206,232,209,0.89); 
	box-shadow: 5px 5px 4px -1px rgba(206,232,209,0.89);
}

/*Artikeldetailseite - Menge und Warenkorbbutton*/
@media (min-width: 992px) and (max-width:1250px) {#add-to-cart .col-sm-6 {flex: 0 0 100%; max-width:90%; margin-top:5px;}}


#pushed-success img{max-width: 130px; height:auto;}

/* Modaler Hintergrund - Einstellung über JS */
.modal-backdrop { background-color: #f2f2f2;}


/*Side-Navigation*/
#sidepanel_left .nav-panel a:hover{color: #fc01b5; font-weight: bold;}
#sidepanel_left .nav-link .dropdown-toggle a{color: #fc01b5; font-weight: bold;}

#sidepanel_left .nav-item.dropdown.active > span a{color: #fc01b5; font-weight: bold;}
#sidepanel_left .nav-item.active > a{color: #fc01b5; font-weight: bold;}


/*Newsletter Einstellungen */
#footer .newsletter-footer-heading {color:#fc01b5;}
#footer .btn:hover {color: #000;}
#footer .input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text, .input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child)  {background-color: #fc01b5;}

@media (min-width: 992px) {.newsletter-footer {border: 1px solid #f2f2f2;}}
@media (min-width: 992px) {#footer .newsletter-footer {padding: 15px;}}

/*Kategorien unten bei Warenkorb runter geschoben */
@media (max-width: 991.98px) {.card-body {margin-top: 50px;}}


/* footer */

#footer {
	background-color: #585858;
    color: #fff;
}

#footer a:not(.btn), #footer .productlist-filter-headline, #footer .newsletter-footer-heading, #footer .btn-outline-primary {
    color: #fff;}
#footer a{color: #fff;}
#footer a:hover {color: #fc01b5;}

#footer .productlist-filter-headline {
	color:#fff; 
	border-bottom: 1px solid #f2f2f2;
	padding-bottom: 8px;
}


/*Vergleichsliste Einstellungen */
.comparelist .sticky-top { top: 0px;}


/*social-media-buttons*/
.btn-icon-secondary {border-color:#f2f2f2;}

/*Warenkorb-Form*/
 .input-group-prepend {background-color: #F5D0A9;}
 .input-group-append {background-color: #F5D0A9;}
#quantity-grp .input-group-text.unit.form-control {background-color: #FBF8EF !important;}


/*Einstellungen Warenkorb  -> Text über Breite*/
@media (min-width: 1200px) {.cart-items-body .list-unstyled {width: 430px; padding-top:15px;}}
@media (min-width: 600px) {.cart-items-body .partlist-items {width: 420px; }}
.cart-items-body .fa-heart:before {content: "\f004"; color: green;}
.fa-trash-alt:before {content: "\f2ed"; color: red;}

/* Bestellablauf - Farben */
.badge-primary { color: #525252; background-color: #9ad19e; }
.stepper .step-active .step-content::after {background:#9ad19e; }
.checkout-steps .step-check {color: #9ad19e;}
.custom-control-input:checked ~ .custom-control-label::before { color: #ffffff;  border-color: #9ad19e; background-color: #9ad19e;}

@media (max-width: 991.98px) {header .navbar-collapse {background: #b6ffd2;}}


/******************* Einstellungen Slogan ****************************/
div#ara_slogan {
    float: right;
    font-size: 19px;
    margin-right: 20px;
    text-transform: uppercase;
    width: 100%;
}
div#ara_slogan div.adopt {
}
div#ara_slogan div {
    float: right;
    font-family: Georgia,Times,"Times New Roman",serif;
}
div#ara_slogan div.adapt {
    color: #0178a3;
    margin: 0 4px;
}
div#ara_slogan div.improve {
}
@media (max-width: 480px) {#ara_slogan {margin-top: 10px;}}