/*
		08.04.2020	Tim		Scrollcontainer, RGB-Bild .rgbBox hinzugefuegt
*/
#konfiguratorGesamt, #konfiguratorGesamt input, #konfiguratorGesamt select, #konfiguratorGesamt button, #konfiguratorGesamt li, #konfiguratorGesamt p {
	font-size: 14px;
}

label {
	cursor: pointer;

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

}

label input[type=checkbox], label input[type=radio] {
	cursor: pointer;
}

label.disabled {
	color: #999999;
	cursor: not-allowed;
}






input[type=number] {
	-moz-appearance: textfield;		/* Beim Firefox-Browser 41 sehen die Spin-Buttons nicht schoen aus */
}

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

.icon {
	/* Vector-Grafik (SVG) braucht immer Breiten-/Hoehenangabe */
	width: 22px;
	height: 22px;
}

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

.listStyleTypeNone ul, ul.listStyleTypeNone {
	list-style-type: none;
}

.info {
	vertical-align: middle;
	width: 20px;
	height: 20px;
}


#konfiguratorGesamt {
	position: relative;
	display: block;
	text-transform: uppercase;
}
#konfiguratorGesamt, .extrafenster {
	color: #000000;
}

#konfiguratorGesamt h3 {
	margin-top: 1em;
	margin-bottom: 0.5em;
}
		#konfiguratorGesamt h3:first-child {
				margin-top: 0;
		}

				.gruppe_warenkorb {

						padding: 10px;

					 	width: 48%;
						right: 0.5%;
						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-left: auto;
						margin-right: 0;
						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;
								text-transform: none;
						}
								.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;
								text-transform: none;
						}
								.preis {
										font-size: 30px;
								}

						.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-block;
								}
										.warenkorb_konfi .warenkorb_text {
												display: inline-block;
												height: 43px;
												line-height: 43px;
												padding-left: 3em;
												padding-right: 3em;
												text-transform: uppercase;
												background-color: #c0c7b9;
												border-bottom: 4px solid #9a9f94;
												border-radius: 3px;
										}
												.warenkorb_konfi > * {
														color: #000000;
												}


							.warenkorb_extrafenster {
								cursor: pointer;
								flex: 1 0 auto;
								text-align: right;
						}
								.warenkorb_extrafenster .warenkorb_text, .warenkorb_extrafenster .warenkorb_symbol {
										display: inline-block;
										height: 43px;
										line-height: 43px;
										padding-left: 12px;
										padding-right: 12px;
								}
										.warenkorb_extrafenster > * {
												color: #444444;
										}

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


			#spalten3 {
					display: flex;
					align-items: stretch;		/* center */
					align-content: stretch;
					flex-direction: row;
			}
					#spalten3 #panorama {

							text-align: center;
							flex: 40 0 0;

							background-repeat: no-repeat;
							background-size: cover;
							background-color: #000000;
					}

					#spalten3 #eingabe {
							flex: 33 0 0;
							background-color: #ffffff;
							padding-top: 1em;
							padding-left: 2%;
							padding-right: 2%;

							/* das mit verschachtelten flex-Boxen funktioniert noch nicht so richtig. Deshalb hier erstmal eine Hilfe eingebaut */
							overflow-x: hidden;
							overflow-y: auto;
					}
							#konfigurator {
									/* so dass man bei der Eingabe noch etwas weiter scrollen kann */
									margin-bottom: 5em;
							}

					#spalten3 > #visualisierung {
							flex: 27 0 0px;		/* Bug IE 11 "IE 11 requires a unit to be added to the third argument" */
							align-self: center;
							text-align: center;

							padding-left: 3%;
							padding-right: 3%;
					}

							#visualisierung_ueberschrift {
									text-transform: none;
									font-size: 18px;
							}
									#visualisierung_ueberschrift span{
											font-family: 'Freeland W00 Regular';
											display: block;
											text-transform: uppercase;
									}								

					@media (max-width: 1700px) {
							#spalten3 {
							}
									#spalten3 #panorama {
											flex: 30 0 0px;		/* Bug IE 11 "IE 11 requires a unit to be added to the third argument" */
									}
									#spalten3 > #visualisierung {
											flex: 20 0 0px;		/* Bug IE 11 "IE 11 requires a unit to be added to the third argument" */
									}

					}
					@media (max-width: 1300px) {
							#spalten3 {
							}
									#spalten3 #panorama {
											display: none;
									}
							.gruppe_warenkorb {
									width: 100%;
							}
					}
					@media (max-width: 900px) {
							#spalten3 {
									flex-direction: column;
									margin-bottom: 200px;
							}
									#spalten3 #panorama {
											display: none;
									}
							#spalten3 #eingabe {
									overflow-x: visible;
									overflow-y: visible;
									margin-left: 0;
									padding-left: 0;
									padding-right: 0;
							}
					}
					@media (max-width: 600px) {

							.gruppe_warenkorb {
									flex-wrap: wrap;
									margin-top: 0;
							}
									.gruppe_warenkorb > * {
											text-align: right;
											margin-top: 0.5em;
											margin-bottom: 0.5em;
									}
					}
					@media (max-width: 400px) {
									.gruppe_warenkorb > * {
											margin-top: 0em;
											margin-bottom: 0em;
									}
					}

	.footer {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			background-color: #000000;
			color: #ffffff;
			border-top: 6px solid #c0c7b9;
	}
	.ajax_lade {
			position: absolute;
			right: 0;
			top: 0;
			visibility: hidden;
			width: 50px;
			height: 50px;
	}

	#modellbild_ueberschrift {
			background-color: #000000;
			color: #ffffff;
			position: absolute;
			left: 0;
			top: 3em;
			padding: 2em;
			opacity: 0.8;
			text-align: left;
			font-size: 16px;
	}
			#modellbild_ueberschrift > * {
					margin-top: 1em;
			}
			#modellbild_ueberschrift > *:first-child {
					margin-top: 0;
			}
			#modellbild_ueberschrift .second {
					font-family: 'Freeland W00 Regular';		/* aus dem Layout */
			}
	#visualisierung_ral {
			text-transform: none;
	}
	#spalten3 #panorama {
			text-align: center;
			/* margin-bottom: 1em; */
	}

	#panorama svg {
			max-width: 100%;
	}
	#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: #000000;
			display: flex;
			justify-content: space-between;
			align-items: center;
	}
	/*		#eingabe .accordion_ueberschrift:first-child {		die unteren Ueberschriften sind in einer Form zusammengefasst. Deshalb wuerde es da ein zweites :first-child geben		*/
	#eingabe > div > .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-weight: normal;
					font-size: 80%;
					text-align: right;
					text-transform: none;
					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-left: 48px;
			margin-bottom: 1em;
			display: none;
			overflow: hidden;		/* fuer die Animation */
			text-transform: none;
	}
			#eingabe .accordion_zwischenueberschrift {
					font-weight: normal;
					margin-top: 0;
					margin-bottom: 1em;
			}
					#eingabe #groupSchienenprofil .accordion_zwischenueberschrift {
							margin-top: 2em;
					}
			#eingabe .erklaerung {
					font-size: 90%;
					color: #888888;
			}

					.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;
							}
							#eingabe.elemLt650 #tabModell .bez {
									display: none;
							}
					.tabs > .noTab {
							border: 0;
							text-decoration: none;
							color: #444444;
					}
					.tabFenster {
							border-top: 1px solid #cecece;
					}
							.tabFenster > * {
									display: none;
									padding: 1em;
									max-width: 900px;		/* max-width hilft uebergeordneten Flex-Elementen bei der Breitenbestimmung*/
							}

			.balkenauswahl {
					list-style-type: none;
					padding: 0;
					margin-left: 0;
					margin-right: 8%;
			}
			.balkenLabel {
				display: flex;
				align-items: center;
				width: 100%;
			}
					.balkenauswahl li {
							display: flex;
							justify-content: space-between;
							align-items: center;
							border: 1px solid transparent;
					}
					.balkenauswahl li.checked {
						border: solid 1px #060606;
					}
					.balkenauswahl li.dropDownInfos {
						flex-direction: column;
						align-items: flex-start;
						padding-right: 0.5em;
					}
					.balkenauswahl li.dropDownInfos > label {
						width: 100%;
					}
					
					.balkenauswahl li.dropDownInfos .dropDownContent {
						max-height: 0;
						overflow: hidden;
						transition-duration: 200ms;
					}
					.balkenauswahl li.dropDownInfos.checked .dropDownContent {
						max-height: 20em;
					}
					.balkenauswahl li.dropDownInfos.checked .dropDownContent > label{						
						display: flex;
						padding: 1em 0;
						padding-left: 3em;
					}
					.ueberschriftSeitenverspannungMontage{
						padding-left: 3em;
					}
					.auswahlSeitenverspannungMontageart label{
						margin: 1em 0;
					}
					.balkenauswahl .colorDropDown {
						width: 100%;
						padding-left: 3em;
						padding-bottom: 1em;
						border: none;
					}
					.balkenauswahl li:hover {
							border: 1px solid #f1f1f1;
					}
					
							.balkenauswahl li.checked input {
									visibility: visible;
							}
							.balkenauswahl li label {
									display: flex;
									flex: 1 0 0;
									align-items: center;
							}
							.balkenauswahl li input {
									flex: 0 0 auto;
									text-align: left;
									margin-top: 0;
									margin-bottom: 0;
									padding-top: 0;
									padding-bottom: 0;
									visibility: hidden;
									margin-left: 1em;
									margin-right: 1em;
							}
							.balkenauswahl li .bezeichnung {
									flex: 5 0 0;
									text-align: left;
									padding-top: 1em;
									padding-bottom: 1em;
							}

							.balkenauswahl li .price {
									flex: 0 0 auto;
									text-align: left;
									padding-left: 1em;
									padding-right: 1em;
							}
							.balkenauswahl li .info {
									flex: 0 1 47px;
									cursor: pointer;
									text-align: center;
							}


							/* #eingabe Element kleiner als 450 (lower than (lt)) */
							/* die Klassen werden per Javascript gesetzt */
							/* margins und paddings verkleinern */
							#eingabe.elemLt650 .balkenauswahl li .bezeichnung {
									padding-left: 0;
							}
							#eingabe.elemLt650 .balkenauswahl li .price {
									flex: 0 1 auto;
							}

			.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 {
							border: 1px solid #000000;
							border-radius: 1px;
							color: #ffffff;
							background-color: #000000;
							padding-top: 0.5em;
							padding-bottom: 0.5em;
							padding-left: 2em;
							padding-right: 2em;
							display: inline-block;
							cursor: pointer;
							text-transform: uppercase;
					}

	#masseingabe {
	}
			#masseingabe label {
					margin-top: 0.5em;
					display: block;
			}
					#masseingabe label > * {
							vertical-align: middle;
					}
					.mass_bez {
							display: inline-block;
							width: 122px;
							text-transform: uppercase;
					}
					.mass_umrechnung {
							color: #888888;
					}
					.mass_grenze {
							font-size: 80%;
							color: #888888;
							margin-left: 1em;
					}
					#linkMasseingabeMessanleitung {
							margin-bottom: 1em;
					}

			#masseingabe input[type=number], #masseingabe input[type=text], #mass_bedienlaenge {		/* number oder text - je nachdem was es letztendlich fuer ein Feld wird */
					background-color: #ffffff;
					border: 1px solid #000000;
					padding: 6px;
					text-align: right;
					width: 60px;
			}
			@media (max-width: 450px) {
					.mass_grenze {
							display: block;
					}
			}


	#paper {
			display: none;
			width: 100%;
	}
	.modellbild {		/* das Ganze als Klasse definieren, nicht als ID, weil beim Zoom, die Elemente geklont werden und dort die ID umbennat ist, die Klasse aber nicht */
			display: none;
			position: relative;
	}

	.boxBedienung h4 {
			font-size: 16px;
	}
	#auswahlBedienung {
			margin-bottom: 1em;
	}
	#auswahlBedienung select {
			/* border: 1px solid #000000; */
			padding: 0.2em;
	}
	/*
			#auswahlBedienung select:focus {
					border-width: 3px;
			}
	*/
	#auswahlKindersicher {
			margin-top: 2em;
	}
	#auswahlEinfassband {
			margin-top: 2em;
	}
	#erklaerung_einfassband{
		vertical-align: middle;
		margin-left: 1em;
		cursor: pointer;
	}
	#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: 1em;
									margin-top: 0;
									margin-bottom: 0;
									padding-top: 0;
									padding-bottom: 0;

									list-style-type: none;
							}
									#hinweisMasseingabeList > li {
											text-indent: -1.5ex;
									}
									#hinweisMasseingabeList > li:before {
											content: "\002D\0020";
									}

	.groupOptionen {
			display: none;
			margin-bottom: 1em;
	}

	#masseingabe_soforthinweise {
			display: none;
			margin-top: 2em;
			margin-bottom: 2em;
			padding: 1em;
			border: 1px solid #bb0000;
	}
	#berechneteMasse {
			margin-top: 2em;
	}
			#berechneteMasse > div {
					display: none;
					margin-top: 1em;
					cursor: default;
			}
					#berechneteMasse .img {
							display: inline-block;
							text-align: center;
							width: 35px;
					}
					#berechneteMasse img {
							vertical-align: middle;
					}

	.notFound {
			margin-top: 5em;
			font-style: italic;
			text-align: center;
			color: #999999;
	}

	#zoomWindow {
			position: fixed;
			top: 100px;
			/*left: 100;*/
			width: 500px;
			height: 500px;
			background-color: #ffffff;
			border: 1px solid #999999;
			display: none;
			overflow: hidden;
	}

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

