/* Design-Variablen liegen zentral in public/tokens.css (Auftrag C). */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--ink);
  background: var(--paper); font-size: var(--font-size-base); line-height: 1.45;
}
button { font-family: inherit; font-size: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; }
/* Native Bedienelemente liegen zentral in public/shell.css. */
[hidden] { display: none !important; }

/* ───────────── Buttons ───────────── */
/* Knöpfe (.btn/.btn-primary/.btn-accent/.btn-ghost/.btn-sm/.btn-danger, .primary/.ghost/
   .danger-text/.small) liegen zentral in public/shell.css – identisch in beiden Oberflächen. */

/* ───────────── Login ───────────── */
.login-wrap { min-height: 100%; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1200px 600px at 50% -10%, #4a3d78 0%, var(--violet-deep) 60%); }
.login-card { background: #fff; width: 100%; max-width: 380px; border-radius: 16px;
  padding: 34px 30px; box-shadow: 0 20px 60px rgba(20,12,45,.4); }
.login-card h1 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.02em; color: var(--violet); }
.login-card .sub { color: var(--muted); margin: 0 0 22px; font-size: 13.5px; }
.login-forgot { width: 100%; justify-content: center; margin-top: 12px; }
/* Auftrag G Teil 2: weiterer Arbeitsbereich */
.login-slot { width: 100%; justify-content: center; margin-top: 6px; color: var(--muted); }
.login-slot-hint { font-size: 12px; color: var(--muted); text-align: center; margin-top: 10px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; color: var(--ink); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(56,45,94,.12); }
.form-error { color: var(--red); font-size: 13px; min-height: 18px; margin: 2px 0 8px; }

/* ───────────── App shell ───────────── */
.app { display: grid; grid-template-columns: 264px 1fr; height: 100vh; }

