@font-face {
	font-family: "RobotoCondensed-Regular";
	src: url(../fonts/RobotoCondensed-Regular.ttf);
}
@font-face {
	font-family: "RobotoCondensed-Bold";
	src: url(../fonts/RobotoCondensed-Bold.ttf);
}
@font-face {
	font-family: "RobotoCondensed-Light";
	src: url(../fonts/RobotoCondensed-Light.ttf);
}

* {
	--lutzorange: #f4a20f;
	--lutzblue: #2c5468;
	--lutzlightblue: #2c5468;
	--lutzgrey: #474F59;
	--dangerRed: #a90329;
	--dangerDarkRed: #71031c;
	--successGreen: #739e73;
	--successDarkGreen: #5f845f;
}

#usernameEdit {
	color: #f4a20f;
}

.color-white {
	color: white!important;
}

.clear{
	clear: both;
}

.btn-primary {
	background-color: #2c5468;
    border-color: #2c5468;
}
.btn-primary:hover {
	background-color: #2c5468;
    border-color: #2c5468;
}
.btn-secondary {
	background-color: #aaa;
    border-color: #aaa;
}
.btn-secondary:hover {
	background-color: #474F59;
    border-color: #474F59;
}

h1 { font-size: 1.9em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.5em; }
a {
	text-decoration: none!important;
	color: #2c5468;
	transition: .1s;
	cursor: pointer!important;
}
a:hover {
	color: #f4a20f;
}
button, input {
	outline: none!important;
}

body {
	font-family: "RobotoCondensed-Regular";
}

img {
	max-width: 100%;
}

.no-padding {
	padding: 0px!important;
}

.note {
	font-size: 0.75em;
}


.button {
	padding: 10px 20px;
	border-radius: 5px;
}

.custom-checkbox label {
	cursor: pointer;
}

/*====================================================================================================================*/

#produktInformationen .has-badge::after {
	--f:20px;  /* folded part */
	right: -1px;
}

.thumbnail.has-badge::after {
	right: 15px;
}
.has-badge::after {
	--d:10px;  /* folded part */
	--c:#f7931e; /* color */
	--ct:white; /* colorText */
	--f:16px; /* ribbon font-size */
	content: attr(data-badge);
	color: var(--ct);
	font-size:var(--f);
	/* I : position & coloration */
	position: absolute;
	top: 0;
	right: 15px;
	transform: translate(29.29%, -100%) rotate(45deg);
	transform-origin: bottom left;
	padding: 5px 35px calc(var(--d) + 5px);
	background: linear-gradient(rgba(0,0,0,0.5) 0 0) bottom/100% var(--d) no-repeat var(--c);
	/* II : clipping */
	clip-path: polygon(0 0,100% 0,100% 100%,calc(100% - var(--d)) calc(100% - var(--d)),var(--d) calc(100% - var(--d)) , 0 100%);
	/* III : masking */
	-webkit-mask:
		linear-gradient( 135deg, transparent calc(50% - var(--d)*0.707),#fff 0) bottom left,
		linear-gradient(-135deg, transparent calc(50% - var(--d)*0.707),#fff 0) bottom right;
	-webkit-mask-size:300vmax 300vmax;
	-webkit-mask-composite: destination-in;
	 mask-composite: intersect;
}

/*====================================================================================================================*/


.form-group .optional {
	color: #ccc;
	text-transform: lowercase;
	font-size: 0.8em;
	margin-left: 5px
}
.custom-control {
	padding-left: 2rem;
}
.custom-control-label::before,
.custom-control-label::after {
	top: 0.05rem;
	width: 1.25rem;
	height: 1.25rem;
	left: -2rem;
}
.custom-control-input:checked~.custom-control-label::before {
	border-color: #2c5468;
	background-color: #2c5468;
}


/*====================================================================================================================*/
#header-m {
	height: 60px;
	width: 100%;
	position: fixed;
	background: white;
	display: flex;
	z-index: 9999;
	padding: 0px 20px
}
	#hamburger-m {
		height: 60px;
		/*margin-top: 3px;*/
		/*padding-left: 3px;*/
	}
		#hamburger-m button {
			display: flex;
			align-items: center;
		    justify-content: center;
		    height: 100%;
		}
		#hamburger-m .hamburger-inner {
			color: #2c5468;
		}
	#logo-m img {
		--padding: 7.5px;
		padding: 7.5px 0;
		height: 60px;
		display: block;
		margin: auto;
	}
	#cartDetailBtn {
		margin-top: 10px;
	    /*align-items: center;*/
	    justify-content: center;
	    flex-direction: column;
	}
		#cartDetailBtn > div {
			width: 100%;
			margin-bottom: 10px;
		}
		#cartDetailBtn > div:last-of-type {
			text-align: center;
			width: 100%;
		}
			#cartDetailBtn > div:last-of-type > button {
				width: 100%;
				padding: 12px 10px;
				transition: .15s;
				background-color: transparent!important;
				color: black;
				border: none;
			}
			#cartDetailBtn > div:last-of-type > button:last-of-type {
				margin-right: 0;
				margin-left: 5px;
			}
	#cart-m {
		/*right: -15px;*/
	}
		#cart-m a {
			height: 100%;
			/*width: 100%;*/
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
			#cart-m img {
				/*width: calc(100% / 5 * 2);*/
				height: calc(100% / 5 * 2);
			}
			#cart-m span {
				position: absolute;
				background-color: #f4a20f;
				width: 20px;
				height: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				border-radius: 50%;
				/*left: calc(100% / 5 * 3 - 7px);
				bottom: calc(100% / 5 * 3 - 7px);*/
				font-size: 0.9em;

			    top: 10px;
			    right: -10px;
			}

	#search-m {
		position: absolute;
		right: 55px;
		width: 60px;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: none;
	}
	/*#search-m.clicked {
		right: 0;
		z-index: 10;
	}*/
		#search-m img {
			width: calc(100% / 5 * 2);
			height: calc(100% / 5 * 2);
		}

	#searchwrapper-m {
		position: absolute;
		transition: .15s;
		background-color: white;
		height: 100%;
		z-index: 1;
		left: 100vw;
	}
	#searchwrapper-m.open {
		left: 0;
	}
		#searchwrapper-m form {
			height: 100%;
		}
		#searchwrapper-m form > input {
			width: calc(100vw - 20px);
			height: calc(100% - 20px);
			margin: 10px;
			padding: 0 10px;
			padding-right: 125px;
			border: none;
			border-bottom: 1px solid #ccc;
		}
		#searchwrapper-m form > i.fa-eraser {
			position: absolute;
			top: 20px;
			right: 60px;
			color: #aaa;
		}
		#searchwrapper-m form > i.fa-times {
			position: absolute;
			top: 16px;
			right: 20px;
			color: #aaa;
			font-size: 20px;
		}
		#searchwrapper-m form > button {
			height: 24px;
			width: 24px;
			background: none;
			border: none;
			position: absolute;
			top: 13px;
			right: 90px;
			padding: 0;
		}
		#searchwrapper-m form > div {
			overflow-y: scroll;
			-webkit-overflow-scrolling: touch;
			background-color: white;
			max-height: calc(100vh - 60px);
			box-shadow: 0px 7.5px 10px rgba(0,0,0,0.25);
		}
			#searchwrapper-m form > div p {
				margin: 0 15px;
			}
			#searchwrapper-m form > div p.desc {
				border-bottom: 1px solid #ddd;
				color: #aaa;
				font-size: 0.9em;
			}

	#side-nav-m {
		position: absolute;
		width: 80vw;
		background-color: white;
		height: calc(100vh - 60px);
		top: 60px;
		left: -80vw;
		transition: .15s;
	}
		#side-nav-m .overlay {
			background-color: rgba(0,0,0,0.5);
			position: absolute;
			top: 0;
			left: 0;
			height: 100vh;
			width: 300vw;
			opacity: 0;
			transition: .15s;
			visibility: hidden;
		}
		#side-nav-m .nav {
			display: block;
			z-index: 10;
			position: absolute;
			background-color: white;
			height: 100%;
			width: 100%;
			overflow-x: scroll;
			-webkit-overflow-scrolling: touch;
		}
			#side-nav-m .nav .row {
				visibility: hidden;
				opacity: 0;
				height: 0;
				padding: 0!important;
				display: block;
			}
			#side-nav-m .nav > div:not(#nav-footer-m):not(.openCategories) {
				width: 100%;
				margin: 0 23px;
				border-top: 1px solid #ddd;
				padding-top: 20px;
			}
				#side-nav-m .nav > div:not(#nav-footer-m) > div {
					padding-right: 0;
				}
					#side-nav-m .nav > div:not(#nav-footer-m) > div p {
						font-size: 0.9em;
						color: #aaa;
					}
			#side-nav-m .nav > a {
				width: calc(100% - 46px);;
				display: flex;
				justify-content: left;
				align-items: center;
				margin: 0 23px;
				padding: 11px 0;
				border-top: 1px solid #ddd;
			}
			#side-nav-m .nav > a:first-of-type {
				border: none;
			}
			#side-nav-m .nav .lang {
				width: calc(100% - 46px)!important;
				/*display: flex;*/
				/*justify-content: left;*/
				/*align-items: center;*/
				margin: 0 23px!important;
				padding: 11px 0!important;
				border-top: 1px solid #ddd;
				position: relative;
			}
			#side-nav-m .nav .lang:before {
				content: ' ';
				position: absolute;
				height: 10px;
				width: 10px;
				right: 0px;
				border-right: 2px solid #2c5468;
				border-bottom: 2px solid #2c5468;
				transform: rotate(45deg);
				top: 15px;
				transition: .15s;
			}
			#side-nav-m .nav .lang.open:before {
				transform: rotate(225deg);
				top: 18px;
			}
				#side-nav-m .nav .lang .row {
					width: 100%;
					/*position: absolute;*/
					/*top: 50px;*/
					/*left: 38px;*/
					margin: 0;
					/*margin-top: 10px;*/
					transition: .15s;
				}
					#side-nav-m .nav .lang .row p {
						margin-bottom: 8px;
					}
				#side-nav-m .nav .lang.open .row {
					height: auto;
					opacity: 1;
					visibility: visible;
					margin-top: 10px;
				}
				#side-nav-m .nav .lang span {
					color: #2c5468;
				}
			#side-nav-m .nav .openCategories {
				position: absolute;
				height: 10px;
				width: 10px!important;
				right: 16px;
				border-right: 2px solid #2c5468;
				border-bottom: 2px solid #2c5468;
				transform: rotate(45deg);
				top: 8px;
				transition: .15s;
				padding: 0!important;
				margin: 0!important;
				margin: 7px!important;
			}
			#side-nav-m .nav .openCategories.open {
				transform: rotate(225deg);
				top: 11px;
			}
			#side-nav-m .nav .categories {
				width: calc(100% - 46px)!important;
			}
			#side-nav-m .nav .categories a.active {
				color: #f4a20f!important;
			}
			#side-nav-m .nav .categories.open {
				transition: .15s;
				width: calc(100% - 23px);
			}
				#side-nav-m .nav .categories.open a {
					color: #aaa;
				}
					#side-nav-m .nav .categories.open p {
						margin: 5px 0;
					}
			#side-nav-m .nav .categories.open {
				height: auto;
				visibility: visible;
				opacity: 1;
			}


	#KategorienlisteHeader {
		margin: 0 25px!important;
		width: calc(100% - 50px)!important;
	}
		#KategorienlisteHeader ul {
			list-style: none;
			padding: 0;
		}
			#KategorienlisteHeader li.kat {
				padding: 0 0 8px 30px;
				position: relative;
				transition: .1s;
    			cursor: pointer;
			}
			#KategorienlisteHeader li.kat:before {
				content: ' ';
			    position: absolute;
			    width: 8px;
			    height: 8px;
			    border-top: 1px solid #2c5468;
			    border-right: 1px solid #2c5468;
			    left: 0;
			    top: 7px;
			    transform: rotate(45deg);
			}
			#KategorienlisteHeader li.kat.active:before {
				transform: rotate(135deg);
			    top: 5px;
			    left: 2px;
			}
				#KategorienlisteHeader ul.subkat {
					display: none;
    				padding: 0;
				}
				#KategorienlisteHeader li.kat.active ul.subkat {
				    display: block;
				    margin-top: 6px;
				    overflow: hidden;
				}
					#KategorienlisteHeader li.kat.active a.parent {
						color: #f4a20f;
					}
					#KategorienlisteHeader ul.subkat li {
						padding: 0 0 6px 20px;
					    position: relative;
					    border-left: 1px solid #ddd;
					}
					#KategorienlisteHeader ul.subkat li:before {
					    content: ' ';
					    position: absolute;
					    width: 15px;
					    height: 100%;
					    left: 0;
					    top: calc(-50% - 3px);
					    border-bottom: 1px solid #ddd;
					}
						#KategorienlisteHeader ul.subkat li a.active {
							color: #f4a20f;
						}

	#side-nav-m.open {
		left: 0;
	}
		#side-nav-m.open .overlay {
			opacity: 1;
			visibility: visible;
		}
		#nav-footer-m {
			width: 100%;
			background-color: #2c5468;
			color: white;
			display: flex;
			justify-content: left;
			align-items: center;
			padding: 11px 23px;
			position: absolute;
			bottom: 0;
		}


