body {
  /*
    background-image: url(images/gray.jpg);
    background-position: center top;
    background-repeat: no-repeat;*/
    background-color: #1A1A1A;
    color: #000000;
    font-family: Arial;
    font-weight: normal;
    font-size: 13px;
    line-height: 1.1875;
    margin: 0;
    text-align: center;
}
.main-wrapper {
    /* Hier ist das große Hintergrundbild, zentriert und mit fester Breite */
    background-image: url('images/gray.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    width: 994px; /* Breite Ihres Hintergrundbildes gray.jpg */
    margin: 0 auto; /* Zentriert diesen Wrapper auf dem Bildschirm */
    position: relative; /* Wichtig für die absolute Positionierung des Piratenbildes */
    height: 900px; /* Höhe Ihres Hintergrundbildes gray.jpg */
}
div#container {
    width: 994px;
    margin: 0 auto;
    text-align: left;
    padding-top: 0px;
    padding-left: 40px;
}
div#container2
{
    width: 994px;
    position: relative;
    margin: 0 auto 0 auto;
    text-align: left;
}

div#wb_CssMenu1 ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
div#wb_CssMenu1 li
{
    float: left;
    margin: 0;
    width: 150px;
}
div#wb_CssMenu1
{
    color:#888888;
    font-weight: normal;
    font-size: 13px;
    font-style: normal;
    text-decoration: none;
}
div#wb_CssMenu1 li a
{
    display: block;
    float: left;
    color: #000000;
    border: 1px #CCCCCC solid;
    background-color: #606060;
    font-family: Arial;
    font-weight: normal;
    font-size: 13px;
    font-style: normal;
    text-decoration: none;
    width: 150px;
    height: 26px;
    padding: 0px 4px 0px 0px;
    vertical-align: middle;
    line-height: 26px;
    text-align: center;
}
div#wb_CssMenu1 li:hover a
{
    color: #FFFFFF;
    background-color: #272727;
    border: 1px #CCCCCC solid;
}

/* Stile für das Navigations-Div ($navi_header) */
.navi-header {
    position: absolute;
    top: 145px;
    height: 31px;
    text-align: center;
    z-index: 1;
}

/* Stile für die Ungeordnete Liste in der Navigation */
.navi-header ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Stile für die Listenelemente in der Navigation */
.navi-header li {
    display: inline;
    margin: 0 10px;
}

/* Stile für die Links in der Navigation */
.navi-header a {
    /* Platzhalter für spezifische Link-Stile */
}

/* Stile für das Bild-Div ($bild) */
.bild-container {
    background-image: url('images/pirat.png');
    position: absolute;
    right: 30px;
    top: 0px;
    width: 165px;
    height: 140px;
    z-index: 2;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Stile für den Text-Container ($bild - id="wb_Text1") */
#wb_Text1 {
    position: absolute;
    left: 470px;
    top: 86px;
    width: 372px;
    height: 52px;
    z-index: 3;
}

/* Stile für das innere Div des Text-Containers */
#wb_Text1 div {
    font-family: Arial;
    font-size: 13px;
    line-height: 57px;
    color: #888888;
}

/* Stile für den hervorgehobenen Text (Span) */
#wb_Text1 span {
    font-size: 22px;
    line-height: 57px;
}

/* Stile für das Copyright-Div ($copy) */
.copy-container {
    color: #888888;
    position: absolute;
    right: 1px;
    bottom: 20px;
    width: 195px;
}
/* Stile für das Copyright-Div ($copy) */
.logout-container {
    color: #888888;
    position: absolute;
    right: 1px;
    bottom: 40px;
    width: 150px;
}
.logout-container a {
    color: #888888;
    text-decoration: none;
}
/* Stile für das Lokale-Informationen-Div ($local) */
.local-info {
    color: #888888;
    position: absolute;
    left: 50px;
    top: 30px;
    font-size: 14px;
}

/* Stile für den Link in den Lokalen Informationen */
.local-info a {
    color: #888888;
    text-decoration: none;
}

/* Positionierung der Navigationslinks (Daten-Menü, allgemein) */
.daten-menue-container {
position: absolute;
left: 1px;
top: 200px;
width: 760px;
text-align: center;
z-index: 1;
}

/* Spezifische Positionierung für breiteres Daten-Menü */
.daten-menue-container-2 {
position: absolute;
left: 1px;
top: 200px;
width: 900px;
text-align: center;
z-index: 1;
}

/* Positionierung der Messwerte-Anzeige (allgemein) */
.messwerte-container {
position: absolute;
left: 1px;
top: 230px;
width: 600px;
font-size: 18px;
color: #888888;
}

