.mce-content-body.article-content { max-width: 720px; margin: auto; }

.article-content { font-family: KievitOT,sans-serif; }


/* GENERAL */
.article-content li, .article-content td, .article-content p { font-family: KievitOT,sans-serif; text-align: justify; color: #2d2d2d; font-size: 1.2rem; margin-bottom: 1.25rem; line-height: 1.8rem; font-weight: 400; margin-top: 0; }
.article-content a { color: #187add; font-weight: 500; position: relative; }
.article-content a::after { content: " "; bottom: 0; border-bottom: 0.1rem solid #187add; width: 0%; left: 0; position: absolute; transition: width 0.5s ease; }
.article-content a:hover { text-decoration: none; }
.article-content a:hover::after { width: 100%; transition: width 0.5s ease; }
.article-content strong { font-weight: 700; }
.article-content code { background: #1d1f21; color: #FFF; padding: 1rem 1.5rem; line-height: normal; display: block; width: fit-content; border-radius: 0.25rem; border: 0.1rem solid #191919; }
.article-content code span { color: #FFF; }
.article-content h2 { color: #242b34; font-size: 2.125rem; margin-bottom: 1.25rem; margin-top: 4rem; font-weight: 800; line-height: normal; position: relative; width:100%; width: calc(100% + 2rem); left: -1rem; }
.article-content h3 { font-size: 1.6rem; margin-top: 2rem; margin-bottom: 1rem; color: #083D77; font-weight: 300; line-height: normal; position: relative; width:100%; width: calc(100% + 2rem); left: -1rem; }
.article-content h4 { font-size: 1.4rem; font-weight: 800; color: #33475b; margin-top: 2rem; line-height: normal; width: calc(100% + 2rem); left: -1rem; position: relative; margin-bottom: 1rem; }

@media(max-width: 500px){ 
    .article-content h2 { width: 100%; left: 0; }
    .article-content h3 { width: 100%; left: 0; }
    .article-content h4 { width: 100%; left: 0; }
}
@media(max-width: 400px){
    .article-content h1 { }
    .article-content h2 { font-size: 1.9rem; line-height: 2rem; }
    .article-content h3 { font-size: 1.425rem; }
    .article-content h4 { font-size: 1.175rem; }
    .article-content ul { padding-left: 1rem; }
    .article-content li, .article-content td, .article-content p {font-size: 1.125rem; line-height: 1.5rem; }

}
@media(max-width: 300px){
    .article-content h1 {  }
    .article-content h2 { font-size: 1.75rem; }
    .article-content h3 { font-size: 1.325rem; }
    .article-content h4 { font-size: 1.075rem; }
    .article-content ul { padding-left: 1rem; }
    .article-content li, .article-content td, .article-content p {font-size: 1rem; line-height: 1.25rem; }
}

.article-content .article-btn { color: #cfab73; background-color: transparent; text-align: center; background: 0 0; border-color: #cfab73; transition: all .5s ease!important; font-size: 1.125rem; overflow: hidden; border: .2rem solid #cfab73; border-radius: 2rem; width: fit-content; padding: 1rem 3.5rem; position: relative; display: inline-block; font-weight: 500; border-width: .2rem; text-decoration: none; }
.article-content .article-btn:hover { padding-right: 4rem; padding-left: 3rem; transition: all .5s ease!important; }
.article-content .article-btn::before { content: " "; position: absolute; width: 4rem; transition: all .5s ease!important; border: .05rem solid #cfab73; top: 50%; transform: translateY(-50%); right: 80%; right: calc(100% - 4rem); opacity: 0; }
.article-content .article-btn::after { content: " "; border: .1rem solid #cfab73; position: absolute; width: .6rem; height: .6rem; top: 50%; transition: all .5s ease!important; right: 1.75rem; transform: translateY(-50%) rotate( 45deg ); border-left: none; opacity: 0; border-bottom: none; }
.article-content .article-btn:hover::before { opacity: 1; width: .75rem; right: 1.75rem; transition: all .5s ease!important; } 
.article-content .article-btn:hover::after { opacity: 1; transition: all .5s ease!important; } 


/* LISTS */
.article-content li { margin-bottom: 0; line-height: 1.75rem; }
.article-content ul { margin: 1.5rem 0; padding-left: 1.25rem; }
.article-content ul li { }
.article-content ol { margin: 1.5rem 0; padding-left: 1.25rem;}
.article-content ol li { }

/* LISTS IN LISTS */
.article-content ul > li > ul,
.article-content ul > li > ol,
.article-content ol > li > ul,
.article-content ol > li > ol
{ margin: 0.5rem 0; }

@media(max-width: 500px){
    .article-content .article-toc ul > li > ul { padding: 0 !important; }
    .article-content ul > li > ul,
    .article-content ul > li > ol,
    .article-content ol > li > ul,
    .article-content ol > li > ol
    { padding: 0 !important;  }
}


/* INHALTSVERZEICHNIS */
.article-content .article-toc { width: calc(100% + 6rem); position: relative; left: -3rem; background: #fbf4e9; margin-top: 2rem; margin-bottom: 2rem; padding: 0rem 1rem; border: 0.1rem solid #ded5c7; }
.article-content .article-toc h2 { font-size: 1.5rem; font-weight: 700; text-align: center; width: fit-content; margin: auto; left: 0; margin-top: 1rem; margin-bottom: 1rem; }
.article-content .article-toc > ul { margin-top: 0rem; padding: 0; }
.article-content .article-toc > ul > li > a { font-size: 1.125rem !important; }
.article-content .article-toc ul > li > ul { margin: 0; padding: 0rem 1.5rem; margin-bottom: 0.5rem; }
.article-content .article-toc ul { padding-left: 1.25rem; }
.article-content .article-toc ul li { text-align: left; }
.article-content .article-toc ul li a { font-size: 1.125rem; text-decoration: none; }

@media(max-width: 800px){
    .article-content .article-toc { width: 100%; left: 0;}
}


/* ZITAT */
.article-content blockquote { background: #fdf5e9; padding: 1rem 2rem; margin: 1rem 0rem; border-radius: 0.25rem; width: fit-content; border: 0.1rem solid #ece7e0;}
.article-content blockquote p { quotes: "\201E" "\201D"; font-style: italic; color: #383838; font-weight: 300; }
.article-content blockquote p:last-of-type { margin-bottom: 0; }
.article-content blockquote p::before { content: open-quote; }
.article-content blockquote p::after { content: close-quote; }


@media(max-width: 500px){
    .article-content blockquote { padding: 1rem !important; }
}
@media(max-width: 400px){
    .article-content blockquote { padding: 0rem !important; background: transparent !important; margin-top: 4rem !important; margin-bottom: 4rem !important; }
}

/* Bilder mit Caption */
.article-content figure { width: fit-content; margin: 0; border: 0.1rem solid #e2e2e2; border-radius: 0.25rem; }
.article-content figure img { margin: 0.5rem; }
.article-content figure figcaption { border-top: 0.1rem solid #e2e2e2; padding: 0.25rem 1rem; font-size: 1rem; font-weight: 500; background-color: #e6e6e6; color: #000; }

/* TABELLEN */
.article-content table { background-color: #fdf5e9; border: none; margin: 2rem 0rem; }
.article-content table caption { background-color: #f5ddbb; padding: 0.75rem 0.5rem; font-size: 1rem; font-weight: 500; text-align: left; color: #13110f; letter-spacing: 0.1rem; border-bottom: 0.3rem solid #e0c6a2; }
.article-content table caption::before { content: "\00BB"; margin-right: 0.5rem; }
.article-content table tbody { }
.article-content table tbody tr { }
.article-content table tbody tr td { border: 0.1rem solid #ecdfcb; padding: 0.5rem; }
.article-content table tbody tr:nth-child(even) { background-color: #FCEEDA; }
.article-content td p:last-of-type { margin: 0; }


.article-content .item-wi { width: calc(100% + 6rem); position: relative; left: -3rem; transition: transform .5s ease; background-color: #fbf4e9; padding: 1rem; padding-bottom: 0; margin-top: 3rem; margin-bottom: 3rem; border: 1px solid #ded4c3; border-radius: 0.25rem; }
.article-content .item-wi .wi-head { background-color: #FFF; padding: 1.5rem 2rem; border: 1px solid #DFC9A5; border-radius: 0.25rem; display: block; font-size: 1.4rem; color: #171717; }
.article-content .item-wi .wi-content { margin-top: 2rem; margin-bottom: 2rem; }
.article-content .item-wi:hover { transform: scale(1.025); transition: transform .5s ease; }

@media(max-width: 1098px){
    .article-content .item-wi { padding: 1rem; padding-bottom: 0; }
}

@media(max-width: 800px){
    .article-content .item-wi { width: 100%; left: 0; }
}
@media(max-width:768px){
    .article-content .item-wi { padding: 0.5rem; padding-bottom: 0; }
    .article-content .item-wi .wi-head { padding: 1rem; }

}
@media(max-width: 500px){
    .article-content .item-wi { padding: 0.5rem;  padding-bottom: 0;  }
    .article-content .item-wi .wi-content { line-height: 1.4rem !important; margin-top: 1.125rem; font-size: 1.125rem !important; }
    .article-content .item-wi .wi-head { font-size: 1.3rem; }
}
@media(max-width: 400px){
    .article-content .item-wi .what-is-cont p { line-height: 1.3rem !important; font-size: 1rem !important; }
    .article-content .item-wi .what-is-head { font-size: 1.25rem; padding: 0.5rem; }
}


.article-content .item-recommended { background-color: #fbf4e9; padding: 2.25rem 2.25rem; transition: transform .5s ease; border: 0.1rem solid #ece0ce; border-left: 0.75rem solid #cfab736b; margin-top: 1.5rem; margin-bottom: 1.5rem; display: block; line-height: normal; width: calc(100% + 6rem); position: relative; left: -3rem; border-top: 0.1rem solid #ece0ce; }
.article-content .item-recommended .recommended-heading { font-size: 1.25rem; margin-bottom: 0; font-weight: 500; color: #242b34; }
.article-content .item-recommended .recommended-link { font-size: 1.25rem; font-weight: 400; color: #187add; text-decoration: none; position: relative; }

.article-content .item-recommended:hover { transform: scale(1.025); transition: transform .5s ease; }
@media(max-width: 800px){
    .article-content .item-recommended { width: 100%; left: 0;}
}
@media(max-width: 500px){
    .article-content .item-recommended { padding: 2rem 1.25rem ;  }
    .article-content .item-recommended .recommended-link { line-height: 1.25rem; }
}
@media(max-width: 400px){
    .article-content .item-recommended .recommended-heading  { font-size: 1.125rem !important; margin-bottom: 0.15rem !important; letter-spacing: 0rem; }
    .article-content .item-recommended { padding: 2rem 1rem; border-left-width: 0.25rem; }
    .article-content .item-recommended .recommended-link { font-size: 1.125rem !important; }
}
@media(max-width: 300px){
    .article-content .item-recommended { padding: 2rem 0.5rem; border-left-width: 0; }
}


.article-content .item-cta { background-color: #f5ddbb; padding: 2.25rem 4rem; margin-top: 1.5rem; margin-bottom: 1.5rem; display: block; line-height: normal; border-left: 0.75rem solid #c69c58; }
.article-content .item-cta .cta-text { font-size: 1.5rem; text-align: left; font-weight: 600; line-height: 2rem; color: #171717; }
.article-content .item-cta .article-btn { border-color: #FFF; }
.article-content .item-cta .article-btn:hover { border-color: #FFF; }
.article-content .item-cta .article-btn::after { border-color: #FFF; }
.article-content .item-cta .article-btn::before { border-color: #FFF;}


.article-content .item-information.ii-big { position: relative; padding-top: 1.5rem; margin-top: 3rem; padding-bottom: 1.5rem; margin-bottom: 3rem; width: 100%; width: calc(100% + 10rem); left: -5rem; }
.article-content .item-information.ii-big::after { border-bottom: 0.2rem solid #ad884f; content: " "; position: absolute; bottom: 0; width: 12.5rem; left: 50%; transform: translateX(-50%); }
.article-content .item-information.ii-big::before { border-bottom: 0.2rem solid #ad884f; content: " "; position: absolute; top: 0; width: 22.5rem; left: 50%; transform: translateX(-50%); }
.article-content .item-information.ii-big .text { margin: 0; font-size: 2rem; line-height: 3rem; text-align: center; font-weight: 400; }

@media(max-width: 900px){
    .article-content .item-information.ii-big { width: 100%; left: 0; }
    .article-content .item-information.ii-big .text { font-size: 1.8rem; line-height: 2.5rem; }
}
@media(max-width: 500px){
    .article-content .item-information.ii-big::after { width: 100%; }
    .article-content .item-information.ii-big::before { width: 100%; }
}
@media(max-width: 400px){
    .article-content .item-information.ii-big .text { font-size: 1.5rem; line-height: 2rem; }
}
@media(max-width: 300px){
    .article-content .item-information.ii-big .text { font-size: 1.3rem; line-height: 1.8rem; }
}