/**************************
Global Styles
****************************
*/


@font-face {
    font-family: "playfair_displaybold";
    
    
    
    
    src: url("../fonts/PlayfairDisplay-Bold.otf") format("otf"),
    	 url("../fonts/playfairdisplay-bold-webfont.woff2") format("woff2"),
         url("../fonts/playfairdisplay-bold-webfont.woff") format("woff");
      
}


@font-face {
    font-family: 'source_sans_proregular';
  
    
    src: url("../fonts/SourceSansPro-Regular.otf") format("otf"),
    	 url("../fonts/sourcesanspro-regular-webfont.woff2") format("woff2"),
         url("../fonts/sourcesanspro-regular-webfont.woff") format("woff");

    }


@font-face {
    font-family: "source_sans_probold";
   
    src: url("../fonts/SourceSansPro-Bold.otf") format("otf"),
    	 url("../fonts/sourcesanspro-bold-webfont.woff2") format("woff2"),
         url("../fonts/sourcesanspro-bold-webfont.woff") format("woff");
   
}



* {
  box-sizing: border-box;
  margin: 0;
}



html {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0;
}
  
  
body {
	font-family: "source_sans_proregular", Arial, sans-serif;
	color: white;
	font-size: 1rem; /* gleich 16px */
	background-color: black; 
}


.body-background {	
	background-color: black; 		
	background-repeat: no-repeat;
	background-origin: border-box;	
	background-position: center top;
	background-size: 100vw;
	margin: auto;
}
	

	
	 
.background-welcome  {
    background-image: url(../images/Screen_Design_Welcome_Background.jpg); 
   
}

.background-biografie  {
    background-image: url(../images/Screen_Design_Biografie_Background.jpg);
}

.background-auszeichnungen  {
    background-image: url(../images/Screen_Design_Auszeichnung_Background.jpg);
    background-color: #140e0e;
}

.background-media  {
    background-image: url(../images/Screen_Design_Video_Background.jpg);
}

.background-repertoire  {
    background-image: url(../images/Screen_Design_Repertoire_Background.jpg);
    background-color: #b19683;
}

.background-pressestimmen  {
    background-image: url(../images/Screen_Design_Presse_Background.jpg);
}








p  {
    display: flex;
    margin: 0;
    letter-spacing: 0.07rem;
	text-align: left;
	line-height: 1.5;
	

}




/**********************************
	Navigation und Footer
***********************************/

.main-nav, .main-footer {	
	color: white;
	
	display: flex;
/* 	Direct Childern: .logo und .nav-liste */
	justify-content: flex-start;
	align-items: flex-end;
	
	
	}
	

.main-nav {
	font-family: "source_sans_probold", Arial, sans-serif;
	padding-top: 2rem;
	display: flex;

	}
	

.main-footer {
	font-family: "source_sans_proregular", Arial, sans-serif;
	background-color: #414141;
	padding: 3rem 0 1.5rem 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}


.logo  {
	text-align: left;
	margin-left: 3rem;	
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
		
		

}

.logo a {
	text-decoration: none;
	transition: border-bottom 0.15s ease-out 0s;
	color: white;
	font-family: "playfair_displaybold", serif;
	font-size: 1.5rem; /* gleich 24px */
	letter-spacing: 0.045rem; /* gleich 3% */
	line-height: 0.9;
	margin-bottom: 2px;
		

}


.logo a:hover {
	text-decoration: none;
	padding-bottom: 0;
}

 

.nav-liste {
	font-size: 1.125rem; /* (=18px) */
	display: flex;   /* 	Direct Children: Nav-Items */
	justify-content: flex-start;
	align-items: baseline;
	padding-right: 2rem;
}

.sprachen-liste {
	font-size: 1.125rem; /* (=18px) */
	font-weight: bold;
	margin-left: auto;
	margin-right: 2rem;
	
}




.footer-liste {
	font-size: 1rem; 
	text-align: left; /* für Footer */
	display: flex;   /* 	Direct Children: Footer-Items */
	justify-content: flex-start;
	align-items: baseline;
	
	
}


	
.nav-item {
	text-decoration: none;
	margin: 0 0.7rem;
	list-style-type: none;		
	}
	

