#konfiguratorGesamt {
		background-color: #ffffff;
}

label {
		cursor: pointer;

		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
}
label input[type=radio] {
		cursor: pointer;
}




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

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

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

.switch {
		width: 48px;
}
.boxSlider {
		width: 90%;
		display: flex;
}
		.boxSlider .min {
				flex: 0 0 auto;
		}
		.boxSlider input {
				flex: 1 1 auto;
		}
		.boxSlider .max {
				flex: 0 0 auto;
		}

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

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









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

		.stoff_bild img {
				display: inline-block;
				max-width: 100%;
		}

		.stoff_ueberschrift {
				color: #444444;
				margin-bottom: 1em;
				text-align: left;
		}
		.stoff_group {
				display: flex;
		}
		.stoff.elemLt600 .stoff_group {
				display: block;
		}
				.stoff_bild {
						text-align: left;
						flex: 0 0 300px;
						overflow: hidden;
				}
				.stoff.elemLt600 .stoff_bild {
						text-align: center;
				}
				.stoff_space {
						flex: 0 1 45px;
				}
				.stoff.elemLt600 .stoff_space {
						flex: 0 1 2em;
				}
				.stoff_box {
						text-align: left;
						flex: 1 1 370px;
						overflow: auto;
						padding-right: 1em;		/* Abstand zu eventuellem Scrollbalken */
				}
				.stoff.elemLt600 .stoff_box {
						max-width: 370px;
						margin-left: auto;
						margin-right: auto;
						margin-top: 1em;
				}
				@media (max-width: 800px) {		/* Layout einspaltig */
						.stoff_box {
								max-height: 400px
						}
				}
						.stoff_box_ueberschrift {
								margin-top: 2em;
								margin-bottom: 2em;
						}
								.stoff_box_ueberschrift:first-child {
										margin-top: 0;
								}
								.stoff_box_ueberschrift img {
										vertical-align: middle;
										margin-right: 1em;
								}

						.stoff_box_eigenschaften {

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

						.stoff_box_highlights {

						}
								.stoff_box_highlights > * {
										display: inline-block;
										margin-left: 2em;
										margin-right: 0;
										vertical-align: top;
								}
										.stoff_box_highlights > * > * {
												text-align: center;
												font-size: 65%;
												width: 40px;
												max-width: 100%;

												hyphens: auto;			/* aktuell (08.10.2020 nur firefox) */
												overflow: hidden;		/* fuer die Browser, die hyphens nicht unterstuetzen (Chrome / Edge) */
										}
												.stoff_box_highlights img {
														width: 100%;
												}

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











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

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


		#modellbild_steuerung {
				color: #888888;
				position: fixed;
				top: 50%;
				transform: translateY(-50%);
				left: 0;

				display: flex;
				flex-direction: column;
				align-items: flex-start;

				-webkit-touch-callout: none; /* iOS Safari */
				-webkit-user-select: none;   /* Chrome/Safari/Opera */
				-khtml-user-select: none;    /* Konqueror */
				-moz-user-select: none;      /* Firefox */
				-ms-user-select: none;       /* IE/Edge */
				user-select: none;           /* non-prefixed version, currently not supported by any browser */

				pointer-events: none;		/* im transparenten Bereich dieser Box ist die darunter liegende 3D-Zeichnung nicht mehr steuernbach */

		}
				#modellbild_steuerung > * {
						display: block;		/* das das ausdruecklich auch fuer das label-Element gilt */
						background-color: #f1f1f1;
						padding: 8px;
						border-top: 1px solid #ffffff;
						border-right: 1px solid #ffffff;
						border-bottom: 1px solid #ffffff;
						border-top-right-radius: 5em;
						border-bottom-right-radius: 5em;
						cursor: pointer;
						pointer-events: auto;		/* weil wir die pointer-events im ueberliegenden Objekt ausgeschalten haben, muessen wir sie hier wieder einschalten */
				}
				#modellbild_steuerung > *.initialNone {
						display: none;
				}
						#modellbild_steuerung .bez {
								width: 0;		/* nicht display: none, so dass diese mit Animation eingefahren werden kann */
								max-width: 0;
								margin-right: 0;
								transition: max-width 0.5s, margin-right 0.5s;


								display: inline-block;
								overflow: hidden;
								white-space: nowrap;
								vertical-align: middle;
						}
								#modellbild_steuerung .bez .button_fileupload {
										display: inline-block;
										background-image: linear-gradient(to bottom, #9e9e9e 0%, #9e9e9e 50%, #828282 50%, #828282 100%);
										color: #ffffff;
										border: 0px;
										border-radius: 3px;
										padding-left: 0.5em;
										padding-right: 0.5em;
										padding-top: 0.2em;
										padding-bottom: 0.2em;
										margin-left: 0.5em;
										margin-right: 0.5em;
								}
						#modellbild_steuerung > * input[type="file"] {
								display: none;
						}
						#modellbild_steuerung .iconAction {
								vertical-align: middle;
						}
				  #modellbild_steuerung > *:hover .bez
				, #modellbild_steuerung > *.active .bez
				{
						width: auto;
						max-width: 300px;
						margin-right: 0.5em;
				}

		#modellbild_bottom {
				position: fixed;
				bottom: 0;
				left: 0%;
				width: 50%;
				font-size: 80%;
				background-color: #ffffff;
				padding-top: 0.5em;
				padding-bottom: 0.5em;
		}




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

				position: fixed;
				bottom: 0;
				right: 0;
				box-sizing: border-box;		/* ist auch wichtig bei 1 Spalten-Responsive-Layout, wenn width 100% gesetzt ist (wegen dem Padding) */
				box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.10);

				margin-top: 1em;
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				align-items: center;

				z-index: 10;		/* fuer die .auswahlbox - diese haben einen z-index. Die Warenkorb-Box soll wieder drueber liegen */
		}
				.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 {
						margin-left: 3em;
						margin-right: 3em;
						flex: 1 0 auto;
						text-align: right;
				}
				.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;
						}



					.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(bilder/wk_schwarz.svg);
								}


		@media (min-width: 600px) and (max-width: 1325px) {
				#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;
						}
				.box_preis {
						margin-left: 0;
						margin-right: 0;
				}
		}

		#spalten2 {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				align-items: stretch;
		}
				#spalten2 > * {
						overflow: auto;
				}
				#spalten2 #visualisierung {
						flex: 1 0 0px;		/* fuer IE11 eine Einheit auch bei 0-Werten */
						text-align: center;
						position: relative;
						padding-left: 2%;
				}

				#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 0px;		/* fuer IE11 eine Einheit auch bei 0-Werten */
						position: relative;
						padding-right: 2%;
				}

						/* von den Dachfenster-generierten Seiten */
						#text_vor_konfigurator {
								margin-bottom: 3em;
						}
						#text_nach_konfigurator {
								margin-top: 5em;
								margin-bottom: 18em;
						}

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


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

						.infobereich {		/* zur Initialisierung alles aus haben */
								display: none;
						}

						#spalten2 #visualisierung {
								text-align: center;
								/* margin-bottom: 1em; */
						}

								#modellbild_kopf {
										margin-bottom: 1em;
										display: flex;
										justify-content: space-between;
										align-items: center;
										margin-bottom: 1em;
								}
								#modellbild_ueberschrift {

								}

										#modellbild_logo {
												flex: 1 0 0;
												text-align: left;
										}
												#modellbild_logo img {
														width: 110px;
														display: inline-block;
														margin: 1em;
												}

										#modellbild_ueberschrift {
												flex: 2 0 0;
												text-align: left;
												padding-right: 1em;
										}
												#visualisierung .ueberschrift1 {
														font-size: 16px;
														white-space: nowrap;
												}
												#visualisierung .ueberschrift2 {
														font-weight: bold;
														font-size: 16px;
														white-space: nowrap;
												}



						#visualisierung svg {
								max-width: 100%;
						}
						#ansicht3D {		/* per Javascript uebertragen die 3D-Leute die Groesse dieses Elements auf das innere Element. Allerdings wird die Groesse in Pixel gerundet in Ganzzahl uebetragen. aus 400.6px werden 401px. Das verursacht Scrollbalken, die hiermit ausgeschalten werden sollen. - Aufgetreten im Safari   */
								overflow: hidden;
						}


						#eingabe .bereichsueberschrift {
								background-color: #444444;
								color: #ffffff;
								font-size: 16px;
								font-weight: normal;
								padding: 1em;
								text-align: left;
								margin-top: 0;
						}
						@media (max-width: 800px) {
								#eingabe .bereichsueberschrift {
										display: none;
								}
						}

						/* bei den Optionen */
						#auswahl-optionen input[type=checkbox] {
								display: none;
						}
						#eingabe .switch {
								margin-right: 1em;
								margin-top: 4px;
								margin-bottom: 4px;
						}

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

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

						#eingabe .eingabeBox {
								margin-top: 1em;
								margin-left: 2em;
								margin-bottom: 1em;
								display: none;
								overflow: hidden;		/* fuer die Animation */
						}

								#eingabe .erklaerung {
										font-size: 90%;
										color: #888888;
								}

						.flexTable {
								/*
										- Modell-Uebersichts-Tabelle
										- Bedienung-Uebersichts-Tabelle
								*/
						}

								.flexTable > * {
										display: flex;
										justify-content: space-between;
										align-items: stretch;
								}
								#eingabe .flexTable > * {
										font-size: 90%;
								}
								#eingabe.elemLt800 .flexTable > * {
										font-size: 80%;
								}
								#eingabe.elemLt650 .flexTable > * {
										font-size: 70%;
								}
								.flexTable > .active {
										background-color: #fafafa;
								}
								.flexTable > .ueberschriftGroup {
										color: #888888;
										text-align: center;
								}
										.flexTable > .ueberschriftGroup .empty {
												flex: 6 0 0;
												/*
												padding-left: 0.5em;					/  * Uebernimmt das Padding der darunterliegenden Spalten *  /
												padding-right: calc(0.5em + 1px);		/  * Uebernimmt das Padding der darunterliegenden Spalten sowie die Summer aller darunterliegenden border *  /
												*/
												padding-right: 1px;
										}
										.flexTable > .ueberschriftGroup .stromversorgung {
												flex: 2 0 0;
												border-left: 1px solid #f1f1f1;

												padding-right: 1px;		/* Die Breite aller zusammengefassten border */
										}
										.flexTable > .ueberschriftGroup .steuerung {
												flex: 4 0 0;
												border-left: 1px solid #f1f1f1;
												border-right: 1px solid #f1f1f1;

												padding-left: 2px;		/* Die Breite aller zusammengefassten border */
												padding-right: 1px;
										}
										.flexTable > .ueberschriftGroup .steuerung.anzahl1 {
												flex: 1 0 0;
												padding-left: 0px;
												padding-right: 0px;
										}
										.flexTable > .ueberschriftGroup .steuerung.anzahl2 {
												flex: 2 0 0;
												padding-left: 0px;
												padding-right: 1px;
										}
										.flexTable > .ueberschriftGroup .steuerung.anzahl3 {
												flex: 3 0 0;
												padding-left: 1px;
												padding-right: 1px;
										}
										.flexTable > .ueberschriftGroup .steuerung.anzahl4 {
												flex: 4 0 0;
												padding-left: 2px;
												padding-right: 1px;
										}
										.flexTable > .ueberschriftGroup .steuerung.anzahl5 {
												flex: 5 0 0;
												padding-left: 2px;
												padding-right: 2px;
										}
										.flexTable > .ueberschriftGroup .steuerung.anzahl6 {
												flex: 6 0 0;
												padding-left: 3px;
												padding-right: 2px;
										}
								.flexTable > *.ueberschrift {
										color: #888888;
										text-align: center;
								}
										.flexTable label {
												display: flex;
												flex: 4 0 0;
										}
										.flexTable .box {
												display: flex;
												flex-direction: column;
												justify-content: center;
												align-items: center;
												padding-top: 0.5em;
												padding-bottom: 0.5em;
										}
										.flexTable > *.ueberschrift > * {
												justify-content: flex-start;
										}
										.flexTable > * .input {
												flex: 1 0 0;
												text-align: center;
										}

										.flexTable > * .img {
												flex: 1 0 0;
										}
												.flexTable > * .img img {
														width: 90%;		/* nicht volle Breite, so ist rechts noch Platz zur Schrift */
												}
										.flexTable > * .bezeichnung {
												flex: 2 0 0;		/* wird in der Ueberschrift nicht ueberschrieben */
												text-align: left;
												align-items: flex-start;
												padding-left: 0.5em;
												padding-right: 0.5em;
										}
												.flexTable > * .bezeichnung .aufpreis {
														margin-left: 1em;
												}
										.flexTable > * .bezeichnung.motor {
												flex: 3 0 0;			/* jetzt wo alle Motor-Details ausgbeblendet sind 3, statt 2 */
										}
										.flexTable > * .bezeichnung.laenge {
												flex: 3 0 0;
										}
										.flexTable > * .bezeichnung.ohne {
												flex: 8 0 0;
										}
												.flexTable > * .bezeichnung .zusatz {
														color: #888888;
														display: block;
												}
												.flexTable > * .bezeichnung .zusatzlink {
														display: block;
														/* font-size: 13px; */
												}
														.flexTable > * .bezeichnung .zusatzlink a {
																color: #888888;
																text-decoration: none;
																border-bottom: 1px dashed #888888;
														}
										.flexTable > * .info {
												flex: 1 0 0;
												text-align: center;
										}
												.flexTable > * .info img {
														cursor: pointer;
												}
										.flexTable > * .bedienlaenge {
												flex: 7 0 0;
												display: block;
										}
												.flexTable > * .bedienlaenge > * {
														vertical-align: middle;
												}
														#auswahl-bedienlaenge {
																margin-left: 1em;
																margin-right: 0.5em;
																border: 1px solid #cecece;
														}
														input[type=number]#auswahl-bedienlaenge {		/* bei diskreten Werten (4decor) ist das eine drop-down box, ansonten (simply) ein eingabefeld type="number" */
																width: 5ch;
														}
										.flexTable > * .detail {
												flex: 1 0 0;
												text-align: center;
												border-left: 1px solid #f1f1f1;
												cursor: default;
										}
										.flexTable > * .detail:last-child {
												border-right: 1px solid #f1f1f1;
										}
										#eingabe.elemLt800 .flexTable > * .detail img {		/* der Haken */
												width: 10px;
										}
										#eingabe.elemLt550 .flexTable > * .detail.lessSpaceNone {
												display: none;
										}

						.flexTableBefestigung {
								/*
										- Befestigung-Uebersichts-Tabelle
								*/
						}

								.flexTableBefestigung > * {
										display: flex;
										justify-content: space-between;
										align-items: stretch;
								}
								#eingabe .flexTableBefestigung > * {
										font-size: 90%;
								}
								#eingabe.elemLt800 .flexTableBefestigung > * {
										font-size: 80%;
								}
								#eingabe.elemLt650 .flexTableBefestigung > * {
										font-size: 70%;
								}
								.flexTableBefestigung > .active {
										background-color: #fafafa;
								}
								.flexTableBefestigung > .ueberschriftGroup {
										color: #888888;
										text-align: center;
								}
										.flexTableBefestigung label {
												display: flex;
										}
										.flexTableBefestigung label.mitAnleitungen {
												flex:  7;			/* 1 + 2 + 4 */
										}
										.flexTableBefestigung label.ohneAnleitungen {
												flex: 11;			/* 1 + 2 + 8 */
										}

										.flexTableBefestigung .box {
												display: flex;
												flex-direction: column;
												justify-content: center;
												align-items: center;
												padding-top: 0.5em;
												padding-bottom: 0.5em;
										}
										.flexTableBefestigung > * .input {
												flex: 1 0 0;
												text-align: center;
										}

										.flexTableBefestigung > * .img {
												flex: 1 0 0;
										}
												.flexTableBefestigung > * .img img {
														width: 44px;
												}
										.flexTableBefestigung > * .bezeichnung {
												align-items: flex-start;
												padding-left: 0.5em;
												padding-right: 0.5em;
										}
										.flexTableBefestigung > * .bezeichnung.mitAnleitungen {
												flex: 4 0 0;
										}
										.flexTableBefestigung > * .bezeichnung.ohneAnleitungen {
												flex: 8 0 0;
										}
												.flexTableBefestigung > * .bezeichnung .ueberschrift {
														font-weight: bold;
														text-align: left;
														margin-top: 0;
														margin-bottom: 0.5em;
														font-size: 120%;
												}
										.flexTableBefestigung > * .anleitungen {
												flex: 4 0 0;
												text-align: left;
												align-items: flex-start;
												padding-left: 0.5em;
												padding-right: 0.5em;
										}
												.flexTableBefestigung > * .anleitungen a {
														display: flex;
														align-items: center;
														color: #888888;
														text-decoration: none;
												}
														.flexTableBefestigung > * .anleitungen a img {
																flex: 0 0 23px;
														}
														.flexTableBefestigung > * .anleitungen a span {
																flex: 1 0 0;
																padding-left: 0.5em;
														}
										.flexTableBefestigung > * .info {
												flex: 1 0 0;
												text-align: center;
										}
												.flexTableBefestigung > * .info img {
														cursor: pointer;
												}

								.groupButtonsBottom {
										text-align: right;
										margin-top: 2em;
										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 #357dbc;
												padding-top: 0.5em;
												padding-bottom: 0.5em;
												padding-left: 2em;
												padding-right: 2em;
												display: inline-block;
												cursor: pointer;
										}

						#group_masseMitStandardgroessen {
								display: flex;
								flex-direction: row;
						}

						#group_masse {
								display: flex;
								/* flex: 1 1 0; eigentlich so hier, aber Safari, positioniert diese Box absolut ueber die erste Box (Masseingabe) drueber */
								flex: 1 1 auto;
						}
						#eingabe.elemLt550 #group_masse {
								display: block;
						}
								#group_masse > .left {
										flex: 0 0 auto;
										padding-right: 5em;
								}
										#group_masse > .left img {
												width: 180px;
										}
								#eingabe.elemLt550 #group_masse > .left {
										padding-right: 0;
										margin-bottom: 2em;
										text-align: center;
								}
										#eingabe.elemLt550 #group_masse > .left img {
												width: 100%;
												max-width: 200px;
										}
								#group_masse > .right {
										flex: 1 1 0;
								}
										.group_montageort {
												margin-bottom: 1em;
										}
										#group_masseingabe label {
												display: none;
												margin-top: 1.5em;
										}
										#group_masseingabe label:first-child {
												margin-top: 0;
										}
												#group_masseingabe label > * {
														/* vertical-align: middle;  ohne diese Angabe wird es irgendwie mittiger */
												}
												.mass_bez {
														display: inline-block;
														width: 122px;
												}
														.mass_bez .zusatz {
																font-weight: lighter;
																font-style: italic;
																color: #888888;
														}
												.zoll {
														white-space: nowrap;
												}
												.zoll select {
													padding: 6px;
													border-radius: 0;
													border: 1px solid #cecece;
													width: 75px;
												}
												span[id^="mass_bez_"] {
													font-size: 15px;
												}
												.mass_umrechnung {
														color: #888888;
												}
												.mass_grenze {
														font-size: 80%;
														color: #888888;
														margin-left: 1em;
														display: inline;
												}
												#group_anlagenbreite {
														display: none;
														margin-top: 1.5em;
												}
														#mass_anlagenbreite {
																display: inline-block;
																width: 100px;
																text-align: right;
														}
										#linkMasseingabeMessanleitung {
												margin-top: 3em;
												margin-bottom: 1em;
												color: #357dbc;
												font-weight: bold;
												text-transform: uppercase;
										}
										#anleitungen_messen > a {
												text-decoration: none;
												color: #888888;
												margin-right: 1em;
										}
										#anleitungen_messen > a:last-child {
												margin-right: 0;
										}
												#anleitungen_messen > a > * {
														vertical-align: middle;
												}
												#anleitungen_messen > a > img {
														width: 23px;
														margin-right: 0.2em;
												}
												#anleitungen_messen > a > span {
														font-size: 90%;
												}
										#link_standard {
												display: inline-block;
												position: relative;
										}
												#link_standard .unsertipp {
														position: absolute;
														top: 0;
														left: 0;
														width: 100%;
														color: #ffffff;
														text-align: center;
														padding: 1em;
														box-sizing: border-box;
														text-transform: uppercase;
												}
												#link_standard .linktext {
														position: absolute;
														bottom: 0;
														left: 0;
														width: 100%;
														color: #000000;
														text-align: center;
														padding: 1em;
														margin-bottom: 3em;
														box-sizing: border-box;
												}
												#link_standard .button {
														position: absolute;
														bottom: 0;
														left: 50%;
														transform: translate(-50%, 0);
														background-color: #ffffff;
														border: 0;
														border-radius: 3px;
														color: #000000;
														padding-top: 0.5em;
														padding-bottom: 0.5em;
														padding-left: 1em;
														padding-right: 1em;
														margin-bottom: 1em;
														font-size: 14px;
														font-weight: bold;
														margin-top: 1em;
												}


										#group_masseingabe input[type=number], #group_masseingabe input[type=text] {		/* number oder text - je nachdem was es letztendlich fuer ein Feld wird */
												background-color: #ececec;
												border: 1px solid #cecece;
												padding: 6px;
												text-align: right;
												width: 60px;
										}
										/*		wuerde es in iOs schon beim Tippen und nicht erst bei onchange anzeigen
										#group_masseingabe input[type=number]:out-of-range {
												outline: 1px solid #ff0000;
										}
										*/
										@media (max-width: 500px) {
												.mass_bez {
														width: 80px;
												}
										}
										@media (max-width: 400px) {
												.mass_grenze {
														display: block;
												}
										}
								#standardgroessen {


										display: none;		/* haben wir erstmal nicht */


										flex: 0 0 180px;
										text-align: center;
								}
										#standardgroessen .desktop {
												display: block;
										}
										#standardgroessen .mobile {
												display: none;
										}
								@media (max-width: 1700px) {
										#group_masseMitStandardgroessen {
												flex-direction: column;
										}
												#standardgroessen .desktop {
														display: none;
												}
												#standardgroessen .mobile {
														display: block;
														max-width: 100%;
												}
												#standardgroessen {
														flex: 0 0 auto;
														margin-top: 2em;
														margin-bottom: 2em;
												}

												#link_standard .unsertipp {
														left: 8%;
														top: 14%;
														width: auto;
														margin: 0;
														padding: 0;
														font-size: 2.0vw;
												}
												#link_standard .linktext {
														margin: 0;
														padding: 0;
														left: 8%;
														top: 50%;
														bottom: auto;
														right: auto;
														width: 50%;
														font-size: 1.5vw;
														text-align: left;
												}
												#link_standard .button {
														bottom: auto;
														left: auto;
														right: 22.5%;
														top: 50%;
														transform: translate(50%, -50%);
														margin: 0;
														background-color: #000000;
														color: #ffffff;
														font-weight: normal;
														padding-top: 2%;
														padding-bottom: 2%;
														padding-left: 4%;
														padding-right: 4%;
														font-size: 1.15vw;
												}
								}
								@media (max-width: 1500px) {		/* Layout einspaltig */
												#link_standard .unsertipp {
														font-size: 2.4vw;
												}
												#link_standard .linktext {
														font-size: 1.7vw;
												}
												#link_standard .button {
														font-size: 1.7vw;
												}
								}
								@media (max-width: 800px) {		/* Layout einspaltig */
												#link_standard .unsertipp {
														font-size: 4.5vw;
												}
												#link_standard .linktext {
														font-size: 3.4vw;
												}
												#link_standard .button {
														font-size: 3vw;
												}
								}
								@media (max-width: 600px) {
												#link_standard .unsertipp {

												}
												#link_standard .linktext {
														font-size: 4vw;
												}
												#link_standard .button {

												}
								}

						#wahl_dachfenster {
								display: none;
						}
								#wahl_dachfenster select {
										width: 220px;
										margin-left: 2em;
										border: 1px solid #cecece;
										padding: 6px;
								}
								@media (max-width: 400px) {
										#wahl_dachfenster select {
												width: 100%;
												margin-left: 0;
										}
								}
								#wahl_dachfenster .normal {
										color: #000000;
										background-color: #ececec;
								}
								#wahl_dachfenster .anfrage {
										color: #ff0000;
										background-color: #ff9999;
								}
										/*
										#wahl_dachfenster .anfrage:after {
												content: " !";
										}
										*/
								#wahl_dachfenster select:disabled {
										color: #aaaaaa;
								}
								#wahl_dachfenster .herstellerWechseln {
										color: #000055;
										background-color: #ddddff;
								}

								#wahl_dachfenster .legende .ueberschrift {
										font-weight: bold;
										font-size: 70%;
								}
								#wahl_dachfenster .legende ul {
										list-style-type: none;
										margin-top: 0;
										margin-bottom: 0;
										padding-top: 0;
										padding-bottom: 0;
										font-size: 70%;
								}
								#wahl_dachfenster .meldung {
										border: 1px solid #ff0000;
										margin-top: 1em;
										margin-bottom: 2em;
										padding: 1em;
										display: none;
								}

								#wahl_dachfenster table {
										border-spacing: 0;
								}
										#wahl_dachfenster table td {
												padding-left: 0;
												padding-right: 8px;
												padding-top: 4px;
												padding-bottom: 4px;
										}

								.dach_hinweis {
										/* Das (i) zum Klicken/Tippen */
										display: none;
										vertical-align: middle;
										cursor: pointer;
								}
								.windowHinweisDach {
										/* Das Extra-Fenster */
										padding: 1em;
								}
								.dach_eingabe_frame {
										display: flex;
										flex-wrap: wrap;
								}
										.dach_eingabe_frame > table {
												margin-right: 1em;
												margin-bottom: 1em;
										}
										#dach_eingabe_erklaerung {
												display: none;
												flex: 0 1 300px;
												padding-bottom: 1em;
										}
												#dach_eingabe_erklaerung img {
														max-width: 100%;
														width: 300px;
												}

						/*
						#masseingabe_oder {
								margin-top: 1em;
								margin-bottom: 1em;
								text-transform: uppercase;
						}
						*/
						#dachKontakt {
								display: none;
								margin-top: 1em;
						}

						#linkDachfensterTypenschild {
								margin-bottom: 1em;
						}
						#auswahl_d_traeger {
								display: none;
						}

						#hinweisMasseingabe {
								display: none;		/* es gibt keine Hinweise mehr, die eingeblendet werden muessen - wenn es doch wieder welche gibt, muss ein System geschaffen werden, welches dieses Element anschaltet, sobald ein oder mehr Hinweise vorhanden sind */
								margin-top: 4em;
						}
								.boxIconLeft {
										display: flex;
										align-items: stretch;
								}
										.boxIconLeft > .left {
												flex: 0 0 auto;
												width: 50px;
												min-height: 50px;
												line-height: 50px;
												text-align: center;
										}
												.boxIconLeft > .left > img {
														vertical-align: middle;
												}
										.boxIconLeft > .right {
												flex: 1 1 0;
												padding-left: 1em;
												padding-right: 1em;

												display: flex;
												align-items: center;
										}
										.boxIconLeft.achtung > .left {
												background-color: #ffde0e;
										}
										/*
												.boxIconLeft.achtung > .left img {
														background-color: #ffde0e;
												}
										*/
										/*
										.boxIconLeft.achtung > .right {
												background-color: #fef9db;
										}
										*/
										.boxIconLeft.messen > .left {
												background-color: #357dbc;
										}
										/*
												.boxIconLeft.messen > .left img {
														background-color: #357dbc;
												}
										*/
										.boxIconLeft.messen > .right {
												/* background-color: #e9f2f9; */
										}

												#hinweisMasseingabeList {
														margin-top: 0.5em;
														margin-bottom: 0.5em;
														padding: 0;

														list-style-type: none;
												}
														#hinweisMasseingabeList > li {
																margin-top: 0.5em;
																margin-bottom: 0.5em;
														}
														.hinweisbox {
																display: none;
														}


						.aufpreis {
								color: #3580bb;
								font-weight: bold;
						}
						.scrollContainer .aufpreis {
								display: block;
						}
						.auswahlbox .aufpreis {
								position: absolute;
								left: 0;
								bottom: -20px;
								text-align: center;
								width: 100%;
								font-size: 12px;
						}

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

								.xArtikelsystem .xArtikel {
										display: flex;
										margin-bottom: 2em;
								}
										.xArtikelsystem .xArtikel .action {
												display: block;
												flex: 1 0 0;
										}
										.xArtikelsystem .xArtikel .icons {
												flex: 0 0 34px;
												text-align: right;
										}
												.xArtikelsystem .xArtikel .action img {
														width: 100%;
												}
												.xArtikelsystem .xArtikel .icons img {
														width: 24px;
												}
												.xArtikelsystem .xArtikel input{
														width: 2ch;
														text-align: right;
												}

						#link_fenster_bedienelemente {
								font-size: 90%;
								margin-top: 0.5em;
								margin-bottom: 1em;
						}
						#fensterBedienlaenge, #fensterBedienlaenge p {
								color: #444444;
								font-size: 11px;
						}
						.msgboxhtml_head {
								text-align: center;
								background-color: #5f5f5f;
								color: #ffffff;
								padding: 1em;
						}
								.msgboxhtml_head .first {
										font-weight: bold;
										font-size: 13px;
								}
								.msgboxhtml_head .second {
										font-size: 11px;
								}
						.msgboxhtml_body {
								padding: 1em;
						}
								.msgboxhtml_body img {
										float: right;
										margin-left: 1em;
										margin-bottom: 1em;
								}


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

						.auswahlboxContainer {
								display: none;
								margin-right: 2em;
						}
						#eingabe.elemLt450 .auswahlboxContainer {
								margin-right: 1.5em;
						}
						.auswahlboxContainer:last-child {
								margin-right: 0;
						}
								.auswahlboxContainer .accordion_zwischenueberschrift {
										margin-left: 0.5em;		/* weil .auswahlbox auch ein ueberstehenden Bereich hat - damit das gleich aussieht */
										margin-top: 2em;
								}

								.auswahlbox {
										margin-left: 0.5em;		/* wegen dem ueberstehendem Bereich */
										margin-bottom: 1em;
								}

										.auswahlbox label {
												background-color: #f1f1f1;
												color: #444444;
												display: inline-block;
												padding-left: 2em;
												padding-right: 2em;
												padding-top: 1em;
												padding-bottom: 1em;
												border-right: 1px solid #ffffff;

												position: relative;		/* fuer den innenliegenden Aufpreis */
												z-index: 1;
										}
										#eingabe.elemLt450 .auswahlbox label {
												padding-left: 1.5em;
												padding-right: 1.5em;
												font-size: 85%;
										}
										.auswahlbox label.active {
												background-color: #3580bb;
												color: #ffffff;
												border-radius: 3px;
												transform: scale(1.1);
												box-shadow: 0 8px 6px -6px #000000;
												z-index: 2;
										}
												.auswahlbox label input {
														display: none;
												}
						#anleitungen_traegerprofil {
								margin-top: 1em;
						}

						#auswahl-optionen label
						, #auswahl-optionen > span		/* Option Insert always included */
						{
								display: block;
						}
						#auswahl-optionen > span {
								cursor: default;
						}
								#auswahl-optionen label > *
								, #auswahl-optionen > span > *
								{
										vertical-align: middle;
								}

				#box_abzugsmass {
						background-color: #cdcdcd;
						display: none;		/* wird beim Anschalten auf flex gesetzt. */
						align-items: center;
						cursor: pointer;
						border-top: 1px solid #cecece;
				}
						#box_abzugsmass > * {
								vertical-align: middle;
						}
						#box_abzugsmass > #box_abzugsmass_icon {
								flex: 0 0 50px;
								height: 50px;
								background-color: #ffdd00;
								display: flex;
								justify-content: center;
						}
								#box_abzugsmass img {
										background-color: #ffdd00;
										width: 25px;
								}
						#box_abzugsmass #info_abzugsmass {
								padding-left: 1em;
								padding-right: 1em;
								flex: 1 0 0;
						}

				#last_element {
						margin-bottom: 18em;				/* das letzte Element vor .gruppe_warenkorb schafft den Platz nach unten */
				}




