/* custom styles */


@supports (appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none) {
	input[type="checkbox"]:not(.switch)::after {
		top: calc(50% + 2px);
		font-size: 19px;
	}
}


/* header */

#phone {
	flex: 1;
	white-space: nowrap;
	font-size: 15px;
	line-height: 1.2;
	align-self: center;
	justify-self: center;
	text-align: center;
	order: 2;
}

#phone a,
#phone a:visited {
	color: var(--green);
	/* text-decoration: none; */
}

#header {
	flex-direction: row;
	/* gap: 70px; */
	align-items: stretch;
	padding-top: 0px;
	padding-bottom: 0px;
}

#header-wrapper {
	box-shadow: 0px 3px 10px #aaa6;
}

#header-wrapper.init {
	max-height: var(--header-height);
	overflow: hidden;
}

#header-container {
	order: 3;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	row-gap: 30px;	
}

#header-siegel {
	display: none;
}

#header-siegel img {
	max-height: 40px;
	width: auto;
	vertical-align: top;
}

/* customer text */

#customerText {
	margin-left: auto;
	margin-right: auto;
	width: 100vw;
}


/* tipps */

#empfehlung,
.tipp #product-list,
.tipp #productWrapper {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--page-width);
}

.tipp #product-breadcrumb,
.tipp #products-breadcrumb {
	display: none;
}

.big-kachel-content .distance {
	height: 20px;
}

.tipp .btn {
	--button-background: var(--orange);
	--button-color: var(--white);
	--button-padding: 10px 20px 6px;
	--button-fontsize: 20px;
	--input-height: auto;
	align-self: center;
	border: none;
}

.tipp .btn::after {
	content: '>';
	padding-left: 10px;
}

@media screen and (min-width: 1200px) and (not (pointer: coarse)) {	
	#contentWrapper.tipp #shop-grid-main {
		grid-column: 1 / -1;        
	}

    #page-wrapper > .wrapper {
        margin-left: auto;
		margin-right: auto;
    }

	#shop-grid-left:not(.tipp-left) {
		display: block;
	}

	#shop-grid-left.tipp-left {
		display: none;
	}

	.tipp #content {
		padding-right: 0;
	}
}




/* menu */

#main-nav {
	order: 4;
	max-width: 100%;	
}

.toggleSearch #searchWrapper {
	order: 4;
	position: absolute;
	top: var(--header-height);
	left: 0;
}

#searchWrapper {
	display: none;
	align-self: center;	
	flex: 1;
}



#logo {
	order: 1;	
	background-color: var(--white);
	align-self: flex-end;
	transition: transform 200ms;
	border-bottom: var(--overline) solid var(--orange);
}

#logo img {
	max-height: 50px;
	width: auto;
	height: auto;
}

#searchWrapper {
	order: 2;
	--search-max-width: 30%;
}

#kunden-navigation {
	order: 3;
	max-width: fit-content;
}

#loginWrapper {
	display: flex;
	justify-content: center;
}

#kunden-navigation-login {
	background-color: var(--orange);
	color: var(--white);
	text-decoration: none;
	padding: 6px 10px 3px;
	height: var(--input-height);
	align-self: normal;
	align-items: center;
	display: inline-flex;
	border-radius: var(--button-border-radius);
}

.km-sortiment > a:before {
	content:url('img/Smartphone_Sortiment.png');
}
.km-dauerbestellung > a:before {		
	content:url('img/Smartphone_Dauerbestellung.png');
}
.km-merkzettel > a:before {
	content:url('img/Smartphone_Merkzettel.png');
}
.km-pausieren > a:before {
	content:url('img/Smartphone_Pausieren.png');
}
.km-service > a:before {
	content:url('img/Smartphone_Service.png');
}
.km-warenkorb > a:before {
	content:url('img/Smartphone_Warenkorb.png');
}
.km-kundenkonto > a:before {		
	content:url('img/Smartphone_Kundenkonto.png');
}
.km-filter > a:before {		
	content:url('img/Smartphone_Filter.png');
}
.km-suche > a:before {		
	content:url('img/Smartphone_Suche.png');
}


