@charset "UTF-8";
/* ====================================================   GLOBAL DEFINITION   =======================*/

/* alternatives Boxmodell */
body,html { 
  box-sizing: border-box; 
  background:#F4D69F;	
} 

*, ::before, ::after { 
  box-sizing: inherit; 
}

a:active, a:focus {outline: none;}
body{

	max-width: 75em;
	margin:1% auto;
	padding: 0;
	

	font: normal 1em Arial, sans-serif;  /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */
           
}


.ribbon{
	display: inline-block;
	position: relative;	
	margin:15 0 2em -3em;
height: 11.5em;
	padding: 0.5em 2.8em;
	background: #F4D69F url("images/images_neu/r_lotus.jpg") no-repeat right;
	box-shadow: 0px 5px 8px gray;
        border-radius: 0.5em 3em 0em 10em;
 border-top: 2px solid #AD3145;

}
 
.ribbon:before{
	display: block;
	width: 3em;
	height: 0;
	position: absolute;
	bottom: -1.5em;
	left: 0em;
	content: "";


}
ribbon h1,
 {
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; 

	padding-left: 1em; 
	color: #2A6C85; 
	text-transform: uppercase;


}



/* ====================================================   HEADER   ======================================== */
header {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	background: #F9E4BC url("images/images_neu/raga_logo_1.jpg") no-repeat center; 
	height: 160px;

	margin: 0 0.6em  0 3.0em;

	background-size: 60%; 			  
	padding: 0 1em 2em;

 border-top: 2px solid #AD3145;
border-radius: 0em 8em 3em 30em;
}



 h1{
  font-family:Verdana,Helvetica;
text-align:center;
font-size:1.2em;			/*Die Angaben für h1 müssen mit einem genauen Selektor überschrieben werden. */
 font-weight:lighter;
	border-left: 0;
	padding: 0;
    display: table;
color:#336388;             /* Überschriften und Absätze sind sonst immer 100% breit, durch display:table und display: inline-block; für das Elternelement a.ribbon wird das Banner nur so breit wie nötig. */
margin-bottom:0em;
margin-top:0.0em;
letter-spacing:0.12em;

}
 header p {			/*Die Angaben für h1 müssen mit einem genauen Selektor überschrieben werden. */
	color: #000000;
text-shadow: 5px 11px 12px black;
	border-left: 0;
	padding: 0;
    display: table;            /* Überschriften und Absätze sind sonst immer 100% breit, durch display:table und display: inline-block; für das Elternelement a.ribbon wird das Banner nur so breit wie nötig. */
margin-top:0.1em;

}

h2 {			/*Die Angaben für h1 müssen mit einem genauen Selektor überschrieben werden. */
	color: #333; 
	border-left: 0;
	padding: 0;
    display: table;            /* Überschriften und Absätze sind sonst immer 100% breit, durch display:table und display: inline-block; für das Elternelement a.ribbon wird das Banner nur so breit wie nötig. */
margin-top:0.1em;
font-weight:lighter;
}


/** CONTENT============================================================== **/

.body{
    margin: 0.8em auto;
    max-width: 75em;

  background:#F4D69F;
	border-radius: 0.5em 0.5em 0.5em;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}



nav,
nav a,
article,
section,
aside,
footer {
  font-family:Verdana,Helvetica;
  color:black;
	border-radius: 0.5em 0.5em 0.5em;
	padding: 5px;
	margin: 3px;
	-webkit-flex: 100%;
	flex: 1 100%;

}

footer {
background: #D7DBD9;
	border-radius: 0.2em 0.2em 0.2em;
	padding: 1px;
	margin:5px;
	


}


p {

  font-family:Verdana,Helvetica;
  font-size:0.95em;
  color:black;
	padding: 0;
padding-top:0.25em;
line-height:1.90em;
max-width: 95%;

}

span{
font-weight:bold;

}


h2 {

  font-family:Verdana,Helvetica;
  color:black;
  font-size:0.82em;

font-weight:lighter;
line-height:2em;
margin:left:3%;
letter-spacing:0.02em;

}
h5{
  font-family:Verdana,Helvetica, Arial, sans-serif;
  color:black;
  font-size:0.85em;

margin-right:-10%;
 margin-top:1em;
font-weight:lighter;
line-height:1.75em;
max-width: 70%;

}
h3{

  font-family:Verdana,Helvetica;
  font-size:0.70em;
  color:#ffffff;
	padding: 0;
padding-top:0.25em;
line-height:1.50em;
}


h4 {

  font-family:Verdana,Helvetica;
  color:#F4D69F;
  font-size:1.20em;
font-weight:lighter;
line-height:2em;

	margin-top:0.01em;
}


nav,
nav ul,
nav li {
	margin: 1%;
	padding: 0;
	border: none;

  background:#F4D69F;
margin-left:1%;
margin-top:20%;
margin-right:0.2em;
}

nav ul {
	display: -webkit-flex;
	-webkit-flex-direction: column;
	display: flex;
	flex-direction: column;
margin-left:0.5em;
}

nav li {
	list-style-type: none;
	margin: .3em 0;
	-webkit-flex: 1 1 100%;
	flex: 1 1 auto;

}

nav a {
	display: inline-block;
	width: 100%;
background:#F9E4BC;
        border-bottom: 2px solid #AD3145;
  font-family:Verdana,Helvetica;
  font-size:0.90em;
color:#336388;
	margin: 0;
	text-decoration: none;
	text-align:center;

}

nav a:hover {
	background: #FAEED5;
}


 audio {
width: 14em;
height: 2em;
}

.box {
max-width: 70%;

}






nav {
  background:#F4D69F;

margin-top:1em;
}


section {

	background:#F4D69F;

margin-top:0%;
margin-left:5%;	
}

article {


margin-top:3%;
border:2px solid #F9E4BC;
}


aside {

	background: #F4D69F;
margin-top:5%;

margin-top:;
}


/* Smart Phones und Tablets mit mittlerer Auflösung */

@media all and (min-width: 35em) {


	article {
		webkit-order: 2;
		order: 2;
	}


	nav {
		-webkit-flex: 1% auto;
		-webkit-order: 3;
		flex: 1% auto;
		order: 3;
	}
	aside {
		/* durch auto werden die beiden asides in eine Zeile gesetzt */
		
		-webkit-flex: 1% auto;
		-webikit-order: 4;
		flex: 1% auto;
		order: 4;
	}







}
/* Large screens */

@media all and (min-width: 50em) {
	article {
		/* Der Article wird 3x so breit wie die beiden asides! */
		
		-webkit-flex: 4 1 0%;
		-webkit-order: 3;
		order: 3;
		flex: 4 1 0%;
	}
	nav {
		-webkit-flex: 1 1 0%;
		flex: 1 1 0%;
	}
	aside {
		-webkit-flex: 1 1 0%;
		-webkit-order: 2;
		-webkit-align-self: center;
		flex: 1 1 0%;
		order: 4;

		
	}
}




#Vita {

margin-top:0%;
background: #F4D69F;


}

#Musik{

margin-bottom:40%;
}

#Musiker {
margin-bottom:45%;
margin-top:45%;
}
#Histographie {
margin-bottom:45%;

}
#Disk{
margin-bottom:45%;

}

#Impr {


}




#Datenschutz {


max-width: 95%;
}

img {
	width: 100%;

  }
====================================