/* G-SV Panel — restliche Flächen (Betriebe, Server, Werkzeuge).
   Tokens aus app.css. --card-min: 14rem, damit fünf Dienst-Karten
   bei 1280 nebeneinander sitzen (Inhalt ~75rem / 14rem). */

:root { --card-min: 14rem; }

/* —— Steuerzentrale / Betriebe-Übersicht ——
   Eine Karte je Dienst. Raster: auto-fit + --card-min.
   Sitzt nach app.css, damit unvollständige ctrl-Regeln dort nicht gewinnen. */

.ctrl-page { padding-bottom: var(--sp-7); }
.ctrl-page .page-head.ctrl-head { align-items: flex-end; }
.ctrl-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.ctrl-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--paper);
  border-radius: var(--radius);
}
.ctrl-summary.is-warn { color: var(--warn-ink); background: var(--warn-bg); }
.ctrl-summary-dot {
  width: var(--sp-3);
  height: var(--sp-3);
  border-radius: 50%;
  background: var(--ok);
  flex-shrink: 0;
}
.ctrl-summary-dot.warn,
.ctrl-summary.is-warn .ctrl-summary-dot { background: var(--warn-ink); }
.ctrl-summary-dot.ok { background: var(--ok); }

.ctrl-sysstrip,
.ctrl-sysstrip-rings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--sp-4);
  margin: 0 0 var(--sp-6);
}
.aggr-dash-statcard {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  min-width: 0;
}
.aggr-dash-statcard svg { display: block; }

.ctrl-nodestrip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin: 0 0 var(--sp-5);
}
.ctrl-nodestrip-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ctrl-node-amp {
  display: inline-flex;
  gap: var(--sp-2);
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  background: var(--paper);
  border-radius: var(--radius);
}
.ctrl-node-amp.off { background: var(--err-bg); }
.ctrl-node-amp-name { font-weight: 700; }
.ctrl-node-amp-meta { color: var(--muted); font-size: 0.85rem; }
.ctrl-node-add { margin-left: auto; }

.ctrl-page .ctrl-globalbar, .ctrl-globalbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--sp-5);
  margin: 0 0 var(--sp-6);
}
.ctrl-gb-block {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
.ctrl-gb-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.ctrl-gb-ic {
  width: var(--tap);
  height: var(--tap);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--bg-deep);
  border-radius: var(--radius);
}
.ctrl-gb-title { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; }
.ctrl-gb-sub { font-size: 0.85rem; margin-top: var(--sp-1); }
.ctrl-gb-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.ctrl-gb-bannerrow { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.ctrl-banner-inp { flex: 1; min-width: min(12rem, 100%); }

.inp { /* class="inp" neben den globalen input-Regeln */
  width: 100%;
}
.btn.warnbtn {
  background: var(--warn-bg);
  border-color: var(--warn-ink);
  color: var(--warn-ink);
}
.btn.warnbtn:hover {
  background: var(--warn-ink);
  border-color: var(--warn-ink);
  color: var(--paper);
}

.ctrl-page .ctrl-grid, .ctrl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min)), 1fr));
  gap: var(--sp-5);
  align-items: stretch;
}
.ctrl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
  container-type: inline-size;
}
.ctrl-card.is-maint { background: var(--warn-bg); border-color: var(--warn-ink); }
.ctrl-card-head { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.ctrl-card-ico {
  width: var(--tap);
  height: var(--tap);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--bg-deep);
  font-size: 1.25rem;
}
.ctrl-card-titlewrap { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ctrl-card-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}
.ctrl-card-host {
  font-size: 0.82rem;
  color: var(--muted);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ctrl-reach {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.ctrl-reach-dot {
  width: var(--sp-3);
  height: var(--sp-3);
  border-radius: 50%;
  background: var(--line-strong);
  flex-shrink: 0;
}
.ctrl-reach.online { color: var(--ok); }
.ctrl-reach.online .ctrl-reach-dot { background: var(--ok); }
.ctrl-reach.offline { color: var(--err); }
.ctrl-reach.offline .ctrl-reach-dot { background: var(--err); }
.ctrl-card-desc { margin: 0; color: var(--muted); font-size: 0.9rem; }

.ctrl-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}
@container (min-width: 18rem) {
  .ctrl-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ctrl-metrics.is-loading { opacity: 0.55; }
.ctrl-metric {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-2);
  background: var(--bg-deep);
  border-radius: var(--radius);
  text-align: center;
  min-width: 0;
}
.ctrl-metric-v {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.ctrl-metric-v small { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.ctrl-metric-l {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ctrl-metric.is-hot { background: var(--warn-bg); }
.ctrl-metric.is-hot .ctrl-metric-v { color: var(--warn-ink); }

.ctrl-status-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ctrl-statebadge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.82rem;
  font-weight: 700;
  padding: var(--sp-1) var(--sp-3);
  border-radius: 999px;
  background: var(--bg-deep);
  color: var(--muted);
}
.ctrl-statebadge-dot {
  width: var(--sp-2);
  height: var(--sp-2);
  border-radius: 50%;
  background: currentColor;
}
.ctrl-statebadge.live { color: var(--ok); background: var(--ok-bg); }
.ctrl-statebadge.maint { color: var(--warn-ink); background: var(--warn-bg); }
.ctrl-statebadge.sched { color: var(--focus); background: var(--accent-soft); }
.ctrl-statebadge.paused { color: var(--warn-ink); background: var(--warn-bg); }
.ctrl-card-meta { font-size: 0.82rem; color: var(--muted); }
.ctrl-card-msg {
  margin: 0;
  padding: var(--sp-3);
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-radius: var(--radius);
}

.ctrl-adv { background: var(--bg-deep); border-radius: var(--radius); }
.ctrl-adv-sum {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-3) var(--sp-4);
  min-height: var(--tap);
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  user-select: none;
}
.ctrl-adv-sum::-webkit-details-marker { display: none; }
.ctrl-adv-badge {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--sp-1) var(--sp-2);
  border-radius: 999px;
  color: var(--muted);
  background: var(--paper);
}
.ctrl-adv-badge.on { color: var(--warn-ink); background: var(--warn-bg); }
.ctrl-adv-body { padding: 0 var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.ctrl-sched-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.ctrl-sched-row label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.ctrl-adv-foot { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.ctrl-card-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  flex-wrap: wrap;
}
.btn.ctrl-toggle, .ctrl-toggle {
  flex: 1 1 10rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-4);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.ctrl-toggle:hover:not(:disabled) { background: var(--accent-soft); }
.ctrl-toggle:disabled { opacity: 0.6; cursor: not-allowed; }
.btn.ctrl-toggle.is-on, .ctrl-toggle.is-on {
  background: var(--warn-bg);
  border-color: var(--warn-ink);
  color: var(--warn-ink);
}
.ctrl-toggle-track {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--line);
}
.ctrl-toggle-knob {
  position: absolute;
  top: var(--sp-1);
  left: var(--sp-1);
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--paper);
}
.ctrl-toggle.is-on .ctrl-toggle-track { background: var(--warn-ink); }
.ctrl-toggle.is-on .ctrl-toggle-knob { left: auto; right: var(--sp-1); }
.ctrl-toggle-lbl { text-align: left; }
.ctrl-open { flex: 0 0 auto; white-space: nowrap; text-decoration: none; }
.ctrl-orders-row { margin-top: 0; }
.ctrl-orders-row .ctrl-toggle { width: 100%; }
.btn.ctrl-toggle.sm, .ctrl-toggle.sm { font-size: 0.9rem; }
.ctrl-foot-note { font-size: 0.9rem; margin: var(--sp-5) 0 0; max-width: 48rem; }

