@charset "UTF-8";
/* CSS Document */

  *{
	margin: 0;
	padding: 0;
	box-sizing: content-box; 
	max-width: 100%;
	text-decoration: none;
	color: rgba(40,40,40,1);
	font-family: 'Titillium Web', sans-serif;
  }

/*######################### BODY #########################*/

body{
	
}

/*++++++++++++++++++++ HEADER ++++++++++++++++++++*/
header{
	background-color: grey ;
	width: 100%;
	height: 800px;
	background-image: url("../../Bilder/kontakt.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}


/*-----+++++ NAVIGATION +++++-----*/

header nav{
	background-color: white;
	width: 100%;
	height: 100px;
	display: flex;
	align-items: center;
	text-transform: uppercase;
	font-weight: 600;
	justify-content: space-between;
}

/*----- Logo -----*/
.logo{
	height: 60px;
	width: auto;
	margin-left: 12%;
}

/*----- Links -----*/
.links{
	margin-right: 10%;
}

header nav .links a{
	margin-left: 40px;
	font-size: 1.2em;
	
}	

/*----- Titel -----*/

.titel{
	text-transform: uppercase;
	font-size: 4.5em;
	line-height: 1.2em;
	margin-left: 12%;
	margin-top: 150px;
	width: 40%;
	height: auto;	
}


/*++++++++++++++++++++ MAIN ++++++++++++++++++++*/

.main{
	margin-bottom: 200px;
	margin-top: 100px;
}

.mainheadline{
	margin-left: 12%;
	margin-right: 12%;
	font-size: 2em;
}
.mainheadline p{
	font-size: 0.8em;
}

.hinweis{
	margin-left: 12%;
	margin-right: 12%;
	margin-bottom: 50px;
	font-size: 1em;
}

.hinweis p{
	color: rgba(160,160,160,1.00);
}


/*++++ EINGABE ++++*/

#kontakt{
	margin-left: 12%;
	margin-right: 12%;
	margin-top: 100px;
	margin-bottom: 100px;
	display: flex;
	justify-content: center;
	color: black;
}

#kontakt form{
	width: 40%;
	height: auto;
	background: #fff;
	box-sizing: border-box;
}

form .formfelder input{
	margin: 10% 10% 0 10%;
	width: 70%;
	padding: 5%;
	display: block;
	border: none;
	border-bottom: 3px solid #dadada;
}

form .formfelder input:focus{
	outline: none;
	background: 100% 100%;
	border-bottom-color: purple;
	transition: 0.2s;
}


/*----- Betreff -----*/

.message input{
	width: 90%;
	height: 10%;
	padding: 5%;
	margin-bottom: 5%;
}

.message input:focus{
	outline: none;
	
}


/*----- Nachricht -----*/

.message{
	margin: 10% 10% 0 10%;

}

.message textarea {
	width: 90%;
	height: 10%;
	padding: 5%;
}

/*----- Button -----*/

#button{
	width: 80%;
	height: 8%;
	margin: 10% 10% 0 10%;
	background-color: rgba(158,41,134, 1);
	border: none;
	
	/*XXX FONT XXX*/
	font-size: 1em;
	text-transform: uppercase;
	font-weight: 600;
	color: white;
	cursor: pointer;
}













/*++++++++++++++++++++ FOOTER ++++++++++++++++++++*/

.footerinfo{
	background-color:#131313;
	height: auto;
	padding-top: 50px;
	padding-bottom: 50px;
	padding-left: 12%;
	padding-right: 12%
}

.footerlogo{
	width: 280px;
	height: auto;
}

.footercontent{
	display: flex;
	justify-content: flex-start;
	
}

.footercontent p{
	color: white;
	margin-right: auto;
}

.footercontent p b {
	color:white;
}

.footercontent p b a{
	color:white;
}

/*##########################################
############################################
############################################
############################################
############################################
############### H O V E R ##################
############################################
############################################
############################################
############################################
############################################*/
/*######################### HOVER #########################*/

.links a:hover{
	transition: 0.2s;
	color: rgba(158,41,134,1.00);
}

.footercontent p b a:hover{
	transition: 0.2s;
	color:rgba(158,41,134);
}


/*##########################################
############################################
############################################
############################################
############################################
########### R E S P O N S I V E ############
############################################
############################################
############################################
############################################
############################################*/


/*++++++++++ TABLET ++++++++++*/

