/*stylesheet "desktop.css"*/
       @media all{
    /*============================================================*/

   body{
background-color: #808000;
   color: #FFFFca;
	font-family: sans-serif;
	 margin: 0 auto;    /*Mit margin: 0 auto wird die Seite zentriert.*/
}
 #wrapper{
	background-color: #808000;
	 color: #FFFFca;
    margin: 4em;
      }
        #kopfbereich{
       display: flex;
  flex-flow: row wrap;
border-radius: 28px;
      border: 2px solid #eee;
 background-color: #FFFFca;
   color: #808000;
 text-align: center;
 padding-top:.5em;
	
}
     #flex-container{
   	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
  }
  	

  .flex-item {flex: auto;
  }
      main{
      border: 2px solid #eee;
      background-color: #FFFFca;
	 color: #808000;
	  border-radius: 28px;
	      border: 2px solid #eee;
        }

 #inhaltsbereich {
	background-color: #FFFFca;
	 color: #808000;
	  border-radius: 28px;
	      border: 2px solid #eee;
}
   nav#navibereich{
 grid-row:    2;    /*  Die vertikale Positionierung beginnt in der 2. Zeile und ist eine Zeile hoch.*/
 grid-row: 2 / span 3;
	 margin-left: auto;
	 margin-right: auto;
	 text-align: center;
	}
	 #fussbereich { 	
     background-color: #808000;
   color: #FFFFca;
margin-left: 2em;
     margin-right: 2em;
	padding-top: 1em;
}


  h1{	
      border: 2px solid  #808000;
       border-radius: 28px;
        font-size: 2,5em;
text-shadow: 2px 2px 2px white, 5px 5px 10px black;
 	box-shadow: inset -2px -2px 10px #ccc;
  text-align: center;
  padding: 1em;
}



 h3, h2 {
     text-align: center;
      align-self: center;
 }
    #flex-container{
   	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
  }	
  .flex-item {
  flex: auto;
  }

 p{
 align-self: center;
text-align: center;
padding: 1em;
margin: 1em;
}
  .logo{
  padding-left: 4em;
  padding-right: 4em;
  margin: 0 auto;
  }


  .vorne  {
  justify-items: flex-start;
}

.mittig {
  justify-items: center;
}

.verteilt1 {
  justify-items: stretch;
}

.verteilt3 {
  justify-content: space-between;
}
.verteilt2 {
  justify-content: space-around;
}

  .start  {
  align-content: flex-start;
}
.mitte {
  align-content: center;
} /*vertical*/
.ende {
  align-content: flex-end;
}
/*Mit der justify-self-Eigenschaft können einzelne Rasterelemente horizontalausrichten.*/
.a2 {
	justify-self: auto;
}
.b3 {
	justify-self: center;
}

.c1 {
	justify-self: end;
}
/*ein responsives Bild   img {
    width: min(100%, 400px);}  */
/*
Festlegen eines Wertebereichs für eine Eigenschaft

.box {width: clamp(400px, 50%, 800px);   /* 50% Breite, mindestens 400px und höchstens 800px*/
} */
 /*============================================================*/
       }/* stehen lassen Ende Media*/