/* custom styles */

input:invalid {
	scroll-margin: var(--header-height, 200px) 0 0 0;
}

a {
	cursor: pointer;
}

#aboChangedMsg {
	display: none;
}

.baustelle .wrapper > .cmsFlexible,
.baustelle #shop_tpl_content > .cmsFlexible {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 100%;
	text-align: center;
	padding-top: 70px;
}

#shop-grid-main {
	overflow: hidden;
}

#header,
#footer-wrapper {
	background-color: var(--white);
}

#header-wrapper {
	align-items: center;
	flex-direction: column;
}

#contentWrapper,
#info {
	background-color: inherit;/* var(--wrapper-background); */
}

#contentWrapper {
	padding-bottom: 50px;
	display: flow-root;
}

#contentWrapper > .taxText {
	display: none;
}

#contentWrapper > .cmsFlexible,
.tipps {
	--fontsize: 18px;
	font-size: var(--fontsize);
	--line-height: 30px;
}

#contentWrapper > .cmsFlexible > .cmsHeadline {
	margin-top: 0;
}

#contentWrapper > .cmsFlexible li > span,
.tipps li > span {
	display: contents;
}

#header {
	padding-top: 0px;
	padding-bottom: 4px;
	position: relative;
	max-width: var(--page-width);
	display: grid;
	justify-content: stretch;
	grid-template-areas: 'headerLogo headerNav headerNav'
						 'headerLogo headerKontakt headerSearch';
	border-bottom: 1px solid var(--green);
	gap: 5px;
}

.toggleSearch #header {
	padding-bottom: 0px;
	grid-template-areas: 'headerLogo headerNav'
						 'headerLogo headerKontakt'
						 'headerSearch headerSearch';
}

.toggleSearch #searchWrapper {
	--search-max-width: 512px;
	--search-width: 100%;
	margin-right: 0;
}

#home-start {
	display: flow-root;
}

.kontaktdaten-header {
	order: 2;
	display: inline-flex;
	flex-direction: row;
	/* position: absolute;
	right: 0;
	transform: translateY(25px); */
	font-size: var(--fontsize-small);
	grid-area: headerKontakt;
	justify-self: end;
	align-self: end;
}

.kontaktdaten-header a {
	text-decoration: none;
	color: var(--text-color);
}

.tel-header {
	padding: 0 10px;
}


/* menu */

#main-nav {
	order: 4;	
}

.toggleSearch #searchWrapper {
	order: 4;
}

#searchWrapper {
	display: none;
	grid-area: headerSearch;
	justify-self: start;
	align-self: end;
	justify-content: end;
	margin-right: 20px;
}

#main-nav.gwMenu {
	width: 100%;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 7px;
	display: flex;
	justify-content: center;
}

#main-nav.gwMenu > .gwm-wrapper > ul > li > a,
#main-nav.gwMenu > ul > li > a {
	font-weight: bold;
}

#main-nav.gwMenu > .gwm-wrapper,
#main-nav.gwMenu > ul {
	max-width: var(--page-width);
}

.gwMenu .shopMenu {
	display: none;
}

.gwMenu .homeMenu {
	--item-background-color: var(--main-color);
	--item-background-color-hover: var(--main-color);
	text-indent: -9999px;
}

.gwMenu .homeMenu a::before {
	content:url('img/Home_weiss.png');
	position: absolute;
	left: 50%;
	top: 50%;
	text-indent: 0;
	transform: translate(-50%, -46%);
}

.shop-menu-back {
	background-image: url('img/NAVI_Shop-Button.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	--text-color: var(--white);
	--text-color-hover: var(--white)!important;
	--item-background-color: transparent!important;
	--item-background-color-hover: transparent!important;
}

#main-nav .abokisten-menu-back {
	background-image: url('img/klecks.png');
	background-repeat: no-repeat;
	background-size: 96% 98%;
	background-position: center;
	--text-color: var(--text-color);
	--text-color-hover: var(--text-color)!important;
	--item-background-color: transparent!important;
	--item-background-color-hover: transparent!important;
}

#shop-grid-left .shop-menu-back {	
	padding: 15px;
	text-decoration: none;
	color: var(--white);
	transform: translate(60%, 0px);
	display: none;/* inline-block; */
	text-align: center;
}

