#ansicht_2, #ansicht_2 li, #ansicht_2 p {
		font-weight: normal;		/* in der Layout.css steht im body und bei p: font-weight: 300; */
}

/* Button Ansicht2 Blue Icon - Text: "Messhilfe bestellen", "Richtig Messen bei Masseingabe" */
		.ansicht2BtnBlueIconText {
				display: inline-flex;
				background-color: #3781BD;
				color: #ffffff;
				text-decoration: none;
				border: 1px solid #3781BD;
				border-radius: 3px;
				font-size: 14px;
				font-weight: bold;
				padding: 10px;
				cursor: pointer;
				text-transform: uppercase;
		}

		.ansicht2BtnBlueIconText:hover {
				font-style: italic;
		}
				.ansicht2BtnBlueIconText > * {
						vertical-align: middle;
				}
				.ansicht2BtnBlueIconText img {
						margin-right: 0.5em;
				}


#layoutGrid {
		display: grid;

		gap: 20px;

		margin-top: 20px;
}

#layoutGrid.ansicht2a {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

		grid-template-areas:
				"stoff stoff stoff modell modell modell modell modell modell modell modell modell"
				"befestigung befestigung befestigung befestigung befestigung befestigung befestigung befestigung befestigung befestigung befestigung befestigung"
				"masse masse masse masse masse masse masse umschaltung umschaltung umschaltung umschaltung umschaltung"
				"masse masse masse masse masse masse masse schienenprofil schienenprofil schienenprofil schienenprofil schienenprofil"
		;
}

#layoutGrid.ansicht2a.ohneWfagVerweise{
		grid-template-areas:
				"stoff modell modell"
				"befestigung befestigung befestigung"
				"masse masse schienenprofil"
				"masse masse leer"
		;
}
@container eingabe (width < 850px) {
		#layoutGrid.ansicht2a {
				grid-template-columns: 1fr 3fr;

				grid-template-areas:
						"stoff modell"
						"befestigung befestigung"
						"masse masse"
						"umschaltung umschaltung"
						"schienenprofil schienenprofil"
				;
		}
}
@container eingabe (width < 550px) {
		#layoutGrid.ansicht2a {
				grid-template-columns: 1fr;

				grid-template-areas:
						"stoff"
						"modell"
						"befestigung"
						"masse"
						"masse"
						"umschaltung"
						"schienenprofil"
				;
		}
}

#layoutGrid.ansicht2b {
		grid-template-columns: 1fr 1fr 1fr 1fr;

		grid-template-areas:
				"stoff modell modell modell"
				"motor motor motor motor"
				"messhilfe messhilfe messhilfe messhilfe"
				"masse masse masse masse"
				"befestigung befestigung schienenprofil schienenprofil"
				"zubehoer zubehoer zubehoer zubehoer"
		;
}

