
.content_start {
	display: flex;
	justify-content: center;
	align-items: center;
}
.HG_bereich2 {
	background-color: rgb(255, 255, 255,0);
	background-image: url("/css/images_web/hg/HG_Hexagon_liegend.png");
	background-size: cover;
	background-position: center;
}
.HG_bereich3 {
	background-color: rgb(255, 255, 255,0);
	background-image: url("/css/images_web/hg/HG_Hexagon_liegend.png");
	background-size: cover;
	background-position: center;
}
.HG_bereich4 {
	background-color: rgb(255, 255, 255,0);
	background-image: url("/css/images_web/hg/HG_Hexagon_liegend.png");
	background-size: cover;
	background-position: center;
}
#meldung {
	position: fixed;
	top: 100px;
	left: 100px;
	width: 180px;
	height: 30px;
	color: tomato;
	z-index: 600;
}
#videobg{
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 100%;
	min-height: 100vh;
	z-index: 1;
	object-fit: cover;
	object-position: bottom;
	border: none;
	background-color: rgb(212, 217, 224);
	overflow: hidden;
	opacity: 1;
	}
.videofade-out {
	opacity: 0;
	animation-name: videofadeOpacity;
	animation-iteration-count: 1;
	animation-delay: 9s;
	animation-duration: 2s;
}
@keyframes videofadeOpacity {
	0% {
		opacity: 0;
	}
	80% {
		opacity: 1;
	}
}

@media only screen and (orientation: portrait) {
	#main {
				position: fixed;
				top: 0px;
				left: 0;
				height: auto;
				width: 100%;
				overflow: hidden;
				z-index: 1;
				background-color: rgba(255, 255, 255,1);
	}
.content {
				position: relative;
				top: 30px;
				left: 50%;
				transform: translateX(-50%);
				max-width: calc(100% - 1em);
				width: 60em;
				height: 100%;
				min-height: calc(100vh - 90px);
				z-index: 200;
				background-color: transparent;
				opacity: 90%;
				border: none;
				padding-top: 2em;
			}
	.spalten {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					align-content: stretch;
					align-items : stretch;
					justify-content: space-between;
					border: none;	
	}
	.zelle_1_reihig {
					width: 100%;
					z-index: 500;
					padding: 0;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					align-content: stretch;
					align-items : stretch;
					justify-content: space-between;
					border: none;
					margin-bottom: 1em;
		}
	.zellebgimg_1_reihig {
					background-color: rgb(255,255,255,1);
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
					min-width: 100%;
					height: 50vh;
					margin-bottom: 1em;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items : center;
		}
	.zellebgimgtext_1_reihig {
					background-color: transparent;
					min-width: 100%;
					border: none;
					height: auto;
					min-height: calc(40vh - 90px);
					overflow-y: auto;
	}
	.zelle_2_reihig {
					width: 100%;
					z-index: 500;
					padding: 0;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					align-content: stretch;
					align-items : stretch;
					justify-content: space-between;
					border: none;
					margin-bottom: 2em;
	}
	.zellebgimg_2_reihig {
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
					min-width: 100%;
					height: 50vh;
					margin-bottom: 1em;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items : center;
		}
	#drehdiv {
					position: relative;
					width: 40vh;
					height: 40vh;
					background-image: url(/css/logo/20210326_Logo_rund.png);
					border-radius: 50%;
					background-size: cover;
	}
	.zellebgimgtext_2_reihig{
					background-color: transparent;
					min-width: 100%;
					border: none;
					height: auto;
					min-height: calc(40vh - 90px);
					overflow-y: auto;
	}
	.spalten:last-child {
					margin-bottom: 15em;
		}
	
	
}
@media only screen and (orientation: landscape)  {	
	#main {
				position: fixed;
				top: 0px;
				left: 0;
				height: 100%;
				width: 100%;
				overflow: hidden;
				z-index: 1;
				background-color: rgba(255, 255, 255,1);
	}
.content {
					position: relative;
					top: 60px;
					left: 50%;
					transform: translateX(-50%);
					width: 96%;
					max-width: 1280px;
					height: calc(100vh - 90px);
					max-height: calc(100vh - 90px);
					min-height: calc(100vh - 90px);
					z-index: 200;
					background-color: transparent;
					opacity: 90%;
					border: none;
	}
	.content_2_columns {
					position: relative;
					top: 60px;
					left: 50%;
					transform: translateX(-50%);
					width: 96%;
					max-width: 1280px;
					height: calc(100vh - 90px);
					max-height: calc(100vh - 90px);
					min-height: calc(100vh - 90px);
					z-index: 200;
					background-color: transparent;
					opacity: 90%;
					border: none;
	}
	.spalten {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: space-between;
					align-items: stretch;
					overflow: hidden;
					border: none;
					background-color: transparent;
	}
	.zelle_1_reihig {
					width: 100%;
					z-index: 500;
					padding: 0;
					display: flex;
					flex-direction: row-reverse;
					flex-wrap: nowrap;
					align-content: stretch;
					align-items : stretch;
					justify-content: space-between;
					border: none;
					background-color: transparent;
	}
	.zellebgimg_1_reihig {
					background-color: rgb(194, 199, 228);
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
					min-width: 29%;
					margin: 1em;
					height: calc(100% - 2em);
					top: 0;
	}
	.zellebgimgtext_1_reihig {
					background-color: transparent;
					min-width: calc(69% - 2em);
					height: calc(100% - 2em);
					max-height: calc(50vh - 90px);
					min-height: calc(50vh - 90px);
					border: none;
					margin: 0 1em 0 0;
	}
	.zelle_2_reihig {
					width: 49%;
					z-index: 500;
					padding: 0;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					align-content: stretch;
					align-items : stretch;
					justify-content: space-evenly;
					
		}
	.zellebgimg_2_reihig  {
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
					width: calc(45vw - 90px);
					max-width: 480px;
					height: 29%;
					margin: 15px;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items : center;
		}
	#drehdiv {
					position: relative;
					width: 25vh;
					height: 25vh;
					background-color: transparent;
					background-image: url(/css/logo/20210326_Logo_rund.png);
					border-radius:50%;
					background-size: cover;
	}
	.zellebgimgtext_2_reihig  {
					background-color: transparent;
					width: calc(45vw - 90px);
					overflow-y: auto;
					padding-left: 0.3em;
					padding-right: 0.3em;
					max-width: 480px;
					height: 69%;
					max-height: 69%;
					border: none;
					text-align: justify;
					text-justify: inter-word;
	}

}	