:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #fafbfd;
  --border: #e4e6ec;
  --border-strong: #d0d3da;
  --text: #1a1d24;
  --text-2: #5b6373;
  --text-3: #8b93a3;
  --primary: #2874bb;
  --primary-700: #16479d;
  --primary-50: #eef5fc;
  --accent: #20c1f2;
  --green: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;
  --purple: #00378c;
  --sidebar-bg: #232636;
  --sidebar-text: #d6d8e3;
  --sidebar-text-dim: #888ea3;
  --sidebar-hover: #2c3046;
  --sidebar-active: #3a3e5a;
  --shadow-sm: 0 1px 2px rgba(15,18,30,0.04), 0 1px 3px rgba(15,18,30,0.06);
  --shadow-md: 0 4px 12px rgba(15,18,30,0.08);
  --shadow-lg: 0 12px 32px rgba(15,18,30,0.12);
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  /* Spacing-Scale (4px-Basis) — für konsistente Abstände */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  /* Typografie-Scale */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --nav-w: 212px;
  --nav-w-collapsed: 64px;
  --focus-ring: 0 0 0 3px rgba(40,116,187,0.35);
  --warn-bg: #fffbeb;
  --warn-border: #fde68a;
  --warn-text: #92400e;
  --ok-bg: #d1fae5;
  --ok-text: #065f46;
  color-scheme: light;
}

/* ───────────────── Dark Mode ─────────────────
   Überschreibt nur Farb-Tokens; Layout/Spacing/Radius bleiben gleich.
   Da Haupt-CSS + 110 inline-styles bereits var(--…) nutzen, färbt das
   den Grossteil des UI automatisch um. */
[data-theme="dark"] {
  --bg: #0e1016;
  --surface: #171a22;
  --surface-2: #1e222e;
  --border: #2a2f3c;
  --border-strong: #3a4150;
  --text: #e7e9f0;
  --text-2: #a6adbe;
  --text-3: #717889;
  --primary: #4d9fe6;
  --primary-700: #368fce;
  --primary-50: #16283f;
  --accent: #38d0f0;
  --green: #34d399;
  --amber: #fbbf24;
  --red: #f87171;
  --purple: #2b6fb0;
  --sidebar-bg: #11131a;
  --sidebar-text: #c7cbd8;
  --sidebar-text-dim: #6b7282;
  --sidebar-hover: #1e2230;
  --sidebar-active: #2a3042;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.40);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.45);
  --shadow-lg: 0 14px 40px rgba(0,0,0,0.55);
  --focus-ring: 0 0 0 3px rgba(77,159,230,0.45);
  --warn-bg: #2a2614;
  --warn-border: #4a4220;
  --warn-text: #fbbf24;
  --ok-bg: #14321f;
  --ok-text: #6ee7b7;
  color-scheme: dark;
}

