<section class="status" role="region" aria-label="Systemstatus">
    <!-- Zusammenfassung -->
    <header class="status__summary" aria-live="polite">
      <span class="dot" [class.ok]="overall==='UP'" [class.warn]="overall==='DEGRADED'"
            [class.err]="overall==='DOWN'" [class.info]="overall==='MAINTENANCE'"></span>
      <strong class="summary__title">{{ overallMessage }}</strong>
      <span class="summary__meta">Aktualisiert {{ timeAgo(lastUpdated) }}</span>
      <button class="btn btn--ghost btn--xs" type="button" (click)="manualRefresh()" aria-label="Jetzt aktualisieren">
        Aktualisieren
      </button>
    </header>
  
    <!-- Karten -->
    <div class="grid">
      <article class="card" *ngFor="let s of services$ | async; trackBy: trackById">
        <header class="card__head">
          <h3 class="card__title">
            {{ s.name }}
            <span *ngIf="s.region" class="meta">· {{ s.region }}</span>
          </h3>
          <span class="chip" [ngClass]="statusClass(s.status)">{{ statusLabel(s.status) }}</span>
        </header>
  
        <div class="kpis">
          <div class="kpi">
            <span class="kpi__label">Uptime 24h</span>
            <span class="kpi__value">{{ pct(s.uptime24h) }}</span>
          </div>
          <div class="kpi">
            <span class="kpi__label">Uptime 7d</span>
            <span class="kpi__value">{{ pct(s.uptime7d) }}</span>
          </div>
          <div class="kpi">
            <span class="kpi__label">Uptime 30d</span>
            <span class="kpi__value">{{ pct(s.uptime30d) }}</span>
          </div>
          <div class="kpi">
            <span class="kpi__label">p95</span>
            <span class="kpi__value">{{ fmtMs(s.responseP95Ms) }}</span>
          </div>
          <div class="kpi">
            <span class="kpi__label">Ø Antwort</span>
            <span class="kpi__value">{{ fmtMs(s.responseAvgMs) }}</span>
          </div>
          <div class="kpi">
            <span class="kpi__label">Letzter Vorfall</span>
            <span class="kpi__value">{{ s.lastIncidentAt ? timeAgo(s.lastIncidentAt) : '–' }}</span>
          </div>
        </div>
  
        <div class="spark" *ngIf="s.latencySeries?.length">
          <svg [attr.viewBox]="'0 0 ' + sparkWidth + ' ' + sparkHeight" [attr.width]="sparkWidth" [attr.height]="sparkHeight" role="img"
               [attr.aria-label]="'Latenzverlauf ' + s.name">
            <path class="spark__line" [attr.d]="toSparklinePath(s.latencySeries!, sparkWidth, sparkHeight)"></path>
          </svg>
          <span class="spark__caption">Letzte {{ s.latencySeries!.length }} Messungen</span>
        </div>
  
        <footer class="card__foot">
          <span *ngIf="s.version" class="muted">v{{ s.version }}</span>
          <span class="muted">Geprüft {{ timeAgo(s.lastCheckAt) }}</span>
          <span *ngIf="s.nextCheckAt" class="muted">Nächster Check in {{ until(s.nextCheckAt) }}</span>
        </footer>
      </article>
    </div>
  </section>
  