/* =========================================================
   Statusseite – Stylesheet
   ========================================================= */
:root{
  --canvas:#eef0f3; --surface:#fff; --surface-2:#f6f7f9;
  --ink:#1a1d23; --muted:#697180; --faint:#9aa2af;
  --border:#e3e7ec; --border-strong:#d3d9e0;

  --operational:#1f9d57; --operational-bg:#e7f5ec; --operational-line:#bfe6cd;
  --maintenance:#3667f0;  --maintenance-bg:#e8eefe;  --maintenance-line:#c6d5fb;
  --degraded:#c99109;     --degraded-bg:#fbf1d7;     --degraded-line:#eedca6;
  --partial:#e0680f;      --partial-bg:#fcece0;      --partial-line:#f6d0b4;
  --major:#dc3a40;        --major-bg:#fce7e8;        --major-line:#f4c4c6;
  --notice:#5a6472;       --notice-bg:#eceef1;       --notice-line:#d8dce2;

  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --radius:12px; --shadow:0 1px 2px rgba(20,24,32,.04),0 6px 20px rgba(20,24,32,.05);
}
*{box-sizing:border-box;} html,body{margin:0;}
body{font-family:var(--font-body);background:var(--canvas);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;}
.wrap{max-width:940px;margin:0 auto;padding:28px 20px 70px;}

/* header */
.top{display:flex;align-items:center;gap:11px;margin-bottom:22px;}
.brand-mark{width:30px;height:30px;border-radius:8px;background:var(--ink);display:grid;place-items:center;flex:none;}
.brand-mark span{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18);}
.top h1{font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:-.01em;margin:0;}
.top .sub{font-family:var(--font-mono);font-size:11px;color:var(--faint);letter-spacing:.02em;}

/* banner */
.banner{display:flex;align-items:center;gap:16px;border-radius:var(--radius);padding:18px 20px;margin-bottom:26px;
  border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:background .3s;}
.banner::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--operational);}
.banner.ok::before{background:var(--operational);} .banner.maint::before{background:var(--maintenance);}
.banner.degraded::before{background:var(--degraded);} .banner.partial::before{background:var(--partial);}
.banner.major::before{background:var(--major);}
.banner-pulse{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;}
.banner-pulse i{width:12px;height:12px;border-radius:50%;}
.banner.ok .banner-pulse{background:var(--operational-bg);} .banner.ok .banner-pulse i{background:var(--operational);animation:pulse 2.4s ease-out infinite;}
.banner.maint .banner-pulse{background:var(--maintenance-bg);} .banner.maint .banner-pulse i{background:var(--maintenance);}
.banner.degraded .banner-pulse{background:var(--degraded-bg);} .banner.degraded .banner-pulse i{background:var(--degraded);}
.banner.partial .banner-pulse{background:var(--partial-bg);} .banner.partial .banner-pulse i{background:var(--partial);}
.banner.major .banner-pulse{background:var(--major-bg);} .banner.major .banner-pulse i{background:var(--major);animation:pulse 1.6s ease-out infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 currentColor;}70%{box-shadow:0 0 0 7px transparent;}100%{box-shadow:0 0 0 0 transparent;}}
.banner-txt .h{font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-.01em;}
.banner-txt .m{font-size:13px;color:var(--muted);}
.banner-time{margin-left:auto;text-align:right;font-family:var(--font-mono);font-size:11px;color:var(--faint);line-height:1.6;}
.freshness{display:block;margin-top:1px;color:var(--faint);transition:color .3s;}
.freshness.bump{color:var(--operational);}

/* section */
.section{margin-bottom:30px;}
.section-head{display:flex;align-items:center;gap:8px;margin:0 2px 12px;}
.section-head h2{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0;}
.section-head .count{font-family:var(--font-mono);font-size:12px;color:var(--faint);}

/* legend */
.legend{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:6px 4px;display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;}
.legend-item{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;}
.legend-item .dot{margin-top:5px;}
.legend-item .lg-label{font-weight:600;font-size:13.5px;}
.legend-item .lg-desc{font-size:12px;color:var(--muted);}

.dot{width:10px;height:10px;border-radius:50%;flex:none;}
.dot.operational{background:var(--operational);} .dot.maintenance{background:var(--maintenance);}
.dot.degraded{background:var(--degraded);} .dot.partial{background:var(--partial);} .dot.major{background:var(--major);}

