﻿/* roboto-condensed-regular - latin */
	@font-face {
		font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
		font-family: 'Roboto Condensed';
		font-style: normal;
		font-weight: 400;
		src: url('../fonts/roboto-condensed-v27-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
			url('../fonts/roboto-condensed-v27-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
	}
	/* roboto-condensed-900 - latin */
	@font-face {
		font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
		font-family: 'Roboto Condensed';
		font-style: normal;
		font-weight: 900;
		src: url('../fonts/roboto-condensed-v27-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
			url('../fonts/roboto-condensed-v27-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
	}

/* Allgemeines */
	body { font-family: Arial, Helvetica, sans-serif; color:#000; background-color: #f3eee8; font-size:18px; 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; }
	p {}
	td {}
	a:link { color:#000; text-decoration:none; }
	a:visited { color:#000; text-decoration:none; }
	a:hover { color:#000; text-decoration:none; }
	a:active { text-decoration:none; }
	a:focus { outline: none; }
	.master { position:relative; width:85%; max-width:800px; margin:auto; overflow: hidden; } 
	.row:after { content:""; display:table; clear:both; }
	.bold { font-weight:bold; }
    .h1 { font-size:50px; }
	.h2 { font-size: 40px; }
    .h3 { font-size:20px; font-family: 'Roboto Condensed'; font-weight: 900; }
    .h4 { font-size:20px;}
	.center { text-align:center; }
	.uppercase { text-transform: uppercase; }
	.more_space { letter-spacing: +2px; }
	.left { text-align:left; }
	.hintergrundDunkler { background-color: rgba(0, 0, 0, 0.7); position: absolute; top:0; left:0; right: 0; bottom: 0; }
	.magentaRahmen { border: 10px solid #E462A5; box-sizing: border-box; margin-top: 10px; padding:15px; }
	.magenteHintergrund { background-color: #E462A5; padding: 5px 20px 10px 20px; }
	.roterText { color: darkred; }
	.orangerText { color: #eb880a; }
	.oranger_hintergrund { background-color: #eb880a; color: #FFF; padding:5px; padding-left: 15px; padding-right: 15px; margin-left:-15px; }
	.trennstrich { width:100%; border: 1px solid #bcbec0; }
/**************/

/* Inhalte */
	#header { position:relative; width:100%; z-index: 500; }
	#headerContent { height:200px; line-height: 200px; box-sizing: border-box; text-align: left; }
	#headerLogo { width:100%; max-width:200px; }

	#main { position:relative; width:100%; min-height:80vh; }

	#background_lautsprecher { position: absolute; top:0; right:0; width:60%; padding-top:70%; min-width: 300px; background-image: url(../design/Lautsprecher.jpg); background-repeat: no-repeat; background-position: top; background-size:cover; margin-top:-200px; }

	#firstContentContainer { position: relative; width:100%; }
	#firstContent { padding-bottom: 50px; text-align: left; }
	#control_box { background-color: #FFF; border: 1px solid #bcbec0; padding:15px; }
	#profil_container { text-align: right; margin-bottom: 30px; height: 60px; }
	#profil_bild { width:60px; height:60px; background-image: url(../design/Profil.png); background-repeat: no-repeat; background-position: top; background-size:contain; float: right; margin-left: 10px; }
	#profil_text { float: right; line-height: 30px; }

	.switchButton { border: 3px solid grey; border-radius: 10px; font-size: 15px; height:26px; width:65px; box-sizing: border-box; line-height: 21px; }
	.switchButtonOff { background-color: #E78168; }
	.switchButtonOn { background-color: #8EC580; }
	.switchButtonCircleOFF { background-color: #FFF; height:20px; width:20px; border-radius: 50%; float: left; }
	.switchButtonCircleON { background-color: #FFF; height:20px; width:20px; border-radius: 50%; float: right; }
	#loginContainer { border-radius: 15px; width:50%; max-width: 500px; padding:20px; text-align: left; background-color: #faf7f5; box-sizing: border-box; }

	#imprintContent { padding-top:200px; padding-bottom: 200px; background-color: #FFF; }
	#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; width:100%; min-height:150px; padding-top:40px; }
	#footerContent { }


	@media only screen and (min-width:2560px) { 

	}

	@media only screen and (max-width:1200px) { 

	}

	@media only screen and (max-width:992px) { 

	}

	@media only screen and (max-width:768px) { 
		#loginContainer { width: 75%; }
		#background_lautsprecher { margin-top:0; top:auto; bottom: 0; }
	}

	@media only screen and (max-width:600px) { 
		#loginContainer { width: 100%; }
	}
/**********/

/* Buttons und Formulare */	
	.button_impressum { width:80%; max-width:300px; height:40px; color: #000; background-color: transparent; -webkit-appearance: none; display: inline-block; box-sizing: border-box; line-height: 40px; transition: 0.5s; }
	.button_impressum:hover {  }
	.button_impressum:focus { outline: none; }

	#button_login { background-color: #eb880a; width:100%; height:40px; box-sizing: border-box; line-height: 40px; font-size: 19px; color: #FFF; max-width: 150px; border-radius: 10px; border: none; margin-top: 5px; }

	#button_passworthinweis { background-color: #6ec3ed; width:100%; height:40px; box-sizing: border-box; line-height: 40px; font-size: 17px; color: #FFF; max-width: 300px; border-radius: 10px; border: none; margin-top: 5px; }

	.textinput { width:100%; max-width:300px; height:40px; box-sizing: border-box; line-height: 40px; font-size: 18px; color: #000; padding-left:15px; border-radius: 10px; border: none; margin-top: 5px;  margin-bottom: 5px;}
	.textinput:focus { outline: none; }
/********/