@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI";
}


/* Hintergrundbild für die gesamte Webseite */


.container {
    max-width: 2000px; /* Begrenze den Inhalt auf 1200px */
    margin: 0 auto; /* Zentriert den Inhalt */
    background-color: white; /* Sicherstellen, dass der Hintergrund weiß bleibt */
}

hr {
    height: 10px;
    background-color: #E9A23A;
    border: 0;
}


header img{
   width:100%;
    margin: 0;
    padding: 0;
}


.menu {
    margin: 0;
    width: 100%;
    background-color: #E9A23A;
    position: relative; /* Relative Positionierung für das Menü */
}

.menu .container {
    max-width: 1200px; /* Maximale Breite des Containers */
    margin: 0 auto; /* Zentriert den Container */
    display: flex;
    justify-content: space-between; /* Verteilt den Inhalt */
    align-items: center; /* Vertikale Ausrichtung */
    padding: 10px; /* Padding für Abstand */
}

.name {
    font-size: 1.7em;
    font-weight: bold;
    color: white;
    position: absolute; /* Position bleibt absolut */
    right: 20px; /* Rechts mit etwas Abstand */
    top: 10px; /* Oben mit etwas Abstand */
}





h1 {
    font-size: 2em;
    margin-top: 40px
}


p {
    font-size: 1.5em;
    margin: 0 0 40px 0;

}

section {
    margin: 40px;
}

section iframe{
    width: 100%;
    height:20em;
}

section img{
    width: 100%;

}

section li{
    font-size: 1.5em;
    margin: 10px 0 0 40px
}

.Firma p{
    font-size: 1.1em;
    font-family: Georgia;
}

.Text p {
    margin: 10px 0;
}

.Bild {
    width: 90%;
}


.Formular p{
    font-size: 1.2em;
    margin: 20px 0 5px 0;
}

.bottom-bar {
    background-color: #E9A23A;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    margin-top: 40px;
}

.bottom-bar .footer-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bottom-bar .company-name {
    color: white;
    font-family: Roboto, sans-serif; /* Gleiche Schriftart wie oben */
    font-size: 1.3em;
    font-weight: bold;
    margin: 0;
}

.bottom-bar .privacy-link {
    color: white;
    font-family: Roboto, sans-serif; /* Gleiche Schriftart wie oben */
    font-size: 1.3em;
    font-weight: bold;
    text-decoration: none;
}

.bottom-bar .privacy-link:hover {
    text-decoration: underline;
}

.Balken {
    text-align: center;
}

nav {

    background:#E9A23A ;
    padding: 10px;
}
nav button.burger {
    padding: 0;
    margin-right: 12px;
    border: 0;
    background: none;
    font-size: 20px;
    color: #FFFFFF;
}
nav ul {
    padding: 0;
    margin-top: 30px;
    display: none;
}
nav li {
    list-style-type: none;
    margin-bottom: 15px;
}
nav a {
    color: #FFFFFF;
    text-decoration: none;
}
nav a.logo {
    font-weight: bold;
    text-transform: uppercase;
}




h1 {
    text-align: left;
    margin-bottom: 30px;
}


/* Mitarbeiter-Layout */
.employee {
    display: flex; /* Flexbox für horizontale Ausrichtung */
    align-items: center; /* Vertikale Ausrichtung der Inhalte */
    margin-bottom: 30px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
}

/* Informationsteil */
.employee-info {
    margin-left: 20px;
}

.employee-info h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.employee-info p {
    font-size: 1.1em;
    margin: 5px 0;
}

/* Bildteil */
.employee-image {
    width: 400px; /* Größeres Bild */
    height: 400px; /* Größere Höhe */
    overflow: hidden;
    border-radius: 10%; /* Runde Bilder */
    border: 3px solid #ccc; /* Dünner Rand um das Bild */
}

