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

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #333333;
    color: #EEEEEE;
}

.container {
    display: grid;
    grid-template-areas:
        "header header selected selected"
        "sidebar sidebar sidebar sidebar"
        "content content content content"
        "input input input input"
        "footer footer footer footer";
    grid-template-rows: auto 150px 1fr auto auto;
    grid-template-columns: 1fr 1fr 2fr 2fr;
    gap: 10px;
    width: 90%;
    max-width: 1200px;
}

/* Layout-Anpassung für mobile Geräte */
@media (max-width: 430px) {
    .container {
        grid-template-areas:
            "selected"
            "header"
            /* "config" */
            "sidebar"
            "content"
            "input"
            "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 5px;
        width: 100%;
    }

    /* Passen Sie die Höhe und Breite einzelner Elemente für mobile Ansicht an */
    .header,
    .selected,
    .config,
    .sidebar,
    .content,
    .input,
    .footer {
        padding: 10px;
    }

    /* Button-Breite anpassen, damit sie den mobilen Bildschirm füllen */
    .header input[type="button"] {
        width: 100%;
        margin-bottom: 5px;
    }

    /* Nachrichtenscroll-Bereich verkleinern */
    #messageContainer {
        height: 150px;
    }

    /* Diagrammgröße für mobile Ansicht */
    #chart {
        height: 250px;
    }
}

.header {
    grid-area: header;
    background-color: #444444;
    color: white;
    padding: 20px;
    text-align: center;
}
/* Buttons in voller Breite für mobile Geräte */
.header input[type="button"] {
    width: 100%;
    margin-bottom: 5px;
}
.selected {
    grid-area: selected;
    background-color: #444444;
    padding: 20px;
}
.config {
    grid-area: config;
    background-color: #444444;
    padding: 20px;
}
.sidebar {
    grid-area: sidebar;
    background-color: #444444;
    padding: 20px;
}

.content {
    grid-area: content;
    background-color: #444444;
    padding: 20px;
}

.input {
    grid-area: input;
    background-color: #444444;
    padding: 20px;
}
.kessel .puffer .warmwasser {
    width: 100px; 
}
.footer {
    grid-area: footer;
    background-color: #444444;
    color: white;
    text-align: center;
    padding: 10px;
}
.kessel, .puffer .warmwasser {
    width: 200px; 
}
#messageContainer {
    flex: 1;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
    display: flex;
    /* position: fixed; 
    top: 60px; 
    right:50px; */
    position: relative; 
    top: 0px; 
    height:100px;
    /* flex-direction: column-reverse; */
    flex-direction: column ;
}
#chart {
    flex: 1;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
    display: flex;
    /* position: fixed; 
    top: 60px; 
    right:50px; */
    position: relative; 
    top: 0px; 
    height:300px;
    /* flex-direction: column-reverse; */
    /* flex-direction: column ; */
}
.status-container {
    display: flex;
    flex-direction: column;
    max-width: 200px; /* Optional: Setzt eine maximale Breite */
    margin-right: 20px;
}

.status-container div {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
}

.status-container span:first-child {
    font-weight: bold;
    min-width: 80px; /* Passt den Abstand links an */
}
.displaystatus {
    margin-left: 10px; /* Passe den Wert nach Bedarf an */
}