/* Allgemeines Styling */
body {
    background: linear-gradient(120deg, #f0f0f0, #ffecb3);
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

/* Header CSS */
.header{
    color: black;
    text-align: center;
    padding: 20px 0;
}
/* Header hervorgehobener Bereich */
.header-container{
    width: 90%; /* 5% Abstand links und rechts */
    height:15%; /* Gesamthöhe des Headers*/
    margin: 0 auto;
    display: flex;
    background-color: white; /* Hintergrund des Containers */
    padding: 10px;
    border-radius: 10px; /* Leicht abgerundete Ecken */
}
/* Header Linker Bereich */
.header-container-left{
    width: 20%; /* 20% Breite für das Logo */
    display: flex;
    justify-content: flex-end; /* Zentriert das Logo horizontal */
    align-items: center; /* Zentriert das Logo vertikal */
}
.header-container-left img{
    max-height: 15vh; /*Logo ist maximal 10% der vorhandenen Höhe*/
    height: auto;
    width: auto;
}.header-container-right{
    position: absolute; /* Unabhängig von der Flexbox-Anordnung */
    left: 50%; /* Verschiebt den linken Rand zur Mitte */
    transform: translateX(-50%); /* Zentriert den Container */
    flex: 1; /* Füllt den verbleibenden Platz rechts vom Logo */
    display: flex;
    flex-direction: column; /* Stapelt Top- und Bottom-Bereiche vertikal */
}
/* Top-Bereich im rechten Container */
.header-container-top-right{
    flex: 1; /* Nimmt gleichen Platz wie der Bottom-Bereich ein */
    display: flex;
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal */
}
.header-container-top-right img{
    max-height: 10vh;/*Schriftzug ist maximal 10% der vorhandenen Höhe*/
    width: auto;
    height: auto;
}
/* Bottom-Bereich im rechten Container */
.header-container-bottom-right {
    flex: 1; /* Nimmt gleichen Platz wie der Top-Bereich ein */
    display: flex;
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal */
}
/* Navigationsleiste (Top Nav) */
.top-nav ul {
    list-style-type: none; /* Entfernt die Standard-Aufzählungszeichen */
    padding: 0;
    display: flex; /* Horizontale Ausrichtung der Liste */
    justify-content: center; /* Zentriert die Liste */
    gap: 20px; /* Abstand zwischen den Links */
}
.top-nav ul li {
    display: inline; /* Stellt sicher, dass die Liste horizontal ist */
}
.top-nav ul li a {
    /* Entfernt spezifische Button-Stile, da diese jetzt von .btn übernommen werden */
    text-decoration: none; /* Entfernt die Unterstreichung der Links */
    display: inline-block; /* Stellt sicher, dass Links wie Buttons behandelt werden */
}
/* Button-Stil */
.btn {
    display: flex; /* Buttons wie Inline-Block-Elemente behandeln */
    justify-content: center;
    text-decoration: none; /* Entfernt Unterstreichungen */
    background-color: #87CEEB; /* Hellblauer Hintergrund */
    color: white; /* Weißer Text */
    padding: 10px 20px; /* Platz um den Text */
    border-radius: 20px; /* Abgerundete Ecken */
    font-weight: bold; /* Fettschrift */
    font-size: 1rem; /* Einheitliche Schriftgröße */
    width: 200px;
    transition: background-color 0.3s ease; /* Sanfter Farbwechsel */
}

/* Hover-Effekt */
.btn:hover {
    background-color: #4682B4; /* Dunkleres Blau beim Hover */
}
/* Body CSS*/
.body {
    min-height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
/* Transparenter Hauptinhalt */
.main-content {
    background-color: rgba(173, 216, 230, 0.7); /* Transparentes Hellblau */
    border-radius: 15px;
    padding: 20px;
    width: 70%; /* 15% Abstand links und rechts */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* Abgetrennte horizontale Bereiche */
.content-section {
    flex: 1;
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.title-paragraph h2 {
    margin: 0 0 10px;
}
.charts-images {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9f9f9;
}
.charts-images .placeholder {
    font-size: 18px;
    color: #888;
}
.closing-paragraph {
    text-align: block;
    font-size: 14px;
}
/*Footer CSS*/
.footer {
    color: black;
    text-align: center;
    padding: 20px 0;
}
/* Footer hervorgehobener Bereich */
.footer-container{
    width: 90%; /* 5% Abstand links und rechts */
    margin: 0 auto;
    display: flex;
    align-items: center; /* Zentriert den Inhalt horizontal */
    background-color: white; /* Hintergrund des Containers */
    padding: 10px;
    border-radius: 10px; /* Leicht abgerundete Ecken */
    justify-content: space-around;
}
.footer-container-left{
    width: 30%;
    display: flex;
    justify-content: center;
}
.footer-container-right{
    width: 30%;
    display: flex;
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal */
}
/* Entfernt Aufzählungszeichen aus der Footer-Link-Liste */
.no-bullet-points {
    list-style-type: none;
    padding-left: 0; /* Entfernt den linken Abstand */
    margin: 0; /* Entfernt den Standard-Abstand */
}
.no-bullet-points li{
    padding: 5px 0; /* Fügt Abstand zwischen den Listenelementen hinzu */
}
/* Responsive Design für mobile Geräte */
@media screen and (max-width: 768px) {
    /* Header */
    .header-container {
        flex-direction: column;
        height: auto;
    }
    .header-container-left {
        width: 100%; /* Logo nimmt die gesamte Breite ein */
        justify-content: center;
    }
    .header-container-right {
        position: relative;
        transform: none;
        width: 100%;
        left: 0;
    }

    .header-container-top-right {
        margin-top: 10px;
    }
    .header-container-top-right img {
        width: 100%;
    }
    /* Navigationsleiste */
    .top-nav {
        width: 100%;
    }

    .top-nav ul {
        flex-direction: column;
        gap: 10px;
    }

    .body {
        width: 100% !important;
        max-width: 100vw;
        padding: 0px;
    }
    /* Main Content */
    .main-content {
        width: 100% !important;
        max-width: 100vw;
        padding: 10px;
    }
    .content-section{
        text-align: center;
    }
    .charts-images {
        min-height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #temperatureChart {
        width: 100% !important; /* Setzt die Breite des Canvas auf 100% */
        height: 200px !important; /* Höhe wird automatisch angepasst */
    }
    
    /* Button */
    .btn {
        width: 100%; /* Buttons nehmen die volle Breite ein */
        padding: 12px 0;
    }

    /* Footer */
    .footer-container {
        flex-direction: column;
        align-items: center;
    }
    .footer-container-left,
    .footer-container-right {
        width: 100%;
        justify-content: center;
        margin: 10px 0;
    }
    .no-bullet-points {
        width: 100%
    }
        .sensor-date,
        .sensor-timespan {
        display: flex;
        flex-direction: column; /* Stellt sicher, dass alle Elemente untereinander sind */
        gap: 15px; /* Größerer Abstand zwischen den Elementen */
        align-items: stretch; /* Alle Eingabefelder und Buttons auf volle Breite */
    }

    /* Sicherstellen, dass alle Formularelemente gut skalieren */
    .sensor-date select,
    .sensor-date input,
    .sensor-date button,
    .sensor-timespan select,
    .sensor-timespan button {
        min-width: 150px;
        padding: 12px;
        margin-left: 2px;
    }
}