/* Firma — Basis-Styles. Farben/Fonts kommen aus /theme.css (frei konfigurierbar). */
:root {
  --p-50:#F0FDFA; --p-100:#CCFBF1; --p-200:#99F6E4; --p-400:#2DD4BF; --p-500:#14B8A6; --p-600:#0D9488; --p-700:#0F766E; --p-800:#115E59; --p-900:#134E4A; --p-950:#042F2E;
  --gold-100:#FEF9C3; --gold-300:#FDE047; --gold-400:#FACC15; --gold-500:#EAB308; --gold-600:#CA8A04; --gold-800:#854D0E;
  --ink:#063A44; --ink-2:#1F5D67; --ink-3:#6B939B;
  --surface:#FAF7F2; --raised:#FFFFFF; --line:#E8E1D4;
  --red:#B91C1C; --green:#15803D;
  --font: 'Inter', system-ui, sans-serif; --display: 'Manrope', 'Inter', system-ui, sans-serif;
  --radius: 14px; --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px -12px rgba(0,0,0,.18);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); color: var(--ink); background: var(--surface); font-size: 15px; line-height: 1.5; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); margin: 0 0 .4em; line-height: 1.2; }
h1 { font-size: 1.7rem; font-weight: 800; } h2 { font-size: 1.3rem; font-weight: 700; } h3 { font-size: 1.05rem; font-weight: 700; } h4 { font-size: .92rem; font-weight: 700; }
a { color: var(--p-700); text-decoration: none; } a:hover { text-decoration: underline; }
.hidden { display: none !important; }
.muted { color: var(--ink-3); } .tiny { font-size: .76rem; } .small { font-size: .86rem; }
.error { color: var(--red); font-size: .9rem; }
code { font-family: ui-monospace, Consolas, monospace; background: var(--p-50); padding: .1em .35em; border-radius: 5px; font-size: .85em; word-break: break-all; }
pre { background: var(--p-950); color: #e6f7f5; padding: 14px; border-radius: 10px; overflow: auto; font-size: .8rem; line-height: 1.45; max-height: 420px; white-space: pre-wrap; word-break: break-word; }
textarea, input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], select { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); color: var(--ink); }
input[type=color] { width: 48px; height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: var(--raised); }
textarea:focus, input:focus, select:focus { outline: 2px solid var(--p-400); outline-offset: 0; border-color: var(--p-500); }
label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: 10px; color: var(--ink-2); }
label > input, label > textarea, label > select { margin-top: 4px; font-weight: 400; }
label.inline { display: flex; align-items: center; gap: 8px; } label.inline input { width: auto; margin: 0; }

