.Info_Sanierung-Container {
    background-color: transparent;
    max-width: 1052px;
    width: 100%;
    margin: 10px auto 10px auto;
    display: flex;
    flex-wrap: wrap;
}


.Info_Sanierung_Infofeld {
    font-family: Verdana, sans-serif;
    font-size: 18pt;
    font-weight: bold;
    padding: 0 10px;
    padding-bottom: 50px;
    background-color: transparent;
}



.Info_Sanierung-Gruppe1 {
    font-family: Verdana, sans-serif;
    font-size: 11pt;
    color: #101010;
    display: flex;
    padding-left:10px;
    padding-top: 0;
}






.Info_Sanierung-Container2 {
    padding: 10px 20px 10px 20px;
    margin-left: 50px ;
    margin-right: 50px;
    max-width: calc(100% - 30px);
    background-color: #F9CB6C;
    border-radius: 10px;
    position: relative;
    display: flex; /* Hinzugefügt: Flexbox-Container */
    flex-direction: column; /* Anordnung der inneren Elemente in einer Spalte */
    margin-bottom: 40px;
}


.Info_Sanierung-Gruppe2 {
    font-family: Verdana, sans-serif;
    font-size: 11pt;
    color: #101010;
    display: flex;
    padding-left: 10px;
    padding-top: 0;
}


.Info_Sanierung-Container3 {
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    max-width: calc(100% - 30px);
    margin: 0 10px;
    margin-bottom: 30px;
    border: 2px solid green;
    background-color: #F9CB6C;
    border-radius: 10px;
    position: relative;
    display: flex; /* Hinzugefügt: Flexbox-Container */
    flex-direction: row; /* Anordnung der inneren Elemente in einer Spalte */
}



.Info_Sanierung-Gruppe3b {
    font-family: Verdana, sans-serif;
    font-size: 11pt; /* Schriftgröße auf 14pt setzen */
    color: #101010;
    /*display: flex;*/
    padding-left: 10px;
    padding-top: 0px;
    position: absolute;
}

.Info_Sanierung-Gruppe3 {
    font-family: Verdana, sans-serif;
    font-size: 11pt; /* Schriftgröße auf 14pt setzen */
    color: #101010;
    display: flex;
    padding-left: 10px;
    padding-top: 10pt;
    white-space: normal;
    line-height: 1.0; /* Normaler Zeilenabstand */

}

.Info_Sanierung_Gruppe3_list {
    list-style-type: disc; /* Setze Aufzählungspunkte */
    padding-left: 20px; /* Füge einen Einzug für die Aufzählung ein */
    line-height: 1.0; /* Wähle einen angemessenen Zeilenabstand */
}



.Info_Sanierung-Container5 {
    padding: 10px 20px 10px 20px;
    margin-left: auto;
    margin-right: auto;
    margin: 0 10px;
    max-width: calc(100% - 30px);
    background-color: #F0F0F0;
    border: 2px solid green;
    border-radius: 10px;
    position: relative;
    display: flex; /* Hinzugefügt: Flexbox-Container */
    flex-direction: column; /* Anordnung der inneren Elemente in einer Spalte */
    ;
}



.Info_Sanierung-Gruppe5a {
    font-family: Verdana, sans-serif;
    font-size: 11pt; /* Schriftgröße auf 14pt setzen */
    color: #101010;
    flex: 1; /* Flexibles Wachstum für den Inhalt */
    padding-left: 10px;
    padding-top: 0px;
    margin-top: -10px;
}

.Info_Sanierung-Gruppe5b {
    font-family: Verdana, sans-serif;
    font-size: 11pt; /* Schriftgröße auf 14pt setzen */
    color: #101010;
    flex: 1; /* Flexibles Wachstum für den Inhalt */
    padding-left: 10px;
    padding-top: 50px;
}