@media (max-width: 1000px) {

		/* einspaltig untereinander (und nicht mehr 2 Spalten) */


		#spalten2 {
				flex-direction: column;
				position: static;
		}
				#spalten2 > *{
						flex: none !important;
				}
				#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;
						}
				#modellbild_kopf {
						margin-top: 1em;
				}
		#modellbild_steuerung {
				position: static;
				width: 100%;
				transform: none;
				flex-direction: row;
				justify-content: space-evenly;
				margin-top: 1em;
				margin-bottom: 0;
				padding-bottom: 1em;
				border-bottom: 1px solid #d7d7d7;
		}
				#modellbild_steuerung .group {
						display: inline-flex;
				}
				#modellbild_steuerung .bez {
						display: none;
				}
						#modellbild_steuerung > * {
								flex: 0 1 42px;
								border-radius: 5em;
								border: 3px solid #ffffff;
								padding: 0;
						}
						#modellbild_steuerung > *:hover {
								border: 3px solid #cccccc;
						}
						#modellbild_steuerung > *.active {
								border: 3px solid #000000;
						}
								#modellbild_steuerung > * .iconAction {
										width: 100%;
								}


		#modellbild_bottom {
				position: static;
				width: auto;
		}

		#last_element {
				display: none;
		}

}

@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;
				}
		}
				.fensterDesign input[type="checkbox"] {
						vertical-align: middle;
				}
				.extrafenster .head {
						padding-bottom: 1em;
						border-bottom: 1px solid #cecece;
						position: relative;
				}
						.extrafenster .head .left {

						}
						.extrafenster .head .right {
								position: absolute;
								right: 0;
								top: 0;
						}
								.extrafensterClose {
										cursor: pointer;
								}
						.extrafenster h2 {
								font-size: 16px;
								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 */
								}
								.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;
										}

										.fensterDesignHinweis {
												display: none;
												margin-bottom: 2em;
												font-size: 90%;
										}

										#tabsModell {
												margin-top: 1.5em;
										}


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


								.listDesigns {
										overflow: auto;
								}
										.listDesigns: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: ' ';
										}
										.listDesigns:after {
												/* Uebergang ins Transparente */
												position: absolute;
												z-index: 1;
												bottom: 0;
												left: 0;
												background-color: transparent;
												background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
												width: 100%;
												height: 10px;
												content: ' ';
										}

										.listDesigns .zwischenueberschrift {
												margin-top: 2em;
												margin-bottom: 2em;
												margin-right: 2%;


										}
														.listDesigns .zwischenueberschrift .logobezeichnung {
																float: left;

																display: flex;
																justify-content: space-between;
																align-items: center;
																flex-wrap: wrap;
														}
																.listDesigns .zwischenueberschrift .logobezeichnung .logo {
																		flex: 0 1 auto;
																}
																		.listDesigns .zwischenueberschrift .logobezeichnung .logo > img {
																				margin-right: 1em;
																				max-height: 50px;
																				max-width: 100%;
																		}
																.listDesigns .zwischenueberschrift .logobezeichnung .bezeichnung {
																		flex: 1 1 auto;
																}

												.listDesigns .zwischenueberschrift .ansicht {
														float: right;
												}

														.listDesigns .zwischenueberschrift .ansicht form {
																display: inline;
														}
														.listDesigns .zwischenueberschrift .ansicht_bezeichnung {
																font-weight: bold;
																margin-right: 1em;
														}
														.listDesigns .zwischenueberschrift .ansicht_wahl {

														}
																.listDesigns .zwischenueberschrift .ansicht_wahl .button {
																		display: inline-block;
																		width: 93px;
																		height: 22px;
																		line-height: 22px;
																		border: 1px solid #cecece;
																		text-align: center;
																		color: #888888;
																		margin-left: 4px;
																		background-color: #ffffff;
																		padding: 0;
																		border-radius: 0;
																		font-size: 1em;

																		-webkit-touch-callout: none; /* iOS Safari */
																		-webkit-user-select: none;   /* Chrome/Safari/Opera */
																		-khtml-user-select: none;    /* Konqueror */
																		-moz-user-select: none;      /* Firefox */
																		-ms-user-select: none;       /* IE/Edge */
																		user-select: none;           /* non-prefixed version, currently not supported by any browser */
																}
																.listDesigns .zwischenueberschrift .ansicht_wahl .button:hover {
																		color: #444444;
																}
																		.listDesigns .zwischenueberschrift .ansicht_wahl input {
																				display: none;
																		}
																		.listDesigns .zwischenueberschrift .ansicht_wahl .button > img {
																				display: none;
																				width: 11px;
																				height: 10px;
																				margin-left: 1em;
																				vertical-align: baseline;		/* das ist mittiger als middle (gesetzt in layout.css) */
																		}

																		.listDesigns .zwischenueberschrift .ansicht_wahl input:checked + .button {
																				color: #ffffff;
																				background-color: #3781bd;
																				border: 1px solid #3781bd;
																		}
																				.listDesigns .zwischenueberschrift .ansicht_wahl input:checked + .button > img {
																						display: inline;
																				}
										.listDesigns .notFound {
													margin-top: 5em;
													font-style: italic;
													text-align: center;
													color: #999999;
										}


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

										/*
										display: flex;
										flex-wrap: wrap;
										*/
										display: grid;
										grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
										grid-column-gap: 2%;
										margin-right: 2%;
								}
								.listDesignsMarke .listDesignsDesign .uebernehmen > div {
										font-size: 13px;
								}
								@media (max-width: 1500px) {
										.listDesignsMarke {
												grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
										}
										.listDesignsMarke .listDesignsDesign .uebernehmen > div {
												font-size: 12px;
										}
								}
								@media (max-width: 1000px) {
										.listDesignsMarke {
												grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
										}
										.listDesignsMarke .listDesignsDesign .uebernehmen > div {
												font-size: 11px;
										}
								}


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

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

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

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

												grid-column-start: 1;
												grid-column-end: -1;

										}

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

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

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


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

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

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

												.extrafenster .tabsDesign {
														margin-top: 1em;
												}
														.extrafenster .tabsDesign.elemLt800 .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;
												}
														.meinung_ueberschrift {
																margin-top: 1em;
																margin-bottom: 0.5em;
														}
																.wertung_stern img {
																		vertical-align: middle;
																}


								.listDesignsMarke .listDesignsBez, .listDesigns .listDesignsErsetztbez {
										font-size: 11px;
										color: #888888;
										text-align: center;
								}
								.listDesignsMarke .listDesignsErsetztbez {
										font-style: italic;
								}
								.listDesignsMarke .abpreis {
										text-align: center;
										font-weight: bold;
								}

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

								.listDesignsMarke .listDesignsGroupBottom {
										margin-top: 0.5em;
										margin-bottom: 0.5em;
								}

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

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

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

						.fensterDesign input[type="checkbox"] {
								margin-right: 7px;
						}
						.fensterDesign .icon {
								vertical-align: middle;
								width: 22px;
								height: 22px;
								margin-left: 0;
								margin-right: 7px;
						}


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

				.fensterDesign .check label {
						display: block;
						text-indent: -2em;
						margin-left: 2em;
						margin-top: 5px;
						margin-bottom: 5px;
				}

				/*
				#wrapModellSuche {
						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, .farbbox.blue { background-color: #3485ff; color: #ffffff; }
				.farbbox.braun, .farbbox.brown { background-color: #6f3e18; color: #ffffff; }
				.farbbox.gelb, .farbbox.yellow { background-color: #fffc00; color: #888888; }
				.farbbox.gruen, .farbbox.green { background-color: #73b525; color: #ffffff; }
				.farbbox.orange { background-color: #ff6501; color: #ffffff; }
				.farbbox.rosa, .farbbox.rose { background-color: #ed008c; color: #ffffff; }
				.farbbox.rot, .farbbox.red { background-color: #ea0001; color: #ffffff; }
				.farbbox.schwarz, .farbbox.black { background-color: #000000; color: #ffffff; }
				.farbbox.violett, .farbbox.violet { background-color: #9349aa; color: #ffffff; }
				.farbbox.weiss, .farbbox.white { background-color: #ffffff; color: #888888; }
				.farbbox.grau, .farbbox.grey, .farbbox.gray { background-color: #838383; color: #ffffff; }



#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: 1em;
						cursor: pointer;
				}
				#fensterWarenkorb_top_buttons .right {
						float: right;
				}
				@media (max-width: 530px) {
						#fensterWarenkorb_zurueck_einkaufen {
								display: none;
						}
				}

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

@media (max-width: 650px) {
		#fensterWarenkorb {
				width: auto;
		}
				#fensterWarenkorb_top_left {
						display: none;
				}
				#fensterWarenkorb #fensterWarenkorb_top_right {
						width: auto;
						float: none;
				}
						#fensterWarenkorb_top_buttons .left {
								margin-bottom: 1em;
						}
}