#konfiguratorGesamt {
		background-color: #ffffff;
		margin-top: 1em;
}



#konfiguratorGesamt label {
		cursor: pointer;

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

		hyphens: auto;		/* Gewebefarbe "Eisenglimmerdunkelgrau" */

		font-size: 1em;		/* wurd vom Layout verkleinert */
}
label input[type=radio] {
		cursor: pointer;
}




#infoRMass {
		cursor: pointer;
}



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

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

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

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

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









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

		container-type: inline-size;
		container-name: picture_design;
}

		#picture_design img {
				display: inline-block;
				max-width: 100%;
		}

		.picture_design_ueberschrift {
				color: #444444;
				margin-bottom: 1em;
				text-align: left;
		}
		.picture_design_group {
				display: flex;
				flex-direction: row;
		}

				.picture_design_bild {
						text-align: left;
						flex: 0 0 300px;
						overflow: hidden;
				}

				.picture_design_space {
						flex: 0 1 45px;
				}
				.picture_design_box {
						text-align: left;
						flex: 1 1 370px;
						overflow: auto;
						padding-right: 1em;		/* Abstand zu eventuellem Scrollbalken */
				}
						.picture_design_box_ueberschrift {
								margin-top: 2em;
								margin-bottom: 2em;
						}
								.picture_design_box_ueberschrift:first-child {
										margin-top: 0;
								}
								.picture_design_box_ueberschrift img {
										vertical-align: middle;
										margin-right: 1em;
								}

						.picture_design_box_eigenschaften {

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

						.picture_design_box_highlights {

						}
								.picture_design_box_highlights > * {
										display: inline-block;
										margin-left: 2em;
										margin-right: 0;
								}
										.picture_design_box_highlights > * > * {
												text-align: center;
												font-size: 80%;
										}

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

		@container picture_design (width < 600px) {
				.picture_design_group {
						/* flex-direction: column;  hat bei .picture_design_box die 370px als Hoehenangabe, deshalb hier jetzt display: block */
						display: block;
				}
						.picture_design_bild {
								text-align: center;
						}
						.picture_design_space {
								flex: 0 1 2em;
						}
		}













#konfigurator {

}

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

		#modellbild_preview img {
				border: 1px solid #454545;
				padding: 3px;
				margin-right: 1em;
				margin-bottom: 3px;
				height: 54px;
				cursor: pointer;
				min-width: 10px;		/* falls Bild nicht geladen werden konnte (fuer Chrome - Firefox uebernimmt hier fuer die Breite die angegebene Hoehe) */
				min-height: 10px;
		}
				#modellbild_preview img.active {
						outline: 2px solid #454545;
				}

		#modellbild_steuerung {
				color: #888888;
				font-size: 11px;
				position: fixed;
				bottom: 0;
				left: 0;
				width: 50%;
				display: flex;
				justify-content: space-around;
		}
				#modellbild_steuerung_left {
						flex: 0 1 33%;
				}
				#modellbild_preview {
						flex: 1 0 auto;
				}
				#modellbild_steuerung_right {
						flex: 0 1 33%;
				}
				.graphSetBackground {
						cursor: pointer;
						height: 54px;
				}



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

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

				margin-top: 1em;
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				align-items: center;
		}
				.gruppe_warenkorb > * {
						vertical-align: middle;
						padding-left: 0.5em;
						padding-right: 0.5em;
				}
				.gruppe_warenkorb > *:first-child {
						padding-left: 0;
				}
				.gruppe_warenkorb > *:last-child {
						padding-right: 0;
				}
				.sonderwunsch {
						flex: 1 1 280px;
				}
						.sonderwunsch textarea {
								width: 100%;
								height: 50px;
								border: 1px solid #e6e6e6;
								box-sizing: border-box;
						}
				.box_menge {
						text-align: right;
						flex: 3 0 auto;
				}
						.menge {
								text-align: center;
								display: inline-block;
						}
								.menge input[type="text"], .menge input[type="number"] {
										border: 1px solid #cccccc;
										border-radius: 2px;
										width: 40px;
										color: #444444;
										text-align: center;
										margin-bottom: 0.2em;
								}
				.box_preis {
						flex: 1 0 auto;
						text-align: right;
				}
						.preis {
								font-size: 0.45cm;
								font-weight: bold;
						}
						.preis_alt {
								text-decoration: line-through;
						}
						.preis_neu {
								display: block;
								color: #ee1f26;
						}

				.box_warenkorb {
						flex: 1 0 auto;
						text-align: right;
				}
						.warenkorb_konfi {
								cursor: pointer;
								padding-top: 5px !important;		/* Paddings vom Layout ueberschreiben - das HR-Layout bringt noch einen 5Pixel Border-Bottom mit, der hier auch abgezogen ist */
								padding-bottom: 5px !important;
								padding-left: 1em !important;
								padding-right: 1em !important;
								display: inline-flex;
						}

			.warenkorb_konfi .warenkorb_text, .warenkorb_konfi .warenkorb_symbol {
					height: 43px;
					line-height: 43px;
			}

			.warenkorb_konfi .warenkorb_symbol {
					display: flex;
					align-items: center;
			}
			.warenkorb_konfi .warenkorb_text {
					text-transform: uppercase;
			}




					.warenkorb_link {
						cursor: pointer;
						text-align: right;
						display: block;
						white-space: nowrap;
					}
						.warenkorb_link .warenkorb_text, .warenkorb_link .warenkorb_symbol {
								display: inline-block;
								height: 43px;
								line-height: 43px;
								padding-left: 12px;
								padding-right: 12px;
						}
								.warenkorb_link > * {
										color: #444444;
								}

						.warenkorb_link .warenkorb_text {
								text-transform: uppercase;
								border-right: 1px solid #ffffff;
						}
								.warenkorb_link .warenkorb_text {
										background-color: #e6e6e6;
								}
						.warenkorb_link .warenkorb_symbol {
								background-size: auto 30px;
								background-repeat: no-repeat;
								background-position: center;
								width: 40px;
								box-sizing: content-box;
						}
								.warenkorb_link .warenkorb_symbol {
										background-color: #e6e6e6;
										background-image: url(bilder/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;
						}
		}

		#spalten2 {
				position: fixed;
				left: 0;
				width: 100%;
		}
				#spalten2 #visualisierung {
						position: fixed;
						/* top: 120px; wenn hier nichts gesetzt ist, sollte die aktuelle Position passen */
						left: 2%;
						width: 48%;
						text-align: center;
				}

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

						#modellbild_ueberschrift {
								margin-bottom: 1em;
						}

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

						#group_modellbild, #picture_design {		/* zur Initialisierung alles aus haben */
								display: none;
						}
						#group_modellbild {
								/* display: inline-flex; */
								align-items: center;
						}

								#modellbild_left, #modellbild_right {
										display: none;
										cursor: pointer;
								}
										#modellbild_left img, #modellbild_right img {
												width: 50px;
										}

						#spalten2 #visualisierung {
								text-align: center;
								/* margin-bottom: 1em; */
						}
								#modellbild_ueberschrift {
										text-align: left;
								}
										#spalten2 #visualisierung .ueberschrift1 {
												font-size: 16px;
										}
										#spalten2 #visualisierung .ueberschrift2 {
												font-weight: bold;
												font-size: 16px;
										}
						#visualisierung svg {
								max-width: 100%;
						}
				#spalten2 #eingabe {
						margin-left: 50%;
						padding-left: 2%;
						padding-right: 1.2%;
						padding-bottom: 200px;
						overflow: auto;
						position: relative;		/* fuer absolute positioniertes #zoomWindow */
						box-sizing: border-box;		/* das ist im RTS Standard, in den anderen Shops nicht. Im Script wird auf dieses Element eine height gesetzt. Damit das mit dem Padding hin haut hier die Vereinheitlichung mit boder-box */

						container-type: inline-size;
						container-name: eingabe;
				}
						#eingabe .bereichsueberschrift {
								background-color: #444444;
								color: #ffffff;
								font-size: 16px;
								font-weight: normal;
								padding: 1em;
								text-align: left;
						}
						#eingabe .accordion_ueberschrift {
								border-top: 1px solid #cecece;
								border-bottom: 1px solid transparent;
								padding-top: 1em;
								padding-bottom: 1em;
								margin-top: 0;
								margin-bottom: 0;
								position: relative;
								cursor: pointer;
								font-weight: normal;
								color: #888888;

								display: flex;
								justify-content: space-between;
								align-items: center;
						}
						#eingabe .accordion_ueberschrift:first-child {
								border-top: 0;
						}
						#eingabe .accordion_ueberschrift.initialNone {		/* die Ueberschriften, die je nach Konfiguration mal an und mal aus sein koennen initial auf aus stellen, dass sie beim Laden nicht kurz zu sehen sind und dann wieder verschwinden  */
								display: none;
						}
						#eingabe .accordion_ueberschrift.active {
								color: #444444;
								font-weight: bold;
						}
								#eingabe .accordion_ueberschrift .eingabeGewaehltIcon {
										flex: 0 0 23px;
										width: 23px;
										height: 23px;
								}

								#eingabe .accordion_ueberschrift .eingabeGewaehltUe {
										flex: 1 1 auto;
										padding-right: 1em;
								}

								#eingabe .accordion_ueberschrift > img {
										vertical-align: middle;
										margin-left: 0.5em;
										margin-right: 1em;
								}
								#eingabe .accordion_ueberschrift .eingabeGewaehltBez {
										font-style: italic;
										font-weight: normal;
										font-size: 90%;
										text-align: right;

										flex: 1 1 auto;
								}
										#eingabe .accordion_ueberschrift.active .eingabeGewaehltBez {		/* das hier wieder in Standard-Farben anzeigen */
												color: #444444;
										}

								#eingabe .accordion_ueberschrift .eingabeGewaehltHaken {
										margin-left: 1em;
										margin-right: 0.5em;

										flex: 0 0 auto;
								}

						#eingabe .eingabeBox {
								margin-top: 1em;
								margin-left: 2em;
								margin-right: 2em;
								margin-bottom: 1em;
								display: none;
								overflow: hidden;		/* fuer die Animation */
						}
								#eingabe .accordion_zwischenueberschrift {
										font-weight: normal;
										margin-top: 0;
										margin-bottom: 1em;
								}
								#eingabe .erklaerung {
										font-size: 90%;
										color: #888888;
								}


								#listDesigns {

								}
										#listDesigns .design {
												display: flex;
												flex-direction: row;
												align-items: stretch;
												border-bottom: 1px solid #cecece;
												cursor: default;
										}
										#listDesigns .design.active {
												background-color: #fafafa;
										}
										#listDesigns .design.disabled {
												cursor: not-allowed;
												color: #d1d1d1;
										}
										/*
										#listDesigns .design.ueberschrift {
												position: relative;		/ - * fuer .videoMaterialien position=absolute * - /
										}
										*/
												#listDesigns .design > * {
														display: flex;
														flex-direction: column;
														justify-content: center;
														padding-top: 8px;
														padding-bottom: 8px;
												}
												#listDesigns .design > .radio {
														flex: 1 0 0;
														cursor: pointer;
														align-items: center;
												}
												#listDesigns .design.ueberschrift > .radio {
														cursor: default;
												}
												#listDesigns .design.disabled > .radio {
														cursor: not-allowed;
												}
														#listDesigns .design > .radio > input[type=radio] {
																cursor: pointer;
														}
														#listDesigns .design.disabled > .radio > input[type=radio]  {
																cursor: not-allowed;
														}

												#listDesigns .design > .img {
														flex: 2 0 0;
														justify-content: center;
														cursor: pointer;
												}
												#listDesigns .design.disabled > .img  {
														cursor: not-allowed;
												}
														#listDesigns .design > .img > img {
																/* height: 55px; */
																width: 100%;
																max-width: 90px;
																margin-right: 10px;
														}
												#listDesigns .design.ueberschrift > .img {
														cursor: default;
												}
												#listDesigns .design > .bez {
														flex: 3 0 0;
														padding-right: 0.5em;
														cursor: pointer;
												}
												#listDesigns .design.ueberschrift > .bez {
														cursor: default;
												}
												@container eingabe (width < 550px) {
														#listDesigns .design > .bez {
																font-size: 80%;
														}
												}
												@container eingabe (width < 300px) {
														#listDesigns .design > .bez {
																font-size: 70%;
														}
												}
												#listDesigns .design.disabled > .bez  {
														cursor: not-allowed;
												}
														#listDesigns .design > .bez .farbwahl {
																margin-top: 0.5em;
																/* font-size: 80%;  der Radio-Button aendert sich nicht in der Groesse */
														}
																#listDesigns .design > .bez .farbwahl > label {
																		display: inline-block;		/* verhindert Zeilenumbruch zwischen Radio Button und Text */
																}
																#listDesigns .design > .bez .farbwahl > label:first-child {
																		margin-right: 1em;
																}
																@container eingabe (width < 600px) {
																		#listDesigns .design > .bez .farbwahl > label {
																				line-height: 2em;
																		}
																}
												#listDesigns .design > .icon {
														flex: 1 0 0;
														align-items: center;
														font-size: 80%;
														border-left: 1px solid #f1f1f1;
														padding-top: 1em;
														padding-bottom: 1em;
														overflow: hidden;
												}
												#listDesigns .design.ueberschrift > .icon {
														justify-content: flex-start;
												}
												#listDesigns .design.zeile > .icon {
														justify-content: center;
												}
												#listDesigns .design > .icon:last-child {
														border-right: 1px solid #f1f1f1;
												}
														#listDesigns .design > .icon > .img img {
																width: 23px;
																height: 23px;
														}
														#listDesigns .design > .icon > .bez {
																margin-top: 0.5em;
																hyphens: auto;
																text-align: center;
														}
														@container eingabe (width < 400px) {
																#listDesigns .design > .icon > .bez {
																		display: none;
																}
														}
												#listDesigns .videoMaterialien {
														/*
														position: absolute;
														left: 20%;
														*/
														text-decoration: none;
														color: #000000;
												}

														#listDesigns .videoMaterialien > * {
																vertical-align: middle;
														}
										.tabFenster {
												border-top: 1px solid #cecece;
										}
												.tabFenster > * {
														display: none;
														padding-left: 1em;
														padding-right: 1em;
														padding-top: 1em;
														padding-bottom: 1em;
														max-width: 800px;		/* max-width hilft uebergeordneten Flex-Elementen bei der Breitenbestimmung*/
												}
												@container eingabe (width < 550px) {
														.tabFenster > * {
																padding-left: 0;
														}
												}
								.hinweisMehr {
										display: none;
										background-color: #f3fdf9;
										padding-top: 0.5em;
										padding-bottom: 0.5em;
										align-items: center;
								}
										.hinweisMehr .icon {
												flex: 1 0 0;
												text-align: center;
										}
										.hinweisMehr .text {
												flex: 10 0 0;		/* bei mehrDesigns alle sichtbaren Elemente der Tabelle da drueber abgezeaehlt (flex-grow) - gilt auch fuer mehrProfilfarben */
										}
												.hinweisMehr .text > div {		/* extra div, weil padding-right: 1em im .text die flex-groesse beeinflusst */
														margin-right: 1em;
												}
												.hinweisMehrLink {
														text-decoration: underline;
														font-weight: 500;
														cursor: pointer;
												}

								#auswahlModelle {

								}

										#auswahlModelle .modell {
												display: grid;
												align-items: stretch;		/* eigentlich center. aber um den Klickbereich vom Label nach oben und unten zu erhoehen stretch, und dann die unterelemente mit display flex separat zentrieren */
												grid-template-areas:
														"input modellbild bezeichnung logo"
														"input modellbild zusatz price"
														"input modellbild montagesystem info"
												;
												grid-template-columns: 5.6% auto 1fr auto;
												gap: 1em;
												padding-top: 1em;
												padding-bottom: 1em;
												border-bottom: 1px solid #cecece;
												margin: 0;
												cursor: pointer;
												
												container-type: inline-size;
												container-name: modell;
										}
												#auswahlModelle .modell .input {
														grid-area: input;
														display: flex;
														justify-content: center;
														align-items: center;
												}
												#auswahlModelle .modell .modellbild {
														grid-area: modellbild;
														align-items: center;
												}
														#auswahlModelle .modell .modellbild img {
																width: 140px;
																display: inline-block;
														}
												#auswahlModelle .modell .bezeichnung {
														grid-area: bezeichnung;
														hyphens: auto;
												}
												#auswahlModelle .modell .zusatz {
														grid-area: zusatz;
														hyphens: auto;
														color: #888888;
												}
														#auswahlModelle .modell .zusatz li::marker {
																content: "- ";
														}
												#auswahlModelle .modell .montagesystem {
														grid-area: montagesystem;
														hyphens: auto;
														
														display: flex;
														align-items: center;
														gap: 0.5em;
												}
														#auswahlModelle .modell .montagesystem img {
																display: block;
														}
												#auswahlModelle .modell .logo {
														grid-area: logo;
														align-items: flex-start;
												}
														#auswahlModelle .modell .logo img {
																display: block;
																margin-left: auto;
																margin-right: 0;
														}
												#auswahlModelle .modell .price {
														grid-area: price;
														text-align: right;
														align-items: flex-end;
												}
												#auswahlModelle .modell .info {
														grid-area: info;
														display: flex;
														justify-content: flex-end;
														gap: 1em;
														text-align: right;
														flex-direction: row;
														align-items: center;
														cursor: default;
												}
														#auswahlModelle .modell .info > * {
																cursor: pointer;
																text-align: center;
														}

												@container eingabe (width < 750px) {
														#auswahlModelle .modell {
																grid-template-areas:
																		"input modellbild bezeichnung logo"
																		"input modellbild zusatz info"
																		"input modellbild montagesystem price"
																;
																grid-template-columns: 5.6% auto 1fr auto;
														}

														#auswahlModelle .modell .logo {
																align-self: start;
														}
														#auswahlModelle .modell .price {
																align-self: start;
														}
														#auswahlModelle .modell .info {
																display: grid;
																grid-template-columns: 1fr 1fr;
																padding-left: 1em;		/* gap an dieser Stelle etwas erhoehen */
														}

												}
												@container eingabe (width < 620px) {
														#auswahlModelle .modell {
																grid-template-areas:
																		"input modellbild modellbild bezeichnung"
																		"input modellbild modellbild zusatz"
																		"input modellbild modellbild montagesystem"
																		"logo logo price info"
																;
																grid-template-columns: auto auto auto 1fr;
														}
														#auswahlModelle .modell .logo {
																align-self: center;
														}
														#auswahlModelle .modell .price {
																align-self: center;
														}
														#auswahlModelle .modell .info {
																display: grid;
																grid-template-columns: 1fr 1fr 1fr 1fr;
														}
												}

												@container eingabe (width < 400px) {
														#auswahlModelle {
																display: flex;		/* aktiviert den Scrollcontainer */
																gap: 1em;
														}
																#auswahlModelle .modell {
																		grid-template-areas:
																				"modellbild modellbild"
																				"bezeichnung bezeichnung"
																				"zusatz zusatz"
																				"montagesystem montagesystem"
																				"logo logo"
																				"info price"
																				"input input"
																		;
																		grid-template-columns: 1fr;
																		column-gap: 10%;

																		margin-left: 0;
																		margin-bottom: 1em;
																		
																		/* padding-left: 0; */
																		padding: 1em;
																		
																		flex: 0 0 250px;
																		border: 2px solid #F5F5F5;
																		border-radius: 6px;
																		align-items: end;		/* um Icons und Preis ein bisschen auf die gleiche Hoehe zu bekommen */
																}
																#auswahlModelle .modell.active {
																		border: 2px solid #3781BD;
																}
																#auswahlModelle .modell .modellbild {
																		align-items: center;
																}
																		#auswahlModelle .modell .modellbild img {
																				width: 150px;
																		}

																		#auswahlModelle .modell .montagesystem {
																				margin-top: 1em;
																		}
																				#auswahlModelle .modell .logo img {
																						margin-left: 0;
																						margin-right: auto;
																				}
																		#auswahlModelle .modell .bezeichnung {
																				margin-top: 1em;
																				font-size: 20px;
																		}
																		#auswahlModelle .modell .zusatz {
																				font-weight: 300;
																		}
																		#auswahlModelle .modell .info {
																				padding-left: 0;
																				justify-items: normal;
																				justify-content: space-between;
																				grid-template-columns: auto auto auto auto;
																		}
																		#auswahlModelle .modell .price {
																				flex: 0 1 auto;
																				padding-left: 0;
																				padding-right: 0;
																				color: #3580bb;
																				font-weight: 500;
																				font-size: 120%;
																		}

												}
												@container eingabe (width < 330px) {
														#auswahlModelle .modell {
																column-gap: 6%;
														}
												}
												@container eingabe (width < 310px) {
														#auswahlModelle .modell {
																column-gap: 4%;
														}
												}
												@container modell (width < 280px) {
														#auswahlModelle .modell .info {
																grid-template-columns: 1fr 1fr;
														}
												}
													

								.groupButtonsBottom {
										text-align: right;
										margin-top: 1em;
										margin-bottom: 1em;
										display: flex;
										gap: 1em;
										justify-content: flex-end;
										flex-wrap: wrap;
								}
										.buttonWeitere {
												background-color: #357dbc;
												color: #ffffff;
												display: inline-block;
												padding: 0.5em;
												text-decoration: none;
										}
										.btnNextBox {
												background: #357dbc;
 								 				color: white;
												padding-top: 0.5em;
												padding-bottom: 0.5em;
												padding-left: 2em;
												padding-right: 2em;
												display: inline-block;
												cursor: pointer;
										}
										.btnBoxMuster {
												background: #ffffff;
 								 				color: #000000;
												padding-top: 0.5em;
												padding-bottom: 0.5em;
												padding-left: 2em;
												padding-right: 2em;
												display: inline-block;
												border: 1px solid #357dbc;
												cursor: pointer;
										}
										.musterLink {
												display: none;
												color: #888;
												float: left;
												margin-top: 6px;
												margin-left: 27px;
												background: url('/fliegenschutz/konfigurator/icons/pfeile.svg') no-repeat 0% 50%;
												background-size: auto 100%;
												padding-left: 75px;
										}

						#auswahlGruppeTuer {
								margin-top: 1em;
						}

						.auswahlBoxGruppe {
								display: flex;
								gap: 1em;
						}
								.boxGruppe {
										margin-top: 0.5em;
										margin-bottom: 0.5em;
										flex: 0 0 150px;
								}
										.boxGruppeGruppe {
												border: 2px solid #F5F5F5;
										}
										.boxGruppe.active .boxGruppeGruppe {
												border: 2px solid #3781BD;
												border-radius: 6px;
										}
												.boxGruppeBild {
														padding: 1em;
												}
														.boxGruppeBild img {
																width: 100%;
														}
												.boxGruppeTitel {
														text-align: center;
														margin-top: 1em;
														margin-bottom: 0.5em;
												}
										.boxGruppeInput {
												text-align: center;
												padding-top: 1em;
										}




						#group_masseingabe_grid {
								display: inline-grid;
								grid-template-columns: repeat(4, auto);
								row-gap: 1.5em;
								column-gap: 2em;
								align-items: center;
						}
						@container eingabe (width < 500px) {
								#group_masseingabe {
										text-align: center;
								}
										#group_masseingabe_grid {
												column-gap: 1em;
												grid-template-columns: repeat(3, 1fr); /* Zeile 1: 3 Boxen */
												row-gap: 0;
										}
												#group_masseingabe_grid .mass_grenze {
														grid-column: 1 / -1; /* Box 4 über ganze Zeile */
														text-align: center;
														padding-top: 0.5em;
														padding-bottom: 1.5em;
												}
						}

								.mass_bez {
								}
										.mass_bez .zusatz {
												font-weight: lighter;
												font-style: italic;
												color: #888888;
										}
								.mass_input {
										white-space: nowrap;
								}
								.mass_umrechnung {
										color: #888888;
								}
								.mass_grenze, #konfiguratorGesamt label.mass_grenze {		/* im Selektor nochmal mit #konfiguratorGesamt und label aufrufen, so das das in diesme speziellen Fall auch greift */
										font-size: 80%;
										color: #888888;
								}

								.mass_fo, .mass_fu, .mass_r, .mass_laufschienenlaenge {
										display: none;
								}
								.mass_fo.visible, .mass_fu.visible, .mass_r.visible, .mass_laufschienenlaenge.visible {
										display: block;
								}
								#linkMasseingabeMessanleitung {
										margin-bottom: 2em;
								}

								#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;
								}
								#group_masseingabe input[type=number]:out-of-range {
										outline: 2px solid #ff9999;
								}





						#hinweisMasseingabe {
								display: none;
								margin-top: 2em;
								background-color: #fdf8f8;
								font-size: 90%;
								padding: 1em;
						}
								.boxIconLeft {
										display: flex;
										align-items: center;
								}
										.boxIconLeft > .left {
												flex: 0 0 auto;
												padding: 1em;
										}
										.boxIconLeft > .right {
												flex: 1 1 0;
										}

												.hinweisMasseingabeUeberschrift {
														font-weight: bold;
												}
												#hinweisMasseingabeList {
														margin-left: 0;
														padding-left: 0;
														margin-top: 0;
														margin-bottom: 0;
														padding-top: 0;
														padding-bottom: 0;

														list-style-type: none;
												}
														#hinweisMasseingabeList > li {
																text-indent: -1ex;
																margin-left: 1em;
																margin-top: 0.5em;
														}
														#hinweisMasseingabeList > li:before {
																content: "\002D\0020";
														}
						#masseingabe_soforthinweise {
								display: none;
								margin-top: 1em;
								margin-bottom: 2em;
								padding: 1em;
								border: 1px solid #bb0000;
						}

						#auswahlProfilfarbe {
								display: flex;
								flex-wrap: wrap;
								max-width: 700px;		/* nur 5 Farbboxen pro Zeile */
						}
						@container eingabe (width < 550px) {
								#auswahlProfilfarbe {
										flex-wrap: nowrap;
										max-width: none;
										overflow: auto;
								}
						}

								#auswahlProfilfarbe .auswahlbox {
										text-align: center;
										margin-right: 2em;
										margin-bottom: 2em;
										width: 100px;
										display: inline-block;
										font-size: 14px; /* etwas kleiner als Standard wegen dem langen Wort "Eisenglimmerdunkelgrau" */
								}
										#auswahlProfilfarbe img {
												margin-bottom: 0.3em;
										}
										#auswahlProfilfarbe .profilfarbe_farbbox
										, #auswahlProfilfarbe .profilfarbe_ral
										{
												width: 100px;
												height: 100px;
												background-size: cover;
										}
										#auswahlProfilfarbe .profilfarbe_farbbox {
												display: block;
												margin-bottom: 2px;
										}
										#auswahlProfilfarbe .profilfarbe_farbbox .schimmer {
												display: block;
												width: 100%;
												/* height: 100%; */
												position: relative;
												top: -15px;
												left: -15px;
										}

										#auswahlProfilfarbe .profilfarbe_ral {
												/* background: linear-gradient(to bottom right, rgba(128,0,128,0.6), rgba(0,0,255,0.6), rgba(0,128,0,0.6), rgba(255,255,0,0.6), rgba(255,0,0,0.6), rgba(128,0,128,0.6)); */
												background-image: url(bilder/profilfarbe/sonderral.svg);
										}
												#auswahlProfilfarbe input#input_sonderral {
														margin-left: 1ch;
														width: 4ch;
														box-sizing: content-box;
												}
												#auswahlProfilfarbe input[type=radio] {
														margin-top: 0.3em;
														margin-bottom: 0.3em;
												}

						#groupVorbohren {
							
						}
								#groupVorbohren * {
										vertical-align: center;
								}
										#groupVorbohren img {
												cursor: pointer;
												margin-left: 0.5em;
										}

						#groupOeffnungsrichtung {

						}
								#groupOeffnungsrichtung label {
										display: inline-block;
										max-width: 100%;
										text-align: center;
								}
										#groupOeffnungsrichtung img {
												width: 100%;
										}

						#groupSprosse label {
								display: block;
								margin-bottom: 0.5em;
						}
						#info_sprosse {
								vertical-align: middle;
								margin-left: 1em;
								cursor: pointer;
						}

						#zoomWindow {
								/*
								position: absolute;		so sieht man es nicht mehr wenn runter gescrollt wurde
								top: 100px;
								left: 100px;
								*/
								position: fixed;
								top: 100px;
								/* left: 100px; */
								outline: 10px solid #ffffff;
								width: 500px;
								height: 500px;
								background-color: #ffffff;
								border: 1px solid #999999;
								display: none;
								overflow: hidden;
						}