.Info_Sanierung_Gruppe5_tab {
    font-family: Verdana, sans-serif;
    font-size: 11pt; /* Schriftgröße auf 11pt setzen */
    /*margin: auto;*/ /* Zentriert das Element horizontal */
    /*align-items: center;*/ /* Zentriert die Kinder vertikal im Container */
    padding-left: 7px;
}


.Info_Sanierung_ActDur_Table {
    font-family: Verdana, sans-serif;
    font-size: 11pt; /* Schriftgröße auf 11pt setzen */

}

    .Info_Sanierung_ActDur_Table th {
        text-align: left; /* Links ausrichten */
        line-height: 20pt;
    }

    .Info_Sanierung_ActDur_Table td:first-child {
       width: 500px; /* Passe die Breite nach Bedarf an */
    }



.Info_Sanierung-Container4 {
    padding: 10px 20px 10px 20px;
    margin-left: 50px;
    margin-right: 50px;
    max-width: calc(100% - 30px);
    background-color: #F9CB6C;
    border-radius: 10px;
    position: relative;
    display: flex; /* Hinzugefügt: Flexbox-Container */
    flex-direction: column; /* Anordnung der inneren Elemente in einer Spalte */
    margin-bottom: 30px;
}





.Info_Sanierung-Gruppe4 {
    font-family: Verdana, sans-serif;
    font-size: 11pt;
    color: #101010;
    display: flex;
    padding-left: 10px;
    padding-top: 0;
}





/*--------------------------- Volle Breite --------------------------------------*/
.Info_Sanierung-BeforAfter_Container {
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    max-width: calc(100% - 30px);
    width:100%;
    margin: 0 10px;
    margin-bottom: 30px;
    border-radius: 10px;
    position: relative;
    display: flex; /* Hinzugefügt: Flexbox-Container */
    flex-direction: column; /* Anordnung der inneren Elemente in einer Spalte */
    background-color:transparent;
}

.Info_Sanierung-Pic_Header {
    padding-bottom: 20px;
    padding-left: 10px;
    font-weight: bold;
}




.Info_Sanierung-Pic_Container {
    padding: 0px;
    margin: auto;
    border-radius: 10px;
    display: flex; /* Hinzugefügt: Flexbox-Container */
    flex-direction: row; /* Anordnung der inneren Elemente in einer Spalte */
    justify-content: space-around;
}


.Befor_image {
    padding-right: 120px;
}

.After_image {
    padding-left: 70px;
}


.image-label {
    font-family: Verdana, sans-serif;
    font-size: 11pt;
    color: #101010;
}


.Info_Sanierung-Pic_Caption_left {
    padding: 0px;
    margin: 20px 0px 0px 0px;
}


.Info_Sanierung-Pic_Caption_right {
    padding: 0px;
    margin: 20px 0px 0px 0px;
}




