.footer-item {
	text-decoration: none;
	margin: 0 3rem;
	list-style-type: none;	
	}
	
	
.footer-icon {
	margin-left: auto;
	margin-right: 2rem;	
	height: 2.5rem;
	display: flex;
	align-items: flex-end;
	}
	
	
.footer-icon-image {	
	height: 2.5rem;
	}

	

nav li a,
footer li a {
	text-decoration: none;
	transition: border-bottom 0.15s ease-out 0s;
	color: white;
	}


nav li a:hover,
nav li a:active,
footer li a:hover,
footer li a:active {
	text-decoration: none;
	border-bottom: 2px solid #B99E74;
	padding-bottom: 0;
}







/*
	Hamburger Mobile Nav 
***********************************/
.mobile-nav {
	visibility: hidden; /* Weiter unten @media Query */
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	color: #B99E74;
	background-color: rgba(0,0,0,0.75);	
	margin-right: 0.5vh;
	
}






.mobile-nav .hamburger-menu {
	position: absolute;
	top: 0;
	right: 0rem;
	z-index: 2;
	cursor: pointer;
	width: 3rem;
	height: 3rem;
	opacity: 0; 
	
}
	
.mobile-nav .hamburger	{	
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;	
	width: 4rem;
	height: 4rem;
	padding: 1rem;
	background-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	
}


/* HAMBURGER DREI STRICHE */
.mobile-nav .hamburger-strich {
	position: relative;
	width: 100%;
	height: 0.2rem;
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.05s;

}

.mobile-nav .hamburger-strich:before,
.mobile-nav .hamburger-strich:after {
	content: "";
	position: absolute;
	z-index: 1;
	top: -0.8rem;
	width: 100%;
	height: 0.2rem;
	background: inherit;
	

}


.mobile-nav .hamburger-strich:after {
	top: 0.8rem;
	
}



/* Aus Strichen  ein X machen */
.mobile-nav .hamburger-menu:checked + .hamburger > div {
	transform: rotate(045deg);	
}


.mobile-nav .hamburger-menu:checked + .hamburger > div:before,
.mobile-nav .hamburger-menu:checked + .hamburger > div:after {
	top: 0;
	transform: rotate(90deg);
	
}



/*


.mobile-nav .hamburger-menu:checked:hover + .hamburger > div {
	background-color: #B99E74;
	
}
*/


/* ENDE Hamburger drei Striche */



/* SHOW MENU */
.mobile-nav .hamburger-menu:checked ~ .menu {
	visibility: visible;
}



.mobile-nav .menu {
	position: fixed;
	top: 4.5rem;
	right: 0;
	visibility: hidden;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	
	color: #B99E74;
	
		
}

.mobile-nav .mobilenav-hintergrund {
	background-color: rgba(0,0,0,0.75);	
	padding: 0 1vw 25px 0;
	display: flex;
	align-items: center;
	justify-content: center;
/* 	transition: all 0.4s ease; ausprobieren */
	
}


	

.mobile-nav-item {
	text-decoration: none;
	margin: 0 0.7rem;
	list-style-type: none;	
	
	
	}

	
.mobile-nav-liste {
	
	display: flex;  /* 	Direct Childern: mobile-nav-item */
	flex-direction: column;
	align-items: flex-end;
	font-size: 3.2vw;
	
	padding-left: 0.2rem;
	


}
	
.mobile-nav li a {
	text-decoration: none;
	transition: border-bottom 0.15s ease-out 0s;
	color: #969696;
}




/**********************************
	Index
***********************************/



/* Vorstellungs-Steifen */

.vorstellung {
	color: white;
	padding: 250px 100px 100px 0;
	text-align: left;
	display: flex;
	justify-content: space-around;
}



.vorstellungs-wrapper  {
	padding-top: 17rem;
	line-height: 0.9;
	
}


.name-gross {
	font-family: "playfair_displaybold", serif;
	font-size: 4.375rem;
	letter-spacing: 0.13125rem;
	line-height: 0.9;
	padding-right: 1.2rem;
	
}




/* Video-Steifen */

