/* ********* */
/* Allgemein */
/* ********* */
	
	body {
		background-color:rgba(28,28,28,1);
		/* background-color:rgba(0,0,0,1);*/
	
		width:100%; 
		
		border:0px;
		padding:0px;
		margin:0px;
		width:100%;
		height:100%;
	
	/* 	font-family:Arial; */
		font-family: 'Roboto', sans-serif;
		
		text-decoration:none;	

		display:flex;
		flex-direction: row;	
		align-items: stretch; 
		justify-content: center;		
	}

	
	.noWRAPe {
		overflow:hidden;
		white-space:nowrap;
		text-overflow: ellipsis; 
	}
	
	
	div, h1, h2, h3, h4, h5, h6 {
		border:0px;
		padding:0px;
		margin:0px;
	}
	table {
		border-collapse:collapse;
	}
	
	
	.wichtigFuerChromeVideo {		/*Wenn KEIN div-Elemet über dem Video-Element, dann wird das Video etwas dunkler gerendert. Sobald man nach unten scrollt wird es eider normal hell!! Verrrueckt!!		*/
	}
	
/* ******** */
/*  Frame   */
/* ******** */	
	#MainFrame, .MheadlineBGmainframe {	
		background-color:rgba(237,237,237,1);
	}
	
	#MainFrame, #headlineBG, #headlineBox, #homelogoCenter {
		top:calc(2px + 0.6vw);
		width:calc(84%); 
		max-width:1800px;
	}
	#MainFrame {								/* 1546*734Pixel Laptop@125% */
		position:relative;
		left:calc(0px);
		z-index:100;
		height:auto;		
		/* box-shadow:0px 0px 3vw rgba(0,0,0,0.15); */
	}
	@media  screen and (max-width: 1480px) {		
		#MainFrame, #headlineBG, #headlineBox, #homelogoCenter {
			width:calc(84%);
		}
	}
	@media  screen and (max-width: 1280px) {		
		#MainFrame, #headlineBG, #headlineBox, #homelogoCenter {
			width:calc(86%);
		}
	}
	@media  screen and (max-width: 1080px) {		
		#MainFrame, #headlineBG, #headlineBox, #homelogoCenter {
			width:calc(88%);
		}
	}@media  screen and (max-width: 880px) {		
		#MainFrame, #headlineBG, #headlineBox, #homelogoCenter {
			width:calc(90%);
		}
	}
	@media  screen and (max-width: 680px) {		
		#MainFrame, #headlineBG, #headlineBox, #homelogoCenter {
			width:calc(92%);
		}
	}
	@media  screen and (max-width: 440px) {			/* Hdy */
		#MainFrame, #headlineBG, #headlineBox, #homelogoCenter {
			width:calc(100%);
			top:0px;
		}
		#MainFrame {
			box-shadow:inherit;
		}	
	} 
	@media  screen and (max-width: 330px) {		
	}	
	
	
	#MainFrameContent {
		position:relative;
		z-index:100;
		width:100%; 
	}



	
	
/* ************/
/* Bottomline */
/* ************/	
	#MainFrameBottom {
		position:relative;
		width:100%;
		z-index:10;
	}
	
	/* Bottom Line */
	#MainMenuBottom {
		z-index:100;
		display:flex; 
		justify-content:center;
		text-align:center;
		
		width:100%;
		height:auto;  	
		padding-top:8px; 
		padding-bottom:8px; 
		background-color:rgba(20,20,20,0.9);
	}



	
/* ***********/
/* Headline  */
/* ***********/
	#homelogo {
		position:absolute; 
		z-index:200; 	
		top:0px; 
		left:0px;
		width:50px;
		height:50px;	
	}
	#homelogoInner {
		position:absolute; 	
		top:0px; 
		left:2px;
		width:33px;
		height:31px;
	/*		background-color:rgba(51,51,51,1);
		border-right:1px solid rgba(120,120,120,0.34);*/
		transition: all 1s ease;
	}
	#homelogoInnerImg {
		position:absolute; 	
		top:8px; 
		left:9px;
		height:15px;
		opacity:1;
		filter:brightness(100%) grayscale(0%);
		-webkit-filter:brightness(100%) grayscale(0%); 
	}
	
	
	#homelogoCenter {
		position:absolute; 
		z-index:1500; 	
		height:0px;
	}
	#homelogoCenterImg {
		position:absolute; 
		top:8px;
		height:15px;
		left:36px;
	}
	
	
	
	
	#headlineBG, #headlineBox{
		position:absolute; 	
		height:30px;
	}
	#headlineBG {
		z-index:1220; 	
		background-color:rgba(0,0,0,0);
		backdrop-filter: blur(8px);	
		border-bottom:1px solid rgba(120,120,120,0.34);
	}	
	#headlineBox {
		z-index:1420; 	
	}
	
	#MainbuttomDivBiggerClickFrame {
		position:absolute; 	
		z-index:200; 	
		height:44px;
		width:58px;
		top:0px;
		right:0px;
		
	}
	#MainbuttomDivBiggerClickImage {
		position:absolute; 	
		top:10px;
		right:11px;
		height:15px;
		width:20px;
	/*	border-top:1px solid rgba(110,110,110,1);
		border-bottom:1px solid rgba(110,110,110,1);*/
		z-index:100; 	
	}
	
	
		
