/* HERO Bereich - oberster Abschnitt mit großem Banner */
.hero {
    background: #eef7f1;
    border-radius: 1.875rem;
    padding: 2.5rem;/*Innenabstand */
    margin: 3.5rem auto;/* Abstand oben/unten, zentriert horizontal */
    max-width: 75rem;/*maximale Breite */
    display: grid;/* Grid-Layout für Text + Bild */
    grid-template-columns: 1fr 1fr; /* Zwei gleich breite Spalten */
    gap: 2rem;/* Abstand zwischen den Spalten */
    align-items: center;/* Vertikal zentrieren */
}

.hero-content h1 {
    color: #2d5b3a;
}

/* Hinweisbox */
.access-note {
    background: white;
    border-left: 0.25rem solid #5ca174; /* Grüner Streifen links */
    border-right: 0.25rem solid #5ca174; /* Grüner Streifen rechts */
    padding: 0.75rem;/* Innenabstand */
    border-radius: 0.625rem;/*abgerundet */
}

/* Bildbereich im Hero */
.hero-visual {
    height: 22rem; /*  Höhe */
    border-radius: 1.25rem;
    background: center/cover no-repeat url("../images/BildBlumeWindradSolarpanele.webp"); /* Bild zentriert, skalieren */
}

.logged-in-visual {
    background-image: url("../images/eingeloggtesBild.jpg"); /* anderes Bild für eingeloggte Nutzer */
}

/* ABOUT Sektion */
.about {
    max-width: 75rem;
    margin: 4.375rem auto;/*Abstand oben, zentriert horizontal */
    text-align: center; /* Text zentriert */
    padding: 0 1.25rem; /* links/rechts Innenabstand */
}

.about h2 {
    color: #5ca174;
}

/* TEAM Bereich */
.team {
    background: #eef7f1;
    border-radius: 1.875rem;
    padding: 3rem 1.25rem;/*oben/unten, links/rechts */
    margin: 0 auto 5rem; /* unten Abstand, horizontal zentriert */
    max-width: 75rem;
    text-align: center;/* Text zentriert */
}
.team h2 {
    color: #2d5b3a;
}

/* Team Cards Container */
.team-cards {
    display: flex;/* flexbox Layout */
    flex-wrap: wrap;/* Karten umbrechen */
    justify-content: center;/* zentriert horizontal */
    gap: 1.25rem;/* Abstand zwischen Karten*/
    margin-top: 1.25rem;/*Abstand oben */
}

/* Einzelne Team-Karten */
.team-card {
    background: white;
    width: 12.5rem;/*Breite */
    padding: 1.125rem;/* Innenabstand */
    border-radius: 1rem;
    display: flex;/* Flexbox Layout für Inhalt */
    flex-direction: column; /* Inhalte untereinander */
    align-items: center; /* zentriert horizontal */
    box-sizing: border-box; /* Padding wird in Breite eingerechnet */
}

/* Avatar/Bild der Team-Mitglieder */
.avatar {
    width: 100%; /* volle Breite der Karte */
    height: 12.5rem;
    overflow: hidden;/* alles außerhalb der Box abschneiden */
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;/* Abstand zum Text */
    display: flex; /* Flexbox für Bildpositionierung */
    align-items: center; /* vertikal zentriert */
    justify-content: center; /* horizontal zentriert */
}

/* Bild innerhalb des Avatars */
.avatar img {
    width: 100%; /* volle Breite */
    height: 100%;  /* volle Höhe */
    object-fit: cover;/* Bild skaliert und schneidet falls nötig */
    display: block; /* block-level Element */
}

/* Rollenbezeichnung im Team */
.team-role {
    color: #56785f;
    font-size: 0.95rem; /* leicht kleiner als normaler Text */
}

/* RESPONSIVE - Anpassungen für kleinere Bildschirme */
@media (max-width: 56.25rem) {       /* 900px / 16 */
    .hero {
        grid-template-columns: 1fr; /* nur noch eine Spalte im Hero */
    }
    .hero-visual {
        height: 13.75rem;           /* 220px Höhe für mobile Geräte */
    }
}