@media only screen {

    html{
      margin: 0 auto ;
      width: 100%;
      background:white url(./pix/wehg2.jpg) ;
    }

@font-face {
  font-family:'Nunito';
  font-display:swap;
  font-style: normal;
  font-weight: 400;
  src:
    url('/fonts/nunito-regular.woff2') format('woff2');
}

    *{
       
      font-family: Nunito;
      color:#666865;
      margin:0;
  	  padding:0;
      list-style:none;
    }

} 

html, body{
    height: 100% ;
    }
  

body{
    background:none;
    overflow:hidden;
    }

.container{ 
    display: grid; 
    grid-template-rows: 140px 43px 4fr 65px;
    height:100%; 
    background:none ;
    background-repeat: no-repeat;
    border: 1px solid red;
    box-shadow:0px 4px 4px 4px rgba(128,128,128, 0.20); 
    overflow: auto; 
   }
   
   
main{
    width: 100%;
    max-width: 960px;
    background-color:none;
    margin:0 auto;
    margin-bottom:20px;
    }   

h2{
    font-size: 18px;
    color:#009CA8; 
    margin-top:10px; 
    }

h3{
    padding-bottom: 10px;
    font: 18px;
    
    }   

header{
	width:100%; 
    background: white url(./pix/AFIT_Banner_smp.jpg) ;
    background-repeat: no-repeat;
    background-position: center;
    }



#navbar{
    width:100%;
    background: #1BE3E9;
    z-index:1;
    border-top: 1px solid #009CA8;
    border-bottom: 1px solid #009CA8;
    }



nav{
	width:100%;
	float:left;
	background:#009CA8;
	height:0;
	overflow:hidden;
	transition:height .2s ease-in-out;
    margin-top: 0.3em;
    }

nav li{
	float:left;
	 width:100%;
     border-bottom: 1px solid white;
     margin:0;
    }

nav a{
	display:block;
	height:100%;
	width:100%;
	padding:0.6em;
	text-decoration:none;
	color:white;
	 background-color: none;
     border-right: 1px solid;
   }

nav a:hover {
	background:darkblue;
    }

.nav-toggle {
	background:#009CA8; 
	display:block;
	position:relative;
	right:0.5em;
	top:0.2em;
	padding:0.4em;
	color:white;
	cursor:pointer;
	text-decoration:none;
    float:right;
    border-radius:5px;
    }

.nav-toggle.active {
	background:lightblue;
   border:1px solid red;
   color:red;
    }

#nav-open:target .nav-closed {
     display:block;
    }

.nav-closed,#navi-closed:target .nav-closed,#nav-open:target .nav-open {
    display:none;
    }

footer {  
    background: #1BE3E9; 
    min-width:100%;
    border-top: 1px solid purple;
    border-radius: 0 0 10px 10px !important;
    }

#footertxt{
    margin-top:10px;
    font-size: 8px;
    text-align: center;
    }


#backbutt{
    background-color: #009CA8;
    width:60px;
    margin:25px auto 10px auto;
    padding-left:15px;
    padding-top:4px;
    vertical-align: bottom;
    padding-bottom:5px;
    border:1px solid grey;
    border-radius: 5px;
    }

#backbutt a{
    text-decoration: none;
    color: white;
    font-weight: 500;
    }

.databutt{
    width:85px;
    margin:10px auto;
    text-align: center;
    padding-bottom:3px; 
    border: 1px solid #D0AF80;
    border-radius: 5px;
    background-color: #009CA8;
    }

.databutt a{
    text-decoration:none;
    font-size: 11px;
    color: #E9E2E0;
    }

.databutt a:hover{
    color: red;
    }










                    @media screen and (max-width: 799px) {
                    	    #nav-open:target nav {
                    	    height:290px;
                            
                            }
                        
                            .textfeld{
                            color: gray;
                            border: 1px solid green;
                            border-radius: 9px;
                            background: rgba(192,255,255, 0.3);
                            margin:0 auto;
                            text-align: center;
                            padding: 10px;
                            height:100%;
                            
                            }    
                            
                            .textfeld p{
                            font-size: 18px;
                            }
                            .textfeld h1 {
                            padding-bottom: 10px;
                            color: #009CA8;
                            }   

                            header{
                            background: lightblue url(./pix/AFIT_Banner_smp.jpg) ;
                            background-repeat: repeat-x;
                            background-position: center;        
                            }
                       
                       
                            #navbg{
                            float:left;
                            width:42px;
                            height:38px;
                            background: url(./pix/AFIT_LOGO_mini.png);
                            margin-top:1px;
                            margin-left:20px;
                            } 

                            #centarticle, #leftarticle{
                            padding: 10px;
                            padding-top: 20px;
                            }
                            
                            
                            article details summary {
                            width: 280px;
                            background-color: #1BE3E9;
                            border: 1px solid ;
                            border-radius: 6px;
                            box-shadow: 2px 2px 3px #bbbbbb;
                            list-style:none;
                            margin: 3px auto;
                            margin-bottom:5px;
                            }
                            
                            article details summary{
                            text-align:center;
                            color: white;
                            
                            font-size:18px;
                            font-weight:600;
                            text-shadow: 2px 2px 3px #bbbbbb;
                            padding:10px;
                            }
                            
                             .Inhalte{
                            border: 1px solid #009CA8;
                            border-radius: 9px;                
                            padding: 5px;
                            margin-right: 5px;
                            margin-left:5px;
                            box-shadow: 2px 2px 3px #bbbbbb;                           
                            }
                    }