@container eingabe (width < 650px) {
		#layoutGrid.ansicht2b {
				/* grid-template-columns: 1fr;  */
				grid-template-columns: 100%;		/* der scrollcontainer funktioniert so besser */
				grid-template-areas:
						"stoff"
						"modell"
						"motor"
						"messhilfe"
						"masse"
						"befestigung"
						"schienenprofil"
						"zubehoer"
				;
		}
}
		#layoutGrid .box {
				display: flex;		/* um den Inhalt von .box_body vertikal mittig ausrichten zu koennen */
				flex-direction: column;
				border-radius: 3px;

				transition: 0.3s;
		}
		#layoutGrid .box.border {
				border: 1px solid #cfcfcf;
		}
				#layoutGrid .box .box_head {
						flex: 0 0 auto;
						display: flex;
						align-items: center;
						border-bottom: 1px solid #f3f3f3;
				}
						#layoutGrid .box .box_head_icon {
								flex: 0 0 45px;
								text-align: center;
								padding-top: 6px;
								padding-bottom: 6px;
						}
						#layoutGrid .box .box_head_bezeichnung {
								flex: 1 0 0;
								text-align: left;
								padding-top: 6px;
								padding-bottom: 6px;
								font-size: 14px;
						}
						#layoutGrid .box .box_head_haken {
								flex: 0 0 56px;
								text-align: center;
						}
								  #layoutGrid .box .box_head_icon img
								, #layoutGrid .box .box_head_haken img
								{
										display: block;		/* wegen dem Abstand nach unten */
										margin-left: auto;	/* um wieder mittig zu sein */
										margin-right: auto;
								}


								#layoutGrid .box.box_schienenprofil .box_head_haken img {
										/* Das Info-(i) in der Profil-Box */
										cursor: pointer;
								}

				#layoutGrid .box .box_body {
						flex: 1 0 0;

						/* Folgendes soll die Inhalte in den Boxen vertikal mittig ausrichten. Das geht in Firefox und Chrome, nicht aber in Safari
						display: flex;
						flex-direction: column;
						justify-content: center;

						Als Workaround mache ich jetzt Folgendes:
						Ich setze nur vereinzelte Boxen, auf flex, so dass das mittig ausgerichtet wird. das scheint in allen Browsern zu funktionieren
						*/
				}
						#layoutGrid .box .box_body.padding {
								padding: 1.5em;
						}
				#layoutGrid .box .box_body, #layoutGrid .box .box_body li, #layoutGrid .box .box_body p {
						font-size: 12px;
				}
				#layoutGrid .box .box_body label:not(.optionReSize label) {
						font-size: 1em !important;		/* wird im Layout auf 0.9 gesetzt - das ist hier zu klein */
				}

				.box_stoff .box_body {
						cursor: pointer;
				}


				#ansicht_2 .ansicht2_box_messhilfe {
						display: grid;
						gap: 20px;
						grid-template-columns: 120px 1fr auto;

						grid-template-areas:
								"image headline headline"
								"image description button"
						;
				}
				@container eingabe (width < 750px) {
						#ansicht_2 .ansicht2_box_messhilfe {
								grid-template-columns: 120px auto;

								grid-template-areas:
										"image headline"
										"image description"
										"image button"
								;
						}
				}
				@container eingabe (width < 500px) {
						  .ansicht2_box_messhilfe				/* aktuell wird dieses Element zur Ansicht 1 / accordion_mobile_content kopiert */
						, #ansicht_2 .ansicht2_box_messhilfe	/* die obere Zeile selektiert zwar das gewuenschte Element, uberschreibt aber als Klasse nicht die Definition der ID vom letzten Block */
						{
								display: grid;
								gap: 20px;
								grid-template-columns: 1fr;
		
								grid-template-areas:
										"headline"
										"description"
										"button"
								;
						}
						
						.ansicht2_box_messhilfe_image {
								display: none;
						}
				}
						.ansicht2_box_messhilfe_image {
								grid-area: image;
								align-self: end;
						}
								.ansicht2_box_messhilfe_image img {
										width: 100%;
								}
						.ansicht2_box_messhilfe_headline {
								grid-area: headline;
								text-align: center;
								font-size: 20px;
						}
								.ansicht2_box_messhilfe_headline img {		/* 2 Pfeile in Kreisform */
										margin-left: 0.5em;
										margin-right: 0.5em;
								}
						.ansicht2_box_messhilfe_description {
								grid-area: description;
						}
						.ansicht2_box_messhilfe_orderbutton {
								grid-area: button;
								align-self: end;
								justify-self: end;
						}


				.ansicht2_box_stoff {
						display: grid;
						align-items: center;
						justify-content: space-between;
						grid-template-columns: 1fr 50px 50px;
						grid-template-areas:
								"bez img icon"
						;
						max-width: 244px;
						margin-left: auto;
						margin-right: auto;
						gap: 10px;
				}
						.ansicht2_box_stoff_bez {
								grid-area: bez;
						}
						.ansicht2_box_group_img {
								grid-area: img;
						}
								.ansicht2_box_group_img img {
										display: block;
										width: 50px;
										height: 50px;
										overflow: hidden;
										border: 1px solid #444444;
										border-radius: 3px;
								}
						.ansicht2_box_group_icon {
								grid-area: icon;
						}
								.ansicht2_box_icon {
										height: 50px;
										width: 50px;
										text-align: center;
										line-height: 50px;
										box-shadow: 0px 4px 8px #00000042;
										border-radius: 3px;
										transition: 0.5s;
										border: 1px solid transparent;
								}
								.ansicht2_box_icon:hover {
										box-shadow: none;
										border: 1px solid #cecece;
								}
										.ansicht2_box_icon img {
												width: 22px;
												vertical-align: middle;
												transition: 0.5s;
										}
										.ansicht2_box_icon:hover img {
												transform: rotate(360deg);
										}

				#ansicht2_box_stoff_body {
						/* jetzt hier der Workaround zum beschriebenen Problem "#layoutGrid .box .box_body {" */
						display: flex;
						
						container-type: inline-size;
						container-name: ansicht2_box_stoff_body;
				}

				@container ansicht2_box_stoff_body (width < 200px) {
						.ansicht2_box_stoff {
								grid-template-columns: 1fr 1fr;
								grid-template-areas:
										"img icon"
										"bez bez"
								;
						}
								.ansicht2_box_stoff_bez {
										align-self: self-start;
										text-align: center;
								}
								.ansicht2_box_group_img {
										align-self: self-end;
										justify-self: end;
								}
								.ansicht2_box_group_icon {
										align-self: self-end;
										justify-self: start;
								}
				}


				#ansicht2_box_modell_body {
						container-type: inline-size;
						container-name: ansicht2_box_modell_body;
				}

						#ansicht2_box_modell_body .link {
								margin-top: 0.5em;
								margin-bottom: 0.5em;
								margin-left: 2em;
								font-size: 10px;
								text-decoration: underline;
								cursor: pointer;
								display: inline-block;
						}

				.ansicht2Modell2 {
						display: flex;
						gap: 1em;
						margin-left: 1em;
						margin-right: 1em;
				}
				.ansicht2Modell2 > * {
						flex: 1 0 0;
				}
				.ansicht2Modell2 > *.active {
						flex: 2 0 0;
				}
				
				.ansicht2_modell .info {
						display: none;
				}
				
				@container ansicht2_box_modell_body (width < 450px) {
						.ansicht2Modell2 {
								flex-direction: column;
						}
						.ansicht2_modell .info {
								display: block;
						}
				}

				.ansicht2_modell {
						display: flex;
						gap: 1.5em;
						padding: 1.5em;
						justify-content: space-evenly;
						align-items: center;
						border: 1px solid #A5A5A5;
						border-radius: 3px;
				}
				.ansicht2_modell.active {
						border: 1px solid #000000;
				}
				@container eingabe (width < 800px) {
						.ansicht2_modell {
								gap: 1em;
								padding: 1em;
						}
				}

						.ansicht2_modell .bezeichnung {
								font-size: 12px;
						}
						.ansicht2_modell.active .bezeichnung {
								text-decoration: underline;
								font-weight: bold;
						}
						.ansicht2_modell .zusatz {
								font-size: 11px;
								display: none;
						}
						.ansicht2_modell.active .zusatz {
								display: block;
						}
						.ansicht2_modell .modellbild {
								width: 54px;
						}
						.ansicht2_modell .info {
								cursor: pointer;
						}
						
						.ansicht2_modell.active .info {
								display: block;
						}










				.ansicht2_box_befestigung_flex {
						display: flex;
						gap: 2.5%;
						align-items: center;

						container-type: inline-size;
						container-name: ansicht2_box_befestigung_flex;
				}
				@container eingabe (width < 750px) {
						.ansicht2_box_befestigung_flex {
								flex-direction: column;
								gap: 10px;
						}
				}
						.ansicht2_box_befestigung_flex_gruppe {
								flex: 0 0 100px;
								display: flex;
								align-items: center;
								justify-content: center;
								border-radius: 3px;
								box-shadow: 0px 3px 6px #00000042;
								transition: 0.5s;
								border: 1px solid transparent;		/* fuer den Uebergang */
						}
								@container eingabe (width < 750px) {
										.ansicht2_box_befestigung_flex_gruppe {
												width: 100%;
												flex: none;
										}
								}
						.ansicht2_box_befestigung_flex_gruppe.active {
								flex: 1 1 auto;
								border: 1px solid #444444;
								box-shadow: none;
						}
								@container eingabe (width < 750px) {
										.ansicht2_box_befestigung_flex_gruppe.active {
												flex: 0 0 100px;
										}
								}
						.ansicht2_box_befestigung_flex_gruppe:hover {
								border: 1px solid #444444;
								box-shadow: none;
						}


								/* Die Gruppen-Icons (Schrauben/Kleben/Klemmen/Magnet) */
								.ansicht2_box_befestigung_flex_auswahl_icon {
										flex: 0 0 auto;
										cursor: pointer;
										padding-left: 1.5em;
										padding-right: 1.5em;
										padding-top: 1.5em;
										padding-bottom: 1.5em;
								}
										.ansicht2_box_befestigung_flex_auswahl_icon img {
												display: block;
												margin-left: auto;
												margin-right: auto;
												padding: 4px;
										}


								.ansicht2_box_befestigung_flex_gruppe.active .ansicht2_box_befestigung_flex_auswahl_icon {
										cursor: default;
										text-decoration: underline;
										font-weight: bold;
										padding-left: 1.5em;
										padding-right: 1.5em;
										padding-top: 6px;
										padding-bottom: 6px;
								}
								@container eingabe (width < 750px) {
										.ansicht2_box_befestigung_flex_gruppe:not(.active) .ansicht2_box_befestigung_flex_auswahl_icon {
												padding: 10px;
												flex: 1 0 0;
												justify-content: center;
												align-items: center;
												display: flex;
												font-size: 14px;
												font-weight: 600;
												padding: 1.5em;
										}
												.ansicht2_box_befestigung_flex_gruppe:not(.active) .ansicht2_box_befestigung_flex_auswahl_icon img {
														margin-right: 10px;
														margin-left: 0;
														padding: 0;
												}
								}
								.ansicht2_box_befestigung_flex_gruppe.active .ansicht2_box_befestigung_flex_auswahl_liste {
										display: block;
								}

								.ansicht2_box_befestigung_flex_auswahl_liste {
										flex: 1 0 0;
										display: none;
								}
										.ansicht2_option_zeile {
												display: flex;
												align-items: center;
												margin-top: 2px;
												margin-bottom: 2px;
												margin-right: 2px;		/* damit die Mouse-Overbox nicht auf der aeusseren Box liegt */
												margin-left: 2px;

												container-type: inline-size;
												container-name: ansicht2_option_zeile;
										}
										.ansicht2_option_zeile:hover {
												outline: 1px solid #f3f3f3;
												border-radius: 5px;
										}
										.ansicht2_option_zeile.motor_ohne {		/* zur Abgrenzung zu den anderen Optionen */
												border-bottom: 1px solid #444444;
										}
												.ansicht2_option_zeile .haken {
														flex: 0 0 auto;
														cursor: pointer;
												}
												.ansicht2_option_zeile .bezeichnung {
														flex: 1 0 0;
														cursor: pointer;
														padding-right: 1em;
												}
												#ansicht_2 .bezeichnungOptionUeberschrift {
														font-weight: bold;
												}
														.ansicht2_option_zeile .bezeichnung .unser_tipp {
																color: #ffffff;
																background-color: #3781bd;
																border-radius: 3px;
																display: inline-block;
																text-transform: uppercase;
																padding-left: 7px;
																padding-right: 7px;
																padding-top: 3.5px;
																padding-bottom: 3.5px;
																margin-top: 4px;
																font-size: 10px;
														}
														.ansicht2_option_zeile .bezeichnung .bezeichnungBefestigungUeberschrift {
																font-weight: 600;
														}
														.ansicht2_option_zeile .bezeichnung .erklaerungBefestigung {
																font-size: 10px;
														}
												.ansicht2_option_zeile .infos {
														flex: 0 0 auto;
														display: flex;
														align-items: center;
														gap: 16px;
														padding: 8px;
												}
														.ansicht2_option_zeile .info {
																flex: 0 0 auto;
																cursor: pointer;
														}
																.ansicht2_option_zeile .info img {
																		display: block;
																}

														.ansicht2_option_zeile .haken img {
																margin-left: 8px;
																margin-right: 8px;
																margin-top: 4px;
																margin-bottom: 4px;
														}
										@container ansicht2_box_befestigung_flex (max-width: 350px) {
												.ansicht2_option_zeile .infos {
														display: grid;
														grid-template-columns: 1fr 1fr;
												}
										}

						@container ansicht2_box_befestigung_flex (max-width: 375px) {
								.ansicht2_box_befestigung_flex_gruppe {
										flex-direction: column;
										align-items: stretch;
								}
										.ansicht2_box_befestigung_flex_gruppe.active .ansicht2_box_befestigung_flex_auswahl_icon {
												display: flex;
												align-items: center;
												padding: 0;
												font-size: 14px;
										}
												.ansicht2_box_befestigung_flex_gruppe.active .ansicht2_box_befestigung_flex_auswahl_icon img {
														margin: 0;
														padding: 10px;
												}

												.ansicht2_option_zeile .haken img {
														margin-left: 20px;
														margin-right: 20px;
														margin-top: 0;
														margin-bottom: 0;
												}
												.ansicht2_option_zeile .bezeichnung {
														color: #444444;
												}
														.ansicht2_option_zeile .bezeichnung .bezeichnungBefestigungUeberschrift {
																font-weight: normal;
														}
														.ansicht2_option_zeile .bezeichnung .erklaerungBefestigung {
																font-size: 12px;
														}
														.ansicht2_option_zeile .bezeichnung .erklaerungBefestigung .anstrich {
																display: none;
														}
						}


						.ansicht2_auswahl_solarpanel {
								display: none;
								margin-right: 2px;
						}
						.ansicht2_auswahl_solarpanel.active {
								display: flex;
								align-items: center;
								margin-left: 42px;
						}
								.ansicht2_auswahl_solarpanel .bezeichnung {
										flex: 0 0 auto;
								}
								.ansicht2_auswahl_solarpanel .wahl {
										flex: 1 0 0;
										padding-left: 1em;
										display: flex;
										align-items: center;
										justify-content: flex-start;
								}
										.ansicht2_auswahl_solarpanel .wahl img {
												margin: 0;		/* ueberschreibt vom layout moegliches img { margin: auto; } */
										}
								.ansicht2_auswahl_solarpanel .info {
										flex: 0 0 24px;
										padding: 8px;
										box-sizing: content-box;		/* in einigen Shops ist border-box auf default eingestellt. das wuerde es hier durcheinander bringen */
										display: flex;
										align-items: center;
										justify-content: flex-start;
								}
										.ansicht2_auswahl_solarpanel .info img {
												margin: 0;		/* ueberschreibt vom layout moegliches img { margin: auto; } */
										}
								  .ansicht2_auswahl_solarpanel .wahl img
								, .ansicht2_auswahl_solarpanel .info img {
										cursor: pointer;
								}




				#ansicht2_box_schienenprofil_body {
						display: flex;
						align-items: center;
				}

				.ansicht2_box_flex_profil {
						flex: 1 0 0;
						display: flex;
						gap: 20px;
				}
				@container eingabe (width < 350px) {
						.ansicht2_box_flex_profil {
								flex-direction: column;
						}
				}
						.ansicht2_box_flex_profil > * {
								/* flex: 1 1 auto; Safari macht das leider nicht schoen. Besser ist hier flex: 1 0 0 oder eben individuel fuer jede box wie jetzt */
								display: flex;
								justify-content: space-between;
								gap: 10px;
						}
						.ansicht2a .ansicht2_box_flex_profil > * {
								flex-direction: column;
						}
						@container schienenprofil (width < 360px) {
								.ansicht2b .ansicht2_box_flex_profil > * {
										display: grid;
										/* grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
										grid-template-columns: 1fr 1fr;
								}
						}
								.ansicht2_box_flex_profil_plus {
										flex: 3 0 0;
								}
								.ansicht2_box_flex_profil_farbe {
										flex: 2 0 0;
								}
								.ansicht2_box_flex_profil > * .option {
										flex: 1;
								}

						.box_schienenprofil {
								container-type: inline-size;
								container-name: schienenprofil;
						}
								.box_schienenprofil .option {
										display: flex;
										align-items: center;
										justify-content: space-between;
										padding: 5px;
										cursor: pointer;
										box-shadow: 0px 4px 8px #00000042;
										transition: 0.3s;
										border: 1px solid transparent;		/* um bei der Hover-Animation, wenn ploetzlich ein Rand da ist, keinen Sprung zu haben */
								}
								.ansicht2b .box_schienenprofil .option {
										flex-direction: column;
										gap: 2px;
								}
								.box_schienenprofil .option:hover {
										box-shadow: none;
										border: 1px solid #dddddd;
								}
								.box_schienenprofil .option.selected {
										box-shadow: none;
										border: 1px solid #444444;
								}

										.box_schienenprofil .option .option_haken {
												display: none;
												flex: 0 1 40px;
												text-align: center;
										}
										.box_schienenprofil .option.selected .option_haken {
												display: block;
										}

										  .box_schienenprofil .option .option_kasten
										, .box_schienenprofil .option .option_farbbox
										{
												border: 2px solid #E7E7E7;
												border-radius: 3px;
												display: flex;
												align-items: center;
												justify-content: center;
										}
										.box_schienenprofil .option .option_kasten {
												flex: 0 0 57px;
												height: 57px;
										}
										.box_schienenprofil .option .option_farbbox {
												height: 40px;
										}
										.ansicht2a .box_schienenprofil .option .option_farbbox {
												flex: 0 0 40px;
										}
										.ansicht2b .box_schienenprofil .option .option_farbbox {
												width: 40px;
										}
												.box_schienenprofil .option .option_kasten img {
														width: 100%;
												}
												.box_schienenprofil .option .option_farbbox img {
														display: none;
												}
												.box_schienenprofil .option.selected .option_farbbox img {
														display: block;
												}
										.box_schienenprofil .option .option_text {
												text-align: center;
												flex: 1 0 auto;
										}
										.box_schienenprofil .option.selected .option_bez {
												font-weight: bold;
												text-decoration: underline;
										}


				.box_umschaltung {
						padding: 10px;
						cursor: pointer;
				}
						.ansicht2_box_flex_premium_head {
								display: flex;
								justify-content: space-evenly;
								align-items: center;
								margin-top: 1em;
								margin-bottom: 1em;
						}
								.ansicht2_box_flex_premium_head_tipp {
										font-weight: bold;
										background-color: #ffde0e;
										padding: 2px;
										flex: 0 0 auto;
								}
								.ansicht2_box_flex_premium_head_text {
										flex: 0 0 70%;
								}
						.ansicht2_box_flex_premium_button {
								background-color: #183B59;
								border-radius: 3px;
								display: flex;
								color: #ffffff;
								justify-content: space-evenly;
								align-items: center;
								padding: 9px;
						}
						.ansicht2_box_flex_premium_button:hover {
								font-style: italic;
						}
								.ansicht2_box_flex_premium_button img {
										/* die 2 Icons, fuer den weissen Platz da drunter */
										display: block;

								}
								.ansicht2_box_flex_premium_button_left {

								}
										.ansicht2_box_flex_premium_button_left img {
												width: 24px;
												height: 24px;
										}
								.ansicht2_box_flex_premium_button_text{

								}
								.ansicht2_box_flex_premium_button_right {

								}
										.ansicht2_box_flex_premium_button_right img {

										}




				#ansicht2_box_masse_body {
						container-type: inline-size;
						container-name: container-mass;
				}

						.ansicht2_masse {
								display: grid;

								grid-template-columns: 1fr 1fr 2fr;
								grid-template-areas:
										"bild eingabe hinweise"
										"bild messanleitung hinweise"
								;

								gap: 2em;
								margin-top: 1em;
								
								
						}
						
				#ansicht2_mobile_hinweisueberschrift {
						display: none;
				}
						
						@container container-mass (max-width: 700px) {
								.ansicht2_masse {
										grid-template-columns: 1fr 1fr;
										grid-template-areas:
												"bild eingabe"
												"bild messanleitung"
												"hinweise hinweise"
										;
								}
						}
						
						@container container-mass (max-width: 450px) {
							
								.ansicht2_masse {
										grid-template-columns: 2fr 1fr;

										grid-template-areas:
												"bild messanleitung"
												"eingabe eingabe"
												"hinweise hinweise"
										;

										align-items: center;
								}
								
								#ansicht2_mobile_hinweisueberschrift {
										display: flex;
										background-color: #FFDE0E;
										font-weight: bold;
										align-items: center;
										justify-content: space-between;
										cursor: pointer;
								}
								#ansicht2_mobile_hinweisueberschrift:hover {
										font-style: italic;
								}
										#ansicht2_mobile_hinweisueberschrift > * {
												padding-top: 10px;
												padding-bottom: 10px;
												padding-left: 20px;
												padding-right: 20px;
										}
										#ansicht2_mobile_hinweisueberschrift img {
												display: block;
										}

								#ansicht2_hinweisMasseingabe {
										margin-left: 2em;
										margin-right: 2em;
								}
								
						}
						



						.ansicht2_masse > .ansicht2_masse_bild {
								text-align: center;
								grid-area: bild;
						}
								.ansicht2_masse > .ansicht2_masse_bild img {
										width: 154px;
								}
						.ansicht2_masse > .ansicht2_masse_eingabe {
								font-size: 14px;
								grid-area: eingabe;
						}
						.ansicht2_masse > .ansicht2_masse_messanleitung {
								grid-area: messanleitung;
						}
						.ansicht2_masse > #ansicht2_hinweisMasseingabe {
								grid-area: hinweise;
						}

								.ansicht2_masse .linkMasseingabeMessanleitung {
										margin-left: 1.2em;
								}
						@container container-mass (max-width: 450px) {
										.ansicht2_masse .linkMasseingabeMessanleitung {
												margin-top: 0;
												margin-left: 0;
										}

								.ansicht2_masse > .ansicht2_masse_eingabe {
										text-align: center;
										display: flex;
										flex-direction: column;
										margin-left: auto;
										margin-right: auto;
										margin-top: 2em;
										margin-bottom: 2em;
								}
						}
								.ansicht2_masse .massblock {

								}
										.ansicht2_masse .mass {
												display: block;
										}
										.ansicht2_masse .mass.first {
												margin-bottom: 1.4em;
										}
												.ansicht2_masse label:not(.optionReSize label) {
														display: block;
														white-space: nowrap;
												}
												@container container-mass (max-width: 450px) {
														.ansicht2_masse label {
																display: inline-block;
														}
												}
														.ansicht2_masse label input:not(.optionReSize input){
																background: #F4F4F4 0% 0% no-repeat padding-box;
																box-shadow: inset 0px 2px 4px #00000040;
																border: 1px solid #E7E7E7;
																border-radius: 3px;
																padding: 10px;
																width: 80px;
																box-sizing: border-box;
																text-align: right;
																margin-right: 5px;
														}
														.ansicht2_masse .mass_bez {
																display: inline-block;
																width: 60px;
																text-align: left;
														}
														.ansicht2_masse .mass_umrechnung {
																margin-left: 0.5em;
														}
														.ansicht2_masse .mass_grenze {
																color: #888888;
																display: block;
																margin-top: 6px;
																font-size: 12px;
																cursor: help;
														}

														#ansicht_2 .groupPakethoehe {
																margin-top: 3em;
																margin-bottom: 1em;
														}

																#ansicht_2 .mass_umrechnung_pakethoehe {
																		display: none;		/* passt nicht so richtig ins Layout (ist ja bloss die Umrechnung) */
																}
																@media (max-width: 500px) {
																		#ansicht_2 .mass_umrechnung_pakethoehe {
																				display: inline;		/* im Mobilen passt es wieder */
																		}
																}

					#ansicht2_hinweisMasseingabe {
							display: none;
					}
					@media (max-width: 800px) {		/* isLayoutEinspaltig */
							#ansicht2_hinweisMasseingabe {
									margin-left: 2em;
									margin-right: 2em;
							}
					}
							#ansicht2_hinweisMasseingabe_container {
									display: flex;
									margin-top: 1em;
							}
							
							#ansicht2_hinweisMasseingabeList {
									list-style-type: none;
									padding-left: 0;
									margin-bottom: 0;
							}
									#ansicht2_hinweisMasseingabeList li {
											margin-left: 0;
											padding-left: 0;
									}
							
							#ansicht2_hinweisMasseingabe .left {
									background-color: #ffde0e;
									border-radius: 3px;
									padding: 1em;
									display: flex;
									align-items: center;
							}
							#ansicht2_hinweisMasseingabe .right {
									padding-left: 1em;
							}
							
							@container container-mass (max-width: 450px) {
									#ansicht2_hinweisMasseingabe_container {
											display: flex;
											overflow: hidden;
											max-height: 0;
											transition: 0.4s;
											margin-top: 0;
									}
									#ansicht2_hinweisMasseingabe.active #ansicht2_hinweisMasseingabe_container {
											background-color: #fffce6;
											max-height: 500px;
									}

											#ansicht2_hinweisMasseingabe.active #ansicht2_hinweisMasseingabeList {
													list-style-type: decimal;
													list-style-position: inside;
													margin-left: 2.5em;
													margin-right: 1.5em;
													margin-top: 1.5em;
													margin-bottom: 1.5em;
											}
													#ansicht2_hinweisMasseingabe.active #ansicht2_hinweisMasseingabeList li {
															margin-bottom: 1em;
															text-indent: -2ex;
													}
													#ansicht2_hinweisMasseingabe.active #ansicht2_hinweisMasseingabeList li:last-child {
															margin-bottom: 0;
													}
													#ansicht2_hinweisMasseingabe #ansicht2_mobile_hinweispfeil {
															transition: 0.4s;
															font-size: 16px;
													}
													#ansicht2_hinweisMasseingabe.active #ansicht2_mobile_hinweispfeil {
															transform: rotate(180deg);
													}
													
									#ansicht2_hinweisMasseingabe .left, #ansicht2_hinweisMasseingabe_Ueberschrift {
											display: none;
									}
													
							}

							.ansicht2_masse #ansicht2_hinweisMasseingabe_modell {
									display: flex;
									cursor: pointer;
									gap: 1em;
									margin-top: 2em;
							}

				#ansicht2_box_motor_body {
						container-type: inline-size;
						container-name: ansicht2_box_motor;
				}


						.ansicht2_box_motor_container {
								display: flex;
								gap: 4em;
								margin-right: 1em;
						}
								.ansicht2_box_motor_container_auswahl {
										flex: 1 0 0;
										border: 1px solid #444444;
								}
								.ansicht2_box_motor_container_kompatibel {
										flex: 0 0 auto;
										display: flex;
										flex-direction: column;
										justify-content: center;
										gap: 1em;
								}
										.ansicht2_box_motor_container_kompatibel_ueberschrift {
											
										}
										.ansicht2_box_motor_container_kompatibel_icons {
												display: flex;
												gap: 2em;
										}
												.ansicht2_box_motor_container_kompatibel_icons > * {
														position: relative
												}
														.ansicht2_box_motor_container_kompatibel_icons img {
																height: 32px;
														}
														.ansicht2_box_motor_container_kompatibel_icons .stern {
																position: absolute;
																right: -8px;
																top: 0;
														}

				@container ansicht2_box_motor (max-width: 700px) {
						.ansicht2_box_motor_container {
								gap: 2em;
								margin-right: 0;
						}
										.ansicht2_box_motor_container_kompatibel_icons {
												display: flex;
												gap: 1em;
										}
												.ansicht2_box_motor_container_kompatibel_icons img {
														height: 30px;
												}
				}
				@container ansicht2_box_motor (max-width: 600px) {
						.ansicht2_box_motor_container {
								flex-direction: column;
						}
										.ansicht2_box_motor_container_kompatibel_icons {
												gap: 2em;
												justify-content: space-evenly;
										}
				}