@media (max-width: 1000px) {
		/* einspaltig untereinander (und nicht mehr 2 Spalten) */
		/* Die Pixelbreite zur Aenderung sind auch in javascript eingebaut! */

		#spalten2 {
				margin-top: 2em;
				margin-bottom: 0;
				position: static;

				display: flex;		/* mit display: flex ist die order moeglich */
				flex-direction: column;
		}
		#spalten2 #visualisierung {
				order: 2;
				width: 100%;
				position: static;
				box-sizing: border-box;
				margin-top: 2em;
		}
		#modellbild_steuerung {
				position: static;
				width: 100%;
				box-sizing: border-box;
				height: auto;
				margin-top: 1em;
				margin-bottom: 1em;
		}
		#spalten2 #eingabe {
				order: 1;
				margin-left: 0;
				padding-left: 0;
				padding-right: 0;
				padding-bottom: 0;
		}
				#eingabe .eingabeBox {
						margin-left: 1em;
						margin-right: 1em;
				}
		.gruppe_warenkorb {
				position: static;
				width: 100%;
				box-sizing: border-box;
				margin-top: 3em;
				margin-bottom: 200px;
		}
}

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

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





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

		.xArtikelsystem .xArtikel {
				display: flex;
				margin-bottom: 2em;
		}
				.xArtikelsystem .xArtikel .action {
						display: block;
						flex: 1 0 0px;
				}
				.xArtikelsystem .xArtikel .icons {
						flex: 0 0 34px;
						text-align: right;
				}
						.xArtikelsystem .xArtikel .action img {
								width: 100%;
						}
						.xArtikelsystem .xArtikel .icons img {
								width: 24px;
						}
						.xArtikelsystem .xArtikel input[type=number] {
								width: 2ch;
								box-sizing: content-box;
								text-align: right;
						}
						.xArtikelsystem .xArtikel input[type=checkbox] {
								margin-top: 1em;
						}