/*====================================================================================================================*/


#beratung .wallpaper {
	height: 160px;
	background-image: url(../images/startseite/mitarbeiter.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
}
@media (max-width: 1023px) {
	#beratung .wallpaper {
		background-size: contain;
	}
}
	#beratung .wallpaper a {
		background-color: #f4a20f;
		padding: 10px 20px;
		border-radius: 5px;
		color: white;
		position: relative;
		top: 260px;
		z-index: 1;
	}
	#beratung .wallpaper h3 {
		position: relative;
		top: 130px;
		color: black;
		margin-bottom: 175px;
		padding: 15px;
		font-size: 1.4em;
	}

#beratung .lutzteam {
	height: 250px;
	position: relative;
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
}
	#beratung .lutzteam img {
		position: absolute;
		bottom: 0;
	}
	#beratung .lutzteam h1 {
		position: absolute;
		color: white;
		bottom: 0px;
		background-color: rgba(0,0,0,1);
		width: 100%;
		padding: 10px;
		text-align: center;
		margin: 0;
		font-size: 1.2em;
	}


/*====================================================================================================================*/


#topkategorien {
	background-color: #f1f1f1;
}
#topkategorien .wrap {
	background-color: #fff;
    border: 1px solid #ccc;
    transition: .1s;
    margin-bottom: 20px;
}
#topkategorien .wrap:hover {
	box-shadow: 1px 1px 10px #ccc, -1px -1px 10px #ccc;
}
#topkategorien figure {
	background-image: url(https://office41.i2k.ch/Dokumente/34/OnlineShop/KatBilder/196/111 Maschinen-test.png);
    height: 110px;
    width: auto;
    margin: 15px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #fff;
}
#topkategorien figure.ph {
    background-size: cover;
}
#topkategorien p {
	padding: 1rem 0;
	margin: 0;
	background-color: #2c5468;
	text-align: center;
	color: white;
}


/*====================================================================================================================*/


#topmarken {
	background: linear-gradient(to bottom left, #C1C9D2, #D3DAE1);
	padding: 60px;
}
	#topmarken h1 {
		text-align: center;
		margin-bottom: 40px;
	}
	#topmarken > div {
		display: flex;
		align-items: center;
		justify-content: center;
	}
		#topmarken > div > img {
			width: auto;
			height: 80px;
		}


/*====================================================================================================================*/


#topangebote > div.row {
	padding: 5px;
}
	#topangebote .listing {
		padding-top: 10px;
	}
	#topangebote > div.row > div.col-12 {
		margin-bottom: 30px;
	}
		#topangebote > div.row > div.col-12 > .product-item {
			border: 1px solid #ddd;
			border-radius: 10px;
			overflow: hidden;
		}
	#topangebote .imgWrapper {
		margin-bottom: 20px;
	}
	#topangebote .caption {
		text-align: center;
	}
		#topangebote .caption p.price {
			width: 50%;
			left: 25%;
			position: relative;
			background-color: #FDF6E5;
			padding: 7px 0;
		}
	#topangebote .buy {
		border-top: 1px solid #ddd;
		position: relative;
	}
		#topangebote .buy a {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20px 0;
			transition: .15s;
		}
			#topangebote .buy a img {
				height: 20px;
			}



/*====================================================================================================================*/


#oderSeperator {
	border: 1px dashed #ddd;
    padding: 5px 10px;
    background-color: white;
}
#oderSeperator:after {
	content: ' ';
    width: 100%;
    height: 50%;
    border-bottom: 1px dashed #ddd;
    position: absolute;
    left: 0;
    z-index: -1;
}


