/* Box-Modell / Dimensionen */
html { box-sizing: border-box; font-size: 16px; line-height: 1.2;
	overflow-y: auto; scrollbar-gutter: stable; background-color: gray;
}
*, *::before, *::after { box-sizing: inherit;
	outline: 1px solid rgba(255, 0, 0, 0.5);
		padding: 0px;
		margin: 0px;
}
body{
	margin: 3px; /* 8 = browser default */
	min-width: 250px;
	max-width: 1200px; /* 6"~296px inkl. margin */
/*	height: auto; */
	background-color: silver;
	font-family: verdana;
	color: purple;	
}
header{
	height: 125px;
	display: flex; /* Must be flex or inline-flex */
	align-items: center;	
}
		#signet {
			display: flex;
			flex-shrink: 0;
			justify-content: center; /* horizontal */
			align-items: center; /* vertikal */
			overflow: hidden; /* sonst ragt Bild bei :hover heraus */
			}
			.signet img {
				height: 90px;
				width: 90px;
				display: block; /* verhindert Inline-Abstand */
				object-fit: cover; /* skaliert Bild, ohne zu verzerren */
			}
			.signet img:hover {
				transition: transform 0.3s;
				transform: scale(1.1);
				}
		#logotype {
			display: flex;
			flex-direction: column;
			flex-shrink: 0;
			padding: 0 5px;
		}
			[class^="logotype_"] {
				font-family: Franklin Gothic, Arial Black, sans-serif;
				line-height: 1.25;
				cursor: default;
			}
			.logotype_comp {
				text-align: left;
				font-size: 32px;
			}
			.logotype_name {
				text-align: right;
				font-size: 40px;
				font-weight: bold;
			}
		/* flex-head-wrapper */
		.flex-head {	
			display: flex;
			flex: 1;
			flex-shrink: 0;
			gap: 20px; /* Abstand zwischen Text und Docs */	
		}
			/* Kontrollstelle-Icon */
			#kontrollstelle { display: none;
			}
			/* Kontrollstelle-Text */
			.header_text {
				width: 100%;
				align-self: center;
				text-align: center;
				padding: 5px;
				cursor: pointer;
			}
			/* Info-Menü */	
			#header_docs {
				margin-left: auto;
				flex-shrink: 0;
				width: 80px;
			}
				.header_docs {
					text-align: right;
					font-size: 16px;
					font-weight: normal;
				}
				.header_docs a{
				/* 	display: (inline-)block; kollidiert vermutlich mit br */
					color: darkblue;
					text-decoration: none;
				}
				.header_docs a:hover{
					font-weight: bold;
					transform: scale(1.2);
				}
			/* Info-Burger */
			#burger-menu { display: none; /* check-box*/
			}
				.burger { display: none; /* burger-icon*/
				}
	/* Responsive */
	@media (max-width: 550px) {
		.header_text { display: none; 
		}
		.flex-head {
			display: flex;
			flex-direction: column;
			position: relative;
			margin-left: auto;
			flex: 1;
			flex-shrink: 0;
			gap: 5px; /* Abstand zwischen Text und Docs */
		}
		#kontrollstelle {
			display: flex;
			margin-left: auto;
			font-size: 1.5rem;
			cursor: pointer;
		}
		.burger {
			display: flex;
			margin-left: auto;
			font-size: 2rem;
			cursor: pointer;
		}
		#header_docs {
			display: none;
			position: absolute;
			top: 100%;
			right: 3px; /* body margin*/
			left: auto; /* absichern */
			flex-direction: column;
			z-index: 10;
		}
		#header_docs br {
			display: none;
		}
		#burger-menu:checked ~ #header_docs {
			display: flex;
		}		
	}
/* NAVIGATION */
nav {
	padding: 3px 10px;
	background-color: #e6f2e6;
}
			.navi_docs {
				text-align: center;
				font-size: 14px;
				font-weight: bold;
			}
			.navi_docs a{
				text-decoration: none;
			}
			.navi_docs a:hover{
				text-decoration: underline;
			}
/* CONTENT */
	#start, #home, #main {
	min-height: 200px;
}
/* CONTENT 
 .content{
	margin-left: 150px;
	margin-right: 15px;
	padding: 15px;
	min-width: 535px;
	min-height: 300px;
	color: grey;
 }
 .home{
	margin-left: 15px;
	margin-right: 15px;
	padding: 15px;
	min-width: 670px;
	min-height: 300px;
	color: grey;
 }
 .col-left{
	padding: 15px;
	min-width: 418px;
	min-height: 300px;
	width: auto;
	float: left;
	color: grey;
 }
 .col-right{
	padding: 15px;
	min-width: 418px;
	min-height: 300px;
	width: auto;
	float: right;
	color: grey;
 }
*/
/* FOOTER */
footer{
	display: flex;
	flex-direction: column;
	font-size: 10px;
	background-color: lightgrey;
	position: relative;
	overflow: visible; 
}
	.footer_text, .footer_docs {
		align-self: center;
		text-align: center;
		flex: 1 1 100%;
	}
		.footer_text a{
			text-decoration: none;
		}
		.footer_docs { 
			font-size: 10px;
			font-weight: bold;
			line-height: 1.5
		}		
		.footer_docs a {
			display: inline-block;
			text-decoration: none;
		}
		.footer_docs a:hover{
			filter: brightness(65%);
		}
	#w3c, #design {
		align-self: flex-end;
		flex: 0 0 auto;
		width: 135px;
		text-align: center;
		position: absolute;
	}
	#w3c {
		bottom: -30px;
	}
		#w3c a {
			text-decoration: none; /* entfernt den Unterstrich */
			display: inline-block; /* verhindert Unterstreichung im Zwischenraum */
			margin-right: 2px; /* Abstand zwischen den Bildern */
		}
		#w3c a:last-child {
			margin-right: 0; /* kein Extra-Abstand am Ende */
		}	
			#w3c img {
				vertical-align: middle;	
				border: none;
			}
	#design {
		bottom: -45px; 
		font-size: 10.5px;
		font-family: Grotesque, Arial Black, sans-serif; 
		font-weight: normal;
		color: goldenrod;
		cursor: default;
	}
		 #design:hover { color: red; }
/* ENDE */