@font-face
   {
   font-family: 'CamptonBold';
   src: url('CamptonBold.otf') format('opentype');
   font-style: normal;
   }
      	      	      	
@font-face
   {
   font-family: 'Starlight';
   src: url('Starlight.otf') format('opentype');
   font-style: normal;
   }
      	      	      	
html, body
   {
   position: relative;
   background-color: white;
   background-image: url("../images/global/background_25p.jpg");
   background-position: top left;
   background-repeat: no-repeat;
   background-attachment: fixed;
   -moz-background-size:cover;
   -o-background-size:cover;
   -webkit-background-size:cover;
   background-size: cover;
   color: rgb(0,0,0);
   font-family: Verdana;
   font-size: 100%;
   width: 100%;
   margin: 0;
   margin-left: auto;
   margin-right: auto;
   height: 100%;
   margin-top: 0px;
   margin-bottom: 0px;
  }
      	      	      	
a
   {
   color: rgb(230,140,30);
   text-decoration: none;
   }
      	      	      	
a:hover, a:focus, a:active
   {
   color: rgb(0,180,255);
   }
      	      	      	
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++ MENUELEISTE INKL LOGO +++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
header
   {
   position: fixed;
   display: -webkit-flex;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   flex-direction: row;
   -webkit-align-items: flex-start;
   align-items: flex-start;
   align-content: right;
   -webkit-justify-content: right;
   justify-content: right;
   z-index: 900;
   min-height: 10%;
   background-color: rgba(0,0,0,0.5);
   width: 100%;
   }
      	      	      	
   a#logo
      {
      position: fixed;
      left: 0px;
      width: 30%;
      min-width: 100px;
      max-width: 300px;
      height: auto;
      max-height: 150px;
      padding: 0.5em;
      z-index: 980;
      // transform: rotate(-20deg);
      }
      	      	      	
      a#logo img
      	{
      	width: auto;
      	max-width: 100%;
      	height: auto;
      	max-height: 200px;
      	z-index: 981;
      	}
      	      	      	
   #steuerung
      {
      position: absolute;
      right: 0px;
      }
      	      	      	
   #steuerung li
      {
      list-style: none;
      display: inline-block;
      margin-left: 2px;
      margin-right: 2px;
      z-index: 998;
      color: rgb(0,180,255);
      font-weight: bold;
      }
      	      	      	
      #steuerung a
      	{
      	width: 100%;
      	padding-left: 5px;
      	padding-right: 5px;
      	padding-top: 2px;
      	padding-bottom: 2px;
      	color: rgb(230,140,30);
      	font-weight: bold;
      	z-index: 999;
      	transition: background-color 1s, color 1s;
      	}
      	      	      	
   .menue-button
      {
      display: none;
      }
      	      	      	
      #steuerung a:hover
      	{
      	color: rgb(0,70,230);
      	background: rgb(230,140,30);
      	transition: background-color 0.5s, color 0.5s;
      	}
      	      	      	
/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
   #nav-menue:target #steuerung
      {
      display: -webkit-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      }
      	      	      	      	
/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
   #nav-menue:target .menue-button-auf
      {
      display: none;
      }
   #nav-menue:target .menue-button-zu
      {
      background-image: linear-gradient(45deg, rgb(0,180,255) 15%, rgb(230,140,30) 85%);
      border-bottom-left-radius: 20px;
      box-shadow: none;
      }
      	      	      	
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++ STARTBILD GANZES FENSTER +++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#head
   {
   display: -webkit-flex;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   -webkit-align-items: center;
   align-items: center;
   align-content: center;
   -webkit-justify-content: center;
   justify-content: center;
   position: relative;
   top: 0px;
   margin-top: 0px;
   margin-bottom: 0px;
   width: 100%;
   height: 100%;
   background-color: rgb(255,255,255);
   background-image: url("../images/head/start.jpg");
   background-position: bottom;
   background-size: cover;
   background-repeat: no-repeat;
   font-size: 400%;
   font-family: CamptonBold;
   // font-family: Starlight;
   text-align: center;
   letter-spacing: 5px;
   }
      	      	      	
   #head p
      {
      width: 100%;
      margin-top: 0px;
      margin-bottom: 0px;
      }
      	      	      	
   #head p#platzhalter
      {
      height: 10%;
      }
      	      	      	
   #head p#titel
      {
      display: -webkit-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      -webkit-align-items: center;
      align-items: center;
      align-content: center;
      -webkit-justify-content: center;
      justify-content: center;
      height: 80%;
      // color: rgb(255,255,100);
      // text-shadow: -3px -3px 3px rgb(255,255,150), -3px 3px 3px rgb(255,255,150), 3px -3px 3px rgb(255,255,150), 3px 3px 3px rgb(255,255,150);
      }
      	      	      	
      	#head p#titel a
      	   {
      	   color: rgb(255,255,100);
      	   text-shadow: 3px 3px 3px rgb(0,0,0);
      	   // text-shadow: -1px -1px 1px rgb(255,255,150), -1px 1px 1px rgb(255,255,150), 1px -1px 1px rgb(255,255,150), 1px 1px 1px rgb(255,255,150);
      	   cursor: default;
      	   }
      	      	      	
      	   #head p#titel a sup
      	      {
      	      font-size: 25%;
      	      }
      	      	      	
   #head p#pfeil
      {
      height: 10%;
      }
      	      	      	
      p#pfeil
      	{
      	width: auto;
      	padding-left: 5px;
      	padding-right: 5px;
      	padding-top: 0px;
      	padding-bottom: 5px;
      	transform: rotate(180deg);
      	// background-color: rgba(255,255,255,0.5);
      	border-radius: 100%;
      	}
      	      	      	
      	p#pfeil:hover
      	   {
      	   color: rgba(255,255,255,1);
      	   cursor: pointer;
      	   }
      	      	      	
      	p#pfeil a
      	   {
      	   color: rgba(255,255,255,0.5);
      	   text-shadow: -1px -1px 1px rgb(0,0,0);
      	   }
      	      	      	
      	p#pfeil a:hover
      	   {
      	   color: rgba(255,255,255,0.7);
      	   }
      	      	      	
      	p.pfeil
      	   {
      	   opacity: 0.7;
      	   transition: opacity 1s;
      	   }
      	      	      	
      	p.f-pfeil
      	   {
      	   opacity: 0;
      	   transition: opacity 1s;
      	   }
      	      	      	
      	p.f-pfeil a
      	   {
      	   cursor: default;
      	   }
      	      	      	
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++ WEITERER INHALT +++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#container
   {
   display: -webkit-flex;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   -webkit-align-items: stretch;
   align-items: stretch;
   align-content: flex-start;
   -webkit-justify-content: center;
   justify-content: center;
   position: relative;
   width: 100%;
   height: 100%;
   text-align: justify;
   }