body {
   margin: 0;
   font-family: "Open Sans", "Helvetica Neue", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
   line-height: 1.5;
   font-weight: 400;

   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
   background-color: #242424;

   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: #121212;
   color: #eee;
 }

 h1.dashboard {
   margin: 20px auto;
   text-align: center;
   font-size: 3em;
   opacity: 0.5;
 }

 #main-content h1 {
   text-align: center;
   padding: 20px 0;
 }

 a {
   font-weight: 500;
   color: #646cff;
   text-decoration: inherit;
 }

 a:hover {
   color: #535bf2;
 }


 .bg-dark {
   --bs-bg-opacity: 0.5;
 }

 #node-info-container {
   margin: 15px auto;
   display: none;
 }

 .info-box {
   margin: 0 auto;
   width: 50%;
   color: #fff;
   background: rgba(18, 18, 18, 0.65);
   padding: 1.5em;
   border-radius: 10px;
 }

 /* Menu Button and submenues */
 /* Hauptmenü-Button: dunkel mit Rahmen */
 #sensorDropdownButton {
   background-color: rgba(0, 0, 0, 0.6);
   border: 1px solid #fff;
   color: #fff;
   backdrop-filter: blur(4px);
 }

 /* Hover: mit leuchtender Farbe */
 #sensorDropdownButton:hover {
   background-color: rgba(0, 150, 200, 0.8);
   /* z. B. Türkis-Blau */
   border-color: #00ffff;
   color: #000;
 }

 /* Dropdown-Menü */
 .dropdown-menu {
   background-color: #1e1e1e;
   border: 1px solid #444;
 }

 /* Menüeinträge: normal */
 .dropdown-item {
   color: #ccc;
 }

 /* Hover auf Menüeinträgen */
 .dropdown-item:hover {
   background-color: #005f73;
   color: #fff;
 }

 /* Aktiver Menüpunkt */
 .dropdown-item.active,
 .dropdown-item:active {
   background-color: #00bfa5;
   color: #000;
   font-weight: bold;
 }

 /* Headlines */
 #soil-container h3,
 #weather-container h3 {
   display: block;
   padding: 1.5em;
   text-align: center;
   margin: 35px auto 13px auto;
   max-width: 50%;
   border-radius: 10px;
   background: rgba(0, 0, 0, 0.4);
 }

 h3 span {
  display: block;
  font-size: 0.5em;
 }


 /* Gauges styles*/
 #gauges {
   margin-bottom: 50px;
 }

 .gauge-row {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 20px;
 }

 .gauge-card {
   background: rgba(0, 0, 0, 0.75);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
   border-radius: 10px;
   padding: 10px;
   width: 240px;
   height: 200px;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .gauge-chart {
   width: 100%;
   height: 100%;
 }

 /* Supercap*/
 .supercap-bar-wrapper {
   position: relative;
   padding: 5px;
   max-width: 300px;
   margin-right: 100px;
   margin-left: auto;
   margin-top: 50px;
   font-family: "Segoe UI", sans-serif;
   overflow: visible;
 }

 #supercap-bar {
   max-width: 500px;
   margin: 40px auto 10px auto;
   /* zentriert und mit Abstand oben */
 }

 .bar-background {
   overflow: visible;
   background: linear-gradient(to right,
       #ff0000 0%,
       #ff0000 15%,
       #ffd700 20%,
       #ffd700 28%,
       #00ff00 40%,
       #00ff00 100%);
   height: 20px;
   position: relative;
   border-radius: 10px;
 }

 .supercap-triangle {
   position: absolute;
   top: -8px;
   transform: translateX(-50%);
   width: 0;
   height: 0;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   border-top: 6px solid white;
 }

 .tooltip {
   position: absolute;
   top: -25px;
   transform: translateX(-50%);
   background: rgba(0, 0, 0, 0.7);
   border: 1px solid #fff;
   color: white;
   font-size: 12px;
   white-space: nowrap;
   padding: 3px 6px;
   border-radius: 4px;
   pointer-events: none;
   z-index: 1000000;
 }

 .supercap-value {
   position: absolute;
   top: -25px;
   margin-bottom: 3px;
   ;
   padding: 5px;
   font-size: 12px;
   color: white;
   left: 0;
   /* wird per JS gesetzt */
   transform: translateX(-50%);
   white-space: nowrap;
   border-radius: 8px;
   background: rgba(18, 18, 18, 0.4);
 }

 .label {
   color: white;
   font-size: 12px;
   text-align: center;
   margin-top: 5px;
 }

 /* Line charts soil sensors*/
 .chart-card {
   background: rgba(0, 0, 0, 0.75);
 }

 .time-series-toolbar {
   margin-top: 20px;
   margin-bottom: 10px;
 }

 #timeSeriesGrid .chart-card {
   background: #1e1e1e;
   padding: 10px;
   border-radius: 10px;
   width: 320px;
   height: 240px;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
 }


 /* Weather */
 #weather-container {
  margin: 0 auto;
  text-align: center;
  width: 90%;
 }
 .weather-grid {
   flex-wrap: wrap;
   justify-content: center;
 }

 .weather-card {
   padding: 10px;
   width: 100%;
 }

 .weather-value,
 .weather-chart {
   padding: 10px 15px;
   color: white;
   font-size: 1.3em;
   justify-content: center;
   align-items: center;
   border-radius: 10px;
   background: rgba(0, 0, 0, 0.65);
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
 }

 .weather-chart {
   width: 100%;
 }

.imprint {
  font-size: 0.75em;
  padding: 1.5em 1.5em 1.8em 4em;
  background: rgba(0, 0, 0, 0.65);
}

 @keyframes pulse-glow {
   0% {
     box-shadow: 0 0 0px rgba(255, 255, 255, 0.5);
   }

   50% {
     box-shadow: 0 0 10px rgba(255, 255, 255, 1);
   }

   100% {
     box-shadow: 0 0 0px rgba(255, 255, 255, 0.5);
   }
 }

 .pulse {
   animation: pulse-glow 1.2s infinite ease-in-out;
 }



 /* Media queries*/
 @media (prefers-color-scheme: light) {
   .navbar {
     text-align: center;
   }

   .logo {
     width: 100%;
   }

   .slogan {
     display: none;
   }

   .info-box {
     width: 100%;
   }

 }