#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;
	}
	@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;
					}
					.fensterZweiSpalten {
							display: flex;
					}
							.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;
									max-height: 300px;
							}
							.fensterZweiSpalten > .right {
									padding-left: 2.5%;
									padding-top: 2em;
									overflow: auto;
									max-height: 300px;
									position: relative;		/* fuer die absolut positionierten Ausblend-Balken */
							}
							#fensterModell .fensterZweiSpalten > .left {
									flex: 0 1 390px;
							}
							#fensterModell .fensterZweiSpalten > .right {
									flex: 1 1 auto;

									padding-right: 2.5%;		/* nur bei dem Modell-Fenster - bei den Stoff sparen wir uns den Platz fuer die Anzeige */
							}
							@media (max-width: 1200px) {
									#fensterModell .fensterZweiSpalten > .right {
											padding-right: 0;
									}
							}
					@media (max-width: 800px) {
							/* ab hier die links Spalte zum einklappen */
							#fensterModell .fensterZweiSpalten {
									display: block;
									position: relative;
							}
							#fensterModell .fensterZweiSpalten > .buttonAusklapp {
									display: block;

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

									.fensterZweiSpalten > .left h3 {
											font-size: 13px;
											border-bottom: 1px solid #cecece;
											padding-bottom: 0.5em;
									}
									#fensterModell .fensterZweiSpalten > .left h3 {		/* nur Modelle-Wahl nicht Stoffe-Wahl */
											margin-top: 0;
									}

									.fensterModellDetails {
											margin-top: 1.5em;
									}
									.leftright {
											display: flex;
											flex-direction: row;
									}
											.leftright .left {
													flex: 0 1 450px;
													text-align: center;
													align-self: center;
											}
													.leftright .left img.fensterModellDetailsModellbild {
															width: 70%;
													}
											.leftright .right {
													flex: 1 1 auto;
											}
													.leftright .right .tabs.elemLt700 .noTab .bez {
															display: none;
													}
													.leftright .right .tabs.elemLt530 .bez {
															display: none;
													}
									.leftright.elemLt550 {
											flex-direction: column;
									}
											.leftright.elemLt550 .left {
													flex: 0 1 auto;
													margin-bottom: 1em;
											}


					.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%;
					}
							.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 {
											display: inline-block;
											vertical-align: top;
									}
									.boxInfoModell .fensterModellMinMax img {
											margin-right: 1em;
									}
									.boxInfoModell .fensterModellMinMax ul {
											list-style-type: none;
											margin: 0;
											padding: 0;
									}
							*/
							.boxInfoModell .techndaten img {
									max-width: 100%;
							}
	.extrafenster .schliessen {
			vertical-align: middle;
	}