.ctrl-monitor { margin-top: var(--sp-6); }
.ctrl-section-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-5);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.aggr-dash-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
}
.aggr-dash-section-title { font-family: var(--serif); font-size: 1.25rem; margin: 0; }
.aggr-dash-section-btn {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  min-height: var(--tap);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.aggr-dash-nodes { margin-bottom: var(--sp-6); }
.aggr-dash-nodes-bento { display: flex; flex-direction: column; gap: var(--sp-5); }
.dash-bento { display: flex; flex-direction: column; gap: var(--sp-5); }

.nodecard { padding: 0; overflow: hidden; }
.nodehead {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-deep);
  flex-wrap: wrap;
}
.nodename {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  color: var(--ink);
}
.nodepill { margin-left: var(--sp-1); }
.nodestats { display: flex; gap: var(--sp-5); }
.nodestats .ns,
.ns {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 2.75rem;
}
.ns span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; }
.ns b { font-family: var(--serif); font-size: 1.1rem; }
.nodegroup { padding: var(--sp-3) var(--sp-5) var(--sp-2); }
.nodegrouplabel {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: var(--sp-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.col-chev { display: inline-block; width: 1rem; }

@media (max-width: 64rem) {
  .ctrl-page .ctrl-grid, .ctrl-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  }
  .ctrl-page .page-head.ctrl-head {
    flex-direction: column;
    align-items: stretch;
  }
}
@media (max-width: 40rem) {
  .ctrl-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctrl-sched-row { grid-template-columns: 1fr; }
  .nodehead { align-items: flex-start; }
  .nodestats { width: 100%; justify-content: space-between; }
}
@media (max-width: 28rem) {
  .ctrl-grid { grid-template-columns: 1fr; }
  .ctrl-card-foot { flex-direction: column; align-items: stretch; }
  .ctrl-card-foot .btn,
  .ctrl-open { width: 100%; }
  .ctrl-head-actions .btn { flex: 1 1 auto; }
  .ctrl-node-add { margin-left: 0; }
}

/* —— Server-Übersicht: fehlende Haken der bestehenden Zeilen-Sprache —— */
.app-pc-head { align-items: flex-end; }
.app-pc-create { flex: 0 0 auto; }
.app-pc-body,
.ctr-grid-body { min-width: 0; }
.ctr-group { min-width: 0; }
.ctr-group-chev,
.ctr-group-icon-emoji { flex: 0 0 auto; }
.ctr-group-title { font-family: var(--serif); font-size: 1.15rem; margin: 0; }

/* —— Server-Ansicht: Kopf, Kennzahlen, Werkzeuge —— */
.aggr-detail-bento { display: flex; flex-direction: column; gap: var(--sp-5); }
.aggr-detail-sticky { min-width: 0; }
.aggr-hero-left { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.aggr-hero-image,
.aggr-hero-health { overflow: hidden; text-overflow: ellipsis; }
.aggr-act { flex: 0 1 auto; }
.aggr-chip-ic { display: none; }
.aggr-chip-sub,
.aggr-chip-tag,
.aggr-chip-stats-label { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.aggr-chip-status { cursor: default; }
.aggr-stat-sub,
.aggr-stat-tag { font-size: 0.82rem; color: var(--muted); }
.aggr-stat-refresh {
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0;
}
.aggr-stat-net-rows { display: flex; flex-direction: column; gap: var(--sp-1); }
.aggr-stat-net-row { display: flex; justify-content: space-between; gap: var(--sp-3); }
.aggr-stat-bar { height: 0.45rem; border-radius: var(--radius); background: var(--bg-deep); overflow: hidden; margin-top: var(--sp-2); }
.aggr-srv-addr-left,
.aggr-srv-addr-right { min-width: 0; }
.aggr-srv-addr-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.aggr-srv-addr-val-copy { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.aggr-srv-addr-copyhint { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.aggr-srv-addr-count { font-weight: 700; color: var(--ink); }
.aggr-srv-addr-empty { margin-top: var(--sp-2); }
.aggr-srv-addr-player {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.aggr-srv-addr-avatar {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  object-fit: cover;
}
.aggr-srv-addr-kick,
.aggr-srv-addr-ban {
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0;
}
.aggr-srv-addr-more { cursor: pointer; }
.aggr-srv-addr-popwrap { position: relative; display: inline-flex; }
.addr-pop-item { justify-content: flex-start; width: 100%; }
.addr-pop-backdrop { position: fixed; inset: 0; }
.dash-grid { display: flex; flex-direction: column; gap: var(--sp-5); }
.dash-console-col { min-width: 0; }
.sh-grid {
  display: grid;
  grid-template-columns: minmax(3rem, 5rem) repeat(auto-fit, minmax(3rem, 1fr));
  gap: var(--sp-2) var(--sp-3);
  align-items: center;
  overflow-x: auto;
  max-width: 100%;
}

/* Konsole / Terminal / Bildschirm */
.console-input-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); align-items: center; }
.console-older-hint { text-align: center; padding: var(--sp-2) 0 var(--sp-3); }
.vps-term-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.vps-term-status,
.vps-rdp-status {
  font-size: 0.82rem;
  font-weight: 700;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius);
  background: var(--bg-deep);
}
.vps-term-status.st-open,
.vps-rdp-status.st-on { color: var(--ok); background: var(--ok-bg); }
.vps-term-status.st-error,
.vps-term-status.st-failed { color: var(--err); background: var(--err-bg); }
.term-mini-chip {
  display: inline-flex;
  gap: var(--sp-2);
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  background: var(--bg-deep);
  border-radius: 999px;
  font-size: 0.82rem;
}

/* Dateien */
.tab-files {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--sp-4);
}
.tab-files-tree {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.tab-files-tree-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.tab-files-crumbs {
  flex: 1 1 8rem;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
.tab-files-mkdir,
.tab-files-fixperm,
.tab-files-sftp,
.tab-files-upload { flex: 0 0 auto; }
.tab-files-list { display: flex; flex-direction: column; }
.tab-files-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  min-height: var(--tap);
  cursor: pointer;
}
.tab-files-row.is-current,
.tab-files-row.is-dir:hover { background: var(--accent-soft); }
.tab-files-size { font-variant-numeric: tabular-nums; margin-left: auto; }
.tab-files-act {
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0;
}
.tab-files-act-del { color: var(--err); }
.tab-files-empty { padding: var(--sp-6) 0; text-align: center; }
.tab-files-loading { min-height: 7.5rem; }

@media (max-width: 40rem) {
  .tab-files-tree-head {
    flex-wrap: wrap !important; /* inline nowrap würde auf schmalen Fenstern seitlich scrollen */
  }
  .tab-files-row .tab-files-act { flex: 0 0 auto; }
}

/* Logs */
.tab-logs { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.tab-logs-files-head,
.tab-logs-viewer-head,
.tab-logs-filterbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.tab-logs-files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--sp-2);
}
.tab-logs-file-tile { justify-content: flex-start; text-align: left; height: auto; }
.tab-logs-file-meta { min-width: 0; display: flex; flex-direction: column; }
.tab-logs-file-name {
  font-family: var(--font-mono);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tab-logs-hero {
  min-height: 14rem;
  overflow: auto;
  margin: 0;
  padding: var(--sp-4);
  background: var(--mark-plate);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  white-space: pre-wrap;
  border-radius: var(--radius);
}
.tab-logs-search { flex: 1; min-width: min(10rem, 100%); }
.tab-logs-chip { min-height: var(--tap); }

/* Sicherungen */
.tab-backups { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.bk-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.bk-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  flex: 1;
  font-family: var(--serif);
}
.bk-create-btn { flex: 0 0 auto; }
.bk-schedule-card,
.bk-locked-card { background: var(--bg-deep); }
.bk-schedule-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.bk-sched-toggle { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); cursor: pointer; }
.bk-sched-field { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.bk-sched-lbl { font-size: 0.85rem; }
.bk-sched-hint {
  display: block;
  margin: var(--sp-3) 0 0;
  white-space: normal;
  word-break: normal;
}
.bk-sched-flow { display: inline; }
.bk-sched-hint b,
.bk-sched-hint strong { display: inline; }
.bk-list { display: flex; flex-direction: column; }
.bk-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.bk-row-ic { flex: 0 0 auto; }
.bk-row-body { flex: 1; min-width: 0; }
.bk-row-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-row-meta { color: var(--muted); font-size: 0.85rem; }
.bk-act { min-height: var(--tap); }
.bk-act-del { color: var(--err); }
.bk-empty { text-align: center; padding: var(--sp-7) var(--sp-4); }
.bk-empty-ic { font-size: 2rem; margin-bottom: var(--sp-3); }
.bk-empty-title { font-family: var(--serif); font-size: 1.15rem; margin-bottom: var(--sp-2); }
.bk-empty-sub { color: var(--muted); margin-bottom: var(--sp-4); }
.bk-loading { min-height: 5rem; }

@media (max-width: 28rem) {
  .bk-row { align-items: flex-start; }
  .bk-act { flex: 1 1 auto; }
}

/* Server-Einstellungen (Variablen-Tab) */
.tab-env { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.env-raw-card,
.env-reinstall-btn { color: var(--err); border-color: var(--err); }
.env-danger-card { background: var(--err-bg); }

/* Datenbank / Zugangsdaten */
.cred-shell,
.cred-card,
.cred-info-banner,
.cred-primary-card,
.cred-block { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); }
.cred-info-banner { margin-bottom: var(--sp-4); }
.cred-info-locked { background: var(--bg-deep); }
.cred-intro { margin: 0 0 var(--sp-3); }
.cred-section { margin-bottom: var(--sp-5); }
.cred-section-title { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 var(--sp-3); }
.cred-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--sp-4);
}
.cred-row,
.cred-list-row,
.cred-primary-row { min-width: 0; }
.cred-val-wrap { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }
.cred-val-pw { word-break: break-all; }
.cred-btn { min-height: var(--tap); }
.cred-newform {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-end;
  flex-wrap: wrap;
}
.cred-newform-field { flex: 1; min-width: min(12rem, 100%); }
.cred-newform-inline { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: flex-end; }
.cred-empty,
.cred-empty-wrap { padding: var(--sp-5) 0; }
.cred-list { display: flex; flex-direction: column; }
.cred-list-ico { flex: 0 0 auto; }
.cred-list-keyval { min-width: 0; }
.cred-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cred-action-btn { min-height: var(--tap); }
.cred-link { color: var(--accent); }
.cred-status { font-weight: 700; }
.cred-status-approved { color: var(--ok); }
.cred-status-pending { color: var(--warn-ink); }
.cred-primary-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.cred-primary-val { font-family: var(--font-mono); font-weight: 700; overflow-wrap: anywhere; }
.cred-tab { min-width: 0; }

/* Zugriff */
.tab-access { min-width: 0; }
.tab-access__body { display: flex; flex-direction: column; gap: var(--sp-6); }
.tab-access__sec { min-width: 0; }
.tab-access__sec-title { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 var(--sp-3); }
.tab-access__sec-sub { margin: 0 0 var(--sp-3); }
.tab-access__row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.tab-access__users { display: flex; flex-direction: column; gap: var(--sp-3); }
.tab-access__user { padding: var(--sp-4); }
.tab-access__user-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.tab-access__user-name { font-weight: 700; min-width: 0; }
.tab-access__role-pill { margin-left: var(--sp-2); }
.tab-access__feats { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tab-access__feat {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  background: var(--bg-deep);
  border-radius: var(--radius);
  cursor: pointer;
}
.tab-access__feat-label { font-size: 0.82rem; }
.tab-access__empty { padding: var(--sp-3) 0; }
.tab-access__remove { color: var(--err); }

/* Mods */
.tab-mods,
.tab-modpack { min-width: 0; }
.tm-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin-bottom: var(--sp-4);
}
.tm-search { flex: 1; min-width: min(12rem, 100%); }
.tm-sources { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.tm-sources-label { font-size: 0.82rem; color: var(--muted); font-weight: 700; }
.tm-sec-title { font-family: var(--serif); font-size: 1.1rem; margin: var(--sp-5) 0 var(--sp-3); }
.tm-installed,
.tm-results-section { display: flex; flex-direction: column; gap: var(--sp-2); }
.tm-installed-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.tm-installed-title { font-weight: 700; min-width: 0; flex: 1; }
.tm-empty { padding: var(--sp-6) 0; text-align: center; color: var(--muted); }
.tm-btn-scan,
.tm-btn-update { min-height: var(--tap); }
.tm-cl-body { font-size: 0.9rem; }
.tm-cl-empty { color: var(--muted); }
.tm-cl-toggle { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-weight: 700; min-height: var(--tap); }
.tm-compat-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tm-upd-icon,
.tm-upd-icon-ph { width: 1.25rem; height: 1.25rem; }
.tm-modal,
.modgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--sp-3);
}
.modcard { background: var(--paper); border: 1px solid var(--line); padding: var(--sp-3); border-radius: var(--radius); min-width: 0; cursor: pointer; }
.modicon { width: 2.25rem; height: 2.25rem; }
.modname { font-weight: 700; margin-top: var(--sp-2); overflow: hidden; text-overflow: ellipsis; }
.moddesc,
.modmeta { color: var(--muted); font-size: 0.82rem; }
.modbanner,
.mp-side,
.mp-fullwidth,
.mp-client { min-width: 0; }
.mp-cat { margin-bottom: var(--sp-5); }
.mp-cat-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.mp-cat-title { font-weight: 700; flex: 1; }
.mp-cat-list { display: flex; flex-direction: column; }
.mp-file {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
}
.mp-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); }
.mp-file-size { color: var(--muted); font-size: 0.82rem; }
.mp-file-del { min-width: var(--tap); min-height: var(--tap); }
.mp-empty { padding: var(--sp-3) 0; }

