/*
		17.03.2020 - Tim - Styles bezueglich der Tabs angepasst
		03.01.2022 - David S. - preis_alt eingebaut
		21.03.2022 - Tim - HTML Fenster Schieneprofil Plus und Javascript korrigiert (ids und Klassen haben nicht mehr gepasst) (im Zusammenhang mit Responsivizierung des HTML ist das kaputt gegangen)
*/

/*
		Folgende breite sind fest. Sie sind auch im Programmcode (Javascript) hinterlegt:
		@media (max-width: 800px) {
				Einspaltiges Laylout
		}
		@media (max-width: 500px) {
				Mobiles HandyLayout
		}
*/

@media (max-width: 800px) {
		ul {
				padding-left: 1em;
		}
}
@media (max-width: 500px) {
		ul {
				padding-left: 1em;		/* 0, wenn kein list-style-type */
		}
}


label {
		cursor: pointer;

		-webkit-user-select: none;
		user-select: none;
}
		label input[type="radio"] {
				cursor: pointer;
		}
		.groupOptionen label > * {
				vertical-align: middle;
		}

input[type="text"], input[type="number"] {
		font-size: 16px;		/* iOs Safari zoom in das Feld beim Betreten hinein, wenn die Schriftgroesse kleiner als 15px ist und zoomz beim Verlassen NICHT wieder hinaus */
}

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

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

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

.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;
		cursor: pointer;
}
@media (max-width: 500px) {
		#linkMasseingabeMessanleitung {
				background-position: 87% center;
		}
}

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

@media (max-width: 500px) {
		/* Info-Fenster Modell */
		.listStyleTypeRaquo ul {
				padding-left: 0;
		}
}


#konfigurator {
		position: relative;
		display: block;
}

#konfigurator, #konfigurator li {
		color: #000000;			/* ueberschriebt die Angabe vom Layout-CSS */
}

  #mobile_top
, #mobile_navigation
{
		display: none;			/* wird im einspaltigen Layout angeschalten */
}
		/* gehoert zu #mobile_navigation */
		  #progressIndicator
		, #ueberschriftZusammenfassung {
				display: none;
		}

