label {
		cursor: pointer;

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

}





/*
		IE-Label-Img-Event-Bug
		- betrifft nur IE 11 (nicht IE10 und auch nicht Edge12) oder andere Browser
		- Bild <img> ist nicht anklickbar wenn <img> innerhalb von <label> und das Ganze innerhalb eines <form> - Text innerhalb von Label funktioniert aber korrekt
		- dies ist der Fall -im Fenster Formauswahl bei dem Filter auf der linken Seite oder -im Profiltab wahl der Optionen (Profilfarbe, Schienenprofil+)

		siehe auch
		http://stackoverflow.com/questions/20198137/image-label-for-input-in-a-form-not-clickable-in-ie11
*/

		label {
				display: inline-block;
		}
		label img{
				pointer-events: none;
		}
/*
		Ende IE-Label-Img-Event-Bug
*/


.inhalt {
		min-height: 0px !important; /* dieser Wert wurde per Hand ermittelt, bei nicht ausgeklapptem Menue */
}




input[type=number] {
		-moz-appearance: textfield;		/* Beim Firefox-Browser 41 sehen die Spin-Buttons nicht schoen aus - ausserdem haben wir eigene Spin-Buttons (+ / -) */
}
input[type=number]::-webkit-inner-spin-button, 		/* fuer den Chrome - die Spin-Buttons nehmen so viel Platz weg, dass bei einem Input-Feld der Breite 3ch nur Platz guer eine Ziffer ist (ohne Spin-Buttons passen 3 Ziffern rein) */
input[type=number]::-webkit-outer-spin-button {
	  -webkit-appearance: none;
	  margin: 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;
}

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

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

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