/* Features / Domains / Overview */
.tab-features,
.tab-domains,
.tab-overview,
.tab-db,
.tab-perms,
.srv-tab-game,
.tab-dash { min-width: 0; }
.feat-row-ic { width: 1.25rem; text-align: center; }
.domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--sp-5);
}
.domain-col,
.domain-col-left,
.domain-col-right { min-width: 0; }
.domain-ov-modal { width: min(36rem, 96vw); }

/* Create-Modal Preise / Spielkarten */
.cc-price-lbl { color: var(--muted); }
.cc-price-val { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; }
.gameicon { width: 2.25rem; height: 2.25rem; object-fit: contain; }
.gamever { color: var(--muted); font-size: 0.82rem; }

/* Konto-Einstellungen (Karten-Haken; Inhalt bleibt beim bestehenden Blatt) */
.settings-body { display: flex; flex-direction: column; gap: var(--sp-5); }
.settings-tabs { display: flex; flex-direction: column; gap: var(--sp-4); }
.settings-pane { min-width: 0; }
.settings-group-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--sp-3);
}
.aggr-settings-group-cards { display: contents; }
.aggr-settings-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  height: auto;
  min-height: var(--tap);
}
.aggr-settings-card-icon { flex: 0 0 auto; }
.aggr-settings-card-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.aggr-settings-card-chev { margin-left: auto; color: var(--muted); }
.gsv-switch {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  display: inline-block;
  background: var(--line);
  border-radius: 999px;
}
.gsv-switch-knob {
  position: absolute;
  top: var(--sp-1);
  left: var(--sp-1);
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--paper);
}

