:root{
  --bg: #0b0c10;
  --bg-elev: #111218;
  --card: #14151d;
  --fg: #e6e7ea;
  --muted: #9aa0aa;
  --border: #262838;
  --shadow: 0 10px 20px rgba(0,0,0,.35);

  --green: #33d17a;
  --red: #e01b24;
  --yellow: #f5c211;
  --orange: #ff8800;
  --blue: #3b82f6;
  --gray: #6b7280;
}
@media (prefers-color-scheme: light){
  :root{
    --bg: #f6f7fb;
    --bg-elev: #fff;
    --card: #fff;
    --fg: #0f1219;
    --muted: #5e6573;
    --border: #e6e8ef;
    --shadow: 0 10px 20px rgba(0,0,0,.08);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--fg);
  background:linear-gradient(180deg,var(--bg), var(--bg-elev));
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.page-header{
  position:sticky;top:0;z-index:10;
  backdrop-filter:saturate(120%) blur(6px);
  background: color-mix(in lab, var(--bg-elev) 70%, transparent);
  border-bottom:1px solid var(--border);
}
.page-header .container{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem 1rem;
}
h1{font-size:1.4rem;margin:0}
.header-meta{display:flex;align-items:center;gap:.75rem}
.muted{color:var(--muted)}

.btn{
  border:1px solid var(--border);
  background:var(--card);
  color:var(--fg);
  border-radius:12px;
  padding:.45rem .8rem;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .05s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.select{
  border:1px solid var(--border);
  background:var(--card);
  color:var(--fg);
  border-radius:12px;
  padding:.45rem .8rem;
}
.filters{display:flex;justify-content:flex-end;padding:1rem 0}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:1rem;
  padding:0 0 2rem 0;
}
.card{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:.65rem;
  transition: translate .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{translate:0 -2px}
.card-title{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
}
.card-title h2{
  font-size:1.05rem; margin:0; line-height:1.2; font-weight:650;
}
.desc{color:var(--muted);margin:0}
.row{display:flex; align-items:center; justify-content:space-between; gap:.75rem}
.status-badge{
  font-size:.8rem;
  border-radius:999px;
  padding:.25rem .6rem;
  border:1px solid var(--border);
  background:var(--bg-elev);
  display:inline-flex; align-items:center; gap:.4rem;
}
.dot{width:.55rem;height:.55rem;border-radius:999px;display:inline-block;border:1px solid var(--border)}
.st-online .status-badge{border-color: color-mix(in srgb, var(--green) 45%, var(--border))}
.st-online .dot{background:var(--green)}
.st-offline .status-badge{border-color: color-mix(in srgb, var(--red) 45%, var(--border))}
.st-offline .dot{background:var(--red)}
.st-wartung .status-badge{border-color: color-mix(in srgb, var(--yellow) 50%, var(--border))}
.st-wartung .dot{background:var(--yellow)}
.st-beeinträchtigt .status-badge{border-color: color-mix(in srgb, var(--orange) 50%, var(--border))}
.st-beeinträchtigt .dot{background:var(--orange)}
.st-unbekannt .status-badge{border-color: color-mix(in srgb, var(--gray) 45%, var(--border))}
.st-unbekannt .dot{background:var(--gray)}

.meta{font-size:.85rem;color:var(--muted)}
.footer{padding:2rem 0 3rem 0;text-align:center}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}