*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------------------------*
 * 							Styleangaben von der Basisversion 
 * ---------------------------------------------------------------------------------------------*/
html {
	font-size: 100%;
}

.login, .login-kunde {
	background-color: #f2f2f2;
	-webkit-box-shadow: 0px 0px 31px 15px rgba(0,0,0,0.42);
	-moz-box-shadow: 0px 0px 31px 15px rgba(0,0,0,0.42);
	box-shadow: 0px 0px 31px 15px rgba(0,0,0,0.42);
}

body {
	background-color: rgb(250, 105, 0);
	font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
	font-size: 1em;
	line-height: 1.5em;
}

.page-wrapper
{
    margin: 0;  
    position: absolute;
    top: 40%;
	left: 50%;
}

img {
	max-width: 100%;
}

#bilddiv {
	margin: auto;		
}

#daten {
	padding-left: 20px; 
}

.tab {
	margin-left: 20px;
	border-radius: 3px;
	border: 1px solid #AAAAAA;
}
.tab:hover {
	border: 1px solid #444444;
}

p.teasertext2 {
	font-size: 1.0em;
	line-height: 1.368em;
	color: #585858;
}

input {
	width: 90%;
	border-radius: 3px;
	border: 1px solid #aaaaaa;
} 

input:focus {
    border: 1px solid #444444;

}

#wartung {
	margin: auto; 
	width: 80%;	
}

#edu {
	text-align: center;
	font-size: 3em;
	margin-top: 0.5em;
	height: 1em;
}
/* ----------------------------------------------------------------------------- *
 * 							Texte
 * ----------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------------- *
 *                      Styles für Menü für Smartphoneversion                         *
 *                         max 750px / 16px/em = 46.875em                           *
 * ----------------------------------------------------------------------------- */

@media only screen and (max-width: 46.870em) {
    .page-wrapper {
        width: 19em;
        height: 22em;
		margin-top: -11em;
		margin-left: -9em;   
    }
	#bilddiv {
		width: 9em;		
	}
	.box1 {
		height: 9em;
	}
	.box2 {
		height: 4em;
	}
	.login {
		height: 10em;
	}
	.login-kunde {
		height: 15em;
	}
	#daten {
		padding-left: 10px; 
	}
	
	.tab {
		margin-left: 10px;
		width: 129px;
	}
	#wartung {
		padding-top: 2em;
	}
}

/* ----------------------------------------------------------------------------- *
 *                      Styles für Menü ab Tabletversion                         *
 *                          750px / 16px/em = 46.875em                           *
 * ----------------------------------------------------------------------------- */

@media only screen and (min-width: 46.875em) {
    .page-wrapper {
        width: 20em;
        height: 27.5em;
		margin-top: -15.5em;
		margin-left: -10em;   
    }
	#bilddiv {
		width: 11em;	
	}
	.box1 {
		height: 11em;
	}
	.box2 {
		height: 6em;
	}
	.login {
		height: 10.5em;
	}
	.login-kunde {
		height: 15em;
	}
	.tab {
		width: 127px;
	}
	#wartung {
		padding-top: 3em;
	}
}

/* ----------------------------------------------------------------------------- *
 *                      Styles für Netbook                      *
 *                          1024px / 16px/em = 64em                              *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 1000px) and (min-height: 460px){
	.page-wrapper {
        width: 25em;
        height: 25em;
		margin-top: -8.5em;
		margin-left: -12.5em;   
    }
	#bilddiv {
		width: 10em;	
	}
	.box1 {
		height: 10em;
	}
	.box2 {
		height: 2em;
	}
	.login {
		height: 11em;
	}
	.login-kunde {
		height: 14em;
	}	
	.tab {
		width: 164px;
	}
	#wartung {
		padding-top: 3em;
	}
}
/* ----------------------------------------------------------------------------- *
 *                      Styles für Menü ab Desktopversion                        *
 *                          1024px / 16px/em = 64em                              *
 * ----------------------------------------------------------------------------- */


@media only screen and (min-width: 65em) {
    .page-wrapper {
        width: 25em;
        height: 31em;
		margin-top: -15.5em;
		margin-left: -12.5em;   
    }
	#bilddiv {
		width: 15em;	
	}
	.box1 {
		height: 12em;
	}
	.box2 {
		height: 8em;
	}
	.login {
		height: 11em;
	}
	.login-kunde {
		height: 14em;
	}	
	.tab {
		width: 164px;
	}
	#wartung {
		padding-top: 3em;
	}
}

/* ----------------------------------------------------------------------------- *
 *                          Styles für große Desktops                            *
 *                           1248px / 16px/em = 78em                             *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 78em) {
	.page-wrapper {
        width: 30em;
        height: 33em;
		margin-top: -16.5em;
		margin-left: -15em;   
    }
	#bilddiv {
		width: 18em;		
	}
	.box1 {
		height: 12em;
	}
	.box2 {
		height: 10em;
	}
	.login {
		height: 11em;
	}
	.login-kunde {
		height: 14em;
	}	
	.tab {
		width: 201px;
	}
	#wartung {
		padding-top: 4em;
	}
}