.designFilter {
	margin-top: 1em;
	margin-right: 1em;
}
.designRemover {
	margin-bottom: 2em;
	display: grid;
	grid-template-columns: repeat(3, 33.3%);
}
.designRemover:empty {
	display: none;	/* damit hier der margin verschwindet */
}
	.designRemover > div {
			display: flex;
			border-radius: 2px;
			background-color: #c0c7b9;
			color: #ffffff;
			padding: 6px;
			margin-right: 1em;
			cursor: pointer;
			margin-bottom: 1em;
			align-items: center;
			justify-content: space-between;
	}
		.designRemover > div:after {
			content: '\1F5D9';
			padding-left: 1em;
		}		
.formDesign {
	display: flex;
	align-items: flex-end;
}
#formDesignAbschluss {
	justify-content: flex-end;
}
#designAllFieldsNoSearch {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 68%;
}

.group.color label {
	display: block;
}
.group {
	margin-right: 1em;
	margin-bottom: 2em;
	position: relative;
}

#groupLicht{
	grid-row: 1;
}
#groupGruppe, #groupFarbe{
	grid-row: 2;
}


.boxSuche {
	margin-bottom: 2em;
	max-width: 32%;
}
#boxSuche {
	flex: 1 0 0;
}
#boxSucheAbschluss {
	flex: 0 0 auto;
}
	.boxSuche .suche {
			padding: 10px;
			width: 100%; box-sizing: border-box;
			margin: 0;		/* fuer den Safari-Browser, der hat hier standardmaessig ein margin gesetzt (29.11.2018) */
			border: 1px solid #000000;		/* Safari macht standardmaessig border-width 2px. Wenn ich nur die border-width auf 1px setze, dann aendert Safari auch den border-style. Deshalb setze ich hier den gesamten border */
	}
	.boxSuche .suche::placeholder {
			color: #000000;
			opacity: 1;
			text-transform: uppercase;
	}	