/* Spezifische Positionierung für breitere Messwerte-Anzeige */
.messwerte-container-2 {
position: absolute;
left: 1px;
top: 230px;
width: 600px;
font-size: 18px;
color: #888888;
}

/* Diagramm Menü/Zurück-Links (ursprünglich .diagramm-menue) */
.diagramm-menue-chart {
position: absolute;
left: 40px;
top: 200px;
width: 800px;
}

/* Diagramm Inhalt (ursprünglich .diagramm-inhalt) */
.diagramm-inhalt-chart {
position: absolute;
left: 40px;
top: 230px;
width: 900px;
font-size: 18px;
color: #888888;
}

/* --- REWI-LAYOUTS --- */

.rewi-menue-container {
position: absolute;
left: 1px;
top: 200px;
width: 930px;
text-align: center;
z-index: 1;
}

.rewi-messwerte-container {
position: absolute;
left: 1px;
top: 230px;
width: 600px;
font-size: 18px;
color: #888888;
}

/* --- ICON POSITIONIERUNG --- */

.akku-container {
position: absolute;
left: 170px;
top: 15px;
width: 55px;
height: 25px;
}

.wlan-container {
position: absolute;
left: 130px;
top: 15px;
width: 35px;
height: 25px;
}

/* Regen/Wind spezifische Icon-Positionen */
.akku-regen-container {
position: absolute;
left: 170px;
top: 56px;
width: 55px;
height: 25px;
}

.akku-wind-container {
position: absolute;
left: 170px;
top: 250px;
width: 55px;
height: 25px;
}

.wlan-regen-container {
position: absolute;
left: 130px;
top: 56px;
width: 35px;
height: 25px;
}

.wlan-wind-container {
position: absolute;
left: 130px;
top: 250px;
width: 35px;
height: 25px;
}

/* --- DIAGRAMM-KONTROLLEN --- */

.header-section {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}

.header-section button {
color: #000000;
padding: 8px 15px;
cursor: pointer;
background-color: #606060;
border: 1px solid #ddd;
}

.header-section button:hover {
background-color: #272727;
color: #FFFFFF;
}

.chart-container {
position: relative;
height: 400px;
width: 100%;
margin: 20px 0;
border-radius: 8px;
}

#weatherChart.dimmed {
opacity: 0.2;
}

/* --- LADE- UND FEHLERMELDUNGEN --- */

.loading-message,
.no-data-message {
    /* Layout und Positionierung (aus Ihren kombinierten Regeln) */
    text-align: center;
    padding: 30px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    z-index: 10;

    /* Optik (aus Ihren kombinierten Regeln) */
    color: #fff;

    font-size: 1.1em;

    /* Standardzustand: UNSICHTBAR */
    display: none;
}

.loading-message {
    font-size: 1em;
}

.loading-message.active,
.no-data-message.active {
    display: flex;
}

/* --- BENUTZERDEFINIERTE CHART-LEGENDE --- */

#htmlLegend {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 10px;
border-radius: 4px;
}

.custom-legend-item {
display: flex;
align-items: center;
margin-right: 20px;
cursor: pointer;
transition: opacity 0.15s, background-color 0.15s;
padding: 4px 8px;
border-radius: 4px;
}

.custom-legend-item:hover {
background-color: rgba(255, 255, 255, 0.1);
}

.legend-box {
width: 12px;
height: 12px;
margin-right: 8px;
border-radius: 2px;
border: 1px solid white;
}

.legend-text {
font-size: 14px;
color: white;
}

/* --- FARBDEFINITIONEN FÜR MESSWERTE (Temperatur, Luft, CO2, Lärm, Klima) --- */

.anzeigename-farbe {
color: #bfefff;
}

/* --- Temperatur Trend (temp_trent()) --- */
.temp-up, .temp-trend-up {
color: #FAF0E6;
}
.temp-stable, .temp-trend-stable {
color: #bfefff;
}
.temp-down, .temp-trend-down {
color: #FFF0F5;
}

/* --- Luftfeuchtigkeit (luftfeuchtigkeit()) --- */
.luft-zu-gering, .humi-zu-gering {
color: #ffff00;
}
.luft-gut, .humi-gut {
color: #008800;
}
.luft-sehr-gut, .humi-sehr-gut {
color: #00ff00;
}
.luft-leicht-erhoeht, .humi-leicht-erhoeht {
color: #ffa91f;
}
.luft-zu-hoch, .humi-zu-hoch {
color: #ff681f;
}
.luft-kritisch, .humi-kritisch {
color: #ff0000;
}

/* --- CO² Gehalt (co2()) --- */
.co2-sehr-gut {
color: #00ff00;
}
.co2-gut {
color: #008800;
}
.co2-befriedigend {
color: #ffff00;
}
.co2-okay {
color: #faff80;
}
.co2-ausreichend {
color: #ff681f;
}
.co2-mittel {
color: #ff681f;
}
.co2-schlecht {
color: #ff0000;
}