/*-------------------------------------------- Grüner Pfeil --------------------------------------------
*/
.arrow-green {
    /* more triangle */
    position: absolute;
    top: 50%; /* Zentrierung auf vertikaler Achse */
    left: 50%; /* Zentrierung auf horizontaler Achse */
    /*transform: translate(-50%, -50%) rotate(45deg);*/ /* Zentrierung und Drehung */

    height: 0px;
    width: 0px;
    border: 12px solid;
    border-color: green green transparent transparent;
    transform: rotate(45deg);
}



        .arrow-green:before {
            content: '';
            position: absolute;
            top: 0px;
            right: 0px;
            display: block;
            height: 12px; /* Um die Höhe und Breite zu tauschen, um die Drehung zu berücksichtigen */
            width: 16px; /* Um die Höhe und Breite zu tauschen, um die Drehung zu berücksichtigen */
            background-color: green;
            transform: rotate(-45deg) translate(2px, 1px);
        }


    .vertikal_arrow {
        transform: rotate(90deg) scale(3); /* Änderung des Rotationswinkels und Hinzufügen der Skalierung */
    }



    .vertikal_arrow_container {
        max-width: auto;
        align-self: center; /* Horizontal zentriert innerhalb des Flexbox-Containers */
        margin-top: 50px; /* Platziert den Pfeil am unteren Rand des Containers */
        width: auto;
        height: 120px;
    }





    .arrow-gray {
        /* more triangle */
        position: absolute;
        top: 50%; /* Zentrierung auf vertikaler Achse */
        left: 50%; /* Zentrierung auf horizontaler Achse */
        /*transform: translate(-50%, -50%) rotate(45deg);*/ /* Zentrierung und Drehung */

        height: 0px;
        width: 0px;
        border: 12px solid;
        border-color: lightgrey lightgrey transparent transparent;
        transform: rotate(45deg);
    }



        .arrow-gray:before {
            content: '';
            position: absolute;
            top: 0px;
            right: 0px;
            display: block;
            height: 12px; /* Um die Höhe und Breite zu tauschen, um die Drehung zu berücksichtigen */
            width: 16px; /* Um die Höhe und Breite zu tauschen, um die Drehung zu berücksichtigen */
            background-color: lightgrey;
            transform: rotate(-45deg) translate(2px, 1px);
        }


    .horizontal_arrow_container {
        max-width: auto;
        align-self: center; /* Horizontal zentriert innerhalb des Flexbox-Containers */
        /*margin-top: -20px*/; /* Platziert den Pfeil am unteren Rand des Containers */
        width: auto;
        height: 120px;
        display: flex;
        align-items: center;
        margin-bottom: 70px;
        padding-right: 70px;
        position: absolute;
    }

    .horizontal_arrow_box {
        transform: rotate(0deg) scale(3); /* Änderung des Rotationswinkels und Hinzufügen der Skalierung */
}


/*------------------------------ kleiner als 942px --------------------------------*/

/* Media Query für Mobilgeräte ab kleiner 942 Pixeln */
@media only screen and (max-width: 942px) {

    .Info_Sanierung-BeforAfter_Container {
        padding: 00px;
        margin-left: auto;
        margin-right: auto;
        max-width: calc(100% - 30px);
        width: 100%;
        margin: 0 10px;
        margin-bottom: 30px;
        border-radius: 10px;
        position: relative;
        display: flex; /* Hinzugefügt: Flexbox-Container */
        flex-direction: column; /* Anordnung der inneren Elemente in einer Spalte */
        background-color: transparent;
    }



    .Info_Sanierung-Pic_Container {
        padding: 0px;
        width: 100%;
        margin: auto;
        border-radius: 10px;
        display: flex; /* Hinzugefügt: Flexbox-Container */
        flex-direction: column; /* Anordnung der inneren Elemente in einer Spalte */
        justify-content: space-around;
        align-items: center;
        background-color: transparent;
    }



    .Befor_image {
        padding-right: 0px;
        margin-bottom: 50px;
        background-color: transparent;
    }

    .After_image {
        padding-left: 0px;
        margin-bottom: 50px;
        background-color: transparent;
    }


    .horizontal_arrow_container {
        position: relative;
        max-width: 100%;
        align-self: center;
        /* margin: 10px auto 50px auto; Platzieren Sie den Pfeil zwischen den Bildern */
        height: 50px;
        display: flex;
        padding-left: 100px;
        padding-right: 100px;
        align-items: center;
        flex-direction: column;
        background-color: transparent;
    }

    .horizontal_arrow_box {
        transform: rotate(90deg) scale(3); /* Rotieren Sie den Pfeil, um ihn vertikal anzuzeigen */
        margin-left: 90px;
  
        margin-right: auto;
    }


    .Info_Sanierung-Pic_Caption_left {
        padding: 0px;
        margin: 20px 0px 0px 0px;
    }


    .Info_Sanierung-Pic_Caption_right{
        padding: 0px;
        margin: 20px 0px 0px 0px;
    }
}