/* Listen / Tickets / Benutzer (Command-Deck) */
.cd-head-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.btn.cd-sm { min-height: var(--tap); }
.cd-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin-bottom: var(--sp-4);
}
.cd-filter-grow { flex: 1; min-width: min(12rem, 100%); }
.cd-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cd-seg { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); }
.cd-seg-btn { min-height: var(--tap); }
.cd-list { display: flex; flex-direction: column; }
.cd-row,
.cd-row-click {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.cd-row-click { cursor: pointer; }
.cd-row-body { flex: 1; min-width: 0; }
.cd-row-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-row-sub { color: var(--muted); font-size: 0.85rem; }
.cd-row-chev { color: var(--muted); }
.cd-row-empty { padding: var(--sp-5) 0; color: var(--muted); }
.cd-badge-info { background: var(--accent-soft); color: var(--accent); }
.cd-badge-muted { background: var(--bg-deep); color: var(--muted); }
.cd-empty { text-align: center; padding: var(--sp-7) var(--sp-4); }
.cd-empty-glyph { font-size: 2rem; margin-bottom: var(--sp-3); }
.cd-empty-title { font-family: var(--serif); font-size: 1.15rem; }
.cd-empty-sub { color: var(--muted); }
.cd-kv { display: flex; flex-direction: column; gap: var(--sp-2); }
.cd-kv-row { display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr); gap: var(--sp-3); }
.cd-kv-k { color: var(--muted); font-size: 0.85rem; }
.cd-kv-v { min-width: 0; overflow-wrap: anywhere; }
.cd-label { font-weight: 700; font-size: 0.9rem; }
.cd-mono { font-family: var(--font-mono); }
.cd-msg-bubble { background: var(--bg-deep); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); }
.cd-msg-meta { color: var(--muted); font-size: 0.82rem; }
.cd-pager { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.cd-pager-info { color: var(--muted); font-size: 0.85rem; }
.cd-section { margin-bottom: var(--sp-6); }
.cd-thread { display: flex; flex-direction: column; gap: var(--sp-3); }
.cd-tbl-wrap,
.cd-tbl-scroll { overflow-x: auto; max-width: 100%; }
.cd-tbl { width: 100%; border-collapse: collapse; }
.cd-tbl th,
.cd-tbl td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); }
.cd-tbl-click { cursor: pointer; }
.cd-tbl-empty { color: var(--muted); }
.cd-tbl-muted { color: var(--muted); }
.cd-tbl-right { text-align: right; }
.cd-tbl-strong { font-weight: 700; }
.cd-stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--sp-4);
}
.cd-stack-card { padding: var(--sp-4); }
.cd-stack-head { display: flex; align-items: center; gap: var(--sp-3); }
.cd-stack-icon,
.cd-stack-img { width: 2.25rem; height: 2.25rem; }
.cd-stack-title { font-weight: 700; }
.cd-stack-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cd-envbox { font-family: var(--font-mono); background: var(--bg-deep); padding: var(--sp-3); overflow: auto; }
.cd-danger { color: var(--err); }
.cd-modal-ov {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}
.cd-modal {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-6);
  width: min(36rem, 96vw);
  max-height: 90vh;
  overflow: auto;
  box-shadow: var(--shadow);
}
.cd-modal-head,
.cd-modal-foot { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cd-modal-title { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; margin: 0; flex: 1; }
.cd-view { min-width: 0; }

/* Bridge-Rechte */
.mcperms-page { min-width: 0; }
.mcperms-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--sp-4);
}
.mcperms-tile { cursor: pointer; }
.mcperms-tile-ico { font-size: 1.6rem; }
.mcperms-split {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.mcperms-split-ranks,
.mcperms-split-servers,
.mcperms-list-pane,
.mcperms-detail-pane { min-width: 0; }
.mcperms-empty { padding: var(--sp-6) 0; text-align: center; color: var(--muted); }
@media (max-width: 64rem) {
  .mcperms-split { grid-template-columns: 1fr; }
}

/* Overlay-Reste / kleine Haken */
.modal-overlay { position: fixed; inset: 0; z-index: 300; background: color-mix(in srgb, var(--ink) 45%, transparent); }
.chmod-modal,
.sftp-modal,
.pmgmt-modal {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-6);
  width: min(28rem, 96vw);
  max-height: 90vh;
  overflow: auto;
  box-shadow: var(--shadow);
}
.sftp-modal-overlay { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); background: color-mix(in srgb, var(--ink) 45%, transparent); }
.chmod-grid { width: 100%; }
.chmod-cb { width: auto; }
.chmod-octal { font-family: var(--font-mono); font-weight: 700; }
.pmgmt-list { display: flex; flex-direction: column; }
.pmgmt-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.pmgmt-rank { font-weight: 700; }
.stats-ov-body { min-width: 0; }
.stats-ov-sub { color: var(--muted); font-size: 0.85rem; }
.stats-ov-refresh { min-width: var(--tap); }
.fmup-sub { color: var(--muted); font-size: 0.85rem; }
.tmsg { min-width: 0; }
.wide { max-width: none; }
.app-page-stacks,
.app-page-users { min-width: 0; }
.app-login-field,
.app-login-form { width: 100%; }
.gsv-help-btn { min-width: var(--tap); min-height: var(--tap); }
.gsv-tour-hint-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.aggr-modal-backbar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.aggr-modal-back,
.aggr-modal-crumb { color: var(--muted); font-size: 0.85rem; }
.aggr-user-wrap { min-width: 0; }

@media (max-width: 28rem) {
  .cd-kv-row { grid-template-columns: 1fr; }
  .tab-access__row { flex-direction: column; align-items: stretch; }
  .aggr-hero-actions { width: 100%; }
  .aggr-hero-actions .btn { flex: 1 1 auto; }
  .bk-header { align-items: stretch; }
  .bk-create-btn { width: 100%; }
}

@media (min-width: 90rem) {
  .ctrl-page .ctrl-grid, .ctrl-grid {
    grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
  }
}

/* Haken ohne eigenes Aussehen — Overflow in Gitternetzen, Klasse der Liste bekannt */
.tab-terminal, .tab-screen, .tab-rdp,
.tab-logs-files, .tab-logs-viewer,
.tab-access__sec-owner, .tab-access__sec-coowner,
.tab-access__sec-list, .tab-access__sec-share,
.tab-access__owner-row, .tab-access__share-row,
.tab-access__avatar, .tab-access__loading,
.tab-files-up, .tab-files-act-edit, .tab-files-act-dl,
.tab-files-act-ren, .tab-files-act-chmod,
.tab-logs-close, .tab-logs-empty, .tab-logs-file-sub,
.tab-logs-filterbar-label, .tab-logs-loading,
.tab-logs-viewer-name, .tab-logs-viewer-stats,
.bk-act-dl, .bk-act-restore, .bk-empty-btn, .bk-save-sched-btn,
.bk-title-ic, .bk-title-tx,
.aggr-act-primary, .aggr-chip-java,
.aggr-stat-cpu, .aggr-stat-disk, .aggr-stat-net,
.aggr-stat-ram, .aggr-stat-status,
.settings-group, .aggr-settings-head, .aggr-settings-body,
.aggr-settings-grid, .aggr-settings-group, .aggr-settings-grouped,
.aggr-settings-ios, .aggr-settings-pane, .aggr-nav-label,
.mcperms-head, .mcperms-split-users, .mcperms-tile-count,
.cd-avatar, .cd-badge, .cd-check, .cd-chip-check, .cd-msg, .cd-thread-reply,
.cred-row-secret, .cred-ssl-pill, .env-raw-toggle,
.game, .modbody, .mp-up, .perf-card, .perms-db-card,
.tm-btn-primary, .tm-modal-card, .tm-spin,
.gsv-tour, .gsv-tour-arrow, .gsv-tour-nav,
.gsv-tour-pop-body, .gsv-tour-pop-ico,
.gtop-r-pill, .ov-term-cta, .aggr-modal-back-arrow {
  min-width: 0;
}