/* --- Aktuelle Temperatur (temperatur()) --- */
.temp-zu-kalt {
color: #FF0000;
}
.temp-kalt {
color: #FFA500;
}
.temp-kuehl {
color: #FFFF00;
}
.temp-angenehm {
color: #00ff00;
}
.temp-warm {
color: #FFFF00;
}
.temp-sehr-warm {
color: #FFA500;
}
.temp-zu-warm {
color: #FF0000;
}

/* --- Lautstärke (lautstaerke()) --- */
.noise-sehr-leise {
color: #00ff00;
}
.noise-leise {
color: #00bb00;
}
.noise-normal {
color: #008800;
}
.noise-laut {
color: #ff681f;
}
.noise-sehr-laut {
color: #ff0000;
}
.noise-laerm {
color: #ff0000;
}
.noise-terror {
color: #871614;
}

/* --- Allgemeines Raumklima (berechnung()) --- */
.klima-sehr-gut {
color: #00ff00;
}
.klima-gut {
color: #008800;
}
.klima-befriedigend {
color: #FFFF00;
}
.klima-ausreichend {
color: #FFA500;
}
.klima-genuegend {
color: #FF0000;
}
.klima-ungenuegend {
color: #871614;
}
/* --- Modul-Stile für die Netatmo Batteriestandanzeige --- */

/* Der Body-Stil muss aus der style-gesamt.css kommen, wir definieren hier nur das Modul */

/* Stile für den Haupt-Container des Batterie-Moduls */
.container {
    /* Anpassung an das dunkle Design */
    max-width: 400px; /* Kleiner gehalten */
    margin: 20px auto;
    background-color: #272727; /* Dunkler Modul-Hintergrund (wie Hover-Farbe in Nav) */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Dunklerer Schatten */
    color: #FFFFFF; /* Heller Text */
    text-align: left;
}

/* Stile für die Hauptüberschrift (h2) */
h2 {
    color: #bfefff; /* Helle Akzentfarbe (aus .anzeigename-farbe in style-gesamt.css) */
    text-align: center;
    margin-bottom: 20px;
    font-family: Arial;
    font-size: 16px;
}

/* Stile für die Modul-Batterie-Boxen */
.module-battery {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #606060; /* Dunkle Randfarbe (wie Button/Nav-Farbe) */
    border-radius: 4px;
    background-color: #1A1A1A; /* Noch dunklerer Hintergrund für innere Box */
}

/* Stile für die Modul-Überschriften (h3/h4) */
.module-battery h3,
.module-battery h4 {
    color: #FFFFFF; /* Klarer, weißer Text */
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 14px;
}

/* Stile für normale Textelemente */
.module-battery p {
    color: #888888; /* Grauer Text (aus style-gesamt.css) */
    margin: 3px 0;
}

/* Stile für Fehlermeldungen */
.error-message {
    color: #FF0000; /* Rot für kritische Fehler (aus style-gesamt.css) */
    text-align: center;
    margin-top: 20px;
}
/* Klasse für den Navigationsbereich "Zurück" im Tages- und Monatsmodus */
.chart-nav-wrapper {
    position: absolute;
    left: 40px;
    top: 200px;
    width: 600px;
}

/* Klasse für den Haupt-Inhaltsbereich, der den Chart und die Bedienelemente enthält */
.chart-content-wrapper {
    position: absolute;
    left: 40px;
    top: 230px;
    width: 900px;
    font-size: 18px;
    color: #888888;
}
/* index.php */
.index-messwerte-container {
    position: absolute;
    left: 1px;
    top: 230px;
    font-size: 18px;
    max-width: 994px;
    width: 90%;
    margin: 0;
    background-color: #1a1a1a;
    color: #f0f0f0;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8);
    border: 1px solid #333;
    box-sizing: border-box;
}
.trend-stable {
    color: #cccccc; /* Hellgrau für stabil */
    font-weight: 600;
}
.weather-summary-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
.weather-summary-table th, .weather-summary-table td {
    padding: 14px 15px;
    text-align: left;
    border-bottom: 1px solid #2c2c2c;
    line-height: 1.4;
}
.weather-summary-table th {
    background-color: #222;
    font-weight: 600;
    color: #00bcd4; /* Akzentfarbe für Header */
}
.data-highlight {
    font-size: 1.3em;
    font-weight: 700;
    color: #4CAF50; /* Grüne Hervorhebung für Werte */
}
.unit-text {
    font-size: 0.8em;
    color: #999;
    margin-left: 5px;
}