/*====================================================================================================================*/


.kachel {
	margin-bottom: 30px;
}
	.kachel > .thumbnail {
		border: 1px solid #ddd;
		border-radius: 10px;
		overflow: hidden;
	}
	.kachel .imgWrapper {
		margin-bottom: 20px;
		text-align: center;

		display: flex;
		align-items: center;
		justify-content: center;
	}
		.kachel .imgWrapper > img {
			flex: 0 0 auto;
			max-height: 100%;
			max-width: 100%;
			width: auto;
			height: auto;
		}
	.kachel .caption {
		text-align: center;
		padding: 5px 15px;
	}
/*		.kachel .caption p.price {
			width: 50%;
			left: 25%;
			position: relative;
			background-color: #FDF6E5;
			padding: 7px 0;
		}*/
		.kachel .caption p.desc {
			margin: 0;
			color: #aaa;
			font-size: 0.8em;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
		.kachel .caption p.kat {
			margin: 0;
			color: #aaa;
			font-size: 0.8em;
		}
		.kachel .caption h5
		/*.kachel .caption p.price*/ {
			color: #333;
		}
		.kachel .caption h5 {
			padding-top: 5px;
			font-size: 1.1em;
			word-break: break-word;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.kachel .caption p.kat {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	.kachel .buy {
		border-top: 1px solid #ddd;
		position: relative;
	}
		.kachel .buy p.price{
			margin-bottom: 0px;
			display: flex;
			flex-direction: column;
		    /*align-items: center;
		    justify-content: center;*/
		    color: #2c5468;
		}
		.kachel .buy p.price.price-nachfrage{
			align-items: center;
    		padding: 10px 0;
		}

			.kachel .buy p.price .old {
				font-size: 0.8em;
				margin-bottom: -5px;
			}
				.kachel .buy p.price .new span {
					color: #f4a20f;
					font-size: 1.2em;
				}
			.kachel .buy p.price .default {
				padding: 8px 0 7px 0;
			}
				.kachel .buy p.price .default span {
					font-size: 1.2em;
				}

			.kachel .buy p.price .einheit {
				margin-left: 10px;
				color: #aaa;
			}
		.kachel .buy a, .kachel .buy button {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10px 0;
			transition: .15s;
			border: none;
			background: none;
		}
			.kachel .buy a img, .kachel .buy button img {
				height: 20px;
				margin-right: 20px;
			}
			.kachel .buy .overlay {
				opacity: 0;
				visibility: hidden;
				display: flex;
				position: absolute;
				top: 0;
				left: 100%;
				height: 100%;
				width: 100%;
			}
		.kachel .thumbnail {
			transition: .1;
		}
		.kachel .thumbnail:hover {
			box-shadow: 1px 1px 10px #ddd, -1px -1px 10px #ddd;
		}

		.kachel .buy:hover .overlay {
			left: 0;
		}


/*========= Product List =========*/
.kategorieHeader{
	margin-bottom: 30px;
}

.kategorieHeader .imageWrapper{
	text-align: center;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 15px;
}

.kategorieHeader img{
	max-height: 200px;
}


.prodTable th{
	vertical-align: top;
	padding-bottom: 20px;
}

.prodTable td{
	vertical-align: top;
	border-top: 2px solid #ddd;
	padding: 20px 10px 20px 0;
	white-space: nowrap;
}

.prodTable td:last-of-type {
	padding: 20px 0 20px 10px;
}

@media (min-width: 768px){}
	.prodTable td.prodDesc{
		max-width: 40%;
		white-space: normal;
	}
}

.prodTable td.prodDesc{
	border-top: 2px solid #ddd;
	padding: 20px 10px;
	max-width: 500px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.prodTable .priceTag{
	text-align: right;
	padding-right: 20px;
}
.prodTable .priceTag small{
	color: #aaa;
}

.prodTable td.colCart{
	text-align: right;
}


.prodTable .cartButton, .prodTable .updateAll {
	background-color: #ddd;
 	color: black;
 	text-align: center;
 	padding: 7px 10px 7px 8px;
 	border: none;

}
.prodTable .updateAll {
	z-index: 90;

}
.prodTable .cartButton:hover, .prodTable .updateAll:hover{
	background-color: var(--lutzorange);
	transition: .1s;
}

.prodTable .amtField{
	margin: 0 10px;
	width: 50px;
	border: none;
	border-bottom: 2px solid #ddd;
	padding: 5px 0;
	text-align: center;
	opacity: 0;
	display: none;
}

.prodTable .amtField.isInCart{
	opacity: 1;
	display: inline;
	transition: 0.1s;
}

.prodTable .cartCol{
	text-align: right;
}


/*==================================*/

.listing h2 {
	border-bottom: 2px solid #ddd;
	padding-bottom: 14px;
	margin-bottom: 16px;
	position: relative;
}
.listing h2:before {
	content: ' ';
	position: absolute;
	width: 25%;
	border-bottom: 2px solid #f4a20f;
	bottom: -2px;
}
.listing.subkats h5 {
	margin-bottom: 17px;
	/*margin-bottom: 0px;*/
}

@media (max-width: 767px) {
	.listing h2 {
		font-size: 16px;
	}
	.listing h2 + span {
		font-size: 11px;
		top: 3px;
	}
	#productImage {
	margin-bottom: 75px;
}
}

/*====================================================================================================================*/


#content #categoryName {
	box-shadow: 0px 7.5px 10px rgba(0,0,0,0.25);
	padding: 10px 0 10px 0;
	color: #474F59;
	font-size: 12px
}
	#content #categoryName + .container {
		padding-top: 20px;
	}
#categoryName #homeIcon {
	background-image: url('/GlobalIncludes/images/header/home.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	height: 20px;
	width: 20px;
	display: inline-block;
	margin: 0;
	position: relative;
	top: 3px;
}


/*====================================================================================================================*/


#attachements .attachement {
	width: 100%;
	display: block;
	padding: 8px 30px;
}
#attachements .attachement a {
	color: #474F59;
}


/*====================================================================================================================*/


.showFilter {
	background-color: #f4a20f;
	color: white;
	text-align: center;
	margin: 0 15px 30px 15px;
	width: 100%;
}
.showFilter + #kategorienLinks {
	height: 0;
	opacity: 0;
	transition: .15s;
}

ul#sortDropdown {
    position: absolute;
    top: 5px;
    right: 0px;
    list-style: none;
    padding: 0;
    z-index: 1;
    width: 160px;
}
ul#sortDropdown span.toggle {
	cursor: pointer;
}
ul#sortDropdown span.toggle i {
	font-style: normal;
}
ul#sortDropdown ul {
    opacity: 0;
    visibility: hidden;
    display: none;
    list-style: none;
    padding: 0;
    border: 2px solid #ccc;
    background: white;
    margin-top: 5px;
    box-shadow: 0px 7.5px 10px rgb(0 0 0 / 25%);
	margin-left: -10px;
    margin-right: -10px;
}
ul#sortDropdown ul.visible {
    opacity: 1;
    visibility: visible;
    display: block;
}
ul#sortDropdown ul li {
    padding: 8px 10px;
    cursor: pointer;
}
ul#sortDropdown ul li.active {
	background-color: #eee;
}

/*====================================================================================================================*/


#kategorienLinks.open {
	height: auto;
	opacity: 1;
}