/* Dark-Mode: semantische Pastell-Flächen, die hardcoded sind, dezent abdunkeln */
[data-theme="dark"] .msg--internal { background: #2a2614; border-color: #4a4220; }
[data-theme="dark"] .channel-email { background: #1e2a44; color: #93b4ff; }
[data-theme="dark"] .channel-chat { background: #2a2348; color: #c4b5fd; }
[data-theme="dark"] .channel-sms,
[data-theme="dark"] .channel-whatsapp { background: #14321f; color: #6ee7b7; }
[data-theme="dark"] .channel-portal { background: #3a1f30; color: #f9a8d4; }
[data-theme="dark"] .channel-phone { background: #3b2f0b; color: #fcd34d; }
[data-theme="dark"] .channel-letter { background: #2a2d33; color: #d1d5db; }
[data-theme="dark"] .channel-formular { background: #1e2147; color: #a5b4fc; }
[data-theme="dark"] .status-open { background: #1e2a44; color: #93b4ff; }
[data-theme="dark"] .status-closed { background: #14321f; color: #6ee7b7; }
[data-theme="dark"] .status-snoozed { background: #2a2614; color: #fbbf24; }
[data-theme="dark"] .toast { background: #2a3042; }

* { box-sizing: border-box; }

/* Accessibility: sichtbarer Fokus nur bei Tastatur-Navigation (focus-visible),
   nicht bei Maus-Klick. Profi-Standard für Keyboard-Nutzer. */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { box-shadow: var(--focus-ring); }

/* Bewegung reduzieren, wenn der Nutzer das im OS eingestellt hat */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ---------- App Shell ---------- */
.app {
  display: grid;
  grid-template-columns: var(--nav-w) 280px 1fr;
  height: 100vh;
  overflow: hidden;
}
.app.detail-open { grid-template-columns: var(--nav-w) 280px 1fr 360px; }
.app.nav-collapsed { --nav-w: var(--nav-w-collapsed); }

/* Nav Sidebar — breite, gruppierte Navigation mit Labels */
.nav {
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex; flex-direction: column;
  padding: var(--space-3) var(--space-2);
  overflow: hidden;
}
.nav__brand {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-4);
  position: relative;
}
.nav__logo {
  width: 32px; height: 32px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary) 0%, var(--purple) 100%);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: var(--text-lg);
}
.nav__brand-text { font-weight: 700; font-size: var(--text-md); color: #fff; white-space: nowrap; }
.nav__collapse {
  margin-left: auto; width: 22px; height: 22px; flex-shrink: 0;
  border: none; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06); color: var(--sidebar-text-dim);
  cursor: pointer; font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
}
.nav__collapse:hover { background: var(--sidebar-hover); color: #fff; }
.nav__group { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
.nav__group::-webkit-scrollbar { width: 0; }
.nav__section {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--sidebar-text-dim);
  padding: var(--space-3) var(--space-2) var(--space-1);
  white-space: nowrap;
}
.nav__item {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; padding: 9px var(--space-2);
  border-radius: var(--radius);
  color: var(--sidebar-text);
  background: transparent; border: none;
  cursor: pointer; font-size: var(--text-base); font-weight: 500;
  position: relative; text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}
.nav__icon { font-size: var(--text-lg); width: 22px; text-align: center; flex-shrink: 0; }
.nav__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__item:hover { background: var(--sidebar-hover); color: #fff; }
.nav__item.active { background: var(--sidebar-active); color: #fff; box-shadow: inset 2px 0 0 var(--primary); }
.nav__item .badge {
  margin-left: auto;
  background: var(--red); color: white;
  font-size: 10px; padding: 1px 6px; border-radius: 10px;
  min-width: 18px; text-align: center; font-weight: 700;
}
.nav__spacer { flex: 1; }
.nav__footer {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-2) var(--space-1);
  margin-top: var(--space-2);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.nav__user {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary); color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: var(--text-base);
}
.nav__user-meta { overflow: hidden; flex: 1; }
.nav__user-name { font-size: var(--text-base); font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__user-role { font-size: 10px; color: var(--sidebar-text-dim); text-transform: capitalize; }
.nav__theme {
  flex-shrink: 0; width: 30px; height: 30px; border: none;
  border-radius: var(--radius-sm); background: rgba(255,255,255,0.06);
  color: var(--sidebar-text); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.nav__theme:hover { background: var(--sidebar-hover); }
.app.nav-collapsed .nav__theme { display: none; }

/* Sanfter Übergang beim Theme-Wechsel (nur Farben, nicht Layout) */
body, .nav, .inbox, .main, .detail, .page, .card, .modal,
.inbox-item, .msg, .btn, .table, .stat, .composer {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Collapsed nav: nur Icons */
.app.nav-collapsed .nav__brand-text,
.app.nav-collapsed .nav__label,
.app.nav-collapsed .nav__section,
.app.nav-collapsed .nav__user-meta { display: none; }
.app.nav-collapsed .nav__item { justify-content: center; gap: 0; padding: 9px; }
.app.nav-collapsed .nav__item .badge { position: absolute; top: 3px; right: 3px; margin: 0; padding: 0 4px; min-width: 14px; }
.app.nav-collapsed .nav__collapse { transform: rotate(180deg); }
.app.nav-collapsed .nav__brand { justify-content: center; }
.app.nav-collapsed .nav__footer { justify-content: center; }

/* Inbox Sidebar (second column) */
.inbox {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.inbox__header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.inbox__title { font-size: 16px; font-weight: 700; }
.inbox__search {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.inbox__search input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 13px;
  outline: none;
}
.inbox__search input:focus { border-color: var(--primary); background: var(--surface); }
.inbox__filters {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 4px;
}
.inbox__filter {
  padding: 4px 9px;
  border-radius: 12px;
  font-size: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.inbox__filter:hover { background: var(--surface-2); }
.inbox__filter.active { background: var(--primary-50); color: var(--primary); font-weight: 600; }
.inbox__list { flex: 1; overflow-y: auto; }
.inbox-item {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
}
.inbox-item:hover { background: var(--surface-2); }
.inbox-item.active { background: var(--primary-50); border-left: 3px solid var(--primary); padding-left: 11px; }
.inbox-item__row1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inbox-item__from { font-weight: 600; font-size: 13px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-item__time { font-size: 11px; color: var(--text-3); flex-shrink: 0; }
.inbox-item__subject { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-item__preview { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-item__meta { display: flex; gap: 6px; align-items: center; font-size: 11px; margin-top: 4px; }

/* Main Pane */
.main {
  background: var(--surface);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.main__header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--surface);
}
.main__title-block { flex: 1; min-width: 0; }
.main__title { font-size: 16px; font-weight: 700; margin: 0; }
.main__subtitle { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.main__actions { display: flex; gap: 6px; flex-shrink: 0; }
.main__body { flex: 1; overflow-y: auto; padding: 20px 32px; background: var(--surface-2); }

/* Detail / Side Panel */
.detail {
  background: var(--surface);
  border-left: 1px solid var(--border);
  overflow-y: auto;
}
.detail__section {
  border-bottom: 1px solid var(--border);
  padding: 14px 18px;
}
.detail__section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin: 0 0 8px;
}
.detail__row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.detail__row dt { color: var(--text-3); }
.detail__row dd { margin: 0; color: var(--text); font-weight: 500; }

/* Messages */
.msg {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.msg--internal { background: #fffbeb; border-color: #fde68a; }
.msg--system { background: transparent; border: none; box-shadow: none; padding: 6px 12px; font-size: 12px; color: var(--text-3); text-align: center; font-style: italic; }
.msg__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.msg__author { display: flex; align-items: center; gap: 10px; }
.msg__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
}
.msg__name { font-weight: 600; }
.msg__meta { font-size: 11px; color: var(--text-3); }
.msg__body { white-space: pre-wrap; word-wrap: break-word; line-height: 1.55; font-size: 14px; }
.msg__chip {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  margin-left: 8px;
}
.msg__chip--internal { background: #fde68a; color: #92400e; }
.msg__chip--incoming { background: #dbeafe; color: #1e40af; }
.msg__chip--outgoing { background: #d1fae5; color: #065f46; }

/* Composer */
.composer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin: 0 32px 20px;
  box-shadow: var(--shadow-md);
}
.composer__tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 12px;
}
.composer__tab {
  padding: 10px 14px;
  background: transparent;
  border: none;
  font-size: 13px;
  color: var(--text-2);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-weight: 500;
}
.composer__tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.composer__body textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: vertical;
  padding: 14px 16px;
  min-height: 100px;
  font-family: inherit;
  font-size: 14px;
  background: transparent;
  border-radius: var(--radius-lg);
}
.composer__footer {
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.composer__actions { display: flex; gap: 6px; }
.composer__send { display: flex; gap: 8px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s ease;
}
.btn:hover { background: var(--surface-2); border-color: var(--text-3); }
.btn--primary {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.btn--primary:hover { background: var(--primary-700); border-color: var(--primary-700); }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover { background: var(--surface-2); }
.btn--sm { padding: 4px 8px; font-size: 12px; }
.btn--danger { color: var(--red); border-color: transparent; background: transparent; }
.btn--danger:hover { background: #fef2f2; }

/* Chips & Pills */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  background: var(--surface-2);
  color: var(--text-2);
}
.chip--dot::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.priority-urgent { color: var(--red); }
.priority-high { color: var(--amber); }
.priority-normal { color: var(--text-3); }
.priority-low { color: var(--text-3); }

.tag-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}
.channel-icon {
  font-size: 10px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.channel-email { background: #dbeafe; color: #1e40af; }
.channel-chat { background: #ddd6fe; color: #5b21b6; }
.channel-sms { background: #d1fae5; color: #065f46; }
.channel-portal { background: #fce7f3; color: #9d174d; }
.channel-whatsapp { background: #dcfce7; color: #166534; }
.channel-phone { background: #fef3c7; color: #92400e; }
.channel-letter { background: #f3f4f6; color: #374151; }
.channel-formular { background: #e0e7ff; color: #3730a3; }

/* Tenant switcher (Mandanten-Filter) */
.tenant-pick {
  width: 100%; height: 36px; border-radius: var(--radius);
  background: rgba(255,255,255,0.06); color: var(--sidebar-text);
  font-size: var(--text-base); font-weight: 600; cursor: pointer; border: none;
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-2); margin-bottom: var(--space-2);
  transition: background 0.12s ease;
}
.tenant-pick:hover { background: rgba(255,255,255,0.12); color: #fff; }
.tenant-pick__icon { font-size: 14px; flex-shrink: 0; }
.tenant-pick__name { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tenant-pick__caret { font-size: 10px; color: var(--sidebar-text-dim); flex-shrink: 0; }
.app.nav-collapsed .tenant-pick__name, .app.nav-collapsed .tenant-pick__caret { display: none; }
.app.nav-collapsed .tenant-pick { justify-content: center; padding: 0; }

/* Calendar grid */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell { background: var(--surface); min-height: 90px; padding: 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; display: flex; flex-direction: column; }
.cal-cell--other { opacity: 0.4; }
.cal-cell--today { border-color: var(--primary); background: var(--primary-50); }
.cal-cell__day { font-weight: 600; color: var(--text-2); margin-bottom: 4px; font-size: 12px; }
.cal-cell__events { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-event { background: linear-gradient(90deg, var(--primary), var(--purple)); color: white; padding: 2px 6px; border-radius: 3px; font-size: 11px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event--besichtigung { background: linear-gradient(90deg, #06b6d4, #0284c7); }
.cal-event--handwerker { background: linear-gradient(90deg, #f59e0b, #d97706); }
.cal-event--uebergabe { background: linear-gradient(90deg, #8b5cf6, #6d28d9); }
.cal-event--meeting { background: linear-gradient(90deg, #10b981, #059669); }
.cal-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 11px; color: var(--text-3); text-transform: uppercase; font-weight: 600; padding: 8px 6px; }
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-toolbar h2 { margin: 0; font-size: 18px; }

/* Photo preview in widget */
.fi-photo-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; background: var(--surface); border: 1px solid #e4e6ec;
  border-radius: 6px; cursor: pointer; font-size: 16px;
}
.fi-photo-btn:hover { background: #fafbfd; }
.fi-photo-preview {
  margin-bottom: 6px; padding: 6px; background: #fafbfd; border-radius: 6px;
  display: flex; align-items: center; gap: 8px;
}
.fi-photo-preview img { max-width: 60px; max-height: 60px; border-radius: 4px; }
.fi-photo-preview button {
  margin-left: auto; background: transparent; border: none; color: #ef4444;
  cursor: pointer; font-size: 13px;
}
.fi-msg img { max-width: 200px; max-height: 200px; border-radius: 6px; margin-top: 6px; cursor: pointer; }

/* Lang tabs in article editor */
.lang-tabs { display: flex; gap: 4px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.lang-tab { padding: 6px 12px; border: none; background: transparent; color: var(--text-2); cursor: pointer; font-size: 13px; border-bottom: 2px solid transparent; }
.lang-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* AI suggestion banner */
.ai-banner {
  margin-top: 10px; padding: 10px 14px; background: linear-gradient(135deg, #efeefe 0%, #ddd6fe 100%);
  border-left: 4px solid var(--primary); border-radius: 6px;
  font-size: 13px; display: flex; align-items: center; gap: 10px;
}
.ai-banner__icon { font-size: 18px; }
.ai-banner__body { flex: 1; }
.ai-banner__chip { background: var(--surface); padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; color: var(--primary); }

/* Property context sidebar */
.ctx-section { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
.ctx-section h5 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); font-weight: 700; }
.ctx-history-item { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; }
.ctx-history-item__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.ctx-history-item__meta { color: var(--text-3); font-size: 11px; margin-left: 6px; flex-shrink: 0; }

.avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: white;
}

/* Settings-Tabs */
.settings-tabs {
  display: flex; gap: var(--space-1); flex-wrap: wrap;
  padding: var(--space-2) var(--space-5) 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.settings-tab {
  padding: var(--space-2) var(--space-4);
  border: none; background: transparent;
  color: var(--text-2); font-size: var(--text-base); font-weight: 500;
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}
.settings-tab:hover { color: var(--text); }
.settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* Generic page layouts (KB, Contacts, Properties, Tickets, Rules, Templates, Settings, Analytics) */
.page {
  display: flex; flex-direction: column;
  overflow: hidden;
  /* main-viewport ist display:contents → .page ist direktes Grid-Item.
     Volle Breite von Spalte 2 (neben der Nav) bis zum Ende. */
  grid-column: 2 / -1;
  min-width: 0;
}
.page__header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex; align-items: center; justify-content: space-between;
}
.page__title { font-size: 18px; font-weight: 700; margin: 0; }
.page__subtitle { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.page__body { flex: 1; overflow-y: auto; padding: 24px; background: var(--surface-2); }

/* Cards / tables */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 12px; }
.card__title { font-size: 14px; font-weight: 600; margin: 0 0 12px; }

.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.grid--2 { grid-template-columns: 1fr 1fr; }
.grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.grid--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.table th, .table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.table th { background: var(--surface-2); font-weight: 600; color: var(--text-2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover { background: var(--surface-2); }

/* Stat cards */
.stat {
  background: var(--surface);
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.stat__value { font-size: 28px; font-weight: 700; margin: 0; line-height: 1.1; }
.stat__label { font-size: 12px; color: var(--text-3); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.stat__trend { font-size: 12px; margin-top: 6px; color: var(--green); }

/* Articles */
.article-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.article-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.article-card__title { font-weight: 600; margin: 0 0 6px; font-size: 15px; }
.article-card__excerpt { font-size: 13px; color: var(--text-2); margin: 0 0 10px; line-height: 1.5; }
.article-card__meta { display: flex; gap: 12px; font-size: 12px; color: var(--text-3); }

/* Article editor */
.article-edit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.article-edit textarea {
  width: 100%; min-height: 60vh;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  resize: vertical;
}
.article-preview {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  min-height: 60vh;
  overflow-y: auto;
}

/* Markdown rendering */
.md h1 { font-size: 24px; margin: 0 0 16px; font-weight: 700; }
.md h2 { font-size: 19px; margin: 24px 0 12px; font-weight: 700; }
.md h3 { font-size: 16px; margin: 18px 0 10px; font-weight: 600; }
.md p { margin: 0 0 12px; line-height: 1.65; }
.md ul, .md ol { margin: 0 0 14px; padding-left: 22px; }
.md li { margin-bottom: 6px; line-height: 1.5; }
.md code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.md blockquote { border-left: 3px solid var(--primary); padding: 4px 14px; margin: 12px 0; color: var(--text-2); background: var(--surface-2); border-radius: 0 6px 6px 0; }
.md strong { font-weight: 700; }

/* Modals */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 18, 30, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal--lg { max-width: 760px; }
.modal__header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal__title { font-size: 16px; font-weight: 700; margin: 0; }
.modal__body { padding: 20px; overflow-y: auto; flex: 1; }
.modal__footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px;
  background: var(--surface-2);
}

/* Forms */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); }
.field--row { display: flex; gap: 8px; }
.field--row > * { flex: 1; }
.field textarea { resize: vertical; min-height: 80px; }

/* Bar chart */
.bar-chart {
  display: flex; align-items: flex-end; gap: 4px;
  height: 100px;
  padding: 0 4px;
}
.bar-chart__bar {
  flex: 1;
  background: linear-gradient(180deg, var(--primary), var(--purple));
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  position: relative;
  transition: opacity 0.15s ease;
}
.bar-chart__bar:hover { opacity: 0.7; }
.bar-chart__bar::after {
  content: attr(data-label);
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--text-3);
  white-space: nowrap;
}

/* Toasts */
.toast-host { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 2000; }
.toast {
  background: #1a1d24;
  color: white;
  padding: 10px 16px;
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  animation: toast-in 0.18s ease;
}
.toast--success { background: var(--green); }
.toast--error { background: var(--red); }
@keyframes toast-in {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Empty states */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-3);
}
.empty__icon { font-size: 40px; margin-bottom: 12px; opacity: 0.85; }
.empty__title { font-size: 16px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.empty__msg { font-size: 13px; max-width: 320px; line-height: 1.5; }
.empty__cta { margin-top: 16px; }

/* Skeleton-Loading */
.skeleton-list { padding: 4px 0; }
.skeleton-item { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.skeleton-line { height: 11px; border-radius: 5px; margin-bottom: 7px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: skeleton-shimmer 1.3s ease-in-out infinite; }
.skeleton-line--sm { height: 9px; margin-bottom: 0; opacity: 0.7; }
@keyframes skeleton-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.hidden { display: none !important; }

/* SLA dot */
.sla-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}
.sla-due { background: var(--amber); }
.sla-overdue { background: var(--red); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ════════════════════ Micro-Interactions ════════════════════
   Taktiles Feedback, sanfte Übergänge, Tiefe. Reine CSS — keine
   Logik-Änderung. Respektiert prefers-reduced-motion (oben global). */

/* Buttons: weiches Drücken + sanfter Hover */
.btn { transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.08s ease, box-shadow 0.14s ease; }
.btn:active { transform: scale(0.97); }
.btn--primary:hover { box-shadow: 0 2px 8px rgba(90,78,229,0.30); }

/* Karten heben sich leicht beim Hover (Tiefe) */
.card, .stat { transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.2s ease, border-color 0.2s ease; }
.card:hover, .stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.article-card, .doc-card, .obj-card { transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; }

/* Inbox-Items: sanfter Hover + aktiver Rand wächst weich ein */
.inbox-item { transition: background 0.13s ease, border-color 0.13s ease, padding-left 0.13s ease; }

/* Nav-Items: Icon rückt beim Hover minimal ein (lebendiger) */
.nav__item { transition: background 0.12s ease, color 0.12s ease, padding-left 0.12s ease; }
.nav__item:hover:not(.active) { padding-left: calc(var(--space-2) + 3px); }

/* Modal: weiches Einblenden statt hartem Pop */
.modal { animation: modal-in 0.18s cubic-bezier(0.2, 0.7, 0.3, 1); }
.modal-backdrop { animation: backdrop-in 0.16s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }

/* Toasts: rein-sliden, kurz halten, sanft raus (JS triggert .toast--out) */
.toast { animation: toast-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.toast--out { animation: toast-out 0.22s ease forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* Chips/Tags: dezenter Hover wenn klickbar */
.tag-pill, .chip { transition: filter 0.12s ease, transform 0.1s ease; }

/* Status-Punkt „überfällig": dezenter Puls als Aufmerksamkeits-Signal */
.sla-overdue { animation: sla-pulse 2s ease-in-out infinite; }
@keyframes sla-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.45); } 50% { box-shadow: 0 0 0 4px rgba(239,68,68,0); } }

/* Avatar: gemeinsame Übergänge + subtiler Ring */
.avatar, .msg__avatar { transition: transform 0.12s ease; }
.inbox-item:hover .avatar { transform: scale(1.05); }

/* Mobile-Zurück-Button: nur auf schmalen Screens sichtbar */
.mobile-back { display: none; }

/* ════════════════════ Responsive ════════════════════ */

/* Tablet / kleiner Desktop: Navigation auf Icons reduzieren → mehr Platz */
@media (max-width: 1024px) {
  .app { --nav-w: var(--nav-w-collapsed); }
  .app.detail-open { grid-template-columns: var(--nav-w) 280px 1fr 320px; }
  .nav__label, .nav__section, .nav__brand-text, .nav__user-meta,
  .nav__theme, .nav__collapse, .tenant-pick__name, .tenant-pick__caret { display: none; }
  .nav__item { justify-content: center; gap: 0; padding: 9px; }
  .nav__item:hover:not(.active) { padding-left: 9px; }
  .nav__item .badge { position: absolute; top: 3px; right: 3px; margin: 0; padding: 0 4px; min-width: 14px; }
  .nav__brand, .nav__footer { justify-content: center; }
  .tenant-pick { justify-content: center; padding: 0; }
}

/* Tablet hochkant: Detail-Panel weg (Desktop-Feature), Inbox + Konversation bleiben */
@media (max-width: 860px) {
  .app, .app.detail-open { grid-template-columns: var(--nav-w-collapsed) 280px 1fr; }
  .app .detail { display: none; }
}

/* Handy: Master-Detail — entweder Liste ODER Konversation (Zurück-Button) */
@media (max-width: 640px) {
  .app, .app.detail-open { grid-template-columns: 52px 1fr; }
  .nav { padding: var(--space-2) 6px; }
  .inbox { grid-column: 2; }
  .main {
    position: fixed; top: 0; left: 52px; right: 0; bottom: 0; z-index: 50;
    transform: translateX(100%); transition: transform 0.22s ease; background: var(--surface);
  }
  .app.conv-open .main { transform: none; }
  .mobile-back { display: inline-flex; }
  /* page-views (grid-column 2/-1) füllen automatisch die content-Spalte */
  .page__body { padding: var(--space-4); }
  .modal { max-width: 94vw; }
}