/* Findling — dark, functional, mobile-first */
:root {
  --bg: #0d1117;
  --bg2: #161b22;
  --bg3: #21262d;
  --border: #30363d;
  --text: #e6edf3;
  --text-dim: #8b949e;
  --accent: #58a6ff;
  --accent-bg: #1f3a5f;
  /* --accent-solid: kräftiges Blau, auf dem WEISSER Text in BEIDEN Themes
     sicher lesbar ist. Für gefüllte Badges/Pills nutzen — NICHT das helle
     --accent (auf dem Weiß im Dark-Mode fast verschwindet). */
  --accent-solid: #1f6feb;
  --on-accent: #ffffff;
  --danger: #f85149;
  --ok: #3fb950;
  --warn: #d29922;
  --radius: 8px;
  --tap: 44px;

  /* ---- Motion-Guide (Apple-like) -----------------------------------------
     Zentrale Bewegungssprache: überall dieselben Kurven & Dauern verwenden,
     nie hart-kodierte Werte. --ease-spring gibt den leichten Overshoot, der
     sich „lebendig" anfühlt; --ease-out für schnelle, ruhige Übergänge. */
  --motion-fast: .15s;
  --motion: .24s;
  --motion-slow: .38s;
  --ease-out: cubic-bezier(.32, .72, 0, 1);      /* ruhiges Ausklingen */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* sanfter Overshoot */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}
/* Barrierefreiheit: wer „Bewegung reduzieren" gewählt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}
/* Light theme — activated via <html data-theme="light"> (auto-follows system,
   per-user override in settings) */
:root[data-theme="light"] {
  --bg: #f6f8fa;
  --bg2: #ffffff;
  --bg3: #eef1f4;
  --border: #d0d7de;
  --text: #1f2328;
  --text-dim: #57606a;
  --accent: #0969da;
  --accent-bg: #ddf4ff;
  --danger: #cf222e;
  --ok: #1a7f37;
  --warn: #9a6700;
  --accent-solid: #0969da;
  --on-accent: #ffffff;
}
:root[data-theme="light"] .overlay { background: rgba(31, 35, 40, .45); }
:root[data-theme="light"] .prio-Low { background: #eef1f4; color: #57606a; }
:root[data-theme="light"] .prio-Med { background: #ddf4ff; color: #0969da; }
:root[data-theme="light"] .prio-High { background: #fff1e5; color: #bc4c00; }
:root[data-theme="light"] .prio-Urgent { background: #ffebe9; color: #cf222e; }
:root[data-theme="light"] .btn.primary { background: #0969da; border-color: #0969da; }
:root[data-theme="light"] .btn.primary:hover { background: #0a7cff; }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow-x: hidden; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}
/* While an overlay (ticket, quick-add, lightbox) is open, the page behind
   must not scroll at all — otherwise swipes chain through to the kanban. */
body.no-scroll { overflow: hidden; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--bg3);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 9px 12px; min-height: var(--tap); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
textarea { min-height: 80px; resize: vertical; }
a { color: var(--accent); }

/* Inline SVG icons */
.icon { width: 14px; height: 14px; vertical-align: -2px; flex: 0 0 auto; display: inline-block; }
.btn .icon, .dropdown .icon { width: 16px; height: 16px; vertical-align: -3px; }
.dash-section h2 .icon { width: 15px; height: 15px; }
.meta-ic { display: inline-flex; align-items: center; gap: 3px; }
.via-ai { color: var(--accent); }
.ooo-badge .icon { width: 12px; height: 12px; color: var(--warn); }
.blocked-flag { display: inline-flex; align-items: center; gap: 3px; }
.due { display: inline-flex; align-items: center; gap: 3px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); padding: 8px 14px; border-radius: var(--radius);
  background: var(--bg3); border: 1px solid var(--border); white-space: nowrap;
}
.btn {
  transition: background var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-spring),
              color var(--motion-fast) var(--ease-out);
}
.btn.primary { background: #1f6feb; border-color: #1f6feb; color: #fff; font-weight: 600; }
.btn.primary:hover { background: #388bfd; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn.ghost:hover { color: var(--text); background: var(--bg3); }
.btn.danger { color: var(--danger); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.96); }

/* Overlays & modals */
.overlay {
  position: fixed; inset: 0; z-index: 100; background: rgba(1,4,9,.8);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: overlay-in var(--motion) var(--ease-out);
}
.modal {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  width: 100%; max-width: 760px; max-height: 92vh; overflow-y: auto;
  overflow-x: hidden; display: flex; flex-direction: column;
  touch-action: pan-y; overscroll-behavior: contain;
  animation: modal-in var(--motion) var(--ease-spring);
}
@keyframes overlay-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.modal-body { overflow-x: hidden; }
.modal-body > * { max-width: 100%; min-width: 0; }
#tm-back { display: none; }
/* Papierkorb nicht direkt neben ✕: Abstand und Trennstrich, gedämpft bis zum Hovern */
#tm-delete { margin-right: 6px; color: var(--text-dim); position: relative; }
#tm-delete:hover { color: var(--danger); }
#tm-delete::after { content: ""; position: absolute; right: -7px; top: 10px; bottom: 10px; width: 1px; background: var(--border); }
.login-box {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 16px;
  padding: 36px 32px; width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 24px 64px rgba(1,4,9,.5);
}
.login-box h1 { font-size: 22px; letter-spacing: .3px; }
.error-msg { color: var(--danger); min-height: 1.4em; font-size: 14px; }

/* --- Login-Screen (v7): Branding, Ansichten, Passwort-Auge --- */
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-logo { width: 40px; height: 40px; flex: 0 0 auto; }
.login-logo .lg1 { fill: var(--accent); opacity: .55; }
.login-logo .lg2 { fill: var(--accent); }
.login-logo .lg3 { fill: var(--accent); opacity: .3; }
.login-view { display: flex; flex-direction: column; gap: 14px; }
.login-sub { color: var(--text-dim); font-size: 14px; }
.login-view .field { display: flex; flex-direction: column; gap: 6px; }
.login-view .field > label { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.login-cta { width: 100%; margin-top: 4px; }
.login-cta[disabled] { opacity: .6; cursor: progress; }
.login-link {
  color: var(--accent); font-size: 14px; text-align: center; padding: 6px;
  border-radius: var(--radius);
}
.login-link:hover { text-decoration: underline; }
.onboarding { max-width: 460px; }
.ob-step { font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; margin: 0; }
.ob-body { display: flex; flex-direction: column; gap: 10px; color: var(--text); font-size: 15px; line-height: 1.5; }
.ob-body p { margin: 0; }
.ob-body kbd { font: 12px ui-monospace, monospace; background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.ob-dots { display: flex; gap: 6px; justify-content: center; }
.ob-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.ob-dots span.on { background: var(--accent); }
.legal-links { font-size: 12px; color: var(--text-dim); text-align: center; margin: 0; }
.legal-links a { color: inherit; }
.legal-links a:hover { color: var(--accent); }
.dropdown .legal-links { padding: 10px 16px; border-top: 1px solid var(--border); text-align: left; }
.login-info {
  background: var(--accent-bg); color: var(--text); font-size: 14px;
  border-radius: var(--radius); padding: 10px 12px;
}
.caps-hint { color: var(--warn); font-size: 13px; }

/* Passwort-Feld mit Auge (auch in Modals wiederverwendbar) */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px; }
.pw-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
}
.pw-eye:hover { color: var(--text); background: var(--bg3); }
.pw-eye svg { width: 20px; height: 20px; }

.modal-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg2); z-index: 2;
}
.modal-head .ticket-id { color: var(--text-dim); font-weight: 600; margin-right: auto; }
.modal-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }

.quick-modal { padding: 20px; gap: 12px; }
.quick-modal h2 { font-size: 18px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 130px; }
.row.right { justify-content: flex-end; }
.row.right > * { flex: 0 0 auto; min-width: auto; width: auto; }

/* Topbar */
#topbar {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); background: var(--bg2);
  position: sticky; top: 0; z-index: 50; flex-wrap: wrap;
}
.brand { font-weight: 800; font-size: 17px; letter-spacing: .5px; display: inline-flex; align-items: center; }
.brand span { color: var(--accent); font-weight: 500; margin-left: 4px; }
.brand-logo { height: 24px; max-width: 90px; object-fit: contain; margin-right: 8px; }

/* Custom-Akzent (Instanz-Branding): Primär-Buttons folgen der eigenen Farbe.
   Textfarbe ist konfigurierbar (--on-accent), damit auch helle Instanzfarben
   lesbar bleiben. */
html[data-custom-accent] .btn.primary {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
html[data-custom-accent] .btn.primary:hover { filter: brightness(1.12); }

/* Logo-Verwaltung im Admin-Formular */
.inst-logo-preview {
  display: inline-flex; align-items: center; justify-content: center;
  width: 88px; height: 44px; background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; font-size: 11px; color: var(--text-dim);
}
.inst-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
#login-logo-img { object-fit: contain; }
#nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
#nav::-webkit-scrollbar { display: none; }
#nav button {
  padding: 8px 12px; min-height: var(--tap); border-radius: var(--radius);
  color: var(--text-dim); font-weight: 600; white-space: nowrap;
}
#nav button.active { color: var(--text); background: var(--bg3); }
.topbar-right { display: flex; gap: 8px; margin-left: auto; align-items: center; }
#topbar-username { color: var(--text-dim); font-size: 14px; white-space: nowrap; }

/* --- Admin: Nutzerverwaltung --- */
.admin-modal { max-width: 560px; }
.admin-modal h3 { font-size: 15px; margin-top: 8px; }
#admin-list { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; }
.admin-row { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; }
.admin-row.inactive { opacity: 0.55; }
.admin-name { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.admin-username { color: var(--text-dim); font-size: 13px; }
.admin-badge { font-size: 11px; padding: 1px 6px; border-radius: 999px;
  background: var(--accent-solid); color: var(--on-accent); }
.admin-badge.off { background: var(--text-dim); }
.admin-badge.agent { background: #6e40c9; }
.avatar.av-agent { border: 1.5px dashed var(--accent); font-size: 10px; letter-spacing: .5px; }
.admin-badge.warn { background: #b08800; }
.admin-actions { display: flex; gap: 4px; flex-shrink: 0; }
.admin-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.admin-check input { width: auto; }
.admin-check input[type="checkbox"] { min-height: auto; }

/* --- v7: Einladungen, Instanz-Settings, Mail-Log, MCP-Keys (auch im Admin-Dashboard) --- */
.admin-modal details, .pa-system details {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; background: var(--bg3);
}
.admin-modal details summary, .pa-system details summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.admin-modal details form, .admin-modal details > div,
.pa-system details form, .pa-system details > div { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.admin-modal .field, .pa-system .field { display: flex; flex-direction: column; gap: 4px; }
.admin-modal .field > label, .pa-system .field > label { font-size: 13px; color: var(--text-dim); }

/* --- v10: Mail-Login, Einladungslinks, Admin-Dashboard --- */
.code-input { font: 600 24px/1.2 ui-monospace, monospace; letter-spacing: .3em; text-align: center; }
#team-links-box, .link-list { display: flex; flex-direction: column; gap: 8px; }
#admin-list { flex-shrink: 0; } /* im langen Modal nicht auf eine Zeile zusammenquetschen */
#team-name-form > button { flex: 0 0 auto; min-width: auto; }
#team-name-form > #team-abbr { flex: 0 0 90px; min-width: 90px; text-transform: uppercase; }
.admin-row { flex-wrap: wrap; }
.admin-actions { flex-wrap: wrap; flex-shrink: 1; min-width: 0; } /* lange Knopfreihe bricht um statt abgeschnitten zu werden */
/* Deaktiviert: nur die Person gedimmt, „Aktivieren“ bleibt gut sichtbar */
.admin-row.inactive { opacity: 1; border-style: dashed; }
.admin-row.inactive .admin-name { opacity: .55; }
.pd-abbr { font: 700 11px/1 ui-monospace, monospace; background: var(--bg3); color: var(--text-dim); border-radius: 6px; padding: 5px 6px; min-width: 38px; text-align: center; }
.link-row { align-items: flex-start; flex-wrap: wrap; }
.link-row .who { flex: 1 1 220px; }
.link-url { display: block; font-size: 11.5px; color: var(--text-dim); word-break: break-all; margin-top: 2px; }
#view-admin { display: flex; flex-direction: column; gap: 16px; }
.pa-head h2 { font-size: 20px; }
.pa-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.pa-card h3 { font-size: 15px; }
.pa-link-form { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-link-form > input { flex: 2 1 200px; }
.pa-link-form > select { flex: 1 1 140px; width: auto; }
.pa-link-form > button { flex: 0 0 auto; }
.pa-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pa-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pa-table th { text-align: left; color: var(--text-dim); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.pa-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.pa-table td:last-child { text-align: right; white-space: nowrap; }
.pa-table tr.inactive td { opacity: .55; }
/* Handy: jede Zeile als Karte, Zahlen mit Beschriftung (data-l) statt breiter Tabelle */
@media (max-width: 640px) {
  .pa-table thead { display: none; }
  .pa-table, .pa-table tbody, .pa-table tr, .pa-table td { display: block; width: 100%; }
  .pa-table tr { border-bottom: 1px solid var(--border); padding: 10px 0; }
  .pa-table td { border: 0; padding: 2px 0; }
  .pa-table td[data-l] { display: inline-block; width: auto; margin-right: 12px; color: var(--text-dim); }
  .pa-table td[data-l]::before { content: attr(data-l) ": "; }
  .pa-table td:last-child { text-align: left; padding-top: 6px; }
}
.pa-system { max-width: 760px; }
#inst-color-pick { flex: 0 0 52px; min-width: 52px; padding: 4px; }
.invite-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; font-size: 13px;
}
.invite-row .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.invite-row .who b { display: block; }
.invite-row .who span { color: var(--text-dim); }
.mail-row { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; font-size: 13px; }
.mail-row .mail-head { display: flex; justify-content: space-between; gap: 8px; color: var(--text-dim); }
.mail-row .mail-subject { font-weight: 600; }
.mail-row pre { white-space: pre-wrap; word-break: break-word; color: var(--text-dim); font: 12px/1.5 ui-monospace, monospace; margin-top: 6px; max-height: 160px; overflow-y: auto; }
.mail-row .mail-status-ok { color: var(--ok); }
.mail-row .mail-status-err { color: var(--danger); }
.settings-hint-inline { font-weight: 400; color: var(--text-dim); font-size: 12px; }
.mcp-list { display: flex; flex-direction: column; gap: 6px; }
.mcp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; font-size: 13px;
}
.mcp-row.revoked { opacity: .5; text-decoration: line-through; }
.mcp-row code { color: var(--text-dim); }
.logs-tail-pre {
  white-space: pre-wrap; word-break: break-word; color: var(--text-dim);
  font: 11.5px/1.5 ui-monospace, monospace; margin-top: 6px; max-height: 240px;
  overflow-y: auto; background: var(--bg3); border-radius: var(--radius); padding: 8px 10px;
}
.settings-version { margin-top: -6px; }
.mcp-newkey { background: var(--accent-bg); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.mcp-newkey input { font: 12px ui-monospace, monospace; }
#topbar-avatar { display: inline-flex; align-items: center; min-height: 0; }
#topbar-avatar .avatar { width: 32px; height: 32px; font-size: 13px; }
#topbar-avatar:hover .avatar { outline: 2px solid var(--accent); outline-offset: 1px; }

.dropdown {
  position: fixed; top: 56px; right: 12px; z-index: 60;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; min-width: 240px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  transform-origin: top right;
  animation: pop-in var(--motion-fast) var(--ease-spring);
}
.dropdown button { padding: 12px 16px; text-align: left; min-height: var(--tap); transition: background var(--motion-fast) var(--ease-out); }
.dropdown button:hover { background: var(--bg3); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } }

/* Icon-Buttons in der Topbar (Suche/Inbox) */
.icon-btn { position: relative; padding: 8px; min-width: var(--tap); }
.icon-btn .icon { width: 20px; height: 20px; }
.badge {
  position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  animation: pop-in var(--motion-fast) var(--ease-spring);
}

/* Inbox-Dropdown */
.inbox-dropdown { min-width: 340px; max-width: 92vw; max-height: 72vh; overflow: hidden; display: flex; flex-direction: column; }
.inbox-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.inbox-head #inbox-markall { min-height: 30px; padding: 3px 8px; font-size: 12.5px; }
#inbox-list { overflow-y: auto; }
.inbox-sec { padding: 8px 14px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); font-weight: 700; }
.inbox-item {
  display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left;
  padding: 10px 14px; border-left: 3px solid var(--ib-c, transparent);
  border-bottom: 1px solid var(--border); transition: background var(--motion-fast) var(--ease-out);
}
.inbox-item:hover { background: var(--bg3); }
.inbox-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--ib-c, var(--accent)); margin-top: 5px; }
.inbox-item-main { min-width: 0; flex: 1; }
.inbox-item-top { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--text-dim); }
.inbox-title { font-weight: 600; margin-top: 1px; word-break: break-word; }
.inbox-snip { color: var(--text-dim); font-size: 12.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Globale Suche */
.overlay-top { align-items: flex-start; padding-top: 12vh; }
.search-box {
  width: 100%; max-width: 620px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,.5);
  animation: modal-in var(--motion) var(--ease-spring);
}
.search-input-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.search-ic { color: var(--text-dim); display: inline-flex; flex: 0 0 auto; }
.search-ic .icon { width: 20px; height: 20px; }
#global-search { border: none; background: none; padding: 4px 0; font-size: 17px; min-height: 32px; }
#global-search:focus { outline: none; }
.search-esc { color: var(--text-dim); font-size: 11px; border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; flex: 0 0 auto; }
.search-results { max-height: 56vh; overflow-y: auto; }
.search-hint { color: var(--text-dim); padding: 18px 16px; text-align: center; }
.search-sec { padding: 10px 16px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); font-weight: 700; }
.search-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 16px; transition: background var(--motion-fast) var(--ease-out);
}
.search-row:hover { background: var(--bg3); }
.search-row-title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-row-meta { color: var(--text-dim); font-size: 12.5px; flex: 0 0 auto; }

