/* JARVIS — Agent Agenten · seiten-eigene Komponenten.
   Basis-Design aus jarvis-pages-base.css. */

.ag-hero {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--ki-s3, 12px);
  align-items: center;
  padding: var(--ki-s3, 12px);
  border: 1px solid var(--ki-border, rgba(0,255,65,.22));
  border-radius: var(--ki-r-md, 8px);
  background: rgba(0,255,65,.035);
}
@media (max-width: 760px) { .ag-hero { grid-template-columns: 1fr; } }

.ag-hero-icon {
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center; font-size: 30px;
  border: 1px solid var(--ki-border-bright, rgba(0,255,65,.7));
  background: rgba(0,255,65,.08); flex: none;
}
.ag-hero-name { font-size: 19px; font-weight: 700; letter-spacing: .05em; margin-bottom: 3px; }
.ag-hero-desc { font-size: 12px; color: var(--ki-text-2, #82c997); line-height: 1.55; }
.ag-hero-meta { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
@media (max-width: 760px) { .ag-hero-meta { align-items: flex-start; } }

.ag-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 3px 10px; border-radius: 20px; font-size: 10px; letter-spacing: .06em;
  border: 1px solid var(--ki-border, rgba(0,255,65,.28)); background: rgba(0,255,65,.06);
}
.ag-chip b { color: var(--ki-green, #00ff41); }

.ag-kann { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 7px; }
.ag-kann li {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 10px; font-size: 11.5px; line-height: 1.5;
  border: 1px solid var(--ki-border, rgba(0,255,65,.16));
  border-radius: var(--ki-r-sm, 4px); background: rgba(0,0,0,.22);
}
.ag-kann li::before { content: '▸'; color: var(--ki-green, #00ff41); flex: none; }

.ag-karte {
  padding: 11px 12px; border: 1px solid var(--ki-border, rgba(0,255,65,.16));
  border-radius: var(--ki-r-md, 8px); background: rgba(5,11,7,.55);
}
.ag-karte h5 { font-size: 10px; letter-spacing: .12em; color: #47765a; margin-bottom: 6px; font-weight: 600; }
.ag-wert { font-size: 21px; font-weight: 700; color: var(--ki-green, #00ff41); line-height: 1.1; }
.ag-wert-klein { font-size: 12px; font-weight: 600; color: var(--ki-green, #00ff41); }
.ag-sub { font-size: 10px; color: var(--ki-text-2, #82c997); margin-top: 4px; line-height: 1.45; }
.ag-ok { color: var(--ki-green, #00ff41); }
.ag-aus { color: #ff453a; }
.ag-grau { color: #47765a; }

/* Agenten-Karte auf der Übersicht */
.ag-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 11px; }
.ag-eintrag {
  display: flex; gap: 11px; padding: 12px; text-decoration: none; color: inherit;
  border: 1px solid var(--ki-border, rgba(0,255,65,.18));
  border-radius: var(--ki-r-md, 8px); background: rgba(5,11,7,.55);
  transition: border-color .18s, background .18s;
}
.ag-eintrag:hover { border-color: var(--ki-border-bright, rgba(0,255,65,.75)); background: rgba(0,255,65,.06); }
.ag-eintrag .ic {
  width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center;
  font-size: 19px; flex: none; border: 1px solid var(--ki-border, rgba(0,255,65,.3)); background: rgba(0,255,65,.06);
}
.ag-eintrag .nm { font-size: 13.5px; font-weight: 700; margin-bottom: 3px; }
.ag-eintrag .ds { font-size: 11px; color: var(--ki-text-2, #82c997); line-height: 1.5; }
.ag-eintrag .ft { margin-top: 7px; display: flex; gap: 6px; flex-wrap: wrap; }