:root {
  --bg: #f4f5f7; --card: #ffffff; --ink: #111827; --muted: #6b7280; --line: #e5e7eb;
  --primary: #1d4ed8; --primary-ink: #ffffff; --soft: #eef2ff;
  --green: #15803d; --green-bg: #dcfce7; --orange: #c2410c; --orange-bg: #ffedd5;
  --red: #b91c1c; --red-bg: #fee2e2; --blue-bg: #dbeafe; --gray-bg: #f3f4f6;
  --radius: 14px; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1120; --card: #131c2e; --ink: #e5e7eb; --muted: #94a3b8; --line: #23304a;
    --primary: #3b82f6; --soft: #1e293b;
    --green: #4ade80; --green-bg: #0f2e1d; --orange: #fb923c; --orange-bg: #3a2210;
    --red: #f87171; --red-bg: #3b1414; --blue-bg: #172554; --gray-bg: #1e293b;
    --shadow: none; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.2; }
h2 { font-size: 1.25rem; }
.muted { color: var(--muted); }
.error { color: var(--red); min-height: 1.2em; }
input, textarea, select { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; width: 100%; }
textarea { resize: vertical; }
label { display: block; font-weight: 600; font-size: .9rem; margin: .6em 0; }
label input, label select, label textarea { margin-top: 4px; font-weight: 400; }
.lbl { font-weight: 600; display: block; margin-bottom: 6px; }

