/****************************************************
 *  Gemeinden PAGE
 ****************************************************/

/* Seite - die Haupt-Container-Klasse für die ganze Community-Seite */
.community-page {
    max-width: 75rem;/* Maximalbreite des Containers, verhindert, dass die Seite zu breit wird */
    margin: 2.5rem auto 5rem; /* Oben: 2.5rem Abstand, automatisch horizontal zentriert, unten: 5rem Abstand */
    padding: 0 1.25rem;/* Innenabstand links und rechts 1.25rem, oben/unten 0 */
}

/* Hero Bereich - oberer Abschnitt */
.community-hero {
    background: #eef7f1;
    border-radius: 2rem;
    padding: 2.5rem;/* Innenabstand rundherum */
    display: grid;/* Grid-Layout für die Unterelemente */
    grid-template-columns: 1fr 1fr; /* Zwei Spalten mit gleicher Breite */
    gap: 1.875rem;/* Abstand zwischen den Grid-Spalten */
}

/* Text im Hero-Bereich */
.community-text h1 {
    color: #2d5b3a;
}


/* Info Box - kleine Boxen für Hinweise oder Infos */
.community-info-box {
    margin-top: 1.25rem;/* Abstand nach oben zur vorherigen Sektion */
    background: white;/* Weißer Hintergrund */
    border-left: 0.25rem solid #5ca174; /* Grüner Streifen links */
    border-right: 0.25rem solid #5ca174; /* Grüner Streifen rechts */
    padding: 1rem;/* Innenabstand rundherum */
    border-radius: 0.75rem;/* Abgerundete Ecken */
}

/* Bilder für die Gemeinden */
.community-image {
    height: 20rem;/* Höhe der Bilder */
    border-radius: 1.5rem;/* Abgerundete Ecken */
    background-position: center;/* Bild zentrieren */
    background-size: cover;/* Bild vollständig ausfüllen, ohne Verzerrung */
    background-repeat: no-repeat; /* Bild wird nicht wiederholt */
    align-self: center;

}

.haslau-image {
    background-image: url("../images/Haslau.png");
    background-position: center center; /* horizontal und vertikal zentrieren */
    background-size: cover; /* oder contain, je nachdem was du willst */
    background-repeat: no-repeat;
}

.hohenau-image {
    background-image: url("../images/Hohenau.png");
}

/* Datenbereich - z.B. Statistiken oder Infos in Karten */
.community-data {
    text-align: center; /* Text zentrieren */
    margin-top: 3.75rem;/* Abstand nach oben */
}

.community-data h2 {
    color: #5ca174; /* Farbe der Überschrift im Datenbereich */
}

/* Grid für die einzelnen Datenkarten */
.data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem,1fr)); /* Flexible Spalten, min 15rem */
    gap: 1.25rem;/* Abstand zwischen den Karten */
}

/* Einzelne Datenkarten */
.data-card {
    background: white;
    padding: 1.25rem;/* Innenabstand */
    border-radius: 1rem;
}

.data-card h3 { /* Überschrift in den einzelen Karten */
    color: #284d34;
}

/* Responsive - Anpassungen für kleinere Bildschirme */
@media (max-width: 56.25rem) { /* max-width: 900px */
    .community-hero {
        grid-template-columns: 1fr; /* Nur noch eine Spalte, statt zwei */
    }

    .haslau-image {
        height: 13.75rem;        /* Höhe des Bildes kleiner auf mobilen Geräten */
    }
}