#konfiguratorGesamt {
		background-color: #ffffff;
		margin-top: 1em;
}



#konfiguratorGesamt label {
		cursor: pointer;

		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		
		hyphens: auto;		/* Gewebefarbe "Eisenglimmerdunkelgrau" */
		
		font-size: 1em;		/* wurd vom Layout verkleinert */
}
label input[type=radio] {
		cursor: pointer;
}




#infoRMass {
		cursor: pointer;
}



input[type=number] {
		-moz-appearance: textfield;		/* Beim Firefox-Browser 41 sehen die Spin-Buttons nicht schoen aus */
}
input[type=radio] {
		vertical-align: middle;
		margin-top: 0;
		margin-bottom: 0;
}

.link {		/* Elemente (z.b: <span>) die wie Links aussehen sollen (wenn ihnen z.B. per Javascript ein Ereignis zugeordnet wurde) - z.B. Bei der Dachfenster-Typen-Wahl wenn Hersteller mit Plissee-System nicht zusammen passt */
		cursor: pointer;
		text-decoration: underline;
}

.clear {
		clear: both;
		height: 0;
		width: 0;
		overflow: hidden;
}

.btnPfeil {
		background-image: url(bilder/pfeile/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;
}

.listStyleTypeRaquo ul, ul.listStyleTypeRaquo {
		list-style-type: none;
}
		.listStyleTypeRaquo ul > li:before, ul.listStyleTypeRaquo > li:before {
				content: "\00BB\0020";
		}
		.listStyleTypeRaquo ul > li, ul.listStyleTypeRaquo > li {
				text-indent: -1em;
				margin-left: 1em;
		}









#picture_design {
		overflow: auto;
		display: inline-block;
		max-width: 700px;
		margin: auto;
		text-align: left;
		padding-right: 1em;		/* Platz zwischen Text und evtl. eingeblendetem Scrollbalken */
}

		#picture_design img {
				display: inline-block;
				max-width: 100%;
		}

		.picture_design_ueberschrift {
				color: #444444;
				margin-bottom: 1em;
				text-align: left;
		}
		.picture_design_group {
				display: flex;
				flex-direction: row;
		}
		#picture_design.elemLt600 {
				padding-right: 0;
		}
		#picture_design.elemLt600 .picture_design_group {
				/* flex-direction: column;  hat bei .picture_design_box die 370px als Hoehenangabe, deshalb hier jetzt display: block */
				display: block;
		}
				.picture_design_bild {
						text-align: left;
						flex: 0 0 300px;
						overflow: hidden;
				}
				#picture_design.elemLt600 .picture_design_bild {
						text-align: center;
				}
				.picture_design_space {
						flex: 0 1 45px;
				}
				#picture_design.elemLt600 .picture_design_space {
						flex: 0 1 2em;
				}
				.picture_design_box {
						text-align: left;
						flex: 1 1 370px;
						overflow: auto;
						padding-right: 1em;		/* Abstand zu eventuellem Scrollbalken */
				}
						.picture_design_box_ueberschrift {
								margin-top: 2em;
								margin-bottom: 2em;
						}
								.picture_design_box_ueberschrift:first-child {
										margin-top: 0;
								}
								.picture_design_box_ueberschrift img {
										vertical-align: middle;
										margin-right: 1em;
								}

						.picture_design_box_eigenschaften {

						}
						.picture_design_box_eigenschaften, .picture_design_box_eigenschaften a {
								color: #444444;
						}
								.picture_design_box_eigenschaften ul {
										list-style: none;
										margin: 0;
										padding: 0;
								}
										.picture_design_box_eigenschaften ul li:before {
												content: "\002D \0020";
										}
										.picture_design_box_eigenschaften ul li {
												margin-bottom: 2px;
										}

						.picture_design_box_highlights {

						}
								.picture_design_box_highlights > * {
										display: inline-block;
										margin-left: 2em;
										margin-right: 0;
								}
										.picture_design_box_highlights > * > * {
												text-align: center;
												font-size: 80%;
										}

						.picture_design_box_stoffprobe {
								font-weight: bold;
								text-decoration: underline;
						}
								.picture_design_box_stoffprobe span {
										text-decoration: none;
								}
						.picture_design_box_beschr {
								max-height: 600px;
								overflow: auto;
								line-height: 1.6em;
						}















#konfigurator {

}

