
/* Allgemein */
.news {clear: left;}
.news h3 { color:#585b5d;}
.news img {max-width: 100%;}
a.read-more { display: block; border-radius: 4px; width: calc(100% - 30px); padding: 10px 0; text-align: center; background-color: #358dc1; color: #fff; margin: 20px 15px 0 15px;}
a.read-more:hover { color: #fff; }

/* Prio 1 */
.news-prio { width: 100%; float: left; background-color:#fff; margin-bottom:30px; padding: 15px 0; position: relative;}
.news-prio-head { float: left; width: 100%; padding-right: 15px;}
.news-prio h2 { float: left; font-size:22px; margin:0 0 13px 15px; width: 100%;}
.news-prio h3 { float:left; font-size:16px; margin:0 0 7px 15px;}
.news-prio .date { float:right; font-size:15px; margin: 0 0 7px 15px;}
.news-prio-text {padding: 10px 15px;}


/* Teaser */
.news-teaser { float: left; width: 100%; margin-bottom: 30px; overflow: hidden;}
.news-teaser h3 {margin-bottom: 2px;}
.news-teaser-text {background-color: #fff; padding: 0 10px 15px 10px; }
.news-teaser .date-day {font-size: 26px; width: 62px; border-radius: 50%; background-color: #fff; padding-top: 24px; position: relative; top: -30px; text-align: center; left: 50%; transform: translate(-50%,0); }
.news-teaser .date-day span {position: relative; top: -18px;}
.news-teaser .date {font-size: 15px; position: relative; margin-top: -52px; text-align: center; margin-bottom: 6px;}

/* Artikel */
.article .vorspann { font-weight: bold; }

/* Archiv und Ressort-News */
.news-archive {width: 100%; float: left; margin: 20px 0; }
.news-archive+.news-archive {margin-top: 30px;}
.news-archive .date {float: right; margin-left: 8px; font-size: 12px;}
.news-archive-image {float: left; margin-bottom: 10px; }

@media (min-width: 576px) {

    /* Teaser */
    .news-teaser-text {position: relative; top: 0; width: 100%; padding-bottom: 34px;}
    .news-teaser:hover .news-teaser-text { top: -43%; transition: top 400ms ease-out 100ms; }

    /* Archiv und Ressort-News */
    .news-archive h2 {font-size: 20px; }
    .news-archive-image {float: left; margin: 0 15px 0 0; }
    .news-archig


}

@media (min-width: 768px) {
    a.read-more { margin: 0; padding: 5px 0; border: 1px solid #758681; background-color: #fff; color: #758681 !important;}
    a.read-more:hover { background-color: #f4f6f5; }

    /* Prio 1 */
    .news-prio { padding: 15px 15px 0 0; }
    .news-prio-head {padding-right: 0;}
    .news-prio-image {float: left; margin-right: 15px;}
    .news-prio-text { display: table; padding: 0; height: 180px;}
    .news-prio .date { font-size:14px; }
    .news-prio a.read-more { float: right; width: 120px;}

    /* Teaser */
    .news-teaser {  width: 50%; padding-right: 15px; }
    .news-teaser:nth-of-type(even) {padding: 0 0 0 15px;}
    .news-teaser h2 { font-size: 21px; margin-bottom: 0;}
    .news-teaser-text { padding-bottom: 20px;}
    .news-teaser:hover .news-teaser-text { top: -46%; }
    .news-teaser a.read-more {width: 100px; margin-left: 50%; transform: translate( -50%, 0);}


}

@media (min-width: 992px) {

    a.read-more { font-size:13px; }

    /* Prio 1 */
    .news-prio-text {height: 136px;}
    .news-prio a.read-more {width: 100px;  }

    /* Teaser */
    .news-teaser { padding-right: 10px; }
    .news-teaser:nth-of-type(even) {padding: 0 0 0 10px;}
    .news-teaser h2 { font-size: 17px;}
    .news-teaser-text { font-size: 13px;}
    .news-teaser:hover .news-teaser-text { top: -44%; }
    .news-teaser a.read-more { padding: 3px 0;}

    /* Archiv und Ressort-News */
    .news-archive h2 {font-size: 22px; }
}

@media (min-width: 1200px) {


    a.read-more { font-size:14px; }

    /* Prio 1 */
    .news-prio h2 { font-size:24px; }
    .news-prio .date { font-size:15px; }
    .news-prio-text {height: 206px;}
    .news-prio a.read-more { width: 120px;  }

    /* Teaser */
    .news-teaser { padding-right: 15px;  }
    .news-teaser:nth-of-type(even) {padding: 0 0 0 15px;}
    .news-teaser h2 { font-size: 19px; }
    .news-teaser-text { width: 370px; font-size: 14px; padding: 0 15px 20px 15px; }
    .news-teaser:hover .news-teaser-text { top: -50%; }
    .news-teaser a.read-more { padding: 5px 0;}

}
