/* ── Laden Lohne CSS – extrahiert aus index.html (Phase 1 ES-Modul-Migration) ── */
/* Alle .lohne-* und .dot-* Regeln */

.lohne-wrap { display:flex; flex-direction:column; gap:16px; padding:10px; background:#0a0a14; border-radius:8px; max-width:420px; }
.lohne-statusbar { display:flex; align-items:center; gap:10px; background:#1a1a2a; border-radius:6px 6px 0 0; padding:6px 12px; margin-bottom:6px; }
.lohne-dot { width:12px; height:12px; border-radius:3px; display:inline-block; }
.dot-ok  { background:#00cc00; }
.dot-warn { background:#ffaa00; }
.dot-err { background:#cc0000; }
.lohne-statusbar span { color:#888; font-size:12px; }
.lohne-clock { color:#aaa; font-size:13px; margin-left:auto; }
.lohne-grid { display:grid; grid-template-columns:120px 120px 100px; grid-template-rows:110px 110px; gap:6px; }
.lohne-btn { background:#1A3A5A; border:2px solid #2a4a6a; border-radius:10px; color:#fff; font-size:13px; font-weight:bold; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; transition:all 0.15s; user-select:none; }
.lohne-btn:hover { filter:brightness(1.2); }
.lohne-btn.active { background:#CC0000; border-color:#ff4444; }
.lohne-btn.pending { opacity:0.6; cursor:wait; }
.lohne-btn .icon { font-size:30px; line-height:1; }
.lohne-btn .lbl { font-size:13px; letter-spacing:1px; }
.btn-bell { grid-column:3; grid-row:1; }
.btn-light { grid-column:3; grid-row:2; }
.btn-bell.active  { background:#CC5500; border-color:#ff8833; }
.btn-light.active { background:#888800; border-color:#ffff00; }
.btn-light.active .icon { filter:drop-shadow(0 0 8px #ffff00); }
.lohne-history h3 { color:#6688aa; font-size:12px; margin:0 0 6px; text-transform:uppercase; letter-spacing:1px; }
.lohne-hist-list { list-style:none; margin:0; padding:0; max-height:200px; overflow-y:auto; }
.lohne-hist-list li { display:flex; justify-content:space-between; padding:4px 8px; border-bottom:1px solid #1a2a3a; font-size:11px; }
.lohne-hist-list li:nth-child(odd) { background:#0f1820; }
.hist-name { color:#aaddff; font-weight:bold; min-width:60px; }
.hist-time { color:#556677; }