/* ==========================================================================
   view-news
   ========================================================================== */
.view-news .view-content{
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 30px;
    justify-content: space-between;
}
.view-news .view-content .views-row{
    width:clamp(300px, 31%, 410px);
    font-size: 80%;
    background: var(--bg-weak);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: clip;
}
.view-news .view-content .views-row .news-image{
    width:100%;
    height: auto;
    max-width: 410px;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    padding: 0;
    aspect-ratio: 415/230;
    margin: 0;
    overflow: hidden;
}
.view-news .view-content .views-row .news-image img{
    width:100%;
    height: auto;
}
.view-news .view-content .views-row .date{
    font-size: 0.7rem;
    padding: 0 1rem;
    margin: 0.5em 0 0;
}
.view-news .view-content .views-row .news-title{
    margin: 0.5em 0 1em;
    font-size: 1.1rem;
    line-height: 1.25em;
    padding: 0 1rem;
    hyphens: auto;
}
.view-news .view-content .views-row .news-text{
    margin: .35rem 0 0 0;
    color: var(--muted);
    line-height: 1.45em;
    font-size: 0.8rem;
    padding: 0 1rem 1rem;
}
.view-news .view-footer .button{
    max-width: max-content;    
    margin: 2rem 0 1rem auto;    
}
.view-news .view-footer .button a{
    border: var(--border);
    border-radius:5px;
    padding: 0.5em 0.75em;
    color: var(--dark);
    transition: var(--trans-all);
    box-shadow: var(--shadow);
}
.view-news .view-footer .button:hover a{
    border-color: var(--main);
    background-color: var(--main);
    transition: var(--trans-all);
    color: var(--pagebg);    
}
/* ==========================================================================
   News Inhaltselemente
   ========================================================================== */
main,
.news-content{
    width: 100%;
}
.date{
    font-size: 0.8rem;
    margin-bottom: 1em;
}
.subheadline{
    font-weight: 600;
    margin-bottom: 1em;
    line-height: 1.4em;
}
.body{
    margin-bottom: 50px;
    float: left;
    width: 100%;
}
.body .news-image{
    float: left;
    margin: 0 25px 25px 0;
}
.inhaltselemente{
    clear: both;
}
.inhaltselemente > .paragraph:not(.paragraph--type--bilderslider){
    margin-bottom: 50px;
}
.back a{
    display: flex;
    justify-content: right;
    font-size: 0.8rem;
    color: var(--dark);
}
@media (max-width:1095px){
    .view-news .view-content{
    justify-content: left;
    }
}
@media (max-width:768px){
    .view-news .view-content{
        justify-content:center;
    }
    .view-news .view-footer .button{
        margin: 2rem auto 1rem;
    }
}