#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;
		}
		#eingabe.elemLt450 .ansicht2BtnBlueIconText {
				flex-direction: column;
				align-items: center;
				width: 80px;
				box-sizing: border-box;
				text-align: center;
				font-weight: normal;
		}
				#eingabe.elemLt450 .ansicht2BtnBlueIconText img {
						width: 32px;
						height: 24px;
						margin-right: 0;
						padding: 0.8em;
				}
		.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: 2fr 1fr 2fr;
		grid-template-rows: auto auto auto auto;

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

#layoutGrid.ansicht2a.ohneWfagVerweise{
		grid-template-areas:
				"stoff modell modell"
				"befestigung befestigung befestigung"
				"masse masse schienenprofil"
				"masse masse leer"
		;
}

#eingabe.elemLt850 #layoutGrid.ansicht2a {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto auto auto auto auto;

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

#eingabe.elemLt550 #layoutGrid.ansicht2a {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto auto auto auto;

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

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

		grid-template-areas:
				"stoff infopremium infopremium"
				"messhilfe messhilfe messhilfe"
				"masse masse masse"
				"befestigung befestigung schienenprofil"
				"motor motor motor"
				"zubehoer zubehoer zubehoer"
		;
}
#eingabe.elemLt750 #layoutGrid.ansicht2b {
		grid-template-columns: 1fr 1fr;		/* fuer die erste Zeile, so dass stoff und infopremium besser aufgeteilt sind - befestigung und schienenprofil muss dann neu angepasst werden */
		grid-template-areas:
				"stoff infopremium"
				"messhilfe messhilfe"
				"masse masse"
				"befestigung schienenprofil"
				"motor motor"
				"zubehoer zubehoer"
		;
}

