* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: #1f2933; background: #f6f7f9; }

header { display: flex; align-items: center; gap: 16px; padding: 8px 16px; color: #fff; flex-wrap: wrap; }
header { background: #ea1e3c; }
.brand { font-weight: 700; font-size: 17px; }
nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; flex: 1; }
nav .group { font-size: 11px; text-transform: uppercase; opacity: .75; margin: 0 2px 0 10px; }
nav button { background: transparent; color: #fff; border: 1px solid transparent; border-radius: 4px; padding: 5px 9px; cursor: pointer; font: inherit; }
nav button:hover { border-color: rgba(255,255,255,.5); }
nav button.active { background: #fff; color: #1f2933; }
.who, .company { display: flex; gap: 6px; align-items: center; margin: 0; }
.who select { padding: 4px; }
.company select { padding: 4px 6px; font-weight: 700; font-size: 15px; }
.for-company { font-weight: 400; color: #6b7280; }
.warn { background: #fef3c7; border: 1px solid #f5d77a; border-radius: 6px; padding: 8px 12px; max-width: 900px; }
.card.wide { max-width: 980px; margin-bottom: 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 16px; }
.grid h3 { grid-column: 1 / -1; font-size: 14px; margin: 14px 0 0; color: #4b5563; }
.grid label.full { grid-column: 1 / -1; }
label > textarea { min-height: 60px; }

main { padding: 16px 20px; max-width: 1400px; }
h1 { font-size: 20px; margin: 4px 0 14px; }
h2 { font-size: 16px; margin: 20px 0 8px; }
.card { background: #fff; border: 1px solid #dde1e6; border-radius: 6px; padding: 14px; max-width: 720px; }
.card h2 { margin-top: 0; }
label { display: block; margin: 8px 0; }
label.inline { display: inline-flex; gap: 4px; align-items: center; margin: 0; }
label > select { display: block; margin-top: 3px; }
input, textarea, select { font: inherit; padding: 5px 7px; border: 1px solid #c4cad1; border-radius: 4px; }
label > input:not([type=radio]):not([type=checkbox]), label > textarea { display: block; width: 100%; margin-top: 3px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row label { flex: 1; }
.row.end { justify-content: flex-end; }
.modes { display: flex; gap: 20px; }
.modes label { display: inline-flex; gap: 5px; }
button { font: inherit; padding: 6px 12px; border: 1px solid #c4cad1; background: #fff; border-radius: 4px; cursor: pointer; }
button.primary { background: #ea1e3c; border-color: #ea1e3c; color: #fff; }
button.small { padding: 2px 7px; font-size: 12px; }
button:disabled { opacity: .5; cursor: default; }
.msg { min-height: 1.2em; margin: 8px 0 0; }
.msg.err { color: #b42318; }
.msg.ok { color: #2f7d4f; }
.hint { color: #6b7280; font-size: 12px; }
.todo { color: #6b7280; font-style: italic; }

.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.filters label { margin: 0; display: inline-flex; gap: 4px; align-items: center; }

table.list { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #dde1e6; }
table.list th, table.list td { padding: 6px 8px; border-bottom: 1px solid #eceef1; text-align: left; vertical-align: top; }
table.list th { background: #f0f2f4; font-weight: 600; font-size: 13px; }
td.num, th.num { text-align: right; white-space: nowrap; }
#doc-list tr { background: #f3f4f6; }
#doc-list tr.sent { background: #e6f4ea; }
.badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 12px; white-space: nowrap; background: #e5e7eb; }
.b-aktiv, .b-erzeugt, .b-erledigt, .b-ok { background: #d1fae5; }
.b-gekuendigt, .b-offen, .b-entwurf, .b-pruefen { background: #fef3c7; }
.b-gesperrt, .b-fehler, .b-wichtig { background: #fee2e2; }
.b-in_arbeit, .b-laeuft { background: #dbeafe; }
.b-pausiert, .b-beendet, .b-ausgelassen { background: #e5e7eb; color: #4b5563; }
.small { font-size: 12px; color: #6b7280; }
.err-text { color: #b42318; font-size: 12px; }
ul.plain { list-style: none; padding: 0; margin: 0 0 8px; }
ul.plain li { padding: 4px 0; border-bottom: 1px solid #eceef1; display: flex; gap: 8px; align-items: baseline; }
ul.plain li.done { opacity: .55; }
.grow { flex: 1; }
table.clickable tbody tr { cursor: pointer; }
table.clickable tbody tr:hover { background: #fdf0f2; }
tr.inactive { opacity: .5; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; max-width: 1100px; margin-bottom: 16px; }
.tile { background: #fff; border: 1px solid #dde1e6; border-radius: 6px; padding: 12px 14px; }
.tile .v { font-size: 24px; font-weight: 700; }
.tile .l { color: #6b7280; font-size: 13px; }
.tile.alert .v { color: #b45309; }
.tile a { font-size: 13px; }
dialog { border: 1px solid #c4cad1; border-radius: 8px; width: min(820px, 96vw); }
dialog h2 { margin-top: 0; }
button.danger { color: #b42318; border-color: #f1b5ae; }
td.hints { font-size: 12px; max-width: 360px; }
#cu-q, #s-q, #inv-q { min-width: 300px; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 0; }
dl.kv dt { color: #6b7280; }
dl.kv dd { margin: 0; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: #e3e7eb; }
input.bad { border-color: #b42318; background: #fef2f2; }
.badge[title] { cursor: help; }
#sub-reviews li { font-size: 13px; }
.review-box { background: #fffbeb; border: 1px solid #f5d77a; border-radius: 6px; padding: 6px 12px; margin-bottom: 10px; }
.review-box h3 { margin: 4px 0; font-size: 14px; }
.review-box ul.plain li { border-bottom-color: #f3e3b0; }
.session { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.session button { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); padding: 3px 9px; }
.session button:hover { background: rgba(255,255,255,.15); }
.who select:disabled { opacity: 1; color: #1f2933; background: #fde8eb; }
.subs-head { display: flex; gap: 20px; align-items: flex-start; }
.cal { background: #fff; border: 1px solid #dde1e6; border-radius: 6px; padding: 8px 10px; flex: 0 0 auto; }
.cal-head { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.cal-head b { flex: 1; text-align: center; min-width: 120px; }
.cal table { border-collapse: collapse; font-size: 12px; }
.cal th, .cal td { padding: 3px 6px; text-align: center; }
.cal thead th { color: #6b7280; font-weight: 600; }
.cal tbody th { background: #ea1e3c; color: #fff; font-weight: 700; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.cal tbody th:hover { background: #c8102e; }
.cal tbody tr { border-bottom: 2px solid #fff; }
.cal td.other { color: #c4cad1; }
.cal td.we { color: #9ca3af; }
.cal td.today { background: #ea1e3c; color: #fff; border-radius: 50%; font-weight: 700; }
.cal tr.now td { background: #fde8eb; }
.cal tr.now td.today { background: #ea1e3c; }
.cal tr.now th { background: #5e5e5e; }
.cal .small { margin-top: 4px; }
@media (max-width: 1100px) { .subs-head { flex-direction: column; } }
.nowrap { white-space: nowrap; }
.who select { max-width: 220px; }
tr.picked { background: #fdf0f2; }
.rp-pick { width: 18px; height: 18px; cursor: pointer; }
.tile.click { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.tile.click:hover { border-color: #ea1e3c; box-shadow: 0 2px 6px rgba(234,30,60,.18); }
tr.click { cursor: pointer; }
tr.click:hover { background: #fdf0f2; }
#chat-log { max-width: 980px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.bubble { max-width: 80%; padding: 8px 12px; border-radius: 10px; overflow-wrap: anywhere; }
.bubble .txt { white-space: pre-wrap; }
.bubble.admin { align-self: flex-end; background: #fbd9de; }
.bubble.agent { align-self: flex-start; background: #fff; border: 1px solid #dde1e6; }
.bubble .meta { font-size: 11px; color: #6b7280; margin-bottom: 3px; }
.bubble .files a { display: inline-block; margin: 4px 8px 0 0; font-size: 12px; }
.chat-input textarea { width: 100%; margin-bottom: 8px; }
.fwd { font-size: 12px; color: #1e40af; background: #eef2ff; border-radius: 4px; padding: 2px 6px; margin-top: 3px; }
.rv-btns { white-space: nowrap; }
#dlg-fwd textarea { width: 100%; }
.session button.chat-top { background: #fff; color: #ea1e3c; border-color: #fff; font-weight: 700; font-size: 13px; padding: 4px 10px; }
.session button.chat-top:hover { background: #fde8eb; }
/* Kopfzeile: oben Firma, Person, Chat, Abmelden – darunter alle Reiter in einer eigenen Zeile */
header { flex-wrap: wrap; row-gap: 6px; }
header .who { margin-left: auto; }
header nav#tabs { order: 10; flex: 1 1 100%; }