﻿
:root {
	--HDFormat: calc( 56.25% );
	--ScreenBorder: 80px;
	--COL_Panel_BG_HL: #453952; /* #150922  21  9  34 */
	--MB_PADDING: 0.7em 0.3em;
	--SCREEN_MODE: 0;
}

* {
	margin: 0px;
	padding: 0px;
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Standard */
	text-rendering: optimizeLegibility;
	box-sizing: border-box;
	font-family: "OpenSans";
}

/* Begin ObjectBlending | www.https://cssanimate.com */

.ObjectBlending {
	animation: ObjectFadeIn ease 1s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	animation-fill-mode: forwards; /*when the spec is finished*/
	-webkit-animation: ObjectFadeIn ease 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-fill-mode: forwards; /*Chrome 16+, Safari 4+*/
	-moz-animation: ObjectFadeIn ease 1s;
	-moz-animation-iteration-count: 1;
	-moz-transform-origin: 50% 50%;
	-moz-animation-fill-mode: forwards; /*FF 5+*/
	-o-animation: ObjectFadeIn ease 1s;
	-o-animation-iteration-count: 1;
	-o-transform-origin: 50% 50%;
	-o-animation-fill-mode: forwards; /*Not implemented yet*/
	-ms-animation: ObjectFadeIn ease 1s;
	-ms-animation-iteration-count: 1;
	-ms-transform-origin: 50% 50%;
	-ms-animation-fill-mode: forwards; /*IE 10+*/
}

@keyframes ObjectFadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-moz-keyframes ObjectFadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes ObjectFadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-o-keyframes ObjectFadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-ms-keyframes ObjectFadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* End ObjectBlending */



html, body {
	font-family: 'OpenSans', Helvetica, Arial, sans-serif;
	min-width: 480px;
}

/*

Tablet Desktop Grün  Portrait Perfect
Tablet Desktop Blau  Landscape Perfect 
Tablet mobile Grün  Portrait Perfect
Tablet mobile Blau  Landscape Perfect 

Handy Desktop Blau  Portrait 22 30
Handy Desktop Blau  Landscape 16 20
Handy Mobile  rot   Portrait  perfect
Handy Mobile  grün  Landscape perfect
*/
.MenuMode {
	display: flex;
}
.ScreenMode {
	display: flex;
}

.FTCopyRight {
	display: flex;
}

/* Smartphones (Portrait) */
@media only screen and (max-width: 480px) {
	/* Stile für Handy */
	:root {
		--MB_PADDING: 0.7em 0.3em;
		--SCREEN_MODE: 1;
	}
	body {
		font-size: 16px;
		background-color: #990000;
		text-align: center;
	}
	.MenuMode {
		display: block;
	}
	.ScreenMode {
		display: block;
	}
	.FTCopyRight {
		display: block;
	}
}

/* Tablets (Portrait) / Kleine Bildschirme */
@media only screen and (min-width: 481px) and (max-width: 768px) {
	/* Stile für Tablets */
	:root {
		--MB_PADDING: 0.9em 0.5em;
		--SCREEN_MODE: 2;
	}
	body {
		font-size: 16px;
		background-color: green;
		text-align: center;
	}
	.ScreenMode {
		display: block;
	}
	.FTCopyRight {
		display: block;
	}

}

/* Tablets (Landscape) / Kleine Laptops */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
	/* Stile für Tablet Querformat */
	:root {
		--MB_PADDING: 0.8em 0.4em;
		--SCREEN_MODE: 4;
	}
	body {
		font-size: 16px;
		background-color: blue;
		
		text-align: center;
	}
}

/* PC Desktop (Landscape) / Kleine Laptops */
@media only screen and (min-width: 1025px) {
	/* Stile für PC */
	:root {
		--MB_PADDING: 0.7em 0.3em;
		--SCREEN_MODE: 8;
	}
	body {
		font-size: 18px;
		background-color: orangered;
		text-align: center;
	}
}



.FullWideScreen {
	text-align: center;
	width: 100%;
	min-width: var(--DIM_MOB_W);
	display: inline-block;
}

.WideScreen {
	margin: 0px auto;
	border-radius: 0px;
	max-width: 1280px;
	display: block;
}

.Txt3Sp {
	
	column-count: 3;
	text-align: justify;
	text-justify: inter-word;
}