* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Verdana, sans-serif;
    color: black;
	
	
}

html {font-size: 100%;}


@media(min-width:960px){
html {font-size: 125%;}
}


body {
	background: black;
    padding:0;
    margin:0 auto;
    max-width: 1400px;
    min-width: 360px;
	
	
}

.clear{clear: both;}

/* ----- header --------- */

header {
  
   
}

header > div{
    position: relative;
    
}

.headimg img {
    width: 100%;
    
}

.logo {
    position: relative;
    margin-left: 80%;

}

.logo img {
    padding: 10px;
    max-width: 100%;
 }

nav {
    max-width: 1400px;
	min-width: 960px;
    margin: 0 auto;
    position: absolute;
    width: 100%;
    background: #595959;
    
    font-weight: bold;
    font-size: 0.9rem;
    

}

nav > ul {
  position: relative;
  display: flex;
  margin: 0 auto;
  padding: 0;
}

nav a {
  display: block;
  color: black;
  text-decoration: none;
}

nav a:hover {
  color: #c2c2c2;;
}

nav ul li {
  color: #fff;
  list-style: none;
  transition: 0.5s;
}


nav > ul > li > a {
  padding: 15px 25px;
}


nav ul.megamenu {
  position: absolute;
  top: -9999px;
  left: 8%;
  text-align: left;
  z-index: 1;
}

nav ul li:hover ul.megamenu {
  top: 100%;
  
}

nav ul.megamenu {
  width: 15%;
  margin-bottom: 40px;
  color: #000;
}


nav ul.megamenu li {
    padding: 5%;
  display: block;
}

nav ul.megamenu li a {
  transition: 0.9s;
  color: #000;
}

nav ul.megamenu li:hover {
  color: #c2c2c2;
}

.aktiv {color: white;}


#smartmenue{
    position: absolute;
    margin-top: 50px;
    left: 0;
  padding: 30px 10px 10px 20px;
  background: #595959;
  text-align: left;
    font-size: 1.2rem;

    display: none;
	z-index: 5;
    
}

#smartmenue a{
    padding: 10px;
}





/* ------Ende header ---  */


/* ----- Die sections -----*/

.start{
	width: 100%;
	
}

.start a{
	margin-top: 5%;
	margin-left: 25%;
	margin-right: 25%;
justify-content: center;
  position: relative;
  display: flex;

}



section {
   padding-top: 80px;
	width:100%;

    padding-bottom: 10px;
}

h1 {
    font-weight: bold;
    font-size: 2rem;
    color: white;
	margin-top: 60px;
    text-align: center;
}

h2 {
    font-weight: bold;
    font-size: 1.5rem;
    color: white;
    margin-bottom: 20px;
    text-align: center;
}

h3 {
    font-weight: bold;
    font-size: 1rem;
    color: white;
    margin-bottom: 20px;
    text-align: left;
}

strong {
    color: white;
}

p strong {
    color: white;
}

a{
    color: white;

}

a:hover {
  
	color: #595959;
}


section img {
    width: 100%;
    padding: 10px;
}

.flex-container{
  padding: 5%;
  display: flex;
  flex-wrap: wrap;
}


.flex-container div{
  width: 95%;
    margin: 2%;
    margin-bottom: 20px;
}

@media(min-width:960px){
.flex-container div{
  width: 45%;
    margin: 2%;
    margin-bottom: 20px;
    }}

.flex-container p {
    
	padding: 10px;
    width: 100&;
	font-size: 1rem;
    color: white;
	text-align: justify;	
}


.flex-container div p a{
    color: white;

}

.flex-container ul li{
	font-size: 1rem;
    color: white;
	
}

.repertoire ul li{
	font-size: 1rem;
    color: white;
	list-style: none;
	margin-left: 20px;
}


.Sample h3{
   text-align: center;
   color: white;
}

.Sample audio{
   margin-left: 15%;
   
    width: 70%;
}

.Sample p{
	margin-left: 15%;
	margin-right: 15%;
	text-align: justify;	
    color: white;
	
}



.fett {
    font-weight: bold;
}

.min-960{display: none}
.max-960{display: block}

@media(min-width:960px){
.max-960{display: none}
.min-960{display: block}
}
    
.news {
    margin: 5%;
    padding: 5%;
    }

.news img {
    width: 50%;
}

.news h3 {
    font-size: 1.6rem;
    color: white;
    text-align: center;
    padding-bottom: 20px;
	padding-bottom: -20px;
}

.news h4 {
    font-size: 1.2rem;
   color: white;
}

.news p {
    font-size: 1rem;
    color: white;
	text-align: justify
}

.bio {
    margin: 5%;
    padding: 5%;
    }

.bio img {
    width: 50%;
}

.bio h3{
    font-size: 1.6rem;
    color: white;
    text-align: center;
    padding-bottom: 20px;
}

.bio h4 {
    font-size: 1.2rem;
   color: white;
}

.bio p {
    font-size: 1rem;
    color: white;
	text-align: justify
}

.bio p a{
    color: white;
}

.projekte {
    margin: %;

    padding: 5%;
    }

.projekte img {
    width: 50%;
}


.projekte p {
    font-size: 1rem;
    color: white;
	
}

.datenschutz{
  margin: 5%;
    padding: 5%;
 
}

.datenschutz div{
  width: 100%;
    margin: 2%;
    margin-bottom: 20px;
    }

.datenschutz p {
    
	padding: 10px;
    width: 100&;
	font-size: 1rem;
    color: white;
	text-align: justify;	
}


.datenschutz div p a{
    color: white;

}

.datenschutz img {
    width: 100%;
	padding-bottom: 30px;
}

@media(min-width:960px){
.datenschutz img {
 width: 60%;
	padding-bottom: 30px;
    }}



.blocksatz {
    text-align: justify;
}


.index img.image{
width: 50%;
}
.index:hover img.image{
display:none;
}
.index img.hover{
display:none;
}
.index:hover img.hover{
display:block;
}

.paypal img.image{
width: 50%;
}
.paypal:hover img.image{
display:none;
}
.paypal img.hover{
display:none;
}
.paypal:hover img.hover{
display:block;
}





.kontakte {
	display:flex; 
	justify-content: space-around;
}
.kontakte div {
	display: flex;
	flex-direction: column;
	align-items:center;
}


.qr {
   	width: 60%;
	float: left;
	margin-right: 20px;
}

.facebook img.image{
width: 60%;

}
.facebook :hover img.image{
display:none;
}
.facebook  img.hover{
display:none;
}
.facebook :hover img.hover{
display:block;
}


.instagram img.image{
width: 60%;
margin-left: 20px;
}
.instagram:hover img.image{
display:none;
}
.instagram  img.hover{
display:none;
}
.instagram :hover img.hover{
display:block;
}

.anthiboger img.image{
width: 100%;

}
.anthiboger :hover img.image{
display:none;
}
.anthiboger  img.hover{
display:none;
}
.anthiboger :hover img.hover{
display:block;
}

@media(min-width:960px){
.paypal img.image{width: 150%;}
	
.facebook img.image{width: 100%;}

.instagram img.image{width: 100%;}

}



/* ---- Ende Section ---- */


/* ----- Footer -----*/

footer {

}

footer ul {
	justify-content: center;
  position: relative;
  display: flex;
}

footer ul li {
  color: white;
  list-style: none;

}


footer  ul  li  a {
  padding: 15px 25px;
  color: white;
}


footer a {
  display: block;
  color: whit;
  text-decoration: none;
  
}

footer a:hover {
 
	color: #595959;
}


/* ----- Ende Footer -----*/