/* waerchzueg.ch CRM – Stylesheet im CI */
:root {
  --dark: #415466; --mid: #83a9cc; --ice: #a4d4ff; --light: #f0f8ff; --navy: #13294b;
  --ink: #000; --text: #333; --muted: #6b7a88; --line: #d6e4f0; --white: #fff;
  --font: Bahnschrift, 'Barlow', 'Roboto Condensed', Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font: 15px/1.45 var(--font); color: var(--text); background: var(--light); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--dark); }
h1, h2, h3 { font-family: var(--font); text-transform: uppercase; letter-spacing: .04em; color: var(--ink); margin: 0 0 12px; font-weight: 700; }
h1 { font-size: 22px; } h2 { font-size: 16px; } h3 { font-size: 14px; color: var(--dark); }

/* Kopf */
.top { background: var(--dark); color: #fff; }
.top-inner { max-width: 1200px; margin: 0 auto; padding: 8px 20px; display: flex; align-items: center; gap: 28px; }
body.wide .top-inner, body.wide .main { max-width: 1500px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.brand img { height: 52px; width: auto; display: block; }
.brand-app { font-weight: 700; letter-spacing: .12em; font-size: 15px; border-left: 1px solid rgba(255,255,255,.35); padding-left: 12px; }
.nav { display: flex; gap: 6px; flex: 1; }
.nav a { color: #fff; text-decoration: none; padding: 7px 12px; border-radius: 6px; text-transform: uppercase; letter-spacing: .05em; font-size: 13px; font-weight: 700; }
.nav a:hover, .nav a.active { background: rgba(255,255,255,.14); }
.user { display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--ice); }
.user a { color: #fff; }

.main { max-width: 1200px; width: 100%; margin: 0 auto; padding: 22px 20px 40px; flex: 1; }
.foot { background: var(--dark); color: #fff; font-size: 12px; padding: 12px 20px; text-align: center; }
.foot .ver { margin-left: 14px; color: var(--ice); }

/* Bausteine */
.card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; }
.card h2 { margin-bottom: 12px; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt { margin-top: 14px; }
.notice { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; border: 1px solid var(--mid); background: #fff; }
.notice.ok { background: #fff; border-color: var(--mid); }
.notice.error { background: #fff; border-color: var(--navy); color: var(--navy); font-weight: 700; }
.notice.info { background: var(--ice); border-color: var(--ice); color: var(--ink); }

label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
input[type=text], input[type=password], input[type=email], input[type=search], input[type=number], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid #b9cbdc; border-radius: 6px; font: inherit; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ice); border-color: var(--mid); }
.btn { display: inline-block; padding: 9px 16px; border: 1px solid var(--dark); border-radius: 6px; background: var(--dark); color: #fff; font: inherit; font-weight: 700; letter-spacing: .03em; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--navy); border-color: var(--navy); }
.btn.secondary { background: #fff; color: var(--dark); }
.btn.secondary:hover { background: var(--light); }
.btn.small { padding: 5px 10px; font-size: 13px; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .03em; border: 1px solid transparent; vertical-align: middle; }
.badge.shop { background: var(--mid); color: #fff; }
.badge.laden { background: var(--dark); color: #fff; }
.badge.ok { background: var(--ice); color: var(--ink); }
.badge.paid { background: var(--light); color: var(--dark); border-color: var(--mid); }
.badge.open { background: #fff; color: var(--dark); border-color: var(--dark); }
.badge.muted { background: var(--light); color: var(--muted); }
.badge.b2b { background: var(--navy); color: #fff; }
.score { display: inline-block; min-width: 56px; text-align: center; padding: 3px 8px; border-radius: 6px; font-weight: 700; }
.score.ok { background: var(--dark); color: #fff; }
.score.mid { background: var(--mid); color: #fff; }
.score.low { background: var(--light); color: var(--dark); border: 1px solid var(--mid); }

table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--dark); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
tbody tr:nth-child(even) { background: var(--light); }
tbody tr:hover { background: #e4f1ff; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.link { cursor: pointer; }
.table-wrap { overflow: auto; }

/* Suche */
.search { display: flex; gap: 10px; align-items: center; }
.search input { font-size: 17px; padding: 12px 14px; }
.search .btn { padding: 12px 18px; }

/* Kundenseite */
.cust-head { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .cust-head { grid-template-columns: 1fr; } }
.cust-name { font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); line-height: 1.2; }
.cust-firma { font-size: 16px; color: var(--dark); font-weight: 700; }
.kv { margin: 0; }
.kv div { display: flex; gap: 10px; padding: 3px 0; }
.kv dt { color: var(--muted); min-width: 90px; font-size: 13px; padding-top: 2px; }
.kv dd { margin: 0; }
.stats { display: flex; gap: 14px; flex-wrap: wrap; }
.stat { background: var(--light); border-radius: 8px; padding: 10px 14px; min-width: 110px; flex: 1 1 110px; }
.stat b { display: block; font-size: 20px; color: var(--ink); }
.stat span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.note-box { background: var(--light); border-left: 4px solid var(--ice); padding: 10px 12px; border-radius: 6px; white-space: pre-wrap; font-size: 14px; }

.timeline { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.timeline:before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--mid); }
.tl-item { position: relative; margin-bottom: 12px; }
.tl-item:before { content: ''; position: absolute; left: -21px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--dark); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--mid); }
.tl-item.open:before { background: #fff; }
.tl-item details { background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.tl-item summary { list-style: none; cursor: pointer; padding: 10px 14px; display: grid; grid-template-columns: 90px 1fr auto auto; gap: 14px; align-items: center; }
.tl-item summary::-webkit-details-marker { display: none; }
.tl-item summary:hover { background: var(--light); }
.tl-title { font-weight: 700; color: var(--ink); }
.tl-sub { font-size: 13px; color: var(--muted); }
.tl-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-body { padding: 0 14px 12px; }
.tl-body table { font-size: 13px; }
.tl-body thead th { background: var(--light); color: var(--dark); }
.tl-date { font-weight: 700; color: var(--dark); font-variant-numeric: tabular-nums; }

/* Login */
.login { max-width: 420px; margin: 50px auto; }
.login .card { padding: 30px; }
.login img { width: 240px; display: block; margin: 0 auto 18px; }

/* Einstellungen */
pre.log { background: var(--navy); color: #e8f1fb; padding: 12px 14px; border-radius: 8px; font-size: 12.5px; overflow: auto; max-height: 320px; white-space: pre-wrap; }
code { background: var(--light); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.kpis { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.main > .kpis .stat { background: #fff; border: 1px solid var(--line); }

/* Mails */
.mail-card { padding: 12px 16px; margin-bottom: 10px; }
.mail-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mail-who { flex: 1; min-width: 200px; }
.mail-cust { min-width: 260px; position: relative; }
.mail-body summary { cursor: pointer; padding: 8px 0 2px; list-style: none; }
.mail-body summary::-webkit-details-marker { display: none; }
.mail-text { white-space: pre-wrap; background: var(--light); border-radius: 8px; padding: 10px 12px; font-size: 13.5px; max-height: 420px; overflow: auto; margin-top: 8px; }
.assign { position: relative; }
.assign-q { width: 100%; padding: 6px 9px; font-size: 13px; }
.assign-list { position: absolute; z-index: 20; left: 0; right: 0; background: #fff; border: 1px solid var(--mid); border-radius: 6px; box-shadow: 0 6px 18px rgba(65,84,102,.18); display: none; max-height: 260px; overflow: auto; }
.assign-list div { padding: 6px 10px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--line); }
.assign-list div:hover { background: var(--light); }
.assign-list .muted { font-size: 12px; }
.tl-item.mail:before { background: var(--mid); }

/* Anruf-Banner */
.call-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 0 16px 12px; pointer-events: none; }
.call-banner .call { pointer-events: auto; max-width: 1500px; margin: 8px auto 0; background: var(--navy); color: #fff; border-radius: 14px; padding: 14px 16px; display: grid; grid-template-columns: 1.1fr 1.3fr 1.6fr auto; gap: 12px; align-items: stretch; box-shadow: 0 14px 40px rgba(19,41,75,.45); animation: wz-ring .6s ease-in-out 3; }
.call-banner .call a { color: #fff; }
.call-banner .call-box { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 10px 14px; min-width: 0; }
.call-banner .call-box-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ice); margin-bottom: 4px; }
.call-banner .call-who { background: #fff; color: var(--ink); border: 0; }
.call-banner .call-who a { color: var(--navy); }
.call-banner .call-name { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.call-banner .call-sub { font-size: 15px; margin-top: 4px; color: var(--dark); }
.call-banner .call-num { font-size: 16px; margin-top: 4px; font-weight: 600; }
.call-banner .call-cands { font-size: 13px; margin-top: 4px; }
.call-banner .call-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-right: 4px; vertical-align: 2px; }
.call-banner .call-badge.cust { background: #d9f2dc; color: #1e6b2b; }
.call-banner .call-badge.new { background: #ffd9d9; color: #8a1f1f; }
.call-banner .call-why-text { font-size: 19px; font-weight: 700; line-height: 1.3; }
.call-banner .call-summary .call-line { font-size: 15px; line-height: 1.35; padding: 2px 0; border-top: 1px solid rgba(255,255,255,.12); }
.call-banner .call-summary .call-line:first-of-type { border-top: 0; }
.call-banner .call .muted { color: var(--ice); }
.call-banner .call-actions { display: flex; flex-direction: column; gap: 8px; justify-content: center; align-items: stretch; }
.call-banner .call-actions .call-take { font-size: 18px; padding: 12px 20px; background: #2e9e4f; border-color: #2e9e4f; text-decoration: none; text-align: center; }
.call-banner .call-actions .call-take:hover { background: #27893f; }
.call-banner .call-actions .btn.secondary { text-align: center; color: var(--navy); background: #fff; }
@media (max-width: 1100px) { .call-banner .call { grid-template-columns: 1fr 1fr; } .call-banner .call-actions { flex-direction: row; grid-column: 1 / -1; } }
.call-icon { font-size: 22px; }
.call-close { background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 6px; width: 32px; height: 32px; cursor: pointer; font-size: 18px; }
@keyframes wz-ring { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
a.stat { text-decoration: none; color: inherit; }
a.stat:hover { background: var(--ice); }

/* WhatsApp */
.badge.wa { background: #e6f4ea; color: #1b5e20; border-color: #b7dfc0; }
.wa-thread { display: flex; flex-direction: column; gap: 6px; max-width: 760px; }
.wa-day { text-align: center; font-size: 12px; color: var(--muted); margin: 8px 0 2px; }
.wa-msg { max-width: 78%; padding: 8px 12px; border-radius: 12px; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.wa-msg.them { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.wa-msg.me { align-self: flex-end; background: var(--ice); border-bottom-right-radius: 4px; }
.wa-meta { font-size: 11px; color: var(--muted); margin-top: 3px; text-align: right; }
.tl-item.wa:before { background: #2e7d32; }
.wa-att { display: block; margin-bottom: 6px; }
.wa-att img { max-width: 320px; max-height: 320px; border-radius: 8px; display: block; }
.wa-att video { max-width: 320px; border-radius: 8px; display: block; }
.wa-att audio { width: 280px; display: block; }

/* ---- 0.4.0: Chat-Dashboard, Composer, Panel, Übersetzung, Zuständigkeit ---- */
.wa-msg { white-space: normal; }
.wa-text { white-space: pre-wrap; }
.wa-msg.note { align-self: center; max-width: 90%; background: #fff8dc; border: 1px dashed #d9c47a; color: #5b4a00; font-size: 13.5px; }
.wa-note-head { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #8a6d00; font-weight: 700; margin-bottom: 3px; }
.wa-msg.deleted { opacity: .75; }
.wa-deleted { font-style: italic; color: var(--navy); font-size: 13px; }
.wa-msg.deleted .wa-text { text-decoration: line-through; }
.translation { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--mid); color: var(--dark); font-size: 13px; white-space: pre-wrap; }
.translation-label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
.translation-inline { color: var(--dark); font-style: italic; }
.badge.lang { background: var(--navy); color: #fff; }
.badge.vm { background: #fff3e0; color: #8a4b00; border-color: #f0c48a; }
.badge.call { background: #fde7e7; color: #8a1c1c; border-color: #f0a8a8; }
.ai-ready { color: #6a4c93; }
.ai-hint { background: #f3eefb; border: 1px solid #d9cdee; color: #4b2f7a; border-radius: 8px; padding: 6px 10px; font-size: 13px; margin-bottom: 6px; }
.ai-hint.muted { background: var(--light); border-color: var(--line); color: var(--muted); }
.linklike { background: none; border: 0; padding: 0; color: var(--dark); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; }
a.plain { text-decoration: none; color: inherit; display: block; }

.chat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.chat-layout.side-hidden { grid-template-columns: minmax(0, 1fr); }
.chat-layout.side-hidden .chat-side { display: none; }
@media (max-width: 1000px) { .chat-layout { grid-template-columns: 1fr; } .chat-side { order: 2; } }
.chat-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: calc(100vh - 128px); min-height: 520px; }
.chat-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #fff; flex-wrap: wrap; }
.chat-title { font-size: 18px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .03em; }
.chat-scroll { flex: 1 1 auto; min-height: 140px; overflow-y: auto; padding: 10px 16px; background: var(--light); display: flex; flex-direction: column; gap: 4px; scroll-behavior: auto; }
.chat-scroll .wa-day { position: sticky; top: 0; z-index: 1; margin: 6px 0; }
.chat-scroll .wa-day span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.chat-scroll .wa-msg { max-width: 86%; box-shadow: 0 1px 1px rgba(0,0,0,.05); padding: 5px 10px 4px; }
.chat-scroll .wa-text { display: inline; }
.chat-scroll .wa-meta { float: right; margin: 6px 0 0 12px; line-height: 1; }
.chat-scroll .wa-msg::after { content: ''; display: block; clear: both; }
.chat-scroll .wa-msg .translation { clear: both; }
.chat-scroll .wa-msg.them { background: #fff; }
.chat-scroll .wa-msg.me { background: #dcefff; }
.chat-compose { flex: 0 0 auto; padding: 8px 16px 10px; border-top: 1px solid var(--line); background: #fff; position: relative; z-index: 2; }
.chat-compose textarea { resize: vertical; min-height: 60px; font-size: 14px; line-height: 1.45; }
#compose textarea#text, #compose textarea#translated { font-size: 14px; line-height: 1.45; }
/* Bausteine: Platzhalter [so etwas] im Text markiert (Hintergrund-Ebene hinter dem transparenten Textfeld) */
.ta-wrap { position: relative; }
.ta-wrap textarea { position: relative; background: transparent; z-index: 1; display: block; }
.ta-backdrop { position: absolute; left: 0; top: 0; z-index: 0; overflow: hidden; pointer-events: none; color: transparent; background: #fff; border-radius: 6px; border-color: transparent; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; }
.ta-backdrop mark { background: #ffe9a8; color: transparent; border-radius: 4px; box-shadow: 0 0 0 1px #e3c56a; }
.ta-wrap.has-slots textarea { cursor: text; }
.slot-pop { position: absolute; z-index: 5; width: 440px; max-width: 100%; border: 1px solid var(--mid); background: #fff; border-radius: 8px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(19,41,75,.18); }
.slot-pop .row input[type=text] { flex: 1; min-width: 160px; }
.slot-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.slot-opts button { font: inherit; font-size: 13px; border: 1px solid var(--mid); background: var(--light, #f4f7fb); border-radius: 6px; padding: 4px 9px; cursor: pointer; text-align: left; }
.slot-opts button:hover { background: var(--ice); }
/* KI-Kurzfassung unter Betreff/Vorschau */
.ai-sum { font-size: 13px; color: #4a3b7a; background: #f6f2ff; border-left: 3px solid #c9b8f5; padding: 3px 8px; margin: 4px 0 2px; border-radius: 0 6px 6px 0; line-height: 1.35; }
.ai-sum::before { content: '✨ '; }
.chat-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.file-pick { display: inline-flex; gap: 8px; align-items: center; margin: 0; cursor: pointer; color: var(--dark); font-size: 14px; }
.file-pick input[type=file] { display: none; }
.file-pick > span:first-of-type { border: 1px solid var(--mid); border-radius: 6px; padding: 6px 10px; background: #fff; }
.file-pick:hover > span:first-of-type { background: var(--light); }
.chat-side .panel { padding: 0 16px 12px; }
.chat-side .panel > summary { list-style: none; cursor: pointer; padding: 12px 0 8px; }
.chat-side .panel > summary::-webkit-details-marker { display: none; }
.chat-side .panel > summary h3 { margin: 0; display: inline; }
.chat-side .panel > summary:before { content: '▸'; display: inline-block; width: 14px; color: var(--mid); transition: transform .15s; }
.chat-side .panel[open] > summary:before { transform: rotate(90deg); }
.panel-name { font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.panel-name a { text-decoration: none; color: var(--ink); }
.panel-stats { margin-top: 10px; }
.panel-stats .stat { min-width: 80px; padding: 6px 10px; }
.panel-stats .stat b { font-size: 16px; }
.panel-order { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; }
.panel-order summary { list-style: none; cursor: pointer; padding: 7px 10px; font-size: 13px; }
.panel-order summary::-webkit-details-marker { display: none; }
.panel-order .tl-amount { float: right; }
.panel-items { margin: 0; padding: 0 10px 8px 24px; }
.panel-row { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.panel-row:last-child { border-bottom: 0; }
.mail-item { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
.mail-item summary { list-style: none; cursor: pointer; }
.mail-item summary::-webkit-details-marker { display: none; }
.vm-player { width: 100%; max-width: 360px; height: 36px; display: block; }
.muted-card { opacity: .7; }

.assign-box { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.assignee { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--light); border: 1px solid var(--mid); font-size: 13px; font-weight: 700; color: var(--dark); white-space: nowrap; }
.assignee.me { background: var(--dark); color: #fff; border-color: var(--dark); }
.assignee.none { font-weight: 400; color: var(--muted); border-style: dashed; }
.assign-select { width: auto; padding: 4px 6px; font-size: 13px; }
.present-now { color: #8a1c1c; font-weight: 700; font-size: 12.5px; margin-bottom: 4px; }
.presence { background: #fde7e7; border: 1px solid #f0a8a8; color: #8a1c1c; padding: 8px 14px; font-size: 14px; }
.notice.info { background: var(--light); border-color: var(--mid); color: var(--dark); }
.call-banner .call a.call-take { text-decoration: none; }
.call-why { font-size: 14px; color: var(--ice); margin-top: 3px; }
.call-why.muted { color: rgba(255,255,255,.55); }
.call-main a { color: #fff; text-decoration: none; }
.why-box { background: #f3eefb; border: 1px solid #d9cdee; color: #4b2f7a; border-radius: 8px; padding: 8px 12px; font-size: 14px; margin-top: 8px; }
.call-summary { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.18); font-size: 13px; color: rgba(255,255,255,.85); line-height: 1.4; }
.summary-box { background: var(--light); border-radius: 8px; padding: 8px 12px; font-size: 14px; margin-top: 8px; line-height: 1.5; }
.star { background: none; border: 0; cursor: pointer; color: var(--mid); font-size: 15px; padding: 0 2px; line-height: 1; vertical-align: middle; }
.star:hover { color: var(--navy); }
.star.on { color: #e0a800; }
.topsearch { margin-left: auto; }
.topsearch input { width: 230px; padding: 7px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 13px; }
.topsearch input::placeholder { color: rgba(255,255,255,.65); }
.topsearch input:focus { outline: 2px solid var(--ice); background: #fff; color: var(--ink); }
.nav { flex: 0 1 auto; }
mark { background: #ffe58a; color: inherit; padding: 0 2px; border-radius: 3px; }
.notes-box textarea { min-height: 90px; }
.notes-box .saved { color: var(--muted); font-size: 12px; }
.zettel { position: relative; margin-left: auto; color: #fff; font-size: 13px; cursor: pointer; padding: 6px 10px; border-radius: 6px; background: rgba(255,255,255,.1); white-space: nowrap; }
.zettel.warn { background: #b23a3a; }
.zettel.calm { opacity: .75; }
.zettel-sum b { font-weight: 700; }
.zettel-list { position: absolute; right: 0; top: 110%; z-index: 60; min-width: 320px; background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(19,41,75,.25); padding: 8px 0; cursor: default; }
.zettel-list div { padding: 6px 14px; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; }
.zettel-list div:last-child { border-bottom: 0; }
.zettel-list .z-nr { font-weight: 700; min-width: 36px; }
.zettel-list .z-min { min-width: 54px; font-variant-numeric: tabular-nums; }
.zettel-list .z-min.late { color: #b23a3a; font-weight: 700; }
.zettel-list .z-who { flex: 1; }
.zettel + .topsearch { margin-left: 10px; }
.top-inner { flex-wrap: wrap; row-gap: 6px; }
.zettel { max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1250px) { .topsearch input { width: 170px; } }
.close-mail { display: inline-block; position: relative; }
.close-mail > summary { list-style: none; display: inline-block; }
.close-mail > summary::-webkit-details-marker { display: none; }
.close-mail-form { position: absolute; right: 0; top: 110%; z-index: 40; background: #fff; border: 1px solid var(--mid); border-radius: 10px; box-shadow: 0 10px 30px rgba(19,41,75,.2); padding: 12px 14px; min-width: 300px; text-align: left; white-space: normal; }
.close-mail-form label { display: block; margin: 4px 0; font-size: 13.5px; color: var(--text); cursor: pointer; }
.close-mail-form input[type=text] { margin: 8px 0; }
.badge.cust-yes { background: #e3f5e6; color: #1b5e20; border-color: #b9e2c0; }
.badge.cust-no { background: #fde7e7; color: #8a1c1c; border-color: #f0b8b8; }
.topsearch { position: relative; }
.topsearch-list { position: absolute; right: 0; top: 110%; z-index: 70; width: 520px; max-height: 70vh; overflow: auto; background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 34px rgba(19,41,75,.28); text-align: left; }
.topsearch-list .ts-group { padding: 8px 12px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-top: 1px solid var(--line); }
.topsearch-list .ts-group:first-child { border-top: 0; }
.topsearch-list a.ts-item { display: block; padding: 6px 12px; text-decoration: none; color: var(--text); border-left: 4px solid transparent; }
.topsearch-list a.ts-item:hover, .topsearch-list a.ts-item.active { background: var(--light); }
.topsearch-list a.ts-item b { color: var(--ink); }
.topsearch-list a.ts-item .ts-sub { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topsearch-list .ts-kunde { border-left-color: var(--dark); }
.topsearch-list .ts-wa { border-left-color: #2e7d32; }
.topsearch-list .ts-mail { border-left-color: var(--mid); }
.topsearch-list .ts-order { border-left-color: var(--navy); }
.topsearch-list .ts-note { border-left-color: #e0a800; }
.topsearch-list .ts-badge { display: inline-block; font-size: 10.5px; padding: 0 6px; border-radius: 999px; margin-right: 6px; vertical-align: middle; font-weight: 700; }
.ts-badge.ts-kunde { background: var(--light); color: var(--dark); }
.ts-badge.ts-wa { background: #e6f4ea; color: #1b5e20; }
.ts-badge.ts-mail { background: #e8f1fb; color: var(--dark); }
.ts-badge.ts-order { background: #e8ecf5; color: var(--navy); }
.ts-badge.ts-note { background: #fff6d6; color: #7a5a00; }
.topsearch-list .ts-more { display: block; padding: 8px 12px; font-size: 13px; color: var(--dark); border-top: 1px solid var(--line); text-decoration: none; }
.topsearch-list mark { background: #ffe58a; padding: 0 1px; }

/* Erwähnte Artikel im Panel */
.panel-product { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); }
.panel-product:first-of-type { border-top: 0; }
.panel-product-img { flex: 0 0 84px; width: 84px; height: 84px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; }
.panel-product-img img { width: 100%; height: 100%; object-fit: contain; }
.panel-product-img .noimg { font-size: 11px; color: #8a97a8; }
.panel-product-text { flex: 1; min-width: 0; line-height: 1.35; }

/* Suche: offene Anliegen hervorgehoben */
.ts-item.ts-open { background: #fff8e6; }
.ts-openbadge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #7a1f1f; background: #ffd9d9; border-radius: 999px; padding: 1px 7px; margin-right: 6px; vertical-align: 1px; }

/* Pendenzen: Kennzahlen nach Kanal gruppiert, mit Stress-Tacho (Vergleich zu den letzten 20 Arbeitstagen) */
.kpi-groups { display: grid; grid-template-columns: 250px 5fr 3fr 3.4fr; gap: 12px; margin-bottom: 16px; align-items: stretch; }
.kpi-group { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px 10px; border-top: 4px solid #cfd8e3; min-width: 0; }
.kpi-group .kpi-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.kpi-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; min-height: 26px; }
.kpi-gauge { display: inline-flex; align-items: center; gap: 5px; cursor: help; }
.kpi-gauge em { font-style: normal; font-size: 12px; font-weight: 700; }
.kpi-group .kpis { margin-bottom: 0; gap: 6px; flex-wrap: nowrap; }
.kpi-group .stat { flex: 1 1 0; min-width: 0; padding: 6px 8px; background: var(--light); border: 0; }
.kpi-group .stat b { font-size: 20px; line-height: 1.1; }
.kpi-group .stat span { font-size: 10px; letter-spacing: .02em; display: block; line-height: 1.15; overflow-wrap: anywhere; }
.kpi-group .stat.hot { background: #fff1e0; }
.kpi-group .stat.hot b { color: #b4530a; }
.kpi-all { display: flex; align-items: center; gap: 10px; cursor: help; padding-top: 6px; }
.gauge-wrap { flex: 0 0 auto; }
.gauge-text { min-width: 0; }
.gauge-label { font-weight: 800; font-size: 17px; line-height: 1.1; margin: 1px 0 2px; }
.gauge-sub { line-height: 1.25; font-size: 11.5px; }
.level-low { border-top-color: #5cb85c; } .level-mid { border-top-color: #f0ad4e; } .level-high { border-top-color: #d9534f; } .level-na { border-top-color: #cfd8e3; }
.level-low .kpi-gauge em, .level-low .gauge-label { color: #2e7d32; }
.level-mid .kpi-gauge em, .level-mid .gauge-label { color: #b4530a; }
.level-high .kpi-gauge em, .level-high .gauge-label { color: #b52b27; }
.level-na .kpi-gauge em, .level-na .gauge-label { color: var(--muted); }
@media (max-width: 1250px) { .kpi-groups { grid-template-columns: 1fr 1fr; } .kpi-group .kpis { flex-wrap: wrap; } }
@media (max-width: 760px) { .kpi-groups { grid-template-columns: 1fr; } }

.mail-atts a.att { display: inline-block; border: 1px solid var(--mid); border-radius: 6px; padding: 2px 8px; background: #fff; text-decoration: none; }
.mail-atts a.att:hover { background: var(--light); }

/* Click-to-Call Rückmeldung */
.dial-toast { position: fixed; left: 50%; top: 18px; transform: translate(-50%, -20px); z-index: 90; background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 16px; font-weight: 600; box-shadow: 0 10px 30px rgba(19,41,75,.35); opacity: 0; transition: all .25s; max-width: 90vw; }
.dial-toast.show { opacity: 1; transform: translate(-50%, 0); }
.dial-toast.err { background: #b52b27; }

.assignee.other { background: #fde7e7; border: 1px solid #f0a8a8; color: #8a1c1c; border-radius: 999px; padding: 3px 10px; font-size: 13px; }
.btn.warn { background: #b52b27; border-color: #b52b27; color: #fff; }
.btn.warn:hover { background: #9c231f; }

.call-banner .call.call-out { grid-template-columns: 1fr auto; background: #2f4f7a; animation: none; }
.call-banner .call-badge.out { background: var(--ice); color: var(--navy); }