/* Diese Datei kümmert sich um das Aussehen der "Über uns"-Seite. */

/* Basis-Styling für die Hauptcontainer ("Über Uns" und "Unser Team").
   Wir definieren hier gemeinsame Eigenschaften, um Wiederholungen zu vermeiden. */
.about-container,
.team-section {
    margin: 0px 30px 0px 30px;
    padding: 0;
    background-color: #111136;
    border: 2px solid #1f1f64;
    border-radius: 30px;
    color: white;
    font-family: "Roboto", sans-serif;

    /* Erstellt ein 2-Spalten-Layout (Bild neben Text). */
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center; /* Vertikale Zentrierung des Inhalts in den Grid-Zellen. */
    position: relative; /* Wichtig für die Positionierung der Pseudo-Elemente (::before). */
}
/* Ein kleiner Abstand nach unten für den ersten Container. */
.about-container{
    margin: 0px 30px 10px 30px;
}

.about-image-wrapper {
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-image-wrapper img {
    width: 100%;
    /* Hier haben wir das Bild bewusst etwas vergrößert (von 350px auf 420px),
       damit es im Layout präsenter wirkt und den Platz besser ausfüllt. */
    max-width: 420px;
    border-radius: 20px;
    border: 4px solid #1f1f64;
}

.about-text-content {
    padding: 40px;
    position: relative;
}

/* Dieses Pseudo-Element erzeugt die vertikale, weiße Trennlinie links vom Text.
   Ein schöner visueller Trick, um Bild und Text voneinander abzugrenzen. */
.about-text-content::before {
    content: "";
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    width: 4px;
    background: white;
}

.about-text-content h1 {
    font-size: 2.8rem;
    margin-top: 0;
    margin-bottom: 25px;
}

.about-text-content h2 {
    font-size: 1.8rem;
    margin-top: 30px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 3px solid #1f1f64; /* Eine subtile Linie unter der Zwischenüberschrift. */
}

.about-text-content p {
    font-size: 1.1rem;
    line-height: 1.7; /* Erhöht den Zeilenabstand für bessere Lesbarkeit. */
    color: #ccc;
    margin-bottom: 15px;
}

.team-text-content {
    padding: 40px;
}

.team-section h2 {
    font-size: 2.5rem;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: left;
}

.team-section p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #ccc;
    margin-bottom: 15px;
    text-align: left;
}

.team-image-wrapper {
    padding: 40px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Auch hier die vertikale Trennlinie, diesmal für den "Team"-Bereich. */
.team-image-wrapper::before {
    content: "";
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    width: 4px;
    background: white;
}

.team-section img {
    width: 100%;
    max-width: 600px;
    border-radius: 20px;
    border: 4px solid #1f1f64;
}

/* Ab einer Bildschirmbreite von 900px oder weniger greifen diese Regeln.
   Perfekt für Tablets und Smartphones. */
@media (max-width: 900px) {
    .about-container,
    .team-section {
        /* Wir brechen das 2-Spalten-Layout auf und machen daraus eine einzige Spalte.
           So stehen die Elemente auf kleinen Bildschirmen untereinander. */
        grid-template-columns: 1fr;
    }

    /* Hier ordnen wir die Elemente für die mobile Ansicht neu an.
       Der Text (.about-text-content) soll jetzt ZUERST (grid-row: 1)
       und das Bild (.about-image-wrapper) DANACH (grid-row: 2) angezeigt werden. */
    .about-text-content {
        grid-row: 1;
    }
    .about-image-wrapper {
        grid-row: 2;
    }

    /* Die vertikalen Trennlinien machen auf mobilen Geräten keinen Sinn mehr, also weg damit. */
    .about-text-content::before,
    .team-image-wrapper::before {
        content: none;
    }

    /* Statt der vertikalen Linie erstellen wir hier eine HORIZONTALE Trennlinie,
       die auf kleinen Bildschirmen zwischen den gestapelten Elementen erscheint. */
    .about-text-content::after,
    .team-image-wrapper::after {
        content: "";
        position: absolute;
        left: 40px;
        right: 40px;
        top: 0; /* Positioniert die Linie ganz oben im Element. */
        height: 4px;
        background: white;
    }

    /* Auf kleinen Bildschirmen zentrieren wir den Text für eine bessere Optik. */
    .about-text-content,
    .team-text-content {
        text-align: center;
        padding-top: 60px; /* Mehr Abstand nach oben wegen der neuen horizontalen Linie. */
    }
    
    .about-text-content h2 {
        /* Die untere Border bei der h2 ist bei zentriertem Text nicht mehr schön. */
        border-bottom: none;
    }
}