#kategorienLinks > h5 {
	border-bottom: 2px solid #ddd;
	padding-bottom: 13px;
	position: relative;
}
#kategorienLinks > h5:not(:first-of-type) {
	padding-top: 10px;
}
#kategorienLinks > h5:before {
	content: ' ';
	position: absolute;
	width: 33%;
	border-bottom: 2px solid #f4a20f;
	bottom: -2px;
}
#kategorienLinks ul {
	list-style: none;
	padding-left: 0px;
}
#kategorienLinks > ul {
	padding: 15px 0 0 0;
}
	#kategorienLinks li.kat {
		padding: 0 0 6px 20px;
		position: relative;
		transition: .1s;
		cursor: pointer;
	}
		#kategorienLinks li.kat a {
			color: black;
		}
		#kategorienLinks li.kat a:hover {
			background-color: #f4a20f;
			color: white;
			padding: 5px;
			margin-left: -5px;
		}
		#kategorienLinks li.kat:before {
			content: ' ';
			position: absolute;
			width: 7px;
			height: 7px;
			border-top: 1px solid black;
			border-right: 1px solid black;
			left: 0;
			top: 7px;
			transform: rotate(45deg);
		}
	#kategorienLinks li.kat.active > a {
		background-color: #f4a20f;
		color: white;
		padding: 5px;
		margin-left: -5px;
	}
	#kategorienLinks li.kat.active:before {
		transform: rotate(135deg);
		top: 5px;
		left: 2px;
	}
		#kategorienLinks li.kat:not(.active) ul.subkat {
			display: none;
			padding: 0;
		}
			#kategorienLinks ul.subkat li {
				padding: 0 0 6px 20px;
				position: relative;
				border-left: 1px solid #ddd;
			}
			#kategorienLinks ul.subkat a:last-of-type li {
				padding: 0 0 0 20px;
			}
			#kategorienLinks ul.subkat a {
				color: black;
				transition: .1s;
			}
			#kategorienLinks ul.subkat a.active {
				background-color: #f4a20f;
				color: white;
				padding: 5px;
				margin-left: -5px;
			}
			#kategorienLinks ul.subkat a:hover {
				background-color: #f4a20f;
				color: white;
				padding: 5px;
				margin-left: -5px;
			}
			#kategorienLinks ul.subkat li:before {
				content: ' ';
				position: absolute;
				width: 15px;
				height: 100%;
				left: 0;
				top: calc(-50% - 3px);
				border-bottom: 1px solid #ddd;
			}
		#kategorienLinks li.kat.active ul.subkat {
			display: block;
			margin-top: 6px;
			overflow: hidden;
		}
#kategorienLinks .checkboxContainer {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
	#kategorienLinks .checkboxContainer input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}
	#kategorienLinks .checkboxContainer .checkmark {
		position: absolute;
		top: 0;
		left: 0;
		height: 20px;
		width: 20px;
		background-color: #f6f6f6;
		border: 1px solid #ddd;
	}
	#kategorienLinks .checkboxContainer:hover input ~ .checkmark {
		background-color: #eee;
	}
	#kategorienLinks .checkboxContainer input:checked ~ .checkmark {
		border-color: #f4a20f;
	}
	#kategorienLinks .checkboxContainer .checkmark:after {
		content: "";
		position: absolute;
		display: none;
	}
	#kategorienLinks .checkboxContainer input:checked ~ .checkmark:after {
		display: block;
	}
	#kategorienLinks .checkboxContainer input:checked ~ .text {
		color: #f4a20f;
	}
	#kategorienLinks .checkboxContainer .checkmark:after {
		left: 6px;
		top: 3px;
		width: 6px;
		height: 10px;
		border: solid #f4a20f;
		border-width: 0 2px 2px 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	#kategorienLinks #herstellerFilter ~ form button {
		width: 100%;
		background-color: #f4a20f;
		border: none;
		padding: 10px 20px;
		color: white;
		border-radius: 5px;
		opacity: 0;
		transition: .15s;
	}

#kategorienLinks #titlePreisfilter {
	cursor: pointer;
}
#kategorienLinks #titlePreisfilter:after {
	content: ' ';
	position: absolute;
	width: 12px;
	height: 12px;
	border-bottom: 2px solid #474F59;
	border-right: 2px solid #474F59;
	transform: rotate(45deg);
	right: 0;
	transition: .15s;
	top: 11px;
}
#kategorienLinks #preisfilter {
	padding-bottom: 20px;
}
	#kategorienLinks #preisfilter div {
		display: flex;
		align-items: center;
	}
		#kategorienLinks #preisfilter span {
			color: #aaa;
		}
		#kategorienLinks #preisfilter input {
			border: none;
			width: 100%;
			border-bottom: 1px solid #ddd;
			text-align: right;
		}
		#kategorienLinks #preisfilter .col-md-2 {
			letter-spacing: -1px;
		}
		#kategorienLinks #preisfilter .button, .filterBtn {
			background-color: #f4a20f;
			color: white;
			width: 100%;
			margin-top: 15px;
			text-align: center;
		}
		#kategorienLinks #preisfilter .button.inactive, .filterBtn {
			/*background-color: #ddd;*/
			/*color: #474F59;*/
			cursor: pointer;
			border: none;
		}
		.filterBtn{
			display: block;
		}
		.filterBtn:last-of-type{
			margin-bottom: 15px;
		}
		.filterbtnContainer{
			width: 100%;
		}

		#kategorienLinks form > h5,
		#kategorienLinks form > ul {
			display: none;
		}


/*====================================================================================================================*/


#orderPrice {
	color: #aaa;
	padding: 10px 0 15px 0;
}
	#orderPrice [name=selOrderPrice] {
		padding: 5px 10px;
		border: 1px solid #aaa;
		margin-left: 5px;
		border-radius: 5px;
	}


/*====================================================================================================================*/


.zubehoerWrapper {
	padding: 0;
}
	.zubehoerWrapper h1 {
		text-align: center;
		margin-bottom: 30px;
		margin-top: 30px;
	}
	#zubehoer {
		padding: 0;
	}
		#zubehoer .bx-wrapper {
			box-shadow: none;
		}


/*====================================================================================================================*/

#forgotPassword {
	color: #aaa;
    font-size: 0.9em;
}

/*====================================================================================================================*/

.produktNavigation {
	padding: 0 15px;
}
	.produktNavigation a {
		padding: 6px 12px;
		color: black;
		transition: .15s;
		margin-right: -2px;
	}
	.produktNavigation a.active {
		background-color: #f4a20f;
		color: white;
	}
	.produktNavigation a:hover {
		background-color: #ccc;
		color: white;
	}

/*====================================================================================================================*/

#produktInformationen {
	padding: 40px 20px 140px 20px;
}
	#productImage {
		/*border: 1px solid #ddd;*/
		border-radius: 8px;
		padding: 15px;
	}
	#productInformation {
		padding-left: 35px;
	}
	#productInformation > span {
		color: #aaa;
		position: relative;
		top: 5px;
	}
	#productInformation .price {
		padding-top: 10px;
		font-size: 1.5em;
	}
		#productInformation .price span {
			color: #f4a20f;
    		font-size: 1.2em;
		}
	#productInformation .defaultprice {

	}
	#productInformation .title {
		color: #474F59;
		margin-top: 10px;
		font-size: 1.5em;
	}
	#productInformation .description {
		padding: 15px 0 10px 0;
	}
	#productInformation .options form {
		display: contents;
		width: 100%;
	}
		#productInformation .options input {
			list-style: none;
			width: inherit;
			padding: 12px 15px;
			border: none;
			border-bottom: 1px solid #ccc;
			text-align: right
		}
		#productInformation .options .einheit {
			white-space: nowrap;
			color: #aaa;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #ccc;
			max-width: 50%;
		}
		#productInformation .options button[type=submit],
		#productInformation .options button[type=button].offerte {
			background-color: #f4a20f;
			color: white;
			border: none;
			border-radius: 8px;
			width: 100%;
			padding: 12px 0;
			transition: .15s;
		}
		#productInformation .options button[type=button].offerte {
			margin-top: 10px;
			background-color: #2c5468;
		}
		#productInformation .options button:not([class^=col-]):hover {
			background-color: #2c5468!important;
		}
	#productInformation .socials {
		position: absolute;
		bottom: -70px;
		border-top: 1px solid #ccc;
		width: calc(100% - 45px);
		padding: 15px 10px 0 0;
	}
	#productInformation .socials img {
		float: right;
		height: 40px;
		width: auto;
	}
#produktDetails {
	background-color: #E6F5FA;
	padding: 35px;
	color: #474F59;
}

#additional {
	padding-bottom: 60px;
}
#additional .col-md-4 {
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 20px;
}
	#additional .bewertungen {
		height: 380px;
		margin: 0 30px;
	}
	#additional .bewertungen > h1 {
		text-align: center;
		color: #474F59;
		margin-bottom: 15px;
	}
		#additional .bewertungen > h1 > i {
			font-size: 0.5em;
			color: inherit;
		}
	#additional .bewertungen > .stargroup {
		border-bottom: 3px solid #ccc;
		position: relative;
		margin-bottom: 14px;
	}
	#additional .bewertungen > .stargroup .orangebar {
		border-bottom: 3px solid #f4a20f;
		position: absolute;
		bottom: -3px;
	}
		#additional .bewertungen > .stargroup .light {
			color: #ccc;
		}
		#additional .bewertungen button {
			background-color: #f4a20f;
			color: white;
			border: none;
			border-radius: 8px;
			width: 100%;
			padding: 12px 0;
			transition: .15s;
			margin-top: 15px;
		}
		#additional .bewertungen button:hover {
			background-color: #2c5468;
		}