@media (max-width: 500px) {
		body {
				padding: 0;		/* bei den meisten Browsern (Firefox) ist hier ein default eingestellt */
		}
		.mobileNone {
				display: none !important;		/* !important deshalb, weil ohne andere Definitionen das hier ueberschreiben: #spalten2 hat display: flex und der ID-Selector ueberwiegt dem Klassenselector */
		}
		#konfiguratorGesamt, #konfiguratorGesamt li {
				font-weight: normal;
				font-size: 14px;
		}
		#konfiguratorGesamt {
				margin-bottom: 8em;
		}
		#ueberschriftZusammenfassung {
				text-align: center;
				font-weight: bold;
				font-size: 16px;
				margin-top: 2em;
				margin-bottom: 1em;
		}
}

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

		#modellbild_steuerung2d {
				color: #888888;
				font-size: 11px;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				display: none;
				justify-content: space-around;
		}
				#modellbild_steuerung2d_left {
						flex: 0 1 33%;
				}
						#modellbild_steuerung2d_hintergrund, #modellbild_steuerung2d_animation {
								display: none;
						}
						#modellbild_steuerung2d_animation {
								cursor: pointer;
						}
				#modellbild_preview {
						flex: 1 0 auto;
				}
				#modellbild_steuerung2d_right {
						flex: 0 1 33%;
				}
				.graphSetBackground {
						cursor: pointer;
						height: 54px;
				}


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

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

				-webkit-user-select: none;
				user-select: none;
				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 > *.active {
						cursor: default;
				}

				  #modellbild_steuerung > *:hover .bez
				, #modellbild_steuerung > *.active .bez
				{
						width: auto;
						max-width: 300px;
						margin-right: 0.5em;
				}


		.last_element:not(.iFrame .last_element) {
				margin-bottom: 7em;				/* das letzte Element vor .gruppe_warenkorb schafft den Platz nach unten */
		}

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

		.gruppe_warenkorb:not(.iFrame .gruppe_warenkorb) {
				position: fixed;
				bottom: 0;
				right: 0;
		}
		.gruppe_warenkorb {
				background-color: #E7E7E7;
				padding: 10px;

				box-sizing: border-box;		/* ist auch wichtig bei 1 Spalten-Responsive-Layout, wenn width 100% gesetzt ist (wegen dem Padding) */
				border-radius: 3px;

				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;
						display: none;
				}
						.sonderwunsch textarea, .sonderwunsch input[type="text"] {
								width: 100%;
								border: 1px solid #e6e6e6;
								box-sizing: border-box;
								border-radius: 3px;
						}
						.sonderwunsch textarea {
								/* Sonderwunsch */
								height: 50px;
						}
						.sonderwunsch input[type="text"] {
								/* Kommission Label */
						}
						.sonderwunsch input[type="text"]::placeholder {
								font-size: 12px;
						}
				.box_menge {
						text-align: right;
						flex: 3 0 auto;
				}
						.gruppe_warenkorb .menge {
								text-align: center;
								display: inline-block;
						}
								.gruppe_warenkorb .menge input[type="text"], .gruppe_warenkorb .menge input[type="number"] {
										border: 1px solid #cccccc;
										border-radius: 3px;
										width: 40px;
										color: #444444;
										text-align: center;
										margin-bottom: 0.2em;
										box-shadow: inset 0px 2px 4px #00000040;
								}
								.gruppe_warenkorb .menge > * {
										display: block;
								}
				.box_preis {
						flex: 1 0 auto;
						text-align: right;
				}
				#einzelpreis{
						font-size: 18px;
						font-weight: bold;
				}

				.preis_alt{
						display: block;
						text-decoration: line-through;
				}
				.preis_neu{
						display: block;
						color: #ee1f26;
				}
				#anbieterkennzeichnung {		/* nur RTS */
						text-align: right;
						cursor: pointer;
						text-decoration: underline;
						font-size: 11px;
				}
				.box_warenkorb {
						flex: 1 0 auto;
						text-align: center;
				}
						.warenkorb_konfi {
								cursor: pointer;
								padding-top: 5px;
								padding-bottom: 5px;
								padding-left: 2em;
								padding-right: 2em;
						}
						.warenkorb_konfi:hover {
								font-style: italic;
						}

								.warenkorb_konfi .warenkorb_text, .warenkorb_konfi .warenkorb_symbol {
										display: inline-block;
										height: 43px;
										line-height: 43px;
								}
										.warenkorb_konfi > * {
												color: #ffffff;
										}

								.warenkorb_konfi .warenkorb_symbol {
										background-size: auto 30px;
										background-repeat: no-repeat;
										background-position: center;
										width: 40px;
										background-image: url(/plissee/konfigurator/wk_weiss.svg);
										margin-right: 1em;
								}
								.warenkorb_konfi .warenkorb_text {
										text-transform: uppercase;
								}
								
		@media (max-width: 800px) {
				.gruppe_warenkorb {
						margin-top: 4em;
						margin-left: 0;
						margin-right: 0;
						margin-bottom: 5em;
						border-left: none;
						border-right: none;
						border-bottom: none;
						position: static !important;

						width: 100%;
						box-sizing: border-box;
				}
		}
		@media (max-width: 500px) {
			
				.gruppe_warenkorb {
						display: none;
				}

		}



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

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


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



				.msgboxhtml {
					overflow: hidden;
				}


				.window_wk_table_auswahl {
					grid-template-columns: 95%;
					grid-template-rows: 50% 50%;
				}

				.msgboxhtml {
					overflow: hidden;
				}
		}


		#accordion_mobile_content {
				display: none;
		}
		@media (max-width: 500px) {
				#accordion_mobile_content {
						display: block;
						padding: 1em;
						
						/* height: 50em;		wozu war das hier gut? das ist bei dem Mass-Tab (im Mobilen) zu wenig. evtl. min-height verwenden? */
				}			
		}


		#spalten2:not(.iFrame #spalten2){
				position: fixed;
				left: 0;		
		}
		#spalten2 {
				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: 2em;
				}
				@media (max-width: 800px) {		/* isLayoutEinspaltig */
						#spalten2 #visualisierung {
								padding-left: 0;
						}
				}
				@media (max-width: 500px) {		/* Handy */
						#spalten2 #visualisierung {
								display: none;
						}
				}

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



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

						#modellbild_ueberschrift {
								margin-bottom: 1em;
						}
								#modellbild_ueberschrift_flex {
										display: flex;
										align-items: center;
								}
										#modellbild_ueberschrift_flex_links {
												flex: 1 0 0;
										}
										#modellbild_ueberschrift_flex_mitte {
												flex: 0 0 auto;
												text-align: center;
												display: none;
										}
												#modellbild_ueberschrift_flex_mitte img {
														display: block;
												}

										#modellbild_ueberschrift_flex_rechts {
												flex: 1 0 0;
												display: none;
										}

						#paper {
								margin: auto;
						}
						.modellbild {
								/*
										Den Selektor als Klasse definieren, nicht als ID, weil beim Zoom, die Elemente geklont werden und dort die ID umbenannt ist, die Klasse aber nicht
										Das geklonte bild befindet sich nicht mehr in #visualisierung. Deshalb ".modellbild", statt "#visualisierung .modellbild" selektieren
								*/
								position: relative;
						}
						#paper, #visualisierung .modellbild, #visualisierung #ansicht3D, .ansichtStoff {
								display: none;
						}
						#visualisierung #ansicht3D {
								margin-left: auto;
								margin-right: auto;
						}
								#ansicht3dInteraktion {
										display: none;
										position: absolute;

										top: 50%;
										left: 50%;
										transform: translate(-50%,-50%);
										white-space: nowrap;
								}
										#ansicht3dInteraktion > * {
												border-radius: 16px;
												color: #ffffff;
												cursor: pointer;
												display: inline-block;
										}
										#ansicht3dInteraktionOn {
												background-color: #0082c0;
										}
										#ansicht3dInteraktionOff {
												background-color: #434343;
										}
												#ansicht3dInteraktion > * > * {
														vertical-align: middle;
												}
												#ansicht3dInteraktion > * img {
														margin-top: 1px;
														margin-left: 1px;
														margin-bottom: 1px;
												}
												#ansicht3dInteraktion > * span {
														margin-left: 0.5em;
														margin-right: 0.5em;
												}

								.modellbildHintergrund, .modellbildHintergrund_1
								{
										position: absolute;
										z-index: 0;
										left: 0.1%;		/* bei bestimmten Zooms sieht man um das Bild Streifen, die von dem Hintergrund hier herruehren */
										width: 99.8%;
										top: 0.1%;
										height: 100px;
								}
								.modellbildImg {
										max-width: 100%;
										z-index: 1;
										position: relative;
										display: block;
								}


								#modellbild_ueberschrift {
										text-align: left;
								}
										#spalten2 #visualisierung .ueberschrift1 {
												font-size: 16px;
										}
										#spalten2 #visualisierung .ueberschrift2 {
												font-weight: bold;
												font-size: 16px;
										}
										#spalten2 #visualisierung .versandfertig {
												color: #00900a;
												margin-top: 2px;
										}
						#visualisierung svg {
								max-width: 100%;
						}

				#konfiguratorGesamt .ansicht {
						display: none;
				}


				#spalten2 #eingabe {
						flex: 1 0 0;
						position: relative;
						padding-right: 2em;
				}
				@media (max-width: 500px) {
						#spalten2 #eingabe {
								margin-top: 3em;
						}
				}

						#konfiguratorGesamt .bereichsueberschrift {
								background-color: #444444;
								color: #ffffff;
								font-size: 16px;
								font-weight: normal;
								padding: 1em;
								text-align: left;
								cursor: default;
						}

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

								#konfiguratorGesamt .accordion_zwischenueberschrift {
										font-weight: normal;
										margin-top: 0;
										margin-bottom: 1em;
								}
										#konfiguratorGesamt #groupSchienenprofil .accordion_zwischenueberschrift {
												margin-top: 2em;
										}
								#konfiguratorGesamt #ansicht_1 .erklaerung {
										font-size: 90%;
										color: #888888;
								}
								#konfiguratorGesamt .befestigung {
										margin: 0;
										padding: 0;
								}
								#konfiguratorGesamt .befestigung li {
										display: flex;
										justify-content: space-between;
										align-items: center;
										border-bottom: 1px solid #cecece;
								}
								/* 
								es gibt nicht mehr so viele Befestigungen in der Glasleiste als das man sie noch zur Gruppierung einruecken muesste
								#konfiguratorGesamt .befestigung li.inGlasleisteSekundaer {
										margin-left: 2em;
								}
								*/
										#konfiguratorGesamt .befestigung li label {
												display: flex;
												justify-content: space-between;
												align-items: center;
												flex: 1 0 0;
										}
										#konfiguratorGesamt .befestigung li .icons {
												display: flex;
												justify-content: space-between;
												align-items: center;
												flex: 0 0 auto;
										}
								#konfiguratorGesamt .befestigung li:last-child {
										border-bottom: none;
								}
										#konfiguratorGesamt .befestigung li .input {
												flex: 0 0 45px;
												text-align: left;
										}
										#konfiguratorGesamt .befestigung li .bezeichnung {
												flex: 1 0 0;
												text-align: left;
												padding-top: 1em;
												padding-bottom: 1em;
										}
										#konfiguratorGesamt .befestigung li .bild {
												display: none;
										}
										#konfiguratorGesamt .befestigung li .checkpreis {
												display: none;
										}
										#konfiguratorGesamt .befestigung li .erklaerungBefestigungKurz {
												display: none;
										}
										#konfiguratorGesamt .befestigung li .info {
												display: block;
												flex: 0 0 47px;
												width: 47px;		/* hilft dem Firefox die Groesse besser zu berechnen und einzuhalten */
												cursor: pointer;
												text-align: center;
										}

								@media (max-width: 500px) {
										#konfiguratorGesamt #ansicht_1 .erklaerung {
												display: none;
										}
										#konfiguratorGesamt .befestigung {
												display: flex;
												gap: 8px;
										}
										#konfiguratorGesamt .befestigung.onlyOneElement {
												justify-content: center;		/* relevant bei nur einem Modell, z.B. Doppelstoff-Plissee P1620 bei der Wahl der Befestigung gibt es nur eine Klemmvariante. - das geht leider nicht fuer mehrere Befestigungen, weil der Scrollbalken da mittig, statt links startet */
										}
										#konfiguratorGesamt .befestigung li {
												border: 1px solid #CFCECE;
												border-radius: 6px;
												flex-direction: column;
												padding: 8px;
												flex: 0 0 216px;
										}
											#konfiguratorGesamt .befestigung li:last-child {
													border-bottom: 1px solid #CFCECE;		/* weil im Desktop Layout hier border-bottom: none steht, hier nochmal setzen und ueberschreiben */
											}
										#konfiguratorGesamt .befestigung li.inGlasleisteSekundaer {
												margin-left: 0;		/* vom Desktop-Layout wieder zurueck ueberschreiben */
										}
												#konfiguratorGesamt .befestigung li label {
														display: grid;
														grid-template-columns: 1fr 1fr;
														gap: 10px;
														grid-template-areas:
																"bezeichnung bezeichnung" 
																"bild checkpreis"
																"erklaerungBefestigungKurz erklaerungBefestigungKurz"
														;
														font-size: 1em;		/* steht im RTS-Layout auf 0.9em */
												}
														#konfiguratorGesamt .befestigung li .input {
																display: none;
														}
														#konfiguratorGesamt .befestigung li .bezeichnung {
																grid-area: bezeichnung;
																font-weight: 400;
																padding: 0;
																text-decoration: underline;
														}
																#konfiguratorGesamt .befestigung li .bezeichnung .erklaerung {
																		display: none;
																}
														#konfiguratorGesamt .befestigung li .bild {
																display: block;
																width: 170px;
																grid-area: bild;
														}
																#konfiguratorGesamt .befestigung li .bild img {
																		width: 100%;
																}
														#konfiguratorGesamt .befestigung li .checkpreis {
																display: block;
																grid-area: checkpreis;
																text-align: center;
																font-weight: bold;
														}
																#konfiguratorGesamt .befestigung li .checkpreis .icon_checked {
																		margin-bottom: 1em;
																}
														#konfiguratorGesamt .befestigung li .erklaerungBefestigungKurz {
																display: block;
																grid-area: erklaerungBefestigungKurz;
																background-color: #F8F4C6;
																text-align: center;
																padding: 7px;
																font-size: 14px;
																font-weight: 400;
														}
														#konfiguratorGesamt .befestigung li .erklaerungBefestigungKurz:empty {
																background-color: transparent;
																height: 1.2em;
														}
														#konfiguratorGesamt .befestigung li .icons {
																margin-top: 1em;
														}
														#konfiguratorGesamt .befestigung li .info {
															
														}
														#konfiguratorGesamt .befestigung li .info > * {
																width: 25px;
														}
										#konfiguratorGesamt .befestigung li.active {
												border: 1px solid #006AE5;
										}
												#konfiguratorGesamt .befestigung li.active .bezeichnung {
														color: #006AE5;
														text-decoration: none;
												}

								}



								/* nur Modell und Befestigung - nicht Modellauswhal, Stoffauswahl */

								.tabFensterMain ul {
										list-style-type: none;
										padding: 0;
										margin: 0;
								}
										.tabFensterMain ul li {
												border-bottom: 1px solid #cecece;
										}
										.tabFensterMain ul li label {
												display: block;
										}
												.tabFensterMain ul li img {
														vertical-align: middle;
														margin-top: 1em;
														margin-bottom: 1em;
												}
										.zeilenwahl {
												margin: 0;
												padding: 0;
										}
												.zeilenwahl li {
														display: flex;
														justify-content: space-between;
														align-items: center;
														border-bottom: 1px solid #cecece;
														gap: 24px;
												}
														.zeilenwahl li label {
																display: flex;
																justify-content: space-between;
																align-items: center;
																flex: 8 2 0;
														}
														.zeilenwahl li .input {
																flex: 0 0 5.6%;
																text-align: left;
														}

														.zeilenwahl li .img {
																/* height: 80px; */
																width: 69px;
																flex: 0 0 69px;
																margin: 1em;
														}
														.zeilenwahl li .bezeichnung {
																flex: 1 3 auto;		/* eigentlich flex: 1 3 0; - aber in IE11 (nicht Edge) und ich glaube im Safari (nicht Chrome) geht das mit auto hier besser */
																text-align: left;
																padding-left: 1em;
																padding-top: 1em;
																padding-bottom: 1em;
														}
																.zeilenwahl li .bezeichnung .zusatz {
																		color: #888888;
																}
																.zeilenwahl li .bezeichnung .zusatzlink {
																		display: block;
																		/* font-size: 13px; */
																}
																		.zeilenwahl li .bezeichnung .zusatzlink a {
																				color: #888888;
																				text-decoration: none;
																				border-bottom: 1px dashed #888888;
																		}
																.zeilenwahl li .checkpreis {
																		display: none;
																}
																.zeilenwahl li .erklaerungKurz {
																		display: none;
																}
														.zeilenwahl li .icons {
																flex: 0 0 auto;
																display: flex;
																align-items: center;
																justify-content: center;
																gap: 24px;
																
														}
																.zeilenwahl li .price {
																		flex: 0 0 auto;
																		text-align: left;
																}
																.zeilenwahl li .info {
																		flex: 0 0 auto;
																		cursor: pointer;
																		text-align: center;
																}

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


								@media (max-width: 500px) {
										/* Modelle und Befestigung */
										.scrollhorizontal {
												overflow: auto;
												padding-bottom: 1em;		/* um die Scrollbar etwas nach aussen zu bringen */
										}
												.zeilenwahl {
														display: flex;
														gap: 8px;
												}
												.zeilenwahl.onlyOneElement {
														justify-content: center;		/* relevant bei nur einem Modell, z.B. LyselHome bei der Modellwahl gibt es nur ein Modell. - das geht leider nicht fuer mehrere Modelle, weil der Scrollbalken da mittig, statt links startet */
												}
														.zeilenwahl li {
																display: block;
																border: 1px solid #CFCECE;
																border-radius: 6px;
																box-sizing: border-box;
																padding: 1em;
																flex: 0 0 216px;
														}
														.zeilenwahl li.active {
																border: 1px solid #006AE5;
														}
																.zeilenwahl li label {
																		display: grid;
																		grid-template-columns: 1fr 1fr;
																		gap: 10px;
																		grid-template-areas:
																				"bezeichnung bezeichnung" 
																				"img checkpreis"
																				"erklaerungKurz erklaerungKurz"
																		;
																		font-size: 1em;		/* steht im RTS-Layout auf 0.9em */
																}
																.zeilenwahl li label.weitere, .befestigung li label.weitere {
																		grid-template-columns: 1fr 40px;
																		grid-template-areas:
																				"bezeichnung bezeichnung" 
																				"weitere checkpreis"
																		;
																		gap: 5px;
																}
																		.zeilenwahl li label.weitere .uebersicht, .befestigung li label.weitere .uebersicht {
																				opacity: 0.7;
																		}
																.zeilenwahl li.active label.weitere, .befestigung li.active label.weitere {
																}
																		.zeilenwahl li.active label.weitere .uebersicht, .befestigung li.active label.weitere .uebersicht {
																				opacity: 1;
																		}
																		.zeilenwahl li .input {
																				display: none;
																		}
																		.zeilenwahl li .img {
																				grid-area: img;
																				margin: 0;
																				width: 120px;
																		}
																		.zeilenwahl li .bezeichnung {
																				grid-area: bezeichnung;
																				padding: 0;
																				text-decoration: underline;
																		}
																				.zeilenwahl li .zusatz {
																						display: none;
																				}
																				.zeilenwahl li.active .bezeichnung {
																						color: #006AE5;
																						text-decoration: none;
																				}
																		.zeilenwahl li .checkpreis {
																				grid-area: checkpreis;
																				display: block;
																				text-align: center;
																				font-weight: bold;
																		}
																				.zeilenwahl li .checkpreis .icon_checked {
																						display: block;
																						margin-bottom: 1em;
																				}
																				.zeilenwahl li .checkpreis .preis2 {
																						display: block;
																						white-space: nowrap;
																				}
																		.zeilenwahl li .erklaerungKurz {
																				grid-area: erklaerungKurz;
																				display: block;
																				background-color: #F8F4C6;
																				text-align: center;
																				padding: 7px;
																				font-size: 14px;
																				font-weight: 400;
																				margin-top: 2em;
																		}
																		.zeilenwahl li .erklaerungKurz:empty {
																				background-color: transparent;
																				height: 1.2em;
																		}
																		.zeilenwahl li .weitere, .befestigung li .weitere {
																				grid-area: weitere;
																		}
																				.zeilenwahl li .weitere .line, .befestigung li .weitere .line {
																						display: flex;
																						align-items: center;
																						margin-top: 1em;
																						gap: 0.5em;
																				}
																						.zeilenwahl li .weitere .line .img, .befestigung li .weitere .line .img {
																								flex: 0 0 24px;
																								width: 24px;
																						}
																								.zeilenwahl li .weitere .line .img img, .befestigung li .weitere .line .img img {
																										width: 100%;
																								}
																						.zeilenwahl li .weitere .line .bez, .befestigung li .weitere .line .bez {
																								flex: 1 0 0;
																						}
																.zeilenwahl li .icons {
																		margin-top: 1em;
																}
																		.zeilenwahl li .price {
																				display: none;
																		}
								}




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

								@media (max-width: 500px) {
										.groupButtonsBottom {
												display: none;
										}
								}


								#linkDesignwahl {
										display: inline-block;
								}
								#linkDesignwahl_1 {
										margin-top: 1em;
										display: none;
								}


						#group_masseingabe {
								display: flex;
								gap: 3em;
						}
								#group_masseingabe .left {
										flex: 0 0 auto;
								}
								#group_masseingabe .right {
										flex: 1 1 0;
								}
										#group_masseingabe label {
												display: block;
												margin-top: 1.5em;
										}
												#group_masseingabe label > * {
														vertical-align: middle;
												}
												#group_masseingabe .mass_bez {
														display: inline-block;
														width: 122px;
												}
												#group_masseingabe .mass_umrechnung {
														color: #888888;
												}
												#group_masseingabe .mass_grenze {
														font-size: 80%;
														color: #888888;
														margin-left: 1em;
												}
												@media (max-width: 500px) {
														#group_masseingabe .mass_umrechnung {
																min-width: 8ex;
																display: inline-block;	/* so dass min-width greift */
														}
												}
										#ansicht_1 .linkMasseingabeMessanleitung {
												margin-bottom: 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;
										}
										@media (max-width: 700px) {
												#group_masseingabe .mass_bez {
														width: auto;
												}
										}
										@media (max-width: 600px) {
												#group_masseingabe .mass_grenze {
														display: block;
												}
										}
										@media (max-width: 500px) {
												#group_masseingabe .mass_grenze {
														margin-top: 4px;
												}
												#group_masseingabe input[type=number], #group_masseingabe input[type=text] {		/* number oder text - je nachdem was es letztendlich fuer ein Feld wird */
														background-color: #ffffff;
														box-shadow: inset 0px 3px 6px #0000005C;
														border: 1px solid #CFCECE;
														border-radius: 4px;
												}
												#group_masseingabe input[type=number]:out-of-range {
														outline: 2px solid #ff0000;
												}
										}

						#masseingabe_soforthinweise {
								display: none;
								margin-top: 1em;
								margin-bottom: 2em;
								padding: 1em;
								border: 1px solid #bb0000;
						}

						.groupPakethoehe {		/* Ansicht 1 und 2 */
								display: none;
								margin-top: 4em;
								cursor: default;
						}
								.groupPakethoehe img {
										vertical-align: middle;
								}


						@media (max-width: 500px) {
							
								#group_masseingabe {
										flex-direction: column-reverse;
								}		
										#group_masseingabe .left {
												text-align: center;
										}
												#masseingabe_bemassung {
														width: 60%;
												}
										#group_masseingabe .right {
												text-align: center;
												display: flex;
												flex-direction: column;
										}
												#linkMasseingabeMessanleitung {
														order: 4;
												}
												#masseingabe_masse {
														order: 1;
												}
												#masseingabe_soforthinweise {
														order: 2;
														margin-top: 0;
														margin-bottom: 1em;
												}
												.groupPakethoehe {
														order: 3;
														margin-top: 1em;
														margin-bottom: 2em;
												}

												#group_masseingabe .mass_bez strong {
														color: #006AE5;
												}
												  #group_masseingabe label
												, #group_masseingabe input[type=number], #group_masseingabe input[type=text]
												{
														font-size: 16px;
												}
												#group_masseingabe input[type=number], #group_masseingabe input[type=text] {
														padding: 13px;
														width: 9ex;
														margin-left: 0.5em;
														margin-right: 0.5em;
												}
												#group_masseingabe input[type=number]:focus, #group_masseingabe input[type=text]:focus {
														outline: 1px solid #006AE5;
												}
												#group_masseingabe label {
														margin-top: 2px;		/* eigentlich 0, aber default die Outline vom Betreten des Feldes wird sonst oben abgeschnitten */
														margin-bottom: 2em;
												}
										#group_masseingabe .linkMasseingabeMessanleitung {
												background-color: #006AE5;
												border-radius: 4px;
												width: calc(100% - 2em);
												box-sizing: border-box;
												padding: 1em;
												font-size: 16px;
												margin-left: 1em;
												margin-right: 1em;
										}
												#group_masseingabe .linkMasseingabeMessanleitung .btnPfeil {
														background-position: 85% center;
												}

						}

						#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 .beidesWechseln {
										color: #0000aa;
										background-color: #ddddff;
								}
										/*
										#wahl_dachfenster .beidesWechseln:after {
													content: " 12)";
													vertical-align: super;
													font-size: 70%;
										}
										*/
								#wahl_dachfenster .comfortWechseln {
										color: #000055;
										background-color: #ddddff;
								}
										/*
										#wahl_dachfenster .comfortWechseln:after {
													content: " 1)";
													vertical-align: super;
													font-size: 70%;
										}
										*/
								#wahl_dachfenster .systemWechseln {
										color: #000055;
										background-color: #ddddff;
								}
										/*
										#wahl_dachfenster .systemWechseln:after {
													content: " 2)";
													vertical-align: super;
													font-size: 70%;
										}
										*/
								#wahl_dachfenster .comfortOderSystemWechseln {
										color: #000055;
										background-color: #ddddff;
								}
										/*
										#wahl_dachfenster .comfortOderSystemWechseln:after {
													content: " 1/2)";
													vertical-align: super;
													font-size: 70%;
										}
										*/

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

						#hinweisMasseingabe {
								display: none;
								margin-top: 2em;
								background-color: #fdf8f8;
								font-size: 90%;
								padding: 1em;
						}
						@media (max-width: 500px) {
								#hinweisMasseingabe {
										background-color: #F8F4C6;
										margin-left: 2em;
										margin-right: 2em;
										box-shadow: 0px 3px 6px #00000029;
										/* border-radius: 6px; */	/* wenn die Sprechblasen-Ecke dran ist, dann hier an dieser Ecke kein border-radius */
										border-top-right-radius: 6px;
										border-bottom-left-radius: 6px;
										border-bottom-right-radius: 6px;
										margin-bottom: 6px;		/* der Schatten wird sonst unten abgeschnitten */
										position: relative;		/* fuer das Sprechblasen-Dreieck oben links */
								}
								#hinweisMasseingabe:before {
										content: ' ';
										position: absolute;
										width: 0;
										height: 0;
										left: -15px;
										top: 0;
										border-left: 15px solid transparent;
										border-top: 20px solid #F8F4C6;
								}
										#hinweisMasseingabe li {
												color: #000000;
										}
						}
								.boxIconLeft {
										display: flex;
										align-items: center;
								}
										.boxIconLeft > .left {
												flex: 0 0 auto;
												padding: 1em;
										}
										.boxIconLeft > .right {
												flex: 1 1 0;
										}
										@media (max-width: 500px) {
												.boxIconLeft > .left {
														display: none;
												}
										}

												.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: -1ex;
														}
														#hinweisMasseingabeList > li:before {
																content: "\002D\0020";
														}
												@media (max-width: 500px) {
														.hinweisMasseingabeUeberschrift {
																font-size: 16px;
														}
																.hinweisMasseingabeUeberschrift img {
																		vertical-align: bottom;
																}
														#hinweisMasseingabeList > li {
																margin-top: 1em;
																text-indent: 0;
														}
														#hinweisMasseingabeList > li:before {
																content: "";
														}
												}

						.groupOptionen {
								display: none;
								margin-top: 3em;
								margin-bottom: 1em;
						}
						.groupZubehoer {
								display: none;
								margin-bottom: 2em;
								width: 225px;
								padding-right: 33px;
								margin-right: 35px;
								border-right: 1px solid #cecece;
								vertical-align: top;
						}
						.groupZubehoer:last-child {		/* beruecksichtigt leider display:none-Elemente so als waeren sie display:irgendwas - z.B. wenn das letzte Elemet diplay:none ist, greift das css:last-child trotzdem auf das letzte (ausgeblendete) Element - fuer unsere Zwecke hier sollte es aber so reichen */
								margin-right: 0;
								border-right: none;
						}
								.groupZubehoerWrapImg {
										margin-top: 10px;
								}
										.groupZubehoerImg {
												float: left;
												width: 169px;
												height: 169px;
												border: 3px solid #cecece;
										}
										.groupZubehoerIcon {
												float: left;
												margin-left: 24px;
												cursor: pointer;
												margin-bottom: 5px;
										}
								.groupZubehoer select {
										width: 100%;
										margin-top: 10px;
										border: 1px solid #cecece;
										background-color: #ececec;
										color: #000000;
										padding: 4px;
								}
								#auswahlAusgleichskeil {
										margin-bottom: 0.5em;
								}

						#groupFalz {
								margin-top: 1em;
						}

						/*
						.einrueckung_mobile {
							
						}
						*/

						#auswahlSchienenprofil label img {
								width: 113px;
								height: 113px;
						}

						#auswahlProfilfarbe, #auswahlSchienenprofil, #groupFalz {
								display: flex;
								gap: 24px;
								align-items: flex-start;
						}

								#auswahlProfilfarbe label, #auswahlSchienenprofil label, #groupFalz label {
										text-align: center;
								}
										#auswahlProfilfarbe label img {
												margin-bottom: 0.3em;
										}
										@media (max-width: 500px) {
												#auswahlProfilfarbe label img {
														/* abgerundete Ecken */
														border-radius: 2px;
														outline: 2px solid #ffffff;
												}
										}
										#auswahlProfilfarbe label input[type=radio] {
												margin-top: 0.3em;
										}
								#infoSchienenprofilPlus {
										cursor: pointer;
										vertical-align: top;
								}

						@media (max-width: 500px) {
								.einrueckung_mobile {
										padding-left: 6vw;
										padding-right: 6vw;
								}
										#auswahlProfilfarbe, #auswahlSchienenprofil, #groupFalz {
												justify-content: space-between;
												gap: 0;
										}
										#auswahlProfilfarbe.wenig {
												justify-content: space-evenly;
										}
						}


					.flexTable {
							/*
									- Motor-Uebersichts-Tabelle WabeXL
							*/
					}

							.flexTable > * {
									display: flex;
									justify-content: space-between;
									align-items: stretch;
							}
							#konfiguratorGesamt .flexTable > * {
									font-size: 90%;
							}
							#konfiguratorGesamt.elemLt800 .flexTable > * {
									font-size: 80%;
							}
							#konfiguratorGesamt.elemLt650 .flexTable > * {
									font-size: 70%;
							}
							.flexTable > .active {
									background-color: #fafafa;
							}
							.flexTable > .ueberschriftGroup {
									color: #888888;
									text-align: center;
							}
									.flexTable > .ueberschriftGroup .empty {
											flex: 6 0 0px;
											/*
											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.flexTableOhnePreis > .ueberschriftGroup .empty{
										flex: 5 0 0px;
									}
									.flexTable > .ueberschriftGroup .stromversorgung {
											flex: 2 0 0px;
											border-left: 1px solid #f1f1f1;

											padding-right: 1px;		/* Die Breite aller zusammengefassten border */
									}
									.flexTable > .ueberschriftGroup .steuerung {
											flex: 4 0 0px;
											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 0px;
											padding-left: 0px;
											padding-right: 0px;
									}
									.flexTable > .ueberschriftGroup .steuerung.anzahl2 {
											flex: 2 0 0px;
											padding-left: 0px;
											padding-right: 1px;
									}
									.flexTable > .ueberschriftGroup .steuerung.anzahl3 {
											flex: 3 0 0px;
											padding-left: 1px;
											padding-right: 1px;
									}
									.flexTable > .ueberschriftGroup .steuerung.anzahl4 {
											flex: 4 0 0px;
											padding-left: 2px;
											padding-right: 1px;
									}
									.flexTable > .ueberschriftGroup .steuerung.anzahl5 {
											flex: 5 0 0px;
											padding-left: 2px;
											padding-right: 2px;
									}
									.flexTable > .ueberschriftGroup .steuerung.anzahl6 {
											flex: 6 0 0px;
											padding-left: 3px;
											padding-right: 2px;
									}
							.flexTable > *.ueberschrift {
									color: #888888;
									text-align: center;
							}
							@media (max-width: 450px) {
									.flexTable > *.ueberschrift {
											font-size: 60% !important;
									}
							}
							@media (max-width: 350px) {
									.flexTable > *.ueberschrift {
											font-size: 50% !important;
									}
							}
									.flexTable label {
											display: flex;
											flex: 4 0 0px;
									}
									.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;
									}


									/*
											Hinweis IE11-Bug
											Bei der Flex-Massangabe muss fuer den IE11 an die letzte Zahl immer eine Einheit ran!
											Bsp.: "flex: 1 0 0px" statt "flex: 1 0 0"
									*/

									.flexTable > * .input {
											flex: 1 0 0px;
											text-align: center;
									}

									.flexTable > * .img {
											flex: 1 0 0px;
									}
											.flexTable > * .img img {
													width: 90%;		/* nicht volle Breite, so ist rechts noch Platz zur Schrift */
											}
									.flexTable > * .bezeichnung {
											flex: 2 0 0px;		/* wird in der Ueberschrift nicht ueberschrieben */
											text-align: left;
											align-items: flex-start;
											padding-left: 0.5em;
											padding-right: 0.5em;
									}
									.flexTable > * .bezeichnung.motor {
											flex: 2 0 0px;
									}
									.flexTable > * .bezeichnung.laenge {
											flex: 3 0 0px;
									}
									.flexTable > * .bezeichnung.ohne {
											flex: 12 0 0px;
									}
											.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 0px;
											text-align: center;
									}
											.flexTable > * .info img {
													cursor: pointer;
											}
									.flexTable > * .bedienlaenge {
											flex: 7 0 0px;
											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 0px;
											text-align: center;
											border-left: 1px solid #f1f1f1;
											cursor: default;
									}
									.flexTable > * .detail:last-child {
											border-right: 1px solid #f1f1f1;
									}
									#konfiguratorGesamt.elemLt800 .flexTable > * .detail img {		/* der Haken */
											width: 10px;
									}
									#konfiguratorGesamt.elemLt550 .flexTable > * .detail.lessSpaceNone {
											display: none;
									}

						.ansicht1reduziert {		/* Motorauswahl in der Ansicht1 (fuer mobiles Layout) Smartframe */
							
						}
								.ansicht1reduziert .box_motor {
										border: 1px solid #cccccc;
										border-radius: 4px;
										padding: 1em;
										margin-bottom: 1em;
										box-shadow: 0px 2px 4px 0px #CFCECE;
										cursor: pointer;
										display: flex;
										align-items: center;
										justify-content: space-between;
								}
								.ansicht1reduziert .box_motor.active {
										border: 1px solid #000000;
										box-shadow: none;
										cursor: default;
								}
										.ansicht1reduziert .info
										{
												/* display: none */
										}
								.box_motor_container_kompatibel {
										margin-top: 2em;
								}
										.box_motor_container_kompatibel_ueberschrift {
												font-weight: bold;
										}
										.box_motor_container_kompatibel_icons {
												margin-top: 1em;
												display: flex;
												justify-content: space-evenly;
										}
												.box_motor_container_kompatibel_icons img {
														height: 32px;
												}


						#infoGlasfalz {
								cursor: pointer;
								vertical-align: middle;
						}

						#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! */

		/* rts */
		#leisteNavigationWrap {
				position: static;
		}
		/* HR */
		#layout_header {
				position: static;
		}


		#modellbild_ueberschrift_flex {
				flex-direction: column;
		}


		/* einspaltig untereinander (und nicht mehr 2 Spalten) */
		/* Die Pixelbreite zur Aenderung sind auch in javascript eingebaut! */

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

						#modellbild_steuerung2d {
								position: static;
								width: 100%;
								box-sizing: border-box;
								height: auto;
								margin-top: 2em;
								margin-bottom: 1em;
						}
				#spalten2 #trenner {
						display: none;
				}
				#spalten2 #eingabe {
						margin-bottom: 0;
						padding-left: 2.7%;
						padding-right: 2.7%;
				}
						#accordion {
								margin-bottom: 2em;
						}


		#ansicht3D {
				/* mittig ausrichten */
				margin-left: auto;
				margin-right: auto;
		}

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

		.last_element {
				margin-bottom: 2em !important;
		}
}

