/*
		fuer die Tabs gibt es mehrere moegliche Styles:
		- tabsStyleAnsicht1
		- mobileBlocks
		- tabsStyleAnsicht3

*/

.tabsStyleAnsicht1 .tabHead {
		display: flex;
		container-type: inline-size;
		container-name: tabHead;
}
.mobileBlocks .tabHead {
		gap: 6px;
}

		.tabsStyleAnsicht1 .tabHead > * {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				border: 1px solid #cecece;
				padding: 1em;
				position: relative;
				left: 0;
				top: 1px;
				cursor: pointer;
				color: #888888;
				background-color: #ffffff;
		}
		  .tabsStyleAnsicht1 .classic .tabHead > *
		, .tabsStyleAnsicht1.classic .tabHead > *		/* je nachdem wo die Klassen .tabsStyleAnsicht1 und .classic gesetzt sind, hier eine alternative Schreibweise */
		{
				margin-right: 6px;
		}

				@media (max-width: 600px) {
						/* bei 3 Tabs hat das noch hingepasst, bei 4 nicht mehr */
						  .tabsStyleAnsicht1 .classic .tabHead > *
						, .tabsStyleAnsicht1.classic .tabHead > *
						{
								padding-left: 0.2em;
								padding-right: 0.2em;
								flex: 1 0 0;
								flex-direction: column;
						}
				}
		.tabsStyleAnsicht1 .tabHead > *.active {
				border-bottom: 1px solid #ffffff;
				color: #444444;
		}
				.tabsStyleAnsicht1 .tabHead > * > img {
						vertical-align: middle;
						width: 22px;
						height: 22px;
				}
				.tabsStyleAnsicht1 .tabHead > * > .bez {
						margin: 0.5em;
						hyphens: auto;
				}
		.tabsStyleAnsicht1 .tabHead > *.disabled {
				cursor: not-allowed;
				opacity: 0.4;
		}
		.tabsStyleAnsicht1 .tabHead > .noTab {
				border: 0;
				text-decoration: none;
				color: #444444;
		}

		/*
		
		im Mobilen Layout brauchen wir das
		
		@container tabHead (width < 600px) {
				.tabHead .noTab .bez {
						display: none;
				}
		}
		@container tabHead (width < 400px) {
				.tabHead .bez {
						display: none;
				}
		}
		*/

		
		
.tabsStyleAnsicht1 .tabWindow {
		border-top: 1px solid #cecece;
}
		.tabsStyleAnsicht1 .tabWindow > * {
				display: none;
				padding: 1em;
				max-width: 800px;		/* max-width hilft uebergeordneten Flex-Elementen bei der Breitenbestimmung*/
		}
		.tabsStyleAnsicht1 .tabWindow > *.active {
				display: block;
		}















/* .tabsStyleAnsicht3 erstmal ohne icon */
.tabsStyleAnsicht3 .tabHead {
		display: flex;
		gap: 1em;
		align-items: flex-start;
}

		.tabsStyleAnsicht3 .tabHead > * {
				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;
				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 */
				background-color: #ffffff;
		}

		.tabsStyleAnsicht3 .tabHead > *.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;
				text-decoration: underline;
				font-weight: 500;
		}
				.tabsStyleAnsicht3 .tabHead > * > .bez {
						hyphens: auto;
				}


.tabsStyleAnsicht3 .tabWindow {
		border: 2px solid #444444;
}
		.tabsStyleAnsicht3 .tabWindow > * {
				display: none;
				padding: 1em;
				background-color: #ffffff;
		}
		.tabsStyleAnsicht3 .tabWindow > *.active {
				display: block;
		}

















@media (max-width: 500px) {

		/*
				.mobileBlocks: diesen Style nur im Mobilen bei der Modellauswahl und Wahl der Befestigung
				bei z.B. der Modellbeschreibung gilt der bisherige Tab-Style
		*/


		.mobileBlocks .tabHead {
				flex-direction: column;
				gap: 26px;
		}
				.mobileBlocks .tabHead > * {
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: flex-start;
						box-shadow: 0px 2px 4px #CFCECE;
						border: 1px solid #000000;
						border-radius: 4px;
						padding: 12px;
						top: 0;
				}
						.mobileBlocks .tabHead > * > .bez {
								font-size: 16px;
								margin-top: 0;
								margin-bottom: 0;
								color: #000000;
						}
				.mobileBlocks .tabHead > *.active {
						border: 1px solid #000000;
				}
		.mobileBlocks .tabWindow {
				border-top: none;
		}
				.mobileBlocks .tabWindow > * {
						padding: 0;
				}
		.mobileBlocks.tabShowHeads {
				width: 60%;
				margin-left: auto;
				margin-right: auto;
		}
				.mobileBlocks.tabShowHeads .tabWindow > *.active {
						display: none;
				}
		.mobileBlocks.tabShowBodys .tabHead {
				display: none;
		}
				.mobileBlocks.tabShowBodys .tabHead > * {
						display: none;
				}
				.mobileBlocks.tabShowBodys .tabHead > *.active {
						display: flex;
						cursor: default;
						border: none;
						box-shadow: none;
				}
}