/*

		15.05.2023 - Tim - In Stoffauwahl Umbau von Javascript Hoehe zu CSS-Hoehe 100% im Stoffauswahl-Fenster
		15.05.2023 - Tim - Entfernen alter webkit-flex Anagaben

*/


#hinweisMasseingabe, #linkMasseingabeMessanleitung {
    margin-bottom: 1em;
}
.bewertungen button, .bewertungen .button, .bewertungen a.button, .bewertungen input[type="submit"] {
    color: #fff;
    background-color: #357DBC;
    border: 0;
    border-radius: 2px;
    box-shadow: 4px 4px 5px 0 rgba(0,0,0,0.1);
}
.artikel .mediathek .box .box_text {
    padding-top: 7px;

}
/*artzikel_produktion.css */
.artikelMass .accordion {
				margin-top: 1em;
		}
				.artikelMass .accordion_ueberschrift {
						border-top: 1px solid #cecece;
						border-bottom: 1px solid transparent;
						padding-top: 1em;
						padding-bottom: 1em;
						margin-top: 0;
						margin-bottom: 0;
						position: relative;
						cursor: pointer;
						font-weight: normal;
						color: #888888;
						font-size: 12px;

						display: flex;
						justify-content: space-between;
						align-items: center;
				}
				.artikelMass .accordion_ueberschrift:first-child {
						border-top: 0;
				}
				.artikelMass .accordion_ueberschrift.initialNone {		/* die Ueberschriften, die je nach Konfiguration mal an und mal aus sein koennen initial auf aus stellen, dass sie beim Laden nicht kurz zu sehen sind und dann wieder verschwinden  */
						display: none;
				}
				.artikelMass .accordion_ueberschrift.active {
						color: #444444;
						font-weight: bold;
				}
						.artikelMass .accordion_ueberschrift .eingabeGewaehltIcon {
								flex: 0 0 auto;
						}

						.artikelMass .accordion_ueberschrift .eingabeGewaehltUe {
								flex: 1 1 auto;
								padding-right: 1em;
								text-transform: capitalize;
						}

						.artikelMass .accordion_ueberschrift > img {
								vertical-align: middle;
								margin-left: 0.5em;
								margin-right: 1em;
						}
						.artikelMass .accordion_ueberschrift .eingabeGewaehltBez {
								font-style: italic;
								font-weight: normal;
								font-size: 90%;
								text-align: right;

								flex: 1 1 auto;
						}
								.artikelMass .accordion_ueberschrift.active .eingabeGewaehltBez {		/* das hier wieder in Standard-Farben anzeigen */
										color: #444444;
								}

						.artikelMass .accordion_ueberschrift .eingabeGewaehltHaken {
								margin-left: 1em;
								margin-right: 0.5em;

								flex: 0 0 auto;
						}

		.artikelMass .liste_modelle > * {
				color: #d9d9d9;
				border: 1px solid #d9d9d9;
				padding: 0.5em;
				margin: 0.5em;
				text-decoration: none;
				display: inline-block;
		}
				.artikelMass .liste_modelle > *.active {
						color: #565656;
						cursor: default;
				}

		.artikelMass .eingabeBox {
				margin-top: 0em;
				margin-left: 0em;
				margin-bottom: 0em;
				display: none;
				overflow: hidden;		/* fuer die Animation */
				padding-left: 40px;
		}
				.artikelMass .accordion_zwischenueberschrift {
						font-weight: normal;
						margin-top: 0;
						margin-bottom: 1em;
				}

		.artikelMass .groupButtonsBottom {
				text-align: right;
				margin-top: 1em;
				margin-bottom: 1em;
		}
				.artikelMass .groupButtonsBottom > *{
						margin-right: 1em;
				}
				.artikelMass .btnNextBox {
						border: 1px solid #357dbc;
						padding-top: 0.25em;
						padding-bottom: 0.25em;
						padding-left: 1em;
						padding-right: 1em;
						display: inline-block;
						cursor: pointer;
				}

		/* .artikelMass .bedienseite { // Stephan: auskommentiert... tab sichtbarkeit klaert javascript
				display: none;
				margin-top: 1em;
		} */


		/* Tabs im Extra-Design-Fenster */
				.tabs > * {
						display: inline-block;
						border: 1px solid #cecece;
						margin-right: 6px;
						padding: 1em;
						position: relative;
						left: 0;
						top: 1px;
						cursor: pointer;
						color: #cecece;
						background-color #ffffff;
				}
				.tabs > *.active {
						border-bottom: 1px solid #ffffff;
						color: #444444;
				}
						.tabs > * > img {
								vertical-align: middle;
						}
						.tabs > * > .bez {
								margin-left: 1em;
						}
						#eingabe.elemLt650 #tabModell .bez {
								display: none;
						}
						#eingabe.elemLt650 #tabBefestigung .bez {
								display: none;
						}
				.tabFenster {
						border-top: 1px solid #cecece;
				}
						.tabFenster > * {
								display: none;
								padding: 1em;
								max-width: 800px;		/* max-width hilft uebergeordneten Flex-Elementen bei der Breitenbestimmung*/
						}
		/* Ende Tabs im Extra-Design-Fenster */













