/* hier stehen ausschliesslich Sachen drin, die das mobile Layout betreffen. Styles, die Mobiles und andres betreffen stehen in konfigurator.css */

@media (min-width: 501px) {
		  .mobile_only, .mobile_only_inline
		, .mobile_accordion_ueberschrift
		, #navigation_mobile
		, #gallery
		, #gallery_scrollbar
		{
				/* wird nur im Mobilen benoetigt */
				display: none !important;				/* important macht hier Sinn, weil an anderen Stellen display: flex gesetzt ist */
		}
}

@media (max-width: 500px) {
		body {
				color: #000000;
		}
		.mobile_accordion_ueberschrift {
				display: flex;
				border-radius: 4px;
				background-color: #EAEAEA;
				cursor: default;
				padding: 0.5em;
		}
		.mobile_accordion_ueberschrift::after {		/* Dreieck nach unten */
				content: ' ';
				border-width: 0 1px 1px 0;
				display: inline-block;
				padding: 8px;
				transform: rotate(45deg);
				position: absolute;
				bottom: -9px;
				left: calc(50% - 7px);
				background-color: #EAEAEA;
		}
		#accordion_gewaehlt {
				margin-left: 1em;
				margin-right: 1em;
		}

		/* Erweiterung vom Accordion */
				.mobile_accordion_ueberschrift.accordion_ueberschrift .eingabeGewaehltIconStatic {
						display: block;
				}
				.mobile_accordion_ueberschrift.accordion_ueberschrift > img {
						margin: 0.5em;
				}
				.eingabeGewaehltPreis {
					
				}
				#mobile_zusammenfassung_bez_preis {
						font-size: 18px;
						font-weight: 500;
				}
		#mobile_zusammenfassung_warenkorb {
				border-top: 1px solid #000000;
				background-color: #EAEAEA;
				padding-bottom: 1em;
		}
				#mobile_zusammenfassung_gesamt {
						cursor: default;
						font-size: 18px;
						font-weight: 500;
				}
				#mobile_zusammenfassung_warenkorb_button {
						display: flex;
						justify-content: center;
						align-items: center;
						gap: 1em;
						background-color: #000000;
						border-radius: 4px;
						color: #ffffff;
						margin-left: 1em;
						margin-right: 1em;
						padding: 1em;
						cursor: pointer;
				}
						#mobile_zusammenfassung_warenkorb_button .icon {
								font-size: 24px;
						}
						#mobile_zusammenfassung_warenkorb_button .text {
								font-size: 16px;
						}

		.mobile_only {
				display: block;
		}

		.mobile_only_inline {
				display: inline;
		}

		#mobile_zusammenfassung {
				display: none;
		}
		
		#mobile_zusammenfassung_bez_menge {
				flex: 40 0 0;
		}
				
				.custom_input_number {
						display: inline-block;
						border: 1px solid #B7B7B7;
						border-radius: 4px;
						-webkit-user-select: none;
						user-select: none;

				}
						  .custom_input_number .sub
						, .custom_input_number .add
						{
								font-size: 20px;
								padding-top: 0.5em;
								padding-bottom: 0.5em;
						}
						  .custom_input_number .sub.disabled
						, .custom_input_number .adddisabled
						{
								color: #B7B7B7;
						}
						.custom_input_number .sub {
								padding-left: 0.5em;
						}
						.custom_input_number input {
								text-align: center;
								font-size: 16px;		/* Mindestgroesse, bei der das IPhoine beim Betreten des Feldes nicht mehr rein zoomt */
								border: none;
								width: auto;			/* im RTS Layout ist hier standardmaessig 100% vorgesehen */
						}
						.custom_input_number .add {
								padding-right: 0.5em;
						}



		#navigation_mobile {
				display: flex;
				align-items: center;
				justify-content: center;
				position: fixed;
				bottom: 0;
				left: 0;
				z-index: 1001;		/* ueber der normalen mobilen Navigation (diese evtl per Parameter ausschalten) */
				width: 100%;

				background: transparent linear-gradient(180deg, #FFFFFF 0%, #CFCECE 100%) 0% 0% no-repeat padding-box;
				box-shadow: 0px -3px 4px #CFCECE;

				font-size: 16px;
				text-transform: capitalize;
				
				padding: 0.5em;
				box-sizing: border-box;
		}
				#navigation_mobile_back {
						flex: 1 0 0;
						text-align: center;
						text-decoration: underline;
						padding-left: 0.5em;		/* um den Klick-Bereich zu erhoehen */
						padding-right: 0.5em;
						padding-top: 1em;
						padding-bottom: 1em;				
				}
				#navigation_mobile_next {
						flex: 2 0 0;
						text-align: center;
						padding: 1em;
						background-color: #000000;
						color: #ffffff;
						border-radius: 3px;
						max-width: 60%;				/* relevant, beide anderen Buttons ausgeblendet sind */
				}
				#navigation_mobile_cart {
						flex: 2 0 0;
						display: flex;
						align-items: center;
						justify-content: center;
						gap: 0.5em;
						background-color: #000000;
						color: #ffffff;
						border-radius: 3px;
						text-align: center;
						padding: 1em;
						cursor: pointer;
						white-space: nowrap;		/* so dass die Box im eingeklappten Zustand keinen Platz nach oben und unten erzeugt, der sich auf die uebergeordnete Box auswirkt */
				}
						#navigation_mobile_cart .icon {
								width: auto;
								height: auto;
								vertical-align: middle;
								margin-right: 0.25em;
						}

				#navigation_mobile_back, #navigation_mobile_next, #navigation_mobile_cart {
						cursor: pointer;
						overflow: hidden;
						transition: all 0.2s ease-in-out;
				}
				#navigation_mobile_back.inactive, #navigation_mobile_next.inactive, #navigation_mobile_cart.inactive {
						padding-left: 0;
						padding-right: 0;
						flex: 0 0 0;
				}


		.fensterTransparentClose {
				position: absolute;
				right: 0;
				top: 0;
				padding-left: 30px;
				padding-bottom: 30px;
				font-size: 35px;
				font-weight: 200;
				line-height: 15px;
				text-align: center;
				color: #ffffff;
				cursor: pointer;
		}
		.fensterTransparentButtonAction {
				background-color: #006AE5;
				color: #ffffff;
				box-shadow: 0px 2px 4px #006AE542;
				border-radius: 4px;
				padding: 1em;
				font-size: 16px;
				cursor: pointer;
				background-image: url(icons/pfeil-simple-weiss-rechts.svg);
				background-repeat: no-repeat;
				background-position: 90% center;
				background-size: 38px 38px;
		}
				.fensterTransparentButtonAction img {
						vertical-align: middle;
				}

		#gallery {
				display: block;
				overflow-x: scroll;
				margin-left: 2em;
				margin-right: 2em;
				padding-bottom: 2em;
		}
				#gallery .container {
						display: flex;
						gap: 2em;
				}
						#gallery .container > * {
								flex: 0 0 100%;
								max-height: 90vw;
								overflow: hidden;
						}
						#gallery_stoffbild_1, #gallery_stoffbox_1 {
								display: none;
						}
						#gallery .container > .gallery_stoffbox {
								overflow: auto;
								text-align: left;
						}
								#gallery .container > * > img {
										height: 100%;
										pointer-events: none;		/* um besser sliden zu koennen die Drag and Drop-Funktionalitaet der Bilder hier ausschalten */
								}
						#gallery_ansicht3d {
								position: relative;		/* fuer die absolute Positionierung von #ansicht3dInteraktion im mobilen Layout */
						}

		#gallery_scrollbar {
				display: block;
				margin-left: 2em;
				margin-right: 2em;
				margin-bottom: 1px;		/* den uebersteheneden Bereich von #gallery_scrollbar_train abdecken, sonst kommt es zu weiteren Scrollbalken */
				height: 2px;
				background-color: #E9E9E9;
				position: relative;
				top: -4px;
		}
				#gallery_scrollbar_train {
						height: 4px;
						background-color: #000000;
						position: absolute;
						top: -1px;
						left: 0;
						width: 45px;
						cursor: pointer;
				}

}