#konfigurator h3 {
		font-size: 100%;
}

		#modellbild_preview img {
				border: 1px solid #454545;
				padding: 3px;
				margin-right: 1em;
				margin-bottom: 3px;
				height: 54px;
				cursor: pointer;
				min-width: 10px;		/* falls Bild nicht geladen werden konnte (fuer Chrome - Firefox uebernimmt hier fuer die Breite die angegebene Hoehe) */
				min-height: 10px;
		}
				#modellbild_preview img.active {
						outline: 2px solid #454545;
				}

		#modellbild_steuerung {
				color: #888888;
				font-size: 11px;
				position: fixed;
				bottom: 0;
				left: 0;
				width: 50%;
				display: flex;
				justify-content: space-around;
		}
				#modellbild_steuerung_left {
						flex: 0 1 33%;
				}
				#modellbild_preview {
						flex: 1 0 auto;
				}
				#modellbild_steuerung_right {
						flex: 0 1 33%;
				}
				.graphSetBackground {
						cursor: pointer;
						height: 54px;
				}



		.gruppe_warenkorb {
				background-color: #f5f5f5;
				padding: 10px;

				position: fixed;
				bottom: 0;
				right: 24px;
				width: 48%;
				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;
		}
				.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;
				}
						.preis {
								font-size: 0.45cm;
								font-weight: bold;
						}
						.preis_alt {
								display: block;
								text-decoration: line-through;
						}
						.preis_neu {
								display: block;
								color: #ee1f26;
						}
				
				.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;
								display: inline-flex;
						}

			/* nur RTS */				
			#anbieterkennzeichnung {
					text-align: right;
					cursor: pointer;
					text-decoration: underline;
					font-size: 11px;
			}



			.warenkorb_konfi .warenkorb_text, .warenkorb_konfi .warenkorb_symbol {
					height: 43px;
					line-height: 43px;
			}

			.warenkorb_konfi .warenkorb_symbol {
					display: flex;
					align-items: center;
			}
			.warenkorb_konfi .warenkorb_text {
					text-transform: uppercase;
			}




					.warenkorb_link {
						cursor: pointer;
						text-align: right;
						display: block;
						white-space: nowrap;
					}
						.warenkorb_link .warenkorb_text, .warenkorb_link .warenkorb_symbol {
								display: inline-block;
								height: 43px;
								line-height: 43px;
								padding-left: 12px;
								padding-right: 12px;
						}
								.warenkorb_link > * {
										color: #444444;
								}

						.warenkorb_link .warenkorb_text {
								text-transform: uppercase;
								border-right: 1px solid #ffffff;
						}
								.warenkorb_link .warenkorb_text {
										background-color: #e6e6e6;
								}
						.warenkorb_link .warenkorb_symbol {
								background-size: auto 30px;
								background-repeat: no-repeat;
								background-position: center;
								width: 40px;
								box-sizing: content-box;
						}
								.warenkorb_link .warenkorb_symbol {
										background-color: #e6e6e6;
										background-image: url(bilder/wk_schwarz.svg);
								}


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

		#spalten2 {
				position: fixed;
				left: 0;
				width: 100%;
		}
				#spalten2 #visualisierung {
						position: fixed;
						/* top: 120px; wenn hier nichts gesetzt ist, sollte die aktuelle Position passen */
						left: 2%;
						width: 48%;
						text-align: center;
				}

						.ajax_lade {
								position: absolute;
								right: 0;
								top: 0;
								visibility: hidden;
								width: 50px;
								height: 50px;
						}

						#modellbild_ueberschrift {
								margin-bottom: 1em;
						}

						/*
						#paper {
								display: none;
								margin: auto;
						}
						*/
						.modellbild {		/* das Ganze als Klasse definieren, nicht als ID, weil beim Zoom, die Elemente geklont werden und dort die ID umbenannt ist, die Klasse aber nicht */
								position: relative;
								text-align: center;		/* so das auch das geklonte Bild mittig im Container ist */
						}
								.modellbild > * {
										object-fit: contain;
										z-index: 1;
								}
								.modellbild > svg {
										background-position: 50% 50%;
										background-repeat: no-repeat;
								}

						#group_modellbild, #picture_design {		/* zur Initialisierung alles aus haben */
								display: none;
						}
						#group_modellbild {
								/* display: inline-flex; */
								align-items: center;
						}

								#modellbild_left, #modellbild_right {
										display: none;
										cursor: pointer;
								}

						#spalten2 #visualisierung {
								text-align: center;
								/* margin-bottom: 1em; */
						}
								#modellbild_ueberschrift {
										text-align: left;
								}
										#spalten2 #visualisierung .ueberschrift1 {
												font-size: 16px;
										}
										#spalten2 #visualisierung .ueberschrift2 {
												font-weight: bold;
												font-size: 16px;
										}
						#visualisierung svg {
								max-width: 100%;
						}
				#spalten2 #eingabe {
						margin-left: 48%;
						padding-left: 4%;
						padding-right: 1.2%;
						padding-bottom: 200px;
						overflow: auto;
						position: relative;		/* fuer absolute positioniertes #zoomWindow */
						box-sizing: border-box;		/* das ist im RTS Standard, in den anderen Shops nicht. Im Script wird auf dieses Element eine height gesetzt. Damit das mit dem Padding hin haut hier die Vereinheitlichung mit boder-box */
				}
						#eingabe .bereichsueberschrift {
								background-color: #444444;
								color: #ffffff;
								font-size: 16px;
								font-weight: normal;
								padding: 1em;
								text-align: left;
						}
						#eingabe .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;

								display: flex;
								justify-content: space-between;
								align-items: center;
						}
						#eingabe .accordion_ueberschrift:first-child {
								border-top: 0;
						}
						#eingabe .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;
						}
						#eingabe .accordion_ueberschrift.active {
								color: #444444;
								font-weight: bold;
						}
								#eingabe .accordion_ueberschrift .eingabeGewaehltIcon {
										flex: 0 0 auto;
								}

								#eingabe .accordion_ueberschrift .eingabeGewaehltUe {
										flex: 1 1 auto;
										padding-right: 1em;
								}

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

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

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

										flex: 0 0 auto;
								}

						#eingabe .eingabeBox {
								margin-top: 1em;
								margin-left: 2em;
								margin-bottom: 1em;
								display: none;
								overflow: hidden;		/* fuer die Animation */
						}
								#eingabe .accordion_zwischenueberschrift {
										font-weight: normal;
										margin-top: 0;
										margin-bottom: 1em;
								}
								#eingabe .erklaerung {
										font-size: 90%;
										color: #888888;
								}


								#listDesigns {

								}
										#listDesigns .design {
												display: flex;
												flex-direction: row;
												align-items: stretch;
												border-bottom: 1px solid #cecece;
												cursor: default;
										}
										#listDesigns .design.active {
												background-color: #fafafa;
										}
										#listDesigns .design.disabled {
												cursor: not-allowed;
												color: #d1d1d1;
										}
										/*
										#listDesigns .design.ueberschrift {
												position: relative;		/ - * fuer .videoMaterialien position=absolute * - /
										}
										*/
												#listDesigns .design > * {
														display: flex;
														flex-direction: column;
														justify-content: center;
												}
												#listDesigns .design > .radio {
														flex: 1 0 0;
														cursor: pointer;
														align-items: center;
												}
												#listDesigns .design.ueberschrift > .radio {
														cursor: default;
												}
												#listDesigns .design.disabled > .radio {
														cursor: not-allowed;
												}
														#listDesigns .design > .radio > input[type=radio] {
																cursor: pointer;
														}
														#listDesigns .design.disabled > .radio > input[type=radio]  {
																cursor: not-allowed;
														}

												#listDesigns .design > .img {
														flex: 2 0 0;
														justify-content: center;
														cursor: pointer;
												}
												#listDesigns .design.disabled > .img  {
														cursor: not-allowed;
												}
														#listDesigns .design > .img > img {
																/* height: 55px; */ 
																width: 100%;
																max-width: 90px;
																margin-right: 10px;
																margin-top: 8px;
																margin-bottom: 8px;
														}
												#listDesigns .design.ueberschrift > .img {
														cursor: default;
												}
												#listDesigns .design > .bez {
														flex: 3 0 0;
														padding-right: 0.5em;
														cursor: pointer;
												}
												#listDesigns .design.ueberschrift > .bez {
														cursor: default;
												}
												#eingabe.elemLt650 #listDesigns .design > .bez {
														font-size: 80%;
												}
												#eingabe.elemLt400 #listDesigns .design > .bez {
														font-size: 70%;
												}
												#listDesigns .design.disabled > .bez  {
														cursor: not-allowed;
												}
														#listDesigns .design > .bez .farbwahl {
																margin-top: 0.5em;
																/* font-size: 80%;  der Radio-Button aendert sich nicht in der Groesse */
														}
																#listDesigns .design > .bez .farbwahl > label {
																		margin-left: 1em;
																}
																#listDesigns .design > .bez .farbwahl > label:first-child {
																		margin-left: 0;
																}
												#listDesigns .design > .icon {
														flex: 1 0 0;
														align-items: center;
														font-size: 80%;
														border-left: 1px solid #f1f1f1;
														padding-top: 1em;
														padding-bottom: 1em;
														overflow: hidden;
												}
												#listDesigns .design.ueberschrift > .icon {
														justify-content: flex-start;
												}
												#listDesigns .design.zeile > .icon {
														justify-content: center;
												}
												#listDesigns .design > .icon:last-child {
														border-right: 1px solid #f1f1f1;
												}
														#listDesigns .design > .icon > .img img {
																width: 23px;
																height: 23px;
														}
														#listDesigns .design > .icon > .bez {
																margin-top: 0.5em;
																hyphens: auto;
																text-align: center;
														}
														#eingabe.elemLt400 #listDesigns .design > .icon > .bez {
																display: none;
														}
												#listDesigns .videoMaterialien {
														/*
														position: absolute;
														left: 20%;
														*/
														text-decoration: none;
														color: #000000;
												}

														#listDesigns .videoMaterialien > * {
																vertical-align: middle;
														}

										.tabs .icon {
												width: 22px;
												height: 22px;
										}
										.tabs > * {
												display: inline-block;
												border: 1px solid #cecece;
												margin-right: 6px;
												padding: 1em;
												position: relative;
												left: 0;
												top: 1px;
												cursor: pointer;
												/* color: #cecece;  das waere zu hell, deshalb jetzt dunkler */		color: #888888;
												background-color: #ffffff;
										}
										.tabs > *.active {
												border-bottom: 1px solid #ffffff;
												color: #444444;
										}
												.tabs > * > img {
														vertical-align: middle;
												}
												.tabs > * > .bez {
														margin-left: 1em;
												}
												/* aktuell haben wir hie rnur 2 Tabs und das passt hin
												#eingabe.elemLt350 #tabModell .bez {
														display: none;
												}
												*/
										.tabs > .noTab {
												border: 0;
												text-decoration: none;
												color: #444444;
										}
										.tabFenster {
												border-top: 1px solid #cecece;
										}
												.tabFenster > * {
														display: none;
														padding-left: 1em;
														padding-right: 1em;
														padding-top: 1em;
														padding-bottom: 1em;
														max-width: 800px;		/* max-width hilft uebergeordneten Flex-Elementen bei der Breitenbestimmung*/
												}
												#eingabe.elemLt650 .tabFenster > * {
														padding-left: 0;
												}


								.tabFensterMain ul {
										list-style-type: none;
										padding: 0;
										margin: 0;
								}
										.tabFensterMain ul li {
												border-bottom: 1px solid #cecece;
										}
										.tabFensterMain ul li label {
												display: block;
										}
												.tabFensterMain ul li img {
														vertical-align: middle;
														margin-top: 1em;
														margin-bottom: 1em;
												}
												.modellBildVorauswahl {
														height: 80px;
												}

										#tabFensterModell ul li {
												display: flex;
												justify-content: space-between;
												align-items: center;
										}
												#tabFensterModell ul li label {
														display: flex;
														justify-content: space-between;
														align-items: center;
														flex: 1 2 auto;
												}
												#tabFensterModell ul li .input {
														flex: 0 0 5.6%;
														text-align: left;
												}

												#tabFensterModell ul li .img {
														width: 69px;
														flex: 0 0 69px;
														margin-left: 1em;
														margin-right: 1em;
												}
												#tabFensterModell ul li .bezeichnung {
														flex: 1 0 0;
														text-align: left;
														padding-left: 1em;
														padding-top: 1em;
														padding-bottom: 1em;
														hyphens: auto;
												}
														#tabFensterModell ul li .bezeichnung .zusatz {
																color: #888888;
																display: block;
														}
														#tabFensterModell ul li .bezeichnung .zusatzlink {
																display: block;
																/* font-size: 13px; */
														}
																#tabFensterModell ul li .bezeichnung .zusatzlink a {
																		color: #888888;
																		text-decoration: none;
																		border-bottom: 1px dashed #888888;
																}
												#tabFensterModell ul li .price {
														flex: 0 0 auto;
														text-align: left;
														padding-left: 1em;
														padding-right: 1em;
												}
												#tabFensterModell ul li .info {
														flex: 0 0 47px;
														cursor: pointer;
														text-align: center;
												}

												/* #eingabe Element kleiner als (lower than (lt)) */
												/* die Klassen werden per Javascript gesetzt */
												/* margins und paddings verkleinern */
												#eingabe.elemLt850 #tabFensterModell ul li .input {
														margin: 0;
												}
												#eingabe.elemLt850 #tabFensterModell ul li .bezeichnung {
														padding-left: 0;
												}
												#eingabe.elemLt850 #tabFensterModell ul li .price {
														flex: 0 1 auto;
												}
												/* untereinander darstellen */
												#eingabe.elemLt850 #tabFensterModell ul li {
														display: block;
														margin-left: 1em;
														padding-left: 2em;
												}
												#eingabe.elemLt400 #tabFensterModell ul li {
														padding-left: 0;
												}
												#eingabe.elemLt850 #tabFensterModell ul li label {
														display: block;
												}
														#eingabe.elemLt850 #tabFensterModell ul li .bezeichnung {
																display: block;
																padding-top: 0;
																padding-bottom: 0;
														}
														#eingabe.elemLt850 #tabFensterModell ul li .img {
																width: 50%;
														}
														#eingabe.elemLt850 #tabFensterModell ul li .price {
																padding-left: 0;
																padding-right: 0;
														}
														#eingabe.elemLt850 #tabFensterModell ul li .info {
																margin-left: 1em;
														}

								.groupButtonsBottom {
										text-align: right;
										margin-top: 1em;
										margin-bottom: 1em;
								}
										.groupButtonsBottom > * {
												margin-right: 1em;
										}
										.buttonWeitere {
												background-color: #357dbc;
												color: #ffffff;
												display: inline-block;
												padding: 0.5em;
												text-decoration: none;
										}
										.btnNextBox {
												background: #357dbc;
 								 				color: white;
												padding-top: 0.5em;
												padding-bottom: 0.5em;
												padding-left: 2em;
												padding-right: 2em;
												display: inline-block;
												cursor: pointer;
										}
										.btnBoxNeher {
												background: #ffffff;
 								 				color: #000000;
												padding-top: 0.5em;
												padding-bottom: 0.5em;
												padding-left: 2em;
												padding-right: 2em;
												display: inline-block;
												border: 1px solid #357dbc;
												cursor: pointer;
										}
										.musterLink {
												display: none;
												color: #888;
												float: left;
												margin-top: 6px;
												margin-left: 27px;
												background: url('/fliegenschutz/konfigurator/icons/pfeile.svg') no-repeat 0% 50%;
												background-size: auto 100%;
												padding-left: 75px;
										}


						#group_masseingabe {
								display: inline-grid;
								grid-template-columns: repeat(4, auto);
								row-gap: 1.5em;
								column-gap: 2em;
								align-items: center;
						}
						#eingabe.elemLt600 #group_masseingabe {
								column-gap: 1em;
						}
						#eingabe.elemLt400 #group_masseingabe {
								grid-template-columns: repeat(3, 1fr); /* Zeile 1: 3 Boxen */
								row-gap: 0;
						}
								#eingabe.elemLt400 #group_masseingabe {
										
								}
								#eingabe.elemLt400 #group_masseingabe .mass_grenze {
										grid-column: 1 / -1; /* Box 4 über ganze Zeile */
										text-align: center;
										padding-top: 0.5em;
										padding-bottom: 1.5em;
								}

								.mass_bez {
								}
										.mass_bez .zusatz {
												font-weight: lighter;
												font-style: italic;
												color: #888888;
										}
								.mass_input {
										white-space: nowrap;
								}
								.mass_umrechnung {
										color: #888888;
								}
								.mass_grenze, #konfiguratorGesamt label.mass_grenze {		/* im Selektor nochmal mit #konfiguratorGesamt und label aufrufen, so das das in diesme speziellen Fall auch greift */
										font-size: 80%;
										color: #888888;
								}
								
								.mass_fo, .mass_fu, .mass_r, .mass_laufschienenlaenge {
										display: none;
								}
								.mass_fo.visible, .mass_fu.visible, .mass_r.visible, .mass_laufschienenlaenge.visible {
										display: block;
								}
								#linkMasseingabeMessanleitung {
										margin-bottom: 2em;
								}

								#group_masseingabe input[type=number], #group_masseingabe 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;
								}
								#group_masseingabe input[type=number]:out-of-range {
										outline: 2px solid #ff9999;
								}





						#hinweisMasseingabe {
								display: none;
								margin-top: 2em;
								background-color: #fdf8f8;
								font-size: 90%;
								padding: 1em;
						}
								.boxIconLeft {
										display: flex;
										align-items: center;
								}
										.boxIconLeft > .left {
												flex: 0 0 auto;
												padding: 1em;
										}
										.boxIconLeft > .right {
												flex: 1 1 0;
										}

												.hinweisMasseingabeUeberschrift {
														font-weight: bold;
												}
												#hinweisMasseingabeList {
														margin-left: 0;
														padding-left: 0;
														margin-top: 0;
														margin-bottom: 0;
														padding-top: 0;
														padding-bottom: 0;

														list-style-type: none;
												}
														#hinweisMasseingabeList > li {
																text-indent: -1ex;
																margin-left: 1em;
																margin-top: 0.5em;
														}
														#hinweisMasseingabeList > li:before {
																content: "\002D\0020";
														}
						#masseingabe_soforthinweise {
								display: none;
								margin-top: 1em;
								margin-bottom: 2em;
								padding: 1em;
								border: 1px solid #bb0000;
						}

						#auswahlProfilfarbe {
								display: flex;
								flex-wrap: wrap;
								max-width: 700px;		/* nur 5 Farbboxen pro Zeile */
						}
						#eingabe.elemLt650 #auswahlProfilfarbe {
								flex-wrap: nowrap;
								max-width: none;
								overflow: auto;
						}

								#auswahlProfilfarbe .auswahlbox {
										text-align: center;
										margin-right: 2em;
										margin-bottom: 2em;
										width: 100px;
										display: inline-block;
										font-size: 14px; /* etwas kleiner als Standard wegen dem langen Wort "Eisenglimmerdunkelgrau" */
								}
										#auswahlProfilfarbe img {
												margin-bottom: 0.3em;
										}
										#auswahlProfilfarbe .profilfarbe_farbbox
										, #auswahlProfilfarbe .profilfarbe_ral
										{
												width: 100px;
												height: 100px;
												background-size: cover;
										}
										#auswahlProfilfarbe .profilfarbe_farbbox {
												display: block;
												margin-bottom: 2px;
										}
										#auswahlProfilfarbe .profilfarbe_farbbox .schimmer {
												display: block;
												width: 100%;
												/* height: 100%; */
												position: relative;
												top: -15px;
												left: -15px;
										}

										#auswahlProfilfarbe .profilfarbe_ral {
												/* background: linear-gradient(to bottom right, rgba(128,0,128,0.6), rgba(0,0,255,0.6), rgba(0,128,0,0.6), rgba(255,255,0,0.6), rgba(255,0,0,0.6), rgba(128,0,128,0.6)); */
												background-image: url(bilder/profilfarbe/sonderral.svg);
										}
												#auswahlProfilfarbe input#input_sonderral {
														margin-left: 1ch;
														width: 4ch;
														box-sizing: content-box;
												}
												#auswahlProfilfarbe input[type=radio] {
														margin-top: 0.3em;
														margin-bottom: 0.3em;
												}

						#groupOeffnungsrichtung {

						}
								#groupOeffnungsrichtung label {
										display: inline-block;
										max-width: 100%;
										text-align: center;
								}
										#groupOeffnungsrichtung img {
												width: 100%;
										}

						#groupSprosse label {
								display: block;
								margin-bottom: 0.5em;
						}
						#info_sprosse {
								vertical-align: middle;
								margin-left: 1em;
								cursor: pointer;
						}

						#zoomWindow {
								/*
								position: absolute;		so sieht man es nicht mehr wenn runter gescrollt wurde
								top: 100px;
								left: 100px;
								*/
								position: fixed;
								top: 100px;
								/* left: 100px; */
								outline: 10px solid #ffffff;
								width: 500px;
								height: 500px;
								background-color: #ffffff;
								border: 1px solid #999999;
								display: none;
								overflow: hidden;
						}