#loginDIV form > div {
	width: 100%;
}


#orderContent .kundenlogin h1.cmsHeadline,
#orderContent .neukundenlogin h1.cmsHeadline {
	display: inline-block;
	text-align: left;
	margin-bottom: 30px;
}

#orderContent #liefergebiet {
	margin-top: 0;
}

@media only screen and (max-width: 512px) {
	#loginDIV {
		display: flex;
		flex-direction: column;		
		align-items: center;
		text-align: center;
	}

	#orderContent #customer {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	

	.cmsColumns > * > .cmsCol.neukundenlogin {
		margin-top: 80px;
	}

	.cmsColumns > * > .cmsCol.neukundenlogin, 
	.cmsColumns > * > .cmsCol.kundenlogin {
		width: 100%;
	}
}

#content {
	box-shadow: none!important;
	padding-bottom: 20px;
	--grid-template-columns: 250px 1fr;
}



/* shop */

.productSpecialPrice {
	--fontsize-small: 13px;
}

.productName {
	--fontsize-large: 20px;
	height: 39px;
	line-height: 1;
	font-weight: normal;
}

.product-price {
	justify-content: space-between;
}

.product-input {
	margin-top: 40px;
}

.view-list .tile-wrapper.view-compact .product-bottom {
	max-height: 230px;
}

/* .view-compact:not(:hover) .deposit {
	display: none;
} */

#filterAllergie ul, 
#filterKontrolle ul {
	height: 90px;
}

#filter .regionInfo {
	line-height: 22px;
	font-size: 14px;
	font-family: var(--sans-fontstack);
}


.taxText {
	margin-top: 50px;
	margin-bottom: 30px;
}

#liefergebiet {
	max-width: min(300px, 80vw);
	margin-top: 20px;
	display: inline-flex;
	justify-content: center;
}

#liefergebiet input {
	padding-right: 0!important;
	text-align: center;
}

#liefergebiet-result {
	margin-top: 20px;
}

.plz-ok {
	padding: 10px 10px 8px;
	background-color: var(--green);
	color: var(--white);
	text-align: center;
	line-height: 2;
}

.plz-nok {
	padding: 10px 10px 8px;
	background-color: var(--red);
	color: var(--white);
	text-align: center;
	line-height: 2;
}

.standardMargin {
	margin-left: var(--padding-left);
	margin-right: var(--padding-right);
}

.shop-service {
	margin-left: auto;
	margin-right: auto;
}

/* shop slider */
/* .headerheight {
	--slider-height: 455px;
} */


.shop-productSlider .swiper,
.lieferanten .swiper {
	--swiper-pagination-bottom: -10px;
}


.shop-productSlider .shop-productTile {
	overflow: visible;
}

.shop-productSlider .shop-productTile {
	border: var(--border);
}

.shop-productSlider .swiper-slide {
	width: 220px;
	padding-top: 10px;
}

.shop-productSlider .swiper-wrapper,
.lieferanten .swiper-wrapper {
	padding-bottom: 50px!important;
}

/* abo */

.abo-link {
	display: block;
	text-align: center;
	text-decoration: none;
	padding-top: 2px;
	background-color: var(--orange);
	color: var(--white);
}

.abo-link:visited {
	color: var(--white);
}

.abo-label {
	color: var(--white);
	font-size: var(--fontsize-small);
	padding: 2px 5px 0;
	position: absolute;
	top: -10px;
	left: 0;
	width: auto;
}


/* message */

.message.login-popover .message-content {
	display: inline-flex;
}

/* footer */

#footer {
	margin-top: 100px;
	background-color: var(--orange);
	--cms-menu-back-color: transparent;
}