/* Extra-Fenster Stoffauswahl */
#extrafenster {
		display: none;
}
		.extrafenster {
				/* das hier sollte in der colorbox.css gestaltet werden! - oder besser nicht, so sind wir einem evtuellen Austausch der Colorbox unabhaengiger */
				background-color: #ffffff;
				padding: 2em;
				height: 100vH;
				box-sizing: border-box;
		}
				.extrafenster .ajax_lade {
						visibility: hidden;
						float: left;
						margin-left: 1em;
						width: 20px;
						height: 20px;
				}
		@media (max-width: 800px) {
				.extrafenster {
						padding: 1em;
				}
		}
		.fensterDesign {
				display: flex;
				flex-direction: column;
		}
				.fensterDesign input[type="checkbox"] {
						vertical-align: middle;
				}
				.extrafenster .head {
						padding-bottom: 1em;
						border-bottom: 1px solid #cecece;
						flex: 0 0 auto;
				}
						.extrafenster .head .left {
								float: left;
						}
						.extrafenster .head .right {
								float: right;
						}
								.extrafensterClose {
										cursor: pointer;
								}
						.extrafenster h2 {
								font-size: 14px;
								padding: 0;
								margin: 0;
						}
						.fensterZweiSpalten {
								display: flex;
								flex: 1 0 0;
								overflow: auto;
						}
								.fensterZweiSpalten > .buttonAusklapp {
										display: none;

										position: absolute;
										left: 0px;
										z-index: 2;
										font-weight: bold;
										cursor: pointer;
										top: 100px;
								}
										.fensterZweiSpalten > .buttonAusklapp img {
												height: 40px;
												display: block;
										}
								.fensterZweiSpalten > .left {
										padding-top: 2em;
										padding-right: 1em;
										border-right: 1px solid #cecece;
										overflow: auto;
										height: 100%;
										box-sizing: border-box;
								}
								.fensterZweiSpalten > .right {
										padding-left: 2.5%;
										padding-top: 1em;
										overflow: auto;
										height: 100vh;
										box-sizing: border-box;
										position: relative;		/* fuer die absolut positionierten Ausblend-Balken */
								}
								.fensterDesign .fensterZweiSpalten > .left {
										flex: 0 1 290px;
								}
								.fensterDesign .fensterZweiSpalten > .right {
										flex: 4.8 1 0;
								}

						@media (max-width: 1000px) {
								/* ab hier die links Spalte zum einklappen */
								.fensterDesign .fensterZweiSpalten {
										display: block;
										position: relative;
								}
								.fensterDesign .fensterZweiSpalten > .buttonAusklapp {
										display: block;

								}
								.fensterDesign .fensterZweiSpalten > .left {
										position: absolute;
										left: 0;
										top: 0;
										background-color: #ffffff;
										width: 0;
										padding-right: 0;
										z-index: 10;
								}
						}

										.fensterZweiSpalten > .left h3 {
												font-size: 13px;
												border-bottom: 1px solid #cecece;
												padding-bottom: 0.5em;
												text-transform: capitalize;
										}
										.fensterZweiSpalten label {
											text-transform: capitalize;
										}
										.fensterZweiSpalten > .left .boxSlider {
												width: 90%;
												display: flex;
										}
												.fensterZweiSpalten > .left .boxSlider .min {
														flex: 0 0 auto;
												}
												.fensterZweiSpalten > .left .boxSlider input {
														flex: 1 1 auto;
												}
												.fensterZweiSpalten > .left .boxSlider .max {
														flex: 0 0 auto;
												}


										.fensterModellDetails {
												display: flex;
												margin-top: 1.5em;
												flex-direction: row;
										}
												.fensterModellDetails .left {
														flex: 0 1 370px;
														text-align: center;
												}
														.fensterModellDetails .left img.fensterModellDetailsModellbild {
																width: 170px;
														}
												.fensterModellDetails .right {
														flex: 1 1 auto;
												}
														.fensterModellDetails .right .tabs.elemLt410 .bez {
																display: none;
														}
														.fensterModellDetails .tabFenster ul {
																margin: 0;
																padding: 0;
														}
										.fensterModellDetails.elemLt550 {
												flex-direction: column;
										}
												.fensterModellDetails.elemLt550 .left {
														flex: 0 1 auto;
														margin-bottom: 1em;
												}
										.fensterModellDetails.alternativ {

										}
												.fensterModellDetails.alternativ > .left {
														opacity: 0.1;
												}

						.extrafensterDetailsBottom {
								text-align: right;
						}
								.extrafensterDetailsBottom .abpreis {
										font-size: 16px
								}

								.extrafenster .buttons {
										margin-top: 1em;
								}
										.extrafenster .buttons button {
												margin-left: 1em;
												border: none;
												padding: 0.5em;
												font-size: 13px;
												cursor: pointer;
										}
										.extrafenster .buttons .stoffprobe {
												background-color: #cecece;
												color: #444444;
										}
												.extrafenster .buttons .stoffprobe:hover {
														background-color: #bebebe;
												}
										.extrafenster .buttons .uebernehmen {
												background-color: #357dbc;
												color: #ffffff;
										}
												.extrafenster .buttons .uebernehmen:hover {
														background-color: #458dcc;
												}



								.listDesigns {
										overflow: auto;
										padding-top: 1em;
										height: 100%;
										box-sizing: border-box;
								}
										.listDesigns:before {
												/* Uebergang ins Transparente */
												position: absolute;
												z-index: 1;
												top: 1em;
												left: 0;
												background-color: transparent;
												background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
												width: 100%;
												height: 10px;
												content: ' ';
										}
										.listDesigns:after {
												/* Uebergang ins Transparente */
												position: absolute;
												z-index: 1;
												bottom: 0;
												left: 0;
												background-color: transparent;
												background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
												width: 100%;
												height: 10px;
												content: ' ';
										}

										.listDesigns .zwischenueberschrift {
												margin-top: 2em;
												margin-bottom: 2em;
												margin-right: 2%;

												display: flex;
												justify-content: space-between;
												align-items: center;
										}
												.listDesigns .zwischenueberschrift .logo {
														flex: 0 0 auto;
												}
														.listDesigns .zwischenueberschrift .logo > img {
																margin-right: 1em;
														}
												.listDesigns .zwischenueberschrift .bezeichnung {
														flex: 1 1 auto;
												}
												.listDesigns .zwischenueberschrift .ansicht_bezeichnung {
														flex: 0 0 auto;
														font-weight: bold;
														margin-right: 1em;
												}
												.listDesigns .zwischenueberschrift .ansicht_wahl {
														flex: 0 0 auto;
												}
														.listDesigns .zwischenueberschrift .ansicht_wahl .button {
																display: inline-block;
																width: 93px;
																height: 22px;
																line-height: 22px;
																border: 1px solid #cecece;
																text-align: center;
																color: #888888;
																margin-left: 4px;

																-webkit-touch-callout: none; /* iOS Safari */
																-webkit-user-select: none;   /* Chrome/Safari/Opera */
																-khtml-user-select: none;    /* Konqueror */
																-moz-user-select: none;      /* Firefox */
																-ms-user-select: none;       /* IE/Edge */
																user-select: none;           /* non-prefixed version, currently not supported by any browser */
														}
														.listDesigns .zwischenueberschrift .ansicht_wahl .button:hover {
																color: #444444;
														}
																.listDesigns .zwischenueberschrift .ansicht_wahl input {
																		display: none;
																}
																.listDesigns .zwischenueberschrift .ansicht_wahl .button > img {
																		display: none;
																		width: 11px;
																		height: 10px;
																		margin-left: 1em;
																}

																.listDesigns .zwischenueberschrift .ansicht_wahl input:checked + .button {
																		color: #ffffff;
																		background-color: #3781bd;
																		border: 1px solid #3781bd;
																}
																		.listDesigns .zwischenueberschrift .ansicht_wahl input:checked + .button > img {
																				display: inline;
																		}
										.listDesigns .notFound {
													margin-top: 5em;
													font-style: italic;
													text-align: center;
													color: #999999;
										}


								.listDesignsMarke {
										position: relative; 	/* fuer die Positionsbesteimmung eines Stoffes mit offsetLeft - fuer die Position des Pfeils */
										margin-left: 2%;

										display: flex;
										flex-wrap: wrap;
								}

										.listDesignsMarke .listDesignsDesign {
												display: inline-block;
												padding-right: 1%;
												border-right: 1px solid #cecece;
												margin-right: 2%;
												margin-bottom: 2.45em;
												vertical-align: top;

												/* width: 178px; */
												flex: 1 1 162px;	/* flex-basis maximal 177px, ansonsten ist es zu gross */
										}
												.listDesignsMarke .listDesignsAreaActivateDetails {
														cursor: pointer;
														position: relative;
												}
														.listDesignsMarke .listDesignsGroupBilder > * {
																float: left;
														}
														.listDesignsMarke .listDesignsGroupBilder > *:last-child {		/* clear-<br> */
																float: none;
														}
																.listDesignsMarke .listDesignsDesign .listDesignsDesignbild {
																		margin-right: 5px;
																		margin-bottom: 1em;
																}
																		.listDesignsMarke .listDesignsDesign .listDesignsDesignbild img {
																				display: block;
																				width: 100%;
																				min-height: auto;/*180px;*/		/* wenn das Bild fehlt */
																		}
																.listDesignsMarke .iconSpezial {
																		/*
																		width: 23px;
																		height: 23px;
																		*/
																		width: 12%;
																		margin-bottom: 5px;
																}

														.listDesignsMarke .listDesignsAreaActivateDetails:hover .infoDetailansicht {
																display: block;
														}
														.listDesignsMarke .listDesignsAreaActivateDetails:hover .listDesignsDesignbild {
																opacity: 0.5;
														}

										.listDesignsMarke .listDesignsBoxDetailsWrap {
												overflow: hidden;		/* fuer die Animation height: 0 */
												margin-bottom: 2em;
										}

										.listDesignsMarke .listDesignsBoxDetails {
												display: flex;
												flex-direction: row;

												border: 2px solid #cecece;
												padding: 1.8%;
												position: relative;
												box-sizing: border-box;
										}
										.listDesignsMarke .listDesignsBoxDetails.elemLt500 {
												flex-direction: column;
										}
												.listDesignsMarke .listDesignsBoxDetails .schliessen {
														position: absolute;
														top: 1em;
														right: 1em;
														cursor: pointer;
												}
												.listDesignsMarke .pfeilOben {
														position: absolute;
														height: 12px;
														font-size: 20px;
												}
												.listDesignsMarke .listDesignsBoxDetails > .left {
														flex: 1 0 auto;
														margin-right: 4%;
														overflow: hidden;		/* fuer grosse / lange (Flaechenvorhang-)bilder (z.B.: 300x699px) */
												}
														.listDesignsMarke .listDesignsBoxDetails > .left img.boxDetailsDesignbild {
																width: 100%;
																display: block;		/* wegen dem Space unter der Baseline */
														}
												.listDesignsMarke .listDesignsBoxDetails > .right {
														flex: 10 5 auto;
												}
														.listDesignsMarke .listDesignsBoxDetails > .right h3 {
																font-size: 15px;
														}
														.listDesignsMarke .listDesignsBoxDetails > .right .versand {
																color: #00900a;
																font-size: 13px;
														}
																.listDesignsMarke .listDesignsBoxDetails > .right .versand .haken {
																		font-size: 16px;
																		font-weight: bold;
																}
														.listDesignsMarke .listDesignsBoxDetails .eigenschaften {
																-moz-column-width: 170px;
																-webkit-column-width: 170px;
																column-width: 170px;
																line-height: 20px;
																padding-left: 5%;		/* das spiegelt die Standardeinsteellung im Firefox 44 wider (40px), verkleinert sich jetzt aber passenderweise bei kleinen Layouts */
														}
																.listDesignsMarke .listDesignsBoxDetails .eigenschaften li {
																		white-space: nowrap;
																}

														.listDesignsMarke .listDesignsBoxDetails .licht {
																line-height: 20px;
														}


												.listDesignsMarke .listDesignsBoxDetails .design_big_bildbox {
														position: relative;
														width: 250px;
														margin-left: 1em;
														height: 333.33px;		/* Die Bilder sollten eigentlich 400x300Px vorliegen. Das sind aber leider nicht alle! (Achtung, der Code gilt fuer Rollos UND Flaechenvorhaenge! - Hier bei den Flaechenvorhaengen habe ich ein Bild der Groesse 300x699) Deshalb hier auch die Hoehe beschraenken sonst veraendert sich das Layout bei unterschiedlichen Bildgroessen. - Das Bild wird auch nicht gezerrt, weil das hier nur der Container um das eigentliche Bild herum ist */
												}
												.listDesignsMarke .listDesignsBoxDetails.elemLt550 .design_big_bildbox {
														width: 180px;
												}
												.listDesignsMarke .listDesignsBoxDetails.elemLt500 .design_big_bildbox {
														/* hier jetzt untereinander */
														margin-left: auto;
														margin-right: auto;
														margin-bottom: 1em;
														width: 200px;

												}
														.listDesignsMarke .listDesignsBoxDetails .design_big_bild {

														}
														.listDesignsMarke .listDesignsBoxDetails .design_big_lupe {
																position: absolute;
																top: 15px;
																right: -1px;
																cursor: pointer;
														}

														.listDesignsMarke .listDesignsBoxDetails .design_big_nav_left, .listDesignsMarke .listDesignsBoxDetails .design_big_nav_right {
																position: absolute;
																top: 160px;
																cursor: pointer;
														}
														.listDesignsMarke .listDesignsBoxDetails .design_big_nav_left {
																left: -20px;
														}
														.listDesignsMarke .listDesignsBoxDetails .design_big_nav_right {
																right: -20px;
														}
												.listDesignsMarke .listDesignsBoxDetails .design_big_preview {
														margin-top: 7px;
														margin-left: 1em;
												}
														.listDesignsMarke .listDesignsBoxDetails .design_big_preview > img {
																border: 1px solid #cccccc;
																margin-right: 3px;
																width: 30px;
																height: 40px;
																/* cursor: pointer; 		-- solange es mouseover, statt click triggert, hier vielleicht kein cursor: pointer */
														}
																.listDesignsMarke .listDesignsBoxDetails .design_big_preview > img.active {
																		border: 1px solid #454545;
																}

												.extrafenster .tabsDesign {
														margin-top: 1em;
												}
														.extrafenster .tabsDesign.elemLt700 .bez {
																display: none;
														}

												#tabFensterDesign ul {
														padding-left: 1em;
												}
														#tabFensterDesignKunden {
																max-height: 202px;
																overflow: auto;
														}

																.meinung_text {
																		font-style: italic;
																		margin-bottom: 1em;
																}
																.meinung_keine {
																		font-style: italic;
																		text-align: center;
																		margin-top: 2em;
																}

												.kundenmeinungen {
														max-height: 220px;
														overflow: auto;
												}


								.listDesignsMarke .listDesignsBez, .listDesigns .listDesignsErsetztbez {
										font-size: 11px;
										color: #888888;
								}
								.listDesignsMarke .listDesignsErsetztbez {
										font-style: italic;
								}
								.listDesignsMarke .abpreis {
										text-align: right;
										font-weight: bold;
										margin-top: 4px;
										margin-bottom: 2px;
								}

								  .listDesignsMarke .listDesignsDesign .listDesignsDesignbild
								, .listDesignsMarke .infoDetailansicht
								, .listDesignsMarke .listDesignsGroupBottom
								, .listDesignsMarke .listDesignsDesign .uebernehmen
								{
										/* width: 150px; */
										width: 82%;
								}

								.listDesignsMarke .infoDetailansicht {
										position: absolute;
										left: 0;
										text-align: center;
										top: 77px;
										display: none;
								}
										.listDesignsMarke .infoDetailansicht img {
												width: 23px;
										}
								.listDesignsMarke .listDesignsDesign .uebernehmen {
										text-align: right;
								}
										.listDesignsMarke .listDesignsDesign .uebernehmen > div {		/* .listDesignsUebernehmenButton */
												background-color: #cecece;
												color: #ffffff;
												padding-left: 1em;
												padding-right: 1em;
												padding-top: 0.5em;
												padding-bottom: 0.5em;
												display: inline-block;
												cursor: pointer;
										}
										.listDesignsMarke .listDesignsDesign .uebernehmen > div:hover {
												background-color: #3580bb;
												color: #ffffff;
										}

								.listDesignsDesign.filler {
										height: 0;
										/*
										margin: 0;
										padding: 0;
										border: 0;
										margins, paddings und borders fuer die breitenberechnung so lassen wie sie sind

										... aber die Hoehe runtersetzen
										*/
										margin-top: 0;
										margin-bottom: 0;
										padding-top: 0;
										padding-bottom: 0;
										border-top: 0;
										border-bottom: 0;
										border-right: 1px solid transparent;
								}

						.fensterDesign input[type="checkbox"] {
								margin-right: 7px;
						}
						.fensterDesign .icon {
								vertical-align: middle;
								width: 22px;
								height: 22px;
								margin-left: 0;
								margin-right: 7px;
						}
						.extrafenster .schliessen {
								vertical-align: middle;
						}
				.fensterDesign .check label {
						display: block;
						text-indent: -2em;
						margin-left: 2em;
						margin-top: 5px;
						margin-bottom: 5px;
				}

						.suche {		/* .fensterDesign, sowie #fensterModell */
								background-image: url(/xartikelsystem/bilder/eigenproduktion/icons/lupe.svg);
								background-repeat: no-repeat;
								background-position: 96% center;
								background-size: 24px 24px;
								padding-left: 15px;
								padding-right: 15px;
								padding-top: 15px;
								padding-bottom: 15px;
								border: 1px solid #cecece;
								box-sizing: border-box;
								width: 100%;

						}


		/* Verwendet in der Artikel- Detail - Stofflisting */

		.group .farbbox {
			border: 1px solid #f1f1f1;
			cursor: pointer;
			float: left;
			font-weight: bold;

			height: 18px;
			line-height: 18px;
			text-align: center;
			width: 18px;
			margin: 3px;
		}


		.color .beige {
			background-color: #d4be8d;
			color: #ffffff;
		}
		.group  .blau {
			background-color: #3485ff;
			color: #ffffff;
		}
		.group  .braun {
			background-color: #6f3e18;
			color: #ffffff;
		}
		.group  .gelb {
			background-color: #fffc00;
			color: #888888;
		}
		.group  .gruen {
			background-color: #73b525;
			color: #ffffff;
		}
		.group  .orange {
			background-color: #ff6501;
			color: #ffffff;
		}
		.group  .rosa {
			background-color: #ed008c;
			color: #ffffff;
		}
		.group  .rot {
			background-color: #ea0001;
			color: #ffffff;
		}
		.group  .schwarz {
			background-color: #000000;
			color: #ffffff;
		}
		.group  .violett {
			background-color: #9349aa;
			color: #ffffff;
		}
		.group  .weiss {
			background-color: #ffffff;
			color: #888888;
		}
		.group  .grau {
			background-color: #838383;
			color: #ffffff;
		}
		.group  .silber {
			background-color: #c0c0c0;
			background-image: url("/i/xartikelsystem/farben/silber.svg");
			color: #ffffff;
		}
		.group  .gold {
			background-color: #ffd700;
			background-image: url("/i/xartikelsystem/farben/gold.png");
			color: #ffffff;
		}
		.group  .messing {
			background-color: #ae884b;
			background-image: url("/i/xartikelsystem/farben/messing.svg");
			color: #ffffff;
		}

		/* Ende Verwendet in der Artikel- Detail - Stofflisting */




