@font-face {
    font-family: 'robotolight';
    src: url('/Fonts/Roboto/roboto-light-webfont.eot');
    src: url('/Fonts/Roboto/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Fonts/Roboto/roboto-light-webfont.woff2') format('woff2'),
         url('/Fonts/Roboto/roboto-light-webfont.woff') format('woff'),
         url('/Fonts/Roboto/roboto-light-webfont.ttf') format('truetype'),
         url('/Fonts/Roboto/roboto-light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'babelsansregular';
    src: url('/Fonts/Babel-Sans/babelsans-webfont.eot');
    src: url('/Fonts/Babel-Sans/babelsans-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Fonts/Babel-Sans/babelsans-webfont.woff2') format('woff2'),
         url('/Fonts/Babel-Sans/babelsans-webfont.woff') format('woff'),
         url('/Fonts/Babel-Sans/babelsans-webfont.ttf') format('truetype'),
         url('/Fonts/Babel-Sans/babelsans-webfont.svg#babelsansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'consola_monobook';
    src: url('/Fonts/Consola-Mono/consolamono-book-webfont.eot');
    src: url('/Fonts/Consola-Mono/consolamono-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Fonts/Consola-Mono/consolamono-book-webfont.woff2') format('woff2'),
         url('/Fonts/Consola-Mono/consolamono-book-webfont.woff') format('woff'),
         url('/Fonts/Consola-Mono/consolamono-book-webfont.ttf') format('truetype'),
         url('/Fonts/Consola-Mono/consolamono-book-webfont.svg#consola_monobook') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'montserratlight';
    src: url('/Fonts/Gontserrat/gontserrat-light-webfont.eot');
    src: url('/Fonts/Gontserrat/gontserrat-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Fonts/Gontserrat/gontserrat-light-webfont.woff2') format('woff2'),
         url('/Fonts/Gontserrat/gontserrat-light-webfont.woff') format('woff'),
         url('/Fonts/Gontserrat/gontserrat-light-webfont.ttf') format('truetype'),
         url('/Fonts/Gontserrat/gontserrat-light-webfont.svg#montserratlight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'liberation_sansregular';
    src: url('/Fonts/Liberation-Sans/liberationsans-regular-webfont.eot');
    src: url('/Fonts/Liberation-Sans/liberationsans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Fonts/Liberation-Sans/liberationsans-regular-webfont.woff2') format('woff2'),
         url('/Fonts/Liberation-Sans/liberationsans-regular-webfont.woff') format('woff'),
         url('/Fonts/Liberation-Sans/liberationsans-regular-webfont.ttf') format('truetype'),
         url('/Fonts/Liberation-Sans/liberationsans-regular-webfont.svg#liberation_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'liberation_sansregular', sans-serif;
    list-style: none;
    text-decoration: none;
}



header{
    position: fixed;    
    right: 0;
    top: 0;
    z-index: 1000;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 100px;
    background: linear-gradient(245.59deg, #4d9559 0%, #38703d 28.53%, #133917 75.52%);
    min-width: 66px;
    
}

.logo{
    font-size: 20px;
    font-weight: 700;
    color: white;
}
.navlist{
    position: relative;
}

.navlist li{
    position: relative;
    float: left;

}

ul li a{
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    font-family: 'liberation_sansregular', sans-serif;
}


ul li a:hover{
    background: #4d9559;
}

ul li ul{
    position: absolute;
    left: 0;
    width: 200px;
    background: #38703d;
    display: none;
}

ul li:hover ul{
   display: block;
}

ul li ul li{
    position: relative;
    width: 100%;
    border: 1px solid rgba(106, 181, 97, 0.2);
}

#menu-icon{
    color: rgb(255, 255, 255);
    font-size: 20px;
    z-index: 10001;
    cursor: pointer;  
    display: none;
}



/*------------Ebook-Box----------------------*/

.scroll-bg{
    background: linear-gradient(180deg, #f4f4f4 40%,    /* Royal Blue Start */ #f3f3f3 60%   /* Etwas dunkleres Blau am Ende */);
    width: 60%;
    margin: 70px auto 2px;
    padding: 10px 20px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* schwarzer Schatten */
}

.scroll-div{
    width: 100%;
    background: linear-gradient(180deg, #f4f4f4 40%,    /* Royal Blue Start */ #f3f3f3 60%   /* Etwas dunkleres Blau am Ende */);
    height: 650px;
    overflow: hidden;
    overflow-y: scroll;
    position: relative;
    height: 95vh;
}

.scroll-object{
    color: rgb(33, 33, 33);
    font-family: 'liberation_sansregular', sans-serif;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.scroll-object p{
    text-align: left;
    line-height: 25px;
    font-family: 'liberation_sansregular', sans-serif;
    font-style: normal, italic, oblique;
    font-weight: normal;
    font-size: 18px;
    color: #000000;
    margin-top: 10px;
    margin-right: 10px;
}

  .scroll-object ul li p{
    text-align: left;
  }

  .scroll-object h1{
    text-align: center;
    font-family: 'liberation_sansregular', sans-serif;
}

.scroll-object h3{
    font-family: 'liberation_sansregular', sans-serif;
    color:#000000;
    font-size: 20px;
}

@media only screen and (min-width: 990px) and (max-width: 1200px){
    header{
        padding: 5px 6%;
    }
    .scroll-div{
        width: 100%;
        background: linear-gradient(180deg, #f4f4f4 40%,    /* Royal Blue Start */ #f3f3f3 60%   /* Etwas dunkleres Blau am Ende */);
        overflow: hidden;
        overflow-y: scroll;
        position: relative;
        margin-bottom: 1px;
        margin-top: 10px;
        height: 85vh;
    }

    .scroll-bg{
        background: linear-gradient(180deg, #f4f4f4 40%,    /* Royal Blue Start */ #f3f3f3 60%   /* Etwas dunkleres Blau am Ende */);
        width: 80%;
        margin: 70px auto 2px;
        padding: 10px 20px;
        border-radius: 10px;
        position: relative;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* schwarzer Schatten */
    }

}

@media only screen and (min-width: 1201px) and (max-width: 1500px){
    header{
        padding: 5px 5%;
    }
    .scroll-div{
        width: 100%;
        background: linear-gradient(180deg, #f4f4f4 40%,    /* Royal Blue Start */ #f3f3f3 60%   /* Etwas dunkleres Blau am Ende */);
        overflow: hidden;
        overflow-y: scroll;
        position: relative;
        margin-bottom: 1px;
        margin-top: 10px;
        height: 85vh;
    }

    .scroll-bg{
        background: linear-gradient(180deg, #f4f4f4 40%,    /* Royal Blue Start */ #f3f3f3 60%   /* Etwas dunkleres Blau am Ende */);
        width: 80%;
        margin: 70px auto 2px;
        padding: 10px 20px;
        border-radius: 10px;
        position: relative;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* schwarzer Schatten */
    }

    .ebook-cover{
        display: block;
        align-items: center;
        width: 25px;
        padding-top: 0px;
        padding-bottom: 0px;
        margin: 25px auto;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* schwarzer Schatten */
        }
}

@media only screen and (min-width: 1501px) and (max-width: 1700px){
    header{
        padding: 5px 6%;
    }
    .scroll-div{
        width: 100%;
        background: linear-gradient(180deg, #f4f4f4 40%,    /* Royal Blue Start */ #f3f3f3 60%   /* Etwas dunkleres Blau am Ende */);
        overflow: hidden;
        overflow-y: scroll;
        position: relative;
        margin-bottom: 1px;
        margin-top: 10px;
        height: 85vh;
    }

    .scroll-bg{
        background: linear-gradient(180deg, #f4f4f4 40%,    /* Royal Blue Start */ #f3f3f3 60%   /* Etwas dunkleres Blau am Ende */);
        width: 60%;
        margin: 70px auto 2px;
        padding: 10px 20px;
        border-radius: 10px;
        position: relative;
        height: 10%;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* schwarzer Schatten */
    }

    .ebook-cover{
        display: block;
        align-items: center;
        width: 25%;
        padding-top: 0px;
        padding-bottom: 0px;
        margin: 25px auto;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* schwarzer Schatten */
        }

        .scroll-object{
            padding-bottom: 0;
            margin-bottom: 0;
            height: 100%;
        }
}

@media only screen and (min-width: 1701px) and (max-width: 1900px){
    header{
        padding: 5px 6%;
    }
    .scroll-div{
        width: 100%;
        background: linear-gradient(180deg, #f4f4f4 40%,    /* Royal Blue Start */ #f3f3f3 60%   /* Etwas dunkleres Blau am Ende */);
        overflow: hidden;
        overflow-y: scroll;
        position: relative;
        margin-bottom: 1px;
        margin-top: 10px;
        height: 90vh;
    }

    .scroll-bg{
        background: linear-gradient(180deg, #f4f4f4 40%,    /* Royal Blue Start */ #f3f3f3 60%   /* Etwas dunkleres Blau am Ende */);
        width: 60%;
        margin: 70px auto 2px;
        padding: 10px 20px;
        border-radius: 10px;
        position: relative;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* schwarzer Schatten */
    }
}

@media only screen and (min-width: 1901px) and (max-width: 2300px){
    header{
        padding: 5px 6%;
    }
    .scroll-div{
        width: 100%;
        background: linear-gradient(180deg, #f4f4f4 40%,    /* Royal Blue Start */ #f3f3f3 60%   /* Etwas dunkleres Blau am Ende */);
        overflow: hidden;
        overflow-y: scroll;
        position: relative;
        margin-bottom: 1px;
        margin-top: 10px;
        height: 90vh;
    }

    .scroll-bg{
               background: linear-gradient(180deg, #f4f4f4 40%,    /* Royal Blue Start */ #f3f3f3 60%   /* Etwas dunkleres Blau am Ende */);
        width: 60%;
        margin: 70px auto 2px;
        padding: 10px 20px;
        border-radius: 10px;
        position: relative;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* schwarzer Schatten */
    }
}

@media only screen and (min-width: 2301px) and (max-width: 3000px){
    header{
        padding: 5px 6%;
    }
    .scroll-div{
        width: 100%;
             background: linear-gradient(180deg, #f4f4f4 40%,    /* Royal Blue Start */ #f3f3f3 60%   /* Etwas dunkleres Blau am Ende */);
        overflow: hidden;
        overflow-y: scroll;
        position: relative;
        margin-bottom: 1px;
        margin-top: 10px;
        height: 90vh;
    }

    .scroll-bg{
                background: linear-gradient(180deg, #f4f4f4 40%,    /* Royal Blue Start */ #f3f3f3 60%   /* Etwas dunkleres Blau am Ende */);
        width: 60%;
        margin: 70px auto 2px;
        padding: 10px 20px;
        border-radius: 10px;
        position: relative;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* schwarzer Schatten */
    }
    .ebook-cover{
        display: block;
        align-items: center;
        width: 20%;
        padding-top: 0px;
        padding-bottom: 0px;
        margin: 25px auto;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* schwarzer Schatten */
        }
}

@media only screen and (min-width: 0px) and (max-width: 500px){
    header {
        position: fixed;
        right: 0;
        top: 0;
        z-index: 1000;
        width: 100%;
        display: flex;
        padding: 15px 6%;
    ;
        align-items: center;
        justify-content: space-between;
        padding: 10px 5% 10px;
        background: linear-gradient(245.59deg, #4d9559 0%, #38703d 28.53%, #133917 75.52%);
        min-width: 66px;
    }

    .scroll-div{
        height: 800px;
    }
    
}

@media only screen and (min-width: 501px) and (max-width: 990px){
    header{
        padding: 10px 6%;
    }
    .scroll-div{
        height: 800px;
    }
    
}



/*--Responsive Design für Smartphone---*/

@media (max-width: 1200px){

    .scroll-down{
        right: 3%;
        transition: .2s;  
    }
}


@media (max-width: 990px){
    #menu-icon{
        display: block; 
        margin: 10px;
    }
    .navlist{
        position: absolute;
        width: 100%;
        top: 66px;
        left: 0;
        background: #337a48;
        display: none;
    }

    .navlist.active{
        display: initial;
        top: 50px;
    }

    #menu-icon:checked ~ .navlist{
        display: initial;
    }

    .navlist li{
    width: 100%;
    }

    .navlist li ul{
        position: relative;
        width: 100%;
        left: 0;
    }

    .navlist li:hover ul li{
        background: #4d9559;
    }

    .bx-bx-menu{
        position: relative;
        width: 400px;
        height: 50px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }
} 

@media (max-width: 990px){
    .scroll-bg{
        background: linear-gradient(180deg, #f4f4f4 40%,    /* Royal Blue Start */ #f3f3f3 60%   /* Etwas dunkleres Blau am Ende */);
        width: 100%;
        margin: 70px auto 0px;
        padding: 10px 20px;
        border-radius: 10px;
        position: relative;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* schwarzer Schatten */
    }
    
    .scroll-div{
        width: 100%;
        background: linear-gradient(180deg, #f4f4f4 40%,    /* Royal Blue Start */ #f3f3f3 60%   /* Etwas dunkleres Blau am Ende */);
        height: 100%;
        overflow: hidden;
        overflow-y: scroll;
        position: relative;
    }
    
    .scroll-object{
        color: rgb(40, 40, 40);
        font-family: 'Poppins', sans-serif;
        padding: 0px;
        font-size: 18px;
    }

    .scroll-object p{
        text-align: left;
        font-size: 18px;
        margin: 5px 5px 5px 5px;
        
        
    }

    .scroll-object h1{
        font-size: 25px;
        -moz-hyphens: auto;  /*Silbentrennung*/
        -o-hyphens: auto;       /*Silbentrennung*/
        -webkit-hyphens: auto;   /*Silbentrennung*/
        -ms-hyphens: auto;       /*Silbentrennung*/
        hyphens: auto;           /*Silbentrennung*/
    }

    .scroll-object h2{
        font-size: 20px;
        -moz-hyphens: auto;  /*Silbentrennung*/
        -o-hyphens: auto;       /*Silbentrennung*/
        -webkit-hyphens: auto;   /*Silbentrennung*/
        -ms-hyphens: auto;       /*Silbentrennung*/
        hyphens: auto;           /*Silbentrennung*/
    }

/*
    .scroll-object   strong:not([class]):not([id]) {
        font-size: 18px;
      }

      */

      .scroll-object ul li li p{
        position: relative;
        text-align: left;
        align-items: left;
      }

}


.ebook-cover{
    display: block;
    align-items: center;
    width: 200px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 25px auto;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* schwarzer Schatten */
    }

    @media only screen and (min-width: 501px) and (max-width: 1023px) {
        .titel{
        display: block;
        text-align: center;
        }
        
        .ebook-cover{
         display: block;
         width: 200px;
         padding-top: 0px;
         padding-bottom: 0px;
          margin: 25px auto;
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* schwarzer Schatten */
        }

        .scroll-div{
            width: 100%;
            background: linear-gradient(180deg, #f4f4f4 40%,    /* Royal Blue Start */ #f3f3f3 60%   /* Etwas dunkleres Blau am Ende */);
            height: 100%;
            overflow: hidden;
            overflow-y: scroll;
            position: relative;
            height: 89vh;
        }

        .scroll-bg{
            background: linear-gradient(180deg, #f4f4f4 40%,    /* Royal Blue Start */ #f3f3f3 60%   /* Etwas dunkleres Blau am Ende */);
            width: 100%;
            margin: 55px auto 0px;
            padding: 10px 7px;
            border-radius: 10px;
            position: relative;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* schwarzer Schatten */
        }
        
        }

        @media only screen and (min-width: 376px) and (max-width: 500px) {
            .titel{
            display: block;
            text-align: center;
            }
            
            .ebook-cover{
             display: block;
             width: 200px;
             padding-top: 0px;
             padding-bottom: 0px;
              margin: 25px auto;
              box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* schwarzer Schatten */
            }
    
            .scroll-div {
                width: 100%;
                background: linear-gradient(180deg, #f4f4f4 40%,    /* Royal Blue Start */ #f3f3f3 60%   /* Etwas dunkleres Blau am Ende */);
                height: 100%;
                overflow: hidden;
                overflow-y: scroll;
                position: relative;
                height: 89vh;
            }
    
            .scroll-bg{
                background: linear-gradient(180deg, #f4f4f4 40%,    /* Royal Blue Start */ #f3f3f3 60%   /* Etwas dunkleres Blau am Ende */);
                width: 100%;
                margin: 0px auto 0px;
                padding: 0px 0px;
                border-radius: 10px;
                position: relative;
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* schwarzer Schatten */
            }

       

            .scroll-object {
                color: rgb(40, 40, 40);
                font-family: 'Poppins', sans-serif;
                padding: 0px;
                font-size: 18px;
            }

            
    .scroll-object h1{
        font-size: 25px;
        -moz-hyphens: auto;  /*Silbentrennung*/
        -o-hyphens: auto;       /*Silbentrennung*/
        -webkit-hyphens: auto;   /*Silbentrennung*/
        -ms-hyphens: auto;       /*Silbentrennung*/
        hyphens: auto;           /*Silbentrennung*/
        text-align: center;
        margin-top: 60px;
    }

        }




        
        @media only screen and (min-width: 0px) and (max-width: 375px){
    .scroll-bg{
        background: linear-gradient(180deg, #f4f4f4 40%,    /* Royal Blue Start */ #f3f3f3 60%   /* Etwas dunkleres Blau am Ende */);
        width: 100%;
        margin: 55px auto 0px;
        padding: 10px 7px;
        border-radius: 10px;
        position: relative;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* schwarzer Schatten */
    }
    
    .scroll-div{
        width: 100%;
        background: linear-gradient(180deg, #f4f4f4 40%,    /* Royal Blue Start */ #f3f3f3 60%   /* Etwas dunkleres Blau am Ende */);
        height: 100%;
        overflow: hidden;
        overflow-y: scroll;
        position: relative;
        height: 89vh;
    }
    
    .scroll-object{
        color: rgb(40, 40, 40);
        font-family: 'Poppins', sans-serif;
        padding: 0px;
        font-size: 18px;
    }

    .scroll-object p{
        text-align: left;
        font-size: 16px;
        margin: 5px 10px 0px 10px;
        
    }

    .scroll-object h1{
        font-size: 25px;
        -moz-hyphens: auto;  /*Silbentrennung*/
        -o-hyphens: auto;       /*Silbentrennung*/
        -webkit-hyphens: auto;   /*Silbentrennung*/
        -ms-hyphens: auto;       /*Silbentrennung*/
        hyphens: auto;           /*Silbentrennung*/
        text-align: center;
        margin-top: 60px;
        color: #000000;
    }

    .scroll-object h2{
        font-size: 22px;
        -moz-hyphens: auto;  /*Silbentrennung*/
        -o-hyphens: auto;       /*Silbentrennung*/
        -webkit-hyphens: auto;   /*Silbentrennung*/
        -ms-hyphens: auto;       /*Silbentrennung*/
        hyphens: auto;           /*Silbentrennung*/
        color: #000000;
        padding: 0px 10px 0px 10px;
    }

     .scroll-object h3{
        text-align: left;
        padding: 0px 10px 0px 10px;
        margin: 0px;
        
    }

/*
    .scroll-object   strong:not([class]):not([id]) {
        font-size: 18px;
      }

      */

      .scroll-object ul li li p{
        position: relative;
        text-align: left;
        align-items: left;
      }

}