.intro-video-streifen {
	background-color: rgba(65, 65, 65, 0.7);
/* 	entspricht #414141 */
	height: 690px;
	padding-top: 20px;
	display: flex;	
}

.vimeo-intro {
	margin: auto;

}


/* Zitat-Steifen */

.zitat-streifen {
	background-color: #B99E74;
/* 	height: 420px; */
	letter-spacing: 0.07rem;
	text-align: left;
	line-height: 1.7;
	padding: 150px 75px 150px 550px;
	
	

}


.zitat-text {
	font-size: 1rem;

}


.indent {
	margin-left: -360px;
	
}


/**********************************
	BIOGRAPHE
***********************************/

.content-wrapper-bio {
	margin: 5rem 5rem 10rem 525px;	
}


.sprachen-liste {
	font-size: 1rem;
	display: flex;   /* 	Direct Children: Nav-Items */
	justify-content: flex-start;
	align-items: baseline;
	padding: 0;
	
}

	
.sprachen-item {
	text-decoration: none;
	margin: 0;
	margin-right: 2rem;
	list-style-type: none;		
	}
	
.pdf-icon {
	height: 1rem;
	margin-right: 5px;		
	}



.bio-titel {
	font-size: 1.75rem;
	letter-spacing: 0.045rem;
	margin-top: 4rem;
	

	
}

.bio-artikel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.bio-p {
	margin-top: 2rem;
	}	
	
.icon-trennlinie {
	margin: 2rem 5rem 0 5rem;
	display: flex;
	justify-content: center;
	align-items: center;
		}	
		
.icon-trennlinie img {
	width: 100%;
		}	
		
		
.download-liste {
	margin-top: 2rem;
	justify-content: center;	
}


/* Definition von <p> siehe unter Global Styles */


/**********************************
	ENDE Biographe
***********************************/



/**********************************
	AUSZEICHNUNGEN
***********************************/

.content-wrapper-auszeichnungen {
	margin: 0rem 3rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;	
}

.auszeichnungen-titel {
	font-size: 3.5rem;
	margin-top: 9rem;
	margin-bottom: 3.5rem;	
}

.auszeichnungen-gridcontainer {
	display: grid;
	grid-template-columns: 6rem auto;
	grid-row-gap: 1rem;	
}

.stipendien {
	margin: 0rem 27rem 20rem 6rem;		
}

/**********************************
	ENDE Auszeichnungen
***********************************/


/**********************************
	VIDEOS
***********************************/


.video-erstes {
	margin-top: 12rem;
	}

.video-gold,
.video-grau {
	margin-bottom: 3rem;
	}

.video-gold {
	background-color: rgba(185,158,116, 0.7);
/* 	entspricht #b99e74 */
	}
	
	



/**********************************
	ENDE Videos
***********************************/


/**********************************
	FOTOS
***********************************/
.foto-streifen {
	background-color: rgba(65, 65, 65, 0.7);
/* 	entspricht #414141 */	
	margin-bottom: 2.5rem;
	margin-top: 100px;
	padding-top: 0;
	display: flex;	
	flex-direction: column-reverse;   /* Damit die Punkte oben kommmen */
	justify-content: center;
	align-items: center;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.slider-foto {
  height: 666px;
  width: auto;
  padding-bottom: 50px;
}




/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -50px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* Position the "prev button" to the left */
.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(65, 65, 65, 0.7);
}

/* Caption text */
.foto-text {
  color: #f2f2f2;
  padding: 8px 12px;
  position: absolute;
  bottom: 0.5rem;
  width: 100%;
  text-align: center;

}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 1rem;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators  */

.dots-container {
  
padding: 10px 0;

}


.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 3px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}



/* Presse-Fotos 
*****************/

.pressefotos-streifen {
	background-color: rgba(65, 65, 65, 0.7);
/* 	entspricht #414141 */

	}

.pressefoto-grid-wrap {
	display: flex;
	justify-content: center;
	margin: 20px auto;
}


.pressefoto-grid-container {
  display: grid;

  grid-template-columns: repeat(3,320px);
  grid-template-rows: 215px 16px;
  grid-column-gap: 20px;
  margin: 20px 0;

}