/* Ende Extra-Fenster Stoffauswahl */
.eingabeBox select {
    display: inline-block;
    color: #444444;
    font-size: 11px;
    padding: 0.5em;
    padding-left: 11px;
    margin-bottom: 3px;
    width: 100%;
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
    background: url(/XArtikelsystem/bilder/pfeil-unten-grau.svg), linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #f1f1f1 50%, #f1f1f1 100%);
		background-position: 93% center, center center;
		background-repeat: no-repeat;
		background-size: 12px 8px, 100% 100%;
    border: 1px solid #cccccc;
}

.eingabeBox select:disabled {
    opacity: 0.5;
}


.dritteEbeneStandard {
    padding-left: 3em;
    display: none;
}

.inputFrontendHidden {
  display: none;
}

.warenkorbFixed {
  position: fixed;
  bottom: 1em;
  right: 1em;
  z-index: 10000;
}

.eigenschaften {
  column-width: auto !important;
}

input[type=number]:invalid{
    box-shadow: 0px 0px 2px 2px red;
}

#buttonShowFilter {
  color: #000;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  width: 2.5em;
  height: 10em;
  position: fixed;
  left: 0;
  top: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  display: none;
}

#cboxLoadedContent {
  overflow: hidden !important;
}

#fensterDesignZweiSpaltenRight {
  overflow: hidden !important;
}
.bgs {
    padding:.4em .8em;
    display:inline-block;
    display:none;
	user-select:none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
.upload.bgs {
    display: inline-block;
	display:none;
}
.bgs input {
    display:none;
}
.bgs.needspic {
    display:none;
}
.hasCustomImage .bgs.needspic {
    display:block;
}
div#container3D {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
#container3D #customdownload {
    background-image: url(modules/3DAR/ar-controls/download.svg);
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
    height: 40px;
    line-height: 25px;
    font-size: 0;
    /*background-color: #fff;*/
    /*border: 2px solid #0082c0;*/
    position:absolute;
	width: 40px;
	bottom: 10px;
	left: calc(50% + 50px);
	display:none;
}