/* ************************/
/* Popup Elemnt Menu      */
/* ************************/	
	#PopupMenuMain {
		position:absolute;
		z-index:2400;	
		top:34px;
		right:10px;
		height:auto;
		width:240px;
	
		box-shadow: 0px 0px 24px rgba(0,0,0,0.6);
		background-color:rgba(0,0,0,0.4);
		padding-left:14px;
		padding-right:7px;
		
		border-radius:4px;
	
		visibility:hidden;
		opacity:0;
		transition: visibility 0.4s linear, opacity 0.4s ease;
		
		backdrop-filter: blur(12px);
	}
	
	#PopupMenuMainInner {
		position:relative;
		padding-left:18px;
		padding-right:0px;
		
		height:auto;
		width:auto;
		
		
		background-color:rgba(250,250,250,1);
		
		font-weight:normal;
		color:rgb(205,205,205);
		text-align:left;
		font-size:13px;
		line-height:24px;
		letter-spacing:1px;
	}
	
	.PopupMenutextBlock {
		text-decoration:none;
		font-weight:normal;
		font-style:normal;
		
		padding-top:6px;
		padding-bottom:6px;
		border-top:1px solid rgba(25,25,25,0.15);
		border-right:4px solid rgba(0,0,0,0);
	}
	.PopupMenutextBlock:hover {	border-right:4px solid rgb(60,100,140);}
	
	.PopupMenuMainLink, .PopupMenutext{		
		/* ACHTUNG: text-decoration:none; muss auf die höhere ebene, da dort der Link als Tag definiert ist!!! */
		color:rgb(55,125,145);				
		text-align:left;
		font-weight:normal;
		
		font-size:15px;
		line-height:15px;
		
		letter-spacing:1px;
		transition: all 0.5s ease;
	}
	.PopupMenutextBlock:hover .PopupMenuMainLink {
		color:rgb(120,215,255);
	}

	
	.PopupMenutext{
		color:rgb(40,40,40);	
	}
	.PopupMenuClose {
		
		font-size:18px;
		line-height:22px;	
		color:rgb(170,0,10);
		transition: all 0.5s ease;
	}
	.PopupMenutextBlock:hover .PopupMenuClose {
		color:rgba(235,45,45,1);
	}
	
	.PopupMenutextBlockonlyFORhover {
		border-right:4px solid rgba(0,0,0,0);
	}
	.PopupMenutextBlockonlyFORhover:hover {
		border-right:4px solid rgba(150,150,150,0.6);
	}

	
/* ************/
/* Bottomline */
/* ************/	
	.bottomlineLink, .bottomlineText {
		height:5px;
		font-size:14px; 
		text-decoration: none;	
		font-style: normal;
		color:rgb(220,220,220);
		letter-spacing:1.2px;
		
		transition: color 1s;
	}

	.bottomlineLink:hover {
		color:rgb(80,255,255);
	}
	
	.bottomlineText {
		color:rgb(180,180,180);
	}
	
	
	
	
	
/* ************************/
/* Popup Elemnts  Image   */
/* ************************/	
	#PopUpImageBG {
		box-sizing: border-box;  
		position:fixed; 
		top:0px; left:0px; width:100%; height:100%; 
		z-index:200000;
		visibility:hidden;
		
		display: flex;
		align-items: center; 
		justify-content: center;
		
		opacity:0;

		background-image:radial-gradient(circle at  center center, rgb(40,40,40), rgb(20,20,20));
		transition: all 0.3s ease-in-out;
	}
	#PopUpImageDIV {
		position:relative;
		width:100%;
		height:100%;
		overflow:hidden;
	}
	#PopUpImage {
		position:relative;
		object-fit: contain;
		width:100%;
		height:100%;
		transform:scale(0.9);
	}
	#PopUpClose, #PopUpFullScreen {
		position:absolute;
		z-index:10;
		top:20px; 
		right:20px; 
		width:20px; 
		height:20px; 
		cursor:pointer;
		
		display: flex;
		align-items: center; 
		justify-content: center;
		
		background-color:rgba(40,40,40,0.2); 
		
		border:1px solid rgba(200,200,200,0.4); 
		box-shadow: 0px 0px 8px rgba(220,220,220,0.2);
		border-radius:2px;
		
		color: rgba(200,200,200,0.4);
		font-size:20px;
		line-height:20px;
		font-weight:bold;
	}
	#PopUpFullScreen { right:50px; }
	#PopUpFullScreenLogo {
		top:6px; 
		right:3px; 
		width:14px; 
		height:8px; 
		border:1px solid rgba(200,200,200,0.4); 
		background-color:rgba(120,130,140,0.4); 
		border-radius:1px;
	}
	#PopUpCapture {
		position:absolute;
		z-index:5;
		top:0px; 
		left:0px; 
		width:100%; 
		height:100%;
		cursor:pointer;
	}
	#PopUpDebug {
		position:absolute;
		z-index:30;
		top:20px; 
		left:20px;
		
		font-size:18px; 
		color:rgba(255,25,25,1); 
	}





	
	