.gwTree .shop-menu-back {
	background-position: 21px;
	background-size: contain;
}

#main-nav.gwTree .abokisten-menu-back {
	background-position: 16px 0px;
	background-size: 23% 89%;
}



.gwMenu .transition > .gwm-wrapper {
	display: inline-flex!important;
}

.breadcrumb {
    margin: 10px 0;
    --shopnav-background: #fff;
}

.selected:not(.shopMenuBtn ) > .gwm-content,
.selected:not(.shopMenuBtn ) > a {
    color: var(--orange);
    font-weight: bold;
}

#shopnav li[data-article-id="0"] {
    display: none;
}

/* header */

#logo {
	padding-top: 10px;
	padding-left: 10px;
	min-width: 110px;
	order: 1;	
	grid-area: headerLogo;
	justify-self: start;
}

#logo img {
	max-height: max(50px, min(10vw, 110px));
  	max-width: 100%;
	height: 110px;
}

#zum-shop {
	background-color: var(--main-color);
	color: var(--white);
	align-items: center;
	display: flex;
	padding: 0 10px;
}

#searchWrapper {
	order: 2;
	--search-width: 220px;
	--seach-max-width: 30%;	
	border: 1px solid var(--lightgrey);
}

#searchWrapper input:hover,
#searchWrapper button:hover,
#searchWrapper input,
#searchWrapper button {
	--focus-color: var(--lightgrey);
	--button-border: var(--lightgrey);
}

#searchField {
	background-color: var(--white);
	border: none;
}

#searchFieldSubmit {
	background-color: var(--white);
	border: none;
}

#searchFieldSubmit > img {
	height: 24px;
  	width: auto;
  	padding-top: 2px;
}

#kunden-navigation {
	order: 3;
	/* max-width: fit-content;
	align-self: flex-start; */
	justify-self: end;
	padding-right: 10px;
	grid-area: headerNav;
}

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

#loginLink,
#neukundeLink {
	--fontsize: 12px;
	background-color: var(--home-color);
	color: var(--text-color);
	text-decoration: none;
	padding: 3px 5px;
	height: var(--input-height);
	align-self: normal;
	align-items: center;
	display: inline-flex;
	border-radius: var(--button-border-radius);
	font-size: var(--fontsize);
	font-weight: var(--semibold);
}

#neukundeLink {
	background-color: var(--green);
	margin-right: 10px;
}

#liefergebiet-result .btn {
	margin-bottom: 10px;
}

.kunden-navigation > .gwm-wrapper > ul {
	align-items: center;
}

.kunden-navigation > .gwm-wrapper > ul > li > a {
	padding-top: 0;
	margin-top: 0;
	font-size: var(--fontsize);
	font-weight: var(--semibold);
}

/* #kunden-navigation img {
	min-width: 30px;
	height: auto;
} */

.km > a img + span {
	display: none;
}

.km > a:before {
	all:initial;
}

#activeFilterCount, .activeFilterCount {
	transform: translate(-20px, -20px);
}

#content {
	box-shadow: none;
	padding-bottom: 20px;
}

/* Abos */ 

.shopGroupBox ~ h1 {
	display: none;
}

.abo-list .view-tile .tile-wrapper > .form-wrapper {
	grid-template-rows: auto-fill;
}

.abo-list .product-bottom {
	min-height: 0;
}

.aboZusammenstellung {
	max-height: 200px;
  	overflow-y: auto;
}

/* Breadcrumb */

#product-breadcrumb {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	position: relative;
}

#product-breadcrumb .btn {
	position: relative;
}

.breadcrumb {
	max-width: calc(100% - 100px);
}

.breadcrumb > li {
	padding: 0;
	margin-right: 25px;
}

.breadcrumb > li::after {
	right: -21px;
}

.breadcrumb > li:first-child {
	display: none;
}

/* Warenkorb */

#productsInCart, .productsInCart {
	transform: translate(-23px, 11px);
	font-size: 12px;
	line-height: 12px;
}


/* allgemein */