#container3D.hasCustomImage.downloadEnabled #customdownload.bgs {
	display:block!important;
}
.hasCustomImage.bgsizeEnabled .bgs.needspic {
    display:block;
}
.bgs.needspic[for] {
    min-width: 25px;
}
#container3D .orbitAus, #container3D .orbitAn {
	border-radius: 16px;
	background-image:url(assets/3d-objekt-aktivieren.svg);
	background-repeat:no-repeat;
	background-position:0 center;
	background-size:28px;
	line-height:30px;
	color:#fff;
	cursor:pointer;
	padding-left:30px;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#container3D .orbitAus	{
		height: 30px;
		width: 150px;
		top: 0;
		left: calc(100% - 200px);
		position: absolute;
		opacity: 0;
		background-color: #434343;
		font-size:0;
		content: "3D Objekt sperren";
}
#container3D .orbitAus:after	{
	content: "3D Objekt sperren";
	font-size:12px;
}
#container3D .orbitAn	{
		height: 30px;
		width: 180px;
		position: absolute;
		top: 49%;
		left: calc(50% - 90px);
		background-color:#0082c0;

}
#container3D .orbitAn	img {
		display:none;
}
#container3D .dreiDhinweis {
	color: #fff;
	text-align: center;
	height: 130px;
	width: 270px;
	position:absolute;
	background-color: rgba(80, 80, 80, 0.9);
	left: 0;
	right:0;
	top: 0;
	bottom:0;
	border-radius: 5px;
	pointer-events: none;
	margin: auto;
}
#container3D .dreiDhinweis * {
    box-sizing: border-box;
}
#container3D .dreiDhinweis svg {
	width: 89%;
	height: auto;
	margin-top: 1em;
	display:none;
}
#container3D .dreiDhinweis svg > g > g {
	position:relative;
	display:inline-block;
	border: 2px solid orange;
}
#container3D .dreiDhinweis .hinweistext {
	display:inline-block;
	width:90px;
	padding:1em;
	text-align:center;
	background-image: url("assets/overlay-tuch-ohne-text-gruppiert.svg");
	background-repeat: no-repeat;
	background-position: center 10px;
	background-size: 280px 80px;
	padding-top: 90px;
	/*border:1px solid #888;*/
}
/*
.gruppe_warenkorb {
    background-color: #f5f5f5;
    padding: 10px;
    position: fixed;
    bottom: 0;
    right: 0;
    box-sizing: border-box;
    box-shadow: 0px -2px 5px rgb(0 0 0 / 10%);
    margin-top: 1em;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    z-index: 10;
}*/
#container3D .dreiDhinweis .hinweistext#dreiDzoominfo {
	background-position: 5px 10px;
}
#container3D .dreiDhinweis .hinweistext#dreiDmoveinfo {
	background-position: -200px 10px;
}
.bereichsueberschrift {
    background-color: #444444;
    color: #ffffff;
    font-size: 16px;
    font-weight: normal;
    padding: 1em;
    text-align: left;
}
.meinung_meinung {
	margin-bottom: 2em;
	border-bottom: 1px solid #f1f1f1;
	background-color: #357DBC;
	color: #fff;
	font-weight: 500;
	border-radius: 12px 12px 0 0;
	box-shadow: 0px 3px 7px #ddd;
	margin-left: auto;
	margin-right: auto;
	width: 98%;
}
.zubehoer_standalone img {
    max-width: 80px;
    height: auto;
}
.meinung_meinung span.bold {
		display: none;
}
.meinung_meinung > span {
		display: inline-block;
		width: 28%;
		margin: 5px 2em;
		line-height: 45px;

}
.meinung_meinung div {
		padding: 2em;
		width: 100%;
		background-color: #fff;
		color: #444;
		text-align: left;
		background: #FFFFFF 0% 0% no-repeat padding-box;

}
.boxIconLeft {
    display: flex;
    align-items: stretch;
}
.boxIconLeft.achtung > .lila {
    background-color: #ffde0e;
}
.boxIconLeft > .lila {
    flex: 0 0 auto;
    width: 50px;
    min-height: 50px;
    line-height: 50px;
    text-align: center;
	display:flex;
	align-items:center;
	align-content:center;
}
.boxIconLeft > .lila > img {
    max-width: 70%;
    margin: auto;
}
.boxIconLeft > .rosa {
    flex: 1 1 0;
    padding-left: 1em;
    padding-right: 1em;
    display: flex;
    align-items: center;
}
#hinweisMasseingabeList {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding: 0;
    list-style-type: none;
}
#hinweisMasseingabeList > li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.boxIconLeft.messen > .lila {
    background-color: #357dbc;
}
.boxIconLeft > .lila {
    flex: 0 0 auto;
    width: 50px;
    min-height: 50px;
    line-height: 50px;
    text-align: center;
}
#linkMasseingabeMessanleitung {
    color: #357dbc;
    font-weight: bold;
    text-transform: uppercase;
	white-space: nowrap;
}
.resp-sharing-button__link,
.resp-sharing-button__icon {
  display: inline-block
}