/* services */
.services{display:flex;flex-direction:column;gap:9px;}
.svc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:15px 16px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:18px;}
.svc-main{min-width:0;}
.svc-name{display:flex;align-items:center;gap:9px;}
.svc-name strong{font-weight:600;font-size:15px;letter-spacing:-.005em;}
.svc-url{font-family:var(--font-mono);font-size:11px;color:var(--faint);margin:3px 0 0 19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.svc-url a{color:var(--faint);text-decoration:none;} .svc-url a:hover{color:var(--maintenance);text-decoration:underline;}

.strip-wrap{text-align:right;}
.strip{display:flex;gap:2px;align-items:flex-end;height:26px;justify-content:flex-end;}
.strip i{width:4px;border-radius:1.5px;height:60%;opacity:.9;background:var(--operational);}
.strip i.h{height:100%;}
.strip i.maintenance{background:var(--maintenance);} .strip i.degraded{background:var(--degraded);}
.strip i.partial{background:var(--partial);} .strip i.major{background:var(--major);}
.strip-label{font-family:var(--font-mono);font-size:9.5px;color:var(--faint);margin-top:5px;letter-spacing:.03em;}

.status-pill{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.02em;border-radius:20px;padding:6px 12px;border:1px solid transparent;white-space:nowrap;}
.status-pill.operational{background:var(--operational-bg);color:var(--operational);border-color:var(--operational-line);}
.status-pill.maintenance{background:var(--maintenance-bg);color:var(--maintenance);border-color:var(--maintenance-line);}
.status-pill.degraded{background:var(--degraded-bg);color:var(--degraded);border-color:var(--degraded-line);}
.status-pill.partial{background:var(--partial-bg);color:var(--partial);border-color:var(--partial-line);}
.status-pill.major{background:var(--major-bg);color:var(--major);border-color:var(--major-line);}

/* incident / maintenance cards */
.events{display:flex;flex-direction:column;gap:11px;}
.event{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px 18px;position:relative;overflow:hidden;}
.event::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;}
.event.major::before{background:var(--major);} .event.partial::before{background:var(--partial);}
.event.degraded::before{background:var(--degraded);} .event.notice::before{background:var(--notice);}
.event.maintenance::before{background:var(--maintenance);}
.event.resolved{opacity:.72;}
.event-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.tag{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:5px;}
.tag.major{background:var(--major-bg);color:var(--major);} .tag.partial{background:var(--partial-bg);color:var(--partial);}
.tag.degraded{background:var(--degraded-bg);color:var(--degraded);} .tag.notice{background:var(--notice-bg);color:var(--notice);}
.tag.maintenance{background:var(--maintenance-bg);color:var(--maintenance);}
.phase{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.04em;padding:3px 8px;border-radius:5px;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--border);}
.phase.investigating{background:var(--major-bg);color:var(--major);border-color:var(--major-line);}
.phase.identified{background:var(--partial-bg);color:var(--partial);border-color:var(--partial-line);}
.phase.monitoring{background:var(--degraded-bg);color:var(--degraded);border-color:var(--degraded-line);}
.phase.running{background:var(--maintenance-bg);color:var(--maintenance);border-color:var(--maintenance-line);}
.phase.resolved,.phase.done{background:var(--operational-bg);color:var(--operational);border-color:var(--operational-line);}
.event-title{font-weight:600;font-size:15.5px;margin:10px 0 3px;letter-spacing:-.005em;}
.event-scope{font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.chip{font-family:var(--font-mono);font-size:10.5px;background:var(--surface-2);border:1px solid var(--border);color:var(--ink);padding:2px 7px;border-radius:5px;}
.event-window{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);margin-top:10px;display:flex;align-items:center;gap:7px;}
.event-window .arrow{color:var(--faint);}