#additional .kommentare {
	padding-left: 40px;
	padding-top: 45px;
}
	#additional .kommentare h1 {
		color: #474F59;
		margin-bottom: 15px;
		font-size: 1.5em;
	}
	#additional .kommentare button {
		background-color: #ddd;
		width: 100%;
		color: #474F59;
		padding: 10px 20px;
		border-radius: 10px;
		border: 2px solid #ccc;
		margin-top: 30px;
	}
	#additional .comment {
		border: 1px solid #ddd;
		border-radius: 10px;
		padding: 15px;
		margin-bottom: 20px;
		position: relative;
	}
	#additional .comment.hidden {
		display: none;
	}
		#additional .comment .rating {
			position: absolute;
			top: 8px;
			right: 10px;
		}
			#additional .comment .rating i.active {
				color: #f4a20f;
			}
			#additional .comment .rating i {
				color: #474F59;
			}
		#additional .comment .text {
			margin: 0;
			padding-right: 100px;
		}
		#additional .comment .author {
			color: #aaa;
			font-size: 0.8em;
		}
	#additional .commentWrapper {
		height: 210px;
		overflow: hidden;
	}


/*====================================================================================================================*/


#SuchfeldWrapper {
	width: 100%;
	position: relative;
}
	#SuchfeldWrapper #Suchfeld:focus + #SuchfeldResultate,
	#SuchfeldWrapper #SuchfeldResultate:hover {
		opacity: 1;
		visibility: visible;
		top: 35px;
	}
	#SuchfeldWrapper #SuchfeldResultate {
		transition: .15s;
		opacity: 0;
		visibility: hidden;
		position: absolute;
		top: 40px;
		left: 0;
		width: 100%;
		background-color: white;
		color: #474F59;
		z-index: 1;
		border: 1px solid #ddd;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		border-top: 1px solid white;
		overflow-y: scroll;
		max-height: 400px;
	}
	#SuchfeldWrapper #SuchfeldResultate > div {
		margin: 0px 10px;
		padding: 3px 3px 5px 3px;
		border-bottom: 1px solid #eee;
	}
	#SuchfeldWrapper #SuchfeldResultate > div:hover {
		background-color: #eee;
	}
		#SuchfeldWrapper #SuchfeldResultate > div p {
			margin-bottom: 0;
		}
		#SuchfeldWrapper #SuchfeldResultate > div p.desc {
			color: #aaa;
			margin-top: -5px;
			font-size: 0.85em;
		}


/*====================================================================================================================*/


.alert.success {
	background-color: #739e73;
	border-left: 10px solid #5f845f;
	color: white;
}
.alert.danger, .alert-danger {
	background-color: #a90329;
	border-color: #a90329;
	border-left: 10px solid #71031c;
	color: white;
}


/*====================================================================================================================*/


.warenkorbHeader {
	border-bottom: 1px solid #ddd;
	padding: 60px 0 10px 0!important;
}
	.warenkorbHeader .zwischentotal {
		text-align: center;
	}
	.warenkorbHeader .rabatt {
		text-align: center;
	}

.warenkorbListing {
	padding: 0px!important;
}
	.warenkorbListing > form > .row {
		background-color: white;
		color: #474F59;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #ccc;
		padding: 20px 0;
	}
		.warenkorbListing .product {
			padding: 30px 0;
			border-bottom: 1px solid #ddd;
		}
			.warenkorbListing .product .text a {
				color: #474F59;
			}
			.warenkorbListing .zwischentotal {
				text-align: center;
				display: flex;
				flex-direction: column;
			}
				.warenkorbListing .zwischentotal .old {
					font-size: 0.9em;
				}
				.warenkorbListing .zwischentotal .new span {
					font-size: 1.2em;
					color: #f4a20f;
				}
				.warenkorbListing .zwischentotal .default span {
					font-size: 1.2em;
				}
			.warenkorbListing .rabatt {
				text-align: center;
			}
			.warenkorbListing input {
				border: none;
				border-top: 1px solid #ddd;
				border-bottom: 1px solid #ddd;
				max-width: 40px;
				padding: 3px 7px;
				width: 100%;
				text-align: right;
			}
			.warenkorbListing .removeProduct {
				background: none;
				border: none;
			}
				.warenkorbListing .removeProduct i {
					color: #474F59;
				}

@media only screen and (max-width: 768px) {
	.warenkorbListing .product .menge {
	    padding-right: 0;
	    padding-left: 0;
	    max-height: 35px;
	    left: 15px;
	}
	#topmarken{
		display:none;
	}
}
	.warenkorbListing .product .menge button {
		border: 1px solid #ddd;
		background-color: white;
		height: 100%;
	}
	.warenkorbListing .product .menge > div:first-of-type button {
		border-top-left-radius: 5px;
    	border-bottom-left-radius: 5px;
	}
	.warenkorbListing .product .menge > div:last-of-type button {
		border-top-right-radius: 5px;
    	border-bottom-right-radius: 5px;
	}

		.warenkorbListing .product .menge button i {
			color: #474F59;
		}

.currency {
	color: #aaa;
	font-size: 0.9em;
	margin-right: 2px;
}


.warenkorbButtons {
	padding-bottom: 60px!important;
}
	.warenkorbButtons .continue {
		background-color: white;
		color: #474F59;
		border-radius: 5px;
		border: 1px solid #eee;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	.warenkorbButtons .refresh {
		background-color: #eee;
		color: #474F59;
		padding: 10px 20px;
		border-radius: 5px;
		border: none;
		transition: .15s;
	}
	.warenkorbButtons .refresh.changed {
		background-color: #2c5468;
		color: white;
	}
	.warenkorbButtons .kasse {
		background-color: #f4a20f;
		color: white;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		padding: 10px 0;
	}


/*====================================================================================================================*/

@media (max-width: 767px) {
	.row-sm {
		flex-direction: column-reverse;
		justify-content: flex-start;
	}
	.row-sm > .col-12 {
		display: inline-block;
	}
	.d-sm-none {
		display: none;
	}
	#OSProdSlider img {
		height: 200px!important;
		width: 100%!important;
	}
	#zubehoer .bx-wrapper {
		overflow-y:hidden;
	}
}

#OSProdSlider {
	background-image: url('/GlobalIncludes/images/slider/banner_plaettchen.png');
	box-shadow: 0px 7.5px 10px rgba(0,0,0,0.25);
	height: 400px;
}
	#OSProdSlider .carousel-inner {
		height: 100%;
	}
		#OSProdSlider .carousel-item {
			height: 100%;
		}
			#OSProdSlider .carousel-item div.text span {
				display: block;
				padding-bottom: 10px;
			}
			#OSProdSlider .carousel-item div.text span a.nostyle {
				text-decoration: none;
				color:#212529;
			}
			#OSProdSlider .carousel-item div.text a:not(.nostyle) {
				background-color: #f4a20f;
				color: white;
				border-radius: 5px;
				padding: 5px 10px;
			}
			#OSProdSlider .carousel-item img {
				width: auto;
    			height: 100%;
    			object-fit: contain;
			}
			#OSProdSlider .carousel-item div.text span.titel {
				font-size: 1.5em;
			}
	/*#OSProdSlider .controls {
		position: absolute;
		height: 40px;*/
		/*width: 100%;*/
		/*right: 0px;
		bottom: 0px;
	}*/

/*====================================================================================================================*/


