#ansicht_3 {
		font-weight: 400;
		font-size: 1em;		/* in der Layoutvorlage waren das 16px */
}

/* Button Ansicht3 Blue Icon - Text: --"Messhilfe bestellen",-- "Richtig Messen bei Masseingabe" */
		.ansicht3Btn {
				color: #ffffff;
				text-decoration: none;
				border-radius: 3px;
				font-size: 14px;
				font-weight: bold;
				padding: 10px;
				cursor: pointer;
				text-transform: uppercase;
				
				position: relative;
				bottom: 0;
				left: 0;
				transition: all 0.2s;
		}
		.ansicht3Btn.blue {
				background-color: #3781BD;
		}
		.ansicht3Btn.orange {
				background-color: #F58220;
		}
		.ansicht3Btn:hover {
				color: #ffffff;
				bottom: 2px;
				left: 2px;
		}
				.ansicht3Btn > * {
						vertical-align: middle;
				}
				.ansicht3Btn img {
						margin-right: 0.5em;
				}

		.ansicht3_bar_bottom {
				display: flex;
				justify-content: flex-end;
				gap: 1em;
				margin-top: 1em;
		}
				.ansicht3_bar_bottom .button {
						display: inline-block;
						background-color: #3781BD;
						color: #FFFFFF;
						text-decoration: none;
						cursor: pointer;
						font-size: 0.9em;
						border-radius: 3px;
						padding: 0.75em 1em;
				}

#ansicht_3 .bereichsueberschrift {
		font-size: 1.25rem;
}

