/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hero {
    background:url('img/background-1.jpg') no-repeat center center/cover;
    color: #fff;
    height: 50vh;
    padding-top: 40px;
    display: flex;
    justify-content: center;
}

.hero-content {
    display: flex;
    justify-content: center;
    width:700px;
    margin: 130px auto;
}

.hero-picture img{
    width:200px;
}

.hero-content h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-align: center;

}

#sidebysideimg {
    display:inline-block;
    width: 60%;
    flex: 1;
}

#sidebysidetext {
    display:inline-block;
    width: 50%
}

.cta {
    justify-content: center;
    align-items: center;
    padding: 70px;
    text-align: center;
}

.btn:hover {
    background: #6F8DA1; /* Farbe beim hover */;
}
.three-column, .one-column,.text-image {
    padding: 3rem 0;
    background: #fff;
    text-align: center;
    color: #6F8DA1;
}

.container {
    max-width: 5000px;
    margin: 0 auto;
    padding: 0 100px;
    text-align: center;
    background-image: none;
    color: #6F8DA1;
}

.columns {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.column {
    flex: 1;
    padding:0%;
    text-align: center;
}

.text-image .content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.text-image .image img {
    max-width: 100%;
    border-radius: 10px;
}

.personPictures { /*Bilder rund machen*/
    border-radius: 200px;
	-moz-border-radius: 200px;
	-webkit-border-radius: 200px
}

/*Überuns*/
.btn {
    padding: 10px 20px;
    background: #8ab0db;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s ease;
}

.icon {
    color: #513664
}


/* responsive überuns*/

/* Responsiveness für Hauptinhalt */
@media (max-width: 768px) {
    /* Hero-Bereich */a
    .hero-content {
        text-align: center; /* Inhalt zentrieren */
        display: flex;
        justify-content: center;
        width:700px;
        margin: 130px auto;
    }

    .hero-content {
        padding: 20px;
    }

    .hero-text h2 {
        font-size: 1.8rem; /* Titelgröße anpassen */
        text-align: center;
        display: flex;
        justify-content: center;
    }


    .content {
        display: flex;
        flex-direction: column; /* Inhalte vertikal anordnen */
        padding: 5px;
    }


    /* Text-Bild-Bereich */
    .text-image .container {
        display: flex;
        flex-direction: column; /* Inhalte vertikal anordnen */
        gap: 20px; /* Abstand zwischen Elementen */
        padding: 20px;
    }

    .text-image .content {
        text-align: center; /* Text zentrieren */
    }

    .text-image .content .text h2 {
        font-size: 1.8rem; /* Titelgröße anpassen */
    }

    .text-image .content .text p {
        font-size: 1rem; /* Schriftgröße des Textes anpassen */
    }

    .text-image .image img {
        max-width: 100%; /* Bild an Containerbreite anpassen */
        height: auto; /* Proportionen beibehalten */
    }

    /* Drei-Spalten-Bereich */
    .three-column .container {
        display: flex;
        flex-direction: column; /* Spalten vertikal anordnen */
        gap: 20px; /* Abstand zwischen Spalten */
        padding: 30px;
    }

    .three-column .columns {
        flex-direction: column; /* Spalten untereinander darstellen */
        text-align: center; /* Inhalt zentrieren */
    }

    .three-column .column {
        padding: 10px; /* Abstand innerhalb der Spalte */
    }

    .three-column .column h3 {
        font-size: 1.5rem; /* Schriftgröße des Titels anpassen */
    }

    .three-column .column p {
        font-size: 1rem; /* Textgröße anpassen */
    }

    /* Ein-Spalten-Bereich,Vision */
    .one-column .container {
        text-align: center; /* Text zentrieren */
        padding: 20px;
    }

    .one-column h2 {
        font-size: 1.8rem; /* Titelgröße anpassen */
    }

    .one-column p {
        font-size: 1rem; /* Textgröße anpassen */
    }

    #sidebysidetext {
        display:inline-block;
        width: 90%
    }
    

    /* Team-Bereich */
    .three-column .columns .column img {
        max-width: 100px; /* Bildgröße reduzieren */
        height: auto; /* Proportionen beibehalten */
        margin: 0 auto; /* Bild zentrieren */
    }

    .three-column .columns .column h3 {
        font-size: 1.5rem; /* Schriftgröße des Namens anpassen */
    }

    .three-column .columns .column h4 {
        font-size: 1.2rem; /* Schriftgröße der Position anpassen */
    }

    .three-column .columns .column p {
        font-size: 1rem; /* Textgröße anpassen */
    }

    .cta .btn {
        display: block;
        width: 100%; /* Button über gesamte Breite */
        text-align: center; /* Text zentrieren */
    }
}

@media (max-width: 480px) {
    /* Hero-Bereich */
    .hero-text h2 {
        font-size: 1.5rem; /* Titelgröße weiter reduzieren */
    }

    /* Text-Bild-Bereich */
    .text-image .content .text h2 {
        font-size: 1.5rem; /* Titelgröße weiter reduzieren */
    }

    .text-image .content .text p {
        font-size: 0.9rem; /* Textgröße reduzieren */
    }

    /* Drei-Spalten-Bereich */
    .three-column .column h3 {
        font-size: 1.2rem; /* Titelgröße weiter anpassen */
    }

    .three-column .column p {
        font-size: 0.9rem; /* Textgröße weiter reduzieren */
    }

    /* Ein-Spalten-Bereich,Vision */
    .one-column h2 {
        font-size: 1.5rem; /* Titelgröße anpassen */
    }

    .one-column p {
        font-size: 0.9rem; /* Textgröße anpassen */
    }

    /* Team-Bereich */
    .three-column .columns .column img {
        max-width: 80px; /* Bildgröße weiter reduzieren */
    }

    .three-column .columns .column h3 {
        font-size: 1.2rem; /* Titelgröße weiter reduzieren */
    }

    .three-column .columns .column h4 {
        font-size: 1rem; /* Positiongröße anpassen */
    }

    .three-column .columns .column p {
        font-size: 0.9rem; /* Textgröße anpassen */
    }
}