/* ============================================= */
/* STILE FÜR NEWS-KACHEL AUF DER STARTSEITE      */
/* ============================================= */
 

/* Container für die Vorschau auf der Startseite */
#news-grid-home .news-vorschau {
    display: flex; /* Aktiviert Flexbox für die Nebeneinander-Anordnung */
    align-items: center; /* Zentriert die Elemente vertikal für ein sauberes Layout */
    gap: 20px; /* Fügt einen Abstand zwischen Bild und Text hinzu */
    text-align: left; /* Text linksbündig ausrichten */
    padding: 20px; /* Innenabstand für die Kachel */
}

/* Erzwingt eine maximale Höhe für die News-Kachel auf der Startseite */
#news-grid-home .news-item-wrapper {
    height: 280px; /* Feste Höhe: 180px Bild + 2x 20px Innenabstand */
    overflow: hidden; /* Versteckt überlaufenden Inhalt, der über die max-height hinausgeht */
}
  
#news-grid-home .news-vorschau-bild {
    flex-shrink: 0; /* Verhindert, dass das Bild schrumpft */
    width: 180px; /* Feste Breite für das Element */
    height: 180px; /* Feste Höhe für das 1:1-Format */
    object-fit: cover; /* Verhindert Verzerrung */
    border-radius: 10px; /* Abgerundete Ecken */
    margin-top: -70px;
}
  
#news-grid-home .news-vorschau-text {
    flex: 1; /* Der Text nimmt den restlichen verfügbaren Platz ein */
    position: relative; /* Wichtig für den "Mehr erfahren"-Link */
    align-self: stretch; /* Dehnt den Text-Container auf die volle Höhe */
}

#news-grid-home h3 {
    font-size: 1.6rem; /* Größere, auffälligere Schrift */
    text-align: left; /* Überschreibt die Zentrierung aus styles.css */
    border-bottom: 1px solid #e0e0e0; /* Dezente Trennlinie */
    padding-bottom: 10px; /* Abstand zwischen Text und Linie */
    margin-bottom: 10px; /* Abstand zwischen Linie und Datum */
    margin-top: 0;
}
  
#news-grid-home .vorschau_html {
    margin: 0; 
    padding-bottom: 10px; /* Platz für den Link schaffen */
}

#news-grid-home .weiterlesen {
    position: absolute; /* Absolut positionieren */
    right: 0; /* Rechtsbündig im Text-Container */
    bottom: 0; /* Unten im Text-Container */
    font-weight: bold;
    color: var(--color-secondary, #555);
    transition: color 0.2s ease;
}


/* Da es kein <summary> ist, wird der Hover auf das Elternelement .news-item gesetzt */
#news-grid-home .news-item:hover .weiterlesen {
    color: var(--color-secondary-hover, #45a049);
}

/* ============================================= */
/* RESPONSIVE ANPASSUNGEN (MOBILE)             */
/* ============================================= */
@media (max-width: 768px) {
    #news-grid-home .news-item-wrapper {
        max-height: none; /* Höhenbeschränkung aufheben */
    }

    #news-grid-home .news-vorschau {
        flex-direction: row; /* Bild links, Text rechts */
        gap: 15px; /* Ein kleinerer Abstand für die mobile Ansicht */
        padding: 15px; /* Innenabstand für die gesamte Kachel */
        align-items: flex-start; /* Oben bündig ausrichten */
    }

    #news-grid-home .news-vorschau-bild {
        margin-top: 70px;
        width: 100px; /* Kleinere, feste Breite für das Bild */
        height: 100px; /* Kleinere, feste Höhe für das Bild */
        border-radius: 8px; /* Alle Ecken abrunden */
    }
    
    #news-grid-home .news-vorschau-text {
        padding: 0; /* Padding wird jetzt vom .news-vorschau übernommen */
    }

    #news-grid-home h3 {
        font-size: 1rem; /* Etwas kleinere Schriftgröße für den Titel */
        border-bottom: none; /* Entfernt die Desktop-Trennlinie */
        padding-bottom: 0; /* Entfernt den Abstand der Trennlinie */
        margin-bottom: 1px; /* Reduzierter Abstand zum Datum */
        margin-top: 0;
        margin-left: -110px; /* Verschiebt das Element nach links */
        width: calc(80% + 100px); /* Erweitert die Breite, um den verschobenen Platz auszugleichen */
    }

    #news-grid-home .vorschau_html {
        font-size: 0.5rem !important; /* Kleinere Schrift für den Vorschautext */
        line-height: 1;
        padding-bottom: 5px; /* Ausreichend Platz für den "Mehr erfahren"-Link */
    }

    #news-grid-home .weiterlesen {
        right: 0;
        bottom: 0;
    }
}