:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --text: #17202b;
  --muted: #667085;
  --line: #e4e7ec;
  --accent: #1f5eff;
  --accent-ink: #ffffff;
  --accent-soft: #eaf0ff;
  --warn: #b54708;
  --warn-soft: #fef0c7;
  --danger: #b42318;
  --danger-soft: #fee4e2;
  --ok: #067647;
  --ok-soft: #dcfae6;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1218; --card: #171b23; --text: #e6e9ef; --muted: #98a2b3; --line: #2a303b;
    --accent: #5b8cff; --accent-soft: #1d2a4a; --warn: #fdb022; --warn-soft: #3a2a0c;
    --danger: #f97066; --danger-soft: #3b1513; --ok: #47cd89; --ok-soft: #0f2e1f;
    --shadow: none; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 15px; margin: 0 0 12px; }
h3 { font-size: 13px; margin: 18px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
code { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.warn { color: var(--warn); font-weight: 600; }

/* Kopfleiste */
.top {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px;
  padding: 0 24px; height: 56px; background: var(--card); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; color: var(--text); font-size: 17px; }
.brand span, .login h1 span { color: var(--accent); }
.top nav { display: flex; gap: 4px; flex: 1; }
.top nav a, .me > a {
  color: var(--muted); padding: 6px 10px; border-radius: 8px; font-weight: 500;
}
.top nav a:hover, .me > a:hover { background: var(--bg); text-decoration: none; color: var(--text); }
.top nav a.on, .me > a.on { color: var(--text); background: var(--bg); }
.me { display: flex; align-items: center; gap: 8px; }
.me form { margin: 0; }

main { max-width: 1280px; margin: 0 auto; padding: 24px; }
main.center { min-height: 100vh; display: grid; place-items: center; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px;
}
.card.narrow { max-width: 460px; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }

/* Formulare */
label { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 12px; }
input, select, textarea {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font: inherit; color: var(--text);
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
textarea { resize: vertical; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px;
  font: inherit; font-weight: 500; color: var(--text); background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, transform .1s ease;
}
.btn:hover { background: var(--bg); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.wide { width: 100%; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }
button.link:hover { text-decoration: underline; }
.alert { background: var(--danger-soft); color: var(--danger); padding: 10px 12px; border-radius: 8px; }
.flash { background: var(--ok-soft); color: var(--ok); padding: 10px 12px; border-radius: 8px; }

.login { width: min(380px, 100%); }
.login h1 { font-size: 24px; }
.login .btn { width: 100%; margin-top: 4px; }

/* Liste */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs a {
  color: var(--muted); padding: 8px 12px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.on { color: var(--text); border-bottom-color: var(--accent); }
.tabs a span {
  margin-left: 6px; font-size: 12px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 99px; padding: 0 7px;
}
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.filters input[type=search] { flex: 1 1 260px; margin: 0; }
.filters select { width: auto; margin: 0; }
.filters .check { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text); font-weight: 400; }
.filters .check input { width: auto; margin: 0; }
.due { background: var(--warn-soft); color: var(--warn); padding: 6px 12px; border-radius: 99px; font-weight: 600; font-size: 13px; }

.table-wrap { padding: 0; overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; }
.list th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.list td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.list tbody tr:last-child td { border-bottom: 0; }
.list tbody tr[data-href] { cursor: pointer; transition: background-color .12s ease; }
.list tbody tr[data-href]:hover { background: var(--bg); }
.list tr.unread .name { font-weight: 700; }
.list tr.unread td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.list tr.inactive { opacity: .55; }
.list .name { color: var(--text); font-weight: 500; }
.list .snippet { max-width: 360px; }
.list .actions { white-space: nowrap; text-align: right; }
.list .actions form { display: inline; margin-left: 12px; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pager span { display: inline-flex; gap: 10px; align-items: center; }
.empty { text-align: center; color: var(--muted); padding: 40px; }

/* Status */
.badge {
  display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px;
  white-space: nowrap; margin: 0 4px 2px 0;
}
.s-neu { background: var(--accent-soft); color: var(--accent); }
.s-in_bearbeitung { background: var(--warn-soft); color: var(--warn); }
.s-angebot { background: #f4ebff; color: #6941c6; }
.s-gewonnen { background: var(--ok-soft); color: var(--ok); }
.s-verloren { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.s-spam { background: var(--danger-soft); color: var(--danger); }
.badge.dup { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
@media (prefers-color-scheme: dark) { .s-angebot { background: #2b1d4a; color: #b692f6; } }

/* Detail */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.side { position: sticky; top: 72px; }
.title-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.lead { margin: 2px 0 0; color: var(--muted); font-size: 16px; }
.contact { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.facts { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 6px 12px; margin: 0 0 16px; }
.facts dt { color: var(--muted); font-size: 13px; padding-top: 1px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.message {
  white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 14px 16px; margin-bottom: 16px;
}
.related { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; font-size: 14px; }
details.raw summary, details.card summary { cursor: pointer; color: var(--muted); font-size: 13px; }
details.card summary { list-style: none; }
details.card summary h2 { display: inline; margin: 0; }
details.card summary::-webkit-details-marker { display: none; }
details.card[open] summary { margin-bottom: 12px; }
details.raw[open] summary { margin-bottom: 10px; }
.note-form { margin-bottom: 16px; }
.note-form textarea { margin: 0 0 8px; }
.notes, .timeline { list-style: none; margin: 0; padding: 0; }
.notes li { border-top: 1px solid var(--line); padding: 12px 0; }
.notes .meta { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.notes .body { white-space: pre-wrap; overflow-wrap: anywhere; }
.timeline li { padding: 6px 0; font-size: 14px; border-left: 2px solid var(--line); padding-left: 12px; }
.timeline li .muted.small { display: block; }

.status-pick { border: 0; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.status-pick legend { font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 6px; padding: 0; }
.status-pick label { margin: 0; cursor: pointer; border-radius: 8px; }
.status-pick input { position: absolute; opacity: 0; pointer-events: none; }
.status-pick span {
  display: block; text-align: center; padding: 7px 6px; border-radius: 8px; font-size: 13px; font-weight: 600;
  border: 2px solid transparent; transition: border-color .12s ease;
}
.status-pick label:not(:has(input:checked)) span { opacity: .55; }
.status-pick input:checked + span { border-color: currentColor; opacity: 1; }
.status-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.keybox { border-color: var(--accent); }
.key {
  display: block; padding: 10px 12px; background: var(--bg); border: 1px dashed var(--line); border-radius: 8px;
  overflow-wrap: anywhere; cursor: copy; margin: 8px 0;
}
.inline-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.inline-form h2 { width: 100%; margin: 0; }
.inline-form label { flex: 1 1 200px; margin: 0; }

@media (max-width: 900px) {
  /* Handy/Tablet: Bearbeitung direkt unter die Anfrage, Anmerkungen und Verlauf danach */
  .detail { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .main { display: contents; }
  .info { order: 0; }
  .side { position: static; order: 1; }
  .messages-card { order: 2; }
  .files-card { order: 2; }
  .notes-card { order: 3; }
  .history { order: 4; }
}
@media (max-width: 640px) {
  main { padding: 16px; }
  .top { padding: 0 16px; gap: 12px; }
  .top nav a { padding: 6px; }
  .me > a { display: none; }
  .list thead { display: none; }
  .list tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 0; }
  .list td { display: block; border: 0; padding: 2px 14px; }
  .list td:empty { display: none; }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dd { margin-bottom: 8px; }
  input, select, textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Dateien */
.chip {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; margin: 0 6px 2px 0;
  border-radius: 99px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.files-card .title-row { align-items: center; margin-bottom: 12px; }
.files-card .title-row h2 { margin: 0; }
.upload { display: flex; flex-direction: column; gap: 6px; }
.upload label.btn { margin: 0; color: var(--text); font-size: 14px; }
.upload input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload label.btn:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.upload.busy label.btn { opacity: .6; pointer-events: none; }
.upload-status:empty { display: none; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.gallery figure { margin: 0; }
.gallery img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg);
}
.gallery figcaption { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 4px; }
.gallery figcaption form, .file-actions form { display: inline; margin: 0; }
.files { list-style: none; margin: 0 0 12px; padding: 0; }
.files li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.files li:first-child { border-top: 0; }
.file-link { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); }
.file-link:hover { text-decoration: none; }
.file-link:hover .file-name { text-decoration: underline; }
.file-link > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.file-icon {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px;
  font-size: 10px; font-weight: 700; background: var(--danger-soft); color: var(--danger);
}
.file-actions { display: flex; gap: 10px; flex: none; }
button.link.danger { color: var(--danger); }

/* Rechte */
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.plain:disabled .status-pick label { cursor: default; }
.readonly-note { background: var(--bg); border-radius: 8px; padding: 8px 10px; }
.perms { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; }
.perms legend { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 4px; text-transform: uppercase; letter-spacing: .04em; }
.perms:disabled .check-row { opacity: .45; }
.perms:not(:disabled) .admin-hint { display: none; }
.perms .admin-hint { margin: 4px 0 0; }
.check-row { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0; color: var(--text); font-weight: 400; cursor: pointer; }
.check-row input { width: 16px; height: 16px; margin: 3px 0 0; flex: none; accent-color: var(--accent); }
.check-row > span { display: flex; flex-direction: column; }
label.inline { margin-bottom: 10px; }
.perm-edit { margin-top: 6px; }
.perm-edit summary { cursor: pointer; color: var(--accent); list-style: none; }
.perm-edit summary::-webkit-details-marker { display: none; }
.perm-edit form { margin-top: 10px; min-width: 280px; }
.perm-new { width: 100%; }
.inline-form .perm-new label { margin: 0 0 10px; }

/* Kundenportal & Reklamationen */
.badge.rk { background: #fff1e6; color: #b93815; }
.s-erledigt { background: #e0f2fe; color: #026aa2; }
.s-abgeschlossen { background: var(--ok-soft); color: var(--ok); }
@media (prefers-color-scheme: dark) { .badge.rk { background: #3a1f12; color: #f7b27a; } .s-erledigt { background: #0b2a3d; color: #7cd4fd; } }
.chip.cust { color: var(--text); }
.chip.ok, .ok { color: var(--ok); }
.chip-btn {
  font: inherit; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; cursor: pointer;
  background: var(--card); border: 1px dashed var(--line); color: var(--muted); white-space: nowrap;
}
.chip-btn.on { background: var(--ok-soft); color: var(--ok); border: 1px solid transparent; }
.gallery figcaption form { display: inline; }
.badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.badges .badge { margin: 0; }
.chat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.chat li { max-width: 85%; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.chat li.mine { align-self: flex-end; background: var(--accent-soft); border-color: transparent; }
.chat li.theirs { align-self: flex-start; }
.chat li.sys { align-self: center; background: none; border: 0; padding: 0; font-size: 12px; color: var(--muted); max-width: 100%; text-align: center; }
.chat .meta { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.chat .body { white-space: pre-wrap; overflow-wrap: anywhere; }
.confirm-box { border-color: #7cd4fd; background: linear-gradient(0deg, var(--card), var(--card)); display: flex; flex-direction: column; gap: 6px; }
.confirm-box h2 { margin: 0; }
.confirm-box p { margin: 0 0 6px; }
.confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.confirm-actions form { margin: 0; }
.reopen summary { list-style: none; }
.reopen summary::-webkit-details-marker { display: none; }
.reopen[open] form { margin-top: 10px; width: min(420px, 100%); }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.accent { color: var(--accent); }
.card.narrow-wide { max-width: 640px; }
.prio { border: 0; padding: 0; margin: 0 0 12px; }
.prio legend { font-size: 13px; font-weight: 500; color: var(--muted); padding: 0; margin-bottom: 4px; }
.upload-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.upload-pick label.btn { margin: 0; color: var(--text); }
.upload-pick input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.people { list-style: none; padding: 0; margin: 0 0 12px; }
.people li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.people li:first-child { border-top: 0; }
.people li.inactive { opacity: .5; }
.people-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.people-actions form { margin: 0; }
form.stack { border-top: 1px solid var(--line); padding-top: 4px; }
.mt { margin-top: 18px; }
table.compact td { padding: 8px 6px; }
body.portal .brand span { font-weight: 500; font-size: 13px; color: var(--muted); margin-left: 6px; }
@media (max-width: 640px) {
  body.portal .brand span { display: none; }
  body.portal .top nav a[href*="art=anfrage"] { display: none; }
  body.portal .top nav a { font-size: 14px; }
  .chat li { max-width: 100%; }
}

.detail.single { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.page-narrow { max-width: 860px; margin: 0 auto; }

/* Tickets */
.ticket { font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; color: var(--text); }
.ticket-line { margin: 0 0 4px; }
.ticket-line .ticket { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; }
td .ticket { margin-bottom: 4px; }
.badge.so { background: #f0f9ff; color: #0b4a6f; border: 1px solid #b9e6fe; }
@media (prefers-color-scheme: dark) { .badge.so { background: #0b2a3d; color: #b9e6fe; border-color: transparent; } }
.extra-label { margin: 0 0 4px; }
.hint { display: block; margin-top: 4px; font-weight: 400; }
.kind-switch { display: flex; gap: 6px; margin: -4px 0 16px; flex-wrap: wrap; }
.kind-switch a { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); font-size: 14px; background: var(--card); }
.kind-switch a.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.kind-switch a:hover { text-decoration: none; }
@media (max-width: 640px) { body.portal .top nav a[href*="art=sonstiges"] { display: none; } }

/* Stammdaten (Firmen, Artikel, Zahlungsbedingungen, Textbausteine) */
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.row-num { display: grid; grid-template-columns: 180px 1fr; gap: 8px; }
.list th.num, .list td.num { text-align: right; font-variant-numeric: tabular-nums; }
.card.narrow-wide { max-width: 760px; }
.logo-preview { display: block; max-width: 100%; max-height: 120px; object-fit: contain; margin: 0 0 12px;
  padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.tm-list { list-style: none; margin: 0; padding: 0; }
.tm-list li { border-top: 1px solid var(--line); padding: 12px 0; }
.tm-list li:first-child { border-top: 0; padding-top: 0; }
.tm-list li.inactive { opacity: .5; }
.tm-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tm-head form { margin: 0; }
.tm-body { white-space: pre-wrap; color: var(--muted); font-size: 14px; margin: 6px 0; max-height: 9em; overflow: hidden; }
.perm-edit form.stack { border-top: 0; }
@media (max-width: 640px) {
  .row3, .row-num { grid-template-columns: 1fr; gap: 0; }
}
/* Handy: Menü seitlich wischbar statt abgeschnitten */
.brand { white-space: nowrap; }
@media (max-width: 640px) {
  .top nav { min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { white-space: nowrap; }
}
@media (max-width: 640px) { .list td.num { text-align: left; } }

/* ================= Projekte ================= */
.phase {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap;
  padding: 2px 9px 2px 7px; border-radius: 99px; color: var(--text);
  background: color-mix(in srgb, var(--ph) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--ph) 35%, transparent);
}
.phase::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ph); }
.tabs .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ph); margin-right: 6px; vertical-align: 1px; }
.snippet-1 { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.project-main { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.project-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-end; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.project-head h1 { margin: 2px 0; }
.project-head p { margin: 0; }
.project-main .files-view { padding: 4px 20px 20px; }
.project-side { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow: auto; }
.seg { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.seg a { padding: 6px 12px; border-radius: 7px; color: var(--muted); font-weight: 500; font-size: 14px; }
.seg a:hover { text-decoration: none; color: var(--text); }
.seg a.on { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.phase-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.phase-steps button {
  width: 100%; text-align: left; font: inherit; font-size: 14px; padding: 7px 10px 7px 12px; border-radius: 8px; cursor: pointer;
  background: var(--card); color: var(--muted); border: 1px solid var(--line); border-left: 4px solid var(--ph);
  transition: background-color .12s ease;
}
.phase-steps button:hover { background: var(--bg); color: var(--text); }
.phase-steps button.done { color: var(--text); }
.phase-steps button.done::after { content: " ✓"; color: var(--ok); }
.phase-steps button.on { background: color-mix(in srgb, var(--ph) 16%, var(--card)); color: var(--text); font-weight: 700; border-color: var(--ph); }
.person { display: flex; gap: 10px; align-items: center; }
.avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent);
}
.add-member select { width: 100%; margin-bottom: 8px; }
.member-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 12px; }
.facts.tight { grid-template-columns: 80px minmax(0, 1fr); }
ul.plain { list-style: none; padding: 0; margin: 0 0 8px; }
ul.plain li { padding: 3px 0; }
.folder summary { cursor: pointer; font-weight: 600; margin: 8px 0; }
form.inline { display: inline; }
.phase-edit { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.phase-edit input[type=color] { width: 40px; height: 34px; padding: 2px; margin: 0; }
.phase-edit input[name=name] { width: 200px; margin: 0; }
.phase-edit input[name=description] { flex: 1 1 200px; margin: 0; }
.phase-edit .check { display: flex; gap: 4px; align-items: center; margin: 0; color: var(--text); font-weight: 400; }
.phase-edit .check input { width: auto; margin: 0; }
.center-note { text-align: center; padding: 10px; }

/* ================= Chat ================= */
.chat-pane [hidden] { display: none !important; }
.chat-pane { display: flex; flex-direction: column; min-height: 0; }
.chat-filter { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--bg); align-items: center; }
.chat-filter input, .chat-filter select { width: auto; margin: 0; padding: 6px 8px; font-size: 13px; }
.chat-filter input[type=search] { flex: 1 1 200px; }
.chat-list {
  list-style: none; margin: 0; padding: 16px 20px; display: flex; flex-direction: column; gap: 6px;
  height: calc(100vh - 330px); min-height: 380px; overflow-y: auto; overscroll-behavior: contain;
  background: color-mix(in srgb, var(--bg) 60%, var(--card));
}
.chat-list .day { align-self: center; margin: 10px 0 4px; }
.chat-list .day span { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--card); border: 1px solid var(--line); padding: 2px 10px; border-radius: 99px; }
.chat-list .more, .empty-chat { align-self: center; color: var(--muted); font-size: 14px; padding: 20px 0; }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: min(78%, 620px); position: relative; outline: none; }
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg .avatar { width: 30px; height: 30px; font-size: 11px; }
.bubble { background: var(--card); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 7px 10px 5px; min-width: 70px; box-shadow: var(--shadow); }
.msg.mine .bubble { background: var(--accent-soft); border-color: transparent; border-radius: 14px 14px 4px 14px; }
.bubble .who { font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.bubble .who span { color: var(--muted); font-weight: 500; }
.bubble .text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.bubble .meta { text-align: right; font-size: 11px; color: var(--muted); margin-top: 2px; }
.bubble .deleted { font-style: italic; color: var(--muted); font-size: 14px; }
.bubble .quote { display: block; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); padding: 4px 8px; border-radius: 6px; margin-bottom: 4px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.bubble .quote strong { display: block; color: var(--text); font-size: 12px; }
.bubble .quote:hover { text-decoration: none; }
.pgrid { display: grid; gap: 3px; margin: 2px -4px 4px; border-radius: 10px; overflow: hidden; width: min(360px, 62vw); }
.pgrid.n1 { grid-template-columns: 1fr; }
.pgrid.n2 { grid-template-columns: 1fr 1fr; }
.pgrid.n3, .pgrid.n4 { grid-template-columns: 1fr 1fr; }
.pgrid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--bg); }
.pgrid.n1 img { aspect-ratio: auto; max-height: 360px; }
.bubble audio { display: block; width: min(280px, 60vw); height: 40px; margin: 2px 0; }
.bubble .doc { display: flex; gap: 8px; align-items: center; padding: 6px; margin: 2px 0; border-radius: 8px; background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--text); }
.bubble .doc small { display: block; color: var(--muted); }
.bubble .doc:hover { text-decoration: none; }
.reacts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.react { font: inherit; font-size: 12px; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); cursor: pointer; }
.react.on { border-color: var(--accent); background: var(--accent-soft); }
.msg-actions {
  display: flex; gap: 2px; align-self: center; opacity: 0; pointer-events: none; transition: opacity .12s ease;
  background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 2px; box-shadow: var(--shadow);
}
.msg-actions button { font: inherit; font-size: 14px; background: none; border: 0; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
.msg-actions button:hover { background: var(--bg); }
.msg:hover .msg-actions, .msg:focus-within .msg-actions, .msg.show-actions .msg-actions { opacity: 1; pointer-events: auto; }
.msg.sys { align-self: center; max-width: 90%; }
.msg.sys span { font-size: 12px; color: var(--muted); text-align: center; display: block; }
.msg:target .bubble { outline: 2px solid var(--accent); }
.composer { border-top: 1px solid var(--line); padding: 10px 14px 8px; background: var(--card); }
.composer-row { display: flex; gap: 6px; align-items: flex-end; }
.composer textarea { flex: 1; margin: 0; resize: none; border-radius: 20px; padding: 9px 14px; max-height: 160px; line-height: 1.35; }
.icon-btn {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); font-size: 18px; margin: 0; color: var(--text);
}
.icon-btn input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.icon-btn:hover { background: var(--bg); }
.icon-btn.send { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-size: 16px; }
.icon-btn.send:disabled { opacity: .5; }
.icon-btn.mic.rec { width: auto; padding: 0 12px; border-radius: 20px; background: var(--danger); color: #fff; border-color: var(--danger); font-size: 13px; font-weight: 700; }
.composer-hint { margin: 4px 0 0 4px; }
.composer-hint:empty { display: none; }
.reply-preview { display: flex; justify-content: space-between; gap: 8px; align-items: center; background: var(--bg); border-left: 3px solid var(--accent); border-radius: 6px; padding: 6px 10px; margin-bottom: 6px; font-size: 13px; }
.reply-preview button { background: none; border: 0; cursor: pointer; font-size: 14px; color: var(--muted); }
.pending-files { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.pending { position: relative; display: inline-flex; align-items: center; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 3px 26px 3px 6px; font-size: 12px; max-width: 200px; overflow: hidden; }
.pending img { width: 48px; height: 48px; object-fit: cover; border-radius: 5px; }
.pending button { position: absolute; top: 2px; right: 2px; border: 0; background: var(--card); border-radius: 50%; width: 20px; height: 20px; cursor: pointer; font-size: 11px; }

@media (max-width: 1000px) {
  .project { grid-template-columns: 1fr; }
  .project-side { position: static; max-height: none; }
  .chat-list { height: 60vh; }
}

/* ================= Handy-Ansicht /app ================= */
body.fieldapp { background: var(--card); }
.app-bar { position: sticky; top: 0; z-index: 20; background: var(--card); border-bottom: 1px solid var(--line); padding: max(env(safe-area-inset-top), 8px) 14px 0; }
.app-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.app-title h1 { font-size: 24px; }
.app-me { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; }
.app-me:hover { text-decoration: none; }
.app-search { padding: 6px 0 10px; }
.app-search input { margin: 0; border-radius: 12px; background: var(--bg); font-size: 16px; }
.chat-title { justify-content: flex-start; padding-bottom: 4px; }
.chat-title .back { font-size: 34px; line-height: 1; padding: 0 8px 4px 0; color: var(--accent); }
.chat-title .back:hover { text-decoration: none; }
.chat-title .t { display: flex; flex-direction: column; min-width: 0; }
.chat-title .t strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; }
.app-tabs { display: flex; margin: 0 -14px; }
.app-tabs a { flex: 1; text-align: center; padding: 10px 0; color: var(--muted); font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; }
.app-tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }
.app-tabs a:hover { text-decoration: none; }
.app-main { padding: 0 0 env(safe-area-inset-bottom); max-width: 760px; margin: 0 auto; }
.app-seg { display: flex; margin: 10px 14px; }
.app-seg a { flex: 1; text-align: center; }
.app-list { list-style: none; margin: 0; padding: 0; }
.app-list a { display: flex; gap: 12px; padding: 12px 14px; color: var(--text); border-bottom: 1px solid var(--line); align-items: center; }
.app-list a:hover, .app-list a:active { text-decoration: none; background: var(--bg); }
.app-avatar { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--ph); }
.app-item { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.app-item .row { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-width: 0; }
.app-item strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-item .when { flex: none; font-size: 12px; color: var(--muted); }
.one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unread-dot { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.app-empty { text-align: center; padding: 60px 24px; }
.app-pad { padding: 14px; }
.app-pad .card { margin-bottom: 12px; }
.app-actions .btn { width: 100%; padding: 12px; font-size: 16px; }
/* Chat am Handy: Seite scrollt, Eingabe klebt unten */
body.is-chat .chat-list { height: auto; min-height: calc(100vh - 210px); overflow: visible; padding: 12px 10px 90px; background: var(--bg); }
body.is-chat .composer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 8px 8px max(env(safe-area-inset-bottom), 8px); box-shadow: 0 -2px 10px rgba(16,24,40,.06); }
body.is-chat .composer textarea { font-size: 16px; }
body.is-chat .msg { max-width: 88%; }
body.fieldapp .msg .msg-actions { position: absolute; top: -18px; }
body.fieldapp .msg.mine .msg-actions { right: 0; }
body.fieldapp .msg.theirs .msg-actions { left: 38px; }
body.fieldapp .msg:hover .msg-actions { opacity: 0; pointer-events: none; }
body.fieldapp .msg.show-actions .msg-actions { opacity: 1; pointer-events: auto; }
body.fieldapp .icon-btn { width: 44px; height: 44px; }
body.fieldapp .files-view h3 { margin-top: 8px; }

/* Belege */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.badge.d-entwurf, .status-pick .d-entwurf { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.badge.d-offen, .status-pick .d-offen { background: var(--accent-soft); color: var(--accent); }
.badge.d-angenommen, .badge.d-bestaetigt, .status-pick .d-angenommen, .status-pick .d-bestaetigt { background: var(--ok-soft); color: var(--ok); }
.badge.d-abgelehnt, .badge.d-storniert, .status-pick .d-abgelehnt, .status-pick .d-storniert { background: var(--danger-soft); color: var(--danger); }
.badge.d-abgerechnet { background: #f4ebff; color: #6941c6; }
.status-pick:has(.d-offen) { grid-template-columns: repeat(3, 1fr); }
.doc-editor .card { margin-bottom: 16px; }
.pos-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.pos-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 34px; gap: 10px; align-items: start;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--card); }
.pos-row.is-text { background: var(--bg); }
.pos-row.is-optional { border-style: dashed; }
.pos-no { font-weight: 700; color: var(--muted); padding-top: 9px; text-align: center; font-size: 13px; }
.pos-main input, .pos-main textarea { margin: 0 0 6px; }
.pos-main input { font-weight: 600; }
.pos-main textarea { font-size: 14px; resize: vertical; min-height: 38px; }
.pos-nums { display: grid; grid-template-columns: 76px 76px 104px 70px 78px 92px; gap: 6px; align-items: end; }
.pos-nums label { margin: 0; font-size: 11px; }
.pos-nums input, .pos-nums select { margin: 2px 0 0; padding: 7px 8px; }
.pos-total { grid-column: 1 / -1; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; padding-top: 2px; }
.pos-actions { display: flex; flex-direction: column; gap: 4px; }
.icon-btn { width: 30px; height: 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text); cursor: pointer; font-size: 13px; line-height: 1; }
.icon-btn:hover:not(:disabled) { background: var(--bg); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn.danger { color: var(--danger); }
.pos-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; border-top: 1px solid var(--line); padding-top: 12px; }
.pos-add label { margin: 0; }
.pos-add .grow { flex: 1 1 280px; }
.pos-add input { margin: 2px 0 0; }
.doc-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; margin: 0; font-variant-numeric: tabular-nums; }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; text-align: right; }
.totals .grand { font-weight: 700; color: var(--text); font-size: 17px; border-top: 1px solid var(--text); padding-top: 6px; margin-top: 4px; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.doc-actions .grow { flex: 1; }
.danger-btn { color: var(--danger); }
.finalize { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-color: var(--accent); }
.finalize h2 { margin-bottom: 4px; }
.finalize p { margin: 0; }
.stack-actions { display: flex; flex-direction: column; gap: 8px; }
.stack-actions form { margin: 0; }
.stack-actions h2 { margin-bottom: 4px; }
.doc-text { white-space: pre-wrap; }
.doc-items .pre { white-space: pre-wrap; }
.hash code { font-size: 11px; overflow-wrap: anywhere; }
.btn.small-btn { padding: 5px 10px; font-size: 13px; }
@media (max-width: 900px) {
  .pos-row { grid-template-columns: 28px minmax(0, 1fr) 34px; }
  .pos-nums { grid-column: 2 / 3; grid-template-columns: repeat(3, 1fr); }
  .pos-actions { grid-column: 3; grid-row: 1; flex-direction: column; }
  .doc-bottom { grid-template-columns: 1fr; }
  .finalize { flex-direction: column; align-items: stretch; }
}
.due-note { background: var(--warn-soft); color: var(--warn); padding: 8px 12px; border-radius: 8px; font-weight: 600; font-size: 14px; }
.due-note a { color: inherit; }
.badge.e-neu, .status-pick .e-neu { background: var(--accent-soft); color: var(--accent); }
.badge.e-geprueft, .status-pick .e-geprueft { background: var(--warn-soft); color: var(--warn); }
.badge.e-bezahlt, .status-pick .e-bezahlt { background: var(--ok-soft); color: var(--ok); }
.badge.e-abgelehnt, .status-pick .e-abgelehnt { background: var(--danger-soft); color: var(--danger); }
pre.xml { max-height: 420px; overflow: auto; font-size: 11px; background: var(--bg); padding: 10px; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ================= Personal (nur Admins) ================= */
.hr-upload { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.hr-upload > label { flex: 1 1 320px; margin: 0; }
.hr-upload .upload { flex: none; }
.folder-card summary { cursor: pointer; list-style: none; }
.folder-card summary::-webkit-details-marker { display: none; }
.folder-card summary h2 { display: inline; margin: 0; }
.folder-card[open] summary { margin-bottom: 10px; }

/* Export + Auswertungen */
.export-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.export-grid .card { margin-bottom: 16px; }
.filters.inline { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stat-label { font-size: 13px; color: var(--muted); }
.stat-value { font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin: 2px 0; font-variant-numeric: tabular-nums; color: var(--text); }
.stat-sub { font-size: 12px; color: var(--muted); }
.warn-stat .stat-value { color: var(--warn); }
.bar-chart { width: 100%; height: auto; display: block; margin: 4px 0 8px; }
.bar-chart .grid { stroke: var(--line); stroke-width: 1; }
.bar-chart .axis { stroke: var(--muted); stroke-width: 1; }
.bar-chart .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.bar-chart .bar path { fill: var(--accent); }
.bar-chart .bar .hit { fill: transparent; }
.bar-chart .bar:hover path { filter: brightness(1.15); }
.bar-chart .bar:hover .hit { fill: var(--accent-soft); opacity: .5; }
.tabs.sub { margin-top: 4px; }
.tx-list .purpose { max-width: 320px; overflow-wrap: anywhere; }
.tx-list .pos { color: var(--ok); font-weight: 600; }
.tx-list .neg { color: var(--danger); }
.tx-list .assign form { margin: 0 0 6px; }
.tx-list .sugg { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.tx-list .manual { display: flex; gap: 6px; align-items: center; }
.tx-list .manual select { margin: 0; max-width: 260px; }
.level-form { border-top: 1px solid var(--line); padding-top: 8px; }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.test-banner { background: var(--warn-soft); color: var(--warn); text-align: center; font-weight: 600; font-size: 13px; padding: 6px 16px; border-bottom: 1px solid var(--line); }
.unlink-form { margin: -4px 0 14px; }
.chip.art-reklamation { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.chip.art-projekt { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.chip.art-sonstiges { background: var(--warn-soft); color: var(--warn); border-color: transparent; }

/* Gesamtliste: Gruppen mit Farbe (Palette aus den Diagramm-Leitlinien, eigene Töne für Dunkelmodus) */
:root { --grp-1: #2a78d6; --grp-2: #eb6834; --grp-3: #1baf7a; --grp-4: #eda100; --grp-5: #e87ba4; --grp-6: #008300; --grp-7: #6250d6; --grp-8: #e34948; }
@media (prefers-color-scheme: dark) {
  :root { --grp-1: #3987e5; --grp-2: #d95926; --grp-3: #199e70; --grp-4: #c98500; --grp-5: #d55181; --grp-6: #008300; --grp-7: #9085e9; --grp-8: #e66767; }
}
.grp-1 { --g: var(--grp-1); } .grp-2 { --g: var(--grp-2); } .grp-3 { --g: var(--grp-3); } .grp-4 { --g: var(--grp-4); }
.grp-5 { --g: var(--grp-5); } .grp-6 { --g: var(--grp-6); } .grp-7 { --g: var(--grp-7); } .grp-8 { --g: var(--grp-8); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--g, var(--line)); flex: none; }
.grp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.grp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font-size: 14px; font-weight: 500; }
.grp-chip:hover { text-decoration: none; background: var(--bg); }
.grp-chip span { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.grp-chip.on { border-color: var(--g, var(--text)); box-shadow: inset 0 0 0 1px var(--g, var(--text)); }
.grp-section { border-top: 4px solid var(--g, var(--line)); margin-bottom: 16px; }
.grp-head { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px 4px; font-size: 15px; }
.gl-list tr.g-row td:first-child { box-shadow: inset 4px 0 0 var(--g); }
.gl-list .grp-cell { width: 180px; }
.grp-form { margin: 0; }
.grp-form select { margin: 0; padding: 5px 8px; font-size: 13px; }
.grp-admin .grp-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.grp-admin .grp-edit input[name=name] { margin: 0; flex: 1 1 200px; }
.grp-admin .grp-edit.new { border-top: 2px solid var(--line); margin-top: 6px; padding-top: 12px; }
.grp-actions { display: inline-flex; gap: 6px; align-items: center; }
.swatches { border: 0; margin: 0; padding: 0; display: inline-flex; gap: 4px; }
.swatch { margin: 0; cursor: pointer; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch .dot { width: 18px; height: 18px; }
.swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--g); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) { .gl-list .grp-cell { width: auto; } }
.head-actions { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Gesamtliste: gleiche Spaltenbreiten in allen Gruppen-Abschnitten */
@media (min-width: 641px) {
  .gl-list { table-layout: fixed; width: 100%; }
  .gl-list th:nth-child(1) { width: 92px; } .gl-list th:nth-child(2) { width: 112px; } .gl-list th:nth-child(3) { width: 132px; }
  .gl-list th:nth-child(5) { width: 20%; } .gl-list th:nth-child(6) { width: 11%; } .gl-list th:nth-child(7) { width: 11%; } .gl-list th:nth-child(8) { width: 180px; }
  .gl-list td { overflow-wrap: anywhere; }
}
.swatch { position: relative; }
.swatch input { width: 1px; height: 1px; margin: 0; top: 0; left: 0; }

/* Bereichsfarben: jeder Menüpunkt hat seine Farbe (Punkt im Menü, aktiver Punkt farbig hinterlegt, Farbbalken unter der Kopfzeile) */
.top nav a[href="/"]            { --c: var(--grp-1); }  /* Anfragen     */
.top nav a[href="/projekte"]    { --c: var(--grp-3); }  /* Projekte     */
.top nav a[href="/gesamtliste"] { --c: var(--grp-7); }  /* Gesamtliste  */
.top nav a[href="/kunden"]      { --c: var(--grp-2); }  /* Kunden       */
.top nav a[href="/belege"], .top nav a[href="/firmen"] { --c: var(--grp-4); }  /* Belege, Stammdaten */
.top nav a[href="/websites"]    { --c: var(--grp-5); }  /* Websites     */
.top nav a[href="/nutzer"]      { --c: var(--grp-6); }  /* Nutzer       */
.top nav a[href="/personal"]    { --c: var(--grp-8); }  /* Personal     */
.top nav a[href] { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.top nav a[href]::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--muted)); flex: none; }
.top nav a.on { background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent); color: var(--text); box-shadow: inset 0 -2px 0 var(--c, var(--accent)); }
.top nav a[href]:hover { background: color-mix(in srgb, var(--c, var(--accent)) 9%, transparent); }

body.area-anfragen    { --area: var(--grp-1); }
body.area-projekte    { --area: var(--grp-3); }
body.area-gesamtliste { --area: var(--grp-7); }
body.area-kunden      { --area: var(--grp-2); }
body.area-belege, body.area-stammdaten { --area: var(--grp-4); }
body.area-websites    { --area: var(--grp-5); }
body.area-nutzer      { --area: var(--grp-6); }
body.area-personal    { --area: var(--grp-8); }
body[class*="area-"] .top { box-shadow: inset 0 -3px 0 var(--area, transparent); }
body[class*="area-"] .tabs a.on { border-bottom-color: var(--area, var(--accent)); }

/* dem2-Logo (farbig im hellen, weiße Schrift im dunklen Modus) */
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.logo { display: block; height: 28px; width: auto; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) { .logo-light { display: none; } .logo-dark { display: block; } }
.brand span { font-weight: 700; font-size: 15px; letter-spacing: .02em; color: #283583; border-left: 1px solid var(--line); padding-left: 8px; }
@media (prefers-color-scheme: dark) { .brand span { color: #8fb8ea; } }
.login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.login-logo .logo { height: 44px; }
.login h1.login-logo span { font-size: 22px; font-weight: 700; color: #283583; border-left: 1px solid var(--line); padding-left: 12px; }
@media (prefers-color-scheme: dark) { .login h1.login-logo span { color: #8fb8ea; } }

/* Hintergrund je Bereich: dezenter Farbton der Bereichsfarbe (Karten bleiben weiß bzw. dunkel) */
body[class*="area-"] { background: color-mix(in srgb, var(--area, var(--bg)) 7%, var(--bg)); }
@media (prefers-color-scheme: dark) { body[class*="area-"] { background: color-mix(in srgb, var(--area, var(--bg)) 10%, var(--bg)); } }
body[class*="area-"] .top { background: color-mix(in srgb, var(--area, var(--card)) 4%, var(--card)); }
@media (max-width: 640px) {
  .logo { height: 20px; }
  .brand span { display: none; }
  .top { gap: 10px; }
}

/* ================= Unterweisungen ================= */
.sign-card h2 { margin-bottom: 6px; }
.sign-label { margin: 12px 0 4px; }
.sign-pad { position: relative; border: 2px dashed var(--line); border-radius: 12px; background: #fff; margin-bottom: 12px; }
.sign-pad canvas { display: block; width: 100%; height: 180px; touch-action: none; border-radius: 10px; cursor: crosshair; }
.sign-pad [data-sign-clear] { position: absolute; right: 10px; top: 8px; }
.sign-error[hidden] { display: none; }
.inline-assign select { width: auto; margin: 0; padding: 3px 6px; font-size: 12px; }

/* ================= Formulare ================= */
.fill-form label { color: var(--text); font-weight: 600; font-size: 14px; }
.fill-form .req { color: var(--danger); margin-left: 2px; }
.fill-form .label-like { font-weight: 600; font-size: 14px; margin: 10px 0 6px; }
.fill-form .form-heading { margin: 20px 0 8px; font-size: 14px; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; border-top: 1px solid var(--line); padding-top: 14px; }
.fill-form .big-check { padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.fill-form .big-check input { width: 22px; height: 22px; }
.form-photos { margin-bottom: 14px; }
.form-photos .btn { margin: 0 6px 6px 0; color: var(--text); font-weight: 500; }
.form-photos input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.form-sign { margin-bottom: 14px; }
.fill-error[hidden] { display: none; }
.compact-list a { padding: 10px 4px; }
.form-entries .mail-form summary { list-style: none; cursor: pointer; }
.form-entries .mail-form summary::-webkit-details-marker { display: none; }
.form-entries .mail-form form { display: flex; gap: 6px; margin-top: 6px; }
.form-entries .mail-form input { margin: 0; width: 220px; }
.callout { background: var(--accent-soft); border-radius: 8px; padding: 10px 12px; }
.builder-fields { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.bf { display: grid; grid-template-columns: 26px 200px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.bf input, .bf select { margin: 0; }
.bf [data-k=options] { grid-column: 3 / 4; }
.bf-heading { background: var(--bg); }
.bf-num { font-size: 12px; color: var(--muted); text-align: center; }
.bf .check { display: flex; gap: 4px; align-items: center; margin: 0; color: var(--text); font-weight: 400; white-space: nowrap; }
.bf .check input { width: auto; }
.bf-actions { display: flex; gap: 8px; }
.builder-add { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.builder-add .btn { font-size: 13px; padding: 6px 10px; }
@media (max-width: 760px) { .bf { grid-template-columns: 26px 1fr; } .bf > * { grid-column: auto; } .bf [data-k=label], .bf [data-k=options] { grid-column: 1 / -1; } }
body.fieldapp .app-tabs a { font-size: 13px; }

.access-pick .access-users { margin: 4px 0 8px 28px; }
.builder [hidden] { display: none !important; } /* allgemeine input-Regel überschreibt sonst das hidden-Attribut */

/* ---------- WhatsApp ---------- */
:root { --wa: #1a8f4c; }
@media (prefers-color-scheme: dark) { :root { --wa: #3fbf73; } }
.top nav a[href="/whatsapp"] { --c: var(--wa); }
body.area-whatsapp { --area: var(--wa); }
.nav-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--wa); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 600; }
.wa-card .title-row { align-items: center; }
.wa-chat { max-height: 420px; overflow-y: auto; margin-bottom: 12px; }
.wa-chat li.mine { background: color-mix(in srgb, var(--wa) 14%, var(--bg)); }
.wa-chat li.wa-failed { border-color: var(--danger, #c0392b); }
.wa-status { font-size: 11px; color: var(--muted); text-align: right; margin-top: 4px; }
.wa-status.s-read { color: #1d72d8; }
.wa-status.s-failed { color: var(--danger, #c0392b); }
.wa-form { display: grid; gap: 8px; margin-top: 8px; }
.badge.wa-test { background: color-mix(in srgb, #e6a100 18%, transparent); color: inherit; }
.badge.wa-new { background: var(--wa); color: #fff; }
.wa-inbox { display: grid; grid-template-columns: minmax(260px, 2fr) 3fr; gap: 16px; align-items: start; }
.wa-inbox tr.on td { background: color-mix(in srgb, var(--wa) 10%, transparent); }
@media (max-width: 800px) { .wa-inbox { grid-template-columns: 1fr; } }

/* ================= Seitenleiste (Mitarbeiter-Ansicht) ================= */
:root { --side-w: 232px; }
body.has-side { padding-left: var(--side-w); }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.mobile-top, .nav-scrim { display: none; }
.side-nav {
  position: fixed; inset: 0 auto 0 0; width: var(--side-w); z-index: 30; display: flex; flex-direction: column; gap: 8px;
  padding: 16px 12px; background: var(--card); border-right: 1px solid var(--line); overflow-y: auto;
}
body[class*="area-"] .side-nav { box-shadow: inset -3px 0 0 var(--area, transparent); }
.side-nav > .brand { padding: 4px 8px 14px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.side-nav nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-group { margin: 14px 10px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.side-nav a, .side-logout {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--muted); font-weight: 500; font-size: 14px;
  text-decoration: none; border: 0; background: none; width: 100%; font-family: inherit; cursor: pointer; text-align: left;
}
.side-nav a span:not(.nav-count), .side-logout span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-nav .ico { width: 18px; height: 18px; flex: none; color: var(--c, var(--muted)); }
.side-nav a:hover, .side-logout:hover { background: color-mix(in srgb, var(--c, var(--accent)) 9%, transparent); color: var(--text); text-decoration: none; }
.side-nav a.on { background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent); color: var(--text); box-shadow: inset 3px 0 0 var(--c, var(--accent)); }
.side-me { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.side-me form { margin: 0; }
.side-nav a[href="/dashboard"]   { --c: var(--accent); }
.side-nav a[href="/"]            { --c: var(--grp-1); }
.side-nav a[href="/projekte"]    { --c: var(--grp-3); }
.side-nav a[href="/gesamtliste"] { --c: var(--grp-7); }
.side-nav a[href="/whatsapp"]    { --c: var(--wa); }
.side-nav a[href="/kunden"]      { --c: var(--grp-2); }
.side-nav a[href="/belege"], .side-nav a[href="/firmen"] { --c: var(--grp-4); }
.side-nav a[href="/websites"]    { --c: var(--grp-5); }
.side-nav a[href="/nutzer"]      { --c: var(--grp-6); }
.side-nav a[href="/personal"]    { --c: var(--grp-8); }
body.area-dashboard { --area: var(--accent); }
body.area-whatsapp .side-nav a.on { --c: var(--wa); }

@media (max-width: 900px) {
  body.has-side { padding-left: 0; }
  .mobile-top {
    display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 20; height: 52px; padding: 0 16px;
    background: color-mix(in srgb, var(--area, var(--card)) 4%, var(--card)); border-bottom: 1px solid var(--line);
    box-shadow: inset 0 -3px 0 var(--area, transparent);
  }
  .nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 36px; height: 36px; padding: 8px; margin-left: -8px; border-radius: 8px; cursor: pointer; }
  .nav-burger span { display: block; height: 2px; border-radius: 2px; background: var(--text); }
  .side-nav { transform: translateX(-100%); transition: transform .2s ease; width: min(280px, 85vw); box-shadow: none; }
  .nav-toggle:checked ~ .side-nav { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.25); }
  .nav-toggle:checked ~ .nav-scrim { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(15, 18, 24, .35); }
  .nav-toggle:focus-visible ~ .mobile-top .nav-burger { outline: 2px solid var(--accent); }
}

/* ================= Dashboard ================= */
.dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; color: var(--text); box-shadow: inset 3px 0 0 var(--c, var(--accent)); }
a.kpi:hover { text-decoration: none; border-color: var(--c, var(--accent)); }
.kpi .k-label { font-size: 13px; color: var(--muted); }
.kpi .k-value { font-size: 28px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi .k-sub { font-size: 12px; color: var(--muted); }
.kpi.alert-kpi .k-value { color: var(--danger); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.dash-grid .card { margin: 0; }
.dash-wide { grid-column: 1 / -1; }
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.dash-list li:last-child { border-bottom: 0; }
.dash-list .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-list .r { flex: none; font-size: 12px; color: var(--muted); }
.chart { width: 100%; height: auto; display: block; }
.chart .bar { fill: var(--grp-1); }
.chart .bar:hover { opacity: .75; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart text { fill: var(--muted); font-size: 11px; }
.hbars { display: grid; gap: 8px; }
.hbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: 13px; }
.hbar .track { grid-column: 1 / -1; height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.hbar .fill { height: 100%; border-radius: 4px; background: var(--c, var(--grp-5)); }
.hbar .n { font-variant-numeric: tabular-nums; color: var(--muted); }
@media (max-width: 640px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi .k-value { font-size: 22px; }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-head h1 { font-size: 20px; }
}

/* ================= PDF-Vorlagen ausfüllen ================= */
.pdf-fill { padding: 8px 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pdf-pages { display: flex; flex-direction: column; align-items: center; gap: 12px; width: max-content; min-width: 100%; }
.pdf-page { position: relative; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.pdf-page canvas { display: block; }
.pdf-field { position: absolute; }
.pdf-field input[type=text], .pdf-field textarea, .pdf-field select {
  width: 100%; height: 100%; margin: 0; padding: 0 2px; border: 0; border-radius: 2px; background: rgba(31, 94, 255, .08);
  color: #0b1f66; font-family: Helvetica, Arial, sans-serif; line-height: 1.1; box-shadow: inset 0 -1px 0 rgba(31, 94, 255, .35); resize: none;
}
.pdf-field textarea { padding-top: 1px; }
.pdf-field input:focus, .pdf-field textarea:focus, .pdf-field select:focus { outline: 2px solid #1f5eff; background: rgba(31, 94, 255, .14); }
.pdf-field.t-check, .pdf-field.t-radio { display: grid; place-items: center; }
.pdf-field.t-check input, .pdf-field.t-radio input {
  -webkit-appearance: none; appearance: none; width: 100%; height: 100%; margin: 0; border: 1px solid rgba(31, 94, 255, .6);
  border-radius: 2px; background: rgba(31, 94, 255, .08); cursor: pointer; display: grid; place-content: center;
}
.pdf-field.t-radio input { border-radius: 50%; }
.pdf-field.t-check input:checked, .pdf-field.t-radio input:checked { background: #1f5eff; border-color: #1f5eff; }
.pdf-field.t-check input:checked::after { content: '✓'; color: #fff; font-size: 0.9em; line-height: 1; }
.pdf-field.t-sign button { width: 100%; height: 100%; border: 1px dashed #1f5eff; border-radius: 4px; background: rgba(31, 94, 255, .06); color: #1f5eff; font-size: 11px !important; line-height: 1.1; white-space: nowrap; cursor: pointer; padding: 0 2px; overflow: hidden; }
.pdf-newfolder[hidden], .pdf-error[hidden] { display: none !important; }
.pdf-field.t-sign img { max-width: 100%; max-height: 100%; }
.pdf-loading { text-align: center; padding: 40px 0; }
.pdf-save { position: sticky; bottom: 0; z-index: 5; margin: 0 -12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); display: grid; gap: 8px; }
.pdf-save .row2 { gap: 8px; }
.pdf-zoom { display: flex; gap: 4px; margin-left: auto; }
.pdf-zoom .btn { min-width: 36px; padding: 4px 10px; font-size: 18px; line-height: 1; }
.sign-dialog { border: 0; padding: 0; width: min(560px, 94vw); background: transparent; }
.sign-dialog::backdrop { background: rgba(15, 18, 24, .5); }
.sign-dialog .sign-card { margin: 0; display: grid; gap: 10px; }
.sign-canvas { width: 100%; height: 200px; border: 2px dashed var(--line); border-radius: 12px; background: #fff; touch-action: none; }
[data-for][hidden] { display: none !important; }
.app-docs-card { display: flex; align-items: center; gap: 12px; margin: 10px 12px 4px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: var(--text); text-decoration: none; box-shadow: inset 3px 0 0 var(--grp-8); }
.app-docs-card:hover { text-decoration: none; border-color: var(--grp-8); }
.app-docs-card .ico-big { font-size: 22px; line-height: 1; }
.app-docs-card > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.app-docs-card .go { font-size: 22px; color: var(--muted); }

/* ---------- Aufgaben, Plan, Diktat ---------- */
.notice { background: var(--accent-soft); color: var(--text); padding: 10px 12px; border-radius: 8px; }
.notice.ok { background: var(--ok-soft); color: var(--ok); }
.btn.danger { color: var(--danger); }
.btn.small { padding: 5px 10px; font-size: 13px; }
.actions { display: flex; gap: 8px; align-items: center; }
.actions.wrap { flex-wrap: wrap; }
label.check { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 400; }
label.check input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--accent); }
.task-new { margin: 12px 0 16px; }
.task-new > summary { list-style: none; display: inline-flex; cursor: pointer; }
.task-new > summary::-webkit-details-marker { display: none; }
.task-new[open] > summary { margin-bottom: 12px; }
.task-form { max-width: 820px; }
.task-group h2, .plan-day h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 20px 0 6px; }
.task-group.late h2, .plan-day.late h2 { color: var(--danger); }
.task-group.today h2, .plan-day.today h2 { color: var(--accent); }
.task-list { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.task-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.task-row:last-child { border-bottom: 0; }
.task-row form { margin: 0; }
.task-check { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.task-main { min-width: 0; overflow-wrap: anywhere; }
.task-title { color: var(--text); font-weight: 500; }
.task-row.done .task-title { text-decoration: line-through; color: var(--muted); }
.task-notes { margin-top: 2px; }
.task-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tag { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); margin-left: 6px; }
.task-tags .tag { margin-left: 0; }
.tag.who { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.tag.crm { background: var(--bg); color: var(--muted); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.task-due { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.task-due.late { color: var(--danger); font-weight: 600; }
.prio-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--line); }
.prio-dot.p-hoch { background: var(--danger); }
.prio-dot.p-mittel { background: var(--warn); }
.task-list.compact { border: 0; background: none; }
.task-list.compact .task-row { padding: 8px 0; }
.plan-day { border-left: 3px solid var(--line); padding-left: 12px; margin-bottom: 8px; }
.plan-day.today { border-left-color: var(--accent); }
.plan-day.late { border-left-color: var(--danger); }
.plan-evs { list-style: none; margin: 0 0 8px; padding: 0; }
.plan-ev { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.plan-ev .t { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; font-size: 14px; }
.plan-ev .s { min-width: 0; overflow-wrap: anywhere; }
.diktat-text { min-height: 200px; font-size: 16px; line-height: 1.55; }
.diktat-photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.diktat-photos .foto { position: relative; width: 76px; height: 76px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.diktat-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.diktat-photos button { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; padding: 0; }
.rec-on { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.diktat-result h2 { margin-top: 20px; }
.diktat .summary p { white-space: pre-line; }
.d-item { border: 1px solid var(--line); margin-bottom: 10px; }
.d-item.off { opacity: .55; }
.d-item label { margin-bottom: 8px; }
.d-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.d-head label.check { margin: 0; }
.chip-ok { color: var(--ok); font-weight: 600; font-size: 13px; }
.chip-err { color: var(--danger); font-weight: 600; font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip { font-size: 13px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 4px; margin: 0; color: var(--text); }
.chips .chip button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 0 2px; }
.chips button.chip.add { background: var(--accent-soft); color: var(--accent); border-color: transparent; cursor: pointer; }
details.entry summary { cursor: pointer; list-style: none; }
details.entry summary::-webkit-details-marker { display: none; }
.transcript { white-space: pre-wrap; color: var(--muted); border-left: 2px solid var(--line); padding-left: 10px; }
@media (max-width: 640px) {
  .row3 { grid-template-columns: 1fr 1fr; }
  .row3 > :first-child { grid-column: 1 / -1; }
  .task-row { grid-template-columns: 30px 1fr; }
  .task-due { grid-column: 2; }
}
.diktat label.btn { margin: 0; color: var(--text); cursor: pointer; }
.diktat label.btn input[type=file] { display: none; }
.kind-switch button { border: 0; background: none; padding: 6px 14px; border-radius: 7px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.kind-switch button.on { background: var(--card); color: var(--accent); box-shadow: var(--shadow); }
.kind-switch button:disabled { cursor: default; }
.d-item.k-termin { border-left: 4px solid var(--accent); }
.d-item.k-aufgabe { border-left: 4px solid var(--ok); }
.d-item.k-aufgabe .kind-switch button.on { color: var(--ok); }
.dash-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 20px; }
.dash-day { border-left: 3px solid var(--line); padding-left: 10px; min-width: 0; }
.dash-day.today { border-left-color: var(--accent); }
.dash-day h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 4px; }
.dash-day.today h3 { color: var(--accent); }
.dash-day .plan-ev { grid-template-columns: 52px 1fr; }

/* Chat-Fotos: höchstens 4 Kacheln, „+N“ auf der letzten, bei 3 Fotos das erste breit */
.pgrid a { position: relative; display: block; }
.pgrid a[hidden] { display: none; }
.pgrid a[data-more]:not([data-more=""])::after { content: attr(data-more); position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff; font-size: 26px; font-weight: 700; }
.pgrid.n3 a:first-child { grid-column: 1 / -1; }
.pgrid.n3 a:first-child img { aspect-ratio: 2 / 1; }
.pgrid.n1 img { object-fit: cover; }
.bubble .doc > span:last-child { min-width: 0; overflow-wrap: anywhere; }
body.fieldapp .pgrid { width: min(280px, 70vw); }
body.fieldapp .pgrid.n1 img { max-height: min(300px, 40vh); }
body.fieldapp .composer-row { gap: 4px; }
body.fieldapp .composer-row .icon-btn { width: 40px; height: 40px; flex: none; }
body.fieldapp .composer textarea { min-width: 0; padding: 9px 12px; }

/* Fotos groß ansehen (Tippen auf ein Foto), Wischen oder Pfeile zum Blättern */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .92); display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.lightbox img { max-width: 100vw; max-height: calc(100vh - 110px); object-fit: contain; user-select: none; -webkit-user-drag: none; }
.lightbox button { position: absolute; border: 0; background: rgba(255, 255, 255, .14); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 22px; cursor: pointer; }
.lightbox .lb-close { top: max(12px, env(safe-area-inset-top)); right: 12px; }
.lightbox .lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-bar { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); left: 0; right: 0; display: flex; justify-content: center; gap: 16px; align-items: center; color: #fff; font-size: 14px; }
.lightbox .lb-bar a { color: #fff; text-decoration: underline; }
.lightbox [hidden] { display: none; }

/* Chat-Blasen: Wörter nur umbrechen, wenn sie nicht passen – sonst schrumpft die Blase am Handy auf Buchstabenbreite */
.bubble .text, .bubble .quote, .bubble .doc > span:last-child { overflow-wrap: break-word; word-break: normal; }
.bubble { min-width: min(200px, 100%); }
.chat-filter-box { border-bottom: 1px solid var(--line); background: var(--bg); }
.chat-filter-box > summary { cursor: pointer; padding: 8px 20px; font-size: 13px; font-weight: 600; color: var(--muted); list-style: none; }
.chat-filter-box > summary::-webkit-details-marker { display: none; }
.chat-filter-box[open] > summary { padding-bottom: 0; }
.chat-filter-box .chat-filter { border-bottom: 0; }
.m-only { display: none; }
.proj-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }

@media (max-width: 640px) {
  /* Projektliste am Handy: Kopf umbrechen, Phasen als wischbare Leiste, Karte nur mit dem Wichtigsten */
  .head { flex-wrap: wrap; }
  .head h1 { flex: 1 1 100%; margin: 0; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { white-space: nowrap; flex: none; }
  .proj-filters input[type=search] { flex: 1 1 100%; min-width: 0; }
  .proj-filters .check { font-size: 13px; white-space: nowrap; }
  .proj-list td:not(:first-child) { display: none; }
  .proj-list .m-only { display: flex; }
  .proj-list .m-only.snippet-1 { display: block; margin-top: 4px; }
  .proj-list tr { padding: 10px 0; }
  .proj-list .name { font-size: 16px; }
  .chat-list { padding: 12px 10px; }
  .msg { max-width: 92%; }
  .chat-filter-box > summary { padding: 8px 12px; }
}
.bubble:has(.doc), .bubble:has(.pgrid) { min-width: min(260px, 100%); }
.assigned-card { margin-bottom: 14px; border-left: 4px solid var(--accent); }
.assigned-card h2 { font-size: 16px; margin: 0 0 8px; }
.assigned-appts { list-style: none; margin: 0 0 6px; padding: 0; }
.assigned-appts li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.assigned-appts .when { font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .03em; }
body.fieldapp .assigned-card { margin: 12px; }
.row-form { display: inline; margin: 0 0 0 6px; }
.task-due .row-form { display: block; margin: 2px 0 0; text-align: right; }
.row-form + .task-list, form.row-form:has(.btn) { display: block; margin: 0 0 10px; }
.task-notes-card h2 { font-size: 16px; }
.tnotes { list-style: none; margin: 0 0 12px; padding: 0; }
.tnotes li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.tnote-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tnote-head form { margin-left: auto; }
.tnote-body { white-space: pre-wrap; overflow-wrap: break-word; margin: 4px 0; }
.tnotes .pgrid { margin: 6px 0; }
.tnotes .doc { display: flex; gap: 8px; align-items: center; padding: 6px; margin: 4px 0; border-radius: 8px; background: var(--bg); color: var(--text); max-width: 420px; }
.tnotes .doc small { display: block; color: var(--muted); }
.tnote-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.tnote-files .chip { font-size: 12px; padding: 3px 8px; }
.tnote-files .chip button { border: 0; background: none; cursor: pointer; color: var(--muted); }
.tnote-form label.btn { margin: 0; color: var(--text); cursor: pointer; }
.tnote-form label.btn input[type=file] { display: none; }
.task-count { font-size: 12px; color: var(--muted); margin-left: 6px; }
form.row-form:has(.btn) { margin: 10px 0; }

/* Meine Unterlagen: Ordner und Profil */
.pbar { height: 8px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; margin: 6px 0; }
.pbar span { display: block; height: 100%; background: var(--ok); border-radius: 99px; }
.profile-teaser { display: flex; align-items: center; gap: 10px; color: var(--text); margin-bottom: 12px; }
.profile-teaser:hover { text-decoration: none; }
.profile-teaser .t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.profile-teaser .go { font-size: 24px; color: var(--muted); }
.my-folder { padding: 0; margin-bottom: 10px; }
.my-folder > summary { display: flex; align-items: center; gap: 10px; padding: 14px; cursor: pointer; list-style: none; }
.my-folder > summary::-webkit-details-marker { display: none; }
.my-folder[open] > summary { border-bottom: 1px solid var(--line); }
.my-folder > :not(summary) { margin: 10px 14px; }
.folder-ico { font-size: 22px; }
.folder-t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.folder-n { display: flex; gap: 6px; align-items: center; font-weight: 700; color: var(--muted); }
.doc-slots { list-style: none; margin: 0 0 12px; padding: 0; }
.doc-slot { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.slot-state { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; flex: none; }
.doc-slot.ok .slot-state { background: var(--ok-soft); color: var(--ok); }
.doc-slot.missing .slot-state { background: var(--warn-soft); color: var(--warn); }
.slot-main { flex: 1; display: flex; flex-direction: column; min-width: 160px; overflow-wrap: anywhere; }
.slot-upload { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.slot-upload label.btn { margin: 0; color: var(--text); cursor: pointer; }
.slot-upload input[type=file] { display: none; }
.profile-card h3 { font-size: 14px; margin: 16px 0 6px; }
.profile-line { display: block; color: var(--text); margin: 0 0 10px; font-size: 13px; }
.profile-line:hover { text-decoration: none; }
@media (max-width: 640px) {
  .profile-form .row2 { grid-template-columns: 1fr; }
  .doc-slot .slot-upload { flex-basis: 100%; padding-left: 36px; }
  .slot-upload label.btn { flex: 1; text-align: center; }
}
.upload.slot-upload { flex-direction: row; }
.danger-zone { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line); }
.danger-zone > summary { cursor: pointer; list-style: none; }
.danger-zone > summary::-webkit-details-marker { display: none; }
.danger-zone .stack { margin-top: 8px; }
.btn.danger.wide { background: var(--danger); color: #fff; border-color: var(--danger); }
.add-member > summary { list-style: none; margin-top: 8px; text-align: center; }
.add-member > summary::-webkit-details-marker { display: none; }
.add-member[open] > summary { margin-bottom: 8px; }
.add-member .member-pick { max-height: 320px; overflow-y: auto; margin-bottom: 8px; }
.push-card { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin: 12px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 14px; }
.push-card[hidden] { display: none; }
.push-card .btn { flex: none; }
.push-card [hidden] { display: none !important; }
.spam-clear { margin: 0 0 12px; border-top: 0; padding-top: 0; }
.spam-clear > summary { display: inline-flex; }
.participants .member-pick { max-height: 240px; overflow-y: auto; }

/* Aufgaben: breiteres Formular, Hinweise mehrzeilig sichtbar */
.task-form { max-width: 1100px; }
.task-form textarea.auto-grow { min-height: 6.5em; max-height: 70vh; field-sizing: content; }
.task-notes { white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.task-view .tnote-body { white-space: pre-line; }

/* ===== WhatsApp-Look (Posteingang + Karten in Anfrage/Projekt) ===== */
:root {
  --wa-bg: #efeae2; --wa-in: #ffffff; --wa-out: #d9fdd3; --wa-ink: #111b21; --wa-sub: #667781;
  --wa-head: #f0f2f5; --wa-list: #ffffff; --wa-line: #e9edef; --wa-tick: #53bdeb; --wa-green: #00a884;
  --wa-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.045' stroke-width='1.5'%3E%3Ccircle cx='18' cy='20' r='7'/%3E%3Cpath d='M70 12h16v12H70z'/%3E%3Cpath d='M30 70l8-10 8 10'/%3E%3Cpath d='M92 60c6 0 10 4 10 9s-4 9-10 9'/%3E%3Ccircle cx='60' cy='98' r='5'/%3E%3Cpath d='M10 100l6 6 10-12'/%3E%3Cpath d='M100 100h12M106 94v12'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root {
    --wa-bg: #0b141a; --wa-in: #202c33; --wa-out: #005c4b; --wa-ink: #e9edef; --wa-sub: #8696a0;
    --wa-head: #202c33; --wa-list: #111b21; --wa-line: #222d34; --wa-tick: #53bdeb; --wa-green: #00a884;
    --wa-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.035' stroke-width='1.5'%3E%3Ccircle cx='18' cy='20' r='7'/%3E%3Cpath d='M70 12h16v12H70z'/%3E%3Cpath d='M30 70l8-10 8 10'/%3E%3Cpath d='M92 60c6 0 10 4 10 9s-4 9-10 9'/%3E%3Ccircle cx='60' cy='98' r='5'/%3E%3Cpath d='M10 100l6 6 10-12'/%3E%3Cpath d='M100 100h12M106 94v12'/%3E%3C/g%3E%3C/svg%3E");
  }
}

/* Gesamtfenster: Chatliste links, Verlauf rechts */
.wa-app { display: grid; grid-template-columns: clamp(240px, 32%, 380px) 1fr; height: max(520px, calc(100vh - 190px)); border: 1px solid var(--wa-line); border-radius: 12px; overflow: hidden; background: var(--wa-list); color: var(--wa-ink); }
.wa-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--wa-line); background: var(--wa-list); }
.wa-list-head { padding: 14px 16px; font-weight: 700; font-size: 18px; background: var(--wa-head); }
.wa-list ul { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.wa-list li a { display: flex; gap: 12px; align-items: center; padding: 10px 14px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--wa-line); }
.wa-list li a:hover { background: color-mix(in srgb, var(--wa-head) 70%, transparent); }
.wa-list li.on a { background: var(--wa-head); }
.wa-list .wa-empty { padding: 16px; }
.wa-li { display: grid; gap: 2px; min-width: 0; flex: 1; }
.wa-li-top, .wa-li-bot { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.wa-li-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.wa-li-top time { font-size: 12px; color: var(--wa-sub); flex: none; }
.wa-list li.unread .wa-li-top time { color: var(--wa-green); font-weight: 600; }
.wa-li-msg { font-size: 14px; color: var(--wa-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-li-tag { font-size: 11px; color: var(--wa-sub); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge.wa-new { background: var(--wa-green); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }

/* Profilkreis */
.wa-av { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--av, #25a884); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 16px; letter-spacing: .02em; }
.wa-head .wa-av { width: 38px; height: 38px; font-size: 14px; }

/* Verlauf */
.wa-thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--wa-bg) var(--wa-doodle); }
.wa-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--wa-head); border-bottom: 1px solid var(--wa-line); }
.wa-head-txt { display: grid; min-width: 0; flex: 1; }
.wa-head-txt strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-head-txt span { font-size: 13px; color: var(--wa-sub); }
.wa-back { display: none; font-size: 30px; line-height: 1; color: var(--wa-ink); text-decoration: none; padding: 0 6px 0 0; }
.wa-menu { position: relative; }
.wa-menu > summary { list-style: none; cursor: pointer; font-size: 22px; padding: 2px 8px; border-radius: 50%; color: var(--wa-sub); }
.wa-menu > summary::-webkit-details-marker { display: none; }
.wa-menu-box { position: absolute; right: 0; top: 36px; z-index: 5; width: min(360px, 80vw); background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.wa-pane { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 6%; }
.wa-thread .wa-chat { max-height: none; overflow: visible; margin: 0; }
.wa-bottom { background: var(--wa-head); padding: 8px 12px; border-top: 1px solid var(--wa-line); }
.wa-idle { display: grid; place-items: center; text-align: center; }
.wa-idle-txt { display: grid; justify-items: center; gap: 4px; padding: 24px; background: color-mix(in srgb, var(--wa-head) 85%, transparent); border-radius: 12px; }
.wa-idle .wa-av { width: 64px; height: 64px; font-size: 22px; }

/* Sprechblasen */
.wa-chat { gap: 3px; }
.wa-chat li { position: relative; max-width: min(75%, 560px); padding: 6px 9px 8px; border: 0; border-radius: 8px; color: var(--wa-ink); box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.wa-chat li.theirs { background: var(--wa-in); border-top-left-radius: 0; margin-left: 8px; }
.wa-chat li.mine { background: var(--wa-out); border-top-right-radius: 0; margin-right: 8px; }
.wa-chat li.theirs::before, .wa-chat li.mine::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; }
.wa-chat li.theirs::before { left: -8px; background: var(--wa-in); clip-path: polygon(100% 0, 0 0, 100% 100%); }
.wa-chat li.mine::before { right: -8px; background: var(--wa-out); clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa-chat li + li.mine:not(.wa-day + li), .wa-chat li + li.theirs { margin-top: 2px; }
.wa-chat li.theirs + li.mine, .wa-chat li.mine + li.theirs { margin-top: 10px; }
.wa-chat .meta { font-size: 12px; font-weight: 600; color: var(--wa-green); margin: 0 0 1px; }
.wa-chat .body { display: inline; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.4; }
.wa-foot { float: right; margin: 6px 0 -4px 10px; font-size: 11px; color: var(--wa-sub); white-space: nowrap; line-height: 1.6; }
.wa-ticks { font-size: 12px; letter-spacing: -3px; margin-left: 2px; color: var(--wa-sub); }
.wa-ticks.s-read { color: var(--wa-tick); }
.wa-ticks.s-failed { color: var(--danger); letter-spacing: 0; font-weight: 700; }
.wa-ticks.s-test { letter-spacing: 0; }
.wa-media { display: block; margin: 2px 0; font-size: 14px; }
.wa-err { clear: both; font-size: 12px; color: var(--danger); padding-top: 2px; }
.wa-chat li.wa-failed { outline: 1px solid color-mix(in srgb, var(--danger) 50%, transparent); }
.wa-chat li.wa-day { align-self: center; background: none; box-shadow: none; padding: 0; margin: 10px 0 6px; max-width: none; }
.wa-chat li.wa-day::before { display: none; }
.wa-day span { display: inline-block; background: var(--wa-head); color: var(--wa-sub); font-size: 12.5px; padding: 5px 12px; border-radius: 8px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }

/* Eingabezeile */
.wa-compose { display: flex; align-items: flex-end; gap: 8px; }
.wa-compose textarea { flex: 1; min-height: 42px; max-height: 160px; resize: none; border: 0; border-radius: 21px; padding: 10px 16px; background: var(--wa-list); color: var(--wa-ink); font-size: 15px; line-height: 1.4; field-sizing: content; }
.wa-compose textarea:focus { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--wa-green) 40%, transparent); }
.wa-send { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--wa-green); color: #fff; display: grid; place-items: center; cursor: pointer; }
.wa-send:hover { filter: brightness(1.08); }
.wa-more { margin-top: 6px; }
.wa-more .wa-form, .wa-closed .wa-form { background: var(--card); color: var(--text); border-radius: 10px; padding: 10px; }
.wa-closed p { margin: 2px 4px 8px; }

/* Karte in Anfrage/Projekt: Verlauf im WhatsApp-Hintergrund */
.wa-card .wa-pane { max-height: 440px; border-radius: 10px; background: var(--wa-bg) var(--wa-doodle); padding: 10px 14px; margin-bottom: 10px; }

/* Handy: entweder Liste oder Verlauf */
@media (max-width: 800px) {
  .wa-app { grid-template-columns: 1fr; height: calc(100dvh - 72px); min-height: 420px; }
  .wa-app.has-sel .wa-list, .wa-app:not(.has-sel) .wa-thread { display: none; }
  .wa-back { display: block; }
  .wa-pane { padding: 10px 10px; }
  .wa-chat li { max-width: 85%; }
}
.wa-card .wa-chat { max-height: none; overflow: visible; }

/* Löschbereich als sichtbarer Kasten (Anfragen, Projekte) */
.danger-zone { margin-top: 16px; padding: 0; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--danger) 6%, var(--card)); overflow: hidden; }
.danger-zone > summary { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; font-weight: 600; font-size: 14px; color: var(--danger); text-decoration: none; cursor: pointer; user-select: none; }
.danger-zone > summary::before { content: "🗑"; font-size: 15px; }
.danger-zone > summary:hover { background: color-mix(in srgb, var(--danger) 12%, var(--card)); }
.danger-zone[open] > summary { border-bottom: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line)); }
.danger-zone .stack { margin: 0; padding: 12px 14px 14px; }

/* Angebots-Ordner */
.off-search { max-width: 640px; align-items: center; margin-bottom: 14px; }
.off-folders { display: grid; gap: 12px; }
.off-folder { padding: 0; overflow: hidden; }
.off-folder > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; cursor: pointer; list-style: none; }
.off-folder > summary::-webkit-details-marker { display: none; }
.off-folder[open] > summary { border-bottom: 1px solid var(--line); }
.off-ico { font-size: 20px; }
.off-cust { margin-left: auto; }
.off-list { list-style: none; margin: 0; padding: 0; }
.off-list li + li { border-top: 1px solid var(--line); }
.off-list a { display: grid; grid-template-columns: 120px 1fr auto auto auto; gap: 12px; align-items: center; padding: 10px 16px; color: var(--text); text-decoration: none; }
.off-list a:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.off-no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.off-title { min-width: 0; overflow-wrap: anywhere; }
.off-sum { white-space: nowrap; font-variant-numeric: tabular-nums; }
.badge.off-offen { background: var(--warn-soft); color: var(--warn); }
.badge.off-angenommen, .badge.off-abgerechnet { background: var(--ok-soft); color: var(--ok); }
.badge.off-abgelehnt { background: var(--danger-soft); color: var(--danger); }
.off-doc-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.off-doc-head h1 { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.off-doc-title { font-size: 17px; font-weight: 600; margin: 4px 0 0; }
.off-doc-meta { display: grid; gap: 6px; justify-items: end; }
.off-recipient { margin: 16px 0; line-height: 1.5; }
.off-text { white-space: pre-line; margin: 14px 0; line-height: 1.5; }
.off-desc { white-space: pre-line; font-size: 13px; color: var(--muted); margin-top: 2px; }
.off-items tfoot td { border-top: 2px solid var(--line); }
@media (max-width: 700px) {
  .off-list a { grid-template-columns: 1fr auto; }
  .off-title { grid-column: 1 / -1; order: 3; }
  .off-date { order: 4; }
  .off-doc-meta { justify-items: start; }
}
@media print { .side-nav, .mobile-top, .off-doc + .card, a[href="/angebote"] { display: none !important; } }
.badge.off-pdf { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-family: inherit; }
.off-note { background: var(--warn-soft); padding: 8px 10px; border-radius: 8px; }
.badge.off-proj { background: var(--accent-soft); color: var(--accent); }