#layout3Grid {
		display: grid;

		gap: 20px;
		margin-top: 20px;

		grid-template-columns: 1fr;
		grid-template-areas:
				"stoff"
				"befestigung"
				"masse"
				"schienenprofil"
		;
}

		/* Stoff */
				#layout3Grid .box_stoff {
						cursor: pointer;
				}
						.ansicht3_box_ueberschrift_bez1 {
								vertical-align: middle;
						}
						.ansicht3_box_ueberschrift_img {
								width: 25px;
								height: 25px;
								overflow: hidden;
								border: 1px solid #444444;
								border-radius: 3px;
								vertical-align: middle;
								margin-left: 1em;
								margin-right: 0.5em;
						}
						.ansicht3_box_ueberschrift_bez2 {
								vertical-align: middle;
								font-style: italic;
						}


		/* Befestigung */
				.ansicht3_befestigung_wahl_gruppe {
						display: flex;
						gap: 1em;
						align-items: flex-start;
				}
						.ansicht3_befestigung_wahl_gruppe .ansicht3_befestigung_gruppe {
								border: 1px solid #444444;
								border-radius: 3px;
								flex: 1 0 0;
								display: flex;
								gap: 1em;
								align-items: center;
								justify-content: center;
								padding: 0.5em;
								cursor: pointer;
								background-color: #ffffff;
								
								position: relative;
								top: 2px;		/* Um beim Tab-Reiter den Hintergrund auf breite des Tab-Reites mit der Body-Box zu verbinden. Braucht eigentlich nur bei der.active Box gemacht zu werden, aber alle Reiter sollen auf einer Hoehe sein */

						}
						.ansicht3_befestigung_wahl_gruppe .ansicht3_befestigung_gruppe.active {
								border: 2px solid #444444;
								padding-bottom: 1.5em;
								border-bottom: none;
								border-bottom-left-radius: 0;
								border-bottom-right-radius: 0;
								border-bottom: 2px solid #ffffff;
						}

								.ansicht3_befestigung_auswahl_gruppe {
										display: none;
								}
								.ansicht3_befestigung_auswahl_gruppe.active {
										display: flex;
										flex-direction: column;
										gap: 1em;
										margin-top: 0.5em;
										margin-bottom: 0.5em;
								}

						.ansicht3_befestigung_wahl_box {
								display: flex;
								border: 2px solid #444444;
								border-bottom-left-radius: 3px;
								border-bottom-right-radius: 3px;
								padding-left: 1em;
								padding-right: 1em;
								padding-top: 0.5em;
								padding-bottom: 0.5em;
								align-items: center;
								background-color: #ffffff;
						}
								.ansicht3_befestigung_wahl_box .ansicht3_befestigung_auswahl {
										flex: 1 0 0;
								}
										.ansicht3_box_befestigung_auswahl_box {
												cursor: pointer;
												display: flex;
												gap: 0.75em;
										}
												.ansicht3_box_befestigung_auswahl_box .icon {
														flex: 0 0 auto;
												}
												.ansicht3_box_befestigung_auswahl_box .text {
														flex: 1 0 0;
												}
								.ansicht3_befestigung_wahl_box .ansicht3_befestigung_bild {
										flex: 0 0 172px;
										position: relative;
								}
										.ansicht3_befestigung_wahl_box .ansicht3_befestigung_bild #ansicht3_befestigung_bild_img {
												width: 100%;
												aspect-ratio: 1 / 1;		/* hilft dem browser beim rendern, noch bevor das Bild fertig geladen ist */
												display: block;
										}
										.ansicht3_befestigung_wahl_box .ansicht3_befestigung_bild #ansicht3_befestigung_bild_i {
												position: absolute;
												top: 0.5em;
												right: 0.5em;
												cursor: pointer;
										}



		/* Masse */

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

						.ansicht3_masse {
								display: grid;

								grid-template-columns: 8fr 8fr 13fr;
								grid-template-rows: auto 1fr;
								grid-template-areas:
										"bild eingabe messanleitung"
										"bild eingabe hinweise"
								;

								gap: 2em;
								margin-top: 1em;


						}
						@container container-mass (max-width: 800px) {
								.ansicht3_masse {
										grid-template-columns: 6fr 8fr 13fr;
								}
						}
						@container container-mass (max-width: 700px) {
								.ansicht3_masse {
										grid-template-columns: 1fr 1fr;
										grid-template-rows: auto;
										grid-template-areas:
												"bild eingabe"
												"messanleitung messanleitung"
												"hinweise hinweise"
										;
								}
						}

						@container container-mass (max-width: 450px) {

								.ansicht3_masse {
										grid-template-columns: 4fr 3fr;
										grid-template-rows: auto;

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

										align-items: center;
								}

										.ansicht3_masse > .ansicht3_masse_anleitung {
												flex-direction: column;
												gap: 1em;
										}

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

						}




						.ansicht3_masse > .ansicht3_masse_bild {
								text-align: center;
								grid-area: bild;
						}
								.ansicht3_masse > .ansicht3_masse_bild img {
										width: 154px;
								}
						.ansicht3_masse > .ansicht3_masse_eingabe {
								font-size: 14px;
								grid-area: eingabe;
						}
						.ansicht3_masse > .ansicht3_masse_anleitung {
								grid-area: messanleitung;
								display: flex;
								justify-content: space-between;
						}
						.ansicht3_masse > #ansicht3_hinweisMasseingabe {
								grid-area: hinweise;
								border: 1px solid #444444;
								border-radius: 3px;
								padding: 0.8em;
						}

						@container container-mass (max-width: 450px) {
										.ansicht3_masse .linkMasseingabeMessanleitung {
												margin-top: 0;
										}

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

								}
										.ansicht3_masse .mass {
												display: block;
										}
										.ansicht3_masse .mass.first {
												margin-bottom: 1.4em;
										}
												.ansicht3_masse label:not(.optionReSize label) {
														display: block;
														white-space: nowrap;
												}
												@container container-mass (max-width: 450px) {
														.ansicht3_masse label {
																display: inline-block;
														}
												}
														.ansicht3_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;
														}
														.ansicht3_masse .mass_bez {
																display: inline-block;
																width: 60px;
																text-align: left;
														}
														.ansicht3_masse .mass_umrechnung {
																margin-left: 0.5em;
														}
														.ansicht3_masse .mass_grenze {
																color: #888888;
																display: block;
																margin-top: 6px;
																font-size: 12px;
																cursor: help;
														}

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

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

														#ansicht_3 .ansicht3optionReSize {
																display: inline-flex;
																align-items: center;
																gap: 1em;
																margin-top: 2em;
																margin-bottom: 1em;
														}
																#ansicht_3 .ansicht3optionReSize > * {
																		flex: 0 0 auto;
																}
																#ansicht_3 .ansicht3optionReSize .haken {
																		cursor: pointer;
																}
																#ansicht_3 .ansicht3optionReSize .bild {
																		cursor: default;
																}
																#ansicht_3 .ansicht3optionReSize .bez {
																		cursor: default;
																}
																#ansicht_3 .ansicht3optionReSize .openDetails {
																		cursor: pointer;
																}

					#ansicht3_hinweisMasseingabe {
							display: none;
					}
					@media (max-width: 800px) {		/* isLayoutEinspaltig */
							#ansicht3_hinweisMasseingabe {
									margin-left: 2em;
									margin-right: 2em;
							}
					}
							#ansicht3_hinweisMasseingabeList {
									list-style-type: none;
									padding-left: 0;
									margin-bottom: 0;
									margin-top: 0.5em;
							}
									#ansicht3_hinweisMasseingabeList li {
											margin-left: 0;
											padding-left: 0;
									}
									#ansicht3_hinweisMasseingabeList li.nichtansicht3 {
											display: none;
									}

							@container container-mass (max-width: 450px) {
									#ansicht3_hinweisMasseingabe.active #ansicht3_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;
									}
											#ansicht3_hinweisMasseingabe.active #ansicht3_hinweisMasseingabeList li {
													margin-bottom: 1em;
													text-indent: -2ex;
											}
											#ansicht3_hinweisMasseingabe.active #ansicht3_hinweisMasseingabeList li:last-child {
													margin-bottom: 0;
											}
							}


							.ansicht3_profil_group {
									display: flex;
									gap: 1em;
							}

									.ansicht3_profil_farbe {
											flex: 1 0 0;
											overflow: hidden;
											gap: 1em;
									}
											.ansicht3_profil_farbe_gruppe {
													display: flex;
													gap: 1em;
													flex-wrap: wrap;		/* flex-direction: column */
											}
													.ansicht3_profil_farbe .option {
															flex: 0 1 280px;
															cursor: pointer;
															display: flex;
															gap: 1em;
															align-items: center;
													}
															.ansicht3_profil_farbe .option .icon img {
																	display: block;
															}
													.ansicht3_profil_farbe .option.active {
															cursor: default;
													}
									.ansicht3_profil_foto {
											flex: 0 0 150px;
									}
											.ansicht3_profil_foto img {
													width: 100%;
													border: 1px solid #444444;
													box-sizing: border-box;
											}