@media (max-width: 500px) {

		#spalten2 {
				margin-top: 2em;
				flex-direction: column;
		}
				#spalten2 #eingabe {
						padding-left: 0;
						padding-right: 0;
				}
		#konfiguratorGesamt .eingabeBox {
				margin-left: 0em;	/* statt 2em */
		}



		#mobile_top {
				display: block;
				background-color: #444444;
				border-top: 4px solid #000000;
				text-align: right;
				padding-top: 4px;
				padding-bottom: 4px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #ffffff;
		}
				#mobile_top .left {
						flex: 0 0 auto;
						display: flex;
						align-items: center;
				}
						#mobile_top_exit {
								padding-left: 16px;
								padding-right: 16px;
								cursor: pointer;
						}
				#mobile_top .center {
						flex: 0 1 auto;
						text-align: center;
				}
						#mobile_top_ueberschrift1 {
								font-size: 14px;
								font-weight: 400;
						}
						#mobile_top_ueberschrift2, #mobile_top_ueberschrift3 {
								font-size: 12px;
								font-weight: 300;
								cursor: pointer;
								color: #CFCECE;
						}
								#mobile_top_ueberschrift2_icon img, #mobile_top_ueberschrift3_icon img {
										vertical-align: bottom;
								}
						#mobile_top_ueberschrift3 {
								display: none;
						}
				#mobile_top .right {
						flex: 0 0 auto;
				}
						#mobile_top_price {
								font-size: 14px;
								font-weight: 500;
								padding-left: 16px;
								padding-right: 16px;
						}
		#mobile_navigation {
				display: block;
				padding-top: 0.5em;
				padding-left: 1em;
				padding-right: 1em;
		}
		#konfiguratorGesamt .bereichsueberschrift {
				display: none;
		}
		#accordion {
				margin-bottom: 0;
		}

		#modellbild_steuerung {
				padding-bottom: 0;
				border-bottom: none;
		}

}