.sidebar { background: #FBFAFE; color: #4a4566; display: flex; flex-direction: column;
  border-right: 1px solid #ECEAF2; }
.brand { padding: 13px 16px 9px; font-weight: 800; font-size: 17px; letter-spacing: -.01em;
  color: var(--violet); display: flex; align-items: center; gap: 9px; }
.brand .brand-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--violet); }
/* Auftrag F: Accountname unter dem Produktnamen – klein, grau, dezent */
.brand-account { padding: 0 16px 8px 36px; margin-top: -4px; font-size: 12px; font-weight: 600;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
/* Blockierender Hinweis bei überschriebener Sitzung (anderer Zugang in einem anderen Reiter) */
.account-switch-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(20,12,45,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.account-switch-box { background: var(--paper, #fff); border: 1px solid var(--line); border-radius: 12px;
  max-width: 440px; width: 100%; padding: 22px 24px; box-shadow: 0 18px 50px rgba(20,12,45,.22); }
.account-switch-box h2 { margin: 0 0 8px; font-size: 18px; color: var(--violet); }
.account-switch-box p { margin: 0 0 16px; color: var(--ink); font-size: 14px; line-height: 1.45; }
.account-switch-box .btn { width: 100%; }
.side-collapse { background: none; border: 0; color: #9990b3; padding: 4px; border-radius: 7px;
  display: inline-flex; cursor: pointer; transition: background .12s, color .12s; }
.side-collapse:hover { background: #F0ECFA; color: var(--violet); }
.side-collapse svg { width: 18px; height: 18px; }
.sidebar-reopen { display: none; }
.brand .dot { width: 11px; height: 11px; border-radius: 3px; background: var(--red);
  box-shadow: 0 0 0 3px rgba(200,68,73,.25); }
.side-label { font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: #a39cbd; padding: 6px 18px; }
.mandant-list { flex: 1; overflow-y: auto; padding: 2px 10px 10px; }
.mandant-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 8px; color: #56516e; cursor: pointer; position: relative; margin-bottom: 2px; }
.mandant-item:hover { background: #F0ECFA; }
.mandant-item.active { background: #EDE8FA; color: var(--violet); }
.mandant-item.active::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px;
  width: 4px; border-radius: 0 4px 4px 0; background: var(--red); }
.mandant-item .swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mandant-item .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.mandant-item.archived .nm { opacity: .55; font-style: italic; }
.add-mandant { margin: 4px 14px 10px; }
.add-mandant .btn { width: 100%; background: #F1EFF8; color: #56516e; border: 1px solid #E6E2F0;
  border-radius: 9px; padding: 8px 10px; font-size: 12.5px; font-weight: 600; }
.add-mandant .btn:hover { background: #E9E5F4; border-color: var(--violet-700); }
.sidebar-footer { border-top: 1px solid #ECEAF2; padding: 8px 12px 10px; display: flex;
  flex-direction: column; gap: 6px; }
.sidebar-footer .who { font-size: 12.5px; color: #4a4566; display: flex; align-items: center; gap: 7px; }
.ro-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #8a6d1e; background: #fbf1d0; border: 1px solid #ecd9a0; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
/* Nur-Lese-Konten: zentrale Schreib-Schaltflächen ausblenden (Backend sperrt zusätzlich alle Änderungen) */
body.readonly #sdEdit,
body.readonly #addMandantBtn2,
body.readonly #addMandantEmpty,
body.readonly #addMandantList,
body.readonly #mandNoteSave,
body.readonly .chat-input,
body.readonly .btn-danger { display: none !important; }
body.readonly #mandNote { background: #f6f5f9; color: var(--muted); }
.sidebar-footer .who .av { width: 24px; height: 24px; border-radius: 50%; background: var(--red);
  color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.foot-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.foot-actions .btn.btn-sm { padding: 5px 8px; font-size: 12px; }
.foot-actions .btn { background: #F1EFF8; border: 1px solid #E6E2F0; color: #56516e; }
.foot-actions .btn:hover { background: #E9E5F4; border-color: var(--violet-700); }

/* ───────────── Workspace ───────────── */
.workspace { display: flex; flex-direction: column; min-width: 0; background: var(--paper); }
.ws-empty { flex: 1; display: grid; place-items: center; color: var(--muted); text-align: center; padding: 40px; }
.ws-empty .big { font-size: 17px; color: var(--violet); font-weight: 700; margin-bottom: 6px; }
.ws-header { background: #fff; border-bottom: 1px solid var(--line); padding: 14px 22px 0;
  display: flex; flex-direction: column; gap: 12px; }
.ws-title { display: flex; align-items: center; gap: 11px; }
.ws-title .swatch { width: 14px; height: 14px; border-radius: 4px; }
.ws-title h2 { margin: 0; font-size: 19px; letter-spacing: -.01em; }
.ws-title .spacer { flex: 1; }
.ws-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 2px; font-size: 12.5px; color: var(--muted); }
.badge-type { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 10px; }
.badge-type.firma { background: #ECEAF4; color: var(--violet); }
.badge-type.privat { background: #E6F0E9; color: #1f6b3a; }
.badge-status { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 10px;
  background: #fbf1d0; color: #79570d; font-size: 11.5px; font-weight: 700; }
.ws-link { color: var(--muted); }
.tag-privat { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 5px;
  font-size: 10.5px; font-weight: 700; border-radius: 4px; background: #2e7d52; color: #fff; flex: 0 0 auto; }
.tabs { display: flex; gap: 2px; }
.tab { padding: 9px 16px 11px; border: none; background: none; color: var(--muted);
  font-weight: 700; border-bottom: 3px solid transparent; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--violet); border-bottom-color: var(--red); }
.tab .count { font-size: 11px; background: var(--paper-2); color: var(--muted);
  padding: 1px 7px; border-radius: 20px; margin-left: 6px; font-weight: 700; }
.ws-body { flex: 1; min-height: 0; overflow: hidden; }

/* ───────────── Chat ───────────── */
.chat { height: 100%; display: flex; flex-direction: column; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex;
  flex-direction: column; gap: 12px; }
.msg { max-width: 76%; display: flex; align-items: flex-end; gap: 8px; }
.msg .msg-col { min-width: 0; display: flex; flex-direction: column; }
.msg-ava { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--violet);
  color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; align-self: flex-end; }
.msg .meta { font-size: 11.5px; color: var(--muted); margin: 0 0 3px 2px; }
.msg .meta-grouped { margin: 0 0 2px 2px; opacity: .8; }
.msg .bubble { background: #fff; border: 1px solid var(--line); padding: 9px 13px;
  border-radius: 14px; border-bottom-left-radius: 5px; white-space: pre-wrap; word-wrap: break-word; }
.msg.deleted .bubble { color: var(--muted); background: #f7f5fa; border-style: dashed; }
.chat-attachment { display: grid; gap: 2px; margin-top: 8px; padding: 8px 10px; border: 1px solid #ded8e8; border-radius: 7px; background: rgba(255,255,255,.72);
  color: var(--violet); text-decoration: none; white-space: normal; }
.chat-attachment:hover { background: #fff; border-color: var(--violet-700); }
.chat-attachment-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attachment span:last-child { color: var(--muted); font-size: 11.5px; }
.msg.grouped { margin-top: -7px; }
.msg.grouped .bubble { border-bottom-left-radius: 14px; border-top-left-radius: 5px; }
.msg.mine { align-self: flex-end; }
.msg.mine .msg-col { align-items: flex-end; }
.msg.mine .meta { text-align: right; margin: 0 2px 3px 0; }
.msg.mine .bubble { background: var(--violet); color: #fff; border-color: var(--violet);
  border-bottom-left-radius: 14px; border-bottom-right-radius: 5px; }
.msg.mine.grouped .bubble { border-bottom-right-radius: 14px; border-top-right-radius: 5px; }
.chat-day { align-self: center; font-size: 11.5px; color: var(--muted); background: var(--paper-2);
  padding: 2px 12px; border-radius: 20px; }
.chat-input { border-top: 1px solid var(--line); background: #fff; padding: 12px 16px;
  display: flex; gap: 10px; align-items: flex-end; position: relative; }
.chat-input textarea { flex: 1; resize: none; max-height: 140px; padding: 11px 16px;
  border: 1px solid var(--line); border-radius: 22px; background: var(--paper-2); }
.chat-input textarea:focus { outline: none; border-color: var(--violet); background: #fff; box-shadow: 0 0 0 3px rgba(56,45,94,.12); }
.chat-attach-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--violet); cursor: pointer;
  font-size: 21px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.chat-attach-btn:hover, .chat-attach-btn.has-file { background: #F0ECFA; border-color: #D8D0E5; }
.chat-attach-btn.has-file { box-shadow: inset 0 0 0 2px rgba(200,68,73,.18); color: var(--red); }
.chat-send-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--violet); color: #fff; display: grid; place-items: center; transition: background .12s, transform .08s; }
.chat-send-btn svg { width: 18px; height: 18px; margin-left: -1px; }
.chat-send-btn:hover { background: var(--violet-deep); }
.chat-send-btn:active { transform: scale(.92); }
/* @-Erwähnungen: Auswahlliste über dem Eingabefeld */
.mention-pop { position: absolute; left: 16px; bottom: calc(100% - 6px); z-index: 30;
  min-width: 220px; max-width: 320px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 5px; max-height: 240px; overflow-y: auto; }
.mention-opt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: 0; background: none; padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--ink); }
.mention-opt.active { background: color-mix(in srgb, var(--violet) 10%, #fff); }
.mention-ava { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--violet); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.mention-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Chat-Kategorien (Kanäle je Mandant) */
.chat-cats { display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.chat-cat { position: relative; border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 20px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; }
.chat-cat:hover { border-color: var(--violet-700); }
.chat-cat.active { background: var(--violet); color: #fff; border-color: var(--violet); }
.chat-cat-badge { background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; }
.chat-cat.active .chat-cat-badge { background: #fff; color: var(--red); }
.chat-cat-manage { margin-left: auto; border: 1px dashed var(--violet-700); background: #fff; color: var(--violet);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 11px; border-radius: 8px; cursor: pointer; font-size: 12.5px; font-weight: 700; line-height: 1; }
.chat-cat-manage:hover { background: var(--violet); border-color: var(--violet); color: #fff; }
.chat-cat-manage .ccm-ico { font-size: 14px; }
.chat-emoji-btn { flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%;
  background: #fff; color: var(--violet); font-size: 18px; font-weight: 700; display: inline-grid; place-items: center; }
.chat-emoji-btn:hover { border-color: var(--violet); background: #f6f4fc; }
.emoji-popover { position: fixed; z-index: 260; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
  width: 222px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  box-shadow: 0 10px 34px rgba(20,12,40,.18); }
.emoji-popover button { width: 22px; height: 22px; border: 0; border-radius: 5px; background: transparent; font-size: 17px; }
.emoji-popover button:hover { background: #f1eef8; }
/* Kategorien-Verwaltung (Modal) */
.cat-manage .cat-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.cat-manage .cat-name { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.cat-manage .cat-add { display: flex; gap: 8px; align-items: center; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--line); }
.cat-manage .cat-add input { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.btn-sm { padding: 6px 10px; font-size: 13px; }

/* ───────────── Board ───────────── */
.board { height: 100%; display: flex; align-items: flex-start;
  gap: 14px; padding: 18px 22px; overflow-x: auto; }
.column { background: #e7e4ee; border-radius: 12px; display: flex; flex-direction: column;
  flex: 0 0 300px; max-height: 100%; }
.column.drop-hot { outline: 2px dashed var(--violet); outline-offset: -4px; }
.column-head { padding: 12px 14px 8px; display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--violet); }
.column-head .pill { background: #fff; color: var(--muted); font-size: 11px; padding: 1px 8px;
  border-radius: 20px; }
.column-head .dotcol { width: 9px; height: 9px; border-radius: 50%; }
.cards { flex: 1; overflow-y: auto; padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 9px; }
.kcard { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
  box-shadow: var(--shadow); cursor: grab; }
.kcard:active { cursor: grabbing; }
.kcard.dragging { opacity: .4; }
.kcard .ktitle { font-weight: 700; }
.kcard .kdesc { color: var(--muted); font-size: 12.5px; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kcard .kmeta { display: flex; align-items: center; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.chip { font-size: 11.5px; padding: 2px 9px; border-radius: 20px; font-weight: 600; }
.chip.assignee { background: #efeaf7; color: var(--violet); }
.assignee-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: 170px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.assignee-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 7px;
  border-radius: 5px;
  cursor: pointer;
}
.assignee-option:hover { background: var(--paper); }
.assignee-option input { flex: 0 0 auto; }
.assignee-option span { min-width: 0; overflow-wrap: anywhere; }
.chip.due { background: #eef4f0; color: var(--ok); }
.chip.due.over { background: #fbe9ea; color: var(--red); }
.add-card { margin: 4px 10px 12px; }
.add-card button { width: 100%; background: #ffffff8c; border: 1px dashed #b9b2cf; color: var(--violet);
  border-radius: 9px; padding: 8px; font-weight: 700; }
.add-card button:hover { background: #fff; }

/* ───────────── Files ───────────── */
.files { height: 100%; overflow-y: auto; padding: 18px 22px; }
.dropzone { border: 2px dashed #b9b2cf; border-radius: 12px; padding: 22px; text-align: center;
  color: var(--muted); background: #fff; margin-bottom: 16px; transition: .15s; }
.dropzone.hot { border-color: var(--violet); background: #f3f0fa; color: var(--violet); }
.dropzone strong { color: var(--violet); }
/* Auftrag I Teil 1/2: Drop-Overlay, Toast, Einfüge-Vorschau */
.kh-dropzone { position: relative; }
.kh-dropzone.kh-dragging { outline: 2px dashed var(--violet); outline-offset: -6px; }
.kh-dropzone.kh-dragging::after { content: 'Dateien hier ablegen'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: var(--violet); background: rgba(243,240,250,.82); border-radius: inherit; pointer-events: none; z-index: 30; }
.kh-toast-host { position: fixed; right: 16px; bottom: 16px; z-index: 9500; display: flex; flex-direction: column; gap: 8px; max-width: 400px; }
.kh-toast { background: var(--violet-deep); color: #fff; border-radius: 9px; padding: 10px 14px; font-size: 13px; line-height: 1.4;
  box-shadow: 0 8px 24px rgba(20,12,45,.22); transition: opacity .35s, transform .35s; }
.kh-toast-warn { background: var(--red); }
.kh-toast.out { opacity: 0; transform: translateY(8px); }
.kh-paste-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.kh-paste-thumb { width: 46px; height: 46px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; flex: 0 0 auto; }
.kh-paste-ic { width: 46px; height: 46px; display: grid; place-items: center; background: #f0edf6; color: var(--violet); border-radius: 6px; font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.kh-paste-name { flex: 1; min-width: 0; }
.file-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 14px; margin-bottom: 8px; }
.file-ic { width: 36px; height: 36px; border-radius: 8px; background: #efeaf7; color: var(--violet);
  display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: none; }
.file-main { flex: 1; min-width: 0; }
.file-main .fn { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-main .fmeta { font-size: 12px; color: var(--muted); }

/* ───────────── Modal ───────────── */
.modal-bg { position: fixed; inset: 0; background: rgba(28,20,52,.45); display: grid;
  place-items: center; padding: 20px; z-index: 80; }
.modal { background: #fff; border-radius: 14px; width: 100%; max-width: 460px;
  box-shadow: 0 24px 70px rgba(20,12,45,.4); max-height: 90vh; overflow-y: auto; }
.modal.modal-wide { max-width: 720px; }
.modal.modal-wide.modal-settings { width: min(1080px, calc(100vw - 40px)); max-width: 1080px; }
.impersonation-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 14px;
  background: #1f2937;
  color: #fff;
  box-shadow: 0 -8px 24px rgba(0,0,0,.16);
  font-size: 14px;
}
.has-impersonation { padding-bottom: 56px; }
/* Auftrag G Teil 1: roter, nicht wegklickbarer Warnstreifen bei Betreiber-Zugriff (oben) */
.operator-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 1300;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 9px 14px; background: var(--red); color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,.18); text-align: center; }
.operator-banner .btn { background: #fff; color: var(--red); border: 0; font-weight: 700; white-space: nowrap; }
.operator-banner .btn:hover { background: #ffe9ea; }
body.has-operator .app { height: calc(100vh - 42px); margin-top: 42px; }
.side-account-switch { padding: 2px 16px 8px 36px; }
.side-account-switch .linkbtn { color: var(--red); font-size: 12px; padding: 0; }
.portal-row .linkbtn { margin-left: 8px; }

.portal-target-mode { margin-top: 4px; }
.portal-mode-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}
.portal-mode-options .chkline { margin: 0; }
#pa-new-wrap[hidden],
#pa-existing-wrap[hidden] { display: none !important; }
.access-mandant-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px 12px;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}
.avv-preview {
  max-height: 42vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}
/* Platzhalter-Hilfe & Vorlagen-Editor */
.ph-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.ph-chip { font: inherit; font-size: 12px; background: #faf9fd; border: 1px solid var(--line);
  color: var(--violet); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.ph-chip:hover { background: #efeaf8; }
.tpl-body { width: 100%; min-height: 240px; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.5; resize: vertical; }
.tpl-body.snip-drop { outline: 2px dashed var(--violet); outline-offset: -2px; background: #faf7ff; }
/* Textbausteine (Snippets) */
.snip-chips { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px;
  max-height: 190px; overflow-y: auto; padding: 2px; }
.snip-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.snip-cat { flex-basis: 100%; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin-bottom: 1px; }
.snip-chip { font: inherit; font-size: 12px; background: #f3f0fb; border: 1px solid var(--line);
  color: var(--violet); border-radius: 8px; padding: 4px 10px; cursor: grab; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snip-chip:hover { background: #e7e0f6; }
.snip-chip:active { cursor: grabbing; }
/* Dokumente-Liste & Status */
.doc-status { display:inline-block; font-size:11.5px; font-weight:700; border-radius:999px; padding:2px 9px; }
.doc-status.entwurf { background:#FBEED0; color:#7a5a12; }
.doc-status.pending { background:#FDE7C9; color:#8a4b12; }
.doc-status.signed { background: var(--ok-bg); color: var(--ok); }
/* Unterschriften-Pad */
.sign-grid { display:flex; gap:16px; flex-wrap:wrap; }
.sign-pad-box { flex:1; min-width:240px; }
.sign-pad-box label { display:block; font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:4px; }
.sign-pad { width:100%; height:150px; border:1px dashed var(--line); border-radius:10px;
  background:#fff; touch-action:none; cursor:crosshair; display:block; }
.sign-pad-foot { display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.sign-pad-foot .muted { font-size:11.5px; }
.modal h3 { margin: 0; padding: 18px 22px; border-bottom: 1px solid var(--line);
  font-size: 17px; color: var(--violet); }
.modal-head { display:flex; align-items:center; border-bottom:1px solid var(--line); }
.modal-head h3 { flex:1; border-bottom:0; min-width:0; }
.modal-head-close { display:inline-flex; width:44px; height:44px; margin-right:10px; align-items:center; justify-content:center;
  border:0; border-radius:10px; background:transparent; color:var(--muted); font-size:28px; line-height:1; cursor:pointer; }
.modal-head-close:hover { background:var(--paper-2); color:var(--violet-deep); }
.modal-head-close:focus-visible { outline:3px solid color-mix(in srgb, var(--violet) 28%, transparent); outline-offset:2px; }
.modal-body { padding: 18px 22px; }
.modal-foot { padding: 14px 22px 20px; display: flex; justify-content: flex-end; gap: 10px; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; }
/* Auftrag H: Adressfeldgruppe – Hausnummer und PLZ schmal */
.addr-row .field-hnr { flex: 0 0 96px; }
.field-plz { flex: 0 0 130px; }
.addr-review-list { display: flex; flex-direction: column; gap: 14px; }
.addr-review-row { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.addr-review-row .ar-orig { margin-bottom: 8px; }
.addr-review-row .ar-orig-text { color: var(--muted); font-size: 13px; margin-top: 2px; white-space: pre-line; }
.addr-review-row .ar-actions > div { display: flex; gap: 10px; align-items: center; }
/* Auftrag L: Streifen in der Mandantenverwaltung für zu prüfende Mandantenadressen. */
.mand-addr-hint { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 9px 12px; font-size: 13.5px; color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--violet); border-radius: 8px; background: var(--paper); }
.mand-addr-hint svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--violet); }
.mand-addr-hint strong { color: var(--violet-deep); }
.mand-addr-hint .btn { margin-left: auto; }
@media (max-width: 620px) { .field-plz { flex: 0 0 96px; } .addr-row .field-hnr { flex: 0 0 72px; } }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches button { width: 26px; height: 26px; border-radius: 7px; border: 2px solid transparent; }
.swatches button.sel { border-color: var(--ink); }

/* user list */
.u-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.u-row .u-name { flex: 1; }
.u-row .u-name small { color: var(--muted); }
.badge { font-size: 11px; padding: 1px 8px; border-radius: 20px; background: #efeaf7; color: var(--violet); font-weight: 700; }
.badge.off { background: #f0eeee; color: var(--muted); }


/* ═══════════════════ v2 ═══════════════════ */

/* Suche + Navigation in der Seitenleiste */
.side-search { padding: 2px 12px 5px; }
.side-search input { width: 100%; padding: 7px 10px; border-radius: 8px; border: 1px solid #E6E2F0;
  background: #F0EEF8; color: #3a3550; }
.side-search input::placeholder { color: #9a93b5; }
.side-search input:focus { outline: none; border-color: var(--violet); background: #fff; }
.mand-nohit { padding: 8px 12px; color: var(--muted); font-size: 12.5px; }
.side-nav { padding: 4px 10px 4px; display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; }
.nav-group { margin-bottom: 5px; }
.nav-group:last-child { margin-bottom: 2px; }
.nav-eyebrow { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #a39cbd; padding: 5px 9px 2px; font-weight: 700;
  display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0;
  cursor: pointer; border-radius: 7px; transition: color .12s; }
.nav-eyebrow span { flex: 1; text-align: left; }
.nav-eyebrow:hover { color: #6b6488; }
.nav-eyebrow .chev { width: 12px; height: 12px; opacity: .6; transition: transform .15s; flex: none; }
.nav-eyebrow:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.nav-group.collapsed .chev { transform: rotate(-90deg); }
.nav-group.collapsed .nav-item { display: none; }
.nav-item { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 8px;
  color: #56516e; background: none; border: 0; width: 100%; text-align: left;
  font-size: 13px; line-height: 1.15; font-weight: 600; position: relative; transition: background .12s, color .12s; cursor: default; }
.nav-item .ic { width: 16px; height: 16px; flex: none; opacity: .68; }
.nav-item:hover { background: #F0ECFA; background: color-mix(in srgb, var(--violet) 8%, #fff); color: var(--violet); }
.nav-item:hover .ic { opacity: 1; }
.nav-item.active { background: #EDE8FA; background: color-mix(in srgb, var(--violet) 13%, #fff); color: var(--violet); }
.nav-item.active .ic { opacity: 1; }
/* Kein roter Balken mehr am aktiven Eintrag (Auftrag C) – aktiv nur über Fläche + Schrift. */
.nav-item:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.nav-item.nav-user-hidden { display: none; }
.nav-group.collapsed .nav-item.nav-user-hidden { display: none; }
.nav-item.nav-dragging { opacity: .5; }
.side-nav.nav-editing .nav-item[draggable="true"] { cursor: grab; }
.side-nav.nav-editing .nav-item[draggable="true"]:active { cursor: grabbing; }
/* Dialog „Navigation anpassen" */
.navcfg { display: flex; flex-direction: column; gap: 12px; max-height: 58vh; overflow-y: auto; }
.navcfg-section { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #faf9fd; }
.navcfg-secttl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 800; margin: 2px 2px 6px; }
.navcfg-row { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 8px; background: #fff; border: 1px solid #ede9f4; margin-bottom: 5px; }
.navcfg-row:last-child { margin-bottom: 0; }
.navcfg-row.is-dragging { opacity: .5; }
.navcfg-row .drag-handle { cursor: grab; margin: 0; }
.navcfg-move { display: inline-flex; flex-direction: column; gap: 1px; }
.navcfg-move button { border: 1px solid var(--line); background: #fff; border-radius: 5px; width: 22px; height: 16px;
  line-height: 1; font-size: 11px; color: var(--violet); cursor: pointer; padding: 0; }
.navcfg-move button:hover { background: #f0ecfa; }
.navcfg-label { flex: 1; font-weight: 700; font-size: 13.5px; color: var(--ink); min-width: 0; }
.navcfg-vis { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; cursor: pointer; }
.mandant-item .spacer { flex: 1; }
.unread-badge { background: var(--red); color: #fff; font-size: 11px; font-weight: 800;
  min-width: 19px; height: 19px; border-radius: 19px; display: grid; place-items: center; padding: 0 5px; }

/* Views */
.view { height: 100%; overflow-y: auto; }
.view[hidden] { display: none; }

/* Dashboard */
.dash { width: 100%; padding: 24px clamp(18px, 2vw, 36px) 42px; max-width: none; }
.dash h1 { font-size: 20px; letter-spacing: -.01em; margin: 0 0 2px; color: var(--violet); }
.dash .greet { color: var(--muted); margin: 0 0 12px; font-size: 13px; }
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 0; }
.stat { background: rgba(255,255,255,.9); border: 1px solid #ebe7ef; border-radius: 10px; padding: 9px 12px; box-shadow: 0 5px 18px rgba(38,31,64,.035); }
.stat .n { font-size: 21px; font-weight: 800; line-height: 1; }
.stat .l { color: var(--muted); font-size: 11.5px; margin-top: 3px; font-weight: 600; }
.stat.red .n { color: var(--red); }
.stat.violet .n { color: var(--violet); }
.dash-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dash-title-row h1 { margin-bottom: 0; }
.dash-title-row .greet { margin-top: 4px; }
.dash-grid, .dash-layout { display: grid; grid-template-columns: repeat(2, minmax(320px, 1fr)); gap: 11px; align-items: start; }
.dash-section { margin-top: 10px; }
.dash-collap { min-width: 0; }
.dash-collap.ustva-panel { grid-column: auto; }
.dash-collap.is-dragging, .auf-group.is-dragging { opacity: .55; outline: 2px dashed var(--violet); }
.drag-handle { color: var(--muted); font-weight: 800; letter-spacing: -2px; margin-right: 4px; cursor: grab; }
.layout-hide { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 999px; color: var(--muted); font-weight: 800; margin-left: auto; }
.layout-hide:hover { background: #eee9f7; color: var(--red); }
.layout-checks { display: grid; gap: 4px; }
.panel { background: rgba(255,255,255,.94); border: 1px solid #ebe7ef; border-radius: 12px; box-shadow: 0 5px 18px rgba(38,31,64,.035); }
.panel > h3 { margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px;
  color: var(--violet); display: flex; align-items: center; gap: 8px; }
.panel > h3 .tag { margin-left: auto; font-size: 11px; background: var(--paper-2); color: var(--muted);
  padding: 1px 8px; border-radius: 20px; }
.panel-body { padding: 3px 6px 6px; }
/* Klappbare Dashboard-Abschnitte */
.dash-collap > .dash-phead { width: 100%; margin: 0; padding: 9px 11px; border: 0; background: none; cursor: pointer;
  border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--violet);
  display: flex; align-items: center; gap: 8px; text-align: left; border-radius: 12px 12px 0 0; transition: background .12s; }
.dash-collap > .dash-phead:hover { background: var(--paper); }
.dash-collap .dash-ptitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-collap > .dash-phead .tag { margin-left: auto; font-size: 11px; background: var(--paper-2); color: var(--muted);
  padding: 1px 8px; border-radius: 20px; font-weight: 700; }
.dash-collap > .dash-phead .chev { width: 16px; height: 16px; flex: none; transition: transform .15s; color: var(--muted); }
.dash-collap.collapsed > .dash-phead { border-bottom-color: transparent; }
.dash-collap.collapsed > .dash-phead .chev { transform: rotate(-90deg); }
.dash-collap.collapsed > .panel-body { display: none; }
.dash-collap.ustva-panel > .dash-phead .tag { background: var(--red); color: #fff; }
.dash-collap .ustva-line { padding: 5px 6px; }
.task-line { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 7px; cursor: pointer; }
.task-line:hover { background: var(--paper); }
.task-line .swatch { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.task-line .tl-main { flex: 1; min-width: 0; }
.task-line .tl-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-line .tl-where { font-size: 11px; color: var(--muted); }
.task-line .tl-due { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.tl-due.over { color: var(--red); }
.tl-due.soon { color: var(--ok); }
.empty-mini { color: var(--muted); padding: 14px 10px; text-align: center; font-size: 12.5px; line-height: 1.4; }
/* #4 Schöne Leerzustände (Icon + Titel + optionaler Knopf) */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 38px 20px; color: var(--muted); }
.empty-state .es-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: #f1eff8; color: var(--violet); margin-bottom: 6px; }
.empty-state .es-ic svg { width: 24px; height: 24px; }
.empty-state .es-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.empty-state .es-text { font-size: 13px; line-height: 1.5; max-width: 380px; }
.empty-state .es-action { margin-top: 12px; }
.produkte-wrap { width: 100%; padding: 24px clamp(18px, 2vw, 36px) 42px; }
.produkte-head { max-width: 980px; margin-bottom: 18px; }
.produkte-kicker { margin: 0 0 5px; color: var(--red); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.produkte-head h1 { margin: 0 0 6px; color: var(--violet); font-size: 22px; }
.produkte-head p { margin: 0; max-width: 760px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.produkte-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 560px)); gap: 14px; align-items: stretch; }
.produkt-card { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; }
.produkt-card:hover, .produkt-card:focus-visible { transform: translateY(-1px); border-color: var(--violet-700); box-shadow: 0 12px 28px rgba(38,31,64,.08); outline: none; }
.produkt-card.is-disabled { cursor: default; box-shadow: none; background: var(--paper); }
.produkt-card.is-disabled:hover { transform: none; border-color: var(--line); box-shadow: none; }
.produkt-card.is-disabled .produkt-mark { opacity: .62; }
.produkt-copy .produkt-activation { margin: -4px 0 12px; color: var(--ink); font-size: 12.5px; }
.portal-invite-note { margin: 0 0 10px; line-height: 1.5; }
.feature-news-list { display: grid; gap: 10px; }
.feature-news-list article { border: 1px solid var(--line); border-radius: 10px; background: #FBFAFE; padding: 12px 14px; }
.feature-news-list strong { display: block; color: var(--violet); font-size: 14px; }
.feature-news-list span { display: block; margin-top: 4px; color: var(--ink); line-height: 1.45; }
.feature-news-list em { display: inline-flex; margin-top: 8px; border-radius: 999px; background: #F1EEF8; color: var(--violet); padding: 3px 8px; font-size: 11px; font-style: normal; font-weight: 800; }
.produkt-mark { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; background: #f0ecfa; color: var(--violet); }
.produkt-mark svg { width: 26px; height: 26px; }
.produkt-copy { min-width: 0; flex: 1; }
.produkt-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.produkt-top h2 { margin: 0; font-size: 18px; color: var(--violet); }
.produkt-top span { font-size: 11.5px; font-weight: 800; color: #7a3150; background: #f9e9ee; border: 1px solid #f0cbd6; border-radius: 999px; padding: 2px 8px; }
.produkt-copy p { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.produkt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.produkt-tags span { font-size: 11.5px; font-weight: 700; color: var(--violet); background: #f4f1f8; border: 1px solid #ebe7ef; border-radius: 999px; padding: 3px 8px; }
.mand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.mand-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px;
  box-shadow: var(--shadow); cursor: pointer; border-left: 4px solid var(--violet); }
.mand-card:hover { border-color: var(--violet-700); }
.mand-card .mc-name { font-weight: 800; margin-bottom: 6px; }
.mand-card .mc-meta { font-size: 12.5px; color: var(--muted); }
.section-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin: 26px 0 12px; }

/* To-Do-Listen */
.lists-wrap { padding: 22px 26px 40px; max-width: 920px; }
.lists-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.lists-head h1 { font-size: 21px; margin: 0; color: var(--violet); }
.lists-head .spacer { flex: 1; }
.list-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px;
  box-shadow: var(--shadow); overflow: hidden; }
.list-card .lc-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-left: 5px solid var(--violet); }
.list-card .lc-head .lc-name { font-weight: 800; font-size: 15px; }
.list-card .lc-head .lc-count { font-size: 12px; color: var(--muted); }
.list-card .lc-head .spacer { flex: 1; }
.todo { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; padding: 8px 16px; border-top: 1px solid var(--paper); }
.todo:hover { background: #faf9fc; }
.todo .chk { width: 19px; height: 19px; border: 2px solid #c3bcd8; border-radius: 6px; flex: none;
  display: grid; place-items: center; cursor: pointer; color: #fff; }
.todo .chk.on { background: var(--ok); border-color: var(--ok); }
.todo .td-text { flex: 1; min-width: 0; }
.todo.done .td-text { text-decoration: line-through; color: var(--muted); }
.todo .td-due { font-size: 12px; font-weight: 700; }
.todo .td-due.over { color: var(--red); }
.todo .td-ass { font-size: 11.5px; background: #efeaf7; color: var(--violet); padding: 1px 9px; border-radius: 20px; }
.todo .td-del { opacity: 0; }
.todo:hover .td-del { opacity: 1; }
.todo-add { display: flex; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--paper); }
.todo-add input { flex: 1; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; }
.todo-add input:focus { outline: none; border-color: var(--violet); }
.todo-add input[type=date] { flex: 0 0 150px; }
.client-check-toolbar { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.client-check-list { display: grid; gap: 10px; }
.client-check-card { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 11px 12px; }
.client-check-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 9px; }
.client-check-head strong { color: var(--violet-700); font-size: 14px; }
.client-check-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.client-check-items { display: grid; gap: 5px; }
.client-check-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.35; }
.client-check-item input { margin-top: 2px; }
.client-check-item.done span { color: var(--muted); text-decoration: line-through; }
.client-check-add { display: flex; gap: 8px; margin-top: 10px; }
.client-check-add input { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: 13px; }
.client-check-form-tools { display: flex; justify-content: flex-end; gap: 8px; margin: -4px 0 8px; }
.client-check-form-list { display: grid; gap: 7px; }
.client-check-form-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 30px; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.client-check-form-row .cc-item-input { width: 100%; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--ink); padding: 3px 0; }
.client-check-form-row .cc-item-input:focus { outline: none; }
.client-check-form-row:focus-within { border-color: var(--violet); box-shadow: 0 0 0 2px rgba(56,45,94,.08); }
.client-check-form-row .cc-item-del { width: 28px; height: 28px; justify-self: end; color: var(--muted); }
.todo-columns-head, .todo.todo-with-columns { display: grid; align-items: center; gap: 10px; }
.todo-columns-head { padding: 6px 16px; border-top: 1px solid var(--paper); background: #faf9fd;
  color: var(--muted); font-size: 11px; font-weight: 700; }
.todo.todo-with-columns { padding: 7px 16px; }
.todo-with-columns .td-task { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.todo-with-columns .td-text { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.todo-with-columns .td-custom-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; color: var(--ink); cursor: pointer; }
.todo-with-columns .td-del { justify-self: end; }
.list-custom-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.list-cv-check { min-height: 40px; align-self: end; }
.list-field-editor { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.list-field-row { display: grid; grid-template-columns: minmax(130px, 1fr) 120px minmax(150px, 1.2fr) auto;
  gap: 7px; align-items: center; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: #faf9fd; }
.list-field-row input, .list-field-row select, .list-field-row textarea { min-width: 0; width: 100%; padding: 7px 8px;
  border: 1px solid var(--line); border-radius: 7px; background: #fff; font: inherit; font-size: 12.5px; }
.list-field-actions { display: flex; align-items: center; gap: 3px; }
.list-field-actions .linkbtn { width: 25px; height: 25px; padding: 0; display: inline-grid; place-items: center; }
.list-field-actions .linkbtn:disabled { opacity: .3; cursor: default; }

/* Aufgaben: Umschalter Board/Liste */
.board-toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 22px 4px; flex-wrap: wrap; justify-content: space-between; }
.board-switch { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.board-tools { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bchip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 9px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 700; font-size: 13.5px; cursor: pointer; }
.bchip:hover { border-color: var(--violet-700); }
.bchip.active { background: var(--violet); color: #fff; border-color: var(--violet); }
.bchip .bcount { font-size: 11px; background: rgba(0,0,0,.08); padding: 0 7px; border-radius: 20px; }
.bchip.active .bcount { background: rgba(255,255,255,.22); }
.bchip-add { border-style: dashed; color: var(--violet); }
.column-head.clickable { cursor: pointer; }
.column-head.clickable:hover { color: var(--red); }
.chkline { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink); margin-top: 4px; cursor: pointer; }
.chkline input { width: 17px; height: 17px; }
.seg { display: inline-flex; background: var(--paper-2); border-radius: 9px; padding: 3px; }
.seg button { border: none; background: none; padding: 6px 14px; border-radius: 7px; font-weight: 700; color: var(--muted); }
.seg button.on { background: #fff; color: var(--violet); box-shadow: var(--shadow); }
.board-wrap { height: calc(100% - 52px); overflow-y: auto; }
.tasklist { padding: 12px 22px 24px; max-width: 760px; }

/* Chat: Aktionen + bearbeitet-Hinweis */
.msg { position: relative; }
.msg .actions { position: absolute; top: -8px; right: 0; display: none; gap: 4px; }
.msg.mine:hover .actions { display: flex; }
.msg .actions button { border: 1px solid var(--line); background: #fff; border-radius: 6px;
  font-size: 11px; padding: 2px 7px; color: var(--muted); }
.msg .edited { font-size: 10.5px; opacity: .7; margin-left: 6px; }
.mention { background: #efe7c8; color: #7a5d12; border-radius: 4px; padding: 0 3px; font-weight: 700; }

/* Suche */
.search-wrap { padding: 22px 26px 40px; max-width: 820px; }
.search-wrap h1 { font-size: 20px; color: var(--violet); margin: 0 0 16px; }
.sr-group { margin-bottom: 22px; }
.sr-group h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 8px; }
.sr-item { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 10px 13px;
  margin-bottom: 7px; cursor: pointer; }
.sr-item:hover { border-color: var(--violet-700); }
.sr-item .sr-ctx { font-size: 12px; color: var(--muted); }

/* ═══════════════════ Mobil ═══════════════════ */
.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }

/* Seitenleiste ausblenden – nur Desktop (auf Mobil gilt die Off-Canvas-Schublade) */
@media (min-width: 769px) {
  .app.sidebar-collapsed { grid-template-columns: 1fr; }
  .app.sidebar-collapsed .workspace { padding-top: 56px; }
  .app.sidebar-collapsed > .sidebar { display: none; }
  .app.sidebar-collapsed .sidebar-reopen { display: inline-flex; position: fixed; top: 18px; left: 18px; z-index: 90;
    width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 12px;
    background: var(--violet); color: #fff; border: 1px solid rgba(255,255,255,.35); box-shadow: 0 8px 22px rgba(38,31,64,.24); cursor: pointer;
    transition: background .12s, transform .12s; }
  .app.sidebar-collapsed .sidebar-reopen:hover { background: var(--violet-deep); transform: translateY(-1px); }
  .app.sidebar-collapsed .sidebar-reopen svg { width: 20px; height: 20px; }
}

@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; }
  .assignee-picker { grid-template-columns: 1fr; }

  /* Kopfleiste oben */
  .mobile-topbar { display: flex; align-items: center; gap: 12px; position: fixed; top: 0; left: 0; right: 0;
    height: 52px; padding: 0 14px; background: var(--violet-deep); color: #fff; z-index: 40; }
  .menu-toggle { background: none; border: none; color: #fff; font-size: 24px; line-height: 1; padding: 4px 6px; }
  .mt-title { font-weight: 800; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Seitenleiste als Schublade */
  .sidebar { position: fixed; top: 0; left: 0; height: 100%; width: 82%; max-width: 320px;
    transform: translateX(-100%); transition: transform .22s ease; z-index: 60; box-shadow: 4px 0 24px rgba(0,0,0,.35); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(20,12,45,.45); z-index: 50; }

  /* Arbeitsbereich unter die Kopfleiste schieben */
  .workspace { padding-top: 52px; }

  /* Dashboard: kompakter */
  .dash, .lists-wrap, .search-wrap, .produkte-wrap { padding: 12px 10px 24px; }
  .stat-row { grid-template-columns: 1fr 1fr; gap: 7px; }
  .dash-title-row { flex-wrap: wrap; }
  .dash-title-row .btn { align-self: flex-start; }
  .dash-grid, .dash-layout { grid-template-columns: 1fr; gap: 8px; }
  .produkte-grid { grid-template-columns: 1fr; }
  .produkt-card { flex-direction: column; padding: 14px; }
  .produkt-mark { width: 42px; height: 42px; border-radius: 10px; }
  .mand-grid { grid-template-columns: 1fr 1fr; }

  /* Aufgaben: Spalten untereinander */
  .board { flex-direction: column; padding: 14px; }
  .column { flex: 0 0 auto; width: 100%; max-height: none; }
  .tasklist { padding: 12px 14px 24px; }

  /* Tabs scrollbar machen, falls eng */
  .tabs { overflow-x: auto; }
  .tab { white-space: nowrap; padding: 8px 12px 9px; }
  .ws-header { padding: 10px 14px 0; }

  /* Kopfzeile Mandant: Name + Aktions-Knöpfe brechen sauber um statt abgeschnitten zu werden */
  .ws-title { flex-wrap: wrap; row-gap: 8px; }
  .ws-title h2 { font-size: 17px; flex: 1 1 auto; min-width: 0; }
  .ws-title .spacer { flex-basis: 100%; height: 0; }
  .ws-title .btn-sm { font-size: 12px; padding: 6px 10px; }
  .client-check-head { flex-direction: column; }
  .client-check-actions { justify-content: flex-start; }
  .client-check-add { flex-direction: column; }
  .client-check-add .btn { align-self: flex-start; }
  .client-check-form-tools { justify-content: flex-start; flex-wrap: wrap; }
  .client-check-form-row { grid-template-columns: 20px minmax(0, 1fr) 30px; }

  /* Chat */
  .chat-scroll { padding: 14px; }
  .chat-cats { padding: 7px 10px; }
  .chat-cat { padding: 5px 10px; font-size: 12.5px; }
  .msg { max-width: 86%; }
  .chat-input { padding: 10px; }

  /* Dateien */
  .files { padding: 14px; }
  .file-row { flex-wrap: wrap; }
  .file-main { flex: 1 1 100%; order: -1; }

  /* To-Do-Eingabe umbrechen */
  .todo-add { flex-wrap: wrap; }
  .todo-add input[type=date] { flex: 1 1 auto; }
  .todo-columns-head { display: none; }
  .todo.todo-with-columns { grid-template-columns: 22px minmax(0, 1fr) 28px !important; gap: 6px 10px; padding: 10px 12px; }
  .todo-with-columns .td-task { grid-column: 2; }
  .todo-with-columns .td-custom-cell { grid-column: 2 / 4; display: flex; gap: 8px; white-space: normal; overflow-wrap: anywhere; }
  .todo-with-columns .td-custom-cell::before { content: attr(data-label); flex: 0 0 95px; color: var(--muted); font-size: 11px; font-weight: 700; }
  .todo-with-columns .td-due { grid-column: 2 / 4; }
  .todo-with-columns .td-del { grid-column: 3; grid-row: 1; opacity: 1; }
  .list-custom-form { grid-template-columns: 1fr; }
  .list-field-row { grid-template-columns: minmax(0, 1fr) 110px auto; }
  .list-field-row textarea { grid-column: 1 / -1; }

  /* Dialoge fast vollflächig */
  .modal-bg { padding: 10px; }
  .row { flex-direction: column; gap: 0; }
}

@media (max-width: 380px) {
  .mand-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════ Ordner (Dateien) ═══════════════════ */
.folder-bar { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 14px; }
.fchip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 12px;
  border: 1px solid #e5e1eb; border-radius: 999px; background: #fbfafc; color: #625c72;
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.fchip:hover { border-color: #cfc7dc; background: #f5f2f8; color: var(--violet); }
.fchip.active { border-color: #d8d0e5; background: #ece7f3; color: var(--violet-deep); box-shadow: inset 0 0 0 1px rgba(56,45,94,.03); }
.fchip .fcount { font-size: 11px; opacity: .8; }
.fchip-add { border-style: dashed; color: var(--violet); font-weight: 700; }
.year-switch { display: inline-flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid #e5e1eb;
  border-radius: 12px; background: #f1eff4; box-shadow: inset 0 1px 2px rgba(38,31,64,.035); }
.year-chip { min-width: 62px; min-height: 34px; padding: 6px 11px; border: 0; border-radius: 9px;
  background: transparent; color: #6d667c; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer;
  transition: background .12s, color .12s, box-shadow .12s; }
.year-chip:hover { background: rgba(255,255,255,.68); color: var(--violet); }
.year-chip.active { background: #fff; color: var(--violet-deep); box-shadow: 0 1px 4px rgba(38,31,64,.11); }
.year-chip:focus-visible { outline: 2px solid color-mix(in srgb, var(--violet) 40%, #fff); outline-offset: 1px; }
.folder-actions { display: inline-flex; gap: 6px; margin-left: auto; }
.file-folder { font-size: 11.5px; background: #efeaf7; color: var(--violet); padding: 1px 9px; border-radius: 20px; font-weight: 600; }
.file-move { font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); }

/* ═══════════════════ Stammdaten ═══════════════════ */
.sd { padding: 20px 22px 40px; max-width: 1180px; }
.sd-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.sd-head h3 { margin: 0; color: var(--violet-deep); font-size: 19px; }
.sd-subtabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: 6px; }
.sd-subtab { border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 8px;
  padding: 7px 10px; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.sd-subtab:hover { background: #f6f4fb; color: var(--violet-deep); }
.sd-subtab.active { background: #fff; border-color: var(--line); color: var(--violet);
  box-shadow: inset 0 -2px 0 var(--red), 0 6px 14px rgba(38,31,64,.04); }
.sd-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 6px 18px 14px; }
.sd-group { font-size: 12px; font-weight: 800; letter-spacing: normal; text-transform: none; color: var(--violet);
  margin: 16px 0 6px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.sd-group:first-child { margin-top: 8px; }
.sd-row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; flex-wrap: wrap; border-bottom: 1px solid #f0eef5; }
.sd-row:last-child { border-bottom: 0; }
/* Klappbare Stammdaten-Abschnitte */
.sd-sec { border-bottom: 1px solid var(--line); }
.sd-sec:last-child { border-bottom: 0; }
.sd-sec-head { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0;
  cursor: pointer; padding: 12px 2px 10px; font-size: 12px; font-weight: 800; letter-spacing: normal;
  text-transform: none; color: var(--violet); transition: color .12s; }
.sd-sec-head:hover { color: var(--violet-deep); }
.sd-sec-head span { flex: 1; text-align: left; }
.sd-sec-head .chev { width: 15px; height: 15px; opacity: .65; transition: transform .15s; flex: none; }
.sd-sec.collapsed .chev { transform: rotate(-90deg); }
.sd-sec-body { padding-bottom: 8px; }
.sd-sec.collapsed .sd-sec-body { display: none; }
.sd-row.sd-empty .sd-val { color: var(--muted); font-weight: 400; opacity: .7; }
.sd-sections.hide-empty .sd-row.sd-empty { display: none; }
.sd-sec[hidden] { display: none !important; }
.eink-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; margin: 2px 0; }
@media (max-width: 680px) { .eink-grid { grid-template-columns: 1fr; } }
/* Finanzamtsnummer-Feld mit „aus Steuernummer erkennen"-Knopf */
.fa-nr-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fa-nr-row input { flex: 1 1 90px; min-width: 0; }
.fa-nr-row .btn { white-space: nowrap; flex: 0 0 auto; }
/* Eigene (frei benannte) Zusatzfelder – Editor-Zeilen */
.cf-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.cf-row .cf-label { flex: 0 0 34%; }
.cf-row .cf-value { flex: 1 1 auto; }
.cf-row .cf-del { flex: 0 0 auto; white-space: nowrap; }
.sh-row { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 8px 0 10px; background: #fbfafc; }
.sh-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: var(--violet-deep); }
.sh-row-head strong { font-size: 13px; }
@media (max-width: 680px) {
  .cf-row { flex-wrap: wrap; }
  .cf-row .cf-label, .cf-row .cf-value { flex: 1 1 100%; }
  .cf-row .cf-del { flex: 0 0 auto; margin-left: auto; }
}
.sd-typebadge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; background: rgba(31,111,139,.12); color: #1f6f8b; vertical-align: middle; margin-left: 6px; }
.sd-editbadge { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 20px;
  background: color-mix(in srgb, var(--violet) 10%, #fff); color: var(--violet); vertical-align: middle; margin-left: 6px; }
.sd-edit-actions { display: inline-flex; align-items: center; gap: 7px; }
.sd.is-editing .sd-subtabs { order: 3; width: 100%; margin-left: 0; }
.sd.is-editing .sd-edit-actions { margin-left: auto; }
.sd-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted);
  cursor: pointer; user-select: none; margin-right: 4px; }
.sd-head .spacer { flex: 1; }
.sd-label { color: var(--muted); font-size: 13.5px; }
.sd-val { color: var(--ink); font-weight: 600; font-size: 13.5px; text-align: right; }
.sd-row-edit { align-items: flex-start; flex-wrap: nowrap; }
.sd-row-edit > .sd-label { flex: 0 0 min(34%, 235px); padding-top: 9px; }
.sd-val-edit { flex: 1 1 auto; min-width: 0; text-align: left; }
.sd-val-edit > input,
.sd-val-edit > select,
.sd-val-edit > textarea { width: 100%; }
.sd-val-edit .field { min-width: 0; }
.sd-val-edit .field > input,
.sd-val-edit .field > select,
.sd-val-edit .field > textarea { width: 100%; }
.sd .field label { text-transform: none; letter-spacing: normal; }
.sd-val-edit :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) {
  width: 100%; min-height: 40px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; color: var(--ink); font: inherit;
}
.sd-val-edit :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea):focus {
  outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(56,45,94,.12);
}
.sd-val-edit :where(input:not([type=checkbox]):not([type=radio]), select, textarea):disabled {
  background: var(--paper-2); color: var(--muted); cursor: not-allowed;
}
.sd-date-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 9px; }
.sd-date-pair .field { margin-bottom: 0; }
.sd-kundennummer-edit { display: grid; gap: 7px; }
.sd-static-field {
  display: flex; align-items: center; min-height: 40px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); color: var(--ink);
}
.sd-kundennummer-actions { display: flex; align-items: center; justify-content: flex-start; }
.sd-kundennummer-actions .btn { min-height: 32px; }
.sd-inline-context { color: var(--muted); font-size: 12px; }
.sd-kundennummer-hint { display: block; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.4; }
.sd-editblock .sd-val-edit { display: block; }
.sd-inline-fields { margin: 0; }
.sd-inline-detail { margin-top: 7px; }
.sd-inline-detail[hidden] { display: none; }
.sd-inline-detail small { display: block; margin-top: 5px; color: var(--muted); }
.sd-inline-note { margin: 7px 0 2px; }
.sd-status-box { display: grid; gap: 12px; }
.sd-status-item { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfafd; }
.sd-status-check { align-items: flex-start; margin: 0; }
.sd-status-check span { display: grid; gap: 2px; }
.sd-status-check small { color: var(--muted); font-weight: 400; line-height: 1.35; }
.sd-status-date { display: grid; gap: 5px; padding-left: 26px; }
.sd-status-date label { color: var(--muted); font-size: 12px; font-weight: 700; }
.sd-status-date input { width: 100%; }
.field-error { display: block; min-height: 16px; color: var(--red); font-size: 12px; font-weight: 600; }
.sd-col { flex-direction: column; align-items: stretch; }
.sd-col .sd-label { margin-bottom: 6px; }
.sd-hist { display: flex; flex-direction: column; gap: 4px; }
.sd-histrow { display: flex; justify-content: space-between; align-items: center; background: #f6f4fb; border-radius: 8px; padding: 7px 11px; font-size: 13px; }
.sd-badge { background: var(--violet); color: #fff; font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 20px; margin-left: 6px; }
.muted { color: var(--muted); font-size: 12.5px; }
.linkbtn { background: none; border: 0; color: var(--red); font-size: 12.5px; cursor: pointer; padding: 2px 4px; }
.radioline { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--ink); margin-top: 6px; cursor: pointer; }
.radioline input { margin-top: 2px; }
.cmp-opt { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; padding: 2px 0; }
.cmp-opt input { margin-top: 3px; }
.cmp-opt input:checked + span { font-weight: 600; }

/* ═══════════════════ Buchhaltungs-Checkliste ═══════════════════ */
.buch-list { padding: 8px 14px; }
.buch-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 10px; padding: 7px 6px; border-bottom: 1px solid #f0eef5; }
.buch-row:last-child { border-bottom: 0; }
.buch-month { flex: 0 0 82px; font-weight: 700; color: var(--ink); }
.buch-status { flex: 0 1 180px; min-width: 132px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-weight: 600; }
.buch-status.st-da { color: var(--ok); border-color: #b6dcc4; background: var(--ok-bg); }
.buch-status.st-abgerechnet { color: var(--ok); border-color: #b6dcc4; background: var(--ok-bg); }
.lohn-kkbadge { display: inline-block; font-size: 10px; font-weight: 800; color: #9a6a16; background: #fbf3e2; border-radius: 5px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; }
.buch-status.st-fehlt { color: var(--danger); border-color: #e6b4b6; background: var(--danger-bg); }
.buch-status.st-unvollstaendig { color: var(--warn); border-color: #e6cf9f; background: var(--warn-bg); }
.buch-status.st-offen { color: var(--muted); }
.buch-erl { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.buch-erl input { padding: 6px 7px; border: 1px solid var(--line); border-radius: 8px; }
.buch-row.done { background: #f4faf6; }
.buch-row.done .buch-month { color: #2f7d4f; }
.buch-row.done .buch-month::before { content: "✓ "; }
.buch-item { border-bottom: 1px solid #f0eef5; }
.buch-item:last-child { border-bottom: 0; }
.buch-item .buch-row { border-bottom: 0; }
.buch-item.done .buch-row { background: #f4faf6; }
.buch-item.done .buch-month { color: #2f7d4f; }
.buch-item.done .buch-month::before { content: "✓ "; }
/* Erledigt-Haken je Monat + optionales Datum als kompakte, zusammenhängende Gruppe.
   Bei wenig Platz bricht die Gruppe gemeinsam um, statt aus der Tabelle zu rutschen. */
.buch-done-wrap { display: flex; align-items: center; gap: 8px; flex: none; }
.buch-done-chk { display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap; }
.buch-done-chk input { width: 17px; height: 17px; cursor: pointer; }
.buch-erl.dim { opacity: .45; }
.buch-erl.dim input { background: #f6f5f9; cursor: not-allowed; }
.buch-note { padding: 0 6px 10px 98px; }
.buch-note input { width: 100%; max-width: 520px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
@media (max-width: 768px) {
  .buch-row { flex-wrap: wrap; gap: 8px; }
  .buch-month { flex: 1 1 100%; }
  .buch-status { flex: 1 1 100%; min-width: 0; }
  .buch-done-wrap { flex: 1 1 100%; margin-left: 0; flex-wrap: wrap; gap: 10px; }
  .buch-done-chk { flex: 0 0 auto; }
  .buch-erl { flex: 1 1 auto; }
  .buch-erl input { flex: 1; }
  .buch-note { padding: 0 6px 10px 6px; }
}

/* ═══════════════════ Monats-Checkliste (rechts neben den Monaten) ═══════════════════ */
.buch-layout { display: flex; align-items: flex-start; gap: 16px; }
.buch-layout > .buch-list { flex: 1 1 auto; min-width: 280px; overflow: hidden; }
/* Damit die Monatszeile bei schmalerem Platz (Panel daneben) sauber umbricht statt zu überlappen */
.buch-layout .buch-row { flex-wrap: wrap; row-gap: 7px; }
.check-panel { flex: 0 0 274px; max-width: 274px; border: 1px solid var(--line); border-radius: 12px;
  background: #fbfafd; padding: 12px; box-sizing: border-box; }
.check-panel.check-off { background: #fff; }
.check-head { display: flex; align-items: center; gap: 8px; }
.check-head h4 { margin: 0; font-size: 14px; color: var(--ink); }
.check-head .spacer { flex: 1; }
.check-collapse { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 4px; line-height: 1; }
.check-count { font-size: 11.5px; font-weight: 700; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.check-remove { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; text-decoration: underline; padding: 2px; }
.check-remove:hover { color: var(--red); }
.check-body { margin-top: 10px; }
.check-monthrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.check-monthrow .check-month { flex: 1; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: #fff; }
.check-items { display: flex; flex-direction: column; }
.check-item { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid #efedf5; }
.check-item:last-child { border-bottom: 0; }
.check-item .ci-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }
.check-item .ci-main input { width: 16px; height: 16px; flex: none; cursor: pointer; }
.check-item .ci-text { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.check-item.done .ci-text { text-decoration: line-through; color: var(--muted); }
.check-item .ci-edit, .check-item .ci-del { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1; padding: 2px 4px; opacity: 0; transition: opacity .1s; }
.check-item:hover .ci-edit, .check-item:hover .ci-del { opacity: 1; }
.check-item .ci-del:hover { color: var(--red); }
.check-add { display: flex; gap: 6px; margin-top: 10px; }
.check-add-input { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.check-add .btn { flex: none; }
.check-copyall { margin-top: 10px; width: 100%; }
@media (max-width: 900px) {
  .buch-layout { flex-direction: column; }
  .check-panel { flex: 1 1 auto; max-width: none; width: 100%; box-sizing: border-box; }
}

/* ═══════════════════ USt-VA demnächst fällig (Dashboard) ═══════════════════ */
.ustva-panel h3 .tag { background: var(--red); color: #fff; }
.ustva-line { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid #f0eef5; cursor: pointer; }
.ustva-line:last-child { border-bottom: 0; }
.ustva-line:hover { background: #faf9fd; }
.ustva-line .dotcol { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.uv-name { font-weight: 700; color: var(--ink); }
.uv-label { color: var(--muted); font-size: 13px; }
.uv-date { margin-left: auto; font-weight: 800; color: var(--red); font-size: 13.5px; }
.ustva-line { flex-wrap: wrap; }
.uv-label { flex: 0 0 auto; }

/* ═══════════════════ Buchhaltungs-Übersicht ═══════════════════ */
.uebersicht-wrap { height: 100%; overflow: auto; }
/* Mandanten-Übersicht (eigene Seite) */
.mand-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.mand-add { font-weight: 700; padding: 9px 16px; }
.mand-add .plus { font-size: 16px; font-weight: 700; margin-right: 1px; }
.mand-search { position: relative; flex: 1; min-width: 220px; max-width: 440px; }
.mand-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.mand-search input { width: 100%; padding: 10px 12px 10px 37px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 14px; }
.mand-search input:focus { outline: none; border-color: var(--violet); }
.mand-groups-btn { font-weight: 700; }
.mand-group-filter { max-width: 210px; padding: 9px 30px 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font-size: 13px; }
.mand-arch { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; }
.mand-section { margin-bottom: 24px; }
.mand-sec-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.mand-sec-head h2 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0; font-weight: 800; }
.mand-sec-head .spacer { flex: 1; }
.mand-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 12px; }
.mand-card2 { display: flex; align-items: stretch; text-align: left; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 0; cursor: pointer; overflow: hidden; transition: border-color .12s, box-shadow .12s, transform .12s; }
.mand-card2:hover { border-color: #d3cde2; box-shadow: var(--shadow); transform: translateY(-1px); }
.mand-card2.active { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet); }
.mand-card2 .mc2-stripe { width: 5px; flex: none; background: var(--mc, var(--violet)); }
.mand-card2 .mc2-body { flex: 1; padding: 12px 14px; min-width: 0; }
.mand-card2 .mc2-top { display: flex; align-items: center; gap: 7px; }
.mand-card2 .mc2-top .spacer { flex: 1; }
.mand-card2 .mc2-name { font-weight: 700; color: var(--ink); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mand-card2 .mc2-meta { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.mand-group-badge { display: inline-flex; align-items: center; max-width: 180px; margin-top: 6px; padding: 2px 8px 2px 7px;
  border-left: 3px solid var(--group-color, var(--violet)); border-radius: 4px; background: #f5f3f9; color: #554d69;
  font-size: 11.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.mand-statuses { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; min-width: 0; }
.mand-card2 .mand-track { margin-top: 10px; }
/* Eine zusammenhängende Status-Leiste: Ampel-Punkt + Kürzel je Bereich, durch feine Linien getrennt */
.mand-track { display: inline-flex; align-items: center; flex-wrap: nowrap; border: 1px solid var(--line);
  border-radius: 999px; background: #fff; padding: 1px; max-width: 100%; }
.mand-track .trk { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; font-size: 11.5px;
  line-height: 1.2; white-space: nowrap; color: #8a8598; }
.mand-track .trk + .trk { border-left: 1px solid #eeecf3; }
.mand-track .trk-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #cbc6d6; }
.mand-track .trk-lbl { font-weight: 700; color: #6b6580; }
.mand-track .trk-val { font-weight: 600; }
.mand-track .trk-open .trk-dot { background: #e3a93a; }
.mand-track .trk-open .trk-lbl { color: #5a5470; }
.mand-track .trk-open .trk-val { color: #8a5b0e; }
.mand-track .trk-missing .trk-dot { background: var(--red); }
.mand-track .trk-missing .trk-lbl, .mand-track .trk-missing .trk-val { color: var(--red); }
.mand-track .trk-done .trk-dot { background: #3fae73; }
.mand-track .trk-done .trk-lbl { color: #9a95a8; font-weight: 600; }
.mand-track .trk-chat { color: var(--red); font-weight: 800; gap: 4px; }
.mand-track .trk-chat .trk-chatic { width: 13px; height: 13px; }
.mand-track .trk-chat .trk-val { color: var(--red); }
/* Kontaktzeile (Karte) */
.mand-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; margin-top: 8px; min-width: 0; font-size: 12px; color: var(--muted); }
.mand-contact .mcl-name { font-weight: 600; color: #5a5470; }
.mand-contact .mcl-i { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.mand-contact .mcl-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcl-ic { width: 13px; height: 13px; flex: none; color: #a39db2; }
/* Organisation direkt in der Übersicht zuordnen (Karte & kompakte Liste) */
.mand-orgpick-wrap { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.mand-orgpick-wrap .opick-ic { width: 14px; height: 14px; flex: none; color: #a39db2; }
.mand-orgpick { max-width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 12.5px; padding: 4px 7px; cursor: pointer; }
.mand-orgpick:hover { border-color: var(--violet); }
.mand-card2 .mand-orgpick-wrap { margin-top: 9px; }
.mand-row .mand-orgpick-wrap { flex: 0 1 auto; max-width: 210px; }
.mand-row .mand-orgpick { max-width: 184px; overflow: hidden; text-overflow: ellipsis; }
.mand-card2.is-archived { opacity: .62; }
.mand-card2.is-archived .mc2-stripe { background: #b9b3c8; }
.nav-item .spacer { flex: 1; }
/* Org-Filter-Chips */
.mand-orgfilter { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.org-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .12s; }
.org-chip:hover { border-color: var(--violet-700); }
.org-chip.on { background: var(--violet); color: #fff; border-color: var(--violet); }
.org-chip .oc-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mand-count { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--paper-2); border-radius: 999px; padding: 1px 9px; }
/* Ansicht-Umschalter (Karten/Liste) */
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #fff; }
.vt-btn { display: grid; place-items: center; width: 34px; height: 32px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.vt-btn svg { width: 17px; height: 17px; }
.vt-btn.on { background: var(--violet); color: #fff; }
.vt-btn + .vt-btn { border-left: 1px solid var(--line); }
/* Kompakte Mandanten-Liste (für viele Mandanten) */
.mand-list-head { display: flex; align-items: center; gap: 11px; padding: 4px 14px 8px; }
.mlh-col { background: none; border: 0; font: inherit; font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); cursor: pointer; padding: 4px 8px; border-radius: 7px;
  display: inline-flex; align-items: center; gap: 5px; transition: background .1s, color .1s; }
.mlh-col:hover { background: #f0ecfa; color: var(--violet); }
.mlh-col.sorted { color: var(--violet); }
.mlh-name { flex: 1; justify-content: flex-start; }
.mlh-arrow { font-size: 9px; }
.mand-list2 { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.mand-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none;
  border: 0; border-bottom: 1px solid #f1eff5; padding: 9px 14px; cursor: pointer; font-size: 14px; transition: background .1s; }
.mand-row .mand-group-badge { margin-top: 0; flex: 0 1 150px; }

/* Mandantengruppen: Verwaltung und Mitgliedsauswahl */
.mand-group-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.mand-group-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--line); background: #fff; }
.mand-group-row:last-child { border-bottom: 0; }
.mand-group-dot { width: 11px; height: 11px; margin-top: 5px; border-radius: 50%; background: var(--group-color, var(--violet)); flex: none; }
.mand-group-main { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.mand-group-main > strong { color: var(--violet-deep); font-size: 14px; }
.mand-group-billing-status { color: var(--violet-deep); font-size: 12px; }
.mand-group-members { display: flex; flex-wrap: wrap; gap: 5px; margin: 3px 0; }
.mand-group-members > span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 5px; background: var(--paper-2); color: var(--ink); font-size: 12px; }
.mand-group-members .ent-ic { width: 13px; height: 13px; margin-left: 0; }
.mand-group-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.mand-group-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 320px; overflow-y: auto; padding: 2px; }
.mand-group-option { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; cursor: pointer; }
.field label.mand-group-option { display: flex; margin-bottom: 0; color: var(--ink); font-size: 13px; font-weight: 400;
  text-transform: none; letter-spacing: normal; }
.mand-group-option:hover { border-color: var(--violet); background: #faf9fd; }
.mand-group-option input { margin: 0; flex: none; }
.mand-group-option .ent-ic { margin-left: 0; flex: none; }
.mand-group-option > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.mand-group-option strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.mand-group-option small { color: var(--muted); font-size: 11px; }
.mand-group-billing-section { display: grid; gap: 12px; margin-top: 18px; padding: 16px; border: 1px solid var(--line);
  border-radius: 10px; background: #faf9fd; }
.mand-group-billing-section h3 { margin: 0; color: var(--violet-deep); font-size: 16px; }
.mand-group-billing-section .field { margin: 0; }
.mand-group-billing-section .chkline { align-items: flex-start; margin: 0; color: var(--ink); font-size: 13px; font-weight: 600;
  text-transform: none; letter-spacing: normal; }
.mand-group-billing-section .muted { margin: 0; line-height: 1.45; }
.invoice-billing-route { display: flex; align-items: center; gap: 12px; margin: 10px 0 14px; padding: 10px 12px;
  border: 1px solid #ddd7ea; border-radius: 9px; background: #faf9fd; color: var(--violet-deep); }
.invoice-billing-route > span:not([aria-hidden]) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.invoice-billing-route small { color: var(--muted); font-size: 11px; }
.invoice-billing-route strong { overflow-wrap: anywhere; }
.ws-group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 3px 8px; border-left: 3px solid var(--group-color, var(--violet));
  border-radius: 4px; background: #f5f3f9; color: #554d69; font-size: 12px; }
.mand-row:last-child { border-bottom: 0; }
.mand-row:hover { background: #f7f6fb; }
.mand-row.active { background: #efeaf8; }
.mand-row .mr-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--mc, var(--violet)); }
.mand-row .mr-name { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; flex: 0 0 auto; }
.mand-row .mr-contact { display: inline-flex; align-items: center; gap: 14px; min-width: 120px; flex: 1 1 auto; font-size: 12.5px; color: var(--muted); overflow: hidden; }
.mand-row .mr-contact .mr-cpart { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.mand-row .mr-contact .mcl-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mand-row .mr-org { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; flex: 0 1 auto; }
.mand-row .mand-track { flex: 0 0 auto; }
.mand-row .mr-arch { font-size: 11px; color: var(--muted); background: var(--paper-2); border-radius: 6px; padding: 1px 7px; }
.mand-row.is-archived { opacity: .6; }
@media (max-width: 768px) { .mand-grid2 { grid-template-columns: 1fr; } .mand-row { align-items: flex-start; flex-wrap: wrap; row-gap: 4px; } .mand-row .spacer { display: none; } .mand-row .mr-org, .mand-row .mand-orgpick-wrap { display: none; } .mand-row .mr-contact { display: flex; flex-wrap: wrap; width: 100%; flex-basis: 100%; min-width: 0; margin-left: 25px; gap: 2px 14px; } .mand-row .mand-track { width: auto; margin-top: 4px; margin-left: 25px; }
  .mand-group-picker { grid-template-columns: 1fr; max-height: 260px; }
  .mand-group-row { flex-wrap: wrap; }
  .mand-group-actions { width: 100%; padding-left: 23px; }
  .mand-group-billing-section { padding: 13px; }
  .mand-group-billing-section select { width: 100%; min-width: 0; }
  .invoice-billing-route { align-items: stretch; flex-direction: column; gap: 7px; }
  .invoice-billing-route > span[aria-hidden] { transform: rotate(90deg); align-self: center; }
}
/* Übersichtsseiten */
.uebersicht-wrap .ueber-head { display: flex; align-items: center; gap: 12px; }
.uebersicht-wrap .ueber-head h1 { margin: 0; flex: 1; }
/* #3 Einheitliche Seitenköpfe: gleiche Titel-Typografie & Abstände in allen Ansichten */
.lists-head h1, .uebersicht-wrap .ueber-head h1, .ueber-head h1, .sd-head h3 {
  font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--violet); margin: 0; }
.lists-head, .ueber-head, .sd-head { margin-bottom: 16px; }
.rm-group { margin: 18px 0 8px; }
.rm-h2 { font-size: 16px; color: var(--violet); margin: 0 0 2px; display: flex; align-items: center; gap: 8px; }
.rm-count { font-size: 12px; font-weight: 700; color: var(--muted); background: #ECEAF4; border-radius: 999px; padding: 1px 8px; }
.rm-item { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px; margin-bottom: 8px; }
.rm-main { flex: 1; min-width: 0; }
.rm-title { font-weight: 600; color: var(--ink); }
.rm-cat { font-size: 11px; font-weight: 700; color: var(--violet); background: #ECEAF4; border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.rm-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
@media (max-width: 768px) {
  .rm-item { flex-direction: column; gap: 9px; }
  .rm-main { width: 100%; }
  .rm-title { overflow-wrap: anywhere; }
  .rm-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
}
/* Dokument-Empfänger-Auswahl */
.doc-target-list { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; margin-top: 6px; }
.doc-target { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #fff;
  border: 0; border-bottom: 1px solid var(--line); padding: 8px 11px; font: inherit; color: var(--ink); }
.doc-target:last-child { border-bottom: 0; }
.doc-target:hover { background: #faf9fd; }
.doc-target.sel { background: #ECEAF4; }
.doc-target .dt-name { flex: 1; font-weight: 600; }
.doc-target .dt-group { font-size: 11.5px; color: var(--muted); background: #f0eef6; border-radius: 999px; padding: 1px 8px; }
.serial-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: #fff; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.serial-row:last-child { border-bottom: 0; }
.serial-row:hover { background: #faf9fd; }
.serial-row input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; }
.serial-row .dt-name { flex: 1; font-weight: 600; }
.serial-row .dt-group { font-size: 11.5px; color: var(--muted); background: #f0eef6; border-radius: 999px; padding: 1px 8px; }
.uebersicht { width: 100%; padding: 24px clamp(20px, 2vw, 36px) 42px; max-width: none; }
.ueber-bar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-bottom: 12px;
  padding: 11px 12px; border: 1px solid #ebe7ef; border-radius: 14px; background: rgba(255,255,255,.78); }
.overview-search { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 240px; color: var(--muted); font-size: 12px; font-weight: 700; }
.overview-search input { width: 190px; min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); }
.overview-search input:focus { outline: 2px solid rgba(92, 67, 145, .18); border-color: var(--violet); }
.ov-statusfilter { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.ov-statusfilter select { min-width: 0; max-width: 220px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); font-weight: 600; }
.ov-statusfilter select:focus { outline: 2px solid rgba(92, 67, 145, .18); border-color: var(--violet); }
.ov-namewrap { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.ov-namewrap > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ov-collapse { width: 26px; height: 26px; flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center; margin-right: 5px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; transform: rotate(0); transition: transform .12s ease, color .12s ease; }
.ov-collapse:hover { color: var(--violet); }
.ov-collapse.is-collapsed { transform: rotate(-90deg); }
.ov-collapsed-note { color: var(--muted); font-size: 12px; font-weight: 600; }
.bu-table tr.ov-is-collapsed td { padding-top: 5px; padding-bottom: 5px; background: #faf9fd; }
.bu-table tr.ov-is-collapsed .ov-collapsed-note { text-align: left; }
.bu-group { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.bu-mhead { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--line); background: #faf9fd; }
.bu-mhead:hover { background: #f1edfa; }
.bu-mname { font-weight: 800; color: var(--violet-deep); }
.bu-period { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.bu-months { padding: 4px 16px 8px; }
.bu-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0eef5; cursor: pointer; flex-wrap: wrap; }
.bu-row:last-child { border-bottom: 0; }
.bu-row:hover { background: #faf9fd; }
.bu-month { flex: 0 0 110px; font-weight: 700; color: var(--ink); }
.bu-date { margin-left: auto; font-size: 13px; color: var(--muted); font-weight: 600; }
.bu-date.soon { color: var(--red); }
.bu-date.done { color: #2f7d4f; }
.ust-badge { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 20px; }
.ust-badge.st-da { color: var(--ok); background: var(--ok-bg); }
.ust-badge.st-fehlt { color: var(--danger); background: var(--danger-bg); }
.ust-badge.st-unvollstaendig { color: var(--warn); background: var(--warn-bg); }
.ust-badge.st-offen { color: var(--muted); background: #efedf4; }

/* Kompakte Jahres-Tabelle (eine Zeile pro Mandant, 12 Monatszellen) */
.bu-table-wrap { overflow-x: auto; background: #fff; border: 1px solid #ebe8ef; border-radius: 14px; box-shadow: 0 5px 18px rgba(38,31,64,.035); }
.bu-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; }
.bu-table.ov-resizable { table-layout: fixed; min-width: 0; }
.bu-table th, .bu-table td { padding: 7px 5px; text-align: center; font-size: 12px; }
.bu-table thead th { background: #faf9fd; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--line); position: sticky; top: 0; }

/* Veränderbare Spaltenbreiten der Fachübersichten */
.ov-resizable { position: relative; }
.ov-col-head { position: relative; padding-right: 13px !important; }
.ov-col-head > span:first-child { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-col-resizer {
  position: absolute;
  z-index: 3;
  top: 0;
  right: -5px;
  width: 11px;
  height: 100%;
  min-height: 28px;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
}
.ov-col-resizer::after {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: 1px;
  background: var(--line);
  transition: background .12s ease, width .12s ease;
}
.ov-col-resizer:hover::after,
.ov-col-resizer:focus-visible::after,
.ov-resizing .ov-col-resizer[data-ov-resizer]::after {
  width: 2px;
  background: var(--red);
}
.ov-col-resizer:focus-visible { outline: 2px solid rgba(200, 68, 73, .22); outline-offset: -2px; }
html.ov-resizing,
html.ov-resizing body { cursor: col-resize !important; user-select: none !important; }
.ov-width-reset { white-space: nowrap; }
.bu-table td.bu-c-name { overflow: hidden; text-overflow: ellipsis; }
.bu-table td.bu-c-name .ov-namewrap { width: 100%; }
.ov-grid-scroll { overflow-x: auto; }
.ov-grid-content { box-sizing: content-box; min-width: var(--ov-total-width, 900px); padding: 4px 16px 8px; }
.ov-grid-head {
  display: grid;
  grid-template-columns: var(--ov-grid-template);
  gap: 6px;
  min-height: 32px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: #faf9fd;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.ov-grid-head .ov-col-head {
  display: flex;
  min-width: 0;
  height: 100%;
  align-items: center;
  padding: 5px 13px 5px 5px !important;
}
.ov-grid-rows { padding: 0; }
.ov-grid-empty { min-height: 1px; }
.ov-mobile-label { display: none; }
.bu-table th.bu-c-name, .bu-table td.bu-c-name { text-align: left; padding-left: 14px; font-weight: 800; color: var(--violet-deep); white-space: nowrap; }
.bu-table th.bu-c-per, .bu-table td.bu-c-per { text-align: left; color: var(--muted); font-weight: 600; white-space: nowrap; }
.bu-table th.bu-c-cnt, .bu-table td.bu-c-cnt { color: var(--muted); font-weight: 700; white-space: nowrap; }
.bu-table tbody tr { cursor: pointer; }
.bu-table tbody tr:hover { background: #f7f5fc; }
.bu-table tbody td { border-bottom: 1px solid #f3f1f8; }
.bu-table tbody tr:last-child td { border-bottom: 0; }
.bu-name-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: middle; }
.bu-cell { display: inline-flex; width: 24px; height: 24px; border-radius: 6px; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; line-height: 1; }
.bu-cell.s-erledigt { background: #cdebd7; color: #1f6b3d; }
.bu-cell.s-da { background: var(--ok-bg); color: var(--ok); }
.bu-cell.s-fehlt { background: var(--danger-bg); color: var(--danger); }
.bu-cell.s-unvollstaendig { background: var(--warn-bg); color: var(--warn); }
.bu-cell.s-offen { background: #f0eef5; color: #c3bdd2; }
.bu-cell.s-keine { background: transparent; color: #ddd9e6; border: 1px dashed #e3dfee; }
.bu-cell.due { box-shadow: 0 0 0 2px var(--violet); }
.bu-cell-edit { cursor: pointer; transition: transform .06s ease, filter .06s ease; }
.bu-cell-edit:hover { filter: brightness(0.94); transform: scale(1.08); }
.bu-cell.s-keine.bu-cell-edit:hover { border-color: var(--violet); }
.bu-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 2px 0; font-size: 12px; color: var(--muted); align-items: center; }
.bu-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bu-ldot { width: 15px; height: 15px; border-radius: 5px; display: inline-block; }
/* Mobile Kartenansicht der Buchhaltungs-Übersicht (statt Tabelle mit Seitwärts-Scrollen) */
.bu-cards { display: none; }
.bu-mcell { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.bu-mlabel { font-size: 10px; font-weight: 600; color: var(--muted); }
@media (max-width: 768px) {
  .uebersicht { padding: 16px 14px 40px; }
  .bu-period { margin-left: 0; flex: 1 1 100%; }
  .bu-month { flex: 0 0 90px; }
  .bu-table-wrap { display: none; }
  .ov-width-reset { display: none; }
  .ov-col-resizer, .ov-grid-head { display: none; }
  .ov-grid-scroll { overflow: visible; }
  .ov-grid-content { box-sizing: border-box; width: 100% !important; min-width: 0 !important; padding: 8px 10px; }
  .ov-grid-rows { padding: 0; }
  .bu-cards { display: flex; flex-direction: column; gap: 10px; }
  .bu-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 12px 12px 14px; cursor: pointer; }
  .bu-card:active { background: #f7f5fc; }
  .bu-card-head { display: flex; align-items: center; gap: 8px; }
  .bu-card-head .spacer { flex: 1; }
  .bu-card-name { font-weight: 700; color: var(--violet-deep); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bu-card-cnt { font-size: 12px; font-weight: 700; color: var(--muted); flex: none; }
  .bu-card-per { font-size: 12.5px; color: var(--muted); margin: 5px 0 12px; }
  .bu-monthgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px 4px; justify-items: center; }
  .bu-cards .bu-cell { width: 32px; height: 28px; font-size: 13px; }
}
@media (max-width: 360px) {
  .bu-monthgrid { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════ Jahresabschluss ═══════════════════ */
.ja-row { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid #f0eef5; flex-wrap: wrap; }
.ja-row:last-child { border-bottom: 0; }
.ja-row.done { background: #f4faf6; }
.ja-status { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-weight: 600; }
.ja-erl { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.ja-erl input { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; }
.ja-frist { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--muted); }
.ja-frist.over { color: var(--red); }
.ja-frist.done { color: #2f7d4f; }
.ja-row.irrelevant { opacity: .55; }
/* Kompakte Bereichsübersichten: gleiche Dichte wie Buchhaltung und Lohn. */
.ja-overview-row {
  display: grid;
  grid-template-columns: var(--ov-grid-template, minmax(150px, 1.5fr) 132px 180px max-content max-content);
  gap: 6px;
  min-height: 36px;
  padding: 3px 5px;
  font-size: 12.5px;
}
.ja-overview-row.est-overview-row {
  grid-template-columns: var(--ov-grid-template, minmax(150px, 1.5fr) 132px 180px max-content);
}
.ja-overview-row.ov-is-collapsed,
.ja-overview-row.est-overview-row.ov-is-collapsed {
  grid-template-columns: var(--ov-grid-template, minmax(150px, 1fr) max-content);
  min-height: 36px;
  background: #faf9fd;
}
.ja-overview-row.ov-is-collapsed .ov-collapsed-note { grid-column: 2 / -1; }
.ja-overview-row .bu-month {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
}
.ja-overview-row .ja-status { width: 100%; min-width: 0; padding: 5px 7px; font-size: 12.5px; }
.ja-overview-row .ja-erl { white-space: nowrap; font-size: 12.5px; }
.ja-overview-row .ja-erl input { width: 100%; min-width: 0; padding: 5px 7px; font-size: 12.5px; }
.ja-overview-row .ja-frist { margin-left: 0; text-align: right; white-space: nowrap; font-size: 12.5px; }
.ja-overview-row .bu-mname-click { cursor: pointer; }
/* Jahresabschluss-Reiter (je Mandant) */
.ja-meta { display: flex; gap: 18px; flex-wrap: wrap; }
.ja-meta .field { flex: 1 1 200px; margin: 0; }
.ja-checklist { padding: 6px 14px 12px; }
.ja-item { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid #f0eef5; }
.ja-item:last-of-type { border-bottom: 0; }
.ja-chk { display: flex; align-items: center; gap: 10px; cursor: pointer; flex: 1; }
.ja-chk input { width: 17px; height: 17px; flex: 0 0 auto; }
.ja-item.done .ja-itext { text-decoration: line-through; color: var(--muted); }
.ja-iact { display: flex; gap: 12px; opacity: 0; transition: opacity .12s; }
.ja-item:hover .ja-iact { opacity: 1; }
.ja-additem { display: flex; gap: 8px; padding: 14px 4px 2px; }
.ja-additem input { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 768px) {
  .sd { padding: 16px 14px 40px; }
  .overview-search { order: 3; width: 100%; min-width: 0; margin-left: 0; }
  .overview-search input { flex: 1; width: auto; }
  .ov-statusfilter { order: 2; width: 100%; }
  .ov-statusfilter select { flex: 1; max-width: none; }
  .bu-card.ov-is-collapsed { padding-top: 8px; padding-bottom: 8px; background: #faf9fd; }
  .ja-row .bu-month { flex: 1 1 100% !important; }
  .ja-status { flex: 1 1 100%; }
  .ja-erl { flex: 1 1 100%; } .ja-erl input { flex: 1; }
  .ja-frist { margin-left: 0; }
  .ja-iact { opacity: 1; }
  .ja-item { flex-wrap: wrap; align-items: flex-start; }
  .ja-chk { flex: 1 1 100%; min-width: 0; }
  .ja-itext { min-width: 0; overflow-wrap: anywhere; }
  .ja-iact { width: 100%; justify-content: flex-end; }
  .ja-additem { flex-wrap: wrap; }
  .ja-additem input { min-width: 0; }
  .ja-meta { gap: 10px; }
  .bu-group > .bu-months { padding: 8px 10px; }
  .ja-overview-row,
  .ja-overview-row.est-overview-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 0;
    padding: 11px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
  }
  .ja-overview-row:last-child { margin-bottom: 0; }
  .ja-overview-row.done { background: #f4faf6; }
  .ja-overview-row .bu-month {
    overflow: visible;
    white-space: normal;
  }
  .ja-overview-row .ja-status { width: 100%; }
  .ja-overview-row .ov-mobile-label { display: inline; }
  .ja-overview-row .ja-erl { width: 100%; }
  .ja-overview-row .ja-erl input { width: auto; min-width: 0; }
  .ja-overview-row .ja-frist { text-align: left; white-space: normal; }
  .board-switch .bchip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
}

/* Meine Aufgaben */
.ma-add { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(150px, auto)) auto; gap: 10px; align-items: end; }
.ma-add-field { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.ma-add-field label { color: var(--violet-deep); font-size: 13px; font-weight: 700; }
.ma-add-field small { min-height: 14px; color: var(--muted); font-size: 11px; line-height: 1.2; }
.ma-add .btn { margin-bottom: 19px; white-space: nowrap; }
.ma-edit-form .field label { text-transform: none; letter-spacing: 0; }
.ma-row { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid #f0eef5; }
.ma-row:last-child { border-bottom: 0; }
.ma-chk { display: flex; align-items: center; gap: 10px; cursor: pointer; flex: 1; min-width: 0; }
.ma-chk input { width: 17px; height: 17px; flex: 0 0 auto; }
.ma-title { overflow: hidden; text-overflow: ellipsis; }
.ma-rec { font-size: 12px; font-weight: 700; color: var(--violet); background: #efe9fb; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.ma-due { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.ma-due.over { color: var(--red); }
.ma-act { display: flex; gap: 12px; opacity: 0; transition: opacity .12s; }
.ma-row:hover .ma-act { opacity: 1; }
@media (max-width: 768px) {
  .ma-add { grid-template-columns: 1fr; align-items: stretch; }
  .ma-add .btn { width: 100%; margin-bottom: 0; }
  .ma-act { opacity: 1; }
  .ma-row { flex-wrap: wrap; }
  .ma-chk { flex: 1 1 100%; }
}

/* Neuaufnahme + Kontakte */
.onb-row { display: flex; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid #f0eef5; flex-wrap: wrap; }
.onb-row:last-child { border-bottom: 0; }
.onb-row.done { opacity: .9; }
.onb-main { flex: 1; min-width: 200px; }
.onb-name { font-weight: 700; color: var(--violet-deep); }
.onb-sub { font-size: 12px; color: var(--muted); margin: 1px 0 6px; }
.onb-linkinput { width: 100%; max-width: 460px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 12px; color: var(--muted); background: #faf9fd; }
.onb-act { display: flex; gap: 8px; flex-wrap: wrap; }
.ct-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid #f0eef5; }
.ct-row:last-child { border-bottom: 0; }
.ct-main { flex: 1; min-width: 0; }
.ct-name { font-weight: 700; }
.ct-sub { font-size: 13px; color: var(--ink); }
.ct-sub a { color: var(--violet); }
.ct-roles { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0; }
.ct-chip { background: #efecf7; color: var(--violet-deep); font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 20px; }
.ct-row.ct-shared { background: #fbfafd; }
.ct-group-badge { display: inline-flex; width: fit-content; margin: 2px 0 4px; padding: 2px 7px; border-left: 3px solid var(--group-color, var(--violet));
  border-radius: 4px; background: #f4f1f8; color: #5d5570; font-size: 10.5px; font-weight: 700; }
.ct-share-option { display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 7px; background: #faf9fd; cursor: pointer; }
.ct-share-option input { margin-top: 2px; }
.ct-share-option span { display: flex; flex-direction: column; gap: 2px; }
.ct-share-option small { color: var(--muted); font-size: 11.5px; }
.ct-actions { display: flex; gap: 2px; flex-shrink: 0; }
.linkbtn-muted { color: var(--muted); }
.ct-rolegrid { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.ct-rolebox { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); cursor: pointer; }
.ct-rolebox input { margin: 0; }
/* Auftrag K: mehrere Telefonnummern / E-Mail-Adressen je Kontakt */
.ct-sub { display: flex; flex-direction: column; gap: 2px; }
.ct-chan-disp { display: inline-flex; align-items: baseline; gap: 6px; }
.ct-art-tag { color: var(--muted); font-size: 11px; font-weight: 600; }
.ct-chan-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.ct-chan-row { display: grid; grid-template-columns: auto minmax(0, 1.4fr) 118px minmax(0, 0.8fr) 30px 28px; align-items: center; gap: 6px; }
.ct-chan-row.ct-dragging { opacity: .5; }
.ct-chan-row input, .ct-chan-row select { min-width: 0; width: 100%; }
.ct-drag { cursor: grab; color: var(--muted); font-size: 14px; line-height: 1; padding: 0 2px; user-select: none; }
.ct-chan-star { border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; padding: 6px 0; }
.ct-chan-star.on { color: var(--violet); border-color: var(--violet); }
.ct-chan-del { border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--muted); cursor: pointer; padding: 6px 0; }
.ct-chan-del:hover { color: var(--red); border-color: #e7c3c7; }
.ct-chan-add { margin-top: 2px; }
.ct-mail-hint { margin-top: 5px; font-size: 11.5px; }
@media (max-width: 620px) {
  .ct-chan-row { display: flex; flex-wrap: wrap; }
  .ct-chan-row .ct-chan-value { flex: 1 1 100%; order: 1; }
  .ct-chan-row .ct-drag { order: 2; }
  .ct-chan-row .ct-chan-art { flex: 1 1 30%; order: 3; }
  .ct-chan-row .ct-chan-bez { flex: 1 1 40%; order: 4; }
  .ct-chan-row .ct-chan-star { order: 5; width: 34px; }
  .ct-chan-row .ct-chan-del { order: 6; width: 34px; }
}
.pick-pkg { margin-top: 6px; font-size: 12.5px; color: var(--muted); width: 100%; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: #faf9fd; }
.ar-row { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid #f0eef5; }
.ar-row:last-child { border-bottom: 0; }
.ar-zu { font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; max-width: 170px; }
.ar-zu:disabled { background: #f3f1f8; color: var(--muted); }
.auf-month { display: flex; align-items: center; gap: 6px; background: #f4f1fb;
  border: 1px solid #e5dff3; border-radius: 12px; padding: 4px; }
.auf-month.is-current { background: color-mix(in srgb, var(--violet) 12%, #fff); border-color: color-mix(in srgb, var(--violet) 32%, #fff); }
.auf-navbtn { background: transparent; border: 0; font-size: 18px; line-height: 1; padding: 4px 9px; color: var(--violet); font-weight: 800; }
.auf-navbtn:hover { background: #fff; }
.auf-mlabel { font-weight: 800; min-width: 132px; text-align: center; display: inline-flex;
  align-items: baseline; justify-content: center; gap: 6px; color: var(--violet-700); font-size: 15px; letter-spacing: -.01em; }
.auf-mlabel-mon { font-size: 15.5px; }
.auf-mlabel-year { font-size: 13px; font-weight: 700; color: var(--muted); }
.auf-month.is-current .auf-mlabel-year { color: var(--violet); }
.auf-mlabel-now { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  background: var(--violet); color: #fff; padding: 2px 7px; border-radius: 20px; align-self: center; }
.auf-today { background: #fff; border: 1px solid #e5dff3; font-weight: 700; font-size: 12px; padding: 5px 10px; color: var(--violet); }
.auf-today:hover { background: var(--violet); color: #fff; border-color: var(--violet); }
.auf-filters { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 2px; }
.auf-seg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.auf-seglabel { font-size: 12px; color: var(--muted); margin-right: 2px; }
.auf-segbtn { font: inherit; font-size: 12.5px; padding: 4px 10px; border: 1px solid var(--line); background: #fff; border-radius: 20px; cursor: pointer; color: var(--ink); }
.auf-segbtn.active { background: var(--violet); color: #fff; border-color: var(--violet); }
.auf-toolbar { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(118px, .7fr));
  gap: 8px; margin: 4px 0 10px; align-items: end; }
.auf-toolbar label { display: flex; flex-direction: column; gap: 3px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 700; }
.auf-toolbar input, .auf-toolbar select { width: 100%; min-width: 0; height: 34px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); font: inherit; font-size: 12.5px; }
.auf-toolbar input:focus, .auf-toolbar select:focus { outline: 2px solid rgba(92, 67, 145, .15); border-color: var(--violet); }
.auf-result-count { margin: 5px 2px 7px; color: var(--muted); font-size: 12px; font-weight: 600; }
.auf-list { overflow: hidden; }
.auf-row { display: grid; grid-template-columns: 7px minmax(0, 1fr); align-items: start;
  gap: 4px 7px; padding: 6px 9px; border-bottom: 1px solid #f0eef5; cursor: pointer; }
.auf-row:last-child { border-bottom: 0; }
.auf-row:hover { background: #faf9fd; }
.auf-row > .swatch { grid-row: 1 / span 2; width: 6px; height: 24px; border-radius: 3px; }
.auf-main { grid-column: 2; min-width: 0; }
.auf-title { display: flex; align-items: baseline; gap: 5px; min-width: 0; font-size: 12.5px; }
.auf-title strong { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.auf-title > span:not(.auf-manual-tag) { flex: 0 0 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.auf-period[data-period-month] { cursor: pointer; border-bottom: 1px dotted currentColor; }
.auf-row.is-open-period .auf-period { color: var(--violet); font-weight: 800; background: #f3eef9; padding: 1px 7px; border-radius: 999px; }
.auf-row.is-due-now .auf-period { color: var(--red); background: #fff0f0; }
.auf-sub { font-size: 11px; color: var(--muted); margin-top: 1px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.auf-right { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 3px 8px; min-width: 0; flex-wrap: wrap; }
.auf-deadlines { display: flex; align-items: center; justify-content: flex-start; gap: 5px; min-height: 16px; flex-wrap: wrap; }
.auf-badge { font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 20px; color: #fff; }
.auf-badge.auf-buchhaltung { background: var(--violet); }
.auf-badge.auf-lohn { background: #2f7d4f; }
.auf-badge.auf-ja { background: #9a6a16; }
.auf-badge.auf-est { background: #1f6f8b; }
.auf-badge.auf-sonstiges { background: #6B6580; }
.auf-done { font-size: 11px; font-weight: 700; color: #2f7d4f; background: #eaf7ef; padding: 1px 8px; border-radius: 20px; }
.auf-none { color: var(--red); }
.auf-manual-tag { font-size: 10px; font-weight: 700; color: var(--violet); background: #efeaf8; padding: 1px 7px; border-radius: 20px; vertical-align: middle; }
.auf-billed { color: #1f6b3a; font-weight: 700; }
.deleg-box { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.deleg-box h3 { margin: 0 0 8px; padding: 0; border: 0; font-size: 15px; }
.deleg-list { display: grid; gap: 6px; margin: 8px 0 12px; }
.deleg-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, .7fr) auto; gap: 8px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fbfafc; font-size: 13px; }
.auf-budget { margin-top: 3px; display: flex; align-items: center; gap: 6px; max-width: 330px; }
.auf-budget .ab-bar { flex: 0 0 82px; height: 5px; background: #ece9f3; border-radius: 999px; overflow: hidden; }
.auf-budget .ab-fill { height: 100%; background: #6aa84f; border-radius: 999px; }
.auf-budget .ab-txt { font-size: 12px; color: var(--muted); font-weight: 600; }
.auf-budget.warn .ab-fill { background: #E0A400; }
.auf-budget.warn .ab-txt { color: #9a7100; }
.auf-budget.over .ab-fill { background: var(--red); }
.auf-budget.over .ab-txt { color: var(--red); font-weight: 700; }
.auf-actions { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.auf-actions .linkbtn { padding: 1px 4px; font-size: 11px; }
.auf-row.is-manual { background: #fcfbfe; }
.auf-right .tl-due { font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--muted); }
.auf-right .tl-due.overdue { color: var(--red); }
/* Auftragsliste: Gruppierung nach Bereichen (Buchhaltung/Lohn/Jahresabschluss/Einkommensteuer) */
.auf-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); align-items: start; gap: 9px; }
.auf-group { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.auf-ghead { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: 6px 10px; background: #f6f4fb; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.auf-ghead:hover { background: #efeaf7; }
.auf-ghead .collapse-chevron { width: 17px; height: 17px; flex: 0 0 auto; color: var(--violet); transition: transform .15s ease; }
.auf-group.is-collapsed .auf-ghead .collapse-chevron { transform: rotate(-90deg); }
.auf-group.is-collapsed .auf-ghead { border-bottom: 0; }
.auf-gtitle { font-weight: 800; font-size: 13px; letter-spacing: .1px; }
.auf-gcount { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted);
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; min-width: 26px; text-align: center; }
.auf-ghead .layout-hide { margin-left: 2px; }
.auf-group.is-collapsed .auf-gbody { display: none; }
.auf-gempty { padding: 9px 14px; color: var(--muted); font-size: 12.5px; }
/* Auftragsliste: Bereiche als weiche, klar unterscheidbare Arbeitsblöcke */
.auf-groups { gap: 14px; }
.auf-group {
  --auf-accent: var(--violet);
  --auf-soft: #f3eff8;
  position: relative;
  border-color: #e8e2ed;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(38,31,64,.052);
}
.auf-group::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--auf-accent);
}
.auf-group.auf-buchhaltung { --auf-accent: #382D5E; --auf-soft: #f1edf8; }
.auf-group.auf-lohn { --auf-accent: #2f7d4f; --auf-soft: #edf8f0; }
.auf-group.auf-ja { --auf-accent: #9a6a16; --auf-soft: #fff6df; }
.auf-group.auf-est { --auf-accent: #1f6f8b; --auf-soft: #eaf5f8; }
.auf-group.auf-sonstiges { --auf-accent: #6B6580; --auf-soft: #f3f2f6; }
.auf-ghead {
  padding: 9px 12px 9px 16px;
  background: linear-gradient(90deg, var(--auf-soft) 0%, #fff 86%);
  border-bottom-color: #eee8f2;
}
.auf-ghead:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--auf-soft) 86%, var(--auf-accent)) 0%, #fff 86%);
}
.auf-ghead .collapse-chevron,
.auf-ghead .drag-handle { color: var(--auf-accent); }
.auf-gtitle { color: var(--violet-deep); font-size: 13.5px; }
.auf-gcount {
  background: #fff;
  border-color: color-mix(in srgb, var(--auf-accent) 25%, #fff);
  color: var(--auf-accent);
}
.auf-row { padding: 8px 11px; }
.auf-row:hover { background: color-mix(in srgb, var(--auf-soft) 56%, #fff); }
.auf-row.is-manual { background: color-mix(in srgb, var(--auf-soft) 38%, #fff); }
@media (max-width: 768px) {
  /* Kopfzeilen aller Übersichten dürfen umbrechen, statt seitlich zu überlaufen */
  .lists-head { flex-wrap: wrap; gap: 8px 10px; }
  .lists-head .spacer { display: none; }
  .lists-head h1 { flex: 1 1 100%; }
  /* Auftragsliste und Zeiterfassung: Steuerungen in klaren, vollen Zeilen */
  .auf-head #auf-add { order: 2; width: 100%; }
  .auf-head .auf-month { order: 3; }
  .zeit-head .zeit-format { order: 2; width: 100%; }
  .zeit-head .zeit-format .auf-segbtn { flex: 1 1 0; }
  .zeit-head .auf-month { order: 3; }
  .auf-month { width: 100%; justify-content: space-between; }
  .auf-mlabel { min-width: 0; flex: 1; }
  .auf-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
  .auf-toolbar .auf-search { grid-column: 1 / -1; }
  .auf-toolbar label:last-child { grid-column: 1 / -1; }
  .auf-filters { gap: 10px; }
  .auf-seg { flex: 1 1 100%; }
  .auf-segbtn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .auf-row { grid-template-columns: 7px minmax(0, 1fr); align-items: flex-start; padding: 7px 9px; }
  .auf-row > .swatch { margin-top: 1px; height: 28px; }
  .auf-main { grid-column: 2; min-width: 0; }
  .auf-title { overflow-wrap: anywhere; }
  .auf-title { flex-wrap: wrap; gap: 2px 6px; }
  .auf-title strong, .auf-title > span:not(.auf-manual-tag) { flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; }
  .auf-right { grid-column: 2; width: auto; margin-left: 0; align-items: flex-start; gap: 4px; }
  .auf-deadlines { justify-content: flex-start; flex-wrap: wrap; }
  .auf-budget { width: 100%; min-width: 0; flex-wrap: wrap; }
  .auf-budget .ab-bar { flex: 1 1 120px; }
  .auf-budget .ab-txt { min-width: 0; overflow-wrap: anywhere; }
  .auf-actions { width: 100%; justify-content: flex-start; }
  .auf-actions .linkbtn { overflow-wrap: anywhere; text-align: left; }
  .auf-groups { gap: 8px; }
  .auf-ghead { padding: 8px 11px; }
  .auf-gtitle { overflow-wrap: anywhere; }
  .onb-act { width: 100%; }
  #onbWrap .field { min-width: 0; width: 100%; }
  #onbWrap .field select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
}
/* Formular-Builder */
.fe-add { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.fe-add select { min-width: 0; max-width: 100%; }
.fe-fields { display: flex; flex-direction: column; gap: 8px; }
.fe-row { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fcfbfe; }
.fe-row-top { display: flex; align-items: center; gap: 8px; }
.fe-row-top .fe-label { flex: 1; }
.fe-move { display: flex; flex-direction: column; line-height: 1; }
.fe-move .linkbtn { padding: 0 2px; font-size: 11px; }
.fe-row-props { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.fe-row-props .fe-key { flex: 1; min-width: 160px; }
.fe-req { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.fe-conditions { margin-top: 7px; padding: 7px 9px; border-radius: 8px; background: #f6f4fa; }
.fe-condition-head { display: flex; align-items: center; gap: 8px; min-height: 28px; color: var(--muted); font-size: 12px; font-weight: 700; }
.fe-condition-head .fe-cond-mode { padding: 5px 7px; font-size: 12px; }
.fe-condition-head .fe-cond-add { margin-left: auto; }
.fe-condition-row { display: grid; grid-template-columns: minmax(150px, 1fr) auto minmax(130px, 1fr) auto; align-items: center; gap: 7px; margin-top: 6px; }
.fe-condition-row > span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.fe-row textarea.fe-opts { width: 100%; margin-top: 6px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.fe-row input, .fe-row select, .fe-row textarea { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.fe-file-note { margin: 7px 2px 1px; font-size: 11.5px; }
.fe-group-editor { margin-top: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.fe-group-props { display: grid; grid-template-columns: minmax(150px, 1fr) 110px 125px minmax(210px, 1.4fr); gap: 8px; }
.fe-group-props label { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.fe-group-props input { display: block; width: 100%; margin-top: 3px; }
.fe-group-props small { display: block; margin-top: 2px; font-weight: 400; }
.fe-subfields { margin-top: 10px; }
.fe-subfields > strong { display: block; margin-bottom: 5px; font-size: 12px; color: var(--muted); }
.fe-subrow { display: grid; grid-template-columns: 150px minmax(150px, 1fr) minmax(110px, .7fr) auto auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.fe-sub-actions { display: flex; align-items: center; gap: 2px; }
.fe-sub-actions .linkbtn { padding: 3px 5px; }
.fe-subrow .fe-sub-opts { grid-column: 2 / -1; width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
@media (max-width: 680px) {
  .fe-add select { flex: 1 1 100%; width: 100%; }
  .fe-row-top { align-items: flex-start; flex-wrap: wrap; }
  .fe-row-top .fe-label { flex: 1 1 calc(100% - 145px); min-width: 150px; }
  .fe-condition-head { flex-wrap: wrap; }
  .fe-condition-head .fe-cond-add { margin-left: 0; }
  .fe-condition-row { grid-template-columns: 1fr auto; }
  .fe-condition-row > span { display: none; }
  .fe-condition-row .fe-cond-field, .fe-condition-row .fe-cond-val { grid-column: 1 / -1; width: 100%; }
  .fe-group-props { grid-template-columns: 1fr 1fr; }
  .fe-group-props label:first-child, .fe-group-props label:last-child { grid-column: 1 / -1; }
  .fe-subrow { grid-template-columns: 1fr auto; }
  .fe-subrow .fe-sub-type, .fe-subrow .fe-sub-label, .fe-subrow .fe-sub-key, .fe-subrow .fe-sub-opts { grid-column: 1 / -1; width: 100%; }
}
.onb-upload-info { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; padding: 10px 12px;
  border-left: 3px solid var(--violet); border-radius: 5px; background: #f6f3fa; color: var(--ink); font-size: 13px; }
.onb-upload-info span { color: var(--muted); font-size: 12px; }
.onb-upload-list { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }
.onb-upload-list span { padding-top: 3px; border-top: 1px solid #e7e1ef; overflow-wrap: anywhere; }
.onb-upload-list a { color: var(--violet); font-weight: 700; }
.onb-returned-data { margin: 0 0 12px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #faf9fc; }
.onb-returned-data summary { cursor: pointer; color: var(--violet); font-weight: 700; }
.onb-returned-data pre { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12.5px/1.5 'Open Sans', Arial, sans-serif; color: var(--ink); }

/* ───────────── Zeiterfassung ───────────── */
.zeit-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.zeit-view, .zeit-format { display: flex; gap: 6px; }
.zeit-range-nav { min-width: 210px; }
.zeit-anchor { width: 145px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; font: inherit; }
.zeit-timer { display: flex; align-items: center; gap: 14px; justify-content: space-between;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 6px 0 14px; background: #fcfbfe; }
.zeit-timer.running { border-color: var(--violet); background: #f5f2fc; }
.zeit-timer-left { min-width: 0; }
.zeit-timer-state { font-size: 12.5px; font-weight: 700; color: var(--violet); }
.zeit-timer .muted { color: var(--muted); }
.zeit-live { font-size: 30px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--ink); }
.zeit-timer-sub { font-size: 13px; color: var(--ink); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zeit-timer-actions { display: flex; gap: 8px; flex-shrink: 0; }
.zeit-eval-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; background: #fff; }
.zeit-eval-row { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; border-bottom: 1px solid #f3f1f8; }
.zeit-eval-row:last-child { border-bottom: 0; }
.zeit-eval-label { width: 130px; flex-shrink: 0; font-size: 12.5px; color: var(--muted); font-weight: 600; padding-top: 3px; }
.zeit-total { font-size: 20px; font-weight: 800; color: var(--violet); font-variant-numeric: tabular-nums; }
.zeit-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.zeit-chip { display: inline-flex; align-items: center; gap: 6px; background: #f5f4f9; border: 1px solid var(--line);
  border-radius: 20px; padding: 3px 11px; font-size: 12.5px; }
.zeit-chip .swatch { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.zeit-unit { font-size: 12px; font-weight: 500; color: var(--muted); }
.zeit-row { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid #f0eef5; }
.zeit-row:last-child { border-bottom: 0; }
.zeit-row .swatch { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.zeit-main { flex: 1; min-width: 0; }
.zeit-title { font-weight: 600; }
.zeit-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zeit-date { white-space: nowrap; }
.zeit-who { font-weight: 700; color: var(--violet); }
.zeit-dur { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15px; white-space: nowrap; }
.zeit-dur .zeit-unit { font-weight: 500; }
.zeit-actions { display: flex; gap: 6px; flex-shrink: 0; }
@media (max-width: 768px) {
  .zeit-controls { align-items: stretch; }
  .zeit-view, .zeit-format { width: 100%; }
  .zeit-view .auf-segbtn, .zeit-format .auf-segbtn { flex: 1 1 0; }
  .zeit-range-nav { width: 100%; }
  .zeit-anchor { width: 100%; }
  .zeit-timer { flex-direction: column; align-items: stretch; }
  .zeit-timer-left, .zeit-timer-sub { min-width: 0; overflow-wrap: anywhere; }
  .zeit-timer-actions { justify-content: flex-end; flex-wrap: wrap; }
  .zeit-eval-row { flex-direction: column; gap: 4px; }
  .zeit-eval-label { width: auto; }
  .zeit-chips { min-width: 0; width: 100%; }
  .zeit-chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .zeit-row { align-items: flex-start; flex-wrap: wrap; }
  .zeit-title { overflow-wrap: anywhere; }
  .zeit-sub { overflow-wrap: anywhere; }
  .zeit-date { white-space: normal; }
  .zeit-dur { margin-left: auto; }
  .zeit-actions { width: 100%; justify-content: flex-start; margin-left: 22px; flex-wrap: wrap; }
}
@media (max-width: 380px) {
  .zeit-timer-actions .btn { flex: 1 1 100%; }
  .auf-right { margin-left: 0; }
  .zeit-actions { margin-left: 0; }
}

/* ───────────── Hilfecenter ───────────── */
/* ── Hilfecenter: großes, zweispaltiges Fenster (Kategorien links, Anleitungen rechts) ── */
.modal.modal-help { max-width: 1040px; }
.modal-help .modal-body { padding: 18px 24px 8px; }
.help-search { width: 100%; padding: 13px 16px; border: 1px solid var(--line); border-radius: 11px;
  font-size: 15.5px; }
.help-search:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(56,45,94,.10); }
.help-top { margin-bottom: 16px; }
/* Kategorie-Auswahl als Dropdown – nur auf dem Handy sichtbar (siehe @media) */
.help-cat-mobile { display: none; margin-bottom: 14px; }
.help-cat-sel { width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 11px;
  background: #fff; font-size: 15px; font-weight: 600; color: var(--ink); }
.help-cat-sel:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(56,45,94,.10); }

.help-layout { display: grid; grid-template-columns: 232px 1fr; gap: 20px; align-items: start; }
.help-side { display: flex; flex-direction: column; gap: 4px; }
.help-cat { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  text-align: left; width: 100%; border: 1px solid transparent; background: transparent;
  color: var(--ink); padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer; }
.help-cat:hover { background: #f4f2fa; }
.help-cat.active { background: var(--violet); color: #fff; }
.help-cat-n { font-size: 12px; font-weight: 700; opacity: .7;
  background: rgba(56,45,94,.08); color: var(--violet); border-radius: 999px; padding: 1px 8px; min-width: 22px; text-align: center; }
.help-cat.active .help-cat-n { background: rgba(255,255,255,.22); color: #fff; opacity: 1; }

.help-main-head { font-size: 13px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px; }
.help-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.help-item { text-align: left; width: 100%; border: 1px solid var(--line); background: #fff;
  border-radius: 12px; padding: 14px 16px; transition: .12s; cursor: pointer; }
.help-item:hover { border-color: var(--violet); background: #faf9fd; box-shadow: 0 3px 12px rgba(20,12,45,.06); }
.help-item .hi-title { font-weight: 700; color: var(--ink); font-size: 15px; margin-top: 2px; }
.help-item .hi-cat { font-size: 11.5px; color: var(--violet); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.help-item .hi-snip { font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.help-empty { color: var(--muted); padding: 24px 4px; font-size: 14.5px; }

.help-article-wrap { max-width: 760px; }
.help-article { font-size: 15px; line-height: 1.6; }
.help-article h4 { margin: 2px 0 6px; font-size: 20px; color: var(--ink); }
.help-article .ha-cat { font-size: 12px; color: var(--violet); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.help-article p { margin: 0 0 11px; }
.help-article ul { margin: 0 0 11px; padding-left: 22px; }
.help-article li { margin: 5px 0; }
.help-article strong { color: var(--ink); }
.help-figure { margin: 14px 0 18px; }
.help-figure a { display: block; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: #f7f6fb; line-height: 0; box-shadow: 0 4px 16px rgba(38,31,64,.08); }
.help-figure a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.help-figure img { display: block; width: 100%; height: auto; }
.help-figure figcaption { margin-top: 7px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
@keyframes helpCursor {
  0% { transform: translate(0, 0); }
  22% { transform: translate(54px, -54px); }
  48% { transform: translate(132px, -64px); }
  72% { transform: translate(96px, -20px); }
  100% { transform: translate(0, 0); }
}
@keyframes helpFocus {
  0%, 16%, 100% { opacity: 0; transform: translateY(0); }
  24%, 46% { opacity: 1; transform: translateY(0); }
  54%, 74% { opacity: 1; transform: translateY(34px); }
  82% { opacity: 0; transform: translateY(34px); }
}
.help-back { background: transparent; border: none; color: var(--violet); font-weight: 700;
  padding: 4px 0 14px; font-size: 14px; cursor: pointer; }
.help-back:hover { text-decoration: underline; }
.help-tourbar { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.help-tourbar .muted { font-size: 13.5px; }

/* ───────────── Einführungs-Tour ───────────── */
.tour-spot { position: fixed; border-radius: 12px; pointer-events: none; z-index: 1200;
  box-shadow: 0 0 0 9999px rgba(28,20,52,.55); transition: all .2s ease; }
.tour-card { position: fixed; z-index: 1201; background: #fff; border-radius: 14px;
  width: min(430px, calc(100vw - 28px)); box-shadow: 0 10px 40px rgba(20,12,40,.4);
  padding: 20px 22px; }
.tour-card .tc-step { font-size: 12px; color: var(--violet); font-weight: 700; letter-spacing: .03em; }
.tour-card h4 { margin: 4px 0 8px; font-size: 18px; color: var(--ink); }
.tour-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.tour-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.tour-foot .spacer { flex: 1; }
.tour-skip { background: transparent; border: none; color: var(--muted); font-size: 13px;
  font-weight: 600; padding: 6px 4px; }
.tour-skip:hover { color: var(--ink); text-decoration: underline; }
.tour-dots { display: flex; gap: 5px; margin-top: 12px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); display: block; }
.tour-dots i.on { background: var(--violet); }

@media (max-width: 768px) {
  .tour-card { width: calc(100vw - 24px); left: 12px !important; right: 12px;
    bottom: 14px !important; top: auto !important; }
  .help-layout { grid-template-columns: 1fr; gap: 14px; }
  .help-side { display: none; }
  .help-cat-mobile { display: block; }
  .help-list { grid-template-columns: 1fr; }
}

/* ============================================================
   Ergänzungen (Übersicht-Polish, DATEV, Mandatstyp-Icon, Dashboard)
   Bewusst am Dateiende, damit diese Regeln im Cascade gewinnen.
   ============================================================ */

/* Mandatstyp als kleines Icon (Person = Privat, Gebäude = Unternehmen) */
.ent-ic { display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 6px; flex: 0 0 auto; border-radius: 5px; }
.ent-ic svg { width: 13px; height: 13px; }
.ent-privat { background: #e9f3ee; color: #2e7d52; }
.ent-firma  { background: #ECEAF4; color: var(--violet); }
.mand-row .ent-ic { margin-left: 4px; }
.time-mand-type { min-height: 20px; margin-top: 5px; display: flex; align-items: center; gap: 5px;
  color: var(--muted); font-size: 11.5px; font-weight: 600; }
.time-mand-type .ent-ic { margin-left: 0; }

/* Stammdaten: Kontakte rechts neben den Stammdaten */
.sd-grid { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(320px, 1fr);
  gap: 16px; align-items: start; }
.sd-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; align-self: start; }
.sd-grid .sd-contacts { align-self: start; min-width: 0; }
.sd-grid .ct-row { padding: 11px 6px; gap: 14px; }
.sd-grid .ct-name { font-size: 15px; }
/* E-Mail / Telefon / Notiz jeweils eigene Zeile – lange E-Mail bricht nicht mehr mitten im Wort */
.ct-sub { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.45; }
.ct-sub .ct-mail { color: var(--violet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ct-sub .ct-phone { color: var(--ink); }
.sd-mand-note textarea { width: 100%; min-height: 112px; resize: vertical; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); line-height: 1.45; }
.sd-mand-note textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(56,45,94,.12); }
.sd-note-foot { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 8px; min-height: 29px; }
@media (max-width: 1180px) { .sd-grid { grid-template-columns: 1fr; } .ct-sub .ct-mail { white-space: normal; overflow-wrap: anywhere; } }
/* Stammdaten-Unterreiter: je Reiter bleiben die zugehörigen Abschnitte untereinander lesbar. */
.sd-sections { columns: 1; }
@media (max-width: 768px) {
  .sd { padding: 16px 14px 32px; }
  .sd-subtabs { width: 100%; margin-left: 0; order: 3; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
  .sd-subtab { flex: 0 0 auto; text-align: center; }
  .sd-edit-actions { margin-left: auto; }
  .sd-row-edit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .sd-row-edit > .sd-label { flex-basis: auto; padding-top: 0; font-weight: 700; }
  .sd-val-edit { width: 100%; }
  .sd-val-edit .row { flex-wrap: wrap; }
  .sd-val-edit .row > .field { flex: 1 1 100%; }
  .sd-status-date { padding-left: 0; }
  .sd-date-pair { grid-template-columns: minmax(0, 1fr); }
  .sd-kundennummer-actions .btn { width: 100%; }
}

/* Dashboard: „demnächst fällig"-Blöcke nebeneinander, wenn Platz ist */
.due-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 10px; margin-top: 10px; align-items: start; }
.due-grid > .panel { min-width: 0; margin-top: 0 !important; }
/* Zeilen etwas kompakter, damit lange Listen übersichtlich bleiben */
.ustva-line { padding: 7px 4px; gap: 8px; }
.ustva-line .uv-name { font-size: 13.5px; }
.ustva-line .uv-label { font-size: 12px; }
.ustva-line .uv-date { font-size: 13px; }
/* Zuletzt geöffnet: schlanke Zeilen statt großer Mandantenkarten */
.dash-recent-list { display: flex; flex-direction: column; }
.dash-recent-row { display: grid; grid-template-columns: 5px minmax(0, 1fr) auto auto 14px; align-items: center;
  gap: 7px; width: 100%; min-height: 35px; padding: 5px 4px; border: 0; border-bottom: 1px solid #f0eef5;
  background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.dash-recent-row:last-child { border-bottom: 0; }
.dash-recent-row:hover { background: #faf9fd; }
.dash-recent-row:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; border-radius: 6px; }
.dash-recent-color { width: 4px; height: 22px; border-radius: 999px; }
.dash-recent-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
.dash-recent-open, .dash-recent-time { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.dash-recent-arrow { color: var(--violet); font-size: 18px; line-height: 1; }
/* Dashboard: klare, weich eingefärbte Kacheln mit Bedeutung pro Bereich */
.dash {
  background: linear-gradient(180deg, #fbfafc 0%, #f6f5fa 100%);
}
.stat-row { gap: 12px; }
.stat {
  position: relative;
  overflow: hidden;
  border-color: #e8e2ed;
  box-shadow: 0 9px 24px rgba(38,31,64,.055);
}
.stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--stat-accent, var(--violet));
}
.stat.red { --stat-accent: #C84449; background: linear-gradient(135deg, #fff 0%, #fff4f4 100%); }
.stat.violet { --stat-accent: #382D5E; background: linear-gradient(135deg, #fff 0%, #f1edf8 100%); }
.stat-row .stat:nth-child(3) { --stat-accent: #1f6f8b; background: linear-gradient(135deg, #fff 0%, #edf6f8 100%); }
.stat-row .stat:nth-child(4) { --stat-accent: #2f7d4f; background: linear-gradient(135deg, #fff 0%, #eef8f1 100%); }
.dash-layout { gap: 14px; }
.dash-collap {
  --dash-accent: var(--violet);
  --dash-soft: #f4f1fa;
  position: relative;
  overflow: hidden;
  border-color: #e8e2ed;
  border-radius: 14px;
  box-shadow: 0 9px 24px rgba(38,31,64,.055);
}
.dash-collap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--dash-accent);
}
.dash-collap > .dash-phead {
  padding-left: 16px;
  background: linear-gradient(90deg, var(--dash-soft) 0%, #fff 86%);
  border-bottom-color: #eee8f2;
}
.dash-collap > .dash-phead:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--dash-soft) 86%, var(--dash-accent)) 0%, #fff 86%);
}
.dash-collap .dash-ptitle { font-size: 13.5px; font-weight: 800; color: var(--violet-deep); }
.dash-collap.ustva-panel { --dash-accent: #C84449; --dash-soft: #fff0f1; }
.dash-collap.ustva-panel[data-dsec="lohn"] { --dash-accent: #2f7d4f; --dash-soft: #edf8f0; }
.dash-collap.ustva-panel[data-dsec="ja"] { --dash-accent: #9a6a16; --dash-soft: #fff6df; }
.dash-collap.ustva-panel[data-dsec="onb"] { --dash-accent: #1f6f8b; --dash-soft: #eaf5f8; }
.dash-tone-red { --dash-accent: #C84449; --dash-soft: #fff0f1; }
.dash-tone-blue { --dash-accent: #1f6f8b; --dash-soft: #eaf5f8; }
.dash-tone-violet { --dash-accent: #382D5E; --dash-soft: #f1edf8; }
.dash-tone-green { --dash-accent: #2f7d4f; --dash-soft: #edf8f0; }
.dash-collap > .dash-phead .tag {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--dash-accent) 24%, #fff);
  color: var(--dash-accent);
}
.dash-collap.ustva-panel > .dash-phead .tag {
  background: var(--dash-accent);
  color: #fff;
  border-color: var(--dash-accent);
}
/* Vorschau vor dem echten SMTP-Versand einer Neuaufnahme-Einladung */
.onb-mail-preview { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: #faf9fd;
  color: var(--ink); font-size: 13px; line-height: 1.45; }
.onb-mail-preview p { margin: 8px 0; }
.onb-mail-link { padding: 7px 9px; border-radius: 6px; background: #fff; color: var(--violet); overflow-wrap: anywhere; font-size: 12px; }
@media (max-width: 680px) {
  .due-grid { grid-template-columns: minmax(0, 1fr); }
  .ustva-line .uv-name, .ustva-line .uv-label { min-width: 0; overflow-wrap: anywhere; }
  .dash-recent-row { grid-template-columns: 5px minmax(0, 1fr) auto 14px; gap: 6px; }
  .dash-recent-time { display: none; }
}

/* Mehr Luft in Vorlagen und Mitarbeiter (saßen am Rand) – gleicher Abstand wie die übrigen Übersichten */
#vorlagenWrap, #mitarbeiterWrap { padding: 22px 26px 40px; max-width: 1180px; }
@media (max-width: 768px) {
  #vorlagenWrap, #mitarbeiterWrap { padding: 16px 14px 40px; }
}
/* Mandanten/Organisationen nutzen exakt dieselbe Hülle wie die übrigen Übersichten
   (gleicher Abstand zur Navigation), nur etwas breiter für die Karten. */
.uebersicht-mand { max-width: 1120px; }

/* Hilfe-Schnellzugriff: „?" neben der Suche und in der mobilen Topbar */
.side-search { display: flex; align-items: center; gap: 8px; }
.side-search input { flex: 1; }
.side-help { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid #E6E2F0; background: #fff; color: var(--violet); font-weight: 800;
  font-size: 15px; cursor: pointer; line-height: 1; }
.side-help:hover { border-color: var(--violet); background: #f6f4fc; }
.mt-help { margin-left: auto; width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12);
  color: #fff; font-weight: 800; font-size: 16px; cursor: pointer; line-height: 1; flex: 0 0 auto; }

/* ═══════════════════ Benachrichtigungen (@-Erwähnungen) ═══════════════════ */
.notif-btn { position: relative; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid #E6E2F0; background: #fff; color: var(--violet); cursor: pointer; display: grid; place-items: center; }
.notif-btn svg { width: 17px; height: 17px; }
.notif-btn:hover { border-color: var(--violet); background: #f6f4fc; }
.notif-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 0 0 2px #fff; }
.mobile-topbar .notif-btn { margin-left: auto; width: 32px; height: 32px;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; }
.mobile-topbar .notif-btn + .mt-help { margin-left: 8px; }
.mobile-topbar .notif-btn .notif-badge { box-shadow: 0 0 0 2px var(--violet-deep); }
.notif-panel { position: fixed; z-index: 200; width: 340px; max-width: calc(100vw - 16px);
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 44px rgba(20,12,40,.20); overflow: hidden; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px;
  border-bottom: 1px solid var(--line); font-weight: 700; color: var(--violet-deep); }
.notif-readall { border: 0; background: none; color: var(--violet); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.notif-readall:hover { text-decoration: underline; }
.notif-list { max-height: 62vh; overflow-y: auto; }
.notif-empty { padding: 24px 14px; text-align: center; color: var(--muted); font-size: 13px; }
.notif-item { display: flex; gap: 10px; width: 100%; text-align: left; border: 0; background: none;
  padding: 11px 14px; cursor: pointer; border-bottom: 1px solid #f1eff5; }
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: #f7f6fb; }
.notif-item .ni-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 5px; }
.notif-item .ni-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-item .ni-top { font-size: 12.5px; color: var(--violet-deep); }
.notif-item .ni-text { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif-item .ni-time { font-size: 11px; color: var(--muted); }

/* ═══════════════════ Mitarbeiterverwaltung ═══════════════════ */
.mit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.mit-card { display: flex; gap: 12px; text-align: left; width: 100%; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(20,12,40,.04); transition: border-color .12s, box-shadow .12s, transform .12s; }
.mit-card:hover { border-color: color-mix(in srgb, var(--violet) 40%, #fff); box-shadow: 0 6px 18px rgba(20,12,40,.08); transform: translateY(-1px); }
.mit-av { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; color: #fff;
  display: grid; place-items: center; font-size: 14px; font-weight: 800; }
.mit-av.lg { width: 52px; height: 52px; font-size: 18px; }
.mit-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mit-name { font-weight: 700; color: var(--violet-deep); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mit-user { font-size: 12px; color: var(--muted); }
.mit-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; }
.mit-fact { display: flex; flex-direction: column; line-height: 1.2; }
.mit-fact-l { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.mit-fact strong { font-size: 13.5px; color: var(--ink); }
.mit-contacts { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; }
.mit-c { font-size: 12px; color: var(--ink); overflow-wrap: anywhere; }
.mit-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.mit-detail-name { font-weight: 800; font-size: 17px; color: var(--violet-deep); }
.mit-detail-name small { font-weight: 500; color: var(--muted); font-size: 13px; }
.mit-h4 { margin: 16px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.mit-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.zeit-cost { color: var(--violet); font-weight: 700; }
.zeit-chip-strong { background: color-mix(in srgb, var(--violet) 8%, #fff); border-color: color-mix(in srgb, var(--violet) 24%, #fff); }

@media (max-width: 768px) {
  .mit-grid { grid-template-columns: 1fr; gap: 12px; }
  .mit-card { padding: 14px; align-items: flex-start; }
  .mit-av { width: 44px; height: 44px; font-size: 15px; }
  .mit-name { font-size: 15px; }
  /* Fakten & Kontakte je Zeile untereinander statt gequetscht nebeneinander */
  .mit-facts { gap: 10px 20px; margin-top: 6px; }
  .mit-contacts { flex-direction: column; gap: 3px; margin-top: 6px; }
  .mit-c { font-size: 13px; }
  .mit-actions { width: 100%; }
  .mit-actions .btn { flex: 1 1 auto; }
}

/* ═══════════════════ USt-VA-Betrag je Monat (Buchhaltung) ═══════════════════ */
.buch-betrag { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.buch-betrag > span { font-weight: 600; }
.buch-betrag input { width: 84px; padding: 6px 7px; border: 1px solid var(--line); border-radius: 8px;
  text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.buch-betrag input.erstattung { color: var(--ok); }
.buch-betrag input.zahllast { color: var(--ink); }
/* Jahres-Saldo oberhalb der Monatsliste */
.buch-ustva-sum { margin: 0 0 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: color-mix(in srgb, var(--violet) 5%, #fff); font-size: 14px; }
.buch-ustva-sum .erstattung { color: var(--ok); font-weight: 700; }
.buch-ustva-sum .zahllast { color: var(--ink); font-weight: 700; }
@media (max-width: 768px) {
  .buch-betrag { margin-left: 0; flex: 1 1 100%; }
  .buch-betrag input { flex: 1; width: auto; }
}

/* Release 23: einklappbare Mandanten */
.mand-collapse { width: 24px; height: 24px; flex: 0 0 24px; display: inline-grid; place-items: center;
  padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted);
  font: inherit; font-size: 18px; line-height: 1; cursor: pointer; transform: rotate(0); transition: transform .12s, background .12s; }
.mand-collapse:hover { background: var(--paper-2); color: var(--violet); }
.mand-card2.is-collapsed .mand-collapse, .mand-row.is-collapsed .mand-collapse { transform: rotate(-90deg); }
.mc2-details { display: block; }
.mand-card2.is-collapsed .mc2-details { display: none; }
.mand-card2.is-collapsed .mc2-body { padding-top: 9px; padding-bottom: 9px; }
.mand-row.is-collapsed .mr-contact,
.mand-row.is-collapsed .mand-orgpick-wrap,
.mand-row.is-collapsed .mr-org,
.mand-row.is-collapsed .mand-group-badge,
.mand-row.is-collapsed .mand-track,
.mand-row.is-collapsed .mr-arch { display: none; }
.mand-row.is-collapsed { min-height: 42px; }

/* Deutlich erkennbare Ein-/Ausklapp-Schaltflächen */
.mand-collapse, .ov-collapse, .check-collapse {
  width: 28px; height: 28px; flex: 0 0 28px; display: inline-grid; place-items: center;
  margin: 0 6px 0 0; padding: 0; border: 1px solid color-mix(in srgb, var(--violet) 24%, #fff);
  border-radius: 8px; background: color-mix(in srgb, var(--violet) 9%, #fff);
  color: var(--violet); cursor: pointer; box-shadow: 0 1px 2px rgba(35, 26, 65, .08);
  transform: none; transition: color .12s, background .12s, border-color .12s, box-shadow .12s;
}
.mand-collapse:hover, .ov-collapse:hover, .check-collapse:hover {
  border-color: var(--violet); background: var(--violet); color: #fff;
  box-shadow: 0 3px 8px rgba(56, 45, 94, .18);
}
.mand-collapse:focus-visible, .ov-collapse:focus-visible, .check-collapse:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px;
}
.collapse-chevron { width: 16px; height: 16px; display: block; transition: transform .15s ease; }
.mand-card2.is-collapsed .mand-collapse,
.mand-row.is-collapsed .mand-collapse,
.ov-collapse.is-collapsed { transform: none; }
.mand-card2.is-collapsed .mand-collapse .collapse-chevron,
.mand-row.is-collapsed .mand-collapse .collapse-chevron,
.ov-collapse.is-collapsed .collapse-chevron,
.check-collapse.is-collapsed .collapse-chevron { transform: rotate(-90deg); }

/* Auch bei vollständig anklickbaren Überschriften den Pfeil als Aktion hervorheben. */
.nav-eyebrow .chev, .dash-phead .chev, .sd-sec-head .chev {
  box-sizing: content-box; padding: 4px; border: 1px solid color-mix(in srgb, var(--violet) 18%, #fff);
  border-radius: 7px; background: color-mix(in srgb, var(--violet) 7%, #fff);
  color: var(--violet); opacity: 1;
}
.nav-eyebrow:hover .chev, .dash-phead:hover .chev, .sd-sec-head:hover .chev {
  border-color: color-mix(in srgb, var(--violet) 42%, #fff);
  background: color-mix(in srgb, var(--violet) 14%, #fff);
}

/* Mobile Kanal-Leiste in der Unterhaltung – nur auf dem Handy sichtbar */
.gchat-mob-chan { display: none; }
/* Moderner Chat: Kanäle links, Unterhaltung rechts */
.chat { flex-direction: row; min-width: 0; background: #fff; }
.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-mob-bar { display: none; }   /* nur in der mobilen Nachrichten-Ansicht sichtbar */
.chat > .chat-cats { flex: 0 0 190px; width: 190px; padding: 14px 10px; border: 0; border-right: 1px solid var(--line);
  background: #f7f6fa; flex-direction: column; align-items: stretch; flex-wrap: nowrap; overflow-y: auto; }
.chat > .chat-cats::before { content: "Kanäle"; padding: 0 8px 8px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.chat-cats .chat-cat { width: 100%; justify-content: flex-start; border: 0; border-radius: 5px; background: transparent; padding: 8px 10px; }
.chat-cats .chat-cat::before { content: "#"; color: var(--muted); font-weight: 800; }
.chat-cats .chat-cat.active { background: #e9e6f1; color: var(--violet-deep); }
.chat-cats .chat-cat.active::before { color: var(--violet); }
.chat-cats .chat-cat-badge { margin-left: auto; }
.chat-cats .chat-cat-manage { margin: 10px 0 0; width: 100%; }
.chat-scroll { background: #fbfbfd; }
.msg .bubble { border-radius: 7px; box-shadow: 0 1px 1px rgba(36, 28, 60, .04); }
.msg.mine .bubble { border-radius: 7px; background: #e9e6f1; border-color: #ddd8e9; color: var(--ink); }
.msg.grouped .bubble, .msg.mine.grouped .bubble { border-radius: 7px; }

/* Zentrale Kanzlei-Chat-Inbox */
.global-chat-wrap { height: 100%; min-height: 0; }
.gchat-shell { position: relative; height: 100%; display: grid; grid-template-columns: 240px 180px minmax(0, 1fr); background: #fbfafc; }
@media (min-width: 769px) {
  .gchat-shell.hide-mandanten { grid-template-columns: 180px minmax(0, 1fr); }
  .gchat-shell.hide-mandanten .gchat-mandanten { display: none; }
  .gchat-shell.hide-mandanten .gchat-channels { padding-top: 56px; padding-left: 48px; }
  .gchat-shell.hide-channels { grid-template-columns: 240px minmax(0, 1fr); }
  .gchat-shell.hide-channels .gchat-channels { display: none; }
  .gchat-shell.hide-channels .gchat-conversation { padding-left: 48px; }
  .gchat-shell.hide-mandanten.hide-channels { grid-template-columns: minmax(0, 1fr); }
  .gchat-shell.hide-mandanten.hide-channels .gchat-conversation { padding-left: 86px; }
}
.gchat-mandanten, .gchat-channels { min-width: 0; border-right: 1px solid #ebe7ef; background: #fcfbfd; display: flex; flex-direction: column; }
.gchat-side-head { display: flex; align-items: center; gap: 8px; padding: 17px 14px 10px; }
.gchat-side-head h1 { margin: 0; font-size: 20px; color: var(--violet); }
.gchat-search { padding: 0 10px 10px; }
.gchat-search input { width: 100%; min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 5px; }
.gchat-mand-list { overflow-y: auto; padding: 0 7px 10px; }
.gchat-mand { width: 100%; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 9px 8px; border: 0;
  border-radius: 5px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.gchat-mand:hover { background: #f4f1f7; }
.gchat-mand.active { background: #ede9f2; }
.gchat-mand-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.gchat-mand .ent-ic { margin-left: 0; }
.gchat-channels { background: #f6f4f8; padding: 16px 9px 10px; gap: 3px; }
.gchat-channel-title-row { display: flex; align-items: center; gap: 6px; }
.gchat-channel-title { padding: 0 8px 8px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.gchat-channel-title-row .gchat-channel-title { flex: 1; min-width: 0; }
.gchat-column-collapse { flex: none; width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0;
  border: 1px solid #e1dce8; border-radius: 8px; background: #fff; color: var(--violet); font-size: 20px; line-height: 1; cursor: pointer; }
.gchat-column-collapse:hover { border-color: #c8bfd8; background: #f0edf5; }
.gchat-side-head .gchat-column-collapse { margin-left: auto; }
.gchat-reopen-controls { position: absolute; top: 14px; left: 10px; z-index: 8; display: flex; gap: 6px; width: max-content; padding: 3px; border: 1px solid #ebe7ef; border-radius: 10px; background: rgba(251,250,252,.96); box-shadow: 0 5px 18px rgba(38,31,64,.08); }
@media (min-width: 769px) {
  .gchat-shell.hide-channels:not(.hide-mandanten) .gchat-reopen-controls { left: 250px; }
}
.gchat-column-reopen { width: 30px; height: 30px; display: inline-grid; place-items: center; padding: 0;
  border: 1px solid #e1dce8; border-radius: 8px; background: #fff; color: var(--violet); font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: none; }
.gchat-column-reopen:hover { border-color: #c8bfd8; background: #f0edf5; }
.gchat-kanaele-mandant { display: none; }   /* nur in der mobilen Kanäle-Ansicht sichtbar */
.gchat-channels .chat-cat { width: 100%; border: 0; border-radius: 5px; background: transparent; justify-content: flex-start; padding: 8px 9px; }
.gchat-channels .chat-cat.active { background: #e2deec; color: var(--violet-deep); }
.gchat-channels .chat-cat-badge { margin-left: auto; }
.gchat-channels .chat-cat-manage { margin: 10px 0 0; width: 100%; }
.gchat-conversation { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #faf9fb; }
.gchat-head { flex: 0 0 auto; min-height: 58px; display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--line); background: #fff; }
.gchat-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gchat-head > .gchat-layout-controls { flex: 0 0 auto; min-width: 0; flex-direction: row; align-items: center; gap: 6px; }
.gchat-empty-head { justify-content: flex-end; }
.gchat-layout-btn { border: 1px solid #e5e1eb; border-radius: 8px; padding: 6px 9px; background: #fbfafc; color: var(--violet);
  font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.gchat-layout-btn:hover, .gchat-layout-btn.off { border-color: #cec6d9; background: #f0edf5; }
.gchat-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gchat-head span { color: var(--muted); font-size: 12px; }
.gchat-conversation > .chat-scroll { min-height: 0; }
.gchat-back { display: none; }   /* nur in der mobilen Chat-Ansicht sichtbar */
/* Dokumentnaher Vorlageneditor */
.modal.modal-template-editor { width: min(1180px, calc(100vw - 32px)); max-width: 1180px; height: min(900px, calc(100vh - 28px));
  max-height: none; overflow: hidden; display: flex; flex-direction: column; }
.modal-template-editor > h3 { flex: 0 0 auto; }
.modal-template-editor .modal-body { flex: 1; min-height: 0; overflow: hidden; padding-bottom: 12px; display: flex; flex-direction: column; }
.modal-template-editor .modal-foot { flex: 0 0 auto; }
.tpl-meta-grid { flex: 0 0 auto; display: grid; grid-template-columns: 2fr 1fr 1.4fr 1.4fr; gap: 10px; }
.tpl-meta-grid .field { min-width: 0; margin-bottom: 8px; }
.tpl-import-note { display: block; margin-top: 3px; font-size: 11px; }
.tpl-kind-new { margin-top: 5px; }
.tpl-cat-sugg { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.chip-sugg { border: 1px solid var(--line); background: #f7f6fa; color: var(--muted);
  padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600; cursor: pointer; line-height: 1.4; }
.chip-sugg:hover { border-color: var(--violet-700); color: var(--violet); background: #fff; }
.tpl-orig-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); background: #faf9fd; margin-bottom: 10px; }
.tpl-orig-line input { margin-left: auto; max-width: 260px; }
.tpl-editor-shell { flex: 1; min-height: 0; display: grid; grid-template-columns: 210px minmax(0, 1fr); border: 1px solid var(--line); }
.tpl-editor-side { min-width: 0; overflow-y: auto; padding: 12px 9px; border-right: 1px solid var(--line); background: #f7f6fa; }
.tpl-side-title { margin: 4px 5px 7px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.tpl-side-title:not(:first-child) { margin-top: 18px; }
.tpl-side-intro { margin: 0 5px 9px; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.tpl-side-list { display: flex; flex-direction: column; gap: 3px; }
.tpl-side-group { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: start; min-width: 0; }
.tpl-side-item { width: 100%; min-width: 0; display: flex; align-items: center; gap: 7px; border: 0; border-radius: 4px;
  padding: 7px 6px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; overflow: hidden; }
.tpl-side-item:hover, .tpl-side-item:focus-visible { background: var(--paper-2); outline: none; }
.tpl-side-item span { flex: 0 0 22px; color: var(--violet); font-weight: 800; text-align: center; }
.tpl-side-info { width: 26px; min-height: 30px; margin-top: 1px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.tpl-side-info:hover, .tpl-side-info:focus-visible, .tpl-side-info[aria-expanded="true"] {
  background: var(--paper-2); color: var(--violet); outline: none; }
.tpl-hint-box { display: none; grid-column: 1 / -1; margin: 2px 3px 7px; padding: 8px 9px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--paper-2); color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.tpl-hint-box strong { display: block; margin-bottom: 3px; color: var(--violet-deep); font-size: 11.5px; }
.tpl-side-group:hover > .tpl-hint-box, .tpl-side-group:focus-within > .tpl-hint-box,
.tpl-side-group.is-hint-open > .tpl-hint-box { display: block; }
.tpl-editor-work { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #e9e8ec; }
.tpl-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 3px; min-height: 42px; padding: 5px 8px; border-bottom: 1px solid var(--line); background: #fff; }
.tpl-toolbar > span { width: 1px; height: 24px; background: var(--line); margin: 0 3px; }
.tpl-toolbar button { min-width: 30px; height: 30px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); cursor: pointer; }
.tpl-toolbar button:hover { background: #ece9f3; }
.tpl-page-wrap { flex: 1; min-height: 0; overflow: auto; padding: 24px; }
.tpl-page { width: min(794px, 100%); min-height: 1123px; margin: 0 auto; padding: 76px 72px; background: #fff;
  box-shadow: 0 2px 12px rgba(30, 24, 46, .14); color: #222; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.55; outline: none; }
.tpl-page h1 { margin: 0 0 22px; color: #222; font-size: 25px; }
.tpl-page h2 { margin: 22px 0 12px; color: #222; font-size: 19px; }
.tpl-page h3 { margin: 18px 0 10px; color: #222; font-size: 16px; }
.tpl-page p { margin: 0 0 12px; }
.tpl-page ul { margin: 0 0 12px; padding-left: 24px; }

/* Datei-Revisionshistorie */
.file-version-list { display: flex; flex-direction: column; }
.file-version-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.file-version-no { flex: 0 0 42px; color: var(--violet); font-weight: 800; }
.file-version-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.file-version-main > span { color: var(--muted); font-size: 11.5px; }
.file-version-main .file-version-note { color: var(--ink); }
.file-version-current { color: var(--ok); font-size: 12px; font-weight: 700; }

@media (max-width: 768px) {
  .gchat-column-collapse { display: none; }
  .gchat-reopen-controls { display: none; }
  .gchat-head > .gchat-layout-controls { display: none; }
  /* Mandanten-Chat-Reiter mobil: Kanäle als vertikale Liste, dann Nachrichten mit Zurück-Knopf. */
  .chat { flex-direction: column; }
  .chat > .chat-cats { flex: 1 1 auto; min-height: 0; width: 100%; padding: 10px 12px 14px; border-right: 0; border-bottom: 0;
    flex-direction: column; align-items: stretch; gap: 3px; overflow-x: hidden; overflow-y: auto; }
  .chat > .chat-cats::before { display: block; content: "Kanäle"; padding: 2px 4px 6px; color: var(--muted);
    font-size: 11px; font-weight: 800; text-transform: uppercase; }
  .chat-cats .chat-cat { width: 100%; flex: 0 0 auto; justify-content: flex-start; white-space: normal; }
  .chat-cats .chat-cat-manage { width: 100%; margin: 8px 0 0; flex: 0 0 auto; }
  /* Umschalten: Kanäle-Ansicht vs. Nachrichten-Ansicht */
  .chat.cm-kanaele .chat-main { display: none; }
  .chat.cm-nachrichten .chat-cats { display: none; }
  .chat.cm-nachrichten .chat-main { display: flex; flex: 1 1 auto; min-height: 0; }
  .chat-mob-bar { display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
    padding: 8px 12px; border-bottom: 1px solid var(--line); background: #fff; }
  .chat-mob-bar .gchat-back { display: inline-flex; align-items: center; gap: 4px; margin: 0;
    border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--violet); font-weight: 700;
    font-size: 12.5px; padding: 6px 12px; cursor: pointer; }
  .chat-mob-cat { font-weight: 800; color: var(--violet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-mob-cat::before { content: "# "; color: var(--muted); }
  /* Mobiler Chat: linke Spalte mit Mandanten (oben) und Kanälen (darunter),
     Unterhaltung rechts über die volle Höhe – so bleibt das Chatfenster groß. */
  .gchat-shell { display: grid;
    grid-template-columns: minmax(78px, 24%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, .72fr);
    grid-template-areas: "mand conv" "chan conv";
    height: 100%; min-height: 0; }
  /* Mandanten und Kanäle auf dem Handy immer sichtbar (Desktop-Ausblenden ignorieren) */
  .gchat-shell .gchat-mandanten, .gchat-shell.hide-mandanten .gchat-mandanten {
    grid-area: mand; display: flex; flex-direction: column; min-height: 0; max-height: none;
    border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f7f6fa; }
  .gchat-shell .gchat-channels, .gchat-shell.hide-channels .gchat-channels {
    grid-area: chan; display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
    border-right: 1px solid var(--line); border-bottom: 0; background: #f2f0f6;
    padding: 8px 8px 12px; gap: 2px; overscroll-behavior: contain; }
  .gchat-shell .gchat-conversation { grid-area: conv; display: flex; flex: 1 1 auto; min-height: 0; border-right: 0; }
  .gchat-side-head { padding: 9px 6px 4px; flex-wrap: wrap; }
  .gchat-side-head h1 { font-size: 14px; }
  .gchat-side-head .mand-count { display: none; }
  .gchat-search { padding: 0 6px 6px; }
  .gchat-search input { padding: 7px 7px; font-size: 12px; }
  .gchat-mand-list { display: flex; flex-direction: column; gap: 2px; overflow-x: hidden; overflow-y: auto;
    padding: 0 6px 10px; overscroll-behavior: contain; }
  .gchat-mand { flex: 0 0 auto; width: 100%; padding: 7px 6px; font-size: 12px; gap: 5px; }
  .gchat-mand .gchat-mand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gchat-mand .ent-ic { display: none; }
  /* Kanäle links kompakt als vertikale Liste */
  .gchat-channels .gchat-channel-title-row { display: flex; padding: 0 2px 4px; }
  .gchat-channels .gchat-channel-title { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); font-weight: 800; }
  .gchat-channels .gchat-column-collapse { display: none; }
  .gchat-channels .chat-cat { width: 100%; flex: 0 0 auto; justify-content: flex-start; white-space: normal;
    padding: 7px 6px; font-size: 12px; border-radius: 7px; }
  .gchat-channels .chat-cat-manage { width: 100%; margin: 6px 0 0; font-size: 11.5px; padding: 6px 8px; }
  .gchat-channels .chat-cat-manage .ccm-txt { display: inline; }
  /* Obere Kanal-Leiste entfällt in diesem Layout */
  .gchat-mob-chan { display: none; }
  /* Zurück-Knöpfe, Mandantenname-Zwischenzeile im 2-Spalten-Layout nicht nötig */
  .gchat-back, .gchat-back-kanaele, .gchat-kanaele-mandant { display: none; }
  .gchat-head { min-height: 48px; padding: 7px 12px; }
  .gchat-head > div strong { font-size: 14px; }
  .tpl-meta-grid { grid-template-columns: 1fr; }
  .modal.modal-template-editor { width: calc(100vw - 12px); height: calc(100vh - 12px); }
  .modal-template-editor .modal-body { overflow-y: auto; }
  .tpl-editor-shell { flex: 0 0 520px; grid-template-columns: 1fr; grid-template-rows: minmax(280px, 1fr) minmax(190px, 240px); min-height: 520px; }
  .tpl-editor-work { order: 1; }
  .tpl-editor-side { order: 2; max-height: 250px; border-right: 0; border-top: 1px solid var(--line); border-bottom: 0; }
  .tpl-side-list { flex-direction: row; overflow-x: auto; }
  .tpl-side-group { flex: 0 0 190px; }
  .tpl-side-item { width: 100%; }
  .tpl-toolbar { overflow-x: auto; }
  .tpl-page-wrap { padding: 10px; }
  .tpl-page { min-height: 720px; padding: 42px 28px; }
  .file-version-row { align-items: flex-start; flex-wrap: wrap; }
  .file-version-main { flex-basis: calc(100% - 55px); }
  .mand-group-filter { width: 100%; max-width: none; }
  .mand-groups-btn { order: 2; }
  .mand-search { order: 3; flex-basis: 100%; max-width: none; }
  .mand-group-filter { order: 4; }
  .mand-group-picker { grid-template-columns: 1fr; max-height: 280px; }
  .mand-group-row { flex-wrap: wrap; }
  .mand-group-actions { width: 100%; justify-content: flex-end; }
  .mand-row .mand-group-badge { flex-basis: 100%; max-width: calc(100% - 44px); margin-left: 44px; }
}
/* ── DATEV-Konverter ───────────────────────────────────────────── */
.datev-hub-wrap {
  height: 100%;
  min-height: 0;
  padding: 22px 24px 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.datev-hub-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.datev-hub-head h1 { margin: 2px 0 5px; color: var(--violet); }
.datev-hub-head p { margin: 0; color: var(--muted); max-width: 760px; }
.datev-hub-head .eyebrow {
  color: var(--red);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.datev-local-note {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--violet);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 11px;
}
.datev-frame {
  width: 100%;
  flex: 1 1 auto;
  min-height: 620px;
  border: 0;
  border-radius: 12px 12px 0 0;
  background: transparent;
}
@media (max-width: 700px) {
  .datev-hub-wrap { padding: 14px 12px 0; }
  .datev-hub-head { display: block; margin-bottom: 12px; }
  .datev-local-note { display: inline-block; margin-top: 10px; }
  .datev-frame { min-height: calc(100vh - 190px); }
}
/* Werkzeuge-Landing */
.werkzeuge-back { margin-bottom: 8px; }
.wz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.wz-card { display: flex; gap: 14px; text-align: left; font: inherit; cursor: pointer;
  --wz-accent: var(--violet); --wz-soft: #f3eff8;
  position: relative; overflow: hidden; border: 1px solid #e8e2ed; border-radius: 14px;
  background: linear-gradient(135deg, #fff 0%, var(--wz-soft) 100%);
  padding: 16px 16px 16px 18px; color: var(--ink);
  box-shadow: 0 8px 22px rgba(38,31,64,.048);
  transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease; }
.wz-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--wz-accent); }
.wz-card:hover { border-color: color-mix(in srgb, var(--wz-accent) 35%, #fff); box-shadow: 0 10px 26px rgba(56,45,94,.11); }
.wz-card:active { transform: translateY(1px); }
.wz-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--wz-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wz-accent) 18%, #fff); }
.wz-ic svg { width: 24px; height: 24px; }
.wz-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.wz-title { font-weight: 800; font-size: 15px; color: var(--violet-deep); }
.wz-desc { font-size: 12.8px; color: var(--muted); line-height: 1.45; }
.wz-foot { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.wz-note { font-size: 11px; font-weight: 700; color: var(--wz-accent); background: #fff; border-radius: 999px; padding: 2px 9px; border: 1px solid color-mix(in srgb, var(--wz-accent) 18%, #fff); }
.wz-open { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--wz-accent); }
.wz-card.is-dragging { opacity: .5; }
.wz-drag { position: absolute; top: 8px; left: 8px; margin: 0; opacity: 0; z-index: 2;
  transition: opacity .12s; font-size: 13px; }
.wz-hide { position: absolute; top: 8px; right: 8px; opacity: 0; z-index: 2; transition: opacity .12s;
  background: rgba(255,255,255,.85); }
.wz-card:hover .wz-drag, .wz-card:hover .wz-hide, .wz-card:focus-within .wz-drag, .wz-card:focus-within .wz-hide { opacity: .8; }
.wz-drag:hover, .wz-hide:hover { opacity: 1 !important; }
.wz-datev, .wz-buchanalyse, .wz-tool-susa { --wz-accent: #382D5E; --wz-soft: #f2eef8; }
.wz-tool-ic, .wz-tool-kredit { --wz-accent: #1f6f8b; --wz-soft: #eaf5f8; }
.wz-tool-lohnabstimmung { --wz-accent: #2f7d4f; --wz-soft: #edf8f0; }
.wz-tool-opos1370, .wz-tool-pdfkonto, .wz-tool-pdfexcel { --wz-accent: #9a6a16; --wz-soft: #fff6df; }
.wz-tool-excelvergleich { --wz-accent: #6B6580; --wz-soft: #f3f2f6; }
@media (max-width: 768px) { .wz-grid { grid-template-columns: 1fr; } }

.vorlage-hinweis { margin: 12px 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--red) 32%, var(--line));
  border-left: 4px solid var(--red); border-radius: 9px; background: color-mix(in srgb, var(--violet) 5%, #fff);
  color: var(--ink); font-size: 13px; line-height: 1.55; }
.vorlage-hinweis strong { display: block; margin-bottom: 3px; color: var(--red); }
.vorlage-confirm { margin: 10px 0 12px; }
.vorlage-upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vorlage-vorschau { display: grid; gap: 6px; margin-top: 12px; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--paper-2); color: var(--ink); font-size: 12.5px; overflow-wrap: anywhere; }
.vorlage-manager-head { align-items: flex-start; margin-bottom: 12px; }
.vorlage-manager-head p { max-width: 650px; margin: 0; }
.vorlage-gruppe { margin-top: 15px; }
.vorlage-gruppe .sd-head { margin-bottom: 7px; }
.vorlage-gruppe .sd-head h3 { font-size: 15px; }
.vorlage-liste { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.vorlage-zeile { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.vorlage-zeile:last-child { border-bottom: 0; }
.vorlage-zeile > div:first-child { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.vorlage-zeile strong { color: var(--violet-deep); overflow-wrap: anywhere; }
.vorlage-zeile span { color: var(--muted); font-size: 11.5px; }
.vorlage-actions { display: flex; gap: 7px; flex: 0 0 auto; }
.mistral-transparency { margin: 10px 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper-2); }
.mistral-transparency summary { padding: 10px 12px; color: var(--violet); font-weight: 750; cursor: pointer; }
.mistral-transparency-body { padding: 0 14px 12px; color: var(--ink); font-size: 12.5px; line-height: 1.55; }
.mistral-transparency-body h4 { margin: 10px 0 3px; color: var(--violet-deep); font-size: 12.5px; }
.mistral-transparency-body ul { margin: 0; padding-left: 20px; }
.mistral-transparency-body li + li { margin-top: 4px; }
@media (max-width: 768px) {
  .vorlage-manager-head, .vorlage-zeile { align-items: stretch; flex-direction: column; }
  .vorlage-manager-head .btn, .vorlage-actions .btn { width: 100%; }
  .vorlage-actions { flex-direction: column; }
  .vorlage-upload-row, .vorlage-upload-row .file-pick { align-items: stretch; width: 100%; }
  .vorlage-upload-row .btn { width: 100%; }
}

/* Einstellungen und Neuaufnahme: Feldnamen ruhig in normaler Schreibweise anzeigen. */
.modal-settings .field label,
.modal-onboarding .field label,
#onbWrap .field label,
.modal-settings .sd-group,
.modal-onboarding .sd-group,
#onbWrap .sd-group {
  text-transform: none;
  letter-spacing: 0;
}
.settings-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; padding: 6px 8px 0 0; }
.settings-nav { position: sticky; top: 0; display: flex; flex-direction: column; gap: 5px; padding: 12px; border: 1px solid var(--line);
  border-radius: 8px; background: #f8f7fb; }
.settings-nav button { display: block; width: 100%; padding: 10px 11px; border: 0; border-radius: 7px; color: var(--muted);
  text-align: left; background: transparent; font-size: 13px; font-weight: 750; cursor: pointer; }
.settings-nav button:hover, .settings-nav button:focus-visible { background: #ece8f4; color: var(--violet); outline: none; }
.settings-nav button.active { background: #fff; color: var(--violet); box-shadow: inset 3px 0 0 var(--violet), 0 1px 3px rgba(30, 24, 52, .08); }
.settings-content { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.settings-section { margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); scroll-margin-top: 18px; }
.settings-section[hidden] { display: none !important; }
.settings-section:first-child { padding-top: 0; border-top: 0; }
.settings-scope-line { margin: 0 0 8px; color: var(--muted); font-size: 12.5px; }
.settings-scope-line strong { color: var(--ink); font-weight: 750; }
.data-check-list { margin-top: 8px; }
.data-check-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.data-check-table th, .data-check-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.data-check-table th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.data-check-table td:first-child { width: 120px; font-weight: 750; color: var(--violet); }
.mand-export-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.mand-export-option { display: flex; align-items: flex-start; gap: 9px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; min-width: 0; }
.mand-export-option input { margin-top: 3px; flex: 0 0 auto; }
.mand-export-option span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mand-export-option strong { overflow-wrap: anywhere; }
.mand-export-option small { color: var(--muted); font-size: 11.5px; }
.mailtpl-block { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.mailtpl-block:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.vertretung-kopf { margin: 0 0 10px; padding: 0; border: 0; }
.vertretung-kopf p { margin: 3px 0 0; font-size: 12.5px; }
.vertretung-liste { display: flex; flex-direction: column; gap: 8px; }
.vertretung-zeile { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) minmax(150px, 1.2fr) auto auto;
  gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.vertretung-zeile > div { min-width: 0; }
.vertretung-zeile strong, .vertretung-zeile span { overflow-wrap: anywhere; }
.vertretung-zeile small { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; }
.vertretung-label { display: block; margin-bottom: 2px; color: var(--muted); font-size: 10.5px; font-weight: 750; }
.vertretung-status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 750; }
.vertretung-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.vertretung-status.aktiv { color: var(--violet); }
.vertretung-status.aktiv i { background: var(--violet); }
.vertretung-status.abgelaufen { color: var(--red); }
.vertretung-status.abgelaufen i { background: var(--red); }
.vertretung-aktionen { display: flex; gap: 5px; justify-content: flex-end; }
.erinnerung-plan { align-items: start; margin-top: 10px; }
.erinnerung-quellen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 14px; }
.erinnerung-hinweis { margin-top: 10px; line-height: 1.5; }
.erinnerung-aktionen { justify-content: flex-start; margin-top: 12px; }
.erinnerung-status { margin-top: 8px; font-size: 12.5px; }
@media (max-width: 820px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-nav button { text-align: center; }
  .modal.modal-wide.modal-settings { width: 100%; max-width: 720px; }
  .mand-export-picker { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .vertretung-zeile { grid-template-columns: 1fr; gap: 8px; }
  .vertretung-aktionen { justify-content: flex-start; flex-wrap: wrap; }
  .erinnerung-quellen { grid-template-columns: 1fr; }
  .erinnerung-aktionen { align-items: stretch; }
  .erinnerung-aktionen .btn { width: 100%; justify-content: center; }
}

/* Gemeinsame KI-/OCR-Einstellungen */
.ocr-keyrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ocr-keyrow input, .ocr-keyrow select { flex: 1; min-width: 140px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.ocr-keyrow .btn { flex: 0 0 auto; }
@media (max-width: 768px) { .ocr-keyrow input, .ocr-keyrow select { min-width: 0; } }

/* Neuaufnahmebogen – Rücklauf sichtbar (Auftrag E, Teil 2) */
.onb-warn { color: var(--red, #C84449); font-size: 12px; font-weight: 600; margin: 3px 0; }
.dash-hint-onb { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 0 0 14px; cursor: pointer; border-left: 4px solid var(--red, #C84449); }
.dash-hint-onb:hover { background: #faf6f7; }
.dash-hint-onb-ic { font-size: 22px; line-height: 1; }
.dash-hint-onb strong { color: var(--ink, #2A2145); }
.dash-hint-onb-arrow { margin-left: auto; font-size: 22px; color: var(--muted, #9a92a3); }

/* Branchenschlüssel WZ 2025 (Auftrag J) */
.wz-pick { display: flex; gap: 8px; align-items: center; }
.wz-pick input { flex: 1; }
.wz-pick input[readonly] { background: #fbfbfd; color: var(--ink); }
.wz-gruppe { margin-top: 5px; font-size: 12.5px; color: var(--muted); }
.wz-gruppe strong { color: var(--ink); font-weight: 700; }
.wz-modal .modal-body { display: flex; flex-direction: column; }
.wz-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.wz-tabs .wz-tab-active { background: var(--violet); color: #fff; border-color: var(--violet); }
.wz-modal #wz-q, .wz-modal #wz-abschnitt { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-sizing: border-box; }
.wz-results { margin-top: 10px; max-height: 46vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.wz-item { padding: 7px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.wz-item:last-child { border-bottom: 0; }
.wz-item:hover { background: #f6f4fb; }
.wz-item.wz-sel { background: color-mix(in srgb, var(--violet) 14%, #fff); }
.wz-code { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.wz-bez { color: var(--ink); }
.wz-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.wz-head { padding: 6px 12px; border-bottom: 1px solid var(--line); background: #faf9fc; color: var(--muted); font-size: 12.5px; }
.wz-head:last-child { border-bottom: 0; }
.onb-wz-box { border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; background: #faf9fc; }
.onb-wz-list { display: flex; flex-direction: column; gap: 2px; }
.onb-wz-item { padding: 4px 0; border-bottom: 1px solid var(--line); }
.onb-wz-item:last-child { border-bottom: 0; }

/* Honorare: Kanzlei-Erfassung auf dem gemeinsamen Faktura-Kern. */
.honorar-wrap { width: 100%; }
.honorar-view { max-width: 1480px; }
.hon-tabs { margin-bottom: 14px; overflow-x: auto; }
.hon-tab-body { display: flex; flex-direction: column; gap: 14px; }
.hon-toolbar { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.hon-toolbar .spacer { flex: 1; }
.hon-filter { min-width: 220px; margin: 0; }
.hon-warning { padding: 10px 12px; border: 1px solid var(--warn); border-radius: var(--radius-sm); background: var(--warn-bg); color: var(--ink); font-weight: 600; }

/* Auftrag AC: gebuchte Produkte und Betreiberverwaltung */
.mand-card2 .chip { background: #efeaf7; color: var(--violet); white-space: nowrap; }
.own-entity-badge { border: 1px solid color-mix(in srgb, var(--violet) 20%, #fff); }
.field label.own-entity-choice { margin-top: 10px; color: var(--ink); font-size: 13px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.produkt-account-panel { margin: 8px 0 18px; box-shadow: none; }
.produkt-account-panel .panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.produkt-liste { display: grid; gap: 10px; }
.produkt-zeile { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(320px, 2fr) minmax(90px, .7fr) auto; align-items: end; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.produkt-zeile:last-child { border-bottom: 0; }
.produkt-zeile > .produkt-liste { display: grid; grid-template-columns: repeat(4, minmax(95px, 1fr)); gap: 8px; }
.produkt-zeile .field { margin: 0; }
.produkt-status { font-size: 12px; font-weight: 700; color: var(--muted); }
.produkt-status.aktiv { color: var(--violet); }
.produkt-status.gekuendigt, .produkt-status.abgelaufen { color: var(--red); }
.produkt-menge { color: var(--muted); font-size: 12px; }
.produkt-log { padding: 10px 16px 14px; color: var(--muted); font-size: 12px; display: grid; gap: 4px; border-top: 1px solid var(--line); }

.account-admin-explainer { margin:0 0 12px; line-height:1.5; }
.account-admin-list { display:grid; gap:14px; }
.account-admin-card { border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); overflow:hidden; }
.account-admin-head { display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--paper-2); }
.account-admin-title { display:flex; flex:1; min-width:0; flex-direction:column; gap:2px; }
.account-admin-title strong, .account-admin-title span { overflow-wrap:anywhere; }
.account-admin-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.account-users { padding:10px 14px; border-top:1px solid var(--line); background:#fff; }
.account-user-row { display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); }
.account-user-row:last-child { border-bottom:0; }
.account-user-main { display:flex; flex:1; min-width:0; flex-direction:column; gap:2px; }
.account-user-main strong, .account-user-main span { overflow-wrap:anywhere; }
.account-user-meta { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.produkt-actions { display:flex; gap:8px; flex-wrap:wrap; }
.managed-client-list { display:grid; gap:10px; }
.managed-client-card { display:grid; gap:9px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); }
.managed-client-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.managed-client-head > div { min-width:0; }
.managed-client-head strong, .managed-client-head .muted { overflow-wrap:anywhere; }
.managed-client-products { color:var(--muted); font-size:12px; line-height:1.45; }
.settings-managed-clients-title { margin-top:16px; }
.managed-client-product-list { display:grid; gap:8px; }
.managed-client-product { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:var(--paper-2); }
.managed-client-product-head { display:flex; min-width:0; align-items:center; gap:8px; flex-wrap:wrap; }
.managed-client-product-head strong { overflow-wrap:anywhere; }
.managed-client-product-actions { display:flex; align-items:center; justify-content:flex-end; gap:7px; flex-wrap:wrap; }
.managed-client-product-actions select { min-width:118px; min-height:36px; padding:7px 30px 7px 9px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); font:inherit; }
.managed-client-blocked { padding:9px 10px; border:1px solid color-mix(in srgb, var(--red) 28%, var(--line)); border-radius:8px;
  background:color-mix(in srgb, var(--red) 7%, #fff); color:var(--ink); font-size:12.5px; line-height:1.45; }

@media (max-width: 768px) {
  .produkt-zeile { grid-template-columns: 1fr; align-items: stretch; }
  .produkt-zeile > .produkt-liste { grid-template-columns: 1fr 1fr; }
  .account-admin-head { align-items:flex-start; flex-direction:column; }
  .account-admin-actions { width:100%; justify-content:flex-start; }
  .account-admin-actions .btn, .account-admin-actions .linkbtn { min-height:44px; }
  .account-user-row { align-items:flex-start; flex-direction:column; }
  .account-user-meta { justify-content:flex-start; }
  .managed-client-head { flex-direction:column; }
  .managed-client-product { grid-template-columns:1fr; align-items:stretch; }
  .managed-client-product-actions { justify-content:stretch; }
  .managed-client-product-actions select, .managed-client-product-actions .btn { width:100%; min-height:44px; }
  .managed-client-card > .btn { width:100%; min-height:44px; }
  .modal-accounts-products .modal-foot { align-items:stretch; flex-direction:column; }
  .modal-accounts-products .modal-foot > span { display:none; }
  .modal-accounts-products .modal-foot .btn { width:100%; min-height:44px; }
}
.hon-summary { margin-bottom: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.hon-summary h2 { margin: 0 0 14px; color: var(--ink); font-size: 16px; letter-spacing: 0; }
.hon-summary-total { display: flex; width: fit-content; min-width: 250px; box-sizing: border-box; flex-direction: column; align-items: flex-end; margin: 0 0 14px auto; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--violet) 24%, var(--line)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--violet) 6%, var(--card)); text-align: right; }
.hon-summary-total > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.hon-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.hon-summary-cell { display: flex; min-width: 0; flex-direction: column; padding: 0 18px; border-right: 1px solid var(--line); }
.hon-summary-cell:first-child { padding-left: 0; }
.hon-summary-cell:last-child { padding-right: 0; border-right: 0; }
.hon-summary-cell > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.hon-summary-value { margin-top: 3px; color: var(--violet-deep); font-size: 22px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.hon-summary-sub { margin-top: 3px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.hon-summary-split { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.hon-summary-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.hon-summary .empty-mini { padding: 12px 0 2px; color: var(--muted); }
.hon-mandant-sum { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hon-table-wrap { width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.ledger-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.ledger-table th, .ledger-table td { padding: 7px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ledger-table th:first-child, .ledger-table td:first-child { padding-left: 14px; }
.ledger-table th:last-child, .ledger-table td:last-child { padding-right: 14px; }
.ledger-table th { position: sticky; top: 0; z-index: 1; background: var(--paper-2); color: var(--muted); font-size: 12px; font-weight: 700; }
.ledger-table tbody tr:last-child td { border-bottom: 0; }
.ledger-table tbody tr:hover td { background: var(--paper); }
.ledger-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ledger-table small { display: block; margin-top: 4px; color: var(--muted); white-space: pre-line; }
.ledger-table tfoot td { background: var(--paper-2); font-variant-numeric: tabular-nums; }
.hon-check { width: 36px; text-align: center !important; }
.hon-chip-warn { margin-left: 6px; background: var(--warn-bg); color: var(--warn); }
.hon-missing td { background: var(--warn-bg); }
.hon-no-fee td { background: color-mix(in srgb, var(--violet) 5%, var(--card)); }
.hon-no-fee small { margin-top: 4px; }
.hon-status-box { display: grid; gap: 12px; }
.hon-row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.hon-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 14px; align-items: start; }
.hon-split .panel > h3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hon-settings-grid, .hon-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hon-form-grid output { min-height: 38px; display: flex; align-items: center; box-sizing: border-box; padding: 8px 10px; border-radius: 6px; background: var(--paper-2); color: var(--violet); font-weight: 700; }
.hon-form-single { grid-template-columns: 1fr; }
.hon-span { grid-column: 1 / -1; }
.hon-layout-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hon-layout-item { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); text-align: left; cursor: pointer; }
.hon-layout-item:hover, .hon-layout-item:focus-visible { border-color: var(--violet); outline: none; box-shadow: var(--focus); }
.hon-layout-item span { color: var(--muted); font-size: 12px; }
.hon-month-head, .hon-month-foot, .hon-invoice-meta { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.hon-month-head { margin-bottom: 14px; }
.hon-month-head .field { margin: 0; min-width: 220px; }
.hon-month-foot { justify-content: space-between; margin-top: 12px; }
.hon-invoice-meta { align-items: center; margin-bottom: 12px; }
.hon-invoice-meta strong { font-size: 16px; }
.hon-modal .modal-body { overflow-y: auto; }
.hon-modal.modal-wide { max-width: 900px; }
.auf-invoice-state { appearance: none; border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
  background: var(--paper-2); color: var(--muted); font: inherit; font-size: 11px; font-weight: 700; line-height: 1.35; cursor: pointer; }
.auf-invoice-state:hover, .auf-invoice-state:focus-visible { border-color: var(--violet); outline: none; box-shadow: var(--focus); }
.auf-invoice-state.is-billable, .auf-invoice-state.is-muted { cursor: default; }
button.auf-invoice-state.is-billable { cursor: pointer; }
.auf-invoice-state.is-draft { color: var(--violet); background: color-mix(in srgb, var(--violet) 8%, var(--card)); }
.auf-invoice-state.is-open { color: var(--warn); background: var(--warn-bg); }
.auf-invoice-state.is-paid { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--card)); }
.auf-invoice-state.is-cancelled { color: var(--red); background: color-mix(in srgb, var(--red) 8%, var(--card)); }
.auf-finish-pick { margin-right: 3px; }
.auf-complete-note { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--paper-2); }
.auf-complete-note p { margin: 4px 0 0; color: var(--muted); }
.auf-complete-mark { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ok) 14%, var(--card)); color: var(--ok); font-size: 18px; font-weight: 900; }
.auf-invoice-summary { display: grid; gap: 0; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.auf-invoice-summary > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.auf-invoice-summary > div:last-child { border-bottom: 0; }
.auf-invoice-summary .is-total { background: var(--paper-2); }
.auf-agreement-summary, .auf-detail-line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; color: var(--muted); }
.auf-agreement-summary { margin-top: 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
.auf-detail-grid { display: grid; }
.auf-detail-line { border-bottom: 1px solid var(--line); }
.auf-detail-line:last-child { border-bottom: 0; }
.auf-detail-line strong, .auf-detail-line .linkbtn { color: var(--ink); text-align: right; }
.auf-mail-hint { margin: 10px 0 0; }
.auf-preview-note { margin-bottom: 12px; padding: 10px 12px; border-left: 3px solid var(--violet);
  background: var(--paper-2); color: var(--muted); font-size: 12px; }
.hon-modal .hi-edit { width: 100%; min-width: 110px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 8px; background: var(--card); color: var(--ink); font: inherit; }
.hon-modal .hi-edit:disabled { border-color: transparent; padding-inline: 0; background: transparent; opacity: 1; }
.hon-modal textarea.hi-edit { display: block; margin-top: 4px; resize: vertical; color: var(--muted); font-size: 12px; }
.hon-modal .hi-num { min-width: 84px; text-align: right; }
.auf-preview-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.auf-split { position: relative; }
.auf-split > summary { list-style: none; min-width: 34px; padding: 7px 10px; border: 1px solid var(--violet); border-radius: var(--radius-sm);
  background: var(--card); color: var(--violet); cursor: pointer; text-align: center; font-weight: 800; }
.auf-split > summary::-webkit-details-marker { display: none; }
.auf-split > div { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 4; min-width: 220px; padding: 5px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); box-shadow: var(--shadow); }
.auf-split > div button { width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.auf-split > div button:hover, .auf-split > div button:focus-visible { background: var(--paper-2); outline: none; }

@media (max-width: 768px) {
  .honorar-view { padding-inline: 12px; }
  .hon-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; overflow: visible; }
  .hon-tabs .tab { width: 100%; min-width: 0; white-space: normal; }
  .hon-split, .hon-settings-grid, .hon-form-grid, .hon-layout-list { grid-template-columns: 1fr; }
  .hon-summary-total { width: 100%; min-width: 0; align-items: flex-start; text-align: left; }
  .hon-summary-grid { grid-template-columns: 1fr; }
  .hon-summary-cell { padding: 10px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .hon-summary-cell:first-child { padding-top: 0; }
  .hon-summary-cell:last-child { padding-bottom: 0; border-bottom: 0; }
  .hon-summary-value { font-size: 20px; }
  .ledger-table td:has(.hon-mandant-sum) { flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
  .hon-mandant-sum { margin-top: 4px; white-space: normal; }
  .hon-span { grid-column: auto; }
  .hon-toolbar { align-items: stretch; }
  .hon-toolbar .btn, .hon-filter { width: 100%; }
  .hon-table-wrap { border: 0; overflow: visible; background: transparent; }
  .ledger-table, .ledger-table thead, .ledger-table tbody, .ledger-table tfoot, .ledger-table tr, .ledger-table th, .ledger-table td { display: block; }
  .ledger-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ledger-table tr { margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); overflow: hidden; }
  .ledger-table td { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; text-align: right; overflow-wrap: anywhere; }
  .ledger-table td:first-child, .ledger-table td:last-child { padding: 8px 12px; }
  .ledger-table td:empty { display: none; }
  .ledger-table .num { text-align: right; }
  .ledger-table tfoot tr { background: var(--paper-2); }
  .hon-check { width: auto; justify-content: flex-end !important; }
  .hon-month-head, .hon-month-foot { align-items: stretch; }
  .hon-month-head .field, .hon-month-head .btn, .hon-month-foot .btn { width: 100%; }
  .hon-modal.modal { width: calc(100vw - 24px); max-height: 92dvh; }
  .hon-modal.modal > h3, .hon-modal .modal-foot { position: sticky; z-index: 2; background: var(--card); }
  .hon-modal.modal > h3 { top: 0; }
  .hon-modal .modal-foot { bottom: 0; }
  .auf-preview-actions { width: 100%; }
  .auf-preview-actions > .btn { flex: 1 1 100%; }
  .auf-preview-actions .auf-split { margin-left: auto; }
  .hon-modal .ledger-table td:has(.hi-edit) { display: grid; grid-template-columns: 1fr; text-align: left; }
  .hon-modal .hi-edit, .hon-modal .hi-num { min-width: 0; text-align: left; }
  .auf-detail-line, .auf-agreement-summary { align-items: flex-start; }

  /* Mobile Dialoge: Kopf und Aktionen bleiben erreichbar; nur der Feldbereich scrollt. */
  .modal:not(.modal-template-editor) {
    max-height: 92dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .modal:not(.modal-template-editor) > h3,
  .modal:not(.modal-template-editor) > .modal-foot {
    flex: 0 0 auto;
    position: sticky;
    z-index: 2;
    background: var(--card);
    flex-wrap: wrap;
  }
  .modal:not(.modal-template-editor) > h3 { top: 0; }
  .modal:not(.modal-template-editor) > .modal-foot { bottom: 0; }
  .modal:not(.modal-template-editor):not(.hon-modal) > .modal-foot > span[style] { display: none; }
  .modal:not(.modal-template-editor):not(.hon-modal) > .modal-foot > .btn,
  .modal:not(.modal-template-editor):not(.hon-modal) > .modal-foot > .linkbtn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    margin: 0;
    text-align: center;
  }
  .modal:not(.modal-template-editor) > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}
.import-account-context {
  display: grid;
  gap: 3px;
  margin: 0 0 12px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--violet) 28%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--violet) 6%, var(--surface));
}
.import-account-context strong { color: var(--violet); }
.import-account-context span { color: var(--red); font-weight: 700; }
.import-account-context small { color: var(--muted); }
.import-preview-scroll-hint { display: none; margin: 0 0 6px; color: var(--muted); }

@media (max-width: 768px) {
  .import-account-context { padding: 10px; overflow-wrap: anywhere; }
  .import-preview-scroll-hint { display: block; }
  .import-preview-table table { min-width: 680px; }
}


/* Honorarvereinbarung mit mehreren Positionen */
.hon-group-head{
  display:grid;
  grid-template-columns:minmax(220px,.8fr) minmax(280px,1.2fr);
  gap:12px;
  margin-bottom:14px;
}
.hon-group-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  padding:10px 0 8px;
  border-bottom:1px solid var(--line);
}
.hon-group-title h3{margin:0 0 2px;font-size:15px;color:var(--ink)}
.hon-group-title p{margin:0;color:var(--muted);font-size:12.5px}
.hon-group-items{display:grid;gap:0}
.hon-group-item{padding:12px 0;border-bottom:1px solid var(--line)}
.hon-group-item:last-child{border-bottom:0}
.hon-group-item-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.hon-group-item-head>div{display:grid;gap:1px}
.hon-group-item-head strong{font-size:13.5px;color:var(--ink)}
.hon-group-item-head small{font-size:12px;color:var(--muted)}
.hon-group-modal .hon-form-grid{align-items:end}
.hon-group-modal .modal-body{max-height:min(74vh,760px);overflow:auto}
@media (max-width:768px){
  .hon-group-head{grid-template-columns:1fr}
  .hon-group-title{align-items:stretch;flex-direction:column}
  .hon-group-title .btn{align-self:flex-start}
  .hon-group-item-head{align-items:flex-start}
}

/* Registrierung: Abschlussseite nach erfolgreichem Mailversand. */
.registration-thanks-action{display:block;width:100%;box-sizing:border-box;text-align:center;margin-top:16px}

/* Offene Rechnungen in Honoraren und Dashboard */
.hon-open-head{
  display:grid;
  gap:12px;
  margin-bottom:12px;
}
.hon-open-stats{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:12.5px;
}
.hon-open-stats span{display:inline-flex;align-items:baseline;gap:5px}
.hon-open-stats strong{
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  font-size:13.5px;
}
.hon-open-tools{
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  gap:10px;
}
.hon-open-tools label{
  display:grid;
  gap:4px;
  min-width:190px;
  color:var(--muted);
  font-size:12px;
}
.hon-open-tools input,
.hon-open-tools select{
  min-height:32px;
  padding:5px 9px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper);
  color:var(--ink);
  font:inherit;
}
.hon-open-tools input:focus-visible,
.hon-open-tools select:focus-visible,
.hon-sort:focus-visible,
.dash-invoice-summary:focus-visible,
.dash-invoice-row:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}
.hon-open-wrap{overflow:auto}
.hon-open-table{min-width:1180px}
.hon-open-table td::before{display:none}
.hon-open-table th,
.hon-open-table td{height:30px;padding:4px 8px;vertical-align:middle}
.hon-open-table .num{
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.hon-sort{
  display:inline-flex;
  align-items:center;
  gap:2px;
  min-height:24px;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:700;
  text-align:left;
  cursor:pointer;
}
.hon-open-table th.num .hon-sort{justify-content:flex-end;width:100%}
.dash-invoice-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
}
.dash-invoice-summary>span{
  display:grid;
  gap:2px;
  padding:9px 10px;
  border-right:1px solid var(--line);
}
.dash-invoice-summary>span:last-child{border-right:0}
.dash-invoice-summary strong{
  color:var(--ink);
  font-size:14px;
  font-variant-numeric:tabular-nums;
}
.dash-invoice-summary small{color:var(--muted);font-size:11.5px}
.dash-invoice-list{display:grid}
.dash-invoice-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:32px;
  padding:6px 10px;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.dash-invoice-row:last-child{border-bottom:0}
.dash-invoice-row:hover{background:var(--paper-2)}
.dash-invoice-row span{display:grid;gap:1px}
.dash-invoice-row small{color:var(--muted);font-size:11.5px}
.dash-invoice-row .num{
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

@media (max-width:768px){
  .hon-open-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px}
  .hon-open-tools{display:grid;grid-template-columns:1fr}
  .hon-open-tools label{min-width:0}
  .hon-open-wrap{margin-inline:0;overflow:visible}
  .hon-open-table{min-width:0}
  .hon-open-table td::before{
    display:block;
    flex:0 0 42%;
    color:var(--muted);
    font-size:11.5px;
    font-weight:700;
    text-align:left;
    content:attr(data-label);
  }
  .hon-open-table td[data-label="Aktion"]{align-items:center}
  .hon-open-table td[data-label="Aktion"] .btn{width:auto}
  .dash-invoice-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash-invoice-summary>span:nth-child(2){border-right:0}
  .dash-invoice-summary>span:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .dash-invoice-row{grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .dash-invoice-row>.num{grid-column:2;grid-row:1 / span 2}
}



/* Inasto-Anmeldung und Registrierung */
.login-card .field label,
.auth-card .field label,
.registration-modal .field label {
  text-transform: none;
  letter-spacing: 0;
}
.auth-product,
.registration-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--violet);
  font-size: 15px;
}
.auth-product-mark,
.registration-brand-mark {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent);
}
.auth-primary-action {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.modal-bg:has(.registration-modal) {
  background: radial-gradient(1200px 600px at 50% -10%, #4a3d78 0%, var(--violet-deep) 60%);
}
.registration-modal.modal {
  width: min(680px, calc(100vw - 40px));
  max-width: 680px;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(20,12,45,.4);
}
.registration-modal > h3 {
  padding: 26px 28px 8px;
  border-bottom: 0;
  color: var(--violet);
  font-size: 23px;
  letter-spacing: -.02em;
}
.registration-modal > .modal-body {
  padding: 0 28px 18px;
}
.registration-modal > .modal-foot {
  padding: 14px 28px 24px;
  border-top: 1px solid var(--line);
}
.registration-intro {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}
.registration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}
.registration-grid-wide {
  grid-column: 1 / -1;
}
.registration-privacy {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.registration-privacy h4 {
  margin: 0 0 3px;
  color: var(--ink);
  font-size: 14px;
}
.registration-privacy > p {
  margin: 0 0 10px;
  font-size: 12.5px;
}
.registration-subprocessors {
  max-height: 190px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.registration-subprocessors .mini-table {
  margin: 0;
}
.registration-consent {
  align-items: flex-start;
  margin-top: 12px;
  line-height: 1.45;
}
.registration-consent input {
  margin-top: 2px;
}
.registration-version {
  margin: 6px 8px 8px;
  font-size: 12px;
}
.registration-status {
  font-size: 12.5px;
}

/* Honorare: fachliche Sortierung von Leistungen und Stundensätzen */
.hon-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.hon-sort-btn.num {
  justify-content: flex-end;
}
.hon-sort-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
.hon-sort-indicator {
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}
th[aria-sort="ascending"] .hon-sort-indicator,
th[aria-sort="descending"] .hon-sort-indicator {
  color: var(--violet);
}
.hon-service-table {
  min-width: 660px;
}
.hon-service-table th,
.hon-service-table td {
  height: 30px;
  padding: 4px 8px;
  vertical-align: middle;
}
.hon-service-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hon-mobile-sort {
  display: none;
}

@media (max-width: 768px) {
  .registration-modal.modal {
    width: calc(100vw - 24px);
    max-height: 92dvh;
  }
  .registration-modal > h3 {
    padding: 20px 18px 7px;
    font-size: 20px;
  }
  .registration-modal > .modal-body {
    padding: 0 18px 14px;
  }
  .registration-modal > .modal-foot {
    padding: 12px 18px 18px;
  }
  .registration-grid {
    grid-template-columns: 1fr;
  }
  .registration-grid-wide {
    grid-column: auto;
  }
  .registration-subprocessors {
    max-height: 150px;
  }
  .hon-mobile-sort {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
    margin-bottom: 8px;
  }
  .hon-mobile-sort label {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }
  .hon-mobile-sort select {
    width: 100%;
  }
  .hon-service-table {
    min-width: 0;
  }
  .hon-service-table td::before {
    display: block;
    flex: 0 0 40%;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 700;
    text-align: left;
    content: attr(data-label);
  }
  .hon-service-table td[data-label="Aktion"] {
    align-items: center;
  }
  .hon-service-table td[data-label="Aktion"] .btn {
    width: auto;
  }
  .portal-mode-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .portal-row {
    align-items: flex-start;
  }

}