/* ==========================

   NEWS – LISTENANSICHT

========================== */


.news-item {

    display: flex;

    gap: 20px;

    padding: 15px;

    border-bottom: 1px solid #444;

    background-color: #344955; /* dunkler Hintergrund */

    color: #fff;

    align-items: flex-start;

    border-radius: 0px;

	margin-bottom: 15px; /* 👈 Abstand zwischen News */
	
	border-left: 4px solid #f9aa33; /* 👈 Rand links */
	
	
	
}



.news-image img {

    width: 220px;   /* Listenbild klein */

    height: auto;

    object-fit: cover;

    border-radius: 0px;

    flex-shrink: 0;
	
	margin-top: 2px

}



.news-content {

    flex: 1;

}



.news-content h2 {

    font-size: 20px;

    margin: 0 0 5px 0;

    font-weight: bold;
	
	color: #1ed373;

}

.news-title {
    font-size: 16px;
    margin: 0 0 5px 0;
    font-weight: bold;
    color: #1ed373;
	text-decoration: none;
}

.news-title a {
    color: inherit;      /* übernimmt weiß */
    text-decoration: none;
}

.news-title a:hover {
    text-decoration: none;
}


.news-title a {
    text-decoration: none !important;
}



.news-date {

    font-size: 12px;

    color: #f9aa33;

    text-transform: uppercase;

    margin-bottom: 10px;

}



.news-content p {

    font-size: 16px;

    margin: 0;
	


}



.news-button {

    display: inline-block;

    background: #1ed373;

    color: #fff;

    padding: 8px 12px;

    text-decoration: none !important;

    margin-top: 10px;

    border-radius: 4px;

    font-size: 14px;

}



.news-button:hover {

    background: #ffff;
    color: #1ed373;

}



/* ==========================

   NEWS – DETAILANSICHT

   (gleiche Seite)

========================== */



.news-item.news-detail {

    align-items: flex-start;

}



/* Größeres, aber kontrolliertes Bild */

.news-item.news-detail .news-image img {

    width: 420px;      /* <- HIER Größe anpassen */

    max-width: 100%;

    height: auto;

    object-fit: cover;

}



/* Optional: etwas mehr Präsenz */

.news-item.news-detail .news-image img {

    box-shadow: 0 10px 30px rgba(0,0,0,0.5);

}



/* ==========================

   RESPONSIVE

========================== */



@media (max-width: 768px) {



    .news-item {

        flex-direction: column;

    }



    .news-image img,

    .news-item.news-detail .news-image img {

        width: 100%;

    }

}