/* Grundstil für den gesamten Body */
body {
    background-color: black;
    color: white;
    font-family: Arial, sans-serif;
    margin: 0 auto; /* Zentriert die Seite horizontal */
    padding: 0;
    max-width: 800px; /* Maximale Seitenbreite */
    width: 100%; /* Nimmt den verfügbaren Platz auf kleinen Bildschirmen ein */
}

/* Stil für Überschriften */
h1, h2, h3 {
    text-align: center;
}

/* Layout für Sensoren */
#sensor-data {
    margin: 10px auto;
    max-width: 100%;
}

/* Layout für Sensoren auf der mobilen Website */
#mobile-sensor-data {
    margin: 5px auto;
    max-width: 100%;
}

/* Tabellen-Layout für mobile Sensorwerte */
.mobile-sensor-table {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Drei Spalten */
    gap: 5px;
    margin: 5px auto;
    max-width: 100%;
}
.mobile-sensor {
    background-color: #222;
    padding: 1px;
    border-radius: 5px;
    text-align: center;
}

/* Layout für Buttons */
/* Einheitliche Buttons */
div button {
    display: block;
    margin: 20px auto; /* Zentriert den Button horizontal */
    padding: 10px 20px; /* Polsterung für besseren Look */
    width: 80%; /* Alle Buttons haben die gleiche Breite */
    max-width: 300px; /* Optional: Begrenzung der maximalen Breite */
    background-color: #007BFF; /* Blaue Hintergrundfarbe */
    color: white; /* Weiße Schriftfarbe */
    border: none; /* Entfernt den Standardrahmen */
    border-radius: 5px; /* Runde Ecken */
    font-size: 16px; /* Schriftgröße */
    cursor: pointer; /* Zeigt den Cursor als Hand an */
    transition: background-color 0.3s ease; /* Animation beim Hover */
}

div button:hover {
    background-color: #0056b3; /* Dunkleres Blau beim Hover */
}

/* Layout für Button-Container */
.button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: 20px auto;
}

/* Spalten für Buttons */
.button-column {
    flex: 1;
    min-width: 200px;
    max-width: 400px;
}


/* Tabellen-Layout für Sensorwerte */
.sensor-table {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Drei Spalten */
    gap: 5px;
    margin: 5px auto;
    max-width: 100%;
}

.sensor {
    background-color: #222;
    padding: 1px;
    border-radius: 10px;
    text-align: center;
}

.sensor-timestamp {
    font-size: 12px;
    color: #7CFC00;
    margin-top: 5px;
}


/* Responsive Design für kleinere Bildschirme */
@media screen and (max-width: 800px) {
    body {
        width: 100vw;
        height: 100vh;
        overflow: scroll;
    }

    h1 { font-size: 16px; }
    h2 { font-size: 14px; }
    h3 { font-size: 10px; }

    #sensor-data {
        width: 90%;
    }

    .sensor-value {
        font-size: 20px;
        font-weight: bold;
        color: #7CFC00;
    }

    .sensor p { font-size: 16px; }

    #weather p {
        font-size: 16px;
    }

    .forecast-cell { font-size: 12px; }
    .forecast-value { font-size: 12px; }
    .forecast-icon {
        width: 25px;
        height: 25px;
    }
}

/* Für größere Bildschirme */
@media screen and (min-width: 801px) {
    body {
        width: 100%;
        height: auto;
        overflow: scroll;
    }

    h1 { font-size: 24px; }
    h2 { font-size: 18px; }
    h3 { font-size: 14px; }

    #sensor-data {
        width: 60%;
    }

    .sensor-value {
        font-size: 30px;
        font-weight: bold;
        color: #7CFC00;
    }

    .sensor p { font-size: 20px; }

    #weather p, #forecast p {
        font-size: 20px;
    }
}