: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-logo { display: block; width: 92px; height: 92px; margin: 0 auto 14px; border-radius: 18px; object-fit: contain; box-shadow: 0 4px 14px rgba(20,40,30,.14); }
.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 - var(--topbar-h, 56px)); align-items: flex-start; }
/* Hauptmenü bleibt beim Scrollen IMMER sichtbar fest unter der Topbar verankert (sticky);
   --topbar-h wird per JS auf die echte Kopfzeilenhöhe gesetzt, damit es bündig klebt.
   Nur das Menü selbst scrollt, wenn es länger als der Bildschirm ist. */
nav.side { width: 210px; background: var(--card); border-right: 1px solid var(--line); padding: 14px 10px; flex-shrink: 0; position: sticky; top: var(--topbar-h, 56px); align-self: flex-start; height: calc(100vh - var(--topbar-h, 56px)); overflow-y: auto; overscroll-behavior: contain; }
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-MEMO: 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; }
/* ===== Trockenbau-Kalkulator ===== */
.kalk-top { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 12px; }
.kalk-top .field { flex: 1; min-width: 200px; }
.kalk-walls { display: flex; flex-direction: column; gap: 12px; }
.kalk-wall { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--bg); }
.kalk-wall-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.kalk-wall-name { font-weight: 700; border: none; background: transparent; font-size: 15px; flex: 1; min-width: 0; padding: 4px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.kalk-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; }
.kalk-fields .field label { font-size: 12px; color: var(--muted); }
.kalk-fields .field input, .kalk-fields .field select { width: 100%; }
.kalk-doors-wrap { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.kalk-doors { display: flex; flex-direction: column; gap: 10px; }
.kalk-door { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.kalk-door-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kalk-door label { font-size: 12px; color: var(--muted); }
.kalk-door input[type=number] { width: 84px; }
.kalk-door-pos { display: flex; flex-direction: column; gap: 2px; }
.kalk-pos-lbl { font-size: 12px; color: var(--muted); }
.kalk-door-pos input[type=range] { width: 100%; accent-color: var(--brand); }
.kalk-pos-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.kalk-wall-meta { font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kalk-wall-foot { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 6px; }
.kalk-wall-sum { font-size: 13px; color: var(--brand-dark); font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 4px; }
.kalk-wall-svg { margin-top: 8px; }
.kalk-wall-svg svg { display: block; max-width: 100%; height: auto; }
.btn.danger.small { color: var(--warn); }
.kalk-resultbox { margin-top: 6px; }
.kalk-sum-head { font-weight: 700; margin-bottom: 6px; color: var(--brand-dark); }
.kalk-result { width: 100%; border-collapse: collapse; }
.kalk-result th, .kalk-result td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
.kalk-result th { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.kalk-result td.num, .kalk-result th.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.kalk-saved { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 6px; }
.kalk-saved-act { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
@media (max-width: 560px) { .kalk-top .field { min-width: 100%; } .kalk-door input { width: 72px; } }
/* 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; }
/* ===== KI-Scanner — durchgängig im App-Design ===== */
/* Sinnvolle Dialogbreite (gezielt nur für den Scanner, andere Modals unverändert). */
.modal:has(.scan-dialog) { max-width: 620px; padding: 22px 24px 20px; }
.modal:has(.scan-dialog) h2 { font-family: var(--serif); letter-spacing: -.01em; color: var(--ink); margin: 0 0 4px; }
.scan-dialog { counter-reset: scanstep; }
.scan-dialog .scan-step { margin: 18px 0; }
.scan-dialog .scan-step:first-child { margin-top: 10px; }
/* Schritt-Überschriften mit grüner Nummern-Plakette (1/2/3) — nur das erste Label je Schritt. */
.scan-dialog .scan-step > label:first-child {
  display: flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 16px;
  font-weight: 600; letter-spacing: -.01em; color: var(--ink); margin-bottom: 10px;
}
.scan-dialog .scan-step > label:first-child::before {
  counter-increment: scanstep; content: counter(scanstep);
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Alle Eingabefelder im Scanner im App-Look (rund, gepolstert, weiß). */
.scan-dialog input[type="text"], .scan-dialog input[type="number"], .scan-dialog select {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: 15px;
}
.scan-dialog input[type="text"]:focus, .scan-dialog input[type="number"]:focus, .scan-dialog select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.scan-dialog .scan-row { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 8px 0; }
.scan-dialog .scan-row label { font-size: 13px; color: var(--muted); min-width: 84px; }
.scan-dialog .scan-row select, .scan-dialog .scan-row input { flex: 1 1 180px; min-width: 0; }
/* Foto-Button & KI-Name-Button: einheitliche Höhe, kein Zeilenumbruch. */
.scan-dialog .btn { border-radius: 10px; }
.scan-dialog .btn.secondary { white-space: nowrap; }
/* Eine Karte je erkanntem Dokument (Stapel-Modus). */
.scan-dialog .scan-docs { display: flex; flex-direction: column; gap: 10px; }
.scan-dialog .scan-doc { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; box-shadow: var(--shadow); }
.scan-dialog .scan-doc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.scan-dialog .scan-doc-head strong { font-family: var(--serif); letter-spacing: -.01em; }
.scan-dialog .scan-doc-head .scan-doc-del { margin-left: auto; color: #d6336c; }
.scan-dialog .scan-doc .scan-thumbs { margin: 0 0 8px; }
.scan-dialog .scan-target { margin-top: 4px; }
/* Ziel-Unterfelder (Kunde/Bereich, Kategorie, Monat …) als zusammengehöriger Panel. */
.scan-dialog .scan-sub { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px 10px; margin-top: 8px; }
.scan-dialog .scan-sub:empty { display: none; }
.scan-dialog .scan-sub .hint { margin: 8px 2px 2px; }
@media (max-width: 560px) {
  .modal:has(.scan-dialog) { padding: 16px; }
  .scan-dialog .scan-step { margin: 14px 0; }
  .scan-dialog .scan-step > label:first-child { font-size: 15px; }
  .scan-dialog .scan-row { gap: 4px 8px; }
  .scan-dialog .scan-row label { min-width: 100%; margin-bottom: -2px; }
  .scan-dialog .scan-row select, .scan-dialog .scan-row input { flex: 1 1 100%; }
}
.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-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.scan-chip { font-size: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; color: var(--ink); }
.scan-chip b { font-weight: 600; color: var(--muted); }
.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; }
/* ---- Live-Kamera-Scanner (Vollbild) ---- */
.camscan-root { position: fixed; inset: 0; z-index: 3000; background: #000; display: flex; flex-direction: column; }
.camscan-stage { position: relative; flex: 1; overflow: hidden; }
.camscan-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.camscan-ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.camscan-ov.camscan-flash { animation: camscanFlash .2s ease; }
@keyframes camscanFlash { 0% { background: rgba(255,255,255,.85); } 100% { background: transparent; } }
.camscan-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 12px 10px; background: linear-gradient(rgba(0,0,0,.5), transparent); }
.camscan-x { width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(0,0,0,.45); color: #fff; font-size: 20px; cursor: pointer; }
.camscan-tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.camscan-tool { border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.4); color: #fff; border-radius: 20px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.camscan-tool.on { background: #1a8a4f; border-color: #26e07f; }
.camscan-hint { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; color: #fff; font-size: 14px; text-shadow: 0 1px 4px rgba(0,0,0,.8); transition: opacity .3s; pointer-events: none; padding: 0 20px; }
.camscan-bottom { background: #000; padding: 10px 14px max(12px, env(safe-area-inset-bottom)); }
.camscan-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; min-height: 4px; }
.camscan-th { position: relative; flex: none; width: 54px; height: 72px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,.25); background: #222; }
.camscan-th img { width: 100%; height: 100%; object-fit: cover; }
.camscan-thno { position: absolute; left: 2px; bottom: 1px; font-size: 10px; color: #fff; background: rgba(0,0,0,.6); border-radius: 3px; padding: 0 3px; }
.camscan-thdel { position: absolute; top: 1px; right: 1px; width: 18px; height: 18px; border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; }
.camscan-ctrls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.camscan-count { justify-self: start; min-width: 34px; height: 34px; border-radius: 17px; background: rgba(255,255,255,.14); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; padding: 0 10px; }
.camscan-shutter { justify-self: center; width: 68px; height: 68px; border-radius: 50%; background: #fff; border: 5px solid rgba(255,255,255,.4); box-shadow: 0 0 0 2px #000 inset; cursor: pointer; transition: transform .08s; }
.camscan-shutter:active { transform: scale(.92); }
.camscan-done { justify-self: end; background: #1a8a4f; color: #fff; border: none; border-radius: 22px; padding: 10px 18px; font-size: 15px; font-weight: 700; cursor: pointer; }
.camscan-done:disabled { background: #3a3a3a; color: #999; cursor: default; }
@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: 6px; }
  /* Felder MIT Beschriftung (Monat, Jahr, Firma …) brauchen die volle Breite …  */
  .toolbar .field { flex: 1 1 100%; }
  /* … reine Schalt-Felder dagegen nicht: die sollen nebeneinander in eine Reihe passen,
     mit kleinerer Schrift. Vorher stand jeder Knopf allein auf einer Zeile. */
  /* Reine Schalt-Felder nebeneinander, so viele wie in eine Zeile passen.
     ACHTUNG: Diese Felder enthalten ein LEERES <label> vor dem Knopf (damit sie auf einer
     Linie mit „Monat"/„Jahr" stehen). Mit `button:only-child` griff die Regel deshalb nie —
     jeder Knopf stand allein auf einer Zeile. Darum: Feld hat einen Knopf (oder a.btn) und
     KEIN Eingabefeld. */
  .toolbar .field:has(> button, > a.btn):not(:has(> input)):not(:has(> select)):not(:has(> textarea)) {
    flex: 0 1 auto; max-width: 100%;
  }
  .toolbar .field:has(> button, > a.btn):not(:has(> input)):not(:has(> select)):not(:has(> textarea)) > label {
    display: none;                                   /* leeres Label frisst sonst eine Zeilenhöhe */
  }
  .toolbar .field > button:only-of-type,
  .toolbar .field > a.btn:only-of-type {
    font-size: 11.5px; padding: 8px 10px; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 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 { position: relative; overflow: hidden; 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; }
/* Von / An / Kopie / Datum stehen jetzt untereinander — jede Zeile kürzt für sich ab. */
.mailview-meta > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5; }
.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; }
/* „Fit to Screen": Wrapper begrenzt die Breite, das iframe wird per JS proportional verkleinert. */
.mail-frame-wrap { width: 100%; overflow: hidden; background: #fff; }
/* Breite/Höhe/Skalierung setzt JS (mailBodyFrame). min-height = Fallback, falls JS nicht läuft. */
.mail-body-frame { width: 100%; min-height: 300px; border: none; background: #fff; display: block; transform-origin: top left; }
.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; }
/* Höhe kommt per JS (ganze Mail). Kein festes height mehr, sonst inneres Scrollen/seitliches Wischen. */
@media (max-width: 760px) {
  .mail-split { flex-direction: column; }
  .mail-listpane { flex: none; max-width: none; max-height: 46vh; }
  .mail-readpane { max-height: none; overflow-x: hidden; }
  .mail-body-text { padding: 14px 15px; font-size: 15px; }
  .mailview-atts-wrap { padding: 10px 14px 16px; }
}

/* ===== 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; }
/* Gesamtzahl (nichts ungelesen): nur ein dezenter Hinweis, dass der Ordner nicht leer ist. */
.mail-navtotal { flex: 0 0 auto; color: var(--muted); font-size: 10px; font-weight: 600; padding: 0 5px; min-width: 17px; text-align: right; }
html.dark .mail-navtotal { color: #9aa4ad; }
.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) --- */
/* Breite der Listenspalte ist verstellbar (Griff zwischen Liste und Lesebereich).
   Der Wert steckt in --maillist-w und wird pro Browser gemerkt. */
.mail-listcol { flex: 0 0 var(--maillist-w, 322px); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
/* Griff zum Verschieben: schmal, aber mit großzügiger Trefferfläche. */
.mail-resizer { flex: 0 0 7px; align-self: stretch; cursor: col-resize; position: relative; border-radius: 4px; }
.mail-resizer::before { content: ''; position: absolute; inset: 0 -4px; }
.mail-resizer::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 3px; height: 38px; border-radius: 3px; background: var(--line); transition: background .15s ease; }
.mail-resizer:hover::after, .mail-resizer.zieht::after { background: var(--brand); }
body.mail-resizing { cursor: col-resize; user-select: none; }
.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-limit { flex: 0 0 auto; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 12px; cursor: pointer; }
.mail-limit:focus { outline: none; border-color: var(--brand); }
html.dark .mail-limit { background: #0f1722; border-color: #2a3a4a; color: #e6edf3; }
.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); }
/* Ungelesene Mails hervorheben: farbiger Balken links + leichte Tönung (Variante „Ungelesen hervorgehoben"). */
/* Ungelesen wird allein durch die fette Schrift gekennzeichnet — der grüne Balken links
   war zu laut. Der Balken bleibt der ausgewählten Zeile vorbehalten (siehe .sel). */
.mail-row2.unread { background: var(--brand-soft); }
.mail-row2.unread:hover { background: var(--brand-soft); }
.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; position: relative; overflow: hidden; }
/* Logo des Absenders liegt ÜBER dem farbigen Buchstaben. Kommt keins, entfernt der Code das
   Bild und der Buchstabe wird wieder sichtbar — deshalb bleibt er im Markup stehen. */
.mail-ava-logo, .mail-avatar .mail-ava-logo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #fff; border-radius: 50%;
}
.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; }
/* Die E-Mail-Adresse steht auf einer eigenen Zeile unter dem Namen — in der schmalen
   Listenspalte wäre sie daneben abgeschnitten. Optisch zurückhaltend, auch bei
   ungelesenen Mails nicht fett, damit der Name der Blickfang bleibt. */
.mail-row2-adr { color: var(--muted); font-weight: 400; font-size: 11.5px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row2.unread .mail-row2-adr { font-weight: 400; }
html.dark .mail-row2-adr { color: #9aa4ad; }
.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; }
/* Betreff/Absender rollen MIT nach oben, statt oben kleben zu bleiben — sonst nimmt der Kopf
   dauerhaft Platz weg. (Die allgemeine Inline-Regel setzt hier sonst position: sticky.) */
.mail-readpane2 .mailview.inline .mailview-head { position: static; }
.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; }
/* Das „An"-Feld steht in einer Zeile (Beschriftung links, Eingabe rechts). Die
   Empfängerzeile darunter muss deshalb in eine EIGENE Zeile umbrechen — sonst
   quetscht sie das Eingabefeld auf wenige Pixel zusammen. */
.mail-compose .mc-grid .field.mc-tofeld { flex-wrap: wrap; align-items: flex-start; }
.mail-compose .mc-grid .field.mc-tofeld > label { line-height: 34px; }
.mail-compose .mc-grid .field.mc-tofeld > .mc-empf { flex: 1 0 100%; margin-left: 47px; }
@media (max-width: 560px) { .mail-compose .mc-grid .field.mc-tofeld > .mc-empf { margin-left: 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; }
  /* Kompakte, kleinere Werkzeugleiste auf dem Handy */
  .mail-toolbar { padding-bottom: 5px; margin-bottom: 6px; }
  .mail-toolbar-left { gap: 6px; }
  .mail-icobtn { width: 26px; height: 26px; border-radius: 7px; }
  .mail-icobtn .ico svg { width: 15px; height: 15px; }
  .mail-toolicons { gap: 4px; }
  .mail-newbtn { padding: 5px 9px; font-size: 11.5px; gap: 4px; }
  .mail-newbtn .ico svg { width: 13px; height: 13px; }
  .mail-foldertoggle { padding: 5px 8px; font-size: 12px; gap: 5px; }
}

/* ===== 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; }
}

/* ===== Firmendaten: KI-Auto-Upload-Box ===== */
.firm-auto { border: 2px dashed var(--brand); border-radius: 12px; background: var(--brand-soft); padding: 14px 16px; margin: 12px 0; transition: background .15s, border-color .15s; }
.firm-auto.over { background: rgba(34,139,84,.14); }
.firm-auto.busy { opacity: .6; pointer-events: none; }
.firm-auto-h { display: flex; align-items: center; gap: 8px; color: var(--brand-dark); }
.firm-auto-h .ico svg { width: 18px; height: 18px; }
.firm-auto-h strong { font-family: var(--serif); letter-spacing: -.01em; }
.firm-auto-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.firm-auto-status { margin-top: 10px; }
.firm-auto-status:empty { display: none; }
.firm-auto-prog { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--brand-dark); font-weight: 600; }
.firm-spin { width: 16px; height: 16px; border: 2px solid var(--brand); border-top-color: transparent; border-radius: 50%; animation: firm-spin .7s linear infinite; flex: 0 0 auto; }
@keyframes firm-spin { to { transform: rotate(360deg); } }
.firm-auto-done { display: flex; align-items: center; gap: 6px; color: var(--brand-dark); margin-bottom: 4px; }
.firm-auto-done .ico svg { width: 16px; height: 16px; }
.firm-auto-line { font-size: 13px; color: var(--ink); padding: 2px 0; }
.firm-auto-line.err { color: #d6336c; }
/* Kategorie-Kopf: Titel links, Umbenennen/Löschen als kompakte Icon-Buttons rechts (kein Umbruch-Chaos) */
.firm-cat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-top: 0; }
.firm-cat-head h3 { font-size: 18px; }
.firm-cat-acts { display: flex; gap: 6px; flex: 0 0 auto; }
/* Firmendaten-Dokumente als einspaltige LISTE (flache Zeilen mit Trennlinie statt Kacheln) */
.firm-list { display: flex; flex-direction: column; }
.firm-list .firm-doc { border: 0; border-radius: 0; background: transparent; border-bottom: 1px solid var(--line); padding: 9px 2px; }
.firm-list .firm-doc:last-child { border-bottom: 0; }
.firm-list .firm-doc:hover { background: var(--bg); border-color: var(--line); }
/* Basis-Dokumentzeile (Reihenfolge/Umbenennen/Kategorie-Wechsel) */
.firm-doc { min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 8px 10px; display: flex; flex-direction: column; gap: 7px; }
.firm-doc:hover { border-color: var(--brand); }
.firm-doc-top { display: flex; align-items: center; gap: 6px; }
.firm-doc-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; border: none; background: none; cursor: pointer; text-align: left; padding: 0; color: var(--ink); }
.firm-doc-open .doc-tile-ic { flex: 0 0 auto; }
.firm-doc-open .doc-tile-ic .ico { color: var(--brand-dark); }
.firm-doc-name { font-weight: 600; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.firm-doc-ctrls { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.firm-doc-cat { flex: 1 1 150px; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 12px; color: var(--ink); }
.firm-doc-cat:focus { outline: none; border-color: var(--brand); }
/* Buchhaltung: Monatsbilanz + Beträge */
.acc-bilanz .bilanz-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.acc-bilanz .bilanz-row:last-of-type { border-bottom: 0; }
.acc-bilanz .bilanz-lbl { color: var(--ink); }
.acc-bilanz .bilanz-row b { font-size: 15px; white-space: nowrap; }
.acc-bilanz .bilanz-row b.pos { color: #1f9d57; }
.acc-bilanz .bilanz-row b.neg { color: #d6336c; }
.acc-bilanz .bilanz-sep { height: 1px; background: var(--line); margin: 8px 0; }
.acc-bilanz .bilanz-check { font-size: 13px; padding: 4px 0; }
.acc-bilanz .bilanz-check.ok { color: var(--brand-dark); }
.acc-bilanz .bilanz-check.warn { color: #b26a00; }
.cat-sum { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--brand-dark); background: var(--brand-soft); border-radius: 999px; padding: 2px 10px; }
.doc-betrag { font-size: 13px; font-weight: 700; color: var(--ink); }
.doc-betrag.konto { font-weight: 600; color: var(--muted); }

/* Gefahrenzone (Daten zurücksetzen) */
.danger-zone { border: 1px solid #f3c9d2; background: var(--warn-bg, #fdecee); }
.danger-zone .btn.danger { margin-top: 4px; }

/* Gezieltes Zurücksetzen: Unternehmenswahl + Bereich-Checkboxen */
.reset-company { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; }
.reset-areas { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 8px; background: var(--card); }
.reset-area { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 8px; cursor: pointer; min-width: 0; }
.reset-area:hover { background: var(--brand-soft, rgba(0,0,0,.04)); }
.reset-area span { min-width: 0; overflow-wrap: anywhere; }
.reset-area input { width: 18px; height: 18px; flex: none; accent-color: #d6336c; }
.reset-area.reset-all { font-weight: 700; border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0; margin-bottom: 2px; }

/* Lieferanten-Karten */
.sup-card { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sup-card:hover { border-color: var(--brand); }
.sup-head { display: flex; align-items: center; gap: 9px; margin-bottom: 2px; }
.sup-ava { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.sup-name { font-family: var(--serif); font-size: 16px; letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-line { font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 7px; min-width: 0; }
.sup-line .ico { color: var(--muted); flex: 0 0 auto; }
.sup-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-line.hint { color: var(--muted); font-size: 12px; display: block; }
.sup-tag { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; color: var(--ink); background: var(--brand-soft); border-radius: 8px; padding: 6px 9px; line-height: 1.4; }
.sup-tag .ico { color: var(--brand-dark); flex: 0 0 auto; margin-top: 1px; }
.sup-tag-lbl { font-weight: 700; color: var(--brand-dark); }
.sup-actions { display: flex; gap: 8px; margin-top: 8px; }

/* Auto-Sortier-Anzeige (Drag&Drop in Buchhaltung) — zeigt 4 Sek., wohin jede Datei kam */
.acc-sortresult { margin-top: 10px; background: var(--brand-soft); border: 1px solid var(--brand); border-radius: 12px; padding: 10px 14px; }
.acc-sorthead { display: flex; align-items: center; gap: 6px; color: var(--brand-dark); margin-bottom: 4px; }
.acc-sortrow { font-size: 13.5px; padding: 3px 0; color: var(--ink); }
.acc-sortrow.ok { color: var(--brand-dark); }
.acc-sortrow.warn { color: #b26a00; }
.acc-sortrow.err { color: #d6336c; }
/* „abgebucht"-Markierung auf Beleg-Kacheln */
.beleg-matched { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--brand-dark); background: var(--brand-soft); border: 1px solid var(--brand); border-radius: 999px; padding: 1px 8px; vertical-align: middle; }
/* Kontoauszug-Auswertung */
.konto-sum { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.konto-table { width: 100%; border-collapse: collapse; }
.konto-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.konto-table td { padding: 8px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; }
.konto-table td.num { white-space: nowrap; font-weight: 600; }
.konto-dir { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; }
.konto-dir.eingang { background: var(--brand-soft); color: var(--brand-dark); }
.konto-dir.ausgang { background: #fde7ea; color: #d6336c; }
.konto-ok { color: var(--brand-dark); font-weight: 600; font-size: 13px; }
.konto-no { color: #d6336c; font-weight: 600; font-size: 13px; }
.konto-table tr.tx-missing td { background: #fdecee; }
.konto-table tr.tx-missing td:first-child { box-shadow: inset 3px 0 0 #e0455e; }
/* Zuordnung Buchung <-> Beleg (Kontoauszug-Auswertung) */
.konto-unklar { color: #b8770a; font-weight: 600; font-size: 13px; }
.konto-table tr.tx-unklar td { background: #fff8e6; }
.konto-table tr.tx-unklar td:first-child { box-shadow: inset 3px 0 0 #e0a800; }
.zuord-stift { border: 0; background: none; cursor: pointer; font-size: 12px; opacity: .45; padding: 0 4px; line-height: 1; }
.zuord-stift:hover { opacity: 1; }
.zuord-kopf { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; margin-bottom: 10px; font-size: 14px; }
.zuord-liste { max-height: 46vh; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.zuord-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left;
  font: inherit; cursor: pointer; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; }
.zuord-item:hover { border-color: var(--brand); background: var(--bg); }
.zuord-item.aktiv { border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); }
.zuord-name { font-weight: 600; font-size: 13.5px; }
.zuord-meta { font-size: 12px; color: var(--muted); }
.zuord-grund { font-size: 11.5px; color: var(--brand-dark); }
.konto-unmatched { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.konto-unmatched strong { color: #d6336c; display: block; margin-bottom: 4px; }
@media (max-width: 560px) {
  .konto-table, .konto-table tbody, .konto-table tr, .konto-table td { display: block; width: auto; }
  .konto-table thead { display: none; }
  .konto-table tr { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 8px 12px; margin-bottom: 10px; }
  .konto-table td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; }
  .konto-table td::before { content: attr(data-label); color: var(--muted); font-size: 12px; flex: 0 0 auto; }
}

/* Arbeitsverträge: auf dem Handy als gestapelte Karten statt breiter Tabelle */
@media (max-width: 560px) {
  table.contracts-table, table.contracts-table tbody, table.contracts-table tr, table.contracts-table td { display: block; width: auto; }
  table.contracts-table thead { display: none; }
  table.contracts-table tr { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 10px 12px; margin-bottom: 10px; }
  table.contracts-table td { border: 0; padding: 3px 0; }
  table.contracts-table td.ct-name { font-size: 16px; font-family: var(--serif); margin-bottom: 4px; }
  table.contracts-table td.hint { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
  table.contracts-table td.hint::before { content: attr(data-label); color: var(--muted); flex: 0 0 auto; }
  table.contracts-table td.actions { display: flex; flex-wrap: wrap; gap: 12px 14px; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--line); }
}

/* Übersicht-Auswahl: alle Kategorien in einem Dropdown-Button statt vieler Chips */
.firm-filter-sel { width: 100%; max-width: 440px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: 15px; cursor: pointer; }
.firm-filter-sel:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
/* Firmendaten-Filter: Kategorie-Chips (auf dem Handy seitlich scrollbar) */
.firm-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.firm-chip { flex: 0 0 auto; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 13px; font-size: 13px; cursor: pointer; white-space: nowrap; color: var(--ink); transition: background .12s, border-color .12s, color .12s; }
.firm-chip:hover { border-color: var(--brand); }
.firm-chip.active { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
@media (max-width: 560px) { .firm-filter { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } }

/* KI-Upload Review (Name + Kategorie je Datei prüfen) */
.firm-review { margin-top: 10px; }
.firm-review-h { display: flex; align-items: center; gap: 6px; color: var(--brand-dark); margin-bottom: 8px; font-weight: 600; }
.firm-rev-row { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 9px 11px; margin-bottom: 8px; }
.firm-rev-file { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 7px; min-width: 0; }
.firm-rev-file > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.firm-rev-type { flex: 0 0 auto; }
.firm-rev-ctrls { display: flex; gap: 10px; flex-wrap: wrap; }
.firm-rev-ctrls .field { flex: 1 1 200px; margin-bottom: 0; min-width: 0; }
.firm-rev-name { width: 100%; }
@media (max-width: 560px) { .firm-rev-ctrls .field { flex: 1 1 100%; } }

/* ===== Globale Suche (Suchlupe in der Topbar) ===== */
.topbar-search { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s; }
.topbar-search:hover { border-color: var(--brand); background: var(--brand-soft); }
.topbar-search .ico svg { width: 18px; height: 18px; }
.gsearch-backdrop { align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; }
.gsearch-panel { width: 100%; max-width: 640px; background: var(--card); border-radius: 16px; box-shadow: 0 18px 60px rgba(0,0,0,.28); overflow: hidden; display: flex; flex-direction: column; max-height: 80vh; }
.gsearch-bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.gsearch-bar .ico svg { width: 18px; height: 18px; }
.gsearch-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 17px; color: var(--ink); padding: 2px 0; }
.gsearch-close { border: none; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; padding: 2px 6px; border-radius: 8px; }
.gsearch-close:hover { background: var(--bg); color: var(--ink); }
.gsearch-results { overflow-y: auto; padding: 6px; }
.gsearch-hint, .gsearch-count { color: var(--muted); font-size: 13px; padding: 12px 12px; }
.gsearch-count { padding: 8px 12px 4px; }
.gsearch-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: none; background: transparent; padding: 10px 12px; border-radius: 10px; cursor: pointer; color: var(--ink); }
.gsearch-item:hover { background: var(--brand-soft); }
.gsearch-ico { flex: 0 0 auto; display: inline-flex; color: var(--brand); width: 34px; height: 34px; align-items: center; justify-content: center; background: var(--bg); border-radius: 9px; }
.gsearch-ico svg { width: 18px; height: 18px; }
.gsearch-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gsearch-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsearch-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsearch-tag { flex: 0 0 auto; font-size: 11px; color: var(--brand-dark); background: var(--brand-soft); border: 1px solid var(--brand); border-radius: 999px; padding: 1px 9px; }
@media (max-width: 560px) {
  .topbar-search { width: 36px; height: 36px; margin-right: 6px; }
  .gsearch-backdrop { padding: 4vh 10px 10px; }
  .gsearch-panel { max-height: 86vh; }
  .gsearch-input { font-size: 16px; }
}
[dir="rtl"] .topbar-search { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .gsearch-item { text-align: right; }

/* ===== 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) =====
   overflow-x: clip statt hidden – kappt horizontalen Überlauf, macht html/body aber NICHT
   zum Scroll-Container (overflow-y bleibt visible), damit das sticky Hauptmenü beim Scrollen oben klebt. */
html, body { max-width: 100%; overflow-x: clip; }
#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 */
  /* Zurück-Pfeil sitzt im Kopf LINKS NEBEN der Überschrift; die Absenderzeilen
     (Von / An / Datum) stehen darunter über die volle Breite — der Avatar entfällt am
     Handy, er hat nur Platz gekostet und den Text eingerückt. */
  .mail-readpane2 .mailview.inline .mailview-head { align-items: flex-start; gap: 8px; padding: 8px 12px 10px; }
  .mail-readpane2 .mailview.inline .mail-avatar { display: none; }
  .mail-readpane2 .mailview.inline .mailview-meta { margin-top: 7px; }
  .mail-readpane2 .mailview.inline .mail-back { flex: 0 0 auto; margin-top: 1px; }
  /* „Zurück" am Handy nur als Pfeil-Symbol, klein und ganz oben. */
  .mail-readtop { padding: 6px 8px 0; }
  /* Gilt egal WO der Knopf hängt — er sitzt jetzt im Kopf der Mail, nicht mehr darüber. */
  .mail-back { padding: 5px 11px; font-size: 18px; line-height: 1; font-weight: 700; }
  .mail-back-lbl { display: none; }
  /* Karte des Postfachs wirklich ohne Polster (einzelne Seiten überschreiben sonst). */
  /* Karte randlos: kein Polster — und KEIN Schatten. Der Schatten ist dunkelgrün
     (rgba(20,40,30,…)); weil die Karte hier über die volle Breite geht, drückt er an
     beiden Seiten als dünne grüne Linie heraus. Ohne Rand ist er ohnehin sinnlos. */
  .card.mail-card { padding: 0 !important; box-shadow: none !important; }
  /* 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. */
  /* Alle Aktionen als Symbole in EINER Reihe (kein Umbruch, keine Text-Labels) */
  /* Alle Aktionen als gleich breite Symbol-Knöpfe in EINER Reihe — sie teilen sich die
     Breite (flex: 1 1 0), damit nichts überläuft und kein Schiebebalken nötig ist. */
  /* Raster statt Flexbox: „grid-auto-columns: 1fr" macht ALLE Spalten exakt gleich breit.
     Mit Flexbox blieben sie ungleich, weil die Symbol-Knöpfe andere Innenabstände haben. */
  .mailview-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 5px; padding: 8px; overflow-x: visible; }
  .mailview-actions .mv-act,
  .mailview-actions .mv-act.mv-icononly { width: 100%; min-width: 0; justify-content: center; padding: 9px 0; }
  /* Die Aktionsleiste gehört ans UNTERE Ende der Mail (Daumen-Reichweite), nicht zwischen
     Kopf und Text. Umsortiert über flex-order — dafür muss der Code nicht angefasst werden.
     Sie klebt beim Rollen unten fest. */
  .mail-readpane2 .mailview.inline { display: flex; flex-direction: column; }
  .mail-readpane2 .mailview.inline .mailview-head { order: 1; }
  .mail-readpane2 .mailview.inline .mailview-scroll { order: 2; }
  /* Die Leiste steht FEST am unteren Rand, mit kleinem Abstand.
     Warum fixed und nicht sticky: sticky richtet sich nach dem nächsten rollenden Vorfahren.
     Das ist hier .mail-readpane2 — die rollt aber gar nicht, gerollt wird die SEITE.
     Dadurch wanderte die Leiste beim Rollen mit, statt stehen zu bleiben. */
  .mail-readpane2 .mailview.inline .mailview-actions {
    order: 3; position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 30;
    border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,.18);
  }
  /* Platz darunter, damit der letzte Absatz nicht hinter der Leiste verschwindet. */
  .mail-readpane2 .mailview.inline .mailview-scroll { padding-bottom: 68px; }
  .mailview-actions .mv-act span:not(.ico) { display: none; }
  .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; }
  /* Am Handy soll die geöffnete E-Mail die GANZE Fläche nutzen: kein Rand, kein Rahmen,
     keine abgerundeten Ecken — und der Inhalt so hoch wie der Platz hergibt. */
  .mail-shell.has-sel .mail-readpane2 { border: 0; border-radius: 0; }
  .mail-readpane2 .mailview.inline { padding: 0; }
  .mail-readpane2 .mailview.inline .mailview-head { padding: 10px 12px; }
  /* Etwas Luft an den Seiten — ganz ohne Polster klebte der Text am Bildschirmrand
     und war am Rand kaum zu lesen. Der Rahmen für HTML-Mails bleibt randlos, die bringen
     ihre eigenen Abstände mit. */
  .mail-readpane2 .mailview.inline .mailview-body { padding: 0 12px; }
  .mail-readpane2 .mailview.inline .mail-frame-wrap { padding: 0; }
  .mail-readpane2 .mailview.inline .mail-body-frame { height: 78vh; min-height: 78vh; }
  /* Der Griff zum Breite-Ziehen ergibt am Handy keinen Sinn (dort liegt immer nur EINE
     Spalte) und hinterlässt nur einen Streifen — weg damit. */
  .mail-resizer { display: none; }
  .mail-shell { gap: 0; }
  /* Die Karte drumherum hat ringsum Polster und einen Rahmen. Für Postfach und Chat soll
     der Inhalt bis an den Bildschirmrand gehen. */
  /* Postfach und Chat sollen bis an den Bildschirmrand gehen: die Seite hat 10px Polster,
     die Karte nochmal ~10px plus Rahmen und runde Ecken. Für diese beiden Ansichten weg damit.
     Der negative Außenabstand hebt das Polster der Seite auf. */
  main.content:has(.mail-card), main.content:has(.chat-wrap) { padding-left: 0; padding-right: 0; }
  .card.mail-card, .card:has(> .chat-wrap) {
    padding: 0; border-radius: 0; border-left: 0; border-right: 0;
  }
  .card:has(> .mail-shell), .card:has(> .chat-wrap) {
    padding: 0; border-radius: 0; border-left: 0; border-right: 0; margin-left: 0; margin-right: 0;
  }
  .chat-wrap { gap: 0; }
  .chat-left, .chat-right { border-radius: 0; border-left: 0; border-right: 0; }
  /* 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(min(290px, 100%), 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: minmax(0, 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); }

/* Rechnungen-Übersicht: kompakte Schnellzugriff-Kacheln (Desktop schmal, Handy 2 Spalten) */
.rech-qa { display: grid; grid-template-columns: repeat(4, minmax(0, 165px)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 560px) {
  .rech-qa { grid-template-columns: 1fr 1fr; gap: 9px; }
  .rech-qa button { padding: 10px 11px !important; gap: 6px !important; border-radius: 11px !important; }
  .rech-qa button span:last-child { font-size: 12px !important; line-height: 1.25; }
  .rech-qa button svg { width: 17px !important; height: 17px !important; }
}

/* Rechnungen & Finanzen: sauberes Auswahl-Menü (Dropdown) statt langer Tab-Reihe */
.rech-menu { position: relative; margin: 14px 0; }
.rech-menu-toggle { display: inline-flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 11px 16px; font: inherit; font-weight: 700; font-size: 15.5px; color: var(--ink); cursor: pointer; min-width: 220px; justify-content: space-between; }
.rech-menu-toggle:hover { border-color: var(--brand); }
.rech-menu-caret { color: var(--muted); font-size: 12px; }
.rech-menu-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 36px rgba(0,0,0,.16); padding: 8px; min-width: 260px; max-width: calc(100vw - 40px); max-height: 70vh; overflow: auto; display: none; }
.rech-menu-panel.open { display: block; }
.rech-menu-group { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 9px 10px 4px; font-weight: 700; }
.rech-menu-group:not(:first-child) { border-top: 1px solid var(--line); margin-top: 4px; }
.rech-menu-item { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 14.5px; color: var(--ink); cursor: pointer; }
.rech-menu-item:hover { background: var(--bg); }
.rech-menu-item.active { background: var(--brand); color: #fff; font-weight: 700; }
@media (max-width: 560px) { .rech-menu-toggle { width: auto; min-width: 0; padding: 8px 14px; font-size: 14px; gap: 10px; } }

/* ============================================================
   NEUES DESIGN — globales Theme (sevDesk-Stil)
   Dunkle Sidebar · cremefarbener Inhalt · weiche Karten ·
   Serifen-Überschriften · grüne Akzente · Status-Pillen
   ============================================================ */
:root {
  --canvas: #f4f3ee;           /* warmer, cremiger Hintergrund */
  --card: #ffffff;
  --ink: #1b2a24;
  --muted: #7c8a82;
  --line: #ebeae3;
  --sidebar: #16201b;          /* dunkle Sidebar */
  --sidebar-ink: #cbd5ce;
  --sidebar-muted: #76847c;
  --shadow: 0 1px 2px rgba(20,40,30,.04), 0 10px 30px rgba(20,40,30,.07);
  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
}

/* Grundflächen cremefarben (unabhängig von der Theme-Einstellung) */
body { background: var(--canvas); }
.layout { background: var(--canvas); }
main.content { background: var(--canvas); padding: 26px; }

/* Topbar dezent */
header.topbar { background: var(--card); border-bottom: 1px solid var(--line); }
header.topbar .brand { color: var(--ink); font-family: var(--serif); }

/* ---- Dunkle Sidebar ---- */
nav.side { background: var(--sidebar); border-right: none; padding: 18px 12px; }
nav.side button { color: var(--sidebar-ink); border-radius: 12px; padding: 11px 14px; font-size: 14.5px; font-weight: 500; margin-bottom: 3px; }
nav.side button svg { opacity: .85; }
nav.side button:hover { background: rgba(255,255,255,.07); color: #fff; }
nav.side button.active { background: var(--brand); color: #fff; box-shadow: 0 8px 18px rgba(31,157,87,.30); }
nav.side button.active svg { opacity: 1; }
nav.side .navsection { color: var(--sidebar-muted); }

/* ---- Karten weicher & runder ---- */
.card { border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 22px 24px; }
.card h2 { font-size: 21px; }

/* Serifen-Überschriften & große Kennzahlen */
.card h2, .card h3, .login-card h1, .stat .value { font-family: var(--serif); letter-spacing: -.01em; }

/* ---- Buttons & Eingaben runder ---- */
.btn { border-radius: 12px; padding: 11px 18px; }
.btn.small { border-radius: 10px; }
.btn.secondary { background: #fff; border: 1px solid var(--line); }
.btn.secondary:hover { background: var(--canvas); }
.field input, .field select, .field textarea { border-radius: 10px; }

/* ---- Status-Pillen ---- */
.badge { padding: 4px 12px; font-size: 12px; font-weight: 700; border-radius: 999px; }

/* ---- Stat-Kacheln neutraler ---- */
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.stat .value { color: var(--ink); }

/* Tabellen-Hover passend zur Creme-Fläche */
tr:hover td { background: #faf9f4; }

/* Fix: Inhaltsbereich darf schrumpfen, damit breite Inhalte (z. B. Kunden-Board)
   im Container scrollen statt die ganze Seite seitlich überlaufen zu lassen. */
.layout { min-width: 0; }
main.content { min-width: 0; }
.card { max-width: 100%; }
.kanban { max-width: 100%; }

/* ---- Mobil: Inhalt breiter — kleinerer Rand auf allen Seiten ---- */
@media (max-width: 560px) {
  main.content { padding: 12px 8px; }
  main.content .card { padding: 16px 13px; }
}

/* Ein-Klick-Statuswahl direkt auf der Kundenkarte */
.kan-statussel { width: 100%; margin-top: 9px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--canvas); color: var(--ink); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.kan-statussel:hover { border-color: var(--brand); }
.kan-statussel:focus { outline: none; border-color: var(--brand); }

/* Kalender-Navigation: runde Ecken statt scharfer Kanten (Monat/Jahr-Auswahl + Pfeile + Heute) */
select.cal-jump { padding: 9px 13px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
select.cal-jump:hover { border-color: var(--brand); }
select.cal-jump:focus { outline: none; border-color: var(--brand); }

/* Handy: Kalender-Navigation kompakt halten und bei Bedarf umbrechen (rund bleibt) */
@media (max-width: 560px) {
  select.cal-jump { padding: 7px 8px; font-size: 13px; max-width: 38vw; }
  .cal-nav { flex-wrap: wrap; justify-content: flex-start; }
}

/* Start-Banner in Menüfarbe (folgt der einstellbaren Menü-Farbe) */
.home-banner { background-color: var(--sidebar); }
.home-banner-fallback { background: linear-gradient(120deg, var(--sidebar) 0%, var(--sidebar) 48%, var(--brand) 165%); }

/* Topbar auf dem Handy kompakter */
@media (max-width: 560px) {
  header.topbar { padding: 7px 10px; gap: 8px; }
  header.topbar .brand small { display: none; }
  header.topbar .brand { font-size: 14px; gap: 7px; }
  header.topbar .brand-logo { height: 28px; }
  header.topbar .right { gap: 6px; font-size: 12px; }
  header.topbar .right > button,
  header.topbar .right .btn { padding: 6px 9px; font-size: 12px; border-radius: 9px; }
  header.topbar select.company { max-width: 40vw; font-size: 12px; padding: 6px 8px; font-weight: 600; }
}

/* Kompaktes Konto-Menü in der Topbar (Firma wechseln · Sprache · Abmelden) */
.acct-menu { position: relative; }
.acct-toggle { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.acct-toggle:hover { border-color: var(--brand); }
.acct-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
@media (max-width: 560px) {
  .acct-toggle { gap: 5px; padding: 6px 8px; font-size: 12.5px; }
  .acct-label { max-width: 84px; }
  .acct-caret { font-size: 11px; }
}
.acct-caret { color: var(--muted); font-size: 11px; }
.acct-panel { position: fixed; top: calc(var(--topbar-h, 56px) + 6px); right: 12px; z-index: 1300; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 36px rgba(0,0,0,.16); padding: 8px; min-width: 230px; max-width: calc(100vw - 24px); max-height: 72vh; overflow: auto; display: none; }
.acct-panel.open { display: block; }
.acct-head { font-weight: 700; color: var(--ink); padding: 8px 10px 4px; font-size: 13px; }
.acct-section { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 8px 10px 3px; font-weight: 700; }
.acct-item { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.acct-item:hover { background: var(--canvas); }
.acct-item.active { background: var(--brand); color: #fff; font-weight: 700; }
.acct-item.danger { color: var(--warn); font-weight: 600; }
.acct-item.danger:hover { background: var(--warn-bg); }
.acct-divider { height: 1px; background: var(--line); margin: 6px 4px; }

/* Rechnungen-Toolbar: "Übersicht"-Menü und "+ Angebot" in einer Zeile */
.rech-toolbar { display: flex; align-items: center; gap: 10px; margin: 14px 0; flex-wrap: wrap; }
.rech-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 560px) {
  .rech-toolbar { gap: 8px; }
  .rech-toolbar-actions { margin-left: 0; }
  .rech-toolbar .btn { padding: 8px 13px; font-size: 13.5px; }
}

/* Menü in der Toolbar bündig zur Schaltfläche (kein doppelter Außenabstand) */
.rech-toolbar .rech-menu { margin: 0; }

/* Handy: Kalkulator-Materialliste untereinander (Bezeichnung oben, Menge darunter) */
@media (max-width: 560px) {
  table.kalk-result { overflow-x: visible; white-space: normal; }
  table.kalk-result thead { display: none; }
  table.kalk-result tbody { display: block; }
  table.kalk-result tr { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--line); }
  table.kalk-result td { display: block; border: none; padding: 0; text-align: left !important; white-space: normal; }
  table.kalk-result td:first-child { font-weight: 600; color: var(--ink); }
  table.kalk-result td.num { color: var(--muted); font-size: 13.5px; }
}

/* Handy: Monat/Jahr-Auswahl nebeneinander statt gestapelt */
@media (max-width: 560px) {
  .toolbar .field-my { min-width: 0; flex: 1 1 42%; }
}

/* ===== Kopfzeile (Header) eingefärbt: tiefes Markengrün mit hellem Text =====
   Am Dateiende, damit es auch die Theme-Regeln (header.topbar background:var(--card)) überschreibt. */
:root { --topbar-bg: #0b3d2e; --topbar-ink: #eaf4ee; --topbar-ink-soft: rgba(255, 255, 255, .66); }
header.topbar { background: var(--topbar-bg); border-bottom: 1px solid rgba(255, 255, 255, .10); }
/* Marke / Firmenname hell (überschreibt auch das Serif-Theme; Schriftart bleibt erhalten) */
header.topbar .brand,
header.topbar #companyName { color: var(--topbar-ink); }
header.topbar .brand small { color: var(--topbar-ink-soft); }
/* Logo bleibt auf dunklem Grund lesbar: helles Chip dahinter */
header.topbar .brand-logo { background: #fff; padding: 3px 6px; }
/* Bedienelemente in der Kopfzeile passen sich AUTOMATISCH an die Header-Farbe an
   (transluzente Tönung aus der lesbaren Textfarbe – funktioniert bei hellen wie dunklen Header-Farben). */
.topbar-search, .acct-toggle, .nav-toggle {
  background: color-mix(in srgb, var(--topbar-ink, #eaf4ee) 12%, transparent);
  border-color: color-mix(in srgb, var(--topbar-ink, #eaf4ee) 28%, transparent);
  color: var(--topbar-ink);
}
.topbar-search:hover, .acct-toggle:hover {
  background: color-mix(in srgb, var(--topbar-ink, #eaf4ee) 22%, transparent);
  border-color: color-mix(in srgb, var(--topbar-ink, #eaf4ee) 46%, transparent);
}
.acct-caret { color: var(--topbar-ink-soft); }
/* Das aufklappende Konto-Menü bleibt ein helles Popup mit dunklem Text */
.acct-panel { color: var(--ink); }

/* ===== Einstellungen: aufklappbare Bereiche (Accordion) – eine Seite nach der anderen öffnen ===== */
.setting-acc { padding: 0; overflow: hidden; }
.setting-acc > .setting-acc-head { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 16px 20px; font-size: 18px; font-weight: 700; color: var(--ink); -webkit-user-select: none; user-select: none; }
.setting-acc > .setting-acc-head::-webkit-details-marker { display: none; }
.setting-acc > .setting-acc-head::marker { content: ''; }
.setting-acc-title { display: inline-flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.setting-acc-caret { margin-left: auto; color: var(--muted); display: inline-flex; transition: transform .2s ease; flex: none; }
.setting-acc[open] > .setting-acc-head .setting-acc-caret { transform: rotate(180deg); }
.setting-acc > .setting-acc-head:hover { background: var(--bg); }
.setting-acc[open] > .setting-acc-head { border-bottom: 1px solid var(--line); }
.setting-acc-body { padding: 16px 20px 20px; }
.setting-acc.danger-zone > .setting-acc-head { color: #d6336c; }

/* ===== KI-Assistent: ChatGPT-artige Gesprächsseite ===== */
.assistant-log { min-height: 320px; max-height: 56vh; }
.assistant-empty { margin: auto; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 12px; max-width: 520px; }
.assistant-empty .ico { color: var(--brand); }
.assistant-empty p { margin: 0; font-size: 14px; line-height: 1.5; }
.assistant-examples { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.assistant-eg { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 13px; color: var(--ink); cursor: pointer; }
.assistant-eg:hover { border-color: var(--brand); background: var(--brand-soft); }
.assistant-page .ai-voice-stage { border-top: 1px solid var(--line); margin-bottom: 12px; }
.assistant-page .btnbar { align-items: center; }

/* ===== Medien-Galerie (Videos & Bilder) ===== */
.media-drop { display: flex; align-items: center; gap: 14px; border: 2px dashed var(--line); border-radius: 12px; padding: 18px; cursor: pointer; color: var(--muted); background: var(--bg); transition: border-color .15s, background .15s; }
.media-drop:hover, .media-drop.over { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.media-drop .ico { color: var(--brand-dark); flex: 0 0 auto; }
.media-drop strong { color: var(--ink); display: block; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 14px; margin-top: 16px; }
.media-tile { border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.media-prev { position: relative; aspect-ratio: 4 / 3; background: #0d130f; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.media-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.media-play .ico { color: #fff; }
.media-name { font-size: 13px; font-weight: 600; color: var(--ink); padding: 8px 10px 2px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-cat { align-self: flex-start; margin: 0 10px 4px; font-size: 11px; font-weight: 700; color: var(--brand-dark); background: var(--brand-soft); border-radius: 999px; padding: 1px 9px; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-acts { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 8px 10px; }
.media-acts .btn.small { padding: 6px 8px; }
.media-modal { max-width: 880px; width: 94vw; }
/* Kategorie-Leiste über der Galerie */
.media-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.media-bar-lbl { font-size: 13px; font-weight: 700; color: var(--ink); }
.media-catsel { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; max-width: 220px; }
@media (max-width: 560px) { .media-grid { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; } }

/* ===== Kalender im Kachel-Design (Tag = abgerundete Kachel, Termine als Pillen) – responsiv ===== */
.cal-kacheln { margin-top: 8px; }
.cal-kacheln .khead { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cal-kacheln .kwd { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.cal-kacheln .kgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.kday { background: var(--bg); border: 1px solid transparent; border-radius: 12px; padding: 7px 7px 8px; min-height: 96px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; transition: border-color .12s, background .12s; min-width: 0; }
.kday:hover { border-color: var(--brand); }
.kday.out { background: transparent; border: none; pointer-events: none; cursor: default; min-height: 0; }
.kday.today { background: var(--brand-soft); border-color: var(--brand); }
.kday.drag-hl { background: var(--brand-soft); border-color: var(--brand); }
.kday-num { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1; }
.kday.today .kday-num { color: var(--brand-dark); }
.kday-pills { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kpill { display: flex; align-items: stretch; gap: 0; background: #2f6fed; color: #fff; border-radius: 9px; font-size: 11px; line-height: 1.25; cursor: pointer; overflow: hidden; max-width: 100%; }
.kpill-label { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 2px 7px; overflow: hidden; }
.kpill-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpill-sub { font-size: 10px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpill-status { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; opacity: .95; }
.kpill.declined { opacity: .62; }
.kpill.declined .kpill-title { text-decoration: line-through; }
.kpill-grip { flex: 0 0 auto; width: 13px; display: flex; align-items: center; justify-content: center; cursor: ew-resize; background: rgba(0,0,0,.20); color: #fff; font-size: 12px; font-weight: 700; -webkit-user-select: none; user-select: none; opacity: .55; transition: opacity .1s, background .1s; }
.kpill:hover .kpill-grip { opacity: 1; background: rgba(0,0,0,.32); }
/* Wochen-Reihen + verbundene Mehrtages-Balken (Overlay läuft über die Kästchen hinweg) */
.cal-kacheln .kgrid-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.kweek { position: relative; }
.kweek + .kweek { margin-top: 6px; }
.kbars { position: absolute; left: 0; right: 0; top: 24px; pointer-events: none; }
.kbar { position: absolute; border-radius: 8px; color: #fff; display: flex; align-items: stretch; overflow: hidden; cursor: pointer; pointer-events: auto; font-size: 11px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.kbar.cont-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.kbar.cont-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Details stehen untereinander (nicht in die Länge der Linie gezogen) */
.kbar .kpill-label { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1px; padding: 3px 9px; }
.kbar .kpill-sub { font-size: 10px; }
.kbar.declined { opacity: .62; }
.kbar.declined .kpill-title { text-decoration: line-through; }
.kbar .kpill-grip { width: 12px; }
/* „Anzeige": kleine Übersicht, welche Details im Termin erscheinen */
.cal-fieldwrap { position: relative; }
.cal-fieldpanel { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 36px rgba(0,0,0,.16); padding: 8px; min-width: 190px; }
.cal-fieldpanel.open { display: block; }
.cal-fieldpanel-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 4px 8px 6px; }
.cal-fieldopt { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--ink); }
.cal-fieldopt:hover { background: var(--bg); }
.cal-fieldopt input { width: 17px; height: 17px; accent-color: var(--brand); flex: none; }
@media (max-width: 560px) {
  .cal-kacheln .khead, .cal-kacheln .kgrid-row { gap: 4px; }
  .cal-kacheln .kwd { font-size: 10px; }
  .kday { min-height: 56px; padding: 4px 4px 5px; border-radius: 9px; gap: 2px; }
  .kday-num { font-size: 11px; }
  .kpill { font-size: 9px; border-radius: 7px; }
  .kpill-label { padding: 1px 5px; }
  .kpill-sub { font-size: 9px; }
  .kpill-grip { display: none; } /* Verlängern per Ziehen ist eine Maus-Funktion (Desktop) */
  .kbars { top: 20px; }
  .kbar { font-size: 9px; border-radius: 6px; }
  .kbar .kpill-label { padding: 2px 6px; }
}

/* ===== Bau-Kalkulator (Gewerke + Angebot) ===== */
.calc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.calc-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.calc-layout { display: grid; grid-template-columns: 172px minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.calc-nav { display: flex; flex-direction: column; gap: 4px; }
.calc-nav-btn { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: var(--bg); border: 1px solid transparent; border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.calc-nav-btn .ico { color: var(--muted); flex: none; }
.calc-nav-btn:hover { border-color: var(--line); }
.calc-nav-btn.active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); font-weight: 700; }
.calc-nav-btn.active .ico { color: var(--brand-dark); }
.calc-main { min-width: 0; }
.calc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.calc-fhint { font-size: 11px; color: var(--muted); margin-top: 3px; }
.calc-subhead { font-size: 13px; font-weight: 700; color: var(--ink); margin: 16px 0 8px; }
.calc-variants { display: flex; flex-direction: column; gap: 8px; }
.calc-variant { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.calc-variant:hover { border-color: var(--brand); }
.calc-variant.active { border-color: var(--brand); background: var(--brand-soft); }
.calc-variant-price { font-weight: 700; color: var(--brand-dark); white-space: nowrap; }
.calc-summary { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 16px; align-self: start; }
.calc-sumrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.calc-sumtotal-wrap { margin-top: 10px; }
.calc-total { font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1.15; }
.calc-mats { display: flex; flex-direction: column; gap: 6px; }
.calc-mat { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink); }
.calc-mat.svc { justify-content: flex-start; }
.calc-mat.svc .ico { color: var(--brand); flex: none; }
.calc-mat-q { color: var(--muted); white-space: nowrap; }
.calc-custgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 14px; margin-bottom: 14px; }
.calc-postable { width: 100%; border-collapse: collapse; }
.calc-postable th, .calc-postable td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13.5px; }
.calc-postable th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.calc-postable .num { text-align: right; white-space: nowrap; }
.calc-offertotals { margin: 12px 0 0 auto; max-width: 300px; }
.calc-offertotals > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; }
.calc-offertotals-grand { border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 8px; font-size: 17px; }
.calc-handrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.calc-handrow input { flex: 1 1 140px; min-width: 0; }
.calc-handrow input[title="Menge"] { max-width: 90px; flex: 0 0 auto; }
.calc-handrow input[title="Einheit"] { max-width: 80px; flex: 0 0 auto; }
.calc-handrow input[title="Einzelpreis €"] { max-width: 120px; flex: 0 0 auto; }
@media (max-width: 1100px) {
  .calc-layout { grid-template-columns: 1fr; }
  .calc-nav { flex-direction: row; flex-wrap: wrap; }
  .calc-nav-btn { width: auto; flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 620px) {
  .calc-custgrid { grid-template-columns: 1fr; }
}
.calc-variant > span:first-child { flex: 1 1 auto; min-width: 0; }
.calc-variant-price { flex: 0 0 auto; }

/* ===== Wand-Konfigurator (3D, Kosten-Aufschlüsselung, eigene Preise) ===== */
.wand-3d { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 10px; margin-bottom: 4px; }
.wand-prices { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.wand-prices summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--ink); }
.wand-pricegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 8px; }
.wand-costlist { display: flex; flex-direction: column; gap: 5px; }
.wand-costrow { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline; font-size: 13px; }
.wand-cn { color: var(--ink); min-width: 0; }
.wand-cq { color: var(--muted); white-space: nowrap; font-size: 12px; }
.wand-cp { font-weight: 600; white-space: nowrap; min-width: 62px; text-align: right; }
.wand-costsum { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 14px; }
.wand-totals { margin-top: 10px; }
.wand-trow { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 14px; }
.wand-trow.grand { border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 8px; font-size: 17px; }
.wand-steps { display: flex; flex-direction: column; gap: 7px; }
.wand-step { display: flex; gap: 9px; font-size: 13px; color: var(--ink); align-items: flex-start; line-height: 1.35; }
.wand-step-n { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); font-weight: 800; font-size: 11px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
@media (max-width: 620px) { .wand-pricegrid { grid-template-columns: 1fr; } }

/* Angebots-Position: Beschreibung + freier Preis */
.pos-desc-link { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 3px 0 0; margin: 0; color: var(--brand-dark); font: inherit; font-size: 12px; cursor: pointer; }
.pos-desc-link:hover { text-decoration: underline; }
.calc-price-edit { width: 94px; max-width: 100%; text-align: right; padding: 5px 7px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px; background: var(--card); color: var(--ink); }
.wand-check { display: flex; align-items: center; gap: 9px; margin-top: 10px; font-size: 14px; color: var(--ink); cursor: pointer; }
.wand-check input { width: 17px; height: 17px; accent-color: var(--brand); flex: none; }

/* Eigene Materialien im Preis-Editor */
.calc-custlist { display: flex; flex-direction: column; gap: 6px; }
.calc-custmat { display: grid; grid-template-columns: 1fr 76px 66px 84px auto; gap: 6px; align-items: center; }
.calc-custmat input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px; min-width: 0; background: var(--card); color: var(--ink); }
@media (max-width: 560px) { .calc-custmat { grid-template-columns: 1fr 1fr; } }

/* „Neues Gewerk" im Kalkulator-Menü */
.calc-nav-add { border: 1px dashed var(--brand) !important; background: transparent !important; color: var(--brand-dark) !important; justify-content: center; }
.calc-nav-add:hover { background: var(--brand-soft) !important; }

/* ===== Jarvis-KI-Avatar (KI-Assistent) ===== */
.jarvis-avatar { display:flex; flex-direction:column; align-items:center; gap:8px; margin:4px 0 16px; }
.jv-svg { width:170px; height:170px; filter: drop-shadow(0 0 16px rgba(54,198,255,.35)); transition: filter .3s ease; }
.jv-glow { animation: jvGlow 3.4s ease-in-out infinite; }
.jv-ring { transform-box: view-box; transform-origin: 110px 110px; }
.jv-ring-outer { animation: jvSpin 20s linear infinite; }
.jv-ring-mid { animation: jvSpinR 28s linear infinite; }
.jv-core { animation: jvCore 3.4s ease-in-out infinite; }
.jv-eye { fill:#eaffff; transform-box: fill-box; transform-origin: center; animation: jvBlink 6s infinite; }
.jv-bar { fill:#d8f6ff; transform-box: fill-box; transform-origin: center; animation: jvBarIdle 2.6s ease-in-out infinite; }
.jv-bar:nth-child(2){ animation-delay:.25s } .jv-bar:nth-child(3){ animation-delay:.5s } .jv-bar:nth-child(4){ animation-delay:.25s }
.jv-name { font-size:11.5px; font-weight:800; letter-spacing:.14em; color:var(--muted); }
@keyframes jvSpin { to { transform: rotate(360deg) } }
@keyframes jvSpinR { to { transform: rotate(-360deg) } }
@keyframes jvGlow { 0%,100%{ opacity:.45 } 50%{ opacity:.85 } }
@keyframes jvCore { 0%,100%{ opacity:.92 } 50%{ opacity:1 } }
@keyframes jvBlink { 0%,93%,100%{ transform: scaleY(1) } 96%{ transform: scaleY(.12) } }
@keyframes jvBarIdle { 0%,100%{ transform: scaleY(.55) } 50%{ transform: scaleY(.9) } }
.jarvis-avatar.speaking .jv-svg { filter: drop-shadow(0 0 28px rgba(54,198,255,.78)); }
.jarvis-avatar.speaking .jv-glow { animation-duration: 1.1s; }
.jarvis-avatar.speaking .jv-core { animation: jvCore 1.1s ease-in-out infinite; }
.jarvis-avatar.speaking .jv-ring-outer { animation-duration: 7s; }
.jarvis-avatar.speaking .jv-ring-mid { animation-duration: 9s; }
.jarvis-avatar.speaking .jv-bar { animation: jvBarTalk .42s ease-in-out infinite; }
.jarvis-avatar.speaking .jv-bar:nth-child(2){ animation-delay:.08s } .jarvis-avatar.speaking .jv-bar:nth-child(3){ animation-delay:.04s } .jarvis-avatar.speaking .jv-bar:nth-child(4){ animation-delay:.12s } .jarvis-avatar.speaking .jv-bar:nth-child(5){ animation-delay:.16s }
@keyframes jvBarTalk { 0%,100%{ transform: scaleY(.35) } 50%{ transform: scaleY(1.7) } }
.jarvis-avatar.listening .jv-svg { filter: drop-shadow(0 0 30px rgba(43,224,122,.85)); }
.jarvis-avatar.listening .jv-glow { animation-duration: 1.4s; }
.jv-scan { transform-box: view-box; animation: jvScan 2.4s linear infinite; }
@keyframes jvScan { from { transform: translateY(0) } to { transform: translateY(9px) } }
.jv-corners { transform-box: view-box; transform-origin: 110px 110px; animation: jvGlow 3.6s ease-in-out infinite; }
.jarvis-avatar.speaking .jv-scan { animation-duration: 0.9s; }
.jarvis-avatar.speaking .jv-corners { animation-duration: 1.2s; }
@media (max-width: 560px){ .jv-svg { width:142px; height:142px; } }
/* Mini-Jarvis im schwebenden Knopf (FAB) – auf jeder Seite sichtbar */
.ai-fab.jarvis-fab { background:#0a1830; padding:0; overflow:hidden; }
.ai-fab.jarvis-fab.listening { background:#0a1830; }
.jarvis-avatar.mini { margin:0; gap:0; pointer-events:none; }
.jarvis-avatar.mini .jv-svg { width:52px; height:52px; filter:drop-shadow(0 0 6px rgba(54,198,255,.5)); }
.jarvis-avatar.mini .jv-name { display:none; }
.jarvis-avatar.mini .jv-corners { display:none; }
@media (max-width: 560px){ .jarvis-avatar.mini .jv-svg { width:46px; height:46px; } }
/* ===== Futuristische KI-Seite: blauer Daten-Hintergrund mit fließenden Nullen/Einsen ===== */
.assistant-page.ki-fx { position:relative; overflow:hidden; color:#dbeafc; border:1px solid rgba(54,198,255,.22); background:
  repeating-linear-gradient(0deg, transparent 0 43px, rgba(90,175,235,.07) 43px 44px),
  repeating-linear-gradient(90deg, transparent 0 43px, rgba(90,175,235,.07) 43px 44px),
  radial-gradient(120% 90% at 50% -10%, #0a2247 0%, #061227 55%, #03060f 100%); }
.ki-matrix { position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.5; pointer-events:none; }
.ki-world { position:absolute; inset:0; z-index:0; opacity:.16; pointer-events:none; transition:opacity .4s ease, filter .4s ease; }
.ki-world svg { width:100%; height:100%; display:block; transition:filter .4s ease; }
/* Gespräch aktiv (Zuhören/Sprechen) → Weltkarte leuchtet dunkelgrün */
.ki-world.active { opacity:.4; }
.ki-world.active svg g { fill:#1c9c55; }
.ki-world.active svg { filter:drop-shadow(0 0 12px rgba(45,220,120,.6)); }
.assistant-page.ki-fx::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(80% 60% at 50% 42%, rgba(3,8,20,.74) 0%, rgba(3,8,20,.38) 60%, transparent 100%); }
.assistant-page.ki-fx > *:not(.ki-matrix):not(.ki-world) { position:relative; z-index:1; }
.assistant-page.ki-fx h2 { color:#aee9ff; }
.assistant-page.ki-fx .jv-name { color:#7fb6e6; }
.assistant-page.ki-fx .assistant-log { background:rgba(8,18,38,.55); border:1px solid rgba(120,180,255,.16); border-radius:14px; }
.assistant-page.ki-fx .assistant-empty p { color:#bcd6f5; }
.assistant-page.ki-fx .chatmsg.assistant { background:rgba(20,40,75,.88); color:#e6f1ff; }
.assistant-page.ki-fx .chatmsg.user { background:rgba(31,157,87,.92); color:#fff; }
.assistant-page.ki-fx .assistant-eg { background:rgba(12,28,56,.7); border:1px solid rgba(120,180,255,.3); color:#cfe6ff; }
.assistant-page.ki-fx .assistant-eg:hover { border-color:#36c6ff; color:#fff; }
.assistant-page.ki-fx input[type=text] { background:rgba(6,16,34,.85); border:1px solid rgba(120,180,255,.35); color:#eaf4ff; }
.assistant-page.ki-fx input[type=text]::placeholder { color:#7d9dc4; }
.assistant-page.ki-fx .ai-voice-status { color:#9fc2ec; }
.assistant-page.ki-fx label.check, .assistant-page.ki-fx .ai-talk-label { color:#dbeafc; }
.assistant-page.ki-fx .btn:not(.ai-talk) { background:rgba(20,40,75,.72); border:1px solid rgba(120,180,255,.34); color:#dbeafc; }
.assistant-page.ki-fx .btn:not(.ai-talk):hover { border-color:#36c6ff; }
.assistant-page.ki-fx .ai-talk { background:linear-gradient(160deg, #2be07a 0%, #15a85a 100%); box-shadow:0 0 30px rgba(43,224,122,.55), 0 10px 26px rgba(0,0,0,.45); }
.assistant-page.ki-fx .ai-talk.listening { background:linear-gradient(160deg, #ff5c8a 0%, #d6336c 100%); box-shadow:0 0 26px rgba(214,51,108,.6); }
/* Sprach-zentriert: eine Sprechzeile statt Chat-Verlauf + „denkt nach"-Animation */
.assistant-page.ki-fx.voice-first { display:flex; flex-direction:column; align-items:center; text-align:center; }
.assistant-page.ki-fx.voice-first h2 { align-self:center; }
/* Reine Sprach-Seite: nur Jarvis + Statuszeile, zentriert */
.assistant-page.ki-fx.voice-only { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:calc(100vh - 96px); }
/* Voice-Welle (Schallwelle statt Gesicht) */
.vw-bar { fill:#36c6ff; transform-box:fill-box; transform-origin:center; animation:vwIdle 1.7s ease-in-out infinite; }
@keyframes vwIdle { 0%,100%{ transform:scaleY(.30) } 50%{ transform:scaleY(.58) } }
.vw-bar:nth-child(1){animation-delay:0s} .vw-bar:nth-child(2){animation-delay:.07s} .vw-bar:nth-child(3){animation-delay:.14s} .vw-bar:nth-child(4){animation-delay:.21s} .vw-bar:nth-child(5){animation-delay:.28s} .vw-bar:nth-child(6){animation-delay:.35s} .vw-bar:nth-child(7){animation-delay:.42s} .vw-bar:nth-child(8){animation-delay:.49s} .vw-bar:nth-child(9){animation-delay:.56s} .vw-bar:nth-child(10){animation-delay:.63s} .vw-bar:nth-child(11){animation-delay:.70s}
.jarvis-avatar.listening .vw-bar { fill:#2be07a; animation-name:vwTalk; animation-duration:.7s; }
.jarvis-avatar.thinking .vw-bar { animation-name:vwThink; animation-duration:.85s; }
@keyframes vwThink { 0%,100%{ transform:scaleY(.4); opacity:.65 } 50%{ transform:scaleY(.8); opacity:1 } }
.jarvis-avatar.speaking .vw-bar { animation-name:vwTalk; animation-duration:.5s; }
@keyframes vwTalk { 0%,100%{ transform:scaleY(.22) } 50%{ transform:scaleY(1) } }
.assistant-page.ki-fx .ki-status { margin-top:16px; font-size:18px; line-height:1.5; color:#bcd6f5; max-width:520px; }
/* Der EINE Mikrofon-Schalter (an = grün, aus = rot) + Hinweiszeile */
.assistant-page.ki-fx .ki-microw { margin-top:18px; justify-content:center; }
.assistant-page.ki-fx .ki-mic-btn { font-size:17px; padding:13px 26px; border-radius:999px; font-weight:600; cursor:pointer; min-height:48px; }
.assistant-page.ki-fx .ki-mic-btn:not(.on) { background:linear-gradient(160deg,#2be07a 0%,#15a85a 100%) !important; border-color:#2be07a !important; color:#06210f !important; box-shadow:0 0 22px rgba(43,224,122,.45); }
.assistant-page.ki-fx .ki-mic-btn.on { background:linear-gradient(160deg,#ff5c8a 0%,#d6336c 100%) !important; border-color:#ff5c8a !important; color:#fff !important; box-shadow:0 0 22px rgba(214,51,108,.5); }
.assistant-page.ki-fx .ki-mic-hint { margin-top:14px; font-size:12.5px; line-height:1.5; color:#7fa6d4; max-width:440px; opacity:.85; }
/* In-Seite-Karten: zeigt angeforderte Inhalte oben auf der KI-Seite, gleicher blauer Look */
.assistant-page.ki-fx .ki-cards { width:100%; max-width:640px; display:flex; flex-direction:column; gap:12px; margin:4px 0 16px; max-height:58vh; overflow-y:auto; }
.assistant-page.ki-fx .ki-cards:empty { display:none; }
/* Wenn Karten offen sind, Avatar verkleinern, damit Mikrofon-Knopf sichtbar bleibt */
.assistant-page.ki-fx .ki-cards:not(:empty) ~ .jarvis-avatar { margin:0 0 8px; }
.assistant-page.ki-fx .ki-cards:not(:empty) ~ .jarvis-avatar .jv-svg { width:96px; height:96px; }
@media (max-width:560px){ .assistant-page.ki-fx .ki-cards:not(:empty) ~ .jarvis-avatar .jv-svg { width:78px; height:78px; } }
.assistant-page.ki-fx .ki-card { text-align:left; background:rgba(8,18,38,.82); border:1px solid rgba(120,180,255,.30); border-radius:16px; box-shadow:0 12px 32px rgba(0,0,0,.45), 0 0 22px rgba(54,198,255,.12); overflow:hidden; animation:kiCardIn .26s ease; }
@keyframes kiCardIn { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
.assistant-page.ki-fx .ki-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 14px; background:rgba(20,40,75,.72); border-bottom:1px solid rgba(120,180,255,.22); }
.assistant-page.ki-fx .ki-card-title { font-weight:700; color:#aee9ff; font-size:15px; }
.assistant-page.ki-fx .ki-card-x { background:transparent; border:none; color:#9fc2ec; font-size:24px; line-height:1; cursor:pointer; padding:0 6px; border-radius:8px; min-height:32px; }
.assistant-page.ki-fx .ki-card-x:hover { color:#fff; background:rgba(214,51,108,.45); }
.assistant-page.ki-fx .ki-card-body { padding:4px 14px 10px; }
.assistant-page.ki-fx .ki-card-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid rgba(120,180,255,.12); }
.assistant-page.ki-fx .ki-card-row:last-child { border-bottom:none; }
.assistant-page.ki-fx .ki-card-main { display:flex; flex-direction:column; gap:2px; min-width:0; }
.assistant-page.ki-fx .ki-card-primary { color:#eaf4ff; font-weight:600; font-size:14.5px; word-break:break-word; }
.assistant-page.ki-fx .ki-card-secondary { color:#9fc2ec; font-size:12.5px; word-break:break-word; }
.assistant-page.ki-fx .ki-card-text { color:#cfe0f5; font-size:12.5px; line-height:1.5; margin-top:5px; white-space:pre-wrap; word-break:break-word; }
.assistant-page.ki-fx .ki-card-meta { color:#7fb6e6; font-size:12px; white-space:nowrap; flex:none; padding-top:1px; }
.assistant-page.ki-fx .ki-card-empty { color:#9fc2ec; padding:10px 0; font-size:13.5px; }
/* Echte Datei-Vorschau in einer Karte (PDF/Bild) */
.assistant-page.ki-fx .ki-card-filebody { padding:0; position:relative; }
.assistant-page.ki-fx .ki-file-frame { width:100%; height:46vh; border:0; background:#fff; display:block; }
.assistant-page.ki-fx .ki-file-img { width:100%; max-height:46vh; object-fit:contain; display:block; background:#0a1424; }
@media (max-width:560px){ .assistant-page.ki-fx .ki-file-frame { height:42vh; } .assistant-page.ki-fx .ki-file-img { max-height:42vh; } }
.assistant-page.ki-fx .ki-file-actions { display:flex; gap:1px; background:rgba(120,180,255,.18); }
.assistant-page.ki-fx .ki-file-btn { flex:1; text-align:center; padding:11px 12px; color:#aee9ff; text-decoration:none; font-size:13px; font-weight:600; background:rgba(12,28,56,.85); border:0; cursor:pointer; min-height:44px; }
.assistant-page.ki-fx .ki-file-btn:hover { color:#fff; background:rgba(20,40,75,.95); }
/* === Science-Fiction-Look NUR für Datei-Vorschau (Karte/Globus ist rahmenlos) === */
.assistant-page.ki-fx .ki-card[data-kind="file"] {
  position:relative; border-color:rgba(54,198,255,.55);
  box-shadow:0 12px 32px rgba(0,0,0,.5), 0 0 26px rgba(54,198,255,.32);
  animation:kiCardIn .26s ease, kiScifiGlow 2.6s ease-in-out infinite;
}
@keyframes kiScifiGlow { 0%,100%{ box-shadow:0 12px 32px rgba(0,0,0,.5), 0 0 16px rgba(54,198,255,.22);} 50%{ box-shadow:0 12px 32px rgba(0,0,0,.5), 0 0 32px rgba(54,198,255,.55);} }
.assistant-page.ki-fx .ki-card[data-kind="file"]::before, .assistant-page.ki-fx .ki-card[data-kind="file"]::after {
  content:''; position:absolute; width:16px; height:16px; border:2px solid #36c6ff; pointer-events:none; z-index:2; opacity:.85;
}
.assistant-page.ki-fx .ki-card[data-kind="file"]::before { top:5px; left:5px; border-right:0; border-bottom:0; }
.assistant-page.ki-fx .ki-card[data-kind="file"]::after { bottom:5px; right:5px; border-left:0; border-top:0; }
.assistant-page.ki-fx .ki-card-filebody::after {
  content:''; position:absolute; left:0; right:0; top:0; height:40px; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, rgba(54,198,255,.30), transparent); animation:kiScan 3.4s linear infinite;
}
@keyframes kiScan { 0%{ transform:translateY(-40px); opacity:0;} 12%{ opacity:1;} 88%{ opacity:1;} 100%{ transform:translateY(46vh); opacity:0;} }
/* === Eigene 3D-Planeten-Kugel: RAHMENLOS, frei in der Mitte (keine Kasten/Knöpfe) === */
.assistant-page.ki-fx .ki-card.ki-card-bare { background:transparent; border:0; box-shadow:none; overflow:visible; animation:kiCardIn .3s ease; }
.assistant-page.ki-fx .ki-card-mapbody { padding:4px 0 2px; position:relative; background:transparent; display:flex; flex-direction:column; align-items:center; }
.assistant-page.ki-fx .ki-globe-canvas { display:block; margin:0 auto; max-width:100%; }
.assistant-page.ki-fx .ki-map-label { padding:6px 14px 2px; color:#bcd6f5; font-size:13px; line-height:1.4; text-align:center; }
/* === JARVIS Command Center Dashboard === */
.assistant-page.ki-fx.jarvis { display:block; padding:14px 16px 20px; min-height:auto; text-align:left; }
.jarvis .jv-header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:12px; border-bottom:1px solid rgba(54,198,255,.18); margin-bottom:14px; }
.jarvis .jv-brand { display:flex; align-items:center; gap:10px; }
.jarvis .jv-logo { font-size:24px; color:#36c6ff; filter:drop-shadow(0 0 8px rgba(54,198,255,.7)); }
.jarvis .jv-title { font-weight:800; letter-spacing:.1em; color:#aee9ff; font-size:14px; }
.jarvis .jv-bsub { font-size:11px; color:#7fb6e6; letter-spacing:.08em; }
.jarvis .jv-status { display:flex; align-items:center; gap:7px; font-size:11.5px; color:#7df9ad; letter-spacing:.06em; padding:5px 12px; border:1px solid rgba(60,230,140,.35); border-radius:999px; background:rgba(20,60,40,.4); }
.jarvis .jv-sdot { width:8px; height:8px; border-radius:50%; background:#3ce68c; box-shadow:0 0 8px #3ce68c; animation:jvPulse 1.8s ease-in-out infinite; }
@keyframes jvPulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.jarvis .jv-clockwrap { text-align:right; }
.jarvis .jv-clock { font-size:22px; font-weight:700; color:#dff6ff; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.jarvis .jv-date { font-size:11.5px; color:#9fc2ec; }
.jarvis .jv-grid { display:grid; grid-template-columns:1fr 1.5fr 1fr; gap:14px; align-items:start; }
.jarvis .jv-col { background:rgba(8,18,38,.55); border:1px solid rgba(120,180,255,.18); border-radius:16px; padding:14px; }
.jarvis .jv-center { background:rgba(8,18,38,.3); display:flex; flex-direction:column; align-items:center; }
.jarvis .jv-center-inner { width:100%; display:flex; flex-direction:column; align-items:center; }
.jarvis .jv-ph { margin:0 0 10px; font-size:12px; letter-spacing:.12em; color:#7fb6e6; font-weight:700; }
.jarvis .jv-corerows, .jarvis .jv-feedlist { display:flex; flex-direction:column; gap:8px; }
.jarvis .jv-crow { display:flex; align-items:center; gap:9px; font-size:13px; }
.jarvis .jv-crow-ico { width:20px; text-align:center; }
.jarvis .jv-crow-l { flex:1; color:#9fc2ec; }
.jarvis .jv-crow-v { font-weight:700; color:#dbeafc; }
.jarvis .jv-crow-v.ok { color:#7df9ad; }
.jarvis .jv-orb .jv-svg { width:140px; height:140px; }
.jarvis .jv-orb-name { font-size:11px; letter-spacing:.14em; color:#7fb6e6; margin-top:2px; }
.jarvis .jv-feeditem { display:flex; gap:9px; align-items:flex-start; padding:8px 0; border-bottom:1px solid rgba(120,180,255,.1); }
.jarvis .jv-feeditem:last-child { border-bottom:none; }
.jarvis .jv-tag { font-size:9.5px; font-weight:800; letter-spacing:.05em; padding:2px 6px; border-radius:5px; flex:none; margin-top:1px; }
.jarvis .jv-tag.info { color:#7fd0ff; background:rgba(54,150,255,.18); }
.jarvis .jv-tag.warn { color:#ffb27f; background:rgba(255,140,60,.2); }
.jarvis .jv-tag.tip { color:#9ed8a0; background:rgba(80,200,120,.18); }
.jarvis .jv-feedt { font-size:13px; color:#e6f1ff; line-height:1.35; }
.jarvis .jv-feeds { font-size:11.5px; color:#9fc2ec; margin-top:2px; }
.jarvis .jv-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:12px; margin-top:14px; }
.jarvis .jv-tile { text-align:left; background:rgba(8,18,38,.6); border:1px solid rgba(120,180,255,.2); border-radius:14px; padding:14px 16px; cursor:pointer; transition:border-color .15s, transform .15s; }
.jarvis .jv-tile:hover { border-color:#36c6ff; transform:translateY(-2px); }
.jarvis .jv-tile.warn { border-color:rgba(255,140,60,.5); }
.jarvis .jv-tile-v { font-size:30px; font-weight:800; color:#dff6ff; line-height:1; }
.jarvis .jv-tile-v.small { font-size:21px; }
.jarvis .jv-tile-l { font-size:12px; color:#9fc2ec; margin-top:6px; }
.jarvis .jv-tile-wide { grid-column:span 2; }
.jarvis .jv-quick { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:10px; margin-top:14px; }
.jarvis .jv-cmd { display:flex; align-items:center; gap:9px; padding:12px 14px; background:rgba(20,40,75,.6); border:1px solid rgba(120,180,255,.25); border-radius:12px; color:#dbeafc; font-size:13.5px; font-weight:600; cursor:pointer; min-height:46px; }
.jarvis .jv-cmd:hover { border-color:#36c6ff; background:rgba(20,40,75,.9); }
.jarvis .jv-cmd-ico { font-size:17px; }
.jarvis .jv-footer { display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; margin-top:16px; padding-top:12px; border-top:1px solid rgba(54,198,255,.16); font-size:12.5px; color:#9fc2ec; }
.jarvis .jv-fi { display:flex; align-items:center; gap:5px; }
.jarvis .jv-muted { color:#7fa6d4; font-size:12.5px; }
.jarvis .ki-cards { margin-top:14px; }
.jarvis .ki-microw { margin-top:14px; }
/* Live-Vorlese-Untertitel (erscheint beim Sprechen, verschwindet danach) */
.assistant-page.ki-fx .ki-reading { width:100%; max-width:600px; margin:0 auto; max-height:0; opacity:0; overflow:hidden; transition:max-height .32s ease, opacity .3s ease, margin .3s ease; }
.assistant-page.ki-fx .ki-reading.show { max-height:340px; opacity:1; margin:14px auto 0; }
.assistant-page.ki-fx .ki-reading > div { background:rgba(8,18,38,.85); border:1px solid rgba(54,198,255,.4); box-shadow:0 0 22px rgba(54,198,255,.2); }
.assistant-page.ki-fx .ki-reading-h { display:flex; align-items:center; gap:8px; padding:9px 14px; font-size:12px; font-weight:700; letter-spacing:.04em; color:#7df9ff; border-radius:14px 14px 0 0; border-bottom:1px solid rgba(54,198,255,.22); }
.assistant-page.ki-fx .ki-reading-wave { animation:jvPulse 1.1s ease-in-out infinite; }
.assistant-page.ki-fx .ki-reading-t { padding:11px 16px; color:#e6f1ff; font-size:14.5px; line-height:1.55; max-height:240px; overflow:auto; border-radius:0 0 14px 14px; white-space:pre-wrap; }
@media (max-width:860px){ .jarvis .jv-grid { grid-template-columns:1fr; } .jarvis .jv-clockwrap { text-align:left; } .jarvis .jv-tile-wide { grid-column:span 1; } }
.assistant-page.ki-fx .ki-say { max-width:580px; margin:4px auto; padding:12px 18px; border-radius:14px; background:rgba(8,18,38,.55); border:1px solid rgba(120,180,255,.16); color:#e6f1ff; font-size:16px; line-height:1.55; max-height:230px; overflow:auto; }
.assistant-page.ki-fx .ki-say.thinking { color:#9fc2ec; font-size:26px; letter-spacing:.18em; animation:kiSayPulse 1.1s ease-in-out infinite; }
@keyframes kiSayPulse { 0%,100%{ opacity:.5 } 50%{ opacity:1 } }
.assistant-page.ki-fx .ki-typerow { width:100%; max-width:580px; opacity:.85; margin-top:6px; }
.jarvis-avatar.thinking .jv-core { animation:jvCore .7s ease-in-out infinite; }
.jarvis-avatar.thinking .jv-ring-outer { animation-duration:4s; }
.jarvis-avatar.thinking .jv-svg { filter:drop-shadow(0 0 18px rgba(54,198,255,.65)); }

/* ===== Tagesstart-Sperrseite ===== */
.daystart-overlay {
  position: fixed; inset: 0; z-index: 6000;
  background: radial-gradient(130% 90% at 50% 0%, #eaf6ee 0%, #f1f6f2 48%, #e2eee8 100%);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 28px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.daystart-card {
  width: 100%; max-width: 600px;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 12px 48px rgba(20,40,30,.18); padding: 24px 24px 22px;
  animation: dsIn .42s cubic-bezier(.2,.8,.2,1);
}
@keyframes dsIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.ds-head { margin-bottom: 16px; }
.ds-greet { font-size: 25px; font-weight: 800; color: var(--ink); letter-spacing: -.3px; line-height: 1.15; }
.ds-date { display: flex; align-items: center; gap: 5px; color: var(--brand-dark); font-weight: 600; margin-top: 5px; text-transform: capitalize; }
.ds-date .ico { color: var(--brand); }
.ds-sec { margin-top: 18px; }
.ds-h { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 9px; }
.ds-h .ico { color: var(--brand); }
.ds-appts .ds-appt-block + .ds-appt-block { margin-top: 14px; }
.ds-appt { display: flex; gap: 12px; align-items: flex-start; padding: 9px 12px; background: var(--brand-soft); border-radius: 10px; margin-bottom: 6px; }
.ds-appt-time { font-weight: 800; color: var(--brand-dark); min-width: 44px; font-variant-numeric: tabular-nums; }
.ds-appt-body { min-width: 0; }
.ds-appt-title { font-weight: 600; color: var(--ink); }
.ds-appt-loc { display: flex; align-items: center; gap: 3px; color: var(--muted); font-size: 13px; margin-top: 1px; }
.ds-appt-loc .ico { color: var(--muted); }
.ds-empty { color: var(--muted); font-size: 14px; margin: 0; }
.ds-loading { color: var(--muted); margin: 0; }
.ds-task { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; transition: background .2s, opacity .2s; }
.ds-task.done { background: var(--brand-soft); opacity: .65; }
.ds-task.done .ds-task-title span { text-decoration: line-through; }
.ds-check { flex: 0 0 44px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; margin: -9px -9px 0 -9px; }
.ds-check-box { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--brand); background: #fff; color: var(--brand-dark); font-weight: 900; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.ds-task.done .ds-check-box { background: var(--brand); color: #fff; }
.ds-task-main { flex: 1; min-width: 0; }
.ds-task-title { display: flex; align-items: center; gap: 5px; font-weight: 700; color: var(--ink); }
.ds-task-title .ico { color: var(--brand); }
.ds-badge { background: var(--warn-bg); color: var(--warn); font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 999px; margin-inline-start: 5px; }
.ds-task-desc { color: var(--muted); font-size: 13px; margin: 3px 0 9px; }
.ds-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-actions { display: flex; gap: 10px; margin-top: 22px; }
.ds-start { flex: 1; padding: 14px; font-size: 16px; }
@media (max-width: 560px) {
  .daystart-overlay { padding: 14px 10px; }
  .daystart-card { padding: 18px 16px; border-radius: 14px; }
  .ds-greet { font-size: 21px; }
  .ds-actions { flex-direction: column-reverse; }
  .ds-start { width: 100%; }
}

/* ===== Kunden-Selbstbuchung (freie Slots) ===== */
.appt-resp.pending { background: #fff7e6; border: 1px solid #ffe0a3; color: #8a5a00; }
.kpill.pending { outline: 2px dashed rgba(0,0,0,.5); outline-offset: -3px; }
.kpill-status.pending { background: #ffe4a8; color: #8a5a00; }
.slot-linkbox { display: flex; gap: 8px; align-items: center; }
.slot-list { margin-top: 2px; }
.slot-day { font-weight: 700; font-size: 13px; color: var(--brand-dark); margin: 12px 0 5px; text-transform: capitalize; }
.slot-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; }
.slot-item.booked { background: var(--bg); opacity: .72; }
.slot-time { font-weight: 800; min-width: 48px; font-variant-numeric: tabular-nums; }
.slot-type { flex: 1; min-width: 0; color: var(--muted); font-size: 13px; }
.slot-badge { font-size: 11px; font-weight: 700; padding: 1px 9px; border-radius: 999px; background: #eef3fb; color: #2f54a8; }
.slot-badge.free { background: var(--brand-soft); color: var(--brand-dark); }
.slot-del { border: none; background: none; color: var(--warn); font-size: 16px; cursor: pointer; padding: 0 4px; line-height: 1; flex-shrink: 0; }
@media (max-width: 560px) {
  .slot-linkbox { flex-direction: column; align-items: stretch; }
  .slot-linkbox input { width: 100%; }
  .slot-item { flex-wrap: wrap; }
  .slot-badge { flex-shrink: 0; }
}

/* Automatische Post-Sortierung (E-Mail-Anhänge) */
.mailsort-list { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; margin-top: 12px; }
.mailsort-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line, #e2e6ea); border-radius: 10px; background: var(--card, #fff); flex-wrap: wrap; }
.mailsort-main { flex: 1 1 200px; min-width: 180px; }
.mailsort-type { font-weight: 600; }
.mailsort-meta { font-size: .85em; opacity: .7; margin-top: 2px; word-break: break-word; }
.mailsort-target { font-size: .85em; color: var(--brand, #2f6fed); margin-top: 3px; }
.mailsort-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mailsort-badge { display: inline-block; background: #e11d48; color: #fff; border-radius: 10px; padding: 0 7px; font-size: .72em; margin-left: 6px; }

/* Auto-Sortierung: festes Panel oben im Postfach.
   Rahmen bewusst NICHT var(--line): die Variable ist grünstichig (#dde9e1) und zieht als
   dünner grüner Strich am Bildschirmrand entlang. Hier ein neutrales Grau. */
.mailsort-panel { border: 1px solid #e6e6e6; border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; background: var(--card, #fff); }
.mailsort-head { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.mailsort-head strong { font-weight: 600; }        /* dünner statt fett */
.mailsort-head .btn { padding: 4px 10px; font-size: 12px; }
.mailsort-count { color: var(--muted, #6b7280); font-weight: 600; font-size: 12px; }

/* Auto-Sortierung: änderbarer Vorschlag + auf-/zuklappbar */
.mailsort-edit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mailsort-lbl { font-size: .82em; opacity: .75; }
.mailsort-sel { padding: 3px 7px; font-size: .85em; border-radius: 7px; max-width: 180px; height: auto; }
.mailsort-period { display: inline-flex; gap: 6px; }
.mailsort-chevron { display: inline-block; width: 15px; opacity: .65; }

/* KI-Seite: neuronales Netz / „Gehirn" im Zentrum */
.jv-orb.ki-brainwrap { position: relative; width: 100%; min-height: clamp(260px, 42vh, 400px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ki-brain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.jv-orb.ki-brainwrap .jarvis-avatar { position: relative; z-index: 1; transform: scale(.82); filter: drop-shadow(0 0 12px rgba(167,139,250,.6)); }

/* KI-Seite = ganzes Gehirn (Vollbild) + kleine Mikrofon-Steuerung unten */
.ki-brainpage { position: relative; padding: 0; overflow: hidden; height: calc(100vh - var(--topbar-h, 60px) - 20px); min-height: 460px; display: block; }
.ki-brain-full { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.ki-brain-bottom { position: absolute; left: 0; right: 0; bottom: clamp(48px, 11vh, 130px); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.ki-brain-ctrl { display: inline-flex; align-items: center; gap: 12px; pointer-events: auto; background: rgba(10,16,26,.55); border: 1px solid rgba(150,140,240,.32); border-radius: 999px; padding: 7px 14px; backdrop-filter: blur(6px); }
.ki-brain-ctrl .jarvis-avatar { transform: scale(.58); margin: -14px; }
.ki-brain-ctrl .ki-typerow { display: flex; gap: 8px; }
.ki-brain-ctrl input { min-width: 180px; }
.ki-brain-status { color: rgba(214,224,244,.82); font-size: .85em; text-align: center; pointer-events: none; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.ki-cards-overlay { position: absolute; top: 12px; right: 12px; left: auto; z-index: 4; width: min(420px, 90vw); max-height: 72vh; overflow-y: auto; }
.ki-cards-overlay:empty { display: none; }

/* Gehirn zusammenschieben, wenn eine Karte/Ergebnis groß gezeigt wird (Wetter/Karte, Internet-Infos) */
.ki-brain-full { transition: height .5s ease, opacity .4s ease; }
.assistant-page.brain-min .ki-brain-full { opacity: 1; }
.assistant-page.brain-min .ki-cards-overlay { top: 12px; left: 12px; right: 12px; bottom: 74px; width: auto; max-width: none; max-height: none; z-index: 5; }
.ki-brain-back { position: absolute; left: 50%; transform: translateX(-50%); bottom: 78px; z-index: 6; display: none; }
.assistant-page.brain-min .ki-brain-back { display: inline-flex; }

/* ---- Beleg-Editor im klaren Listen-Stil: dünne Linien, schmale Eingaben, Abschnitts-Etiketten ---- */
.rech-editor { font-size: 13.5px; }
.rech-sec { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; color: #7a8494; background: #f1f3f7; border-radius: 4px; padding: 3px 9px; margin: 20px 0 10px; text-transform: uppercase; }
.rech-editor .form-grid { gap: 12px 18px; }
.rech-editor .field label { font-size: 11.5px; color: #66707f; font-weight: 600; margin-bottom: 3px; }
.rech-editor input, .rech-editor select, .rech-editor textarea { border: 1px solid #e3e7ee; border-radius: 7px; padding: 7px 10px; font-size: 13.5px; background: #fff; }
.rech-editor input:focus, .rech-editor select:focus, .rech-editor textarea:focus { border-color: #9db6e4; outline: none; box-shadow: 0 0 0 3px rgba(80,120,200,.08); }
.rech-editor .rech-line { border: 0; border-top: 1px solid #eceff4; margin: 18px 0 2px; }
/* Positionen: keine Kästen — nur haarfeine Trennlinien; Eingaben erst bei Hover/Fokus sichtbar umrandet */
.rech-pos { width: 100%; border-collapse: collapse; min-width: 680px; }
.rech-pos th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #8a93a3; font-weight: 700; text-align: left; padding: 6px 6px; border-bottom: 1px solid #e3e7ee; background: transparent; }
.rech-pos th.num, .rech-pos td.num { text-align: right; }
.rech-pos td { padding: 7px 6px; border-bottom: 1px solid #eef1f6; vertical-align: top; }
.rech-pos input, .rech-pos select, .rech-pos textarea { border: 1px solid transparent; background: transparent; padding: 5px 6px; border-radius: 6px; font-size: 13.5px; width: 100%; }
.rech-pos input:hover, .rech-pos select:hover, .rech-pos textarea:hover { border-color: #e3e7ee; background: #fff; }
.rech-pos input:focus, .rech-pos select:focus, .rech-pos textarea:focus { border-color: #9db6e4; background: #fff; box-shadow: 0 0 0 3px rgba(80,120,200,.08); outline: none; }
.rech-pos .pos-del { opacity: .35; background: none; border: 0; cursor: pointer; font-size: 14px; color: #b23b4e; padding: 4px 6px; }
.rech-pos tr:hover .pos-del { opacity: 1; }
.rech-addrow { display: flex; gap: 18px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.rech-addrow .linklike { background: none; border: 0; color: #2f6df6; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; }
.rech-addrow .linklike:hover { text-decoration: underline; }
.rech-addrow select { border: 1px solid #e3e7ee; border-radius: 7px; padding: 6px 9px; font-size: 13px; color: #2f6df6; background: #fff; }

.rech-pos .pos-save { opacity: .35; background: none; border: 0; cursor: pointer; font-size: 14px; color: #2f6df6; padding: 4px 6px; }
.rech-pos tr:hover .pos-save { opacity: 1; }

/* ---- Schwebendes E-Mail-Fenster: bleibt beim Seitenwechsel offen (wie ein Browser-Popup) ---- */
#composeRoot .compose-win { position: fixed; right: 18px; bottom: 0; width: min(600px, calc(100vw - 24px)); max-height: min(86vh, 780px); background: #fff; border-radius: 14px 14px 0 0; box-shadow: 0 10px 44px rgba(10, 30, 20, .32); z-index: 46; display: flex; flex-direction: column; overflow: hidden; }
#composeRoot .compose-win-head { display: flex; align-items: center; gap: 8px; background: #173a2c; color: #fff; padding: 10px 14px; cursor: pointer; user-select: none; flex: 0 0 auto; }
#composeRoot .compose-win-title { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
#composeRoot .compose-win-btn { background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 6px; width: 26px; height: 24px; font-size: 14px; line-height: 1; cursor: pointer; }
#composeRoot .compose-win-btn:hover { background: rgba(255,255,255,.28); }
#composeRoot .compose-win-body { overflow: auto; padding: 14px 16px 16px; }
#composeRoot .compose-win.min { max-height: none; }
#composeRoot .compose-win.min .compose-win-body { display: none; }
/* Selbst gesetzte Lage/Größe (nur PC): dann zählen left/top/width/height aus dem Skript,
   right/bottom und die Höhenbremse müssen weichen. */
#composeRoot .compose-win.frei { right: auto; bottom: auto; max-height: none; border-radius: 14px; }
#composeRoot .compose-win.frei.min { height: auto !important; }   /* zugeklappt nur die Kopfzeile */
#composeRoot .compose-win-head { cursor: move; }
/* Acht Anfasser an Kanten und Ecken. Liegen INNEN, weil das Fenster overflow: hidden hat. */
#composeRoot .compose-griff { position: absolute; z-index: 4; touch-action: none; }
#composeRoot .compose-win.min .compose-griff { display: none; }
#composeRoot .g-n { top: 0; left: 10px; right: 10px; height: 5px; cursor: ns-resize; }
#composeRoot .g-s { bottom: 0; left: 10px; right: 10px; height: 5px; cursor: ns-resize; }
#composeRoot .g-w { left: 0; top: 10px; bottom: 10px; width: 5px; cursor: ew-resize; }
#composeRoot .g-e { right: 0; top: 10px; bottom: 10px; width: 5px; cursor: ew-resize; }
#composeRoot .g-nw { left: 0; top: 0; width: 12px; height: 12px; cursor: nwse-resize; }
#composeRoot .g-ne { right: 0; top: 0; width: 12px; height: 12px; cursor: nesw-resize; }
#composeRoot .g-sw { left: 0; bottom: 0; width: 12px; height: 12px; cursor: nesw-resize; }
#composeRoot .g-se { right: 0; bottom: 0; width: 12px; height: 12px; cursor: nwse-resize; }
/* Am Handy füllt das Fenster den Bildschirm — dort gibt es nichts zu ziehen. */
@media (max-width: 720px) {
  #composeRoot .compose-griff { display: none; }
  #composeRoot .compose-win-head { cursor: pointer; }
}
@media (max-width: 720px) {
  #composeRoot .compose-win { right: 0; left: 0; width: 100%; max-height: 92vh; border-radius: 14px 14px 0 0; }
}

/* ============ J.A.R.V.I.S.-HUD (KI-Assistent-Seite) ============ */
.jarvis-hud{
  --hud:#57d7f2; --hud-bright:#aef2ff; --hud-dim:rgba(87,215,242,.35); --hud-faint:rgba(87,215,242,.10); --gold:#ffc233;
  position:relative; overflow:hidden; padding:0; border:1px solid rgba(87,215,242,.18);
  min-height:calc(100vh - var(--topbar-h,60px) - 26px);
  background:radial-gradient(ellipse at 50% 42%, #061421 0%, #02070d 72%);
  color:#c9eef7; font-family:"Segoe UI","Roboto",system-ui,sans-serif; border-radius:14px;
}
.jarvis-hud .jv-grid{position:absolute;inset:0;pointer-events:none;opacity:.18;
  background-image:linear-gradient(var(--hud-faint) 1px,transparent 1px),linear-gradient(90deg,var(--hud-faint) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 72%);mask-image:radial-gradient(ellipse at center,#000 25%,transparent 72%);}
.jarvis-hud .jv-scanlines{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:.30;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);}
.jarvis-hud .jv-vignette{position:absolute;inset:0;pointer-events:none;z-index:3;box-shadow:inset 0 0 180px 60px rgba(0,0,0,.7);}
.jarvis-hud .jv-header{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:12px 22px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--hud-dim);z-index:5;}
.jarvis-hud .jv-sys{color:var(--hud)}
.jarvis-hud .jv-stage{position:absolute;inset:0}
/* Gehirn-Netz mit Synapsen – dezent/leicht HINTER dem großen Kern (nicht anklickbar) */
.jarvis-hud .jv-brainbg{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.26;pointer-events:none;filter:saturate(.8) blur(.3px);
  -webkit-mask-image:radial-gradient(circle at 50% 47%, #000 62%, transparent 92%);mask-image:radial-gradient(circle at 50% 47%, #000 62%, transparent 92%);}
.jarvis-hud.thinking .jv-brainbg{opacity:.4;transition:opacity .5s}
.jarvis-hud.revealed .jv-brainbg{opacity:.16}
.jarvis-hud .jv-core-wrap{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);transition:left 1.05s cubic-bezier(.6,0,.2,1),transform 1.05s cubic-bezier(.6,0,.2,1);z-index:3;text-align:center;}
.jarvis-hud.revealed .jv-core-wrap{left:23%;transform:translate(-50%,-50%) rotate(-9deg) scale(.66)}
.jarvis-hud .jv-core{display:block;filter:drop-shadow(0 0 30px rgba(87,215,242,.5))}
.jarvis-hud .jv-core-label{margin-top:4px;font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--hud-dim);transition:color .4s}
.jarvis-hud.thinking .jv-core-label{color:var(--gold);text-shadow:0 0 12px rgba(255,194,51,.6)}
.jarvis-hud .jv-panels{position:absolute;right:4.5%;top:50%;transform:translateY(-50%);width:min(46%,560px);display:flex;flex-direction:column;gap:12px;z-index:4;}
.jarvis-hud .jv-panel{position:relative;background:linear-gradient(135deg,rgba(8,24,38,.9),rgba(5,14,24,.82));border:1px solid var(--hud-dim);padding:13px 17px 15px;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  opacity:0;transform:translateX(70px) scaleY(.35);transition:opacity .5s,transform .55s cubic-bezier(.2,.9,.3,1.15);}
.jarvis-hud .jv-panel::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--hud),transparent)}
.jarvis-hud.revealed .jv-panel{opacity:1;transform:translateX(0) scaleY(1)}
.jarvis-hud.revealed .jv-panel:nth-child(1){transition-delay:.12s}
.jarvis-hud.revealed .jv-panel:nth-child(2){transition-delay:.28s}
.jarvis-hud.revealed .jv-panel:nth-child(3){transition-delay:.44s}
.jarvis-hud .jv-panel h3{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--hud-bright);margin:0 0 7px;display:flex;justify-content:space-between;gap:10px;text-shadow:0 0 8px rgba(87,215,242,.5)}
.jarvis-hud .jv-panel h3 .jv-tag{color:var(--gold);white-space:nowrap}
.jarvis-hud .jv-pbody{font-size:13.5px;line-height:1.5;white-space:pre-wrap;color:#c9eef7}
.jarvis-hud .jv-bar{height:3px;background:var(--hud-faint);margin-top:9px;overflow:hidden}
.jarvis-hud .jv-bar i{display:block;height:100%;background:var(--hud);box-shadow:0 0 8px var(--hud);width:0}
.jarvis-hud.revealed .jv-panel .jv-bar i{width:var(--w,70%);transition:width 1.3s .45s}
.jarvis-hud .jv-subtitle{position:absolute;left:50%;bottom:82px;transform:translateX(-50%);font-size:14.5px;color:var(--hud-bright);letter-spacing:.03em;text-shadow:0 0 14px rgba(87,215,242,.7);max-width:80%;text-align:center;min-height:20px;z-index:5;}
/* Ihre gesprochenen Worte („gehört") – golden & kursiv abgesetzt vom J.A.R.V.I.S.-Text */
.jarvis-hud .jv-subtitle.jv-heard{color:var(--gold);font-style:italic;text-shadow:0 0 14px rgba(255,194,51,.55)}
.jarvis-hud .jv-console{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:min(90%,680px);display:flex;gap:9px;z-index:6;}
.jarvis-hud .jv-console input{flex:1;min-width:0;background:rgba(6,20,32,.9);border:1px solid var(--hud-dim);color:#c9eef7;padding:12px 17px;font-size:15px;font-family:inherit;outline:none;clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px);}
.jarvis-hud .jv-console .jv-send,.jarvis-hud .jv-console .jv-mic,.jarvis-hud .jv-console .jv-snd{flex:none;white-space:nowrap}
.jarvis-hud .jv-console input:focus{border-color:var(--hud);box-shadow:0 0 18px rgba(87,215,242,.3)}
.jarvis-hud .jv-send,.jarvis-hud .jv-mic{background:linear-gradient(180deg,rgba(87,215,242,.22),rgba(87,215,242,.05));border:1px solid var(--hud);color:var(--hud-bright);padding:0 20px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;font-family:inherit;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);}
.jarvis-hud .jv-mic{padding:0 14px;font-size:16px}
.jarvis-hud .jv-send:hover,.jarvis-hud .jv-mic:hover{background:rgba(87,215,242,.32)}
.jarvis-hud .jv-mic.live{background:rgba(255,194,51,.3);border-color:var(--gold);animation:jvPulse 1s infinite}
/* Aufnahme-Welle: sichtbares Zeichen, dass zugehört/aufgenommen wird; schlägt beim Sprechen aus. */
.jarvis-hud .jv-wave{position:absolute;left:50%;bottom:50px;transform:translateX(-50%);width:min(86%,600px);height:40px;opacity:0;transition:opacity .35s;pointer-events:none;z-index:5;}
.jarvis-hud .jv-wave.on{opacity:1;}
@keyframes jvPulse{50%{box-shadow:0 0 16px rgba(255,194,51,.6)}}
.jarvis-hud .jv-boot{position:absolute;inset:0;background:#02070d;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:opacity .8s}
.jarvis-hud .jv-boot.done{opacity:0;pointer-events:none}
.jarvis-hud .jv-boot-logo{font-size:30px;letter-spacing:.5em;color:var(--hud);font-weight:300;text-shadow:0 0 24px rgba(87,215,242,.8)}
.jarvis-hud .jv-boot-log{font-family:"Consolas","Courier New",monospace;font-size:12px;color:var(--hud-dim);min-height:120px;width:min(80%,440px)}
.jarvis-hud .jv-boot-log div{opacity:0;animation:jvFade .3s forwards}
@keyframes jvFade{to{opacity:1}}
.jarvis-hud .jv-boot-bar{width:min(80%,440px);height:2px;background:var(--hud-faint)}
.jarvis-hud .jv-boot-bar i{display:block;height:100%;width:0;background:var(--hud);transition:width .3s;box-shadow:0 0 10px var(--hud)}
@media (max-width:820px){
  .jarvis-hud .jv-core-wrap{transform:translate(-50%,-50%) scale(.58)}   /* Ruhezustand: Kreis kleiner aufs Handy */
  .jarvis-hud.revealed .jv-core-wrap,.jarvis-hud.jv-many.revealed .jv-core-wrap{left:50%;top:12%;transform:translate(-50%,-50%) scale(.4)}
  .jarvis-hud .jv-panels{right:50%;transform:translate(50%,-50%);top:58%;width:92%}
}

/* Alte Overlay-Texte im HUD ausblenden (Vorlesen/Status übernimmt jv-subtitle). */
.jarvis-hud .ki-reading{display:none !important}
.jarvis-hud #kiStatus{display:none !important}

/* ---- J.A.R.V.I.S. Multi-Fenster-System ---- */
.jarvis-hud .jv-windows{position:absolute;right:4%;top:50%;transform:translateY(-50%);width:min(46%,560px);display:grid;grid-template-columns:1fr;gap:12px;max-height:84%;overflow-y:auto;overflow-x:hidden;padding-right:2px;z-index:4;}
.jarvis-hud .jv-windows.jv-many{grid-template-columns:1fr;width:min(46%,560px)}
.jarvis-hud.jv-many.revealed .jv-core-wrap{left:15%;transform:translate(-50%,-50%) rotate(-9deg) scale(.5)}
.jarvis-hud .jv-win{position:relative;background:linear-gradient(135deg,rgba(8,24,38,.9),rgba(5,14,24,.82));border:1px solid var(--hud-dim);padding:13px 16px 15px;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  opacity:0;transform:translateX(70px) scaleY(.35);transition:opacity .5s,transform .55s cubic-bezier(.2,.9,.3,1.15);}
.jarvis-hud .jv-win::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--hud),transparent)}
.jarvis-hud .jv-win-map::before{background:linear-gradient(180deg,var(--gold),transparent)}
.jarvis-hud.revealed .jv-win{opacity:1;transform:translateX(0) scaleY(1)}
.jarvis-hud.revealed .jv-win:nth-child(1){transition-delay:.10s}
.jarvis-hud.revealed .jv-win:nth-child(2){transition-delay:.24s}
.jarvis-hud.revealed .jv-win:nth-child(3){transition-delay:.38s}
.jarvis-hud.revealed .jv-win:nth-child(4){transition-delay:.52s}
.jarvis-hud .jv-win h3{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--hud-bright);margin:0 0 8px;display:flex;justify-content:space-between;gap:10px;text-shadow:0 0 8px rgba(87,215,242,.5)}
.jarvis-hud .jv-win h3 .jv-tag{color:var(--gold);white-space:nowrap}
.jarvis-hud .jv-pbody{font-size:13.5px;line-height:1.5;white-space:pre-wrap;color:#c9eef7}
.jarvis-hud .jv-bar{height:3px;background:var(--hud-faint);margin-top:9px;overflow:hidden}
.jarvis-hud .jv-bar i{display:block;height:100%;background:var(--hud);box-shadow:0 0 8px var(--hud);width:0}
.jarvis-hud.revealed .jv-win .jv-bar i{width:var(--w,70%);transition:width 1.3s .45s}
/* Messwerte */
.jarvis-hud .jv-data{display:flex;flex-direction:column;gap:6px}
.jarvis-hud .jv-drow{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--hud-faint);padding-bottom:5px}
.jarvis-hud .jv-dl{font-size:11px;letter-spacing:.06em;color:var(--hud-dim);text-transform:uppercase}
.jarvis-hud .jv-dv{font-size:18px;font-weight:600;color:var(--hud-bright);text-shadow:0 0 10px rgba(87,215,242,.4)}
/* News-Ticker */
.jarvis-hud .jv-news{display:flex;flex-direction:column;gap:7px}
.jarvis-hud .jv-nitem{font-size:12.5px;line-height:1.45;color:#c9eef7;padding-left:14px;position:relative}
.jarvis-hud .jv-nitem::before{content:'›';position:absolute;left:0;color:var(--gold)}
/* Globus */
.jarvis-hud .jv-globe{display:block;margin:2px auto 0;filter:drop-shadow(0 0 12px rgba(87,215,242,.4))}
.jarvis-hud .jv-map-meta{text-align:center;font-size:10.5px;letter-spacing:.1em;color:var(--hud-dim);margin-top:4px;text-transform:uppercase}
/* Kern bei mehreren Fenstern gleich wie bei einem (einspaltig – kein 2-Spalten-Überlauf mehr). */
.jarvis-hud.jv-many.revealed .jv-core-wrap{left:23%;transform:translate(-50%,-50%) rotate(-9deg) scale(.66)}
.jarvis-hud .jv-globe{width:100%;height:auto;max-width:230px}
.jarvis-hud .jv-windows::-webkit-scrollbar{width:5px}
.jarvis-hud .jv-windows::-webkit-scrollbar-thumb{background:var(--hud-dim);border-radius:4px}

/* Handy: Fenster in die Mitte-unten (zwischen Kern oben und Konsole unten), einspaltig. */
@media (max-width:820px){
  .jarvis-hud .jv-windows,.jarvis-hud .jv-windows.jv-many{right:auto;left:50%;top:auto;bottom:118px;transform:translateX(-50%);width:94%;max-height:calc(100vh - 300px);grid-template-columns:1fr}
}

/* Google-Karte im Kartenfenster */
.jarvis-hud .jv-gmap{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--hud-dim);box-shadow:0 0 14px rgba(87,215,242,.25)}

/* Handy: Mikrofon-Dauerschalter gut tippbar, Konsole kompakt. */
@media (max-width:820px){
  .jarvis-hud .jv-console{bottom:14px;gap:6px;width:94%}
  .jarvis-hud .jv-console input{padding:13px 14px;font-size:16px}
  .jarvis-hud .jv-mic{padding:0 16px;font-size:20px;min-width:52px}
  .jarvis-hud .jv-send{padding:0 12px;font-size:10px;letter-spacing:.1em}
  .jarvis-hud .jv-snd{padding:0 10px;font-size:15px}
  .jarvis-hud .jv-subtitle{bottom:74px;font-size:13px;max-width:94%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
.jarvis-hud .jv-mic.live{background:rgba(255,194,51,.32);border-color:var(--gold);color:#fff;animation:jvPulse 1.1s infinite}

/* Hintergrund-Klang-Knopf */
.jarvis-hud .jv-snd{background:linear-gradient(180deg,rgba(87,215,242,.22),rgba(87,215,242,.05));border:1px solid var(--hud);color:var(--hud-bright);padding:0 12px;font-size:16px;cursor:pointer;font-family:inherit;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);}
.jarvis-hud .jv-snd:hover{background:rgba(87,215,242,.32)}

/* ==== HUD-Inhaltsfenster: PDF/Dokumente, Kontakt-/Listendaten, E-Mail-Bestätigung ==== */
/* Mehrere echte Dokumente (Rechnungen/Angebote/Fotos) direkt im HUD */
.jarvis-hud .jv-pdf{display:flex;flex-direction:column;gap:12px}
.jarvis-hud .jv-pdf-item{display:flex;flex-direction:column;gap:6px}
.jarvis-hud .jv-pdf-name{font-size:11px;letter-spacing:.06em;color:var(--hud-dim);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jarvis-hud iframe.jv-pdf-frame{width:100%;height:44vh;max-height:440px;border:1px solid var(--hud-dim);background:#fff;border-radius:6px}
.jarvis-hud img.jv-pdf-frame{width:100%;height:auto;max-height:44vh;object-fit:contain;background:#0a1a26;border:1px solid var(--hud-dim);border-radius:6px}
.jarvis-hud .jv-pdf-multi iframe.jv-pdf-frame,.jarvis-hud .jv-pdf-multi img.jv-pdf-frame{height:30vh;max-height:300px}
.jarvis-hud .jv-pdf-acts{display:flex;flex-wrap:wrap;gap:6px}
.jarvis-hud .jv-pdf-btn{background:rgba(87,215,242,.12);border:1px solid var(--hud-dim);color:var(--hud-bright);padding:6px 10px;font-size:11px;cursor:pointer;font-family:inherit;text-decoration:none;border-radius:4px}
.jarvis-hud .jv-pdf-btn:hover{background:rgba(87,215,242,.26)}
/* Kontakt-/Listendaten */
.jarvis-hud .jv-cardlist{display:flex;flex-direction:column;gap:8px}
.jarvis-hud .jv-crow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:1px solid var(--hud-faint);padding-bottom:7px}
.jarvis-hud .jv-cmain{display:flex;flex-direction:column;gap:2px;min-width:0}
.jarvis-hud .jv-cprimary{font-size:14px;color:var(--hud-bright);font-weight:600}
.jarvis-hud .jv-csecondary{font-size:12px;color:var(--hud-dim)}
.jarvis-hud .jv-ctext{font-size:12.5px;color:#c9eef7;line-height:1.45;white-space:pre-wrap}
.jarvis-hud .jv-cmeta{font-size:11px;color:var(--gold);white-space:nowrap}
.jarvis-hud .jv-empty{font-size:12.5px;color:var(--hud-dim);font-style:italic}
/* E-Mail-Schnellbestätigung */
.jarvis-hud .jv-win-confirm::before{background:linear-gradient(180deg,var(--gold),transparent)}
.jarvis-hud .jv-confirm{display:flex;flex-direction:column;gap:10px}
.jarvis-hud .jv-confirm-preview{font-size:12.5px;line-height:1.5;white-space:pre-wrap;color:#c9eef7;max-height:22vh;overflow-y:auto;border-left:2px solid var(--hud-faint);padding-left:10px}
.jarvis-hud .jv-confirm-acts{display:flex;gap:8px}
.jarvis-hud .jv-confirm-send{flex:1;background:linear-gradient(180deg,rgba(255,194,51,.3),rgba(255,194,51,.08));border:1px solid var(--gold);color:#ffe9b0;padding:11px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;font-family:inherit}
.jarvis-hud .jv-confirm-send:hover{background:rgba(255,194,51,.42)}
.jarvis-hud .jv-confirm-send:disabled{opacity:.5;cursor:default}
.jarvis-hud .jv-confirm-cancel{background:rgba(6,20,32,.9);border:1px solid var(--hud-dim);color:var(--hud-dim);padding:11px 14px;font-size:12px;cursor:pointer;font-family:inherit}
.jarvis-hud .jv-confirm-status{font-size:12px;color:var(--hud-dim);min-height:16px}
.jarvis-hud .jv-confirm-lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--hud-dim);margin-top:2px}
.jarvis-hud .jv-confirm-field{width:100%;box-sizing:border-box;background:rgba(6,20,32,.9);border:1px solid var(--hud-dim);color:#dff3fb;padding:9px 11px;font-size:14px;font-family:inherit;border-radius:5px;outline:none}
.jarvis-hud .jv-confirm-field:focus{border-color:var(--hud);box-shadow:0 0 12px rgba(87,215,242,.25)}
.jarvis-hud .jv-confirm-body{min-height:110px;line-height:1.5;resize:vertical}

/* ===== Schwebende Fenster (Seite/Editor parallel bearbeiten) ===== */
#floatDock{position:fixed;inset:0;z-index:900;pointer-events:none}
.float-win{position:fixed;pointer-events:auto;width:min(700px,94vw);max-width:94vw;max-height:86vh;display:flex;flex-direction:column;overflow:hidden;background:var(--canvas,#f4f3ee);border:1px solid rgba(0,0,0,.16);border-radius:12px;box-shadow:0 20px 55px rgba(0,0,0,.32);resize:both}
.float-win-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 8px 14px;background:var(--sidebar,#16201b);color:var(--sidebarInk,#cbd5ce);cursor:move;user-select:none;touch-action:none;flex:none}
.float-win-title{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.float-win-btns{display:flex;gap:4px;flex:none}
.float-win-btn{width:30px;height:28px;border:none;border-radius:6px;background:rgba(255,255,255,.14);color:inherit;font-size:15px;line-height:1;cursor:pointer}
.float-win-btn:hover{background:rgba(255,255,255,.28)}
.float-win-body{padding:10px;overflow:auto;flex:1;-webkit-overflow-scrolling:touch}
.float-win.min{width:300px !important;height:auto !important;max-height:none;resize:none}
.float-win.min .float-win-body{display:none}
.float-win.music-win{width:min(440px,92vw)}
.music-body{display:flex;flex-direction:column}
.music-frame{width:100%;height:225px;border:0;border-radius:8px;background:#000;display:block}
.music-tools{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.music-tools .hint{margin:0;font-size:11px}
.topbar-winbtn{background:transparent;border:none;color:inherit;font-size:19px;cursor:pointer;padding:2px 8px;border-radius:8px;line-height:1;opacity:.85}
.topbar-winbtn:hover{opacity:1;background:rgba(255,255,255,.12)}
/* Eigenes Fenster (Popout / Document-PiP): chromelos rendern – nur der Seiteninhalt, kein Menü/keine Fenster-Buttons */
body.popout .nav-toggle,
body.popout .side,
body.popout #navBackdrop,
body.popout .nav-backdrop,
body.popout .topbar-winbtn,
body.popout .ai-fab,
body.popout .scan-fab { display: none !important; }
body.popout .content { width: 100% !important; max-width: none !important; }
body.popout .layout { display: block; }
.pip-body { margin: 0; background: var(--canvas, #f4f3ee); }
.pip-body .float-page { padding: 14px; }
@media (max-width:560px){ .float-win{width:96vw;max-height:80vh;resize:none} .float-win.min{width:70vw !important} }
.jarvis-hud .jv-confirm-from{width:100%;background:rgba(6,20,32,.9);border:1px solid var(--hud-dim);color:var(--hud-bright);padding:9px 10px;font-size:13px;font-family:inherit;border-radius:4px;outline:none}
.jarvis-hud .jv-confirm-from:focus{border-color:var(--hud)}

/* ==== Handy: Solo-Modus (ein Fenster) + Weiter/Zurück-Steuerung ==== */
.jarvis-hud .jv-solo-nav{display:none;align-items:center;justify-content:space-between;gap:10px;margin-top:2px;padding:8px 10px;background:rgba(6,20,32,.9);border:1px solid var(--hud-dim);}
.jarvis-hud .jv-solo-count{font-size:11px;letter-spacing:.2em;color:var(--hud-dim)}
.jarvis-hud .jv-solo-btn{background:linear-gradient(180deg,rgba(87,215,242,.22),rgba(87,215,242,.05));border:1px solid var(--hud);color:var(--hud-bright);padding:9px 14px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;font-family:inherit}
.jarvis-hud .jv-solo-btn:disabled{opacity:.35;cursor:default}
@media (max-width:560px){
  .jarvis-hud .jv-core-wrap{transform:translate(-50%,-50%) scale(.5)}   /* Ruhezustand: Kreis auf kleinen Handys noch kleiner */
  .jarvis-hud.revealed .jv-core-wrap,.jarvis-hud.jv-many.revealed .jv-core-wrap{top:11%;transform:translate(-50%,-50%) scale(.34)}
  .jarvis-hud .jv-boot-logo{font-size:20px}
  .jarvis-hud .jv-boot-log{min-height:80px;font-size:11px}
  .jarvis-hud .jv-globe{max-width:168px}
  .jarvis-hud .jv-gmap{max-height:190px;object-fit:cover}
  .jarvis-hud iframe.jv-pdf-frame{height:40vh}
  .jarvis-hud .jv-solo .jv-win.jv-hidden{display:none}
  .jarvis-hud .jv-solo .jv-win.jv-active{max-height:calc(100vh - 360px);overflow-y:auto}
  .jarvis-hud .jv-solo-nav{display:flex}
}

/* ==================== Mindmap ==================== */
.mm-card { padding: 16px; }
.mm-loading { color: var(--muted); padding: 30px; text-align: center; }
.mm-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.mm-head select { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 600; background: #fff; min-width: 200px; }
.mm-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.mm-toolbar .btn { padding: 7px 11px; }
.mm-sep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
.mm-hint { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; min-height: 18px; }
.mm-swatch { width: 26px; height: 26px; border-radius: 7px; border: 2px solid rgba(0,0,0,.15); cursor: pointer; padding: 0; }
.mm-swatch.active { outline: 2px solid var(--brand); outline-offset: 1px; }
.mm-viewport {
  position: relative; overflow: hidden;
  height: calc(100vh - 300px); min-height: 440px;
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: inset 0 1px 3px rgba(20,40,30,.05);
  cursor: grab; touch-action: none;
}
.mm-viewport.panning { cursor: grabbing; }
.mm-viewport.connecting { cursor: crosshair; }
.mm-world {
  position: absolute; width: 6000px; height: 4000px; transform-origin: 0 0;
  background-color: #fdfdfb;
  background-image: radial-gradient(circle, #23302a 1.3px, transparent 1.7px);
  background-size: 24px 24px;
}
.mm-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mm-node {
  position: absolute; display: flex; align-items: center; justify-content: center;
  text-align: center; border: 2px solid rgba(24,36,28,.28); border-radius: 10px;
  box-shadow: 0 2px 6px rgba(20,40,30,.14); cursor: move; user-select: none;
  font-size: 14px; font-weight: 600; color: var(--ink); padding: 8px 10px; box-sizing: border-box;
}
.mm-node.circle { border-radius: 50%; }
.mm-node.note {
  border-radius: 4px; border-color: rgba(150,110,0,.28); font-weight: 500; font-size: 13px;
  text-align: left; align-items: flex-start; justify-content: flex-start;
  box-shadow: 3px 5px 12px rgba(20,40,30,.18);
}
.mm-node.selected { outline: 3px solid var(--brand); outline-offset: 2px; }
.mm-node.connect-source { outline: 3px dashed var(--warn); outline-offset: 2px; }
.mm-node .mm-text { width: 100%; max-height: 100%; overflow: hidden; outline: none; white-space: pre-wrap; word-wrap: break-word; }
.mm-node .mm-text[contenteditable="true"] { cursor: text; user-select: text; }
.mm-resize { position: absolute; right: -8px; bottom: -8px; width: 15px; height: 15px; border-radius: 4px; background: var(--brand); border: 2px solid #fff; cursor: nwse-resize; display: none; }
/* ---- Werkzeugleiste in Gruppen (übersichtlich) ---- */
.mm-group { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); position: relative; }
.mm-glabel { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin-right: 3px; }
.mm-colors { gap: 4px; }
/* ---- Bild-Element ---- */
.mm-node.image { padding: 0; overflow: hidden; background: #fff; }
.mm-node.image .mm-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; pointer-events: none; }
.mm-node.image .mm-text { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.86); font-size: 12px; padding: 2px 5px; border-radius: 0 0 8px 8px; }
.mm-node.image .mm-text:empty { display: none; }
/* ---- Handy: große Knöpfe, scrollbare Leiste, mehr Platz für die Karte ---- */
@media (max-width: 760px) {
  .mm-card { padding: 10px; }
  .mm-head { gap: 6px; margin-bottom: 8px; }
  .mm-head select { min-width: 0; flex: 1 1 140px; font-size: 13px; padding: 9px 10px; }
  .mm-head .btn { padding: 9px 10px; font-size: 12.5px; }
  /* Leiste seitlich wischbar – der weiche Rand rechts zeigt, dass es weitergeht */
  .mm-toolbar { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; gap: 6px;
    -webkit-mask-image: linear-gradient(to right, #000 88%, rgba(0,0,0,.25) 100%); mask-image: linear-gradient(to right, #000 88%, rgba(0,0,0,.25) 100%); }
  .mm-toolbar::-webkit-scrollbar { display: none; }
  .mm-group { flex: none; padding: 5px 7px; gap: 4px; }
  .mm-glabel { display: none; }
  .mm-toolbar .btn { padding: 10px 11px; font-size: 15px; min-height: 40px; }   /* gut mit dem Finger treffbar */
  .mm-btxt { display: none; }                                                   /* nur die Symbole zeigen */
  .mm-swatch { width: 30px; height: 30px; }
  .mm-sep { display: none; }
  .mm-hint { font-size: 12px; margin-bottom: 8px; }
  .mm-viewport { height: calc(100vh - 250px); min-height: 340px; }
  .mm-resize { display: block !important; right: -12px; bottom: -12px; width: 22px; height: 22px; }  /* Größe ändern per Finger */
  .mm-zoom .btn { min-width: 44px; min-height: 44px; font-size: 16px; }
}
.mm-node.selected .mm-resize { display: block; }
.mm-edge { stroke: #1f2430; stroke-width: 2; fill: none; }
.mm-edge.selected { stroke: var(--brand); stroke-width: 3.5; }
.mm-edge-hit { stroke: transparent; stroke-width: 16; fill: none; cursor: pointer; }
.mm-zoom { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 6px; z-index: 5; }
.mm-zoom .btn { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); }

/* ==================== Kontoauszug: Kategorie & Notiz ==================== */
.konto-cat-sel { padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; background: #fff; max-width: 160px; }
.konto-note { padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; width: 100%; min-width: 120px; }
.konto-catsum { margin-top: 12px; padding: 10px 12px; background: var(--brand-soft); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 13.5px; }
.konto-catsum-item { white-space: nowrap; }

/* ---- USt-Voranmeldung & Lern-Modus ---- */
.ustva-kz { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 12px; background: var(--brand-soft, #e9f5ee); border-radius: 8px; font-size: 13.5px; }
.ustva-kz-item { white-space: nowrap; }
.ustva-kz-item > b:first-child { color: #186f40; margin-right: 2px; }
.lern-list { margin: 0 0 4px; padding-left: 20px; }
.lern-list li { margin-bottom: 8px; line-height: 1.45; }

/* ---- Kopfzeile kompakt + Symbole in Weiß (dunkelgrüner Balken) ---- */
header.topbar .topbar-winbtn { color: #fff; opacity: .92; font-size: 15px; padding: 4px 6px; line-height: 1; background: transparent; border: none; }
header.topbar .topbar-winbtn:hover { opacity: 1; }
header.topbar .topbar-search { color: #fff; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.35); width: 34px; height: 34px; margin-right: 6px; }
header.topbar .topbar-search .ico svg { width: 16px; height: 16px; }
header.topbar .nav-toggle { color: #fff; font-size: 18px; padding: 5px 9px; }
@media (max-width: 760px) {
  header.topbar { padding: 5px 9px; gap: 7px; }
  header.topbar .nav-toggle { font-size: 13px; padding: 2px 5px; border: none; background: transparent; line-height: 1; }
  header.topbar .brand-logo { height: 24px; }
  header.topbar .brand-text small { display: none; }          /* Untertitel weg – spart Platz */
  header.topbar .topbar-winbtn { font-size: 13px; padding: 3px 4px; }
  header.topbar .topbar-search { width: 30px; height: 30px; margin-right: 4px; }
  header.topbar .topbar-search .ico svg { width: 14px; height: 14px; }
  /* Handy: Konto-Knopf nur als kleiner Aufklapp-Pfeil (Name wird ausgeblendet) – am PC bleibt der Name. */
  .acct-toggle { padding: 4px 7px; gap: 3px; }
  .acct-toggle .acct-label { display: none; }
  .acct-toggle .ico svg { width: 14px; height: 14px; }
  .acct-caret { font-size: 11px; }
}

/* ===== Team-Chat (WhatsApp-Stil): Räume links, Verlauf rechts ===== */
.chat-card { padding: 10px; }
.chat-wrap { display: flex; gap: 12px; align-items: stretch; }
.chat-left { flex: 0 0 330px; max-width: 330px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.chat-lefthead { flex: 0 0 auto; padding: 12px 13px; font-weight: 700; font-size: 16px; border-bottom: 1px solid var(--line); background: var(--bg); }
.chat-rooms { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.chat-room { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: none; background: none; padding: 11px 13px; cursor: pointer; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink); }
.chat-room:hover { background: var(--bg); }
.chat-room.sel { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); font-weight: 600; }
.chat-room-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.chat-room-n { flex: 0 0 auto; font-size: 11px; background: var(--brand); color: #fff; border-radius: 999px; padding: 1px 7px; }
.chat-right { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.chat-head { flex: 0 0 auto; padding: 10px 13px; border-bottom: 1px solid var(--line); background: var(--bg); }
.chat-title { font-weight: 700; font-size: 15px; }
.chat-msgs { flex: 1 1 auto; overflow-y: auto; min-height: 0; height: calc(100vh - 320px); padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #f5f7f6; }
html.dark .chat-msgs { background: #131b23; }
.chat-msg { display: flex; }
.chat-msg.mine { justify-content: flex-end; }
.chat-bub { position: relative; max-width: 78%; background: #fff; border-radius: 12px; padding: 7px 11px 4px; box-shadow: 0 1px 2px rgba(20,40,30,.12); }
.chat-msg.mine .chat-bub { background: var(--brand-soft); }
html.dark .chat-bub { background: #1d2836; }
.chat-from { font-size: 11.5px; font-weight: 700; color: var(--brand-dark); margin-bottom: 2px; }
.chat-text { font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; color: var(--ink); }
.chat-time { font-size: 10.5px; color: var(--muted); text-align: right; margin-top: 2px; }
.chat-img { max-width: 100%; max-height: 260px; border-radius: 8px; display: block; margin-bottom: 4px; }
.chat-file { display: inline-block; font-size: 13px; color: var(--brand-dark); text-decoration: none; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; margin-bottom: 4px; word-break: break-all; }
.chat-del { position: absolute; top: 2px; right: 3px; border: none; background: none; color: var(--muted); cursor: pointer; font-size: 12px; opacity: 0; padding: 2px 4px; }
.chat-bub:hover .chat-del { opacity: 1; }
.chat-bar { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 7px; padding: 9px 11px; border-top: 1px solid var(--line); background: var(--bg); flex-wrap: wrap; }
.chat-input { flex: 1 1 auto; min-width: 0; resize: none; border: 1px solid var(--line); border-radius: 18px; padding: 9px 13px; font: inherit; font-size: 14px; background: #fff; max-height: 120px; }
html.dark .chat-input { background: #16202c; color: var(--ink); }
.chat-filehint { flex: 1 1 100%; font-size: 11.5px; color: var(--muted); }
@media (max-width: 760px) {
  .chat-wrap { flex-direction: column; }
  .chat-left { flex: none; max-width: none; max-height: 168px; }
  .chat-msgs { height: calc(100vh - 400px); min-height: 260px; }
  .chat-bub { max-width: 88%; }
  .chat-del { opacity: 1; }
}

/* ===== Chat: Projekt-Kreise oben (wie WhatsApp-Status) + Chatliste ===== */
/* Die Kreis-Leiste zeigte dieselben Chats wie die Liste darunter — doppelt und Platz
   fressend. Sichtbar bleibt nur der erste Eintrag („＋ Neu"), damit man weiterhin einen
   neuen Chat anlegen kann; ausgewählt und gewechselt wird in der Liste (wie im Messenger). */
.chat-circles { display: flex; gap: 12px; overflow-x: auto; padding: 10px 9px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.chat-circles .chat-circle:not(:first-child) { display: none; }
.chat-circles .chat-circle:first-child { flex-direction: row; width: auto; gap: 9px; padding: 2px 4px; }
.chat-circles .chat-circle:first-child .chat-cbubble { width: 38px; height: 38px; }
.chat-circles .chat-circle:first-child .chat-cname { font-size: 13px; max-width: none; color: var(--ink); font-weight: 600; }
.chat-circles::-webkit-scrollbar { display: none; }
.chat-circle { flex: 0 0 auto; border: none; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 58px; padding: 0; }
.chat-cbubble { position: relative; width: 48px; height: 48px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; border: 2px solid transparent; }
.chat-circle.sel .chat-cbubble { border-color: var(--brand); box-shadow: 0 0 0 2px #fff inset; }
.chat-cbadge { position: absolute; top: -2px; right: -2px; background: #e24b4a; color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 0 5px; min-width: 16px; line-height: 16px; text-align: center; border: 2px solid var(--card); }
.chat-cname { font-size: 10.5px; color: var(--muted); max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-list { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.chat-ava { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
.chat-room-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chat-room-p { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-arch { flex: 0 0 auto; opacity: 0; font-size: 13px; padding: 3px 5px; border-radius: 6px; }
.chat-room:hover .chat-arch { opacity: .75; }
.chat-arch:hover { opacity: 1 !important; background: var(--bg); }
.chat-archhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: none; background: var(--bg); cursor: pointer; padding: 8px 11px; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .chat-arch { opacity: .75; } .chat-cbubble { width: 44px; height: 44px; } }

/* ===== Chat: Sprachnachricht, PDF, Kamera ===== */
.chat-voice { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.chat-voice-ic { font-size: 15px; }
.chat-audio { height: 34px; max-width: 220px; }
.chat-pdf { display: flex; align-items: center; gap: 9px; cursor: pointer; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; margin-bottom: 4px; }
.chat-pdf:hover { background: var(--brand-soft); }
.chat-pdf-ic { font-size: 20px; flex: 0 0 auto; }
.chat-pdf-main { display: flex; flex-direction: column; min-width: 0; }
.chat-pdf-name { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.chat-pdf-hint { font-size: 11px; color: var(--muted); }
.chat-img { cursor: zoom-in; }
.chat-mic.rec { background: #e24b4a !important; color: #fff !important; border-color: #e24b4a !important; animation: chatpulse 1s infinite; }
@keyframes chatpulse { 0%,100% { opacity: 1; } 50% { opacity: .6; } }

/* ===== Chat offen: schwebende Knöpfe weg + nur der Verlauf scrollt ===== */
body.chat-open .scan-fab,
body.chat-open .ai-fab { display: none !important; }
.chat-card { display: flex; flex-direction: column; overflow: hidden; }
.chat-wrap { height: calc(100vh - 190px); min-height: 420px; }
.chat-left, .chat-right { min-height: 0; }
.chat-msgs { height: auto; flex: 1 1 auto; min-height: 0; }
@media (max-width: 760px) {
  .chat-wrap { height: calc(100vh - 168px); min-height: 0; }
  .chat-left { flex: 0 0 auto; max-height: 190px; }
  .chat-msgs { height: auto; min-height: 0; }
}

/* ===== Chat: eigene Nachrichten grün (WhatsApp) + Foto-Avatare + Neuer Chat ===== */
.chat-msg.mine .chat-bub { background: #d9fdd3; }
html.dark .chat-msg.mine .chat-bub { background: #075e54; }
html.dark .chat-msg.mine .chat-text { color: #eaf6f2; }
.chat-cphoto { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.chat-cbubble { overflow: hidden; }
.chat-ava { overflow: hidden; }
.chat-cnew { background: var(--bg) !important; color: var(--brand-dark); border: 2px dashed var(--line); font-size: 22px; font-weight: 400; }
.chat-newprev { width: 62px; height: 62px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 22px; flex: 0 0 auto; overflow: hidden; }

/* ===================== ALMAJD SUPERMARKT · Warenbestand ===================== */
/* Eigenes Design nur für dieses Unternehmen: dunkles Grün, Creme, Salbei. */
.wb {
  /* MEMO-Design (hell) – gleiche Farben wie die Zentrale */
  --wb-bg: #f1f6f2; --wb-card: #ffffff; --wb-line: #dde9e1;
  --wb-ink: #18241c; --wb-ink2: #2c3a30; --wb-mut: #5f6f64; --wb-mut2: #8a978d;
  --wb-green: #1f9d57; --wb-green-d: #17804a; --wb-sage: #5f6f64;
  --wb-cream: #18241c; --wb-soft: #e6f5ec; --wb-red: #b00020; --wb-gold: #9a6a00;
  background: var(--wb-bg); color: var(--wb-ink); border-radius: 16px; padding: 14px;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.wb.ar { font-family: 'Cairo', 'Manrope', sans-serif; direction: rtl; }
.wb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.wb-brand { font-weight: 800; letter-spacing: .14em; font-size: 13px; color: var(--wb-sage); flex: 1; min-width: 120px; }
.wb-lang { display: flex; gap: 4px; }
.wb-lang button { background: transparent; border: 1px solid var(--wb-line); color: var(--wb-mut); padding: 5px 10px; border-radius: 999px; font-size: 12px; cursor: pointer; }
.wb-lang button.on { background: var(--wb-green); border-color: var(--wb-green); color: #fff; }
.wb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
.wb-stat { background: var(--wb-card); border: 1px solid var(--wb-line); border-radius: 12px; padding: 10px 12px; }
.wb-stat b { display: block; font-size: 22px; font-weight: 800; color: var(--wb-cream); }
.wb-stat span { font-size: 11.5px; color: var(--wb-mut); }
.wb-stat.warn b { color: var(--wb-gold); }
.wb-stat.bad b { color: var(--wb-red); }
.wb-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.wb-search { flex: 1; min-width: 150px; background: var(--wb-card); border: 1px solid var(--wb-line); color: var(--wb-ink); padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.wb-search::placeholder { color: var(--wb-mut2); }
.wb-btn { background: var(--wb-green); border: none; color: #fff; padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.wb-btn:hover { background: var(--wb-green-d); }
.wb-btn.ghost { background: transparent; border: 1px solid var(--wb-line); color: var(--wb-ink2); }
.wb-list { display: flex; flex-direction: column; gap: 8px; }
.wb-item { display: flex; align-items: center; gap: 10px; background: var(--wb-card); border: 1px solid var(--wb-line); border-radius: 12px; padding: 10px 12px; }
.wb-item.low { border-color: var(--wb-gold); }
.wb-item.out { border-color: var(--wb-red); }
.wb-ph { width: 42px; height: 42px; border-radius: 10px; background: var(--wb-line); flex: 0 0 auto; object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--wb-sage); }
.wb-main { flex: 1; min-width: 0; }
.wb-name { font-weight: 600; font-size: 14px; color: var(--wb-cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-sub { font-size: 11.5px; color: var(--wb-mut); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-badge { font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: var(--wb-soft); color: var(--wb-green-d); font-weight: 600; }
.wb-badge.low { background: #F6E7C8; color: #6B4708; }
.wb-badge.out { background: #F5D9D5; color: #7A2119; }
.wb-qty { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.wb-qty button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--wb-line); background: var(--wb-bg); color: var(--wb-ink); font-size: 16px; cursor: pointer; line-height: 1; }
.wb-qty button:hover { border-color: var(--wb-sage); }
.wb-qty b { min-width: 34px; text-align: center; font-size: 16px; font-weight: 800; color: var(--wb-cream); }
.wb-empty { text-align: center; color: var(--wb-mut); padding: 30px 10px; }
.wb-form { display: grid; gap: 10px; }
.wb-form label { display: block; font-size: 12px; color: var(--wb-mut); margin-bottom: 3px; }
.wb-form input, .wb-form select, .wb-form textarea { width: 100%; box-sizing: border-box; background: var(--wb-card); border: 1px solid var(--wb-line); color: var(--wb-ink); padding: 9px 11px; border-radius: 9px; font-size: 14px; }
.wb-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .wb { padding: 10px; } .wb-item { padding: 8px 10px; gap: 8px; } .wb-ph { width: 36px; height: 36px; } }

/* ===== ALMAJD SUPERMARKT · Vollbild ohne Menü ===== */
/* Beim Supermarkt verschwindet die gesamte MEMO-Oberfläche; die eigene App füllt den Bildschirm. */
body.almajd-full header.topbar,
body.almajd-full nav.side,
body.almajd-full #navBackdrop { display: none !important; }
body.almajd-full .layout { display: block; margin: 0; padding: 0; }
body.almajd-full .content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
.almajd-wrap { position: relative; width: 100vw; height: 100vh; overflow: hidden; background: #262A27; }
.almajd-frame { width: 100%; height: 100%; border: 0; display: block; background: #262A27; }
.almajd-back {
  position: absolute; left: 12px; bottom: 14px; z-index: 5; opacity: .55;
  background: rgba(38,42,39,.88); color: #DDDAD1; border: 1px solid #3C423C;
  padding: 7px 12px; border-radius: 999px; font-size: 12.5px; cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  backdrop-filter: blur(4px);
}
.almajd-back:hover { background: #2E7D46; border-color: #2E7D46; color: #fff; opacity: 1; }
/* Im Supermarkt-Modus gehören die MEMO-Knöpfe (Kamera-Scanner, Sprachassistent) nicht dazu. */
body.almajd-full #aiFab,
body.almajd-full #scanFab,
body.almajd-full .float-dock { display: none !important; }

/* ===== Login: Bereich auswählen (Zentrale / Supermarkt) ===== */
.login-targets { display: grid; gap: 8px; margin: 0 0 18px; }
.login-target {
  display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px;
  align-items: center; text-align: left; cursor: pointer;
  background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px;
  font-family: inherit; transition: border-color .12s, background .12s;
}
.login-target:hover { border-color: var(--brand); }
.login-target.sel { border-color: var(--brand); background: var(--brand-soft); }
.lt-ico { grid-row: 1 / span 2; font-size: 22px; text-align: center; }
.lt-t { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.lt-s { font-size: 12px; color: var(--muted); }
/* Abmelde-Knopf in der Supermarkt-App (dezent, unten links) */
/* Eigene schmale Leiste ueber der App – so verdeckt der Knopf nichts. */
.almajd-wrap { display: flex; flex-direction: column; }
.almajd-bar {
  flex: 0 0 auto; height: 30px; display: flex; align-items: center; justify-content: flex-end;
  padding: 0 10px; background: #1F231F; border-bottom: 1px solid #3C423C;
}
.almajd-frame { flex: 1 1 auto; height: auto; }
.almajd-logout {
  background: transparent; color: #B9BFB6; border: 1px solid #3C423C;
  padding: 3px 11px; border-radius: 999px; font-size: 12px; cursor: pointer; line-height: 1.4;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.almajd-logout:hover { background: #B3392C; border-color: #B3392C; color: #fff; opacity: 1; }

/* Native Warenerfassung im Vollbild (Bestand-App): füllt den Bildschirm, Inhalt scrollt innen */
.almajd-native { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #262A27; display: flex; flex-direction: column; }
.almajd-native > .card { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; }
.wb-btn.scan { background: #2E7D46; color: #fff; border-color: #2E7D46; }
.wb-btn.scan:hover { background: #276a3b; }
.wb-scan-status { font-size: 13px; font-weight: 700; margin: 4px 2px 0; min-height: 0; }
.wb-scan-status.on { color: #cfe6d6; }
.wb-scan-status.ok { color: #7CE0A0; }
.wb-scan-status.bad { color: #F0A6A6; }

/* ===== Bestand-App: fünf Bildschirme mit unterer Navigation (Almajd-Design) ===== */
.almajd-native .wb { display: flex; flex-direction: column; flex: 1 0 auto; min-height: 0; padding: 12px 12px 0; border-radius: 0; }
.wb-screen { flex: 1 1 auto; padding: 2px 2px 90px; }
.wb-sech { font-size: 15px; font-weight: 800; color: #F4F3EE; margin: 6px 2px; }
.wb-greet { margin: 4px 2px 12px; }
.wb-greet b { display: block; font-size: 24px; font-weight: 800; color: #F4F3EE; }
.wb-greet span { font-size: 13px; font-weight: 700; color: #94AC9C; }
.wb-hint { font-size: 13px; font-weight: 600; color: #94AC9C; text-align: center; margin: 10px 20px; line-height: 1.5; }
.wb-grp { font-size: 12px; font-weight: 800; color: #94AC9C; text-transform: uppercase; letter-spacing: .5px; margin: 14px 4px 6px; }
.wb-need { font-size: 15px; font-weight: 800; color: #7CE0A0; white-space: nowrap; }
.wb-attn { display: flex; flex-direction: column; gap: 8px; }

/* Scannen-Bildschirm */
.wb-scanpanel { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 0; }
.wb-scanwin { width: 100%; max-width: 520px; aspect-ratio: 4/3; border-radius: 18px; background:
  repeating-linear-gradient(135deg, #20241F 0 14px, #23281f 14px 28px); display: flex; align-items: center;
  justify-content: center; font-size: 54px; border: 2px solid #3C423C; }
.wb-btn.scan.big { width: 100%; max-width: 520px; padding: 15px; font-size: 15px; }

/* Untere Navigation */
.wb-tabbar { position: fixed; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 2px; background: #1F231F; border-top: 1px solid #3C423C; padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px)); margin: 0;
  z-index: 20; }
@media (min-width: 560px) { .wb-tabbar { margin: 0; } }
.wb-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none;
  cursor: pointer; color: #8A928A; font-family: inherit; font-size: 11px; font-weight: 700; padding: 4px 2px; border-radius: 10px; }
.wb-tab-ic { font-size: 20px; line-height: 1; filter: grayscale(1) opacity(.7); }
.wb-tab.on { color: #F4F3EE; }
.wb-tab.on .wb-tab-ic { filter: none; }

/* ===== Bestand-App: SVG-Symbole, Foto, WhatsApp, Handy-Optimierung ===== */
.wb-tab-ic { display: inline-flex; align-items: center; justify-content: center; }
.wb-tab-ic svg { width: 23px; height: 23px; }
.wb-btn.wa { background: #25D366; color: #fff; border-color: #25D366; display: inline-flex; align-items: center; }
.wb-btn.wa:hover { background: #1eb655; }

/* Produktfoto im Formular */
.wb-photo-box { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.wb-photo { width: 72px; height: 72px; border-radius: 14px; overflow: hidden; background: #EFEDE6; border: 1px solid #DDDAD1;
  display: flex; align-items: center; justify-content: center; font-size: 30px; flex: 0 0 auto; }
.wb-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Handy: alles kompakt und fingerfreundlich */
@media (max-width: 560px) {
  .wb-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .wb-greet b { font-size: 21px; }
  .wb-screen { padding: 2px 0 84px; }
  .wb-tabbar { padding: 5px 2px; }
  .wb-tab { font-size: 10px; }
  .wb-tab-ic svg { width: 22px; height: 22px; }
  .wb-tools { flex-wrap: wrap; }
  .wb-btn { padding: 9px 12px; }
  .wb-item { padding: 9px 11px; }
}

/* ===== Bestellarchiv ===== */
.wb-archive { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.wb-arch-item { background: var(--card, #fff); border: 1px solid var(--line, #e3e3dd); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.wb-arch-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wb-arch-del { background: none; border: none; color: #B3392C; font-size: 15px; cursor: pointer; padding: 4px 8px; border-radius: 8px; flex: 0 0 auto; }
.wb-arch-del:hover { background: rgba(179,57,44,.1); }
.wb-arch-det { padding: 4px 4px 2px; }
.wb-arch-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 5px 8px; border-bottom: 1px dashed var(--line, #e3e3dd); }
.wb-arch-line b { white-space: nowrap; }

/* ===== Bestand-App im MEMO-Look (hell) – überschreibt die dunklen Vorgaben ===== */
.almajd-wrap { background: var(--bg); }
.almajd-native { background: var(--bg); }
.almajd-bar { background: var(--card); border-bottom: 1px solid var(--line); }
.almajd-logout { background: var(--card); color: var(--ink); border: 1px solid var(--line); opacity: .85; }
.almajd-logout:hover { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); opacity: 1; }
/* Untere Navigation hell */
.wb-tabbar { background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -2px 10px rgba(20,40,30,.06); }
.wb-tab { color: var(--muted); }
.wb-tab.on { color: var(--brand); }
.wb-tab-ic { filter: none; }
.wb-tab.on .wb-tab-ic { filter: none; }
/* Überschriften/Text hell */
.wb-sech { color: var(--ink); }
.wb-greet b { color: var(--ink); }
.wb-greet span { color: var(--muted); }
.wb-hint { color: var(--muted); }
.wb-grp { color: var(--muted); }
.wb-need { color: var(--brand-dark); }
.wb-brand { color: var(--muted); }
/* Scan-Fenster hell */
.wb-scanwin { background: repeating-linear-gradient(135deg, #eef3ef 0 14px, #e7efe9 14px 28px); border: 1px solid var(--line); }
.wb-scanwin svg { stroke: #9aa8a0 !important; }
.wb-scan-status.on { color: var(--muted); }
.wb-scan-status.ok { color: var(--brand-dark); }
.wb-scan-status.bad { color: var(--warn); }
/* Foto-Platzhalter hell */
.wb-photo { background: var(--bg); border-color: var(--line); }

/* ===== Live-Kamera im Scan-Bildschirm ===== */
.wb-scanwin { position: relative; overflow: hidden; }
.wb-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; background: #000; }
.wb-scanwin.live .wb-video { display: block; }
.wb-scanwin-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.wb-scanwin.live .wb-scanwin-ph { display: none; }
.wb-scan-reticle { position: absolute; inset: 20% 12%; border: 2px solid rgba(255,255,255,.85); border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.12); display: none; pointer-events: none; }
.wb-scanwin.live .wb-scan-reticle { display: block; }
.wb-scan-actions { display: flex; gap: 8px; width: 100%; max-width: 520px; }
.wb-scan-actions .wb-btn { flex: 1; padding: 12px 8px; justify-content: center; }
@media (max-width: 560px) { .wb-scan-actions { flex-wrap: wrap; } .wb-scan-actions .wb-btn { flex: 1 1 40%; } }

/* Auto-Erkennung-Knopf aktiv */
.wb-btn.ghost.on { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); }

/* ===== Kategorie-Chips + Bestell-Merker ===== */
.wb-cats { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; margin-bottom: 2px; -webkit-overflow-scrolling: touch; }
.wb-cat { flex: 0 0 auto; background: var(--wb-card); border: 1px solid var(--wb-line); color: var(--wb-mut); padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; }
.wb-cat.on { background: var(--wb-green); border-color: var(--wb-green); color: #fff; }
.wb-cart { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--wb-line); background: var(--wb-card); font-size: 14px; cursor: pointer; line-height: 1; opacity: .55; }
.wb-cart.on { background: var(--wb-soft); border-color: var(--wb-green); opacity: 1; }
.wb-cart:hover { opacity: 1; }
.wb-badge.order { background: #FFF1D6; color: #8a5a00; }

/* ===== Bestand-Formular (Bearbeiten/Neu): klar sichtbare Felder ===== */
.wb-form { display: grid; gap: 12px; }
.wb-form label { display: block; font-size: 12.5px; font-weight: 700; color: #3a4a40; margin-bottom: 5px; }
.wb-form input, .wb-form select, .wb-form textarea {
  width: 100%; box-sizing: border-box;
  background: #f6f9f7; border: 1.5px solid #c4d3c9; color: #18241c;
  padding: 12px 13px; border-radius: 11px; font-size: 15px; font-weight: 600; line-height: 1.2;
  -webkit-appearance: none; appearance: none;
}
.wb-form select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6f64' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.wb-form input::placeholder { color: #9aa8a0; font-weight: 500; }
.wb-form input:focus, .wb-form select:focus, .wb-form textarea:focus {
  outline: none; border-color: #1f9d57; background: #fff; box-shadow: 0 0 0 3px rgba(31,157,87,.16);
}
/* etwas Luft im Fenster + Foto-Box abgesetzt */
.wb-photo-box { padding-bottom: 6px; border-bottom: 1px solid #eef2ee; margin-bottom: 4px; }

/* ===== Kamera-Knopf in der Suche ===== */
.wb-searchwrap { position: relative; flex: 1; min-width: 150px; display: flex; }
.wb-searchwrap .wb-search { flex: 1; padding-right: 46px; }
.wb-searchcam { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center; border: none; background: transparent;
  color: var(--wb-green, #1f9d57); cursor: pointer; border-radius: 9px; }
.wb-searchcam:hover { background: var(--wb-soft, #e6f5ec); }

/* ===== Bestellen: pro Lieferant eine Karte + Mengenfeld ===== */
.wb-ordergrp { background: var(--wb-card, #fff); border: 1px solid var(--wb-line, #dde9e1); border-radius: 14px; padding: 8px; margin-bottom: 12px; }
.wb-ordergrp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 6px 10px; border-bottom: 1px solid var(--wb-line, #eef2ee); margin-bottom: 6px; }
.wb-ordergrp-name { font-size: 15px; font-weight: 800; color: var(--ink, #18241c); }
.wb-ordergrp-btns { display: flex; gap: 6px; }
.wb-ordergrp .wb-item { border: none; background: transparent; padding: 8px 6px; }
.wb-qtyfield { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.wb-qtyfield span { font-size: 13px; font-weight: 700; color: var(--muted, #5f6f64); }
.wb-qtyinput { width: 62px; text-align: center; background: #f6f9f7; border: 1.5px solid #1f9d57; color: #17804a; padding: 8px 6px; border-radius: 10px; font-size: 16px; font-weight: 800; -webkit-appearance: none; appearance: none; }
.wb-qtyinput:focus { outline: none; box-shadow: 0 0 0 3px rgba(31,157,87,.16); }

/* ===== Mitarbeiter-Verwaltung (nur Chef) ===== */
.wb-team { display: flex; flex-direction: column; gap: 8px; max-height: 56vh; overflow-y: auto; }
.wb-check { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #18241c; cursor: pointer; padding: 4px 0; }
.wb-check input { width: 20px; height: 20px; accent-color: #1f9d57; flex: 0 0 auto; }
.wb-check span { font-weight: 600; }

/* Preis-Badges im Artikel klar sichtbar */
.wb-badge.price { background: var(--wb-soft, #e6f5ec); color: var(--wb-green-d, #17804a); font-weight: 800; font-size: 12px; }
.wb-badge.buy { background: #eef2ee; color: #5f6f64; font-weight: 700; }

/* Global-Scan: Firma automatisch erkennen */
.scan-auto { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; }
.scan-auto input { width: 16px; height: 16px; accent-color: var(--brand); }
.scan-firma { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; padding: 6px 10px; border-radius: 8px; margin-bottom: 8px; font-size: 13.5px; }

/* ---- Protokoll / Audit-Log + „wer hat's angelegt"-Abzeichen ---- */
.by-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-size: 11px; font-weight: 600; vertical-align: middle; white-space: nowrap; }
.by-badge svg { width: 12px; height: 12px; }
.audit-table td, .audit-table th { vertical-align: middle; }
.audit-when { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.audit-person { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.audit-person svg { width: 13px; height: 13px; opacity: .8; }
.audit-role { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px; }
.audit-role.chef { background: #fde9c8; color: #8a5a12; }
.audit-role.ma { background: var(--brand-soft); color: var(--brand-dark); }
.audit-area-chip { display: inline-block; padding: 2px 9px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-dark); font-size: 12px; font-weight: 600; white-space: nowrap; }
.audit-target { color: var(--muted); max-width: 340px; overflow: hidden; text-overflow: ellipsis; }

/* ---- Darstellung-Umschalter (Liste / Kacheln / Nebeneinander) für Dokumentseiten ---- */
.docview-switch { display: inline-flex; gap: 4px; background: var(--brand-soft); border-radius: 10px; padding: 3px; }
.docview-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--muted); padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; }
.docview-btn .docview-ico { font-size: 15px; line-height: 1; }
.docview-btn.active { background: #fff; color: var(--brand-dark); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* Liste: kompakte Zeilen */
.firm-doclist { display: flex; flex-direction: column; gap: 6px; }
.firm-docrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); }
.firm-docrow-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; cursor: pointer; text-align: left; color: inherit; font-size: 14px; }
.firm-docrow-open .firm-doc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.firm-docrow-acts { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* Nebeneinander: scrollbare Spalten mit echter Vorschau */
.firm-docols { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; }
.firm-doccol { flex: 0 0 220px; width: 220px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); overflow: hidden; scroll-snap-align: start; display: flex; flex-direction: column; }
.firm-doccol-frame { position: relative; height: 280px; background: #f3f5f4; cursor: zoom-in; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.firm-doccol-prev { width: 100%; height: 100%; border: 0; object-fit: cover; object-position: top center; pointer-events: none; background: #fff; }
.firm-doccol-open { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.62); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 999px; opacity: 0; transition: opacity .12s; }
.firm-doccol-frame:hover .firm-doccol-open { opacity: 1; }
.firm-doccol-foot { display: flex; align-items: center; gap: 6px; padding: 7px 9px 2px; }
.firm-doccol-foot .firm-doc-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.firm-doccol-acts { display: flex; align-items: center; gap: 4px; padding: 4px 9px 9px; flex-wrap: wrap; }
@media (prefers-color-scheme: dark) { .docview-btn.active { background: var(--card); } .firm-doccol-frame { background: #222; } }

/* Name + kleine Zweitzeile (Datum/Betrag) in allen Darstellungen */
.firm-doc-nameblock { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.firm-doc-nameblock .firm-doc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.firm-doc-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.firm-doc-sub .beleg-matched { color: var(--brand-dark); font-weight: 600; }

/* Tracker-Galerie: Platzhalter ohne Beleg + „bezahlt"-Knopf */
.firm-doccol-noprev { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; color: var(--muted); font-size: 12px; }
/* Belegbild in der Ansicht „Nebeneinander" — die erste Seite wird auf eine Leinwand gezeichnet
   (siehe pdfVorschau in app.js). Ein eingebetteter PDF-Rahmen blieb auf Android leer. */
.pdfvorschau { position: relative; display: flex; align-items: flex-start; justify-content: center;
  width: 100%; height: 100%; background: #fff; overflow: hidden; }
.pdfvorschau-bild { display: block; width: 100%; height: auto; }
.pdfvorschau-stand { margin: auto; color: var(--muted); font-size: 11.5px; text-align: center; padding: 8px; }
.pdfvorschau-seiten { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.55); color: #fff;
  font-size: 10.5px; padding: 2px 7px; border-radius: 999px; }
.doc-mini.trk-paidbtn { color: var(--brand-dark); font-weight: 700; }

/* Wochen-Summenübersicht auf Offene Rechnungen / USt */
.trk-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 4px; }
.trk-sum-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--card); display: flex; flex-direction: column; gap: 2px; }
.trk-sum-lbl { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.trk-sum-val { font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
.trk-sum-sub { font-size: 11px; color: var(--muted); }
.trk-sum-card.open { border-left: 4px solid var(--brand); }
.trk-sum-card.week { border-left: 4px solid #d99a00; }
.trk-sum-card.week .trk-sum-val { color: #b07800; }
.trk-sum-card.over { border-left: 4px solid #c62b2b; }
.trk-sum-card.over .trk-sum-val { color: #c62b2b; }
.trk-sum-card.paid { border-left: 4px solid var(--ok); }
.trk-sum-card.paid .trk-sum-val { color: var(--ok); }

/* Doppel-Warn-Dialog */
.dup-file { margin: 4px 0; padding: 8px 10px; background: var(--brand-soft); border-radius: 8px; word-break: break-word; }

/* ---- Notizen als Verlauf (Kunden / Lieferanten) ---- */
.notiz-liste { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.notiz-eintrag { border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 8px; padding: 8px 10px; background: var(--bg); }
.notiz-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.notiz-datum { font-size: 11.5px; font-weight: 700; color: var(--brand); }
.notiz-wer { font-size: 11.5px; color: var(--muted); }
.notiz-weg { margin-left: auto; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 5px; }
.notiz-weg:hover { background: var(--line); color: #d64545; }
.notiz-text { white-space: pre-wrap; font-size: 14px; line-height: 1.45; }

/* ---- E-Mail-Verlauf mit einem Kunden / Lieferanten ---- */
.mailverlauf { display: flex; flex-direction: column; gap: 8px; }
.mv-eintrag { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: var(--bg); }
/* Erhalten links, Gesendet rechts eingerückt — man sieht die Richtung auf einen Blick. */
.mv-eintrag.rein { border-left: 3px solid #5b8def; margin-right: 26px; }
.mv-eintrag.raus { border-left: 3px solid var(--brand); margin-left: 26px; background: var(--card); }
.mv-kopf { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.mv-richtung { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mv-datum { margin-left: auto; white-space: nowrap; }
.mv-betreff { font-weight: 600; font-size: 14px; margin: 3px 0 6px; line-height: 1.35; }
.mv-tasten { display: flex; gap: 6px; }
html.dark .mv-eintrag, html.dark .notiz-eintrag { background: #1d2226; }

/* Richtung auf einen Blick: Erhalten = blau, Gesendet = grün. */
.mv-marke { flex: 0 0 auto; font-weight: 700; font-size: 11px; padding: 2px 8px; border-radius: 999px; color: #fff; }
.mv-eintrag.rein .mv-marke { background: #2f6fed; }
.mv-eintrag.raus .mv-marke { background: var(--brand); }
.mv-eintrag.rein { border-left-color: #2f6fed; }
.mv-eintrag.raus { border-left-color: var(--brand); }
/* Ungelesene erhaltene Mail zusätzlich hervorheben. */
.mv-neu { flex: 0 0 auto; background: #e8302f; color: #fff; font-weight: 700; font-size: 10px; padding: 1px 7px; border-radius: 999px; }
.mv-eintrag.rein.ungelesen { box-shadow: inset 3px 0 0 #2f6fed; }
/* Aufgeklappter Inhalt der E-Mail. */
.mv-inhalt { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.mv-text { white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; max-height: 320px; overflow-y: auto; }

/* Ungelesen-Blase beim Kunden — wie im Messenger. */
.kunde-neu { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 6px; background: #e8302f;
  color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; border-radius: 999px; vertical-align: middle; }

/* Verlauf zuklappen + Anhänge im Verlauf */
.mv-falt { display: inline-block; width: 14px; font-size: 12px; color: var(--muted); }
.mv-anhaenge { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.mv-anhang { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--card); color: var(--ink); font: inherit; font-size: 13px;
  cursor: pointer; text-align: left; width: 100%; }
.mv-anhang:hover { border-color: var(--brand); }
.mv-anhang-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Anhang direkt im Verlauf ansehen (kein neuer Tab, kein Fenster darüber). */
.mv-anhang-zeile { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: start; }
.mv-anhang-gross { border: 1px solid var(--line); background: var(--card); color: var(--muted);
  border-radius: 7px; cursor: pointer; font-size: 13px; padding: 6px 9px; line-height: 1; }
.mv-anhang-gross:hover { border-color: var(--brand); color: var(--brand); }
.mv-anhang-zeile.offen .mv-anhang { border-color: var(--brand); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.mv-datei-schau { grid-column: 1 / -1; border: 1px solid var(--brand); border-top: 0;
  border-radius: 0 0 7px 7px; overflow: hidden; background: #fff; }
.mv-datei-rahmen { width: 100%; height: min(70vh, 700px); min-height: 340px; border: 0; display: block; background: #fff; }
.mv-datei-bild { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; }

/* Kunden aus dem Postfach: Vorschlagsliste zum Abhaken */
.kps-zeile { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; background: var(--bg); cursor: pointer; }
.kps-zeile:hover { border-color: var(--brand); }
.kps-zeile input { margin-top: 3px; flex: 0 0 auto; }
.kps-schon { margin-left: 8px; font-size: 10.5px; font-weight: 700; color: #fff;
  background: var(--muted); border-radius: 999px; padding: 1px 7px; vertical-align: middle; }

/* Suche + Anzahl sitzen jetzt IN der Werkzeugleiste (früher eine eigene zweite Zeile). */
.mail-suchknopf { display: none; }
.mail-toollimit { flex: 0 0 auto; }
.mail-toolsearch { display: flex; align-items: center; gap: 7px; flex: 1 1 auto; min-width: 0; margin: 0 10px; }
.mail-toolsearch .mail-search { flex: 1 1 auto; min-width: 0; }
@media (max-width: 560px) {
  /* Am Handy: alles in EINE Zeile — Ordner und Neue E-Mail nur noch als Symbol. */
  .mail-toolbar { gap: 6px; padding-bottom: 6px; margin-bottom: 6px; }
  .mail-toolbar-left { gap: 5px; flex: 0 0 auto; }
  .mail-foldertoggle-lbl { display: none; }
  .mail-foldertoggle { padding: 7px 9px; }
  .mail-newbtn-top { padding: 7px 9px !important; }
  .mail-newbtn-top span:not(.ico) { display: none; }
  /* Suchfeld zusammengeklappt hinter der Lupe; aufgeklappt eine eigene volle Zeile. */
  .mail-toolbar { flex-wrap: wrap; }
  .mail-suchknopf { display: inline-flex; }
  .mail-toolsearch { display: none; margin: 0; }
  .mail-toolsearch.offen { display: flex; flex: 1 1 100%; order: 9; margin-top: 6px; }
  .mail-toolsearch .mail-search { font-size: 16px; padding: 8px 10px; width: 100%; }
  .mail-toolsearch select { font-size: 12px; padding: 6px 4px; max-width: 86px; }
  .mail-toolicons { gap: 3px; flex: 0 0 auto; }
  .mail-icobtn { padding: 6px; }
}
/* Am Handy soll das Verfassen-Fenster den ganzen Bildschirm einnehmen —
   als schwebendes Kästchen am Rand ist es dort unbedienbar.
   Zugeklappt (.min) bleibt es weiterhin nur die schmale Kopfzeile unten. */
@media (max-width: 560px) {
  #composeRoot .compose-win {
    right: 0; left: 0; top: 0; bottom: 0;
    width: 100%; max-height: none; height: 100dvh;
    border-radius: 0;
  }
  #composeRoot .compose-win-head { padding: 12px 14px; }
  #composeRoot .compose-win-title { font-size: 15px; max-width: 68%; }
  #composeRoot .compose-win-btn { width: 34px; height: 32px; font-size: 17px; }
  /* Vollbild-Verfassen: Das Schreibfeld nimmt den ganzen freien Platz, alles darunter
     (Datei / KI-Hilfe / Mikro, Signatur, Senden) rutscht damit an den unteren Rand. */
  #composeRoot .compose-win-body { flex: 1 1 auto; padding: 14px; display: flex; flex-direction: column; min-height: 0; }
  #composeRoot .compose-win-body .mail-compose { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  #composeRoot .mail-compose > .field:has(> textarea) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 140px; }
  #composeRoot .mail-compose > .field > textarea { flex: 1 1 auto; min-height: 140px; height: auto; }
  /* Der Erklärtext ganz unten braucht am Handy keinen großen Abstand mehr. */
  #composeRoot .mc-hint { margin-bottom: 0; font-size: 11px; }
  /* Eingabefelder mindestens 16px, sonst zoomt iOS beim Antippen hinein. */
  #composeRoot .compose-win-body input,
  #composeRoot .compose-win-body textarea,
  #composeRoot .compose-win-body select { font-size: 16px; }
  /* Zugeklappt: nur die Kopfzeile am unteren Rand. */
  #composeRoot .compose-win.min { top: auto; bottom: 0; height: auto; }
}
/* Untere Leiste im Verfassen-Fenster: am PC wie bisher untereinander … */
.mc-unten { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 560px) {
  /* … am Handy alles in EINE Zeile, klein, und der Erklärtext darunter weg. */
  #composeRoot .mc-unten { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; }
  #composeRoot .mc-hint { display: none; }
  #composeRoot .mc-msgbtns { display: flex; gap: 5px; margin: 0; flex: 0 0 auto; }
  /* Datei / KI-Hilfe / Mikro nur noch als Symbol. */
  #composeRoot .mc-msgbtns .mc-filebtn span:not(.ico),
  #composeRoot .mc-msgbtns .mc-aibtn span:not(.ico) { display: none; }
  #composeRoot .mc-msgbtns > * { padding: 8px 10px !important; min-width: 0; }
  #composeRoot .mc-sigrow { display: flex; align-items: center; gap: 5px; margin: 0; flex: 1 1 130px; min-width: 0; }
  #composeRoot .mc-sigrow .check span { display: none; }        /* nur das Häkchen */
  #composeRoot .mc-sigrow select { flex: 1 1 auto; min-width: 0; font-size: 12px; padding: 7px 6px; }
  #composeRoot .mc-actions { display: flex; gap: 6px; margin: 0; flex: 1 1 100%; }
  #composeRoot .mc-actions .btn { flex: 1 1 0; padding: 11px 8px; font-size: 14px; }
  #composeRoot .mc-actions .hint { display: none; }
}
/* Menü-Knopf (☰) jetzt in JEDER Breite sichtbar. Am PC klappt er die Seitenleiste ein;
   am Handy schiebt er sie wie bisher herein (Regeln im 860px-Block). */
.nav-toggle { display: inline-flex; }
@media (min-width: 861px) {
  body.nav-zu nav.side { display: none; }
}
@media (max-width: 560px) {
  /* Die Karte selbst hat kein Polster mehr, damit Liste und Lesebereich bis an den Rand
     gehen. Die Bereiche DARÜBER (Anhang-Vorschläge, Werkzeugleiste) sollen aber Luft haben —
     deshalb bekommen genau die einen Seitenabstand statt der ganzen Karte. */
  .card.mail-card > .mailsort-panel,
  .card.mail-card > .mail-toolbar { margin-left: 10px; margin-right: 10px; }
  /* Ist eine E-Mail geöffnet, verschwinden die Anhang-Vorschläge — beim Lesen zählt jeder
     Millimeter, und alles darunter rückt dadurch nach oben. Zugeklappt sind sie ohnehin nur
     eine Kopfzeile, aber die kostet mit Abstand rund 60 px. Sobald man zurückgeht, sind sie
     wieder da (die Klasse has-sel setzt der Code beim Auswählen einer Mail). */
  .card.mail-card:has(.mail-shell.has-sel) > .mailsort-panel { display: none; }
}
@media (max-width: 560px) {
  /* Aufgeklappte Anhang-Vorschläge über den ganzen Bildschirm: In der schmalen Karte sind
     die drei Auswahlfelder je Eintrag sonst nicht zu bedienen. Zugeklappt ist alles wie
     vorher — nur die Kopfzeile. */
  .mailsort-panel.offen {
    position: fixed; inset: 0; z-index: 60; margin: 0 !important;
    background: var(--card); display: flex; flex-direction: column;
    /* Im Vollbild liegt der 1-px-Rahmen genau auf der Bildschirmkante. Weil --line
       grünstichig ist (#dde9e1), sah das aus wie ein dünner grüner Strich am Rand. */
    border: 0; border-radius: 0;
  }
  .mailsort-panel.offen .mailsort-head {
    position: sticky; top: 0; z-index: 2; flex: 0 0 auto;
    /* Kein grüner Farbstich: --bg ist #f1f6f2 und --line #dde9e1. Hier neutral. */
    background: #fff; border-bottom: 1px solid #e6e6e6; padding: 12px;
  }
  /* max-height: 52vh aus der Grundregel aufheben — sonst bleibt der untere Teil des
     Bildschirms leer, obwohl noch Einträge da sind. */
  .mailsort-panel.offen .mailsort-list { flex: 1 1 auto; max-height: none; margin-top: 0;
    overflow-y: auto; overflow-x: hidden; padding: 8px 8px 20px; }
  /* Volle Breite nutzen und nichts rechts abschneiden. */
  .mailsort-panel.offen .mailsort-item { width: 100%; max-width: 100%; box-sizing: border-box; }
  .mailsort-panel.offen .mailsort-main { min-width: 0; }
  .mailsort-panel.offen .mailsort-edit { flex-wrap: wrap; max-width: 100%; }
  .mailsort-panel.offen .mailsort-head { gap: 6px; }
  .mailsort-panel.offen .mailsort-head strong { font-size: 15px; }
  /* Dahinter soll nichts mitrollen. */
  body.mailsort-offen { overflow: hidden; }
}
/* Selbst gezeichnetes PDF (Android: eingebettete PDFs werden dort sonst an eine fremde
   App weitergereicht). Seiten liegen untereinander und rollen im Betrachter. */
.pdfview { width: 100%; max-height: 78vh; overflow-y: auto; background: #f1f3f4;
  border: 1px solid var(--line); border-radius: 6px; padding: 8px; display: flex;
  flex-direction: column; gap: 8px; }
.pdfview-seite { display: block; width: 100%; height: auto; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.18); border-radius: 3px; }
.pdfview-stand { font-size: 13px; color: var(--muted); text-align: center; padding: 10px; }

/* Die schwebenden Knöpfe (KI-Scanner-Kamera, Assistent) stehen im Postfach im Weg —
   dort wird ohnehin über die eigene Werkzeugleiste gearbeitet. Nur im Postfach ausblenden. */
body.view-mailbox .scan-fab,
body.view-mailbox .ai-fab,
body.view-mailbox .jarvis-fab { display: none !important; }
/* Ebenso, solange die Anhang-Liste im Vollbild offen ist. */
body.mailsort-offen .scan-fab,
body.mailsort-offen .ai-fab,
body.mailsort-offen .jarvis-fab { display: none !important; }
/* Beleg-Betrachter: Kopfzeile mit Titel links, Aktionen rechts. */
.docview-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.docview-titel { margin: 0; font-size: 16px; word-break: break-all; }
.docview-tasten { display: flex; gap: 8px; flex-wrap: wrap; white-space: nowrap; }
.docview-btn { display: inline-flex; align-items: center; gap: 6px; }
.docview-ic { display: inline-flex; align-items: center; line-height: 1; }

@media (max-width: 560px) {
  /* Betrachter über die GANZE Fläche und die Aktionen ganz oben — nur Symbole,
     nebeneinander, gleich groß. Der Dateiname steht darunter klein. */
  .modal-backdrop > .modal.modal-doc {
    /* height NICHT setzen — sonst gewinnt sie gegen inset:0 und der Betrachter bleibt kurz. */
    /* height NICHT setzen — sonst gewinnt sie gegen inset:0. max-height der Grundregel
       (88vh) muss aber weg, sonst bleibt unten ein Streifen frei. */
    position: fixed; inset: 0; width: auto; max-width: none; height: auto; max-height: none;
    margin: 0; border-radius: 0; padding: 0; display: flex; flex-direction: column;
  }
  .modal.modal-doc .docview-kopf {
    order: 1; flex: 0 0 auto; margin: 0; padding: 6px 8px 4px;
    flex-direction: column-reverse; align-items: stretch; gap: 2px;
    border-bottom: 1px solid var(--line); background: var(--bg);
  }
  .modal.modal-doc .docview-tasten {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; flex-wrap: nowrap;
  }
  .modal.modal-doc .docview-btn { width: 100%; justify-content: center; padding: 10px 0; font-size: 16px; }
  .modal.modal-doc .docview-lbl { display: none; }          /* nur Symbole */
  .modal.modal-doc .docview-titel { font-size: 12px; color: var(--muted); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; padding: 0 2px; }
  /* Inhalt füllt den Rest — PDF, Bild oder Hinweis. */
  .modal.modal-doc > .pdfview,
  .modal.modal-doc > iframe,
  .modal.modal-doc > img { order: 2; flex: 1 1 auto; min-height: 0; max-height: none;
    width: 100%; border: 0; border-radius: 0; margin: 0; }
  /* Die PDF-Seite bis an den Rand — kein Polster, keine Schatten/Ecken. */
  .modal.modal-doc > .pdfview { padding: 0; gap: 4px; background: #fff;
    justify-content: safe center; }
  .modal.modal-doc > .pdfview.mehrseitig { background: #e9ecef; }
  .modal.modal-doc > .pdfview .pdfview-seite { border-radius: 0; box-shadow: none; }
  .modal.modal-doc > img { object-fit: contain; }
}

/* Blättern zwischen den Anhängen einer E-Mail (wie im Gmail-Postfach). */
.docview-blaettern { display: flex; align-items: center; gap: 4px; }
.docview-pfeil { border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 8px; width: 34px; height: 34px; font-size: 20px; line-height: 1; cursor: pointer; }
.docview-pfeil:disabled { opacity: .35; cursor: default; }
.docview-zaehler { font-size: 12px; color: var(--muted); min-width: 44px; text-align: center; }
@media (max-width: 560px) {
  /* Am Handy schwebt die Blätterleiste UNTEN über dem Dokument (wie im Gmail-Postfach).
     Als eigene Kopfzeile hat sie 40 px Höhe gefressen, die dem Beleg fehlten. */
  .modal.modal-doc .docview-blaettern {
    position: absolute; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%); z-index: 6;
    background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 999px;
    padding: 4px 6px; gap: 2px; box-shadow: 0 2px 10px rgba(0,0,0,.18);
  }
  .modal.modal-doc .docview-pfeil { width: 42px; height: 36px; border: 0; background: transparent; }
  .modal.modal-doc .docview-zaehler { font-size: 13px; font-weight: 600; color: var(--ink); }
}

/* Empfängerzeile unter dem „An"-Feld: zeigt zu jeder Adresse den Namen, damit man beim
   Schreiben sieht, WER die Mail bekommt — nicht nur eine nackte Adresse. */
.mc-empf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; font-size: 12px; min-height: 0; }
.mc-empf:empty { display: none; }
.mc-empf-lbl { color: var(--muted); }
.mc-empf-chip { display: inline-flex; align-items: baseline; gap: 2px; max-width: 100%;
  background: #f3f5f4; border: 1px solid #e6e6e6; border-radius: 999px; padding: 2px 9px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-empf-chip strong { font-weight: 700; }
.mc-empf-adr { color: var(--muted); }
.mc-empf-tag { margin-left: 6px; font-size: 10.5px; color: var(--muted); border-left: 1px solid #d8dcda; padding-left: 6px; }
.mc-empf-tag.warn { color: #b42318; border-color: #f0c4bf; }
.mc-empf-chip.fehler { background: #fdf2f1; border-color: #f0c4bf; }
html.dark .mc-empf-chip { background: #1c2733; border-color: #2b3a49; }
html.dark .mc-empf-chip.fehler { background: #2a1b1b; border-color: #5a2f2c; }
@media (max-width: 560px) {
  /* Am Handy je Empfänger eine eigene Zeile — nebeneinander wäre alles abgeschnitten. */
  .mc-empf { flex-direction: column; align-items: flex-start; gap: 4px; }
  .mc-empf-chip { max-width: 100%; }
}

/* „An:"-Kennzeichnung in der Liste des Gesendet-Ordners — dort steht der Empfänger,
   nicht der Absender (der wäre in jeder Zeile derselbe). */
.mail-row2-anlbl { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); font-weight: 600; margin-right: 2px; }

/* Wechselnde Sprüche in der freien Mitte der Kopfzeile.
   Nimmt den Platz zwischen Marke und den rechten Knöpfen ein — dadurch rückt die Marke
   direkt neben den Menü-Knopf (vorher schob „justify-content: space-between" sie in die Mitte). */
header.topbar .topbar-spruch {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 14px; cursor: pointer; user-select: none;
}
header.topbar .topbar-spruch-text {
  max-width: 100%; text-align: center;
  font-size: 13.5px; font-style: italic; line-height: 1.35; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease;
}
header.topbar .topbar-spruch-text.an { opacity: 1; transform: none; }
header.topbar .topbar-spruch:hover .topbar-spruch-text { color: var(--ink); }
/* Bei wenig Platz zuerst den Spruch opfern — Marke und Knöpfe sind wichtiger. */
@media (max-width: 1100px) { header.topbar .topbar-spruch-text { font-size: 12.5px; -webkit-line-clamp: 2; } }
@media (max-width: 900px) { header.topbar .topbar-spruch { display: none; } }

/* Eigenständige Seiten-Fenster: der Inhalt steckt in einem eigenen Rahmen, damit Klicks
   darin IM Fenster bleiben und nicht die Hauptseite umschalten. */
.float-win-body .float-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--bg, #f1f6f2); }
.float-win-body:has(> .float-frame) { padding: 0; }
/* Anfasser zum Ziehen der Größe — liegen INNEN, weil das Fenster overflow: hidden hat. */
.float-win .float-griff { position: absolute; z-index: 4; touch-action: none; }
.float-win.min .float-griff { display: none; }
.float-win .g-n { top: 0; left: 12px; right: 12px; height: 6px; cursor: ns-resize; }
.float-win .g-s { bottom: 0; left: 12px; right: 12px; height: 6px; cursor: ns-resize; }
.float-win .g-w { left: 0; top: 12px; bottom: 12px; width: 6px; cursor: ew-resize; }
.float-win .g-e { right: 0; top: 12px; bottom: 12px; width: 6px; cursor: ew-resize; }
.float-win .g-nw { left: 0; top: 0; width: 14px; height: 14px; cursor: nwse-resize; }
.float-win .g-ne { right: 0; top: 0; width: 14px; height: 14px; cursor: nesw-resize; }
.float-win .g-sw { left: 0; bottom: 0; width: 14px; height: 14px; cursor: nesw-resize; }
.float-win .g-se { right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; }
/* Eigene Anfasser statt der Browser-Ecke: die zog nur rechts unten und meldete keine Größe. */
.float-win { resize: none; }

/* Im eingebetteten Seiten-Fenster ist die Kopfzeile überflüssig — der Fenstertitel sagt
   schon, welche Seite es ist, und die Höhe fehlt sonst dem Inhalt. */
body.im-rahmen header.topbar { display: none !important; }
body.im-rahmen .content { padding-top: 10px; }
body.im-rahmen .jarvis-fab, body.im-rahmen .float-win { display: none !important; }

/* Erinnerungs-Auswahl im Termin-Dialog: mehrere Zeitpunkte zum Antippen. */
.erinner-box { display: flex; flex-wrap: wrap; gap: 6px; }
.erinner-chip { border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; }
.erinner-chip:hover { border-color: var(--brand); }
.erinner-chip.an { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
@media (max-width: 560px) { .erinner-chip { padding: 8px 12px; font-size: 13px; } }

/* Fenster wird gerade aus der App herausgezogen — sichtbares Zeichen, dass beim Loslassen
   ein eigenes Browserfenster daraus wird. */
.float-win.raus { opacity: .72; outline: 3px dashed var(--brand); outline-offset: 3px; }
.float-win.raus .float-win-head::after { content: " — loslassen = eigenes Fenster"; font-weight: 400; font-size: 12px; opacity: .85; }

/* Anklickbare Adressen im Mailtext und Fenster mit fremden Seiten. */
.mailtext-link { color: #2f6fed; text-decoration: underline; cursor: pointer; word-break: break-all; }
.float-frame.extern { background: #fff; }

/* Nummernkreise: festgelegte Reihen sind gesperrt und werden gedämpft dargestellt. */
.nummernkreis { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: var(--card); }
.nummernkreis.fest { background: #f6f7f8; opacity: .85; }
.nummernkreis.fest input { background: #eef0f2; cursor: not-allowed; }

/* Layout-Baukasten in den Einstellungen. */
.layout-gruppe { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; }
.layout-gruppe h3 { margin: 0 0 8px; font-size: 14px; }
.layout-gruppe .row { flex-wrap: wrap; gap: 10px; }

/* Lesbare Darstellung einer eingelesenen E-Rechnung (XML sieht sonst niemand an). */
.er-ansicht { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: var(--card); }
.er-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid #1B2A57; padding-bottom: 8px; margin-bottom: 10px; }
.er-kopf strong { font-size: 17px; color: #1B2A57; }
.er-nr { font-size: 17px; font-weight: 700; }
.er-format { font-size: 11.5px; color: var(--muted); }
.er-spalten { display: flex; gap: 24px; flex-wrap: wrap; }
.er-block { flex: 1 1 240px; min-width: 0; }
.er-block h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.er-name { font-weight: 700; font-size: 15px; }
.er-adr { white-space: pre-line; color: var(--ink); margin-bottom: 6px; }
.er-zeile { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; font-size: 13px; }
.er-k { color: var(--muted); }
.er-v { text-align: right; word-break: break-word; }
.er-tabelle { margin: 14px 0 8px; overflow-x: auto; }
.er-tabelle table { width: 100%; border-collapse: collapse; font-size: 13px; }
.er-tabelle th { background: #F4F5F7; color: #1B2A57; text-align: left; padding: 6px 8px; font-size: 11.5px; white-space: nowrap; }
.er-tabelle td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.er-tabelle td.r, .er-tabelle th.r { text-align: right; }
.er-tabelle tr:nth-child(even) td { background: #FAFBFC; }
.er-pos-desc { font-size: 11.5px; color: #565C66; margin-top: 2px; }
.er-summen { margin-left: auto; max-width: 340px; }
.er-zeile.brutto { background: #1B2A57; color: #fff; border-radius: 6px; padding: 7px 10px; margin-top: 6px; font-weight: 700; }
.er-zeile.brutto .er-k { color: #fff; }
.er-warnung { margin-top: 12px; border-left: 3px solid #EFA22B; background: #fffaf0; padding: 8px 12px; border-radius: 0 8px 8px 0; font-size: 13px; }
.er-warnung.dublette { border-left-color: #b42318; background: #fdf2f1; }
.er-warnung ul { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 560px) { .er-spalten { gap: 12px; } .er-summen { max-width: none; } }

/* ===== Beleg-Editor im sevDesk-Aufbau (v223) =================================
   Zweispaltiger Kopf (Kunde links, Belegdaten rechts), Abschnitte als graue
   Kapseln, Positionen als Zeilen mit Beschreibungsfeld und „Optional"-Schalter.
   Vorlage war die sevDesk-Oberfläche, die der Nutzer gezeigt hat.            */
.sev-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 56px; align-items: start; }
.sev-sp { display: flex; flex-direction: column; gap: 20px; }
.sev-feld { display: flex; flex-direction: column; gap: 7px; }
.sev-feld > label,
.sev-lbl { font-size: 13px; font-weight: 700; color: #1c2434; }
.sev-feld input, .sev-feld textarea, .sev-feld select {
  width: 100%; border: 1px solid #cfd6e0; border-radius: 7px; padding: 11px 13px;
  font: inherit; font-size: 15px; line-height: 1.35; background: #fff; color: #1c2434;
}
.sev-feld select { padding-right: 34px; }
.sev-feld textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.sev-feld input:focus, .sev-feld textarea:focus, .sev-feld select:focus {
  outline: none; border-color: #6f9bea; box-shadow: 0 0 0 3px rgba(80,120,200,.12);
}
.sev-lblzeile { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sev-lblzeile .linklike { font-size: 13px; }
.sev-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* Belegnummer + kleines Zusatzfeld + Zahnrad, wie in der Vorlage */
.sev-nr { display: flex; gap: 8px; }
.sev-nr .sev-nrfeld { position: relative; flex: 1 1 auto; }
.sev-nr .sev-nrfeld input { padding-right: 34px; }
.sev-nr .sev-zahnrad {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; color: #8a92a6; padding: 3px; line-height: 0;
}
.sev-nr .sev-zahnrad:hover { color: #2f6df6; }
.sev-nr .sev-zusatz { flex: 0 0 74px; }

/* Umschalter Brutto / Netto */
.sev-schalter { display: inline-flex; border: 1px solid #d8dde6; border-radius: 8px; overflow: hidden; }
.sev-schalter button {
  background: #fff; border: 0; padding: 8px 20px; font: inherit; font-size: 13.5px;
  cursor: pointer; color: #5d7d92;
}
.sev-schalter button.an { background: #eaf1fe; color: #2f6df6; font-weight: 600; box-shadow: inset 0 0 0 1px #2f6df6; }

/* Positionsliste. Die Zeile ist ein Raster mit BENANNTEN Feldern — dadurch steht die
   Anordnung lesbar im CSS und lässt sich für das Handy völlig anders legen, ohne dass
   im HTML etwas verschoben werden muss.
   Am PC: alles in einer Zeile, die Beschreibung als breite Zeile darunter. */
.sev-poskopf, .sev-poszeile {
  display: grid;
  grid-template-columns: 26px minmax(180px, 1fr) 74px 92px minmax(120px, 160px) 88px 96px minmax(96px, 118px) 34px;
  gap: 10px; align-items: center;
}
.sev-poszeile {
  grid-template-areas:
    "nr name  menge einheit preis ust rab betrag del"
    ".  besch besch besch  besch besch besch besch .";
  row-gap: 8px;
}
.sev-poszeile > .p-nr      { grid-area: nr; }
.sev-poszeile > .p-name    { grid-area: name; }
.sev-poszeile > .p-besch   { grid-area: besch; }
.sev-poszeile > .p-menge   { grid-area: menge; }
.sev-poszeile > .p-einheit { grid-area: einheit; }
.sev-poszeile > .p-preis   { grid-area: preis; }
.sev-poszeile > .p-ust     { grid-area: ust; }
.sev-poszeile > .p-rabatt  { grid-area: rab; }
.sev-poszeile > .p-betrag  { grid-area: betrag; }
.sev-poszeile > .p-del     { grid-area: del; }
.sev-poskopf { font-size: 12.5px; font-weight: 700; color: #1c2434; padding: 0 0 6px; }
.sev-poskopf .re, .sev-poszeile .re { text-align: right; }
.sev-pos { border-bottom: 1px dashed #e3e7ee; padding: 16px 0 14px; }
.sev-pos:last-child { border-bottom: 0; }
.sev-poszeile input, .sev-poszeile select {
  width: 100%; border: 1px solid #cfd6e0; border-radius: 7px; padding: 10px 12px;
  font: inherit; font-size: 14.5px; line-height: 1.35; background: #fff; color: #1c2434;
}
.sev-poszeile select { padding-right: 26px; }
.sev-poszeile input:focus, .sev-poszeile select:focus {
  outline: none; border-color: #6f9bea; box-shadow: 0 0 0 3px rgba(80,120,200,.12);
}
.sev-poszeile .sev-nr2 { font-size: 14px; color: #1c2434; }
.sev-poszeile .sev-betrag { font-size: 14px; white-space: nowrap; }
/* Rabatt: Zahl und „%" stehen in EINER Umrandung, wie in der Vorlage. */
.sev-poszeile .sev-rabatt {
  display: flex; align-items: center; border: 1px solid #cfd6e0; border-radius: 7px;
  background: #fff; padding-right: 10px; width: 100%;
}
.sev-poszeile .sev-rabatt input { border: 0; border-radius: 7px 0 0 7px; box-shadow: none; }
.sev-poszeile .sev-rabatt input:focus { box-shadow: none; }
.sev-poszeile .sev-rabatt:focus-within { border-color: #6f9bea; box-shadow: 0 0 0 3px rgba(80,120,200,.12); }
.sev-poszeile .sev-rabatt span { color: #8a92a6; font-size: 14px; }
.p-besch textarea {
  width: 100%; min-height: 92px; resize: vertical;
  border: 1px solid #cfd6e0; border-radius: 7px; padding: 11px 13px;
  font: inherit; font-size: 14.5px; line-height: 1.55; background: #fff; color: #1c2434;
}
.p-besch textarea:focus { outline: none; border-color: #6f9bea; box-shadow: 0 0 0 3px rgba(80,120,200,.12); }
.sev-posfuss { display: flex; align-items: center; gap: 12px; margin: 8px 0 0 36px; }
.sev-loesch { background: none; border: 0; cursor: pointer; color: #9aa3b2; padding: 6px; }
.sev-loesch:hover { color: #e0455e; }

/* Schiebeschalter „Optional" */
.sev-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; color: #5d7d92; }
.sev-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.sev-toggle .bahn {
  width: 46px; height: 26px; border-radius: 13px; background: #d4d9e1; position: relative;
  transition: background .15s; flex: 0 0 auto;
}
.sev-toggle .bahn::after {
  content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.sev-toggle input:checked + .bahn { background: #2f6df6; }
.sev-toggle input:checked + .bahn::after { left: 23px; }
.sev-toggle input:focus-visible + .bahn { box-shadow: 0 0 0 3px rgba(80,120,200,.25); }

/* Am Handy untereinander statt nebeneinander */
/* Trennlinien zwischen den Abschnitten, Aktionslinks und Summenblock (sevDesk-Aufbau) */
.sev-trenner { border-top: 1px dashed #dfe3ea; margin: 22px 0 0; }
/* Aktionszeile unter den Positionen: gleich hohe Knoepfe nebeneinander statt blauer
   Textlinks in unterschiedlicher Groesse. Die Artikelauswahl ist ein Auswahlfeld und war
   dadurch immer anders hoch als die Links daneben — jetzt sind alle 36 px hoch und
   sitzen auf einer Linie. */
.sev-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 0 4px; }
.sev-links .linklike, .sev-links select, .sev-links .sev-kiknopf {
  height: 36px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #d8dee8; border-radius: 9px; background: #fff; color: #2f6df6;
  font-size: 13.5px; font-weight: 600; padding: 0 13px; cursor: pointer;
  line-height: 1; white-space: nowrap; }
.sev-links .linklike:hover, .sev-links select:hover, .sev-links .sev-kiknopf:hover {
  border-color: #2f6df6; background: #f5f8ff; text-decoration: none; }
.sev-links select { color: #1c2434; font-weight: 500; max-width: 320px; }
/* Die KI-Hilfe hebt sich ab — sie schreibt Inhalte, die anderen fuegen nur Zeilen ein. */
.sev-links .sev-kiknopf { color: var(--brand-dark); border-color: #bfe3d0; background: #eef9f2; }
.sev-links .sev-kiknopf:hover { border-color: var(--brand); background: #e3f4ea; }
.sev-summen { margin-top: 18px; }
.sev-sumzeile { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 9px 0; font-size: 15px; }
/* Die Beschriftung darf umbrechen, der Betrag bleibt rechts und einzeilig — sonst kleben
   beide am Handy aneinander (genau das ist passiert). */
.sev-sumzeile > span:first-child { flex: 1 1 auto; min-width: 0; }
.sev-sumzeile > span:last-child { flex: 0 0 auto; white-space: nowrap; text-align: right; }
.sev-sumzeile.gesamt { border-top: 1px solid #e3e7ee; margin-top: 4px; padding-top: 14px; font-size: 22px; font-weight: 700; }
.sev-sumzeile.opt { color: #8a92a6; font-size: 13.5px; }

/* [hidden] muss auch gegen display:flex/grid gewinnen — sonst bleibt eine eingeklappte
   Positionszeile trotzdem sichtbar. */
.sev-pos [hidden] { display: none !important; }

/* ---- Beleg-Editor am Handy ----------------------------------------------------
   Reihenfolge nach dem Sinn, nicht nach der Tabelle: erst WAS geliefert wird
   (Bezeichnung, direkt darunter die Beschreibung), dann die kleinen Zahlenfelder,
   zuletzt der Betrag. So liest man die Position von oben nach unten wie einen Satz.

       ①  [ Baustelleneinrichtung, Aufmaß … ]        🗑
          [ Einrichten der Baustelle, Absichern … ]

          Menge      Einheit     USt.
          [ 1,00 ]   [ Stk ▾ ]   [ 19% ▾ ]

          Preis (netto)  Rabatt        Betrag
          [ 180,00 ]     [ 10 % ]   162,00 EUR

   Alles kleiner als am PC (Felder 7/9 px, Schrift 13,5 px, Beschriftungen 10 px) —
   am Telefon zählt jeder Millimeter Höhe. */
@media (max-width: 900px) {
  /* Kopfbereich: eine Spalte, enger, kleinere Felder */
  .sev-kopf { grid-template-columns: 1fr; gap: 14px 0; }
  .sev-sp { gap: 12px; }
  .sev-feld { gap: 4px; }
  .sev-feld > label, .sev-lbl { font-size: 12.5px; }
  .sev-feld input, .sev-feld textarea, .sev-feld select { padding: 8px 10px; font-size: 13.5px; border-radius: 6px; }
  .sev-feld textarea { min-height: 84px; }
  .sev-reihe { gap: 10px; }
  .rech-sec { font-size: 9.5px; padding: 2px 8px; margin: 14px 0 8px; }
  .sev-trenner { margin-top: 14px; }
  .sev-schalter button { padding: 7px 14px; font-size: 12.5px; }

  .sev-poskopf { display: none; }

  /* Jede Position ist eine Karte */
  .sev-pos {
    border: 1px solid var(--line); border-radius: 10px;
    padding: 11px 11px 9px; margin-bottom: 10px; background: var(--card);
  }
  .sev-pos:last-child { border-bottom: 1px solid var(--line); }

  .sev-poszeile {
    grid-template-columns: 20px 1fr 1fr 1fr 26px;
    grid-template-areas:
      "nr    name  name    name   del"
      "besch besch besch   besch  besch"
      "menge menge einheit ust    ust"
      "preis preis rab     betrag betrag";
    gap: 9px 7px; align-items: end;
  }
  .sev-poszeile > .p-nr      { align-self: center; font-size: 13px; color: var(--muted); }
  .sev-poszeile > .p-betrag  { align-self: end; font-weight: 700; font-size: 14.5px; padding-bottom: 7px; }
  .sev-poszeile > .p-del     { align-self: center; justify-self: end; padding: 4px; }

  /* Kleine Beschriftung über jedem Zahlenfeld */
  .sev-poszeile > [data-lbl]::before {
    content: attr(data-lbl); display: block; margin-bottom: 3px;
    font-size: 10px; font-weight: 700; letter-spacing: .02em; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .sev-poszeile > .p-name::before { display: none; }
  .sev-poszeile input, .sev-poszeile select { padding: 7px 9px; font-size: 13.5px; border-radius: 6px; }
  .sev-poszeile .sev-rabatt { padding-right: 7px; }
  .sev-poszeile .sev-rabatt span { font-size: 12px; }
  /* Bezeichnung darf etwas kräftiger sein — sie ist die Überschrift der Position. */
  .sev-poszeile > .p-name input { font-weight: 600; }
  .p-besch textarea { min-height: 56px; font-size: 13px; padding: 8px 10px; border-radius: 6px; line-height: 1.45; }

  .sev-posfuss { flex-wrap: wrap; gap: 8px 14px; margin: 9px 0 0 0; }
  .sev-toggle { font-size: 12.5px; gap: 8px; }
  .sev-toggle .bahn { width: 38px; height: 21px; border-radius: 11px; }
  .sev-toggle .bahn::after { width: 15px; height: 15px; left: 3px; top: 3px; }
  .sev-toggle input:checked + .bahn::after { left: 20px; }

  .sev-links { gap: 6px; padding: 10px 0 2px; }
  .sev-links .linklike, .sev-links select, .sev-links .sev-kiknopf { font-size: 12.5px; height: 34px; padding: 0 10px; }
  .sev-links select { max-width: 100%; flex: 1 1 100%; }
  .sev-sumzeile { font-size: 13.5px; padding: 7px 0; gap: 12px; }
  .sev-sumzeile.gesamt { font-size: 18px; padding-top: 11px; }
}


@media (max-width: 560px) {
  /* Der Brutto/Netto-Umschalter darf nicht über den rechten Rand stehen. */
  .card > div:has(> .sev-schalter) { flex-wrap: wrap; }
  .sev-schalter { width: 100%; }
  .sev-schalter button { flex: 1 1 0; padding: 10px 0; }
}

/* ===== Menü im sevDesk-Aufbau (v225) =========================================
   Suchfeld oben, Hauptpunkte mit aufklappbaren Unterpunkten, Abschnitt „Verwalten".

   WICHTIG: Die Seitenleiste ist DUNKEL und hat eigene Farbvariablen: --sidebar-ink für
   Text, --sidebar-muted für Nebensächliches. NICHT var(--ink)/var(--muted) nehmen (die
   gelten für den hellen Inhaltsbereich) und auch nicht `inherit` — die Unterpunkte hängen
   in einem <div>, und die helle Farbe setzt nur „nav.side button". Beim ersten Anlauf stand
   deshalb dunkler Text auf dunklem Grund. */
.nav-suche {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: 1px solid currentColor; border-radius: 9px;
  padding: 10px 12px; margin: 0 0 10px; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--sidebar-muted, #76847c); text-align: left;
  border-color: rgba(255,255,255,.14);
}
.nav-suche:hover { color: var(--sidebar-ink, #cbd5ce); border-color: rgba(255,255,255,.28); }
.nav-suche span { flex: 1 1 auto; }
.nav-suche kbd { font: inherit; font-size: 11px; background: transparent; border: 0; padding: 0; opacity: .7; }
.nav-abschnitt {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sidebar-muted, #76847c); padding: 18px 12px 6px;
}
#nav .nav-gruppe { display: flex; align-items: center; gap: 8px; }
#nav .nav-gruppe .nav-pfeil { margin-left: auto; font-size: 13px; line-height: 1; opacity: .55; transition: transform .15s; }
#nav .nav-gruppe.auf .nav-pfeil { transform: rotate(180deg); }
/* Unterpunkte: eingerückt, ohne Symbol, an einer senkrechten Linie */
.nav-unter { display: flex; flex-direction: column; margin: 2px 0 6px 21px; padding-left: 13px; border-left: 2px solid rgba(127,127,127,.35); }

#nav .nav-unterpunkt {
  position: relative; width: 100%; text-align: left; background: none; border: 0;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--sidebar-muted, #76847c);
}
#nav .nav-unterpunkt:hover { color: var(--sidebar-ink, #cbd5ce); background: rgba(255,255,255,.07); }
#nav .nav-unterpunkt.active { color: #fff; font-weight: 700; }
/* Der aktive Unterpunkt färbt seinen Abschnitt der Linie ein */
#nav .nav-unterpunkt.active::before {
  content: ''; position: absolute; left: -15px; top: 3px; bottom: 3px;
  width: 2px; background: var(--brand); border-radius: 1px;
}
@media (max-width: 900px) {
  .nav-unter { margin-left: 16px; padding-left: 11px; }
}

/* ===================================================================== */
/* Bewegung: Seitenwechsel, Fenster, Ladebalken                          */
/*                                                                        */
/* Grundsatz: SCHNELL. 160–220 ms, nichts darüber. Eine Animation, die   */
/* man bemerkt, weil man auf sie wartet, ist eine schlechte Animation —   */
/* sie soll den Wechsel begleiten, nicht verzögern.                       */
/*                                                                        */
/* Wer im Betriebssystem „Bewegung reduzieren" eingestellt hat, bekommt   */
/* nichts davon (ganz unten). Das ist keine Kür: Bei manchen Menschen     */
/* löst Bewegung auf dem Bildschirm Übelkeit aus.                         */
/* ===================================================================== */

@keyframes seiteRein {
  from { opacity: 0; transform: translateY(10px) scale(0.994); }
  to   { opacity: 1; transform: none; }
}
@keyframes kartenRein {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fensterRein {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes hintergrundRein { from { opacity: 0; } to { opacity: 1; } }

/* Der Seitenwechsel. Wird per Klasse ausgelöst und danach wieder entfernt,
   damit sie beim nächsten Mal erneut greift. */
body.seitenwechsel main.content {
  animation: seiteRein 190ms cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
/* Die Karten kommen ganz leicht versetzt — das ergibt den Eindruck von Tiefe,
   ohne dass man auf sie wartet. Nur die ersten vier: Bei einer langen Liste
   sähe es sonst aus, als würde die Seite langsam aufgebaut. */
body.seitenwechsel main.content > .card:nth-child(1) { animation: kartenRein 200ms cubic-bezier(0.22, 0.9, 0.3, 1) both; }
body.seitenwechsel main.content > .card:nth-child(2) { animation: kartenRein 200ms cubic-bezier(0.22, 0.9, 0.3, 1) 35ms both; }
body.seitenwechsel main.content > .card:nth-child(3) { animation: kartenRein 200ms cubic-bezier(0.22, 0.9, 0.3, 1) 70ms both; }
body.seitenwechsel main.content > .card:nth-child(4) { animation: kartenRein 200ms cubic-bezier(0.22, 0.9, 0.3, 1) 100ms both; }

/* Fenster (Dialoge) */
.modal-backdrop { animation: hintergrundRein 130ms ease both; }
.modal-backdrop > .modal { animation: fensterRein 190ms cubic-bezier(0.22, 0.9, 0.3, 1) both; }

/* Der Menüpunkt, den man gerade angeklickt hat, gibt kurz nach —
   die Rückmeldung, die einen Klick „echt" wirken lässt. */
nav.side button { transition: transform 90ms ease, background-color 140ms ease; }
nav.side button:active { transform: scale(0.97); }

/* Knöpfe allgemein: minimal, aber spürbar. */
.btn { transition: transform 90ms ease, box-shadow 140ms ease, background-color 140ms ease; }
.btn:active { transform: translateY(1px) scale(0.985); }

/* Ladebalken ganz oben — der Trick, der eine App schnell wirken lässt:
   Man sieht sofort, dass etwas passiert, statt in eine stehende Seite zu schauen. */
#ladebalken {
  position: fixed; top: 0; left: 0; height: 2.5px; width: 0;
  background: linear-gradient(90deg, var(--brand), #7cf0b4);
  box-shadow: 0 0 8px var(--brand);
  z-index: 9999; opacity: 0; pointer-events: none;
  transition: width 180ms ease, opacity 200ms ease;
}
#ladebalken.laeuft { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  body.seitenwechsel main.content,
  body.seitenwechsel main.content > .card,
  .modal-backdrop,
  .modal-backdrop > .modal { animation: none !important; }
  .btn:active, nav.side button:active { transform: none; }
  #ladebalken { display: none; }
}

/* ===================================================================== */
/* Menü: farbiges Feld je Bereich (Entwurf D)                            */
/*                                                                        */
/* Die Farbe steht für den Bereich, nicht für die Reihenfolge. Am Handy   */
/* findet das Auge eine Farbe schneller als ein Wort — genau darum geht   */
/* es hier. Ohne hinterlegte Farbe bleibt das Feld dezent grau, damit ein */
/* neuer Menüpunkt nie kaputt aussieht.                                   */
/* ===================================================================== */

.nav-chip {
  width: 27px; height: 27px; flex: 0 0 27px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.07);
  color: var(--sidebar-muted);
  transition: transform 110ms ease, background-color 140ms ease;
}
.nav-chip svg { width: 15px; height: 15px; }

/* Etwas mehr Luft, damit die Felder nicht aneinanderkleben. */
nav.side button { gap: 10px; padding-top: 7px; padding-bottom: 7px; }

/* Der aktive Punkt: die Zeile hebt sich leicht ab, das Feld wird kräftiger.
   Kein voller Farbbalken — sonst kämpfen bei sieben Farben alle miteinander. */
nav.side button.active,
nav.side button.nav-gruppe.active { background: rgba(255, 255, 255, 0.08); }
nav.side button.active .nav-chip,
nav.side button.nav-gruppe.active .nav-chip { transform: scale(1.06); }

nav.side button:hover .nav-chip { transform: scale(1.06); }

/* Die Unterpunkte behalten die schlichte Linie — sonst wird es unruhig.
   Der Einzug bleibt bei den ursprünglichen 21 px: Mit 30 px passte
   „Auftragsbestätigungen" nicht mehr in die Spalte und das Menü bekam einen
   Schiebebalken. Lange Bezeichnungen dürfen stattdessen umbrechen — abschneiden
   würde die Hälfte des Wortes verstecken. */
.nav-unter { margin-left: 21px; }
#nav .nav-unterpunkt { white-space: normal; line-height: 1.35; text-align: left; }
/* Und niemals waagerecht scrollen: Die Spalte ist schmal, das Menü muss hineinpassen. */
nav.side { overflow-x: hidden; }

/* Die Spalte wird 14 px breiter (210 → 224). Grund: „Auftragsbestätigungen" ist EIN
   Wort und kann nicht umbrechen — mit den neuen Farbfeldern fehlten genau 6 px, und das
   Wort wurde abgeschnitten. Zusammen mit der Silbentrennung darunter passt jetzt auch
   ein längerer Menüpunkt, ohne dass etwas verschwindet. */
nav.side { width: 224px; }
#nav .nav-unterpunkt span, nav.side button > span { hyphens: auto; overflow-wrap: break-word; }

@media (prefers-reduced-motion: reduce) {
  .nav-chip { transition: none; }
  nav.side button:hover .nav-chip,
  nav.side button.active .nav-chip { transform: none; }
}

/* Zwischenüberschrift im Schnellzugriff — trennt „Verwalten" vom Rest, damit bei
   dreißig Kacheln noch erkennbar bleibt, was wozu gehört. */
.home-quick-titel {
  font-size: 11.5px; font-weight: 700; letter-spacing: .5px;
  color: var(--muted); margin: 14px 0 7px;
}
.home-quick-titel:first-of-type { margin-top: 4px; }

/* ---- Materialkatalog (916 Artikel mit Bildern) -------------------------- */
/* Das Fenster ist bewusst breiter als die Grundregel: Ein Katalog mit Bildern
   braucht Fläche, sonst passen zwei Karten nebeneinander und man scrollt ewig. */
.modal:has(.matkat) { max-width: 1180px; width: 96vw; }
.matkat-kopf { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 9px; }
.matkat-suche { flex: 1 1 260px; min-width: 0; }
.matkat-sel { flex: 0 0 auto; }
.matkat-nur { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.matkat-nur input { margin: 0; }

.matkat-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; }
.matkat-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink);
  font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.matkat-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.matkat-chipzahl { font-size: 11px; opacity: .7; }
.matkat-chip.on .matkat-chipzahl { opacity: .85; }

.matkat-leiste { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  flex-wrap: wrap; margin-bottom: 8px; }
.matkat-zahl { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.matkat-klein { font-size: 11.5px; color: var(--muted); }

.matkat-gitter { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); }
.matkat-karte { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 11px;
  padding: 9px; background: #fff; }
.matkat-karte.eigen { border-color: var(--brand); }
.matkat-bildbox { position: relative; height: 122px; display: flex; align-items: center; justify-content: center;
  background: #fafbfc; border-radius: 8px; overflow: hidden; margin-bottom: 7px; }
.matkat-bild { max-width: 100%; max-height: 122px; object-fit: contain; }
.matkat-kein { font-size: 11.5px; color: var(--muted); }
.matkat-marke { position: absolute; left: 5px; top: 5px; background: rgba(0,0,0,.62); color: #fff;
  font-size: 9.5px; padding: 2px 5px; border-radius: 5px; }

.matkat-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.matkat-zeile2 { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; font-size: 11px;
  color: var(--muted); margin-bottom: 5px; }
.matkat-haendler { padding: 1px 5px; border-radius: 4px; font-size: 10px; font-weight: 600; color: #fff; }
.matkat-haendler.hb { background: #e2610a; }   /* Hornbach-Orange */
.matkat-haendler.bh { background: #d2001e; }   /* Bauhaus-Rot */
.matkat-artnr { font-size: 10.5px; }

.matkat-preis { display: flex; align-items: baseline; gap: 5px; margin-bottom: 2px; }
.matkat-preis strong { font-size: 15px; }
.matkat-einheit { font-size: 11.5px; color: var(--muted); }
.matkat-eigenmarke { font-size: 9.5px; font-weight: 700; color: #fff; background: var(--brand);
  padding: 1px 5px; border-radius: 4px; }
.matkat-hinweis { font-size: 11px; color: var(--muted); line-height: 1.35; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.matkat-fuss { display: flex; gap: 5px; align-items: center; margin-top: auto; padding-top: 7px; }
.matkat-eigen { flex: 1 1 auto; min-width: 0; padding: 5px 7px; font-size: 12px; }
.matkat-link { flex: 0 0 auto; width: 30px; height: 28px; border: 1px solid var(--line);
  border-radius: 7px; background: #fff; cursor: pointer; font-size: 13px; }
.matkat-stand { font-size: 10px; color: var(--muted); margin-top: 5px; }

@media (max-width: 560px) {
  /* Am Handy zwei Karten je Zeile — bei einer scrollt man durch 916 Artikel ewig. */
  .matkat-gitter { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 8px; }
  .matkat-bildbox { height: 96px; }
  .matkat-bild { max-height: 96px; }
  .matkat-name { font-size: 11.5px; -webkit-line-clamp: 2; }
  .matkat-preis strong { font-size: 14px; }
  .matkat-nur { display: none; }
}

/* ---- Trockenbau-Kalkulator (eigene Seite im Rahmen) --------------------- */
/* Die Seite bringt ihre eigene Gestaltung mit — deshalb bekommt der Rahmen weder
   Kartenrand noch Polster, sonst säße ein Kasten im Kasten. */
.kalk-huelle { margin: 0; padding: 0; }
.kalk-rahmen { display: block; width: 100%; height: calc(100vh - 96px); border: 0; border-radius: 14px; background: #eff3ef; }
@media (max-width: 560px) {
  /* Am Handy die ganze Fläche: Der Inhaltsbereich hat dort Seitenpolster, das hier stört. */
  main.content:has(.kalk-huelle) { padding: 0; }
  .kalk-rahmen { height: calc(100dvh - 52px); border-radius: 0; }
}

/* ---- Kalkulator über die volle Breite ----------------------------------- */
/* Die Seite ist auf die ganze Fensterbreite ausgelegt: erst dann zeigt sie ihre drei
   Spalten (Gewerke · Eingaben · Aufschlüsselung mit Materialkosten). In der App gingen
   291 px an Seitenleiste und Polster verloren — die dritte Spalte fiel weg und man
   musste weit scrollen. Deshalb hier: kein Polster, keine Breitenbegrenzung, und die
   Seitenleiste schwebt über der Seite statt Platz zu nehmen.
   Der Kalkulator hat seine eigene Gewerke-Leiste, doppelte Navigation nebeneinander
   wäre ohnehin verschenkter Platz. Über den Menü-Knopf oben links kommt sie herein. */
body.view-kalkulator main.content { max-width: none; padding: 0; }
body.view-kalkulator .kalk-rahmen { height: calc(100vh - var(--topbar-h, 56px)); border-radius: 0; }

@media (min-width: 861px) {
  body.view-kalkulator nav.side {
    display: block !important;          /* schlägt eine gemerkte „nav-zu"-Einstellung */
    position: fixed; left: 0; top: var(--topbar-h, 56px); z-index: 56;
    transform: translateX(-100%); transition: transform .18s ease;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .2);
  }
  body.view-kalkulator.nav-open nav.side { transform: translateX(0); }
  body.view-kalkulator.nav-open .nav-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .42); z-index: 55;
  }
}

/* Der Materialkatalog liegt ÜBER einem offenen Fenster (z. B. dem Beleg-Editor),
   damit er es nicht verdrängt — dieselbe Ebene wie der Dokument-Betrachter. */
.modal-backdrop.matkat-ueber { z-index: 70; }

/* ---- Tablet: breit UND mit dem Finger bedient ---------------------------
   Die App ist am Rechner entstanden. Die Symbolknöpfe in den Listen sind 27 × 27 px —
   mit der Maus trifft man das, mit dem Finger nicht. Apple empfiehlt 44 px, Google 48.
   Am Telefon greifen dafür schon eigene Regeln (max-width: 560px); die Lücke war genau
   das Tablet: breiter Bildschirm, also „Rechner-Layout", aber Bedienung mit dem Finger.
   Deshalb hier nach der ZEIGEART und erst ab 700 px — am Telefon ändert sich nichts. */
@media (pointer: coarse) and (min-width: 700px) {
  .data button, .data a.btn { min-width: 40px; min-height: 40px; padding: 8px 10px; font-size: 15px; }
  /* Lieber zwei Reihen Knöpfe als eine, die am Rand abgeschnitten ist. */
  .data td > div { gap: 6px !important; flex-wrap: wrap; }
  nav.side button { padding: 12px; font-size: 15px; }
  .rech-menu-item { min-height: 44px; }
  .btn.small, .btn { min-height: 40px; }
  .chip, .matkat-chip, .tab, .tabs button { min-height: 38px; }
  input, select, textarea { min-height: 40px; }
  /* Die Kacheln der Startseite sind zum Antippen da — etwas größer. */
  .home-tile { min-height: 84px; }
}

/* ---- Kopfzeile auf dem Tablet: eine Zeile statt zwei --------------------
   Gemessen bei 1046 px mit dem echten Firmennamen und Logo: 115,75 px hoch, weil die
   Marke so breit wird, dass die Knöpfe rechts umbrechen. Das ist vor dem ersten Inhalt
   fast ein Sechstel des Bildschirms. In diesem Breitenbereich darf sie nicht umbrechen;
   stattdessen weicht, was am wenigsten trägt: die Unterzeile und der Spruch. */
@media (min-width: 700px) and (max-width: 1200px) {
  header.topbar { flex-wrap: nowrap; }
  header.topbar .brand { min-width: 0; }
  header.topbar .brand-text { min-width: 0; }
  header.topbar .brand-text small { display: none; }
  header.topbar .brand-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  header.topbar .topbar-spruch { display: none; }
}

/* Auf Fingergeräten haben zwei Knöpfe der Kopfzeile keinen Sinn: „Seite als Fenster
   ablegen" und „auf den 2. Bildschirm ziehen" gibt es dort gar nicht. Sie kosten nur
   Platz — und Platz ist genau das, was oben fehlt. */
@media (pointer: coarse) {
  header.topbar .topbar-winbtn[title^="Diese Seite als Fenster"],
  header.topbar .topbar-winbtn[title^="Seite in EIGENEM Fenster"] { display: none; }
}

/* Suchfeld in der Belegliste (Rechnungen & Finanzen) — mit sichtbarer Lupe */
.rech-suchbox { position: relative; display: flex; align-items: center; flex: 1 1 260px; min-width: 0; }
.rech-suchbox svg { position: absolute; left: 10px; pointer-events: none; opacity: .5; }
.rech-suchfeld { width: 100%; min-width: 0; padding: 9px 12px 9px 33px; border: 1px solid #cfd6e0;
  border-radius: 9px; font-size: 14px; background: #fff; }
.rech-suchfeld:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(30,166,114,.14); }
.zuord-zahlung { margin-left: 6px; border: 1px solid var(--brand); background: #fff; color: var(--brand-dark);
  border-radius: 7px; font-size: 11.5px; font-weight: 600; padding: 2px 7px; cursor: pointer; }
.zuord-zahlung:hover { background: var(--brand); color: #fff; }
.zuord-zahlung:disabled { opacity: .5; cursor: default; }

/* Erledigte Buchungen im Kontoauszug: gruen hinterlegt.
   Erledigt heisst: Beleg zugeordnet, von Hand als erledigt markiert, ODER eine Zahlung,
   zu der es nie eine Rechnung gibt (Krankenkasse, SOKA-BAU, Finanzamt, Lohn …).
   Vorher war nur der Text gruen und die Zeile blieb weiss — auf 52 Zeilen sah man dann
   nicht auf einen Blick, was noch offen ist. */
.konto-table tr.tx-ok td { background: #eef9f2; }
.konto-table tr.tx-ok td:first-child { box-shadow: inset 3px 0 0 var(--brand); }

/* Einnahmen-Ueberschuss-Rechnung */
.euer-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; margin-bottom: 14px; }
.euer-block { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #fff; }
.euer-block h3 { margin: 0 0 8px; font-size: 13.5px; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.euer-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13.5px; align-items: baseline; }
.euer-zeile > span { flex: 1 1 auto; min-width: 0; }
.euer-zeile > b { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.euer-anz { color: var(--muted); font-size: 12px; }
.euer-summe { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 7px; font-weight: 700; }
.euer-ergebnis { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border: 2px solid var(--brand); border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; background: #eef9f2; }
.euer-ergebnis > b { font-size: 24px; font-variant-numeric: tabular-nums; }
.euer-ergebnis > small { flex: 1 1 100%; color: var(--muted); font-size: 12px; }
.euer-ergebnis.minus { border-color: #e0455e; background: #fdecee; }
.euer-hinweis { background: #fff8e6; border: 1px solid #e0a800; border-radius: 8px;
  padding: 8px 11px; margin-bottom: 8px; font-size: 12.5px; color: #8a6d1f; }
@media (max-width: 560px) { .euer-spalten { grid-template-columns: 1fr; } .euer-ergebnis > b { font-size: 20px; } }

/* Dokumente schreiben */
.schr-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; margin-bottom: 8px; background: #fff; }
.schr-titel { flex: 1 1 220px; min-width: 0; text-align: left; border: 0; background: none; cursor: pointer;
  font: inherit; display: flex; flex-direction: column; gap: 2px; padding: 0; }
.schr-titel b { font-size: 14.5px; }
.schr-titel .hint { margin: 0; font-size: 12px; }
.schr-akt { display: flex; gap: 6px; flex-wrap: wrap; }
.schr-leiste { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin: 10px 0 0;
  border: 1px solid var(--line); border-bottom: 0; border-radius: 9px 9px 0 0; padding: 7px 9px; background: var(--bg); }
.schr-trenn { width: 1px; height: 20px; background: var(--line); margin: 0 3px; }
.schr-feld { border: 1px solid var(--line); border-radius: 0 0 9px 9px; padding: 18px 22px; min-height: 46vh;
  background: #fff; font-size: 15px; line-height: 1.55; outline: none; overflow-wrap: break-word; }
.schr-feld:focus { border-color: var(--brand); }
.schr-feld h1 { font-size: 21px; margin: 14px 0 8px; }
.schr-feld h2 { font-size: 17px; margin: 12px 0 6px; }
.schr-feld p { margin: 0 0 9px; }
.schr-feld ul, .schr-feld ol { margin: 0 0 9px; padding-left: 26px; }
@media (max-width: 560px) { .schr-feld { padding: 12px 14px; min-height: 40vh; } .schr-akt { width: 100%; } }

/* Beleg-Editor wie ein Blatt Papier: mittig und in fester Breite.
   Auf einem breiten Monitor lief der Editor sonst ueber die ganze Flaeche — Kunde ganz
   links, Betreff ganz rechts, und die Positionszeile so weit auseinandergezogen, dass man
   den Blick von der Bezeichnung bis zum Betrag ueber 2000 px fuehren musste.
   1280 px ist bewusst deutlich mehr als A4 (794 px): Die Positionstabelle hat acht Spalten und
   waere in echter A4-Breite unlesbar eng. Die Wirkung — ein Dokument in der Mitte — bleibt. */
main.content:has(> .rech-editor) { display: block; }
.rech-editor {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 2px 14px rgba(20, 32, 27, .07);
}
/* Unter 1180 px bleibt es wie bisher volle Breite — dort ist der Platz ohnehin knapp. */
@media (max-width: 1360px) { .rech-editor { max-width: none; box-shadow: none; } }

/* Kundenliste als Tabelle */
.kunden-table th.kt-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.kunden-table th.kt-sort:hover { color: var(--brand-dark); }
.kunden-table th.kt-sort.aktiv { color: var(--brand-dark); }
.kunden-table td { vertical-align: middle; }
.kt-status { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11.5px;
  font-weight: 700; color: #1c2434; white-space: nowrap; }
.kt-btn { background: #fff; border: 1px solid #e6eaf1; border-radius: 7px; cursor: pointer;
  padding: 4px 7px; margin-left: 4px; color: #66707f; line-height: 1; }
.kt-btn:hover { border-color: var(--brand); color: var(--brand-dark); }
@media (max-width: 700px) {
  .kunden-table thead { display: none; }
  .kunden-table tr { display: block; border: 1px solid var(--line); border-radius: 10px;
    padding: 8px 10px; margin-bottom: 8px; background: #fff; }
  .kunden-table td { display: block; border: 0; padding: 2px 0; }
  .kunden-table td:last-child { text-align: left !important; margin-top: 6px; }
  .kt-btn { margin: 0 6px 0 0; padding: 6px 10px; }
}

/* KI-Vorschlag im Beleg-Editor */
.ki-pos { border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; margin-bottom: 7px; background: #fff; }
.ki-pos-kopf { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.ki-pos-txt { color: var(--muted); font-size: 12.5px; margin-top: 3px; white-space: pre-wrap; }
.ki-textknopf { border: 1px solid #bfe3d0; background: #eef9f2; color: var(--brand-dark);
  border-radius: 7px; cursor: pointer; font-size: 13px; padding: 3px 8px; line-height: 1; }
.ki-textknopf:hover { border-color: var(--brand); background: #e3f4ea; }
.ki-textknopf:disabled { opacity: .5; cursor: default; }
.ki-zeile { display: flex; align-items: center; gap: 7px; margin-top: 6px; flex-wrap: wrap; }
.ki-zeile .mic-btn { padding: 3px 9px; height: 26px; min-height: 0; }

/* Artikelseite: Kopfleiste und Karten */
.art-kopf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 12px; }
.art-liste { display: flex; flex-direction: column; gap: 8px; }
.art-gruppe { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin: 10px 0 2px; display: flex; align-items: center; gap: 8px; }
.art-gruppe .art-anz { background: var(--bg); border-radius: 9px; padding: 1px 8px; font-weight: 600; }
.art-karte { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px; background: #fff; }
.art-karte.waehlbar { cursor: pointer; }
.art-karte.waehlbar:hover { border-color: var(--brand); background: #f7fdfa; }
.art-karte.aktiv { border-color: #2f6df6; box-shadow: inset 3px 0 0 #2f6df6; }
.art-haupt { flex: 1 1 auto; min-width: 0; }
.art-name { font-weight: 600; font-size: 14px; color: #1c2434; }
.art-txt { color: var(--muted); font-size: 12px; margin-top: 3px; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.art-txt.auf { -webkit-line-clamp: unset; overflow: visible; }
.art-herkunft { display: inline-block; margin-top: 5px; font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; }
.art-zahlen { flex: 0 0 auto; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.art-zahlen b { display: block; font-size: 14.5px; }
.art-akt { flex: 0 0 auto; display: flex; gap: 5px; align-items: flex-start; }
.art-form { border-top: 2px solid var(--line); margin-top: 18px; padding-top: 14px; }
@media (max-width: 620px) {
  .art-karte { flex-wrap: wrap; }
  .art-zahlen { text-align: left; }
  .art-akt { width: 100%; }
}

/* Menü bleibt beim Zoomen gleich groß (siehe menueZoomAusgleich in app.js).
   `zoom` skaliert auch Abstände und Höhen — deshalb werden top und height durch denselben
   Faktor geteilt, sonst klebt die Leiste an der falschen Stelle oder ist zu kurz. */
@media (min-width: 1024px) and (pointer: fine) {
  nav.side {
    zoom: var(--menue-zoom, 1);
    top: calc(var(--topbar-h, 56px) / var(--menue-zoom, 1));
    height: calc((100vh - var(--topbar-h, 56px)) / var(--menue-zoom, 1));
  }
}

/* ===== Elektro-Materialkatalog =========================================
   Gestaltung nach dem Entwurf „Materialkatalog": warmes Papier statt Weiss,
   Space Grotesk fuer Text, IBM Plex Mono fuer alles Technische (Nummern,
   Beschriftungen). Bewusst auf .ek-* begrenzt, damit die uebrige App
   unveraendert bleibt. Die Schriften sind NICHT von Google eingebunden --
   die App laedt keine fremden Ressourcen; es gelten die Systemschriften,
   mit denselben Groessen und Abstaenden wie im Entwurf. */
.ek-kopf { border-bottom: 2px solid #16181a; border-radius: 3px 3px 0 0; }
.ek-kicker { font-family: 'IBM Plex Mono', 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8a8375; }
.ek-titel { margin: 6px 0 4px; font-size: 30px; line-height: 1.05; font-weight: 700; letter-spacing: -.02em; }
.ek-lead { margin: 0; font-size: 15px; color: #5d5749; max-width: 62ch; }

.ek-karte { background: #f4f1ea; }
.ek-quelle { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: #8a8375; margin-bottom: 14px; }

.ek-spalten { display: grid; grid-template-columns: 264px 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .ek-spalten { grid-template-columns: 1fr; } }

.ek-gruppen { background: #fff; border: 1px solid #e2dcce; border-radius: 3px; padding: 14px 0; }
.ek-gruppen-kopf { display: flex; flex-direction: column; gap: 2px; padding: 0 16px 12px;
  border-bottom: 2px solid #16181a; margin-bottom: 8px; font-weight: 700; font-size: 15px; }
.ek-zahl { font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 11px;
  letter-spacing: .08em; color: #8a8375; font-weight: 400; }
.ek-hg { padding: 12px 16px 4px; font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #8a8375; }
.ek-gruppe { display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 16px; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 14.5px; color: #33372f; text-align: left; }
.ek-gruppe:hover { background: #faf8f3; }
.ek-gruppe.aktiv { background: #16181a; color: #f4f1ea; }
.ek-gruppe-zahl { font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; color: #8a8375; flex: none; }
.ek-gruppe.aktiv .ek-gruppe-zahl { color: #c9c2b2; }

.ek-liste { background: #fff; border: 1px solid #e2dcce; border-radius: 3px; padding: 18px 20px 22px; min-width: 0;
  /* Der Umbruch richtet sich nach der BREITE DIESER SPALTE, nicht nach dem Browserfenster.
     Bei offenem Menue ist der Inhaltsbereich deutlich schmaler als das Fenster - eine
     Medienabfrage auf das Fenster greift dann zu spaet und das Raster bricht um. */
  container-type: inline-size; }
.ek-gruppe-titel { margin: 0 0 14px; font-size: 19px; font-weight: 700; letter-spacing: -.01em;
  padding-bottom: 12px; border-bottom: 2px solid #16181a; }
.ek-werkzeuge { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.ek-suche { flex: 1 1 320px; height: 44px; padding: 0 13px; border: 1px solid #e2dcce;
  border-radius: 2px; background: #faf8f3; font: inherit; font-size: 15px; }
.ek-suche:focus { outline: none; border-color: #16181a; background: #fff; }
.ek-sort { height: 44px; border: 1px solid #e2dcce; border-radius: 2px; background: #faf8f3; font: inherit; padding: 0 10px; }
.ek-schalter { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: #33372f; cursor: pointer; }
.ek-schalter input { width: 19px; height: 19px; accent-color: #16181a; cursor: pointer; }
.ek-treffer { font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px;
  letter-spacing: .06em; color: #8a8375; margin-bottom: 10px; }

.ek-tabelle { display: flex; flex-direction: column; }
.ek-zeile { display: grid; grid-template-columns: minmax(0,1fr) 150px 54px 120px 64px 116px;
  gap: 0 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid #f0ede4; font-size: 14.5px; }
.ek-kopfzeile { padding: 8px 0; background: #faf8f3; border-bottom: 1px solid #e2dcce;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: #8a8375; }
.ek-r { text-align: right; }
.ek-bez { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ek-bez strong { font-weight: 600; line-height: 1.3; }
.ek-bez small { color: #5d5749; font-size: 13px; line-height: 1.3; }
.ek-bez code { font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: #8a8375; background: none; padding: 0; }
.ek-typ { font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; color: #5d5749;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-preis { font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-weight: 600; display: flex;
  flex-direction: column; align-items: flex-end; gap: 1px; }
.ek-preis small { font-weight: 400; font-size: 10.5px; color: #8a8375; letter-spacing: .06em; }
.ek-mehr { margin-top: 14px; width: 100%; }

/* Am Handy wird aus der Tabelle eine Karte je Artikel - sechs Spalten passen dort nicht. */
@container (max-width: 700px) {
  .ek-zeile { grid-template-columns: minmax(0,1fr) auto; gap: 4px 10px; padding: 12px 0; }
  .ek-kopfzeile { display: none; }
  .ek-typ, .ek-zeile > span:nth-child(3), .ek-zeile > span:nth-child(5) { display: none; }
  .ek-titel { font-size: 24px; }
}

/* ===== Materialkalkulator — dasselbe Design wie der Materialkatalog ===== */
.mk-kopf { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end; }
.mk-kopfknoepfe { display: flex; gap: 10px; flex: none; }
.mk-eingaben { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 16px; }
.mk-gruppe { background: #fff; border: 1px solid #e2dcce; border-radius: 3px; padding: 18px 20px; }
.mk-gruppe-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mk-gruppe-kopf h3 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.mk-punkt { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.mk-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid #f4f1ea; }
.mk-zeile label { font-size: 14.5px; color: #33372f; line-height: 1.25; }
.mk-stepper { display: flex; align-items: center; gap: 6px; flex: none; }
.mk-stepper button { width: 40px; height: 40px; border: 1px solid #e2dcce; background: #faf8f3;
  border-radius: 2px; font-size: 19px; line-height: 1; color: #5d5749; cursor: pointer; }
.mk-stepper button:hover { border-color: #16181a; color: #16181a; }
.mk-wert { width: 66px; height: 40px; text-align: center; border: 1px solid #e2dcce; border-radius: 2px;
  background: #fff; font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 15px; font-weight: 500; }

.mk-optionen { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 12px 18px; }
.mk-liste { padding: 0; overflow: hidden; }
.mk-liste-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 18px 20px 12px; border-bottom: 2px solid #16181a; background: #fff; }
.mk-liste-kopf h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.mk-tabelle { background: #fff; }
.mk-treihe { display: grid; grid-template-columns: minmax(0,1fr) 120px 118px 120px; gap: 0 14px;
  align-items: center; padding: 9px 20px; border-bottom: 1px solid #f0ede4; font-size: 14.5px; }
.mk-tkopf { background: #faf8f3; font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #8a8375; }
.mk-pos { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mk-menge, .mk-summe { font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; }
.mk-summe { font-weight: 600; }
.mk-preis { width: 100%; max-width: 108px; height: 34px; text-align: right; border: 1px solid transparent;
  border-radius: 2px; background: transparent; font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px; padding: 0 7px; }
.mk-preis:hover { border-color: #e2dcce; background: #faf8f3; }
.mk-preis:focus { outline: none; border-color: #16181a; background: #fff; }
.mk-preis.eigen { color: #1f5ae0; font-weight: 600; }
.mk-summen { background: #fff; border-top: 2px solid #16181a; padding: 14px 20px; }
.mk-summen > div { display: flex; justify-content: space-between; gap: 18px; padding: 5px 0; font-size: 15px; }
.mk-summen .mk-brutto { border-top: 1px solid #e2dcce; margin-top: 6px; padding-top: 10px; font-size: 18px; }
.mk-hinweis { padding: 0 20px 14px; margin: 0; background: #fff; }
.mk-aktionen { padding: 0 20px 18px; background: #fff; }

@media print {
  [data-noprint] { display: none !important; }
  nav.side, header.topbar { display: none !important; }
}
@media (max-width: 760px) {
  .mk-treihe { grid-template-columns: minmax(0,1fr) 92px; gap: 3px 10px; padding: 10px 14px; }
  .mk-tkopf { display: none; }
  .mk-treihe > span:nth-child(3) { display: none; }
  .mk-kopfknoepfe { width: 100%; }
  .mk-kopfknoepfe .btn { flex: 1; }
}

/* ===== Materialkatalog / -kalkulator: Entwurf 1:1 =======================
   Nachtrag. Zuvor hatte ich drei Dinge an die App angeglichen — den gruenen
   App-Knopf, den Papierton nur auf der Karte und einen kleineren Titel.
   Der Entwurf gibt aber Schwarz, ganzflaechiges Papier und 38 px vor. */
body.view-elektrokatalog main.content,
body.view-materialkalkulator main.content { background: #f4f1ea; }
body.view-elektrokatalog .card,
body.view-materialkalkulator .card { box-shadow: none; }
body.view-elektrokatalog .ek-titel,
body.view-materialkalkulator .ek-titel { font-size: 38px; }

/* Knoepfe wie im Entwurf: schwarz, eckig (2 px), 46 px hoch. */
body.view-elektrokatalog .btn,
body.view-materialkalkulator .btn {
  background: #16181a; color: #f4f1ea; border: none; border-radius: 2px;
  height: 46px; padding: 0 22px; font-weight: 600; box-shadow: none;
}
body.view-elektrokatalog .btn:hover,
body.view-materialkalkulator .btn:hover { background: #33372f; }
body.view-elektrokatalog .btn.secondary,
body.view-materialkalkulator .btn.secondary {
  background: transparent; color: #5d5749; border: 1.5px solid #c9c2b2; font-weight: 500;
}
body.view-elektrokatalog .btn.secondary:hover,
body.view-materialkalkulator .btn.secondary:hover { border-color: #16181a; color: #16181a; background: transparent; }
body.view-elektrokatalog .btn.small,
body.view-materialkalkulator .btn.small { height: 36px; padding: 0 13px; font-size: 13px; font-weight: 500; }

@media (max-width: 760px) {
  body.view-elektrokatalog .ek-titel,
  body.view-materialkalkulator .ek-titel { font-size: 24px; }
}

/* Die Schriften des Entwurfs — selbst ausgeliefert aus /fonts (siehe schriften.css).
   Kein Aufruf an Google: Sonst ginge die IP-Adresse jedes Besuchers dorthin, und genau
   das hat das LG Muenchen 2022 als DSGVO-Verstoss gewertet. Beide stehen unter der
   SIL Open Font License, Selbst-Ausliefern ist ausdruecklich erlaubt. */
body.view-elektrokatalog, body.view-materialkalkulator,
body.view-elektrokatalog main.content, body.view-materialkalkulator main.content {
  font-family: 'Space Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Ueberschriften: Die App setzt fuer h1-h3 eine eigene Serifenschrift, die die Regel am
   body schlaegt. Auf diesen beiden Seiten gilt der Entwurf — Space Grotesk, auch fuer
   Ueberschriften. */
body.view-elektrokatalog h1, body.view-elektrokatalog h2, body.view-elektrokatalog h3,
body.view-materialkalkulator h1, body.view-materialkalkulator h2, body.view-materialkalkulator h3,
body.view-elektrokatalog .ek-titel, body.view-materialkalkulator .ek-titel,
body.view-elektrokatalog .btn, body.view-materialkalkulator .btn,
body.view-elektrokatalog input, body.view-elektrokatalog select,
body.view-materialkalkulator input, body.view-materialkalkulator select {
  font-family: 'Space Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Zahlen und technische Angaben bleiben in der Monospace des Entwurfs. */
body.view-elektrokatalog .mk-wert, body.view-materialkalkulator .mk-wert,
body.view-elektrokatalog .mk-preis, body.view-materialkalkulator .mk-preis {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
}