#footer a {
	color: var(--white);
	text-decoration: none;
}

#footer p {
	margin-top: 0;
}

#footer-wrapper {
	width: var(--page-width);
	margin: auto;
}

#footer-logo {
	border-top: var(--overline) solid var(--orange);
	margin-top: -80px;
	margin-bottom: 20px;
	background-color: var(--white);
	padding: 5px;
	display: inline-block;
}

#footer .cmsFlex .cmsImage {
	height: 50px;
	width: auto;
}

#footer-menu {
	--cms-menu-column-gap: 0;
	--cms-menu-row-gap: 0;
}

#footer-menu a {
	padding: 0px;
}

#footer-menu li {
	display: block;
	padding: 0;
}

.footer-datenschutz {
	--cms-menu-margin: 0 0 20px 0;
}

/* Warenkorb */


#cart .userTextFocus {
	--product-input-areas		: 'quantity unit'
							  'addToCart deleteFromCart'
							  'userText userText';
}

#cart .userTextFocus .shopIntervalSelect {
	visibility: hidden;/* width of select needed to prevent size change */
	grid-row: 1 / 1;
    grid-column: 1 / 1;
}

.cmsCol div,
.cmsCol span,
.cmsCol p {
	line-height: var(--line-height);
}


/* cart preview */

#cartPreview {
	font-size: 16px;
	--fontsize-large: 1.2em;
	--close-size: 38px;
}

#cartPreview .lieferdatum > div {
	padding: 6px 50px 2px 10px;
}

#cartPreviewGrid .cartPreviewHeadline {
	margin-top: 0px;
	padding: 3px 5px 0px;
}


/* slider */

#headSlideshow.headerheight .swiper,
#headSlideshow.headerheight .swiper-slide {
	max-height: 400px;
}

.slider-item-image.hcenter {
	transform: translateY(-50%);
	display: block;
	position: relative;
	height: fit-content;
	top: 50%;
}

.slider-item-text {
	position: absolute;
	top: 50%;
	left: 10vw;
	transform: translateY(-50%);
}

.slider-item-text.hcenter {
	transform: translateX(-50%);
	left: 50%;
	right: initial;
}

.slider-item-text.vcenter {
	transform: translateY(-50%);
	top: 50%;
	bottom: initial;
}

.slider-item-text.center {
	transform: translate(-50%, -50%);
	left: 50%;
	right: initial;
	top: 50%;
	bottom: initial;
}

.slider-item-text.slidertextlink {
	top: unset;
	bottom: 7%;
	left: unset;
	right: 0;
}

.slider-item-text > a {
	text-decoration: none;
}

.slider-item-text > p,
.slider-item-text > a > p {
	white-space: nowrap;
	font-family: var(--main-font);
	font-size: clamp(1rem, 2.7vw, 3rem);
	line-height: 0.4;
	font-weight: bold;
	text-transform: uppercase;
	padding: clamp(10px, 2vw, 25px) 6px clamp(6px, 2vw, 10px) 6px;
	margin: -10px 0;
	color: var(--white);
	background-color: var(--orange);
	display: table;	
}

.slider-item-text.shadow > p,
.slider-item-text.shadow > a > p {
	background-color: transparent;
	text-shadow: 1px 1px #000;
}

.slidertextgross > p,
.slidertextgross > a > p {
	font-size: clamp(1rem, 4vw, 5rem);
  	padding: clamp(10px, 2vw, 30px) 6px clamp(6px, 2vw, 13px) 6px;
}

.slider-item-text.slidertextlink > a > p {
	top: unset;
	bottom: 10%;
	font-size: clamp(1rem, 3vw, 1.6rem);
}

.slider-item-text > p:empty {
	background-color: transparent;
}


/* cms */

.cmsBoxBack {
	--padding-left: 0;
	--padding-right: 0;
	background-color: var(--back100);
	float: none;
}