@media (max-width: 500px) {
	.group {
			margin-right: 1em;
	}

.formDesign{
			flex-wrap: wrap;
	}
	#designAllFieldsNoSearch{
			grid-template-columns: 1fr;
			width: 100%;
	}
	#groupGruppe{
			grid-row: 3;
	}		
	.boxSuche{
		max-width: none;
	}
}
@media (max-width: 400px) {
	.group {
			margin-right: 0em;
	}

}
	.group .head {
			border: 1px solid #000000;
			padding: 10px;
			text-transform: uppercase;
			cursor: default;
	}
	.group .box {
			display: none;
			position: absolute;
			background-color: #ffffff;
			z-index: 2;		/* soll ueber dem nachfolgenden Listing aufgehen */
			border-left: 3px solid #000000;
			border-top: 1px solid #e9e9e9;
			border-right: 3px solid #000000;
			border-bottom: 3px solid #000000;
			padding-top: 5px;
			padding-bottom: 5px;
			padding-right: 10px;
			min-width: 100%; box-sizing: border-box;
			white-space: nowrap;
	}
	.group.active .head {
			border: 3px solid #000000;
			padding: 8px;		/* abzueglich des dickeren Randes */
	}
	.group:hover .head {
			border-left: 3px solid #000000;
			border-top: 3px solid #000000;
			border-right: 3px solid #000000;
			border-bottom: 0;
			padding: 8px;		/* abzueglich des dickeren Randes */
	}
	.group:hover .box {
			display: block;
	}

