:root {
  --bg: #0b1020; --card: #141a2e; --text: #e7ecf5; --muted: #8b95ad;
  --energy: #4ea3ff; --full: #ff9f43; --spot: #5a6680; --grid: #1e2740;
  --green: #2ecc71; --amber: #f1c40f; --red: #ff5b5b; --accent: #4ea3ff;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg); color: var(--text); }

/* Navigation */
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 12px 18px; background: var(--card); border-bottom: 1px solid var(--grid);
  position: sticky; top: 0; z-index: 10; }
.nav .brand { font-weight: 700; margin-right: 14px; }
.nav a { color: var(--muted); text-decoration: none; padding: 6px 12px;
  border-radius: 8px; font-size: .92rem; }
.nav a:hover { color: var(--text); background: var(--grid); }
.nav a.active { color: #fff; background: var(--accent); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }
h1 { font-size: 1.4rem; margin: 0 0 4px; }
.sub { color: var(--muted); font-size: .9rem; margin-bottom: 20px; }

.cards { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.card { background: var(--card); border: 1px solid var(--grid); border-radius: 12px;
  padding: 14px 18px; flex: 1; min-width: 150px; }
.card .label { color: var(--muted); font-size: .8rem; }
.card .value { font-size: 1.5rem; font-weight: 600; margin-top: 4px; }

.chart-box { background: var(--card); border: 1px solid var(--grid);
  border-radius: 12px; padding: 18px; }
canvas { max-height: 440px; }
.legend-note { color: var(--muted); font-size: .8rem; margin-top: 14px; line-height: 1.5; }
.err { color: var(--red); padding: 20px; }
.note { color: var(--amber); font-size: .9rem; margin-top: 10px; }
code { background: var(--grid); padding: 1px 5px; border-radius: 4px; }

/* Ampel */
.ampel-wrap { display: flex; flex-wrap: wrap; gap: 28px; align-items: center;
  background: var(--card); border: 1px solid var(--grid); border-radius: 16px; padding: 28px; }
.lamps { display: flex; flex-direction: column; gap: 14px;
  background: #0c1124; border: 1px solid var(--grid); border-radius: 18px; padding: 18px; }
.lamp { width: 64px; height: 64px; border-radius: 50%; background: #222a40;
  opacity: .22; transition: .3s; }
.lamp.on.red { background: var(--red); opacity: 1; box-shadow: 0 0 28px var(--red); }
.lamp.on.amber { background: var(--amber); opacity: 1; box-shadow: 0 0 28px var(--amber); }
.lamp.on.green { background: var(--green); opacity: 1; box-shadow: 0 0 28px var(--green); }
.ampel-status { flex: 1; min-width: 240px; }
.ampel-status .big { font-size: 2.2rem; font-weight: 700; margin: 0 0 6px; }
.ampel-status .price { font-size: 1.15rem; color: var(--muted); }
.settings { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.settings label { font-size: .82rem; color: var(--muted); display: flex; flex-direction: column; gap: 5px; }
.settings input { background: var(--card); border: 1px solid var(--grid); color: var(--text);
  border-radius: 8px; padding: 8px 10px; width: 120px; font-size: 1rem; }
.strip { display: flex; gap: 3px; margin-top: 20px; flex-wrap: wrap; }
.strip .h { flex: 1; min-width: 30px; text-align: center; font-size: .68rem; padding: 6px 2px;
  border-radius: 6px; color: #0b1020; font-weight: 600; }
.strip .h small { display: block; font-weight: 400; opacity: .8; }
.strip .h.now { outline: 2px solid #fff; }