:root {
  --ink: #19232d;
  --muted: #6e7a86;
  --line: #e6e9ed;
  --paper: #f7f8fa;
  --card: #ffffff;
  --navy: #1d3349;
  --blue: #2878b5;
  --blue-soft: #edf6fc;
  --teal: #1c8b7b;
  --teal-soft: #eaf7f4;
  --amber: #a76a16;
  --amber-soft: #fff5e4;
  --red: #b04e4e;
  --shadow: 0 10px 30px rgba(35, 51, 70, 0.06);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.quick-voice-button { position: fixed; z-index: 8; right: 18px; bottom: 24px; display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 13px; border: 1px solid #236f9f; border-radius: 24px; color: #fff; background: #277eaf; box-shadow: 0 8px 24px rgba(24, 78, 111, .25); touch-action: none; user-select: none; }.quick-voice-button:hover, .quick-voice-button:focus-visible { background: #1f6d9a; outline: 3px solid rgba(39, 126, 175, .22); outline-offset: 2px; }.quick-voice-button.is-recording { border-color: #a94141; background: #b94c4c; box-shadow: 0 8px 28px rgba(143, 47, 47, .3); }.quick-voice-icon { display: grid; place-items: center; width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 50%; font-size: 9px; line-height: 1; }.quick-voice-status { position: fixed; z-index: 8; right: 18px; bottom: 78px; max-width: 210px; padding: 6px 9px; border: 1px solid #d7e5ec; border-radius: 6px; color: #385164; background: rgba(255,255,255,.96); box-shadow: 0 4px 14px rgba(28, 55, 72, .12); font-size: 10px; opacity: 0; pointer-events: none; transition: opacity .18s ease; }.quick-voice-status.visible { opacity: 1; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 248px; flex: 0 0 248px; display: flex; flex-direction: column; background: var(--navy); color: #dce7ef; padding: 27px 18px 20px; }
.brand { display: flex; gap: 11px; align-items: center; margin: 0 12px 26px; }
.brand-mark { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: white; font-weight: 800; background: linear-gradient(145deg, #54b2c7, #2878b5); box-shadow: 0 5px 14px rgba(14, 125, 174, .25); }
.brand strong { display: block; color: #fff; font-size: 15px; letter-spacing: .02em; }
.brand span { display: block; margin-top: 2px; color: #99afc0; font-size: 11px; }
.environment-badge { margin: 0 7px 25px; padding: 8px 10px; border: 1px solid rgba(157, 209, 223, .2); border-radius: 8px; color: #b5e1da; background: rgba(20, 133, 126, .14); font-size: 11px; font-weight: 650; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: #54c6a2; box-shadow: 0 0 0 3px rgba(84, 198, 162, .13); }
.nav-list { display: grid; gap: 5px; }
.nav-item { display: flex; gap: 12px; align-items: center; width: 100%; border: 0; border-radius: 8px; padding: 11px 12px; color: #aabcca; background: transparent; text-align: left; font-size: 13px; }
.nav-item span { width: 16px; color: #82a2b8; font-size: 16px; text-align: center; }
.nav-item:hover, .nav-item.active { color: #fff; background: rgba(255,255,255,.09); }
.nav-item.active span { color: #7dd3d2; }
.sidebar-footer { margin-top: auto; padding: 18px 7px 0; border-top: 1px solid rgba(255,255,255,.09); }
.tenant-label, .section-kicker, .eyebrow { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sidebar .tenant-label { color: #849bad; margin-bottom: 8px; }
.tenant-select { width: 100%; border: 1px solid #38536a; border-radius: 7px; padding: 9px 10px; color: #e7f0f6; background: #29465d; outline: none; }
.tenant-note { margin: 9px 2px 0; color: #849bad; font-size: 10px; line-height: 1.45; }
.main-content { min-width: 0; width: 100%; max-width: 1440px; margin: 0 auto; padding: 32px 48px 60px; }
.topbar { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 25px; }
.eyebrow { margin: 0 0 7px; color: var(--blue); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 27px; letter-spacing: -.025em; }
h2 { margin: 5px 0 0; font-size: 17px; letter-spacing: -.01em; }
h3 { margin: 9px 0 7px; font-size: 16px; }
.topbar-actions { display: flex; align-items: center; gap: 20px; padding-top: 10px; }
.sync-label { color: var(--muted); font-size: 11px; }
.icon-button { width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: var(--card); font-weight: 700; }
.global-notice { display: flex; gap: 11px; align-items: center; padding: 11px 14px; margin-bottom: 22px; border: 1px solid #f1dfb9; border-radius: 8px; color: #7c5a27; background: var(--amber-soft); font-size: 12px; line-height: 1.4; }
.global-notice.api-connected { border-color: #c9e8df; color: #23695d; background: var(--teal-soft); }
.notice-icon { display: grid; place-items: center; flex: 0 0 17px; width: 17px; height: 17px; border-radius: 50%; color: #fff; background: #c38a36; font-weight: 800; font-size: 11px; }
.context-bar { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 16px 18px; margin-bottom: 16px; border: 1px solid #d8e7ef; border-radius: 10px; background: linear-gradient(90deg, #f2f9fc, #fff); }
.context-bar strong { display: inline-block; margin: 0 9px 0 10px; font-size: 16px; }
.context-bar #context-description { color: var(--muted); font-size: 12px; }
.context-lock { padding: 5px 9px; border-radius: 5px; color: var(--teal); background: var(--teal-soft); font-size: 10px; font-weight: 700; white-space: nowrap; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 19px; }
.metric-card, .panel { border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: var(--shadow); }
.metric-card { padding: 17px 18px; }
.metric-label { display: block; margin-bottom: 9px; color: var(--muted); font-size: 11px; }
.metric-card strong { display: block; font-size: 27px; letter-spacing: -.04em; }
.metric-foot { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; }
.metric-foot.positive { color: var(--teal); }.metric-foot.warning { color: var(--amber); }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .9fr); gap: 17px; }
.panel { padding: 21px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 17px; }
.text-button { border: 0; padding: 3px 0; color: var(--blue); background: transparent; font-size: 11px; font-weight: 750; }
.case-list, .source-list, .audit-list { display: grid; gap: 9px; }
.panel-heading-actions { display: flex; align-items: flex-end; gap: 13px; }
.case-filters { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; }
.case-filters select { min-width: 92px; padding: 5px 6px; border: 1px solid #dce5e9; border-radius: 5px; color: var(--ink); background: #fff; font-size: 10px; }
.filter-count { margin: -4px 0 10px; color: var(--muted); font-size: 10px; }
.readiness-gates { margin-top: 14px; padding: 10px 11px; border: 1px solid #f0e3c2; border-radius: 7px; color: #785b16; background: #fffaf0; font-size: 10px; }.readiness-gates strong { font-size: 10px; }.readiness-gates ul { margin: 6px 0 0 16px; padding: 0; }.readiness-gates li { margin: 3px 0; }
.empty-state { padding: 16px 12px; border: 1px dashed #d9e1e6; border-radius: 7px; color: var(--muted); background: #fafcfd; font-size: 11px; }
.case-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 10px; border: 1px solid #edf0f2; border-radius: 7px; }
.case-priority { width: 7px; height: 32px; border-radius: 4px; background: #9bc5da; }.case-priority.high { background: #d79452; }.case-priority.medium { background: #70b6b2; }
.case-title { display: block; margin-bottom: 3px; color: var(--ink); font-size: 12px; font-weight: 750; }.case-meta { color: var(--muted); font-size: 10px; }
.case-status { padding: 4px 7px; border-radius: 5px; color: var(--blue); background: var(--blue-soft); font-size: 10px; font-weight: 700; white-space: nowrap; }
.system-list { display: grid; gap: 0; }.system-list div { display: flex; justify-content: space-between; gap: 8px; padding: 11px 0; border-bottom: 1px solid #f0f1f3; color: var(--muted); font-size: 11px; }.system-list div:last-child { border-bottom: 0; }.system-list strong { font-size: 10px; }.online { color: var(--teal); }.disabled { color: var(--muted); }
.panel-divider { height: 1px; margin: 13px 0 17px; background: var(--line); }.next-step p { max-width: 280px; margin: 6px 0 14px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.primary-button, .secondary-button { border-radius: 6px; padding: 9px 13px; font-size: 11px; font-weight: 750; }.primary-button { border: 1px solid var(--blue); color: #fff; background: var(--blue); box-shadow: 0 4px 10px rgba(40, 120, 181, .18); }.primary-button:disabled { cursor: wait; border-color: #9bbdd4; color: #eaf3f8; background: #9bbdd4; box-shadow: none; }.secondary-button { border: 1px solid #d8dee4; color: var(--ink); background: #fff; }.secondary-button:disabled { cursor: not-allowed; color: #aab2bb; background: #f6f7f8; }
.status-pill { padding: 5px 8px; border-radius: 5px; font-size: 10px; font-weight: 750; }.status-pill.ready { color: var(--teal); background: var(--teal-soft); }.error-pill { color: var(--red); background: #fbeeee; }.disabled-pill { color: var(--muted); background: #f0f2f4; }
.hidden { display: none !important; }.page-intro { margin: 4px 0 22px; }.page-intro h2 { margin: 5px 0 6px; font-size: 24px; }.page-intro p { margin-bottom: 0; color: var(--muted); font-size: 12px; }.chat-context-row { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }.chat-context-row h2 { margin-bottom: 0; }
.chat-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, .7fr); gap: 17px; }.chat-panel { padding-bottom: 14px; }.chat-messages { min-height: 360px; max-height: 470px; overflow-y: auto; padding: 3px 0 15px; }.message { max-width: 80%; margin-bottom: 14px; padding: 12px 14px; border-radius: 9px; font-size: 12px; line-height: 1.5; }.message.agent { border: 1px solid #e0ebf1; border-top-left-radius: 3px; color: #385164; background: #f3f8fb; }.message.user { margin-left: auto; border-top-right-radius: 3px; color: #fff; background: var(--navy); }.message-meta { display: block; margin-bottom: 5px; color: var(--muted); font-size: 9px; font-weight: 750; }.message.user .message-meta { color: #aec0cf; }.message-action { margin-top: 10px; padding: 9px; border: 1px solid #d3e3ec; border-radius: 6px; background: #fff; }.message-action strong { display: block; margin-bottom: 4px; font-size: 11px; }.message-action span { color: var(--muted); font-size: 10px; }
.suggestion-row { display: flex; gap: 7px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line); }.suggestion { border: 1px solid #dce5eb; border-radius: 14px; padding: 7px 10px; color: var(--blue); background: #fff; font-size: 10px; }.suggestion:hover { border-color: var(--blue); background: var(--blue-soft); }.chat-form { display: flex; gap: 8px; }.chat-form input { width: 100%; border: 1px solid #d6dfe5; border-radius: 7px; padding: 11px 12px; color: var(--ink); outline: none; font-size: 12px; }.chat-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(40,120,181,.1); }.send-button { width: 40px; border: 0; border-radius: 7px; color: #fff; background: var(--blue); font-size: 17px; }.form-hint { margin: 8px 2px 0; color: var(--muted); font-size: 9px; }.action-guard h3 { margin: 7px 0 17px; }.guard-step { display: flex; gap: 10px; align-items: center; margin: 13px 0; }.guard-step span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: var(--blue); background: var(--blue-soft); font-size: 10px; font-weight: 800; }.guard-step p { margin: 0; color: var(--muted); font-size: 11px; }.draft-box { display: flex; gap: 10px; margin-top: 22px; padding: 11px; border: 1px solid #f1dfb9; border-radius: 7px; background: var(--amber-soft); }.draft-icon { color: var(--amber); font-size: 19px; }.draft-only-label { display: inline-block; margin-bottom: 5px; padding: 3px 5px; border-radius: 4px; color: var(--amber); background: #ffedc8; font-size: 8px; font-weight: 850; letter-spacing: .09em; }.draft-box strong { display: block; color: #815d2a; font-size: 11px; }.draft-box p { margin: 3px 0 0; color: #987445; font-size: 10px; line-height: 1.4; }
.source-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 13px 11px; border: 1px solid #edf0f2; border-radius: 7px; }.source-title { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 750; }.source-meta { color: var(--muted); font-size: 10px; }.immutable-badge { padding: 4px 7px; border-radius: 4px; color: var(--teal); background: var(--teal-soft); font-size: 9px; font-weight: 800; white-space: nowrap; }.detail-button { border: 1px solid #d8e5ec; border-radius: 5px; padding: 5px 7px; color: var(--blue); background: #fff; font-size: 9px; font-weight: 750; white-space: nowrap; }.detail-button:hover { border-color: var(--blue); background: var(--blue-soft); }.audit-row { padding: 11px 0; border-bottom: 1px solid #edf0f2; }.audit-row:last-child { border-bottom: 0; }.audit-row strong { display: block; margin-bottom: 3px; font-size: 11px; }.audit-row span { color: var(--muted); font-size: 10px; }.audit-tag { float: right; padding: 3px 5px; border-radius: 4px; color: var(--blue); background: var(--blue-soft); font-size: 9px; font-weight: 750; }
.voice-state-panel { margin-bottom: 17px; }.voice-state-strip { display: flex; gap: 7px; flex-wrap: wrap; margin: 4px 0 16px; }.voice-state { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid #e0e7ea; border-radius: 6px; color: var(--muted); background: #fafbfb; font-size: 10px; }.voice-state b { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #83949e; background: #e9eef1; font-size: 9px; }.voice-state.active { border-color: #b8ded7; color: var(--teal); background: var(--teal-soft); }.voice-state.active b { color: #fff; background: var(--teal); }.transcript-preview { padding: 12px 13px; border: 1px solid #dce8ee; border-radius: 7px; background: #f5f9fb; }.transcript-preview p { margin: 5px 0 5px; color: #385164; font-size: 12px; font-style: italic; }.transcript-note { color: var(--muted); font-size: 10px; }.voice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }.voice-card { min-height: 290px; text-align: center; }.voice-card h3 { margin-top: 16px; }.voice-card p { max-width: 380px; margin: 0 auto 17px; color: var(--muted); font-size: 12px; line-height: 1.55; }.voice-card small { display: block; margin-top: 13px; color: var(--muted); font-size: 10px; }.voice-orb { display: grid; place-items: center; width: 74px; height: 74px; margin: 3px auto 17px; border: 1px solid #c7e5e5; border-radius: 50%; color: #6ab7b4; background: #f0fbfa; font-size: 29px; }.voice-wave { height: 74px; display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 17px; }.voice-wave i { display: block; width: 6px; height: 23px; border-radius: 4px; background: #abd8d5; }.voice-wave i:nth-child(2), .voice-wave i:nth-child(6) { height: 36px; }.voice-wave i:nth-child(3), .voice-wave i:nth-child(5) { height: 51px; }.voice-wave i:nth-child(4) { height: 65px; background: #75bcb9; }
.modal-root { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; }.modal-backdrop { position: absolute; inset: 0; background: rgba(17, 34, 48, .48); backdrop-filter: blur(2px); }.modal { position: relative; width: min(460px, 100%); padding: 25px; border-radius: 12px; background: #fff; box-shadow: 0 25px 70px rgba(0,0,0,.2); }.modal h2 { margin: 7px 0 9px; font-size: 20px; }.modal > p { color: var(--muted); font-size: 12px; line-height: 1.5; }.modal-close { position: absolute; top: 13px; right: 14px; border: 0; color: var(--muted); background: transparent; font-size: 22px; }.modal-preview { margin: 17px 0; padding: 13px; border: 1px solid #dce8ee; border-radius: 7px; color: #3e596a; background: #f5f9fb; font-size: 11px; line-height: 1.55; white-space: pre-line; }.detail-content { display: grid; gap: 8px; margin: 17px 0; }.detail-field { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; padding: 9px 10px; border: 1px solid #edf0f2; border-radius: 6px; background: #fafcfd; font-size: 11px; }.detail-field span { color: var(--muted); }.detail-field strong { overflow-wrap: anywhere; font-weight: 650; }.modal-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 5px; }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.voice-chat-modal { width: min(680px, 100%); }.voice-chat-feed { display: grid; gap: 9px; max-height: 330px; margin: 17px 0 12px; padding: 10px; overflow: auto; border: 1px solid #dce8ee; border-radius: 8px; background: #f7fafc; }.voice-chat-feed:empty::before { content: "Noch kein Gespräch in diesem Fenster."; color: var(--muted); font-size: 12px; }.voice-chat-feed .message { max-width: 92%; }.voice-chat-form { margin-top: 9px; }
@media (max-width: 900px) { .sidebar { width: 205px; flex-basis: 205px; }.main-content { padding: 27px 28px 50px; }.metric-grid { grid-template-columns: repeat(2, 1fr); }.content-grid, .chat-layout { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .quick-voice-button { right: 12px; bottom: 16px; min-width: 46px; width: 46px; padding: 0; justify-content: center; }.quick-voice-label { display: none; }.quick-voice-status { right: 12px; bottom: 68px; max-width: 170px; }.app-shell { display: block; }.sidebar { width: 100%; padding: 17px 15px; }.brand { margin-bottom: 15px; }.environment-badge { margin-bottom: 12px; }.nav-list { grid-template-columns: repeat(4, 1fr); }.nav-item { justify-content: center; padding: 8px 4px; font-size: 10px; }.nav-item span { display: none; }.sidebar-footer { display: none; }.main-content { padding: 24px 15px 40px; }.topbar { margin-bottom: 17px; }.topbar-actions { gap: 8px; }.sync-label { display: none; }.context-bar { align-items: flex-start; flex-direction: column; }.context-bar #context-description { display: block; margin-top: 5px; }.metric-grid, .voice-grid { grid-template-columns: 1fr; }.metric-card { padding: 14px; }.panel { padding: 16px; }.panel-heading-actions { align-items: flex-start; flex-direction: column; gap: 8px; }.case-filters { flex-wrap: wrap; }.case-row, .source-row { grid-template-columns: 7px minmax(0, 1fr); }.source-row { grid-template-columns: minmax(0, 1fr) auto; }.case-status, .detail-button { grid-column: 2; justify-self: start; }.source-row .detail-button { grid-column: 2; grid-row: 2; }.message { max-width: 93%; } }