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

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

*, ::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: #F9E4BC url("images/images_neu/k_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: #F4D69F url("images/images_neu/kam_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.1em;
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;

}

aside p {
  font-family:Verdana,Helvetica;
  font-size:0.95em;
  color:black;
text-align:left;
	padding: 0;
padding-top:0.25em;
line-height:1.90em;
max-width: 95%;			/*Die Angaben für h1 müssen mit einem genauen Selektor überschrieben werden. */


}
aside h2 {

  font-family:Verdana,Helvetica;
  color:black;
  font-size:0.72em;
text-align:left;
font-weight:lighter;
line-height:2em;
max-width: 95%;
letter-spacing:0.01em;

}




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

  background:#F9E4BC;
	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%;

}


p {

  font-family:Verdana,Helvetica;
  font-size:0.95em;
  color:black;
text-align:center;
	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.72em;
text-align:center;
font-weight:lighter;
line-height:2em;
max-width: 95%;
letter-spacing:0.01em;

}

 h3{
  font-family:Verdana,Helvetica;
text-align:center;
font-size:2em;			

color:#336388;            
max-width: 95%;
}

h4 {

  font-family:Verdana,Helvetica;
  color:#F9E4BC;
  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:#F9E4BC;
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:#F4D69F;
        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;
}

img  {
width:70%


}

nav {
  background:#F9E4BC;

margin-top:1em;
}


section {

	background:#F9E4BC;

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

article {


margin-top:3%;
border:1px solid #AD3145;
}


aside {

	background: #F9E4BC;
margin-top:10%;

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;
	}

}

@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;
		
	}
}


#Biog{
margin-top:45%;


}

#Discg{
margin-top:45%;
margin-bottom:45%;

}

#Kom{
margin-top:45%;
margin-bottom:45%;

}