.farbbox {
	display: inline-block;
	width: 22px;
	height: 22px;
	line-height: 22px;
	border: 1px solid #f1f1f1;
	text-align: center;
	font-weight: bold;
	cursor: pointer;
	font-size: 16px;
	vertical-align: middle;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
}
.farbbox.beige { background-color: #d4be8d; color: #ffffff; }
.farbbox.blau { background-color: #3485ff; color: #ffffff; }
.farbbox.braun { background-color: #6f3e18; color: #ffffff; }
.farbbox.gelb { background-color: #fffc00; color: #888888; }
.farbbox.gruen { background-color: #73b525; color: #ffffff; }
.farbbox.orange { background-color: #ff6501; color: #ffffff; }
.farbbox.rosa { background-color: #ed008c; color: #ffffff; }
.farbbox.rot { background-color: #ea0001; color: #ffffff; }
.farbbox.schwarz { background-color: #000000; color: #ffffff; }
.farbbox.violett { background-color: #9349aa; color: #ffffff; }
.farbbox.weiss { background-color: #ffffff; color: #888888; }
.farbbox.grau, .farbbox.grau_-_silber { background-color: #838383; color: #ffffff; }

.group label {
	display: block;
}
.group label input {
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
}



#wahlAbrollposition {
	display: none;
	margin-top: 2em;
}

#button_muster {
	float: left;
	margin-top: 1em;
	cursor: pointer;
}
	#button_muster .text {
			display: inline-block;
			background-color: #c0c0c0;
			color: #ffffff;
			padding: 0.5em;
			vertical-align: middle;
			margin-right: 1px;
	}
	#button_muster .icon {
			display: inline-block;
			padding: 0.5em;
			background-color: #000000;
			vertical-align: middle;
			text-align: center;
			width: auto;
			height: auto;
	}
			#button_muster .icon img {
					width: 100%;
					max-width: 13px;
					max-height: 13px;
					vertical-align: middle;
			}
	#button_muster_design {
			color: #000000;
			font-weight: bold;
	}


#fensterWarenkorb {

}
#fensterWarenkorb #fensterWarenkorb_top {
	/* padding: 40px; */
	padding: 8%;
}
	#fensterWarenkorb #fensterWarenkorb_top_left {
			float: left;
			width: 34%;
			position: relative;
	}
			#fensterWarenkorb #warenkorb_box_produktbild {
					/* width: 161px; */	/* es kam vor, dass die Bilder zu gross waren und hier nicht reingepasst haben */
					max-height: 340px;
					max-width: 161px;
			}
			#fensterWarenkorb #warenkorb_icon_hinzugefuegt {
					position: absolute;
					top: 50%;
					margin-top: -27px;
					left: 50%;
					margin-left: -27px;
					display: none;
			}
	#fensterWarenkorb #fensterWarenkorb_top_right {
			float: right;
			width: 64%;
	}
			#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 {
			margin-top: 28px;
	}
			#fensterWarenkorb_top_buttons .left {
					float: left;
					display: block;
					text-transform: uppercase;
					border: 2px solid #bf0008;
					height: 39px;		/* so hat es mit seinen bordern die gleiche Hoehe wie das Warnkorb-Icon */
					line-height: 39px;
					color: #bf0008;
					padding-left: 1em;
					/* padding-right: 46px; */
					padding-right: 1em;
					cursor: pointer;
			}
			#fensterWarenkorb_top_buttons .right {
					float: right;
			}
			@media (max-width: 530px) {
					.buttonFuellwoerter {
							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_top_left {
					display: none;
			}
			#fensterWarenkorb #fensterWarenkorb_top_right {
					width: auto;
					float: none;
			}
					#fensterWarenkorb_top_buttons .left {
							margin-bottom: 1em;
					}
}