.btn { font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; background: var(--raised); color: var(--ink); transition: .15s; display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.btn:hover { border-color: var(--p-500); color: var(--p-700); }
.btn.primary { background: var(--p-700); color: #fff; border-color: var(--p-700); } .btn.primary:hover { background: var(--p-800); color: #fff; }
.btn.gold { background: var(--gold-400); color: var(--ink); border-color: var(--gold-500); } .btn.gold:hover { background: var(--gold-500); }
.btn.danger { background: #fff; color: var(--red); border-color: #f3c4c4; } .btn.danger:hover { background: #fef2f2; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 5px 10px; font-size: .8rem; border-radius: 8px; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }
.icon-btn { background: transparent; border: 0; color: #fff; font-size: 1.2rem; cursor: pointer; padding: 6px 8px; border-radius: 8px; } .icon-btn:hover { background: rgba(255,255,255,.12); }
.icon-btn.dark { color: var(--ink); }
.icon-btn.listening, .mic.listening, .big-mic.listening { background: var(--gold-400) !important; color: var(--ink) !important; animation: pulse 1s infinite; }
.mic { font: inherit; border: 1px solid var(--line); background: var(--raised); border-radius: 10px; padding: 8px 12px; cursor: pointer; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(234,179,8,.5);} 50% { box-shadow: 0 0 0 10px rgba(234,179,8,0);} }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--p-200); border-top-color: var(--p-700); border-radius: 50%; animation: spin 1s linear infinite; vertical-align: middle; }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(1200px 600px at 20% -10%, var(--p-100), transparent), radial-gradient(800px 500px at 100% 100%, var(--gold-100), transparent), var(--surface); padding: 20px; }
.login-card { background: var(--raised); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 36px 30px; width: 100%; max-width: 420px; text-align: center; }
.login-logo { height: 44px; margin-bottom: 20px; max-width: 100%; object-fit: contain; }
.login-card form { text-align: left; margin-top: 22px; }
.login-card h1 { font-family: var(--display); font-size: 1.45rem; margin: 0 0 6px; color: var(--ink); }
.login-card .muted { margin: 0 0 4px; }
.login-field { position: relative; margin-bottom: 14px; }
.login-field label { margin-bottom: 6px; }
.login-field .icon { position: absolute; left: 13px; bottom: 13px; width: 20px; height: 20px; color: var(--ink-3); pointer-events: none; }
.login-field input { padding-left: 42px; height: 46px; border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.login-field input:focus { outline: none; border-color: var(--p-500); box-shadow: 0 0 0 4px var(--p-100); }
.login-card .btn.wide { height: 46px; font-size: 1rem; margin-top: 6px; }
.login-foot { margin-top: 18px; font-size: .8rem; color: var(--ink-3); line-height: 1.45; }

/* Topbar */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--p-950); color: #fff; display: flex; align-items: center; gap: 18px; padding: 0 18px; height: 56px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--display); font-weight: 700; white-space: nowrap; } .brand img { height: 26px; max-width: 140px; object-fit: contain; } .brand:hover { text-decoration: none; }
.brand span { color: var(--gold-400); font-size: .95rem; border-left: 1px solid rgba(255,255,255,.3); padding-left: 10px; }
#nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; } #nav::-webkit-scrollbar { display: none; }
#nav a { color: #d8efee; padding: 7px 10px; border-radius: 8px; font-size: .86rem; font-weight: 500; white-space: nowrap; }
#nav a:hover { background: rgba(255,255,255,.1); text-decoration: none; }
#nav a.active { background: var(--p-700); color: #fff; }
.badge { background: var(--gold-400); color: var(--ink); font-size: .7rem; font-weight: 700; border-radius: 99px; padding: 1px 7px; margin-left: 3px; }
.topbar-right { display: flex; align-items: center; gap: 6px; } .boss { font-size: .88rem; color: #d8efee; }
.bottomnav { display: none; }
.sheet { display: none; }

/* Layout */
main { max-width: 1280px; margin: 0 auto; padding: 24px 20px 90px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head p { margin: 0; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.card { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.card.clickable { cursor: pointer; transition: .15s; } .card.clickable:hover { transform: translateY(-2px); border-color: var(--p-400); text-decoration: none; }
.section { margin-top: 30px; }
.section > h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.section > h2 .count { font-size: .78rem; background: var(--p-100); color: var(--p-800); border-radius: 99px; padding: 2px 9px; font-family: var(--font); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { background: var(--p-50); color: var(--p-800); border: 1px solid var(--p-100); border-radius: 99px; padding: 2px 9px; font-size: .75rem; font-weight: 500; }
.chip.gold { background: var(--gold-100); color: var(--gold-800); border-color: var(--gold-300); }
.chip.red { background: #fde2e2; color: var(--red); border-color: #f3c4c4; }
.empty { border: 1px dashed var(--line); border-radius: var(--radius); padding: 20px; text-align: center; color: var(--ink-3); }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tabs a { padding: 8px 14px; border-radius: 8px 8px 0 0; color: var(--ink-2); font-weight: 600; font-size: .9rem; white-space: nowrap; } .tabs a.active { background: var(--raised); color: var(--p-700); border: 1px solid var(--line); border-bottom-color: var(--raised); margin-bottom: -1px; }

/* Büro (Startbildschirm) */
.hero { background: linear-gradient(120deg, var(--p-950), var(--p-800)); color: #fff; border-radius: 20px; padding: 22px 24px; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero h1 { color: #fff; margin: 0 0 2px; font-size: 1.4rem; } .hero p { margin: 0; color: #cfeeed; font-size: .9rem; }
.hero .kpis { display: flex; gap: 8px; flex-wrap: wrap; }
.kpi { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 8px 14px; min-width: 92px; text-align: center; cursor: pointer; }
.kpi b { display: block; font-size: 1.4rem; font-family: var(--display); color: var(--gold-400); }
.kpi span { font-size: .7rem; color: #cfeeed; }
.office { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-top: 18px; }
.room { background: var(--raised); border: 1px solid var(--line); border-radius: 18px; padding: 14px 14px 10px; position: relative; overflow: hidden; }
.room::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--room-color, var(--p-700)); }
.room.wide { grid-column: 1 / -1; }
.room h3 { display: flex; align-items: center; gap: 8px; font-size: .95rem; margin-bottom: 10px; } .room h3 a { color: inherit; }
.room .active-count { margin-left: auto; font-size: .72rem; background: var(--gold-100); color: var(--gold-800); border-radius: 99px; padding: 1px 8px; font-family: var(--font); }
.desks { display: flex; flex-wrap: wrap; gap: 10px 6px; justify-content: center; }
.desk { width: 108px; text-align: center; cursor: pointer; position: relative; }
.desk .ring { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; padding: 3px; background: var(--line); transition: .3s; position: relative; }
.desk .ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--p-100); border: 2px solid var(--raised); display: block; }
.desk.working .ring { background: conic-gradient(from 0deg, var(--p-500), var(--gold-400), #f472b6, #60a5fa, var(--p-500)); animation: spin 2.2s linear infinite; box-shadow: 0 0 14px rgba(20,184,166,.35); }
.desk.working .ring img { animation: counterspin 2.2s linear infinite; }
.desk.stale .ring { animation-duration: 6s; filter: grayscale(.6); } .desk.stale .st { color: var(--red); }
.desk.waiting .ring { background: conic-gradient(var(--gold-400), var(--gold-100), var(--gold-400)); animation: spin 4s linear infinite; }
.desk.meeting::after { content: '🗣'; position: absolute; top: -2px; right: 10px; font-size: .9rem; background: var(--raised); border-radius: 50%; padding: 1px 3px; box-shadow: var(--shadow); }
.desk.meeting .ring { outline: 3px solid var(--meet-color, var(--gold-400)); outline-offset: 2px; }
.desk .nm { font-size: .74rem; font-weight: 700; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk .rl { font-size: .62rem; color: var(--p-700); font-weight: 600; line-height: 1.2; max-height: 2.4em; overflow: hidden; margin: 1px 0 2px; }
.desk .st { display: block; font-size: .66rem; line-height: 1.25; color: var(--ink-3); height: 2.5em; overflow: hidden; font-weight: 400; padding: 0; white-space: normal; background: none; }
.desk.working .st { color: var(--p-800); }
.desk .idle { color: var(--ink-3); opacity: .7; }
.meetings { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.meeting-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--raised); border: 1px solid var(--line); border-left: 5px solid var(--meet-color); border-radius: 99px; padding: 4px 12px 4px 8px; font-size: .8rem; cursor: pointer; }
.meeting-pill .avs img { width: 22px; height: 22px; border-radius: 50%; margin-right: -6px; border: 2px solid #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes counterspin { to { transform: rotate(-360deg); } }

.brief-card { border: 2px solid var(--p-500); background: linear-gradient(135deg, var(--raised), var(--p-50)); }
.brief-card .avatar { width: 72px; height: 72px; }

/* Abteilungen / Mitarbeiter */
.dep-card { display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; }
.dep-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--dep-color, var(--p-700)); }
.dep-icon { font-size: 1.8rem; }
.dep-meta { display: flex; gap: 12px; font-size: .8rem; color: var(--ink-3); flex-wrap: wrap; }
.breadcrumb { font-size: .84rem; color: var(--ink-3); margin-bottom: 6px; }
.emp { display: grid; grid-template-columns: 84px 1fr; gap: 14px; position: relative; }
.emp.leader { grid-column: 1 / -1; grid-template-columns: 110px 1fr; border: 2px solid var(--gold-400); background: linear-gradient(135deg, var(--raised), var(--gold-100)); }
.avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--p-100); border: 3px solid var(--raised); box-shadow: 0 0 0 2px var(--p-200); }
.emp.leader .avatar { width: 110px; height: 110px; box-shadow: 0 0 0 3px var(--gold-400); }
.emp .name { font-family: var(--display); font-weight: 800; font-size: 1.05rem; margin: 0; }
.emp .role { color: var(--p-700); font-weight: 600; font-size: .84rem; margin: 0 0 6px; }
.emp .desc { font-size: .86rem; color: var(--ink-2); margin: 0 0 6px; }
.emp h4 { margin: 8px 0 3px; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.emp ul { margin: 0; padding-left: 18px; font-size: .82rem; color: var(--ink-2); }
.status-dot { position: absolute; top: 12px; right: 12px; font-size: .72rem; font-weight: 600; border-radius: 99px; padding: 2px 9px; background: var(--p-50); color: var(--p-800); }
.status-dot.arbeitet { background: var(--gold-100); color: var(--gold-800); animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: .6; } }
.working { background: var(--p-50); border-left: 3px solid var(--p-500); border-radius: 8px; padding: 8px 10px; font-size: .82rem; margin-top: 4px; }
.working .t { font-weight: 600; }
.emp-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.tag { font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; margin-left: 4px; vertical-align: middle; }
.tag.rev { background: #e0e7ff; color: #3730a3; } .tag.scout { background: #ffe4e6; color: #9f1239; } .tag.sys { background: var(--p-100); color: var(--p-800); }

/* Aufgaben / Anträge */
.task-row { display: grid; grid-template-columns: 74px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.task-row:last-child { border-bottom: 0; }
.task-row .id { font-family: ui-monospace, monospace; font-size: .76rem; color: var(--ink-3); }
.task-row .title { font-weight: 600; font-size: .92rem; }
.task-row .sub { font-size: .8rem; color: var(--ink-3); }
.st { font-size: .72rem; font-weight: 700; border-radius: 99px; padding: 2px 9px; white-space: nowrap; }
.st-offen { background: #eee; color: #555; } .st-pausiert { background: #e0e7ff; color: #3730a3; } .st-laeuft { background: var(--gold-100); color: var(--gold-800); } .st-wartet_chef { background: #fde2e2; color: var(--red); }
.st-erledigt { background: #dcfce7; color: var(--green); } .st-fehler { background: #fde2e2; color: var(--red); } .st-pruefen { background: #e0e7ff; color: #3730a3; }
.st-in_pruefung { background: var(--gold-100); color: var(--gold-800); } .st-wartet_kosten { background: #ffedd5; color: #9a3412; } .st-geaendert { background: var(--gold-100); color: var(--gold-800); } .st-umgesetzt { background: #dcfce7; color: var(--green); } .st-abgelehnt { background: #fde2e2; color: var(--red); }
.tree { margin-left: 14px; border-left: 2px solid var(--line); padding-left: 10px; }
.steps { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0; }
.step { font-size: .72rem; padding: 3px 9px; border-radius: 99px; background: #eee; color: #666; border: 1px solid transparent; }
.step.genehmigt { background: #dcfce7; color: var(--green); } .step.offen { background: var(--gold-100); color: var(--gold-800); border-color: var(--gold-400); } .step.abgelehnt { background: #fde2e2; color: var(--red); }
.md h1, .md h2, .md h3 { margin-top: 1em; } .md ul, .md ol { padding-left: 20px; } .md p { margin: .5em 0; } .md img { max-width: 100%; border-radius: 8px; }
.inbox-item { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: start; }
.inbox-item .avatar { width: 56px; height: 56px; }
.q { font-style: italic; color: var(--ink-2); }
.feedback-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Media / KIs / Matrix */
.media-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.media-item { background: var(--raised); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.media-item .thumb { height: 120px; background: var(--p-50); display: grid; place-items: center; font-size: 2.2rem; overflow: hidden; }
.media-item img, .media-item video { width: 100%; height: 100%; object-fit: cover; }
.media-item .info { padding: 8px 10px; font-size: .78rem; } .media-item .info b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop { border: 2px dashed var(--p-200); border-radius: var(--radius); padding: 18px; text-align: center; color: var(--ink-3); background: var(--p-50); }
.drop.over { border-color: var(--p-600); background: var(--p-100); }
.ai-row { display: grid; grid-template-columns: auto 1.2fr 1.4fr 1fr; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.switch { width: 44px; height: 24px; border-radius: 99px; background: #ccc; position: relative; cursor: pointer; border: 0; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .15s; }
.switch.on { background: var(--p-600); } .switch.on::after { left: 23px; }
.matrix { width: 100%; border-collapse: collapse; font-size: .82rem; } .matrix th, .matrix td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: center; } .matrix td:first-child, .matrix th:first-child { text-align: left; }
.matrix input { width: 18px; height: 18px; }
.scroll-x { overflow-x: auto; }
.kpi-row { display: flex; gap: 10px; flex-wrap: wrap; } .kpi-card { flex: 1; min-width: 140px; background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; } .kpi-card b { display: block; font-size: 1.5rem; font-family: var(--display); color: var(--p-700); } .kpi-card.warn b { color: var(--red); }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 40; display: grid; place-items: center; padding: 16px; backdrop-filter: blur(2px); }
.modal-box { background: var(--raised); border-radius: 18px; width: 100%; max-width: 860px; max-height: 92vh; overflow: auto; padding: 24px; position: relative; box-shadow: 0 30px 80px -20px rgba(0,0,0,.4); }
.modal-close { position: absolute; top: 10px; right: 10px; border: 0; background: var(--surface); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1rem; z-index: 1; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .form-grid .full { grid-column: 1 / -1; }

/* Gespräch (Sprach-Chat) */
.call { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 50; display: grid; place-items: center; padding: 16px; }
.call-window { width: 100%; max-width: 720px; height: min(92vh, 780px); display: grid; grid-template-rows: auto 1fr auto auto; background: var(--surface); border-radius: 22px; overflow: hidden; box-shadow: 0 40px 120px -30px #000; }
.call-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--p-950); color: #fff; }
.call-head h2 { color: #fff; margin: 0; font-size: 1.05rem; } .call-head .muted { color: #9dd6d3; margin: 0; font-size: .8rem; }
.call-head .icon-btn.dark { color: #fff; margin-left: auto; }
.call-ring { width: 54px; height: 54px; border-radius: 50%; padding: 3px; background: conic-gradient(var(--p-400), var(--gold-400), var(--p-400)); flex: none; }
.call-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--p-100); border: 2px solid var(--p-950); display: block; }
.call-ring.speaking { animation: spin 1.2s linear infinite; box-shadow: 0 0 20px rgba(20,184,166,.7); }
.thread { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: .95rem; line-height: 1.45; position: relative; }
.msg.them { background: var(--raised); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.me { background: var(--p-700); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg .who { font-size: .7rem; font-weight: 700; opacity: .7; display: block; margin-bottom: 2px; }
.msg .play { position: absolute; right: -30px; top: 8px; border: 0; background: transparent; cursor: pointer; font-size: .9rem; opacity: .5; } .msg .play:hover { opacity: 1; }
.msg.sys { opacity: .7; font-style: italic; font-size: .85rem; }
.msg .md { font-size: .9rem; } .msg .md p:first-child { margin-top: 0; }
img.mini { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.msg.speaking { box-shadow: 0 0 0 2px var(--gold-400); }
.call-side { padding: 0 16px 8px; display: flex; gap: 8px; overflow-x: auto; }
.call-side .slide { flex: none; background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; font-size: .78rem; max-width: 260px; }
.call-side .slide h4 { margin: 0 0 3px; font-size: .72rem; color: var(--p-700); text-transform: uppercase; letter-spacing: .05em; }
.call-foot { padding: 10px 16px 14px; background: var(--raised); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.call-foot .row { flex-wrap: nowrap; } .call-foot .big-mic { flex: 1; }

.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 12px; z-index: 60; box-shadow: var(--shadow); font-size: .9rem; max-width: 92vw; text-align: center; }
.toast.err { background: var(--red); }

/* ── Mobil ── */
@media (max-width: 820px) {
  main { padding: 14px 12px 84px; }
  h1 { font-size: 1.4rem; }
  #nav, .boss { display: none; }
  .topbar { height: 50px; padding: 0 12px; gap: 10px; } .topbar-right { margin-left: auto; }
  .bottomnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: var(--raised); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; }
  .bottomnav a { display: flex; flex-direction: column; align-items: center; font-size: .62rem; color: var(--ink-3); font-weight: 600; position: relative; min-width: 56px; text-decoration: none; }
  .bottomnav a span { font-size: 1.3rem; line-height: 1.2; } .bottomnav a.active { color: var(--p-700); }
  .bottomnav .dot { position: absolute; top: 0; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-500); border: 2px solid #fff; }
  .sheet { display: flex; flex-direction: column; position: fixed; bottom: 64px; left: 10px; right: 10px; background: var(--raised); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 -10px 40px rgba(0,0,0,.2); z-index: 31; padding: 6px; }
  .sheet a { padding: 12px 14px; font-weight: 600; color: var(--ink); border-radius: 10px; } .sheet a:active { background: var(--p-50); }
  .hero { padding: 16px; border-radius: 16px; } .kpi { min-width: 70px; padding: 6px 8px; } .kpi b { font-size: 1.2rem; }
  .office { grid-template-columns: 1fr; } .desk { width: 78px; } .desk .ring { width: 56px; height: 56px; }
  .emp, .emp.leader { grid-template-columns: 64px 1fr; } .avatar, .emp.leader .avatar { width: 64px; height: 64px; }
  .form-grid, .ai-row { grid-template-columns: 1fr; }
  .task-row { grid-template-columns: 1fr auto; } .task-row .id { display: none; }
  .modal { padding: 0; align-items: end; } .modal-box { border-radius: 18px 18px 0 0; max-height: 94vh; padding: 18px 14px; }
  .call { padding: 0; } .call-window { height: 100vh; height: 100dvh; max-width: none; border-radius: 0; }
  .msg { max-width: 92%; } .msg .play { right: 4px; top: 2px; }
  .page-head .row { width: 100%; } .page-head .row .btn { flex: 1; }
}

/* ── A-038: Live-Einblendungen statt Voll-Refresh ────────────────────────── */
#toast { display: none; }
.toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column-reverse; gap: 8px; max-width: 92vw; width: max-content; pointer-events: none; }
.toast-item { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: var(--ink, #063A44); color: #fff; padding: 10px 12px 10px 18px; border-radius: 12px; box-shadow: var(--shadow); font-size: .9rem; border-left: 4px solid var(--p-500, #14B8A6); max-width: 92vw; }
.toast-item .tx { flex: 1; }
.toast-item .x { background: none; border: 0; color: inherit; opacity: .6; cursor: pointer; font-size: .85rem; padding: 2px 4px; }
.toast-item .x:hover { opacity: 1; }
.toast-item.clickable { cursor: pointer; }
.toast-item.clickable:hover { filter: brightness(1.15); }
.toast-item.err { background: var(--red, #b91c1c); border-left-color: #fecaca; }
.toast-item.ok { background: var(--p-700, #0F766E); border-left-color: var(--gold-400, #FACC15); }
.toast-item.gold { background: var(--gold-800, #854d0e); border-left-color: var(--gold-400, #FACC15); }
.toast-item.chat { background: var(--p-800, #115E59); border-left-color: var(--gold-400, #FACC15); }
.fade-in { animation: fadeIn .38s ease-out; }
.fade-out { animation: fadeOut .3s ease-in both; pointer-events: none; }
.flash { animation: flash .9s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fadeOut { to { opacity: 0; transform: translateY(4px); } }
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(20,184,166,.55); } 100% { box-shadow: 0 0 0 10px rgba(20,184,166,0); } }
.desk, .task-row, .inbox-item { transition: opacity .3s, transform .3s; }
@media (prefers-reduced-motion: reduce) { .fade-in, .fade-out, .flash { animation: none; } }
/* Handy: Stapel oberhalb der unteren Navigation, damit deren Schaltflaechen frei bleiben (z-index bewusst ueber .call) */
@media (max-width: 820px) { .toasts { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
/* Offenes "Mehr"-Menue: solange es offen ist, liegt es UEBER dem Toast-Stapel (robust gegen jede Menuehoehe) */
@media (max-width: 820px) { body:has(#more-sheet:not(.hidden)) .sheet { z-index: 61; } }

/* Benutzerverwaltung */
.user-list { display: grid; gap: 12px; }
.user-row { display: grid; grid-template-columns: 48px 1fr 1fr 170px auto; gap: 12px; align-items: end; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.user-row .avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--p-700), var(--p-500)); color: #fff; font-weight: 700; font-family: var(--display); display: grid; place-items: center; font-size: 1rem; margin-bottom: 2px; }
.user-row label { margin-bottom: 0; font-size: .75rem; } .user-row input { padding: 8px 10px; font-size: 15px; }
.user-row .meta { grid-column: 2 / -1; font-size: .78rem; color: var(--ink-3); margin-top: -4px; }
.user-row .actions { display: flex; gap: 6px; padding-bottom: 1px; }
@media (max-width: 860px) { .user-row { grid-template-columns: 48px 1fr; } .user-row .actions, .user-row .meta { grid-column: 1 / -1; } }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line, #E8E1D4); vertical-align: middle; }
.table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.table input { margin: 0; }
@media (max-width: 720px) { .table, .table thead, .table tbody, .table tr, .table td { display: block; } .table thead { display: none; } .table tr { margin-bottom: 14px; } .table td { border: 0; padding: 4px 0; } }