.vergleich_schienenprofile {
		background-color: #F4F4F4;
}
		.vergleich_schienenprofile .ueberschrift {
				font-size: 22px;
				padding: 25px;
				display: flex;
				align-items: center;
		}
				.vergleich_schienenprofile .ueberschrift .text {
						flex: 1 0 0;
				}
				.vergleich_schienenprofile .ueberschrift .schliessen {
						flex: 0 0 40px;
						height: 40px;
						background-color: #444444;
						color: #ffffff;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;
						font-size: 30px;
				}
				.vergleich_schienenprofile .ueberschrift .schliessen:hover {
						font-weight: bold;
				}
		.vergleich_schienenprofile .bild {

		}
				.vergleich_schienenprofile .bild img {
						width: 100%;
				}
		.vergleich_schienenprofile .erklaertext {
				font-size: 18px;
				padding: 25px;
		}




.fensterWFPremium {
		border-radius: 6px;
}
		.fensterWFPremium .fensterPremium_ueberschrift {
				background-color: #183B59;
				color: #ffffff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 3vh;
				padding-bottom: 3vh;
				padding-left: 3vw;
				padding-right: 3vw;
				font-size: 28px;
		}
		.fensterWFPremium button {
				font-size: 1.2em;		/* man beachte die default styles vom Shop, welche ggf ueberschrieben werden muessen */
		}
		@media (max-width: 800px) {
				.fensterWFPremium .fensterPremium_ueberschrift {
						font-size: 22px;
				}
		}
		@media (max-width: 600px) {
				.fensterWFPremium .fensterPremium_ueberschrift {
						font-size: 16px;
				}
		}
		@media (max-width: 450px) {
				.fensterWFPremium .fensterPremium_ueberschrift {
						font-size: 12px;
				}
		}
				.fensterWFPremium .fensterPremium_ueberschrift > * {
						display: flex;
						justify-content: space-between;
						align-items: center;
				}
						.fensterWFPremium .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;
						}
						.fensterWFPremium .fensterPremium_ueberschrift .rechts:hover {
								background-color: #092238;
						}
								.fensterWFPremium .fensterPremium_ueberschrift .links img {
										width: 42px;
										height: 42px;
										margin-right: 20px;
								}
								@media (max-width: 800px) {
										.fensterWFPremium .fensterPremium_ueberschrift .links img {
												width: 32px;
												height: 32px;
										}
								}
								.fensterWFPremium .fensterPremium_ueberschrift .links strong {
										margin-right: 0.5ch;
								}
								.fensterWFPremium .fensterPremium_ueberschrift .rechts img {
										width: 28px;
										height: 28px;
										margin-left: 20px;
								}
								@media (max-width: 800px) {
										.fensterWFPremium .fensterPremium_ueberschrift .rechts img {
												width: 22px;
												height: 22px;
										}
								}

		.fensterWFPremium .box {
				padding-bottom: 4vh;
				padding-left: 3vw;
				padding-right: 3vw;
				font-size: 18px;
				color: #183B59;
		}
		@media (max-width: 800px) {
				.fensterWFPremium .box {
						font-size: 14px;
				}
		}
				.fensterWFPremium .einleitungstext {
						margin-top: 1em;
						margin-bottom: 2em;
						font-weight: 600;
				}

				#fensterPremium .box2 {
						display: grid;
						grid-template-columns: 1fr 1fr;
						grid-template-areas:
							"box1 box2"
							"button1 button2"
						;
						column-gap: 50px;
				}
				@media (max-width: 500px) {
						#fensterPremium .box2 {
								grid-template-columns: 1fr;
								grid-template-areas:
									"box1"
									"button1"
									"box2"
									"button2"
								;
						}
				}
				#fensterPremiumMasse .box2{
						margin-bottom: 2em;
						display: flex;
						gap: 50px;
				}
						#fensterPremiumMasse .box2 > * {
								flex: 1 0 0;
						}
						.fensterWFPremium .box2 .ueberschrift, .fensterWFPremium .einleitungstext{
								font-size: 22px;
						}

						#fensterPremiumMasse .box2 .boxRechts{
								display: flex;
								align-items: end;
								justify-content: end;
						}


								.fensterWFPremium .box2 .ueberschrift {
										font-weight: bold;
										margin-bottom: 0.5em;
								}

								#fensterPremiumModellauswahl, #fensterPremiumStoffauswahl {
										display: block;
										margin-left: auto;
										margin-right: auto;
										margin-top: 1em;
										margin-bottom: 1em;
										border-radius: 6px;
										padding: 10px;
										width: 200px;
										cursor: pointer;
								}
								#fensterPremiumModellauswahl, #fensterPremiumMasseStoffauswahl {
										background-color: #357DBC;
										color: #ffffff;
										transition: 0.3s;
										border: none;
								}
								#fensterPremiumMasseStoffauswahl{
										border-radius: 6px;
										padding: 3px 20px;
										text-transform: uppercase;
										font-size: 1.2em;
										display: flex;
										align-items: center;
										cursor: pointer;

								}
										#fensterPremiumMasseStoffauswahl img{
												width: 2em;
												height: 2em;
										}

								#fensterPremiumModellauswahl:hover {
										background-color: #388DD8;
								}
								#fensterPremiumStoffauswahl {
										background-color: #ffffff;
										color: #357DBC;
										border: 1px solid #357DBC;
										transition: 0.5s;
								}
								#fensterPremiumStoffauswahl:hover {
										background-color: #f3f8fd;
								}
								#fensterPremiumModellauswahl img, #fensterPremiumStoffauswahl img {
										margin-right: 1em;
										width: 25px;
										height: 25px;
										vertical-align: middle;
								}
								@media (max-width: 800px) {
										#fensterPremiumModellauswahl img, #fensterPremiumStoffauswahl img {
												margin-right: 1em;
												width: 21px;
												height: 21px;
										}
								}