.resp-sharing-button__link {
  text-decoration: none;
  color: #fff;
  margin: 0.5em
}

.resp-sharing-button {
  border-radius: 5px;
  transition: 25ms ease-out;
  padding: 0.5em 0.75em;
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif
}

.resp-sharing-button__icon svg {
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: top
}

.resp-sharing-button--small svg {
  margin: 0;
  vertical-align: middle
}

/* Non solid icons get a stroke */
.resp-sharing-button__icon {
  stroke: #fff;
  fill: none
}

/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
  fill: #fff;
  stroke: none
}

.resp-sharing-button--twitter {
  background-color: #55acee
}

.resp-sharing-button--twitter:hover {
  background-color: #2795e9
}

.resp-sharing-button--pinterest {
  background-color: #bd081c
}

.resp-sharing-button--pinterest:hover {
  background-color: #8c0615
}

.resp-sharing-button--facebook {
  background-color: #3b5998
}

.resp-sharing-button--facebook:hover {
  background-color: #2d4373
}

.resp-sharing-button--tumblr {
  background-color: #35465C
}

.resp-sharing-button--tumblr:hover {
  background-color: #222d3c
}

.resp-sharing-button--reddit {
  background-color: #5f99cf
}

.resp-sharing-button--reddit:hover {
  background-color: #3a80c1
}

