/*  
@font-face {
font-family:'RUAGSimplon-Regular-WebS';
font-style: oblique;
font-weight: 1000;
url(../schrift/RUAG_Simplon.woff) format('woff');
	src:url(../schrift/RUAGSimplon-Regular-WebS.woff2) format('woff2'),
}

* {
font-family: 'RUAGSimplon-Regular-WebS';
}


body{
	margin-top: 2%;
	margin-right: 25%;
	margin-left: 25%;
	font-family: 'RUAGSimplon-Regular-WebS';
	font-size: small;
	color:#50555A;
}

Das hat mit dem Einbinden der Schrift so leider nicht geklappt, deshalb habe ich mich für unsere alternative Schirft Arial entschieden.
*/

body{
	margin-top: 2%;
	margin-right: 25%;
	margin-left: 25%;
	font-family: Arial, "sans-serif";
	font-size: small;
	color:#50555A;
}

main{
	background-color: #EAEDEF;
	padding-top: 2%;
  	padding-bottom: 15%;
  	padding-right: 2%;
  	padding-left: 2%;
}

footer{
	background-color:#50555A ;
	color: white;
	padding-top: 2%;
  	padding-bottom: 2%;
  	padding-right: 2%;
  	padding-left: 2%;
	
}

.grid-container{
 	display: grid;
	grid-template-columns: 25% auto 50%;
 	grid-template-rows: 15% 50% 15% 25% auto;
}

.item1{
	grid-column:1/2;
	grid-row:1/2;
}

.item2{
	grid-column:2/3;
	grid-row:1/2;
}

.item3{
	grid-column:3/4;
	grid-row:1/2;
}

.item4{
	grid-column:1/2;
	grid-row:2/3;
}

.item5{
	grid-column:2/3;
	grid-row:2/3;
}

.item6{
	grid-column:3/4;
	grid-row:2/3;
}

.item7{
	grid-column:1/3;
	grid-row:3/4;
	padding-top: 2%;
}

.item8{
	grid-column:1/2;
	grid-row:4/5;
}
.item9{
	grid-column:2/3;
	grid-row:4/5;
}

.item10{
	grid-column:3/4;
	grid-row:4/5;
}
.item11{
	grid-column:1/4;
	grid-row:5/6;
}

#submit{
	background-color:#FF0000;
	color: white;
	border: none;
}
h1{
	font-weight:lighter;
}

.red{
	color: #FF0000;
}

h2{
	color: #FF0000;
	font-size:16pt;
}

#logo{
	float: right;
	width: 170px;
}

p{
	margin-top: none;
	margin-bottom: none;
}

@media all and (max-device-width: 1033px) {

	body{
	margin-right: 0%;
	margin-left: 0%;
}
	header{
	margin-right: 5%;
	margin-left: 5%;
	margin-bottom: 5%;
	margin-top: 2%;
}
	
	main{
	padding-bottom:20%;
	padding-right: 5%;
	padding-left: 5%;
	}
	
	footer{
	padding-bottom:4%;
	padding-right: 5%;
	padding-left: 5%;
	}
	
	label{
		font-size: large;
	}
	
	input{
		font-size: large;
	}

	/* Die Schriftgrössen stimmen nicht ganz, wenn man sie auf dem Computer mit Untersuchen (als responsive) anschaut. 
	Auf meinem Handy werden sie so aber richtig angezeigt. */
	p{
		font-size: 20px;
	}
	h1{
		font-size: 40px;
	}
	h2{
		font-size: 30px;
	}
	.responsivetext{
		font-size: 15px;
	}
	.grid-container{
 	display: block;
}

.item1{
	padding-top: 1%;
}

.item2{
	padding-top: 4%;
}

.item3{
	padding-top: 4%;
}

.item4{
	padding-top: 4%;
}

.item5{
	padding-top: 4%;
}

.item6{
	padding-top: 4%;
}

.item7{
	padding-top: 7%;
}

.item8{
	padding-top: 1%;
}
.item9{
	padding-top: 4%;
}

.item10{
	padding-top: 4%;
}
.item11{
	padding-top: 4%;
}
}

main.white{
	background-color: white;
}