/*

		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

*/


label, input[type=radio] {		/* hier steht kein .artikelMass davor, weil ich mit dieser Angabe auch die Inhalte der Extra-Fancy-Box-Fenster erreichen will */
		cursor: pointer;
}

.disabled label {		/* bei Flaechenvorhaengen Farbe */
		cursor: not-allowed;
}

.artikelMass {
		margin-top: 1.4em;
		margin-bottom: 3em;
}

		.artikelMass .logo {
				max-width: 60%;
				margin-bottom: 0.2em;
		}

		.artikelMass .markenueberschrift {
				color: #ffffff;
				font-size: 0.85em;
		}

		.artikelMass .titel {
				font-weight: normal;
				font-size: 1.2em;
				color: #000000;
				margin-top: 0;
				margin-bottom: 10px;
		}

		.artikelMass .artikelMassnummer {
				color: #888888;
				font-size: 0.85em;
		}

		.artikelMass .artikel_table_main {
				margin-top: 1em;
						  
				display: flex;
				margin-bottom: 30px;
		}
				.artikelMass .artikel_table_main > .spalte_artikelbild {
					  
						flex: 2;
				}
				.artikelMass .artikel_table_main > .spalte_eingabe {
					  
						flex: 3;
						padding-right: 4%;
						padding-left: 4%;
				}
				.artikelMass .artikel_table_main > .spalte_info {
					  
						flex: 2;

				}

		@media (max-width: 799px) {
				.artikelMass .artikel_table_main {
									 
						flex-direction: column;
				}
						.artikelMass .artikel_table_main > .spalte_artikelbild {
								order: 1;
								padding-top: 1em;
						}
						.artikelMass .artikel_table_main > .spalte_eingabe {
								order: 2;
								padding-top: 1em;
						}
						.artikelMass .artikel_table_main > .spalte_info {
								order: 3;
								padding-top: 1em;
						}
		}


						.artikelMass .link_kundenmeinungen, .artikelMass .link_kundenbilder {
								cursor: pointer;
								display: inline-block;
								text-decoration: none;
								color: #888888;
								font-size: 0.9em;
								margin-top: 1em;
						}


						.artikelMass .ergaenzend_ueberschrift {
								margin-top: 4em;
								margin-bottom: 0.5em;
								font-size: 0.85em;
								font-weight: bold;
						}
						.artikelMass .box_ergaenzend {
								max-width: 240px;
								margin-bottom: 1em;		/* fuer sehr kleine Layouts, wo das mittlere Artikelbild direkt da drunter erscheint */
								overflow: hidden;		/* fuer die innere Scroll-Box, die wir breiter machen */
						}
								.artikelMass .ergaenzend_scroll_button {
										background-color: #e6e6e6;
										border: 1px solid #e6e6e6;

										text-align: center;
										/*
										font-size: 20px;
										font-weight: bold;
										*/
										height: 17px; line-height: 17px;
										cursor: pointer;
										user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
								}
										.artikelMass .ergaenzend_scroll_button img {
												height: 9px;
										}
										.artikelMass .ergaenzend_scroll_button:hover {
												border-style: outset;
										}
										.artikelMass .ergaenzend_scroll_button:active {
												border-style: inset;
										}
								.touch .artikelMass .ergaenzend_scroll_button {
										height: 30px; line-height: 30px;
								}
										.touch .artikelMass .ergaenzend_scroll_button.top {
												vertical-align: middle;
										}
										.touch .artikelMass .ergaenzend_scroll_button.bottom {
												vertical-align: middle;
										}
								.artikelMass .box_ergaenzend_scroll {
										font-size: 0.85em;
										max-height: 145px;

										/*
										overflow: auto;
										overflow: hidden;

												overflow: hidden;	eigentlich auto (scroll), aber wir haben jetzt eigene Scroll-Buttons gebastelt
												overflow: dann eigentlich overflow: hidden, aber dann kann man nicht mehr mit dem Mausrad scrollen, deshalb jetzt wieder overflow: scroll und die Scrollbalken nach rechts raus verschieben und verstecken
										*/
										overflow: auto;
										padding-right: 20px;
										width: 100%;	/* so dass das padding nach rechts raus rutscht */
								}
										.artikelMass .box_ergaenzend_scroll .ergaenzend_artikel {
												display: block;
												color: #444444;
										}
												.artikelMass .box_ergaenzend_scroll .left {
														display: inline-block;
														margin-top: 1em;
														vertical-align: top;
												}
												.artikelMass .box_ergaenzend_scroll .right {
														display: inline-block;
														margin-top: 1em;
														vertical-align: top;
														margin-left: 1em;
														max-width: 160px;
												}
										.artikelMass .box_ergaenzend_scroll img {
												width: 50px;
										}
						.artikelMass .ergaenzend_weitere {
								border: 1px solid #e6e6e6;
								padding: 0.8em;
								color: #444444;
								text-decoration: none;
								font-size: 0.85em;
								width: 100%;
								display: block;
								box-sizing: border-box;
								margin-top: 1em;
								background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #f1f1f1 50%, #f1f1f1 100%);
						}


				.artikelMass .artikelbildContainer {
						max-width: 300px;		/* reale Pixel-Breite vom Bild */
						position: relative;		/* um den Schriftzug "Artikel nicht verfuegbar" platzieren zu koennen */
				}
						.artikelMass .artikelbild_gross {
								width: 100%;
						}
						.artikelMass .preview {
								text-align: left;
								margin-top: 1em;
								margin-bottom: 1em;
						}
								.artikelMass .preview > img {
										margin-right: 2%;
										cursor: pointer;
								}
						.artikelMass .link_dekobeispiele {
								display: none;	/* wird per PHP/Javascript auf 'block' gesetzt */
								margin-left: auto;
								margin-right: auto;
								text-align: left;
								text-decoration: none;
								font-size: 0.85em;
								background-color: #bf0008;
								padding: 0.5em;
						}

								.artikelMass .link_dekobeispiele .icon {
										vertical-align: middle;
										display: inline-block;
										/* width: 20%; */
										padding-left: 0.5em;
										padding-right: 0.5em;
								}
										.artikelMass .link_dekobeispiele .icon img {
												display: block;
												width: 100%;
										}
								.artikelMass .link_dekobeispiele .text {
										vertical-align: middle;
										display: inline-block;
										color: #ffffff;
										padding-left: 0.5em;
										padding-right: 0.5em;
								}
								.artikelMass .link_dekobeispiele .pfeil {
										vertical-align: middle;
										display: inline-block;
										color: #ffffff;
										padding-left: 0.5em;
										padding-right: 0.5em;
								}



						.artikelMass .auswahl_ueberschrift {
								font-size: 0.85em;
								font-weight: bold;
								margin-bottom: 1em;
								margin-top: 0;
						}
								.artikelMass .groesse {
										border-spacing: 0;
								}
										.artikelMass .groesse label {
												cursor: auto;
										}
										.artikelMass .groesse td, .artikelMass .groesse th {
												padding-left: 0;
												padding-top: 0;
												padding-bottom: 1em;
												padding-right: 0;
												vertical-align: top;
										}
										.artikelMass .groesse .trenner {
												width: 3em;
										}
										.artikelMass .groesse th {
												text-align: left;
												font-weight: normal;
										}
												.artikelMass .groesse .aufpreis {
														color: #008c09;
												}
												.artikelMass .groesse .massbezeichnung {
														display: block;		/* dieses Element ist ein <span> im <label> - <div> im <label> ist in HTML5 nicht erlaubt, deshalb <span> mit "display: block" */
												}
												.artikelMass .groesse .massbezeichnung::first-letter {
														font-weight: bold;
												}
												.artikelMass .groesse .hinweisMinMax {
														font-size: 9px;
														color: #999999;
												}

								.artikelMass .auswahl_groesse_part {
										width: 100%;
								}
								.artikelMass .groessen_info {
										margin-top: 2em;
										margin-bottom: 1em;
								}
										.artikelMass .groessen_info img {
												width: 269px;
										}

						.artikelMass .trenner_auswahl_info {
								border: 0;
								height: 0;
								margin-top: 0.5em;
								margin-bottom: 0;
								padding: 0;
						}

						.artikelMass .details_head {
								border-bottom: 1px solid #e6e6e6;
								padding-top: 8px;
								padding-bottom: 8px;
								margin: 0;
								font-size: 11px;
								font-weight: normal;
								cursor: pointer;
						}
						.artikelMass .details_head:first-child {
								border-top: 1px solid #e6e6e6;
						}
								.artikelMass .details_head span {		/* der Pfeil */
										display: inline-block;
								}
						.artikelMass .details_box {
								/* display: none; */
								height: 0;
								overflow: hidden;
								font-size: 0.85em;
						}
								.artikelMass .mediathek {
										/*margin-top: 2em;*/
										border: 1px solid #cecece;
										display: block;
					 
										margin-left: auto;
										margin-right: auto;
								}
										.artikelMass .mediathek .head {
												border-bottom: 1px solid #cecece;
												text-align: center;
												font-weight: bold;
												color: #696969;
												padding: 0.5em;
										}
										.artikelMass .mediathek .body {
												padding-left: 1em;
												padding-right: 1em;
										}
												.artikelMass .mediathek .box {
									
														display: flex;
														color: #444444;
														text-decoration: none;
														margin-bottom: 1em;
														margin-top: 1em;
												}
														.artikelMass .mediathek .box .box_icon, .artikelMass .mediathek .box .box_text {

														}
																.artikelMass .mediathek .box .box_icon img {
																		display: block;
																		width: 32px;
																		height: 32px;
																}

																.artikelMass .mediathek .box .box_text .dateiart {
																		font-weight:bold;
																		color:#737373;
																}

														.artikelMass .mediathek .box .box_text {
																padding-left: 19px;
																vertical-align: top;
																font-size: 12px;
																text-align: left;
														}

								.artikelMass .preisMengeWarenkorb {
										display: inline-block;
										margin-top: 4em;
								}

										.artikelMass .linkMuster {
									
														display: flex;
														margin-top: 4em;
														cursor: pointer;
										   
														align-items: stretch;
												}
														.artikelMass .linkMusterText, .artikelMass .linkMusterSymbol {
																display: inline-block;
																line-height: 40px;
																height: 40px;
														}
														.artikelMass .linkMusterText {

																border-top: 1px solid #cecece;
																border-left: 1px solid #cecece;
																border-bottom: 1px solid #cecece;

								
																flex: 3;
																text-align: left;
																font-size: 12px;

																padding-left: 1em;
														}
														.artikelMass .linkMusterSymbol {
																background-image: url('bilder/eigenproduktion/icons/stoffmuster.svg');
																background-repeat: no-repeat;
																background-position: 50% 50%;
								
																flex: 1;
																background-color: #fedaa6;
																border-top: 1px solid #cecece;
																border-right: 1px solid #cecece;
																border-bottom: 1px solid #cecece;
														}

										.artikelMass .sonderwunsch {
												margin-top: 0.4em;
												margin-bottom: 0.4em;
												position:relative;
										}
												.artikelMass .sonderwunsch textarea {
														box-sizing: border-box;
														width: 100%;
														height: 3.6em;
														border: 1px solid #e6e6e6;
														padding: 6px;
												}
														.artikelMass .sonderwunsch textarea.big {
																width: 41em;
																height: 12.6em;
																position:absolute;
																right:0;
														}

										.artikelMass .zeile_preis {
												padding: 4px;
												background-color: #f9f9f9;
												border-bottom: 1px solid #cecece;
												margin-top: 0.4em;
												margin-bottom: 0.4em;
										}
												.artikelMass .preis {
														text-align: right;
														font-size: 0.45cm;
														font-weight: bold;
														margin-top: 0.2em;
												}
												.artikelMass .zusatz {
														text-align: right;
												}

										.artikelMass .zeile_warenkorb {
												margin-top: 0.2em;
								  
												display: flex;
										}
												.artikelMass .box_menge {
														text-align: center;
														border: 1px solid #cacaca;
														padding: 5px;
									 
														flex: 0 0 auto;
												}

														.artikelMass .box_menge .up, .artikelMass .box_menge .down,
														.artikelMass .box_menge input {
																height: 17px;
																padding: 1px;
																display: inline-block;
																vertical-align: top;
														}

														.artikelMass .box_menge .up, .artikelMass .box_menge .down {
																width:14px;
																background-color:#f9f9f9;
																color:#cdcdcd;
																font-size:11px;

																cursor:pointer;
																user-select: none;
																-webkit-user-select: none;
																-moz-user-select: none;
																-ms-user-select: none;

																border: 1px solid #cdcdcd;
														}
														.artikelMass .box_menge input {
																border-top: 1px solid #cdcdcd;
																border-bottom: 1px solid #cdcdcd;
																border-left: 0 !important;
																border-right: 0 !important;
														}


														.artikelMass input[type="text"], .artikelMass input[type="number"] {
																border: 1px solid #cccccc;
																width: 40px;
																color: #444444;
																text-align: center;
														}

												.artikelMass .zeile_warenkorb .warenkorb {
														cursor: pointer;
														text-align: center;
									 
														flex: 1 0 auto;

														background: linear-gradient(top, #fcbb53 0%, #e08906 100%);
														background: -moz-linear-gradient(top, #fcbb53 0%, #e08906 100%);
														background: -webkit-linear-gradient(top, #fcbb53 0%, #e08906 100%);
														background: -ms-linear-gradient(top, #fcbb53 0%, #e08906 100%);
														background: -o-linear-gradient(top, #fcbb53 0%, #e08906 100%);

												}
														.artikelMass .zeile_warenkorb .warenkorb .warenkorb_text {
																display: inline-block;
																line-height: 49px;
																color: #fff;
																font-size: 16px;
										  
														}

														.artikelMass .zeile_warenkorb .warenkorb.deaktiviert {
																opacity: 0.4;
																cursor: not-allowed;
														}


								.artikelMass .wartezeit {
										margin-top: 1em;
										font-style: italic;
										font-size: 12px;
								}

						.artikelMass .auswahl_variation {
								margin-top: 1em;
								margin-bottom: 1em;
						}
								.artikelMass .auswahl_variation_box {
										display: inline-block;
										margin-bottom: 1em;
										margin-right: 0.4em;
										cursor: pointer;
										text-align: center;
										/* width: 112px; die Boxen sind zu verschieden um hier eine feste Breite ansetzen zu koennen */
								}

										.artikelMass .auswahl_variation_box .auswahl_variation_box_text {
												color: #888888;
												background-color: #ffffff;
												border: 1px solid #e6e6e6;
												padding: 7px;
												font-size: 0.26cm;
												text-align: left;
										}
												.artikelMass .auswahl_variation_box img {
														border: 1px solid #ffffff;
												}
												.artikelMass .auswahl_variation_box.selected img {
														border-color: #888888;
												}
														.artikelMass .auswahl_variation_box:hover img {
																border-color: #888888;
														}
												.artikelMass .auswahl_variation_box.selected .auswahl_variation_box_text {
														color: #444444;
														background-color: #e6e6e6;
														border-color: #888888;
												}
														.artikelMass .auswahl_variation_box:hover .auswahl_variation_box_text {
																background-color: #e6e6e6;
																color: #444444;
														}

												.artikelMass .auswahl_variation_box.disabled {
														cursor: not-allowed;
												}
														.artikelMass .auswahl_variation_box.disabled  .auswahl_variation_box_text {
																color: #cccccc;
														}

									.artikelMass .auswahl_variation_select {
											color: #444444;
											font-size: 11px;
											padding: 0.3em;
											width: 100%;
									}
											.artikelMass .auswahl_variation_select option:disabled {
													color: #cccccc;
													cursor: not-allowed;
											}
									.eingabe_masse {
											display: inline-block;
									}
									.stoffabzugmasse {
											display: inline-block;
									}
											.stoffabzugmasse img {
													min-width: 200px;
													max-width: 100%;
											}

						.artikelMass .massanfertigung {
								border-top: 1px dashed #bde5bf;
								border-bottom: 1px dashed #bde5bf;
								color: #00900a;
								font-size: 0.85em;
								padding-top: 0.5em;
								padding-bottom: 0.5em;
								padding-left: 30px;
								background-image: linear-gradient(to right, #ffffff 0%, #e8fcea 50%, #ffffff 100%);
								list-style-image: url(/flaechenvorhang/bilder/haken.png);
								margin-bottom: 0;
						}
								.artikelMass .massanfertigung li {
										padding-top: 0.25em;
										padding-bottom: 0.25em;
								}
										.artikelMass .massanfertigung li a {
												color: #00900a;
										}


				.artikelMass .eigenschaftenBoxen {
							
						display: flex;
											 
						justify-content: space-between;
									  
						align-items: flex-start;
						margin-top: 20px;
						margin-left: -10px;
						margin-right: -10px;
				}
						.artikelMass .eigenschaftenBoxen .box {
							
								flex: 1 0 0;
								margin-left: 10px;
								margin-right: 10px;
								margin-bottom: 20px;		/* das ist wichtig, wenn die Boxen umbrechen */
								border: 1px solid #e6e6e6;
								min-height:156px;
								position: relative;			/* fuer den absolut positionierten "Weiterlesen"-Link */
						}
								.artikelMass .eigenschaftenBoxen .box .head {
										background-color: #f9f9f9;
										font-weight: bold;
										padding: 1em;
										border-bottom: 1px solid #e6e6e6;
										font-size: 15px;
								}
								.artikelMass .eigenschaftenBoxen .box .body {
										padding: 1em;
										max-height: 180px;
										min-height: 180px;
										overflow: hidden;
										font-size: 15px;
								}
										.artikelMass .eigenschaftenBoxen .box .body ul {
												margin: 0;
												padding-left: 1em;
										}
								.artikelMass .eigenschaftenBoxen .box .weiterlesen {
										height:20px;
										background-color:#fff;

										cursor:pointer;
										color:#e08802;

										display:none;	/* wird aus ambiente.js gesteuert */

										position: absolute;
										bottom: 0;
										right: 0;

										padding-right: 9px;
										width: 100%;
										text-align: right;
										box-sizing: border-box;
								}
										.artikelMass .artikeleigenschaften {

										}
												/*.artikelMass .artikeleigenschaften .key {
														font-weight: bold;
												}*/
												.artikelMass .artikeleigenschaften .value {

												}
												.artikelMass .artikeleigenschaften .einzeln {

												}

				@media (max-width: 799px) {

						.artikelMass .eigenschaftenBoxen {
									   
								flex-direction: column;
									 
								align-items: stretch;
						}
								.artikelMass .eigenschaftenBoxen .box {
						  
										flex: 1;
								}


						.artikelMass .artikel_table_main {
									   
								flex-direction: column;
						}
								.artikelMass .artikel_table_main > .spalte_artikelbild {
										order: 1;
										padding-top: 0;
								}
								.artikelMass .artikel_table_main > .spalte_eingabe {
										order: 2;
										padding-top: 1em;
								}
								.artikelMass .artikel_table_main > .spalte_info {
										order: 3;
										padding-top: 1em;
								}
										.artikelMass .logo {
												max-width: 100px;
										}
										.artikelMass .artikelbildContainer {
								  
												display: flex;
												max-width: none;
										}
												.artikelMass .artikelbildContainer .fancybox_hauptbild {
									  
														flex: 1 1 220px;
												}
												.artikelMass .artikelbildContainer .preview {
									  
														flex: 8 0 110px;
														margin-top: 0;
														margin-bottom: 0;
														padding-left: 4%;
												}
				}

				.artikelMass .konfektion .rows_standard {
						padding: 1% 3% 1% 1%;
				}
						.artikelMass .konfektion .rows_standard strong,
						.artikelMass .konfektion .rows_optionen strong
						{
								color:#767676;
								padding-left:5%;
						}
				.artikelMass .konfektion .rows_optionen {
						border: 1px solid #367ab9;
						padding:1% 3% 1% 1%;
				}


				.artikelMass .konfektion .row {
							
						display: flex;
											 
						justify-content: space-between;
								  
						align-items: center;
						padding: 3% 0;
						border-bottom: 1px solid #cecece;
						font-size: 12px;
				}
				.artikelMass .konfektion .row:last-child {
						border-bottom: none;
				}
						.artikelMass .konfektion .row .eingabe {
							   
								flex: 1 1 auto;
						}
						.artikelMass .konfektion .row .icons {
							   
								flex: 0 0 25px;
								padding-left: 0.8em;
						}
								.artikelMass .konfektion .row .bez {
								}
								.artikelMass .konfektion .row .moreOptions {
										margin-top: 1em;
								}
										.artikelMass .konfektion .row .moreOptions label {		/* Farbe bei den Flaechengardinen */
												display: inline-block;
												text-indent: 0;
												padding-left: 0;
												margin-left: 2em;
										}
								.artikelMass .konfektion .row .hinweis {
										display: none;
										margin-top: 1em;
										color: #770000;
								}
										.artikelMass .konfektion .bez .checkbox_img {
												vertical-align: middle;
										}

										.artikelMass .konfektion .row label {
												position:relative;		/* fuer Jannick seine Farbboxen (Optionset Gardinenschal aus Stoffen) */
												display: block;
												text-indent: -22px;
												padding-left: 22px;		/* margin, statt padding, sonst sinst die Radio-Button-Images nicht mehr anklickbar! */
										}


										.artikelMass .konfektion .row label .option_bezeichner{
											/* Jannick Optionset Gardinenschal */
											margin-left:15px;
										}


										  .artikelMass .konfektion .bedienseite label			/* optionale Bedienseite */
										, .artikelMass .konfektion label.bez.labelBedienseite	/* Pflicht-Bedienseite in eigener Accordion-Box */
										{
												display: inline-block;	/* ohne diese Angabe ist im Safari und im Firefox (wenn gross gezoomt) und vielleicht in den anderen Browsern das Checkbox-Img nicht klickbar, weil label sonst nur wie display inline fungiert */
										}

										.artikelMass .konfektion label.bez .checkbox_img {

												pointer-events: none; /* Fuer IE bis einschl. Version 11, so dass auch das Bild im Label klickbar ist und nicht nur der Text */
												/* jezt muss das Markieren bei dem Firefox, was durch die letzte Anweisung ausgeschaltne wurde, wieder angeschalten werden */
												-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;       /* Internet Explorer/Edge */
												user-select: none;           /* Non-prefixed version, currently
																				not supported by any browser */
										}

										.artikelMass .konfektion .row .icon {
												display: inline-block;
												margin-bottom: 0.5em;
										}
										.artikelMass .konfektion .row .icon:last-child {
												margin-bottom: 0;
										}

												.artikelMass .konfektion .row .icon img {
														width: 25px;
												}

								.artikelMass .konfektion .row .eingabe .bez input[type="radio"]:disabled ~ * {
										color: #999999;
								}

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

						.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 */
		}
				.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 {
				display: none;
				margin-top: 1em;
		}


		/* Tabs im Extra-Design-Fenster */
				.popupText {
					padding: 20px 50px 20px 50px;
				}
				.richtig-messen-tischdecken {
					display: flex; 
					flex-direction: column; 
					padding: 20px 0px 20px 170px;
				}
				.tischdecke-image-container {
					display: flex;
					flex-wrap: wrap;
					gap: 10px; /* Abstand zwischen den Bildern */
					justify-content: left;
				}
				.tischdecke-image-div {
					display: flex;
					flex-wrap: wrap;
					gap: 10px; /* Abstand zwischen den Bildern */
					justify-content: left;
					height: 100%;
				}
				.h2tischdecke {
					font-size: 1.8em;
					font-weight: 600;
				}
				.h3tischdecke {
					font-size: 1.55em;
					font-weight: 600;
				}
				.tischdeckeText {
					font-size: 20px; 
					font-weight: 400;
					line-height: 1.6em;
				}
				.tischdeckeBestellmass {
					display: flex;
				}
					.tischdeckeBestellmass > img {
						width: 100%;
						max-width: 300px;
					}
					.tischdeckeBestellmass > p {
						font-size: 20px;
						font-weight: 400;
						display: flex;
						align-self: center;
					}
				.tischdecke-image-div > div > p {
					text-align: center;
					font-size: 18px;
					font-weight: 500;
				}			
				.tischdecke-image-container img {
					/*flex: 1 1 calc(33.33% - 10px); /* Drei Bilder nebeneinander */
					height: 155px;
				}
				.tischdecke-image-div div {
					flex: 1 1 calc(20% - 10px); /* Drei Bilder nebeneinander */
					/*height: 195px;*/
				}
				.imgCenter {
					padding-left: 16%;
				}
				.variableTischdecke {
					font-size: 28px;
					font-weight: 600;
				}
				
				@media (max-width: 768px) {
					.popupText {
						padding: 10px 5px 10px 5px;
					}
					.richtig-messen-tischdecken {
						padding: 0px;
					}
					.tischdecke-image-container img {
						flex: 1 1 100%; /* Bei mobiler Breite auf eine Spalte umstellen */
					}
					.tischdecke-image-div div {
						flex: 1 1 100%; /* Bei mobiler Breite auf eine Spalte umstellen */
					}
					.imgCenter {
						padding-left: 25%;
					}
					.tischdeckeBestellmass {
						display: flex;
						flex-direction: column;
					}
				}
				.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: 100%;
				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: 100%;
										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;
										}
										.fensterZweiSpalten > .left .boxSlider {
												width: 90%;
												display: flex;
										}
												.fensterZweiSpalten > .left .boxSlider .min {
														flex: 0 0 auto;
												}
												.fensterZweiSpalten > .left .boxSlider input {
														flex: 1 1 auto;
														overflow: auto;		/* Tim, Hack fuer Firefox z.B. 113.0.1 - andernfalls greift die Flex-Breite nicht und das Element wird zu gross */
												}
												.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: 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(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 */

/*jannick anpassung an farben auflistung im gardinenschalkonfigurator*/
.rows_farben{
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	margin-top: 1%;
}

.artikelMass .konfektion .row.row_farbe{
	padding: 1% 0;
	width: 44%;
    margin-bottom: 4%;
}

.farbe_detail{
	width: 23px;
    height: 23px;
    border: 1px solid;
    border-color: #cecece;
	position: absolute;
    right: 0px;
    top: calc(100% - 24px);
}

.nocolor{
	display:none;
}

.weiss{
	background-color:#ffffff
}

.cremeweiss{
	background-color:#fefaf1
}

.sonnengelb{
	background-color:#f2b729
}

.schlamm{
	background-color:#776559
}

.schokobraun{
	background-color:#483a2d
}

	  
						 
 

.tuerkis{
	background-color:#4bc6b9
}

.beige{
	background-color:#cfbea4
}

.anthrazit{
	background-color:#423e40
}

.steingrau{
	background-color:#b6afa9
}

.masseinagbeplissee input[type=number], .masseinagbeplissee input[type=text] {		/* number oder text - je nachdem was es letztendlich fuer ein Feld wird */
	background-color: #ececec;
	border: 1px solid #cecece;
	padding: 6px;
	text-align: right;
	width: 60px;
	margin-left: 20px;
	-moz-appearance: textfield;
}

.btnPfeil {
	background-image: url(/xArtikelsystem/bilder/eigenproduktion/pfeil_rechts_weiss.svg);
	background-repeat: no-repeat;
	background-position: 96% center;
	padding-right: 2em !important;
	display: inline-block;
	background-color: #357dbc;
	color: #ffffff;
	padding-left: 0.5em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	text-decoration: none;
}

#linkMasseingabeMessanleitung {
    margin-bottom: 2.5em;
}

.eingabe_masse_left {
    flex: 1 1 auto;
				   
    padding-right: 3em;
}

.eingabe_masse_right {
    flex: 1 1 auto;
				
}

.alticons {
	margin-top: 23px;
}

/*faltband desing*/
	.faltbandHoehe, .faltbandRaffver {
		flex-basis: 100%;
	}

	.faltbandHoehe label, .faltbandRaffver label{
		border: 1px solid black;
		padding: 2px 0px 2px 0px;
		margin-bottom: 7px;
		margin-top: 7px;
		margin-left: 7%;
		margin-right: 30%;
		text-align: center;
	}

	.faltbandHoehe label:first-of-type{
		margin-top: 8%;
	}

	.faltbandRaffver label:first-of-type{
		margin-top: 8%;
	}

	.faltbandHoehe label{
		font-weight: 600;
	}

	.faltbandRaffver label{
		font-weight: 600;
	}

	.faltbandueberschrift{
		margin-left: 7%;
	}

	.faltbandtrenner{
		width: 1px;
		border-left: 1px solid #cecece;
		margin-right:10%;
	}

	.faltbandaktiv{
		border: 3px solid black !important;
	}

/*oesenlose desing*/
	.oesenHoehe, .oesenMaterial {
		flex-basis: 100%;
	}

	.oesenHoehe label, .oesenMaterial label{
		border: 1px solid black;
		padding: 2px 0px 2px 0px;
		margin-top: 7px;
		margin-left: 7%;
		margin-right: 30%;
		text-align: center;
	}

	.oesenHoehe label:first-of-type{
		margin-top: 8%;
	}

	.oesenHoehe label{
		font-weight: 600;
	}

	.oesenMaterial label{
		font-weight: 600;
	}

	.oesenueberschrift{
		margin-left: 7%;
	}

	.oesentrenner{
		width: 1px;
		border-left: 1px solid #cecece;
		margin-right:10%;
	}

	.oesenaktiv{
		border: 3px solid black !important;
	}

.option_aufpreis{
	float: right;
	margin-right: 5%;
	margin-top: 5.3%;
}

.popupBildText {
	width:800px;
}

.popupBildTextRaffrolloKonfi{
	width:400px;
}

.activearrow{
	color:green;
	font-weight: 1000;
    float: right;
}

.aufpreislabel{
	letter-spacing:0.8px;
}

.rabatt{
	color:#00900a;
	letter-spacing: 0;
}

.eingabe_masse_parent{
	display:flex;
}

.hinweis_masse_trenner{
	border-bottom: 1px solid #cecece;
	margin-top: 0%;
	margin-bottom: 3%;
}

.auswahl_beliebt_select{
	background-color: #ececec;
	padding: 6px;
	text-align: right;
	width: 125px;
	border: 1px solid #cecece;
	margin-left: 20px;
}

.artikeleigenschaften li{
	font-size: 14px;
}

#innenteil_eckig_masse, #innenteil_oval_masse, #innenteil_rund_masse{
	margin-left: 10%;
	width: 28%;
	vertical-align: middle;
	cursor:pointer;
}


.hinweis strong{
	font-weight:600;
	padding: 0 !important;
	color: unset !important;
}



/* Stephan: damit mobil nicht das canvas Element zur Sackgasse wird, da man nicht mehr scrollen kann*/

#steuerungContainer {
	position: relative;
	text-align: center;
	margin: 4px;
	display: block;
	height: 80px;
}

@media (max-width: 768px) {

	#woerellCanvas {
		pointer-events: none;
	}

	#steuerungContainer {
		display: none;
	}
}