.ansichtStoff {
		overflow: auto;
		max-width: 900px;
		margin: auto;
		text-align: left;
		padding-right: 1em;		/* Platz zwischen Text und evtl. eingeblendetem Scrollbalken */
}
@media (max-width: 2100px) {
		.ansichtStoff {
				max-width: 800px;
		}
}
@media (max-width: 2000px) {
		.ansichtStoff {
				max-width: 750px;
		}
}
@media (max-width: 1900px) {
		.ansichtStoff {
				max-width: 720px;
		}
}
@media (max-width: 1800px) {
		.ansichtStoff {
				max-width: 700px;
		}
}

		.stoff_bild img {
				width: 100%;
				max-width: 300px;
		}

		.stoff_ueberschrift {
				color: #444444;
				margin-bottom: 1em;
				text-align: left;
		}
		.stoff_group {
				display: flex;
				gap: 45px;
		}
		.ansichtStoff.elemLt600 .stoff_group {
				display: block;
		}
				.stoff_bild {
						text-align: left;
						flex: 0 0 300px;
						overflow: hidden;
				}
				.ansichtStoff.elemLt600 .stoff_bild {
						text-align: center;
				}
				.stoff_box {
						text-align: left;
						flex: 1 1 400px;
						overflow: auto;
						padding-right: 1em;		/* Abstand zu eventuellem Scrollbalken */
				}
				.ansichtStoff.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;
						}
						.ansichtStoff.elemLt600 .stoff_box_ueberschrift:first-child {
								margin-top: 2em;
						}

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


