/*
 * Platz für eigene Änderungen direkt als CSS
 * Die hier gemachten Änderungen überschreiben ggfs. andere Styles, da diese Datei als letzte geladen wird.
 */
 
 /**********************/
 /* Schrift-Definition */
 /**********************/
 
 /*!
 * Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("../../../NOVA/themes/base/fontawesome/webfonts/fa-brands-400.eot");
  src: url("../../../NOVA/themes/base/fontawesome/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../../../NOVA/themes/base/fontawesome/webfonts/fa-brands-400.woff2") format("woff2"), url("../../../NOVA/themes/base/fontawesome/webfonts/fa-brands-400.woff") format("woff"), url("../../../NOVA/themes/base/fontawesome/webfonts/fa-brands-400.ttf") format("truetype"), url("../../../NOVA/themes/base/fontawesome/webfonts/fa-brands-400.svg#fontawesome") format("svg");
}
.fab {
  font-family: "Font Awesome 5 Brands";
}

/*!
 * Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../../NOVA/themes/base/fontawesome/webfonts/fa-regular-400.eot");
  src: url("../../../NOVA/themes/base/fontawesome/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../../../NOVA/themes/base/fontawesome/webfonts/fa-regular-400.woff2") format("woff2"), url("../../../NOVA/themes/base/fontawesome/webfonts/fa-regular-400.woff") format("woff"), url("../../../NOVA/themes/base/fontawesome/webfonts/fa-regular-400.ttf") format("truetype"), url("../../../NOVA/themes/base/fontawesome/webfonts/fa-regular-400.svg#fontawesome") format("svg");
}
.far {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
}

/*!
 * Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../../../NOVA/themes/base/fontawesome/webfonts/fa-solid-900.eot");
  src: url("../../../NOVA/themes/base/fontawesome/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../../../NOVA/themes/base/fontawesome/webfonts/fa-solid-900.woff2") format("woff2"), url("../../../NOVA/themes/base/fontawesome/webfonts/fa-solid-900.woff") format("woff"), url("../../../NOVA/themes/base/fontawesome/webfonts/fa-solid-900.ttf") format("truetype"), url("../../../NOVA/themes/base/fontawesome/webfonts/fa-solid-900.svg#fontawesome") format("svg");
}
.fa,
.fas {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local("OpenSans-Regular"), local("OpenSans-Regular"), url("../../../NOVA/themes/base/fonts/opensans/open-sans-regular.eot?") format("eot"), url("../../../NOVA/themes/base/fonts/opensans/open-sans-regular.woff2") format("woff2"), url("../../../NOVA/themes/base/fonts/opensans/open-sans-regular.woff") format("woff"), url("../../../NOVA/themes/base/fonts/opensans/open-sans-regular.ttf") format("truetype"), url("../../../NOVA/themes/base/fonts/opensans/open-sans-regular.svg#Open_Sans") format("svg");
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  src: local("OpenSans-Semibold"), local("OpenSans-Semibold"), url("../../../NOVA/themes/base/fonts/opensans/open-sans-600.eot?") format("eot"), url("../../../NOVA/themes/base/fonts/opensans/open-sans-600.woff2") format("woff2"), url("../../../NOVA/themes/base/fonts/opensans/open-sans-600.woff") format("woff"), url("../../../NOVA/themes/base/fonts/opensans/open-sans-600.ttf") format("truetype"), url("../../../NOVA/themes/base/fonts/opensans/open-sans-600.svg#Open_Sans") format("svg");
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  src: local("Montserrat"), local("Montserrat"), url("../../../NOVA/themes/base/fonts/montserrat/Montserrat-SemiBold.eot?") format("eot"), url("../../../NOVA/themes/base/fonts/montserrat/Montserrat-SemiBold.woff2") format("woff2"), url("../../../NOVA/themes/base/fonts/montserrat/Montserrat-SemiBold.woff") format("woff"), url("../../../NOVA/themes/base/fonts/montserrat/Montserrat-SemiBold.ttf") format("truetype"), url("../../../NOVA/themes/base/fonts/montserrat/Montserrat-SemiBold.svg#Montserrat") format("svg");
  font-display: swap;
}

/* Ende Schrift-Definition */

/**********/
/* Farben */
/**********/

