html {
    overflow: scroll;
    scroll-behavior: smooth;
    scrollbar-color: rgb(51,102,153) white;
    scrollbar-width: auto;
}
       
body {
    box-sizing: border-box;
    padding-top: 20px;
    color: #414040;
    font-family:'Verdana';
    font-size: 18px;
    overflow: auto;
    scrollbar-track-color: rgb(51,102,153);
}

h1, h2, h3, h4, h5, h6 {
    color: rgb(77,77,77);
    font-weight: 600;
    line-height: 1.3;
}

h1 {
    float: left;
    font-size: 2em;
        }

h2 {
    color: #4d4d4d;
    font-size: 1.6em;
    padding-top : 45px;
}
h3 {
    font-size: 1.3em;
    padding-top: 20px;
    margin-top: 4em;
}

p{
    line-height: 1.5em;
    color: #4d4d4d;
    }

a {
    color: rgb(51,102,153);
    text-decoration: none;
}

hr {
    border: 5px solid white;
    width: 100%;
    background-color:white;
    border-color:white;
   }
.header {
    
    height:100px;
    }

#logostartseite-k {
    width:100%;
    margin:auto;
    height:65vw;
    text-align:center;
    background-image:url(hintergrund-logo-kl.jpg);
    background-size:50% 45%;
    background-repeat: repeat-x;
    background-position:center;
          }

#logostartseite-k h2 {
    color:rgb(51,102,153);
    
}
#logoimg {
   margin-top:0;
   margin-left:25vw;
     } 
#logoimg img {
    width:70%;
    height:auto;
}
#logotext h2{
   margin-left:5vw;
   color: rgb(77,77,77);
   margin-top:3vw;
        }   

#logostartseite{
    display:none;
}
/*-----------------*/
.content {
    max-width:100%;
    margin-top:250px;
    background:rgb(235,237,236);
}
.content p {
    width:70%;
    margin:auto;
    line-height: 1.8em;
}
.content2 {
    width:70%;
    margin:auto;
}
/*-----------------*/
.startcontainer {
    width:90%;
    margin:auto;
    height:350px;
    text-align: center;
    }
.startcontainer img {
    height:320px;
    margin:-45px;
    margin-top:15px;
        }
.startcontainer h2 {
    position: relative;
    font-size:2.6em;
    color:salmon;
   text-shadow: 0 3px 6px #121212;
    margin-top:-5em;
    margin-left:-5%;
    z-index:10000;
}
.elementefliegen {
	height:400px;
	width:100%;
	margin:auto;
}
.flyinleft {
	height: 270px;
	margin-right:-50px;
}
.flyinright {
	height: 270px;
	margin-left:-50px;
}
#notfly {
	height: 270px;
}
/*-------------------*/
.feld {
    background-color: white;
    width:100%;
    margin:auto;
    margin-top: 5em;
    display:grid;
    grid-template-columns: 100%;
    height:150px;
    align-items: center;
    }

.feld a {
    margin-left: 5%;
    font-size: 2em;
}
.feld a:hover {
    color:salmon;
}

.feld {
    display:grid;
    grid-template-columns: 100%;
    align-items: center;
    }
.contueberschr {
    width:100%;
    margin:auto;
    margin-top: 5em;
    display:grid;
    grid-template-columns: 100%;
    height:100px;
    text-align: center;
}
.container {
    display: grid;
	grid-template-columns: 100%;
    height: 160px;
    background-image:url(hintergrund-logo-kl.jpg);
    background-size:2% 1%;
    background-repeat: repeat-x;
    background-position:bottom;
    margin-top:6vw;
    margin-left:5%;
		   }

.container img {
    display: none;
    }
.ankerlink {
    margin-top: 2.5em;
    margin-bottom:4em;
   }

.textlink {
    display:grid;
    grid-column: span;
}
.textlink a{
    font-size:2em;
    margin-left:5%;
    }

.container h2 {
    color: rgb(51,102,153);
  }

