:root{
  --bg:#0a0e14;
  --bg-2:#0d121b;
  --panel:#111824;
  --panel-2:#0f1520;
  --line:#1e2a3a;
  --line-soft:#172230;
  --txt:#dce4ee;
  --mut:#6b7a8f;
  --mut-2:#4a5666;

  --amber:#ffb000;          /* Brand / Baustellen-Signal */
  --amber-dim:#7a5600;
  --ready:#3fd17a;
  --manual:#7d8da3;
  --auth:#f0b429;
  --failed:#ff5d52;

  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --disp:"Chakra Petch",system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(1200px 700px at 78% -10%, #12203022, transparent 60%), var(--bg);
  color:var(--txt);
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:.2px;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

/* ---- Blueprint-Raster + Scanlines ---- */
.grid-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 85%);
  opacity:.5;
}
.scanlines{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay; opacity:.4;
}

header,main,footer{position:relative; z-index:2}

/* ---- Topbar ---- */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 34px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, #0c121c, transparent);
}
.brand{display:flex; align-items:baseline; gap:14px}
.brand-mark{color:var(--amber); font-size:22px; transform:translateY(2px); text-shadow:0 0 16px #ffb00066}
.brand-name{font-family:var(--disp); font-weight:700; font-size:22px; letter-spacing:3px; color:#fff}
.brand-name .dot{color:var(--amber)}
.brand-sub{font-size:11px; text-transform:uppercase; letter-spacing:3px; color:var(--mut)}
.status-line{display:flex; align-items:center; gap:20px; font-size:12px}
.live{display:flex; align-items:center; gap:8px; color:var(--ready); letter-spacing:3px; font-weight:600}
.live-dot{width:8px; height:8px; border-radius:50%; background:var(--ready); box-shadow:0 0 10px var(--ready); animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.clock{color:var(--mut); letter-spacing:2px; font-variant-numeric:tabular-nums}

main{padding:30px 34px 10px; max-width:1320px; margin:0 auto}

/* ---- KPIs ---- */
.kpis{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:26px}
.kpi{
  position:relative; background:linear-gradient(160deg, var(--panel), var(--panel-2));
  border:1px solid var(--line); border-radius:4px; padding:18px 18px 16px;
  overflow:hidden; opacity:0; transform:translateY(10px);
  animation:rise .5s cubic-bezier(.2,.7,.2,1) forwards;
}
.kpi::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent,var(--mut-2))}
.kpi .n{font-family:var(--disp); font-weight:700; font-size:38px; line-height:1; color:#fff; font-variant-numeric:tabular-nums}
.kpi .l{display:block; margin-top:10px; font-size:10px; text-transform:uppercase; letter-spacing:2.5px; color:var(--mut)}
.kpi .spark{position:absolute; right:14px; top:16px; font-size:11px; color:var(--accent,var(--mut-2)); opacity:.8}
.kpi[data-k="total"]{--accent:var(--amber)}
.kpi[data-k="ready"]{--accent:var(--ready)}
.kpi[data-k="manual"]{--accent:var(--manual)}
.kpi[data-k="auth_required"]{--accent:var(--auth)}
.kpi[data-k="failed"]{--accent:var(--failed)}
@keyframes rise{to{opacity:1; transform:none}}

/* ---- Coverage-Bar ---- */
.coverage{
  background:linear-gradient(160deg, var(--panel), var(--panel-2));
  border:1px solid var(--line); border-radius:4px; padding:18px 20px; margin-bottom:26px;
}
.coverage-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px}
.coverage-title{font-family:var(--disp); letter-spacing:2px; font-size:13px; text-transform:uppercase; color:#fff}
.coverage-note{font-size:11px; color:var(--mut)}
.coverage-bar{
  display:flex; height:14px; border-radius:3px; overflow:hidden; background:var(--bg-2);
  border:1px solid var(--line-soft);
}
.coverage-bar span{height:100%; transition:width .6s cubic-bezier(.2,.7,.2,1)}
.coverage-legend{display:flex; gap:22px; margin-top:12px; flex-wrap:wrap; font-size:11px; color:var(--mut)}
.coverage-legend i{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:7px; vertical-align:middle}

/* ---- Panel + Tabelle ---- */
.panel{background:linear-gradient(160deg, var(--panel), var(--panel-2)); border:1px solid var(--line); border-radius:4px; overflow:hidden}
.panel-head{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line)}
.panel-head h2{margin:0; font-family:var(--disp); font-size:14px; letter-spacing:2px; text-transform:uppercase; font-weight:600}
.filters{display:flex; gap:8px}
.filters button{
  font-family:var(--mono); font-size:11px; letter-spacing:1px; cursor:pointer;
  background:var(--bg-2); color:var(--mut); border:1px solid var(--line);
  padding:5px 12px; border-radius:3px; transition:.15s;
}
.filters button:hover{color:var(--txt); border-color:var(--mut-2)}
.filters button.on{color:#0a0e14; background:var(--amber); border-color:var(--amber); font-weight:600}

.table-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse}
th,td{text-align:left; padding:13px 20px; border-bottom:1px solid var(--line-soft); white-space:nowrap}
th{font-size:10px; text-transform:uppercase; letter-spacing:2px; color:var(--mut); font-weight:600; background:#0c121b}
tbody tr{transition:background .15s}
tbody tr:hover{background:#16202e}
tbody tr:last-child td{border-bottom:none}
.c-id{font-weight:500; color:#fff}
.c-num{text-align:right; font-variant-numeric:tabular-nums; color:var(--mut)}
td.c-id .nid{color:#e9eef6}
.adapter-tag{font-size:11px; color:var(--mut); letter-spacing:1px; text-transform:uppercase}

/* Status-LED-Badge */
.badge{display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.5px}
.led{width:9px; height:9px; border-radius:50%; background:var(--c); box-shadow:0 0 8px var(--c); flex:none}
.badge.ready{--c:var(--ready)} .badge.manual{--c:var(--manual)}
.badge.auth_required{--c:var(--auth)} .badge.failed{--c:var(--failed)}
.badge .txt{color:var(--txt)}

/* GAEB-Indikator */
.gaeb-yes{color:var(--ready); font-weight:600}
.gaeb-pdf{color:var(--auth); font-size:11px; letter-spacing:1px}
.gaeb-no{color:var(--mut-2)}

td.c-link a{color:var(--amber); text-decoration:none; border-bottom:1px solid transparent; transition:.15s}
td.c-link a:hover{border-bottom-color:var(--amber)}

/* Empty-State */
.empty{padding:60px 20px; text-align:center; color:var(--mut)}
.empty-mark{font-size:40px; color:var(--mut-2); display:block; margin-bottom:14px}
.empty p{max-width:420px; margin:0 auto; line-height:1.6}

/* Footer */
.footnote{
  max-width:1320px; margin:20px auto 0; padding:18px 34px 34px;
  display:flex; gap:20px; justify-content:space-between; flex-wrap:wrap;
  font-size:10.5px; color:var(--mut-2); letter-spacing:.5px; border-top:1px solid var(--line-soft);
}

@media(max-width:880px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .topbar{flex-direction:column; gap:12px; align-items:flex-start}
}