/* Obere Zeile (0.08): Zurück, Brotkrumen, Suche, Inbox, + Ticket */
#subnav {
  display: flex; align-items: center; gap: 10px; padding: 4px 12px; min-height: 40px;
  border-bottom: 1px solid var(--border); background: var(--bg);
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
#subnav::-webkit-scrollbar { display: none; }
#subnav > * { flex: 0 0 auto; }
#nav-back { min-height: 32px; padding: 2px 10px; font-size: 13px; }
#nav-back span { color: var(--text-dim); }
#crumbs { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); }
#crumbs i { font-style: normal; opacity: .5; }
#crumbs b { color: var(--text); font-weight: 600; }
#crumbs button { color: var(--text-dim); padding: 0; min-height: 0; font: inherit; }
#crumbs button:hover { color: var(--accent); }
/* Ziel nach einem Sprung (goTo … flash) kurz markieren; „Bewegung reduzieren“ schaltet den Übergang oben ab */
.nav-flash { outline: 2px solid var(--accent) !important; outline-offset: 2px; transition: outline-color var(--motion) var(--ease-out); }
/* Aufwand S/M/L an der Karte */
.est-tag {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 4px; border: 1px solid var(--border); border-radius: 4px;
  font-size: 11px; font-weight: 700; color: var(--text-dim);
}

/* Filter bar */
#filterbar {
  display: flex; gap: 8px; padding: 8px 12px; overflow-x: auto;
  border-bottom: 1px solid var(--border); background: var(--bg);
  scrollbar-width: none;
}
#filterbar::-webkit-scrollbar { display: none; }
#filterbar > * { flex: 0 0 auto; width: auto; }
#search { flex: 1 1 160px; min-width: 140px; }

/* Views */
#views { padding: 12px; }
.view { max-width: 1200px; margin: 0 auto; }
/* Sanftes Einblenden beim Ansichtswechsel (motion-guide) */
.view:not(.hidden) { animation: view-enter var(--motion) var(--ease-out); }
@keyframes view-enter { from { opacity: 0; transform: translateY(6px); } }