.ltext {
    width:90%;
    margin:auto;
    margin-top:4em;
	padding-bottom: 0.2em;
}

.rauf {
    text-align: center;
    margin-top:1em;
    margin-bottom: 2em;
}

.footer {
    text-align:center;
    background-color: rgb(51,102,153);
}
.footer h3 {
    font-size:1em;
    font-style: bold;
    color:white;
}
.footer p {
    font-size:0.9em;
    color:white;
}


/*--------------------------------------------------*/
@media screen and (min-width: 868px){
 
#ueberschr01 {
        display: none;
    }
.feld {
    grid-template-columns: 28% 28% 28%;
        }  
.feld a {
    margin-left:85%;
    font-size: 1.6em;
        }   
.feld a:hover {
    color:salmon;
    transform: scale(0.95);
	transition: all 0.5s;
}
    
.content {
  margin-top:100px;
}    
/*----------------------------*/ 
#logostartseite {
  display:grid;
  grid-template-columns:70% 30%;
  max-height:250px;
  width:auto;  
  align-items:center; 
  background-image:url(hintergrund-logo.jpg);
  background-repeat: repeat-x;
  background-position:center;
  background-size: 50% 60%;
          }
#logostartseite p {
    color:rgb(51,102,153);
    margin-left:15%;
    margin-top:-3em;
}

  
#logobild {
  height:220px;
      } 
 
#logotext1 h1 {
    margin-left:10vw;
    color:white;
    }    
#logotext2 h1{
  font-size: calc(16px + (28 - 16) * ((100vw - 320px) / (1600 - 320)));
  margin-left:10vw;
  color: white;
           }   
 
#logostartseite-k{
  display:none;
    }
 /*------------------*/   
.startcontainer {
    width:47vw;
    margin:auto;
    height:40vw;
    }  
.startcontainer img {
    height:40vw;
       } 
.startcontainer h2 {
    font-size:3.5em;
     }
/*------------------------*/
.container {
    display: grid;
	grid-template-columns:55% 45%;
	height:370px;
    width:80%;
    margin:auto;
    margin-top:8vw;
	}
	
.container img {
    display:block;
	max-height:450px;
    width:auto;
    }    
	
 .container h2 {
    margin-left: 3vw;
    margin-top:12vw;
    color:rgb(51,102,153);
        }
.ltext {
   width: 70%;
   margin-left:10vw;
   margin-bottom: 5em;
   margin-top:10em;
    }      
    
.elementefliegen {
	overflow: hidden;
	margin-left: 5vw;
	margin-top:3em;
	margin-bottom: 4em;
		}
	
.flyinleft {
	transform: translateX(800px);
	transition: transform 3s;
	height: 45vw;
	margin-right:-9vw;
	}
	

.flyinright  {
	transform: translateX(-800px);
	transition: transform 3s;
	height:45vw;
	margin-left:-9vw;
		}	
	
#notfly {
	height:47vw;
	text-align: center;
	margin-top:-0.1em;
	}
.rauf {
        margin-top: 8em;
    }       
.content {
    animation: einblenden 4s;
    -moz-animation: einblenden 4s; 
    -webkit-animation: einblenden 4s; 
    -o-animation: einblenden 4s;
}
@keyframes einblenden {
    from { opacity:0; }
    to { opacity:1; }

@-moz-keyframes einblenden { 
    from { opacity:0;}
    to { opacity:1; }
 
@-webkit-keyframes einblenden { 
    from { opacity:0; }
    to { opacity:1; }
  
@-o-keyframes einblenden { 
    from { opacity:0; }
    to { opacity:1; }
    }
    
/*---------------------------*/  
@media screen and (min-width: 900px){   
  
.startcontainer {
    border:2px solid green;
    width:95vw;
    margin:auto;
    height:50vw;    
    }    
.startcontainer img {
    height:80%;
    margin:-40px;
    } 
.startcontainer h2 {
    font-size:6em;
    } 
    }