html{background-color:#d6d1d1;}

        .container{
            display:grid;
            grid-template-rows:10px 330px 5px 0px 0px auto 5px 50px;
            grid-template-columns: 180px 10px 800px 10px;            
            }
        header{
            grid-column-start:1; /* Kurzform wäre: grid-column 1 / 5; */
            grid-column-end:5;
            grid-row:2 / 2;            
            /*background-color:tomato; */
            background-image:url(../img/1_1.jpg);
            background-repeat:no-repeat;
           border-color:dodgerblue;
            border-style:solid;
            border-width:2px;
            border-radius:5px; 
        }

           body{width:800px;
             margin:0 auto;
             background-color:#d6d1d1;}          
         
        section{
            grid-column:3 / 5; /* Kurzform wäre: grid-column 1 / 5; */ 
            grid-row:6;         
            /*background-color:whitesmoke; */
            
        }
        #leer{
            grid-column:1 /5;
            grid-row:1;
            /*background-color:white;*/
        }

        #leer_a{
            grid-column:1 /5;
            grid-row:5;
            /*background-color:white;*/
        }               
       
        .navigation_oben{
            grid-column:1 / 5;
            grid-row:4;
            /*background-color:darkorange;    */        
        }

         #navigation{
            grid-column:1;
            grid-row:6;
            background-color:orange;
            margin-top:32px;                  
            text-decoration:none;
            background-color:#d6d1d1; 
        }

        #menueanders{display:none;}  
        
        footer{
            grid-column-start:1; /* Kurzform wäre: grid-column 1 / 5; */
            grid-column-end:5;
            grid-row:8 / 8;         
            background-color:#d6d1d1;             
            color:#911F1F; 
            padding-left:15px; 
            font-size:12px;
        }
        
     
        .important{color:darkorange;}

      
        .neu{
            grid-column:3;
            grid-row:2;
            }   

        /*Aufzählungszeichen allgemein als Icon */
        li{list-style-image:url(../img/icon-nicole_klein.png);}


       
        
        /*Hier mal die ersten Versuche für Einstellung navigation oben */
        /*--------------------------------------------------------*/
        .xxx a{text-decoration:none;} /* Standard: keine Unterstreichung */
        .xxx a:hover{color:red; font-weight:1600;} /* Mouse Over Effekte */   
        a.tablinks.active{font-weight:800;} /*wenn ausgewählt wurde..... */

        
        /* ---- Dieser Bereich ist für die Gestaltung der Navigation links im Bezug auf das Icon */
        /*---------------------------------------------------------------------------------------*/

        /* Mit der jscript funktion (fügt Klasse trythis ein in ausg. Link:)-bleibt Icon bei ausgewähltem  Navigationslink */
        .trythis{list-style-image:url(../img/icon-nicole_klein.png);      
                    font-weight:800; font-weight:800;}
        nav ul {margin: 0; padding: 0; margin-left: 25px;} 
        /* Bei MouseOver über den Navigationslink */
        nav ul li:hover {font-weight:800;
                         list-style-image:url(../img/icon-nicole_klein.png);
                        }
         nav ul li {list-style: none; margin-bottom:15px; color:green; text-decoration:none;    } /*kein Aufzählungszeichen als Standard */
      /*  .trythis.a{background-color:orange;color:white;font-weight:800;} /*wenn ausgewählt
    
    /*spezielle Anpassung für mittlere Bildschirmdarstellung = größer als 800px Länge aber kleiner als 1000px Länge = größter Inhaltsbereich bleibt NOCH erhalten, aber Navigation wandert nach oben... */
   
    a{ color:#1660e1ff; ; /*vorher deepskyblue - war das hellere */
    text-decoration: none;}
    a:hover {font-weight:800;list-style-image:url(../img/icon-nicole_klein.png);}

    nav a {color: #1660e1ff;text-decoration: none;}  /*display: block;*/

    @media screen and (min-width: 800px) and (max-width: 999px) { 
    /* min-width 672px / max-width 1024px */
    /* hier vermuten wir Tabletts         */

         .container{              
                grid-template-rows:10px 330px 5px 40px 5px auto 5px 25px; /*Navigation rutsch nach oben */
                grid-template-columns: 0px 0px 800px 0px 0px;   /* Nur noch Inhaltsbereich */
            }
                
         header{              
                background-image:url(../img/1_2.jpg); /* noch andere Hintergrundbild laden, Rest vom header bleibt gleich */
               /* Kurzform wäre: grid-column 1 / 5; */
                grid-column-start:1;
                grid-column-end:5;
                
         }
        
          body{width:800px;
             margin:0 auto;}
       
        
            #menueanders{display:block;line-height:1.5em; word-spacing:0.3em;} /* Navigation oben einblenden */
            #steuerunglinks{display:none;} /* Navigation links ausblenden */
    }    

/* Das ist nun die Einstellung für den kleinsten Darstellungsbereich -> Ausgabereich ist kleiner als 800 px: hier wird ein Bild geladen das zwar 799px lang ist, das Wesentliche sollte aber auf 326px Länge dargestellt werden (Handy horizontal) - der Rest ist dann mehr oder weniger nur Verlauf. Ab 800 px kommt ohnehin dann die nächste Ebene und ein Bild in fester Größe. */

     @media screen and (max-width: 799px) { 
    /* min-width 672px / max-width 1024px */
    /* hier vermuten wir Tabletts         */

         .container{              
                grid-template-rows:10px 300px 5px auto 5px auto 5px auto; /*Navigation rutsch nach oben */
                grid-template-columns: 0px 0px auto 0px 0px;   /* Nur noch Inhaltsbereich */
            }
                
         header{              
               background-image:url(../img/1_3.jpg); /* noch andere Hintergrundbild laden, Rest vom header bleibt gleich */
               grid-column-start:1;
               grid-column-end:5;
         }
        
          body{width:98%;
             margin:0 auto;}
         
         
            #menueanders{display:block;line-height:1.5em;word-spacing:0.3em;} /* Navigation oben einblenden */
            #steuerunglinks{display:none;} /* Navigation links ausblenden */
    }