.cosmos {
    text-align: center;
    color: #fff;
    margin-top: 0px;
    margin-bottom: 0px;
    overflow: hidden;
    background-color: #2e0552;
    word-wrap: break-word
}

.cosmos h2 {
    font-size: 59px;
    font-weight: 300
}

.cosmos h3 {
    font-size: 30px
}

.cosmos p {
    font-size: 18px;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    font-weight: 400;
    color: #fff;
}

.cosmos .cosmos__btn {
    letter-spacing: 1px;
    background: linear-gradient(0deg, #2eaede, #21b9d2);
    border: 2px solid #2eaede;
    padding: 15px 23px;
    border-radius: 8px;
    color: #fff;
    font-size: 22px;
    text-decoration: none;
    transition: .3s
}

.cosmos .cosmos__btn:hover {
    background: transparent;
    border: 2px solid #fff
}

.cosmos .cosmos__section {
    padding: 50px 0;
    background-position: 50%;
    background-repeat: no-repeat;
    margin: 0
}

.cosmos .cosmos__section div {
    z-index: 1
}

.cosmos .cosmos__section .cosmos__header {
    padding: 100px 0 30px
}

.cosmos .cosmos__section .cosmos__reverse {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse
}

.cosmos .cosmos__1 {
    background-image: url(/images/kosmos/milchstrasse-JPEG.jpg);
    background-size: 60% auto
}

.cosmos .cosmos__2 {
    position: relative
}

.cosmos .cosmos__2 .cosmos__background {
    position: absolute;
    width: -moz-fit-content;
    width: fit-content;
    left: 50%;
    transform: translate(-50%)
}

.cosmos .cosmos__2 .cosmos__astronaut {
    position: relative;
    height: 650px;
    padding: 170px 0
}

.cosmos .cosmos__4 {
    background-image: url(/images/kosmos/hintergrund_5.jpg);
    padding-bottom: 100px;
    background-size: cover;
    position: relative
}

.cosmos .cosmos__4 .cosmos__box4 {
    padding: 100px 0
}

.cosmos .cosmos__box {
    position: relative;
    min-height: 250px
}

.cosmos .cosmos__box img {
    position: absolute;
    left: 50%;
    transform: translate(-50%)
}

.cosmos .cosmos__box .planet_1, .cosmos .cosmos__box .planet_2 {
    width: 150px
}

.cosmos .cosmos__box .chat {
    width: 106px
}

.cosmos .cosmos__box .social_media {
    top: 300px;
    width: 60px
}

.cosmos .cosmos__box .email {
    width: 140px
}

.cosmos .cosmos__box .zahnraeder {
    top: 300px;
    width: 80px
}

.cosmos .cosmos__box .astronaut_1 {
    width: 180px;
    left: 50%;
    transform: translate(-50%);
    opacity: 0
}

.cosmos .cosmos__box .asteroid_3 {
    width: 350px;
    z-index: 0
}

.cosmos .cosmos__box .asteroid_4 {
    width: 100px
}

.cosmos .cosmos__box .asteroid_5 {
    width: 150px
}

.cosmos .cosmos__box .rakete {
    width: 250px
}

.cosmos .cosmos__box .astronaut_2 {
    width: 500px;
    left: 0;
    top: -50px
}

.cosmos .cosmos__box .planet_3 {
    width: 120px;
    top: -200px
}

.cosmos .cosmos__box .alien-1 {
    left: 0;
    width: 150px;
    top: -200px
}

@media (min-width:991px) {
    .cosmos .cosmos__section .cosmos__header {
        padding: 100px 0
    }

    .cosmos .cosmos__section .cosmos__reverse {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .cosmos .cosmos__2 {
        position: relative
    }

    .cosmos .cosmos__2 .cosmos__background {
        position: absolute;
        width: calc(100% + 30px);
        left: -15px;
        transform: translate(0)
    }

    .cosmos .cosmos__2 .cosmos__astronaut {
        position: relative;
        min-height: 850px
    }

    .cosmos .cosmos__4 .cosmos__box4 {
        padding: 140px 0
    }

    .cosmos .cosmos__box .planet_1 {
        width: 200px
    }

    .cosmos .cosmos__box .planet_2 {
        width: 150px
    }

    .cosmos .cosmos__box .chat {
        width: 146px
    }

    .cosmos .cosmos__box .social_media {
        top: 300px;
        width: 80px
    }

    .cosmos .cosmos__box .email {
        width: 198px
    }

    .cosmos .cosmos__box .zahnraeder {
        top: 389px;
        width: 120px
    }

    .cosmos .cosmos__box .astronaut_1 {
        width: 280px;
        left: 50%;
        transform: translate(-50%)
    }

    .cosmos .cosmos__box .asteroid_3 {
        width: 500px
    }

    .cosmos .cosmos__box .asteroid_4 {
        width: 200px
    }

    .cosmos .cosmos__box .asteroid_5 {
        width: 250px
    }

    .cosmos .cosmos__box .rakete {
        width: 400px
    }

    .cosmos .cosmos__box .astronaut_2 {
        width: 700px;
        left: 0;
        top: -100px
    }

    .cosmos .cosmos__box .planet_3 {
        width: 170px
    }

    .cosmos .cosmos__box .alien-1 {
        left: 0;
        width: 200px
    }
}