/* Ticket card (shared by list & kanban) */
.tcard {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; cursor: pointer; position: relative;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
}
.tcard:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.tcard .t-title { font-weight: 600; word-break: break-word; }
.tcard .t-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--text-dim); }
.tcard.unseen::before {
  content: ""; position: absolute; top: 10px; right: 10px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
}
.tcard.dragging { opacity: .4; }
.chip {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; color: #0d1117;
}
.pill { padding: 1px 7px; border-radius: 4px; font-size: 11.5px; font-weight: 700; }
.prio-Low { background: #263041; color: #9fb2cb; }
.prio-Med { background: #1f3a5f; color: #79b8ff; }
.prio-High { background: #4d2d12; color: #f0883e; }
.prio-Urgent { background: #4b1113; color: #ff7b72; }
.due { font-weight: 600; }
.due.overdue { color: var(--danger); }
.blocked-flag { color: var(--danger); font-weight: 700; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 700; color: #fff;
}
.av-DJ { background: #8957e5; } .av-Marina { background: #db61a2; } .av-Ario { background: #2ea043; }
.av-none { background: var(--bg3); color: var(--text-dim); }
.avatar.av-img { padding: 0; overflow: hidden; background: var(--bg3); }
.avatar.av-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
#set-avpreview { width: 44px; height: 44px; font-size: 15px; }
.av-row { align-items: center; }
.av-row > * { flex: 0 0 auto; min-width: 0; }
.settings-hint { color: var(--text-dim); font-size: 13px; }
.ooo-badge { font-size: 11px; }

/* List view */
#view-list { display: flex; flex-direction: column; gap: 8px; }
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.list-count { color: var(--text-dim); font-size: 13px; padding: 2px 4px; }
#list-add-folder { min-height: 36px; padding: 4px 10px; font-size: 13px; }
.folder-group {
  display: flex; flex-direction: column; gap: 8px;
  border-radius: var(--radius); border: 1px solid transparent; padding: 2px;
}
.folder-group.dragover { border-color: var(--accent); background: var(--accent-bg); }
.folder-drop-hint {
  color: var(--text-dim); font-size: 12.5px; font-style: italic;
  border: 1px dashed var(--border); border-radius: var(--radius); padding: 8px 12px;
}
.folder-head {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-weight: 700; font-size: 14px;
}
.folder-head:first-child { margin-top: 0; }
.folder-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.folder-head .count { color: var(--text-dim); font-weight: 500; font-size: 13px; }
.folder-tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  padding: 1px 7px; border-radius: 4px; background: var(--bg3); color: var(--text-dim);
}
.folder-tag .folder-dot { width: 7px; height: 7px; }

/* Timeline */
#view-timeline { max-width: 800px; position: relative; padding-left: 4px; }
.tl-toolbar { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 12px; gap: 8px; }
#tl-type { flex: 0 0 auto; width: auto; }
#tl-dir { flex: 0 0 auto; white-space: nowrap; }
.tl-day { display: flex; gap: 14px; position: relative; }
.tl-rail { display: flex; flex-direction: column; align-items: center; flex: 0 0 14px; }
.tl-dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--bg3);
  border: 2px solid var(--border); flex: 0 0 auto; margin-top: 5px;
}
.tl-day.today .tl-dot { background: var(--accent); border-color: var(--accent); }
.tl-day.past .tl-dot { border-color: var(--text-dim); }
.tl-line { width: 2px; flex: 1; background: var(--border); min-height: 12px; }
.tl-content { flex: 1; padding-bottom: 20px; min-width: 0; }
.tl-date { font-weight: 700; font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }
.tl-day.today .tl-date { color: var(--accent); }
.tl-date .overdue { color: var(--danger); }
.tl-items { display: flex; flex-direction: column; gap: 8px; }
.tl-note {
  background: var(--bg2); border: 1px solid var(--border); border-left: 3px solid var(--warn);
  border-radius: var(--radius); padding: 10px 12px;
}
.tl-note h3 { font-size: 15px; display: flex; align-items: baseline; gap: 8px; }
.tl-note h3 .by { font-size: 11.5px; color: var(--text-dim); font-weight: 400; margin-left: auto; }
.tl-note .md { margin-top: 4px; }
.tl-note-actions { display: flex; gap: 4px; margin-top: 6px; }
.tl-note-actions button { color: var(--text-dim); font-size: 12.5px; min-height: 32px; padding: 4px 8px; }
.tl-note-actions button:hover { color: var(--text); }
.note-form {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px;
}

/* Timeline: Umschalter Chronologie/Abhängigkeiten */
.tl-toggle {
  display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-right: auto;
}
.tl-toggle button {
  padding: 8px 12px; min-height: var(--tap); color: var(--text-dim);
  font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 6px;
}
.tl-toggle button.on { background: var(--accent-bg); color: var(--text); }
.tl-toggle button + button { border-left: 1px solid var(--border); }

/* Abhängigkeits-Ketten */
.dep-legend { color: var(--text-dim); font-size: 13px; margin: 0 0 14px; }
.dep-chain {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; margin-bottom: 18px;
}
.dep-chain-head { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dep-chain-head .count { color: var(--text-dim); font-weight: 500; font-size: 13px; }
.dep-progress {
  flex: 0 1 140px; min-width: 70px; height: 6px; border-radius: 3px;
  background: var(--bg3); border: 1px solid var(--border); overflow: hidden;
}
.dep-progress i { display: block; height: 100%; background: var(--ok); border-radius: 3px; }
.dep-next { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--text-dim); }
.dep-next b { color: var(--accent); }
.dep-next.dep-done-all { color: var(--ok); font-weight: 600; }
.dep-cols { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.dep-col { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; min-width: 180px; max-width: 240px; }
.dep-col-cap {
  color: var(--text-dim); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; padding: 0 2px 2px;
}
/* Verbinder: Linie mit Pfeilspitze, vertikal auf Kartenhöhe zentriert */
.dep-arrow { flex: 0 0 30px; position: relative; align-self: stretch; user-select: none; }
.dep-arrow::before {
  content: ''; position: absolute; left: 3px; right: 9px; top: 50%;
  height: 2px; background: var(--border); transform: translateY(-50%);
}
.dep-arrow::after {
  content: ''; position: absolute; right: 3px; top: 50%;
  width: 8px; height: 8px; border-top: 2px solid var(--border); border-right: 2px solid var(--border);
  transform: translateY(-50%) rotate(45deg);
}
.dep-card {
  background: var(--bg3); border: 1px solid var(--border); border-left: 4px solid var(--border);
  border-radius: var(--radius); padding: 9px 11px; cursor: pointer; position: relative;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.dep-card:hover {
  border-color: var(--accent); border-left-width: 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,.25); transform: translateY(-1px);
}
.dep-card.done { opacity: .5; }
.dep-card.dep-dim { opacity: .3; filter: saturate(.4); }
.dep-card.dep-is-next { outline: 2px solid var(--accent); outline-offset: -1px; }
.dep-next-tag { color: var(--accent); font-size: 11px; font-weight: 700; margin-top: 6px; }
.dep-card-title { font-weight: 600; font-size: 13px; word-break: break-word; }
.dep-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: 11.5px; }
.dep-state { font-weight: 600; }

/* Dashboard-Statistiken */
.stat-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.stat-kpi { background: var(--bg3); border-radius: var(--radius); padding: 12px; text-align: center; }
.stat-kpi .stat-num { font-size: 26px; font-weight: 800; line-height: 1.1; }
.stat-kpi.warn .stat-num { color: var(--danger); }
.stat-kpi .stat-lbl { color: var(--text-dim); font-size: 12px; margin-top: 2px; }
.stat-charts { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 12px; }
@media (min-width: 760px) { .stat-charts { grid-template-columns: 1fr 1fr; } .stat-block-wide { grid-column: 1 / -1; } }
.stat-block h3 { font-size: 13px; color: var(--text-dim); font-weight: 700; margin-bottom: 8px; }
.stat-svg { width: 100%; height: auto; display: block; }
.stat-axis { font-size: 10px; fill: var(--text-dim); }
.stat-donut-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.stat-donut-num { font-size: 22px; font-weight: 800; fill: var(--text); }
.stat-donut-sub { font-size: 10px; fill: var(--text-dim); }
.stat-legend { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 6px; }
.stat-leg { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-dim); }
.stat-leg b { color: var(--text); }
.stat-hrow { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.stat-hname { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 110px; font-size: 13px; font-weight: 600; }
.stat-hname-wide { flex: 0 0 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-hbar { position: relative; flex: 1; height: 14px; background: var(--bg3); border-radius: 7px; overflow: hidden; }
.stat-hseg { position: absolute; top: 0; bottom: 0; }
.stat-hval { flex: 0 0 28px; text-align: right; font-size: 13px; font-weight: 700; }

/* Kanban — Spalten füllen auf Desktop die volle Breite, wischbar auf Mobil */
#view-kanban {
  display: flex; gap: 12px; overflow-x: auto; align-items: flex-start;
  max-width: none; padding-bottom: 24px; scroll-snap-type: x proximity;
}
.kcol {
  flex: 1 1 240px; min-width: 240px; max-width: 460px; scroll-snap-align: start;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  display: flex; flex-direction: column; max-height: calc(100vh - 150px);
}
@media (min-width: 641px) { .kcol { max-height: var(--kb-h, calc(100vh - 150px)); } }
/* Mobil: jede Spalte fast bildschirmbreit + wischen */
@media (max-width: 640px) {
  .kcol { flex: 0 0 86vw; min-width: 0; max-width: none; }
}
.kcol-head {
  padding: 10px 12px; font-weight: 700; display: flex; gap: 8px; align-items: center;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg2); border-radius: 10px 10px 0 0;
}
.kcol-head .count { color: var(--text-dim); font-weight: 500; font-size: 13px; }
.kcol-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 60px; }
.kcol.dragover .kcol-body { background: var(--accent-bg); border-radius: 0 0 10px 10px; }
.drop-slot { height: 3px; border-radius: 2px; }
.drop-slot.active { background: var(--accent); height: 6px; }

/* Graph — Höhe wird in renderGraph dynamisch gesetzt (füllt bis unten) */
#view-graph { position: relative; height: calc(100vh - 170px); max-width: none; }
#gn-add { position: absolute; top: 10px; left: 12px; z-index: 5; }
.gn-editor {
  position: absolute; top: 62px; left: 12px; z-index: 6; width: min(340px, calc(100% - 24px));
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.gn-editor .row > .btn { flex: 0 0 auto; min-width: auto; }
#gn-color { padding: 2px 4px; height: 44px; cursor: pointer; }
#graph-canvas { width: 100%; height: 100%; display: block; border-radius: 10px; background: var(--bg2); border: 1px solid var(--border); touch-action: none; }
#graph-hint { position: absolute; bottom: 10px; left: 12px; color: var(--text-dim); font-size: 12px; pointer-events: none; }
#graph-legend {
  position: absolute; top: 10px; right: 12px; max-width: 62%;
  background: color-mix(in srgb, var(--bg2) 88%, transparent);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 10px; font-size: 11.5px;
  display: flex; flex-direction: column; gap: 4px;
}
#graph-legend .gl-body { display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
#gl-toggle {
  align-self: flex-end; color: var(--text-dim); font-size: 11.5px;
  padding: 0 4px; min-height: 0; line-height: 1.4;
}
#gl-toggle:hover { color: var(--text); }
#graph-legend.collapsed { padding: 4px 8px; }
#graph-legend.collapsed .gl-body { display: none; }
.gl-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.gl-dim { color: var(--text-dim); }
.gl-item { display: inline-flex; align-items: center; gap: 4px; }
.gl-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.gl-ring, .gl-ring-red {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
  border: 2px solid var(--text); flex: 0 0 auto; vertical-align: -1px;
}
.gl-ring-red { border-color: var(--danger); }

/* Dashboard */
.dash-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.dash-wide { grid-column: 1 / -1; }
.dash-ooo { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.dash-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
/* Widget-Reorder per Drag & Drop (motion-guide) */
.dash-section { transition: box-shadow var(--motion) var(--ease-out), opacity var(--motion) var(--ease-out), transform var(--motion) var(--ease-spring); }
.dash-section[draggable="true"] { cursor: default; }
.dash-section.widget-dragging { opacity: .55; box-shadow: 0 12px 32px rgba(0,0,0,.4); }
.dash-grip { color: var(--text-dim); cursor: grab; display: inline-flex; flex: 0 0 auto; opacity: .55; transition: opacity var(--motion-fast) var(--ease-out); touch-action: none; }
.dash-grip:active { cursor: grabbing; }
.dash-section:hover .dash-grip { opacity: 1; }
.dash-grip .icon { width: 16px; height: 16px; }
/* Stat-Widget: einzelnes Chart pro Karte */
.dash-stat .stat-block { margin: 0; }
.dash-stat .stat-block h3 { display: none; } /* Titel steht schon im Widget-Kopf */
.dash-hello { color: var(--text-dim); font-size: 14px; }
h2.dash-hello { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; margin: 8px 0 0; }
#dash-customize { min-height: 36px; padding: 4px 10px; font-size: 13px; }
#dash-config {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px;
}
.dc-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.dc-hint { color: var(--text-dim); font-size: 12.5px; }
.dc-row { display: flex; align-items: center; gap: 10px; min-height: 38px; border-radius: var(--radius); padding: 0 4px; }
.dc-row[draggable="true"] { cursor: grab; }
.dc-row.dragging { opacity: .4; }
.dc-row.dc-over { outline: 2px solid var(--accent); outline-offset: -2px; }
.dc-grip { color: var(--text-dim); font-size: 13px; letter-spacing: -2px; flex: 0 0 14px; user-select: none; }
.dc-grip-off { visibility: hidden; }
.dc-row input[type=checkbox] { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); flex: 0 0 auto; }
.dc-label { flex: 1; }
.dash-section.droppable.dragover { border-color: var(--accent); background: var(--accent-bg); }
.dc-off .dc-label { color: var(--text-dim); }
.dc-sep { color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; margin-top: 8px; }
.team-row { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.team-row .team-stats { color: var(--text-dim); font-size: 13px; margin-left: auto; text-align: right; }
.dash-section { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.dash-section h2 { font-size: 15px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.dash-section h2 .count { color: var(--text-dim); font-weight: 500; }
.dash-section .stack { display: flex; flex-direction: column; gap: 8px; }
.empty { color: var(--text-dim); font-style: italic; padding: 8px 2px; }

/* Activity — farbkodierte Cards, nach Tag gruppiert */
#view-activity { display: flex; flex-direction: column; gap: 18px; max-width: 820px; }
.act-day > h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-dim); font-weight: 700; margin-bottom: 8px;
}
.act-cards { display: flex; flex-direction: column; gap: 8px; }
.act-card {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--bg2); border: 1px solid var(--border);
  border-left: 3px solid var(--act-c, var(--border)); border-radius: var(--radius);
  font-size: 14px; cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.act-card[data-id]:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.2); border-left-color: var(--act-c); }
