@font-face {
	font-family: "SCRIPTIN";
	font-display: swap;
	src: url(../Fonts/SCRIPTIN.ttf) format('truetype');
}
@font-face {
	font-family: "Lane";
	font-display: swap;
	src: url(../Fonts/lane.ttf) format('truetype');
	font-weight: normal;
}

*{
	font-family: lane, sans-serif;
	}

body{
	min-height: 100vh;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	position: relative;
	top:0;
	left: 0;
	overflow-y: scroll;
	overflow-x: hidden;
}
.text{
	text-align: left;
	font-family: lane;
	color: white;
	font-size: 20px;
	margin: 1em 10em 0 10em;
	line-height: 1.4;
	padding: 8px 50px 8px 50px;
}
.index{
	background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../img-gesangsunterricht-steglitz/mama.jpg);
}
.contact{
background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.9)), url(../img-gesangsunterricht-steglitz/feld.jpg);}
.katja{
	background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.9)), url(../img-gesangsunterricht-steglitz/mama4.jpg);
}
.wundernn{
	background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.9)), url(../img-gesangsunterricht-steglitz/mama3.jpg);
}
.aktuelles{
	background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.9)), url(../img-gesangsunterricht-steglitz/mama6.jpg);
	background-position: top;
}
.impre{
	background-image: linear-gradient(rgba(5, 11, 125, 0.57),rgba(143, 105, 161, 0.9)), url();

}

/*----------------------Startseite/Index--------------------------------*/

/*----------------------Header--------------------------------*/
/*----------------------Header--------------------------------*/
/*----------------------Header--------------------------------*/
.clear{
	clear: both;
}

img.logo{
	float: left;
	width: 150px;
	height: auto;
}
@media screen and (max-width:600px){
	img.logo{
		width: 1px;
		margin-left: 22em;
		opacity: 0;
	}
}
@media screen and (min-width:600px) and (max-width:1025px) {
	img.logo{
		width: 39px;
		margin-top: 1em;
	}
}
/*----------------------NAVIGATION--------------------------------*/
/*----------------------NAVIGATION--------------------------------*/
/*----------------------NAVIGATION--------------------------------*/
.navi{
	float: right;
	list-style-type: none;
	margin-top: 20px;
	font-family: lane;
	font-size: 22px;
	font-weight: 100;
}
@media screen and (max-width:600px){
	.navi {
		text-align: center;
	}
}
@media screen and (min-width:600px) and (max-width:1025px){
		.navi{
			margin-right: 9px;
		}
	}
.navi li{
	display: inline-block;
	border: 1px solid transparent;
	padding: 3px;
}
.navi li a{
	text-decoration: none;
	color: white;
	padding: 5px 20px;
	transition: 0.6s ease;
}
.navi li a:hover{
	color: #f46c18;
	transition: 0.5s;
}
.navi li.active{
	border-color: #fff;
}

.main {
	max-width: 1200px;
	margin: auto;
}
h1.title{
	color: #fff;
	text-align: right;
	font-size: 80px;
	font-family: SCRIPTIN;
	margin: 1em 1em 0 0;
}
@media screen and (max-width:600px){
		h1.title{
			font-size: 60px;
			margin-top: 4em;
		}
}
@media screen and (min-width:600px) and (max-width:1025px) {
	h1.title{
		text-align: center;
		font-size: 60px;
		margin: 11em 5em 0 6em;
	}
}

h2.title {
	text-align: right;
	color: white;
	font-size: 25px;
	font-family: lane;
	margin: 2em 2em 0 0;
}
@media screen and (max-width:600px){
		h2.title{
			text-align: center;
			font-size: 22px;
			margin: 1em 2em 1em 2em;
		}
	}

	@media screen and (min-width:600px) and (max-width:1025px){
			h2.title{
				text-align: center;
				font-size: 23px;
				margin-top: 1em;
				margin-left: 12em;
			}
		}
footer{
	position: absolute;
	bottom: 0;
	width: 100%;
	margin: 1em 2em 1em 2em;
}
@media screen and (max-width:600px){
		footer{
			margin: 1em 0em 2em;
		}
	}
@media screen and (min-width:600px) and (max-width:1025px) {
			footer{
				margin: 1em 0em 2em;
		}
	}

.impressum p{
	color: white;
	font-family: lane;
	font-size: 20px;
	text-decoration: none;
	margin: 1em 0 1em 0;
	text-align: center;
}
.impressum p a{
	color: white;
	text-decoration: none;
}
.impressum p a:hover{
	color: #f46c18;
	transition: 0.5s;
}
/*-----------------------------Über Katja-------------------------------------*/
.main{
	max-width: 1200px;
	margin: auto;
}
 h1.katjatitle{
	text-align: right;
	margin: 0.5em 2em;
}
@media screen and (max-width:600px){
		h1.katjatitle{
			text-align: center;
			font-size: 35px;
		}
	}
	@media screen and (min-width:600px) and (max-width:1025px){
			h1.katjatitle{
				margin-right: 1em;
				margin-top: 1em;
				text-align: center;
			}
		}

.textkatja{
	padding-bottom: 60px;
}
@media screen and (max-width:600px){
		.textkatja{
			font-size: 20px;
			border-width: 0px;
			width: 300px;
			height: 350px;
			padding: 4px;
			margin: 10px 40px 10px 40px;
			overflow-y: scroll;
			justify-content: center;
		}
	}
@media screen and (min-width:600px) and (max-width:1025px){
			.textkatja{
				overflow-y: scroll;
				justify-content: center;
				font-size: 20px;
				padding: 1em;
			}
		}
