.top-container {
    max-width: 1052px;
    width: 100%;
    margin: 10px auto 10px auto;
    background-color: transparent;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}


.about-container {
    background-color: transparent;
    max-width: 986px;
    margin: 0 auto;
    padding: 20px;
    padding-top: 50px;
    padding-bottom: 50px;
    display: flex;
    align-items: center;
}


.about_round-image {
    border-radius: 50%; /* Wert in Prozent für die Rundung des Bildes */
    width: 130px; /* Passen Sie die Breite und Höhe des Bildes nach Bedarf an */
    height: 130px;
    border: 2px solid green;
    margin-left:33px;
    margin-right: 30px; /* Abstand zwischen Bild und Text */
}


.about_image-caption {
    text-align: center; /* Optional: Zentriert die Bildunterschrift */
    margin-top: 10px; /* Optional: Abstand zwischen Bild und Bildunterschrift */
    font-family: Verdana, sans-serif;
    font-size: 10.5pt;
    font-style:normal; /* Optional: Kursiver Stil für die Bildunterschrift */
}

.aboutimg-container {
    flex: none; /* Das Bild wird nicht flexibel sein, sondern seine natürliche Größe beibehalten */
}

.abouttext-container {
    text-align: left; /* Text linksbündig */
    font-family: Verdana, sans-serif;
    font-size: 11pt;
    margin-top: -80px;
    margin-left: 10px;
}




.bigNav-container {
    width: 200px;
    height: 230px;
    border: 2px solid green;
    display: inline-block;
    box-sizing: border-box;
    border-radius: 10px; /* Abgerundete Ecken mit 30px Radius */
    background-color: gold;
    margin: 1px auto 10px auto; /* Fügen Sie einen Abstand zwischen den Containern hinzu */
    position: relative; /* Position: relative für die Verschiebung */
    z-index: 10;
}


.Inner-Container {
    max-width: 1180px;
    margin: 0 auto;
    background-color: transparent;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.Welcome_Container {
    max-width: 986px;
    font-family: Verdana, sans-serif;
    font-size: 11pt;
    margin: 0 10px 50px;
    border: 2px solid green;
    border-radius: 10px; /* Abgerundete Ecken mit 10px Radius */
}

    .Welcome_Container h1 {
        font-size: 18pt; /* Textgröße für h1 auf 18 Pixel festlegen */
        text-align: center; /* Text zentriert ausrichten */
        margin: 30px;
    }

    .Welcome_Container p {
        text-align: left; /* Text zentriert ausrichten */
        padding: 0px 30px 0px 30px;
    }


.BeforAfter_Container {
    max-width: 680px;
    width: 90%; /* Containerbreite relativ zur Breite des Elterncontainers */
    margin: 10px auto;
    position: relative; /* Position: relative für das absolute Positionieren des Bildes */
}

#BeforAfter_Image {
    display: block;
    width: 680px; /* Bildbreite relativ zur Breite des Welcome_Container */
    max-width: 100%; /* Maximal mögliche Bildbreite */
    height: auto; /* Automatische Anpassung der Höhe entsprechend der Breite */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    border: none;
    padding: 0;
    margin: auto auto 30px auto; /* Zentrieren des Bildes */
}



.Collect_Container {
    max-width: 1006px;
    width: 100%;
    margin: 10px auto 0px auto;
    background-color: transparent;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}


    .Collect_Container h2 {
        font-family: Verdana, sans-serif;
        font-size: 18pt; /* Schriftgröße auf 14pt setzen */
        font-weight: bold; /* Fett formatieren */
        padding: 0 10px;
    }






/* 
   Berechnungslogik für max-width von BigService_Container_2Row:
   ------------------------------------------------------------
   max-width = (max-width von BigService_Container_1Row / Anzahl der Blöcke in Zeile 1) 
               * Anzahl der Blöcke in Zeile 2 - 40px
               
   Beispiel:
   max-width von BigService_Container_1Row = 1052px
   Anzahl der Blöcke in Zeile 1 = 4
   Anzahl der Blöcke in Zeile 2 = 3

   Berechnung:
   max-width = (1052px / 4) * 3 - 40px
             = 263px * 3 - 40px
             = 789px - 40px
             = 749px
*/

.BigService_Container_1Row {
    max-width: 1052px;
    width: 100%;
    height: auto;
    margin-top: 20px;
    background-color: transparent;
    justify-content: space-between; /* Füge space-between hinzu für gleichen Abstand zwischen den Blöcken */
    display: flex;
    flex-wrap: wrap;
}


.BigService_Container_2Row {
    max-width: 749px;
    width: 100%;
    height: auto;
    margin-top: 20px;
    background-color: transparent;
    justify-content: space-between; /* Füge space-between hinzu für gleichen Abstand zwischen den Blöcken */
    display: flex;
    flex-wrap: wrap;
}



/* Optional: Stil für den ersten Unterkontainer */
.FirstSub-container {
    width: 100%;
    height: 25%;
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    margin-right: 10px;
    border-top-left-radius: inherit; /* Vererben des Eckenradius vom Elternelement */
    border-top-right-radius: inherit; /* Vererben des Eckenradius vom Elternelement */
    text-align: center; /* Text zentriert ausrichten */
}


/* Optional: Stil für den zweiten Unterkontainer */
.SecSub-container {
    width: 100%;
    height: 75%;
    border-top: 2px solid green;
    background-color: #F9CB6C;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom-left-radius: inherit; /* Vererben des Eckenradius vom Elternelement */
    border-bottom-right-radius: inherit; /* Vererben des Eckenradius vom Elternelement */
    text-align: left; /* Text links ausrichten */
}


.FirstSub-container p {
    font-family: Verdana, sans-serif;
    font-size: 14pt; /* Schriftgröße auf 14pt setzen */
    font-weight: bold; /* Fett formatieren */
}

.SecSub-container p {
    font-family: Verdana, sans-serif;
    font-size: 10pt; /* Schriftgröße auf 11pt setzen */
    padding: 0 10px;
}


.ServiceNav-container1 {
    width: 184px;
    height: 280px;
    border: 2px solid green;
    display: inline-block;
    box-sizing: border-box;
    border-radius: 10px; /* Abgerundete Ecken mit 30px Radius */
    background-color: transparent;
    margin: 0px auto 40px auto; /* Fügen Sie einen Abstand zwischen den Containern hinzu */
    position: relative; /* Position: relative für die Verschiebung */
}

.ServiceNav-container2 {
    width: 184px;
    height: 280px;
    border: 2px solid green;
    display: inline-block;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: transparent;
    margin: 0px auto 40px auto; /* Ändere margin-bottom auf 40px wie in ServiceNav-container1 */
    position: relative;
}