:root {
  --bg: #f1f6f2;
  --card: #ffffff;
  --ink: #18241c;
  --muted: #5f6f64;
  --line: #dde9e1;
  --brand: #1f9d57;
  --brand-dark: #17804a;
  --brand-soft: #e6f5ec;
  --ok: #1a8f4c;
  --warn: #b00020;
  --warn-bg: #fdecef;
  --shadow: 0 1px 3px rgba(20, 40, 30, 0.08), 0 6px 24px rgba(20, 40, 30, 0.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 15px; }
.hidden { display: none !important; }

/* ---- Login ---- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 36px 32px; width: 100%; max-width: 380px; }
.login-card h1 { margin: 0 0 4px; font-size: 22px; color: var(--brand-dark); }
.login-card p.sub { margin: 0 0 24px; color: var(--muted); font-size: 14px; }

/* ---- Layout ---- */
header.topbar {
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: 10px 20px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; position: sticky; top: 0; z-index: 10; flex-wrap: wrap;
}
header.topbar .brand { font-weight: 700; font-size: 17px; color: var(--brand-dark); display: flex; align-items: center; gap: 10px; }
header.topbar .brand-logo { height: 36px; width: auto; max-width: 130px; border-radius: 6px; object-fit: contain; }
header.topbar .brand small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
header.topbar .right { display: flex; align-items: center; gap: 12px; font-size: 14px; flex-wrap: wrap; }
header.topbar select.company {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--brand-soft); font-weight: 600; color: var(--brand-dark);
}

.layout { display: flex; min-height: calc(100vh - 56px); }
nav.side { width: 210px; background: var(--card); border-right: 1px solid var(--line); padding: 14px 10px; flex-shrink: 0; }
nav.side button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 10px 12px; border-radius: 8px; color: var(--ink); font-size: 14px; margin-bottom: 2px;
}
nav.side button:hover { background: var(--bg); }
nav.side button.active { background: var(--brand); color: #fff; }
nav.side .navsection { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 14px 12px 4px; }
nav.side .navsection:first-child { padding-top: 2px; }

main.content { flex: 1; padding: 22px; max-width: 1040px; }

/* ---- Cards & elements ---- */
.card { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 20px; margin-bottom: 20px; }
.card h2 { margin: 0 0 16px; font-size: 18px; }
.card h3 { margin: 18px 0 10px; font-size: 15px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--brand); }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row .field { flex: 1; min-width: 110px; }