.resp-sharing-button--google {
  background-color: #dd4b39
}

.resp-sharing-button--google:hover {
  background-color: #c23321
}

.resp-sharing-button--linkedin {
  background-color: #0077b5
}

.resp-sharing-button--linkedin:hover {
  background-color: #046293
}

.resp-sharing-button--email {
  background-color: #777
}

.resp-sharing-button--email:hover {
  background-color: #5e5e5e
}

.resp-sharing-button--xing {
  background-color: #1a7576
}

.resp-sharing-button--xing:hover {
  background-color: #114c4c
}

.resp-sharing-button--whatsapp {
  background-color: #25D366
}

.resp-sharing-button--whatsapp:hover {
  background-color: #1da851
}

.resp-sharing-button--hackernews {
background-color: #FF6600
}
.resp-sharing-button--hackernews:hover, .resp-sharing-button--hackernews:focus {   background-color: #FB6200 }

.resp-sharing-button--vk {
  background-color: #507299
}

.resp-sharing-button--vk:hover {
  background-color: #43648c
}

.resp-sharing-button--facebook {
  background-color: #3b5998;
  border-color: #3b5998;
}

.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
  background-color: #2d4373;
  border-color: #2d4373;
}

.resp-sharing-button--twitter {
  background-color: #55acee;
  border-color: #55acee;
}