/* ===========================================================================
   16.08.2026 — KONTRAST-KORREKTUREN NACH DEM UMSTIEG AUF HELL
   Owner: "die z.B. sein Name — schwarzer Hintergrund und schwarzer Username?"

   Am ANGEMELDETEN Panel gemessen (nicht geraten), Kontrastwerte:
     .btn.ghost       Text rgb(232,236,245) auf rgb(242,235,224)  = 1.0
                      → "Server anbinden", "Aktualisieren", "+ Server",
                        "Alle beenden" sind praktisch unsichtbar
     Benutzername     Text rgb(26,23,19)   auf rgba(20,26,42,.7)  = 1.1
                      → schwarz auf dunkel, genau der gemeldete Fall

   Ursache: Die Flaechen sind auf den hellen Satz umgestellt, einzelne Bauteile
   tragen ihre Farbe aber noch fest aus dem dunklen Satz. Beides zusammen ergibt
   Text, den man nicht lesen kann. Hier stehen nur Farben - kein Layout, keine
   Groessen, damit nichts verrutscht.
   Lesbarkeit >= 4,5:1.
   =========================================================================== */

/* --- 1) Ruhige Knoepfe: Text nimmt die Textfarbe der Flaeche ------------- */
.btn.ghost,
.btn.ghost.sm,
.btn.ghost:visited {
  color: var(--text);
  border-color: var(--border, rgba(0, 0, 0, .18));
}
.btn.ghost:hover { color: var(--text); }
/* Deaktivierte bleiben erkennbar zurueckgenommen, aber lesbar. */
.btn.ghost:disabled,
.btn.ghost[disabled] { color: var(--muted); opacity: .75; }

/* --- 2) Kopfleiste: heller Grund statt dunkler Insel --------------------- */
/* Der dunkle Balken stammt aus dem alten Satz und stand als Fremdkoerper auf
   dem Papier. Mit hellem Grund passen auch die dunklen Texte darin wieder. */
.gtop,
.topbar,
.gtop.gtop-glass,
.shell .gmain > .gtop {
  background: var(--surface, #fbf7f0);
  color: var(--text);
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, .12));
  backdrop-filter: none;
}
.gtop a, .topbar a,
.gtop button, .topbar button,
.gtop .user-chip, .topbar .user-chip { color: var(--text); }

/* Der Benutzer-Chip: heller Grund, dunkler Text - vorher dunkler Grund mit
   dunklem Text (gemessen 1.1). */
.user-chip {
  background: var(--elevated, rgba(0, 0, 0, .04));
  border-color: var(--border, rgba(0, 0, 0, .16));
  color: var(--text);
}
.user-chip:hover { background: rgba(0, 0, 0, .07); }

/* Das runde Zeichen daneben traegt weissen Text - dann muss sein Grund dunkel
   genug bleiben. Akzentfarbe statt Verlauf aus dem dunklen Satz. */
