/*
 * Platz für eigene Änderungen direkt als CSS
 * Die hier gemachten Änderungen überschreiben ggfs. andere Styles, da diese Datei als letzte geladen wird.
 */

/****************/
/* Schriftarten */
/****************/

@font-face {
	font-family: "Outfit";
	src: url("fonts/Outfit-VariableFont_wght.ttf") format('truetype');  
	font-display: swap;
}

@font-face {
	font-family: "Fredoka";
	src: url("fonts/Fredoka-VariableFont_wdth,wght.ttf") format('truetype');  
	font-display: swap;
}

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

body {
	font-family: "Outfit", sans-serif;	
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .product-matrix .product-matrix-title, .h3, .sidepanel-left .box-normal .box-normal-link, .h4, .h5, .h6 {
	font-family: "Fredoka", sans-serif;
	font-weight: 700;
	color: #1A191A;
}

header .submenu-headline-toplevel {
    font-family: "Fredoka", sans-serif;	
}

#footer .productlist-filter-headline {
	font-family: "Fredoka", sans-serif;
	font-size: 1rem;
	color: #1A191A;
}

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

.btn-primary {
	color: #fff;  
	border-radius: 25px;  
}

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

.header-rabatt-hinweis {
	background-color: #8dd1c8;
	padding: .25rem 1rem;	
	color: #fff;
}

.header-rabatt-hinweis .fa-info-circle {
	font-size: 1.5rem;
}

header {
	box-shadow: none;
}

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

@media (min-width: 992px) {
	header .nav-right .search-wrapper-dropdown .dropdown-menu {
		width: 400px;
	}
}

/*************/
/* Hauptmenü */
/*************/

@media (min-width: 992px) {
	.navbar.justify-content-start.align-items-lg-end {
		align-items: center !important;
	}
	
	header .navbar-collapse {
		height: auto;
	}
		
	.nav-scrollbar-inner {  
		padding-bottom: 0;
		scrollbar-width: none;
	}

	header .navbar-nav > .nav-item:not(.nav-item-category) > .nav-link::before {
		display: none;
	}	
	
	header .navbar-nav > .nav-item > .nav-link.dropdown-toggle::after, header .navbar-nav > .nav-item > .nav-link:not(.navbar-toggler)[data-toggle="collapse"]::after {
		display: none;
	}

	header .navbar-nav > .nav-item > .dropdown-menu {    
		box-shadow: none;
	}
	
	header a.submenu-headline-toplevel:not(.dropdown-item):not(.btn) {    
		border-bottom: none;
		margin-bottom: .5rem;
		color: #1A191A;
	}		
	
	header .subcategory-wrapper .categories-recursive-dropdown ul.nav {
		padding-left: 1rem;  
		list-style: disc;
	}
	
	header #mainNavigation {
		align-items: center;
	}
	
	header #mainNavigation.nav-scrollbar .nav-item {
		padding-left: .5rem;
		padding-right: .5rem;
		padding-top: .25rem;
		padding-bottom: .25rem;
	}

	.nav-scrollbar-inner {	
		padding-bottom: 0;
	}
	
	header .navbar-nav > .nav-item > .nav-link {   
		padding: .5rem 1.5rem;
	}
	
	header .navbar-nav > .nav-item.nav-item-page > .nav-link {
		padding: .5rem .5rem;
  }
	
	header .navbar-nav > .nav-item.nav-item-category > .nav-link {
		background-color: #8dd1c8;
		color: #fff;		
		border-radius: 25px;
		position: relative;		
	}
	
	header .navbar-nav > .nav-item.nav-item-category > .nav-link::before {
		content: "";
		position: absolute;
		width: 100%;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		border-radius: 25px;
		border: .5rem solid #8dd1c8;
		transform: none;
		transition: all 0.4s;
		margin: 0 auto;
	}
	
	header .navbar-nav > .nav-item.nav-item-category > .nav-link:hover::before {		
		left: -.25rem;
		top: -.25rem;		
		right: -.25rem;
		bottom: -.25rem;
		width: calc(100% + .5rem);
		transition: all 0.4s;
		margin: 0 auto;
	}
}