@media screen and (max-width: 1024px){
	body{
		text-decoration: none;	
	}
	
	header{
		background-color: grey ;
		width: 100%;
		height: 600px;
		
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	
	header nav{
		background-color: white;
		width: 100%;
		height: 100px;
		display: flex;
		align-items: center;
		text-transform: uppercase;
		justify-content: space-around;
	}
	
	header nav .links a{
		margin-left: 35px;
		font-size: 0.8em;
	}	
	
	.logo{
		height: 30px;
		width: auto;
		margin-left: 12%;
	}
	
	.titel{
		text-transform: uppercase;
		font-size: 3em;
		line-height: 1em;
		margin-left: 12%;
		margin-top: 100px;
		width: 40%;
		height: auto;	
	}
	
		
/*++++++++++++++++++++ MAIN ++++++++++++++++++++*/

.main{
	margin-bottom: 200px;
	margin-top: 100px;
}

.mainheadline{
	margin-left: 12%;
	margin-right: 12%;
	font-size: 2em;
}
.mainheadline p{
	font-size: 0.8em;
}

.hinweis{
	margin-left: 12%;
	margin-right: 12%;
	margin-bottom: 50px;
	font-size: 1em;
}

.hinweis p{
	color: rgba(160,160,160,1.00);
}


/*++++ EINGABE ++++*/

#kontakt{
	margin-left: 12%;
	margin-right: 12%;
	margin-top: 100px;
	margin-bottom: 100px;
	display: flex;
	justify-content: center;
	color: black;
}

#kontakt form{
	width: 80%;
	height: auto;
	background: #fff;
	box-sizing: border-box;
}

form .formfelder input{
	margin: 10% 10% 0 10%;
	width: 70%;
	padding: 5%;
	display: block;
	border: none;
	border-bottom: 3px solid #dadada;
}

form .formfelder input:focus{
	outline: none;
	background: 100% 100%;
	border-bottom-color: purple;
	transition: 0.2s;
}


/*----- Nachricht -----*/

.message{
	margin: 10% 10% 0 10%;

}

.message textarea {
	width: 90%;
	height: 10%;
	padding: 5%;
}

/*----- Button -----*/

#button{
	width: 80%;
	height: 8%;
	margin: 10% 10% 0 10%;
	background-color: rgba(158,41,134, 1);
	border: none;
	
	/*XXX FONT XXX*/
	font-size: 1em;
	text-transform: uppercase;
	font-weight: 600;
	color: white;
	cursor: pointer;
}	
	
	
	
	
	
/*--------FOOTER----------*/
	.footercontent{
		display: block;
		font-size: 1em;
	}
	
}











/*++++++++++ MOBILE ++++++++++*/

@media screen and (max-width: 480px){
	body{
		text-decoration: none;
	}
	
	/*----- Header -----*/
	header{
		background-color: grey ;
		width: 100%;
		height: 300px;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	
	header nav{
		background-color: white;
		width: 100%;
		height: 100px;
		display: flex;
		align-items: center;
		text-transform: uppercase;
		justify-content: space-around;
	}
	
	header nav .links a{
		margin-left: 35px;
		font-size: 0.6em;
	}	
	
	.logo{
		height: 15px;
		width: auto;
		margin-left: 12%;
	}
	
	/*----- Titel -----*/
	
	.titel{
		text-transform: uppercase;
		font-size: 1.5em;
		line-height: 1em;
		margin-left: 12%;
		margin-top: 50px;
		width: 40%;
		height: auto;	
	}
	
	
	
/*--------MAIN----------*/	
	
/*++++++++++++++++++++ MAIN ++++++++++++++++++++*/

.main{
	margin-bottom: 200px;
	margin-top: 100px;
}

.mainheadline{
	margin-left: 12%;
	margin-right: 12%;
	font-size: 1.5em;
}
.mainheadline p{
	font-size: 0.68m;
}

.hinweis{
	margin-left: 12%;
	margin-right: 12%;
	margin-bottom: 50px;
	font-size: 0.8em;
}

.hinweis p{
	color: rgba(160,160,160,1.00);
}


/*++++ EINGABE ++++*/

#kontakt{
	margin-left: 12%;
	margin-right: 12%;
	margin-top: 100px;
	margin-bottom: 10px;
	display: flex;
	justify-content: center;
	color: black;
}

#kontakt form{
	width: 100%;
	height: auto;
	background: #fff;
	box-sizing: border-box;
}

form .formfelder input{
	margin: 10% 10% 0 10%;
	width: 70%;
	padding: 5%;
	display: block;
	border: none;
	border-bottom: 3px solid #dadada;
}

form .formfelder input:focus{
	outline: none;
	background: 100% 100%;
	border-bottom-color: purple;
	transition: 0.2s;
}


/*----- Nachricht -----*/

.message{
	margin: 10% 10% 0 10%;

}

.message textarea {
	width: 90%;
	height: 10%;
	padding: 5%;
}

/*----- Button -----*/

#button{
	width: 80%;
	height: 8%;
	margin: 10% 10% 0 10%;
	background-color: rgba(158,41,134, 1);
	border: none;
	
	/*XXX FONT XXX*/
	font-size: 1em;
	text-transform: uppercase;
	font-weight: 600;
	color: white;
	cursor: pointer;
}
	
/*--------FOOTER----------*/
	.footercontent{
		display: block;
		font-size: 1em;
	}
	
	.footercontent p{
		color: white;
	}
	
	
	
	
	
	
	
	
	
	
}























/*@media (min-width: 801px) and (max-width: 1024px)*/