#extrafenster {
		display: none;
}

		.extrafenster {
				background-color: #ffffff;
				color: #444444;
				height: 100%;
				box-sizing: border-box;
		}
		#fensterModell, .fensterDesign, #fensterAnfrage, #fensterSchienenprofilPlus, #fensterSensunclipGrosseplisseebreite, #fensterBedienstab, #fensterKurbel {			/* nicht alle .extrafenster */
				padding: 2em;
		}
		#fensterModell, .fensterDesign {
				display: flex;
				flex-direction: column;
		}
		@media (max-width: 800px) {
				#fensterModell, .fensterDesign, #fensterAnfrage, #fensterSchienenprofilPlus, #fensterSensunclipGrosseplisseebreite, #fensterBedienstab, #fensterKurbel {			/* nicht alle .extrafenster */
						padding: 1em;
				}
		}
				.fensterDesign input[type="checkbox"] {
						vertical-align: middle;
				}
				.extrafenster .head {
						padding-bottom: 1em;
						border-bottom: 1px solid #cecece;
						flex: 0 0 auto;
				}
				@media (max-width: 500px) {
						.extrafenster .head {
								border-bottom: 0;
						}
				}
						.extrafenster .head .left {
								float: left;
						}
						.extrafenster .head .right {
								float: right;
						}
								.extrafensterClose {
										cursor: pointer;
								}
						.extrafenster h2 {
								font-size: 18px;
								padding: 0;
								margin: 0;
						}
						@media (max-width: 500px) {
								.extrafenster h2 {
										font-weight: bold;
										font-size: 16px;
								}
						}
						.fensterZweiSpalten {
								display: flex;
								flex: 1 0 0;
								overflow: auto;
								height: 100%;
						}
								.fensterZweiSpalten > .buttonAusklapp {
										display: none;

										position: absolute;
										left: 0px;
										z-index: 2;
										font-weight: bold;
										cursor: pointer;
										top: 100px;
								}

								.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 */
								}
								@media (max-width: 500px) {
										.fensterZweiSpalten > .right {
												padding-left: 0;
												padding-top: 0;
										}
								}
								.fensterDesign .fensterZweiSpalten > .left {
										flex: 0 1 290px;
								}
								#fensterModell .fensterZweiSpalten > .left {
										flex: 0 1 390px;
								}
								.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 0px;
								}
								#fensterModell .fensterZweiSpalten > .right {
										flex: 1 1 auto;

										padding-right: 2.5%;		/* nur bei dem Modell-Fenster - bei den Stoff sparen wir uns den Platz fuer die Anzeige */
								}
								@media (max-width: 1200px) {
										#fensterModell .fensterZweiSpalten > .right {
												padding-right: 0;
										}
								}
						@media (max-width: 1000px) {
								/* ab hier die links Spalte zum einklappen */
								.fensterDesign .fensterZweiSpalten {
										display: block;
										position: relative;
								}
								.fensterDesign .fensterZweiSpalten > .buttonAusklapp {
										/* siesen Button gibt es nur noch im Bereich 500 - 1000px */
										display: block;
								}
										.fensterZweiSpalten > .buttonAusklapp img {
												height: 40px;
												display: block;
										}
								.fensterDesign .fensterZweiSpalten > .left {
										position: absolute;
										left: 0;
										top: 0;
										background-color: #ffffff;
										width: 0;
										padding-right: 0;
										z-index: 10;
								}
						}
						@media (max-width: 800px) {
								/* ab hier die links Spalte zum einklappen */
								#fensterModell .fensterZweiSpalten {
										display: block;
										position: relative;
								}
								#fensterModell .fensterZweiSpalten > .buttonAusklapp {
										display: block;

								}
								#fensterModell .fensterZweiSpalten > .left {
										position: absolute;
										left: 0;
										top: 0;
										background-color: #ffffff;
										width: 0;
										padding-right: 0;
										z-index: 1;
								}
								#fensterModell .fensterZweiSpalten > .right {
										padding: 0;
								}
						}
						@media (max-width: 500px) {
								.fensterDesign .fensterZweiSpalten > .buttonAusklapp {
										display: none;
								}
								.fensterDesign .fensterZweiSpalten > .left {
										border-right: 0;
								}
							
						}
										.formFilter h3 {
												font-size: 16px;
												border-bottom: 1px solid #cecece;
												padding-bottom: 0.5em;
												margin-top: 13px;
												margin-bottom: 13px;
										}
										#fensterModell .formFilter h3 {		/* nur Modelle-Wahl nicht Stoffe-Wahl */
												margin-top: 0;
										}
										.formFilter .group {
												margin-bottom: 1.2em;
										}

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

										.fensterModellDetails {
												display: flex;
												margin-top: 1.5em;
												flex-direction: row;
										}
												.fensterModellDetails .left {
														flex: 0 1 370px;
														text-align: center;
												}
														.fensterModellDetails .left img.fensterModellDetailsModellbild {
																width: 170px;
														}
												.fensterModellDetails .right {
														flex: 1 1 auto;
												}
														.fensterModellDetails .right .tabs.elemLt700 .noTab .bez {
																display: none;
														}
														.fensterModellDetails .right .tabs.elemLt530 .bez {
																display: none;
														}
														.fensterModellDetails .tabFenster ul {
																margin: 0;
																padding: 0;
														}
										.fensterModellDetails.elemLt550 {
												flex-direction: column;
										}
												.fensterModellDetails.elemLt550 .left {
														flex: 0 1 auto;
														margin-bottom: 1em;
												}
										.fensterModellDetails.alternativ {

										}
												.fensterModellDetails.alternativ > .left {
														opacity: 0.1;
												}

						.filterMobile {
								display: none;
						}
						@media (max-width: 500px) {
								.filterMobile {
										display: block;
										background-color: #006AE5;
										border-radius: 3px 0px 0px 3px;
										box-shadow: 0px 2px 4px #000000A3;
										color: #ffffff;
										position: fixed;
										right: 0;
										bottom: 2em;
										text-align: center;
										padding: 0.5em;
										cursor: pointer;
								}
						}
						.extrafensterDetailsBottom {
								text-align: right;
						}
								.extrafensterDetailsBottom .abpreis {
										font-size: 16px
								}

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

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


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

										#fensterModell .iconModellauswahlFilter {
												width: 57px;
												height: 57px;
										}
												#fensterModell .fensterZweiSpalten .left .auswahl {
														display: grid;
														grid-template-columns: repeat(auto-fill, minmax(92px, 1fr))
												}
														#fensterModell .fensterZweiSpalten .left label {
																display: inline-block;
																text-align: center;
																vertical-align: top;
																margin-bottom: 1em;
														}
																#fensterModell .fensterZweiSpalten .left label.ausgegraut {
																		opacity: 0.1;
																		cursor: not-allowed;
																}

										@media (max-width: 1100px) {		/* links alles kleiner machen */
												#fensterModell .fensterZweiSpalten .left .auswahl {
														display: grid;
														grid-template-columns: repeat(auto-fill, minmax(62px, 1fr))
												}
														#fensterModell .iconModellauswahlFilter {
																width: 50px;
																height: 50px;
														}

										}

								.listDesigns {
										overflow: auto;
										height: 100%;
								}
										.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;
														}
														@media (max-width: 500px) {
																.listDesigns .zwischenueberschrift .logobezeichnung {
																		display: none;
																}
														}
																.listDesigns .zwischenueberschrift .logobezeichnung .logo {
																		flex: 0 1 auto;
																		margin-right: 2em;
																}
																		.listDesigns .zwischenueberschrift .logobezeichnung .logo > img {
																				max-width: 100%;
																				max-height: 100px;
																		}
																.listDesigns .zwischenueberschrift .logobezeichnung .bezeichnung {
																		flex: 1 1 auto;
																}

												.listDesigns .zwischenueberschrift .ansicht {
														float: right;
														margin-top: 1em;		/* insbesondere relevant bei kleinen Bildschirmen, wenn das Logo und diese Box untereinander, statt nebeneinander, sind */
												}

														.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;
																		white-space: nowrap;
																		box-sizing: content-box;

																		-webkit-user-select: none;
																		user-select: none;
																}
																.listDesigns .zwischenueberschrift .ansicht_wahl .button:hover {
																		color: #444444;
																}
																		.listDesigns .zwischenueberschrift .ansicht_wahl input {
																				display: none;
																		}
																		.listDesigns .zwischenueberschrift .ansicht_wahl .button > * {
																				vertical-align: middle;
																		}
																		.listDesigns .zwischenueberschrift .ansicht_wahl .button > img {
																				display: none;
																				width: 11px;
																				height: 10px;
																				margin-left: 1em;
																		}

																		.listDesigns .zwischenueberschrift .ansicht_wahl input:checked + .button {
																				color: #ffffff;
																				background-color: #3781bd;
																				border: 1px solid #3781bd;
																		}
																				.listDesigns .zwischenueberschrift .ansicht_wahl input:checked + .button > img.bright {
																						display: inline;
																				}
										@media (max-width: 500px) {
												.listDesigns:before {
														display: none;
												}
												.listDesigns:after {
														display: none;
												}
												.listDesigns .zwischenueberschrift {
														margin-top: 0;
														text-align: center;
												}
														.listDesigns .zwischenueberschrift .ansicht {
																float: none;
														}
																.listDesigns .zwischenueberschrift .ansicht_bezeichnung {
																		font-weight: 500;
																		font-size: 14px;
																}
																		.listDesigns .zwischenueberschrift .ansicht_wahl .button {
																				color: #ffffff;
																				background-color: #454545;
																				box-shadow: 0px 3px 6px #454545A3;
																				border-radius: 4px;
																				border: 1px solid #454545;
																				padding: 0.3em;
																				height: auto;
																				line-height: normal;
																				box-sizing: content-box;
																				font-size: 14px;
																		}
																		.listDesigns .zwischenueberschrift .ansicht_wahl .button:hover {
																				color: #ffffff;
																		}
																		.listDesigns .zwischenueberschrift .ansicht_wahl input:checked + .button {
																				color: #454545;
																				background-color: #ffffff;																			
																				box-shadow: none;
																				border: 1px solid #b7b7b7;
																		}
																				.listDesigns .zwischenueberschrift .ansicht_wahl input:checked + .button > img.bright {
																						display: none;
																				}
																				.listDesigns .zwischenueberschrift .ansicht_wahl input:checked + .button > img.dark {
																						display: inline;
																						width: 17px;
																						height: 17px;
																				}
										}
										.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: grid;
										grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
										grid-column-gap: 2%;
								}

										.listDesignsMarke .listDesignsDesign {
												padding-right: 6%;
												border-right: 1px solid #cecece;
												margin-right: 2%;
												margin-bottom: 2.45em;
												vertical-align: top;
										}
								@media (max-width: 500px) {
										.listDesignsMarke {
												width: 90%;
												margin-left: auto;
												margin-right: auto;
												grid-column-gap: 5%;
										}
												.listDesignsMarke .listDesignsDesign {
														border-right: 0;
														margin-left: 0;
														margin-right: 0;
														padding-right: 0;
														margin-right: 0;
												}
								}
												.listDesignsMarke .listDesignsAreaActivateDetails {
														cursor: pointer;
														position: relative;
												}
														.listDesignsMarke .listDesignsGroupBilder > img {
																float: right;
														}
																.listDesignsMarke .listDesignsDesign .listDesignsDesignbild {
																		float: left;
																		margin-right: 5px;
																		margin-bottom: 1em;
																		position: relative;
																		overflow: hidden;
																}
																@media (max-width: 500px) {
																		.listDesignsMarke .listDesignsDesign .listDesignsDesignbild {
																				margin-right: 0;
																		}
																}
																		.listDesignsMarke .listDesignsDesign .listDesignsDesignbild img {
																				display: block;
																				width: 100%;
																				min-height: 180px;		/* wenn das Bild fehlt */
																		}
																		.listDesignsMarke .listDesignsDesign .listDesignsDesignbild .ribbon {
																				display: block;
																				position: absolute;
																				top: 1rem;
																				left: -1.8rem;
																				background-color: #357dbc;
																				color: #ffffff;
																				transform: rotate(315deg);
																				padding-top: 0.2rem;
																				padding-bottom: 0.2rem;
																				padding-left: 2rem;
																				padding-right: 2rem;
																				font-size: 0.8rem;
																				font-weight: 600;
																		}
																.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;
										}
										@media (max-width: 500px) {
												.listDesignsMarke .listDesignsBoxDetails {
														border-left: none;
														border-right: none;
														padding-left: 0;
														padding-right: 0;
														padding-top: 1em;
														padding-bottom: 2em;
												}
										}
										.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 > .right .logo img {
																max-width: 100%;
														}
														.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  */
												}
												@media (max-width: 500px) {
														.listDesignsMarke .listDesignsBoxDetails .design_big_bildbox {
																height: auto;
														}
												}
												.listDesignsMarke .listDesignsBoxDetails.elemLt550 .design_big_bildbox {
														width: 180px;
												}
												.listDesignsMarke .listDesignsBoxDetails.elemLt500 .design_big_bildbox {
														/* hier jetzt untereinander */
														margin-left: auto;
														margin-right: auto;
														margin-bottom: 1em;
														width: 200px;

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


								.listDesignsMarke .listDesignsBez, .listDesigns .listDesignsErsetztbez {
										font-size: 11px;
										color: #888888;
								}
								@media (max-width: 500px) {
										.listDesignsMarke .listDesignsBez, .listDesigns .listDesignsErsetztbez {
												font-size: 13px;
												color: #454545;
										}
								}
								.listDesignsMarke .listDesignsErsetztbez {
										font-style: italic;
								}
								.listDesignsMarke .abpreis {
										text-align: right;
										font-weight: bold;
										margin-top: 4px;
										margin-bottom: 2px;
								}
								@media (max-width: 500px) {
										.listDesignsMarke .abpreis {
												margin-bottom: 4px;
										}
								}

								  .listDesignsMarke .listDesignsDesign .listDesignsDesignbild
								, .listDesignsMarke .infoDetailansicht
								, .listDesignsMarke .listDesignsGroupBottom
								, .listDesignsMarke .listDesignsDesign .uebernehmen
								{
										/* width: 150px; */
										width: 82%;
								}
								@media (max-width: 500px) {
										  .listDesignsMarke .listDesignsGroupBottom
										, .listDesignsMarke .listDesignsDesign .uebernehmen
										{
												width: 100%;
										}
								}

								.listDesignsMarke .infoDetailansicht {
										position: absolute;
										left: 0;
										text-align: center;
										top: 77px;
										display: none;
								}
										.listDesignsMarke .infoDetailansicht img {
												width: 23px;
										}
								.listDesignsMarke .listDesignsDesign .uebernehmen {
										text-align: right;
								}
										.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;
												font-size: 13px;
										}
										.listDesignsMarke .listDesignsDesign .uebernehmen > div:hover {
												background-color: #3580bb;
												color: #ffffff;
										}

										@media (max-width: 500px) {
												.listDesignsMarke .listDesignsDesign .uebernehmen > div {		/* .listDesignsUebernehmenButton */
														background-color: #000000;
														color: #ffffff;
														border-radius: 4px;
														padding: 0.6em;
														display: block;
														font-size: 16px;
														text-align: center;
												}
										}


						.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: -2.1rem;
						margin-left: 2.1rem;
						margin-top: 5px;
						margin-bottom: 5px;
				}


				/* Stofflisting Zwischenueberschrift - und Stofflisting-Detailbereich */
				.fensterDesign .logo {
						display: inline-block;
						position: relative;
						max-width: calc(100% - 1em);
				}
						.fensterDesign .logo .claim {
								font-size: 12px;
								right: -1px;
								letter-spacing: 2.9px;
								text-transform: uppercase;
								position: absolute;
								bottom: 3px;
								color: #000000;
						}

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

						.suche {		/* .fensterDesign, sowie #fensterModell */
								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%;
				}

				.fensterDesign .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;
						box-sizing: content-box;
				}
				.fensterDesign .farbbox.beige { background-color: #d4be8d; color: #ffffff; }
				.fensterDesign .farbbox.blau { background-color: #3485ff; color: #ffffff; }
				.fensterDesign .farbbox.braun { background-color: #6f3e18; color: #ffffff; }
				.fensterDesign .farbbox.gelb { background-color: #fffc00; color: #888888; }
				.fensterDesign .farbbox.gruen { background-color: #73b525; color: #ffffff; }
				.fensterDesign .farbbox.orange { background-color: #ff6501; color: #ffffff; }
				.fensterDesign .farbbox.rosa { background-color: #ed008c; color: #ffffff; }
				.fensterDesign .farbbox.rot { background-color: #ea0001; color: #ffffff; }
				.fensterDesign .farbbox.schwarz { background-color: #000000; color: #ffffff; }
				.fensterDesign .farbbox.violett { background-color: #9349aa; color: #ffffff; }
				.fensterDesign .farbbox.weiss { background-color: #ffffff; color: #888888; }
				.fensterDesign .farbbox.grau { background-color: #838383; color: #ffffff; }

/* Extra-Befestigungsfenster */
.infoHead {
		font-size: 120%;
}
.infoCellBottom {

}
.infoCellBez {
		margin-top: 1em;
		margin-bottom: 1em;
}
	.infoCellBottom img[src$=".svg"] {		/* Klemmtrager Falzfix (nicht Lysel Falkenstein) */
			width: 300px;
			height: 300px;
			box-sizing: border-box;
			border: 1px solid #888888;
	}






.xArtikelsystem {
		/* ab jetzt mit dem Scrollcontainer einzeilig
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		grid-column-gap: 5%;
		grid-row-gap: 2em;
		*/

		display: flex;
		gap: 50px;
}
@media (max-width: 500px) {
		.xArtikelsystem {
				gap: 20px;
		}
}
		.xArtikelsystem .xArtikel {
				flex: 0 0 150px;
		}
				.xArtikelsystem .xArtikel .title {
						min-height: 2lh;
				}
				.xArtikelsystem .xArtikel .aufpreis {
						color: #3580bb;
						font-weight: bold;
				}
				.xArtikelsystem .xArtikel .main img {
						width: 100%;
				}
				.xArtikelsystem .xArtikel .footer {
						position: relative;
				}
						.xArtikelsystem .xArtikel .icon img {
								width: 24px;
						}
						.xArtikelsystem .xArtikel input[type=number] {
								width: 2ch;
								box-sizing: content-box;
								text-align: right;
						}
						.xArtikelsystem .xArtikel .icon {
								position: absolute;
								right: 0;
								top: calc(50% - 12px);
						}













#fensterWarenkorb {

}
#fensterWarenkorb #fensterWarenkorb_top {
	/* padding: 40px; */
	padding: 8%;
}
	#fensterWarenkorb #fensterWarenkorb_top_left {
			float: left;
			width: 34%;
			position: relative;
	}
			#fensterWarenkorb #warenkorb_box_produktbild {
					/* width: 161px; */	/* es kam vor, dass die Bilder zu gross waren und hier nicht reingepasst haben */
					max-height: 340px;
					max-width: 161px;
			}
			#fensterWarenkorb #warenkorb_icon_hinzugefuegt {
					position: absolute;
					top: 50%;
					margin-top: -27px;
					left: 50%;
					margin-left: -27px;
					display: none;
			}
	#fensterWarenkorb #fensterWarenkorb_top_right {
			float: right;
			width: 64%;
	}
			#fensterWarenkorb #warenkorb_box_status {
					border-bottom: 1px solid #e6e6e6;
					padding-bottom: 7px;
					margin-bottom: 20px;
					font-size: 1.2em;
			}
			#fensterWarenkorb #warenkorb_box_titel {
					font-size: 1.1em;
					font-weight: bold;
			}
			#fensterWarenkorb #warenkorb_box_groesse {

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

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

/* aktuell haben wir keine aehnlichen Artikel zur Anzeige
#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;
					}
}









	.anfrageformular {
			margin-top: 2em;
	}

	.anfrageformular h1 {
			font-size: 14px;
	}

	.anfrageformular .gruppierung {
			margin-left: 5em;
			margin-top: 2em;
			margin-right: 5em;
			position: relative;
	}
			.anfrageformular .gruppierung > table {
					width: 100%;
					border-spacing: 0;
			}

			/* Formular Kopf */
			.anfrageformular .f_head {
					background-color: #888888;
					color: #ffffff;
					padding-left: 1em;
					padding-right: 1em;
					padding-top: 0.5em;
					padding-bottom: 0.5em;
					margin-top: 2em;
			}

			/* Formular Label */
			.anfrageformular .f_label {
					padding-top: 10px;
					vertical-align: top;
					width: 114px;
					padding-left: 0;
					padding-right: 0;
			}

			/* Formular Name */
			.anfrageformular .f_label_name {
					font-weight: bold;
			}

			/* Formular kurze Beschreibung zum Namen */
			.anfrageformular .f_label_desc {
					display: block;
					font-size: 10px;
			}

			/* Formular Eingabefeld */
			.anfrageformular .f_input {
					padding-top: 10px;
					padding-left: 0;
					padding-right: 0;
			}
					.anfrageformular .f_input input[name="adr1"] {
					}

			.anfrageformular textarea {
					width: 100%;
			}
			.anfrageformular input[name="adr1"], input[name="email"], input[name="tel"] {
					width: 263px;
			}
			@media (max-width: 450px) {
					.anfrageformular input[name="adr1"], input[name="email"], input[name="tel"] {
							width: 100%;
							box-sizing: border-box;
					}
			}

			#wahl_dachfenster .anfrageformular .wrapSubmit {
					text-align: right;
					margin-top: 1em;
					margin-bottom: 1em;
					padding-right: 0;
			}
			.anfrageformular .wrapSubmit button {
					background-color: #357dbc;
					color: #ffffff;
					/*border: 1px solid #b46e00;*/
					border: 0;
					padding: 0.5em;
					cursor: pointer;
					-webkit-appearance: none;		/* auf dem Iphone styled er den Button sonst sehr komisch (vordergrund weiss, hintergrund wie angegeben nur heller (soiegelnd), das ist aber zu hell, die Form ist sonst zu klein/rund) */
			}
					.anfrageformular .wrapSubmit button[disabled] {
							cursor: not-allowed;
							color: #999999;
					}

	@media (max-width: 740px) {
			.anfrageformular .gruppierung {
					margin-left: 0;
					margin-right: 0;
			}
	}

	.anfrageformular .msg_ok {
			color: #448844;
	}
	.anfrageformular .msg_err {
			color: #ff4444;
			font-weight: bold;
	}


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

	.window_wk_table_auswahl {
			border-spacing: 0;
			display: grid;
			grid-template-columns: 45% 45%;
			grid-gap: 5%;
			grid-template-rows: auto;
	}
			.window_wk_table_auswahl td {
					cursor: pointer;
					padding: 0;
			}
			.window_wk_ue_box {
					padding-top: 1em;
			}
					.window_wk_ue {
							font-weight: bold;
							font-size: 13px;
					}
			.window_wk_radiobox {
					border: 1px solid #d7d7d7;
					padding: 1em;
			}
					.window_wk_radiobox .window_wk_ue {
							color: #888888;
					}
					.window_wk_radiobox.selected .window_wk_ue  {
							color: #444444;
					}
					.window_wk_auswahlbox {
							display: flex;
							align-items: center;
					}
							.window_wk_auswahlbox > * {
									padding: 0.3em;
							}


	.window_wk_img {
			max-width: 100%;
			height: auto;
	}


	.msgboxhtml_buttons {
			margin-top: 0.5em;
			text-align: right;
	}

			.msgboxhtml_buttons > div {
					display: inline-block;
					text-decoration: underline;
					cursor: pointer;
					padding-top: 0.5em;
					padding-bottom: 0.5em;
					padding-left: 1em;
					padding-right: 1em;
			}

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

.window_mobile {
		padding: 13px;
		font-weight: 400;
}

		.window_mobile .btn {
				margin-top: 13px;
				border-radius: 4px;
				text-align: center;
				font-size: 16px;
				padding: 0.5em;
				cursor: pointer;
				display: flex;
				align-items: center;
		}
		.window_mobile .btnBlack {
				background-color: #000000;
				color: #ffffff;
				box-shadow: 0px 2px 4px #00000080;
		}
		.window_mobile .btnWhite {
				background-color: #ffffff;
				color: #000000;
				border: 1px solid #000000;
				box-shadow: 0px 2px 4px #CFCECE;
		}
		.window_mobile .btnTurquoise {
				background-color: #EDF2F5;
				color: #006AE5;
				border: 1px solid #006AE5;
				box-shadow: 0px 2px 4px #006AE542;
		}
				.window_mobile .btn .icon {
						flex: 1 0 0;
				}
				.window_mobile .btn .text {
						flex: 4 0 0;
				}


/* aus dachfenster-generierte-seiten.css */

.text_oben {

}

.text_unten {
		margin-top: 30px;
		margin-bottom: 20px;
		text-align: justify;
}

.dachfenster_ueberschrift  {
		font-size: 13px;
		color: #000000;
		text-align:left;
}

#text_vor_konfigurator {
		margin-bottom: 2em;
}

.text_vor_konfigurator {

}

/*
.dachfenster_liste {

}
*/
		.dachfenster_liste_2 li {
				float: left;
				width: 50%;
		}
		.dachfenster_liste_3 li {
				float: left;
				width: 33%;
		}


/* Dachfenster generierte Seiten */
#text_nach_konfigurator {
		margin-top: 8em;
}

@media (max-width: 500px) {
		  #text_vor_konfigurator
		, #text_nach_konfigurator {
				padding-left: 1em;
				padding-right: 1em;
		}
}




