/* Wetterkarten: Farbwelt nach aktueller Lage, Text mit passendem Kontrast.
   Genutzt auf dem Kiosk (Wetterkarte) und der Wetter-Detailseite. */
.wetter-karte, .wetter-karte:hover { color: var(--wetter-text, #263238); }
.wetter-sonne    { background: linear-gradient(135deg, #ffe082, #ffb300); --wetter-text: #4e3500; }
.wetter-wolken   { background: linear-gradient(135deg, #eceff1, #90a4ae); --wetter-text: #263238; }
.wetter-nebel    { background: linear-gradient(135deg, #eceff1, #b0bec5); --wetter-text: #37474f; }
.wetter-regen    { background: linear-gradient(135deg, #4fc3f7, #1565c0); --wetter-text: #fff; }
.wetter-schnee   { background: linear-gradient(135deg, #ffffff, #b3e5fc); --wetter-text: #37474f; }
.wetter-gewitter { background: linear-gradient(135deg, #9575cd, #37474f); --wetter-text: #fff; }
.wetter-karte .text-muted { color: var(--wetter-text, #263238) !important; opacity: .75; }

/* Stundenstreifen: schmal = seitlich wischbar, breit = ganzer Tag auf einen Blick */
.wetter-stunden { display: flex; gap: .3rem; overflow-x: auto; padding-bottom: .25rem; }
.wetter-stunden > div { flex: 0 0 3.2rem; text-align: center; }
@media (min-width: 992px) {
  .wetter-stunden { overflow-x: visible; }
  .wetter-stunden > div { flex: 1 1 0; min-width: 0; }
}

/* Energie: Batterie-Symbol mit Füllstand (--soc in Prozent), zeilenhoch wie ein Emoji */
.akku {
  display: inline-block; position: relative; width: 1.9em; height: .95em;
  margin-right: .35em; vertical-align: -.15em;
  border: .11em solid currentColor; border-radius: .22em; opacity: .85;
}
.akku::after {  /* Pol */
  content: ''; position: absolute; right: -.32em; top: .18em;
  width: .2em; height: .4em; background: currentColor; border-radius: 0 .1em .1em 0;
}
.akku-fuell {
  position: absolute; left: .1em; top: .1em; bottom: .1em;
  width: calc((100% - .2em) * var(--soc, 0) / 100);
  background: #198754; border-radius: .1em;
}
.akku-halb .akku-fuell { background: #ffc107; }
.akku-leer .akku-fuell { background: #dc3545; }

/* Energie-Kachel (Kiosk): aufrechte Batterie mit 5 Balken, von unten gefüllt */
.akku-gross {
  position: relative; display: flex; flex-direction: column; gap: .18rem;
  width: 2.9rem; min-height: 4.5rem; margin-top: .45rem; padding: .22rem;
  color: #6c757d; border: .2rem solid currentColor; border-radius: .45rem;
}
.akku-gross::before {  /* Pol oben */
  content: ''; position: absolute; top: -.62rem; left: 50%; transform: translateX(-50%);
  width: 1.1rem; height: .42rem; background: currentColor; border-radius: .15rem .15rem 0 0;
}
.akku-seg { flex: 1 1 0; border-radius: .14rem; background: rgba(0, 0, 0, .07); }
.akku-seg.voll { background: #198754; }
.akku-halb .akku-seg.voll { background: #ffc107; }
.akku-leer .akku-seg.voll { background: #dc3545; }
.akku-leer { color: #dc3545; }

/* Heizungs-Kachel (Kiosk): Pufferspeicher als Batterie mit drei Temperaturschichten */
.akku-gross.puffer { gap: .12rem; }
.puffer-seg {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  border-radius: .14rem; font-size: .8rem; font-weight: 600; line-height: 1; color: #fff;
  background: hsl(var(--ton, 210) 75% 50%); text-shadow: 0 0 2px rgba(0, 0, 0, .4);
}