@media (max-width: 1000px) {
		/* einspaltig untereinander (und nicht mehr 2 Spalten) */
		/* Die Pixelbreite zur Aenderung sind auch in javascript eingebaut! */

		#spalten2 {
				margin-top: 2em;
				margin-bottom: 0;
				position: static;
				
				display: flex;		/* mit display: flex ist die order moeglich */
				flex-direction: column;
		}
		#spalten2 #visualisierung {
				order: 2;
				width: 100%;
				position: static;
				box-sizing: border-box;
				margin-top: 2em;
		}
		#modellbild_steuerung {
				position: static;
				width: 100%;
				box-sizing: border-box;
				height: auto;
				margin-top: 1em;
				margin-bottom: 1em;
		}
		#spalten2 #eingabe {
				order: 1;
				margin-left: 0;
				padding-left: 0;
				padding-right: 0;
				padding-bottom: 0;
		}

		.gruppe_warenkorb {
				position: static;
				width: 100%;
				box-sizing: border-box;
				margin-top: 3em;
				margin-bottom: 200px;
		}
}

@media (max-width: 600px) {
		#modellbild_steuerung {
				display: block;
		}
}

@media (max-width: 500px) {
		#eingabe .eingabeBox {
				margin-left: 1em;	/* statt 2em */
		}
}