/*
HEADER START
*/
	/*
	LOGO START
	*/
	#header {
		height: 60px;
		width: 100vw;
		background-color: white;
		position: fixed;
		margin: 0;
		top: 0;
		z-index: 9999;
	}
	#header > div:not(#navigation) {
		height: inherit;
		position: relative;
	}
	#header > #logo {
		margin-left:20px;
	}
	#header > #logo > a {
		width: 100%;
		height: 100%;
	}
	#header > #logo > a > img {
		height: inherit;
		padding: 7.5px o;
		display:block;
		margin:auto;
	}
	/*
	LOGO STOP
	*/


	/*
	SUCHE START
	*/
	#header > #search {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#header > #search input {
		width: 100%;
		border: 1px solid #ddd;
		padding: 5px 5px 5px 12px;
		height: 40px;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		outline: none;
	}
	#header > #search #lupe {
		position: absolute;
		right: 25px;
		height: 20px;
		cursor: pointer;
	}
	#header > #search > #catbutton {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		width: 200px;
		position: relative;
		cursor: pointer;
	}
		#header > #search > #catbutton > button {
			width: 100%;
			height: 100%;
			border: 1px solid #ddd;
			border-right: 0;
			background-color: #eee;
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;
		}
	#header > #search > #catbutton > span {
		padding: 0 8px;
	}
	#header > #search > #catbutton #topcats {
		opacity: 0;
		visibility: hidden;
		position: absolute;
		top: 38px;
		left: -1px;
		background-color: white;
		z-index: 9999;
		width: 20vw;
		min-width: 600px;
		border: 1px solid #ddd;
		border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;
		padding: 15px;
	}
		#header > #search > #catbutton #topcats figure {
			height: 100px;
		    background-size: contain;
		    background-repeat: no-repeat;
		    background-position: center;
		}
		#header > #search > #catbutton #topcats p {
			font-size: 0.9em;
			text-align: center;
		}
	#header > #search > #catbutton:hover {
		border-bottom-left-radius: 0px;
	}
	#header > #search > #catbutton:hover #topcats,
	#header > #search > #catbutton:focus #topcats {
		opacity: 1;
		visibility: visible;
	}
	/*
	SUCHE STOP
	*/

	/*
	Loader für "Mehr anzeigen"-Button Start
	 */
	.produktNavigation {
		text-align:center;
	}

	.mehrladen,
	.mehrladenSort {
		background-color: #f4a20f;
		color: white!important;
	}

	.spanMwstText {
		position: absolute;
		top: 5px;
		right: 180px;
		border-right: 1px solid #ddd;
		padding-right: 25px;
	}
	@media (max-width: 767px) {
		.spanMwstText {
		    right: 0;
		    border: none!important;
		    padding: 0;
		    font-size: 11px;
			top: 2px;
		}
		ul#sortDropdown {
			position: relative;
		}
		ul#sortDropdown ul {
			position: absolute;
		}
	}

	#loader {
	    width: 40px;
	    height: 40px;
	    z-index: 10000000;
	    background-color: rgba(255,255,255,0);
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    top: 0;
	    transition: 1s;
	    opacity: 0;
	    visibility: hidden;
	    margin-right:auto;
	    margin-left:auto;
	}
	#loader.visible {
	    opacity: 1;
	    visibility: visible;
	}
    #loader svg {
        display: block;
        margin: 0;
        padding: 0;
    }
    #loader .spinner {
        width: 66px;
        height: 66px;
        animation: contanim 2s linear infinite;
    }
    #loader svg {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        transform: rotate(-90deg);
    }
    #loader svg:nth-child(1) circle {
        stroke: #f4a20f;
        stroke-dasharray: 1, 300;
        stroke-dashoffset: 0;
        animation: strokeanim 3s calc(.2s * (1)) ease infinite;
        transform-origin: center center;
    }
    #loader svg:nth-child(2) circle {
        stroke: #2c5468;
        stroke-dasharray: 1, 300;
        stroke-dashoffset: 0;
        animation: strokeanim 3s calc(.2s * (2)) ease infinite;
        transform-origin: center center;
    }
    #loader svg:nth-child(3) circle {
        stroke: #1b659c;
        stroke-dasharray: 1, 300;
        stroke-dashoffset: 0;
        animation: strokeanim 3s calc(.2s * (3)) ease infinite;
        transform-origin: center center;
    }
    #loader svg:nth-child(4) circle {
        stroke: #0a99d1;
        stroke-dasharray: 1, 300;
        stroke-dashoffset: 0;
        animation: strokeanim 3s calc(.2s * (4)) ease infinite;
        transform-origin: center center;
    }
	@keyframes strokeanim {
	    0% {
	        stroke-dasharray: 1, 300;
	        stroke-dashoffset: 0;
	    }
	    50% {
	        stroke-dasharray: 120, 300;
	        stroke-dashoffset: -58.54832;
	    }
	    100% {
	        stroke-dasharray: 120, 300;
	        stroke-dashoffset: -175.64497;
	    }
	}
	@keyframes contanim {
	    100% {
	        transform: rotate(360deg);
	    }
	}
	/*
	Loader für "Mehr anzeigen"-Button STOP
	 */


	/*
	KACHELN START
	*/
	#header > #options {
		right: -15px;
		outline: 15px solid white;
	}
	#header > #options > div {
		border-left: 1px solid #ddd;
		transition: .15s;
	}
	#header > #options > div:hover {
		/*background-color: #f6f6f6;*/
		background: linear-gradient(#f6f6f6, #fff);
	}
	#header > #options img {
		height: 20px;
		margin: calc(20px / 4 * 3) auto calc(20px / 4) auto;
		display: block;
	}
	#header > #options span {
		display: block;
		width: 100%;
		text-align: center;
	}
	#header > #options > div > a {
		color: black;
		text-decoration: none;
	}
	#header > #options .flapCart:hover #produkteImWarenkorb {
		right: 20px;
	}
	/*Scrollbar in Warenkorb entfernen*/
	#produkteImWarenkorb::-webkit-scrollbar { width: 0 !important }
	#produkteImWarenkorb { overflow: -moz-scrollbars-none; }
	#produkteImWarenkorb { -ms-overflow-style: none; }


		#header > #options #produkteImWarenkorb {
			height: calc(100vh - 80px);
			overflow-y:scroll;
			position: absolute;
			width: 30vw;
			right: -30vw;
			top: 80px;
			z-index: 10000;
			border: 1px solid #ddd;
			background-color: white;
			padding: 0 15px;
			transition: .2s;
			box-shadow: 0px 7.5px 10px rgba(0,0,0,0.25);
		}
			#header > #options #produkteImWarenkorb > .row {
				border-bottom: 1px dashed #ddd;
				width: 100%;
				margin: 0;
				padding: 15px 0;
			}
				#header > #options #produkteImWarenkorb img {
					height: auto;
					margin: 0;
				}
				#header > #options #produkteImWarenkorb .text {
					display: flex;
					align-items: center;
				}
					#header > #options #produkteImWarenkorb .text h6 {
						margin: 0;
					}
					#header > #options #produkteImWarenkorb .text p {
						margin: 0;
						color: #aaa;
					}
						#header > #options #produkteImWarenkorb .text p.price {
							/*width: auto;*/
    						/*display: inline-block;*/
    						/*font-size: 0.9em;*/
						}
						#header > #options #produkteImWarenkorb .text p.price.old {
							font-size: 0.8em;
    						margin-bottom: -5px;
						}
						#header > #options #produkteImWarenkorb .text p.price.new span {
							font-size: 1.2em;
						}
						#header > #options #produkteImWarenkorb .text p.price.default span {
							font-size: 1.2em;
						}
							#header > #options #produkteImWarenkorb .text p.price > span {
								width: auto;
								display: unset;
								/*font-size: 1.2em;*/
							}
					#header > #options #produkteImWarenkorb .text a {
						position: absolute;
						right: -30px;
						top: 0;
					}
				#header > #options #produkteImWarenkorb .wrapZwischentotal {
					margin-left: 10px;
					text-align: right;
				}
					#header > #options #produkteImWarenkorb .zwischentotal {
						width: auto;
						display: inline-block;
						color: #aaa;
					}
					#header > #options #produkteImWarenkorb .zwischentotalCHF {
						width: auto;
						display: inline-block;
					}
			#header > #options #produkteImWarenkorb > .row#zurKasse {
				justify-content: flex-end;
			}
				#header > #options #produkteImWarenkorb > .row#zurKasse a {
					background-color: #ddd;
					color: #474F59;
					margin-left: 10px;
				}
				#header > #options #produkteImWarenkorb > .row#zurKasse a.kasse {
					background-color: #f4a20f;
					color: white;
				}

				.kontoDropdown {
					position: absolute;
					opacity: 0;
					visibility: hidden;
					z-index: 1;
				    border: 1px solid #ddd;
				    width: calc(100% + 2px);
				    left: -1px;
				    border-top: 0;
				    transition: .15s;
				    background-color: white;
				}
				.kontoDropdown a {
					width: 100%;
					text-align: center;
				}
				#options div.col-md-4:hover .kontoDropdown {
					opacity: 1;
					visibility: visible;
				}

	#header .amount {
		position: absolute;
		background-color: #f4a20f;
		width: 18px!important;
		height: 18px;
		border-radius: 50%;
		color: white;
		line-height: 18px;
		font-size: 13px;
		top: 7px;
		right: calc(50% - 21px);
	}


	/*
	KACHELN STOP
	*/

	/*
	NAVIGATION START
	*/
	#header > #navigation {
		height: 50px;
		background-color: white;
		padding: 0;
	}
		.fixedShadow {
			box-shadow: 0px 7.5px 10px rgba(0,0,0,0.25);
		}
	#header > #navigation ul{
		height: inherit;
		list-style: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#header > #navigation ul li {
		height: inherit;
		padding: 0 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: .15s;
			position: relative;
	}
	#header > #navigation ul li a {
		text-transform: uppercase;
	}
	#header > #navigation ul li.active {
		border-top: 5px solid #f4a20f;
	}
	#header > #navigation ul li.active a {
		margin-bottom: 5px;
	}
	#header > #navigation #subnavi {
		position: absolute;
		width: 100vw;
		/*right: 0;*/
		top: 46px;
		background-color: white;
		border-top: 2px solid #ddd;
		padding-bottom: 10px;
		transition: .15s;
		visibility: hidden;
		opacity: 0;
		border-bottom: 2px solid #ddd;
		box-shadow: 0px 7.5px 10px rgba(0,0,0,0.25);
	}
	#header > #navigation #subnavi > div {
		padding: 25px 35px;
	}
	#header > #navigation #subnavi > div + div {
		border-left: 1px solid #ccc;
	}
	#header > #navigation #subnavi h5 {
		border-bottom: 1px solid #ccc;
		padding-bottom: 15px;
	}
	#header > #navigation ul li:first-of-type:after {
		content: ' ';
		position: absolute;
		border-bottom: 2px solid white;
		width: 100%;
		bottom: 0;
	}
	#header > #navigation ul li:first-of-type:hover {
		border: 2px solid #ddd;
		border-bottom: 0;
	}
	#header > #navigation ul li:first-of-type:hover > a {
		color: #f4a20f
	}
	#header > #navigation ul li:first-of-type:hover a {
		margin-bottom: 0px;
	}
	#header > #navigation ul li:first-of-type:hover #subnavi {
		visibility: visible;
		opacity: 1;
	}
	#subnavi .well {
		border: 1px solid #eee;
		padding: 15px;
		margin-top: 15px;
	}
	/*
	NAVIGATION STOP
	*/
