/***************************************************************************
               Hintergrundgrafik des Theme festlegen          
****************************************************************************/

html,body {
    
background: #e5e5e5; 
background-color: #ecebe9;
background: linear-gradient(0deg, hsl(0, 100%, 50%), 
   hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), 
   hsl(240, 100%, 50%), hsl(300, 100%, 50%));
/*
  height:100%;
  margin:0;
  padding:0;
  */
} 


@media screen and (max-width: 2040px) {
  body {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (max-width: 1632px) {
  body {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 1224px) {
  body {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 816px) {
  body {
    grid-template-columns: repeat(1, 1fr);
  }
}

/***************************************************************************
               Definition und Einstellung des Headers          
****************************************************************************/

#header 
  {
   top:0;                     
   left:0;
   height:100px; /*6em;*/ 
   width:100%;
   background-size:cover;
   position:relative ; /*fixed !important; */
   display:flex ;
   align-items: center;  /*Zentriert das Kind vertikal */
   justify-content: center;    /*  Zentriert das Kind horizontal */
  }

/***************************************************************************
               Definition des Header-Logo
***************************************************************************/

#header-logo 
  {
   left: 20px;
   width: auto; 
   height:auto; 
  /* border:3px solid black; */
   position: absolute;
  }
   
/***************************************************************************
               Definition des Header-Start Buttons
***************************************************************************/
               
#GoStart
  {
    width:  auto; 
    height: auto;
    position: relative;
   /* border:3px solid black; */
   }
              
/***************************************************************************
               Definition Headers Banners          
****************************************************************************/

#header-banner
  {
   height:80px;  /*auto;*/
   width:  auto ; /*70%; */ 
   position: absolute;
  /* border:3px solid black; */
  }    
               
         
/***************************************************************************
               Definition des Header-Sprachen Bereichs
***************************************************************************/

#header-sprachen
  {
   right: 20px;
   width: auto; 
   height: auto ; 
   position: absolute;
   /* border:3px solid black; */
  }

/***************************************************************************
               Header Start - Button 
****************************************************************************/

.HeaderStartButton
{
    
  background-image:url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position:relative; 
  height: 50px;  
  width: 100px ; 
  text-align: center;
  font-size: 22;
  box-shadow: 10px 10px 15px silver;
  border: 2px solid black;  /* Rahmen */ 
  border-radius: 10px;  /* Adds curve to border corners */
  cursor:pointer;  
  display: inline-block;  
 
}

.HeaderStartButton:hover 

{

  background-image:url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border: 2px solid black;
  border-radius: 3px;
  opacity: 0.7;  
    
}  

.HeaderStartButton:active {position:relative; top:10px; } 

/***************************************************************************
               Auswahl Sprachen 
****************************************************************************/

/*-------------------------------------
       Germany
--------------------------------------- */

.germany-header-flag
{
  background: linear-gradient(#000 33%, #de0000 33%, #de0000 67%, #ffcf00 0);
  display: inline-block; 
}

.germany-header-flag-info 
{
  visibility:hidden; 
  width:auto;
  height:auto;
  background-color:black;
  color:#fff;
  text-align:center;
  border-radius:6px;
  padding:5px 0;
  
  position:absolute;
  z-index:1;
  bottom: -200%; 
  left: -250%;
  margin-left: -60px; 
  opacity:0;
  transition:opacity 0,9s; 
  /* white-space: nowrap;   Ausgabe einzeilig */
}

.germany-header-flag:hover .germany-header-flag-info
{
  visibility:visible;
  opacity:1;
}