:root { --bg: #111; --fg: #eee; --muted: #888; --rot: #ff3b30; --gruen: #30d158; --aus: #2a2a2a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font-family: system-ui, -apple-system, sans-serif; -webkit-tap-highlight-color: transparent; }
main { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4vh; padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom); }

.ampel { background: #000; border: 4px solid #333; border-radius: 9vh; padding: 3.5vh;
  display: flex; flex-direction: column; gap: 3.5vh; }
.licht { width: min(30vh, 60vw); aspect-ratio: 1; border-radius: 50%; background: var(--aus);
  transition: background .25s, box-shadow .25s; }

.ampel[data-status="rot"] .rot { background: var(--rot); box-shadow: 0 0 6vh var(--rot); }
.ampel[data-status="gruen"] .gruen { background: var(--gruen); box-shadow: 0 0 6vh var(--gruen); }

.label { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.meta { margin: 0; color: var(--muted); font-size: .9rem; display: flex; align-items: center; gap: .5em; }
.dot { width: .6em; height: .6em; border-radius: 50%; background: var(--muted); }
.dot.ok { background: var(--gruen); }
.dot.err { background: var(--rot); }