/*******************************************************
 *      Responsive-Styles max 768px für Newsportal     *
 *******************************************************/

@media (max-width: 768px) {

    #top-header .location,
    #top-header .date {
        display: none;
    }

    #top-header #search-toggle {
        margin-left: 0;
    }

    #searchform {
        width: 80%;
        padding-left: 10%;
        padding-right: 10%;
        text-align: center;
    }

    #header-logo {
        height: 80px;
        margin-left: 20px;
    }

    #header-sublogo {
        display: block;
        float: none;
        position: static;
        text-align: right;
        height: 35px;
    }

    #navi-toggle {
        display: block;
    }

    nav#main-navigation {
        display: none;
        position: absolute;
        left: 0;
        padding-bottom: 30px;
        background-color: #ffffff;
        border-bottom: 5px solid #dddddd;
    }

    nav#main-navigation ul li {
        display: block;
        padding: 5px 20px;
    }

    nav#main-navigation ul li a {
        display: inline-block;
        width: 100%;
        padding: 5px 0;
        font-size: 18px;

    }

    .archive-posts.header-slider article h1 {
        font-size: 24px;
        bottom: 10px;
    }

    .archive-header h1 {
        display: block;
    }

    main.startseite .header-part {
        grid-template-columns: 1fr;
    }

    .archive-posts.header-slider article p.teaser {
        display: none;
    }

    .archive-posts:not(.header-slider) article,
    .next-article article {
        height: 200px;
        border-radius: 2px;
    }

    .next-article article.mediengruppe-news-taltv {
        height: 350px;
    }

    .archive-posts:not(.header-slider) article .image,
    .next-article article .image {
        height: calc(100% - 85px);
    }

    .archive-posts:not(.header-slider) article .content,
    .next-article article .content {
        padding-top: 10px;
    }

    .archive-posts:not(.header-slider) article h1,
    .next-article article h1 {
        min-height: 60px;
        font-size: 16px;
        margin-bottom: 10px;
    }

    /* Kachel Mediengruppe */
    article.mediengruppe-news a.link-meldung:not(.link-0):not(.link-1) {
        display: none;
    }

    .singlepage .singlepage-content,
    .page .content,
    .searchpage .content {
        padding-left: 0;
        padding-right: 0;
    }

    .singlepage .singlepage-content .weiter-box .next-article-raster .next-article  {
        grid-column: span 3;
    }

    .singlepage .singlepage-content .weiter-box .next-article-raster .next-article:last-of-type  {
        grid-column: span 6;
    }


    .singlepage .kommentar-box {
        grid-column: span 4;
    }

    .singlepage .social-box {
        grid-column: span 4;
    }

    /* Werbebanner */
    main.startseite .anzeigen-box.anzahl-4 .anzeigen-banner {
        width: calc(48% - 2px);
    }

    .anzeigen-box-horizontal.anzahl-8 .anzeigen-banner  {
        width: calc(22% - 2px);
        margin-left: 1%;
    }

    .anzeigen-box-horizontal.anzahl-6 .anzeigen-banner  {
        width: calc(28% - 2px);
        margin-left: 1%;
        margin-right: 1%;
    }

}

@media (max-width: 500px) {
    .archive-posts:not(.header-slider) article,
    .next-article article {
        height: 130px;
        border-radius: 2px;
    }

    .next-article article.mediengruppe-news-taltv {
        height: 250px;
    }

    .archive-posts:not(.header-slider) article .image,
    .next-article article .image {
        height: calc(100% - 65px);
    }

    .archive-posts:not(.header-slider) article h1,
    .next-article article h1 {
        min-height: 40px;
        font-size: 12px;
    }

    article.mediengruppe-news .mediengruppe-news-title {
        padding: 5px 10px;
        margin-bottom: 10px;
    }

    article.mediengruppe-news .mediengruppe-news-title p {
        font-size: 10px;
        line-height: 12px;
    }

    article.mediengruppe-news .mediengruppe-news-logo {
        height: 25px;
    }

    article.mediengruppe-news a.link-meldung {
        padding: 0 10px;
        margin-bottom: 5px;
    }

    article.mediengruppe-news a.link-meldung .label {
        font-size: 10px;
        width: 100%;
        font-weight: 300;
    }

    article.mediengruppe-news a.link-meldung .icon {
        display: none;
    }

    article.mediengruppe-news-taltv .iframe-outer-box {
        top: 50px;
    }
}