.act-ic { flex: 0 0 auto; display: inline-flex; }
.act-ic .icon { width: 18px; height: 18px; }
.act-main { flex: 1; min-width: 0; }
.act-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.act-line .avatar { width: 22px; height: 22px; font-size: 10px; }
.act-actor { font-weight: 700; }
.act-verb { color: var(--text-dim); }
.act-ticket {
  font-weight: 600; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 1px 7px; border-radius: 5px; white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.act-ticket:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.act-time { color: var(--text-dim); font-size: 12px; flex: 0 0 auto; white-space: nowrap; }
.act-detail { color: var(--text-dim); }

/* Ticket modal internals */
.tm-title-input { font-size: 18px; font-weight: 700; }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.field label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; font-weight: 600; }
.label-picker { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.label-picker .chip { cursor: pointer; opacity: .35; border: 1px solid transparent; min-height: 28px; }
.label-picker .chip.on { opacity: 1; }
.section-title { font-size: 13px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; }
.dep-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.dep-row .dep-link { cursor: pointer; color: var(--accent); font-weight: 600; }
.dep-row .state-tag { font-size: 11px; color: var(--text-dim); }
.dep-add { display: flex; gap: 8px; }
.subtask-row { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.subtask-row input[type=checkbox] { width: 20px; height: 20px; min-height: 0; accent-color: var(--ok); flex: 0 0 auto; }
.subtask-row .st-title { flex: 1; word-break: break-word; }
.subtask-row .st-title.done { text-decoration: line-through; color: var(--text-dim); }
.subtask-add { display: flex; gap: 8px; }

/* Dropzone */
.dropzone {
  min-height: 200px; border: 2px dashed var(--border); border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--text-dim); cursor: pointer; text-align: center; padding: 16px;
  transition: border-color .15s, background .15s;
}
.dropzone.dragover, .dropzone:hover { border-color: var(--accent); background: var(--accent-bg); color: var(--text); }
.dropzone .dz-icon .icon { width: 38px; height: 38px; opacity: .7; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.thumb { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); aspect-ratio: 1; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.thumb .del {
  position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.65);
  border-radius: 6px; width: 30px; height: 30px; color: #fff; display: flex; align-items: center; justify-content: center;
}
/* Quick-add image attach */
.q-attach { display: flex; flex-direction: column; gap: 8px; }
.q-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
.q-previews:empty { display: none; }
.q-thumb { aspect-ratio: 1; }
#q-add-img { align-self: flex-start; min-height: 36px; padding: 6px 10px; font-size: 13px; border: 1px dashed var(--border); }
#q-add-img:hover { border-color: var(--accent); }

.comment { background: var(--bg3); border-radius: var(--radius); padding: 10px 12px; }
.comment .c-head { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.comment .c-head b { color: var(--text); }
.comment-add { display: flex; flex-direction: column; gap: 8px; }

/* @-mentions — Akzenttext auf einem NUR LEICHT getönten Grund (statt
   Blau-auf-Blau, das kaum lesbar war). Der Tint funktioniert in beiden Themes. */
.mention {
  color: var(--accent); font-weight: 600;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 4px; padding: 0 3px;
}
.mention-box {
  position: absolute; left: 0; z-index: 20; min-width: 200px; overflow: hidden;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.4); display: flex; flex-direction: column;
}
.mention-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; text-align: left; min-height: var(--tap); }
.mention-item.sel, .mention-item:hover { background: var(--bg3); }

/* Audit trail (Verlauf) */
.via-tag {
  font-size: 10.5px; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 10px; padding: 0 6px; white-space: nowrap; vertical-align: 1px;
}
.hist-durations { display: flex; gap: 6px; flex-wrap: wrap; }
.dur-chip { font-size: 11.5px; background: var(--bg3); border-radius: 4px; padding: 2px 8px; color: var(--text-dim); }
#tm-history { display: flex; flex-direction: column; gap: 2px; }
.hist-row { display: flex; gap: 10px; font-size: 13px; padding: 4px 0; align-items: baseline; border-bottom: 1px solid var(--border); }
.hist-row:last-child { border-bottom: none; }
.hist-time { color: var(--text-dim); font-size: 12px; flex: 0 0 auto; min-width: 92px; }

/* Markdown */
.md p { margin: 0 0 8px; } .md p:last-child { margin: 0; }
.md h1, .md h2, .md h3 { margin: 12px 0 6px; line-height: 1.25; }
.md h1 { font-size: 18px; } .md h2 { font-size: 16px; } .md h3 { font-size: 15px; }
.md code { background: var(--bg3); padding: 1px 5px; border-radius: 4px; font-size: 13px; font-family: ui-monospace, monospace; }
.md pre { background: var(--bg3); padding: 10px; border-radius: 8px; overflow-x: auto; margin: 8px 0; }
.md pre code { background: none; padding: 0; }
.md ul, .md ol { margin: 4px 0 8px 22px; }
.md blockquote { border-left: 3px solid var(--border); padding-left: 10px; color: var(--text-dim); margin: 8px 0; }

/* Lightbox */
#lightbox { background: rgba(1,4,9,.94); }
#lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 8px; }
#lightbox button { position: fixed; top: 12px; right: 12px; font-size: 20px; }

/* Toast */
#toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast-msg {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 20px;
  padding: 10px 18px; font-size: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.4);
  animation: toast-in .2s ease-out;
}
.toast-msg.error { border-color: var(--danger); color: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---- Projekte (v0.05): Umschalter, Projektbild, Abzeichen, Titelbild ---- */
/* Projektfarbe aktiv: gefüllte Primär-Buttons in der Originalfarbe */
:root[data-project-accent] .btn.primary { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--on-accent); }
:root[data-project-accent] .btn.primary:hover { background: var(--accent-solid); filter: brightness(1.1); }

/* Projektbild: Bild oder Anfangsbuchstabe auf der Projektfarbe (--pc) */
.pav {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 20px; height: 20px; border-radius: 6px; overflow: hidden;
  background: var(--pc); color: var(--on-accent); font-size: 11px; font-weight: 800; line-height: 1;
}
.pav:has(> img) { background: var(--bg2); }
.pav img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pav-lg { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; }
.pav-xl { width: 64px; height: 64px; border-radius: 16px; font-size: 28px; }
.pav-stack { display: inline-flex; }
.pav-stack .pav { box-shadow: 0 0 0 2px var(--bg2); }
.pav-stack .pav + .pav { margin-left: -7px; }

/* Topbar-Umschalter */
.project-switch {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px;
  padding: 4px 8px 4px 5px; border: 1px solid var(--border); border-radius: 10px;
  font-weight: 700; font-size: 14px; max-width: 260px;
  transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.project-switch:hover, .project-switch[aria-expanded="true"] { background: var(--bg3); border-color: var(--accent); }
.project-switch .pav { width: 24px; height: 24px; font-size: 12px; }
.project-switch .ps-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; } /* Team · Projekt darf die Kopfzeile nicht umbrechen */
.project-switch .ps-team { font: 700 11px/1 ui-monospace, monospace; color: var(--text-dim); margin-right: 2px; }
.project-switch .icon { color: var(--text-dim); transition: transform var(--motion-fast) var(--ease-out); }
.project-switch[aria-expanded="true"] .icon { transform: rotate(180deg); }

/* Umschalter-Menü */
.project-dropdown { min-width: 280px; max-width: calc(100vw - 16px); padding: 6px; transform-origin: top left; }
.pd-head { padding: 6px 10px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); font-weight: 700; }
.pd-row { display: flex; align-items: center; border-radius: 8px; transition: background var(--motion-fast) var(--ease-out); }
.pd-row:hover { background: var(--bg3); }
.pd-row.active { background: var(--accent-bg); }
.project-dropdown .pd-pick {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: transparent;
}
.project-dropdown .pd-pick .pav { width: 26px; height: 26px; font-size: 13px; border-radius: 7px; }
.pd-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-row.active .pd-name { color: var(--accent); }
.pd-count { font-size: 12px; color: var(--text-dim); background: var(--bg3); border-radius: 10px; padding: 1px 7px; min-width: 24px; text-align: center; }
.project-dropdown .pd-edit { padding: 8px 10px; color: var(--text-dim); border-radius: 8px; opacity: 0; background: transparent; }
.pd-row:hover .pd-edit, .project-dropdown .pd-edit:focus-visible { opacity: 1; }
.project-dropdown .pd-edit:hover { color: var(--text); }
@media (hover: none) { .project-dropdown .pd-edit { opacity: 1; } }
.project-dropdown .pd-new {
  display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 12px;
  border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; color: var(--accent); font-weight: 600;
}

/* Projekt-Abzeichen (Karten, Suche, Inbox, Activity — nur wenn mehrere Projekte sichtbar) */
.proj-tag {
  display: inline-flex; align-items: center; gap: 5px; max-width: 160px;
  padding: 1px 7px 1px 2px; border-radius: 6px; font-size: 11.5px; font-weight: 700; color: var(--text);
  background: color-mix(in srgb, var(--pc) 16%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proj-tag .pav { width: 16px; height: 16px; border-radius: 4px; font-size: 9.5px; }
.tcard.has-proj::after {
  content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--pc);
}

/* Titelbild — ohne Bild ein ruhiger Verlauf in der Projektfarbe */
.pcover {
  background-color: var(--pc); background-size: cover; background-position: center;
  background-image: radial-gradient(120% 160% at 100% 0%, rgba(255,255,255,.3), transparent 55%),
                    radial-gradient(90% 120% at 0% 100%, rgba(0,0,0,.35), transparent 60%);
}

/* Dashboard: Projektkopf (ein Projekt) bzw. Projekt-Kacheln (alle) */
.proj-hero { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--bg2); margin-bottom: 16px; }
.proj-hero-cover { height: 148px; }
.proj-hero-body { display: flex; align-items: flex-end; gap: 14px; padding: 10px 16px 14px; }
/* Nur das Projektbild ragt ins Titelbild — Name und Zahlen bleiben auf ruhigem Grund */
.proj-hero-body > .pav-xl { margin-top: -42px; border: 4px solid var(--bg2); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.proj-hero-text { flex: 1; min-width: 0; }
.proj-hero-text h1 { font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.proj-hero-text span { color: var(--text-dim); font-size: 13.5px; }
.proj-hero-text .overdue { color: var(--danger); }
.proj-hero-body .btn { min-height: 36px; padding: 4px 10px; font-size: 13px; }
.proj-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 16px; }
.proj-tile {
  display: flex; flex-direction: column; text-align: left; overflow: hidden;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg2);
  transition: transform var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.proj-tile:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.proj-tile-cover { display: block; height: 68px; }
.proj-tile-body { display: flex; align-items: flex-end; gap: 10px; padding: 6px 12px 10px; }
.proj-tile-body > .pav-lg { margin-top: -24px; border: 3px solid var(--bg2); }
.proj-tile-body b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-tile-body > span:last-child { color: var(--text-dim); font-size: 12.5px; white-space: nowrap; }

/* Liste bei allen Projekten: Projekt-Überschrift vor den Ordnern */
.list-proj-head {
  display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border); font-weight: 800; font-size: 15px;
}
.list-toolbar + .list-proj-head { margin-top: 2px; }
.list-proj-head .pav { width: 22px; height: 22px; }
.list-proj-head .count { color: var(--text-dim); font-weight: 500; font-size: 13px; }
.tl-note h3 .proj-tag { vertical-align: 1px; }

/* Projekt-Dialog */
.project-modal { max-width: 520px; }
.pm-hero { position: relative; }
.pm-cover { height: 132px; border-radius: 12px; border: 1px solid var(--border); }
.pm-cover-pick {
  position: absolute; top: 10px; right: 10px; min-height: 34px; padding: 4px 10px; font-size: 13px;
  background: color-mix(in srgb, var(--bg2) 82%, transparent); backdrop-filter: blur(6px);
}
.pm-icon-pick { position: absolute; left: 16px; bottom: -30px; padding: 0; border-radius: 18px; }
.pm-icon-pick .pav-xl { border: 4px solid var(--bg2); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.pm-icon-pick:hover .pav { outline: 2px solid var(--accent); outline-offset: 1px; }
.pm-img-actions { display: flex; justify-content: flex-end; gap: 4px; min-height: 34px; margin: 2px 0 4px 96px; flex-wrap: wrap; }
.pm-img-actions .btn { min-height: 32px; padding: 4px 8px; font-size: 12.5px; }
.pm-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-swatch {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--sw); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(127,127,127,.35);
  transition: transform var(--motion-fast) var(--ease-spring), box-shadow var(--motion-fast) var(--ease-out);
}
.pm-swatch:hover { transform: scale(1.08); }
.pm-swatch.on { box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px var(--text); }
.pm-custom { color: var(--text-dim); overflow: hidden; }
.pm-custom input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; }
.pm-archive { margin-right: auto; }

