@charset "utf-8";
@font-face{
	font-family:functionRegular;
	src:url(../fonts/function-regular/function_regular.eot);
	src:
		url(../fonts/function-regular/function_regular.eot?#iefix) format('embedded-opentype'),
		url(../fonts/function-regular/function_regular.woff2) format('woff2'),
		url(../fonts/function-regular/function_regular.woff) format('woff'),
		url(../fonts/function-regular/function_regular.ttf) format('truetype');font-weight:400;font-style:normal}

:root {
  --textFarbe: #121212;
  --bgFarbe: #ffffff;
  --weiss: #fcfcf9;
  --violett: #b40071;
  --titelFont: functionRegular, sans-serif;
  --textFont: functionRegular, sans-serif;
}
* {box-sizing: border-box; }
.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; }
body, html, #outerContainer { font-size:100%; margin:0; padding:0; width:100%; height:100%; line-height: 1.42857143; font-family: var(--textFont); font-weight:300; color:var(--textFarbe); background: var(--bgFarbe); overflow:auto; }
h1, h2, h3, h4 {font-weight: 300; }
h1 { font-size:2em; }
img { width:100%; height:auto; }
#container { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
strong { font-weight: 600; }

.videoOnly { width:70%; height:auto; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
.intro .videoOnly { width:50%; height:auto; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
.intro .impressum { display: block; position:absolute; left:0; bottom:0; line-height: 40px; padding:0 1% 0 0; color:#000; text-decoration: none; font-size: 80%; }
.embed-container { position: relative; padding-bottom: 56.25%; overflow: hidden; width: 100%; max-width:1280px; height: auto; margin:50px 0 0 0; }
.embed-container iframe, .embed-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
audio { width:100%; }

.productWrapper { width:100%; max-width:1920px; min-height:100%; margin:0 auto; padding:40px 8% 10vh 8%; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.thumbWrapper { background-size: contain; background-repeat: no-repeat; background-position: left center; height:6vh; overflow-y:hidden; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; cursor: pointer; padding:0 1%; }
.thumbWrapper img { width:auto; height:100%; mix-blend-mode:multiply;}
.imageWrapper, .textWrapper { width:45%; }
.imageWrapper { background-size: 15% auto; background-repeat: no-repeat; background-position: left top; }
.textWrapper { }
.item { margin:50px 0; }
table.data { width:100%; max-width:400px; border:none; border-collapse: collapse; }
.promoSlide table.data { max-width:550px; }
.promoSlide table.data:first-of-type { margin-top:40px; }
.promoSlide table.data:last-of-type { margin-bottom:40px; }
table.data td { border-right:1px solid var(--textFarbe); padding:5px 5%; }
table.data td:last-of-type { border-right:none; }
table.data td:first-of-type { padding-left:0; }
.thumbs { display: flex; flex-direction: row; /*flex-wrap: wrap;*/ justify-content: flex-start; column-gap: 0.5%; }
.thumbs div { width:20%; background-size: contain; background-repeat: no-repeat; background-position: center center; cursor: pointer; border:1px solid #fff; }
.thumbs div.active { border-color:var(--highlightFarbe); }
.imageBig { margin:40px 0 20px 0; position: relative; }
.horeca { position:absolute; left:2%; top:2%; width:10%; height:auto; z-index: 100; }
.thumbWrapper .horeca { width:auto; height:35%; mix-blend-mode:normal; }
.imageBig div, .imageBig a { display: block; width:100%; background-size: contain; background-repeat: no-repeat; background-position: center center; transition:background-image 0.2s ease-in-out; }
h2.price { /*text-align: center;*/ border:2px solid var(--highlightFarbe); display: inline-block; margin:0px; padding:0 5% 0 2%; font-size:1.5em; }
.promoSlide h2.price { display:inline-flex; flex-wrap: wrap; justify-content: space-between; align-items: center; max-width: 530px; }
.promoSlide h2.price .pName { width:60%; }
.promoSlide h2.price .pPrice { width:35%; }
h2.price span { /*font-size:1.35em;*/ font-weight:600; position: relative; left:5%; }
.swiper-slide-thumb-active { background-color:#ddd; }

.mittig {  margin:40px auto 0 auto; }
.absolutMittig { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.auswahlButton, .weiterButton { display:block; width:100%; max-width:400px; border:2px solid var(--violett); background-color: var(--violett); line-height: 50px; margin:30px auto; text-align: center; color:var(--textFarbe); text-decoration: none; cursor:pointer; opacity: 1;}
.weiterButton { cursor:auto; opacity:0.3; }
.weiterButton.aktiv { cursor:pointer; opacity:1; }
.intro .weiterButton { margin-bottom:50px; }
.swiper { overflow-y:auto; }
.mySwiper { position:fixed; bottom:0; left:0; border-top:5px solid var(--highlightFarbe); background-color:#fff; width:100vw; box-shadow: 0 0 10px #aaa; padding:0 5%; }
.mySwiper2 .swiper-button-next, .mySwiper2 .swiper-button-prev { position: fixed; }
.mySwiper .swiper-button-next, .mySwiper .swiper-button-prev { width:5%; height:100%; margin-top:0; top:0; background-color: #fff; }
.mySwiper .swiper-button-prev { left:0; }
.mySwiper .swiper-button-next { right:0; }
.mySwiper .swiper-button-next::after, .mySwiper .swiper-button-prev::after { font-size:25px; }

.auswahlContainer { width:100%; max-width:1024px; padding:0 2%; margin:0 auto; }
.panoSelect { display: block; font-size: 150%; line-height: 60px; color:var(--textFarbe); }

#lightcase-overlay { background: #fff; }
#lightcase-content { box-shadow: none !important; -webkit-box-shadow: none !important;}
a[class*='lightcase-icon-'], a[class*='lightcase-icon-']:focus { color:var(--textFarbe); }
a[class*='lightcase-icon-']:hover {
  color: var(--textFarbe);
  text-shadow:none;
}
a[class*="lightcase-icon-"] > span { text-indent: 0px; font-size: 16px; }
a[class*='lightcase-icon-'].lightcase-icon-close { right:20%; }
.lightcase-icon-close:before { content: '\e802'; content:'';}

.overviewWrapper { display: flex; flex-wrap: wrap; justify-content: flex-start; column-gap:2.5%; row-gap:20px; }
/*.overviewWrapper.detailView .productWrapper { width:100%; min-height:100%; transition:all 1s ease-in-out; }*/
.overviewWrapper .productWrapper { transition:all .1s ease-in-out; margin:0; padding-top:70px; border-bottom:2px solid var(--textFarbe); }

/*OVERVIEW*/
.overView .thumbs, .overView .sku, .overView .ean, .overView .description, .overView .item, .overView .data, .overView .price, .overView .abLager, .overView .embed-container { display: none; }
.overView .imageWrapper, .overView .textWrapper { width:100%; }
.overView .productWrapper { width:23%; height:23%; padding:2%; position: relative; border-bottom:none; background-color: #eee; }
.overView .imageWrapper { mix-blend-mode:multiply; }
.overView .name { font-size:1em; text-align: center; /*background-color: var(--highlightFarbe);*/ }
.overView .clickOverlay { display: block; position: absolute; left:0; top:0; width:100%; height:100%; z-index: 100; cursor: pointer; }
.overView .backToOverview { display: none; }


/*DETAILVIEW*/
.clickOverlay { display: none; }
.backToOverview { display: none; position: fixed; z-index: 500; left:0; top:0; width:100%; background-color: var(--highlightFarbe); height:55px; padding:0 2% 0 2%; font-weight: 600; }
.backToOverview div { float:right; cursor:pointer; display: none; align-items: center; margin-top:7px; }
.backToOverview div img { width:auto; height:41px; display: inline-block; margin:0 0 0 10px; }

body.overview2 { padding-top:55px; }
body.overview2 .backToOverview, .overviewWrapper2 .backToOverview { display: block; }
body.overview2 .backToOverview div { display: flex; }
.overviewWrapper2 { display: flex; flex-wrap:wrap; justify-content: flex-start; background: #000; padding-top:55px; }
.overviewWrapper2 a { display: block; width:25%; background-size: contain; background-repeat: no-repeat; background-position: center center; text-align: center; color:var(--textFarbe); text-decoration: none; background-color: #fff; line-height:initial; position: relative; border:1px solid var(--highlightFarbe); }
.overviewWrapper2.count6 a, .overviewWrapper2.count9 a { width:33.3333%; }
.overviewWrapper2 a div.serie { position:absolute; top:0; left:0; width:100%; padding:20px 4%; line-height:initial; text-transform: uppercase; color:var(--highlightFarbe); text-align: left; }
.overviewWrapper2 a div.comeIn { position:absolute; bottom:5%; left:50%; transform:translate(-50%,0); width:60px; height:40px; line-height: 40px; font-size: 20px; color:#fff; text-align:center; border-radius: 20px; background-color:var(--highlightFarbe); }
.overviewWrapper2 a div.comeIn:before { line-height: 40px; }
.overviewWrapper2 a strong { font-weight: 600; }
.overviewWrapper2 a img { display: block; background-size: cover; background-repeat: no-repeat; background-position: center bottom; }

/*HOCHKANT*/
@media screen and (max-aspect-ratio: 16/16) {
	.textBild .text, .textBild .bild { width:100%; float:none; }
}

/*QUER*/

@media screen and (max-width:800px) and (min-aspect-ratio: 16/16) {
	.textBild .text, .textBild .bild { width:100%; float:none; }
}

/*REST*/
@media screen and (max-width:960px) {
	.imageWrapper, .textWrapper { width:100%; }
	.imageWrapper { margin-bottom:50px; }
	.mySwiper .swiper-button-next::after, .mySwiper .swiper-button-prev::after { font-size:3vw; }
	.overviewWrapper2 a { width:33.3333%; }
}
@media screen and (max-width:650px) {
	h1 { font-size: 1.7em; }
	.thumbWrapper { font-size:90%; }
	.overviewWrapper2 {  }
	.overviewWrapper2 a { width:50%; }
}
@media screen and (max-width:500px) {
	body { font-size: 90%; }
	.thumbWrapper { font-size:80%; }
	.mySwiper2 .swiper-button-next::after, .mySwiper2 .swiper-button-prev::after { font-size:8vw; }
	.mySwiper2 .swiper-button-prev { left:3px; }
	.mySwiper2 .swiper-button-next { right:3px; }
}
@media screen and (max-width:400px) {
	.thumbWrapper { font-size:60%; }
	.overviewWrapper2 a { width:100%; }
}