/*
HEADER STOP
*/



/*
CONTENT START
*/
#content {
	position: relative;
	top: 60px;
	padding: 0 0 60px 0;
}
#MainSlider {
	box-shadow: 0px 7.5px 10px rgba(0,0,0,0.25)
}
#MainSlider .controls {
	position: absolute;
	right: 20px;
	bottom: 20px;
	height: 40px;
}
#MainSlider .controls i {
	color: black;
}
#OSProdSlider .carousel-indicators {
	left: auto;
	height: 100%;
	margin: 0;
	padding-right: 90px;
	border: 2px solid white;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 30px;
}
#OSProdSlider .carousel-indicators > li {
	width: 7px;
	height: 7px;
	background-color: black;
	border-radius: 50%;
	margin-left: 5px;
}
#OSProdSlider .carousel-control-prev {
	left: auto;
	right: 40px;
	width: 40px;
	z-index: 1000;
}
#OSProdSlider .carousel-control-next {
	width: 40px;
	border-left: 2px solid white;
	z-index: 1000;
}


#productImageCarousel {
	height: 0;
    padding-bottom: 100%;
}
#productImageCarousel .carousel-indicators {
	top: calc(100% + 20px);
}
#productImageCarousel .carousel-indicators li {
    height: 50px;
    width: 50px;
    border: 1px solid #ddd;
}
#productImageCarousel .carousel-indicators li img {
	display: block;
	height: 100%;
    width: 100%;
    object-fit: contain;
}

#productImageCarousel .carousel-inner {
	height: 100%;
    position: absolute;
}
#productImageCarousel .carousel-item {
	height: 100%;
}
#productImageCarousel .carousel-item img {
	height: 100%;
	width: 100%;
	object-fit: contain;
}

.information {
	padding: 50px 0;
	border-bottom: 1px solid #ddd;
}
.information > div {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
.information > div.text h2 {
	font-size: 1.6em;
}
.information > div.text p {
	font-size: 0.9em;
	text-align: justify;
}
.information img {
	width: 100%;
	padding: 7px;
	border: 1px solid #ddd;
	border-radius: 5px;
	outline: 1px solid #ddd;
	outline-offset: -6px;
}

.team {
	padding: 50px 0 0 0;
}
.team .row {
	padding-top: 35px;
}
.team .row > div {
	padding-bottom: 45px;
}
.team .image {
	display: flex;
	align-items: center;
	justify-content: center;
}
.team .image img {
	border: 1px solid #ddd;
	border-radius: 50%;
	padding: 4px;
}
.team p {
	font-size: 0.9em;
	text-align: center;
}
.team h2 {
	text-align: center;
}
.team p.name {
	font-size: 1em;
	margin: 10px 0 -5px 0;
}

.team p.job {
	margin: 0;
}
.team p.name + p.job {
	margin-top: 5px;
}
.team .text img {
	height: 11px;
}



.team {
	/*perspective: 800px;*/
}
.team .mitarbeiter .frontside {
	transition: 0.8s;
    transform-style: preserve-3d;
    position: relative;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    cursor: pointer;
}
.team .mitarbeiter.clicked .frontside {
	transform: rotateY(180deg);
}

.team .mitarbeiter .backside {
	transition: 0.8s;
    transform-style: preserve-3d;
    position: relative;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    cursor: pointer;

	position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    transform: rotateY(180deg);
}
.team .mitarbeiter.clicked .backside {
	transform: rotateY(360deg);
}


.container > div {
	/*padding: 40px 5px 0 5px;*/
}
/*
CONTENT STOP
*/


.label {
    background-color: #ccc;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8em;
    margin-right: 5px;
    margin-bottom: 5px;
    display: inline-block;
}



/*
FOOTER START
*/
	#footer {
		border-top: 30px solid #f4a20f;
		background-color: #2c5468;
		color: white;
		padding-bottom: 60px;
	}
		#footer a {
			color: white;
		}
		#footer a:hover {
			color: #f4a20f;
		}
	#footer > .container > .row {
		padding: 55px 0 0 0;
	}
	#footer label h5 {
		position: relative;
		padding: 0 0 11px 0;
		border-bottom: 2px solid white;
	}
	#footer label h5:before {
		content: ' ';
		border-bottom: 2px solid #f4a20f;
		position: absolute;
		width: 100px;
		left: 0;
		bottom: -2px;
	}
	#footer img {
		height: 45px;
		margin-bottom: 10px;
	}

		#footer #kategorienListe.open {
			height: auto;
			opacity: 1;
		}

		#footer #kategorienListe > h5 {
			border-bottom: 2px solid #ddd;
			padding-bottom: 13px;
			position: relative;
		}
		#footer #kategorienListe > h5:not(:first-of-type) {
			padding-top: 10px;
		}
		#footer #kategorienListe > h5:before {
			content: ' ';
			position: absolute;
			width: 33%;
			border-bottom: 2px solid #f4a20f;
			bottom: -2px;
		}
		#footer #kategorienListe ul {
			list-style: none;
		}
		#footer #kategorienListe > ul {
			padding: 15px 0 0 0;
		}
			#footer #kategorienListe li.kat {
				padding: 0 0 8px 30px;
				position: relative;
				transition: .1s;
				cursor: pointer;
			}
				#footer #kategorienListe li.kat a {
					color: #fff;
				}
				#footer #kategorienListe li.kat a:hover {
					color: #f4a20f;
				}
				#footer #kategorienListe li.kat:before {
					content: ' ';
					position: absolute;
					width: 7px;
					height: 7px;
					border-top: 1px solid #fff;
					border-right: 1px solid #fff;
					left: 0;
					top: 7px;
					transform: rotate(45deg);
				}
			#footer #kategorienListe li.kat.active > a {
				color: #f4a20f;
			}
			#footer #kategorienListe li.kat.active:before {
				transform: rotate(135deg);
				top: 5px;
				left: 2px;
			}
				#footer #kategorienListe ul.subkat {
					display: none;
					padding: 0;
				}
					#footer #kategorienListe ul.subkat li {
						padding: 0 0 6px 20px;
						position: relative;
						border-left: 1px solid #ddd;
					}
					#footer #kategorienListe ul.subkat a:last-of-type li {
						padding: 0 0 0 20px;
					}
					#footer #kategorienListe ul.subkat a {
						color: #fff;
						transition: .1s;
					}
					#footer #kategorienListe ul.subkat a.active {
						color: #f4a20f;
					}
					#footer #kategorienListe ul.subkat a:hover {
						color: #f4a20f;
					}
					#footer #kategorienListe ul.subkat li:before {
						content: ' ';
						position: absolute;
						width: 15px;
						height: 100%;
						left: 0;
						top: calc(-50% - 3px);
						border-bottom: 1px solid #ddd;
					}
				#footer #kategorienListe li.kat.active ul.subkat {
					display: block;
					margin-top: 6px;
					overflow: hidden;
				}
		#footer #kategorienListe .checkboxContainer {
			display: block;
			position: relative;
			padding-left: 35px;
			margin-bottom: 12px;
			cursor: pointer;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
			#footer #kategorienListe .checkboxContainer input {
				position: absolute;
				opacity: 0;
				cursor: pointer;
				height: 0;
				width: 0;
			}
			#footer #kategorienListe .checkboxContainer .checkmark {
				position: absolute;
				top: 0;
				left: 0;
				height: 20px;
				width: 20px;
				background-color: #f6f6f6;
				border: 1px solid #ddd;
			}
			#footer #kategorienListe .checkboxContainer:hover input ~ .checkmark {
				background-color: #eee;
			}
			#footer #kategorienListe .checkboxContainer input:checked ~ .checkmark {
				border-color: #f4a20f;
			}
			#footer #kategorienListe .checkboxContainer .checkmark:after {
				content: "";
				position: absolute;
				display: none;
			}
			#footer #kategorienListe .checkboxContainer input:checked ~ .checkmark:after {
				display: block;
			}
			#footer #kategorienListe .checkboxContainer input:checked ~ .text {
				color: #f4a20f;
			}
			#footer #kategorienListe .checkboxContainer .checkmark:after {
				left: 6px;
				top: 3px;
				width: 6px;
				height: 10px;
				border: solid #f4a20f;
				border-width: 0 2px 2px 0;
				-webkit-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				transform: rotate(45deg);
			}

			#footer #kategorienListe #herstellerFilter ~ form button {
				width: 100%;
				background-color: #f4a20f;
				border: none;
				padding: 10px 20px;
				color: white;
				border-radius: 5px;
				opacity: 0;
				transition: .15s;
			}

		#footer #kategorienListe #titlePreisfilter {
			cursor: pointer;
		}
		#footer #kategorienListe #titlePreisfilter:after {
			content: ' ';
			position: absolute;
			width: 12px;
			height: 12px;
			border-bottom: 2px solid #474F59;
			border-right: 2px solid #474F59;
			transform: rotate(45deg);
			right: 0;
			transition: .15s;
			top: 11px;
		}
		#footer #kategorienListe #preisfilter {
			padding-bottom: 20px;
		}
			#footer #kategorienListe #preisfilter div {
				display: flex;
				align-items: center;
			}
				#footer #kategorienListe #preisfilter span {
					color: #aaa;
				}
				#footer #kategorienListe #preisfilter input {
					border: none;
					width: 100%;
					border-bottom: 1px solid #ddd;
					text-align: right;
				}
				#footer #kategorienListe #preisfilter .col-md-2 {
					letter-spacing: -1px;
				}
				#footer #kategorienListe #preisfilter .button {
					background-color: #f4a20f;
					color: white;
					width: 100%;
					margin-top: 15px;
					text-align: center;
				}
				#footer #kategorienListe #preisfilter .button.inactive {
					background-color: #ddd;
					color: #474F59;
					cursor: default;
				}

		#footer .row > div.col-md-4:nth-of-type(2) div > p:first-of-type {
			margin-top: 20px;
		}
