/*
 * 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: "Saira";
  src: url("font/Saira-VariableFont_wdth-wght.ttf") format('truetype'); 
  font-display: swap;
}

body {
	font-family: "Saira";
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .productlist-filter-headline, .sidepanel-left .box-normal .box-normal-link, .h4, .h5, .h6 {
	font-family: "Saira";
}

.text-accent, .productbox-price, .tab-navigation .nav-link {
	font-family: "Saira";
}

#footer .productlist-filter-headline {
	font-family: "Saira";
}

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

.btn-primary {
	color: #fff;
}

/********************/
/* Header - Top-bar */
/********************/

#header-top-bar {
	background-color: #fecb10;
	color: #222534;
}

#header-top-bar > .container-fluid {
	justify-content: space-between;
}

#header-top-bar .nav-item span {
	display: inline-block;
	padding: 0.5rem 1rem;
}

#header-top-bar .nav-dividers .nav-item:not(:last-child)::after {	
	border-color: #222534;
}

#header-top-bar a:not(.dropdown-item):not(.btn) {  
	color: #222534;
}

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

/************/
/* Shop-nav */
/************/

header#jtl-nav-wrapper {
	padding-top: .5rem;
	padding-bottom: .5rem;
}

.account-icon-dropdown .dropdown-footer {
	color: #222534;
}

header .account-icon-dropdown .dropdown-footer a:not(.dropdown-item):not(.btn) {
	color: #222534;
}

header .cart-dropdown .cart-dropdown-total-item {
	color: #fff;
}

@media (min-width: 992px) {
	.search-wrapper-dropdown .dropdown-body {
		width: 400px;
	}
}

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

@media (min-width: 992px) {
	header #mainNavigation {
		margin-right: 0;
	}
	
	#mainNavigation .navbar-nav {
		justify-content: flex-end;
	}
}

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

@media (min-width: 992px) {
	#content-wrapper:not(.has-fluid) {
		padding-top: 0;
	}
}

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

#footer {
	background:	linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url('img/sektion_footer.jpg') no-repeat;
	background-size: cover;
	background-position: center top;
	padding-top: 0;
}

#footer .newsletter-wrapper {
	padding: 2rem 1rem;
	background-color: #fecb10;
	color: #222534;
}

#footer .newsletter-footer-heading {
	color: #222534;
	font-size: 2rem;
	font-weight: bold;
}

#footer .newsletter-wrapper a:not(.btn) {
	color: #222534;
}

#footer .newsletter-wrapper hr {
	display: none;
}

#footer .newsletter-footer .form-control {
	border: none;
	border-radius: 10px;
	margin-right: 2rem;
}

#footer .newsletter-footer .btn-secondary {
	border-radius: 10px;
	text-transform: uppercase;
}


#footer .productlist-filter-headline {  
	font-size: 1.5rem;
	font-weight: 400;
	margin-bottom: 2rem;
}

#footer li {
	margin-bottom: 0;
}

.footer-social-media .btn-icon-secondary {
	background-color: #fecb10;
	border-radius: 20px;
	height: 40px;
	width: 40px;
	display: flex;
	align-items: center;
	border: none;
	color: #222534;
}

#copyright {
	background-color: transparent;
}

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

.no-opc .container-no-padding {
	padding-left: 0;
	padding-right: 0;
}

@media (min-width: 992px) {
	.no-opc .max-height-100 {
		height: 100vh;
		max-height: calc(100vh - 122px)
	}
}

@media (max-width: 992px) {
	.no-opc .max-height-100 {
		height: 100vh;
		max-height: calc(100vh - 61px)
	}
}

.no-opc .container-centered-content > div {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.no-opc .img-width-100 {
	max-width: 100% !important;
}

.no-opc .container-centered {
	position: absolute !important;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%,-50%,0);
	width: 100%;
}

.no-opc .max-width-1000 {
	max-width: 1000px;
	margin: 0 auto;
	padding: 1rem;
}

.no-opc .attention-text {
	line-height: 1;
}

.no-opc .text-for-front {
	color: #fff;
	font-size: 1.5rem;
	text-transform: uppercase;
	line-height: 1;
}

.no-opc .btn-primary-custom .btn {
	font-size: 2rem;
	padding-left: 3rem;
	padding-right: 3rem;
	border-radius: 10px;
}

@media (min-width: 1300px) {
	body[data-page="18"].no-opc .h1-variant {
		font-size: 4rem !important;
	}
	
	body[data-page="18"].no-opc .attention-text {
		font-size: 4rem !important;
	}	
}

@media (max-width: 767px) {
	body[data-page="18"].no-opc .h1-variant {
		font-size: 2rem !important;
	}
	
	body[data-page="18"].no-opc .attention-text {
		font-size: 2rem !important;
	}
	
	.no-opc .text-for-front {
		font-size: 1rem !important;
		margin-bottom: 1rem !important;
	}
	
	.no-opc .btn-primary-custom .btn {
		font-size: 1.5rem;
		margin-bottom: 1rem !important;
	}
}

.no-opc .circle-and-yellow-border button {
	width: 160px;
	height: 160px;
	padding: 10px;
	border-radius: 100px;
	border: 10px solid #fad966;
}

.no-opc .circle-and-yellow-border button > span {
	display: flex;
	width: 120px;
	height: 120px;
	background-color: #fff;
	justify-content: center;
	align-items: center;
	border-radius: 100px;
	color: #525252;
	font-size: 3rem;
}

.no-opc .max-width-600 {
	max-width: 600px;
	margin: 0 auto;
}

.no-opc .grid-with-icon > .col {
	padding-left: .5rem;
	padding-right: .5rem;
}

.no-opc .grid-with-icon > .col[data-area-id="col-0"] {
	flex: 0 0 76px;	
}

.no-opc .grid-with-icon > .col[data-area-id="col-1"] {
	max-width: calc(100% - 76px);
}

.no-opc .button-for-offer button {
	width: 60px;
	height: 60px;
	border-radius: 10px;
	font-size: 1rem;
}

@media (max-width: 992px) {
	.no-opc .max-width-300-mobile {
		max-width: 300px !important;
	}
}

.no-opc .container-quote {
	border-radius: 20px;
	position: relative;
}

.no-opc .container-quote:after {	
	content: "";
	border-style: solid;
	border-width: 16px 16px 16px 0;
	border-color: transparent #e5e5e5 transparent transparent;
	position: absolute;
	left: 50%;
	bottom: -24px;	
	transform: translatex(-50%) rotate(-90deg);
}

.no-opc .container-quote.container-quote-yellow:after {
	border-color: transparent #fecb10 transparent transparent;
}

.no-opc .button-for-quote button {
	width: 60px;
	height: 60px;
	background-color: transparent;
	border: none;
	color: #525252;
	font-size: 2rem;
	padding: 0;
	text-align: right;	
}

.no-opc .image-max-height-100 img {
	max-height: 100px;
	width: auto !important;
	margin: 0 auto;
}