/**
 * FINALER CSS-CODE FÜR TYPO3 EXT:NEWS (ID #c2179)
 * - Feste Kachelgröße: 430px Breite x 570px Höhe
 * - Permanentes blaues Overlay auf den Bildern
 * - Text-Hover-Effekte bleiben
 * - Teasertext auf 2 Zeilen begrenzt
 * - Schriftart Roboto
 * - Abstand zwischen Kacheln: 15px
 * - Header und Teaser 50px nach unten verschoben
 * - Abgerundete Ecken korrekt für Bild, Overlay und Container
 */

/* --------------------------------------------------------
 * TEIL 1: OVERLAY UND BILDER
 * -------------------------------------------------------- */

#c2179 .news-img-wrap {
    background: transparent !important;
    border-radius: 10px !important; /* Container abgerundet */
    overflow: hidden;
}

#c2179 .news-img-wrap a::before,
#c2179 .news-img-wrap a::after {
    content: '';
    opacity: 0 !important;
    background: transparent !important;
    transition: none !important;
}

#c2179 .news-img-wrap a {
    position: relative;
    display: block;
    background-color: rgba(0, 123, 255, 0.7) !important;
    transition: none !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 10px !important; /* Overlay abgerundet */
}

#c2179 .news-img-wrap a:hover {
    background-color: rgba(0, 123, 255, 0.7) !important;
}

#c2179 .news-img-wrap a img,
#c2179 .news-img-wrap picture {
    opacity: 1 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 10px !important; /* Bild abgerundet */
}

/* --------------------------------------------------------
 * TEIL 2: ARTIKEL-KACHEL (FESTE GRÖSSE)
 * -------------------------------------------------------- */

#c2179 .article {
    width: 430px !important;
    height: 500px !important;
    max-width: 430px !important;
    max-height: 500px !important;
    overflow-y: auto !important;
    background-color: transparent !important;
    border: none !important;
    transition: none !important;
    position: relative;
    z-index: 0;

    /* Abstand zwischen den Kacheln */
    margin: 7.5px !important; /* 7.5px rundherum = 15px Gesamt */
}

#c2179 .article:hover {
    background-color: transparent !important;
}

#c2179 .article .container.newsItem {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 !important;
}

/* --------------------------------------------------------
 * TEIL 3: TEASERTEXT BEGRENZUNG (2 Zeilen)
 * -------------------------------------------------------- */

#c2179 .article .teaser-text div[itemprop="description"] p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; 
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* --------------------------------------------------------
 * TEIL 4: SCHRIFTART
 * -------------------------------------------------------- */

#c2179,
#c2179 .article * {
    font-family: 'Roboto', sans-serif !important;
}

/* --------------------------------------------------------
 * TEIL 5: INDIVIDUELLE FARBGESTALTUNG (TEXT-Farben)
 * -------------------------------------------------------- */

#c2179 .article h3 { color: #ffffff !important; }
#c2179 .article .teaser-text p { color: #ffffff !important; }
#c2179 .news-list-date time { color: #ffffff !important; }
#c2179 .article .moreLink a { color: #ffffff !important; }

#c2179 .article:hover h3 { color: #ffffff !important; }
#c2179 .article:hover .teaser-text p { color: #ffffff !important; }
#c2179 .article:hover .news-list-date time { color: #ffffff !important; }
#c2179 .article:hover .moreLink a { color: #ffffff !important; }

/* --------------------------------------------------------
 * TEIL 6: FLEX / ZENTRIERUNG DER KACHELN
 * -------------------------------------------------------- */

#c2179 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* --------------------------------------------------------
 * TEIL 7: HEADER UND TEASER NACH UNTEN VERSCHIEBEN
 * -------------------------------------------------------- */

#c2179 .article .newsContentDescription {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 60px !important; /* Header + Teaser 50px nach unten */
}

#c2179 .article .newsContentDescription h3,
#c2179 .article .newsContentDescription .teaser-text {
    margin-top: 0 !important; /* Margin wird vom padding-top des Containers gesteuert */
}