#top-of-page {
	padding-top: 20px;
	padding-right: 20px;
	display: block;
	text-align: right;
	text-decoration: none;
	color: var(--text-color);
	clear: both;
}

#top-of-page::before {
	content: url(img/zuruecknachoben.png);
	padding-right: 10px;
	position: relative;
  	top: -3px;
}

.tileName:visited {
	color: var(--tile-name-color);
}

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

.shop .gruenerText {
	color: var(--greendark);
}

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

form:invalid input[type="submit"] {    
	--button-color: var(--darkgrey);
}

.cmsDisabled input[type="submit"], 
input[type="submit"][disabled="disabled"] {
	--button-color: var(--text-color);
}

.searchResultGroup .collapsible-count {
	padding: 2px 7px;
}

.shopGraduatedPriceTABLE td {
	color: var(--shop-green);
	font-weight: bold;
}

/* product detail */

.productDetailWrapper .product,
.productDetailWrapper:hover .product {
	padding-top: 20px;
	padding-bottom: 20px;
}

.productDetailWrapper .product,
.productDetailWrapper:hover .product,
.productDetailWrapper .tab-content,
.productDetailWrapper .taxText {
	padding-left: var(--padding-left);
	padding-right: var(--padding-right);
}

.productDetailWrapper .taxText {
	padding-bottom: 20px;
}

/* filter */

input.removeFilter {
	color: var(--white);
}

.filterText button, .filterText .btn {
	line-height: initial;
}


/* sidemenu */

#sidemenu {
	--background: transparent;	
	--top: 197px;
	display: none;
	flex-direction: column;
	gap: 10px;
	right: 10px;/*not when bundle.css*/
}

#sidemenu a {
	border-bottom: none;
}

.sidemenu-service::before {
	content: url('img/05_STICKYNAVI_Telefon.png');
}

.sidemenu-mail::before {
	content: url('img/05_STICKYNAVI_E-Mail.png');
}

.sidemenu-warenkorb::before {
	content: url('img/05_STICKYNAVI_Einkaufskorb.png');
}

#productsInCartPreview {
	transform: translate(17px, 25px);
	font-size: 14px;
	padding: 4px 6px 4px 5px;
	line-height: 5px;
}



/* filter */

#filter .regionInfo {
	display: none;
}

/* Produkte */

.productPrice {
	font-weight: bold;
}

.product-unit {
	flex: 1;
}

.price-currency {
	position: relative;
	top: 2px;
}

.tile-list, .productDetailWrapper {
	--price-color: var(--text-color);
}


/* icon-navi */

#shop-icon-navi {
	margin-top: 20px;
	margin-bottom: 20px;
	align-items: flex-end;
}

#shop-icon-navi > a {
	display: flex;
	align-items: center;
	color: var(--text-color);
	text-decoration: none;
	flex-direction: column;
}

#shop-icon-navi > a span {
	white-space: nowrap;
}

#shop-icon-navi > a span::after {
	content: url(img/01_NAVI_Pfeil_rechts.png);
	padding-left: 5px;
	position: relative;
  	top: 4px;
}

#shop-icon-navi img {
	padding-right: var(--icon-navi-padding-right, 0);
}

/* introseite */

.shopintro .col-container .cmsColRight {
	position: relative;
}

.shop-intro-stoerer {
	align-self: center;
}

@media screen and (max-width: 799px) {
	.shopintro .col-container .cmsColLeft,
	.shopintro .col-container .cmsColRight,
	.shopintro .col-container .cmsCol {
		width: 100%;
		float: none;
	}
}

@media screen and (min-width: 800px) {
	.shop-intro-stoerer {
		position: absolute;
		top: 0px;
		left: -56%;
		max-width: 30vw;
	}

	.tipps .shop-intro-stoerer {
		left: -69%;
		max-width: 20vw;
	}
}
 


/* slider */

.swiper-button-next::after, 
.swiper-button-prev::after {
	color: var(--white);
}