.btn { background: var(--brand); color: #fff; border: none; padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.btn:hover { background: var(--brand-dark); }
.btn.secondary { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
.btn.secondary:hover { background: #e3ede6; }
.btn.danger { background: var(--warn); }
.btn.small { padding: 6px 10px; font-size: 13px; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btnbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: 13px; }
tr:hover td { background: #fafdfb; }
td.actions, th.actions { white-space: nowrap; text-align: right; }
td .link { color: var(--brand-dark); cursor: pointer; margin-left: 10px; font-size: 13px; }
td .link.del { color: var(--warn); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.toolbar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .field { margin-bottom: 0; }

.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin: 4px 0 16px; }
.stat { background: var(--brand-soft); border-radius: 10px; padding: 14px; }
.stat .label { font-size: 12px; color: var(--muted); }
.stat .value { font-size: 22px; font-weight: 700; margin-top: 2px; color: var(--brand-dark); }

.warnbox { background: var(--warn-bg); border: 1px solid #f3c9d2; border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.warnbox h3 { margin: 0 0 8px; color: var(--warn); font-size: 14px; }
.warnbox ul { margin: 0; padding-left: 18px; font-size: 13px; }
.badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-weight: 600; }
.badge.ok { background: var(--brand-soft); color: var(--ok); }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; margin-right: 7px; }

.error-msg { color: var(--warn); font-size: 13px; margin-top: 8px; min-height: 18px; }
.ok-msg { color: var(--ok); font-size: 13px; margin-top: 8px; }
.empty { color: var(--muted); padding: 16px 0; font-size: 14px; }
.hint { color: var(--muted); font-size: 12px; }

/* ---- Modal ---- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20, 40, 30, 0.45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); width: 100%; max-width: 480px; padding: 24px; max-height: 90vh; overflow: auto; }
.modal h2 { margin: 0 0 18px; }
.modal.modal-doc { max-width: 940px; width: 94vw; }
.att-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--line); }
.att-row select { padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ---- Lohn-/PDF-Box ---- */
/* ---- Buchhaltung Drag&Drop ---- */
.dropzone { border: 2px dashed var(--brand); border-radius: 12px; background: var(--brand-soft); padding: 22px; text-align: center; cursor: pointer; transition: background .12s, border-color .12s; }
.dropzone:hover { background: #dcefe3; }
.dropzone.over { background: #cfe9da; border-color: var(--brand-dark); }
.droptarget.over { outline: 2px dashed var(--brand); outline-offset: 2px; background: var(--brand-soft); }
.fa-monthchips { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-modulebar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 -4px; padding: 6px 10px; background: var(--brand-soft); border-radius: 8px; }
.cp-moduletitle { font-weight: 800; color: var(--brand-dark); }
.cp-modgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.cp-modcheck { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.cp-modcheck:hover { background: var(--bg); }
.cp-modcheck input { width: 16px; height: 16px; }
.contract-form { max-height: 70vh; overflow-y: auto; padding-right: 4px; }
.contract-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.contract-grid .field { margin: 0; }
.contract-form textarea { width: 100%; }
.btn.danger { background: #d6336c; border-color: #d6336c; color: #fff; }
.btn.danger:hover { background: #b02a59; }
.contract-sub { margin: 14px 0 6px; font-size: 13px; color: var(--brand-dark); border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.contract-form textarea { width: 100%; }
@media (max-width: 560px) { .contract-grid { grid-template-columns: 1fr; } }

.logo-preview { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.logo-thumb { height: 44px; max-width: 140px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; padding: 3px; background: #fff; }

.docrow { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 16px; }
.docbox { flex: 1; min-width: 230px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.docbox h4 { margin: 0 0 8px; font-size: 14px; }

/* ---- Schichtplan ---- */
.shiftgrid { overflow-x: auto; }
.shiftgrid table { min-width: 720px; }
.shiftgrid th, .shiftgrid td { border: 1px solid var(--line); vertical-align: top; }
.shiftgrid th { background: var(--brand-soft); text-align: center; }
.shiftgrid td.empname { font-weight: 600; white-space: nowrap; }
.shiftgrid td.cell { cursor: pointer; min-width: 92px; height: 54px; user-select: none; }
.shiftgrid td.cell:hover { background: var(--brand-soft); }
.shiftgrid td.cell.selecting { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.shiftchip { color: #fff; border-radius: 6px; padding: 3px 6px; font-size: 12px; margin-bottom: 3px; line-height: 1.25; white-space: nowrap; }
.shiftchip .chiphours { font-size: 10px; opacity: 0.92; font-weight: 600; }
tr.daysum td { background: var(--brand-soft); font-weight: 600; color: var(--brand-dark); }
tr.sundayrow td { background: #f0f2f1; }
.shiftgrid.compact td.cell { min-width: 60px; height: 46px; }
.shiftgrid.compact th { font-size: 11px; padding: 5px 4px; }
.shiftgrid.compact .shiftchip { font-size: 10px; padding: 2px 4px; }
.shiftgrid th.sunday, .shiftgrid td.cell.sunday { background: #f0f2f1; color: var(--muted); }
.shiftgrid th.sat, .shiftgrid td.cell.sat { background: #f6faf7; }
.shiftgrid th.holiday, .shiftgrid td.cell.holiday { background: #fdecef; }
.shiftgrid th.holiday { color: var(--warn); }
.shiftgrid .holname { font-size: 9px; font-weight: 400; line-height: 1.1; margin-top: 2px; white-space: normal; }

/* ---- Schichtplan: Kalender-Monatsansicht ---- */
.shiftcalwrap { overflow-x: auto; }
.shiftcal { width: 100%; table-layout: fixed; border-collapse: collapse; min-width: 680px; }
.shiftcal th { background: var(--brand-soft); text-align: center; padding: 7px 4px; border: 1px solid var(--line); font-size: 13px; }
.shiftcal td.calcell { border: 1px solid var(--line); vertical-align: top; height: 96px; padding: 4px; }
.shiftcal td.calcell.out { background: #fafbfc; }
.shiftcal td.calcell.out .caldate { color: #c3ccc6; }
.shiftcal td.calcell.sunday { background: #f0f2f1; }
.shiftcal td.calcell.sat { background: #f6faf7; }
.shiftcal td.calcell.holiday { background: #fdecef; }
.shiftcal td.calcell:hover { background: var(--brand-soft); }
.shiftcal td.calcell.out:hover { background: #fafbfc; }
.shiftcal .caldate { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 3px; line-height: 1.15; }
.shiftcal td.calcell.holiday .caldate { color: var(--warn); }
.calchip { color: #fff; border-radius: 5px; padding: 2px 5px; font-size: 11px; margin-bottom: 2px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Jahres-Balken ---- */
.yearbar-row { display: grid; grid-template-columns: 90px 1fr 70px; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px; }
.yearbar-track { background: var(--bg); border-radius: 6px; height: 18px; overflow: hidden; }
.yearbar-fill { background: var(--brand); height: 100%; }

/* ---- Editierbare Tabelle ---- */
.edit-table input { width: 100%; padding: 6px 7px; border: 1px solid var(--line); border-radius: 6px; }
.edit-table td { padding: 5px 6px; }

/* ---- Audio-Anruf ---- */
.callbtn { display: inline-flex; align-items: center; gap: 6px; }
.callbar {
  position: fixed; bottom: 20px; right: 20px; background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow); border-radius: 14px; padding: 16px 18px; z-index: 60; min-width: 250px;
}
.callbar h4 { margin: 0 0 4px; }
.callbar .status { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.callbar .actions { display: flex; gap: 10px; }
.contacts-list { display: flex; flex-direction: column; gap: 6px; }
.contact { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.contact .who { display: flex; align-items: center; gap: 8px; }
.presence { width: 9px; height: 9px; border-radius: 50%; background: #c4ccc7; }
.presence.online { background: var(--brand); }

/* ---- Dashboard-Banner ---- */
.banner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.banner { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; cursor: pointer; transition: box-shadow .15s; }
.banner:hover { box-shadow: var(--shadow); }
.banner-name { font-weight: 600; display: flex; align-items: center; }
.banner-hours { font-size: 30px; font-weight: 800; color: var(--brand-dark); margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.banner-sub { font-size: 12px; color: var(--muted); }

/* ---- KI-Chat ---- */
.chatlog { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px; min-height: 220px; max-height: 50vh; overflow-y: auto; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.chatmsg { padding: 8px 12px; border-radius: 10px; max-width: 85%; white-space: pre-wrap; font-size: 14px; }
.chatmsg.user { background: var(--brand); color: #fff; align-self: flex-end; }
.chatmsg.assistant { background: var(--card); border: 1px solid var(--line); align-self: flex-start; }
.chat-actions { align-self: flex-start; max-width: 85%; font-size: 12.5px; color: var(--brand-dark); background: var(--brand-soft); border-radius: 8px; padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; }
.btn.off { opacity: .7; }

/* Schwebender KI-Assistent-Button (wie Notion, unten rechts) */
.ai-fab { position: fixed; right: 22px; bottom: 22px; width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: #fff; border: none; box-shadow: 0 6px 22px rgba(0,0,0,.28); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1200; }
.ai-fab:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ai-fab .ico { color: #fff; }
.ai-panel { position: fixed; right: 22px; bottom: 90px; width: 380px; max-width: calc(100vw - 24px); height: 540px; max-height: calc(100vh - 130px); background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.3); display: flex; flex-direction: column; z-index: 1201; overflow: hidden; }
.ai-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; background: var(--brand); color: #fff; }
.ai-panel-head .ico { color: #fff; }
.ai-panel-head .x { cursor: pointer; font-size: 17px; padding: 0 2px; }
.ai-panel .chatlog { flex: 1; margin: 0; border: none; border-radius: 0; max-height: none; min-height: 0; }
.ai-panel-input { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); align-items: center; }
.ai-panel-input input { flex: 1; min-width: 0; }
.ai-fab.listening { background: #d6336c; animation: aipulse 1.5s infinite; }
@keyframes aipulse { 0% { box-shadow: 0 0 0 0 rgba(214,51,108,.5); } 70% { box-shadow: 0 0 0 16px rgba(214,51,108,0); } 100% { box-shadow: 0 0 0 0 rgba(214,51,108,0); } }
/* ===== Sprich-mit-Falax: großer Drück-und-Sprich-Knopf ===== */
.ai-panel.voice .chatlog { flex: 1 1 auto; min-height: 80px; }
.ai-voice-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 12px 12px; border-top: 1px solid var(--line); }
.ai-talk { width: 116px; height: 116px; border-radius: 50%; border: none; cursor: pointer; background: var(--brand); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; box-shadow: 0 10px 28px rgba(31,157,87,.4); transition: transform .08s ease, box-shadow .15s ease; -webkit-user-select: none; user-select: none; touch-action: none; }
.ai-talk:active { transform: scale(.96); }
.ai-talk .ico { color: #fff; }
.ai-talk .ico svg { width: 36px; height: 36px; }
.ai-talk-label { font-size: 12px; font-weight: 700; line-height: 1.1; white-space: pre-line; text-align: center; }
.ai-talk.listening { background: #d6336c; box-shadow: 0 0 0 0 rgba(214,51,108,.55); animation: aipulse 1.3s infinite; }
.ai-voice-status { font-size: 13px; color: var(--muted); text-align: center; min-height: 18px; max-width: 92%; }
.ai-panel.voice .ai-voice-status { word-break: break-word; }
/* Kamera-Scanner-Button: direkt über dem KI-Button. */
.scan-fab { position: fixed; right: 22px; bottom: 86px; width: 56px; height: 56px; border-radius: 50%; background: var(--card); color: var(--text); border: 1px solid var(--line); box-shadow: 0 6px 22px rgba(0,0,0,.22); font-size: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1200; }
.scan-fab:hover { filter: brightness(1.04); transform: translateY(-1px); }
[dir="rtl"] .scan-fab { right: auto; left: 22px; }
.scan-dialog .scan-step { margin: 10px 0; }
.scan-dialog .scan-step > label { display: block; font-weight: 600; margin-bottom: 5px; }
.scan-dialog .scan-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.scan-dialog .scan-row label { font-size: 13px; color: var(--muted); }
.scan-dialog .scan-row select, .scan-dialog .scan-row input { min-width: 0; }
.scan-fab .ico { display: inline-flex; }
.scan-fab .ico svg { width: 24px; height: 24px; color: var(--brand-dark); }
.scan-suggest { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-size: 13px; }
.scan-suggest.loading { color: var(--muted); flex-direction: row; align-items: center; gap: 6px; }
.scan-suggest.loading .ico svg { width: 16px; height: 16px; }
.scan-suggest.ok { border-color: var(--brand); background: var(--brand-soft); }
.scan-suggest.err { border-color: var(--warn); background: var(--warn-bg); }
.scan-suggest-h { display: flex; align-items: center; gap: 5px; color: var(--brand-dark); }
.scan-suggest-h .ico svg { width: 16px; height: 16px; }
.scan-suggest-target { font-size: 14px; }
.scan-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.scan-thumb { position: relative; width: 84px; }
.scan-thumb img { width: 84px; height: 110px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.scan-thumb-no { position: absolute; top: 2px; left: 2px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; border-radius: 4px; padding: 0 5px; }
.scan-thumb-btns { display: flex; gap: 3px; margin-top: 3px; justify-content: center; }
.scan-thumb-btns .tbtn { border: 1px solid var(--line); background: var(--card); border-radius: 5px; width: 24px; height: 22px; font-size: 12px; cursor: pointer; padding: 0; }
.scan-thumb-btns .tbtn.del { color: #d6336c; }
.scan-thumb-btns .tbtn:disabled { opacity: .35; cursor: default; }
.scan-thumb-pdf { width: 84px; height: 110px; border: 1px solid var(--line); border-radius: 6px; background: #f7f7fb; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 30px; gap: 4px; }
.scan-thumb-name { font-size: 9px; color: var(--muted); text-align: center; line-height: 1.1; padding: 0 3px; word-break: break-all; }
.scan-drop { margin-top: 8px; border: 2px dashed var(--line); border-radius: 10px; padding: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; background: var(--bg); color: var(--muted); transition: border-color .15s, background .15s; }
.scan-drop:hover { border-color: var(--brand); }
.scan-drop.over { border-color: var(--brand); background: rgba(34,139,84,.08); }
.scan-drop-ico { font-size: 26px; }
.scan-drop strong { color: var(--text); }
/* Zahlungs-Tracker (Offene Rechnungen / USt-Voranmeldung) */
.trk-table { width: 100%; }
.trk-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trk-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.trk-actions { white-space: nowrap; }
.trk-actions .link { margin: 0 4px; font-size: 15px; }
.trk-row-over td { background: rgba(214, 51, 108, .07); }
.trk-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.trk-badge.ok { background: #d8f5e3; color: #156c3b; }
.trk-badge.open { background: #e7ecf3; color: #44566c; }
.trk-badge.soon { background: #fff3cd; color: #8a6d00; }
.trk-badge.over { background: #fde0e8; color: #b01545; }
.trk-stats { margin-bottom: 4px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.trk-auswertung { margin: 8px 0 4px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; }
.trk-auswertung > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.trk-sumtable td.num, .trk-sumtable th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trk-sumtable .trk-empty td { color: var(--muted); }
.trk-sumtable .trk-qrow td { background: #f4f7fb; font-weight: 600; }
.trk-sumtable .trk-yrow td { background: #e8f3ec; font-weight: 700; border-top: 2px solid var(--brand); }
.trk-monthhead td { background: #eef2f7; font-weight: 700; color: #2a3b4d; }
/* Ausführung: Projekt-Timeline */
.ausf-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ex-nav { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; }
.ex-timeline { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.ex-inner { position: relative; min-width: 100%; }
.ex-dayhead { display: flex; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); z-index: 1; }
.ex-day { text-align: center; font-size: 11px; color: var(--muted); padding: 6px 0; border-right: 1px solid var(--line); box-sizing: border-box; }
.ex-day.today { background: rgba(34,139,84,.14); color: var(--brand-dark); font-weight: 700; }
.ex-row { position: relative; height: 54px; border-bottom: 1px solid var(--line); }
.ex-bar { position: absolute; top: 6px; height: 42px; border-radius: 8px; padding: 4px 8px; cursor: pointer; overflow: visible; color: #13321f; box-shadow: 0 1px 4px rgba(0,0,0,.12); box-sizing: border-box; }
.ex-bar:hover { filter: brightness(.97); }
.ex-bar { touch-action: none; user-select: none; }
.ex-bar.dragging { opacity: .85; box-shadow: 0 4px 14px rgba(0,0,0,.25); z-index: 5; }
.ex-links { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 2; overflow: visible; }
.ex-link { fill: none; stroke: #e0a106; stroke-width: 2; pointer-events: none; }
.ex-arrow { fill: #e0a106; pointer-events: none; }
.ex-link-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.ex-reorder { position: absolute; top: 3px; right: 4px; display: none; flex-direction: column; gap: 1px; }
.ex-bar:hover .ex-reorder { display: flex; }
.ex-rebtn { width: 18px; height: 16px; line-height: 12px; font-size: 11px; border: 1px solid rgba(0,0,0,.2); background: rgba(255,255,255,.85); border-radius: 4px; cursor: pointer; padding: 0; }
.ex-rebtn:hover { background: #fff; }
.ex-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-color { width: 28px; height: 28px; border-radius: 6px; border: 2px solid var(--line); cursor: pointer; font-size: 11px; color: var(--muted); background: var(--bg); }
.ex-color.sel { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(34,139,84,.3); }
.ex-handle { position: absolute; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2px solid #e0a106; cursor: crosshair; display: none; z-index: 6; touch-action: none; }
.ex-handle.left { left: -7px; } .ex-handle.right { right: -7px; }
.ex-bar:hover .ex-handle { display: block; }
.ex-bar-note { font-size: 10px; color: #33503f; opacity: .9; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: max-content; max-width: 280px; }
.ex-resize { position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; z-index: 4; touch-action: none; }
.ex-resize.left { left: 0; } .ex-resize.right { right: 0; }
.ex-bar:hover .ex-resize::after { content: ''; position: absolute; top: 28%; bottom: 28%; width: 3px; border-radius: 2px; background: rgba(0,0,0,.28); left: 3px; }
/* Inhalt darf bei schmalen (z. B. 1-Tages-) Balken nach rechts herausragen, damit Titel/Mitarbeiter lesbar bleiben */
.ex-bar-title { font-weight: 700; font-size: 12px; white-space: nowrap; width: max-content; max-width: 320px; }
.ex-bar-meta { display: flex; gap: 4px; flex-wrap: nowrap; margin-top: 2px; width: max-content; }
.ex-chip { font-size: 10px; background: rgba(255,255,255,.6); border-radius: 6px; padding: 0 5px; white-space: nowrap; }
.ex-chip.status { font-weight: 700; }
.ex-bar.st-plan { background: #e4e9f0; } .ex-bar.st-prog { background: #cfe3ff; } .ex-bar.st-pause { background: #ffe9bf; } .ex-bar.st-done { background: #cdeccd; }
.ex-chip.status.st-plan { background: #e4e9f0; } .ex-chip.status.st-prog { background: #cfe3ff; } .ex-chip.status.st-pause { background: #ffe9bf; } .ex-chip.status.st-done { background: #cdeccd; }
.ex-undated { margin-top: 8px; }
.ex-undated-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; cursor: pointer; }
.ex-undated-item:hover { background: var(--bg); }
.ex-emp-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-emp { display: flex; align-items: center; gap: 5px; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; cursor: pointer; }
.ex-tools-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ex-tool { font-size: 13px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; background: var(--bg); cursor: pointer; }
.ex-tool:hover { border-color: var(--brand); }
.ex-tool.on { background: #d8f5e3; border-color: var(--brand); color: #156c3b; font-weight: 600; }
.ex-tool:disabled { opacity: .7; cursor: default; }
.home-ausf-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.home-ausf-item:last-child { border-bottom: none; }
@media (max-width: 560px) { .ex-day { font-size: 10px; } .ex-bar-title { font-size: 11px; } }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.form-grid .field { margin: 0; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .trk-table { font-size: 12px; }
  .trk-table th, .trk-table td { padding: 5px 4px; }
  .trk-actions .link { margin: 0 2px; font-size: 14px; }
  .trk-badge { padding: 1px 7px; font-size: 11px; }
}
.scan-cropchk { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); cursor: pointer; margin-top: 6px; }
.scan-cropchk input { width: 16px; height: 16px; }
.scan-editor-backdrop { z-index: 1400; }
.scan-editor { max-width: 600px; }
.scan-edit-canvaswrap { display: flex; justify-content: center; background: #1b1b1b; border-radius: 10px; padding: 8px; margin: 8px 0; }
.scan-edit-canvas { touch-action: none; cursor: grab; max-width: 100%; border-radius: 4px; }
.scan-edit-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
@media (max-width: 560px) { .scan-fab { right: 14px; bottom: 70px; width: 46px; height: 46px; font-size: 20px; } .scan-thumb, .scan-thumb img, .scan-thumb-pdf { width: 70px; } .scan-thumb img, .scan-thumb-pdf { height: 92px; } }
.ai-panel-head .x.off { opacity: .6; }
.sigpad-wrap { margin: 4px 0 6px; }
.sigpad { width: 100%; border: 1px dashed var(--border); border-radius: 8px; background: #fff; touch-action: none; cursor: crosshair; display: block; }
@media (max-width: 560px) { .ai-panel { right: 8px; left: 8px; width: auto; bottom: 84px; } .ai-fab { right: 14px; bottom: 14px; } }

@media (max-width: 720px) {
  main.content { padding: 14px; }
  /* (Mobile-Navigation wird vom Off-Canvas-Menü weiter unten gesteuert) */
}

/* ---- Handy / kleine Bildschirme ---- */
@media (max-width: 560px) {
  body { font-size: 16px; } /* angenehm lesbar & weniger Auto-Zoom auf iOS */
  header.topbar { padding: 8px 12px; }
  header.topbar .brand { font-size: 15px; }
  header.topbar .brand-logo { height: 28px; }
  main.content { padding: 10px; }
  .card { padding: 14px; border-radius: 10px; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .banner-grid { grid-template-columns: 1fr; }
  .toolbar { gap: 8px; }
  .toolbar .field { flex: 1 1 100%; }
  .row { gap: 8px; }
  .modal { padding: 16px; border-radius: 12px; }
  .modal.modal-doc { width: 100vw; max-width: 100vw; height: auto; border-radius: 0; }
  .btnbar { gap: 8px; }
  .btnbar .btn, .btnbar .btn.secondary { flex: 1 1 auto; }
  /* Tabellen horizontal scrollbar machen statt zu quetschen */
  table { display: block; overflow-x: auto; white-space: nowrap; }
  .att-row { flex-direction: column; align-items: stretch; }
  .att-row select { width: 100%; }
  input, select, textarea { font-size: 16px; } /* verhindert iOS-Zoom beim Fokus */
}

/* ================= CRM: Kalender, Kunden, Postfach ================= */
/* Inhaltsbereich angenehm breit & lesbar am PC */
main.content { max-width: 1280px; margin: 0 auto; width: 100%; }

/* --- Kalender --- */
.cal-grid { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.cal-headrow { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--bg); }
.cal-head { text-align: center; font-weight: 700; color: var(--muted); font-size: 13px; padding: 7px 0; }
.cal-week { position: relative; }
.cal-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell { min-height: 106px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); padding: 4px 5px; background: #fff; cursor: pointer; transition: background .1s; }
.cal-row .cal-cell:first-child { border-left: none; }
.cal-cell:hover { background: var(--brand-soft); }
.cal-cell.out { background: #fafbfc; cursor: default; }
.cal-cell.today { background: var(--brand-soft); }
.cal-daynum { font-weight: 700; font-size: 13px; color: var(--ink); width: 24px; height: 22px; display: flex; align-items: center; }
.cal-cell.today .cal-daynum { color: #fff; background: var(--brand); border-radius: 50%; justify-content: center; width: 22px; }
.cal-cell-events { display: flex; flex-direction: column; gap: 3px; }
.cal-evt { background: var(--brand); color: #fff; border-radius: 6px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cal-evt:hover { filter: brightness(0.92); }
/* Durchgehende Balken für mehrtägige Termine (über die Zellen hinweg) */
.cal-overlay { position: absolute; inset: 0; pointer-events: none; }
.cal-bar { position: absolute; height: 19px; border-radius: 6px; color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; pointer-events: auto; cursor: grab; box-sizing: border-box; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.cal-bar:hover { filter: brightness(0.93); }
.cal-bar:active { cursor: grabbing; }
.cal-bar.cont-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-bar.cont-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-bar-label { flex: 1; padding: 0 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Kunden --- */
.cust-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.cust-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: #fff; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.cust-card:hover { box-shadow: var(--shadow); border-color: var(--brand); }
.cust-name { font-weight: 700; font-size: 16px; margin-bottom: 4px; color: var(--brand-dark); }
.cust-info { display: grid; gap: 6px; font-size: 15px; margin: 8px 0 4px; }

/* --- Postfach: KI-Box & Checkbox --- */
.ai-box { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; background: var(--brand-soft); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 14px; }
label.check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
label.check input { width: auto; }

/* Handy: Kalender kompakter, aber weiter 7 Spalten */
@media (max-width: 560px) {
  .cal-cell { min-height: 64px; padding: 3px; }
  .cal-daynum { font-size: 12px; }
  .cal-evt { font-size: 10px; }
  .cal-bar { font-size: 10px; height: 17px; }
  .cust-list { grid-template-columns: 1fr; }
  .ai-box { flex-direction: column; align-items: stretch; }
}

/* ================= Professionelle Icons ================= */
.ico { display: inline-flex; align-items: center; justify-content: center; line-height: 0; color: currentColor; flex-shrink: 0; }
.ico svg { display: block; }
nav.side button { display: flex; align-items: center; gap: 10px; text-align: left; }
nav.side button .ico { color: var(--muted); }
nav.side button.active .ico { color: #fff; }
h2 .ico { vertical-align: middle; margin-right: 9px; }
h3 .ico { vertical-align: middle; margin-right: 7px; }
.ico-head { display: inline-flex; align-items: center; gap: 9px; }
/* kleine Chips für Anhänge im Verfassen-Fenster */
.chip { display: inline-flex; align-items: center; background: var(--brand-soft); border: 1px solid var(--line); border-radius: 16px; padding: 3px 10px; margin: 3px 6px 3px 0; font-size: 13px; }
@media (max-width: 720px) { nav.side button { gap: 7px; } }
.btn { display: inline-flex; align-items: center; gap: 7px; justify-content: center; }

/* Termin-Farben */
.swatch-row { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; position: relative; transition: transform .08s; }
.swatch:hover { transform: scale(1.08); }
.swatch.sel { box-shadow: 0 0 0 3px var(--ink); transform: scale(1.14); }
.swatch.sel::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
/* Live-Vorschau des Termins */
.appt-preview { color: #fff; font-weight: 700; font-size: 15px; padding: 13px 15px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); min-height: 20px; display: flex; align-items: center; transition: background .12s; }
/* Aufgaben-Box */
.tasks-box { border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; background: var(--bg); }
.task-text.task-done { text-decoration: line-through; opacity: .55; }
.task-del { border: none; background: none; color: #c2255c; font-size: 15px; font-weight: 700; cursor: pointer; padding: 4px 6px; line-height: 1; border-radius: 6px; }
.task-del:hover { background: #ffe3ec; }
.btn.add-task { width: 100%; margin-top: 10px; background: var(--brand-soft); color: var(--brand-dark); border: 1px dashed var(--brand); font-weight: 700; }
.btn.add-task:hover { background: var(--brand); color: #fff; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.cal-evt:hover { background: inherit; filter: brightness(0.9); }

/* Termin-Kategorien, Aufgaben, Ziehen, mehrtägig */
.cat-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 18px; background: #fff; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.cat-btn:hover { background: var(--bg); }
.cat-btn.cat-sel { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.cat-chip { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.task-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.task-row input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 auto; margin: 0; cursor: pointer; }
.task-row .task-text, .task-row input[type=text], .task-row input:not([type]) { flex: 1 1 auto; width: auto; min-width: 0; }
.task-row input[type=color] { flex: 0 0 auto; width: 48px; }
.cal-cell.drag-hl { background: var(--brand-soft); box-shadow: 0 0 0 2px var(--brand) inset; }
.cal-cell { user-select: none; }
.cal-evt.multi { border-left: 3px solid rgba(255,255,255,.85); }
.cal-evt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.evt-badge { background: rgba(0,0,0,.32); color: #fff; border-radius: 9px; padding: 0 6px; font-size: 10px; font-weight: 700; flex-shrink: 0; }

/* Mikrofon / Spracheingabe */
.mic-btn.rec { background: #e4572e; border-color: #e4572e; color: #fff; animation: micpulse 1.1s infinite; }
.mic-btn.rec .ico { color: #fff; }
@keyframes micpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(228,87,46,.5); } 50% { box-shadow: 0 0 0 7px rgba(228,87,46,0); } }

/* Kunden-Status-Board (Kanban) */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.kan-col { flex: 0 0 250px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; max-height: 72vh; }
.kan-head { color: #fff; font-weight: 700; padding: 9px 12px; border-radius: 12px 12px 0 0; display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.kan-count { background: rgba(255,255,255,.3); border-radius: 10px; padding: 0 8px; font-size: 12px; }
.kan-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 60px; }
.kan-card { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 10px; cursor: grab; box-shadow: 0 1px 2px rgba(20,40,30,.05); }
.kan-card:hover { border-color: var(--brand); }
.kan-card.dragging { opacity: .5; }
.kan-card .cust-name { font-size: 15px; }
.kan-col.drop { box-shadow: 0 0 0 2px var(--brand) inset; }
.status-badge { color: #fff; font-weight: 700; font-size: 13px; padding: 4px 12px; border-radius: 14px; display: inline-block; }
@media (max-width: 560px) { .kan-col { flex-basis: 82vw; } }
.cal-evt { cursor: grab; }
.cal-evt:active { cursor: grabbing; }

/* Kalender: Papierkorb + Zieh-Ränder zum Verlängern */
.cal-trash { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 2px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 13px; font-weight: 600; }
.cal-trash.over { border-color: #e4572e; color: #e4572e; background: #fdecef; }
.cal-evt { padding: 0; }
.evt-label { flex: 1; padding: 3px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt-resize { width: 7px; align-self: stretch; cursor: ew-resize; flex-shrink: 0; background: rgba(255,255,255,.28); }
.evt-resize:hover { background: rgba(255,255,255,.6); }
.evt-resize-l { border-radius: 6px 0 0 6px; }
.evt-resize-r { border-radius: 0 6px 6px 0; }
.evt-badge { margin-right: 3px; }

/* Mehrtägige Termine als durchgehender Balken (Titel nur am ersten Tag) */
.cal-evt.multi { border-radius: 0; }
.cal-evt.multi.is-start { border-radius: 6px 0 0 6px; }
.cal-evt.multi.is-end { border-radius: 0 6px 6px 0; }
.cal-evt.multi:not(.is-start) .evt-resize-l { display: none; }
.cal-evt.multi:not(.is-end) .evt-resize-r { display: none; }
.cal-evt.multi:not(.is-start) .evt-label { min-height: 1.1em; }

/* ===== Postfach-Upgrade: Badge, Toast, Drop-Zone, Konto-Abschnitte ===== */
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: auto; background: #e03131; color: #fff; font-size: 11px; font-weight: 800; border-radius: 9px; line-height: 1; }
#nav button { position: relative; }

/* Drag-&-Drop-Zone für Anhänge (Postfach-Verfassen) */
.mail-dropzone { display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px dashed var(--line); border-radius: 10px; padding: 16px; color: var(--muted); background: var(--bg); cursor: pointer; font-size: 14px; transition: all .12s; }
.mail-dropzone:hover { border-color: var(--brand); }
.mail-dropzone.over { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }

/* Konto-Formular Abschnitts-Überschriften */
.acc-sec { display: flex; align-items: center; gap: 6px; margin: 16px 0 6px; padding-bottom: 5px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--brand-dark); }
.acc-sec .link { margin-left: auto; font-weight: 600; }

/* Toast-Benachrichtigungen */
.toast-host { position: fixed; right: 18px; bottom: 18px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.toast { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--brand); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 12px 32px 12px 14px; cursor: pointer; position: relative; animation: toastIn .25s ease; }
.toast:hover { background: var(--bg); }
.toast-title { font-weight: 800; font-size: 14px; margin-bottom: 3px; }
.toast-text { font-size: 13px; color: var(--ink); opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-close { position: absolute; top: 8px; right: 10px; font-size: 13px; color: #999; }
.toast.hide { opacity: 0; transform: translateX(20px); transition: all .4s; }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }

/* ===== Postfach: schöne Lese-Ansicht (Nachricht öffnen) ===== */
.mailview { max-width: 860px; width: 92vw; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 92vh; }
.mailview-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.mail-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.mailview-subject { margin: 0; font-size: 19px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mailview-meta { color: var(--muted); font-size: 13px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailview-close { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 16px; cursor: pointer; }
.mailview-close:hover { background: var(--bg); color: var(--ink); }
.mailview-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--bg); flex: 0 0 auto; }
.mailview-actions .mv-act { padding: 6px 11px; font-size: 12.5px; }
.mailview-actions .mv-act.mv-icononly { padding: 6px 9px; }
.mailview-actions .mv-act.mv-icononly span:not(.ico) { display: none; }
.mailview-footer { flex: 0 0 auto; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--bg); }
.mailview-footer .mv-blockbtn { color: #9a3412; }
html.dark .mailview-footer { border-color: #243240; background: #16202c; }
.mailview-scroll { flex: 1; overflow: auto; background: #fff; }
.mailview-body { background: #fff; }
.mail-body-frame { width: 100%; height: 60vh; border: none; background: #fff; display: block; }
.mail-body-text { white-space: pre-wrap; word-break: break-word; line-height: 1.65; font-size: 15px; color: var(--ink); padding: 22px 26px; max-width: 760px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.mailview-atts-wrap { padding: 10px 22px 18px; border-top: 1px solid var(--line); }
.mail-atts { display: flex; flex-direction: column; gap: 8px; }
.mail-att { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.mail-att-ic { color: var(--brand-dark); display: inline-flex; flex: 0 0 auto; }
.mail-att-info { flex: 1 1 160px; min-width: 0; }
.mail-att-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-att-sel { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; max-width: 200px; }

/* ===== Postfach-Liste: kompakte Spalten ===== */
.mail-snippet { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.mail-from { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Postfach: E-Mail-Liste wie ein Mailprogramm (getrennte Zeilen) ===== */
.mail-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.mail-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .1s; }
.mail-item:last-child { border-bottom: none; }
.mail-item:hover { background: var(--bg); }
.mail-item-dot { width: 9px; height: 9px; border-radius: 50%; background: transparent; margin-top: 6px; flex: 0 0 auto; }
.mail-item.unread .mail-item-dot { background: var(--brand); }
.mail-item-main { flex: 1; min-width: 0; }
.mail-item-top { display: flex; align-items: center; gap: 8px; }
.mail-item-from { font-size: 14px; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item.unread .mail-item-from { font-weight: 700; }
.mail-item-clip { color: var(--muted); display: inline-flex; flex: 0 0 auto; }
.mail-item-date { color: var(--muted); font-size: 12px; white-space: nowrap; flex: 0 0 auto; }
.mail-item-subject { font-size: 14px; color: var(--ink); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item.unread .mail-item-subject { font-weight: 600; }
.mail-item-snip { color: var(--muted); font-size: 13px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-acc-tag { display: inline-block; font-size: 11px; background: var(--brand-soft); color: var(--brand-dark); padding: 1px 7px; border-radius: 999px; font-weight: 600; margin-right: 6px; vertical-align: middle; }
.mail-item-del { flex: 0 0 auto; border: none; background: none; color: #c2255c; opacity: 0; transition: opacity .1s; padding: 5px; border-radius: 8px; align-self: center; display: inline-flex; }
.mail-item:hover .mail-item-del { opacity: 1; }
.mail-item-del:hover { background: #ffe3ec; }

/* ===== STRATO-Stil: Zwei-Spalten-Postfach (Liste links, Lesebereich rechts) ===== */
.mail-split { display: flex; gap: 14px; align-items: stretch; }
.mail-listpane { flex: 0 0 340px; max-width: 340px; border: 1px solid var(--line); border-radius: 12px; overflow: auto; max-height: 74vh; background: #fff; }
.mail-listpane .mail-list { border: none; border-radius: 0; }
.mail-readpane { flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: 12px; max-height: 74vh; overflow: auto; background: #fff; }
.mail-item.sel { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.mail-readempty { min-height: 340px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); padding: 30px; text-align: center; }
.mail-readempty svg { opacity: .35; }
/* Inline-Variante der Lese-Ansicht (kein Pop-up) */
.mailview.inline { max-width: none; width: auto; max-height: none; box-shadow: none; border-radius: 0; overflow: visible; }
.mailview.inline .mailview-head { position: sticky; top: 0; background: #fff; z-index: 2; }
.mailview.inline .mailview-scroll { overflow: visible; }
.mailview.inline .mail-body-frame { height: 50vh; }
@media (max-width: 760px) {
  .mail-split { flex-direction: column; }
  .mail-listpane { flex: none; max-width: none; max-height: 46vh; }
  .mail-readpane { max-height: none; }
  .mailview.inline .mail-body-frame { height: 60vh; }
}

/* ===== Postfach: kompakter Listenkopf (Konto-Dropdown statt breiter Leiste) ===== */
.mail-listpane { display: flex; flex-direction: column; overflow: hidden; }
.mail-listpane .mail-list { flex: 1 1 auto; overflow: auto; min-height: 0; border-radius: 0; }
.mail-listhead { flex: 0 0 auto; display: flex; flex-direction: column; gap: 7px; padding: 10px; border-bottom: 1px solid var(--line); background: var(--bg); }
.mail-acc-select { width: 100%; padding: 10px 12px; border: 1px solid var(--brand); border-radius: 9px; background: var(--brand-soft); font-weight: 700; color: var(--brand-dark); font-size: 14px; cursor: pointer; }
.mail-listhead-row { display: flex; gap: 7px; }
.mail-listhead-row input, .mail-listhead-row select { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 13px; }
.mail-listhead-row .btn { flex: 0 0 auto; }
.mail-sound { font-size: 12px; color: var(--muted); }

/* ===== Postfach: Konten-Tabs oben, Ordnerleiste, Tabelle mit verschiebbaren Spalten ===== */
.mail-accbar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--line); }
.mail-acctab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--line); border-bottom: none; border-radius: 10px 10px 0 0; background: var(--bg); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; margin-bottom: -2px; }
.mail-acctab:hover { background: #fff; }
.mail-acctab.active { background: #fff; border-color: var(--brand); border-bottom: 2px solid #fff; color: var(--brand-dark); box-shadow: 0 -2px 0 var(--brand) inset; }
.mail-folderbar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mail-folder { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; cursor: pointer; }
.mail-folder:hover { background: var(--bg); }
.mail-folder.active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); font-weight: 700; }
.mail-folder-del { margin-left: 2px; color: #c2255c; font-weight: 700; opacity: .55; padding: 0 2px; border-radius: 6px; }
.mail-folder-del:hover { opacity: 1; background: #ffe3ec; }
.mail-folder-add { border-style: dashed; color: var(--brand-dark); font-weight: 600; }
.mail-acc-title .mail-count-inline { margin-left: 8px; color: var(--muted); font-weight: 400; font-size: 12px; }
.mail-movepick { display: flex; flex-direction: column; gap: 8px; min-width: 240px; }
.mail-movepick .btn { justify-content: flex-start; }
.mail-table-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: auto; background: #fff; }
table.mail-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.mail-table thead th { position: sticky; top: 0; background: var(--bg); text-align: left; padding: 9px 12px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; z-index: 1; }
table.mail-table th.mail-th { cursor: grab; user-select: none; }
table.mail-table th.mail-th:hover { background: var(--brand-soft); color: var(--brand-dark); }
table.mail-table th.mail-th.dragging { opacity: .4; }
table.mail-table th.mail-th.drop-target { box-shadow: inset 2px 0 0 var(--brand); background: var(--brand-soft); }
table.mail-table th.mail-th-actions { width: 70px; }
table.mail-table tbody tr.mail-row { cursor: pointer; border-bottom: 1px solid var(--line); }
table.mail-table tbody tr.mail-row:last-child { border-bottom: none; }
table.mail-table tbody tr.mail-row:hover { background: var(--bg); }
table.mail-table td.mail-td { padding: 10px 12px; color: var(--ink); max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.mail-table tr.unread td { font-weight: 700; }
table.mail-table tr.unread td.mail-td-subject::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-right: 7px; vertical-align: middle; }
table.mail-table td.mail-td-date, table.mail-table td.mail-td-attach { white-space: nowrap; color: var(--muted); font-weight: 400; }
table.mail-table td.mail-td-actions { padding: 6px 8px; white-space: nowrap; text-align: right; }
.icon-btn { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 4px 7px; cursor: pointer; color: var(--ink); display: inline-flex; align-items: center; margin-left: 4px; }
.icon-btn:hover { background: var(--brand-soft); border-color: var(--brand); }
@media (max-width: 760px) {
  table.mail-table td.mail-td-account, table.mail-table th[data-key="account"] { display: none; }
  table.mail-table td.mail-td { max-width: 150px; }
}

/* ======================================================================
   3-Spalten-Postfach (Sidebar | Liste | Lesebereich) – modernes Design
   ====================================================================== */
.mail-card { padding: 9px 11px; }
.mail-toolbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 7px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.mail-brand { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; color: var(--brand-dark); }
.mail-toolicons { display: flex; gap: 5px; }
.mail-icobtn { width: 30px; height: 30px; border: 1px solid var(--line); background: var(--card); border-radius: 8px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .12s, border-color .12s; }
.mail-icobtn:hover { background: var(--brand-soft); border-color: var(--brand); }

.mail-shell { position: relative; display: flex; gap: 9px; height: calc(100vh - 168px); min-height: 440px; }
.mail-shell > * { min-width: 0; }

/* Werkzeugleiste links: Ordner-Knopf + Neue E-Mail */
.mail-toolbar-left { display: flex; align-items: center; gap: 8px; }
.mail-foldertoggle { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--card); border-radius: 9px; padding: 6px 11px; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; }
.mail-foldertoggle:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); }
.mail-newbtn-top { padding: 6px 12px !important; box-shadow: none !important; }

/* --- Ordner-Menü als ausklappbares Panel (Drawer) --- */
.mail-drawer { position: absolute; top: 0; left: 0; height: 100%; width: 232px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(20,40,30,.18); transform: translateX(-12px); opacity: 0; visibility: hidden; transition: transform .2s ease, opacity .18s ease, visibility 0s linear .2s; z-index: 20; overflow: hidden; }
.mail-shell.drawer-open .mail-drawer { transform: none; opacity: 1; visibility: visible; transition: transform .2s ease, opacity .18s ease, visibility 0s; }
.mail-drawer-backdrop { position: absolute; inset: 0; background: rgba(15,23,34,.28); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 19; border-radius: 12px; }
.mail-shell.drawer-open .mail-drawer-backdrop { opacity: 1; pointer-events: auto; }
.mail-sidebar { display: flex; flex-direction: column; gap: 6px; height: 100%; overflow-y: auto; padding: 10px; }
.mail-drawer-head { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 13px; color: var(--brand-dark); padding-bottom: 4px; }
.mail-drawer-close { border: none; background: none; font-size: 16px; color: var(--muted); cursor: pointer; line-height: 1; padding: 2px 4px; border-radius: 6px; }
.mail-drawer-close:hover { background: var(--brand-soft); color: var(--brand-dark); }
.mail-newbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; border: none; border-radius: 9px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; font-weight: 700; font-size: 12.5px; cursor: pointer; box-shadow: 0 3px 10px rgba(31,157,87,.26); }
.mail-newbtn:hover { filter: brightness(1.05); }
.mail-accsel { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-size: 12px; font-weight: 600; color: var(--ink); }
.mail-nav { display: flex; flex-direction: column; gap: 1px; }
.mail-navitem { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: none; background: none; border-radius: 8px; color: var(--ink); font-size: 12.5px; cursor: pointer; text-align: left; width: 100%; }
.mail-navitem .ico { color: var(--muted); flex: 0 0 auto; }
.mail-navitem:hover { background: var(--brand-soft); }
.mail-navitem.active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.mail-navitem.active .ico { color: var(--brand-dark); }
.mail-navlabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-navcount { flex: 0 0 auto; background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; padding: 0 6px; border-radius: 999px; min-width: 17px; text-align: center; }
.mail-navhead { display: flex; align-items: center; justify-content: space-between; margin: 9px 4px 1px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mail-navadd { border: none; background: none; color: var(--brand-dark); font-size: 15px; cursor: pointer; line-height: 1; padding: 0 4px; border-radius: 6px; }
.mail-navadd:hover { background: var(--brand-soft); }
.mail-navitem .mail-folder-del { margin-left: auto; }

/* --- Liste (Mitte) --- */
.mail-listcol { flex: 0 0 322px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.mail-listhead2 { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 8px 9px; border-bottom: 1px solid var(--line); }
.mail-search { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 12.5px; }
.mail-search:focus { outline: none; border-color: var(--brand); background: var(--card); }
.mail-refresh-ind { flex: 0 0 auto; min-width: 14px; color: var(--muted); }
.mail-cats { flex: 0 0 auto; display: flex; gap: 3px; padding: 5px 7px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.mail-cat { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: none; background: none; border-radius: 8px; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mail-cat:hover { background: var(--bg); color: var(--ink); }
.mail-cat.active { background: var(--brand-soft); color: var(--brand-dark); }
.mail-cat-badge { background: var(--brand); color: #fff; font-size: 9.5px; font-weight: 700; padding: 0 5px; border-radius: 999px; }
.mail-listbody { flex: 1 1 auto; overflow-y: auto; }
.mail-daygroup { padding: 7px 11px 3px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); position: sticky; top: 0; background: var(--card); z-index: 1; }
.mail-row2 { display: flex; align-items: flex-start; gap: 9px; padding: 7px 11px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .1s; }
.mail-row2:hover { background: var(--bg); }
.mail-row2.sel { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.mail-row2.spam { opacity: .8; }
.mail-ava { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.mail-row2-main { flex: 1; min-width: 0; }
.mail-row2-top { display: flex; align-items: center; gap: 6px; }
.mail-row2-from { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink); }
.mail-row2.unread .mail-row2-from { font-weight: 800; }
.mail-row2-date { flex: 0 0 auto; font-size: 11px; color: var(--muted); }
.mail-row2-sub { display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.mail-row2-subtext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.mail-row2.unread .mail-row2-subtext { color: var(--ink); font-weight: 600; }
.mail-clip { color: var(--muted); font-size: 11px; }
.mail-spambadge { flex: 0 0 auto; background: var(--warn-bg); color: var(--warn); font-size: 9.5px; font-weight: 800; padding: 1px 6px; border-radius: 999px; text-transform: uppercase; }
.mail-star { flex: 0 0 auto; border: none; background: none; color: #c9ced6; font-size: 15px; line-height: 1; cursor: pointer; padding: 2px; align-self: center; }
.mail-star.on { color: #f3b01c; }
.mail-star:hover { color: #f3b01c; }
.mail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 38px 18px; color: var(--muted); text-align: center; font-size: 13px; }
/* Wisch-Gesten: links = löschen, rechts = Spam */
.mail-swipe { position: relative; overflow: hidden; }
.mail-swipe .mail-row2 { position: relative; background: var(--card); z-index: 1; }
.mail-swipe-hint { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; font-weight: 800; font-size: 13px; padding: 0 18px; z-index: 0; }
.mail-swipe-hint.hr { right: 0; left: 0; justify-content: flex-end; background: #fdecef; color: #c2255c; }
.mail-swipe-hint.hl { left: 0; right: 0; justify-content: flex-start; background: #fff4e0; color: #9a6700; }
html.dark .mail-swipe .mail-row2 { background: #16202c; }

/* --- Lesebereich (rechts) --- */
.mail-readpane2 { flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow-y: auto; display: flex; flex-direction: column; }
.mail-readempty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); padding: 34px; text-align: center; font-size: 13px; }
.mail-readempty .ico { opacity: .3; }
.mail-readtop { padding: 8px 10px 0; }
.mail-readpane2 .mailview.inline { padding: 0 12px 12px; }
.mail-readpane2 .mailview-subject { font-size: 17px; }
.mail-setmenu { display: flex; flex-direction: column; gap: 7px; min-width: 250px; }
.mail-setmenu .btn { justify-content: flex-start; }
.mail-colorswatches { display: flex; flex-wrap: wrap; gap: 9px; }
.mail-colorsw { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: 0 0 0 1px var(--line); }
.mail-colorsw.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--ink); }

/* --- Neue E-Mail: kompakt, sauber, klare Struktur --- */
.mail-compose { max-width: 560px; }
/* Beim Senden „fliegt" die E-Mail weg */
.mail-compose.mc-sent-away { transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .45s ease; transform: translateY(-60px) scale(.95); opacity: 0; pointer-events: none; }
.mail-compose .field { margin-bottom: 7px; }
.mail-compose .field > label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 3px; }
.mail-compose input[type="text"], .mail-compose select, .mail-compose textarea { width: 100%; padding: 8px 10px; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }
.mail-compose textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.mail-compose .mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mail-compose .mc-cc { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.mail-compose .mc-cc .link { margin: 0; font-size: 13px; font-weight: 600; color: var(--brand-dark); border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 4px 12px; }
.mail-compose .mc-cc .link:hover { background: var(--brand-soft); border-color: var(--brand); }
.mail-compose .mc-cc .mc-tmpl { margin-left: auto; }
.mail-compose .mc-cc .mc-tmpl select { width: auto; padding: 4px 7px; font-size: 11.5px; }
.mail-compose .mc-ai { display: flex; gap: 8px; align-items: flex-end; padding: 8px; border-radius: 9px; margin-bottom: 7px; }
.mail-compose .mc-aibtns { display: flex; gap: 5px; align-items: flex-end; flex: 0 0 auto; }
.mail-compose .mail-dropzone { padding: 8px; font-size: 12px; border-radius: 8px; }
.mail-compose .mc-sigrow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 7px 0; }
.mail-compose .mc-sigrow select { width: auto; flex: 1; min-width: 130px; }
.mail-compose .mc-sigrow .check { font-size: 12.5px; }
/* Signatur-Vorschau (Text + Bild) unter der Nachricht */
.mail-compose .mc-sigpreview { border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; margin: 4px 0 8px; background: var(--bg); }
.mail-compose .mc-sig-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.mail-compose .mc-sig-text { font-size: 13px; color: var(--ink); white-space: pre-wrap; line-height: 1.45; }
.mail-compose .mc-sig-img { max-width: 100%; max-height: 130px; display: block; margin: 8px 0; border-radius: 6px; }
.mail-compose .mc-sig-card { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; }
.mail-compose .mc-sig-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.mail-compose .mc-sig-name { font-weight: 800; font-size: 14px; color: var(--ink); }
.mail-compose .mc-sig-title { color: var(--brand-dark); font-weight: 600; font-size: 12.5px; margin-bottom: 3px; }
.mail-compose .mc-sig-logo { max-height: 34px; max-width: 150px; display: block; margin: 3px 0; }
.mail-compose .mc-sig-line { font-size: 12.5px; color: var(--ink); }
html.dark .mail-compose .mc-sigpreview { background: #16202c; border-color: #2a3a4a; }
html.dark .mail-compose .mc-sig-text, html.dark .mail-compose .mc-sig-name, html.dark .mail-compose .mc-sig-line { color: #e6edf3; }
.mail-compose .mc-actions { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.mail-compose .mc-hint { margin-top: 9px; font-size: 11.5px; }
/* Datei / KI / Mikro UNTER der Nachricht – drei gleich große, schlanke Knöpfe nebeneinander */
.mail-compose .mc-msgbtns { display: flex; flex-direction: row; gap: 7px; margin: 7px 0; }
.mail-compose .mc-msgbtns > * { flex: 1 1 0; width: auto; margin: 0 !important; justify-content: center; box-sizing: border-box; min-height: 0; }
.mail-compose .mc-msgbtns .mail-dropzone { padding: 5px 6px; border-radius: 8px; font-size: 12.5px; }
.mail-compose .mc-msgbtns .mc-aibtn, .mail-compose .mc-msgbtns .mic-btn { padding: 5px 6px !important; font-size: 12.5px; }
.mail-compose .mc-msgbtns .mic-btn .ico svg { width: 16px; height: 16px; }
/* An & Von: Beschriftung daneben (inline), sauber gestapelt */
.mail-compose .mc-grid .field { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.mail-compose .mc-grid .field > label { margin: 0; flex: 0 0 38px; width: 38px; font-size: 12px; }
.mail-compose .mc-grid .field > input, .mail-compose .mc-grid .field > select { flex: 1; min-width: 0; }
@media (max-width: 560px) { .mail-compose .mc-grid { grid-template-columns: 1fr; gap: 0; } }
html.dark .mail-compose input[type="text"], html.dark .mail-compose select, html.dark .mail-compose textarea { background: #0f1722; border-color: #2a3a4a; color: #e6edf3; }
html.dark .mail-compose .field > label { color: #93a1b0; }
html.dark .mail-compose .mc-ai { background: #16202c; }

/* Kleine Meldung unten (gelöscht / Spam) */
.mail-flash { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px); background: #1f2a36; color: #fff; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.28); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 4000; }
.mail-flash.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Neue E-Mail am Handy: noch kompakter, Knöpfe klein & nebeneinander, alles auf einen Schirm */
@media (max-width: 620px) {
  .mail-compose { max-width: none; }
  .mail-compose .field { margin-bottom: 7px; }
  .mail-compose .field > label { font-size: 12.5px; }
  /* Felder schlanker (dünner) + Text 14px */
  .mail-compose input[type="text"], .mail-compose select { font-size: 14px; padding: 7px 10px; }
  .mail-compose textarea { font-size: 14px; padding: 8px 10px; }
  /* An & Von voll über die Breite, Beschriftung daneben */
  .mail-compose .mc-grid { grid-template-columns: 1fr; gap: 0; }
  .mail-compose textarea { min-height: 52vh; }
  .mail-compose .mc-msgbtns { gap: 6px; }
  .mail-compose .mc-msgbtns .mail-dropzone, .mail-compose .mc-msgbtns .mc-aibtn, .mail-compose .mc-msgbtns .mic-btn { padding: 6px 4px !important; font-size: 12px; }
  .mail-compose .mc-toprow { gap: 7px; }
  .mail-compose .mc-toprow .mc-filebtn { padding: 8px 10px; font-size: 13px; }
  .mail-compose .mc-aibtn { padding: 8px 12px !important; font-size: 13px; }
  /* KI-Box kleiner/kompakter */
  .mail-compose .mc-ai { flex-direction: column; align-items: stretch; gap: 5px; padding: 6px 7px; }
  .mail-compose .mc-ai .field > label { font-size: 11px; margin-bottom: 1px; }
  .mail-compose .mc-ai input { font-size: 13.5px; padding: 6px 9px; }
  .mail-compose .mc-aibtns { justify-content: flex-end; gap: 5px; }
  .mail-compose .mc-aibtns .btn { padding: 4px 9px !important; font-size: 12px; }
  /* Mikrofon kleiner */
  .mail-compose .mc-aibtns .mic-btn { padding: 4px 7px !important; }
  .mail-compose .mc-aibtns .ico svg { width: 13px; height: 13px; }
  .mail-compose .field .mic-btn { padding: 6px 8px !important; align-self: flex-start; }
  .mail-compose .field .mic-btn .ico svg { width: 15px; height: 15px; }
  .mail-compose .mail-dropzone { padding: 8px 10px; font-size: 12.5px; }
  /* Signatur-Zeile viel kleiner */
  .mail-compose .mc-sigrow { gap: 6px; margin: 6px 0; }
  .mail-compose .mc-sigrow .check { font-size: 11.5px; }
  .mail-compose .mc-sigrow select { min-width: 0; flex: 1; font-size: 11.5px; padding: 4px 7px; }
  /* Senden-Knopf etwas kleiner (nicht volle Breite) */
  .mail-compose .mc-actions { flex-wrap: wrap; }
  .mail-compose .mc-actions .btn { flex: 0 0 auto; padding: 8px 22px; font-size: 14px; }
  .mail-compose .mc-hint { font-size: 12px; margin-top: 8px; }
  /* Betreff etwas kompakter */
  .mail-compose .mc-subject input { font-size: 14.5px; padding: 7px 10px; }
}

/* --- Blockliste-Dialog --- */
.block-list { display: flex; flex-direction: column; gap: 6px; max-height: 44vh; overflow-y: auto; }
.block-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; }
.block-addr { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.block-act { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.block-act.del { background: var(--warn-bg); color: var(--warn); }
.block-act.spam { background: #fff4e0; color: #9a6700; }

/* Mittlere Breite: Lesebereich erst zeigen, wenn eine Mail gewählt ist (sonst Liste breit). */
/* 2 Spalten: Liste breit, Lesebereich erst sichtbar, wenn eine Mail gewählt ist (auf schmaleren Schirmen). */
@media (max-width: 1080px) {
  .mail-listcol { flex: 1 1 auto; }
  .mail-shell:not(.has-sel) .mail-readpane2 { display: none; }
  .mail-shell.has-sel .mail-listcol { display: none; }
  .mail-shell.has-sel .mail-readpane2 { flex: 1 1 auto; }
}
@media (max-width: 620px) {
  .mail-shell { height: calc(100vh - 150px); min-height: 72vh; }
  .mail-drawer { width: 82%; max-width: 300px; }
  .mail-toolbar-left .mail-foldertoggle-lbl { display: none; }
}

/* ===== Dunkelmodus (nur Postfach) ===== */
html.dark .mail-card { background: #0f1722; color: #e6edf3; border-color: #243240; }
html.dark .mail-toolbar { border-color: #243240; }
html.dark .mail-brand { color: #5fd99a; }
html.dark .mail-icobtn { background: #16202c; border-color: #2a3a4a; color: #e6edf3; }
html.dark .mail-icobtn:hover { background: #1d2a38; border-color: #3b82f6; }
html.dark .mail-accsel { background: #16202c; border-color: #2a3a4a; color: #e6edf3; }
html.dark .mail-navitem { color: #cdd7e1; }
html.dark .mail-navitem .ico { color: #8b9aa8; }
html.dark .mail-navitem:hover { background: #1d2a38; }
html.dark .mail-navitem.active { background: #173a2c; color: #6fe3a3; }
html.dark .mail-navitem.active .ico { color: #6fe3a3; }
html.dark .mail-navhead { color: #7d8c9a; }
html.dark .mail-listcol, html.dark .mail-readpane2 { background: #16202c; border-color: #243240; }
html.dark .mail-listhead2, html.dark .mail-cats, html.dark .mail-row2, html.dark .mail-daygroup { border-color: #243240; }
html.dark .mail-daygroup { background: #16202c; color: #8b9aa8; }
html.dark .mail-search { background: #0f1722; border-color: #2a3a4a; color: #e6edf3; }
html.dark .mail-cat { color: #8b9aa8; }
html.dark .mail-cat:hover { background: #1d2a38; color: #e6edf3; }
html.dark .mail-cat.active { background: #173a2c; color: #6fe3a3; }
html.dark .mail-row2:hover { background: #1d2a38; }
html.dark .mail-row2.sel { background: #173a2c; box-shadow: inset 3px 0 0 #2fae6a; }
html.dark .mail-row2-from, html.dark .mail-row2.unread .mail-row2-subtext { color: #e6edf3; }
html.dark .mail-row2-date, html.dark .mail-row2-subtext, html.dark .mail-clip, html.dark .mail-empty, html.dark .mail-readempty { color: #93a1b0; }
html.dark .mail-readpane2 .mailview-subject, html.dark .mail-readpane2 .mailview-meta { color: #e6edf3; }
html.dark .mail-readpane2 .mail-body-text { color: #e6edf3; }
html.dark .mail-icobtn[title*="Dunkel"] { background: #173a2c; }
.mail-count { font-size: 12px; color: var(--muted); }

/* ===== Postfach-Konten als aufklappbare Navigation (unter „Postfach") ===== */
nav.side button.nav-parent { display: flex; align-items: center; gap: 8px; }
.nav-caret { margin-left: auto; font-size: 11px; color: var(--muted); padding: 3px 5px; border-radius: 5px; transition: transform .15s; }
.nav-caret.open { transform: rotate(180deg); }
.nav-caret:hover { background: rgba(0,0,0,.06); }
nav.side button.active .nav-caret { color: rgba(255,255,255,.85); }
.nav-sub { display: flex; flex-direction: column; margin: 1px 0 4px; }
nav.side button.nav-subitem { display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px 28px; font-size: 13px; color: var(--ink); border-radius: 8px; margin-bottom: 1px; }
nav.side button.nav-subitem:hover { background: var(--bg); }
nav.side button.nav-subitem.active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
nav.side button.nav-subitem .ico { opacity: .55; }
nav.side button.nav-add { color: var(--brand-dark); border: 1px dashed var(--border); margin-top: 6px; font-size: 13px; }
nav.side button.nav-add:hover { background: var(--brand-soft); }
/* Konto-Titel im Listenkopf */
.mail-acc-title { display: flex; align-items: center; gap: 7px; font-weight: 700; color: var(--brand-dark); font-size: 14px; }
.mail-acc-title .ico { opacity: .7; }

/* ===== Postfach: kompakter & kleiner ===== */
.mail-listhead { padding: 8px; gap: 6px; }
.mail-acc-title { font-size: 13px; gap: 6px; flex-wrap: wrap; }
.mail-count-inline { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: auto; }
.mail-listhead-row input, .mail-listhead-row select { padding: 6px 8px; font-size: 12px; }
.mail-listhead-row .btn.small { padding: 5px 8px; font-size: 13px; }
.mail-soundbtn { flex: 0 0 auto; font-size: 14px; line-height: 1; }
.mail-item { padding: 9px 12px; gap: 9px; }
.mail-item-from, .mail-item-subject { font-size: 13px; }
.mail-item-snip { font-size: 12px; }
.mail-item-date { font-size: 11px; }

/* ===== Postfach: noch schmaler & nur Absender + Betreff ===== */
.mail-listpane { flex: 0 0 300px; max-width: 300px; }
.mail-item { padding: 7px 11px; gap: 8px; }
.mail-item-dot { margin-top: 5px; }
.mail-item-subject { margin-top: 1px; }
@media (max-width: 760px) { .mail-listpane { flex: none; max-width: none; } }

/* ===== Postfach: Anhang-Zeile kompakter ===== */
.mail-att { padding: 8px 10px; gap: 7px; }
.mail-att .btn { padding: 4px 9px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.mail-att .btn .ico { display: inline-flex; }
.mail-att-sel { padding: 5px 7px; font-size: 12px; max-width: 165px; }
.mail-att-name { font-size: 13px; }
.mail-att .mail-att-info .hint { font-size: 11px; }
.mail-att-ic { color: var(--brand-dark); }

/* ===== Navigation frei sortierbar (Drag & Drop) ===== */
nav.side button[draggable="true"] { cursor: grab; }
nav.side button[draggable="true"]:active { cursor: grabbing; }
nav.side button.nav-dragging { opacity: .45; }
nav.side button.drop-before { box-shadow: inset 0 3px 0 0 var(--brand); }
nav.side button.drop-after { box-shadow: inset 0 -3px 0 0 var(--brand); }
.nav-hint { font-size: 10px; color: var(--muted); padding: 12px 12px 2px; opacity: .65; }

/* ===== Startseite (Dashboard): Banner + Widgets ===== */
.home-banner { position: relative; border-radius: 14px; overflow: hidden; min-height: 200px; margin-bottom: 18px; background-size: cover; background-position: center; box-shadow: var(--shadow); background-color: #0f3d28; }
.home-banner-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 30px 36px; background: linear-gradient(120deg, #0c3a26 0%, #14633f 55%, #1f9d57 120%); }
.home-banner.has-img .home-banner-fallback { display: none; }
.hb-kicker { color: #6ee7a8; font-weight: 700; letter-spacing: .14em; font-size: 13px; }
.hb-title { color: #fff; font-weight: 800; font-size: clamp(24px, 4vw, 44px); line-height: 1.05; }
.hb-name { color: #cdeedd; font-size: 15px; margin-top: 2px; }
.home-banner-tools { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; }
.home-banner-tools .btn { background: rgba(255,255,255,.92); }
.home-banner-tools .btn:hover { background: #fff; }
/* Statistik-Kacheln */
.home-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
.home-stat { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; box-shadow: var(--shadow); cursor: pointer; transition: transform .1s, border-color .1s; }
.home-stat:hover { transform: translateY(-2px); border-color: var(--brand); }
.home-stat-ic { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 10px; background: var(--brand-soft); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; }
.home-stat-val { font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1; }
.home-stat-lbl { font-size: 13px; color: var(--muted); margin-top: 3px; }
/* Drei Spalten */
.home-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.home-col { margin-bottom: 0; }
.home-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 14px; }
.home-row:last-child { border-bottom: none; }
.home-row:hover { color: var(--brand-dark); }
.home-row-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-task { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; cursor: pointer; }
.home-task:last-child { border-bottom: none; }
.home-task input { width: auto; flex: 0 0 auto; }
.home-task.done .home-row-t { text-decoration: line-through; opacity: .55; }

/* ===== Kunden: Google-Maps-Block ===== */
.maps-block { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); }
.maps-head { display: flex; align-items: center; gap: 6px; padding: 10px 12px; font-size: 14px; flex-wrap: wrap; }
.maps-frame { width: 100%; height: 240px; border: 0; display: block; }
.maps-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 12px; }
.maps-actions .btn { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }

/* ===== Aufgaben-Seite ===== */
.task-list { display: flex; flex-direction: column; gap: 10px; }
.task-card { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; }
.task-card.done { opacity: .6; background: var(--bg); }
.task-card.done .task-text2 { text-decoration: line-through; }
.task-card > input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; cursor: pointer; }
.task-body { flex: 1 1 auto; min-width: 0; }
.task-text2 { font-weight: 600; font-size: 15px; }
.task-photo { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; flex: 0 0 auto; }
.task-photo:hover { filter: brightness(.95); }
.task-acts { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; text-align: right; }
.task-acts .link { margin: 0; }

/* ===== Startseite: Schnellzugriff-Kacheln ===== */
.home-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
.home-tile { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 8px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink); transition: transform .1s, border-color .1s, background .1s; }
.home-tile:hover { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-2px); }
.home-tile-ic { color: var(--brand-dark); display: inline-flex; }

/* ===== Kunden-Board kompakter & feiner ===== */
.kanban { gap: 10px; }
.kan-col { flex: 0 0 208px; max-height: 70vh; border-radius: 10px; }
.kan-head { padding: 7px 11px; font-size: 12.5px; font-weight: 700; border-radius: 10px 10px 0 0; }
.kan-count { font-size: 11px; padding: 0 7px; }
.kan-body { padding: 7px; gap: 7px; min-height: 48px; }
.kan-card { padding: 8px 10px; border-radius: 8px; }
.kan-card .cust-name { font-size: 13.5px; margin-bottom: 2px; }
.kan-card .hint { font-size: 12px; }

/* ===== Termin: Kunden-Antwort (bestätigt/abgesagt) ===== */
.appt-resp { padding: 9px 12px; border-radius: 8px; font-weight: 700; font-size: 13px; margin-bottom: 12px; }
.appt-resp.ok { background: var(--brand-soft); color: var(--brand-dark); }
.appt-resp.no { background: #fdecef; color: #b00020; }

/* ===== Kalender: Kundenname unter dem Titel ===== */
.evt-label { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; white-space: normal; padding: 2px 5px; }
.evt-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt-cust { font-size: 10px; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; font-weight: 600; }
.cal-bar { height: 32px; }
.cal-bar-label { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.1; padding: 0 8px; white-space: normal; }

/* ===== Signatur-Block-Editor ===== */
.sig-blocks { display: flex; flex-direction: column; gap: 10px; margin: 6px 0; }
.sig-block { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--bg); }
.sig-block-tools { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.sig-block-type { font-weight: 700; font-size: 13px; margin-right: auto; }
.sig-block-tools .btn.small { padding: 3px 9px; }
.sig-block-img { max-width: 220px; max-height: 130px; border: 1px solid var(--line); border-radius: 8px; display: block; margin-bottom: 6px; }
.sig-block textarea { width: 100%; }

/* ===== Signatur: Visitenkarte-Baustein ===== */
.sig-card-edit { display: flex; flex-direction: column; gap: 8px; }
.sig-card-imgs { display: flex; gap: 18px; flex-wrap: wrap; }
.sig-card-imgs .sig-block-img { max-width: 84px; max-height: 84px; object-fit: cover; border-radius: 8px; }

/* ===== Responsiv / seitenkonform ===== */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); font-size: 20px; line-height: 1; color: var(--ink); flex: 0 0 auto; cursor: pointer; }
.nav-backdrop { display: none; }
main.content { max-width: 1400px; width: 100%; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  header.topbar { padding: 8px 12px; gap: 10px; }
  header.topbar .brand { font-size: 15px; }
  header.topbar .brand small { display: none; }
  .layout { display: block; min-height: 0; }
  nav.side { position: fixed; top: 0; left: 0; height: 100vh; width: 250px; max-width: 84vw; transform: translateX(-100%); transition: transform .25s ease; z-index: 60; box-shadow: 0 0 32px rgba(0,0,0,.28); overflow-y: auto; }
  body.nav-open nav.side { transform: translateX(0); }
  body.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 55; }
  main.content { padding: 14px; max-width: 100%; }
  .card { padding: 14px; }
  /* breite Tabellen seitlich scrollbar statt überquellend */
  .card table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}
@media (max-width: 480px) {
  header.topbar select.company { max-width: 44vw; }
  header.topbar .right { gap: 8px; font-size: 13px; }
  main.content { padding: 10px; }
}

/* ===== Handy: kompakte, saubere Kopfzeile ===== */
@media (max-width: 860px) {
  header.topbar { flex-wrap: nowrap; align-items: center; }
  header.topbar .brand { min-width: 0; flex: 1 1 auto; gap: 8px; }
  header.topbar .brand-text { min-width: 0; }
  header.topbar #companyName { font-size: 14px; font-weight: 700; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  header.topbar .right { flex: 0 0 auto; margin-left: auto; gap: 8px; flex-wrap: nowrap; }
  header.topbar select.company { max-width: 40vw; font-size: 13px; padding: 6px 8px; }
  .topbar-user { display: none; } /* „admin (Admin)" auf dem Handy ausblenden – spart Platz */
  /* größere Touch-Flächen im Menü */
  nav.side button { padding: 11px 12px; }
  nav.side button.nav-subitem { padding: 10px 10px 10px 30px; }
}
@media (max-width: 560px) {
  header.topbar #companyName { display: none; } /* Firmenname steht bereits im Auswahlfeld */
  header.topbar select.company { max-width: 56vw; font-weight: 700; }
}

/* ===== Arabisch / RTL ===== */
[dir="rtl"] body { direction: rtl; }
[dir="rtl"] .field label, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] p, [dir="rtl"] td, [dir="rtl"] th, [dir="rtl"] .chatmsg { text-align: right; }
[dir="rtl"] nav.side button { text-align: right; }
[dir="rtl"] header.topbar .right { margin-left: 0; margin-right: auto; }
[dir="rtl"] .ai-fab { right: auto; left: 22px; }
[dir="rtl"] .ai-panel { right: auto; left: 22px; }
@media (max-width: 860px) {
  [dir="rtl"] nav.side { left: auto; right: 0; transform: translateX(100%); border-right: none; border-left: 1px solid var(--line); }
  [dir="rtl"] body.nav-open nav.side { transform: translateX(0); }
  [dir="rtl"] .ai-fab { left: 14px; }
  [dir="rtl"] .ai-panel { left: 8px; right: 8px; }
}
.lang-btn { font-weight: 700; }

/* ===== Handy: Dialoge/Formulare sauber, kein Überlappen ===== */
.modal { max-width: calc(100vw - 20px); }
@media (max-width: 560px) {
  .modal { width: calc(100vw - 20px); padding: 16px; max-height: 88vh; overflow-y: auto; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1 1 auto; }
  .contract-grid { grid-template-columns: 1fr; }
  .toolbar { flex-wrap: wrap; }
  .btnbar { flex-wrap: wrap; }
  .actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .sigpad { height: 120px; }
}

/* ===== Handy: horizontalen Überlauf verhindern (Kopfzeile schrumpft sauber) ===== */
html, body { max-width: 100%; overflow-x: hidden; }
#appView, .layout, main.content { max-width: 100%; }
@media (max-width: 860px) {
  header.topbar { max-width: 100vw; overflow: hidden; }
  header.topbar .right { flex: 0 1 auto; min-width: 0; }
  header.topbar select.company { flex: 1 1 auto; min-width: 0; }
  header.topbar .brand { flex: 0 1 auto; }
}

/* ===== Handy: kompakter + Buttons untereinander (Kundenseite & Dokument-Boxen) ===== */
@media (max-width: 560px) {
  body { font-size: 14px; }
  main.content { padding: 10px; }
  .card { padding: 12px; border-radius: 12px; }
  .card h2, main.content h2 { font-size: 18px; }
  .card h3 { font-size: 15px; }
  .btn { padding: 9px 12px; font-size: 14px; }
  .btn.small { padding: 7px 10px; font-size: 13px; }
  /* Kundenseite: Kopf-Buttons untereinander, volle Breite */
  .cust-detailbar { flex-direction: column; align-items: stretch; }
  .cust-detailbar > .btn { width: 100%; }
  .cust-detailbtns { flex-direction: column; width: 100%; }
  .cust-detailbtns .btn { width: 100%; justify-content: center; }
  /* Dokument-Boxen (Hochladen / Abnahmeprotokoll / Vereinbarung …) untereinander */
  .droptarget > button { display: block; width: 100%; margin: 8px 0 0 !important; }
  /* Kanban-Spalten etwas schmaler, damit weniger gescrollt werden muss */
  .kanban > * { min-width: 78vw; }
  /* Status-/Aktionszeilen umbrechen sauber */
  .status-badge { font-size: 12px; }
}

/* ===== Handy: alle Seiten kompakter (Zeit & Lohn, Mitarbeiter, Buchhaltung, Kacheln) ===== */
@media (max-width: 560px) {
  /* grüne Kennzahl-Kacheln kleiner und 2-spaltig */
  .summary-grid, .home-stats { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .stat { padding: 9px 10px; border-radius: 9px; }
  .stat .value { font-size: 16px; }
  .stat .label { font-size: 11px; }
  /* Tabellen kompakter (Zeiterfassung, Lohn, Mitarbeiter, Buchhaltung) */
  .card table { font-size: 12.5px; }
  .card th, .card td { padding: 6px 7px; }
  /* Eingaben/Auswahl kleiner */
  input, select, textarea { font-size: 14px; }
  .toolbar { gap: 8px; row-gap: 8px; }
  .toolbar .field { min-width: 0; }
  .toolbar select, .toolbar input { padding: 7px 8px; }
  /* Jahresübersicht-Balken schmaler */
  .yearbar-row { grid-template-columns: 60px 1fr 52px; font-size: 12px; gap: 6px; }
  /* Schnellzugriff-Kacheln auf der Startseite kleiner */
  .home-quick { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
  .home-quick a, .home-quick button { padding: 10px 6px; font-size: 12px; }
  /* Status-Auswahl & Badges kompakt */
  .status-badge { font-size: 11px; padding: 3px 8px; }
}
@media (max-width: 380px) {
  .summary-grid, .home-stats { grid-template-columns: 1fr 1fr; }
  .stat .value { font-size: 15px; }
}

/* ===== Startseite: Aktionen im kleinen Aufklapp-Menü ===== */
.home-menu { position: relative; }
.home-menu-list { position: absolute; top: calc(100% + 6px); right: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; min-width: 200px; display: none; flex-direction: column; gap: 2px; z-index: 30; }
.home-menu.open .home-menu-list { display: flex; }
.home-menu-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 9px 12px; border-radius: 7px; cursor: pointer; font-size: 14px; color: var(--ink); }
.home-menu-item:hover { background: var(--bg); }
[dir="rtl"] .home-menu-list { right: auto; left: 0; }
[dir="rtl"] .home-menu-item { text-align: right; }

/* ===== Handy: Startseite-Kacheln, Kalender-Kopf, Kunden-Board ===== */
@media (max-width: 560px) {
  /* Startseiten-Kacheln (Termine heute, Offene Aufgaben, …) kompakter */
  .home-stat { padding: 11px; gap: 9px; border-radius: 11px; }
  .home-stat-ic { width: 34px; height: 34px; }
  .home-stat-val { font-size: 19px; }
  .home-stat-lbl { font-size: 11.5px; }
  /* Schnellzugriff kompakter */
  .home-quick a, .home-quick button { padding: 9px 6px; }
  /* Kalender: „Löschen"-Ablage (Drag) auf dem Handy ausblenden, Auswahl kleiner */
  .cal-trash { display: none; }
  select.cal-jump { padding: 6px 6px; font-size: 13px; max-width: 42vw; }
  /* Kunden-Board: Status-Spalten untereinander statt nebeneinander */
  .kanban { flex-direction: column; overflow-x: visible; }
  .kanban > * { min-width: 100%; width: 100%; }
}

/* ===== Handy: Dashboard, Schichtplan, KI-Button, Buchhaltung kleiner ===== */
@media (max-width: 560px) {
  /* Dashboard: Mitarbeiter-Stundenkarten 2-spaltig + kleiner */
  .banner-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .banner { padding: 10px !important; }
  .banner-hours { font-size: 18px !important; }
  .banner-name { font-size: 12.5px; }
  .banner-sub { font-size: 10.5px; }
  /* Schichtplan: kompakter, damit mehr Tage sichtbar sind */
  .shiftgrid table { min-width: 520px; }
  .shiftgrid td.cell { min-width: 54px; height: 40px; }
  .shiftgrid th, .shiftgrid td { font-size: 11px; padding: 3px; }
  .shiftchip { font-size: 9.5px; padding: 2px 4px; }
  .shiftcal { font-size: 11px; }
  /* KI-Button (FAB) kleiner */
  .ai-fab { width: 46px; height: 46px; }
  .ai-fab svg { width: 20px; height: 20px; }
  /* Buchhaltung & Dokument-Boxen kompakter, ZIP-Buttons nebeneinander */
  .droptarget { padding: 11px; }
  .droptarget h3, .ico-head { font-size: 14px; }
  .ico-head .ico svg { width: 16px; height: 16px; }
  .btnbar { gap: 6px; }
  .btnbar a.btn, .btnbar .btn { flex: 1 1 auto; justify-content: center; }
}

/* ===== Handy: Postfach-Kopf (Tabs, Konto-Banner, Suche, Auswahl) deutlich kleiner ===== */
@media (max-width: 560px) {
  .mail-tabs { gap: 5px; }
  .mail-tabs .btn { padding: 6px 8px; font-size: 12px; }
  .mail-tabs .btn .ico svg { width: 14px; height: 14px; }
  .mail-listhead { padding: 8px; gap: 6px; border-radius: 9px; }
  .mail-acc-title { font-size: 12px; gap: 5px; }
  .mail-acc-title .ico svg { width: 14px; height: 14px; }
  .mail-count-inline { font-size: 10.5px; }
  .mail-listhead input, .mail-listhead select { font-size: 12.5px; padding: 6px 8px; }
  .mail-listhead .btn { padding: 6px 8px; font-size: 12px; }
  .mail-item { padding: 8px 10px; }
  .mail-item-from { font-size: 12.5px; }
  .mail-item-subject { font-size: 12px; }
  .mail-item-date { font-size: 10.5px; }
}

/* ===== Handy: E-Mail-Leseansicht (Aktionen, Anhänge) kleiner ===== */
@media (max-width: 560px) {
  .mail-backbar .btn { padding: 4px 8px; font-size: 11px; }
  /* „Zurück" klein */
  .mail-readtop .btn { padding: 4px 9px; font-size: 11px; }
  /* Kopf kompakt, Betreff viel kleiner, ganz nach oben */
  .mailview-head { padding: 8px 12px; gap: 8px; }
  .mailview-subject, .mail-readpane2 .mailview-subject { font-size: 13px; font-weight: 700; line-height: 1.25; -webkit-line-clamp: 2; }
  .mailview-meta { font-size: 10px; }
  .mail-avatar { width: 24px; height: 24px; font-size: 11px; }
  .mailview-close { width: 24px; height: 24px; }
  /* Reihe 1: Antworten + Weiterleiten (je halbe Breite). Reihe 2: Symbol-Knöpfe gleich breit & dünn. */
  .mailview-actions { gap: 6px; flex-wrap: wrap; padding: 7px 10px; }
  .mailview-actions .mv-act { flex: 1 1 44%; justify-content: center; padding: 6px 8px; font-size: 11.5px; }
  .mailview-actions .mv-act.mv-icononly { flex: 1 1 16%; min-width: 0; height: 30px; padding: 0; }
  .mailview-actions .mv-act .ico svg { width: 16px; height: 16px; }
  /* E-Mail-Inhalt etwas kleiner */
  .mailview-body .mail-body-text { font-size: 13px; padding: 14px 16px; line-height: 1.55; }
  .mail-readpane2 .mailview.inline .mail-body-frame { height: 56vh; }
  /* Anhänge: Ablegen / Ansehen / Senden / Auswahl kompakt */
  .mail-att { gap: 6px; padding: 8px; flex-wrap: wrap; }
  .mail-att-name { font-size: 12.5px; }
  .mail-att .btn, .mail-att-btn { padding: 5px 8px; font-size: 11.5px; }
  .mail-att-sel { font-size: 11.5px; padding: 5px 7px; max-width: 46vw; }
  .mailview-atts-wrap .ico-head { font-size: 13px; }
}

/* ===== Handy: Schichtplan-Uhrzeiten/Zellen noch kleiner ===== */
@media (max-width: 560px) {
  .shiftgrid table { min-width: 460px; }
  .shiftgrid td.cell { min-width: 46px; height: 34px; }
  .shiftgrid th, .shiftgrid td { font-size: 10px; padding: 2px; }
  .shiftchip { font-size: 8.5px; padding: 1px 3px; border-radius: 4px; }
  .shiftchip .chiphours { font-size: 8px; }
  .shiftcal { font-size: 10px; }
  .shiftcal td, .shiftcal th { padding: 2px; }
}

/* ===== Mitarbeiter-Liste: schlicht & schön (Name + Aktionen) ===== */
.emp-list { display: flex; flex-direction: column; gap: 8px; }
.emp-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.emp-row:hover { border-color: var(--brand); }
.emp-row.inactive { opacity: .6; }
.emp-ava { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; }
.emp-name { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-inactive { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--bg); padding: 1px 8px; border-radius: 999px; }
.emp-actions { flex: 0 0 auto; display: flex; gap: 6px; }
.emp-actions .btn.small { padding: 6px 10px; }
@media (max-width: 560px) { .emp-actions .btn.small span { display: none; } .emp-name { font-size: 14px; } }

/* ===== Dokumente als kompakte Kacheln nebeneinander (weniger scrollen) ===== */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; margin: 6px 0; }
.doc-tile { border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; display: flex; flex-direction: row; align-items: stretch; }
.doc-tile:hover { border-color: var(--brand); }
.doc-tile-main { border: none; background: none; text-align: left; padding: 8px 10px; cursor: pointer; display: flex; flex-direction: row; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.doc-tile-ic { flex: 0 0 auto; display: inline-flex; align-items: center; }
.doc-tile-ic .ico { color: var(--brand-dark); }
.doc-tile-ic .ico svg { width: 22px; height: 22px; }
.doc-tile-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.doc-tile-name { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-tile-date { font-size: 11px; color: var(--muted); }
.doc-tile-actions { display: flex; flex: 0 0 auto; border-left: 1px solid var(--line); }
.doc-mini { border: none; background: none; padding: 8px 8px; cursor: pointer; color: var(--ink); border-right: 1px solid var(--line); display: inline-flex; align-items: center; }
.doc-mini:last-child { border-right: none; }
.doc-mini:hover { background: var(--brand-soft); }
.doc-mini.del:hover { background: var(--warn-bg); }
@media (max-width: 560px) { .doc-grid { grid-template-columns: 1fr; gap: 6px; } }

/* Einfache Zahlungs-Tabelle (Offene Rechnungen / USt) */
.trk-paidlabel { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.trk-simple .trk-actions { white-space: nowrap; }
.trk-simple .trk-actions .link { margin: 0 4px 0 0; font-size: 16px; }
@media (max-width: 560px) { .trk-simple th, .trk-simple td { padding: 7px 6px; font-size: 12.5px; } }

/* Aktions-Symbole klein & dezent (Dokument-Kacheln + Zahlungs-Tabelle) */
.doc-mini { padding: 5px 4px; }
.doc-mini .ico svg { width: 14px; height: 14px; }
.doc-mini .ico { color: var(--muted); }
.doc-mini:hover .ico { color: var(--brand-dark); }
.trk-simple .trk-actions .link { margin: 0 2px; }
.trk-simple .trk-actions .link .ico svg { width: 15px; height: 15px; }
.trk-simple .trk-actions .link .ico { color: var(--muted); }
.trk-simple .trk-actions .link:hover .ico { color: var(--brand-dark); }