:root {
	/* COLORS */
	--cWhite:rgb(255,255,255);
	--cBlack:rgb(0,0,0);
	--cError:rgb(255,72,0);
	--cN-100:rgb(64,64,64);
	--cN-75:rgb(128,128,128);
	--cN-50:rgb(191,191,191);
	--cN-25:rgb(230,230,230);
	--cN-10:rgb(248,248,248);
	--cP-100: rgb(0,118,195);
	--cP-75: rgb(64,152,210);
	--cP-50: rgb(128,185,225);
	--cP-25:	rgb(191,221,240);
	--cP-10: rgb(230,241,249);
	--cS1-100: rgb(180,185,0);
	--cS1-75: rgb(199,203,64);
	--cS1-50: rgb(218,220,129);
	--cS1-25: rgb(236,238,191);
	--cS1-10:	rgb(248,248,230);
	--cS2-100: rgb(235,106,40);
	--cS2-75: rgb(240,143,95);
	--cS2-50: rgb(245,181,147);
	--cS2-25: rgb(250,218,201);
	--cS2-10:	rgb(253,240,234);
	
}
		

html { height:100%;font-size:1vw; max-width:3000px;font-family:arial,helvetica;}		

.goLogin {
	height: 1rem;
  background-color: var(--cS1-75);
  width: 2%;
  position: absolute;
  bottom: 0;
  left: -2%;
  border-radius: inherit;
  transition:3s;
}

input.loginButton {
	background-color: var(--cP-100);
	border: 1px solid var(--cP-100);
	color:white;
	font-size: 1.25rem;
padding: .5rem 2rem;
border-radius: .25rem;
cursor: pointer;
position: absolute;
right: 0rem;
bottom:-3rem;
letter-spacing: 0.1rem;
}

.loginReset {
	cursor:pointer;
}

input.loginButton:hover {
	background-color:#fff ;
	border: 1px solid var(--cP-100);
	color:var(--cP-100);
}
 .centerAll {
 		position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  }
div#loginLogo {
	position:absolute;
	top: 4rem;
	left: 2rem;
	aspect-ratio: 8 / 1.2;
  width: 25rem;
	background-image:url(../bilder/aop-logo.jpg);
	background-position:left top;
	background-size:contain;
	background-repeat:no-repeat;
	
}  
							
div#anmeldung {  width: 60rem;
  border: 1px solid #dedede;
  border-radius: 10px;
  overflow: hidden;
  padding-top: 15px;
 	background-size: cover;
  aspect-ratio:3 / 2;
  color:rgb(0,118,195);
}
.DE{background-image: url(../bilder/aop-login.jpg);}
.EN{background-image: url(../bilder/h3.jpg);}
div#formular form{
position: absolute;
left: 0;
top: 1rem;
padding: 1rem 0rem;
width:21.5rem;
display:grid;
}
  
div#formular {
	padding:0rem;
	width: 25.5rem;
height: 17rem;
position: absolute;
left: 5.65rem;
top:45%;
}

.language{text-align: right;
font-size: 1.3rem;
font-family: arial;
padding-top:2.5%;
margin-right: 2.5%;}

a.language{text-align: right;
margin:0;
font-size: 1.3rem;
font-family: arial;
}

input.login { 
	font-size: 14px; 
	font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;  
	border-radius:4px;
	border: 1px solid var(--cN-75);
	}
	
	div.loginHeader {
	position: absolute;
  left: 5.65rem;
  top: 8rem;
  font-size: 2.73em;
  font-family: arial;
  font-weight: bold;
  color: var(--cP-50);
		}
	div.loginHeadline {display:none;background:url(../bilder/login_headline.jpg) #23436a;width:662px;height:47px;clear:both;}
	div.loginContent {width: 57%;
margin: 0px 0 0 0;
position: absolute;
right: 6rem;
top: 4rem;}
	div.loginContentEinleitung {font-size: 1.1rem;
font-family: arial;
text-align: justify;
line-height: 1.2;
}
	div.loginFooter {width: 100%;
margin: 0px 0 0 0;
position: absolute;
bottom: 0rem;}

div.hotline {
margin: 0 auto;
  width: 90%;
  font-size: .85rem;
  font-family: arial, helvetica;
  text-align: center;
  padding: 1rem;
  font-weight: bold;
}

div.loginWelcome {position: absolute;
top: 28rem;
width: 74%;
right:0;}
	div.content_bild {float:right;background:url(../bilder/content_standard.jpg);width:171px;height:339px;margin:20px 5px 0 10px;}
input.loginInput {
padding: .5rem .25rem;
margin: 0 0 .75rem 0px;
font-size: 1.25rem;
border-radius: .25rem;
border: .125rem solid var(--cP-100);
width:20.75rem;
}

	span.login {    
	font-size: 1.25rem;
  font-family: arial, helvetica;
  font-weight: bold;
  letter-spacing: .02rem;
  color: var(--cP-75);
  padding: .5rem 0 .25rem 0;
  display: block;
}
	
	h1.login {font-size:17px;font-family:arial;font-weight:normal;padding:15px 0px 0px 30px;margin:0px;}
	p.login {font-size: 1.1rem;
font-family: arial;
text-align: justify;
line-height: 1.2;
}
	
@media screen and (min-width:3000px) {
html{ font-size: 30px; }	
}