body {
    background-image: url(Hintergrund.png);
    background-size: 100%;
    background-position: top right;
    background-repeat: no-repeat;
    font-family: 'Roboto', sans-serif;
}

h1, h2, h3, h4 {
    font-family: 'Righteous', cursive;
    margin-top: 2rem;
}

img {
    max-width: 100%;
    height: auto;
}

        .ueberschrift_zeile{
            display: flex;
        }

            .ueberschrift_text{
                width: 70%;
            }

            @keyframes farbwechsel {
                0%{
                    color: black;
                }
                10%{
                    color: purple;
                }
                20%{
                    color: blue;
                }
                30%{
                    color: green;
                }
                40%{
                    color: yellow;
                }
                50%{
                    color: red;
                }
                60%{
                    color: yellow;
                }
                70%{
                    color: green;
                }
                80%{
                    color: blue;
                }
                90%{
                    color: purple;
                }
                100%{
                    color: black;
                }
            }

            @keyframes fliegrein {
                0%{
                    margin-top: -400px;
                }
                100%{
                    margin-top: 32px;
                }
            }

                .ueberschrift {
                    font-size: 40px;
                    margin-right: 60px;
                    margin-left: 20px;  
                    animation-name: fliegrein;
                    animation-duration: 2s;
                    animation-iteration-count: initial;
                } 

                .ueberschrift a {
                    color: black;
                    text-decoration: none;
                    animation-name: farbwechsel;
                    animation-duration: 25s;
                    animation-iteration-count: infinite;
                    animation-delay: 2s;
                }
                
                @media (min-width:470px) {
                    .ueberschrift {
                        font-size: 50px;
                    }            
                }

            .ueberschrift_bild {
                width: 30%;
            }

                .ueberschrift_bild img {
                    margin-top: 40px;
                }

            .taetigkeit_text {
                padding-right: 40px;
                padding-left: 20px;
            }

            .taetigkeit_bild img,
            .taetigkeit_bild video {
                    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.55);
            }

        @media (min-width:470px) {
            .taetigkeit {
                display: flex;
            }
    
                .taetigkeit_text {
                    width: 70%; 
                }
    
                .taetigkeit_bild{
                    width: 30%;
                }
        }
        .navigation {
            padding-left: 20px;
            list-style: none;
        }
    
        .navigation a {
            color:black;
            font-size: 150%;
        }

        .navigation a:hover{
            color: white;
            background-color: black;
            transition-property: all;
            transition-duration: 1s;

        }


        @media (min-width:470px) {
            .navigation a {
                font-size: 200%;
            }
        }


        .navigation .active a {
            font-weight: bold;
            color: lightgrey;
        }

        @keyframes schiebrein {
            0%{
                margin-left: -600px;
                opacity: 0;
            }
            100%{
                margin-left: 0px;
                opacity: 1;
            }
        }

        .navigation li {
            padding-right: 50px;
            padding-top: 10px;
            padding-bottom: 5px;
            width: 29%;
            animation-name: schiebrein;
            animation-duration: 2s;
            animation-iteration-count: initial;
        }

        @media (min-width:740px) {
            .navigation {
                display:flex;
            }
        
            .navigation a {
                font-size: 200%;
            }

        }

        @keyframes textflug{
            0%{
                margin-bottom: 1000px;
                opacity: 0;
            }
            100%{
                margin-bottom: 0px;
                opacity: 1;
            }

        }
        .warum {
            padding-right: 60px;
            padding-left: 20px;
            animation-name: textflug;
            animation-duration: 3s;
            animation-iteration-count: initial;
       }

        @keyframes rollrein {
            0%{
                margin-left: -1000px;
                opacity: 0;
            }
            100%{
                margin-left: 0px;
                opacity: 1;
            }

    }

    .maennchen {
        display: inline-block;
        padding-right: 30px;
        height: auto;
        animation-name: rollrein;
        animation-duration: 2s;
        animation-iteration-count: initial;

    }