.fensterWahlModell {
		border-radius: 6px;
}
		.fensterWahlModell .fensterPremium_ueberschrift {
				background-color: #183B59;
				color: #ffffff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 4vh;
				padding-bottom: 4vh;
				padding-left: 3vw;
				padding-right: 3vw;
				font-size: 32px;
		}
		@media (max-width: 800px) {
				.fensterWahlModell .fensterPremium_ueberschrift {
						font-size: 26px;
				}
		}
		@media (max-width: 600px) {
				.fensterWahlModell .fensterPremium_ueberschrift {
						font-size: 20px;
				}
		}
		@media (max-width: 450px) {
				.fensterWahlModell .fensterPremium_ueberschrift {
						font-size: 16px;
				}
		}
				.fensterWahlModell .fensterPremium_ueberschrift > * {
						display: flex;
						justify-content: space-between;
						align-items: center;
				}
						.fensterWahlModell .fensterPremium_ueberschrift .rechts {
								border-radius: 6px;
								cursor: pointer;
								padding-left: 20px;
								padding-right: 20px;
								padding-top: 10px;
								padding-bottom: 10px;
								transition: 0.3s;
								font-size: 22px;
						}
						.fensterWahlModell .fensterPremium_ueberschrift .rechts:hover {
								background-color: #092238;
						}
								.fensterWahlModell .fensterPremium_ueberschrift .links img {
										width: 42px;
										height: 42px;
										margin-right: 30px;
								}
								@media (max-width: 800px) {
										.fensterWahlModell .fensterPremium_ueberschrift .links img {
												width: 32px;
												height: 32px;
												margin-right: 20px;
										}
								}
								.fensterWahlModell .fensterPremium_ueberschrift .links strong {
										margin-right: 0.5ch;
								}
								.fensterWahlModell .fensterPremium_ueberschrift .rechts img {
										width: 28px;
										height: 28px;
										margin-left: 20px;
								}
								@media (max-width: 800px) {
										.fensterWahlModell .fensterPremium_ueberschrift .rechts img {
												width: 22px;
												height: 22px;
										}
								}

		.fensterWahlModell .box {
				padding-bottom: 4vh;
				padding-left: 3vw;
				padding-right: 3vw;
				color: #183B59;
		}
		.fensterWahlModell .box, .fensterWahlModell button {
				font-size: 28px;
		}
		@media (max-width: 800px) {
				.fensterWahlModell .box, .fensterWahlModell button {
						font-size: 20px;
				}
				.fensterWahlModell .fensterPremium_ueberschrift .rechts {
						font-size: 20px;
				}
		}
		@media (max-width: 500px) {
				.fensterWahlModell .fensterPremium_ueberschrift .rechts {
						font-size: 18px;
				}
		}
				.fensterWahlModell .ueberschrift, .fensterWahlModell {
						
				}

						.fensterWahlModell .ueberschrift {
								margin-top: 42px;
								font-weight: bold;
								margin-bottom: 0.5em;
						}

		.fensterWahlModell button {
				margin-top: 1.5em;
				margin-bottom: 1em;
				border: none;
				border-radius: 6px;
				display: block;
				margin-left: auto;
				margin-right: auto;
				transition: 0.5s;
				color: #ffffff;
				background-color: #357DBC;
				padding-left: 1em;
				padding-right: 1em;
				padding-top: 0.5em;
				padding-bottom: 0.5em;
				cursor: pointer;
		}
				.fensterWahlModell button:hover {
						background-color: #388DD8 ;
				}

				.fensterWahlModell button img {
						margin-right: 10px;
				}