.Wert-container {
    flex-wrap: wrap;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 20px; /* Abstand zwischen den Boxen */
    justify-content: space-between; /* Gleichmäßige Verteilung der Boxen */
}

.Unsere_Werte h2 {
    text-align: center;
    margin-bottom: 40px; /* Abstand zur Containerbox */
    color: black;;
    font-size: 2rem; /* Optional: größere Schrift */
}

.Wert {
    display: flex;
    background-color: #bed8d7;
    padding-top: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 60%;
    flex-direction: column;
    align-items: center;
}

.Wert h3 {
    text-align: center;
}

.Wert img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.Unsere_Werte {
    padding: 0rem;
    margin: 5% 0%;
}

/* iPad Version */
@media (min-width: 768px) {
    .Wert-container {
        flex-direction: row;
    }

    .Wert {
        width: 40%;
        height: 200px;
    }
}

@media (min-width: 1080px) {
    .Wert-container {
        justify-content: space-around;
    }

    .Wert {
        width: 18%;
    }
}

/* Start Geschichte Sytling */

.Geschichte {
    padding: 0%;
}

.Schwestern {
    display: flex;
    gap: 20px; /* Abstand zwischen Bild und Text */
}

.Geschichte h2 {
    text-align: center;
    font-size: 2rem; /* Optional: größere Schrift */
    margin-bottom: 40px;
}

.Schwestern_img {
    border-radius: 15px; /* Abrundung der Ecken */
    overflow: hidden; /* Bild innerhalb des Containers bleibt begrenzt */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatteneffekt */
    flex-shrink: 0; /* Verhindert, dass das Bild zu klein wird */
}

.Schwestern_img img {
    width: 680px; /* Festgelegte Breite des Bildes */
    height: auto; /* Festgelegte Höhe des Bildes */
    object-fit: cover; /* Verhindert Verzerrung und schneidet das Bild passend zu */
}

@media (max-width: 768px) {
    .Schwestern {
        flex-direction: column; /* Elemente vertikal anordnen */
    }

    .Schwestern_img img {
        width: 100%; /* Bild passt sich der Breite an */
        height: auto; /* Automatische Höhe */
    }
}

@media (max-width: 1080px) {
    .Schwestern {
        flex-direction: column; /* Elemente vertikal anordnen */
    }

    .Schwestern_img img {
        width: 100%; /* Bild passt sich der Breite an */
        height: auto; /* Automatische Höhe */
    }
}
/* Ende Geschichte Styling */

/* Start Team Styling */

.Team h2 {
    text-align: center;
    margin-bottom: 40px; /* Abstand zur Containerbox */
    font-size: 2rem; /* Optional: größere Schrift */
}

.Team_Container {
    display: flex;
    flex-wrap: wrap; /* Boxen umbrechen, wenn der Platz nicht ausreicht */
    gap: 20px; /* Abstand zwischen den Boxen */
    justify-content: space-between; /* Gleichmäßige Verteilung der Boxen */
    padding: 0px;
}

.Teammember {
    display: flex;
    position: relative; /*Braucht es für den Emailadressen Hover effect*/
    flex-direction: row; /* Bild links, Text rechts */
    align-items: center; /* Vertikale Zentrierung */
    justify-content: space-evenly; /* Inhalte von links nach rechts */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%; /* Volle Breite im Container */
}

.Teammember .text {
    display: flex;
    flex-direction: column; /* Text untereinander */
}

.Teammember .text p {
    font-style: italic;
    font-size: 14px;
    color: #666; /* Etwas hellere Schriftfarbe */
}

.Teammember img {
    width: 280px;
    max-width: 150px; /* Begrenze die maximale Breite für größere Displays */
    height: 200px; /* Dynamische Höhe */
    object-fit: cover; /* Behalte das Seitenverhältnis */
    border-radius: 10px; /* Abrundung beibehalten */
}

.Team .Teammember {
    flex: 1 1 calc(33.33% - 20px); /* Gleiche Anpassung wie oben */
}

.Teammember::after {
    content: attr(
        data-email
    ); /* E-Mail-Adresse wird aus dem `data-email`-Attribut gezogen */
    position: absolute;
    bottom: 5%;
    left: 70%;
    transform: translateX(-50%) translateY(100%); /* Start außerhalb der Sicht */
    background-color: var(--primary_hover); /* Hintergrundfarbe der E-Mail */
    color: white; /* Textfarbe */
    padding: 10px;
    border-radius: 10px;
    white-space: nowrap; /* Verhindert, dass die E-Mail umbricht */
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0; /* Unsichtbar, solange kein Hover-Effekt aktiv ist */
}

.Teammember:hover::after {
    transform: translateX(-50%) translateY(0); /* Sichtbar bei Hover */
    opacity: 1; /* E-Mail erscheint */
}

@media (max-width: 768px) {
    .Team_Container {
        flex-direction: column; /* Boxen vertikal anordnen */
        align-items: center; /* Zentriere Inhalte */
    }

    .Teammember {
        flex: 1 1 100%; /* Volle Breite */
        max-width: 90%; /* Begrenze die maximale Breite */
        margin-bottom: 20px; /* Abstand zwischen den Boxen */
        height: auto; /* Höhe basierend auf dem Inhalt */
    }

    .Teammember img {
        width: 100%; /* Bild passt sich an */
        max-width: 150px; /* Begrenze maximale Breite */
    }
}
/* Ende Team Styling */

/* Start Organigramm Styling */
.Organisation {
    padding: 0rem;
}

.Organisation h2 {
    text-align: center;
    margin-bottom: 40px; /* Abstand zur Containerbox */
    color: black;
    font-size: 2rem; /* Optional: größere Schrift */
}

.Orga_Container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.Orga_Container img {
    object-fit: cover;
    border-radius: 20px;
    width: 100%;
}

.Orga_Text h4 {
    color: var(--primary);
}

.Orga_Text {
    font-size: 16px; /* Schriftgröße */
    line-height: 1.63; /* Zeilenhöhe für bessere Lesbarkeit */
    color: #333; /* Textfarbe */
    margin-top: 2rem; /* Entfernt Standardabstand des Paragraphen */
    background-color: var(--UI-light);
    border-radius: 20px;
    padding: 2rem;
    background-color: #bed8d7;
}

/* Responsive iPad */
@media (min-width: 768px) {
    .Orga_Container {
        flex-direction: column; 
        gap: 20px;
    }

    .Orga_Container img {
        width: 100%; /* Bild füllt die Breite */
        height: auto; /* Höhe passt sich an */
       
    }

    .Orga_Text{
        margin-top: 0%;
        height: auto;
    }
}

@media (min-width: 1080px) {
    .Orga_Container {
        flex-direction: row-reverse; /* Elemente vertikal anordnen */
        align-items: stretch;  
        gap: 20px;
    }

    .Orga_Container img {
        width: 100%; /* Bild passt sich der Breite an */
        height: auto; /* Automatische Höhe */
    }

    .Orga_Container img {
        object-fit: cover;
        border-radius: 20px;
        width: 50%;
    }

    .Orga_Text{
        height: auto; 
    }

}
/* Ende Organigramm Styling */