@media (min-resolution: 151dpi) and (orientation: landscape) {
	#box {position:relative; width:80%; margin-right:auto; margin-left:auto;}
	input[type=text] {width:70%;}
	input[type=file] {width:100%;}
	input[type=password] {width:70%;}
	.U1 {font-size:19px;}
	.U2 {font-size:17px;}
	.Symbol{font-size: 30px; }
	/*.heading{width:85%; position:relative; left:14%;}*/
	html {color:#333333; font-family: Helvetica, Arial, Geneva, sans-serif; font-size:15px;}
}
@media (min-resolution: 151dpi) and (orientation: portrait) {
	#box {position:relative; width:90%; margin-right:auto; margin-left:auto;}
	input[type=text] {width:100%; }
	input[type=file] {width:100%; }
	input[type=password] {width:100%;}
	.U1 {font-size:13px;}
	.U2 {font-size:12px;}
	.Symbol{font-size: 25px; }
	/*.heading{width:85%; position:relative; left:16%;}*/
	html {color:#333333; font-family: Helvetica, Arial, Geneva, sans-serif; font-size:11px;}
}
/*Monitore von PCs, das A8 Tablet */
@media (max-resolution: 150dpi) and (orientation: landscape) {
	#box {position:relative; width:60%; margin-right:auto; margin-left:auto;}
	input[type=text] {width:50%;}
	input[type=file] {width:80%;}
	input[type=password] {width:50%;}
	.U1 {font-size:28px;}
	.U2 {font-size:17px;}
	.Symbol{font-size: 60px; }
	/*.heading{width:85%; position:relative; left:12%;}*/
	html {color:#333333; font-family: Helvetica, Arial, Geneva, sans-serif; font-size:16px;}
}
/* das A8 Tablet */
@media (max-resolution: 150dpi) and (orientation: portrait) {
	#box {position:relative; width:90%; margin-right:auto; margin-left:auto;}
	input[type=text] {width:80%;}
	input[type=file] {width:100%;}
	input[type=password] {width:80%;}
	.U1 {font-size:28px;}
	.U2 {font-size:17px;}
	.Symbol{font-size: 60px; }
	/*.heading{width:85%; position:relative; left:12%;}*/
	html {color:#333333; font-family: Helvetica, Arial, Geneva, sans-serif; font-size:16px;}
}


/* das wirkt stärker als an Klasse gebunden
input[type=text]:valid {color: #333333;}
input[type=text]:invalid {color: red;}
*/

input[type=checkbox] {width:1.5em; height:1.5em;vertical-align:middle;}
.check {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.check:hover {color:blue;font-weight:bolder;cursor: pointer;}
.check:hover input[type=checkbox]{accent-color:blue;outline: 1px solid blue;} /*1. für checked, 2. Umrahmung*/

textarea {width:100%; height:20em; font-size:1em;}
.ROT {color:red;}
a {text-decoration:none; color:blue; font-weight:bolder; cursor: pointer;}
a:hover {color:blue;}
a:visited {color:blue;}
.leftTD {width:40px; text-align:left; }
table {font-size:100%;}
footer {width:70%; margin-right:auto; margin-left:auto; font-size:smaller;}
.right_align{width:70%; margin-right:0; margin-left:auto; text-align:left;}

header img{width:100%;}

summary:hover{cursor: pointer; color:blue;}

#Con {position:relative;}
#layer {display:none;position:fixed;top:0;left:0;width:100%;height:100%; background-color: rgba(255,255,255,0.7);}
.menu-main {position:absolute; top:-10px; left:-10px;}
.menu-kinds {position:relative;}
.menu-basics {position:relative;}

.main-content {display:none; position:absolute; left:0px; width: 180px; border-top:10px solid  transparent;}
.kinds-content {display:none; position:absolute; left:180px; top:0px; width: 180px; border-left:10px solid  transparent;}
.basics-content {display:none; position:absolute; left:180px; top:0px; width: 180px; border-left:10px solid  transparent;}

.menu-main button {color:blue; background-color: rgba(200,200,200,0.7); padding: 5px; border: none; cursor: pointer;}
.menu-main a {background-color:#dcdcdc;color:#333333; padding: 12px 12px; text-decoration: none; display: block;}
.menu-main a:hover {background-color:blue;color:white;}

.menu-main:hover .main-content {display:block; }
.menu-kinds:hover .kinds-content {display:block;}
.menu-basics:hover .basics-content {display:block;}

.menu-main:hover button {background-color: blue; color:white;} 
.menu-kinds:hover .kinds-btn{background-color:blue;color:white;}
.menu-basics:hover .basics-btn{background-color:blue;color:white;}

/* Spamschutz Mailadresse und PDF */
span.moin {display:none;}
span.moin2 {display:inline;} 

/* Anzahl Stellenangebote, rechts ausrichten */
span.jobs {position: absolute;  right: 0px;}

#w,#m {position: relative;  top: 10px; cursor:pointer; border: 1px solid  blue;}

.i_span {
		background-color:white;
	margin-left:-26px; /* neu */	
	position:relative;
	top: 9px;
	font-size:1em; 
	color: #aaaaaa; 
	font-weight: bolder;}

.i_input {
	background-color:white;
	box-sizing: border-box;
	height: 47px; 
	font-size:1.3em; 
	border: 3px solid #aaaaaa; 
	padding-left: 20px;
	border-radius: 8px;
	width:100%;}
.i_input2 {padding-top: 20px; height:74px;}
.i_input:valid {color: #333333;}
.i_input:invalid {color: red;}
.i_submit {font-size:1.3em;padding: 10px;}