/* ============================================================
   JARVIS COMMAND CENTER — Design System
   Premium · Dark · Glass · Futuristic (but clean)
   ============================================================ */
:root {
  /* base layers */
  --bg:      #080a0f;
  --bg-1:    #0d1017;
  --panel:   rgba(20, 26, 36, 0.72);
  --panel-2: rgba(30, 38, 52, 0.6);
  --input:   #121722;
  --border:  rgba(255, 255, 255, 0.08);
  --border-2:rgba(255, 255, 255, 0.14);
  /* text */
  --text:  #e8edf6;
  --muted: #8a93a6;
  --dim:   #5b6478;
  /* accent = JARVIS core cyan */
  --accent:      #38bdf8;
  --accent-2:    #22d3ee;
  --accent-soft: rgba(56, 189, 248, 0.14);
  --accent-glow: rgba(56, 189, 248, 0.45);
  /* semantic status */
  --ok:   #34d399;   /* gesund / erfolg */
  --info: #38bdf8;   /* aktiv / normal  */
  --warn: #fbbf24;   /* hinweis         */
  --attn: #fb923c;   /* aufmerksamkeit  */
  --bad:  #f87171;   /* fehler/kritisch */
  --idle: #64748b;   /* offline/inaktiv */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 18px 50px -20px rgba(0,0,0,.7);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
/* Text überall markierbar + kopierbar (Strg+C / Strg+V) */
body, main, .cc, .card, .cc-panel, .cc-reply, .cc-log, .cc-note, .msg, .op, .row, .trace, .wf-node { -webkit-user-select: text; user-select: text; }
body {
  overflow-x: hidden;   /* Sicherheitsnetz: nichts darf die Seite seitlich aufreissen (Mobil-Fund 19.08.2026) */
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(34,211,238,.06), transparent 55%),
    var(--bg);
  color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before { /* faint grid */
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 80%);
}
.hidden { display: none !important; }
b { font-weight: 700; }
::selection { background: var(--accent-soft); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.09); border-radius: 20px; }

/* ---------- Login ---------- */
.login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 50;
  background: radial-gradient(700px 500px at 50% 30%, rgba(56,189,248,.12), transparent 60%), var(--bg); }
.login-card { width: min(360px, 90vw); background: var(--panel); backdrop-filter: blur(20px);
  border: 1px solid var(--border); border-radius: 20px; padding: 36px 32px; text-align: center;
  display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow); }
.login-card p { color: var(--muted); font-size: 14px; }
.login-card input { background: var(--input); border: 1px solid var(--border); color: var(--text);
  border-radius: 12px; padding: 13px 14px; font-size: 16px; text-align: center; letter-spacing: .05em; }
.login-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.err { color: var(--bad); min-height: 1em; font-size: 13px; }

/* ---------- Brand ---------- */
.logo { font-size: 19px; font-weight: 800; letter-spacing: .14em; display: flex; align-items: center; gap: 9px; }
.logo span { color: var(--accent); text-shadow: 0 0 14px var(--accent-glow); }
.logo .dotcore { width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow), 0 0 3px #fff inset; animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 0%,100% { opacity: .55; transform: scale(.85);} 50% { opacity: 1; transform: scale(1);} }

/* ---------- Layout ---------- */
.app { display: flex; min-height: 100dvh; position: relative; z-index: 1; }
.sidebar { width: 232px; padding: 22px 14px; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100dvh;
  background: linear-gradient(180deg, rgba(13,16,23,.9), rgba(8,10,15,.6)); backdrop-filter: blur(10px); }
.sidebar nav { display: flex; flex-direction: column; gap: 3px; flex: 1; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-radius: 10px;
  color: var(--muted); cursor: pointer; text-decoration: none; font-weight: 500; font-size: 14.5px;
  position: relative; transition: background .15s, color .15s; }
.nav-item span:first-child { width: 20px; text-align: center; font-size: 15px; opacity: .9; }
.nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); }
.nav-item.active::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
.side-footer { font-size: 12px; color: var(--dim); }

.workspace { flex: 1; display: flex; flex-direction: column; min-width: 0; }
main { flex: 1; padding: 26px clamp(16px, 3.5vw, 40px) 96px; max-width: 1180px; width: 100%; margin: 0 auto; }
main.fullbleed { max-width: none; padding: 18px clamp(14px, 2.2vw, 30px) 0; }

/* ---------- Topbar + Command Bar ---------- */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px;
  padding: 12px clamp(14px, 3vw, 28px); border-bottom: 1px solid var(--border);
  background: rgba(8,10,15,.72); backdrop-filter: blur(16px); }
.topbar .brand { display: none; }
.cmdbar { flex: 1; max-width: 620px; display: flex; align-items: center; gap: 10px;
  background: var(--input); border: 1px solid var(--border); border-radius: 12px; padding: 0 12px; }
.cmdbar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cmdbar .ic { color: var(--accent); font-size: 15px; }
.cmdbar input { flex: 1; background: transparent; border: 0; color: var(--text); padding: 11px 0; font-size: 14.5px; }
.cmdbar input:focus { outline: none; }
.cmdbar kbd { font: 600 11px/1 ui-monospace, monospace; color: var(--muted); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; }
.topstat { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--muted); }
.conn { display: flex; align-items: center; gap: 6px; }
.conn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.conn.off { color: var(--bad); } .conn.off::before { background: var(--bad); box-shadow: 0 0 10px var(--bad); }