.swiper .cmsTextFormatted {
	position: absolute;
	background-color: var(--dunkelgruen);
	color: var(--textaufdunkel);
	font-size: clamp(12px, 3vw, 20px);
	line-height: clamp(16px, 4vw, 28px);
	font-weight: bold;
	padding: clamp(5px, 2vw, 10px) clamp(45px, 8vw, 65px) clamp(5px, 2vw, 10px) 10px;
	bottom: min(4vw, 70px);
  	left: min(3vw, 50px);
	background-image: url(img/02_SLIDER_Textkasten_Pfeil.png);
	background-repeat: no-repeat;
	background-position: 90% center;
	background-size: auto 56%;
}

.swiper .cmsTextFormatted > div {
	font-weight: normal;
	font-size: 16px;
}

.shop .swiper .cmsTextFormatted,
.swiper .cmsTextFormatted.hell {
	background-color: var(--green);
	color: var(--text-color);
}


/* footer */

#footer {
	display: flex;
	justify-content: center;
	margin: 0 auto;
	padding-top: 60px;
}

#footer > div {
	width: var(--page-width);
}

#footer .footer-daten {
	--fontsize: 18px;
	--line-height: 30px;
}

#footer .footer-siegel {
	--fontsize: 18px;
	--line-height: 23px;
}

#footer .logo {
	transform: scale(.7);
}

#footer-menu {
	background-color: var(--dunkelbeige);
}

.cmsMenu {
	--cms-menu-row-gap: 10px;
}

.cmsMenu ul.cmsHorizontal li {
	--cms-menu-back-color: transparent;
	--cms-menu-padding: 0;
}


.cmsMenu ul.cmsHorizontal li a {
	text-decoration: none;
	display: inline-block;
	padding: 0;
}



#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;
}


@media screen and (min-width: 512px) {
	#loginLink,
	#neukundeLink {
		padding: 6px 10px;
		--fontsize: 14px;
	}

	#headInformation {
		display: block;
    }

	#searchWrapper {
		justify-self: center;
	}

	.kontaktdaten-header {
		font-size: var(--fontsize);
	}	

	.cmsGrid-4 {
		--col1: var(--cms-col1, 50%);
		--col2: var(--cms-col2, 50%);
		--col3: var(--cms-col3, 50%);
		--col4: var(--cms-col4, 50%);
		grid-template-columns: calc(var(--col1) - var(--column-gap)*3/4) calc(var(--col2) - var(--column-gap)*3/4);
	}	
}

@media screen and (min-width: 800px) {
	#kunden-navigation {
		padding-right: 20px;
		align-self: center;
	}

	.kontaktdaten-header {
		position: static;
		/* flex-direction: column; */
		row-gap: 10px;
		transform: none;
	}

	#shop-icon-navi {
		align-items: center;
	}

	#shop-icon-navi > a {
		flex-direction: row;
	}

	.cmsGrid-4 {
        --col1: var(--cms-col1, 25%);
        --col2: var(--cms-col2, 25%);
        --col3: var(--cms-col3, 25%);
        --col4: var(--cms-col4, 25%);
        grid-template-columns: calc(var(--col1) - var(--column-gap)*3/4) calc(var(--col2) - var(--column-gap)*3/4) calc(var(--col3) - var(--column-gap)*3/4) calc(var(--col4) - var(--column-gap)*3/4);
    }
}

@media screen and (min-width: 1000px) {
	#searchWrapper {
		display: flex;
		justify-self: end;
		margin-right: 20px;
	}
}

@media screen and (min-width: 1200px) {
	#header {
		padding-bottom: 0px;
		border-bottom: none;
	}

	.standardPadding {
		--padding-left: 20px;
		--padding-right: 20px;
	}

	.km-suche {
		display: none;
	}	

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

	.cartSum {
		margin-bottom: 0;
	}

	.shop-intro-stoerer {
		left: -58%;
	}

	#sidemenu {
		display: flex;
	}
}


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


.shop-undeliverable {
	background-color: var(--important-background);
	color: var(--white);
	text-align: center;
	padding: 5px;
}

.productMessage {
	position: absolute;
	background-color: var(--green);
	transform: rotate(-20deg);
	height: fit-content;
	width: fit-content;
	padding: 5px 10px;
	top: 15%;
	left: 5%;
}

.cart-coupon-message {
	background-color: var(--green);
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 20px;
}

.cart-coupon-message h3 {
	margin-top: 0;
}