@charset "utf-8";
/* CSS Document */
.grid-container {
  display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 10% 60% 10%;
}

body {
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
}

h1{
	font-family: 'Anton', sans-serif;
	color: #003B82;
}
p{
	font-size: 15px;
}

.klein{
	font-size: 8px;
	color: #003B82;
	padding-left: 5px;
}

.item1 {
  grid-column:1/3;
	grid-row: 1/2;
	margin-bottom: 30%;
	padding-right: 1.5%;
	padding-left: 1.5%;
}

.item2 {
  grid-column: 1/2;
  grid-row: 2/3; 
	padding-right: 1%;
	padding-left: 3%;
	margin-bottom: 30%;
	border-right:1px solid #707070;
}

.item3 {
  grid-column: 2/3;
  grid-row: 2/3;
	padding-right: 3%;
	margin-bottom: 30%;
	padding-left: 3%;

}

.item4 {
  grid-column:1/3;
grid-row: 3/4;
	text-align: center;
}

#logo{
	height: 100px;
	width: auto;
	float: right;
}

#name{
	display: flex;
}



input {
	border: none;
	border-bottom:1px solid #707070;
	margin-bottom: 25px;
}

input.anrede {
    margin-bottom: 5px;
}

select{
	border: none;
	border-bottom:1px solid #707070;
	margin-bottom: 25px;
}

textarea{
	border: none;
	border:1px solid #707070;
	height: 100px;
	width: 70%;
	margin-bottom: 25px;
}

#fname{
	margin-right: 20px;
}

#btn{
	background-color: #003B82;
	height: 40px;
	width: 150px;
	color: #FFFFFF;
	border: none;
}

.grid-container.bestaetigungsseite {
  display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 70% 30%;
}

body.bestaetigungsseite{
	background-color: #0060D4;
}

h1.bestaetigungsseite{
	font-family: Anton;
	font-size: 70px;
	color: #FFFFFF;
}

p.bestaetigungsseite{
	font-family: Montserrat;
	font-size: 40px;
	color: #FFFFFF;
}

.grid1{
	grid-template-rows: auto;
	border-bottom: 4px solid #003B82;
	padding-left: 1.5%;
}
.grid2{
	grid-template-rows: auto;
	padding-left: 1.5%;
}

@media only screen and (max-width: 600px){
	.grid-container {
  	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 10% 45% 35% 10%;
}
	
	body {
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
}

h1{
	font-family: 'Anton', sans-serif;
	color: #003B82;
}
p{
	font-size: 12px;
}

.klein{
	font-size: 5px;
	color: #003B82;
	padding-left: 5px;
}

.item1 {
  grid-column:1/3;
grid-row: 1/2;
	margin-bottom: -20%;
	padding-right: 1.5%;
	padding-left: 1.5%;
}

.item2 {
  grid-column: 1/2;
  grid-row: 2/3; 
	padding-right: 1%;
	padding-left: 3%;
	margin-bottom: 80%;
	border-right: none;
}

.item3 {
  grid-column: 1/2;
  grid-row: 3/4;
	padding-right: 3%;
	padding-left: 3%;
	margin-bottom: 5%;
	border-left: none;
	

}

.item4 {
  grid-column:1/2;
grid-row: 4/5;
	text-align: center;
}

#logo{
	height: 100px;
	width: 100px;
	height: auto;
	float: right;
}


	
#name{
	display: flex;
	flex-direction: column;
}
	
input {
	border: none;
	border-bottom:1px solid #707070;
	margin-bottom: 25px;
}

input.anrede {
    margin-bottom: 5px;
}

select{
	border: none;
	border-bottom:1px solid #707070;
	margin-bottom: 25px;
}

textarea{
	border: none;
	border:1px solid #707070;
	height: 100px;
	width: 70%;
	margin-bottom: 25px;
}

#fname{
	margin-right: 20px;
}

#btn{
	background-color: #003B82;
	height: 40px;
	width: 150px;
	color: #FFFFFF;
	border: none;
}

}