*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Glacial-Indifference', sans-serif;
    color: #191919;
    background-color: #fff2eb;
}

.title-section{
    color: #fff2eb;
    background-color: #d10a14;
    padding: 11em 2em 5em 2em;
}

.title-section h1{
    font-family: 'Dela Gothic One', 'Glacial-Indifference', sans-serif;
    font-size: 1.5rem;
    line-height: 1.4;
}

.title-section h3{
    font-weight: 100;
    margin-top: 1em;
}

.reading-section{
    padding: 2em;
}

.reading-section h3{
    margin-top: 1em;
}

.reading-section p{
    margin-top: .3em;
    line-height: 1.3;
}

.mobile-side-section{
    padding: 2em;
}

.mobile-side-section-kontakt p, .mobile-side-section-kontakt a{
    display: block;
    margin-top: .7em;
}

.mobile-side-section-kontakt p:nth-child(2), .mobile-side-section-kontakt p:nth-child(3){
    border: 1px solid #191919;
    border-radius: 2px;
}

.mobile-side-section-kontakt a{
    border: 1px solid #d10a14;
    border-radius: 2px;
    color: #fff2eb;
    background-color: #d10a14;
    text-decoration: none;
}

.mobile-side-section-kontakt p:nth-child(2), .mobile-side-section-kontakt p:nth-child(3), .mobile-side-section-kontakt a{
    padding: .7em 1.5em;
}

.mobile-side-section-social-media{
    margin-top: 2em;
}

.mobile-side-section-social-media p:first-child{
    padding-bottom: .7em;
}

.mobile-side-section-social-media a{
    color: #191919;
    text-decoration: none;
}

.mobile-side-section-social-media i{
    font-size: 3rem;
}

.mobile-side-section-social-media #insta-name{
    display: inline-block;
    transform: translateY(-50%);
    padding-left: .3em;
}

.naechster-blog{
    margin-top: 2em;
    padding: 3em 2em;
    background-color: #191919;
}

.naechster-blog > h3{
    color: #fff2eb;
}

.blog-box{
    background-color: #fff2eb;
    margin: 2em 0px;
    padding: 1.5em;
    border-radius: 2px;
}

.blog-box .position-und-datum{
    font-size: .8rem;
    font-weight: 200;
    display: flex;
    justify-content: space-between;
    margin-top: .5em;
}


.blog-box .thema{
    padding: .5em 2em;
    color: #fff2eb;
    background-color: #d10a14;
    display: inline-block;
    margin: 2em 0em;
    border-radius: 2px;
}

.blog-box .beitrag-title{
    font-family: 'Dela Gothic One', sans-serif;
    font-size: 1.1rem;
    padding-bottom: 1.5em;
}

.blog-box .beitrag-cta{
    border-top: 1px solid #191919;
}

.blog-box .beitrag-cta a{
    font-weight: 100;
    position: relative;
    display: flex;
    padding: 2em;
    justify-content: center;
    align-items: center;
    color: #191919;
    text-decoration: none;
    z-index: 99;
}

.blog-box .beitrag-cta i{
    color: #fff2eb;
    background-color: #d10a14;
    margin-left: .5em;
    padding: 15px;
    border-radius: 50%;
}

/* Mediaqueries */
@media(min-width: 1200px){

    .article-section{ /* EVTL BEI KLEINEREN MEDIAQUERIES EINFÜGEN */
        display: flex;
    }

    .title-section {
        padding: 15em 4em 5em 4em;
    }

    .title-section h1 {
        font-size: 2.4rem;
    }

    .reading-section {
        padding: 3.5em 64px 4em 64px;
        width: 70%;
        font-size: 1.2rem;
        line-height: 1.4;
    }

    .mobile-side-section {
        padding: 65px 2.5em;
        width: 30%;
    }

    .naechster-blog{
        padding: 3em 64px;
    }

    .naechster-blog > h3{
        font-size: 22.464px;
    }

    .blog-box{
        padding: 3,5em 3em;
        padding-bottom: 0em;
    }

    .blog-box .beitrag-title{
        font-size: 1.4rem;
    }

    .blog-box .beitrag-cta{
        font-size: 1.4rem;
    }

    .blog-box .beitrag-cta i{
        padding: 12px 15px;
        width: 45px;
        height: 45px;
    }

}


@media(min-width: 1400px){
    
    .title-section {
        padding: 15em 5em 5em 5em;
    }

    .title-section h1 {
        font-size: 2.6rem;
    }
      
    .title-section h3 {
        font-size: 1.7rem;
    }

    .reading-section {
        padding: 4em 2em 4em 4em;
        width: 70%;
        font-size: 1.2rem;
        line-height: 1.4;
    }
      
    .reading-section h3 {
        margin-top: 1.8em;
        font-size: 1.8rem;
    }
    
    .reading-section > p{
        margin-top: .3em;
    }

    .einführung-artikel{
        margin-top: 0em !important;
    }

    .mobile-side-section {
        padding: 4em 2.5em;
    }

    .naechster-blog{
        padding: 3em 76.8px;
    }

    .naechster-blog > h3{
        font-size: 1.8rem;
    }

    .blog-box{
        padding: 3em 4em;
        padding-bottom: 0em;
    }

    .blog-box .autor{
        font-size: 1.5rem;
    }

    .blog-box .position-und-datum{
        font-size: 1.1rem;
    }

    .blog-box .thema{
        font-size: 1.3rem;
    }

    .blog-box .beitrag-title{
        font-size: 1.8rem;
    }

    .blog-box .beitrag-cta{
        font-size: 1.5rem;
    }

    .blog-box .beitrag-cta i{
        padding: 12px 16px;
        width: 50px;
        height: 50px;
    }

}

@media(min-width: 1700px){

    .title-section {
        padding: 20em 5em 5em 8em;
    }

    .title-section h1 {
        font-size: 3.2rem;
    }

    .title-section h3 {
        font-size: 1.6rem;
    }

    .reading-section {
        padding: 6em 2em 4em 128px;
    }

    .mobile-side-section {
        padding: 120px 4.5em 0em 6em;
    }

    .reading-section {
        font-size: 1.3rem;
        line-height: 1.5;
    }

    .naechster-blog{
        padding: 5em 128px;
    }

    .blog-box .beitrag-title {
        font-size: 2.2rem;
    }

}