@charset "utf-8";
/* CSS Document */
/* Formatierung für Fliesstext Seitenmitte - Einspaltig, quer laufend */
/* Das flexible 2-Spalten-Raster */
.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Genau 2 Spalten nebeneinander */
    gap: 20px; /* Abstand zwischen den Kästen */
    width: 100%;
    margin: 20px 0;
}

/* Die einzelne Kachel (Eigener geschlossener Kasten) */
.news-card {
    background: #ffffff;
    border: 1px solid #e0e0e0; /* Dezenter, sauberer Rahmen */
    border-radius: 4px; /* Leicht abgerundete Ecken im modernen Webstil */
    overflow: hidden; /* Sorgt dafür, dass das Bild oben nicht über die Ecken ragt */
    display: flex;
    flex-direction: column; /* Bild oben, Text unten */
    box-shadow: 0 2px 5px rgba(0,0,0,0.04); /* Minimaler, edler Tiefenschatten */
    transition: transform 0.2s ease, border-color 0.2s ease;
}

/* Hover-Effekt beim Drüberfahren (analog zu professionellen Portalen) */
.news-card:hover {
    transform: translateY(-2px); 
    border-color: #0d47a1; /* Akzentfarbe beim Hovern */
}

/* Bereich für das Vorschaufoto */
.news-image-wrapper {
    width: 100%;
    height: 170px; /* Feste Höhe für einheitliche Kacheln */
    overflow: hidden;
    background-color: #f5f5f5;
}

.news-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Beschneidet das Foto automatisch perfekt ohne Verzerrungen */
}

/* Textbereich innerhalb des Kastens */
.news-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Datum / Kategorie über dem Titel */
.news-meta-top {
    font-size: 11px;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

/* Die Beitragsüberschrift */
h3.news-title {
    font-size: 15px;
    font-weight: bold;
    color: #000000;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

/* Der Vorschautext */
p.news-teaser {
    font-size: 13px;
    color: #444444;
    margin: 0 0 12px 0;
    line-height: 1.45;
    flex-grow: 1; /* Drückt den "weiter lesen"-Link immer bündig nach unten */
}

/* Link-Stil */
.news-link {
    font-size: 13px;
    font-weight: bold;
    color: #1976d2; /* Typisches Rennsport-Blau */
    text-decoration: none;
}

.news-link:hover {
    text-decoration: underline;
}

/* RESPONSIVE DESIGN: Automatische Einspaltigkeit auf Mobilgeräten */
@media (max-width: 768px) {
    .news-grid {
        grid-template-columns: 1fr; /* Schaltet bei Smartphones auf eine Spalte um */
        gap: 15px;
    }
}

/* ==========================================
   NEUE KATEGORIE B: Kachel ohne Foto
   ========================================== */
.news-card-no-img {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    /* Ein eleganter, blauer Akzentbalken oben fängt das fehlende Foto visuell auf */
    border-top: 4px solid #1976d2; 
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.news-card-no-img:hover {
    transform: translateY(-2px);
    border-color: #0d47a1;
}

/* ==========================================
   NEUE KATEGORIE C: Foto & Titel nebeneinander
   ========================================== */
.news-card-split {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 15px; /* Padding hier direkt auf der Kachel für das Innenraster */
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.news-card-split:hover {
    transform: translateY(-2px);
    border-color: #0d47a1;
}

/* Flexbox-Kombination für den oberen Split-Bereich */
.news-split-top {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    width: 100%;
}

/* Kleiner quadratischer Bild-Rahmen links */
.news-image-small-wrapper {
    width: 80px;   /* Feste Breite für das quadratische Vorschaubild */
    height: 80px;  /* Feste Höhe */
    flex-shrink: 0; /* Verhindert, dass das Bild zusammengedrückt wird */
    margin-right: 15px;
    border-radius: 4px;
    overflow: hidden;
    background-color: #f5f5f5;
}

/* Titel-Wrapper rechts daneben nimmt den restlichen Platz ein */
.news-title-wrapper {
    flex-grow: 1;
}

/* Unterer Bereich für den fließenden Teaser-Text */
.news-content-bottom {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}