/* Mobile */
@media (max-width: 640px) {
  /* Header: row 1 = AIRO + actions, row 2 = view nav (filterbar is row 3) */
  #topbar { gap: 6px; padding: 6px 8px; flex-wrap: wrap; }
  .brand { order: 1; }
  .brand span { display: none; }
  /* Handy: Projektbild ersetzt den Schriftzug, damit alles in eine Zeile passt */
  #topbar:has(.project-switch:not(.hidden)) .brand { display: none; }
  .project-switch { order: 1; min-height: 38px; gap: 4px; padding: 4px 6px 4px 4px; }
  .project-switch .ps-name { display: none; }
  .project-switch .pav { width: 28px; height: 28px; font-size: 14px; }
  .proj-hero-cover { height: 110px; }
  .proj-hero-body .btn span, .proj-hero-body .btn { font-size: 0; gap: 0; }
  .proj-hero-body .btn .icon { width: 18px; height: 18px; }
  .topbar-right { order: 2; margin-left: auto; gap: 4px; }
  #nav { order: 3; flex: 1 1 100%; }
  #nav button { flex: 1 1 0; }                 /* Heute · Arbeit · Team teilen sich die Zeile */
  #subnav { padding: 4px 8px; gap: 8px; }
  /* Am Handy: Zurück ohne Ziel, Brotkrumen kürzen sich, Suche und + Ticket bleiben sichtbar */
  #nav-back span { display: none; }
  #crumbs { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  #app:has(#workbar:not(.hidden)) #crumbs { display: none; } /* Arbeit: die Ansichtsleiste zeigt, wo man ist */
  #btn-new { padding: 8px 10px; }
  #topbar-username { display: none; }          /* Avatar zeigt bereits, wer eingeloggt ist */
  /* Oben rechts immer ✕ (früher saß hier am Handy der Papierkorb) */
  #views { padding: 8px; }
  .modal { max-width: none; width: 100%; height: 100%; max-height: none; border-radius: 0; border: none; }
  .overlay { padding: 0; }
  .overlay#quick-modal, .overlay#lightbox { padding: 12px; }
  .overlay#search-modal { padding: 8vh 12px 12px; align-items: flex-start; } /* Suche bleibt oben, nicht Vollbild */
  #quick-modal .modal { height: auto; border-radius: 12px; border: 1px solid var(--border); }
  .kcol { max-height: calc(100vh - 200px); }
  #view-graph { height: calc(100vh - 200px); }
  .inbox-dropdown { min-width: 0; width: calc(100vw - 16px); right: 8px; }
}

/* ---- v0.07: Schnell-Check, Archiv, Projekt-Auswahl ---- */
kbd {
  font: 600 11px ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1;
  background: var(--bg3); border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 4px; padding: 2px 5px; color: var(--text-dim);
}
.btn.primary kbd { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); color: inherit; }

/* Toast mit Knopf („Rückgängig“) */
#toast .toast-msg { pointer-events: auto; display: flex; align-items: center; gap: 12px; }
.toast-action {
  color: var(--accent); font-weight: 700; padding: 4px 8px; margin: -4px -8px -4px 0;
  border-radius: 12px; min-height: 0;
}
.toast-action:hover { background: var(--accent-bg); }

/* Filterleiste: Projekte ein-/ausblenden, „Verknüpft“ */
.f-projects { display: flex; gap: 6px; align-items: center; }
.fp-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px 4px 4px;
  border-radius: 20px; border: 1px solid var(--border); background: var(--bg2); color: var(--text);
  transition: opacity var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.fp-chip .pav { width: 24px; height: 24px; border-radius: 6px; font-size: 12px; }
.fp-chip:hover { border-color: var(--pc); }
.has-sel .fp-chip { opacity: .45; color: var(--text-dim); }
.has-sel .fp-chip:hover { opacity: .8; }
.has-sel .fp-chip.on { opacity: 1; color: var(--text); border-color: var(--pc); box-shadow: inset 0 0 0 1px var(--pc); background: color-mix(in srgb, var(--pc) 14%, var(--bg2)); }
.f-toggle.on { color: var(--text); background: var(--accent-bg); border-color: var(--accent); }

/* Kanban: „Durchgehen“ und Ein-Klick-Knöpfe auf den Karten */
.kcol-run {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; min-height: 30px;
  border-radius: 6px; color: var(--text-dim); font-size: 12.5px; font-weight: 600;
}
.kcol-run:hover { color: var(--text); background: var(--bg3); }
.t-quick {
  display: flex; gap: 6px; justify-content: flex-end;
}
/* Mit Maus: Knöpfe schweben unten rechts über der Karte, nichts verschiebt sich */
@media (hover: hover) {
  .t-quick {
    position: absolute; right: 8px; bottom: 8px; z-index: 2; gap: 0; padding: 2px;
    border-radius: 9px; border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg2) 82%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px -6px rgba(0,0,0,.5);
    opacity: 0; transform: translateY(4px) scale(.96); pointer-events: none;
    transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion) var(--ease-spring);
  }
  .tcard:hover .t-quick, .tcard:focus-within .t-quick { opacity: 1; transform: none; pointer-events: auto; transition-delay: 60ms; }
  .tq { border: 0; background: transparent; min-height: 28px; border-radius: 7px; }
  .tq + .tq { margin-left: 2px; }
}
.tq {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; min-height: 30px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg3); color: var(--text-dim);
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-spring);
}
.tq .icon { width: 14px; height: 14px; transition: transform var(--motion) var(--ease-spring); }
.tq:hover { color: var(--text); background: var(--accent-bg); }
.tq:hover .icon { transform: translateX(2px); }
.tq:active { transform: scale(.94); }
.tq-done { padding: 4px 7px; }
.tq-done:hover { color: #fff; background: var(--ok); }
.tq-done:hover .icon { transform: scale(1.12); }
/* Nach dem Verschieben: kurzer Lichtring am Ziel */
.tcard.moved-glow { animation: moved-glow 1.1s var(--ease-out); }
@keyframes moved-glow {
  0%, 30% { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Activity → Archiv */
.act-head { display: flex; justify-content: flex-end; margin-bottom: -8px; }
.arch-tag {
  display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600;
  color: var(--warn); border: 1px solid currentColor; border-radius: 10px; padding: 0 7px;
}

/* Archiv-Ansicht */
#view-archive { max-width: 820px; display: flex; flex-direction: column; gap: 10px; }
.archive-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.archive-head h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.archive-head h2 .count { color: var(--text-dim); font-weight: 500; font-size: 14px; }
.archive-head p { color: var(--text-dim); margin: 0; }
.arch-row { display: flex; flex-direction: column; gap: 0; }
.arch-row .tcard { border-bottom-left-radius: 0; border-bottom-right-radius: 0; opacity: .85; }
.arch-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding: 6px 8px 6px 12px; background: var(--bg3); border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
.arch-when { color: var(--text-dim); font-size: 12.5px; }
.arch-actions .btn { min-height: 34px; padding: 4px 10px; }

/* Ticket im Archiv: nur lesen */
.archived-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 14%, var(--bg2)); border: 1px solid color-mix(in srgb, var(--warn) 50%, transparent);
}
.archived-banner > .icon { width: 20px; height: 20px; color: var(--warn); }
.archived-banner .ab-text { flex: 1 1 220px; }
.is-archived .tm-title-input { opacity: .8; }
.is-archived .dep-add, .is-archived .subtask-add, .is-archived .dropzone, .is-archived .comment-add,
.is-archived #tm-new-label, .is-archived .thumb .del, .is-archived .dep-del, .is-archived .st-del { display: none; }
.is-archived #tm-labels .chip:not(.on) { display: none; }
.is-archived #tm-labels, .is-archived #tm-desc-view { pointer-events: none; }

/* Dashboard: Schnell-Check-Hinweis */
.qc-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 16px;
  border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: linear-gradient(90deg, var(--accent-bg), var(--bg2) 70%);
}
.qc-banner-ic {
  width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-solid); color: var(--on-accent); flex: 0 0 auto;
}
.qc-banner-ic .icon { width: 18px; height: 18px; }
.qc-banner-text { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; }
.qc-banner-text span { color: var(--text-dim); font-size: 13px; }
.qc-banner.qc-calm { background: var(--bg2); border-color: var(--border); color: var(--text-dim); padding: 8px 14px; }
.qc-banner.qc-calm .icon { color: var(--ok); }

/* Schnell-Check */
#qc-modal { z-index: 90; } /* unter Ticket-Detail und Lightbox, die man daraus öffnet */
/* Oben verankert: wechselnde Kartenhöhen verschieben das Fenster nicht */
@media (min-width: 641px) { #qc-modal { align-items: flex-start; padding-top: 9vh; } }
#qc-modal.closing { animation: overlay-out .18s var(--ease-out) forwards; pointer-events: none; }
#qc-modal.closing .qc-modal { animation: modal-out .18s var(--ease-out) forwards; }
@keyframes overlay-out { to { opacity: 0; } }
@keyframes modal-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }
.qc-modal { max-width: 640px; }
.qc-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; }
.qc-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; margin-right: auto; min-width: 0; }
.qc-title .icon { color: var(--accent); width: 16px; height: 16px; }
.qc-scope { color: var(--text-dim); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-progress { color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: 13px; }
.qc-bar { height: 3px; background: var(--bg3); }
.qc-bar span { display: block; height: 100%; background: var(--accent); transition: width var(--motion) var(--ease-out); }
.qc-card {
  margin: 16px 16px 0; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
  display: flex; flex-direction: column; gap: 10px; animation: qc-in var(--motion) var(--ease-spring);
  touch-action: pan-y; user-select: none;
}
@keyframes qc-in { from { opacity: 0; transform: translateX(24px); } }
.qc-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--text-dim); }
.qc-key { font-weight: 700; color: var(--text-dim); }
.qc-meta .state-tag { border: 1px solid var(--border); border-radius: 4px; padding: 0 6px; }
.qc-ticket-title { font-size: 19px; line-height: 1.3; word-break: break-word; }
.qc-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.qc-reasons li { display: flex; gap: 6px; align-items: baseline; color: var(--text); }
.qc-reasons .icon { flex: 0 0 auto; color: var(--warn); }
.qc-r-overdue .icon { color: var(--danger); }
.qc-r-subtasks_done .icon, .qc-r-unblocked .icon { color: var(--ok); }
.qc-r-column .icon { color: var(--text-dim); }
.qc-desc {
  max-height: 140px; overflow: hidden; color: var(--text-dim); font-size: 13.5px;
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent);
}
.qc-open { align-self: flex-start; color: var(--accent); font-size: 13px; display: inline-flex; gap: 6px; align-items: center; padding: 2px 0; }
.qc-sugg { margin: 12px 16px 0; justify-content: space-between; font-size: 15px; }
.qc-sugg-label { font-weight: 500; opacity: .8; margin-right: auto; }
.qc-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 12px 16px 0; }
.qc-act { justify-content: space-between; text-align: left; }
.qc-act span { overflow: hidden; text-overflow: ellipsis; }
.qc-act.qc-done { color: var(--ok); }
.qc-act.qc-archive { color: var(--danger); }
.qc-states { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 12px 16px 0; font-size: 13px; color: var(--text-dim); }
.qc-st {
  display: inline-flex; gap: 5px; align-items: center; padding: 4px 8px; min-height: 32px;
  border-radius: 6px; border: 1px solid var(--border); color: var(--text);
}
.qc-st:hover:not(:disabled) { border-color: var(--accent); }
.qc-st.cur { opacity: .45; }
.qc-foot { display: flex; gap: 16px; flex-wrap: wrap; padding: 12px 16px 16px; color: var(--text-dim); font-size: 12.5px; }
.qc-swipe { display: none; }
.qc-keys { margin-left: auto; }
.qc-foot-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); padding: 2px 0; }
.qc-foot-btn:hover { color: var(--text); }
@media (hover: none) {
  .qc-swipe { display: inline; }
  .qc-keys, .qc-modal kbd { display: none; }
  .qc-foot-btn { min-height: var(--tap); }
}
.qc-end { padding: 28px 20px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.qc-end-ic { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.qc-end-ic .icon { width: 26px; height: 26px; }
.qc-end-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px 14px; flex-wrap: wrap; justify-content: center; color: var(--text-dim); }
.qc-end-list b { color: var(--text); }
.qc-end .row { width: 100%; margin-top: 8px; }
@media (max-width: 640px) {
  .qc-actions { grid-template-columns: 1fr 1fr; }
  .qc-card { margin: 12px 12px 0; }
  .qc-sugg, .qc-actions, .qc-states { margin-left: 0; margin-right: 0; padding-left: 12px; padding-right: 12px; }
  .qc-sugg { margin: 12px 12px 0; }
}

/* Deaktivierte Person (SPEC #80): Avatar ausgegraut */
.avatar.av-inactive { filter: grayscale(1); opacity: .55; }
.qc-r-inactive .icon { color: var(--danger); }

/* ============================================================
   Seitenleiste und Arbeitsansichten (0.08.1)
   Breit (ab 900 px): Seitenleiste links mit Heute · Arbeit · Team untereinander.
   Schmal: Kopfzeile oben, am Handy die drei Bereiche als Leiste unten.
   ============================================================ */
#nav button { display: inline-flex; align-items: center; gap: 8px; }
#nav .icon { width: 18px; height: 18px; flex: none; }
#nav kbd { display: none; }
.subnav-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.subnav-actions .icon-btn { min-height: 36px; min-width: 38px; padding: 6px; }
#btn-new { min-height: 36px; padding: 6px 14px; }

/* Arbeit: Ansichten groß oben. Klebt beim Scrollen unter #subnav, dann als Glasleiste. */
#workbar {
  position: sticky; top: var(--subnav-h, 52px); z-index: 39;
  padding: 14px 12px 4px; background: var(--bg);
  transition: padding var(--motion) var(--ease-out), background var(--motion) var(--ease-out), box-shadow var(--motion) var(--ease-out);
}
#workbar.stuck {
  padding-top: 8px; padding-bottom: 8px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px);
  box-shadow: 0 1px 0 var(--border), 0 10px 24px -14px rgba(0,0,0,.6);
}
#workbar.stuck #subnav-views {
  background: color-mix(in srgb, var(--bg2) 72%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
#workbar #subnav-views button { transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), min-height var(--motion) var(--ease-out); }
#workbar.stuck #subnav-views button { min-height: 36px; }
:root[data-theme="light"] #workbar.stuck { box-shadow: 0 1px 0 var(--border), 0 10px 24px -16px rgba(31,35,40,.25); }
:root[data-theme="light"] #workbar.stuck #subnav-views { box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
#subnav-views {
  display: flex; gap: 4px; padding: 4px; max-width: 1200px; margin: 0 auto;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  overflow-x: auto; scrollbar-width: none;
}
#subnav-views::-webkit-scrollbar { display: none; }
#subnav-views button {
  flex: 1 0 auto; min-height: 42px; padding: 8px 16px; border-radius: 9px;
  font-size: 15px; font-weight: 600; color: var(--text-dim); white-space: nowrap;
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
#subnav-views button:hover { color: var(--text); background: var(--bg3); }
#subnav-views button.active { color: var(--text); background: var(--bg3); box-shadow: inset 0 0 0 1px var(--border), 0 1px 2px rgba(0,0,0,.3); }
#subnav-views button[data-view="archive"] { flex-grow: 0; margin-left: 6px; position: relative; }
#subnav-views button[data-view="archive"]::before {
  content: ""; position: absolute; left: -6px; top: 10px; bottom: 10px; width: 1px; background: var(--border);
}
#workbar + #filterbar { border-top: 0; }