/* ---------- Typo ---------- */
h1 { font-size: 25px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 3px; }
.sub { color: var(--muted); margin-bottom: 22px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.section { margin-top: 24px; }

/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: 14px; }
.grid.cols2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.cols4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.card { background: var(--panel); backdrop-filter: blur(14px); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); position: relative; }
.card h3 { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; margin-bottom: 14px; }
.big { font-size: 28px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.big small { font-size: 13px; color: var(--muted); font-weight: 400; }

/* ---------- Rows ---------- */
.row { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.row:last-child { border-bottom: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .title { font-weight: 500; }
.row .meta { color: var(--muted); font-size: 12.5px; }
.clickable { cursor: pointer; transition: transform .12s; }
.card.clickable:hover, .op.clickable:hover, .stat.clickable:hover { transform: translateY(-2px); border-color: var(--border-2); }
.clickable:hover .title { color: var(--accent); }

/* ---------- Badges + status ---------- */
.badge { font-size: 11px; padding: 3px 9px; border-radius: 20px; background: var(--panel-2); color: var(--muted);
  font-weight: 700; white-space: nowrap; letter-spacing: .04em; border: 1px solid var(--border); }
.badge.ok   { background: rgba(52,211,153,.14); color: var(--ok);   border-color: rgba(52,211,153,.25); }
.badge.info { background: rgba(56,189,248,.14); color: var(--info); border-color: rgba(56,189,248,.25); }
.badge.warn { background: rgba(251,191,36,.14); color: var(--warn); border-color: rgba(251,191,36,.25); }
.badge.attn { background: rgba(251,146,60,.14); color: var(--attn); border-color: rgba(251,146,60,.25); }
.badge.bad  { background: rgba(248,113,113,.14);color: var(--bad);  border-color: rgba(248,113,113,.25); }
.badge.idle { background: rgba(100,116,139,.14);color: var(--idle); border-color: rgba(100,116,139,.25); }
.badge.accent { background: var(--accent-soft); color: var(--accent); border-color: rgba(56,189,248,.25); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--idle); flex: none; }
.dot.ok   { background: var(--ok);   box-shadow: 0 0 8px var(--ok); }
.dot.info { background: var(--info); box-shadow: 0 0 8px var(--info); }
.dot.attn { background: var(--attn); box-shadow: 0 0 8px var(--attn); }
.dot.bad  { background: var(--bad);  box-shadow: 0 0 8px var(--bad); }
.dot.idle { background: var(--idle); }

/* ---------- Buttons ---------- */
.btn { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer; transition: .15s; }
.btn:hover { border-color: var(--border-2); background: rgba(255,255,255,.06); }
.btn.primary { background: linear-gradient(180deg, var(--accent), #1f9fd6); border-color: var(--accent); color: #04141d;
  box-shadow: 0 6px 20px -8px var(--accent-glow); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { background: rgba(248,113,113,.16); border-color: rgba(248,113,113,.4); color: #ffb4b4; }
.btn.danger:hover { background: rgba(248,113,113,.24); }
.btn.small { padding: 6px 12px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: default; }

/* ---------- Inputs ---------- */
input, textarea, select { background: var(--input); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 10px 12px; font-size: 15px; font-family: inherit; width: 100%; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { min-height: 80px; resize: vertical; }
.form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.form .inline { display: flex; gap: 8px; } .form .inline > * { flex: 1; }
details.adder { margin-top: 16px; }
details.adder summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; list-style: none; }
details.adder summary::-webkit-details-marker { display: none; }

/* ============================================================
   COMMAND CENTER — System Pulse
   ============================================================ */
.pulse { display: flex; gap: 26px; align-items: center; overflow: hidden; }
.pulse::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(300px 200px at 12% 50%, var(--accent-soft), transparent 70%); }
.core { --c: var(--info); position: relative; width: 148px; height: 148px; flex: none; display: grid; place-items: center; }
.core b { font-size: 11px; letter-spacing: .32em; color: var(--c); text-shadow: 0 0 16px var(--c); z-index: 3; }
.core span { position: absolute; border-radius: 50%; border: 1px solid var(--c); }
.core span:nth-child(1) { inset: 0;    opacity: .22; border-style: dashed; animation: spin 16s linear infinite; }
.core span:nth-child(2) { inset: 24px; opacity: .5;  animation: spin 9s linear infinite reverse; }
.core span:nth-child(3) { inset: 48px; opacity: .95; box-shadow: 0 0 34px var(--c), inset 0 0 22px var(--c);
  animation: corepulse 3.2s ease-in-out infinite; }
.core.ready  { --c: var(--ok);   }
.core.active { --c: var(--info); }
.core.attn   { --c: var(--attn); }
.core.crit   { --c: var(--bad);  }
.core.active span:nth-child(2){ animation-duration: 5s; }
.core.attn span:nth-child(3), .core.crit span:nth-child(3){ animation-duration: 1.5s; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes corepulse { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }
.pulse-body { flex: 1; min-width: 0; }
.pulse-state { font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 12px; }
.pulse-state.ready { color: var(--ok); } .pulse-state.active { color: var(--info); }
.pulse-state.attn { color: var(--attn); } .pulse-state.crit { color: var(--bad); }
.steffi-brief { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; font-size: 14px; color: var(--text); margin-bottom: 16px; line-height: 1.5; }
.steffi-brief .who { color: var(--accent); font-size: 10.5px; letter-spacing: .26em; font-weight: 700;
  display: block; margin-bottom: 5px; }
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.stat { background: var(--bg-1); padding: 12px 12px; }
.stat .s-val { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stat .s-val.ok{color:var(--ok);} .stat .s-val.info{color:var(--info);} .stat .s-val.warn{color:var(--warn);}
.stat .s-val.attn{color:var(--attn);} .stat .s-val.bad{color:var(--bad);} .stat .s-val.idle{color:var(--dim);}
.stat .s-lab { font-size: 11px; color: var(--muted); margin-top: 3px; letter-spacing: .04em; }

/* Needs You */
.need { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.need:last-child { border-bottom: 0; }
.need .nbar { width: 3px; align-self: stretch; border-radius: 3px; background: var(--attn); }
.need .nbar.risk3 { background: var(--bad); } .need .nbar.risk2 { background: var(--attn); }
.need .nbar.risk1, .need .nbar.risk0 { background: var(--warn); }
.need .grow { flex: 1; min-width: 0; }

/* Active operations */
.op { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; margin-bottom: 10px; }
.op:last-child { margin-bottom: 0; }
.op-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.op .title { font-weight: 600; }

/* System health rows */
.sysrow { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.sysrow:last-child { border-bottom: 0; }
.sysrow .grow { flex: 1; min-width: 0; }

/* ---------- Chat (Steffi) ---------- */
.chat { display: flex; flex-direction: column; height: calc(100dvh - 210px); }
@media (min-width: 821px) { .chat { height: calc(100dvh - 180px); } }
.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 16px; }
.msg { max-width: 82%; padding: 11px 15px; border-radius: 16px; white-space: pre-wrap; word-wrap: break-word; font-size: 14.5px; }
.msg.user { align-self: flex-end; background: linear-gradient(180deg, var(--accent), #1f9fd6); color: #04141d; border-bottom-right-radius: 4px; font-weight: 500; }
.msg.cloud { align-self: flex-start; background: var(--panel); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.msg .t { display: block; font-size: 10.5px; opacity: .6; margin-top: 5px; }
.chat-input { display: flex; gap: 8px; padding-top: 10px; }
.chat-input textarea { min-height: 48px; max-height: 140px; }
.thinking { color: var(--accent); font-size: 13px; padding: 6px 2px; letter-spacing: .05em; }

/* ---------- Kill-Switch ---------- */
.kill { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.kill.active { border-color: rgba(248,113,113,.5); background: rgba(248,113,113,.08); }

/* ---------- Toast / empty ---------- */
.toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: var(--panel);
  backdrop-filter: blur(14px); border: 1px solid var(--border-2); color: var(--text); padding: 11px 20px;
  border-radius: 30px; font-size: 13.5px; z-index: 60; box-shadow: var(--shadow); }
@media (min-width: 821px) { .toast { bottom: 30px; } }
.empty { color: var(--muted); text-align: center; padding: 30px 0; font-size: 14px; }

/* ---------- Timeline ---------- */
.timeline .row { align-items: flex-start; }
.timeline .time { color: var(--dim); font-size: 12px; min-width: 84px; padding-top: 2px; font-variant-numeric: tabular-nums; }

/* ---------- Mobile ---------- */
.tabbar { display: none; }
@media (max-width: 820px) {
  .sidebar { display: none; }
  .topbar .brand { display: flex; }
  .cmdbar kbd { display: none; }
  .topstat { display: none; }
  main { padding: 20px 16px 96px; }
  h1 { font-size: 22px; }
  .pulse { flex-direction: column; text-align: center; gap: 16px; }
  .core { width: 120px; height: 120px; } .core span:nth-child(2){inset:20px;} .core span:nth-child(3){inset:40px;}
  .steffi-brief { text-align: left; }
  .tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: rgba(8,10,15,.94); backdrop-filter: blur(16px); border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px;
    color: var(--muted); font-size: 10.5px; border-radius: 8px; cursor: pointer; }
  .tab.active { color: var(--accent); }
  .tab .ico { font-size: 19px; line-height: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .core span, .logo .dotcore { animation: none !important; }
}

/* ---------- Mobile "Mehr"-Sheet (alle Bereiche) ---------- */
.more-sheet { position: fixed; inset: 0; z-index: 45; }
.more-sheet .ms-backdrop { position: absolute; inset: 0; background: rgba(4,6,11,.5);
  opacity: 0; transition: opacity .22s ease; backdrop-filter: blur(2px); }
.more-sheet.open .ms-backdrop { opacity: 1; }
.more-sheet .ms-panel { position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(13,16,23,.98); backdrop-filter: blur(20px); border-top: 1px solid var(--border-2);
  border-radius: 20px 20px 0 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -20px 50px -20px rgba(0,0,0,.8);
  transform: translateY(100%); transition: transform .24s cubic-bezier(.4,0,.2,1); }
.more-sheet.open .ms-panel { transform: translateY(0); }
.ms-grip { width: 40px; height: 4px; border-radius: 3px; background: var(--border-2); margin: 4px auto 12px; }
.ms-head { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px; padding-left: 2px; }
.ms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ms-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 13px 4px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; color: var(--muted);
  font-size: 11px; font-weight: 500; cursor: pointer; width: auto; text-align: center; }
.ms-item:active { transform: scale(.95); }
.ms-item.active { background: var(--accent-soft); border-color: rgba(56,189,248,.3); color: var(--accent); }
.ms-ico { font-size: 20px; line-height: 1; }
.ms-lab { line-height: 1.2; }
@media (min-width: 821px) { .more-sheet { display: none; } main { padding-bottom: 40px; } }

/* ---------- Missions (Kanban / Toggle / Detail) ---------- */
.segmented { display: inline-flex; background: var(--input); border: 1px solid var(--border);
  border-radius: 10px; padding: 3px; gap: 2px; margin-bottom: 6px; }
.seg { background: transparent; border: 0; color: var(--muted); padding: 7px 15px; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer; width: auto; }
.seg.on { background: var(--accent-soft); color: var(--accent); }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(238px, 1fr); gap: 12px;
  overflow-x: auto; padding-bottom: 10px; }
.kcol { background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px; padding: 13px; min-height: 130px; }
.kcol h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
  margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.kcol h4 span { background: var(--panel-2); border: 1px solid var(--border); border-radius: 20px;
  padding: 1px 9px; color: var(--text); font-size: 11px; }
.kempty { color: var(--dim); text-align: center; padding: 16px 0; font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; }
.chip { background: var(--panel-2); border: 1px solid var(--border); border-radius: 20px;
  padding: 4px 12px; font-size: 12.5px; color: var(--muted); }

/* ---------- Coming Online / Data Gap ---------- */
.soon-badge { display: inline-block; background: var(--accent-soft); color: var(--accent);
  border: 1px solid rgba(56,189,248,.3); border-radius: 20px; padding: 4px 12px; font-size: 11px;
  font-weight: 700; letter-spacing: .14em; margin-bottom: 14px; }
.soon-lead { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 16px; }
.soon-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.soon-list li { padding-left: 22px; position: relative; font-size: 14px; }
.soon-list li::before { content: "›"; position: absolute; left: 7px; color: var(--accent); font-weight: 700; }
.datagap { margin-top: 18px; background: rgba(251,146,60,.07); border: 1px solid rgba(251,146,60,.25);
  border-radius: 12px; padding: 14px 16px; }
.datagap .dg-h { color: var(--attn); font-size: 12px; font-weight: 700; letter-spacing: .1em; margin-bottom: 9px; }
.datagap ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.datagap li { color: var(--muted); font-size: 13px; padding-left: 16px; position: relative; }
.datagap li::before { content: "—"; position: absolute; left: 0; color: var(--attn); }

/* ---------- Bars (Analytics) ---------- */
.barrow { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.barlab { width: 130px; font-size: 13px; color: var(--text); text-transform: capitalize; flex: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bartrack { flex: 1; height: 10px; background: var(--input); border-radius: 20px; overflow: hidden; }
.barfill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 20px; }
.barval { width: 40px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; flex: none; }

/* ---------- Sparkline / Trend ---------- */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 96px; margin-top: 8px; }
.spark .b { flex: 1; background: linear-gradient(180deg, var(--accent), #1f9fd6); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; }
.spark .b:hover { opacity: 1; }
.spark-x { display: flex; justify-content: space-between; color: var(--dim); font-size: 10.5px; margin-top: 6px; }
.proof-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 8px; }
.proof-imgs a { display: block; }
.proof-imgs img { width: 100%; border: 1px solid var(--border); border-radius: 8px; display: block; }

/* ---------- Sub-Missionen ---------- */
.submission { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.submission:last-child { border-bottom: 0; }
.submission .arrow { color: var(--accent); }

/* ============================================================
   JARVIS MODE (Voice) — unverändert erhalten
   ============================================================ */
.jarvis { position: relative; display: flex; flex-direction: column; align-items: center;
  height: calc(100dvh - 200px); min-height: 480px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 42%, rgba(24,60,90,.35), transparent 60%), #05070c;
  border-radius: 16px; border: 1px solid #12314a; font-family: "Segoe UI", -apple-system, sans-serif; }
@media (min-width: 821px) { .jarvis { height: calc(100dvh - 150px); } }
.jarvis canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.jarvis * { z-index: 2; }
.j-hud { position: absolute; font-size: 10.5px; letter-spacing: .18em; color: #4fc3f7; opacity: .75;
  text-transform: uppercase; text-shadow: 0 0 8px rgba(79,195,247,.6); pointer-events: none; }
.j-hud.tl { top: 14px; left: 16px; } .j-hud.tr { top: 14px; right: 16px; text-align: right; }
.j-hud.bl { bottom: 88px; left: 16px; } .j-hud.br { bottom: 88px; right: 16px; text-align: right; }
.j-hud div { margin-bottom: 3px; }
.j-title { position: absolute; top: 40px; left: 0; right: 0; text-align: center; color: #bfe9ff;
  letter-spacing: .5em; font-size: 15px; font-weight: 600; text-shadow: 0 0 16px rgba(79,195,247,.8); pointer-events: none; }
.j-state { position: absolute; top: 66px; left: 0; right: 0; text-align: center; color: #4fc3f7;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; opacity: .8; pointer-events: none; }
.j-text { position: absolute; bottom: 130px; left: 50%; transform: translateX(-50%);
  width: min(560px, 88%); text-align: center; color: #d7f2ff; font-size: 14.5px; line-height: 1.55;
  text-shadow: 0 0 12px rgba(79,195,247,.35); max-height: 130px; overflow-y: auto; pointer-events: auto; }
.j-text .who { color: #4fc3f7; font-size: 10.5px; letter-spacing: .25em; display: block; margin-bottom: 4px; }
.j-input { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); width: min(560px, 90%); display: flex; gap: 8px; }
.j-input input { background: rgba(8,20,32,.8); border: 1px solid #1d4a6b; color: #d7f2ff; border-radius: 24px; padding: 11px 18px; }
.j-input input::placeholder { color: #3f7ea5; }
.j-input button { border-radius: 24px; background: rgba(79,195,247,.12); border: 1px solid #2a6d99; color: #7fd6ff; width: auto; padding: 0 18px; }
.j-orbzone { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; transform: translate(-50%, -56%); cursor: pointer; border-radius: 50%; }
.j-mic-hint { position: absolute; bottom: 62px; left: 0; right: 0; text-align: center; color: #3f7ea5; font-size: 11px; letter-spacing: .12em; pointer-events: none; }
@media (max-width: 600px) {
  .j-hud.br { display: none; } .j-hud.bl { bottom: auto; top: 92px; }
  .j-hud.tl div:nth-child(2), .j-hud.tr div:nth-child(2) { display: none; }
  .j-title { top: 44px; } .j-state { top: 68px; }
}

/* ===== Approval Inbox (Master-Charta §19–28) ===== */
.nav-item { position: relative; }
.needs-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--attn); color: #1a1205; font-size: 12px; font-weight: 700; line-height: 20px;
  text-align: center; box-shadow: 0 0 10px rgba(251,146,60,.5); }
.tab .needs-badge { position: absolute; top: 2px; right: calc(50% - 22px); margin: 0; }
.ig-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ig-head h3 { margin: 0; }
.inbox-card { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--muted);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; }
.inbox-card.risk0, .inbox-card.risk1 { border-left-color: var(--ok); }
.inbox-card.risk2 { border-left-color: var(--attn); }
.inbox-card.risk3 { border-left-color: var(--bad); }
.ic-head { display: flex; align-items: flex-start; gap: 12px; }
.ic-head .title { font-weight: 600; }
.rec { flex: none; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.rec-ok { background: rgba(52,211,153,.14); color: var(--ok); }
.rec-review { background: rgba(251,146,60,.14); color: var(--attn); }
.ic-why { margin: 8px 0; color: var(--text); font-size: 13.5px; white-space: pre-line; }
.ic-if { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; margin: 6px 0; }
.ic-if .ic-yes { color: var(--ok); } .ic-if .ic-no { color: var(--muted); }
.ic-rec { font-size: 12.5px; margin-bottom: 10px; }
.ic-act { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) { .ic-head { flex-wrap: wrap; } .rec { order: 3; } }

/* ===== Trace View — Hop-Kette (Charta §53) ===== */
.trace-list { display: flex; flex-direction: column; }
.trace { padding: 12px 6px; border-top: 1px solid var(--border); cursor: pointer; }
.trace:first-child { border-top: 0; }
.trace:hover { background: var(--panel-2); border-radius: 10px; }
.trace-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.trace-head .t-title { font-weight: 600; font-size: 14px; }
.trace-head .time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.hopline { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.hopline::-webkit-scrollbar { height: 5px; } .hopline::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
.hop { flex: none; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--panel-2);
  border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.hop.hop-agent { color: var(--text); border-color: var(--border-2); }
.hop.hop-res { font-weight: 600; }
.hop.hop-res.ok { background: rgba(52,211,153,.14); color: var(--ok); border-color: transparent; }
.hop.hop-res.info { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.hop.hop-res.bad { background: rgba(248,113,113,.14); color: var(--bad); border-color: transparent; }
.arr { flex: none; color: var(--muted); font-size: 12px; opacity: .7; }
.trace.live .hop.hop-res.info { animation: hopPulse 1.4s ease-in-out infinite; }
@keyframes hopPulse { 0%,100% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 10px 0 var(--accent-glow); } }

/* ===== Agent-Cores (Charta §47) ===== */
.core-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.agent-core { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 18px 12px; text-align: center; cursor: pointer; transition: border-color .2s, transform .2s; }
.agent-core:hover { border-color: var(--border-2); transform: translateY(-2px); }
.ac-core { position: relative; width: 68px; height: 68px; margin: 0 auto 12px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(56,189,248,.28), rgba(56,189,248,.05) 70%, transparent); }
.ac-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--border-2); }
.ac-init { font-weight: 700; font-size: 18px; letter-spacing: .5px; color: var(--text); }
.agent-core.is-active .ac-core { background: radial-gradient(circle at 50% 45%, rgba(56,189,248,.5), rgba(56,189,248,.08) 70%, transparent); }
.agent-core.is-active .ac-ring { border-color: var(--accent); box-shadow: 0 0 14px var(--accent-glow); animation: coreSpin 3s linear infinite, corePulse 1.8s ease-in-out infinite; border-top-color: transparent; }
.agent-core.is-bad .ac-ring { border-color: var(--bad); box-shadow: 0 0 12px rgba(248,113,113,.5); }
.agent-core.is-ready .ac-ring { border-color: var(--border-2); }
@keyframes coreSpin { to { transform: rotate(360deg); } }
@keyframes corePulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.ac-name { font-weight: 600; font-size: 14px; }
.ac-state { font-size: 11px; font-weight: 700; letter-spacing: .5px; margin-top: 2px; }
.ac-state.s-active { color: var(--accent); } .ac-state.s-ready { color: var(--muted); } .ac-state.s-bad { color: var(--bad); }
.ac-metrics { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.ac-metrics b { color: var(--text); font-weight: 600; } .ac-metrics .ok b { color: var(--ok); } .ac-metrics .warn b { color: var(--warn); }
.ac-last { font-size: 11px; color: var(--muted); margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .agent-core.is-active .ac-ring { animation: none; } .trace.live .hop.hop-res.info { animation: none; } }

/* ===== COMMAND CENTER (Charta §44–58) — HUD um den Core ===== */
.cc { --cc: #35c6ff; }
.cc[data-sys="ready"] { --cc: #35c6ff; }
.cc[data-sys="working"] { --cc: #22d3ee; }
.cc[data-sys="attention"] { --cc: #6aa8ff; }
.cc[data-sys="critical"] { --cc: #f87171; }
.cc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px 14px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.cc-brand { display: flex; align-items: center; gap: 10px; }
.cc-brand .cc-x { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--cc); border-radius: 9px; color: var(--cc); font-weight: 700; box-shadow: 0 0 14px -2px var(--cc); }
.cc-brand b { display: block; letter-spacing: .22em; font-size: 15px; }
.cc-brand span { color: var(--muted); font-size: 10.5px; letter-spacing: .14em; }
.cc-mid { letter-spacing: .5em; font-weight: 700; color: var(--cc); text-shadow: 0 0 18px var(--cc); font-size: 17px; }
.cc-topr { display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.cc-on.ok { color: var(--ok); } .cc-on.bad { color: var(--bad); }
.cc-clk { font-variant-numeric: tabular-nums; color: var(--text); }
.cc-grid { display: grid; grid-template-columns: minmax(300px,1fr) minmax(420px,1.25fr) minmax(300px,1fr); gap: 20px; align-items: stretch; min-height: calc(100dvh - 190px); }
.cc-grid.dense { grid-template-columns: minmax(230px,290px) minmax(0,1fr) minmax(230px,290px); gap: 16px; align-items: start; }
/* Layout: links Panels · Mitte der Kern (dominant) mit dem Chat DIREKT DARUNTER · rechts Panels.
   Eine eigene Chat-Spalte rechts hat den Kern klein gehalten und viel Leerraum erzeugt (Markus, 18.08.). */
.cc-grid.dense.kerngross { grid-template-columns: minmax(210px,260px) minmax(0,1fr) minmax(210px,260px); }
.cc-chatunten { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px; }
.cc-chatunten .cc-reply { width: min(720px, 96%); text-align: center; }
.cc-chatunten .cc-cmd { width: min(720px, 96%); }
.cc-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; justify-content: space-between; }
.cc-grid.dense .cc-col { gap: 12px; justify-content: flex-start; }
.cc-grid.dense .cc-panel { flex: 0 0 auto; }
/* Deko-Kacheln (Charta-konform klar getrennt: „nicht verbunden") */
.cc-deco { border-style: dashed !important; opacity: .78; }
.cc-deco .cc-h { color: var(--muted); }
.cc-deco .cc-decolist { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; color: var(--muted); }
.cc-deco .cc-decolist span { display: inline-flex; align-items: center; gap: 5px; }
.cc-deco .cc-decolist i { width: 6px; height: 6px; border-radius: 50%; background: #3a4150; font-style: normal; }
.cc-deco .cc-decotag { font-size: 10px; letter-spacing: .1em; color: var(--muted); opacity: .8; }
.cc-panel { --pc: #35c6ff; position: relative; background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 10%, rgba(14,22,34,.7)), rgba(9,13,20,.62)); border: 1px solid color-mix(in srgb, var(--pc) 32%, var(--border)); border-top: 2px solid color-mix(in srgb, var(--pc) 85%, transparent); border-radius: 14px; padding: 13px 15px; backdrop-filter: blur(7px);
  box-shadow: 0 0 22px -8px color-mix(in srgb, var(--pc) 80%, transparent), 0 12px 34px -24px #000, inset 0 0 20px -12px color-mix(in srgb, var(--pc) 60%, transparent), inset 0 1px 0 color-mix(in srgb, var(--pc) 22%, transparent); flex: 1 1 auto; transition: box-shadow .3s, border-color .3s; }
.cc-panel:hover { box-shadow: 0 0 30px -6px color-mix(in srgb, var(--pc) 90%, transparent), 0 12px 34px -22px #000, inset 0 0 26px -12px color-mix(in srgb, var(--pc) 70%, transparent); border-color: color-mix(in srgb, var(--pc) 55%, var(--border)); }
.cc-grid.dense .cc-panel { padding: 11px 13px; border-radius: 12px; }
/* Panel-Farbfamilien — durchgehend Neon-Blau/Cyan (futuristisch, kühl) */
.cc-panel:nth-child(6n+1) { --pc: #35c6ff; } .cc-panel:nth-child(6n+2) { --pc: #22d3ee; }
.cc-panel:nth-child(6n+3) { --pc: #60a5fa; } .cc-panel:nth-child(6n+4) { --pc: #2dd4bf; }
.cc-panel:nth-child(6n+5) { --pc: #38bdf8; } .cc-panel:nth-child(6n) { --pc: #7cc7ff; }
.cc-h { display: flex; align-items: center; justify-content: space-between; font-size: 11px; letter-spacing: .14em; color: color-mix(in srgb, var(--pc) 78%, #cfe3f0); margin-bottom: 10px; }
/* Top-Bar-Metriken */
.cc-clkbox { text-align: center; } .cc-date { font-size: 10px; letter-spacing: .18em; color: var(--muted); }
.cc-clkbox .cc-clk { font-size: 20px; font-weight: 700; }
.cc-metrics { display: flex; gap: 16px; flex-wrap: wrap; }
.cc-metric { display: flex; align-items: center; gap: 8px; }
.cc-mi { color: var(--cc); font-size: 15px; opacity: .85; }
.cc-ml { font-size: 9.5px; letter-spacing: .12em; color: var(--muted); }
.cc-mv { font-size: 13px; font-weight: 700; } .cc-mv.ok { color: var(--ok); } .cc-mv.bad { color: var(--bad); } .cc-mv.warn { color: var(--warn); } .cc-mv.gold { color: #fbbf24; }
/* Core-Beschriftung + Übersicht */
.cc-ov { font-size: 11px; letter-spacing: .14em; color: var(--muted); margin-bottom: 4px; } .cc-ov b { color: var(--ok); }
/* Arc-Reaktor-Kern (Jarvis-Look direkt im Kommando) */
.cc-core-reactor { position: relative; cursor: pointer; }
.cc-reactor { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.cc-core-reactor .cc-corelabel { pointer-events: none; }
/* Voice-Buttons (Mikrofon / Lautsprecher) */
.cc-cmd .cc-iconbtn { border-radius: 50%; width: 46px; height: 46px; flex: none; background: rgba(8,20,32,.7); border: 1px solid color-mix(in srgb, var(--cc) 40%, var(--border)); color: var(--cc); font-size: 18px; cursor: pointer; display: grid; place-items: center; transition: background .2s, box-shadow .2s; }
.cc-cmd .cc-iconbtn:hover { background: color-mix(in srgb, var(--cc) 16%, transparent); }
.cc-cmd .cc-iconbtn.on { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cc) 35%, transparent); }
#ccMic:active, .cc-core-reactor.listening { box-shadow: 0 0 0 3px color-mix(in srgb, #34d399 55%, transparent), 0 0 30px -6px #34d399; }
.cc-core-reactor.listening::after { content: "HÖRE ZU …"; position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); font-size: 10px; letter-spacing: .18em; color: #34d399; }
.cc-core-reactor.speaking::after { content: "SPRICHT …"; position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); font-size: 10px; letter-spacing: .18em; color: var(--cc); }
.cc-core-reactor .cc-corelabel b { text-shadow: 0 2px 9px rgba(1,9,18,.92), 0 0 4px rgba(1,9,18,.9), 0 0 20px color-mix(in srgb, var(--cc) 75%, #fff); }
.cc-core-reactor .cc-corelabel span { text-shadow: 0 1px 6px rgba(1,9,18,.95), 0 0 3px rgba(1,9,18,.9); }
.cc-corelabel { text-align: center; line-height: 1.05; position: relative; z-index: 2; }
.cc-corelabel b { display: block; letter-spacing: .22em; font-size: clamp(20px, 2vw, 30px); color: #f2fbff; text-shadow: 0 1px 6px rgba(2,14,26,.85), 0 0 16px color-mix(in srgb, var(--cc) 80%, #fff); }
.cc-corelabel span { font-size: clamp(8px, .78vw, 11px); letter-spacing: .18em; color: #d9f3ff; font-weight: 700; display: block; margin-top: 6px; text-shadow: 0 1px 3px rgba(2,14,26,.9); }
/* Server-Balken */
.cc-srv { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 11.5px; }
.cc-srvl { width: 34px; color: var(--muted); flex: none; }
.cc-srvbar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.cc-srvbar span { display: block; height: 100%; background: linear-gradient(90deg, var(--pc), color-mix(in srgb, var(--pc) 60%, #fff)); border-radius: 3px; }
.cc-srvv { flex: none; font-size: 11px; color: var(--text); font-variant-numeric: tabular-nums; }
.cc-srvsub { font-size: 11px; color: var(--muted); margin-top: 6px; }
.cc-int .cc-itag.ok { color: var(--ok); }
/* Crew-Mitglieder (mit KI-Portrait-Avataren) */
.cc-crew { display: flex; flex-wrap: wrap; gap: 9px; }
.cc-mem { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; overflow: hidden;
  background: rgba(30,40,55,.8); border: 1px solid var(--border-2); color: var(--muted); }
.cc-mem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cc-mem.on { border-color: var(--cc); box-shadow: 0 0 12px -2px var(--cc); }
.cc-mem.on::after { content: ""; position: absolute; right: 1px; bottom: 1px; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); border: 2px solid #0b1017; }

/* Runde Gauges (Leistungs-Ringe) */
.cc-gaugerow { display: flex; gap: 10px; justify-content: space-around; flex-wrap: wrap; padding: 4px 0 2px; }
.cc-gauge { position: relative; width: 62px; height: 62px; }
.cc-gauge svg { width: 100%; height: 100%; display: block; }
.cc-gauge .gg-bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 5; }
.cc-gauge .gg-fg { fill: none; stroke: var(--gc, var(--cc)); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 4px var(--gc, var(--cc))); }
.cc-gauge .gg-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.05; }
.cc-gauge .gg-c b { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--text); }
.cc-gauge .gg-c span { font-size: 8px; letter-spacing: .08em; color: var(--muted); display: block; margin-top: 2px; }

/* Untere Statuszeile (Identität / Sicherheit) */
.cc-status { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; padding: 9px 14px 4px; margin-top: 10px;
  border-top: 1px solid var(--border); font-size: 10.5px; letter-spacing: .1em; color: var(--muted); }
.cc-status span { display: inline-flex; align-items: center; gap: 6px; }
.cc-status b { color: color-mix(in srgb, var(--cc) 70%, #cfe3f0); font-weight: 700; letter-spacing: .06em; }
.cc-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 7px var(--ok); font-style: normal; }
/* Benachrichtigungen */
.cc-note { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; }
.cc-note .grow { min-width: 0; }
.cc-nd { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.cc-nd.i { background: var(--accent); } .cc-nd.w { background: var(--warn); } .cc-nd.a { background: var(--attn); } .cc-nd.c { background: var(--bad); }
.cc-nt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-nx { color: var(--muted); font-size: 10.5px; flex: none; }
/* Untere Navigationsleiste */
.cc-nav { display: flex; justify-content: center; gap: 6px; margin-top: 16px; padding: 8px; border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(56,189,248,.04)); border-radius: 0 0 14px 14px; flex-wrap: wrap; }
.cc-navi { display: flex; align-items: center; gap: 9px; padding: 8px 18px; border-radius: 10px; letter-spacing: .06em; color: var(--muted); cursor: pointer; }
.cc-navi > span { font-size: 15px; opacity: .9; }
.cc-navi b { font-size: 12px; font-weight: 700; letter-spacing: .1em; display: block; line-height: 1.15; }
.cc-navi small { font-size: 8.5px; letter-spacing: .12em; color: var(--muted); opacity: .8; display: block; }
.cc-navi:hover { background: var(--panel-2); color: var(--text); }
.cc-navi.active { background: color-mix(in srgb, var(--cc) 14%, transparent); color: var(--cc); box-shadow: inset 0 -2px 0 var(--cc); }
.cc-navi.active small { color: color-mix(in srgb, var(--cc) 60%, var(--muted)); }
@media (max-width: 1100px) { .cc-grid.dense { grid-template-columns: 1fr 1fr; } .cc-grid.dense .cc-center { grid-column: 1 / -1; order: -1; } .cc-metrics { display: none; } }
@media (max-width: 560px) {
  .cc-grid.dense { grid-template-columns: 1fr; }
  /* .kerngross hat 3 Klassen (höhere Spezifität) und würde die Regel darüber sonst dauerhaft
     überschreiben, auch unter der Media Query — Fund 19.08.2026, dieselbe Regel hier erneut
     mit passender Spezifität. */
  .cc-grid.dense.kerngross { grid-template-columns: 1fr; }
}
.cc-live { color: var(--ok); font-size: 10px; letter-spacing: .1em; } .cc-live.bad { color: var(--bad); }
.cc-cnt { color: var(--muted); font-size: 10px; letter-spacing: .1em; } .cc-cnt.attn { color: var(--attn); }
.cc-more { margin-top: 10px; text-align: right; font-size: 11.5px; color: var(--cc); cursor: pointer; opacity: .85; }
.cc-more:hover { opacity: 1; }
.empty.sm { padding: 8px 2px; font-size: 12.5px; color: var(--muted); }
/* Center core */
.cc-center { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 6px; min-width: 0; width: 100%; max-width: 100%; overflow-x: clip; }
.cc-center::before { content: ""; position: absolute; inset: 2% 4%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--cc) 22%, transparent), transparent 60%); filter: blur(10px); }
.cc-center > * { position: relative; z-index: 1; }
.cc-title { letter-spacing: .34em; font-size: 18px; font-weight: 700; color: #dff2ff; text-shadow: 0 0 20px var(--cc); text-align: center; }
.cc-sub { letter-spacing: .22em; font-size: 11px; color: var(--cc); margin-top: 6px; text-align: center; min-height: 14px; }
.cc-core { position: relative; width: min(360px, 24vw); max-width: 92%; aspect-ratio: 1; margin: 20px 0 24px; display: grid; place-items: center; }
@media (max-width: 900px) { .cc-core { width: min(340px, 72vw); } }
/* pulsierende Energie-Ringe, die vom Core ausgehen (mehr Leben) */
.cc-core::before, .cc-core::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; border: 1px solid var(--cc); opacity: 0; animation: ccwave 3.6s ease-out infinite; }
.cc-core::after { animation-delay: 1.8s; }
@keyframes ccwave { 0% { inset: 34%; opacity: .5; } 100% { inset: -2%; opacity: 0; } }
.cc-ring { position: absolute; border-radius: 50%; border: 2px solid transparent; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--cc) 70%, transparent)); }
.cc-ring.r1 { inset: 0; border-top-color: var(--cc); border-right-color: color-mix(in srgb, var(--cc) 45%, transparent); animation: ccspin 9s linear infinite; opacity: .85; }
.cc-ring.r2 { inset: 11%; border-bottom-color: var(--cc); border-left-color: color-mix(in srgb, var(--cc) 35%, transparent); animation: ccspin 6s linear infinite reverse; opacity: .7; }
.cc-ring.r3 { inset: 23%; border-top-color: color-mix(in srgb, var(--cc) 75%, transparent); border-left-color: var(--cc); animation: ccspin 4s linear infinite; opacity: .6; }
.cc-ring.r4 { inset: 34%; border-right-color: var(--cc); border-bottom-color: color-mix(in srgb, var(--cc) 50%, transparent); border-width: 1.5px; animation: ccspin 3s linear infinite reverse; opacity: .5; }
.cc-orb { position: relative; width: 40%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 40%, #ffffff 0%, #dff7ff 7%, var(--cc) 32%, color-mix(in srgb, var(--cc) 55%, #04121e) 58%, color-mix(in srgb, var(--cc) 15%, transparent) 78%, transparent 86%);
  box-shadow: 0 0 34px -2px var(--cc), 0 0 80px -10px var(--cc), 0 0 150px -30px var(--cc), inset 0 0 34px -6px color-mix(in srgb, var(--cc) 70%, #fff), inset 0 -8px 26px -8px color-mix(in srgb, var(--cc) 60%, #02101a);
  animation: ccpulse 3.6s ease-in-out infinite; }
.cc-orb::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1px solid color-mix(in srgb, #fff 55%, transparent); opacity: .35; }
.cc-orb .cc-logo { font-size: 30px; font-weight: 700; color: #06121b; text-shadow: 0 0 10px rgba(255,255,255,.6); }
.cc[data-sys="working"] .cc-orb, .cc[data-sys="critical"] .cc-orb { animation-duration: 1.8s; }
@keyframes ccspin { to { transform: rotate(360deg); } }
@keyframes ccpulse { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.045); filter: brightness(1.12); } }
.cc-cmd { display: flex; gap: 8px; width: min(560px, 96%); }
.cc-cmd input { flex: 1; background: rgba(8,20,32,.8); border: 1px solid color-mix(in srgb, var(--cc) 45%, var(--border)); color: #d7f2ff; border-radius: 24px; padding: 12px 18px; font-size: 14px; }
.cc-cmd input::placeholder { color: #3f7ea5; }
.cc-cmd input:focus { outline: none; border-color: var(--cc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc) 20%, transparent); }
.cc-cmd button { border-radius: 50%; width: 46px; height: 46px; flex: none; background: color-mix(in srgb, var(--cc) 16%, transparent); border: 1px solid var(--cc); color: var(--cc); font-size: 15px; cursor: pointer; }
.cc-reply { font-size: 13px; color: #cfe8f5; line-height: 1.5; min-height: 20px; }
/* Panel content bits */
.cc-job { margin-bottom: 10px; cursor: pointer; }
.cc-jl { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; margin-bottom: 5px; }
.cc-jt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-js { color: var(--muted); flex: none; font-size: 11px; }
.cc-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.cc-bar span { display: block; height: 100%; width: 40%; background: var(--cc); border-radius: 3px; }
.cc-bar.run span { animation: ccbar 1.6s ease-in-out infinite; }
@keyframes ccbar { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.cc-log { display: flex; gap: 8px; align-items: center; font-size: 12px; padding: 3px 0; }
.cc-log .cc-lt { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.cc-log .cc-lx { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-log .cc-lok { color: var(--ok); font-size: 10.5px; flex: none; }
.cc-appr { display: flex; align-items: center; gap: 9px; padding: 7px 0; cursor: pointer; }
.cc-appr .grow { min-width: 0; }
.cc-ab { width: 4px; align-self: stretch; border-radius: 2px; background: var(--muted); } .cc-ab.risk0,.cc-ab.risk1 { background: var(--ok); } .cc-ab.risk2 { background: var(--attn); } .cc-ab.risk3 { background: var(--bad); }
.cc-at { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-am { font-size: 11px; color: var(--muted); }
.cc-arec { flex: none; font-weight: 700; } .cc-arec.ok { color: var(--ok); } .cc-arec.rev { color: var(--attn); }
.cc-ssrow { display: flex; gap: 8px; } .cc-ss { flex: 1; text-align: center; background: rgba(255,255,255,.03); border-radius: 10px; padding: 8px 4px; }
.cc-ssv { font-weight: 700; font-size: 14px; } .cc-ssl { font-size: 10px; letter-spacing: .1em; color: var(--muted); margin-top: 2px; }
.cc-cost { font-size: 26px; font-weight: 700; color: var(--cc); text-shadow: 0 0 16px var(--cc); }
.cc-rt { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 4px 0; }
.cc-rd { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); flex: none; }
.cc-rs { color: var(--muted); font-size: 11px; } .cc-ron { color: var(--ok); font-size: 10px; letter-spacing: .08em; flex: none; }
.cc-int { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 4px 0; }
.cc-idot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .cc-idot.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); } .cc-idot.off { background: #3a4150; }
.cc-itag { font-size: 10.5px; color: var(--muted); letter-spacing: .06em; flex: none; }
@media (max-width: 900px) {
  .cc-grid { grid-template-columns: 1fr; }
  .cc-center { order: -1; }
  .cc-mid { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cc-ring, .cc-orb, .cc-bar.run span, .cc-core::before, .cc-core::after { animation: none !important; } }

/* ===== DIGITAL WORKFORCE (Charta §48) — radiale Konstellation ===== */
.wf { position: relative; width: 100%; max-width: 1000px; margin: 10px auto 0; aspect-ratio: 1 / .8; }
.wf-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wf-line { stroke: var(--border-2); stroke-width: .3; stroke-dasharray: 1.4 1.8; animation: wfflow 4s linear infinite; }
.wf-line.active { stroke: var(--accent); stroke-width: .55; filter: drop-shadow(0 0 2px var(--accent-glow)); animation-duration: 1.3s; }
.wf-line.ready { stroke: color-mix(in srgb, var(--accent) 45%, transparent); animation-duration: 2.6s; }
@keyframes wfflow { to { stroke-dashoffset: -16; } }
.wf-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30%; aspect-ratio: 1;
  display: grid; place-items: center; --cc: var(--accent); }
.wf-core.state-working { --cc: #22d3ee; }
/* ausstrahlende Energiewellen */
.wf-core::before, .wf-core::after { content: ""; position: absolute; inset: 24%; border-radius: 50%; border: 1px solid var(--cc); opacity: 0; animation: ccwave 3.8s ease-out infinite; }
.wf-core::after { animation-delay: 1.9s; }
.wf-corein { position: relative; width: 76%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 50% 42%, #eafaff 0%, var(--cc) 42%, color-mix(in srgb, var(--cc) 15%, transparent) 72%, transparent);
  box-shadow: 0 0 70px -6px var(--cc), 0 0 140px -20px var(--cc); animation: ccpulse 3.4s ease-in-out infinite; }
.wf-corein b { display: block; letter-spacing: .24em; font-size: 16px; color: #06121b; }
.wf-corein span { font-size: 12px; color: #06283a; font-weight: 700; }
.wf-node { position: absolute; transform: translate(-50%, -50%); width: 150px; text-align: center; cursor: pointer; }
.wf-ico { position: relative; overflow: hidden; width: 66px; height: 66px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; font-size: 25px;
  border: 1.5px solid var(--border-2); background: radial-gradient(circle at 50% 40%, rgba(30,40,55,.9), rgba(13,16,23,.75)); color: var(--muted); transition: transform .2s, box-shadow .2s; }
.wf-ico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wf-node.is-active .wf-ico { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 22px -2px var(--accent-glow); border-style: solid; animation: wfnode 2s ease-in-out infinite; }
.wf-node.is-ready .wf-ico { border-color: color-mix(in srgb, var(--accent) 50%, var(--border-2)); color: #9fd6f0; box-shadow: 0 0 14px -6px var(--accent-glow); }
.wf-node.is-idle .wf-ico { border-style: dashed; }
.wf-node:hover .wf-ico { transform: scale(1.1); }
@keyframes wfnode { 0%,100% { box-shadow: 0 0 18px -4px var(--accent-glow); } 50% { box-shadow: 0 0 30px 0 var(--accent-glow); } }
.wf-lab { font-weight: 600; font-size: 14px; }
.wf-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
/* ---- Wärmerer Look + „arbeitet an Projekt" ---- */
.wf { --warm: #34d399; }
.wf::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 58%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(52,211,153,.07), rgba(56,189,248,.05) 45%, transparent 68%); }
.wf-node { width: 156px; padding: 12px 10px 13px; border-radius: 16px; transition: background .25s, box-shadow .25s, transform .2s;
  background: linear-gradient(180deg, rgba(16,24,36,.6), rgba(10,15,23,.48)); box-shadow: inset 0 0 0 1px rgba(120,180,230,.1), 0 10px 26px -20px #000; }
.wf-node:hover { transform: translate(-50%, -50%) scale(1.04); }
.wf-node.is-idle { opacity: .8; box-shadow: inset 0 0 0 1px rgba(120,180,230,.06); }
.wf-node.is-ready { box-shadow: inset 0 0 0 1px rgba(120,180,230,.16), 0 10px 26px -18px #000; }
.wf-node.is-active { background: linear-gradient(180deg, color-mix(in srgb, var(--warm) 17%, rgba(14,22,34,.66)), rgba(10,15,23,.5)); box-shadow: 0 0 34px -12px var(--warm), inset 0 0 0 1px color-mix(in srgb, var(--warm) 34%, transparent); }
.wf-node.is-active .wf-ico { border-color: var(--warm) !important; box-shadow: 0 0 24px -2px color-mix(in srgb, var(--warm) 70%, transparent) !important; }
.wf-node.is-active .wf-sub { color: var(--warm); font-weight: 600; }
.wf-line.active { stroke: var(--warm); filter: drop-shadow(0 0 2px var(--warm)); }
.wf-proj { margin-top: 6px; font-size: 10.5px; letter-spacing: .01em; color: var(--warm); background: color-mix(in srgb, var(--warm) 15%, transparent); border: 1px solid color-mix(in srgb, var(--warm) 38%, transparent); border-radius: 20px; padding: 3px 10px; display: inline-block; max-width: 148px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.wf-proj:hover { background: color-mix(in srgb, var(--warm) 26%, transparent); }
.wf-proj.idle { color: var(--muted); background: transparent; border-color: transparent; font-size: 10px; cursor: default; }
.wf-quick { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.wf-q { background: rgba(56,189,248,.08); border: 1px solid #2a6d99; color: #9fd6f0; border-radius: 22px; padding: 9px 16px; font-size: 13px; cursor: pointer; width: auto; }
.wf-q:hover { background: rgba(56,189,248,.16); }
.wf-cmd { margin: 16px auto 0; }
@media (max-width: 640px) {
  .wf { aspect-ratio: 1 / 1.05; max-width: 400px; }
  .wf-node { width: 84px; } .wf-ico { width: 44px; height: 44px; font-size: 17px; } .wf-lab { font-size: 11.5px; } .wf-sub { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .wf-corein, .wf-line, .wf-node.is-active .wf-ico, .wf-core::before, .wf-core::after { animation: none !important; } }

/* ===== COMMAND CENTER „2050" — cinematic Skin (Referenz: JARVIS OS 2050) ===== */
.cc.x2050 { background: radial-gradient(1100px 700px at 50% 30%, rgba(30,90,150,.24), transparent 60%), radial-gradient(760px 520px at 50% 44%, color-mix(in srgb, var(--cc) 12%, transparent), transparent 58%); }
.x2050 .cc-top { border-bottom: 1px solid rgba(90,160,220,.18); }
.x2050 .cc-brand b { color: #dff2ff; text-shadow: 0 0 14px rgba(56,189,248,.5); }
/* Glas-Panels mit Eck-Klammern */
.x2050 .cc-panel { background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 9%, rgba(10,18,30,.66)), rgba(6,11,20,.6)); border: 1px solid color-mix(in srgb, var(--pc) 42%, rgba(120,180,230,.12));
  box-shadow: 0 0 26px -8px color-mix(in srgb, var(--pc) 85%, transparent), 0 16px 40px -26px #000, inset 0 0 22px -12px color-mix(in srgb, var(--pc) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.05); }
.x2050 .cc-panel:hover { box-shadow: 0 0 34px -6px var(--pc), 0 16px 40px -24px #000, inset 0 0 28px -12px color-mix(in srgb, var(--pc) 70%, transparent); border-color: color-mix(in srgb, var(--pc) 60%, rgba(120,180,230,.14)); }
.x2050 .cc-panel::before { content: ""; position: absolute; inset: 5px; border-radius: 8px; pointer-events: none; opacity: .85;
  background:
    linear-gradient(var(--pc),var(--pc)) top left, linear-gradient(var(--pc),var(--pc)) top left,
    linear-gradient(var(--pc),var(--pc)) top right, linear-gradient(var(--pc),var(--pc)) top right,
    linear-gradient(var(--pc),var(--pc)) bottom left, linear-gradient(var(--pc),var(--pc)) bottom left,
    linear-gradient(var(--pc),var(--pc)) bottom right, linear-gradient(var(--pc),var(--pc)) bottom right;
  background-repeat: no-repeat;
  background-size: 11px 1.5px, 1.5px 11px, 11px 1.5px, 1.5px 11px, 11px 1.5px, 1.5px 11px, 11px 1.5px, 1.5px 11px; }
/* Cinematic Core: oranger Kern, cyan Ringe, Tick-Ring */
.x2050 .cc-core { width: min(600px, 46vw); max-width: 98%; margin: 10px 0 20px; }
@media (max-width: 1100px) { .x2050 .cc-core { width: min(460px, 82vw); } }
.cc-ticks { position: absolute; inset: 0; width: 100%; height: 100%; animation: ccspin 60s linear infinite; }
.cc-ticks line { stroke: rgba(56,189,248,.5); stroke-width: .7; }
.x2050 .cc-ring { border-width: 1.5px; }
.x2050 .cc-ring.r1 { border-top-color: #38bdf8; border-right-color: rgba(56,189,248,.28); }
.x2050 .cc-ring.r2 { border-bottom-color: #22d3ee; border-left-color: rgba(34,211,238,.28); }
.x2050 .cc-ring.r3 { border-top-color: #7dd3fc; border-left-color: rgba(125,211,252,.3); }
.x2050 .cc-ring.r4 { inset: 8%; border-radius: 50%; border: 1.5px solid transparent; border-bottom-color: #38bdf8; border-right-color: rgba(56,189,248,.25); animation: ccspin 9s linear infinite reverse; opacity: .5; }
.x2050 .cc-orb { width: 44%; background: radial-gradient(circle at 50% 40%, #ffffff 0%, #eafbff 9%, var(--cc) 34%, color-mix(in srgb, var(--cc) 55%, #04121e) 62%, color-mix(in srgb, var(--cc) 14%, transparent) 79%, transparent 87%);
  box-shadow: 0 0 34px -2px var(--cc), 0 0 82px -10px var(--cc), 0 0 155px -30px var(--cc), inset 0 0 32px -6px color-mix(in srgb, var(--cc) 68%, #fff), inset 0 -8px 26px -8px color-mix(in srgb, var(--cc) 55%, #02101a); }
.x2050 .cc-corelabel b { color: #f2fbff; text-shadow: 0 1px 5px rgba(2,14,26,.85), 0 0 14px color-mix(in srgb, var(--cc) 80%, #fff); } .x2050 .cc-corelabel span { color: #d6f2ff; text-shadow: 0 1px 3px rgba(2,14,26,.9); }
.x2050 .cc-core::before, .x2050 .cc-core::after { border-color: #38bdf8; }
.x2050 .cc-title, .x2050 .cc-cost { text-shadow: 0 0 18px currentColor; }
.x2050 .cc-cmd input { background: rgba(6,14,24,.85); border-color: rgba(56,189,248,.4); }
.x2050 .cc-nav { border-top: 1px solid rgba(90,160,220,.18); background: linear-gradient(180deg, transparent, rgba(30,70,120,.12)); }
.x2050 .cc-mi { color: var(--cc); }

/* ===== Live-Werkbank (was jeder Agent gerade tut) ===== */
.livework { border: 1px solid color-mix(in srgb, #34d399 30%, var(--border)); box-shadow: 0 0 26px -14px #34d399; }
.lw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.lw-head h3 { margin: 0; }
.lw-status { font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.lw-agent { display: flex; gap: 12px; align-items: flex-start; padding: 11px; border-radius: 12px; margin-bottom: 8px; cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, #34d399 12%, rgba(14,22,34,.6)), rgba(10,15,23,.5)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #34d399 26%, transparent); }
.lw-agent:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, #34d399 45%, transparent), 0 0 20px -8px #34d399; }
.lw-av { position: relative; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: none; background: rgba(30,40,55,.8); box-shadow: 0 0 0 2px color-mix(in srgb, #34d399 55%, transparent); }
.lw-av img { width: 100%; height: 100%; object-fit: cover; }
.lw-pulse { position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #34d399; border: 2px solid #0b1017; animation: lwpulse 1.4s ease-in-out infinite; }
@keyframes lwpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(52,211,153,.7); } 50% { box-shadow: 0 0 0 5px rgba(52,211,153,0); } }
.lw-name { font-weight: 700; font-size: 14px; display: flex; gap: 8px; align-items: baseline; }
.lw-since { font-size: 11px; color: var(--muted); font-weight: 400; }
.lw-task { font-size: 13px; margin-top: 2px; } .lw-task b { color: var(--text); }
.lw-step { font-size: 12.5px; color: #bfe9d6; margin-top: 4px; }
.lw-k { display: inline-block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #34d399; background: color-mix(in srgb, #34d399 16%, transparent); border: 1px solid color-mix(in srgb, #34d399 34%, transparent); border-radius: 20px; padding: 1px 8px; margin-right: 4px; }
.lw-ago { color: var(--muted); font-size: 11px; }
.lw-recent { margin-top: 4px; }
.lw-rrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 5px 2px; cursor: pointer; border-bottom: 1px solid var(--border); }
.lw-rk { font-weight: 700; } .lw-rk.ok { color: var(--ok); } .lw-rk.bad { color: var(--bad); }
.lw-rrow .lw-ago { margin-left: auto; }
.lw-feedhead { margin: 14px 0 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lw-feed { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; background: rgba(8,14,22,.5); }
.lw-fe { display: flex; gap: 8px; align-items: baseline; padding: 5px 10px; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,.04); }
.lw-fe:last-child { border-bottom: none; }
.lw-ft { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.lw-fk { color: #34d399; font-size: 10.5px; letter-spacing: .04em; flex: none; min-width: 74px; }
.lw-fx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Cloud · Google Drive ===== */
.drv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.crumb { cursor: pointer; color: var(--accent); }
.crumb:hover { text-decoration: underline; }
.crumb-sep { color: var(--muted); }
.drv-store { font-size: 12px; color: var(--muted); }
.drv-list { display: flex; flex-direction: column; }
.drv-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 8px; border-bottom: 1px solid rgba(255,255,255,.04); }
.drv-row:hover { background: var(--panel-2); }
.drv-row.clickable { cursor: pointer; }
.drv-ic { font-size: 18px; flex: none; width: 24px; text-align: center; }
.drv-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--text); text-decoration: none; }
a.drv-name:hover { color: var(--accent); text-decoration: underline; }
.drv-meta { flex: none; font-size: 11.5px; color: var(--muted); }

/* ===== Jarvis-Browser (Live-Bild + Steuerung) ===== */
.lb-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.lb-btn { flex: none; height: 38px; min-width: 38px; padding: 0 12px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); cursor: pointer; font-size: 15px; }
.lb-btn:hover { border-color: var(--accent); }
.lb-btn.primary { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.lb-url { flex: 1; height: 38px; border-radius: 9px; background: rgba(8,14,22,.7); border: 1px solid var(--border); color: var(--text); padding: 0 14px; font-size: 14px; }
.lb-url:focus { outline: none; border-color: var(--accent); }
.lb-stage { position: relative; width: 100%; min-height: 200px; background: #0a0e14; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: crosshair; }
.lb-stage:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.lb-img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.lb-idle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; letter-spacing: .04em; text-align: center; padding: 20px; }
.lb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.lb-status { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.lb-hint { font-size: 11.5px; color: var(--muted); opacity: .85; }

/* Jarvis-Browser: Tab-Leiste */
.lb-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.lb-tab { display: flex; align-items: center; gap: 6px; max-width: 220px; padding: 6px 10px; border-radius: 8px 8px 0 0; background: var(--panel-2); border: 1px solid var(--border); border-bottom: none; color: var(--muted); cursor: pointer; font-size: 12.5px; }
.lb-tab:hover { color: var(--text); }
.lb-tab.active { background: color-mix(in srgb, var(--accent) 14%, var(--panel-2)); color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: inset 0 -2px 0 var(--accent); }
.lb-tab-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-tab-x { flex: none; opacity: .6; font-size: 11px; border-radius: 4px; padding: 0 2px; }
.lb-tab-x:hover { opacity: 1; background: rgba(255,255,255,.1); color: var(--bad); }
.lb-tab-new { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); cursor: pointer; font-size: 18px; line-height: 1; }
.lb-tab-new:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Sidebar-Gruppen (einklappbar) ---------- */
.nav-group { display: flex; flex-direction: column; }
.nav-group + .nav-group { margin-top: 2px; padding-top: 2px; border-top: 1px solid var(--border); }
.nav-group-head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; cursor: pointer; color: var(--muted);
  font: 600 10.5px/1 inherit; letter-spacing: .09em; text-transform: uppercase;
  padding: 10px 13px 6px; user-select: none;
}
.nav-group-head:hover { color: var(--text); }
.nav-group-head .ng-chev { font-size: 13px; opacity: .6; transform: rotate(90deg); transition: transform .18s ease; }
.nav-group.collapsed .ng-chev { transform: rotate(0deg); }
.nav-group-items { display: flex; flex-direction: column; gap: 3px; }
.nav-group.collapsed .nav-group-items { display: none; }

/* ===== REAKTOR-CORE (Regel-Prompt 18.08.2026) ===== */
/* §12: Der Core ist das wichtigste Element — er bekommt Platz und Ruhe um sich. */
.cc-center { position: relative; }
.cc-core-reactor { --rx: #ff3fa4; }
.cc-corelabel .rx-state {
  display: block; margin-top: 2px; font-size: 11px; letter-spacing: .22em;
  font-weight: 700; text-shadow: 0 0 14px currentColor;
}

.rx-health { cursor: help; }
.rx-health .rx-weak { color: #fbbf24; font-weight: 600; letter-spacing: .04em; }

/* §4: Nebenprozesse mit eigener Farbe */
.rx-subs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0 2px; min-height: 20px; }
.rx-chip {
  --pc: #888; font-size: 10px; letter-spacing: .12em; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; color: var(--pc); border: 1px solid color-mix(in srgb, var(--pc) 45%, transparent);
  background: color-mix(in srgb, var(--pc) 12%, transparent);
}

/* §17: Blocker präzise und sichtbar — aber nicht der ganze Operator rot */
.rx-blockers { margin: 8px auto 0; max-width: 560px; width: 100%; }
.rx-bhead { font-size: 11px; letter-spacing: .14em; font-weight: 700; color: #ff6b6b; margin-bottom: 5px; text-align: center; }
.rx-block {
  display: block; text-align: left; padding: 7px 10px; margin-bottom: 5px; border-radius: 8px;
  background: rgba(255, 59, 59, .07); border-left: 3px solid #ff3b3b; cursor: pointer;
}
.rx-block:hover { background: rgba(255, 59, 59, .13); }
.rx-block b { display: block; font-size: 12px; color: #ffdede; }
.rx-block span { display: block; font-size: 11px; opacity: .72; margin-top: 2px; line-height: 1.35; }

/* §8: laufende Prozesse als Liste unter dem Core */
.rx-procs { margin: 10px auto 0; max-width: 560px; width: 100%; }
.rx-idle { text-align: center; font-size: 11.5px; opacity: .45; letter-spacing: .04em; padding: 6px 0; }
.rx-proc {
  --pc: #ff8a1f; display: grid; grid-template-columns: 10px 1fr auto auto; gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 8px; cursor: pointer;
  border-left: 2px solid color-mix(in srgb, var(--pc) 70%, transparent);
  background: color-mix(in srgb, var(--pc) 7%, transparent);
  margin-bottom: 4px;
}
.rx-proc:hover { background: color-mix(in srgb, var(--pc) 14%, transparent); }
.rx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 8px var(--pc); animation: rxPulse 2.4s ease-in-out infinite; }
.rx-pm { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-pa { font-size: 10.5px; opacity: .6; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-pt { font-size: 10.5px; opacity: .45; font-variant-numeric: tabular-nums; }
@keyframes rxPulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* §11: Prozess-Detail */
.rx-detail {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: min(420px, 92%); z-index: 30; padding: 10px 12px; border-radius: 12px;
  background: rgba(10, 13, 20, .95); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6); backdrop-filter: blur(8px);
}
.rx-detail.hidden { display: none; }
.rxd-head { --pc: #ff8a1f; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.1); }
.rxd-head b { flex: 1; font-size: 13px; color: var(--pc); line-height: 1.3; }
.rxd-x { cursor: pointer; opacity: .5; font-size: 13px; padding: 0 4px; }
.rxd-x:hover { opacity: 1; }
.rxd-row { display: flex; gap: 10px; justify-content: space-between; font-size: 11.5px; padding: 3px 0; }
.rxd-row span { opacity: .5; white-space: nowrap; }
.rxd-row b { text-align: right; font-weight: 600; overflow-wrap: anywhere; }

/* §20: mobil bleibt der Core zentral, Nebeninfos werden knapper */
@media (max-width: 720px) {
  .rx-pa { display: none; }
  .rx-procs, .rx-blockers { max-width: 100%; }
  .rx-block span { -webkit-line-clamp: 2; }
}
/* §19: wer weniger Bewegung will, bekommt sie nicht */
@media (prefers-reduced-motion: reduce) { .rx-dot { animation: none; } }

/* ===== FÄHIGKEITEN-RING (Markus' Referenzbild „Die 9 Zustände") ===== */
.rx-wrap { --rx: #ff2d8f; width: 100%; display: flex; flex-direction: column; align-items: center; }

/* Systemgesundheit über dem Ring — kleines Label, große Zahl (wie in der Vorlage) */
.rx-health {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  margin-bottom: 2px; cursor: help; line-height: 1.1;
}
.rx-health > span { font-size: 9.5px; letter-spacing: .26em; opacity: .55; font-weight: 600; }
.rx-health > b { font-size: 22px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.rx-health .rx-weak { font-size: 9.5px; letter-spacing: .06em; color: #fbbf24; opacity: .9; }

/* Ring: links vier Fähigkeiten, Mitte der Core, rechts vier */
.rx-ring {
  display: grid; grid-template-columns: minmax(90px, 1fr) minmax(240px, 2.1fr) minmax(90px, 1fr);
  align-items: center; gap: clamp(4px, 1.4vw, 22px); width: 100%;
}
.rx-caps { display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 3.2vh, 30px); }
.rx-caps.l { text-align: right; }
.rx-caps.r { text-align: left; }
/* Der Versatz zeichnet die Rundung des Rings nach: außen (oben/unten) weiter weg vom Kern */
.rx-caps.l .rx-cap:nth-child(1), .rx-caps.r .rx-cap:nth-child(1) { transform: translateX(var(--o1, 0)); }
.rx-caps.l { --o1: -6%; }
.rx-caps.r { --o1: 6%; }
.rx-caps.l .rx-cap:nth-child(2), .rx-caps.l .rx-cap:nth-child(3) { transform: translateX(4%); }
.rx-caps.r .rx-cap:nth-child(2), .rx-caps.r .rx-cap:nth-child(3) { transform: translateX(-4%); }

.rx-cap { cursor: pointer; line-height: 1.25; transition: opacity .2s, transform .2s; }
.rx-cap:hover { opacity: 1; transform: scale(1.04); }
.rx-cap b {
  display: block; font-size: clamp(9.5px, .78vw, 12.5px); letter-spacing: .14em; font-weight: 700;
  color: var(--rx); text-shadow: 0 0 12px color-mix(in srgb, var(--rx) 55%, transparent);
  transition: color .5s ease;
}
.rx-cap span { display: block; font-size: clamp(8px, .58vw, 9.5px); letter-spacing: .04em; opacity: .45; margin-top: 1px; }

/* Der Core selbst — quadratisch, das Canvas füllt ihn */
.cc-core-reactor {
  position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: min(52vh, 520px);
  margin: 0 auto; display: block; background: none; border: 0;
}
.cc-core-reactor .cc-reactor { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Zustandsname sitzt in der Lücke am unteren Ring */
.rx-name {
  position: absolute; left: 50%; bottom: 1.5%; transform: translateX(-50%);
  font-size: clamp(10px, .95vw, 14px); letter-spacing: .3em; font-weight: 700;
  white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 16px currentColor; transition: color .5s ease;
}

@media (max-width: 900px) {
  .rx-ring { grid-template-columns: minmax(74px, 1fr) minmax(180px, 1.7fr) minmax(74px, 1fr); }
  .rx-cap span { display: none; }
}
@media (max-width: 560px) {
  /* §20: mobil bleibt der Core zentral — die Fähigkeiten rücken enger, verschwinden aber nicht */
  .rx-ring { gap: 2px; grid-template-columns: 62px 1fr 62px; }
  .rx-caps { gap: 12px; }
}

/* ===== Ring-Feinschliff: Fähigkeiten dicht an den Kern (wie im Referenzbild) ===== */
.rx-ring {
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(2px, .6vw, 10px);
}
/* Beschriftungen rücken an den Kern heran statt in der Spalte zu schwimmen */
.rx-caps.l { justify-self: end;   text-align: right; }
.rx-caps.r { justify-self: start; text-align: left; }
.rx-caps { gap: clamp(14px, 4.4vh, 40px); }

/* Der Bogen: außen (oben/unten) weiter weg vom Kern, Mitte näher dran — zeichnet die Rundung nach */
.rx-caps.l .rx-cap:nth-child(1) { transform: translateX(-34px); }
.rx-caps.l .rx-cap:nth-child(2) { transform: translateX(-8px); }
.rx-caps.l .rx-cap:nth-child(3) { transform: translateX(-8px); }
.rx-caps.l .rx-cap:nth-child(4) { transform: translateX(-34px); }
.rx-caps.r .rx-cap:nth-child(1) { transform: translateX(34px); }
.rx-caps.r .rx-cap:nth-child(2) { transform: translateX(8px); }
.rx-caps.r .rx-cap:nth-child(3) { transform: translateX(8px); }
.rx-caps.r .rx-cap:nth-child(4) { transform: translateX(34px); }
.rx-cap:hover { transform: none; }
.rx-caps.l .rx-cap:hover { filter: brightness(1.25); }
.rx-caps.r .rx-cap:hover { filter: brightness(1.25); }

.cc-core-reactor { max-width: min(50vh, 480px); }

@media (max-width: 1100px) {
  .rx-caps.l .rx-cap:nth-child(1), .rx-caps.l .rx-cap:nth-child(4) { transform: translateX(-14px); }
  .rx-caps.r .rx-cap:nth-child(1), .rx-caps.r .rx-cap:nth-child(4) { transform: translateX(14px); }
}
@media (max-width: 700px) {
  .rx-caps .rx-cap { transform: none !important; }
}

/* ===== Ring-Maße: Kern schmaler, damit die Fähigkeiten in ihre Spalte passen ===== */
.rx-ring { grid-template-columns: minmax(96px, 1fr) minmax(0, auto) minmax(96px, 1fr); overflow: visible; }
.rx-caps { min-width: 96px; }
.cc-core-reactor { max-width: min(42vh, 380px); }
.rx-caps.l .rx-cap:nth-child(1), .rx-caps.l .rx-cap:nth-child(4) { transform: translateX(-14px); }
.rx-caps.l .rx-cap:nth-child(2), .rx-caps.l .rx-cap:nth-child(3) { transform: translateX(-3px); }
.rx-caps.r .rx-cap:nth-child(1), .rx-caps.r .rx-cap:nth-child(4) { transform: translateX(14px); }
.rx-caps.r .rx-cap:nth-child(2), .rx-caps.r .rx-cap:nth-child(3) { transform: translateX(3px); }
@media (max-width: 1100px) {
  .rx-caps.l .rx-cap, .rx-caps.r .rx-cap { transform: none !important; }
}

/* ===== Feste Spalten für die Fähigkeiten — nichts läuft mehr unter die Panels ===== */
.rx-ring { grid-template-columns: 142px minmax(0, 1fr) 142px; gap: 10px; }
.rx-caps { min-width: 0; }
.rx-cap b, .rx-cap span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-core-reactor { max-width: min(44vh, 420px); }
@media (max-width: 1250px) { .rx-ring { grid-template-columns: 108px minmax(0,1fr) 108px; } .rx-cap span { display: none; } }
@media (max-width: 700px)  { .rx-ring { grid-template-columns: 78px minmax(0,1fr) 78px; gap: 4px; } }

/* ===== Der Ring ist eine kompakte Einheit und wird als Block zentriert =====
   Vorher spannte die Mittelspalte auf die volle Breite und riss die Fähigkeiten an die Ränder. */
.rx-wrap { max-width: 100%; }
.rx-ring {
  grid-template-columns: 150px auto 150px;
  justify-content: center;      /* Ring + Beschriftung bleiben zusammen, egal wie breit der Bildschirm ist */
  gap: 12px;
  width: auto;
}
.cc-core-reactor { width: min(52vh, 500px); max-width: min(52vh, 500px); }
@media (max-width: 1250px) { .rx-ring { grid-template-columns: 110px auto 110px; } .cc-core-reactor { width: min(44vh, 380px); max-width: min(44vh, 380px); } }
@media (max-width: 700px)  { .rx-ring { grid-template-columns: 76px auto 76px; gap: 4px; } .cc-core-reactor { width: min(38vh, 300px); max-width: min(38vh, 300px); } }

/* ===== Fenster abtrennen (Multi-Monitor) ===== */
.detach-btn {
  background: color-mix(in srgb, var(--pc, #35c6ff) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc, #35c6ff) 35%, transparent);
  color: color-mix(in srgb, var(--pc, #35c6ff) 88%, #cfe3f0);
  border-radius: 7px; cursor: pointer; font: inherit;
  font-size: 10.5px; letter-spacing: .1em; padding: 3px 9px; white-space: nowrap;
  transition: background .15s, transform .15s;
}
.detach-btn:hover { background: color-mix(in srgb, var(--pc, #35c6ff) 26%, transparent); transform: translateY(-1px); }
.detach-btn.mini { padding: 1px 6px; font-size: 11px; letter-spacing: 0; line-height: 1.3; opacity: .5; }
.detach-btn.mini:hover { opacity: 1; }
.cc-h .detach-btn.mini { margin-left: 8px; }
#rxDetach { position: absolute; top: 0; right: 0; }
.cc-center { position: relative; }

/* Abgetrenntes Fenster: nur der Inhalt, kein Rahmenwerk */
body.solo .sidebar,
body.solo .tabbar,
body.solo .cmdbar,
body.solo #detachBtn { display: none !important; }
body.solo .topbar { min-height: 34px; padding: 4px 10px; justify-content: flex-end; }
body.solo .workspace { width: 100%; }
body.solo #main { padding: 10px 14px; }

/* Nur-Kern-Fenster: alles außer dem Reaktor ausblenden */
body.solo-core .cc-col,
body.solo-core .cc-top,
body.solo-core .cc-status,
body.solo-core .cc-nav { display: none !important; }
body.solo-core .cc-grid.dense { grid-template-columns: minmax(0, 1fr); min-height: 0; }
body.solo-core .cc-center { padding-top: 6px; }
body.solo-core .cc-core-reactor { width: min(74vh, 720px); max-width: min(74vh, 720px); }
body.solo-core .rx-ring { grid-template-columns: 170px auto 170px; }

/* ===== Fähigkeiten radial um den Kern + Aufleuchten der aktiven (Vorlage: Max' Core) ===== */
.rx-ring {
  display: block; position: relative;
  width: min(46vh, 430px); height: min(46vh, 430px);
  margin: 0 auto; overflow: visible;
}
.rx-ring .cc-core-reactor { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; }
/* Core-Dominanz (Bild 2): ist die Chat-Spalte eingeklappt, nimmt der Kern den frei gewordenen
   Platz ein. Die Fähigkeiten sitzen bei R=63 % außen — deshalb wächst der Ring nur so weit,
   dass links und rechts genug Raum für die Beschriftung bleibt. */
/* Core-Dominanz: der Kern nimmt die breite Mittelspalte aus.
   ACHTUNG beim Ändern — die Fähigkeiten sitzen bei 63 % der RINGBREITE plus ihrer eigenen
   Textbreite (~90 px) nach außen. Es muss gelten: 0,63 × Ringbreite + 90 ≤ halbe Spaltenbreite,
   sonst rutschen VERSTEHEN/LERNEN/HANDELN/WACHEN unter die Nachbarspalten. */
.cc-grid.dense.kerngross .rx-ring { width: min(58vh, 560px); height: min(58vh, 560px); }
@media (max-width: 1500px) { .cc-grid.dense.kerngross .rx-ring { width: min(48vh, 430px); height: min(48vh, 430px); } }
@media (max-width: 1250px) { .cc-grid.dense.kerngross .rx-ring { width: min(42vh, 340px); height: min(42vh, 340px); } }

.rx-cap {
  position: absolute; z-index: 3; line-height: 1.2; cursor: pointer;
  white-space: nowrap; opacity: .34;                     /* ruhend: gedimmt */
  transition: opacity .45s ease, filter .45s ease;
}
.rx-cap b {
  display: block; font-size: clamp(9px, .72vw, 11.5px); letter-spacing: .15em; font-weight: 700;
  color: var(--capc, var(--rx)); text-shadow: none; transition: color .5s ease, text-shadow .45s ease;
}
.rx-cap span { display: block; font-size: clamp(7.5px, .52vw, 9px); letter-spacing: .03em; opacity: .55; margin-top: 1px; }

/* Die Fähigkeit, die gerade wirklich benutzt wird — leuchtet */
.rx-cap.on { opacity: 1; }
.rx-cap.on b { text-shadow: 0 0 14px var(--capc, var(--rx)), 0 0 30px color-mix(in srgb, var(--capc, var(--rx)) 55%, transparent); }
.rx-cap.on span { opacity: .8; }
.rx-cap:hover { opacity: 1; filter: brightness(1.2); }

/* Kleinere Fenster: Untertitel weg, Radius enger — der Kern bleibt zentral (§20) */
@media (max-width: 1250px) {
  .rx-ring { width: min(40vh, 340px); height: min(40vh, 340px); }
  .rx-cap span { display: none; }
}
@media (max-width: 700px) {
  .rx-ring { width: min(34vh, 260px); height: min(34vh, 260px); }
  .rx-cap b { font-size: 8.5px; letter-spacing: .08em; }
}
/* Echte Telefone (§Mobil-Fund 19.08.2026): bisher band keine Regel den Ring an die
   VIEWPORT-BREITE — nur an die Höhe (vh). Auf einem schmalen, hohen Bildschirm (z. B.
   390×844) blieb der Ring dadurch zu breit, und die acht Label außen zogen die Seite über
   den Rand. min(...,vw,...) verhindert das, ohne größere Bildschirme zu berühren. */
@media (max-width: 480px) {
  /* Muss dieselbe Selektorkette wie Zeile ~1092 haben, sonst verliert der bloße .rx-ring
     gegen .cc-grid.dense.kerngross .rx-ring — Spezifität schlägt Media-Query-Enge. */
  .cc-grid.dense.kerngross .rx-ring, .rx-ring { width: min(30vh, 62vw, 220px); height: min(30vh, 62vw, 220px); }
  .rx-cap b { font-size: 7.5px; letter-spacing: .05em; }
  .rx-cap span { display: none; }
  .cc-metrics { display: none; }
}
/* Abgetrenntes Kern-Fenster darf groß werden */
body.solo-core .rx-ring { width: min(70vh, 680px); height: min(70vh, 680px); }
body.solo-core .rx-cap b { font-size: 13px; }
body.solo-core .rx-cap span { font-size: 10px; display: block; }

/* ===== MANNSCHAFT: Tabelle + Einzelgespräch (Vorbild: Max' Operator) ===== */
.tm-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 12px; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 8px; }
.tm-tab {
  background: none; border: 0; color: var(--muted, #8ea0b5); font: inherit; font-size: 12.5px;
  padding: 6px 12px; border-radius: 8px 8px 0 0; cursor: pointer; position: relative;
}
.tm-tab i { font-style: normal; opacity: .55; font-size: 11px; margin-left: 3px; }
.tm-tab:hover { color: #cfe3f0; background: rgba(255,255,255,.04); }
.tm-tab.on { color: #35c6ff; box-shadow: inset 0 -2px 0 #35c6ff; }

.tm-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 390px); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .tm-wrap { grid-template-columns: 1fr; } }

.tm-list { overflow-x: auto; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; }
.tm-tab-el { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tm-tab-el th {
  text-align: left; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted, #8ea0b5); font-weight: 600; padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.09); white-space: nowrap;
}
.tm-tab-el td { padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.tm-row { cursor: pointer; transition: background .12s; }
.tm-row:hover { background: rgba(53,198,255,.06); }
.tm-row.on { background: rgba(53,198,255,.12); box-shadow: inset 3px 0 0 #35c6ff; }

.tm-a { display: flex; align-items: center; gap: 10px; min-width: 230px; }
.tm-ic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: rgba(255,255,255,.05); font-size: 14px; flex: 0 0 auto; }
.tm-ic.big { width: 34px; height: 34px; font-size: 17px; }
.tm-a b { display: block; font-size: 13px; }
.tm-a span { display: block; font-size: 11px; opacity: .5; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tm-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: #64748b; }
.tm-dot.arbeitet { background: #34d399; box-shadow: 0 0 8px #34d399; animation: rxPulse 2s ease-in-out infinite; }
.tm-dot.bereit { background: #475569; }

.tm-st b { display: block; font-size: 12px; font-weight: 600; }
.tm-bar { display: block; width: 76px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); margin-top: 4px; }
.tm-bar i { display: block; height: 100%; border-radius: 2px; background: #35c6ff; }
.tm-work { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
.tm-none { opacity: .35; font-style: italic; }
.tm-sub { opacity: .45; font-size: 11px; }
.tm-erf b.ok { color: #34d399; } .tm-erf b.warn { color: #fbbf24; } .tm-erf b.bad { color: #f87171; }
.tm-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tm-num.bad { color: #f87171; }

/* Gesprächsspalte */
.tm-chat { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; display: flex; flex-direction: column; min-height: 460px; max-height: calc(100dvh - 220px); overflow: hidden; }
.tm-empty { margin: auto; text-align: center; opacity: .35; font-size: 12.5px; line-height: 1.6; padding: 30px; }
.tm-chead { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-bottom: 1px solid rgba(255,255,255,.08); }
.tm-chead b { display: block; font-size: 14px; }
.tm-chead span { display: block; font-size: 11px; opacity: .5; }
.tm-clear { background: none; border: 0; cursor: pointer; opacity: .4; font-size: 14px; }
.tm-clear:hover { opacity: 1; }
.tm-role { padding: 8px 13px; font-size: 11.5px; opacity: .6; line-height: 1.45; border-bottom: 1px solid rgba(255,255,255,.06); }
.tm-log { flex: 1; overflow-y: auto; padding: 12px 13px; display: flex; flex-direction: column; gap: 8px; }
.tm-log .msg { max-width: 92%; padding: 8px 11px; border-radius: 11px; font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.tm-log .msg.user { align-self: flex-end; background: rgba(53,198,255,.16); }
.tm-log .msg.cloud { align-self: flex-start; background: rgba(255,255,255,.06); }
.tm-log .msg .t { display: block; font-size: 9.5px; opacity: .4; margin-top: 3px; }
.tm-wait { opacity: .55; font-style: italic; }
.tm-in { display: flex; gap: 6px; align-items: flex-end; padding: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.tm-in textarea { flex: 1; min-height: 38px; max-height: 120px; resize: vertical; font: inherit; font-size: 12.5px; }
.tm-in .btn { flex: 0 0 auto; }
.tm-in .btn.on { box-shadow: 0 0 0 1px #35c6ff inset; }

/* ===== Mannschaft nutzt die volle Breite ===== */
.tm-wrap { grid-template-columns: minmax(0, 1fr) clamp(340px, 26vw, 480px); gap: 22px; }
.tm-tab-el { font-size: 13px; }
.tm-tab-el td { padding: 11px 14px; }
.tm-tab-el th { padding: 12px 14px; }
.tm-a { min-width: 300px; }
.tm-a span { max-width: 420px; }
.tm-work { max-width: 420px; }
.tm-bar { width: 110px; }
.tm-list { overflow-x: visible; }
/* Auf sehr breiten Schirmen die Tabelle nicht endlos ziehen, aber deutlich mehr als vorher */
.tm-wrap { max-width: 2100px; }
@media (max-width: 1400px) { .tm-wrap { grid-template-columns: minmax(0,1fr) minmax(300px, 360px); gap: 16px; } .tm-a { min-width: 240px; } }
@media (max-width: 1100px) { .tm-wrap { grid-template-columns: 1fr; } .tm-list { overflow-x: auto; } }

/* Lesbarkeit im Agenten-Gespräch: eigene Nachrichten hatten zu wenig Kontrast */
.tm-log .msg.user { background: rgba(53,198,255,.22); color: #eaf6ff; }
.tm-log .msg.cloud { background: rgba(255,255,255,.07); color: #dbe6f0; }
.tm-log .msg .t { opacity: .5; }
.tm-erf { white-space: nowrap; }

/* Tabelle bleibt in ihrer Spalte, Gesprächsspalte deckt sauber ab */
.tm-list { overflow-x: auto; min-width: 0; }
.tm-tab-el { table-layout: auto; width: 100%; }
.tm-chat { background: #0b0e14; position: relative; z-index: 2; }

/* Spaltenbreiten so, dass alle acht Spalten ohne Scrollen sichtbar bleiben */
.tm-wrap { grid-template-columns: minmax(0, 1fr) clamp(320px, 22vw, 420px); }
.tm-a { min-width: 240px; }
.tm-a span { max-width: 300px; }
.tm-work { max-width: 220px; }
.tm-tab-el td, .tm-tab-el th { padding: 10px 10px; }
.tm-bar { width: 90px; }

/* ===== Feinschliff Mannschaft: Zustand näher am Namen, Gespräch größer ===== */
/* Feste Spaltenbreiten — sonst zieht die breiteste Textspalte den Rest auseinander
   und zwischen Agent und Zustand klafft eine Lücke. */
.tm-tab-el { table-layout: fixed; }
.tm-tab-el th:nth-child(1), .tm-tab-el td:nth-child(1) { width: 32%; }
.tm-tab-el th:nth-child(2), .tm-tab-el td:nth-child(2) { width: 8%; }
.tm-tab-el th:nth-child(3), .tm-tab-el td:nth-child(3) { width: 12%; }
.tm-tab-el th:nth-child(4), .tm-tab-el td:nth-child(4) { width: 20%; }
.tm-tab-el th:nth-child(5), .tm-tab-el td:nth-child(5) { width: 8%; }
.tm-tab-el th:nth-child(6), .tm-tab-el td:nth-child(6) { width: 7%; }
.tm-tab-el th:nth-child(7), .tm-tab-el td:nth-child(7) { width: 6%; }
.tm-tab-el th:nth-child(8), .tm-tab-el td:nth-child(8) { width: 7%; }
.tm-tab-el td { overflow: hidden; }
.tm-a { min-width: 0; }
.tm-a span, .tm-work { max-width: none; }
.tm-a > div { min-width: 0; }

/* Gesprächsfenster deutlich größer */
.tm-wrap { grid-template-columns: minmax(0, 1fr) clamp(380px, 30vw, 620px); }
.tm-chat { min-height: 620px; max-height: calc(100dvh - 190px); }
.tm-log .msg { max-width: 88%; font-size: 13px; }
.tm-in textarea { min-height: 54px; max-height: 180px; font-size: 13px; }
@media (max-width: 1400px) { .tm-wrap { grid-template-columns: minmax(0,1fr) clamp(320px, 28vw, 440px); } }

/* Korrektur: table-layout:fixed hat die Namensspalte zerquetscht (td als Flex-Container).
   Stattdessen bekommt „Arbeitet an die gesamte freie Breite — dadurch rücken alle

/* ===== Korrektur Mannschaft =====
   table-layout:fixed hatte die Namensspalte zerquetscht (das td ist ein Flex-Container).
   Stattdessen: alle Spalten so schmal wie ihr Inhalt, und die freie Breite geht komplett
   an "Arbeitet an". Dadurch rueckt Zustand dicht an den Agentennamen, und die
   Rollenbeschreibung unter dem Namen bleibt vollstaendig lesbar. */
.tm-tab-el { table-layout: auto; }
.tm-tab-el th:nth-child(1), .tm-tab-el td:nth-child(1),
.tm-tab-el th:nth-child(2), .tm-tab-el td:nth-child(2),
.tm-tab-el th:nth-child(3), .tm-tab-el td:nth-child(3),
.tm-tab-el th:nth-child(5), .tm-tab-el td:nth-child(5),
.tm-tab-el th:nth-child(6), .tm-tab-el td:nth-child(6),
.tm-tab-el th:nth-child(7), .tm-tab-el td:nth-child(7),
.tm-tab-el th:nth-child(8), .tm-tab-el td:nth-child(8) { width: 1%; white-space: nowrap; }
.tm-tab-el th:nth-child(4), .tm-tab-el td:nth-child(4) { width: 100%; }

/* Rolle unter dem Namen: vollstaendig zeigen, notfalls auf zwei Zeilen umbrechen */
.tm-a { min-width: 0; align-items: flex-start; padding-top: 2px; }
.tm-a > div { min-width: 0; }
.tm-a b { white-space: nowrap; }
.tm-a span {
  white-space: normal; max-width: 420px; overflow: visible; text-overflow: clip;
  line-height: 1.35; opacity: .58;
}
.tm-tab-el td:nth-child(1) { white-space: normal; }
.tm-work { max-width: none; }

/* ===== Agenten-Zelle: Zelle bleibt Zelle, der Flex sitzt innen =====
   Damit rueckt "Zustand" dicht an den Namen UND die Rolle darunter bleibt komplett lesbar. */
.tm-a { display: table-cell !important; width: 1% !important; white-space: nowrap !important; padding-right: 18px !important; vertical-align: middle !important; }
.tm-aw { display: flex; align-items: center; gap: 10px; }
.tm-at { min-width: 0; }
.tm-at b { display: block; font-size: 13px; white-space: nowrap; }
.tm-at span {
  display: block; font-size: 11.5px; opacity: .55; margin-top: 2px;
  white-space: nowrap;            /* eine Zeile, dafuer breit genug */
  max-width: 460px; overflow: hidden; text-overflow: ellipsis;
}
/* Zeilenhoehe wieder normal */
.tm-tab-el td { padding: 10px 12px; vertical-align: middle; }
.tm-tab-el td:nth-child(1) { white-space: nowrap; }
/* Freie Breite geht an "Arbeitet an" */
.tm-tab-el th:nth-child(4), .tm-tab-el td:nth-child(4) { width: 100%; white-space: nowrap; }
.tm-work { max-width: none; overflow: hidden; text-overflow: ellipsis; }

/* Letzter Feinschliff: Rolle etwas kuerzer kappen, damit auch Fehler und Heute
   neben dem groesseren Gespraechsfenster in die Zeile passen. */
.tm-at span { max-width: 300px; }
.tm-wrap { grid-template-columns: minmax(0, 1fr) clamp(380px, 28vw, 560px); }
.tm-tab-el td, .tm-tab-el th { padding: 10px 11px; }
.tm-a { padding-right: 14px !important; }
.tm-bar { width: 80px; }
@media (min-width: 2000px) {
  /* Auf sehr breiten Schirmen darf die Rolle wieder komplett stehen */
  .tm-at span { max-width: 520px; }
  .tm-wrap { grid-template-columns: minmax(0, 1fr) clamp(420px, 26vw, 640px); }
}

/* ===== Pain-Leiste über der Mannschaft ===== */
.tm-pain {
  border: 1px solid rgba(255, 59, 59, .28); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,59,59,.07), rgba(255,59,59,.02));
  padding: 12px 14px; margin: 10px 0 14px;
}
.pn-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pn-ic { font-size: 16px; }
.pn-head b { display: block; font-size: 12.5px; letter-spacing: .12em; color: #ff8a8a; }
.pn-head > .grow > span { display: block; font-size: 12px; opacity: .7; margin-top: 1px; }
.pn-head .btn.small { font-size: 11.5px; padding: 5px 11px; }

.pn-kpis { display: flex; flex-wrap: wrap; gap: 8px; margin: 11px 0 4px; }
.pn-kpi { flex: 1 1 120px; min-width: 110px; background: rgba(255,255,255,.04); border-radius: 9px; padding: 7px 10px; }
.pn-kpi b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pn-kpi span { display: block; font-size: 10.5px; opacity: .55; margin-top: 1px; }
.pn-kpi.warn b { color: #fbbf24; }
.pn-kpi.bad b { color: #f87171; }

.pn-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 10px; }
@media (max-width: 900px) { .pn-body { grid-template-columns: 1fr; } }
.pn-col > b { display: block; font-size: 10.5px; letter-spacing: .14em; opacity: .5; margin-bottom: 5px; text-transform: uppercase; }
.pn-col ul { margin: 0; padding-left: 16px; }
.pn-col li { font-size: 12px; line-height: 1.55; opacity: .82; }
.pn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pn-chip {
  background: rgba(255,59,59,.12); border: 1px solid rgba(255,59,59,.3); color: #ffd9d9;
  border-radius: 999px; font: inherit; font-size: 11.5px; padding: 3px 10px; cursor: pointer;
}
.pn-chip i { font-style: normal; opacity: .7; font-size: 10.5px; }
.pn-chip:hover { background: rgba(255,59,59,.24); }

/* Spalten Bedarf + Training */
.tm-bed { white-space: nowrap; }
.pn-bar { display: inline-block; vertical-align: middle; width: 54px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); margin-right: 6px; }
.pn-bar i { display: block; height: 100%; border-radius: 2px; background: #34d399; }
.pn-bar.warn i { background: #fbbf24; }
.pn-bar.bad i { background: #f87171; }
.tm-bed em { font-style: normal; font-size: 11.5px; opacity: .7; font-variant-numeric: tabular-nums; }
.tm-tr { white-space: nowrap; font-size: 11px; }
.tm-tr span { display: inline-block; margin-right: 7px; opacity: .6; }
.tm-tr .tr-warn { color: #fbbf24; opacity: .95; }
.tm-tr .tr-bad { color: #f87171; opacity: .95; }

/* Zehn Spalten passen nur, wenn Rolle und Gespraech etwas nachgeben. */
.tm-at span { max-width: 230px; }
.tm-wrap { grid-template-columns: minmax(0, 1fr) clamp(340px, 24vw, 470px); }
.tm-tab-el td, .tm-tab-el th { padding: 9px 9px; }
.tm-bar { width: 66px; }
.pn-bar { width: 44px; }
.tm-tr { font-size: 10.5px; }
.tm-tr span { margin-right: 5px; }
@media (min-width: 2100px) {
  .tm-at span { max-width: 420px; }
  .tm-wrap { grid-template-columns: minmax(0, 1fr) clamp(420px, 24vw, 620px); }
}

/* ===== Agent Fleet nach Bereichen ===== */
.fl-group { margin: 18px 0 4px; }
.fl-gh { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .5; margin-bottom: 9px; }
.fl-gh i { font-style: normal; opacity: .6; }
.fl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.fl-card { padding: 13px; }
.fl-role { font-size: 11px; opacity: .5; margin: 2px 0 6px; line-height: 1.35; min-height: 30px; }
.fl-none { opacity: .4; font-style: italic; font-size: 11px; }
.fl-need { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.fl-need em { font-style: normal; font-size: 10.5px; opacity: .55; }
.fl-step { font-size: 10.5px; opacity: .62; margin-top: 5px; line-height: 1.4; }
.fl-card.is-bad { border-color: rgba(248,113,113,.35); }

/* ===== Bibliothek ===== */
.bl-search { display: flex; gap: 8px; align-items: center; margin: 14px 0 10px; flex-wrap: wrap; }
.bl-search input { flex: 1; min-width: 260px; font: inherit; font-size: 13px; padding: 9px 12px; }
.bl-scope { font-size: 11px; opacity: .5; }
.bl-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .bl-cols { grid-template-columns: 1fr; } }
.bl-faecher { display: flex; flex-direction: column; gap: 6px; }
.bl-fach { padding: 8px 10px; border-radius: 9px; background: rgba(255,255,255,.035); cursor: pointer; border-left: 2px solid transparent; }
.bl-fach:hover { background: rgba(53,198,255,.09); }
.bl-fach.on { background: rgba(53,198,255,.14); border-left-color: #35c6ff; }
.bl-ft { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bl-ft b { font-size: 12.5px; }
.bl-ft span { font-size: 11px; opacity: .55; white-space: nowrap; }
.bl-fs { font-size: 11px; opacity: .5; margin-top: 2px; }
.bl-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 12px; }
.bl-row:last-child { border-bottom: 0; }
.bl-kat { font-size: 10px; letter-spacing: .06em; opacity: .5; background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.bl-t { font-size: 10.5px; opacity: .4; white-space: nowrap; }
.bl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-chip { font-size: 11px; background: rgba(255,255,255,.06); border-radius: 999px; padding: 2px 9px; }
.bl-chip i { font-style: normal; opacity: .55; }
.bl-hit { padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.bl-hit:last-child { border-bottom: 0; }
.bl-hh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bl-hh b { font-size: 12.5px; }
.bl-art { font-size: 9.5px; letter-spacing: .1em; padding: 1px 7px; border-radius: 5px; }
.bl-art.w { background: rgba(53,198,255,.18); color: #9fdcff; }
.bl-art.k { background: rgba(52,211,153,.18); color: #9df0cd; }
.bl-hc { font-size: 11.5px; opacity: .6; line-height: 1.5; margin-top: 3px; }

/* ===== Recherche in der Bibliothek ===== */
.bl-wiki { font-size: 11.5px; opacity: .65; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.bl-note { font-size: 11px; opacity: .6; margin-bottom: 8px; }
.bl-antwort { font-size: 13px; line-height: 1.6; white-space: normal; }
.bl-quellen { margin-top: 12px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.08); }
.bl-quellen b { display: block; font-size: 10.5px; letter-spacing: .12em; opacity: .5; margin-bottom: 5px; }
.bl-src { font-size: 11.5px; padding: 2px 0; }
.bl-src a { color: #7cc7ff; text-decoration: none; }
.bl-src a:hover { text-decoration: underline; }

/* ===== Suchgedächtnis ===== */
.bl-luecke { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 12px; }
.bl-luecke:last-child { border-bottom: 0; }
.bl-luecke .btn.small { font-size: 11px; padding: 3px 9px; flex: 0 0 auto; }
.bl-kat.leer { background: rgba(248,113,113,.18); color: #ffb4b4; }

/* ---------- Personalakte eines Agenten (Punkt 15) ---------- */
.pf-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; margin-bottom: 14px; }
.pf-avatar { width: 62px; height: 62px; flex: 0 0 62px; border-radius: 50%; display: grid; place-items: center;
  font-size: 30px; background: var(--panel-2); border: 1px solid var(--border); }
.pf-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.pf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pf-kpi { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.pf-kpi > span { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; }
.pf-kpi > em { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 3px;
  text-transform: uppercase; letter-spacing: .4px; }
.pf-kpi .ok { color: var(--ok); } .pf-kpi .warn { color: var(--warn); } .pf-kpi .bad { color: var(--bad); }
.pf-kpi .fl-none { font-size: 15px; font-weight: 500; color: var(--muted); }

.pf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .pf-cols { grid-template-columns: 1fr; } }
.pf-cols > .section { margin-top: 0; }

.pf-bedarf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pf-bedarf .pn-bar { width: 160px; height: 8px; }
.pf-posten { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.pf-posten:last-of-type { border-bottom: 0; }
.pf-posten .pn-bar { width: 60px; flex: 0 0 60px; }
.pf-posten b { color: var(--warn); }
.pf-step { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); font-size: 13px; }

/* Lernkurve: Höhe = Läufe, Farbe = Erfolgsquote des Tages */
.pf-kurve { display: flex; align-items: flex-end; gap: 5px; height: 96px; padding: 6px 0 0; overflow-x: auto; }
.pf-bal { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 22px; }
.pf-bal i { display: block; width: 14px; border-radius: 3px 3px 0 0; background: var(--idle); }
.pf-bal i.q-ok { background: var(--ok); } .pf-bal i.q-warn { background: var(--warn); }
.pf-bal i.q-bad { background: var(--bad); } .pf-bal i.q-idle { background: var(--idle); }
.pf-bal em { font-style: normal; font-size: 10px; color: var(--muted); }

.fl-akte { margin-top: 10px; width: 100%; background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; font-size: 11px; cursor: pointer; }
.fl-akte:hover { color: var(--accent); border-color: var(--accent); }
.tm-akte { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 15px; padding: 2px 6px; }
.tm-akte:hover { color: var(--accent); }

/* Lage / Monitor (Punkt 21) */
.mon-ic { font-size: 17px; width: 26px; flex: 0 0 26px; text-align: center; }
.meta.dim { opacity: .6; font-size: 11px; margin-top: 2px; }