﻿/* Allgemeines */
	body { font-family: 'Oswald', sans-serif; font-size:15px; background-color: #000; color: #FFF; min-width:400px; text-align:center; margin:0; padding:0; overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing:grayscale; background-image:url('../design/background_grid.png'); background-repeat:no-repeat; background-size:cover; }
	p {}
	td {}
	a:link { color:#94979C; text-decoration:none; }
	a:visited { color:#FFF; text-decoration:none; }
	a:hover { color:#FFF; text-decoration:none; }
	a:active { text-decoration:none; }
	a:focus { outline: none; }
	.master { position:relative; width:95%; max-width:1200px; margin:auto; overflow: hidden; } 
	.row:after { content:""; display:table; clear:both; }
	.bold { font-weight:bold; }
    .h1 { font-size:45px; font-weight: bold; }
	.h2 { font-size: 30px; font-weight: bold; }
    .h3 { font-size:20px; font-weight: bold; }
    .h4, .button_white { font-size:17px;}
	.center { text-align:center; }
	.uppercase { text-transform: uppercase; }
	.roteSchrift { color: #DA6C66; }
/**************/

/* Inhalte */
	#header { position:relative; width:100%; height:80px; padding-top:23px; padding-bottom: 25px; box-sizing: border-box; }
	#headerContent { height: 32px; max-width:100%; display: flex; align-items: flex-start; }
	#headerLogo { height: 100%; width: 180px; flex-shrink: 0; box-sizing: border-box; }
	#headerMenu { text-align: right; flex: 1; align-items: flex-start; height: 100%; line-height: 32px; box-sizing: border-box; padding-left: 5px; word-spacing: 20px; }

	#main { position:relative; width:100%; padding-top: 20px; }

	#firstContentContainer { }
	#firstContent { padding-bottom: 50px; padding-top:50px; }
	.two_column { float: left; width:50%; max-width:621px; box-sizing: border-box; padding: 5px; margin: auto; }

	#secondContentContainer { }
	#secondContent { padding-bottom: 50px; padding-top:50px; }
	.three_column { float: left; width:33%; max-width: 400px; box-sizing: border-box; padding: 5px; margin: auto; }

	#thirdContentContainer { }
	#thirdContent { padding-bottom: 50px; padding-top:50px; }
	#loginContainer { border: 1px solid rgba(255,255,255,0.8); background-color: #262626; border-radius: 15px; padding:20px; box-sizing: border-box; width:fit-content; max-width: 800px; margin: auto; text-align: left; }

	#imprintContent { padding-top:50px; min-height:100vh; }
	#imprintContent a:link { color:#000; text-decoration:none; }
	#imprintContent a:visited { color:#000; text-decoration:none; }
	#imprintContent a:hover { color:#FFF; text-decoration:none; }
	#imprintContent a:active { text-decoration:none; }
	#imprintContent a:focus { outline: none; }

	#footer { position:relative; border-top:1px solid #22262F; text-align: left; width:100%; padding-bottom: 50px; padding-top:50px; }
	#footerContent {  }


	@media only screen and (min-width:2560px) { 

	}

	@media only screen and (max-width:1050px) { 

	}

	@media only screen and (max-width:850px) { 

	}

	@media only screen and (max-width:750px) { 
		.two_column { width:100%; float: none; padding-bottom: 30px; }
		.three_column { width: 100%; float: none; padding-bottom: 30px; }
	}

	@media only screen and (max-width:500px) { 
		#headerMenu { display: none; }
	}
/**********/

/* Buttons und Formulare */	
	.button_white { width:80%; max-width:300px; height:44px; color: #FFF; background-color: transparent; -webkit-appearance: none; display: inline-block; line-height: 40px; }
	.button_white:focus { outline: none; }

	.button_clear { width:20%; max-width: 150px; height: 48px; line-height: 50px; font-size: 20px; margin-top: 5px; margin-bottom: 5px; box-sizing: border-box; color: #85888E; background-color: transparent; border: 1px solid #85888E; border-radius: 8px; -webkit-appearance: none; }
	.button_clear:focus { outline: none; }

	.button { width:80%; max-width: 290px; height: 48px; line-height: 50px; font-size: 20px; margin-top: 5px; margin-bottom: 5px; box-sizing: border-box; color: #85888E; background-color: #F5F5F5; border: 1px solid #E9EAEB; border-radius: 8px; -webkit-appearance: none; }
	.button:hover { background-color: transparent; }
	.button:focus { outline: none; }

	.textinput { width:100%; max-width: 350px; height: 50px; padding-left: 15px; line-height: 50px; font-size: 20px; box-sizing: border-box; color: #FFF; background-color: transparent; border: 1px solid #FFF; }
	.textinput:focus { outline: none; }

	.codeinput { width:60px; height:60px; border-radius: 10px; border: 1px solid #373A41; background-color: #0C0E12; -webkit-appearance: none; appearance: none; line-height: 50px; box-sizing: border-box; color: #FFF; margin: 0; text-align: center; font-size: 22px; }
	.codeinput:focus { outline: none; }

	@media only screen and (max-width:800px) { 
		.codeinput12 { width:50px; height: 50px; }
	}

	@media only screen and (max-width:700px) { 
		.codeinput { width:50px; height:50px; font-size: 20px; border-radius: 9; }
		.codeinput12 { width:44px; height: 44px; }
	}

	@media only screen and (max-width:600px) { 
		.codeinput { width:45px; height:45px; font-size: 19px; border-radius: 8; }
		#loginContainer { padding: 10px; }
		.button { height:40px; line-height: 40px; font-size: 19px; max-width: 200px; }
		.button_clear { height:40px; line-height: 40px; font-size: 19px; max-width: 200px; }
		.codeinput12 { width:35px; height: 35px; }
	}

	@media only screen and (max-width:500px) { 
		.codeinput { width:40px; height:40px; font-size: 18px; border-radius: 6; }
		.codeinput12 { width:33px; height: 33px; }
	}

	@media only screen and (max-width:450px) { 
		.codeinput { width:35px; height:35px; font-size: 17px; border-radius: 4; }
		.codeinput12 { width:29px; height: 29px; }
	}
/********/