@media screen and (min-width:800px) {
	   
       .container { 
            display: grid; 
            grid-template-rows: 150px 40px 4fr 80px;
            height:100%; 
            background: none ;
            background-repeat: no-repeat;
            border: 1px solid red;
            box-shadow:0px 4px 4px 4px rgba(128,128,128, 0.20); 
            overflow: auto; 
            }    
        
       .nav-toggle {
            display:none !important;
            }

        header{
            background: lightblue url(./pix/header_hg3.jpg) ;
            background-repeat: repeat-x;
            background-position: center;        
            }

        #navbar{
            border-top: 1px solid purple;
            border-bottom: 1px solid purple;
            }

	    nav{
            background:none;
            float:none;
  		    width:750px;
  		    display:block !important;
  		    height:39px;
            padding-left:0.5em;
            margin:0 auto;
        
    		}
	
	    nav li {
  		    width:auto;
  		    padding:0px;
            border: 0px ;
            margin-right:1.3em;
            margin-top:0.4em;
            text-align: center;
            }
    
        nav a{
            padding:0.2em 0.5em 0.3em 0.5em;
    	    display:block;
  	        width:100%;
            text-decoration:none;
  	        color:white;
  	        background: #009CA8;
            border: 1px solid; 
            border-radius:5px;
            
            }
            
     		nav #aktiv a{
				color:red;
  	        background: green;	     		
     		}

        #startpix{
            width:386px;
            height:220px;
            margin: 0 auto;
            margin-bottom: 10px;
            border: 1px solid #009CA8;
            background: url(./pix/eingang.jpg);
            border-radius: 9px;
            }

        #kontaktpix{
          width:650px;
          height:199px;
          margin: 30px auto;
          margin-bottom: 0px;
          border: 2px solid #00C5C8;
          background: url(./pix/buero.jpg);
          border-radius: 9px;
          }
 
        #headerbg{
          
          float:left;
          width:99.6%;
          height:100%;
          background: url(./pix/afit_logo_ct.gif) ;
          margin-top:0px;
          margin-left:0px;
          border: 3px solid green;
          }

        #centarticle { 
          min-height: 550px;
          text-align: center;
          margin-top:10px;
          padding-bottom: 25px;
          padding-top:10px;  
          min-width:100%; 
          background: white; 
          border: 1px solid #009CA8; 
          border-radius:10px;
          
          }

        #leftarticle{
          min-height: 550px;
          text-align: left;
          padding-top:30px;
          padding-left: 0px;
          padding-bottom: 25px;
          margin-left:20px;
          margin-top:10px;
          min-width:100%;
          background: white;
          border: 1px solid #009CA8;
          border-radius:10px;
        }

        footer {  
          background: #1BE3E9; 
          min-width:100%;
          border-top: 1px solid purple;
          border-radius: 0 0 10px 10px !important;
        }

        #footer p{
          text-align:center;
          font:5px Verdana #585A58;
          margin-top:14px;
          } 

        h1{
          font:20px Arial, sans-serif;
          font-weight: 600;
          color:#009CA8;
          margin: 30px 20px;
          border-bottom:1px solid #D0AF80;
        text-align:center;
          }

        #pix{
        float:right;
        }

        
        .textfeld p, h1{
        padding-left:50px;
        padding-bottom:20px;
        }

        #leftarticle article details summary {
                            margin-left: 50px;
                            margin-bottom: 5px;
                            cursor: pointer;
                            list-style:revert;
                            color:#009CA8;
                            font-size:19px  ;
                            font-weight:600;
                            border: 1px solid green;
                            }
                            
        .Inhalte{
                            border: 1px solid #009CA8;
                            border-radius: 9px; 
                            box-shadow: 2px 2px 3px #bbbbbb;               
                            padding: 20px;
                            margin-right: 20px;
                            margin-left:0px;
                            
                            }


        #tel, #eml{
          width:150px;
          height:20px;
          display:inline;
          color:#009CA8;
          font-size:22px;
          font-weight:600; 
          font-style:italic;
          border: 1px solid #1BE3E9;
          -webkit-text-stroke-width:0.3px;
          -webkit-text-stroke-color:darkblue;
        }

        #tel{
          float:left;
          text-align:right;
          margin-left: 200px;
          margin-top:50px;
        }
        
        #eml{
          
          float:right;
          margin-right: 200px;
          margin-top:50px;
        }
h3{margin: 0px;
  margin-top:10px;
  color: red;
}

h2{
	margin-top: 5px;
	padding-bottom:10px; 
}
#wirtxtfeld p{
  margin-left:0px;
  color:red;
}

#wirtxtfeld{
background:lightblue; 
max-width:700px;
margin: 0 auto;
}  

.reifenliste{
padding-left:50px;
}

.textfeld{
padding-left: 30px;
}
  
}