.c-card-neuigkeit {
    position: relative;
    overflow: hidden;
    margin: 16px 0;
    cursor: pointer;
}

.c-card-neuigkeit__img {
    max-height: 313px;
}

.c-card-neuigkeit--hero {
    width: 100%;
    max-width: 100%;
    position: relative;
    margin-bottom: 1em;
    margin-top: 0.5em;
}

.c-card-neuigkeit__body {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.75);
    font-size: 13.6px;
    right: 2.8em;
    /*left: 1em;*/
    top: 2.8em;
    /*bottom: 2em;*/
    display: block;
    padding: 24px;
    overflow: hidden;
    max-width: 400px;
    padding-top: 0.1em;
}
.neuigkeit-item {
    max-width: 99%;
    margin-left: 0.5em;
}
.neuigkeit-date, .neuigkeit-headline {
    margin-bottom: 0.5em;
}
.neuigkeit-picture--list {
    max-width: 405px;
}
.neuigkeit-picture--list:hover {
    opacity: 0.8;
}
.neuigkeit-picture--detail {
    max-width: 100%;
}
.neuigkeit-detail--teaser {
    margin-bottom: -1em;
}

.c-card-neuigkeit__mainheadline {
    margin-bottom: 0.5rem;
}

.c-card-neuigkeit__headline {
    padding-bottom: 0.5rem;
    margin-bottom: 1px;
    margin-top: 0;
    font-size: 16px;
    color: #3F5FAC;
}

@media (max-width: 786px) {
    .c-card-neuigkeit--hero .c-card-neuigkeit__img {
        margin-bottom: 16px;
    }
    .c-card-neuigkeit--hero > .c-card-neuigkeit__body {
        position: relative;
        top: auto;
        left: auto;
        top: auto;
        bottom: auto;
        right: auto;
        padding: 0;
        font-size: 1rem;
        line-height: 1.6;
        padding: 12px;
        margin-top: -1em;
    }

    /* Flex box: Erst Schrift, dann Bild */
    .c-card-neuigkeit {
        display: flex;
        flex-flow: column;
    }
    .c-card-neuigkeit__body {
        order: 1;
        padding: 0 !important;
    }
    .c-card-neuigkeit__img {
        order: 2;
    }
    .c-card-neuigkeit__text {
        margin-bottom: 0.5em;
    }
}
.scale-animation {
    animation: 0.1s scaling forwards;
}

.scale-animation-backwards {
    animation: 0.1s scaling-back forwards;
}

.opacity-animation {
    animation: 0.1s blending forwards;
}

.opacity-animation-backwards {
    animation: 0.1s blending-back forwards;
}
/*animations*/
@keyframes scaling {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.8;
    }
}

@keyframes scaling-back {
    0% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}

@keyframes blending {
    0% {
        background-color: rgba(255, 255, 255, 0.75);
    }
    100% {
        background-color: rgba(255, 255, 255, 0.9);
    }
}

@keyframes blending-back {
    0% {
        background-color: rgba(255, 255, 255, 0.9);
    }
    100% {
        background-color: rgba(255, 255, 255, 0.75);
    }
}