.headline-container {
    padding-top: 8rem;
    padding-bottom: 1rem;
    background: var(--color-neutral);
    border-bottom: var(--border) solid var(--color);
    position: relative;
}
.headline-container.green {
    background: var(--color-green);
}
.headline-container.red {
    background: var(--color-red);
}
.headline-container.lilac {
    background: var(--color-lilac);
}
.headline-container .category {
    max-width: 200px;
}
.headline-container .headline-bereich {
    text-transform: none;
}
.button-back {
    width: 43px;
    height: 43px;
    padding: 0.3rem;
    background: var(--color-background);
    border: var(--border) solid var(--color);
    outline: none;
    box-shadow: none;
    border-radius: 0;
    position: absolute;
    right: 1.1rem;
    top: 5rem;
    cursor: pointer;
    transition: 0.2s ease-out all;
}
.button-back svg {
    width: 100%;
    height: auto;
}
.button-back svg path {
    stroke: var(--color);
    transition: 0.2s ease-out all;
}
@media screen and (min-width: 460px) { 
    .headline-container .category {
        max-width: 400px;
    }
}
@media screen and (min-width: 900px) { 
    .headline-container {
        padding-top: 10rem;
        padding-bottom: 1.4rem;
    }
    .button-back {
        right: 1.4rem;
        top: 5rem;
    }
    .button-back:hover {
        background: var(--color);
    }
    .button-back:hover svg path {
        stroke: var(--color-background);
    }
}
@media screen and (min-width: 1600px) { 
    .headline-container {
        padding-top: 12rem;
        padding-bottom: 2.4rem;
    }
}



.content-container {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.content-container img {
    width: 100%;
    height: auto;
}
.imagebox-desktop span {
    display: none;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1.4rem;
    row-gap: 1.4rem;
    margin-top: 1rem;
}
.imagebox-desktop > img {
    margin-bottom: 2rem;
}
.imagebox-desktop span img,
.imagebox-mobile img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.imagebox-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.4rem;
    row-gap: 1.4rem;
    margin-top: 3rem;
}

.short-info {
    margin-top: 1.4rem;
}
.description, h3.headline-box {
    margin-top: 3rem;
}
.description .button {
    text-decoration: none;
    margin-bottom: 2rem;
}
.description .button:hover {
    background: var(--color);
    color: var(--color-background) !important;
}
h3.headline-box {
    margin-bottom: 1rem;
}
.short-info span {
    white-space: nowrap;
}
.headline-box {
    text-transform: none;
    margin-top: 0;
}
.textbox p, .textbox ul, .textbox ol {
    margin-top: 1rem;
}
.textbox ul, .textbox ol {
    padding-left: 1.6rem;
}
.textbox a:hover {
    color: var(--color-red);
}
.green.textbox a:hover {
    color: #A4D045;
}
.lilac.textbox a:hover {
    color: var(--color-lilac);
}
@media screen and (min-width: 500px) { 
    .imagebox-mobile {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media screen and (min-width: 900px) { 
    .content-container {
        margin-top: 3rem;
        margin-bottom: 3rem;
        display: grid;
        column-gap: 1.4rem;
        row-gap: 1.4rem;
        grid-template-columns: 1fr 1fr;
    }
    .description, h3.headline-box {
        margin-top: 4rem;
    }
    h3.headline-box {
        margin-bottom: 1.4rem;
    }
    .imagebox-mobile {
        display: none;
    }
    .imagebox-desktop > img {
        margin-bottom: 0;
    }
    .imagebox-desktop span {
        display: grid;
    }
}
@media screen and (min-width: 1024px) { 
    .content-container {
        margin-bottom: 4rem;
        margin-bottom: 6rem;
    }
}
@media screen and (min-width: 1600px) { 
    .content-container {
        margin-top: 4rem;
        margin-bottom: 8rem;
        column-gap: 2rem;
        row-gap: 2rem;
    }
}


.teaser .button {
    text-decoration: none;
    margin-top: 3rem;
    margin-bottom: 0;
}
.teaser .button:hover {
    background-color: var(--color);
    color: var(--color-background)
}
.teaser {
    border-top: var(--border) solid var(--color);
    padding-top: 3rem;
}
@media screen and (min-width: 1024px) {
    .teaser {
        padding-top: 4rem;
    } 
}
@media screen and (min-width: 1200px) {
    .teaser {
        padding-top: 5rem;
    } 
}