:root {
    /* Colors */
    --main: #cb2828;
    --main-rgb: 203, 40, 409;
    --main-lighten: #fcad93;

    --light: #efefef;
    --dark: #242422;

    --alert-danger: #E8CCD2;
    --alert-danger-font: #b90000;
    --alert-success: #cee8d1;
    --alert-success-font: #1C871E;

    --badge-primary: var(--main);
    --badge-primary-font: #ffffff;
    --badge-seconday: #525252;
    --badge-secondary-font: #ffffff;

    --button-font: #ffffff;
    --button-lighten-font: #525252;

    --footer-font: #ffffff;
}

a:hover {
    color: var(--main);
}

/**********/
/* Alerts */
/**********/

.alert-danger {
    color: var(--alert-danger-font);
    background-color: var(--alert-danger);
    border-color: var(--alert-danger);
}

.alert-success {
    color: var(--alert-success-font);
    background-color: var(--alert-success);
    border-color: var(--alert-success);
}

/**********/
/* Badges */
/**********/

.badge-primary {
    background-color: var(--badge-primary);
    color: var(--badge-primary-font);
}

.badge-secondary {
    background-color: var(--badge-seconday);
    color: var(--badge-secondary-font);
}

.fa-sup {
    background-color: var(--badge-primary);
    color: var(--badge-primary-font);
}

/***********/
/* Buttons */
/***********/

.btn {
    transition: all 0.15s ease-in-out;
}

.btn-link:hover {
    color: var(--main);
}

.btn-primary {
    background-color: var(--main);
    border-color: var(--main);
    color: var(--button-font);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle, .show > .btn-primary[data-toggle=collapse]:not(.navbar-toggler) {
    background-color: var(--main);
    border-color: var(--main);
}

.btn-primary:hover {
    background-color: var(--main);
    border-color: var(--main);
    filter: brightness(1.1);
    color: var(--button-font);
}

.btn-outline-primary {
    border-color: var(--main);
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle,
.show > .btn-outline-primary[data-toggle=collapse]:not(.navbar-toggler) {
    border-color: var(--main);
    background-color: var(--main);
}

.btn-outline-primary:hover {
    background-color: var(--main-lighten);
    border-color: var(--main);
}

/****************************/
/* Checkbox / Form / Select */
/****************************/

.form-control:focus {
    border-color: var(--main);
}

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--main);
    background-color: var(--main);
}

.custom-select:focus {
    border-color: var(--main);
    box-shadow: 0 0 0 0.2rem rgba(var(--main-rgb), 0.25);
}

/*********/
/* Modal */
/*********/

.modal-header .close:hover {
    background-color: var(--main);
}

/**********/
/* Header */
/**********/

#header-top-bar a:hover:not(.dropdown-item):not(.btn),
header a:hover:not(.dropdown-item):not(.btn) {
    color: var(--main);
}

@media (min-width: 992px) {
    header .navbar-nav > .nav-item > .nav-link::before {
        border-color: var(--main);
    }
}

/************/
/* Homepage */
/************/


/***************/
/* Productlist */
/***************/

aside .nav-panel > .nav > .active > .nav-link {
    border-color: var(--main);
}

.noUi-horizontal .noUi-connect {
    background: var(--main);
}

.noUi-horizontal .noUi-handle {
    background-color: var(--main);
    box-shadow: 0px 0px 0px 5px rgba(var(--main-rgb), 0.5);
}

.page-item.active .page-link:after, .page-item.active .page-text:after {    
    border-bottom: 4px solid var(--main);
}

.page-link:hover, .page-text:hover {    
    color: var(--main);
}

/******************/
/* Productdetails */
/******************/

.estimated-delivery:hover .estimated-delivery-info {
    color: var(--main);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    border-color: var(--main);
}

.tab-navigation .nav-link::after {
    border-color: var(--main);
}

/************/
/* Checkout */
/************/

.stepper .step-active .step-content::after {
    background: var(--main);
}

.checkout-steps .step-check {
    color: var(--main);
}

/***********/
/* Account */
/***********/

.account-head-data .account-head-data-credit {
    border-color: var(--main);
}

/**********/
/* Footer */
/**********/