/* Projekt-Umschalter: Häkchen für mehrere Projekte */
.pd-head { display: flex; align-items: baseline; gap: 8px; }
.pd-head span { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; }
.project-dropdown .pd-check {
  flex: none; width: 22px; height: 22px; min-height: 0; margin-left: 8px; padding: 0;
  display: grid; place-items: center; border-radius: 6px;
  border: 1.5px solid var(--border); background: transparent; color: transparent;
  transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.project-dropdown .pd-check .icon { width: 14px; height: 14px; }
.project-dropdown .pd-check:hover { border-color: var(--accent); }
.project-dropdown .pd-check.on { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; }
.pd-check-ph { flex: none; width: 22px; margin-left: 8px; }

/* Deine Ansicht: zwei breite Spalten, Tickets als ruhige Zeilen statt Karten */
.dash-grid { align-items: start; }
@media (min-width: 900px) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash-list .stack { gap: 0; }
.tcard.trow {
  flex-direction: row; align-items: center; gap: 8px; min-height: 40px;
  padding: 6px 6px; margin: 0 -6px; border: 0; border-radius: 8px; background: transparent;
}
.tcard.trow + .tcard.trow { box-shadow: 0 -1px 0 var(--border); border-radius: 0 0 8px 8px; }
.tcard.trow:hover { background: var(--bg3); transform: none; box-shadow: none; }
.tcard.trow.unseen::before { top: 50%; right: auto; left: -4px; width: 6px; height: 6px; margin-top: -3px; }
.trow-proj { flex: none; width: 4px; height: 18px; border-radius: 2px; background: var(--pc); }
.trow-num { flex: none; font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-dim); }
.trow-t { flex: 1; min-width: 0; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow-m { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.trow-m .due { font-variant-numeric: tabular-nums; }
.trow-m .blocked-flag .icon { width: 13px; height: 13px; }
.tcard.trow .avatar { width: 22px; height: 22px; font-size: 10px; flex: none; }
.trow-more { display: none; }
.show-all .trow-more { display: flex; }
.dash-more {
  align-self: flex-start; margin-top: 6px; padding: 4px 0; min-height: 0;
  background: none; color: var(--accent); font-size: 13px; font-weight: 600;
}
.dash-more:hover { text-decoration: underline; }

/* Breit: Seitenleiste */
@media (min-width: 900px) {
  #app { padding-left: 232px; }
  #topbar {
    position: fixed; top: 0; bottom: 0; left: 0; width: 232px; z-index: 50;
    flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 6px;
    padding: 16px 12px 12px; border-bottom: 0; border-right: 1px solid var(--border); overflow-y: auto;
  }
  .brand { padding: 2px 8px 10px; font-size: 18px; }
  .project-switch { max-width: none; width: 100%; min-height: 42px; margin-bottom: 14px; }
  .project-switch .ps-name { flex: 1; min-width: 0; max-width: none; text-align: left; }
  #nav { flex-direction: column; gap: 2px; overflow: visible; }
  #nav button { width: 100%; min-height: 40px; padding: 8px 10px; gap: 10px; font-size: 14.5px; }
  #nav button:hover { color: var(--text); background: var(--bg3); }
  #nav button.active { background: var(--bg3); box-shadow: inset 0 0 0 1px var(--border); }
  #nav button.active .icon { color: var(--accent); }
  #nav kbd { display: inline; margin-left: auto; font: 11px ui-monospace, monospace; color: var(--text-dim); opacity: .7; }
  .topbar-right { margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--border); gap: 8px; }
  #topbar-username { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #subnav { position: sticky; top: 0; z-index: 40; min-height: 52px; padding: 6px 16px; background: var(--bg2); }
  #workbar { padding: 16px 16px 4px; }
  #filterbar { padding: 8px 16px; }
  #views { padding: 16px; }
}

/* Handy: Bereiche als Leiste unten, oben nur Projekt, Profil und Menü */
@media (max-width: 640px) {
  #app { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  #nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; order: 9;
    display: flex; gap: 0; padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    background: var(--bg2); border-top: 1px solid var(--border);
  }
  #nav button { flex: 1 1 0; flex-direction: column; gap: 2px; min-height: 52px; padding: 4px; font-size: 11.5px; justify-content: center; }
  #nav button.active { background: none; color: var(--accent); }
  #subnav { position: sticky; top: 0; z-index: 40; background: var(--bg2); }
  #topbar { position: static; }
  #workbar { padding: 8px 8px 2px; }
  #subnav-views button { min-height: 38px; padding: 6px 12px; font-size: 14px; }
  #toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .kcol { max-height: calc(100vh - 260px); }
  #view-graph { height: calc(100vh - 260px); }
}

