:root {
  --blue: rgb(0,73,146);
  --white: white;
  --orange: rgb(255,143,0);
  --grey: rgb(221,221,221);
  --green: rgb(0, 153, 0);
  --lightblue: rgb(153, 196, 232);
  --bgcolor: rgb(0,73,146);
  --stdtext: grey;
  --greyelements: rgb(234,234,234);
  
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
	height: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	background-color: var(--blue);
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
	color: var(--stdtext);
	scrollbar-face-color: 29246B; 
	scrollbar-arrow-color: 10A652; 
	scrollbar-base-color: 10A652; 
	scrollbar-3d-light-color: 10A652; 
	scrollbar-darkshadow-color: 10A652; 
	scrollbar-highlight-color: 10A652; 
	scrollbar-shadow-color: 10A652; 
	scrollbar-track-color: 29246B;
}

.line10 {
	width: 100%;			
	height: 10px;
}

.line20 {
	width: 100%;		
	height: 20px;
}

.menu {
	width: 100%;
	flex-basis: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	background-color: var(--blue);
}

.menuitem {
	padding: 5px 20px;
}

.menuitem a {
	border-bottom: 2px solid var(--blue);
	font-size: 12px;
	text-decoration: none;
}

.menuitem a:hover {
	/*border-bottom: 2px solid var(--white);*/
	text-decoration: none;
	text-shadow: 0 0 5px var(--white);
}

.menuitem a.login {
	color: var(--bgcolor);
	padding: 2px 5px;
	background-color: var(--grey);
}

div.sbox {
	width: 100%;
	min-height: 100%;
	background-color: var(--white);
	padding: 5px;
	text-align: center;
	border-radius: 25px;
}

div.lbox {
	margin: 0px;
	width: 100%;
	background-color: var(--white);
	padding: 5px;
	text-align: center;
}

.orange {
	color: var(--orange);
}

.white {
	color: var(--white);
}

.blue {
	color: var(--blue);
}

.green {
	color: var(--green);
}

.grey {
	color: var(--grey);
}	

.lightblue {
	color: var(--lightblue);
}

.bold {
	font-weight: bold;
}

.h1 {
	font-size: 20px;
}

.h2 {
	font-size: 18px;
}

.s1 {
	font-size: 12px;
}

.s2 {
	font-size: 10px;
}

.bggrey {
	background-color: var(--grey);
}

.bggreen {
	background-color: var(--green);
}

.bgblue {
	background-color: var(--blue);
}

.bgwhite {
	background-color: var(--white);
}

.fullwidth {
	width: 100%;
}

.bar {
	margin: 0px;
	text-align: center;	
	display: block;			
	padding-top: 7px;
	padding-bottom: 7px;
}

.control_lightblue {	
	border: 2px solid var(--lightblue);
	padding: 5px 20px;
	background-color: var(--blue);
	color: var(--lightblue);
	text-decoration: none;
}
.control_lightblue:hover {	
	border: 2px solid var(--white);
	color: var(--white);
}

.control_fullblue {	
	border: 2px solid var(--blue);
	padding: 5px 20px;
	background-color: var(--blue);
	color: var(--white);
	text-decoration: none;
}
.control_fullblue:hover {	
	border: 2px solid var(--lightblue);
	color: var(--lightblue);
}

.control_frameblue {	
	border: 2px solid var(--blue);
	padding: 5px 20px;
	background-color: var(--white);
	color: var(--blue);
	text-decoration: none;
}
.control_frameblue:hover {	
	border: 2px solid var(--lightblue);
	color: var(--lightblue);
}

.greybutton {
  background-color: var(--greyelements);
  border: 3px solid var(--greyelements);
  color: var(--bgcolor);
  padding: 10px 32px;
  text-decoration: none;
  margin: 4px 2px;	
}

.greybutton:hover {
	border: 3px solid var(--bgcolor);
}

@media (min-width: 500px) {
  /* kein Handy mehr */
  
  div.sbox {
    width: 500px;
	min-height: 500px;
  }

}