@charset "utf-8";
/* CSS Document */
*{margin:0;
padding:0; 
}

html{font-size:10px;
font-family: 'Quattrocento+Sans', sans-serif;
}
body {font-size: 14px;
	font-weight: 400;
	word-spacing: 0.1em;
	line-height: 1.8em;
	background-color:#000;
	color: #CCC;
}
	
img {border: none;}

wrapper { width: 100%;
	height:101%; 
	background-color:#000;
	position: absolute;
	bottom:0;
	}
	
header { 
	}
/*Anfang Mobile*/
@media (max-width: 34.99em){
	
#noten {width:100%;
	height:90px;
	max-width:950px;
	margin-left:5%;
	background-image:url(images/noten.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	}

#name {width:90%; max-width:351px;
	height:49px;
	margin-left:7%;
	margin-top:-9rem;
	background-image:url(images/name.jpg);
	background-repeat:no-repeat;
	background-size: contain;
	}

#instrument {width:80%; max-width:233px; 
	height:41px;
	margin-left:17%;
	
	background-image:url(images/instrument.jpg);
	background-repeat:no-repeat;
	background-size: contain;
	}

nav { width:100%;
	max-width:1000px;
	height:20px;
	margin-left:11%;
	}

ul li{float:left;
	width:auto;}
ul { list-style-type: none;}
li {margin-right:20px;}

/*Start Content*/
.right { float:right;}

section {width:100%; max-width:1000px;
	height:auto;
	margin-top:5rem;
	margin-left:5%;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	background-color:#000;
	}

article1 {width:100%;
	height:auto;
	}

#picturehome { width: 60%;
	height:35rem;
	background-image:url(images/eleo.jpg);
	background-repeat: no-repeat;
    background-size: 100%;
    float: none;
	}
#texthome {	width:90%;
	height:auto;
	float:none;
	padding-top:5rem;
	padding-left:5%;
	padding-right: 10%;}

#pictureunterricht {width:90%;
	height:25rem;
	background-image: url(images/unterricht.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	max-height:30em;
	box-sizing: border-box;}
#textunterricht {width:90%;
	padding:1em 2em 0 1em;
	box-sizing: border-box;}

#pictureangebot {width:90%;
	height:25rem;
	background-image: url(images/angebot.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	max-height:34em;
	box-sizing: border-box;}
#textangebot {width:90%;
	padding:1em 2em 0 1em;
	box-sizing: border-box;}

#pictureduo {width:90%;
	height:25rem;
	background-image: url(images/duo.jpg);
	background-repeat:no-repeat;
	background-size: contain;
	max-height:38em;
	box-sizing: border-box;}
#textduo {width:90%;
	padding:1em 2em 0 1em;
	box-sizing: border-box;}

#picturesolo {width:90%;
	height:25rem;
	background-image: url(images/solo.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	background-position:bottom;
	max-height:48em;
	box-sizing: border-box;}
#textsolo {width:90%;
	padding:1em 2em 0 1em;
	box-sizing: border-box;}

#picturevita {width: 60%;
	height:35rem;
	background-image: url(images/eleo.jpg);
	background-repeat:no-repeat;
	background-size: contain;
	max-height:38em;
	padding-top:4em;
	box-sizing: border-box;}
#textvita {width:90%;
	padding:1em 2em 0 1em
	box-sizing: border-box;}

#picturepreise {width:90%;
	height:25rem;
	background-image: url(images/preise.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	max-height:38em;
	box-sizing: border-box;}
#textpreise {width:90%;
	padding:1em 2em 0 1em;
	box-sizing: border-box;}
	
#pictureimpress {width:90%;
	height:25rem;
	background-image: url(images/impress.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	max-height:38em;
	box-sizing: border-box;}
	
#picturekontakt {width:90%;
	height:25rem;
	background-image: url(images/kontakt.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	max-height:34em;
	box-sizing: border-box;}
#textkontakt {width:90%;
	padding:1em 2em 0 1em;
	box-sizing: border-box;}
.thieme { }

/*Ende Content*/

footer { width:100%;
	max-width:1000px;
	height:90px;
	margin-left:5%;
	background-image: url(images/noten.jpg);
	background-repeat: no-repeat;
	background-color:#000;
	}
.foot { float:left;
	margin-left:6%;}


.clearfloat {clear:both;}

li	{ width:auto;}

p {font-family: Quattrocento+Sans, sans-serif;}

h1 {font-family: Quattrocento+Sans, sans-serif;
	font-size:24px;
	font-weight: 400;
	color: #900;
	}
	
h2 {font-family: Quattrocento+Sans, sans-serif;
	font-size: 18px;
	font-weight: 400;
	color: #666;
	}	

.aktiv {color: #F63;
	font-weight:bold;
	}

a:link {font-weight:bold;
	text-decoration: none;
	color: #C30;
	}

a:visited {font-weight:bold;
	text-decoration: none;
	color: #C00;
	}

a:hover {font-weight:bold;
	text-decoration: none;
	color:#F00;
	}