#fensterHinweisAnfrageTitel {
	border-bottom: 1px solid #e6e6e6;
	font-size: 1.2em;
	padding-bottom: 7px;
	margin-bottom: 20px;
}
#fensterHinweisAnfrageMeldung {

}
#fensterHinweisAnfrageButtons {
	margin-top: 28px;
}
	  #fensterHinweisAnfrageButtons .left
	, #fensterHinweisAnfrageButtons .right
	{
			display: block;
			text-transform: uppercase;
			padding: 2%;
			cursor: pointer;
	}
	#fensterHinweisAnfrageButtons .left {
			float: left;
			border: 2px solid #444444;
			color: #444444;
	}
	#fensterHinweisAnfrageButtons .right {
			background-color: #e6e6e6;
			color: #444444;
			float: right;
			border: 2px solid transparent;
			text-decoration: none;
	}


/* z.B. Schienenprofil+ */
.msgboxhtml {
	font-size: 10px;
	line-height: 1.5em;
}
	.window_wk_ueberschrift_main {
			text-align: center;
			background-color: #5f5f5f;
			color: #ffffff;
			padding: 1em;
	}
	.window_wk_ueberschrift_main_1 {
			font-weight: bold;
			font-size: 13px;
	}
	.window_wk_ueberschrift_main_2 {
			font-size: 11px;
	}
	.window_wk_ueberschrift_erklaerung {
			 text-align: center;
			 padding: 1em;
	}
	.window_wk_ueberschrift_pfeil {
			 text-align: center;
	}
	.window_wk_zwischenzeile {
			height: 10px;
	}
	.window_wk_zwischenspalte {
			width: 10px;
			min-width: 10px;		/* greift beim td irgendwie nicht so richtig - Das Konzept habe ich in diesem Fall leider noch nciht so richtig verstanden */
	}

	.window_wk_table_auswahl {
			border-spacing: 0;
	}
			.window_wk_table_auswahl td {
					cursor: pointer;
					padding: 0;
			}
			.window_wk_ue_box {
					padding-top: 1em;
			}
					.window_wk_ue {
							font-weight: bold;
							font-size: 13px;
					}
			.window_wk_radiobox {
					border: 1px solid #d7d7d7;
			}
	.msgboxhtml_buttons {
			margin-top: 0.5em;
			text-align: right;
	}
			.msgboxhtml_buttons > div {
					display: inline-block;
					text-decoration: underline;
					cursor: pointer;
					padding-top: 0.5em;
					padding-bottom: 0.5em;
					padding-left: 1em;
					padding-right: 1em;
			}

					.msgboxhtmlButtonsHighlight {
							background-color: #444444;
							color: #ffffff;
							margin-left: 0.5em;
					}