/*







Achtung: Datei ist im shop_abgleich Kopiertask enthalten und wird ggf. regelmäßig überschrieben. Anpassungen müssen im entsprechend definierten Quellshop gemacht werden.
















*/

/* Mobile (Handy, nicht Tablet-Layout) 
	18.10.21	Patrick - untereAuswahlleiste zentriert
*/

body {
	/*font-size: 15px;*/
}
body.noscroll {
	overflow: hidden;
}

#layout_mobile_head_ueberschrift {
	display: none;
}


#layout_mobile_head_schliessen {
	display: none;
}



#layout_mobile_overlay {
	display: none;

	position: fixed;
	bottom: 70px;
	top: 62px;
	/*left: 0;*/
	right: 0;
	min-width: 500px;
	overflow: scroll;
	/*border: solid 10px #000;
	border-bottom: solid 37px #000;
	border-top: solid 1px #00000040;*/
	bottom: 0 !important;
	padding-bottom: 70px !important;
	-webkit-overflow-scrolling: touch;		/* bewirkt weiches iOs "Momentum"-Scrolling (welches Standardmaessig an ist, aber nicht bei position fixed elements) */

	padding-top: 2em;
	padding-left: 2em;
	padding-right: 2em;
	background-color: #fff;
	/*background-color: #2F2F2F;*/

	z-index: 1000;		/* weil im normalen Inhalt, bei manchen Elementen der z-index gesetzt ist, versuche ich hiermit drueber zu kommen */

	transition: bottom 0.25s ease-out;	/* wie #layout_mobile_navigation */
}
#layout_mobile_overlay.active {
	display: block;
}



.layout_mobile_bottom_sticky {
	display: none;
}
#layout_mobile_navigation {
	display: none;
}

