:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --surface:#111827;
  --muted:#6b7280;
  --text:#e5e7eb;
  --primary:#2563eb;
  --primary-700:#1d4ed8;
  --danger:#dc2626;
  --ring:#334155;
  --card:#0b1220;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#0b1220;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji",sans-serif;line-height:1.45}
a{color:#93c5fd;text-decoration:none}
a:hover{text-decoration:underline}

.container{
  max-width: none;   /* volle Fensterbreite */
  width: 100%;
  margin: 32px 0;    /* kein horizontales Zentrieren mehr */
  padding: 0 20px;   /* etwas Innenabstand an den Rändern */
}

.topbar{position:sticky;top:0;z-index:10;display:flex;gap:20px;align-items:center;justify-content:space-between;
  padding:12px 18px;background:#0b1220;border-bottom:1px solid #1f2937;box-shadow:0 1px 0 rgba(255,255,255,0.04)}
.brand{font-weight:800;letter-spacing:.2px}
.nav a{margin-right:14px;padding:8px 10px;border-radius:8px}
.nav a:hover{background:#0f172a}

.toolbar{display:flex;align-items:center;gap:10px}
.user-pill{display:flex;align-items:center;gap:8px;padding:4px 8px;border:1px solid #1f2937;border-radius:12px;background:#0f172a}
.user-pill .avatar{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:#1f2937;font-weight:700}
.user-pill .name{font-size:.95rem;color:#e5e7eb}

.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .9rem;border-radius:.6rem;background:var(--primary);color:#fff;
     border:none;cursor:pointer;font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.btn:hover{background:var(--primary-700)}
.btn.secondary{background:#374151}
.btn.ghost{background:transparent;border:1px solid #374151;color:#e5e7eb}
.btn.small{padding:.35rem .6rem;font-size:.9rem;border-radius:.5rem}
.btn.danger{background:var(--danger)}

form.row{display:grid;grid-template-columns:repeat(6,minmax(180px,1fr));gap:12px;align-items:end}
label{display:flex;flex-direction:column;gap:6px;font-size:.95rem}
select,input{background:#0f172a;border:1px solid #374151;border-radius:10px;color:#e5e7eb;padding:.6rem .7rem;min-height:40px}
select:focus,input:focus{outline:none;border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.2)}

.table{width:100%;border-collapse:separate;border-spacing:0 8px;margin-top:10px}
.table th{text-align:left;color:#cbd5e1;font-weight:700;padding:10px;position:relative}
.table td{padding:10px;background:#0f172a;border-top:1px solid #1f2937;border-bottom:1px solid #1f2937}
.table tr td:first-child{border-left:1px solid #1f2937;border-top-left-radius:10px;border-bottom-left-radius:10px}
.table tr td:last-child{border-right:1px solid #1f2937;border-top-right-radius:10px;border-bottom-right-radius:10px}
.table td.table-actions{display:flex;gap:8px;align-items:center}
.table td.table-actions form{margin:0}

.table .table-filters th{padding:6px 10px}
.table-filter-input{
  width:100%;
  background:#0b1220;
  border:1px solid #1f2937;
  border-radius:8px;
  padding:6px 8px;
  color:#e5e7eb;
  font-size:0.9rem;
}
.table-filter-input:focus{
  outline:none;
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(96,165,250,.25);
}

.table .is-sortable{cursor:pointer;}
.table .is-sortable::after{
  content:'';
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:0.75rem;
  opacity:0.5;
}
.table .is-sortable[data-sort-direction="asc"]::after{content:'▲';}
.table .is-sortable[data-sort-direction="desc"]::after{content:'▼';}

.card{background:#0f172a;border:1px solid #1f2937;border-radius:14px;padding:16px;margin:10px 10px 18px 0;display:inline-block;min-width:240px}
.card-title{
  font-size:1.35rem;
  font-weight:800;
  color:var(--text);
  margin-bottom:6px;
}
.card-meta{
  font-size:.95rem;
  color:var(--muted);
}
.card-body{margin:12px 0;color:#cbd5e1}
.card-actions{margin-top:12px}
.card .meta{color:#9ca3af;font-size:.9rem}

.cards{display:flex;flex-wrap:wrap;gap:16px}
.page-intro{color:#9ca3af;margin-bottom:18px;max-width:820px}
.two-column{display:flex;flex-wrap:wrap;gap:28px}
.two-column>.form{flex:1 1 360px}
.two-column>.panel{flex:1 1 260px}
.form.stack{display:flex;flex-direction:column;gap:16px;max-width:520px}
.form.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.form.inline-filter{display:flex;gap:16px;align-items:flex-end;margin-bottom:20px;flex-wrap:wrap}
.form-actions{display:flex;gap:10px;align-items:center}
.fieldset{border:1px solid #1f2937;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:12px;background:#0f172a}
.fieldset.horizontal{flex-direction:row;flex-wrap:wrap}
.fieldset.horizontal .chk{flex:1 1 220px}
.panel{background:#0f172a;border:1px solid #1f2937;border-radius:14px;padding:18px;margin-bottom:24px}
.panel-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}
.panel-meta{color:#9ca3af;font-size:.95rem}
.panel.info{background:#0b1325}
.meta-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;color:#cbd5e1}
.meta-list li{font-size:.95rem}
.history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.history li{padding:12px;border:1px solid #1f2937;border-radius:12px;background:#0f172a}
.history-date{font-weight:700;margin-bottom:6px}
.history-comment{color:#9ca3af;font-style:italic;margin-top:4px}
.table-wrapper{overflow-x:auto}
.inline-filter label{min-width:200px}
.accordion{border:1px solid #1f2937;border-radius:12px;margin-bottom:12px;background:#0f172a;padding:0}
.accordion>summary{padding:12px 16px;cursor:pointer;display:flex;align-items:center;gap:12px;font-weight:700}
.accordion[open]>summary{border-bottom:1px solid #1f2937}
.accordion form{padding:16px}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:.75rem;text-transform:uppercase;background:#1f2937;color:#cbd5e1}
.badge.muted{background:#374151}

@media (max-width: 900px){
  .two-column{flex-direction:column}
}


.flash{display:grid;gap:8px;margin-bottom:12px}
.flash-item{padding:10px 12px;border-radius:10px;background:#0f172a;border:1px solid #1f2937}
.flash-item.success{border-color:#16a34a}
.flash-item.error{border-color:#ef4444}
.flash-item.info{border-color:#60a5fa}

.device-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #374151;border-radius:10px;background:#0f172a;margin-right:8px}
.actions{white-space:nowrap}
.actions .btn{margin-right:6px}
.actions-row{display:flex;gap:10px;align-items:center}
.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.25rem 0.6rem;
  border-radius:999px;
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  background:#374151;
  color:#e5e7eb;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}