.extrafenster {
		background-color: #ffffff;
		padding: 2.2em;
}
@media (max-width: 800px) {
		.extrafenster {
				padding: 1em;
		}
}

		.extrafenster .head {
				padding-bottom: 1em;
				border-bottom: 1px solid #cecece;
		}
				.extrafenster .head .left {
						float: left;
				}
				.extrafenster .head .right {
						float: right;
				}
						.extrafensterClose {
								cursor: pointer;
						}
				.extrafenster h2 {
						font-size: 14px;
						padding: 0;
						margin: 0;
				}

								.fensterModellDetails {
										display: flex;
										margin: 1.5em;
										flex-direction: row;
										gap: 1em;
								}
										.fensterModellDetails .left {
												flex: 0 0 30%;
												text-align: center;
										}
												.fensterModellDetails .left img.fensterModellDetailsModellbild {
														width: 100%;
												}
										.fensterModellDetails .right {
												flex: 1 1 auto;
										}
												@container tabs (max-width: 700px) {		/* container tabs aus tabs.css */
														.fensterModellDetails .right .tabs .noTab .bez {
																display: none;
														}
												}
												@container tabs (max-width: 350px) {
														.fensterModellDetails .right .tabs .bez {
																display: none;
														}
												}
												.fensterModellDetails .tabFenster ul {
														margin: 0;
														padding: 0;
												}
								@container boxInfoModell (max-width: 550px) {
										.fensterModellDetails {
												flex-direction: column;
										}
												.fensterModellDetails .left {
														flex: 0 1 auto;
														margin-bottom: 1em;
												}
								}
								.fensterModellDetails.alternativ {

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

								.modellbeschreibung_profile {
										max-width: 650px;
										container-type: inline-size;
										container-name: modellbeschreibung_profile;
								}
										.modellbeschreibung_profile .zeile2 {
												display: flex;
												flex-direction: row;
												gap: 1em;		/* normalerweise vielleicht so 2em, aber auf Grund der grossen Abstaaende in den Bildern hier erstmal weniger */
										}
												.modellbeschreibung_profile .zeile2 > * {
														/* flex: 1 0 0; wenn es nur 1 Element gibt soll es nur die Haelfte des Platzes einnehmen */
														flex: 0 1 50%;
												}
										.modellbeschreibung_profile .zeile1 {

										}
												.modellbeschreibung_profile .ueberschrift {

												}
												.modellbeschreibung_profile .bild img {
														width: 100%;
												}
								@container modellbeschreibung_profile (max-width: 500px) {
										.modellbeschreibung_profile .zeile2 {
												flex-direction: column;
										}
												.modellbeschreibung_profile .zeile2 > * {
														flex: 0 1 auto;
												}
								}


				.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 {
										container-type: inline-size;
										container-name: boxInfoModell;
								}
								#fensterModell .boxInfoModell {
										border: 2px solid #cecece;
										margin-bottom: 1em;
								}
										.boxInfoModell .head {
												padding-top: 1em;
												padding-bottom: 1em;
												padding-left: 2em;
												padding-right: 1em;
												display: flex;
												justify-content: space-between;
												align-items: flex-start;
										}
										.full .boxInfoModell .head {		/* Fenster in voller Breite geoeffnet */
												background-color: #444444;
												color: #f9f9f9;
										}
												.boxInfoModell h3 {
														margin: 0;
														padding: 0;
														font-size: 1.0em;
														font-weight: bold;
												}
												.boxInfoModell .close {
														cursor: pointer;
														text-wrap: nowrap;
												}
														.boxInfoModell .close > * {
																vertical-align: middle;
														}
										.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;
												}
												.boxInfoModell .fensterModellMinMax ul {
														list-style-type: none;
														margin: 0;
														padding: 0;
												}

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

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