.xArtikelsystem {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
		grid-column-gap: 5%;
}

		.xArtikelsystem .xArtikel {
				display: flex;
				margin-bottom: 2em;
		}
				.xArtikelsystem .xArtikel .action {
						display: block;
						flex: 1 0 0px;
				}
				.xArtikelsystem .xArtikel .icons {
						flex: 0 0 34px;
						text-align: right;
				}
						.xArtikelsystem .xArtikel .action img {
								width: 100%;
						}
						.xArtikelsystem .xArtikel .icons img {
								width: 24px;
						}
						.xArtikelsystem .xArtikel input[type=number] {
								width: 2ch;
								box-sizing: content-box;
								text-align: right;
						}
						.xArtikelsystem .xArtikel input[type=checkbox] {
								margin-top: 1em;
						}







.extrafenster {
		background-color: #ffffff;
		padding: 2.2em;
}
@media (max-width: 800px) {
		.extrafenster {
				padding: 1em;
		}
}

		.extrafenster .head {
				padding-bottom: 1em;
				border-bottom: 1px solid #cecece;
		}
				.extrafenster .head .left {
						float: left;
				}
				.extrafenster .head .right {
						float: right;
				}
						.extrafensterClose {
								cursor: pointer;
						}
				.extrafenster h2 {
						font-size: 14px;
						padding: 0;
						margin: 0;
				}

								.fensterModellDetails {
										display: flex;
										margin-top: 1.5em;
										flex-direction: row;
										gap: 1em;
								}
										.fensterModellDetails .left {
												flex: 0 1 370px;
												text-align: center;
										}
												.fensterModellDetails .left img.fensterModellDetailsModellbild {
														width: 170px;
												}
										.fensterModellDetails .right {
												flex: 1 1 auto;
										}
												.fensterModellDetails .right .tabs.elemLt700 .noTab .bez {
														display: none;
												}
												.fensterModellDetails .right .tabs.elemLt350 .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, .boxInfoModell .buttons {
								margin-top: 1em;
						}
								.extrafenster .buttons button, .boxInfoModell .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, .boxInfoModell .buttons .uebernehmen {
										background-color: #357dbc;
										color: #ffffff;
								}
										.extrafenster .buttons .uebernehmen:hover, .boxInfoModell .buttons .uebernehmen:hover {
												background-color: #458dcc;
										}

								.boxInfoModell {
										padding: 1.8%;
								}
								#fensterModell .boxInfoModell {
										border: 2px solid #cecece;
										margin-bottom: 1em;
								}
										.boxInfoModell h3 {
												margin-top: 0;
										}
										.boxInfoModell .alternativBox {
												background-color: #fdf8f8;
												padding: 1em;
												display: flex;
												align-items: center;
										}
												.boxInfoModell .alternativBox > .left {
														flex: 0 0 auto;
														padding: 1em;
												}
														.boxInfoModell .marke {
																text-transform: uppercase;
														}
												.boxInfoModell .alternativBox > .right {
														flex: 1 1 0;
														padding-left: 1em;
														color: #444444;
												}
														.boxInfoModell .alternativHinweis {
																font-weight: bold;
																font-size: 120%;
														}
														.boxInfoModell .alternativErklaerung {
																margin-top: 1em;
																font-size: 90%;
														}


										.boxInfoModell .fensterModellMinMax {
												display: inline-block;
												margin-right: 3em;
												margin-top: 1em;
										}
												.boxInfoModell .fensterModellMinMax img, #fensterModell .fensterModellMinMax ul {
														display: inline-block;
														vertical-align: top;
												}
												.boxInfoModell .fensterModellMinMax img {
														margin-right: 1em;
												}
												.boxInfoModell .fensterModellMinMax ul {
														list-style-type: none;
														margin: 0;
														padding: 0;
												}

				.extrafenster .schliessen {
						vertical-align: middle;
				}

		.group.color label {
				display: inline-block;
				margin-right: 4%;
				margin-bottom: 4%;
		}