.btn { font: inherit; font-weight: 600; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 10px; padding: 9px 14px; cursor: pointer; white-space: nowrap; min-height: 40px; }
.btn:hover { border-color: var(--primary); }
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn.green { background: var(--green); color: #fff; border-color: var(--green); }
.btn.ghost { background: transparent; }
.btn.big { width: 100%; padding: 13px; font-size: 1.05rem; }
.btn:disabled { opacity: .5; cursor: wait; }

/* Anmeldung */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { background: var(--card); padding: 28px 24px; border-radius: 20px; width: 100%; max-width: 360px;
  box-shadow: var(--shadow); text-align: center; }
.login-card label { text-align: left; }

/* Kopfzeile */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 8px 16px;
  background: var(--card); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.tabs-main { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.tabs-main button { font: inherit; background: none; border: 0; padding: 10px 12px; border-radius: 10px;
  color: var(--muted); font-weight: 600; cursor: pointer; white-space: nowrap; }
.tabs-main button.on { background: var(--soft); color: var(--primary); }
.top-right { display: flex; gap: 6px; }
.badge { background: var(--red); color: #fff; border-radius: 99px; padding: 0 7px; font-size: .75rem; }
.problem { background: var(--orange-bg); color: var(--orange); padding: 8px 16px; font-size: .9rem; }

main { max-width: 1100px; margin: 0 auto; padding: 16px; }

/* Kacheln */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tile { text-align: left; font: inherit; color: inherit; background: var(--card); border: 2px solid transparent;
  border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); cursor: pointer; display: flex;
  flex-direction: column; gap: 2px; }
.tile.on { border-color: var(--primary); }
.t-label { font-weight: 600; color: var(--muted); font-size: .85rem; }
.t-num { font-size: 1.9rem; line-height: 1.1; }
.t-sub { font-size: .8rem; min-height: 1.1em; }
.tile.alarm .t-sub { color: var(--red); font-weight: 700; }
.tile.warn .t-sub { color: var(--orange); font-weight: 700; }

.toolbar { display: flex; gap: 10px; margin: 14px 0 6px; flex-wrap: wrap; }
.toolbar input { flex: 1 1 260px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font: inherit; font-size: .85rem; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 99px; padding: 6px 12px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.chip.on { border-color: var(--primary); background: var(--soft); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.list-title { margin-top: 14px; }
.list-hint { margin-top: -4px; }

/* Bestellliste */
.list { display: flex; flex-direction: column; gap: 8px; }
.order { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border-left: 6px solid var(--line);
  overflow: hidden; }
.order.age-ok { border-left-color: var(--line); }
.order.age-orange { border-left-color: #f97316; }
.order.age-red { border-left-color: #dc2626; }
.order.paid { border-left-color: #22c55e; }
.order.alert { border-left-color: #dc2626; }
.row { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 12px 14px;
  cursor: pointer; width: 100%; background: none; border: 0; font: inherit; color: inherit; text-align: left; }
.row .shop { font-size: .75rem; font-weight: 700; color: #fff; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.row .who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .who small { font-weight: 400; color: var(--muted); }
.row .amt { font-weight: 700; text-align: right; white-space: nowrap; }
.row .meta { grid-column: 2 / 4; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: .85rem; color: var(--muted); }
.pill { display: inline-block; border-radius: 99px; padding: 1px 9px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.pill.red { background: var(--red-bg); color: var(--red); }
.pill.orange { background: var(--orange-bg); color: var(--orange); }
.pill.green { background: var(--green-bg); color: var(--green); }
.pill.blue { background: var(--blue-bg); color: var(--primary); }
.pill.gray { background: var(--gray-bg); color: var(--muted); }

.detail { border-top: 1px solid var(--line); padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.detail h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 6px; }
.detail .block { min-width: 0; }
.detail .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.items { margin: 0; padding: 0; list-style: none; }
.items li { padding: 3px 0; border-bottom: 1px dashed var(--line); }
.addr { white-space: pre-line; }
.trackbox { background: var(--gray-bg); border-radius: 10px; padding: 10px 12px; }
.trackbox.alert { background: var(--red-bg); color: var(--red); font-weight: 600; }
.trackbox a { color: inherit; font-weight: 700; word-break: break-all; }
.shoperr { background: var(--orange-bg); color: var(--orange); border-radius: 10px; padding: 8px 12px; grid-column: 1 / -1; }
.hist { font-size: .85rem; color: var(--muted); max-height: 160px; overflow: auto; }
.hist div { padding: 2px 0; }
.empty { text-align: center; padding: 40px 10px; color: var(--muted); background: var(--card); border-radius: var(--radius); }
.card { background: var(--card); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); margin-bottom: 12px; }
.card .btn { margin-top: 8px; }
.inbox-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.inbox-item .acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: end; grid-column: 1 / -1; }
.inbox-item select { flex: 1 1 220px; width: auto; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }

/* Einstellungen */
.setgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.status { font-size: .85rem; margin: 6px 0; }
.status.ok { color: var(--green); }
.status.bad { color: var(--red); }
.check { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.check input { width: auto; margin: 0; }
details.card > summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
details.card > summary::-webkit-details-marker { display: none; }

/* Dialog und Meldungen */
dialog { border: 0; border-radius: 18px; padding: 0; width: min(480px, calc(100vw - 32px)); background: var(--card); color: var(--ink); }
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog form { padding: 20px; }
dialog .dlg-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 32px); }
.toast { background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: 420px; }
.toast.paid { background: #15803d; color: #fff; font-weight: 700; }
.toast.knock { background: #c2410c; color: #fff; font-weight: 700; }
.toast.err { background: #b91c1c; color: #fff; }

@media (max-width: 760px) {
  .top { padding: 6px 12px; }
  .brand span { display: none; }
  .tabs-main { order: 3; flex-basis: 100%; }
  .top-right { margin-left: auto; }
  main { padding: 12px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .t-num { font-size: 1.6rem; }
  .detail { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr auto; padding: 10px 12px; }
  .row .shop { grid-column: 1 / -1; justify-self: start; }
  .row .meta { grid-column: 1 / -1; }
  .tabs-main button { padding: 8px 10px; }
  .setgrid { grid-template-columns: 1fr; }
  .detail .actions .btn { flex: 1 1 45%; }
  .toasts { left: 16px; right: 16px; }
}

/* Gemeinsame Kundenakte und vorhandener Support */
#customerSearch, #supportSearch { width:100%; margin:12px 0; }
#customerList, #supportList { margin-top:16px; }
#customerDetail, #supportDetail { margin-top:24px; scroll-margin-top:90px; }
.case-text { white-space:pre-wrap; overflow-wrap:anywhere; }
.case-message { border-top:1px solid #e2e8f0; padding:14px 0; }

/* Private Teamnachrichten */
.team-compose{max-width:850px}.team-compose textarea{width:100%;box-sizing:border-box}
.team-messages{max-height:48vh;overflow:auto;display:flex;flex-direction:column;gap:12px;margin:18px 0}
.team-message{color:#0f172a;padding:12px 16px;background:#f1f5f9;border-radius:14px;max-width:88%;align-self:flex-start;overflow-wrap:anywhere}
.team-message.own{align-self:flex-end;background:#dbeafe}.team-message p{white-space:pre-wrap;margin:8px 0}
.team-message audio,#teamPreview{max-width:100%;width:320px}.team-message small{display:block;color:#475569}
#teamConnection{font-size:12px;white-space:nowrap}#teamSend{margin-top:14px}

/* Support-Arbeitsplatz: kompakte Fallliste und dauerhafte Detailansicht. */
.support-heading{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.support-heading>div{flex:1 1 300px}.support-heading p{margin:6px 0}
.support-tiles{grid-template-columns:repeat(6,minmax(0,1fr))}.support-tiles .t-num{font-size:1.65rem}
.support-filters select{flex:1 1 180px;width:auto}.support-workspace{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(350px,1.25fr);gap:18px;align-items:start}
.support-workspace #supportList{max-height:72vh;overflow:auto;padding-right:5px}.support-workspace #supportDetail{position:sticky;top:85px;max-height:76vh;overflow:auto}
.support-case{padding:14px;margin:0 0 10px;border-left:4px solid var(--line)}.support-case.is-unread{border-left-color:var(--primary);background:var(--soft)}.support-case.is-overdue{border-left-color:var(--red)}
.support-case-top,.support-case-foot{display:flex;gap:8px;justify-content:space-between;flex-wrap:wrap;font-size:.8rem}.support-case-title{display:block;text-align:left;background:none;color:var(--ink);border:0;padding:8px 0;font:inherit;font-weight:700;cursor:pointer;width:100%}.support-case-title:hover{color:var(--primary)}
.support-case p{margin:8px 0;font-size:.87rem;overflow-wrap:anywhere}.support-case small{display:block;margin-top:8px}.support-urgent{color:var(--orange);font-weight:600}
.support-board-editor{border-bottom:1px solid var(--line);padding:0 0 16px;margin-bottom:16px}.support-board-editor summary{font-weight:700;cursor:pointer}.support-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.support-board-editor p{font-size:.8rem}
#supportReminder{max-width:660px;width:calc(100% - 32px)}#supportReminderList{max-height:45vh;overflow:auto;margin:14px 0}.reminder-case{display:block;text-align:left;width:100%;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:12px;margin-bottom:8px;cursor:pointer}.reminder-case span{display:block;color:var(--muted);margin-top:4px}
@media(max-width:850px){.support-tiles{grid-template-columns:repeat(3,1fr)}.support-workspace{display:block}.support-workspace #supportList{max-height:50vh}.support-workspace #supportDetail{position:static;max-height:none}.support-meta-grid{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.support-meta-grid{grid-template-columns:1fr}.support-heading .btn{width:100%}.support-tiles .t-label{font-size:.75rem}}

/* Zahlungsabgleich */
.recon-mode { font-weight: 700; padding: 8px 12px; border-radius: 8px; margin-bottom: 8px; }
.recon-mode.dry { background: var(--orange-bg); color: var(--orange); }
.recon-mode.live { background: var(--green-bg); color: var(--green); }
.recon-cfg, .recon-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
table.recon { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--card); }
table.recon th, table.recon td { text-align: left; vertical-align: top; padding: 7px 8px; border-bottom: 1px solid var(--line); }
table.recon td.num { text-align: right; white-space: nowrap; font-weight: 700; }
table.recon tr.out td.num { color: var(--red); }
table.recon td.acts { white-space: nowrap; }
.recon-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.recon-search input { flex: 1 1 260px; min-width: 0; max-width: 560px; }
.recon-search input::-webkit-search-cancel-button { display: none; }   /* eigenes ✕ statt Browser-X */
.recon-search .btn { flex: 0 0 auto; }
.recon-search #reconQInfo { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
.recon-search #reconQInfo:empty { display: none; }

/* WhatsApp-Inbox */
.wa-grid{display:grid;grid-template-columns:minmax(240px,1fr) 2fr;gap:12px}
@media(max-width:800px){.wa-grid{grid-template-columns:1fr}}
.wa-item{display:block;width:100%;text-align:left;padding:8px;border:1px solid #ddd;border-radius:8px;margin-bottom:6px;background:#fff;cursor:pointer}
.wa-item.on{border-color:#25d366;background:#f0fff5}
.wa-msgs{max-height:55vh;overflow:auto;padding:6px;background:#f6f6f6;border-radius:8px}
.wa-msg{max-width:78%;padding:6px 9px;border-radius:8px;margin:4px 0;background:#fff;white-space:pre-wrap;word-break:break-word}
.wa-msg.out{margin-left:auto;background:#dcf8c6}
.wa-window{padding:6px 9px;border-radius:6px;margin:6px 0}
.wa-window.open{background:#e8f8ee}.wa-window.closed{background:#fdecea}

.wa-msg img.wa-img{max-width:260px;max-height:320px;border-radius:6px;display:block;margin:4px 0;cursor:zoom-in}
.wa-msg img.wa-sticker{width:120px;height:120px;object-fit:contain}
.wa-msg video{max-width:300px;max-height:320px;display:block;margin:4px 0}
.wa-msg audio{width:260px;display:block;margin:4px 0}
.wa-rec{color:#c00;font-weight:600}

/* ===== UX 2026-10-15: größere Hauptnavigation ===== */
.top { gap: 14px; padding: 10px 18px; }
.tabs-main { gap: 6px; scrollbar-width: thin; }
.tabs-main button { display: inline-flex; align-items: center; gap: 8px; font-size: 1.02rem; font-weight: 650;
  padding: 12px 16px; min-height: 48px; border-radius: 12px; color: var(--ink); opacity: .78;
  border-bottom: 3px solid transparent; transition: background .15s, opacity .15s; }
.tabs-main button i { font-style: normal; font-size: 1.2rem; line-height: 1; }
.tabs-main button:hover { background: var(--gray-bg); opacity: 1; }
.tabs-main button.on { background: var(--primary); color: var(--primary-ink); opacity: 1;
  box-shadow: 0 2px 8px rgba(29,78,216,.28); }
.tabs-main button.on .badge { background: #fff; color: var(--red); }
.tabs-main button:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
@media (max-width: 760px) {
  .tabs-main { flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .tabs-main button { flex-direction: column; gap: 3px; font-size: .86rem; padding: 8px 12px; min-height: 60px; min-width: 76px; }
  .tabs-main button i { font-size: 1.45rem; }
}

/* ===== Gemeinsamer Posteingang ===== */
.ui-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; align-items: center; }
.ui-filters .chip { font: inherit; font-weight: 600; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 99px; padding: 8px 14px; cursor: pointer; min-height: 40px; }
.ui-filters .chip b { margin-left: 4px; color: var(--muted); }
.ui-filters .chip.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.ui-filters .chip.on b { color: #fff; }
.ui-open { display: inline-flex; gap: 6px; align-items: center; margin: 0 0 0 8px; font-weight: 500; }
.ui-open input { width: auto; margin: 0; }
#uiSearch { margin-bottom: 12px; }
.ui-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 16px; align-items: start; }
#uiList { display: flex; flex-direction: column; gap: 8px; max-height: 75vh; overflow-y: auto; }
.ui-item { text-align: left; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.ui-item.unread { border-left-color: var(--red); }
.ui-item.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--soft); }
.ui-row1 { display: flex; justify-content: space-between; gap: 6px; align-items: center; flex-wrap: wrap; margin: 2px 0; }
.ui-title { font-size: .9rem; } .ui-prev { font-size: .88rem; }
.ch-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--gray-bg); }
.ch-wa { background: #dcfce7; color: #166534; } .ch-mail { background: #dbeafe; color: #1e40af; }
.ch-ig { background: #fce7f3; color: #9d174d; } .ch-fb { background: #e0e7ff; color: #3730a3; }
.ch-yt { background: #fee2e2; color: #991b1b; } .ch-tt { background: #e5e7eb; color: #111827; }
.ui-filters .chip.ch-wa, .ui-filters .chip.ch-mail, .ui-filters .chip.ch-ig, .ui-filters .chip.ch-fb, .ui-filters .chip.ch-yt, .ui-filters .chip.ch-tt { background: var(--card); color: var(--ink); }
.ui-filters .chip.on { background: var(--primary) !important; color: #fff !important; }
.ui-who { font-weight: 700; font-size: .8rem; margin-bottom: 2px; }
.ui-msgs { max-height: 60vh; overflow-y: auto; margin: 10px 0; }
.ui-soon { text-align: center; padding: 28px; }
@media (max-width: 860px) { .ui-grid { grid-template-columns: 1fr; } #uiList { max-height: none; } }

/* ===== WhatsApp-Vorlagen ===== */
.wa-tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wa-tpl-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.wa-tpl-table th, .wa-tpl-table td { text-align: left; border-bottom: 1px solid var(--line); padding: 6px; vertical-align: top; }
@media (max-width: 760px) { .wa-tpl-grid { grid-template-columns: 1fr; } }
/* Navigation in eigener Zeile, alle Punkte sichtbar */
.tabs-main { order: 3; flex: 1 1 100%; flex-wrap: wrap; overflow: visible; min-width: 0; }
.top-right { margin-left: auto; flex-wrap: wrap; align-items: center; min-width: 0; }
#teamConnection { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .tabs-main { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
  .top-right { gap: 4px; }
  .top-right .btn { padding: 6px 9px; min-height: 36px; font-size: .85rem; }
  #teamConnection { max-width: 100%; flex-basis: 100%; }
  html, body { overflow-x: hidden; }
}

/* ---- Lesbarkeit Hell/Dunkel (15.10.26): feste helle Flächen durch Theme-Farben ersetzen ---- */
:root { --bubble-in: #ffffff; --bubble-out: #dcf8c6; --thread-bg: #f6f6f6; --bubble-ink: #111827;
  --team-in: #f1f5f9; --team-own: #dbeafe; --item-bg: #ffffff; --item-on: #f0fff5; --item-line: #dddddd; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bubble-in: #1e293b; --bubble-out: #14532d; --thread-bg: #0f172a; --bubble-ink: #f1f5f9;
    --team-in: #1e293b; --team-own: #1e3a8a; --item-bg: #131c2e; --item-on: #0f2e1d; --item-line: #334155; }
  :root:not([data-theme="light"]) .wa-window.open { background: #0f2e1d; color: #bbf7d0; }
  :root:not([data-theme="light"]) .wa-window.closed { background: #3b1414; color: #fecaca; }
  :root:not([data-theme="light"]) .ch-wa { background: #14532d; color: #bbf7d0; }
  :root:not([data-theme="light"]) .ch-mail { background: #1e3a8a; color: #dbeafe; }
  :root:not([data-theme="light"]) .ch-ig { background: #831843; color: #fce7f3; }
  :root:not([data-theme="light"]) .ch-fb { background: #312e81; color: #e0e7ff; }
  :root:not([data-theme="light"]) .ch-yt { background: #7f1d1d; color: #fee2e2; }
  :root:not([data-theme="light"]) .ch-tt { background: #334155; color: #f1f5f9; }
  :root:not([data-theme="light"]) .case-message { border-top-color: var(--line); }
  :root:not([data-theme="light"]) a { color: #93c5fd; }
}
.wa-msgs, .ui-msgs { background: var(--thread-bg); color: var(--bubble-ink); }
.wa-msg { background: var(--bubble-in); color: var(--bubble-ink); }
.wa-msg.out { background: var(--bubble-out); color: var(--bubble-ink); }
.wa-msg .case-text, .wa-msg .ui-who { color: var(--bubble-ink); }
.wa-msg .muted { color: var(--muted); }
.team-message { background: var(--team-in); color: var(--ink); }
.team-message.own { background: var(--team-own); }
.wa-item { background: var(--item-bg); color: var(--ink); border-color: var(--item-line); }
.wa-item.on { background: var(--item-on); }
table.recon th, table.recon td { color: var(--ink); border-color: var(--line); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }

/* ---- Einheitlicher Posteingang Phase 1 (15.10.26) ---- */
.ui-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ui-sel { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; align-items: center; }
.ui-sel select { max-width: 220px; }
.chip.ui-alarm b { background: #dc2626; color: #fff; border-radius: 9px; padding: 0 6px; }
.ui-item.sla-red { border-left: 4px solid #dc2626; }
.ui-item.sla-yellow { border-left: 4px solid #d97706; }
.pill.sla.green { background: #dcfce7; color: #14532d; }
.pill.sla.yellow { background: #fef3c7; color: #78350f; }
.pill.sla.red { background: #fee2e2; color: #7f1d1d; font-weight: 700; }
.pill.purple { background: #ede9fe; color: #4c1d95; }
.ui-ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; font-size: 14px; }
.ui-lock { background: #ede9fe; color: #4c1d95; border-radius: 8px; padding: 6px 10px; margin: 4px 0; font-size: 14px; }
.ui-wa-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pill.sla.green { background: #14532d; color: #bbf7d0; }
  :root:not([data-theme="light"]) .pill.sla.yellow { background: #78350f; color: #fde68a; }
  :root:not([data-theme="light"]) .pill.sla.red { background: #7f1d1d; color: #fecaca; }
  :root:not([data-theme="light"]) .pill.purple, :root:not([data-theme="light"]) .ui-lock { background: #3b0764; color: #e9d5ff; }
}
.ui-ctl select, .ui-wa-row select { width: auto; max-width: 240px; min-width: 140px; display: inline-block; margin: 0; }
.ui-ctl button, .ui-wa-row button { width: auto; margin: 0; }
.ui-ctl .pill { white-space: nowrap; }

/* ---- Antwort-Vorschläge und Auto-Antworten (16.10.26): nur Theme-Variablen, hell und dunkel lesbar ---- */
.ki-card { border-left: 4px solid var(--primary); margin: 8px 0; }
.ki-sugg { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--gray-bg); color: var(--ink); border-radius: 10px; padding: 10px 12px; margin: 6px 0; }
.ki-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ki-row .btn, .ki-row .chip { margin: 0; }
.ki-rule textarea { width: 100%; }
.ki-days { margin: 6px 0; }
.ki-days label { display: inline-flex; gap: 4px; align-items: center; margin: 0 10px 0 0; font-weight: 500; }
.ki-days input { width: auto; margin: 0; }
.ki-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.ki-stats .tile { cursor: default; }
.btn.ki-hot { border-color: var(--orange); color: var(--orange); font-weight: 700; }
.pill.ki-auto { background: var(--blue-bg); color: var(--primary); margin-left: 6px; }

/* Abweichende Lieferadresse (Portal-Rechnung) */
.inv-check { display: flex; align-items: center; gap: 8px; }
.inv-check input { width: auto; margin: 0; }
.inv-ship { border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 12px 8px; margin: 0 0 .6em; min-width: 0;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; background: var(--card); color: var(--ink); }
.inv-ship[hidden] { display: none; }
.inv-ship legend { font-weight: 700; padding: 0 4px; color: var(--muted); }
.inv-ship label { margin: .4em 0; min-width: 0; }
@media (max-width: 600px) { .inv-ship { grid-template-columns: 1fr; } }

/* ---- Kopfzeile (16.10.26): Symbol für „Abmelden“ nur mobil; 2FA-Banner auf dem Desktop unverändert (Inline-Stil in security.js) ---- */
.top-ico-m { display: none; }
.support-reminder-bar { display: none; }   /* nur mobil sichtbar */

/* ---- Mobil Hochformat (iPhone 390 px, 16.10.26): nur hier, Desktop unverändert ---- */
@media (max-width: 700px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  *, *::before, *::after { box-sizing: border-box; }
  /* Kopfzeile: Zeile 1 Logo + Titel und vier Symbol-Buttons, Zeile 2 Präsenz, darunter das Navigationsraster.
     Safe-Area (viewport-fit=cover): Notch/Dynamic Island oben, Rundungen seitlich im Querformat */
  .top { position: static; display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 44px); gap: 6px 4px; align-items: center;
    max-width: 100%; padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left)); }
  .top-right { display: contents; }
  .brand { grid-column: 1; grid-row: 1; min-width: 0; }
  .brand span { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-right .btn.top-act { grid-row: 1; width: 44px; height: 44px; min-height: 44px; padding: 0; display: inline-flex;
    align-items: center; justify-content: center; font-size: 1.25rem; line-height: 1; border-radius: 12px; }
  .top-lbl { display: none; }
  .top-ico-m { display: inline; }
  #teamConnection { grid-column: 1 / -1; grid-row: 2; max-width: none; flex-basis: auto; font-size: .75rem; white-space: normal; }
  #teamConnection:empty { display: none; }
  .tabs-main { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr;
    gap: 6px; overflow: visible; min-width: 0; max-width: 100%; width: 100%; padding: 0; margin: 2px 0 0; }
  .tabs-main button { position: relative; flex-direction: column; justify-content: flex-start; align-items: center; gap: 4px;
    min-width: 0; min-height: 72px; height: 100%; padding: 8px 4px 6px; font-size: .72rem; line-height: 1.2; text-align: center;
    white-space: normal; overflow-wrap: anywhere; hyphens: manual; opacity: 1; color: var(--ink); background: var(--gray-bg);
    border: 1px solid var(--line); border-radius: 12px; }
  .tabs-main button i { font-size: 1.5rem; }
  .tabs-main button.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
  .tabs-main button .badge { position: absolute; top: 3px; right: 3px; font-size: .68rem; padding: 0 5px; }

  /* Banner: kompakt, volle Breite, Button unter dem Text */
  .problem { padding: 6px calc(12px + env(safe-area-inset-right)) 6px calc(12px + env(safe-area-inset-left)); font-size: .82rem; overflow-wrap: anywhere; }
  /* !important nur hier: überstimmt den Desktop-Inline-Stil aus security.js */
  .sec-banner { background: var(--orange-bg) !important; color: var(--orange) !important; flex-direction: column;
    align-items: stretch !important; gap: 6px !important; font-size: .85rem; text-align: left; max-width: 100%; overflow-wrap: anywhere;
    padding: 8px calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left)) !important; }
  .sec-banner .btn { width: 100%; margin: 0; }
  /* Support-Erinnerung (16.10.26): Banner unter dem Kachel-Menü statt Dialog */
  .support-reminder-bar:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; max-width: 100%;
    background: var(--orange-bg); color: var(--orange); font-size: .85rem; font-weight: 600; overflow-wrap: anywhere;
    padding: 8px calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left)); }
  .support-reminder-bar > span { flex: 1 1 100%; min-width: 0; }
  .srb-acts { display: flex; gap: 8px; flex: 1 1 100%; min-width: 0; }
  .srb-acts .btn { flex: 1 1 0; min-width: 0; margin: 0; }

  /* Touch-Ziele mind. 44 px; lange Beschriftungen umbrechen statt die Seite zu verbreitern */
  .btn, .chip, .ui-filters .chip, .tile, select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { min-height: 44px; }
  .btn { white-space: normal; }
  input[type="file"] { max-width: 100%; }
  img, video, audio, iframe, canvas, svg { max-width: 100%; }
  input, select, textarea { max-width: 100%; min-width: 0; }
  pre { white-space: pre-wrap; overflow-wrap: anywhere; }

  /* Keine horizontale Scrollbar: Raster-Spalten dürfen schmaler als ihr Inhalt werden */
  main { max-width: 100%; min-width: 0; padding: 12px calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); }
  main, .view, .card, .tile, .list, .order, .empty, details, fieldset, form, label { min-width: 0; max-width: 100%; }
  main, .view, .card, .tile, .empty, p, h1, h2, h3, label, li, td, th { overflow-wrap: anywhere; }
  .toolbar input, .inbox-item select, .support-filters select, .support-heading > div { flex-basis: 100%; min-width: 0; }
  .inbox-item { grid-template-columns: minmax(0, 1fr) auto; }
  .setgrid, .support-meta-grid, .wa-tpl-grid, #app .zr-grid { grid-template-columns: minmax(0, 1fr); }
  #app .zr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* #app: calls.css wird nach style.css geladen */
  .team-compose, .team-message, #teamPreview, .team-message audio, .wa-msg audio { max-width: 100%; }
  #teamConnection { max-width: 100%; }
  /* Breite Tabellen (ohne Kartenumbau) scrollen in sich statt die Seite zu verbreitern */
  table:not(.recon) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .toasts { left: calc(12px + env(safe-area-inset-left)); right: calc(12px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); max-width: none; }
  .toast { max-width: 100%; overflow-wrap: anywhere; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail, .ui-grid, .wa-grid { grid-template-columns: minmax(0, 1fr); }
  .ui-grid > *, .wa-grid > *, .support-workspace > *, .detail > *, .toolbar > *, .card { min-width: 0; }
  .row { grid-template-columns: minmax(0, 1fr) auto; }
  .ui-ctl select, .ui-wa-row select { min-width: 0; max-width: 100%; flex: 1 1 140px; }
  .ui-wa-row input { flex: 1 1 160px; width: auto; min-width: 0; }
  .ui-sel select { max-width: 100%; }
  .recon-cfg > *, .recon-filter > * { max-width: 100%; }
  .recon-search input { flex: 1 1 0; max-width: none; width: 100%; }
  .ki-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ki-days label { margin-right: 8px; }
  .support-heading > div { flex-basis: 100%; }
  .wa-msg img.wa-img, .wa-msg video { max-width: 100%; }

  /* Tabellen (Zahlungsabgleich, Auto-Antworten, Sicherheit, Kundenzuordnung) als Karten; Spaltennamen aus data-label (app.js) */
  table.recon, table.recon tbody, table.recon tr, table.recon td { display: block; width: 100%; }
  table.recon { background: transparent; }
  table.recon thead, table.recon tr.rt-head { display: none; }
  table.recon tr { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; margin: 0 0 8px; }
  table.recon td { border: 0; padding: 3px 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  table.recon td.num, table.recon td.acts { text-align: left; white-space: normal; }
  table.recon td:empty { display: none; }
  table.recon td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 700;
    color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
  table.recon td .btn { margin: 4px 4px 0 0; }

  /* Dialoge (Sicherheit, Rechnung) */
  dialog form { padding: 14px; }
  dialog .dlg-actions .btn { flex: 1 1 100%; }
  #secDlg { padding: 14px; }
  #invLines .inv-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto 44px; }
  #invLines .inv-line .li-item { grid-column: 1 / -1; }
  #invLines .inv-line .btn { padding: 0; }
  .inv-lines-foot { flex-wrap: wrap; gap: 8px; }
}

/* Versand-Vorschau Rechnung/Storno/Angebot (16.10.26): breiter Dialog, lesbar in Hell/Dunkel und mobil */
#dlg:has(.mail-preview) { width: min(860px, calc(100vw - 16px)); }
.mail-preview p { overflow-wrap: anywhere; }
.mail-preview .mail-body { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 14px; line-height: 1.45;
  background: var(--soft); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  max-height: 32vh; overflow: auto; margin: 8px 0; }
.mail-preview .pdf-preview { display: block; width: 100%; height: 55vh; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; }
@media (max-width: 760px) {
  #dlg:has(.mail-preview) { width: calc(100vw - 8px); max-height: calc(100dvh - 8px); }
  .mail-preview .pdf-preview { height: 40vh; }
}
/* 17.10.2026 WhatsApp-Sprachnachrichten im Posteingang */
.wa-msg audio.ui-audio { width: 260px; max-width: 100%; display: block; margin: 4px 0; }
.ui-voice { padding: 6px 8px; border: 1px dashed var(--line); border-radius: 8px; }
.ui-voice audio.ui-audio { width: 260px; max-width: 100%; height: 40px; }

/* Handy: Eingabefelder mindestens 16px. Sonst zoomt Safari (iPhone) beim Antippen hinein und die Seite bleibt
   danach größer als der Bildschirm. Zusätzlich keine seitliche Verschiebung der ganzen Seite. */
@media (max-width: 900px) {
  input, select, textarea { font-size: 16px !important; }
  html, body { max-width: 100%; overflow-x: hidden; }
}

/* Portal workspace, 2026-10-18: full-width canvas, clear navigation, safe areas. */
:root.portal-modern {
 --bg:#09111f; --card:#111e31; --ink:#eef5ff; --muted:#a6b8cf; --line:#293b53;
 --primary:#65dded; --primary-ink:#07202b; --soft:#15374a;
 --green:#6ee7b7; --green-bg:#103629; --orange:#ffc68b; --orange-bg:#3d2a18;
 --red:#ffaaa8; --red-bg:#42232b; --blue-bg:#193352; --gray-bg:#192a40;
 --radius:18px; --shadow:0 8px 26px #0002; color-scheme:dark;
}
.portal-modern body {background:radial-gradient(ellipse at 70% 0,#12344566,transparent 60%),var(--bg);min-height:100dvh;}
.portal-modern #app {min-height:100dvh;}
.portal-modern #app > main {width:100%;max-width:1800px;padding:28px clamp(16px,3vw,48px) calc(30px + env(safe-area-inset-bottom));}
.portal-modern .top {background:#0d1829ed;backdrop-filter:blur(20px);padding:calc(12px + env(safe-area-inset-top)) 20px 12px;gap:14px;}
.portal-modern .brand {letter-spacing:.03em;min-width:0;}
.portal-modern .top-right {align-items:center;flex-wrap:wrap;min-width:0;}
.portal-modern .top-act {min-height:44px;border-radius:13px;}
.portal-modern .tabs-main {gap:7px;}
.portal-modern .tabs-main button {color:var(--muted);min-height:46px;transition:background .15s,color .15s;}
.portal-modern .tabs-main button.on {color:var(--primary);background:linear-gradient(100deg,#16516a66,#13364a);box-shadow:inset 3px 0 var(--primary);}
.portal-modern .tabs-main button:hover {background:var(--soft);}
.portal-modern .tile {border:1px solid var(--line);background:linear-gradient(145deg,#192c44,#101d2f);padding:20px;gap:8px;}
.portal-modern .tile.on {border-color:var(--primary);box-shadow:0 0 0 1px #65dded44,0 10px 32px #0002;}
.portal-modern .t-num {font-size:clamp(28px,3vw,42px);font-weight:700;letter-spacing:-.04em;}
.portal-modern .card {border-color:var(--line);box-shadow:var(--shadow);}
.portal-modern .btn:focus-visible,.portal-modern button:focus-visible,.portal-modern input:focus-visible {outline:2px solid var(--primary);outline-offset:3px;}
.portal-modern .btn.green {background:#145841;color:#d7ffeb;border-color:#308564;}
.portal-modern .toolbar {gap:12px;margin:24px 0 12px;}
.portal-modern .list-title {margin-top:20px;}
.portal-modern #appDlBar {display:none!important;}
.portal-native #appDlBtn {display:none;}
#portalNetwork {font-size:12px;color:var(--orange);}
#portalDeviceSetup {width:min(440px,calc(100vw - 32px));max-height:85dvh;overflow:auto;background:#13243a;color:#eef5ff;border:1px solid #386079;border-radius:26px;padding:28px;box-shadow:0 30px 100px #0008;}
#portalDeviceSetup::backdrop {background:#020817b8;backdrop-filter:blur(8px);}
#portalDeviceSetup p {line-height:1.6;}
#portalDeviceSetup .device-icon {width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:#1c4857;color:#77e4f1;font-size:30px;margin-bottom:20px;}
#portalDeviceSetup .device-actions {display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;}
#portalDeviceSetup .device-push {margin-top:12px;width:100%;white-space:normal;}
#portalDeviceSetup .device-result {font-size:14px;color:#8ce3cc;}
@media(min-width:1100px) {
 .portal-modern #app {padding-left:224px;}
 /* backdrop-filter auf .top erzeugt einen Containing Block: position:fixed der Sidebar
    hing dann bei left:224px über dem Inhalt statt am Viewport-Rand (Desktop abgeschnitten). */
 .portal-modern .top {min-height:80px;justify-content:space-between;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none;filter:none;}
 .portal-modern .tabs-main {position:fixed;left:0;top:0;bottom:0;width:224px;height:100dvh;padding:96px 14px 24px;flex-direction:column;overflow:auto;background:#0b1626;border-right:1px solid var(--line);z-index:20;}
 .portal-modern .tabs-main::before {content:'TAVOLON / TEAM';position:absolute;top:28px;left:23px;font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--primary);}
 .portal-modern .tabs-main button {width:100%;text-align:left;display:flex;align-items:center;gap:12px;white-space:normal;flex-shrink:0;}
 .portal-modern .tabs-main button i {font-style:normal;}
 .portal-modern .top-lbl {display:none;}
 .portal-modern .top-act {width:44px;padding:10px;display:grid;place-items:center;}
 .portal-modern .top-ico-m {display:inline;}
}
@media(max-width:1099px) {
 .portal-modern .top {display:flex;flex-wrap:wrap;align-items:center;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));}
 .portal-modern .brand {order:0;flex:1;}
 .portal-modern .top-right {order:1;gap:4px;}
 .portal-modern .top-lbl {display:none;}
 .portal-modern .top-act {width:40px;min-width:40px;min-height:44px;padding:8px;display:grid;place-items:center;}
 .portal-modern .top-ico-m {display:inline;}
 .portal-modern .tabs-main {order:2;display:flex!important;flex-wrap:nowrap;flex-direction:row;flex:1 0 100%;width:100%;overflow-x:auto;scrollbar-width:thin;padding:4px 0;position:static;}
 .portal-modern .tabs-main button {display:flex;align-items:center;gap:7px;flex:0 0 auto;min-width:unset;max-width:none;padding:10px 14px;font-size:13px;white-space:nowrap;border-radius:12px;}
 .portal-modern .tabs-main button i {font-size:17px;font-style:normal;}
 .portal-modern .tabs-main button span {font-size:13px;line-height:1.3;}
 .portal-modern #app > main {padding:18px 14px calc(24px + env(safe-area-inset-bottom));}
 .portal-modern .tiles {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
 .portal-modern .tile {padding:15px;}
 .portal-modern #teamConnection {display:none;}
 .portal-modern #supportSoundTest {display:none;}
}
@media(max-width:600px) {
 .portal-modern .top {position:sticky;gap:8px;}
 .portal-modern .brand {width:100%;flex-basis:100%;justify-content:center;}
 .portal-modern .top-right {width:100%;justify-content:center;}
 .portal-modern .toolbar input {min-width:0;flex-basis:100%;font-size:16px;}
 .portal-modern .toolbar .btn {white-space:normal;}
 .portal-modern .t-label {font-size:12px;}
 .portal-modern .t-sub {font-size:11px;}
 .portal-modern input,.portal-modern select,.portal-modern textarea {font-size:16px;}
}
@media(prefers-reduced-motion:reduce) {.portal-modern * {scroll-behavior:auto!important;transition:none!important;}}

/* WA-Composer Desktop: großer Chatverlauf + kompakter Composer (19.10.2026 v5).
   Nachrichten mind. ~55vh; Steuerung/KI standardmäßig eingeklappt; Composer unten kompakt. */
@media (min-width: 1100px) {
  .portal-modern #view-unified:not([hidden]) {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 92px);
    max-height: calc(100dvh - 92px);
    min-height: 0;
    overflow: hidden;
  }
  .portal-modern body:has(#view-unified:not([hidden])) #app > main {
    padding-top: 10px;
    padding-bottom: 6px;
  }
  .portal-modern #view-unified > .support-heading { display: none; } /* Platz für Chatverlauf */
  .portal-modern #view-unified > #uiFilters,
  .portal-modern #view-unified > .ui-filters {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0 0 2px;
  }
  /* 19.10.2026 meine1: Tabs (inkl. „👤 Meine“) immer eine sichtbare, horizontal scrollbare Zeile */
  .portal-modern #view-unified .ui-tabs,
  .portal-modern #view-unified .ui-sel {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 4px;
    margin: 0;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }
  .portal-modern #view-unified .ui-tabs .chip { flex: 0 0 auto; white-space: nowrap; min-height: 28px; padding: 2px 10px; }
  .portal-modern #view-unified .ui-tabs .chip[data-ui-tab="meine"] { order: -2; }
  .portal-modern #view-unified .ui-tabs .chip[data-ui-tab="erledigt"] { order: -1; } /* meine2 */
  .portal-modern #view-unified .ui-sel select,
  .portal-modern #view-unified .ui-sel .btn { flex: 0 0 auto; min-height: 28px; height: 28px; padding: 2px 8px; font-size: 12px; }
  .portal-modern #uiThread .ui-assign { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0; font-size: 12px; }
  .portal-modern #uiThread .ui-assign select,
  .portal-modern #uiThread .ui-assign .btn { min-height: 28px; height: 28px; padding: 2px 8px; font-size: 12px; }
  .portal-modern #uiThread .ui-assign .btn.ui-done { border-color: var(--primary); font-weight: 700; } /* meine2 */
  .portal-modern #view-unified > #uiSearch {
    display: none; /* Desktop: Filter-Chips reichen; gibt dem Chatverlauf Höhe */
  }
  .portal-modern #view-unified > #uiWarn { flex: 0 0 auto; }
  .portal-modern #view-unified > .ui-grid {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    margin-top: 4px;
    gap: 12px;
  }
  .portal-modern #uiList {
    max-height: none;
    height: 100%;
    overflow: auto;
  }
  .portal-modern #uiThread {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .portal-modern #uiThread > .card:first-child {
    flex: 1 1 auto;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 0;
    position: relative;
    padding-bottom: 0;
  }
  /* Kopfzeile im Thread (Badge/Titel/Fenster) kompakt */
  .portal-modern #uiThread > .card:first-child > h3 { margin: 0 0 2px; font-size: 1rem; padding-right: 9rem; }
  .portal-modern #uiThread > .card:first-child > .wa-window { margin: 0 0 2px; padding: 4px 8px; font-size: 12px; }
  .portal-modern #uiThread > .card:first-child > .ch-badge { margin-bottom: 2px; }
  /* :first-child am .card ist fragil (Whitespace) – deshalb ohne first-child-Kette */
  .portal-modern #uiThread .card > .ui-nextbar:first-child { display: none !important; }
  .portal-modern #uiThread .card > .ui-nextbar:last-child {
    position: absolute;
    right: 8px;
    top: 6px;
    margin: 0 !important;
    z-index: 4;
  }
  .portal-modern #uiThread .card > .ui-nextbar:last-child .btn {
    min-height: 28px;
    padding: 3px 9px;
    font-size: 12px;
  }

  /* Steuerung: eingeklappt = eine Zeile Summary */
  .portal-modern #uiThread details.ui-meta {
    flex: 0 0 auto;
    margin: 4px 0 2px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--gray-bg);
  }
  .portal-modern #uiThread details.ui-meta > summary {
    cursor: pointer;
    list-style: none;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    user-select: none;
  }
  .portal-modern #uiThread details.ui-meta > summary::-webkit-details-marker { display: none; }
  .portal-modern #uiThread details.ui-meta > summary::before {
    content: "▸ ";
    color: var(--primary);
  }
  .portal-modern #uiThread details.ui-meta[open] > summary::before { content: "▾ "; }
  .portal-modern #uiThread details.ui-meta .ui-ctl {
    max-height: none;
    padding: 0 10px 8px;
    margin: 0;
  }

  /* Chatverlauf füllt den Rest der Karte; Composer bleibt durch flex sichtbar */
  .portal-modern #uiThread .ui-msgs,
  .portal-modern #uiThread .wa-msgs.ui-msgs {
    flex: 1 1 auto;
    min-height: 0; /* wichtig: sonst kein echtes Schrumpfen im Flex */
    max-height: none !important;
    overflow-y: auto;
    margin: 4px 0;
  }

  /* KI-Vorschlag eingeklappt */
  .portal-modern #uiThread details.ui-ki {
    flex: 0 0 auto;
    margin: 0 0 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--soft);
  }
  .portal-modern #uiThread details.ui-ki > summary {
    cursor: pointer;
    list-style: none;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    user-select: none;
  }
  .portal-modern #uiThread details.ui-ki > summary::-webkit-details-marker { display: none; }
  .portal-modern #uiThread details.ui-ki > summary::before { content: "▸ "; color: var(--primary); }
  .portal-modern #uiThread details.ui-ki[open] > summary::before { content: "▾ "; }
  .portal-modern #uiThread details.ui-ki .ki-card { margin: 0; border: 0; box-shadow: none; }
  .portal-modern #uiThread #uiKi:empty { display: none; }

  /* Composer kompakt, Textfeld wächst bis ~5 Zeilen */
  .portal-modern #uiThread .acts {
    flex: 0 0 auto;
    z-index: 3;
    margin-top: auto;
    padding: 4px 8px 5px;
    border-top: 2px solid var(--primary);
    border-radius: 0 0 14px 14px;
    background: linear-gradient(180deg, #15374a99, var(--card));
    box-shadow: none;
  }
  .portal-modern #uiThread .acts::before {
    content: "Antwort schreiben";
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 3px;
  }
  .portal-modern #uiThread .acts #uiReply {
    min-height: 2.2rem;
    max-height: 7.5rem; /* ~5 Zeilen, wächst per JS fitReply */
    padding: 5px 10px;
    resize: none;
    margin: 0;
    overflow-y: auto;
    field-sizing: content;
  }
  .portal-modern #uiThread .acts .ui-wa-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    align-items: center;
    min-height: 0;
  }
  .portal-modern #uiThread .acts .ui-wa-row .btn,
  .portal-modern #uiThread .acts .ui-wa-row select,
  .portal-modern #uiThread .acts .ui-wa-row input[type="text"],
  .portal-modern #uiThread .acts .ui-wa-row #uiTplParams {
    min-height: 30px;
    height: 30px;
    padding: 2px 8px;
    margin: 0;
    flex: 0 0 auto;
  }
  .portal-modern #uiThread .acts #uiFile {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
  }
  .portal-modern #uiThread .acts #uiTplParams { flex: 1 1 7rem; min-width: 0; width: auto; }
  .portal-modern #uiThread .acts #uiTpl { max-width: 11rem; }
  .portal-modern #uiThread #uiCust { display: none; }
}

/* Kurze Desktop-Fenster (z. B. 1366×768): maximaler Chatanteil */
@media (min-width: 1100px) and (max-height: 900px) {
  .portal-modern #view-unified:not([hidden]) {
    height: calc(100dvh - 84px);
    max-height: calc(100dvh - 84px);
  }
  .portal-modern #view-unified > #uiFilters,
  .portal-modern #view-unified > .ui-filters { margin-bottom: 0; }
  .portal-modern #uiThread > .card > .wa-window {
    font-size: 11px;
    padding: 2px 8px;
    margin: 0 0 2px;
  }
  .portal-modern #uiThread details.ui-meta > summary,
  .portal-modern #uiThread details.ui-ki > summary { padding: 3px 8px; }
  .portal-modern #uiThread .acts #uiReply { min-height: 2rem; max-height: 5.5rem; }
  .portal-modern #uiThread .acts { padding: 3px 6px 4px; }
}
@media (min-width: 1100px) and (max-height: 780px) {
  /* meine1: nur die Auswahllisten ausblenden – Tabs (inkl. „Meine“) bleiben */
  .portal-modern #view-unified .ui-sel { display: none; }
}


/* Native navigation already supplies module title and close control. */
.portal-embedded #app {padding-left:0;}
.portal-embedded #app > .top,.portal-embedded #supportReminderBar {display:none!important;}
.portal-embedded #app > main {padding-top:18px;}

/* 18.10.2026 Posteingang-Übersicht: > 24 h unbeantwortet rot, erkannte Anfragen, Warnhinweis Entwurf */
.ui-item.ui-late { border: 2px solid #dc2626; border-left: 6px solid #dc2626; background: #fef2f2; }
.ui-late-txt { color: #b91c1c; font-weight: 700; font-size: .85rem; }
.ui-item.ui-req:not(.ui-late) { border-left: 6px solid #ea580c; }
.ki-warn { background: #fff7ed; color: #9a3412; border-radius: 8px; padding: 6px 10px; margin: 6px 0; font-size: 14px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ui-item.ui-late { background: #450a0a; }
  :root:not([data-theme="light"]) .ui-late-txt { color: #fca5a5; }
  :root:not([data-theme="light"]) .ki-warn { background: #431407; color: #fed7aa; }
}
:root[data-theme="dark"] .ui-item.ui-late { background: #450a0a; }
:root[data-theme="dark"] .ui-late-txt { color: #fca5a5; }
:root[data-theme="dark"] .ki-warn { background: #431407; color: #fed7aa; }

/* 18.10.2026 (2): Kommentare/Bewertungen */
.ch-cm { background: #fef3c7; color: #92400e; }
:root[data-theme="dark"] .ch-cm { background: #451a03; color: #fde68a; }

/* Plattform-Badges Kommentare (18.10.2026) */
.pf-badge{display:inline-flex;align-items:center;gap:.3em;padding:.1em .6em .1em .15em;border-radius:999px;background:var(--pf,#6b7280);color:#fff;font-weight:600;font-size:.8em;line-height:1.5;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pf-badge .pf-ic{display:inline-flex;align-items:center;justify-content:center;min-width:1.4em;height:1.4em;border-radius:50%;background:rgba(255,255,255,.25);font-size:.95em}
.pf-badge .pf-acc{font-weight:400;opacity:.95}.pf-badge .pf-acc::before{content:"· "}
.pf-badge.big{font-size:.95em;padding:.2em .75em .2em .2em}
.pf-head{display:flex;gap:.6em;align-items:center;flex-wrap:wrap;margin:.1em 0 .5em}
.pf-link{display:inline-block;font-size:.8em;color:#2563eb;text-decoration:underline;cursor:pointer;margin:.1em 0}