/* Das Raster-Layout */
.news-grid {
    display: grid;
    /* Ermöglicht den Spalten, bei Platzmangel bis auf 100% zu schrumpfen */
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 40px;
    margin: 40px auto;
    text-align: center;
    
    /* Zentriert das Grid selbst und seine Spalten in der Mitte der Section */
    justify-content: center; 
    justify-items: center;   
    width: 100%;
}

/* Das einzelne News-Item absichern */
.news-item {
    width: 100%;             /* Nutzt die volle Breite der Grid-Spalte */
    max-width: 100%;         /* Verhindert, dass es jemals breiter als die Spalte/der Bildschirm wird */
    box-sizing: border-box;
    display: flex;           /* Flexbox hilft hier enorm bei der vertikalen Ausrichtung */
    flex-direction: column;
    align-items: center;     /* Zentriert alle Inhalte (Bild, h3, p) exakt in der Mitte des Items */
}

.news-item h3 {
    font-size: clamp(1.1rem, 4vw, 1.4rem); /* Macht die Überschrift dynamisch */
    color: #444; /* Dein Braun */
    margin: 15px 0 10px;
    
    /* Verhindert, dass lange Wörter den Rahmen sprengen */
    overflow-wrap: break-word;
    word-break: break-word;
}

.news-item p {
    font-size: clamp(0.9rem, 3.5vw, 1.05rem); /* Macht den Text dynamisch */
    line-height: 1.4;
    
    /* Verhindert das Rausragen bei extrem langen Wörtern wie "Begegnungsstätte" */
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Wir machen den Link-Container stabil und zentrieren IHN */
.circle-link {
    display: block;          /* Macht den Link zu einer stabilen Box */
    margin: 0 auto;          /* Zentriert den gesamten Link im News-Item */
    width: fit-content;      /* Sorgt dafür, dass der Link nur so breit ist wie das Bild */
    text-decoration: none;   /* Entfernt eventuelle Unterstreichungen */
}

/* Optimiert: Das Bild innerhalb des stabilen Links */
.circle-link img {
    /* Keine feste Höhe oder Breite */
    width: auto;
    height: auto;
    
    /* Begrenzung, damit sie nicht den Bildschirm sprengen */
    max-width: 300px; 
    max-height: 200px;

    /* Der Zauber-Effekt */
    border-radius: 50%;      /* Macht aus jedem Rechteck eine passende Ellipse */
    border: none;
    
    display: block;          /* Sorgt für saubere Abstände innerhalb des Links */
    object-fit: contain;     /* Zeigt das ganze Bild ohne Beschnitt */
    
    transition: transform 0.3s ease;
}

.circle-link:hover img {
    transform: scale(1.05);
}

/* Formatierung für Datum und Details */
.news-item p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #444;
}

/* -------------------------------------------------- */
/* 3. MOBIL-OPTIMIERUNG (Ganz unten!)                 */
/* -------------------------------------------------- */
@media (max-width: 768px) {
    .news-grid {
        /* Auf dem Handy wechseln wir von Grid zu Flexbox, 
           da Flexbox bei untereinander stehenden Elementen viel stabiler zentriert! */
        display: flex;
        flex-direction: column;
        align-items: center;     /* Zentriert die News-Items absolut mittig auf dem Bildschirm */
        justify-content: center;
        
        gap: 30px; /* Etwas kompakter auf dem Handy */
        margin: 20px auto;
        padding: 0;             /* Verhindert doppeltes Padding zum Container */
    }

    .circle-link img {
        /* Das Bild passt sich dynamisch an und wird nie breiter als das Handy-Display */
        max-width: min(220px, 80vw); 
        max-height: 150px;
    }

    .news-item h3 {
        min-height: auto; /* Auf dem Handy brauchen wir keine künstliche Höhe */
        margin-top: 15px;
    }
}