:root {
  --bg: #101014;
  --bg2: #17171d;
  --bg3: #1f1f27;
  --border: #2a2a34;
  --text: #ececf1;
  --muted: #9a9aa8;
  --accent: #d9784f;
  --accent-soft: rgba(217,120,79,.14);
  --ok: #4fae6d;
  --warn: #d9a13f;
  --bad: #d95c5c;
  --radius: 12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }

/* Login */
.login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); z-index: 50; }
.login-card { width: min(340px, 90vw); background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 32px; text-align: center; display: flex; flex-direction: column; gap: 14px; }
.login-card p { color: var(--muted); }
.login-card input { background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 12px 14px; font-size: 16px; text-align: center; }
.err { color: var(--bad); min-height: 1em; font-size: 13px; }

.logo { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.logo span { color: var(--accent); }

/* Layout */
.app { display: flex; min-height: 100dvh; }
.sidebar { width: 220px; padding: 20px 14px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; height: 100dvh; }
.sidebar nav { display: flex; flex-direction: column; gap: 1px; flex: 1; overflow-y: auto; scrollbar-width: thin; }
.nav-group { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #6a6a78; padding: 12px 12px 4px; font-weight: 600; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 9px; color: var(--muted); cursor: pointer; text-decoration: none; font-weight: 500; font-size: 14px; }
.nav-item:hover { background: var(--bg2); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); }
.nav-item .badge { margin-left: auto; }
.side-footer { font-size: 12px; color: var(--muted); }
.conn.off { color: var(--bad); }

main { flex: 1; padding: 24px clamp(16px, 4vw, 40px) 90px; max-width: 1100px; width: 100%; margin: 0 auto; }

/* Tabbar mobile */
.tabbar { display: none; }
@media (max-width: 820px) {
  .sidebar { display: none; }
  .tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: rgba(23,23,29,.96); backdrop-filter: blur(12px);
    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: 2px; 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; }
}