/*#footer {
    background-color: var(--dark);
    color: var(--footer-font);
}

#footer a {
    color: var(--footer-font);
}

#footer a:hover {
    color: var(--main) !important;
}

#footer .productlist-filter-headline {
    color: var(--main);
}

#footer .nav-link {
    transition: all 0.2s ease-in-out;
}

#footer .nav-link:hover {
    padding-left: 15px;
}

#footer .footnote-vat {
    text-align: center;
}

#footer #copyright {
    background-color: var(--dark);
}*/

/* Ende Farbanpassungen */

/*************/
/* Allgemein */
/*************/

body {
    font-family: Arial, sans-serif;
	background-color: #f5f7fa;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .sidepanel-left .box-normal .box-normal-link, .h4, .h5, .h6 {    
    font-family: Arial, sans-serif;
}

#main-wrapper {
    background: #f5f7fa;
}

.container-lg {
	background-color: #fff;
}

@media (min-width: 1700px) {
	.container-lg {
		max-width: 1600px;
	}
}

/***************/
/* Headerumbau */
/***************/

@media (min-width: 992px) {
	header > .justify-content-between > nav {
		flex: 5;
	}

	header > .justify-content-between > .toggler-logo-wrapper {
		flex: 2;
	}
	
	.toggler-logo-wrapper {		
		z-index: 2000;
	}
	
	.toggler-logo-wrapper .logo-wrapper {
		padding-left: 0;
		position: relative;
	}	
	
	header .navbar-brand {
		margin-right: 0;
		position: absolute;
		left: 0;
		right: 0;
		padding-top: 0;
		padding-bottom: 0;
	}
	
	header .navbar-brand img {
		height: 100px;
	}
}

@media (min-width: 1300px) {
	header .navbar-brand img {
		height: 150px;
	}
}

/*********/
/* Suche */
/*********/

@media (min-width: 992px) {
	#search {
		position: relative;
		width: 226px;
		margin-right: 0;
		overflow: hidden;
	}
	
	#search .search-wrapper {
		position: absolute;
		top: 20px;
		right: -180px;
		width: 180px;
		transition: right linear .4s;
	}
	
	#search .search-wrapper.searchopen {
		right: 46px;
		transition: right linear .4s;
	}
	
	#search .search-wrapper .twitter-typeahead {
		width: 100%;
	}
	
	#search .search-wrapper .form-control {
		padding: 0.325rem 0.325rem;    
		height: auto;
		line-height: 1;
		border: none;
		border-bottom: 1px solid #707070;
	}
	
	#search .search-wrapper .form-control:focus {    
		border-color: #707070;  
		box-shadow: none;	
	}
	
	#search .search-wrapper .form-clear {    
		right: 0;
	}

	#search .search-wrapper .input-group-append {
		display: none;
	}
	
	.search-open {
		position: relative;
		display: block;
		float: right;
		z-index: 1;		
		background-color: #fff;
	}
	
	.search-open:hover {
		cursor: pointer;
		color: #cb2828;
	}
}

/************/
/* Megamenu */
/************/

@media (min-width: 1300px) {
	.nav-scrollbar-item .dropdown-body {
		padding-bottom: 1.5rem;
		padding-top: 4rem;
	}
}

/**************/
/* Startseite */
/**************/

body[data-page="18"] #main-wrapper > div:first-of-type {
	margin-top: 0 !important;
}

/**************/
/* Brotkrumen */
/**************/

.breadcrumb-wrapper {    
	border: none;
	margin-bottom: 1rem;
}

/*****************/
/* Artikelslider */
/*****************/

.slider-product-wrapper {
	background-color: #fff;
	height: calc(100% - 15px);
}

body[data-page="1"] .recommendations {
	margin: 0 -2rem;
	background: #F5F7FA;
	padding: 15px 0;
}

body[data-page="1"] .recommendations .row.slick-type-product {
	margin: 0;
}

.slick-slider-other.is-not-opc {
    margin-bottom: 1rem;
}

.slick-slider-other.is-not-opc .carousel {
    margin-bottom: 1rem;
}

@media (max-width: 991px) {
	.recommendations .slick-type-product .slick-list, .recommendations .slick-type-half .slick-list, .recommendations .slick-type-news .slick-list, .recommendations .slick-type-box .slick-list {
		padding-right: 0;
	}
}