#konfigurator {
		position: relative;
		display: block;
}
#konfigurator, .extrafenster {
		color: #444444;
}

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

		#modellbild_preview img {
				border: 1px solid #cccccc;
				margin-right: 10px;
				margin-bottom: 5px;
				height: 54px;
				cursor: pointer;
		}
				#modellbild_preview img.active {
						outline: 1px solid #454545;
				}

		#modellbild_steuerung {
				color: #888888;
				font-size: 11px;
				/* position: absolute; */
				position: fixed;
				/* bottom: 0; */
				bottom: 1%;
				/* left: 0; */
				left: 2%;
				width: 100%;

				display: flex;
				align-items: center;
				position: fixed;

				padding-top: 2em;

		}

				#modellbild_steuerung .selected {
					border: 0;
					border-radius: 0.2em;
					box-shadow: 0 0 0 3pt #888888;
				}

				#modellbild_steuerung_left {
						/* flex: 0 1 33%; */
						/* flex: 0 1 100%; */
						display: flex;
						align-items: center;
						position: fixed;
						bottom: 1%;
						/* padding-top: 2em; */
						/* border-top: 1px solid #cacaca; */
						/* width: 50%; */
						/* justify-content: center; */
				}
						#modellbild_steuerung_animation {
								cursor: pointer;
						}
				#modellbild_preview {
						flex: 1 0 auto;
				}
				#modellbild_steuerung_right {
						flex: 0 1 33%;
				}
				.graphSetBackground, .hinweis_saum, .stoffbeschreibung {
						cursor: pointer;
						height: 65px;
						margin: 0 0.2em;
				}
				.graphSetBackground_border, .hinweis_saum_border, .stoffbeschreibung_border {
						width: 65px;
						overflow: hidden;
						display: flex;
						justify-content: center;
				}

				#graphSetBackground_vorn_border, #graphSetBackground_total_border {
					position: relative;
				}

				.hinweis_saum {
					width: 65px;
					height: 65px;
					display: flex;
					justify-content: center;
					align-items: center;
					cursor: pointer;
				}
					.hinweis_saum img {
						width: 45px;
						height: 45px;
					}

				.hinweis_saum_border, .stoffbeschreibung_border {
					position: relative;
				}

				.modellbild_steuerung_icon {
					transform: translate(-50%, -50%);
					position: absolute;
					top: 35%;
					left: 35%;
					width: 40%;
					pointer-events: none;
				}

		.modellbild_steuerung_ansicht_wechseln {
			text-align: left;
			padding-right: 1em;
		}

		.befestigungLink {
			color: #444444;
			text-decoration: none;
		}

		#box_group {
			display: flex;
			align-items: center;
		}
			#box_group div {
				margin-right: 1em;
			}

		.box_group {
			display: inline-block;
			text-align: left;
		}

		.box {
			border: 1px solid #cacaca;
			border-radius: 1px;
			cursor: pointer;
			width: 50px;
			height: 50px;
			display: inline-flex;
			align-items: center;
		}

				#link_save {
						text-decoration: none;
				}
						#link_save .icon {
								font-size: 24px;
						}
						#link_save .icon {

						}
				#link_save_data {
						display: none;
				}

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

				position: fixed;
				bottom: 0;
				right: 0;
				/* width: 100%; */
				box-sizing: border-box;		/* ist auch wichtig bei 1 Spalten-Responsive-Layout, wenn width 100% gesetzt ist (wegen dem Padding) */
				/* border: 1px solid #99ebcb; */
				/* border: 1px solid #b00c28; */

				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;
				}
				.box_warenkorb {
						flex: 1 0 auto;
						text-align: right;
				}

				.warenkorb_symbol {
						display: inline-block;
						height: 35px;
						line-height: 35px;
						font-size: 15px;
						background-size: auto 35px;
						background-repeat: no-repeat;
						background-position: center;
						width: 40px;
						background-image: url(../wk_weiss.svg);
				}

				.warenkorb_text {
						padding-right: 12px;
						display: inline-block;
						height: 35px;
						line-height: 35px;
						font-size: 15px;
				}

				.warenkorb_extrafenster {
						cursor: pointer;
						flex: 1 0 auto;
						text-align: right;
				}

				.warenkorb_konfi {
						cursor: pointer;
						padding-top: 5px !important;
						padding-bottom: 5px !important;
						padding-left: 1em !important;
						padding-right: 1em !important;
				}



						.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);
										/* background-image: url(wk_weiss.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;
				/* bottom: 0; nur f�r RTS*/
				left: 0;
				width: 100%;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				align-items: stretch;
		}
				#spalten2 > * {
						overflow: auto;
				}
				#spalten2 #visualisierung {
						flex: 1 0 0;
						text-align: center;
						position: relative;
						padding-left: 2%;
				}
				_:-ms-fullscreen,
				:root .selector,
				#spalten2 #visualisierung {
						/* IE11 Hack */
						flex: 1 0 auto;
				}


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

						#modellbild_ueberschrift {
								margin-bottom: 1em;
						}

						#paper {
								margin: auto;
						}
						.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 */
								position: relative;
								padding-bottom: 0.5em;/*2em;*/
								/* border-bottom: 1px solid #cacaca; */
						}
								.modellbildImg {
										max-width: 100%;
										z-index: 1;
										position: relative;
										display: block;
								}

						#hinweis_saum_box, #stoffbeschreibung_box {
							display: none;
							padding: 2em;
						}

						#hinweis_saum_box img {
							float: left;
							width: 50%;
							max-width: 300px;
							padding-right: 2em;
							padding-bottom: 2em;
						}
						@media (max-width: 450px) {
							#hinweis_saum_box img {
								float: none;
								width: 80%;
							}
						}

						#modellbild_bezeichnung_img {
								margin-left: auto;
								width: 50%;
						}

						#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 #trenner {
						flex: 0 0 10px;
						background-color: #cdcdcd;
						cursor: col-resize;
						/* visibility: hidden;		hover on hidden element funktioniert nicht (mit einem extra div haette es zwar wieder funktionier, aber ich mache es jitzt mit opacit) */
						opacity: 0;
						margin-left: 1%;
						margin-right: 1%;
				}
						#spalten2 #trenner:hover {
								opacity: 1;
						}


				#spalten2 #eingabe {
						flex: 1 0 0;
						position: relative;
						padding-right: 2%;
				}
				_:-ms-fullscreen,
				:root .selector,
				#spalten2 #eingabe {
						/* IE11 Hack */
						flex: 1 0 auto;
				}
						#eingabe .bereichsueberschrift {
								/* background-color: #00cc7e; */
								background-color: #444444;
								color: #ffffff;
								font-size: 16px;
								font-weight: normal;
								padding: 1em;
								text-align: left;
								margin-top: 0;
								margin-bottom: 0;
						}
						#accordion {
								overflow: auto;
								padding-top: 8px;
								margin-bottom: 18em;
						}
						#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;
								}

										.tabs > * {
												display: inline-block;
												border: 1px solid #d7d7d7;
												margin-right: 6px;
												padding: 1em;
												position: relative;
												left: 0;
												top: 1px;
												cursor: pointer;
												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.elemLt350 #tabForm .bez {		/* auf den Tabs die Ueberschrift */
												#tabForm {
														/*display: none;*/
												}
												@media (max-width: 1015px) { 
													#tabForm > div {
														display: inline-flex;
														flex-direction: column;
														align-items: center;
													}
													#tabForm > div > .icon {
														padding-bottom: 0.5em;
													}
												}
												@media (max-width: 850px) {
													#tabForm > div > .bez > span {
														display: none;
													}
												}
												
										.tabs > .noTab {
												border: 0;
												text-decoration: none;
												color: #444444;
										}
										.tabFenster {
												/* border-top: 1px solid #f1f1f1; */
										}
												.tabFenster > * {
														display: none;
														/* padding: 1em; */
														padding: 0 1em;
														max-width: 800px;		/* max-width hilft uebergeordneten Flex-Elementen bei der Breitenbestimmung*/
														flex-wrap: wrap;
														justify-content: space-evenly;
												}
										

								.tabFensterMain ul {
										list-style-type: none;
										padding: 0;
										margin: 1.5em;
										margin-left: 0;
										
										display: flex;
										flex-wrap: wrap;
										justify-content: center;
										/*
										display: grid;
										grid-template-columns: repeat(auto-fit,minmax(75px, 1fr));
										grid-column-gap: 30px;
										*/
										width: fit-content;
								}
										.tabFensterMain ul li {
										}
										.tabFensterMain ul li label {
										}
												.tabFensterMain ul li img {
														vertical-align: middle;
														margin-top: 1em;
														margin-bottom: 1em;
												}
												@media (max-width: 450px) {
													.tabFensterMain ul li img {
														margin-top: 0.5em;
														margin-bottom: 0.5em;
													}
												}

												.formBild {
														height: 110px;
												}
												@media (max-width: 950px) {
													.formBild {
														height: 80px;
													}
												}
												@media (max-width: 450px) {
													.formBild {
														height: 50px;
													}
												}


										#tabFensterFormRechteckform, #tabFensterFormDreieckform, #tabFensterFormTrapezform {
											display: block;
										}

										#tabFensterForm {
											padding-top: 3em;
										}

										#tabFensterForm ul li {
												/* margin: 0 0.5em; */
										}
										_:-ms-fullscreen,
										:root .selector,
										#tabFensterForm ul li {
												/* IE11 Hack */
												display: inline-block;
										}
												#tabFensterForm ul li label {
														display: flex;
														flex-direction: column;
														align-items: center;

														width: fit-content;

														/* radio buttons auf eine Hoehe bringen */
														height: 100%;
														justify-content: space-between;
												}
														#tabFensterForm ul li:not(:last-of-type) label {
															border-right: 1px solid #d7d7d7;
														}
														#tabFensterForm ul li .checked {
															background-color: #f2f2f2;
														}
														#tabFensterForm ul li label > * {
																text-align: center;
														}
														#tabFensterForm ul li .input {
															/* display: none; */
															margin-bottom: 1em;
														}

														#tabFensterForm ul li .img {
																/* padding: 0.5em 1em; */
																/* padding: 1em 3em; */
																padding: 1em 3em 0 3em;
														}
														@media (max-width: 450px) {
															#tabFensterForm ul li .img {
																padding: 1em 2em 0 2em;
														}
														}
														_:-ms-fullscreen,
														:root .selector,
														#tabFensterForm ul li .img {
																/* IE11 Hack */
																width: auto;
														}
														#tabFensterForm ul li .bezeichnung {
																padding-bottom: 1em;
																display: none;
														}
																#tabFensterForm ul li .bezeichnung .zusatz {
																		color: #888888;
																		display: block;
																}

														#tabFensterForm ul li .price {
																text-align: left;
																padding-left: 1em;
																padding-right: 1em;
														}
														#tabFensterForm ul li .info {
																width: 47px;
																cursor: pointer;
																text-align: center;
														}

														.auswahl_aktiv {
															background-color: #f5f5f5;
															border: 3px solid #444;
														}

														.auswahl_inaktiv {
															background-color: transparent;
															border: 3px solid transparent;
														}

														/* #eingabe Element kleiner als 450 (lower than (lt)) */
														/* die Klassen werden per Javascript gesetzt */
														/* margins und paddings verkleinern */
														/*
														#eingabe.elemLt650 #tabFensterForm ul li .input {
																margin: 0;
														}
														*/

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

								#linkDesignwahl {
										display: inline-block;
								}

						#group_masseingabe {
								display: flex;
								flex-wrap: wrap;
								align-items: center;
								justify-content: space-between;
						}
								#group_masseingabe label, #groupVolanthoehe label, #volantverlaengerungMasseingabe label, #auswahlVolantverlaengerung label{
										display: flex;
										align-items: center;
										flex-wrap: wrap;

								}
								.auswahl_optionen_wrapper label{
										display: flex;
										align-items: center;
								}
								#group_masseingabe label, #groupVolanthoehe label{
										margin-top: 1.5em;
								}
										#group_masseingabe label > * , #groupVolanthoehelabel > *, #groupAuswahlVolantverlaengerung > *{
												vertical-align: middle;
										}
										.mass_bez {
												display: inline-block;
												width: 120px;
												vertical-align: middle;
												margin-right: 1em;
										}
										.mass_bez strong {
											padding-right: 5px;
										}
										.mass_grenze {
												font-size: 80%;
												color: #888888;
												margin-left: 1em;
												white-space: nowrap;
										}

								#group_masseingabe input[type=number], #group_masseingabe input[type=text], #groupVolanthoehe input[type=number], #groupAuswahlVolantverlaengerung input[type=number]{		/* number oder text - je nachdem was es letztendlich fuer ein Feld wird */
										background-color: #ececec;
										border: 1px solid #cecece;
										padding: 6px;
										margin-right: 5px;
										text-align: right;
										width: 60px;
								}

						#group_masseingabe_anleitungen {
							display: flex;
							/* margin: 0 auto; */
						}
							#group_masseingabe_anleitungen > div {
								padding: 1em 2em;
							}


						#group_masse_zusatz {
							display: flex;
							color: #777;
							font-style: italic;
						}
							#group_masse_zusatz > *:first-child {
								padding-right: 1em;
							}

						.kuerzelEinheit {
							font-weight: bolder;
						}

						.massErklaerungBild {
							padding: 0 2em;
							display: none;
						}

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

						#masseingabe_stoffbreite{
								display: none;
								width: 100%;
						}

						#auswahlVolantverlaengerung{
								display: flex;
								align-items: center;
								margin-top: 1.5em;
						}
								#volantverlaengerungMasseingabe label{
										margin-top: 0.5em;
								}


						  #tabFensterForm .bezeichnung
						, #tabFensterVolant .bezeichnung
						, #tabFensterSaumHinten .bezeichnung
						, #tabFensterSaumVorn .bezeichnung
						{
							text-align: center;
						}

						  #auswahlRandList .bezeichnung
						, #auswahlBefestigungspunktList .bezeichnung
						, #auswahlDrehverschlussList .bezeichnung
						, .befestigungLink
						{
								font-size: 1rem;
								margin-top: 0.5em;
								margin-bottom: 0.5em; 
						}
						.eingabeBox .preis_einzel {
								text-align: right;
						}
						.eingabeBox .preis_gesamt {
								text-align: right;
								color: #1a73ff;
						}
						#auswahlRandList .erklaerung_grau {
								color: #a3a3a3;
								margin-top: 0.5em;
								margin-bottom: 0.5em;
						}
						#auswahlRandList #input_hohlsaumDurchmesser {
								width: 2ch;
								text-align: right;
						}
						#auswahlRandList #input_hohlsaumDurchmesser::-webkit-inner-spin-button,
						#auswahlRandList #input_hohlsaumDurchmesser::-webkit-outer-spin-button {
								-webkit-appearance: none;
								margin: 0;
						}

						#auswahl_form {
								display: flex;
						}
								#auswahl_form > * {
										flex: 1;
										text-align: center;
										padding-right: 4%;
										padding-left: 4%;
										padding-top: 1em;
										padding-bottom: 1em;
										border-right: 1px solid #cacaca;
								}
										#auswahl_form > * .bez {
												display: block;
												margin-top: 0.5em;
												margin-bottom: 0.5em;
										}
										#auswahl_form > * .input {
												display: block;
										}
								#auswahl_form > *:last-child {
										border-right: none;
								}
								#auswahl_form > *:hover {
										background-color: #f9f9f9;
								}
								#auswahl_form > *.active
								, #auswahl_form > *.active:hover
								{
										background-color: #f1f1f1;
								}

								@media (max-width: 700px) {
										#auswahl_form > * {
												font-size: 11px;
										}
								}
								@media (max-width: 600px) {
										#auswahl_form > * {
												font-size: 10px;
										}
								}
								@media (max-width: 500px) {
										#auswahl_form > * {
												font-size: 9px;
										}
								}
								@media (max-width: 400px) {
										#auswahl_form > * {
												font-size: 8px;
										}
								}
								#auswahl_form > * > img {
										max-width: 100%;
										height: 10em;
								}




						  .auswahl_form
						, .auswahl_volant
						, .auswahl_saum_hinten
						, .auswahl_saum_vorn
						{
								cursor: pointer;
						}
								  .auswahl_rand .bild
								, .auswahl_befestigungspunkt .bild
								, .auswahl_befestigung .bild
								, .auswahl_streifenverlauf .bild
								, .auswahl_drehverschluss .bild

								, .auswahl_form .bild
								/* , .auswahl_volant .bild
								, .auswahl_saum_hinten .bild
								, .auswahl_saum_vorn .bild */
								{
										margin-bottom: 1em;
										border: 3px solid transparent;
										/* padding: 4px; */
										height: 12em;
										display: flex;
								}


										.auswahl_form .bild img
										/* , .auswahl_volant .bild img
										, .auswahl_saum_hinten .bild img
										, .auswahl_saum_vorn .bild img */
										{
												display: block;
										}

								 .auswahl_form.aktiv .bild
								/* , .auswahl_volant.aktiv .bild
								, .auswahl_saum_hinten.aktiv .bild
								, .auswahl_saum_vorn.aktiv .bild */
								{
										border: 3px solid #444;
								}

								.auswahl_optionen_wrapper{
										display: flex;
										align-items: center;
										margin: 1em 0;
								}


								.flexCenter {
									justify-content: center;
								}

								#flexSpaceBetween {
									justify-content: space-between;
								}

								#flexSpaceEvenly {
									justify-content: space-evenly;
								}
						.infoHerstellerNr{
								text-align: center;
								font-weight: 600;
								margin: 1em auto;
						}
						.info{
								margin: 1em;
								display: flex;
								align-items: center;
						}
						.aufpreis{
								font-weight: 600;
						}



						#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: 800px) {
		/* einspaltig untereinander (und nicht mehr 2 Spalten) */
		/* Die Pixelbreite zur Aenderung sind auch in javascript eingebaut! */

		#spalten2 {
				flex-direction: column;
				margin-top: 2em;
				position: static;
		}
				#spalten2 > *{
						flex: none !important;
				}

						#modellbild_steuerung {
								position: static;
								margin-bottom: 2em;
						}
				#spalten2 #trenner {
						display: none;
				}
				#spalten2 #eingabe {
						padding-left: 2%;
				}
						#accordion {
								margin-bottom: 2em;
						}
						.gruppe_warenkorb {
								margin-top: 5em;
								margin-left: 0;
								margin-right: 0;
								margin-bottom: 1em;
								border-left: none;
								border-right: none;
								border-bottom: none;
								position: static;
						}
}

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