/* timeline */
.timeline{margin-top:13px;border-top:1px solid var(--border);padding-top:13px;display:flex;flex-direction:column;gap:14px;}
.tl{display:grid;grid-template-columns:auto 1fr;gap:11px;}
.tl-rail{display:flex;flex-direction:column;align-items:center;}
.tl-node{width:9px;height:9px;border-radius:50%;background:var(--faint);margin-top:5px;}
.tl-node.investigating{background:var(--major);} .tl-node.identified{background:var(--partial);}
.tl-node.monitoring{background:var(--degraded);} .tl-node.resolved{background:var(--operational);}
.tl-node.info{background:var(--notice);} .tl-node.running{background:var(--maintenance);}
.tl-line{width:2px;flex:1;background:var(--border);margin-top:3px;}
.tl-body .tl-status{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;}
.tl-body .tl-status.investigating{color:var(--major);} .tl-body .tl-status.identified{color:var(--partial);}
.tl-body .tl-status.monitoring{color:var(--degraded);} .tl-body .tl-status.resolved{color:var(--operational);}
.tl-body .tl-status.info{color:var(--notice);} .tl-body .tl-status.running{color:var(--maintenance);}
.tl-body .tl-time{font-family:var(--font-mono);font-size:10.5px;color:var(--faint);margin-left:8px;}
.tl-body .tl-text{font-size:13px;color:var(--muted);margin-top:3px;}

.empty{border:1px dashed var(--border-strong);border-radius:var(--radius);background:var(--surface-2);padding:22px;text-align:center;color:var(--muted);font-size:13.5px;}
.empty b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px;font-size:14px;}

.footer{text-align:center;font-family:var(--font-mono);font-size:11px;color:var(--faint);margin-top:34px;line-height:1.7;}

/* dezenter Hinweis, wenn die automatische Aktualisierung scheitert */
.offline-note{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
  font-family:var(--font-body);font-size:12.5px;padding:8px 15px;border-radius:9px;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .25s;z-index:20;}
.offline-note.show{opacity:1;}

@media (max-width:640px){
  .legend{grid-template-columns:1fr;}
  .svc{grid-template-columns:1fr auto;}
  .strip-wrap{display:none;}
  .banner-time{display:none;}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ---------- Dienst-Link in der Übersicht ---------- */
.svc-link{display:inline-flex;align-items:center;gap:4px;text-decoration:none;color:var(--ink);}
.svc-link strong{transition:color .14s;}
.svc-link:hover strong{color:var(--maintenance);}
.svc-arrow{color:var(--faint);font-size:18px;line-height:1;transition:transform .14s,color .14s;}
.svc-link:hover .svc-arrow{color:var(--maintenance);transform:translateX(2px);}

/* Dauer/Countdown-Angabe in Karten */
.meta-dur{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--faint);white-space:nowrap;}
.event-window .meta-dur{margin-left:8px;}

/* ---------- Detailseite ---------- */
.back-link{display:inline-block;font-size:13px;color:var(--muted);text-decoration:none;margin-bottom:18px;font-weight:500;}
.back-link:hover{color:var(--ink);}
.detail-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px;flex-wrap:wrap;}
.detail-head .svc-name{display:flex;align-items:center;gap:10px;}
.detail-head h1{font-family:var(--font-display);font-size:24px;margin:0;letter-spacing:-.01em;}
.detail-url{font-family:var(--font-mono);font-size:12px;margin:5px 0 0 22px;}
.detail-url a{color:var(--faint);text-decoration:none;} .detail-url a:hover{color:var(--maintenance);}

.uptime-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:30px;}
.uptime-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;text-align:center;}
.uptime-card .uv{font-family:var(--font-display);font-size:28px;font-weight:600;letter-spacing:-.02em;}
.uptime-card .uv span{font-size:15px;color:var(--faint);margin-left:2px;}
.uptime-card .ul{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;margin-top:3px;}

.heat-card{overflow-x:auto;}
.heat{display:flex;gap:3px;min-width:max-content;padding-bottom:2px;}
.heat-col{display:flex;flex-direction:column;gap:3px;}
.heat-cell{width:11px;height:11px;border-radius:2px;background:var(--operational);display:inline-block;}
.heat-cell.empty{background:transparent;}
.heat-cell.operational{background:var(--operational-bg);box-shadow:inset 0 0 0 1px var(--operational-line);}
.heat-cell.maintenance{background:var(--maintenance);}
.heat-cell.degraded{background:var(--degraded);}
.heat-cell.partial{background:var(--partial);}
.heat-cell.major{background:var(--major);}
.heat-legend{display:flex;align-items:center;gap:5px;margin-top:14px;font-family:var(--font-mono);font-size:10px;color:var(--faint);}
.heat-legend .heat-cell{width:10px;height:10px;}