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

.disabled {
		color: #999999;
		cursor: not-allowed;
}
.disabled input[type="text"], .disabled input[type="number"] {
		border: 1px solid #999999 !important;
}
input[type=checkbox]:disabled {
		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-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;		/* Eigentlich "flex: 27 0 0;" - 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: 1%;
										padding-right: 1%;
								}
						}
						@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) {
								#spalten3 #eingabe {
										padding-left: 0;
										padding-right: 0;
								}
										.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.dropDownInfos {
							flex-direction: column;
							align-items: flex-start;
							padding-right: 0.5em;
						}
						.balkenauswahl li.dropDownInfos > label {
							width: 100%;
						}
						
						.balkenauswahl li.dropDownInfos.checked .dropDownContent {
							max-height: 10em;
						}
						.balkenauswahl li.dropDownInfos.checked .dropDownContent > label {
							display: flex;
							padding: 1em 0;
							padding-left: 3em;
						}
						.balkenauswahl .colorDropDown {
							width: 100%;
							padding-left: 3em;
							padding-bottom: 1em;
							border: none;
						}
						.balkenauswahl li:hover {
								border: 1px solid #f1f1f1;
						}
						.balkenauswahl li.checked {
								border: 1px solid #060606;
						}
								.balkenauswahl li.checked input {
										visibility: visible;
								}
								.balkenauswahl li label {
										display: flex;
										flex: 1 0 0;
										align-items: center;
										padding: 10px;
								}
								.balkenauswahl li input {
										flex: 0 0 auto;
										text-align: left;
										margin-top: 0;
										margin-bottom: 0;
										padding-top: 0;
										padding-bottom: 0;
										margin-left: 1em;
										margin-right: 1em;
								}
								.balkenauswahl li .bezeichnung {
										flex: 5 0 0;
										text-align: left;
										padding-top: 1em;
										padding-bottom: 1em;
								}
								.balkenauswahl li .lb {
										flex: 1 0 0;
								}
								.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;
								}

				.listAuswahlBild {		/* z.B. Bedienseiten bei den Schnueren */
						list-style-type: none;
						padding: 0;
						margin: 0;
				}

						.listAuswahlBild li {
								display: inline-block;
								width: 120px;
								margin-right: 1em;
								margin-top: 1em;
								text-align: center;
								vertical-align: top;
						}
						.listAuswahlBild li:hover {
						}
						.listAuswahlBild li.checked {

						}
								.listAuswahlBild img {
										width: 100%;
										box-sizing: border-box;
										padding: 3px;	/* als Ersatz fuer den Border beim .checked-Bild */
								}
								.listAuswahlBild li.checked img {
										border: 3px solid #000000;
										padding: 0;
								}
								.listAuswahlBild li input {
										display: none;
								}
				@media (min-width: 360px) {
						.listAuswahlBild {		/* fuer Seiten (links, rechts, mitte, geteilt) sollen auf einer Zeile sein */
								display: flex;
						}
								.listAuswahlBild li {
										margin: 0;
										width: auto;
										flex: 0 1 120px;
								}
				}
				@media (min-width: 600px) {
								.listAuswahlBild li {
										/* die entfernten margins wieder setzen */
										margin-right: 1em;
										margin-top: 1em;
								}
				}

				.groupButtonsBottom {
						text-align: right;
						margin-top: 1em;
						margin-bottom: 1em;
				}
						.groupButtonsBottom > * {
								margin-left: 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;
				}
				#group_blende > div {
						margin-top: 0.5em;
				}
						#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]
				, #group_blende input[type=number], #group_blende 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;
				}


		#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 > * {
				margin-bottom: 1em;
		}
		.boxBedienung h4 {
				font-size: 16px;
		}
		#auswahlBedienung {
		}
		#auswahlBedienung select {
				/* border: 1px solid #000000; */
				padding: 0.2em;
		}
		/*
				#auswahlBedienung select:focus {
						border-width: 3px;
				}
		*/
		#auswahlKettenfarbe {
				margin-top: 1em;
		}
		#auswahlMotorZubehoer h3 {
				margin-top: 1em !important;
		}

		#auswahlKindersicher {
				margin-top: 2em;
		}
		#groupSonderfarbeAllgemein{
				margin-bottom: 2em;
		}

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


		#warpperSchnurStabLaenge{
			display: flex;
		}
			#warpperSchnurStabLaenge>div:first-child{
				margin-right: 2em;
			}
		

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

		#auswahlLeiterfarbenContainer {
				margin-top: 2em;
		}

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

		#auswahlLine {
				margin-top: 1em;
				margin-bottom: 1em;
		}

		#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 bzw 48px */
				margin-right: 1em;
		}
}

#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 1em;
				margin-right: 1em;
				cursor: pointer;
				margin-bottom: 1em;
				align-items: center;
				justify-content: space-between;
		}
		.designRemover > div:after{
			content: '\1F5D9';
		}
.formDesign {
		display: flex;
}
#formDesignBlendeUndUnterleiste {
		justify-content: flex-end;
}
#designAllFieldsNoSearch {
		display: flex;
		flex-basis: 68%;
}

.group.color label {
		display: block;
}
.group {
		flex-basis: 50%;
		margin-right: 2em;
		margin-bottom: 2em;
		position: relative;
}

.boxSuche {
	margin-bottom: 2em;
}
#boxSuche {
	flex: 1 0 0;
}
#boxSucheBlendeUndUnterleiste {
	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{
				flex-wrap: wrap;
				flex-basis: 100%;
		}
		.group{
				flex-basis: 100%;
		}
		#boxSuche{
			flex-grow: 0;
			flex-basis: auto;			
		}

}
@media (max-width: 400px) {
		.group {
				margin-right: 0em;
		}
}
		.group .head {
				border: 1px solid #000000;
				padding: 10px;
				text-transform: uppercase;
				cursor: default;
				width: 95%;
		}
		.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: flex;
		align-items: flex-start;
}
.group label input {
		margin-left: 10px;
		margin-right: 10px;
		margin-top: 5px;
		margin-bottom: 5px;
}


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