.main-wrapper,div#container2 { position:relative }
div#container,div#container2 { width:994px;margin:0 auto;text-align:left }
body,div#wb_CssMenu1 li a { color:#000;text-align:center;font-family:Arial }
div#wb_CssMenu1,div#wb_CssMenu1 li a { font-style:normal;text-decoration:none }
.error-message,.navi-header,body,h2 { text-align:center }
body,div#wb_CssMenu1,div#wb_CssMenu1 li a { font-size:13px;font-weight:400 }
.local-info,.logout-container { left:50px;font-size:14px;color:#888 }
#wb_Text1 div,body,h2 { font-family:Arial }
body { background-color:#1a1a1a;line-height:1.1875;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0; }
.main-wrapper { background-image:url(images/gray.jpg);background-position:center top;background-repeat:no-repeat;width:994px;margin:0 auto;height:900px }
#wb_Text1,.bild-container,.copy-container,.local-info,.logout-container,.navi-header { position:absolute }
div#container { padding-top:0;padding-left:40px }
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:#888 }
div#wb_CssMenu1 li a { display:block;float:left;border:1px solid #ccc;background-color:#606060;width:150px;height:26px;padding:0 4px 0 0;vertical-align:middle;line-height:26px }
div#wb_CssMenu1 li:hover a { color:#fff;background-color:#272727;border:1px solid #ccc }
.navi-header { top:145px;height:31px;z-index:1 }
.navi-header ul { list-style:none;padding:0;margin:0 }
.navi-header li { display:inline;margin:0 10px }
.bild-container { background-image:url(images/pirat.png);right:30px;top:0;width:165px;height:140px;z-index:2;background-repeat:no-repeat;background-size:cover }
#wb_Text1 { left:470px;top:86px;width:372px;height:52px;z-index:3 }
#wb_Text1 div { font-size:13px;line-height:57px;color:#888 }
#wb_Text1 span { font-size:22px;line-height:57px }
.copy-container { color:#888;right:1px;bottom:20px;width:195px }
.logout-container { top:113px }
.local-info a,.logout-container a { color:#888;text-decoration:none }
.local-info { top:30px }
.daten-menue-container,.daten-menue-container-2 { top:200px;left:1px;position:absolute;z-index:1;text-align:center }
.daten-menue-container { width:760px }
.daten-menue-container-2 { width:900px }
.data-container { position:absolute;left:1px;top:230px;width:600px;font-size:18px;color:#888 }
.diagramm-menue-chart { position:absolute;left:40px;top:200px;width:800px }
.chart-wrapper { position:absolute;left:40px;top:230px;width:900px;font-size:18px;color:#888 }
.rewi-menue-container { position:absolute;left:1px;top:200px;width:930px;text-align:center;z-index:1 }
.akku-container,.wlan-container { top:15px;height:25px;position:absolute }
.akku-container { left:170px;width:55px }
.wlan-container { left:130px;width:35px }
.akku-regen-container,.akku-wind-container { left:170px;width:55px;position:absolute;height:25px }
.wlan-regen-container,.wlan-wind-container { position:absolute;left:130px;width:35px;height:25px }
.akku-regen-container,.wlan-regen-container { top:56px }
.akku-wind-container,.wlan-wind-container { top:250px }
.header-section { display:flex;justify-content:space-between;align-items:center;margin-bottom:15px }
.header-section button { color:#000;padding:8px 15px;cursor:pointer;background-color:#606060;border:1px solid #ddd }
.header-section button:hover { background-color:#272727;color:#fff }
.chart-container { position:relative;height:400px;width:100%;margin:20px 0;border-radius:8px }
#weatherChart.dimmed { opacity:.2 }
.loading-message,.no-data-message { 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;color:#fff;font-size:1.1em;display:none }
#htmlLegend,.loading-message.active,.no-data-message.active { display:flex }
.loading-message { font-size:1em }
#htmlLegend { 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 .15s,background-color .15s;padding:4px 8px;border-radius:4px }
.custom-legend-item:hover { background-color:rgb(255 255 255 / .1) }
.legend-box { width:12px;height:12px;margin-right:8px;border-radius:2px;border:1px solid #fff }
.legend-text { font-size:14px;color:#fff }
.color-cyan-light,h2 { color:#bfefff }
.color-linen { color:linen }
.color-pale-pink { color:#fff0f5 }
.color-yellow { color:#ff0 }
.color-dark-green { color:#080 }
.color-green { color:#0f0 }
.color-mild-orange { color:#ffa91f }
.color-vivid-orange { color:#ff681f }
.color-red { color:red }
.co2-okay { color:#faff80 }
.color-orange  { color:orange }
.noise-leise { color:#0b0 }
.color-dark-red { color:#871614 }
.container { max-width:400px;margin:20px auto;background-color:#272727;padding:20px;border-radius:8px;box-shadow:0 4px 8px rgb(0 0 0 / .4);color:#fff;text-align:left }
h2 { margin-bottom:20px;font-size:16px }
.module-battery { margin-bottom:15px;padding:10px;border:1px solid #606060;border-radius:4px;background-color:#1a1a1a }
.module-battery h3,.module-battery h4 { color:#fff;margin-top:0;margin-bottom:5px;font-size:14px }
.module-battery p { color:#888;margin:3px 0 }
.error-message { color:red;margin-top:20px }
.chart-nav-wrapper { position:absolute;left:40px;top:200px;width:600px }
.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 rgb(0 0 0 / .8);border:1px solid #333;box-sizing:border-box }
.trend-stable { color:#ccc;font-weight:600 }
.weather-summary-table { width:100%;border-collapse:collapse;margin-top:20px }
.weather-summary-table td,.weather-summary-table th { padding:14px 15px;text-align:left;border-bottom:1px solid #2c2c2c;line-height:1.4 }
.weather-summary-table th { background-color:#222;font-weight:400;color:#00bcd4 }
.data-highlight { font-size:1em;font-weight:700;color:#4caf50 }
.unit-text { font-size:.8em;color:#999;margin-left:5px }
.section-title { margin-top:0;color:#fff }
.update-info { text-align:right;font-size:.8em;color:#999 }