@import url("../webfonts/mistral/stylesheet.css");
/* shiatsu-bewegung Startseite CSS Document */
body {
    z-index: 1 ;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: auto;
	padding: 0px;
    border: none;
    background: url(../images/startseite_1.jpg) repeat center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;  
	margin: 0px auto;  
	width:100%;
    height:100%;
	/* */
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  /* */
}

@font-face{ 
    font-family: mistral; 
	src: url(../fonts/mistral.ttf) format('truetype'); 
}
.mistral {
    font-family: mistral; 
}
.text {
    font-size: 0.5em;
    font-weight: normal;
}
.text a:link { 
	color: #FFFFCC;
	text-decoration: none; }
.text a:visited {
	color: #FFFFCC;
	text-decoration: none; }
.text a:hover {
	color: #FFFFCC;
	text-decoration: none; }
.text a:active {
	color: #FFFFCC;
	text-decoration: none; }

#content {
	position: relative;
    max-width: 1080px;
    min-width: 200px;
	margin:0 auto;
    font-family: mistral;
    font-size: 3em;
    font-weight: 400;
	color: #FFFFCC;
}

#willk {
	white-space:normal;
    position: fixed;
    max-width: 450px; 
    min-width: 200px;
    height: 100px;
    top: 25px; 
    left: 40px;
    text-align: left;
    padding-right: 150px;
}	
#footer {
	white-space:normal;
    position:fixed;
    bottom:10px;
    right:40px;
    max-width:1080px;
    min-width: 200px;
    max-height:180px;
    min-height: 80px;
    text-align:right;
}

/* Ausklappmenu auf Sandwich */
#header {
    z-index: 5;
    position: fixed;
    width: 250px; 
    height: 30px;
    top: 10px; 
    right: 0px;
    text-align: center;
    line-height: 30px;
    /* Grösse und Lage des Aufklappmenus */
	width: 250px; 
    padding-right: 30px;
}
#steuerung li {
	list-style: none;
/*	float: left;  */
}
#steuerung a {
	display: block;
	height: 100%;
	width: 350px 100%;
	padding: 0;
    margin: 0;
	text-decoration: none;
	color: #360;
    background:rgba(255,255,255,0.7); /* Hintergrund für aufgeklapptes Menu */
}	
.menue-button {
	display: none; /* zeigt Sandwich nicht an */
}	

#steuerung {
    display: none; /* zeigt Menu nicht an */
	float: left; /* Menu-Texte linksbündig */
    font-size: .6em;
}
#steuerung a:hover {
	color: #BDA10A;
}	
/* CSS erweitern um MENÜ-Button und entsprechende Steuerung */
/*	Menü-Button oben rechts einblenden bei kleiner als 600px
@media only screen and (max-width:600px) { 
   */  
 /*   section {    */
    /*    margin-top: 34px;  Abstand als Ersatz für ausgeblendeten Menubalken */
 /*   }   */
	.menue-button {
		display: block;
	}
	.menue-button {
		display: block;
		position: absolute;
		top: 0;
		right: 0;	
		cursor: pointer;
   /*     background-color: #360; */
		padding: 0.6em;
		/*	color: white;
		text-decoration: none; */
	}	
	#steuerung {
		float: left;
		width: 100%;
	 	display: none; 
	}	
	#steuerung li {
		width: 100%;
	}	
	.menue-button:hover {
/*		background: #360;  */
	}
/*  }  Ende von @media */
/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue:target #steuerung {
	display: block;
    padding-top: 140px;
}
/* ausblenden des Menü-Buttons zum öffnen - somit wird er zum Schließen sichtbar */
#nav-menue:target .menue-button-beschr-open {
	display: none; 
}	

/* Nötig für Android-Chrome-Brwser */
@media screen and (max-width:500px) {
  html {
  background-image: url(../images/startseite_2.jpg);
  }
}