/*-----------------------------------Über das Wundern------------------------*/
h1.titlewundern{
	text-align: right;
	margin: 1em 2em 0 0;
}
@media screen and (max-width:600px){
		h1.titlewundern{
				text-align: center;
				font-size: 35px;
				margin-left: 1.5em;
		}
	}
@media screen and (min-width:600px) and (max-width:1025px){
			h1.titlewundern{
				text-align: center;
				font-size: 60px;
				margin: 1em 0 0.5em;
			}
		}

.textwundern{
	text-align: left;
	font-family: lane;
	color: white;
	font-size: 20px;
	margin: 1em 10em 0 10em;
	line-height: 1.4;
	padding: 8px 50px 8px 50px;
	}

@media screen and (max-width:600px){
			.textwundern{
				font-size: 20px;
				border-width: 0px;
				width: 300px;
				height: 350px;
				padding: 4px;
				margin: 10px 40px 10px 40px;
				overflow-y: scroll;
				justify-content: center;
			}
		}

/*-------------------------------------Kontakt------------------------------*/
h1.titlekon{
	margin: 0 1em 0 0;
}
@media screen and (max-width:600px){
h1.titlekon{
	margin: 13px 40px 10px 40px;
}
}

@media screen and (min-width:600px) and (max-width:1025px){
		h1.titlekon{
			text-align: center;
			font-size: 60px;
			margin: 1em 0 0.5em;
		}
	}
/*------------------------------------Kontaktformular----------------------*/
.email{
	width: auto;
	text-align: center;
	font-family: lane;
	font-size: 20px;
	color: #fff;
	margin-left: 2.8em;
	justify-content: center;
	padding: 5px;
	border-radius: 5px;
	transition: all 4s ease-in-out;
}
@media screen and (max-width:600px){
.email{
	margin: 1em;
}
}
@media screen and (min-width:600px) and (max-width:1025px){
		.email{
			margin-top: 5em;
			margin-left: 1em;
	}
}
#textarea{
	width: 300px;
	border-radius: 5px;
	background-color: transparent;
	color: white;
	padding: 10px;
	margin: 10px 0px;
	border-color: white;
}
input{
	background: transparent;
	border-color: transparent;
	border-bottom: solid 1px grey;
	color: white;
	font-size: 18px;
}
#btn{
	color: white;
	text-align: center;
	border: 3px solid rgb(194, 65, 2);
	border-radius: 5px;
	font-size: 25px;
	background-color:#f46c18;
	width: 320px;
	text-transform: uppercase;
	font-weight: bolder;

}
/*------------------------------------Aktuelles----------------------------*/
h1.titleakt{
	text-align: right;
	margin: 0 1em 0 0;
}

@media screen and (max-width:600px){
h1.titleakt{
		margin: 0 1em 0 2em;
		font-size: 35px;
		padding-bottom: 5px;
		padding-top: 10px;

	}
}
@media screen and (min-width:600px) and (max-width:1025px){
		h1.titleakt{
		text-align: center;
		font-size: 60px;
		margin: 1em 0.5em 0.5em 0;
		}
	}


h2.titleakt{
	text-align: right;
	margin: 1em 2.5em 1em 1em;
	text-decoration: underline;
}
.ueakt{
	text-align: center;
	font-size: 25px;
	text-decoration: underline;
}
@media screen and (max-width:600px){
.ueakt{
	font-size: 22px;
	}
}
.textaktu{
	text-align: left;
	font-family: lane;
	color: white;
	font-size: 20px;
	margin: 1em 10em 0 10em;
	line-height: 1.4;
	padding: 8px 50px 60px 50px;
}

@media screen and (max-width:600px){
.textaktu{
	font-size: 18px;
	border-width: 0px;
	width: 300px;
	height: 350px;
	padding: 4px;
	margin: 10px 40px 10px 40px;
	overflow-y: scroll;
	justify-content: center;
	}
}
@media screen and (min-width:600px) and (max-width:1025px){
		.textaktu{
			margin: 2em 10em 2em 10em;
    	padding: 0 1em 5em 1em;
}
		}
/*------------------------------------Impressum----------------------------*/
/*------------------------------------Impressum----------------------------*/
/*------------------------------------Impressum----------------------------*/
#titleimp{
	font-family: SCRIPTIN;
	color: white;
	font-size: 80px;
	text-align: right;
	margin-right: 1em;

}
@media screen and (max-width:600px){
		#titleimp{
			font-size: 40px;
			padding-top: 10px;
			padding-bottom: 5px;
			text-align: right;
	}
}
@media screen and (min-width:600px) and (max-width:1025px){
		#titleimp{
			font-size: 60px;
			text-align: center;
}
		}


.textimpressum{
	border: 2px solid rgb(60, 7, 87);
	border-radius: 10px;
	padding: 8px 50px 70px 50px;
	background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.6));
	margin: 1em 10em 4em 10em;

}
@media screen and (max-width:600px){
	.textimpressum{
	font-size: 15px;
	border-width: 0px;
	width: 300px;
	height: 350px;
	padding: 4px;
	margin: 10px 40px 10px 40px;
	overflow-y: scroll;
	justify-content: center;
	}
}
@media screen and (min-width:600px) and (max-width:1025px){
		.textimpressum{
			font-size: 18px;
			margin: 10px 30px 10px 30px;
}
		}
.ueimp{
	font-size: 27px;
	text-align: center;
	margin-bottom: 0.1em;
	text-decoration: underline double white;

}
#implink{
	color: white;

}
.mittlereue{
	text-align: center;
	font-size: 22px;
	text-decoration: underline;
	padding: 1em 0 0 0;
}
.formularchef{
	text-decoration: underline ;
	color: white;
}