/* ************ */
/* Text Elemnts */
/* ************ */
	.VisualImgTOtextSeperator {
		position:relative;
		height:10px;
		background-image:linear-gradient(to right, rgba(60,100,140,0.2), rgba(60,100,140,0.3), rgba(60,100,140,0.4), rgba(60,100,140,0.2));
	}
	.VisualImgTOtextSeperator2 {
		position:absolute;
		width:100%;
		height:100%;
		background-image:radial-gradient(farthest-corner at  center, rgba(0,0,0,0.2), rgba(0,0,0,0), rgba(185,225,255,0.1)); 
	}

	
	
	.TextMainMargin {
		box-sizing: border-box;  
		position:relative; 
		
		margin-top:calc(22px + 1.0vw);
	}
	.TextMainMargin:first-child {
		margin-top:31px;
	} 
	.TextMainMargin:last-child {
		margin-bottom:calc(8px + 1vw);
	} 
	

	.TextMain {
		box-sizing: border-box;  
		position:relative;
		z-index:7;						/* Achtung bei z-index muss immer "position:relative" angegeben werden */
		
		width:calc(100%);
		
/*	box-shadow: 0vw 0vw calc(10px + 1.6vw) rgba(255,255,255,1);*/	
/*	border:2px solid rgba(40,40,40,1);
		
		overflow:hidden;	*/	
	}
	
	
	.TextMain, .addRadius {
		/*border-radius:calc(5px + 0.1vw);		
		overflow:hidden;*/
	}
	
	
	.TextMainInlinesL, .TextMainInlinesR {
		position:absolute;
		top:0px; 
		height:100%; 
		width:calc(3px + 0.40vw); 
		background-color:rgba(0,10,20,0.7); 
		z-index:10;
	}
	.TextMainInlinesL{ left:calc(0px);}
	.TextMainInlinesR{ right:calc(0px);}
	
	
	.TextMainInlinesL2, .TextMainInlinesR2 {
		position:absolute;
		top:0px; 
		height:100%; 
		width:calc(9px + 0.6vw); 
		background-color:rgba(0,10,20,0.3); 
		z-index:10;
		transform:rotate(0deg);
	}
	.TextMainInlinesL2{ left:calc(0px);}
	.TextMainInlinesR2{ right:calc(0px);}
		
		
	.TextMainInlinesL3, .TextMainInlinesR3 {
		position:absolute;
		top:0px; 
		height:100%; 
		width:calc(12px + 1.0vw); 
		background-color:rgba(0,10,30,0.2); 
		z-index:10;
		transform:rotate(0deg);
	}
	.TextMainInlinesL3{ left:calc(0px);}
	.TextMainInlinesR3{ right:calc(0px);}
		
		
		
		
	





	.noPadding {
		padding:0px;
	}
	.noMargin {
		margin:0px;
	}
		
		
	@media  screen and (max-width: 720px) {		
		.BorderLines {
			display:none;
		}
	}	
		
		
		


	hr {
		width:auto;
		height: 1px;
		border:0px;
		background-image:linear-gradient(to right, rgb(220,220,220), rgb(210,210,210), rgb(220,220,220));
		margin-left:0px;
		margin-right:0px;
		margin-top:4px;
		margin-bottom:4px;
		padding:0; 
	}
	


	
	
	
	a {
		color:rgb(0,180,250);
		transition: all 0.5s ease;
		text-decoration:none;
		
		font-style:italic;
	}
	a:hover {
		color:rgb(180,95,155);
	}	
	.linkLight {
		color:rgb(40,110,140);
		
		font-style:normal; 
		font-weight:bold; 
		
	}
	.linkDivText {
		color:inherit;
		font-style:inherit;
		text-decoration:inherit;
	}
	.linkDivText:hover {
		color:rgba(60,100,120,0.9);
	}
	
	
	.quadplayPlayLink {
		height:calc(9px + 0.2vw);
		padding-left:2px;
		opacity:0.82;
	}
	
	.linkAsDIVblock {		/* Sollte bei Links um DIV-Elemente gesetzt werden. Angeblich... */
		display: block;
	}
	
	.textColor {
		color:rgb(90,150,210);
		letter-spacing:1.3px;
	}
	.textColorBold {
		color:rgb(90,150,210);
		letter-spacing:1.6px;
		font-weight:bold;
	}	
	.textBold {
		color:rgb(250,250,250);
		letter-spacing:1.4px;
		font-weight:bold;
	}
	.textitalicb {
		color:rgb(140,140,140);
		letter-spacing:1.4px;
		font-weight:normal;
	}
	
	
	
	
	
	
	.textrueck {
		padding-left:12px;
	}
	.textrueck2x {
		padding-left:20px;
	}
	
	.textb {	
		color:rgba(255,255,255,0.9);		
		letter-spacing:2px;
		font-weight:bold;		
	}
	.MtextBright .textb { color:rgba(40,40,40,1); }
	
	.textitalic {	
		font-style:italic;
	}	
	
	.texthalb {
		height:6px;
	}
	.textein {
		height:14px;
	}
	.texteinhalb {
		height:24px;
	}
	.textzwei {
		height:32px;
	}
	
	.textpara {
		margin-top:2px;
		margin-bottom:6px;
		
		padding-left:7px;
		padding-top:5px;
		padding-bottom:4px;
		
		font-size:14px;
		line-height:18px;
		color:rgba(240,240,240,0.9);
		
		font-weight:bold;
		letter-spacing:1px;
		
		border-left:12px solid rgba(80,80,80,0.7);
		border-radius:2px 2px 2px 2px;
		background-color:rgba(140,140,140,0.22); 
	}
	.MtextBright .textpara { color:rgba(40,40,40,0.84); }
		
	
	
	.bulletAlignRight {
		position:relative;
		
		display:flex; 
		box-sizing: border-box; 
		align-items: flex-start; 
		justify-content:flex-end;
	}
	.bulletCon {
		position:relative;
		padding:0px 0px 0px 10px;
		margin:4px 0px 0px 4px;
	}
	.MtextBright .bulletCon::after {
		content: "/";
		top:0px;
		left:-4px;
		width:26px;
		height:26px;
		color:rgb(90,90,90);
		font-size:15px;		
		position: absolute;
	}
	.MtextDark .bulletCon::after {
		content: "/";
		top:0px;
		left:-4px;
		width:26px;
		height:26px;
		color:rgb(220,220,220);
		font-size:15px;		
		position: absolute;
	}
	
	
	
	
	.MtextDark, .MtextBright {
		box-sizing: border-box;  
		position:relative;		
		width:100%;
		
		padding-top:calc(8px + 0.2vw);
		padding-bottom:calc(8px + 0.6vw);
		padding-left:calc(8px + 0.6vw);
		padding-right:calc(8px + 0.6vw);	
		border-radius:0px;	
	}
	.MtextDark { 	background-color:rgb(40,40,40); }
	.MtextBright {	background-color:transparent;	}
	.noMtextPadding {
		padding:0px;
	}

	.BGblack {
		background-color:black;
	}
	.MtextCenter {
		text-align:center;
	}
		
		
		
		
		
	.MtextDark, .MtextBright {
		font-size:calc(13px + 0.1vw);
		line-height:calc(19px + 0.15vw);
		font-weight:500;
		letter-spacing:calc(0.15px + 0.02vw);
	}
	.MtextDark {
		color:rgba(250,250,250,0.75);
	}
	.MtextBright {
		color:rgba(60,60,60,1);
	}
	
	.MheadlineBG + .MtextDark {		/*Nur einen leichten Rand einblenden wenn direkt NACH einer Hauptübertschrift H1*/
		border-top:1px solid rgba(56,56,56,1);
		
	}
	
	
	
	
	
	.MheadlineBG, .MheadlineBGmainframe {
		position:relative;
		box-sizing: border-box; 
		width:100%; 
		
		padding:calc(12px + 0.3vw);
		padding-top:calc(14px + 0.4vw);
		padding-bottom:calc(12px + 0.4vw);
		background-color:rgba(0,0,0,1);  
	}
	
	
	.MheadlineBGtext {
		position:relative;
		display:block; 
		font-weight:normal; 
		color:rgb(55,155,185); 
		font-size:calc(19px + 0.8vw); 
		line-height:calc(25px + 0.8vw); 
		letter-spacing:calc(4px); 
		padding-left:18px; 
		padding-right:18px; 
		background:linear-gradient(to right, rgba(0,220,140,1) -100%, rgba(110,196,250,1) 100%, rgba(0,0,0,0) 300%);  
		-webkit-background-clip: text;  
		-webkit-text-fill-color: transparent;
	}
	.h2TextThin {
		font-weight:300; 
		font-size:calc(21px + 0.2vw);
		
		margin-top:calc(24px + 0.6vw);
		margin-bottom:calc(16px + 0.4vw);
	}
	
	.Line1px_blue {
		background-image:linear-gradient(to right, rgba(60,100,140,0.5), rgba(60,100,140,0.8), rgba(60,100,140,0.5)); 
		height:1px;
	}
	.Line1px {
		background-image:linear-gradient(to right, rgba(140,140,140,0.3), rgba(140,140,140,0.4), rgba(140,140,140,0.3)); 
		height:1px;
		margin-top:8px;
		margin-bottom:8px;
	}
	


	
	.MBoxF {
		position:relative;
		width:100%;  
		
		padding-top:calc(8px);
		
		display:flex; 
		box-sizing: border-box; 
		align-items: flex-end; 
		justify-content:flex-start;
		flex-direction: column;
	}
	
	
	.MBoxFtext, .MBoxFimages  {
		box-sizing: border-box; 
		position:relative;
		width:calc(52% + 100px);
	}
	.MBoxFtext {
		padding-right:24px;
	}
	.MBoxFimages {
		padding-right:calc(16px + 0.8vw);
	}

	.textHeadline, .textHeadlineCenter {
		font-weight:normal;
		font-size:calc(16px + 0.6vw);
		line-height:calc(22px + 0.6vw);
		letter-spacing:calc(1.4px);
		
		padding-left:8px;
		padding-right:8px; 
	}
	.textHeadline {
		color:rgb(125,125,125);
		background:linear-gradient(to right, rgb(125,125,125) 0%, rgb(195,195,195) 50%, rgb(125,125,125) 100%); 		
		 -webkit-background-clip: text; 
		 -webkit-text-fill-color: transparent;
	}
	
	.MtextDark > .textHeadline, .textBOXcon  .textHeadline {
		padding-left:0px;
		padding-right:0px;
	}
	.textHeadlineCenter {
		text-align:center;
	}
	.textHeadlinecolor  {
		color:rgb(100,145,175);
	/*	background:linear-gradient(150deg, rgba(80,130,150,1) 0%, rgba(80,150,240,1) 100%);
		 -webkit-background-clip: text; 
		 -webkit-text-fill-color: transparent;*/
	}

	
		
	
	
	.textCenter {
		text-align:center;
	}
	
	
	
	.textBOXcon, .textBOX {
		position:relative;
		padding:0px;
		/* border:1px solid red;
		border-radius:0px;
		background-image:radial-gradient(farthest-corner at  center center, rgba(255,255,255,1), rgba(255,255,255,0)); */
	}
	.textBOXcon {
		display: flex;
		align-items: stretch;
	}
		


	
	
	.textBOXtext33, .textBOXtext33iconCon {
		text-align:left;
		position:relative;
		flex: 1;
	}
	
		
	
	.textBOXtext33:nth-of-type(1) {		
	}
	.textBOXtext33:nth-of-type(2) {
		padding-left:18px;
		margin-left:8px;
		border-left:1px solid rgba(100,120,140,0.5);
	}
	.textBOXtext33:nth-of-type(3) {
		padding-left:18px;
		margin-left:8px;
		border-left:1px solid rgba(100,120,140,0.5);
	}

	.textBOXtext33iconCon {
		align-self: flex-start;
		padding-left:8px;
			
		/* Für das Icon und Text-Box wieder eine Flexbox eröffnen */
		display: flex;
		justify-content:flex-start;
		align-items: center;
	}
	.textBOXtext33iconCon:nth-of-type(1) {		
		padding-right:8px;			
	}
	.textBOXtext33iconCon:nth-of-type(2) {
		padding-left:4px;
		padding-right:8px;
		border-left:1px solid rgba(193,60,100,0.6);
	}
	.textBOXtext33iconCon:nth-of-type(3) {
		padding-left:8px;
		padding-right:4px;
		border-left:1px solid rgba(193,60,100,0.6);
	} 
	

	.textBOXtext33red:nth-of-type(2), .textBOXtext33red:nth-of-type(3) {
		border-left:0px solid rgba(193,60,100,0.6);
	}
	 



	
	
	
	.BoxMimg {
		position:relative;
				
		width:100%;
						
		transition: all 0.7s ease;
		
		/*Wenn coloring über hue: grayscale(100%) brightness(50%) sepia(100%) hue-rotate(150deg) saturate(200%); 
		filter:brightness(90%) grayscale(25%);
		-webkit-filter:brightness(90%) grayscale(25%);*/		
	}
	.BoxMimgVertical {
		position:relative;
		height:100%;
		transition: all 0.7s ease;
	}
	
	.addBright {
		filter:brightness(100%) grayscale(50%);
		-webkit-filter:brightness(100%) grayscale(50%);
	}
	.addBright:hover {
		filter:brightness(110%) grayscale(0%);
		-webkit-filter:brightness(110%) grayscale(0%);
	}
		
	
	
		
