/************************************/  
  /* Inhalt                           */
  /************************************/  
  /*                                  */
  /* 1. Stilelemente                  */
  /*                                  */
  /* 2. Layouts                       */
  /*    für verschiedene Groessen     */
  /*    der Displays                  */
  /*                                  */
  /* 3. Menues                         */
  /*    für verschiedene Groessen     */
  /*    der Displays                  */
  /*                                  */
  /*                                  */
  /*                                  */
  /*                                  */
  /************************************/  

  
  
  /************************************/  
  /*                                  */
  /* 1. Stilelemente                  */
  /*                                  */
  /*                                  */
  /*                                  */
  /************************************/  


    body {
        margin: 20px;
        font-size: medium;
    }
    
    /* Groessere Schrift bei mobilen Geraeten */        
    @media (min-resolution: 100dpi) {
        body {
        /*    font-size: xx-large; */
            }
        }
        
        

    /* kleine Bildschirme */
    @media  screen   and (max-width: 767px)  {
        h2 {   
            font-size:1em; 
            }
        }
        
        

    .box {
        background-color: #EEE;
        color: #222;
        border-radius: 10px;
        padding: 5px;
        border: 1px solid grey;
    }
    
    .bild a img{
	display: block;
        margin-left: auto;
        margin-right: auto;  max-width:100%;
        max-height:100%;        
    }
    
    
     .box2 {
        background-color: #fafafa;
        color: #111;
        border-radius: 5px;
        padding: 3px;
        /*font-size: 0,5em;*/
	font-size: small;
        text-align: center;
        margin: 10px;
    }
    
    .meinlayout {
        display: grid;
        grid-gap: 20px;
    }
    
    .meinlayout2 {
        display: flow;
        padding:  20px;
        margin-bottom : 40px;
    }
    
    .box3 {
        background-color: #FFF;
        color: #333;
        border-radius: 10px;
        margin: 10px;
        padding: 10px;
        border: 1px solid grey;
    }
    
    
    
  /************************************/  
  /*                                  */
  /* 2. Layouts                       */
  /*    für verschiedene Groessen     */
  /*    der Displays                  */
  /*                                  */
  /*                                  */
  /*                                  */
  /*                                  */
  /*                                  */
  /************************************/  
    
  
    .header {
        color:red;
        text-align: center;
        }
         
         
  /************************************/  
  /* Layout für mittlere  Bildschirme */
  /************************************/  
  @media  screen   and (min-width: 767px)  {
       
    .meinlayout {
      display: grid;
      grid-gap: 10px;
      grid-template-columns: 50% 50%;
      background-color: #fff;
      color: #444;
      } 
      
      .header {
          grid-column: 1 / 3;
          grid-row: 1;
         }
         
      nav {
          grid-column: 1 / 3 ;
          grid-row: 2;
          }
          
      .galerie {
          grid-column: 1 / 2 ;
          grid-row: 3;
          }
          
      .indien {
          grid-column: 2 /3  ;
          grid-row: 3 ;
          }
          
      .footer {
          grid-column: 1 / 3;
          grid-row: 4;
          display:flex;
          }
          
          
      /*********************************/  
      /* Speziell für Fehlerseiten */
      /*********************************/ 
      .errorlogo {
          grid-column: 1 / 2 ;
          grid-row: 2 / 4;
          }
          
      .errortext {
          font-size: x-large;
          text-align: center;
          grid-column: 2 / 3 ;
          grid-row: 2 / 4;
          }
          
      
    }
    
       
  /*********************************/  
  /* Layout für grosse Bildschirme */
  /*********************************/  
  @media  screen   and (min-width: 1169px)  {
       
    .meinlayout {
      display: grid;
      grid-gap: 10px;
      grid-template-columns: 42% 42% 16%;
      background-color: #fff;
      color: #444;
      } 
      
      .header {
          grid-column: 1 / 3;
          grid-row: 1;
         }
         
      .nav {
          grid-column: 1 / 3 ;
          grid-row: 2;
          }
          

      .galerie {
          grid-column: 1  ;
          grid-row: 3 ;
          }
          
      .indien {
          grid-column: 2;
          grid-row: 3;
          }
          
      .footer {
          grid-column: 3;
          grid-row: 1 / 4;
          display:block;
          }
    }


    
    
  /************************************/  
  /*                                  */
  /*                                  */
  /* 3. Menues                        */
  /*    für verschiedene Groessen     */
  /*    der Displays                  */
  /*                                  */
  /*                                  */
  /*                                  */
  /*                                  */
  /************************************/  
 

    #menue {   
        display:block;
        }        
        
        
    #menue-icon {
        display:inline-block;
	}
	
    #menue ul, #menue:active ul { 

	display: none;
	position: absolute;
	padding: 5px;
	background: #EEE;
	border: 2px solid #444;
	left: 12%;
	top: 100px;
	width: 60%;
	}

    #menue ul {
	list-style: none;
        }
        
        
    #menue li {

	text-align: center;
	width: 100%;
	padding: 10px 0;
	margin: 0;
        border: 1px solid black;
        background-color: #BBB;
        }  
	
    #menue li a {

        display: block;
        color: black;
	text-decoration: none;
	font-weight: bold;
	}
	
    #menue li:hover a {
        color: white;
	}
	

    #menue li:hover {
          background-color: #005f5f;
          }

	
    #menue:hover ul {
            display: block;
            }
  
 


  
    /* mittlere und große Bildschirme   */
    /************************************/  
    @media  screen   and (min-width: 767px)  {
        
   
        
    #menue-icon img{
        display:none;
	}
	
    #menue ul,
    #menue:hover ul
        {      
        display:inline-block;
        position:static;        
	padding: 1px;
        list-style: none;
        text-align: center;
        padding: 0;
        margin: 0;
        left:0%;
        width:100%;
        
        
	background: #EEE;
	border: 0px solid #444;
        }
        
    #menue a {
        text-decoration: none;
        color: #fff;
        display: block;
        transition: .3s background-color;
        }
        

    }
    

    /* grosse Bildschirme                */
    /************************************/  
    @media  screen   and (min-width: 1169px)  {

    #menue li {
        width: 200px;
        display: inline-block;
        margin:5px
        margin-left:20px;
        float: left;
        overflow: auto;
        }
    }