.pressefoto-bild {
  width: auto;
  height: 207px;
  }
  
 .pressefoto-item {
	text-decoration: none;

	list-style-type: none;		
}
	
	
.pressefoto-grid-container li {
	text-align: center;
}
	
 .pressefoto-grid-container li a {
	text-decoration: none;
	color: white;
	margin-top: 5px;
}


/**************************
ENDE Fotos*
****************************
*/

/**************************
REPERTOIRE*
****************************
*/


.content-wrapper-repertoire { /* Children: Span mit Titel und Conainer-beide-Seiten */
	margin: 0rem 3rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;	
}


.repertoire-beide-seiten-container { /* repertoire-flex-container links und rechts*/
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;	
}



.repertoire-flexcontainer { /* Children: Repertoire-item */
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;	
}

.repertoire-flexcontainer-rechts {
	margin-left: 15rem;
	margin-top: 25rem;
	padding: 0;
	
}



.repertoire-item {
	list-style-type: none;	
	margin: 0 0 2rem 0;
	
}


.komponist {
	font-family: "playfair_displaybold", serif;
	font-size: 1.5rem;
	letter-spacing: 0.1rem;
	margin-top: 0.5rem;
	margin-bottom: 0.8rem;
	
}



/**************************
ENDE Repertoire*
****************************
*/


/**************************
PRESSESTIMMEN
****************************
*/



.pressestimmen-streifen {
	background-color: rgba(65, 65, 65, 0.7);
/* 	entspricht #414141 */
	padding: 30px 50px;
	margin: 0 50% 30px 0;
	display: flex;	
	flex-direction: column;
}

.pressestimmen-erste {
	margin-top: 150px;
}

.pressestimmen-gold {
	background-color: rgba(185,158,116, 0.7);
/* 	entspricht #b99e74 */
	}

/**************************
ENDE Pressestimmen
****************************
*/












/**************************
MEDIA QUERY Global Styles*
****************************
*/



/* 55rem sind 880px z.B. für iPad) */
	@media (max-width: 55rem) {
		
		
body {
	font-size: 0.8rem;


}

} /* ENDE Media Query Global Styles */


/**************************
MEDIA QUERY Navigation und Footer
****************************
*/


/* 55rem sind 880px z.B. für iPad) */
	@media (max-width: 55rem) {
		

.main-nav {
	padding-top: 2vh;
}


.nav-liste {	
	display: none;   	
}

.sprachen-liste {
	display: none;
	
}

.mobile-nav {
	visibility: visible;		
}


.logo {	
	margin-left: 3vw; 	
}


.logo a {	
	font-size: 3.5vw; 		
}

.main-footer
{
	padding: 1.5rem 0;
		
	
		
}


.footer-item {
	font-size: 75%;
	margin: 0 0.7rem;	
}	

	
.footer-icon-image {	
	height: 1.5rem;
	}

		
}/* Ende 88rem */





/**********************************
	MEDIA QUERY INDEX
***********************************/



/* 55rem sind 880px z.B. für iPad) */
	@media (max-width: 55rem) {



.vorstellung {
	padding: 20% 100px 5vh 0;
	
}


.vorstellungs-wrapper {
	padding-top: 20%;
	line-height: 0.9;
		
}


.name-gross {
	font-size: 5vw;
	letter-spacing: 0.1rem;
	line-height: 0.9;
	padding-right: 1.2rem;
	
}





/* Video-Steifen */

.intro-video-streifen {
	max-height: 690px;
}

.vimeo-intro {
	margin: auto;
	max-height: 75vw;

}


/* Zitat-Steifen */

.zitat-streifen {
	letter-spacing: 1;
	line-height: 1.5;
	padding: 15vw 7.5vw 15vw 15vw;
	
	

}


.zitat-text {
	font-size: 0.7rem;


}


.indent {
	margin-left: -5vw;

	
}




	
		
} /* ENDE Media Query Index */


/**********************************
	MEDIA QUERY BIOGRAPHE
***********************************/





	@media (max-width: 970px) {

.japanisch {
	display: none;
}


} /* ENDE Meida Query 970px */