#fensterWarenkorb {

}
#fensterWarenkorb #fensterWarenkorb_top {
		display: grid;
		grid-template-columns: 1fr 2fr;
		gap: 2em;
		grid-template-areas:
				"left right"
				"buttons buttons"
		;
}
		#fensterWarenkorb #fensterWarenkorb_top_left {
				position: relative;
				grid-area: left;
		}
				#fensterWarenkorb #warenkorb_box_produktbild {
						width: 100%;
						max-height: 340px;
				}
				#fensterWarenkorb #warenkorb_icon_hinzugefuegt {
						position: absolute;
						top: 50%;
						margin-top: -27px;
						left: 50%;
						margin-left: -27px;
						display: none;
				}
		#fensterWarenkorb #fensterWarenkorb_top_right {
				grid-area: right;
		}
				#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 {
				padding-top: 28px;
				grid-area: buttons;
		}
				#fensterWarenkorb_top_buttons .left {
						float: left;
						display: block;
						text-transform: uppercase;
						border: 2px solid #bf0008;
						line-height: 39px;		/* so hat es mit seinen bordern die gleiche Hoehe wie das Warenkorb-Icon */
						color: #bf0008;
						padding-left: 1em;
						padding-right: 1em;
						cursor: pointer;
				}
				#fensterWarenkorb_top_buttons .right {
						float: right;
				}
				@media (max-width: 530px) {
						#fensterWarenkorb_zurueck_einkaufen {
								display: none;
						}
				}

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

@media (max-width: 650px) {
		#fensterWarenkorb {
				width: auto;
		}

				#fensterWarenkorb #fensterWarenkorb_top {
						grid-template-areas:
								"right"
								"buttons"
						;
						grid-template-columns: 1fr;
				}

						#fensterWarenkorb_top_left {
								display: none;
						}
						#fensterWarenkorb #fensterWarenkorb_top_right {
								width: auto;
						}
								#fensterWarenkorb_top_buttons .left {
										margin-bottom: 1em;
								}
}