/* custom styles */

/* menu */

#main-nav {
	order: 4;
	max-width: 100%;	
}

.toggleSearch #searchWrapper {
	order: 4;
}

#searchWrapper {
	display: none;
}

#main-nav.gwMenu {
	width: 100%;
	margin-top: 10px;
	display: flex;
	--fontsize: 18px;
}

#main-nav.gwMenu .gwm-wrapper .gwm-wrapper{
	--fontsize: 16px;
	--padding-top: 10px;
	--padding-bottom: 10px;
}

.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%);
}

#service-menu > .gwm-wrapper,
#kundenkonto-menu > .gwm-wrapper {
	transition: opacity 0.3s;
	opacity: 0;
	display: inline-flex;
	height: 0;
  	overflow: hidden;
}

#service-menu.gwm-clicked > .gwm-wrapper,
#kundenkonto-menu.gwm-clicked > .gwm-wrapper,
#service-menu:hover > .gwm-wrapper,
#kundenkonto-menu:hover > .gwm-wrapper {
	opacity: 0;
	height: inherit;
  	overflow: inherit;
}

#service-menu.opacity-transition > .gwm-wrapper,
#service-menu:hover:not(.gwm-clicked) > .gwm-wrapper,
#kundenkonto-menu.opacity-transition > .gwm-wrapper,
#kundenkonto-menu:hover:not(.gwm-clicked) > .gwm-wrapper {
	opacity: 1;
	height: auto;
}

.isDesktop:not(.isTouchSupported) #service-menu:not(:hover) > .gwm-wrapper,
.isDesktop:not(.isTouchSupported) #kundenkonto-menu:not(:hover) > .gwm-wrapper {
	display: none;
}

.gwMenu .transition > .gwm-wrapper {
	display: inline-flex!important;
}

.breadcrumb {
    margin: 10px 0;
    --shopnav-background: #fff;
}

.selected:not(.shopMenuBtn ) > .gwm-content,
.selected:not(.shopMenuBtn ) > a {
	background-color: #f0f0f0;
    color: var(--main-color);
    font-weight: bold;
}

#shopnav li[data-article-id="0"] {
    display: none;
}

#logo {
	min-width: none;
	order: 1;
	max-width: 20%;	
}

#logo img {
	transition: all .5s;
	height: 45px;
	width: auto;
	image-rendering: optimizequality;
	transform: rotate(353deg) translate(2px, -4px) scale(1.4);
}

#zum-shop {
	background-color: var(--main-color);
	color: var(--white);
	align-items: center;
	display: flex;
	padding: 0 10px;
}

#tel {
	order: 2;
	text-decoration: none;
	font-size: 16px;
}

#searchWrapper {
	order: 2;
	--seach-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;
	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');
}

#productsInCart {
	transform: translate(-33px, -29px);
}

#content {
	box-shadow: none;
	padding-bottom: 20px;
}

#social-icons {
	margin-bottom: 30px;
}

#zertifikate-logos img {
	max-height: 100px;
	width: auto;
}

#footer {
	margin-top: 20px;
}

#footer-menu {
	--cms-menu-back-color: transparent;
}

#footer-menu ul {
	align-items: center;
	justify-content: center;
	display: flex;
}


#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);
}

#sidemenu {
	--top: 204px;
}

.login-popover .cmsHeadline {
	--cms-text-align: center;
}


/* narrow page */

.narrow-page {
	--line-height		: 1.5;
	--padding-top		: 10px;
	--padding-bottom	: 50px;
	--page-min: min(100vw, var(--page-width));
	--page-padding: calc((var(--page-min) - var(--narrow-text-width, 600px)) / 2 );

	padding:  var(--padding-top) max(var(--padding-left), var(--page-padding)) var(--padding-bottom);	
	width: var(--page-min);
	max-width: var(--page-min);
	margin-left: auto;
	margin-right: auto;
	background-color: var(--white);
	display: table;
}

.narrow-page div,
.narrow-page span,
.narrow-page p {
	line-height: var(--line-height);
}

.narrow-page .cmsCol > h1:first-child,
.narrow-page .cmsCol > h2:first-child {
	margin-top: 0;
}

.narrow-page .cmsCol {
	padding-bottom: 30px;
}

.narrow-page > h1:first-child {
	margin-top: 10px;
}

.homepage #contentWrapper > .cmsFlexible:not(.page100, .narrow-page) {
	display: block;
	width: var(--page-width);
	max-width: 100vw;
	margin-left: auto;
	margin-right: auto;
}


@media screen and (min-width: 512px) {
	#headInformation {
		display: block;
    }
}

@media screen and (min-width: 1200px) {
	#tel {
		font-size: 22px;
	}

	#tel::before {
		content: 'Tel: ';
	}

	#logo img {		
		transform: rotate(353deg) translateY(-2px) scale(1.2);
		height: 93px;
	}

	.scrolled #logo img{
		transform: rotate(353deg) translate(10px, 1px) scale(1.5);
    	height: 50px;
	}
	
	.km-suche {
		display: none;
	}

	#productsInCart {
		transform: translate(-31px, -33px);
	}

	#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;
	}
	
	.narrow-page > h1:first-child {
		margin-top: 40px;
	}
}


@media screen and (max-width: 799px) {
	.slider-headline {
		position: static;
	}
}