/* Schnell-Check: Startfenster (was gehe ich durch?) */
.qc-start { padding: 4px 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.qc-lead { color: var(--text-dim); font-size: 14px; }
.qc-opts { display: flex; flex-direction: column; gap: 8px; }
.qc-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  transition: border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
}
.qc-opt:hover:not(:disabled) { border-color: var(--accent); background: var(--bg3); }
.qc-opt:disabled { opacity: .5; cursor: default; }
.qc-opt-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qc-opt-t b { font-size: 15px; }
.qc-opt-t span { color: var(--text-dim); font-size: 13px; }
.qc-opt-n { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.qc-opt kbd, .qc-start kbd { font: 11px ui-monospace, monospace; color: var(--text-dim); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
.qc-cols { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); }
.qc-cols > span { margin-right: 4px; }
.qc-col { min-height: 32px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; color: var(--text); }
.qc-col b { color: var(--text-dim); font-weight: 600; margin-left: 2px; }
.qc-col:hover:not(:disabled) { border-color: var(--accent); }
.qc-col:disabled { opacity: .45; }

/* Ordner bearbeiten: Stift am Ordnerkopf (Liste) und Ordnerliste im Projekt-Dialog */
.folder-edit {
  margin-left: auto; min-height: 0; padding: 4px 6px; border-radius: 6px; color: var(--text-dim);
  opacity: 0; transition: opacity var(--motion-fast) var(--ease-out);
}
.folder-edit .icon { width: 14px; height: 14px; }
.folder-group:hover .folder-edit, .folder-edit:focus-visible { opacity: 1; }
.folder-edit:hover { color: var(--text); background: var(--bg3); }
@media (hover: none) { .folder-edit { opacity: 1; } }
.pm-folders { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-folder {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; font-weight: 600;
}
.pm-folder .icon { width: 13px; height: 13px; color: var(--text-dim); }
.pm-folder:hover { border-color: var(--accent); }
.pm-folder-new { color: var(--accent); border-style: dashed; }
.pm-folder-new .icon { color: var(--accent); }
.folder-modal { max-width: 420px; }

/* Heute mit gewähltem Projekt: schmaler Kopf über die volle Breite */
.proj-band { position: relative; border-bottom: 1px solid var(--border); }
.proj-band::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(1,4,9,.72) 0%, rgba(1,4,9,.45) 55%, rgba(1,4,9,.2) 100%);
}
.proj-band-in {
  position: relative; display: flex; align-items: center; gap: 14px;
  max-width: 1232px; margin: 0 auto; padding: 18px 16px; min-height: 84px; color: #fff;
}
.proj-band-in .pav-lg { width: 44px; height: 44px; font-size: 20px; border-radius: 11px; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.proj-band-text { flex: 1; min-width: 0; }
.proj-band-text h1 { font-size: 22px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.proj-band-text span { font-size: 13.5px; color: rgba(255,255,255,.82); }
.proj-band-text b { color: #ffb4ae; }
.proj-band-in .btn {
  min-height: 34px; padding: 4px 12px; font-size: 13px; color: #fff;
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); backdrop-filter: blur(6px);
}
.proj-band-in .btn:hover { background: rgba(255,255,255,.22); }
.proj-band-in .btn .icon { width: 14px; height: 14px; }
@media (max-width: 640px) {
  .proj-band-in { padding: 12px; min-height: 64px; gap: 10px; }
  .proj-band-in .pav-lg { width: 36px; height: 36px; font-size: 16px; }
  .proj-band-text h1 { font-size: 18px; }
  .proj-band-in .btn span { display: none; }
  .proj-band-in .btn[data-project] { display: none; } /* „Alle Projekte“ steht im Umschalter oben */
}

/* Deine Ansicht (0.08.2): ruhiger Kopf, einheitliche Widgets, Kennzahlen als schlanke Zeile */
.dash-toolbar { align-items: flex-end; margin: 28px 0 14px; padding-top: 22px; border-top: 1px solid var(--border); }
.dash-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.dash-sub { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
#dash-customize { flex: none; }
.dash-section { position: relative; padding: 14px 16px; border-radius: 12px; }
.dash-section h2 { font-size: 14px; font-weight: 650; margin-bottom: 8px; gap: 6px; min-height: 22px; }
.dash-section h2 .dash-t { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.dash-section h2 .dash-t .icon { width: 14px; height: 14px; color: var(--text-dim); }
.dash-section h2 .count {
  margin-left: auto; min-width: 24px; padding: 1px 8px; border-radius: 999px; text-align: center;
  background: var(--bg3); color: var(--text-dim); font-size: 12px; font-weight: 600;
}
.dash-grip { position: absolute; left: -2px; top: 16px; opacity: 0; }
.dash-section:hover .dash-grip { opacity: .7; }
@media (hover: none) { .dash-grip { position: static; opacity: .55; } }
.dash-hint { color: var(--text-dim); font-size: 12.5px; margin: -4px 0 6px; }
.dash-section.is-empty { padding-block: 12px; }
.dash-section.is-empty h2 { margin-bottom: 2px; color: var(--text-dim); }
.dash-section.is-empty .empty { padding: 0; font-style: normal; font-size: 13px; }
/* Kennzahlen ohne Kasten drumherum */
.dash-section[data-widget="kpis"] { background: none; border: 0; padding: 0; }
.dash-section[data-widget="kpis"] h2 { position: absolute; left: -16px; top: 50%; transform: translateY(-50%); margin: 0; min-height: 0; }
.dash-section[data-widget="kpis"] h2 .dash-t { display: none; }
.dash-section[data-widget="kpis"] .dash-grip { position: static; }
.dash-section[data-widget="kpis"] .stat-kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.dash-section[data-widget="kpis"] .stat-kpi {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 16px; text-align: left; display: flex; flex-direction: column-reverse; gap: 2px;
}
.dash-section[data-widget="kpis"] .stat-num { font-size: 24px; }
.dash-section[data-widget="kpis"] .stat-lbl { margin: 0; font-size: 12.5px; }

/* Ruhigere Ticket-Karten (Kritik #14, #16): Labels als Punkt + Text, Projekt-Abzeichen ohne Fläche */
.lbl { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.lbl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lc); flex: none; }
.tcard .proj-tag { background: none; padding-left: 0; color: var(--text-dim); font-weight: 600; }
.kcol-head { min-height: 46px; white-space: nowrap; }

/* Nach der UI-Kritik (0.08.2) */
/* Projekt-Kacheln auf Heute füllen die Breite (#10); am Handy eine wischbare, flache Reihe (#6) */
.proj-strip { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
@media (max-width: 640px) {
  .proj-strip { display: flex; overflow-x: auto; scrollbar-width: none; gap: 8px; margin: 0 -8px 12px; padding: 0 8px; }
  .proj-strip::-webkit-scrollbar { display: none; }
  .proj-tile { flex: 0 0 auto; flex-direction: row; align-items: center; border-left: 4px solid var(--pc, var(--border)); }
  .proj-tile-cover { display: none; }
  .proj-tile-body { align-items: center; padding: 8px 12px 8px 8px; gap: 8px; }
  .proj-tile-body > .pav-lg { margin-top: 0; width: 28px; height: 28px; font-size: 13px; border: 0; }
  .proj-tile:hover { transform: none; }
}
/* Filterleiste: am Rechner umbrechen statt unsichtbar seitlich scrollen (#4) */
@media (min-width: 900px) {
  #filterbar { flex-wrap: wrap; overflow: visible; max-width: 1232px; margin: 0 auto; border-bottom: 0; }
  #filterbar select, #filterbar input { min-height: 36px; padding-top: 4px; padding-bottom: 4px; }
}
/* Handy: Leisten zeigen am rechten Rand, dass es weitergeht (#22) */
@media (max-width: 899px) {
  #subnav-views, #filterbar { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}
/* Handy: Projekt-Umschalter mit kurzem Namen statt nur Kreisen (#7) */
@media (max-width: 640px) {
  .project-switch .ps-name { display: inline; max-width: 120px; font-size: 13px; }
}
/* Seitenleiste: Tastenkürzel nur beim Darüberfahren, sie sahen aus wie Zähler (#11) */
@media (min-width: 900px) {
  #nav kbd { opacity: 0; transition: opacity var(--motion-fast) var(--ease-out); }
  #nav button:hover kbd, #nav button:focus-visible kbd { opacity: .7; }
}
/* Avatar-Stapel: weniger Überlappung, mit Ring (#21) */
.pav-stack .pav + .pav { margin-left: -5px; }
/* Leerzustände einheitlich nicht kursiv (#25) */
.empty { font-style: normal; }
/* ⋯-Menü in Gruppen (#24) */
.dd-sep { height: 1px; background: var(--border); margin: 4px 0; }
#menu-dropdown button { display: flex; align-items: center; gap: 10px; }
#menu-dropdown button .icon { width: 16px; height: 16px; flex: none; color: var(--text-dim); }
#menu-dropdown button.hidden { display: none; }
#btn-admin.hidden + #btn-platform.hidden + .dd-sep { display: none; } /* keine doppelte Linie ohne Admin-Einträge */

/* ============================================================
   Profil (0.08.2): Profil-Chip unten in der Seitenleiste, Einstellungen mit Profil-Kopf
   ============================================================ */
#topbar-avatar.profile-chip {
  display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1;
  padding: 6px 8px; margin: -2px 0; border-radius: 10px; text-align: left;
  transition: background var(--motion-fast) var(--ease-out);
}
#topbar-avatar.profile-chip:hover { background: var(--bg3); }
#topbar-avatar.profile-chip:hover .avatar { outline: none; }
#topbar-avatar .pc-av { display: inline-flex; flex: none; }
#topbar-avatar .pc-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
#topbar-avatar #topbar-username { color: var(--text); font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
#topbar-avatar #topbar-sub { color: var(--text-dim); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#topbar-avatar #topbar-sub:empty { display: none; }
@media (max-width: 899px) {
  #topbar-avatar.profile-chip { flex: none; padding: 2px; margin: 0; border-radius: 50%; }
  #topbar-avatar .pc-text { display: none; }
}

/* Einstellungen */
.set-modal { max-width: 560px; padding: 0; gap: 0; }
.set-hero {
  --av: var(--accent-solid);
  position: relative; display: flex; align-items: flex-end; gap: 16px;
  padding: 56px 24px 20px; overflow: hidden; flex: none;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--av) 55%, transparent) 0%, transparent 60%),
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--av) 22%, transparent) 0%, transparent 70%),
    var(--bg2);
  border-bottom: 1px solid var(--border);
  transition: background var(--motion-slow) var(--ease-out);
}
.set-hero::after { /* feines Korn gegen Banding */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: linear-gradient(180deg, transparent 40%, var(--bg2) 100%);
}
.set-hero > * { position: relative; z-index: 1; }
.set-x {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; min-height: 0; display: grid; place-items: center; border-radius: 50%;
  color: var(--text-dim); background: color-mix(in srgb, var(--bg) 40%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
}
.set-x:hover { color: var(--text); background: color-mix(in srgb, var(--bg) 70%, transparent); }
.set-x .icon { width: 16px; height: 16px; }
.set-hero-av { position: relative; flex: none; min-height: 0; padding: 0; border-radius: 50%; }
.set-hero-av #set-avpreview {
  width: 76px; height: 76px; font-size: 26px; letter-spacing: -.5px;
  box-shadow: 0 0 0 4px var(--bg2), 0 10px 30px -8px color-mix(in srgb, var(--av) 70%, transparent);
  transition: transform var(--motion) var(--ease-spring), box-shadow var(--motion) var(--ease-out);
}
.set-hero-av:hover #set-avpreview { transform: scale(1.04); }
.set-av-cam {
  position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bg3); color: var(--text);
  border: 3px solid var(--bg2); transition: background var(--motion-fast) var(--ease-out);
}
.set-av-cam .icon { width: 13px; height: 13px; }
.set-hero-av:hover .set-av-cam { background: var(--accent-solid); color: #fff; }
.set-hero-text { min-width: 0; padding-bottom: 4px; }
.set-hero-text h2 { font-size: 22px; font-weight: 700; letter-spacing: -.3px; line-height: 1.15; }
.set-hero-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; font-size: 13px; color: var(--text-dim); }
.set-hero-meta .ticket-id { font-weight: 600; color: var(--text); opacity: .75; }
.set-hero-meta .ticket-id:empty { display: none; }

.set-body { display: flex; flex-direction: column; gap: 22px; padding: 20px 24px 8px; }
.set-sec h3 {
  display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px 2px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-dim);
}
.set-sec h3 .settings-hint-inline { text-transform: none; letter-spacing: 0; font-weight: 500; }
.set-card { border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--bg3) 35%, var(--bg2)); overflow: hidden; }
.set-card-pad { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.set-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; min-height: 56px; }
.set-row + .set-row { border-top: 1px solid var(--border); }
.set-row-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-row-l b { font-size: 14px; font-weight: 600; }
.set-row-l small { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; }
.set-row .btn { min-height: 34px; padding: 6px 12px; font-size: 13.5px; }
.set-row .av-row { flex: none; flex-wrap: nowrap; }
.set-row .av-row > * { min-width: 0; }
.set-row-danger b { color: var(--danger); }
.set-toggle { cursor: pointer; }
.set-toggle:hover { background: color-mix(in srgb, var(--bg3) 50%, transparent); }

/* Farbfelder */
.set-swatches { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 300px; }
.set-swatches [data-sw], .set-sw-custom {
  width: 24px; height: 24px; min-height: 0; padding: 0; border-radius: 50%; flex: none; cursor: pointer;
  background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  transition: transform var(--motion-fast) var(--ease-spring), box-shadow var(--motion-fast) var(--ease-out);
}
.set-swatches [data-sw]:hover, .set-sw-custom:hover { transform: scale(1.15); }
.set-swatches [data-sw][aria-checked="true"], .set-sw-custom.on { box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px var(--sw); }
.set-sw-custom {
  position: relative; overflow: hidden;
  background: conic-gradient(#f85149, #d29922, #2ea043, #0ea5a4, #1f6feb, #8957e5, #db61a2, #f85149);
}
.set-sw-custom.on { background: var(--sw); }
.set-sw-custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; min-height: 0; cursor: pointer; }