.resp-sharing-button--twitter:hover,
.resp-sharing-button--twitter:active {
  background-color: #2795e9;
  border-color: #2795e9;
}

.resp-sharing-button--tumblr {
  background-color: #35465C;
  border-color: #35465C;
}

.resp-sharing-button--tumblr:hover,
.resp-sharing-button--tumblr:active {
  background-color: #222d3c;
  border-color: #222d3c;
}

.resp-sharing-button--email {
  background-color: #777777;
  border-color: #777777;
}

.resp-sharing-button--email:hover,
.resp-sharing-button--email:active {
  background-color: #5e5e5e;
  border-color: #5e5e5e;
}

.resp-sharing-button--pinterest {
  background-color: #bd081c;
  border-color: #bd081c;
}

.resp-sharing-button--pinterest:hover,
.resp-sharing-button--pinterest:active {
  background-color: #8c0615;
  border-color: #8c0615;
}

@media (pointer: coarse) and (orientation: portrait) {
    #container3D {
        max-width: calc(100% - 60px);
        margin: 0 auto;
		/*max-height:60vH;*/
    }
	.ARModus #container3D {
       /* max-width: none;
        margin: 0;*/
    }
}
.warenkorb_konfi .warenkorb_symbol {
    background-size: auto 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #bf0008;
    width: 40px;
    background-image: url(assets/wk_weiss.svg);
}
.warenkorb_konfi .warenkorb_text, .warenkorb_konfi .warenkorb_symbol {
    display: inline-block;
    height: 43px;
    line-height: 43px;
    padding-left: 12px;
    padding-right: 12px;
}
/*
.warenkorb_konfi > * {
    color: #ffffff;
}*/
.gruppe_warenkorb {
				background-color: #f5f5f5;
				padding: 10px;
color:#444;
				/*position: fixed;*/
				bottom: 0;
				right: 0;
				box-sizing: border-box;		/* ist auch wichtig bei 1 Spalten-Responsive-Layout, wenn width 100% gesetzt ist (wegen dem Padding) */
				box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.10);

				margin-top: 1em;
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				align-items: center;

				z-index: 10;		/* fuer die .auswahlbox - diese haben einen z-index. Die Warenkorb-Box soll wieder drueber liegen */
		}
				.gruppe_warenkorb > * {
						vertical-align: middle;
						padding-left: 0.5em;
						padding-right: 0.5em;
				}
				.gruppe_warenkorb > *:first-child {
						padding-left: 0;
				}
				.gruppe_warenkorb > *:last-child {
						padding-right: 0;
				}
				.sonderwunsch {
						flex: 1 1 280px;
				}
						.sonderwunsch textarea {
								width: 100%;
								height: 50px;
								border: 1px solid #e6e6e6;
								box-sizing: border-box;
						}
				.box_menge {
						text-align: right;
						flex: 3 0 auto;
				}
						.menge {
								text-align: center;
								display: inline-block;
						}
								.menge input[type="text"], .menge input[type="number"] {
										border: 1px solid #cccccc;
										border-radius: 2px;
										width: 40px;
										color: #444444;
										text-align: center;
										margin-bottom: 0.2em;
								}
				.box_preis {
						flex: 1 0 auto;
						text-align: right;
				}
				.box_warenkorb {
						flex: 1 0 auto;
						text-align: right;
				}
						.warenkorb_konfi {
								cursor: pointer;
								padding-top: 5px !important;		/* Paddings vom Layout ueberschreiben - das HR-Layout bringt noch einen 5Pixel Border-Bottom mit, der hier auch abgezogen ist */
								padding-bottom: 5px !important;
								padding-left: 1em !important;
								padding-right: 1em !important;
						}

		@media (min-width: 800px) and (max-width: 1200px) {
				#button_warenkorb_text {
						display: none;
				}
		}
		@media (max-width: 600px) {

				.gruppe_warenkorb {
						flex-wrap: wrap;
				}
						.gruppe_warenkorb > * {
								text-align: right;
								margin-top: 1em;
								margin-bottom: 1em;
						}
		}