@media (min-width: 1600px) {
	.toggler-logo-wrapper, #shop-nav {
		width: 350px;
	}
	
	#mainNavigation.nav-scrollbar .navbar-nav {  
		justify-content: center;
	}
}

/***********/
/* Content */
/***********/

body[data-page="18"] #main-wrapper {
	padding-top: 4rem;
}

aside .nav-panel > .nav > .active > .nav-link {
	border-bottom: 1px solid #8dd1c8;
}

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

#footer {	
	padding: 2rem 0 0;
	background-color: #fff;  
}

#copyright > div {  
	text-align: left;
}

/**************************************/
/* Bestellvorgang Felder deaktivieren */
/**************************************/

#checkout .inc-billing-address-form select {
	pointer-events: none;
	user-select: none;
	background-color: #e9ecef;
}

/***************/
/* OPC-Klassen */
/***************/

/* Hero-Banner */

.no-opc .hero-banner-wrapper {
	overflow: hidden;
}

.no-opc .hero-banner {
	position: absolute !important;
	width: 100%;
	top: 0;
	display: none;
}

.no-opc .hero-banner-grid {
	background-color: #fff;
	align-items: flex-start;
}

.no-opc .herobanner-img {
	text-align: center;
}

.no-opc .herobanner-img img {
	max-height: 450px;
	width: auto !important;
	max-width: 100% !important;	
}

@media (min-width: 992px) {
	.no-opc .hero-banner-grid > div:first-of-type {
		order: 1;
	}
}

@media (max-width: 991px) {
	.no-opc .hero-banner-grid > div:first-of-type {
		margin-bottom: 1rem;;
	}
}

.no-opc .hero-banner.open {	
	display: block;
}

.no-opc .hero-banner-close-button {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}

.no-opc .hero-banner-close-button .btn-primary {
	color: #8dd1c8;
	background-color: #fff;	
	padding: .25rem .5rem;
	font-size: 1.2rem;
	border-width: 2px;
	border-radius: 25px;
	display: flex;
	align-items: center;
}

.no-opc .herobanner-title {
	font-size: 80px;
	margin-bottom: 0;
}

.no-opc .herobanner-main-title {
	position: relative;
}

.no-opc .herobanner-main-title:before {
	content: '';
	height: 9px;
	width: 105px;
	display: block;
	background-color: #fff;	
	position: absolute;
	bottom: 34px;
}

.no-opc .herobanner-subtitle {
	color: #1A191A;
	font-size: 32px;
	line-height: 1;
}

.no-opc .herobanner-title-text {
	font-size: 1.125rem;
	min-height: 162px;
	margin-bottom: 1.5rem;
}

.no-opc .hero-banner-link-button button {
	padding: .5rem 2rem;
	font-size: 1rem;
	margin-bottom: 2rem;
}

.no-opc .hero-banner-button-wrapper > div {
	display: flex;
	justify-content: space-between;
}

.no-opc .hero-banner-button-wrapper-div {	
	padding-left: 1rem;
	padding-right: 1rem;
}

.no-opc .hero-banner-button-wrapper-div img {
	max-height: 60px;	
	width: auto !important;
}

.no-opc .hero-banner-link {
	padding: .5rem 1rem;
	border: 2px solid transparent;
	border-radius: 25px;
}

.no-opc .hero-banner-link:hover, .no-opc .hero-banner-link.active  {
	border-color: #8dd1c8;  
}

.no-opc .hero-banner-link:hover {
	cursor: pointer;
}

.no-opc .hero-banner-link-text1 p {
	margin-bottom: 0;
}

.no-opc .hero-banner-slide-wrapper {
	display: none;
}