/* Design-Kacheln mit Mini-Vorschau */
.set-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.set-themes button {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-height: 0;
  padding: 8px 8px 10px; border-radius: 12px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg3) 35%, var(--bg2));
  font-size: 13px; font-weight: 600; color: var(--text-dim);
  transition: border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-spring);
}
.set-themes button:hover { color: var(--text); transform: translateY(-1px); }
.set-themes button[aria-checked="true"] { color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.set-th-prev { position: relative; display: block; height: 54px; border-radius: 7px; overflow: hidden; border: 1px solid rgba(127,127,127,.25); }
.set-th-prev i { position: absolute; border-radius: 3px; }
.set-th-prev i:first-child { left: 8px; top: 8px; bottom: 8px; width: 22%; }
.set-th-prev i:last-child { left: calc(22% + 16px); right: 8px; top: 8px; height: 10px; }
.th-dark { background: #0d1117; } .th-dark i { background: #21262d; } .th-dark i:last-child { background: #1f6feb; }
.th-light { background: #f6f8fa; } .th-light i { background: #d0d7de; } .th-light i:last-child { background: #0969da; }
.th-auto { background: linear-gradient(135deg, #f6f8fa 0 50%, #0d1117 50% 100%); }
.th-auto i { background: #8b949e; } .th-auto i:last-child { background: #1f6feb; }

/* Schalter statt Häkchen */
input.switch {
  appearance: none; -webkit-appearance: none; flex: none; position: relative;
  width: 40px; height: 24px; min-height: 0; padding: 0; margin: 0; border-radius: 999px; cursor: pointer;
  background: var(--bg3); border: 1px solid var(--border);
  transition: background var(--motion) var(--ease-out), border-color var(--motion) var(--ease-out);
}
input.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: transform var(--motion) var(--ease-spring);
}
input.switch:checked { background: var(--accent-solid); border-color: var(--accent-solid); }
input.switch:checked::after { transform: translateX(16px); }
input.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.set-mcp-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.set-mcp-foot .btn { min-height: 34px; font-size: 13.5px; }
.set-foot {
  position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 8px;
  padding: 12px 24px; margin-top: 12px; border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg2) 85%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.set-foot .settings-version { flex: 1; margin: 0; font-size: 12px; display: flex; flex-direction: column; }
.set-foot .btn { min-height: 38px; }
@media (max-width: 640px) {
  .set-hero { padding: 64px 16px 18px; }
  .set-body { padding: 16px 16px 8px; }
  .set-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .set-row { flex-wrap: wrap; }
  .set-swatches { flex: 1 1 100%; max-width: none; justify-content: flex-start; padding: 2px 0 2px 2px; }
  .set-foot .settings-version { display: none; }
}

/* Tastenkürzel-Übersicht */
.keys-modal { max-width: 640px; padding: 20px 22px 22px; }
.keys-head { display: flex; align-items: center; margin-bottom: 14px; }
.keys-head h2 { font-size: 18px; margin-right: auto; }
.keys-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.keys-grid h3 { font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.keys-grid p { display: flex; align-items: center; gap: 4px; padding: 5px 0; font-size: 13.5px; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.keys-grid p span { margin-left: 8px; }
.keys-grid kbd { min-width: 22px; text-align: center; }
.dd-kbd { margin-left: auto; font: 11px ui-monospace, monospace; color: var(--text-dim); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
#btn-keys { display: flex; align-items: center; gap: 8px; width: 100%; }
@media (max-width: 640px) { .keys-grid { grid-template-columns: 1fr; } #btn-keys { display: none; } }

/* ============================================================
   Nach der UX-/UI-Kritik (2026-10-12)
   ============================================================ */
/* Knöpfe hüpfen nicht mehr; nur ein kurzes Eindrücken */
.btn:hover { transform: none; }
.btn:active { transform: scale(.98); transition-duration: 60ms; transition-timing-function: ease-out; }

/* Overlay: weniger schwarz, dafür Tiefe durch Unschärfe */
.overlay {
  background: rgba(6, 8, 12, .55);
  -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%);
}
.modal { box-shadow: 0 24px 64px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04); }
:root[data-theme="light"] .modal { box-shadow: 0 24px 64px -16px rgba(31,35,40,.3); }

/* Kanban: Spalte tiefer als die Karten, Hover neutral statt blau */
.kcol { background: color-mix(in srgb, var(--bg2) 45%, var(--bg)); }
.kcol-head { background: transparent; }
.kcol .tcard { box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 1px 2px rgba(0,0,0,.3); }
.tcard:hover {
  border-color: color-mix(in srgb, var(--text) 22%, transparent);
  background: color-mix(in srgb, var(--bg2) 94%, var(--text));
  transform: none; box-shadow: 0 4px 12px -4px rgba(0,0,0,.4);
}
.tcard.trow:hover { background: var(--bg3); box-shadow: none; }
:root[data-theme="light"] .kcol { background: color-mix(in srgb, var(--bg3) 70%, var(--bg)); }
:root[data-theme="light"] .tcard:hover { background: var(--bg2); box-shadow: 0 4px 12px -6px rgba(31,35,40,.25); }
/* „Durchgehen“ im Spaltenkopf erst beim Überfahren */
@media (hover: hover) {
  .kcol-run { opacity: 0; transition: opacity var(--motion-fast) var(--ease-out); }
  .kcol:hover .kcol-run, .kcol-run:focus-visible { opacity: 1; }
}

/* Schwebende Kartenknöpfe: deckend mit weichem Auslauf nach links, kein Federn, kein Glas über Text */
@media (hover: hover) {
  .t-quick {
    right: 6px; bottom: 6px; gap: 2px; border: 0; border-radius: 8px;
    background: var(--bg3); -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent), -14px 0 12px -2px var(--bg2), 0 4px 12px -4px rgba(0,0,0,.5);
    transform: translateX(4px);
    transition: opacity .12s ease-out, transform .2s var(--ease-out);
  }
  .tcard:hover .t-quick { transition-delay: 80ms; }
  .tq { min-height: 26px; padding: 3px 8px; border-radius: 6px; }
  .tq .icon { transition: transform .2s var(--ease-out); }
}
.tq-done:hover { background: #238636; color: #fff; }
.tq-done:hover .icon { transform: none; }
.tcard.moved-glow { animation-name: moved-ring; }
@keyframes moved-ring {
  0%, 30% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Label-Chips getönt statt satt gefüllt; im Auswahlfeld nicht gewählte nur umrandet */
.chip {
  background: color-mix(in srgb, var(--lc, var(--text-dim)) 18%, transparent);
  color: color-mix(in srgb, var(--lc, var(--text-dim)) 62%, var(--text));
}
.label-picker .chip { opacity: 1; background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--text-dim); }
.label-picker .chip:hover { color: var(--text); }
.label-picker .chip.on { background: color-mix(in srgb, var(--lc) 18%, transparent); color: color-mix(in srgb, var(--lc) 62%, var(--text)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc) 40%, transparent); }

/* Meta-Zeile: Prio und Aufwand in derselben ruhigen Kastensprache, Zahlen tabellarisch */
.pill { height: 18px; display: inline-flex; align-items: center; border-radius: 5px; padding: 0 6px; font-weight: 600; }
.prio-High { background: color-mix(in srgb, #f0883e 16%, transparent); color: #f0a060; }
.prio-Urgent { background: color-mix(in srgb, #ff7b72 16%, transparent); color: #ff8f87; }
.est-tag { border: 0; background: color-mix(in srgb, var(--text) 7%, transparent); border-radius: 5px; font-weight: 600; }
.due, .count, .qc-progress, .stat-num, .list-count { font-variant-numeric: tabular-nums; }

/* Marke: Zeichen + Name, ohne blaues Zweitwort, enger gesetzt */
.brand { gap: 8px; font-weight: 700; letter-spacing: -.02em; }
.brand span { color: var(--text-dim); font-weight: 600; margin-left: 0; }
.brand-mark { width: 20px; height: 20px; flex: none; }
.brand-mark .lg1 { fill: var(--accent); opacity: .55; }
.brand-mark .lg2 { fill: var(--accent); }
.brand-mark .lg3 { fill: var(--accent); opacity: .3; }

/* Ansichtsleiste: Tabs auf Inhaltsbreite, kompakter; Glas über ::before, die Höhe bleibt beim Kleben gleich */
#workbar, #workbar.stuck { padding: 12px 16px 8px; }
#workbar.stuck { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
#workbar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent), 0 12px 24px -16px rgba(0,0,0,.7);
  transition: opacity var(--motion) var(--ease-out);
}
#workbar.stuck::before { opacity: 1; }
#subnav-views {
  position: relative; display: inline-flex; max-width: none; margin: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01)), color-mix(in srgb, var(--bg2) 85%, transparent);
  border-color: color-mix(in srgb, var(--text) 9%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.35);
  transition: box-shadow var(--motion) var(--ease-out);
}
#workbar.stuck #subnav-views { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)), color-mix(in srgb, var(--bg2) 80%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px -10px rgba(0,0,0,.6); }
#subnav-views button, #workbar.stuck #subnav-views button { flex: 0 0 auto; min-height: 34px; padding: 6px 16px; font-size: 13.5px; font-weight: 600; border-radius: 8px; }
#subnav-views button.active { background: color-mix(in srgb, var(--text) 9%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.4); }
#subnav-views button[data-view="archive"]::before { top: 8px; bottom: 8px; }
:root[data-theme="light"] #subnav-views, :root[data-theme="light"] #workbar.stuck #subnav-views { background: var(--bg2); box-shadow: 0 1px 2px rgba(31,35,40,.08); }
:root[data-theme="light"] #workbar::before { background: color-mix(in srgb, var(--bg) 78%, transparent); box-shadow: 0 1px 0 var(--border); }
:root[data-theme="light"] #subnav-views button.active { background: var(--bg3); box-shadow: inset 0 0 0 1px var(--border); }
@media (max-width: 640px) {
  #workbar, #workbar.stuck { padding: 8px 8px 4px; }
  #subnav-views { display: flex; }
}

/* Menüs dichter, am Auslöser verankert bleibt wie bisher */
.dropdown { padding: 4px; border-radius: 10px; box-shadow: 0 8px 24px -8px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04); }
@media (pointer: fine) {
  .dropdown button { min-height: 34px; padding: 7px 10px; font-size: 13.5px; border-radius: 6px; }
  .dropdown .dd-sep { margin: 4px 6px; }
  .dropdown .legal-links { padding: 8px 10px 4px; }
}

/* Sichtbarer Tastaturfokus überall */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Schnell-Check: ruhiger Vorschlag, Farbe nur am Text des Ziels, Kartenstapel angedeutet */
.qc-modal { min-height: min(560px, 80vh); }
.qc-sugg {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg2)); border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--text);
}
.qc-sugg:hover { background: color-mix(in srgb, var(--accent) 18%, var(--bg2)); }
.qc-sugg .qc-sugg-target { color: var(--accent); font-weight: 700; }
.qc-sugg kbd { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--text); }
.qc-act.qc-done, .qc-act.qc-archive { color: var(--text); }
.qc-act.qc-done span::before, .qc-act.qc-archive span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: var(--ok); }
.qc-act.qc-archive span::before { background: var(--danger); }
.qc-bar { height: 2px; }
.qc-bar span { box-shadow: 0 0 8px var(--accent); }
.qc-card { position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px -8px rgba(0,0,0,.5); }
/* Gerichteter Ausgang je Entscheidung, die nächste Karte kommt ruhig nach */
.qc-card { animation: qc-next .22s var(--ease-out); }
@keyframes qc-next { from { opacity: .4; transform: scale(.97); } }
.qc-card.out-right { animation: qc-out-right .18s ease-in forwards; }
.qc-card.out-up { animation: qc-out-up .18s ease-in forwards; }
.qc-card.out-down { animation: qc-out-down .18s ease-in forwards; }
@keyframes qc-out-right { to { opacity: 0; transform: translateX(48px) rotate(2deg); } }
@keyframes qc-out-up { to { opacity: 0; transform: translateY(-24px) scale(.98); box-shadow: 0 0 0 2px var(--ok); } }
@keyframes qc-out-down { to { opacity: 0; transform: translateY(18px) scale(.97); } }
.qc-stamp {
  position: absolute; top: 14px; right: 14px; padding: 3px 10px; border-radius: 6px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .3px; color: #fff; background: var(--accent-solid);
  animation: qc-stamp .18s var(--ease-spring);
}
.qc-stamp.ok { background: #238636; }
.qc-stamp.dim { background: var(--bg3); color: var(--text); }
.qc-stamp.bad { background: var(--danger); }
@keyframes qc-stamp { from { opacity: 0; transform: scale(1.3) rotate(-4deg); } }

/* Einstellungen: Feinschliff */
.set-av-cam { opacity: 0; transition: opacity .15s var(--ease-out), background var(--motion-fast) var(--ease-out); }
.set-hero-av:hover .set-av-cam, .set-hero-av:focus-visible .set-av-cam, .set-hero-av.no-img .set-av-cam { opacity: 1; }
.set-swatches [data-sw]:hover, .set-sw-custom:hover { transform: scale(1.1); transition: transform .15s ease-out; }
.th-auto { background: linear-gradient(90deg, #f6f8fa 0 50%, #0d1117 50% 100%); }
.th-auto i:first-child { background: #d0d7de; }
.set-row-danger b { color: var(--text); }
#account-delete { color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); }
#account-delete:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
/* Mit Maus: Felder kompakter, eigener Pfeil statt System-Pfeil, Fokus als weicher Ring */
@media (pointer: fine) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.switch), select { min-height: 38px; padding: 7px 11px; }
  .btn { min-height: 38px; }
}
select {
  -webkit-appearance: none; appearance: none; padding-right: 30px;
  background: var(--bg3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center / 14px;
}
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Kartenknöpfe mit Maus nur als Symbole, damit sie die Meta-Zeile kaum verdecken;
   das Ziel klappt erst unter dem Mauszeiger auf. Auslauf in der Farbe der Karte. */
.tcard { --card-bg: var(--bg2); }
.tcard:hover { --card-bg: color-mix(in srgb, var(--bg2) 94%, var(--text)); }
:root[data-theme="light"] .tcard:hover { --card-bg: var(--bg2); }
@media (hover: hover) {
  .t-quick { box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent), -16px 0 10px -2px var(--card-bg), 0 4px 12px -4px rgba(0,0,0,.5); }
  .t-quick .tq { padding: 3px 6px; gap: 0; }
  .t-quick .tq span {
    max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
    transition: max-width .22s var(--ease-out), opacity .15s ease-out, margin .22s var(--ease-out);
  }
  .t-quick .tq:hover span, .t-quick .tq:focus-visible span { max-width: 120px; opacity: 1; margin-left: 5px; }
}
@media (hover: hover) {
  .t-quick .tq { border: 0; }
  .t-quick .tq:not(:hover) { background: transparent; }
}
/* Spaltenköpfe gleich hoch, mit oder ohne „Durchgehen“ */
.kcol-head { height: 46px; min-height: 0; box-sizing: border-box; }
.kcol-run { min-height: 28px; padding-block: 2px; }
/* Claude-Avatar auch im hellen Design sichtbar */
.avatar.av-agent { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* Schnell-Check: Fußzeile unten statt Leerraum darunter */
.qc-foot { margin-top: auto; }
/* Glasleiste deckt bis zur Kante */
#workbar::before { inset: 0 0 -1px; }