#fensterWarenkorb {

}
#fensterWarenkorb #fensterWarenkorb_top {
		display: grid;
		grid-template-columns: 1fr 2fr;
		gap: 2em;
		grid-template-areas:
				"left right"
				"buttons buttons"
		;
}
		#fensterWarenkorb #fensterWarenkorb_top_left {
				position: relative;
				grid-area: left;
		}
				#fensterWarenkorb #warenkorb_box_produktbild {
						width: 100%;
						max-height: 340px;
				}
				#fensterWarenkorb #warenkorb_icon_hinzugefuegt {
						position: absolute;
						top: 50%;
						margin-top: -27px;
						left: 50%;
						margin-left: -27px;
						display: none;
				}
		#fensterWarenkorb #fensterWarenkorb_top_right {
				grid-area: right;
		}
				#fensterWarenkorb #warenkorb_box_status {
						border-bottom: 1px solid #e6e6e6;
						padding-bottom: 7px;
						margin-bottom: 20px;
						font-size: 1.2em;
				}
				#fensterWarenkorb #warenkorb_box_titel {
						font-size: 1.1em;
						font-weight: bold;
				}
				#fensterWarenkorb #warenkorb_box_groesse {

				}
				#fensterWarenkorb #warenkorb_box_preis {
						color: #888888;
				}
				#fensterWarenkorb #warenkorb_box_sonderwunsch_ueberschrift {
						display: none;		/* wird ueber Javascript angeschalten */
						margin-top: 2em;
				}
				#fensterWarenkorb #warenkorb_box_sonderwunsch {
						font-style: italic;
						color: #888888;
				}

		#fensterWarenkorb_top_buttons {
				padding-top: 28px;
				grid-area: buttons;
		}
				#fensterWarenkorb_top_buttons .left {
						float: left;
						display: block;
						text-transform: uppercase;
						border: 2px solid #bf0008;
						line-height: 39px;		/* so hat es mit seinen bordern die gleiche Hoehe wie das Warenkorb-Icon */
						color: #bf0008;
						padding-left: 1em;
						padding-right: 1em;
						cursor: pointer;
				}
				#fensterWarenkorb_top_buttons .right {
						float: right;
				}
				@media (max-width: 530px) {
						#fensterWarenkorb_zurueck_einkaufen {
								display: none;
						}
				}