@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;
				height: 100%;
				box-sizing: border-box;
		}
		@media (max-width: 800px) {
				.extrafenster {
						padding: 1em;
				}
		}
		.fensterDesign {
				display: flex;
				flex-direction: column;
		}
				.fensterDesign input[type="checkbox"] {
						vertical-align: middle;
				}
				.extrafenster .head {
						padding-bottom: 1em;
						border-bottom: 1px solid #cecece;
						flex: 0 0 auto;
				}
						.extrafenster .head .left {
								float: left;
						}
						.extrafenster .head .right {
								float: right;
						}
								.extrafensterClose {
										cursor: pointer;
								}
						.extrafenster h2 {
								font-size: 14px;
								padding: 0;
								margin: 0;
						}
						.fensterZweiSpalten {
								display: flex;
								flex: 1 0 0;
								overflow: auto;
						}
								.fensterZweiSpalten > .buttonAusklapp {
										display: none;

										position: absolute;
										left: 0px;
										z-index: 2;
										font-weight: bold;
										cursor: pointer;
										top: 100px;
								}
										.fensterZweiSpalten > .buttonAusklapp img {
												height: 40px;
												display: block;
										}
								.fensterZweiSpalten > .left {
										padding-top: 2em;
										padding-right: 1em;
										border-right: 1px solid #cecece;
										overflow: auto;
										height: 100%;
										box-sizing: border-box;
								}
								.fensterZweiSpalten > .right {
										padding-left: 2.5%;
										padding-top: 2em;
										overflow: auto;
										height: 100%;
										box-sizing: border-box;

										position: relative;		/* fuer die absolut positionierten Ausblend-Balken */
								}

										.fensterZweiSpalten > .right:before {
												/* Uebergang ins Transparente */
												position: absolute;
												z-index: 1;
												top: 2em;
												left: 0;
												background-color: transparent;
												background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
												width: 100%;
												height: 10px;
												content: ' ';
										}
										.fensterZweiSpalten > .right:after {
												/* Uebergang ins Transparente */
												position: absolute;
												z-index: 1;
												bottom: 0;
												left: 0;
												background-color: transparent;
												background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
												width: 100%;
												height: 10px;
												content: ' ';
										}

								.fensterDesign .fensterZweiSpalten > .left {
										flex: 0 1 290px;
								}
								.fensterDesign .fensterZweiSpalten > .right {
										/* eigentlich
										flex: 4.8 1 0;
										damit kommt aber der IE11 nicht zurecht (der Edge aber schon), trotzdem hier folgender Umweg, der bei allen grossen Browsern funktioniert: */
										flex: 4.8 1 1px;
								}

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

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


										.fensterZweiSpalten > .left h3 {
												font-size: 13px;
												border-bottom: 1px solid #cecece;
												padding-bottom: 0.5em;
												margin-bottom: 1em;
										}

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

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


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

										display: flex;
										flex-wrap: wrap;

										padding-top: 1em;		/* fuer die transparenten Uebergangsbereiche */
										padding-bottom: 1em;
										height: 100%;
										box-sizing: border-box;
								}

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


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

												/* width: 178px;
												flex: 1 1 200px; */
												flex: 1 1 300px;
										}
												.listDesigns .listDesignsAreaActivateDetails {
														cursor: pointer;
														position: relative;
												}
														.listDesigns .listDesignsGroupBilder > * {
																float: left;
														}
														.listDesigns .listDesignsGroupBilder > *:last-child {		/* clear-<br> */
																float: none;
														}
																.listDesigns .listDesignsDesign .listDesignsDesignbild {
																		margin-right: 5px;
																		margin-bottom: 1em;
																}
																		.listDesigns .listDesignsDesign .listDesignsDesignbild img {
																				display: block;
																				width: 100%;
																				min-height: 180px;		/* wenn das Bild fehlt */
																		}
																.listDesigns .iconSpezial {
																		/*
																		width: 23px;
																		height: 23px;
																		*/
																		width: 12%;
																		margin-bottom: 5px;
																}

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

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

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

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

														.listDesigns .listDesignsBoxDetails .boxPDFDatenblatt {
																margin-left: 3em;
																margin-top: 2em;
														}
																.listDesigns .listDesignsBoxDetails .boxPDFDatenblatt a {
																}
																.listDesigns .listDesignsBoxDetails .boxPDFDatenblatt img {
																		vertical-align: middle;
																}

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


												.listDesigns .listDesignsBoxDetails .design_big_bildbox {
														position: relative;
														width: 250px;
														margin-left: 1em;
														/* height: 333.33px;		/* Die Bilder sollten eigentlich 400x300Px vorliegen. Das sind aber leider nicht alle! Deshalb hier auch die Hoehe beschraenken sonst veraendert sich das Layout bei unterschiedlichen Bildgroessen. - Das Bild wird auch nicht gezerrt, weil das hier nur der Container um das eigentliche Bild herum ist  */
														/* height: 100%; */
														overflow: hidden;
														border: 1px solid #cecece;
												}
												.listDesigns .listDesignsBoxDetails.elemLt550 .design_big_bildbox {
														width: 180px;
												}
												.listDesigns .listDesignsBoxDetails.elemLt500 .design_big_bildbox {
														/* hier jetzt untereinander */
														margin-left: auto;
														margin-right: auto;
														margin-bottom: 1em;
														width: 200px;

												}
														.listDesigns .listDesignsBoxDetails .design_big_bild {

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

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

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

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

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

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


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

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

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

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

				label .bild {
						border: 3px solid transparent;
						height: 8em;
						margin-bottom: 1em;
				}
				label.checked .bild {
						border: 3px solid #060606;
				}
				label.box_klein input {
						display: none;
				}
				label.box_klein {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin: 0 0.5em;
				}

				#wrapFormSuche {
						text-align: right;
						margin-bottom: 1em;
				}

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

						}

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

				.farbbox {
						display: block;
						width: 30px;
						height: 30px;
						line-height: 30px;
						float: left;
						border: 1px solid #f1f1f1;
						text-align: center;
						font-weight: bold;
						cursor: pointer;
						font-size: 20px;
				}
				.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 { background-color: #838383; color: #ffffff; }
				.farbbox.transparent { background-color: #ffffff; background: linear-gradient(to bottom right, #e1e1e1 0%, #e1e1e1 50%, #ffffff 50%, #ffffff 100%); color:#888888; }



#fensterWarenkorb {

}
#fensterWarenkorb #fensterWarenkorb_top {
		/* padding: 40px; */
		padding: 8%;
}
		#fensterWarenkorb #fensterWarenkorb_top_left {
				float: left;
				width: 30%;
				margin-right: 4%;
				position: relative;
		}
				#fensterWarenkorb #warenkorb_box_produktbild {
						width: 100%;
						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: 8%;
						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_top_left {
						display: none;
				}
				#fensterWarenkorb #fensterWarenkorb_top_right {
						/* width: auto;
						float: none; */
				}
						#fensterWarenkorb_top_buttons .left {
								margin-bottom: 1em;
						}
}





/* ehemals shop.css */


body {
		/* solange im aLayout (layout.css) keine ordentliche Schriftgroesse gesetzt ist (aktuell: 1em), mache ich das hier */
		font-size: 13px !important;		/* important: so dass es auch im Extra-Stoffauswahl-Fenster geht */
}



#konfiguratorGesamt, #konfiguratorGesamt input, #konfiguratorGesamt select, #konfiguratorGesamt button, #konfiguratorGesamt li, #konfiguratorGesamt p {
		/* font-family: verdana, sans-serif;   das ist unsere empfohlene Schriftart fuer den Konfigurator - Zu bevorzugen ist aber die Schriftart vom gesamten Layout (sofern sie mindestens genauso gut passt) */
		font-size: 13px;
}



.gruppe_warenkorb {

}

		.preis {
				/* font-size: 0.45cm; */
				/* font-weight: bold; */
				font-size: 30px;
				font-weight: 400;
		}

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


		/* Warenkorb Button */

		.warenkorb_konfi {

		}


/* Ende ehemals shop.css */