@media (max-width: 991px) {
	.no-opc .h2-mobile-smaller {
		font-size: 36px !important;
	}
		
	.no-opc .hero-banner-button-wrapper > div {  
		justify-content: normal;
		overflow: hidden;
		align-items: center;	
	}
	
	.no-opc .hero-banner-button-wrapper .hero-banner-button-wrapper-div {
		flex: 0 0 50%;
		max-width: 50%;
		left: 0;
		transition: left .5s ease;
	}
	
	.no-opc .hero-banner-button-wrapper > div > div.hero-banner-button-wrapper-div:nth-of-type(4), .no-opc .hero-banner-button-wrapper > div > div.hero-banner-button-wrapper-div:nth-of-type(5) {
		flex: 0 0 50%;
		max-width: 50%;		
	}
	
	.no-opc .hero-banner-button-wrapper.second .hero-banner-button-wrapper-div {
		left: -100%;
		transition: left .5s ease;
	}
	
	.no-opc .hero-banner-link > div > div {
		text-align: center;
	}
	
	.no-opc .hero-banner-link-text1 {
		font-size: 14px !important;
	}
	
	.no-opc .hero-banner-link-text2 {
		font-size: 10px;
	}		

	.no-opc .hero-banner-slide-wrapper {
		display: block;
		margin-top: -7rem;		
		width: 81px;
		padding: .25rem 0;		
		border-radius: 30px;
		background-color: #e3e3e3;
	}
	
	.no-opc .hero-banner-slide-wrapper > div {
		display: flex;
		justify-content: center;			
	}
	
	.no-opc .hero-banner-slide-check {
		margin-left: .125rem;
		margin-right: .125rem;
		line-height: 1;
	}
	
	.no-opc .hero-banner-slide-check button {
		text-indent: -9999px;
		padding: 0;
		width: 25px;
		height: 25px;		
		border-radius: 50px;
		border: none;
		background-color: #000;
		opacity: .3;
	}
	
	.no-opc .hero-banner-slide-check.active button {
		opacity: 1;
	}
}

/* Second Container */

.no-opc .second-container .img-smaller {
	text-align: center;	
}

.no-opc .second-container .img-smaller img {
	max-width: 350px;	
}

.no-opc .right-side-pre-title {
	color: #8dd1c8;
	font-size: 20px;
	line-height: 1;
}

.no-opc .right-side-pre-title p {
	margin-bottom: .25rem;
}

.no-opc h1.right-side-title {
	font-size: 48px;
}

.no-opc .right-side-text {
	font-size: 20px;
}

/* Third Container */

 .no-opc h2.custom-headline {
	font-size: 48px;
	margin-bottom: .5rem;
 }
 
 .no-opc .custom-text {
	font-size: 20px;
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
 }

/* Fourth Container */

.no-opc .grid-with-margin > .col {
	margin-bottom: 32px;
}

.no-opc .container-with-background {
	height: 100%;
}

.no-opc .container-with-border-radius {
	border-radius: 20px;	
}

.container-with-border {
	border: 2px solid #8dd1c8;
	padding: 1rem;
	border-radius: 20px;
}

.no-opc h2.right-side-title {
	font-size: 30px;
}

.no-opc .p-margin-bottom-0 p:last-of-type {
	margin-bottom: 0;
}

.no-opc .button-wrapper > div {
	display: flex;
	justify-content: space-between;
}

.no-opc .button-wrapper > div .btn {
	width: 105px;
	align-items: center;
}

@media (max-width: 500px) {
	.no-opc .fourth-container .button-wrapper > div {		
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	
	.no-opc .fourth-container .button-wrapper > div .opc-Button {
		flex: 0 0 50%;
		max-width: 50%;
		margin: .5rem 0;
	}
	
	.no-opc .fourth-container .button-wrapper > div .btn {
		display: block;
		margin: 0 auto;
	}
}