@media (min-width: 768px) {
	.carousel:not(.slick-initialized).slick-type-product .product-wrapper {
		width: calc(100%/3);
		min-width: calc(100%/3);
	}
}

@media (min-width: 992px) {
	.carousel:not(.slick-initialized).slick-type-product .product-wrapper {
		width: calc(100%/4);
		min-width: calc(100%/4);
	}
}

@media (min-width: 1300px) {
	.carousel:not(.slick-initialized).slick-type-product .product-wrapper {
		width: calc(100%/5);
		min-width: calc(100%/5);
	}
}

/********************/
/* Artikelübersicht */
/********************/

.content-cats-small .sub-categories {
    justify-content: flex-start;
}

.productlist-page-nav.productlist-page-nav-header-m {
    margin-top: 1rem;
}

.displayoptions .btn {   
    padding: 5px 20px;
    border-radius: 20px;
}

.displayoptions .btn.btn-outline-secondary {
    border-color: #f5f5f5 !important;
}

body[data-page="2"] #content-wrapper.container-lg {
	background-color: transparent;
}

body[data-page="2"] .btn-outline-secondary {    
    background-color: #fff;
}

.productlist-filter-headline.d-none.d-md-flex {
	display: none !important;
}

.product-wrapper a {
	text-decoration: none;
}

#product-list.row {
	margin-left: -7.5px;
	margin-right: -7.5px;
}

#product-list.row > div {
	padding-left: 7.5px;
	padding-right: 7.5px;
}

#product-list .product-wrapper {
	margin-bottom: 15px !important;
}

#product-list.row > div .productbox-inner {
	padding: 5px;
	height: 100%;
}

#product-list.row .productbox-ribbon.ribbon {
    left: -0.8rem;
}

@media (min-width: 1300px) {
	#product-list.row .productbox.productbox-hover:hover .productbox-ribbon.ribbon {
		left: -1.8rem;
	}
}

/**************/
/* Side_panel */
/**************/

@media (min-width: 992px) {
	.productlist.row {
		position: relative;
	}
	
	#sidepanel_left {
		position: fixed;
		top: 0;
		left: -280px;
		z-index: 1500;		
		padding-right: 15px;
		background-color: #fff;
		border: 1px solid #dee2e6;
		width: 280px;
		max-width: 100%;
		transition: left linear .4s;				
		padding: 0;
	}
	
	#sidepanel_left .side-wrapper {
		padding: 0 15px;
		height: 100vh;
		overflow-y: auto;
		position: relative;
		background-color: #fff;
		z-index: 1;
	}
	
	#sidepanel_left.sideopen {
		left: 0;		
		transition: left linear .4s;
	}
	
	/*.openclose {
		position: absolute;
		top: 30px;
		right: -30px;		
		width: 30px;
		height: 80px;
		line-height: 20px;
		padding: 30px 0;
		text-align: center;
		color: #fff;
		background-color: #cb2828;
		z-index: 1;		
	}
	
	#sidepanel_left > .openclose span {
		transition: transform .4s;
	}
	
	#sidepanel_left.sideopen > .openclose span {
		transform: rotate(180deg);
		transition: transform .4s;
	}
	
	.openclose:hover {
		color: #fff;
		cursor: pointer;
	}*/
	
	#sidepanel_left.sideopen .grey-bg-for-side {	
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgb(0,0,0,0.1);
		display: block;		
		top: 0;
		left: 0;
	}
}

/**************************/
/* Anpassung Detailsseite */
/**************************/

body[data-page="1"] #content {
	padding-bottom: 0;
}

/***************************/
/* Anpassungen Variationen */
/***************************/

.variation.dropdown-item.not-available {
	display: none;
}

/*******************/
/* Anpassungen OPC */
/*******************/

.opc-product-slider {
	margin-right: 0 !important;
	margin-left: 0 !important;
}

/***********/
/* Buttons */
/***********/

.btn-primary:focus, .btn-primary.focus {
    color: #fff;
    background-color: var(--main);
    border-color: var(--main);
    box-shadow: none;
}

/**********/
/* Footer */
/**********/

#footer {
    background-color: #eee;
}

#footer .footnote-vat {
    text-align: center;
}

.h2.newsletter-footer-heading {
	color: #525252;
}