.cmsBoxInner {
	padding: 0;
}

.cmsAnchorFormatted, .cmsAnchorFormatted:visited {
	text-decoration: none;
	color: var(--white);
	background-color: var(--orange);
	padding: 10px 20px 3px;
	text-decoration: none;
	text-transform: uppercase;
	display: inline;
}

.empfehlung .cmsAnchorFormatted {
	display: inline-block;
}

.empfehlung .green-box {
	margin-left: calc(0px - var(--padding-left));
  	margin-right: calc(0px - var(--padding-right));
}

.cmsImageNoScale,
.cmsImageNoScale img {
  width: auto!important;
  height: auto!important;
}

.cmsForm input[type="text"],
.cmsForm textarea {
	border-bottom-width: 2px;
}

.cmsForm textarea {
	width: 100%;
}

.cmsRequired.cmsNoError input {
	border-color: var(--lightgrey) ;
}

.white-box .cmsForm {
	padding: 50px  var(--padding-left) 50px  var(--padding-right);
}

.cmsInputHelp:empty {
	display: none;
}

.cmsInputHelp:empty::after {
	display: none;
}

.gruenerText {
	color:var(--green);
}

.roterText {
	color:var(--red);
}

.orange-text {
	color:var(--orange);
}

.orange-green-text {
	color: rgb(255, 210, 121);
}

.arrow-link {
	font-size: 20px;	
	color: var(--green);
	text-decoration: none;
	padding-left: 10px;
}

.arrow-link::before {
	content: '➔';
	padding-right: 10px;
}

@media screen and (min-width: 512px) {
	#headInformation {
		display: block;
    }

	#customerText {
		width: min(100vw, var(--page-width));
	}

	.customerText_anrede {
		flex: initial;
	}

	#importantMessage {
		background-color: var(--important-background);
	}

	#importantMessage .importantMessageText {
		margin-left: auto;
		margin-right: auto;
		width: var(--page-width);
	}
}

@media screen and (min-width: 600px) {


	.slider-item-text.slidertextlink {
		left: var(--left, 50%);
		transform: translateY(-50%);
		right: unset;
	}
}



@media screen and (min-width: 1000px)  {
	#header-container {
		flex: 2;
		justify-content: space-between;
	}

	.loggedin-cls #header-container {
		flex: 4;
	}

	.km-suche {
		display: none;
	}

	#searchWrapper {
		display: flex;
		visibility: visible;
		width: var(--search-width, 200px);
    	max-width: var(--search-max-width, 300px);
	}
	
	.searchResultGroup .collapsible-count {
		display: inline-block;
	}
}



@media screen and (min-width: 1200px) and (not (pointer: coarse)) {
	:root {
		--padding-left: 0px;
		--padding-right: 0px;
	}

	#header {
		column-gap: 70px;
	}
	  
	#logo {
		/* transform: translateY(42px); */
		transform: translateY(-10px);
	}

	.scrolled #logo {
		transform: translateY(-10px);
	}

	#logo img {
		max-height: none;
	}		

	#phone {
		display: none;
	}
		
	#header-siegel {
		display: block;
		align-self: center;
	}

	#header-container {
		justify-content: space-between;
		flex: 1;
	}

	.km-suche {
		display: none;
	}

	#searchWrapper {
		display: inherit;
	}
	
	#content {
		box-shadow: 0 0 5px rgba(0, 0, 0, .3);
	}

	#cart {
		background-color: #fff;
		box-shadow: 0 0 10px rgba(0,0,0,.1);
		padding: 10px;
		margin-right: 10px;
	}

	.cartSum {
		margin-bottom: 0;
	}

	.white-box .cmsForm {
		padding: 50px 80px;
	}

}

@media screen and (min-width: 1500px) {
	.slider-item-text {
		left: 20vw;
	}
}


@media screen and (max-width: 799px) {
	.slider-headline {
		position: static;
	}
}