/* Bausteine */
h1 { font-size: 22px; letter-spacing: -.02em; margin-bottom: 4px; }
.sub { color: var(--muted); margin-bottom: 22px; font-size: 14px; }
.grid { display: grid; gap: 12px; }
.grid.cols2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid.cols4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.card h3 { font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.big { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.big small { font-size: 13px; color: var(--muted); font-weight: 400; }
.section { margin-top: 26px; }
.row { display: flex; align-items: center; gap: 10px; padding: 11px 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; }
.clickable:hover .title { color: var(--accent); }

.badge { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: var(--bg3); color: var(--muted); font-weight: 600; white-space: nowrap; }
.badge.ok { background: rgba(79,174,109,.15); color: var(--ok); }
.badge.warn { background: rgba(217,161,63,.15); color: var(--warn); }
.badge.bad { background: rgba(217,92,92,.15); color: var(--bad); }
.badge.accent { background: var(--accent-soft); color: var(--accent); }

.btn { background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: 9px; padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.small { padding: 5px 11px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: default; }

input, textarea, select {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  border-radius: 9px; padding: 10px 12px; font-size: 15px; font-family: inherit; width: 100%;
}
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; }

/* Chat */
.chat { display: flex; flex-direction: column; height: calc(100dvh - 170px); }
@media (min-width: 821px) { .chat { height: calc(100dvh - 120px); } }
.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 16px; }
.msg { max-width: 85%; padding: 11px 15px; border-radius: 16px; white-space: pre-wrap; word-wrap: break-word; }
.msg.user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.msg.cloud { align-self: flex-start; background: var(--bg2); 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(--muted); font-size: 13px; padding: 4px 2px; }
.chat-icon { padding: 0 12px; font-size: 18px; line-height: 1; display: flex; align-items: center; }
.chat-icon.rec { border-color: var(--bad); background: rgba(217,92,92,.15); animation: recpulse 1.2s ease-in-out infinite; }
@keyframes recpulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.chat-img { display: block; max-width: 220px; max-height: 220px; border-radius: 10px; margin-bottom: 6px; }
.chat-file-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; margin-bottom: 6px; border-radius: 10px; background: rgba(255,255,255,.12); color: inherit; text-decoration: none; font-size: 13px; }
.msg.cloud .chat-file-chip { background: var(--bg); border: 1px solid var(--border); }
.chat-attach { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; }
.chat-attach img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.chat-attach span { flex: 1; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Autonomie-Stufen */
.autonomy { display: flex; flex-direction: column; gap: 6px; }
.aut-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.aut-row:hover { border-color: var(--muted); }
.aut-row.active { border-color: var(--accent); background: var(--accent-soft); }
.aut-row input { width: auto; margin-top: 3px; accent-color: var(--accent); }
.aut-row .title { font-weight: 600; font-size: 14px; }
.aut-row .meta { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* Lastverteilung (Routine-Checks): wer trägt wie viel Kosten, wen trifft der nächste Check.
   Die Karte wurde ohne eigene Klassen gebaut — ohne Höhe/Hintergrund war der Balken unsichtbar. */
.lb { display: flex; flex-direction: column; gap: 8px; }
.lb-row { display: grid; grid-template-columns: minmax(74px, auto) 1fr auto; align-items: center; gap: 10px; }
.lb-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.lb-row.picked .lb-name { color: var(--ok); }
.lb-bar { height: 8px; background: var(--bg3); border-radius: 6px; overflow: hidden; }
.lb-bar span { display: block; height: 100%; min-width: 2px; background: var(--accent); border-radius: 6px; }
.lb-row.picked .lb-bar span { background: var(--ok); }
.lb-num { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb-toggle { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; cursor: pointer; }
.lb-toggle input { width: auto; accent-color: var(--accent); }

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

.toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: var(--bg3); border: 1px solid var(--border); color: var(--text); padding: 10px 18px; border-radius: 30px; font-size: 13.5px; z-index: 60; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
@media (min-width: 821px) { .toast { bottom: 30px; } }

.empty { color: var(--muted); text-align: center; padding: 30px 0; font-size: 14px; }

/* ---------- COMMAND CENTER ---------- */
.cc-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.cc-core {
  position: relative; width: 58px; height: 58px; flex-shrink: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(255,162,104,.9), rgba(255,162,104,.15) 60%, transparent 72%);
  box-shadow: 0 0 24px rgba(255,162,104,.55); cursor: pointer;
}
.cc-core::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(255,162,104,.4); animation: ccpulse 2.6s ease-out infinite; }
.cc-core.attention { background: radial-gradient(circle at 50% 45%, rgba(217,161,63,.9), rgba(217,161,63,.15) 60%, transparent 72%); box-shadow: 0 0 24px rgba(217,161,63,.55); }
.cc-core.attention::after { border-color: rgba(217,161,63,.5); }
.cc-core.critical { background: radial-gradient(circle at 50% 45%, rgba(217,92,92,.95), rgba(217,92,92,.2) 60%, transparent 72%); box-shadow: 0 0 28px rgba(217,92,92,.6); }
.cc-core.critical::after { border-color: rgba(217,92,92,.6); animation-duration: 1.3s; }
@keyframes ccpulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
.cc-hero h1 { font-size: 23px; margin-bottom: 2px; }
.cc-status { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.cc-status.ok { color: var(--ok); } .cc-status.warn { color: var(--warn); } .cc-status.bad { color: var(--bad); }

/* Kompakte Statusleiste (System Pulse) */
.pulse-bar { 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; margin-bottom: 20px; }
.pulse-cell { background: var(--bg2); padding: 12px 14px; cursor: pointer; transition: background .15s; }
.pulse-cell:hover { background: var(--bg3); }
.pulse-cell .k { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pulse-cell .v { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin-top: 3px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.dot.ok { background: var(--ok); box-shadow: 0 0 6px var(--ok); } .dot.bad { background: var(--bad); } .dot.warn { background: var(--warn); } .dot.idle { background: var(--muted); }

/* Glas-Karten für das Command Center */
.glass { background: linear-gradient(180deg, rgba(31,31,39,.7), rgba(23,23,29,.55)); backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.glass h3 { display: flex; align-items: center; gap: 8px; }
.bina-brief { border-left: 2px solid var(--accent); }
.bina-brief .who { font-size: 10.5px; letter-spacing: .22em; color: var(--accent); text-transform: uppercase; }
.needs-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.needs-row:last-child { border-bottom: 0; }
.needs-row .lvl { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.op-card { border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; margin-bottom: 8px; background: var(--bg2); }
.op-card .prog { height: 4px; border-radius: 3px; background: var(--bg3); margin-top: 8px; overflow: hidden; }
.op-card .prog > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.datagap { font-size: 11.5px; color: var(--muted); border: 1px dashed var(--border); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }

/* Command-Palette (Ctrl/Cmd+K) */
.cmdk-back { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); z-index: 70; display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh; }
.cmdk { width: min(600px, 92vw); background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.6); overflow: hidden; }
.cmdk input { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; font-size: 17px; padding: 16px 18px; }
.cmdk input:focus { outline: none; }
.cmdk .hint { padding: 10px 18px; font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; }
kbd { background: var(--bg3); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-size: 11px; font-family: inherit; }

/* Kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.kcol { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 10px; min-height: 80px; }
.khead { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.kcard { background: var(--bg3); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; margin-bottom: 7px; }
.kcard:hover { border-color: var(--accent); }
@media (max-width: 820px) { .kanban { grid-auto-columns: 75vw; } }

/* System-Graph */
.gedge { stroke-dasharray: 5 5; animation: gflow 1s linear infinite; }
@keyframes gflow { to { stroke-dashoffset: -20; } }
.gpulse { transform-box: fill-box; transform-origin: center; animation: gp 1.8s ease-out infinite; }
@keyframes gp { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
.gcorebusy { animation: gcb 2s ease-in-out infinite; }
@keyframes gcb { 0%,100% { opacity: 1; } 50% { opacity: .78; } }
.gnode:hover circle:first-of-type { stroke: var(--accent); }

/* Control Room (Vollbild, cineastischer JARVIS-HUD) */
.cr { position: fixed; inset: 0; z-index: 80; padding: 20px 26px 26px; overflow: auto;
  background: radial-gradient(ellipse at 50% 26%, rgba(24,84,124,.30), transparent 62%), #05070c;
  color: #e8ded6; font-family: "Segoe UI", -apple-system, sans-serif; }
.cr::before { content: ''; position: fixed; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,162,104,.025) 0 1px, transparent 1px 3px); }
.cr-top { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; position: relative; }
.cr-top h2 { font-size: 19px; letter-spacing: .34em; color: #dccdc2; text-shadow: 0 0 16px rgba(255,162,104,.7); font-weight: 600; }
.cr-top .clock { margin-left: auto; font-size: 15px; color: #ffa268; font-variant-numeric: tabular-nums; letter-spacing: .1em; text-shadow: 0 0 10px rgba(255,162,104,.5); }
.cr-state { font-size: 11px; letter-spacing: .22em; color: #ffa268; text-transform: uppercase; text-shadow: 0 0 10px rgba(255,162,104,.6); }
.cr-state.warn { color: #ffcf6b; text-shadow: 0 0 10px rgba(255,207,107,.6); }
.cr-state.bad { color: #ff7b7b; text-shadow: 0 0 12px rgba(255,123,123,.7); }
.cr-close { background: rgba(8,20,32,.7); border: 1px solid #2a6d99; color: #ffb583; border-radius: 8px; padding: 8px 14px; cursor: pointer; letter-spacing: .05em; }
.cr-close:hover { background: rgba(255,162,104,.15); }
.cr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: start; }
.cr-span2 { grid-column: span 2; }
.cr-span4 { grid-column: span 4; }
.hud { position: relative; background: linear-gradient(180deg, rgba(10,32,48,.55), rgba(6,16,26,.45)); border: 1px solid #16405e; border-radius: 10px; padding: 14px 15px; }
.hud::before, .hud::after { content: ''; position: absolute; width: 12px; height: 12px; border: 1.5px solid #ffa268; opacity: .7; }
.hud::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.hud::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; }
.hud-h { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #ffa268; opacity: .85; margin-bottom: 8px; text-shadow: 0 0 8px rgba(255,162,104,.4); }
.hud-big { font-size: 30px; font-weight: 700; letter-spacing: -.01em; color: #eaf9ff; text-shadow: 0 0 18px rgba(255,162,104,.35); }
.hud-big.warn { color: #ffd680; text-shadow: 0 0 18px rgba(255,207,107,.4); }
.hud-big.bad { color: #ff8f8f; text-shadow: 0 0 18px rgba(255,123,123,.5); }
.hud .row { border-color: rgba(255,162,104,.12); }
.hud .row .title { color: #e8ded6; }
.hud .row .meta { color: #6fa8c8; }
.hud .time { color: #8a6a55; }
.cr-feed { max-height: 40vh; overflow: auto; }
.cr-reactor { width: 118px; height: 118px; flex-shrink: 0; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 50% 45%, #cfefff, #ffa268 42%, rgba(255,162,104,.08) 70%, transparent 74%);
  box-shadow: 0 0 40px rgba(255,162,104,.6), inset 0 0 24px rgba(255,255,255,.3); }
.cr-reactor::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; border: 2px solid rgba(255,162,104,.55); }
.cr-reactor::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(255,162,104,.35); animation: ccpulse 2.8s ease-out infinite; }
.cr-reactor.warn { background: radial-gradient(circle at 50% 45%, #ffe6b0, #ffc046 42%, rgba(255,192,70,.08) 70%, transparent 74%); box-shadow: 0 0 40px rgba(255,192,70,.6); }
.cr-reactor.bad { background: radial-gradient(circle at 50% 45%, #ffd0d0, #ff5c5c 42%, rgba(255,92,92,.1) 70%, transparent 74%); box-shadow: 0 0 44px rgba(255,92,92,.65); }
.cr-hero { display: flex; align-items: center; gap: 22px; margin-bottom: 14px; }
.cr-hero .big-label { font-size: 26px; letter-spacing: .5em; color: #dccdc2; text-shadow: 0 0 20px rgba(255,162,104,.8); }
.hud .empty { color: #8a6a55; }
.sysgraph { width: 100%; min-width: 560px; height: auto; }
@media (max-width: 900px) { .cr-grid { grid-template-columns: repeat(2, 1fr); } .cr-span2, .cr-span4 { grid-column: span 2; } .cr-hero { flex-direction: column; text-align: center; } }
@media (max-width: 820px) {
  .cr { padding: 14px 14px 24px; }
  .cr-top { flex-wrap: wrap; gap: 6px 12px; }
  .cr-top h2 { font-size: 15px; letter-spacing: .16em; flex-basis: 100%; }
  .cr-top .clock { margin-left: 0; }
  .cr-close { margin-left: auto; padding: 6px 12px; font-size: 12px; }
  .sysgraph { min-width: 0; }
}

/* ---------- JARVIS MODE ---------- */
.jarvis {
  position: relative; display: flex; flex-direction: column; align-items: center;
  height: calc(100dvh - 140px); 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 - 90px); } }
.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: #ffa268; opacity: .75; text-transform: uppercase; text-shadow: 0 0 8px rgba(255,162,104,.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: #dccdc2; letter-spacing: .5em; font-size: 15px; font-weight: 600; text-shadow: 0 0 16px rgba(255,162,104,.8); pointer-events: none; }
.j-state { position: absolute; top: 66px; left: 0; right: 0; text-align: center; color: #ffa268; 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: #e8ded6; font-size: 14.5px; line-height: 1.55;
  text-shadow: 0 0 12px rgba(255,162,104,.35); max-height: 130px; overflow-y: auto; pointer-events: auto;
}
.j-text .who { color: #ffa268; 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: #e8ded6; border-radius: 24px; padding: 11px 18px; }
.j-input input::placeholder { color: #8a6a55; }
.j-input button { border-radius: 24px; background: rgba(255,162,104,.12); border: 1px solid #2a6d99; color: #ffb583; }
.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: #8a6a55; 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; }
}
.timeline .row { align-items: flex-start; }
.timeline .time { color: var(--muted); font-size: 12px; min-width: 84px; padding-top: 2px; }
details.adder { margin-top: 14px; }
details.adder summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; }

/* ==================== JARVIS AI CORE — Kommandozentrale ==================== */
.jcc {
  /* Eine Hausfarbe statt zwei. Vorher war das HUD cyan (#ffa268) und der Rest der
     Oberflaeche orange - der Bruch fiel bei jedem Wechsel auf. Die HUD-Optik bleibt
     unveraendert, sie traegt jetzt nur dieselbe Farbe wie alles andere. */
  --jc-cy: #ffa268; --jc-dim: #a9704f;
  --jc-line: rgba(217,120,79,.20); --jc-line2: rgba(217,120,79,.42);
  --jc-panel: rgba(28,18,12,.55);
  position: relative; height: calc(100dvh - 140px); min-height: 520px; overflow: hidden;
  border-radius: 16px; border: 1px solid #0f2c44;
  background: radial-gradient(ellipse at 50% 44%, rgba(20,55,90,.4), transparent 62%), #04070d;
  font-family: "Segoe UI", -apple-system, sans-serif; color: #cfeeff;
}
@media (min-width: 821px) { .jcc { height: calc(100dvh - 90px); } }
.jcc-grid { position: absolute; inset: 0; display: grid; gap: 14px; padding: 14px 16px;
  grid-template-columns: 300px 1fr 320px; grid-template-rows: auto 1fr;
  grid-template-areas: "head head head" "left center right"; }

/* Kopf */
.jcc-head { grid-area: head; display: flex; align-items: flex-start; justify-content: space-between; }
.jcc-logo { font-weight: 800; letter-spacing: .05em; color: #f3ece7; font-size: 17px; }
.jcc-logo span { color: var(--accent); }
.jcc-logo em { font-style: normal; color: var(--jc-cy); font-size: 10.5px; letter-spacing: .22em; margin-left: 7px; opacity: .8; }
.jcc-server { margin-top: 6px; font-size: 10px; letter-spacing: .14em; color: var(--jc-dim); display: flex; align-items: center; gap: 6px; text-transform: uppercase; }
.jcc-titleblock { text-align: center; padding-top: 2px; }
.jcc-title { color: #dccdc2; letter-spacing: .26em; font-size: 16px; font-weight: 700; text-shadow: 0 0 18px rgba(255,162,104,.7); }
.jcc-tags { color: var(--jc-cy); font-size: 10px; letter-spacing: .3em; margin-top: 6px; opacity: .85; text-transform: uppercase; }
.jcc-clockblock { text-align: right; }
.jcc-clock { color: #cfeeff; font-variant-numeric: tabular-nums; letter-spacing: .1em; font-size: 14px; }
.jcc-net { color: var(--jc-dim); font-size: 10px; letter-spacing: .15em; margin-top: 5px; }

/* Spalten */
.jcc-col { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding-right: 3px; }
.jcc-left { grid-area: left; } .jcc-right { grid-area: right; }
.jcc-col::-webkit-scrollbar { width: 5px; } .jcc-col::-webkit-scrollbar-thumb { background: var(--jc-line2); border-radius: 3px; }

/* Panels */
.jp { position: relative; background: var(--jc-panel); border: 1px solid var(--jc-line); border-radius: 12px; padding: 10px 12px 12px; backdrop-filter: blur(7px); }
.jp.jp-grow { flex: 1; min-height: 110px; display: flex; flex-direction: column; }
.jp::before, .jp::after { content: ''; position: absolute; width: 11px; height: 11px; border: 1.5px solid var(--jc-line2); }
.jp::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: 5px 0 0 0; }
.jp::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 5px 0; }
.jp-h { display: flex; align-items: center; justify-content: space-between; font-size: 10px; letter-spacing: .15em; color: var(--jc-cy); text-transform: uppercase; margin-bottom: 9px; opacity: .92; }
.jp-live, .jp-count { font-size: 9px; letter-spacing: .1em; color: #7be3a0; border: 1px solid rgba(123,227,160,.3); border-radius: 20px; padding: 1px 7px; white-space: nowrap; }
.jp-count { color: var(--jc-cy); border-color: var(--jc-line2); }
.jp-big { color: #f3ece7; font-size: 12px; letter-spacing: 0; }
.jp-body { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.jp-grow .jp-body { flex: 1; }
.jp-empty { color: var(--jc-dim); font-size: 12px; text-align: center; padding: 12px 0; }

/* Chat-Text im Panel (ueberschreibt Vollbild-Variante) */
.jcc .j-text { position: static; transform: none; width: auto; max-height: 118px; text-align: left; font-size: 13px; line-height: 1.5; padding: 0; }
.jcc .j-text .who { text-align: left; }

/* Sprache */
.jcc-voice { display: flex; align-items: center; gap: 10px; }
.jcc-mic { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 18px; cursor: pointer;
  border: 1px solid var(--jc-line2); background: radial-gradient(circle at 50% 40%, rgba(255,162,104,.28), rgba(10,30,50,.4)); box-shadow: 0 0 14px rgba(255,162,104,.25); }
.jcc-mic:hover { box-shadow: 0 0 22px rgba(255,162,104,.5); }
[data-mode="listen"] .jcc-mic, [data-mode="speak"] .jcc-mic { animation: jpulse 1.1s infinite; }
@keyframes jpulse { 0%,100% { box-shadow: 0 0 12px rgba(255,162,104,.3); } 50% { box-shadow: 0 0 28px rgba(255,162,104,.75); } }
#jWave { flex: 1; height: 42px; }
.jcc .j-mic-hint { font-size: 10.5px; color: var(--jc-dim); margin-top: 7px; }

/* Jobs / Meter / Balken */
.jjob-top { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; margin-bottom: 4px; }
.jjob-t { color: #eadfd7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.jjob:hover .jjob-t { color: var(--jc-cy); }
.jjob-s { color: var(--jc-dim); flex: none; font-size: 9.5px; letter-spacing: .04em; }
.jbar { height: 5px; border-radius: 4px; background: rgba(255,162,104,.12); overflow: hidden; }
.jbar > i { display: block; height: 100%; background: linear-gradient(90deg,#c9550a,#ffa268); box-shadow: 0 0 8px rgba(255,162,104,.6); }
.jmeter-l { display: flex; justify-content: space-between; font-size: 11px; color: #d8c8bc; margin-bottom: 3px; }
.jmeter-l span:last-child { color: var(--jc-dim); }

/* Logs */
.jlog { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.jlog-t { color: var(--jc-dim); font-variant-numeric: tabular-nums; flex: none; }
.jlog-x { color: #cfe6f6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.jlog-x em { color: var(--jc-cy); font-style: normal; }
.jlog-ok { color: #7be3a0; font-size: 9px; flex: none; letter-spacing: .08em; }

/* System-Status */
.jsys { display: flex; gap: 13px; align-items: center; }
.jring { --p: 0; width: 76px; height: 76px; flex: none; border-radius: 50%; display: grid; place-items: center; line-height: 1.05;
  background: conic-gradient(#ffa268 calc(var(--p)*1%), rgba(255,162,104,.12) 0); position: relative; }
.jring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: #071426; }
.jring b { position: relative; color: #f3ece7; font-size: 17px; }
.jring small { position: relative; color: var(--jc-dim); font-size: 9px; }
.jsys-m { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }

/* Kosten */
.jcost-fig { display: flex; justify-content: space-between; margin-bottom: 10px; }
.jcost-fig div { text-align: center; flex: 1; }
.jcost-fig b { color: #f3ece7; font-size: 14px; display: block; }
.jcost-fig small { color: var(--jc-dim); font-size: 9px; }

/* Geraete / Automationen / Freigaben */
.jdevrow, .jauto, .jappr { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.jdev-n, .jauto-n { color: #eadfd7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.jappr-t { color: #eadfd7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; cursor: pointer; }
.jappr:hover .jappr-t { color: var(--jc-cy); }
.jdev-s, .jauto-w, .jappr-d { color: var(--jc-dim); font-size: 10px; flex: none; }

/* Punkte */
.jdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--jc-dim); }
.jdot.ok { background: #5fe0a0; box-shadow: 0 0 7px #5fe0a0; }
.jdot.bad { background: #ff6b6b; box-shadow: 0 0 7px #ff6b6b; }
.jdot.warn { background: #ffcf5f; box-shadow: 0 0 7px #ffcf5f; }
.jdot.idle { background: #4a7fa5; }

/* Mitte */
.jcc-center { grid-area: center; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 4px; }
.jcc-center canvas#jCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.jcc-orb { position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.jcc-denk { position: relative; z-index: 2; color: var(--jc-cy); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; margin-bottom: 14px; text-shadow: 0 0 12px rgba(255,162,104,.5); opacity: .92; }
.jcc-quick { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 11px; max-width: 660px; }
.jq { background: rgba(12,30,50,.6); border: 1px solid var(--jc-line); color: #cfeeff; border-radius: 10px; padding: 8px 13px; font-size: 12px; cursor: pointer; backdrop-filter: blur(6px); }
.jq:hover { border-color: var(--jc-line2); color: #fff; box-shadow: 0 0 12px rgba(255,162,104,.25); }
.jcc-input { position: relative; z-index: 2; display: flex; gap: 8px; width: min(660px, 94%); }
.jcc-input input { flex: 1; background: rgba(6,18,30,.82); border: 1px solid #1d4a6b; color: #e8ded6; border-radius: 12px; padding: 12px 16px; font-size: 14px; }
.jcc-input input::placeholder { color: #8a6a55; }
.jcc-input button { width: 48px; border-radius: 12px; background: rgba(255,162,104,.14); border: 1px solid #2a6d99; color: #ffb583; font-size: 16px; cursor: pointer; }
.jcc-input button:hover { background: rgba(255,162,104,.28); }

/* Handy: einspaltig, Kern oben */
/* Segment-Leiste: auf Desktop unsichtbar */
.jcc-tabs { display: none; }

@media (max-width: 820px) {
  .jcc { height: auto; min-height: calc(100dvh - 110px); overflow: visible; }
  .jcc { max-width: 100%; overflow-x: hidden; }
  .jcc-grid { position: relative; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto;
    grid-template-areas: "head" "center" "tabs" "left" "right"; gap: 12px; padding: 12px 12px 22px; }
  .jcc-net { display: none; }
  /* Kompakter Kopf: Marke links, Uhr rechts, großen Titel weg */
  .jcc-head { flex-direction: row; align-items: center; justify-content: space-between; }
  .jcc-titleblock { display: none; }
  .jcc-brand { text-align: left; } .jcc-clockblock { text-align: right; }
  .jcc-head { gap: 8px; }
  .jcc-logo { font-size: 14px; }
  .jcc-logo em { font-size: 8.5px; margin-left: 5px; }
  .jcc-server { font-size: 8.5px; letter-spacing: .04em; margin-top: 4px; }
  .jcc-clock { font-size: 13px; }
  .jcc-net { font-size: 8.5px; letter-spacing: .04em; margin-top: 3px; }
  .jcc-center { min-height: 300px; }
  .jcc-quick { max-width: 100%; }
  .jcc-col { overflow: visible; }
  /* Chat-Panels weg — der Kern selbst ist der Sprach-/Chat-Punkt */
  .jp[data-sec="chat"] { display: none; }
  /* Segment-Leiste anzeigen */
  .jcc-tabs { grid-area: tabs; display: flex; gap: 8px; overflow-x: auto; }
  .jcc-tabs button { flex: 1; white-space: nowrap; background: rgba(12,30,50,.6); border: 1px solid var(--jc-line);
    color: var(--jc-dim); border-radius: 10px; padding: 10px 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .03em; cursor: pointer; }
  .jcc-tabs button.on { color: #f3ece7; border-color: var(--jc-line2); background: rgba(255,162,104,.14); box-shadow: 0 0 12px rgba(255,162,104,.2); }
  /* Nur Panels des aktiven Bereichs zeigen */
  .jcc-col .jp { display: none; }
  .jcc[data-sec="jobs"] .jp[data-sec="jobs"],
  .jcc[data-sec="system"] .jp[data-sec="system"],
  .jcc[data-sec="kosten"] .jp[data-sec="kosten"],
  .jcc[data-sec="verlauf"] .jp[data-sec="verlauf"] { display: block; }
  /* Verlauf-Zeilen umbrechen statt aus dem Rand laufen */
  .jlog { align-items: flex-start; }
  .jlog-x { white-space: normal; }
}

/* ==================== HANDY-REDESIGN: OPERATOR mobil (blauer AI-Core-Look) ==================== */
@media (max-width: 820px) {
  :root { --m-cy: #ffa268; --m-line: rgba(217,120,79,.20); --m-line2: rgba(217,120,79,.42); --m-panel: rgba(10,20,34,.62); }
  body { background: radial-gradient(120% 55% at 50% 0%, rgba(20,55,90,.30), transparent 55%), #05070d; }

  /* Seiten-Layout + Platz für die Tab-Leiste */
  #main { padding: 16px 14px calc(88px + env(safe-area-inset-bottom)) !important; }
  h1 { font-size: 22px; letter-spacing: -.01em; }
  .sub { font-size: 13.5px; margin-bottom: 14px; }

  /* --- Tab-Leiste unten: schwebend, blur, Safe-Area, aktiver Tab als Pille --- */
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; gap: 2px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: rgba(6,13,22,.94); backdrop-filter: blur(16px);
    border-top: 1px solid var(--m-line);
  }
  .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 5px; color: #9d8677; font-size: 10px; font-weight: 600; border-radius: 12px; }
  .tab .ico { font-size: 20px; line-height: 1; opacity: .82; }
  .tab.active { color: var(--m-cy); background: rgba(255,162,104,.10); }
  .tab.active .ico { opacity: 1; filter: drop-shadow(0 0 7px rgba(255,162,104,.65)); }

  /* --- Karten: blaues Panel mit Eck-Klammern --- */
  .glass { position: relative; background: var(--m-panel) !important; border: 1px solid var(--m-line) !important; border-radius: 14px !important; padding: 15px 14px !important; backdrop-filter: blur(8px); }
  .glass::before, .glass::after { content: ''; position: absolute; width: 12px; height: 12px; border: 1.5px solid var(--m-line2); pointer-events: none; }
  .glass::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: 5px 0 0 0; }
  .glass::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 5px 0; }
  .glass h3 { color: var(--m-cy); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .92; margin-bottom: 12px; }

  /* --- Hero (Home-Kopf) --- */
  .cc-hero { flex-direction: column; text-align: center; gap: 12px; margin-bottom: 16px; }
  .cc-hero h1 { font-size: 25px; }
  .cc-core { width: 66px; height: 66px; flex: none; }
  .cc-status { font-size: 11px; }

  /* --- Stat-Streifen: 2-spaltige Karten statt 1px-Raster --- */
  .pulse-bar { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; margin-bottom: 16px; }
  .pulse-cell { background: var(--m-panel) !important; border: 1px solid var(--m-line); border-radius: 12px; padding: 13px 14px !important; }
  .pulse-cell .k { color: #b09a8c; font-size: 10px; }
  .pulse-cell .v { color: #f3ece7; font-size: 19px; }

  /* --- Grids einspaltig, Abstände --- */
  .grid.cols2 { grid-template-columns: 1fr !important; gap: 12px !important; }
  .section { margin-top: 12px; }

  /* Home entschlacken: letzte Sektion (Zuletzt fertig + Recent Activity) auf dem Handy ausblenden */
  #main > .section:last-of-type { display: none; }

  /* Briefing-Block */
  .bina-brief { border-left: 2px solid var(--m-cy) !important; }
  .bina-brief .who { color: var(--m-cy) !important; }

  /* Kill-Switch / Warnbox */
  .kill { border-radius: 14px !important; }

  /* --- Chat --- */
  .chat { height: calc(100dvh - 168px); }
  .msg { max-width: 88%; font-size: 15px; }
  .msg.cloud { background: var(--m-panel); border-color: var(--m-line); }
  .chat-input { gap: 6px; align-items: flex-end; padding-top: 8px; }
  .chat-input textarea { flex: 1; min-width: 0; min-height: 46px; border-radius: 13px; }
  .chat-icon { padding: 0 13px; height: 46px; border-radius: 12px; }
  .chat-input .btn.primary { padding: 0 16px; height: 46px; border-radius: 13px; }

  /* Größere, griffigere Buttons */
  .btn { padding: 11px 16px; }
  .btn.small { padding: 8px 12px; font-size: 13px; }

  /* Listenzeilen etwas luftiger */
  .row { padding: 9px 0; }
  .op-card { border-radius: 12px; }
}

/* ==================== ORGANISATION — lebendes digitales Unternehmen ==================== */
.org { --o-cy: #ffa268; --o-line: rgba(217,120,79,.20); --o-line2: rgba(217,120,79,.42); --o-panel: rgba(10,20,34,.62); }

/* JARVIS-Core Hero */
.org-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.org-core { width: 66px; height: 66px; border-radius: 50%; position: relative; cursor: pointer; flex: none;
  background: radial-gradient(circle at 50% 45%, #d6f2ff, #ffa268 42%, rgba(255,162,104,.14) 70%, transparent);
  box-shadow: 0 0 28px rgba(255,162,104,.5); }
.org-core::before, .org-core::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(255,162,104,.42); animation: orgspin 9s linear infinite; }
.org-core::before { inset: -7px; }
.org-core::after { inset: -13px; border-style: dashed; border-color: rgba(255,162,104,.24); animation-duration: 15s; animation-direction: reverse; }
.org-core.warn { background: radial-gradient(circle at 50% 45%, #ffe6bf, #d9a13f 42%, transparent 70%); box-shadow: 0 0 28px rgba(217,161,63,.5); }
.org-core.warn::before, .org-core.warn::after { border-color: rgba(217,161,63,.4); }
@keyframes orgspin { to { transform: rotate(360deg); } }
.org-title { font-size: 20px; font-weight: 800; letter-spacing: .02em; color: #f3ece7; }
.org-state { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--o-cy); margin-top: 3px; text-shadow: 0 0 10px rgba(255,162,104,.4); }
.org-state.warn { color: #e7b45a; text-shadow: 0 0 10px rgba(217,161,63,.4); }
.org-boss { font-size: 13px; color: #9fbdd6; margin-top: 6px; }

/* Abteilungs-Raster */
.org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.dept { position: relative; background: var(--o-panel); border: 1px solid var(--o-line); border-radius: 14px; padding: 13px 14px; backdrop-filter: blur(8px); }
.dept::before, .dept::after { content: ''; position: absolute; width: 11px; height: 11px; border: 1.5px solid var(--o-line2); pointer-events: none; }
.dept::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: 5px 0 0 0; }
.dept::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 5px 0; }
.dept.active { border-color: var(--o-line2); box-shadow: 0 0 22px rgba(255,162,104,.13); }
.dept.empty { opacity: .72; }
.dept-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dept-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(255,162,104,.10); border: 1px solid var(--o-line); color: var(--o-cy); font-size: 16px; }
.dept-name { font-weight: 700; color: #f3ece7; font-size: 14px; }
.dept-desc { font-size: 11.5px; color: #b09a8c; margin-top: 1px; }
.dept-dots { display: flex; gap: 4px; align-items: center; }
.dept-hire { font-size: 12px; color: #9d8677; border: 1px dashed var(--o-line2); border-radius: 10px; padding: 10px; text-align: center; cursor: pointer; }
.dept-hire:hover { color: var(--o-cy); border-color: var(--o-cy); }
.dept-agents { display: flex; flex-direction: column; gap: 2px; }

.arow { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 10px; cursor: pointer; }
.arow:hover { background: rgba(255,162,104,.07); }
.aav { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: rgba(10,25,42,.7); border: 1px solid var(--o-line); font-size: 15px; }
.an { font-size: 13.5px; color: #f3ece7; font-weight: 600; display: flex; align-items: baseline; gap: 7px; }
.an small { font-size: 11px; color: #b09a8c; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aj { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #9fbdd6; margin-top: 2px; }
.ajt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.achev { color: #4a7fa5; font-size: 18px; flex: none; }

.adot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #4a5568; flex: none; }
.adot.working { background: #5fe0a0; box-shadow: 0 0 7px #5fe0a0; animation: adotpulse 1.7s ease-in-out infinite; }
.adot.waiting { background: #ffcf5f; box-shadow: 0 0 6px #ffcf5f; }
.adot.ready { background: #ffa268; box-shadow: 0 0 6px rgba(255,162,104,.6); }
.adot.paused, .adot.archived { background: #47566a; }
@keyframes adotpulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* Geräte */
.org-h { color: var(--o-cy); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin: 26px 0 12px; }
.org-devs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.devcard { position: relative; background: var(--o-panel); border: 1px solid var(--o-line); border-radius: 14px; padding: 13px 14px; cursor: pointer; }
.devcard:hover { border-color: var(--o-line2); }
.dev-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dev-n { font-weight: 700; color: #f3ece7; font-size: 14px; }
.dev-s { font-size: 11.5px; color: #b09a8c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caps { display: flex; flex-wrap: wrap; gap: 6px; }
.cap { font-size: 10.5px; padding: 3px 8px; border-radius: 20px; border: 1px solid var(--o-line); }
.cap.on { color: #7fe3b0; border-color: rgba(95,224,160,.3); background: rgba(95,224,160,.08); }
.cap.off { color: #5a6b7d; }

/* Drawer (Sidepanel) */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer.hidden { display: none; }
.drawer-bg { position: absolute; inset: 0; background: rgba(2,6,12,.62); backdrop-filter: blur(2px); }
.drawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(430px, 94vw); overflow-y: auto;
  background: #0a1626; border-left: 1px solid var(--jc-line2, rgba(217,120,79,.42)); padding: 20px 20px 40px;
  animation: drawerin .18s ease; }
@keyframes drawerin { from { transform: translateX(34px); opacity: .3; } to { transform: none; opacity: 1; } }
.dr-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dr-av { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(255,162,104,.10); border: 1px solid rgba(217,120,79,.3); font-size: 22px; }
.dr-name { background: transparent; border: 1px solid transparent; border-radius: 8px; color: #f3ece7; font-size: 19px; font-weight: 700; padding: 4px 6px; width: 100%; }
.dr-name:focus { border-color: rgba(217,120,79,.4); background: rgba(10,25,42,.6); outline: none; }
.dr-role { font-size: 12px; color: #b09a8c; padding: 0 6px; }
.dr-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dr-box { background: rgba(10,22,38,.55); border: 1px solid rgba(217,120,79,.16); border-radius: 12px; padding: 12px 13px; margin-bottom: 10px; }
.dr-k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #6f97b8; margin-bottom: 7px; }
.dr-v { color: #eadfd7; font-size: 13.5px; }
.dr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 11.5px; padding: 4px 9px; border-radius: 20px; background: rgba(255,162,104,.08); border: 1px solid rgba(217,120,79,.2); color: #bfe0f5; }
.dr-inp { background: rgba(10,25,42,.6); border: 1px solid rgba(217,120,79,.25); color: #f3ece7; border-radius: 9px; padding: 8px 11px; width: 100%; }
.dr-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.dr-note { font-size: 12px; color: #8aa6bf; margin-top: 8px; }
.caprow { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px solid rgba(217,120,79,.10); }
.caprow:last-child { border-bottom: 0; }
.capyes { color: #7fe3b0; } .capno { color: #6a7f93; }

/* Handy */
@media (max-width: 820px) {
  .org-grid, .org-devs { grid-template-columns: 1fr; }
  .org-hero { gap: 14px; }
  .org-title { font-size: 18px; }
  .drawer-panel { width: 100%; border-left: 0; }
}

/* ==================== ORGANISATION — grafische Konstellation ==================== */
.org-list { display: none; }
.org-graph { position: relative; height: 660px; max-width: 980px; margin: 4px auto 8px; }
.org-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; }
.olink { stroke: rgba(217,120,79,.13); stroke-width: 1.4; }
.olink.active { stroke: rgba(255,162,104,.5); stroke-width: 2; filter: drop-shadow(0 0 4px rgba(255,162,104,.5)); }
.flowdot { fill: #d6f2ff; filter: drop-shadow(0 0 6px #ffa268); }

/* Zentraler JARVIS-Core */
.org-corebig { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 116px; height: 116px; border-radius: 50%; display: grid; place-content: center; text-align: center; cursor: pointer; line-height: 1.15;
  background: radial-gradient(circle at 50% 42%, #e2f5ff, #ffa268 48%, rgba(255,162,104,.12) 74%, transparent);
  box-shadow: 0 0 48px rgba(255,162,104,.5); }
.org-corebig::before, .org-corebig::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(255,162,104,.4); animation: orgspin 10s linear infinite; }
.org-corebig::before { inset: -10px; }
.org-corebig::after { inset: -18px; border-style: dashed; border-color: rgba(255,162,104,.24); animation-duration: 17s; animation-direction: reverse; }
.org-corebig.warn { background: radial-gradient(circle at 50% 42%, #ffe8c2, #d9a13f 48%, transparent 74%); box-shadow: 0 0 48px rgba(217,161,63,.5); }
.org-corebig b { position: relative; display: block; color: #062033; font-weight: 800; letter-spacing: .12em; font-size: 15px; }
.org-corebig small { position: relative; color: #083048; opacity: .78; font-size: 10px; }

/* Abteilungs-Knoten */
.dnode { position: absolute; transform: translate(-50%, -50%); z-index: 1; width: 128px; text-align: center; cursor: pointer; }
.dnode-ring { width: 58px; height: 58px; margin: 0 auto 7px; border-radius: 50%; display: grid; place-items: center; font-size: 23px; color: var(--o-cy, #ffa268);
  background: rgba(9,20,34,.85); border: 1px solid rgba(217,120,79,.42); box-shadow: 0 0 0 5px rgba(6,13,22,.7); transition: box-shadow .2s, border-color .2s; }
.dnode.active .dnode-ring { border-color: rgba(255,162,104,.75); animation: dpulse 2.6s ease-in-out infinite; }
.dnode.empty .dnode-ring { border-style: dashed; color: #5a7189; background: rgba(9,20,34,.5); }
.dnode:hover .dnode-ring { border-color: #ffa268; box-shadow: 0 0 22px rgba(255,162,104,.4), 0 0 0 5px rgba(6,13,22,.7); }
.dnode-name { color: #f3ece7; font-weight: 700; font-size: 13px; }
.dnode.empty .dnode-name { color: #9fb4c8; }
.dnode-sub { color: #b09a8c; font-size: 10.5px; margin-top: 1px; }
.dnode-dots { display: flex; gap: 3px; justify-content: center; margin-top: 5px; min-height: 8px; }
.dnode-dots .adot { width: 7px; height: 7px; }
@keyframes dpulse { 0%,100% { box-shadow: 0 0 14px rgba(255,162,104,.3), 0 0 0 5px rgba(6,13,22,.7); } 50% { box-shadow: 0 0 28px rgba(255,162,104,.55), 0 0 0 5px rgba(6,13,22,.7); } }

/* Handy: keine Netzgrafik — Kartenliste zeigen */
@media (max-width: 820px) {
  .org-graph { display: none; }
  .org-list { display: block; }
}
/* Sehr schmale/hohe Desktopfenster: Konstellation etwas kleiner */
@media (max-width: 1000px) and (min-width: 821px) {
  .org-graph { height: 560px; }
  .dnode { width: 108px; }
  .dnode-ring { width: 50px; height: 50px; font-size: 20px; }
}

/* ==================== ORGANISATION — Warnungen/Freigaben + Command-Bar ==================== */
.org-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
@media (max-width: 820px) { .org-two { grid-template-columns: 1fr; } }
.opanel { position: relative; background: rgba(10,20,34,.62); border: 1px solid rgba(217,120,79,.20); border-radius: 14px; padding: 14px; backdrop-filter: blur(8px); }
.opanel::before, .opanel::after { content: ''; position: absolute; width: 11px; height: 11px; border: 1.5px solid rgba(217,120,79,.42); pointer-events: none; }
.opanel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: 5px 0 0 0; }
.opanel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 5px 0; }
.opanel-h { color: #ffa268; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.ocount { font-size: 10px; padding: 1px 7px; border-radius: 20px; }
.ocount.bad { background: rgba(217,92,92,.18); color: #ff8f8f; }
.ocount.warn { background: rgba(217,161,63,.18); color: #ffcf7a; }
.orow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(217,120,79,.10); }
.orow:last-child { border-bottom: 0; }
.orow[data-orgtask] { cursor: pointer; }
.orow[data-orgtask]:hover .ot { color: #ffa268; }
.ot { color: #f3ece7; font-size: 13.5px; }
.os { color: #8aa6bf; font-size: 11.5px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.odot.bad { background: #ff6b6b; box-shadow: 0 0 7px #ff6b6b; }
.odot.warn { background: #ffcf5f; box-shadow: 0 0 6px #ffcf5f; }
.oact { display: flex; gap: 6px; flex: none; }

.org-cmd { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 45; width: min(680px, calc(100% - 300px));
  display: flex; align-items: center; gap: 8px; background: rgba(8,16,28,.94); backdrop-filter: blur(16px);
  border: 1px solid rgba(217,120,79,.35); border-radius: 14px; padding: 6px 6px 6px 14px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.org-cmd-ico { color: #ffa268; font-size: 16px; }
.org-cmd input { flex: 1; background: transparent; border: 0; color: #f3ece7; font-size: 14px; padding: 9px 4px; }
.org-cmd input::placeholder { color: #5c7f9c; }
.org-cmd input:focus { outline: none; }
.org-cmd button { width: 46px; height: 40px; flex: none; border-radius: 10px; background: rgba(255,162,104,.16); border: 1px solid #2a6d99; color: #ffb583; font-size: 16px; cursor: pointer; }
.org-cmd button:hover { background: rgba(255,162,104,.3); }
.org-reply { position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 45; width: min(680px, calc(100% - 300px));
  background: rgba(10,22,38,.97); border: 1px solid rgba(217,120,79,.3); border-radius: 12px; padding: 12px 15px; color: #eadfd7; font-size: 13.5px; line-height: 1.5; box-shadow: 0 12px 40px rgba(0,0,0,.55); }
.org-reply.pending { color: #8aa6bf; }

@media (max-width: 820px) {
  .org-cmd { width: calc(100% - 20px); bottom: calc(72px + env(safe-area-inset-bottom)); }
  .org-reply { width: calc(100% - 20px); bottom: calc(128px + env(safe-area-inset-bottom)); }
}

/* Organisation — Kosten- & Aktivitäts-Zeilen */
.ocost { margin-bottom: 9px; }
.ocost-l { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #eadfd7; margin-bottom: 4px; }
.ocost-l .grow { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocost-l b { color: #f3ece7; flex: none; }
.aav.sm { width: 22px; height: 22px; font-size: 12px; border-radius: 6px; }
.oatime { color: #9d8677; font-size: 10.5px; font-variant-numeric: tabular-nums; flex: none; min-width: 34px; }

/* ==================== JARVIS CONTROL CENTER — Vollbild-Rahmen ==================== */
.cc { --o-cy: #ffa268; }
.cc-top { display: flex; align-items: center; gap: 16px; padding: 2px 2px 16px; border-bottom: 1px solid rgba(217,120,79,.16); margin-bottom: 16px; }
.cc-brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.cc-x { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(255,162,104,.12); border: 1px solid rgba(217,120,79,.3); color: #ffa268; font-size: 17px; }
.cc-t1 { font-weight: 800; color: #f3ece7; font-size: 15px; letter-spacing: .02em; }
.cc-t2 { color: #9d8677; font-size: 10px; letter-spacing: .12em; }
.cc-titleblock { text-align: center; flex: 1.4; }
.cc-ct { font-size: 22px; font-weight: 800; letter-spacing: .14em; color: #dccdc2; text-shadow: 0 0 18px rgba(255,162,104,.6); }
.cc-cs { color: #b09a8c; font-size: 12px; margin-top: 3px; }
.cc-statusbar { display: flex; align-items: center; gap: 16px; flex: 1; justify-content: flex-end; }
.cc-srv { text-align: right; font-size: 10.5px; letter-spacing: .08em; color: #8fb6cf; white-space: nowrap; }
.cc-srv small { display: block; color: #9d8677; }
.cc-clock { color: #cfeeff; font-variant-numeric: tabular-nums; font-size: 15px; letter-spacing: .06em; }
.cc-health { display: flex; align-items: center; gap: 10px; }
.cc-health .jring { width: 54px; height: 54px; }
.cc-health .jring b { font-size: 14px; } .cc-health .jring small { font-size: 8px; }
.cc-metrics { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; color: #8fb6cf; }

.cc-grid { display: grid; grid-template-columns: 300px 1fr 340px; gap: 14px; align-items: start; }
.cc-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.opanel-scroll { max-height: 232px; overflow-y: auto; padding-right: 3px; }
.opanel-scroll::-webkit-scrollbar { width: 4px; } .opanel-scroll::-webkit-scrollbar-thumb { background: rgba(217,120,79,.35); border-radius: 3px; }
.cc-mid { position: relative; min-height: 600px; }
.cc-mid .org-graph { height: 600px; margin: 0; max-width: none; }

/* Aufgaben-Zeilen */
.jico { color: #ffa268; font-size: 12px; flex: none; }
.jprio { font-size: 11px; font-weight: 700; flex: none; }
.jprio.critical, .jprio.high { color: #ff8f8f; }
.jprio.normal { color: #e7b45a; }
.jprio.low, .jprio.background { color: #b09a8c; }

/* Geräte (kompakt) */
.devmini { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(217,120,79,.10); cursor: pointer; }
.devmini:last-child { border-bottom: 0; }
.devmini .dev-n { color: #f3ece7; font-weight: 600; font-size: 13px; }
.devmini .dev-s { color: #b09a8c; font-size: 11px; }
.devmini .cap { flex: none; }
.devmini:hover .dev-n { color: #ffa268; }

/* Systemübersicht */
.systiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.systile { background: rgba(10,25,42,.5); border: 1px solid rgba(217,120,79,.16); border-radius: 10px; padding: 10px; text-align: center; }
.st-ico { color: #ffa268; font-size: 14px; }
.st-v { color: #f3ece7; font-size: 16px; font-weight: 700; margin: 3px 0 1px; }
.st-k { color: #b09a8c; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; }
.sysbars { display: flex; flex-direction: column; gap: 8px; }
.sysbar-l { display: flex; justify-content: space-between; font-size: 11.5px; color: #d8c8bc; margin-bottom: 3px; }
.sysbar-l span:last-child { color: #b09a8c; }

/* Beispiel-Chips über der Command-Bar */
.org-chips { position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 45; width: min(680px, calc(100% - 300px)); display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ochip { background: rgba(12,30,50,.85); border: 1px solid rgba(217,120,79,.25); color: #9fc5e0; border-radius: 20px; padding: 6px 12px; font-size: 12px; cursor: pointer; backdrop-filter: blur(8px); }
.ochip:hover { color: #f3ece7; border-color: #ffa268; }
.org-reply { bottom: 120px; }

/* Handy: alles stapeln, Control-Center wird zur Liste */
@media (max-width: 820px) {
  .cc-top { flex-direction: column; gap: 8px; align-items: stretch; text-align: center; padding-bottom: 12px; }
  .cc-brand, .cc-statusbar { justify-content: center; flex: none; }
  .cc-titleblock { order: -1; flex: none; }
  .cc-ct { font-size: 18px; letter-spacing: .1em; }
  .cc-grid { grid-template-columns: 1fr; gap: 12px; }
  .cc-mid { min-height: auto; order: -1; }
  .opanel-scroll { max-height: 300px; }
  .org-chips { display: none; }
  .org-reply { bottom: calc(128px + env(safe-area-inset-bottom)); }
}

/* Control Center: Vollbild-Dashboard auf Desktop (volle Breite, Spalten scrollen intern) */
@media (min-width: 821px) {
  main:has(.cc) { max-width: none; padding: 18px 26px 0; }
  .cc-grid { height: calc(100dvh - 190px); }
  .cc-col { overflow-y: auto; padding-right: 4px; }
  .cc-col::-webkit-scrollbar { width: 5px; } .cc-col::-webkit-scrollbar-thumb { background: rgba(217,120,79,.3); border-radius: 3px; }
  .cc-mid { overflow: hidden; }
  .cc-mid .org-graph { height: 100%; }
  .org-cmd { width: min(720px, calc(100% - 720px)); }
  .org-chips { width: min(720px, calc(100% - 720px)); }
}

/* Fix: Spalten auf volle Grid-Höhe strecken -> Konstellation füllt Mitte, Spalten scrollen intern */
@media (min-width: 821px) {
  .cc-grid { align-items: stretch; }
  .cc-mid { display: flex; flex-direction: column; }
  .cc-mid .org-graph { flex: 1; height: auto; min-height: 480px; }
}

/* Mobiles „Mehr"-Menü (Bottom-Sheet mit allen Bereichen) */
.moresheet { position: fixed; inset: 0; z-index: 55; }
.moresheet.hidden { display: none; }
.ms-bg { position: absolute; inset: 0; background: rgba(2,6,12,.62); backdrop-filter: blur(3px); }
.ms-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 84vh; overflow-y: auto;
  background: #0a1626; border-top: 1px solid rgba(217,120,79,.35); border-radius: 20px 20px 0 0;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); animation: mssheet .2s ease; }
@keyframes mssheet { from { transform: translateY(36px); opacity: .4; } to { transform: none; opacity: 1; } }
.ms-grip { width: 40px; height: 4px; border-radius: 3px; background: rgba(217,120,79,.35); margin: 6px auto 10px; }
.ms-head { display: flex; align-items: center; justify-content: space-between; color: #f3ece7; font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.ms-x { background: rgba(255,162,104,.12); border: 1px solid rgba(217,120,79,.3); color: #ffb583; border-radius: 9px; padding: 7px 11px; font-size: 14px; cursor: pointer; }
.ms-group { color: #9d8677; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; margin: 14px 2px 7px; }
.ms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ms-item { display: flex; align-items: center; gap: 10px; padding: 14px 12px; background: rgba(10,22,38,.6); border: 1px solid rgba(217,120,79,.18); border-radius: 12px; color: #eadfd7; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.ms-item.on { border-color: #ffa268; background: rgba(255,162,104,.12); color: #f3ece7; }
.ms-item:active { border-color: #ffa268; }
.ms-ico { color: #ffa268; font-size: 16px; width: 20px; text-align: center; flex: none; }

/* Command Palette (Strg+K) — globale Suche */
.cmdk-results { max-height: 340px; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.cmdk-results::-webkit-scrollbar { width: 5px; } .cmdk-results::-webkit-scrollbar-thumb { background: rgba(217,120,79,.3); border-radius: 3px; }
.cmdk-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.cmdk-item.sel { background: rgba(255,162,104,.13); }
.ci-ico { width: 22px; text-align: center; color: #ffa268; font-size: 15px; flex: none; }
.ci-l { flex: 1; color: #f3ece7; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-t { color: #b09a8c; font-size: 11px; flex: none; }
.cmdk-empty { color: #b09a8c; padding: 16px; text-align: center; }
.ms-search { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 14px; margin-bottom: 8px; background: rgba(10,22,38,.7); border: 1px solid rgba(217,120,79,.25); border-radius: 12px; color: #9fc5e0; font-size: 14px; cursor: pointer; text-align: left; }
.ms-search .ms-ico { color: #ffa268; }
.ms-search:active { border-color: #ffa268; }

/* ==================== PROJEKT-FLUSS (Pipeline) ==================== */
.pflow { display: flex; flex-direction: column; gap: 14px; }
.pf-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; gap: 10px; }
.pf-name { color: #f3ece7; font-weight: 700; font-size: 16px; }
.pf-meta { color: #9fbdd6; font-size: 12.5px; white-space: nowrap; }
.pf-meta b { color: #ffa268; }
.pf-bar { height: 5px; border-radius: 4px; background: rgba(255,162,104,.12); overflow: hidden; margin-bottom: 16px; }
.pf-bar > i { display: block; height: 100%; background: linear-gradient(90deg,#c9550a,#ffa268); box-shadow: 0 0 8px rgba(255,162,104,.5); }
.pf-track { display: flex; align-items: flex-start; overflow-x: auto; padding-bottom: 4px; }
.pf-track::-webkit-scrollbar { height: 5px; } .pf-track::-webkit-scrollbar-thumb { background: rgba(217,120,79,.3); border-radius: 3px; }
.pf-stage { flex: 1; min-width: 72px; text-align: center; }
.pf-node { display: flex; justify-content: center; margin-bottom: 8px; }
.pf-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #47566a; background: #0a1626; }
.pf-l { color: #cfe6f6; font-size: 12.5px; font-weight: 600; }
.pf-s { font-size: 11px; margin-top: 3px; color: #8aa6bf; }
.pf-a { font-size: 10.5px; color: #b09a8c; margin-top: 2px; }
.pf-line { flex: none; width: 40px; min-width: 24px; height: 2px; background: #2a3b50; margin-top: 8px; }
.pf-stage.done .pf-dot { border-color: #5fe0a0; background: #5fe0a0; box-shadow: 0 0 8px #5fe0a0; }
.pf-stage.done .pf-s { color: #7fe3b0; }
.pf-stage.working .pf-dot { border-color: #ffa268; background: #ffa268; box-shadow: 0 0 10px #ffa268; animation: adotpulse 1.6s infinite; }
.pf-stage.working .pf-s { color: #ffa268; } .pf-stage.working .pf-l { color: #f3ece7; }
.pf-stage.waiting .pf-dot { border-color: #ffcf5f; } .pf-stage.waiting .pf-s { color: #ffcf5f; }
.pf-stage.none { opacity: .5; } .pf-stage.none .pf-s { color: #6a7f93; }

/* Command-Bar fest in der Mittelspalte statt schwebend übers ganze Fenster (kein Überlappen) */
@media (min-width: 821px) {
  .cc-mid { overflow: visible; }
  .cc-mid .org-graph { overflow: hidden; }
  .cc-mid .org-chips, .cc-mid .org-cmd, .cc-mid .org-reply {
    position: static; transform: none; left: auto; right: auto; bottom: auto; width: auto; z-index: auto; max-width: 100%;
  }
  .cc-mid .org-chips { margin: 6px 0 8px; }
  .cc-mid .org-cmd { margin-top: 2px; }
  .cc-mid .org-reply { margin: 0 0 8px; }
}

/* Schmaler Desktop (<1300px): Mitte wird zu eng für den Graph -> Kartenliste zeigen */
@media (min-width: 821px) and (max-width: 1300px) {
  .cc-grid { grid-template-columns: 260px 1fr 280px; }
  .cc-mid .org-graph { display: none; }
  .cc-mid .org-list { display: block; flex: 1; overflow-y: auto; padding-right: 3px; }
}

/* ==================== Eingabeleisten: Mikro + Datei (Jarvis & Organisation) ==================== */
.jcc-input .jcc-ibtn { width: 40px; flex: none; }
.jcc-ibtn.rec, .org-ibtn.rec { border-color: #ff6b6b !important; background: rgba(255,107,107,.18) !important; animation: recpulse 1.2s ease-in-out infinite; }
.jcc-attach, .org-attach { display: flex; align-items: center; gap: 8px; background: rgba(10,22,38,.85); border: 1px solid rgba(217,120,79,.3); border-radius: 10px; padding: 6px 10px; margin: 0 auto 8px; max-width: min(660px, 94%); }
.jcc-attach img, .org-attach img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; flex: none; }
.jcc-attach span, .org-attach span { flex: 1; font-size: 12px; color: #9fc5e0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jcc-attach button, .org-attach button { background: none; border: 0; color: #9fc5e0; cursor: pointer; font-size: 14px; }
/* Organisation-Command-Bar Icon-Buttons */
.org-cmd .org-ibtn { width: 40px; height: 40px; flex: none; border-radius: 10px; background: rgba(255,162,104,.1); border: 1px solid #2a6d99; color: #ffb583; font-size: 15px; cursor: pointer; }
.org-cmd .org-ibtn:hover { background: rgba(255,162,104,.22); }

/* ==================== Missions-Detail: Telemetrie, Artefakte, Schritte ==================== */
.td-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); gap: 8px; margin: 14px 0 8px; }
.td-tile { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.td-tile .k { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.td-tile .v { font-size: 16px; font-weight: 700; margin-top: 3px; color: var(--text); }
.td-tile .v.live { color: var(--accent); }
.td-desc { margin-bottom: 4px; white-space: pre-wrap; }
.td-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }

/* ==================== Live-Transparenz-Dashboard (Mission #97) ==================== */
.live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 8px; }
.live-card { padding: 14px; border-color: rgba(217,120,79,.35); }
.live-card .lc-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.live-card .lc-step { font-size: 12.5px; color: #c4b3a6; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; min-height: 32px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.livebar { height: 5px; border-radius: 3px; background: var(--bg2); overflow: hidden; margin-top: 10px; }
.livebar-fill { height: 100%; background: linear-gradient(90deg, #7be3a0, var(--accent)); transition: width .4s ease; }
.art-gallery { display: flex; flex-wrap: wrap; gap: 10px; }
.artifact { width: 180px; height: 120px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); cursor: zoom-in; transition: transform .15s, border-color .15s; background: #0a0a0f; }
.artifact:hover { transform: scale(1.03); border-color: var(--accent); }
.art-link { color: var(--accent); text-decoration: none; word-break: break-all; }
.art-link:hover { text-decoration: underline; }
.td-result { white-space: pre-wrap; line-height: 1.55; font-size: 14px; color: var(--text); }
.trace { display: flex; flex-direction: column; gap: 1px; }
.trow { display: flex; gap: 10px; align-items: flex-start; padding: 7px 6px; border-radius: 8px; }
.trow:hover { background: var(--bg2); }
.tr-ic { flex: none; width: 20px; text-align: center; }
.tr-t { flex: none; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; min-width: 46px; }
.tr-x { color: var(--text); font-size: 13px; }
.tr-x.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: #c4b3a6; word-break: break-word; }
.trow.bad .tr-x { color: var(--bad); }
.trow.ok .tr-x { color: var(--ok); }
.trow.tool .tr-ic { color: var(--accent); }
.td-msg { display: flex; gap: 8px; }
.td-msg input { flex: 1; }

/* ==================== Jarvis: sichtbarer Gesprächsverlauf (Protokoll) ==================== */
.j-log { position: relative; z-index: 2; width: min(680px, 96%); max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 4px 6px; margin: 0 auto 8px; }
.j-log::-webkit-scrollbar { width: 4px; } .j-log::-webkit-scrollbar-thumb { background: rgba(255,162,104,.35); border-radius: 3px; }
.jl-msg { max-width: 86%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; backdrop-filter: blur(4px); }
.jl-msg.me { align-self: flex-end; background: rgba(255,162,104,.16); border: 1px solid rgba(217,120,79,.35); color: #f3ece7; border-bottom-right-radius: 4px; }
.jl-msg.bina { align-self: flex-start; background: rgba(10,22,38,.82); border: 1px solid rgba(217,120,79,.2); color: #eadfd7; border-bottom-left-radius: 4px; }
.jl-img { display: block; max-width: 150px; border-radius: 8px; margin-bottom: 6px; }
.jl-empty { color: #9d8677; font-size: 12.5px; text-align: center; padding: 12px; }
@media (max-width: 820px) { .j-log { max-height: 46vh; width: 100%; } }

/* ---------- Live-Fenster ---------- */
.live-fab{position:fixed;right:16px;bottom:16px;z-index:900;display:flex;align-items:center;gap:7px;
  padding:9px 14px;border:1px solid var(--line,rgba(255,255,255,.14));border-radius:999px;cursor:pointer;
  background:var(--card,#111826);color:var(--fg,#e8edf5);font:600 12px/1 system-ui,sans-serif;letter-spacing:.06em;
  box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .12s,border-color .12s}
.live-fab:hover{transform:translateY(-2px);border-color:var(--accent,#d9784f)}
.live-fab.active{border-color:var(--accent,#d9784f);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent,#d9784f) 30%,transparent),0 6px 20px rgba(0,0,0,.35)}
.lf-dot{width:8px;height:8px;border-radius:50%;background:#ff4d5e;box-shadow:0 0 0 0 rgba(255,77,94,.6);animation:lwpulse 1.6s infinite}
@keyframes lwpulse{0%{box-shadow:0 0 0 0 rgba(255,77,94,.55)}70%{box-shadow:0 0 0 7px rgba(255,77,94,0)}100%{box-shadow:0 0 0 0 rgba(255,77,94,0)}}

.live-win{position:fixed;right:16px;bottom:66px;z-index:901;width:380px;max-width:calc(100vw - 24px);
  height:440px;max-height:calc(100vh - 90px);display:flex;flex-direction:column;overflow:hidden;
  background:var(--card,#0f1622);border:1px solid var(--line,rgba(255,255,255,.14));border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.live-win.hidden{display:none}
.live-win.mini{height:auto}
.live-win.mini .lw-body{display:none}
.lw-head{display:flex;align-items:center;gap:8px;padding:11px 12px;cursor:grab;user-select:none;
  border-bottom:1px solid var(--line,rgba(255,255,255,.1));background:var(--panel,rgba(255,255,255,.03))}
.lw-head:active{cursor:grabbing}
.lw-dot{width:8px;height:8px;border-radius:50%;background:#ff4d5e;animation:lwpulse 1.6s infinite;flex:none}
.lw-title{font:600 13px/1 system-ui,sans-serif;color:var(--fg,#e8edf5)}
.lw-count{font:500 11px/1 system-ui;color:var(--muted,#8a97a8)}
.lw-sp{flex:1}
.lw-btn{width:26px;height:26px;border:none;border-radius:7px;cursor:pointer;font-size:16px;line-height:1;
  background:transparent;color:var(--muted,#8a97a8)}
.lw-btn:hover{background:rgba(255,255,255,.08);color:var(--fg,#e8edf5)}
.lw-body{flex:1;overflow-y:auto;padding:6px 4px 10px}
.lw-empty{padding:34px 18px;text-align:center;color:var(--muted,#8a97a8);font-size:13px;line-height:1.6}
.lw-row{display:flex;align-items:baseline;gap:8px;padding:6px 10px;border-radius:8px;font-size:12.5px;line-height:1.35}
.lw-row:hover{background:rgba(255,255,255,.04)}
.lw-t{flex:none;font:500 11px/1.3 ui-monospace,monospace;color:var(--muted,#8a97a8);min-width:56px}
.lw-ic{flex:none;width:15px;text-align:center;color:var(--muted,#8a97a8)}
.lw-x{flex:1;color:var(--fg,#dfe6ef);word-break:break-word}
.lw-ref{flex:none;font:500 11px/1.3 ui-monospace,monospace;color:var(--muted,#8a97a8);cursor:pointer;opacity:.7}
.lw-ref:hover{color:var(--accent,#d9784f);opacity:1}
.lw-row.lw-tool .lw-x{color:var(--accent,#d9784f)}
.lw-row.lw-tool .lw-ic{color:var(--accent,#d9784f)}
.lw-row.lw-ok .lw-x{color:var(--ok,#4ade80)}
.lw-row.lw-ok .lw-ic{color:var(--ok,#4ade80)}
.lw-row.lw-bad .lw-x{color:var(--bad,#ff6b6b)}
.lw-row.lw-bad .lw-ic{color:var(--bad,#ff6b6b)}
.lw-row.lw-new{animation:lwflash 1.1s ease-out}
@keyframes lwflash{0%{background:color-mix(in srgb,var(--accent,#d9784f) 26%,transparent)}100%{background:transparent}}

@media (max-width:820px){
  .live-fab{bottom:calc(env(safe-area-inset-bottom,0) + 74px);right:12px}
  .live-win{left:0;right:0;bottom:0;top:auto;width:100%;max-width:100%;height:64vh;
    border-radius:16px 16px 0 0;border-bottom:none}
}

/* ---------- Browser-Live-Sicht ---------- */
.bw-wait{margin:12px 0;padding:14px 16px;border-radius:12px;border:1px solid #ffb020;
  background:linear-gradient(180deg,rgba(255,176,32,.16),rgba(255,176,32,.05))}
.bw-wait-h{font:700 15px/1.2 system-ui;color:#ffcf6b;margin-bottom:4px}
.bw-wait-b{font:600 14px/1.4 system-ui;color:var(--fg,#eef2f8)}
.bw-wait-n{margin-top:6px;font-size:12.5px;color:var(--muted,#9aa6b6);line-height:1.5}
.bw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;margin-top:14px}
.bw-tile{border:1px solid var(--line,rgba(255,255,255,.12));border-radius:12px;overflow:hidden;background:var(--card,#0f1622)}
.bw-tile.waiting{border-color:#ffb020;box-shadow:0 0 0 2px rgba(255,176,32,.25)}
.bw-cap{display:flex;align-items:center;gap:8px;padding:9px 11px;font-size:13px;
  border-bottom:1px solid var(--line,rgba(255,255,255,.08));background:var(--panel,rgba(255,255,255,.03))}
.bw-cap .meta{margin-left:auto;color:var(--muted,#8a97a8);font-size:12px}
.bw-frame{display:block;width:100%;height:auto;background:#05070c}
.bw-noframe{padding:44px 16px;text-align:center;color:var(--muted,#8a97a8);font-size:13px}
.bw-recent{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:12px}
.bw-rt{display:block;border:1px solid var(--line,rgba(255,255,255,.1));border-radius:10px;overflow:hidden;text-decoration:none}
.bw-rt img{display:block;width:100%;height:130px;object-fit:cover;background:#05070c}
.bw-rt span{display:block;padding:7px 9px;font-size:11.5px;color:var(--muted,#9aa6b6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:820px){ .bw-grid{grid-template-columns:1fr} }
.bw-actions{margin:12px 0}
.jdev-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.jdev-b{padding:9px 12px;border:1px solid var(--line,rgba(255,255,255,.15));border-radius:9px;background:var(--card,#141b28);color:var(--fg,#e8edf5);font-size:13px;cursor:pointer}
.jdev-b:hover{border-color:var(--accent,#d9784f)}


/* Aktionsleiste unter jeder Antwort (Kopieren / Vorlesen / Weiterführen).
   Dezent, erscheint kräftiger beim Darüberfahren — auf dem Handy immer sichtbar. */
.msg { position: relative; }
.msg-text { white-space: pre-wrap; }
.msg-tools { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; opacity: .45; transition: opacity .15s; }
.msg:hover .msg-tools { opacity: 1; }
.msg-tools .mt {
  background: transparent; border: 1px solid currentColor; color: inherit;
  border-radius: 6px; padding: 3px 9px; font-size: 11px; line-height: 1.6;
  cursor: pointer; opacity: .8; font-family: inherit;
}
.msg-tools .mt:hover { opacity: 1; background: rgba(127,127,127,.14); }
.msg-tools .mt:disabled { opacity: .4; cursor: default; }
.msg-tools .mt.ok { border-color: #3ddc84; color: #3ddc84; }
@media (max-width: 820px) { .msg-tools { opacity: .8; } }

/* Fortschrittsbalken in den Live-Karten des Command Centers */
.op-card .bar { height: 3px; background: rgba(127,127,127,.22); border-radius: 2px; overflow: hidden; }
.op-card .bar > i { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
/* Neue Ereignisse gleiten sanft in den Live-Strom */
.timeline .row { animation: ccIn .35s ease both; }
@keyframes ccIn { from { transform: translateY(-4px); opacity: 0 } to { transform: none; opacity: 1 } }

/* Bildschirmwand: ein grosser Live-Bildschirm, darunter alle als Vorschau */
.bw-wand { margin: 10px 0 14px; }
.bw-gross { position: relative; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid rgba(127,127,127,.25); }
.bw-gross { aspect-ratio: 1360 / 820; }
.bw-gross iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.bw-gross-cap { position: absolute; left: 10px; bottom: 8px; font-size: 11px; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.6); color: #fff; }
.bw-minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.bw-mini { position: relative; height: 132px; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid rgba(127,127,127,.25); cursor: pointer; transition: border-color .15s, transform .15s; }
.bw-mini:hover { transform: translateY(-2px); }
.bw-mini.aktiv { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bw-mini iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.bw-mini-cap { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px; padding: 4px 7px; background: rgba(0,0,0,.66); color: #fff; }
.bw-mini-x { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 5px; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 11px; line-height: 1; }
.bw-mini.leer { display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(127,127,127,.07); border-style: dashed; }
.bw-mini-plus { font-size: 26px; opacity: .5; line-height: 1; }
.bw-mini.leer .bw-mini-cap { position: static; background: none; opacity: .7; margin-top: 6px; }
@media (max-width: 820px) { .bw-minis { grid-template-columns: repeat(3, 1fr); } .bw-mini { height: 88px; } }

/* ---------- Mission Control ---------- */
/* Waagerecht scrollbar statt gequetschter Spalten — sieben Spalten passen sonst nie. */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.kcol { flex: 0 0 236px; background: rgba(127,127,127,.05); border: 1px solid rgba(127,127,127,.14); border-radius: 12px; padding: 12px 10px; }
.kcol.leer { opacity: .45; }
.kcol.ruft { border-color: var(--warn); background: rgba(255,176,32,.06); }

.khead { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.khint { font-size: 10.5px; color: var(--muted); opacity: .75; margin-bottom: 10px; line-height: 1.4; }

/* Karte: Nummer, Titel (max 2 Zeilen), Fußzeile — nichts kann mehr aneinanderkleben. */
.kcard { position: relative; background: var(--card, rgba(255,255,255,.03)); border: 1px solid rgba(127,127,127,.16);
  border-radius: 10px; padding: 9px 10px 8px 12px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s, transform .12s; }
.kcard:hover { border-color: rgba(127,127,127,.4); transform: translateY(-1px); }
.kcard::before { content: ""; position: absolute; left: 4px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: transparent; }
.kcard.p-bad::before { background: var(--bad); }
.kcard.p-warn::before { background: var(--warn); }

.kcard .knum { font-size: 10px; color: var(--muted); opacity: .8; margin-bottom: 2px; }
.kcard .ktitle { font-size: 12.5px; line-height: 1.4; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kcard .kfoot { display: flex; align-items: baseline; gap: 8px; margin-top: 7px; font-size: 10.5px; color: var(--muted); }
.kcard .kwer { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcard .kage { flex: 0 0 auto; opacity: .7; }
.kcard .kage.alt { color: var(--warn); opacity: 1; }

.kempty { font-size: 12px; color: var(--muted); opacity: .5; padding: 4px 0 2px; }
.kmore { width: 100%; margin-top: 4px; padding: 6px; font-size: 10.5px; border-radius: 8px;
  border: 1px dashed rgba(127,127,127,.35); background: transparent; color: var(--muted); cursor: pointer; }
.kmore:hover { color: inherit; border-color: currentColor; }

@media (max-width: 820px) { .kcol { flex-basis: 200px; } }

/* Eigene Zustaende der Bildschirmwand - statt fremder noVNC-Meldungen */
.bw-platte { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 100%; padding: 12px; text-align: center; font-size: 11px;
  color: var(--muted, #8a8a93); background: rgba(127,127,127,.06); }
.bw-platte.gross { height: 460px; font-size: 13px; background: rgba(127,127,127,.04); }
.bw-platte b { color: var(--text, #e8e8ea); font-size: 14px; font-weight: 600; }
.bw-platte small { font-size: 11px; opacity: .75; line-height: 1.5; max-width: 340px; }
.bw-mini.defekt { border-color: rgba(239,68,68,.45); }
.bw-punkt { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; display: inline-block; }
.bw-live-punkt { width: 6px; height: 6px; border-radius: 50%; background: #22c55e;
  display: inline-block; margin-right: 6px; vertical-align: middle; }
@media (max-width: 820px) { .bw-platte.gross { height: 300px; } }

/* ---------- Mannschaftsübersicht ---------- */
.ag-reiter-leiste { display: flex; gap: 6px; margin: 12px 0 16px; }
.ag-reiter { background: rgba(127,127,127,.08); border: 1px solid rgba(127,127,127,.2); color: var(--muted);
  padding: 7px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; font-family: inherit; }
.ag-reiter:hover { color: var(--text); }
.ag-reiter.an { background: var(--accent); border-color: var(--accent); color: #fff; }

.ag-karte { padding: 15px; cursor: pointer; transition: transform .15s, border-color .15s; }
.ag-karte:hover { transform: translateY(-2px); border-color: rgba(127,127,127,.45); }
.ag-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ag-wer { display: flex; gap: 10px; align-items: center; }
.ag-avatar { font-size: 22px; line-height: 1; }
.ag-name { font-weight: 600; font-size: 14.5px; }
.ag-rolle { color: var(--muted); font-size: 12px; margin-top: 2px; }
.ag-zustand { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; white-space: nowrap;
  padding: 4px 9px; border-radius: 20px; background: rgba(127,127,127,.12); color: var(--muted); }
.ag-zustand i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ag-an .ag-zustand { background: rgba(34,197,94,.14); color: #22c55e; }
.ag-an .ag-zustand i { animation: agPuls 1.4s ease-in-out infinite; }
@keyframes agPuls { 50% { opacity: .25; } }
.ag-plan .ag-zustand { background: rgba(59,130,246,.14); color: #e08a52; }
.ag-warte .ag-zustand { background: rgba(245,158,11,.16); color: #f59e0b; }

.ag-arbeit { margin: 12px 0 0; padding: 9px 11px; border-radius: 8px; background: rgba(127,127,127,.07);
  border-left: 2px solid rgba(127,127,127,.3); }
.ag-an .ag-arbeit { border-left-color: #22c55e; }
.ag-warte .ag-arbeit { border-left-color: #f59e0b; }
.ag-arbeit-titel { font-size: 12.5px; }
.ag-arbeit-zeile { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.ag-schritt { font-size: 11px; color: var(--muted); margin-top: 4px; font-family: ui-monospace, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
.ag-arbeit-leer { color: var(--muted); font-size: 12px; border-left-color: transparent; background: none; padding-left: 0; }

.ag-stufe { margin-top: 12px; }
.ag-stufe-kopf { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.ag-balken { height: 4px; border-radius: 3px; background: rgba(127,127,127,.16); overflow: hidden; }
.ag-balken i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

.ag-zahlen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 13px; }
.ag-zahlen div { text-align: center; }
.ag-zahlen b { display: block; font-size: 13px; font-weight: 600; }
.ag-zahlen span { font-size: 10px; color: var(--muted); }

.ag-fuss { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(127,127,127,.14); font-size: 11px; color: var(--muted); }
.ag-modell { margin-left: auto; opacity: .6; }

.ag-projekt { padding: 15px; }
.ag-team { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0 8px; }
.ag-chip { font-size: 11px; padding: 3px 9px; border-radius: 20px; background: rgba(127,127,127,.12); }
.ag-chip b { opacity: .55; font-weight: 500; }

/* ---------- Netz ---------- */
.netz-huelle { border: 1px solid rgba(127,127,127,.2); border-radius: 12px; padding: 6px; overflow: hidden; }
.netz { width: 100%; height: auto; display: block; }
.netz-kante { stroke: rgba(127,127,127,.3); }
.netz-kante.aktiv { stroke: var(--accent); stroke-opacity: .7; }
.netz-knoten circle { fill: rgba(127,127,127,.14); stroke: rgba(127,127,127,.4); stroke-width: 1.5; }
.netz-knoten.projekt circle { fill: rgba(127,127,127,.09); stroke-dasharray: 3 3; }
.netz-knoten.aktiv circle { stroke: #22c55e; fill: rgba(34,197,94,.14); }
.netz-knoten.agent { cursor: pointer; }
.netz-knoten.agent:hover circle { stroke: var(--accent); }
.netz-sym { font-size: 15px; fill: var(--text); }
.netz-text { font-size: 10px; fill: var(--muted); }
.netz-legende { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 10px 4px; font-size: 11px; color: var(--muted); }
.netz-legende span { display: inline-flex; align-items: center; gap: 5px; }
.netz-legende i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(127,127,127,.5); }
.netz-legende i.l-projekt { border-style: dashed; }
.netz-legende i.l-aktiv { border-color: #22c55e; background: rgba(34,197,94,.2); }

/* ---------- Einzelgespräch ---------- */
#agFenster { position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; z-index: 90; padding: 20px; }
.agf-karte { width: min(620px, 100%); max-height: 84vh; display: flex; flex-direction: column;
  background: var(--bg, #14141a); border: 1px solid rgba(127,127,127,.25); border-radius: 14px; overflow: hidden; }
.agf-kopf { display: flex; gap: 10px; align-items: center; padding: 14px 16px;
  border-bottom: 1px solid rgba(127,127,127,.16); }
.agf-zu { margin-left: auto; background: none; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; }
.agf-hinweis { padding: 9px 16px; font-size: 11.5px; color: var(--muted); background: rgba(127,127,127,.06); }
.agf-verlauf { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.agf-zeile b { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.agf-zeile div { font-size: 13.5px; line-height: 1.55; }
.agf-zeile.ich div { background: rgba(127,127,127,.1); padding: 8px 11px; border-radius: 9px; }
.agf-zeile.wartet div { color: var(--muted); font-style: italic; }
.agf-eingabe { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(127,127,127,.16); }
.agf-eingabe textarea { flex: 1; resize: none; background: rgba(127,127,127,.08); color: var(--text);
  border: 1px solid rgba(127,127,127,.2); border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 13.5px; }
@media (max-width: 820px) { .ag-zahlen { grid-template-columns: repeat(3, 1fr); row-gap: 10px; } }
.ag-chat-knopf { background: rgba(127,127,127,.12); border: 1px solid rgba(127,127,127,.22);
  color: var(--muted); border-radius: 7px; padding: 3px 11px; font: inherit; font-size: 11px;
  cursor: pointer; }
.ag-chat-knopf:hover { color: var(--text); border-color: var(--accent); }
.ag-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.ag-rolle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 230px; }
.ag-zahlen b { white-space: nowrap; font-size: 12.5px; }
.ag-fuss { flex-wrap: wrap; row-gap: 6px; }
.ag-arbeit-titel { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) { .ag-gitter { grid-template-columns: 1fr; } }

/* ---------- Agenten-Profil ---------- */
.ap-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.ap-avatar { font-size: 34px; line-height: 1; }
.ap-ziel { padding: 10px 14px; border-radius: 9px; background: rgba(127,127,127,.07);
  font-size: 13px; margin-bottom: 14px; }
.ap-oben { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.3fr); gap: 14px; margin-bottom: 14px; }
.ap-unten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.ap-block { border: 1px solid rgba(127,127,127,.2); border-radius: 12px; padding: 14px; }
.ap-block-kopf { display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 12px; font-size: 13px; }
.ap-hinweis { font-size: 11px; color: var(--muted); }
.ap-mission { font-size: 11.5px; color: var(--accent); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 60%; }

.ap-wert-inhalt { display: flex; gap: 16px; align-items: center; }
.ap-ring { width: 118px; height: 118px; flex: none; }
.ap-ring-bg { fill: none; stroke: rgba(127,127,127,.18); stroke-width: 9; }
.ap-ring-vor { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dashoffset .6s ease; }
.ap-ring-zahl { font-size: 30px; font-weight: 700; fill: var(--text); }
.ap-ring-txt { font-size: 10px; fill: var(--muted); }
.ap-teile { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.ap-teil-kopf { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 3px; }
.ap-teil-hinweis { font-size: 10.5px; color: var(--muted); margin-top: 3px; }

.ap-live { border-color: rgba(34,197,94,.35); }
.ap-runde { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.ap-gedanken { max-height: 210px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.ap-g { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.45; }
.ap-g i { width: 6px; height: 6px; border-radius: 50%; background: rgba(127,127,127,.5);
  margin-top: 6px; flex: none; }
.ap-g.tool i { background: #e08a52; }
.ap-g.status i { background: #f59e0b; }
.ap-g.result i { background: #22c55e; }
.ap-g.tool span { font-family: ui-monospace, monospace; font-size: 11px; opacity: .85; }

.ap-zahlen { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px;
  background: rgba(127,127,127,.16); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }

.ap-kurve { width: 100%; height: auto; }
.ap-achse { stroke: rgba(127,127,127,.25); }
.ap-linie-menge { fill: none; stroke: var(--accent); stroke-width: 2; }
.ap-linie-quote { fill: none; stroke: #22c55e; stroke-width: 2; stroke-dasharray: 4 3; }
.ap-punkt-quote { fill: #22c55e; }
.ap-legende { display: flex; gap: 14px; font-size: 11px; color: var(--muted); margin-top: 4px; }
.ap-legende i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 5px; }
.ap-legende i.l-menge { background: var(--accent); }
.ap-legende i.l-quote { background: #22c55e; }

.ap-skill-gruppe { margin-bottom: 12px; }
.ap-skill-gruppe label { display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.ap-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-skill { font-size: 11.5px; padding: 4px 10px; border-radius: 20px;
  background: rgba(127,127,127,.1); border: 1px solid transparent; }
.ap-skill i { font-style: normal; opacity: .55; font-size: 10px; }
.ap-skill.kann { border-color: rgba(34,197,94,.4); }
.ap-skill.lernt { border-color: rgba(59,130,246,.45); }
.ap-skill.braucht { border-color: rgba(245,158,11,.4); }
.ap-leer { font-size: 11.5px; color: var(--muted); }

.ap-werkzeuge { display: flex; flex-direction: column; gap: 8px; }
.ap-wz { display: grid; grid-template-columns: 88px 1fr 34px; gap: 9px; align-items: center; font-size: 12px; }
.ap-wz b { text-align: right; font-weight: 500; color: var(--muted); font-size: 11px; }

.ap-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid rgba(127,127,127,.1); font-size: 12.5px; }
.ap-zeile:last-child { border-bottom: 0; }
.ap-zeile-meta { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
@media (max-width: 980px) { .ap-oben, .ap-unten { grid-template-columns: 1fr; }
  .ap-zahlen { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Skill-Board ---------- */
.sk-akademie { border: 1px solid rgba(232,121,249,.3); border-radius: 12px; padding: 14px; margin-bottom: 16px;
  background: rgba(232,121,249,.05); }
.sk-ak-kopf { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.sk-ak-kopf .btn { margin-left: auto; }
.sk-ak-liste { display: flex; flex-direction: column; gap: 9px; max-height: 260px; overflow-y: auto; }
.sk-ak-zeile { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; }
.sk-ak-grund { font-size: 11px; color: var(--muted); margin-top: 2px; }
.sk-ak-zeile i { font-style: normal; color: var(--muted); font-size: 11px; }
.sk-ak-rest { font-size: 11px; color: var(--muted); padding-top: 4px; }

.sk-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; }
.sk-filter .ag-reiter b { opacity: .5; font-weight: 500; margin-left: 3px; }
.sk-kat { margin-bottom: 22px; }
.sk-kat-kopf { display: flex; align-items: baseline; gap: 9px; margin-bottom: 10px;
  padding-left: 10px; border-left: 3px solid var(--kat, var(--accent)); }
.sk-kat-icon { font-size: 15px; }
.sk-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.sk-karte { border: 1px solid rgba(127,127,127,.2); border-radius: 10px; padding: 12px; }
.sk-karte.offen { border-style: dashed; opacity: .82; }
.sk-karte.gefragt { border-color: rgba(245,158,11,.4); }
.sk-name { font-size: 13px; font-weight: 600; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.sk-fehlt { font-size: 10px; color: #f59e0b; font-weight: 400; }
.sk-text { font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.sk-fuss { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.sk-gruppe label { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin-bottom: 4px; }
.sk-wer { display: flex; gap: 3px; }
.sk-kopf { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 12px; background: rgba(127,127,127,.14);
  border: 1.5px solid transparent; cursor: pointer; }
.sk-kopf.kann { border-color: rgba(34,197,94,.55); }
.sk-kopf.lernt { border-color: rgba(59,130,246,.55); }
.sk-kopf.braucht { border-color: rgba(245,158,11,.55); }
.sk-mehr { font-size: 10px; color: var(--muted); align-self: center; margin-left: 3px; }
.sk-niemand { font-size: 10.5px; color: var(--muted); opacity: .7; }

/* ---------- lebendes Netz ---------- */
.netz-flaeche { display: grid; grid-template-columns: 1fr 300px; gap: 12px; align-items: start; }
.netz-knoten.sektion circle { fill: rgba(127,127,127,.07); stroke: var(--kat, rgba(127,127,127,.4)); stroke-width: 1.5; }
.netz-knoten.sektion .netz-sym { font-size: 12px; }
.netz-kante.kann { stroke: rgba(34,197,94,.28); }
.netz-kante.lernt { stroke: rgba(59,130,246,.3); }
.netz-kante.braucht { stroke: rgba(245,158,11,.25); stroke-dasharray: 4 4; }
.netz-kante.feuert { stroke: var(--accent) !important; stroke-opacity: 1; filter: drop-shadow(0 0 4px var(--accent)); }
.netz-knoten.feuert circle { stroke: var(--accent); stroke-width: 3; filter: drop-shadow(0 0 7px var(--accent)); }
.netz-knoten.feuert .netz-sym { font-size: 18px; }
.netz-knoten circle, .netz-kante { transition: stroke .25s, stroke-width .25s, filter .25s; }

.netz-log { border: 1px solid rgba(127,127,127,.2); border-radius: 12px; padding: 12px;
  max-height: 640px; display: flex; flex-direction: column; }
.netz-log-kopf { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px; font-size: 13px; }
.netz-log-liste { overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.netz-log-zeile { display: flex; gap: 7px; font-size: 11.5px; line-height: 1.4; align-items: baseline;
  animation: netzRein .35s ease; }
@keyframes netzRein { from { opacity: 0; transform: translateY(-4px); } }
.nz-zeit { color: var(--muted); font-size: 10px; flex: none; font-variant-numeric: tabular-nums; }
.netz-log-zeile b { flex: none; color: var(--accent); font-weight: 600; }
.netz-log-zeile span:last-child { color: var(--muted); overflow: hidden; }
@media (max-width: 980px) { .netz-flaeche { grid-template-columns: 1fr; } .netz-log { max-height: 300px; } }

/* ---------- Coaching-Protokoll ---------- */
.co-liste, .co-alle { display: flex; flex-direction: column; gap: 10px; }
.co-liste { max-height: 420px; overflow-y: auto; }
.co-fall { border: 1px solid rgba(127,127,127,.2); border-radius: 11px; padding: 12px; }
.co-fall-kopf { display: flex; gap: 9px; align-items: baseline; margin-bottom: 10px; font-size: 13px; }
.co-fall-kopf .ap-hinweis { margin-left: auto; }
.co-zeile { border-left: 2px solid rgba(127,127,127,.3); padding: 2px 0 2px 11px; }
.co-zeile.coach { border-left-color: var(--accent); }
.co-zeile + .co-zeile { margin-top: 9px; }
.co-kopf { display: flex; gap: 8px; align-items: baseline; font-size: 11px; color: var(--muted); }
.co-kopf b { color: var(--text); font-size: 12px; }
.co-zeile.coach .co-kopf b { color: var(--accent); }
.co-text { font-size: 12.5px; line-height: 1.55; margin-top: 3px; }

/* ---------- Kosten ---------- */
.ko-oben { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.ko-gross { border: 1px solid rgba(127,127,127,.2); border-radius: 12px; padding: 14px; }
.ko-gross .k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ko-gross .v { font-size: 27px; font-weight: 700; margin-top: 5px; }
.ko-klein { font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.ko-vergleich { font-size: 11px; }
.ko-vergleich.hoch { color: #f59e0b; }
.ko-vergleich.runter { color: #22c55e; }

.ko-abo { display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  border: 1px solid rgba(34,197,94,.35); background: rgba(34,197,94,.06);
  border-radius: 12px; padding: 13px 15px; margin-bottom: 14px; }
.ko-abo > div:first-child { flex: 1; min-width: 260px; }
.ko-warn { font-size: 12px; color: #f59e0b; }
.ko-ok { font-size: 12px; color: #22c55e; }

.ko-ertrag { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgba(127,127,127,.16); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.ko-ertrag > div { background: var(--bg, #14141a); padding: 13px 15px; }
.ko-ertrag .k { font-size: 11px; color: var(--muted); }
.ko-ertrag .v { font-size: 21px; font-weight: 700; margin-top: 4px; }
.ko-ertrag .schlecht .v { color: #f59e0b; }

.ko-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.ko-zeile { display: grid; grid-template-columns: 128px 1fr 64px 34px; gap: 9px;
  align-items: center; font-size: 12px; padding: 4px 0; }
.ko-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ko-zeile b { text-align: right; font-weight: 600; }
.ko-n { font-size: 10px; color: var(--muted); text-align: right; }
.ko-sonst { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(127,127,127,.14); }
.ko-sonst label { display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); margin-bottom: 5px; }
.ko-fix { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; font-size: 12.5px; }
.ko-kurve { width: 100%; height: auto; }
.ko-linie { fill: none; stroke: var(--accent); stroke-width: 2; }
.ko-punkt { fill: var(--accent); }
@media (max-width: 900px) { .ko-oben, .ko-ertrag, .ko-spalten { grid-template-columns: 1fr; } }

/* ---------- Gehirn ---------- */
.gh-kopfleiste { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
#ghSuche { margin-left: auto; min-width: 260px; background: rgba(127,127,127,.08);
  border: 1px solid rgba(127,127,127,.22); border-radius: 9px; padding: 9px 13px;
  color: var(--text); font: inherit; font-size: 13px; }
.gh-flaeche { display: grid; grid-template-columns: 290px 1fr; gap: 14px; align-items: start; }
.gh-liste { border: 1px solid rgba(127,127,127,.2); border-radius: 12px; padding: 10px;
  max-height: 74vh; overflow-y: auto; }
.gh-ordner { margin-bottom: 12px; }
.gh-ordner label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 4px 0 5px 6px; }
.gh-ordner label b { opacity: .5; font-weight: 500; }
.gh-eintrag { display: block; padding: 5px 8px; border-radius: 7px; font-size: 12.5px;
  color: var(--text); text-decoration: none; cursor: pointer; }
.gh-eintrag:hover { background: rgba(127,127,127,.1); }
.gh-eintrag.an { background: rgba(127,127,127,.14); box-shadow: inset 2px 0 0 var(--accent); }
.gh-eintrag i { float: right; font-style: normal; opacity: .35; font-size: 11px; }
.gh-fund { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.gh-leser { border: 1px solid rgba(127,127,127,.2); border-radius: 12px; padding: 18px 22px;
  max-height: 74vh; overflow-y: auto; }
.gh-kopf h2 { margin: 0 0 3px; font-size: 20px; }
.gh-text { margin-top: 14px; font-size: 13.5px; line-height: 1.65; }
.gh-text h2 { font-size: 17px; margin: 20px 0 8px; }
.gh-text h3 { font-size: 15px; margin: 17px 0 7px; }
.gh-text h4, .gh-text h5 { font-size: 13.5px; margin: 14px 0 6px; color: var(--muted); }
.gh-text p { margin: 8px 0; }
.gh-text ul { margin: 8px 0; padding-left: 20px; }
.gh-text li { margin: 4px 0; }
.gh-text blockquote { border-left: 2px solid var(--accent); padding: 2px 0 2px 12px;
  margin: 10px 0; color: var(--muted); }
.gh-text code { background: rgba(127,127,127,.14); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.gh-code { background: rgba(127,127,127,.1); padding: 11px 13px; border-radius: 8px;
  overflow-x: auto; font-size: 11.5px; line-height: 1.5; }
.gh-tab { width: 100%; border-collapse: collapse; margin: 11px 0; font-size: 12.5px; }
.gh-tab td { border: 1px solid rgba(127,127,127,.2); padding: 6px 9px; vertical-align: top; }
.gh-tab tr:first-child td { background: rgba(127,127,127,.08); font-weight: 600; }
.gh-link { color: var(--accent); cursor: pointer; text-decoration: none;
  border-bottom: 1px dotted currentColor; }
.gh-rueck { margin-top: 22px; padding-top: 13px; border-top: 1px solid rgba(127,127,127,.16);
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.gh-rueck label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); width: 100%; margin-bottom: 3px; }
.gh-rueck .gh-link { font-size: 11.5px; padding: 3px 9px; border-radius: 20px;
  background: rgba(127,127,127,.1); border-bottom: 0; }
@media (max-width: 900px) { .gh-flaeche { grid-template-columns: 1fr; }
  .gh-liste { max-height: 240px; } }

/* ---------- Datenlage ---------- */
.dl-bild { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.dl-mitte { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dl-pfeil { font-size: 26px; opacity: .5; }
.dl-pfeil.gut { color: #22c55e; opacity: 1; }
.dl-pfeil.schlecht { color: #f59e0b; opacity: 1; }
.dl-zustand { font-size: 12px; font-weight: 600; padding: 3px 12px; border-radius: 20px;
  background: rgba(127,127,127,.14); }
.dl-zustand.gut { background: rgba(34,197,94,.16); color: #22c55e; }
.dl-zustand.schlecht { background: rgba(245,158,11,.16); color: #f59e0b; }
.dl-karte { border: 1px solid rgba(127,127,127,.2); border-radius: 11px; padding: 13px; }
.dl-karte.blass { opacity: .55; border-style: dashed; }
.dl-kopf { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.dl-icon { font-size: 19px; }
.dl-werte > div { display: flex; justify-content: space-between; gap: 10px;
  font-size: 12px; padding: 3px 0; }
.dl-werte span { color: var(--muted); }
.dl-werte code { font-size: 11px; background: rgba(127,127,127,.14); padding: 1px 5px; border-radius: 4px; }
.dl-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.dl-geraete { display: flex; gap: 10px; flex-wrap: wrap; }
.dl-geraet { border: 1px solid rgba(127,127,127,.2); border-radius: 9px; padding: 9px 13px;
  font-size: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.dl-geraet span { color: var(--muted); font-size: 11px; }
.dl-geraet.gut { border-color: rgba(34,197,94,.4); }
@media (max-width: 820px) { .dl-bild { grid-template-columns: 1fr; } }

/* ---------- SUPER BRAIN ---------- */
.sb-flaeche { display: flex; flex-direction: column; gap: 12px; }
.sb-flaeche:fullscreen { background: var(--bg, #0e0e11); padding: 18px; overflow: auto; }
.sb-oben { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.sb-knoepfe { margin-left: auto; display: flex; gap: 8px; }

.sb-puls { display: grid; grid-template-columns: repeat(10, 1fr); gap: 1px;
  background: rgba(127,127,127,.16); border-radius: 12px; overflow: hidden; }
.sb-puls-zelle { background: var(--bg, #14141a); padding: 9px 11px; }
.sb-puls-zelle .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sb-puls-zelle .v { font-size: 15px; font-weight: 700; margin-top: 3px; }
.sb-puls-zelle.gut .v { color: #22c55e; }
.sb-puls-zelle.warn .v { color: #f59e0b; }

.sb-raster { display: grid; grid-template-columns: 210px 1fr 300px; gap: 12px; align-items: start; }
.sb-links, .sb-rechts { display: flex; flex-direction: column; gap: 10px; }
.sb-links { border: 1px solid rgba(127,127,127,.2); border-radius: 12px; padding: 11px;
  max-height: 78vh; overflow-y: auto; }
.sb-fil-titel { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 8px 0 4px; }
.sb-fil { display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 3px 0; cursor: pointer; }
.sb-fil i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sb-fil b { margin-left: auto; opacity: .45; font-weight: 500; font-size: 11px; }
.sb-fehlt { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(127,127,127,.16); }
.sb-fehlt label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em;
  color: #f59e0b; display: block; margin-bottom: 6px; }
.sb-fehlt-zeile { font-size: 11px; margin-bottom: 7px; line-height: 1.4; }
.sb-fehlt-zeile b { display: block; font-weight: 600; }
.sb-fehlt-zeile span { color: var(--muted); }

.sb-mitte { border: 1px solid rgba(127,127,127,.2); border-radius: 12px; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(255,122,26,.05), transparent 60%); position: relative; }
#sbBild { width: 100%; height: 78vh; display: block; cursor: grab; touch-action: none; }
#sbBild:active { cursor: grabbing; }
.sb-hilfe { position: absolute; left: 12px; bottom: 10px; font-size: 10.5px; color: var(--muted); opacity: .7; }

.sb-kante { stroke: rgba(127,127,127,.26); transition: stroke .25s, opacity .25s; }
.sb-kante.still { stroke: rgba(127,127,127,.12); }
.sb-kante.k-koennen { stroke: rgba(34,197,94,.4); }
.sb-kante.k-lernen { stroke: rgba(245,158,11,.3); stroke-dasharray: 4 4; }
.sb-kante.k-arbeit { stroke: rgba(255,122,26,.55); }
.sb-kante.k-abgleich { stroke: rgba(34,197,94,.6); stroke-dasharray: 2 3; }
.sb-kante.aktiv { stroke: var(--accent); }
.sb-kante.feuert { stroke: var(--accent) !important; stroke-opacity: 1;
  filter: drop-shadow(0 0 5px var(--accent)); }
.sb-kante.fern { opacity: .07; }

.sb-knoten { cursor: pointer; transition: opacity .25s; }
.sb-knoten .sb-halo { fill: transparent; }
.sb-knoten .sb-kreis { fill: rgba(20,20,26,.9); stroke: var(--af, var(--zf, #94a3b8));
  stroke-width: 1.6; transition: stroke-width .2s, filter .2s; }
.sb-knoten .sb-sym { fill: var(--text); dominant-baseline: middle; }
.sb-knoten .sb-name { fill: var(--text); font-size: 10.5px; opacity: .9; }
.sb-knoten .sb-unter { fill: var(--muted); font-size: 9px; }
.sb-knoten:hover .sb-kreis { stroke-width: 3; }
.sb-knoten.gewaehlt .sb-kreis { stroke-width: 3.5; filter: drop-shadow(0 0 8px var(--zf)); }
.sb-knoten.fern { opacity: .16; }
.sb-knoten.feuert .sb-kreis { stroke: var(--accent); stroke-width: 4;
  filter: drop-shadow(0 0 12px var(--accent)); }
.sb-knoten.a-kern .sb-kreis { fill: rgba(255,122,26,.1); stroke: #ff7a1a; stroke-width: 2.5;
  animation: sbPuls 3.4s ease-in-out infinite; }
@keyframes sbPuls { 50% { filter: drop-shadow(0 0 16px rgba(255,122,26,.6)); } }
.sb-knoten.a-kern .sb-name { font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.sb-knoten.z-offline .sb-kreis { stroke: #ef4444; stroke-dasharray: 3 3; }
.sb-knoten.z-leer .sb-kreis, .sb-knoten.z-nicht_angebunden .sb-kreis { stroke-dasharray: 2 3; opacity: .6; }

.sb-insp, .sb-strom { border: 1px solid rgba(127,127,127,.2); border-radius: 12px; padding: 12px; }
.sb-strom { max-height: 34vh; overflow-y: auto; }
.sb-strom label, .sb-verb label { font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); display: block; margin-bottom: 7px; }
.sb-insp-kopf { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 11px; }
.sb-insp-sym { font-size: 21px; }
.sb-werte > div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 3px 0; }
.sb-werte span { color: var(--muted); flex: none; }
.sb-werte b { text-align: right; word-break: break-word; }
.sb-verb { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(127,127,127,.14); }
.sb-verb-zeile { display: flex; gap: 7px; align-items: center; font-size: 11.5px;
  padding: 3px 0; cursor: pointer; }
.sb-verb-zeile:hover { color: var(--accent); }
.sb-pf { color: var(--muted); }
.sb-art { margin-left: auto; font-size: 10px; color: var(--muted); }
.sb-strom-zeile { display: flex; gap: 6px; font-size: 11px; padding: 3px 0; line-height: 1.4;
  animation: netzRein .3s ease; }
.sb-strom-zeile span:first-child { color: var(--muted); font-size: 9.5px; flex: none;
  font-variant-numeric: tabular-nums; }
.sb-strom-zeile b { color: var(--accent); flex: none; }
.sb-strom-zeile span:last-child { color: var(--muted); overflow: hidden; }
@media (max-width: 1200px) { .sb-raster { grid-template-columns: 1fr; }
  .sb-puls { grid-template-columns: repeat(5, 1fr); } #sbBild { height: 60vh; } }
/* Command Center: die Seitenspalten schmaler, das Bild bekommt den Platz */
.sb-raster { grid-template-columns: 180px minmax(0, 1fr) 272px; }
#sbBild { height: 82vh; }
.sb-mitte { min-height: 520px; }

#sbSuche { background: rgba(127,127,127,.08); border: 1px solid rgba(127,127,127,.22);
  border-radius: 8px; padding: 7px 12px; color: var(--text); font: inherit; font-size: 12.5px; min-width: 190px; }
.sb-knoten.treffer .sb-kreis { stroke: var(--accent); stroke-width: 3.5;
  filter: drop-shadow(0 0 8px var(--accent)); }
.sb-erk { border: 1px solid rgba(127,127,127,.2); border-radius: 12px; padding: 12px;
  max-height: 42vh; overflow-y: auto; }
.sb-erk-block + .sb-erk-block { margin-top: 13px; padding-top: 11px;
  border-top: 1px solid rgba(127,127,127,.12); }
.sb-erk-block label { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 7px; }
.sb-erk-block label span { text-transform: none; letter-spacing: 0; opacity: .7; }
.sb-erk-zeile { display: flex; justify-content: space-between; gap: 9px; font-size: 11.5px; padding: 2px 0; }
.sb-erk-zeile b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-erk-zeile span { color: var(--muted); flex: none; font-size: 10.5px; }
.sb-erk-zeile.waise b { color: #f59e0b; }
.sb-erk-leer { font-size: 11px; color: var(--muted); opacity: .75; }

/* ---------- Zeitreise ---------- */
.sb-zeit { border-top: 1px solid rgba(127,127,127,.16); padding: 10px 12px; }
.sb-zeit-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.sb-zeit-knopf { background: rgba(127,127,127,.09); border: 1px solid rgba(127,127,127,.2);
  color: var(--muted); padding: 5px 13px; border-radius: 7px; cursor: pointer;
  font: inherit; font-size: 11.5px; }
.sb-zeit-knopf.an { background: var(--accent); border-color: var(--accent); color: #fff; }
.sb-zeit-hinweis { font-size: 11px; color: var(--muted); margin-top: 8px; }
.sb-zeit-inhalt { margin-top: 10px; }
.sb-balken { display: flex; align-items: flex-end; gap: 2px; height: 42px; }
.sb-balken i { flex: 1; background: var(--accent); opacity: .65; border-radius: 2px 2px 0 0; min-width: 2px; }
.sb-balken i:hover { opacity: 1; }
.sb-zeit-zahlen { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.sb-zeit-zahlen > div { font-size: 11px; }
.sb-zeit-zahlen span { color: var(--muted); display: block; }
.sb-zeit-zahlen b { font-size: 14px; }
.sb-zeit-zahlen .gut b { color: #22c55e; }
.sb-zeit-zahlen .warn b { color: #f59e0b; }
.sb-zeit-agenten { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sb-zeit-agenten label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); width: 100%; }
.sb-zeit-agent { font-size: 11px; padding: 3px 9px; border-radius: 20px; background: rgba(127,127,127,.12); }
.sb-zeit-agent b { opacity: .55; font-weight: 500; }
#sbBild.rueckblick .sb-knoten { opacity: .3; }
#sbBild.rueckblick .sb-knoten.taetig { opacity: 1; }
#sbBild.rueckblick .sb-knoten.taetig .sb-kreis { stroke: var(--accent); stroke-width: 3; }
#sbBild.rueckblick .sb-kante { opacity: .12; }
/* Beschriftungen nach Zoomstufe */
#sbBild.zoom-klein .sb-knoten .sb-unter { display: none; }
#sbBild.zoom-klein .sb-knoten.a-agent .sb-name,
#sbBild.zoom-klein .sb-knoten.a-dienst .sb-name,
#sbBild.zoom-klein .sb-knoten.a-speicher .sb-name,
#sbBild.zoom-klein .sb-knoten.a-geraet .sb-name { display: none; }
#sbBild:not(.zoom-gross) .sb-knoten.a-fach .sb-unter,
#sbBild:not(.zoom-gross) .sb-knoten.a-agent .sb-unter,
#sbBild:not(.zoom-gross) .sb-knoten.a-dienst .sb-unter { display: none; }
#sbBild .sb-knoten:hover .sb-name, #sbBild .sb-knoten:hover .sb-unter { display: block !important; }
#sbBild { height: 66vh; }
.sb-mitte { display: flex; flex-direction: column; }

/* ================= JARVIS CONTROL CENTER 2.0 ================= */
.z-flaeche { display: flex; flex-direction: column; gap: 12px; }

/* ---- Kopfleiste ---- */
.z-kopf { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center;
  padding: 13px 18px; border: 1px solid rgba(56,189,248,.18); border-radius: 14px;
  background: linear-gradient(180deg, rgba(56,189,248,.06), transparent); }
.z-os { font-size: 10px; letter-spacing: .18em; color: var(--muted); }
.z-titel { font-size: 17px; font-weight: 700; letter-spacing: .1em; }
.z-kopf-mitte { text-align: center; }
.z-gesund { cursor: pointer; display: inline-flex; flex-direction: column; align-items: center;
  padding: 4px 22px; border-radius: 12px; }
.z-gesund b { font-size: 30px; font-weight: 800; line-height: 1; }
.z-gesund span { font-size: 10px; letter-spacing: .12em; color: var(--muted); margin-top: 3px; }
.z-gesund.gut b { color: #22c55e; }
.z-gesund.mittel b { color: #f59e0b; }
.z-gesund.schlecht b { color: #ef4444; }
.z-kopf-rechts { display: flex; gap: 18px; justify-content: flex-end; flex-wrap: wrap; }
.z-kw { text-align: right; }
.z-kw span { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.z-kw b { font-size: 14px; }
.z-kw.warn b { color: #f59e0b; }
.z-kw.gut b { color: #22c55e; }
.z-gesund-detail { border: 1px solid rgba(127,127,127,.2); border-radius: 12px; padding: 12px 15px; }
.z-gesund-detail > b { display: block; margin-bottom: 6px; font-size: 13px; }

/* ---- Raster: die Mitte ist der Star ---- */
.z-raster { display: grid; grid-template-columns: 300px minmax(0, 1fr) 280px; gap: 12px; align-items: start; }
.z-links, .z-rechts { display: flex; flex-direction: column; gap: 10px; }
.z-mitte-flaeche { border: 1px solid rgba(56,189,248,.16); border-radius: 14px; overflow: hidden;
  background: radial-gradient(circle at 50% 46%, rgba(56,189,248,.07), transparent 62%);
  display: flex; flex-direction: column; }
.z-kern { width: 100%; height: 62vh; display: block; }

/* ---- Der Kern ---- */
.z-raster-kreis, .z-raster { }
.z-hintergrund .z-raster { fill: none; stroke: rgba(127,127,127,.08); }
.z-core { fill: rgba(10,14,20,.92); stroke: var(--zs, #ff9a5c); stroke-width: 2.5;
  animation: zAtmen 4.5s ease-in-out infinite; }
@keyframes zAtmen { 50% { filter: drop-shadow(0 0 22px var(--zs, #ff9a5c)); } }
.z-core-name { fill: var(--text); font-size: 22px; font-weight: 800; letter-spacing: .14em; }
.z-core-zustand { font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.z-core-proz { fill: var(--muted); font-size: 13px; }
.z-ring-bg { fill: none; stroke: rgba(127,127,127,.14); stroke-width: 7; }
.z-ring-vor { fill: none; stroke: #ff9a5c; stroke-width: 7; stroke-linecap: round;
  transform: rotate(-90deg); transition: stroke-dashoffset .8s ease; }

.z-agent circle { fill: rgba(10,14,20,.9); stroke: #ff9a5c; stroke-width: 1.6; }
.z-agent.arbeitet circle { stroke: #22c55e; animation: zPuls 2s ease-in-out infinite; }
@keyframes zPuls { 50% { filter: drop-shadow(0 0 8px #22c55e); } }
.z-agent text { fill: var(--text); font-size: 13px; dominant-baseline: middle; }
.z-agent .z-agent-name { fill: var(--muted); font-size: 9px; }
.z-agent { cursor: pointer; }

.z-abt circle { fill: rgba(127,127,127,.06); stroke: rgba(127,127,127,.32); stroke-width: 1.4; }
.z-abt.aktiv circle { stroke: #ff9a5c; fill: rgba(56,189,248,.1); }
.z-abt-name { fill: var(--text); font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; }
.z-abt-zahl { fill: var(--muted); font-size: 9px; }
.z-abt-linie { stroke: rgba(56,189,248,.3); stroke-width: 1; stroke-dasharray: 3 4; }

.z-jetzt { padding: 11px 16px; border-top: 1px solid rgba(127,127,127,.14); }
.z-jetzt #zJetzt { font-size: 12.5px; margin-top: 3px; }

/* ---- Blöcke ---- */
.z-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: block; }
.z-block { border: 1px solid rgba(127,127,127,.18); border-radius: 12px; padding: 11px 13px; }
.z-block.warn { border-color: rgba(245,158,11,.35); }
.z-zeile { display: flex; gap: 8px; align-items: center; font-size: 12px; padding: 3px 0; }
.z-zeile b { flex: none; color: var(--muted); font-weight: 600; font-size: 11px; }
.z-zeile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-zeile i { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--muted); flex: none; }
.z-punkt { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #6b7280; }
.z-punkt.gut { background: #22c55e; }
.z-punkt.schlecht { background: #ef4444; }
.z-punkt.aus { background: #f59e0b; }
.z-klein { font-size: 10.5px; color: var(--muted); margin-top: 5px; line-height: 1.45; }

.z-braucht { border: 1px solid rgba(245,158,11,.4); border-radius: 12px; padding: 12px 14px;
  background: rgba(245,158,11,.05); }
.z-braucht.alles-gut { border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.05); }
.z-braucht.alles-gut b { color: #22c55e; }
.z-braucht.alles-gut span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.z-braucht-kopf { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.z-zahl { margin-left: auto; background: #f59e0b; color: #111; font-size: 11px; font-weight: 700;
  padding: 1px 8px; border-radius: 20px; }
.z-braucht-zeile { display: flex; gap: 8px; font-size: 11.5px; padding: 3px 0; }
.z-art { flex: none; color: var(--muted); font-size: 10px; text-transform: uppercase; min-width: 62px; }
.z-braucht-zeile.dringend .z-titel { color: #f59e0b; }
.z-braucht .btn { margin-top: 9px; width: 100%; }

.z-mission { border: 1px solid rgba(56,189,248,.3); border-radius: 12px; padding: 12px 14px;
  background: rgba(56,189,248,.05); }
.z-mission.leer { border-color: rgba(127,127,127,.18); background: none; }
.z-mission-kopf { display: flex; align-items: center; gap: 8px; }
.z-live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 10px;
  color: #22c55e; }
.z-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: agPuls 1.4s ease-in-out infinite; }
.z-live.still { color: #ff9a5c; }
.z-live.still i { animation: none; }
.z-mission-titel { font-size: 13.5px; font-weight: 600; margin-top: 6px; line-height: 1.35; }
.z-mission-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.z-schritt { font-size: 10.5px; color: var(--muted); margin-top: 7px; font-family: ui-monospace, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }

.z-matrix { display: flex; flex-direction: column; gap: 10px; }
.z-res { display: grid; grid-template-columns: 100px 1fr 42px; gap: 8px; align-items: center;
  font-size: 11.5px; padding: 3px 0; }
.z-res b { text-align: right; font-weight: 500; color: var(--muted); font-size: 11px; }
.ag-balken i.warn { background: #f59e0b; }

.z-strom { border: 1px solid rgba(127,127,127,.18); border-radius: 12px; padding: 11px 14px;
  max-height: 210px; overflow-y: auto; }
.z-strom-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.z-strom-zeile { display: flex; gap: 7px; font-size: 11.5px; padding: 3px 0; line-height: 1.4;
  animation: netzRein .3s ease; }
.z-strom-zeile > span:first-child { color: var(--muted); font-size: 10px; flex: none;
  font-variant-numeric: tabular-nums; }
.z-strom-zeile b { color: #ff9a5c; flex: none; }
.z-strom-zeile > span:last-child { color: var(--muted); overflow: hidden; }

@media (max-width: 1250px) {
  .z-raster { grid-template-columns: 1fr; }
  .z-kern { height: 52vh; }
  .z-kopf { grid-template-columns: 1fr; text-align: center; }
  .z-kopf-rechts { justify-content: center; }
}

/* ==================================================================================
   CONTROL CENTER 2.0 — Phase 5 bis 8
   Farben je Beziehungsart. Sie sind KEINE Deko: an derselben Farbe erkennt man in der
   Legende, im Kern und im Inspektor dieselbe Sache wieder.
   ================================================================================== */
.z-bez-schicht { pointer-events: none; }
.z-bez-schicht .z-bez { pointer-events: stroke; }

.z-bez {
  fill: none; stroke-width: 2; opacity: .34;
  stroke-linecap: round; transition: opacity .2s;
}
.z-bez:hover { opacity: 1; stroke-width: 3; cursor: help; }

/* Frische Beziehungen (unter 30 Min) laufen — ältere stehen still.
   Der Unterschied ist absichtlich deutlich: sonst sieht Altes wie Jetzt aus. */
.z-bez.frisch { opacity: .95; stroke-dasharray: 7 9; animation: zFliess 1.5s linear infinite; }
@keyframes zFliess { to { stroke-dashoffset: -32; } }

.z-bez.agent_coach          { stroke: #f472b6; }
.z-bez.coach_agent          { stroke: #a78bfa; }
.z-bez.supervisor_agent     { stroke: #ff9a5c; }
.z-bez.rektor_mannschaft    { stroke: #facc15; }
.z-bez.schreibt_gedaechtnis { stroke: #2dd4bf; }
.z-bez.agent_mission        { stroke: #4ade80; }
.z-bez.max_mission          { stroke: #ff7a1a; }

/* Die Gegenüber in den Ecken */
.z-anker circle {
  fill: #16161c; stroke: rgba(255,255,255,.22); stroke-width: 1.5;
}
.z-anker .z-anker-zeichen { fill: #e8e8ea; font-size: 20px; }
.z-anker .z-anker-name {
  fill: rgba(232,232,234,.62); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- Legende ---------- */
.z-legende { margin-top: 12px; }
.z-leg-zeile { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.z-leg-farbe { width: 14px; height: 3px; border-radius: 2px; flex: 0 0 auto; background: #555; }
.z-leg-farbe.agent_coach          { background: #f472b6; }
.z-leg-farbe.coach_agent          { background: #a78bfa; }
.z-leg-farbe.supervisor_agent     { background: #ff9a5c; }
.z-leg-farbe.rektor_mannschaft    { background: #facc15; }
.z-leg-farbe.schreibt_gedaechtnis { background: #2dd4bf; }
.z-leg-farbe.agent_mission        { background: #4ade80; }
.z-leg-farbe.max_mission          { background: #ff7a1a; }
.z-leg-zeile .z-leg-text { flex: 1 1 auto; }
.z-leg-zeile b { font-variant-numeric: tabular-nums; }
.z-leg-zeile i {
  font-style: normal; font-size: 11px; opacity: .45; max-width: 42%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Was NICHT gezeichnet wird, muss sichtbar sein — sonst hält man das Bild für
   vollständig. Deshalb bekommt es einen eigenen, abgesetzten Kasten. */
.z-leg-fehlt-kopf {
  margin: 12px 0 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: #f0a; opacity: .8;
}
.z-leg-fehlt {
  display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; margin-bottom: 5px;
  border-left: 2px solid rgba(255,0,170,.45); background: rgba(255,0,170,.06); border-radius: 0 6px 6px 0;
}
.z-leg-fehlt b { font-size: 12px; }
.z-leg-fehlt span { font-size: 11px; opacity: .6; line-height: 1.35; }

/* ---------- Phase 6: Super Brain ---------- */
.z-sb-wert { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 10px; }
.z-sb-wert b { font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.z-sb-wert span { font-size: 12px; opacity: .5; }
.z-sb-wert.gut b     { color: #4ade80; }
.z-sb-wert.mittel b  { color: #facc15; }
.z-sb-wert.schlecht b { color: #f87171; }
/* "nicht messbar" bewusst blass und kursiv: es ist keine Zahl und soll auch nicht wie
   eine aussehen. Eine 0 an dieser Stelle wäre eine Lüge. */
.z-nichtda { opacity: .42; font-style: italic; }

/* ---------- Missions-Kette ---------- */
.z-fluss-reihe { display: flex; align-items: flex-end; gap: 2px; margin: 8px 0 6px; }
.z-fluss-stufe {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  align-items: center; gap: 3px; opacity: .38;
}
.z-fluss-stufe.hat { opacity: 1; }
.z-fluss-balken {
  width: 100%; height: 42px; display: flex; align-items: flex-end;
  background: rgba(255,255,255,.05); border-radius: 3px; overflow: hidden;
}
.z-fluss-balken i { width: 100%; background: linear-gradient(180deg,#ff9a5c,#0ea5e9); min-height: 2px; }
.z-fluss-stufe b { font-size: 14px; font-variant-numeric: tabular-nums; }
.z-fluss-stufe span {
  font-size: 9px; text-transform: uppercase; letter-spacing: .04em; opacity: .6;
  text-align: center; line-height: 1.15;
}
.z-fluss-pfeil { opacity: .25; padding-bottom: 24px; font-size: 13px; }

/* ---------- Phase 7: Kommandoleiste ---------- */
.z-konsole {
  position: sticky; bottom: 0; z-index: 5; margin-top: 14px;
  padding: 10px 12px 12px; border-radius: 14px;
  background: rgba(18,18,24,.94); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.09);
}
.z-modi { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.z-modus {
  padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 600;
  letter-spacing: .07em; cursor: pointer;
  background: rgba(255,255,255,.05); color: rgba(232,232,234,.6);
  border: 1px solid rgba(255,255,255,.1);
}
.z-modus:hover { color: #e8e8ea; }
.z-modus.an { background: #ff7a1a; border-color: #ff7a1a; color: #101014; }
.z-modus-stufe { font-size: 11px; opacity: .4; margin-left: auto; cursor: help; }

.z-eingabe { display: flex; align-items: center; gap: 7px; }
.z-eingabe #zCmd {
  flex: 1 1 auto; min-width: 0; padding: 11px 13px; border-radius: 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: #e8e8ea; font-size: 14px; font-family: inherit;
}
.z-eingabe #zCmd:focus { outline: none; border-color: rgba(255,122,26,.55); }
.z-ktaste {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  font-size: 16px; display: grid; place-items: center;
}
.z-ktaste:hover { background: rgba(255,255,255,.11); }
.z-ktaste.rec { background: #f87171; border-color: #f87171; animation: zPuls 1s infinite; }
@keyframes zPuls { 50% { opacity: .55; } }

.z-anhang { margin-top: 7px; font-size: 12px; opacity: .75; display: flex; align-items: center; gap: 8px; }
.z-kfuss { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

/* ---------- Phase 8: Inspektor ---------- */
.z-insp {
  padding: 12px; border-radius: 12px; margin-bottom: 12px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
}
.z-insp-kopf { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.z-insp-avatar {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(255,255,255,.07); font-size: 17px; flex: 0 0 auto;
}
.z-insp-kopf > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.z-insp-kopf b { font-size: 14px; }
.z-insp-kopf span { font-size: 11px; opacity: .55; }
.z-insp-zu {
  background: none; border: none; color: rgba(232,232,234,.45);
  font-size: 15px; cursor: pointer; padding: 2px 5px;
}
.z-insp-zu:hover { color: #e8e8ea; }
.z-insp-block { margin-bottom: 11px; }
.z-insp-schritt {
  display: flex; gap: 7px; padding: 4px 0; font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.z-insp-schritt b { flex: 0 0 auto; font-size: 10px; opacity: .5; text-transform: uppercase; padding-top: 1px; }
.z-insp-schritt span { flex: 1 1 auto; min-width: 0; opacity: .8; line-height: 1.35; word-break: break-word; }

/* ---------- Fokus-Modus: alles weg außer dem Kern ---------- */
.z-flaeche.fokus .z-links,
.z-flaeche.fokus .z-rechts,
.z-flaeche.fokus .z-strom,
.z-flaeche.fokus .z-legende { display: none; }
.z-flaeche.fokus .z-raster { grid-template-columns: 1fr; }
.z-flaeche.fokus .z-kern { max-height: 74vh; }

/* Vollbild: der Hintergrund muss mit, sonst leuchtet die Seite weiß durch. */
.z-flaeche:fullscreen { background: #101014; padding: 18px; overflow-y: auto; }

/* ---------- Große Bildschirme: der Kern darf wachsen ---------- */
@media (min-width: 1500px) {
  .z-kern { max-height: 78vh; }
}
/* ---------- Kleine Bildschirme: Kette und Legende dürfen umbrechen ---------- */
@media (max-width: 700px) {
  .z-fluss-stufe span { font-size: 8px; }
  .z-fluss-pfeil { display: none; }
  .z-leg-zeile i { display: none; }
  .z-konsole { padding: 8px 9px 10px; }
}

/* Ruhende Beteiligte: waren in 24 Std belegbar dabei, tun gerade nichts.
   Deutlich blasser als Arbeitende — sonst sieht Ruhe wie Betrieb aus. */
.z-agent.ruht circle { fill: #16161c; stroke: rgba(255,255,255,.16); }
.z-agent.ruht { opacity: .5; }
.z-agent.ruht:hover { opacity: 1; }
.z-agent.ruht .z-agent-name { fill: rgba(232,232,234,.45); }

/* ---------- Feinschliff nach dem eigenen Blick auf die Bildschirmfotos ---------- */

/* Die Kommandoleiste klebt unten und verdeckt damit, was hinter ihr liegt.
   Ohne diesen Platz kommt man an die letzte Karte nie heran. */
.z-flaeche { padding-bottom: 96px; }

/* Weg einer Mission: eigene Reihe über die ganze Breite. In der schmalen Spalte liefen
   die sieben Beschriftungen ineinander und die Kette war unlesbar. */
.z-fluss { margin: 14px 0 0; }
.z-fluss .z-fluss-stufe span { font-size: 10px; hyphens: auto; }

@media (max-width: 700px) {
  /* Auf dem Handy gibt es unten schon die Navigation von Max. Eine zweite klebende
     Leiste darüber ist ein Kampf um denselben Platz - den gewinnt die Navigation.
     Deshalb sitzt die Kommandoleiste hier am Ende, statt zu kleben. */
  .z-konsole { position: static; margin-bottom: 14px; }
  .z-flaeche { padding-bottom: 84px; }   /* Platz für die Navigation selbst */
  .z-fluss .z-fluss-stufe span { font-size: 8.5px; letter-spacing: 0; }
}

/* Der Grund neben dem Titel: erklärt in einer Zeile, WAS gewollt ist.
   Ohne ihn muss man jede Zeile anklicken, um sie zu verstehen. */
.z-braucht-zeile .z-grund {
  display: block; font-style: normal; font-size: 11px; opacity: .55;
  margin-top: 2px; line-height: 1.3; font-weight: 400;
}


/* Quelle jeder Nachricht + Filterleiste (14.08.) */
.quelle-chip { display:inline-block; margin-right:8px; padding:1px 7px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent); font-size:9.5px; font-weight:700;
  letter-spacing:.07em; vertical-align:middle; }
.msg.user .quelle-chip { background:rgba(0,0,0,.26); color:rgba(255,255,255,.94); }
.chatfilter { display:flex; gap:6px; flex-wrap:wrap; padding:8px 2px 10px; }
.chatfilter .fchip { background:var(--bg2); border:1px solid var(--border); color:var(--muted);
  border-radius:999px; padding:5px 11px; font-size:12px; cursor:pointer; font-family:inherit; white-space:nowrap; }
.chatfilter .fchip:hover { color:var(--text); border-color:var(--accent); }
.chatfilter .fchip.on { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600; }
.chatfilter .fchip b { opacity:.6; font-weight:600; margin-left:2px; }

/* ===== Super Brain im Raum (3D) =====
   Die Perspektive wird gerechnet, nicht vom Browser gemacht - deshalb setzt die
   Zeichenschleife --tiefe je Knoten/Kante. Uebergaenge muessen hier aus sein,
   sonst laeuft jede Bewegung 250 ms hinterher. */
#sbBild.raum .sb-knoten { transition: none; opacity: var(--tiefe, 1); }
#sbBild.raum .sb-knoten.fern { opacity: calc(var(--tiefe, 1) * .18); }
#sbBild.raum .sb-kante { transition: stroke .25s; stroke-opacity: var(--tiefe, 1); }
#sbBild.raum .sb-knoten.greift { cursor: grabbing; }
#sbBild.raum .sb-knoten.greift .sb-kreis { stroke-width: 4;
  filter: drop-shadow(0 0 12px var(--af, var(--zf, #94a3b8))); }
#sbBild.raum .sb-kante.aktiv { filter: drop-shadow(0 0 3px var(--accent)); }
#sbBild.raum .sb-knoten.a-kern .sb-kreis { filter: drop-shadow(0 0 26px rgba(255,122,26,.5)); }
#sbBild.raum .sb-knoten.feuert .sb-kreis { filter: drop-shadow(0 0 16px var(--accent)); }

/* Raumstaub: reine Optik, damit die Drehung Tiefe bekommt. Keine Daten. */
.sb-staub { fill: var(--accent); pointer-events: none; }
/* Lichtpunkt, der bei einem echten Ereignis die Leitung entlanglaeuft */
.sb-funke { fill: var(--accent); pointer-events: none;
  filter: drop-shadow(0 0 7px var(--accent)); }

.sb-mitte { background: radial-gradient(circle at 50% 45%, rgba(255,122,26,.07), transparent 62%),
  radial-gradient(circle at 50% 50%, rgba(96,165,250,.05), transparent 70%); }

/* ===== Super Brain auf dem Handy =====
   Gemessen am 14.08.: die Seite war 662 px breit in einem 390-px-Fenster, also
   seitliches Schieben. Grund war nicht die fehlende Handy-Regel, sondern deren
   Reihenfolge: die spaetere Zeile ".sb-raster { 180px 1fr 272px }" stand NACH der
   Bildschirm-Abfrage und hat sie stillschweigend ueberschrieben. Deshalb stehen die
   Handy-Regeln jetzt ganz am Ende - hier gewinnt niemand mehr gegen sie. */
@media (max-width: 1200px) {
  .sb-raster { grid-template-columns: minmax(0, 1fr); }
  .sb-puls { grid-template-columns: repeat(5, 1fr); }
  #sbBild { height: 62vh; }
  .sb-mitte { min-height: 340px; }
}
@media (max-width: 760px) {
  .sb-raster { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sb-puls { grid-template-columns: repeat(3, 1fr); font-size: 92%; }
  .sb-oben { gap: 9px; }
  .sb-knoepfe { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 6px; }
  .sb-knoepfe .btn { flex: 1 1 auto; padding: 7px 10px; font-size: 12px; }
  #sbSuche { flex: 1 1 100%; min-width: 0; }
  #sbBild { height: 56vh; }
  .sb-mitte { min-height: 300px; }
  .sb-links, .sb-rechts, .sb-insp, .sb-strom, .sb-erk { min-width: 0; }
  .sb-hilfe { position: static; padding: 7px 12px 9px; opacity: .8; line-height: 1.5; }
  .sb-erk { max-height: none; }
  .sb-strom { max-height: 30vh; }
  /* Auf dem Handy stoert die staendige Eigendrehung beim Lesen mehr als sie zeigt -
     sie laeuft langsamer und der Staub tritt zurueck. */
  .sb-staub { opacity: .5; }
}

/* Hilfetext oben: unten sass er auf der Zeitleiste (im Bild vom 14.08. ueberlappten
   "ziehen = drehen ..." und "Live-Zustand ..."). */
.sb-hilfe { bottom: auto; top: 10px; left: 12px; right: 12px; line-height: 1.5;
  pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
@media (max-width: 760px) {
  /* Auf dem Handy zuerst das Gehirn, dann die Regler. */
  .sb-mitte { order: -1; }
  .sb-fil { justify-content: flex-start; }
  .sb-hilfe { position: static; text-shadow: none; }
}

/* ===== Leitungen sichtbar =====
   Im ersten Raumbild waren die Verbindungen kaum zu erkennen: Grundfarbe .26 mal
   Tiefenabschwaechung bis .2 ergab fast nichts. Jetzt kraeftiger und die Tiefe daempft
   milder. Die Farben je Art bleiben, damit man Wissen/Arbeit/Koennen unterscheidet. */
#sbBild.raum .sb-kante { stroke: rgba(150,152,165,.44); }
#sbBild.raum .sb-kante.k-wissen { stroke: rgba(167,139,250,.42); }
#sbBild.raum .sb-kante.k-koennen { stroke: rgba(34,197,94,.62); }
#sbBild.raum .sb-kante.k-lernen { stroke: rgba(245,158,11,.46); }
#sbBild.raum .sb-kante.k-arbeit { stroke: rgba(255,122,26,.78); }
#sbBild.raum .sb-kante.k-betrieb { stroke: rgba(96,165,250,.5); }
#sbBild.raum .sb-kante.k-ablage { stroke: rgba(148,163,184,.5); }
#sbBild.raum .sb-kante.k-abgleich { stroke: rgba(34,197,94,.7); }
#sbBild.raum .sb-kante.still { stroke: rgba(127,127,127,.2); }
#sbBild.raum .sb-kante.aktiv { stroke: var(--accent); filter: drop-shadow(0 0 4px var(--accent)); }

/* ===== Gespräche zwischen Agenten ===== */
.gs-lage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(127,127,127,.18); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.gs-lage > div { background: var(--bg, #14141a); padding: 10px 12px; }
.gs-lage span { display: block; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); }
.gs-lage b { font-size: 15px; font-weight: 700; }
.gs-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: start; }
.gs-titel { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: 9px; }
.gs-paar { border: 1px solid rgba(127,127,127,.2); border-radius: 10px; padding: 10px 12px;
  margin-bottom: 8px; cursor: pointer; transition: border-color .15s, background .15s; }
.gs-paar:hover { border-color: var(--accent); background: rgba(255,122,26,.05); }
.gs-wer { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.gs-wer span { color: var(--muted); }
.gs-zahlen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px;
  font-size: 11px; color: var(--muted); }
.gs-strom { max-height: 60vh; overflow-y: auto; }
.gs-zeile { border-left: 2px solid rgba(127,127,127,.25); padding: 6px 0 8px 10px; margin-bottom: 4px; font-size: 12px; }
.gs-zeile.a-antwort { border-left-color: #22c55e; }
.gs-zeile.a-frage { border-left-color: var(--accent); }
.gs-zeile.a-hinweis, .gs-zeile.a-uebergabe { border-left-color: #e08a52; }
.gs-zeit { color: var(--muted); font-size: 10px; margin-right: 7px; }
.gs-pf { color: var(--muted); margin: 0 5px; }
.gs-art { margin-left: 7px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.gs-text { color: var(--muted); margin-top: 3px; line-height: 1.5; }
.gs-leer { border: 1px dashed rgba(127,127,127,.3); border-radius: 12px; padding: 20px; }
.gs-leer b { font-size: 14px; }
.gs-leer p { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin: 8px 0 0; }
.gs-hinweis { opacity: .8; }
.gs-verlauf { display: flex; flex-direction: column; gap: 10px; }
.gs-blase { border-radius: 10px; padding: 10px 12px; border: 1px solid rgba(127,127,127,.2); }
.gs-blase.frage { background: rgba(255,122,26,.06); border-color: rgba(255,122,26,.28); }
.gs-blase.antwort { background: rgba(34,197,94,.05); border-color: rgba(34,197,94,.25); }
.gs-blase-kopf { font-size: 10.5px; color: var(--muted); margin-bottom: 6px; }
.gs-blase-text { font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 900px) {
  .gs-raster { grid-template-columns: minmax(0, 1fr); }
  .gs-lage { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Mannschaft auf dem Handy =====
   Gemessen: die Gespraechsansicht war 472 px breit in einem 390-px-Fenster. Schuld
   waren die vierspaltige Lageleiste und die nicht umbrechende Reiterleiste. */
@media (max-width: 760px) {
  .gs-lage { grid-template-columns: repeat(2, 1fr); }
  .gs-lage b { font-size: 13.5px; }
  .gs-raster { grid-template-columns: minmax(0, 1fr); }
  .ag-reiter-leiste { flex-wrap: wrap; gap: 6px; }
  .ag-reiter-leiste .ag-reiter { flex: 1 1 auto; white-space: nowrap; }
  .gs-paar, .gs-zeile, .gs-strom, .gs-leer { min-width: 0; }
  .gs-zahlen { gap: 7px; font-size: 10.5px; }
  .gs-blase-text { font-size: 12px; }
  #agInhalt, #agKopf { min-width: 0; overflow-x: hidden; }
}

/* Eigenes Fenster fuer den Gespraechsverlauf */
.gs-fenster { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.62);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  backdrop-filter: blur(2px); }
.gs-fenster-kasten { background: var(--card, #14141a); border: 1px solid rgba(127,127,127,.28);
  border-radius: 14px; width: min(760px, 100%); max-height: 86vh; display: flex; flex-direction: column;
  box-shadow: 0 18px 60px rgba(0,0,0,.6); }
.gs-fenster-kopf { display: flex; gap: 11px; align-items: center; padding: 13px 15px;
  border-bottom: 1px solid rgba(127,127,127,.18); }
.gs-fenster-kopf b { font-size: 14.5px; }
.gs-fenster-sym { font-size: 20px; }
.gs-fenster-unter { font-size: 11px; color: var(--muted); margin-top: 2px; }
.gs-fenster-kopf .btn { margin-left: auto; }
.gs-fenster-inhalt { padding: 14px 15px; overflow-y: auto; }
@media (max-width: 760px) { .gs-fenster { padding: 10px; } .gs-fenster-kasten { max-height: 92vh; } }

/* Gespraeche zwischen Agenten im Super Brain */
.sb-kante.k-gespraech { stroke: rgba(56,189,248,.55); }
#sbBild.raum .sb-kante.k-gespraech { stroke: rgba(56,189,248,.72); }
#sbBild.raum .sb-kante.k-gespraech.aktiv { stroke: #ff9a5c; filter: drop-shadow(0 0 6px #ff9a5c); }

/* ===== Auf Stand bleiben (Rektor-Recherche) ===== */
.st-liste { display: flex; flex-direction: column; gap: 12px; }
.st-lauf { border: 1px solid rgba(127,127,127,.2); border-radius: 12px; padding: 13px 15px; }
.st-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  flex-wrap: wrap; margin-bottom: 8px; }
.st-kopf b { font-size: 14px; }
.st-kopf span { font-size: 10.5px; color: var(--muted); }
.st-fuer { font-size: 12.5px; line-height: 1.65; margin-bottom: 11px;
  padding-left: 10px; border-left: 2px solid var(--accent); }
.st-erk { padding: 8px 0; border-top: 1px solid rgba(127,127,127,.12); }
.st-erk b { font-size: 12.5px; font-weight: 600; }
.st-warum { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 3px; }
.st-meta { font-size: 10.5px; color: var(--muted); opacity: .8; margin-top: 3px; }
.st-quellen { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.st-quellen a { font-size: 10.5px; color: var(--muted); border: 1px solid rgba(127,127,127,.22);
  border-radius: 6px; padding: 3px 7px; text-decoration: none; }
.st-quellen a:hover { color: var(--accent); border-color: var(--accent); }
.st-datei { font-size: 10.5px; color: var(--muted); margin-top: 8px; opacity: .75; }

/* ===== Handybreite: gemessen, nicht geraten =====
   Der Prüfer (tools/pruefe-handy.js) hat 31 Ansichten bei 390 px durchgesehen.
   Zwei schoben seitlich. Ursache in beiden Fällen dieselbe Familie von Fehlern:
   ein Flex-Kind ohne min-width:0 kann von langem Text beliebig aufgeblasen werden,
   und die Grundregel dafür galt nur innerhalb von .row. */
.grow { min-width: 0; }
.arow .grow, .dr-head .grow, .ocost-l .grow { min-width: 0; overflow: hidden; }
.arow .an, .arow .aj, .arow .ajt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 760px) {
  /* Nichts darf breiter sein als das Fenster - egal was drinsteht. */
  #main, #main > * { min-width: 0; max-width: 100%; }
  .live-grid { grid-template-columns: minmax(0, 1fr); }
  .live-card, .lc-step { min-width: 0; max-width: 100%; }
  .arow { flex-wrap: nowrap; }
}

/* Zweite Runde, wieder gemessen: die Organisations-Ansicht war 620 px breit
   (feste 300-px-Spalte aus .cc-grid) und der Systemgraph trägt ein min-width
   von 560 px. Beide hatten Handy-Regeln - die standen nur zu weit oben und
   wurden von späteren Zeilen überschrieben. Am Dateiende gewinnt niemand mehr
   dagegen. */
@media (max-width: 760px) {
  .cc-grid { grid-template-columns: minmax(0, 1fr); height: auto; }
  .cc-col { min-width: 0; overflow-y: visible; }
  .sysgraph { min-width: 0; width: 100%; }
  .org-graph { max-width: 100%; height: auto; min-height: 420px; }
  .jcc-grid { grid-template-columns: minmax(0, 1fr); }
  .kanban { grid-auto-columns: minmax(0, 82vw); }
}

/* Dritte Runde. Der Browser hat es selbst verraten (tools/diag-breite.js):
   .org-grid war 330 px breit und verlangte eine 574-px-Spalte. Ursache ist die
   klassische Grid-Falle - "1fr" heisst minmax(AUTO, 1fr), und dieses auto laesst
   die Spalte auf ihren breitesten Inhalt anwachsen. minmax(0, 1fr) verbietet das.
   Dazu ein Netz fuer Restueberstaende: overflow-x clip (nicht hidden, das wuerde
   position:sticky brechen). */
@media (max-width: 760px) {
  .org-grid, .org-devs, .cc-grid, .jcc-grid { grid-template-columns: minmax(0, 1fr); }
  .dept, .org-list, .cc-col, .live-card { min-width: 0; }
  #main { overflow-x: clip; }
}

/* ===== Projekte: sehen statt lesen =====
   Der Fortschrittsbalken beantwortet "kommt es voran", der Verlauf "wann zuletzt",
   die Kürzel "wer". Alles drei ohne eine Zahl lesen zu müssen. */
.pj-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 12px; margin-bottom: 18px; }
.pj-karte { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
  background: var(--card, var(--bg2)); cursor: pointer; transition: border-color .15s, transform .15s;
  display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.pj-karte:hover { border-color: var(--accent); transform: translateY(-1px); }
.pj-kopf { display: flex; align-items: baseline; gap: 10px; }
.pj-name { font-weight: 650; font-size: 15px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-zustand { font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap; padding: 2px 7px; border-radius: 3px; border: 1px solid currentColor; }
.pj-zustand.z-aktiv { color: #22c55e; }
.pj-zustand.z-warm { color: #e08a52; }
.pj-zustand.z-kalt { color: #f59e0b; }
.pj-zustand.z-still, .pj-zustand.z-leer { color: var(--muted); }
.pj-was { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.pj-fortschritt { height: 5px; border-radius: 3px; background: rgba(127,127,127,.18); overflow: hidden; }
.pj-fortschritt i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.pj-zahlen { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--muted); }
.pj-zahlen b { color: var(--text); font-weight: 650; }
.pj-zahlen .warn { color: #f59e0b; }
.pj-unten { display: flex; align-items: flex-end; gap: 10px; margin-top: auto; }
.pj-verlauf { display: flex; align-items: flex-end; gap: 2px; height: 26px; flex: 1; min-width: 0; }
.pj-verlauf i { flex: 1; min-width: 2px; background: var(--accent); opacity: .75; border-radius: 1px; }
.pj-verlauf i.null { background: rgba(127,127,127,.25); opacity: 1; }
.pj-wer { display: flex; gap: -4px; flex: none; }
.pj-wer span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-content: center;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  background: rgba(127,127,127,.16); border: 1px solid var(--border); margin-left: -5px; }
.pj-wer span:first-child { margin-left: 0; }
.pj-leer { font-size: 12px; color: var(--muted); opacity: .8; padding: 3px 0; }
.pj-titel { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin: 22px 0 9px; }
@media (max-width: 760px) { .pj-gitter { grid-template-columns: minmax(0, 1fr); } }

/* ===== Aktivitäts-Feed =====
   Gemessen: 110x "Mission gestartet" in zwei Tagen. Die Farbe trägt hier die
   Information — welche Art von Ereignis das ist, muss man sehen, nicht lesen. */
.fd-filter-leiste { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.fd-filter { font-size: 12px; padding: 5px 11px; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--muted); border: 1px solid var(--border); }
.fd-filter b { font-weight: 600; opacity: .65; margin-left: 3px; }
.fd-filter:hover { color: var(--text); border-color: var(--muted); }
.fd-filter.an { color: var(--accent); border-color: var(--accent); background: rgba(255,122,26,.08); }
.fd-tag { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 18px 0 7px; padding-bottom: 5px;
  border-bottom: 1px solid var(--border); }
.fd-tag:first-child { margin-top: 0; }
.fd-liste { display: flex; flex-direction: column; }
.fd-zeile { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px;
  border-radius: 8px; min-width: 0; }
.fd-zeile[data-task] { cursor: pointer; }
.fd-zeile:hover { background: rgba(127,127,127,.06); }
.fd-zeichen { flex: none; width: 20px; height: 20px; border-radius: 5px; display: grid;
  place-content: center; font-size: 11px; font-weight: 700; margin-top: 1px;
  background: rgba(127,127,127,.12); color: var(--muted); }
.fd-zeit { flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
  margin-top: 3px; min-width: 38px; }
.fd-mitte { flex: 1; min-width: 0; }
.fd-was { font-size: 13.5px; display: flex; align-items: baseline; gap: 7px; }
.fd-mal { font-size: 10.5px; font-weight: 700; color: var(--accent);
  background: rgba(255,122,26,.11); border-radius: 4px; padding: 1px 5px; flex: none; }
.fd-wer { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; }
.fd-zeile.a-fehler .fd-zeichen { background: rgba(239,68,68,.15); color: #ef4444; }
.fd-zeile.a-freigabe .fd-zeichen { background: rgba(34,197,94,.15); color: #22c55e; }
.fd-zeile.a-geld .fd-zeichen { background: rgba(245,158,11,.15); color: #f59e0b; }
.fd-zeile.a-gehirn .fd-zeichen { background: rgba(167,139,250,.15); color: #a78bfa; }
.fd-zeile.a-arbeit .fd-zeichen { background: rgba(96,165,250,.15); color: #e08a52; }
.fd-zeile.a-fehler .fd-was { color: #ef4444; }
@media (max-width: 760px) {
  .fd-zeile { padding: 7px 4px; gap: 8px; }
  .fd-zeit { min-width: 34px; font-size: 10.5px; }
  .fd-was { font-size: 13px; }
  .fd-filter { font-size: 11.5px; padding: 4px 9px; }
}

/* ===== Navigation: klappbare Gruppen =====
   30 Einträge in einer Spalte sind eine Liste, keine Navigation. Auswertung und
   System (zusammen 13) starten zugeklappt; die Gruppe der aktuellen Seite klappt
   immer auf, sonst steht man in einer Ansicht, deren Eintrag nirgends zu sehen ist.

   Nachgebessert am 14.08.: Max sah vier gleich aussehende Gruppenzeilen und darunter
   acht Einträge, die zu keiner davon zu gehören schienen. Der Fehler war nicht die
   Gliederung, sondern dass man der offenen Gruppe nicht ansah, dass sie offen ist.
   Drei Mittel: der Kopf der offenen Gruppe wird hell, ihre Einträge hängen sichtbar
   an einer Linie, und die Anzahl steht nur an zugeklappten Gruppen — dort sagt sie
   etwas ("5 verborgen"), an einer offenen zählt sie nur nach, was man schon sieht. */
button.nav-group { display: flex; align-items: center; gap: 7px; width: 100%;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: #6a6a78; padding: 13px 12px 5px; font-weight: 600; border-radius: 8px; }
button.nav-group:hover { color: var(--text); }
button.nav-group:not(.zu) { color: var(--text); opacity: .85; }
.ng-pfeil { font-size: 9px; width: 9px; flex: none; opacity: .55;
  transition: transform .14s ease; }
button.nav-group:not(.zu) .ng-pfeil { opacity: .9; transform: rotate(90deg); }
.ng-zahl { margin-left: auto; font-size: 9.5px; opacity: .5; letter-spacing: 0;
  font-variant-numeric: tabular-nums; }
/* An einer offenen Gruppe ist die Zahl Rauschen — die Einträge stehen ja darunter. */
button.nav-group:not(.zu) .ng-zahl { display: none; }
/* 13 + 9 + 6 = 28px — genau dort, wo auch der Gruppenname anfängt (12 Rand +
   9 Pfeil + 7 Abstand). Die Einträge fluchten damit unter ihrer Überschrift. */
.nav-fach { display: flex; flex-direction: column; overflow: hidden;
  margin: 1px 0 5px 13px; padding-left: 9px;
  border-left: 1px solid rgba(127, 127, 127, .17); }
.nav-fach > .nav-item { padding-left: 6px; }
.nav-fach.zu { display: none; }
/* Das Menue ist ein Flex-Container, und Flex-Kinder schrumpfen von sich aus. Ist das
   Fenster kuerzer als die Liste, staucht das die Gruppen — und weil .nav-fach ein
   overflow:hidden traegt (das setzt die automatische Mindesthoehe ausser Kraft),
   wird mitten im Eintrag abgeschnitten: Max sah am 14.08. ein halbes "Agenten".
   Nichts in der Navigation darf schrumpfen; zu wenig Platz heisst scrollen.
   Geprueft von tools/pruefe-hoehe.js — der Breiten-Pruefer findet so etwas nie. */
.sidebar nav > * { flex: none; }

/* ===== Verwandte Ansichten =====
   Mehrere Seiten zeigen dasselbe Thema aus anderem Blickwinkel. Statt sie in der
   Navigation zu suchen, stehen sie unter dem Inhalt. */
.nachbarn { display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin: 30px 0 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.nachbarn > span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-right: 3px; }
.nachbar { font-size: 12px; padding: 5px 11px; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--muted); border: 1px solid var(--border); font: inherit;
  font-size: 12px; }
.nachbar:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 760px) { .nachbarn { margin-top: 22px; } }

/* Farbfamilie vereinheitlicht (14.08.).
   Vorher liefen zwei Farbwelten nebeneinander: die Oberfläche orange, das HUD von
   Jarvis und Control Room cyan-blau. Der Bruch fiel bei jedem Wechsel auf.
   Umgestellt wurde ausschließlich Deko-Blau. Die Bedeutungsfarben bleiben:
   grün = gut, gelb = Warnung, rot = Fehler. Wären die mitgefärbt worden, könnte man
   einen fehlgeschlagenen Auftrag nicht mehr von einem erledigten unterscheiden. */

/* Langlieger: ab drei Tagen zeigt die Missionszeile ihr Alter.
   Gemessen waren 12 fehlgeschlagene Missionen im Schnitt 74 Stunden alt - in der
   Liste sahen sie aus wie der Auftrag von vor zehn Minuten. */
.mc-alt { color: #f59e0b; font-weight: 600; }

/* ===== Fehlende Anleitungen =====
   "84 offene Lernwünsche" las sich wie Aktivität — 64 davon warteten auf eine
   Anleitung, die niemand geschrieben hat. Diese Liste macht daraus eine
   Reihenfolge: was am häufigsten gebraucht wird, steht oben. */
.sk-fehlt-liste { border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 15px; margin: 0 0 16px; background: var(--card, var(--bg2)); }
.sk-fehlt-kopf { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 650; margin-bottom: 9px; }
.sk-fehlt-kopf span { font-size: 11px; font-weight: 400; color: var(--muted); }
.sk-fehlt { display: flex; align-items: baseline; gap: 10px; padding: 5px 0;
  border-top: 1px solid rgba(127,127,127,.1); font-size: 13px; }
.sk-fehlt-n { flex: none; min-width: 22px; height: 20px; border-radius: 5px;
  display: grid; place-content: center; font-size: 11px; font-weight: 700;
  background: rgba(255,122,26,.13); color: var(--accent); font-variant-numeric: tabular-nums; }
.sk-fehlt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-fehlt-fach { flex: none; font-size: 10.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; }
.sk-fehlt-rest { font-size: 11.5px; color: var(--muted); padding-top: 7px; }

/* ===== WORKFORCE 2.0 — Belegschaft & Talent-Pool (14.08.2026) ===== */
/* Ans Dateiende, damit keine spaetere Regel die Handy-Korrekturen ueberschreibt. */

.wf-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px; background: var(--border); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; margin: 16px 0 22px; }
.wf-band > div { background: var(--card); padding: 14px 16px; }
.wf-band b { display: block; font-size: 25px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.wf-band span { display: block; margin-top: 5px; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; }
.wf-band .alarm b { color: var(--accent); }

.wf-hinweis { background: rgba(255,122,26,.08); border: 1px solid rgba(255,122,26,.25);
  border-radius: 10px; padding: 13px 16px; margin: 0 0 22px; font-size: 13.5px; }
.wf-hinweis ul { margin: 8px 0 0; padding-left: 18px; }
.wf-hinweis li { margin-bottom: 5px; }

.wf-ab { font-size: 15px; margin: 26px 0 12px; display: flex; align-items: center; gap: 9px; }
.wf-ab-zahl { font-size: 11.5px; color: var(--muted); font-weight: 400; }

.wf-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.wf-karte { background: var(--card); border: 1px solid var(--border); border-radius: 11px;
  padding: 14px 15px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.wf-kopf { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wf-avatar { font-size: 19px; flex: none; }
.wf-titel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wf-titel b { font-size: 14.5px; }
.wf-rolle { font-size: 11.5px; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.wf-level { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 8px; border-radius: 6px; background: rgba(255,122,26,.12); color: var(--accent); }

.wf-zeile { display: flex; flex-wrap: wrap; gap: 5px; }
.wf-marke { font-size: 10.5px; padding: 2px 7px; border-radius: 5px;
  background: var(--bg2, rgba(127,127,127,.12)); color: var(--muted); }
.wf-marke.eigen { background: rgba(255,122,26,.14); color: var(--accent); }

.wf-werte { display: flex; flex-direction: column; gap: 5px; }
.wf-wert { display: grid; grid-template-columns: minmax(0,1fr) 62px 30px; align-items: center; gap: 8px; font-size: 11.5px; }
.wf-wert-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-wert-bar { height: 5px; border-radius: 3px; background: rgba(127,127,127,.2); overflow: hidden; }
.wf-wert-bar i { display: block; height: 100%; border-radius: 3px; background: var(--muted); }
.wf-wert.gut .wf-wert-bar i { background: #4ade80; }
.wf-wert.mittel .wf-wert-bar i { background: #facc15; }
.wf-wert.schwach .wf-wert-bar i { background: #f87171; }
.wf-wert-zahl { text-align: right; font-variant-numeric: tabular-nums; font-size: 11px; }
.wf-wert.leer { grid-template-columns: minmax(0,1fr) 30px; opacity: .55; }

.wf-fakten { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wf-still { font-size: 12px; color: var(--accent); background: rgba(255,122,26,.07);
  padding: 7px 10px; border-radius: 7px; }
.wf-drill { font-size: 11.5px; color: var(--muted); }
.wf-schwaeche { font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--border);
  padding-top: 8px; line-height: 1.45; }

/* ---- Talent-Pool ---- */
.tp-liste { display: flex; flex-direction: column; gap: 8px; }
.tp-rolle { display: flex; gap: 12px; align-items: flex-start; background: var(--card);
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.tp-rolle.besetzt { opacity: .62; }
.tp-nr { flex: none; font-size: 11.5px; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; padding-top: 2px; }
.tp-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tp-mitte b { font-size: 13.5px; }
.tp-be { font-size: 12px; color: var(--muted); }
.tp-krit { font-size: 11.5px; color: var(--muted); }
.tp-krit b { font-size: 11.5px; font-weight: 600; }
.tp-marke { font-size: 10.5px; color: var(--accent); }
.tp-rechts { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tp-reif { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-reif.gut { color: #4ade80; } .tp-reif.mittel { color: #facc15; } .tp-reif.schwach { color: #f87171; }
.tp-modell, .tp-aut { font-size: 10.5px; color: var(--muted); }
.tp-dringend { list-style: none; padding-left: 0; }
.tp-dringend li { margin-bottom: 6px; }

/* Handy: Karten und Zeilen untereinander, nichts schiebt seitlich. */
@media (max-width: 767px) {
  .wf-raster { grid-template-columns: minmax(0, 1fr); }
  .tp-rolle { flex-wrap: wrap; }
  .tp-rechts { flex-direction: row; gap: 10px; align-items: center; width: 100%;
    border-top: 1px solid var(--border); padding-top: 8px; }
  .wf-wert { grid-template-columns: minmax(0,1fr) 46px 28px; }
}

/* ===== Entscheidungen: Rechte-Anfragen und Beförderungen (14.08.2026) ===== */
.ent-block { margin: 0 0 26px; }
.ent-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-bottom: 12px; }
.ent-karte { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 14px 15px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ent-karte.hoch { border-left-color: #4ade80; }
.ent-karte.runter { border-left-color: #facc15; }
.ent-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.ent-avatar { font-size: 17px; }
.ent-recht { font-size: 12px; background: rgba(255,122,26,.13); color: var(--accent);
  padding: 1px 6px; border-radius: 4px; }
.ent-punkte { margin-left: auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ent-konkret { font-size: 12px; font-family: ui-monospace, Menlo, monospace; color: var(--muted);
  background: rgba(127,127,127,.08); padding: 6px 9px; border-radius: 6px;
  overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.ent-grund { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.ent-bezug { font-size: 11.5px; color: var(--muted); }
.ent-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ent-knopf { font-size: 12px; padding: 6px 11px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg2, rgba(127,127,127,.1)); color: var(--text); }
.ent-knopf:hover { border-color: var(--accent); }
.ent-knopf.stark { background: rgba(255,122,26,.15); border-color: rgba(255,122,26,.4); color: var(--accent); }
.ent-knopf.nein { color: var(--muted); }
.ent-knopf:disabled { opacity: .5; cursor: default; }
.ent-warnung { font-size: 11.5px; color: #facc15; }
@media (max-width: 767px) {
  .ent-raster { grid-template-columns: minmax(0, 1fr); }
  .ent-knopf { flex: 1 1 auto; text-align: center; }
}

/* ===== Organigramm: Führung und Zusammenarbeit (15.08.2026) =====
   Max wollte "die Hierarchie und die Beziehungen zueinander sehen ... krasser und
   intensiver". Bis hierher standen 13 gleich große Karten nebeneinander — kein Bild
   einer Firma, sondern eine Liste. Die Bühne unten baut Tiefe über drei Mittel:
   Abteilungsfarbe (--f) trägt die Zugehörigkeit über weite Wege, der Puls zeigt
   Leben, die Linien zeigen Zusammenhang.
   Die Linien liegen BEWUSST hinter den Köpfen (z-index): so entsteht Raumtiefe statt
   eines Kabelsalats über den Gesichtern. */
.og-buehne { position: relative; padding: 4px 0 30px; }
.og-buehne::before {
  content: ''; position: absolute; inset: -10px -14px auto; height: 460px; z-index: 0;
  background: radial-gradient(90% 100% at 50% 0%, rgba(217,120,79,.10), transparent 70%);
  pointer-events: none;
}

/* Kennzahlenband */
.og-band { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.og-zahl { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 13px; min-width: 92px; }
.og-zahl b { display: block; font-size: 19px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.og-zahl span { font-size: 11px; color: var(--muted); }
.og-zahl.an { border-color: rgba(79,174,109,.5); }
.og-zahl.an b { color: var(--ok); }
.og-zahl.quer b { color: var(--accent); }
.og-zahl.warn { border-color: rgba(217,161,63,.5); }
.og-zahl.warn b { color: var(--warn); }

/* Umschalter + Legende */
.og-schalter { position: relative; z-index: 2; display: flex; flex-wrap: wrap;
  align-items: center; gap: 6px; margin-bottom: 18px; }
.og-s { font-size: 12.5px; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg2); color: var(--muted); }
.og-s:hover { color: var(--text); border-color: rgba(127,127,127,.45); }
.og-s.an { background: var(--accent-soft); border-color: rgba(217,120,79,.45); color: var(--accent); }
.og-legende { margin-left: auto; font-size: 11.5px; color: var(--muted);
  display: flex; align-items: center; gap: 6px; }
.og-legende i { display: inline-block; width: 16px; height: 0; border-top: 2px solid; }
.og-l-f { color: rgba(236,236,241,.55); }
.og-l-z { color: rgba(56,189,248,.75); border-top-style: dashed; }
.og-l-q { color: var(--accent); border-top-style: dashed; }

/* Die Linien */
.og-linien { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; }
.og-linie { fill: none; }
.og-linie.fuehrung { stroke: url(#ogGrad); stroke-width: 2.1px; filter: url(#ogGlow); }
.og-linie.fuehrung.vorschlag { stroke: rgba(180,180,196,.6); stroke-width: 1.5px;
  stroke-dasharray: 4 5; filter: none; }
.og-linie.zusammen { stroke: rgba(56,189,248,.5); stroke-dasharray: 5 6; pointer-events: stroke;
  animation: ogFluss 5s linear infinite; }
.og-linie.zusammen.quer { stroke: rgba(217,120,79,.7); }
/* Überfährt man einen Kopf, treten SEINE Linien hervor und alle anderen zurück.
   Erst dadurch wird aus dem Liniengewirr eine Aussage: "mit diesen redet er". */
.og-buehne.og-fokus .og-linie { opacity: .10; }
.og-buehne.og-fokus .og-linie.hell { opacity: 1; stroke-width: 3px; }
.og-buehne.og-fokus .og-linie.hell.zusammen { stroke: var(--accent); animation-duration: 1.6s; }
.og-buehne.og-fokus .og-knoten { opacity: .42; }
.og-buehne.og-fokus .og-knoten.hell { opacity: 1; }
.og-buehne.og-fokus .og-knoten.ich { opacity: 1; border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 10px 30px rgba(0,0,0,.5); }
@keyframes ogFluss { to { stroke-dashoffset: -44; } }

/* Ebenen */
.og-ebene { position: relative; z-index: 1; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 14px; }
.og-e0 { margin-bottom: 34px; }
.og-e1 { margin-bottom: 38px; }

.og-max { display: inline-flex; align-items: center; gap: 12px; padding: 13px 20px;
  border-radius: 14px; background: linear-gradient(135deg, rgba(217,120,79,.20), rgba(217,120,79,.05));
  border: 1px solid rgba(217,120,79,.45); box-shadow: 0 0 34px rgba(217,120,79,.14); }
.og-max-ico { font-size: 22px; color: var(--accent); }
.og-max b { display: block; font-size: 16px; }
.og-max span { font-size: 11.5px; color: var(--muted); }
.og-max-warn { margin-left: 6px; font-size: 11.5px; color: var(--warn);
  border: 1px solid rgba(217,161,63,.4); border-radius: 6px; padding: 3px 8px; }

/* Ein Kopf */
.og-knoten { position: relative; z-index: 1; width: 260px; background: var(--bg2);
  border: 1px solid var(--border); border-top: 2px solid var(--f, var(--border));
  border-radius: 12px; padding: 11px 12px 9px; cursor: pointer;
  display: flex; flex-direction: column; gap: 7px; overflow: hidden;
  transition: transform .15s, border-color .15s, box-shadow .15s, opacity .15s; }
/* Ohne das sprengen lange Rollentexte den Kasten: ein Flex-Kind darf von sich aus
   breiter werden als sein Container (min-width: auto). Am 15.08. standen deshalb 36
   Textteile bis zu 139 px über dem Rand — auf dem Bild sah das nach Absicht aus. */
.og-knoten > * { min-width: 0; max-width: 100%; }
.og-knoten:hover { transform: translateY(-2px); border-color: rgba(127,127,127,.5);
  box-shadow: 0 8px 26px rgba(0,0,0,.35); }
.og-zentrale { width: 250px; background: linear-gradient(180deg, rgba(167,139,250,.10), var(--bg2));
  border-top-color: #a78bfa; }
.og-leitung { box-shadow: 0 4px 20px rgba(0,0,0,.28); }
.og-team { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--border); }
.og-team .og-knoten { width: 236px; }

.og-k-kopf { display: flex; align-items: center; gap: 9px; min-width: 0; }
.og-k-avatar { font-size: 20px; width: 30px; text-align: center; flex: 0 0 auto; }
.og-k-wer { min-width: 0; flex: 1 1 auto; }
.og-k-wer b { display: block; font-size: 14px; line-height: 1.25; }
.og-k-wer span { display: block; font-size: 11px; color: var(--muted); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-k-puls { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.og-knoten.ag-an .og-k-puls { background: var(--ok); animation: ogPuls 1.7s ease-out infinite; }
.og-knoten.ag-warte .og-k-puls { background: var(--warn); }
.og-knoten.ag-pause .og-k-puls { background: var(--bad); }
@keyframes ogPuls {
  0%   { box-shadow: 0 0 0 0 rgba(79,174,109,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(79,174,109,0); }
  100% { box-shadow: 0 0 0 0 rgba(79,174,109,0); }
}
.og-knoten.ag-an { border-color: rgba(79,174,109,.42); }
.og-knoten.ag-warte { border-color: rgba(217,161,63,.45); }

.og-k-haengen { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 13px; }
.og-k-haengen:hover { border-color: var(--border); background: var(--bg3); color: var(--text); }

.og-k-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.og-chip { font-size: 10.5px; padding: 2px 6px; border-radius: 5px;
  background: rgba(127,127,127,.12); color: var(--muted); white-space: nowrap; }
.og-chip.stufe { background: rgba(96,165,250,.15); color: #93c5fd; }
.og-chip.auto { background: rgba(167,139,250,.15); color: #c4b5fd; }
.og-chip.fuehrt { background: var(--accent-soft); color: var(--accent); }
.og-chip.ged { background: rgba(79,174,109,.14); color: #86d3a0; }

.og-k-arbeit { font-size: 11.5px; line-height: 1.4; color: var(--text);
  background: rgba(79,174,109,.10); border-left: 2px solid var(--ok);
  padding: 5px 8px; border-radius: 0 6px 6px 0; overflow-wrap: anywhere; }
.og-k-arbeit.warte { background: rgba(217,161,63,.10); border-left-color: var(--warn); }
.og-k-ziel { font-size: 11px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.og-k-ziel.leer { opacity: .5; font-style: italic; }
/* Die Zentrale trägt Kennzahlen statt Aufträge — sichtbar anders, weil es etwas
   anderes ist: gemessen, nicht zugeteilt. */
.og-k-kennzahl { padding: 5px 8px; border-radius: 0 6px 6px 0; border-left: 2px solid; }
.og-k-kennzahl.gut { background: rgba(79,174,109,.10); border-left-color: var(--ok); color: var(--text); }
.og-k-kennzahl.offen { background: rgba(217,161,63,.10); border-left-color: var(--warn); color: var(--text); }
.og-k-kennzahl span { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted); }
.og-k-fuss { display: flex; flex-wrap: wrap; gap: 9px; font-size: 10.5px; color: var(--muted);
  border-top: 1px solid var(--border); padding-top: 6px; font-variant-numeric: tabular-nums; }
.og-k-fuss .schlecht { color: var(--bad); }

/* Abteilungen */
.og-abteilungen { position: relative; z-index: 1; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, max-content));
  justify-content: center; align-items: start; gap: 22px 18px; }
.og-abt { background: var(--bg2); border: 1px solid var(--border);
  border-top: 3px solid var(--f); border-radius: 14px; padding: 12px; min-width: 0;
  box-shadow: 0 6px 22px rgba(0,0,0,.22); }
.og-abt.aktiv { box-shadow: 0 6px 30px color-mix(in srgb, var(--f) 22%, transparent); }
.og-abt-kopf { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.og-abt-ico { font-size: 17px; color: var(--f); width: 26px; text-align: center; }
.og-abt-kopf b { display: block; font-size: 13.5px; letter-spacing: .3px; text-transform: uppercase; }
.og-abt-kopf span { font-size: 11px; color: var(--muted); }
.og-abt-eur { margin-left: auto; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; }

.og-leerstellen { position: relative; z-index: 1; display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px; margin-top: 26px; padding-top: 16px;
  border-top: 1px dashed var(--border); font-size: 11.5px; color: var(--muted); }
.og-leerstellen i { font-style: normal; padding: 3px 9px; border-radius: 6px;
  border: 1px dashed color-mix(in srgb, var(--f) 45%, transparent);
  color: color-mix(in srgb, var(--f) 75%, var(--muted)); }

.og-hinweis { position: relative; z-index: 1; margin-top: 20px; font-size: 12px;
  line-height: 1.6; color: var(--muted); background: var(--bg2);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0; padding: 10px 13px; }
.og-hinweis b { color: var(--text); }

/* Umhängen-Fenster */
.og-haengen { display: flex; flex-direction: column; gap: 12px; }
.og-wahl { width: 100%; background: var(--bg3); border: 1px solid var(--border);
  color: var(--text); border-radius: 9px; padding: 10px 12px; font-size: 14px; }
.og-haengen-hinweis { font-size: 12px; line-height: 1.6; color: var(--muted); }
.og-haengen-fehler { font-size: 12px; color: var(--bad); }

/* Handy zuletzt — sonst gewinnt die Regel darüber. Auf 390 px darf nichts gestaucht
   werden: die Köpfe gehen auf volle Breite, die Abteilung wird zur Spalte. */
@media (max-width: 767px) {
  .og-band { gap: 6px; }
  .og-zahl { flex: 1 1 calc(50% - 3px); min-width: 0; padding: 7px 10px; }
  .og-zahl b { font-size: 17px; }
  .og-legende { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .og-abteilungen { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .og-abt { padding: 10px; }
  .og-knoten, .og-zentrale, .og-team .og-knoten { width: 100%; }
  .og-ebene { gap: 10px; }
  .og-e0 { margin-bottom: 26px; }
  .og-e1 { margin-bottom: 28px; }
  .og-max { width: 100%; }
  .og-team { gap: 8px; }
  .og-s { flex: 1 1 auto; text-align: center; }
}

/* ===== Fehlerzentrum (15.08.2026) =====
   Fehler brauchen eine andere Sprache als Kennzahlen: Was gerade lebt, muss sofort
   ins Auge fallen; was abgeklungen ist, darf zurücktreten, ohne zu verschwinden. */
.fz-liste { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.fz-gruppe { background: var(--bg2); border: 1px solid var(--border);
  border-left: 3px solid var(--muted); border-radius: 0 10px 10px 0; padding: 13px 15px; }
.fz-gruppe.s-hoch { border-left-color: var(--bad); }
.fz-gruppe.s-mittel { border-left-color: var(--warn); }
.fz-gruppe.s-niedrig { border-left-color: var(--muted); }
/* Nur was noch lebt, bekommt Gewicht. Abgeklungenes bleibt lesbar, drängt sich
   aber nicht auf — sonst jagt man Gespenster. */
.fz-gruppe:not(.lebt) { opacity: .72; }
.fz-gruppe.lebt { box-shadow: 0 4px 18px rgba(217,92,92,.14); }
.fz-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 7px; }
.fz-kopf b { font-size: 14.5px; }
.fz-zahl { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--text);
  background: rgba(127,127,127,.14); padding: 1px 7px; border-radius: 5px; }
.fz-marke { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px; margin-left: auto; white-space: nowrap; }
.fz-marke.lebt { background: rgba(217,92,92,.15); color: var(--bad); }
.fz-marke.ruht { background: rgba(127,127,127,.12); color: var(--muted); text-transform: none;
  letter-spacing: 0; }
.fz-marke.einzel { background: rgba(127,127,127,.10); color: var(--muted); }
.fz-agenten { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fz-agenten span { font-size: 11.5px; color: var(--muted); background: rgba(127,127,127,.10);
  padding: 1px 7px; border-radius: 4px; }
.fz-rat { font-size: 12.5px; line-height: 1.55; color: var(--text); margin-bottom: 9px; }
.fz-faelle { display: flex; flex-direction: column; gap: 6px; border-top: 1px dashed var(--border);
  padding-top: 9px; }
.fz-fall { font-size: 12px; }
.fz-fall a { color: var(--accent); text-decoration: none; font-family: ui-monospace, Menlo, monospace;
  margin-right: 7px; }
.fz-fall a:hover { text-decoration: underline; }
.fz-fall span { color: var(--text); }
.fz-hinweis { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--muted);
  margin-top: 3px; padding-left: 2px; overflow-wrap: anywhere; }
.fz-gut { color: var(--ok); }
.fz-schlecht { color: var(--bad); }

@media (max-width: 767px) {
  .fz-marke { margin-left: 0; }
  .fz-gruppe { padding: 11px 12px; }
}

/* ===== Loop-Register (15.08.2026) =====
   Die Bremse steht vor der Beschreibung: was ein Ablauf tut, ist zweitrangig gegenüber
   der Frage, woran er aufhört. Deshalb ist "Hört auf, wenn:" die betonte Zeile. */
.lp-liste { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; }
.lp-karte { background: var(--bg2); border: 1px solid var(--border);
  border-left: 3px solid var(--muted); border-radius: 0 10px 10px 0; padding: 13px 15px; }
.lp-karte.a-gruen { border-left-color: var(--ok); }
.lp-karte.a-gelb  { border-left-color: var(--warn); }
.lp-karte.a-rot   { border-left-color: var(--bad); }
.lp-karte.a-grau  { border-left-color: var(--border); }
.lp-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.lp-kopf b { font-size: 14.5px; }
.lp-kopf code { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--muted);
  background: rgba(127,127,127,.10); padding: 1px 6px; border-radius: 4px; }
.lp-ampel { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px; }
.lp-ampel.gruen { background: rgba(79,174,109,.15); color: var(--ok); }
.lp-ampel.gelb  { background: rgba(217,161,63,.15); color: var(--warn); }
.lp-ampel.rot   { background: rgba(217,92,92,.15); color: var(--bad); }
.lp-ampel.grau  { background: rgba(127,127,127,.12); color: var(--muted); }
.lp-status { margin-left: auto; font-family: ui-monospace, Menlo, monospace; font-size: 10.5px;
  padding: 2px 7px; border-radius: 4px; background: rgba(127,127,127,.12); color: var(--muted); }
.lp-status.s-ACTIVE { background: rgba(79,174,109,.15); color: var(--ok); }
.lp-status.s-DISABLED { background: rgba(217,92,92,.12); color: var(--bad); }
.lp-wer { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.lp-zweck { font-size: 12.5px; line-height: 1.5; margin-bottom: 8px; }
.lp-stopp { font-size: 12px; line-height: 1.5; background: rgba(127,127,127,.07);
  border-left: 2px solid var(--accent); padding: 6px 10px; border-radius: 0 6px 6px 0;
  margin-bottom: 8px; overflow-wrap: anywhere; }
.lp-stopp b { color: var(--accent); }
.lp-grenzen { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-grenzen span { font-size: 11px; color: var(--muted); background: rgba(127,127,127,.10);
  padding: 2px 8px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.lp-warnung { margin-top: 8px; font-size: 11.5px; color: var(--warn); }

@media (max-width: 767px) {
  .lp-status { margin-left: 0; }
  .lp-karte { padding: 11px 12px; }
}

/* ===== Chat & Gespräch — Anhänge & Upload (Mission #1545) ===== */
.chat-eingabe { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--bg2);
  border-radius: 10px; border: 1px solid var(--border); }
.chat-eingabe textarea { background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  padding: 10px 12px; border-radius: 8px; font-family: inherit; font-size: 15px;
  resize: none; overflow-y: auto; max-height: 160px; }
.chat-eingabe textarea:focus { outline: none; border-color: var(--accent); }
.chat-knoepfe { display: flex; gap: 8px; }
.chat-anhaenge, .gespr-anhaenge { display: flex; flex-direction: column; gap: 8px; padding: 8px;
  background: rgba(127,127,127,.05); border-radius: 8px; border: 1px solid var(--border); }
.chat-anhang { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.chat-anhang img { max-width: 48px; max-height: 48px; border-radius: 4px; object-fit: cover; }
.chat-anhang .ico { font-size: 20px; }
.chat-anhang .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-anhang .g { color: var(--muted); font-size: 12px; white-space: nowrap; }
.chat-anhang button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px;
  padding: 0 4px; }
.chat-anhang button:hover { color: var(--text); }
.chat-anh { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chat-anh img { max-width: 100%; max-height: 300px; border-radius: 8px; }
.chat-datei { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 6px; color: var(--accent); text-decoration: none; font-size: 13px; }
.chat-datei:hover { background: var(--bg2); }
.chat-ziehmarke, .gespr-ziehmarke { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5); border: 3px dashed var(--accent); border-radius: 16px; pointer-events: none;
  z-index: 100; }
.chat-ziehmarke span, .gespr-ziehmarke span { font-size: 18px; font-weight: 600; color: var(--accent); }

/* Gespräch — spezifische Styles */
.gespr { display: flex; flex-direction: column; height: 100%; gap: 0; }
.gespr-kopf { padding: 12px; background: var(--bg2); border-bottom: 1px solid var(--border);
  border-radius: 10px 10px 0 0; }
.gespr-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.gespr-n { display: flex; gap: 10px; }
.gespr-n.meins { justify-content: flex-end; }
.gespr-blase { background: var(--bg3); border: 1px solid var(--border); padding: 10px 12px;
  border-radius: 10px; max-width: 70%; word-wrap: break-word; }
.gespr-n.meins .gespr-blase { background: var(--accent-soft); border-color: var(--accent); }
.gespr-eingabe { display: flex; gap: 8px; padding: 12px; background: var(--bg2);
  border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; }
.gespr-eingabe input { flex: 1; background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.gespr-eingabe input:focus { outline: none; border-color: var(--accent); }
.gespr-eingabe .b { padding: 8px 12px; }

@media (max-width: 820px) {
  .chat-eingabe textarea { font-size: 16px; }
  .chat-anhang { padding: 6px 8px; font-size: 12px; }
  .chat-anhang .g { font-size: 11px; }
  .gespr-blase { max-width: 85%; }
}


/* ===== Brain auf dem Dashboard (17.08.2026) =====
   Die Buehne ist bewusst hoch: 509 Knoten brauchen Platz, sonst klebt alles
   aufeinander. Breite unbegrenzt, Hoehe fest - so springt das Layout nicht,
   wenn der Graph neu erhoben wird. */
.hb-brain { padding: 14px 14px 10px; margin-bottom: 16px; }
.hb-brain-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hb-brain-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.hb-brain-buehne {
  position: relative; height: 560px; margin: 10px 0 6px;
  border-radius: 14px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, rgba(80,140,255,.10), transparent 68%);
  touch-action: none;            /* sonst scrollt das Handy statt zu drehen */
}
.hb-brain-buehne > svg { width: 100%; height: 100%; display: block; cursor: grab; }
.hb-brain-buehne > svg:active { cursor: grabbing; }
.hb-brain-laedt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--dim); font-size: 12px; }
.hb-brain-fuss { font-size: 10.5px; color: var(--dim); text-align: center; opacity: .75; }

@media (max-width: 820px) {
  .hb-brain-buehne { height: 340px; }
  .hb-brain-kopf { flex-direction: column; align-items: stretch; }
  .hb-brain-fuss { font-size: 9.5px; }
}
@media (max-width: 430px) {
  .hb-brain { padding: 11px 10px 8px; }
  .hb-brain-buehne { height: 290px; }
}