@media (max-width: 500px) {
#layout_mobile_overlay {
		left: 0;
		min-width: auto;
}
	/* aus dem desktop-layout */
	#layout_header {
			display: none;
	}

	.inhalt{
			max-width: 500px;
			margin: 0 auto;
			padding: 0 1em;
	}



	#layout_footer {
			display: none; 
	} 
		
	#layout_footer_content{
		flex-flow: column;
		padding-top: 3em;
	}	
		#layout_footer_content .footer_abschnitt_logo{
			order: 2;
		}
		
		#layout_footer_content .bottom_center{
			order: 3;
			padding-bottom: 2em;
		}
	
	/* Ende aus dem desktop-layout */

	body {
			margin: 0;
			padding: 0;
	}

	#layout_entirePage {
			margin-bottom: 90px;		/* wenn die untere Leiste position: sticky gesetzt ist, brauchen wir das hier nicht - wir brauchen das aber wenn die untere Leiste position: fixed gesetzt ist */
	}

	/* Kopf-Bereich */
	#layout_mobile_head_ueberschrift {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			height: 50px;
			color: var(--primary-brand);
			/*box-shadow: 0 3px 6px #00000029;*/
			box-shadow: 0px 20px 40px #CECECEB3;
			margin-bottom: 1.5em;
			border-top: 3px solid;
	}
			#layout_mobile_head_ueberschrift > * {

			}

					#layout_mobile_head_ueberschrift > .left {
							text-align: left;
							flex: 1 1 10%;
							margin-left: 2em;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							display: flex;
							align-items: center;
							gap: 1em;
					}				
							#layout_mobile_head_ueberschrift img {
									width: 2em;
									height: 2em;
							}					
							#layout_mobile_head_ueberschrift > .left a {
							}
									#layout_mobile_head_ueberschrift > .left a .arrow {
											margin-right: 0.3em;
									}
											#layout_mobile_head_ueberschrift > .left a .arrow img {
													height: 20px;
													vertical-align: middle;
											}
									#layout_mobile_head_ueberschrift > .left a .bez {

									}
									#layout_mobile_head_ueberschrift > .left .current {
											cursor: default;
									}
									
					#layout_mobile_head_ueberschrift > .center {
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-weight: 500;
					}		
					
					#layout_mobile_head_ueberschrift > .right {
							flex: 1 0 10%;
							margin-right: 2em;
							position: relative;		/* fuer die absolut positionierte Nummer */
							display: flex; 
							justify-content: end;
							align-items: center;
					}
							#layout_mobile_head_ueberschrift > .right img {
									font-size: 35px;		/* Als img-alt-Text habe ich das Unicode-Symbol von einem Warenkorb hinterlegt. Die alt-Zeichen sind Text welcher mit der Schriftgroesse font-size geaendert werden kann */
									width: 1.1em;
									height: 1.1em;
							}
							#layout_mobile_head_ueberschrift > .right span {
									color: #fff;
									text-align: center;
									background: var(--accent-color);
									position: absolute;
									width: 1.4em;
									height: 1.4em;
									line-height: 1.4em;
									border-radius: 100%;
									font-size: .875em;
									top: 0;
									right: 2em;
							}
			#layout_mobile_head_ueberschrift a {
					color: #0E0E0F;
					text-decoration: none;
			}
					#layout_mobile_head_warenkorb_number {
							color: #FFFFFF;
							height: 16px;
							width: 16px;
							background-color: #F50B30;
							border-radius: 50%;
							display: flex;
							justify-content: center;
							align-items: center;
							/* border: 2px solid #0E0E0F; */
							font-weight: bold;
							position: absolute;
							right: 0px;
							top: 0px;
							font-size: 10px;
					}
	#layout_mobile_head_schliessen {
			display: none;
			/* display: flex; */
			align-items: center;
			justify-content: space-between;
			/*background-color: #2F2F2F;
			border:solid 8px #000;*/
			padding: 0 1em 7px 1em;
			height: 62px;

			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			/*color: #A7A7A8;*/
			font-family: var(--secondaryFont);
			border-top: 4px solid #000;
			z-index: 1000;		/* weil im normalen Inhalt, bei manchen Elementen der z-index gesetzt ist, versuche ich hiermit drueber zu kommen */
			background: rgb(255,255,255);
			background: linear-gradient(180deg, rgba(255,255,255,1) 85%, rgba(204,204,204,1) 85%, rgba(255,255,255,1) 100%);

	}
			#layout_mobile_head_schliessen > * {
					flex: 1 0 0;
			}
					#layout_mobile_head_schliessen > .middle {
							/*font-size: 15px;*/
							font-size: 1.125em;
							font-weight: 400;
							text-align: center;
							flex: 6 0 0 !important;
					}
					#layout_mobile_head_schliessen > .left {
							text-align: left;
							cursor: pointer;
							display: flex;
					}
					#layout_mobile_head_schliessen > .left > img{
							transform: rotate(-90deg)
					}
					#layout_mobile_head_schliessen > .right {
							text-align: right;
							cursor: pointer;
							display: flex;
							justify-content: end;
					}
							#layout_mobile_head_schliessen > .right img {
									width: 2em;
							}
							#layout_mobile_head_schliessen > .right > * {
									/*vertical-align: middle;*/
									/*display: inherit;*/
							}
					
	/* Ende Kopf-Bereich */


	.layout_mobile_bottom {
		position: fixed;
		bottom: 60px;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 0.75);
		padding: 1rem;
		backdrop-filter: blur(1em);
	}		
	/* auf einzelnen Seiten kann im mobilen Layout an die untere Leiste mit dieser Klasse (Javascript-optimiert) weiterer Sticky-Content gesetzt werden, z.B. http://test-lay.raumtextilienshop.de/plissees/cosiflor-209.27.html */
	.layout_mobile_bottom_sticky {
			position: -webkit-sticky;
			position: sticky;
			bottom: 80px;
			transition: bottom 0.25s ease-out;	/* wie #layout_mobile_navigation */
	}
	.artikelKonfigurieren {
			display:flex;
			flex-flow: row wrap;
			gap: 0.5rem;
			border: 1px solid #b1b1b1;
			padding: 1rem 0.5rem;
			/*background-color: #ffffff;
			border-top: 1px solid #dadbdd;
			padding-left: 0;
			padding-right: 0;
			padding-top: 1em;
			padding-bottom: 2em;*/
			justify-content: center;
			align-items: center;
			background: rgba(255,255,255,0.75);
			backdrop-filter: blur(5px);
	}
	
			.artikelKonfigurieren .wuenscheHinweis {
					flex: 1 1 calc(65% - 0.25rem);
					font-size: 0.875rem;
					font-weight: 400;
					text-align: center;
					padding: 0.5rem 0rem;
					border: 2px solid #000;
					box-sizing: border-box;
					cursor: pointer;
					/*background: url("/rollos/konfigurator/icons/haken_aktiv.svg") no-repeat 0.5rem 50%;
					background-size: 1rem auto;*/
					display: flex;
					flex-flow: row nowrap;
					align-items: center;
					justify-content: space-around;
			}
			
					.artikelKonfigurieren .wuenscheHinweis img {
							width: 1.25rem;
							filter: grayscale(100%);
							opacity: 0.25;
					}
					.artikelKonfigurieren .wuenscheHinweis.hinweisOk img {
							filter: grayscale(0%);
							opacity: 1;
					}
			
			.artikelKonfigurieren .layout_mobile_bottom_sticky_right {
					/* flex: 1 1 calc(35% - 0.25rem); */
					flex: 1 1 100%;
					display: flex;
					align-items: center;
					gap: 0.25em;
			}

			.artikelKonfigurieren .buttonKonfigurierenMobile, a[id^="button_stoffprobe_mobile_"] {
					display: flex;
					gap: 1em;
					justify-content: center;
					align-items: center;
					/*font-size: 14px;*/
					border:0;
					padding: 0.75rem 0;
					text-decoration:none;
					flex: 5 0 0;
					text-align:center;
					cursor: pointer;
					font-weight: 500;
					color: #fff;
					background: #000;
			}
					.artikelKonfigurieren .child_buttonKonfigurierenMobile{
							display: flex;
							justify-content: space-between;
							align-items: center;
							gap: 0.5em;
							flex-flow: row nowrap;
							/*padding: 0.5rem;*/
							/*padding-left:1em;
							padding-right:1em;*/
					}

							.artikelKonfigurieren .child_buttonKonfigurierenMobile img{
									width: 100%;
									min-width: 1em;
									max-width: 2em;
									/*margin-left: 1em;*/
							}
			.layout_mobile_bottom_sticky_amount {
					flex: 2 0 0;
					text-align: center;
			}
					#layout_mobile_bottom_sticky_amount_input {
							-moz-appearance: none;
							-webkit-appearance: none;
							appearance: none;

							border: 2px solid #f2f3f5;
							padding-top: 0.4em;
							padding-bottom: 0.4em;
							padding-left: 1em;
							padding-right: 1em;
							background-color: #ffffff;
							color: #0E0E0F;
							width: 9ch;
					}
					#layout_mobile_bottom_sticky_amount_input {
							background-image: linear-gradient(45deg, transparent 50%, #0E0E0F 50%), linear-gradient(135deg, #0E0E0F 50%, transparent 50%);
							background-position: calc(100% - 15px) calc(1em + 0px), calc(100% - 10px) calc(1em + 0px);
							background-size: 5px 5px, 5px 5px;
							background-repeat: no-repeat;
					}
					#layout_mobile_bottom_sticky_amount_input:focus {
							background-image: linear-gradient(45deg, #0E0E0F 50%, transparent 50%), linear-gradient(135deg, transparent 50%, #0E0E0F 50%);
							background-position: calc(100% - 10px) calc(1em - 2px), calc(100% - 15px) calc(1em - 2px);
							background-size: 5px 5px, 5px 5px;
							background-repeat: no-repeat;
							border-color: #c2c3c5;
							outline: 0;
					}

			.layout_mobile_bottom_sticky_right {
					flex: 2 0 0;
					text-align: right;
			}
					.artikelKonfigurieren .textPreisMobile{
							color: #0E0E0F;
							margin-top: 0 !important;
							font-weight: 600;
					}
					.layout_mobile_bottom_sticky_mwst {
							font-size: 11px;
					}


	/* Navigation unten */
	@media(max-width: 500px) {

	}
	
	#layout_mobile_navigation * {
			box-sizing: border-box;
			color: #fff;
	}
	
	#layout_mobile_navigation {
			display: flex;
			align-items: stretch;
			
			height: 60px;
			/*
			position: -webkit-sticky;
			position: sticky;
			bei position: sticky ist die Leiste bei wenig HTML-Inhalt zu weit oben. Sie klebt unterhalb des contents
			bei position fixed muss sichergestellt werden, dass die untere Leiste keine benoetigten Inhalte verdeckt (wenn bis runter gescrollt wurde)
			*/
			position: fixed;
			bottom: 0;
			/*width: calc(100% - 20px);*/		/* diese Angabe ist noetig, wenn es ueberbreite Elemente (z.B. grosse Tabelle) auf der Seite gibt, z.B. /top/insektenschutz/fliegengitter-pollenschutz.html */
			width: 100%;
			transition: bottom 0.25s ease-out;
			z-index: 1850;		/* wenn Elemente im Seitenlayout einen hohen z-index haben. So dass das hier noch drueber liegt */
			/*margin-top: 4px;*/
			background-color: #0E0E0F;
			/*border-radius: 3em;*/
			/*right: 50%;
			transform: translateX(50%);*/
			overflow: hidden;
	}
	#layout_mobile_navigation > div {
			cursor: pointer;
			flex: 1 1 25%;
			border-bottom: 4px solid var(--primary-brand);
			transition: border 0.5s ease-in;
	}
	#layout_mobile_navigation ul, #layout_mobile_navigation li {
			padding: 0;
			margin: 0;
			list-style: none;
	}
	#layout_mobile_navigation > div:not(:first-child) > ul {
			margin-top: -60px;
			transition: margin 0.5s ease-in;
	}
	#layout_mobile_navigation > div.active {
			border-color: var(--accent-color);
	}
	#layout_mobile_navigation > div.active > ul {
			margin-top: 0;
	}
	#layout_mobile_navigation li {
			height: 60px;
			display: flex;
			flex-flow: column nowrap;
			align-items: center;
			justify-content: center;
			font-size: small;
	}
	#layout_mobile_navigation > div li img {
			height: 80%;
			display: block;
			margin: 0 auto;
	}
	#layout_mobile_navigation > div li:last-child img {
			padding-top: 0.5em;
	}
	/*
	#layout_mobile_navigation > div.active li img {
			padding-top: 0;
	}
	*/
	#layout_mobile_navigation > div li:first-child img {
			margin: 0.25em auto 0 auto;
	}
	#layout_mobile_navigation span {
		line-height: 1em;
		margin-bottom: 0.75em;
	}
	/* Ende Navigation unten */

	.layout_mobile_search {
			position: relative;
			width: 100%;
			display: block;
			margin-left: auto;
			margin-right: auto;
			margin-top: 12px;
			margin-bottom: 12px;
	}
			.layout_mobile_search input[type="search"] {
					width: 100%;
					border-radius: 27px;		/* gewuenschter Radius + padding */
					padding-left: 27px;
					padding-right: 12px;
					padding-top: 13px;
					padding-bottom: 13px;
					border: 2px solid #A7A7A8;
					background-color: #2F2F2F;
					font-size: 18px;		/* Die Browser nutzen fuer die Input-Felder eigene Schriftart und Groessen.  Im mobile Safari ist das, ohne explizite Angabe, zu klein */
					outline: none;
					color: #A7A7A8;
			}
			.layout_mobile_search input[type="search"]::placeholder {
					color: #A7A7A8;
					opacity: 1;
					text-align: center;
			}
			
			
			
			
			.layout_mobile_search input[type="search"]:focus::placeholder {
					display: none;
					align-items: center;
					color: transparent;		/* weil "display:none" bei mir (firefox 68.0.2) nicht funktioniert, hier color transparent */
			}
			.layout_mobile_search input[type="submit"] {
					position: absolute;
					right: 3px;
					top: 50%;
					background-color: transparent;
					background-image: url("/layout/mobile/main/icon_suche_grau.svg");
					background-position: center center;
					background-repeat: no-repeat;
					background-size: 70%;
					border: none;
					border-radius: 50% !important;		/* in der layout.css sind die buttons mit important auf border-radius 0 gesetzt */
					padding: 20px;
					margin-top: -20px;
					width: 0;
					height: 0;
			}



	/* Button "Auswahl verfeinern" auf den Stoff-Seiten und im Listing */
	.call_filter_mobile {
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1px solid;
			padding-top: 0.5em;
			padding-bottom: 0.5em;
			cursor:pointer;
			font-weight: 400;
			width: 275px;
			margin: 0 auto 2em auto;
	}
			.call_filter_mobile img {
					width: 24px;
					margin-right: .6em;
			}


}