/*
FOOTER STOP
*/


#KategorienlisteHeader ~ a:last-of-type {
	padding-bottom: 150px;
}



#langDropdown {
	opacity: 0;
	visibility: hidden;
	transition: .15s;
	position: absolute;
    width: calc(100% + 2px);
    z-index: 1;
    background: white;
    border: 1px solid #ddd;
    padding: 0px 15px 10px 15px;
    margin: 10px 0 0 0px;
    border-top: 0;
    left: -1px;
}
#langSelect:hover #langDropdown {
	opacity: 1;
	visibility: visible;
}

.menge .einheit {
    white-space: nowrap;
    align-items: center;
    display: flex;
    color: #aaa;
}
.einheit {
    color: #aaa;
}

.mengedetail {
	overflow: hidden;
	/*padding-right: 0;*/
}
.mengedetail div button {
	border: none;
    background: white!important;
}
.mengedetail div button:last-of-type {
    border-bottom: 1px solid #ccc;
}

.select2-container {
	height: calc(1.5em + .75rem + 2px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}
	.select2-container--default .select2-selection--single {
		border: none;
		padding: 0.375rem 01.75rem 0.375rem 1rem;
		height: 100%;
	}
		.select2-container--default .select2-selection--single .select2-selection__rendered {
			padding: 0;
		}
		.select2-container--open .select2-dropdown--below {
			top: -4px;
		    left: -1px;
		    border-color: #ccc;
		}
		.select2-container--default .select2-search--dropdown .select2-search__field {
			border-color: #ccc;
		}
		.select2-container--default .select2-selection--single .select2-selection__arrow {
			top: 5px;
		}
		.select2-container--default .select2-results>.select2-results__options {
			max-height: 220px;
		}

/* Has Error */
.form-group.has-error label {
	color: #a90329!important;
}
.form-group.has-error label:before,
.form-group.has-error input {
	border-color: #a90329;
}
.form-group.has-error small {
    color: #a90329;
}

/* Has Success */
.form-group.has-success label {
	color: #739e73!important;
}
.form-group.has-success input,
.form-group.has-success .select2 {
	border-color: #739e73;
}


.form-group small {
	white-space: nowrap;
	display: block;
}
.form-group div.custom-checkbox + small {
	display: none!important;
}
.imgBestellzsm {
	height:50px;
	width: auto;
}

.SmallBox {
    position: fixed;
    /*right: 5px;*/
    /*top: 20px;*/
    /*width: 420px;*/
    color: #fff;
    z-index: 9999;
    overflow: hidden;
    border: 1px solid transparent;
    padding: 15px;
    padding-bottom: 5px;

	bottom: 0;
    left: 0;
    width: 100vw;
    top: auto;
}
.SmallBox .foto {
    font-size: 40px;
    position: absolute;
    left: 25px;
}
.SmallBox .textoFoto {
    width: 78%;
    margin: 3px 20px 3px 80px;
    float: left;
}
.SmallBox span {
    font-size: 17px;
    font-weight: 300;
    letter-spacing: -1px;
    display: block;
    margin: 4px 0;
}
.SmallBox p {
    font-size: 13px;
    margin-top: 2px;
}
.animated {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}
.animated.fast {
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
}
.animated.fadeInRight {
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes fadeInRight {
    0% {
        opacity: 0;
        -moz-transform: translateX(20px)
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
}

@-o-keyframes fadeInRight {
    0% {
        opacity: 0;
        -o-transform: translateX(20px)
    }

    100% {
        opacity: 1;
        -o-transform: translateX(0)
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(20px)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

.animated.fadeInRight {
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight
}

.username {
	position: absolute;
    right: 20px;
    color: #474F59;
	height: 100%;
	top: 0;
	display: flex;
	/*align-items: center;*/
    align-items: flex-end;
	justify-content: center;
	flex-direction: column;
}
.username small {
	margin-bottom: -6px;
	margin-right: 1px;
}

.username > span {
	color: #f4a20f;
}

#AGBModal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	background-color: rgba(0,0,0,0.7);
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
}
#AGBModal.visible {
	opacity: 1;
	visibility: visible;
}
#AGBModal .modal-body {
	top: 100px;
	left: 20px;
	width: calc(100% - 40px);
	height: 400px;
	background-color: white;
	overflow-y: scroll;
}

.disguisedLink {
	background: none;
    border: none;
    color: #1b659c;
    padding: 0;
}

.alert-info {
	color: #2c5468;
    background-color: #d1ecf1;
    border-color: #bee5eb;
    border-left: 10px solid #bee5eb;
}

.checkouttable {
	font-size: 0.9em;
}

.oeffnungszeitenTable tr > td:not(:last-of-type) {
	padding-right: 10px;
}


span.badge {
    background: #ccc;
    border-radius: 5px;
    padding: 5px 10px;
    margin-right: 5px;
    color: black;
    font-weight: 400;
}