.employee-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Bild wird so angepasst, dass es das Container-Element ausfüllt */
    border-radius: 10%; /* Runde Bilder */
}

/* Bild- und Textlayout auf mobilen Geräten */
@media screen and (max-width: 1000px) {
.employee {
        flex-direction: column;
        text-align: center;
    }

    .employee-image img {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .employee-info {
        text-align: center;
    }


    .content-image {
        width: 300px; /* Kleinere Breite für Handys */
        height: 300px; /* Kleinere Höhe für Handys */
        object-fit: cover;
        image-orientation: center;

    }

    .contact-image {
        width: 50%;
        height: auto;
        margin-bottom: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
}

@media screen and (max-width: 1000px) {
    nav button.burger .icon-open,
    nav.expanded button.burger .icon-close {
        display: block;
    }
    nav button.burger .icon-close,
    nav.expanded button.burger .icon-open {
        display: none;
    }
    nav.expanded ul {
        display: block;
    }
}


@media screen and (min-width: 1000px) {

    section iframe{
        width: 100%;
        height:40em;
    }

    .Portrait {
        display: grid;
        width: auto;
        height: auto;
        grid-template-columns:  283px 1fr;
        grid-template-rows: 1fr ;
        grid-gap: 2rem;
        grid-template-areas:
    "Bild Text";
    }
    .Bild img{
        width: 283px;
    }

    .Text p {
        padding-bottom: 40px
    }

    .Text h1 {
        margin:0;
    }

    h1{
        font-size: 3em;
    }

    h2{
        font-size: 2em;
    }

    p{
        font-size:2em;
    }

    .Firma p {
        font-size: 2em;
    }



    nav button.burger {
        display: none;
    }

    nav a:hover{
        background-color: #F9C578;
    }

    nav a {
        font-family: Roboto;
        font-size: 1.3em;
        font-weight: bold;
        color: black;
        text-decoration: none;
        display: block;
        padding: 10px 25px 10px 25px;
    }

    nav{
        padding: 0 0 13px 0;
    }

    .aktiv{
        text-decoration: underline;
    }

    .navigation li {
        text-decoration: none;
    }



    nav ul {
        height: 35px;
        margin: 0;
        display:flex;
        justify-content: flex-start;
        list-style-type: none
    }

    .home-img img{
        width: 100%;
        background: url("../Bilder/home.jpg") no-repeat center/cover;
    }

    .content-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
    }

    .content {
        flex: 3; /* Hauptinhalt nimmt den restlichen Platz ein */
        background: white;
        border: 2px solid #E9A23A;
        padding: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }


    .text-image {
        display: flex;
        align-items: center;
        margin-bottom: 40px;
    }
    
    .content-image {
        width: 300px;
        height: 300px;
        object-fit: cover;
        margin-right: 20px;
    }

    .text-content {
        max-width: 800px;
    }

    .text-content h1 {
        margin-bottom: 15px;
    }
    
    .text-content p {
        font-size: 18px;
        line-height: 1.6;
    }







    .contact {
        flex: 1 300px; /* Fixe Breite von 300px */
        max-width: 300px; /* Maximalbreite von 300px */
        position: sticky;
        top: 20px; /* Beim Scrollen sichtbar bleiben */
        background: white;
        border: 2px solid #E9A23A;
        padding: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        text-align: center;
        border-left: 2px solid #ddd; /* Optional: Trennungslinie */
        padding-left: 20px;
    }

    .contact-image {
        width: 100%;
        height: auto;
        margin-bottom: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .contact h1 {
        text-align: center;

    }

    .contact h2 {
        margin-top: 20px;
        font-size: 1.5em;
        color: #E9A23A;
    }

    .contact p {
        margin: 5px 0;
        font-size: 1.2em;
    }
    
}




}


@media screen and (min-width: 1050px) {


    .main {

    }

    .news p {
        font-size: 2em;
    }

    section{
        margin:  50px 200px;
    }


    
}