/* 55rem sind 880px z.B. für iPad) */
	@media (max-width: 55rem) {
		
.content-wrapper-bio {

	margin: 0 5vw 10vw 40vw;	
}


.bio-titel {
	font-size: 1.75rem;
	letter-spacing: 0.045rem;
	margin-top: 5vw;	
}


.bio-p {
	margin-top: 2rem;
	}	
	
.icon-trennlinie {
	margin: 2rem 5rem 0 5rem;
	display: flex;
	justify-content: center;
	align-items: center;
		}	
		
.letzte-trennlinie {
	visibility: hidden;	
}
		
.icon-trennlinie img {
	width: 100%;
		}	
		
		
		
}/* Ende 880px */

	
		
/**********************************
	MEDIA QUERY AUSZEICHNUNGEN
***********************************/		
		
	
	
	
/* / Damit Bild fix bleibt */
	@media (max-width: 1280px) {
		
.background-auszeichnungen {
	background-size: 1280px;
	}
	
} /* Ende 1280px */



/* / Nicht auf rem ändern, Hintergrund ist fix in px */
	@media (max-width: 1051px) {
		
.stipendien {
	margin: 0px 300px 70px 0px;		
}
	
} /* Ende 1280px */


		
/*** 55rem sind 880px) */
	@media (max-width: 55rem) {
	

.auszeichnungen-titel {
	font-size: 4vw;
	margin-top: 9vw;
	margin-bottom: 7vw;	
	letter-spacing: 0;
}

.auszeichnungen-gridcontainer {
	display: grid;
	grid-template-columns: 6rem auto;
	grid-row-gap: 1rem;	
}


.stipendien {
	margin: 0 0 9vw 0;		
}
	
		
}/* END 880px query	 */
	
	
	
/**********************************
	MEDIA QUERY VIDEOS
***********************************/


/*** 66rem sind 1056px) */
	@media (max-width: 66rem) {

.intro-video-streifen {
	height: inherit;
	padding-top: inherit;
	}	


.video-erstes {
	margin-top: 6vw;
	}	
			
}/* END VIDEOS QUERY	 */

/**********************************
	MEDIA QUERY FOTOS
***********************************/


/*** 66rem sind 1056px) */
	@media (max-width: 66rem) {

	
.foto-streifen {	
	margin-bottom: 45px
	margin-top: 100px;
	}


.slider-foto {
  width: 85vw;
  height: auto;
  padding-bottom: 2rem;
  
}

/* Caption text */
.foto-text {
  padding: 8px 12px;
  position: absolute;


}


/* Number text (1/3 etc) */
.numbertext {
	
  font-size: 0.7rem;
  padding: 8px 12px;
}
		
}/* END 66rem QUERY	 */
 

 /*** 55rem sind 880px) */
	@media (max-width: 55rem) {
	
.pressefotos-streifen {
	display: none;
		
}

.foto-streifen {
	margin-bottom: 32vh;
}


		
}/* END 880px query	 */


	@media (max-width: 450px) {
	
.background-media {
	background-size: 450px;
	}

		
		
}/* END 880px query	 */



/**********************************
	MEDIA QUERY REPERTOIRE
***********************************/	
	

/*** 55rem sind 880px) */
	@media (max-width: 55rem) {
	

.repertoire-beide-seiten-container { /* repertoire-flex-container links und rechts*/
	flex-direction: column;
	
}


.repertoire-flexcontainer-rechts {
	margin: 0;
	padding: 0;
	
}

.komponist {
	
	font-size: 3.5vw;
	letter-spacing: 0;
	margin-top: 0.5vw;
	margin-bottom: 0.8vw;
	
}
		
}/* END 880px query	 */



/**********************************
	MEDIA QUERY PRESSESTIMMEN
***********************************/


/*** 55rem sind 880px) */
	@media (max-width: 55rem) {

.pressestimmen-streifen {
	padding: 30px 5vw;
	margin: 0 0 30px 0;
	}

.pressestimmen-erste, 
.pressesteimmen-zweite {
	margin: 5vw 50% 30px 0;}


}/* END 880px query	 */



/*Pixel fix lassen */
	@media (max-width: 456px) {

 
.pressesteimmen-zweite {
	margin: 0 0 30px 0;
}


}/* END 456px query	 */
/**********************************
	ENDE Media Query Pressestimmen
***********************************/