#eingabe.elemLt650 #layoutGrid.ansicht2b {
		/* grid-template-columns: 1fr;  */
		grid-template-columns: 100%;		/* der scrollcontainer funktioniert so besser */
		grid-template-areas:
				"infopremium"
				"stoff"
				"messhilfe"
				"masse"
				"befestigung"
				"schienenprofil"
				"motor"
				"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 {
						font-size: 12px;
				}
				#layoutGrid .box .box_body label {
						font-size: 1em !important;		/* wird im Layout auf 0.9 gesetzt - das ist hier zu klein */
				}
				#ansicht2_box_stoff_body {
						/* jetzt hier der Workaround zum beschriebenen Problem */
						display: flex;
				}


				.box_stoff .box_body {
						cursor: pointer;
				}


				.box_infopremium {
						background-image: url(/plissee/konfigurator/bilder/ansicht2b-premium-hintergrund.webp);
						background-size: cover;
				}
						#ansicht2_box_infopremium_body {
								display: flex;
								align-items: center;
								justify-content: center;
						}
								.ansicht2InfopremiumBoxWhite {
										/* background-color: rgba(255, 255, 255, 0.6); */
										
										backdrop-filter: blur(4px);
										background-color: #E2E2E2B2;
										
										display: grid;
										gap: 4px;
										grid-template-columns: auto auto;
										grid-template-rows: auto auto;

										grid-template-areas:
												"abzeichen ueberschrift"
												"abzeichen sterne"
										;

										padding-left: 2em;
										padding-right: 2em;
										padding-top: 0.5em;
										padding-bottom: 0.5em;
										border-radius: 4px;
								}
										.ansicht2InfopremiumBoxWhite_abzeichen {
												grid-area: abzeichen;
												text-align: center;
										}
										.ansicht2InfopremiumBoxWhite_ueberschrift {
												grid-area: ueberschrift;
												text-align: center;
												font-size: 20px;
												font-weight: 500;
										}
										.ansicht2InfopremiumBoxWhite_sterne {
												grid-area: sterne;
												text-align: center;
										}
												.ansicht2InfopremiumBoxWhite_sterne img {
														margin-left: 2px;
														margin-right: 2px;
												}

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

						grid-template-areas:
								"image headline headline"
								"image description button"
						;
				}
				#eingabe.elemLt750 #ansicht_2 .ansicht2_box_messhilfe {
						grid-template-columns: 120px auto;
						grid-template-rows: auto auto auto;

						grid-template-areas:
								"image headline"
								"image description"
								"image button"
						;
				}
				#accordion_mobile_content .ansicht2_box_messhilfe {				/* aktuell wird dieses Element zur Ansicht 1 / accordion_mobile_content kopiert */
						display: grid;
						gap: 20px;
						grid-template-columns: 1fr;

						grid-template-areas:
								"headline"
								"description"
								"button"
						;
				}
						.ansicht2_box_messhilfe_image {
								grid-area: image;
								align-self: end;
						}
						#accordion_mobile_content .ansicht2_box_messhilfe_image {
								display: none;
						}

								.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: flex;
						align-items: center;
						justify-content: space-between;
						max-width: 244px;
						margin-left: auto;
						margin-right: auto;
						gap: 10px;
				}
						.ansicht2_box_stoff_bez {
								flex: 1 0 0;
						}
						.ansicht2_box_img {
								flex: 0 0 50px;
								height: 50px;
								overflow: hidden;
								border: 1px solid #444444;
								border-radius: 3px;
						}
								.ansicht2_box_img img {
										display: block;
										width: 100%;
								}
						.ansicht2_box_icon {
								flex: 0 0 50px;
								height: 50px;
								text-align: center;
								line-height: 50px;
								box-shadow: 0px 4px 8px #00000042;
								border-radius: 3px;
								margin-top: 11px;
								margin-bottom: 11px;
								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_modell {
						display: flex;
						justify-content: space-evenly;
						align-items: center;
						margin-left: 2em;
						margin-right: 2em;
				}
						.ansicht2_modell > div {
								margin-top: 1em;
								margin-bottom: 1em;
						}
								.ansicht2_modell .bezeichnung {
										font-weight: bold;
										font-size: 12px;
								}
								.ansicht2_modell .zusatz {
										font-size: 11px;
								}
								.ansicht2_modell .link {
										margin-top: 1em;
										font-size: 10px;
										text-decoration: underline;
										cursor: pointer;
										display: inline-block;
								}
						.ansicht2_modell .modellbild {
								width: 54px;
								margin-left: 1em;
								margin-right: 1em;
						}
						.ansicht2_modell .info {
								cursor: pointer;
								padding-left: 1em;
						}











				.ansicht2_box_befestigung_flex {
						display: flex;
						gap: 2.5%;
						align-items: center;
				}
				#eingabe.elemLt750 .ansicht2_box_befestigung_flex {
						flex-direction: column;
						gap: 10px;

						container-type: inline-size;
						container-name: ansicht2_box_befestigung_flex;
				}
						.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 */
						}
								#eingabe.elemLt750 .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;
						}
								#eingabe.elemLt750 .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;
								}
								#eingabe.elemLt750 .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;
								}
										#eingabe.elemLt750 .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;
										}
										#eingabe.elemLt450 .ansicht2_option_zeile {
												display: grid;
												grid-template-areas:
														"haken bezeichnung"
														"infos infos"
												;
												grid-template-columns: auto 1fr;
										}
												.ansicht2_option_zeile .haken {
														flex: 0 0 auto;
														cursor: pointer;
												}
												#eingabe.elemLt450 .ansicht2_option_zeile .haken {
														grid-area: haken;
												}
												.ansicht2_option_zeile .bezeichnung {
														flex: 1 0 0;
														cursor: pointer;
														padding-right: 1em;
												}
														.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;
														}
												#eingabe.elemLt450 .ansicht2_option_zeile .bezeichnung {
														grid-area: bezeichnung;
												}
												.ansicht2_option_zeile .infos {
														flex: 0 0 auto;
														display: flex;
														align-items: center;
														gap: 16px;
														padding: 8px;
												}
												#eingabe.elemLt450 .ansicht2_option_zeile .infos {
														grid-area: infos;
														margin-top: 1em;
														margin-bottom: 1em;
														margin-left: 50px;
												}
														.ansicht2_option_zeile .info {
																flex: 0 0 auto;
																cursor: pointer;
														}
																.ansicht2_option_zeile .info img {
																		display: block;
																}
														#eingabe.elemLt450 .ansicht2_option_zeile .info {
																padding-left: 14px;
																padding-right: 14px;
														}

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

						@container ansicht2_box_befestigung_flex (max-width: 475px) {
								.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_box_schienenprofil_body {
						display: flex;
						align-items: center;
				}

				.ansicht2_box_flex_profil {
						flex: 1 0 0;
						display: flex;
						gap: 20px;
				}
				#eingabe.elemLt350 .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;
						}
						.ansicht2b .ansicht2_box_flex_profil > * {
								display: grid;
								grid-template-columns: repeat(auto-fit, minmax(100px, 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 {
						}
								.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 derHover-Animation, wenn ploetzlich ein Rand da ist, keinen Sprung zu haben */
								}
								.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 {
												flex: 0 0 40px;
												height: 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-rows: auto auto;
								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-rows: auto auto auto;
										grid-template-areas:
												"bild eingabe"
												"bild messanleitung"
												"hinweise hinweise"
										;
								}
						}
						
						@container container-mass (max-width: 450px) {
							
								.ansicht2_masse {
										grid-template-columns: 2fr 1fr;
										grid-template-rows: auto auto auto;

										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 {
														display: block;
														white-space: nowrap;
												}
												@container container-mass (max-width: 450px) {
														.ansicht2_masse label {
																display: inline-block;
														}
												}
														.ansicht2_masse label 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 img {
														height: 32px;
												}

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

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