/* Energieseite (web/energie.js) im Stil "Spielgefuehl Hell": Farben ueber die Variablen aus spiel.css. */
.energie .energie-icon { width: 24px; height: 24px; image-rendering: pixelated; vertical-align: middle; }
.energie .energie-zahlen { margin-bottom: 14px; }
.energie .energie-preise { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.energie .energie-preis { flex: 1 1 160px; padding: 10px 12px; background: var(--surface-raised); box-shadow: inset 2px 2px 0 var(--slot-sh), inset -2px -2px 0 var(--slot-hl); }
.energie .energie-preis span { display: block; font-size: 12px; color: var(--muted); }
.energie .energie-preis strong { font-family: var(--pixel); font-weight: 500; font-size: 20px; }
.energie .energie-preise .knopf { align-self: center; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.energie .energie-laeden { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.energie .energie-laeden li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; background: var(--surface-raised); box-shadow: inset 2px 2px 0 var(--slot-sh), inset -2px -2px 0 var(--slot-hl); }
.energie .energie-laeden li[data-offen="false"] small { color: var(--red); }
.energie .energie-laeden li[data-offen="true"] small { color: var(--green); }
.energie .energie-regel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.energie .energie-regel fieldset { margin: 0; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.energie .energie-regel legend { font-family: var(--pixel); font-size: 18px; padding: 0 4px; }
.energie .energie-regel legend label { font-family: var(--pixel); font-size: 18px; color: #303030; gap: 8px; }
.energie .energie-regel input[type=checkbox] { appearance: auto; -webkit-appearance: checkbox; width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0; background: none; box-shadow: none; border: 0; accent-color: var(--go); }
.energie .energie-regel label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.energie .energie-regel input:not([type=checkbox]) { width: 8.5em; min-width: 0; }
.energie .energie-speichern, .energie .energie-auftraege { grid-column: 1 / -1; }
.energie .energie-speichern { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.energie .energie-auftraege { margin: 0; padding-left: 18px; font-size: 13px; }
.energie .energie-zustand[data-art="gut"] { color: var(--green); }
.energie .energie-zustand[data-art="warnung"] { color: #8a5a00; }
.energie .energie-zustand[data-art="fehler"] { color: var(--red); font-weight: 600; }
.energie .energie-zustand[data-art="ruht"] { color: var(--muted); }
.energie .energie-tabelle td { vertical-align: middle; }
@media (max-width: 720px) {
  .energie .energie-regel { grid-template-columns: 1fr; }
  .energie .energie-tabelle th:nth-child(5), .energie .energie-tabelle td:nth-child(5) { display: none; }
}