/* ***************** */
/* Slide Elements */	
/* ***************** */

	.dieSchalter {
		height:11px;
		width:11px; 
		margin:2px; 
		background-color:rgba(170,180,175,1); 
		opacity:0.1;
		cursor:pointer;
		transition: all 1.8s ease;
		border-radius:1px;
	}
	
	
	
/* ***************** */
/* Text Elements */	
/* ***************** */
	.globalFlexCenter {			/* Somit sind die blocks mittig zentriert */
		display: flex;	
		align-items: center;
		justify-content: center;
	}
	
	
	
	
	
	.TextMain_TOP {
		hyphens: auto;	/*Silbentrennung funzt nur auf Mobiles. Reicht ja... */
		display:block;
		font-family: 'Comfortaa', cursive;		
		text-align:center; 
	/*	text-shadow: 0px 0px 28px rgba(150,230,250,0.9); */
		
		position:relative;
		z-index:500;
	
		padding-top:calc(12px  + 0.6vw);
		padding-bottom:calc(8px + 0.6vw); 
		padding-left:14px;  
		padding-right:14px;		

		font-size:calc(20px + 0.8vw); 
		line-height:calc(24px + 1.2vw); 				
		letter-spacing:9px; 
		font-weight:normal;	
		
		background:linear-gradient(150deg, rgba(50,150,250,0.8) 0%, rgba(50,200,160,1) 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}	
	
	
	
	
	 .inARConTOP, .inARConBOTTOM {
		position:absolute; 
		
		width:100%;		
				
		display: flex;				
		align-items: flex-start;
		justify-content: center;
		z-index:5;
	}
	.inARConTOP { top:0px; }
	.inARConBOTTOM {bottom:0px; }
	
/*	.inARConTOP:after {
		content:'';
		display:block;				
		position:absolute; 
		top:-2px; 
		width:calc(120px + 6vw); 
		height:4px; 
		
		background-color:rgba(255,255,255,0.56); 
		border-radius:0px; 
		z-index:1000;	
	} */
	
	.inARbox {
		position:relative; 
		
		padding-left:12px;
		padding-right:12px;
		/* border:1px solid white;	*/
		
		display: flex;				
		justify-content:flex-start;
		align-items:center;			/*ACHTUNG: Bei flex-direction: column verdreht sich die Richtung von align-items und justify-content */
		flex-direction: column;
	}
	.inARConTOP .inARbox {
		top:calc(7px + 0.1vw);	}
	.inARConBOTTOM .inARbox {
		bottom:calc(7px + 0.1vw);	}
	
	
	.inARheadline {
		font-family: 'Comfortaa', cursive;		
		white-space: nowrap;
		text-align:center; 
		
		font-size:calc(14px + 0.3vw); 
		line-height:calc(14px + 0.3vw); 
		color:rgba(255,255,255,0.96); 
		letter-spacing:3px; 
		font-weight:normal;
	}	
	
	
	
		
/* ****************************************************************** */
/* AR Boxen - Damit könenn Boxen mit Seitenverhältnis erstellt werden */
/* ****************************************************************** */
	
	.ARBoxCon {
		position:relative; 
		width:100%; 
		height:auto;
		overflow:hidden;
		background-color:black;		
	}
	.ARBoxView {
		position:absolute; 
		top:0; 
		left:0; 
		right:0; 
		bottom:0;
	/* 	height:100%;				width:100% Muss für den Mobile Opera sein, da ansonsten die <img> NICHT mit style="bottom:22%;" ausgerichtet werden können! */
	/* 	width:100%;					height:100% Muss für den Mobile Opera sein, da ansonsten die <img> NICHT mit style="bottom:22%;" ausgerichtet werden können! */
		background-color:black;
	}
	.AddCentererdImage {
		display: flex;				/* Somit sind die Bilder mittig zentriert */
		align-items: center;
		justify-content: center;
	}
	
	.ARBox200 {padding-top:200%;}	
	.ARBox150 {padding-top:150%;}	
	.ARBox100 {padding-top:100%;}	
	.ARBox060 {padding-top:60%;}	
	.ARBox055 {padding-top:55%;}	
	.ARBox050 {padding-top:50%;}	
	.ARBox047 {padding-top:47%;}	
	.ARBox045 {padding-top:45%;}	
	.ARBox043 {padding-top:43%;}	
	.ARBox040 {padding-top:40%;}	
	.ARBox037 {padding-top:37%;}		/* Fuer 1 zu 2.66 */
	.ARBox037 {padding-top:37%;}		/* Fuer 1 zu 2.66 */
	.ARBox035 {padding-top:35%;}	
	.ARBox033 {padding-top:33%;}	
	.ARBox030 {padding-top:30%;}	
	.ARBox030 {padding-top:30%;}	
	.ARBox027 {padding-top:27.27%;}		/* Fuer 1 zu 3.66 */
	.ARBox025 {padding-top:25%;}	
	.ARBox025 {padding-top:25%;}	
	.ARBox025 {padding-top:25%;}	
	.ARBox023 {padding-top:23%;}	
	.ARBox020 {padding-top:20%;}	
	.ARBox015 {padding-top:15%;}	
	.ARBox010 {padding-top:10%;}	
	.ARBox008 {padding-top:8%;}	
	.ARBox005 {padding-top:5%;}	
	.ARBox003 {padding-top:3%;}	
	
	@media only screen and (max-width: 680px) {
		.ARBox100mobile {padding-top:100%;}	
		.ARBox075mobile {padding-top:75%;}	
		.ARBox070mobile {padding-top:70%;}	
		.ARBox065mobile {padding-top:65%;}	
		.ARBox060mobile {padding-top:60%;}	
		.ARBox055mobile {padding-top:55%;}	
		.ARBox050mobile {padding-top:50%;}	
		.ARBox045mobile {padding-top:45%;}	
		.ARBox043mobile {padding-top:43%;}	
		.ARBox040mobile {padding-top:40%;}	
		.ARBox037mobile {padding-top:37%;}		/* Fuer 1 zu 2.66 */
		.ARBox037mobile {padding-top:37%;}		/* Fuer 1 zu 2.66 */
		.ARBox035mobile {padding-top:35%;}	
		.ARBox033mobile {padding-top:33%;}	
		.ARBox030mobile {padding-top:30%;}	
		.ARBox030mobile {padding-top:30%;}	
		.ARBox027mobile {padding-top:27.27%;}	/* Fuer 1 zu 3.66 */
		.ARBox025mobile {padding-top:25%;}	
		.ARBox025mobile {padding-top:25%;}	
		.ARBox025mobile {padding-top:25%;}	
		.ARBox020mobile {padding-top:20%;}	
		.ARBox015mobile {padding-top:15%;}	
		.ARBox010mobile {padding-top:10%;}	
		.ARBox008mobile {padding-top:8%;}	
	}
	
	/* Text-Slider Felder die über dem Bild der AR-Boxen liegen */
	/* Die Animationen werden per JS ausgeführt */
	.ARBoxSlider {
		position:absolute; 
		
		top:-20px; 
		right:-550px;	
	
		padding:20px;				/* um den Touch-Bereich zu erhöhen*/ 
		
		display: flex;				
		
		z-index:40;
		transition: all 0.8s ease;		
	}
	.ARBoxSliderText {
		width:auto;
		height:auto;
		
		padding:4px;
		
		font-size:15px; 
		line-height:19px;
		color:rgba(255,255,255,0.8);
		white-space: nowrap;
		
		border-bottom:1px solid rgba(50,160,170,1);
		background-color:rgba(30,30,30,1);			
	}
	.ARBoxSlider:before { 
		content:'<';
		display:block;
		width:16px;
		height:auto;
		
		padding-top:2px;

		border-radius:0px 0px 0px 5px;
		background-color:rgba(50,50,50,0.9);		
		border-left:1px solid rgba(50,160,170,1);	
		border-bottom:1px solid rgba(50,160,170,1);	

		text-align:center;
		color:rgba(250,250,250,0.7);	
		font-size:15px;
		font-weight:bold;
	} 

	
	
	.ImageTableCon {
		display:flex;
		align-items: center; 
		justify-content: flex-start;	
		width:100%;
	}
	.ImageTableDiv {
		width:calc(50% - 13px); 
		max-width:2000px;
	}
	.ImageTableDiv:nth-child(1) {margin-right:13px; }
	.ImageTableDiv:nth-child(2) {margin-left:13px; }
	@media only screen and (max-width: 2000px) {
		.ImageTableCon {
			flex-direction: column;			
		}
		.ImageTableDiv {
			width:calc(100%); 
		}
		.ImageTableDiv:nth-child(1) {margin-right:0px; }
		.ImageTableDiv:nth-child(2) {margin-left:0px; margin-top:26px; }
	}
	
/* **************/
/* IMG Elemente */
/* **************/

	.logoSCREENAVimageH1 {
		text-align:center;
		padding-bottom:6px; 
	}	
	.logoSCREENAVimageH1img {
		height:calc(12px + 1vw); 
		max-height:calc(20px); 
	}
	
	.logoSCREENAVTOP {
		width:100%; 
		text-align:center;
		margin-top:28px;  
		margin-bottom:calc(10px);
	}
	.logoSCREENAVimageTOP {
		height:calc(16px + 0.5vw); 
	}

	.imgJSLink {
		cursor:pointer;
	}
	
	
/* **************/
/* Video Elemente */
/* **************/
	.VideoPlayDyn {
		position:absolute;
		z-index:10;			
		opacity:0;
		
		transition: all 1.4s ease;
	}
	
	.VideoPlayIcon, .VideoFullscreenIcon {
		position:absolute; 		
		bottom:10px;		
		height:calc(20px + 0.2vw);
		opacity:0.8;
	}
	.VideoPlayIcon { left:10px; }
	.VideoFullscreenIcon { left:40px; }
	.VideoPlayIconDark { 
		filter: contrast(100%) brightness(100%) grayscale(0%); 
		-webkit-filter: contrast(100%) brightness(100%) grayscale(0%);
	}
	.VideoPlayIconMiddle { 
		filter: contrast(100%) brightness(200%) grayscale(0%); 
		-webkit-filter: contrast(100%) brightness(200%) grayscale(0%);
	}
	.VideoPlayIconBright { 
		filter: contrast(100%) brightness(230%) grayscale(0%); 
		-webkit-filter: contrast(100%) brightness(230%) grayscale(0%);
	}
	
	
/* **************/
/* Umschaltungen*/
/* **************/
/* AUCHTUNG: Die müssen am ENDE der Style-Datei gesetzt werden, da sich diese sonst wieder *warum auch immer* vom mormalen style überschirben werden. */
/* Evt. sind auch mehrfachangeben "@media only screen and (max-width: 1400px)" Müll ... */
	

	@media only screen and (max-width: 560px) {
		.PopupMenuMainLink {
			line-height:26px;
		}			
		.VisualImgTOtextSeperator {
			height:7px;
		}
	}	
	@media only screen and (max-width: 720px) {
		.PopupMenuMainLink {
			line-height:22px;
		}
	}
	

	

	

	@media only screen and (max-width: 720px) {
		.textBOXcon {
			flex-direction:column;		/*ACHTUNG: Bei flex-direction: column verdreht sich die Richtung von align-items und justify-content */
		}
		
		.textBOXtext33iconCon {
			justify-content: flex-start;		/*ACHTUNG: Bei flex-direction: column verdreht sich die Richtung von align-items und justify-content */
		}
		
		.textBOXtext33, .textBOXtext33iconCon {
			text-align:left;
			width:100%;
			margin-left:0px;
		}
		
		.texticon {
			align-self:center;
		}
		
		.textBOXtext33:nth-of-type(1) {
			padding-top:3px;
			padding-bottom:8px;
		}
		.textBOXtext33:nth-of-type(2) {
			margin-left:0px;
			padding-left:0px;
			border-left:0px;
			
			border-top:1px solid rgba(100,115,130,0.3);
			padding-top:12px;
			padding-bottom:8px;
			margin-top:6px;
		}
		.textBOXtext33:nth-of-type(3) {
			margin-left:0px;
			padding-left:0px;
			border-left:0px;
			
			border-top:1px solid rgba(100,115,130,0.3);
			padding-top:12px;
			padding-bottom:8px;
			margin-top:6px;
		}
		
		
		.textBOXtext33iconCon:nth-of-type(1) {
			padding-left:0px;
			padding-right:8px;	
			
		}
		.textBOXtext33iconCon:nth-of-type(2) {
			padding-left:0px;
			padding-right:8px;
			
			margin-top:12px;
			border-left:0px;
		}
		.textBOXtext33iconCon:nth-of-type(3) {
			padding-left:0px;
			padding-right:8px;	
			
			margin-top:12px;
			border-left:0px;
		} 
		
		
		
		.textBOXtext33red:nth-of-type(2), .textBOXtext33red:nth-of-type(3) {
			border-left:0px;
		}
		.textBOXtext33red:nth-of-type(2), .textBOXtext33red:nth-of-type(3) {
			border-top:0px solid rgba(193,60,100,0.3);
		}
	}