a:active {font-weight:bold;
	text-decoration: none;
	color: #900;
	}
}
/*Ende Mobile*/

/*Anfang Web*/
@media screen and (min-width: 35em){
	
	#noten {width:100%;
	height:90px;
	max-width:950px;
	margin-left:5%;
	background-image:url(images/noten.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	}

#name {width:60%; max-width:351px;
	height:49px;
	margin-left:7%;
	margin-top:-9rem;
	background-image:url(images/name.jpg);
	background-repeat:no-repeat;
	background-size: contain;
	}

#instrument {width:50%; max-width:233px; 
	height:41px;
	margin-left:17%;
	
	background-image:url(images/instrument.jpg);
	background-repeat:no-repeat;
	background-size: contain;
	}

nav { width:100%;
	max-width:1000px;
	height:20px;
	margin-left:11%;
	}

ul li{float:left;
	width:auto;}
ul { list-style-type: none;}
li {margin-right:20px;}

/*Start Content*/
.right { float:right;}

section {width:100%; max-width:1000px;
	height:auto;
	margin-top:5rem;
	margin-left:5%;
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	background-color:#000;
	}

article1 {width:100%;
	height:auto;
	}

#picturehome { background-image:url(images/eleo.jpg);
	background-position: left top 3rem;
    background-repeat: no-repeat;
    background-size: 100%;
    float: left;
    height: auto;
    min-height: 50rem;
    width: 35%;}
#texthome {	width:60%;
	height:auto;
	float:right;
	padding-top:5rem;
	padding-left:5%;
	padding-right: 10%;}

#pictureunterricht {width:20%;
	background-image: url(images/unterricht.jpg);
	background-repeat:no-repeat;
	background-size: contain;
	max-height:30em;
	box-sizing: border-box;}
#textunterricht {width:75%;
	padding:0 2em 0 4em;
	box-sizing: border-box;}

#pictureangebot {width:30%;
	height:34em;
	background-image: url(images/angebot.jpg);
	background-repeat:no-repeat;
	background-size: contain;
	max-height:34em;
	box-sizing: border-box;}
#textangebot {width:70%;
	padding:0 2em 0 4em;
	box-sizing: border-box;}

#pictureduo {width:30%;
	background-image: url(images/duo.jpg);
	background-repeat:no-repeat;
	background-size: contain;
	max-height:38em;
	box-sizing: border-box;}
#textduo {width:65%;
	padding:0 2em 0 4em;
	box-sizing: border-box;}

#picturesolo {width:30%;
	height:34em;
	background-image: url(images/solo.jpg);
	background-repeat:no-repeat;
	background-size: contain;
	max-height:48em;
	box-sizing: border-box;}
#textsolo {width:65%;
	padding:0 8em 0 2em;
	box-sizing: border-box;}

#picturevita {width:20rem;
	background-image: url(images/eleo.jpg);
	background-repeat:no-repeat;
	background-size: contain;
	max-height:38em;
	padding-top:4em;
	box-sizing: border-box;}
#textvita {width:85%;
	padding:0 8em 0 2em;
	box-sizing: border-box;}

#picturepreise {width:40%;
	background-image: url(images/preise.jpg);
	background-repeat:no-repeat;
	background-size: contain;
	max-height:38em;
	box-sizing: border-box;}
#textpreise {width:60%;
	padding:0 4em 0 2em;
	box-sizing: border-box;}
	
#pictureimpress {width:40%;
	background-image: url(images/impress.jpg);
	background-repeat:no-repeat;
	background-size: contain;
	max-height:38em;
	box-sizing: border-box;}
	
#picturekontakt {width:40%;
	height:32em;
	background-image: url(images/kontakt.jpg);
	background-repeat:no-repeat;
	background-size: contain;
	max-height:34em;
	box-sizing: border-box;}
#textkontakt {width:60%;
	padding:0 4em 0 2em;
	box-sizing: border-box;}
.thieme { }

/*Ende Content*/

footer { width:100%;
	max-width:1000px;
	height:90px;
	margin-left:5%;
	background-image: url(images/noten.jpg);
	background-repeat:no-repeat;
	background-color:#000;
	}
.foot { float:left;
	margin-left:6%;}


.clearfloat {clear:both;}

li	{ width:auto;}

p {font-family: Quattrocento+Sans, sans-serif;}

h1 {font-family: Quattrocento+Sans, sans-serif;
	font-size:24px;
	font-weight: 400;
	color: #900;
	}
	
h2 {font-family: Quattrocento+Sans, sans-serif;
	font-size: 18px;
	font-weight: 400;
	color: #666;
	}	

.aktiv {color: #F63;
	font-weight:bold;
	}

a:link {font-weight:bold;
	text-decoration: none;
	color: #C30;
	}

a:visited {font-weight:bold;

	text-decoration: none;
	color: #C00;
	}

a:hover {font-weight:bold;
	text-decoration: none;
	color:#F00;
	}

a:active {font-weight:bold;
	text-decoration: none;
	color: #900;
	}
}