﻿

.Info_EnergyPass-Container {

    max-width: 1052px;
    width: 100%;
    margin: 10px auto 10px auto;
    background-color: transparent;
    display: flex;
    flex-wrap: wrap;
}


    .Info_EnergyPass-Container h1 {
        font-family: Verdana, sans-serif;
        font-size: 18pt; /* Schriftgröße auf 14pt setzen */
        font-weight: bold; /* Fett formatieren */
        padding: 0 10px;
    }

    .Info_EnergyPass-Container p {
        font-family: Verdana, sans-serif;
        font-size: 10.5pt; /* Schriftgröße auf 14pt setzen */
        font-weight: normal; /* Fett formatieren */
        padding: 0 10px;
    }


.Info_EnergyPass_Infofeld {
    font-family: Verdana, sans-serif;
    font-size: 18pt; /* Schriftgröße auf 14pt setzen */
    font-weight: bold; /* Fett formatieren */
    padding: 10px 0px;
}


.Info_EnergyPass_Whatmean_Container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* Alle Abschnitte auf gleiche Höhe strecken */
    padding-bottom: 18px;
}


.Info_EnergyPass-Whatmean_Group {
    font-family: Verdana, sans-serif;
    font-size: 10.5pt;
    color: #101010;
    display: flex;
    padding-left: 20px;
    padding-top: 30px;
    align-items: flex-start; /* Vertikale Ausrichtung an den oberen Rand */
    position: relative; /* Relative Positionierung für die Trennlinie */
}

.Info_EnergyPass_Whatmean_Left {
    flex: 1;
    min-width: 220px;
    padding-right: 10px;
    max-width: 400px;
    width:100%;
    position: relative; /* Relative Positionierung für die Trennlinie */
}

.Info_EnergyPass-Whatmean_Right {
    text-align: left; /* Text in der rechten Spalte nach links ausrichten */
    margin: 0px 30px;
    flex: 1;
}


.Info_EnergyPass_Whatmean_Trennlinie {
    width: 2px;
    background-color: #009D48;
    position: relative; /* Absolute Positionierung relativ zum Container */
    height: 100%;
    margin: -20px -15px;
    padding-top: 20px;
    padding-bottom: 20px;
}






/*------------------- Bilder ---------------------------------*/
.Info_EnergyPass_Image_Container {
    background-color: transparent;
    flex-wrap: wrap;
    max-width: 1052px;
    width: 100%;
    margin: 0 auto; /* Zentriert den Container horizontal */
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 30px;
    font-family: Verdana, sans-serif;
    font-size: 10.5pt; /* Schriftgröße auf 14pt setzen */
    color: #101010;
}




.Info_EnergyPass_Image_Box {
    justify-content: space-between;
    margin: 0 auto; /* Zentriert den Container horizontal */
    display: flex;
}

.Info_EnergyPass-Pass_Spalten_Rechts {
    flex: 1;
}

.Info_EnergyPass-Pass_Spalten_Links {
    flex: 1;

}


.Ausweis_Label {
    padding: 0px 10px 0px 0px;
    margin-bottom: 10px;
}

.ImageQuelle_Label {
    font-size: 8.5pt;
    
}

#Verbrauchsausweis_Image,
#Bedarfsausweis_Image {
    display: block;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    max-width: Calc(99% - 1%); /* Maximale Breite auf 100% des Containers setzen */
    height: auto;
    padding: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    box-sizing: border-box; /* Berücksichtigt padding und border in der Breite */
}

/*------------------- Bilder Ende ---------------------------------*/



/*------------------- Info-Box ---------------------------------*/
.Info_EnergyPass_Attention_Container {
    max-width: 1052px;
    width: 100%;
    margin: 30px auto 10px auto;
    background-color: transparent;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* Zentriert die Inhalte vertikal */
}


.Info_EnergyPass_Attention_Inner_Container {
    max-width: 780px; /* Maximale Breite auf 800px begrenzen */
    background-color: #F9CB6C;
    border: 2px solid green;
    border-radius: 10px; /* Abgerundete Ecken mit 30px Radius */
    padding: 10px 30px 10px 10px;
    font-family: Verdana, sans-serif;
    font-size: 10.5pt; /* Schriftgröße auf 14pt setzen */
    color: #101010;
    width: 100%; /* Volle Breite innerhalb des Containers */
}
/*------------------- Info-Box Ende ------------------------------*/




.Info_EnergyPass_Juxta_Container {
    max-width: 1052px;
    width: 100%;
    margin: 30px auto 10px auto;
    background-color: transparent;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    font-family: Verdana, sans-serif;
    font-size: 10.5pt; /* Schriftgröße auf 14pt setzen */
    color: #101010;
}


.Info_EnergyPass-Rechts {
    text-align: left; /* Text in der rechten Spalte nach links ausrichten */
    margin: 0 10px;
}

    .Info_EnergyPass-Rechts .label-item {
        display: block; /* Jedes Label auf einer neuen Zeile anzeigen */
    }


.Info_EnergyPass-Table_Container {
    max-width: 800px; /* Maximalbreite der Tabelle festlegen */
    width: 100%;
    margin: 0 auto; /* Zentriert die Tabelle horizontal */
    background-color: #F0F0F0;
    padding: 10px;
}

.Compare_Table_Class {
    width: 100%;
}

    .Compare_Table_Class td {
        width: 50%;
        vertical-align: top;
        padding: 10px;
    }