#fensterWarenkorb #fensterWarenkorb_bottom {
		display: none;
		border-top: 5px solid #e6e6e6;
		padding: 2em;
}
		.fensterWarenkorb_bottom_ueberschrift {
				margin-bottom: 1em;
				font-size: 13pt;
		}
		.warenkorbAehnlichArtikel {
				display: inline-block;
				width: 161px;
				vertical-align: top;
				margin-right: 1em;
				color: #444444;
				text-decoration: none;
		}
				.warenkorbAehnlichArtikel img {
						width: 161px;
						border: none;
				}
				.warenkorbAehnlichArtikelTitel {
						font-size: 85%;
						text-align: center;
				}
				.warenkorbAehnlichArtikelPreis {
						font-size: 85%;
						font-weight: bold;
						text-align: center;
				}

@media (max-width: 650px) {
		#fensterWarenkorb {
				width: auto;
		}
		
				#fensterWarenkorb #fensterWarenkorb_top {
						grid-template-areas:
								"right"
								"buttons"
						;
						grid-template-columns: 1fr;
				}

						#fensterWarenkorb_top_left {
								display: none;
						}
						#fensterWarenkorb #fensterWarenkorb_top_right {
								width: auto;
						}
								#fensterWarenkorb_top_buttons .left {
										margin-bottom: 1em;
								}
}