/* Farben gemaess Avenir Brand Guideline 1.0 */
:root {
  color-scheme: light;
  --bg: #F4F4F4; --card: #FFFFFF; --text: #242325; --muted: #5B585D; --line: #E4E4E4;
  --up: #CAD407;       /* Avenir Gruen */
  --pending: #DC965A;  /* Avenir Orange */
  --maint: #3EA5D9;    /* Avenir Blau */
  --down: #B21E3A;     /* Signalfarbe Stoerung */
  --empty: #E4E4E4;
  --on-accent: #242325;
  --on-down: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #1A191B; --card: #242325; --text: #F4F4F4; --muted: #959297; --line: #3A393C;
    --empty: #3A393C;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.5; }
.wrap { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; }
h1 { font-size: 1.75rem; margin: 0 0 1.5rem; }
.overall { padding: 1.25rem 1.5rem; border-radius: 12px; font-weight: 600; font-size: 1.2rem;
  color: var(--text); background: var(--line); margin-bottom: 1.5rem; }
.overall--up { background: var(--up); color: var(--on-accent); }
.overall--partial, .overall--pending { background: var(--pending); color: var(--on-accent); }
.overall--down { background: var(--down); color: var(--on-down); }
.overall--maint { background: var(--maint); color: var(--on-accent); }
.notice { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--maint);
  border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.notice--danger { border-left-color: var(--down); }
.notice--warning { border-left-color: var(--pending); }
.notice h3 { margin: 0 0 .25rem; font-size: 1rem; }
.notice p { margin: 0; white-space: pre-line; }
.group { margin-bottom: 2rem; }
.group h2 { font-size: 1.2rem; margin: 0 0 .75rem; }
.monitors { list-style: none; margin: 0; padding: 0; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; }
.monitor { padding: 1rem 1.25rem; border-top: 1px solid var(--line); }
.monitor:first-child { border-top: 0; }
.monitor__top { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.badge { font-size: .8rem; font-weight: 700; padding: .1rem .6rem; border-radius: 999px;
  color: var(--on-accent); background: var(--line); white-space: nowrap; }
.badge--up { background: var(--up); }
.badge--down { background: var(--down); color: var(--on-down); }
.badge--pending { background: var(--pending); }
.badge--maint { background: var(--maint); }
.beats { display: flex; gap: 2px; overflow-x: auto; }
.beat { flex: 1 0 4px; height: 24px; border-radius: 2px; background: var(--empty); }
.beat--up { background: var(--up); }
.beat--down { background: var(--down); }
.beat--pending { background: var(--pending); }
.beat--maint { background: var(--maint); }
.foot { color: var(--muted); font-size: .9rem; text-align: center; margin-top: 2rem; }
.foot p { margin: .25rem 0; }
.foot a { color: inherit; }
.stale { color: var(--down); font-weight: 600; }