html {
    font-size: 1em;
    scroll-behavior: smooth;
    overflow-y: scroll;
}

nav {
    z-index: 2;
}

#hero1 {
    background-image: url(../moorlandschaft.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    height: 100vh;
    width: 100%;
}

#hero2 {
    background-image: url(../uferschnepfe.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    height: 100vh;
    width: 100%;
}

#hero3 {
    background-image: url(../ww.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    height: 100vh;
    width: 100%;
}

#hero4 {
    background-image: url(../massnahmen.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    height: 100vh;
    width: 100%;
}

#hero5 {
    background-image: url(../biodivers/quadrat.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    height: 100vh;
    width: 100%;
}

#hero6 {
    background-image: url(../libelle/leupec1.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    height: 100vh;
    width: 100%;
}

#hero7 {
    background-image: url(../hydrologie/wide-2-min.jpg);
    background-size: cover;
    background-position: center left;
    position: relative;
    height: 100vh;
    width: 100%;
}

.header2 {
    padding: 0em 2rem;
    text-align: center;
    width: 100%;
    color: #fff;
}

.colorlight {
    background: white;
    padding-bottom: 3em;
    color: grey;
}

.line {
    border-top: 5px dotted #dfdfdf;
    border-bottom: 5px dotted #dfdfdf;
    padding: 2em 0 1em 0;
    margin: 2em 0;
}

.colordark {
    background: white;
    padding-bottom: 3em;
    color: grey;
}

.no-margin {
    margin: 0 !important;
    padding: 0 !important;
}

#footer {
    padding: 1em;
    font-size: 0.8em;
}

/**-- einfaden der elemente --**/

.mein-element {
    opacity: 0;
    transition: opacity .5s ease-in-out;
}

.visible {
    opacity: 1;
}

/**-- Accordion --**/

.card button:hover {
    text-decoration: none !important;

}

.card button {
    text-transform: uppercase;
    color: white;
    margin-bottom: 0;
    padding-bottom: 0;

}

.card-header {
    background: #8c9741;
    border: transparent;
}

.card-body {}

.card {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-color: white;
}

.carousel {
    background: #8c9741;
}

.carousel p {
    background: white;
    color: black;
    opacity: 0.9;
    padding: 0.5em;
    line-height: 1.2em;
}

.carousel-item {
    transition-duration: 2.0s !important;
}

/* spinner */

#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Add animation to "page content" */

.animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s
}

@-webkit-keyframes animatebottom {
    from {
        bottom: -100px;
        opacity: 0
    }

    to {
        bottom: 0px;
        opacity: 1
    }
}

@keyframes animatebottom {
    from {
        bottom: -100px;
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}

#myDiv {
    display: none;

}