.avatar,
.user-chip .avatar {
  background: var(--accent, #2f5d3f);
  color: var(--on-accent, #fff);
  box-shadow: none;
}

/* Runde Knoepfe der Kopfleiste (Hilfe, Glocke, Aktualisieren). */
.icon-btn {
  background: var(--elevated, rgba(0, 0, 0, .04));
  color: var(--text);
  border-color: var(--border, rgba(0, 0, 0, .16));
}
.icon-btn:hover { background: rgba(0, 0, 0, .07); color: var(--text); }

/* --- 3) Seitenleiste: Gruppen-Ueberschriften waren fast unsichtbar ------- */
/* Im Bild standen dort nur "ÜBE…" und "ADM…" - heller Text auf hellem Grund,
   dazu abgeschnitten. Farbe auf --muted (lesbar, aber zurueckgenommen), und
   der Text darf umbrechen statt zu verschwinden. */
.nav .nav-sec,
.nav h3,
.gside .nav-sec,
.gside h3 {
  color: var(--muted);
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.nav a, .gside a { color: var(--text); }
.nav a .ic, .gside a .ic { opacity: 1; }

/* --- 4) Nachtrag, am angemeldeten Panel nachgemessen --------------------
   Nach dem Einbinden blieben 14 Stellen unter 2,5:1 - alle nach demselben
   Muster: Bauteil traegt seine Farbe fest aus dem dunklen Satz.
     "G-SV" / "Panel"  (Marke)            k=1.1 / 1.5
     "Übersicht" / "Admin" (.navlabel)    k=1.5
     "‹" (.gside-toggle)                  k=1.4
     Benutzerzeichen (.gava)              k=1.0
   Owner hatte genau das gemeldet: "schwarzer Hintergrund und schwarzer Username". */
.gbrand, .gbrand *,
.gbrand-name, .gbrand-sub,
.gside-brand, .gside-brand * { color: var(--text); }
.gbrand-sub, .gside-brand small { color: var(--muted); }

.navlabel, .aggr-nav-label,
.nav .navlabel, .gside .navlabel { color: var(--text); }
.navlabel.sec, .aggr-nav-label.sec { color: var(--muted); }

.gside-toggle {
  color: var(--text);
  background: var(--elevated, rgba(0,0,0,.05));
  border-color: var(--border, rgba(0,0,0,.16));
}
.gside-toggle:hover { background: rgba(0,0,0,.09); color: var(--text); }

.gava, .cd-avatar, .gava * {
  background: var(--accent, #2f5d3f);
  color: var(--on-accent, #fff);
}
.cd-avatar.user { background: var(--elevated, rgba(0,0,0,.08)); color: var(--text); }

/* --- 5) Endgueltig, mit den echten Selektoren aus der laufenden Seite ----
   Gemessen: die Kopfleiste heisst `.gtop.gtop-glass.aggr-topbar` und traegt
   noch `rgba(15,20,35,.5)` aus dem dunklen Satz, waehrend ihr Text schon
   `rgb(26,23,19)` (dunkel) ist - dunkel auf dunkel, k=1.1. Die Marke "G-SV"
   sitzt in einem Element OHNE eigene Klasse und erbt `rgb(232,236,245)`
   (fast weiss) auf weissem Grund, k=1.1.
   `!important` ist hier begruendet: die alten Regeln sind spezifischer
   (dreifach-Klasse) und stammen aus dem dunklen Satz, der hier nicht mehr gilt.
   Sobald app.css vollstaendig umgestellt ist, kann dieser Block weg. */
.gtop.gtop-glass,
.gtop.gtop-glass.aggr-topbar,
.shell .gmain > .gtop.gtop-glass {
  background: var(--surface, #fffaf2) !important;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.12)) !important;
  backdrop-filter: none !important;
}
/* Jeder Text in der Kopfleiste nimmt die Textfarbe der Flaeche - ausser dem,
   was auf einem farbigen Grund sitzt (Akzent-Knopf, Benutzerzeichen). */
.gtop.gtop-glass, .gtop.gtop-glass * { color: var(--text) !important; }
.gtop.gtop-glass .btn.primary,
.gtop.gtop-glass .btn.primary *,
.gtop.gtop-glass .avatar, .gtop.gtop-glass .avatar *,
.gtop.gtop-glass .gava, .gtop.gtop-glass .gava * { color: var(--on-accent, #fff) !important; }
.gtop.gtop-glass .avatar, .gtop.gtop-glass .gava { background: var(--accent, #2f5d3f) !important; }

/* Seitenleiste: derselbe Fall. Sie ist zudem eingeklappt (34 px) - dort duerfen
   die Beschriftungen NICHT abgeschnitten stehenbleiben, sie gehoeren dann ganz
   weg (das Zeichen traegt die Bedeutung, der Rest kommt beim Aufklappen). */
.gnav, .gnav *, .aggr-nav-primary, .aggr-nav-primary * { color: var(--text) !important; }
.gnav .navlabel.sec, .aggr-nav-label.sec { color: var(--muted) !important; }
.gside-toggle, .gfoot-logout {
  color: var(--text) !important;
  background: var(--elevated, rgba(0,0,0,.05)) !important;
}

/* --- 6) Die aggr-Familie: sie sitzt NEBEN .gtop, nicht darin -------------
   Deshalb hat die Regel aus Block 5 sie nicht erreicht. Gemessen blieben:
   .aggr-brand-name ("G-SV", k=1.1), die Marken-Unterzeile ("Panel", k=1.5),
   das Benutzerzeichen (.gava, k=1.0), der Benutzername (k=1.1) und
   "Staff-Ansicht" (.btn.ghost im Kopf, k=1.1) - alle hell auf hell. */
.aggr-topbar, .aggr-topbar *,
.aggr-brand, .aggr-brand *,
.aggr-brand-name, .aggr-brand-sub,
.aggr-user, .aggr-user * { color: var(--text) !important; }
.aggr-brand-sub, .aggr-topbar .muted { color: var(--muted) !important; }
.aggr-topbar { background: var(--surface, #fffaf2) !important; }
.aggr-topbar .btn.ghost { color: var(--text) !important; border-color: var(--border, rgba(0,0,0,.18)) !important; }
.gava, .aggr-user .gava, .aggr-avatar {
  background: var(--accent, #2f5d3f) !important;
  color: var(--on-accent, #fff) !important;
}

/* --- 7) Der graue Kasten in der Kopfleiste ------------------------------
   Owner: "kannst du mal nen normalen Hintergrund machen".
   Hinter "Staff-Ansicht / ? / Glocke / Benutzer" lag eine dunkle Pille aus dem
   alten Satz - ein grauer Block auf hellem Papier, und der Grund dafuer, dass
   der Text darin bei k=1.1 blieb. Sie bekommt jetzt gar keinen eigenen Grund
   mehr: die Knoepfe darin tragen ihre Form selbst. */
.gtop-r-pill,
.gtop .gtop-r-pill,
.aggr-topbar .gtop-r-pill,
.gtop-r, .aggr-topbar-right, .aggr-user-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
/* Die Knoepfe darin bekommen die normale ruhige Form. */
.gtop-r-pill .btn.ghost,
.gtop-r-pill .icon-btn,
.aggr-topbar .btn.ghost {
  background: var(--elevated, rgba(0,0,0,.045)) !important;
  border: 1px solid var(--border, rgba(0,0,0,.16)) !important;
  color: var(--text) !important;
}
.gtop-r-pill .btn.ghost:hover,
.aggr-topbar .btn.ghost:hover { background: rgba(0,0,0,.08) !important; }
/* Der Benutzer-Bereich bleibt als ein Stueck erkennbar, aber hell. */
.gtop-r-pill .user-chip, .aggr-user {
  background: var(--elevated, rgba(0,0,0,.045)) !important;
  border: 1px solid var(--border, rgba(0,0,0,.16)) !important;
  color: var(--text) !important;
}

/* --- 8) Das Grau ueberall weg ------------------------------------------
   Owner: "guck alles durch und mach dieses Grau weg, z.B. bei Konto".
   Im Bild: "Server anbinden", "Aktualisieren", "Alle beenden", "+ Server" und
   das Eingabefeld fuer den Hinweis stehen als graue bzw. dunkle Bloecke auf dem
   Papier. Alle stammen aus dem dunklen Satz (Fuellung rgba(255,255,255,.03) auf
   dunklem Grund gedacht - auf hellem Grund wird daraus ein grauer Klotz).
   Ab hier gilt fuer die GANZE Oberflaeche: ruhige Knoepfe und Eingabefelder
   haben den hellen Grund der Flaeche und einen Rand, keine Fuellung. */
.btn.ghost, .btn.ghost.sm, .btn.secondary, .btn:not(.primary):not(.danger):not(.accent),
button.ghost, a.btn.ghost {
  background: var(--surface, #fffaf2) !important;
  border: 1px solid var(--border, rgba(0,0,0,.18)) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.btn.ghost:hover, .btn:not(.primary):not(.danger):not(.accent):hover {
  background: rgba(0,0,0,.05) !important;
}
.btn.ghost:disabled, .btn:disabled, .btn[disabled] {
  background: var(--surface, #fffaf2) !important;
  color: var(--muted) !important;
  opacity: .65 !important;
}

/* Eingabefelder: heller Grund, dunkler Text, sichtbarer Rand. */
input[type=text], input[type=search], input[type=email], input[type=password],
input[type=number], input:not([type]), textarea, select, .input, .field input {
  background: var(--surface, #fffaf2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border, rgba(0,0,0,.18)) !important;
}
input::placeholder, textarea::placeholder { color: var(--muted) !important; opacity: 1; }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent, #2f5d3f) !important;
  outline: 2px solid rgba(47,93,63,.25) !important;
  outline-offset: 1px;
}

/* Karten und Kaesten: heller Grund statt grauer Fuellung. */
.card, .panel, .box, .tile, .cd-card, .aggr-card {
  background: var(--surface, #fffaf2) !important;
  border: 1px solid var(--border, rgba(0,0,0,.12)) !important;
  color: var(--text) !important;
}

/* --- 9) Server-Liste: Struktur statt einer einzigen Flaeche --------------
   Owner: "und hier zu einfarbig, ich sehe gar nicht, wo was ist."
   Nach dem Umstieg auf Papier hatten Zeilen, Karten und Grund exakt dieselbe
   Farbe - die Liste zerfloss zu einer Flaeche. Dazu ueberlappten die Knoepfe
   rechts ("Sicherung / Stoppen / Neu / Konsole") und wurden abgeschnitten.
   Struktur kommt hier NICHT durch Farbe, sondern durch Abstand, eine feine
   Linie und einen leicht abgesetzten Zeilengrund beim Ueberfahren. */

/* Der Seiten-Grund wird eine Spur dunkler als die Karten darauf - dadurch
   heben sich Karten ueberhaupt erst ab. */
.gmain, .aggr-main, .content { background: var(--bg, #f2ebe0); }
.card, .panel, .clist, .cd-list, .desk-list {
  background: var(--surface, #fffaf2) !important;
  border: 1px solid var(--border, rgba(0,0,0,.13)) !important;
  border-radius: var(--r-2, 12px);
}

/* Zeilen: feine Trennlinie, Luft, und beim Ueberfahren ein leichter Grund. */
.clist > *, .cd-list > *, .crow, .ud-item {
  border-bottom: 1px solid var(--border, rgba(0,0,0,.09));
}
.clist > *:last-child, .cd-list > *:last-child { border-bottom: 0; }
.crow:hover, .ud-item:hover, .clist > *:hover { background: rgba(0,0,0,.035); }

/* Gruppen-Ueberschriften ("Game Servers", "Proxy", "VPS Servers") bekommen
   Luft darueber, damit die Gruppen als Gruppen lesbar sind. */
.clist h3, .cd-list h3, .desk-list h3 { margin-top: var(--sp-4, 1.25rem); }

/* 🔴 Die Knopfleiste rechts: sie stand zusammengequetscht uebereinander und
   lief aus der Zeile heraus. Sie darf umbrechen und braucht Abstand. */
.crow .btn, .ud-item .btn, .clist .btn { white-space: nowrap; }
.crow > :last-child, .ud-item > :last-child {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--sp-2, .5rem));
  justify-content: flex-end;
  min-width: 0;
}
/* Der Name links darf schrumpfen statt die Knoepfe zu verdraengen. */
.crow > :first-child, .ud-item > :first-child { min-width: 0; overflow-wrap: anywhere; }

/* --- 10) Knoepfe in Listenzeilen liefen ueber ---------------------------
   Bild vom Owner: "Sicher…Stoppen Neu Konso…" - vier Knoepfe in festen schmalen
   Kaestchen, der Text quillt darueber hinaus und ueberlappt den Nachbarn.
   Ursache: eine feste Breite/Hoehe aus dem alten Satz (runde Symbol-Knoepfe),
   waehrend hier Text darin steht. Ein Knopf ist so breit wie sein Text. */
.clist .btn, .cd-list .btn, .crow .btn, .ud-item .btn,
.clist button, .cd-list button {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: .42rem .7rem !important;
  border-radius: var(--r-1, 9px) !important;
  white-space: nowrap;
  overflow: visible;
  flex: 0 0 auto;
}
/* Die Knopfgruppe am Zeilenende: Abstand, Umbruch, nichts wird abgeschnitten. */
.clist .btns, .crow .btns, .ud-item .btns,
.clist [class*="actions"], .crow [class*="actions"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .4rem !important;
  justify-content: flex-end;
  min-width: 0;
  overflow: visible !important;
}

/* --- 11) Das Marken-Zeichen: violetter Globus raus, GSV-Zeichen rein ------
   Owner: "und nen Logo?" - in der Seitenleiste stand ein violetter Kreis mit
   einem Globus-SVG (`.glogo` in app.js:6611), nicht die Marke.
   Erster Versuch war falsch: ich habe ein ZWEITES Bild in die Kopfleiste
   gesetzt, statt dieses hier zu ersetzen - dann standen beide da.
   Jetzt genau ein Zeichen, an der richtigen Stelle. */
.glogo {
  background: url("/gsv-logo.png") center/contain no-repeat !important;
  border-radius: var(--r-1, 9px);
  box-shadow: none !important;
}
.glogo svg { display: none !important; }

/* --- 12) Die doppelte Marke in der Kopfleiste ---------------------------
   Owner: "warum steht dort jetzt G-SV??"
   `.aggr-brand-mini` (app.js:6669) wiederholt die Marke oben links, obwohl sie
   in der Seitenleiste schon steht - und hatte durch meine Knopf-Regel obendrein
   einen grauen Kasten bekommen. Sie ist nur fuer den Fall gedacht, dass die
   Seitenleiste eingeklappt/verborgen ist. Also: kein Kasten, und sichtbar nur
   dort, wo die Seitenleiste weg ist (schmale Fenster). */
.aggr-brand-mini {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.aggr-brand-mini .aggr-brand-name { color: var(--text) !important; font-weight: 700; }
@media (min-width: 981px) { .aggr-brand-mini { display: none !important; } }

/* --- 13) Der Verlauf war zu klein zum Lesen -----------------------------
   Owner: "und mach beim Verlauf das groesser - wer soll das lesen koennen?"
   In "Auslastung nach Panel" standen Container-Name, Wert und Kern-Angabe in
   ~11 px, dazu grau auf hell. Zahlen, die man nicht lesen kann, sind keine
   Zahlen. Groessen aus den Token, nicht frei gewaehlt. */
.aggr-load-panel, .aggr-load-panel *,
[class*="load-panel"], [class*="aggr-usage"] { font-size: 0.95rem; }
[class*="load-panel"] .name, [class*="load-panel"] b,
[class*="aggr-usage"] b { font-size: 1.02rem; font-weight: 700; color: var(--text); }
[class*="load-panel"] small, [class*="aggr-usage"] small,
[class*="load-panel"] .klein { font-size: 0.88rem !important; color: var(--muted) !important; }
/* Die Kacheln der Kennzahlen oben (CPU/RAM/DISK/UPTIME): Beschriftung lesbar. */
.aggr-stat, .aggr-stat *, [class*="stat-tile"] { font-size: 0.95rem; }
[class*="stat-tile"] .lbl, .aggr-stat .lbl { font-size: 0.82rem; letter-spacing: .04em; color: var(--muted); }

/* --- 14) "alles einfarbig" — die Kacheln hoben sich nicht ab -------------
   Owner: "wo ist hier denn bitte das Angepasste, es ist alles einfarbig?"
   CPU/RAM/DISK/UPTIME lagen als beiger Verlauf auf beigem Grund, ohne Rand -
   man sah keine Kachel, nur eine Flaeche. Jetzt: heller Kachelgrund auf dem
   etwas dunkleren Seitengrund, feiner Rand, klare Kante. Kein Verlauf. */
.aggr-stat-card, .ctrl-stat, .aggr-chip-stats, [class*="stat-card"] {
  background: var(--surface, #fffaf2) !important;
  background-image: none !important;
  border: 1px solid var(--border, rgba(0,0,0,.14)) !important;
  border-radius: var(--r-2, 12px) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
  padding: .85rem 1rem !important;
}
/* Die grosse Zahl klar, die Beschriftung zurueckgenommen - aber lesbar. */
.aggr-stat-card b, [class*="stat-card"] b,
.aggr-stat-card .val, [class*="stat-card"] .val { color: var(--text) !important; }
.aggr-stat-card .lbl, [class*="stat-card"] .lbl,
.aggr-chip-stats-label { color: var(--muted) !important; }

/* Der Seitengrund bleibt beige, damit die hellen Kacheln darauf sichtbar sind.
   Ohne diesen Unterschied hilft auch der Rand wenig. */
.gmain, .aggr-main, .content, .page { background: var(--bg, #efe7db) !important; }

/* --- 15) Klickbares muss wie klickbar aussehen ---------------------------
   Owner: "keine klaren Kaesten, wo man sieht: ey, hier ist was zu klicken -
   und nicht nur Schrift?"
   Gemessen: die Kennzahlen sind <button class="gsv-sys-cell aggr-dash-statcard">
   mit `background: rgba(0,0,0,0)` und `border-width: 0` - also echte Knoepfe
   ohne jede sichtbare Form. Sie bekommen einen Kasten, eine Kante und eine
   Reaktion beim Ueberfahren. */
.gsv-sys-cell, .aggr-dash-statcard, button.gsv-sys-cell {
  background: var(--surface, #fffaf2) !important;
  background-image: none !important;
  border: 1px solid var(--border, rgba(0,0,0,.14)) !important;
  border-radius: var(--r-2, 12px) !important;
  padding: .8rem 1rem !important;
  text-align: left;
  transition: background .15s, border-color .15s, transform .1s;
}
.gsv-sys-cell:hover, .aggr-dash-statcard:hover {
  background: #fff !important;
  border-color: var(--accent, #2f5d3f) !important;
}
.gsv-sys-cell:active, .aggr-dash-statcard:active { transform: translateY(1px); }
.gsv-sys, .ctrl-sysstrip, .aggr-dash-stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)) !important;
  gap: var(--sp-3, .8rem) !important;
}

/* --- 16) Bei schmalem Fenster war alles zusammengequetscht ---------------
   Owner: "wenn Fenster kleiner ist, ist auch hier alles wieder zusammen-
   gedrueckt - dann mach mehr Reihen nach unten, oben breiter!"
   Im Bild: vier Dienst-Karten nebeneinander auf ~980 px, dadurch brach jede
   Ueberschrift ("Game-\nServer", "Datenbanken") und die Kennzahlen standen
   zweispaltig ineinander.
   Also: eine Karte braucht mehr Mindestbreite. Passt sie nicht, rutscht sie
   in die naechste Reihe - lieber untereinander als gequetscht. */
:root { --card-min: 20rem; }
.ctrl-cards, .ctrl-grid, [class*="ctrl-card-grid"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min)), 1fr)) !important;
}
/* Ueberschriften brechen nicht mehr mitten im Wort. */
.ctrl-card h3, .ctrl-card .name, .ctrl-card-title {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
/* Kennzahlen in der Karte: zwei Spalten nur, wenn wirklich Platz ist. */
.ctrl-metrics, .ctrl-card [class*="metric"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: .5rem .9rem;
}

/* --- 17) Signalfarben und weisser Text auf hellem Grund ------------------
   Owner: "und was ist hier in weiss?" / "das Gelbe sieht man gar nicht auf
   dem Sand-Hintergrund!"
   Gelb und Weiss stammen aus dem dunklen Satz: dort trugen sie gegen fast
   Schwarz, auf Sand verschwinden sie. Warnfarbe wird dunkler, Weiss wird zur
   normalen Textfarbe. Die Bedeutung bleibt (gruen = gut, gelb = achtung,
   rot = Fehler) - nur die Toene passen jetzt zum hellen Grund. */
:root {
  --warn: #8a5a00;        /* dunkles Bernstein statt hellem Gelb */
  --warn-ink: #6b4600;
  --warn-bg: #fdf3dd;
  --ok: #1f6b3f;
  --ok-bg: #e6f2ea;
  --err: #9a2222;
  --err-bg: #fbeaea;
}
/* Alles, was fest ein helles Gelb/Weiss trug, kommt auf die Token. */
[style*="#f5c04a"], [style*="#fbbf24"], [style*="#facc15"], [style*="#eab308"],
.warn, .is-warn, .metric-warn, [class*="-warn"] { color: var(--warn) !important; }
[style*="#fff"], [style*="#ffffff"], .text-white { color: var(--text) !important; }

/* Die kleinen Prozentwerte in den Server-Zeilen: kraeftig genug zum Lesen. */
[class*="sysrow"] b, [class*="node-row"] b,
[class*="metric"] b, .aggr-node-metric b { font-weight: 700; }
[class*="metric"].ok, .ok { color: var(--ok) !important; }
[class*="metric"].hot, [class*="metric"].warn { color: var(--warn) !important; }
[class*="metric"].err, .err, .danger { color: var(--err) !important; }

/* Abschnitts-Ueberschriften ("MONITORING & VERWALTUNG") sichtbar. */
h2, h3, .sec-title, [class*="section-title"], [class*="sec-head"] { color: var(--text) !important; }

/* --- 18) "alles zusammengedrueckt und gezwungen" ------------------------
   Owner: "ich will immer ein sauberes, cleanes UI."
   Gemessen: `.ctrl-grid` gibt Karten von 365 px, aber im `.ctrl-card-head`
   (331 px) draengeln Symbol + Titel + Zustands-Chip + Adresse in EINE Zeile.
   Ergebnis: "Game-\nServe•Erreichbar", "games…" abgeschnitten, Kennzahlen
   zweispaltig ineinander.
   Ruhe entsteht hier nicht durch mehr Platz, sondern durch weniger pro Zeile:
   Symbol + Name oben, alles Weitere darunter. */
.ctrl-card-head {
  display: grid !important;
  grid-template-columns: auto 1fr;
  grid-template-areas: "ico name" "ico addr" "state state";
  align-items: center;
  gap: .15rem .7rem;
  row-gap: .35rem;
}
.ctrl-card-head > :first-child { grid-area: ico; }
.ctrl-card-head h3, .ctrl-card-head .ctrl-card-title, .ctrl-card-head b {
  grid-area: name;
  font-size: 1.05rem;
  line-height: 1.25;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
/* Adresse darf kuerzen statt umzubrechen - mit vollem Text im Tooltip. */
.ctrl-card-head [class*="addr"], .ctrl-card-head small {
  grid-area: addr;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
/* Der Zustand bekommt eine eigene Zeile - er quetscht sonst den Namen. */
.ctrl-card-head .ctrl-reach, .ctrl-card-head [class*="reach"],
.ctrl-card-head [class*="state"] { grid-area: state; justify-self: start; }

/* Kennzahlen: lieber zwei ruhige Spalten als vier gequetschte Halbzeilen. */
.ctrl-card [class*="metric"], .ctrl-metrics {
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)) !important;
  gap: .55rem 1rem !important;
}
/* Etwas mehr Luft in der Karte - "clean" heisst vor allem Abstand. */
.ctrl-card { padding: 1.05rem 1.1rem !important; gap: .7rem !important; }
:root { --card-min: 22rem; }

/* --- 19) Verlaufs-Dialog: Signalfarben brauchen einen ruhigen Grund -----
   Owner: "und hier den Hintergrund anpassen, so dass man gelb, gruen und rot
   gut sehen kann!"
   In "Auslastung nach Panel" sassen die Container auf grauen Kacheln
   (rgba-Fuellung aus dem dunklen Satz). Gruen auf Grau ist blass, Gelb geht
   darauf ganz unter. Heller, neutraler Grund - dann tragen alle drei Farben. */
[class*="load-panel"] [class*="cell"], [class*="aggr-usage"] [class*="cell"],
[class*="load-panel"] li, [class*="usage-item"], [class*="ctr-usage"] {
  background: var(--surface, #fffaf2) !important;
  background-image: none !important;
  border: 1px solid var(--border, rgba(0,0,0,.13)) !important;
  border-radius: var(--r-2, 10px) !important;
}
/* Die Gruppen-Kaesten darum eine Spur abgesetzt, damit die Gruppen lesbar sind. */
[class*="load-panel"] > section, [class*="load-panel"] > div > section,
[class*="aggr-usage"] > section { background: var(--bg, #f4ede2) !important; }

/* Die drei Signalfarben: kraeftig genug fuer hellen Grund, klar unterscheidbar.
   Gruen = laeuft ruhig · Bernstein = achtung · Rot = zu viel. */
[class*="load-panel"] .ok, [class*="usage"] .ok, .ring-ok, [class*="pct"].ok { color: #1f6b3f !important; }
[class*="load-panel"] .warn, [class*="usage"] .warn, .ring-warn, [class*="pct"].warn { color: #8a5a00 !important; }
[class*="load-panel"] .err, [class*="usage"] .err, .ring-err, [class*="pct"].err { color: #9a2222 !important; }
/* Der Prozentwert im Ring: gross genug und in voller Farbe. */
[class*="load-panel"] [class*="ring"] text, [class*="usage"] [class*="ring"] text { font-weight: 800; }
[class*="load-panel"] svg circle[stroke], [class*="usage"] svg circle[stroke] { stroke-width: 3.2; }
/* Die Diagrammflaeche selbst: heller Grund, sichtbares Gitternetz. */
[class*="chart"], canvas + div, .aggr-chart-wrap {
  background: var(--surface, #fffaf2) !important;
  border-radius: var(--r-2, 10px);
}